/* ============================================================
   Goyo.Health: entry (v6)
   For people who are not comfortable with computers and are
   having a bad week. Big type, big buttons, plain words, one
   thing per screen, a human to call.
   ============================================================ */

:root{
  color-scheme:light;
  --bg:#FFFFFF; --bg2:#F5F6F4;
  --line:#D9DAD5; --line2:#EBECE8;
  --ink:#141513; --ink2:#4F524D;
  --acc:#35506B; --acc-h:#243A50; --acc-bg:#E9EFF5;
  --card:#FFFFFF; --ring:rgba(53,80,107,.30);
  --ok:#1B6B4A; --ok-bg:#E6F3EC;
  --gold:#8A6A1E;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:10px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17181B; --bg2:#1F2125; --line:#35383E; --line2:#2A2D32;
  --ink:#ECEDEE; --ink2:#B4B7BC;
  --acc:#9BB8D6; --acc-h:#B6CDE6; --acc-bg:#1F2A36;
  --card:#1F2125; --ring:rgba(155,184,214,.34);
  --ok:#66C299; --ok-bg:#17281F; --gold:#D6B76C;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--goyo-header-h,0px) + 8px)}
body{margin:0; background:var(--bg); color:var(--ink);
  font:19px/1.55 var(--sans); -webkit-font-smoothing:antialiased}
a{color:var(--acc); text-decoration:underline; text-underline-offset:3px}
a:hover{color:var(--acc-h)}
:focus-visible{outline:3px solid var(--acc); outline-offset:3px}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.015em; text-wrap:pretty}
h1{font-size:clamp(34px,5vw,46px); line-height:1.15}
h2{font-size:28px; line-height:1.25}
h3{font-size:22px; line-height:1.3}
p{margin:0; text-wrap:pretty}

/* top: the name and one help link. that's all. */
.top{border-bottom:1px solid var(--line)}
.top .in{max-width:880px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:16px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.logo svg{width:34px; height:34px; display:block}
.logo b{font-size:20px; font-weight:600}
.logo b i{font-style:normal; color:var(--acc)}
.top .help{margin-left:auto; display:inline-flex; align-items:center; min-height:48px; padding:0 18px;
  border:2px solid var(--line); border-radius:10px; color:var(--ink); text-decoration:none; font-weight:500; font-size:17px}
.top .help:hover{border-color:var(--ink)}
.top button{font:500 16px/1 var(--sans); color:var(--ink2); background:none; border:2px solid var(--line);
  border-radius:10px; min-height:48px; padding:0 16px; cursor:pointer}
.top button:hover{color:var(--ink); border-color:var(--ink)}

.wrap{max-width:880px; margin:0 auto; padding:0 24px}

/* opening: one sentence, one button */
.open{padding:56px 0 44px; text-align:center}
.open h1{max-width:20ch; margin:0 auto 18px}
.open .say{font-size:22px; line-height:1.5; color:var(--ink2); max-width:34ch; margin:0 auto 34px}
.open .acts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* buttons: you cannot miss them */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:600 20px/1 var(--sans); min-height:64px; padding:0 34px;
  background:var(--acc); color:#fff; border:2px solid var(--acc); border-radius:var(--r);
  text-decoration:none; cursor:pointer}
.btn:hover{background:var(--acc-h); border-color:var(--acc-h); color:#fff}
.btn.sec{background:var(--bg); color:var(--ink); border-color:var(--ink)}
.btn.sec:hover{background:var(--bg2); color:var(--ink)}
.btn svg{width:22px; height:22px; flex:none}

/* three steps, drawn large */
.steps{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:52px 0}
.steps h2{text-align:center; margin-bottom:34px}
.steps ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:760px){.steps ol{grid-template-columns:1fr}}
.steps li{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px 28px; text-align:center}
.steps .n{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:var(--acc); color:#fff; font-size:20px; font-weight:600; margin-bottom:18px}
.steps .pic{width:112px; height:112px; margin:0 auto 18px; display:block}
.steps .pic *{vector-effect:non-scaling-stroke}
.steps h3{margin-bottom:8px}
.steps p{font-size:17.5px; color:var(--ink2); line-height:1.5}

/* what we organize: six tiles, a picture and a few words each */
.organize{padding:52px 0}
.organize h2{text-align:center; margin-bottom:26px}
.organize .grp{font-size:15px; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--gold); margin:26px 0 10px}
.organize ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width:820px){.organize ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.organize ul{grid-template-columns:1fr}}
.organize li{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:20px 16px 18px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px}
.organize li svg{width:52px; height:52px; display:block; margin-bottom:6px}
.organize li{min-width:0}
.organize li>a>b{font-size:17.5px; font-weight:600; line-height:1.25}
.organize li>a>span{font-size:15px; color:var(--ink2); line-height:1.4}
/* trust: plain, short, three lines */
.trust{background:var(--bg2); border-top:1px solid var(--line); padding:48px 0}
.trust .in{max-width:640px; margin:0 auto}
.trust h2{margin-bottom:22px}
.trust ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.trust li{display:flex; gap:16px; align-items:flex-start; font-size:19px}
.trust li svg{width:30px; height:30px; flex:none; margin-top:2px}
.trust li b{display:block; font-weight:600}
.trust li span{color:var(--ink2); font-size:17.5px}
.trust .more{margin-top:26px; font-size:17px; color:var(--ink2)}

