/* ===========================================================
   Paper Commons — chassis
   Byte-identical across all five sites. Sites differ only by
   their tokens file, hero artifact, and copy.
   Uses logical properties throughout so RTL works without a
   second stylesheet.
   =========================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--t-base)/1.55 var(--body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}

.wrap{max-inline-size:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
.wrap-narrow{max-inline-size:var(--wrap-narrow)}

/* ---- accessibility floor ---- */
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{
  position:fixed;inset-inline-start:var(--s-4);inset-block-start:var(--s-4);
  background:var(--ink);color:var(--paper);padding:var(--s-3) var(--s-4);z-index:99
}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap
}
button,[role=button],a.btn,input,select,textarea{min-block-size:44px}

/* ---- the connective tissue ---- */
.label{
  font:500 var(--t-xs)/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)
}

/* ---- topbar ---- */
.top{border-block-end:var(--rule-w) solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:var(--s-4);min-block-size:3.5rem;flex-wrap:wrap}
.mark{
  font:600 var(--t-sm)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;min-block-size:44px
}
.mark b{color:var(--signal);font-weight:600}
.fam{margin-inline-start:auto}
.exit{
  font:600 var(--t-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:var(--rule-strong) solid var(--ink);padding:var(--s-3) var(--s-3);
  background:none;cursor:pointer;color:var(--ink)
}
.exit:hover{background:var(--ink);color:var(--paper)}

/* ---- hero: artifact + thesis ---- */
.hero{padding-block:var(--s-8) var(--s-7);border-block-end:var(--rule-w) solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.thesis h1{
  font:600 var(--t-3xl)/1.06 var(--body);letter-spacing:-.024em;
  margin:var(--s-3) 0 0;max-inline-size:13ch
}
.thesis p{font-size:var(--t-lg);line-height:1.5;max-inline-size:35ch;margin:var(--s-4) 0 0}
.thesis .lede{color:var(--muted);font-size:var(--t-base)}

.artifact{
  justify-self:center;inline-size:100%;max-inline-size:24rem;
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.artifact{animation:none}}

/* generic artifact surfaces — each site fills these differently */
.doc{
  background:var(--card);border:var(--rule-w) solid var(--rule);
  padding:var(--s-5);
  box-shadow:0 1px 0 var(--rule),0 16px 30px -24px rgb(0 0 0 / .45)
}
.doc--cut{border:var(--rule-strong) dashed var(--muted)}
.doc--tabbed{border-block-start:5px solid var(--signal)}
.doc-head{
  display:flex;justify-content:space-between;align-items:baseline;
  border-block-end:var(--rule-strong) solid var(--ink);padding-block-end:var(--s-2)
}
.doc-head .n{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.doc-foot{
  display:flex;justify-content:space-between;padding-block-start:var(--s-3);
  font:500 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)
}
.doc-caption{
  text-align:center;margin-block-start:var(--s-3);
  font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}

/* ---- trust band: the product, not the fine print ---- */
.trust{background:var(--ink);color:var(--paper);padding-block:var(--s-6)}
.trust ul{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.trust li{
  font-size:var(--t-sm);line-height:1.45;padding-block-start:var(--s-3);
  border-block-start:var(--rule-strong) solid rgb(255 255 255 / .35);font-family:var(--sans)
}
.trust li b{display:block;font:600 var(--t-base)/1.25 var(--sans);margin-block-end:var(--s-1)}
.trust .label{color:rgb(255 255 255 / .6)}

/* ---- sections ---- */
.sec{padding-block:var(--s-8);border-block-end:var(--rule-w) solid var(--rule)}
.sec h2{font:600 var(--t-xl)/1.15 var(--body);letter-spacing:-.015em;margin:var(--s-3) 0 0}
.sec .intro,.sec .hint{color:var(--muted);max-inline-size:56ch;margin:var(--s-3) 0 0}
.sec .hint{font-size:var(--t-sm)}

/* ---- tools list with tier stamps ---- */
.tools{list-style:none;margin:var(--s-6) 0 0;padding:0;border-block-start:var(--rule-w) solid var(--rule)}
.tools li{
  display:grid;grid-template-columns:1fr 9rem;gap:var(--s-5);align-items:start;
  padding-block:var(--s-5);border-block-end:var(--rule-w) solid var(--rule)
}
.tools h3{font:600 var(--t-lg)/1.25 var(--body);margin:var(--s-2) 0 0}
.tools h3 a{text-decoration:none;display:inline-flex;align-items:center;min-block-size:44px}
.tools h3 a:hover{color:var(--signal)}
.tools p{margin:var(--s-1) 0 0;color:var(--muted);font-size:var(--t-sm);line-height:1.5;max-inline-size:58ch;font-family:var(--sans)}
.stamp{
  justify-self:end;font:600 var(--t-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:var(--rule-strong) solid currentColor;padding:var(--s-2);white-space:nowrap;margin-block-start:var(--s-2)
}
.stamp--ready{color:var(--signal)}
.stamp--review{color:var(--muted)}

/* ---- limits: equal weight to tools, on purpose ---- */
.limits{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-7)}
.limits li{padding-block:var(--s-3);border-block-start:var(--rule-w) solid var(--rule);font-size:var(--t-sm);line-height:1.5;font-family:var(--sans)}
.limits b{display:block;font-weight:600;font-size:var(--t-base)}
.limits span{color:var(--muted)}

/* ---- forms ---- */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-6);margin-block-start:var(--s-6)}
.f{display:flex;flex-direction:column;gap:var(--s-1)}
.f--wide{grid-column:1/-1}
.f label{font:500 var(--t-xs)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f label em{
  font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--sans);
  font-size:var(--t-sm);color:var(--muted);display:block;margin-block-start:var(--s-1)
}
.f input,.f textarea,.f select{
  font:var(--t-base)/1.4 var(--sans);color:var(--ink);background:var(--card);
  border:var(--rule-strong) solid var(--rule);border-block-end-color:var(--ink);
  padding:var(--s-3);inline-size:100%
}
.f textarea{min-block-size:4.5rem;resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--signal);outline:none}

