/* ============================================================================
   dm-covid19 — Design System  ·  SINGLE stylesheet (source of truth)
   บริการสร้างเสริมสุขภาพ ผู้อยู่กับเบาหวานแต่ละระยะ

   Link THIS one file. It contains, in order:
     1. Fonts            (@import Google + local @font-face)
     2. Tokens           (:root custom properties — colors, grade, type, space)
     3. Base elements    (reset + on-brand defaults for raw HTML)
     4. Layout           (.dm-page / .dm-container / .dm-section / grids / stack)
     5. App chrome        (.dm-appbar / .dm-nav / .dm-flash / .dm-footer)
     6. Components        (.dm-* — each preceded by its MARKUP CONTRACT)
     7. Utilities        (.dm-* helpers)
     8. Legacy reskin     (existing class names re-mapped onto DS tokens so the
                          whole app cascades on-brand before pages are touched)
     9. Responsive + print

   AUDIENCE-FIRST: high contrast, ≥48px tap targets, 17px body, calm Thai copy,
   no emoji. Colour is never the only signal (grades pair hue + number + title).

   ── MARKUP-CONTRACT INDEX (hand-write these inline where components appear) ──
     Button ......... a/button.dm-btn.dm-btn--{primary|secondary|ghost|danger|accent}[ --sm|--lg|--block]
     Card ........... div.dm-card[.dm-card--soft|--accent|--outline][.dm-card--interactive]
     Tool tile ...... a/button.dm-tile[.is-disabled] > .dm-tile__title + .dm-tile__sub
     Field .......... .dm-field > label.dm-label + (.dm-control | .dm-control--unit>input+ .dm-unit) + .dm-helper/.dm-error
     Select ......... .dm-field > label.dm-label + select   (chevron auto)
     Radio cards .... .dm-radio-group > label.dm-radio > input.dm-radio__input + .dm-radio__control + .dm-radio__body(.dm-radio__label/.dm-radio__desc)
     Checkbox ....... label.dm-checkbox > input.dm-checkbox__input + .dm-checkbox__box + .dm-checkbox__label
     Switch ......... label.dm-switch > .dm-switch__label + input.dm-switch__input + .dm-switch__track
     Badge .......... span.dm-badge.dm-badge--{neutral|brand|good|warn|bad|accent} [> .dm-badge__dot] + text
     Alert .......... div.dm-alert.dm-alert--{info|success|warning|danger} > .dm-alert__icon(svg) + .dm-alert__content(.dm-alert__title/.dm-alert__body)
     StepProgress ... .dm-step > .dm-step__head(.dm-step__label/.dm-step__count) + .dm-step__track>.dm-step__fill[style=width]
     ReadingStat .... .dm-reading.dm-reading--{good|warn|bad|neutral} > .dm-reading__head(.dm-reading__label/.dm-reading__chip) + .dm-reading__value(.dm-reading__num/.dm-reading__unit/.dm-reading__trend) + .dm-reading__note
     RangeMeter ..... .dm-range > .dm-range__plot(.dm-range__marker[style=left]>.dm-range__mval+.dm-range__needle ; .dm-range__track>.dm-range__seg.dm-range__seg--{good|warn|bad}[style=width]) + .dm-range__scale(span,span)
     GradeLevel ..... span.dm-grade.dm-grade--{1..5}[ --sm|--lg][ --full] > .dm-grade__chip(N) + .dm-grade__meta(.dm-grade__eyebrow/.dm-grade__title)
     GradeMeter ..... .dm-grademeter > .dm-grademeter__row > .dm-grademeter__col.dm-grademeter__col--{1..5}[.is-active](>.dm-grademeter__here)>.dm-grademeter__seg>span ; + .dm-grademeter__caption(.dm-grademeter__cnum/.dm-grademeter__ctext)
     IconButton ..... button.dm-iconbtn.dm-iconbtn--{ghost|soft|solid}[ --square] > svg
   ========================================================================== */

/* ============================================================================
   1. FONTS
   Weight 400 ships locally; 300/500/600/700 + IBM Plex Mono load from Google.
   Legacy family names are aliased so old inline references still resolve.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai+Looped:wght@300;400;500;600;700&display=swap');

@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 400; font-display: swap; src: url('IBMPlexSansThai-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Thai Looped'; font-style: normal; font-weight: 400; font-display: swap; src: url('IBMPlexSansThaiLooped-Regular.ttf') format('truetype'); }
/* Legacy aliases (old code referenced these no-space names) */
@font-face { font-family: 'IBMPlexSansThai'; font-style: normal; font-weight: 400; font-display: swap; src: url('IBMPlexSansThai-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBMPlexSansThaiLooped-Regular'; font-style: normal; font-weight: 400; font-display: swap; src: url('IBMPlexSansThaiLooped-Regular.ttf') format('truetype'); }

/* ============================================================================
   2. TOKENS
   ========================================================================== */
:root {
  /* ---- Brand: Blue ---- */
  --blue-900: #06335c; --blue-800: #0a477f; --blue-700: #0b5ba3; --blue-600: #1268b3;
  --blue-500: #2c7fc6; --blue-300: #88bbe2; --blue-100: #d6e7f5; --blue-50: #eef5fc;
  /* ---- Brand: Gold ---- */
  --gold-700: #b8860a; --gold-600: #d9a40d; --gold-500: #f5b915; --gold-400: #f8c948;
  --gold-200: #fce4a3; --gold-100: #fdf2d4; --gold-50: #fefaee;
  /* ---- Support: Green ---- */
  --green-700: #3d8a2e; --green-600: #4ba238; --green-500: #60c048; --green-300: #a8d860;
  --green-100: #dcefcf; --green-50: #f0f8e9;
  /* ---- Support: Sky + Sand ---- */
  --sky-300: #a8d8f0; --sky-100: #e3f1fa; --sand-200: #ece9d6; --sand-100: #f5f3e7;
  /* ---- Semantic status ---- */
  --danger-700: #b3261e; --danger-500: #e0463c; --danger-100: #fbe3e1;
  --warning-500: #f59e0b; --warning-100: #fdeccd; --warning-fg: #92660a;
  --success-600: #4ba238; --success-100: #dcefcf; --info-500: #2c7fc6; --info-100: #d6e7f5;
  /* ---- Neutral ramp (warm-tinted) ---- */
  --ink-900: #1a1f24; --ink-800: #2b3138; --ink-700: #424a52; --ink-600: #5c656e;
  --ink-500: #79828b; --ink-400: #9aa2aa; --ink-300: #c3c9ce; --ink-200: #dde1e5;
  --ink-100: #eceef0; --ink-50: #f6f7f8; --white: #ffffff;

  /* ---- Semantic aliases ---- */
  --brand: var(--blue-700); --brand-strong: var(--blue-800); --brand-soft: var(--blue-50);
  --accent: var(--gold-500); --accent-strong: var(--gold-600); --accent-soft: var(--gold-100);
  --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500);
  --text-placeholder: var(--ink-400); --text-on-brand: var(--white); --text-on-accent: var(--ink-900);
  --text-link: var(--blue-700);
  --surface-page: var(--white); --surface-canvas: var(--ink-50); --surface-card: var(--white);
  --surface-soft: var(--blue-50); --surface-sunken: var(--sand-100);
  --border-subtle: var(--ink-100); --border-default: var(--ink-200); --border-strong: var(--ink-300);
  --border-focus: var(--blue-500);
  --status-good: var(--success-600); --status-good-bg: var(--success-100);
  --status-warn: var(--warning-500); --status-warn-bg: var(--warning-100);
  --status-bad: var(--danger-500); --status-bad-bg: var(--danger-100);
  --focus-ring: 0 0 0 3px var(--blue-300);

  /* ---- Diabetes grade scale (1 → 5, green → red) ---- */
  --grade-1: #2aa45c; --grade-1-soft: #e4f5ec; --grade-1-fg: #157038;
  --grade-2: #8cbf1f; --grade-2-soft: #f0f6da; --grade-2-fg: #5a7d0f;
  --grade-3: #f0a81e; --grade-3-soft: #fdefcf; --grade-3-fg: #946106;
  --grade-4: #ee7220; --grade-4-soft: #fce3d2; --grade-4-fg: #9e4509;
  --grade-5: #db3b3b; --grade-5-soft: #fbe0e0; --grade-5-fg: #a01f1f;
  --grade-0: #79828b; --grade-0-soft: #eceef0; --grade-0-fg: #5c656e; /* unassessed */

  /* ---- Type ---- */
  --font-sans: 'IBM Plex Sans Thai', 'IBM Plex Sans Thai Looped', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-friendly: 'IBM Plex Sans Thai Looped', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans Thai', 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --text-2xs: 12px; --text-xs: 13px; --text-sm: 15px; --text-base: 17px; --text-md: 19px;
  --text-lg: 22px; --text-xl: 26px; --text-2xl: 31px; --text-3xl: 37px; --text-4xl: 44px;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.55; --lh-relaxed: 1.75;
  --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.02em;
  --type-h1-size: var(--text-3xl); --type-h2-size: var(--text-2xl); --type-h3-size: var(--text-xl);
  --type-title-size: var(--text-lg); --type-body-size: var(--text-base); --type-small-size: var(--text-sm);

  /* ---- Space / radius / sizing ---- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --control-h-sm: 40px; --control-h: 52px; --control-h-lg: 60px; --tap-min: 48px;
  --border-w: 1px; --border-w-thick: 2px;
  --shadow-xs: 0 1px 2px rgba(10,71,127,0.06); --shadow-sm: 0 2px 6px rgba(10,71,127,0.08);
  --shadow-md: 0 4px 14px rgba(10,71,127,0.10); --shadow-lg: 0 10px 28px rgba(10,71,127,0.14);
  /* ---- Layout ---- */
  --page-max: 480px; --page-pad: 20px; --content-max: 1080px; --header-h: 60px;
  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22,1,0.36,1); --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
}

