/* VHX · math.css
   Standalone styles for the math engine docs.
   Pure black-on-paper sketch — no theme system, no decoration.
*/
@import url('/assets/type.css');

:root {
  --paper:#fafaf7;
  --ink:#0d0d0c;
  --rule:#0d0d0c;
  --hair:rgba(13,13,12,0.18);
  --dim:#6d6d68;
  --tint:#f0eee8;
  --accent:#d83a00;       /* graphite-orange, like an engineer's red pencil */
  --signal:#0033cc;
  --ok:#0a7d3a;

  --f:'JB', ui-monospace, Menlo, Consolas, monospace;
  --pad:48px;
  --gut:24px;
  --hair-w:1px;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-weight:400;font-size:13px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"calt" off;font-variant-ligatures:none;
  max-width:100%;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--on-accent,var(--paper));}

.sheet{
  width:min(100%,1280px);max-width:100%;margin:0 auto;
  border-left:var(--hair-w) solid var(--rule);
  border-right:var(--hair-w) solid var(--rule);
  min-height:100vh;
  overflow-x:clip;
  overflow-y:visible;
}

/* ─── topbar ─── */
.top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px var(--pad);
  border-bottom:var(--hair-w) solid var(--rule);
  position:sticky;top:0;background:var(--paper);z-index:50;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;
}
.top .id{display:flex;gap:14px;align-items:baseline;min-width:0;white-space:nowrap}
.top .id b{font-weight:800;letter-spacing:-0.04em;font-size:15px;text-transform:none}
.top .id .slug{color:var(--dim);overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .nav{display:flex;justify-self:center;gap:0}
.top .nav a{
  color:var(--dim);text-decoration:none;padding:4px 16px;
  border-left:var(--hair-w) solid var(--hair);
}
.top .nav a:first-child{border-left:0}
.top .nav a.active{color:var(--accent)}
.top .nav a:hover{color:var(--ink)}
.top .ctrl{
  justify-self:end;color:var(--dim);
  display:flex;gap:10px;align-items:baseline;white-space:nowrap;min-width:0;
}
.top .ctrl .k{color:var(--dim);font-weight:500}
.top .ctrl b{color:var(--ink);font-weight:700}
.top .ctrl .sep{color:var(--hair)}
@media (max-width:780px){
  :root{--pad:18px;--gut:16px}
  .top{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:12px var(--pad);overflow:hidden}
  .top .id{min-width:max-content;flex-shrink:0}
  .top .id .slug{display:none}
  .top .nav{
    justify-self:stretch;font-size:10px;letter-spacing:0.1em;
    width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  }
  .top .nav::-webkit-scrollbar{display:none}
  .top .nav a{padding:4px 8px;flex:0 0 auto}
  .top .ctrl{display:flex;justify-self:end;min-width:0;flex-shrink:0}
  .top .ctrl .vhx-theme-bar .tb-trigger{width:96px;max-width:96px}
}

/* ─── masthead ─── */
.mast{
  padding:64px var(--pad) 48px;
  border-bottom:var(--hair-w) solid var(--rule);
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;
}
.mast h1{
  margin:0;font-size:clamp(52px,12vw,96px);font-weight:200;letter-spacing:-0.05em;line-height:0.92;
}
.mast h1 b{font-weight:800;letter-spacing:-0.06em}
.mast h1 i{font-style:normal;color:var(--accent);font-weight:800}
.mast .lede{
  font-size:16px;line-height:1.55;color:var(--ink);max-width:46ch;margin-top:24px;
}
.mast .meta{
  display:grid;grid-template-columns:120px 1fr;gap:8px 18px;
  align-self:end;font-size:11px;line-height:1.5;
}
.mast .meta .k{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim)}
.mast .meta .v b{font-weight:700}
.mast .meta code{font-weight:600}

