/* Emerald OS: light theme. Loaded last; active when JS sets <html data-theme="light">.
   Dark stays the default and is untouched.

   Every rule is scoped under html[data-theme="light"]. Most use
   :where(html[data-theme="light"]) so each override keeps the same specificity as the rule
   it replaces and wins by load order alone. That way, rules that are more specific (an input
   meant to be transparent, a highlighted column) still win as they do in dark.

   The task "posters" (task popup picture, Board run-sheet tiles, Done thumbnails, Map cards)
   are artwork on deep navy and stay dark. They get the dark tokens back locally (see
   "Dark artwork"), so the text and chips on them keep their dark-mode colours. */

/* ---- tokens ---- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9; --surface: #ffffff; --raised: #eef0f3; --line: rgba(15, 23, 42, .10);
  --text: #111318; --muted: #5b616e; --input: #8f95a0;
  --accent: #0a7f57; --accent-hover: #08694a; --on-accent: #ffffff;
  --amber: #9a5b00; --sky: #1f6fd1; --danger: #c43d3d; --ok: #15803d;
  --on-danger: #ffffff;
  --glass: #ffffff; --glass-strong: #ffffff; --glass-edge: rgba(15, 23, 42, .06);
  --elevation: inset 0 0 0 1px var(--glass-edge), 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .14);
  --primary: #111318; --on-primary: #ffffff;
  --pill-bg: #ffffff;
}

/* ---- page and background wash ---- */
:where(html[data-theme="light"]) body { background: var(--bg); color: var(--text); }
:where(html[data-theme="light"]) body::before {
  background:
    radial-gradient(1000px 640px at 88% -12%, rgba(15, 159, 110, .08), transparent 62%),
    radial-gradient(760px 560px at -8% 108%, rgba(31, 111, 209, .04), transparent 60%);
}

/* ---- scrollbars ---- */
html[data-theme="light"],
:where(html[data-theme="light"]) * { scrollbar-color: rgba(15, 159, 110, .4) transparent; }
html[data-theme="light"]::-webkit-scrollbar-thumb,
:where(html[data-theme="light"]) ::-webkit-scrollbar-thumb { background-color: rgba(15, 159, 110, .4); }
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
:where(html[data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 159, 110, .62); }

