/* ── retro82 · "night console" ──
   The fourth skin is a RETRO-FUTURIST INSTRUMENT PANEL, taken from the Omarchy
   theme "Retro '82" (omarchytheme.com/themes/retro-82/; palette inspiration
   @niraletter, theme OldJobobo). Its readme: "deep navy surfaces, warm amber
   focus states, and teal support colors … keeps the desktop dark and compact."
   The preview says it in pixels: navy window chrome drawn with thin TEAL
   hairlines, cream phosphor text, and amber used like a lit filament — the
   active workspace is a solid amber block with navy ink, the editor's mode
   indicator an orange block with dark text. So this skin is built from
   HAIRLINES and LIT BLOCKS — not from print stamps (brick) or glow-blooms
   (dracula).

   Thesis: the board is an instrument panel at night. Deep navy carries
   everything. Amber is the lit filament and earns force by scarcity — action,
   focus, selection, never decoration. Teal is the structural ink: rules,
   legends, meter fills, edges. The rail is the bezel, the darkest thing on
   screen in BOTH tones. Selection is a LIT BLOCK — solid amber with navy ink,
   never a tint. That inversion is the identity.

   ── palette authority ──
   Canonical hexes are KEPT wherever they pass: Background #00172e, Foreground
   #f6dcac, Accent #faa968, teal #8cbfb8 (color6) as the dim ink, red #f97751
   (color9) as danger on dark. The theme's own cursor and selection lines are
   honoured literally: the caret is Foreground, selection is the accent fill
   with Background as ink.
   Where a canonical value fails WCAG AA it is DERIVED — same hue, lightness
   only:
     Accent #faa968 is 1.59:1 on paper and becomes #9c4a12 (5.11:1 as text)
       in the light tone only; the dark tone keeps the canonical amber.
     color8 #57898a is 2.81:1 on the recessed paper step and becomes #2c5c5e
       (5.37:1) in light; in dark, color6 #8cbfb8 passes untouched (6.27:1 on
       the recessed step).
     color1 #f85525 is 2.75:1 on paper and becomes #a8320f (5.56:1) there.
   The scheme is dark-born ("keeps the desktop dark"), so the light tone is
   derived as PHOSPHOR PAPER — the Foreground cream as ground, Background
   #00172e reused as ink (14.96:1). The board is the paper, the cards are the
   lit face on it. Every pair below is measured, not eyed.

   ── the head is a status line ──
   Card chrome is a terminal window head: a quiet strip closed by a faint amber
   hairline, the type badge set as a mono instrument legend. A card WITH a tag
   takes the tag's hue (chrome.js derives the ink per fill), so a board can
   break up the panel without leaving the language. */

/* ════════════════ tokens ════════════════ */

