/* shell.css — layout primitives for the beegait-cloud shell pages
 * (MV2-CLOUD-SHELL-DESIGN). Consumes tokens.css ONLY: no raw colors, no px
 * literals here — that is the whole point (tests/shell_design_test.py TC2).
 * Pages: /login and / today; 28 admin and 29 signup/trial build on the same
 * classes. The engine board.html never loads this file (TC5 scope fence).
 */

* { box-sizing: border-box; }

/* card 92 (MV2-PROJECT-NAV): the CLASS fix for the whole [hidden] bug family —
 * a class's `display:flex` used to BEAT the UA's [hidden]{display:none}, so the
 * wizard's finish-step "Open the board" (.mc-wizard-nav, display:flex) rendered
 * on every step. `hidden` means hidden, always; the per-class [hidden] rules
 * below remain as harmless history. */
[hidden] { display: none !important; }

body.mc-shell {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mc-font);
  font-size: var(--text-ui);
  line-height: var(--line-ui);
  color: var(--mc-text);
  background: var(--mc-bg-wash);
}

/* ── centered auth layout ── */
.mc-center { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--mc-sp-5); }

.mc-card {
  background: var(--mc-surface);
  backdrop-filter: blur(var(--mc-blur));
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r);
  padding: var(--mc-sp-6);
  width: 100%;
  max-width: 21rem;
  box-shadow: var(--mc-shadow);
}

.mc-wordmark { text-align: center; margin-bottom: var(--mc-sp-5); }
.mc-orb {
  width: var(--mc-sp-6); height: var(--mc-sp-6);
  margin: 0 auto var(--mc-sp-3);
  border-radius: var(--mc-r-sm);
  background: var(--mc-accent-grad-tilt);
  box-shadow: var(--mc-shadow-accent);
  display: grid; place-items: center;
  font-size: var(--mc-fs-lg);
}
.mc-wordmark b { font-size: var(--mc-fs-lg); font-weight: var(--weight-title); letter-spacing: .03em; }
/* card 58: the logo IS the wordmark — the sidebar's white-chip treatment
   (.mc-logochip, card 51) at card scale; the asset is opaque-white so the
   chip is the logo's ground. Sizes compose existing tokens (no new px). */
.mc-logomark {
  display: inline-grid;
  place-items: center;
  background: var(--mc-logo-chip);
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-2) var(--mc-sp-3);
  margin-bottom: var(--mc-sp-2);
}
.mc-logomark img { display: block; height: calc(var(--mc-logo-h) + var(--mc-sp-2)); }
.mc-wordmark .mc-sub { color: var(--mc-muted); font-size: var(--mc-fs-sm); margin-top: var(--mc-sp-1); }

/* ── fields + buttons ── */
.mc-field { margin-bottom: var(--mc-sp-3); }
.mc-field input {
  width: 100%;
  background: var(--mc-bg);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-3) var(--mc-sp-4);
  color: var(--mc-text);
  font: inherit;
}
.mc-field input::placeholder { color: var(--mc-muted); }
.mc-field input:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
/* card 201 (MV2-RUN-LIMITS-UX), Samer's UI law part three: NO number spinner anywhere — a
   numeric field is the same box as any other (the arrows gone, the field look kept) */
.mc-field input[type=number], .mc-select[type=number] { -moz-appearance: textfield; appearance: textfield; }
.mc-field input[type=number]::-webkit-inner-spin-button, .mc-field input[type=number]::-webkit-outer-spin-button,
.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mc-field input + small.mc-hint { display: block; }
/* card MV2-SIGNUP-CHECKLIST (Story MV2-SIGNUP-SAFETY): the live checklist under a handle or a password (rules.js) —
   a rule's mark turns --ok the moment it is met; the text keeps the form rhythm's --mc-sp-2 from its field (MV2-24) */
.mc-rules { list-style: none; margin: var(--mc-sp-2) 0 0; padding: 0; font-size: var(--mc-fs-sm); color: var(--mc-muted); }
.mc-rules li { display: flex; align-items: baseline; gap: var(--mc-sp-2); }
.mc-rules-mark { flex: none; width: 1em; height: 1em; border: var(--mc-hairline-w) solid var(--mc-muted);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8em;
  line-height: 1; position: relative; top: 0.15em; }
.mc-rules li.ok { color: var(--ok); }
.mc-rules li.ok .mc-rules-mark { border-color: var(--ok); background: var(--ok); color: var(--mc-bg); }
/* card MV2-LAYOUT-EMOJI-4B-CLOUD: the mark is drawn, never a glyph */
.mc-rules li.ok .mc-rules-mark::before { content: ""; width: 0.3em; height: 0.55em; border: solid currentColor;
  border-width: 0 0.14em 0.14em 0; transform: translateY(-0.08em) rotate(45deg); }
.mc-rules-specials { margin: var(--mc-sp-1) 0 0; letter-spacing: 0.08em; word-break: break-all; }
/* card MV2-CAPTCHA-PICTURE: the captcha's picture sits on its own line above the box it is typed into */
.mc-cap-img { display: block; margin-bottom: var(--mc-sp-2); border-radius: var(--mc-r-sm); }
/* the state a screen reader announces — kept off screen, never display:none (the 🔍 review of 2026-09-27) */
.mc-rules-said { position: absolute; width: var(--mc-hairline-w); height: var(--mc-hairline-w); overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
/* ── the form rhythm (card MV2-24, Samer 2026-09-26: "a text or a label never hits the frontier of a text box"):
   a text block that PRECEDES a field, a radio row, a select, a textarea, a button or a meter bar keeps --mc-sp-2 of
   air, a text block that FOLLOWS one keeps the same; a meter's label row keeps --mc-sp-1 to its bar. ONE block for
   every page, written as a FLOOR (:where — zero specificity): a component rule that says MORE wins (.mc-modal-row's
   --mc-sp-4), a component rule that says LESS is a bug the audit reports (tools/form_rhythm_audit.js of the mv2 hub
   measures every walked page, tests/check_mv2_form_rhythm.py parses these lists). The third list names the
   HORIZONTAL rows: a label left of its input rides the row's gap, never this margin. The third selector is the
   WRAPPED pair (lived on /signup: a hint, then a plain <div> whose first child is the field — `+` never reaches it).
   A pair the audit reports joins these lists — never a rule on a page, never a bare px. ── */
:where(
  :is(.mc-hint, p, small, h1, h2, h3, .mc-step, label:not(.mc-check)) + :is(.mc-field, .mc-modes, .mc-meter-bar, .mc-limits, select, textarea, input:not([type="radio"]):not([type="checkbox"]), .mc-btn, .mc-btn-ghost),
  :is(.mc-field, .mc-modes, .mc-meter-bar, .mc-limits, select, textarea, input:not([type="radio"]):not([type="checkbox"]), .mc-btn, .mc-btn-ghost) + :is(.mc-hint, p, small, label:not(.mc-check)),
  :is(.mc-hint, p, small, h1, h2, h3, .mc-step, label:not(.mc-check)) + * > :is(.mc-field, .mc-modes, .mc-meter-bar, .mc-limits, select, textarea, input:not([type="radio"]):not([type="checkbox"]), .mc-btn, .mc-btn-ghost):first-child
):not(:where(.mc-dlrow, .mc-modal-row, .mc-hosting-pick, .mc-rowhead, .mc-mapfoot, .mc-mapbar, .mc-host-doors, .mc-check, .mc-setrow, .mc-setlab, .mc-setval, td, th) > *) { margin-top: var(--mc-sp-2); }
.mc-meter-head + .mc-meter-bar { margin-top: var(--mc-sp-1); }
/* card 201: a teammate's two limits under its row (managers) — the top margin is the form rhythm's floor (MV2-24) */
.mc-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: var(--mc-sp-3); margin: var(--mc-sp-2) 0 var(--mc-sp-4); }

.mc-btn {
  width: 100%;
  min-height: var(--control-h);
  border: 0;
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-1) var(--mc-sp-4);
  font-family: var(--mc-font);
  font-size: var(--text-ui);
  line-height: var(--line-ui);
  font-weight: var(--weight-label);
  cursor: pointer;
  color: var(--mc-on-accent);   /* white on the gradient in both themes */
  background: var(--mc-accent-grad);
  box-shadow: var(--mc-shadow-accent);
  transition: filter var(--mc-tr);
}
.mc-btn:hover { filter: brightness(1.08); }

.mc-btn-ghost {
  width: auto;
  min-height: var(--control-h);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-1) var(--mc-sp-3);
  font-family: var(--mc-font);
  font-size: var(--text-ui);
  line-height: var(--line-ui);
  font-weight: var(--weight-label);
  cursor: pointer;
  color: var(--mc-text);
  background: none;
  transition: border-color var(--mc-tr), color var(--mc-tr);
}
.mc-btn-ghost:hover { border-color: var(--mc-accent); color: var(--mc-accent); }
/* card MV2-20 (Story MV2-16, CHANGES B6): the theme switch is an icon-only button — the sun / moon glyph of
   shell._SVG at the rail's icon size (the board's 012-icons.js speaks the same language); tokens only */
.mc-iconbtn { display: inline-flex; align-items: center; justify-content: center; align-self: stretch;
  padding: 0 var(--mc-sp-2); line-height: 1; }
.mc-iconbtn svg { width: var(--mc-icon); height: var(--mc-icon); flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── embed mode (card 60: the board's attach modal iframes settings; card 95:
   the project page's settings pane iframes the full body the same way) ── */
.mc-embedmain { padding: var(--mc-sp-4); }
/* card MV2-RUNNER-FIRST-FIT: the CONNECT embed (the runner-first modal's iframe, the picker's) lives inside a card that
   has its own air — no bottom padding (the last panel's margin is the air), a shorter top: at 1366 × 768 the runner-first
   modal then fits without a scrollbar. Scoped to that embed — the other embedded pages keep their frame */
.mc-embedmain.mc-rfembed { padding: var(--mc-sp-3) var(--mc-sp-4) 0; }
/* (card 61's docs-explorer rules left with the panel — card 95 moved Project
   documentation into the board's Knowledge tab, rendered by the board itself) */

/* ── selects (card 57: native combobox chrome dies here) ──
   Selects join the field language: same tokens as .mc-field input, OS arrow
   replaced by a chevron drawn from two linear-gradient squares in
   var(--mc-muted) — gradients, NOT an svg data URI, so the arrow color stays
   a token (33's law: no literal color outside tokens.css). Native semantics
   kept on purpose (keyboard, mobile pickers) — no widget. */
.mc-field select, select.mc-select, select.mc-btn-ghost {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-color: var(--mc-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mc-muted) 50%),
    linear-gradient(135deg, var(--mc-muted) 50%, transparent 50%);
  background-position:
    calc(100% - var(--mc-sp-4) - var(--mc-sp-1)) 50%,
    calc(100% - var(--mc-sp-4)) 50%;
  background-size: var(--mc-sp-1) var(--mc-sp-1), var(--mc-sp-1) var(--mc-sp-1);
  background-repeat: no-repeat;
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-3) var(--mc-sp-6) var(--mc-sp-3) var(--mc-sp-4);
  color: var(--mc-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--mc-tr);
}
select.mc-select, select.mc-btn-ghost {
  width: auto;
  font-size: var(--mc-fs-sm);
  padding-top: var(--mc-sp-2);
  padding-bottom: var(--mc-sp-2);
}
.mc-field select:focus, select.mc-select:focus, select.mc-btn-ghost:focus {
  outline: none;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow);
}
/* Windows paints the open list with page colors; elsewhere the OS popup wins
   and that is accepted — the CLOSED control is what sits in the layout */
.mc-field select option, select.mc-select option, select.mc-btn-ghost option {
  background: var(--mc-bg);
  color: var(--mc-text);
}

.mc-err { color: var(--mc-danger); font-size: var(--mc-fs-sm); min-height: 1.1em; margin: var(--mc-sp-1) 0 var(--mc-sp-3); }
.mc-foot {
  margin-top: var(--mc-sp-5);
  color: var(--mc-muted);
  font-size: var(--mc-fs-sm);
  text-align: center;
}
/* card MV2-18 (the dark sign-in of the walk): the foot's links wore the browser's default blue —
   unreadable on the dark card; the brand colour, tokens only */
.mc-foot a { color: var(--mc-accent); }

/* ── app frame (top bar + main) ── */
.mc-top {
  display: flex; align-items: center; gap: var(--mc-sp-3);
  padding: var(--mc-sp-4) var(--mc-sp-5);
  border-bottom: var(--mc-hairline-w) solid var(--mc-hairline);
  background: var(--mc-surface);
}
.mc-miniorb {
  width: var(--mc-sp-5); height: var(--mc-sp-5);
  border-radius: var(--mc-r-sm);
  background: var(--mc-accent-grad-tilt);
  box-shadow: var(--mc-shadow-accent);
}
.mc-top b { letter-spacing: .03em; }
/* card MV2-SHELL-TOPBAR-NARROW: min-width 0 — the row may shrink under its content, so the one elastic
   box of the bar (the org chip, below) yields instead of pushing the account button past the viewport */
.mc-who { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: var(--mc-sp-2); color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-avatar {
  width: var(--mc-sp-5); height: var(--mc-sp-5);
  border-radius: var(--mc-r-pill);
  display: grid; place-items: center;
  font-size: var(--mc-fs-sm);
  background: var(--mc-surface-solid);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  position: relative; overflow: hidden;
}

/* ── app frame v2 (MV2-SHELL-SIDEBAR — variant A "icon rail", Samer's pick):
     collapsible sidebar + FLUID main. The 46rem cap is gone; a page that
     reads better narrow opts into .mc-narrow (connect-runner does). ── */
body.mc-app { display: flex; flex-direction: column; min-height: 100vh; }
/* 2026-08-31 (Samer, layout consistency): the frame owns the viewport — the
   sidebar runs full height from the top (the project rail's geometry), the
   chip bar + main stack beside it in .mc-right */
.mc-frame { flex: 1; display: flex; align-items: stretch; min-height: 100vh; }
.mc-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-brandside {
  display: flex; align-items: center; flex: none;
  padding: var(--mc-sp-4) var(--mc-sp-4) var(--mc-sp-2);
}
.mc-brandside img { height: calc(var(--mc-logo-h) + var(--mc-sp-2)); display: block; }
.mc-brandside .mc-lg-dark { border-radius: var(--mc-r-xs); }
.mc-brandside .mc-lg-light { display: none; }
html.light .mc-brandside .mc-lg-light { display: block; }
html.light .mc-brandside .mc-lg-dark { display: none; }
/* the collapsed icon rail has no room for a wordmark */
body[data-side="rail"] .mc-brandside { display: none; }
.mc-brand { display: flex; align-items: center; gap: var(--mc-sp-3); text-decoration: none; color: inherit; }
.mc-logochip { background: var(--mc-logo-chip); border-radius: var(--mc-r-sm); padding: var(--mc-sp-1) var(--mc-sp-2); display: grid; place-items: center; }
.mc-logochip img { height: var(--mc-logo-h); display: block; }
.mc-side {
  width: var(--mc-side-w); flex: none;
  display: flex; flex-direction: column; overflow: hidden;
  border-right: var(--mc-hairline-w) solid var(--mc-hairline);
  background: var(--mc-surface);
  transition: width var(--mc-tr);
}
/* card 154 (MV2-SIDEBAR-SCROLL, Samer's remark 1 — the clipped menu): the
   brand stays pinned on top and .mc-collapse pinned at the bottom; the nav
   blocks live in ONE scrollable middle region (the GitHub/Linear left-nav
   convention), so every link is reachable on a short viewport — expanded
   sidebar and collapsed rail alike. */
.mc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
             scrollbar-width: thin; scrollbar-color: var(--mc-hairline) transparent; }
