/* MyHealthDash. Ported from the <style> of wireframe.html, round 5 of the
   design package (15 Sept 2026, VANA-62); the :root tokens are brand.md §3.
   The wireframe's chrome — the .panel frames that stand in for a phone and
   the .tag panel numbers — is the only thing left out; every class a screen
   uses is here under the wireframe's name, so a screen can be built by
   reading the wireframe and nothing else.

   Three additions, each named where it lands: .screen carries the frame's
   job (a 430px column, full height, 1180px on the desktop Brief); .card .rule,
   .desk2 .two and .t-3 lift an inline style the wireframe repeats; .fadein is
   the prototype's 120ms answer to a tap (brand.md §8). Controls are styled so
   an <a> and a <button> render alike, because a tab and a tile are links in
   the app and buttons in the wireframe. */

:root{
  --canvas:#0A1220; --surface:#111B2C; --surface-2:#182438; --line:#22304A;
  --text:#EEF2F8; --text-2:#A9B4C6; --text-3:#6F7B90;
  --accent:#8B97FF; --accent-deep:#4655D9;
  --body:#7FB3A2; --mind:#A9B0EA; --spirit:#D9B77C;
  --stale:#D7A650; --blush:#E0897E;
  --oura:#6F8F7C; --chatgpt:#A79BAD; --claude:#91A9CC; --openpet:#E8DFD1;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
html,body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;text-align:left;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
button:active{opacity:.75}
h1,h2,.lead{text-wrap:balance}
p{margin:0}

/* the screen: one per page. The wireframe wraps each in a .panel that plays
   the phone; here the page is the phone, so the column width and the full
   height (which is what keeps the tab bar at the bottom of a short page)
   sit on .screen itself. The desktop Brief (panel 16) is the wide one. */
.screen{min-height:100dvh;max-width:430px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding:calc(56px + env(safe-area-inset-top)) 20px 28px}
.grow{flex:1}

/* type */
h1{font-size:40px;line-height:1.1;font-weight:300;letter-spacing:-.015em;margin:0}
h2{font-size:28px;line-height:1.2;font-weight:400;margin:0}
h3{font-size:17px;line-height:1.3;font-weight:600;margin:0}
.lead{font-size:22px;line-height:1.3;font-weight:300}
.sub{color:var(--text-2);font-size:15px}
.meta{color:var(--text-2);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}
.small{color:var(--text-3);font-size:13px}
.date{color:var(--text-2);font-size:15px}
.label{font-size:13px;color:var(--text-3)}
a{color:var(--accent)}

/* wordmark */
.wordmark{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:17px;letter-spacing:.02em;color:var(--text);text-decoration:none}
.wordmark i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.wordmark.big{font-size:30px}
.wordmark.big i{width:12px;height:12px}
.wordmark.stale i{background:var(--stale)}
.wordmark.off i{background:transparent;border:1.5px solid var(--text-3)}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.surface{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:2px 18px}
.sheet{overscroll-behavior:contain;background:var(--surface);border:1px solid var(--line);border-radius:20px 20px 0 0;border-bottom:0;padding:22px 20px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;margin:0 -20px}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:-8px auto 4px}
.divided > * + *{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;gap:4px}
.left{display:flex;align-items:center;gap:12px}
.item{padding:14px 0;display:flex;flex-direction:column;gap:6px}
.item + .item{border-top:1px solid var(--line)}
.item.state{background:var(--surface-2);margin:0 -18px;padding:12px 18px;border-top:0}

