/*
 * editorial.css — GENERATED FILE, DO NOT EDIT.
 * 
 * Compiled from core/admin/skin/ by control-plane/scripts/generate-skin.js
 * so the operator console runs the SAME skin engine as every tenant admin
 * rather than a second copy of it. Edit core, then regenerate:
 * 
 *   node control-plane/scripts/generate-skin.js
 * 
 * Drift guard: control-plane/functions/test/skin-parity.test.js
 */
/* =============================================================
   WarHorse admin — the EDITORIAL skin engine
   -------------------------------------------------------------
   The second selectable admin theme (Settings → Theme). Hyperspace is the
   glass skin under its stage name; THIS file is Editorial: paper and ink.
   Design contract: docs/design/admin-editorial/CONTRACT.md — read it before
   consuming or extending this file.

   The language in one breath: a cream page, near-black type, structure drawn
   with 1px rules and whitespace instead of containers. Archivo carries
   headings, item titles and uppercase labels; Inter carries everything else
   (tabular numerals stand in for the mono). No cards, no shadows, no blur,
   no blobs, no springs. Radius exists only on small controls, at 3px.

   REQUIRES tokens.css first (brand pair + shared plumbing); loads alongside
   glass.css/rail.css/background.css, whose every rule is glass-gated and
   therefore inert here — as every rule HERE is gated [data-skin='editorial']
   and inert everywhere else. Classic and glass must render bit-identical
   with this file present; the admin-skin test enforces survivors.

   What the ENGINE owns (apps consume, never restate): the tokens; the page
   ground; the type system (headings, data-ttl item titles, the legacy
   inline panel-title hook, uppercase labels); the nav column's geometry and
   voice; generic tables, buttons, inputs, links, focus; scrollbars; the
   flattening of the .gl-* surface classes; and the shared re-targeting of
   legacy hardcoded inline colours. Each APP owns overriding its own
   classic-era backgrounds/layout and styling its screens — in its own
   <style>, gated [data-skin='editorial'], tokens only.
   ============================================================= */

/* ------------------------------------------------------------- tokens */
/* Three-state theme pattern (see tokens.css): light on the bare gated
   root; dark under the system guard; dark again under the explicit
   attribute so the member's choice wins in both directions. */
