/* comparehyperbaric.com — cool technical / instrument panel
   One signal accent (--signal) used only for state: active filter, focus, current page, live output.

   Readability pass 2026-08-31: base type raised 15px -> 17px (16.5px at <=620px), line-height
   1.55 -> 1.65, tables 13px -> 16px, prose measure 74ch -> 68ch. No reading text is below 16px.
   The only type under 16px is uppercase monospace micro-labelling - column headers, eyebrows,
   filter labels, tags, button captions - held at a 14px floor; set in caps with 0.07-0.18em
   tracking, its cap height reads larger than 14px lowercase and it never carries a sentence.
   Heading weight raised 600 -> 700 (h1 750) so hierarchy is carried by weight and size, not colour,
   and every ink token re-measured against every surface it is used on for WCAG AA. Measured
   ratios (see report): ink 17.10:1 / 16.23:1 / 15.28:1 on ground / panel / panel-2;
   ink-2 11.63 / 11.05 / 10.39; ink-3 7.55 / 7.17 / 6.75; signal 12.64 on ground and 10.27 on its
   own tint; warn 10.66 on ground and 9.63 on its own tint. The previous --ink-3 (#6f7d8b) measured
   4.49:1 on panel and 4.23:1 on panel-2 and failed body AA. */

:root{
  --ground:#07090b;
  --panel:#0d1116;
  --panel-2:#121821;
  --rule:#1c2530;
  --rule-2:#333f4c;
  --ink:#e9eef4;
  --ink-2:#bcc7d3;
  --ink-3:#93a1ae;
  --signal:#4ee7a6;
  --warn:#f0b25a;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --sp:4px;
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-feature-settings:"tnum" 1,"ss01" 1;
  background-image:linear-gradient(180deg,#0a0f14 0,var(--ground) 340px);
}
h1,h2,h3,h4{font-weight:700;letter-spacing:-0.018em;line-height:1.14;margin:0}
h1{font-size:clamp(30px,3.8vw,46px);font-weight:750}
h2{font-size:clamp(22px,2.3vw,29px)}
h3{font-size:19px}
h4{font-size:17px}
p{margin:0 0 14px}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2)}
a:hover{border-bottom-color:var(--signal)}
.prose a,.srcnote a,.disclose a,footer.site a{border-bottom-color:var(--ink-3)}
.prose a:hover,.srcnote a:hover,.disclose a:hover,footer.site a:hover{border-bottom-color:var(--signal)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px;border-radius:2px}
code,.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--panel);padding:12px 16px;min-height:44px;
  display:inline-flex;align-items:center;border:1px solid var(--signal)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:rgba(7,9,11,.92);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:40}
.masthead-in{display:flex;align-items:center;gap:22px;min-height:60px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:9px;border:0;flex:0 0 auto;min-height:44px}
.brand:hover{border:0}
.brand svg{display:block;color:var(--signal)}
.brand-name{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1.25}
.brand-name span{display:block;color:var(--ink-3)}
nav.mainnav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav.mainnav a{border:0;font-size:15px;padding:11px 11px;min-height:44px;display:inline-flex;align-items:center;
  color:var(--ink-2);font-family:var(--mono);letter-spacing:.03em;border-radius:3px}
nav.mainnav a:hover{color:var(--ink);background:var(--panel-2);border:0}
nav.mainnav a[aria-current="page"]{color:var(--signal);background:rgba(78,231,166,.09);font-weight:600}

