/*!
 * Nocturne Design System - CSS bundle v0.1.0
 * Apache-2.0 - https://github.com/starside-io/nocturne
 * Generated by scripts/bundle.mjs, do not edit by hand.
 */
/**
 * Nocturne Design Tokens
 * Framework-agnostic CSS custom properties. Import this once at the root of any
 * app (or use nocturne-css which bundles it). Everything else references
 * these variables, never a raw hex value.
 *
 * Generated from tokens.json. Prefix: --noct-
 */

:root {
  /* ---- raw palette ---- */
  --noct-black: #07070b;
  --noct-ink-900: #05050a;
  --noct-ink-850: #0c0c14;
  --noct-ink-800: #10101a;
  --noct-ink-700: #21213244;
  --noct-ink-600: #2a2a3d;
  --noct-ink-500: #3d3d52;
  --noct-ink-400: #5a5a78;
  --noct-ink-300: #8a8aa0;
  --noct-ink-200: #c4c4d4;
  --noct-ink-100: #f4f4f8;

  --noct-yellow: #fcee0a;
  --noct-yellow-hot: #fff700;
  --noct-yellow-dim: #b8ad07;
  --noct-cyan: #00f0ff;
  --noct-cyan-dim: #00b3bf;
  --noct-magenta: #ff003c;
  --noct-magenta-dim: #b80029;
  --noct-pink: #ff2e88;
  --noct-violet: #7a3cff;
  --noct-green: #00ff9d;
  --noct-orange: #ff8a00;

  /* ---- semantic aliases (use these) ---- */
  --noct-bg: var(--noct-black);
  --noct-surface: var(--noct-ink-800);
  --noct-elevated: var(--noct-ink-600);
  --noct-overlay: var(--noct-ink-700);
  --noct-border: var(--noct-ink-500);
  --noct-border-strong: var(--noct-ink-400);

  --noct-text: var(--noct-ink-100);
  --noct-text-muted: var(--noct-ink-200);
  --noct-text-dim: var(--noct-ink-300);

  --noct-primary: var(--noct-yellow);
  --noct-primary-hot: var(--noct-yellow-hot);
  --noct-primary-dim: var(--noct-yellow-dim);
  --noct-info: var(--noct-cyan);
  --noct-danger: var(--noct-magenta);
  --noct-success: var(--noct-green);
  --noct-warning: var(--noct-yellow);
  --noct-accent-violet: var(--noct-violet);
  --noct-accent-pink: var(--noct-pink);
  --noct-accent-orange: var(--noct-orange);

  /* ---- glow rgb channels (for rgba() composition) ---- */
  --noct-primary-rgb: 252, 238, 10;
  --noct-info-rgb: 0, 240, 255;
  --noct-danger-rgb: 255, 0, 60;
  --noct-success-rgb: 0, 255, 157;
  --noct-violet-rgb: 122, 60, 255;

  /* ---- type ---- */
  --noct-font-sans: "Rajdhani", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --noct-font-display: "Rajdhani", ui-sans-serif, system-ui, sans-serif;
  --noct-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  --noct-weight-regular: 400;
  --noct-weight-semibold: 600;
  --noct-weight-bold: 700;

  --noct-text-xs: 0.7rem;
  --noct-text-sm: 0.8rem;
  --noct-text-base: 0.9rem;
  --noct-text-md: 1rem;
  --noct-text-lg: 1.15rem;
  --noct-text-xl: 1.35rem;
  --noct-text-2xl: 1.6rem;
  --noct-text-3xl: 2rem;
  --noct-text-4xl: 2.5rem;

  --noct-tracking-tight: -0.01em;
  --noct-tracking-normal: 0;
  --noct-tracking-wide: 0.05em;
  --noct-tracking-wider: 0.1em;
  --noct-tracking-widest: 0.2em;
  --noct-tracking-mono-cap: 0.18em;
  --noct-tracking-logo: 0.3em;

  --noct-leading-none: 1;
  --noct-leading-tight: 1.15;
  --noct-leading-snug: 1.35;
  --noct-leading-normal: 1.5;

  /* ---- space ---- */
  --noct-space-0: 0;
  --noct-space-1: 0.25rem;
  --noct-space-2: 0.5rem;
  --noct-space-3: 0.75rem;
  --noct-space-4: 1rem;
  --noct-space-5: 1.25rem;
  --noct-space-6: 1.5rem;
  --noct-space-8: 2rem;
  --noct-space-10: 2.5rem;
  --noct-space-12: 3rem;
  --noct-space-16: 4rem;

  /* ---- radius ---- */
  --noct-radius-none: 0;
  --noct-radius-xs: 2px;
  --noct-radius-sm: 3px;
  --noct-radius-md: 4px;
  --noct-radius-lg: 6px;

  /* ---- borders ---- */
  --noct-border-hairline: 1px;
  --noct-border-rail: 3px;
  --noct-border-notch: 2px;

  /* ---- shadows / glows ---- */
  --noct-glow-primary: 0 0 24px rgba(252, 238, 10, 0.45);
  --noct-glow-primary-soft: 0 0 24px rgba(252, 238, 10, 0.18);
  --noct-glow-info: 0 0 20px rgba(0, 240, 255, 0.45);
  --noct-glow-info-soft: 0 0 24px rgba(0, 240, 255, 0.18);
  --noct-glow-danger: 0 0 24px rgba(255, 0, 60, 0.18);
  --noct-glow-success: 0 0 24px rgba(0, 255, 157, 0.18);
  --noct-glow-violet: 0 0 24px rgba(122, 60, 255, 0.18);
  --noct-focus-ring: 0 0 0 1px var(--noct-primary), 0 0 18px rgba(252, 238, 10, 0.18);

  /* ---- motion ---- */
  --noct-duration-fast: 150ms;
  --noct-duration-base: 200ms;
  --noct-duration-slow: 300ms;
  --noct-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --noct-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---- z-index ---- */
  --noct-z-base: 0;
  --noct-z-raised: 10;
  --noct-z-sticky: 40;
  --noct-z-overlay: 50;
  --noct-z-modal: 60;
  --noct-z-toast: 80;

  /* ---- layout ---- */
  --noct-content-max: 1400px;

  /* ---- effects ---- */
  --noct-clip-corner: 12px;
  --noct-clip-corner-sm: 6px;
}

/* Respect reduced-motion at the token layer so every animated utility inherits it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --noct-duration-fast: 0ms;
    --noct-duration-base: 0ms;
    --noct-duration-slow: 0ms;
  }
}

/**
 * Nocturne CSS - base layer
 * Global element styling: root font, page background, selection, scrollbars.
 * Opt-in, apply the `noct` class to <html> or <body>, or import globally.
 */

.noct,
.noct * {
  box-sizing: border-box;
}

html.noct,
.noct-root {
  font-size: var(--noct-font-size-root, 17px);
}

.noct-root,
body.noct {
  background: var(--noct-bg);
  color: var(--noct-text);
  font-family: var(--noct-font-sans);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Ambient page wash: two faint neon pools + a vertical gradient. */
.noct-bg-wash {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--noct-primary-rgb), 0.04), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--noct-info-rgb), 0.03), transparent 70%),
    linear-gradient(180deg, var(--noct-black) 0%, var(--noct-ink-900) 100%);
  background-attachment: fixed;
}

.noct-root ::selection,
body.noct ::selection {
  background: var(--noct-primary);
  color: #000;
}

.noct-root ::-webkit-scrollbar,
body.noct ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.noct-root ::-webkit-scrollbar-track,
body.noct ::-webkit-scrollbar-track {
  background: var(--noct-ink-850);
}
.noct-root ::-webkit-scrollbar-thumb,
body.noct ::-webkit-scrollbar-thumb {
  background: var(--noct-ink-600);
}
.noct-root ::-webkit-scrollbar-thumb:hover,
body.noct ::-webkit-scrollbar-thumb:hover {
  background: var(--noct-primary-dim);
}

/* Consistent visible focus for keyboard users across all interactive elements. */
.noct :focus-visible {
  outline: 2px solid var(--noct-primary);
  outline-offset: 2px;
}

/**
 * Nocturne CSS - utilities layer
 * The signature texture and shape effects, plus a handful of type helpers.
 * These are the primitives that give the language its Night City feel.
 */

/* ---- typography helpers ---- */
.noct-display {
  font-family: var(--noct-font-display);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-tight);
  line-height: var(--noct-leading-none);
}

.noct-mono {
  font-family: var(--noct-font-mono);
}

.noct-label {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-muted);
}

.noct-tabular {
  font-variant-numeric: tabular-nums;
}

/* ---- clipped corners (the core shape motif) ---- */
.noct-clip-corner {
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner)) 0,
    100% var(--noct-clip-corner),
    100% 100%,
    var(--noct-clip-corner) 100%,
    0 calc(100% - var(--noct-clip-corner))
  );
}

.noct-clip-corner-sm {
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner-sm)) 0,
    100% var(--noct-clip-corner-sm),
    100% 100%,
    var(--noct-clip-corner-sm) 100%,
    0 calc(100% - var(--noct-clip-corner-sm))
  );
}

/* ---- textures ---- */
.noct-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.015) 2px,
    rgba(255, 255, 255, 0.015) 3px
  );
}

