/* ============================================================
   tron.css  —  "THE GRID"  (Tron / neon-futuristic mode · SHARED · loads LAST)
   ------------------------------------------------------------
   The single active look for Sami's hub. Everything is scoped under
   html[data-mode="grid"], so the parked "sea" (immersive ocean) and
   "pastel" (blueberry dashboard) looks are left fully intact — this
   is purely additive. Revive the ocean world when the image-gen
   pipeline lands.

   Two layers, same discipline as modes.css:
     1. PALETTE  — re-point the token contract to the neon-grid set
                   (tron-cyan primary · neon-pink data · dark field).
                   Components read variables, so this recolors the
                   whole site at once.
     2. LAYOUT   — the card view: hide the sea furniture, ground the
                   floating cards into columns, and paint every panel
                   as a dark-glass data-panel with a neon rim + corner
                   brackets. The Grid background (grid-bg.js) rides
                   behind it all.

   Load order:  tokens.css → components.css → skins.css →
                <member>/theme.css → modes.css → THIS (last, wins).
============================================================ */

/* base: the Grid background is injected on every page but only shown
   in grid mode (costs nothing in the parked looks). */
.grid-world { display: none; }

/* ════════════════════════════════════════════════════════════
   1 · PALETTE  — the neon-grid token contract
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] {
    /* ---- Surfaces — near-black blue field, dark-glass panels ---- */
    --bg-base:        #05070e;
    --bg-card:        #0b1524;
    --bg-card-hover:  #0f1d30;
    --bg-glass:       rgba(8, 16, 28, 0.72);
    --bg-inset:       rgba(0, 240, 255, 0.04);

    /* ---- Borders → cyan-dim rims ---- */
    --border-subtle:  rgba(60, 180, 220, 0.14);
    --border-muted:   rgba(0, 240, 255, 0.22);
    --border-active:  rgba(0, 240, 255, 0.55);

    /* ---- Accent: tron-cyan (Sami's pick) ---- */
    --accent:         #00f0ff;
    --accent-bright:  #7ff9ff;
    --accent-muted:   #3fc9dd;             /* muted cyan for secondary labels */
    --accent-dim:     #0a3a44;
    --accent-glow:    rgba(0, 240, 255, 0.28);
    --accent-contrast:#04141c;             /* dark text on a cyan fill */

    /* ---- Secondary data accent: neon pink ---- */
    --data:           #ff2fd0;
    --data-muted:     #cc2aa6;
    --data-glow:      rgba(255, 47, 208, 0.30);

    /* ---- Semantic (neon-tuned, still legible) ---- */
    --success:        #2ee6a6;
    --danger:         #ff5470;
    --warning:        #ffcc33;

    /* ---- Text → cool white on the dark field ---- */
    --text-primary:   #d8ecff;
    --text-secondary: #8fb0cc;
    --text-muted:     #56708c;

    /* ---- Type: a characterful DISPLAY face for headings (font-upgrade, cosmetic).
       Prefers Space Grotesk if a member has it, else Bahnschrift — a geometric DIN-style
       sans that ships with Windows 10/11, so it's a real upgrade offline with no bundled
       font file, degrading gracefully to Segoe/system-ui elsewhere. A serif carries the
       scripture quotes for a more considered, scriptural feel. ---- */
    --font-display: 'Space Grotesk', 'Bahnschrift', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
    --font-quote:   Georgia, 'Times New Roman', 'Iowan Old Style', serif;

    /* ---- Zone / metric accents — cyan · pink · gold ---- */
    --zone-shallow-accent: #00f0ff;        /* reports  */
    --zone-mid-accent:     #ff2fd0;        /* habits   */
    --zone-deep-accent:    #ffcc33;        /* fitness  */
    --m-fitness:  var(--zone-deep-accent);
    --m-habits:   var(--zone-mid-accent);
    --m-reports:  var(--zone-shallow-accent);
    --m-sleep:    #b06bff;                 /* electric purple — still used by the Health Score card */

    /* ---- Calendar categories — neon versions of Sami's physical marker set
       (he has red/pink/orange/purple/green/blue markers, black/brown last-resort).
       5 assigned so paper + screen agree; red still held in reserve. ---- */
    --cat-body:     #ff9a1f;               /* orange — Fitness · Weight · Injury */
    --cat-mind:     var(--zone-mid-accent);/* pink   — Habits (already the site's pink) */
    --cat-business: #33ff8c;               /* green  — Trading */
    --cat-flight:   #2f8bff;               /* blue   — Flight Plan deadlines */
    --cat-events:   #b06bff;               /* purple — Events (Event Planner, CP-G) */
    --cat-reserve-red: #ff4d6d;            /* held for a future category */

    /* ---- Mission Control / impact tags ---- */
    --wr-accent:           #00f0ff;
    --card-shade:          rgba(0, 240, 255, 0.05);
    --impact-needle:       #ffcc33;        /* gold = urgent */
    --impact-needle-soft:  rgba(255, 204, 51, 0.16);
    --impact-standard:     #00f0ff;        /* cyan */
    --impact-standard-soft:rgba(0, 240, 255, 0.14);
    --impact-minor:        #6a86a0;        /* muted, recedes */
    --impact-minor-soft:   rgba(106, 134, 160, 0.14);
    --task-deadline: var(--impact-needle);
    --task-fuzzy:    var(--accent-muted);

    /* ---- Cel-shade outline → thin neon rim ---- */
    --card-outline:   rgba(0, 240, 255, 0.42);
    --card-outline-w: 1px;

    /* scene contract kept so nothing reads empty (scene itself hidden) */
    --particle-a: rgba(0, 240, 255, 0.10);
    --particle-b: rgba(255, 47, 208, 0.10);
    --dock-glow:  rgba(0, 240, 255, 0.70);

    /* ---- Fitness charts (shared/fitness-charts.js reads these) ----
       Already the neon palette the sea page uses — cyan primary, pink secondary. */
    --fc-a:          #00f0ff;
    --fc-b:          #ff2fd0;
    --fc-grid:       #1a3550;
    --fc-axis:       #4d6a86;
    --fc-dot-stroke: #05070e;
}

