/* ============================================================================
   workshop.css — M2 chrome: the session lobby, the share/invite overlay, and
   projector mode. Kept OUT of core.css so the renderer fork stays a clean,
   near-verbatim diff of appview/web. Reuses core.css's :root palette + fonts.
   ========================================================================== */

/* ---- SciOS identity (logo lockup) --------------------------------------- */
/* The wordmark is an inline <use> of #scios-wordmark: letters ride currentColor
   (so a future light mode flips them for free); the ring+dot mark is brand green
   via --scios-green (tunable per theme). #3A5837 is the true brand green. */
.scios-wordmark {
  display: block;
  color: var(--text);
  /* dark theme: the true brand green (#3A5837) reads muddy on near-black, so the
     mark uses a lifted olive of the same hue family. #3A5837 is the LIGHT-mode
     value — a future .light rule restores it. */
  --scios-green: #6aa05f;
}

/* masthead lockup: wordmark + "workshop" descriptor (mirrors SciOS Compute) */
.masthead .mark { gap: 0.6rem; }
.masthead .scios-wordmark { height: 24px; width: 64.8px; }
.mark-desc {
  font-family: "IBM Plex Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.05em; color: var(--dim);
}

/* ---- graph canvas cursor (Chromium grab-cursor fix) --------------------- */
/* The native grab/grabbing cursors hit a long-standing Chromium bug where their
   outline drops out over a GPU-composited <canvas> — leaving an invisible white
   hand on the light/cream canvas ("it exists for a moment then vanishes"). Replace
   them with a baked custom move-arrow: a solid dark body + white halo, so it reads
   on BOTH themes and a bitmap cursor can't lose its outline. core.js clears its
   inline "grab" (sets "") so this rule shows through; it still sets "pointer" on
   nodes (the finger cursor isn't affected by the bug). */
#graph { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%201.5L16.5%207H14V10H17V7.5L22.5%2012L17%2016.5V14H14V17H16.5L12%2022.5L7.5%2017H10V14H7V16.5L1.5%2012L7%207.5V10H10V7H7.5Z'%20fill%3D'%231c1c1c'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 12 12, grab; }
#graph.dragging { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%201.5L16.5%207H14V10H17V7.5L22.5%2012L17%2016.5V14H14V17H16.5L12%2022.5L7.5%2017H10V14H7V16.5L1.5%2012L7%207.5V10H10V7H7.5Z'%20fill%3D'%231c1c1c'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 12 12, grabbing; }

/* ---- shared overlay scaffold (lobby + share) ---------------------------- */
.lobby,
.share {
  position: fixed; inset: 0; display: none;
  background: rgba(6, 8, 9, 0.78); backdrop-filter: blur(7px);
  padding: 1.25rem;
}
.lobby { z-index: 12; }
.share { z-index: 13; }
.lobby[data-open="true"],
.share[data-open="true"] { display: grid; place-items: center; }

.lobby-card,
.share-card {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 1.7rem 1.6rem;
}
/* the lobby reads at arm's length / on a shared screen, so it runs a larger type
   scale + a touch more width than the share overlay (which they share a base
   with). Scoped to .lobby-card so the QR-tuned share card keeps its size. */
.lobby-card { max-width: 468px; padding: 2rem 1.85rem; }

/* ---- lobby --------------------------------------------------------------- */
.lobby-mark { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; margin-bottom: 1.6rem; }
/* particle hero (swarm.js) — settles into the SciOS mark; colour drives the dots */
.lobby-swarm { display: block; width: 100%; height: 150px; color: #6aa05f; margin-bottom: 0.1rem; }
.lobby-wordmark { height: 32px; width: 86.4px; }
/* "Workshop" — app-name descriptor under the SciOS wordmark (reads as SciOS
   Workshop); quiet uppercase mono, echoing the masthead .mark-desc. */
.lobby-appname {
  font-family: "IBM Plex Mono", monospace; font-size: 0.84rem;
  letter-spacing: 0.06em; color: var(--dim);
  margin: 0.15rem 0 0;
}
.lobby-tagline { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--dim); margin: 0; max-width: 32ch; }

/* field caption above the name input / graph-type selector — quiet mono label */
.lobby-field-label,
.lobby-mode-label {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
  margin: 0 0 0.4rem;
}
.lobby-mode-label { margin-top: 0.2rem; }

