/* Health Hub — shared theme, ported from the Pin Drop / Four Pillars token set.
   Clinical slate + teal, theme-aware, mobile-first. */
:root{
  --bg:#eef2f3; --surface:#fff; --surface-2:#e7edee; --inset:#f4f7f7;
  --ink:#16202a; --ink-soft:#54666f; --ink-faint:#8a9aa1;
  --line:#d7e0e2; --line-soft:#e4ebec;
  --accent:#0c7a7a; --accent-ink:#0a5d5d; --accent-bg:#dcefef;
  --good:#2c8f54; --good-bg:#e2f2e8; --warn:#a76d13; --warn-bg:#f6ecd6;
  --crit:#bc4136; --crit-bg:#f7e3e1;
  --shadow:0 1px 2px rgba(20,40,50,.05),0 6px 20px rgba(20,40,50,.06);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0d1417; --surface:#152025; --surface-2:#1b2930; --inset:#111b1f;
  --ink:#e8eff1; --ink-soft:#93a6ad; --ink-faint:#647a82;
  --line:#26363e; --line-soft:#1f2d34;
  --accent:#37c6bd; --accent-ink:#63d8cf; --accent-bg:#123030;
  --good:#46bd77; --good-bg:#132a1d; --warn:#d59a3c; --warn-bg:#2c2413;
  --crit:#e06a61; --crit-bg:#2d1a18;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.35);
}}
:root[data-theme=dark]{
  --bg:#0d1417; --surface:#152025; --surface-2:#1b2930; --inset:#111b1f;
  --ink:#e8eff1; --ink-soft:#93a6ad; --ink-faint:#647a82;
  --line:#26363e; --line-soft:#1f2d34;
  --accent:#37c6bd; --accent-ink:#63d8cf; --accent-bg:#123030;
  --good:#46bd77; --good-bg:#132a1d; --warn:#d59a3c; --warn-bg:#2c2413;
  --crit:#e06a61; --crit-bg:#2d1a18;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(68px + env(safe-area-inset-bottom)); /* room for bottom tab bar */
}

/* layout — mobile-first single column */
.wrap{max-width:640px; margin:0 auto; padding:22px 16px 28px}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
h1{font-size:clamp(23px,6vw,30px); margin:.25em 0 .1em; letter-spacing:-.02em; font-weight:700; text-wrap:balance}
.lede{color:var(--ink-soft); font-size:14.5px; margin:.2em 0 0}
header.top{padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:20px}

/* cards */
.grid{display:flex; flex-direction:column; gap:13px}
.card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:17px 18px; box-shadow:var(--shadow); color:inherit; text-decoration:none; position:relative; overflow:hidden}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.85}
a.card{transition:transform .08s ease, border-color .12s}
a.card:active{transform:scale(.99)}
a.card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.card h2{margin:0 0 3px; font-size:17px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px}
.card h2 .glyph{font-size:19px; line-height:1}
.card p{margin:0; font-size:13px; color:var(--ink-soft)}
.card .chev{position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:18px}

/* primary action button */
.btn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  font-family:var(--sans); font-size:16px; font-weight:600; color:#fff; background:var(--accent);
  border:0; border-radius:12px; padding:15px; cursor:pointer; text-decoration:none; min-height:52px}
.btn:hover{background:var(--accent-ink)}
.btn:active{transform:scale(.99)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn .glyph{font-size:20px; line-height:1}

.eyelabel{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; margin:26px 0 11px}
.status{font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:14px}
.status b{color:var(--ink-soft)}
.stub{background:var(--inset); border:1px dashed var(--line); border-radius:12px; padding:22px 18px;
  color:var(--ink-faint); font-size:13.5px; text-align:center}

/* bottom tab bar */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex;
  background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:saturate(1.4) blur(8px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px 8px;
  text-decoration:none; color:var(--ink-faint); font-family:var(--mono); font-size:10.5px; letter-spacing:.04em}
.tabbar a .glyph{font-size:20px; line-height:1}
.tabbar a.on{color:var(--accent-ink)}
.tabbar a.on .glyph{filter:none}
@media (prefers-reduced-motion:reduce){a.card,.btn{transition:none}}

/* forms */
form{margin-top:4px}
label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin:15px 0 6px; font-weight:600}
input,select,textarea{width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:13px; min-height:50px}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
textarea{min-height:84px; resize:vertical; line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
input.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.row{display:flex; gap:10px}
.row > div{flex:1}
#msg:not(:empty){margin-top:12px}
.err{background:var(--crit-bg); border:1px solid color-mix(in srgb,var(--crit) 32%,transparent);
  color:var(--ink); border-radius:10px; padding:10px 12px; font-size:13.5px; margin-bottom:8px}
.err b{color:var(--crit)}
.ok-toast{background:var(--good-bg); border:1px solid color-mix(in srgb,var(--good) 32%,transparent);
  color:var(--ink); border-radius:10px; padding:10px 12px; font-size:13.5px}
.ok-toast b{color:var(--good)}

/* timeline */
.timeline{margin-top:4px}
.qitem{display:flex; gap:11px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line-soft)}
.qitem:last-child{border-bottom:none}
.qtime{font-family:var(--mono); font-size:12px; color:var(--ink-soft); min-width:42px; font-variant-numeric:tabular-nums}
.qtag{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  padding:3px 7px; border-radius:5px; background:var(--surface-2); color:var(--accent-ink); white-space:nowrap}
.qbody{flex:1; font-size:13.5px; line-height:1.4}
.qbody .v{font-family:var(--mono); font-weight:700; color:var(--ink)}
.qbody .n{color:var(--ink-soft)}
.muted{color:var(--ink-faint); font-size:13px; padding:14px 0}

/* CBT-I content */
.card ul{margin:9px 0 0; padding-left:18px}
.card ul li{margin:5px 0; font-size:13.5px; color:var(--ink-soft)}
.card ul li b{color:var(--ink); font-weight:650}
.pill-now,.pill-later{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:5px; margin-left:8px;
  vertical-align:middle; background:var(--accent-bg); color:var(--accent-ink)}
.pill-later{background:var(--warn-bg); color:var(--warn)}
.callout{background:var(--inset); border:1px solid var(--line-soft); border-left:3px solid var(--accent);
  border-radius:10px; padding:12px 14px; font-size:13px; color:var(--ink-soft); margin-top:12px}
.callout b{color:var(--ink)}
.callout.warn{border-left-color:var(--warn)}
a.card.ext{padding-right:42px}
a.card.ext .glyph{font-size:18px}