/* Public-site skin (2026-10-13): the look of the redesigned home page, applied to every other public page.
   Loaded AFTER each page's own <style>; body.site turns it on. Analysis-pad paper (pale green, ruled every 28px),
   a thin double margin line, the app's deep green and its own typeface. Text on wide screens sits ON the ruled
   lines (line-height is one or two rules); structured blocks stay plain. Phones get the paper without the rules. */

body.site{
  --ink:#0b2622; --muted:#44544f; --dim:#5f6f6a; --paper:#fafbfa; --paper-line:#e1eae4; --rule:28px;
  --margin-line:#d98a7c; --pen:#c2321c;
  --ruled:repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--paper-line) calc(var(--rule) - 1px) var(--rule));
  background:var(--paper); font-variant-numeric:tabular-nums;
}
/* One typeface site-wide: the pages' inline styles still name IBM Plex Mono in a few places; the site has none. */
body.site, body.site *{ font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,'Segoe UI',system-ui,sans-serif !important; }

/* nav, buttons */
body.site .nav{ background:#fafbfa; border-bottom:3px double var(--ink); }

/* shared top bar (templates/_site_nav.html) */
body.site .nav{ position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top, 0px); backdrop-filter:blur(8px); }
body.site .nav-row{ height:64px; display:flex; align-items:center; justify-content:space-between; max-width:1160px; margin:0 auto; padding:0 28px; }
body.site .nav .mark{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:21px; letter-spacing:-0.01em; color:var(--ink); text-decoration:none; }
body.site .nav-links{ display:flex; align-items:center; gap:28px; }
body.site .nav-links a.simple{ font-size:14.5px; color:var(--muted); font-weight:500; white-space:nowrap; text-decoration:none; }
body.site .nav-links a.simple:hover{ color:var(--ink); }
body.site .nav-burger{ display:none; background:none; border:none; cursor:pointer; padding:10px; margin:-10px 2px -10px -10px; flex-direction:column; justify-content:center; gap:5px; -webkit-tap-highlight-color:transparent; }
body.site .nav-burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform 160ms ease, opacity 160ms ease; }
body.site .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.site .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
body.site .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
body.site .nav-mobile{ display:none; flex-direction:column; max-width:1160px; margin:0 auto; padding:6px 28px 14px; border-top:1px solid var(--paper-line); }
body.site .nav-mobile[data-open="1"]{ display:flex; }
body.site .nav-mobile a.simple{ padding:13px 4px; font-size:15.5px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--paper-line); text-decoration:none; }
@media (max-width:760px){
  body.site .nav-links a.simple, body.site .nav-links .nav-login{ display:none; } body.site .nav-links{ gap:10px; } body.site .nav-burger{ display:flex; }
  body.site .nav-row{ padding:0 20px; } body.site .nav-mobile{ padding:6px 20px 14px; }
}
body.site .btn{ border-radius:8px; }
body.site .btn-ghost{ border-color:var(--ink); }
body.site .nav-links a.simple:hover, body.site .nav-right a.simple:hover{ text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:5px; text-decoration-thickness:2px; }
body.site h1, body.site h2, body.site h3{ letter-spacing:-.03em; text-wrap:balance; }
body.site :focus-visible{ outline:2px solid var(--pen); outline-offset:3px; }
body.site footer{ background:var(--ink); color:#cfdcd6; border-top:none; }
body.site footer .foot-mark{ color:#fff; }
body.site footer .fine, body.site .foot-links a, body.site .foot-links .linklike, body.site footer .disclaimer, body.site footer .tm-notice{ color:#a9bfb6 !important; }
body.site .foot-links a:hover, body.site .foot-links .linklike:hover{ color:#fff !important; }

/* sheets (white blocks on the pad) */
body.site .callout, body.site .also, body.site .sample, body.site .who, body.site .find, body.site .panel, body.site .path,
body.site .cmp-wrap, body.site .export-mock, body.site .tsc-row{ border-color:#bccfc4; border-radius:10px; }
body.site .cta-band{ background:#fff; border:1px solid #bccfc4; border-radius:12px; }
body.site .eyebrow, body.site .eyebrow-plain, body.site .tag, body.site .also .eyebrow, body.site .post-tag, body.site .who .tag, body.site .panel .tag,
body.site .price-left .tname, body.site .path .pn, body.site .em-row.head, body.site .piece-num, body.site .sample-head{ text-transform:none; letter-spacing:0; font-size:13.5px; }
body.site .hero .eyebrow{ background:none; border:none; border-radius:0; padding:0; color:var(--accent); font-weight:700; }

/* page headers that used to be dark teal banners: the pad, with the headline on the lines */
body.site .top, body.site .hero{ background-color:var(--paper); background-image:none; color:var(--ink); }
body.site .top h1, body.site .hero h1{ color:var(--ink); }
body.site .hero .eyebrow{ background:none; border:none; border-radius:0; padding:0; color:var(--accent); font-weight:700; }
body.site .top p, body.site .hero p, body.site .hero .lead{ color:var(--muted); }
body.site .top .back, body.site .hero-note{ color:var(--dim); }
body.site .top .back:hover{ color:var(--ink); }
body.site .top .btn-ghost, body.site .hero .btn-ghost{ color:var(--ink); border:1.5px solid var(--ink); }
body.site .top .btn-ghost:hover, body.site .hero .btn-ghost:hover{ background:#fff; }

/* the margin line: wide screens, beside the content column */
@media (min-width:901px){
  body.site-wide main, body.site-narrow main, body.site-article main{ position:relative; }
  body.site-wide main::before, body.site-narrow main::before, body.site-article main::before{ content:""; position:absolute; top:0; bottom:0; left:calc(50% - var(--half, 560px) + 4px); width:4px;
    border-left:1px solid var(--margin-line); border-right:1px solid var(--margin-line); pointer-events:none; z-index:2; }
  body.site .top, body.site .hero{ background-image:var(--ruled); padding-top:calc(var(--rule) * 3); padding-bottom:calc(var(--rule) * 3); }
  body.site .top h1, body.site .hero h1{ font-size:min(3.6vw,46px); line-height:calc(var(--rule) * 2); margin:0 0 var(--rule); position:relative; top:6px; max-width:21em; }
  body.site .top p, body.site .hero p.lead, body.site .hero .sub{ font-size:17px; line-height:var(--rule); margin:0; position:relative; top:5px; }
  body.site .hero .eyebrow{ display:block; height:var(--rule); line-height:var(--rule); }
  body.site .top .back{ display:block; height:var(--rule); line-height:var(--rule); margin:0; }
  body.site .top .ctas, body.site .hero-ctas{ margin-top:var(--rule); }
}

/* long-form articles: every text block carries its own ruling, so the type stays on the lines after a table or callout */
@media (min-width:901px){
  body.site-article{ --half:380px; }
  body.site-article article{ padding-top:calc(var(--rule) * 2); }
  body.site-article article > h1, body.site-article article > h2, body.site-article article > h3, body.site-article article > p,
  body.site-article article > ul, body.site-article article > ol, body.site-article article > .dek{
    background-image:var(--ruled); margin:0; padding-bottom:var(--rule); }
  body.site-article article > h1{ font-size:40px; line-height:calc(var(--rule) * 2); position:relative; top:6px; }
  body.site-article article > .dek{ font-size:17px; line-height:var(--rule); color:var(--muted); }
  body.site-article article > h2{ font-size:24px; line-height:var(--rule); padding-top:var(--rule); position:relative; }
  body.site-article article > h3{ font-size:17px; line-height:var(--rule); }
  body.site-article article > p, body.site-article article > ul, body.site-article article > ol{ font-size:16px; line-height:var(--rule); color:#1f2d29; }
  body.site-article article > ul li, body.site-article article > ol li{ margin:0; }
  body.site-article article > .callout, body.site-article article > .cta-band, body.site-article article > .also, body.site-article article > .sample,
  body.site-article article > .cmp-wrap{ margin-top:0; margin-bottom:var(--rule); }
}
@media (min-width:901px){ body.site-wide{ --half:580px; } body.site-narrow{ --half:450px; } }
@media (max-width:900px){ body.site main::before{ display:none !important; } }

/* blog width + footer width (2026-10-15): articles were a 720px column; give them a readable 860px sheet and let the footer span like the rest of the site */
body.site-article .wrap{ max-width:860px; }
body.site .foot-row, body.site footer .tm-notice{ max-width:1160px !important; }
@media (min-width:901px){
  body.site-article{ --half:430px; }
  body.site-article article > p, body.site-article article > ul, body.site-article article > ol{ font-size:17px; }
  body.site-article article > h1{ font-size:44px; }
  body.site-article article > h2{ font-size:26px; }
  body.site-article article > .dek{ font-size:18px; }
}
/* worked examples keep their columns: monospace, line breaks preserved, scroll rather than wrap on phones */
body.site .example-box, body.site .example-box *{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace !important; }
body.site .example-box{ white-space:pre; overflow-x:auto; font-size:13.5px; }