.lobby-name,
.lobby-join-input,
.share-url {
  width: 100%; box-sizing: border-box;
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 5px;
  color: var(--text); font-family: "IBM Plex Mono", monospace; font-size: 0.95rem;
  padding: 0.7rem 0.8rem;
}
.lobby-name:focus,
.lobby-join-input:focus { outline: none; border-color: var(--question); }
.lobby-name { margin-bottom: 0.9rem; }

/* graph-mode selector (simple workshop vs full MIRA) — a two-segment toggle */
.lobby-mode { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.lobby-mode-opt {
  flex: 1; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 5px;
  color: var(--text); font-family: "IBM Plex Mono", monospace;
  padding: 0.65rem 0.7rem; transition: border-color 0.15s, background 0.15s;
}
.lobby-mode-opt b { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; }
.lobby-mode-opt small { font-size: 0.74rem; color: var(--dimmer); line-height: 1.3; }
.lobby-mode-opt:hover { border-color: var(--dim); }
.lobby-mode-opt[aria-checked="true"] {
  border-color: var(--question);
  background: color-mix(in srgb, var(--question) 12%, var(--ink));
}
.lobby-mode-opt[aria-checked="true"] b { color: var(--question); }

.lobby-new {
  width: 100%; cursor: pointer;
  background: var(--question); color: var(--ink);
  border: 1px solid var(--question); border-radius: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.98rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 0.8rem 0.7rem;
  transition: filter 0.15s;
}
.lobby-new:hover { filter: brightness(1.08); }
.lobby-new:disabled { opacity: 0.55; cursor: default; }

.lobby-sep { display: flex; align-items: center; gap: 0.7rem; margin: 1.2rem 0 1rem; }
.lobby-sep::before, .lobby-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.lobby-sep span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dimmer); }

.lobby-join { display: flex; gap: 0.5rem; }
.lobby-join-input { flex: 1; }
.lobby-join-btn,
.share-copy {
  cursor: pointer; flex: none;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2); border-radius: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.92rem;
  padding: 0 0.9rem; transition: border-color 0.15s, color 0.15s;
}
.lobby-join-btn:hover,
.share-copy:hover { border-color: var(--question); color: var(--question); }
.lobby-join-btn:disabled { opacity: 0.55; cursor: default; }

.lobby-error {
  margin-top: 0.9rem; font-family: "IBM Plex Mono", monospace; font-size: 0.82rem;
  color: var(--bad);
}

/* colophon — quiet "built on MIRA" credit + repo link, under a hairline divider */
.lobby-colophon {
  margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line-2);
  text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 0.68rem;
  letter-spacing: 0.04em; color: var(--dimmer);
}
.lobby-colophon a { color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
.lobby-colophon a:hover { color: var(--question); border-bottom-color: var(--question); }

/* ---- share / invite overlay --------------------------------------------- */
.share-close {
  position: absolute; top: 0.7rem; right: 0.8rem; cursor: pointer;
  background: transparent; border: 0; color: var(--dim);
  font-family: "IBM Plex Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.share-close:hover { color: var(--text); }
.share-title { font-family: "IBM Plex Mono", monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin: 0 0 0.3rem; }
.share-name { font-family: Fraunces, serif; font-size: 1.05rem; color: var(--text); margin: 0 0 1rem; word-break: break-word; }

.share-qr {
  width: 220px; max-width: 70vw; aspect-ratio: 1 / 1; margin: 0 auto 1.1rem;
  background: #fff; border-radius: 6px; padding: 10px; box-sizing: border-box;
}
.share-qr svg { display: block; width: 100%; height: 100%; }

/* short join code (the desktop path) — shown under the QR */
.share-code-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0 0 1rem; }
.share-code-label { font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dimmer); }
.share-code { font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.28em; color: var(--question); padding-left: 0.28em; }

.share-url-row { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.share-url { flex: 1; color: var(--dim); }

.share-projector {
  width: 100%; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2); border-radius: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.8rem;
  padding: 0.6rem 0.7rem; transition: border-color 0.15s, color 0.15s;
}
.share-projector:hover { border-color: var(--question); color: var(--question); }

/* ---- masthead "invite" + "show code" affordances ------------------------ */
.session-share,
.pin-code { background: transparent; border-color: var(--line-2); color: var(--dim); }
.session-share:hover,
.pin-code:hover { background: rgba(92, 177, 230, 0.16); border-color: var(--question); color: var(--question); }
.pin-code.active { background: rgba(92, 177, 230, 0.22); border-color: var(--question); color: var(--question); }

