/* Public pages (landing + reference articles). Deliberately separate from the app bundle: these
   pages ship no JavaScript, so a crawler — and a phone on a bad connection — gets the whole page
   from the HTML. Palette and type mirror the app's tokens. */
:root{
  --ink:#1f1d1a;--ink-2:#3a352e;--ink-dim:#6d675e;--sheet:#f6f3ec;--paper:#fffdf8;
  --rule:#e3ded3;--rule2:#d6d0c4;--accent:#7a2e22;--clause:#3b5a6b;
  --serif:"Spectral",Georgia,serif;--sans:"IBM Plex Sans","Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.15rem}
.narrow{max-width:46rem}
a{color:var(--clause)}

/* masthead */
header{background:var(--ink);color:var(--sheet)}
.bar{display:flex;align-items:center;gap:.85rem;padding:14px 0}
.bar svg{flex:0 0 auto}
.bar a.home{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit}
.name{font:600 19px/1 var(--serif);letter-spacing:.01em}
.eyebrow{font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#a8a298}
.bar .to-app{margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--sheet);text-decoration:none;border:1px solid rgba(244,242,236,.42);padding:.5rem .8rem}
.bar .to-app:hover{background:var(--sheet);color:var(--ink)}
.beta-strip{background:rgba(122,46,34,.06);border-bottom:1px solid rgba(122,46,34,.28);font-family:var(--mono);font-size:.76rem;color:var(--ink-2)}
.beta-strip .wrap{padding-top:.45rem;padding-bottom:.45rem}
.beta-strip b{border:1px solid var(--accent);color:var(--accent);letter-spacing:.1em;padding:0 6px;margin-right:.5rem}

/* type */
h1{font:700 2.05rem/1.18 var(--serif);margin:2.3rem 0 .7rem;letter-spacing:.005em}
.lede{font-size:1.06rem;color:var(--ink-2);max-width:44rem;margin:0 0 1.5rem}
h2{font:600 1.16rem/1.25 var(--serif);margin:2.6rem 0 .5rem}
h3{font:600 .95rem/1.3 var(--sans);margin:0 0 .25rem}
p{margin:0 0 .9rem;max-width:44rem}
ul,ol{margin:.2rem 0 .9rem;padding-left:1.15rem;max-width:44rem}
li{margin:.3rem 0;color:var(--ink-2)}
strong{font-weight:600}
.kicker{font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:2.4rem 0 0}

/* calls to action */
.cta{display:inline-block;font:600 .82rem/1 var(--mono);letter-spacing:.04em;background:var(--ink);color:var(--sheet);
  border:1px solid var(--ink);padding:.72rem 1.35rem;text-decoration:none}
.cta:hover{background:var(--accent);border-color:var(--accent)}
.cta-note{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);margin-top:.6rem}

/* capability grid (landing) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));gap:0;border:1px solid var(--rule2);background:var(--sheet);margin:1rem 0 0}
.cell{padding:.9rem 1.05rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cell p{font-size:.86rem;color:var(--ink-2);margin:0}
.cell .ref{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-dim);margin-top:.35rem}

/* reference-article furniture */
table{border-collapse:collapse;width:100%;margin:1rem 0 1.2rem;font-size:.86rem}
caption{caption-side:top;text-align:left;font:600 .72rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);padding-bottom:.4rem}
th,td{border:1px solid var(--rule);padding:.45rem .6rem;text-align:left;vertical-align:top}
thead th{background:var(--clause);color:#fff;font:600 .72rem/1.35 var(--mono);letter-spacing:.06em;border-color:var(--clause)}
tbody th{background:var(--sheet);font-weight:600}
td.f,th.f{font-family:var(--mono);white-space:nowrap}
.worked{border:1px solid var(--rule2);background:var(--sheet);padding:.85rem 1.05rem;margin:1rem 0 1.2rem;font-size:.86rem}
.worked h3{margin-bottom:.5rem}
.worked dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;margin:0 0 .7rem;font-family:var(--mono);font-size:.8rem}
.worked dt{color:var(--ink-dim)}
.worked dd{margin:0;color:var(--ink)}
.worked .step{font-family:var(--mono);font-size:.8rem;color:var(--ink-2);margin:.25rem 0}
.worked .out{font-family:var(--mono);font-weight:600;color:var(--ink);border-top:1px solid var(--rule2);padding-top:.5rem;margin-top:.55rem}
.note{border-left:3px solid var(--accent);background:rgba(122,46,34,.045);padding:.65rem .9rem;margin:1rem 0 1.2rem;font-size:.86rem;color:var(--ink-2);max-width:44rem}
.seealso{border-top:1px solid var(--rule2);margin-top:2.4rem;padding-top:1rem}
.seealso a{display:block;margin:.3rem 0}

