/* Nexus — design tokens + custom layer on top of Tailwind (CDN build).
 *
 * THEMES: one `[data-theme="name"]` block per theme. Values are space-separated
 * RGB triplets (Tailwind adds the alpha). Light and dark share the same scales;
 * markup chooses the end of the scale with `dark:` variants. A theme may also
 * override tokens for dark only under `.dark[data-theme="name"]`.
 * Register new themes in Nexus.THEMES (assets/js/app.js) so they show in the picker.
 */

/* ── Theme: matrix (DEFAULT) — light = terminal paper, dark = the real thing ── */
/* Must come first: `:root` shares specificity with `[data-theme]`, so later theme blocks win. */
:root, [data-theme="matrix"] {
    --paper: 240 246 240;
    --ink-50: 240 246 240;  --ink-100: 226 236 226; --ink-200: 204 220 204; --ink-300: 170 192 170;
    --ink-400: 110 140 110; --ink-500: 78 104 78;   --ink-600: 52 74 52;    --ink-700: 32 50 32;
    --ink-800: 16 30 16;    --ink-900: 6 16 6;      --ink-950: 0 0 0;
    --brand-50: 232 255 236; --brand-100: 200 255 210; --brand-200: 150 255 170; --brand-300: 90 255 125;
    --brand-400: 40 255 90;  --brand-500: 0 255 65;    --brand-600: 0 200 50;    --brand-700: 0 150 38;
    --brand-800: 0 105 27;   --brand-900: 0 70 18;     --brand-950: 0 35 9;
    --alert-50: 255 240 240; --alert-100: 255 220 220; --alert-200: 255 180 180; --alert-300: 255 130 130;
    --alert-400: 255 90 90;  --alert-500: 255 60 60;   --alert-600: 220 40 40;   --alert-700: 180 30 30;
    --alert-800: 140 22 22;  --alert-900: 100 16 16;   --alert-950: 60 8 8;
    --rail-bg: 0 0 0; --rail-fg: 0 200 50; --rail-line: 0 45 12; --rail-active: 0 45 12;
}

/* ── Theme: pine — warm paper, deep green ──────────────────── */
[data-theme="pine"] {
    --paper: 246 245 241;
    --ink-50: 246 245 241;  --ink-100: 237 236 231; --ink-200: 223 221 213; --ink-300: 198 195 184;
    --ink-400: 146 142 130; --ink-500: 109 105 95;  --ink-600: 80 77 69;    --ink-700: 56 54 47;
    --ink-800: 38 36 31;    --ink-900: 25 24 20;    --ink-950: 16 15 13;
    --brand-50: 236 247 243; --brand-100: 210 237 227; --brand-200: 168 219 200; --brand-300: 114 194 166;
    --brand-400: 63 163 131; --brand-500: 31 133 103;  --brand-600: 20 106 83;   --brand-700: 18 85 67;
    --brand-800: 17 68 55;   --brand-900: 15 56 46;    --brand-950: 7 33 25;
    --alert-50: 253 242 238; --alert-100: 251 225 216; --alert-200: 246 191 174; --alert-300: 238 148 119;
    --alert-400: 226 105 74; --alert-500: 201 77 47;   --alert-600: 168 60 34;   --alert-700: 134 48 29;
    --alert-800: 107 41 25;  --alert-900: 85 35 23;    --alert-950: 60 24 16;
    --rail-bg: 7 33 25; --rail-fg: 168 219 200; --rail-line: 15 56 46; --rail-active: 17 68 55;
}

/* ── Theme: ocean — cool neutrals, blue ──────────────────────────────── */
[data-theme="ocean"] {
    --paper: 244 246 250;
    --ink-50: 248 250 252;  --ink-100: 241 245 249; --ink-200: 226 232 240; --ink-300: 203 213 225;
    --ink-400: 148 163 184; --ink-500: 100 116 139; --ink-600: 71 85 105;   --ink-700: 51 65 85;
    --ink-800: 30 41 59;    --ink-900: 15 23 42;    --ink-950: 8 13 26;
    --brand-50: 239 246 255; --brand-100: 219 234 254; --brand-200: 191 219 254; --brand-300: 147 197 253;
    --brand-400: 96 165 250; --brand-500: 59 130 246;  --brand-600: 37 99 235;   --brand-700: 29 78 216;
    --brand-800: 30 64 175;  --brand-900: 30 58 138;   --brand-950: 23 37 84;
    --alert-50: 255 241 242; --alert-100: 255 228 230; --alert-200: 254 205 211; --alert-300: 253 164 175;
    --alert-400: 251 113 133; --alert-500: 244 63 94;  --alert-600: 225 29 72;   --alert-700: 190 18 60;
    --alert-800: 159 18 57;  --alert-900: 136 19 55;   --alert-950: 76 5 25;
    --rail-bg: 15 23 42; --rail-fg: 148 163 184; --rail-line: 30 41 59; --rail-active: 30 58 138;
}

