/* ==========================================================================
   Inner pages.

   The 22 pages ported from the live site share one class vocabulary (card,
   section-head, grid, tier, pill, legal, stat...). Rather than rewrite each
   page, that vocabulary is redefined here in the zine's terms. One stylesheet
   restyles the whole site, and the pages stay diffable against the originals.

   Same rules as zine.css: two inks, square corners, nothing glows, system
   faces only.
   ========================================================================== */

/* ---- legacy token compat ----------------------------------------------
   The 22 ported pages kept their original inline styles, and the four app
   scripts (dashboard, admin, checkout, auth) still write markup against the
   old site.css vocabulary. Those reference tokens the zine never defined, and
   an undefined custom property does not fall back -- it makes the whole
   declaration invalid at computed-value time, so `padding-top:var(--space-8)`
   silently becomes no padding at all. Rather than hand-edit ~60 inline styles
   and 90KB of JS, the old names are re-pointed at zine values here.

   Status colour is the one judgement call. The design allows two inks, so
   there is no green and no amber to map onto: neutral states resolve to ink
   and anything wanting attention resolves to flare. Reading "not orange" as
   fine is consistent across the whole site.
   ------------------------------------------------------------------------ */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;

  --surface-1:var(--paper-2);
  --surface-2:var(--paper-3);
  --bg-base:var(--paper);

  --text:var(--ink);
  --text-primary:var(--ink);
  --text-secondary:var(--ink-60);
  --text-tertiary:rgba(14,14,12,.55);

  --border:var(--ink-30);
  --border-strong:var(--ink);

  --accent:var(--flare);
  --accent-hover:var(--flare);
  --accent-quiet:rgba(255,74,23,.14);

  --success:var(--ink);        --success-quiet:rgba(14,14,12,.08);
  --danger:var(--flare);       --danger-quiet:rgba(255,74,23,.14);
  --warning:var(--flare);
  --ring:var(--flare);

  --font-display:var(--display);
  --font-body:var(--type);
  --font-mono:var(--type);

  /* Square corners are a rule of the design, so every radius resolves to 0
     rather than being chased out of each call site. --radius-full stays round
     because it is only ever used on dots and 8px-tall bars. */
  --radius-sm:0;--radius-md:0;--radius-lg:0;--radius-full:999px;
  --container:var(--max);
  --measure:68ch;

  /* Nothing glows and nothing floats. The zine's depth is a hard offset
     shadow, which .card already applies; elevation tokens go flat. */
  --elev-1:none;--elev-2:none;--elev-3:none;--glow-accent:none;
}

/* ---- page furniture ---------------------------------------------------- */
main{display:block}
section{padding:clamp(30px,5vw,64px) 0;border-bottom:var(--rule)}
section:last-of-type{border-bottom:0}

.section-head{max-width:62ch;margin:0 0 clamp(18px,3vw,34px)}
.section-head h2{margin:0 0 10px}
.section-head p{margin:0;color:var(--ink-60);font-size:16px}

.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:12px;letter-spacing:.2em;
  background:var(--flare);color:var(--ink);padding:3px 9px;margin:0 0 12px;
  transform:rotate(-.7deg)}

.lede{font-size:17px;max-width:62ch;color:var(--ink-60)}
.muted{color:var(--ink-60)}
.tertiary{color:rgba(14,14,12,.55)}
.mono{font-family:var(--type);font-variant-numeric:tabular-nums}
.center{text-align:left}          /* the zine does not centre anything */

/* ---- hero on inner pages ----------------------------------------------- */
.hero{border-bottom:var(--rule);padding:clamp(30px,5vw,70px) 0;
  background:var(--paper)}
.hero h1{font-size:clamp(34px,6.4vw,86px);line-height:.94;max-width:20ch;
  margin:0 0 16px}
.hero .lede{font-size:18px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}

/* ---- cards, as taped-down cuttings ------------------------------------- */
.card{background:var(--paper);border:var(--rule);padding:clamp(16px,2vw,22px);
  box-shadow:7px 7px 0 var(--ink)}
.card h3{margin:0 0 8px}
.card p:last-child{margin-bottom:0}
.page.dark .card,.dark .card{background:var(--ink);color:var(--paper);
  border-color:var(--paper);box-shadow:7px 7px 0 var(--flare)}

