/* =============================================================================
   tgs-brand.css — thegrowspace brand foundation for the Neurodevelopmental
   Screener (index.html = parent/teacher screener, console.html = clinician
   console). Shared design tokens + component classes. Vanilla CSS, no build.

   -----------------------------------------------------------------------------
   1. HOW TO LOAD (in <head>, in this order)
   -----------------------------------------------------------------------------
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Poppins:wght@400;500;600&display=swap">
     <link rel="stylesheet" href="tgs-brand.css">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png">
     <link rel="icon" type="image/png" sizes="64x64" href="assets/favicon-64.png">
     <link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
     <script src="config.js"></script>
     <script>
       // Adobe Fonts kit for ivymode (licensed). Blank TYPEKIT_KIT = Fraunces fallback.
       if(window.TGS_CONFIG&&TGS_CONFIG.TYPEKIT_KIT){var l=document.createElement('link');l.rel='stylesheet';l.href='https://use.typekit.net/'+TGS_CONFIG.TYPEKIT_KIT+'.css';document.head.appendChild(l);}
     </script>
   Page-specific CSS may follow in an inline <style>; it wins on equal
   specificity because it comes later.

   Markup skeleton:
     <header class="app-header">
       <a class="logo" href="./"><img class="logo-wordmark" src="assets/tgs-wordmark.png" alt="thegrowspace"></a>
       <div class="header-meta"><span class="header-tool">Neurodevelopmental screener</span><span class="header-badge">Clinician</span></div>
     </header>
     <main class="wrap narrow"> ... </main>          (.wrap.wide for the console)
     <footer class="tool-footer"><div class="tool-footer-inner">
       <img src="assets/tgs-roundel.png" alt="">
       <span>© thegrowspace · A screening tool, not a diagnosis.</span>
       <a href="https://thegrowspace.com.au">thegrowspace.com.au</a>
     </div></footer>

   -----------------------------------------------------------------------------
   2. RULES
   -----------------------------------------------------------------------------
   * RED IS RESERVED FOR SAFEGUARDING. --danger* appear only on crisis /
     risk UI (.crisis-*, .pill.danger, .btn.danger). Never use red for scores,
     validation errors or "high concern" — those use the clay end of the
     sage -> tan -> clay severity ramp (--sev-*).
   * Per-module accents (--asd --adhd --sld --anx --iu --str) are for
     CLINICIAN-ONLY views. Respondent-facing screens use the single neutral
     .module-head (brand green wash) and never reveal what is screened for.
   * Sentence case for headings and buttons. No emoji, no gradient icons.
   * Brand marks come only from assets/*.png. Never draw a logo in SVG.
   * --text-light passes AA on WHITE only (4.6:1); on cream use --text-medium.
   * Motion: 150ms colour/border transitions only; all motion is removed
     under prefers-reduced-motion.

   -----------------------------------------------------------------------------
   3. TOKENS (all on :root)
   -----------------------------------------------------------------------------
   Brand     --brand-green #6C796A  --brand-sage #959E93  --brand-tan #CCA98B
             --brand-cream #F0EBE2  --white #FFFFFF
   Roles     --primary --primary-light --primary-dark --primary-bg
             --accent --accent-light --accent-dark --accent-bg
             --bg (cream page) --surface (white card) --surface-soft
             --text-dark 9.6:1 · --text-medium 5.7:1 · --text-light 4.6:1 (white)
             --border (soft tan, decorative) --border-soft (dividers)
             --border-control (3.3:1, input/likert outlines) --focus (ring)
   Notices   --warning-bg/-border/-text  --info-bg/-border/-text
             --danger --danger-bg --danger-border   (safeguarding ONLY)
             --ok-text (save success)  --err-bg/-border/-text (non-safety errors; clay)
   Severity  --sev-{low|med|high}-{bg|chip|text|dot}   sage -> tan -> clay
   Modules   --asd --adhd --sld --anx --iu --str  (+ -bg washes)  clinician-only;
             every one is >= 4.5:1 on white so it may be used as text.
   Type      --font-display --font-body  --fs-xs 12 --fs-sm 14 --fs-base 16
             --fs-md 18 --fs-h3 18 --fs-h2 22 --fs-h1 28 (32 >= 768px)
             --lh 1.55  --lh-tight 1.25
   Space     --space-1..7 (4 8 12 16 24 32 48)  --gutter 16px
   Shape     --radius 10px --radius-sm 8px --pill 999px
             --shadow --shadow-sm
   Layout    --wrap-narrow 760px --wrap-wide 1100px --header-h (sticky offset)
             --tap 44px (minimum touch target) --ease 150ms
   Compat    --ink --muted --line --card --good --warn --bad : aliases so old
             inline styles (style="color:var(--muted)") still render on-brand.
             NOTE: the old pages used --accent for TEAL primary. Here --accent is
             TAN. Replace old var(--accent) usages with var(--primary).

   -----------------------------------------------------------------------------
   4. COMPONENT CATALOGUE
   -----------------------------------------------------------------------------
   Layout
     .wrap            centred container, 16px gutters. .wrap.narrow = 760 (screener),
                      .wrap.wide = 1100 (console). Default = narrow.
     .app-header      sticky cream header, tan rule. Children: .logo > img.logo-wordmark,
                      .header-meta > .header-tool (display font) + .header-badge (pill)
     .tool-footer     green band > .tool-footer-inner > img (roundel) + text + a
     .print-header    hidden on screen; shown when printing (use tgs-wordmark-leaf.png)
     .grid2 .grid .field-row .toolbar(.spacer) .stack(gap)
   Surfaces
     .card            white, soft tan border, 24px padding (16 on phones). .card.flat = no shadow
     .sub-card .instr-block(.ititle) .diffbox(.verdict.{asd|anx|both|sub}) .profile(.ph .name .pct)
   Type
     h1 h2 h3 p.lead .eyebrow .help .footnote .mini .muted .back (text link)
   Actions
     .btn             pill, 44px min. Default = soft green. .primary filled green,
                      .ghost / .secondary outline, .link text-only, .danger (safeguarding only),
                      .sm compact (36px; desktop tool rows), .block full width. :disabled handled.
     .tabs > .tab     console navigation; .active or [aria-selected=true]
   Forms
     label.fld, input/select/textarea (bare elements are styled), .help,
     .checklist (label > input + text), .save-status(.ok|.err)
     .tgs-cb          searchable picker from tgs-combobox.js (input + .tgs-cb-pop > .tgs-cb-list of
                      .tgs-cb-opt rows; .is-active highlight, .is-selected check)
   Screener
     .progress-wrap > .progress > div (fill) + .progress-label   sticky below header
     .module-head > h2 + .count     neutral brand wash. Clinician-only: .m-asd .m-adhd ...
     .subscale        subscale heading (hide in respondent mode — page logic)
     .item > .q > .id (chip) .rev (clinician tag)  ;  .item.is-notobs dims item
     .likert          5 equal 0-4 targets: label > input[type=radio] + b (number) + span (label)
                      label.sel (or :has(:checked)) = selected. label.notobs = 6th full-width
                      dashed "not observed" row. .likert-anchors optional end labels.
   Status & data
     .pill            .none .partial .done (ramp high/med/low), .low .med .high,
                      .brand .neutral .danger(safeguarding) ; .draftpill alias
     .count-chip      small neutral count
     .bar > div       score bar. Fill: .bar-low .bar-med .bar-high (on the div or on .bar),
                      or .fill-asd ... .fill-str (clinician). .bar.inline = 120px inline.
     .ratio > .seg    segmented ratio row
     .stats > .stat > .num + .lbl (+ .sub)   analytics tiles
     table / .table   small-caps th, divider rows, hover row; .table-wrap scrolls;
                      .sticky-right pins last column; tr.case-row clickable
   Notices
     .disclaimer(.disclaimer-title)  warm tan advisory ("screening tool, not diagnostic")
     .banner / .info  sage information note; .banner.warn = tan advisory
     .crisis-card     safeguarding interstitial (red). Inside: .crisis-tag, h2,
                      .crisis-nums > .crisis-num > .name .tel .who   (current markup)
                      or .crisis-list > .crisis-item > .crisis-name .crisis-num .crisis-desc
     .crisis-banner   compact red callout (b, .nums, .crisis-banner-title)
   Overlay
     #loginOverlay > .box, #loginErr
   Utilities
     .hidden (display:none !important) .visually-hidden .no-print .print-only
   ========================================================================== */