/* ---- projector mode ------------------------------------------------------ */
/* Hide the room-screen chrome and let the canvas fill the stage. */
body[data-projector="true"] .masthead,
body[data-projector="true"] .colophon,
body[data-projector="true"] .legend,
body[data-projector="true"] .hint { display: none !important; }

.projector-corner {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 11;
  display: none; align-items: center; gap: 0.9rem;
  background: rgba(9, 11, 12, 0.72); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 0.8rem 0.95rem; backdrop-filter: blur(6px);
}
body[data-projector="true"] .projector-corner { display: flex; }
/* pinned in the NORMAL view (facilitator demo aid) → bottom-right, lifted above the
   colophon. z-index 11 keeps the QR + code on top of the right-docked inspector, so
   it stays visible even while a node is open; the legend keeps its bottom-left slot. */
body[data-pin="true"] .projector-corner { display: flex; }
body[data-pin="true"]:not([data-projector="true"]) .projector-corner { bottom: 2.8rem; }
.pc-qr { width: 122px; height: 122px; flex: none; background: #fff; border-radius: 6px; padding: 7px; box-sizing: border-box; }
.pc-qr svg { display: block; width: 100%; height: 100%; }
.pc-title { font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.pc-name { font-family: Fraunces, serif; font-size: 0.95rem; color: var(--text); margin: 0.12rem 0 0.32rem; max-width: 18ch; }
.pc-how { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--dim); }
.pc-how b { color: var(--text); font-weight: 500; }
.pc-code-row { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--dim); margin: 0.15rem 0 0.5rem; }
.pc-code { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.18em; color: var(--question); padding-left: 0.18em; }
.pc-counts { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--dim); }
.pc-counts b { color: var(--text); }

.projector-exit {
  position: fixed; top: 1rem; right: 1rem; z-index: 14; display: none; cursor: pointer;
  background: rgba(9, 11, 12, 0.7); color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.7rem;
  backdrop-filter: blur(6px); transition: color 0.15s, border-color 0.15s;
}
body[data-projector="true"] .projector-exit { display: block; }
.projector-exit:hover { color: var(--text); border-color: var(--line-2); }

/* ============================================================================
   SIMPLE WORKSHOP MODE chrome trim (body[data-mode="simple"], set in session.js).
   A simple session already narrows the AUTHORING palette to Question/Thought/Source
   (simple-mode.js wrapper + the core.js relabel). Here we also hide the analytical
   chrome around it — lens switch, breadcrumb, multi-select→bundle — which are schema
   tools, not room tools. Endorse / flag-a-gap / author attribution all stay (kept on
   purpose). The legend's claim→"Thought" relabel + the hint/colophon copy are in
   session.js (CSS can't rewrite text nodes).
   ============================================================================ */
body[data-mode="simple"] #lens-switch,
body[data-mode="simple"] #breadcrumb,
body[data-mode="simple"] #select-mode { display: none; }

/* trim the legend to the simple palette: hide the node types, the grounds relation,
   and the whole "super" (bundle / narrative / cold-stored) group a simple room never
   produces. Question / Thought / Source + supports / addresses / describes remain. */
body[data-mode="simple"] .legend .chip[data-type="evidence"],
body[data-mode="simple"] .legend .chip[data-type="study"],
body[data-mode="simple"] .legend .chip[data-type="issue"],
body[data-mode="simple"] .legend .chip[data-rel="grounds"],
body[data-mode="simple"] .legend .legend-group:last-child { display: none; }

/* the simple-mode node panel's "+1" affordance (replaces the 5-stance endorse block):
   an inline button + a running count, not a full-width action. .mine = you've +1'd. */
