/* post.css: the blog post design system.
   Canonical spec: Brain/deliverables/token-efficiency-report/BLOG-DESIGN-SYSTEM.md
   Loaded only by pages under /writing/. Everything that styles post content is
   scoped under .trp so it can never reach the site's global stylesheet.

   LOCKED here: shell widths, type stacks and scale, dark neutrals, header
   pattern, and the shared module classes.
   FREE per post: the accent (one of the .accent-* classes on the wrapper) and
   which modules the post uses. Post-specific modules (.statstrip, .modes,
   .habit, .step, .test, .phase) stay inline in that post's own file. */

/* Posts ship dark for everyone. The site chrome renders through data-theme="dark";
   these two rules pull its ground to the post's paper so the page is one surface. */
:root,:root[data-theme="light"],:root[data-theme="dark"]{--bg:#15171A;--bg-2:#101214;}
body{background:#15171A;}

.trp{
  /* neutrals, fixed dark */
  --paper:#15171A; --card:#1D2025; --ink:#EAEBE6; --muted:#A3AAB4; --faint:#7A8290;
  /* accent palette */
  --amber:#EFA43A; --amber-soft:#3A2E17; --blue:#6FA3D8; --blue-soft:#1E2E3E;
  --good:#7CB984; --good-soft:#1B2A1E; --bad:#D97A72;
  --grid:#2A2D31; --rule:#3A3E44;
  /* type stacks */
  --mono:"Cascadia Code",Consolas,"SF Mono",monospace;
  --disp:"Segoe UI Variable Display","Segoe UI",-apple-system,"Helvetica Neue",sans-serif;
  --body:Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;
  /* accent default; override with an .accent-* class on the wrapper */
  --accent:var(--amber);
  background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.65;
}
.trp.accent-amber{--accent:var(--amber);}
.trp.accent-good{--accent:var(--good);}
.trp.accent-blue{--accent:var(--blue);}

/* --- shell ------------------------------------------------------------- */
.trp .wrap{max-width:1000px;margin:0 auto;padding:0 24px 80px;}
.trp .col{max-width:68ch;margin:0 auto;}

/* --- type -------------------------------------------------------------- */
.trp p{font-size:1.05rem;margin:1em 0;}
.trp h1,.trp h2,.trp h3{font-family:var(--disp);line-height:1.15;text-wrap:balance;}
.trp h1{font-size:clamp(2.1rem,5.5vw,3.3rem);font-weight:800;letter-spacing:-.02em;margin:.2em 0 .3em;}
.trp h2{font-size:1.6rem;font-weight:750;letter-spacing:-.01em;margin:2.6em 0 .5em;}
.trp h3{font-size:1.12rem;font-weight:700;margin:1.8em 0 .4em;}
.trp ul,.trp ol{padding-left:1.3em;margin:1em 0;}
.trp li{font-size:1.05rem;margin:.4em 0;}   /* lists read at prose size, not the 16px default */
.trp b,.trp strong{font-weight:700;color:var(--ink);}
.trp a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}

/* --- header pattern ----------------------------------------------------
   The site stylesheet also owns .eyebrow/.dek/.byline, so each of these
   resets every property that rule sets. No hero image: posts open on type. */
.trp .eyebrow{display:block;font-family:var(--disp);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.trp .dek{font-family:var(--body);font-size:1.25rem;color:var(--muted);font-style:italic;
  max-width:60ch;margin:.6em 0 0;}
.trp .byline{display:block;font-family:var(--disp);font-size:.85rem;color:var(--faint);
  margin:1.2em 0 0;padding:0;border:0;}
.trp .trp-back{display:inline-flex;gap:8px;align-items:center;color:var(--muted);
  font-size:14px;font-family:var(--disp);margin:26px 0 0;text-decoration:none;}

/* --- shared modules ---------------------------------------------------- */
.trp .series{font-family:var(--disp);font-size:.82rem;color:var(--muted);background:var(--card);
  border:1px solid var(--grid);border-radius:6px;padding:10px 16px;margin:2rem auto;max-width:68ch;}
.trp .pull,.trp blockquote{border-left:3px solid var(--accent);padding:.2em 0 .2em 1.1em;
  margin:2em 0;font-size:1.3rem;font-style:italic;color:var(--ink);text-wrap:balance;}
.trp .note{background:var(--blue-soft);border-radius:6px;padding:14px 18px;font-size:.95rem;margin:1.6rem 0;}
.trp .warn{background:var(--amber-soft);border-radius:6px;padding:14px 18px;font-size:.95rem;margin:1.6rem 0;}
.trp .plabel{font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:1.6rem 0 -.7rem;}
.trp pre{background:var(--card);border:1px solid var(--grid);border-left:3px solid var(--accent);
  border-radius:0 5px 5px 0;padding:14px 16px;overflow-x:auto;font-family:var(--mono);
  font-size:.85rem;line-height:1.55;margin:1.2rem 0;}
.trp pre.prompt{border-left-color:var(--blue);background:var(--blue-soft);white-space:pre-wrap;}
.trp pre.tree{border-left-color:var(--amber);}
.trp code{font-family:var(--mono);font-size:.9em;background:var(--card);border:1px solid var(--grid);
  border-radius:3px;padding:1px 5px;}
.trp pre code{background:none;border:none;padding:0;font-size:1em;}
.trp table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1.4rem 0;}
.trp th{font-family:var(--disp);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);text-align:left;padding:8px 10px;border-bottom:2px solid var(--rule);}
.trp td{padding:8px 10px;border-bottom:1px solid var(--grid);font-variant-numeric:tabular-nums;}
.trp td.n{font-family:var(--mono);text-align:right;}
.trp figure{margin:2.2rem 0;}
.trp figcaption{font-family:var(--disp);font-size:.83rem;color:var(--muted);margin-top:.7rem;max-width:75ch;}
.trp .chart{background:var(--card);border:1px solid var(--grid);border-radius:6px;
  padding:18px 14px 10px;overflow-x:auto;}
.trp svg{display:block;width:100%;height:auto;}
.trp svg text{font-family:var(--mono);font-size:12px;fill:var(--muted);}
.trp svg .lbl{font-family:var(--disp);font-size:12px;font-weight:600;fill:var(--ink);}
.trp svg .big{font-size:13px;font-weight:700;}
.trp .foot{border-top:2px solid var(--rule);margin-top:4rem;padding-top:1rem;font-family:var(--disp);
  font-size:.82rem;color:var(--faint);}

/* Wide content scrolls inside its own container; the page never scrolls sideways. */
.trp .scroll-x{overflow-x:auto;}
/* A table with enough columns forces a min-content width past a phone viewport,
   and width:100% cannot shrink below it. Let the table scroll itself rather than
   the page. Mobile only: the desktop full-width table is unchanged. */
@media (max-width:640px){
  .trp table{display:block;width:max-content;max-width:100%;overflow-x:auto;}
}

@media (prefers-reduced-motion: reduce){.trp *{transition:none!important;animation:none!important;}}