/* W0A tokens (@melro/ui-design dist/tokens.css) */
/* Generated from W0A design/tokens.json. Edit the governing source, never this artifact. */

:root {
  color-scheme: light;
  --color-ground: #F7F5EF;
  --color-surface: #FFFFFF;
  --color-fill: #EEEAE1;
  --color-hover: #FAF9F5;
  --color-selected: #F1EFE8;
  --color-text: #181816;
  --color-text-secondary: #4A4843;
  --color-text-tertiary: #676760;
  --color-field-border: #84837A;
  --color-divider: #D7D5CD;
  --color-divider-subtle: #EEEAE1;
  --color-action-primary: #181816;
  --color-action-primary-text: #F7F5EF;
  --color-action-primary-hover: #2B2A27;
  --color-link: #181816;
  --color-link-underline: #A9A79F;
  --color-focus: #181816;
  --color-brand: #F45130;
  --color-brand-glow: rgba(244, 81, 48, 0.40);
  --color-negative-fg: #B42335;
  --color-negative-bg: #FBE3E6;
  --color-positive-fg: #1D7A4B;
  --color-positive-bg: #E5F3EB;
  --color-caution-fg: #8F5D00;
  --color-caution-bg: #FCF1D8;
  --color-caution-mark: #C27C00;
  --color-neutral-fg: #5B6371;
  --color-neutral-bg: #EEF0F3;
  --color-test-fg: #5B3FA6;
  --color-test-bg: #ECE6F7;
  --tint-practice: #FBE9DC;
  --tint-team: #E4EDE2;
  --tint-create: #F1EADB;
  --tint-developers: #E3E8EE;
  --tint-reports: #EFE4EE;
  --tint-settings: #EAE8E3;
  --tint-practice-mark: #E8A27A;
  --tint-team-mark: #7FA67A;
  --tint-create-mark: #C9A45F;
  --tint-developers-mark: #7FA6CC;
  --tint-reports-mark: #B98AB3;
  --tint-settings-mark: #A29F98;
  --color-chrome: #181816;
  --color-chrome-raised: #24231F;
  --color-chrome-text: #F7F5EF;
  --color-chrome-text-secondary: #B9B6B0;
  --color-chrome-text-tertiary: #A29F98;
  --color-chrome-line: rgba(247, 245, 239, 0.12);
  --color-chrome-hover: rgba(247, 245, 239, 0.07);
  --color-chrome-current: rgba(247, 245, 239, 0.11);
  --color-stage: #181816;
  --color-stage-deep: #0F0F0E;
  --color-on-stage-action: #F7F5EF;
  --color-on-stage-action-text: #181816;
  --color-on-stage-action-lip: #8C8983;
  --font-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-display-xl: clamp(40px, 5.4vw, 68px);
  --fs-display-l: clamp(32px, 4.2vw, 52px);
  --fs-page-title: 28px;
  --fs-section: 17px;
  --fs-figure: 30px;
  --fs-body-calm: 16px;
  --fs-body-team: 15px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-label: 12.5px;
  --fs-mono: 13px;
  --fs-mono-dense: 12px;
  --target-touch: 44px;
  --target-desk: 32px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --r-sm: 8px;
  --r-control: 10px;
  --r-card: 12px;
  --r-calm: 20px;
  --r-stage: 28px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(24, 24, 22, 0.08), 0 1px 1px rgba(24, 24, 22, 0.04);
  --shadow-2: 0 12px 32px rgba(24, 24, 22, 0.18), 0 2px 6px rgba(24, 24, 22, 0.08);
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  --color-ground: #181816;
  --color-surface: #201F1D;
  --color-fill: #2A2926;
  --color-hover: #252422;
  --color-selected: #2C2B28;
  --color-text: #F2F0EA;
  --color-text-secondary: #C9C6BF;
  --color-text-tertiary: #A29F98;
  --color-field-border: #84827A;
  --color-divider: #3A3834;
  --color-divider-subtle: #2C2B28;
  --color-action-primary: #F2F0EA;
  --color-action-primary-text: #181816;
  --color-action-primary-hover: #FFFFFF;
  --color-link: #F2F0EA;
  --color-link-underline: #6E6C66;
  --color-focus: #F2F0EA;
  --color-negative-fg: #F4A3AC;
  --color-negative-bg: #3D1D22;
  --color-positive-fg: #8FD4AE;
  --color-positive-bg: #173326;
  --color-caution-fg: #E8C27A;
  --color-caution-bg: #3A2D12;
  --color-caution-mark: #E0A43A;
  --color-neutral-fg: #C3C8D1;
  --color-neutral-bg: #2B2E34;
  --color-test-fg: #C9B8F2;
  --color-test-bg: #2E2547;
  --tint-practice: #3A2A20;
  --tint-team: #26312A;
  --tint-create: #332D23;
  --tint-developers: #262B32;
  --tint-reports: #33262F;
  --tint-settings: #2D2B27;
  --color-chrome: #0F0F0E;
  --color-chrome-raised: #1A1918;
  --color-stage: #0F0F0E;
  --color-stage-deep: #0A0A09;
  }
}

:root, .theme-light, .theme-dark {
  --component-space-1: 1px;
  --component-space-2: 2px;
  --component-space-3: 3px;
  --component-space-5: 5px;
  --component-space-6: 6px;
  --component-space-7: 7px;
  --component-space-9: 9px;
  --component-space-10: 10px;
  --component-space-11: 11px;
  --component-space-14: 14px;
  --component-space-18: 18px;
  --component-space-22: 22px;
  --component-space-28: 28px;
  --component-space-30: 30px;
  --component-space-36: 36px;
  --component-space-56: 56px;
  --layout-zero: 0;
  --layout-auto-margin: auto;
  --layout-gutter-wide: clamp(16px, 3vw, 40px);
  --layout-gutter-calm: clamp(16px, 3vw, 32px);
  --shape-detail-2: 2px;
  --shape-circle: 50%;
  --shape-detail-4: 4px;
  --shape-detail-3: 3px;
  --shape-detail-6: 6px;
  --shape-detail-1: 1px;
  --shape-square: 0;
  --component-space-26: 26px;
  --shape-detail-24: 24px;
  --shape-detail-20: 20px;
  --shape-detail-18: 18px;
  --shape-detail-16: 16px;
  --component-font-14-5: 14.5px;
  --component-font-14: 14px;
  --component-size-30: 30px;
  --component-size-64: 64px;
  --component-size-96: 96px;
  --component-size-voice-stage: clamp(150px, 30vh, 260px);
  --component-size-36: 36px;
  --component-size-14: 14px;
  --component-size-300: 300px;
  --component-size-400: 400px;
  --component-size-440: 440px;
  --component-line-1: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-offset-inset: -2px;
}

.mx-skip {
  --component-effect-19: none;
}

.mx-rail-page[aria-current="page"] {
  --component-effect-79: inset 3px 0 0 var(--color-chrome-text);
}

.mx-incident i {
  --component-effect-84: 0 0 0 3px rgba(224,164,58,.25);
}

.mx-subnav a {
  --component-effect-110: inset 0 -2px 0 transparent;
}

.mx-subnav a[aria-current="page"], .mx-subnav a[aria-selected="true"] {
  --component-effect-112: inset 0 -2px 0 var(--color-text);
}

.mx-lhead nav a {
  --component-effect-125: inset 0 -2px 0 transparent;
}

.mx-lhead nav a[aria-current="page"] {
  --component-effect-126: inset 0 -2px 0 var(--color-chrome-text);
}