/* ---- grids ------------------------------------------------------------- */
.grid{display:grid;gap:clamp(14px,1.8vw,22px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento{grid-template-columns:repeat(6,minmax(0,1fr))}
.bento .c6{grid-column:span 6}.bento .c4{grid-column:span 4}
.bento .c3{grid-column:span 3}.bento .c2{grid-column:span 2}

/* ---- pricing tiers ----------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;border-top:var(--rule);border-left:var(--rule)}
.tier{border-right:var(--rule);border-bottom:var(--rule);
  padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:9px;
  background:var(--paper)}
.tier:nth-child(even){background:var(--paper-2)}
.tier .price,.tier h3+p{font-family:var(--display);font-size:26px;
  letter-spacing:-.02em;margin:0}
.tier ul{list-style:none;padding:0;margin:6px 0 0}
.tier li{padding:5px 0;border-bottom:1px dashed var(--ink-30);font-size:14px}
.tier li:last-child{border-bottom:0}
.tier .btn{margin-top:auto}

/* ---- pills ------------------------------------------------------------- */
.pill{display:inline-block;font-family:var(--display);text-transform:uppercase;
  font-size:11px;letter-spacing:.12em;padding:3px 8px;border:2px solid var(--ink);
  background:var(--paper)}
.pill.ok{background:var(--ink);color:var(--paper)}
.pill.bad{background:var(--flare)}

/* ---- figures ----------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:var(--rule)}
.stat{padding:14px 0;border-right:1px solid var(--ink-12)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,44px);
  line-height:.9;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);margin-top:5px}

/* ---- long-form legal --------------------------------------------------- */
.legal{max-width:74ch;margin:0 auto;padding:clamp(30px,5vw,64px) var(--gut)}
.legal h1{font-size:clamp(32px,5vw,60px);margin:0 0 6px}
.legal .updated{font-family:var(--type);font-size:13px;color:var(--ink-60);
  margin:0 0 clamp(20px,3vw,34px)}
.legal h2{font-size:clamp(19px,2.2vw,26px);margin:clamp(24px,3vw,38px) 0 10px;
  padding-top:12px;border-top:var(--rule)}
.legal h3{font-size:16px;margin:20px 0 8px}
.legal p,.legal li{font-size:15px;line-height:1.7}
.legal ul{padding-left:1.1rem}
.legal li{margin-bottom:7px}
.legal .note{border:var(--rule);border-left:8px solid var(--flare);
  padding:14px 16px;margin:20px 0;background:var(--paper-2)}

/* ---- forms ------------------------------------------------------------- */
.field{margin:0 0 14px}
.field label,form label{display:block;font-family:var(--display);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 5px}
input,select,textarea{width:100%;font-family:var(--type);font-size:15px;
  color:var(--ink);background:var(--paper);border:2px solid var(--ink);
  border-radius:0;padding:9px 10px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--flare);
  outline-offset:2px}
.form-msg{font-size:13px;margin:8px 0 0;min-height:1.2em}
.form-msg.err{color:var(--flare);font-weight:700}
.form-msg.ok{font-weight:700}

/* ---- tooltips ---------------------------------------------------------- */
.tip{position:relative;display:inline-block;margin-left:5px}
.tip-i{display:inline-grid;place-items:center;width:15px;height:15px;
  border:2px solid var(--ink);font-size:10px;font-family:var(--display);
  cursor:help}
.tip-body{display:none;position:absolute;left:0;top:130%;z-index:40;width:250px;
  background:var(--paper);border:var(--rule);box-shadow:7px 7px 0 var(--ink);
  padding:10px 12px;font-family:var(--type);font-size:12.5px;line-height:1.5;
  text-transform:none;letter-spacing:normal;font-weight:400}
.tip:hover .tip-body,.tip:focus .tip-body,.tip:focus-within .tip-body{display:block}

/* ---- code -------------------------------------------------------------- */
pre{background:var(--ink);color:var(--paper);border:0;padding:14px 16px;
  overflow-x:auto;font-size:13px;line-height:1.55}
code.inline,.code{font-family:var(--type);background:var(--flare);
  padding:1px 5px;font-size:13px}

/* ---- dashboard / admin app chrome -------------------------------------- */
/* Those two carry their own header markup using .nav rather than .mast. */
.nav{border-bottom:var(--rule);background:var(--paper);position:sticky;top:0;z-index:60}
.nav-in{max-width:none;margin:0;padding:9px var(--gut);display:flex;
  align-items:center;gap:16px}
.nav-cta{display:flex;align-items:center;gap:12px;margin-left:auto}
/* /report builds its header in report.py rather than from a partial, so its
   link row needs the same treatment the masthead gives .mast nav. */
.nav-in nav{display:flex;gap:18px;flex-wrap:wrap}
.nav-in nav a{font-family:var(--display);text-transform:uppercase;font-size:14px;
  letter-spacing:.06em}
.nav-in nav a:hover{background:var(--flare)}
.dash{max-width:var(--max);margin:0 auto;padding:clamp(20px,3vw,40px) var(--gut)}
.dash .grid{margin-top:18px}
.hidden{display:none!important}

/* ---- app pages: dashboard, admin, checkout, auth ------------------------
   Everything below replaces styling the port dropped: the button variants and
   dashboard furniture that lived in site.css, and the <style> blocks that were
   inline in checkout.html and admin.html. Same rules as the rest of the zine --
   two inks, square corners, hard offset shadows, nothing glows.
   ------------------------------------------------------------------------ */

/* ---- button variants --------------------------------------------------- */
/* .btn already carries the zine's shape. These only say loud, quiet, small,
   full-width -- they do not introduce a second look. */
.btn-primary{background:var(--flare);color:var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-sm{font-size:14px;padding:6px 12px}
.btn-block{width:100%;display:block;text-align:center}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---- key/value rows, timeline, revealed key ---------------------------- */
.kvv .l{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;color:var(--ink-60);margin-bottom:2px}
.kvv .v{font-family:var(--type);font-size:13px}

.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 20px 22px;border-left:2px solid var(--ink-30)}
.timeline li::before{content:"";position:absolute;left:-6px;top:5px;
  width:10px;height:10px;background:var(--ink)}
/* A change is the thing you came to the page for, so it is the one that gets
   the ink. */
.timeline li.change::before{background:var(--flare);outline:2px solid var(--ink)}

.copy-key{font-family:var(--type);font-size:13px;background:var(--ink);
  color:var(--paper);border:var(--rule);padding:10px 12px;word-break:break-all;
  cursor:pointer}
.copy-key:hover{background:var(--flare);color:var(--ink)}
.reveal-out{margin-top:12px}
.spin{opacity:.55}
.per{font-family:var(--type);font-size:13px;font-weight:400;color:var(--ink-60)}

/* .pill.warn: the compat layer resolves --warning to flare, so a warning pill
   is the same object as .pill.bad. Stated once here rather than left implicit. */
.pill.warn{background:var(--flare)}

/* ---- checkout (was inline in checkout.html) ---------------------------- */
.co-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(16px,2.4vw,30px);align-items:start}
.co-summary .price{font-family:var(--display);font-size:44px;font-weight:700;
  line-height:1;margin:8px 0}
