/* See The File — Decode My Letter (Phase 2 module styles).
   Self-contained: every selector is prefixed .stf-dec- and every colour
   comes from the brand tokens in styles.css (:root custom properties),
   which this file assumes is loaded first (integrator link order in
   integration-decode.md). No new colours are introduced except the
   <mark> ground, which reuses --tint / --map-fill role tokens.
 *
 * Contrast (from the styles.css token table, WCAG 2.x):
 *   Light: Record Ink #0F172A on Signal Tint #EAF0FF (mark ground) > 15:1;
 *     Signal Deep #0047C7 underline on White/Tint >= 7:1 (non-text 3:1 ok);
 *     Muted Slate #475569 hints on White 7.58:1; Signal Blue links on
 *     White 5.28:1; ink text on Fog notices > 16:1.
 *   Dark (role swap below): White on Dark Elevated #1E293B > 12:1;
 *     White on map-fill dark #334155 (mark ground) ~10:1; Signal Bright
 *     #8AB4FF underline/links on #1E293B/#0C1522 > 7:1; Pale Slate
 *     #CBD5E1 hints on Dark Base 12.34:1.
 * Marks are NEVER colour-only: background + 2px underline + bold weight,
 * in both modes. */

.stf-dec{margin:0 0 28px}
.stf-dec-title{margin:.25em 0 .5em}
.stf-dec-lede{font-size:1.15rem;line-height:1.55;max-width:44em;color:var(--body-slate)}
.stf-dec-privacy{background:var(--fog);border:1.5px solid var(--line-strong,#94A3B8);border-radius:var(--radius);
  padding:13px 17px;margin:16px 0;color:var(--ink)}
.stf-dec-privacy strong{font-weight:700}
.stf-dec-hint{display:block;font-weight:400;color:var(--muted);font-size:.92rem;margin-top:3px;line-height:1.5}

/* Regime picker: radio cards in the site's visual language */
.stf-dec-regimes{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  margin:18px 0;background:var(--surface);box-shadow:var(--shadow)}
.stf-dec-regimes legend{font-family:var(--font-display);font-weight:600;font-size:1.18rem;
  line-height:1.35;letter-spacing:-0.01em;padding:0 8px}
.stf-dec-regimes .stf-dec-hint{margin:0 0 6px}
.stf-dec-regime{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:var(--radius-s);padding:13px 15px;margin:10px 0;background:var(--surface);cursor:pointer;line-height:1.5}
.stf-dec-regime:has(input:checked){border-color:var(--signal);background:var(--tint)}
.stf-dec-regime input[type=radio]{width:20px;height:20px;min-height:0;flex:none;margin:2px 0 0;accent-color:var(--signal)}
.stf-dec-regime-text{display:block}
.stf-dec-regime-name{display:block;font-weight:700;color:var(--ink)}
.stf-dec-regime-statute{display:block;font-weight:400;color:var(--muted);font-size:.92rem;margin-top:2px;line-height:1.5}

/* Letter input */
.stf-dec-letter-label{display:block;font-weight:600;margin:15px 0 5px}
.stf-dec-ta{width:100%;font:inherit;font-size:1rem;line-height:1.55;padding:11px 12px;min-height:220px;
  border:2px solid var(--line-strong);border-radius:var(--radius-s);background:var(--surface);color:var(--ink)}
.stf-dec-ta[aria-invalid="true"]{border-color:var(--ink);background:var(--fog)}
.stf-dec-samples{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.stf-dec-samples-label{font-weight:600;font-size:.95rem}
.stf-dec-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 8px}

/* Notices: Record Ink on Fog with an ink border (the site's notice
   language — never red; red is destruction-deadlines only). */
.stf-dec-notice{background:var(--fog);border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:15px 19px;margin:16px 0;color:var(--ink)}
.stf-dec-notice p:first-child{margin-top:0}.stf-dec-notice p:last-child{margin-bottom:0}
.stf-dec-nomatch h3{margin-top:0}

/* Results */
.stf-dec-results-h{border-top:1px solid var(--line);padding-top:.85em}
.stf-dec-under{color:var(--muted);font-size:.95rem}
.stf-dec-count{font-weight:700;margin:10px 0 4px}
.stf-dec-legend{font-size:.95rem;color:var(--body-slate);max-width:46em}
.stf-dec-letter{background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--radius-s);
  padding:19px;font-size:.98rem;line-height:1.65;overflow-wrap:break-word;margin:12px 0 20px}
.stf-dec-mark{background:var(--tint);color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--signal-deep);text-decoration-thickness:2px;
  text-underline-offset:3px;border-radius:3px;padding:0 1px}
.stf-dec-legend .stf-dec-mark{padding:0 4px}

/* Matched-entry cards */
.stf-dec-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:14px 0 26px}
.stf-dec-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--signal);
  border-radius:var(--radius);padding:17px 19px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px}
.stf-dec-card h4{font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.35;margin:0}
.stf-dec-card p{margin:0;font-size:.96rem;color:var(--body-slate)}
.stf-dec-phrase{font-size:.9rem;color:var(--muted);font-style:italic;overflow-wrap:break-word}
.stf-dec-source{margin-top:auto;padding-top:6px;font-size:.92rem}

/* The three facts */
.stf-dec-facts{margin:22px 0}
.stf-dec-facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
.stf-dec-fact{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--signal);
  border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow)}
.stf-dec-fact h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  color:var(--signal-deep);margin:0 0 7px;font-family:var(--font)}
.stf-dec-fact p{margin:.4em 0;font-size:.97rem;line-height:1.55}
.stf-dec-fact ul{margin:.4em 0 .4em 1.15em;padding:0}
.stf-dec-fact li{margin:.35em 0;font-size:.97rem;line-height:1.5}
.stf-dec-when-item strong{display:block;font-size:1.02rem}
.stf-dec-when-plain{display:block;color:var(--body-slate);font-size:.93rem;margin-top:3px;line-height:1.5}
.stf-dec-disclaimer{color:var(--muted);font-size:.93rem;margin:14px 0 4px}

@media (max-width:900px){
  .stf-dec-facts-grid{grid-template-columns:1fr}
  .stf-dec-cards{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stf-dec-regimes{padding:16px}
  .stf-dec-letter{padding:15px}
  .stf-dec-actions .btn{flex:1 1 auto}
}

/* ---------- dark mode: same role swap as styles.css ---------- */
@media (prefers-color-scheme: dark){
  /* Tint collapses to Dark Elevated in the dark token swap, which would
     make marks invisible against elevated surfaces — marks therefore take
     the dark map-fill ground (#334155) with a Bright underline. White on
     #334155 ~10:1; #8AB4FF underline on #334155 > 4.5:1 (non-text 3:1). */
  .stf-dec-mark{background:var(--map-fill);color:#FFFFFF;text-decoration-color:var(--signal-bright)}
  .stf-dec-regime:has(input:checked){background:var(--surface);border-color:var(--signal-bright)}
  .stf-dec-fact h4{color:var(--signal-bright)}
  .stf-dec-privacy{background:var(--dark-elevated);border-color:var(--line)}
  .stf-dec-ta{background:#0C1522}
  .stf-dec-letter{background:#0C1522}
}

.stf-dec-interim-h{font-weight:700;margin:.7rem 0 .2rem}