/* Backline · Night Shift
   The diner after close: a neon sign in the window and arcade charts glowing
   in the dark. Dark-first and the most animated of the three. Yellowtail for
   the sign, Barlow and Barlow Condensed, Martian Mono for the scoreboard. */

:root[data-style="night"] {
  color-scheme: dark;

  --f-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --f-sign: 'Yellowtail', 'Brush Script MT', cursive;
  --f-logo: var(--f-sign);
  --display-weight: 800;
  --display-case: uppercase;
  --display-tracking: .005em;
  --h2-weight: 700;
  --h2-case: uppercase;
  --h2-tracking: .14em;

  --bg: oklch(0.15 0.028 272);
  --bg-2: oklch(0.175 0.032 272);
  --surface: oklch(0.215 0.036 272);
  --surface-2: oklch(0.26 0.042 272);
  --line: oklch(0.34 0.045 272);
  --line-2: oklch(0.28 0.04 272);
  --text: oklch(0.96 0.008 272);
  --text-2: oklch(0.8 0.028 272);
  --text-3: oklch(0.69 0.035 272);
  --link: oklch(0.88 0.11 200);

  --neon: oklch(0.72 0.25 356);
  --neon-hot: oklch(0.9 0.1 356);
  --cyan: oklch(0.87 0.14 200);

  --accent: var(--neon);
  --accent-ink: oklch(0.14 0.03 356);
  --accent-text: var(--neon-hot);
  --accent-tint: oklch(0.72 0.25 356 / .12);
  --accent-tint-strong: oklch(0.72 0.25 356 / .26);
  --accent-line: oklch(0.72 0.25 356 / .6);

  --good: oklch(0.85 0.2 150);
  --good-tint: oklch(0.85 0.2 150 / .1);
  --good-line: oklch(0.85 0.2 150 / .42);
  --warn: oklch(0.87 0.14 82);
  --warn-tint: oklch(0.87 0.14 82 / .1);
  --warn-line: oklch(0.87 0.14 82 / .42);
  --bad: oklch(0.74 0.19 28);
  --bad-tint: oklch(0.74 0.19 28 / .12);
  --bad-line: oklch(0.74 0.19 28 / .5);

  --focus: var(--cyan);
  --focus-ring: oklch(0.87 0.14 200 / .3);

  --shadow-1: 0 1px 2px oklch(0.06 0.02 272 / .5);
  --shadow-2: 0 50px 90px -40px oklch(0.04 0.02 272), 0 0 70px -24px oklch(0.72 0.25 356 / .5);
  --shadow-pop: 0 24px 60px -16px oklch(0.04 0.02 272 / .95), 0 0 0 1px oklch(0.4 0.05 272);

  --panel-bg: linear-gradient(180deg, oklch(0.215 0.036 272), oklch(0.195 0.033 272));
  --panel-line: var(--line);
  --panel-shadow: none;
  --panel-r: 16px;

  --input-bg: oklch(0.13 0.026 272);
  --input-line: oklch(0.4 0.05 272);
  --input-hover-line: oklch(0.55 0.06 272);
  --btn-r: 12px;
  --btn-r-sm: 10px;
  --btn-bg: transparent;
  --btn-line: oklch(0.42 0.05 272);
  --btn-ink: var(--text);
  --btn-shadow: none;
  --btn-hover-bg: oklch(0.26 0.042 272);
  --btn-hover-line: oklch(0.56 0.06 272);
  --btn-primary-bg: oklch(0.72 0.25 356 / .08);
  --btn-primary-ink: var(--neon-hot);
  --btn-primary-line: var(--neon);
  --btn-primary-shadow: 0 0 14px oklch(0.72 0.25 356 / .45), inset 0 0 12px oklch(0.72 0.25 356 / .25);
  --btn-primary-hover: oklch(0.72 0.25 356 / .16);
  --btn-primary-hover-shadow: 0 0 22px oklch(0.72 0.25 356 / .7), inset 0 0 16px oklch(0.72 0.25 356 / .35);

  --pop-bg: oklch(0.2 0.034 272);
  --avatar-bg: var(--surface-2);
  --avatar-ink: var(--text);
  --store-no-bg: oklch(0.87 0.14 200 / .12);
  --store-no-ink: var(--cyan);
  --side-bg: var(--bg-2);
  --side-line: oklch(0.27 0.04 272);
  --nav-hover: oklch(0.22 0.036 272);
  --nav-on-bg: var(--surface-2);
  --nav-on-shadow: inset 0 0 0 1px oklch(0.44 0.06 272);
  --bar-bg: color-mix(in oklab, var(--bg) 84%, transparent);
  --row-hover: oklch(0.235 0.038 272);
  --drop-line: oklch(0.45 0.06 272);
  --hero-em: var(--neon-hot);

  --chart-grid: oklch(0.3 0.04 272);
  --chart-zero: oklch(0.55 0.05 272);
  --chart-axis: var(--text-3);
  --chart-x: var(--text-3);
  --chart-val: var(--text);
  --chart-prior: oklch(0.76 0.03 272);
  --chart-sales: var(--cyan);
  --chart-net: oklch(0.82 0.2 150);
  --chart-margin: oklch(0.86 0.15 85);
  --chart-labor: oklch(0.74 0.17 305);
  --chart-up: oklch(0.8 0.2 150);
  --chart-down: oklch(0.68 0.2 28);
  --chart-up-ink: oklch(0.92 0.13 150);
  --chart-down-ink: oklch(0.86 0.12 28);
  --chart-spark: var(--cyan);
  --s-now: var(--neon);

  scrollbar-color: oklch(0.4 0.05 272) transparent;
}