.noct-grid-lines {
  background-image:
    linear-gradient(rgba(var(--noct-primary-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--noct-primary-rgb), 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---- glitch text ---- */
.noct-text-glitch {
  text-shadow:
    1px 0 0 var(--noct-info),
    -1px 0 0 var(--noct-danger);
}

/* ---- live indicator dot (pulsing) ---- */
.noct-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--noct-primary);
  box-shadow: 0 0 8px var(--noct-primary);
}
.noct-dot--pulse {
  animation: noct-pulse 2s var(--noct-ease-standard) infinite;
}
.noct-dot--info { background: var(--noct-info); box-shadow: 0 0 8px var(--noct-info); }
.noct-dot--success { background: var(--noct-success); box-shadow: 0 0 8px var(--noct-success); }
.noct-dot--danger { background: var(--noct-danger); box-shadow: 0 0 8px var(--noct-danger); }

@keyframes noct-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .noct-dot--pulse { animation: none; }
}

/**
 * Button
 * Uppercase mono, clipped bottom-right/top-left corners, glow on hover.
 * <button class="noct-btn noct-btn--primary">Jack in</button>
 */

.noct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--noct-space-2);
  height: 2.25rem;
  padding: 0 var(--noct-space-4);
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: transparent;
  color: var(--noct-text);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
  cursor: pointer;
  transition: all var(--noct-duration-fast) var(--noct-ease-standard);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner-sm)) 0,
    100% var(--noct-clip-corner-sm),
    100% 100%,
    var(--noct-clip-corner-sm) 100%,
    0 calc(100% - var(--noct-clip-corner-sm))
  );
}

.noct-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- sizes ---- */
.noct-btn--sm { height: 1.75rem; padding: 0 var(--noct-space-3); font-size: var(--noct-text-xs); }
.noct-btn--md { height: 2.25rem; padding: 0 var(--noct-space-4); font-size: var(--noct-text-sm); }
.noct-btn--lg { height: 2.75rem; padding: 0 var(--noct-space-6); font-size: var(--noct-text-md); }

/* ---- variants ---- */
.noct-btn--primary {
  background: var(--noct-primary);
  color: #000;
  border-color: var(--noct-primary);
}
.noct-btn--primary:hover:not(:disabled) {
  background: var(--noct-primary-hot);
  box-shadow: var(--noct-glow-primary);
}

.noct-btn--secondary {
  background: transparent;
  color: var(--noct-text);
  border-color: var(--noct-border-strong);
}
.noct-btn--secondary:hover:not(:disabled) {
  border-color: var(--noct-primary);
  color: var(--noct-primary);
}

.noct-btn--ghost {
  background: transparent;
  color: var(--noct-text-muted);
  border-color: transparent;
}
.noct-btn--ghost:hover:not(:disabled) {
  color: var(--noct-primary);
  background: var(--noct-elevated);
}

.noct-btn--danger {
  background: var(--noct-danger);
  color: #fff;
  border-color: var(--noct-danger);
}
.noct-btn--danger:hover:not(:disabled) {
  background: var(--noct-magenta-dim);
}

.noct-btn--cyan {
  background: transparent;
  color: var(--noct-info);
  border-color: var(--noct-info);
}
.noct-btn--cyan:hover:not(:disabled) {
  background: var(--noct-info);
  color: #000;
  box-shadow: var(--noct-glow-info);
}

/**
 * Badge
 * Small uppercase mono tag with a toned border.
 * <span class="noct-badge noct-badge--cyan">online</span>
 */

.noct-badge {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 var(--noct-space-2);
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: var(--noct-elevated);
  color: var(--noct-text-muted);
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-mono-cap);
}

.noct-badge--yellow { color: var(--noct-primary); border-color: var(--noct-primary); }
.noct-badge--cyan { color: var(--noct-info); border-color: var(--noct-info); }
.noct-badge--magenta { color: var(--noct-danger); border-color: var(--noct-danger); }
.noct-badge--green { color: var(--noct-success); border-color: var(--noct-success); }
.noct-badge--violet { color: var(--noct-accent-violet); border-color: var(--noct-accent-violet); }
.noct-badge--orange { color: var(--noct-accent-orange); border-color: var(--noct-accent-orange); }
.noct-badge--dim { color: var(--noct-text-muted); border-color: var(--noct-border-strong); }

/**
 * Card
 * Surface with a left accent rail, clipped corners, optional header, glow on hover.
 * <div class="noct-card noct-card--cyan">
 *   <div class="noct-card__header"><h3 class="noct-card__title">Uplink</h3></div>
 *   <div class="noct-card__body">…</div>
 * </div>
 */

.noct-card {
  position: relative;
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
  transition: all var(--noct-duration-base) var(--noct-ease-standard);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner)) 0,
    100% var(--noct-clip-corner),
    100% 100%,
    var(--noct-clip-corner) 100%,
    0 calc(100% - var(--noct-clip-corner))
  );
}

.noct-card:hover {
  border-color: var(--noct-border-strong);
}

/* left accent rail */
.noct-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--noct-border-rail);
  background: var(--noct-primary);
}

.noct-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--noct-space-3) var(--noct-space-5);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-card__title {
  margin: 0;
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-muted);
}

.noct-card__body {
  padding: var(--noct-space-5);
}

/* ---- accent variants: rail colour + matching hover glow ---- */
.noct-card--yellow::before { background: var(--noct-primary); }
.noct-card--yellow:hover { box-shadow: var(--noct-glow-primary-soft); }

.noct-card--cyan::before { background: var(--noct-info); }
.noct-card--cyan:hover { box-shadow: var(--noct-glow-info-soft); }

.noct-card--magenta::before { background: var(--noct-danger); }
.noct-card--magenta:hover { box-shadow: var(--noct-glow-danger); }

.noct-card--violet::before { background: var(--noct-accent-violet); }
.noct-card--violet:hover { box-shadow: var(--noct-glow-violet); }

.noct-card--green::before { background: var(--noct-success); }
.noct-card--green:hover { box-shadow: var(--noct-glow-success); }

.noct-card--none::before { background: var(--noct-border-strong); }

/**
 * Alert
 * Bordered message with a left bar and a [TAG] prefix.
 * <div class="noct-alert noct-alert--warning">
 *   <div class="noct-alert__head"><span class="noct-alert__tag">[WARN]</span>
 *     <span class="noct-alert__title">Low signal</span></div>
 *   <div class="noct-alert__body">…</div>
 * </div>
 */

.noct-alert {
  position: relative;
  border: var(--noct-border-hairline) solid var(--noct-info);
  background: var(--noct-surface);
  padding: var(--noct-space-4);
  padding-left: var(--noct-space-5);
}

.noct-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--noct-border-rail);
  background: var(--noct-info);
}

.noct-alert__head {
  display: flex;
  align-items: center;
  gap: var(--noct-space-2);
  margin-bottom: var(--noct-space-1);
}

.noct-alert__tag {
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-info);
}

.noct-alert__title {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-semibold);
  color: var(--noct-text);
}

.noct-alert__body {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
}

/* ---- tones ---- */
.noct-alert--info { border-color: var(--noct-info); }
.noct-alert--info::before { background: var(--noct-info); }
.noct-alert--info .noct-alert__tag { color: var(--noct-info); }

.noct-alert--warning { border-color: var(--noct-warning); }
.noct-alert--warning::before { background: var(--noct-warning); }
.noct-alert--warning .noct-alert__tag { color: var(--noct-warning); }

.noct-alert--danger { border-color: var(--noct-danger); }
.noct-alert--danger::before { background: var(--noct-danger); }
.noct-alert--danger .noct-alert__tag { color: var(--noct-danger); }

.noct-alert--success { border-color: var(--noct-success); }
.noct-alert--success::before { background: var(--noct-success); }
.noct-alert--success .noct-alert__tag { color: var(--noct-success); }

/**
 * Form controls: field, label, input, textarea, select, checkbox.
 * Mono text, hairline borders, yellow focus ring with a soft glow.
 */

.noct-field {
  display: block;
}

.noct-field__label,
.noct-label-el {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-muted);
}

.noct-field__hint {
  margin-top: var(--noct-space-1);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-text-dim);
}

.noct-field__error {
  margin-top: var(--noct-space-1);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-danger);
}

/* ---- input & textarea ---- */
.noct-input,
.noct-textarea {
  width: 100%;
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
  color: var(--noct-text);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  outline: none;
  transition: border-color var(--noct-duration-fast) var(--noct-ease-standard),
    box-shadow var(--noct-duration-fast) var(--noct-ease-standard),
    background var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-input {
  height: 2.25rem;
  padding: 0 var(--noct-space-3);
}

.noct-textarea {
  padding: var(--noct-space-2) var(--noct-space-3);
  resize: vertical;
}

.noct-input::placeholder,
.noct-textarea::placeholder {
  color: var(--noct-text-dim);
}

.noct-input:hover,
.noct-textarea:hover {
  border-color: var(--noct-border-strong);
}

.noct-input:focus,
.noct-textarea:focus {
  border-color: var(--noct-primary);
  background: var(--noct-elevated);
  box-shadow: var(--noct-focus-ring);
}

.noct-input--invalid,
.noct-input[aria-invalid="true"] {
  border-color: var(--noct-danger);
}

/* ---- select ---- */
.noct-select {
  position: relative;
  display: block;
}

.noct-select__el {
  width: 100%;
  height: 2.25rem;
  padding: 0 2rem 0 var(--noct-space-3);
  appearance: none;
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
  color: var(--noct-text);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  outline: none;
  transition: border-color var(--noct-duration-fast) var(--noct-ease-standard),
    box-shadow var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-select__el:hover {
  border-color: var(--noct-border-strong);
}
.noct-select__el:focus {
  border-color: var(--noct-primary);
  box-shadow: 0 0 0 1px var(--noct-primary);
}

.noct-select__caret {
  position: absolute;
  right: var(--noct-space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--noct-primary);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
}

/* ---- checkbox ---- */
.noct-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--noct-space-2);
  cursor: pointer;
  user-select: none;
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
}
.noct-checkbox:hover {
  color: var(--noct-text);
}