/* ════════════════════════════════════════════════════════════
   2 · THE GRID WORLD  — perspective floor + light-cycle trails
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] body {
    background:
        radial-gradient(130% 80% at 50% -12%, rgba(0, 120, 150, 0.12), transparent 60%),
        #05070e !important;
    padding-bottom: var(--space-2xl);
    overflow-x: hidden;
}
/* kill the drifting sea particle layer */
html[data-mode="grid"] body::before { display: none !important; }

html[data-mode="grid"] .grid-world {
    display: block;
    position: fixed; inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
/* the receding perspective grid floor (synthwave/Tron horizon) */
html[data-mode="grid"] .grid-floor {
    position: absolute; left: 50%; bottom: 0;
    width: 320%; height: 66vh;
    transform: translateX(-50%) perspective(340px) rotateX(68deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(to right,  rgba(0, 240, 255, 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.16) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 82%);
    mask-image: linear-gradient(to top, #000 0%, transparent 82%);
    animation: gridScroll 6s linear infinite;
}
@keyframes gridScroll { from { background-position: 0 0; } to { background-position: 0 64px; } }

/* faint horizon glow where the floor meets the dark */
html[data-mode="grid"] .grid-horizon {
    position: absolute; left: 0; right: 0; bottom: 34vh; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-glow) 30%, var(--data-glow) 70%, transparent);
    filter: blur(3px); opacity: 0.55;
}

/* the light-cycles — travelling neon ribbons on right-angle routes */
html[data-mode="grid"] .grid-trails { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-mode="grid"] .trail-base   { fill: none; stroke: rgba(0, 240, 255, 0.045); stroke-width: 2; }
html[data-mode="grid"] .trail-ribbon {
    fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 150 4000;
    filter: drop-shadow(0 0 5px currentColor);
}
html[data-mode="grid"] .trail-ribbon.r-cyan  { stroke: #00f0ff; color: #00f0ff; animation: ribbonRun 9s  linear infinite; }
html[data-mode="grid"] .trail-ribbon.r-cyan2 { stroke: #00f0ff; color: #00f0ff; animation: ribbonRun 12s linear infinite; }
html[data-mode="grid"] .trail-ribbon.r-pink  { stroke: #ff2fd0; color: #ff2fd0; animation: ribbonRun 11s linear infinite; }
html[data-mode="grid"] .trail-ribbon.r-pink2 { stroke: #ff2fd0; color: #ff2fd0; animation: ribbonRun 14s linear infinite; }
/* offset moves by exactly the dash+gap (4150) so the loop is seamless on any path length */
@keyframes ribbonRun { from { stroke-dashoffset: 4150; } to { stroke-dashoffset: 0; } }

/* ════════════════════════════════════════════════════════════
   3 · LAYOUT  — hide the sea furniture, ground the floating cards
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] .sky-scene,
html[data-mode="grid"] .sea-surface,
html[data-mode="grid"] .waterline,
html[data-mode="grid"] .sky-island,
html[data-mode="grid"] .zone-depthmark,
html[data-mode="grid"] .zone-meta,
html[data-mode="grid"] .dive-divider,
html[data-mode="grid"] .school,
html[data-mode="grid"] .deep-watermark { display: none !important; }

/* stop floating / bobbing — panels are grounded */
html[data-mode="grid"] .metric-panel,
html[data-mode="grid"] .wr-panel,
html[data-mode="grid"] .buoy-svg,
html[data-mode="grid"] .critter,
html[data-mode="grid"] .glass-card { animation: none !important; }

/* HOME: hide the sea dive entirely; show the card dashboard */
html[data-mode="grid"] .surface-zone,
html[data-mode="grid"] .abyss-dock,
html[data-mode="grid"] .dive { display: none !important; }

/* keep real content above the grid-world (z-index:0) */
html[data-mode="grid"] .home-subnav,
html[data-mode="grid"] .home-cards,
html[data-mode="grid"] .reef,
html[data-mode="grid"] .mission-control,
html[data-mode="grid"] .planning-stage,
html[data-mode="grid"] .page-tabs { position: relative; z-index: 1; }

/* theme.css puts header.hub-header and main at the SAME z-index:1 (both just
   "above the particle layer") — with main coming later in the DOM, its whole
   subtree paints over any header-anchored dropdown (the 🔔 notif panel, CP-H)
   at equal z-index. Bump the header one level above main so its own popovers
   render on top, without touching main's z-index for anything else. */
html[data-mode="grid"] .hub-header { z-index: 2; }

/* header: transparent over the Grid, thin neon rule under it */
html[data-mode="grid"] .hub-header {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
}

/* park the mode pill — grid is the only active look for now */
html[data-mode="grid"] .mode-seg { display: none; }

/* --- HOME card columns (mirrors the pastel arrangement, Tron-painted) --- */
html[data-mode="grid"] .home-cards {
    display: flex; align-items: flex-start;
    gap: var(--space-xl, 2rem);
    max-width: 1340px; margin: 84px auto 0;
    padding: 0 var(--space-xl, 2rem);
}
html[data-mode="grid"] .hc-col {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: var(--space-lg, 1.5rem);
}
@media (max-width: 1040px) {
    html[data-mode="grid"] .home-cards { flex-direction: column; max-width: 640px; }
}

/* --- FITNESS reef → two grounded columns --- */
html[data-mode="grid"] .reef {
    position: static; min-height: 0;
    max-width: 1340px; margin: 84px auto 0;
    padding: 0 var(--space-xl, 2rem);
    display: flex; align-items: flex-start; gap: var(--space-xl, 2rem);
}
html[data-mode="grid"] .fit-col {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: var(--space-lg, 1.5rem);
}
@media (max-width: 1040px) {
    html[data-mode="grid"] .reef { flex-direction: column; max-width: 640px; }
}

/* --- REPORTS mission control: a tidy centered column --- */
html[data-mode="grid"] .mission-control {
    max-width: 1100px; margin: var(--space-xl) auto var(--space-2xl);
    padding: 0 var(--space-lg);
}
html[data-mode="grid"] .planning-stage {
    background: rgba(7, 14, 26, 0.6);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════
   4 · THE DATA-PANEL  — dark glass · neon rim · corner brackets
   (home cards · mission-control panels · fitness glass cards)
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] .hc-card,
html[data-mode="grid"] .wr-panel,
html[data-mode="grid"] .metric-panel,
html[data-mode="grid"] .glass-card {
    /* two corner brackets (top-left + bottom-right) painted with layered
       gradients — no pseudo-element needed, so they never clash — over a
       dark-glass fill. */
    background:
        linear-gradient(var(--accent), var(--accent)) top left     / 16px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) top left     / 2px 16px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom right / 16px 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) bottom right / 2px 16px no-repeat,
        linear-gradient(160deg, rgba(12, 26, 44, 0.92), rgba(7, 14, 26, 0.92));
    border: 1px solid var(--border-muted);
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(0, 240, 255, 0.04),
        0 18px 44px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(0, 240, 255, 0.06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
html[data-mode="grid"] .hc-card:hover,
html[data-mode="grid"] .wr-panel:hover,
html[data-mode="grid"] .metric-panel:hover,
html[data-mode="grid"] .glass-card:hover {
    border-color: var(--border-active);
    box-shadow:
        0 0 0 1px var(--accent-glow),
        0 20px 52px rgba(0, 0, 0, 0.62),
        0 0 26px var(--accent-glow);
}
/* the fitness card keeps its top accent bar — recolored cyan by the token */
html[data-mode="grid"] .glass-card::before { background: var(--accent-bright); opacity: 0.85; }
html[data-mode="grid"] .hc-card { padding: var(--space-lg) var(--space-lg) var(--space-md); display: flex; flex-direction: column; }

/* fitness reef cards are position:absolute (free-roam) in sea mode — ground them
   into the flex columns. !important beats the per-card #cardSession/#cardWeight/…
   ID rules that set top/left/width/min-height. */
html[data-mode="grid"] .glass-card {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    transform: none !important;
}

/* ════════════════════════════════════════════════════════════
   5 · HOME CARD COMPONENTS  (Tron-native — these classes have no
   base style outside a card view)
   ════════════════════════════════════════════════════════════ */

/* nav — small neon uppercase links, top-right under the header rule */
html[data-mode="grid"] .home-subnav {
    display: block; text-align: right; max-width: 1200px;
    margin: calc(5px - var(--space-xl, 2rem)) auto 0;
    padding: 0 var(--space-lg);
    font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-muted);
}
html[data-mode="grid"] .home-subnav a {
    color: var(--accent-muted); text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.12em;
    transition: color var(--t-fast) ease, text-shadow var(--t-fast) ease;
}
html[data-mode="grid"] .home-subnav a:hover,
html[data-mode="grid"] .home-subnav a[aria-current="page"] {
    color: var(--accent-bright); text-shadow: 0 0 8px var(--accent-glow);
}
html[data-mode="grid"] .home-subnav .hs-sep { opacity: 0.4; margin: 0 5px; color: var(--accent-muted); }

/* card header — title + drop-down "Open ▸" link, neon rule under */
html[data-mode="grid"] .hc-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding-bottom: 6px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}
html[data-mode="grid"] .hc-title {
    font-size: 0.74rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--text-primary);
}
html[data-mode="grid"] .hc-link {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; text-decoration: none; color: var(--accent-muted);
}
html[data-mode="grid"] .hc-link:hover { color: var(--accent-bright); text-shadow: 0 0 8px var(--accent-glow); }

/* slide sub-head */
html[data-mode="grid"] .hc-slide-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 8px;
}
html[data-mode="grid"] .hc-metric-label {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--accent-muted);
}
html[data-mode="grid"] .hc-perf-select {
    font: inherit; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-primary);
    background: var(--bg-card); border: 1px solid var(--border-muted);
    border-radius: 999px; padding: 3px 8px; cursor: pointer;
}