.mc-scroll::-webkit-scrollbar { width: var(--mc-sp-2); }
.mc-scroll::-webkit-scrollbar-thumb { background: var(--mc-hairline); border-radius: var(--mc-r-pill); }
.mc-scroll::-webkit-scrollbar-track { background: transparent; }
.mc-nav { padding: var(--mc-sp-3) var(--mc-sp-2); display: flex; flex-direction: column; gap: var(--mc-sp-1); }
.mc-navcap {
  color: var(--mc-muted); font-size: var(--mc-fs-sm); font-weight: var(--weight-label);
  letter-spacing: .12em; text-transform: uppercase;
  padding: var(--mc-sp-3) var(--mc-sp-4) 0; white-space: nowrap;
  transition: opacity var(--mc-tr);
}
.mc-navlink {
  display: flex; align-items: center; gap: var(--mc-sp-3);
  text-decoration: none; color: var(--mc-muted);
  padding: var(--mc-sp-2) var(--mc-sp-3); border-radius: var(--mc-r-sm);
  white-space: nowrap; position: relative; font-size: var(--mc-fs-base);
}
.mc-navlink:hover, .mc-navlink.mc-active { background: var(--mc-surface-solid); color: var(--mc-text); }
.mc-navlink.mc-active::before {
  content: ""; position: absolute;
  left: calc(-1 * var(--mc-sp-2)); top: 20%; bottom: 20%;
  width: var(--mc-navmark); border-radius: var(--mc-r-pill);
  background: var(--mc-accent-grad);
}
.mc-navlink svg, .mc-collapse svg {
  width: var(--mc-icon); height: var(--mc-icon); flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.mc-lbl { transition: opacity var(--mc-tr); }
.mc-collapse { margin-top: auto; padding: var(--mc-sp-2); }
.mc-collapse button {
  width: 100%; display: flex; align-items: center; gap: var(--mc-sp-3);
  border: 0; background: none; color: var(--mc-muted);
  font: inherit; font-size: var(--mc-fs-sm);
  padding: var(--mc-sp-2) var(--mc-sp-3); border-radius: var(--mc-r-sm);
  cursor: pointer; white-space: nowrap;
}
.mc-collapse button:hover { background: var(--mc-surface-solid); color: var(--mc-text); }
.mc-collapse svg { transition: transform var(--mc-tr); }
body[data-side="rail"] .mc-side { width: var(--mc-side-rail); }
body[data-side="rail"] .mc-lbl, body[data-side="rail"] .mc-navcap { opacity: 0; }
body[data-side="rail"] .mc-collapse svg { transform: rotate(180deg); }
body[data-side="rail"] .mc-navlink:hover::after {
  content: attr(data-tip); position: fixed;
  left: calc(var(--mc-side-rail) + var(--mc-sp-2));
  background: var(--mc-surface-solid);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm); padding: var(--mc-sp-1) var(--mc-sp-3);
  font-size: var(--mc-fs-sm); color: var(--mc-text);
  box-shadow: var(--mc-shadow-soft);
}

/* ── navigation redesign N1 (Samer 2026-10-21, D1–D6 — LAYOUT-UPDATE/navigation-redesign-2026-10-21.html):
     the Search row, "Your projects", the project's view groups, the ⋯ menu, the ONE Settings group and the
     Ctrl+K command menu (/static/nav.js). Tokens only, like every rule of this file (TC5). ── */
button.mc-navlink { border: 0; background: none; font: inherit; font-size: var(--mc-fs-base);
  cursor: pointer; width: 100%; text-align: left; }
.mcn-search { color: var(--mc-muted); }
.mcn-kbd { margin-left: auto; font-size: var(--mc-fs-sm); color: var(--mc-muted);
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs);
  padding: 0 var(--mc-sp-1); line-height: 1.5; }
/* N2a (S4) — a group label, Linear's measured rule: the SAME size as its rows, no icon, set at the icon column
   (outdented from the row text), air above. "Your projects" and the Settings mode's groups share it. */
.mcn-cap, .mcn-glabel { color: var(--mc-muted); font-size: var(--mc-fs-base); font-weight: 500;
  white-space: nowrap; letter-spacing: normal; text-transform: none; }
.mcn-cap { padding: var(--mc-sp-4) calc(var(--mc-sp-2) + var(--mc-sp-3)) var(--mc-sp-1); }
.mcn-glabel { padding: var(--mc-sp-4) var(--mc-sp-3) var(--mc-sp-1); }
.mcn-tree > .mcn-glabel:first-child { padding-top: var(--mc-sp-2); }
.mc-navcap.mcn-cap { letter-spacing: normal; text-transform: none; }
/* the Settings mode's sidebar */
.mcn-backlink { display: flex; align-items: center; gap: var(--mc-sp-2); color: var(--mc-muted); font-weight: 500;
  text-decoration: none; padding: var(--mc-sp-2) var(--mc-sp-3); border-radius: var(--mc-r-sm); }
.mcn-backlink:hover { color: var(--mc-text); background: var(--mc-surface-solid); }
.mcn-ssearch { width: 100%; margin: var(--mc-sp-1) 0 var(--mc-sp-2); padding: var(--mc-sp-2) var(--mc-sp-3);
  font: inherit; font-size: var(--mc-fs-base); color: var(--mc-text); background: var(--mc-surface);
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm); outline: none; }
.mcn-ssearch:focus-visible { border-color: var(--mc-accent); }
.mcn-setside .mc-navlink { padding-block: calc(var(--mc-sp-1) * 1.5); }
.mcn-results { display: flex; flex-direction: column; gap: var(--mc-sp-1); }
.mcn-hit .mcn-hint { margin-left: auto; color: var(--mc-muted); font-size: var(--mc-fs-sm); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.mcn-setrow { margin-top: var(--mc-sp-4); }
/* the framed pages' sidebar stays in view while a long page scrolls (N2a: the Settings mode jumps to a page's
   sections; the project rail is fixed chrome already) — .mc-scroll keeps its own overflow inside */
.mc-frame > .mc-side { position: sticky; top: 0; height: 100vh; align-self: flex-start; }
.mcn-setframe { display: block; width: 100%; height: calc(100vh - 10rem); min-height: 24rem;
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r); background: var(--mc-surface); }
body[data-side="rail"] .mcn-glabel, body[data-side="rail"] .mcn-ssearch { display: none; }
.mcn-subcap { color: var(--mc-muted); font-size: var(--mc-fs-sm);
  padding: var(--mc-sp-2) var(--mc-sp-3) var(--mc-sp-1) calc(var(--mc-sp-3) + var(--mc-icon) + var(--mc-sp-3)); }
.mcn-chev { width: var(--mc-icon); height: var(--mc-icon); margin-left: auto; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: .6; transition: transform var(--mc-tr); }
.mcn-grp.is-open > .mcn-head .mcn-chev { transform: rotate(90deg); }
.mcn-grp.is-open > .mcn-head { color: var(--mc-text); }
.mcn-subs { display: none; flex-direction: column; gap: var(--mc-sp-1); }
.mcn-grp.is-open > .mcn-subs { display: flex; }
.mc-navlink.mcn-sub { padding-left: calc(var(--mc-sp-3) + var(--mc-icon) + var(--mc-sp-3)); }
.mcn-views { padding-top: var(--mc-sp-1); }
.mcn-proj { position: relative; }
.mcn-projhead { display: flex; align-items: center; gap: var(--mc-sp-1); padding: var(--mc-sp-2) var(--mc-sp-2) 0; }
.mcn-projname { flex: 1; min-width: 0; color: var(--mc-text); font-weight: 600; }
.mcn-projname .mc-lbl, .mcn-projrow .mc-lbl { overflow: hidden; text-overflow: ellipsis; }
.mcn-ib { flex: none; display: grid; place-items: center; width: calc(var(--mc-icon) + var(--mc-sp-3));
  height: calc(var(--mc-icon) + var(--mc-sp-3)); border: 0; background: none; color: var(--mc-muted);
  border-radius: var(--mc-r-xs); cursor: pointer; position: relative; }
.mcn-ib svg { width: var(--mc-icon); height: var(--mc-icon); stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mcn-ib:hover { background: var(--mc-surface-solid); color: var(--mc-text); }
/* the ☆ of another project's row: an overlay at the row's end on hover (the name keeps its full width);
   a pinned project shows it always. The open project pins from its ⋯ menu. */
.mcn-projrow .mcn-pin { position: absolute; right: var(--mc-sp-2); opacity: 0; background: var(--mc-surface); }
.mcn-projrow:hover .mcn-pin, .mcn-projrow .mcn-pin[aria-pressed="true"], .mcn-pin:focus-visible { opacity: 1; }
.mcn-pin[aria-pressed="true"] svg { fill: currentColor; color: var(--ai, var(--mc-accent)); }
/* card 278's ⚠ lives with Open in IDE inside the ⋯ menu. The red dot that sat on ⋯ is gone (Samer 2026-10-22: "this red
   dot is ugly") — the menu row still says the IDE needs setup. */
.mcn-pop { position: fixed; z-index: 10045; min-width: 14rem; display: flex; flex-direction: column;
  gap: var(--mc-sp-1); padding: var(--mc-sp-2); background: var(--mc-surface);
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm); box-shadow: var(--mc-shadow); }
.mcn-pop .mcn-sub { padding-left: var(--mc-sp-3); }
.mcn-projrow { display: flex; align-items: center; position: relative; }
.mcn-projrow > .mc-navlink { flex: 1; min-width: 0; }
.mcn-more-row { color: var(--mc-muted); font-size: var(--mc-fs-sm); }
body[data-side="rail"] .mcn-subs, body[data-side="rail"] .mcn-grp.is-open > .mcn-subs,
body[data-side="rail"] .mcn-subcap, body[data-side="rail"] .mcn-kbd,
body[data-side="rail"] .mcn-ib, body[data-side="rail"] .mcn-chev, body[data-side="rail"] .mcn-cap { display: none; }
/* the icon rail shows no children: the head of the group holding the selected view carries the mark */
body[data-side="rail"] #mc-rail-chrome .mcn-grp:has(.mc-active) > button.mcn-head {
  background: var(--mc-surface-solid); color: var(--mc-text); }
/* the title of the board's top bar is the project switcher on the cloud (nav.js) */
#title.mcn-switch { cursor: pointer; border-radius: var(--mc-r-xs); }
#title.mcn-switch:hover { background: var(--mc-surface-solid); }
#title.mcn-switch::after { content: " \2304"; color: var(--mc-muted); font-weight: 400; }

/* the command menu (Ctrl+K / ⌘K) — over everything, the board's dialogs (10030+) included */
.mcn-back { position: fixed; inset: 0; z-index: 10050; display: flex; justify-content: center;
  align-items: flex-start; padding-top: 12vh; background: color-mix(in srgb, var(--mc-text) 18%, transparent); }
.mcn-pal { width: min(36rem, calc(100vw - 2 * var(--mc-sp-4))); max-height: 70vh; display: flex;
  flex-direction: column; overflow: hidden; background: var(--mc-surface); color: var(--mc-text);
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r); box-shadow: var(--mc-shadow);
  font-size: var(--mc-fs-base); }
.mcn-in { border: 0; border-bottom: var(--mc-hairline-w) solid var(--mc-hairline); background: none; color: inherit;
  font: inherit; font-size: var(--mc-fs-lg); padding: var(--mc-sp-4); outline: none; }
.mcn-list { overflow-y: auto; padding: var(--mc-sp-2) 0; }
.mcn-gl { color: var(--mc-muted); font-size: var(--mc-fs-sm); padding: var(--mc-sp-2) var(--mc-sp-4) var(--mc-sp-1); }
.mcn-it { display: flex; align-items: center; gap: var(--mc-sp-3); padding: var(--mc-sp-2) var(--mc-sp-4); cursor: pointer; }
.mcn-it.is-on { background: var(--mc-surface-solid); }
.mcn-it .mcn-hint { margin-left: auto; color: var(--mc-muted); font-size: var(--mc-fs-sm); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.mcn-it .mcn-key { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--mc-fs-sm); color: var(--mc-muted); }
.mcn-empty { color: var(--mc-muted); padding: var(--mc-sp-4); }
.mcn-foot { border-top: var(--mc-hairline-w) solid var(--mc-hairline); color: var(--mc-muted);
  font-size: var(--mc-fs-sm); padding: var(--mc-sp-2) var(--mc-sp-4); display: flex; gap: var(--mc-sp-4); }

.mc-main { padding: var(--mc-sp-6); flex: 1; min-width: 0; }
.mc-narrow { max-width: 46rem; }

/* ── key model governance (MV2-KEY-MODELS-GOVERNANCE-UI, card 102): the per-key
     enable-ticks panel on /org/settings ── */
.mc-modelgov { display: flex; flex-direction: column; gap: var(--mc-sp-1); margin-top: var(--mc-sp-2); }
.mc-modelrow { display: flex; gap: var(--mc-sp-2); align-items: baseline; font-size: var(--mc-fs-sm); cursor: pointer; }
.mc-modelrow small { color: var(--mc-muted); }

/* ── home projects polish (MV2-HOME-PROJECTS-POLISH, card 98): the Active/
     Archived tab bar + the 🔎 project filter beside ＋ New project ── */
.mc-tabs { display: flex; gap: var(--mc-sp-2); margin-bottom: var(--mc-sp-4); }
.mc-tabs .mc-active { background: var(--mc-surface-solid); color: var(--mc-text); border-color: var(--mc-accent); }
.mc-search {
  margin-left: auto; max-width: 15rem; font: inherit;
  background: var(--mc-surface); color: var(--mc-text);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm); padding: var(--mc-sp-2) var(--mc-sp-3);
}

/* ── profile page (MV2-USER-PROFILE) — who-chip link + the big avatar ── */
/* (the .mc-wholink chip — the handle + a small avatar linking to /profile — retired by card MV2-28: the avatar button
   below opens the account menu, whose Open profile row is the door) */
/* the profile photo inside the chip (2026-08-14) — covers the initials;
 * a missing avatar 404s and the img removes itself (graceful fallback) */
