@import url("/light-clouds.css?v=20261007-still");

/* ============================================
   LIGHT THEME — additive override (Phase 1)

   Default site theme is DARK and is left fully intact. This file only
   applies when <html data-theme="light"> is set (theme-toggle.js + the
   inline <head> bootstrap). It scopes everything under
   html[data-theme="light"] so it cannot affect the dark default.

   Phase 1 covers the SHARED token vocabulary that the dark pages route
   their primary surfaces through (--cosmic/--bg, --t1..t4, --card-*,
   --b1/--b2, accents) PLUS the copy-pasted structural surfaces that
   hardcode literals instead of tokens (.cosmos backdrop, the
   `html,body{background:#1a0f1f}` rule). Per-component hardcoded
   literals are intentionally NOT chased here — that is the page-by-page
   Phase 2 mop-up.

   Specificity note: html[data-theme="light"] (0,1,1) and
   html[data-theme="light"] <sel> outrank both :root (0,1,0) and bare
   element/class rules, so no !important is needed.
   ============================================ */

/* ============================================
   Cross-document page transitions — REMOVED, DO NOT re-add

   View Transitions caused an intermittent white flash on navigation on
   this site (the incoming page's snapshot is sometimes captured before
   it paints dark). They are gone everywhere. The soft page fade is now a
   snapshot-free content fade-in defined in nav.js (body fades up from the
   dark-canvas guard). Do NOT add any @view-transition / ::view-transition
   rule here or anywhere — it reintroduces the flash.
   ============================================ */

/* Illustration cards share a clean white ground. Their SVG/canvas renderers
   inherit the same solid surface for cutouts and paint their own light ink. */
html[data-theme="light"] body :is(
  .identity-card.has-viz .selfless-viz-band,
  .dev-home-inset,
  .blocs-home-inset,
  .coord-home-inset,
  .state-home-inset
) {
  --surface-solid: #ffffff;
  background: #ffffff;
  border-color: #dcd4e7;
  box-shadow: 0 8px 24px rgba(49, 27, 70, 0.06);
}

html[data-theme="light"] body :is(.dev-home-inset, .blocs-home-inset) :is(
  .dev-home-stats, .dev-hs, .blocs-impact-stats, .blocs-impact-stat
) {
  border-color: #dcd4e7;
}

html[data-theme="light"] {
  color-scheme: light;

  /* --- Backgrounds (lightness-inverted, purple hue preserved) --- */
  --bg:        #ffffff;
  --cosmic:    #f6f4fa;
  --cosmic-2:  #efebf5;

  /* --- Text: near-black ink. Darker than a straight white-alpha invert
         — the muted greys read too faint/light on the pale backdrop. --- */
  --t1: rgba(17, 17, 27, 0.94);
  --t2: rgba(17, 17, 27, 0.74);
  --t3: rgba(17, 17, 27, 0.60);--lc-text-t3: rgba(17, 17, 27, 0.66);
  --t4: rgba(17, 17, 27, 0.46);--lc-text-t4: rgba(17, 17, 27, 0.66);
  --text:       var(--t2);
  --text-dim:   var(--t3);
  --text-faint: var(--t4);

  /* --- Borders / dividers: white-alpha -> black-alpha --- */
  --b1:             rgba(0, 0, 0, 0.08);
  --b2:             rgba(0, 0, 0, 0.12);
  --surface-border: rgba(0, 0, 0, 0.10);
  --b-gold:         rgba(161, 98, 7, 0.22);

  /* --- Glass surfaces: keep translucency, flip to white-on-light.
         Slightly more opaque than a literal invert + a crisper hairline
         so cards read as deliberate glass over the cloudscape, not flat
         white rectangles. --- */
  --card-bg:     rgba(255, 255, 255, 0.78);
  --card-border: rgba(17, 17, 27, 0.10);
  --surface:     rgba(17, 17, 27, 0.03);

  /* --- Accents: bright dark-bg pastels -> contrast-safe on white
         (values from the docs light-palette spec). Hue identity kept. --- */
  --gold:         #a16207;
  --gold-soft:    #b45309;
  --gold-dim:     rgba(161, 98, 7, 0.30);
  --purple:       #7c3aed;
  --purple-deep:  #5b21b6;
  --green:        #15803d;
  --green-bright: #047857;
  --amber:        #b45309;
  --rose:         #db2777;
  --rose-light:   #be185d;

  /* --- Elevation. Dark mode builds hierarchy by EMITTING light: glass
         glows brighter than the void, glow and blur read as depth. None
         of that exists on a pale page — you cannot add light to white —
         and light mode drops backdrop-filter sitewide (see below), so
         shadow is the only depth cue left. These are its vocabulary.

         Two things make them read as depth rather than dirt: they are
         tight and low-opacity (a 40px 22%-black blur, which is what the
         dark panels carry, is a grey smear on lavender), and they are
         tinted with the page's own purple instead of neutral black. --- */
  /* --- The opaque .panel-card fill, as a value rather than a rule. The
         card's own background-color below is the same colour; this token
         exists for the things that need to PAINT the card rather than sit
         on it — knockout shapes that punch a hole so something appears to
         pass behind them, which have to match the ground exactly and
         cannot use a translucent --card-bg.

         It is also the only way to reach the panel-visuals: those render
         into shadow roots, where no descendant selector from this file
         applies, but custom properties still inherit across the boundary.
         Keep it equal to .panel-card's background-color. --- */
  --surface-solid: #f6f4fb;

  --elev-1: 0 1px 2px rgba(76, 60, 110, 0.07);
  --elev-2: 0 1px 2px rgba(76, 60, 110, 0.06),
            0 6px 16px rgba(76, 60, 110, 0.10);
  --elev-3: 0 1px 2px rgba(76, 60, 110, 0.07),
            0 12px 32px rgba(76, 60, 110, 0.13);
}

