/* Shared shell for the three tools: classifier, screening form, learn & test.
   One light theme, deliberately — there is no dark palette and no theme
   toggle, so every surface below can be tuned for a single background
   instead of hedging across two. */
:root {
  /* Neutrals run cool and close together; the page is mostly white with
     hairline separation rather than boxes inside boxes. */
  --bg: #f7f8fa;
  --panel: #ffffff;
  --sunk: #f2f4f7;
  --line: #e5e8ee;
  --line-strong: #d3d8e2;
  --ink: #131a26;
  --ink-soft: #3d4757;
  --muted: #6b7585;

  --accent: #2f6feb;
  --accent-ink: #ffffff;
  --accent-wash: #eef3fe;
  --good: #17805a;
  --warn: #a86a00;
  --bad: #c0392f;

  /* Two shadow steps only: resting cards and things that float above them. */
  --shadow: 0 1px 2px rgba(19, 26, 38, .05);
  --shadow-lift: 0 1px 2px rgba(19, 26, 38, .05), 0 12px 28px rgba(19, 26, 38, .09);
  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
/* One place sets the reading size: every rem below scales from here, so the
   whole toolkit gets larger text by moving this number. */
html { font-size: 118.75%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 1rem/1.6 ui-sans-serif, -apple-system, "Segoe UI", Roboto,
        "Noto Sans Thai", "IBM Plex Sans Thai", Thonburi, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: hidden on the body turns every position:sticky in the
     page into a no-op. Nothing should ever scroll sideways except the two
     places below that opt in. */
  overflow-x: clip;
}
/* Thai script sits taller and needs more leading than Latin. */
html[lang=th] body { line-height: 1.8; }
html[lang=th] h1, html[lang=th] h2 { line-height: 1.45; letter-spacing: 0; }

.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.4rem; }
.wrap.narrow { max-width: 52rem; }

h1, h2, h3 { letter-spacing: -.021em; color: var(--ink); }

/* Thai is written without spaces between words, so when the line-breaker cannot
   find a break inside a long run it lets the run leave the box — on a phone that
   is a heading sliced off by the edge of the screen. Break inside the run
   instead; break-word only does so when the line genuinely cannot fit. */
h1, h2, h3, p, li, dd, dt, td, th, label, summary, .pill, .note, .brand {
  overflow-wrap: break-word;
}

/* ---------- navbar ---------- */
/* Always the three tools and the language button. Nothing conditional, so the
   bar is the same shape on every page. */
nav.top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
nav.top .wrap { display: flex; align-items: center; gap: 1.2rem; height: 3.75rem; min-width: 0; }
.brand {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 640; letter-spacing: -.015em; font-size: .95rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  min-width: 0; flex: 0 1 auto;
}
/* The Thai brand is long; let it ellipsis rather than shove the links off-screen. */
.brand > span:not(.mark) { overflow: hidden; text-overflow: ellipsis; }
.brand .mark {
  width: 1.5rem; height: 1.5rem; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), #17b0a0);
  color: #fff; font-size: 0.8rem; flex: none;
}
/* The three Thai tool names plus the language button do not fit a phone at any
   sane font size, so the strip scrolls sideways on its own instead of widening
   the page. flex: none on the children keeps them from being squashed. */
nav.top .links {
  display: flex; gap: .15rem; margin-left: auto; align-items: center;
  min-width: 0; flex: 0 1 auto; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
nav.top .links::-webkit-scrollbar { display: none; }
nav.top .links > * { flex: none; }
nav.top .links a {
  color: var(--muted); text-decoration: none; font-size: .875rem; font-weight: 500;
  padding: .4rem .7rem; border-radius: 8px; white-space: nowrap;
  transition: color .12s, background .12s;
}
nav.top .links a:hover { color: var(--ink); background: var(--sunk); }
nav.top .links a.on { color: var(--ink); font-weight: 600; background: var(--sunk); }
#lang {
  margin-left: .5rem; flex: none; padding: 0 .6rem; height: 1.85rem;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--muted);
  border-radius: 8px; cursor: pointer; font: 640 0.8rem/1 inherit; letter-spacing: .03em;
  display: inline-flex; align-items: center;
}
#lang:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) {
  nav.top .wrap { gap: .6rem; }
  .brand span:not(.mark) { display: none; }
  nav.top .links a { padding: .4rem .5rem; font-size: .82rem; }
}