/* ---------- neon ---------- */

[data-style="night"] .logo {
  font: 400 30px/1 var(--f-sign); letter-spacing: 0; color: var(--neon-hot);
  text-shadow: 0 0 2px oklch(0.98 0.02 356), 0 0 9px var(--neon), 0 0 22px var(--neon), 0 0 48px oklch(0.72 0.25 356 / .6);
}
[data-style="night"] .logo:hover { color: var(--neon-hot); }
[data-style="night"] .logo-mark { display: none; }
[data-style="night"] .logo-word { padding: 0 3px 3px; }

[data-style="night"] .hero-sign {
  display: block; margin: 0 0 0 -6px; white-space: nowrap;
  font: 400 clamp(76px, 3.4rem + 7vw, 156px)/1 var(--f-sign); color: var(--neon-hot);
  text-shadow: 0 0 2px oklch(0.98 0.02 356), 0 0 9px var(--neon), 0 0 22px var(--neon), 0 0 48px oklch(0.72 0.25 356 / .7), 0 0 100px oklch(0.72 0.25 356 / .4);
}
[data-style="night"] .hero-tube { display: block; width: min(430px, 88%); height: 24px; margin: -2px 0 0 36px; overflow: visible; }
[data-style="night"] .hero-tube path {
  fill: none; stroke: oklch(0.95 0.05 200); stroke-width: 3.2; stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 12px oklch(0.87 0.14 200 / .8));
}
[data-style="night"] .hero-title em, [data-style="night"] .hero-title em * {
  color: var(--neon-hot); text-shadow: 0 0 10px oklch(0.72 0.25 356 / .8), 0 0 30px oklch(0.72 0.25 356 / .45);
}