:root[data-skin='editorial'] {
  --ed-bg: #fcfbf7;
  --ed-bg-raise: #f5f2ec;
  --ed-ink: #16140f;
  --ed-body: #3d3a33;
  --ed-muted: #877f72;
  --ed-rule: #e6e0d4;
  --ed-rule-strong: #d4ccbc;

  --ed-brand: var(--brand-a);
  --ed-brand-b: var(--brand-b);
  /* Label colours ON the brand fills. NOT var(--on-brand): tokens.css
     declares that pair only inside glass-gated blocks, so the alias resolved
     to nothing here and button labels painted in body colour (caught by the
     login track, 2026-08-26). Light fills ARE the raw config colours, so the
     assemble-computed pair is exactly right; the dark blocks below carry a
     safe default and theme.js refines both from the EFFECTIVE brand values
     at DOM-ready (ensureEditorialLabels), covering runtime overrides too. */
  --ed-on-brand: var(--on-brand, #ffffff);
  --ed-on-brand-b: var(--on-brand-b, #ffffff);
  --ed-brand-wash: color-mix(in srgb, var(--brand-a) 7%, transparent);

  --ed-ok: #2f7d4f;
  --ed-danger: #b3372e;

  --ed-r: 3px;
  --ed-font-display: 'Archivo', system-ui, sans-serif;
  --ed-font-body: 'Inter', system-ui, sans-serif;

  /* The uppercase label voice — Editorial's signature texture. Compose with
     font: var(--ed-label-size)/1.3 var(--ed-font-display) + the two below. */
  --ed-label-size: 10.5px;
  --ed-label-track: 0.08em;

  --ed-nav-w: 228px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin='editorial']:not([data-theme='light']) {
    --ed-bg: #171512;
    --ed-bg-raise: #201d19;
    --ed-ink: #f0ede6;
    --ed-body: #cdc9c0;
    --ed-muted: #94908a;
    --ed-rule: #2c2925;
    --ed-rule-strong: #3a3630;
    --ed-brand: color-mix(in oklab, var(--brand-a) 62%, #ffffff 38%);
    --ed-brand-b: color-mix(in oklab, var(--brand-b) 78%, #ffffff 22%);
    --ed-brand-wash: color-mix(in srgb, var(--brand-a) 16%, transparent);
    /* Dark-fill label defaults (glass's measured pair); refined per tenant
       by theme.js ensureEditorialLabels() at DOM-ready. */
    --ed-on-brand: var(--on-brand, #ffffff);
    --ed-on-brand-b: var(--on-brand-b, #0d0e11);
    --ed-ok: #63b98a;
    --ed-danger: #ff8a7e;
    color-scheme: dark;
  }
}
:root[data-skin='editorial'][data-theme='dark'] {
  --ed-bg: #171512;
  --ed-bg-raise: #201d19;
  --ed-ink: #f0ede6;
  --ed-body: #cdc9c0;
  --ed-muted: #94908a;
  --ed-rule: #2c2925;
  --ed-rule-strong: #3a3630;
  --ed-brand: color-mix(in oklab, var(--brand-a) 62%, #ffffff 38%);
  --ed-brand-b: color-mix(in oklab, var(--brand-b) 78%, #ffffff 22%);
  --ed-brand-wash: color-mix(in srgb, var(--brand-a) 16%, transparent);
  --ed-on-brand: var(--on-brand, #ffffff);
  --ed-on-brand-b: var(--on-brand-b, #0d0e11);
  --ed-ok: #63b98a;
  --ed-danger: #ff8a7e;
  color-scheme: dark;
}

/* ------------------------------------------------------------- ground */
[data-skin='editorial'] body { margin: 0; background: var(--ed-bg); }
[data-skin='editorial'] [data-frame] {
  background: var(--ed-bg);
  color: var(--ed-body);
  font-family: var(--ed-font-body);
  font-size: 14px;
  line-height: 1.55;
  /* No border, no radius, no overflow clipping, no isolation games: the
     page IS the surface. The [data-bg] blob stack is glass-gated and stays
     display:none here — nothing to clip. */
}
[data-skin='editorial'] ::selection { background: var(--ed-brand-wash); }

/* ------------------------------------------------------------- type */
[data-skin='editorial'] :is(h1, h2, h3, h4),
[data-skin='editorial'] [data-ttl],
[data-skin='editorial'] [style*='font-size:15px;font-weight:600'] {
  font-family: var(--ed-font-display);
  letter-spacing: -0.01em;
  color: var(--ed-ink);
  font-weight: 700;
}
[data-skin='editorial'] h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }

/* Numbers align without a monospace. Blanket tabular figures cost nothing
   in prose and save every table/KPI from ragged columns. */
[data-skin='editorial'] * { font-variant-numeric: tabular-nums; }

[data-skin='editorial'] a { color: var(--ed-brand); text-decoration: none; }
[data-skin='editorial'] a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------- nav column */
/* The rail hook, re-voiced: a fixed, always-open column of quiet text on the
   page ground, a single rule on its right edge. No width animation, no hover
   expansion — rail.css is glass-gated and contributes nothing here; what we
   fight is each app's CLASSIC sidebar (navy slab), which the app's own
   editorial block overrides using these hooks. */
[data-skin='editorial'] [data-rail] {
  width: var(--ed-nav-w);
  flex-shrink: 0;
  background: var(--ed-bg);
  border-right: 1px solid var(--ed-rule);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  font-family: var(--ed-font-body);
  transition: none;
}
[data-skin='editorial'] [data-rail] [data-rail-label] {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  white-space: nowrap;
}
[data-skin='editorial'] [data-rail] [data-rail-item] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Mirror of the rail.css fix: WarChest/WarHorn build rows with
     `all:unset`, which reverts box-sizing to content-box and makes
     width:100% + padding overflow the column (the clipped queue badge).
     Declared here at (0,3,1)-beating strength for every host app. */
  box-sizing: border-box;
  padding: 7px 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  color: var(--ed-body);
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}
[data-skin='editorial'] [data-rail] [data-rail-item]:hover {
  color: var(--ed-ink);
  background: var(--ed-bg-raise);
}
[data-skin='editorial'] [data-rail] [data-rail-item][aria-current]:not([aria-current='false']),
[data-skin='editorial'] [data-rail] [data-rail-item].is-active,
[data-skin='editorial'] [data-rail] [data-rail-item][data-active]:not([data-active='false']),
[data-skin='editorial'] [data-rail] [data-rail-item][data-on] {
  color: var(--ed-ink);
  font-weight: 600;
  border-left-color: var(--ed-brand);
  background: transparent;
  box-shadow: none;
}
[data-skin='editorial'] [data-rail] .rail__icon {
  width: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ed-muted);
}
[data-skin='editorial'] [data-rail] [data-rail-item]:is([aria-current]:not([aria-current='false']), .is-active, [data-active]:not([data-active='false']), [data-on]) .rail__icon { color: var(--ed-brand); }
[data-skin='editorial'] [data-rail] [data-rail-sep] {
  height: 1px;
  margin: 12px 10px;
  background: var(--ed-rule);
  flex-shrink: 0;
}
[data-skin='editorial'] [data-rail] [data-rail-head] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 18px;
  overflow: visible;
}
[data-skin='editorial'] [data-rail] [data-rail-head] img {
  width: 26px;
  height: 26px;
  max-width: none;
  max-height: none;
  flex-shrink: 0;
  object-fit: contain;
}
[data-skin='editorial'] [data-rail] [data-rail-foot] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 0;
  margin-top: 10px;
  border-top: 1px solid var(--ed-rule);
  /* Containment (owner report: the address overflowed the column). Flex
     children may shrink; text truncates with an ellipsis; the avatar is
     exempt below — it must never deform. Hover-scroll for the full value is
     the follow-up pass's; title attributes serve meanwhile. */
  min-width: 0;
}
[data-skin='editorial'] [data-rail] [data-rail-foot] > * { min-width: 0; }
[data-skin='editorial'] [data-rail] [data-rail-foot] :is(div, span, a) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-skin='editorial'] [data-rail] [data-rail-foot] :is(img, [class*='avatar' i], [id*='avatar' i]) {
  flex-shrink: 0;
  overflow: visible;
  aspect-ratio: 1 / 1;
  /* --ed-r, not 50%: circles are Hyperspace's voice; Editorial's marks are
     square-cornered like every other small control (CMS director's catch —
     the topbar avatar already sits at --ed-r). Undeformable either way. */
  border-radius: var(--ed-r);
  object-fit: cover;
}
[data-skin='editorial'] [data-rail] nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
[data-skin='editorial'] [data-rail] nav::-webkit-scrollbar { width: 0; height: 0; }
@media (max-width: 880px) {
  /* :root strength — the base declaration above is :root-gated and would
     otherwise win the tie (caught by the CMS track). */
  :root[data-skin='editorial'] { --ed-nav-w: 64px; }
  [data-skin='editorial'] [data-rail] { padding: 18px 8px; }
  [data-skin='editorial'] [data-rail] [data-rail-label] { display: none; }
}

/* ------------------------------------------------------------- surfaces */
/* The glass surface classes exist in shared markup; Editorial flattens them
   to nothing — grouping is the app's job, done with rules and space. */
[data-skin='editorial'] :is(.gl-rail, .gl-panel, .gl-work) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
[data-skin='editorial'] [data-rail].gl-rail { border-right: 1px solid var(--ed-rule); }

/* ------------------------------------------------------------- tables */
[data-skin='editorial'] table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-size: 13.5px;
}
[data-skin='editorial'] th {
  font-family: var(--ed-font-display);
  font-size: var(--ed-label-size);
  font-weight: 600;
  letter-spacing: var(--ed-label-track);
  text-transform: uppercase;
  color: var(--ed-muted);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ed-rule-strong);
  background: transparent;
}
[data-skin='editorial'] td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--ed-rule);
  color: var(--ed-body);
}