/* carousel plumbing (shared contract from carousel.js) */
html[data-mode="grid"] .cz { display: flex; flex-direction: column; flex: 1; }
html[data-mode="grid"] .cz-track { position: relative; flex: 1; }
html[data-mode="grid"] .cz-slide { display: none; }
html[data-mode="grid"] .cz-slide.active { display: block; animation: gzFade var(--t-med, 0.25s) ease; }
@keyframes gzFade { from { opacity: 0; } to { opacity: 1; } }
html[data-mode="grid"] .cz-nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; margin-top: auto; }
html[data-mode="grid"] .cz-arrow {
    border: none; background: none; cursor: pointer; color: var(--accent-muted);
    font-size: 0.7rem; line-height: 1; padding: 2px 4px; opacity: 0.6;
    transition: opacity var(--t-fast) ease, transform var(--t-fast) ease, color var(--t-fast) ease;
}
html[data-mode="grid"] .cz-arrow:hover { opacity: 1; transform: scale(1.15); color: var(--accent-bright); }
html[data-mode="grid"] .cz-dots { display: flex; gap: 5px; }
html[data-mode="grid"] .cz-dot {
    width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: var(--accent-muted); opacity: 0.4;
    transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
}
html[data-mode="grid"] .cz-dot.active { opacity: 1; transform: scale(1.25); background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* charts + legend */
html[data-mode="grid"] .hc-chart { width: 100%; display: block; }
html[data-mode="grid"] .hc-chart-perf { height: 300px; }
html[data-mode="grid"] .hc-chart-weight { height: 270px; }
html[data-mode="grid"] .hc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.72rem; color: var(--text-secondary); }
html[data-mode="grid"] .hc-lg { display: inline-flex; align-items: center; gap: 5px; }
html[data-mode="grid"] .hc-lg-dot { width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 6px currentColor; }
html[data-mode="grid"] .hc-lg-demo { font-style: italic; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; }