.mx-btn--press {
  --component-effect-151: 0 3px 0 var(--color-text);
}

.mx-btn--press:active {
  --component-effect-152: 0 1px 0 var(--color-text);
}

.mx-btn--primary.mx-btn--press {
  --component-effect-153: 0 4px 0 #000;
}

.mx-btn--on-stage {
  --component-effect-154: 0 4px 0 var(--color-on-stage-action-lip);
}

.mx-btn--on-stage:active {
  --component-effect-156: 0 1px 0 var(--color-on-stage-action-lip);
}

.mx-btn--ghost-on-stage {
  --component-effect-157: inset 0 0 0 1px rgba(247,245,239,.22);
}

.mx-field.has-error .mx-input, .mx-field.has-error .mx-select, .mx-field.has-error .mx-textarea {
  --component-effect-175: 0 0 0 1px var(--color-negative-fg);
}

.mx-radio-card.is-checked {
  --component-effect-186: 0 0 0 1px var(--color-text);
}

.mx-table tr.is-selected {
  --component-effect-247: inset 3px 0 0 var(--color-text);
}

.vb-ball {
  --component-effect-341: inset 0 -14px 34px rgba(120,28,8,.22);
}

.mx-branded .mx-rail-page[aria-current="page"] {
  --component-effect-416: inset 3px 0 0 var(--color-brand-customer);
}


/* W0A self-hosted fonts (@melro/ui-design dist/fonts.css), URLs rewritten to hashed assets */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-wght-normal.a97804dc9fbe.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext-wght-normal.e808f16b56f8.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/Geist-Variable.9ce2d97863ca.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/GeistMono-Variable.119f3e159fc1.woff2') format('woff2');
}

/* W0A reference component styles (specs/frontend/W0A/design/ui.css), byte-identical */
/* Melro UI — component styles for the launch designs, 22 October 2026.
   Reads tokens.css. Class names are the design reference for @melro/ui-design (W0A) and the shell (W0B).
   Prefix: mx-. Density classes on the page root: mx-calm (Practice), mx-team (Team), mx-scan (Create, Reports, Settings), mx-tech (Developers). */

/* ---------- Base ---------- */
.mx { position: relative; box-sizing: border-box; min-height: 100vh; background: var(--color-ground); color: var(--color-text); font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }
:where(.mx) *, :where(.mx) *::before, :where(.mx) *::after { box-sizing: border-box; }
:where(.mx) a { color: inherit; text-decoration: none; }
.mx a:focus-visible, .mx button:focus-visible, .mx input:focus-visible, .mx select:focus-visible, .mx textarea:focus-visible, .mx summary:focus-visible, .mx [tabindex]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.mx-on-chrome a:focus-visible, .mx-on-chrome button:focus-visible, .mx-on-chrome select:focus-visible, .mx-on-chrome input:focus-visible { outline-color: var(--color-chrome-text); }
:where(.mx) button { font: inherit; color: inherit; }
:where(.mx) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: var(--layout-zero); }
:where(.mx) :where(ul, ol) { padding: var(--layout-zero); }
.mx-calm { font-size: var(--fs-body-calm); }
.mx-team { font-size: var(--fs-body-team); }
.mx-scan { font-size: var(--fs-body); }
.mx-tech { font-size: var(--fs-body); line-height: 1.45; }
.mx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mx-skip { position: absolute; left: 12px; top: -80px; z-index: 10; padding: var(--component-space-10) var(--component-space-14); border-radius: var(--r-control); background: var(--color-surface); color: var(--color-text); box-shadow: var(--component-effect-19); font-weight: 600; }
.mx-skip:focus { top: 12px; box-shadow: var(--shadow-2); }
@media (prefers-reduced-motion: reduce) { .mx *, .mx *::before, .mx *::after { animation: none !important; transition: none !important; } }

/* ---------- Type ---------- */
.mx-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; font-size: var(--fs-display-xl); }
.mx-display-l { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; font-size: var(--fs-display-l); }
.mx-h1 { font-family: var(--font-display); font-size: var(--fs-page-title); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; }
.mx-calm .mx-h1 { font-size: var(--fs-display-l); font-weight: 700; letter-spacing: -0.045em; }
.mx-h2 { font-size: var(--fs-section); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.mx-h2-display { font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.mx-h3 { font-size: 15px; line-height: 1.35; font-weight: 600; }
.mx-lead { font-size: 15px; color: var(--color-text-secondary); max-width: 66ch; }
.mx-calm .mx-lead { font-size: 18px; }
.mx-small { font-size: var(--fs-small); }
.mx-muted { color: var(--color-text-secondary); }
.mx-faint { color: var(--color-text-tertiary); }
.mx-label { font-size: var(--fs-label); font-weight: 600; color: var(--color-text-tertiary); }
.mx-mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.mx-num { font-variant-numeric: tabular-nums; }
.mx-figure { font-family: var(--font-display); font-size: var(--fs-figure); line-height: 1; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mx-prose { max-width: 66ch; }
.mx-prose p + p { margin-top: var(--component-space-10); }
.mx-link { text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 4px; text-decoration-thickness: 1.5px; color: var(--color-link); font-weight: 500; transition: text-decoration-color var(--dur-fast) var(--ease); }
.mx-link:hover { text-decoration-color: var(--color-link); }
.mx-link-ext::after { content: " ↗"; font-size: 0.9em; }

/* ---------- Layout ---------- */
.mx-stack { display: flex; flex-direction: column; }
.mx-row { display: flex; flex-wrap: wrap; align-items: center; }
.mx-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.mx-grow { flex: 1 1 auto; min-width: 0; }
.mx-g1 { gap: var(--sp-1); } .mx-g2 { gap: var(--sp-2); } .mx-g3 { gap: var(--sp-3); } .mx-g4 { gap: var(--sp-4); } .mx-g5 { gap: var(--sp-5); } .mx-g6 { gap: var(--sp-6); } .mx-g8 { gap: var(--sp-8); }
.mx-cols { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
.mx-col-main { flex: 999 1 560px; min-width: 0; }
.mx-col-side { flex: 1 1 320px; min-width: 0; }
.mx-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-4); }
.mx-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--sp-3); }
.mx-container { width: 100%; max-width: 1180px; margin: var(--layout-zero) var(--layout-auto-margin); }
.mx-container-narrow { width: 100%; max-width: 720px; margin: var(--layout-zero) var(--layout-auto-margin); }