/* ─── section ─── */
section.sec{
  border-bottom:var(--hair-w) solid var(--rule);
  padding:0;
}
.sec-head{
  display:grid;grid-template-columns:80px 1fr auto;align-items:baseline;
  padding:32px var(--pad) 24px;gap:24px;
  border-bottom:var(--hair-w) solid var(--hair);
}
@media (max-width:780px){
  .sec-head{grid-template-columns:60px 1fr;gap:14px 16px}
  .sec-head .tag{grid-column:1 / -1;padding-top:4px}
}
.sec-head .num{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;
  color:var(--accent);
}
.sec-head h2{
  margin:0;font-size:24px;font-weight:800;letter-spacing:-0.025em;line-height:1.1;
}
.sec-head h2 i{font-style:normal;color:var(--dim);font-weight:300;letter-spacing:-0.01em}
.sec-head .tag{
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);
  font-weight:500;white-space:nowrap;
}
.sec-body{padding:32px var(--pad) 56px}

/* ─── two-column blocks ─── */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px}
@media (max-width:980px){.split{grid-template-columns:1fr;gap:24px}}

/* prose */
.prose p{margin:0 0 14px;max-width:60ch;font-size:13px;line-height:1.65}
.prose p:last-child{margin-bottom:0}
.prose code{
  background:var(--tint);padding:1px 6px;border-radius:2px;font-weight:600;
}

/* derivation block */
.deriv{
  border:var(--hair-w) solid var(--rule);
  background:var(--tint);
  padding:20px 24px;
}
.deriv .lbl{
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin-bottom:12px;
}
.deriv pre{
  margin:0;font-size:13px;line-height:1.65;font-weight:500;
  white-space:pre-wrap;
}
.deriv pre b{color:var(--accent);font-weight:700}

/* ─── live demo card ─── */
.demo{
  border:var(--hair-w) solid var(--rule);
  background:var(--paper);
}
.demo .h{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:var(--hair-w) solid var(--rule);
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
}
.demo .h .l{font-weight:700;white-space:nowrap}
.demo .h .r{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:0.08em}
.demo .b{padding:24px}
.demo .ctrl{
  display:grid;grid-template-columns:96px 1fr 110px;gap:14px;align-items:center;
  padding:12px 16px;border-top:var(--hair-w) solid var(--hair);
  font-size:11px;
}
.demo .ctrl label{color:var(--dim);letter-spacing:0.1em;text-transform:uppercase;font-size:10px;white-space:nowrap}
.demo .ctrl .val{
  text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent);
  letter-spacing:0.04em;white-space:nowrap;
}
.demo input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:1px;background:var(--rule);outline:none;
}
.demo input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;background:var(--accent);border-radius:0;cursor:pointer;
}
.demo input[type=range]::-moz-range-thumb{
  width:14px;height:14px;background:var(--accent);border-radius:0;
  cursor:pointer;border:0;
}

/* ─── tables ─── */
.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{
  padding:8px 12px;border-bottom:var(--hair-w) solid var(--hair);
  text-align:left;
}
.tbl th{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);font-weight:700;
}
.tbl td.n{text-align:right}
.tbl td b{color:var(--accent)}

/* ─── canvas / svg areas ─── */
.plot{
  width:100%;height:200px;display:block;
  background:var(--paper);
}
.plot rect.zone{fill:var(--tint)}
.plot path.curve{fill:none;stroke:var(--accent);stroke-width:1.5}
.plot path.curve-2{fill:none;stroke:var(--signal);stroke-width:1;stroke-dasharray:3 3}
.plot line.axis{stroke:var(--rule);stroke-width:1}
.plot line.grid{stroke:var(--hair);stroke-width:1}
.plot text{font-family:var(--f);font-size:10px;fill:var(--dim);
  letter-spacing:0.06em;text-transform:uppercase}
.plot circle.dot{fill:var(--accent)}

.cellgrid{
  display:grid;gap:0;font-size:13px;line-height:1.5;
  color:var(--ink);white-space:pre;
}
.cellgrid .c{
  border:var(--hair-w) solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 4%, transparent);
  font-variant-numeric:tabular-nums;
}

.tess{
  width:100%;aspect-ratio:1.6/1;display:block;
  background:var(--paper);
}
.tess line{stroke:var(--ink);stroke-width:0.6;fill:none}
.tess line.front{stroke:var(--accent);stroke-width:1}