.co-summary .price .per{font-size:14px}
.co-summary ul{list-style:none;padding:0;margin:16px 0 0}
.co-summary li{font-size:14px;padding:5px 0;display:flex;gap:8px;
  border-bottom:1px dashed var(--ink-30)}
.co-summary li:last-child{border-bottom:0}
.co-summary li::before{content:"/";color:var(--flare);font-weight:700}
.co-trust{margin-top:16px;padding-top:14px;border-top:2px solid var(--ink);
  font-size:13px;color:var(--ink-60)}
/* Stripe renders its own form inside an iframe it themes itself, so this is a
   deliberate panel around a surface we do not control -- give it the card's
   border and shadow so it reads as taped down like everything else. */
.co-frame{background:var(--paper);border:var(--rule);box-shadow:7px 7px 0 var(--ink);
  padding:12px;min-height:480px}
.co-status{padding:32px;color:var(--ink-60);font-family:var(--type)}

/* ---- admin (was inline in admin.html) ---------------------------------- */
.admin{max-width:var(--max);margin:0 auto;padding:clamp(20px,3vw,40px) var(--gut)}
.gate{max-width:440px;margin:110px auto}

.tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:var(--rule)}
.tab-btn{background:none;border:0;border-bottom:4px solid transparent;
  color:var(--ink-60);font-family:var(--display);font-size:13px;
  text-transform:uppercase;letter-spacing:.14em;padding:9px 14px;cursor:pointer;
  margin-bottom:-2px}
.tab-btn:hover{background:var(--flare);color:var(--ink)}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--flare)}

.health{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  justify-content:space-between;border-left:8px solid var(--ink)}
.health.ok{border-left-color:var(--ink)}
.health.bad,.health.warn{border-left-color:var(--flare)}
.health-main{display:flex;align-items:center;gap:16px}
.health .pill{white-space:nowrap;word-break:normal;flex-shrink:0}
.health-title{font-family:var(--display);font-size:22px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.health-meta{display:flex;flex-wrap:wrap;gap:20px}

.bar{height:10px;background:var(--paper-3);border:2px solid var(--ink);
  overflow:hidden;margin-top:6px}
.bar-fill{height:100%;background:var(--flare);transition:width .4s ease-out}

.tier-row{padding:10px 0;border-bottom:1px dashed var(--ink-30)}
.tier-row:last-child{border-bottom:0}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;font-family:var(--type)}

/* Status chips. Distinct from .brand .badge, which is the masthead disc. */
.badge{display:inline-block;font-family:var(--display);font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;padding:3px 7px;
  border:2px solid var(--ink);background:var(--paper)}
.badge.on{background:var(--ink);color:var(--paper)}
.badge.off{background:var(--flare);color:var(--ink)}

.refresh{display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--ink-60);font-family:var(--type)}
.refresh .dot{width:8px;height:8px;background:var(--flare)}

.conc-item{padding:12px 0;border-bottom:1px dashed var(--ink-30);font-size:14px}
.conc-item:last-child{border-bottom:0}
.conc-transcript{margin-top:8px;max-height:340px;overflow-y:auto;
  background:var(--ink);color:var(--paper);padding:10px;font-family:var(--type);
  font-size:12.5px;white-space:pre-wrap}

/* ---- responsive -------------------------------------------------------- */
@media(max-width:900px){
  .g2,.g3,.g4,.bento{grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr}
  .bento .c6,.bento .c4,.bento .c3,.bento .c2{grid-column:span 1}
}
@media(max-width:700px){
  .card{box-shadow:5px 5px 0 var(--ink)}
  .legal{padding-left:var(--gut);padding-right:var(--gut)}
}