/* the steps light up as tubes; a step that needs someone flickers */
[data-style="night"] .steps-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-style="night"] .steps-card .step-link { grid-template-columns: 92px minmax(0, 1fr) auto; grid-template-areas: "name bar status"; gap: 14px; }
[data-style="night"] .steps-card .step-mark { display: none; }
[data-style="night"] .steps-card .step-name { font: 700 16px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
[data-style="night"] .step-bar { background: oklch(0.3 0.04 272); overflow: visible; }
[data-style="night"] .steps-card .step-bar { height: 10px; border-radius: 6px; }
[data-style="night"] .step-bar i { border-radius: inherit; box-shadow: 0 0 10px var(--c), 0 0 24px var(--g, transparent); }
[data-style="night"] .step.is-done { --c: var(--good); --g: oklch(0.85 0.2 150 / .5); }
[data-style="night"] .step.is-need { --c: var(--neon); --g: oklch(0.72 0.25 356 / .55); --f: .55; }
[data-style="night"] .steps-card .step.is-need .step-bar i { animation: n-flick 3.2s steps(1) infinite; }
[data-style="night"] .steps-card .step-status {
  min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
  font: 500 12px/1.2 var(--f-mono); color: var(--text-2);
}
[data-style="night"] .steps-card .step.is-need .step-status { color: var(--neon-hot); }
[data-style="night"] .steps-card .step.is-done .step-status { color: oklch(0.9 0.12 150); }
@keyframes n-flick { 0%, 46%, 49%, 53%, 100% { opacity: 1; } 47% { opacity: .35; } 51% { opacity: .5; } }
@media (max-width: 560px) {
  [data-style="night"] .steps-card .step-link { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "name bar" "status status"; row-gap: 6px; }
  [data-style="night"] .steps-card .step-status { text-align: left; max-width: none; white-space: normal; }
}
[data-style="night"] .steps-h .step-bar { height: 8px; }
[data-style="night"] .steps-h .step-name { font: 700 15px/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
[data-style="night"] .steps-h .step.is-current .step-name { color: var(--neon-hot); text-shadow: 0 0 10px oklch(0.72 0.25 356 / .7); }
[data-style="night"] .steps-h .step.is-current .step-bar { box-shadow: 0 0 0 2px oklch(0.72 0.25 356 / .35); }

/* marks glow in their own colour */
[data-style="night"] .ic-ok { filter: drop-shadow(0 0 5px oklch(0.85 0.2 150 / .6)); }
[data-style="night"] .ic-warn { filter: drop-shadow(0 0 5px oklch(0.87 0.14 82 / .55)); }
[data-style="night"] .ic-bad { filter: drop-shadow(0 0 5px oklch(0.74 0.19 28 / .6)); }

/* ---------- type ---------- */

[data-style="night"] .page-title { font-size: clamp(1.9rem, 1.25rem + 2.2vw, 2.9rem); line-height: .98; max-width: 28ch; }
[data-style="night"] .section-head h2 { font-size: 1.75rem; line-height: 1; }
[data-style="night"] .gw-body h1 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1; }
[data-style="night"] .panel-head h2, [data-style="night"] .panel-head h3, [data-style="night"] .panel > h2,
[data-style="night"] .card-kicker, [data-style="night"] .doc-title {
  font: 700 12.5px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
[data-style="night"] .tp-title { font: 700 16px/1.1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
[data-style="night"] .page-kicker { font-size: 15px; color: var(--text-2); }
[data-style="night"] .how-step h3, [data-style="night"] .auth-card h1 { letter-spacing: .02em; }
[data-style="night"] .data-table th, [data-style="night"] .mini-table th {
  font: 600 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
[data-style="night"] .big-money { font-weight: 600; }

/* ---------- chrome ---------- */

[data-style="night"] .side-nav a { font-size: 15px; font-weight: 600; }
[data-style="night"] .side-nav a.on .i { color: var(--neon-hot); filter: drop-shadow(0 0 6px var(--neon)); }
[data-style="night"] .nav-count {
  background: transparent; color: var(--neon-hot); border: 1px solid var(--neon);
  box-shadow: 0 0 8px oklch(0.72 0.25 356 / .45);
}
[data-style="night"] .store-btn { background: var(--surface); box-shadow: none; }
[data-style="night"] .btn.primary, [data-style="night"] .btn.teal { text-shadow: 0 0 8px oklch(0.72 0.25 356 / .8); }
[data-style="night"] .pulse-chip { background: oklch(0.72 0.25 356 / .12); border-color: oklch(0.72 0.25 356 / .6); color: var(--neon-hot); }
[data-style="night"] .pulse-chip i { background: var(--neon); box-shadow: 0 0 10px var(--neon); }
[data-style="night"] .count { background: transparent; color: var(--neon-hot); box-shadow: inset 0 0 0 1px var(--neon), 0 0 8px oklch(0.72 0.25 356 / .45); }
[data-style="night"] .toast { background: var(--pop-bg); }

/* ---------- the scoreboard ---------- */

[data-style="night"] .fig { border-top: 0; padding: 9px 0; }
[data-style="night"] .fig dt {
  display: flex; align-items: baseline; gap: 8px;
  font: 500 12px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}
[data-style="night"] .fig-v { font-size: 15px; font-weight: 700; color: oklch(0.95 0.05 200); text-shadow: 0 0 12px oklch(0.87 0.14 200 / .7); }
[data-style="night"] .fig-net .fig-v { color: oklch(0.93 0.12 150); text-shadow: 0 0 12px oklch(0.85 0.2 150 / .6); }
[data-style="night"] :is(.fig-d, .fig-sub) { font: 500 10.5px/1.35 var(--f-mono); }
[data-style="night"] .spark { filter: drop-shadow(0 0 4px oklch(0.87 0.14 200 / .8)); }
[data-style="night"] .spark .spark-area { opacity: .14; }
[data-style="night"] .receipt-foot b { color: oklch(0.93 0.12 150); text-shadow: 0 0 12px oklch(0.85 0.2 150 / .6); }
[data-style="night"] .hc-num { color: oklch(0.95 0.05 200); text-shadow: 0 0 14px oklch(0.87 0.14 200 / .5); }
[data-style="night"] .hc-num.plus { color: oklch(0.93 0.12 150); text-shadow: 0 0 14px oklch(0.85 0.2 150 / .6); }
[data-style="night"] .hc-num.minus { color: oklch(0.86 0.12 28); text-shadow: 0 0 14px oklch(0.72 0.19 28 / .6); }

[data-style="night"] .period-no { font: 800 22px/1 var(--f-display); letter-spacing: .02em; }
[data-style="night"] .period-link { background: var(--panel-bg); }
[data-style="night"] .period-item.is-current .period-link {
  border-color: var(--neon); box-shadow: 0 0 16px oklch(0.72 0.25 356 / .35), inset 0 0 12px oklch(0.72 0.25 356 / .15);
}
[data-style="night"] .period-item.is-current .period-no { color: var(--neon-hot); text-shadow: 0 0 10px oklch(0.72 0.25 356 / .7); }
[data-style="night"] .period-item.is-current .period-state::before { background: var(--neon); box-shadow: 0 0 8px var(--neon); }

/* ---------- charts: every bar is a lit tube ---------- */

[data-style="night"] .c-grid { stroke-dasharray: 2 5; }
[data-style="night"] .b-halo { display: block; fill: var(--s); opacity: .5; }
[data-style="night"] .b-body { stroke: color-mix(in oklab, var(--s) 45%, white); stroke-width: 1.5; }
[data-style="night"] .bar.now .b-halo { fill: var(--s-now); }
[data-style="night"] .c-x.now { fill: var(--neon-hot); }
[data-style="night"] .yoy-tile.up .yoy-big { text-shadow: 0 0 14px oklch(0.85 0.2 150 / .55); }
[data-style="night"] .yoy-tile.down .yoy-big { text-shadow: 0 0 14px oklch(0.72 0.19 28 / .55); }

/* ---------- public page ---------- */

[data-style="night"] .is-landing {
  background:
    radial-gradient(640px 380px at 22% 300px, oklch(0.32 0.13 356 / .32), transparent 70%),
    radial-gradient(620px 440px at 84% 560px, oklch(0.36 0.1 200 / .2), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
[data-style="night"] .hero-for { margin-top: 22px; }
[data-style="night"] .hero-title { font-size: clamp(2rem, 1.25rem + 2.7vw, 3.4rem); line-height: .98; max-width: 17ch; }
[data-style="night"] .hero-demo { z-index: 1; }
[data-style="night"] .hero-demo::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 30px; height: 60px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.72 0.25 356 / .35), transparent); filter: blur(10px);
}
[data-style="night"] .demo-card {
  transform: perspective(1500px) rotateY(-14deg) rotateX(5deg); transform-origin: 70% 50%;
  border-color: oklch(0.4 0.05 272);
}
[data-style="night"] .demo-line { font: 800 26px/1.02 var(--f-display); letter-spacing: .01em; text-transform: uppercase; }
@media (max-width: 960px) { [data-style="night"] .demo-card { transform: none; } }
[data-style="night"] .how-n { background: transparent; border: 1.5px solid var(--neon); color: var(--neon-hot); box-shadow: 0 0 10px oklch(0.72 0.25 356 / .45); }
[data-style="night"] .price-big b { color: oklch(0.95 0.05 200); text-shadow: 0 0 16px oklch(0.87 0.14 200 / .55); }
[data-style="night"] .list-check li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--good), 0 0 8px oklch(0.85 0.2 150 / .5); }