/* ─────────────────────────────────────────────────────────────────────────────
 * 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 ───────────────────────────────────────────────────────────── */
.tb-main{padding:44px 0 76px}
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:15px;margin:26px 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:19px 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)}