/* ============================================================================
   RANKWELL — ONE PLACE THE THEME LIVES

   Five documents in this toolbox — the shell, the SEO Auditor, Blog Publisher,
   Headers & Redirects and Manage Domain — each carried their own copy of the
   same sixteen custom properties. They were identical, which is exactly the
   problem: identical by coincidence, kept in step by hand, and a palette change
   meant five edits and a diff to prove none of them was missed.

   Adopting this file was a pure refactor — the values were EXACTLY what those
   documents already used, so nothing moved on screen. It paid for itself on
   2026-09-01, when the whole palette became EMBER in one edit instead of five.

   Two tools deliberately keep their own palette and are not served by this file:
   the Content Writer (green) and the Keyword / Topic Explorer (purple). Those
   are distinct visual identities rather than drift, and flattening them would be
   a redesign, not a refactor.

   Served by the hub at /theme.css. The tools are same-origin with it — the
   static ones are served from /tools/<id>/ by the same server — so the absolute
   path resolves from any of them.
   ========================================================================== */

/* EMBER (2026-09-01). A burnt orange on warm stone, with deep teal as its
   complement. The orange is the STRUCTURE — brand, active tool, primary
   button — and the teal is the CUE: focus rings and the thing to do next. Two
   opposite hues doing two different jobs is what keeps an orange interface
   from reading as one continuous warning. Manrope carries every text role —
   weight does the work family used to — and DM Mono carries the data. Both are loaded from Google
   Fonts; if that request fails the stacks below fall back to the system faces
   this file used before, so the toolbox never renders unstyled. */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* Surfaces, from furthest back to nearest. Warm stone: the neutral is
     biased toward the accent on purpose — orange on a cool grey reads as two
     unrelated decisions, and a pure mid-grey reads as none at all. */
  --ground: #f5f4f2;
  --panel: #fff;
  --panel-2: #ebe8e4;
  --rule: #dbd6d0;

  /* Text, in descending emphasis. --ink-3 is for labels, never for prose. */
  --ink: #1c1917;
  --ink-2: #57504a;
  --ink-3: #7f776f;

  /* The accents. --navy is structural (headings, links); the other four are
     SEMANTIC and each means one thing wherever it appears:
       gold     the thing to look at / do next — DEEP TEAL here, the accent's
                complement, so a cue is never mistaken for the chrome
       forest   pass, healthy, done
       amber    warning, needs attention but not broken
       crimson  failure, blocked, destructive */
  --navy: #b8460e;
  --gold: #0f6b7a;
  --forest: #15704c;
  --amber: #8a7407;
  --crimson: #a52318;

  /* --serif is now the same family at its heaviest weight rather than a
     second typeface. The name is kept because five documents already use it
     for headings; changing it would be a rename, not a restyle. */
  --serif: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --sans: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --mono: "DM Mono", "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;

  --shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 8px 24px rgba(28, 25, 23, .07);

  /* ---- GEOMETRY -----------------------------------------------------------
     Every document had its own radius literal — 3px in the tools, 4px in the
     shell, 2px on a table. They were arbitrary rather than different. These
     three names are the whole vocabulary; a new rule uses one of them.

     Headings are set with --display-weight so a heading is heavy Manrope
     rather than a different family, which is what replaced the old serif. */
  --r: 9px;        /* a panel, a card, a dialogue                          */
  --r-sm: 6px;     /* a control: button, input, chip                       */
  --pill: 999px;   /* a thing that reads as a token: phase step, severity  */
  --display-weight: 800;

  /* Text ON a --navy fill. Every document hardcoded #fff here, which was
     already wrong in dark mode: the dark --navy is a LIGHT orange, so white
     text on it sat around 2:1. This token flips with the theme and fixes a
     contrast bug that predates the restyle. */
  --on-navy: #fff;

  /* ---- LAYERS -------------------------------------------------------------
     Every document here had invented its own numbers: 10/11 in the shell,
     20/21/22 in the Content Writer, 50/90/92/95/300 in the Explorer. None of
     them collided — each page is its own stacking context, and the tools run in
     iframes — but "what should this sit above?" had no answer except reading
     the whole stylesheet and guessing higher.

     The order below is the answer, and it is deliberate:

       A TOAST MUST SIT ABOVE A MODAL. It is tempting to put the modal on top
       because it is the bigger thing, and it is wrong: the message that tells
       you what just happened — or why it did not — is most needed while the
       dialogue is still open. A toast hidden behind the modal that triggered it
       is a message nobody reads.

       A TOOLTIP SITS ABOVE EVERYTHING, because it describes whatever is on top.

     Use the names. A raw number in a new rule is how the next ladder starts. */
  --z-base: 1;        /* raised content: a sticky header, an active row      */
  --z-dropdown: 20;   /* a menu attached to a control                        */
  --z-sticky: 40;     /* a bar that follows the scroll                       */
  --z-overlay: 50;    /* the dimmed backdrop behind a dialogue               */
  --z-modal: 60;      /* the dialogue itself                                 */
  --z-toast: 90;      /* what just happened — above the modal, on purpose    */
  --z-tooltip: 300;   /* describes whatever is on top of everything else     */
}

