/* SnapMind shared system (2026-10). Loaded LAST on every page so the website,
   the coach console and the Teams web pages share one foundation. Approved on
   SnapMind Training: the platform UI font, five type roles, three surface
   levels with a faint edge and soft shadow, 16/10/pill radii, visible focus.
   Page CSS may adapt layout; it should not redefine these tokens. */
:root {
  --sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sm-body: var(--sys); --sm-display: var(--sys);

  /* Surfaces: page, working surface, overlay */
  --black: #0C0D0F; --sunken: #08090A; --dark: #1F2126; --card: #1F2126;
  --raised: #2A2D33; --elevated: #2A2D33;
  --border: #2C2F35; --border-strong: #3B3F46;
  --edge: rgba(255,255,255,0.09);
  --shadow-1: 0 8px 24px rgba(0,0,0,0.38);
  --shadow-2: 0 18px 48px rgba(0,0,0,0.55);
  --white: #F4F5F7; --text-2: #BFC4CB; --gray-light: #BFC4CB; --gray: #A2A7AF; --muted: #A2A7AF; --muted-dark: #5C6068;
  --scrim: rgba(0,0,0,0.66);

  /* Radii: cards and media 16, controls 10, pills and avatars round */
  --r-sm: 10px; --r-md: 10px; --r-lg: 16px; --r-xl: 16px; --r-pill: 999px;

  /* Type roles */
  --fs-title: 1.75rem;   --lh-title: 2.125rem;   /* page title 28/34 */
  --fs-h2: 1.375rem;     --lh-h2: 1.75rem;       /* session / section lead 22/28 */
  --fs-h3: 1.125rem;     --lh-h3: 1.5rem;        /* section heading 18/24 */
  --fs-body: 1rem;       --lh-body: 1.5rem;      /* body 16/24 */
  --fs-meta: 0.8125rem;  --lh-meta: 1.125rem;    /* supporting 13/18 */
}
:root[data-theme="light"] {
  --black: #ECEEF1; --sunken: #E2E5E9; --dark: #FFFFFF; --card: #FFFFFF;
  --raised: #F4F5F7; --elevated: #FFFFFF;
  --border: #E3E6EA; --border-strong: #CDD2D8;
  --edge: rgba(16,24,40,0.08);
  --shadow-1: 0 6px 18px rgba(16,24,40,0.10);
  --shadow-2: 0 14px 40px rgba(16,24,40,0.20);
  --white: #15171A; --text-2: #4A4F57; --gray-light: #4A4F57; --gray: #5F656E; --muted: #5F656E;
  /* Pages use --muted-dark for real text (units, "never", tags, placeholders),
     not only disabled controls, so it has to read at 4.5:1 on the page. */
  --muted-dark: #626872; --sm-muted-dk: #626872;
  /* Status text on white and on its own tint: 4.5:1 or better. */
  --ok: #17703A; --sm-ok: #17703A; --c-good: #17703A; --t-good: #17703A;
  --warn: #9A5307; --sm-warn: #9A5307; --c-attn: #9A5307;
}

html, body, button, input, select, textarea { font-family: var(--sys); }
body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: normal; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--sys); font-weight: 600; letter-spacing: normal; text-wrap: balance; }
b, strong { font-weight: 600; }
p { text-wrap: pretty; }

/* Focus is always visible, in the brand colour. */
:focus-visible { outline: 2px solid var(--green, #C4D824); outline-offset: 2px; border-radius: 6px; }

/* Controls */
button, .btn, input[type="submit"] { border-radius: var(--r-md); font-weight: 500; }
input, select, textarea { border-radius: var(--r-md); }
input::placeholder, textarea::placeholder { color: var(--gray); opacity: 1; }
button:disabled, .btn:disabled, .btn[aria-disabled="true"] { opacity: 1; background: var(--raised) !important; color: var(--muted) !important; border-color: transparent !important; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* White wordmark on a page that turns light: swap to the ink version. */
:root[data-theme="light"] img.wm-swap { content: url(/images/brand/wordmark-ink-tight.png); }

/* Icon-only remove/close buttons: a 44px hit area without growing the layout.
   The visible button stays small; the transparent ring takes the tap. */
.x-btn, button.close, .row-remove, .remove-btn { position: relative; }
.x-btn::before, button.close::before, .row-remove::before, .remove-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}

/* The light/dark switch js/theme.js adds to pages that do not place their own.
   Small and quiet; the hit area is 44px. */
.sm-theme-btn { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; margin-left: auto; border-radius: 999px;
  background: transparent; color: var(--white); border: 1px solid var(--edge); cursor: pointer; position: relative; }
.sm-theme-btn::before { content: ""; position: absolute; inset: -4px; }
.sm-theme-btn:hover { background: var(--raised); }
.sm-theme-inline { margin-left: 8px; }
.sm-theme-corner { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 900;
  background: var(--dark); box-shadow: var(--shadow-1); }
.sm-theme-btn .ti-sun { display: none; }
:root[data-theme="light"] .sm-theme-btn .ti-moon { display: none; }
:root[data-theme="light"] .sm-theme-btn .ti-sun { display: block; }
/* Phone width: the public nav's switch beside the menu button. */
.nav-theme-bar { display: none !important; }
@media (max-width: 960px) {
  .navbar .nav-theme-bar { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; margin-right: 2px; color: #E6E8EB; }
}
/* The public nav stays dark in both themes, so its quiet links keep the
   light-on-dark grey. */
:root[data-theme="light"] .navbar { --gray: #A9AEB6; --muted: #A9AEB6; }
/* Lime as TEXT: the fill colour in dark, a deep olive in light (5:1 on the
   light page). Lime fills and buttons stay lime in both themes. */
:root { --lime-ink: #C4D824; }
:root[data-theme="light"] { --lime-ink: #5A650E; }
/* Inline wordmark in a heading: white lettering in dark, ink in light. Here as
   well as style.css because some pages (coach.html) load only this file. */
.wm-inline { display: inline-block; height: .84em; width: auto; vertical-align: -.04em; margin: 0 .04em; }
.wm-ink { display: none; }
:root[data-theme="light"] .wm-lt { display: none; }
:root[data-theme="light"] .wm-ink { display: inline-block; }

/* The white wordmark.png on pages that turn light: same canvas, ink lettering. */
:root[data-theme="light"] img[src$="/wordmark.png"]:not(.keep-white) { content: url(/images/brand/wordmark-ink.png); }