/* ============================================================================
   3. BASE ELEMENTS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  overflow-wrap: anywhere;   /* Thai has no spaces — allow long headings to wrap, not clip */
}
h1 { font-size: var(--type-h1-size); }
h2 { font-size: var(--type-h2-size); }
h3 { font-size: var(--type-h3-size); font-weight: var(--fw-semibold); }
h4 { font-size: var(--type-title-size); font-weight: var(--fw-semibold); }
h5 { font-size: var(--text-md); font-weight: var(--fw-semibold); }
h6 { font-size: var(--text-base); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); line-height: var(--lh-normal); text-wrap: pretty; }
ul, ol { line-height: var(--lh-normal); padding-left: 1.4em; }
li { margin-bottom: var(--space-1); }

a { color: var(--text-link); text-decoration: none; font-weight: var(--fw-medium); transition: color var(--dur-fast); }
a:hover { text-decoration: underline; }
a.no-decoration, a.no-decoration:hover { text-decoration: none; }

strong, b { font-weight: var(--fw-semibold); color: var(--text-strong); }
small { font-size: var(--text-sm); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

img, svg { max-width: 100%; }
img { height: auto; }

hr { border: none; border-top: 1px solid var(--border-default); margin: var(--space-6) 0; }

/* Numeric health readings render in tabular mono */
.dm-figure, .dm-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   4. LAYOUT
   ========================================================================== */
.dm-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-canvas); }
.dm-main { flex: 1 0 auto; width: 100%; }
.dm-container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--page-pad); }
.dm-container--narrow { max-width: 760px; }
.dm-container--form { max-width: 560px; }
.dm-container--tight { max-width: var(--page-max); }
.dm-container--wide { max-width: 1280px; }

.dm-section { margin-bottom: var(--space-8); }
.dm-section--soft { background: var(--surface-soft); border-radius: var(--radius-lg); padding: var(--space-6); }
.dm-section--sunken { background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-6); }

.dm-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.dm-stack--sm { gap: var(--space-2); }
.dm-stack--lg { gap: var(--space-6); }
.dm-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dm-row--between { justify-content: space-between; }
.dm-row--end { justify-content: flex-end; }
.dm-row--center { justify-content: center; }
.dm-spacer { flex: 1 1 auto; }

.dm-grid { display: grid; gap: var(--space-4); }
.dm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Page header block (eyebrow / title / subtitle) */
.dm-pagehead { margin-bottom: var(--space-6); }
.dm-pagehead__eyebrow { font: var(--fw-semibold) var(--text-sm)/1 var(--font-sans); color: var(--brand); letter-spacing: var(--ls-wide); margin-bottom: var(--space-2); display: block; }
.dm-pagehead h1 { margin: 0 0 var(--space-2); }
.dm-pagehead__sub { color: var(--text-muted); font-size: var(--text-md); margin: 0; }

/* ============================================================================
   5. APP CHROME  (used by base.html)
   ========================================================================== */
.dm-appbar {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--header-h); padding: var(--space-2) var(--page-pad);
  background: var(--white); border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}
.dm-appbar__logo { display: flex; align-items: center; flex: none; }
.dm-appbar__logo img { height: 38px; width: auto; display: block; }
.dm-appbar__brand { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
.dm-appbar__brand b { font: var(--fw-semibold) var(--text-base)/1.1 var(--font-sans); color: var(--text-strong); }
.dm-appbar__brand span { font-size: var(--text-2xs); color: var(--text-muted); }
.dm-appbar__nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.dm-navlink {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font: var(--fw-medium) var(--text-sm)/1 var(--font-sans); color: var(--brand);
  border: 1px solid var(--blue-100); background: var(--white); white-space: nowrap;
}
.dm-navlink:hover { background: var(--blue-50); text-decoration: none; }
.dm-navlink--role { color: var(--danger-500); border-color: var(--danger-100); font-weight: var(--fw-semibold); }
.dm-navlink--role:hover { background: var(--danger-100); }
.dm-navlink__icon { width: 18px; height: 18px; flex: none; }

/* Flash messages */
.dm-flash { max-width: var(--content-max); margin: var(--space-3) auto 0; padding: 0 var(--page-pad); }
.dm-flash__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-800);
  font-size: var(--text-sm); margin-bottom: var(--space-2);
}
.dm-flash__item::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.dm-flash__item p { margin: 0; }

/* Footer */
.dm-footer { flex-shrink: 0; background: var(--white); border-top: 1px solid var(--border-subtle); }
.dm-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--page-pad); display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap; }
.dm-footer a { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.dm-footer a:hover { color: var(--brand); text-decoration: none; }

/* ============================================================================
   6. COMPONENTS
   ========================================================================== */

/* ---- Button ---------------------------------------------------------------
   CONTRACT: <a|button class="dm-btn dm-btn--primary">บันทึก</a>
   variants: --primary --secondary --ghost --danger --accent ; sizes: --sm --lg ; --block (full width) */
.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 22px; min-width: 0;
  font: var(--fw-semibold) var(--text-base)/1 var(--font-sans); text-align: center;
  border: var(--border-w-thick) solid transparent; border-radius: var(--radius-pill);
  background: var(--blue-700); color: var(--white); cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.dm-btn:hover { text-decoration: none; }
.dm-btn:active { transform: scale(0.97); }
.dm-btn svg { width: 20px; height: 20px; flex: none; }
.dm-btn--sm { height: var(--control-h-sm); padding: 0 16px; font-size: var(--text-sm); }
.dm-btn--lg { height: var(--control-h-lg); padding: 0 28px; font-size: var(--text-md); }
.dm-btn--block { display: flex; width: 100%; }
.dm-btn--primary { background: var(--blue-700); color: var(--white); box-shadow: var(--shadow-sm); }
.dm-btn--primary:hover { background: var(--blue-800); color: var(--white); }
.dm-btn--secondary { background: var(--white); color: var(--blue-700); border-color: var(--blue-300); }
.dm-btn--secondary:hover { background: var(--blue-50); color: var(--blue-800); }
.dm-btn--ghost { background: transparent; color: var(--blue-700); }
.dm-btn--ghost:hover { background: var(--blue-50); }
.dm-btn--danger { background: var(--danger-500); color: var(--white); }
.dm-btn--danger:hover { background: var(--danger-700); color: var(--white); }
.dm-btn--accent { background: var(--gold-500); color: var(--ink-900); }
.dm-btn--accent:hover { background: var(--gold-600); color: var(--ink-900); }
.dm-btn:disabled, .dm-btn.is-disabled {
  background: var(--ink-200); color: var(--ink-500); border-color: transparent;
  box-shadow: none; cursor: not-allowed; opacity: 0.7; transform: none;
}

/* ---- Card -----------------------------------------------------------------
   CONTRACT: <div class="dm-card">…</div>  variants: --soft --accent --outline ; --interactive */
.dm-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-5);
}
/* Cards inside gap-based layouts shouldn't double-space */
.dm-stack > .dm-card, .dm-grid > .dm-card, .dm-row > .dm-card, .dm-grid > .recommendation-section { margin-bottom: 0; }
.dm-card--soft { background: var(--blue-50); border-color: var(--blue-100); }
.dm-card--accent { background: var(--gold-50); border-color: var(--gold-200); }
.dm-card--outline { border-width: var(--border-w-thick); border-color: var(--border-default); box-shadow: none; }
.dm-card--flush { padding: 0; overflow: hidden; }
.dm-card--interactive { cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dm-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dm-card__title { font: var(--fw-semibold) var(--text-md)/1.3 var(--font-sans); color: var(--text-strong); margin: 0 0 var(--space-2); }
.dm-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }

/* ---- Tool tile (squircle launcher) ---------------------------------------
   CONTRACT: <a class="dm-tile"><span class="dm-tile__title">…</span><span class="dm-tile__sub">…</span></a>  ; .is-disabled for "อยู่ระหว่างการพัฒนา" */