:root {
  /* ---- Brand (TGS Design Material/Brand Colours.txt) ---- */
  --brand-green: #6C796A;
  --brand-sage:  #959E93;
  --brand-tan:   #CCA98B;
  --brand-cream: #F0EBE2;
  --white:       #FFFFFF;

  /* ---- Roles ---- */
  --primary:       #6C796A;   /* headings, primary buttons, footer (4.6:1 on white) */
  --primary-light: #959E93;   /* sage: muted marks, light borders */
  --primary-dark:  #566155;   /* hover + body-safe green text (6.5:1) */
  --primary-bg:    #E7EBE6;   /* soft green wash */
  --accent:        #CCA98B;   /* tan accents (decorative, not text) */
  --accent-light:  #E3D3C2;
  --accent-dark:   #8A6742;   /* AA tan text on white (5.1:1) */
  --accent-bg:     #F6EFE7;   /* warm wash */

  --bg:            #F0EBE2;   /* cream page */
  --surface:       #FFFFFF;
  --surface-soft:  #FBF8F3;   /* row hover, inset panels */

  --text-dark:     #3F473F;   /* 9.6:1 white, 8.1:1 cream */
  --text-medium:   #5E6A5D;   /* 5.7:1 white, 4.8:1 cream */
  --text-light:    #6E786C;   /* 4.6:1 white — white surfaces only */

  --border:         #E3D3C2;  /* soft tan card border (decorative) */
  --border-soft:    #EFE6DA;  /* row dividers */
  --border-control: #A08B76;  /* 3.3:1 — outlines of inputs and likert targets */
  --focus:          #8A6742;  /* focus ring (4.3:1 on cream, 5.1:1 on white) */

  /* ---- Notices ---- */
  --warning-bg:     #F7F0E4;
  --warning-border: #CCA98B;
  --warning-text:   #7A5B33;
  --info-bg:        #E7EBE6;
  --info-border:    #959E93;
  --info-text:      #4A5545;
  --ok-text:        #4A5545;
  --err-bg:         #F1E1D2;  /* non-safeguarding errors use clay, not red */
  --err-border:     #DFC0A0;
  --err-text:       #7A4A28;

  /* RED — SAFEGUARDING / CRISIS ONLY */
  --danger:        #C0392B;   /* 5.4:1 on white */
  --danger-bg:     #FEF5F4;
  --danger-border: #E3A49C;
  --danger-strong: #A93226;   /* hover for .btn.danger */

  /* ---- Severity ramp: sage -> tan -> clay (all chip text >= 4.5:1) ---- */
  --sev-low-bg:  #EFF2EE; --sev-low-chip:  #DDE3DA; --sev-low-text:  #4A5545; --sev-low-dot:  #959E93;
  --sev-med-bg:  #F8F1E8; --sev-med-chip:  #EADBC6; --sev-med-text:  #7A5B33; --sev-med-dot:  #CCA98B;
  --sev-high-bg: #F1E1D2; --sev-high-chip: #E8CFB5; --sev-high-text: #7A4A28; --sev-high-dot: #A5764F;

  /* ---- Module accents — CLINICIAN VIEWS ONLY (each >= 4.5:1 on white) ---- */
  --asd:  #4A6B69;  --asd-bg:  #E6EDEC;   /* teal-slate green */
  --adhd: #9A5F3F;  --adhd-bg: #F4E6DD;   /* clay */
  --sld:  #5F6B7D;  --sld-bg:  #E8EBEF;   /* slate grey */
  --anx:  #8A6B2E;  --anx-bg:  #F5EDDC;   /* ochre */
  --iu:   #736A60;  --iu-bg:   #EEEBE7;   /* taupe */
  --str:  #5E7B45;  --str-bg:  #E9F0E3;   /* leaf green */

  /* ---- Type ---- */
  --font-display: "ivymode", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px;
  --fs-h3: 18px; --fs-h2: 22px; --fs-h1: 28px;
  --lh: 1.55; --lh-tight: 1.25;

  /* ---- Space, shape, layout ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --gutter: 16px;
  --radius: 10px; --radius-sm: 8px; --pill: 999px;
  --shadow:    0 4px 24px rgba(63, 71, 63, 0.08);
  --shadow-sm: 0 1px 3px rgba(63, 71, 63, 0.08);
  --wrap-narrow: 760px;
  --wrap-wide: 1100px;
  --header-h: 49px;           /* sticky offset for .progress-wrap (mobile header) */
  --tap: 44px;
  --ease: 150ms ease;

  /* ---- Compat aliases for legacy inline styles — don't use in new code ---- */
  --ink: var(--text-dark);
  --muted: var(--text-medium);
  --line: var(--border);
  --card: var(--surface);
  --good: var(--sev-low-text);
  --warn: var(--sev-med-text);
  --bad: var(--sev-high-text);  /* clinical "high" — NOT safeguarding red */
}
@media (min-width: 641px) {
  :root { --header-h: 57px; --gutter: 24px; }
}
@media (min-width: 768px) {
  :root { --fs-h1: 32px; --fs-h2: 24px; }
}

