/* ============================================================
   CYOP TERMINAL — SKIN v3 (v149, 2026-09-05)

   The site's identity stays: teal #05CCB2 on near-black, Orbitron
   for chrome, a monospace for data. What changes is the STRUCTURE
   and the MOTION — a grouped sidebar instead of one long row of
   links, glass panels on an ambient grid, numbers that count in,
   panels that surface as you scroll, page changes that cross-fade,
   and one signature: the bot's heartbeat line in the sidebar,
   breathing while the bot reports and flat red when it goes silent.

   Loaded LAST (after style.css and any page css) so it wins the
   cascade without touching a template's classes. Every motion
   respects prefers-reduced-motion.
   ============================================================ */

:root {
    --bg: #0b0f0e;
    --bg-elev: #121716;
    --bg-elev2: #182120;
    --panel: rgba(18, 23, 22, 0.78);
    --panel-strong: rgba(18, 23, 22, 0.94);
    --glass-border: rgba(5, 204, 178, 0.16);
    --glass-border-strong: rgba(5, 204, 178, 0.42);
    --border: rgba(5, 204, 178, 0.16);
    --border-strong: rgba(5, 204, 178, 0.42);
    --text: #dcebe7;
    --text-secondary: #86b3a9;
    --text-tertiary: #5c827a;
    --accent: #05CCB2;
    --accent-bright: #2ff5dc;
    --neg: #FF3FB1;
    --warn: #FCAB33;
    --lime: #92DA1D;
    --info: #9FD6F4;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-chart: 12px;
    --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(5,204,178,0.18);
    --glow: 0 0 14px rgba(5, 204, 178, 0.28);
    --font-display: 'Orbitron', sans-serif;
    --font-mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --side-w: 236px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: 420ms;
}

/* ---- the ground: a faint terminal grid under two slow auroras ---- */
html { background: var(--bg); scroll-behavior: smooth; }
/* the ground lives on a fixed pseudo-element, not on background-attachment:
   fixed — that one repaints on every scroll and blanks in some compositors */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(70% 55% at 8% -10%, rgba(5, 204, 178, 0.14), transparent 60%),
        radial-gradient(55% 45% at 100% 0%, rgba(255, 63, 177, 0.07), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 32px),
        var(--bg);
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0;
    min-height: 100dvh;
}
code, pre, .data-table, .oc-total, .oc-addr, .stat-value, .cy-stat b, .pl-stat b, .synd-stat b,
.oc-total-sub, .ticket-body, .sys-cmd, .oc-feed, .oc-mini, .oc-budget { font-family: var(--font-mono); }

/* ---- the shell: sidebar + main ---- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.sidebar {
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px 14px 16px;
    background: linear-gradient(180deg, rgba(18,23,22,0.92), rgba(12,16,15,0.92));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--glass-border);
    z-index: 120;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; text-decoration: none; }
.brand-text { font-family: var(--font-display); letter-spacing: 3px; font-size: 16px; color: var(--accent); }
.brand::after { display: none; }
.logo { color: var(--accent); text-shadow: var(--glow); font-size: 18px; }

/* the signature: the bot's heartbeat */
.hb { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 2px; }
.hb-line { position: relative; height: 22px; overflow: hidden; border-radius: 4px; background: rgba(5,204,178,0.06); }
.hb-line svg { position: absolute; inset: 0; width: 200%; height: 100%; }
.hb-line path { fill: none; stroke: var(--accent); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(5,204,178,0.6)); }
.hb-ok .hb-line svg { animation: hb-scroll 2.6s linear infinite; }
.hb-bad .hb-line path { stroke: var(--neg); filter: drop-shadow(0 0 4px rgba(255,63,177,0.5)); }
.hb-bad .hb-line svg { animation: none; }
.hb-text { font-family: var(--font-display); font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-tertiary); display: flex; justify-content: space-between; }
.hb-ok .hb-text b { color: var(--accent); }
.hb-jobs { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--warn); text-decoration: none; padding: 4px 8px; border: 1px solid rgba(252,171,51,0.35); border-radius: 6px; }
.hb-jobs:hover { background: rgba(252,171,51,0.1); }
.hb-bad .hb-text b { color: var(--neg); }
@keyframes hb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.nav-links { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-eyebrow {
    font-family: var(--font-display); font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-tertiary); padding: 0 10px 6px;
}
.nav-link {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none;
    color: var(--text-secondary); text-decoration: none;
    padding: 8px 10px; border-radius: 9px; border: 1px solid transparent;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-link:hover { background: rgba(5,204,178,0.08); color: var(--text); transform: translateX(2px); border-color: transparent; box-shadow: none; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(5,204,178,0.18), rgba(5,204,178,0.04));
    color: var(--accent); border-color: rgba(5,204,178,0.25); box-shadow: inset 2px 0 0 var(--accent);
}
.nav-link .ico { width: 18px; text-align: center; opacity: .9; }