/* ── Theme: graphite — neutral mono, amber accent ────────────────────── */
[data-theme="graphite"] {
    --paper: 247 247 247;
    --ink-50: 250 250 250;  --ink-100: 244 244 245; --ink-200: 228 228 231; --ink-300: 212 212 216;
    --ink-400: 161 161 170; --ink-500: 113 113 122; --ink-600: 82 82 91;    --ink-700: 63 63 70;
    --ink-800: 39 39 42;    --ink-900: 24 24 27;    --ink-950: 12 12 14;
    --brand-50: 255 251 235; --brand-100: 254 243 199; --brand-200: 253 230 138; --brand-300: 252 211 77;
    --brand-400: 251 191 36; --brand-500: 217 119 6;   --brand-600: 180 83 9;    --brand-700: 146 64 14;
    --brand-800: 120 53 15;  --brand-900: 99 44 13;    --brand-950: 60 26 8;
    --alert-50: 254 242 242; --alert-100: 254 226 226; --alert-200: 254 202 202; --alert-300: 252 165 165;
    --alert-400: 248 113 113; --alert-500: 239 68 68;  --alert-600: 220 38 38;   --alert-700: 185 28 28;
    --alert-800: 153 27 27;  --alert-900: 127 29 29;   --alert-950: 69 10 10;
    --rail-bg: 12 12 14; --rail-fg: 161 161 170; --rail-line: 39 39 42; --rail-active: 39 39 42;
}

html { font-feature-settings: "ss01", "cv11"; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Scrollbars ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgb(var(--ink-400) / .35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink-400) / .6); }

/* ── Sidebar: rail + panel ──────────────────────────────────────────── */
.sidebar { transition: transform .2s ease; }
.panel   { transition: width .18s ease, opacity .18s ease; overflow: hidden; }

@media (min-width: 1024px) {
    html.sb-collapsed .panel { width: 0; opacity: 0; border-right-width: 0; }
}
@media (max-width: 1023.98px) {
    .sidebar { transform: translateX(-100%); }
    html.sb-open .sidebar { transform: translateX(0); }
    html.sb-open #sbOverlay { display: block; }
}

/* ── Hairline card ──────────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid rgb(var(--ink-900) / .09); border-radius: 14px; }
.dark .card { background: rgb(var(--ink-900)); border-color: rgb(255 255 255 / .07); }

/* ── Motion ─────────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .18s ease-out; }
@keyframes shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
.animate-shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .35s ease-out both; }
.rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .1s; } .rise-3 { animation-delay: .15s; } .rise-4 { animation-delay: .2s; }

@keyframes ping { 75%,100% { transform: scale(2.2); opacity: 0; } }
.dot-live::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: inherit; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }

/* ── Login: ruled paper + board ─────────────────────────────────────── */
.ruled { background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgb(var(--ink-900) / .06) 31px 32px); }
.dark .ruled { background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgb(255 255 255 / .05) 31px 32px); }
.board-row + .board-row { border-top: 1px solid rgb(255 255 255 / .08); }
@keyframes tick { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.tick { animation: tick 2.4s ease-in-out infinite; }

/* ── Data table ─────────────────────────────────────────────────────── */
.tbl th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: rgb(var(--ink-400)); text-align: left; padding: 10px 14px; border-bottom: 1px solid rgb(var(--ink-900) / .08); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid rgb(var(--ink-900) / .06); font-size: 13px; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: rgb(var(--ink-900) / .025); }
.dark .tbl th { border-color: rgb(255 255 255 / .08); }
.dark .tbl td { border-color: rgb(255 255 255 / .06); }
.dark .tbl tbody tr:hover td { background: rgb(255 255 255 / .03); }

/* ── Toasts ─────────────────────────────────────────────────────────── */
.toast { pointer-events: auto; animation: fadeIn .18s ease-out; }

/* ── Theme: matrix — extras (tokens are at the top of this file) ─────── */
[data-theme="matrix"] .font-display,
[data-theme="matrix"] .tnum { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.01em; }
.dark[data-theme="matrix"] body::before {
    content: ''; pointer-events: none; position: fixed; inset: 0; z-index: 9999;
    background: repeating-linear-gradient(0deg, rgb(0 255 65 / .035) 0 1px, transparent 1px 3px);
}
.dark[data-theme="matrix"] .font-display { text-shadow: 0 0 14px rgb(0 255 65 / .35); }
.dark[data-theme="matrix"] .card { background: rgb(0 10 3); border-color: rgb(0 255 65 / .14); }
.dark[data-theme="matrix"] .panel { background: rgb(0 6 2) !important; }
.dark[data-theme="matrix"] .tbl th { color: rgb(0 200 50 / .8); }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
    main > .flex-1 { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* room for the bottom bar */
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
#mobileBar { padding-bottom: env(safe-area-inset-bottom); }
#mobileSearch.open { display: block; }