/* light tone — derived phosphor paper */
[data-skin="retro82"] {
  --bg: #f5e9c9;            /* phosphor paper — Foreground family, lightened */
  --surface: #fdf6e0;       /* the lit card face                     (derived) */
  --surface-2: #e9d9b3;     /* recessed / hover step                 (derived) */
  --text: #00172e;          /* Background reused as ink — 14.96:1 */
  --text-dim: #2c5c5e;      /* color8 darkened — 6.21:1 bg, 6.94:1 surface,
                               5.37:1 on the recessed surface-2 */
  --border: #4f8b86;        /* teal control edge — 3.24:1 bg, 3.62:1 surface */
  --frame-border: #c9b287;  /* warm hairline card frame, quiet at 1.70:1 */
  --accent: #9c4a12;        /* accent darkened for paper — 5.11:1 as text
                               (derived) */
  --on-accent: #fdf6e0;     /* the lit face as ink on the burnt amber — 5.71:1 */
  --danger: #a8320f;        /* color1 darkened — 5.56:1 bg, 4.81:1 surface-2 */
  --danger-light: #a8320f;  /* the light-theme shade (baseline convention) */
  --danger-dark: #f97751;   /* the dark-theme shade */
  --radius: 6px;            /* a machined bezel edge — soft, but not a pill */
  --rail: #000c19;          /* the bezel — darker than the board, both tones */
  --font-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* dark tone — native Retro '82 */
[data-skin="retro82"][data-theme="dark"] {
  --bg: #00172e;            /* Background   (canonical) */
  --surface: #07233c;       /* one navy step up          (derived) */
  --surface-2: #103452;     /* recessed / hover step     (derived) */
  --text: #f6dcac;          /* Foreground  (canonical) — 13.56:1 */
  --text-dim: #8cbfb8;      /* color6      (canonical) — 8.83:1 bg, 6.27:1 on
                               the recessed surface-2 */
  --border: #2f7d84;        /* teal control edge — 3.78:1 bg, 3.34:1 surface */
  --frame-border: #24596e;  /* teal hairline card frame — 2.35:1 on bg */
  --accent: #faa968;        /* accent      (canonical) — 9.41:1 as text */
  --on-accent: #00172e;     /* Background as ink on the amber fill — 9.41:1 */
  --danger: #f97751;        /* color9 (canonical) — 6.70:1 bg, 5.92:1 surface,
                               4.76:1 on the recessed step. Canonical color1
                               #f85525 is 3.86:1 there and fails. */
  --danger-light: #a8320f;
  --danger-dark: #f97751;
  color-scheme: dark;
}

/* ════════════════ the surfaces nobody drew ════════════════
   The palette authors these explicitly — selection and the cursor ARE part of
   the scheme, so they are shipped literally rather than reinvented. The
   selection pair is ABSOLUTE (Accent #faa968 on Background #00172e ink) and
   does not follow the tone; the cursor is the foreground OF THE TONE, because
   a cream caret on paper is no cursor at all. */
[data-skin="retro82"] ::selection {
  background: #faa968;
  color: #00172e;
}
[data-skin="retro82"] ::-moz-selection {
  background: #faa968;
  color: #00172e;
}
[data-skin="retro82"] :is(input, textarea, [contenteditable]) {
  caret-color: var(--text);    /* the scheme's cursor IS the foreground */
  accent-color: var(--accent);
}
[data-skin="retro82"] ::placeholder {
  color: var(--text-dim);
  opacity: 1;                  /* never let the browser fade it further */
}
[data-skin="retro82"] :focus-visible {
  outline: 2px solid var(--accent);   /* warm amber focus — the scheme's words */
  outline-offset: 2px;                /* no radius override: a chip must not
                                         change shape when it takes focus */
}
[data-skin="retro82"] {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-dim) 45%, transparent) transparent;
}
[data-skin="retro82"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-skin="retro82"] ::-webkit-scrollbar-track { background: transparent; }
[data-skin="retro82"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-dim) 45%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
[data-skin="retro82"] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  background-clip: padding-box;
}

/* ════════════════ controls ════════════════ */
/* Machined, not pill and not sharp: one shared 6px bezel edge. */
[data-skin="retro82"] :is(button, input, select, textarea) {
  border-radius: var(--radius);
}
[data-skin="retro82"] .auth-card button#authGo { border-radius: var(--radius); }
[data-skin="retro82"] :is(#modalBox, .auth-card, .cat-menu, .user-menu) {
  border-radius: calc(var(--radius) + 2px);
  border-color: var(--frame-border);
  box-shadow: 0 2px 6px rgba(0, 8, 18, .18),
              0 22px 48px -20px rgba(0, 8, 18, .45);
}

/* ════════════════ the lit block ════════════════
   Selection is a solid amber fill with navy ink — the preview's active
   workspace and its orange mode indicator. Never a tint: a tinted row is a
   grey-world habit, and this panel has none. The pair is pinned, so the block
   is the SAME object on paper and on the bezel (9.41:1); only the surfaces
   around it change with the tone. */
[data-skin="retro82"] .look-seg button {
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .06em;
}
[data-skin="retro82"] .look-seg button.active {
  background: #faa968;
  color: #00172e;
  border-color: #faa968;
}

/* ════════════════ cards — hairline frames on the panel ════════════════ */
/* Elevation is a HAIRLINE plus a whisper of navy shadow. The frame is a real
   teal hairline (2.35:1 dark) rather than dracula's near-invisible edge —
   the window outlines in the preview are drawn, and that drawing is this
   world's depth. On hover the hairline energises into amber and the shadow
   takes the accent hue: a channel being selected. No transform — inline-edit
   carets must not shift under the pointer (v0.3 lesson). */
[data-skin="retro82"] .card,
[data-skin="retro82"] .card-tile {
  border-color: var(--frame-border);
  box-shadow: 0 1px 2px rgba(0, 8, 18, .12),
              0 8px 20px -12px rgba(0, 8, 18, .30);
  transition: box-shadow 180ms cubic-bezier(.16, 1, .3, 1),
              border-color 180ms ease;
}
[data-skin="retro82"] .card:hover,
[data-skin="retro82"] .card-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--frame-border));
  box-shadow: 0 1px 2px rgba(0, 8, 18, .16),
              0 14px 32px -14px color-mix(in srgb, var(--accent) 34%, rgba(0, 8, 18, .5));
}
[data-skin="retro82"] .card:focus-within,
[data-skin="retro82"] .card-tile:focus-within {
  border-color: var(--accent);
}

