/* ============================================================
   tool-help.css — THE CORE. Structure for every Tool Shed help page.

   This file is deliberately TOOL-AGNOSTIC and BRAND-FREE. It ships no
   identity of its own: every colour here resolves from the house tokens in
   /clarity-perspective/colors_and_type.css, so a help page that configures
   nothing still renders correctly in the site's own voice.

   A tool gives itself a face by overriding the --th-* slots below in its own
   page, and nothing else. The Highlighter is the FIRST configuration, not the
   base - if it ever went away, this file would not need a single edit. That
   separation is the whole point: the site already has one place where a single
   piece of content quietly became the substrate everything else was written
   against, and paying to unpick that once was enough.

   Four component families, one per section type. Take the one that suits the
   topic; they are designed to sit on the same page without fighting.
     .th-ledger   numbered entries on hairline rules   (changelog)     [from V5]
     .th-table    row grid, name + status + detail     (known issues)  [from V15]
     .th-console  terminal window, output and TODOs    (roadmap)       [from V6]
     .th-panels   partitioned cells, modular type      (intake)        [from V10/V12]

   Motion: every transition here uses the design system's --exhale/--breath and
   is disabled under body.reduced. There is no prefers-reduced-motion query in
   this file, on purpose - these pages carry the footer Motion toggle, and an OS
   query silently overrides it regardless of its state (non-negotiable #6).
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}

/* ---- THE SLOTS -------------------------------------------------------------
   Neutral defaults, all derived. A tool overrides these; nothing else. Keep
   this list short - every slot added here is a decision every future tool has
   to make. */
body[data-tool-help]{
  --th-brand:var(--accent);      /* fills, rules, marks - never guaranteed legible as text */
  --th-accent:var(--accent);     /* ink: links, numerals, badge text - MUST pass contrast */
  --th-tint:color-mix(in srgb,var(--th-brand) 7%,transparent);
  --th-rule:var(--line);
  --th-screen:var(--page-bg2);   /* the console's inner surface */
  --th-mark:var(--th-brand);     /* the highlight swipe behind marked words */
}

/* ---- page frame ---- */
.th{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}

.th-hero{padding:clamp(26px,6vh,64px) 0 clamp(28px,5vh,48px);border-bottom:2px solid var(--ink)}
.th-crumb{font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;transition:color .3s var(--exhale)}
.th-crumb:hover{color:var(--th-accent)}
.th-kick{margin-top:clamp(20px,5vh,40px);font-family:var(--mono);font-size:16px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--th-accent)}
.th-title{margin-top:10px;font-family:var(--display);font-size:clamp(44px,9vw,104px);font-weight:800;
  letter-spacing:-.04em;line-height:.88;color:var(--ink)}
/* The swipe. A highlighter's own mark, used once, on its own name.
   It is a BAND, not an underline. A gradient starting at 62% only paints the
   bottom 38% of the line box, which is roughly the depth of a thick rule and
   reads as one. A real highlighter pass covers the glyphs: this runs 14% to
   94%, so it clears the ascenders and sits just under the descenders, and the
   inline-block keeps the band on the word rather than the whole line. */
.th-title em{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:linear-gradient(transparent 14%,
    color-mix(in srgb,var(--th-mark) 58%,transparent) 14%,
    color-mix(in srgb,var(--th-mark) 58%,transparent) 94%,transparent 94%);
  padding:0 .08em}
.th-lead{margin-top:22px;font-family:var(--serif);font-size:clamp(18px,1.8vw,21px);line-height:1.62;
  color:var(--ink-soft);max-width:62ch}

/* Version notice. Written by the page script only when the ?v= the tool sent is
   behind the current build; renders nothing at all otherwise. */
.th-vnote{display:none;margin-top:20px;padding:13px 16px;font-family:var(--mono);font-size:17px;
  line-height:1.6;color:var(--ink);border-left:3px solid var(--th-brand);background:var(--th-tint);max-width:62ch}
.th-vnote.is-on{display:block}
.th-vnote b{color:var(--ink);font-weight:600}

/* ---- section scaffolding ---- */
.th-sec{padding:clamp(40px,7vh,76px) 0 0;scroll-margin-top:84px}
.th-sec__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.th-sec__no{font-family:var(--mono);font-size:16px;letter-spacing:.08em;color:var(--ink-faint)}
.th-sec h2{font-family:var(--display);font-size:clamp(26px,3.6vw,40px);font-weight:800;
  letter-spacing:-.02em;line-height:1;color:var(--ink)}
.th-sec__note{font-family:var(--mono);font-size:16px;color:var(--ink-faint)}
.th-sec__lead{font-family:var(--serif);font-size:clamp(17px,1.6vw,19px);line-height:1.62;
  color:var(--ink-soft);max-width:64ch;margin:14px 0 4px}

