/* tools/index.html's own CSS, extracted from its inline <style> (Task 11):
 * the toolbox spotlight diagram and its narrow-viewport list fallback,
 * plus the eyebrow/h1/lede intro and a footer override.
 *
 * This page now links tools/_shared/flow.css (it did not before), because
 * its own :root{--font-mono}, *{box-sizing:border-box}, body, .skip-link,
 * .skip-link:focus, .highlight and .highlight::before were byte-identical
 * to what flow.css already declares, and its .footer-top / .footer-wordmark
 * / .footer-links / .footer-copy matched flow.css's own footer rules too.
 * Only footer{max-width} (60rem here, 42rem in flow.css, since this page's
 * main is wider) and .footer-legal{color} (var(--ink-muted) here, not
 * flow.css's var(--ink-faded)) genuinely differ, so those two stay below as
 * overrides, linked after flow.css so they win the cascade tie.
 *
 * The two one-line overrides directly below are per-property leak repairs
 * added on 2026-09-02, because CSS resolves a shared selector's declarations
 * INDIVIDUALLY: a property flow.css sets and this file's own rule never
 * mentions paints through regardless of which rule loads later.
 *
 *   :root      flow.css declares its own token block and loads AFTER
 *              /assets/tokens.css here, so it repainted --ease-ink to a
 *              different easing curve, carried in flow.css under its own
 *              documented exemption. This page's --font-mono needs no repair,
 *              because its own former inline :root already declared the same
 *              shortened stack flow.css uses; only --ease-ink actually moved,
 *              measured rather than assumed.
 *   main       flow.css:43 floors a bare main at min-height:60vh, and the main
 *              rule below never mentions min-height.
 */

/* Nav rules moved to /assets/chrome.css on 2026-09-01. */

:root{--ease-ink:cubic-bezier(0.22, 1, 0.36, 1)}
main{min-height:0}
main{max-width:60rem;margin:0 auto;padding:3.5rem 1.5rem 1rem}
.eyebrow{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 .9rem}
h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin:0 0 1rem}
.lede{font-size:1.05rem;color:var(--ink-muted);max-width:44rem;margin:0 0 2.75rem}


/* The toolbox, as patent callouts driven by a travelling spotlight.
   All nine tools are named permanently in two flanking columns, each joined to
   its marker by a leader line measured off the rendered DOM. One reading light
   walks the diagram, brightening a marker, its line and its label together,
   while the readout under the drawing carries that tool's one line. Hover,
   focus or tap and the light stops and does what you tell it.

   The labels ARE the links. The markers on the drawing are a visual shortcut
   for sighted mouse users, so they stay out of the accessibility tree.

   Below 52rem there is no room either side for leader lines, so the labels
   unpin and stack into a real tappable list with their descriptions showing,
   and the same light walks that list instead. */
.toolbox{margin:0 auto 1.5rem;max-width:57rem}
.pb-stage{position:relative;width:100%}
.pb-fig{position:relative;width:44%;margin:0 auto;background:var(--paper);line-height:0}
.pb-fig img{display:block;width:100%;height:auto}

.pin{position:absolute;transform:translate(-50%,-50%);z-index:3;text-decoration:none}
.pin i{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--orange);color:var(--paper);border:2px solid var(--paper);
  font-family:var(--font-mono);font-style:normal;font-size:.56rem;font-weight:600;line-height:1;
  box-shadow:0 1px 5px rgba(20,20,20,.3);
  opacity:0;transform:scale(.6);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.4,.4,1),background .2s;
}
.pb-fig.ready .pin i{opacity:1;transform:scale(1)}
.pin:nth-of-type(1) i{transition-delay:.05s}.pin:nth-of-type(2) i{transition-delay:.11s}
.pin:nth-of-type(3) i{transition-delay:.17s}.pin:nth-of-type(4) i{transition-delay:.23s}
.pin:nth-of-type(5) i{transition-delay:.29s}.pin:nth-of-type(6) i{transition-delay:.35s}
.pin:nth-of-type(7) i{transition-delay:.41s}.pin:nth-of-type(8) i{transition-delay:.47s}
.pin:nth-of-type(9) i{transition-delay:.53s}

/* The leader lines. Coordinates are written by script; with no script they stay
   at zero length and simply never appear. */
.leaders{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}
.leaders line{stroke:var(--ink-muted);stroke-width:1.25;opacity:.5;vector-effect:non-scaling-stroke;
  transition:opacity .35s,stroke .35s,stroke-width .35s}
.leaders line.lit{stroke:var(--orange);stroke-width:1.8;opacity:1}

/* The column is capped at a share of the stage rather than left to run as far
   as the text wants, so a long name wraps to two lines on a narrow laptop
   instead of hanging off the edge. Shrink-to-fit keeps short names short, which
   is what the leader lines attach to.

   26% was measured against the eleven-tool set, where the binding label was
   "How long is your cash trapped?". That tool was retired on 2026-08-28 and the
   longest surviving name is "Salary, dividend or pension?", which is shorter, so
   the cap is now conservative rather than tight. It still lands inside the stage
   exactly (labels start at 74%), so it was left as it stood. Re-measure before
   raising the font size, and re-measure again if a longer name is ever added. */