/* ---------- Work shell: ink rail + main (W0B elements; see handoff for the header-row alternative) ---------- */
.mx-shell { display: flex; min-height: 100vh; }
.mx-rail { flex: none; width: 248px; background: var(--color-chrome); color: var(--color-chrome-text); display: flex; flex-direction: column; font-size: 14px; }
.mx-rail-brand { display: flex; align-items: center; min-height: 64px; padding: var(--layout-zero) var(--sp-5); border-bottom: 1px solid var(--color-chrome-line); }
.mx-rail-brand a { display: flex; align-items: center; min-height: 44px; }
.mx-rail-org { padding: var(--component-space-14) var(--sp-3) var(--component-space-6); }
.mx-org { width: 100%; display: flex; align-items: center; gap: var(--component-space-10); min-height: 48px; padding: var(--layout-zero) var(--sp-3); border: 1px solid rgba(247,245,239,.14); border-radius: var(--r-control); background: var(--color-chrome-raised); color: var(--color-chrome-text); text-align: left; cursor: pointer; font-size: 14px; }
.mx-org-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mx-org-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-org-name small { font-size: 12px; color: var(--color-chrome-text-tertiary); }
.mx-org-plain { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); line-height: 1.25; }
.mx-rail-nav { padding: var(--component-space-6) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--component-space-2); }
.mx-rail-section { display: flex; align-items: center; gap: var(--component-space-10); min-height: 40px; padding: var(--layout-zero) var(--sp-3); border-radius: var(--r-sm); color: var(--color-chrome-text-secondary); font-weight: 500; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.mx-rail-section:hover { background: var(--color-chrome-hover); color: #fff; }
.mx-rail-section .mx-sec-mark { width: 8px; height: 8px; border-radius: var(--shape-detail-2); flex: none; }
.mx-rail-section[aria-current="true"] { color: #fff; }
.mx-rail-pages { display: flex; flex-direction: column; gap: var(--component-space-1); margin: var(--component-space-2) var(--layout-zero) var(--sp-2) var(--component-space-18); padding-left: var(--component-space-10); border-left: 1px solid var(--color-chrome-line); }
.mx-rail-page { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 34px; padding: var(--layout-zero) var(--component-space-10); border-radius: var(--r-sm); color: var(--color-chrome-text-secondary); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.mx-rail-page:hover { background: var(--color-chrome-hover); color: #fff; }
.mx-rail-page[aria-current="page"] { background: var(--color-chrome-current); color: #fff; font-weight: 500; box-shadow: var(--component-effect-79); }
.mx-rail-foot { margin-top: var(--layout-auto-margin); padding: var(--component-space-10) var(--sp-3) var(--component-space-14); border-top: 1px solid var(--color-chrome-line); display: flex; flex-direction: column; gap: var(--component-space-2); }
.mx-rail-item { display: flex; align-items: center; gap: var(--component-space-10); min-height: 36px; padding: var(--layout-zero) var(--sp-3); border-radius: var(--r-sm); color: var(--color-chrome-text-secondary); border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%; font-size: 14px; }
.mx-rail-item:hover { background: var(--color-chrome-hover); color: #fff; }
.mx-incident { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mx-incident i { width: 8px; height: 8px; border-radius: var(--shape-circle); background: var(--color-caution-mark); box-shadow: var(--component-effect-84); }
.mx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mx-testband { display: flex; align-items: center; gap: var(--component-space-10); min-height: 36px; padding: var(--layout-zero) var(--component-space-28); background: var(--color-test-bg); color: var(--color-test-fg); font-size: 13.5px; font-weight: 500; }
.mx-testband b { display: inline-flex; align-items: center; height: 22px; padding: var(--layout-zero) var(--sp-2); border-radius: 6px; background: var(--color-test-fg); color: var(--color-test-bg); font-size: 12px; font-weight: 600; }
.mx-pagebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--component-space-28); }
.mx-pagebar.tint-practice { background: var(--tint-practice); } .mx-pagebar.tint-team { background: var(--tint-team); } .mx-pagebar.tint-create { background: var(--tint-create); } .mx-pagebar.tint-developers { background: var(--tint-developers); } .mx-pagebar.tint-reports { background: var(--tint-reports); } .mx-pagebar.tint-settings { background: var(--tint-settings); }
.mx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--component-space-6); font-size: 13.5px; color: var(--color-text-secondary); }
.mx-crumbs a { text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 3px; }
.mx-crumbs [aria-current="page"] { color: var(--color-text); font-weight: 500; }
.mx-crumbs .sep { color: var(--color-text-tertiary); }
.mx-picker { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: var(--layout-zero) var(--component-space-10) var(--layout-zero) var(--sp-3); border: 1px solid var(--color-field-border); border-radius: var(--r-control); background: var(--color-surface); color: var(--color-text); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.mx-picker span { color: var(--color-text-tertiary); font-weight: 400; }
.mx-envswitch { display: inline-flex; align-items: center; gap: var(--component-space-2); padding: var(--component-space-3); border-radius: 11px; border: 1px solid var(--color-field-border); background: var(--color-surface); font-size: 13px; }
.mx-envswitch .lab { padding: var(--layout-zero) var(--component-space-6) var(--layout-zero) var(--sp-2); color: var(--color-text-tertiary); }
.mx-envswitch a { display: inline-flex; align-items: center; gap: var(--component-space-6); min-height: 28px; padding: var(--layout-zero) var(--sp-3); border-radius: 8px; color: var(--color-text-secondary); }
.mx-envswitch a[aria-current="true"] { background: var(--color-text); color: var(--color-ground); font-weight: 600; }
.mx-envswitch a.is-test[aria-current="true"] { background: var(--color-test-fg); color: var(--color-test-bg); }
.mx-notices { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--component-space-28) var(--layout-zero); }
.mx-body { padding: var(--sp-6) var(--component-space-28) var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-5); }
.mx-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
.mx-pagehead .mx-stack { gap: var(--component-space-6); min-width: 0; }
.mx-footer { margin-top: var(--layout-auto-margin); display: flex; flex-wrap: wrap; gap: var(--component-space-6) var(--component-space-18); padding: var(--sp-4) var(--component-space-28) var(--sp-5); border-top: 1px solid var(--color-divider); font-size: 12.5px; color: var(--color-text-tertiary); }
.mx-footer a { text-decoration: underline; text-decoration-color: var(--color-link-underline); text-underline-offset: 3px; color: var(--color-text-secondary); }

/* Section menu as tabs (used inside main when a section has a second level, e.g. a page's own views) */
.mx-subnav { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--color-divider); }
.mx-subnav a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: var(--layout-zero) var(--sp-3); color: var(--color-text-secondary); font-weight: 500; box-shadow: var(--component-effect-110); }
.mx-subnav a:hover { color: var(--color-text); }
.mx-subnav a[aria-current="page"], .mx-subnav a[aria-selected="true"] { color: var(--color-text); box-shadow: var(--component-effect-112); font-weight: 600; }

/* Phone work header */
.mx-phead { display: flex; align-items: center; gap: var(--component-space-6); height: 56px; padding: var(--layout-zero) var(--component-space-6) var(--layout-zero) var(--sp-4); background: var(--color-chrome); color: var(--color-chrome-text); }
.mx-phead .ttl { flex: 1; padding-left: var(--component-space-10); font-size: 14.5px; color: var(--color-chrome-text-secondary); }
.mx-iconbtn { width: 44px; height: 44px; border: 0; border-radius: var(--r-control); background: transparent; color: inherit; display: inline-grid; place-items: center; cursor: pointer; }
.mx-iconbtn:hover { background: var(--color-chrome-hover); }
.mx-iconbtn-light { width: 36px; height: 36px; border: 1px solid var(--color-divider); border-radius: var(--r-control); background: var(--color-surface); color: var(--color-text); display: inline-grid; place-items: center; cursor: pointer; }

/* Learner header (W0B learner header) */
.mx-lhead { display: flex; align-items: center; gap: var(--sp-6); height: 64px; padding: var(--layout-zero) var(--layout-gutter-wide); background: var(--color-chrome); color: var(--color-chrome-text); }
.mx-lhead .org { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; color: var(--color-chrome-text-secondary); }
.mx-lhead nav { align-self: stretch; display: flex; gap: var(--sp-5); }
.mx-lhead nav a { display: flex; align-items: center; padding: var(--layout-zero) var(--component-space-2); font-size: 14.5px; font-weight: 500; color: var(--color-chrome-text-secondary); box-shadow: var(--component-effect-125); }
.mx-lhead nav a[aria-current="page"] { color: #fff; box-shadow: var(--component-effect-126); }
.mx-lhead .help { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--color-chrome-text-secondary); }
.mx-avatar { flex: none; width: 34px; height: 34px; border-radius: var(--shape-circle); display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #181816; background: #FBD8C1; }
.mx-avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.mx-avatar.sage { background: #D5E4D2; } .mx-avatar.sand { background: #EFE3C9; } .mx-avatar.slate { background: #D4DEE9; } .mx-avatar.plum { background: #E9D6E6; } .mx-avatar.stone { background: #E3E0D8; }
.mx-avatar-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.mx-lmain { flex: 1; width: 100%; max-width: 1180px; margin: var(--layout-zero) var(--layout-auto-margin); padding: var(--component-space-36) var(--layout-gutter-calm) var(--component-space-56); display: flex; flex-direction: column; gap: var(--sp-6); }
.mx-lmain-narrow { max-width: 720px; }

/* Minimal header (Access cannot answer) */
.mx-minhead { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: var(--layout-zero) var(--layout-gutter-wide); background: var(--color-chrome); color: var(--color-chrome-text); }

/* ---------- Buttons ---------- */
.mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 36px; padding: var(--layout-zero) var(--component-space-14); border-radius: var(--r-control); border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform .08s ease; text-decoration: none; }
.mx-btn--primary { background: var(--color-action-primary); color: var(--color-action-primary-text); }
.mx-btn--primary:hover { background: var(--color-action-primary-hover); }
.mx-btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-field-border); font-weight: 500; }
.mx-btn--secondary:hover { border-color: var(--color-text); }
.mx-btn--quiet { background: transparent; color: var(--color-text); font-weight: 500; }
.mx-btn--quiet:hover { background: var(--color-fill); }
.mx-btn--sm { min-height: 32px; padding: var(--layout-zero) var(--sp-3); font-size: 13.5px; }
.mx-btn--lg { min-height: 52px; padding: var(--layout-zero) var(--sp-6); border-radius: 14px; font-size: 16px; }
.mx-btn--xl { min-height: 60px; padding: var(--layout-zero) var(--component-space-30); border-radius: 18px; font-size: 17px; font-weight: 650; }
.mx-btn--touch { min-height: 48px; padding: var(--layout-zero) var(--component-space-18); border-radius: 12px; font-size: 15px; }
.mx-btn--block { width: 100%; }
.mx-btn--press { box-shadow: var(--component-effect-151); }
.mx-btn--press:active { transform: translateY(2px); box-shadow: var(--component-effect-152); }
.mx-btn--primary.mx-btn--press { box-shadow: var(--component-effect-153); }
.mx-btn--on-stage { background: var(--color-on-stage-action); color: var(--color-on-stage-action-text); box-shadow: var(--component-effect-154); }
.mx-btn--on-stage:hover { background: #FFFFFF; }
.mx-btn--on-stage:active { transform: translateY(3px); box-shadow: var(--component-effect-156); }
.mx-btn--ghost-on-stage { background: rgba(247,245,239,.12); color: var(--color-chrome-text); box-shadow: var(--component-effect-157); font-weight: 500; }
.mx-btn--ghost-on-stage:hover { background: rgba(247,245,239,.19); }
.mx-btn[aria-disabled="true"], .mx-btn:disabled { opacity: .45; cursor: not-allowed; }
.mx-btn.is-pending { cursor: progress; }
.mx-spinner { width: 14px; height: 14px; border-radius: var(--shape-circle); border: 2px solid currentColor; border-right-color: transparent; animation: mx-spin .8s linear infinite; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-kbd { font-family: var(--font-mono); font-size: 11px; padding: var(--component-space-1) var(--component-space-5); border: 1px solid var(--color-divider); border-radius: var(--shape-detail-4); color: var(--color-text-secondary); background: var(--color-surface); }

/* ---------- Forms ---------- */
.mx-field { display: flex; flex-direction: column; gap: var(--component-space-6); min-width: 0; }
.mx-field > label, .mx-field > .mx-field-label { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.mx-calm .mx-field > label { font-size: 15px; }
.mx-field .req { font-weight: 400; color: var(--color-text-tertiary); }
.mx-hint { font-size: 13px; color: var(--color-text-tertiary); }
.mx-input, .mx-select, .mx-textarea { width: 100%; min-height: 40px; padding: var(--layout-zero) var(--sp-3); border: 1px solid var(--color-field-border); border-radius: var(--r-control); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; }
.mx-calm .mx-input, .mx-calm .mx-select, .mx-team .mx-input, .mx-team .mx-select { min-height: 48px; font-size: 15px; }
.mx-textarea { padding: var(--component-space-10) var(--sp-3); min-height: 96px; line-height: 1.5; resize: vertical; }
.mx-input::placeholder, .mx-textarea::placeholder { color: var(--color-text-tertiary); }
.mx-field.has-error .mx-input, .mx-field.has-error .mx-select, .mx-field.has-error .mx-textarea { border-color: var(--color-negative-fg); box-shadow: var(--component-effect-175); }
.mx-error { display: flex; align-items: flex-start; gap: var(--component-space-6); font-size: 13px; color: var(--color-negative-fg); font-weight: 500; }
.mx-error::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: var(--component-space-5); background: var(--color-negative-fg); }
.mx-errsum { padding: var(--component-space-14) var(--sp-4); border-radius: var(--r-card); background: var(--color-negative-bg); color: var(--color-text); display: flex; flex-direction: column; gap: var(--component-space-6); }
.mx-errsum h2 { font-size: 15px; font-weight: 600; color: var(--color-negative-fg); }
.mx-errsum a { text-decoration: underline; text-underline-offset: 3px; }
.mx-check { display: flex; align-items: flex-start; gap: var(--component-space-10); min-height: 32px; cursor: pointer; }
.mx-check input { width: 18px; height: 18px; margin: var(--component-space-2) var(--layout-zero) var(--layout-zero); accent-color: var(--color-text); flex: none; }
.mx-calm .mx-check { min-height: 44px; align-items: center; }
.mx-calm .mx-check input { width: 22px; height: 22px; margin: var(--layout-zero); }
.mx-radio-card { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--component-space-14) var(--sp-4); border: 1px solid var(--color-divider); border-radius: var(--r-card); background: var(--color-surface); cursor: pointer; }
.mx-radio-card.is-checked { border-color: var(--color-text); box-shadow: var(--component-effect-186); }
.mx-radio-card input { width: 18px; height: 18px; margin: var(--component-space-2) var(--layout-zero) var(--layout-zero); accent-color: var(--color-text); }
.mx-switch { display: inline-flex; align-items: center; gap: var(--component-space-10); cursor: pointer; }
.mx-switch .trk { width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--color-field-border); background: var(--color-fill); position: relative; flex: none; }
.mx-switch .trk::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--shape-circle); background: var(--color-text-tertiary); }
.mx-switch.is-on .trk { background: var(--color-text); border-color: var(--color-text); }
.mx-switch.is-on .trk::after { left: 19px; background: var(--color-ground); }
.mx-search { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: var(--layout-zero) var(--component-space-10); border: 1px solid var(--color-field-border); border-radius: var(--r-control); background: var(--color-surface); min-width: 200px; }
.mx-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: var(--color-text); }
.mx-search svg { color: var(--color-text-tertiary); flex: none; }
.mx-filter { display: inline-flex; align-items: center; gap: var(--component-space-6); min-height: 32px; padding: var(--layout-zero) var(--component-space-10); border: 1px solid var(--color-field-border); border-radius: var(--r-control); background: var(--color-surface); font-size: 13px; color: var(--color-text); cursor: pointer; }
.mx-filter span { color: var(--color-text-tertiary); }
.mx-seg { display: inline-flex; flex-wrap: wrap; gap: var(--component-space-2); padding: var(--component-space-3); border-radius: 11px; background: var(--color-fill); font-size: 13.5px; }
.mx-seg > a, .mx-seg > button { display: inline-flex; align-items: center; gap: var(--component-space-7); min-height: 32px; padding: var(--layout-zero) var(--sp-3); border: 0; border-radius: 8px; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: inherit; }
.mx-seg > [aria-current="page"], .mx-seg > [aria-pressed="true"], .mx-seg > [aria-selected="true"] { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-1); }
.mx-calm .mx-seg { padding: var(--sp-1); border-radius: 14px; font-size: 15px; }
.mx-calm .mx-seg > a, .mx-calm .mx-seg > button { min-height: 44px; padding: var(--layout-zero) var(--sp-4); border-radius: 10px; }
.mx-count { min-width: 20px; height: 20px; padding: var(--layout-zero) var(--component-space-6); border-radius: var(--r-pill); background: var(--color-divider); display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* ---------- Structure ---------- */
.mx-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--r-card); }
.mx-calm .mx-card { border-radius: var(--r-calm); }
.mx-card-pad { padding: var(--component-space-18) var(--sp-5); }
.mx-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--component-space-14) var(--component-space-18); border-bottom: 1px solid var(--color-divider-subtle); }
.mx-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--component-space-18); border-top: 1px solid var(--color-divider-subtle); }
.mx-panel { border-radius: var(--r-card); padding: var(--component-space-18) var(--sp-5); }
.mx-calm .mx-panel { border-radius: var(--r-calm); padding: var(--sp-5) var(--component-space-22); }
.mx-panel.tint-practice { background: var(--tint-practice); } .mx-panel.tint-team { background: var(--tint-team); } .mx-panel.tint-create { background: var(--tint-create); } .mx-panel.tint-developers { background: var(--tint-developers); } .mx-panel.tint-reports { background: var(--tint-reports); } .mx-panel.tint-settings { background: var(--tint-settings); } .mx-panel.fill { background: var(--color-fill); }
.mx-stage { background: var(--color-stage); color: var(--color-chrome-text); border-radius: var(--r-stage); padding: var(--component-space-36) var(--sp-10); }
.mx-stage .mx-muted { color: var(--color-chrome-text-secondary); }
.mx-divider { height: 1px; background: var(--color-divider); border: 0; margin: var(--layout-zero); }
.mx-dl { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); }
.mx-dl > dt { padding: var(--component-space-11) var(--sp-4) var(--component-space-11) var(--layout-zero); color: var(--color-text-tertiary); border-top: 1px solid var(--color-divider-subtle); }
.mx-dl > dd { margin: var(--layout-zero); padding: var(--component-space-11) var(--layout-zero); border-top: 1px solid var(--color-divider-subtle); min-width: 0; }
.mx-dl.first-flush > dt:first-of-type, .mx-dl.first-flush > dd:first-of-type { border-top: 0; }
@media (max-width: 599px) { .mx-dl { grid-template-columns: minmax(0, 1fr); } .mx-dl > dt { padding-bottom: var(--layout-zero); } .mx-dl > dd { border-top: 0; padding-top: var(--component-space-2); } }
.mx-steps { margin: var(--layout-zero); padding: var(--layout-zero); list-style: none; display: flex; flex-direction: column; }
.mx-steps > li { display: flex; gap: var(--component-space-14); padding: var(--sp-3) var(--layout-zero); }
.mx-step-mark { flex: none; width: 24px; height: 24px; border-radius: var(--shape-circle); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.mx-step-mark.done { background: var(--color-text); color: var(--color-ground); }
.mx-step-mark.now { border: 2px solid var(--color-text); }
.mx-step-mark.todo { border: 1.5px solid var(--color-field-border); color: var(--color-text-tertiary); font-weight: 500; }
.mx-progress { display: grid; gap: var(--sp-1); }
.mx-progress i { height: 4px; border-radius: var(--shape-detail-2); background: var(--color-fill); }
.mx-progress i.on { background: var(--color-text); }
.mx-details > summary { list-style: none; cursor: pointer; }
.mx-details > summary::-webkit-details-marker { display: none; }

/* ---------- Data ---------- */
.mx-tablebox { border: 1px solid var(--color-divider); border-radius: var(--r-card); background: var(--color-surface); overflow: hidden; }
.mx-tablescroll { overflow-x: auto; }
.mx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mx-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--color-text-tertiary); background: var(--color-ground); padding: var(--component-space-10) var(--sp-3); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.mx-table td { padding: var(--layout-zero) var(--sp-3); height: 48px; border-bottom: 1px solid var(--color-divider-subtle); vertical-align: middle; }
.mx-team .mx-table td { height: 52px; }
.mx-tech .mx-table td { height: 44px; }
.mx-table th:first-child, .mx-table td:first-child { padding-left: var(--component-space-18); }
.mx-table th:last-child, .mx-table td:last-child { padding-right: var(--component-space-18); }
.mx-table tbody tr:last-child td { border-bottom: 0; }
.mx-table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.mx-table tbody tr:hover { background: var(--color-hover); }
.mx-table tr.is-selected { background: var(--color-selected); box-shadow: var(--component-effect-247); }
.mx-table .r { text-align: right; }
.mx-table .sub { display: block; font-size: 12.5px; color: var(--color-text-tertiary); }
.mx-list { display: flex; flex-direction: column; }
.mx-list > .item, .mx-list > a, .mx-list > li { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-2) var(--component-space-18); border-top: 1px solid var(--color-divider-subtle); }
.mx-list > :first-child { border-top: 0; }
.mx-list > a:hover { background: var(--color-hover); }
.mx-meter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-1); }
.mx-meter i { height: 10px; border-radius: var(--shape-detail-3); background: var(--color-fill); }
.mx-meter i.on { background: var(--color-text); }
.mx-bar { height: 8px; border-radius: var(--shape-detail-4); background: var(--color-fill); overflow: hidden; }
.mx-bar > i { display: block; height: 100%; background: var(--color-text); border-radius: var(--shape-detail-4); }
.mx-stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.mx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--component-space-10); padding: var(--component-space-28) var(--sp-6); border: 1px dashed var(--color-field-border); border-radius: var(--r-card); }
.mx-empty h2, .mx-empty h3 { font-size: 16px; font-weight: 600; }
.mx-skel { display: block; border-radius: var(--shape-detail-6); background: linear-gradient(90deg, var(--color-fill) 0%, var(--color-divider-subtle) 50%, var(--color-fill) 100%); background-size: 200% 100%; animation: mx-shimmer 1.4s ease infinite; }
@keyframes mx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Outcome dots (Met / Partly / Missed / Not scored) — shape carries the meaning, never colour alone */
.mx-oc { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.mx-oc i { width: 11px; height: 11px; border-radius: var(--shape-circle); flex: none; }
.mx-oc.met i { background: var(--color-text); }
.mx-oc.partly i { border: 2px solid var(--color-text); background: linear-gradient(90deg, var(--color-text) 50%, transparent 50%); }
.mx-oc.missed i { border: 2px solid var(--color-text); }
.mx-oc.notscored { color: var(--color-neutral-fg); }
.mx-oc.notscored i { border-radius: var(--shape-detail-2); width: 10px; height: 2px; background: var(--color-neutral-fg); }

/* ---------- Status ---------- */
.mx-chip { display: inline-flex; align-items: center; gap: var(--component-space-6); height: 24px; padding: var(--layout-zero) var(--component-space-9) var(--layout-zero) var(--sp-2); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; white-space: nowrap; background: var(--color-fill); color: var(--color-text-secondary); }
.mx-chip > i { width: 8px; height: 8px; flex: none; border-radius: var(--shape-circle); background: currentColor; }
.mx-chip.pos { background: var(--color-positive-bg); color: var(--color-positive-fg); }
.mx-chip.neg { background: var(--color-negative-bg); color: var(--color-negative-fg); }
.mx-chip.neg > i { border-radius: var(--shape-detail-1); }
.mx-chip.caution { background: var(--color-caution-bg); color: var(--color-caution-fg); }
.mx-chip.caution > i { border-radius: var(--shape-square); transform: rotate(45deg); width: 7px; height: 7px; }
.mx-chip.neutral { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }
.mx-chip.neutral > i { border-radius: var(--shape-detail-1); height: 2px; width: 9px; }
.mx-chip.draft > i { background: transparent; border: 1.5px solid currentColor; }
.mx-chip.progress > i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); border: 1.5px solid currentColor; }
.mx-chip.test { background: var(--color-test-bg); color: var(--color-test-fg); }
.mx-chip.test > i { border-radius: var(--shape-detail-2); }
.mx-chip.live { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }
.mx-tag { display: inline-flex; align-items: center; height: 22px; padding: var(--layout-zero) var(--sp-2); border-radius: 6px; font-size: 12px; font-weight: 600; }
.mx-tag.test { background: var(--color-test-bg); color: var(--color-test-fg); }
.mx-tag.live { background: var(--color-neutral-bg); color: var(--color-neutral-fg); }
.mx-tag.plain { background: var(--color-fill); color: var(--color-text-secondary); }
.mx-live { width: 8px; height: 8px; border-radius: var(--shape-circle); background: var(--color-brand); animation: mx-pulse 1.8s ease-in-out infinite; flex: none; }
@keyframes mx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,81,48,.5); } 50% { box-shadow: 0 0 0 5px rgba(244,81,48,0); } }
.mx-flag { display: inline-flex; align-items: center; gap: var(--component-space-6); font-size: 12.5px; color: var(--color-caution-fg); font-weight: 500; }
.mx-flag::before { content: ""; width: 6px; height: 6px; background: var(--color-caution-mark); transform: rotate(45deg); flex: none; }
.mx-banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--component-space-10) var(--component-space-14); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); font-size: 14px; }
.mx-banner .mx-grow { flex: 1 1 160px; min-width: 0; }
.mx-banner { flex-wrap: wrap; }
.mx-banner > .glyph + .mx-grow { flex-basis: calc(100% - 40px); }
.mx-banner.info { background: var(--color-surface); border: 1px solid var(--color-divider); }
.mx-banner.caution { background: var(--color-caution-bg); color: var(--color-text); }
.mx-banner.neg { background: var(--color-negative-bg); color: var(--color-text); }
.mx-banner.pos { background: var(--color-positive-bg); color: var(--color-text); }
.mx-banner.test { background: var(--color-test-bg); color: var(--color-text); }
.mx-banner .glyph { flex: none; width: 20px; height: 20px; margin-top: var(--component-space-1); display: grid; place-items: center; }