.acts{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-block-start:var(--s-6)}
.btn{
  font:600 var(--t-sm)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--s-3) var(--s-5);border:var(--rule-strong) solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center
}
.btn:hover{background:var(--signal);border-color:var(--signal)}
.btn--ghost{background:none;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* ---- data tables / checklists ---- */
table{inline-size:100%;border-collapse:collapse;margin-block-start:var(--s-5)}
caption{
  text-align:start;font:500 var(--t-xs)/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-block-end:var(--s-3)
}
th{
  text-align:start;font:500 var(--t-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:var(--s-2);border-block-end:var(--rule-strong) solid var(--ink)
}
td{padding:var(--s-3) var(--s-2);border-block-end:var(--rule-w) solid var(--rule);vertical-align:top;font-size:var(--t-sm)}
td.i{font-family:var(--mono);color:var(--muted);inline-size:2.5rem;font-variant-numeric:tabular-nums}
/* A label inside a cell is a second line about that cell, not a continuation. */
td .label{display:block;margin-block-start:var(--s-1)}
td.tick{inline-size:2rem}
.bx{display:inline-block;inline-size:1rem;block-size:1rem;border:var(--rule-strong) solid var(--muted)}
.bx--on{border-color:var(--signal);background:var(--signal);position:relative}
.bx--on::after{
  content:"";position:absolute;inset-inline-start:.28rem;inset-block-start:.08rem;
  inline-size:.24rem;block-size:.5rem;border:solid var(--card);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)
}
td.blank{block-size:2.4rem}

/* ---- staleness banner (auto-rendered past reviewInterval) ---- */
.stale{
  background:var(--signal-soft);border-block:var(--rule-strong) solid var(--signal);
  padding:var(--s-4) 0;font-size:var(--t-sm)
}
.stale b{color:var(--signal)}

/* ---- footer ---- */
.foot{padding-block:var(--s-6) var(--s-8)}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);font-size:var(--t-sm);color:var(--muted)}
.meta b{display:block;color:var(--ink);font-weight:600;font-family:var(--mono);font-size:var(--t-sm)}
.disc{
  margin-block-start:var(--s-6);padding-block-start:var(--s-5);
  border-block-start:var(--rule-strong) solid var(--ink);
  font-size:var(--t-sm);max-inline-size:62ch;color:var(--muted)
}
.modes{display:flex;gap:var(--s-4);margin-block-start:var(--s-5)}
.modes button{
  background:none;border:none;padding:0;cursor:pointer;color:var(--muted);
  font:500 var(--t-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:underline
}

/* ---- responsive ---- */
@media (max-width:860px){
  :root{--t-3xl:2.25rem;--t-2xl:1.85rem}
  .hero .wrap{grid-template-columns:1fr;gap:var(--s-7)}
  .thesis h1{max-inline-size:none}
  .artifact{order:-1;max-inline-size:21rem}
  .trust ul{grid-template-columns:1fr 1fr}
  .tools li{grid-template-columns:1fr}
  .stamp{justify-self:start;margin-block-start:var(--s-3)}
  .limits{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .meta{grid-template-columns:1fr}
}

/* ---- print: the primary output, not a fallback ---- */
@media print{
  .top,.trust,.exit,.acts,.modes,.no-print{display:none!important}
  .print-only{display:block!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec,.hero{border-color:#999;padding-block:var(--s-4)}
  .doc,.card{box-shadow:none;border-color:#000}
  a{text-decoration:none;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
  .version-stamp{display:block!important;font:9pt var(--mono);color:#444;margin-block-start:var(--s-4)}
}
.print-only{display:none}
.version-stamp{display:none}

/* ===========================================================
   Letter component — sites 07, 08, 09
   All three turn a situation into a posted letter. Shared here
   so the three sites cannot drift apart typographically.
   Sized for a real envelope window and a real printer.
   =========================================================== */
.letter{
  background:var(--card);border:var(--rule-w) solid var(--rule);
  padding:var(--s-8) var(--s-7);max-inline-size:44rem;
  font:var(--t-base)/1.7 var(--sans);
  box-shadow:0 1px 0 var(--rule),0 16px 30px -24px rgb(0 0 0 / .45)
}
.letter-from p,.letter-to p,.letter-date p,.letter-method p{margin:0;line-height:1.45}
.letter-from{margin-block-end:var(--s-6)}
.letter-date{margin-block-end:var(--s-5)}
.letter-method{
  margin-block-end:var(--s-5);font:600 var(--t-xs)/1.5 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal)
}
.letter-to{margin-block-end:var(--s-5)}
.letter-re{font-weight:600;margin:0 0 var(--s-5);padding-block-end:var(--s-3);border-block-end:var(--rule-w) solid var(--rule)}
.letter-body p{margin:0 0 var(--s-4)}
.letter-close{margin-block-start:var(--s-6)}
.letter-close p{margin:0}
.sig-space{block-size:3.5rem;border-block-end:var(--rule-w) solid var(--ink);max-inline-size:18rem;margin-block:var(--s-2) var(--s-2)!important}
.letter-enc{margin-block-start:var(--s-6);font-size:var(--t-sm)}
.letter-enc p{margin:0 0 var(--s-2);font-weight:600}
.letter-enc ul{margin:0;padding-inline-start:var(--s-5)}
@media print{
  .letter{box-shadow:none;border:none;padding:0;max-inline-size:none;font-size:11pt}
  .letter-method{color:#000}
}

/* ===========================================================
   Tool pages
   A tool page is: a heading that says what it makes, a band that
   says where what you type goes, a form, and a result. All nine
   sites use these, so they live here rather than beside a tool.
   =========================================================== */

/* ---- tool masthead. Named .tool-head, not .intro: on an index page
       .intro is already the paragraph under a section heading, and one
       class cannot be both a band and a paragraph. ---- */
.tool-head{padding-block:var(--s-7) var(--s-6);border-block-end:var(--rule-w) solid var(--rule)}
.tool-head h1{
  font:600 var(--t-2xl)/1.12 var(--body);letter-spacing:-.02em;
  margin:var(--s-3) 0 0;max-inline-size:20ch
}
.tool-head p{max-inline-size:56ch;margin:var(--s-4) 0 0}
.tool-head .sub{color:var(--muted);font-size:var(--t-sm);font-family:var(--sans)}

/* ---- privacy band: the promise, stated where it is relevant ---- */
.priv{background:var(--ink);color:var(--paper);padding-block:var(--s-4);font-size:var(--t-sm);font-family:var(--sans)}
.priv .wrap{display:flex;gap:var(--s-5);flex-wrap:wrap;align-items:baseline}
.priv span{color:rgb(255 255 255 / .75)}

/* ---- result region: hidden until there is something to show ---- */
.result{display:none}
.result.on{display:block;margin-block-start:var(--s-6)}
.result h3{font:600 var(--t-xl)/1.2 var(--body);margin:var(--s-6) 0 0}
.result p{max-inline-size:60ch;margin:var(--s-4) 0 0}
.result.warn p,.big{font-size:var(--t-lg);max-inline-size:44ch}

/* A deadline that is close, and one that has gone, must look different from
   one that is comfortable — and must not rely on colour alone to say so. The
   number and the words carry the meaning; the colour only reinforces it. */
.result.urgent .doc--tabbed{border-block-start-color:var(--urgent)}
.result.urgent .count .num{color:var(--urgent)}
.result.over .doc--tabbed{border-block-start-color:var(--over)}
.result.over .count .num{color:var(--over)}

/* An empty state is an instruction, not a mood — see CLAUDE.md §10. */
.empty{color:var(--muted);font-size:var(--t-sm);max-inline-size:56ch;margin:var(--s-5) 0 0}

/* ---- big number: days remaining, percent of a threshold ---- */
.count{display:flex;align-items:baseline;gap:var(--s-3);padding-block:var(--s-4);border-block-end:var(--rule-w) solid var(--rule)}
.count .num{
  font:600 4.25rem/.82 var(--mono);letter-spacing:-.05em;
  color:var(--signal);font-variant-numeric:tabular-nums
}
.count .unit{font:500 var(--t-sm)/1.35 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);padding-block:var(--s-4);margin:0}
.dl div{display:flex;flex-direction:column;gap:var(--s-1)}
.dl dt{font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dl dd{margin:0;font:600 var(--t-sm)/1.2 var(--mono);font-variant-numeric:tabular-nums}
.working{
  font-size:var(--t-xs);color:var(--muted);margin:0;
  border-block-start:var(--rule-strong) solid var(--ink);padding-block-start:var(--s-3)
}

/* ---- choice list: the questions that shape a generated list ---- */
.qs{display:grid;gap:var(--s-3);margin-block-start:var(--s-5)}
.q{
  display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4);
  background:var(--card);border:var(--rule-strong) solid var(--rule);cursor:pointer;
  font:var(--t-sm)/1.4 var(--sans);min-block-size:44px
}
.q:hover{border-color:var(--signal)}
.q input{inline-size:1.15rem;block-size:1.15rem;min-block-size:0;accent-color:var(--signal);flex:none;margin:0}

/* ---- generated checklist: progress, phases, items ---- */
.progress{
  display:flex;align-items:baseline;gap:var(--s-4);margin-block-start:var(--s-5);
  padding:var(--s-4) var(--s-5);background:var(--card);
  border:var(--rule-strong) solid var(--ink);font-family:var(--sans)
}
.progress .n{font:600 2.5rem/.85 var(--mono);color:var(--signal);font-variant-numeric:tabular-nums}
.progress .t{font-size:var(--t-sm);color:var(--muted);line-height:1.4}
.phase{margin-block-start:var(--s-7)}
.phase-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  border-block-end:var(--rule-strong) solid var(--ink);padding-block-end:var(--s-2)
}
.phase-head h3{font:600 var(--t-lg)/1.2 var(--sans);margin:0}
.phase-note{font-size:var(--t-sm);color:var(--muted);margin:var(--s-3) 0 0;font-family:var(--sans)}
.item{
  display:grid;grid-template-columns:1.5rem 1fr;gap:var(--s-4);
  padding-block:var(--s-4);border-block-end:var(--rule-w) solid var(--rule);font-family:var(--sans)
}
.item input{inline-size:1.15rem;block-size:1.15rem;min-block-size:0;accent-color:var(--signal);margin:.2rem 0 0}
.item h4{margin:0;font-size:var(--t-base);font-weight:600;line-height:1.3}
.item .needs{
  font:500 var(--t-xs)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:var(--s-2) 0 0
}
.item .why{font-size:var(--t-sm);line-height:1.55;color:var(--muted);margin:var(--s-2) 0 0;max-inline-size:62ch}
.item .watch{
  font-size:var(--t-sm);line-height:1.55;margin:var(--s-2) 0 0;max-inline-size:62ch;
  padding-inline-start:var(--s-4);border-inline-start:2.5px solid var(--signal)
}
.item.done h4{text-decoration:line-through;color:var(--muted)}
.item .track{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-block-start:var(--s-3);max-inline-size:32rem}
.item .track label{
  font:500 9px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:block;margin-block-end:var(--s-1)
}
.item .track input[type=text]{
  inline-size:100%;font:var(--t-sm)/1.3 var(--sans);padding:var(--s-2);block-size:auto;min-block-size:0;
  background:var(--card);border:var(--rule-w) solid var(--rule);border-block-end-color:var(--muted)
}

/* ===========================================================
   Artifact rows
   Every hero artifact and every generated sheet is one of these
   four row shapes on a .doc surface. They live here so that nine
   sites cannot invent nine versions of the same row.
   =========================================================== */

/* ---- .trk — something that has or has not been done yet ---- */
.trk{
  display:grid;grid-template-columns:1rem 1fr auto;gap:var(--s-3);align-items:start;
  padding-block:var(--s-3);border-block-end:var(--rule-w) solid var(--rule);font-family:var(--sans)
}
.trk .who{font-size:var(--t-sm);line-height:1.3}
.trk .who em{
  display:block;font-style:normal;color:var(--muted);
  font:500 9px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-block-start:var(--s-1)
}
.trk .st{font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trk.on .st{color:var(--signal)}

/* ---- .step — one link in a dependency chain (site 04 numbers these) ---- */
.step{
  display:grid;grid-template-columns:2rem 1fr;gap:var(--s-3);
  padding-block:var(--s-4);border-block-end:var(--rule-w) solid var(--rule);font-family:var(--sans)
}
.step .i{font:600 var(--t-sm)/1.2 var(--mono);color:var(--signal);font-variant-numeric:tabular-nums}
.step h4{margin:0;font-size:var(--t-sm);font-weight:600;line-height:1.3}
.step .b{
  display:block;color:var(--muted);margin-block-start:var(--s-1);
  font:500 9px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase
}
.step.wait .i,.step.wait h4{color:var(--muted)}

/* ---- .chk — a row that carries a verdict or a decision ---- */
.chk{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:start;
  padding-block:var(--s-3);border-block-end:var(--rule-w) solid var(--rule);font-family:var(--sans)
}
.chk .t{font-size:var(--t-sm);line-height:1.3}
.chk .t em{
  display:block;font-style:normal;color:var(--muted);
  font:500 9px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-block-start:var(--s-1)
}
.tag{
  font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:var(--rule-w) solid currentColor;padding:var(--s-1) var(--s-2);color:var(--muted);white-space:nowrap
}
.tag--act{color:var(--signal)}

/* ---- .band — a published threshold, and which side of it you are on.
       Shows the arithmetic and stops there. Nothing in this component
       ever says a person qualifies for anything — see CLAUDE.md §3. ---- */
.you{display:flex;align-items:baseline;gap:var(--s-3);padding-block:var(--s-4);border-block-end:var(--rule-w) solid var(--rule)}
.you .n{font:600 3.25rem/.82 var(--mono);letter-spacing:-.04em;color:var(--signal);font-variant-numeric:tabular-nums}
.you .u{font:500 var(--t-xs)/1.35 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.band{
  display:grid;grid-template-columns:4rem 1fr auto;gap:var(--s-3);align-items:baseline;
  padding-block:var(--s-3);border-block-end:var(--rule-w) solid var(--rule);
  font-family:var(--mono);font-size:var(--t-sm)
}
.band .p{font-weight:600;font-variant-numeric:tabular-nums}
.band .c{color:var(--muted);font-variant-numeric:tabular-nums}
.band .m{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.band.hit,.band.hit .c,.band.hit .m{color:var(--signal)}

/* What the numbers mean, in words, immediately after the numbers. */
.say{margin-block-start:var(--s-6);max-inline-size:60ch}
.say h3{font:600 var(--t-lg)/1.25 var(--body);margin:0}
.say p{margin:var(--s-3) 0 0;font-size:var(--t-sm);line-height:1.6}

/* ---- .card — a .doc cut to wallet proportions ---- */
.card{
  aspect-ratio:3.5/2;display:flex;flex-direction:column;
  border:var(--rule-strong) dashed var(--muted);padding:var(--s-4)
}
.rows{margin-block-start:var(--s-3);display:grid;gap:var(--s-2)}
.row{display:grid;grid-template-columns:8.5ch 1fr;align-items:end;gap:var(--s-3)}
.row .k{font:500 9px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.row .v{
  border-block-end:var(--rule-w) solid var(--rule);min-block-size:1.05rem;
  font:var(--t-sm)/1.05 var(--mono);color:var(--ink);word-break:break-word
}
.card .doc-foot{margin-block-start:auto}
/* Front and back, laid out so both fit one sheet at true size. The dashed
   border is the cut line — no separate crop marks needed. */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-block-start:var(--s-5)}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
@media print{
  @page{margin:.4in}
  .cards{grid-template-columns:3.5in 3.5in;gap:.3in}
  .card{inline-size:3.5in;block-size:2in;aspect-ratio:auto;box-shadow:none}
}

/* ---- the one call to action a hero is allowed ---- */
.start{
  display:inline-flex;align-items:center;min-block-size:44px;margin-block-start:var(--s-5);
  font:600 var(--t-sm)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--s-3) var(--s-5);border:var(--rule-strong) solid var(--ink);
  background:var(--ink);color:var(--paper);text-decoration:none
}
.start:hover{background:var(--signal);border-color:var(--signal)}

/* ---- callout: one thing that matters more than the things around it ---- */
.callout{
  background:var(--signal-soft);border-inline-start:5px solid var(--signal);
  padding:var(--s-4) var(--s-5);margin-block-start:var(--s-5);font-family:var(--sans)
}
.callout ul{margin:var(--s-3) 0 0;padding:0;list-style:none;display:flex;gap:var(--s-3);flex-wrap:wrap}
.callout li{font:600 var(--t-lg)/1 var(--mono);letter-spacing:.04em}
.callout p{margin:var(--s-3) 0 0;font-size:var(--t-sm);color:var(--muted);max-inline-size:56ch}

/* ---- links out: we point at directories other people maintain, rather
       than keeping our own copy to rot. See CLAUDE.md §3. ---- */
.links{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-block-start:var(--s-5)}
.links a{
  display:block;padding:var(--s-4);background:var(--card);text-decoration:none;
  border:var(--rule-strong) solid var(--rule);border-block-end-color:var(--ink);min-block-size:44px
}
.links a:hover{border-color:var(--signal)}
.links b{display:block;font-size:var(--t-base);font-weight:600}
.links em{
  display:block;font-style:normal;color:var(--muted);margin-block-start:var(--s-2);
  font:500 var(--t-xs)/1.5 var(--mono);letter-spacing:.06em
}
@media (max-width:760px){.links{grid-template-columns:1fr}}

/* ---- blank worksheet: what the page is when JavaScript is off.
       Not a fallback so much as the same artifact, unfilled. ---- */
.worksheet{background:var(--card);border:var(--rule-strong) solid var(--ink);padding:var(--s-5);margin-block-start:var(--s-5)}
.worksheet ol,.worksheet ul{margin:var(--s-4) 0 0;padding-inline-start:var(--s-5)}
.worksheet li{margin-block-end:var(--s-4);font-size:var(--t-sm);line-height:1.55}
.write{display:block;border-block-end:var(--rule-w) solid var(--ink);block-size:1.6rem;margin-block-start:var(--s-2)}
.write--tall{block-size:3.2rem}

@media (max-width:760px){
  .item .track{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
}
@media print{
  .priv,.tool-head .sub,.q,.qs,.progress{display:none!important}
  .result{display:block!important}
  .tool-head{border-color:#999;padding-block:var(--s-4)}
  .item,.band,.phase,.trk,.step,.chk{page-break-inside:avoid}
  .card{border-color:#000}
  .item .track input[type=text]{border-block-end:1px solid #000}
}