/* fitness score ring (conic fill set inline by JS) */
html[data-mode="grid"] .hc-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 0 10px; flex: 1; }
html[data-mode="grid"] .hc-score-ring {
    position: relative; width: 200px; height: 200px; border-radius: 50%;
    background: conic-gradient(var(--accent) 0%, var(--bg-inset) 0);
    filter: drop-shadow(0 0 12px var(--accent-glow));
}
html[data-mode="grid"] .hc-score-ring::before {
    content: ""; position: absolute; inset: 15px; border-radius: 50%;
    background: #070d18; box-shadow: inset 0 0 18px rgba(0, 240, 255, 0.10);
}
html[data-mode="grid"] .hc-score-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
html[data-mode="grid"] .hc-score-val { font-family: var(--font-mono, monospace); font-size: 3.4rem; font-weight: 800; color: var(--accent-bright); line-height: 1; text-shadow: 0 0 16px var(--accent-glow); }
html[data-mode="grid"] .hc-score-max { font-family: var(--font-mono, monospace); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--text-muted); }
html[data-mode="grid"] .hc-score-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }

/* tasks — weekly activity dots */
html[data-mode="grid"] .hc-tasks { display: flex; flex-direction: column; gap: 20px; }
html[data-mode="grid"] .hc-task-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
html[data-mode="grid"] .hc-task-name { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); }
html[data-mode="grid"] .hc-log {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--border-active); background: transparent; color: var(--accent);
    font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