.side-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--glass-border); }
.lang-switch { display: inline-flex; gap: 6px; font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; padding: 0 8px; }
.lang-switch a { color: var(--text-tertiary); text-decoration: none; padding: 2px 4px; border-radius: 4px; }
.lang-switch a.active { color: var(--accent); background: rgba(5,204,178,0.1); }
.user-pill { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,0.03); font-size: 12px; }
.badge-admin { background: var(--accent); color: #05231f; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-family: var(--font-display); letter-spacing: 1px; }
.login-link, .logout-link { color: var(--text-secondary); text-decoration: none; font-size: 12px; padding: 6px 10px; border-radius: 9px; }
.login-link:hover, .logout-link:hover { background: rgba(255,63,177,0.08); color: var(--text); }
.site-link { font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); text-decoration: none; opacity: .85; padding: 4px 8px; border: 1px solid rgba(5,204,178,0.25); border-radius: 6px; }
.site-link:hover { opacity: 1; box-shadow: var(--glow); }

/* the scrim is never a grid cell: fixed, and only shown on small screens */
.scrim { position: fixed; inset: 0; display: none; background: rgba(0,0,0,0.5); z-index: 115; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }

/* ---- main column ---- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 110;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap;
    padding: 12px 28px;
    background: rgba(11, 15, 14, 0.72);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: none;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.burger { display: none; background: transparent; border: 1px solid var(--glass-border); color: var(--accent); border-radius: 8px; padding: 6px 10px; font-size: 16px; cursor: pointer; }
.crumb { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb b { color: var(--accent); }
.auth-area { display: flex; align-items: center; gap: 10px; }
.clock { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }

.content { max-width: 1280px; width: 100%; margin: 26px auto; padding: 0 28px; }
.footer { border-top: 1px solid var(--glass-border); color: var(--text-tertiary); font-size: 12px; padding: 22px; margin-top: 48px; text-align: center; }

/* ---- headings: Orbitron stays, but quieter ---- */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 1px; }
h1, .header-row h1, .hero h1 { font-size: 24px; text-transform: uppercase; color: var(--text); }
h2 { font-size: 15px; text-transform: uppercase; color: var(--accent); letter-spacing: 2px; }
h3 { font-size: 13px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 1.5px; }
.hero { text-align: left; padding: 6px 0 4px; }
.hero h1 { font-size: clamp(22px, 3vw, 30px); background: linear-gradient(90deg, #dcebe7, var(--accent-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--text-secondary); }

/* ---- glass panels ---- */
.card, .oc-card, .oc-hero, .oc-venue, .stat-card, .sys-card, .cy-stat, .pl-stat, .synd-stat, .login-card,
.regime-banner, .regime-note, .ticket-card, .oc-panel, .oc-state, .oc-switch, .oc-review, .modal {
    position: relative;
    background: var(--panel);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-top-width: 1px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before, .oc-card::before, .oc-hero::before, .oc-venue::before, .sys-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(5,204,178,0.55), transparent);
    border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
}
.card:hover, .oc-card:hover, .oc-venue:hover, .stat-card:hover, .sys-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.oc-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(5, 204, 178, 0.16), transparent 60%), var(--panel); }
.oc-hero:hover { transform: none; }
.oc-state, .oc-switch { border-radius: 10px; backdrop-filter: none; box-shadow: none; }
.oc-state.armed { border-left: 3px solid var(--neg); }
.oc-state.locked { border-left: 3px solid var(--accent); }
.oc-state.killed { border-left: 3px solid var(--warn); }
.regime-banner { border-left-width: 3px; }
.regime-card { border-left: 3px solid var(--accent); }
.stat-card, .cy-stat, .pl-stat, .synd-stat { padding: 14px 16px; }
.stat-label, .oc-label { font-family: var(--font-display); font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-tertiary); }
.stat-value { font-size: 24px; font-weight: 500; color: var(--text); }
.oc-total { text-shadow: 0 0 26px rgba(5, 204, 178, 0.28); }
.oc-card-head { border-bottom: 1px solid var(--glass-border); }
.oc-venue.live { border-top: 1px solid var(--glass-border); box-shadow: var(--shadow), inset 0 2px 0 var(--neg); }
.oc-venue { border-top-color: var(--glass-border); }

