/* Shared console chrome — the whole foundation for a page that loads no other
   sheet, plus the few chrome rules the mock's inline styles cannot carry.
   Everything visual on the chrome itself lives inline in console-chrome.js
   (verbatim from the v4 pin); this file holds tokens, faces, the global grammar,
   the responsive switch, hover states and scrollbars.

   Double-definition guard: page-layout rules are scoped to
   `body[data-lc-page]`. Foundation tokens also live on `#lc-chrome` and
   `#lc-chrome-foot`, so legacy documents can style the injected chrome without
   letting its layout grammar leak into their content.
   The @font-face blocks are necessarily global; they are byte-identical to the
   ones index.html already ships, so a duplicate load is a no-op.

   A9/D6/D7: only the two self-hosted faces ship. 'Helvetica Neue Light' runs
   render through the fallback stack on purpose, and the db.onlinewebfonts.com
   mirror the mock links is banned in any form. */

@font-face {
  font-family: "Kudryashev Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/kudryashev-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: "Kudryashev Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/kudryashev-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: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-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: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-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;
}

/* PALETTE REV 2.1 FALLBACK, for the pages that have no token layer at all (XYZ-2214).
 *
 * `--lc-faint`, `--lc-amber` and `--lc-amber-line` were removed from the two blocks below so
 * `editorial-tokens.css` can reach the chrome pages. But four pages that load THIS file load
 * nothing else — `requests.html`, `search.html`, `notifications.html`, `docs.html` link only
 * `console-chrome.css`, no `styles.css` and no `editorial-tokens.css` — and they use the two
 * tokens heavily (requests 17 `var(--lc-faint)`, search 10, docs.css 10). Deleting the three
 * outright would have left those pages with no value at all: measured, every amber warning and
 * every faint eyebrow on them fell back to `--lc-ink`, losing the warning colour entirely.
 *
 * So the values live on here as a FALLBACK LAYER, at rev 2.1. An unlayered declaration always
 * beats a layered one whatever the source order, so `editorial-tokens.css`'s `:root` wins wherever
 * it is loaded — which is the whole point of the change — while a page with no token layer still
 * gets a defined, current colour. The selectors are the ones this file already used, so the
 * theming behaviour of those four pages is unchanged.
 *
 * When those pages gain the token layer, this block can go. */
@layer lc-chrome-token-fallback {
  body[data-lc-page],
  #lc-chrome,
  #lc-chrome-foot {
    --lc-faint: #5b6472;
    --lc-amber: #925b1b;
    --lc-amber-line: #d9b58a;
  }
  body[data-lc-page][data-lc-theme="dark"],
  body[data-lc-theme="dark"] #lc-chrome,
  body[data-lc-theme="dark"] #lc-chrome-foot {
    --lc-faint: #7f8ba0;
    --lc-amber: #d9ae6c;
    --lc-amber-line: #5a4826;
  }
}

/* The mock's own custom-property block (Desktop.dc.html:16-17), verbatim EXCEPT for three tokens.
 *
 * `--lc-faint`, `--lc-amber` and `--lc-amber-line` were removed from both blocks (XYZ-2214).
 * These selectors are body-level, so they beat `editorial-tokens.css`'s `:root` for every element
 * that renders, and this file loads after it — which made palette rev 2.1's amber and faint INERT
 * on all four `<body data-lc-page>` pages while every other token in that revision landed. The
 * three are now inherited from `:root` instead. Do not re-add them here: a token this file also
 * declares is a token the palette layer cannot change. */
body[data-lc-page],
#lc-chrome,
#lc-chrome-foot {
  --lc-bg: #ffffff;
  --lc-ink: #111827;
  --lc-body: #374151;
  --lc-muted: #6b7280;
  --lc-line-strong: #d1d5db;
  --lc-line: #e5e7eb;
  --lc-hairline: #f3f4f6;
  --lc-wash: #f9fafb;
  --lc-green: #15803d;
  --lc-red: #b91c1c;
  --lc-red-line: #f2d4d4;
  --lc-green-line: #cde7da;
  --lc-bg-fade: rgba(255, 255, 255, 0.5);
}
body[data-lc-page][data-lc-theme="dark"],
body[data-lc-theme="dark"] #lc-chrome,
body[data-lc-theme="dark"] #lc-chrome-foot {
  --lc-bg: #0d1017;
  --lc-ink: #eef2f8;
  --lc-body: #c2cbd9;
  --lc-muted: #9ca8b9;
  --lc-line-strong: #3a4353;
  --lc-line: #2a3241;
  --lc-hairline: #1c2330;
  --lc-wash: #151b26;
  --lc-green: #4dd5a4;
  --lc-red: #ff7d85;
  --lc-red-line: #4a2531;
  --lc-green-line: #1e3a30;
  --lc-bg-fade: rgba(13, 16, 23, 0.5);
}

