:root{
  --ink:#0b2a2d;
  --ink-2:#0f3437;
  --ink-3:#15464a;
  --line:#1d5559;
  --paper:#f4f1e9;
  --paper-2:#e9e4d7;
  --moss:#a8c93a;
  --moss-dim:#7d9a2a;
  --clay:#e0714a;
  --amber:#e0ab3c;
  --mist:#7fa3a5;
  --mist-2:#b8ccc9;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

/* film grain */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:min(1120px,92vw);margin-inline:auto}

/* ---------- masthead ---------- */
.masthead{
  padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,4vw,3rem);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.masthead::after{
  content:"";position:absolute;right:-14vw;top:-24vh;width:56vw;height:56vw;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(168,201,58,.13),transparent 62%);
  pointer-events:none;
}
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--moss);margin:0 0 1.1rem;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.9rem,8vw,5.6rem);line-height:.94;letter-spacing:-.015em;
  margin:0 0 1.3rem;color:var(--paper);
}
h1 em{font-style:italic;color:var(--moss)}
.lede{
  max-width:52ch;font-size:clamp(1rem,2.1vw,1.16rem);color:var(--mist-2);margin:0 0 1.6rem;
}
.byline{font-family:var(--mono);font-size:.78rem;color:var(--mist);margin:0}
a{color:var(--moss);text-decoration:none;border-bottom:1px solid rgba(168,201,58,.35)}
a:hover{border-bottom-color:var(--moss)}

/* ---------- tabs ---------- */
.tabs{
  display:flex;gap:.4rem;margin-top:2rem;flex-wrap:wrap;
  position:sticky;top:0;z-index:8;
  background:linear-gradient(var(--ink) 72%,rgba(11,42,45,0));
  padding:.9rem 0 1.3rem;
}
.tabs button{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;
  background:transparent;color:var(--mist-2);
  border:1px solid var(--line);border-radius:2px;
  padding:.62rem 1.05rem;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
}
.tabs button .n{color:var(--mist);margin-right:.45rem;font-size:.72rem}
.tabs button:hover{border-color:var(--moss-dim);color:var(--paper)}
.tabs button[aria-selected="true"]{
  background:var(--moss);color:var(--ink);border-color:var(--moss);font-weight:600;
}
.tabs button[aria-selected="true"] .n{color:rgba(11,42,45,.55)}

/* ---------- panels ---------- */
.panel{display:none;padding-bottom:4rem;animation:fade .35s ease both}
.panel.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.panel-head{margin:.5rem 0 2rem;max-width:64ch}
.panel-head h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,4vw,2.7rem);
  line-height:1.1;margin:0 0 .6rem;color:var(--paper);
}
.panel-head p{margin:0;color:var(--mist-2);font-size:1.02rem}
.panel-head p.warn{color:var(--amber)}

/* ---------- layout ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.cols--rule{grid-template-columns:1fr 1.15fr}
@media(max-width:860px){.cols,.cols--rule{grid-template-columns:1fr}}

.card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:3px;
  padding:1.7rem 1.6rem;
}
.card--output{background:var(--ink-3)}
.card--wide{margin-bottom:1.4rem}
.card h3{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--moss);margin:0 0 1.4rem;font-weight:500;
}
.card h3.mt{margin-top:2rem}
.card h4{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);margin:2rem 0 1rem;font-weight:500;
}

/* ---------- fields ---------- */
.field{display:block;margin-bottom:1.5rem}
.field .lab{display:block;font-size:.94rem;color:var(--paper);margin-bottom:.45rem;font-weight:500}
.field .lab em{font-style:normal;color:var(--mist);font-weight:400}
.field input{
  width:100%;font-family:var(--mono);font-size:1.28rem;font-weight:500;
  background:var(--ink);color:var(--moss);
  border:1px solid var(--line);border-bottom:2px solid var(--moss-dim);
  border-radius:2px;padding:.6rem .75rem;
  transition:border-color .18s,background .18s;
}
.field input:focus{outline:none;border-color:var(--moss);background:#0a2426}
.field .hint{display:block;font-size:.82rem;color:var(--mist);margin-top:.45rem;line-height:1.5}

/* ---------- readouts ---------- */
.readout{margin:0}
.readout > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px dashed rgba(127,163,165,.28);
}
.readout > div:last-child{border-bottom:none}
.readout dt{font-size:.92rem;color:var(--mist-2)}
.readout dd{
  margin:0;font-family:var(--mono);font-size:1.05rem;font-weight:500;
  color:var(--paper);text-align:right;white-space:nowrap;
}
.readout dd.big{font-size:1.55rem;color:var(--moss)}
.readout dd.accent{color:var(--moss)}
.readout--sub dd{font-size:.98rem;color:var(--mist-2)}
.foot{font-size:.84rem;color:var(--mist);margin:1.1rem 0 0;line-height:1.55}
.foot.warn{color:var(--amber)}

