/* Case Management: the card queue, pretest and form rows, card rows. Loaded in the order web/index.html lists them; the order is the cascade. */
/* Submitted card queue. Flat rows inside one bordered container: the old build nested a card per row inside a
   card, which reads as scaffolding rather than a list. Elevation is declared once (border, no shadow). */
.q-box { margin-top:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.q-head { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line-soft); }
.q-title { font-size:13px; font-weight:650; color:var(--ink); }
.q-count { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--muted);
           background:var(--panel2,#f4f6fb); border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px;
           font-variant-numeric:tabular-nums; }
.q-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
         padding:11px 14px; background:none; border:0; border-top:1px solid var(--line-soft);
         font:inherit; color:inherit; transition:background 120ms ease-out; }
.q-row:first-of-type { border-top:0; }
.q-row:hover { background:var(--panel2); }
.q-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* display:block matters: these are spans, so without it min-width/overflow never apply and a long URL shoves
   the action control out of the row instead of ellipsising. */
.q-main { display:block; min-width:0; flex:1; }
/* Long URLs truncate instead of wrapping the row into two ragged lines; the full value stays in the tooltip. */
.q-site { display:block; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-meta { display:block; margin-top:2px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-sep { opacity:.5; margin:0 5px; }
.q-act { flex:0 0 auto; font-size:12px; font-weight:600; color:var(--muted); transition:color 120ms ease-out; }
.q-row:hover .q-act, .q-row:focus-visible .q-act { color:var(--accent); }
/* Narrow screens: the full action label crowded the meta line until the date truncated. Swap to a compact label
   rather than dropping the date, which is how an analyst tells two batches for the same site apart. */
.q-act-short, .q-tag-short { display:none; }
@media (max-width:560px) {
  .q-act-long, .q-tag-long { display:none; }
  .q-act-short, .q-tag-short { display:inline; }
  .q-row { padding:11px 12px; gap:8px; }
}
.q-tag { flex:0 0 auto; font-size:11.5px; font-weight:600; color:var(--ok);
         background:var(--ok-soft); border:1px solid var(--ok-line); border-radius:999px; padding:2px 9px; }
.q-row.is-match { background:var(--ok-soft); }
.q-row.is-match:hover { background:var(--ok-soft); }

/* Pretest rows: question on the left, control on the right. These are long questions ("Does the website offer
   luck-based games, including slots?") paired with a two-option dropdown; stacking them put a wide label above a
   narrow control and made the answers hard to scan down. One column, answers aligned in a rail. */
/* Form rows: question on the left, control on the right. Grid rather than flex, because the row has three
   parts (label / control / hint) and the hint has to sit under the CONTROL, not under the whole row. The flex
   version positioned it with margin-left:calc(52% + gap), which pushed it outside the card at wide widths.
   The control column is capped: a Yes/No dropdown stretched across half a 1400px screen reads as a mistake,
   and the eye loses the label it belongs to. */
.gw-rows { display:flex; flex-direction:column; }
.gw-info {
  display:inline-grid; place-items:center; width:15px; height:15px; margin-left:6px; border-radius:50%;
  font-size:11px; line-height:1; color:var(--muted); border:1px solid var(--line); cursor:help;
  vertical-align:middle; font-weight:600;
}
.gw-info:hover, .gw-info:focus-visible { color:var(--acc); border-color:var(--acc); }  /* outline:none removed — it is tabindex=0 */
.gw-rows .field {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px);
  grid-template-areas:"label control" ".     hint";
  column-gap:28px; row-gap:4px; align-items:center;
  padding:10px 0; border-top:1px solid var(--line-soft);
}
.gw-rows .field:first-child { border-top:0; }
.gw-rows .field > span:not(.hint) { grid-area:label; font-size:12.5px; font-weight:500; letter-spacing:0;
                                    text-transform:none; color:var(--ink); line-height:1.45; }
.gw-rows .field > select, .gw-rows .field > input, .gw-rows .field > textarea { grid-area:control; width:100%; min-width:0; }
.gw-rows .field > .hint { grid-area:hint; margin:0; font-size:11.5px; }
/* Tested on Date: the typed m/d/yyyy box with a calendar button beside it. The native date input is hidden under the button
   (not display:none, which would stop its picker opening) so the picker drops down from there. */
.trk-datectl { position:relative; display:flex; gap:6px; align-items:stretch; min-width:0; }
.gw-rows .field > .trk-datectl { grid-area:control; width:100%; }
.trk-datectl > input[data-mdy] { flex:1 1 auto; min-width:0; }
.trk-datectl > .trk-datebtn { flex:0 0 auto; padding:0 12px; }
.trk-datectl > input[type=date] { position:absolute; right:0; bottom:0; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
/* A 3-row textarea is much taller than its label; centring against it looks like a mistake. */
.gw-rows .field:has(textarea) > span:not(.hint) { align-self:start; padding-top:7px; }
/* Tick lists (pharma checklists): the control column holds a stack of checkbox rows. */
.gw-rows .field > .gw-checks { grid-area:control; display:flex; flex-direction:column; gap:2px; padding:6px 8px;
                               border:1px solid var(--line); border-radius:9px; min-width:0; }
.gw-rows .field:has(.gw-checks) > span:not(.hint) { align-self:start; padding-top:7px; }
.gw-check { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.4; padding:3px 0; cursor:pointer; }
.gw-check input { margin-top:2px; width:15px; height:15px; flex:0 0 auto; accent-color:var(--acc); }
.field.is-filled-req > .gw-checks { background:var(--ok-soft); }
.field.is-missing > .gw-checks { background:var(--bad-soft); }
.gw-note { margin:10px 0 2px; padding:9px 12px; border-radius:9px; background:var(--panel2); font-size:12px; line-height:1.5; color:var(--muted); }
/* Questions after the pretest stopped: present but plainly inert, so the analyst can see what was skipped. */
.gw-rows .field.gw-off > span:not(.hint) { color:var(--faint); }
.gw-rows .field.gw-off > .hint { opacity:.55; }
/* The amber export-band marker was a boxed field in the 2-column grid. As a full-width row that box becomes a
   banner, and 16 of them in a row is a wall. Keep the meaning, drop the box. */
.gw-rows .field.trk-hl { background:rgba(255,192,0,.07); border:0; border-radius:0; padding:10px 10px; margin:0 -10px; }
/* Card row: the card number with that card's amount strip directly under it, in the control column. */
.trk-cardctl { display:flex; flex-direction:column; gap:6px; min-width:0; }
.gw-rows .field > .trk-cardctl { grid-area:control; width:100%; }
.trk-grid > .trk-cardrow { grid-column:1 / -1; }
.gw-rows .field.trk-cardrow > span:not(.hint) { align-self:start; padding-top:9px; }
.trk-camt { display:grid; grid-template-columns:minmax(0,1fr) minmax(84px,.75fr) minmax(0,1fr); gap:3px 6px; }
.trk-camt-cap { font-size:11px; line-height:1.3; color:var(--muted); font-weight:500; letter-spacing:.01em; }
.trk-camt > input, .trk-camt > select { width:100%; min-width:0; }
.trk-camt > [id^="trkFxNote"] { grid-column:1 / -1; margin:0 !important; }
.trk-camt > [id^="trkFxNote"]:empty { display:none; }
.trk-camt.is-off { opacity:.5; }
.trk-ccty { display:flex; flex-direction:column; gap:3px; min-width:0; }
.trk-ccty > input { width:100%; min-width:0; }
.trk-camt.is-off > * { cursor:not-allowed; }
@media (max-width:820px) {
  .gw-rows .field { grid-template-columns:minmax(0,1fr); grid-template-areas:"label" "control" "hint"; row-gap:5px; }
  .gw-rows .field:has(textarea) > span:not(.hint) { padding-top:0; }
}
/* Case list Delete column (admins and managers). */
.trk-delbtn { color:var(--bad,#dc2626); border-color:color-mix(in srgb, var(--bad,#dc2626) 35%, transparent); white-space:nowrap; }
.trk-delreq { display:inline-block; padding:2px 8px; margin-right:6px; border-radius:999px; font-size:11.5px; font-weight:600;
              color:#854F0B; background:#faeeda; white-space:nowrap; }