/* --- Structural surfaces that hardcode literals instead of tokens.
   These selectors are copy-pasted identically across the dark family
   (selfless/developmental/coordinate/blocs/start), so a few rules cover
   all of them. --- */

html[data-theme="light"],
html[data-theme="light"] body {
  background: #ffffff;
  color: var(--t1);
}

/* Panel-shell labels are text, so use the readable text-role floor without
   changing the raw alpha tokens used by icons and decorative lines. */
html[data-theme="light"] body[data-shell="panel"] .panel-spine > span,
html[data-theme="light"] body[data-shell="panel"] .phome-domain {
  color: var(--lc-text-t4, var(--t4));
}
html[data-theme="light"] body[data-shell="panel"] .panel-back:not(:hover),
html[data-theme="light"] body[data-shell="panel"] .subtab:not(.active):not(:hover),
html[data-theme="light"] body[data-shell="panel"] .phome-sub,
html[data-theme="light"] body[data-shell="panel"] .phome-siblings-t {
  color: var(--lc-text-t3, var(--t3));
}

/* ════════════════════════════════════════════════════════════
   THE VALUE LADDER — page < card < readout

   This backdrop was #e9eaf0, and the panels were left on their own
   translucent purple-glass literal on the theory that it would render as
   a pale lavender card. Measured, that card came out at 1.05:1 against
   this backdrop and its stat tiles at 1.15:1 against the card — three
   layers inside a 1.2 band, which is why the page read as fog. Text
   contrast was never the problem (prose measures 14:1); surface
   separation was.

   A card cannot fix that on its own, because the card was already near
   white and white is the ceiling — lifting it alone only reached 1.14:1.
   So the floor comes down instead: the backdrop drops to #d9dae4, which
   buys the card room to sit above it (1.17:1 at its tinted top corner,
   1.25:1 across the body) while staying a soft grey rather than a slab.

   The card's own tint is what caps that top figure — purple paint pulls
   the card back down toward the page. That is why the tint below is a
   fraction of its dark-mode weight; at the dark 16% the top corner
   measures 1.10:1, i.e. worse than before any of this.

   This literal is duplicated in every page's inline <head> bootstrap (the
   anti-flash guard), in nav.js's mobile scrim + theme-color meta, in
   theme-toggle.js, in --shell-fade-rgb (panel-shell.css) and in
   .pdeck-scrim (profile-deck.css). They must all move together or you get
   a flash of the old colour on load and a seam where the mobile fade
   resolves. Grep the literal before changing it again.
   ════════════════════════════════════════════════════════════ */
