/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EOS — the Ethereal Operating Surface. THE ONE LINK.

       <link rel="stylesheet" href="/styles/eos.css?v=1">          <!-- ALWAYS LAST -->

   Declaring the layer order FIRST is the safety model, not decoration:

   · NORMAL declarations — unlayered rules beat layered ones. Everything in `eos.sys` therefore
     LOSES to every existing unlayered rule in the app, so linking this file can never regress a
     page. Adoption is a structural no-op.
   · !important — the order REVERSES: the FIRST-declared layer wins, and unlayered !important is
     LOWEST. So `eos.armor` can repair styles.css's 629 unlayered !important rules WITHOUT editing
     that 11,843-line file.
   · Unknown @layer -> the browser drops the blocks entirely and every page renders exactly as it
     does today. It fails SAFE.

   Verified before writing this: `grep -r '@layer'` over app/client returned ZERO matches, so
   nothing existing is layered and both halves hold unconditionally.

   ?v= is load-bearing. app-middleware.js sends no-store only for .html/.js and extensionless
   paths, and static runs {etag:false,lastModified:false} — CSS is heuristically cached with no
   validators. Bump the number when you change a token.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@layer eos.armor, eos.sys;

/* ?v= is load-bearing here for exactly the reason it is on the <link> above: app-middleware.js
   sends no-store only for .html/.js and extensionless routes, so a .css file is cached normally.
   The import carried NO version until 2026-08-02, which meant eos.css could be re-fetched while
   the browser kept serving a stale eos-tokens.css — caught while verifying the day-palette repair,
   when a corrected file on disk and on the wire still rendered the old values in the page.
   BUMP THIS whenever eos-tokens.css changes. */
@import url("./eos-tokens.css?v=2");
/* The LAYOUT tier. Separate file on purpose: it re-columns every panel for a 5K ultrawide, and
   keeping it out of command-center.html means it cannot collide with concurrent markup work on
   an individual desk. Every rule in it is inside a min-width query, so narrow is untouched. */