.rule{border:0;border-top:1px solid var(--rule2);margin:2.8rem 0 0}
footer{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);padding:1.4rem 0 2.4rem}
footer a{color:var(--ink-dim)}
@media (max-width:34rem){
  h1{font-size:1.65rem}
  .lede{font-size:1rem}
  .bar .to-app{display:none}
  table{font-size:.8rem}
}

/* Roping page: the embedded Studio host. Content above it is plain HTML, so the page still reads
   without JavaScript; this only styles the interactive area. */
.studio-host{margin:1rem 0 .6rem;min-height:6rem}
.studio-fallback{border:1px solid var(--rule2);background:var(--sheet);padding:.9rem 1.05rem;font-size:.86rem;color:var(--ink-2);margin:0}
.rb-handoff{font-family:var(--mono);font-size:.8rem;color:var(--accent);margin:0 0 .5rem}

/* The Formula (36) value shown beside a floor-governed requirement. Previously opacity:.75 over
   dim ink, which measured 3.24:1 — below the 4.5 AA floor for small text. */
.f36{color:#5f5a51}

/* WCAG 2.1 1.4.10 Reflow: at 320 CSS px the four-column code tables were forcing the whole PAGE
   to scroll sideways (measured 374px). Data tables may keep their two-dimensional layout, but
   the page must not scroll — so the table scrolls inside this box instead. tabindex makes the
   scrollable region reachable by keyboard, which axe checks separately. */
.tablewrap{overflow-x:auto;max-width:100%}
.tablewrap:focus-visible{outline:2px solid var(--clause);outline-offset:2px}
.tablewrap table{margin-top:0}

/* The drawing board needs far more width than the 46rem reading column it sits in: the controls
   and the properties dock take ~650px between them, which left the canvas 53px wide on a 1440px
   screen — the diagram rendered but was squeezed to a sliver and clipped. So it breaks out of the
   column and centres on the page, while still being contained rather than pushing the page wide
   (WCAG 1.4.10 — it measured 400px at a 320px viewport before). */
.studio-host{
  width:min(1400px,96vw);
  margin-left:calc(50% - min(700px,48vw));
  overflow-x:auto;
}

/* Unit switch on the roping page. */
.unit-toggle{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 .7rem}
.unit-toggle > div{display:flex;border:1px solid var(--rule2)}
.unit-toggle-lab{font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.unit-btn{font:500 .78rem/1.25 var(--sans);background:var(--paper);color:var(--ink-2);border:0;border-left:1px solid var(--rule2);
  padding:.4rem .8rem;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.unit-btn:first-child{border-left:0}
.unit-btn.on{background:var(--ink);color:var(--paper)}
.unit-btn:focus-visible{outline:2px solid var(--clause);outline-offset:-2px}
.unit-btn-sub{font-family:var(--mono);font-size:.62rem;opacity:.85}
.unit-toggle-note{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim)}

/* ─── Imagery and figures ──────────────────────────────────────────────────────────────────────
   The only raster image on the site is a page of a real report. Nothing here is decorative: a
   stock photograph would say less about the tool than one page of its actual output does, and it
   would be the only weight on pages that otherwise ship no images and no JavaScript. */
img{max-width:100%;height:auto}

.showcase{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:1.6rem;align-items:start;margin:1.1rem 0 1.4rem}
.showcase-body > :first-child{margin-top:0}
.showcase-body p,.showcase-body ul{max-width:none}

/* The report page, framed as a sheet of paper: a hairline, a lifted edge, and no rounding — it is
   a document, not a card. The link wrapper is display:block so the focus ring traces the sheet. */
.shot{margin:0}
.shot > a{display:block;border:1px solid var(--rule2);background:#fff;box-shadow:0 1px 2px rgba(31,29,26,.06),0 6px 18px rgba(31,29,26,.07);transition:box-shadow .18s ease}
.shot > a:hover{box-shadow:0 1px 2px rgba(31,29,26,.08),0 10px 26px rgba(31,29,26,.12)}
.shot > a:focus-visible{outline:2px solid var(--clause);outline-offset:3px}
.shot img{display:block}
.shot figcaption{font-family:var(--mono);font-size:.7rem;line-height:1.5;color:var(--ink-dim);margin-top:.5rem}

/* A quoted line of real output — long, so it scrolls inside itself rather than widening the page
   (WCAG 1.4.10), and keeps the monospace of the report it came from. */
.callout{font-family:var(--mono);font-size:.76rem;line-height:1.6;color:var(--ink-2);
  background:var(--sheet);border-left:3px solid var(--clause);padding:.6rem .8rem;
  overflow-x:auto;max-width:none}

@media (max-width:44rem){
  .showcase{grid-template-columns:1fr;gap:1.1rem}
  .shot{max-width:20rem}
}


/* ─── Hero ─────────────────────────────────────────────────────────────────────────────────────
   The headline sat alone above a wall of prose. The drawing beside it is the same arrangement the
   calculator reasons about, so it does the work an establishing photograph would, while being
   inline SVG: no request, no licence, and it recolours with the page. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:2.4rem;align-items:start;margin-bottom:.5rem}
.hero-body h1{margin-top:2.1rem}
.hero-fig{margin:3rem 0 0}
.hero-fig figcaption{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);margin-top:.5rem;text-align:center}

/* Line drawings. `stroke-linecap:round` on the ropes only would soften the structural lines too,
   so the whole drawing keeps butt caps — it should read as a drawing, not an illustration. */
.dwg{display:block;width:100%;height:auto;stroke-linecap:butt;stroke-linejoin:miter}
/* Label type is set here rather than as SVG presentation attributes so it can use the page's font
   tokens, and so one rule governs every drawing on the site. */
.dwg text{font-family:var(--mono);font-size:12px}
.dwg .car{font-size:13px;letter-spacing:1.5px}

@media (max-width:52rem){
  .hero{grid-template-columns:1fr;gap:1rem}
  .hero-fig{margin:.5rem auto 0;max-width:17rem}
}

/* Standalone drawings inside a reference article. Narrower than the 44rem measure so they read as
   a figure rather than a banner, and left-aligned with the prose. */
.fig{margin:1.3rem 0 1.5rem;max-width:26rem}
.fig-wide{max-width:32rem}
.fig figcaption{font-family:var(--mono);font-size:.7rem;line-height:1.5;color:var(--ink-dim);margin-top:.55rem}

/* ─── Typographic pass ─────────────────────────────────────────────────────────────────────────
   The pages read as an engineering document, so the polish is drafting polish: a hairline where a
   section starts, citations that line up across a row, and links that sit off their descenders. */

/* A rule above each section head. Cheap structure on pages that are mostly prose and tables, and
   it echoes the ruled blocks in the report itself. The hero's own heading is an h1, so the first
   rule falls where the first real section does. */
h2{border-top:1px solid var(--rule);padding-top:1.15rem}
.worked h2,.note h2{border-top:0;padding-top:0}

a{text-underline-offset:.16em}

/* Capability cells: the small mono citation is pushed to the bottom of its cell, so the citations
   align across a row instead of floating wherever the prose above them happens to end. */
.cell{display:flex;flex-direction:column}
.cell .ref{margin-top:auto;padding-top:.5rem}

/* See-also links, set as a list of destinations rather than a stack of underlines. */
.seealso a{position:relative;padding-left:1.1rem;text-decoration-color:var(--rule2)}
.seealso a::before{content:"→";position:absolute;left:0;color:var(--ink-dim);text-decoration:none}
.seealso a:hover{text-decoration-color:currentColor}

/* ─── Admin (/admin) ───────────────────────────────────────────────────────────────────────────
   Owner-only screen over /api/signups. Reuses the reference-page furniture — .tablewrap, tables,
   .cta — so there is no second design to maintain for a page only one person opens. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.adm-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.adm-head h1{margin-bottom:.6rem}
.adm-tools{margin-left:auto;display:flex;gap:.5rem}

.adm-signin{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin:1.2rem 0}
.adm-field{display:flex;flex-direction:column;gap:.3rem}
.adm-field span{font:600 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.adm-field input{font-family:var(--mono);font-size:.85rem;padding:.55rem .7rem;border:1px solid var(--rule2);background:var(--paper);color:var(--ink);min-width:22rem;max-width:100%}
.adm-field input:focus-visible{outline:2px solid var(--clause);outline-offset:1px}

.adm-btn{font:500 .76rem/1.2 var(--sans);background:var(--paper);color:var(--ink-2);border:1px solid var(--rule2);padding:.4rem .7rem;cursor:pointer}
.adm-btn:hover:not(:disabled){background:var(--sheet);color:var(--ink)}
.adm-btn:disabled{opacity:.5;cursor:default}
.adm-btn:focus-visible{outline:2px solid var(--clause);outline-offset:1px}
.adm-btn.danger{color:var(--accent);border-color:rgba(122,46,34,.4)}
.adm-btn.danger:hover:not(:disabled){background:var(--accent);color:var(--paper);border-color:var(--accent)}

.adm-tabs{display:flex;gap:0;border-bottom:1px solid var(--rule2);margin:1.2rem 0 1rem}
.adm-tab{font:600 .8rem/1 var(--sans);background:none;border:0;border-bottom:2px solid transparent;
  padding:.6rem .9rem;cursor:pointer;color:var(--ink-dim);display:flex;align-items:center;gap:.45rem}
.adm-tab span{font-family:var(--mono);font-size:.7rem;background:var(--sheet);border:1px solid var(--rule);padding:.05rem .35rem}
.adm-tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.adm-tab:focus-visible{outline:2px solid var(--clause);outline-offset:-2px}

.adm-bar{display:flex;align-items:center;gap:.8rem;margin:0 0 .8rem}
.adm-count{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim)}
.adm-empty{font-family:var(--mono);font-size:.8rem;color:var(--ink-dim);border:1px dashed var(--rule2);padding:1.1rem;text-align:center}
.adm-err{border-left:3px solid var(--accent);background:rgba(122,46,34,.06);padding:.6rem .85rem;font-size:.85rem;color:var(--ink-2);max-width:none}
.adm-note{border-left:3px solid var(--clause);background:rgba(59,90,107,.07);padding:.6rem .85rem;font-size:.85rem;color:var(--ink-2);max-width:none}

/* Feedback inbox: messages are the point, so they are set as prose, not squeezed into a table cell. */
.adm-inbox{list-style:none;padding:0;margin:0;max-width:none}
.adm-msg{border:1px solid var(--rule2);background:var(--paper);padding:.85rem 1rem;margin:0 0 .7rem}
.adm-msg-h{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;font-family:var(--mono);font-size:.7rem;color:var(--ink-dim);margin-bottom:.5rem}
.adm-kind{border:1px solid var(--rule2);padding:.05rem .4rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.adm-kind.removal{border-color:var(--accent);color:var(--accent)}
.adm-msg-from{color:var(--ink)}
.adm-msg-meta{margin-left:auto}
.adm-msg-body{white-space:pre-wrap;margin:0;font-size:.88rem;color:var(--ink);max-width:none}
.adm-msg-drop{font-family:var(--mono);font-size:.7rem;color:var(--accent);margin:.4rem 0 0}
.adm-json{background:var(--sheet);border:1px solid var(--rule);padding:.7rem;overflow-x:auto;font-family:var(--mono);font-size:.7rem;line-height:1.5;margin:.6rem 0 0;max-height:26rem}