/* Theme tokens: the single source of truth for both color themes.
 *
 * Every Tailwind color utility used by the gateway resolves to one of these
 * CSS variables (see the `tailwind.config` colors block in base.html), so the
 * SAME templates/components render both themes; only the values here differ.
 *
 * Vars are space-separated RGB triplets ("9 9 11"), consumed as
 * `rgb(var(--c-zinc-950) / <alpha-value>)` so Tailwind opacity modifiers
 * (e.g. bg-zinc-900/40) keep working.
 *
 * Palette names keep their Tailwind identity but act as ROLES:
 *   - zinc-*  = neutral chrome, from page background (950) to strongest text
 *               (100). Each theme tunes the ramp to its surfaces
 *               so "zinc-950" always means "page background".
 *   - brand-* = one pine accent, hover and foreground; emerald aliases this
 *               accent for ink and neutral chrome for supporting surfaces.
 *   - chart-* = data colors independent of the brand.
 *   - other accents = hue kept, lightness re-tuned per theme: text shades (100-400)
 *               darken on light backgrounds, dark tint/border shades (700-950)
 *               become pale, solids (500/600) stay saturated.
 *   - white/black stay literal (text on solid accent buttons, modal scrims).
 *
 * Adding a theme = add another `html.<name> { ... }` block and extend the
 * cycle in the sidebar toggle (partials/_theme_toggle.html + the
 * [data-theme-toggle] handler in app.js); no other template changes needed.
 * Do not hardcode hex colors in templates/JS — use palette utilities or
 * `rgb(var(--c-...))` (tests/unit/test_theme_tokens.py enforces this).
 */

:root {
    color-scheme: dark;

    --c-zinc-50: 250 250 250;
    --c-zinc-100: 240 240 240;
    --c-zinc-200: 224 224 224;
    --c-zinc-300: 204 204 204;
    --c-zinc-400: 181 181 181;
    --c-zinc-500: 165 165 165;
    --c-zinc-600: 146 146 146;
    --c-zinc-700: 72 72 72;
    --c-zinc-800: 59 59 59;
    --c-zinc-900: 28 28 28;
    --c-zinc-950: 18 18 18;

    /* One pine accent for identity, actions and indicators. */
    --c-brand-100: 24 24 24;
    --c-brand-400: 127 204 166;
    --c-brand-500: 149 215 182;

    /* Data series retain their palette independently of the brand. */
    --c-chart-400: 52 211 153;
    --c-chart-500: 16 185 129;

    --c-sidebar-900: 23 23 23;
    --c-header-900: 18 18 18;
    --c-active-900: 49 49 49;
    --c-active-400: var(--c-brand-400);
    --c-action-100: var(--c-brand-100);
    --c-action-600: var(--c-brand-400);
    --c-action-500: var(--c-brand-500);
    --c-danger-500: 185 28 28;

    /* Compatibility roles: accent ink and neutral supporting surfaces. */
    --c-emerald-100: var(--c-brand-400);
    --c-emerald-200: var(--c-brand-400);
    --c-emerald-300: var(--c-brand-400);
    --c-emerald-400: var(--c-brand-400);
    --c-emerald-500: var(--c-brand-400);
    --c-emerald-600: var(--c-brand-400);
    --c-emerald-700: var(--c-zinc-700);
    --c-emerald-800: var(--c-zinc-800);
    --c-emerald-900: var(--c-zinc-900);
    --c-emerald-950: var(--c-zinc-950);

    --c-red-300: 252 165 165;
    --c-red-400: 248 113 113;
    --c-red-500: 239 68 68;
    --c-red-600: 196 52 52;
    --c-red-700: 185 28 28;
    --c-red-800: 153 27 27;
    --c-red-900: 127 29 29;
    --c-red-950: 69 10 10;

    --c-amber-100: 254 243 199;
    --c-amber-200: 253 230 138;
    --c-amber-300: 252 211 77;
    --c-amber-400: 251 191 36;
    --c-amber-500: 245 158 11;
    --c-amber-600: 217 119 6;
    --c-amber-700: 180 83 9;
    --c-amber-800: 146 64 14;
    --c-amber-900: 120 53 15;
    --c-amber-950: 69 26 3;

    --c-blue-400: 96 165 250;
    --c-blue-500: 59 130 246;
    --c-blue-600: 37 99 235;
    --c-blue-800: 30 64 175;

    --c-cyan-300: 103 232 249;
    --c-cyan-400: 34 211 238;
    --c-cyan-500: 6 182 212;

    --c-sky-400: 56 189 248;
    --c-sky-500: 14 165 233;

    --c-teal-400: 45 212 191;
    --c-teal-500: 20 184 166;

    --c-orange-300: 253 186 116;
    --c-orange-400: 251 146 60;
    --c-orange-500: 249 115 22;
    --c-orange-600: 234 88 12;
    --c-orange-700: 194 65 12;
    --c-orange-800: 154 52 18;

    --c-purple-400: 192 132 252;
    --c-purple-500: 168 85 247;

    --c-violet-300: 196 181 253;
    --c-violet-400: 167 139 250;
    --c-violet-500: 139 92 246;

    --c-rose-300: 253 164 175;
    --c-rose-400: 251 113 133;
    --c-rose-500: 244 63 94;

    --c-green-300: 134 239 172;
    --c-green-400: 74 222 128;

    --c-pink-400: 244 114 182;
    --c-fuchsia-400: 232 121 249;
    --c-lime-500: 132 204 22;
    --c-indigo-400: 129 140 248;

    /* Run identity (same trio both themes — validated for both surfaces) */
    --run-this: #059669;
    --run-parent: #8b5cf6;
    --run-best: #d97706;
    /* Chart chrome */
    --chart-grid: rgba(250, 250, 250, 0.05);
    --chart-tick: rgb(var(--c-zinc-600));
    --chart-cursor: rgb(var(--c-zinc-700));
    --chart-tip-bg: rgb(var(--c-zinc-900));
    --chart-tip-border: rgb(var(--c-zinc-700));
}