.noct-checkbox__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: var(--noct-surface);
  transition: border-color var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-checkbox:hover .noct-checkbox__box {
  border-color: var(--noct-primary);
}

.noct-checkbox__input {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.noct-checkbox__tick {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--noct-primary);
  display: none;
}
.noct-checkbox__input:checked ~ .noct-checkbox__tick {
  display: block;
}
.noct-checkbox__input:focus-visible ~ .noct-checkbox__box {
  box-shadow: 0 0 0 2px var(--noct-primary);
}

/**
 * Panel
 * Section container with a glowing left rail, corner notches, a tinted wash,
 * and a big display heading with a §index tag.
 * <section class="noct-panel noct-panel--cyan">
 *   <div class="noct-panel__head">
 *     <span class="noct-panel__index">§01</span>
 *     <h2 class="noct-panel__title">Uplink <span class="noct-panel__accent">status</span></h2>
 *   </div>
 *   <div class="noct-panel__body">…</div>
 * </section>
 */

.noct-panel {
  position: relative;
  padding: var(--noct-space-5) var(--noct-space-3) var(--noct-space-5) var(--noct-space-6);
  background:
    linear-gradient(95deg, rgba(var(--noct-primary-rgb), 0.04) 0%, rgba(var(--noct-primary-rgb), 0.015) 25%, transparent 60%);
}

/* left rail */
.noct-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--noct-border-rail);
  background: var(--noct-primary);
  box-shadow: 2px 0 12px rgba(var(--noct-primary-rgb), 0.25);
}

/* top-left corner notch */
.noct-panel::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1rem;
  height: 1rem;
  border-left: var(--noct-border-notch) solid var(--noct-primary);
  border-top: var(--noct-border-notch) solid var(--noct-primary);
}

.noct-panel__head {
  display: flex;
  align-items: baseline;
  gap: var(--noct-space-3);
  margin-bottom: var(--noct-space-4);
}

.noct-panel__index {
  font-family: var(--noct-font-mono);
  font-size: 11px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-logo);
  color: var(--noct-primary);
}

.noct-panel__title {
  margin: 0;
  font-family: var(--noct-font-display);
  font-size: var(--noct-text-2xl);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  line-height: var(--noct-leading-none);
  letter-spacing: var(--noct-tracking-tight);
  color: var(--noct-text);
}

.noct-panel__accent {
  margin-left: var(--noct-space-2);
  color: var(--noct-primary);
}

.noct-panel__body {
  color: var(--noct-text);
}

/* ---- tones: rail colour, notch colour, wash, accent text ---- */
.noct-panel--cyan { background: linear-gradient(95deg, rgba(var(--noct-info-rgb), 0.04) 0%, rgba(var(--noct-info-rgb), 0.015) 25%, transparent 60%); }
.noct-panel--cyan::before { background: var(--noct-info); box-shadow: 2px 0 12px rgba(var(--noct-info-rgb), 0.25); }
.noct-panel--cyan::after { border-color: var(--noct-info); }
.noct-panel--cyan .noct-panel__index,
.noct-panel--cyan .noct-panel__accent { color: var(--noct-info); }

.noct-panel--magenta { background: linear-gradient(95deg, rgba(var(--noct-danger-rgb), 0.04) 0%, rgba(var(--noct-danger-rgb), 0.015) 25%, transparent 60%); }
.noct-panel--magenta::before { background: var(--noct-danger); box-shadow: 2px 0 12px rgba(var(--noct-danger-rgb), 0.25); }
.noct-panel--magenta::after { border-color: var(--noct-danger); }
.noct-panel--magenta .noct-panel__index,
.noct-panel--magenta .noct-panel__accent { color: var(--noct-danger); }

.noct-panel--green { background: linear-gradient(95deg, rgba(var(--noct-success-rgb), 0.04) 0%, rgba(var(--noct-success-rgb), 0.015) 25%, transparent 60%); }
.noct-panel--green::before { background: var(--noct-success); box-shadow: 2px 0 12px rgba(var(--noct-success-rgb), 0.2); }
.noct-panel--green::after { border-color: var(--noct-success); }
.noct-panel--green .noct-panel__index,
.noct-panel--green .noct-panel__accent { color: var(--noct-success); }

.noct-panel--violet { background: linear-gradient(95deg, rgba(var(--noct-violet-rgb), 0.05) 0%, rgba(var(--noct-violet-rgb), 0.015) 25%, transparent 60%); }
.noct-panel--violet::before { background: var(--noct-accent-violet); box-shadow: 2px 0 12px rgba(var(--noct-violet-rgb), 0.25); }
.noct-panel--violet::after { border-color: var(--noct-accent-violet); }
.noct-panel--violet .noct-panel__index,
.noct-panel--violet .noct-panel__accent { color: var(--noct-accent-violet); }

/**
 * Tabs
 * Underlined mono tab strip. Active tab gets a glowing yellow underline.
 * <div class="noct-tabs">
 *   <div class="noct-tabs__list" role="tablist">
 *     <button class="noct-tabs__tab noct-tabs__tab--active" role="tab">Overview</button>
 *     <button class="noct-tabs__tab" role="tab">Logs</button>
 *   </div>
 *   <div class="noct-tabs__panel" role="tabpanel">…</div>
 * </div>
 */

.noct-tabs__list {
  display: flex;
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-tabs__tab {
  position: relative;
  margin-bottom: -1px;
  padding: var(--noct-space-2) var(--noct-space-4);
  border: none;
  background: transparent;
  color: var(--noct-text-muted);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
  cursor: pointer;
  transition: color var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-tabs__tab:hover {
  color: var(--noct-text);
}

.noct-tabs__tab--active,
.noct-tabs__tab[aria-selected="true"] {
  color: var(--noct-primary);
}

.noct-tabs__tab--active::after,
.noct-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--noct-primary);
  box-shadow: 0 0 8px var(--noct-primary);
}

.noct-tabs__panel {
  padding-top: var(--noct-space-4);
}

/**
 * Progress
 * Thin track with a glowing fill. Set width inline or via --noct-progress.
 * <div class="noct-progress">
 *   <div class="noct-progress__row"><span>Sync</span><span>62%</span></div>
 *   <div class="noct-progress__track">
 *     <div class="noct-progress__fill" style="width:62%"></div>
 *   </div>
 * </div>
 */

.noct-progress__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--noct-space-1);
  font-family: var(--noct-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
  color: var(--noct-text-muted);
}

.noct-progress__track {
  height: 0.375rem;
  width: 100%;
  background: var(--noct-elevated);
  overflow: hidden;
}

.noct-progress__fill {
  height: 100%;
  background: var(--noct-primary);
  box-shadow: 0 0 12px rgba(var(--noct-primary-rgb), 0.5);
  transition: width var(--noct-duration-slow) var(--noct-ease-standard);
}

.noct-progress--cyan .noct-progress__fill { background: var(--noct-info); box-shadow: 0 0 12px rgba(var(--noct-info-rgb), 0.5); }
.noct-progress--magenta .noct-progress__fill { background: var(--noct-danger); box-shadow: 0 0 12px rgba(var(--noct-danger-rgb), 0.5); }
.noct-progress--green .noct-progress__fill { background: var(--noct-success); box-shadow: 0 0 12px rgba(var(--noct-success-rgb), 0.5); }

/**
 * Stat tile
 * Compact metric block: mono label, big display value, optional delta and icon.
 * <div class="noct-stat noct-stat--cyan">
 *   <div class="noct-stat__label">Uptime</div>
 *   <div class="noct-stat__value">99.9</div>
 *   <div class="noct-stat__delta">+0.2 vs last week</div>
 * </div>
 */

.noct-stat {
  position: relative;
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
  padding: var(--noct-space-4);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner-sm)) 0,
    100% var(--noct-clip-corner-sm),
    100% 100%,
    var(--noct-clip-corner-sm) 100%,
    0 calc(100% - var(--noct-clip-corner-sm))
  );
}

.noct-stat__icon {
  position: absolute;
  right: var(--noct-space-3);
  top: var(--noct-space-3);
  opacity: 0.4;
  color: var(--noct-primary);
}

.noct-stat__label {
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-muted);
}

.noct-stat__value {
  margin-top: var(--noct-space-2);
  font-family: var(--noct-font-display);
  font-size: var(--noct-text-4xl);
  font-weight: var(--noct-weight-bold);
  line-height: var(--noct-leading-none);
  font-variant-numeric: tabular-nums;
  color: var(--noct-primary);
}

.noct-stat__delta {
  margin-top: var(--noct-space-2);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-text-dim);
}

.noct-stat--cyan .noct-stat__value,
.noct-stat--cyan .noct-stat__icon { color: var(--noct-info); }
.noct-stat--magenta .noct-stat__value,
.noct-stat--magenta .noct-stat__icon { color: var(--noct-danger); }
.noct-stat--green .noct-stat__value,
.noct-stat--green .noct-stat__icon { color: var(--noct-success); }
.noct-stat--violet .noct-stat__value,
.noct-stat--violet .noct-stat__icon { color: var(--noct-accent-violet); }

/**
 * Divider
 * Plain hairline rule, or a labelled rule with centred mono text.
 * <hr class="noct-divider" />
 * <div class="noct-divider-labelled"><span>section</span></div>
 */