.plusone-field { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.plusone-field .plusone { width: auto; flex: none; cursor: pointer; }
.plusone-field .plusone.mine { border-color: var(--supports); color: var(--supports); }
.plusone-count { font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; color: var(--dim); }

/* the inspector's action buttons read as clearly clickable in the simple room. The parent
   dims "draw relation" / "flag a gap" to var(--dim) and gives every action a faint
   var(--line-2) border + a filled var(--raise) box (secondary-action styling) — together
   that looks grayed-out / pre-pressed. Here they're primary actions, so: full-contrast
   text + a clearer border + a transparent fill, reading as outline buttons (the publish/
   cancel CTAs keep their own accent styling — not touched). */
body[data-mode="simple"] .insp-action.draw,
body[data-mode="simple"] .insp-action.flag-gap,
body[data-mode="simple"] .insp-action.plusone {
  background: transparent; border-color: rgba(130, 155, 165, 0.40); color: var(--text);
}
body[data-mode="simple"] .insp-action.plusone.mine { border-color: var(--supports); color: var(--supports); }
body[data-mode="simple"] .insp-action.draw:hover,
body[data-mode="simple"] .insp-action.flag-gap:hover,
body[data-mode="simple"] .insp-action.plusone:not(.mine):hover {
  border-color: var(--question); background: rgba(92, 177, 230, 0.10); color: var(--text);
}

/* simple-mode RADIAL quick menu (core.js openNodeRadial): an SVG donut pie hugging the
   tapped node — each wedge is an action, the node shows through the hole. The container
   ignores pointer events so the hole + inter-wedge gaps fall through to the canvas; only
   the wedge paths are clickable. (The element only exists in simple mode.) */
.node-radial {
  position: fixed; z-index: 30; transform: translate(-50%, -50%);
  pointer-events: none; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
  animation: radial-in 0.12s ease-out;
}
@keyframes radial-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.86); } }
.node-radial svg { display: block; overflow: visible; }
.node-radial .rw {
  pointer-events: auto; cursor: pointer;
  fill: rgba(14, 19, 22, 0.94); stroke: var(--line-2); stroke-width: 1;
  transition: fill 0.12s, stroke 0.12s;
}
.node-radial .rw:not(.ro):hover { fill: var(--raise); stroke: var(--question); }
.node-radial .rw.ro { cursor: default; }            /* read-only (e.g. the +1 count when signed out) */
.node-radial .rw.mine { fill: rgba(31, 157, 110, 0.22); stroke: var(--supports); }
.node-radial .rw.mine:hover { fill: rgba(31, 157, 110, 0.30); }
.node-radial .rw-icons { pointer-events: none; }
/* fill makes MONOCHROME glyphs (e.g. the ↔ connect arrow) visible in dark mode; colour
   emoji (👍💭❓🔗) render their own colours and ignore it. */
.node-radial .rw-emoji { font-size: 19px; text-anchor: middle; dominant-baseline: central; fill: var(--text); }
.node-radial .rw-label {
  font-family: "IBM Plex Mono", monospace; font-size: 8.5px; fill: var(--dim);
  text-anchor: middle; dominant-baseline: central; letter-spacing: 0.03em;
}
/* light mode: pale wedges instead of near-black */
html.light .node-radial .rw { fill: rgba(255, 255, 255, 0.96); }
html.light .node-radial .rw.mine { fill: rgba(31, 157, 110, 0.16); }

/* simple-mode QUICK-ADD box (top-left): a labeled panel — one-click add Thought/Question/
   Source + connect. Shown only in simple mode when signed in (authoring needs a name). */
.quickadd {
  position: fixed; top: 4.7rem; left: 1rem; z-index: 9;
  display: none; flex-direction: column; gap: 0.35rem; align-items: stretch;
  background: var(--ink-1); border: 1px solid var(--line-2); border-radius: 9px;
  padding: 0.6rem; box-shadow: var(--shadow);
}
body[data-mode="simple"]:has(#auth[data-state="in"]) .quickadd { display: flex; }
.qa-title {
  font-family: "IBM Plex Mono", monospace; font-size: 0.56rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dim); padding: 0 0.15rem 0.2rem;
}
.quickadd .qa-btn {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid rgba(130, 155, 165, 0.30); border-radius: 6px;
  color: var(--text); font-family: "IBM Plex Mono", monospace; font-size: 0.74rem;
  padding: 0.4rem 0.65rem; transition: border-color 0.15s, background 0.15s;
}
.quickadd .qa-btn:hover { border-color: var(--question); background: rgba(92, 177, 230, 0.10); }
.quickadd .qa-emoji { font-size: 1.05rem; line-height: 1; width: 1.2em; text-align: center; }
.quickadd .qa-connect { margin-top: 0.2rem; }