/* =============== .th-ledger — the changelog ============================== */
.th-ledger{margin-top:18px}
.th-entry{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,42px);align-items:baseline;
  padding:clamp(22px,3.2vh,34px) 8px;border-bottom:1px solid var(--th-rule);
  transition:background .35s var(--exhale)}
.th-entry:first-child{border-top:1px solid var(--th-rule)}
.th-entry:hover{background:var(--th-tint)}
.th-entry.is-current{background:var(--th-tint)}
.th-ver{font-family:var(--mono);font-size:clamp(19px,2.6vw,28px);font-weight:500;line-height:.9;
  letter-spacing:-.02em;color:var(--ink-faint);transition:color .35s var(--exhale)}
.th-entry:hover .th-ver,.th-entry.is-current .th-ver{color:var(--th-accent)}
.th-entry__date{display:block;margin-top:9px;font-family:var(--mono);font-size:16px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.th-entry h3{font-family:var(--display);font-size:clamp(19px,2.4vw,25px);font-weight:800;
  letter-spacing:-.01em;line-height:1.15;color:var(--ink);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.th-entry ul{list-style:none;margin-top:12px;max-width:64ch}
.th-entry li{position:relative;padding-left:22px;margin-top:10px;font-family:var(--serif);
  font-size:clamp(17px,1.6vw,18.5px);line-height:1.6;color:var(--ink-soft)}
.th-entry li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--th-brand)}
.th-entry code{font-family:var(--mono);font-size:1em;color:var(--th-accent)}
@media(max-width:600px){.th-entry{grid-template-columns:1fr;gap:6px}
  .th-entry__date{display:inline;margin-left:12px}}

.th-flag{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--r-sm);line-height:1;white-space:nowrap;
  border:1px solid currentColor;color:var(--th-accent)}

/* =============== .th-table — known issues =============================== */
/* A real <table> for a real table: five rows of Issue / Status / Workaround
   that a screen reader should announce as one. The V15 look is the row grid -
   name and badge on the first line, detail spanning beneath - so the cells are
   laid out with grid-template-areas rather than columns. */
.th-table{width:100%;margin-top:20px;border-collapse:collapse;display:block}
.th-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.th-table tbody{display:flex;flex-direction:column;gap:2px}
.th-table tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n s" "d d" "w w";
  gap:6px 14px;align-items:baseline;padding:16px 12px;border-bottom:1px solid var(--th-rule);
  transition:background .3s var(--exhale)}
.th-table tr:hover{background:var(--th-tint)}
.th-table td{display:block}
.th-issue{grid-area:n;font-family:var(--display);font-size:clamp(17px,2.2vw,21px);font-weight:800;
  letter-spacing:-.01em;color:var(--ink)}
.th-status{grid-area:s;justify-self:end;font-family:var(--mono);font-size:16px;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--r-sm);border:1px solid currentColor;
  line-height:1;height:max-content;white-space:nowrap}
.th-status.s-limit{color:var(--ink-faint)}      /* by design, will not change */
.th-status.s-known{color:var(--th-accent)}      /* a bug, on the list */
.th-detail{grid-area:d;font-family:var(--serif);font-size:17.5px;line-height:1.62;color:var(--ink-soft);max-width:66ch}
.th-work{grid-area:w;margin-top:4px;font-family:var(--mono);font-size:16px;line-height:1.55;
  color:var(--ink-faint);padding-left:11px;border-left:2px solid color-mix(in srgb,var(--th-brand) 45%,var(--th-rule));max-width:66ch}
.th-work b{color:var(--ink-soft);font-weight:600}

/* =============== .th-console — the roadmap ============================== */
/* A window, not a page mode. The site's light/dark toggle owns the page; this
   component owns only its own screen, so it reads as a terminal in both. */
.th-console{margin-top:22px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.55)}
.th-console__bar{display:flex;align-items:center;gap:8px;padding:11px 15px;
  background:color-mix(in srgb,var(--th-screen) 60%,var(--page-bg));
  border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.th-dot{width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 26%,transparent)}
.th-console__title{margin-left:10px;font-family:var(--mono);font-size:16px;color:var(--ink-faint)}
.th-console__screen{background:var(--th-screen);padding:clamp(18px,3.2vw,34px);font-family:var(--mono)}
.th-ps1{font-family:var(--mono);font-size:16px;line-height:1.7;color:var(--ink-soft);word-break:break-word}
.th-ps1 .ps{color:var(--th-accent)}
.th-ps1 .pwd{color:var(--ink-faint)}
.th-ps1 .cmd{color:var(--ink)}
.th-caret{color:var(--th-accent);margin-left:1px;animation:th-blink 1.05s steps(1) infinite}
@keyframes th-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
body.reduced .th-caret{animation:none}

