/* Toolkit Labs — theme-app.css
   Owned by MOUSE (design arm). The BRAND-ONLY companion to theme.css, for the
   pages that are applications rather than prose: /try/, /fix/, /companion/**,
   /conformance/. Those pages ship their own layout (their own widths, tables,
   result panes, chat bubbles and forms) and the editorial theme.css would
   fight it — so this file changes COLOUR, WEIGHT and FOCUS only.

   It never sets a width, never touches display, never restyles <pre>, <table>,
   layout or spacing, and adds no !important. It is linked last in <head>, so
   it wins over each page's inline <style> at equal specificity and nothing
   else moves. No web fonts, no JS, no external requests. If it fails to load
   the page renders exactly as it did before. Changes no copy, no number, no
   price, no href. */

:root{
  --bg:#f7f8f3;
  --ink:#171917;
  --ink-soft:#33352f;
  --muted:#63665c;
  --line:#dbdece;
  --accent:#116b63;
  --accent-strong:#0c534d;
  --cta-fg:#f7f8f3;
  --surface:#edefe6;   /* note/callout fill — identical to theme.css */
}

body{background:var(--bg);color:var(--ink-soft);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--cta-fg)}

h1,h2,h3{color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
strong{color:var(--ink)}
small{color:var(--muted)}

a{
  color:var(--accent);
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
a:hover{color:var(--accent-strong)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
a strong{color:inherit}

/* the one commercial signal these pages share with the home page */
a[data-buy]{font-weight:600}

/* buttons: same shape the page already chose, in the brand colour */
button{background:var(--accent);border-color:var(--accent);color:var(--cta-fg)}
button:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* form controls: brand focus ring only — size, padding and border unchanged */
textarea:focus,input:focus,select:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}

footer{color:var(--muted);border-top-color:var(--line)}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{transition:none}}

/* ---------------------------------------------------------------------------
   run 5 (2026-08-27) — HIERARCHY, scoped. Measured problem: rendered side by
   side, /monthly/ (editorial theme.css) reads as a product and /companion/
   reads as an unbranded web form, though /companion/ is the page that charges.
   These rules give the app pages the same three brand signals the money pages
   already have — a display headline with the teal rule, a price that is read
   as a price, and one primary action that outranks the page's other buttons.
   Still: no width, no font, no JS, no external request, no !important, and
   nothing that hides content. Every selector below is either an <h1> (one
   block per page) or the single checkout control. --------------------------*/

h1{
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.15rem);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:.55rem;
}
h1::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin:.7rem 0 0;
  background:var(--accent);
  border-radius:2px;
}