.mc-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mc-avatar-big {
  width: calc(2 * var(--mc-sp-6)); height: calc(2 * var(--mc-sp-6));
  border-radius: var(--mc-r-pill); object-fit: cover;
  border: var(--mc-hairline-w) solid var(--mc-hairline);
}
.mc-rowhead { display: flex; align-items: baseline; gap: var(--mc-sp-3); margin-bottom: var(--mc-sp-4); }
.mc-rowhead h1 { font-size: var(--text-title); line-height: var(--line-title); font-weight: var(--weight-title); margin: 0; }
.mc-rowhead small { color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-rowhead .mc-btn-ghost { margin-left: auto; }

/* ── hub list ── */
.mc-hub {
  display: flex; align-items: center; gap: var(--mc-sp-4);
  padding: var(--mc-sp-4) var(--mc-sp-4);
  background: var(--mc-surface);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r);
  margin-bottom: var(--mc-sp-3);
  box-shadow: var(--mc-shadow-soft);
  transition: transform var(--mc-tr), border-color var(--mc-tr);
  text-decoration: none;
  color: inherit;
}
.mc-hub:hover { transform: translateY(var(--mc-lift)); border-color: var(--mc-accent); }
.mc-hub .mc-name { font-weight: var(--weight-label); }
.mc-hub .mc-meta { color: var(--mc-muted); font-size: var(--mc-fs-sm); margin-top: var(--mc-sp-1); }
.mc-state {
  margin-left: auto;
  font-size: var(--mc-fs-sm);
  font-weight: var(--weight-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--mc-sp-1) var(--mc-sp-3);
  border-radius: var(--mc-r-pill);
  background: var(--mc-surface-solid);
  color: var(--mc-muted);
}
.mc-state.mc-active { background: none; color: var(--mc-success); border: var(--mc-hairline-w) solid var(--mc-success); }
/* ── card MV2-29 (Samer 2026-09-27, the Hubs page row): ONE badge for every status of the page — the handoff's
   bg-pill at Samer's metrics (sentence case, a tinted ground, a leading dot: filled = on, hollow = off); no amber
   but the AI's own (D2); the row a grid of fixed columns so the badges line up; the actions quiet (the ⋯ menu).
   Tokens only — and NO new token: tokens.css is vendored WHOLE into the engine (check_mv2_redesign_tokens TC1),
   so the metrics are the scale's (24 px = --space-6, 9 px = --space-2 + the hairline, the 7 px dot = --space-2 −
   the hairline, the 11 px header = --mc-fs-sm − the hairline) and the columns rem (140 · 150 · 36 px — card
   MV2-PLAYBOOKS-SILENT-HEAL removed the Playbooks + Refresh columns: the heal is silent, one grid per role). ── */
.mc-badge { display: inline-flex; align-items: center; gap: calc(var(--space-1) * 1.5);
  height: var(--space-6); padding: 0 calc(var(--space-2) + var(--mc-hairline-w)); border: 0; border-radius: var(--radius-md);
  font: var(--font-caption); letter-spacing: 0; text-transform: none; white-space: nowrap;
  background: var(--surface-200); color: var(--ink-muted); }
.mc-badge::before { content: ""; flex: none; box-sizing: border-box; width: calc(var(--space-2) - var(--mc-hairline-w)); height: calc(var(--space-2) - var(--mc-hairline-w));
  border-radius: var(--radius-pill); background: currentColor; }
.mc-badge--hollow::before { background: transparent; border: calc(var(--mc-hairline-w) * 1.5) solid currentColor; }
.mc-badge--ok { background: var(--ok-soft); color: var(--ok); }
.mc-badge--danger { background: var(--danger-soft); color: var(--danger); }
.mc-badge--neutral { background: var(--surface-200); color: var(--ink-muted); }
.mc-badge--ai { background: var(--ai-soft); color: var(--ai-ink); }
/* card MV2-APP-RUNNER-TAB: a STILL amber (runners are the --ai family's named domain) —
   "connected — waiting for an agent"; no pulse: a wait, not AI activity */
.mc-badge--amber { background: var(--ai-soft); color: var(--ai-ink); }
.mc-badge--ai::before { background: var(--ai); animation: mc-badgepulse 1.6s ease-in-out infinite; }
@keyframes mc-badgepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mc-badge--ai::before { animation: none; } }
button.mc-badge { cursor: pointer; }
button.mc-badge:hover { box-shadow: 0 0 0 var(--mc-hairline-w) var(--border-strong); }
/* the columns: ONE definition the header and the rows share (a page-local custom property, not a token — tokens.css
   stays the engine's verbatim copy) */
.mc-hubrow, .mc-hubhead { --mc-hubcols: minmax(8.75rem, 1fr) 9.375rem 2.25rem 2.25rem; }   /* + the favourite star (2026-10-22) */
.mc-hub.mc-hubrow { display: grid; grid-template-columns: var(--mc-hubcols); gap: var(--space-3); align-items: center; }
.mc-hubrow > * { min-width: 0; }
.mc-hubrow .mc-hubmain { display: block; }
.mc-hubsub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.mc-hubsub:not(:has(> :not([hidden]))) { display: none; }
/* a sub-line badge never leaves its column: it wraps its words inside a narrow cell (the review of 2026-09-27) */
.mc-hubsub .mc-badge { max-width: 100%; height: auto; min-height: var(--space-6); white-space: normal; }
.mc-hubhead { display: grid; grid-template-columns: var(--mc-hubcols); gap: var(--space-3);
  padding: 0 calc(var(--mc-sp-4) + var(--mc-hairline-w)) var(--space-2);
  font: var(--font-caption); font-size: calc(var(--mc-fs-sm) - var(--mc-hairline-w)); letter-spacing: var(--tracking-caption);
  text-transform: uppercase; color: var(--ink-muted); }
.mc-hubhead[hidden] { display: none; }
.mc-hubmore { justify-self: end; }
/* the live chip's host dissolves into the sub-line: the AI badge and its Quit wrap as TWO items (the review of 2026-09-27 —
   one unwrappable unit pushed the Quit onto the ⋯ at 390 px) */
.mc-live { display: contents; }
.mc-live[hidden] { display: none; }
.mc-quietbtn { display: inline-flex; align-items: center; justify-content: center; height: var(--row-compact);
  padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--brand); font: var(--font-label); white-space: nowrap; cursor: pointer; }
.mc-quietbtn:hover { background: var(--brand-soft); }
.mc-quietbtn:disabled { cursor: wait; opacity: .6; }
.mc-quietbtn--sm { height: var(--space-6); }
.mc-quietbtn--danger { color: var(--danger); }
.mc-quietbtn--danger:hover { background: var(--danger-soft); }
.mc-morebtn { display: inline-flex; align-items: center; justify-content: center; width: var(--row-compact);
  height: var(--row-compact); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--ink-muted); cursor: pointer; }
.mc-morebtn:hover, .mc-morebtn[aria-expanded="true"] { background: var(--surface-200); color: var(--ink); }
.mc-morebtn svg { width: var(--mc-icon); height: var(--mc-icon); flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-repomenu.mc-moremenu { min-width: calc(var(--mc-side-rail) * 3); background: var(--surface-000);
  border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.mc-moremenu [role="menuitem"] { display: block; width: 100%; padding: var(--space-2) var(--space-3); border: 0;
  border-radius: var(--radius-md); background: transparent; color: var(--ink); font: var(--weight-text) var(--text-ui) / var(--line-ui) var(--font-sans);
  text-align: left; white-space: nowrap; cursor: pointer; }
.mc-moremenu [role="menuitem"]:hover:not(:disabled) { background: var(--surface-200); }
.mc-moremenu [role="menuitem"]:disabled { color: var(--ink-subtle); cursor: not-allowed; }
.mc-moremenu [role="menuitem"].mc-menu-danger { color: var(--danger); }
.mc-moremenu hr { border: 0; border-top: var(--mc-hairline-w) solid var(--border); margin: var(--space-1) 0; }
.mc-quietbtn:focus-visible, .mc-morebtn:focus-visible, button.mc-badge:focus-visible,
.mc-moremenu [role="menuitem"]:focus-visible { outline: calc(var(--mc-hairline-w) * 2) solid var(--focus);
  outline-offset: calc(var(--mc-hairline-w) * 2); }
/* narrow: the LIST's own width decides, not the viewport's (a container query — the rail's 232 px made a viewport
   breakpoint lie: at 800 px the list is ~490 px wide, the review's walk of 2026-09-27). Below 43rem (the five columns
   + gaps + the row's padding ≈ 674 px) the name and the ⋯ share the first line, the statuses and Refresh wrap under it */
.mc-hublist { container-type: inline-size; }
@container (max-width: 43rem) {
  .mc-hub.mc-hubrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .mc-hubrow > .mc-hubcell { order: 0; flex: 1 1 calc(100% - var(--row-compact) - var(--space-3)); }
  .mc-hubrow > .mc-hubmore { order: 1; }
  .mc-hubrow > :not(.mc-hubcell):not(.mc-hubmore) { order: 2; }
  .mc-hubrow > :empty { display: none; }
  .mc-hubrow > * { max-width: 100%; }
  .mc-hubrow .mc-badge { max-width: 100%; height: auto; min-height: var(--space-6); white-space: normal; }
  .mc-hubhead { display: none; }
}

.mc-empty { color: var(--mc-muted); padding: var(--mc-sp-5); text-align: center; }
.mc-runner { display: flex; align-items: center; gap: var(--mc-sp-2); margin-top: var(--mc-sp-5); color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-dot { width: var(--mc-sp-2); height: var(--mc-sp-2); border-radius: var(--mc-r-pill); background: var(--mc-success); box-shadow: 0 0 var(--mc-sp-2) var(--mc-success-glow); }

/* ── connect-a-runner page (MV2-RUNNER-INSTALL-SCRIPT) ── */
.mc-hubmain { flex: 1; text-decoration: none; color: inherit; }
a.mc-btn-ghost { text-decoration: none; text-align: center; }
.mc-panel {
  background: var(--mc-surface);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r);
  padding: var(--mc-sp-5);
  margin-bottom: var(--mc-sp-4);
  box-shadow: var(--mc-shadow-soft);
}
.mc-step { display: flex; align-items: baseline; gap: var(--mc-sp-3); margin-bottom: var(--mc-sp-2); }
.mc-stepn { font-weight: var(--weight-label); color: var(--mc-muted); font-size: var(--text-title); line-height: var(--line-title); }
.mc-step h2 { font-size: var(--text-title); line-height: var(--line-title); font-weight: var(--weight-label); margin: 0; }
.mc-hint { color: var(--mc-muted); font-size: var(--mc-fs-sm); margin: var(--mc-sp-2) 0 0; }   /* MV2-24: a hint under a field keeps the floor's 8 px */
.mc-code {
  font-family: var(--mc-font-mono);
  font-size: var(--mc-fs-xl);
  letter-spacing: .35em;
  text-align: center;
  padding: var(--mc-sp-3);
  background: var(--mc-bg);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  margin: var(--mc-sp-3) 0;
}
.mc-dlrow { display: flex; align-items: center; gap: var(--mc-sp-3); flex-wrap: wrap; margin-top: var(--mc-sp-3); }
/* card 305 (MV2-LICENSE-ALERT-RECIPIENTS): the Alerts-go-to picker in the Updates panel —
   one checkbox row per admin (a disabled one dimmed, unpickable), Save under the list */
#mc-alerts .mc-check { display: flex; align-items: center; gap: var(--mc-sp-2); margin: 0 0 var(--mc-sp-1); cursor: pointer; }
#mc-alerts .mc-check.mc-dim { cursor: default; opacity: .55; }
#mc-alerts .mc-check .mc-hint { margin: 0; }
#mc-alerts .mc-btn-ghost { width: auto; padding: 0 var(--mc-sp-2); font-size: var(--mc-fs-sm); margin-top: var(--mc-sp-2); }   /* MV2-24: the floor */
/* ── paste-a-command install (MV2-INSTALL-ONELINER): a command line is not a
     pairing code — left-aligned, wrapping, select-all mono block ── */
.mc-cmd {
  font-family: var(--mc-font-mono);
  font-size: var(--mc-fs-sm);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  padding: var(--mc-sp-3);
  background: var(--mc-bg);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  margin: var(--mc-sp-2) 0;
}
.mc-dot-off { background: var(--mc-muted); box-shadow: none; }
.mc-ok { color: var(--mc-success); }

/* ── admin console tables (MV2-ADMIN-CONSOLE) ── */
.mc-table { width: 100%; border-collapse: collapse; font-size: var(--mc-fs-sm); }
.mc-table th {
  text-align: left;
  color: var(--mc-muted);
  font-weight: var(--weight-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--mc-sp-2) var(--mc-sp-3);
  border-bottom: var(--mc-hairline-w) solid var(--mc-hairline);
}
.mc-table td {
  padding: var(--mc-sp-2) var(--mc-sp-3);
  border-bottom: var(--mc-hairline-w) solid var(--mc-hairline);
}
.mc-table tr:last-child td { border-bottom: 0; }

/* ── new-project modal (MV2-NEW-PROJECT-UI) — tokens only, no forks ── */
.mc-modal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: var(--mc-bg-wash);
  backdrop-filter: blur(var(--mc-blur));
  padding: var(--mc-sp-5);
}
.mc-modal[hidden] { display: none; }
.mc-modal-card { width: 100%; max-width: 26rem; }
.mc-modal-row { display: flex; gap: var(--mc-sp-3); margin-top: var(--mc-sp-4); }
/* card 238 (MV2-USER-MFA-TOTP): the enrolment QR — a white pad in every theme
   (a scanner needs dark-on-light), the SVG inks itself with currentColor */
.mc-qr { display: flex; justify-content: center; padding: var(--mc-sp-3); margin: var(--mc-sp-3) 0;
  background: var(--mc-qr-pad); color: var(--mc-qr-ink); border-radius: var(--mc-r-sm); }
.mc-qr:empty { display: none; }
.mc-qr svg { width: 12rem; height: 12rem; display: block; }
.mc-modal select {
  width: 100%;
  font: inherit;
  color: var(--mc-text);
  background: var(--mc-surface);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-3);
}
.mc-rowhead .mc-btn { width: auto; margin-left: auto; }

/* ── the shared repo / hub picker (MV2-REPO-PICKER, card 74) — ONE component
   (static/picker.js) mounted by Repos & settings, project creation (76) and
   the project EDIT screen (77). Rows reuse .mc-hub; tokens only, no forks ── */