/* ------------------------------------------------------- buttons + inputs */
[data-skin='editorial'] button,
[data-skin='editorial'] input,
[data-skin='editorial'] select,
[data-skin='editorial'] textarea {
  font-family: var(--ed-font-body);
}
[data-skin='editorial'] :is(input[type='text'], input[type='email'], input[type='number'], input[type='password'], input[type='search'], input[type='url'], input[type='date'], input[type='time'], select, textarea) {
  background: transparent;
  border: 1px solid var(--ed-rule-strong);
  border-radius: var(--ed-r);
  color: var(--ed-ink);
  padding: 8px 10px;
  font-size: 13.5px;
}
[data-skin='editorial'] :is(input, select, textarea)::placeholder { color: var(--ed-muted); }
[data-skin='editorial'] :is(button, input, select, textarea, a[href], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ed-brand);
  outline-offset: 2px;
  border-radius: var(--ed-r);
}

/* ------------------------------------------------------------- scrollbars */
[data-skin='editorial'] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-skin='editorial'] ::-webkit-scrollbar-thumb { background: var(--ed-rule-strong); border-radius: 5px; border: 2px solid var(--ed-bg); }
[data-skin='editorial'] ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------- legacy inline colours, re-targeted */
/* The apps carry classic-era hardcoded inline styles; glass re-targets them
   per app, Editorial re-targets the recurring set ONCE here. !important is
   load-bearing: only it outranks a style attribute. Apps map their own
   stragglers in their own blocks. */
