/* CellHive.co dark theme.
 *
 * Keyed on html[data-theme="dark"], which assets/js/theme.js sets before the
 * first paint from the visitor's choice (localStorage 'ch-theme') or, until
 * they choose, the OS preference. Loaded after main.css and cellhive.css.
 *
 * Three layers:
 *   1. the --ch-* tokens cellhive.css paints with, re-valued for dark;
 *   2. Phantom's own literals (main.css is the untouched HTML5UP theme and
 *      has no tokens), overridden rule by rule;
 *   3. the few overlay/admin rules whose colour is not a token.
 *
 * Everything sits in @media screen so a dark page still prints light.
 * The ink panels (jail tiles, heroes, plan cards, the app promo strip) are
 * dark in both themes on purpose and are not touched here.
 */
@media screen {

/* ---------- 1. tokens ---------- */

html[data-theme="dark"] {
    color-scheme: dark;

    --ch-bg: #1c1622;
    --ch-surface: #272031;
    --ch-surface-2: #2f2839;
    --ch-surface-3: #3b3346;
    --ch-text: #e6e1ea;
    --ch-text-strong: #f4f1f6;
    --ch-heading: #f4f1f6;
    /* 7.4:1 on --ch-bg; the light floor is 4.5:1 on white. */
    --ch-muted: #b7afc0;
    --ch-line: rgba(255, 255, 255, 0.13);
    --ch-border: #4d4458;
    --ch-border-soft: #3b3346;
    --ch-line-soft: rgba(255, 255, 255, 0.1);
    --ch-line-strong: rgba(255, 255, 255, 0.2);
    --ch-hover: rgba(255, 255, 255, 0.07);
    --ch-shadow: rgba(0, 0, 0, 0.5);
    --ch-amber-tint: rgba(242, 169, 0, 0.16);
    /* Amber-dark is link/label text in places; lifted so it clears 4.5:1. */
    --ch-amber-dark: #e5a300;

    --ch-ok-bg: #1d3327;
    --ch-ok-line: #2f6b45;
    --ch-ok-fg: #93e2b0;
    --ch-ok-accent: #5fc281;
    --ch-err-bg: #3e2024;
    --ch-err-line: #7d3b40;
    --ch-err-fg: #f5a6a9;
    --ch-warn-bg: #3b2e15;
    --ch-warn-line: #7d6126;
    --ch-warn-fg: #f3cf7e;
    --ch-purple: #aaa5f7;
    --ch-indigo: #b7acf2;

    --ch-map-fill: #3b3346;
    --ch-map-stroke: #1c1622;
    --ch-map-boarded: #7f6b9c;
    --ch-map-boarded-hover: #9d88bd;
}

/* ---------- 2. Phantom (main.css) ---------- */

html[data-theme="dark"] body {
    background: var(--ch-bg);
    color: var(--ch-text);
}

html[data-theme="dark"] a {
    color: var(--ch-text);
    border-bottom-color: rgba(230, 225, 234, 0.45);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: var(--ch-heading);
}

html[data-theme="dark"] blockquote {
    border-left-color: var(--ch-border);
}

html[data-theme="dark"] code {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ch-border);
}

html[data-theme="dark"] hr {
    border-bottom-color: var(--ch-border);
}

/* Forms. Phantom draws inputs as a transparent box with a bottom rule. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] label {
    color: var(--ch-text);
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    border-bottom-color: var(--ch-border);
}

html[data-theme="dark"] ::placeholder {
    color: var(--ch-muted);
    opacity: 1;
}

html[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23b7afc0' /%3E%3C/svg%3E");
}

html[data-theme="dark"] select option {
    background: var(--ch-surface);
    color: var(--ch-text);
}

html[data-theme="dark"] input[type="checkbox"] + label,
html[data-theme="dark"] input[type="radio"] + label {
    color: var(--ch-text);
}

html[data-theme="dark"] input[type="checkbox"] + label:before,
html[data-theme="dark"] input[type="radio"] + label:before {
    background: var(--ch-surface);
    border-color: var(--ch-border);
}

html[data-theme="dark"] input[type="checkbox"]:checked + label:before,
html[data-theme="dark"] input[type="radio"]:checked + label:before {
    background: var(--ch-amber);
    border-color: var(--ch-amber);
    color: #1c1622;
}

html[data-theme="dark"] .box {
    border-color: var(--ch-border);
}

/* Tables. */
html[data-theme="dark"] table tbody tr {
    border-color: var(--ch-border);
}

html[data-theme="dark"] table tbody tr:nth-child(2n + 1) {
    background-color: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] table thead {
    border-bottom-color: var(--ch-border);
}

html[data-theme="dark"] table tfoot {
    border-top-color: var(--ch-border);
}

html[data-theme="dark"] table.alt tbody tr td {
    border-color: var(--ch-border);
}

/* Buttons: Phantom's outline button is a grey ring with grey text. */
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="reset"],
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] button,
html[data-theme="dark"] .button {
    box-shadow: inset 0 0 0 2px var(--ch-text);
    color: var(--ch-text) !important;
}

html[data-theme="dark"] input[type="submit"].primary,
html[data-theme="dark"] input[type="reset"].primary,
html[data-theme="dark"] input[type="button"].primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .button.primary {
    background-color: var(--ch-text);
    color: #1c1622 !important;
}