/* controls */
.btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 20px;border-radius:12px;background:var(--accent-deep);color:#fff;font-weight:600;font-size:17px;width:100%;text-align:center;text-decoration:none}
.btn.quiet{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.btn.danger{background:var(--blush);color:#1A0C0A}
.btn.ghost{background:none;color:var(--text-2);min-height:48px;font-weight:500}
.btns{display:flex;flex-direction:column;gap:8px}
.inline{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;margin:0 -4px;color:var(--text);font-weight:600;font-size:15px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.inline.warn{color:var(--blush)}
.inline.link{color:var(--accent);text-decoration-color:var(--line)}
.wrong{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 12px;margin:0 0 0 auto;color:var(--text-3);font-size:13px;flex:none;font-weight:500;white-space:nowrap;border:1px solid var(--line);border-radius:10px;background:transparent}
/* the control is 40px tall by design; the ::after widens its hit area to the
   44px the brand requires without moving anything on screen. */
.wrong::after{content:"";position:absolute;inset:-2px}
@media (prefers-reduced-motion:no-preference){.wrong{transition:color .12s ease,background-color .12s ease,border-color .12s ease}}
.wrong:hover,.wrong:focus-visible,.wrong.hover{color:var(--blush);border-color:var(--blush)}
.wrong:active{color:#1A0C0A;border-color:var(--blush);background:var(--blush);opacity:1}
.src{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.src .meta{flex:1 1 150px;min-width:0}
.field{min-height:52px;display:flex;align-items:center;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text-3);font-size:17px}
.check{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--text-3);flex:none;display:inline-block}
.check{position:relative}
/* The checkbox itself stays the control — it is what submits, what a keyboard
   reaches and what assistive technology reads — and the deck's square is
   drawn beside it from its own :checked state. No script, and nothing to keep
   in sync. */
.check-input{position:absolute;width:22px;height:22px;margin:0;opacity:0}
.check-input:checked+.check{border-color:var(--accent);background:var(--accent)}
.check-input:checked+.check::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check-input:focus-visible+.check{outline:2px solid var(--accent);outline-offset:2px}
.check.on{border-color:var(--accent);background:var(--accent)}.check.on::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* chips: state is a word */
.chip{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-2);background:var(--surface-2)}
.chip.live{color:var(--accent);background:#1A2044}
.chip.stale{color:var(--stale);background:#2B2415}
.chip.blush{color:var(--blush);background:#2E1C1A}
.chip.dim{color:var(--text-3)}
.chip.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* marks */
.mark{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center}
.mark svg{width:26px;height:26px;display:block;overflow:visible}
.mark.sm,.mark.sm svg{width:22px;height:22px}
.mark.lg,.mark.lg svg{width:56px;height:56px}
.mark .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);display:block}
.dmark{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

/* the Brief */
.head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.strip{display:flex;flex-direction:column;gap:6px}
.strip .line{position:relative;height:36px;border-bottom:1px solid var(--line)}
.strip .line::before,.strip .line::after{content:"";position:absolute;bottom:-1px;width:1px;height:6px;background:var(--line)}
.strip .line::before{left:0}.strip .line::after{right:0}
.strip .m{position:absolute;bottom:6px;width:24px;height:24px;transform:translateX(-50%)}
.strip .m svg{width:24px;height:24px;display:block;overflow:visible}
.strip .m.hollow svg path{fill:none;stroke:var(--text-3);stroke-width:1.5}
.strip .ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.dom{display:flex;flex-direction:column;gap:0;padding:14px 18px 4px}
.dom .dh{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.dom .dh h3{font-weight:500;font-size:17px}
.dom .dh .meta{margin-left:auto}
.dom.dom-body .dh{color:var(--body)} .dom.dom-mind .dh{color:var(--mind)} .dom.dom-spirit .dh{color:var(--spirit)}
.dom .dh h3{color:var(--text)}
.num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.num b{font-size:40px;line-height:1;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num .unit{font-size:15px;color:var(--text-2)}
.num .cmp{font-size:15px;color:var(--text-2);flex-basis:100%}
.num.dim b{color:var(--text-3)}
.sent{display:flex;flex-direction:column;gap:6px}
.sent .n{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sent.disputed p.line{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--blush)}

/* sources */
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.srow + .srow{border-top:1px solid var(--line)}
.srow .name{font-weight:600;font-size:17px}
.srow .left{flex:1;min-width:0}
.srow .meta{font-size:12px}

/* message */
.msg{background:var(--surface);border:1px solid var(--line);border-radius:14px;border-top-left-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.msg .from{font-size:13px;color:var(--accent);font-weight:600}
.msg .meta{font-size:12px}

/* tab bar: the last child of .screen, and it eats the screen's bottom
   padding so it sits on the edge rather than 28px above it. */
.tabs{position:sticky;bottom:0;margin:12px -20px -28px;padding:8px 16px calc(10px + env(safe-area-inset-bottom));background:var(--canvas);border-top:1px solid var(--line);display:flex;justify-content:space-around}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:72px;min-height:48px;justify-content:center;font-size:11px;font-weight:600;color:var(--text-3);text-decoration:none}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--text)}

/* the Brief, top-down */
.tiles{display:flex;flex-direction:column;gap:8px}
.tile{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;color:var(--text);text-decoration:none}
.tile .tl{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .tr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:none}
.tile .d{font-size:13px;font-weight:600}
.tile.dom-body .d{color:var(--body)} .tile.dom-mind .d{color:var(--mind)} .tile.dom-spirit .d{color:var(--spirit)}
.tile .n{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tile .n b{font-size:32px;line-height:1.1;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile .n .u{font-size:15px;color:var(--text-2)}
.tile .s{font-size:13px;color:var(--text-3)}
.tile .c{font-size:17px;color:var(--text);font-variant-numeric:tabular-nums}
.tile .c.t-stale{color:var(--stale)} .tile .c.t-blush{color:var(--blush)} .tile .c.t-dim{color:var(--text-3)}
.tile .w{font-size:12px;color:var(--text-3)}
.tile .tr{max-width:46%}
.tile .c.t-dim{font-size:15px}
.tile.empty{border-style:dashed}
.tile.empty .n b{font-size:19px;font-weight:400;color:var(--text-3);line-height:1.3}
.tile.off{border-style:dashed}
.rule{font-size:13px;color:var(--text-3);margin-top:-8px}
.card .rule{margin-top:0}
.card h3,.surface h3{font-weight:500}
.today{gap:8px}
.big{font-size:22px;line-height:1.3;font-weight:400;letter-spacing:-.01em}
.surface .head3{padding:14px 0 4px}
.period{padding:12px 0;display:flex;flex-direction:column;gap:6px}
.period + .period{border-top:1px solid var(--line)}
.period .d{font-size:13px;font-weight:600}
.period.dom-body .d{color:var(--body)} .period.dom-mind .d{color:var(--mind)} .period.dom-spirit .d{color:var(--spirit)}
.t-stale{color:var(--stale)} .t-blush{color:var(--blush)} .t-dim{color:var(--text-3)} .t-2{color:var(--text-2)} .t-3{color:var(--text-3)}
.dsec{display:flex;flex-direction:column;gap:10px;scroll-margin-top:12px}
.dsec .dh{display:flex;align-items:center;gap:10px;padding:8px 0 0}
.dsec .dh h2{font-size:22px;font-weight:400;color:var(--text)}
.dsec .dh .meta{margin-left:auto}
.dsec.dom-body .dh{color:var(--body)} .dsec.dom-mind .dh{color:var(--mind)} .dsec.dom-spirit .dh{color:var(--spirit)}
.ssub{display:flex;align-items:center;gap:10px;padding:14px 0 0}
.ssub .name{font-weight:600;font-size:15px}
.ssub .meta{margin-left:auto;font-size:12px}
.surface .ssub + .item{border-top:0;padding-top:8px}
.surface .ssub + .item.state{margin-top:10px}
/* .desk2 is the Brief's body on every width: a column on the phone, and at
   960px a three-column grid where .span rows run full width and the three
   .dsec sections fall one per column. .two is the week/month pair, which
   panel 16 sets with an inline grid. */
.desk2{display:flex;flex-direction:column;gap:16px}
.desk2 .two{display:flex;flex-direction:column;gap:16px}
@media (min-width:960px){
  .screen.wide,.screen:has(.desk2){max-width:1180px}
  .desk2{display:grid;grid-template-columns:repeat(3,1fr)}
  .desk2 .span{grid-column:1 / -1}
  .desk2 .tiles{flex-direction:row}
  .desk2 .tile{flex:1}
  .desk2 .two{display:grid;grid-template-columns:1fr 1fr}
}

/* history and day navigation */
.dateline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-8px}
.dateline .inline{margin:0}
.days{display:flex;flex-direction:row-reverse;gap:6px;overflow-x:auto;padding:2px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:44px;min-height:52px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-variant-numeric:tabular-nums;color:var(--text);text-decoration:none}
.day small{font-size:11px;color:var(--text-3)}
.day b{font-size:15px;font-weight:500}
.day.hollow{border-style:dashed;background:transparent;color:var(--text-3)}
.day.on{border-color:var(--accent);background:#1A2044;color:var(--accent)}
.day.on small{color:var(--accent)}
.windows{display:flex;gap:8px}
/* the wireframe draws these 36px tall; 44px is the floor for anything tappable, and each one is a fresh read. */
.windows .chip{min-height:44px;padding:0 14px;text-decoration:none}
.windows .chip.on{color:var(--accent);background:#1A2044}
.chart{width:100%;height:auto;display:block;font-family:var(--sans)}
.chart text{font-variant-numeric:tabular-nums}
.sel{display:flex;flex-direction:column;gap:4px;padding:10px 0 4px;border-top:1px solid var(--line)}
.sel .v{font-size:17px}
.item.tap{cursor:pointer}

/* desktop brief, the earlier grid the history panels still use */
.desk{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:960px){
  .desk{grid-template-columns:repeat(3,1fr)}
  .desk .span{grid-column:1 / -1}
}

/* motion: none, except that what answers a tap may fade in over 120ms
   (brand.md §8). The prototype's class, kept under its name. */
.fadein{animation:fi .12s ease-out}
@keyframes fi{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fadein{animation:none}}