/* Shared styles for HealthOS sub-pages (about, security, terms, contact).
   Tokens mirror public/index.html so sub-pages read as the same site. */

:root{
  --porcelain:#FAFAF8;
  --porcelain-2:#F2F0E8;
  --ink:#0B1220;
  --pulse:#0A8E75;
  --mist:#5A6478;
  --faint:#8A93A3;
  --line:#E4E1D8;
  --line-dark:#22304A;
  --on-dark-body:#8FA0BE;
  --on-dark-muted:#7C8DA6;   /* 5.54:1 on ink — AA for body text */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--porcelain); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  margin:0; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:1100px;margin:0 auto;padding:0 24px;}

/* ---------- top bar ---------- */
.page-nav{border-bottom:1px solid var(--line);background:var(--porcelain);}
.page-nav .inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 0;
}
.page-nav .logo{
  font-family:var(--serif);font-size:19px;font-weight:600;
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
}
.logo-mark{width:9px;height:9px;border-radius:50%;background:var(--pulse);flex:none;}
.page-nav .back{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--pulse);text-decoration:none;
}
.page-nav .back:hover{text-decoration:underline;}

/* ---------- headings ---------- */
header.page-head{padding:64px 0 30px;border-bottom:1px solid var(--line);}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pulse);margin:0 0 16px;
}
h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(30px,5vw,44px);
  line-height:1.1;letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance;
}
.lede{font-size:17px;color:var(--mist);margin:0;max-width:62ch;}
.updated{font-family:var(--mono);font-size:12px;color:var(--faint);margin:14px 0 0;}

h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(21px,3vw,27px);
  letter-spacing:-.01em;margin:52px 0 12px;text-wrap:balance;
}
h3{font-size:17px;font-weight:600;margin:30px 0 8px;}
p{color:var(--mist);margin:0 0 15px;}
strong{color:var(--ink);font-weight:600;}
a{color:var(--pulse);text-underline-offset:2px;}
a:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;}
ul,ol{color:var(--mist);padding-left:21px;margin:0 0 15px;}
li{margin-bottom:8px;}
li::marker{color:var(--faint);}
code{
  font-family:var(--mono);font-size:.875em;background:var(--porcelain-2);
  border:1px solid var(--line);padding:1px 5px;color:var(--ink);
}
main{padding-bottom:80px;}

/* ---------- draft banner ---------- */
.draft{
  border:1px solid var(--pulse);background:#0FA98C14;
  padding:15px 17px;margin:24px 0 0;font-size:14.5px;color:var(--mist);
}
.draft strong{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pulse);margin-bottom:6px;
}

/* ---------- fact grid ---------- */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0;
}
.facts div{background:var(--porcelain);padding:17px 19px;}
.facts dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);margin:0 0 7px;
}
.facts dd{margin:0;font-size:15px;font-weight:500;color:var(--ink);line-height:1.5;}
.facts dd.mono{font-family:var(--mono);font-size:13px;font-weight:400;}

/* ---------- layered list (security) ---------- */
.layers{margin:26px 0 0;}
.layer{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:24px 0;border-top:1px solid var(--line);align-items:start;
}
.layer:last-child{border-bottom:1px solid var(--line);}
.layer .num{font-family:var(--mono);font-size:13px;color:var(--pulse);padding-top:3px;}
.layer h3{margin:0 0 6px;font-size:16.5px;}
.layer p{margin:0;font-size:14.5px;}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:24px 0;}
@media(max-width:640px){.people{grid-template-columns:1fr;}}
.person{border-top:2px solid var(--ink);padding-top:15px;}
.person .nm{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 3px;}
.person .rl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--pulse);margin:0 0 9px;
}
.person p{margin:0;font-size:14.5px;}

/* ---------- phases ---------- */
.phases{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:20px;margin:24px 0;
}
.phase{padding-top:18px;border-top:1px solid var(--line);}
.phase.on{border-top:2px solid var(--pulse);}
.phase .n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);margin-bottom:7px;
}
.phase.on .n{color:var(--pulse);}
.phase h3{font-family:var(--serif);font-size:18px;margin:0 0 6px;}
.phase p{margin:0;font-size:14px;}

/* ---------- milestones ---------- */
.track{margin:24px 0;}
.mile{
  display:grid;grid-template-columns:20px 1fr;gap:15px;
  padding:12px 0;border-bottom:1px solid var(--line);align-items:start;
}
.mile:last-child{border-bottom:none;}
.mile .tick{width:9px;height:9px;border-radius:50%;background:var(--pulse);margin-top:8px;}
.mile .tick.next{background:none;border:1.5px solid var(--mist);}
.mile b{display:block;font-size:15px;}
.mile span{font-size:14px;color:var(--mist);}

/* ---------- tables ---------- */
.scroll{overflow-x:auto;border:1px solid var(--line);margin:20px 0;}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:14.5px;}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);}
th{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);font-weight:400;
  background:var(--porcelain-2);
}
td{color:var(--mist);}
tr:last-child td{border-bottom:none;}

/* ---------- footer ---------- */
.page-footer{background:var(--ink);color:var(--porcelain);padding:46px 0 30px;}
.pf-top{
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--line-dark);
}
.pf-brand .nm{
  font-family:var(--serif);font-size:19px;font-weight:600;
  display:flex;align-items:center;gap:9px;margin-bottom:11px;
}
.pf-brand p{color:var(--on-dark-body);font-size:13px;margin:0;line-height:1.7;}
.pf-brand .cin{font-family:var(--mono);font-size:12px;}
.pf-links{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.pf-links a{color:var(--on-dark-body);font-size:14px;text-decoration:none;}
.pf-links a:hover{color:var(--porcelain);}
.pf-bottom{
  padding-top:22px;font-size:12.5px;color:var(--on-dark-muted);line-height:1.7;
}
.pf-bottom a{color:var(--on-dark-body);}

@media(max-width:620px){
  .wrap,.wrap-wide{padding:0 18px;}
  header.page-head{padding-top:44px;}
  .layer{grid-template-columns:1fr;gap:6px;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}