/* ---------- phones ----------
   The desktop base of 118.75% is a comfortable reading size in a 70rem column
   and far too big in a 390px one: every rem-sized min-width below it (grid
   tracks, option pills, form fields) inflates past the viewport and the page
   scrolls sideways. Stepping the root size down fixes all of them at once,
   which is the whole point of sizing from one number. */
@media (max-width: 720px) {
  html { font-size: 106.25%; }            /* 17px */
  .wrap { padding: 0 1rem; }
  header.hero { padding: 1.7rem 0 1.1rem; }
  .panel { padding: 1rem 1.05rem; }
  footer.site { margin-top: 2rem; padding: 1.2rem 0 2rem; }
}
@media (max-width: 400px) {
  html { font-size: 100%; }               /* 16px */
  .wrap { padding: 0 .85rem; }
}

/* Touch targets: a pointer that is a fingertip needs a bigger box than a mouse
   cursor, and iOS zooms any input whose text is under 16px on focus. */
@media (pointer: coarse) {
  button, .btn { padding: .58rem 1rem; min-height: 2.6rem; }
  input[type=text], input[type=number], input[type=date], input[type=tel], textarea, select {
    font-size: max(1rem, 16px); padding: .6rem .7rem;
  }
}

/* ---------- page-local section nav ---------- */
/* Jumping around inside a page lives in the page, not in the top bar. */
.sectionnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; }
.sectionnav a {
  font-size: .82rem; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 99px;
  background: var(--panel); transition: color .12s, border-color .12s;
}
.sectionnav a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- headings & surfaces ---------- */
header.hero { padding: 2.6rem 0 1.5rem; }
header.hero h1 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); margin: 0 0 .5rem; }
header.hero p { color: var(--muted); margin: 0; max-width: 46rem; }
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 0.8rem; font-weight: 640; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-wash);
  padding: .28rem .65rem; border-radius: 99px; margin-bottom: .8rem;
}
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem 1.35rem;
}
.panel > h3 {
  margin: 0 0 .9rem; font-size: 0.8rem; font-weight: 640;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.note { color: var(--muted); font-size: .86rem; }

/* ---------- controls ---------- */
button, .btn {
  font: inherit; font-size: .875rem; font-weight: 550;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  padding: .5rem .9rem; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
}
button:hover:not(:disabled), .btn:hover { border-color: var(--accent); color: var(--accent); }
button.primary, .btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(47, 111, 235, .3);
}
button.primary:hover:not(:disabled), .btn.primary:hover {
  background: #245ccb; border-color: #245ccb; color: var(--accent-ink);
}
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input[type=text], input[type=number], input[type=date], input[type=tel], textarea, select {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font: inherit; background: var(--panel); color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
textarea { min-height: 3.4rem; resize: vertical; }

/* Shown on /form and /learn when the shell is in English but the clinical
   body has no English source text. Honest label beats a half-translated form. */
.thai-only {
  display: none; margin: 0 0 .9rem; padding: .55rem .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--sunk);
  color: var(--muted); font-size: .84rem;
}
html[lang=en] .thai-only { display: block; }

footer.site {
  border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.6rem 0 2.6rem;
  color: var(--muted); font-size: .84rem;
}
footer.site .disclaimer { display: flex; gap: .5rem; align-items: flex-start; max-width: 52rem; }
footer.site b { color: var(--ink); }

@media print { nav.top, footer.site, .noprint { display: none !important; } }