.mc-picker { max-width: 36rem; }
.mc-picker-tabs { display: flex; flex-wrap: wrap; gap: var(--mc-sp-2); margin-bottom: var(--mc-sp-3); }
.mc-picker-tabs[hidden] { display: none; }
.mc-picker-tab.mc-active { border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-picker-list { max-height: 50vh; overflow: auto; margin-top: var(--mc-sp-3); }
.mc-picker-row { cursor: pointer; margin-bottom: var(--mc-sp-2); padding: var(--mc-sp-3) var(--mc-sp-4); }
.mc-picker-row[hidden] { display: none; }
.mc-picker-row.mc-sel { border-color: var(--mc-accent); box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }

/* card 76 (MV2-HUB-HOSTING): the New-project "where do the cards live?" rows — served
   modes on .mc-hub chrome; a locked row keeps its served upgrade sentence (never a dead end).
   Samer's walk 2026-08-24: `.mc-field input` (width 100%, padding, border) also hit the RADIO
   inputs — a radio took a whole flex cell and sat far from its label, in the mode switch too;
   radios are exempt, and both radio blocks lay out as inline rows. */
.mc-field input[type="radio"] { width: auto; padding: 0; border: 0; background: none; box-shadow: none; margin: 0; accent-color: var(--mc-accent); }
.mc-modes { display: flex; flex-wrap: wrap; gap: var(--mc-sp-2) var(--mc-sp-4); }
.mc-modes label { display: inline-flex; align-items: center; gap: var(--mc-sp-2); cursor: pointer; }
.mc-hosting-row { cursor: pointer; align-items: flex-start; gap: var(--mc-sp-3); margin-bottom: var(--mc-sp-2); padding: var(--mc-sp-2) var(--mc-sp-3); }
.mc-hosting-row input[type="radio"] { flex: 0 0 auto; margin-top: var(--mc-sp-1); }
.mc-hosting-row > span { flex: 1; min-width: 0; }
.mc-hosting-row small { display: block; color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-hosting-row.mc-sel { border-color: var(--mc-accent); }
/* card MV2-CROWNS: the ONE locked look — the hosting row's base (76) now serves every crowned control */
.mc-hosting-row.mc-locked, [data-crown].mc-crowned { cursor: not-allowed; opacity: .6; }
/* card 83: the New-project pack select when ONE template is offered (served `locked`) */
.mc-field.mc-locked select { cursor: not-allowed; opacity: .7; }
/* card 82 (MV2-REPO-MAPPER): "On this machine" — layout A "Ledger": the repo · where it is
   on THIS machine, the state pill + the one action inline (tokens only) */
.mc-mapbar { display: flex; flex-wrap: wrap; gap: var(--mc-sp-3); align-items: center; margin-bottom: var(--mc-sp-4); }
.mc-mapbar .mc-field { margin: 0; flex: 1; min-width: calc(var(--mc-sp-6) * 7); }
.mc-mapstat { color: var(--mc-muted); font-size: var(--mc-fs-sm); font-variant-numeric: tabular-nums; }
.mc-map { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--mc-fs-base); }
.mc-map th { text-align: left; color: var(--mc-muted); font-size: var(--mc-fs-sm); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 0 var(--mc-sp-3) var(--mc-sp-2); border-bottom: var(--mc-hairline-w) solid var(--mc-hairline); }
.mc-map td { padding: var(--mc-sp-3); border-bottom: var(--mc-hairline-w) solid var(--mc-hairline); vertical-align: top; }
.mc-map tr:last-child td { border-bottom: 0; }
.mc-map .mc-name { font-weight: var(--weight-label); }
.mc-map .mc-meta { color: var(--mc-muted); font-size: var(--mc-fs-sm); margin-top: var(--mc-sp-1); font-family: var(--mc-font-mono); overflow-wrap: anywhere; }
.mc-map code { font-family: var(--mc-font-mono); font-size: var(--mc-fs-sm); overflow-wrap: anywhere; }
.mc-state { display: inline-flex; align-items: center; gap: var(--mc-sp-1); font-size: var(--mc-fs-sm); border-radius: var(--mc-r-pill); padding: 0 var(--mc-sp-2); border: var(--mc-hairline-w) solid var(--mc-hairline); color: var(--mc-muted); white-space: nowrap; }
.mc-state.ok { color: var(--mc-success); border-color: var(--mc-success); }
.mc-state.found { color: var(--mc-accent); border-color: var(--mc-accent); }
.mc-state.miss { color: var(--mc-danger); border-color: var(--mc-danger); }
.mc-state.warn { color: var(--mc-warn); border-color: var(--mc-warn); }  /* MV2-SH-LICENSE */
.mc-map .mc-btn, .mc-map .mc-btn-ghost { width: auto; padding: var(--mc-sp-1) var(--mc-sp-3); font-size: var(--mc-fs-sm); }
/* 157 revise 3 (Samer: after a clean connect, the page must SHOW him the next
   step): the just-connected rows flicker so the eye lands on the mapping column */
.mc-flash { animation: mc-rowflash 1s ease-in-out 3; }
@keyframes mc-rowflash {
  0%, 100% { outline: 0 solid transparent; background: transparent; }
  50% { outline: var(--mc-navmark) solid var(--mc-accent); background: var(--mc-surface-solid); }
}
/* card MV2-WIZARD-FINISH-LOADER (Samer 2026-09-22: "redirect the user to the Knowledge page and hilight the button
   Build Knowledge"): the guided finish lands on the Knowledge tab with 🧠 Build Knowledge in a pulsing accent ring
   until it is clicked. The class lives on BODY, not on the button: the board re-renders the tab's HTML on every
   state poll (a new button element each time), so a class on the button would be wiped within seconds. */
body.mc-guide #knowBuildBtn { animation: mc-guidepulse 1.2s ease-in-out infinite; }
@keyframes mc-guidepulse {
  0%, 100% { box-shadow: 0 0 0 var(--mc-navmark) var(--mc-accent); }
  50% { box-shadow: 0 0 0 var(--mc-sp-2) transparent; }
}
/* card 155 (MV2-REPOS-ONE-SECTION): the row's ⋯ action menu + the Details fold */
.mc-repomenu { position: absolute; z-index: 40; display: flex; flex-direction: column;
               min-width: var(--mc-side-rail); background: var(--mc-surface-solid);
               border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm);
               box-shadow: var(--mc-shadow-soft); padding: var(--mc-sp-1); }
.mc-repomenu .mc-btn-ghost { width: 100%; text-align: left; }
/* card 278 (MV2-IDE-MENU): the home tile's IDE menu — the vendors' logos (inlined <symbol>s, never
   recoloured), a row greyed where the machine lacks the IDE; the ⚠ door in the warn colour; the
   dark/light logo pairs picked by the shell's theme (html.light) */
.mc-idemenu svg { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: var(--mc-sp-1); }
.mc-idemenu .mc-btn-ghost.off { opacity: .45; cursor: not-allowed; }
.mc-idemenu .mc-hint { padding: var(--mc-sp-1); }
.mc-idewarn { color: var(--mc-warn); border-color: var(--mc-warn); }
html.light .ide-dark, html:not(.light) .ide-light { display: none; }
/* card MV2-29: the home tile's door is a badge in a fixed column now (IDE ready · IDE needs setup · Runner offline) */
.mc-repodet { margin-top: var(--mc-sp-2); }
/* 155 revise 3: the filterable pick list (the design-system select) */
.mc-picklist { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column;
               gap: var(--mc-sp-1); margin-top: var(--mc-sp-2);
               scrollbar-width: thin; scrollbar-color: var(--mc-hairline) transparent; }
.mc-picklist .mc-btn-ghost { width: 100%; text-align: left; }
.mc-mapact { display: flex; flex-wrap: wrap; gap: var(--mc-sp-2); align-items: center; margin-top: var(--mc-sp-2); }
.mc-mapact input { font: inherit; font-size: var(--mc-fs-sm); padding: var(--mc-sp-1) var(--mc-sp-2); background: var(--mc-bg); color: var(--mc-text); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm); min-width: calc(var(--mc-sp-6) * 6); }
.mc-mapact input:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
.mc-mapfoot { display: flex; flex-wrap: wrap; gap: var(--mc-sp-3); align-items: center; margin-top: var(--mc-sp-4); padding-top: var(--mc-sp-4); border-top: var(--mc-hairline-w) solid var(--mc-hairline); }
.mc-mapfoot .mc-btn { width: auto; }
.mc-mapfoot .mc-btn[disabled], .mc-map button[disabled] { opacity: .5; cursor: not-allowed; }
.mc-hosting-pick { display: flex; gap: var(--mc-sp-2); align-items: center; margin: var(--mc-sp-2) 0; }
/* Samer 2026-09-18: the project-code box "does not follow the css of the text boxes in the site" — an input in this
   row sits outside .mc-field, so it kept the browser's own white box. The field language, same tokens as .mc-field input
   (the mirror folder / branch inputs of the same dialog share the row, and the look). */
.mc-hosting-pick input { flex: 1; min-width: 0; padding: var(--mc-sp-2) var(--mc-sp-3);
  background: var(--mc-bg); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm);
  color: var(--mc-text); font: inherit; }
.mc-hosting-pick input::placeholder { color: var(--mc-muted); }
.mc-hosting-pick input:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
.mc-hosting-pick input:disabled { opacity: .6; }
.mc-picker-row.mc-dim { cursor: default; opacity: .55; }
.mc-picker-row.mc-dim:hover { transform: none; border-color: var(--mc-hairline); }
.mc-picker-row .mc-hint { overflow-wrap: anywhere; }
.mc-picker-tail { white-space: nowrap; }
.mc-picker .mc-field input[hidden] { display: none; }
/* card 78 (MV2-GIT-HOST-CONNECTOR): the Connect-GitHub/Bitbucket doors + account chips —
   inside the picker's ➕ tab and on My profile; same tokens, no forks */
.mc-host-doors { display: flex; flex-wrap: wrap; gap: var(--mc-sp-2); margin: var(--mc-sp-2) 0 var(--mc-sp-3); }   /* MV2-24: a row under a hint carries the floor itself (lived on /profile: 0 px) */
.mc-host-form { border-top: var(--mc-hairline-w) solid var(--mc-hairline); padding-top: var(--mc-sp-3); margin-top: var(--mc-sp-2); }
.mc-host-form a { color: var(--mc-accent); }
.mc-host-chip {
  font-size: var(--mc-fs-sm); white-space: nowrap;
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-pill);
  padding: 0 var(--mc-sp-2); color: var(--mc-muted);
}
.mc-host-chip.mc-invalid { color: var(--mc-danger); border-color: var(--mc-danger); }
/* the "what to select in the token" steps (Samer's walk 2026-08-24) — served per host */
.mc-host-steps { margin: var(--mc-sp-2) 0 var(--mc-sp-3); padding-left: var(--mc-sp-5); color: var(--mc-muted); font-size: var(--mc-fs-sm); display: grid; gap: var(--mc-sp-1); }
.mc-host-steps li::marker { color: var(--mc-muted); font-weight: var(--weight-label); }
/* card 79 (MV2-GITHUB-APP-CONNECT): the "paste a token instead" fallback next to a one-click door */
.mc-host-alt { align-self: center; font-size: var(--mc-fs-sm); color: var(--mc-muted); text-decoration: underline; }

/* ── card 81 (MV2-NEW-PROJECT-WIZARD): the three-step New-project modal (the local
   wizard.html's stepper shape on the shell chrome) + the picker's multi mode. Tokens only. ── */
/* card MV2-RUNNER-FIRST-FIT: the scrollbar's gutter is RESERVED — a bar that comes and goes narrows the content, the
   text reflows taller, the fitted frame grows, the bar comes back: a loop at the 92vh boundary. Reserved = one width, always */
.mc-modal-card.mc-wizard { max-width: 34rem; max-height: 92vh; overflow: auto; scrollbar-gutter: stable; }
.mc-field textarea {
  width: 100%;
  background: var(--mc-bg);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-3) var(--mc-sp-4);
  color: var(--mc-text);
  font: inherit;
  resize: vertical;
}
.mc-field textarea::placeholder { color: var(--mc-muted); }
.mc-field textarea:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
.mc-stepper { display: flex; align-items: center; gap: var(--mc-sp-2); margin-bottom: var(--mc-sp-2); }
.mc-stepper span { width: var(--mc-sp-2); height: var(--mc-sp-2); border-radius: var(--mc-r-pill); background: var(--mc-hairline); }
.mc-stepper span.on { background: var(--mc-accent-grad); box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
.mc-stepname { color: var(--mc-muted); font-size: var(--mc-fs-sm); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--mc-sp-4); }
.mc-wizard-head { text-align: left; margin-bottom: var(--mc-sp-3); }
.mc-basket { display: flex; flex-direction: column; gap: var(--mc-sp-2); margin: var(--mc-sp-2) 0; }
.mc-basket .mc-hub { margin: 0; padding: var(--mc-sp-2) var(--mc-sp-3); }
.mc-basket .mc-hub:hover { transform: none; }
.mc-basket .mc-btn-ghost { padding: 0 var(--mc-sp-2); }
.mc-door { border-top: var(--mc-hairline-w) solid var(--mc-hairline); padding-top: var(--mc-sp-3); margin-top: var(--mc-sp-3); }
.mc-door > b { font-size: var(--mc-fs-base); }
.mc-origin { border-left: var(--mc-navmark) solid var(--mc-accent); padding-left: var(--mc-sp-3); margin: 0 0 var(--mc-sp-4); color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-origin b { color: var(--mc-text); }
.mc-origin code { font-family: var(--mc-font-mono); }
.mc-wizard-nav { display: flex; gap: var(--mc-sp-3); margin-top: var(--mc-sp-4); align-items: center; }
.mc-wizard-nav .mc-btn { width: auto; flex: 1; text-align: center; text-decoration: none; }
.mc-wizard-nav .mc-btn[disabled] { opacity: .6; cursor: progress; }
.mc-wizard-nav .mc-skip { margin-left: auto; color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-outcome { display: grid; grid-template-columns: auto 1fr; gap: var(--mc-sp-1) var(--mc-sp-3); align-items: baseline; margin: var(--mc-sp-2) 0; font-size: var(--mc-fs-sm); }
.mc-outcome .mc-name { font-weight: var(--weight-label); font-size: var(--text-ui); }
.mc-outcome .mc-warn { color: var(--mc-danger); }
/* card 335: the row WRAPS — since 334 its tail is a sentence ("will connect acme/app for the whole team"); kept on one
   line (nowrap) it squeezed the path until it broke mid-word in the new-project dialog. The sentence drops under the
   path when both do not fit; the path itself only breaks when it is wider than the whole row. */
.mc-tick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-sp-1) var(--mc-sp-3); padding: var(--mc-sp-2) var(--mc-sp-3); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm); margin-bottom: var(--mc-sp-2); cursor: pointer; }
.mc-tick code { font-family: var(--mc-font-mono); font-size: var(--mc-fs-sm); overflow-wrap: anywhere; }
.mc-tick small { color: var(--mc-muted); font-size: var(--mc-fs-sm); margin-left: auto; text-align: right; }
/* card 335: inside step 2 the scan list sits under the lane's own "📁 On my machine" — its second heading and rule go */
#npScanSlot .mc-door { border-top: 0; margin-top: var(--mc-sp-2); padding-top: 0; }
#npScanSlot .mc-door > b { display: none; }
/* card 335: the folder input takes the row, Add folder keeps its own width (no inline style on the home page — the shell law) */
#npRootsField input { flex: 1; }
#npRootsField .mc-btn-ghost { width: auto; white-space: nowrap; }
.mc-tick.mc-picked { border-color: var(--mc-success); }
.mc-door .mc-dot, .mc-outcome .mc-dot, li > .mc-dot, .mc-stepn .mc-dot, .mc-upgrade .mc-dot, .mc-hint .mc-dot
  { display: inline-block; vertical-align: middle; }
/* card 337 (MV2-WIZARD-RUNNER-FIRST): the runner door before the wizard — the connect steps in an iframe inside the
   modal, and the mark on the installer row of this computer's system (the embed's CONNECT_JS arrange).
   card MV2-RUNNER-FIRST-FIT (Samer: "the scrolls … should not appear"): the frame is SIZED TO ITS CONTENT by the parent
   (rfFit — same origin) and never scrolls itself; min-height is the first paint, the modal's 92vh the one scroll left */
.mc-rfframe { display: block; width: 100%; min-height: 6rem; overflow: hidden; border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm); background: var(--mc-bg); margin-top: var(--mc-sp-3); }
.mc-reco { margin-left: var(--mc-sp-2); font-size: var(--mc-fs-sm); color: var(--mc-success); font-weight: var(--weight-label); }
/* card MV2-RUNNER-FIRST-FIT: the "i" — a short line stays visible, the long paragraph shows on hover or keyboard focus
   (the shell's first tooltip; tokens only). The tip is anchored to the LINE that carries the icon (the paragraph, the
   heading, the sub-line), not to the icon: it opens under that line from its left edge and wraps at 22rem, so an icon at
   the right end of a narrow panel (the embed inside the runner-first modal) never pushes its tip past the edge */
