/* vantage · public/css/qrtext.css · Fix 1 · v1
   v1 (37.1 — Pete, 2026-10-24: "I need the QR mass text tool to be placed under the Eagan drop down"): QR MASS TEXT (qrtext.js).
   Every colour a token; every measure rem, %, or the type scale — never a fixed width. The QR is the form's own paper and ink
   (a code a camera reads is dark on light in either mode). */

.qrt { max-width: 52rem; }
.qrt__head { gap: calc(var(--pad) / 2); }
.qrt__field { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); width: 100%; }
.qrt__label { font-weight: 700; }
.qrt__row { display: flex; align-items: stretch; gap: calc(var(--pad) / 2); width: 100%; min-width: 0; }
.qrt__row > .btn { width: auto; flex: 0 0 auto; }
.qrt__row--count { align-items: center; justify-content: space-between; }
.qrt__in { flex: 1 1 auto; width: 100%; min-width: 0; font: inherit; font-size: var(--t-body); line-height: var(--lh); padding: calc(var(--pad) * 0.75); background: var(--card); color: var(--text); border: var(--border); border-radius: var(--radius-cap); }
.qrt__in::placeholder { color: var(--text2); }
.qrt__in:focus-visible { outline: var(--selected-border); outline-offset: calc(var(--pad) / 4); }
.qrt__nums { resize: vertical; min-height: 8rem; }
.qrt__seg { display: inline-flex; gap: calc(var(--pad) / 2); align-self: flex-start; }
.qrt__seg > .btn { width: auto; min-width: 6rem; }
.qrt__said, .qrt__hint, .qrt__count, .qrt__bad { margin: 0; }
.qrt__said:empty, .qrt__bad:empty, .qrt__hint:empty { display: none; }
.qrt__bad { color: var(--text2); overflow-wrap: anywhere; }
.qrt__clear { width: auto; }

/* choosing a sheet: in place under the row, never floating */
.qrt__picker { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); padding: calc(var(--pad) / 2); background: var(--card); border: var(--border); border-radius: var(--radius-cap); }
.qrt__picker[hidden], .qrt__tabs[hidden], .qrt__gridwrap[hidden], .qrt__gridbar[hidden], .qrt__qr[hidden], .qrt__send[hidden] { display: none; }
.qrt__list { display: flex; flex-direction: column; gap: calc(var(--pad) / 3); max-height: 50vh; overflow-y: auto; }
.qrt__file { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.1rem; }
.qrt__filename { font-weight: 700; overflow-wrap: anywhere; }
.qrt__filesub { font-size: var(--t-small); opacity: 0.85; }
.qrt__tabs { display: flex; gap: calc(var(--pad) / 2); overflow-x: auto; scrollbar-width: none; padding-block: 0.15rem; }
.qrt__tabs::-webkit-scrollbar { display: none; }
.qrt__tab { width: auto; flex: 0 0 auto; white-space: nowrap; }

/* the tab as a grid of its cells — scrolls in its own box, the letters and numbers stuck */
.qrt__gridwrap { width: 100%; max-height: 55vh; overflow: auto; border: var(--border); border-radius: var(--radius-cap); background: var(--card); overscroll-behavior: contain; }
.qrt__grid { border-collapse: collapse; user-select: none; -webkit-user-select: none; font-size: var(--t-small); }
.qrt__grid th, .qrt__grid td { border: 0.06rem solid var(--raised); padding: 0.3rem 0.6rem; white-space: nowrap; color: var(--text); }
.qrt__grid thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); color: var(--text2); cursor: pointer; }
.qrt__grid tbody th { position: sticky; left: 0; z-index: 1; background: var(--panel); color: var(--text2); cursor: pointer; text-align: right; }
.qrt__grid thead th.qrt__corner { left: 0; z-index: 3; cursor: default; }
.qrt__grid td { cursor: cell; }
.qrt__grid td.is-number { color: var(--crew-green-a); font-weight: 700; }
.qrt__grid td.is-picked { background: var(--raised); outline: var(--selected-border); outline-offset: -0.15rem; }
.qrt__gridbar { display: flex; flex-wrap: wrap; gap: calc(var(--pad) / 2); }
.qrt__gridbar > .btn { width: auto; }

/* the groups: a button each, green once tapped, its QR beside it */
.qrt__groups { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); width: 100%; }
.qrt__groups:empty { display: none; }
.qrt__card { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); padding: calc(var(--pad) / 2); background: var(--card); border: var(--border); border-radius: var(--radius-cap); }
.qrt__cardrow { display: flex; gap: calc(var(--pad) / 2); align-items: stretch; }
.qrt__grp { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem var(--pad); text-decoration: none; text-align: left; min-height: 3rem; }
.qrt__grpname { font-weight: 700; font-size: var(--t-body); }
.qrt__grpsub { font-size: var(--t-small); opacity: 0.85; }
.qrt__tick { display: none; margin-left: auto; font-weight: 700; }
.qrt__grp.is-opened { --bh: 142; --bc: 0.2; }   /* (tapped: the button's own lightness, turned green) */
.qrt__grp.is-opened .qrt__tick { display: inline; }
.qrt__qrbtn { width: auto; flex: 0 0 auto; min-width: 3.5rem; }
.qrt__qr { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pad) / 2); }
.qrt__qrsvg { width: min(16rem, 70vw); height: auto; display: block; border-radius: var(--radius-cap); }
.qrt__qrpaper { fill: var(--form-paper); }
.qrt__qrink { fill: var(--form-ink); }
.qrt__qrsaid { margin: 0; text-align: center; }
.qrt__send { width: auto; flex: 0 0 auto; text-decoration: none; display: inline-flex; align-items: center; }