/* =============================== Base ===================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--primary);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-h1); margin-bottom: var(--space-3); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--primary-dark); margin-top: var(--space-4); }
h4 { font-size: var(--fs-base); font-weight: 600; color: var(--primary-dark); }
p { margin: 0 0 var(--space-3); }
a { color: var(--primary-dark); text-underline-offset: 2px; }
a:hover { color: var(--text-dark); }
b, strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
::selection { background: var(--accent-light); color: var(--text-dark); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

p.lead, .lead { color: var(--text-medium); font-size: 15.5px; margin: 0 0 var(--space-4); }
.eyebrow {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-dark);
  margin-bottom: var(--space-2);
}
.help { font-size: 13px; color: var(--text-medium); margin-top: var(--space-1); line-height: 1.5; }
.footnote { font-size: var(--fs-xs); color: var(--text-medium); margin-top: var(--space-2); line-height: 1.5; }
.mini { font-size: var(--fs-xs); color: var(--text-medium); }
.mini b { color: var(--text-dark); }
.muted { color: var(--text-medium); }
.back {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  cursor: pointer; color: var(--primary-dark); font-size: var(--fs-sm); font-weight: 600;
  background: none; border: 0; padding: 0; font-family: inherit; text-decoration: none;
}
.back::before { content: "\2039"; font-size: 20px; line-height: 1; }
.back:hover { color: var(--text-dark); }

/* ============================== Layout ==================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-7);
}
.wrap.narrow { max-width: var(--wrap-narrow); }
.wrap.wide   { max-width: var(--wrap-wide); }

.app-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 11px var(--gutter);
  min-height: var(--header-h);
}
.app-header .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-wordmark { display: block; height: 34px; width: auto; max-width: 56vw; object-fit: contain; }
.header-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-tool {
  font-family: var(--font-display); font-size: 15px; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-badge {
  background: var(--accent-bg); color: var(--accent-dark);
  border: 1px solid var(--accent-light);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em;
  padding: 3px 11px; border-radius: var(--pill); white-space: nowrap;
}
@media (max-width: 640px) {
  .app-header { padding: 10px var(--gutter); }
  .logo-wordmark { height: 28px; }
  .header-tool { display: none; }
}

.tool-footer { background: var(--primary); color: var(--white); margin-top: auto; }
.tool-footer-inner {
  max-width: var(--wrap-wide); margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  font-size: 13px; line-height: 1.5;
}
.tool-footer img {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--white); flex-shrink: 0; object-fit: contain;
}
.tool-footer a { color: var(--white); margin-left: auto; }
.tool-footer a:hover { color: var(--brand-cream); }
.tool-footer :focus-visible { outline-color: var(--white); }

.print-header { display: none; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3) var(--space-4); }
.field-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-end; }
.field-row > * { flex: 1 1 200px; min-width: 0; }
.stack > * + * { margin-top: var(--space-3); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.toolbar .spacer { flex: 1; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* ============================== Surfaces ================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.card.flat { box-shadow: none; }
.card > :last-child { margin-bottom: 0; }
@media (max-width: 480px) { .card { padding: var(--space-4); } }

.sub-card, .instr-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.instr-block { background: var(--surface-soft); }
.instr-block .ititle { font-weight: 600; font-size: var(--fs-sm); color: var(--text-dark); margin-bottom: var(--space-2); }

.diffbox {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-4); margin-top: var(--space-2); background: var(--surface-soft);
}
.diffbox .verdict { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-bottom: var(--space-1); color: var(--text-dark); }
.diffbox .verdict.asd  { color: var(--asd); }
.diffbox .verdict.anx  { color: var(--anx); }
.diffbox .verdict.both { color: var(--sev-high-text); }
.diffbox .verdict.sub  { color: var(--text-medium); }

.profile { margin-bottom: var(--space-4); }
.profile .ph { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.profile .ph .name { font-weight: 600; font-size: 15px; color: var(--text-dark); }
.profile .ph .pct { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-breakdown {
  font-size: 13px; color: var(--text-medium); margin-top: 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px;
}
.sub-breakdown b { color: var(--text-dark); }
@media (max-width: 480px) { .sub-breakdown { grid-template-columns: 1fr; } }

/* ============================== Buttons =================================== */
.btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 10px 22px;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { background: #DCE2DA; color: var(--text-dark); }
.btn.primary { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.btn.ghost, .btn.secondary {
  background: transparent; color: var(--primary-dark); border-color: var(--primary-light);
}
.btn.ghost:hover, .btn.secondary:hover { background: var(--surface); border-color: var(--primary); color: var(--text-dark); }
.btn.link {
  background: none; border-color: transparent; padding-left: 6px; padding-right: 6px;
  color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px;
}
.btn.link:hover { background: none; color: var(--text-dark); }
/* Safeguarding actions only (e.g. "Call Lifeline"). */
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn.danger:hover { background: var(--danger-strong); border-color: var(--danger-strong); color: var(--white); }
.btn.sm { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.btn.block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: #D9DDD7; border-color: #D9DDD7; color: #5E6A5D; cursor: not-allowed;
}
.btn.ghost:disabled, .btn.secondary:disabled { background: transparent; border-color: #CFD4CD; }
@media (pointer: coarse) { .btn.sm { min-height: var(--tap); } }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.btn-row .spacer { flex: 1; }

/* ============================== Tabs ====================================== */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; background: none; border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  min-height: var(--tap); padding: 10px 14px;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-medium); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: color var(--ease), border-color var(--ease);
}
.tab:hover { color: var(--text-dark); border-bottom-color: var(--accent-light); }
.tab.active, .tab[aria-selected="true"] { color: var(--primary-dark); font-weight: 600; border-bottom-color: var(--primary); }

/* ============================== Forms ===================================== */
label.fld {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-medium); margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=url],
input:not([type]), select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 16px;            /* 16px stops iOS zoom-on-focus */
  line-height: 1.4;
  transition: border-color var(--ease), box-shadow var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-light); opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid transparent;   /* keeps a ring in Windows high-contrast */
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108, 121, 106, 0.30);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-soft); color: var(--text-medium); }
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23566155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
textarea { min-height: 96px; resize: vertical; line-height: var(--lh); }
input[type=checkbox], input[type=radio] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0;
  flex: 0 0 auto; accent-color: var(--primary);
}
@media (min-width: 768px) {
  /* Desktop console density; phones keep 44px + 16px. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=search], input[type=tel], input[type=url],
  input:not([type]), select { min-height: 40px; font-size: 15px; }
  textarea { font-size: 15px; }
}

.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.checklist label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: var(--fs-sm); line-height: 1.45; padding: 8px 0; min-height: var(--tap);
}
.checklist input { margin-top: 1px; }
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }

.save-status { font-size: 13px; margin-top: var(--space-2); min-height: 18px; }
.save-status.ok { color: var(--ok-text); font-weight: 600; }
.save-status.err {
  color: var(--err-text); font-weight: 600; background: var(--err-bg);
  border: 1px solid var(--err-border); border-radius: var(--radius-sm);
  padding: 9px 12px; line-height: 1.45;
}

/* ============================== Notices =================================== */
.disclaimer {
  background: var(--warning-bg);
  border: 1.5px solid var(--warning-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) 18px;
  margin: var(--space-4) 0;
  color: var(--warning-text);
  font-size: var(--fs-sm); line-height: 1.6;
}
.disclaimer-title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; color: var(--warning-text); }
.disclaimer p { color: var(--warning-text); margin-bottom: 6px; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer b, .disclaimer strong { color: var(--warning-text); }

.banner, .info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm); color: var(--info-text);
  margin-bottom: var(--space-3); line-height: 1.55;
}
.banner.warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }

/* ---- Safeguarding (RED LIVES HERE AND NOWHERE ELSE) ---- */
.crisis-card {
  background: var(--danger-bg);
  border: 1.5px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.crisis-card h2 { color: var(--danger); font-size: 22px; }
.crisis-card p { color: var(--text-dark); }
.crisis-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--danger); color: var(--white);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 13px; border-radius: var(--pill); margin-bottom: var(--space-3);
}
.crisis-nums, .crisis-list { display: grid; gap: 10px; margin: var(--space-4) 0 var(--space-2); padding: 0; list-style: none; }
/* Box form (current index.html markup: .crisis-num > .name .tel .who) */
.crisis-num, .crisis-item {
  background: var(--surface);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.crisis-num .name, .crisis-item .crisis-name { font-weight: 600; font-size: 15px; color: var(--text-dark); }
.crisis-num .tel, .crisis-item .crisis-num { font-weight: 700; font-size: 18px; color: var(--danger); letter-spacing: 0.02em; }
.crisis-num .tel a, .crisis-item .crisis-num a { color: inherit; text-decoration: none; }
.crisis-num .tel a:hover, .crisis-item .crisis-num a:hover { text-decoration: underline; }
.crisis-num .who, .crisis-item .crisis-desc { font-size: 13px; color: var(--text-medium); }
/* Inline number form (.crisis-item > .crisis-num) — undo the box styling */
.crisis-item .crisis-num { background: none; border: 0; padding: 0; display: block; }

.crisis-banner {
  background: var(--danger-bg);
  border: 1.5px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm); color: var(--text-dark); line-height: 1.55;
}
.crisis-banner b, .crisis-banner strong, .crisis-banner .crisis-banner-title { color: var(--danger); }
.crisis-banner .crisis-banner-title { font-weight: 700; margin-bottom: 4px; }
.crisis-banner .nums { margin-top: 6px; font-weight: 600; color: var(--text-dark); }
.crisis-banner p { margin: 0; }