.mc-info { display: inline-flex; align-items: center; vertical-align: middle; margin-left: var(--mc-sp-1); color: var(--mc-muted); cursor: help; outline: none; }
:where(.mc-sub, .mc-hint, h2, b):has(> .mc-info) { position: relative; }
.mc-info > svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-info:hover, .mc-info:focus-visible { color: var(--mc-accent); }
.mc-tip { display: none; position: absolute; left: 0; top: calc(100% + var(--mc-sp-1)); z-index: 30; width: max-content; max-width: min(22rem, 80vw); padding: var(--mc-sp-2) var(--mc-sp-3); background: var(--mc-surface-solid); color: var(--mc-text); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm); box-shadow: var(--mc-shadow-soft); font-size: var(--mc-fs-sm); font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; }
.mc-tip code { font-family: var(--mc-font-mono); }
.mc-info:hover > .mc-tip, .mc-info:focus-within > .mc-tip { display: block; }
/* card MV2-RUNNER-FIRST-FIT: the modal's "waiting for a runner…" line sits closer (the page's runner line keeps sp-5) */
.mc-wizard .mc-runner { margin-top: var(--mc-sp-3); }
.mc-picker-row.mc-picked { border-color: var(--mc-success); }
.mc-picker-row.mc-picked .mc-name::before { content: ""; display: inline-block; width: 0.3em; height: 0.6em;
  margin-right: var(--mc-sp-2); border: solid var(--mc-success); border-width: 0 0.14em 0.14em 0;
  transform: translateY(-0.1em) rotate(45deg); }
.mc-picker-foot { margin-top: var(--mc-sp-3); display: flex; justify-content: flex-end; }
.mc-picker-foot[hidden] { display: none; }
.mc-picker-foot .mc-btn { width: auto; padding-left: var(--mc-sp-5); padding-right: var(--mc-sp-5); }
.mc-picker-foot .mc-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── deploy-key display (MV2-REPO-UX-POLISH) — a key is not an access code:
   mono, small, break-all, left — .mc-code's spaced/centered look wrecked
   the row with 100 chars ── */
.mc-key {
  font-family: var(--mc-font-mono);
  font-size: var(--mc-fs-sm);
  letter-spacing: normal;
  text-align: left;
  word-break: break-all;
  padding: var(--mc-sp-2) var(--mc-sp-3);
  margin-top: var(--mc-sp-2);
  background: var(--mc-bg);
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  color: var(--mc-muted);
}

/* card 116 (MV2-ORG-ACCESS): the top-bar organization switcher */
.mc-orgwrap { position: relative; min-width: 0; }   /* card MV2-SHELL-TOPBAR-NARROW: the chip is the row's elastic box */
.mc-orgmenu { position: absolute; right: 0; top: calc(100% + var(--mc-sp-2));
  min-width: var(--mc-side-w);
  background: var(--mc-surface-solid); border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r); box-shadow: var(--mc-shadow); padding: var(--mc-sp-1);
  display: flex; flex-direction: column; z-index: 10050;
  font-size: var(--text-ui); }   /* card MV2-27 (D-g): the who menu's "Sign out" size — the rows took the top bar's size */
.mc-orgmenu[hidden] { display: none; }
.mc-orgrow { display: flex; justify-content: space-between; align-items: center;
  gap: var(--mc-sp-3); width: 100%; text-align: left; background: none; border: 0;
  color: var(--mc-text); font: inherit; padding: var(--mc-sp-2);
  border-radius: var(--mc-r-sm); cursor: pointer; }
.mc-orgrow:hover { background: var(--mc-surface); }
.mc-orgrow small { color: var(--mc-muted); white-space: nowrap; font-size: var(--text-caption); }
.mc-orgrow.is-current .mc-orgnm { font-weight: 600; }
.mc-orgsep { border-top: var(--mc-hairline-w) solid var(--mc-hairline);
  margin: var(--mc-sp-1) 0; }
.mc-orghint { color: var(--mc-muted); cursor: default; }
/* card 303 (MV2-WORKSPACE-SITE): the company divider — shown only when the person's
   workspaces span two or more companies; the text is the company's NAME */
/* card MV2-27 (D-g, Samer: "the size of the Tenant should be the big"): the company is a weighted HEADING above its
   workspaces — read by weight, not by capitals; a company holding one workspace of its own name draws none (mcOrgMenu) */
.mc-orggrp { font-size: var(--text-caption); font-weight: 600;
  color: var(--mc-text); padding: var(--mc-sp-2) var(--mc-sp-2) var(--mc-sp-1); }

/* card MV2-PLAN-CHIP-UPGRADE-SHEET (Story MV2-2): the plan chip on every framed page — amber at ≤ 2 trial
   days or a meter at 80 %, red when the trial ended / the grace ran out — and the ONE upgrade sheet
   (a <dialog>: the meters as bars, what the next plan adds, the price line, one action) */
/* card MV2-28 (D-l): the pill left the bar — .mc-planchip is the verdict's words INSIDE the account menu's plan line
   (`Premium plan · Manage`); its tones colour the words, no box */
.mc-planchip { font-weight: 600; color: var(--mc-text); }
.mc-planchip.is-amber { color: var(--mc-warn); }
.mc-planchip.is-red { color: var(--mc-danger); }

/* card MV2-28 (Story MV2-16, D-g … D-l — Samer's mock of 2026-09-26): THE TOP-RIGHT CORNER, `PHX ⌄ │ ☾ (avatar ⌄)`, on
   every framed page and (the switcher + the divider) on the cloud board. Tokens only: 32 px = --mc-sp-6, 28 px =
   --mc-sp-5 + --mc-sp-1, 20 px = --mc-sp-4 + --mc-sp-1, 12 px = --mc-sp-3. The board draws its own avatar twin
   (engine css/020-chrome.css .top .mc-avbtn). */
#mc-orgbtn { display: inline-flex; align-items: center; gap: var(--mc-sp-2); width: auto; min-width: 0; max-width: 100%; height: var(--mc-sp-6);
  padding: 0 var(--mc-sp-3); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm);
  background: transparent; color: var(--mc-text); font-family: var(--mc-font); font-size: var(--mc-fs-base);
  font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
#mc-orgbtn:hover { background: var(--mc-surface-solid); }
#mc-orgbtn:focus-visible { outline: calc(var(--mc-hairline-w) * 2) solid var(--mc-accent); outline-offset: var(--mc-hairline-w); }
#mc-orgbtn svg { width: calc(var(--mc-sp-3) + var(--mc-hairline-w) * 2); height: calc(var(--mc-sp-3) + var(--mc-hairline-w) * 2);
  flex: none; color: var(--mc-muted); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* card MV2-SHELL-TOPBAR-NARROW (Samer 2026-10-21: "pay attention to avoid having text that overlaps the
   container... use ellipsis to protect this case"): at 390 px the top bar fits its viewport. The org chip
   is the ONE box of the row that yields — its name ellipsed, the whole name on hover (the span's title,
   cloud/shell.py) — and every control of the corner keeps its box (`flex: none`, below). The chip's width
   followed the workspace name's length, so a long name pushed .mc-acct › #mc-avbtn to 399–404 px.
   (the `min-width: 0` / `max-width: 100%` of the chip ride its own rules above, ONE rule per selector) */
#mc-orgname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-topdiv { display: inline-block; width: var(--mc-hairline-w); height: calc(var(--mc-sp-4) + var(--mc-sp-1));
  background: var(--mc-hairline); margin: 0 var(--mc-sp-2); flex: none; vertical-align: middle; }
#mc-theme.mc-iconbtn { align-self: center; flex: none; width: var(--mc-sp-6); height: var(--mc-sp-6); padding: 0; border: 0;
  border-radius: var(--mc-r-sm); background: transparent; color: var(--mc-muted); cursor: pointer; }
#mc-theme.mc-iconbtn:hover { background: var(--mc-surface-solid); color: var(--mc-text); }
#mc-theme.mc-iconbtn:focus-visible { outline: calc(var(--mc-hairline-w) * 2) solid var(--mc-accent); outline-offset: var(--mc-hairline-w); }
.mc-acct { position: relative; flex: none; }
.mc-top .mc-avbtn { display: inline-flex; align-items: center; flex: none; gap: var(--mc-sp-1); border: 0; background: transparent;
  padding: var(--mc-hairline-w); padding-right: var(--mc-sp-1); border-radius: var(--mc-r-pill); color: var(--mc-muted);
  font: inherit; cursor: pointer; }
.mc-top .mc-avbtn:hover { background: var(--mc-surface-solid); }
.mc-top .mc-avbtn:focus-visible { outline: calc(var(--mc-hairline-w) * 2) solid var(--mc-accent); outline-offset: var(--mc-hairline-w); }
.mc-top .mc-avbtn > svg { width: var(--mc-sp-3); height: var(--mc-sp-3); flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-top .mc-avwrap { position: relative; display: inline-flex; flex: none; }
.mc-top .mc-avcirc { position: relative; width: calc(var(--mc-sp-5) + var(--mc-sp-1)); height: calc(var(--mc-sp-5) + var(--mc-sp-1));
  border-radius: var(--mc-r-pill); overflow: hidden; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: var(--brand-soft); color: var(--brand); font-family: var(--mc-font);
  font-size: var(--mc-fs-sm); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-caption); }
.mc-top .mc-avcirc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-top .mc-avbadge { position: absolute; right: calc(-1 * var(--mc-hairline-w) * 3); bottom: calc(-1 * var(--mc-hairline-w) * 3);
  width: var(--mc-sp-3); height: var(--mc-sp-3); border-radius: var(--mc-r-pill); display: inline-flex;
  align-items: center; justify-content: center; background: var(--mc-surface);
  box-shadow: 0 0 0 calc(var(--mc-hairline-w) * 1.5) var(--mc-surface); color: var(--mc-muted); }
.mc-top .mc-avbadge.star svg, .mc-top .mc-avbadge.crown svg { width: calc(var(--mc-sp-2) + var(--mc-hairline-w) * 2); height: calc(var(--mc-sp-2) + var(--mc-hairline-w) * 2);
  fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.mc-top .mc-avbadge.alert svg { width: var(--mc-sp-3); height: var(--mc-sp-3); color: var(--mc-danger); fill: none;
  stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.mc-top .mc-avbadge.alert svg circle { fill: var(--mc-danger); }
.mc-top .mc-avbadge.alert svg line { stroke: var(--mc-surface); }
.mc-avmenu { position: absolute; right: 0; top: calc(100% + var(--mc-sp-2)); min-width: calc(var(--mc-sp-6) * 6);
  background: var(--mc-surface-solid); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r);
  box-shadow: var(--mc-shadow); padding: var(--mc-sp-1); display: flex; flex-direction: column; z-index: 10050;
  font-size: var(--text-ui); }
.mc-avmenu[hidden] { display: none; }
.mc-avhead { display: flex; align-items: center; gap: var(--mc-sp-2); padding: var(--mc-sp-2);
  border-bottom: var(--mc-hairline-w) solid var(--mc-hairline); margin-bottom: var(--mc-sp-1);
  font-weight: 600; color: var(--mc-text); }
.mc-avrow { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--mc-text);
  font: inherit; text-decoration: none; padding: var(--mc-sp-2); border-radius: var(--mc-r-sm); cursor: pointer; }
.mc-avrow:hover { background: var(--mc-surface); }
.mc-avplan { color: var(--mc-muted); }
.mc-avplan b { color: var(--mc-accent); font-weight: 600; }
.mc-plansheet { border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r);
  background: var(--mc-surface-solid); color: var(--mc-text); padding: 0; width: min(92vw, 34rem);
  box-shadow: var(--mc-shadow); pointer-events: auto; font-family: var(--mc-font); font-size: var(--mc-fs-base);
  /* the centering pinned HERE (LIVED 2026-09-24 on the board: the board's stylesheet resets the margins the
     UA dialog rule centers with, and the sheet sat in the top-left corner) */
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90vh; overflow: auto; }
.mc-plansheet::backdrop { background: color-mix(in srgb, var(--mc-bg) 72%, transparent); }
.mc-plansheet-body { padding: var(--mc-sp-5); position: relative; display: grid; gap: var(--mc-sp-3); }
.mc-plansheet-body h2 { margin: 0; padding-right: var(--mc-sp-6); font-size: var(--mc-fs-lg); }
.mc-plansheet-body h3 { margin: var(--mc-sp-2) 0 0; font-size: var(--mc-fs-base); }
.mc-plansheet-body p { margin: 0; }
.mc-plansheet-close { position: absolute; top: var(--mc-sp-3); right: var(--mc-sp-3); width: auto;
  padding: var(--mc-sp-1) var(--mc-sp-2); }
.mc-plansheet-reason { color: var(--mc-accent); font-weight: 600; }
.mc-plansheet-adds { margin: 0; padding-left: var(--mc-sp-5); line-height: 1.5; }
.mc-plansheet-price { color: var(--mc-muted); font-size: var(--mc-fs-sm); }
.mc-plansheet-body .mc-btn { width: auto; padding-left: var(--mc-sp-5); padding-right: var(--mc-sp-5); justify-self: start; }
.mc-plansheet-body .mc-btn[disabled] { opacity: .55; cursor: default; }
.mc-plansheet-sent { color: var(--mc-success); }
.mc-plansheet-meters, #mc-planmeters { display: grid; gap: var(--mc-sp-2); }
.mc-meter-head { display: flex; justify-content: space-between; gap: var(--mc-sp-3); font-size: var(--mc-fs-sm); }
.mc-meter-val { color: var(--mc-muted); white-space: nowrap; }
.mc-meter-bar { height: var(--mc-sp-2); background: var(--mc-bg); border-radius: var(--mc-r-pill); overflow: hidden;
  border: var(--mc-hairline-w) solid var(--mc-hairline); }
.mc-meter-fill { height: 100%; background: var(--mc-accent); border-radius: var(--mc-r-pill); }
.mc-meter.is-amber .mc-meter-fill { background: var(--mc-warn); }
.mc-meter small { display: block; margin-top: var(--mc-sp-2); }   /* MV2-24: the hint under a meter bar keeps the floor */
#mc-planline { display: block; margin: var(--mc-sp-2) 0 var(--mc-sp-3); }
/* card MV2-CROWNS (Story MV2-2, Samer's D6 — the crown law): a control outside the plan stays VISIBLE, is
   disabled (the .mc-locked base rule above, shared), wears the crown in the accent and opens the ONE sheet; a
   crowned row keeps its hover still. Tokens only. */
[data-crown].mc-crowned:hover { transform: none; border-color: var(--mc-hairline); }
.mc-crown { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: var(--mc-icon); height: var(--mc-icon); margin-left: var(--mc-sp-1); padding: 0; border: 0;
  background: none; color: var(--mc-accent); cursor: pointer; font: inherit; }