html[data-theme="light"] .cosmos {
  background: #d9dae4;
}

/* ── The card layer ───────────────────────────────────────────
   .panel-card is copy-pasted with identical values into six sheets
   (state / selfless / coordinate / developmental / blocs / awakening),
   so one rule here re-grounds all of them. Only state.css had a light
   override before this, which meant the other five were still painting
   the DARK gradient in light mode — rgba(255,255,255,0.07) corner
   highlights, which are invisible on a pale page, over a 16% purple that
   is far too heavy for one. They rendered as a purple wash.

   Two changes. The card gets an OPAQUE near-white base, so it no longer
   inherits the backdrop it is supposed to sit above — that is the whole
   ladder. And the tint drops to a fraction of its dark weight: on black
   a 16% purple is a suggestion, on white it is paint.

   The shadow is the other half. Dark carries 0 16px 40px rgba(0,0,0,0.22)
   with an inset white top highlight; on lavender that is a grey smudge,
   and the highlight is invisible against a near-white fill. --elev-3
   replaces both. */
/* The card is FLAT in light — no background-image. The dark card is lit by
   corner highlights and a purple wash, and the light conversion carried that
   shape across at a fraction of the weight. Even at a fraction it was the
   wrong instrument: on black a gradient reads as light falling on a surface,
   on white it reads as a stain, and it was working against the one thing the
   card needs to do, which is sit clearly above the page. Removing it takes
   backdrop-to-card from 1.17:1 at the tinted top corner to a uniform 1.25:1
   — the tint was the only reason that corner was the weakest point.

   Elevation is carried by --elev-3 and the border instead. That is the whole
   argument of the light system: on a pale page depth comes from edge and
   shadow, not from painting the fill. */
html[data-theme="light"] .panel-card {
  background-color: #f6f4fb;
  background-image: none;
  border-color: var(--card-border);
  box-shadow: var(--elev-3);
}

/* Buttons read flat on the light backdrop — give action buttons a
   subtle elevation. There is no shared button class, so this is a
   class-pattern heuristic; nav chrome uses .nss-* names (no -btn/-cta)
   so it is unaffected. Scoped to light; dark untouched.

   Moved onto the shared elevation tokens: these were neutral black, which
   is the one thing that makes a shadow look like dirt on a tinted page.

   The element type is part of the selector on purpose. [class*="-btn"] is a
   SUBSTRING match — it means "has those four characters somewhere in a class
   name", not "is a button" — so it also caught every wrapper named after the
   buttons inside it: .pr-btn-row, .inv-card-btns, .apply-cta-wrap, and two
   whole <section>s. Each rendered a button's shadow around a region with a
   button loosely somewhere in it, which is the wide pale slab that showed up
   under Save Availability.

   Asking what the element IS rather than what it is called fixes all of them
   at once and makes future wrappers immune by construction — a
   <div class="whatever-btn-row"> can no longer match. [role="button"] keeps
   genuine span/div buttons working; none exist today, but adding one should
   not require touching this rule. */
html[data-theme="light"] button[class*="-btn"],
html[data-theme="light"] a[class*="-btn"],
html[data-theme="light"] label[class*="-btn"],
html[data-theme="light"] [role="button"][class*="-btn"],
html[data-theme="light"] button[class*="-cta"],
html[data-theme="light"] a[class*="-cta"],
html[data-theme="light"] label[class*="-cta"],
html[data-theme="light"] [role="button"][class*="-cta"],
html[data-theme="light"] button.btn,
html[data-theme="light"] a.btn,
html[data-theme="light"] label.btn,
html[data-theme="light"] [role="button"].btn {
  box-shadow: var(--elev-1);
}
html[data-theme="light"] button[class*="-btn"]:hover,
html[data-theme="light"] a[class*="-btn"]:hover,
html[data-theme="light"] label[class*="-btn"]:hover,
html[data-theme="light"] [role="button"][class*="-btn"]:hover,
html[data-theme="light"] button[class*="-cta"]:hover,
html[data-theme="light"] a[class*="-cta"]:hover,
html[data-theme="light"] label[class*="-cta"]:hover,
html[data-theme="light"] [role="button"][class*="-cta"]:hover,
html[data-theme="light"] button.btn:hover,
html[data-theme="light"] a.btn:hover,
html[data-theme="light"] label.btn:hover,
html[data-theme="light"] [role="button"].btn:hover {
  box-shadow: var(--elev-2);
}