.dm-tile {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: var(--space-1); padding: var(--space-5) var(--space-4); min-height: 120px;
  background: var(--white); border: var(--border-w-thick) solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); color: var(--text-strong);
  cursor: pointer; transition: all var(--dur-base) var(--ease-out);
}
.dm-tile:hover { border-color: var(--blue-500); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.dm-tile__icon { width: 44px; height: 44px; margin-bottom: var(--space-1); }
.dm-tile__title { font: var(--fw-semibold) var(--text-base)/1.3 var(--font-sans); color: var(--text-strong); }
.dm-tile__sub { font: var(--fw-regular) var(--text-xs)/1.3 var(--font-sans); color: var(--text-muted); }
.dm-tile.is-disabled { background: var(--ink-50); border-style: dashed; border-color: var(--border-default); box-shadow: none; cursor: default; transform: none; }
.dm-tile.is-disabled .dm-tile__title { color: var(--text-muted); }

/* ---- Form field -----------------------------------------------------------
   CONTRACT:
     <div class="dm-field">
       <label class="dm-label" for="x">น้ำตาลปลายนิ้ว <span class="dm-required">*</span></label>
       <div class="dm-control dm-control--unit">
         <input id="x" type="number"> <span class="dm-unit">mg/dL</span>
       </div>
       <span class="dm-helper">วัดหลังอดอาหาร 8 ชม.</span>   (or .dm-error)
     </div>
   Bare <input>/<select>/<textarea> are already styled below, so simple forms
   look right without the wrapper. */
.dm-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.dm-label { font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--text-strong); }
.dm-required { color: var(--danger-500); margin-inline-start: 4px; }
.dm-helper { font: var(--fw-regular) var(--text-xs)/1.4 var(--font-sans); color: var(--text-muted); }
.dm-error { font: var(--fw-regular) var(--text-xs)/1.4 var(--font-sans); color: var(--danger-700); }

input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
input[type="password"], input[type="search"], input[type="date"], input[type="time"],
input[type="url"], input:not([type]), select, textarea {
  width: auto; max-width: 100%; font: var(--fw-regular) var(--text-base)/1.2 var(--font-sans);
  color: var(--text-strong); background: var(--white);
  border: var(--border-w-thick) solid var(--border-default); border-radius: var(--radius-md);
  padding: 13px var(--space-4); margin: 0; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input[type="number"] { font-family: var(--font-mono); }
input::placeholder, textarea::placeholder { color: var(--text-placeholder); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--ink-50); color: var(--text-muted); cursor: not-allowed; }
textarea { width: 100%; min-height: 8rem; resize: vertical; line-height: var(--lh-normal); }

select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2379828b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.dm-control { display: flex; align-items: center; height: var(--control-h); background: var(--white); border: var(--border-w-thick) solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.dm-control:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.dm-control > input, .dm-control > select { flex: 1; min-width: 0; height: 100%; border: none; border-radius: 0; box-shadow: none !important; }
.dm-control > input:focus, .dm-control > select:focus { box-shadow: none; }
.dm-unit { display: flex; align-items: center; align-self: stretch; padding: 0 var(--space-4); font: var(--fw-medium) var(--text-sm)/1 var(--font-sans); color: var(--text-muted); border-inline-start: 1px solid var(--border-subtle); }
.dm-control--invalid { border-color: var(--danger-500); }
.dm-input--full, .dm-field input, .dm-field select, .dm-field textarea { width: 100%; }
.dm-field input[type="radio"], .dm-field input[type="checkbox"] { width: auto; }

/* Inline radio/checkbox choice groups (WTForms {% for choice %} rendering) */
.dm-choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; margin-top: var(--space-1); }
.dm-choices label { margin: 0; line-height: 1.4; }
.dm-choice { display: inline-flex; align-items: center; gap: 6px; }
.dm-choice label { margin: 0; }

/* Long legacy forms wrapped in a single card: space out raw <div>/<p> field groups */
.dm-formcard > div, .dm-formcard > p { margin-bottom: var(--space-4); }
.dm-formcard h2 { margin-top: var(--space-6); }
.dm-formcard hr { margin: var(--space-5) 0; }
.dm-formcard input[type="radio"], .dm-formcard input[type="checkbox"] { accent-color: var(--blue-700); transform: translateY(1px); }

/* ---- Radio cards ----------------------------------------------------------
   CONTRACT: see index. Selected state via :has(). */
.dm-radio-group { display: flex; flex-direction: column; gap: var(--space-3); }
.dm-radio { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--white); border: var(--border-w-thick) solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.dm-radio:has(.dm-radio__input:checked) { border-color: var(--blue-700); background: var(--blue-50); }
.dm-radio:has(.dm-radio__input:focus-visible) { box-shadow: var(--focus-ring); }
.dm-radio__input { position: absolute; opacity: 0; width: 0; height: 0; }
.dm-radio__control { flex: none; margin-top: 2px; width: 24px; height: 24px; border-radius: 50%; border: var(--border-w-thick) solid var(--border-strong); background: var(--white); display: flex; align-items: center; justify-content: center; }
.dm-radio:has(.dm-radio__input:checked) .dm-radio__control { border-color: var(--blue-700); }
.dm-radio__control::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-700); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.dm-radio:has(.dm-radio__input:checked) .dm-radio__control::after { transform: scale(1); }
.dm-radio__body { display: flex; flex-direction: column; gap: 2px; }
.dm-radio__label { font: var(--fw-medium) var(--text-base)/1.35 var(--font-sans); color: var(--text-strong); }
.dm-radio:has(.dm-radio__input:checked) .dm-radio__label { font-weight: var(--fw-semibold); }
.dm-radio__desc { font: var(--fw-regular) var(--text-sm)/1.4 var(--font-sans); color: var(--text-muted); }

/* ---- Checkbox -------------------------------------------------------------
   CONTRACT: <label class="dm-checkbox"><input type="checkbox" class="dm-checkbox__input"><span class="dm-checkbox__box"></span><span class="dm-checkbox__label">…</span></label> */
.dm-checkbox { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; }
.dm-checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; }
.dm-checkbox__box { position: relative; flex: none; width: 26px; height: 26px; border-radius: var(--radius-xs); border: var(--border-w-thick) solid var(--border-strong); background: var(--white); transition: all var(--dur-fast) var(--ease-out); }
.dm-checkbox__box::after { content: ''; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid var(--white); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.dm-checkbox:has(.dm-checkbox__input:checked) .dm-checkbox__box { background: var(--blue-700); border-color: var(--blue-700); }
.dm-checkbox:has(.dm-checkbox__input:checked) .dm-checkbox__box::after { transform: rotate(45deg) scale(1); }
.dm-checkbox:has(.dm-checkbox__input:focus-visible) .dm-checkbox__box { box-shadow: var(--focus-ring); }
.dm-checkbox__label { font: var(--fw-regular) var(--text-base)/1.4 var(--font-sans); color: var(--text-body); }

/* ---- Switch ---------------------------------------------------------------
   CONTRACT: <label class="dm-switch"><span class="dm-switch__label">…</span><input type="checkbox" class="dm-switch__input"><span class="dm-switch__track"></span></label> */
.dm-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap-min); cursor: pointer; }
.dm-switch__label { font: var(--fw-medium) var(--text-base)/1.4 var(--font-sans); color: var(--text-strong); }
.dm-switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.dm-switch__track { position: relative; flex: none; width: 52px; height: 30px; border-radius: var(--radius-pill); background: var(--ink-300); transition: background var(--dur-base) var(--ease-out); }
.dm-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); transition: left var(--dur-base) var(--ease-out); }
.dm-switch:has(.dm-switch__input:checked) .dm-switch__track { background: var(--blue-700); }
.dm-switch:has(.dm-switch__input:checked) .dm-switch__track::after { left: 25px; }
.dm-switch:has(.dm-switch__input:focus-visible) .dm-switch__track { box-shadow: var(--focus-ring); }

/* ---- Badge ----------------------------------------------------------------
   CONTRACT: <span class="dm-badge dm-badge--good"><span class="dm-badge__dot"></span>อยู่ในเกณฑ์</span> */
.dm-badge {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 12px;
  border-radius: var(--radius-pill); font: var(--fw-semibold) var(--text-xs)/1.2 var(--font-sans);
  white-space: nowrap; background: var(--ink-100); color: var(--ink-700); --dot: var(--ink-500);
}
.dm-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.dm-badge--neutral { background: var(--ink-100); color: var(--ink-700); --dot: var(--ink-500); }
.dm-badge--brand { background: var(--blue-100); color: var(--blue-800); --dot: var(--blue-600); }
.dm-badge--good { background: var(--success-100); color: var(--green-700); --dot: var(--success-600); }
.dm-badge--warn { background: var(--warning-100); color: var(--warning-fg); --dot: var(--warning-500); }
.dm-badge--bad { background: var(--danger-100); color: var(--danger-700); --dot: var(--danger-500); }
.dm-badge--accent { background: var(--gold-100); color: var(--gold-700); --dot: var(--gold-600); }