.mc-crown svg { width: var(--mc-fs-sm); height: var(--mc-fs-sm); stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mc-crown:hover { filter: brightness(1.15); }
.mc-doors .mc-dlrow { margin-top: var(--mc-sp-2); }
.mc-doors .mc-btn-ghost { white-space: nowrap; }

/* (the update-bell rules of cards 240 · 244 · 245 — .mc-bellwrap · .mc-bell · .mc-belldot · .mc-bellmenu ·
   .mcr-bell · .mc-railmenu — retired by card 273 MV2-UPDATE-NOTICE-MEMBERS: the board's 🔔 tray is the one bell) */

/* ── license gate (card MV2-SH-LICENSE) — curtain prose + the expiry banner ── */
/* card 243 (MV2-SH-UPDATE-PROGRESS): the Updates panel's live block — the steps of the walk as the updater
   writes them (card 242's record), the last log lines, the failing sentence in the danger colour */
.mc-updprog { margin: var(--mc-sp-3) 0 var(--mc-sp-1); }
.mc-updprog[hidden] { display: none; }
.mc-updsteps { list-style: none; padding: 0; margin: var(--mc-sp-2) 0; display: grid; gap: var(--mc-sp-1); color: var(--mc-muted); }
.mc-updsteps li.done { color: var(--mc-fg); }
.mc-updsteps li.now { color: var(--mc-accent); font-weight: 600; }
.mc-updlog { margin: var(--mc-sp-2) 0 0; padding: var(--mc-sp-2); max-height: calc(var(--mc-sp-6) * 3); overflow: auto;
  font-size: var(--mc-fs-sm); line-height: 1.4; color: var(--mc-muted); background: var(--mc-bg);
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); white-space: pre-wrap; }
.mc-updbad { color: var(--mc-danger); font-weight: 600; }
/* card 268 (MV2-SH-UPDATE-BUTTON-LOCK): the clicked Update now / Check now carries the wait mark while both are
   locked; the released box after a 20 s silence reads in the danger colour.
   card MV2-LAYOUT-LOADER-AND-TAB-ICON: the wait mark (cloud/brand.py wait_html, the engine's .hexwait twin) — the
   Beegait hexagon, 16 px, before the words; it replaced card 268's CSS ring */
.mc-wait { display: inline-flex; align-items: center; gap: var(--mc-sp-2); color: var(--mc-muted); }
button .mc-wait, .mc-btn .mc-wait { color: inherit; }
.mc-wait img { width: var(--mc-icon); height: var(--mc-icon); }
/* card MV2-LAYOUT-EMOJI-4B-CLOUD (the charter's K3: no emoji in the chrome): THE inline line icon of a page's text —
   shell.ic() / shell.with_icons(); grey, 1em, the board's .ic stroke; a warning line's icon is --mc-warn, a failed one
   --mc-danger; in a button it takes the button's ink */
.mc-ic { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; color: var(--mc-muted); }
button .mc-ic, .mc-btn .mc-ic, .mc-btn-ghost .mc-ic, a .mc-ic { color: inherit; }
.mc-ic.mc-ic-warn { color: var(--mc-warn); }
.mc-ic.mc-ic-bad { color: var(--mc-danger); }
#updates .mc-btn[disabled], #updates .mc-btn-ghost[disabled] { cursor: progress; opacity: 0.7; }
.mc-updprog.bad { color: var(--mc-danger); }
.mc-note { color: var(--mc-fg); font-size: var(--mc-fs-sm); line-height: 1.5;
  margin: 0 0 var(--mc-sp-3); }
.mc-licbanner { background: color-mix(in srgb, var(--mc-warn) 18%, transparent);
  border-bottom: var(--mc-hairline-w) solid var(--mc-hairline);
  color: var(--mc-fg); font-size: var(--mc-fs-sm);
  padding: var(--mc-sp-2) var(--mc-sp-4); }
.mc-licbanner-grace { background: color-mix(in srgb, var(--mc-danger) 22%, transparent); }
/* card MV2-PAST-DUE-GRACE (Story MV2-2, Samer's D9): the lapsed payer's banner shares the licence banner's look —
   under the chip's bar on every framed page and under the board's top bar; the address is a link. The paused
   page's project list: one clone line per project, selectable in one click. Tokens only. */
.mc-gracebanner a { color: inherit; font-weight: 600; }
.mc-pausedlist { margin: var(--mc-sp-2) 0 0; padding-left: var(--mc-sp-5); line-height: 1.7; }
.mc-pausedlist code { user-select: all; }

/* ── card 203 (MV2-CROSS-HUB-JOBS): the home page's live chip — what runs on that hub right
   now (type · age · by whom) and one Quit where the viewer may stop it; tokens only, and the
   hidden attribute must win over the chip's own display (the chip is empty until a job holds
   the hub) ── */
/* card MV2-29: the chip is an AI badge (.mc-badge--ai) under the project's name + a quiet danger Quit —
   its rules (.mc-live, .mc-live[hidden], .mc-quietbtn--danger) live with the Hubs row's block */

/* ── card 324 (MV2-RULES-ACCOUNT-PAGE): the Account page's rules — the engine's vendored editor bundle on a
   shell page (two tabs, the bundle's own GFM toolbar minus image + table, Save · Cancel, the live counter,
   the per-project result lines of the fleet write); tokens only, the hidden attribute wins everywhere ── */
.mc-rules .mc-tabs .mc-btn-ghost { width: auto; }
.mc-rl-bar { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: calc(var(--space-1) / 2);
  margin: var(--mc-sp-2) 0; }
.mc-rl-bar > :is(button, select) { font: inherit; font-size: var(--mc-fs-sm); color: var(--mc-text); background: var(--mc-surface);
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); padding: var(--mc-sp-1) var(--mc-sp-2); cursor: pointer; }
.mc-rl-bar button:disabled, .mc-rl-bar select:disabled,
.mc-rl-foot .mc-rl-acts button:disabled { opacity: .5; cursor: default; }   /* MV2-SET-RULES-TOOLBAR: Save left the bar */
.mc-rl-bar button.mc-on { border-color: var(--mc-accent); color: var(--mc-accent); }
/* card MV2-SET-ROW-KIT (Samer 2026-10-24: "the buttons of the rich text are not all on the same line"): the bar's own
   tools on one line, borderless and tighter, a hairline between groups; .mc-rl-acts sits right in the footer too */
.mc-rl-bar > button { border-color: transparent; background: none; min-width: var(--control-h-sm);
  height: var(--control-h-sm); padding: 0 calc(var(--space-1) * 1.5); }
.mc-rl-bar > button:hover:not(:disabled) { background: var(--surface-200); }
.mc-rl-bar > select { height: var(--control-h-sm); }
.mc-rl-sep { flex: none; width: var(--mc-hairline-w); height: calc(var(--space-4) + var(--space-1) / 2);
  margin: 0 var(--space-1); background: var(--border); }
:is(.mc-rl-bar, .mc-rl-foot) .mc-rl-acts { margin-left: auto; display: inline-flex; gap: var(--mc-sp-2); }
:is(.mc-rl-bar, .mc-rl-foot) .mc-rl-acts .mc-btn-ghost { width: auto; }
/* card MV2-ADMIN-DEMO-CHAT: the demo block's chat switch — a two-button segmented control, the pressed one accented */
.mc-demo-chat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-sp-1); }
.mc-demo-chat .mc-btn-ghost { padding: var(--mc-sp-1) var(--mc-sp-2); }
.mc-demo-chat .mc-btn-ghost[aria-pressed="true"] { border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-rl-ask { display: flex; gap: var(--mc-sp-2); margin: 0 0 var(--mc-sp-2); }
.mc-rl-ask[hidden], .mc-rl-host[hidden], .mc-rl-src[hidden], .mc-rl-seed[hidden] { display: none; }
.mc-rl-ask input { flex: 1; font: inherit; color: var(--mc-text); background: var(--mc-surface);
  border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-xs); padding: var(--mc-sp-1) var(--mc-sp-2); }
.mc-rl-ask .mc-btn-ghost { width: auto; }
.mc-rl-host { border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r-sm); background: var(--mc-surface);
  min-height: 18rem; max-height: 60vh; overflow: auto; padding: var(--mc-sp-3) var(--mc-sp-4); }
.mc-rl-host .mdeditor { outline: none; min-height: 16rem; line-height: 1.55; }
.mc-rl-host .mdeditor > :first-child { margin-top: 0; }
.mc-rl-host ul[data-type="taskList"] { list-style: none; padding-left: 0; }
.mc-rl-host ul[data-type="taskList"] li { display: flex; gap: var(--mc-sp-2); align-items: flex-start; }
.mc-rl-host pre, .mc-rl-host code { font-family: var(--mc-font-mono); }
.mc-rl-src { width: 100%; box-sizing: border-box; min-height: 18rem; max-height: 60vh; font-family: var(--mc-font-mono);
  font-size: var(--mc-fs-sm); color: var(--mc-text); background: var(--mc-surface); border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm); padding: var(--mc-sp-3); resize: vertical; }
.mc-rl-foot { display: flex; align-items: center; gap: var(--mc-sp-3); margin-top: var(--mc-sp-2); }
.mc-rl-foot .mc-err { margin: 0; }
.mc-rl-count.mc-over { color: var(--mc-danger); font-weight: var(--weight-title); }
.mc-rl-out { margin-top: var(--mc-sp-3); }
.mc-rl-line { margin: 0; }
/* ── the visual charter, wave C (Samer 2026-10-21, K1–K6 — the mv2 hub's cards/_files/LAYOUT-UPDATE/
   visual-charter-2026-10-21.html). Linear's RULES on our tokens, laid over every framed page from this ONE file:
   frame() stamps <body data-page="settings|app|console"> and the rules below follow. The pages' own markup (rows
   instead of boxes, one-line descriptions, no glyph headings) is wave E, after MV2-SEC-CLOUD-NO-INLINE-DATA. ── */

/* C1 · C2 — headings: a page title, a section title; bold text inside a sentence is 600, never the UA's 700 */
.mc-main :is(h2, h3), .mc-embedmain :is(h2, h3) { font-size: var(--text-title); line-height: var(--line-title);
  font-weight: var(--weight-label); }
.mc-main :is(b, strong), .mc-embedmain :is(b, strong) { font-weight: var(--weight-title); }
body[data-page="settings"] .mc-rowhead h1 { font-size: var(--text-display); line-height: var(--line-display);
  font-weight: var(--weight-title); letter-spacing: var(--tracking-display); }
.mc-rowhead { align-items: baseline; min-width: 0; }
.mc-rowhead > * { min-width: 0; }
.mc-rowhead small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* C3 — grey is for the second line only: a field's label is ink at 13 / 500, a section's intro reads at 13 px;
   the hint UNDER a field stays the 12 px muted description */
.mc-field > label.mc-hint, .mc-field > label:not(.mc-check) { color: var(--mc-text); font-size: var(--text-ui);
  line-height: var(--line-ui); font-weight: var(--weight-label); }
.mc-hint, .mc-err { line-height: var(--line-caption); }
/* prose is read: a paragraph or a list that explains (not a field's hint, not a status line) is 13 px */
:is(.mc-panel, .mc-narrow, .mc-main, .mc-embedmain, details) > :is(p, ol, ul).mc-hint, .mc-note {
  font-size: var(--text-ui); line-height: var(--line-ui); }
/* a toggle's label (a checkbox row straight in a section) reads as a row: ink, 13 px */
.mc-panel > label.mc-hint { color: var(--mc-text); font-size: var(--text-ui); line-height: var(--line-ui); }

/* C6 — inputs: the control height, the UI size (radios and checkboxes keep their own box) */
.mc-field input:not([type="radio"]):not([type="checkbox"]), .mc-field select, select.mc-select {
  min-height: var(--control-h); padding-top: 0; padding-bottom: 0; font-size: var(--text-ui); }
.mc-field input:not([type="radio"]):not([type="checkbox"]) { padding-left: var(--mc-sp-3); padding-right: var(--mc-sp-3); }
/* inside a row or a toolbar: the compact height */
:is(.mc-hub, .mc-mapact, .mc-dlrow, .mc-rowhead, .mc-table, .mc-tabs, .mc-modal-row) .mc-btn-ghost,
:is(.mc-hub, .mc-mapact, .mc-rowhead, .mc-modal-row) .mc-btn { min-height: var(--control-h-sm); }

/* C1 — one monospace face for every command, key, path and id */
body.mc-shell :is(code, pre, kbd, samp) { font-family: var(--mc-font-mono); font-size: var(--text-caption); }

/* C3 — one link colour: a bare link inside a sentence is the brand blue, never the browser's default blue or visited purple */
body.mc-shell a:not([class]), body.mc-shell a:not([class]):visited { color: var(--mc-accent); }

/* C4 — the three page models. Settings: ONE 640 px column, centred, for every page of the Settings mode (K2) */
body[data-page="settings"] .mc-main > * { max-width: var(--page-settings); margin-left: auto; margin-right: auto; }
body[data-page="settings"] .mc-main > .mc-narrow { max-width: var(--page-settings); }
/* the page's one-sentence intro keeps a section's air before the first section */
body[data-page="settings"] .mc-main > p.mc-hint { margin-top: 0; margin-bottom: var(--mc-sp-5); }
/* Focus: the sign-in family's one card */
.mc-center > .mc-card { max-width: var(--page-focus); }

/* the long-text guard (Samer, 2026-10-21: "some screen have very long texts like Keys ... avoid having text that
   overlaps the container... use ellipsis"). Two cases, nothing ever crosses the column:
   - a running sentence breaks a word only when it cannot fit its line (a URL, a fingerprint inside a hint), and the
     inherited break-word never lowers a flex item's or an auto table cell's min-content width ("DESKTO P-",
     "Repositor ies" came from `anywhere`, Samer 2026-10-24 — card MV2-SET-ROW-KIT);
   - a one-line VALUE (a key, a project's name, a path, a menu hint) keeps one line and ends in "…"; nav.js puts the
     full text in its tooltip, and every copy button copies the whole value (the text node is untouched). */
.mc-main, .mc-embedmain { overflow-wrap: break-word; }
:is(.mc-main, .mc-embedmain) :is(.mc-dlrow, .mc-step, .mc-hub, .mc-hubmain, .mc-limits, .mc-modal-row, .mc-mapact,
  .mc-mapbar) > * { min-width: 0; }
:is(.mc-main, .mc-embedmain) .mc-key, .mc-hub .mc-name, .mc-hub .mc-meta,
:is(.mc-main, .mc-embedmain) .mc-table td code, .mc-dlrow > code {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
/* a data table keeps the column's width: its columns share it and a long key in a cell ends in "…" (the probe of
   2026-10-21 found an auto-width table pushed 358 px past the 640 px column by one fingerprint) */
body[data-page="settings"] .mc-table, .mc-embedmain .mc-table { table-layout: fixed; }
body[data-page="settings"] .mc-table td, .mc-embedmain .mc-table td { overflow: hidden; text-overflow: ellipsis; }
:is(.mc-main, .mc-embedmain) pre { max-width: 100%; overflow-x: auto; }
:is(.mc-main, .mc-embedmain) :is(img, video, iframe, table, input, select, textarea) { max-width: 100%; }

/* C7 — a section's leading glyph (★ ⏱ 🗑 🔑 …) is not an icon of the charter: nav.js marks every non-numeric step
   mark on a Settings page and it leaves the row; numbered steps (1 · 2 · 3) stay, in muted ink. Wave E removes the
   glyphs from the markup itself. */
body[data-page="settings"] .mc-stepn.is-glyph { display: none; }
/* ── page changes keep the chrome still (Samer 2026-10-21: "when i navigate from a menu to another all the page is
   refreshed and the left menu is refresh ... compared with linear --> only the internal container is refreshed"):
   every framed page and the project page (the rail loads this file too) opt into the browser's cross-document view
   transitions — the sidebar and the top bar are NAMED, so they are carried across unanimated while only the content
   fades. A browser without the feature navigates exactly as before. nav.js loads render-blocking in the head
   (frame()), so the new page's first frame already carries the projects and the restored scroll. ── */
@view-transition { navigation: auto; }
.mc-side { view-transition-name: mc-side; }
.mc-top { view-transition-name: mc-top; }
/* card MV2-LANES-ORGMENU-ABOVE-BAND (Samer 2026-10-27, /lanes: "the workspace list is hidden behind the page"): a
   view-transition-name makes its element a stacking context, so at z auto the named chrome painted at layer 0 and its
   menus' z 10050 counted only INSIDE it — the Running lanes band (.ln-sum, sticky z 6) painted over the workspace and
   account menus and the rail's hover labels. The named chrome takes layer 7: over the band, under the panel's scrim
   (10010), the modals (40) and the board's rail band (9996) as before. */
.mc-top { position: relative; }
.mc-side, .mc-top { z-index: 7; }
::view-transition-group(mc-side), ::view-transition-group(mc-top),
::view-transition-old(mc-side), ::view-transition-new(mc-side),
::view-transition-old(mc-top), ::view-transition-new(mc-top) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* ── Repositories (Samer 2026-10-22, mockup FCrwngPqPqV2NPrr2qGoWk confirmed): one action per row, a value asked only when
   needed — the after-scan line (what was mapped, Undo), a found copy with its "Use this one", the Clone here… box ── */
.mc-mapsum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-sp-2) var(--mc-sp-3); margin-bottom: var(--mc-sp-4);
  padding: var(--mc-sp-2) var(--mc-sp-3); border-radius: var(--mc-r); background: var(--brand-soft); color: var(--mc-text); }
