/* IBD Registry — palette A (navy / green / gold), light + dark.
   Colour meaning, kept strict so the screen reads at a glance:
   navy  = structure and anything you tap or select
   green = go (save buttons), current therapy, good results
   gold  = needs attention (overdue, abnormal, to check) */

:root {
  --bg: #F6F7FA; --surface: #FFFFFF; --ink: #15181E; --muted: #4B5160; --line: #C9CFDA;
  --hdr: #13284C; --hdr-ink: #FFFFFF; --hdr-muted: #C3CEE4;
  --sel: #13284C; --sel-ink: #FFFFFF;
  --go: #22C55E; --go-ink: #0B2A17; --go-text: #15803D;
  --warm: #F5A524; --warm-ink: #13284C; --warm-text: #9A5B00;
  --card: rgba(255,255,255,0.85); --link: #13284C; --dash: #4D6BAF;
  --t-clin: #FCF2DE; --t-ther: #E2F6E9; --t-endo: #E7EDF7; --t-img: #EAF3F8; --t-lab: #F4EEE6; --t-util: #EEF0F4;
  --rem-bg: #D3F5DF; --rem-fg: #0F5132; --mild-bg: #FCEFC7; --mild-fg: #6B4A00;
  --mod-bg: #FBD9B5; --mod-fg: #7A3A00; --sev-bg: #F8CFCF; --sev-fg: #7F1D1D;
  --s0: #FFFFFF; --s0-ink: #4B5160; --s1: #D9DFF0; --s1-ink: #15181E; --s2: #93A6D6; --s2-ink: #15181E; --s3: #13284C; --s3-ink: #FFFFFF;
  --thumb: #C9D2E6; --thumb-ink: #1C2A48;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1420; --surface: #172033; --ink: #E8ECF4; --muted: #A6B0C3; --line: #33415C;
    --hdr-muted: #B4C2DE; --sel: #4A6FBF; --go-text: #4ADE80; --warm-text: #F7BE5E;
    --card: rgba(255,255,255,0.06); --link: #9FB7EC; --dash: #7F9BD8;
    --t-clin: #262113; --t-ther: #12261B; --t-endo: #17213A; --t-img: #132432; --t-lab: #271F18; --t-util: #1A2131;
    --rem-bg: #134A2C; --rem-fg: #BDF2D0; --mild-bg: #4A3B0E; --mild-fg: #F8E29A;
    --mod-bg: #5A2F12; --mod-fg: #FBC99E; --sev-bg: #5C1F22; --sev-fg: #F8BDBD;
    --s0: #172033; --s0-ink: #A6B0C3; --s1: #2A3A5E; --s1-ink: #E8ECF4; --s2: #4D6BAF; --s2-ink: #FFFFFF; --s3: #A9C0F0; --s3-ink: #0E1420;
    --thumb: #2A3550; --thumb-ink: #D3DCEE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1420; --surface: #172033; --ink: #E8ECF4; --muted: #A6B0C3; --line: #33415C;
  --hdr-muted: #B4C2DE; --sel: #4A6FBF; --go-text: #4ADE80; --warm-text: #F7BE5E;
  --card: rgba(255,255,255,0.06); --link: #9FB7EC; --dash: #7F9BD8;
  --t-clin: #262113; --t-ther: #12261B; --t-endo: #17213A; --t-img: #132432; --t-lab: #271F18; --t-util: #1A2131;
  --rem-bg: #134A2C; --rem-fg: #BDF2D0; --mild-bg: #4A3B0E; --mild-fg: #F8E29A;
  --mod-bg: #5A2F12; --mod-fg: #FBC99E; --sev-bg: #5C1F22; --sev-fg: #F8BDBD;
  --s0: #172033; --s0-ink: #A6B0C3; --s1: #2A3A5E; --s1-ink: #E8ECF4; --s2: #4D6BAF; --s2-ink: #FFFFFF; --s3: #A9C0F0; --s3-ink: #0E1420;
  --thumb: #2A3550; --thumb-ink: #D3DCEE;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}
#app { max-width: 720px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
a { color: var(--link); }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--dash); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Header */
.hdr { background: var(--hdr); color: var(--hdr-ink); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hdr h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.hdr .sub { font-size: 13px; color: var(--hdr-muted); }
.hdr a, .hdr .linkbtn { color: var(--hdr-muted); text-decoration: none; font-size: 14px; }
.hdr .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.htag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.linkbtn { background: none; border: 0; padding: 8px 0; font: inherit; cursor: pointer; }

/* Sections */
.sec { padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.sec h2 { font-size: 18px; font-weight: 700; }
.t-clin { background: var(--t-clin); } .t-ther { background: var(--t-ther); } .t-endo { background: var(--t-endo); }
.t-img { background: var(--t-img); } .t-lab { background: var(--t-lab); } .t-util { background: var(--t-util); }
.t-plain { background: var(--surface); }
.meta { font-size: 13px; color: var(--muted); }
.entry { background: var(--card); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.entry.current { border: 2px solid var(--go); }
.pos { color: var(--warm-text); font-weight: 600; }
.empty { color: var(--muted); font-size: 14px; padding: 4px 0; }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.b-rem { background: var(--rem-bg); color: var(--rem-fg); }
.b-mild { background: var(--mild-bg); color: var(--mild-fg); }
.b-mod { background: var(--mod-bg); color: var(--mod-fg); }
.b-sev { background: var(--sev-bg); color: var(--sev-fg); }
.b-none { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.b-cur, .b-go { background: var(--go); color: var(--go-ink); }
.b-warm { background: var(--warm); color: var(--warm-ink); }
.b-light { background: #fff; color: #13284C; }

/* Form controls */
.q { display: flex; flex-direction: column; gap: 6px; }
.ql, .field > label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 4px; }
.inp { min-height: 46px; border-radius: 10px; border: 1px solid var(--line); padding: 0 12px; font: inherit; font-size: 16px;
  background: var(--surface); color: var(--ink); width: 100%; }
textarea.inp { min-height: 72px; padding: 10px 12px; resize: vertical; }
select.inp { appearance: auto; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 15px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.chip[aria-pressed="true"] { background: var(--sel); color: var(--sel-ink); border-color: var(--sel); font-weight: 600; }
.chip.sq { min-width: 44px; padding: 0; }
.yn { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border-radius: 10px; padding: 6px 6px 6px 12px; }
.yn .chips { flex-wrap: nowrap; gap: 6px; }

.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; }
.stepper output { font-size: 22px; font-weight: 700; min-width: 28px; text-align: center; }

/* Buttons */
.btn { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 52px; border-radius: 10px; border: 0;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; padding: 0 16px; }
.btn-go { background: var(--go); color: var(--go-ink); }
.btn-sel { background: var(--sel); color: var(--sel-ink); }
.btn-ghost { background: transparent; color: var(--link); border: 2px dashed var(--dash); font-weight: 600; min-height: 48px; }
.btn-plain { background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-weight: 600; min-height: 44px; font-size: 15px; }
.btn[disabled] { background: var(--line); color: var(--muted); cursor: not-allowed; }
.btn-sm { min-height: 40px; font-size: 14px; padding: 0 12px; }
.footer { padding: 20px 16px 28px; background: var(--surface); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.hdr .btn-go { min-height: 44px; font-size: 15px; padding: 0 16px; color: var(--go-ink); }

/* Confirmation strip */
.confirm { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 2px solid var(--go); border-radius: 10px; padding: 12px 14px; }
.confirm svg { flex-shrink: 0; margin-top: 1px; color: var(--go-text); }

/* SES-CD grid */
.ses { width: 100%; border-collapse: separate; border-spacing: 4px; }
.ses th { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; }
.ses th:first-child { text-align: left; }
.ses td:first-child { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ses button { width: 100%; min-width: 44px; height: 44px; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); }
.ses button[data-v="0"] { background: var(--s0); color: var(--s0-ink); }
.ses button[data-v="1"] { background: var(--s1); color: var(--s1-ink); border-color: var(--s1); }
.ses button[data-v="2"] { background: var(--s2); color: var(--s2-ink); border-color: var(--s2); }
.ses button[data-v="3"] { background: var(--s3); color: var(--s3-ink); border-color: var(--s3); }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.photo { display: flex; flex-direction: column; gap: 4px; }
.photo img, .photo .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--thumb); color: var(--thumb-ink);
  display: flex; align-items: center; justify-content: center; font-size: 12px; }
.photo select { min-height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.thumbs a { display: block; width: 72px; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.thumbs span { font-size: 11px; color: var(--muted); }

/* Lab table */
.lt-wrap { overflow-x: auto; }
.lt { width: 100%; border-collapse: collapse; font-size: 14px; }
.lt th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; padding: 6px 4px; white-space: nowrap; }
.lt th:first-child, .lt td:first-child { text-align: left; white-space: nowrap; }
.lt td { padding: 7px 4px; text-align: right; border-top: 1px solid var(--line); }
.hi { color: var(--warm-text); font-weight: 700; }

/* Lab photo review */
.lrow { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 8px 8px 12px; background: var(--card); border: 2px solid transparent; }
.lrow.check { border-color: var(--warm); }
.lrow input { width: 84px; min-height: 42px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 700; text-align: right; padding: 0 8px; }
.lrow .unit { width: 58px; font-size: 12px; color: var(--muted); }

/* Home list */
.plist { display: flex; flex-direction: column; }
.pitem { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--surface); }
.pitem:hover { background: var(--bg); }
.pitem .nm { font-weight: 700; font-size: 16px; }

/* Chooser */
.opt { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); min-height: 76px; }
.opt .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--t-endo); color: var(--link); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.opt .ot { display: block; font-weight: 700; font-size: 16px; }
.opt .od { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.opt .chev { margin-left: auto; color: var(--muted); flex-shrink: 0; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 12px 16px; border-radius: 10px; font-weight: 600; z-index: 10; max-width: calc(100% - 32px); }
.toast.err { background: var(--sev-bg); color: var(--sev-fg); border: 1px solid var(--sev-fg); }
.spin { padding: 40px 16px; text-align: center; color: var(--muted); }

@media (min-width: 720px) {
  #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }