/* ============================================================================
   /tools/ kit — the chrome every tool page shares.

   The tools under static/tools/ are plain HTML: no Hugo layout, no Tailwind,
   no build step. This file is the one thing they have in common, so that the
   pages read as a single publication rather than a pile of one-offs.

   It is not fingerprinted (nothing under static/ is), so every page links it
   with a manual cache-buster: /tools/kit.css?v=2 — bump that on both sides
   when this file changes.

   Page-specific styling stays in that page's own <style>. What lives here is
   only what more than one tool needs, and what a new tool should get for free.

   ---------------------------------------------------------------------------
   THEMING

   Every colour is a token, and dark mode is one block of overrides below.
   Nothing after the token blocks names a colour directly — if you find
   yourself typing a hex value into a tool page, add a token instead, or that
   page will stay light while the rest of the site goes dark.

   The switch is `.dark` on <html>, set before first paint by the same inline
   script the Hugo pages use, reading localStorage["color-theme"]. Deliberately
   NOT a `prefers-color-scheme` media query: that script already resolves the
   OS preference, and a media query would override someone who explicitly
   chose light while their system is dark.
   ========================================================================= */

:root{
  /* ---- ink and paper ---- */
  --ink:#0E1726;
  --ink-soft:#4A5568;
  --dim:#9AA6BC;            /* muted glyphs: copy icons, gutters, separators */
  --paper:#EDF0F5;          /* the page */
  --surface:#FFFFFF;        /* cards standing on it */
  --field:#FBFCFE;          /* inputs and textareas */
  --sunken:#F7F9FC;         /* code blocks, command boxes */
  --sunken-2:#F2F5FA;       /* quiet info panels */

  /* ---- rules ---- */
  --rule:#D2D8E4;           /* borders, and the graph paper itself */
  --rule-soft:#EDF0F5;      /* hairlines between table rows */
  --rule-strong:#B4BFD4;    /* hover borders */

  /* ---- the dark header bar on a card ----
     Its own pair, because it does not simply invert: flipping --ink would put
     white text on a pale bar. */
  --bar-bg:#0E1726;
  --bar-fg:#FFFFFF;
  --on-bar:#9DB4F0;         /* links and buttons sitting on that bar */

  /* Text on a control filled with an accent (a primary button). Separate
     from --bar-fg: the accents lighten in dark mode, so their label has to
     darken rather than stay white. */
  --on-accent:#FFFFFF;

  /* ---- accents ---- */
  --blue:#2F5FE0;
  --blue-deep:#1B3A94;
  --blue-press:#16307C;     /* primary button, held down */
  --amber:#A85D00;
  --amber-bg:#FDF1DF;
  --teal:#0F7B6C;
  --red:#B4232B;

  /* ---- status blocks: background, border, text ---- */
  --ok-bg:#E7F6F2;    --ok-line:#9ED6C9;   --ok-ink:#0B5F53;
  --warn-bg:#FDF1DF;  --warn-line:#E7C99B; --warn-ink:#6B3D06;
  --bad-bg:#FDECEC;   --bad-line:#E9B4B4;  --bad-ink:#7A1B21;

  --radius:6px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --cond:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
}

/* ---------- dark ----------
   Not a straight inversion. The paper goes to a deep blue-black so the graph
   paper still reads as drafting paper; the accents lift in luminance to hold
   contrast against it; and the amber wash darkens rather than brightening, so
   a highlighted slot does not glow. */
.dark{
  --ink:#E4EAF5;
  --ink-soft:#9BA8BF;
  --dim:#8794AB;
  --paper:#0D131E;
  --surface:#151D2B;
  --field:#111927;
  --sunken:#111927;
  --sunken-2:#18212F;

  --rule:#2A3547;
  --rule-soft:#212B3B;
  --rule-strong:#3D4A61;

  --bar-bg:#1E2839;
  --bar-fg:#E4EAF5;
  --on-bar:#8FA8D8;
  --on-accent:#0D131E;

  --blue:#7BA2F7;
  --blue-deep:#A9C2FB;
  --blue-press:#C3D4FD;
  --amber:#E0A75F;
  --amber-bg:#3A2B15;
  --teal:#4FC9AE;
  --red:#F08B8B;

  --ok-bg:#12302A;    --ok-line:#2C5F54;   --ok-ink:#7FD9C3;
  --warn-bg:#33270F;  --warn-line:#5E4A22; --warn-ink:#E8BE83;
  --bad-bg:#33191B;   --bad-line:#5E3034;  --bad-ink:#F0A3A3;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:56px 56px;
  background-position:-1px -1px;
}
/* Fades the graph paper out down the page. The first stop is fully
   transparent rather than an alpha-0 tint, so it carries no colour of its own
   and needs no theme-specific value. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,transparent 0%,var(--paper) 78%);
}
.wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 20px 80px}

/* ---------- site wordmark ----------
   Same face as the Hugo navbar. layouts/partials/head.html publishes the font
   at this stable, unfingerprinted path, so a standalone page under static/ can
   point straight at it; Georgia stands in if it ever moves. */