.mc-mapsum > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mc-mapsum .mc-btn-ghost { margin: 0; color: var(--brand); }
.mc-choice { display: flex; align-items: center; gap: var(--mc-sp-2); margin-top: var(--mc-sp-2); min-width: 0; }
.mc-choice code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-choice .mc-btn { flex: none; margin: 0; }
.mc-clonebox { margin-top: var(--mc-sp-2); padding: var(--mc-sp-3); border: var(--mc-hairline-w) solid var(--mc-hairline); border-radius: var(--mc-r);
  background: var(--mc-surface); display: flex; flex-direction: column; gap: var(--mc-sp-2); }
.mc-clonebox[hidden] { display: none; }
.mc-clonebox .mc-mapact { display: flex; gap: var(--mc-sp-2); align-items: center; margin: 0; }
.mc-clonebox .mc-mapact:last-child { justify-content: flex-end; }
.mc-clonebox input { flex: 1; min-width: 0; font-family: var(--mc-font-mono); }

/* the home row's favourite star (Samer 2026-10-22) — the sidebar star's twin: grey outline, filled when starred */
.mc-hubstar { display: grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; border: 0;
  border-radius: var(--radius-md); background: none; color: var(--mc-muted); cursor: pointer; justify-self: center; }
.mc-hubstar svg { width: var(--mc-icon); height: var(--mc-icon); stroke: currentColor; fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
.mc-hubstar:hover { background: var(--mc-surface-solid); color: var(--mc-text); }
.mc-hubstar:focus-visible { outline: none; box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
.mcn-favhint { padding: var(--mc-sp-1) var(--mc-sp-3); color: var(--mc-muted); font-size: var(--mc-fs-sm); }
body[data-side="rail"] .mcn-favhint { display: none; }

/* fe/front-2 — the Running lanes page (/lanes): one row per running plan, Finished · Now · To implement at 20 · 60 · 20 */
.ln-page { display: flex; flex-direction: column; gap: var(--space-4); }
.ln-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.ln-headtext h1 { margin: 0; font-size: var(--text-display); line-height: var(--line-display); font-weight: var(--weight-title);
  letter-spacing: var(--tracking-display); }
.ln-sub { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-caption); line-height: var(--line-caption); }
.ln-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ln-chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  border: var(--mc-hairline-w) solid var(--border); background: var(--surface-000); font-size: var(--text-caption);
  line-height: var(--line-caption); font-weight: var(--weight-label); }
.ln-cols { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); padding: 0 var(--space-4); color: var(--ink-muted);
  font: var(--font-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.ln-cols > span:nth-child(1), .ln-done, .ln-left { flex: 1 1 12.5rem; min-width: 0; }
.ln-cols > span:nth-child(2), .ln-now { flex: 3 1 37.5rem; min-width: 0; }
.ln-cols > span:nth-child(3) { flex: 1 1 12.5rem; }
.ln-list { display: flex; flex-direction: column; gap: var(--space-3); }
.ln-empty { margin: 0; padding: var(--space-6) var(--space-4); color: var(--ink-muted); font-size: var(--text-ui); text-align: center;
  border: var(--mc-hairline-w) dashed var(--border-strong); border-radius: var(--radius-lg); }
.ln-lane { background: var(--surface-000); border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; }
.ln-lanehead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4);
  padding: var(--space-2) var(--space-4); background: var(--surface-100); border-bottom: var(--mc-hairline-w) solid var(--border); }
.ln-plan { font: var(--font-title); color: var(--brand); text-decoration: none; }
.ln-plan:hover, .ln-open:hover, .ln-key:hover { color: var(--brand-hover); text-decoration: underline; }
.ln-meta { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); font-size: var(--text-caption); }
.ln-page svg { width: 0.8125rem; height: 0.8125rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ln-page svg .ln-fill { fill: currentColor; stroke: none; }
.ln-mstate { font-size: var(--text-caption); font-weight: var(--weight-label); }
.ln-m-online { color: var(--ok); }
.ln-m-offline, .ln-m-unpaired { color: var(--danger); }
.ln-mdot { display: inline-block; width: 0.5em; height: 0.5em; margin-right: var(--mc-sp-1); border-radius: 50%;
  background: currentColor; }   /* card MV2-LAYOUT-EMOJI-4B-CLOUD: the state dot, in the state's colour */
.ln-open { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--brand);
  font-size: var(--text-ui); font-weight: var(--weight-label); text-decoration: none; }
.ln-body { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4); }
.ln-done, .ln-left { display: flex; flex-direction: column; gap: var(--space-2); }
.ln-countrow { display: flex; align-items: center; gap: var(--space-2); }
.ln-count { font: var(--font-metric); font-variant-numeric: tabular-nums; }
.ln-num { margin-left: auto; font: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ln-quiet { color: var(--ink-muted); font-size: var(--text-caption); line-height: var(--line-caption); }
.ln-mono { font-family: var(--font-mono); color: var(--ink); }
.ln-badge { width: 1.375rem; height: 1.375rem; flex: 0 0 auto; border-radius: var(--radius-pill); display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box; }
.ln-badge-ok { background: var(--ok-soft); color: var(--ok); }
.ln-badge-ok svg { stroke-width: 3; }
.ln-badge-idle { border: 0.125rem solid var(--border-strong); background: var(--surface-000); }
.ln-bar { width: 100%; height: 0.375rem; border: 0; border-radius: var(--radius-pill); background: var(--surface-200);
  overflow: hidden; appearance: none; }
.ln-bar::-webkit-progress-bar { background: var(--surface-200); border-radius: var(--radius-pill); }
.ln-bar::-webkit-progress-value { background: var(--ok); border-radius: var(--radius-pill); }
.ln-bar::-moz-progress-bar { background: var(--ok); border-radius: var(--radius-pill); }
.ln-now { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-4);
  box-shadow: inset var(--mc-hairline-w) 0 0 var(--border), inset calc(-1 * var(--mc-hairline-w)) 0 0 var(--border); }
.ln-nowhead, .ln-nowline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ln-dot { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; border-radius: var(--radius-pill); box-sizing: border-box;
  border: 0.1875rem solid var(--surface-200); background: var(--ink-subtle); }
.ln-step { color: var(--ink-muted); font-size: var(--text-caption); }
.ln-key { font-family: var(--font-mono); font-size: var(--text-ui); font-weight: var(--weight-label); color: var(--brand);
  text-decoration: none; overflow-wrap: anywhere; }
.ln-title { flex: 1 1 14rem; min-width: 0; font-size: var(--text-ui); font-weight: var(--weight-label); }
.ln-pill { display: inline-flex; align-items: center; padding: 0.125rem var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--text-caption); line-height: var(--line-caption); font-weight: var(--weight-title); white-space: nowrap;
  background: var(--surface-200); color: var(--ink-muted); }
.ln-trail { flex: 1 1 16rem; min-width: 0; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--ink);
  background: var(--surface-100); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-trail-none { color: var(--ink-subtle); }
.ln-btn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); padding: 0 var(--space-3);
  border-radius: var(--radius-md); border: var(--mc-hairline-w) solid var(--border-strong); background: var(--surface-000);
  color: var(--ink); font-size: var(--text-ui); font-weight: var(--weight-label); text-decoration: none; white-space: nowrap; }
.ln-btn:hover { background: var(--surface-100); }
.ln-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ln-btn-primary:hover { background: var(--brand-hover); }
.ln-btn:focus-visible, .ln-page a:focus-visible { outline: none; box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
.ln-q { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--ai-soft);
  border: var(--mc-hairline-w) solid color-mix(in srgb, var(--ai) 35%, transparent); }
.ln-qtext { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--text-ui); }
.ln-cap { font: var(--font-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.ln-cap-ask { color: var(--ai-ink); }
.ln-t-run.ln-pill, .ln-t-run.ln-chip { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.ln-t-ask.ln-pill, .ln-t-ask.ln-chip { background: var(--ai-soft); color: var(--ai-ink); border-color: transparent; }
.ln-t-bad.ln-pill, .ln-t-bad.ln-chip { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.ln-t-run.ln-dot { background: var(--brand); border-color: var(--brand-soft); }
.ln-t-ask.ln-dot { background: var(--ai); border-color: var(--ai-soft); }
.ln-t-bad.ln-dot { background: var(--danger); border-color: var(--danger-soft); }
/* card MV2-LANES-GATE-CLEAR: the "gate" tone — the amber family of the ask, with a solid amber edge, so a lane
   stopped on a PERSON's accept never reads as the grey queue wait it used to */
.ln-t-gate.ln-pill, .ln-t-gate.ln-chip { background: var(--ai-soft); color: var(--ai-ink);
  border-color: color-mix(in srgb, var(--ai) 60%, transparent); font-weight: var(--weight-label); }
.ln-t-gate.ln-dot { background: var(--ai); border-color: var(--ai-soft); }
.ln-cap-gate { color: var(--ai-ink); }
.ln-gate { border-left: var(--space-1) solid var(--ai); }
/* the running card's progress (design 696uCEFY3w7yQkypfoibH8 v5): the water vessel (the brand master, one <symbol> per
   page, each lane's <use> sets --bgw-dy) + the 5-stage bar; finished = brand, current = brand striped (running) ·
   amber (paused) · grey (offline); an overrun label in amber */
.ln-vdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ln-vdefs svg { width: 0; height: 0; }
#bgw-water-level { transform: translate(0, var(--bgw-dy, 0)); }
.ln-prog { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.ln-vessel { position: relative; width: 4.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.ln-page svg.ln-vsvg { width: 3.875rem; height: 4rem; display: block; fill: initial; stroke: initial; stroke-width: initial; }
.ln-vpct { font-family: var(--font-sans); font-weight: var(--weight-title); font-size: var(--text-title); line-height: var(--line-title);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-voff svg.ln-vsvg { filter: grayscale(1); opacity: .55; }
/* card MV2-WATER-PCT-CENTERED (Samer 2026-10-23: "the % … centered inside the water"): over the drawn vessel the % is
   centred in it, white with a dark-blue halo (the vessel keeps the brand's colours in both themes) */
.ln-vsvg + .ln-vline .ln-vpct { position: absolute; left: 0; right: 0; top: 0; height: 4rem; display: flex;
  align-items: center; justify-content: center; font-size: var(--text-ui); color: var(--water-pct-ink); pointer-events: none;
  text-shadow: 0 0 0.125rem var(--water-pct-halo), 0 0.0625rem 0.1875rem var(--water-pct-halo-soft); }
.ln-voff .ln-vsvg + .ln-vline .ln-vpct { text-shadow: 0 0 0.125rem var(--water-pct-halo-off),
  0 0.0625rem 0.1875rem var(--water-pct-halo-off-soft); }
.ln-total .ln-vsvg + .ln-vline .ln-vpct { height: 4.625rem; font-size: var(--text-title); }
.ln-stages { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ln-stagehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.ln-stagename { font-size: var(--text-ui); font-weight: var(--weight-title); }
.ln-stagetime { font-size: var(--text-caption); color: var(--ink); font-variant-numeric: tabular-nums; }
.ln-src { display: inline-flex; align-items: center; padding: 0.0625rem var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-caption); line-height: var(--line-caption); font-weight: var(--weight-label);
  background: var(--surface-200); color: var(--ink-muted); }
.ln-src-inf { background: var(--surface-000); border: var(--mc-hairline-w) dashed var(--border-strong); }
.ln-fix { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.0625rem var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-caption); line-height: var(--line-caption); font-weight: var(--weight-title); background: var(--ai-soft); color: var(--ai-ink); }
/* card MV2-PLAN-FIX-REASONS: the badge is a button that opens the small list "What was fixed" (the approved
   artboard, board 13) — one row per round, the file in bold, the agent's own sentence tagged */
.ln-fixw { position: relative; display: inline-flex; }
button.ln-fix { border: var(--mc-hairline-w) solid var(--ai-ink); font-family: inherit; cursor: pointer; }
button.ln-fix:hover, button.ln-fix:focus-visible { background: var(--ai); color: var(--on-brand); }
.ln-fixlist { position: absolute; left: 0; top: calc(100% + var(--space-1)); z-index: 5; width: 29rem; max-width: 70vw;
  padding: var(--space-1) 0; border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-000); box-shadow: var(--shadow-panel); }
/* card MV2-LANES-FIXLIST-UNCLIPPED: the lane card clips for its rounded corners — never an OPEN list, which is drawn
   over the lanes below with every row (8 rounds were cut at the card's edge) */
.ln-lane:has(.ln-fixlist:not([hidden])) { overflow: visible; }
.ln-fixlist h4 { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-caption);
  line-height: var(--line-caption); font-weight: var(--weight-label); color: var(--ink-muted); }
.ln-fixrow { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-top: var(--mc-hairline-w) solid var(--border);
  font-size: var(--text-ui); line-height: var(--line-ui); color: var(--ink); }
.ln-fixrow time { font-size: var(--text-caption); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ln-fixrow small { display: block; font-size: var(--text-caption); line-height: var(--line-caption); color: var(--ink-muted); }
.ln-fixtag { margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-pill);
  border: var(--mc-hairline-w) dashed var(--border-strong); font-size: var(--text-caption); color: var(--ink-muted); }
.ln-eta { margin-left: auto; font-size: var(--text-caption); color: var(--ink); font-variant-numeric: tabular-nums; }
.ln-bar5 { display: flex; gap: var(--space-1); }
/* card MV2-PLAN-FIX-REASONS AC4: no stage label is ever cut — the artboard's minmax(44px, <share>fr); only the
   current segment carries its share ("Test · 35%") and it gets the room for it */
.ln-seg { flex: 1 1 0; min-width: 2.875rem; display: flex; flex-direction: column; gap: var(--space-1); }
.ln-seg-cur { min-width: 5rem; }
.ln-segtrack { height: 0.5625rem; border-radius: var(--radius-pill); background: var(--surface-200); overflow: hidden; }
.ln-segfill { height: 100%; border-radius: var(--radius-pill); background-color: var(--brand); transition: width 1.2s cubic-bezier(.22, 1, .36, 1); }
.ln-sf-ask { background-color: var(--ai); }
.ln-sf-bad { background-color: var(--ink-subtle); }
.ln-flow { background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--on-brand) 32%, transparent) 0 0.3125rem,
  transparent 0.3125rem 0.625rem); background-size: 1.75rem 0.5rem; animation: lnFlow 1.2s linear infinite; }
@keyframes lnFlow { from { background-position: 0 0; } to { background-position: 1.75rem 0; } }
.ln-seglbl { font-size: var(--text-caption); line-height: var(--line-caption); color: var(--ink-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ln-sl-cur { color: var(--ink); font-weight: var(--weight-title); }
.ln-sl-over { color: var(--ai-ink); font-weight: var(--weight-title); }
.ln-total { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.ln-total { justify-content: center; }
.ln-total .ln-vessel { width: auto; }
.ln-vline { display: flex; align-items: baseline; gap: var(--space-2); }
.ln-totlbl:empty { display: none; }
.ln-total svg.ln-vsvg { width: 4.5rem; height: 4.625rem; }
.ln-totlbl { font-size: var(--text-ui); font-weight: var(--weight-title); color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .ln-flow { animation: none; } .ln-segfill { transition: none; } }
@media (max-width: 64rem) {
  .ln-cols { display: none; }
  .ln-now { padding: var(--space-3) 0;
    box-shadow: inset 0 var(--mc-hairline-w) 0 var(--border), inset 0 calc(-1 * var(--mc-hairline-w)) 0 var(--border); }
}

/* card MV2-LANES-PANEL-AND-SUMMARY (Samer 2026-10-26: "to know if i have something waiting for an action, i have to
   scroll and see each lane … is it possible to keep on the top of the page a summary"): the sticky band — what waits
   for this reader, then the totals of all lanes. Tokens only. */
.ln-sum { position: sticky; top: 0; z-index: 6; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) 0; background: var(--mc-bg); }
.ln-sum-wait { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3);
  border: var(--mc-hairline-w) solid var(--ai); border-radius: var(--radius-lg); background: var(--ai-soft); }
.ln-sum-none { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  border: var(--mc-hairline-w) solid var(--border); background: var(--ok-soft); color: var(--ok);
  font-size: var(--text-ui); line-height: var(--line-ui); }
.ln-sumrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.ln-sumrow + .ln-sumrow { border-top: var(--mc-hairline-w) solid var(--border); padding-top: var(--space-1); }
.ln-sumplan { font-family: var(--font-mono); font-size: var(--text-ui); font-weight: var(--weight-label);
  color: var(--brand); text-decoration: none; }
.ln-sumplan:hover { color: var(--brand-hover); text-decoration: underline; }
.ln-sumq { flex: 1 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-ui); color: var(--ink); }
.ln-sum-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ln-sum-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3);
  border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-000); }
