/* ──────────────────────────────────────────────────────────────────────────
   triage-card.css — BLOCK-146 T2. The card that follows a guest scan.

   Scope: every selector is prefixed `tc-` or lives inside #triageCardMount.
   Nothing here may leak into the existing result page. No CSS blur, anywhere,
   ever (.cursorrules hard rule 1).

   Layout law: correct at 375px with NO horizontal scroll. Nothing in this file
   sets a fixed px width, a min-width wider than ~300px, or a non-wrapping row.
   ────────────────────────────────────────────────────────────────────────── */

#triageCardMount { display: block; }

.tc-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 620px;
  margin: 20px auto 0;
  padding: 18px 16px 20px;
  background: var(--white, #fff);
  border: 1.5px solid var(--border, #e4e6ea);
  border-radius: var(--r16, 16px);
  font-family: inherit;
  color: var(--text1, #101828);
  overflow-wrap: break-word;
  word-break: break-word;
}
.tc-card * { box-sizing: border-box; }

/* ── header strip ───────────────────────────────────────────────────────── */
.tc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tc-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text4, #667085);
}
.tc-versions {
  font-size: 10px;
  color: var(--text4, #667085);   /* BLOCK-165 a11y: no opacity blend — 4.97:1 on white as printed */
  font-variant-numeric: tabular-nums;
}

/* ── the four labelled rows ─────────────────────────────────────────────── */
.tc-row { padding: 12px 0; border-top: 1px solid var(--border, #e4e6ea); }
.tc-row:first-of-type { border-top: none; padding-top: 0; }
.tc-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text3, #667085);
  margin-bottom: 6px;
}
.tc-value {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.2px;
  color: var(--text1, #101828);
}
.tc-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text3, #667085);
  margin-top: 6px;
}
.tc-prose {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text2, #344054);
  margin-top: 8px;
}

/* ── urgency tiers. Colour is redundant with the WORD, never instead of it ── */
.tc-tier {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.2;
  border: 2px solid currentColor;
}
.tc-tier-emergency  { color: #B42318; background: #FEF3F2; }
.tc-tier-today      { color: #B54708; background: #FFFAEB; }
.tc-tier-this-week  { color: #175CD3; background: #EFF8FF; }
.tc-tier-whenever   { color: #067647; background: #ECFDF3; }

.tc-hazard {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FEF3F2;
  border: 1px solid #FDA29B;
  font-size: 13px;
  line-height: 1.55;
  color: #912018;
}

/* ── role toggle ────────────────────────────────────────────────────────── */
.tc-roles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tc-role-btn {
  flex: 1 1 140px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e4e6ea);
  background: var(--bg2, #f7f8fa);
  color: var(--text3, #667085);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tc-role-btn[aria-pressed="true"] {
  background: var(--white, #fff);
  border-color: #175CD3;
  color: #175CD3;
}

/* ── the spoken line ────────────────────────────────────────────────────── */
.tc-say {
  padding: 14px;
  border-radius: 12px;
  background: var(--bg2, #f7f8fa);
  border: 1px solid var(--border, #e4e6ea);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text1, #101828);
}

/* ── confidence band ────────────────────────────────────────────────────── */
.tc-band { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tc-band-word { font-size: 15px; font-weight: 800; color: var(--text1, #101828); }
.tc-band-range {
  font-size: 12px;
  font-weight: 700;
  color: var(--text3, #667085);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg2, #f7f8fa);
  border: 1px solid var(--border, #e4e6ea);
}
.tc-band-caveat { font-size: 12px; line-height: 1.55; color: var(--text4, #667085); margin-top: 6px; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.tc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e4e6ea);
  background: var(--white, #fff);
  color: var(--text1, #101828);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tc-btn-primary { background: #175CD3; border-color: #175CD3; color: #fff; }
.tc-btn:disabled { opacity: .55; cursor: default; }

/* ── capture blocks ─────────────────────────────────────────────────────── */
.tc-capture {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #e4e6ea);
  background: var(--bg2, #f7f8fa);
}
.tc-capture + .tc-capture { margin-top: 10px; }
.tc-capture-title { font-size: 13px; font-weight: 800; color: var(--text1, #101828); margin-bottom: 8px; }
.tc-field { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-input {
  flex: 1 1 180px;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e4e6ea);
  background: var(--white, #fff);
  color: var(--text1, #101828);
  font-family: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming the viewport on focus */
}
.tc-field .tc-btn { flex: 0 1 auto; width: auto; min-width: 120px; }
.tc-consent { font-size: 11px; line-height: 1.55; color: var(--text4, #667085); margin-top: 8px; }
.tc-consent a { color: var(--text3, #667085); text-decoration: underline; }
.tc-deferred {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 700;
  color: #B54708;
  background: #FFFAEB;
  border: 1px solid #FEDF89;
  border-radius: 8px;
  padding: 8px 10px;
}
.tc-status { margin-top: 8px; font-size: 12.5px; line-height: 1.55; }
.tc-status-ok   { color: #067647; }
.tc-status-bad  { color: #B42318; }
.tc-status-wait { color: var(--text3, #667085); }
.tc-status a { color: inherit; text-decoration: underline; word-break: break-all; }

/* ── share + QR ─────────────────────────────────────────────────────────── */
.tc-share { margin-top: 14px; }
.tc-share-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.tc-qr {
  flex: 0 0 auto;
  width: 132px;
  max-width: 40vw;
  height: auto;
  background: #fff;
  border: 1px solid var(--border, #e4e6ea);
  border-radius: 8px;
  padding: 6px;
}
.tc-qr svg { display: block; width: 100%; height: auto; }
.tc-share-link { flex: 1 1 190px; min-width: 0; }
.tc-link {
  font-size: 12.5px;
  color: var(--text3, #667085);
  word-break: break-all;
  margin-bottom: 8px;
}

/* ── signature slot (lazily populated, never blocks first paint) ─────────── */
#signature-slot { display: block; margin-top: 14px; }
#signature-slot:empty { display: none; }

/* ── plain, deliberate empty states ─────────────────────────────────────── */
.tc-plain {
  padding: 14px;
  border-radius: 12px;
  background: var(--bg2, #f7f8fa);
  border: 1px solid var(--border, #e4e6ea);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text2, #344054);
}

/* ── unsettled (the reads did not agree; BLOCK-149) — same panel as a failure, its own hook ── */
.tc-unsettled {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 12px;
  background: #FFFAEB;
  border: 1px solid #FEDF89;
  font-size: 13.5px;
  line-height: 1.6;
  color: #93370D;
}

/* ── failure state (the card itself could not be built) ─────────────────── */
.tc-failed {
  padding: 14px;
  border-radius: 12px;
  background: #FFFAEB;
  border: 1px solid #FEDF89;
  font-size: 13.5px;
  line-height: 1.6;
  color: #93370D;
}

@media (max-width: 420px) {
  .tc-card { padding: 16px 13px 18px; border-radius: 14px; }
  .tc-value { font-size: 16px; }
  .tc-say { font-size: 14.5px; padding: 12px; }
  .tc-field .tc-btn { width: 100%; flex: 1 1 100%; }
  .tc-qr { width: 120px; max-width: 46vw; }
}

/* ── get a quote (BLOCK-157 THE MONEY EVENTS) ───────────────────────────────
   The button and the line that replaces it share ONE grid cell from first paint, so the cell is
   as tall as the taller of the two before anyone taps: the swap moves nothing below it, at 375 px
   or at 1440. The line is hidden with visibility, not display, for exactly that reason. */
.tc-quote { display: grid; }
.tc-quote > .tc-quote-btn,
.tc-quote > .tc-quote-line { grid-area: 1 / 1; }
.tc-quote-line {
  visibility: hidden;
  margin: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text1, #101828);
}
.tc-quote-done > .tc-quote-btn { visibility: hidden; }
.tc-quote-done > .tc-quote-line { visibility: visible; }
.tc-quote-line:focus { outline: none; }
.tc-quote-line:focus-visible { outline: 2px solid var(--text3, #667085); outline-offset: 2px; border-radius: 8px; }

/* BLOCK-166 SPANISH. The lead-in before an English hazard line on the es card, and the English consent
   twin under the Spanish rendering. Both exist only on the es path; the en card's CSS is unchanged. */
.tc-gate-lead { font-weight: 700; }
.tc-consent-en { display: block; margin-top: 6px; opacity: .85; }