/* ---------- Overlays (drawn open on static boards) ---------- */
.mx-scrim { position: absolute; inset: 0; background: rgba(24,24,22,.45); display: grid; place-items: center; padding: var(--sp-6); }
.mx-dialog { width: 100%; max-width: 520px; background: var(--color-surface); color: var(--color-text); border-radius: 16px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.mx-dialog-head { padding: var(--component-space-22) var(--sp-6) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.mx-dialog-body { padding: var(--sp-2) var(--sp-6) var(--sp-4); display: flex; flex-direction: column; gap: var(--component-space-14); }
.mx-dialog-foot { padding: var(--component-space-14) var(--sp-6) var(--sp-5); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--component-space-10); }
.mx-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-2); padding: var(--component-space-10) var(--component-space-18) var(--component-space-22); display: flex; flex-direction: column; gap: var(--sp-3); }
.mx-sheet::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: var(--shape-detail-2); background: var(--color-divider); }
.mx-menu { min-width: 240px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-divider); border-radius: 12px; box-shadow: var(--shadow-2); padding: var(--component-space-6); display: flex; flex-direction: column; }
.mx-menu a, .mx-menu button { display: flex; align-items: center; gap: var(--component-space-10); min-height: 36px; padding: var(--layout-zero) var(--component-space-10); border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; cursor: pointer; font-size: 14px; color: var(--color-text); }
.mx-menu a:hover, .mx-menu button:hover { background: var(--color-fill); }
.mx-menu .grp { padding: var(--sp-2) var(--component-space-10) var(--sp-1); font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); }
.mx-menu .sep { height: 1px; background: var(--color-divider-subtle); margin: var(--sp-1) var(--layout-zero); }
.mx-tooltip { display: inline-block; padding: var(--component-space-6) var(--component-space-10); border-radius: 8px; background: var(--color-text); color: var(--color-ground); font-size: 12.5px; box-shadow: var(--shadow-1); }