/* ---- fields ---- */
:where(html[data-theme="light"]) input,
:where(html[data-theme="light"]) textarea { border-color: var(--input); background: var(--surface); }
:where(html[data-theme="light"]) input::placeholder { color: #737985; }
:where(html[data-theme="light"]) input:focus,
:where(html[data-theme="light"]) textarea:focus,
:where(html[data-theme="light"]) select:focus { box-shadow: 0 0 0 3px rgba(15, 159, 110, .16); }

/* ---- dropdowns: the field, the native list, and the custom ::picker(select) list ---- */
:where(html[data-theme="light"]) select {
  border-color: var(--input); background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b616e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:where(html[data-theme="light"]) select:hover:not(:disabled) { border-color: rgba(15, 23, 42, .45); }
:where(html[data-theme="light"]) select:focus-visible { box-shadow: 0 0 0 3px rgba(15, 159, 110, .18); }
:where(html[data-theme="light"]) option { background: #ffffff; color: var(--text); }
@supports (appearance: base-select) {
  :where(html[data-theme="light"]) select:open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9f6e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
  }
  :where(html[data-theme="light"]) ::picker(select) {
    border-color: rgba(15, 23, 42, .12); background: #ffffff; color: var(--text);
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .25);
  }
  :where(html[data-theme="light"]) option { background: transparent; }
  :where(html[data-theme="light"]) option:hover,
  :where(html[data-theme="light"]) option:focus-visible { background: rgba(15, 23, 42, .05); }
}

/* ---- buttons ---- */
/* primary follows the dark intent: the high-contrast inverse of the page (text colour fill) */
:where(html[data-theme="light"]) .btn:hover { background: rgba(15, 23, 42, .05); }
:where(html[data-theme="light"]) .btn.primary:hover { background: #2a2e36; }
:where(html[data-theme="light"]) .btn.danger { color: var(--on-danger); }
:where(html[data-theme="light"]) .top-icon { background: rgba(15, 23, 42, .03); }
:where(html[data-theme="light"]) .top-icon:hover { background: rgba(15, 23, 42, .07); }

/* ---- top bar and the tab pill (active tab stays accent-filled via tokens) ---- */
:where(html[data-theme="light"]) .topbar { background: rgba(246, 247, 249, .94); }
:where(html[data-theme="light"]) .topbar .tabs { background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
:where(html[data-theme="light"]) .tab.active { background: rgba(15, 23, 42, .06); }

/* ---- sidebar (Vault) ---- */
:where(html[data-theme="light"]) .sidebar { background: rgba(255, 255, 255, .55); }
:where(html[data-theme="light"]) .vault-link.active,
:where(html[data-theme="light"]) .vault-link:hover { background: rgba(15, 23, 42, .05); }

/* ---- dock ---- */
:where(html[data-theme="light"]) .dock { background: #ffffff; box-shadow: var(--elevation), 0 16px 40px -12px rgba(15, 23, 42, .22); }
:where(html[data-theme="light"]) .dock a.active { background: rgba(15, 23, 42, .06); }

/* ---- user menu ---- */
:where(html[data-theme="light"]) .menu { background: #ffffff; box-shadow: var(--elevation), 0 18px 48px -12px rgba(15, 23, 42, .25); }
:where(html[data-theme="light"]) .menu a:hover,
:where(html[data-theme="light"]) .menu button:hover { background: rgba(15, 23, 42, .05); }

/* ---- home: app cards ---- */
:where(html[data-theme="light"]) .app-card:hover { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(15, 159, 110, .35), 0 12px 32px -12px rgba(15, 23, 42, .2); }
:where(html[data-theme="light"]) .app-icon { background: rgba(15, 159, 110, .08); }

/* ---- panels (dialogs), the backdrop and the blur behind them ---- */
:where(html[data-theme="light"]) .panel { background: var(--surface); box-shadow: var(--elevation), 0 24px 64px -16px rgba(15, 23, 42, .3); }
:where(html[data-theme="light"]) .panel::backdrop { background: rgba(15, 23, 42, .35); }
:where(html[data-theme="light"]) body.modal-open #app-screen > * { filter: blur(5px) brightness(.97); }

/* ---- toast: an inverse pill, like the primary button ---- */
:where(html[data-theme="light"]) .toast { box-shadow: 0 10px 30px -10px rgba(15, 23, 42, .4); }

/* ---- settings, access, notices ---- */
:where(html[data-theme="light"]) .settings-tabs .count.off { background: rgba(15, 23, 42, .06); }
:where(html[data-theme="light"]) .access-app { background: rgba(15, 23, 42, .02); }
:where(html[data-theme="light"]) .warn-box { border-color: rgba(168, 100, 0, .35); background: rgba(168, 100, 0, .06); }

/* ---- 40K View: header bar, compose, lanes, cards ---- */
:where(html[data-theme="light"]) .main.pm .pm-head h1 { color: #111318; }
:where(html[data-theme="light"]) .pm-bar { background: rgba(15, 23, 42, .06); }
:where(html[data-theme="light"]) .pm-cell { background: rgba(15, 23, 42, .03); }
:where(html[data-theme="light"]) .pm-card { background: #ffffff; box-shadow: inset 3px 0 0 var(--sc), 0 6px 16px -10px rgba(15, 23, 42, .3); }
:where(html[data-theme="light"]) .pm-card:hover { border-color: rgba(15, 23, 42, .2); background: #ffffff; }
:where(html[data-theme="light"]) .pm-cyc { background: rgba(15, 23, 42, .03); }
:where(html[data-theme="light"]) .pm-prog { background: rgba(15, 23, 42, .08); }
:where(html[data-theme="light"]) .pm-principles > div { background: rgba(15, 23, 42, .02); }

/* ---- section headings ---- */
:where(html[data-theme="light"]) .pm-lanes-head h2,
:where(html[data-theme="light"]) .main.pm-view h2 { color: #111318; }

/* ---- chips (outside the artwork they use light-mode tokens; inside, dark ones) ---- */
:where(html[data-theme="light"]) .pm-chip.hot { color: var(--on-danger); }
:where(html[data-theme="light"]) .pm-chip.warn { border-color: color-mix(in srgb, var(--amber) 70%, transparent); }
:where(html[data-theme="light"]) .pm-chip.cool { border-color: color-mix(in srgb, var(--sky) 70%, transparent); }

/* ---- task editor (pm-editor.js) ---- */
:where(html[data-theme="light"]) .pm-x:hover { background: rgba(15, 23, 42, .05); }
:where(html[data-theme="light"]) .pm-ed .pm-check-row input:not([type=checkbox]):hover,
:where(html[data-theme="light"]) .pm-ed .pm-check-row input:not([type=checkbox]):focus { background: rgba(15, 23, 42, .03); }
:where(html[data-theme="light"]) .pm-ed .pm-flagsel.has select { border-color: color-mix(in srgb, var(--amber) 70%, transparent); }
:where(html[data-theme="light"]) .pm-ed .pm-chip-in.hot { color: var(--on-danger); }
:where(html[data-theme="light"]) .pm-ed .pm-chip-in.hot::placeholder { color: rgba(255, 255, 255, .75); }
:where(html[data-theme="light"]) .pm-ed .pm-chip-in.warn { border-color: color-mix(in srgb, var(--amber) 70%, transparent); }
:where(html[data-theme="light"]) .pm-ed .pm-chip-in.cool { border-color: color-mix(in srgb, var(--sky) 70%, transparent); }

/* ---- Horizons view ---- */
:where(html[data-theme="light"]) button.pmv-hz-item:hover { background: rgba(15, 23, 42, .04); }
:where(html[data-theme="light"]) .pmv-hz-park-row { background: rgba(15, 23, 42, .03); }
:where(html[data-theme="light"]) .pmv-hz-x:hover { background: rgba(15, 23, 42, .05); }

/* ---- Roadmap view ---- */
:where(html[data-theme="light"]) .pmv-rm-wrap { --pmv-rm-bg: #ffffff; }
:where(html[data-theme="light"]) .pmv-rm-meta:hover { background: #f3f4f6; }
/* stream colours are set from JS for dark; darken them for names on white */
:where(html[data-theme="light"]) .pmv-rm-name { color: color-mix(in srgb, var(--c) 52%, #111318); }
:where(html[data-theme="light"]) .pmv-rm-pips b { background: rgba(15, 23, 42, .12); }
:where(html[data-theme="light"]) .pmv-rm-flag.cool { border-color: color-mix(in srgb, var(--sky) 60%, transparent); }
:where(html[data-theme="light"]) .pmv-rm-flag.ok { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
:where(html[data-theme="light"]) .pmv-rm-axis,
:where(html[data-theme="light"]) .pmv-rm-track { background-image: linear-gradient(to right, rgba(15, 23, 42, .06) 1px, transparent 1px); }
:where(html[data-theme="light"]) .pmv-rm-month { border-left-color: rgba(15, 23, 42, .18); }
:where(html[data-theme="light"]) .pmv-rm-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c) 90%, transparent)); }
:where(html[data-theme="light"]) .pmv-rm-bar.draft { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: rgba(15, 23, 42, .35); }
:where(html[data-theme="light"]) .pmv-rm-bar span { color: #0b1324; }
:where(html[data-theme="light"]) .pmv-rm-diamond { box-shadow: 0 0 0 1px rgba(15, 23, 42, .25); }
:where(html[data-theme="light"]) .pmv-rm-edit { background: var(--bg); }
:where(html[data-theme="light"]) .pmv-rm-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }

/* ---- Dates view ---- */
:where(html[data-theme="light"]) .pmv-dt-cd:hover { background: #fbfcfd; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .25); }
:where(html[data-theme="light"]) .pmv-dt-h { background: var(--raised); }
:where(html[data-theme="light"]) button.pmv-dt-dn:hover { background: rgba(15, 23, 42, .05); }
:where(html[data-theme="light"]) .pmv-dt-pop { box-shadow: var(--elevation), 0 24px 60px -20px rgba(15, 23, 42, .35); }
:where(html[data-theme="light"]) .pmv-dt-x:hover { background: rgba(15, 23, 42, .05); }

/* ---- Map view (tree; task cards are artwork, see below) ---- */
:where(html[data-theme="light"]) .pmv-map-box { box-shadow: var(--elevation); }
:where(html[data-theme="light"]) .pmv-map-card { box-shadow: 0 0 0 1px rgba(15, 23, 42, .12), 0 8px 18px -10px rgba(15, 23, 42, .45); }

/* ---- Board view (run sheet; tiles are artwork, see below) ---- */
:where(html[data-theme="light"]) .pmv-bd-tile { border-color: rgba(15, 23, 42, .18); box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .45); }
:where(html[data-theme="light"]) .pmv-bd-notes { box-shadow: var(--elevation); }
:where(html[data-theme="light"]) .pmv-bd-open:hover { background: rgba(15, 23, 42, .05); }

/* ---- Done view ---- */
:where(html[data-theme="light"]) .pmv-dn-card { box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .3); }

/* ---- Dark artwork: posters stay deep navy, framed on the light page ----
   Restore the dark tokens inside them so kicker, big number, chips and labels keep
   their dark-mode colours, and pin the text light. */
:where(html[data-theme="light"]) :is(.pm-poster, .pmv-map-card, .pmv-dn-poster) {
  --text: #f2f3f5; --muted: #a7abb4;
  --accent: #34d399; --accent-hover: #6ee7b7; --on-accent: #022c22;
  --amber: #ffb547; --sky: #5ab0ff; --danger: #f08a8a; --ok: #86efac;
  --on-danger: #2a0a0a;
  color: var(--text);
}
/* the active Business pill: white on the darker light-theme emerald (dark text fell below 4.5:1) */
html[data-theme="light"] .space-switch button[data-space="business"][aria-pressed="true"] { color: #fff; }
html[data-theme="light"] :is(.pm-lanes-head .pm-mine.on, .pmv-dn-tab.on) { color: #fff; }