/* ═════════════════════════════════════════════════════════════════════════════
   MARK · 1 · BASE

   The reset, the document, and the bare elements. Nothing here has a class -
   if it needs a class it belongs in atoms. This layer's whole job is that an
   unstyled <p>, <a>, <table> or <h2> already looks like it belongs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE TYPE ──────────────────────────────────────────────────────────────
   Three faces, and each one has a job the others cannot do.

   THE DECISION, and the two it beat (v2/DECISIONS records the long form):

   1. Editorial pair - a high-contrast display serif over a grotesk. PICKED.
   2. One characterful grotesk used at extremes. Rejected: "a slightly
      different sans" is not an answer to "this looks like every other SaaS
      product", which is the actual complaint.
   3. Monospace-first, technical. Rejected as the primary: a wholesale
      registrar's buyer is a hosting-company owner as often as a developer,
      and all-mono reads narrow. One detail is borrowed from it - see below.

   Why the pair wins: the competitive set is OpenSRS, eNom, Key-Systems,
   CentralNic and ResellerClub, every one of which looks like a 2012 admin
   tool. Pre-sales loses deals on this product's first impression. A serif
   display is the fastest available way to not look like the incumbents, and
   it reads as premium to the buyer rather than only to designers.

   Instrument Serif and Instrument Sans are a designed pair from one foundry,
   so the pairing is coherent by construction - and Instrument Sans is already
   what the live /dashboard/* routes render, so this is a step the brand has
   half-taken already rather than a swerve away from it.

   Borrowed from direction 3: DOMAIN NAMES ARE SET IN THE MONO FACE. That is
   meaning, not decoration - a domain is an identifier you copy, paste and read
   character by character, and mono is the face that makes "rn" not look like
   "m". It is also the product's core noun, so it becomes the signature. */
/* Downloaded from Google Fonts and self-hosted. Latin and latin-ext only:
   a reseller panel does not ship a Vietnamese subset it never renders.
   The unicode-ranges are Google's own, not guessed. */
/* INTER IS KEPT HERE ON PURPOSE, THOUGH NOTHING IN THIS FILE ASKS FOR IT ANY MORE.
   The three review pages at TMP/review/ pin the refresh's own font stack so a branch
   revert cannot change what the designer has already been sent - and they ask for Inter
   BY NAME. Delete these four blocks and all three quietly fall back to Instrument Sans,
   turning a ground comparison into a different comparison without saying so.
   An unused @font-face costs nothing: a browser fetches a font only when something
   references it, so the four woff2 in system/fonts/ are not downloaded by any panel
   screen while this file's own --font is the serif pair. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-400-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-400-700-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-400-700-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-400-700-normal-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-400-700-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-400-700-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-400-700-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-400-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-600-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-600-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-optical-sizing: auto;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sky);
  background-attachment: fixed;   /* the light does not scroll with the page */
  color: var(--ink-body);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings carry weight and tracking, not size alone. Sizes come from the page
   that uses them; what is fixed here is that a heading is never body text. */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: var(--w-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
}
/* THE DISPLAY FACE IS NOW THE BODY FACE, so this rule stopped being about a
   typeface and became the definition of the display TREATMENT: Inter, regular,
   32px, tight tracking. The old comment here said the serif "is doing the job it
   was drawn for" above --t-2xl and that h3/h4 do not take it - that reason is
   gone with the serif, but the outcome is kept: h3 and h4 still do not take the
   display treatment, because a 20px heading tracked at -0.032em is a heading
   fighting its own letterfit.
   All four values read tokens, so the treatment moves in one place. */
h1, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--display-size);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
}
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

/* EVERY BLOCK OWNS ITS BOTTOM EDGE, and the last one gives it back. That pair
   is what stops a stack of components needing a wrapper to space them, and it
   is the single most common source of "the spacing is off": one element in the
   run does not participate, so everything after it shifts by one gap. */
p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* A list is a block too. Unstyled ul/ol inherited the UA's 16px, which is not
   on the 4px scale and does not match the paragraph above it. */
ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
ul:last-child, ol:last-child { margin-bottom: 0; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

/* A link is underlined. An underline is not decoration - it is the only signal
   that survives being colour-blind, being printed, and being screenshotted. */
a {
  color: var(--calm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color var(--fast) var(--ease),
              text-decoration-color var(--fast) var(--ease);
}
a:hover { color: var(--c-teal-700); text-decoration-color: currentColor; }

/* ONE FOCUS TREATMENT, EVERYWHERE, and it is `outline` rather than a shadow.

   That is not a style choice. A box-shadow ring loses to any component that
   sets its own shadow, silently and with no warning: --btn--go carries
   --lift-1, so the primary button on every screen had NO VISIBLE FOCUS RING at
   all. Found by recording the keyboard path and measuring that the pixels never
   changed - never by reading this file.

   `outline` cannot be overridden by an elevation, follows border-radius, and
   survives forced-colors mode. The offset supplies the gap the two-ring
   shadow was drawing by hand.

   :focus-visible only, so a mouse press never draws it - but it is never
   removed, because a keyboard user who cannot see focus cannot use the product. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

strong, b { font-weight: var(--w-semi); color: var(--ink); }
small { font-size: var(--t-sm); }

/* Figures never jump. Any number that appears in a column, a total, or beside
   another number is tabular by default rather than by remembering. */
td, th, output, time, .num { font-variant-numeric: var(--nums); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

img, svg { display: block; max-width: 100%; }
svg { fill: none; }

/* Controls inherit the family. Left alone they render in the UA's font, which
   is how a form ends up in a second typeface nobody chose. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* [hidden] BEATS DISPLAY, ALWAYS. A component that sets `display` silently wins
   against the attribute, and a "hidden" element that is still on screen is the
   single most repeated bug in a system like this. One rule, at the base, so no
   component has to remember. */
[hidden] { display: none !important; }

::selection { background: var(--c-crimson-100); color: var(--c-crimson-900); }

/* Skip link - the first tab stop on every page, and it moves the real focus
   rather than only the scroll position. */
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-toast);
  padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-md); box-shadow: var(--lift-2);
  text-decoration: none; font-weight: var(--w-medium);
  transition: top var(--fast) var(--ease);
}
.skip:focus-visible { top: var(--s-4); }

/* Available to every layer, because "visible to a screen reader only" is a
   base-level concern, not a component's. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ───────────────────────────── THE LADDER, AS CLASSES ────────────────────
   These exist so a NEW component can be placed on the ladder before it has a
   name of its own, and so the ladder can be demonstrated. Existing components
   do not use them - .page__title is already L1, .ident is already L3 - because
   a component that needs a utility class to state its own emphasis is a
   component whose emphasis is not decided.

   If you find yourself writing .e1 in a product page, the answer is a component,
   not a class. */
.e1 { font-family: var(--font-display); font-size: var(--e1-size); font-weight: var(--e1-weight);
      color: var(--e1-ink); line-height: var(--display-lh); letter-spacing: var(--display-track); }
.e2 { font-size: var(--e2-size); font-weight: var(--e2-weight); color: var(--e2-ink);
      line-height: var(--lh-snug); letter-spacing: var(--track-snug); }
.e3 { font-size: var(--e3-size); font-weight: var(--e3-weight); color: var(--e3-ink); }
.e4 { font-size: var(--e4-size); font-weight: var(--e4-weight); color: var(--e4-ink); }
.e5 { font-size: var(--e5-size); font-weight: var(--e5-weight); color: var(--e5-ink);
      letter-spacing: var(--track-wide); text-transform: uppercase; }