/* ─────────────────────────────────────────────────────────────────────────────
 * AWARDLY TOOLBOX — THE SHELL STYLESHEET
 *
 * Half of the shell contract; js/shell.js is the other half. A tool built in any
 * framework can link this file and reproduce the header markup by hand. The class
 * names ARE the contract, so a tool that already exists elsewhere can join the
 * shelf without being rewritten.
 *
 * ⚠ THE TOOLBOX HAS ITS OWN IDENTITY AND IT IS NOT AWARDLY.APP'S.
 * awardly.app is gold on cream. The toolbox is blues and whites with a crystal
 * five-point star on deep navy. Founder, 2026-08-29: "The star is the family link
 * across the sites. The colour is not. Do not restyle the toolbox to match
 * awardly.app."
 *
 * ⚠ EVERY COLOUR BELOW WAS SAMPLED OUT OF brand/awardly-toolbox-landing.png,
 * the artwork that carries the identity, rather than chosen by eye. That file is
 * committed at 1227dfa because it was serving from an origin with no repository
 * behind it and may have been its only copy.
 *
 * Single theme, deliberately. The identity is a dark one; a light variant would be
 * an invention rather than the brand. Every surface paints its own background and
 * foreground so nothing borrows the host's.
 * ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* grounds, darkest to lightest, from the landing artwork */
  --ground:#000310;        /* page: the dominant colour of the artwork */
  --surface:#050B18;       /* cards and header */
  --raise:#081222;         /* inset panels, table headers */
  --deep:#000208;          /* the darkest band */

  /* text */
  --ink:#F0F0F0;           /* sampled: the white used for headlines and body */
  --ink-2:#A8B6CC;
  --ink-3:#6E8098;

  /* rules */
  --rule:#14203A;
  --rule-2:#1E2C4A;

  /* the crystal blues */
  --accent:#5B93DD;        /* star core: links, accents, the "Toolbox" half of the wordmark */
  --accent-bright:#8FB8F0; /* star highlight */
  --accent-deep:#082D6B;   /* button fill */
  --accent-soft:#0C1B33;   /* tinted panel */

  --yes:#5FBF7F; --yes-soft:#0C2416;
  --no:#E07A7A;  --no-soft:#2A1414;
  --warn:#E0B24A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.tb-wrap{max-width:1000px;margin:0 auto;padding:0 22px}
.tb-col{max-width:68ch}

