/* ===========================================================================
   CONSOLE LITE SKIN
   The console theme with the costume taken off. Same dark editor feel and the
   same motion, but a proper text face, a wider column, tighter vertical
   spacing, and the catalogue back in three columns.

   No shell prompt, no slashes before headings, no comment brackets around
   panel titles, no tab bar. Monospace is kept for what it is for: numbers,
   prices, references, labels and code.
   (Never write a comment opener inside a CSS comment: it does not nest, the
   comment ends at the first closer and the next rule block is eaten.)

   Selected in /admin/branding, previewed with ?skin=console-lite. Loaded
   after site.css and overrides it.
   =========================================================================== */

[data-skin='console-lite'] {
  --sans: 'IBM Plex Sans Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --r: 2px;
  /* wider page, wider reading column, less air between sections */
  --wrap: 1200px;
  --gap: clamp(2.5rem, 4.5vw, 3.75rem);
  --measure: 42em;
  --glow-gold: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
               0 6px 24px -14px color-mix(in srgb, var(--accent) 80%, transparent);
}

[data-skin='console-lite'] .wrap--narrow { max-width: 920px; }
[data-skin='console-lite'] body { line-height: 1.62; }
[data-skin='console-lite'] ::selection { background: color-mix(in srgb, var(--cyan) 32%, transparent); color: var(--fg); }

/* -- type ------------------------------------------------------------------ */
[data-skin='console-lite'] h1,
[data-skin='console-lite'] h2,
[data-skin='console-lite'] h3 { letter-spacing: -0.03em; font-weight: 700; }
[data-skin='console-lite'] h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1.1; }
[data-skin='console-lite'] h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
[data-skin='console-lite'] .lede { font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.62; }

/* mono earns its place on data, not on prose */
[data-skin='console-lite'] .figures b,
[data-skin='console-lite'] .card__p,
[data-skin='console-lite'] .spec__price b,
[data-skin='console-lite'] .spec__rows dd,
[data-skin='console-lite'] .facts b,
[data-skin='console-lite'] .card__ref,
[data-skin='console-lite'] .views { font-family: var(--mono); }
[data-skin='console-lite'] .tag,
[data-skin='console-lite'] .figures span,
[data-skin='console-lite'] .foot h2,
[data-skin='console-lite'] .spec__rows dt,
[data-skin='console-lite'] .field label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
}

/* -- section rules, a gold bar and nothing else ---------------------------- */
[data-skin='console-lite'] .rule h2::after { display: none; }
[data-skin='console-lite'] .rule h2::before {
  content: '';
  position: absolute;
  left: -0.9rem;
  top: 0.12em;
  bottom: 0.22em;
  width: 3px;
  height: auto;
  background: var(--accent-bg);
  transform: none;
}
[data-skin='console-lite'] .rule h2 { padding-bottom: 0; padding-left: 0; margin-left: 0.9rem; }
[data-skin='console-lite'] .rule { margin-bottom: 1.5rem; }

/* -- header ---------------------------------------------------------------- */
[data-skin='console-lite'] .top { background: var(--panel); border-bottom: 1px solid var(--line-2); }
[data-skin='console-lite'] .brand { font-size: 1.28rem; }
[data-skin='console-lite'] .top nav a { padding-block: 0.4rem; }
[data-skin='console-lite'] .top nav a:hover { color: var(--fg); }

/* -- hero, one small nod to the console ------------------------------------ */
[data-skin='console-lite'] .page-home .intro h1::after {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.82em;
  margin-left: 0.14em;
  background: var(--accent-bg);
  vertical-align: baseline;
  animation: lite-caret 1.1s steps(1) infinite;
}

/* -- readout --------------------------------------------------------------- */
[data-skin='console-lite'] .figures { background: var(--panel); border: 1px solid var(--line-2); border-top: 2px solid var(--accent-bg); border-radius: 0; }
[data-skin='console-lite'] .figures b { font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -0.04em; }

/* -- buttons --------------------------------------------------------------- */
[data-skin='console-lite'] .btn { border-radius: 2px; }
[data-skin='console-lite'] .btn--gold:hover { box-shadow: var(--glow-gold); }
[data-skin='console-lite'] .btn:not(.btn--gold):hover { background: color-mix(in srgb, var(--cyan) 8%, var(--panel)); border-color: var(--cyan); color: var(--fg); }

/* -- tags, no fills -------------------------------------------------------- */
[data-skin='console-lite'] .tags { gap: 0.3rem; }
[data-skin='console-lite'] .tag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--tag, var(--fg-3)) 34%, transparent);
  background: color-mix(in srgb, var(--tag, var(--fg-3)) 16%, var(--bg));
  color: color-mix(in srgb, var(--tag, var(--fg-3)) 80%, var(--fg));
}
[data-skin='console-lite'] .pillbar a { border-radius: 2px; }

/* -- the catalogue keeps its two to a row, drawn a little tighter ---------- */
[data-skin='console-lite'] .sysrows,
[data-skin='console-lite'] .sysrow { gap: 1rem; }
[data-skin='console-lite'] .card { border-radius: 2px; transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s; }
[data-skin='console-lite'] .card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--accent) 90%, transparent);
}
/* impeccable-disable-next-line codex-grid-background -- blueprint grid inside a missing-screenshot tile */
[data-skin='console-lite'] .card__ref {
  background-image:
    linear-gradient(color-mix(in srgb, var(--line-2) 80%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line-2) 80%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--fg-2);
}

/* -- panels ---------------------------------------------------------------- */
[data-skin='console-lite'] .box { border-radius: 2px; }
[data-skin='console-lite'] .box--gold::before,
[data-skin='console-lite'] .box--gold::after,
[data-skin='console-lite'] .box--kado::before,
[data-skin='console-lite'] .box--kado::after { display: none; }
[data-skin='console-lite'] .box--gold { border-top: 2px solid var(--accent-bg); border-radius: 0; }
[data-skin='console-lite'] .spec { border-radius: 0; }

[data-skin='console-lite'] .ticks { counter-reset: step; }
[data-skin='console-lite'] .ticks li { counter-increment: step; }
[data-skin='console-lite'] .ticks li::before {
  content: '0' counter(step);
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--accent);
  margin-top: 0.24rem;
}

/* -- questions and people -------------------------------------------------- */
[data-skin='console-lite'] .faq details { border-radius: 2px; }
[data-skin='console-lite'] .faq details[open] { border-color: var(--line-2); }
[data-skin='console-lite'] .rec { border-radius: 2px; transition: transform 0.18s var(--ease), border-color 0.18s; }
[data-skin='console-lite'] .rec:hover { transform: translateX(3px); }

/* -- long form, the whole point of the wider column ------------------------ */
/* the long form pages are the ones he wanted wider, so they get more than the
   shared measure rather than the whole site running at 90 characters */
[data-skin='console-lite'] .prose { font-size: 1.02rem; line-height: 1.72; max-width: 46em; }
[data-skin='console-lite'] .prose--wide { max-width: none; }
[data-skin='console-lite'] .legal p,
[data-skin='console-lite'] .legal li { font-size: 1rem; line-height: 1.7; max-width: none; }

/* -- footer ---------------------------------------------------------------- */
[data-skin='console-lite'] .foot { background: var(--panel); border-top: 1px solid var(--line-2); }

/* -- motion ---------------------------------------------------------------- */
@keyframes lite-caret { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes lite-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes lite-rise { from { transform: translateY(14px); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-skin='console-lite'] main > section {
      animation: lite-rise 0.45s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    [data-skin='console-lite'] .page-home .intro { animation: none; }
  }
}