/* No backdrop blur in light mode — panels stay translucent but the
   drifting clouds read crisply through/around them. Scoped to light so
   the dark glass aesthetic is untouched. backdrop-filter is set in
   dozens of per-page rules across 13 files; one scoped override is the
   maintainable way to drop it.

   The !important is gone. It was doing almost no work: of the 49 selectors
   that declare a real backdrop-filter, 44 already lose to this rule on
   specificity alone, and the five that do not are listed explicitly below.
   What it DID do was make the decision permanent — `*` plus !important meant
   no component could ever opt back in, even deliberately. Now a light-scoped
   class rule outranks this and blur is available where it is actually earned
   (something translucent floating over imagery, rather than over the flat
   backdrop, where blurring one colour just returns the same colour). Nothing
   renders differently today; this only reopens the door. */
html[data-theme="light"] * {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The five selectors in the whole codebase that declare a real backdrop-filter
   and outrank the universal rule above — all IDs, all in graph.css. Without
   these the blur would come back on exactly those elements the moment the
   !important came off, so they are killed explicitly rather than by force. */
html[data-theme="light"] #graph-controls,
html[data-theme="light"] #back-btn,
html[data-theme="light"] #graph-legend,
html[data-theme="light"] #user-tooltip,
html[data-theme="light"] #line-tooltip {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Particle canvas is tuned for screen-blend on black; on white it must
   darken instead of lighten, and be far subtler. */
html[data-theme="light"] .cosmos canvas {
  opacity: 0.16;
  mix-blend-mode: multiply;
}

/* The elevation heuristic above keys on the -btn/-cta name pattern, which
   also catches bare glyph buttons — ones that set `background: none` AND
   `border: none` and are nothing but an icon or a word. With no surface
   for the shadow to sit under, it renders as a detached rounded plate
   floating around the glyph. Most obvious on modal ✕ buttons, where it
   reads as a raised square that isn't there.

   Elevation only means anything on a button that has a surface, so the
   bare ones opt out. Close affordances opt out as a category — they are
   secondary chrome and shouldn't read as raised anywhere.

   .dir-mode-btn / .view-btn keep their elevation when .active, since the
   active state does fill (gold, and a tinted wash respectively) and so
   has a surface to be raised.

   Light-only, and it only removes a shadow light mode itself added —
   dark never had these. */
html[data-theme="light"] [class*="btn"][class*="close"],
html[data-theme="light"] [class*="btn"][class*="close"]:hover,
/* The trailing [class] on these three is a specificity bump, not a filter —
   it matches the same elements. Qualifying the elevation rule above by
   element type raised it from (0,2,1) to (0,2,2), which would otherwise
   outrank a plain class exclusion and put the floating shadow back on these
   three bare glyphs. The other exclusions here already carry a second
   attribute or a :not(), so they clear it on their own. */
html[data-theme="light"] .transcript-toggle-btn[class],
html[data-theme="light"] .transcript-toggle-btn[class]:hover,
html[data-theme="light"] .bp-secondary-btn[class],
html[data-theme="light"] .bp-secondary-btn[class]:hover,
html[data-theme="light"] .exp-quiet-btn[class],
html[data-theme="light"] .exp-quiet-btn[class]:hover,
html[data-theme="light"] .dir-mode-btn:not(.active),
html[data-theme="light"] .dir-mode-btn:not(.active):hover,
html[data-theme="light"] .view-btn:not(.active),
html[data-theme="light"] .view-btn:not(.active):hover {
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════
   WHITE TEXT ON A LIGHT GROUND — the sitewide sweep

   Every rule below sets near-white text that was written for the dark
   canvas and, on a light ground, renders somewhere between faint and
   completely invisible. They are collected here rather than fixed in
   place because editing them in place would change dark mode, which
   nothing in this file is allowed to do.

   HOW THE LIST WAS BUILT, and what is deliberately NOT in it.

   546 declarations in this codebase set near-white text in a rule that
   can apply in light mode. The overwhelming majority are correct: white
   on a photograph, white on a dark hero gradient, white on a filled
   accent button. Converting those would make them invisible the OTHER
   way, so the list was filtered rather than swept:

     - 51 live in sheets no themed page ever loads (recording, cockpit,
       page-builder, relationship, awakening, fit) — those pages have no
       light mode, so their white text is simply correct.
     - 276 already have a light override elsewhere.
     - 91 sit on a surface that is genuinely dark in both themes. That
       was decided by looking up what each element's own container
       paints, not by reading the class name: .br-* sits on .br-hero
       (a #2a1635 gradient) under .br-hero-scrim; .bl-card-* on the
       .bl-card gradient under .bl-card-overlay; .course-title on
       .course-overlay::before; .big-dev-* on .big-dev-card; .pvl-* on
       .pvl-hero-grad; .proto-card-* on that card's photo veil;
       .dev-lib-* on .dev-lib-card. All keep their white.

   What is left is text on panels, forms, lists and editors — surfaces
   that are light in light mode. Alpha maps onto the ink scale so the
   original hierarchy survives the conversion rather than flattening:

     >= 0.90 -> --t1     0.70-0.89 -> --t2
     0.50-0.69 -> --t3   < 0.50    -> --t4

   Verified at runtime, not only on paper: a z-order-aware audit walks
   the real paint stack under each element (elementsFromPoint, so an
   overlay or photograph between the text and its ancestor is seen) and
   reports anything near-white landing under 4.5:1.

   One known blind spot in that audit, recorded so the next person does
   not chase it: elementsFromPoint skips pointer-events:none layers, so
   text over such an overlay reports the wrong backdrop. .id-name and
   .id-bio flag there and are FINE — measured 18.7:1 against the
   artwork and its 58% scrim.
   ════════════════════════════════════════════════════════════ */

html[data-theme="light"] .aw-card-section > span,
html[data-theme="light"] .aw-edit-card,
html[data-theme="light"] .aw-reflection-ready,
html[data-theme="light"] .aw-review-step > span,
html[data-theme="light"] .aw-week-current > span,
html[data-theme="light"] .aw-week-step-n,
html[data-theme="light"] .dev-attention-primary[data-attention-class="commitment_action"] .dev-attention-kicker,
html[data-theme="light"] .dev-empty h2,
html[data-theme="light"] .dev-paused h2,
html[data-theme="light"] .dev-pre-start h2,
html[data-theme="light"] .dev-private h2,
html[data-theme="light"] .dev-suspended h2,
html[data-theme="light"] .fe-editor-title,
html[data-theme="light"] .pa-saved-title,
html[data-theme="light"] .pdeck-aud-t,
html[data-theme="light"] .pdeck-medium-card,
html[data-theme="light"] .pdeck-medium-opt,
html[data-theme="light"] .pdeck-medium-otitle,
html[data-theme="light"] .person-name,
html[data-theme="light"] .sequence-title {
  color: var(--t1);
}
html[data-theme="light"] .cit-sharing-key,
html[data-theme="light"] .fe-pledge-amt,
html[data-theme="light"] .fe-ranked-mode,
html[data-theme="light"] .next-action-text,
html[data-theme="light"] .pdeck-medium-q,
html[data-theme="light"] .pdeck-prompts-list,
html[data-theme="light"] .pdeck-share-q {
  color: var(--t2);
}
html[data-theme="light"] .cit-action-secondary,
html[data-theme="light"] .fe-pledge-prefix,
html[data-theme="light"] .fe-recorder-label,
html[data-theme="light"] .pa-saved-sub,
html[data-theme="light"] .pdeck-aud-d,
html[data-theme="light"] .pdeck-aud-ic,
html[data-theme="light"] .pdeck-invite-label,
html[data-theme="light"] .pdeck-medium-hint,
html[data-theme="light"] .pdeck-medium-osub,
html[data-theme="light"] .pdeck-medium-sub,
html[data-theme="light"] .pdeck-prompts-label,
html[data-theme="light"] .sequence-description {
  color: var(--lc-text-t3, var(--t3));
}
html[data-theme="light"] .exp-invited,
html[data-theme="light"] .fe-editor-pos,
html[data-theme="light"] .fe-options-empty,
html[data-theme="light"] .fe-options-head,
html[data-theme="light"] .fe-pledge-note,
html[data-theme="light"] .fe-pledge-suffix,
html[data-theme="light"] .legend-item,
html[data-theme="light"] .pdeck-end-dismiss,
html[data-theme="light"] .pdeck-opt {
  color: var(--lc-text-t4, var(--t4));
}

/* The shared composer also opens from readers outside Selflessness. Keep its
   step, invite and medium controls readable wherever the deck is mounted. */
html[data-theme="light"] .pdeck-primary:not(:disabled):not([aria-disabled="true"]):not(.is-disabled),
html[data-theme="light"] #artifacts .pdeck-primary:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #ffffff;
}
html[data-theme="light"] .pdeck-primary:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover,
html[data-theme="light"] #artifacts .pdeck-primary:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover {
  background: #5b21b6;
  border-color: #5b21b6;
}
html[data-theme="light"] .pdeck-label,
html[data-theme="light"] #artifacts .pdeck-label {
  color: var(--t2);
}
html[data-theme="light"] #artifacts .pa-editor-panel .pa-panel-kicker,
html[data-theme="light"] #artifacts .pa-editor-panel .pdeck-wordcount,
html[data-theme="light"] #artifacts .pa-editor-panel .pdeck-hint,
html[data-theme="light"] #artifacts .pa-editor-panel .pdeck-note {
  color: var(--lc-text-t3, var(--t3));
}
html[data-theme="light"] :is(.pdeck-input, .pdeck-textarea, .pa-preview-input, .pa-preview-textarea)::placeholder,
html[data-theme="light"] #artifacts :is(.pdeck-input, .pdeck-textarea, .pa-preview-input, .pa-preview-textarea)::placeholder {
  color: var(--lc-text-t4, var(--t4));
  opacity: 1;
}
html[data-theme="light"] .pdeck-step-dot,
html[data-theme="light"] .pdeck-step-dot.is-done {
  color: var(--lc-text-t3, var(--t3));
}
html[data-theme="light"] .pdeck-step-dot.is-active {
  color: var(--t1);
}
html[data-theme="light"] .pdeck-step-n {
  border-color: var(--b3, rgba(17, 17, 27, .3));
}
html[data-theme="light"] .pdeck-step-dot.is-active .pdeck-step-n {
  border-color: transparent;
  color: #ffffff;
}
html[data-theme="light"] .pdeck-step-dot.is-done .pdeck-step-n {
  color: rgb(var(--section-accent-rgb, 124, 58, 237));
  border-color: currentColor;
}
html[data-theme="light"] .pdeck-chip,
html[data-theme="light"] .pdeck-medium-tab,
html[data-theme="light"] .pdeck-medium-tab:hover,
html[data-theme="light"] .pdeck-medium-tab.is-active {
  color: var(--t2);
}
html[data-theme="light"] .pdeck-chip-x {
  background: var(--surface);
}
html[data-theme="light"] .pdeck-medium-tab:not(.is-active) {
  border-color: var(--b2);
  background: var(--surface);
}
html[data-theme="light"] .pdeck-medium-card,
html[data-theme="light"] .pdeck-medium-opt,
html[data-theme="light"] .pdeck-medium-card:hover,
html[data-theme="light"] .pdeck-medium-opt:hover {
  background: #ffffff;
  border-color: var(--b3, rgba(17, 17, 27, .2));
}
html[data-theme="light"] .pdeck-medium-card:hover,
html[data-theme="light"] .pdeck-medium-opt:hover,
html[data-theme="light"] .pdeck-medium-tab:hover {
  border-color: rgba(var(--section-accent-rgb, 124, 58, 237), .6);
}
html[data-theme="light"] .pdeck-aud-check {
  border-color: var(--b3, rgba(17, 17, 27, .3));
}
html[data-theme="light"] .pdeck-aud-row.is-selected .pdeck-aud-check {
  background: radial-gradient(circle at 50% 50%, #ffffff 0 3px, transparent 4px),
    rgb(var(--section-accent-rgb, 124, 58, 237));
}

/* The audience/visibility ladder. These carry the DARK palette's pale
   accents — mint, gold, pink at 0.92 — which land at 1.16-1.58:1 on a
   light panel. They are a semantic set (who can see this), so each takes
   its light counterpart rather than flattening to grey. Found by the
   runtime audit; the static pass missed them because a light override
   for the family already existed, just not for these members. */
html[data-theme="light"] .pdeck-circle-access-rung {
  color: var(--t2);
}
html[data-theme="light"] .pdeck-circle-access-community {
  color: var(--green);
}
html[data-theme="light"] .pdeck-circle-access-society {
  color: var(--gold);
}
html[data-theme="light"] .pdeck-circle-access-hidden {
  color: var(--rose);
}
html[data-theme="light"] .pdeck-circle-section-kicker {
  color: var(--lc-text-t3, var(--t3));
}
html[data-theme="light"] .pdeck-circle-section-head p,
html[data-theme="light"] .pdeck-circle-intro p {
  color: var(--lc-text-t3, var(--t3));
}
html[data-theme="light"] .pdeck-circle-depth-header {
  color: var(--t2);
}
html[data-theme="light"] .pdeck-circle-list-lb {
  color: var(--lc-text-t3, var(--t3));
}
html[data-theme="light"] .pdeck-circle-ladder-icon {
  color: var(--lc-text-t4, var(--t4));
}

/* October 8 owner rollout: One Cosmos, Two Lights, Selflessness →
   Developmental → Blocs → Coordinate → State. 20% is shell BACKGROUND alpha, never element opacity.
   Supersedes the opaque shell rationale above only for these five domains.
   Reading overlays and image scrims retain their protective materials. */
html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="selfless"],[data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) {
  --nss-light-shell: rgba(252,250,255,.20);
  --nss-light-connected: rgba(255,255,255,.20);
  --nss-light-wash: radial-gradient(ellipse 60% 60% at 100% 0%,rgba(255,255,255,.10),transparent 65%),radial-gradient(ellipse 60% 60% at 0% 100%,rgba(255,255,255,.08),transparent 65%),radial-gradient(ellipse 110% 80% at 50% 0%,rgba(117,91,183,.08),rgba(117,91,183,.035) 45%,rgba(117,91,183,.01));
}
html[data-theme="light"] body[data-shell="panel"][data-nav-key="selfless"] {
  --selfless-glass-fill: var(--nss-light-shell);
}
html[data-theme="light"] body[data-shell="panel"][data-nav-key="selfless"] .sintro .si-shell {
  background: radial-gradient(ellipse at 30% 15%,rgba(117,91,183,.13),transparent 65%),var(--nss-light-shell);
}
html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) {
  --t1:#24192c; --t2:#493e51; --t3:#555562; --t4:#5f5a6b;
  --lc-text-t3:var(--t3); --lc-text-t4:var(--t4);
  --text:var(--t2); --text-dim:var(--t3); --text-faint:var(--t4);
  --nss-theme-rgb:21,128,61;
}
html[data-theme="light"] body[data-shell="panel"][data-nav-key="projects"] { --nss-theme-rgb:161,98,7; }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] { --nss-theme-rgb:190,24,93; }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="states"] { --nss-theme-rgb:31,41,55; }
html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) .panel-card {
  background:var(--nss-light-wash),var(--nss-light-shell);
  border-color:rgba(145,125,174,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 28px rgba(49,27,70,.07);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* The guided week paints a menu/content split over one shell, including on
   phones. Keep that hierarchy; do not stack another white shell behind it. */
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] #week .panel-card:has(.aw-guided) {
  background:linear-gradient(to right,rgba(67,43,90,.08) 0 260px,transparent 260px 100%),var(--nss-light-shell);
}
html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) :is(.dev-home-inset,.blocs-home-inset,.coord-home-inset) {
  background:linear-gradient(180deg,rgba(var(--nss-theme-rgb),.07),rgba(var(--nss-theme-rgb),0));
  border-color:rgba(var(--nss-theme-rgb),.20);
  box-shadow:inset 0 1px 8px rgba(49,27,70,.14);
}
html[data-theme="light"] body[data-shell="panel"][data-nav-key="projects"] .blocs-home-inset { box-shadow:inset 0 1px 9px rgba(49,27,70,.15); }
@media(min-width:901px) {
  html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) .pnav-item {
    color:rgb(var(--nss-theme-rgb)); border-color:rgba(var(--nss-theme-rgb),.65);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(49,27,70,.09);
  }
  html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) .pnav-item:hover {
    background:rgba(var(--nss-theme-rgb),.10); border-color:rgb(var(--nss-theme-rgb));
  }
  html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) .pnav-item.active {
    background:linear-gradient(180deg,rgba(var(--nss-theme-rgb),.34),rgba(var(--nss-theme-rgb),.22));
    border-color:rgb(var(--nss-theme-rgb));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 4px 14px rgba(49,27,70,.16);
  }
}
html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) :is(button,a,input,select,textarea):focus-visible {
  outline:2px solid rgb(var(--nss-theme-rgb)); outline-offset:3px;
}
/* Ordinary cards/controls transmit the shell. Overlapping menus/dialogs below
   deliberately do not: foreground and background words must never mix. */
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] :is(.aw-build-layout .aw-day,.aw-size-choice,.aw-reflection-review,.aw-live-card) { background:rgba(255,255,255,.20); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .aw-build-layout .aw-day.is-selected { background:rgba(21,128,61,.12); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .aw-guided-card { box-shadow:0 8px 24px rgba(49,27,70,.08); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .sacred-day-panel {
  --sd-surface:rgba(255,255,255,.16); --sd-base:rgba(117,91,183,.07);
}
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .sacred-day-panel .stodo-content { background:var(--nss-light-connected); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .sacred-day-panel .stodo-item[aria-current=step] { background:var(--nss-light-connected); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .sacred-day-panel .sd-button:not(.sd-secondary) { box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(22,101,52,.12); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .aw-week-log-dialog { background:#fcfaff; }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="projects"] :is(.bl-skillmenu-btn,.bl-search,.bl-search:focus-within) { background:rgba(255,255,255,.20); }
@media(max-width:900px) {
  html[data-theme="light"] body[data-shell="panel"]:is([data-nav-key="develop"],[data-nav-key="projects"],[data-nav-key="coordinate"],[data-nav-key="states"]) .panel-card {
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] #week .panel-card:has(.aw-guided) { background:var(--nss-light-shell); }
}

/* Inquiries' resting menu is part of the panel, not a floating overlay.
   Keep a protective ground only for a foreground layer covering another menu. */
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .inq4-nav-shell { background:transparent; }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] .inq4-nav-shell>.inq4-menu { background:var(--nss-light-shell); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="develop"] :is(.inq4-nav-shell>.inq4-secondary,.inq4-nav-shell.is-peeking>.inq4-menu) { background:#fcfaff; }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] .coord-home-inset { box-shadow:inset 0 1px 9px rgba(49,27,70,.15); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="states"] .state-home-inset {
  background:linear-gradient(180deg,rgba(117,91,183,.07),rgba(117,91,183,0));
  border-color:rgba(117,91,183,.20);
  box-shadow:inset 0 1px 9px rgba(49,27,70,.15);
}
/* Coordinate's learning panel remains gold; its connected surfaces share one
   material. Do not alter booking's opaque sticky savebar or portrait scrims. */
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] .sacred-day-panel {
  --sd-surface:rgba(255,255,255,.16); --sd-base:rgba(117,91,183,.07);
}
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] .sacred-day-panel :is(.stodo-content,.stodo-item[aria-current=step]) { background:var(--nss-light-connected); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] .sacred-day-panel .sd-button:not(.sd-secondary) { box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(138,100,0,.12); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] :is(.pr-book-grid>.pr-card.pr-book,.pr-pick-row,.pr-session) { background:rgba(255,255,255,.20); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] .pr-pick-row:hover { background:rgba(161,98,7,.08); }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] #society :is(.society-filters,.society-search-matches,.society-corner,.society-active-filters) { background:#fcfaff; }
html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] #society .society-filter-heading { box-shadow:0 -16px 0 0 #fcfaff; }
@media(max-width:900px) {
  html[data-theme="light"] body[data-shell="panel"][data-nav-key="coordinate"] #society .phome-siblings { background:#fcfaff; }
}