[data-skin='editorial'] [style*='color:#9a9ea4'],
[data-skin='editorial'] [style*='color: #9a9ea4'],
[data-skin='editorial'] [style*='color: rgb(154, 158, 164)'],
[data-skin='editorial'] [style*='color:#7a8089'],
[data-skin='editorial'] [style*='color:#b4b8be'],
[data-skin='editorial'] [style*='color: #b4b8be'],
[data-skin='editorial'] [style*='color: rgb(180, 184, 190)'],
[data-skin='editorial'] [style*='color:#6a6f77'],
[data-skin='editorial'] [style*='color:#5a5f67'],
[data-skin='editorial'] [style*='color: #5a5f67'],
[data-skin='editorial'] [style*='color:#7e8896'] { color: var(--ed-muted) !important; }
[data-skin='editorial'] [style*='color:#16181d'],
[data-skin='editorial'] [style*='color: #16181d'],
[data-skin='editorial'] [style*='color:#16191d'] { color: var(--ed-ink) !important; }
[data-skin='editorial'] [style*='color:#142f52'] { color: var(--ed-brand) !important; }
[data-skin='editorial'] [style*='color:#ed1937'] { color: var(--ed-brand-b) !important; }
[data-skin='editorial'] [style*='background:#142f52'],
[data-skin='editorial'] [style*='background: #142f52'] { background-color: var(--ed-brand) !important; color: var(--ed-on-brand) !important; }
[data-skin='editorial'] [style*='background:#fff'],
[data-skin='editorial'] [style*='background: #fff'],
[data-skin='editorial'] [style*='background: rgb(255, 255, 255)'],
[data-skin='editorial'] [style*='background-color: rgb(255, 255, 255)'],
[data-skin='editorial'] [style*='background:#f7f8f9'] { background-color: transparent !important; }
[data-skin='editorial'] [style*='border-bottom:1px solid #eceef1'],
[data-skin='editorial'] [style*='border-bottom: 1px solid #eceef1'] { border-bottom-color: var(--ed-rule) !important; }
[data-skin='editorial'] [style*='border-top:1px solid #eceef1'] { border-top-color: var(--ed-rule) !important; }
[data-skin='editorial'] [style*='background:#eceef1'] { background-color: var(--ed-rule) !important; }
[data-skin='editorial'] [style*='background:#f1f2f4'] { background-color: var(--ed-rule) !important; }