/* ============================ Screener ==================================== */
.progress-wrap {
  position: sticky; top: var(--header-h); z-index: 50;
  background: var(--bg);
  padding: 10px 0 8px;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.progress {
  height: 8px; background: var(--accent-light);
  border-radius: var(--pill); overflow: hidden;
}
.progress > div { height: 100%; width: 0; background: var(--primary); border-radius: var(--pill); transition: width 200ms ease; }
.progress-label {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px;
  font-size: var(--fs-xs); color: var(--text-medium); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* Neutral by default: respondent-facing screens must not colour-code condition. */
.module-head {
  --mod: var(--primary);
  display: flex; align-items: center; gap: 10px;
  background: var(--primary-bg);
  border: 1px solid #D3DAD1;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: var(--space-5) 0 var(--space-2);
}
.module-head h2 { margin: 0; font-size: 20px; color: var(--primary-dark); }
.module-head .count { margin-left: auto; font-size: 13px; color: var(--text-medium); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card > .module-head:first-child { margin-top: 0; }
/* CLINICIAN VIEWS ONLY — never add these in respondent mode. */
.module-head.m-asd  { --mod: var(--asd);  background: var(--asd-bg); }
.module-head.m-adhd { --mod: var(--adhd); background: var(--adhd-bg); }
.module-head.m-sld  { --mod: var(--sld);  background: var(--sld-bg); }
.module-head.m-anx  { --mod: var(--anx);  background: var(--anx-bg); }
.module-head.m-iu   { --mod: var(--iu);   background: var(--iu-bg); }
.module-head.m-str  { --mod: var(--str);  background: var(--str-bg); }
.module-head[class*="m-"] { border-color: transparent; }
.module-head[class*="m-"] h2 { color: var(--mod); }
.module-head[class*="m-"]::before {
  content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--mod);
}

.subscale {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500; color: var(--primary-dark);
  margin: var(--space-5) 0 var(--space-1);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.item { padding: var(--space-4) 0 18px; border-bottom: 1px solid var(--border-soft); }
.item:last-child { border-bottom: 0; }
.item .q { font-size: 16px; line-height: 1.5; color: var(--text-dark); margin-bottom: var(--space-3); }
.item .q .id {
  display: inline-block; vertical-align: 1px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  color: var(--accent-dark); background: var(--accent-bg);
  border: 1px solid var(--accent-light);
  padding: 0 7px; border-radius: 6px; margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.item .q .rev {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
  color: var(--sev-high-text); background: var(--sev-high-bg);
  padding: 0 7px; border-radius: 6px;
}
.item.is-notobs .q { color: var(--text-medium); }
.item.is-notobs .likert label:not(.notobs) { opacity: 0.55; }

/* ---- Likert 0–4: five equal, tall, tappable targets ----
   Markup (unchanged from index.html):
     <div class="likert">
       <label><input type="radio" name="Q1" value="0"><b>0</b><span>Definitely<br>Disagree</span></label>
       ... x5
       <label class="notobs"><input type="radio" ...><span>I haven't had the chance to observe this</span></label>
     </div>
   Selected = label.sel (set by JS) or :has(input:checked). */
.likert {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.likert label {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 8px 4px 7px;
  background: var(--surface);
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-sm);
  color: var(--text-medium);
  text-align: center;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
/* Native radio stays in the accessibility tree + keyboard order, visually hidden. */
.likert input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
  accent-color: var(--primary);
}
.likert label b {
  font-family: var(--font-body);
  font-size: 19px; font-weight: 500; line-height: 1.1;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
.likert label span {
  font-size: 11px; line-height: 1.2; font-weight: 500;
  color: var(--text-medium);
  hyphens: auto; -webkit-hyphens: auto;   /* last resort only; widths below fit "Definitely" */
  overflow-wrap: break-word;
}
@media (hover: hover) {
  .likert label:hover { border-color: var(--primary); background: var(--sev-low-bg); }
}
/* Focus ring (keyboard). :has() for modern browsers, :focus-within fallback. */
.likert label:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
@supports selector(:has(*)) {
  .likert label:focus-within { outline: none; }
  .likert label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
}
/* Selected: brand-green fill, white text, heavier number, check mark (non-colour cue). */
.likert label.sel,
.likert label:has(input:checked) {
  background: var(--primary);
  border-color: var(--primary-dark);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--primary-dark), 0 2px 8px rgba(63, 71, 63, 0.18);
}
.likert label.sel b, .likert label:has(input:checked) b { color: var(--white); font-weight: 700; }
.likert label.sel span, .likert label:has(input:checked) span { color: var(--white); font-weight: 600; }
.likert label.sel::after,
.likert label:has(input:checked)::after {
  content: "";
  position: absolute; top: 4px; right: 4px;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23fff'/%3E%3Cpath d='M3.8 7.2l2.1 2.1 4.3-4.5' fill='none' stroke='%23566155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* "Not observed" (teacher form): full-width dashed row BELOW the scale —
   deliberately not a 6th box, so it can't be read as an extreme of 0–4. */
.likert label.notobs {
  grid-column: 1 / -1;
  flex-direction: row; gap: 8px;
  min-height: var(--tap);
  padding: 8px 12px;
  margin-top: 2px;
  border-style: dashed;
  border-color: var(--primary-light);
  background: transparent;
}
.likert label.notobs span { font-size: 13px; line-height: 1.35; hyphens: manual; overflow-wrap: normal; }
.likert label.notobs b { display: none; }
.likert label.notobs.sel,
.likert label.notobs:has(input:checked) {
  background: var(--primary-bg);
  border-style: solid; border-color: var(--primary);
  color: var(--primary-dark); box-shadow: none;
}
.likert label.notobs.sel span,
.likert label.notobs:has(input:checked) span { color: var(--primary-dark); font-weight: 600; }
.likert label.notobs.sel::after,
.likert label.notobs:has(input:checked)::after {
  position: static; order: -1; flex: 0 0 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%236C796A'/%3E%3Cpath d='M3.8 7.2l2.1 2.1 4.3-4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Optional end-anchor row: <div class="likert-anchors"><span>Definitely disagree</span><span>Definitely agree</span></div> */
.likert-anchors {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--fs-xs); color: var(--text-medium);
  margin: 0 2px 6px;
}
@media (min-width: 641px) {
  .likert { gap: 10px; }
  .likert label { min-height: 60px; }
  .likert label b { font-size: 20px; }
  .likert label span { font-size: 12px; }
}
/* Phones: let the scale use the card's side padding so whole words fit. */
@media (max-width: 480px) {
  .card .likert { margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); gap: 6px; }
  .likert label { padding: 8px 2px 7px; }
}
@media (max-width: 380px) {
  .likert, .card .likert { gap: 5px; }
  .likert label { min-height: 54px; padding: 7px 1px 6px; border-radius: 7px; }
  .likert label b { font-size: 17px; }
  .likert label span { font-size: 10px; letter-spacing: -0.01em; }
  .likert label.sel::after, .likert label:has(input:checked)::after { width: 11px; height: 11px; top: 3px; right: 3px; }
  .likert label.notobs span { font-size: 12.5px; }
}
@media (max-width: 340px) {
  .card { padding: var(--space-3); }
  .likert, .card .likert { gap: 4px; }
}

/* ============================ Status & data =============================== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  padding: 2px 10px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  background: var(--brand-cream); color: var(--text-medium);
  white-space: nowrap;
}
.pill.done,    .pill.low  { background: var(--sev-low-chip);  color: var(--sev-low-text); }
.pill.partial, .pill.med  { background: var(--sev-med-chip);  color: var(--sev-med-text); }
.pill.none,    .pill.high { background: var(--sev-high-chip); color: var(--sev-high-text); }
.pill.brand   { background: var(--primary-bg); color: var(--primary-dark); border-color: #CFD6CD; }
.pill.neutral { background: var(--surface); color: var(--text-medium); border-color: var(--border); }
.pill.danger  { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } /* safeguarding flag only */
.draftpill {
  font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--pill);
  background: var(--accent-bg); color: var(--accent-dark); border: 1px solid var(--accent-light);
}
.count-chip {
  display: inline-block; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-medium); background: var(--surface);
  border: 1px solid var(--border); padding: 3px 10px; border-radius: var(--pill);
  font-variant-numeric: tabular-nums;
}

.bar {
  height: 10px; width: 100%;
  background: var(--border-soft);
  border-radius: var(--pill);
  overflow: hidden;
}
.bar > div { height: 100%; border-radius: var(--pill); background: var(--primary-light); transition: width 300ms ease; }
.bar.inline { display: inline-block; width: 120px; vertical-align: middle; height: 9px; }
.bar > .bar-low,  .bar.bar-low > div  { background: var(--sev-low-dot); }
.bar > .bar-med,  .bar.bar-med > div  { background: var(--sev-med-dot); }
.bar > .bar-high, .bar.bar-high > div { background: var(--sev-high-dot); }
/* Clinician-only module fills */
.fill-asd  { background: var(--asd)  !important; }
.fill-adhd { background: var(--adhd) !important; }
.fill-sld  { background: var(--sld)  !important; }
.fill-anx  { background: var(--anx)  !important; }
.fill-iu   { background: var(--iu)   !important; }
.fill-str  { background: var(--str)  !important; }

.ratio { display: flex; gap: 8px; align-items: center; font-size: var(--fs-xs); color: var(--text-medium); margin-top: var(--space-2); }
.ratio .seg { height: 10px; border-radius: var(--pill); background: var(--primary-light); }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.stat .num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 30px; line-height: 1.1; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.stat .lbl { font-size: 13px; color: var(--text-medium); margin-top: 4px; line-height: 1.35; }
.stat .sub { font-size: var(--fs-xs); color: var(--text-light); margin-top: 2px; }

/* ---- Tables ---- */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
table, .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
th {
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-medium);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
}
tbody tr { transition: background-color var(--ease); }
tbody tr:hover > td { background: var(--surface-soft); }
tr.case-row { cursor: pointer; }
td.num, th.num { text-align: right; }
.sticky-right {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface);
  box-shadow: inset 1px 0 0 var(--border-soft);
}