.ln-sum-val { font: var(--font-metric); font-variant-numeric: tabular-nums; color: var(--ink); }
.ln-sum-bar { grid-column: 1 / -1; justify-content: center; }
.ln-cap-bad { color: var(--danger); }
@media (max-width: 47.5rem) { .ln-sum-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the side panel: the Trail and the question, on this page. The dimmed layer covers the band too (nothing behind the
   panel takes a click), and the shell's own menus (10045 / 10050) still come over it. Card MV2-LANES-PANEL-SCRIM-WIDTH
   (Samer 2026-10-26): the layer is see-through (--scrim, the mockup's tint) so the lanes stay visible, the panel 65rem. */
.ln-scrim { position: fixed; inset: 0; z-index: 10010; background: var(--scrim);
  backdrop-filter: blur(var(--mc-blur)); }
.ln-scrim[hidden], .ln-panel[hidden] { display: none; }
.ln-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10020; box-sizing: border-box;
  width: min(65rem, 100%); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  overflow: hidden; background: var(--surface-000); border-left: var(--mc-hairline-w) solid var(--border);
  box-shadow: var(--shadow-panel); animation: lnPanelIn 200ms cubic-bezier(.22, 1, .36, 1); }
@keyframes lnPanelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.ln-panelhead { display: flex; align-items: flex-start; gap: var(--space-3); }
.ln-paneltexts { min-width: 0; }
.ln-panelhead h2 { margin: 0; font-size: var(--text-title); line-height: var(--line-title);
  font-weight: var(--weight-title); overflow-wrap: anywhere; }
.ln-panelsub { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-caption);
  line-height: var(--line-caption); }
.ln-panelx { order: 2; margin-left: auto; flex: 0 0 auto; min-width: var(--control-h); min-height: var(--control-h);
  border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-000);
  color: var(--ink); font-family: inherit; font-size: var(--text-ui); cursor: pointer; }
.ln-panelx:hover { background: var(--surface-100); }
.ln-panelstatus { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); color: var(--ink-muted); }
.ln-panelsaid { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--ok-soft); color: var(--ok); font-size: var(--text-ui); }
.ln-panelerr { margin: 0; color: var(--danger); font-size: var(--text-ui); }
.ln-panelbody { flex: 1 1 0; min-height: 6rem; overflow-y: auto; padding: var(--space-2);
  border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-100); }
/* card MV2-LANES-PANEL-SCRIM-WIDTH (Samer 2026-10-26: "when there is a question, its smal and hidden"): an open question
   takes its whole height (up to 70 % of the panel) and the trail shares only what is left, never under 6rem */
.ln-panelask { flex: 0 0 auto; max-height: 70%; overflow-y: auto; }
.ln-panelfoot { display: flex; justify-content: flex-end; }
.ln-tl { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-2); padding: var(--space-1) 0;
  font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--line-caption); color: var(--ink);
  overflow-wrap: anywhere; }
.ln-tl time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ln-new { background: var(--ai-soft); border-radius: var(--radius-sm); transition: background 3s linear; }
.ln-askblock { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
  border: var(--mc-hairline-w) solid var(--ai); border-radius: var(--radius-lg); background: var(--ai-soft); }
.ln-askone { display: flex; flex-direction: column; gap: var(--space-2); }
.ln-asktext { margin: 0; font-size: var(--text-ui); line-height: var(--line-ui); color: var(--ink); }
.ln-askopts { display: flex; flex-direction: column; gap: var(--space-1); }
.ln-askopt { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2);
  border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-000);
  font-size: var(--text-ui); cursor: pointer; }
.ln-askopt small { display: block; color: var(--ink-muted); font-size: var(--text-caption);
  line-height: var(--line-caption); }
.ln-askother { width: 100%; box-sizing: border-box; min-height: var(--control-h); padding: 0 var(--space-2);
  border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-000);
  color: var(--ink); font-family: inherit; font-size: var(--text-ui); }
.ln-askacts { display: flex; justify-content: flex-end; }
/* the lane the open panel reads, and the lane a band row jumps to */
.ln-sel { outline: var(--space-1) solid var(--brand); outline-offset: calc(-1 * var(--mc-hairline-w)); }
.ln-flash { animation: lnFlash 1.4s ease-out; }
@keyframes lnFlash { from { background: var(--ai-soft); } to { background: var(--surface-000); } }
@media (prefers-reduced-motion: reduce) {
  .ln-panel, .ln-flash { animation: none; }
  .ln-new { transition: none; }
}
@media (max-width: 35rem) { .ln-panel { width: 100%; } }

/* ── the settings row kit (card MV2-SET-ROW-KIT — Samer 2026-10-24: "Left for labels --> Right for the values";
   "Whenever you see a paragraph explaining something --> remove it and replace it with a '?'"); the spec is the mv2
   hub's cards/_files/LAYOUT-UPDATE/settings-rework-mockups/. Tokens only. ── */
.mc-rowhead h1 { flex: none; }
.mc-rowhead h1:has(> .mc-q) { display: inline-flex; align-items: center; gap: var(--space-2); }
.mc-rowhead > .mc-setval { margin-left: auto; }
.mc-rowhead > .mc-setval .mc-btn-ghost { margin-left: 0; }
.mc-rowhead + :is(.mc-setcard, .mc-setsec, .mc-settabs) { margin-top: var(--space-2); }
.mc-setcard { background: var(--surface-000); border: var(--mc-hairline-w) solid var(--border);
  border-radius: var(--radius-lg); margin: 0 0 var(--space-6); }
.mc-setrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  box-sizing: border-box; min-height: calc(var(--control-h) + 2 * var(--space-3) + var(--space-1));
  padding: calc(var(--space-3) + var(--space-1) / 2) var(--space-4); }
.mc-setrow + .mc-setrow { border-top: var(--mc-hairline-w) solid var(--border); }
.mc-setrow--stack { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.mc-setmain { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
.mc-setlab { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); flex: 1 1 auto; min-width: 0; }
.mc-setlab > b { display: flex; align-items: center; gap: calc(var(--space-1) * 1.5); font-size: var(--text-ui);
  line-height: var(--line-ui); font-weight: var(--weight-label); color: var(--ink); }
.mc-setlab > small { font-size: var(--text-caption); line-height: var(--line-caption); color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-setval { display: flex; align-items: center; gap: var(--space-2); flex: none; font-size: var(--text-ui);
  color: var(--ink); }
.mc-setval :is(input:not([type="checkbox"]):not([type="radio"]), select) { box-sizing: border-box;
  width: calc(var(--page-settings) * 3 / 8); min-height: var(--control-h); padding: 0 var(--space-3); font: inherit;
  font-size: var(--text-ui); color: var(--ink); background: var(--surface-000);
  border: var(--mc-hairline-w) solid var(--border); border-radius: var(--radius-md); }
.mc-setval :is(input, select):focus { outline: none; border-color: var(--mc-accent);
  box-shadow: 0 0 0 var(--mc-sp-1) var(--mc-glow); }
.mc-setval input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.mc-setval input[type=number]::-webkit-inner-spin-button,
.mc-setval input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:is(.mc-setval, .mc-settable) :is(.mc-btn-ghost, .mc-btn) { width: auto; min-height: var(--control-h-sm);
  padding-top: 0; padding-bottom: 0; }
.mc-setval code, .mc-setval .mc-mono { font-family: var(--mc-font-mono); font-size: var(--text-caption); }
.mc-setval :is(.mc-avatar, .mc-avatar-big) { flex: none; width: calc(var(--space-8) + var(--space-2));
  height: calc(var(--space-8) + var(--space-2)); }
/* card MV2-SET-ROW-KIT-NARROW (Samer 2026-10-21: "some screen have very long texts like Keys ... you need to pay
   attention to avoid having text that overlaps the container... use ellipsis"): the avatar or the icon beside a label
   keeps its box at every width; a select of a value keeps card 57's chevron (the kit's `background` wiped it); a page
   head's button stays on one line; under the 640 px column a row yields — its value wraps under the label, at the
   right, and its controls never pass the card (the label keeps its ellipsis). The range form `width < 40rem` says
   "strictly under the 640 px column" — at 640 the column itself keeps its one-line rows. */
.mc-setmain > :is(.mc-avatar, .mc-setico) { flex: none; }
.mc-setval select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none;
  padding-right: var(--space-8); background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - var(--space-4) - var(--space-1)) 50%, calc(100% - var(--space-4)) 50%;
  background-size: var(--space-1) var(--space-1), var(--space-1) var(--space-1); }
.mc-rowhead :is(.mc-btn, .mc-btn-ghost) { white-space: nowrap; }
@media (width < 40rem) {
  .mc-rowhead { flex-wrap: wrap; row-gap: var(--space-2); }
  .mc-setrow:not(.mc-setrow--stack) { flex-wrap: wrap; row-gap: var(--space-2); }
  .mc-setrow:not(.mc-setrow--stack) > .mc-setval { margin-left: auto; }
  .mc-setval { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
  .mc-setval > *, .mc-setval :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-width: 0;
    max-width: 100%; }
}
.mc-setsec { display: flex; align-items: center; gap: calc(var(--space-1) * 1.5); margin: 0 0 var(--space-2);
  font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-label); color: var(--ink-muted); }
.mc-q { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: var(--space-4); height: var(--space-4); margin-left: 0; padding: 0; vertical-align: middle;
  border: var(--mc-hairline-w) solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-000); color: var(--ink-muted); font: inherit; font-size: var(--text-caption);
  line-height: 1; font-weight: var(--weight-title); letter-spacing: normal; cursor: help; }
.mc-q:hover, .mc-q:focus-visible { color: var(--mc-accent); border-color: var(--mc-accent); }
.mc-q > .mc-tip { letter-spacing: normal; font-weight: var(--weight-text); }
:where(.mc-rowhead h1, .mc-setsec, .mc-setlab > b):has(> .mc-q) { position: relative; }
.mc-setico { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--radius-md);
  background: var(--surface-200); color: var(--ink-muted); }
.mc-setico svg { width: var(--mc-icon); height: var(--mc-icon); stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
input[type="checkbox"].mc-switch { -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box;
  width: var(--space-8); height: calc(var(--space-4) + var(--space-1) / 2); margin: 0;
  padding: calc(var(--space-1) / 2); border: 0; border-radius: var(--radius-pill); background: var(--border-strong);
  cursor: pointer; transition: background var(--mc-tr); }
input[type="checkbox"].mc-switch::before { content: ""; display: block; width: calc(var(--space-4) - var(--space-1) / 2);
  height: calc(var(--space-4) - var(--space-1) / 2); border-radius: var(--radius-pill); background: var(--surface-000);
  transition: transform var(--mc-tr); }
input[type="checkbox"].mc-switch:checked { background: var(--mc-accent); }
input[type="checkbox"].mc-switch:checked::before { transform: translateX(calc(var(--space-8) - var(--space-4))); }
input[type="checkbox"].mc-switch:disabled { opacity: .5; cursor: not-allowed; }
input[type="checkbox"].mc-switch:focus-visible { outline: calc(var(--mc-hairline-w) * 2) solid var(--focus);
  outline-offset: var(--mc-hairline-w); }
.mc-settabs { display: flex; gap: var(--space-1); margin: 0 0 var(--space-4);
  border-bottom: var(--mc-hairline-w) solid var(--border); }
.mc-settab { display: inline-flex; align-items: center; gap: calc(var(--space-1) * 1.5);
  margin-bottom: calc(-1 * var(--mc-hairline-w)); padding: var(--space-2) calc(var(--space-2) + var(--space-1) / 2);
  border: 0; border-bottom: calc(var(--mc-hairline-w) * 2) solid transparent; background: none; font: inherit;
  font-size: var(--text-ui); line-height: var(--line-ui); font-weight: var(--weight-label); color: var(--ink-muted);
  cursor: pointer; }
.mc-settab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.mc-setcnt { padding: 0 calc(var(--space-1) * 1.5); border-radius: var(--radius-pill); background: var(--surface-200);
  color: var(--ink-muted); font-size: var(--text-caption); line-height: var(--line-caption); }
.mc-settable { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-ui); }
.mc-settable th { padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap;
  font-size: var(--text-caption); line-height: var(--line-caption); font-weight: var(--weight-label);
  color: var(--ink-muted); border-bottom: var(--mc-hairline-w) solid var(--border); }
.mc-settable td { height: calc(var(--row-default) + var(--space-3)); padding: 0 var(--space-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--ink); border-top: var(--mc-hairline-w) solid var(--border); }
.mc-settable tbody tr:first-child td { border-top: 0; }
.mc-settable td.mc-setact { overflow: visible; position: relative; text-align: right; }
.mc-settable .mc-setsub { color: var(--ink-muted); font-size: var(--text-caption); }
.mc-setdot { display: inline-block; flex: none; box-sizing: border-box; width: var(--space-2); height: var(--space-2);
  margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--ok); vertical-align: middle; }
.mc-setdot--off { background: transparent; border: calc(var(--mc-hairline-w) * 1.5) solid var(--ink-muted); }