a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-bright)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── header ─────────────────────────────────────────────────────────── */
.tb-head{border-bottom:1px solid var(--rule);background:var(--surface)}
.tb-head-in{max-width:1000px;margin:0 auto;padding:15px 22px;
  display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.tb-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.tb-star{width:40px;height:40px;flex:0 0 auto;display:block}
/* ⚠ BOTH BLOCK. In the identity artwork the tagline sits UNDER the wordmark, not beside
 * it. As inline spans they ran together on one line, which is a different lockup from the
 * one the brand uses. */
.tb-word{display:block;font-family:Georgia,'Times New Roman',serif;font-size:23px;
  font-weight:700;line-height:1.05;letter-spacing:.1px}
.tb-word .b{color:var(--accent)}
.tb-tagline{display:block;font-size:9.5px;letter-spacing:2.3px;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-top:3px}
.tb-nav{margin-left:auto;display:flex;gap:20px;font-size:14.5px}
.tb-nav a{color:var(--ink-2);text-decoration:none}
.tb-nav a:hover,.tb-nav a[aria-current="page"]{color:var(--accent)}

/* ── main ───────────────────────────────────────────────────────────── */
/* ⚠ 10px of this went to the taller hero (2026-09-01). The fold gate is the arbiter. */
.tb-main{padding:4px 0 70px}
h1{font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:clamp(29px,4vw,42px);line-height:1.14;letter-spacing:-.01em;
  margin:0 0 15px;text-wrap:balance;max-width:24ch}
h1 .b{color:var(--accent)}
h2{font-family:Georgia,'Times New Roman',serif;font-weight:700;
  font-size:clamp(20px,2.4vw,26px);line-height:1.25;margin:46px 0 12px;
  text-wrap:balance;max-width:32ch}
h3{font-weight:600;font-size:16px;margin:26px 0 8px;color:var(--ink)}
p{margin:0 0 16px}
.tb-lede{font-size:19px;color:var(--ink-2);max-width:64ch}
.tb-eyebrow{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 9px}

/* ── as-at convention ───────────────────────────────────────────────── */
.asat{border:1px solid var(--rule);background:var(--raise);border-radius:4px;
  padding:13px 16px;margin:18px 0;font-size:14px;color:var(--ink-2)}
.asat b{color:var(--ink);font-weight:600}
.asat ul{margin:7px 0 0;padding-left:19px}
.asat li{margin-bottom:4px}
.asat .prov{display:inline-block;background:var(--accent-soft);color:var(--warn);
  border:1px solid var(--rule-2);border-radius:3px;padding:1px 7px;font-size:12px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-left:4px}

/* ── the shelf ──────────────────────────────────────────────────────── */
.tb-shelf{display:grid;grid-template-columns:1fr;gap:13px;margin:9px 0 0;padding:0;list-style:none}
@media(min-width:720px){.tb-shelf{grid-template-columns:1fr 1fr}}

.tb-card{border:1px solid var(--rule);background:var(--surface);border-radius:5px;
  padding:14px 21px;display:flex;flex-direction:column;position:relative}
.tb-card h3{margin:0 0 6px;font-size:17.5px}
.tb-card h3 a{text-decoration:none}
.tb-card h3 a:hover{text-decoration:underline}
.tb-card p{margin:0 0 12px;font-size:14.5px;color:var(--ink-2)}
.tb-card .tb-meta{margin-top:auto;font-size:12.5px;color:var(--ink-3);
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace}
.tb-card.live{border-left:3px solid var(--accent)}

/* ⚠ AN IN-DEVELOPMENT CARD MUST NOT LOOK CLICKABLE. Founder ruling: "A card that
 * looks live and does nothing is worse than one that says it is coming." So these
 * carry no anchor at all, are visibly recessed, and the cursor never changes. */
.tb-card.dev{background:transparent;border-style:dashed;border-color:var(--rule-2);
  cursor:default}
.tb-card.dev h3{color:var(--ink-3);font-weight:600}
.tb-card.dev p{color:var(--ink-3)}
.tb-card.dev .tb-meta{color:var(--rule-2)}

.tb-tag{display:inline-block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;border-radius:3px;padding:2px 7px;margin-left:8px;vertical-align:2px}
.tb-tag.live{background:var(--accent-deep);color:var(--accent-bright);border:1px solid var(--accent)}
.tb-tag.dev{background:transparent;color:var(--ink-3);border:1px dashed var(--rule-2)}

/* ── forms ──────────────────────────────────────────────────────────── */
.tb-form{border:1px solid var(--rule-2);background:var(--surface);border-radius:5px;
  padding:22px 24px;margin:22px 0}
.tb-field{margin-bottom:18px}
.tb-field:last-child{margin-bottom:0}
label{display:block;font-weight:600;font-size:15px;margin-bottom:5px;color:var(--ink)}
.tb-hint{font-size:13.5px;color:var(--ink-3);margin:0 0 7px}

/* a field heading that is NOT a form label. It was marked up as a <label> with no `for`,
   which promises an association to a screen reader and then does not deliver one. */
.tb-fieldhead{font-weight:600;font-size:15px;margin:0 0 5px;color:var(--ink)}

/* the three tests, numbered so each can be judged on its own rather than parsed out of a
   sentence. Slightly brighter than a hint: these are the decision, not context for it. */
.tb-tests{margin:4px 0 10px;padding-left:22px;font-size:14.5px;color:var(--ink-2);
  line-height:1.55}
.tb-tests li{margin-bottom:5px}
.tb-tests li::marker{color:var(--accent);font-weight:700}

/* the consequence of failing the third test, which is the one people get wrong */
.tb-consequence{font-size:13.5px;color:var(--ink-2);margin:0 0 4px;
  border-left:2px solid var(--rule-2);padding-left:11px}
input[type=text],input[type=number]{
  width:100%;max-width:340px;padding:10px 12px;font-size:16px;font-family:inherit;
  color:var(--ink);background:var(--deep);border:1px solid var(--rule-2);border-radius:4px}
input::placeholder{color:var(--ink-3)}
.tb-check{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.tb-check input{margin-top:5px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--accent)}
.tb-check label{font-weight:400;font-size:15px;margin:0;color:var(--ink-2)}

/* ── results and tables ─────────────────────────────────────────────── */
.verdict{display:inline-block;font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:3px;padding:3px 9px;white-space:nowrap}
.verdict.small{background:var(--yes-soft);color:var(--yes);border:1px solid var(--yes)}
.verdict.not{background:var(--no-soft);color:var(--no);border:1px solid var(--no)}
.verdict.na{background:var(--raise);color:var(--ink-3);border:1px solid var(--rule-2)}

.tb-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:5px;
  background:var(--surface);margin:18px 0}
table{border-collapse:collapse;width:100%;font-size:14.5px}
caption{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);
  background:var(--raise);font-weight:600;font-size:14px;color:var(--ink)}