html[data-theme="dark"] input[type="submit"].primary:hover,
html[data-theme="dark"] button.primary:hover,
html[data-theme="dark"] .button.primary:hover {
    background-color: #f2849e;
}

/* Header controls: the hamburger is an SVG with #585858 strokes. */
html[data-theme="dark"] #header nav ul li a {
    background-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #header nav ul li a[href="#menu"]:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23e6e1ea%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E");
}

/* Slide-out menu and footer. */
html[data-theme="dark"] #menu {
    background: #16121b;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] #menu > .close:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23e6e1ea%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E");
}

html[data-theme="dark"] #footer {
    background-color: #16121b;
}

/* ---------- 3. overlay and admin rules without a token ---------- */

/* Mugshot skeleton while a card photo loads. */
html[data-theme="dark"] .ch-card-photo,
html[data-theme="dark"] .ch-card-photo.is-loading {
    background: linear-gradient(100deg, #2f2839 30%, #3b3346 50%, #2f2839 70%);
}

html[data-theme="dark"] .ch-badge-type {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .ch-modal .ch-announce-close:hover {
    background: var(--ch-surface-3);
}

/* The Google sign-in card keeps Google's light spec (white surface, dark
   text) — it is their brand asset, not ours. */

/* Admin shell (admin.css). */
html[data-theme="dark"] .ch-admin-panel-head,
html[data-theme="dark"] .ch-admin-page .ch-admin-section {
    background: var(--ch-surface);
}

html[data-theme="dark"] .ch-table-tools input[type="search"] {
    background: var(--ch-surface);
    border-color: var(--ch-border);
}

html[data-theme="dark"] .ch-sql {
    background: var(--ch-surface-2);
}

html[data-theme="dark"] .ch-sql .ch-sql-kw {
    color: var(--ch-indigo);
}

html[data-theme="dark"] .ch-sql .ch-sql-ph {
    color: var(--ch-err-fg);
}

/* Admin → Site → Traffic (admin-traffic.css). */
html[data-theme="dark"] .ch-stat-tile {
    background: var(--ch-surface-2);
    border-left-color: var(--ch-border);
}

html[data-theme="dark"] .ch-stat-tile.is-live {
    background: var(--ch-ok-bg);
    border-left-color: var(--ch-ok-accent);
}

html[data-theme="dark"] .ch-delta.is-up {
    color: var(--ch-ok-fg);
}

html[data-theme="dark"] .ch-delta.is-down {
    color: var(--ch-err-fg);
}

html[data-theme="dark"] .ch-sparkline-line {
    stroke: var(--ch-indigo);
}

html[data-theme="dark"] .ch-sparkline-dot {
    fill: var(--ch-indigo);
    stroke: var(--ch-surface);
}

html[data-theme="dark"] .ch-sparkline-peak {
    fill: var(--ch-surface);
    stroke: var(--ch-indigo);
}

html[data-theme="dark"] .ch-ga-bar span {
    background: var(--ch-indigo);
}

/* Claude console (claude-console.css) — its own --cc-* tokens, re-valued. */
html[data-theme="dark"] .ch-claude,
html[data-theme="dark"] .ch-claude[data-style="jarvis"],
html[data-theme="dark"] .ch-claude[data-style="tars"] {
    --cc-surface: #221c2b;
    --cc-sunken: #1c1622;
    --cc-line: rgba(255, 255, 255, 0.14);
    --cc-accent: #b7acf2;
    --cc-accent-soft: rgba(183, 172, 242, 0.16);
    --cc-good: #93e2b0;
    --cc-bad: #f5a6a9;
    --cc-warn: #f3cf7e;
    background: var(--ch-surface);
}

html[data-theme="dark"] .ch-claude[data-style="jarvis"] {
    --cc-accent: #6fc7e0;
    --cc-accent-soft: rgba(111, 199, 224, 0.16);
}

html[data-theme="dark"] .ch-claude-sound,
html[data-theme="dark"] .ch-claude-slash,
html[data-theme="dark"] .ch-claude-scopes,
html[data-theme="dark"] .ch-claude-keys-card {
    background: var(--ch-surface);
}

html[data-theme="dark"] .ch-claude-usagebar {
    background: var(--ch-surface-2);
}

html[data-theme="dark"] .ch-claude-sess-dot {
    background: var(--ch-border);
}

html[data-theme="dark"] .ch-claude-status {
    background: var(--ch-surface-3);
    color: var(--ch-text);
}

html[data-theme="dark"] .ch-claude-status.is-busy {
    color: var(--ch-warn-fg);
}

html[data-theme="dark"] .ch-claude-status.is-perm,
html[data-theme="dark"] .ch-claude-status.is-error,
html[data-theme="dark"] .ch-claude-notice.is-error,
html[data-theme="dark"] .ch-claude-tool.is-error,
html[data-theme="dark"] .ch-claude-perm {
    background: var(--ch-err-bg);
}

html[data-theme="dark"] .ch-claude-perm.is-resolved {
    border-color: var(--ch-border);
}

html[data-theme="dark"] .ch-claude-notice.is-init {
    background: var(--ch-ok-bg);
    color: var(--ch-ok-fg);
}

html[data-theme="dark"] .ch-claude-turns,
html[data-theme="dark"] .ch-claude-tool-sum,
html[data-theme="dark"] .ch-claude-notice {
    color: var(--ch-text);
}

} /* @media screen */