/* ---- tables ---- */
.data-table { font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
.data-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: rgba(18,23,22,0.96);
    font-family: var(--font-display); font-size: 9.5px; letter-spacing: 1.5px; color: var(--text-secondary);
    border-bottom: 1px solid var(--glass-border-strong);
    padding: 10px 12px;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid rgba(5,204,178,0.08); }
.data-table tbody tr { transition: background 160ms var(--ease); }
.data-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.012); }
.data-table tbody tr:hover td { background: rgba(5,204,178,0.07); }
.data-table tr.synd-fresh td { background: rgba(5,204,178,0.05); }
.oc-card > div[style*="overflow-x"], .card > div[style*="overflow-x"] { border-radius: 10px; }

/* ---- controls ---- */
button, .btn, .btn-primary, .btn-secondary, .btn-small, .btn-sm, .stacked-form button {
    font-family: var(--font-display); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
    border-radius: 9px; padding: 8px 14px; border: 1px solid var(--glass-border-strong);
    background: rgba(5,204,178,0.06); color: var(--accent); cursor: pointer;
    transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
button:hover, .btn:hover, .btn-secondary:hover, .btn-small:hover, .btn-sm:hover { background: rgba(5,204,178,0.14); box-shadow: var(--glow); transform: translateY(-1px); border-color: var(--accent); }
button:active, .btn:active { transform: translateY(0); }
.btn-primary, .stacked-form button, .login-form button {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: #05231f; border-color: transparent; font-weight: 700;
}
.btn-primary:hover, .stacked-form button:hover, .login-form button:hover { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); box-shadow: 0 0 22px rgba(5,204,178,0.45); }
.btn-danger, .oc-killbtn { background: rgba(255,63,177,0.06); color: var(--neg); border: 1px solid rgba(255,63,177,0.45); }
.btn-danger:hover, .oc-killbtn:hover { background: rgba(255,63,177,0.14); box-shadow: 0 0 14px rgba(255,63,177,0.35); }
input, select, textarea {
    background: rgba(8,11,10,0.9) !important; border: 1px solid var(--glass-border) !important;
    border-radius: 9px !important; color: var(--text) !important; font-family: var(--font-mono) !important;
    transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(5,204,178,0.18) !important; outline: none !important; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.oc-toggle { border-radius: 99px; }

/* pills */
.status, .regime-pill, .side-pill, .strat-pill, .alt-badge, .oc-badge, .oc-tag, .sys-state, .flag {
    border-radius: 99px; font-family: var(--font-display); letter-spacing: 1px; font-size: 9.5px;
}
.pos { color: var(--accent) !important; }
.neg { color: var(--neg) !important; }
.chart-container, .chart-sm { background: rgba(8,11,10,0.8); border: 1px solid var(--glass-border); border-radius: var(--radius-chart); }
code, .sys-cmd code, .ticket-body code { background: rgba(0,0,0,0.35); border: 1px solid var(--glass-border); color: var(--accent-bright); border-radius: 6px; }
.bot-silent { border-left: 4px solid var(--neg); background: linear-gradient(90deg, rgba(122,31,31,0.95), rgba(122,31,31,0.75)) !important; }

/* ---- motion: reveal on scroll (JS adds .rv / .in), staggered ---- */
html.js .rv { opacity: 0; transform: translateY(14px); }
html.js .rv.in { opacity: 1; transform: none; transition: opacity 560ms var(--ease), transform 560ms var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
html.js .rv.in:hover { transition-delay: 0ms; }

/* ---- page change: cross-fade (Baseline 2025, ignored elsewhere) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 220ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(5,204,178,0.25); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(5,204,178,0.45); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- responsive: the sidebar slides in ---- */
@media (max-width: 960px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, 300px); transform: translateX(-100%); transition: transform 300ms var(--ease); box-shadow: 0 0 60px rgba(0,0,0,0.6); }
    .sidebar.open { transform: none; }
    .scrim { display: block; }
    .scrim.on { opacity: 1; pointer-events: auto; }
    .burger { display: inline-block; }
    .topbar { padding: 10px 16px; }
    .content { padding: 0 16px; margin: 16px auto; }
    .data-table { font-size: 12px; }
    .stat-value { font-size: 20px; }
}