html.light {
    color-scheme: light;

    /* Light surfaces use white above an off-white page; text and borders
       are tuned independently rather than produced by inverting dark mode. */
    --c-zinc-50: 20 20 20;
    --c-zinc-100: 39 39 39;
    --c-zinc-200: 53 53 53;
    --c-zinc-300: 75 75 75;
    --c-zinc-400: 96 96 96;
    --c-zinc-500: 104 104 104;
    --c-zinc-600: 104 104 104;
    --c-zinc-700: 211 211 211;
    --c-zinc-800: 226 226 226;
    --c-zinc-900: 255 255 255;
    --c-zinc-950: 248 248 248;

    /* One pine accent for identity, actions and indicators. */
    --c-brand-100: 255 255 255;
    --c-brand-400: 47 118 83;
    --c-brand-500: 38 99 69;

    /* Data series retain their palette independently of the brand. */
    --c-chart-400: 5 150 105;
    --c-chart-500: 5 150 105;

    --c-sidebar-900: 242 242 242;
    --c-header-900: 248 248 248;
    --c-active-900: 233 233 233;
    --c-active-400: var(--c-brand-400);
    --c-action-100: var(--c-brand-100);
    --c-action-600: var(--c-brand-400);
    --c-action-500: var(--c-brand-500);
    --c-danger-500: 153 27 27;

    /* Compatibility roles: accent ink and neutral supporting surfaces. */
    --c-emerald-100: var(--c-brand-400);
    --c-emerald-200: var(--c-brand-400);
    --c-emerald-300: var(--c-brand-400);
    --c-emerald-400: var(--c-brand-400);
    --c-emerald-500: var(--c-brand-400);
    --c-emerald-600: var(--c-brand-400);
    --c-emerald-700: var(--c-zinc-700);
    --c-emerald-800: var(--c-zinc-800);
    --c-emerald-900: var(--c-zinc-900);
    --c-emerald-950: var(--c-zinc-950);

    --c-red-300: 185 28 28;
    --c-red-400: 220 38 38;
    --c-red-500: 220 38 38;
    --c-red-600: 185 28 28;
    --c-red-700: 252 165 165;
    --c-red-800: 254 202 202;
    --c-red-900: 254 226 226;
    --c-red-950: 254 242 242;

    --c-amber-100: 120 53 15;
    --c-amber-200: 146 64 14;
    --c-amber-300: 180 83 9;
    --c-amber-400: 180 83 9;
    --c-amber-500: 180 83 9;
    --c-amber-600: 180 83 9;
    --c-amber-700: 252 211 77;
    --c-amber-800: 253 230 138;
    --c-amber-900: 254 243 199;
    --c-amber-950: 255 251 235;

    --c-blue-400: 37 99 235;
    --c-blue-500: 37 99 235;
    --c-blue-600: 29 78 216;
    --c-blue-800: 191 219 254;

    --c-cyan-300: 14 116 144;
    --c-cyan-400: 8 145 178;
    --c-cyan-500: 8 145 178;

    --c-sky-400: 2 132 199;
    --c-sky-500: 2 132 199;

    --c-teal-400: 13 148 136;
    --c-teal-500: 13 148 136;

    --c-orange-300: 194 65 12;
    --c-orange-400: 194 65 12;
    --c-orange-500: 194 65 12;
    --c-orange-600: 194 65 12;
    --c-orange-700: 253 186 116;
    --c-orange-800: 254 215 170;

    --c-purple-400: 147 51 234;
    --c-purple-500: 147 51 234;

    --c-violet-300: 109 40 217;
    --c-violet-400: 124 58 237;
    --c-violet-500: 124 58 237;

    --c-rose-300: 190 18 60;
    --c-rose-400: 225 29 72;
    --c-rose-500: 225 29 72;

    --c-green-300: 21 128 61;
    --c-green-400: 22 163 74;

    --c-pink-400: 219 39 119;
    --c-fuchsia-400: 192 38 211;
    --c-lime-500: 101 163 13;
    --c-indigo-400: 79 70 229;

    /* Run identity (same trio both themes — validated for both surfaces) */
    --run-this: #059669;
    --run-parent: #8b5cf6;
    --run-best: #d97706;
    /* Chart chrome */
    --chart-grid: rgba(9, 9, 11, 0.07);
    --chart-tick: rgb(var(--c-zinc-500));
    --chart-cursor: rgb(var(--c-zinc-300));
    --chart-tip-bg: #ffffff;
    --chart-tip-border: rgb(var(--c-zinc-300));
}