.noct-divider {
  margin: var(--noct-space-6) 0;
  border: 0;
  border-top: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-divider-labelled {
  display: flex;
  align-items: center;
  gap: var(--noct-space-3);
  margin: var(--noct-space-8) 0;
}

.noct-divider-labelled::before,
.noct-divider-labelled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--noct-border);
}

.noct-divider-labelled > span {
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-logo);
  color: var(--noct-text-muted);
}

/**
 * Disclosure
 * Native <details> styled with a rotating yellow caret.
 * <details class="noct-disclosure">
 *   <summary class="noct-disclosure__summary">
 *     <span class="noct-disclosure__caret">▶</span> Advanced
 *   </summary>
 *   <div class="noct-disclosure__body">…</div>
 * </details>
 */

.noct-disclosure {
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}
.noct-disclosure:last-child {
  border-bottom: 0;
}

.noct-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--noct-space-3);
  padding: var(--noct-space-3) var(--noct-space-4);
  list-style: none;
  cursor: pointer;
  transition: background var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-disclosure__summary::-webkit-details-marker {
  display: none;
}
.noct-disclosure__summary:hover,
.noct-disclosure__summary:focus-visible {
  background: var(--noct-elevated);
  outline: none;
}

.noct-disclosure__caret {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-primary);
  transition: transform var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-disclosure[open] .noct-disclosure__caret {
  transform: rotate(90deg);
}

.noct-disclosure__body {
  padding: var(--noct-space-3) var(--noct-space-4);
  border-top: var(--noct-border-hairline) solid var(--noct-border);
  background: rgba(7, 7, 11, 0.4);
}

/**
 * Task chip
 * Cyan-bordered notification block with a status pill.
 * <div class="noct-task">
 *   <div class="noct-task__meta">
 *     <span class="noct-task__kind">TASK</span>
 *     <span class="noct-task__id">t-4821</span>
 *     <span class="noct-task__status noct-task__status--running">running</span>
 *   </div>
 *   <div class="noct-task__desc">Rebuilding search index…</div>
 * </div>
 */

.noct-task {
  border: var(--noct-border-hairline) solid var(--noct-info);
  background: var(--noct-elevated);
  padding: var(--noct-space-3);
}

.noct-task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--noct-space-2);
  margin-bottom: 0.375rem;
  font-family: var(--noct-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-mono-cap);
}

.noct-task__kind {
  font-weight: var(--noct-weight-bold);
  color: var(--noct-info);
}

.noct-task__id {
  color: var(--noct-text);
}

.noct-task__status {
  padding: 1px 0.375rem;
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  font-size: 11px;
  font-weight: var(--noct-weight-bold);
  color: var(--noct-text-muted);
}
.noct-task__status--completed { color: var(--noct-success); border-color: var(--noct-success); }
.noct-task__status--failed { color: var(--noct-danger); border-color: var(--noct-danger); }
.noct-task__status--running { color: var(--noct-primary); border-color: var(--noct-primary); }
.noct-task__status--pending { color: var(--noct-accent-orange); border-color: var(--noct-accent-orange); }

.noct-task__desc {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  line-height: var(--noct-leading-snug);
  color: var(--noct-text);
}

/**
 * Section header
 * Display heading framed by bracket ornaments, an index tag, a pulsing dot,
 * and a notched separator rule.
 * <div class="noct-section-header">
 *   <div class="noct-section-header__row">
 *     <span class="noct-section-header__index">01</span>
 *     <span class="noct-dot noct-dot--pulse"></span>
 *     <h2 class="noct-section-header__title">
 *       <span class="noct-section-header__bracket">[</span>System
 *       <span class="noct-section-header__accent">core</span>
 *       <span class="noct-section-header__bracket">]</span>
 *     </h2>
 *   </div>
 *   <div class="noct-section-header__rule"><span>meta</span></div>
 * </div>
 */

.noct-section-header {
  margin-bottom: var(--noct-space-5);
}

.noct-section-header__row {
  display: flex;
  align-items: center;
  gap: var(--noct-space-3);
}

.noct-section-header__index {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 var(--noct-space-2);
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: var(--noct-elevated);
  font-family: var(--noct-font-mono);
  font-size: 11px;
  font-weight: var(--noct-weight-bold);
  letter-spacing: var(--noct-tracking-wider);
  font-variant-numeric: tabular-nums;
  color: var(--noct-primary);
}

.noct-section-header__title {
  display: flex;
  align-items: baseline;
  gap: var(--noct-space-2);
  margin: 0;
  font-family: var(--noct-font-display);
  font-size: var(--noct-text-2xl);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  line-height: var(--noct-leading-none);
  letter-spacing: var(--noct-tracking-tight);
  color: var(--noct-text);
}

.noct-section-header__bracket,
.noct-section-header__accent {
  color: var(--noct-primary);
}

.noct-section-header__rule {
  display: flex;
  align-items: center;
  gap: var(--noct-space-2);
  margin-top: var(--noct-space-2);
}
.noct-section-header__rule::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--noct-border);
}
.noct-section-header__rule::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--noct-primary);
}
.noct-section-header__rule > span {
  font-family: var(--noct-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-dim);
}

/* tone overrides */
.noct-section-header--cyan .noct-section-header__index,
.noct-section-header--cyan .noct-section-header__bracket,
.noct-section-header--cyan .noct-section-header__accent { color: var(--noct-info); }
.noct-section-header--cyan .noct-section-header__rule::after { background: var(--noct-info); }

.noct-section-header--magenta .noct-section-header__index,
.noct-section-header--magenta .noct-section-header__bracket,
.noct-section-header--magenta .noct-section-header__accent { color: var(--noct-danger); }
.noct-section-header--magenta .noct-section-header__rule::after { background: var(--noct-danger); }

.noct-section-header--green .noct-section-header__index,
.noct-section-header--green .noct-section-header__bracket,
.noct-section-header--green .noct-section-header__accent { color: var(--noct-success); }
.noct-section-header--green .noct-section-header__rule::after { background: var(--noct-success); }

.noct-section-header--violet .noct-section-header__index,
.noct-section-header--violet .noct-section-header__bracket,
.noct-section-header--violet .noct-section-header__accent { color: var(--noct-accent-violet); }
.noct-section-header--violet .noct-section-header__rule::after { background: var(--noct-accent-violet); }

/**
 * Top bar
 * Sticky translucent header with a logo mark and mono nav links.
 * <header class="noct-topbar">
 *   <div class="noct-topbar__inner">
 *     <a class="noct-topbar__brand"><span class="noct-dot"></span>Nocturne<span>OS</span></a>
 *     <nav class="noct-topbar__nav">…</nav>
 *   </div>
 * </header>
 */

.noct-topbar {
  position: sticky;
  top: 0;
  z-index: var(--noct-z-sticky);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
  background: rgba(7, 7, 11, 0.85);
  backdrop-filter: blur(12px);
}

.noct-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
  max-width: var(--noct-content-max);
  margin: 0 auto;
  padding: 0 var(--noct-space-8);
}

.noct-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--noct-space-2);
  font-family: var(--noct-font-display);
  font-size: var(--noct-text-lg);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-logo);
  color: var(--noct-text);
  text-decoration: none;
}
.noct-topbar__brand > span:last-child {
  color: var(--noct-primary);
}

.noct-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--noct-space-1);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
}

.noct-topbar__link {
  padding: 0.375rem var(--noct-space-3);
  color: var(--noct-text-muted);
  text-decoration: none;
  transition: color var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-topbar__link:hover,
.noct-topbar__link[aria-current="page"] {
  color: var(--noct-primary);
}

.noct-topbar__status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: var(--noct-space-3);
  padding-left: var(--noct-space-3);
  border-left: var(--noct-border-hairline) solid var(--noct-border);
  color: var(--noct-text-dim);
}

/**
 * Skeleton
 * Loading placeholder with a scanning shimmer.
 * <div class="noct-skeleton" style="height:1rem;width:60%"></div>
 */

.noct-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--noct-elevated);
  border: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--noct-primary-rgb), 0.08) 50%,
    transparent 100%
  );
  animation: noct-skeleton-sweep 1.4s var(--noct-ease-standard) infinite;
}

.noct-skeleton--text {
  height: 0.75rem;
}

@keyframes noct-skeleton-sweep {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .noct-skeleton::after { animation: none; }
}

/**
 * Radio
 * Circular radio control with a glowing yellow dot when selected.
 * <label class="noct-radio">
 *   <span class="noct-radio__ring">
 *     <input class="noct-radio__input" type="radio" name="district" />
 *     <span class="noct-radio__dot" aria-hidden="true"></span>
 *   </span>
 *   Watson
 * </label>
 * Group several inside <div class="noct-radio-group" role="radiogroup">.
 */

.noct-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--noct-space-2);
  cursor: pointer;
  user-select: none;
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
}
.noct-radio:hover {
  color: var(--noct-text);
}

.noct-radio__ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  border-radius: 50%;
  background: var(--noct-surface);
  transition: border-color var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-radio:hover .noct-radio__ring {
  border-color: var(--noct-primary);
}

.noct-radio__input {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.noct-radio__input:disabled {
  cursor: not-allowed;
}

.noct-radio__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--noct-primary);
  box-shadow: 0 0 8px var(--noct-primary);
  display: none;
}
.noct-radio__input:checked ~ .noct-radio__dot {
  display: block;
}
.noct-radio:has(.noct-radio__input:checked) .noct-radio__ring {
  border-color: var(--noct-primary);
}
.noct-radio:has(.noct-radio__input:focus-visible) .noct-radio__ring {
  box-shadow: var(--noct-focus-ring);
}

.noct-radio:has(.noct-radio__input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- group ---- */
.noct-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--noct-space-2);
}