/* ---------- References and code ---------- */
.mx-ref { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid var(--color-divider); border-radius: var(--r-sm); background: var(--color-surface); font-size: 12.5px; overflow: hidden; max-width: 100%; }
.mx-ref .lab { padding: var(--layout-zero) var(--component-space-6) var(--layout-zero) var(--component-space-10); color: var(--color-text-tertiary); }
.mx-ref .val { font-family: var(--font-mono); font-size: 12px; padding-right: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-ref button { align-self: stretch; display: grid; place-items: center; min-width: 32px; padding: var(--layout-zero) var(--sp-2); border: 0; border-left: 1px solid var(--color-divider); background: var(--color-ground); color: var(--color-text-secondary); cursor: pointer; font-size: 12.5px; }
.mx-code { border-radius: 12px; background: #16150F; color: #E8E6E0; overflow: hidden; }
.mx-code-head { display: flex; align-items: center; gap: var(--component-space-6); min-height: 40px; padding: var(--layout-zero) var(--sp-2) var(--layout-zero) var(--sp-3); border-bottom: 1px solid rgba(232,230,224,.1); font-size: 12.5px; }
.mx-code-head .lang { display: inline-flex; align-items: center; height: 26px; padding: var(--layout-zero) var(--component-space-10); border-radius: 7px; background: rgba(232,230,224,.1); color: #fff; font-weight: 500; }
.mx-code-head button { display: inline-flex; align-items: center; gap: var(--component-space-6); min-height: 28px; padding: var(--layout-zero) var(--component-space-10); border: 0; border-radius: 7px; background: rgba(232,230,224,.08); color: #E8E6E0; cursor: pointer; font-size: 12.5px; }
.mx-code pre { margin: var(--layout-zero); padding: var(--component-space-14) var(--sp-4) var(--sp-4); overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; }
.mx-code .k { color: #9FC8F5; } .mx-code .s { color: #C9C6BF; } .mx-code .v { color: #E9D27A; } .mx-code .c { color: #8C8983; }
.mx-code button:focus-visible { outline-color: #F7F5EF; }
.mx-secret { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--layout-zero) var(--component-space-6) var(--layout-zero) var(--sp-3); border: 1px solid var(--color-field-border); border-radius: var(--r-control); background: var(--color-ground); }
.mx-secret code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Voice ball (D48 (a)): matte coral sphere with a soft glow; only a live voice moves ---------- */
.vb { position: relative; display: block; border-radius: var(--shape-circle); flex: none; }
.vb-glow { position: absolute; inset: -34%; border-radius: var(--shape-circle); background: radial-gradient(circle, rgba(244,81,48,.40) 0%, rgba(244,81,48,0) 62%); opacity: .6; }
.vb-ball { position: absolute; inset: 0; border-radius: var(--shape-circle); background: radial-gradient(circle at 38% 30%, #FF6B4A 0%, #F45130 50%, #DD4321 100%); box-shadow: var(--component-effect-341); transition: transform .35s ease; }
.vb-static { position: absolute; inset: -12%; border-radius: var(--shape-circle); border: 1px solid rgba(247,245,239,.16); }
.vb-ring { position: absolute; inset: 0; border-radius: var(--shape-circle); border: 1.5px solid rgba(244,81,48,.6); opacity: 0; }
.vb-think { position: absolute; inset: -14%; border-radius: 50%; border: 1.5px dashed rgba(244,81,48,.65); animation: vb-spin 7s linear infinite; }
.vb.is-speaking .vb-glow { animation: vb-swell 1.4s ease-in-out infinite; }
.vb.is-speaking .vb-ring { animation: vb-ripple 2.1s ease-out infinite; }
.vb.is-speaking .vb-ring.r2 { animation-delay: .7s; }
.vb.is-speaking .vb-ring.r3 { animation-delay: 1.4s; }
.vb.is-listening .vb-ball { transform: scale(.86); }
.vb.is-listening .vb-glow { opacity: .35; }
.vb-sm .vb-glow { inset: -40%; }
.vb-flat .vb-glow, .vb-flat .vb-static { display: none; }
@keyframes vb-swell { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes vb-ripple { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes vb-spin { to { transform: rotate(360deg); } }
.mx-level { display: flex; align-items: flex-end; gap: var(--sp-1); }
.mx-level i { width: 5px; border-radius: var(--shape-detail-3); background: currentColor; animation: mx-lv 1s ease-in-out infinite; transform-origin: bottom; }
.mx-level i:nth-child(2) { animation-delay: .12s; } .mx-level i:nth-child(3) { animation-delay: .24s; } .mx-level i:nth-child(4) { animation-delay: .36s; } .mx-level i:nth-child(5) { animation-delay: .48s; } .mx-level i:nth-child(6) { animation-delay: .6s; }
@keyframes mx-lv { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- Phone frames (fixed 390 x 844 boards) ---------- */
.mx-phone { width: 390px; height: 844px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.mx-phone .mx-pbody { flex: 1; min-height: 0; overflow: hidden; padding: var(--component-space-14) var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--component-space-14); }
.mx-phone .mx-pbody > * { flex-shrink: 0; }

/* ---------- Static pages (Notifications token pages, docs, AuthKit) ---------- */
.mx-plain-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: var(--layout-zero) var(--layout-gutter-wide); border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.mx-centered { flex: 1; display: grid; place-items: center; padding: var(--sp-12) var(--sp-4); }

/* ---------- Responsive (W0A breakpoints: Compact < 600, Medium 600–899, Wide >= 900) ---------- */
@media (max-width: 899px) {
  .mx-shell { flex-direction: column; }
  .mx-rail { display: none; }
  .mx-shell .mx-phead { display: flex; }
}
@media (min-width: 900px) { .mx-shell .mx-phead { display: none; } }
@media (max-width: 599px) {
  .mx-pagebar, .mx-testband, .mx-notices, .mx-footer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .mx-body { padding: var(--sp-5) var(--sp-4) var(--component-space-36); }
  .mx-stage { padding: var(--component-space-22) var(--sp-5) var(--sp-6); border-radius: 24px; }
  .mx-lmain { padding: var(--sp-6) var(--sp-4) var(--sp-10); }
  .mx-lhead .mx-sm-hide { display: none; }
  .mx-btn { min-height: 44px; }
}

/* ---------- Target sizes for links in dense places (D48 (j)) ---------- */
.mx-table td a:not(.mx-btn) { display: inline-flex; align-items: center; min-height: 36px; }
.mx-team .mx-table td a:not(.mx-btn), .mx-calm .mx-table td a:not(.mx-btn) { min-height: 44px; }
.mx-crumbs a, .mx-footer a { display: inline-flex; align-items: center; min-height: 32px; }
.mx-card-foot .mx-link, .mx-stack > .mx-link, .mx-row > .mx-link { display: inline-flex; align-items: center; min-height: 36px; }
.mx-team .mx-card-foot .mx-link, .mx-calm .mx-link { min-height: 44px; }

/* ---------- Promoted from the builds ---------- */
.mx-table tbody th[scope="row"] { text-align: left; font-size: inherit; font-weight: 500; color: var(--color-text); background: transparent; padding: var(--layout-zero) var(--sp-3) var(--layout-zero) var(--component-space-18); height: 48px; border-bottom: 1px solid var(--color-divider-subtle); white-space: normal; }
.mx-table th[scope="rowgroup"] { background: var(--color-fill); color: var(--color-text-secondary); font-weight: 600; }
button.mx-switch { border: 0; background: transparent; padding: var(--layout-zero); min-height: 32px; }
button.mx-link { border: 0; background: transparent; padding: var(--layout-zero); cursor: pointer; }
.mx-input.mx-mono { font-family: var(--font-mono); font-size: var(--fs-mono); }
.mx-region-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--sp-5); }

/* ---------- Shell corrections from the W0B review (SHL-R19, R25, R26) ---------- */
.mx-rail-section[aria-current="true"] { background: var(--color-chrome-hover); font-weight: 600; }
a.mx-rail-item { text-decoration: none; }
.mx-lbrand { display: flex; flex-direction: column; justify-content: center; gap: var(--component-space-1); }
.mx-lbrand .org { font-size: 12px; line-height: 1.2; color: var(--color-chrome-text-secondary); }
.mx-lhead button.help { border: 0; background: transparent; padding: var(--layout-zero); cursor: pointer; font: inherit; font-size: 14px; }
.mx-minhead .mx-minhead-status { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-chrome-text); text-decoration-color: rgba(247,245,239,.4); }
.mx-livemark { display: flex; margin: var(--layout-zero) var(--layout-zero) var(--sp-3); }
.mx-banner.neutral { background: var(--color-neutral-bg); color: var(--color-text); }
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- Customer branding (Header and Navigation §11; BR-TRN-42): the customer's mark and active marker, nothing else ---------- */
.mx-brand-customer { display: flex; flex-direction: column; justify-content: center; gap: var(--component-space-1); min-height: 44px; color: var(--color-chrome-text); }
.mx-brand-customer .nm { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.mx-brand-customer .by { font-size: 11px; color: var(--color-chrome-text-tertiary); }
.mx-branded .mx-rail-page[aria-current="page"] { box-shadow: var(--component-effect-416); }

/* Docs layout (W0F boards) */
/* Docs site layout (W0F boards PG-OX-01, .02-Reference, .03-Quickstart, .04-Not-found,
   .05-Retired-version, .dark). The boards' inline styles as classes, because the CSP is
   `style-src 'self'` (DOC-R12). W0A tokens by role only; the theme follows the OS (DSY-R8). */
html, body { margin: 0; background: var(--color-ground); }
*, *::before, *::after { box-sizing: border-box; }
.doc-root p, .doc-root li, .doc-root td, .doc-root dd { overflow-wrap: anywhere; }
.doc-root h1, .doc-root h2, .doc-root h3, .doc-root p, .doc-root ul, .doc-root ol { margin: 0; }
.doc-root ul, .doc-root ol { padding: 0; }
.mx-skip { box-shadow: none; }

/* Header (DOC-R10) */
.doc-header { background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.doc-header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; min-height: 60px; padding: 0 32px; }
.doc-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--color-text); text-decoration: none; }
.doc-logo { flex: none; display: block; }
.doc-logo-dot { fill: var(--color-brand); }
.doc-logo-ink { fill: var(--color-text); }
.doc-brand-word { font-weight: 600; font-size: 15px; padding-left: 12px; border-left: 1px solid var(--color-divider); }
.doc-topnav { display: flex; flex-wrap: wrap; align-self: stretch; }
.doc-topnav-link { display: inline-flex; align-items: center; min-height: 60px; padding: 0 12px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; }
.doc-topnav-link:hover { color: var(--color-text); }
.doc-topnav-link.is-current { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-text); }
.doc-spacer { flex: 1; }
.doc-to-app { display: inline-flex; align-items: center; min-height: 44px; }
.doc-subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 0 32px; border-top: 1px solid var(--color-divider-subtle); }
.doc-subbar-name { font-weight: 600; }
.doc-subnav { border-bottom: 0; }

/* Shared */
.doc-main { min-width: 0; }
.doc-title { font-size: 34px; }
.doc-narrow { max-width: 820px; margin: 0 auto; padding: 32px 32px 64px; display: flex; flex-direction: column; gap: 24px; }
.doc-wide { max-width: 1180px; margin: 0 auto; padding: 32px 32px 64px; display: flex; flex-direction: column; gap: 24px; }
.doc-tablebox { overflow-x: auto; }
.doc-tablebox:focus-visible, .doc-code pre:focus-visible { outline: 2px solid var(--color-focus, currentColor); outline-offset: 2px; }
.doc-cell-mono { font-size: 12.5px; }
.doc-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.doc-list a { display: inline-flex; align-items: center; min-height: 32px; }
.doc-code-caption { flex: 1; color: #A29F98; }
.doc-code pre { white-space: pre; }
.doc-error-code { font-size: 30px; letter-spacing: 0; word-break: break-all; }
.doc-facts { grid-template-columns: 150px minmax(0, 1fr); }
.doc-limits { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.doc-version-line { margin-top: 4px; }

/* Home (PG-OX-01) */
.doc-home { width: 100%; max-width: 1180px; margin: 0 auto; padding: 48px 32px 72px; display: flex; flex-direction: column; gap: 36px; }
.doc-home-intro { max-width: 760px; }
.doc-home-title { font-size: 44px; letter-spacing: -0.04em; }
.doc-home-lead { font-size: 17px; }
.doc-home-qs { padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.doc-home-qs-words { min-width: min(320px, 100%); }
.doc-api-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.doc-api-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.doc-api-summary { flex: 1; }
.doc-api-links { gap: 2px 16px; flex-wrap: wrap; }
.doc-api-link { min-height: 32px; display: inline-flex; align-items: center; }
.doc-home-errors { padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Quickstart and guides (PG-OX-01.03) */
.doc-article-layout { display: flex; gap: 48px; align-items: flex-start; justify-content: center; padding: 0 32px; }
.doc-article { flex: 1; max-width: 780px; padding: 32px 0 64px; }
.doc-toc { width: 260px; flex: none; padding: 40px 0; position: sticky; top: 0; }
.doc-toc-label { padding-bottom: 6px; }
.doc-toc-list { list-style: none; }
.doc-toc-link { display: flex; align-items: center; min-height: 32px; color: var(--color-text-secondary); }
.doc-prose { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.doc-prose > *, .doc-ref-main > *, .doc-example > * { min-width: 0; max-width: 100%; }
.doc-prose > .doc-title { margin-bottom: 4px; }
.doc-prose .doc-h2 { padding-top: 16px; }
.doc-prose ul, .doc-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc-prose table { min-width: 100%; }
.doc-prose .mx-table td { height: auto; padding-top: 10px; padding-bottom: 10px; }
.doc-inline-code { overflow-wrap: anywhere; font-size: 0.92em; padding: 1px 4px; border-radius: 4px; background: var(--color-fill); }
.doc-note { margin: 0; padding: 12px 16px; border-radius: var(--r-card); background: var(--color-caution-bg); display: flex; flex-direction: column; gap: 8px; }

/* Reference (PG-OX-01.02, .05) */
.doc-ref-layout { display: flex; gap: 28px; align-items: flex-start; }
.doc-refnav { width: 236px; flex: none; padding: 28px 0 40px 32px; display: flex; flex-direction: column; gap: 16px; }
.doc-refnav-version { padding: 0 10px; }
.doc-version { color: var(--color-text); }
.doc-refnav-group { padding: 0 10px 4px; }
.doc-refnav-link { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; color: var(--color-text-secondary); text-decoration: none; }
.doc-refnav-link:hover { color: var(--color-text); }
.doc-refnav-link.is-current { background: var(--color-selected); color: var(--color-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--color-text); }
.doc-ref-main { flex: 1; padding: 28px 8px 56px; display: flex; flex-direction: column; gap: 26px; }
.doc-ref-layout--two .doc-ref-main { padding-right: 32px; max-width: 980px; }
.doc-endpoint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--color-divider); border-radius: var(--r-sm); background: var(--color-surface); word-break: break-all; }
.doc-endpoint b { font-weight: 600; }
.doc-status { font-weight: 500; }
.doc-example { width: 440px; flex: none; padding: 28px 32px 40px 8px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }

/* Changelog */
.doc-changelog { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.doc-changelog-entry { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.doc-breaking { margin-left: 8px; }

/* Not found (PG-OX-01.04) */
.doc-notfound { min-height: 560px; padding: 32px 32px 80px; }
.doc-notfound-inner { max-width: 520px; width: 100%; }

/* Reflow (AC-R1): the example column moves under the content, then the reference nav above it. */
@media (max-width: 1199px) {
  .doc-ref-layout { flex-wrap: wrap; }
  .doc-ref-main { flex: 1 1 520px; padding-right: 32px; }
  .doc-example { width: auto; flex: 1 1 100%; position: static; padding: 0 32px 40px; }
  .doc-ref-layout > .doc-refnav { order: 0; }
}
@media (max-width: 899px) {
  .doc-header-bar, .doc-subbar { padding: 0 16px; }
  .doc-topnav-link { min-height: 44px; }
  .doc-ref-layout { flex-direction: column; gap: 0; }
  .doc-refnav { width: auto; padding: 20px 16px 0; }
  .doc-ref-main, .doc-ref-layout--two .doc-ref-main { padding: 20px 16px 40px; width: 100%; }
  .doc-example { padding: 0 16px 40px; width: 100%; }
  .doc-article-layout { flex-direction: column; gap: 0; padding: 0 16px; }
  .doc-toc { order: 2; }
  .doc-toc { width: auto; position: static; padding: 0 0 40px; }
  .doc-article { padding-top: 20px; width: 100%; }
  .doc-home, .doc-narrow, .doc-wide { padding: 28px 16px 56px; }
  .doc-home-title { font-size: 36px; }
  .doc-title { font-size: 28px; }
  .doc-facts { grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); }
}