/* ---------- page head ---------- */
.pagehead{padding:46px 0 28px;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:12px}
.pagehead .lede{color:var(--ink-2);font-size:20px;line-height:1.6;max-width:64ch;margin-top:16px}
.meta-strip{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.meta-strip b{color:var(--ink-2);font-weight:600}

main{padding-bottom:56px}
section{padding:34px 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
.section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.section-head .idx{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--signal);letter-spacing:.14em}
.prose{max-width:68ch;color:var(--ink-2);font-size:17px;line-height:1.7}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--ink)}
.prose h2{margin-top:30px}
.prose h3{margin-top:22px}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:18px}
.grid{display:grid;gap:12px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{background:var(--panel);border:1px solid var(--rule);border-left:2px solid var(--rule-2);padding:12px 14px;border-radius:3px}
.stat .k{font-family:var(--mono);font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--mono);font-size:26px;font-weight:500;margin-top:5px;color:var(--ink)}
.stat .v.sig{color:var(--signal)}
.stat .n{font-size:16px;line-height:1.55;color:var(--ink-3);margin-top:5px}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:4px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.55}
caption{text-align:left;padding:14px;color:var(--ink-3);font-size:16px;line-height:1.55;border-bottom:1px solid var(--rule)}
thead th{
  position:sticky;top:0;background:var(--panel-2);z-index:2;
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule-2);
  font-family:var(--mono);font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap;font-weight:600}