html[data-mode="grid"] .hc-log:hover { transform: scale(1.1); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
html[data-mode="grid"] .hc-log.done { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 12px var(--accent-glow); }
html[data-mode="grid"] .hc-streak { display: flex; gap: 7px; }
html[data-mode="grid"] .hc-dot {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; font-family: var(--font-mono, monospace);
    background: var(--bg-inset); border: 1px solid var(--border-subtle); color: var(--text-muted);
}
html[data-mode="grid"] .hc-dot.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 8px var(--accent-glow); }
html[data-mode="grid"] .hc-dot.today { box-shadow: 0 0 0 2px #05070e, 0 0 0 3.5px var(--accent); }
html[data-mode="grid"] .hc-task-meta { margin-top: 8px; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-muted); }
/* task-progress pass 2 — cross-week streak flame + add/remove goal controls */
html[data-mode="grid"] .hc-task { position: relative; }
html[data-mode="grid"] .hc-task-streak { color: var(--warning); font-weight: 700; }
html[data-mode="grid"] .hc-task-del {
    position: absolute; top: -2px; right: 34px; border: none; background: none;
    color: var(--text-muted); cursor: pointer; font-size: 0.72rem; line-height: 1; padding: 2px;
    opacity: 0; transition: opacity var(--t-fast) ease, color var(--t-fast) ease;
}
html[data-mode="grid"] .hc-task:hover .hc-task-del,
html[data-mode="grid"] .hc-task-del:focus-visible { opacity: 0.6; }
html[data-mode="grid"] .hc-task-del:hover { opacity: 1; color: var(--danger); }
html[data-mode="grid"] .hc-task-addwrap { margin-top: 4px; }
html[data-mode="grid"] .hc-task-add {
    width: 100%; border: 1px dashed var(--border-muted); background: transparent;
    color: var(--accent-muted); font: inherit; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; padding: 9px; border-radius: var(--radius-md);
    cursor: pointer; transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
html[data-mode="grid"] .hc-task-add:hover { border-color: var(--accent); color: var(--accent-bright); }
html[data-mode="grid"] .hc-task-addform { display: flex; gap: 6px; align-items: center; }
/* explicit-display class beats the [hidden] attribute's UA display:none — same gotcha
   class as the war-room / time-picker fixes; keep the collapsed form actually hidden. */
html[data-mode="grid"] .hc-task-addform[hidden] { display: none !important; }
html[data-mode="grid"] .hc-task-addform input {
    flex: 1; min-width: 0; background: var(--bg-inset); border: 1px solid var(--border-muted);
    border-radius: var(--radius-md); color: var(--text-primary); font: inherit; font-size: 0.84rem; padding: 7px 9px;
}
html[data-mode="grid"] .hc-task-addform input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
html[data-mode="grid"] .hc-task-addform button {
    flex: none; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-muted);
    background: transparent; cursor: pointer; font-size: 0.9rem; line-height: 1;
    transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
html[data-mode="grid"] .hc-task-addform .ta-ok { color: var(--accent); border-color: var(--border-active); }
html[data-mode="grid"] .hc-task-addform .ta-ok:hover { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 10px var(--accent-glow); }
html[data-mode="grid"] .hc-task-addform .ta-cancel { color: var(--text-muted); }
html[data-mode="grid"] .hc-task-addform .ta-cancel:hover { color: var(--danger); border-color: var(--danger); }
/* goal-plan-breakdown — milestone panel per goal */
html[data-mode="grid"] .hc-goal-btn {
    flex: none; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%;
    border: 1px solid var(--border-muted); background: transparent; cursor: pointer;
    font-size: 0.82rem; line-height: 1; opacity: 0.55;
    transition: opacity var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
html[data-mode="grid"] .hc-goal-btn:hover { opacity: 1; border-color: var(--accent-muted); }
html[data-mode="grid"] .hc-goal-btn.has-plan { opacity: 1; border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
html[data-mode="grid"] .hc-goal-btn[aria-expanded="true"] { background: rgba(0,240,255,0.08); }
html[data-mode="grid"] .hc-task-top { display: flex; align-items: center; }
html[data-mode="grid"] .hc-task-top .hc-task-name { flex: 1; }
html[data-mode="grid"] .hc-task-plan-meta { color: var(--accent-bright); font-weight: 700; }
html[data-mode="grid"] .hc-plan { margin-top: 12px; padding: 12px; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); background: rgba(0,240,255,0.03); }
html[data-mode="grid"] .hc-plan-bar { height: 5px; border-radius: 3px; background: var(--bg-inset); overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border-subtle); }
html[data-mode="grid"] .hc-plan-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--data)); box-shadow: 0 0 8px var(--accent-glow); transition: width 0.35s ease; }
html[data-mode="grid"] .hc-plan-hint { font-size: 0.76rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; font-style: italic; }
html[data-mode="grid"] .hc-plan-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
html[data-mode="grid"] .hc-ms { display: flex; align-items: center; gap: 9px; }
html[data-mode="grid"] .hc-ms-check {
    flex: none; width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--border-active); background: transparent; color: var(--accent-contrast);
    font-size: 0.72rem; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center;
}
html[data-mode="grid"] .hc-ms-check.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
html[data-mode="grid"] .hc-ms-text { flex: 1; font-size: 0.84rem; color: var(--text-primary); line-height: 1.4; }
html[data-mode="grid"] .hc-ms-text.done { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--accent-muted); }
html[data-mode="grid"] .hc-ms-del { flex: none; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.72rem; opacity: 0; transition: opacity var(--t-fast) ease, color var(--t-fast) ease; }
html[data-mode="grid"] .hc-ms:hover .hc-ms-del { opacity: 0.6; }
html[data-mode="grid"] .hc-ms-del:hover { opacity: 1; color: var(--danger); }
html[data-mode="grid"] .hc-plan-add { display: flex; gap: 6px; }
html[data-mode="grid"] .hc-plan-add input {
    flex: 1; min-width: 0; background: var(--bg-inset); border: 1px solid var(--border-muted);
    border-radius: var(--radius-md); color: var(--text-primary); font: inherit; font-size: 0.82rem; padding: 6px 9px;
}
html[data-mode="grid"] .hc-plan-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
html[data-mode="grid"] .hc-ms-add {
    flex: none; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-active);
    background: transparent; color: var(--accent); cursor: pointer; font-size: 0.9rem; line-height: 1;
}
html[data-mode="grid"] .hc-ms-add:hover { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 10px var(--accent-glow); }