.pb-labs a{
  position:absolute;top:var(--t);transform:translateY(-50%);z-index:5;max-width:26%;
  font-family:var(--font-mono);font-size:.72rem;line-height:1.3;letter-spacing:.01em;
  text-decoration:none;color:var(--ink);
  transition:opacity .35s,color .35s;
}
.pb-labs a[data-side="l"]{right:74%;text-align:right}
.pb-labs a[data-side="r"]{left:74%}
.pb-labs a i{font-style:normal;color:var(--orange);font-weight:600;margin-right:.45em}
.pb-labs a b{font-weight:500}
.pb-labs .grp{display:none}
/* One canonical copy of each description, inside the link it describes. The
   desktop readout is a script-filled mirror of it; the mobile list shows this
   copy directly. */
.pb-desc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Resting dim is applied by script, so with no script all nine labels are simply
   readable and nothing is hidden behind an interaction that never arrives.

   The resting state has to stay READABLE, not merely present. These labels are
   the page's only navigation, and at the old .45 they sat at 2.88:1 on paper,
   under half of what small text needs. The dim is now shallow enough to clear
   AA at any size (.78 gives about 8:1) and the light does its distinguishing
   with hue instead: the lit label turns orange-deep. Separating by colour
   rather than by hiding the other seven costs the animation nothing. */
.lit-mode .pin{opacity:.7;transition:opacity .35s,transform .2s}
.lit-mode .pb-labs a{opacity:.78}
.lit-mode .pin.lit{opacity:1}
.lit-mode .pin.lit i{background:var(--orange-deep);transform:scale(1.3)}
.lit-mode .pb-labs a.lit{opacity:1;color:var(--orange-deep)}
.pb-labs a:hover,.pb-labs a:focus-visible{opacity:1;color:var(--orange-deep)}
.pb-labs a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.pb-read{
  font-family:var(--font-display);font-size:1.02rem;line-height:1.45;color:var(--ink-2);
  text-align:center;max-width:34rem;margin:1.5rem auto 0;padding:.85rem 1rem;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  min-height:calc(2.9em + 1.7rem);
}
/* Only ever empty when no script filled it, and two hairlines around nothing is
   worse than no readout at all. */
.pb-read:empty{display:none}
.toolbox-cap{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-muted);text-align:center;margin:1rem 0 0;line-height:1.7;
}

@media (max-width:52rem){
  .toolbox{max-width:30rem;margin-bottom:2rem}
  .pb-fig{width:100%}
  .leaders{display:none}
  .pb-read{display:none}
  /* The markers stay on the drawing so it keeps showing which row the light is
     on, but at 24px they are far under a thumb, so every tap goes to the list. */
  .pin{pointer-events:none}
  .pb-labs{margin-top:1.25rem;border-top:1px solid var(--paper-edge)}
  /* Matches the specificity of the desktop side rule rather than shouting over
     it, so the left-hand column stops being right-aligned once it is a list. */
  .pb-labs a[data-side]{text-align:left}
  .pb-labs a{
    position:static;transform:none;opacity:1;max-width:none;
    display:grid;grid-template-columns:1.9em 1fr;gap:.15rem .5rem;align-items:baseline;
    padding:.7rem .1rem .75rem;border-bottom:1px solid var(--paper-edge);min-height:44px;
    font-family:var(--font-sans);font-size:.95rem;color:var(--ink);
  }
  .pb-labs a i{font-size:.62rem;font-family:var(--font-mono);margin:0}
  .pb-labs a b{font-weight:600}
  .pb-desc{position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    white-space:normal;grid-column:2;font-size:.85rem;line-height:1.45;color:var(--ink-muted)}
  .lit-mode .pb-labs a{opacity:1}
  .lit-mode .pb-labs a.lit{background:var(--orange-wash);color:var(--ink)}
  .pb-labs .grp{
    display:block;font-family:var(--font-mono);font-size:.63rem;font-weight:500;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-muted);padding:1.1rem .1rem .4rem;
    border-bottom:1px solid var(--paper-edge);
  }
}
/* No light ever comes round for these readers, so the diagram has to be fully
   legible standing still. Keep this ABOVE the resting opacity above, never below
   it, or the people who asked for less motion get the faintest page of anyone. */
@media (prefers-reduced-motion:reduce){
  .pin i{opacity:1;transform:none;transition:background .2s}
  .leaders line{opacity:.62}
}

footer{max-width:60rem;margin:3.5rem auto 0;padding:2rem 1.5rem 3rem;border-top:1px solid var(--rule-soft);color:var(--ink-muted);font-size:.9rem}
.footer-legal{color:var(--ink-muted);font-size:.75rem;margin-top:.7rem}