/* Rendered markdown documents (hill READMEs). Theme-aware via the tokens above. */
.md-doc { font-size: 0.875rem; line-height: 1.65; color: rgb(var(--c-zinc-300)); }
.md-doc > :first-child { margin-top: 0; }
.md-doc > :last-child { margin-bottom: 0; }
.md-doc h1, .md-doc h2, .md-doc h3, .md-doc h4 { color: rgb(var(--c-zinc-100)); font-weight: 600; line-height: 1.3; margin: 1.6em 0 0.5em; }
.md-doc h1 { font-size: 1.2rem; padding-bottom: 0.3em; border-bottom: 1px solid rgb(var(--c-zinc-800)); }
.md-doc h2 { font-size: 1.02rem; padding-bottom: 0.25em; border-bottom: 1px solid rgb(var(--c-zinc-800)); }
.md-doc h3 { font-size: 0.95rem; }
.md-doc h4 { font-size: 0.875rem; }
.md-doc p { margin: 0.6em 0; }
.md-doc a { color: rgb(var(--c-emerald-400)); text-decoration: underline; text-underline-offset: 2px; }
.md-doc strong { color: rgb(var(--c-zinc-100)); font-weight: 600; }
.md-doc code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82em; color: rgb(var(--c-zinc-200)); background: rgb(var(--c-zinc-800) / 0.6); border: 1px solid rgb(var(--c-zinc-800)); border-radius: 3px; padding: 0.1em 0.35em; }
.md-doc pre { background: rgb(var(--c-zinc-950)); border: 1px solid rgb(var(--c-zinc-800)); border-radius: 4px; padding: 0.7rem 0.9rem; overflow-x: auto; margin: 0.75em 0; }
.md-doc pre code { background: none; border: 0; padding: 0; font-size: 0.8rem; }
.md-doc ul, .md-doc ol { padding-left: 1.4em; margin: 0.5em 0; }
.md-doc ul { list-style: disc; }
.md-doc ol { list-style: decimal; }
.md-doc li { margin: 0.2em 0; }
.md-doc li > p { margin: 0.2em 0; }
.md-doc table { width: 100%; border-collapse: collapse; margin: 0.75em 0; font-size: 0.82rem; }
.md-doc th, .md-doc td { border: 1px solid rgb(var(--c-zinc-800)); padding: 0.35rem 0.6rem; text-align: left; vertical-align: top; }
.md-doc th { background: rgb(var(--c-zinc-900)); color: rgb(var(--c-zinc-200)); font-weight: 600; }
.md-doc blockquote { border-left: 3px solid rgb(var(--c-zinc-700)); padding-left: 0.9em; color: rgb(var(--c-zinc-400)); margin: 0.75em 0; }
.md-doc hr { border: 0; border-top: 1px solid rgb(var(--c-zinc-800)); margin: 1.25em 0; }
.md-doc img { max-width: min(100%, 22rem); height: auto; display: block; margin: 0.75em 0; }