/* the price block on /companion/: read the number first, then the terms */
.price{border-color:var(--line)}
.price > p:first-child > strong:first-child{
  font-size:1.2em;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* THE primary action — only a checkout link's button, never the page's own
   form buttons (Send, Start the ten free messages), which stay as they were */
a[data-buy] button{
  padding:.78rem 1.35rem;
  font-size:1.05rem;
  font-weight:600;
  border-radius:8px;
  letter-spacing:.005em;
  box-shadow:0 1px 2px rgba(17,107,99,.28);
}
a[data-buy]:hover button{background:var(--accent-strong);border-color:var(--accent-strong)}
a[data-buy]:focus-visible{outline:none}
a[data-buy]:focus-visible button{outline:2px solid var(--accent);outline-offset:3px}

/* v2's href-keyed pill (an attribute selector on the raw checkout host) was DELETED by M-100 on
   2026-08-27. It had already stopped reaching anything -- v3 below re-keyed the same
   treatment to data-buy -- and RULING ES now forbids the raw checkout host anywhere in
   shipped bytes, including a dead selector, which the es_gate.py pre-publish scan
   enforces on every file under site/public. Nothing rendered changes: every checkout
   control on the site carries data-buy and is styled by the v3 rule. */

/* ---------- v3 · 2026-08-27 — the checkout links moved to /go/ ----------
   MEASURED this run: every checkout anchor on the site now points at a first-party
   /go/<sku> redirect (61 anchors) and only one raw checkout href survived, so the
   v2 pill above — keyed on that href — stopped reaching /pkg/, /try/ and /conformance/,
   whose price links went back to being underlined text. Re-key the same treatment to
   data-buy, the attribute every checkout control carries whatever the href becomes.
   The :not(:has(button)) guard still keeps /companion/'s link-wrapping-a-button from
   being styled twice, and the page's own form buttons are still never touched. */
a[data-buy]:not(:has(button)){
  display:inline-block;
  margin:.15em .1em;
  padding:.42rem .85rem;
  font-size:.97em;
  background:var(--accent);
  color:var(--cta-fg);
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(17,107,99,.28);
}
a[data-buy]:not(:has(button)):hover{background:var(--accent-strong);color:var(--cta-fg)}
strong:has(> a[data-buy]){font-weight:inherit}

/* ---------------------------------------------------------------------------
   run 7 (2026-08-27) — IDENTITY on the pages a stranger actually lands on.
   Measured: 16 of 47 pages carry no .tlbar at all — the 11 /companion/ pages,
   /conformance/, /fix/, /pkg/, /try/ and /r/<id>/ — so the answer pages that
   rank in search open as anonymous documents: no mark, no name, no thread back
   to the catalogue, while every editorial page opens with the lockup. Rendered
   side by side at 900px, /malformed300/ reads as a product and /companion/cost/
   reads as somebody's notes.

   The lockup is DRAWN, not inserted: no markup, no link, no copy is added. The
   wordmark is the brand's own name, already in every one of these pages' <title>
   and footer, and the mark is an asset this file owns. Both :has() guards do the
   safety work — a browser without :has() drops the rule and renders exactly what
   it rendered before, a page that already has a .tlbar never gets a second one,
   and /fix/ (the one page carrying its own home link at the top of <main>) is
   excluded and given the mark on that real link instead. -------------------- */
/* Two selectors, one lockup: inside <main> where the page has one (so the bar
   lines up with the content column and inherits its padding, e.g. /conformance/
   is inset 40px from the viewport), and on <body> for the /companion/ answer
   pages, which have no <main> at all. */
body:not(:has(.tlbar)):not(:has(main > p:first-child a[href="/"])):not(:has(main))::before,
body:not(:has(.tlbar)):not(:has(main > p:first-child a[href="/"])) main::before{
  content:"Toolkit Labs";
  display:block;
  margin:.15rem 0 1.7rem;
  padding:.1rem 0 .8rem 1.7rem;
  background:url(/brand/mark-96.png) 0 .1rem/1.15rem 1.15rem no-repeat;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:-.01em;
  line-height:1.35;
}

/* /fix/ already links home from the top of <main>: promote that real link to the
   lockup rather than drawing a second one over it. Scoped to the first paragraph
   of <main> — measured: /fix/ is the only page in the site that matches. */
main > p:first-child a[href="/"]{
  padding-left:1.45rem;
  background:url(/brand/mark-96.png) 0 .04rem/1.05rem 1.05rem no-repeat;
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
}
main > p:first-child a[href="/"]:hover{color:var(--accent)}

/* ---------- run 8 · 2026-08-27 — a number may not break mid-digit ----------
   Measured on the live page at 900 px, not guessed: /pkg/ sets
   td{word-break:break-all} in its own <style> so a 64-character SHA-256 wraps
   inside its column; the same rule also splits the byte counts, so "28,568"
   renders as "28,56" / "8" and "22,549" as "22,54" / "9" on two lines — a
   broken figure in a table whose entire purpose is that the figure is
   checkable against `shasum`.
   The fix keeps break-all everywhere it is doing its job and removes it only
   from cells that CANNOT need it: a cell with no element children at all is
   the plain-text column (here, the byte count), never the hash (<small>) or
   the file (<a><code>). nowrap also raises that column's min-content width so
   the table stops squeezing it to one digit.
   FIRST ATTEMPT REJECTED IN THE SAME RUN: overflow-wrap:anywhere on every cell
   made it worse — the intrinsic width dropped further and even the "Bytes"
   header split to "BYTE"/"S". The render, not the reasoning, decided it.
   Degrades safely: a browser without :has() drops the whole rule and renders
   exactly what it renders today. Nothing hidden, no width set. */
main table td:not(:has(*)){
  word-break:normal;
  white-space:nowrap;
}

/* ── Notice callouts (.n) ────────────────────────────────────────────────────
   2026-08-27 (Mouse run 11). The eleven /companion/* pages — the only
   subscription surface on this site — carry `.n{background:#eef1ee;border:1px
   solid #d5dbd5}`. Same off-palette pair as the editorial pages; same
   colour-only correction. No page that links this file today uses .n
   (/try/, /fix/, /pkg/, /conformance/ were checked), so this rule can only
   take effect once the companion pages link this stylesheet. */
.n{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink-soft);
}