/* ---- reduced motion: everything stands still ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .rv { opacity: 1; transform: none; transition: none; }
    .hb-ok .hb-line svg { animation: none; }
    .card, .oc-card, .oc-venue, .stat-card, .sys-card, .nav-link, button, .btn, .sidebar, .data-table tbody tr { transition: none; }
    .card:hover, .oc-card:hover, .oc-venue:hover, .stat-card:hover, .sys-card:hover, .nav-link:hover, button:hover { transform: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   CYOP TERMINAL — skin v4 (v163): the 2026 pass
   What the year's trend lists agree on, translated into a terminal:
     tokens for a fluid type scale · kinetic (decoding) page titles ·
     a command palette (Ctrl+K) · cursor-responsive depth on the tiles ·
     scroll-driven reveals in CSS where the browser has them · an HTMX
     scanline · accessibility first: skip link, aria-current, a contrast
     mode (manual and prefers-contrast) · performance: content-visibility
     below the fold. Everything motion stands still under reduced motion.
   ============================================================ */
:root {
    --fs-1: clamp(22px, 1.2vw + 16px, 30px);   /* page title */
    --fs-2: clamp(14px, 0.4vw + 12px, 16px);   /* section title */
    --fs-num: clamp(20px, 1vw + 14px, 28px);   /* the numbers */
    --space-1: 6px; --space-2: 12px; --space-3: 20px; --space-4: 32px;
    --notch: 14px;
}
h1, .header-row h1 { font-size: var(--fs-1); }
h2 { font-size: var(--fs-2); }
.stat-value, .oc-total, .cy-stat > b, .pl-stat > b, .synd-stat b, .data-table td { font-variant-numeric: tabular-nums; }
.stat-value { font-size: var(--fs-num); }
main h1 { font-variant-ligatures: none; }

/* ---- accessibility: skip link, contrast ---- */
.skip { position: absolute; left: 12px; top: -48px; z-index: 500; padding: 8px 12px; background: var(--accent); color: #05231f;
    border-radius: 8px; font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; text-decoration: none; transition: top 160ms var(--ease); }
.skip:focus { top: 12px; outline: 2px solid #fff; }
main:focus { outline: none; }
html[data-contrast="more"], html:not([data-contrast]) .contrast-media { --contrast-on: 1; }
html[data-contrast="more"] {
    --text: #f2fbf8; --text-secondary: #bfe0d8; --text-tertiary: #93bcb2;
    --glass-border: rgba(5,204,178,0.36); --glass-border-strong: rgba(5,204,178,0.72);
    --panel: rgba(14,18,17,0.97); --panel-strong: rgba(14,18,17,0.99);
}
html[data-contrast="more"] body::before { background: var(--bg); }
html[data-contrast="more"] .data-table td { border-bottom-color: rgba(5,204,178,0.22); }
@media (prefers-contrast: more) {
    html:not([data-contrast]) {
        --text: #f2fbf8; --text-secondary: #bfe0d8; --text-tertiary: #93bcb2;
        --glass-border: rgba(5,204,178,0.36); --glass-border-strong: rgba(5,204,178,0.72);
        --panel: rgba(14,18,17,0.97); --panel-strong: rgba(14,18,17,0.99);
    }
    html:not([data-contrast]) body::before { background: var(--bg); }
}
.contrast-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-start; background: transparent; border: 1px solid transparent;
    color: var(--text-tertiary); font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; padding: 6px 10px; border-radius: 9px; }
.contrast-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--glass-border); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--neg) !important; box-shadow: 0 0 0 3px rgba(255,63,177,0.18) !important; }