/* ============================================================================
   PAGE SKELETON — the one opening every tool uses.

   Four documents had each invented their own: the SEO Auditor opened with a
   .mast and an eyebrow reading "Local tool · localhost:4025" (wrong the moment
   it was deployed), Headers & Redirects with a bare <h1>, Blog Publisher with a
   <header> plus a hand-drawn "1 Copy → 2 Audit" chain, and Manage Domain with
   "Phase 1 —" typed into the heading text. Same information, four shapes, and
   the phase was a string in one of them rather than data.

   These three classes replace all four. They live here, with the tokens,
   because every page that needs them already links this file — and because the
   next tool should inherit the house style by writing .toolhead, not by
   copying whatever the last tool happened to do.

   Specificity is deliberate: `.toolhead h1` (0,1,1) beats a page's own bare
   `h1` (0,0,1), so adopting the skeleton does not require deleting a page's
   local rules first.
   ========================================================================== */
.toolhead {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.toolhead h1 {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.5rem;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.toolhead .lede {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}

/* The strip under the lede. Three facts, in this order, every time: which
   phase you are in, what you walk away with, and — only when it is true — that
   the tool writes somewhere real. A warning chip is never decorative. */
.toolmeta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: .15rem;
}
.chip {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  padding: .15rem .5rem;
  color: var(--ink-2);
  background: var(--panel);
  white-space: nowrap;
}
.chip.out  { border-color: var(--forest);  color: var(--forest) }
.chip.warn { border-color: var(--amber);   color: var(--amber) }

/* The default state — the viewer has expressed no preference — is this block,
   so it must not be the only place any of these are defined. An explicit light
   choice wins over a dark operating system, which is why it is excluded here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #16130f;
    --panel: #1e1a16;
    --panel-2: #29231d;
    --rule: #38302a;
    --ink: #f2ece6;
    --ink-2: #b3a89e;
    --ink-3: #82766b;
    --navy: #f98d4a;
    --gold: #4fc2d4;
    --forest: #4ec08c;
    --amber: #d8bc45;
    --crimson: #f0736a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 8px 24px rgba(0, 0, 0, .3);
    --on-navy: #16130f;
  }
}

/* And again for an explicit dark choice, so a toggle wins over a light OS.
   The two blocks are duplicated rather than combined because a selector list
   is dropped WHOLE by any browser that cannot parse one of its parts. */
:root[data-theme="dark"] {
  --ground: #16130f;
  --panel: #1e1a16;
  --panel-2: #29231d;
  --rule: #38302a;
  --ink: #f2ece6;
  --ink-2: #b3a89e;
  --ink-3: #82766b;
  --navy: #f98d4a;
  --gold: #4fc2d4;
  --forest: #4ec08c;
  --amber: #d8bc45;
  --crimson: #f0736a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 8px 24px rgba(0, 0, 0, .3);
  --on-navy: #16130f;
}