/* generic lists (Due Soon · Parking Lot) */
html[data-mode="grid"] .hc-list { display: flex; flex-direction: column; }
html[data-mode="grid"] .hc-list-row {
    display: flex; align-items: center; gap: 12px; font-size: 0.96rem; color: var(--text-primary);
    padding: 11px 0; border-bottom: 1px solid var(--border-subtle);
}
html[data-mode="grid"] .hc-list-row:last-child { border-bottom: none; }
html[data-mode="grid"] .hc-list-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
html[data-mode="grid"] .hc-list-dot[data-tag="fitness"] { background: var(--m-fitness); }
html[data-mode="grid"] .hc-list-dot[data-tag="reports"] { background: var(--data); }
html[data-mode="grid"] .hc-list-dot[data-tag="event"]   { background: var(--accent); }
html[data-mode="grid"] .hc-list-dot[data-tag="finance"] { background: var(--success); }
html[data-mode="grid"] .hc-list-bullet { color: var(--accent-muted); flex: none; font-size: 0.7rem; }
html[data-mode="grid"] .hc-list-label { flex: 1; }
html[data-mode="grid"] .hc-list-meta { flex: none; font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--accent-muted); letter-spacing: 0.04em; }

/* quotes */
html[data-mode="grid"] .hc-quote-pair { display: flex; flex-direction: column; gap: 34px; min-height: 200px; justify-content: center; padding: 6px 4px; }
html[data-mode="grid"] .hc-quote { margin: 0; display: flex; flex-direction: column; gap: 10px; }
html[data-mode="grid"] .hc-quote-text { margin: 0; font-size: 1.14rem; line-height: 1.55; color: var(--text-secondary); }
html[data-mode="grid"] .hc-quote-src { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-muted); }

/* ── per-card carousel floors — hold each card at its TALLEST slide so cycling
   between slides of different heights never shrinks the card (which also stopped
   the page scroll from jumping). Fitness holds the big perf-graph size on every
   slide; Reports spreads a short task list into the space. ── */
html[data-mode="grid"] .hc-fitness .cz-track { min-height: 360px; }
html[data-mode="grid"] .hc-reports .cz-track { min-height: 380px; }
html[data-mode="grid"] .hc-reports .hc-tasks { min-height: 360px; justify-content: space-between; }
html[data-mode="grid"] .hc-systems .cz-track { min-height: 320px; }

/* ── whole card header is a link (title → "Open ▸" all clickable) ── */
html[data-mode="grid"] a.hc-head { text-decoration: none; cursor: pointer; }
html[data-mode="grid"] a.hc-head:hover .hc-title,
html[data-mode="grid"] a.hc-head:hover .hc-link { color: var(--accent-bright); text-shadow: 0 0 8px var(--accent-glow); }

/* ── Workshop card · habit tap-to-log rows (compact port of the Habits toggles) ── */
html[data-mode="grid"] .hc-habits { display: flex; flex-direction: column; gap: 9px; }
html[data-mode="grid"] .hc-hab {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: rgba(0,240,255,0.03); border: 1px solid var(--border-muted); border-radius: var(--radius-md);
    padding: 9px 12px; cursor: pointer; color: var(--text-primary); font: inherit; text-align: left;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
html[data-mode="grid"] .hc-hab:hover { border-color: var(--accent-muted); }
html[data-mode="grid"] .hc-hab-ic { font-size: 1.05rem; flex: none; }
html[data-mode="grid"] .hc-hab-name { flex: 1; font-size: 0.88rem; font-weight: 600; }
html[data-mode="grid"] .hc-hab-check {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--border-active); display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 0.82rem; font-weight: 800;
}
html[data-mode="grid"] .hc-hab.on { border-color: var(--accent); background: rgba(0,240,255,0.07); }
html[data-mode="grid"] .hc-hab.on .hc-hab-check { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 10px var(--accent-glow); }