th,td{padding:10px 15px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-weight:400;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  word-break:keep-all;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.num{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-weight:600;color:var(--accent)}
tr.exception td{background:var(--accent-soft)}
tr.unchanged td{color:var(--ink-2)}
.basis-note{display:block;font-size:12px;color:var(--warn);margin-top:2px;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace}

/* ── callouts ───────────────────────────────────────────────────────── */
.note{border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:14px 18px;margin:20px 0;border-radius:0 4px 4px 0}
.note p{margin:0 0 10px;font-size:15.5px;color:var(--ink-2)}
.note p:last-child{margin:0}
.note b{font-weight:700;color:var(--ink)}
.quote{border-left:3px solid var(--rule-2);background:var(--raise);padding:16px 20px;
  margin:18px 0;border-radius:0 4px 4px 0;font-size:15px;color:var(--ink-2)}
.quote p{margin:0 0 10px}
.quote p:last-child{margin:0}
.quote cite{display:block;font-style:normal;font-size:13px;color:var(--ink-3);margin-top:10px}

/* ── footer ─────────────────────────────────────────────────────────── */
.tb-foot{border-top:1px solid var(--rule);background:var(--surface);margin-top:56px}
.tb-foot-in{max-width:1000px;margin:0 auto;padding:26px 22px 40px;font-size:13.5px;color:var(--ink-3)}
.tb-foot p{margin:0 0 9px;max-width:76ch}
.tb-foot b{color:var(--ink-2)}
.tb-privacy{border:1px solid var(--rule-2);border-radius:4px;padding:12px 15px;margin:0 0 16px;
  background:var(--raise);color:var(--ink-2);font-size:13.5px}
.tb-privacy b{color:var(--ink)}


/* ═══ HERO BAND ════════════════════════════════════════════════════════════════
 * Composition mirrors awardly.app: copy left, star right with dust around it.
 *
 * ⚠ HEIGHT IS THE CONSTRAINT, NOT THE DECORATION. Founder: "the cards must still be
 * visible or nearly visible without scrolling. The value of this page is that the tools
 * are right there. A hero that pushes them below the fold costs more than it gains."
 * Measured before building: the first card sat 73px above the fold at 1366x640, so that
 * was the entire budget. The band is therefore sized to the COPY, and the star is fitted
 * to the band rather than the band being opened up to fit the star.
 * recon/_check_fold.cjs is what keeps this honest.
 * ════════════════════════════════════════════════════════════════════════════ */
.tb-hero{border-bottom:1px solid var(--rule);background:var(--deep);overflow:hidden;
  position:relative}
/* ⚠ NO z-index HERE. .tb-hero-in must not become a stacking context: the crystal is an <img>
 * with mix-blend-mode:screen, and screen blends against the BACKDROP. Cut it off from the dust
 * layer behind it and the star stops looking like itself — the one thing ruled out. Positioned
 * siblings with z-index:auto paint in tree order, and the field is written before the copy. */
.tb-hero-in{max-width:1000px;margin:0 auto;padding:10px 22px 8px;
  display:grid;/* ⚠ THE COPY COLUMN IS WIDER THAN IT LOOKS IT SHOULD BE, and the star does not pay for it:
   the star is at its max-width cap (432px) inside a 430-440px art cell, so shifting the
   ratio toward the copy costs the crystal nothing and lets the accent clause hold one line. */
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:20px;align-items:center;position:relative}
/* ⚠ THE HEADLINE GROWS FOR FREE. The star column is the taller of the two, so the copy column
 * has slack: at 440px the star is ~276px against a copy block of ~170px. Every pixel spent on
 * type here costs the fold NOTHING until the copy exceeds the star. That is why "larger hero"
 * did not have to mean "taller band". */
/* ⚠ THE BREAK IS FORCED, NOT MEASURED. A max-width cap did nothing here: the column was
 * already 507px and "The tools you need. Right" fits inside it, so the orphan survived. The
 * accent clause is its own block instead, which breaks at the sentence deterministically at
 * every width rather than wherever the measure happens to land. Type is 37px so the second
 * line still fits on one line — at 39px it wrapped to three and cost the fold 44px. */
.tb-hero-copy h1{margin:2px 0 10px;font-size:37px;line-height:1.14;letter-spacing:-.4px}
.tb-hero-copy h1 .b{display:block}
.tb-hero-copy .tb-lede{margin:0;font-size:17px;max-width:46ch}
.tb-hero-art{display:flex;align-items:center;justify-content:center;min-width:0;
  margin-right:-40px}

/* ═══ THE FIELD — three layers, after awardly.app ═══════════════════════════════════════════
 * Founder 2026-09-01: awardly.app's hero works because it has three layers, not one — the
 * anchor star, dust scattered around it, and sparse FLAT stars in the field. Carried across as
 * LAYERING ONLY: the palette stays the toolbox crystal blues, never Awardly gold (BRAND_SPEC).
 *
 * ⚠ THE ANCHOR IS UNCHANGED. .tb-star-art keeps its crop, its screen blend and its mask. It is
 * bigger and nothing else. What follows is only what sits AROUND it.
 *
 * ⚠ RESTRAINT IS THE WHOLE POINT — "sparse, irregular, not a pattern, not symmetrical, nothing
 * competing with the wordmark or the text." So the positions below are hand-placed and
 * deliberately uneven: no repeat, no grid, no mirrored pairs, denser toward the star and
 * thinning leftward so the field reads as one drift rather than a texture.
 *
 * ⚠ NO NEW COLOUR ENTERS THE STYLESHEET. Every value is color-mix() over an existing token, and
 * the flat star is a mask carrying no fill of its own — the same discipline the star artwork
 * comment sets out, and it keeps recon/_check_brand_spec.cjs meaningful rather than bypassed.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */
.tb-hero-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tb-hero-field span{position:absolute;inset:0;display:block}

/* layer 2 — diamond dust, scattered across the whole band rather than ringing the star */
.tb-dust{
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle 1.6px at 71% 22%, color-mix(in srgb,var(--ink) 88%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.1px at 64% 61%, color-mix(in srgb,var(--accent-bright) 82%,transparent) 0,transparent 100%),
    radial-gradient(circle 2.1px at 83% 38%, color-mix(in srgb,var(--ink) 72%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.3px at 77% 74%, color-mix(in srgb,var(--accent-bright) 70%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 58% 15%, color-mix(in srgb,var(--accent-bright) 60%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.7px at 90% 57%, color-mix(in srgb,var(--ink) 66%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.2px at 68% 88%, color-mix(in srgb,var(--accent-bright) 55%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.5px at 94% 19%, color-mix(in srgb,var(--accent-bright) 74%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 86% 82%, color-mix(in srgb,var(--ink) 58%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.9px at 61% 44%, color-mix(in srgb,var(--ink) 62%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.1px at 97% 46%, color-mix(in srgb,var(--accent-bright) 52%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.4px at 74% 9%,  color-mix(in srgb,var(--accent-bright) 64%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 80% 66%, color-mix(in srgb,var(--ink) 54%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.6px at 88% 30%, color-mix(in srgb,var(--accent-bright) 68%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.2px at 66% 33%, color-mix(in srgb,var(--ink) 50%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 92% 71%, color-mix(in srgb,var(--accent-bright) 46%,transparent) 0,transparent 100%),
    /* the leftward drift — sparser and fainter, so the field crosses the band without
       ever becoming texture behind the headline */
    radial-gradient(circle 1.3px at 41% 8%, color-mix(in srgb,var(--accent-bright) 52%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 33% 89%, color-mix(in srgb,var(--ink) 44%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.5px at 52% 84%, color-mix(in srgb,var(--accent-bright) 40%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.1px at 27% 11%, color-mix(in srgb,var(--accent-bright) 46%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 18% 93%, color-mix(in srgb,var(--ink) 38%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.4px at 36% 94%, color-mix(in srgb,var(--ink) 40%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 12% 78%, color-mix(in srgb,var(--accent-bright) 26%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.2px at 34% 91%, color-mix(in srgb,var(--accent-bright) 30%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 5%  14%, color-mix(in srgb,var(--ink) 34%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.3px at 55% 5%,  color-mix(in srgb,var(--accent-bright) 36%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 24% 6%,  color-mix(in srgb,var(--accent-bright) 40%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.1px at 14% 84%, color-mix(in srgb,var(--ink) 36%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.2px at 9%  71%, color-mix(in srgb,var(--accent-bright) 32%,transparent) 0,transparent 100%),
    radial-gradient(circle 1px   at 49% 96%, color-mix(in srgb,var(--ink) 34%,transparent) 0,transparent 100%),
    radial-gradient(circle 1.3px at 3%  58%, color-mix(in srgb,var(--accent-bright) 28%,transparent) 0,transparent 100%)}

/* layer 3 — the flat stars. Sparse, uneven sizes, none of them near the wordmark.
 * ⚠ THE SVG CARRIES NO FILL OF ITS OWN: it is a MASK, and the colour is one background-color
 * underneath it. A hardcoded blue in the data URI would be invisible to the brand gate. */
.tb-flats{
  background-color:color-mix(in srgb,var(--accent-bright) 62%,transparent);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E");
          mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7 5 11.3 12 12-7 .7-11.3 5-12 12-.7-7-5-11.3-12-12C7 11.3 11.3 7 12 0z' fill='black'/%3E%3C/svg%3E");
  /* uneven on purpose: no two the same size, no two on a shared axis */
  -webkit-mask-size:17px 17px, 9px 9px, 12px 12px, 7px 7px, 14px 14px, 8px 8px, 10px 10px;
          mask-size:17px 17px, 9px 9px, 12px 12px, 7px 7px, 14px 14px, 8px 8px, 10px 10px;
  -webkit-mask-position:57% 9%, 86% 66%, 96% 24%, 70% 86%, 78% 38%, 39% 92%, 64% 54%;
          mask-position:57% 9%, 86% 66%, 96% 24%, 70% 86%, 78% 38%, 39% 92%, 64% 54%}

/* the scrim — last in tree order so it quiets dust AND flats under the copy, and nothing else.
 * Straight from awardly.app's .hero::after, which exists for exactly this reason. */
.tb-scrim{background:linear-gradient(to right,
  color-mix(in srgb,var(--deep) 62%,transparent) 0%,
  color-mix(in srgb,var(--deep) 44%,transparent) 22%,
  color-mix(in srgb,var(--deep) 14%,transparent) 40%,
  transparent 52%)}

@media (prefers-reduced-motion:no-preference){
  .tb-flats,.tb-dust{transition:opacity .4s ease}
}

/* ⚠ THE SVG CARRIES NO COLOUR OF ITS OWN. Its facets and particles are these three
 * classes, so every colour in the artwork lives in this stylesheet and is therefore
 * inside what recon/_check_brand_spec.cjs already reads. A hardcoded blue in the SVG
 * would have been invisible to that gate. */
/* ⚠ margin-block:0 AND max-width TUNED TO THE FOLD. The star is as large as it can be while
 * remaining WHOLE: any bigger and overflow:hidden cuts its lower point, which reads as a
 * crop rather than a bleed. 1366x640 sets this ceiling, not taste. */
.tb-star-art{width:100%;max-width:432px;height:auto;display:block;margin-block:0;
  justify-self:center}
/* ⚠ TWO THINGS STOP THE CROP READING AS A PASTED RECTANGLE, and it needs both.
 * The source PNG has NO ALPHA, so its near-black ground is opaque pixels, not transparency.
 *   mix-blend-mode:screen  makes black composite to nothing over the dark band, so the
 *                          star and its dust survive and the ground disappears.
 *   the radial mask        feathers all four edges, because the crop's ground is a dark
 *                          NAVY rather than pure black and screen alone leaves a faint
 *                          rectangle where navy meets --deep.
 * This is the same problem awardly.app's hero solves with a two-gradient mask. */
.tb-star-art{mix-blend-mode:screen;
  /* ⚠ THE MASK IS NOW ONLY BELT-AND-BRACES. The ground is crushed to true black in the
   * crop itself, so screen-blend already makes it vanish; this just softens any residue at
   * the very corners. It deliberately does NOT try to fade before the box edge - to do that
   * the radii must fall under 50% of the width, and the star spans 81% of it. */
  -webkit-mask-image:radial-gradient(ellipse 88% 88% at 50% 47%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 88% at 50% 47%,#000 62%,transparent 100%)}

@media (max-width:820px){
  .tb-hero-in{grid-template-columns:1fr;gap:6px;padding:22px 22px 18px}
  /* on a phone the star is decoration competing with the tools, so it goes small and last */
  .tb-hero-art{order:-1;justify-content:flex-start}
  .tb-star-art{max-width:190px}
  /* ⚠ the flats go on a phone. At 190px the star is already decoration competing
   * with the tools, and sparse sparkles at that scale read as dirt on the screen. */
  .tb-flats{display:none}
  .tb-scrim{background:none}
  .tb-hero-copy h1{font-size:30px}
}

/* ═══ FAMILY TABS ══════════════════════════════════════════════════════════════
 * ⚠ THE TABS FILTER WHAT IS ALREADY IN THE DOCUMENT. They never build or fetch. Every
 * family and every tool is in the served HTML, so a crawler and a reader with JavaScript
 * off both get the complete page. Founder: "tabs should not hide anything from a crawler."
 * ════════════════════════════════════════════════════════════════════════════ */
.tb-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0;
  border-bottom:1px solid var(--rule);padding-bottom:6px}
.tb-tab{font:inherit;font-size:14px;cursor:pointer;padding:7px 14px;border-radius:999px;
  border:1px solid var(--rule-2);background:transparent;color:var(--ink-2)}
.tb-tab:hover{border-color:var(--accent);color:var(--ink)}
.tb-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-tab.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}

.tb-family{margin:9px 0 0}
.tb-family-h{font-size:19px;margin:0;display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap}
.tb-family-n{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.tb-family[hidden]{display:none}

/* ⚠ MULTI-COLUMN BECAUSE OF THE FOLD, NOT FOR LOOKS. One column put five Federal
 * Contracting cards over 1,000px tall, so the hero would have pushed all but the first
 * out of sight. Two columns is what keeps the founder's constraint satisfiable. */
@media (min-width:760px){
  .tb-shelf{grid-template-columns:1fr 1fr}
}

/* ⚠ THE STATUS WORD IS A BADGE, NOT A RUN-ON. _gen_index.cjs emits it inside the h3;
 * unstyled it rendered as "Federal Size Standard Checkeravailable", which is what the
 * first render caught. A generated element needs a style shipped in the same change. */
.tb-card h3{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tb-status{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:10px;
  letter-spacing:.7px;text-transform:uppercase;font-weight:600;white-space:nowrap;
  padding:2px 7px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-3)}
.tb-card.live .tb-status{color:var(--yes);border-color:var(--yes);background:var(--yes-soft)}

/* ⚠ A CROSS-LINK IS A SENTENCE, NOT A BUTTON. Founder: contextual, where the reader
 * would want it, not a related-links block. It carries no chrome of its own; when the
 * sibling tool goes live the span gains an <a> and nothing else changes. */
.tb-xlink{color:inherit}
.tb-xlink a{color:var(--accent)}

/* ⚠ A CORRECTNESS CAUTION ON A FIELD, not a decorative aside. It marks the case where
 * the tool would otherwise return a confidently wrong verdict, so it is set apart from
 * the ordinary hint above the input rather than blending into it. */
.tb-caution{border-left:2px solid var(--warn);padding-left:11px;margin-top:9px;
  color:var(--ink-2)}
.tb-caution b{color:var(--ink)}

/* ═══ RECEIPTS AVERAGING HELPER ═════════════════════════════════════════════ */
.tb-yeartable{width:100%;border-collapse:collapse;font-size:14.5px}
.tb-yeartable th,.tb-yeartable td{padding:7px 9px;border-bottom:1px solid var(--rule);
  text-align:left;vertical-align:middle}
.tb-yeartable thead th{font-size:11px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;white-space:nowrap}
.tb-yeartable tbody th{font-weight:400;color:var(--ink-2);white-space:nowrap}
.tb-yeartable input{width:100%;min-width:104px}
/* the weeks column is narrow on purpose: it is 52 for almost everyone */
.tb-yeartable td:last-child input{min-width:62px;max-width:74px}

/* ⚠ THE ANSWER IS BIG AND THE WORKING IS UNDER IT, NOT INSTEAD OF IT. The founder ruling
 * on /size-standards was answer-first; the same applies here, except that a receipts
 * average is a figure someone may have to defend, so the arithmetic is always shown. */
.tb-result-big{font-family:Georgia,'Times New Roman',serif;font-size:34px;font-weight:700;
  color:var(--ink);margin:4px 0 2px;font-variant-numeric:tabular-nums}
.tb-working{border:1px solid var(--rule);border-radius:5px;padding:13px 16px;margin:14px 0 0;
  background:var(--raise);font-size:14px;color:var(--ink-2)}
.tb-working b{color:var(--ink)}
.tb-working ul{margin:8px 0 0;padding-left:19px}
.tb-working li{margin:0 0 6px}

/* ⚠ A WARNING THAT THE NUMBER ITSELF IS WRONG, which is different from a caution about
 * how to read it. It gets the strongest treatment on the page. */
.tb-warn{border-left:3px solid var(--warn);background:var(--accent-soft);padding:11px 15px;
  margin:14px 0 0;font-size:14.5px;color:var(--ink-2);border-radius:0 4px 4px 0}
.tb-warn b{color:var(--ink)}

.tb-sources{margin:10px 0 0;padding-left:19px;color:var(--ink-2);font-size:15px;max-width:76ch}
.tb-sources li{margin:0 0 9px}
.tb-sources b{color:var(--ink)}

/* ⚠ A LEDGER, NOT A BULLET LIST. Founder: one labelled line per component, so a reader
 * can check the arithmetic line by line and see where each figure came from. */
.tb-ledger{width:100%;border-collapse:collapse;margin:9px 0 0;font-size:14px}
.tb-ledger th,.tb-ledger td{padding:5px 0;text-align:left;border:0;font-weight:400;
  color:var(--ink-2)}
.tb-ledger td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.tb-ledger .tb-ledger-sum th,.tb-ledger .tb-ledger-sum td{border-top:1px solid var(--rule-2);
  font-weight:600;color:var(--ink)}
.tb-method{margin:11px 0 0;font-size:13.5px;color:var(--ink-3)}
.tb-method b{color:var(--ink-2)}

/* ⚠ A PARTIAL FIGURE MUST SAY SO ON ITS FACE. It appears from the first number typed,
 * which is the point, but a running average presented as a finished one is how a wrong
 * number gets used. */
.tb-incomplete{border-left:3px solid var(--warn);padding:9px 14px;margin:6px 0 0;
  font-size:14px;color:var(--ink-2);background:var(--accent-soft);border-radius:0 4px 4px 0}
.tb-incomplete b{color:var(--ink)}
.tb-incomplete-why{margin:7px 0 0;font-size:13.5px;color:var(--ink-3);max-width:74ch}

/* ⚠ HIDDEN, NOT REMOVED. The inputs stay in the DOM so a value typed before the box was
 * unticked is not silently lost - but compute() forces 52 whenever the box is clear, so
 * nothing hidden can feed the arithmetic. */
.tb-yeartable.no-weeks th:nth-child(4),
.tb-yeartable.no-weeks td:nth-child(4){display:none}
.tb-shortmode{margin:0 0 12px}

/* ═══ CODE SEARCH ══════════════════════════════════════════════════════════ */
.tb-codesearch{margin:26px 0 6px;position:relative}
.tb-codesearch label{display:block;font-weight:600;margin:0 0 3px}
.tb-codesearch input{width:100%;max-width:420px}
.tb-suggest{list-style:none;margin:4px 0 0;padding:0;max-width:520px;
  border:1px solid var(--rule-2);border-radius:5px;background:var(--raise);
  max-height:280px;overflow-y:auto;position:relative;z-index:5}
.tb-suggest li{border-bottom:1px solid var(--rule)}
.tb-suggest li:last-child{border-bottom:0}
.tb-suggest button{display:block;width:100%;text-align:left;font:inherit;font-size:14px;
  padding:8px 12px;background:transparent;border:0;color:var(--ink-2);cursor:pointer}
.tb-suggest button:hover,.tb-suggest button:focus-visible{background:var(--accent-soft);
  color:var(--ink);outline:none}
.tb-suggest b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ⚠ AN ABSENT PROPOSED VALUE IS STATED, NOT BLANK. A blank cell reads as zero, as
 * unchanged, or as a page that failed to load - three wrong readings of missing evidence. */
.tb-noval{color:var(--warn);font-size:13px;font-style:normal}
.tb-unver{color:var(--ink-3);font-size:11.5px;letter-spacing:.2px}
.tb-rm{font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-3);
  border-radius:999px;padding:1px 8px;cursor:pointer;margin-left:6px}
.tb-rm:hover{border-color:var(--no);color:var(--no)}

/* ⚠ THE REASON SITS WITH THE BUTTON, not in a FAQ. Founder: stating why the figure is not
 * carried across "turns the limitation into the clearest demonstration of the promise on
 * the site". A privacy claim is most credible at the moment it costs the reader something. */
.tb-carry{margin:14px 0 0;padding:13px 16px;border:1px solid var(--rule);border-radius:5px;
  background:var(--raise)}
.tb-copy{font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:8px 16px;
  border-radius:4px;border:1px solid var(--accent);background:var(--accent-soft);
  color:var(--ink)}
.tb-copy:hover{background:var(--accent-deep)}
.tb-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-copied{margin-left:11px;font-size:13px;color:var(--yes)}
.tb-carry-why{margin:10px 0 0;font-size:13.5px;color:var(--ink-3);max-width:74ch}
.tb-carry-why b{color:var(--ink-2)}
.tb-carry-why a{color:var(--accent)}

/* ═══ THE THREE ZONES ══════════════════════════════════════════════════════
 * Founder: the page read as "two unrelated things: a form at the top, and a table of
 * somebody else's codes at the bottom". These make the seam between tool and reference
 * visible, and put each clear control at the END of what it clears. */
.tb-applies{margin:16px 0 0;font-size:14.5px;color:var(--ink-2);font-weight:600}
.tb-zoneend{margin:12px 0 0}
.tb-clear{font:inherit;font-size:13px;cursor:pointer;padding:6px 13px;border-radius:4px;
  border:1px solid var(--rule-2);background:transparent;color:var(--ink-2)}
.tb-clear:hover{border-color:var(--no);color:var(--no)}
.tb-clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-zonerule{border:0;border-top:1px solid var(--rule-2);margin:44px 0 0}
.tb-zonehead{margin-top:26px}
.tb-emptytable{border:1px dashed var(--rule-2);border-radius:5px;padding:22px;
  text-align:center;color:var(--ink-3);font-size:14.5px}

/* ═══ /size-standards — THE THREE STEPS ════════════════════════════════════
 * ⚠ GATE 14 PASSED ON A PAGE THAT HAD NONE OF THIS. It drives behaviour - does the lookup
 * return candidates, does nothing auto-select, does the exception flip - and every one of
 * those was true while thirty classes had no rule at all. A behavioural gate cannot see an
 * unstyled page, which is why a render still gets looked at.
 * ════════════════════════════════════════════════════════════════════════ */

/* the privacy line sits above step 1 and is the first thing read */
.tb-privacyline{margin:18px 0 0;padding:11px 15px;border-left:3px solid var(--yes);
  background:var(--yes-soft);border-radius:0 4px 4px 0;font-size:14.5px;color:var(--ink-2)}
.tb-privacyline b{color:var(--ink)}

.tb-step{margin:30px 0 0;padding:0 0 4px}
.tb-stephead{display:flex;align-items:center;gap:11px;font-size:21px;margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--rule)}
/* ⚠ THE NUMBER IS REAL ORDER, NOT DECORATION. You cannot judge codes you have not chosen,
 * and step 3 does not exist until step 1 has produced something. */
.tb-stepnum{display:inline-flex;align-items:center;justify-content:center;width:26px;
  height:26px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent);
  color:var(--ink);font-size:14px;font-weight:700;flex:0 0 auto;
  font-family:ui-monospace,Consolas,monospace}

/* ONE lookup field since 2026-08-30 - the old 2-column rule left an empty right
   half at >=720px. Capped so a single input does not span the full content width. */
.tb-lookup{display:grid;gap:14px;grid-template-columns:1fr;max-width:38rem}
.tb-inline{display:flex;gap:8px;align-items:stretch}
.tb-inline input{flex:1 1 auto;min-width:0}
.tb-go{font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0 16px;
  border-radius:4px;border:1px solid var(--accent);background:var(--accent-soft);
  color:var(--ink);white-space:nowrap}
.tb-go:hover{background:var(--accent-deep)}
.tb-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tb-directadd{margin:22px 0 0;padding-top:18px;border-top:1px dashed var(--rule-2)}
.tb-subhead{font-size:15px;margin:0 0 6px}
.tb-directadd input{width:100%;max-width:420px}

/* ⚠ THE THREE STATES ARE VISIBLY DIFFERENT, which is the whole requirement. Green for a
 * firm found, neutral for a clean empty (a normal outcome, not a problem), amber for a
 * failed lookup - because "we could not look" must never read as "there is nothing". */
.tb-state{margin:16px 0 0;padding:14px 16px;border-radius:5px;font-size:14.5px;
  color:var(--ink-2);border:1px solid var(--rule)}
.tb-state b{color:var(--ink)}
.tb-state-empty{border-left:3px solid var(--ink-3);background:var(--raise)}
.tb-state-failed{border-left:3px solid var(--warn);background:var(--raise)}
.tb-state-cands{background:var(--raise)}
.tb-state-firm{border-left:3px solid var(--yes);background:var(--raise)}

.tb-cands{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.tb-cand-pick{display:grid;width:100%;text-align:left;font:inherit;cursor:pointer;
  gap:2px;padding:11px 14px;border-radius:5px;border:1px solid var(--rule-2);
  background:var(--surface);color:var(--ink-2)}
.tb-cand-pick:hover,.tb-cand-pick:focus-visible{border-color:var(--accent);
  background:var(--accent-soft);color:var(--ink);outline:none}
.tb-cand-name{font-weight:600;color:var(--ink);font-size:15px}
.tb-cand-uei{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--ink-3);
  letter-spacing:.4px}
/* the figures are how two similar names are told apart, so they are not small print */
.tb-cand-figs{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ── multi-select registrations (2026-08-30) ──
   The candidate row became a LABEL wrapping a checkbox, because picking one registration
   must no longer destroy the list: a firm holds several and its codes are spread across
   them. The grid gains a checkbox column; everything else keeps the existing look. */
.tb-cand-pick{grid-template-columns:auto 1fr;align-items:start;column-gap:11px}
.tb-cand-pick>.tb-cand-cb{grid-row:1/4;align-self:center;width:17px;height:17px;
  accent-color:var(--accent);cursor:pointer;margin:0}
.tb-cand.is-picked>.tb-cand-pick{border-color:var(--accent);background:var(--accent-soft)}
.tb-cand.is-picked .tb-cand-name{color:var(--ink)}

/* the union block: codes across every selected registration */
.tb-union{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-2)}
/* controls sit ABOVE the list they act on - on a long list the reader would otherwise
   reach the bottom having ticked twenty boxes by hand */
.tb-codeacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 4px}
/* which registration a code came from. Quiet, but present: a summed count that cannot be
   attributed looks like one entity is and cannot be reconciled against anything. */
.tb-naics-from{font-size:12.5px;color:var(--ink-3)}

/* ── a second search must not destroy the first selection (2026-08-31) ──
   The tray, adapted from awardly.app/lookup: the registrations chosen are NAMED from `picked`,
   so they stay readable even when the candidate row that supplied one is off screen. */
.tb-picked{margin:0 0 6px;font-size:14px;line-height:1.9}
.tb-pickchip{display:inline-block;border:1px solid var(--rule-2);background:var(--surface);
  border-radius:999px;padding:2px 10px;margin:0 4px 4px 0;font-size:12.5px;color:var(--ink-2)}
/* one registration per line. Legal names are long and differ near the END, which is exactly
   where an inline run hides the difference. */
.tb-picklist{list-style:none;margin:2px 0 10px;padding:0;display:grid;gap:2px}
.tb-picklist li{font-size:13.5px;color:var(--ink-2);padding:2px 0 2px 14px;position:relative}
.tb-picklist li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}

/* a transient message from the LAST lookup. It sits ABOVE the panel and never replaces it,
   because an empty or failed search must report itself without erasing what is held. */
.tb-note{border-radius:5px;padding:9px 12px;margin:0 0 10px;font-size:13.5px;
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink-2)}
.tb-note-failed{border-color:var(--warn,#b45309)}



.tb-none{margin:12px 0 0}
/* ⚠ "None of these is my company" IS FIRST-CLASS, not a footnote. For a firm whose name
 * returns strangers it is the true answer, so it reads as a choice, not an escape hatch. */
.tb-linkish{font:inherit;font-size:14px;cursor:pointer;background:transparent;border:0;
  border-bottom:1px solid var(--rule-2);color:var(--accent);padding:2px 0}
.tb-linkish:hover{border-bottom-color:var(--accent)}
.tb-linkish:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tb-firmname{margin:0 0 4px;font-size:15px}
.tb-naicslist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.tb-naics{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:baseline;
  padding:8px 11px;border-radius:4px;border:1px solid var(--rule);background:var(--surface);
  cursor:pointer;font-size:14px}
.tb-naics:hover{border-color:var(--accent)}
.tb-naics-cb{margin:0}
.tb-naics-code{font-family:ui-monospace,Consolas,monospace;color:var(--ink);font-weight:600}
.tb-naics-title{color:var(--ink-2);min-width:0}
/* ⚠ THE AWARD COUNT IS THE POINT of showing the firm its own codes: it separates real
 * activity from registered-and-unused. Tabular figures so the column reads down. */
.tb-naics-awards{font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.tb-more{margin:18px 0 0;border:1px solid var(--rule);border-radius:5px;background:var(--raise)}
.tb-more>summary{cursor:pointer;padding:11px 15px;font-size:14.5px;color:var(--ink-2);
  font-weight:600}
.tb-more>summary:hover{color:var(--ink)}
.tb-more[open]>summary{border-bottom:1px solid var(--rule)}
.tb-more .tb-field{padding:0 15px}
.tb-more .tb-field:last-of-type{padding-bottom:14px}

/* ═══ WAGE READOUT — choice, evidence, and what the number is ══════════════════════════════
 * ⚠ A GENERATED ELEMENT NEEDS A STYLE SHIPPED IN THE SAME CHANGE. The status badge on the tool
 * cards rendered as "Federal Size Standard Checkeravailable" on its first pass for exactly this
 * reason, and a scope note bleeding into a rate column would be the same defect on a page whose
 * whole job is to be read carefully.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */

/* why a classification is in the list at all — the reader is choosing, so the evidence is shown */
.tb-why{display:inline-block;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:1px 6px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink-3);
  vertical-align:middle;margin-left:6px}
.tb-why.named{color:var(--accent-bright);border-color:var(--accent)}
.tb-why.scope{color:var(--ink-2)}
.tb-why.related{color:var(--ink-3);border-style:dashed}

/* the determination's own words, quoted as the evidence for a scope match */
.tb-scope{margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--ink-3);
  border-left:2px solid var(--rule-2);padding-left:9px;max-width:62ch}

/* ⚠ THE ROW THAT SAYS THERE IS A CHOICE TO MAKE. Without it, three priced rows read as three
 * answers rather than three candidates, which is the failure this row exists to prevent. */
.tb-choose{font-size:13.5px;line-height:1.5;color:var(--ink-2);background:var(--raise);
  border-left:3px solid var(--accent);padding:10px 12px}
.tb-choose b{color:var(--ink)}

.tb-floor-note{margin-top:14px;border:1px solid var(--rule);border-left:3px solid var(--warn);
  background:var(--surface);border-radius:5px;padding:13px 15px}
.tb-floor-note p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tb-floor-note p:last-child{margin-bottom:0}
.tb-floor-note b{color:var(--ink)}

.tb-next{margin-top:14px;border:1px solid var(--rule);background:var(--surface);
  border-radius:5px;padding:13px 15px}
.tb-next ol{margin:8px 0 10px;padding-left:20px}
.tb-next li{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:7px}
.tb-next li b{color:var(--ink)}
.tb-next .tb-note{margin:0;font-size:12.5px;color:var(--ink-3)}

/* the CBA block is now several paragraphs of guidance rather than one line */
.tb-caution p{margin:0 0 8px;font-size:13.5px;line-height:1.55}
.tb-caution p:last-child{margin-bottom:0}

/* ═══ DAVIS-BACON CONSTRUCTION TYPE ════════════════════════════════════════════════════════
 * ⚠ THE PANEL IS THE ANSWER WHEN NO TYPE IS CHOSEN, not an aside. Residential, Building,
 * Highway and Heavy are separate determinations with different rates for the same trade in the
 * same county, and the page previously priced against whichever came back first — a St Louis
 * lookup silently used a RESIDENTIAL schedule. So this reads as the primary content, not a hint.
 * ═════════════════════════════════════════════════════════════════════════════════════════ */
.tb-ctype-panel{margin:0 0 14px;border:1px solid var(--rule);border-left:3px solid var(--warn);
  background:var(--surface);border-radius:5px;padding:13px 15px}
.tb-ctype-panel p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tb-ctype-panel b{color:var(--ink)}
.tb-ctype-panel .tb-note{margin:9px 0 0;font-size:12.5px;color:var(--ink-3)}
.tb-ctype-list{margin:10px 0 0;padding:0;list-style:none}
.tb-ctype-list li{padding:9px 0;border-top:1px solid var(--rule)}
.tb-ctype-list li:first-child{border-top:0}
.tb-ctype-list b{font-size:14.5px}
.tb-ctype-n{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11px;
  letter-spacing:.04em;color:var(--ink-3);margin-left:8px}
.tb-ctype-help{margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:66ch}

/* the determination picker — Arizona publishes nine Building determinations for different
 * counties, so the reader must be able to see which one contains their site and choose it */
.tb-pick{float:right;font:inherit;font-size:12.5px;cursor:pointer;padding:5px 11px;
  border-radius:999px;border:1px solid var(--accent);background:var(--accent-soft);
  color:var(--ink);margin-left:12px}
.tb-pick:hover{background:var(--accent-deep)}
.tb-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ⚠ THE RESOLUTION IS SHOWN, NOT HIDDEN. A city→county lookup that happens invisibly is a silent
 * pick, and silent picks are what this page has been corrected away from twice. The reader sees
 * which county was used and can correct it by searching the county directly. */
.tb-resolved{margin:0 0 14px;border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--raise);border-radius:5px;padding:11px 14px}
.tb-resolved p{margin:0 0 7px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tb-resolved p:last-child{margin-bottom:0}
.tb-resolved b{color:var(--ink)}
.tb-resolved .tb-note{font-size:12.5px;color:var(--ink-3)}