.th-out{margin-top:18px;border-top:1px dashed color-mix(in srgb,var(--ink) 16%,transparent)}
.th-task{padding:15px 0;border-bottom:1px dashed color-mix(in srgb,var(--ink) 16%,transparent);
  transition:background .3s var(--exhale)}
.th-task:hover{background:var(--th-tint)}
.th-task__row{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.th-task__name{font-family:var(--mono);font-size:clamp(16px,1.8vw,17px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink)}
.th-task__name::before{content:"./";color:var(--ink-faint);font-weight:400}
.th-badge{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-sm);line-height:1;border:1px solid currentColor}
.th-badge.b-next{color:var(--th-accent)}
.th-badge.b-later{color:var(--ink-faint)}
.th-badge.b-yours{color:var(--ink-faint)}
.th-cmt{font-family:var(--mono);font-size:16.5px;line-height:1.65;color:var(--ink-soft);margin-top:8px;max-width:70ch}
.th-todo{font-family:var(--mono);font-size:16px;line-height:1.5;color:var(--ink-faint);margin-top:5px;max-width:70ch}
.th-legend{font-family:var(--mono);font-size:16px;color:var(--ink-faint);margin-top:20px;line-height:1.7}

/* =============== .th-panels — the intake ================================ */
/* Composition is seeded (see the page script): the seed picks the split
   orientation, the ratio, and the modular type scale. The CONTENT of each cell
   never moves - a person looking for "how do I report a bug" finds the same
   words in the same order under every seed. */
.th-panels{display:grid;gap:14px;margin-top:22px;
  grid-template-columns:var(--th-split,1fr 1fr)}
@media(max-width:760px){.th-panels{grid-template-columns:1fr!important}}
.th-panel{position:relative;padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--th-brand) 26%,var(--th-rule));background:var(--th-tint);
  display:flex;flex-direction:column}
.th-panel__no{font-family:var(--mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.th-panel h3{margin-top:10px;font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1;
  color:var(--ink);font-size:calc(var(--th-scale,1) * clamp(23px,3vw,32px))}
.th-panel p{margin-top:13px;font-family:var(--serif);font-size:17.5px;line-height:1.62;color:var(--ink-soft);max-width:46ch}
.th-panel ol{list-style:none;counter-reset:th-step;margin-top:14px}
.th-panel ol li{counter-increment:th-step;position:relative;padding-left:36px;margin-top:10px;
  font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-soft)}
/* The circle grew with the numeral inside it. A 19px marker was sized around
   10.5px type and clips at the 16px floor. */
.th-panel ol li::before{content:counter(th-step);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--th-brand);color:var(--page-bg);
  font-family:var(--mono);font-size:16px;font-weight:700;display:grid;place-items:center}
.th-panel__foot{margin-top:auto;padding-top:20px}
.th-alt{margin-top:12px;font-family:var(--mono);font-size:16px;line-height:1.55;color:var(--ink-faint);max-width:46ch}

.th-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:16px;
  font-weight:600;text-decoration:none;color:var(--th-accent);padding:10px 16px;border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--th-accent) 42%,transparent);
  transition:background .25s var(--exhale),gap .25s var(--exhale)}
.th-btn:hover{background:color-mix(in srgb,var(--th-brand) 18%,transparent);gap:13px}
.th-btn::after{content:"\2192"}

/* ---- the design harness (only ever visible with ?design=1) ---- */
.th-design{display:none;position:fixed;z-index:60;right:16px;bottom:16px;gap:10px;align-items:center;
  padding:10px 14px;border-radius:var(--r-lg);font-family:var(--mono);font-size:16px;color:var(--ink-soft);
  background:var(--page-bg);border:1px solid var(--th-rule);box-shadow:0 18px 44px -22px rgba(0,0,0,.45)}
.th-design.is-on{display:flex}
.th-design button{font:inherit;cursor:pointer;color:var(--th-accent);background:none;
  border:1px solid color-mix(in srgb,var(--th-accent) 40%,transparent);border-radius:var(--r-sm);padding:4px 9px}
.th-design button:hover{background:var(--th-tint)}
.th-design code{color:var(--ink)}

/* ---- foot ---- */
.th-foot{padding:clamp(46px,8vw,88px) 0 clamp(50px,9vw,100px);text-align:center}
.th-foot p{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,25px);line-height:1.45;
  color:var(--ink);max-width:50ch;margin:0 auto 24px}
.th-foot a{font-family:var(--mono);font-size:16px;color:var(--ink-faint);text-decoration:none;
  transition:color .3s var(--exhale)}
.th-foot a:hover{color:var(--th-accent)}
.th-foot a + a{margin-left:18px}