@font-face{
  font-family:"Birthlong";
  src:url("/fonts/Birthlong.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
.home{
  display:inline-flex;align-items:baseline;gap:9px;margin-top:16px;
  font-family:"Birthlong",ui-serif,Georgia,serif;font-size:27px;line-height:1;
  color:var(--ink-soft);text-decoration:none;transition:color .15s
}
.home:hover{color:var(--blue)}
.home .back{font-family:var(--sans);font-size:14px;line-height:1}

/* ---------- theme toggle ----------
   Injected by kit.js. Absolutely positioned so it costs no layout — a page
   that never loads kit.js simply has no button. */
.theme-toggle{
  position:absolute;top:16px;right:20px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);border-radius:100px;
  color:var(--ink-soft);transition:color .15s,border-color .15s
}
.theme-toggle:hover{color:var(--blue);border-color:var(--blue)}
.theme-toggle svg{display:block}

/* ---------- masthead ----------
   Headline left, lede right, both sitting on the rule — the stacked version
   cost about 90px of vertical space before the tool itself began. */
header.mast{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,68ch);
  gap:6px 40px;align-items:end;
  padding:12px 0 14px;border-bottom:2px solid var(--ink)
}
.eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--blue-deep)}
/* Sized to set on one line at full width — the two-line headline was the
   single biggest block of space between the top of the page and the tool. */
h1{font-size:clamp(23px,2.9vw,32px);line-height:1.1;letter-spacing:-.022em;margin:5px 0 0;font-weight:700}
h1 .slotword{
  color:var(--amber);background:var(--amber-bg);
  padding:0 .12em;border-bottom:2px dashed var(--amber);
}
/* Wider measure at a smaller size — same words in three lines instead of four,
   so the lede no longer sets the masthead's height. The short bar rhymes with
   the eyebrow across the header. */
.lede{
  position:relative;max-width:68ch;margin:0 0 .15em;padding-top:10px;
  font-size:14.5px;line-height:1.45;color:var(--ink-soft);text-wrap:pretty
}
.lede::before{
  content:"";position:absolute;top:0;left:0;
  width:28px;height:2px;background:var(--blue-deep)
}
/* Nouns you literally type are set in the command face — it breaks up the grey
   and previews the tool's material. */
.lede .term{font-family:var(--mono);font-size:.87em;font-weight:500;color:var(--ink)}
.lede .am{color:var(--amber);font-weight:600}
.lede code{font-family:var(--mono);font-size:.9em;background:var(--surface);border:1px solid var(--rule);padding:1px 5px;border-radius:3px;color:var(--ink)}
@media(max-width:860px){
  header.mast{grid-template-columns:1fr;align-items:start;padding:10px 0 14px}
  .lede{max-width:60ch;margin-top:12px}
}

/* ---------- card ----------
   A titled panel: dark header bar, quiet body. This is the page's unit of
   structure. A tool that needs a different box (kubectl-slotfill's command
   list, say) names it something else rather than redefining .card. */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.card h2{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:12px;
  margin:0;padding:12px 16px;background:var(--bar-bg);color:var(--bar-fg);
  display:flex;justify-content:space-between;align-items:center;gap:14px
}
/* text-transform does not inherit into form controls, so the header bar's
   uppercase does not reach the button on its own — it is set again here. */
.card h2 button{
  background:none;border:0;color:var(--on-bar);font:inherit;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;padding:0
}
.card h2 button:hover{color:var(--bar-fg)}
.card .body{padding:14px 16px 16px}

/* ---------- copy button ----------
   kit.js flips the label to "Copied" and adds .done for ~1.4s. */
.copy{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  background:var(--surface);border:1px solid var(--rule);color:var(--ink-soft);
  padding:5px 11px;border-radius:4px;cursor:pointer;white-space:nowrap;flex:0 0 auto
}
.copy:hover{border-color:var(--blue);color:var(--blue)}
.copy.done{background:var(--teal);border-color:var(--teal);color:var(--surface)}

/* Body-copy links. Element selector, so anything that styles its own anchors —
   .home, a.tool, a.algo, .eyebrow a.up — still wins on specificity. Without
   this, a link in prose falls back to the browser's #0000EE, which is close to
   invisible on the dark theme. */
a{color:var(--blue)}

footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-soft)}
footer code{font-family:var(--mono)}

#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  background:var(--bar-bg);color:var(--bar-fg);font-family:var(--mono);font-size:12.5px;
  padding:9px 15px;border-radius:100px;opacity:0;pointer-events:none;transition:.18s ease;
  border:1px solid var(--rule)
}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}