/* ---------- checks ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.4rem}
.checks--inline{grid-template-columns:1fr;margin-top:0}
@media(max-width:860px){.checks{grid-template-columns:1fr}}
.check{
  display:flex;gap:.85rem;align-items:flex-start;
  border:1px solid var(--line);border-left-width:3px;border-radius:2px;
  padding:.8rem 1rem;font-size:.9rem;background:var(--ink-2);
}
.check .mark{font-family:var(--mono);font-weight:600;font-size:.9rem;flex:none;line-height:1.5}
.check.ok{border-left-color:var(--moss)}
.check.ok .mark{color:var(--moss)}
.check.bad{border-left-color:var(--clay)}
.check.bad .mark{color:var(--clay)}
.check span:last-child{color:var(--mist-2)}
.check b{color:var(--paper);font-weight:600}

/* ---------- verdict ---------- */
.verdict{margin-top:1.2rem}
.verdict .box{
  border:1px solid var(--line);border-top:3px solid var(--mist);
  padding:1.1rem 1.2rem;border-radius:2px;background:var(--ink-2);
}
.verdict .tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  display:block;margin-bottom:.5rem;color:var(--mist);
}
.verdict .msg{font-size:.96rem;color:var(--mist-2);margin:0;line-height:1.6}
.verdict--big .box{padding:1.5rem 1.4rem}
.verdict--big .head{
  font-family:var(--serif);font-size:2.1rem;line-height:1.1;margin:0 0 .6rem;color:var(--paper);
}
.verdict .box.go{border-top-color:var(--moss)}
.verdict .box.go .head,.verdict .box.go .tag{color:var(--moss)}
.verdict .box.wait{border-top-color:var(--amber)}
.verdict .box.wait .head,.verdict .box.wait .tag{color:var(--amber)}
.verdict .box.stop{border-top-color:var(--clay)}
.verdict .box.stop .head,.verdict .box.stop .tag{color:var(--clay)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:0 -.4rem}
table.grid{width:100%;border-collapse:collapse;min-width:540px}
table.grid th,table.grid td{
  padding:.62rem .7rem;text-align:right;border-bottom:1px solid rgba(29,85,89,.7);
  font-size:.92rem;
}
table.grid thead th{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--moss);font-weight:500;border-bottom:1px solid var(--line);
}
table.grid tbody th{text-align:left;font-weight:500;color:var(--paper)}
table.grid thead th:first-child{text-align:left}
table.grid input{
  width:100%;max-width:130px;font-family:var(--mono);font-size:1rem;text-align:right;
  background:var(--ink);color:var(--moss);border:1px solid var(--line);
  border-bottom:2px solid var(--moss-dim);border-radius:2px;padding:.4rem .5rem;
}
table.grid input:focus{outline:none;border-color:var(--moss)}
table.grid td.calc{font-family:var(--mono);color:var(--mist-2);font-weight:500}
table.grid--out td{font-family:var(--mono);color:var(--paper);font-weight:500}
table.grid td.ref,table.grid th.ref{
  text-align:left;color:var(--mist);font-family:var(--sans);font-size:.82rem;font-weight:400;
}
table.grid--ref td{text-align:left;color:var(--mist-2);font-size:.9rem}
table.grid--ref td:nth-child(2){font-family:var(--mono);color:var(--paper);white-space:nowrap}

.minlist{margin:0;padding-left:1.1rem;color:var(--mist-2)}
.minlist li{margin-bottom:.6rem;font-size:.94rem}
.minlist b{color:var(--paper)}

.disclosure{
  font-size:.82rem;color:var(--mist);margin:1.6rem 0 0;max-width:78ch;
  border-left:2px solid var(--line);padding-left:1rem;line-height:1.6;
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line);padding:2.4rem 0 4rem;margin-top:1rem;
  color:var(--mist);font-size:.86rem;
}
.tools{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.6rem}
.btn{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
  background:var(--moss);color:var(--ink);border:1px solid var(--moss);
  border-radius:2px;padding:.6rem 1.1rem;cursor:pointer;font-weight:600;
  transition:filter .18s;
}
.btn:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent;color:var(--mist-2);border-color:var(--line);font-weight:400}
.btn--ghost:hover{color:var(--paper);border-color:var(--moss-dim)}
.saved{font-family:var(--mono);font-size:.76rem;color:var(--moss)}

/* ---------- print ---------- */
@media print{
  body{background:#fff;color:#111}
  .grain,.tabs,.tools,.masthead::after{display:none}
  .panel{display:block!important;page-break-after:always;padding-bottom:1rem}
  .card{background:#fff;border:1px solid #bbb}
  .card h3,.eyebrow,h1 em{color:#0b2a2d}
  h1,.panel-head h2,.readout dd,table.grid tbody th,.minlist b,.check b{color:#111}
  .field input,table.grid input{background:#fff;color:#111;border:1px solid #999}
  .readout dd.big,.readout dd.accent{color:#0b2a2d}
  .lede,.readout dt,.foot,.hint,.disclosure,.check span:last-child{color:#444}
  a{color:#111;border:none}
}

@media(max-width:520px){
  .card{padding:1.3rem 1.1rem}
  .tabs button{padding:.55rem .75rem;font-size:.76rem}
}