.noct-radio-group--row {
  flex-direction: row;
  gap: var(--noct-space-4);
}

.noct-radio-group__label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-muted);
}

/**
 * Switch
 * Toggle built on a native checkbox with role="switch". The square thumb
 * slides right and lights up yellow when on.
 * <label class="noct-switch">
 *   <span class="noct-switch__track">
 *     <input class="noct-switch__input" type="checkbox" role="switch" />
 *     <span class="noct-switch__thumb" aria-hidden="true"></span>
 *   </span>
 *   Encrypt uplink
 * </label>
 */

.noct-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--noct-space-2);
  cursor: pointer;
  user-select: none;
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
}
.noct-switch:hover {
  color: var(--noct-text);
}

.noct-switch__track {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: var(--noct-surface);
  transition: border-color var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-switch:hover .noct-switch__track {
  border-color: var(--noct-primary);
}

.noct-switch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}
.noct-switch__input:disabled {
  cursor: not-allowed;
}

.noct-switch__thumb {
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--noct-ink-400);
  transform: translateY(-50%);
  transition: transform var(--noct-duration-base) var(--noct-ease-standard),
    background var(--noct-duration-base) var(--noct-ease-standard),
    box-shadow var(--noct-duration-base) var(--noct-ease-standard);
}

.noct-switch__input:checked ~ .noct-switch__thumb {
  transform: translate(0.875rem, -50%);
  background: var(--noct-primary);
  box-shadow: var(--noct-glow-primary);
}
.noct-switch:has(.noct-switch__input:checked) .noct-switch__track {
  border-color: var(--noct-primary);
}

.noct-switch:has(.noct-switch__input:focus-visible) .noct-switch__track {
  box-shadow: var(--noct-focus-ring);
}

.noct-switch:has(.noct-switch__input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

/**
 * Slider
 * Styled native range input: hairline track with a yellow filled portion
 * and a square glowing thumb. The fill is driven by --noct-slider-fill
 * (a percentage set inline by the consumer, e.g. style="--noct-slider-fill: 40%").
 * <div class="noct-slider">
 *   <div class="noct-slider__header">
 *     <span class="noct-slider__label">Volume</span>
 *     <span class="noct-slider__value">40</span>
 *   </div>
 *   <input class="noct-slider__input" type="range" style="--noct-slider-fill: 40%" />
 * </div>
 */

.noct-slider {
  display: block;
  width: 100%;
}

.noct-slider__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--noct-space-2);
  margin-bottom: 0.375rem;
}

.noct-slider__label {
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-muted);
}

.noct-slider__value {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-primary);
}

.noct-slider__input {
  --noct-slider-fill: 0%;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 1rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.noct-slider__input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- track ---- */
.noct-slider__input::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(
    to right,
    var(--noct-primary) var(--noct-slider-fill),
    var(--noct-border) var(--noct-slider-fill)
  );
}
.noct-slider__input::-moz-range-track {
  height: 2px;
  background: linear-gradient(
    to right,
    var(--noct-primary) var(--noct-slider-fill),
    var(--noct-border) var(--noct-slider-fill)
  );
}

/* ---- thumb ---- */
.noct-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: none;
  border-radius: var(--noct-radius-none);
  background: var(--noct-primary);
  transition: box-shadow var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: var(--noct-radius-none);
  background: var(--noct-primary);
  transition: box-shadow var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-slider__input:hover:not(:disabled)::-webkit-slider-thumb {
  box-shadow: var(--noct-glow-primary);
}
.noct-slider__input:hover:not(:disabled)::-moz-range-thumb {
  box-shadow: var(--noct-glow-primary);
}

.noct-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--noct-focus-ring);
}
.noct-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: var(--noct-focus-ring);
}

/**
 * Combobox
 * Searchable select: mono text input with a filtered dropdown listbox.
 * <div class="noct-combobox">
 *   <input class="noct-combobox__input" role="combobox" aria-expanded="true" />
 *   <ul class="noct-combobox__list" role="listbox">
 *     <li class="noct-combobox__option noct-combobox__option--active" role="option">Watson</li>
 *     <li class="noct-combobox__option" role="option">Westbrook</li>
 *   </ul>
 * </div>
 */

.noct-combobox {
  position: relative;
  display: block;
}

.noct-combobox__label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-muted);
}

.noct-combobox__input {
  width: 100%;
  height: 2.25rem;
  padding: 0 var(--noct-space-3);
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
  color: var(--noct-text);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  outline: none;
  transition: border-color var(--noct-duration-fast) var(--noct-ease-standard),
    box-shadow var(--noct-duration-fast) var(--noct-ease-standard),
    background var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-combobox__input::placeholder {
  color: var(--noct-text-dim);
}
.noct-combobox__input:hover {
  border-color: var(--noct-border-strong);
}
.noct-combobox__input:focus {
  border-color: var(--noct-primary);
  background: var(--noct-elevated);
  box-shadow: var(--noct-focus-ring);
}

.noct-combobox__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--noct-z-overlay);
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--noct-surface);
  border: var(--noct-border-hairline) solid var(--noct-border);
  animation: noct-combobox-in var(--noct-duration-fast) var(--noct-ease-out);
}

@keyframes noct-combobox-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--noct-space-1)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.noct-combobox__option {
  padding: var(--noct-space-2) var(--noct-space-3);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
  cursor: pointer;
  transition: background var(--noct-duration-fast) var(--noct-ease-standard),
    color var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-combobox__option:hover {
  background: var(--noct-elevated);
  color: var(--noct-text);
}

.noct-combobox__option--active {
  background: var(--noct-elevated);
  color: var(--noct-primary);
}

.noct-combobox__option[aria-selected="true"] {
  color: var(--noct-primary);
}

.noct-combobox__empty {
  padding: var(--noct-space-2) var(--noct-space-3);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-text-dim);
}

/**
 * Menu
 * Dropdown menu: mono uppercase trigger button and a surface panel of items.
 * <div class="noct-menu">
 *   <button class="noct-menu__trigger" aria-haspopup="menu" aria-expanded="true">
 *     Actions <span class="noct-menu__caret" aria-hidden="true">&#9662;</span>
 *   </button>
 *   <div class="noct-menu__list" role="menu">
 *     <button class="noct-menu__item" role="menuitem">Ping uplink
 *       <span class="noct-menu__hint">Ctrl+P</span></button>
 *     <button class="noct-menu__item noct-menu__item--danger" role="menuitem">Flatline</button>
 *   </div>
 * </div>
 */

.noct-menu {
  position: relative;
  display: inline-block;
}

.noct-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--noct-space-2);
  height: 2.25rem;
  padding: 0 var(--noct-space-4);
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: transparent;
  color: var(--noct-text);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
  cursor: pointer;
  transition: all var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-menu__trigger:hover {
  border-color: var(--noct-primary);
  color: var(--noct-primary);
}
.noct-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}
.noct-menu__trigger[aria-expanded="true"] {
  border-color: var(--noct-primary);
  color: var(--noct-primary);
}

.noct-menu__caret {
  font-size: var(--noct-text-xs);
  color: var(--noct-primary);
  transition: transform var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-menu__trigger[aria-expanded="true"] .noct-menu__caret {
  transform: rotate(180deg);
}

.noct-menu__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: var(--noct-z-overlay);
  min-width: 12rem;
  padding: var(--noct-space-1) 0;
  background: var(--noct-surface);
  border: var(--noct-border-hairline) solid var(--noct-border);
  animation: noct-menu-in var(--noct-duration-fast) var(--noct-ease-out);
}

.noct-menu__list--right {
  left: auto;
  right: 0;
}

@keyframes noct-menu-in {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--noct-space-1)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.noct-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--noct-space-4);
  width: 100%;
  padding: var(--noct-space-2) var(--noct-space-3);
  border: none;
  background: transparent;
  color: var(--noct-text-muted);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--noct-duration-fast) var(--noct-ease-standard),
    color var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-menu__item:hover,
.noct-menu__item--active {
  background: var(--noct-elevated);
  color: var(--noct-primary);
}

.noct-menu__hint {
  font-size: var(--noct-text-xs);
  color: var(--noct-text-dim);
}

.noct-menu__item--danger {
  color: var(--noct-danger);
}
.noct-menu__item--danger:hover,
.noct-menu__item--danger.noct-menu__item--active {
  background: var(--noct-elevated);
  color: var(--noct-danger);
}

.noct-menu__item--disabled,
.noct-menu__item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/**
 * Modal
 * Centered dialog on a dimmed scrim, clipped corners, mono uppercase header.
 * <div class="noct-modal">
 *   <div class="noct-modal__scrim"></div>
 *   <div class="noct-modal__panel" role="dialog" aria-modal="true">
 *     <div class="noct-modal__header"><span class="noct-modal__title">Uplink</span>
 *       <button class="noct-modal__close" aria-label="Close">&#10005;</button></div>
 *     <div class="noct-modal__body">…</div>
 *     <div class="noct-modal__footer">…</div>
 *   </div>
 * </div>
 */

.noct-modal {
  position: fixed;
  inset: 0;
  z-index: var(--noct-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.noct-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--noct-overlay);
}

.noct-modal__panel {
  position: relative;
  width: calc(100% - 2 * var(--noct-space-4));
  max-width: 32rem;
  background: var(--noct-surface);
  border: var(--noct-border-hairline) solid var(--noct-border);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner)) 0,
    100% var(--noct-clip-corner),
    100% 100%,
    var(--noct-clip-corner) 100%,
    0 calc(100% - var(--noct-clip-corner))
  );
  animation: noct-modal-in var(--noct-duration-base) var(--noct-ease-out);
}

