/* public/leader.css (ODS-SUITE-2 S2c) -- page-specific rules for
   leader.html ONLY. public/styles.css stays untouched.

   Overrides the vendored switcher's own --mw-sw-* custom properties
   (public/vendor/mw-suite/v2/mw-app-switcher.css) with THIS app's own
   theme tokens, keyed off html[data-theme] -- never the switcher
   element's own [data-theme] attribute (leader.js never sets one) or
   the OS prefers-color-scheme media query the vendored file's own
   default rule reacts to. This app's active theme (Light/Dark/Founder)
   is set on <html> by public/theme.js independent of the OS preference,
   so Light is listed explicitly too: without it, a Light-themed page
   under a dark OS preference would be pulled dark by the vendored
   file's own `@media (prefers-color-scheme: dark)` block, which only
   ever guards on the switcher ELEMENT's own [data-theme] (never set
   here), not on the page's.

   Each block below repeats the same COL-token mapping; only the
   selector's [data-theme] value changes, so a theme's own colors always
   come from styles.css's own tokens for that theme, never a second,
   hand-duplicated copy of Founder's black or Dark's navy. */

html[data-theme="light"] mw-app-switcher,
html[data-theme="dark"] mw-app-switcher,
html[data-theme="black"] mw-app-switcher {
  --mw-sw-ink: var(--ink);
  --mw-sw-muted: var(--muted);
  --mw-sw-paper: var(--surface-raised);
  --mw-sw-bone: var(--bone);
  --mw-sw-line: var(--line-soft);
  --mw-sw-accent: var(--cobalt-deep);
  --mw-sw-accent-soft: var(--info-soft);
  --mw-sw-gold: var(--signal);
  --mw-sw-gold-soft: var(--signal-soft);
  --mw-sw-focus: var(--focus);
}

#signed-in .chip-row { align-items: center; }

/* Match the shared form control tokens without restyling other password fields. */
#private-rehearsal-secret {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: var(--surface-inset);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
@media (max-width: 600px) {
  #private-rehearsal-secret { min-height: 48px; }
}

.session-row .session-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.session-row .session-name { font-size: 1.05rem; }

/* Quiet application shell, distinct from the editorial public website. */
.leader-workspace { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100dvh; }
.leader-content.page-shell { width: 100%; max-width: 1180px; min-width: 0; margin: 0 auto; padding: 24px 40px; }
.workspace-rail { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: 28px 18px; border-right: 1px solid var(--line-soft); background: var(--surface); overflow-y: auto; }
.workspace-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; }
.workspace-brand small { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; font-weight: 500; }
.workspace-nav-label { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: .7rem; margin: 28px 12px 0; }
.workspace-rail nav { display: grid; gap: 6px; }
.workspace-nav-item { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: .88rem; }
.workspace-nav-item[aria-current="page"] { background: var(--info-soft); font-weight: 700; box-shadow: inset 3px 0 var(--cobalt-deep); }
.workspace-nav-item:hover { background: var(--surface-inset); }
.workspace-boundary { margin-top: auto; padding: 18px 12px 0; border-top: 1px solid var(--line-soft); font-size: .8rem; }
.workspace-boundary p { color: var(--muted); line-height: 1.6; }
.workspace-site-link { padding: 12px; min-height: 44px; font-size: .8rem; color: var(--cobalt-deep); }
.workspace-heading { margin: 32px 0 22px; max-width: 720px; }
.workspace-heading h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; margin: 8px 0 12px; }
.workspace-heading p { color: var(--muted); line-height: 1.6; }
.leader-content .app-bar { padding: 12px 16px; min-height: 64px; border-radius: 16px; }
.workspace-outcome { display: none; }
.workspace-access-note { color: var(--muted); font-size: .8rem; line-height: 1.6; margin-top: 20px; }
.workspace-empty p { color: var(--muted); max-width: 620px; line-height: 1.6; }
.workspace-unavailable { border-color: var(--warning-ink); margin-bottom: 20px; }
.workspace-unavailable p { color: var(--muted); line-height: 1.6; }
.workspace-skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 16px; background: var(--surface-raised); color: var(--ink); transform: translateY(-200%); }
.workspace-skip:focus { transform: none; }
.workspace-rail a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.leader-first-workshop { border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 12px; }
.leader-first-workshop summary { cursor: pointer; font-weight: 650; min-height: 44px; padding: 10px 0; }
.leader-first-workshop summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.leader-first-workshop ol { padding-left: 1.5rem; line-height: 1.6; }
.leader-first-workshop li + li { margin-top: 10px; }
.leader-first-workshop p { margin-bottom: 0; }

/* Founder is a device-local appearance, not a new privilege. */
html[data-theme="black"] .leader-workspace { --surface: #0e0e10; background: var(--bone); }
html[data-theme="black"] .workspace-nav-item[aria-current="page"] { box-shadow: inset 3px 0 var(--cobalt); }
html[data-theme="black"] .workspace-outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 20px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--info-soft); }
.workspace-outcome strong { display: block; margin-top: 6px; }
.workspace-outcome-label { color: var(--cobalt-deep); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.workspace-outcome p { color: var(--muted); font-size: .85rem; margin: 0; line-height: 1.6; }

@media (max-width: 850px) {
  .leader-workspace { grid-template-columns: 1fr; }
  .workspace-rail { position: static; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .workspace-rail nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-nav-label { margin: 8px 12px 0; }
  .workspace-boundary { display: none; }
  .workspace-site-link { padding: 8px 12px; }
  .leader-content.page-shell { padding: 20px; }
  .workspace-heading { margin-top: 24px; }
  html[data-theme="black"] .workspace-outcome { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 400px) {
  .leader-content.page-shell { padding: 16px; }
  .workspace-nav-item { font-size: .8rem; padding: 10px; }
  .leader-content .app-bar { padding: 12px; }
}