/* ---- Alert ----------------------------------------------------------------
   CONTRACT: <div class="dm-alert dm-alert--warning" role="status"><svg class="dm-alert__icon">…</svg><div class="dm-alert__content"><span class="dm-alert__title">…</span><span class="dm-alert__body">…</span></div></div> */
.dm-alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--blue-300); background: var(--info-100); --alert-fg: var(--blue-800); }
.dm-alert__icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--alert-fg); stroke: var(--alert-fg); }
.dm-alert__content { display: flex; flex-direction: column; gap: 2px; }
.dm-alert__title { font: var(--fw-semibold) var(--text-base)/1.35 var(--font-sans); color: var(--alert-fg); }
.dm-alert__body { font: var(--fw-regular) var(--text-sm)/1.5 var(--font-sans); color: var(--text-body); }
.dm-alert--info { background: var(--info-100); border-color: var(--blue-300); --alert-fg: var(--blue-800); }
.dm-alert--success { background: var(--success-100); border-color: var(--green-300); --alert-fg: var(--green-700); }
.dm-alert--warning { background: var(--warning-100); border-color: var(--gold-400); --alert-fg: var(--warning-fg); }
.dm-alert--danger { background: var(--danger-100); border-color: var(--danger-500); --alert-fg: var(--danger-700); }

/* ---- StepProgress ---------------------------------------------------------
   CONTRACT: <div class="dm-step"><div class="dm-step__head"><span class="dm-step__label">…</span><span class="dm-step__count"><b>2</b> / 6</span></div><div class="dm-step__track"><div class="dm-step__fill" style="width:33%"></div></div></div> */
.dm-step { display: flex; flex-direction: column; gap: var(--space-2); }
.dm-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.dm-step__label { font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--text-strong); }
.dm-step__count { font: var(--fw-semibold) var(--text-sm)/1 var(--font-mono); color: var(--text-muted); margin-inline-start: auto; }
.dm-step__count b { color: var(--blue-700); }
.dm-step__track { height: 10px; border-radius: var(--radius-pill); background: var(--ink-100); overflow: hidden; }
.dm-step__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--blue-600), var(--blue-700)); transition: width var(--dur-slow) var(--ease-out); }

/* ---- ReadingStat ----------------------------------------------------------
   CONTRACT: see index. status modifier sets the colour-coded left edge + chip. */
.dm-reading {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); border-inline-start: 5px solid var(--ink-300);
  --r-bar: var(--ink-300); --r-chip-bg: var(--ink-100); --r-chip-fg: var(--ink-600);
}
.dm-reading--good { --r-bar: var(--success-600); --r-chip-bg: var(--success-100); --r-chip-fg: var(--green-700); }
.dm-reading--warn { --r-bar: var(--warning-500); --r-chip-bg: var(--warning-100); --r-chip-fg: var(--warning-fg); }
.dm-reading--bad { --r-bar: var(--danger-500); --r-chip-bg: var(--danger-100); --r-chip-fg: var(--danger-700); }
.dm-reading { border-inline-start-color: var(--r-bar); }
.dm-reading__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dm-reading__label { font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--text-body); }
.dm-reading__chip { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--r-chip-bg); color: var(--r-chip-fg); font: var(--fw-semibold) var(--text-2xs)/1.2 var(--font-sans); white-space: nowrap; }
.dm-reading__value { display: flex; align-items: baseline; gap: var(--space-2); }
.dm-reading__num { font: var(--fw-semibold) var(--text-3xl)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-900); }
.dm-reading__unit { font: var(--fw-medium) var(--text-sm)/1 var(--font-sans); color: var(--text-muted); }
.dm-reading__trend { margin-inline-start: 4px; font: var(--fw-bold) var(--text-sm)/1 var(--font-sans); color: var(--r-bar); }
.dm-reading__note { font: var(--fw-regular) var(--text-xs)/1.4 var(--font-sans); color: var(--text-muted); }

/* ---- RangeMeter -----------------------------------------------------------
   CONTRACT: see index. Marker left:% and segment width:% are inline styles. */
.dm-range__plot { position: relative; padding-top: 26px; }
.dm-range__marker { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.dm-range__mval { font: var(--fw-semibold) var(--text-sm)/1 var(--font-mono); color: var(--ink-900); white-space: nowrap; }
.dm-range__munit { font-size: 11px; color: var(--text-muted); margin-inline-start: 2px; font-family: var(--font-sans); }
.dm-range__needle { width: 0; height: 0; border-inline: 6px solid transparent; border-top: 7px solid var(--ink-900); margin-top: 3px; }
.dm-range__track { display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden; }
.dm-range__seg { height: 100%; background: var(--ink-300); }
.dm-range__seg--good { background: var(--success-600); }
.dm-range__seg--warn { background: var(--warning-500); }
.dm-range__seg--bad { background: var(--danger-500); }
.dm-range__scale { display: flex; justify-content: space-between; margin-top: 6px; font: var(--fw-regular) var(--text-2xs)/1 var(--font-mono); color: var(--text-muted); }

/* ---- GradeLevel -----------------------------------------------------------
   CONTRACT: see index. .dm-grade--{1..5} sets the hue; --full = card radius. */
.dm-grade { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; background: var(--g-soft); border-radius: var(--radius-pill); max-width: 100%; --g-solid: var(--grade-1); --g-soft: var(--grade-1-soft); --g-fg: var(--grade-1-fg); }
.dm-grade--full { border-radius: var(--radius-lg); }
.dm-grade__chip { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--g-solid); display: flex; align-items: center; justify-content: center; font: var(--fw-bold) var(--text-md)/1 var(--font-mono); color: #1a1f24; }
.dm-grade__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dm-grade__eyebrow { font: var(--fw-regular) var(--text-2xs)/1.2 var(--font-sans); color: var(--text-muted); }
.dm-grade__title { font: var(--fw-semibold) var(--text-sm)/1.25 var(--font-sans); color: var(--g-fg); }
.dm-grade--sm { gap: 8px; padding: 4px 12px 4px 4px; }
.dm-grade--sm .dm-grade__chip { width: 24px; height: 24px; font-size: var(--text-sm); }
.dm-grade--sm .dm-grade__title { font-size: var(--text-xs); }
.dm-grade--lg { gap: 12px; padding: 6px 20px 6px 6px; }
.dm-grade--lg .dm-grade__chip { width: 38px; height: 38px; font-size: var(--text-xl); }
.dm-grade--lg .dm-grade__title { font-size: var(--text-base); }
.dm-grade--1 { --g-solid: var(--grade-1); --g-soft: var(--grade-1-soft); --g-fg: var(--grade-1-fg); }
.dm-grade--2 { --g-solid: var(--grade-2); --g-soft: var(--grade-2-soft); --g-fg: var(--grade-2-fg); }
.dm-grade--3 { --g-solid: var(--grade-3); --g-soft: var(--grade-3-soft); --g-fg: var(--grade-3-fg); }
.dm-grade--4 { --g-solid: var(--grade-4); --g-soft: var(--grade-4-soft); --g-fg: var(--grade-4-fg); }
.dm-grade--5 { --g-solid: var(--grade-5); --g-soft: var(--grade-5-soft); --g-fg: var(--grade-5-fg); }
.dm-grade--0 { --g-solid: var(--grade-0); --g-soft: var(--grade-0-soft); --g-fg: var(--grade-0-fg); }

/* ---- GradeMeter -----------------------------------------------------------
   CONTRACT: see index. The current grade column carries .is-active. */
.dm-grademeter__row { display: flex; gap: 6px; align-items: flex-end; }
.dm-grademeter__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; --g-solid: var(--grade-1); --g-fg: var(--grade-1-fg); }
.dm-grademeter__col--1 { --g-solid: var(--grade-1); --g-fg: var(--grade-1-fg); }
.dm-grademeter__col--2 { --g-solid: var(--grade-2); --g-fg: var(--grade-2-fg); }
.dm-grademeter__col--3 { --g-solid: var(--grade-3); --g-fg: var(--grade-3-fg); }
.dm-grademeter__col--4 { --g-solid: var(--grade-4); --g-fg: var(--grade-4-fg); }
.dm-grademeter__col--5 { --g-solid: var(--grade-5); --g-fg: var(--grade-5-fg); }
.dm-grademeter__here { font: var(--fw-bold) var(--text-2xs)/1 var(--font-sans); color: var(--g-fg); white-space: nowrap; }
.dm-grademeter__seg { width: 100%; height: 26px; border-radius: var(--radius-sm); background: var(--g-solid); opacity: 0.32; display: flex; align-items: center; justify-content: center; transition: all var(--dur-base) var(--ease-out); }
.dm-grademeter__seg span { font: var(--fw-bold) var(--text-xs)/1 var(--font-mono); color: #1a1f24; }
.dm-grademeter__col.is-active .dm-grademeter__seg { height: 40px; opacity: 1; box-shadow: var(--shadow-sm); outline: 2px solid var(--white); outline-offset: -4px; }
.dm-grademeter__col.is-active .dm-grademeter__seg span { font-size: var(--text-md); }
.dm-grademeter__caption { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 10px; }
.dm-grademeter__cnum { font: var(--fw-bold) var(--text-sm)/1 var(--font-mono); color: var(--cap-fg, var(--text-strong)); }
.dm-grademeter__ctext { font: var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans); color: var(--cap-fg, var(--text-strong)); }