/* ── the card head: a status line ──
   A quiet strip closed by a faint amber hairline — the one warm line on a
   calm card, so ten cards on a board still read as one instrument. Untagged
   heads read in --text (10.13:1 dark / 14.53:1 light); a tagged card takes the
   tag's full hue and chrome.js derives the ink from that exact fill. */
[data-skin="retro82"] .card-head {
  /* --on-accent is RESET here so the fallback can fire. chrome.js writes a
     derived ink onto this element INLINE only when the card carries a tag
     colour (head.style.setProperty), and inline wins over this rule. */
  --on-accent: initial;
  background: var(--tag, color-mix(in srgb, var(--accent) 10%, var(--surface)));
  color: var(--on-accent, var(--text));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
[data-skin="retro82"] .card-head .card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: inherit;
}
[data-skin="retro82"] .card-head .card-title-edit {
  text-transform: none;
  font-family: var(--font-display);
  letter-spacing: .01em;
}
/* the type badge is the instrument legend: mono, uppercase, tracked, squared */
[data-skin="retro82"] .card-head .card-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border-color: currentColor;
  border-radius: 3px;
  opacity: .85;
}
[data-skin="retro82"] .card-head .card-tag {
  color: inherit;
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 3px;
}
[data-skin="retro82"] .card-head .card-action {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 32%, transparent);
  color: inherit;
  border-radius: 4px;
}
[data-skin="retro82"] .card-head .card-action:hover {
  background: color-mix(in srgb, currentColor 26%, transparent);
  border-color: currentColor;
  color: inherit;
}
[data-skin="retro82"] .card-head .card-dot:not(.is-live):not(.is-warn) {
  background: currentColor; opacity: .5;
}

/* ════════════════ the rail — the bezel ════════════════ */
/* The darkest surface on screen in both tones (#000c19, under the board), so
   the panel reads as enclosed hardware. Chrome on it is pinned to Foreground
   cream (14.77:1) and its legends to color6 teal (9.62:1) — the rail is dark
   in BOTH tones, so it never inherits the board's paper ink. The light tone's
   derived amber would be nearly invisible here, so the rail pins its own
   accent to the canonical #faa968 (10.26:1). */
[data-skin="retro82"] #sidebar {
  --rail-accent: #faa968;
  background: var(--rail);
  color: #f6dcac;
  border-right: 1px solid color-mix(in srgb, #2f7d84 45%, var(--rail));
}
[data-skin="retro82"] #sidebar #newEntryBtn {
  /* the primary action is a lit block: amber fill, Background ink (9.41:1) */
  border-radius: var(--radius);
  background: var(--rail-accent);
  color: #00172e;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 8, 18, .35),
              0 8px 18px -10px color-mix(in srgb, var(--rail-accent) 55%, rgba(0, 8, 18, .55));
  transition: box-shadow 180ms cubic-bezier(.16, 1, .3, 1);
}
[data-skin="retro82"] #sidebar #newEntryBtn:hover {
  box-shadow: 0 2px 4px rgba(0, 8, 18, .38),
              0 16px 34px -12px color-mix(in srgb, var(--rail-accent) 70%, rgba(0, 8, 18, .55));
}
[data-skin="retro82"] #sidebar #searchInput {
  border-radius: var(--radius);
  background: color-mix(in srgb, #f6dcac 8%, var(--rail));
  color: #f6dcac;
  border-color: color-mix(in srgb, #8cbfb8 35%, transparent);
}
[data-skin="retro82"] #sidebar #searchInput::placeholder {
  /* on the dark bezel the placeholder gets its own ink (9.62:1 there) rather
     than inheriting the board's paper text-dim */
  color: #8cbfb8;
  opacity: 1;
}
[data-skin="retro82"] #sidebar .nav-item {
  color: #f6dcac;
  border-radius: var(--radius);
}
[data-skin="retro82"] #sidebar .nav-item:hover {
  background: color-mix(in srgb, #f6dcac 9%, transparent);
}
/* the active board is a lit block — the one solid amber chip on the bezel */
[data-skin="retro82"] #sidebar .nav-item.active {
  background: var(--rail-accent);
  color: #00172e;
  font-weight: 600;
}
[data-skin="retro82"] #sidebar .nav-item.active::before {
  background: #00172e;
}
[data-skin="retro82"] #sidebar .nav-item.category-drop-target {
  background: color-mix(in srgb, var(--rail-accent) 22%, transparent);
  outline-color: var(--rail-accent);
}
[data-skin="retro82"] #sidebar .count,
[data-skin="retro82"] #sidebar .nav-item.active .count {
  background: color-mix(in srgb, #f6dcac 12%, transparent);
  color: #8cbfb8;
  border-radius: 3px;
}
/* …except on the lit chip, where the counter flips to a navy legend block */
[data-skin="retro82"] #sidebar .nav-item.active .count {
  background: #00172e;
  color: #f6dcac;
}
[data-skin="retro82"] #sidebar .sidebar-foot button {
  background: color-mix(in srgb, #f6dcac 8%, var(--rail));
  color: #f6dcac;
  border-color: color-mix(in srgb, #8cbfb8 35%, transparent);
}
[data-skin="retro82"] #sidebar button.user-menu-btn {
  background: transparent;
  border-color: transparent;
  color: #f6dcac;
}
[data-skin="retro82"] #sidebar button.user-menu-btn:hover {
  background: color-mix(in srgb, #f6dcac 9%, transparent);
  border-color: transparent;
}
[data-skin="retro82"] #sidebar .topbar-user { color: #f6dcac; }
[data-skin="retro82"] #sidebar .user-caret { color: #8cbfb8; }
[data-skin="retro82"] #sidebar #adminBtn { color: #f6dcac; }