/* Collapsible "spoiler" sections in author markdown: a light-touch reveal,
 * short by default with the detail one click away. No heavy box: the summary
 * is a green link with a chevron, and open content sits under a green rule. */
.md-doc details { margin: 0.7em 0; }
.md-doc summary { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; list-style: none; padding: 0.35rem 0; font-weight: 600; font-size: 0.85rem; color: rgb(var(--c-emerald-400)); }
.md-doc summary::-webkit-details-marker { display: none; }
.md-doc summary::before { content: "\203A"; font-size: 1.05rem; line-height: 1; display: inline-block; transition: transform 0.15s ease; }
.md-doc details[open] > summary::before { transform: rotate(90deg); }
.md-doc summary:hover { color: rgb(var(--c-emerald-300)); }
.md-doc details[open] { border-left: 2px solid rgb(var(--c-emerald-500) / 0.5); padding-left: 0.85rem; margin-left: 0.15rem; }
.md-doc details[open] > :not(summary) { color: rgb(var(--c-zinc-400)); margin-top: 0.15em; }
.md-doc details[open] > :last-child { margin-bottom: 0.3em; }

/* Activity column on the project overview: denser than the full /activity page. */
.activity-feed-compact .activity-feed-log { font-size: 11px; line-height: 1.5; padding: 0.375rem 0.5rem; }
.activity-feed-compact .activity-feed-log > div { padding-top: 0.2rem; padding-bottom: 0.2rem; }

/* Native-select replacement chrome: our own chevron, inset from the right edge
 * by the same 0.5rem the fields use vertically. Apply with class app-select. */
select.app-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem 1rem;
    padding-right: 2.25rem;
}

/* Boosted-navigation progress: a slim bar under the top edge while any
 * htmx request initiated from <body> (hx-boost link/form) is in flight. */
body.htmx-request::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 40%;
    background: rgb(var(--c-emerald-500));
    z-index: 100;
    animation: nav-progress 1s ease-in-out infinite;
}
@keyframes nav-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250vw); }
}

/* Keyboard focus: a ring only when focus came from the keyboard, on every
 * link, button and field. Mouse clicks show nothing, as before. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgb(var(--c-emerald-400));
    outline-offset: 2px;
    border-radius: 2px;
}