/* ---- IconButton -----------------------------------------------------------
   CONTRACT: <button class="dm-iconbtn dm-iconbtn--soft" aria-label="…"><svg>…</svg></button> ; --square for rounded square */
.dm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border: none; border-radius: 50%; background: transparent; color: var(--blue-700); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.dm-iconbtn:hover { background: var(--blue-50); }
.dm-iconbtn svg { width: 22px; height: 22px; }
.dm-iconbtn--soft { background: var(--blue-50); }
.dm-iconbtn--soft:hover { background: var(--blue-100); }
.dm-iconbtn--solid { background: var(--blue-700); color: var(--white); }
.dm-iconbtn--solid:hover { background: var(--blue-800); }
.dm-iconbtn--square { border-radius: var(--radius-md); }
.dm-iconbtn--sm { width: 40px; height: 40px; }
.dm-iconbtn--lg { width: 56px; height: 56px; }

/* ---- Table (DS) -----------------------------------------------------------
   CONTRACT: <table class="dm-table"> … </table> (or just style bare tables below) */
.dm-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dm-table th { text-align: left; font: var(--fw-semibold) var(--text-xs)/1.3 var(--font-sans); color: var(--brand); padding: var(--space-3); border-bottom: var(--border-w-thick) solid var(--border-subtle); }
.dm-table td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.dm-table tbody tr { transition: background var(--dur-fast); }
.dm-table tbody tr:hover { background: var(--blue-50); }

/* Avatar / circular media */
.dm-avatar { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* Disclaimer note pattern */
.dm-disclaimer { font-size: var(--text-sm); color: var(--text-muted); background: var(--ink-50); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

/* ============================================================================
   7. UTILITIES
   ========================================================================== */
.dm-text-strong { color: var(--text-strong) !important; }
.dm-text-muted { color: var(--text-muted) !important; }
.dm-text-brand { color: var(--brand) !important; font-weight: var(--fw-semibold); }
.dm-text-danger { color: var(--danger-500) !important; }
.dm-text-success { color: var(--success-600) !important; }
.dm-text-center { text-align: center; }
.dm-text-left { text-align: left; }
.dm-text-right { text-align: right; }
.dm-fw-semibold { font-weight: var(--fw-semibold); }
.dm-fw-bold { font-weight: var(--fw-bold); }
.dm-sans { font-family: var(--font-sans); }
.dm-friendly { font-family: var(--font-friendly); }
.dm-eyebrow { font: var(--fw-semibold) var(--text-sm)/1 var(--font-sans); color: var(--brand); letter-spacing: var(--ls-wide); text-transform: none; }
.dm-muted-note { color: var(--text-muted); font-size: var(--text-sm); }
.dm-divider { height: 1px; background: var(--border-subtle); border: none; margin: var(--space-5) 0; }
.dm-mt-0 { margin-top: 0 !important; } .dm-mb-0 { margin-bottom: 0 !important; }
.dm-mt-2 { margin-top: var(--space-2); } .dm-mt-3 { margin-top: var(--space-3); } .dm-mt-4 { margin-top: var(--space-4); } .dm-mt-6 { margin-top: var(--space-6); }
.dm-mb-2 { margin-bottom: var(--space-2); } .dm-mb-3 { margin-bottom: var(--space-3); } .dm-mb-4 { margin-bottom: var(--space-4); } .dm-mb-6 { margin-bottom: var(--space-6); }
.dm-hidden { display: none !important; }
.dm-block { display: block; }
.dm-inline-block { display: inline-block; }
.dm-w-full { width: 100%; }
.dm-pill-note { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--ink-100); color: var(--ink-700); font-size: var(--text-xs); font-weight: var(--fw-semibold); }

/* Responsive video embed */
.dm-embed { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; border-radius: var(--radius-md); }
.dm-embed iframe, .dm-embed > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================================
   8. LEGACY RESKIN  —  old class vocabulary re-mapped onto DS tokens
   (so the entire app cascades on-brand before any page body is edited)
   ========================================================================== */

/* ---- Legacy typography helpers ---- */
.sans { font-family: var(--font-sans); }
.small { font-size: var(--text-sm); }
.smaller { font-size: var(--text-xs); }
.smallest { font-size: var(--text-2xs); }
.low-line-height { line-height: var(--lh-snug); }
.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; }
.inline-block { display: inline-block; } .float-left { float: left; clear: both; } .clear { clear: both; }
.low-margin { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.no-margin { margin-top: 0; margin-bottom: 0; }
.spacer-small { height: var(--space-2); } .spacer-big { height: var(--space-4); }
.blue-em { color: var(--brand); font-weight: var(--fw-semibold); }
.red-em { color: var(--danger-500); font-weight: var(--fw-semibold); }
.gray-em { color: var(--ink-600); font-weight: var(--fw-semibold); }
.gray { color: var(--ink-600); } .light-gray { color: var(--ink-300); } .text-gray { color: var(--ink-300); }
.red-required { display: inline-block; color: var(--danger-500); margin-right: 0.2em; }
.profile-param { display: inline-block; font-weight: var(--fw-semibold); color: var(--brand); margin: 0.15em 0.75em 0.15em 0; }

h1.title { font-family: var(--font-display); display: inline-block; font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--lh-tight); margin: 0.25em 0; }
h1.white { color: var(--white); }
p.subtitle { font-family: var(--font-sans); display: inline-block; font-size: var(--text-md); color: var(--text-muted); line-height: var(--lh-snug); margin: 0.25em 0; }
h2.dark { color: var(--brand); }
h2.black { color: var(--ink-900); }
p.form-question { margin: var(--space-2) 0; font-weight: var(--fw-medium); color: var(--text-strong); }
p.comment { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-2) 0 var(--space-1); }
p.comment::before { content: '\2193 '; }
.form-label { margin: var(--space-2) 0; font-weight: var(--fw-semibold); color: var(--text-strong); }
details { font-size: var(--text-sm); cursor: pointer; color: var(--text-muted); }

/* ---- Legacy links ---- */
a.white:link, a.white:visited, a.white:hover, a.white:active { color: var(--white); }

/* ---- Legacy hr / blockquote ---- */
hr.dark { border-top-color: var(--brand); }
blockquote { background: var(--blue-50); padding: var(--space-4); border-left: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: var(--space-5) 0; }
blockquote.form { background: var(--white); margin: 0 0 var(--space-2); }
blockquote.transparent { background: transparent; margin: 0 0 var(--space-4); }
blockquote.grade0 { background: var(--grade-0-soft); border-left-color: var(--grade-0); color: var(--text-body); }
blockquote.grade1 { background: var(--grade-1-soft); border-left-color: var(--grade-1); color: var(--text-body); }
blockquote.grade2 { background: var(--grade-2-soft); border-left-color: var(--grade-2); color: var(--text-body); }
blockquote.grade3 { background: var(--grade-3-soft); border-left-color: var(--grade-3); color: var(--text-body); }
blockquote.grade4 { background: var(--grade-4-soft); border-left-color: var(--grade-4); color: var(--text-body); }
blockquote.grade5 { background: var(--grade-5-soft); border-left-color: var(--grade-5); color: var(--text-body); }

/* ---- Legacy grade pills (div.gradeN — centered solid labels) ---- */
div.grade0, div.grade1, div.grade2, div.grade3, div.grade4, div.grade5 {
  text-align: center; font-weight: var(--fw-semibold); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--text-strong);
  margin-bottom: var(--space-3);
}
div.grade0 { background: var(--grade-0-soft); border-color: var(--grade-0); color: var(--grade-0-fg); }
div.grade1 { background: var(--grade-1-soft); border-color: var(--grade-1); color: var(--grade-1-fg); }
div.grade2 { background: var(--grade-2-soft); border-color: var(--grade-2); color: var(--grade-2-fg); }
div.grade3 { background: var(--grade-3-soft); border-color: var(--grade-3); color: var(--grade-3-fg); }
div.grade4 { background: var(--grade-4-soft); border-color: var(--grade-4); color: var(--grade-4-fg); }
div.grade5 { background: var(--grade-5-soft); border-color: var(--grade-5); color: var(--grade-5-fg); }