/* water demo */
.water{
  font-family:var(--f);font-size:13px;line-height:1;
  white-space:pre;letter-spacing:0;
  padding:20px;background:var(--ink);color:var(--paper);
  overflow:hidden;
  border:var(--hair-w) solid var(--rule);
}

/* easing strip */
.easings{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.easings .ec{
  border-right:var(--hair-w) solid var(--hair);
  border-bottom:var(--hair-w) solid var(--hair);
  padding:12px;
}
.easings .ec:nth-child(4n){border-right:0}
.easings .ec .lbl{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin-bottom:4px;
}

/* ramps */
.ramps{display:grid;grid-template-columns:140px 1fr;gap:0}
.ramps .r-row{
  display:contents;
}
.ramps .k{
  padding:12px 16px;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--dim);font-weight:700;
  border-bottom:var(--hair-w) solid var(--hair);
  border-right:var(--hair-w) solid var(--hair);
}
.ramps .v{
  padding:12px 16px;font-size:16px;letter-spacing:0;
  border-bottom:var(--hair-w) solid var(--hair);
  font-variant-numeric:tabular-nums;
}
.ramps .r-row:last-child .k,
.ramps .r-row:last-child .v{border-bottom:0}

/* contrast matrix */
.cm-grid{
  display:grid;grid-template-columns:120px repeat(7,1fr);gap:0;
  font-size:11px;
}
.cm-grid .h{
  padding:8px;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--dim);font-weight:700;text-align:center;
}
.cm-grid .lh{text-align:left;padding:8px 12px}
.cm-grid .cell{
  padding:14px 6px;text-align:center;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.cm-grid .cell.aa{outline:1px solid var(--ok);outline-offset:-2px}
.cm-grid .cell.fail{color:var(--dim)}

/* footer */
.foot{
  padding:32px var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);
  border-top:var(--hair-w) solid var(--rule);
}
.foot .r{justify-self:end}

@media (max-width:780px){
  .mast{
    grid-template-columns:1fr;
    gap:24px;
    padding:42px var(--pad) 34px;
  }
  .mast h1{
    line-height:0.96;
  }
  .mast .lede{margin-top:16px;max-width:none}
  .mast .meta{grid-template-columns:1fr;gap:6px}
  .sec-head{
    grid-template-columns:1fr;
    padding:26px var(--pad) 20px;
  }
  .sec-head .tag{grid-column:auto}
  .sec-body{padding:26px var(--pad) 42px}
  .deriv{padding:16px;max-width:100%;overflow:hidden}
  .deriv pre{white-space:pre;overflow-x:auto}
  .demo .b{padding:16px}
  .demo .ctrl{grid-template-columns:1fr;gap:8px;padding:12px}
  .demo .ctrl .val{text-align:left}
  .tbl{display:block;max-width:100%;overflow-x:auto}
  .plot{min-width:0}
  .water{overflow:auto}
  .easings{grid-template-columns:1fr 1fr}
  .easings .ec:nth-child(2n){border-right:0}
  .ramps{grid-template-columns:1fr}
  .ramps .r-row{
    display:grid;
    grid-template-columns:1fr;
    border-bottom:var(--hair-w) solid var(--hair);
  }
  .ramps .r-row:last-child{border-bottom:0}
  .ramps .k,
  .ramps .v{
    border-right:0;
    border-bottom:0;
    min-width:0;
    overflow-wrap:anywhere;
  }
  .cm-grid{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    grid-template-columns:96px repeat(7,minmax(62px,1fr));
    -webkit-overflow-scrolling:touch;
  }
  .cm-grid > *{min-width:0}
  .cm-grid .h,
  .cm-grid .cell{padding-left:6px;padding-right:6px}
  .foot{grid-template-columns:1fr;gap:8px}
  .foot .r{justify-self:start}
}

@media (max-width:430px){
  .top .ctrl .vhx-theme-bar .tb-trigger{width:88px;max-width:88px}
}