/* a human */
.human{padding:52px 0; text-align:center}
.human h2{margin-bottom:10px}
.human p{font-size:18.5px; color:var(--ink2); max-width:40ch; margin:0 auto 26px}
.human .acts{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.faq-mini{text-align:left; padding-top:24px; padding-bottom:18px}
.faq-mini h2{margin-bottom:14px}
.gverify{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px 18px; background:var(--bg2); border-bottom:1px solid var(--line); border-left:4px solid #b3541e}
.gverify p{margin:0; font-size:15.5px; line-height:1.45; flex:1 1 320px}
.gverify-btn{flex:0 0 auto; font:inherit; font-size:15px; font-weight:600; cursor:pointer; padding:7px 14px; border-radius:var(--r); border:1px solid var(--line); background:transparent; color:var(--ink)}
.gverify-btn:disabled{cursor:default; opacity:.75}
/* the two-step notice on the upload page. Its own name, because .gsteps is the guides'
   numbered-step component and its li is a grid; and its own layout, so no rule anywhere else
   can decide how this paragraph wraps. min-width:0 is what stops the text column collapsing
   to one word per line. */
.gtwo{border:1px solid var(--line); border-radius:var(--r); background:var(--bg2); padding:15px 17px; margin:0 0 18px}
.gtwo .gtwo-h{display:block; font:600 16.5px/1.4 var(--sans); margin:0 0 11px}
.gtwo .gtwo-s{display:flex; align-items:flex-start; gap:11px; margin:0 0 10px}
.gtwo .gtwo-s:last-child{margin-bottom:0}
.gtwo .gtwo-n{flex:0 0 auto; width:23px; height:23px; border-radius:6px; background:var(--acc); color:#fff; font:600 13px/23px var(--sans); text-align:center}
.gtwo .gtwo-t{flex:1 1 auto; min-width:0; margin:0; font-size:15.5px; line-height:1.5; color:var(--ink)}
.faq-grid{display:grid;  grid-template-columns:minmax(0,1fr); gap:10px; max-width:46rem}  /* ONE COLUMN ON PURPOSE. In two columns, opening one question stretched the empty     box beside it to match the row height, which reads as a broken panel. An accordion     belongs in a single column, and 46rem keeps the answers at a readable measure. */
.faq-grid details{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:0 16px}
.faq-grid summary{cursor:pointer; list-style:none; padding:14px 22px 14px 0; position:relative; font-weight:600; color:var(--ink)}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary::after{content:'+'; position:absolute; right:0; top:11px; font-size:22px; font-weight:400; color:var(--acc)}
.faq-grid details[open] summary::after{content:'−'}
.faq-grid details p{margin:0 0 15px; color:var(--ink2); font-size:15.5px; line-height:1.5}
@media(max-width:640px){.faq-grid{grid-template-columns:1fr}}

/* footer: one line */
.foot{border-top:1px solid var(--line); padding:26px 0; font-size:15.5px; color:var(--ink2)}
.foot .in{max-width:880px; margin:0 auto; padding:0 24px; text-align:center; line-height:1.6}

/* ---- pages that reuse this sheet (How this works) ---- */
.page{max-width:760px; margin:0 auto; padding:40px 24px 72px}
.head .plain{font-size:19px; color:var(--ink2); margin-top:10px}
.section{margin-top:34px}
.list{background:var(--bg); border:2px solid var(--line); border-radius:var(--r); overflow:hidden}
.list>div{padding:20px 22px; border-bottom:1px solid var(--line2)}
.list>div:last-child{border-bottom:none}
.list h3{font-size:20px; margin-bottom:6px}
.list p{font-size:17.5px; color:var(--ink2)}
.quiet{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px}
.quiet p{font-size:17.5px; color:var(--ink2)}

/* ---- intake: upload + your files ---- */
.drop{border:3px dashed var(--line); border-radius:var(--r); padding:34px 20px; text-align:center; background:var(--bg2)}
.drop.over{border-color:var(--acc); background:var(--acc-bg)}
.drop .h{font-size:22px; font-weight:600; margin-bottom:6px}
.drop .d{font-size:17px; color:var(--ink2); margin-bottom:20px}
.drop .acts{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.field{display:block; font-size:17px; font-weight:500; margin:22px 0 8px}
input[type=text]{font:18px var(--sans); color:var(--ink); background:var(--bg); border:2px solid var(--line);
  border-radius:8px; padding:12px 14px; min-height:54px; width:100%}
input[type=text]:focus{border-color:var(--acc); outline:none}
.files{border:2px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg)}
.files .r{display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line2); font-size:17px}
.files .r:last-child{border-bottom:none}
.files .n{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.files .s{flex:none; color:var(--ink2); font-size:16px}
.files .st{flex:0 1 260px; min-width:0; font-size:16px; color:var(--ink2)}
/* the file list's status wraps onto its own full-width line; hidden when empty */
.files .r .st.full{flex:1 1 100%}
.files .r .st.full:empty{display:none}
.files .st.ok{color:var(--ok); font-weight:500}
.files .st.bad{color:#9A2B27; font-weight:500}
.files .acts{flex:none; display:flex; gap:8px}
.files .empty{padding:26px 18px; text-align:center; color:var(--ink2); font-size:17px}
.btn.small{min-height:46px; padding:0 16px; font-size:16px; border-radius:8px}
.btn.quiet{background:var(--bg); color:var(--ink2); border-color:var(--line)}
.btn.quiet:hover{color:#9A2B27; border-color:#9A2B27; background:var(--bg)}
.checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.checks li{display:flex; gap:12px; align-items:flex-start; font-size:17.5px}
.checks li svg{width:26px; height:26px; flex:none; margin-top:2px}
.sum{margin-top:12px; font-size:16px; color:var(--ink2)}

/* ---- onboarding steps ---- */
.stepbar{display:flex; gap:8px; justify-content:center; margin:0 0 30px; flex-wrap:wrap}
.stepbar span{display:inline-flex; align-items:center; gap:8px; font-size:15.5px; color:var(--ink2); padding:8px 14px; border-radius:6px; border:1px solid var(--line)}
.stepbar span b{display:inline-flex; width:24px; height:24px; border-radius:50%; align-items:center; justify-content:center; font-size:13px; background:var(--line); color:var(--ink)}
.stepbar span.on{color:var(--ink); border-color:var(--acc); font-weight:500}
.stepbar span.on b{background:var(--acc); color:#fff}
.stepbar span.done b{background:var(--ok); color:#fff}
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:8px}
.choices label{display:flex; align-items:center; justify-content:center; text-align:center; min-height:64px; padding:12px 14px;
  border:2px solid var(--line); border-radius:var(--r); font-size:17.5px; font-weight:500; cursor:pointer; background:var(--bg)}
.choices label:hover{border-color:var(--ink2)}
.choices input{position:absolute; opacity:0; width:0; height:0}
.choices input:checked+label,.choices label:has(input:checked){border-color:var(--acc); background:var(--acc-bg); color:var(--acc)}
.choices label:has(input:focus-visible){outline:3px solid var(--acc); outline-offset:3px}
.next{display:flex; gap:12px; align-items:center; margin-top:30px; flex-wrap:wrap}
.next .skip{font-size:16px; color:var(--ink2)}

/* ---- payment ---- */
.plan{border:2px solid var(--acc); border-radius:var(--r); padding:26px 24px; background:var(--bg)}
.plan .price{display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.plan .price b{font-size:46px; font-weight:600; letter-spacing:-.02em; line-height:1}
.plan .price span{font-size:19px; color:var(--ink2)}
.plan .sub{font-size:17px; color:var(--ink2); margin-bottom:18px}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.plan li{display:flex; gap:11px; align-items:flex-start; font-size:17.5px}
.plan li svg{width:24px; height:24px; flex:none; margin-top:2px}
.paybtns{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.paybtn{display:flex; align-items:center; justify-content:center; gap:10px; min-height:60px; border-radius:var(--r);
  font:600 19px/1 var(--sans); text-decoration:none; cursor:pointer; border:2px solid transparent}
.paybtn svg{height:26px; width:auto}
.paybtn.apple{background:#000; color:#fff}
.paybtn.google{background:#fff; color:#3c4043; border-color:#dadce0}
:root[data-theme="dark"] .paybtn.google{background:#fff}
.paybtn.paypal{background:#FFC439; color:#003087}
.paybtn.bycard{background:var(--bg); color:var(--ink); border-color:var(--ink)}
.paybtn:hover{filter:brightness(.94)}
.fine{font-size:15px; color:var(--ink2); line-height:1.55; margin-top:18px; text-align:center}
.fine a{color:var(--ink2)}

/* ---- profile ---- */
.people{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 26px}
.people a{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 18px; border-radius:10px; border:2px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:17.5px; font-weight:500}
.people a.on{border-color:var(--acc); background:var(--acc-bg); color:var(--acc)}
.people a .av{width:30px; height:30px; border-radius:50%; background:var(--acc); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:600}
.people a.add{border-style:dashed; color:var(--ink2); font-weight:400}
.status{display:flex; gap:10px 26px; flex-wrap:wrap; font-size:17px; color:var(--ink2); padding:16px 20px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r)}
.status b{color:var(--ink); font-weight:600}
.status .ok{color:var(--ok)}
.actions{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width:520px){.actions{grid-template-columns:1fr}}
.actions a{display:flex; flex-direction:column; gap:5px; padding:20px; min-height:110px; background:var(--bg); border:2px solid var(--line); border-radius:var(--r);
  color:var(--ink); text-decoration:none}
.actions a:hover{border-color:var(--acc); background:var(--bg2)}
.actions a.primary{border-color:var(--line); background:var(--bg); color:var(--ink)}
.actions a.primary .d{color:var(--ink2)}
.actions a.primary:hover{background:var(--acc-h); border-color:var(--acc-h)}
.actions .h{font-size:19px; font-weight:600}
.actions .d{font-size:15.5px; color:var(--ink2); line-height:1.4}
.account{display:flex; gap:14px 24px; flex-wrap:wrap; font-size:16px; color:var(--ink2); padding-top:22px; border-top:1px solid var(--line)}
.account a{color:var(--ink2)}

/* ---- confirm what we read ---- */
.confirm{border:2px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg)}
.confirm .row{display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:14px; align-items:start; padding:16px 18px; border-bottom:1px solid var(--line2)}
.confirm .row:last-child{border-bottom:none}
.confirm .row.warn{background:#FBF3E4; border-left:4px solid #8A5A12}
:root[data-theme="dark"] .confirm .row.warn{background:#2A2317}
.confirm .k{font-size:15px; color:var(--ink2); padding-top:6px}
.confirm .v{display:flex; flex-direction:column; gap:2px; min-width:0}
.confirm .v b{font-size:19px; font-weight:600; line-height:1.3}
.confirm .v span{font-size:15px; color:var(--ink2); margin-bottom:6px}
.confirm .a{display:flex; gap:6px; flex:none}
.confirm .btn.on{border-color:var(--ok); color:var(--ok); background:var(--ok-bg)}
@media (max-width:560px){.confirm .row{grid-template-columns:1fr} .confirm .k{padding-top:0}}

/* ---- offers in context ---- */
.offer{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:18px 20px; background:var(--bg2); border:1px solid var(--line); border-left:4px solid var(--acc); border-radius:var(--r)}
.offer .t{flex:1 1 280px; min-width:0}
.offer .t b{display:block; font-size:18.5px; font-weight:600; margin-bottom:3px}
.offer .t span{font-size:16px; color:var(--ink2)}
.offer .p{font-size:22px; font-weight:600; flex:none}

/* ---- limits, stated plainly ---- */
.limits{display:flex; gap:8px 22px; flex-wrap:wrap; justify-content:center; font-size:15px; color:var(--ink2); margin-top:14px}
.limits b{color:var(--ink); font-weight:600}
/* ---- sign in ---- */
.signin{max-width:520px; margin:0 auto; padding:48px 24px 72px; text-align:center}
.signin h1{margin-bottom:12px}
.signin .say{font-size:18.5px; color:var(--ink2); margin-bottom:30px}
.signin .opts{display:flex; flex-direction:column; gap:12px}
.signin .btn{width:100%; justify-content:flex-start; padding-left:22px}
.signin .btn.sec{font-weight:500}
.signin .or{font-size:15px; color:var(--ink2); margin:8px 0}
.signin .why{margin-top:30px; font-size:16px; color:var(--ink2); text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}

/* ---- views ---- */
.vhead{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px}
.vhead .back{font-size:16px; color:var(--ink2); text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:40px}
.vhead .back:hover{color:var(--ink)}
.vsum{display:flex; gap:10px 22px; flex-wrap:wrap; font-size:17px; color:var(--ink2); margin:14px 0 8px}
.vsum b{color:var(--ink); font-weight:600}
.vgroup{margin-top:34px}
.vgroup h2{font-size:15px; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--gold); margin-bottom:10px}
.vlist{background:var(--bg); border:2px solid var(--line); border-radius:var(--r); overflow:hidden}
.vlist a{display:flex; align-items:center; gap:14px; padding:16px 20px; min-height:64px; border-bottom:1px solid var(--line2); color:var(--ink); text-decoration:none}
.vlist a:last-child{border-bottom:none}
.vlist a:hover{background:var(--bg2); text-decoration:none}
.vlist .t{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.vlist .t b{font-size:18px; font-weight:600}
.vlist .t span{font-size:15.5px; color:var(--ink2)}
.vlist .n{flex:none; font-size:14.5px; font-weight:600; color:var(--acc); background:var(--acc-bg); padding:5px 10px; border-radius:6px; white-space:nowrap}
.vlist .n.warn{color:#7A5410; background:#FBF2E0}
.vlist .go{flex:none; color:var(--ink2); font-size:20px}
.explain{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; font-size:17px; color:var(--ink2); line-height:1.5; margin:18px 0 26px}
.explain b{color:var(--ink)}
.marker{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); padding:16px 18px; margin-bottom:12px}
.marker .mh{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.marker .mh b{font-size:19px; font-weight:600}
.marker .mh .u{font-size:15px; color:var(--ink2)}
.marker .mh .rng{margin-left:auto; font-size:15px; color:var(--ink2)}
.strip{display:flex; gap:3px; flex-wrap:wrap}
/* cells never carry text at strip size; the value shows in the readout below on tap */
.strip i{display:block; width:22px; height:30px; border-radius:4px; background:var(--line2); font-style:normal; color:transparent; cursor:default}
.strip button{width:22px; height:30px; border-radius:4px; border:none; padding:0; cursor:pointer; font-size:0}
.strip button.v{background:#E6F3EC}
.strip button.hi{background:#F6D2CF}
.strip button.lo{background:#D9E7F3}
.strip button:hover,.strip button:focus-visible{outline:3px solid var(--acc); outline-offset:1px}
.strip button.on{outline:3px solid var(--ink); outline-offset:1px}
.readout{margin-top:10px; min-height:26px; font-size:17px; color:var(--ink2)}
.readout b{color:var(--ink); font-size:19px}
.readout .hi{color:#8C2F1F} .readout .lo{color:#1C4F72}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:15px; color:var(--ink2); margin:8px 0 22px}
.legend i{display:inline-block; width:16px; height:16px; border-radius:3px; vertical-align:-3px; margin-right:6px}
.months{display:flex; gap:3px; flex-wrap:wrap; font-size:12.5px; color:var(--ink2); margin-bottom:6px}
.months span{min-width:22px}
.change{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); padding:20px; margin-bottom:14px}
.change .ch{display:flex; flex-direction:column; gap:4px; margin-bottom:14px}
.change .ch b{font-size:20px; font-weight:600; line-height:1.3}
.change .ch span{font-size:15.5px; color:var(--ink2)}
.change .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.tag{display:inline-flex; align-items:center; font-size:14px; font-weight:600; padding:5px 10px; border-radius:6px; background:var(--bg2); border:1px solid var(--line); color:var(--ink2)}
.tag.w{background:#FBF2E0; color:#7A5410; border-color:transparent}
.tag.f{background:#F9ECEC; color:#8C2F1F; border-color:transparent}
.ba{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){.ba{grid-template-columns:1fr}}
.ba>div{border:1px solid var(--line); border-radius:8px; padding:14px 16px; background:var(--bg2)}
.ba .lab{display:block; font-size:13px; letter-spacing:normal; text-transform:none; font-weight:600; margin-bottom:8px}
.ba .before{border-top:4px solid #8C2F1F} .ba .before .lab{color:#8C2F1F}
.ba .after{border-top:4px solid #1B6B4A} .ba .after .lab{color:#1B6B4A}
.ba p{font-size:16px; line-height:1.55}
.ba mark{background:#D9EFE0; color:#1B5233; padding:1px 3px; border-radius:3px}
.ba mark.out{background:#FADFD9; color:#7A2617}
.change .when{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); font-size:16px; color:var(--ink2); line-height:1.5}
.change .when b{color:var(--ink)}
.change .cite{display:inline-block; margin-top:8px; font-size:16px}
.vs{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden}
.vs .r{display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) auto; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line2); align-items:start}
.vs .ac{align-self:center}
.vs .r:last-child{border-bottom:none}
.vs .r.h{background:var(--bg2); font-size:13px; letter-spacing:normal; text-transform:none; font-weight:600; color:var(--ink2)}
.vs .d{font-size:15px; color:var(--ink2); line-height:1.4}
.vs .d b{display:block; color:var(--ink); font-size:16px}
.vs .say{font-size:17px; font-style:italic}
.vs .num{font-size:16.5px; line-height:1.45}
.vs .num b{color:#8C2F1F}
@media (max-width:640px){.vs .r{grid-template-columns:1fr} .vs .ac{justify-self:start}}
.datalink{font-size:16px; margin-top:16px}

/* ---- situations: the front door ---- */
.sit{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px}
@media (max-width:640px){.sit{grid-template-columns:1fr}}
.sit a{display:flex; flex-direction:column; gap:6px; padding:22px 22px 20px; min-height:132px; background:var(--bg); border:2px solid var(--line); border-radius:var(--r); color:var(--ink); text-decoration:none}
.sit a:hover{border-color:var(--acc); background:var(--bg2)}
.sit .k{font-size:14.5px; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--ink2)}
.sit .h{font-size:21px; font-weight:600; line-height:1.25}
.sit .d{font-size:16px; color:var(--ink2); line-height:1.45}
.sit .go{margin-top:auto; font-size:16px; font-weight:600; color:var(--acc)}
.free{text-align:center; font-size:16.5px; color:var(--ink2); margin-top:16px}

/* ---- guide pages ---- */
.gsteps{list-style:none; margin:0; padding:0}
.gsteps li{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:20px 0; border-bottom:1px solid var(--line2)}
.gsteps li:last-child{border-bottom:none}
.gsteps li::before{content:none}
.gsteps li>div>b{display:block; font-size:19.5px; font-weight:600; margin-bottom:4px; line-height:1.3}
.gsteps p b{display:inline; font-size:inherit; font-weight:600; color:var(--ink)}
.gsteps p{font-size:17.5px; color:var(--ink2); line-height:1.55}
.deadline{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:20px 0}
.deadline div{background:#FBF2E0; border:1px solid var(--line); border-left:4px solid #8A5A12; border-radius:var(--r); padding:16px 18px}
:root[data-theme="dark"] .deadline div{background:#2A2317}
.deadline .w{font-size:14.5px; font-weight:600; letter-spacing:normal; text-transform:none; color:#7A5410; margin-bottom:6px}
:root[data-theme="dark"] .deadline .w{color:#DCB068}
.deadline>div>b{display:block; font-size:19px; font-weight:600; line-height:1.3}
.deadline span{display:block; font-size:16px; color:var(--ink2); margin-top:4px}
.deadline span b{display:inline; font-size:inherit; font-weight:600; color:var(--ink)}
.need{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.need h2{font-size:17px; margin-bottom:10px}
.sources{font-size:15px; color:var(--ink2); line-height:1.6; margin-top:26px; padding-top:14px; border-top:1px solid var(--line)}
.sources a{color:var(--ink2)}

/* ---- join: the upsell at the foot of every guide ---- */
.join{background:var(--acc); color:#fff; border-radius:var(--r); padding:28px 26px; margin-top:40px}
.join h2{color:#fff; font-size:24px; margin-bottom:8px}
.join p{font-size:17.5px; color:rgba(255,255,255,.85); line-height:1.5; max-width:56ch}
.join .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; align-items:center}
.join .btn{background:#fff; color:var(--acc); border-color:#fff}
.join .btn:hover{background:#EEF2F6; color:var(--acc)}
.join .price{font-size:16px; color:rgba(255,255,255,.85)}
.join .price b{color:#fff; font-size:20px}

/* ---- lab results as values, not squares ---- */
.results{display:flex; flex-wrap:wrap; gap:8px; align-items:stretch}
.res{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:66px; min-height:56px; padding:7px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg2); text-decoration:none; color:var(--ink)}
.res:hover{border-color:var(--ink2)}
.res b{font-size:19px; font-weight:600; line-height:1.15}
.res span{font-size:13.5px; color:var(--ink2); margin-top:2px; white-space:nowrap}
.res.hi{background:#F6D2CF; border-color:transparent} .res.hi b{color:#8C2F1F}
.res.lo{background:#D9E7F3; border-color:transparent} .res.lo b{color:#1C4F72}
.res.v{background:#E6F3EC; border-color:transparent} .res.v b{color:#1B6B4A}
:root[data-theme="dark"] .res.hi{background:#3A1F1D} :root[data-theme="dark"] .res.lo{background:#1B2A38} :root[data-theme="dark"] .res.v{background:#17281F}
.mlab{align-self:center; font-size:13px; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--ink2); padding:0 6px 0 2px; flex-basis:100%}
.mlab:first-child{flex-basis:100%}

/* ---- calendar view ---- */
.viewsw{display:flex; gap:8px; margin:0 0 18px}
.viewsw button{font:600 16px var(--sans); min-height:46px; padding:0 18px; border-radius:10px; border:2px solid var(--line); background:var(--bg); color:var(--ink2); cursor:pointer}
.viewsw button[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:#fff}
.cal{border:2px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg); margin-bottom:14px}
.cal h3{font-size:19px; font-weight:600; padding:14px 18px 10px}
.cal .wd,.cal .grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.cal .wd span{font-size:14px; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--ink2); padding:0 9px 8px; text-align:left}
.cal .grid{gap:1px; background:var(--line2); border-top:1px solid var(--line2)}
.cal .day{background:var(--bg); min-height:96px; padding:7px 9px 9px}
.cal .day.pad{background:var(--bg2)}
.cal .day .n{font-size:15px; color:var(--ink2); margin-bottom:4px}
.cal .day.has{background:var(--bg)} .cal .day.has .n{color:var(--ink); font-weight:600}
.cal .val{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0 6px; font-size:15px; line-height:1.5; text-decoration:none; color:var(--ink2); padding:2px 5px; border-radius:5px; margin:1px -5px; min-width:0}
.cal .val>span{min-width:0; overflow-wrap:anywhere}
.cal .val b{white-space:nowrap}
.cal .val b{font-weight:600; font-size:18px; color:var(--ink)}
.cal .val.hi{background:#F6D2CF} .cal .val.hi b{color:#8C2F1F}
.cal .val.lo{background:#D9E7F3} .cal .val.lo b{color:#1C4F72}
.cal .val.v b{color:#1B6B4A}
:root[data-theme="dark"] .cal .val.hi{background:#3A1F1D} :root[data-theme="dark"] .cal .val.lo{background:#1B2A38}
.cal .val:hover b{text-decoration:underline}
.calkey{display:flex; gap:14px 22px; flex-wrap:wrap; font-size:15px; color:var(--ink2); margin:0 0 16px}
.calkey b{color:var(--ink); font-weight:600}
/* on phones the grid becomes a list of the days that have readings; type never shrinks */
@media (max-width:700px){
  .cal .wd{display:none}
  .cal .grid{display:flex; flex-direction:column; gap:1px}
  .cal .day:not(.has){display:none}
  .cal .day.has{display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:12px; min-height:auto}
  .cal .day.has .n{grid-row:1 / span 6; font-size:17px; font-weight:600}
  .cal .day.has .n::after{content:attr(data-wd); display:block; font-size:13px; font-weight:400; color:var(--ink2)}
}

/* day cells summarise; a tap opens the full list for that day */
.cal .day.has{cursor:pointer}
.cal .day.has:hover{background:var(--bg2)}
.cal .day.on{outline:3px solid var(--acc); outline-offset:-3px}
.cal .more{display:block; font-size:15px; color:var(--acc); font-weight:600; margin-top:3px}
.cal .cnt{font-size:14px; color:var(--ink2); margin-top:3px}
.daydetail{border:2px solid var(--acc); border-radius:var(--r); background:var(--bg); margin:-6px 0 18px; overflow:hidden}
.daydetail .dh{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line2); background:var(--acc-bg)}
.daydetail .dh b{font-size:19px; font-weight:600}
.daydetail .dh span{font-size:15.5px; color:var(--ink2)}
.daydetail .dh button{margin-left:auto; font:600 15px var(--sans); min-height:40px; padding:0 14px; border-radius:8px; border:2px solid var(--line); background:var(--bg); color:var(--ink2); cursor:pointer}
.daydetail .dr{display:grid; grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr) auto; gap:14px; align-items:baseline; padding:11px 18px; border-bottom:1px solid var(--line2); font-size:16.5px; color:var(--ink); text-decoration:none}
.daydetail .dr:last-child{border-bottom:none}
.daydetail .dr:hover{background:var(--bg2)}
.daydetail .dr .v{font-size:19px; font-weight:600; white-space:nowrap}
.daydetail .dr.hi .v{color:#8C2F1F} .daydetail .dr.lo .v{color:#1C4F72} .daydetail .dr.v .v{color:#1B6B4A}
.daydetail .dr .rg{font-size:15px; color:var(--ink2)}
.daydetail .dr .fl{font-size:14px; font-weight:600; padding:3px 9px; border-radius:6px; white-space:nowrap}
.daydetail .dr.hi .fl{background:#F6D2CF; color:#8C2F1F} .daydetail .dr.lo .fl{background:#D9E7F3; color:#1C4F72} .daydetail .dr.v .fl{background:#E6F3EC; color:#1B6B4A}
@media (max-width:640px){.daydetail .dr{grid-template-columns:minmax(0,1fr) auto; row-gap:2px} .daydetail .dr .rg{grid-column:1 / -1}}

/* legend as text samples, so one key serves calendar and list */
.legend .hi,.legend .lo,.legend .v{font-weight:600; padding:2px 8px; border-radius:5px}
.legend .hi{background:#F6D2CF; color:#8C2F1F} .legend .lo{background:#D9E7F3; color:#1C4F72} .legend .v{background:#E6F3EC; color:#1B6B4A}

/* ---- vitals: five views ---- */
.viewsw{flex-wrap:wrap}
.viewsw button small{display:block; font-weight:400; font-size:13px; opacity:.8}
.viewsw button{padding:8px 16px; line-height:1.25; text-align:left}
.chart{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); padding:16px 18px 10px; margin-bottom:12px}
.chart .mh{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.chart .mh b{font-size:19px; font-weight:600}
.chart .mh .rng{margin-left:auto; font-size:15px; color:var(--ink2)}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .band{fill:#E6F3EC} .chart .ln{fill:none; stroke:var(--ink2); stroke-width:2}
/* a normal range with only one end: the line is the threshold, the tint is the side that is not normal */
.chart .offband{fill:#F6EDEB} .chart .thr{stroke:#1B6B4A; stroke-width:1.5; stroke-dasharray:6 4}
.chart .pt{fill:var(--bg); stroke:#1B6B4A; stroke-width:2.5} .chart .pt.hi{stroke:#8C2F1F; fill:#F6D2CF} .chart .pt.lo{stroke:#1C4F72; fill:#D9E7F3}
.chart .ax{font:14px var(--sans); fill:var(--ink2)} .chart .lb{font:600 15px var(--sans)} .chart .lb.hi{fill:#8C2F1F} .chart .lb.lo{fill:#1C4F72}
.chart .grid{stroke:var(--line2); stroke-width:1}
.oor{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden}
.oor .r{display:grid; grid-template-columns:130px minmax(0,1fr) auto; gap:14px; padding:13px 18px; border-bottom:1px solid var(--line2); align-items:baseline; color:var(--ink); text-decoration:none}
.oor .r:last-child{border-bottom:none} .oor .r:hover{background:var(--bg2)}
.oor .when{font-size:15px; color:var(--ink2); line-height:1.35} .oor .when b{display:block; color:var(--ink); font-size:16.5px}
.oor .what{font-size:17px; line-height:1.45} .oor .what b{font-size:19px} .oor .what.hi b{color:#8C2F1F} .oor .what.lo b{color:#1C4F72}
.oor .what span{display:block; font-size:15px; color:var(--ink2); margin-top:2px}
.oor .said{font-size:15.5px; font-style:italic; color:var(--ink2); max-width:26ch; text-align:right}
@media (max-width:640px){.oor .r{grid-template-columns:1fr} .oor .said{text-align:left; max-width:none}}
.dayctl{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.dayctl b{font-size:21px; font-weight:600; flex:1 1 auto}
.dayctl button{font:600 16px var(--sans); min-height:46px; padding:0 16px; border-radius:8px; border:2px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer}
.dayctl button:hover{border-color:var(--ink2)}
.vt{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow-x:auto}
.vt table{border-collapse:collapse; width:100%; min-width:560px; font-size:17px}
.vt th,.vt td{padding:12px 14px; text-align:right; border-bottom:1px solid var(--line2); white-space:nowrap}
.vt th{font-size:14px; font-weight:600; letter-spacing:normal; text-transform:none; color:var(--ink2); background:var(--bg2)}
.vt th:first-child,.vt td:first-child{text-align:left}
.vt td:first-child{font-weight:600}
.vt td.hi{background:#F6D2CF; color:#8C2F1F; font-weight:600} .vt td.lo{background:#D9E7F3; color:#1C4F72; font-weight:600}
.vt tr:last-child td{border-bottom:none}
.vt .who{font-size:14.5px; color:var(--ink2); font-weight:400}
.pain{display:flex; flex-wrap:wrap; gap:8px}
.painday{flex:1 1 92px; min-width:92px; border:1px solid var(--line); border-radius:8px; padding:10px 8px; text-align:center; background:var(--bg2); text-decoration:none; color:var(--ink)}
.painday b{display:block; font-size:30px; font-weight:600; line-height:1.1}
.painday span{display:block; font-size:14px; color:var(--ink2); margin-top:3px}
.painday.p7{background:#FBF2E0; border-color:transparent} .painday.p7 b{color:#7A5410}
.painday.p9{background:#F6D2CF; border-color:transparent} .painday.p9 b{color:#8C2F1F}
.painday i{display:block; font-style:italic; font-size:14px; color:var(--ink2); margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); line-height:1.4}

/* ---- CMA bar: on every page, under the top bar ---- */
.cma{background:var(--bg2); border-bottom:1px solid var(--line); font-size:15px; color:var(--ink2); text-align:center; padding:9px 16px; line-height:1.45}
.cma a{color:var(--ink2)}

/* ---- flowsheet: tests as rows, days as columns ---- */
.flow{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow-x:auto}
.flow table{border-collapse:separate; border-spacing:0; font-size:17px}
.flow th,.flow td{padding:0; border-bottom:1px solid var(--line2); white-space:nowrap}
.flow thead th{background:var(--bg2); font-weight:600; color:var(--ink2); text-align:center; vertical-align:bottom; padding:8px 6px 6px; font-size:14px; letter-spacing:.03em}
.flow thead th.mon{font-size:13px; letter-spacing:normal; text-transform:none; text-align:left; padding:10px 10px 4px; border-bottom:none; color:var(--gold)}
.flow thead th .d{display:block; font-size:16px; color:var(--ink); letter-spacing:0}
.flow th.rl{position:sticky; left:0; z-index:2; background:var(--bg); text-align:left; padding:10px 14px; min-width:210px; box-shadow:2px 0 0 var(--line2); font-weight:600; font-size:17px}
.flow th.rl small{display:block; font-weight:400; font-size:14px; color:var(--ink2); margin-top:2px}
.flow td{text-align:center; min-width:62px}
.flow td span{display:inline-block; min-width:52px; padding:9px 7px; border-radius:6px; font-weight:600; font-size:17px; line-height:1.2}
.flow td .v{color:#1B6B4A; background:#E6F3EC} .flow td .hi{color:#8C2F1F; background:#F6D2CF} .flow td .lo{color:#1C4F72; background:#D9E7F3}
:root[data-theme="dark"] .flow td .hi{background:#3A1F1D} :root[data-theme="dark"] .flow td .lo{background:#1B2A38} :root[data-theme="dark"] .flow td .v{background:#17281F}
.flow td a{text-decoration:none}
.flow td small{display:block; font-weight:400; font-size:12.5px; color:var(--ink2); margin-top:1px}
.flow tbody tr:hover th.rl,.flow tbody tr:hover td{background:var(--bg2)}
.flow tbody tr:last-child th,.flow tbody tr:last-child td{border-bottom:none}
.scrollhint{font-size:14.5px; color:var(--ink2); margin:8px 0 0}

/* ---- notice (ported from v5; v6 never defined it) ---- */
.notice{display:flex; gap:12px; align-items:flex-start; background:#FBF2E0; border:1px solid var(--line); border-left:4px solid #8A5A12; border-radius:var(--r); padding:14px 18px; font-size:16.5px; color:var(--ink)}
:root[data-theme="dark"] .notice{background:#2A2317}
.notice b{display:block; margin-bottom:3px}
.notice p{font-size:15.5px; color:var(--ink2); line-height:1.5}

/* ---- wording that repeats ---- */
.theme{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden; margin-bottom:14px}
.theme .th{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:16px 20px; background:var(--bg2); border-bottom:1px solid var(--line2)}
.theme .th b{font-size:20px; font-weight:600}
.theme .th span{font-size:15.5px; color:var(--ink2)}
.phr{display:grid; grid-template-columns:minmax(0,1.6fr) auto auto minmax(0,1.2fr); gap:14px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line2); color:var(--ink); text-decoration:none}
.phr:last-child{border-bottom:none} .phr:hover{background:var(--bg2)}
.phr .q{font-size:18px; font-style:italic; line-height:1.4}
.phr .q small{display:block; font-style:normal; font-size:14.5px; color:var(--ink2); margin-top:2px}
.phr .n{text-align:center; font-size:22px; font-weight:600; line-height:1.1} .phr .n small{display:block; font-size:13px; font-weight:400; color:var(--ink2)}
.phr .c{font-size:15.5px; line-height:1.45; color:var(--ink2)} .phr .c b{color:#8C2F1F; font-size:17px}
@media (max-width:680px){.phr{grid-template-columns:1fr 1fr} .phr .q{grid-column:1 / -1} .phr .c{grid-column:1 / -1}}

/* every reading shown; same-day readings stack in time order, never averaged */
.flow td .stack{display:flex; flex-direction:column; gap:3px; align-items:stretch; padding:5px 0}
.flow td .stack span{display:flex; justify-content:space-between; gap:8px; min-width:0; padding:5px 8px; font-size:16.5px}
.flow td .stack span small{display:inline; font-weight:400; font-size:15px; color:var(--ink2); margin:0}
.flow td .stack span.v small,.flow td .stack span.hi small,.flow td .stack span.lo small{color:inherit; opacity:.75}
.cal .val small{display:block; flex-basis:100%; font-weight:400; font-size:14.5px; color:var(--ink2)}
.cal .val.hi small,.cal .val.lo small{color:inherit; opacity:.8}
.cal .inr{display:block; font-size:14.5px; color:var(--ink2); margin-top:3px}
.painday .scores{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:4px}
.painday .scores span{font-size:19px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--bg)}
.painday .scores span.p7{background:#FBF2E0; color:#7A5410} .painday .scores span.p9{background:#F6D2CF; color:#8C2F1F}
.painday .scores small{display:block; font-size:12px; font-weight:400; color:var(--ink2)}

/* inline emphasis inside body copy always stays inline, whatever the component's headline rule says */
.plan li b,.offer .t span b,.vlist .t span b,.explain b,.notice p b,.join p b,.sit .d b,.organize li span b,.trust li span b,.gsteps p b,.deadline span b{display:inline; font-size:inherit; line-height:inherit; margin:0}

/* ---- note journey ---- */
.journey{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); padding:18px 20px; margin-bottom:14px}
.journey .jh{display:flex; flex-direction:column; gap:3px; margin-bottom:14px}
.journey .jh b{font-size:19px; font-weight:600; line-height:1.3}
.journey .jh span{font-size:15.5px; color:var(--ink2)}
.track{position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(120px,1fr); gap:6px; overflow-x:auto; padding:8px 0 4px}
.track::before{content:""; position:absolute; left:0; right:0; top:22px; height:3px; background:var(--line)}
.stop{position:relative; padding-top:34px; font-size:15px; color:var(--ink2); line-height:1.4}
.stop::before{content:""; position:absolute; left:0; top:15px; width:17px; height:17px; border-radius:50%; background:var(--bg); border:3px solid var(--line)}
.stop b{display:block; color:var(--ink); font-size:16px}
.stop.first::before{border-color:var(--acc)} .stop.same::before{border-color:#1B6B4A; background:#E6F3EC}
.stop.changed::before{border-color:#8C2F1F; background:#F6D2CF} .stop.signed::before{border-color:#8A5A12; background:#FBF2E0}
.stop.changed b{color:#8C2F1F}
.jkey{display:flex; gap:16px; flex-wrap:wrap; font-size:15px; color:var(--ink2); margin:0 0 18px}
.jkey i{display:inline-block; width:14px; height:14px; border-radius:50%; border:3px solid var(--line); vertical-align:-2px; margin-right:6px; background:var(--bg)}
.jkey i.first{border-color:var(--acc)} .jkey i.same{border-color:#1B6B4A; background:#E6F3EC} .jkey i.changed{border-color:#8C2F1F; background:#F6D2CF} .jkey i.signed{border-color:#8A5A12; background:#FBF2E0}
.nudge{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:16px 20px; background:var(--acc-bg); border:1px solid var(--line); border-left:4px solid var(--acc); border-radius:var(--r)}
.nudge .t{flex:1 1 280px} .nudge .t b{display:block; font-size:18px; margin-bottom:3px} .nudge .t span{font-size:16px; color:var(--ink2)}

/* ---- timeline ---- */
.tlday{display:flex; align-items:baseline; gap:12px; padding:12px 18px; background:var(--bg2); border-top:2px solid var(--line); border-bottom:1px solid var(--line2); position:sticky; top:var(--goyo-header-h,0px); z-index:5}
.tlday b{font-size:18px} .tlday span{font-size:14.5px; color:var(--ink2)}
.tl{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden; overflow:clip}
.tl .e{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line2); align-items:start}
.tl .e:last-child{border-bottom:none}
.tl .tm{font-size:15px; color:var(--ink2); padding-top:3px}
.tl .ty{font-size:17.5px; font-weight:600; line-height:1.35}
.tl .who{font-size:15.5px; color:var(--ink2); margin-top:2px}
.tl .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.tl .a{display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:15px}
.tl .a a{white-space:nowrap}
@media (max-width:640px){.tl .e{grid-template-columns:1fr} .tl .a{align-items:flex-start}}
.tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:16px 0}
.tools select,.tools input[type=search]{font:16.5px var(--sans); color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:8px; padding:10px 12px; min-height:48px}
.tools input[type=search]{flex:1 1 220px}
.tools .count{margin-left:auto; font-size:15px; color:var(--ink2)}
.empty{text-align:center; padding:40px 20px; font-size:17px; color:var(--ink2)}
textarea{font:17px var(--sans); color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:8px; padding:12px 14px; width:100%; min-height:88px; resize:vertical}
textarea:focus{border-color:var(--acc); outline:none}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 18px}
pre.letter{white-space:pre-wrap; font:16.5px/1.6 var(--sans); background:var(--bg2); border:2px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:0}
/* what stands out (mother-site JS output) */
.so .card{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); padding:16px 18px; margin:12px 0}
.so .row{padding:12px 0; border-bottom:1px solid var(--line2)} .so .row:last-child{border-bottom:none}
.so .l1{display:flex; gap:9px; align-items:baseline; flex-wrap:wrap; font-size:17px} .so .l1 b{font-weight:600}
.so .mut{font-size:15.5px; color:var(--ink2); margin-top:3px} .so .q{font-size:16.5px; font-style:italic; margin:6px 0}
.so .what{font-size:16px; color:var(--ink2); margin:0 0 12px} .so .none{font-size:16px; color:var(--ink2); padding:8px 0}
.so h2{margin:30px 0 8px} .so .chip{display:inline-flex; font-size:14px; font-weight:600; padding:4px 9px; border-radius:6px; background:var(--bg2); border:1px solid var(--line); color:var(--ink2)}
.so .chip.w{background:#FBF2E0; color:#7A5410; border-color:transparent}
.so details{margin-top:8px} .so summary{cursor:pointer; font-size:16px; color:var(--acc); min-height:40px; display:flex; align-items:center}
.so .op{font-size:15.5px} .so table{font-size:16px}
/* bills */
.bill{border:2px solid var(--line); border-radius:var(--r); overflow-x:auto; background:var(--bg); margin-bottom:14px}
.bill table{border-collapse:collapse; width:100%; font-size:16.5px; min-width:560px}
.bill th,.bill td{padding:12px 16px; border-bottom:1px solid var(--line2); text-align:right; white-space:nowrap}
.bill th:first-child,.bill td:first-child{text-align:left; white-space:normal}
.bill thead th{background:var(--bg2); font-size:14px; letter-spacing:normal; text-transform:none; color:var(--ink2); font-weight:600}
.bill tr:last-child td{border-bottom:none} .bill td b{font-size:18px}
.bill tr.hi td{background:#FBF2E0}
/* cultures / meds rows */
.rows2{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden}
.rows2 .r{display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line2); align-items:baseline}
.rows2 .r:last-child{border-bottom:none}
.rows2 .d{font-size:15.5px; color:var(--ink2)} .rows2 .m b{font-size:17.5px; display:block} .rows2 .m span{font-size:15.5px; color:var(--ink2)}
@media (max-width:600px){.rows2 .r{grid-template-columns:1fr}}

/* ---- note picker (amendment letter) ---- */
.picker{border:2px solid var(--line); border-radius:var(--r); background:var(--bg); overflow:hidden; margin:10px 0 6px}
.picker .ph{display:flex; gap:10px; align-items:center; padding:12px 14px; background:var(--bg2); border-bottom:1px solid var(--line2)}
.picker .ph input{flex:1 1 auto; font:16.5px var(--sans); color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:8px; padding:10px 12px; min-height:46px}
.picker .ph span{font-size:15px; color:var(--ink2); white-space:nowrap}
.picker .list{max-height:420px; overflow:auto}
.picker .pd{position:sticky; top:0; background:var(--bg2); font-size:14.5px; font-weight:600; color:var(--ink2); padding:7px 14px; border-bottom:1px solid var(--line2)}
.picker button.n{display:grid; grid-template-columns:60px minmax(0,1fr) auto; gap:12px; width:100%; text-align:left; font:16px var(--sans); color:var(--ink); background:var(--bg); border:none; border-bottom:1px solid var(--line2); padding:11px 14px; min-height:52px; cursor:pointer; align-items:baseline}
.picker button.n:hover{background:var(--bg2)} .picker button.n.on{background:var(--acc-bg); box-shadow:inset 4px 0 0 var(--acc)}
.picker button.n .t{color:var(--ink2); font-size:15px} .picker button.n b{font-weight:600} .picker button.n .w{font-size:15px; color:var(--ink2)} .picker button.n .p{font-size:14.5px; color:var(--ink2); white-space:nowrap}
.picked{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 16px; background:var(--acc-bg); border:1px solid var(--line); border-left:4px solid var(--acc); border-radius:var(--r); margin:10px 0 0; font-size:16px}
.picked b{font-weight:600} .picked a{margin-left:auto}

/* ---- amend from anywhere ---- */
.amend{font:600 15px var(--sans); color:var(--acc); background:var(--bg); border:2px solid var(--line); border-radius:8px; padding:8px 12px; min-height:40px; cursor:pointer; white-space:nowrap}
.amend:hover{border-color:var(--acc)} .amend.on{background:var(--acc); color:#fff; border-color:var(--acc)}
.tray{position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--bg); border-top:2px solid var(--acc); box-shadow:0 -6px 24px rgba(0,0,0,.08); padding:12px 22px}
.tray .in{max-width:920px; margin:0 auto; display:flex; gap:14px; align-items:center}
.tray b{font-size:17px; white-space:nowrap} .tray span{flex:1 1 120px; min-width:0; font-size:15.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tray .acts{margin-left:auto; display:flex; gap:10px; flex:none}
body.has-tray{padding-bottom:92px}
@media (max-width:560px){.tray span{display:none}}

/* ---- tile previews: a miniature of each view, real values, not icons ---- */
.organize li{padding:12px 12px 16px}
.organize li a{display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; color:var(--ink); width:100%}
.organize li:hover{border-color:var(--acc)}
.mini{width:100%; min-width:0; height:96px; border:1px solid var(--line); border-radius:8px; background:var(--bg2); overflow:hidden; padding:8px 10px; text-align:left; font-size:12.5px; line-height:1.3; color:var(--ink2); margin-bottom:8px; display:flex; flex-direction:column; justify-content:center; gap:0}
.mini .l{display:flex; gap:6px; align-items:center; height:26px; border-bottom:1px solid var(--line2); white-space:nowrap; overflow:hidden; min-width:0}
.mini .l:last-child{border-bottom:none}
.mini .l>*{min-width:0; overflow:hidden; text-overflow:ellipsis}
.mini .l b{color:var(--ink); font-weight:600; font-size:12.5px; display:inline; flex:1 1 auto}
.mini .l .c{flex:0 0 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; max-width:46%}
.mini .l b{flex:1 1 40%}
.mini .t{width:40px; flex:none; color:var(--ink2)}
.mini .c{display:inline-block; padding:1px 6px; border-radius:4px; font-weight:600; font-size:11.5px}
.mini .hi{background:#F6D2CF; color:#8C2F1F} .mini .lo{background:#D9E7F3; color:#1C4F72} .mini .ok{background:#E6F3EC; color:#1B6B4A} .mini .w{background:#FBF2E0; color:#7A5410}
.mini .cells{display:grid; grid-template-columns:44px repeat(4,minmax(0,1fr)); gap:3px; align-items:center}
.mini .cells span{text-align:center; padding:4px 0; border-radius:4px; font-weight:600; font-size:12px; min-width:0; overflow:hidden}
.mini .cells .n{text-align:left; font-weight:500; color:var(--ink); font-size:11.5px; padding:0; white-space:nowrap; text-overflow:ellipsis}
.mini .dots{display:flex; align-items:flex-start; gap:0; margin-top:8px; position:relative}
.mini .dots::before{content:""; position:absolute; left:6px; right:6px; top:6px; height:2px; background:var(--line)}
.mini .dots i{flex:1; min-width:0; display:block; font-style:normal; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:6px}
.mini .dots i::before{content:""; display:block; width:11px; height:11px; border-radius:50%; background:var(--bg); border:3px solid var(--line); margin-bottom:4px; position:relative}
.mini .dots i.f::before{border-color:var(--acc)} .mini .dots i.ch::before{border-color:#8C2F1F; background:#F6D2CF} .mini .dots i.s::before{border-color:#1B6B4A; background:#E6F3EC}
.mini .two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px}
.mini .two div{border:1px solid var(--line); border-radius:5px; padding:6px 7px; background:var(--bg); font-size:12px; line-height:1.3; min-width:0; overflow:hidden; max-height:78px}
.mini .two b{display:block; font-size:11.5px; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mini .two span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mini .srch{display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 8px; color:var(--ink); font-weight:600}
.mini .ln{height:6px; background:var(--line); border-radius:3px; margin:6px 0}
.mini .money{display:flex; justify-content:space-between; gap:6px; height:26px; align-items:center; border-bottom:1px solid var(--line2); white-space:nowrap; min-width:0}
.mini .money:last-child{border-bottom:none} .mini .money span{overflow:hidden; text-overflow:ellipsis} .mini .money b{color:var(--ink); flex:none}
.mini .ln{height:6px; background:var(--line); border-radius:3px; margin:5px 0}
.mini .srch{height:28px; padding:0 8px}

.rows2 .r.nodate{grid-template-columns:minmax(0,1fr) auto}

/* by-test: same-day repeat sits against its sibling with a dashed seam; time under the date */
.res span small{display:block; font-size:12px; color:var(--ink2); line-height:1.2}
.res.rep{margin-left:-2px; border-left:2px dashed var(--line)}
/* calendar: time under the test name so the value stays on the first line */
.cal .val>span{display:flex; flex-direction:column; line-height:1.25} .cal .val>span small{display:block; margin:0}
.cal .val{align-items:flex-start}

/* ---- one navigation on every page ---- */
.top .in{flex-wrap:wrap; row-gap:8px}
.gnav{margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.gnav a{display:inline-flex; align-items:center; min-height:44px; padding:0 13px; border-radius:10px; font-size:16px; font-weight:500; color:var(--ink2); text-decoration:none}
.gnav a:hover{color:var(--ink); background:var(--bg2)}
.gnav a.on{color:var(--ink); background:var(--bg2); font-weight:600}
/* leaving the example is a way out, not another destination */
.gnav a.leave{margin-left:6px; border:2px solid var(--line); font-size:15px; padding:0 12px}
.gnav a.leave:hover{border-color:var(--ink)}
@media (max-width:640px){ .gnav a.leave{margin-left:0; border:0; padding:0 8px} }
@media (max-width:640px){
  .top .in>*{order:0} .top #tmode{margin-left:auto}
  .gnav{order:1; margin-left:0; width:100%; gap:0; justify-content:space-between}
  .gnav a{padding:0 8px; font-size:15px; min-height:40px}
}
/* ---- previous / next inside a section ---- */
.pn{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin:34px auto 0; padding:20px 24px 26px; border-top:1px solid var(--line)}
.pn a{text-decoration:none; color:var(--ink); font-weight:600; font-size:17px; line-height:1.3; display:flex; flex-direction:column; gap:3px; min-height:44px; justify-content:center}
.pn a small{font-weight:400; font-size:14px; color:var(--ink2)}
.pn a:hover{color:var(--acc)}
.pn .next{text-align:right; align-items:flex-end}
.pn .all{font-weight:500; color:var(--ink2); padding:0 14px; border:2px solid var(--line); border-radius:10px; min-height:44px; justify-content:center}
.pn .all:hover{border-color:var(--ink); color:var(--ink)}
@media (max-width:560px){.pn{grid-template-columns:1fr 1fr} .pn .all{grid-column:1 / -1; justify-self:center}}


/* ---- where you are: breadcrumbs on inner content pages (never beside a Back link) ---- */
.crumbs{max-width:880px;margin:0 auto;padding:8px 24px 0;display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:16.5px;color:var(--ink2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:8px;color:var(--ink2);text-decoration:none;font-weight:500}
.crumbs a:hover{color:var(--ink);background:var(--bg2)}
.crumbs .sep{opacity:.5;padding:0 2px;font-size:18px}
.crumbs b{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--ink);font-weight:600}
@media(max-width:640px){
  .crumbs{padding:6px 16px 0}
  .crumbs a,.crumbs .sep,.crumbs b{display:none}
  .crumbs a.parent{display:inline-flex;padding-left:0}
  .crumbs a.parent::before{content:"\2039";font-size:24px;line-height:1;margin-right:7px}
}
/* phone fixes: (1) `.top .in>*{order:0}` out-ranked `.gnav{order:1}`, dropping the theme button to a
   third row; (2) `.pn` stacked three rows because "All" sits between Previous and Next in the markup. */
@media(max-width:640px){.top .in>.gnav{order:1}}
@media(max-width:560px){.pn .all{order:3}}

/* ---- dark mode: everything that was only ever tuned for a white page ---- */
:root{--flag:#8C2F1F; --flag-lo:#1C4F72; --on-acc:#FFFFFF}
:root[data-theme="dark"]{--flag:#E28D89; --flag-lo:#9CC4E4; --on-acc:#141513}
/* text on the accent: the accent is a light blue in dark mode, so the text on it goes dark */
:root[data-theme="dark"] .btn,:root[data-theme="dark"] .btn:hover{color:var(--on-acc)}
:root[data-theme="dark"] .btn.sec,:root[data-theme="dark"] .btn.sec:hover{color:var(--ink)}
:root[data-theme="dark"] .btn.quiet{color:var(--ink2)}
:root[data-theme="dark"] .btn.quiet:hover{color:var(--flag); border-color:var(--flag)}
:root[data-theme="dark"] .actions a.primary{color:var(--on-acc)}
:root[data-theme="dark"] .actions a.primary .d{color:rgba(20,21,19,.78)}
:root[data-theme="dark"] .join,:root[data-theme="dark"] .join h2{color:var(--on-acc)}
:root[data-theme="dark"] .join p,:root[data-theme="dark"] .join .price{color:rgba(20,21,19,.8)}
:root[data-theme="dark"] .join .price b{color:var(--on-acc)}
:root[data-theme="dark"] .join .btn{background:#141513; color:#ECEDEE; border-color:#141513}
:root[data-theme="dark"] .join .btn:hover{background:#000; color:#fff; border-color:#000}
:root[data-theme="dark"] .viewsw button[aria-pressed="true"]{color:var(--on-acc)}
:root[data-theme="dark"] .steps .n,:root[data-theme="dark"] .gsteps li::before,:root[data-theme="dark"] .people a .av,
:root[data-theme="dark"] .stepbar span.on b,:root[data-theme="dark"] .stepbar span.done b,:root[data-theme="dark"] .amend.on{color:var(--on-acc)}
/* icons drawn in navy or green for a white page */
:root[data-theme="dark"] .steps .pic{stroke:var(--acc)}
:root[data-theme="dark"] .steps .pic circle[fill="#35506B"]{fill:var(--acc)}
:root[data-theme="dark"] svg[stroke="#1B6B4A"]{stroke:var(--ok)}
/* red and blue readings written directly on the page */
:root[data-theme="dark"] :is(.readout .hi,.ba .before .lab,.vs .num b,.daydetail .dr.hi .v,.oor .what.hi b,.phr .c b,.stop.changed b,.files .st.bad){color:var(--flag)}
:root[data-theme="dark"] :is(.readout .lo,.daydetail .dr.lo .v,.oor .what.lo b){color:var(--flag-lo)}
:root[data-theme="dark"] .chart .band{fill:#16302478} :root[data-theme="dark"] .chart .offband{fill:#3A201B55} :root[data-theme="dark"] .chart .thr{stroke:#5FB08A}
:root[data-theme="dark"] .chart .lb.hi{fill:var(--flag)} :root[data-theme="dark"] .chart .lb.lo{fill:var(--flag-lo)}
/* chips whose background already goes dark keep readable text */
:root[data-theme="dark"] :is(.res.hi b,.cal .val.hi b,.flow td .hi){color:#F2A7A2}
:root[data-theme="dark"] :is(.res.lo b,.cal .val.lo b,.flow td .lo){color:#9CC4E4}
:root[data-theme="dark"] :is(.res.v b,.cal .val.v b,.flow td .v){color:#8FD4B0}
:root[data-theme="dark"] .bill tr.hi td{background:#2A2317}
/* section headings inside a .list are h2 (heading order); styled as before */
.list h2{font-size:20px; margin-bottom:6px}


/* ---- never an empty page: the gate message + a grey Example (2026-09-10) ---- */
.gate{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding:20px 22px; margin:6px 0 10px;
  background:var(--acc-bg); border:1px solid var(--line); border-left:4px solid var(--acc); border-radius:var(--r)}
.gate p{margin:0; flex:1 1 300px; font-size:19px; font-weight:600; color:var(--ink); line-height:1.4}
.gate p small{display:block; font-size:16px; font-weight:400; color:var(--ink2); margin-top:4px}
.gate .btns{display:flex; gap:10px; flex-wrap:wrap}
.gate .btn{min-height:54px; padding:0 22px; font-size:18px}
.example{position:relative; margin:30px 0 8px; padding-top:6px}
.example>.lbl{position:absolute; top:-8px; left:14px; z-index:1; font-size:12.5px; font-weight:700; letter-spacing:normal; text-transform:none;
  color:var(--ink2); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 12px}
.example>.ghost{opacity:1; filter:none; pointer-events:none; user-select:none; border:1px dashed var(--line); border-radius:var(--r); padding:16px; background:var(--bg)}
.example>.ghost>*:first-child{margin-top:0}
.example>.ghost .btn{pointer-events:none}
:root[data-theme="dark"] .example>.ghost{opacity:1}
.vsum:empty{display:none}
.vlist .n.soon{color:var(--ink2); background:var(--bg2); border:1px solid var(--line)}
.tl .ty,.tl .who{display:block}
.crumbs b{white-space:normal}
/* Open a page: the picker */
.pick{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:16px 0 6px}
.pick label{display:block; font-size:15px; font-weight:600; color:var(--ink2); margin-bottom:6px}
.pick select,.pick input{font:18px var(--sans); color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:8px; padding:12px 14px; min-height:54px}
.pick select{max-width:100%; min-width:0}
.pick>div{flex:1 1 320px; min-width:0}
.pick>div.n{flex:0 0 130px}
.pageframe{background:var(--bg2); border-radius:6px; padding:18px; display:grid; gap:10px}
.pageframe i{display:block; height:12px; border-radius:6px; background:var(--line)}
.pageframe i.w{width:60%} .pageframe i.h{height:18px; width:40%; background:var(--ink2); opacity:.5}

/* =====================================================================================
   Goyo.Health look, v7 (10 Sep 2026): "the chart, kept by Goyo"
   Three faces: Literata for headings and for the record's own words (quoted, italic);
   Atkinson Hyperlegible Next for everything read at speed (drawn for ageing eyes);
   IBM Plex Mono for every number and page reference, as printed.
   Surfaces: white pages, hairline rules, near-square corners: a ledger, not a startup.
   Signature: index tabs in the top bar; a gold rule before section labels; the halo.
   ===================================================================================== */
:root{
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#FFFFFF; --bg2:#F3F5F3; --line:#CBD1CD; --line2:#E4E8E5;
  --ink:#121A24; --ink2:#4E5966;
  --acc:#35506B; --acc-h:#243A50; --acc-bg:#E8EEF4; --acc-deep:#1E3650;
  --gold:#8A6A1E; --gold-l:#E8C46A;
  --r:4px;
}
:root[data-theme="dark"]{
  --bg:#17181B; --bg2:#1F2125; --line:#3A3E45; --line2:#2A2D32;
  --ink:#ECEDEE; --ink2:#B4B7BC;
  --acc:#9BB8D6; --acc-h:#B6CDE6; --acc-bg:#1F2A36;
  --card:#1F2125; --ring:rgba(155,184,214,.34); --acc-deep:#101B29;
  --gold:#D6B76C; --gold-l:#E8C46A;
}

/* ---- type ---- */
body{font:18.5px/1.55 var(--sans)}
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:clamp(36px,5vw,50px); line-height:1.1}
h2{font-size:30px; line-height:1.2}
h3{font-size:22px; line-height:1.3; font-weight:500}
.head .plain,.open .say,.signin .say{font-size:19px}
.logo b{font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.01em}
/* card and row titles take the serif at a quieter weight */
.sit .h,.actions .h,.vlist .t b,.list h3,.list h2,.steps h3,.plan .price b,.deadline>div>b,.offer .t b,.nudge .t b,.gate p{font-family:var(--serif); font-weight:500}
.actions .h{font-size:21px} .vlist .t b{font-size:19px} .sit .h{font-size:23px} .gate p{font-size:20px}
.plan .price b{font-size:52px; font-weight:600}
/* the record's own words are quoted in the serif */
.so .q,.phr .q,.vs .say,.ba p,.oor .said,.painday i,.mini .two span{font-family:var(--serif); font-style:italic}
.so .q{font-size:17.5px} .ba p{font-size:17px; line-height:1.6}
/* every number as printed: mono, tabular */
.flow td span,.vt td,.res b,.cal .val b,.daydetail .dr .v,.tl .tm,.rows2 .d,.files .s,.status b,.vsum b,.painday b,.readout b,.readout .hi,.readout .lo,.oor .what b,
.flow thead th .d,.cal .day .n,.confirm .v b,.limits b,.phr .n,.plan .price b,.offer .p,.join .price b,.bill td,.bill td b,.stop b,.pick input{font-family:var(--mono); font-variant-numeric:tabular-nums}
.tl .tm{font-size:14.5px; padding-top:4px} .rows2 .d,.files .s{font-size:14.5px}
.status b,.vsum b{font-weight:500} .confirm .v b{font-size:18px; font-weight:500}
.tag,.so .chip,.vlist .n,.stepbar span,.files .st,.mini .c{font-family:var(--sans)}
/* section labels: gold small caps with a short gold rule */
.vgroup h2,.organize .grp,.flow thead th.mon,.sit .k,.mlab,.ba .lab,.deadline .w,.vt th,.bill thead th,.vs .r.h,.cal .wd span,.picker .pd{font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:normal; text-transform:none}
.vgroup h2,.organize .grp{display:flex; align-items:center; gap:9px; color:var(--gold); margin-bottom:10px}
.vgroup h2::before,.organize .grp::before{content:""; width:20px; height:2px; background:var(--gold); flex:none}
.organize .grp{justify-content:center}

/* ---- the top bar: index tabs on a folder ---- */
.top{background:var(--bg2); border-bottom:1px solid var(--line)}
.top .in{max-width:920px; align-items:flex-end; padding:12px 24px 0}
.logo{padding-bottom:12px; align-self:center}
.top button{align-self:center; margin-bottom:6px; border:1px solid var(--line); border-radius:var(--r); min-height:42px; font-size:15px; background:var(--bg)}
.gnav{gap:3px; align-self:flex-end}
.gnav a{min-height:46px; padding:0 16px; border:1px solid transparent; border-bottom:0; border-radius:6px 6px 0 0; font-size:16px; font-weight:500; margin-bottom:-1px; color:var(--ink2); background:transparent}
.gnav a:hover{background:var(--bg); border-color:var(--line); color:var(--ink)}
.gnav a.on{background:var(--bg); border-color:var(--line); border-bottom:1px solid var(--bg); color:var(--ink); font-weight:700; box-shadow:inset 0 3px 0 var(--gold)}
.cma{background:var(--bg); border-bottom:1px solid var(--line2); font-size:14.5px}
@media (max-width:640px){
  .top .in{padding:10px 16px 0}
  .logo{padding-bottom:8px}
  .gnav{width:100%; justify-content:flex-start; gap:2px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .gnav a{padding:0 12px; font-size:15px; min-height:42px; white-space:nowrap}
}
.crumbs{max-width:920px; font-size:16px}

/* ---- surfaces: hairlines, near-square ---- */
.list,.files,.vlist,.tl,.rows2,.confirm,.vs,.oor,.vt,.flow,.cal,.theme,.picker,.bill,.so .card,.marker,.change,.journey,.chart,.sit a,.actions a,.choices label,
.steps li,.organize li,.mini,.res,.painday,.ba>div,.quiet,.explain,.need,.signin .why,.status,.example>.ghost,.drop{border-width:1px}
.drop{border-style:dashed; border-width:2px}
.daydetail,.plan{border-width:2px}
.btn{border-radius:var(--r); font:600 19px/1 var(--sans)}
.btn.sec{border-width:1px; border-color:var(--ink)}
.btn.small,.amend,.dayctl button,.daydetail .dh button{border-radius:var(--r)}
.top .help,.people a,.stepbar span,.viewsw button,.pn .all{border-radius:var(--r); border-width:1px}
.stepbar span.on{border-color:var(--acc)}
.viewsw button{font-weight:600}
.tag,.so .chip,.vlist .n,.vlist .n.soon,.daydetail .dr .fl,.mini .c,.legend .hi,.legend .lo,.legend .v{border-radius:3px}
input[type=text],textarea,.tools select,.tools input[type=search],.picker .ph input,.pick select,.pick input{border-width:1px; border-radius:var(--r); font-family:var(--sans)}
input[type=text]:focus,textarea:focus{border-color:var(--acc); box-shadow:0 0 0 2px var(--acc-bg)}
/* accent-bar panels become flat tinted sheets */
.nudge,.offer,.gate,.picked,.notice,.deadline div,.confirm .row.warn{border-left-width:1px}
.gate{background:var(--acc-bg); padding:22px 24px}
.gate .btn{border-radius:var(--r)}
.example>.lbl{font-family:var(--sans); letter-spacing:.12em; border-radius:3px}
/* lists: the row rule is the design */
.list>div,.vlist a,.tl .e,.rows2 .r,.files .r,.confirm .row,.so .row,.oor .r,.phr{border-bottom-color:var(--line2)}
.tlday{background:var(--bg2); border-top:1px solid var(--line); font-family:var(--serif)}
.tlday b{font-size:18px; font-weight:600}
.flow thead th,.vt th,.bill thead th{background:var(--bg2)}
.flow th.rl{font-family:var(--sans)}

/* ---- the front door masthead: navy, the mark, the halo ---- */
.mast{background:var(--acc-deep); color:#fff; position:relative; overflow:hidden}
.mast .wrap{position:relative; padding-top:54px; padding-bottom:50px; z-index:1}
.mast .mark{width:88px; height:88px; display:block; margin-bottom:24px}
.mast .eyebrow{font-size:13px; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--gold-l); margin:0 0 14px}
.mast h1{color:#fff; font-size:clamp(38px,5.6vw,58px); line-height:1.06; max-width:17ch; margin:0 0 18px; letter-spacing:-.015em; text-wrap:balance}
.mast .say{color:rgba(255,255,255,.84); font-size:20px; line-height:1.5; max-width:50ch; margin:0}
.mast .halo{position:absolute; right:-140px; top:-190px; width:620px; height:620px; border-radius:50%; border:30px solid rgba(232,196,106,.13); pointer-events:none}
.mast .halo::after{content:""; position:absolute; inset:60px; border-radius:50%; border:2px solid rgba(232,196,106,.18)}
@media (max-width:640px){.mast .wrap{padding-top:36px; padding-bottom:36px} .mast .mark{width:64px; height:64px; margin-bottom:18px} .mast .halo{right:-260px; top:-300px}}
.open{padding:40px 0 36px}
.open h1{margin:0 0 8px}
.sit a{gap:8px; padding:22px 22px 20px}
.sit .go{color:var(--acc); font-weight:600}
.steps{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps .n{background:var(--acc); font-family:var(--mono)}
.join{border-radius:var(--r); background:var(--acc-deep)}
:root[data-theme="dark"] .join{background:var(--acc)}
.foot{font-size:15px}
.foot .in{max-width:920px}

/* ---- guides: measure and rhythm ---- */
.gsteps li::before{font-family:var(--mono); font-weight:500; background:var(--acc)}
.deadline div{background:#FBF2E0}
:root[data-theme="dark"] .deadline div{background:#2A2317}
.sources{font-size:14.5px}

/* ---- dark: text on the deep navy band ---- */
:root[data-theme="dark"] .mast{background:var(--acc-deep)}

/* ---- examples must be readable (10 Sep, 17:00): full colour, labelled, framed; not interactive ---- */
.example>.lbl{color:var(--gold); border-color:var(--gold); background:var(--bg); font-size:12.5px}
.example>.ghost{border:1px dashed var(--gold); padding:18px 18px 16px; position:relative}
.example>.ghost::after{content:"Example: a sample record, not a real patient. Sign in to see your own."; display:block; margin-top:14px; padding-top:10px; border-top:1px dashed var(--line); font:15px var(--sans); color:var(--ink2)}
.gate p small{font-family:var(--sans)}

/* ---- the example case: a bar under the disclaimer on every page while browsing it ---- */
.exbar{background:var(--bg2); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(32,59,85,.04)}
.exbar .in{max-width:920px; margin:0 auto; padding:9px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:15px; color:var(--ink2)}
.exbar .t{flex:1 1 380px} .exbar .t b{color:var(--ink); font-family:var(--serif); font-size:16px; margin-right:5px}
.exbar .a{display:flex; gap:14px; align-items:center; flex-wrap:wrap} .exbar .a .btn.small{min-height:38px; font-size:15px; padding:0 14px}
.example-mode .files .acts,.example-mode #continue,.example-mode [data-run],.example-mode #signout{display:none!important}
@media (max-width:640px){.exbar .in{padding:10px 16px}}
/* front door: the masthead actions */
.mast .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.mast .btn{background:#fff; color:var(--acc-deep); border-color:#fff} .mast .btn:hover{background:#EEF2F6; color:var(--acc-deep)}
.mast .btn.sec{background:transparent; color:#fff; border-color:rgba(255,255,255,.7)} .mast .btn.sec:hover{background:rgba(255,255,255,.12); color:#fff}
:root[data-theme="dark"] .mast .btn{background:var(--acc); color:var(--on-acc); border-color:var(--acc)}
:root[data-theme="dark"] .mast .btn.sec{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)} :root[data-theme="dark"] .mast .btn.sec:hover{background:rgba(255,255,255,.12); color:#fff}

/* Which remedy, and when: the roads */
.roads .grp{font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--ink2)}
.roads .viewsw{gap:8px; margin-bottom:14px}
.roads .viewsw button{font-size:15.5px; min-height:40px; padding:7px 14px}
.lanes{display:grid; gap:10px; margin:0 0 6px}
.lane{display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; padding:12px 0; border-top:1px solid var(--line2)}
.lane:last-child{border-bottom:1px solid var(--line2)}
.lane .lh b{display:block; font-family:var(--serif); font-weight:500; font-size:18px; line-height:1.2}
.lane .lh span{display:block; font-size:14px; color:var(--ink2); margin-top:3px}
.lane .chips{display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start}
.lane .chips a{display:flex; flex-direction:column; gap:2px; min-width:0; max-width:100%; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink); text-decoration:none; font-size:14.5px; line-height:1.3}
.lane .chips a b{font-weight:600}
.lane .chips a span{font-family:var(--mono); font-size:12.5px; color:var(--gold); letter-spacing:.01em}
.lane .chips a:hover{border-color:var(--acc); background:var(--bg2)}
@media (max-width:640px){.lane{grid-template-columns:1fr; gap:8px}}
.road{border:1px solid var(--line); border-radius:var(--r); background:var(--card); padding:18px 20px 14px; margin:14px 0}
.road .rh{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:start; margin-bottom:10px}
.road .rh .n{width:34px; height:34px; border-radius:50%; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font:600 16px var(--sans); margin-top:2px}
:root[data-theme="dark"] .road .rh .n{color:var(--on-acc)}
.road h3{font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.25; margin:0}
.road .clock{font-family:var(--mono); font-size:13.5px; color:var(--gold); margin:5px 0 0; letter-spacing:.01em}
.road dl{margin:0; display:grid; gap:9px}
.road dl>div{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px}
.road dt{font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--ink2); padding-top:3px}
.road dd{margin:0; font-size:16.5px; line-height:1.5; color:var(--ink)}
.road dl>.we{border-top:1px dashed var(--line); padding-top:9px}
.road dl>.we dt{color:var(--gold)}
.road .lk{margin:12px 0 0; font-size:15.5px}
.road .lk a{margin-right:16px}
@media (max-width:640px){.road dl>div{grid-template-columns:1fr; gap:2px} .road{padding:16px 16px 12px}}

/* Confirm walkthrough: tick lists, add rows, section labels */
.page .grp{font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--ink2); margin:0 0 8px}
.ticks{display:grid; gap:8px}
/* the other wordings the chart used for the same problem */
.ticks .tk .t .also{display:block; margin-top:4px; color:var(--ink2); font-size:14px; line-height:1.5}
.tk{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:12px; align-items:start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); cursor:pointer}
.tk:hover{border-color:var(--acc)}
.tk input[type=checkbox]{width:18px; height:18px; margin:3px 0 0; accent-color:var(--acc)}
.tk .t b{display:block; font-size:16.5px; font-weight:600; line-height:1.3}
.tk .t span{display:block; font-size:14px; color:var(--ink2); margin-top:2px}
.tk .prim{font-size:13.5px; color:var(--ink2); display:flex; align-items:center; gap:5px; white-space:nowrap; padding-top:3px}
.tk .prim input{accent-color:var(--gold); margin:0}
.addrow{display:flex; gap:8px; margin-top:8px; align-items:center}
.addrow input[type=text]{flex:1 1 auto; min-width:0; font-size:16px; padding:9px 12px}
.btn.small{min-height:40px; padding:0 14px; font-size:15px}
.example-mode .addrow{display:none}
@media (max-width:640px){.tk{grid-template-columns:22px minmax(0,1fr)} .tk .prim{grid-column:2}}

/* The top bar stays in view while the page scrolls (JC) */
.top{position:sticky; top:0; z-index:60; box-shadow:0 1px 0 var(--line)}
@media (max-width:640px){.top{position:static}}

/* Example pages use one compact context line. Case selection belongs in the examples library,
   where the choices have explanations; repeating a dropdown above every view is noise. */

/* what each file you add is: a guess you can change before it uploads */
.files .r .kd{flex:0 0 auto; display:flex; align-items:center}
.files .r select.kind{font:15px var(--sans); color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r); padding:6px 9px; min-height:38px; max-width:100%}
.files .r span.kind{font-size:15px; color:var(--ink2)}
@media(max-width:640px){ .files .r .kd{flex:1 1 100%} .files .r select.kind{width:100%} }


/* the greyed example: it is a picture of what the page shows, not the person's own record */
.example .ghost{opacity:.62; filter:saturate(.55)}
:root[data-theme="dark"] .example .ghost{opacity:.55; filter:saturate(.5)}
.example .ghost, .example .ghost *{cursor:default}

/* ---- deleting: the one place on the site where a button destroys something ---- */
.vgroup.danger{border:2px solid var(--flag,#8C2F1F); border-radius:var(--r); padding:18px 20px 20px; margin-top:26px}
.vgroup.danger h2{margin-top:0}
.vgroup.danger h2::before{content:none}
.confirmbox{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px}
.confirmbox label{font-size:16px; color:var(--ink2)}
.confirmbox input{font:500 17px var(--sans); padding:12px 14px; min-height:52px; border:2px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--ink); width:190px}
.confirmbox input:focus{outline:3px solid var(--ink); outline-offset:1px}
.btn.danger{background:#8C2F1F; border-color:#8C2F1F; color:#fff}
.btn.danger:hover{background:#74261a; border-color:#74261a}
.btn.danger:disabled{opacity:.45; cursor:not-allowed}
:root[data-theme="dark"] .vgroup.danger{border-color:#C4614B}
:root[data-theme="dark"] .btn.danger{background:#A33B27; border-color:#A33B27}

/* ---- the guideline beside the record ---- */
.notice{border:2px solid var(--line); border-left:6px solid #8C6D1F; border-radius:var(--r);
  padding:14px 18px; margin:0 0 20px; background:var(--bg2)}
.notice p{margin:0; font-size:16.5px; line-height:1.55}
.gl{border:2px solid var(--line); border-radius:var(--r); padding:16px 18px; margin-bottom:12px; background:var(--bg)}
.gl.none{border-style:dashed}
.gl .glh{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap}
.gl .glh b{font-size:17.5px; font-weight:600; line-height:1.45; flex:1 1 340px}
.gl .glw{margin-top:8px; color:var(--ink2); font-size:16px; line-height:1.55}
.gl .gls{margin-top:10px; font-size:14.5px; color:var(--ink2); line-height:1.6}
.gl .gls a{color:var(--ink2)}
.gl .chip.ok{background:#E6F3EC; color:#1B6B4A; border-color:#1B6B4A}
.gl .chip.none{background:var(--bg2); color:var(--ink2)}
.gl .glf{margin-top:12px; border-top:1px solid var(--line); padding-top:10px}
.gl .glf .t{font-size:13.5px; letter-spacing:normal; text-transform:none; color:var(--ink2); margin-bottom:6px}
.gl .glf.empty{color:var(--ink2); font-size:15.5px; line-height:1.55}
.gl .glf .r{display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line2);
  text-decoration:none; color:inherit}
.gl .glf .r:last-child{border-bottom:0}
.gl .glf .r:hover{background:var(--bg2)}
.gl .glf .r .d{flex:0 0 76px; font-size:14.5px; color:var(--ink2); font-weight:600}
.gl .glf .r .m{flex:1 1 auto; font-size:15.5px; line-height:1.5}
.gl .glf .r .go{color:var(--ink2)}
.picker{display:flex; align-items:center; gap:10px; margin:0 0 18px; flex-wrap:wrap}
.picker label{font-size:16px; color:var(--ink2)}
.picker select{font:500 16px var(--sans); padding:10px 12px; min-height:48px; border:2px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--ink)}
:root[data-theme="dark"] .gl .chip.ok{background:#16302478; color:#5FB08A; border-color:#2E6B4E}
:root[data-theme="dark"] .notice{border-left-color:#C9A84C}

/* ---- the journey: where you are, and what comes next ---- */
.jline{display:flex; gap:0; overflow-x:auto; margin:0 0 24px; padding:4px 0 10px; scrollbar-width:thin;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  /* the line runs past the edge on purpose; the fade says so */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
.jline .st{flex:1 0 140px; scroll-snap-align:center; position:relative; background:none; border:0; padding:22px 10px 10px; cursor:pointer;
  text-align:left; font:inherit; color:var(--ink2); border-radius:10px}
.jline .st::before{content:''; position:absolute; top:10px; left:0; right:0; height:2px; background:var(--line)}
.jline .st:first-child::before{left:50%}
.jline .st:last-child::before{right:50%}
.jline .st .dot{position:absolute; top:5px; left:50%; margin-left:-6px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line2)}
.jline .st .d{display:block; font-size:13px; letter-spacing:normal; text-transform:none; color:var(--ink2)}
.jline .st .n{display:block; font-size:15px; line-height:1.35; margin-top:3px}
.jline .st:hover{background:var(--bg2)}
.jline .st.on{color:var(--ink)}
.jline .st.on .dot{background:var(--ink); border-color:var(--ink); transform:scale(1.25)}
.jline .st.on .n{font-weight:600}
.clockline{margin:6px 0 0; font-size:16px; color:var(--ink2)}
.jrows{display:grid; gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:var(--r); overflow:hidden; margin-bottom:6px}
.jr{display:flex; gap:14px; padding:13px 16px; background:var(--bg); flex-wrap:wrap}
.jr .jk{flex:0 0 220px; font-weight:600; font-size:16.5px}
.jr .jv{flex:1 1 300px; font-size:16px; line-height:1.55}
.jr .jv b{display:block; color:var(--ink)}
.jr .jv span{display:block; color:var(--ink2); margin-top:2px}
.jlist{display:grid; gap:8px}
.ji{border:2px solid var(--line); border-radius:var(--r); padding:13px 16px; background:var(--bg)}
.ji .t{font-size:16.5px; font-weight:600; line-height:1.5; display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.ji .t>span.chip{flex:0 0 auto}
.ji .w{margin-top:6px; color:var(--ink2); font-size:15.5px; line-height:1.55}
.ji.norm{border-style:dashed}
.ji.watch.violation{border-color:#8C2F1F}
.chip.rule{background:#E6F3EC; color:#1B6B4A; border-color:#1B6B4A}
.chip.norm{background:var(--bg2); color:var(--ink2)}
.chip.bad{background:#F6D2CF; color:#8C2F1F; border-color:#8C2F1F}
.chip.warn{background:#FAEFD6; color:#7A5A16; border-color:#8C6D1F}
.chip.clock{background:var(--bg2); color:var(--ink2)}
.src{display:block; margin-top:5px; font-size:14px; color:var(--ink2)}
.src a{color:var(--ink2)}
.jgood{margin:6px 0 0 0; padding-left:22px}
.jgood li{font-size:16px; line-height:1.6; color:var(--ink2); margin-bottom:4px}
details.jt{border:2px solid var(--line); border-radius:var(--r); margin-bottom:10px; background:var(--bg)}
details.jt>summary{cursor:pointer; padding:16px 18px; list-style:none; display:flex; flex-direction:column; gap:3px}
details.jt>summary::-webkit-details-marker{display:none}
details.jt>summary b{font-size:18px}
details.jt>summary span{font-size:15.5px; color:var(--ink2)}
details.jt[open]>summary{border-bottom:1px solid var(--line)}
details.jt .para{margin:12px 18px 0; font-size:15.5px; color:var(--ink2)}
.jns{padding:8px 18px 4px}
.jn{position:relative; padding:14px 0 14px 26px; border-left:2px solid var(--line2)}
.jn::before{content:''; position:absolute; left:-7px; top:20px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--ink2)}
.jn:last-child{border-left-color:transparent}
.jnh{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.jnh b{font-size:17px; line-height:1.45}
.jnw{margin-top:5px; font-size:15.5px; line-height:1.55; color:var(--ink2)}
.jnw .who{display:inline-block; font-weight:600; color:var(--ink); margin-right:6px}
.jbr{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
@media (max-width:720px){ .jbr{grid-template-columns:1fr} }
.jbr .br{border:2px solid var(--line); border-radius:10px; padding:11px 14px}
.jbr .br.yes{border-left:5px solid #1B6B4A}
.jbr .br.no{border-left:5px solid #8C2F1F}
.jbr .bl{font-weight:600; font-size:15.5px}
.jbr p{margin:5px 0 0; font-size:15px; line-height:1.55; color:var(--ink2)}
.jgo{display:inline-block; margin-top:8px; font-size:14.5px; font-weight:500}
.jend{display:inline-block; margin-top:8px; font-size:14.5px; color:var(--ink2)}
.jends{margin:10px 18px 16px; font-size:15.5px}
:root[data-theme="dark"] .chip.rule{background:#16302478; color:#5FB08A; border-color:#2E6B4E}
:root[data-theme="dark"] .chip.bad{background:#3A201B; color:#E2A093; border-color:#8C4536}
:root[data-theme="dark"] .chip.warn{background:#332B18; color:#D8BE79; border-color:#7A6224}
:root[data-theme="dark"] .ji.watch.violation{border-color:#8C4536}
:root[data-theme="dark"] .jbr .br.yes{border-left-color:#5FB08A}
:root[data-theme="dark"] .jbr .br.no{border-left-color:#C4614B}

/* who a guideline was written for: read before anything it says */
.applies{border:2px solid var(--line); border-left:6px solid #35506B; border-radius:var(--r);
  padding:13px 16px; margin:0 0 4px; background:var(--bg2)}
.applies .a{font-size:16.5px; line-height:1.55}
.applies .b{margin-top:6px; font-size:16px; line-height:1.55; color:var(--ink2)}
.applies .c{margin-top:8px; font-size:15px; color:var(--ink2); font-style:italic}
:root[data-theme="dark"] .applies{border-left-color:#7A9CC4}

/* what the chart is doing around a matched phrase */
.gl .glf .r .m .chip.ctx{display:inline-block; margin:0 0 4px; font-size:13.5px}
.chip.ctx.negated{background:#F6D2CF; color:#8C2F1F; border-color:#8C2F1F}
.chip.ctx.planned{background:#FAEFD6; color:#7A5A16; border-color:#8C6D1F}
.chip.ctx.family,.chip.ctx.historical,.chip.ctx.insection{background:var(--bg2); color:var(--ink2)}
/* done, but the result had not come back: not a plan, and not a finished result either */
.chip.ctx.awaiting{background:#DCE8F2; color:#22496B; border-color:#3B6489}
:root[data-theme="dark"] .chip.ctx.negated{background:#3A201B; color:#E2A093; border-color:#8C4536}
:root[data-theme="dark"] .chip.ctx.planned{background:#332B18; color:#D8BE79; border-color:#7A6224}
:root[data-theme="dark"] .chip.ctx.awaiting{background:#1C2C3A; color:#9DBFDC; border-color:#3B6489}

/* ---- documents: three dates, kept apart ---- */
.notice.bad{border-left-color:#8C2F1F}
.doc{border:2px solid var(--line); border-radius:var(--r); padding:15px 18px; margin-bottom:10px; background:var(--bg)}
.doc.held{border-color:#8C2F1F; border-style:dashed}
.doc .dh{display:flex; gap:9px; align-items:baseline; flex-wrap:wrap}
.doc .dh b{font-size:17.5px}
.doc .dm{margin-top:4px; font-size:15px; color:var(--ink2)}
.doc .dd{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px}
@media (max-width:720px){ .doc .dd{grid-template-columns:1fr} }
.doc .dc{border:1px solid var(--line2); border-radius:10px; padding:10px 12px; background:var(--bg2)}
.doc .dc .l{display:block; font-size:12.5px; letter-spacing:normal; text-transform:none; color:var(--ink2)}
.doc .dc b{display:block; font-size:16.5px; margin-top:3px}
.doc .dc b.unk{color:var(--ink2); font-weight:500; font-style:italic}
.doc .dc .n{display:block; margin-top:3px; font-size:13.5px; color:var(--ink2)}
.doc .dflag{margin-top:10px; border-left:5px solid var(--line); padding:9px 13px; background:var(--bg2); border-radius:0 10px 10px 0}
.doc .dflag.identity{border-left-color:#8C2F1F}
.doc .dflag.version{border-left-color:#35506B}
.doc .dflag b{display:block; font-size:16px}
.doc .dflag span{display:block; margin-top:3px; font-size:15px; color:var(--ink2); line-height:1.55}
.doc .dacts{margin-top:12px}
:root[data-theme="dark"] .doc.held{border-color:#8C4536}
:root[data-theme="dark"] .doc .dflag.identity{border-left-color:#C4614B}

/* ---- a deadline somebody actually confirmed ---- */
.deadlines{border:2px solid var(--line); border-radius:var(--r); padding:16px 20px 18px; margin:0 0 24px; background:var(--bg)}
.deadlines h2{margin-top:0}
.deadlines h2::before{content:none}
.deadlines .plain{font-size:15.5px}
.deadlines .none{color:var(--ink2); font-style:italic; margin:8px 0 0}
.dl{border:2px solid var(--line); border-left:5px solid #35506B; border-radius:0 10px 10px 0; padding:11px 14px; margin-top:8px; position:relative}
.dl.past{border-left-color:#8C2F1F; opacity:.75}
.dl .dt{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.dl .dt b{font-size:16.5px}
.dl .dw{margin-top:4px; font-size:15px; color:var(--ink2)}
/* a card can carry more than one action now (end access, send the link again), so they sit
   in a row under the card instead of being pinned to the corner, where a second one would
   land on top of the first and on the text behind it. */
.dl .lnk{background:none; border:0; color:var(--ink2); font:500 14px var(--sans);
  cursor:pointer; text-decoration:underline; padding:4px 0; margin:8px 16px 0 0}
.dl .lnk:hover{color:var(--ink)}
.dl .lnk:focus-visible{outline:3px solid var(--ring,#35506B); outline-offset:2px; border-radius:4px}
details.dladd{margin-top:12px}
details.dladd>summary{cursor:pointer; font-weight:600; font-size:16px; padding:8px 0; list-style:none}
details.dladd>summary::-webkit-details-marker{display:none}
details.dladd>summary::before{content:'+ '; color:var(--ink2)}
.dlform{display:grid; gap:10px; margin-top:8px; max-width:520px}
.dlform label{display:grid; gap:4px; font-size:15px; color:var(--ink2)}
.dlform input{font:500 16px var(--sans); padding:11px 13px; min-height:50px; border:2px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--ink)}
.dlform input:focus{outline:3px solid var(--ink); outline-offset:1px}
:root[data-theme="dark"] .dl{border-left-color:#7A9CC4}
:root[data-theme="dark"] .dl.past{border-left-color:#C4614B}

/* the packet's choices read as a list, not as big centred tiles */
#pkchoose{grid-template-columns:1fr; gap:2px}
#pkchoose label{justify-content:flex-start; text-align:left; min-height:48px; padding:10px 12px;
  border:0; border-bottom:1px solid var(--line2); border-radius:0; gap:10px; font-size:16px}
#pkchoose label:last-child{border-bottom:0}
#pkchoose label:hover{background:var(--bg2); border-color:transparent}
#pkchoose input{width:20px; height:20px; flex:0 0 auto}

/* a regulation cited inline. Monospaced because it is a reference, not prose,
   and one size down because it should not shout over the sentence it ends. */
.gcite{font-family:var(--mono); font-size:.88em; letter-spacing:-.01em; background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:1px 5px}

/* Five steps in a three-wide grid leave two of them hanging off the left of the second row.
   Six columns with each card spanning two keeps three across and centres the last two. The one
   media query in this file, because below about 860px the grid is already one or two columns
   and the orphan problem does not exist. */
@media (min-width: 860px) {
  .steps ol { grid-template-columns: repeat(6, 1fr); }
  .steps ol > li { grid-column: span 2; }
  .steps ol > li:nth-child(4) { grid-column: 2 / span 2; }
  .steps ol > li:nth-child(5) { grid-column: 4 / span 2; }
}

/* b62 journey */
.jhide{display:none}
.jmore{margin:10px 0 2px; background:var(--card); border:1px solid var(--line); color:var(--ink);
  font:inherit; font-size:14.5px; padding:8px 14px; border-radius:10px; cursor:pointer}
.jmore:hover{border-color:var(--acc); color:var(--acc)}
.jsum{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin:12px 0 18px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg2)}
.jsum span{font-size:14.5px; color:var(--ink2)}
.jsum b{color:var(--ink); font-size:17px; font-weight:700}
.jsum .v b{color:#9D2B2B}
[data-theme="dark"] .jsum .v b{color:#E89B9B}
.jsum .a b{color:var(--gold)}
.jsum .jall{margin-left:auto; background:none; border:1px solid var(--line); color:var(--acc);
  font:inherit; font-size:14px; padding:7px 13px; border-radius:10px; cursor:pointer}
.jsum .jall:hover{border-color:var(--acc)}
.jsub{font-size:15px; color:var(--ink2); margin:-2px 0 10px}
details.jfold{border:1px solid var(--line); border-radius:var(--r); background:var(--card); margin:16px 0}
details.jfold>summary{display:block; padding:13px 15px; cursor:pointer; font-weight:650; font-size:16px;
  list-style:none; position:relative}
details.jfold>summary::-webkit-details-marker{display:none}
details.jfold>summary::marker{content:""; font-size:0}
details.jfold>summary::after{content:"+"; float:right; color:var(--ink2); font-weight:400}
details.jfold[open]>summary::after{content:"\2212"}
details.jfold[open]>summary{border-bottom:1px solid var(--line)}
details.jfold .jfn{display:inline-block; margin-left:7px; min-width:22px; padding:1px 7px; border-radius:10px;
  background:var(--bg2); color:var(--ink2); font-size:13.5px; font-weight:600; text-align:center;
  border:0; position:static; line-height:1.5}
details.jfold .jfn::before,details.jfold .jfn::after{content:none; display:none}
.jfoldin{padding:14px 15px}
.jfoldin .jgood{margin:0}
.jpick{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.jpick label{display:inline-flex; align-items:center; gap:8px; max-width:100%;
  border:1px solid var(--line); border-radius:10px; padding:9px 14px; font-size:14.5px;
  background:var(--card); cursor:pointer; line-height:1.3}
.jpick label:hover{border-color:var(--acc)}
.jpick label.on{border-color:var(--acc); background:var(--acc-bg); color:var(--ink)}
.jpick input{margin:0; accent-color:var(--acc)}
.jpar{border:1px solid var(--line); border-radius:14px; padding:18px; margin:0 0 20px; background:var(--bg2)}
.jparh{margin:0 0 6px; font-size:19px}
.jparp{margin:0 0 14px; font-size:15.5px; color:var(--ink2)}
.jlane{display:block; min-width:0; padding:14px 0; border-top:1px solid var(--line)}
.jlane:first-of-type{border-top:0; padding-top:2px}
.jlaneN{display:block; font-size:16.5px; line-height:1.35; margin:8px 0 3px}
.jlaneS{display:block; font-size:14.5px; color:var(--ink2); line-height:1.45}
.jlaneC{display:block; font-size:14.5px; color:var(--ink2); line-height:1.45; margin-top:5px}
.jlaneC b{color:var(--ink); font-weight:650}
.jbar{display:block; width:64px; height:7px; border-radius:10px; background:var(--acc); opacity:.5}
.jparact{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.jparfoot{margin:12px 0 0; font-size:14.5px; color:var(--ink2); line-height:1.5}
@media (max-width:560px){
  .jsum .jall{margin-left:0}
  .jpar{padding:14px}
}

/* b74 hero routes */
.hrlead{margin:22px 0 10px; font-size:16px; color:#C9D2DC; letter-spacing:.01em}
.hroutes{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 24px}
.hroutes a{display:inline-block; padding:9px 15px; border-radius:10px; font-size:15.5px;
  line-height:1.3; text-decoration:none; color:#FBFBFA; border:1px solid rgba(251,251,250,.32);
  background:rgba(251,251,250,.06)}
.hroutes a:hover{background:rgba(251,251,250,.14); border-color:rgba(251,251,250,.6); color:#FFFFFF}
.hroutes a:focus-visible{outline:3px solid #E8C46A; outline-offset:3px}
@media (max-width:560px){
  .hroutes{gap:8px}
  .hroutes a{font-size:15px; padding:8px 13px}
}

/* b77 hidden heading */
/* A page rendered entirely by JavaScript still needs one h1 for a screen reader
   to anchor on. This puts it in the accessibility tree without drawing it. */
.srlandmark{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}


/* ---------------------------------------------------------------------------
   A TEXT COLOUR IS ONLY RIGHT AGAINST THE BACKGROUND IT WAS PICKED FOR.

   A full audit of all 55 pages in both themes found light mode clean and five
   places failing in dark mode, every one of them the same mistake in a different
   costume: a colour written as a literal, for a background that changes with the
   theme underneath it.

     .gtwo-n          background: var(--acc)  with  color: #fff
                      --acc is a deep navy in light and a pale blue in dark, so the
                      step numbers went white-on-pale: contrast 2.05.
     .btn.danger      the dark-mode rule for .btn paints every button with the ink
                      meant to sit on the accent, and the danger button is not on the
                      accent, it is on its own red: contrast 2.80.
     .actions a.primary  the dark-mode rule assumes the accent background this element
                      does not have, so dark ink landed on the dark page: contrast 1.03,
                      which is to say the heading was not there.
     .tag.w           keeps a hardcoded cream background in both themes, but the text
                      turned light with everything else: contrast 1.81, on 161 tags.

   The rule these break is simple enough to state: if the background is a token,
   the foreground must be a token too, and it must be the token that belongs with
   it. --on-acc exists precisely so that nothing sitting on --acc has to guess.
   --------------------------------------------------------------------------- */

:root[data-theme="dark"] .gtwo-n { color: var(--on-acc); }
:root[data-theme="dark"] .btn.danger,
:root[data-theme="dark"] .btn.danger:hover { color: #fff; }
:root[data-theme="dark"] .actions a.primary { color: var(--ink); }
:root[data-theme="dark"] .actions a.primary .d { color: var(--ink2); }
:root[data-theme="dark"] .tag.w,
:root[data-theme="dark"] .so .chip.w { color: #7A5410; }