@import url("./eos-shell.css?v=6");

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   eos.sys — THE SHARED BASE LAYER. Everything below is inherited by every page that links this
   file, and every page can still override it WITHOUT !important and without a specificity fight,
   because:

     1. it is inside `@layer eos.sys`, and an UNLAYERED normal declaration beats every layered one
        regardless of specificity. A page's own rules — inline <style> or styles.css — win by
        construction, not by luck; and
     2. the selectors are wrapped in `:where()`, which contributes ZERO specificity, so even a
        single class on the page outranks them.

   That is deliberately belt-and-braces: eight page agents build on top of this file in parallel,
   and none of them should ever have to fight it.

   MEASURED, not assumed, before writing this:
     · `:focus-visible` appeared ZERO times in the 6,211-line main page.
     · 23 buttons and ~27 inputs were rendering in the UA control font next to Inter body text,
       because browsers do NOT inherit font-family into form controls.
     · `appearance` appeared ZERO times in the whole of styles.css (11,843 lines), so every
       checkbox and radio in the product was an OS widget sitting in a designed page.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@layer eos.sys {

  /* ── 1. FOCUS ───────────────────────────────────────────────────────────────────────────────
     One visible ring, on everything a keyboard can reach — including the elements that are always
     forgotten: summary, [role="button"], [tabindex], contenteditable. `:focus-visible` (not
     `:focus`) means a mouse click never draws it, which is why the ring can be loud enough to
     actually see. Modern engines follow the element's own border-radius, so it fits any shape.

     NOTE, honestly: styles.css sets `outline: none` (unlayered) on input/select/textarea :focus
     and replaces it with a box-shadow ring, and an unlayered rule outranks this layer. On the 21
     pages that load styles.css those three elements keep THEIR ring — which exists and is visible,
     so nothing regresses. This rule is what covers everything styles.css never reached. */
  :where(
    a[href], button, [role="button"], [role="tab"], [role="switch"], [role="link"],
    input, select, textarea, summary, label[for],
    [tabindex]:not([tabindex="-1"]), [contenteditable="true"]
  ):focus-visible {
    outline: var(--eos-ring-width, 3px) solid var(--eos-focus-color, currentColor);
    outline-offset: var(--eos-ring-offset, 2px);
  }

  /* A focused element must never be hidden behind a sticky header or a neighbouring card. */
  :where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
    position: relative;
    z-index: 1;
  }

  /* ── 2. FONT INHERITANCE INTO CONTROLS ──────────────────────────────────────────────────────
     The single highest-value line in this file. Browsers give form controls their own UA font, so
     a designed page ships two typefaces without anyone choosing the second one. font-size is
     deliberately NOT inherited here: that would resize ~27 existing inputs and move layout on 22
     pages, which is a page-agent decision, not a system one. */
  :where(button, input, select, textarea, optgroup, option) {
    font-family: var(--eos-font, inherit);
  }

  /* A pseudo-element cannot live inside :where() — `:where()` is forgiving and would silently drop
     it, which is how "I wrote the rule" turns into "the rule never shipped". Its own line. */
  ::file-selector-button {
    font-family: var(--eos-font, inherit);
    cursor: pointer;
  }

  :where(button, [role="button"], summary, label[for], select):not(:disabled) {
    cursor: pointer;
  }

  :where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  /* ── 3. TEXT FIELDS — appearance stripped, look designed ────────────────────────────────────
     The type list is an ALLOWLIST on purpose. `appearance: none` on a bare `input` selector would
     also hit range, color, file, date and time and destroy those widgets outright. */
  :where(
    input:not([type]),
    input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="tel"],
    textarea
  ) {
    appearance: none;
    -webkit-appearance: none;
    border-radius: var(--eos-radius-2);
    transition: outline-color var(--eos-dur-echo, 90ms) var(--eos-ease, ease-out),
                background-color var(--eos-dur-control, 160ms) var(--eos-ease, ease-out);
  }

  /* Safari's search bezel and its cancel button both survive `appearance: none` on the input. */
  :where(input[type="search"])::-webkit-search-decoration,
  :where(input[type="search"])::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
  }

  /* SELECT — kept on purpose, and this is the one honest gap in this file.
     Stripping a select's appearance also strips its arrow, and the arrow can only be redrawn with
     `background-image`. styles.css sets `background: var(--input-background) !important` on
     `select` (unlayered, ~line 816), which wins over anything this layer can write without
     !important — so `appearance: none` here would leave 167 selects across 21 pages with NO
     dropdown indicator at all. That is a worse page than an OS chevron. Selects therefore get the
     designed frame and the focus ring, and keep their native arrow. A page agent who owns both a
     page and its background can finish the job locally. */
  :where(select) {
    border-radius: var(--eos-radius-2);
  }

  /* ── 4. CHECKBOX AND RADIO — real designed controls ─────────────────────────────────────────
     The checked mark is drawn on a PSEUDO-ELEMENT, never on the input's own background. That is
     not a style choice: styles.css forces `background: var(--input-background) !important` onto
     every `input`, so a background-painted tick would be invisible. A pseudo-element carries its
     own background and is immune to that rule, so the control reads correctly in BOTH themes. */
  :where(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: var(--eos-space-4);
    height: var(--eos-space-4);
    flex: none;
    vertical-align: -2px;
    border-style: solid;
    border-width: var(--eos-hairline, 1px);
    border-radius: var(--eos-radius-1);
    transition: outline-color var(--eos-dur-echo, 90ms) var(--eos-ease, ease-out);
  }

  :where(input[type="radio"]) {
    border-radius: var(--eos-radius-circle);
  }

  /* The tick: an L rotated into a check. Drawn with border-color so it inherits the theme accent
     — cyan on the near-black night field, magenta on the near-white day field. */
  :where(input[type="checkbox"]):checked::after {
    content: "";
    position: absolute;
    left: 33%;
    top: 12%;
    width: 26%;
    height: 56%;
    border: 2px solid var(--eos-focus-color, currentColor);
    border-top: 0;
    border-left: 0;
    transform: rotate(42deg);
  }

  :where(input[type="checkbox"]):indeterminate::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    top: 45%;
    height: 2px;
    background-color: var(--eos-focus-color, currentColor);
  }

  :where(input[type="radio"]):checked::after {
    content: "";
    position: absolute;
    inset: 24%;
    border-radius: var(--eos-radius-circle);
    background-color: var(--eos-focus-color, currentColor);
  }

  /* ── 5. FIGURES THAT DO NOT WOBBLE ──────────────────────────────────────────────────────────
     Proportional digits change width between frames, so a live P&L column visibly jitters while it
     updates. Tabular figures are the difference between a dashboard and a terminal. Digits only —
     letters are untouched, so this can never reflow prose. */
  :where(table) :where(td, th),
  :where(output, time, meter, progress, .eos-num, .eos-tabular, [data-num], [data-numeric]),
  :where(input[type="number"]) {
    font-variant-numeric: tabular-nums;
  }

  /* Money and quantities read best when the minus sign cannot be mistaken for a hyphen and the
     column edges line up, so numeric cells lean right unless a page says otherwise. */
  :where(td, th):where(.eos-num, [data-num], [data-numeric]) {
    text-align: right;
  }
}