/* ---- the notch: a bevelled corner on the hero panels, no shadow lost ---- */
.oc-hero::after, .login-card::after, .regime-banner::after {
    content: ""; position: absolute; top: -1px; right: -1px; width: var(--notch); height: var(--notch); pointer-events: none;
    background: linear-gradient(225deg, var(--bg) 0 50%, transparent 50%);
    border-bottom: 1px solid var(--glass-border-strong); border-left: 1px solid var(--glass-border-strong);
    border-radius: 0 0 0 4px;
}

/* ---- cursor-responsive depth: the tiles tilt toward the pointer ---- */
@media (hover: hover) and (pointer: fine) {
    .tilt { transform-style: preserve-3d; }
    .tilt.on { transform: perspective(720px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); transition: transform 80ms linear, box-shadow var(--dur) var(--ease); }
    .tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
        background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(47,245,220,0.16), transparent 62%);
        transition: opacity 240ms var(--ease); }
    .tilt.on::after { opacity: 1; }
}

/* ---- the HTMX scanline ---- */
.hx-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 300; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow: var(--glow); opacity: 0; transition: width 500ms var(--ease), opacity 200ms; }
.hx-bar.on { opacity: 1; width: 72%; }
.hx-bar.done { width: 100%; opacity: 0; transition: width 150ms var(--ease), opacity 300ms 150ms; }

/* ---- the command palette ---- */
.pal-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; padding: 5px 9px; }
.pal-btn kbd { color: var(--accent); }
kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--glass-border-strong); border-radius: 4px; }
.pal { position: fixed; inset: 0; z-index: 400; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
    background: rgba(4,7,6,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pal.open { display: flex; }
.pal-box { width: min(92vw, 560px); background: var(--panel-strong); border: 1px solid var(--glass-border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-hover); overflow: hidden; animation: pal-in 180ms var(--ease); }
@keyframes pal-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--glass-border); font-family: var(--font-mono); }
.pal-in .prompt { color: var(--accent); font-size: 16px; }
.pal-in input { flex: 1; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 15px !important; padding: 4px 0 !important; }
.pal-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.pal-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.pal-list li .k { font-family: var(--font-display); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
.pal-list li.sel, .pal-list li:hover { background: rgba(5,204,178,0.12); color: var(--text); }
.pal-list li.sel .k { color: var(--accent); }
.pal-empty { padding: 14px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }
.pal-hint { padding: 8px 14px; border-top: 1px solid var(--glass-border); font-family: var(--font-display); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-tertiary); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- scroll-driven reveals where the browser has them (JS adds .sda) ---- */
@supports (animation-timeline: view()) {
    html.js.sda .rv { opacity: 1; transform: none; animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 24%; }
}
@keyframes rv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- performance: sections far below the fold render when they arrive ---- */
main.content > section:nth-of-type(n+4) { content-visibility: auto; contain-intrinsic-size: auto 360px; }

/* ---- micro-interactions ---- */
button:active, .btn:active, .btn-sm:active, .btn-primary:active { transform: translateY(0) scale(.98); }
.data-table tbody tr:focus-within td { background: rgba(5,204,178,0.09); }
.nav-link[aria-current="page"] .ico { text-shadow: var(--glow); }

.pal-btn kbd, .clock { white-space: nowrap; }
/* small screens: the topbar keeps the crumb readable — the palette shrinks to its prompt, the clock steps aside */
@media (max-width: 960px) {
    .pal-btn span, .pal-btn kbd, .clock { display: none; }
    .pal-btn::before { content: ">_"; font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
    .pal { padding-top: 8vh; }
    .auth-area { gap: 6px; }
    .site-link { padding: 4px 6px; }
}

/* ---- the today strip (v174) ---- */
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.today-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.today-cell b { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; }
.today-cell small { line-height: 1.4; overflow-wrap: anywhere; }
.today-strip { padding: 14px 18px; }

/* ---- reduced motion, skin v4 ---- */
@media (prefers-reduced-motion: reduce) {
    .tilt.on { transform: none; transition: none; }
    .tilt::after { display: none; }
    .pal-box { animation: none; }
    .hx-bar { transition: none; }
    html.js.sda .rv { animation: none; opacity: 1; transform: none; }
    .skip { transition: none; }
}