.noct-modal__panel:focus {
  outline: none;
}

.noct-modal__panel:focus-visible {
  box-shadow: var(--noct-focus-ring);
}

@keyframes noct-modal-in {
  from {
    opacity: 0;
    transform: translateY(var(--noct-space-2));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.noct-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--noct-space-2);
  padding: var(--noct-space-3) var(--noct-space-4);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-modal__title {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-primary);
}

.noct-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: var(--noct-text-dim);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  cursor: pointer;
  transition: all var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-modal__close:hover {
  color: var(--noct-primary);
  background: var(--noct-elevated);
}

.noct-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

.noct-modal__body {
  padding: var(--noct-space-4);
  font-family: var(--noct-font-sans);
  font-size: var(--noct-text-base);
  line-height: var(--noct-leading-normal);
  color: var(--noct-text-muted);
}

.noct-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--noct-space-2);
  padding: var(--noct-space-3) var(--noct-space-4);
  border-top: var(--noct-border-hairline) solid var(--noct-border);
}

/* ---- tones ---- */
.noct-modal--danger .noct-modal__panel {
  border-color: var(--noct-danger);
}
.noct-modal--danger .noct-modal__header {
  border-bottom-color: var(--noct-danger);
}
.noct-modal--danger .noct-modal__title {
  color: var(--noct-danger);
}

/**
 * Drawer
 * Side sheet sliding in over a dimmed scrim. Mono uppercase header, scrolling body.
 * <div class="noct-drawer noct-drawer--right">
 *   <div class="noct-drawer__scrim"></div>
 *   <div class="noct-drawer__panel" role="dialog" aria-modal="true">
 *     <div class="noct-drawer__header"><span class="noct-drawer__title">Loadout</span>
 *       <button class="noct-drawer__close" aria-label="Close">&#10005;</button></div>
 *     <div class="noct-drawer__body">…</div>
 *     <div class="noct-drawer__footer">…</div>
 *   </div>
 * </div>
 */

.noct-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--noct-z-overlay);
}

.noct-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--noct-overlay);
}

.noct-drawer__panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 22rem;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  background: var(--noct-surface);
}

.noct-drawer__panel:focus {
  outline: none;
}

.noct-drawer__panel:focus-visible {
  box-shadow: var(--noct-focus-ring);
}

/* ---- sides ---- */
.noct-drawer--right .noct-drawer__panel {
  right: 0;
  border-left: var(--noct-border-hairline) solid var(--noct-border);
  animation: noct-drawer-in-right var(--noct-duration-slow) var(--noct-ease-out);
}

.noct-drawer--left .noct-drawer__panel {
  left: 0;
  border-right: var(--noct-border-hairline) solid var(--noct-border);
  animation: noct-drawer-in-left var(--noct-duration-slow) var(--noct-ease-out);
}

@keyframes noct-drawer-in-right {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes noct-drawer-in-left {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

.noct-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--noct-space-2);
  padding: var(--noct-space-3) var(--noct-space-4);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-drawer__title {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-primary);
}

.noct-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: var(--noct-text-dim);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  cursor: pointer;
  transition: all var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-drawer__close:hover {
  color: var(--noct-primary);
  background: var(--noct-elevated);
}

.noct-drawer__close:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

.noct-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--noct-space-4);
  font-family: var(--noct-font-sans);
  font-size: var(--noct-text-base);
  line-height: var(--noct-leading-normal);
  color: var(--noct-text-muted);
}

.noct-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--noct-space-2);
  padding: var(--noct-space-3) var(--noct-space-4);
  border-top: var(--noct-border-hairline) solid var(--noct-border);
}

/**
 * Toast
 * Compact status message with a tone rail and mono [TAG] prefix, plus a fixed stack.
 * <div class="noct-toast-stack noct-toast-stack--bottom-right">
 *   <div class="noct-toast noct-toast--success" role="status">
 *     <span class="noct-toast__tag">[OK]</span>
 *     <div class="noct-toast__content">
 *       <div class="noct-toast__title">Uplink stable</div>
 *       <div class="noct-toast__message">…</div>
 *     </div>
 *     <button class="noct-toast__dismiss" aria-label="Dismiss">&#10005;</button>
 *   </div>
 * </div>
 */

.noct-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--noct-space-2);
  min-width: 18rem;
  max-width: 24rem;
  padding: var(--noct-space-3);
  padding-left: var(--noct-space-4);
  background: var(--noct-surface);
  border: var(--noct-border-hairline) solid var(--noct-info);
  animation: noct-toast-in var(--noct-duration-base) var(--noct-ease-out);
}

.noct-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--noct-border-rail);
  background: var(--noct-info);
}

@keyframes noct-toast-in {
  from {
    opacity: 0;
    transform: translateX(var(--noct-space-4));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.noct-toast__tag {
  font-family: var(--noct-font-mono);
  font-size: 12px;
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-info);
}

.noct-toast__content {
  flex: 1;
  min-width: 0;
}

.noct-toast__title {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-semibold);
  color: var(--noct-text);
  margin-bottom: var(--noct-space-1);
}

.noct-toast__message {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
}

.noct-toast__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  color: var(--noct-text-dim);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  cursor: pointer;
  transition: color var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-toast__dismiss:hover {
  color: var(--noct-text);
}

.noct-toast__dismiss:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

/* ---- tones ---- */
.noct-toast--info { border-color: var(--noct-info); }
.noct-toast--info::before { background: var(--noct-info); }
.noct-toast--info .noct-toast__tag { color: var(--noct-info); }

.noct-toast--success { border-color: var(--noct-success); }
.noct-toast--success::before { background: var(--noct-success); }
.noct-toast--success .noct-toast__tag { color: var(--noct-success); }

.noct-toast--warning { border-color: var(--noct-warning); }
.noct-toast--warning::before { background: var(--noct-warning); }
.noct-toast--warning .noct-toast__tag { color: var(--noct-warning); }

.noct-toast--danger { border-color: var(--noct-danger); }
.noct-toast--danger::before { background: var(--noct-danger); }
.noct-toast--danger .noct-toast__tag { color: var(--noct-danger); }

/* ---- stack ---- */
.noct-toast-stack {
  position: fixed;
  z-index: var(--noct-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--noct-space-2);
}

.noct-toast-stack--bottom-right {
  right: var(--noct-space-4);
  bottom: var(--noct-space-4);
}

.noct-toast-stack--top-right {
  right: var(--noct-space-4);
  top: var(--noct-space-4);
}

/**
 * Tooltip
 * CSS-only mono bubble revealed on hover or focus-within, no JS positioning.
 * <span class="noct-tooltip">
 *   <button class="noct-btn">Scan</button>
 *   <span class="noct-tooltip__bubble noct-tooltip__bubble--top" role="tooltip">Ping the subnet</span>
 * </span>
 */

.noct-tooltip {
  position: relative;
  display: inline-flex;
}

.noct-tooltip__bubble {
  position: absolute;
  z-index: var(--noct-z-raised);
  padding: var(--noct-space-1) var(--noct-space-2);
  background: var(--noct-elevated);
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  letter-spacing: var(--noct-tracking-wide);
  color: var(--noct-text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--noct-duration-fast) var(--noct-ease-standard),
    visibility var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-tooltip:hover .noct-tooltip__bubble,
.noct-tooltip:has(:focus-visible) .noct-tooltip__bubble {
  opacity: 1;
  visibility: visible;
}

/* ---- sides ---- */
.noct-tooltip__bubble--top {
  bottom: calc(100% + var(--noct-space-2));
  left: 50%;
  transform: translateX(-50%);
}

.noct-tooltip__bubble--bottom {
  top: calc(100% + var(--noct-space-2));
  left: 50%;
  transform: translateX(-50%);
}

.noct-tooltip__bubble--left {
  right: calc(100% + var(--noct-space-2));
  top: 50%;
  transform: translateY(-50%);
}

.noct-tooltip__bubble--right {
  left: calc(100% + var(--noct-space-2));
  top: 50%;
  transform: translateY(-50%);
}

/**
 * Command palette
 * Ctrl+K launcher: centered clipped panel on a scrim, mono prompt input, listbox results.
 * <div class="noct-cmdk">
 *   <div class="noct-cmdk__scrim"></div>
 *   <div class="noct-cmdk__panel" role="dialog" aria-modal="true" aria-label="Command palette">
 *     <div class="noct-cmdk__input-row"><span class="noct-cmdk__prompt" aria-hidden="true">&gt;</span>
 *       <input class="noct-cmdk__input" role="combobox" placeholder="Type a command..." /></div>
 *     <div class="noct-cmdk__list" role="listbox">
 *       <div class="noct-cmdk__group">Netrun</div>
 *       <div class="noct-cmdk__item noct-cmdk__item--active" role="option" aria-selected="true">
 *         Jack in <span class="noct-cmdk__hint">Ctrl+J</span></div>
 *     </div>
 *   </div>
 * </div>
 */

.noct-cmdk {
  position: fixed;
  inset: 0;
  z-index: var(--noct-z-modal);
}

.noct-cmdk__scrim {
  position: absolute;
  inset: 0;
  background: var(--noct-overlay);
}

.noct-cmdk__panel {
  position: absolute;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(38rem, calc(100vw - 2rem));
  background: var(--noct-surface);
  border: var(--noct-border-hairline) solid var(--noct-border);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner)) 0,
    100% var(--noct-clip-corner),
    100% 100%,
    var(--noct-clip-corner) 100%,
    0 calc(100% - var(--noct-clip-corner))
  );
  animation: noct-cmdk-in var(--noct-duration-base) var(--noct-ease-out);
}