/* ---- Legacy zones / info boxes ---- */
.passed-zone { background: var(--blue-50); padding: var(--space-4); border: 1px solid var(--blue-100); border-radius: var(--radius-md); }
.caution-zone { background: var(--danger-100); padding: var(--space-2) var(--space-4); border: 1px solid var(--danger-100); border-radius: var(--radius-md); }
.participate { background: var(--ink-50); padding: var(--space-4); border-radius: var(--radius-md); }
.info-box { background: var(--white); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); }
.instruction { font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-2) var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.instruction table { margin-left: var(--space-3); }
.instruction td { padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default); }
div.address-list-div { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
div.admin-tool { display: block; padding: var(--space-1) var(--space-3); border: 1px solid var(--border-subtle); background: var(--white); border-radius: var(--radius-md); margin-top: var(--space-2); }
div.custom-message { padding: var(--space-3); border: 1px solid var(--gold-400); background: var(--gold-100); border-radius: var(--radius-md); break-inside: avoid; }
div.custom-message p { white-space: pre-wrap; }

/* ---- Legacy button / link-button classes ---- */
.button, .search-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); height: var(--control-h-sm); padding: 0 var(--space-5);
  font-weight: var(--fw-semibold); color: var(--brand); border: var(--border-w-thick) solid var(--blue-300);
  border-radius: var(--radius-pill); background: var(--white); cursor: pointer; transition: background var(--dur-fast);
}
.button:hover, .search-button:hover { background: var(--blue-50); color: var(--blue-800); }
.button-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); height: var(--control-h-sm); padding: 0 var(--space-5);
  font-weight: var(--fw-semibold); color: var(--white); border: none; border-radius: var(--radius-pill);
  background: var(--blue-700); cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur-fast);
}
.button-dark:hover { background: var(--blue-800); color: var(--white); }
.search-clear-button { display: inline-flex; align-items: center; font-family: var(--font-sans); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); border: none; border-radius: var(--radius-pill); background: transparent; padding: var(--space-2) var(--space-3); cursor: pointer; }
.search-clear-button:hover { color: var(--brand); background: var(--blue-50); }
.button-wrapper { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }

/* link-styled buttons (.continue family) → DS pills */
.continue a, .continue-full a, .continue-dark a, .continue-dark-small a, .continue-border a, .continue-border-small a, .caution-border a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); text-decoration: none;
  border-radius: var(--radius-pill); border: var(--border-w-thick) solid transparent; transition: background var(--dur-fast), color var(--dur-fast);
}
.continue a { height: var(--control-h); padding: 0 var(--space-6); color: var(--blue-700); background: var(--white); border-color: var(--blue-300); }
.continue a:hover { background: var(--blue-50); color: var(--blue-800); }
.continue-full a { display: flex; width: 100%; height: var(--control-h); padding: 0 var(--space-6); color: var(--blue-700); background: var(--white); border-color: var(--blue-300); }
.continue-full a:hover { background: var(--blue-50); color: var(--blue-800); }
.continue-dark a { height: var(--control-h); padding: 0 var(--space-6); color: var(--white); background: var(--blue-700); box-shadow: var(--shadow-sm); }
.continue-dark a:hover { background: var(--blue-800); color: var(--white); }
.continue-dark-small a { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-sm); color: var(--white); background: var(--blue-700); margin: 0 var(--space-1) var(--space-1) 0; }
.continue-dark-small a:hover { background: var(--blue-800); color: var(--white); }
.continue-border a { height: var(--control-h); padding: 0 var(--space-5); color: var(--ink-800); background: var(--white); border-color: var(--border-strong); }
.continue-border a:hover { background: var(--ink-50); color: var(--ink-900); }
.continue-border-small a { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-sm); color: var(--ink-800); background: var(--white); border-color: var(--border-strong); margin: var(--space-1) 0; }
.continue-border-small a:hover { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }
.caution-border a { height: var(--control-h); padding: 0 var(--space-5); color: var(--danger-500); background: var(--white); border-color: var(--danger-500); }
.caution-border a:hover { background: var(--danger-100); color: var(--danger-700); }

/* ---- Legacy form inputs (a few specifics) ---- */
label { display: inline; line-height: 1.8; margin: var(--space-1) 0; }
label.inline { display: inline; }
input.inline { display: inline; }
input.full-width, .full-width { width: 100%; }
input.disabled { border: none; background: transparent; margin-bottom: var(--space-1); padding-left: 0; }
input.edit-tool { display: inline-block; width: 280px; background: var(--ink-50); border: var(--border-w-thick) solid var(--border-default); border-radius: var(--radius-md); padding: 13px var(--space-4); margin-bottom: var(--space-5); }
input[type="radio"], input[type="checkbox"] { display: inline; width: auto; accent-color: var(--blue-700); }
.input-wrapper { display: table; margin: 0 auto; }

/* ---- Legacy tables ---- */
table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
tr { transition: background var(--dur-fast); }
tr:hover { background: var(--blue-50); }
tr.header, tr.header:hover { background: transparent; }
th { font: var(--fw-semibold) var(--text-xs)/1.3 var(--font-sans); color: var(--brand); text-align: left; padding: var(--space-2) var(--space-2); border-bottom: var(--border-w-thick) solid var(--border-subtle); }
td { vertical-align: middle; padding: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
td.no-padding { padding: 0; } td.result { padding: var(--space-2); } td.w50pct { width: 50%; }
td.link-button { min-width: 5em; text-align: right; }
td.datetime { width: 30%; } td.num { width: 60px; }
table.recommendation { border: 1px solid var(--border-default); }
table.recommendation th { background: var(--white); }
table.recommendation td { background: var(--ink-50); }
table.recommendation th, table.recommendation td { border: 1px solid var(--border-default); }
table.dashboard { font-family: var(--font-sans); font-size: var(--text-sm); text-align: left; }

/* ---- Legacy chrome (admin/user/public bars, header, footer) ----
   base.html is rebuilt in Stage 2, but keep these mapped for safety. */
div.admin-bar-wrapper { position: sticky; top: 0; min-height: 45px; display: grid; grid-template-columns: 50px auto; background: var(--white); border-bottom: 1px solid var(--border-subtle); align-items: center; z-index: 100; }
div.admin-bar-logo { text-align: center; padding: 0 3px; }
div.admin-bar-logo img { display: block; max-width: 100%; padding: 5px; }
.admin-bar a { color: var(--danger-500); font-weight: var(--fw-semibold); font-size: var(--text-sm); padding: 0.25rem; }
.admin-bar a:hover { color: var(--danger-700); }
.user-bar a, .public-bar a { display: inline-flex; align-items: center; color: var(--brand); font-size: var(--text-sm); font-weight: var(--fw-medium); padding: 0.2rem 0.5rem; margin: 0.15rem 0; border: 1px solid var(--blue-100); border-radius: var(--radius-pill); }
.user-bar a:hover, .public-bar a:hover { background: var(--blue-50); text-decoration: none; }
.flash-message { text-align: center; }
.flash-message p { color: var(--text-body); padding: var(--space-2) var(--space-8); }
.login-wrapper { margin: auto; max-width: 320px; }
.login-wrapper h1, .login-wrapper p { text-align: center; }
.header-flex-wrap { display: flex; flex-wrap: wrap; padding: var(--space-3) var(--page-pad); background: var(--white); border-bottom: 1px solid var(--border-subtle); }
.header-logo-block { flex: 1 1 40%; }
.header-logo-block img { width: 200px; max-width: 60%; }
.header-nav-block { flex: 1 1 60%; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.nav-item { display: inline-block; padding: 0 var(--space-2); }
.nav-item a:hover { color: var(--brand); }
.sponsor-wrapper { padding: var(--space-3) var(--page-pad); background: var(--white); border-top: 1px solid var(--border-subtle); }
img.sponsor1-logo { width: auto; height: 60px; padding: 10px; }
img.sponsor2-logo { width: auto; height: 50px; padding: 10px; }
footer { background: var(--white); border-top: 1px solid var(--border-subtle); padding: var(--space-3) var(--page-pad); }
.footer { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.footer a { display: inline-block; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); margin: var(--space-3); }
.footer a:hover { color: var(--brand); }

/* ---- Legacy layout wrappers ---- */
.main-wrapper { padding: var(--space-6) var(--page-pad); background: transparent; max-width: var(--content-max); margin: 0 auto; }
.content-wrapper { margin: auto; width: 100%; max-width: 800px; padding: 0 0 var(--space-4); }
.home-wrapper, .home-img { padding: 0; }
.home-img img { display: block; min-width: 100%; margin: 0 auto; }
.main-dark-wrapper { padding: var(--space-8) var(--page-pad); background: var(--brand); color: var(--white); border-radius: var(--radius-lg); }
.main-dark-wrapper h1, .main-dark-wrapper h2, .main-dark-wrapper h3 { color: var(--white); }
.main-dark-wrapper-bottom { position: relative; padding: var(--space-6) var(--page-pad); background: var(--brand); color: var(--white); }
.main-dark-wrapper a, .main-dark-wrapper-bottom a { color: var(--white); }
.div-center { width: 90%; }
.screening-info { margin: 0 auto; max-width: 600px; font-size: var(--text-md); line-height: var(--lh-relaxed); }
.main-flex-wrapper { display: flex; gap: var(--space-5); }
.main-flex-left { flex: 1 1 60%; }
.main-flex-right { flex: 1 1 40%; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); padding: var(--space-4) var(--space-5); }
div.split2-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-8); }
div.split2-wrapper-align-bottom { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-8); align-items: end; }
img.main-icon-profile { display: inline-block; vertical-align: middle; height: 1.5rem; width: auto; margin-right: var(--space-2); }