/* simple-mode create-form character counter ("N / 50") — right-aligned, tabular */
.fcount { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ============================================================================
   LIGHT / DARK theme.  Dark is the default (core.css :root, kept verbatim).
   Light is opt-in: index.html adds `.light` to <html> pre-boot from localStorage;
   the masthead ☀/☾ toggle flips it (session.js) and nudges core.js's retheme()
   so the cached canvas palette re-reads. Everything below is the override layer —
   the light palette + the few chrome surfaces that hardcode dark rgba (and so
   can't follow the variables). core.css/core.js stay clean.
   ========================================================================== */

/* the toggle button (masthead) */
.theme-toggle {
  flex: none; cursor: pointer; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2); border-radius: 4px;
  color: var(--dim); font-size: 0.92rem; line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-toggle:hover { color: var(--question); border-color: var(--question); }
/* the lobby's own toggle — pinned to the card's top-right corner (the masthead
   one is hidden behind the lobby overlay) */
.lobby-theme { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; }

/* ---- the light palette (overrides core.css :root when <html class="light">) -- */
:root.light {
  --ink:    #faf8f3;   /* warm off-white page (not stark white — matches the cream identity) */
  --ink-1:  #ffffff;   /* panels / cards */
  --ink-2:  #f1eee6;   /* deeper panel */
  --raise:  #e8e4da;   /* raised */
  --line:   rgba(45, 55, 60, 0.10);
  --line-2: rgba(45, 55, 60, 0.20);
  --text:   #1b2024;   /* near-black, faintly warm */
  --dim:    #586066;
  --dimmer: #8b9298;

  /* node types — darkened / more saturated so they hold contrast on white */
  --claim:     #b07d12;
  --evidence:  #1f9d6e;
  --question:  #2483c2;
  --source:    #b1652f;
  --study:     #bd4f88;
  --issue:     #7445cc;

  /* relations */
  --supports:  #1f9d6e;
  --opposes:   #cf4434;
  --addresses: #2483c2;
  --describes: #b35aa3;
  --grounds:   #259484;
  --versionof: #7445cc;
  --equivalentto: #927e30;

  /* super-nodes */
  --bundle:    #5d7480;
  --narrative: #8f7a47;
  --derived:   rgba(60, 76, 86, 0.42);

  /* overlay comparison halos */
  --halo-a: #e0501f;
  --halo-b: #1f8fd0;
  --halo-c: #8050e8;

  --ok:   #1f9d6e;
  --bad:  #cf4434;
  --warn: #b07d12;
  --seal: #2487aa;

  /* computed standing */
  --credible:  #1f9d6e;
  --contested: #c9741a;
  --weakened:  #a4503f;

  --select:    #bf9d3f;

  --shadow: 0 20px 50px -26px rgba(40, 45, 50, 0.30);
}

/* ---- chrome that hardcodes dark rgba in core.css / above (override for light) -- */
html.light .masthead {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 248, 243, 0.55));
}
html.light .vignette {
  background: radial-gradient(120% 90% at 50% 30%, transparent 62%, rgba(40, 45, 50, 0.07) 100%);
}
html.light .grain { opacity: 0.02; }
html.light .lens-switch { background: rgba(255, 255, 255, 0.5); }
html.light .auth-form input { background: rgba(255, 255, 255, 0.7); }
html.light .projector-corner { background: rgba(255, 255, 255, 0.84); }
html.light .projector-exit { background: rgba(255, 255, 255, 0.82); }
/* full-screen lobby / share scrim → light in light mode (the cards carry their own border + shadow) */
html.light .lobby,
html.light .share { background: rgba(244, 242, 236, 0.72); }

/* identity: on light the wordmark letters follow --text (near-black) for free;
   restore the TRUE brand green for the mark + swarm */
html.light .scios-wordmark { --scios-green: #3A5837; }
html.light .lobby-swarm { color: #3A5837; }

/* more core.css surfaces that hardcode dark backgrounds (text/borders already use
   variables, so only the panel fills need flipping) */
html.light .legend { background: rgba(255, 255, 255, 0.72); }
html.light .colophon { background: rgba(255, 255, 255, 0.70); }
html.light .picker { background: rgba(255, 255, 255, 0.82); }
html.light .compose-banner { background: rgba(255, 255, 255, 0.95); }
html.light .select-bar { background: rgba(255, 255, 255, 0.96); }
/* full-screen panels: reading view / opportunities / narrative composer / PDF import */
html.light .reader,
html.light .opportunities,
html.light .composer,
html.light .importer { background: linear-gradient(180deg, #ffffff, #faf8f3); }
/* their sticky header bars */
html.light .reader-bar,
html.light .opp-bar,
html.light .composer-bar { background: rgba(255, 255, 255, 0.85); }