@keyframes noct-cmdk-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(-1 * var(--noct-space-2)));
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.noct-cmdk__input-row {
  display: flex;
  align-items: center;
  gap: var(--noct-space-2);
  padding: var(--noct-space-3) var(--noct-space-4);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-cmdk__prompt {
  color: var(--noct-primary);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-bold);
  user-select: none;
}

.noct-cmdk__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--noct-text);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  outline: none;
}
.noct-cmdk__input::placeholder {
  color: var(--noct-text-dim);
}

.noct-cmdk__list {
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--noct-space-2) 0;
}

.noct-cmdk__group {
  padding: var(--noct-space-2) var(--noct-space-4) var(--noct-space-1);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-dim);
}

.noct-cmdk__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--noct-space-3);
  padding: var(--noct-space-2) var(--noct-space-4);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
  cursor: pointer;
  transition: background var(--noct-duration-fast) var(--noct-ease-standard),
    color var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-cmdk__item:hover {
  color: var(--noct-text);
  background: var(--noct-elevated);
}

.noct-cmdk__item--active,
.noct-cmdk__item[aria-selected="true"] {
  color: var(--noct-primary);
  background: var(--noct-elevated);
}
.noct-cmdk__item--active::before,
.noct-cmdk__item[aria-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--noct-border-rail);
  background: var(--noct-primary);
  box-shadow: var(--noct-glow-primary-soft);
}

.noct-cmdk__hint {
  color: var(--noct-text-dim);
  font-size: var(--noct-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wide);
}

.noct-cmdk__empty {
  padding: var(--noct-space-4);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-dim);
  text-align: center;
}

/**
 * Table
 * Data table with mono uppercase headers, hairline rules, and sortable columns.
 * <table class="noct-table noct-table--striped">
 *   <thead><tr><th>Gig</th><th class="noct-table__cell--num">Payout</th></tr></thead>
 *   <tbody><tr><td>The Pickup</td><td class="noct-table__cell--num">12,000</td></tr></tbody>
 * </table>
 */

.noct-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
}

.noct-table th {
  padding: var(--noct-space-2) var(--noct-space-3);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border-strong);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  text-align: left;
  color: var(--noct-text-dim);
}

.noct-table td {
  padding: var(--noct-space-2) var(--noct-space-3);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-muted);
}

.noct-table tbody tr {
  transition: background var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-table tbody tr:hover {
  background: var(--noct-elevated);
}

/* ---- modifiers ---- */
.noct-table--striped tbody tr:nth-child(odd) {
  background: rgba(var(--noct-primary-rgb), 0.02);
}

.noct-table--striped tbody tr:hover {
  background: var(--noct-elevated);
}

.noct-table--sticky thead th {
  position: sticky;
  top: 0;
  background: var(--noct-surface);
  z-index: var(--noct-z-raised);
}

/* ---- numeric cells ---- */
.noct-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- sortable headers ---- */
.noct-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--noct-space-1);
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-table__sort:hover {
  color: var(--noct-primary);
}

.noct-table th[aria-sort] .noct-table__sort {
  color: var(--noct-primary);
}

.noct-table th[aria-sort="ascending"] .noct-table__sort::after {
  content: "▲";
  font-size: var(--noct-text-xs);
  color: var(--noct-primary);
}

.noct-table th[aria-sort="descending"] .noct-table__sort::after {
  content: "▼";
  font-size: var(--noct-text-xs);
  color: var(--noct-primary);
}

/**
 * Tag
 * Removable interactive chip with a toned hairline border and clipped corner.
 * <span class="noct-tag noct-tag--cyan">netrunner<button class="noct-tag__remove" aria-label="Remove">✕</button></span>
 */

.noct-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--noct-space-2);
  padding: var(--noct-space-1) var(--noct-space-2);
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: transparent;
  color: var(--noct-text-muted);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-mono-cap);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner-sm)) 0,
    100% var(--noct-clip-corner-sm),
    100% 100%,
    var(--noct-clip-corner-sm) 100%,
    0 calc(100% - var(--noct-clip-corner-sm))
  );
}

/* ---- tones ---- */
.noct-tag--primary { color: var(--noct-primary); border-color: var(--noct-primary); }
.noct-tag--cyan { color: var(--noct-info); border-color: var(--noct-info); }
.noct-tag--violet { color: var(--noct-accent-violet); border-color: var(--noct-accent-violet); }
.noct-tag--danger { color: var(--noct-danger); border-color: var(--noct-danger); }
.noct-tag--success { color: var(--noct-success); border-color: var(--noct-success); }

/* ---- remove button ---- */
.noct-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--noct-text-dim);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  line-height: var(--noct-leading-none);
  cursor: pointer;
  transition: all var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-tag__remove:hover {
  color: var(--noct-danger);
  text-shadow: 0 0 8px rgba(var(--noct-danger-rgb), 0.6);
}

.noct-tag__remove:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

/**
 * Avatar
 * Square identity block with a clipped corner. Shows an image or mono initials.
 * <span class="noct-avatar noct-avatar--md noct-avatar--cyan">VS</span>
 */

.noct-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: var(--noct-surface);
  color: var(--noct-text-muted);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wide);
  user-select: none;
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner-sm)) 0,
    100% var(--noct-clip-corner-sm),
    100% 100%,
    var(--noct-clip-corner-sm) 100%,
    0 calc(100% - var(--noct-clip-corner-sm))
  );
}

/* ---- sizes ---- */
.noct-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--noct-text-xs); }
.noct-avatar--md { width: 2.25rem; height: 2.25rem; font-size: var(--noct-text-sm); }
.noct-avatar--lg { width: 3rem; height: 3rem; font-size: var(--noct-text-md); }

/* ---- tones ---- */
.noct-avatar--primary { color: var(--noct-primary); border-color: var(--noct-primary); }
.noct-avatar--cyan { color: var(--noct-info); border-color: var(--noct-info); }
.noct-avatar--violet { color: var(--noct-accent-violet); border-color: var(--noct-accent-violet); }

/* ---- image ---- */
.noct-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * Code block
 * Terminal-flavored code display with a header bar, language tag, and copy button.
 * <div class="noct-code">
 *   <div class="noct-code__header">
 *     <span class="noct-code__title">daemon.ts</span>
 *     <span class="noct-code__lang">[TS]</span>
 *     <button class="noct-code__copy">Copy</button>
 *   </div>
 *   <div class="noct-code__body"><pre class="noct-code__pre">console.log("hi");</pre></div>
 * </div>
 */

.noct-code {
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
}

.noct-code__header {
  display: flex;
  align-items: center;
  gap: var(--noct-space-2);
  padding: var(--noct-space-2) var(--noct-space-3);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-code__title {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-mono-cap);
  color: var(--noct-text-dim);
}

.noct-code__lang {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-bold);
  letter-spacing: var(--noct-tracking-wider);
  color: var(--noct-primary);
}

.noct-code__copy {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 0 var(--noct-space-2);
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: transparent;
  color: var(--noct-text-dim);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
  cursor: pointer;
  transition: all var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-code__copy:hover {
  color: var(--noct-primary);
  border-color: var(--noct-primary);
}

.noct-code__copy:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

.noct-code__body {
  overflow-x: auto;
  padding: var(--noct-space-3);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.015) 2px,
    rgba(255, 255, 255, 0.015) 3px
  );
}

.noct-code__pre {
  margin: 0;
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  line-height: var(--noct-leading-snug);
  color: var(--noct-text-muted);
}

.noct-code__line {
  display: flex;
  gap: var(--noct-space-3);
  white-space: pre;
}

.noct-code__line-no {
  min-width: 2ch;
  text-align: right;
  user-select: none;
  color: var(--noct-text-dim);
  opacity: 0.6;
}

/**
 * Empty state
 * Centered placeholder block with a dashed border and faint grid backdrop.
 * <div class="noct-empty">
 *   <div class="noct-empty__icon">//</div>
 *   <div class="noct-empty__title">No gigs found</div>
 *   <div class="noct-empty__desc">Check back later.</div>
 * </div>
 */

.noct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--noct-space-4);
  padding: var(--noct-space-12);
  border: var(--noct-border-hairline) dashed var(--noct-border);
  text-align: center;
  background-image:
    linear-gradient(rgba(var(--noct-primary-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--noct-primary-rgb), 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

.noct-empty__icon {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-3xl);
  font-weight: var(--noct-weight-bold);
  line-height: var(--noct-leading-none);
  color: var(--noct-text-dim);
  opacity: 0.6;
}

.noct-empty__title {
  font-family: var(--noct-font-display);
  font-size: var(--noct-text-xl);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wide);
  line-height: var(--noct-leading-tight);
  color: var(--noct-text);
}

.noct-empty__desc {
  max-width: 36ch;
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  line-height: var(--noct-leading-normal);
  color: var(--noct-text-dim);
}

.noct-empty__action {
  display: flex;
  align-items: center;
  gap: var(--noct-space-2);
}

/**
 * Spinner
 * Indeterminate loader: a clipped square with one bright edge, rotating.
 * <span class="noct-spinner noct-spinner--md" role="status" aria-label="Loading"></span>
 */

.noct-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--noct-border);
  border-top-color: var(--noct-primary);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner-sm)) 0,
    100% var(--noct-clip-corner-sm),
    100% 100%,
    var(--noct-clip-corner-sm) 100%,
    0 calc(100% - var(--noct-clip-corner-sm))
  );
  /* Literal duration on purpose: duration tokens collapse to 0ms under
     reduced motion, which would spin this infinitely fast. */
  animation: noct-spin 0.8s linear infinite;
}