/* ── Mastermind birds-eye card ── */
html[data-mode="grid"] .mm-body { display: flex; flex-direction: column; gap: 16px; padding: 8px 2px; }
html[data-mode="grid"] .mm-member { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html[data-mode="grid"] .mm-arrow {
    flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border-muted); background: transparent; color: var(--accent-muted);
    font-size: 0.8rem; line-height: 1; transition: border-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
html[data-mode="grid"] .mm-arrow:hover { border-color: var(--accent); color: var(--accent-bright); box-shadow: 0 0 10px var(--accent-glow); }
html[data-mode="grid"] .mm-id { display: flex; align-items: baseline; gap: 9px; }
html[data-mode="grid"] .mm-name { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; color: var(--text-primary); }
html[data-mode="grid"] .mm-tag { font-size: 0.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; padding: 2px 8px; border-radius: 999px; }
html[data-mode="grid"] .mm-tag.you { color: var(--accent-contrast); background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
html[data-mode="grid"] .mm-tag.pending { color: var(--text-muted); border: 1px solid var(--border-subtle); }
html[data-mode="grid"] .mm-tag:empty { display: none; }
html[data-mode="grid"] .mm-metric { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; }
html[data-mode="grid"] .mm-val { font-family: var(--font-mono, monospace); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--accent-bright); text-shadow: 0 0 16px var(--accent-glow); }
html[data-mode="grid"] .mm-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-muted); }
html[data-mode="grid"] .mm-status { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; text-align: center; min-height: 2.2em; }
html[data-mode="grid"] .mm-live { color: var(--success); }
html[data-mode="grid"] .mm-pending { color: var(--warning); }
html[data-mode="grid"] .mm-dots { display: flex; justify-content: center; gap: 8px; }
html[data-mode="grid"] .mm-dot {
    width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer; border: none;
    background: var(--accent-muted); opacity: 0.4; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
html[data-mode="grid"] .mm-dot:hover { opacity: 0.7; }
html[data-mode="grid"] .mm-dot.active { opacity: 1; transform: scale(1.3); background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* shortcut dock — a fixed neon-glass rail on the right edge */
html[data-mode="grid"] .hc-rail {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
    z-index: 60; padding: 10px; border-radius: 8px;
    background: rgba(8, 16, 28, 0.6);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--border-muted);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(0, 240, 255, 0.06);
}
html[data-mode="grid"] .hc-tile {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; padding: 0; border-radius: 6px;
    background: rgba(0, 240, 255, 0.05); border: 1px solid var(--border-muted);
    color: var(--accent-bright); font: inherit; cursor: pointer;
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, border-color var(--t-fast) ease;
}
html[data-mode="grid"] .hc-tile:hover { transform: translateX(-3px); border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
html[data-mode="grid"] .hc-tile-icon { font-size: 1.5rem; line-height: 1; }
html[data-mode="grid"] .hc-tile-label { display: none; }
html[data-mode="grid"] .hc-tile-empty { cursor: default; opacity: 0.4; background: transparent; border-style: dashed; box-shadow: none; }
html[data-mode="grid"] .hc-tile-empty:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); }
/* count badge — how many roadmap items are still open (in progress + planned + post-ship) */
html[data-mode="grid"] .hc-tile-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--accent); color: var(--accent-contrast);
    font-size: 0.6rem; font-weight: 800;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 0 8px var(--accent-glow);
}
html[data-mode="grid"] .hc-tile.has-badge .hc-tile-badge { display: flex; }