/* ── retro82 rail: the tree furniture ──
   Legends and branch rails are teal (color6) hairlines — the structural ink of
   this world — and the branch you are on lights amber. --border is a board
   value and would vanish on the bezel, so everything here is pinned. */
[data-skin="retro82"] #sidebar .sb-label {
  color: #8cbfb8;
}
[data-skin="retro82"] #sidebar .sb-rule {
  background: color-mix(in srgb, #8cbfb8 24%, transparent);
  opacity: 1;
}
[data-skin="retro82"] #sidebar .nav-item[data-depth]:not([data-depth="0"])::before,
[data-skin="retro82"] #sidebar .nav-item[data-depth]:not([data-depth="0"])::after {
  background: color-mix(in srgb, #8cbfb8 28%, transparent);
  opacity: 1;
}
[data-skin="retro82"] #sidebar .nav-item.active-branch[data-depth]:not([data-depth="0"])::before,
[data-skin="retro82"] #sidebar .nav-item.active-branch[data-depth]:not([data-depth="0"])::after {
  background: var(--rail-accent);
}
[data-skin="retro82"] #sidebar .nav-caret {
  color: #8cbfb8;
  border-radius: 4px;
}
[data-skin="retro82"] #sidebar .nav-caret:hover {
  color: #f6dcac;
  background: color-mix(in srgb, #f6dcac 12%, transparent);
}
[data-skin="retro82"] #sidebar .nav-item.active .nav-caret { color: #00172e; }

/* ════════════════ independently themed card bodies ════════════════ */
/* Each body pins its own tone. They restate the measured values rather than
   inheriting, so a dark note on a paper board stays readable. --border is the
   quiet internal rule; --frame-border owns the card edge. */
[data-skin="retro82"] :is(.card-note, .card-table, .card-checklist, .card-snippet,
  .card-embed, .card-credential, .card-music, .card-media, .card-terminal,
  .card-rss, .card-server) {
  --bg: #00172e; --surface: #07233c; --surface-2: #103452;
  --text: #f6dcac; --text-dim: #8cbfb8; --border: #24596e;
}
[data-skin="retro82"] :is(.card-note-light, .card-table-light, .card-snippet-light,
  .card-checklist-light, .card-embed-light, .card-credential-light,
  .card-music-light, .card-media-light, .card-terminal-light, .card-rss-light,
  .card-calendar-light, .card-server-light) {
  --bg: #f5e9c9; --surface: #fdf6e0; --surface-2: #e9d9b3;
  --text: #00172e; --text-dim: #2c5c5e; --border: #c9b287;
}

/* ════════════════ admin (admin.css loads after and hardcodes radii) ════════════════ */
[data-skin="retro82"] :is(.adm-head, .adm-actions) button { border-radius: var(--radius); }
[data-skin="retro82"] .adm-tabs button {
  border-radius: var(--radius) var(--radius) 0 0;
}
[data-skin="retro82"] .adm-table select { border-radius: var(--radius); }
[data-skin="retro82"] .adm-stat {
  border-radius: var(--radius);
  border-color: var(--frame-border);
  box-shadow: 0 1px 2px rgba(0, 8, 18, .10),
              0 8px 20px -12px rgba(0, 8, 18, .28);
}

/* ════════════════ motion ════════════════ */
/* Feedback-sized everywhere except the hairline energising on a card. */
[data-skin="retro82"] :is(button, .nav-item, .card-action, .count) {
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-skin="retro82"] .card,
  [data-skin="retro82"] .card-tile,
  [data-skin="retro82"] #sidebar #newEntryBtn {
    transition-duration: 1ms;
  }
  /* Nothing travels here either — the moment is a colour change on the
     hairline and the shadow, so reduced motion keeps the confirmation. */
}