/* ---- sizes ---- */
.noct-spinner--sm { width: 0.875rem; height: 0.875rem; }
.noct-spinner--md { width: 1.25rem; height: 1.25rem; }
.noct-spinner--lg { width: 2rem; height: 2rem; }

/* ---- tones ---- */
.noct-spinner--primary { border-top-color: var(--noct-primary); }
.noct-spinner--cyan { border-top-color: var(--noct-info); }

@keyframes noct-spin {
  100% { transform: rotate(360deg); }
}

@keyframes noct-spinner-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .noct-spinner {
    animation: noct-spinner-pulse 2s ease-in-out infinite;
  }
}

/**
 * Breadcrumbs
 * Mono uppercase trail with dim separators; the current page glows primary.
 * <nav class="noct-breadcrumbs" aria-label="Breadcrumb">
 *   <ol class="noct-breadcrumbs__list">
 *     <li class="noct-breadcrumbs__item"><a class="noct-breadcrumbs__link" href="/">Home</a></li>
 *     <li class="noct-breadcrumbs__item"><span class="noct-breadcrumbs__sep" aria-hidden="true">//</span>
 *       <span class="noct-breadcrumbs__current" aria-current="page">Gigs</span></li>
 *   </ol>
 * </nav>
 */

.noct-breadcrumbs {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
}

.noct-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--noct-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.noct-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--noct-space-2);
}

.noct-breadcrumbs__link {
  color: var(--noct-text-dim);
  text-decoration: none;
  transition: color var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-breadcrumbs__link:hover {
  color: var(--noct-primary);
}
.noct-breadcrumbs__link:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

.noct-breadcrumbs__current,
.noct-breadcrumbs__item [aria-current="page"] {
  color: var(--noct-primary);
  font-weight: var(--noct-weight-semibold);
}

.noct-breadcrumbs__sep {
  color: var(--noct-text-dim);
  user-select: none;
}

/**
 * Accordion
 * Bordered stack of collapsible sections with a rotating yellow caret.
 * <div class="noct-accordion">
 *   <div class="noct-accordion__item noct-accordion__item--open">
 *     <button class="noct-accordion__trigger" aria-expanded="true">
 *       <span>Uplink</span><span class="noct-accordion__caret" aria-hidden="true">▸</span>
 *     </button>
 *     <div class="noct-accordion__panel" role="region">…</div>
 *   </div>
 * </div>
 */

.noct-accordion {
  border: var(--noct-border-hairline) solid var(--noct-border);
  background: var(--noct-surface);
}

.noct-accordion__item {
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}
.noct-accordion__item:last-child {
  border-bottom: 0;
}

.noct-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--noct-space-3);
  width: 100%;
  padding: var(--noct-space-3) var(--noct-space-4);
  border: none;
  background: transparent;
  color: var(--noct-text-muted);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
  text-align: left;
  cursor: pointer;
  transition: background var(--noct-duration-fast) var(--noct-ease-standard),
    color var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-accordion__trigger:hover {
  background: var(--noct-elevated);
  color: var(--noct-text);
}

.noct-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

.noct-accordion__trigger[aria-expanded="true"] {
  color: var(--noct-primary);
}

.noct-accordion__caret {
  color: var(--noct-primary);
  font-size: var(--noct-text-xs);
  transition: transform var(--noct-duration-fast) var(--noct-ease-standard);
}
.noct-accordion__trigger[aria-expanded="true"] .noct-accordion__caret,
.noct-accordion__item--open .noct-accordion__caret {
  transform: rotate(90deg);
}

.noct-accordion__panel {
  padding: var(--noct-space-3) var(--noct-space-4);
  border-top: var(--noct-border-hairline) solid var(--noct-border);
  background: rgba(7, 7, 11, 0.4);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  color: var(--noct-text-dim);
  line-height: var(--noct-leading-normal);
}

.noct-accordion__trigger[aria-expanded="false"] + .noct-accordion__panel {
  display: none;
}

/**
 * Stepper
 * Horizontal wizard progress: clipped square markers joined by hairline connectors.
 * <ol class="noct-stepper" aria-label="Progress">
 *   <li class="noct-stepper__step noct-stepper__step--done">
 *     <span class="noct-stepper__marker" aria-hidden="true">✓</span>
 *     <span class="noct-stepper__label">Brief</span>
 *     <span class="noct-stepper__connector noct-stepper__connector--done" aria-hidden="true"></span>
 *   </li>
 *   <li class="noct-stepper__step noct-stepper__step--active" aria-current="step">
 *     <span class="noct-stepper__marker" aria-hidden="true">2</span>
 *     <span class="noct-stepper__label">Infiltrate</span>
 *   </li>
 * </ol>
 */

.noct-stepper {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.noct-stepper__step {
  display: flex;
  align-items: center;
  gap: var(--noct-space-2);
  flex: 1;
}
.noct-stepper__step:last-child {
  flex: none;
}

.noct-stepper__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--noct-border-hairline) solid var(--noct-border-strong);
  background: transparent;
  color: var(--noct-text-dim);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-bold);
  transition: all var(--noct-duration-fast) var(--noct-ease-standard);
  clip-path: polygon(
    0 0,
    calc(100% - var(--noct-clip-corner-sm)) 0,
    100% var(--noct-clip-corner-sm),
    100% 100%,
    var(--noct-clip-corner-sm) 100%,
    0 calc(100% - var(--noct-clip-corner-sm))
  );
}

.noct-stepper__text {
  display: flex;
  flex-direction: column;
}

.noct-stepper__label {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-wider);
  color: var(--noct-text-dim);
  white-space: nowrap;
  transition: color var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-stepper__hint {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  letter-spacing: var(--noct-tracking-wide);
  color: var(--noct-text-dim);
  white-space: nowrap;
}

.noct-stepper__connector {
  flex: 1;
  min-width: var(--noct-space-4);
  height: var(--noct-border-hairline);
  margin: 0 var(--noct-space-2);
  background: var(--noct-border);
}
.noct-stepper__connector--done {
  background: var(--noct-success);
}

/* ---- states ---- */
.noct-stepper__step--done .noct-stepper__marker {
  border-color: var(--noct-success);
  background: var(--noct-success);
  color: #000;
}
.noct-stepper__step--done .noct-stepper__label {
  color: var(--noct-text-muted);
}

.noct-stepper__step--active .noct-stepper__marker,
.noct-stepper__step[aria-current="step"] .noct-stepper__marker {
  border-color: var(--noct-primary);
  background: var(--noct-primary);
  color: #000;
  box-shadow: var(--noct-glow-primary);
}
.noct-stepper__step--active .noct-stepper__label,
.noct-stepper__step[aria-current="step"] .noct-stepper__label {
  color: var(--noct-primary);
}

/**
 * Sidebar
 * Vertical nav rail: surface column, mono section labels, glowing rail on the active item.
 * <aside class="noct-sidebar">
 *   <div class="noct-sidebar__header">…brand…</div>
 *   <nav class="noct-sidebar__nav" aria-label="Sidebar">
 *     <div class="noct-sidebar__section">
 *       <div class="noct-sidebar__section-label">Operations</div>
 *       <a class="noct-sidebar__item noct-sidebar__item--active" aria-current="page" href="#">Gigs</a>
 *       <a class="noct-sidebar__item" href="#">Contracts <span class="noct-sidebar__badge">3</span></a>
 *     </div>
 *   </nav>
 *   <div class="noct-sidebar__footer">…</div>
 * </aside>
 */

.noct-sidebar {
  display: flex;
  flex-direction: column;
  width: 15rem;
  height: 100%;
  background: var(--noct-surface);
  border-right: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-sidebar__header {
  padding: var(--noct-space-3) var(--noct-space-4);
  border-bottom: var(--noct-border-hairline) solid var(--noct-border);
}

.noct-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--noct-space-2);
}

.noct-sidebar__section {
  margin-bottom: var(--noct-space-3);
}
.noct-sidebar__section:last-child {
  margin-bottom: 0;
}

.noct-sidebar__section-label {
  padding: var(--noct-space-2) var(--noct-space-3) var(--noct-space-1);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  font-weight: var(--noct-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--noct-tracking-widest);
  color: var(--noct-text-dim);
}

.noct-sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--noct-space-2);
  width: 100%;
  padding: var(--noct-space-2) var(--noct-space-3);
  border: none;
  background: transparent;
  color: var(--noct-text-muted);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-sm);
  letter-spacing: var(--noct-tracking-wide);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--noct-duration-fast) var(--noct-ease-standard),
    color var(--noct-duration-fast) var(--noct-ease-standard);
}

.noct-sidebar__item:hover {
  color: var(--noct-text);
  background: var(--noct-elevated);
}

.noct-sidebar__item:focus-visible {
  outline: none;
  box-shadow: var(--noct-focus-ring);
}

.noct-sidebar__item--active,
.noct-sidebar__item[aria-current="page"] {
  color: var(--noct-primary);
  background: var(--noct-elevated);
}
.noct-sidebar__item--active::before,
.noct-sidebar__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--noct-border-rail);
  background: var(--noct-primary);
  box-shadow: var(--noct-glow-primary-soft);
}

.noct-sidebar__badge {
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-text-dim);
}

.noct-sidebar__footer {
  padding: var(--noct-space-3) var(--noct-space-4);
  border-top: var(--noct-border-hairline) solid var(--noct-border);
  font-family: var(--noct-font-mono);
  font-size: var(--noct-text-xs);
  color: var(--noct-text-dim);
}