/* ---- Legacy form header ---- */
.form-header-wrapper { position: relative; background: var(--white); padding: 0 var(--page-pad); }
.form-title { position: absolute; top: 0.8em; left: 50%; transform: translate(-50%, -50%); }
.form-intro-wrapper { font-family: var(--font-sans); font-size: var(--text-md); color: var(--white); background: var(--brand); padding: var(--space-3) var(--page-pad); border-radius: var(--radius-md); }

/* ---- Legacy signup ---- */
.signup-wrapper { display: flex; gap: var(--space-4); }
.signup-left { flex: 1 1 50%; }
.signup-right { flex: 1 1 50%; height: fit-content; padding: var(--space-4); background: var(--white); color: var(--text-body); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); }

/* ---- Legacy uploader ---- */
.uploader-wrapper { display: flex; width: 33%; background: var(--white); padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); margin-bottom: var(--space-4); }
.uploader-content { flex: 1 1 65%; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-left: 1px solid var(--border-subtle); }
.uploader-content img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.uploader-content p { font-size: var(--text-sm); color: var(--text-muted); }
.uploader-tool { flex: 1 1 35%; position: relative; }
.uploader-tool-vertical-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
button.uploader { background: var(--white); border: none; cursor: pointer; }
.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--ink-500); }
.arrow-up:hover { border-bottom-color: var(--brand); }
.arrow-down { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--ink-500); }
.arrow-down:hover { border-top-color: var(--brand); }
span.arrow-text { font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Legacy iframe / video ---- */
.iframe-container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; }
.iframe-item { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Legacy result rows (patient search) ---- */
div.result-wrapper { padding-top: var(--space-4); }
div.result-div { display: grid; grid-template-columns: 70px 200px minmax(100px, auto) 120px 120px 120px minmax(200px, auto) 100px; width: 100%; gap: var(--space-4); font-size: var(--text-sm); padding: var(--space-2); border-radius: var(--radius-md); }
div.result-div:hover { background: var(--blue-50); }

/* ---- Legacy recommendation ---- */
div.avatar-wrapper { display: grid; grid-template-columns: 120px auto; align-items: center; gap: var(--space-4); }
img.avatar { display: block; max-width: 100%; height: auto; }
div.recommendation-grid-2 { display: grid; grid-template-columns: 350px auto; gap: var(--space-4); }
div.recommendation-section { background: var(--white); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-4); break-inside: avoid; }
div.recommendation-section-wrapper { display: grid; grid-template-columns: 30px auto; gap: var(--space-4); padding: var(--space-4) 0 var(--space-2); break-inside: avoid; }
div.recommendation-section-number { display: block; font: var(--fw-bold) 2.5rem/1.1 var(--font-mono); color: var(--brand); }
span.illness { display: inline-block; vertical-align: middle; font-size: var(--text-xs); padding: 2px var(--space-2); background: var(--ink-100); border: 1px solid var(--border-default); border-radius: var(--radius-pill); margin: 0 var(--space-1) var(--space-1) 0; }
span.target { display: inline-block; color: var(--brand); font-weight: var(--fw-semibold); margin-right: var(--space-1); }
span.recommended { display: inline-block; background: var(--white); color: var(--danger-500); border: 1px solid var(--danger-500); font-size: 0.6rem; font-weight: var(--fw-bold); vertical-align: middle; padding: 0 5px; border-radius: var(--radius-pill); margin-right: var(--space-1); }
div.indicator-wrapper { display: grid; grid-template-columns: 50px auto; gap: var(--space-2); margin-bottom: var(--space-1); }
img.indicator { display: block; width: 50px; height: auto; }

/* ---- Legacy indicator add (FAB) ---- */
section.indicator-add-wrapper { position: fixed; bottom: 20px; right: 20px; background: var(--blue-700); color: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); z-index: 90; }
section.indicator-add-wrapper a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--white); padding: var(--space-3) var(--space-5); font-weight: var(--fw-semibold); }
section.indicator-add-wrapper a:hover { color: var(--white); text-decoration: none; }

/* ---- Legacy activity cards ---- */
.activity-card-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }
.activity-card { height: fit-content; background: var(--white); padding: 0; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 0; }
.activity-card img { display: block; width: 100%; height: 180px; object-fit: cover; }
.activity-title { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.activity-selected-yes { display: block; color: var(--white); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: center; padding: var(--space-1); background: var(--brand); }
.activity-selected-no { display: block; color: var(--text-body); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: center; padding: var(--space-1); background: var(--ink-100); }
.activity-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; height: 80vh; background: var(--white); padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow-y: auto; z-index: 1000; }
.activity-popup-close { position: sticky; margin-left: auto; top: 0; width: 40px; height: 40px; z-index: 100; }
.activity-record-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.activity-record-item { height: fit-content; font-size: var(--text-sm); background: var(--ink-50); border: 1px solid var(--border-subtle); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); }
.activity-record-title-wrapper { font-size: var(--text-md); line-height: var(--lh-snug); color: var(--white); background: var(--brand); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.activity-record-recommendation { border-bottom: 1px solid var(--border-subtle); padding: var(--space-1) var(--space-1) 0; margin-bottom: var(--space-2); }

/* ---- Legacy learning cards ---- */
.learning-card-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.learning-card { height: fit-content; background: var(--white); padding: 0; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); overflow: hidden; }
.learning-card-inner { padding: 0 var(--space-4) var(--space-4); }
.learning-card img { display: block; width: 100%; height: 200px; object-fit: cover; }
.tag { display: inline-block; font-family: var(--font-sans); background: var(--blue-50); color: var(--blue-800); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--fw-semibold); padding: 2px var(--space-3); margin-right: var(--space-2); }

/* ---- Legacy dashboard ---- */
div.dashboard-tool { background: var(--white); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
div.dashboard-group-2-wrapper { display: grid; grid-template-columns: 50% 50%; font-family: var(--font-sans); }
div.dashboard-group-4-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); font-family: var(--font-sans); }
div.dashboard-group-item { padding-left: var(--space-8); padding-right: var(--space-8); }
span.dashboard-data { display: inline-block; font: var(--fw-bold) 2rem/1.2 var(--font-mono); color: var(--brand); margin-top: var(--space-2); padding-top: var(--space-2); }
span.dashboard-data-black { display: inline-block; font: var(--fw-bold) 2rem/1.2 var(--font-mono); color: var(--ink-900); margin-top: var(--space-2); }
span.dashboard-data-red { display: inline-block; font: var(--fw-bold) 2rem/1.2 var(--font-mono); color: var(--danger-500); margin-top: var(--space-2); }
div.target-chart-wrapper { position: relative; min-height: 240px; }
div.target-chart-canvas { display: block; margin: 0 auto; }
div.indicator-chart-wrapper { position: relative; min-height: 100px; }
div.impact-item { border: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-8); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
div.indicator-content-wrapper { margin-left: var(--space-8); }