tbody td,tbody th{padding:12px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
tbody th{text-align:left;color:var(--ink);font-weight:700;font-size:16px}
tbody tr:hover td,tbody tr:hover th{background:rgba(78,231,166,.04)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td .num,th .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.np{font-family:var(--mono);font-size:14.5px;letter-spacing:.04em;color:var(--ink-3);
  border:1px dashed var(--rule-2);border-radius:2px;padding:2px 6px;display:inline-block;white-space:nowrap}
.tag{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--rule-2);border-radius:2px;padding:3px 7px;color:var(--ink-2);display:inline-block;white-space:nowrap}
.tag.hard{border-color:#3d556e;color:#a9c9e8}
.tag.soft{border-color:#5c5740;color:#e0d296}
.srcnote{font-size:16px;line-height:1.65;color:var(--ink-3);margin-top:12px}
.srcnote a{color:var(--ink-2)}
th button.sort{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;
  cursor:pointer;padding:0;display:inline-flex;gap:5px;align-items:center}
th button.sort::after{content:"↕";opacity:.35;font-size:10px}
th[aria-sort="ascending"] button.sort::after{content:"↑";opacity:1;color:var(--signal)}
th[aria-sort="descending"] button.sort::after{content:"↓";opacity:1;color:var(--signal)}

/* ---------- controls ---------- */
.controls{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:14px;margin-bottom:14px}
.controls-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.f-label{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
select,input[type=text],input[type=number],input[type=search]{
  background:var(--panel-2);color:var(--ink);border:1px solid var(--rule-2);border-radius:3px;
  padding:10px 10px;min-height:44px;font-family:var(--mono);font-size:15px;min-width:130px;max-width:100%;box-sizing:border-box}
input[type=number]{width:128px}
@media (max-width:620px){
  select,input[type=text],input[type=number],input[type=search]{min-width:0;width:100%}
  .assumption .top{align-items:flex-start}
}
.btn{background:var(--panel-2);color:var(--ink);border:1px solid var(--rule-2);border-radius:3px;
  padding:11px 16px;min-height:44px;font-family:var(--mono);font-size:14px;font-weight:500;
  letter-spacing:.06em;cursor:pointer;text-transform:uppercase}
.btn:hover{color:var(--ink);border-color:var(--ink-3)}
.btn.on{color:var(--signal);border-color:var(--signal);background:rgba(78,231,166,.09)}
.readout{font-family:var(--mono);font-size:16px;color:var(--ink-2);letter-spacing:.05em;margin-top:12px}
.readout b{color:var(--signal);font-weight:600}
.nojs-note{font-family:var(--mono);font-size:15px;line-height:1.6;color:var(--ink-3);margin-top:9px}

/* ---------- checklist ---------- */
.chk-group{border:1px solid var(--rule);border-radius:4px;background:var(--panel);margin-bottom:12px}
.chk-group > h3{padding:14px;border-bottom:1px solid var(--rule);font-family:var(--mono);
  font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;gap:12px}
.chk-group > h3 .cnt{color:var(--ink-3)}
.chk{display:grid;grid-template-columns:28px 1fr;gap:0 12px;padding:14px;border-bottom:1px solid var(--rule)}
.chk:last-child{border-bottom:0}
.chk input[type=checkbox]{margin-top:4px;width:22px;height:22px;accent-color:var(--signal);cursor:pointer}
.chk .t{color:var(--ink);font-weight:700;font-size:17px;line-height:1.4}
.chk .d{color:var(--ink-2);font-size:16.5px;line-height:1.6;margin-top:6px;max-width:68ch}
.chk .walk{margin-top:9px;font-size:16px;line-height:1.6;color:var(--warn);border-left:2px solid var(--warn);padding-left:11px;max-width:68ch}
.chk .walk b{font-family:var(--mono);font-size:14px;letter-spacing:.11em;text-transform:uppercase;display:block;color:var(--warn)}
.chk.done .t,.chk.done .d{opacity:.5}
.progress{height:3px;background:var(--rule);border-radius:2px;overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;background:var(--signal);width:0}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.calc-out{position:sticky;top:78px}
.assumption{border-bottom:1px solid var(--rule);padding:12px 0}
.assumption:last-child{border-bottom:0}
.assumption .top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.assumption .basis{font-size:16px;line-height:1.65;color:var(--ink-3);margin-top:7px;max-width:68ch}
.assumption .basis a{color:var(--ink-2)}
.out-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
.out-row:last-child{border-bottom:0}
.out-row .v{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.out-row.total{border-top:1px solid var(--rule-2);margin-top:6px;padding-top:14px;font-size:17px;font-weight:600}
.out-row.total .v{color:var(--signal);font-size:24px;font-weight:600}

/* ---------- disclosure ---------- */
.disclose{border:1px solid var(--rule-2);border-left:2px solid var(--warn);background:rgba(240,178,90,.05);
  padding:14px 16px;border-radius:3px;font-size:16px;line-height:1.65;color:var(--ink-2);margin:16px 0;max-width:72ch}
.disclose b{color:var(--ink);font-weight:700}
.pill-link{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);border-radius:3px;
  padding:12px 16px;min-height:44px;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.05em;color:var(--ink);text-transform:uppercase;margin:0 6px 8px 0}
.pill-link:hover{border-color:var(--signal);color:var(--ink)}
.linkgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.linkcard{border:1px solid var(--rule);background:var(--panel);border-radius:4px;padding:14px;display:block}
.linkcard:hover{border-color:var(--signal)}
.linkcard .h{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.linkcard .t{color:var(--ink);font-weight:700;font-size:18px;margin-top:7px}
.linkcard .d{color:var(--ink-2);font-size:16.5px;line-height:1.6;margin-top:6px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule);background:var(--panel);padding:34px 0 44px;font-size:16px;line-height:1.65;color:var(--ink-2)}
footer.site .cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:26px}
footer.site p{max-width:70ch}
footer.site .pub{color:var(--ink);font-weight:600}
footer.site a{color:var(--ink)}
footer.site .fnav{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:15px}
footer.site .fnav a{min-height:44px;display:inline-flex;align-items:center}
footer.site .legal{margin-top:24px;padding-top:18px;border-top:1px solid var(--rule);font-size:16px;line-height:1.65;color:var(--ink-3);max-width:82ch}

@media (max-width:900px){
  .calc{grid-template-columns:1fr}
  .calc-out{position:static}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g3{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  .grid.g2,.grid.g4{grid-template-columns:1fr}
  .pagehead{padding:32px 0 22px}
  .pagehead .lede{font-size:18px}
  body{font-size:16.5px}
  table{font-size:16px}
  thead th{position:static}
  /* stacked data cards on small screens */
  table.stack thead{display:none}
  table.stack tbody tr{display:block;border-bottom:1px solid var(--rule-2);padding:6px 0}
  table.stack tbody td,table.stack tbody th{display:grid;grid-template-columns:44% 1fr;gap:10px;border-bottom:1px solid var(--rule);padding:8px 12px}
  table.stack tbody td::before,table.stack tbody th::before{
    content:attr(data-label);font-family:var(--mono);font-size:14px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3)}
  table.stack tbody th{background:var(--panel-2)}
  .masthead{position:static}
}

/* ---------- spec watch (dated specification bulletins) ---------- */
.sw-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.sw-item{border:1px solid var(--rule);border-left:2px solid var(--rule-2);background:var(--panel);
  border-radius:4px;padding:16px 18px}
.sw-item:hover{border-left-color:var(--signal)}
.sw-stamp{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sw-stamp b{color:var(--signal);font-weight:500}
.sw-item h3{margin:9px 0 0;font-size:20px;line-height:1.3}
.sw-item h3 a{border-bottom:1px solid var(--rule-2)}
.sw-item h3 a:hover{border-bottom-color:var(--signal)}
.sw-item .sw-sum{color:var(--ink-2);font-size:16.5px;line-height:1.6;margin:9px 0 0;max-width:72ch}
.sw-item .sw-kind{margin-top:11px}
.bulletin{max-width:100%}
/* Prose is held to a 70ch measure; tables are allowed the full column so a
   before/after row is never clipped or pushed into a horizontal scroll. */
.bulletin > p,.bulletin > ul,.bulletin > .sw-sum,.bulletin > .sw-read,
.bulletin > .sw-sources,.bulletin > .sw-byline{max-width:70ch}
.bulletin .sw-sum{font-size:19px;line-height:1.6;color:var(--ink);font-weight:600;
  border-left:2px solid var(--signal);padding-left:14px;margin:0 0 22px}
.bulletin h2{font-size:19px;font-family:var(--mono);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);margin:30px 0 12px}
.bulletin p{font-size:17px;line-height:1.7;color:var(--ink-2)}
.bulletin strong{color:var(--ink);font-weight:700}
.bulletin .table-scroll{margin:16px 0 8px;max-width:100%}
.bulletin table{font-size:16px}
.bulletin ul{padding-left:22px;color:var(--ink-2);font-size:17px;line-height:1.7}
.bulletin ul li{margin-bottom:9px}
.sw-read{font-family:var(--mono);font-size:15px;line-height:1.65;color:var(--ink-3);
  border:1px dashed var(--rule-2);border-radius:3px;padding:11px 13px;margin:16px 0}
.sw-read b{color:var(--ink-2);font-weight:500}
.sw-byline{font-family:var(--mono);font-size:14.5px;letter-spacing:.05em;color:var(--ink-3);
  margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.sw-byline b{color:var(--ink-2);font-weight:500}
.sw-sources{list-style:none;padding:0;margin:12px 0 0}
.sw-sources li{border-top:1px solid var(--rule);padding:12px 0;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.sw-sources .sw-when{font-family:var(--mono);font-size:14.5px;color:var(--ink-3);display:block;margin-top:4px}
.sw-prevnext{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}

/* ---------- touch target floor (44px) on small screens ---------- */
@media (max-width:620px){
  /* Source and model links inside the stacked data cards become real tap targets. */
  table.stack tbody td a,table.stack tbody th a{
    display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
  /* The checklist toggle: the item title is a <label for> the checkbox, so it is the
     primary tap target and is held at 44px. The box itself sits at 26px beside it. */
  .chk{grid-template-columns:44px 1fr}
  .chk input[type=checkbox]{width:26px;height:26px;margin:9px 0 0 9px}
  .chk .t{display:flex;align-items:center;min-height:44px}
  footer.site .fnav a,nav.mainnav a{min-height:44px}
  .pill-link,.btn{min-height:44px}
  .sw-item h3 a{display:inline-flex;align-items:center;min-height:44px}
}