/* The shell: nav, page <main> (flex:1), footer stacked full height. */
body[data-lc-page] {
  margin: 0;
  background: var(--lc-bg);
  color: var(--lc-ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Global grammar (Desktop.dc.html:18-36), scoped to the console body. */
body[data-lc-page],
body[data-lc-page] *,
body[data-lc-page] *::before,
body[data-lc-page] *::after {
  box-sizing: border-box;
}
body[data-lc-page] a {
  color: var(--lc-body);
  text-decoration: none;
  transition:
    color 0.2s,
    border-color 0.2s;
}
body[data-lc-page] a:hover {
  color: var(--lc-ink);
}
body[data-lc-page] input {
  font-family: "Space Grotesk", sans-serif;
  color: var(--lc-ink);
  caret-color: var(--lc-ink);
}
body[data-lc-page] input:focus {
  outline: none;
  border-color: var(--lc-ink) !important;
}

/* FX-01 (spec section 3), carried unscoped exactly as the spec writes it. The
   rest of this file scopes page rules to `body[data-lc-page]`, and this pair
   deliberately does not: the eight promoted console documents (index, compare,
   admin, login and their mobile twins) declare the page on the chrome HOST div,
   not on `<body>`, so a `body[data-lc-page]` rule is inert on exactly half the
   console and the ring would be missing where nobody is looking for it.
   Unscoped also keeps this pair at a lower specificity than the pages' own
   component rules — Pools' `.tab:focus-visible` and Sweeps' `.text-button`
   still draw their own ink ring, which FX-01 leaves alone. */
button:focus {
  outline: none;
}
button:focus-visible {
  outline: 2px solid var(--lc-green);
  outline-offset: 3px;
}

@keyframes lc-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Two markup variants, one breakpoint. The desktop nav and its 30/300 wash own
   >=768px; the mobile nav and its 18/220 wash own everything below. */
@media (min-width: 768px) {
  [data-lc-nav="mobile"],
  [data-lc-wash="mobile"] {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  [data-lc-nav="desktop"],
  [data-lc-wash="desktop"] {
    display: none !important;
  }
}

/* The mobile panel carries an inline `display:flex`, which outranks [hidden]. */
[data-lc-chrome-panel][hidden],
[data-lc-chrome-scrim][hidden] {
  display: none !important;
}

[data-lc-chrome-menu]:hover,
[data-lc-chrome-theme]:hover {
  border-color: var(--lc-ink);
}

/* The full mobile inventory is intentionally not clipped to the old four-row
   subset. The drawer becomes the scroll region on short viewports while the
   sticky navbar and page underneath remain stable. */
[data-lc-nav="mobile"] [data-lc-chrome-panel] {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* FT-01. `styles.css:1340` styles every `footer` as a flex container, and the
   chrome's footer is a `footer`, so its inner `max-width:1320px;margin:0 auto`
   container became a flex ITEM: shrink-to-fit, and centred by its own auto
   margins. With three spans that read as a wide strip and nobody noticed; with
   the one ruled line it reads as a centred credit, 539px from the left of a
   1440px page, where the mock has it at the left edge of the 1320 container.
   The four pages that load styles.css did this; docs and search, which do not,
   already drew it the mock's way. This puts the chrome's own footer back into
   normal block flow so all eight agree, and touches no page's own footer. */
#lc-chrome-foot > footer {
  display: block;
}

/* FX-01: one focus colour in the console. This rule survives the page-level pair
   above because it also covers the nav's links and the network select. */
[data-lc-nav] a:focus-visible,
[data-lc-nav] button:focus-visible,
[data-lc-nav] select:focus-visible {
  outline: 2px solid var(--lc-green);
  outline-offset: 3px;
}

body[data-lc-page] * {
  scrollbar-width: thin;
  scrollbar-color: var(--lc-line-strong) transparent;
}
body[data-lc-page] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body[data-lc-page] ::-webkit-scrollbar-track,
body[data-lc-page] ::-webkit-scrollbar-corner {
  background: transparent;
}
body[data-lc-page] ::-webkit-scrollbar-thumb {
  background: var(--lc-line-strong);
  border-radius: 0;
}
body[data-lc-page] ::-webkit-scrollbar-thumb:hover {
  background: var(--lc-muted);
}

/* Scoped like everything else in this file: the injected pages wholesale, plus the
   chrome's own markup on bind-mode pages — never the 8 promoted pages' content,
   whose own sheets carry their own kill. */
@media (prefers-reduced-motion: reduce) {
  body[data-lc-page] *,
  [data-lc-nav] * {
    animation: none !important;
  }
}