/* ---- Legacy micro apps ---- */
div.micro-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); margin: 0 auto var(--space-8); width: 100%; max-width: 600px; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5) var(--space-6); }
.micro-app { display: flex; justify-content: center; align-items: center; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--fw-semibold); text-align: center; color: var(--text-strong); background: var(--white); padding: var(--space-4); border: var(--border-w-thick) solid var(--border-default); box-shadow: var(--shadow-xs); border-radius: var(--radius-lg); transition: all var(--dur-base) var(--ease-out); }
.micro-app:hover { border-color: var(--blue-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.micro-placeholder { display: flex; justify-content: center; align-items: center; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--fw-semibold); text-align: center; color: var(--text-muted); background: var(--ink-50); padding: var(--space-4); border: var(--border-w-thick) dashed var(--border-default); border-radius: var(--radius-lg); }
p.micro-description { margin: 0 auto var(--space-5); width: 100%; max-width: 800px; }
div.micro-screening-split3-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); max-width: 960px; margin: 0 auto; }
div.micro-screening-section { height: fit-content; padding: var(--space-5) var(--space-4) var(--space-4); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
div.blue-bg { background: var(--brand); color: var(--white); padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg); }
div.blue-bg h1, div.blue-bg h2, div.blue-bg h3 { color: var(--white); }
div.gray-bg { background: var(--surface-sunken); padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg); }
div.gray-bg-flat { background: var(--surface-sunken); padding: var(--space-5); border-radius: var(--radius-lg); }
div.micro-eval-split4-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); max-width: 960px; margin: 0 auto; }
/* Micro self-assessment: native control polish (ids are JS-bound — untouched) */
.micro-screening-section h2, .micro-screening-section h3 { color: var(--brand); margin-top: 0; }
.micro-screening-section input[type="number"], .micro-eval-split4-wrapper input[type="number"] { width: 100%; }
.micro-screening-section label, .micro-eval-split4-wrapper label { margin-right: var(--space-4); }
.micro-screening-section input[type="radio"], .micro-eval-split4-wrapper input[type="radio"] { margin-right: var(--space-1); transform: translateY(1px); }
/* Question labels need breathing room from the input above; hints stay tight to their label */
.micro-screening-section p.low-margin, .micro-eval-split4-wrapper p.low-margin { margin-top: var(--space-4); }
.micro-screening-section p.smaller.low-margin, .micro-eval-split4-wrapper p.smaller.low-margin { margin-top: var(--space-1); }
/* Required-field asterisk shown inline before the label (avoids a separate flex line) */
.dm-label--req::before { content: "*"; color: var(--danger-500); font-weight: var(--fw-semibold); margin-inline-end: 4px; }
/* Screening-result action button descriptions */
.action p.smaller { margin-top: var(--space-2); }

/* ---- Legacy popup ---- */
div.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 70vh; width: 70vw; overflow-y: auto; background: var(--white); padding: 0 var(--space-8) var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 1; }

/* ---- Legacy images ---- */
img.content-center { max-width: 800px; height: auto; display: block; margin: var(--space-4) auto; border-radius: var(--radius-md); }
img.logo { width: 15%; }
img.about { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }

/* ---- Legacy literacy ---- */
.literacy-pass { color: var(--success-600); font-weight: var(--fw-semibold); }
.literacy-fail { color: var(--ink-300); }
table.literacy-mini { font-size: var(--text-2xs); border-collapse: collapse; width: auto; }
table.literacy-mini th { font-size: var(--text-2xs); padding: 2px 3px; text-align: center; color: var(--brand); border: 1px solid var(--border-subtle); vertical-align: bottom; min-width: 36px; font-weight: var(--fw-semibold); }
table.literacy-mini td { text-align: center; padding: 3px 2px; border: 1px solid var(--border-subtle); }
table.literacy-profile { font-size: var(--text-sm); border-collapse: collapse; width: 100%; text-align: center; background: var(--white); border-radius: var(--radius-sm); overflow: hidden; }
table.literacy-profile th { font-size: var(--text-xs); padding: var(--space-2); text-align: center; color: var(--white); background: var(--brand); border: 1px solid var(--blue-800); font-weight: var(--fw-semibold); }
table.literacy-profile td { padding: var(--space-2); border: 1px solid var(--border-subtle); color: var(--text-body); }
div.literacy-chart-wrapper { position: relative; min-height: 320px; width: 100%; }

/* ============================================================================
   8b. PAGE-LEVEL HOOKS  (added during page restyle — auth, hero, stats, etc.)
   ========================================================================== */
/* Auth (login / signup / mfa / forget / password) */
.dm-auth { max-width: 460px; margin: var(--space-10) auto; }
.dm-auth--wide { max-width: 820px; }
.dm-auth__head { text-align: center; margin-bottom: var(--space-6); }
.dm-auth__logo { width: 64px; height: 64px; margin: 0 auto var(--space-3); display: block; }
.dm-auth__sub { color: var(--text-muted); margin: 0; }
.dm-auth__links { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-6); flex-wrap: wrap; }
.dm-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); margin-bottom: var(--space-4); }
.dm-back:hover { color: var(--brand); text-decoration: none; }

/* Hero (home / about / intro) */
.dm-hero { position: relative; text-align: center; padding: var(--space-10) var(--page-pad) var(--space-6); }
.dm-hero__logo { width: 84px; height: 84px; margin: 0 auto var(--space-4); display: block; }
.dm-hero h1 { margin: 0 0 var(--space-2); }
.dm-hero__sub { color: var(--text-muted); font-size: var(--text-md); margin: 0; }
.dm-hero--brand { background: var(--brand); color: var(--white); }
.dm-hero--brand h1, .dm-hero--brand .dm-hero__sub { color: var(--white); }
.dm-hero__art { display: block; width: 100%; margin: 0; line-height: 0; }
.dm-hero__art img { display: block; width: 100%; object-fit: cover; }

/* Stat tile (dashboards / profile) */
.dm-stat { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--space-4) var(--space-5); }
.dm-stat__label { font: var(--fw-medium) var(--text-sm)/1.3 var(--font-sans); color: var(--text-muted); margin: 0 0 var(--space-1); }
.dm-stat__num { font: var(--fw-bold) var(--text-2xl)/1 var(--font-mono); color: var(--brand); }
.dm-stat__num--ink { color: var(--ink-900); }
.dm-stat__num--danger { color: var(--danger-500); }
.dm-stat__unit { font: var(--fw-medium) var(--text-sm)/1 var(--font-sans); color: var(--text-muted); margin-inline-start: 4px; }

/* Key-value list (patient / profile detail) */
.dm-dl { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.dm-dl dt, .dm-dt { font-weight: var(--fw-semibold); color: var(--brand); }
.dm-dl dd, .dm-dd { margin: 0; color: var(--text-body); }

/* Empty state */
.dm-empty { text-align: center; color: var(--text-muted); padding: var(--space-10) var(--page-pad); }
.dm-empty__icon { width: 56px; height: 56px; margin: 0 auto var(--space-3); opacity: 0.5; }

/* Data table surface + horizontal scroll on small screens */
.dm-tablewrap { width: 100%; overflow-x: auto; }
.dm-card .dm-tablewrap table { margin: 0; }

/* Pagination row */
.dm-pager { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin: var(--space-3) 0 var(--space-5); }
.dm-pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border-default); color: var(--brand); font-weight: var(--fw-medium); }
.dm-pager a:hover { background: var(--blue-50); text-decoration: none; }
.dm-pager a.is-current { background: var(--brand); color: var(--white); border-color: var(--brand); }

/* ============================================================================
   9. RESPONSIVE + PRINT
   ========================================================================== */
@media screen and (min-width: 1800px) {
  div.recommendation-grid-2 { grid-template-columns: 600px auto; }
}
@media screen and (max-width: 800px) {
  .dm-grid--3, .dm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-flex-wrapper { flex-direction: column; }
  div.result-div { grid-template-columns: auto auto minmax(100px, auto) auto auto auto minmax(200px, auto) auto; }
  div.recommendation-grid-2 { grid-template-columns: 100%; break-inside: auto; }
  .activity-record-wrapper { grid-template-columns: 100%; }
  div.micro-screening-split3-wrapper { grid-template-columns: repeat(2, minmax(0,1fr)); }
  div.micro-eval-split4-wrapper { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media screen and (max-width: 600px) {
  :root { --page-pad: 16px; }
  /* Mobile type scaling — desktop display sizes overflow narrow Thai screens */
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }
  .dm-hero h1 { font-size: var(--text-xl); }
  .dm-pagehead h1 { font-size: var(--text-2xl); }
  .dm-grid--2, .dm-grid--3, .dm-grid--4 { grid-template-columns: 1fr; }
  .dm-appbar { flex-wrap: wrap; }
  .dm-appbar__nav { width: 100%; justify-content: flex-start; }
  div.admin-bar-wrapper { position: relative; }
  .header-logo-block { flex: 1 1 60%; }
  .header-nav-block { flex: 1 1 100%; justify-content: flex-start; padding-top: var(--space-2); }
  .uploader-wrapper { width: 100%; }
  img.logo { width: 30%; }
  .signup-wrapper { flex-direction: column; }
  div.dashboard-group-item { padding-left: var(--space-4); padding-right: var(--space-4); }
  div.indicator-content-wrapper { margin-left: 0; }
  div.split2-wrapper, div.split2-wrapper-align-bottom { grid-template-columns: 100%; gap: var(--space-4); }
  .activity-record-wrapper { grid-template-columns: 100%; }
  div.micro-wrapper { grid-template-columns: repeat(2, minmax(0,1fr)); }
  div.micro-screening-split3-wrapper, div.micro-eval-split4-wrapper { grid-template-columns: 100%; }
}

@media print {
  body { background: var(--white); }
  .no-print { display: none !important; }
  .dm-appbar, .dm-footer, .dm-flash, section.indicator-add-wrapper { display: none !important; }
  .main-wrapper, .dm-container { padding: 0; }
  .dm-card, .dm-reading, .info-box { box-shadow: none; }
  ul { padding-left: 1rem; }
  li, th, td { line-height: 1.2rem; }
  div.recommendation-grid-2 { display: block; }
}