/* ════════════════════════════════════════════════════════════
   6 · REPORTS  — mission-control polish (panels adapt via tokens; a few
   neon accents on top)
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] .wr-title { color: var(--text-primary); }
html[data-mode="grid"] .page-tab.active { color: var(--accent-bright); }
html[data-mode="grid"] .wr-empty-emoji { filter: drop-shadow(0 0 8px var(--accent-glow)); }

/* impact-tier-recolor — the 🎨 picker in the impact group (applies site-wide via impact-colors.js) */
html[data-mode="grid"] .tier-colors { position: relative; display: inline-flex; margin-left: 6px; }
/* recolor must work even while the impact group is locked (routine selected) */
html[data-mode="grid"] #impactPicker.is-locked .tier-colors { opacity: 1 !important; pointer-events: auto !important; filter: none !important; }
html[data-mode="grid"] .tier-colors-btn {
    border: 1px solid var(--border-muted); background: transparent; color: var(--accent-muted);
    cursor: pointer; border-radius: 6px; width: 28px; height: 24px; font-size: 0.85rem; line-height: 1;
    transition: border-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
html[data-mode="grid"] .tier-colors-btn:hover { border-color: var(--accent); color: var(--accent-bright); box-shadow: 0 0 8px var(--accent-glow); }
html[data-mode="grid"] .tier-colors-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    display: flex; flex-direction: column; gap: 8px; min-width: 194px; padding: 12px; border-radius: 8px;
    background: linear-gradient(160deg, #0c1a2c, #060c18); border: 1px solid var(--border-active);
    box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 0 20px var(--accent-glow);
}
html[data-mode="grid"] .tier-colors-pop[hidden] { display: none; }   /* beat the display:flex above */
html[data-mode="grid"] .tc-head { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-muted); }
html[data-mode="grid"] .tc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--text-secondary); }
html[data-mode="grid"] .tc-row input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--border-muted); border-radius: 5px; background: none; cursor: pointer; }
html[data-mode="grid"] .tc-reset {
    margin-top: 2px; border: 1px solid var(--border-muted); background: transparent; color: var(--accent-muted);
    font: inherit; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 6px; border-radius: 6px; cursor: pointer;
}
html[data-mode="grid"] .tc-reset:hover { border-color: var(--accent); color: var(--accent-bright); }

/* ════════════════════════════════════════════════════════════
   7 · FITNESS  — repaint the inline navy form chrome for the dark
   Grid (the page CSS hardcodes rgba(2,14,24,…) which pastel fixed
   for light; grid uses a cyan-tinted dark instead).
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] .f-input,
html[data-mode="grid"] select.f-input,
html[data-mode="grid"] .set-in,
html[data-mode="grid"] .pd-cal input {
    background: rgba(0, 240, 255, 0.045) !important;
    color: var(--text-primary);
    border-color: var(--border-muted);
}
/* the closed <select> is themed above; Chromium (Brave) also lets us reach the
   open <option> list directly — without this the dropdown falls back to the
   OS's light popup regardless of the select's own background. */
html[data-mode="grid"] select.f-input option,
html[data-mode="grid"] .hc-perf-select option {
    background: var(--bg-card, #0b1524);
    color: var(--text-primary);
}
html[data-mode="grid"] .f-input::placeholder,
html[data-mode="grid"] .set-in::placeholder { color: var(--text-muted); }
html[data-mode="grid"] .split-dd-menu,
html[data-mode="grid"] .ex-autocomplete {
    background: rgba(7, 14, 26, 0.98) !important;
    border-color: var(--border-active);
}
html[data-mode="grid"] .ww-stat,
html[data-mode="grid"] .split-dd-trigger,
html[data-mode="grid"] .flip-toggle,
html[data-mode="grid"] .scan-item,
html[data-mode="grid"] .pd-row {
    background: rgba(0, 240, 255, 0.045) !important;
}

/* ════════════════════════════════════════════════════════════
   7.5 · UTILITY / TRACKER PAGES  — maintenance · parking · habits ·
   wiki. A grounded page shell + responsive card grid that reuses
   the .hc-card data-panel. (Selectors harmless on other pages.)
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] .grid-page {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 56px auto 0;
    padding: 0 var(--space-xl, 2rem) var(--space-2xl);
}
html[data-mode="grid"] .page-head-2 {
    margin: var(--space-2xl) 0 var(--space-md);
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.18em; color: var(--accent-muted);
}
html[data-mode="grid"] .grid-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg, 1.5rem);
}
html[data-mode="grid"] .grid-page .hc-card { padding: var(--space-lg); }

/* ════════════════════════════════════════════════════════════
   7.9 · TYPE  — font-upgrade (cosmetic): a characterful display face on
   headings + brand, a serif on the scripture quotes. Mono numerals on the
   score ring / mastermind value stay mono on purpose (the "serious dashboard"
   read), so they're deliberately excluded here.
   ════════════════════════════════════════════════════════════ */
html[data-mode="grid"] .header-title h1,
html[data-mode="grid"] .hc-title,
html[data-mode="grid"] .page-head-2,
html[data-mode="grid"] .mm-name,
html[data-mode="grid"] .ob-title,
html[data-mode="grid"] .hc-quote-src { font-family: var(--font-display); }
html[data-mode="grid"] .hc-quote-text { font-family: var(--font-quote); font-style: italic; }

/* ════════════════════════════════════════════════════════════
   8 · ACCESSIBILITY  — respect reduced motion (grid-bg.js already
   drops the light-cycles; freeze the floor scroll too)
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html[data-mode="grid"] .grid-floor,
    html[data-mode="grid"] .trail-ribbon { animation: none !important; }
}

@media (max-width: 720px) {
    html[data-mode="grid"] .hc-rail { display: none; }
}