/* ============================================================ 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 → /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-text: var(--accent); --focus-ring: var(--accent); --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: #768ba2; /* ---- Type: --font-display comes from shared/tokens.css so the Grid uses the same self-hosted Archivo face on every device and under file://. A serif carries the scripture quotes for a more considered feel. ---- */ --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; --wr-accent-text: var(--wr-accent); --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; } /* ⛔ …and that line above put the NAV on the same level as the CARDS, which is the bug Sami found on his own hub on 2026-08-09: "it sits behind the card so I can't click sign out anyway." The nav is listed here for the same reason as the cards — to clear the grid-world at z-index 0 — but the cards come later in the DOM, so at equal z-index they paint over any nav dropdown, and sign-out lived inside one. Measured at 1280 on sami/home.html: 12 of 48 sampled points on the open panel actually belonged to the panel; the rest were .hc-card and its children, and the Sign out button could not be hit at all. 🔑 GRID-ONLY, WHICH IS WHY ONLY HE SAW IT — jerry, JP and austin are not on data-mode="grid", so their nav keeps member-nav.js's own z-index:1000 and has always worked. ⚠ member-nav.js ALSO carries `.home-subnav.has-open{z-index:20000}`, and that rule alone does NOT fix this: it is (0,2,0) against the (0,2,1) above, so the theme wins and the nav stays at 1. Measured — with only that fix, jerry went to 20000 and sami did not move. This rule is (0,3,1) and is the one that actually lands on a Grid hub. Resting state is deliberately left at 1. */ html[data-mode="grid"] .home-subnav.has-open { z-index: 20000; } /* 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; } } @media (max-width: 720px) { /* ⛔ THE 84px TOP MARGIN ABOVE IS A DESKTOP MEASUREMENT AND NOTHING EVER REDUCED IT. The 1040px query only flips direction and max-width, so on a 390px phone this opened an 84px band of bare background between the last header block and the first card — measured on production 2026-08-20, identically on jerry/home.html (y=346..430) and jerry/fitness.html (y=301..385). At y=320 the topmost element under a hit-test was `body` itself: nothing was there. It reads as "the page didn't load", which is close to how Sami described it. ⚠ It is a MARGIN, not a gap or a missing card — three different fixes, and the first two probes guessed wrong before the box model was read. Also drop the 32px side padding to 12px: on a 390px screen that padding sits on top of body's own 16px, so 96px — a full QUARTER of the screen — was going to gutter, leaving a 294px column. Desktop is untouched. */ html[data-mode="grid"] .home-cards { margin-top: var(--space-lg, 1.5rem); padding: 0 12px; } } /* --- 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; } } @media (max-width: 720px) { /* Same 84px desktop margin and same 32px gutter as `.home-cards` above — the two rules are twins and the fix has to be applied to both or the defect simply moves to the other page. See the note there. */ html[data-mode="grid"] .reef { margin-top: var(--space-lg, 1.5rem); padding: 0 12px; } } /* --- 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; } /* ⛔ REMOVED 2026-08-10 (HUB/5c-vi): .hc-tasks/.hc-task-top/.hc-task-name/.hc-log/ .hc-streak/.hc-dot/.hc-task-meta — the weekly-streak widget on Sami's home Reports card, whose four tasks were hardcoded literals. That slide now renders his open Flight Plan priorities as a plain .hc-list, so these had no emitter left. Deleted rather than left dead so the streak UI cannot be "restored" over a slide that is finally reading real data. ⚠ The .hc-task-* rules directly below were ALREADY emitter-less before this change — no page has ever rendered .hc-task-del/-add/-streak — so they are untouched here rather than swept in; that is a separate finding, not this one. */ /* 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-text); 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-text); 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); } /* Due Soon rollup tags (shared/due-soon.js) — the same calendar-category colours the planner uses, so a blue dot means Flight Plan on both surfaces. */ html[data-mode="grid"] .hc-list-dot[data-tag="flight"] { background: var(--cat-flight, #2f8bff); box-shadow: 0 0 6px var(--cat-flight, #2f8bff); } html[data-mode="grid"] .hc-list-dot[data-tag="body"] { background: var(--cat-body, #ff9a1f); box-shadow: 0 0 6px var(--cat-body, #ff9a1f); } html[data-mode="grid"] .hc-list-dot[data-tag="mind"] { background: var(--cat-mind, #ff5fa2); box-shadow: 0 0 6px var(--cat-mind, #ff5fa2); } /* Active Tasks slide: the dot carries IMPACT, Mission Control's own vocabulary. */ html[data-mode="grid"] .hc-list-dot[data-tag="needle"] { background: var(--impact-needle, #ffcc33); box-shadow: 0 0 6px var(--impact-needle, #ffcc33); } html[data-mode="grid"] .hc-list-dot[data-tag="standard"] { background: var(--impact-standard, #00f0ff); box-shadow: 0 0 6px var(--impact-standard, #00f0ff); } html[data-mode="grid"] .hc-list-dot[data-tag="minor"] { background: var(--impact-minor, #6a86a0); box-shadow: none; } /* Overdue is the one state on this card worth noticing, and it read identically to "3d" until it was looked at in a screenshot rather than asserted on. */ html[data-mode="grid"] .hc-list-meta[data-late] { color: var(--danger, #ff5470); font-weight: 700; } /* row quick-action: complete a priority / tick a due item without leaving home. 32px min box + focus ring is access-warden's tap-target bar (Wave 1a). Every var() names a token that exists in this file and carries its literal. */ html[data-mode="grid"] .hc-list-action { flex: none; min-width: 32px; min-height: 32px; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--border-active, #2c5a78); background: transparent; color: var(--accent-text, #19a7c4); font-size: 0.74rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; } html[data-mode="grid"] .hc-list-action:hover { background: var(--accent, #19a7c4); border-color: var(--accent, #19a7c4); color: var(--accent-contrast, #04141c); box-shadow: 0 0 10px var(--accent-glow, rgba(25, 167, 196, 0.5)); } html[data-mode="grid"] .hc-list-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } html[data-mode="grid"] .hc-list-empty { padding: 11px 0; color: var(--text-muted); font-style: italic; font-size: 0.9rem; line-height: 1.45; } 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