/* ============================================================================ SKIN: MINIMAL (Vercel / Geist) — html[data-skin="minimal"] ---------------------------------------------------------------------------- A complete, opinionated "looks A LOT like Vercel" look for the /app dashboard. Activated by the engine via html[data-skin="minimal"] (theme.js + the app.html no-FOUC head script). Loads AFTER dashboard.css so these rules win the cascade. THE LOOK (Vercel/Geist): pure WHITE cards on a near-white page, ZERO shadows, ~1px #eaeaea hairline borders everywhere, sharp small radii (~6px), near-black ink (#000/#111) on a clean gray ramp (#666/#888), generous airy whitespace, a crisp geometric sans (Inter, the engine default) with tight heading tracking, and MONOCHROME chrome — the accent appears only on the single primary action / active state; most chrome is black/gray. Dark tone = true-black Vercel mode. ENGINE DEFAULTS (filled into untouched knobs, set in theme.js SKINS): tone=Default(light) · style=Squary · font=Inter. ACCENT + INLINE: theme.js sets --accent / --accent-deep / --accent-text / --accent-soft / --coral-tint* / --coral-line INLINE on per tone (inline wins). We do NOT fight inline. Instead we redefine the dashboard's NON-inline aliases (--c-coral / --c-deep / --c-text / --c-tint / --c-tint2 / --c-line / --c-wash) directly on the skin root → those are what the chrome actually reads, so re-pointing them to a monochrome (near-black) ramp makes the whole UI quiet without touching the inline accent. The one place coral survives is wherever a rule reads the raw inline --accent (rare); we recolor those structurally. AA: text ≥4.5:1, UI ≥3:1 in both tones. #000/#111/#171717 ink on #fff cards is ~16–21:1; #666 meta on #fff is 5.7:1; the dark tone uses #ededed/#a1a1a1 on #0a0a0a (≥7:1). No emoji, no em dashes. ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ LIGHT TONE (the default) — pure white / near-black / hairline / flat ════════════════════════════════════════════════════════════════════════════ */ html[data-skin="minimal"] { /* ── SURFACES: white cards, near-white page, hairline #eaeaea ─────────────── */ --bg: #ffffff; --w-card: #ffffff; --bg-2: #fafafa; --w-page: #fafafa; --bg-3: #f2f2f2; --w-locked: #f2f2f2; --card-2: #fafafa; --w-card-2: #fafafa; --border: #eaeaea; --w-line: #eaeaea; --border-strong: #e1e1e1; --w-line-2: #e1e1e1; --w-lock-border: #ebebeb; /* dark cover tiles → neutral near-black (the Vercel "fill" is ink, not slate) */ --cover-1: #171717; --cover-2: #0f0f0f; --cover-3: #000000; /* ── INK: near-black primary, a clean neutral-gray ramp ───────────────────── */ --ink: #111111; --w-ink: #111111; --ink-2: #444444; --w-ink-2: #444444; --ink-3: #666666; --w-ink-3: #666666; --ink-4: #757575; --w-ink-4: #6b6b6b; /* 5.0:1 on #fff — AA for mono meta */ /* ── ACCENT → MONOCHROME (the chrome reads these aliases, NOT inline --accent). Coral is reserved for the ONE primary action via .btn-coral below; the rest of the "accent" surface goes near-black / gray so the UI is quiet. ──────── */ --c-coral: #111111; /* bars / rails / active marks → ink */ --c-deep: #111111; /* primary fill / strong accent → near-black */ --c-text: #171717; /* "accent" TEXT on surface → ink (was coral) */ --c-tint: #f2f2f2; /* faint "accent" fill → neutral recessed */ --c-tint2: #ebebeb; /* deeper "accent" fill → neutral */ --c-line: #e1e1e1; /* "accent" hairline → neutral hairline */ --c-wash: rgba(0,0,0,0.03); /* hover/drag bed → neutral wash */ /* keep the coral-* family neutral too (some rules read these directly) */ --coral-tint: #f2f2f2; --coral-tint2: #ebebeb; --coral-line: #e1e1e1; --coral-wash: rgba(0,0,0,0.03); /* the heatmap ramp → a neutral gray sequence (no hue) */ --hm-0: #f2f2f2; --hm-1: #d4d4d4; --hm-2: #8f8f8f; --hm-3: #171717; /* ── ACCOUNT PILL (cc-acct) → flat white / ink / hairline ─────────────────── */ --acct-surface: #ffffff; --acct-ink: #111111; --acct-ink-2: #444444; --acct-ink-3: #666666; --acct-border: #eaeaea; --acct-tint: #f2f2f2; /* ── SHAPE: sharp, small radii. Pills stay pill. ──────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius: 6px; --radius-lg: 8px; --radius-xl: 10px; --border-weight: 1px; /* ── DENSITY: a touch more air than Default (generous whitespace) ─────────── */ --pad-card: 20px; --pad-card-sm: 18px; --pad-card-lg: 24px; --gap-card: 14px; /* ── ELEVATION: ZERO shadows. Flat is the whole point. ────────────────────── */ --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-coral: none; --card-shadow: none; --w-shadow: none; --w-shadow-lift: none; /* ── TYPE: Inter (engine default) with a tight, modern display tracking ───── */ --font-display: var(--font); /* the page itself */ --page-bg: #fafafa; } /* ── Crisp text rendering (Vercel ships antialiased Geist) ───────────────────── */ html[data-skin="minimal"] .app-main, html[data-skin="minimal"] .app-sidebar { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── SHELL / NAV: white sidebar, hairline divider, BLACK active text ─────────── */ html[data-skin="minimal"] .app-sidebar { background: #ffffff; border-right: 1px solid #eaeaea; } html[data-skin="minimal"] .side-link { color: #666666; border-radius: 6px; font-weight: 500; letter-spacing: -0.005em; } html[data-skin="minimal"] .side-link:hover { background: #f4f4f4; color: #111111; } /* active = quiet gray fill + near-black ink + a thin ink rail (no coral) */ html[data-skin="minimal"] .side-link.current { background: #f4f4f4; color: #111111; font-weight: 600; box-shadow: inset 2px 0 0 #111111; } html[data-skin="minimal"] .side-exit:hover { color: #111111; } @media (max-width: 760px) { html[data-skin="minimal"] .app-sidebar { background: rgba(255,255,255,0.92); border-bottom: 1px solid #eaeaea; backdrop-filter: saturate(1.1) blur(8px); } } /* ── HEADINGS: tight tracking, semibold (not heavy), Vercel scale. Text COLORS use the --w-ink* tokens (re-pointed per tone above) so they follow light↔dark automatically; only weight/tracking/size are tone-invariant here. ── */ html[data-skin="minimal"] .dash-head h1, html[data-skin="minimal"] .dash-head.learn-head h1 { font-weight: 600; letter-spacing: -0.035em; color: var(--w-ink); font-size: 28px; } html[data-skin="minimal"] .dash-head > p { color: var(--w-ink-3); } /* eyebrows: lose the coral, go quiet uppercase gray (Vercel micro-label) */ html[data-skin="minimal"] .dash-eyebrow, html[data-skin="minimal"] .card-eyebrow, html[data-skin="minimal"] .hero-eyebrow { color: var(--w-ink-4); font-weight: 600; letter-spacing: 0.08em; } /* ── CARDS: flat white, hairline border, sharp radius, no shadow ─────────────── */ html[data-skin="minimal"] .card, html[data-skin="minimal"] .iax-card, html[data-skin="minimal"] .jrow, html[data-skin="minimal"] .hero-card { box-shadow: none; border: 1px solid #eaeaea; border-radius: 8px; background: #ffffff; } /* hover lift → a quiet border darken + 1px rise (no shadow bloom) */ html[data-skin="minimal"] a.jrow:hover, html[data-skin="minimal"] .iax-card[role="button"]:hover, html[data-skin="minimal"] a.iax-card:hover { box-shadow: none; border-color: #d4d4d4; transform: translateY(-1px); } html[data-skin="minimal"] .iax-bookrow:hover { box-shadow: none; border-color: #d4d4d4; } /* HERO: drop the coral left rail → a thin ink rail (the one "live" marker) */ html[data-skin="minimal"] .hero-card { border-color: var(--w-line); } html[data-skin="minimal"] .hero-card::before { background: var(--w-ink); width: 3px; } html[data-skin="minimal"] .hero-title { font-weight: 650; letter-spacing: -0.025em; color: var(--w-ink); } html[data-skin="minimal"] .hero-next { color: var(--w-ink-2); } /* ── BUTTONS: primary = the ONE accent (default Monochrome = near-black, Vercel); a non-mono accent recolors JUST this primary action via --c-deep. Secondary = ghost hairline. ─────────────────────────────────────────────────────────────── */ html[data-skin="minimal"] .btn-coral { background: var(--c-deep, #111111); color: #ffffff; border-color: var(--c-deep, #111111); box-shadow: none; border-radius: 6px; font-weight: 500; letter-spacing: -0.01em; } html[data-skin="minimal"] .btn-coral:hover { background: var(--c-coral, #000000); border-color: var(--c-coral, #000000); color: #ffffff; box-shadow: none; } html[data-skin="minimal"] .btn-ghost-coral { background: #ffffff; color: #111111; border-color: #eaeaea; box-shadow: none; border-radius: 6px; font-weight: 500; } html[data-skin="minimal"] .btn-ghost-coral:hover { background: #f4f4f4; color: #000000; border-color: #d4d4d4; } /* progress primitives → the accent fill on a light track (default Monochrome = ink) */ html[data-skin="minimal"] .pbar > i, html[data-skin="minimal"] .jbar > i, html[data-skin="minimal"] .ps-bar > i, html[data-skin="minimal"] .ps-mini-bar > i { background: var(--c-deep, #111111); } html[data-skin="minimal"] .pbar, html[data-skin="minimal"] .jbar, html[data-skin="minimal"] .ps-bar, html[data-skin="minimal"] .ps-mini-bar { background: #ececec; } html[data-skin="minimal"] .jpct, html[data-skin="minimal"] .ps-pct, html[data-skin="minimal"] .ps-mini-frac, html[data-skin="minimal"] .mom-n { color: var(--w-ink); } html[data-skin="minimal"] .mom-l { color: var(--w-ink-3); } /* ── THE MODULES LADDER: grayscale spine + tiles, thin rules, lots of air ────── */ /* the connector spine → a faint neutral line */ html[data-skin="minimal"] .journey::before { background: #ececec; } html[data-skin="minimal"] .journey-divider { border-bottom: 1px solid var(--w-line); } html[data-skin="minimal"] .jd-name { font-weight: 600; letter-spacing: -0.02em; color: var(--w-ink); } html[data-skin="minimal"] .jd-count { color: var(--w-ink-4); } /* group separator: a small INK index chip (not coral), gray uppercase label. The chip FILL is tone-specific (ink in light, near-white in dark) → see dark block. */ html[data-skin="minimal"] .jsep-num { background: #111111; color: #ffffff; box-shadow: none; border-radius: 6px; } html[data-skin="minimal"] .jsep-label { color: var(--w-ink-3); letter-spacing: 0.06em; } html[data-skin="minimal"] .jsep-rule, html[data-skin="minimal"] .jbar { border-radius: 99px; } html[data-skin="minimal"] .jsep-rule { background: var(--w-line); } html[data-skin="minimal"] .jsep-n { color: var(--w-ink-4); } /* cover tiles → grayscale states (completed/current = ink, available = recessed). These FILLS are tone-specific (ink in light, near-white in dark) → see dark block. */ html[data-skin="minimal"] .jcover { background: #f2f2f2; color: #111111; } html[data-skin="minimal"] .jrow.is-completed .jcover { background: #111111; } html[data-skin="minimal"] .jrow.is-current .jcover { background: #111111; } html[data-skin="minimal"] .jrow.is-available .jcover { background: #f2f2f2; } html[data-skin="minimal"] .jrow.is-available .jcover .jnum { color: #666666; } html[data-skin="minimal"] .jrow.is-locked .jcover { background: #f7f7f7; } html[data-skin="minimal"] .jrow.is-current .jcover::after { background: #ffffff; opacity: 0.85; } html[data-skin="minimal"] .jtitle { font-weight: 600; letter-spacing: -0.015em; color: var(--w-ink); } html[data-skin="minimal"] .jrow.is-locked .jtitle { color: var(--w-ink-3); } html[data-skin="minimal"] .jstate.s-completed { color: var(--w-ink); } html[data-skin="minimal"] .jgo { color: var(--w-ink); } /* element pills on a row → GHOST / outline (Vercel), not filled coral chips */ html[data-skin="minimal"] .jel { color: #444444; background: #ffffff; border: 1px solid #e1e1e1; border-radius: 6px; font-weight: 500; } html[data-skin="minimal"] .jel.coming { color: #888888; background: #fafafa; border-color: #ececec; } /* ── DASHBOARD VIEW TABS / PICKER: monochrome pills, ink active ──────────────── */ html[data-skin="minimal"] .dv-tab { color: var(--w-ink-3); font-weight: 500; border-radius: 6px; } html[data-skin="minimal"] .dv-tab:hover { color: var(--w-ink); background: var(--w-page); } html[data-skin="minimal"] .dv-tab.is-on { color: var(--w-ink); background: var(--w-locked); border-color: var(--w-line-2); font-weight: 600; } html[data-skin="minimal"] .dv-pick-trigger { border: 1px solid var(--w-line); background: var(--w-card); box-shadow: none; border-radius: 6px; color: var(--w-ink); font-weight: 500; } html[data-skin="minimal"] .dv-pick-trigger:hover { border-color: var(--w-line-2); box-shadow: none; } html[data-skin="minimal"] .dv-pick-menu { border: 1px solid var(--w-line); border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); } html[data-skin="minimal"] .dv-pick-row { border-radius: 6px; color: var(--w-ink); } html[data-skin="minimal"] .dv-pick-row:hover { background: var(--w-page); } html[data-skin="minimal"] .dv-pick-row[aria-checked="true"] { background: var(--w-locked); color: var(--w-ink); } html[data-skin="minimal"] .dv-pick-ck { color: var(--w-ink); } html[data-skin="minimal"] .dv-sec-h { font-weight: 600; letter-spacing: -0.02em; color: var(--w-ink); } /* ── EXPLORE (iax-*): flat cards, ink covers, ghost chips/tabs ───────────────── */ html[data-skin="minimal"] .iax-card { box-shadow: none; border: 1px solid var(--w-line); border-radius: 8px; } html[data-skin="minimal"] .iax-bookrow { border: 1px solid var(--w-line); box-shadow: none; border-radius: 8px; background: var(--w-card); } html[data-skin="minimal"] .iax-bookrow-tx b { color: var(--w-ink); } html[data-skin="minimal"] .iax-bookrow-arrow { color: var(--w-ink); } html[data-skin="minimal"] .iax-tab { color: var(--w-ink-3); font-weight: 500; } html[data-skin="minimal"] .iax-tab:hover { color: var(--w-ink); } html[data-skin="minimal"] .iax-tab.on { color: var(--w-ink); border-bottom-color: var(--w-ink); } html[data-skin="minimal"] .iax-tab.on .iax-tab-n { color: var(--w-ink); background: var(--w-locked); border-color: var(--w-line-2); } html[data-skin="minimal"] .iax-chip { color: var(--w-ink-2); border: 1px solid var(--w-line-2); border-radius: 6px; background: var(--w-card); font-weight: 500; } html[data-skin="minimal"] .iax-chip:hover { color: var(--w-ink); border-color: #d4d4d4; } html[data-skin="minimal"] .iax-chip.on { background: var(--c-deep, #111111); color: #ffffff; border-color: var(--c-deep, #111111); } html[data-skin="minimal"] .iax-search { border-radius: 6px; } html[data-skin="minimal"] .iax-search:focus-within { border-color: var(--w-ink); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); } html[data-skin="minimal"] .iax-blurb { color: var(--w-ink-2); } html[data-skin="minimal"] .iax-pane-lead { color: var(--w-ink-3); } /* explore covers → neutral ink (no coral fill); the "soft" cover goes light */ html[data-skin="minimal"] .iax-cover.t-coral { background: #111111; color: #ffffff; } html[data-skin="minimal"] .iax-cover.t-ink { background: #0f0f0f; color: #ffffff; } html[data-skin="minimal"] .iax-cover.t-slate { background: #171717; color: #ffffff; } html[data-skin="minimal"] .iax-cover.t-soft { background: #f2f2f2; color: #111111; } /* ── ROLE / STATUS / ORDER PILLS → ghost outline (monochrome) ────────────────── */ html[data-skin="minimal"] .id-role { color: var(--w-ink-2); background: var(--w-card); border: 1px solid var(--w-line-2); border-radius: 999px; font-weight: 600; } html[data-skin="minimal"] .ord-status.paid { background: var(--w-locked); color: var(--w-ink); } html[data-skin="minimal"] .ord-status.pending { background: var(--w-locked); color: var(--w-ink-2); } html[data-skin="minimal"] .banner-ok, html[data-skin="minimal"] .banner-note { background: var(--w-page); border: 1px solid var(--w-line); color: var(--w-ink-2); } /* ── SETTINGS APPEARANCE PICKER: flat tiles, ink selection ring ──────────────── */ /* The picker CSS (theme.js) reads --bg / --border / --ink — already re-pointed. Make the selection state ink (not the inline accent) + flatten the previews. */ html[data-skin="minimal"] .ap-tile, html[data-skin="minimal"] .ap-style, html[data-skin="minimal"] .ap-font, html[data-skin="minimal"] .sk-tab { box-shadow: none; border-radius: 8px; } html[data-skin="minimal"] .ap-preview { box-shadow: none; border: 1px solid #eaeaea; border-radius: 8px; } html[data-skin="minimal"] .ap-tile[aria-pressed="true"], html[data-skin="minimal"] .ap-style[aria-pressed="true"], html[data-skin="minimal"] .ap-font[aria-pressed="true"], html[data-skin="minimal"] .sk-tab[aria-pressed="true"] { border-color: var(--c-deep, #111111); box-shadow: inset 0 0 0 1px var(--c-deep, #111111); } /* ── FOCUS RINGS: a clean ink ring by default; follows the accent when non-mono ── */ html[data-skin="minimal"] a.jrow:focus-visible, html[data-skin="minimal"] .dv-tab:focus-visible, html[data-skin="minimal"] .dv-pick-trigger:focus-visible, html[data-skin="minimal"] .dv-pick-row:focus-visible, html[data-skin="minimal"] .iax-card:focus-visible, html[data-skin="minimal"] .btn-coral:focus-visible, html[data-skin="minimal"] .btn-ghost-coral:focus-visible { outline: 2px solid var(--c-deep, #111111); outline-offset: 2px; } /* ════════════════════════════════════════════════════════════════════════════ PER-SKIN ACCENT PALETTE — html[data-skin="minimal"][data-accent=""] (LIGHT) ---------------------------------------------------------------------------- Minimal is MONOCHROME by design — Vercel keeps chrome gray and lets a SINGLE brand color carry the one primary action. So the accent recolors only the action-bearing tokens (--c-coral/-deep/-text used by the primary button, the progress fill, the active chip, the selection/focus ring); the tint/line stay the neutral hairline so the UI stays quiet. The offered set (theme.js SKINS.minimal.options.accents): coral->Monochrome (default, ink), indigo->Vercel Blue, teal->Teal, plum->Magenta, forest->Green. AA: each --c-deep is AA behind a white label; each --c-text is AA on the white card. ════════════════════════════════════════════════════════════════════════════ */ /* Monochrome (default) — explicit so re-picking restores ink (matches the base). */ html[data-skin="minimal"][data-accent="coral"] { --c-coral: #111111; --c-deep: #111111; --c-text: #171717; } /* Vercel Blue */ html[data-skin="minimal"][data-accent="indigo"] { --c-coral: #0070f3; --c-deep: #0061d4; --c-text: #0058c0; } /* Teal */ html[data-skin="minimal"][data-accent="teal"] { --c-coral: #0f9b8e; --c-deep: #0c7d72; --c-text: #0b756b; } /* Magenta */ html[data-skin="minimal"][data-accent="plum"] { --c-coral: #d6249f; --c-deep: #bd2864; --c-text: #b01f78; } /* Green */ html[data-skin="minimal"][data-accent="forest"] { --c-coral: #17a34a; --c-deep: #15803d; --c-text: #14753a; } /* ════════════════════════════════════════════════════════════════════════════ DARK TONE — true-black Vercel dark mode (#000 page, #0a0a0a cards, #1a1a1a hairlines, near-white ink). Scoped to html[data-skin="minimal"][data-theme=…]. Applies to every dark-family tone (dark / midnight) the user might pair. ════════════════════════════════════════════════════════════════════════════ */ html[data-skin="minimal"][data-theme="dark"], html[data-skin="minimal"][data-theme="midnight"] { /* surfaces: black page, near-black cards, dim hairlines */ --bg: #0a0a0a; --w-card: #0a0a0a; --bg-2: #000000; --w-page: #000000; --bg-3: #161616; --w-locked: #161616; --card-2: #0f0f0f; --w-card-2: #0f0f0f; --border: #1f1f1f; --w-line: #1f1f1f; --border-strong: #2a2a2a; --w-line-2: #2a2a2a; --w-lock-border: #242424; --cover-1: #1a1a1a; --cover-2: #141414; --cover-3: #0d0d0d; /* ink: near-white primary, neutral gray ramp (all clear ≥4.5:1 on #0a0a0a) */ --ink: #ededed; --w-ink: #ededed; /* ~17:1 on #0a0a0a */ --ink-2: #b4b4b4; --w-ink-2: #b4b4b4; /* ~9:1 */ --ink-3: #a1a1a1; --w-ink-3: #a1a1a1; /* ~7:1 */ --ink-4: #8f8f8f; --w-ink-4: #8f8f8f; /* ~5.4:1 — AA mono meta */ /* accent aliases → monochrome WHITE-ish (chrome reads these, not inline) */ --c-coral: #ededed; --c-deep: #ededed; /* primary fill → near-white (ink label) */ --c-text: #ededed; /* "accent" text → near-white */ --c-tint: #1c1c1c; /* faint fill → dim neutral */ --c-tint2: #242424; --c-line: #2a2a2a; --c-wash: rgba(255,255,255,0.04); --coral-tint: #1c1c1c; --coral-tint2: #242424; --coral-line: #2a2a2a; --coral-wash: rgba(255,255,255,0.04); --hm-0: #161616; --hm-1: #3a3a3a; --hm-2: #8f8f8f; --hm-3: #ededed; /* account pill themed dark */ --acct-surface: #0a0a0a; --acct-ink: #ededed; --acct-ink-2: #b4b4b4; --acct-ink-3: #a1a1a1; --acct-border: #1f1f1f; --acct-tint: #1c1c1c; --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-coral: none; --card-shadow: none; --w-shadow: none; --w-shadow-lift: none; --page-bg: #000000; } /* dark structural recolors (where a literal hex was set in the light block) */ html[data-skin="minimal"][data-theme="dark"] .app-sidebar, html[data-skin="minimal"][data-theme="midnight"] .app-sidebar { background: #0a0a0a; border-right: 1px solid #1f1f1f; } html[data-skin="minimal"][data-theme="dark"] .side-link, html[data-skin="minimal"][data-theme="midnight"] .side-link { color: #a1a1a1; } html[data-skin="minimal"][data-theme="dark"] .side-link:hover, html[data-skin="minimal"][data-theme="midnight"] .side-link:hover { background: #161616; color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .side-link.current, html[data-skin="minimal"][data-theme="midnight"] .side-link.current { background: #161616; color: #ffffff; box-shadow: inset 2px 0 0 #ededed; } @media (max-width: 760px) { html[data-skin="minimal"][data-theme="dark"] .app-sidebar, html[data-skin="minimal"][data-theme="midnight"] .app-sidebar { background: rgba(10,10,10,0.92); border-bottom: 1px solid #1f1f1f; } } html[data-skin="minimal"][data-theme="dark"] .dash-head h1, html[data-skin="minimal"][data-theme="midnight"] .dash-head h1, html[data-skin="minimal"][data-theme="dark"] .hero-title, html[data-skin="minimal"][data-theme="midnight"] .hero-title, html[data-skin="minimal"][data-theme="dark"] .mom-n, html[data-skin="minimal"][data-theme="midnight"] .mom-n { color: #ffffff; } html[data-skin="minimal"][data-theme="dark"] .dash-head > p, html[data-skin="minimal"][data-theme="midnight"] .dash-head > p { color: #a1a1a1; } html[data-skin="minimal"][data-theme="dark"] .dash-eyebrow, html[data-skin="minimal"][data-theme="midnight"] .dash-eyebrow, html[data-skin="minimal"][data-theme="dark"] .card-eyebrow, html[data-skin="minimal"][data-theme="midnight"] .card-eyebrow, html[data-skin="minimal"][data-theme="dark"] .hero-eyebrow, html[data-skin="minimal"][data-theme="midnight"] .hero-eyebrow { color: #888888; } html[data-skin="minimal"][data-theme="dark"] .card, html[data-skin="minimal"][data-theme="midnight"] .card, html[data-skin="minimal"][data-theme="dark"] .iax-card, html[data-skin="minimal"][data-theme="midnight"] .iax-card, html[data-skin="minimal"][data-theme="dark"] .jrow, html[data-skin="minimal"][data-theme="midnight"] .jrow, html[data-skin="minimal"][data-theme="dark"] .hero-card, html[data-skin="minimal"][data-theme="midnight"] .hero-card, html[data-skin="minimal"][data-theme="dark"] .iax-bookrow, html[data-skin="minimal"][data-theme="midnight"] .iax-bookrow { background: #0a0a0a; border-color: #1f1f1f; box-shadow: none; } html[data-skin="minimal"][data-theme="dark"] a.jrow:hover, html[data-skin="minimal"][data-theme="midnight"] a.jrow:hover, html[data-skin="minimal"][data-theme="dark"] .iax-card[role="button"]:hover, html[data-skin="minimal"][data-theme="midnight"] .iax-card[role="button"]:hover, html[data-skin="minimal"][data-theme="dark"] a.iax-card:hover, html[data-skin="minimal"][data-theme="midnight"] a.iax-card:hover { border-color: #3a3a3a; box-shadow: none; } html[data-skin="minimal"][data-theme="dark"] .hero-card::before, html[data-skin="minimal"][data-theme="midnight"] .hero-card::before { background: #ededed; } /* dark buttons: primary = WHITE fill / black label by default (Vercel dark primary); a non-mono accent makes the fill a BRIGHT accent (still a near-black label = AA, because every dark accent value below is light/bright). */ html[data-skin="minimal"][data-theme="dark"] .btn-coral, html[data-skin="minimal"][data-theme="midnight"] .btn-coral { background: var(--c-deep, #ededed); color: #000000; border-color: var(--c-deep, #ededed); box-shadow: none; } html[data-skin="minimal"][data-theme="dark"] .btn-coral:hover, html[data-skin="minimal"][data-theme="midnight"] .btn-coral:hover { background: var(--c-coral, #ffffff); border-color: var(--c-coral, #ffffff); color: #000000; } html[data-skin="minimal"][data-theme="dark"] .btn-ghost-coral, html[data-skin="minimal"][data-theme="midnight"] .btn-ghost-coral { background: #0a0a0a; color: #ededed; border-color: #2a2a2a; box-shadow: none; } html[data-skin="minimal"][data-theme="dark"] .btn-ghost-coral:hover, html[data-skin="minimal"][data-theme="midnight"] .btn-ghost-coral:hover { background: #161616; color: #ffffff; border-color: #3a3a3a; } /* dark progress / ladder grayscale */ html[data-skin="minimal"][data-theme="dark"] .pbar, html[data-skin="minimal"][data-theme="midnight"] .pbar, html[data-skin="minimal"][data-theme="dark"] .jbar, html[data-skin="minimal"][data-theme="midnight"] .jbar, html[data-skin="minimal"][data-theme="dark"] .ps-bar, html[data-skin="minimal"][data-theme="midnight"] .ps-bar, html[data-skin="minimal"][data-theme="dark"] .ps-mini-bar, html[data-skin="minimal"][data-theme="midnight"] .ps-mini-bar { background: #222222; } html[data-skin="minimal"][data-theme="dark"] .pbar > i, html[data-skin="minimal"][data-theme="midnight"] .pbar > i, html[data-skin="minimal"][data-theme="dark"] .jbar > i, html[data-skin="minimal"][data-theme="midnight"] .jbar > i, html[data-skin="minimal"][data-theme="dark"] .ps-bar > i, html[data-skin="minimal"][data-theme="midnight"] .ps-bar > i, html[data-skin="minimal"][data-theme="dark"] .ps-mini-bar > i, html[data-skin="minimal"][data-theme="midnight"] .ps-mini-bar > i { background: var(--c-deep, #ededed); } html[data-skin="minimal"][data-theme="dark"] .jpct, html[data-skin="minimal"][data-theme="midnight"] .jpct, html[data-skin="minimal"][data-theme="dark"] .ps-pct, html[data-skin="minimal"][data-theme="midnight"] .ps-pct, html[data-skin="minimal"][data-theme="dark"] .jgo, html[data-skin="minimal"][data-theme="midnight"] .jgo, html[data-skin="minimal"][data-theme="dark"] .jstate.s-completed, html[data-skin="minimal"][data-theme="midnight"] .jstate.s-completed { color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .journey::before, html[data-skin="minimal"][data-theme="midnight"] .journey::before, html[data-skin="minimal"][data-theme="dark"] .jsep-rule, html[data-skin="minimal"][data-theme="midnight"] .jsep-rule { background: #222222; } html[data-skin="minimal"][data-theme="dark"] .jcover, html[data-skin="minimal"][data-theme="midnight"] .jcover { background: #1a1a1a; color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .jrow.is-completed .jcover, html[data-skin="minimal"][data-theme="midnight"] .jrow.is-completed .jcover, html[data-skin="minimal"][data-theme="dark"] .jrow.is-current .jcover, html[data-skin="minimal"][data-theme="midnight"] .jrow.is-current .jcover { background: #ededed; } html[data-skin="minimal"][data-theme="dark"] .jrow.is-completed .jcover .jnum, html[data-skin="minimal"][data-theme="midnight"] .jrow.is-completed .jcover .jnum, html[data-skin="minimal"][data-theme="dark"] .jrow.is-current .jcover .jnum, html[data-skin="minimal"][data-theme="midnight"] .jrow.is-current .jcover .jnum { color: #000000; } html[data-skin="minimal"][data-theme="dark"] .jrow.is-current .jcover::after, html[data-skin="minimal"][data-theme="midnight"] .jrow.is-current .jcover::after { background: #000000; opacity: 0.7; } html[data-skin="minimal"][data-theme="dark"] .jsep-num, html[data-skin="minimal"][data-theme="midnight"] .jsep-num { background: #ededed; color: #000000; } html[data-skin="minimal"][data-theme="dark"] .jsep-label, html[data-skin="minimal"][data-theme="midnight"] .jsep-label { color: #a1a1a1; } /* dark explore covers + ghost chips */ html[data-skin="minimal"][data-theme="dark"] .iax-cover.t-coral, html[data-skin="minimal"][data-theme="midnight"] .iax-cover.t-coral, html[data-skin="minimal"][data-theme="dark"] .iax-cover.t-ink, html[data-skin="minimal"][data-theme="midnight"] .iax-cover.t-ink, html[data-skin="minimal"][data-theme="dark"] .iax-cover.t-slate, html[data-skin="minimal"][data-theme="midnight"] .iax-cover.t-slate { background: #1a1a1a; color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .iax-cover.t-soft, html[data-skin="minimal"][data-theme="midnight"] .iax-cover.t-soft { background: #161616; color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .iax-chip.on, html[data-skin="minimal"][data-theme="midnight"] .iax-chip.on { background: #ededed; color: #000000; border-color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .iax-tab.on, html[data-skin="minimal"][data-theme="midnight"] .iax-tab.on { color: #ededed; border-bottom-color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .jel, html[data-skin="minimal"][data-theme="midnight"] .jel { color: #b4b4b4; background: #0a0a0a; border-color: #2a2a2a; } html[data-skin="minimal"][data-theme="dark"] .jel.coming, html[data-skin="minimal"][data-theme="midnight"] .jel.coming { color: #8f8f8f; background: #0d0d0d; border-color: #222222; } /* dark tabs / picker / focus */ html[data-skin="minimal"][data-theme="dark"] .dv-tab.is-on, html[data-skin="minimal"][data-theme="midnight"] .dv-tab.is-on { color: #ededed; background: #161616; border-color: #2a2a2a; } html[data-skin="minimal"][data-theme="dark"] .dv-tab:hover, html[data-skin="minimal"][data-theme="midnight"] .dv-tab:hover { color: #ededed; background: #161616; } html[data-skin="minimal"][data-theme="dark"] .dv-pick-trigger, html[data-skin="minimal"][data-theme="midnight"] .dv-pick-trigger { background: #0a0a0a; border-color: #1f1f1f; color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .dv-pick-menu, html[data-skin="minimal"][data-theme="midnight"] .dv-pick-menu { background: #0a0a0a; border-color: #1f1f1f; box-shadow: 0 10px 32px rgba(0,0,0,0.6); } html[data-skin="minimal"][data-theme="dark"] .dv-pick-row[aria-checked="true"], html[data-skin="minimal"][data-theme="midnight"] .dv-pick-row[aria-checked="true"] { background: #161616; color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .dv-pick-ck, html[data-skin="minimal"][data-theme="midnight"] .dv-pick-ck { color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .id-role, html[data-skin="minimal"][data-theme="midnight"] .id-role { color: #b4b4b4; background: #0a0a0a; border-color: #2a2a2a; } html[data-skin="minimal"][data-theme="dark"] .ord-status.paid, html[data-skin="minimal"][data-theme="midnight"] .ord-status.paid { background: #161616; color: #ededed; } html[data-skin="minimal"][data-theme="dark"] a.jrow:focus-visible, html[data-skin="minimal"][data-theme="midnight"] a.jrow:focus-visible, html[data-skin="minimal"][data-theme="dark"] .btn-coral:focus-visible, html[data-skin="minimal"][data-theme="midnight"] .btn-coral:focus-visible, html[data-skin="minimal"][data-theme="dark"] .dv-tab:focus-visible, html[data-skin="minimal"][data-theme="midnight"] .dv-tab:focus-visible { outline-color: #ededed; } html[data-skin="minimal"][data-theme="dark"] .ap-tile[aria-pressed="true"], html[data-skin="minimal"][data-theme="midnight"] .ap-tile[aria-pressed="true"], html[data-skin="minimal"][data-theme="dark"] .sk-tab[aria-pressed="true"], html[data-skin="minimal"][data-theme="midnight"] .sk-tab[aria-pressed="true"] { border-color: var(--c-deep, #ededed); box-shadow: inset 0 0 0 1px var(--c-deep, #ededed); } html[data-skin="minimal"][data-theme="dark"] .iax-chip.on, html[data-skin="minimal"][data-theme="midnight"] .iax-chip.on { background: var(--c-deep, #ededed); color: #000000; border-color: var(--c-deep, #ededed); } html[data-skin="minimal"][data-theme="dark"] a.jrow:focus-visible, html[data-skin="minimal"][data-theme="midnight"] a.jrow:focus-visible, html[data-skin="minimal"][data-theme="dark"] .btn-coral:focus-visible, html[data-skin="minimal"][data-theme="midnight"] .btn-coral:focus-visible, html[data-skin="minimal"][data-theme="dark"] .dv-tab:focus-visible, html[data-skin="minimal"][data-theme="midnight"] .dv-tab:focus-visible { outline-color: var(--c-deep, #ededed); } /* ════════════════════════════════════════════════════════════════════════════ PER-SKIN ACCENT PALETTE — html[data-skin="minimal"][data-theme=dark][data-accent] Dark Minimal: the one action goes a BRIGHT accent (light enough that the black button label stays AA). Monochrome (default) keeps the Vercel near-white fill. ════════════════════════════════════════════════════════════════════════════ */ html[data-skin="minimal"][data-theme="dark"][data-accent="coral"], html[data-skin="minimal"][data-theme="midnight"][data-accent="coral"] { --c-coral: #ededed; --c-deep: #ededed; --c-text: #ededed; } html[data-skin="minimal"][data-theme="dark"][data-accent="indigo"], html[data-skin="minimal"][data-theme="midnight"][data-accent="indigo"] { --c-coral: #3b9eff; --c-deep: #52a8ff; --c-text: #7cc0ff; } html[data-skin="minimal"][data-theme="dark"][data-accent="teal"], html[data-skin="minimal"][data-theme="midnight"][data-accent="teal"] { --c-coral: #2dd4bf; --c-deep: #3fd0c0; --c-text: #5fe0d3; } html[data-skin="minimal"][data-theme="dark"][data-accent="plum"], html[data-skin="minimal"][data-theme="midnight"][data-accent="plum"] { --c-coral: #f06bc4; --c-deep: #f06bc4; --c-text: #f49ad6; } html[data-skin="minimal"][data-theme="dark"][data-accent="forest"], html[data-skin="minimal"][data-theme="midnight"][data-accent="forest"] { --c-coral: #4ade80; --c-deep: #5fd98a; --c-text: #86e6a8; }