/* ============================ Overlay ===================================== */
#loginOverlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(63, 71, 63, 0.72);
}
#loginOverlay.hidden { display: none !important; }
#loginOverlay .box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  width: 360px; max-width: 100%;
}
#loginOverlay h2 { margin: 0 0 var(--space-1); }
#loginOverlay input { margin-bottom: var(--space-3); }
#loginErr { color: var(--err-text); font-size: 13px; min-height: 18px; }

/* ======================= Combobox (tgs-combobox.js) ======================= */
/* Searchable single- or multi-select (the school picker). The input keeps the
   normal field look plus a chevron; the popup (.tgs-cb-pop) is absolute within
   .tgs-cb: a muted "current selection" line, then the listbox, which scrolls
   internally. JS caps the popup height to the room available and flips it
   above the input (.tgs-cb--up) when there is more room there. Options are
   >= 44px with 16px text at every width (touch-first). Multi mode
   (.tgs-cb--multi) draws a CSS checkbox per row (.tgs-cb-box). */
.tgs-cb { position: relative; width: 100%; min-width: 0; }
.tgs-cb > input.tgs-cb-input {
  width: 100%;
  padding-right: 38px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23566155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.tgs-cb.is-open > input.tgs-cb-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%23566155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tgs-cb > input.tgs-cb-input.is-invalid,
.tgs-cb > input.tgs-cb-input[aria-invalid="true"] { border-color: var(--err-border); box-shadow: 0 0 0 1px var(--err-border); }
.tgs-cb-pop {
  position: absolute; z-index: 40;
  left: 0; right: 0; top: calc(100% + 4px);
  display: flex; flex-direction: column;
  max-height: min(45vh, 320px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-align: left;
}
.tgs-cb--up .tgs-cb-pop { top: auto; bottom: calc(100% + 4px); }
.tgs-cb-pop[hidden], .tgs-cb-list[hidden], .tgs-cb-current[hidden] { display: none; }
.tgs-cb-current {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--text-medium);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tgs-cb-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  margin: 0; padding: 4px 0; list-style: none;
}
.tgs-cb-opt {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  padding: 10px 12px 10px 8px;
  font-size: 16px; line-height: 1.35; color: var(--text-dark);
  cursor: pointer; user-select: none;
  transition: background-color var(--ease);
}
.tgs-cb-opt .tgs-cb-text { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tgs-cb-opt .tgs-cb-label { min-width: 0; overflow-wrap: anywhere; }
.tgs-cb-opt .tgs-cb-area { font-size: var(--fs-sm); line-height: 1.3; font-weight: 400; color: var(--text-medium); overflow-wrap: anywhere; }
.tgs-cb-opt .tgs-cb-tag { flex: 0 0 auto; }
.tgs-cb-check-slot { flex: 0 0 18px; width: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary-dark); }
.tgs-cb-opt.is-active { background: var(--primary-bg); box-shadow: inset 3px 0 0 var(--primary); }
.tgs-cb-opt.is-selected { font-weight: 600; color: var(--primary-dark); }
.tgs-cb-opt-empty { color: var(--text-medium); }
.tgs-cb-opt-pinned { color: var(--primary-dark); }
.tgs-cb-first-pinned { border-top: 1px solid var(--border-soft); margin-top: 4px; }
.tgs-cb-none {
  padding: 12px 12px 12px 34px; min-height: var(--tap);
  font-size: var(--fs-sm); color: var(--text-medium); font-style: italic;
}
/* multi: drawn checkbox (no nested <input> inside role=option) */
.tgs-cb--multi .tgs-cb-opt { padding-left: 12px; gap: 10px; }
.tgs-cb--multi .tgs-cb-opt.is-selected { font-weight: inherit; color: var(--text-dark); }
.tgs-cb-box {
  flex: 0 0 20px; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--primary); border-radius: 4px;
  background: var(--surface); color: #fff;
}
.tgs-cb-box.is-on, .tgs-cb-box.is-mixed { background: var(--primary-dark); border-color: var(--primary-dark); }
.tgs-cb-box .tgs-cb-check { width: 14px; height: 14px; }
.tgs-cb-opt-all { font-weight: 600; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.tgs-cb--multi .tgs-cb-opt-all.is-selected { font-weight: 600; }
@media (forced-colors: active) {
  .tgs-cb-opt.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .tgs-cb-box { border-color: CanvasText; }
  .tgs-cb-box.is-on, .tgs-cb-box.is-mixed { background: Highlight; border-color: Highlight; color: HighlightText; }
}
@media print { .tgs-cb-pop { display: none !important; } }

/* ============================ Utilities =================================== */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.print-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================== Print ===================================== */
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #222; font-size: 11pt; display: block; min-height: 0; }
  .app-header, .tool-footer, .btn, .btn-row, .toolbar, .tabs, .back,
  #loginOverlay, .no-print, .progress-wrap { display: none !important; }
  .print-only { display: block !important; }
  .print-header {
    display: flex !important; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #CCA98B; padding-bottom: 8px; margin-bottom: 14px;
    font-family: var(--font-display); color: #566155; font-size: 11pt;
  }
  .print-header img { height: 28px; width: auto; }
  .wrap { max-width: none; padding: 0; }
  .card, .sub-card, .instr-block, .diffbox, .stat, .crisis-card, .crisis-banner, .disclaimer, .profile {
    box-shadow: none; break-inside: avoid; page-break-inside: avoid;
  }
  .card { border: 1px solid #ccc; padding: 12pt; }
  .module-head { break-after: avoid; page-break-after: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  table { font-size: 9.5pt; }
  tbody tr:hover > td { background: none; }
  textarea { border: 1px solid #ccc; min-height: 3.2em; height: auto !important; overflow: visible; }
  input[type=text], input[type=date] { border: none; border-bottom: 1px solid #999; box-shadow: none; }
  a[href]::after { content: ""; }
  .likert label, .bar, .bar > div, .pill, .crisis-card, .crisis-banner, .module-head {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}