/* shell.css — layout primitives for the maistro-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(--mc-fs-base);
  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: 650; 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 label + input { margin-top: var(--mc-sp-1); }
.mc-field input + small.mc-hint { display: block; margin-top: var(--mc-sp-1); }
/* card 201: a teammate's two limits under its row (managers) */
.mc-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: var(--mc-sp-3); margin: 0 0 var(--mc-sp-4); }

.mc-btn {
  width: 100%;
  border: 0;
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-3);
  font-family: var(--mc-font);
  font-size: var(--mc-fs-base);
  font-weight: 650;
  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;
  border: var(--mc-hairline-w) solid var(--mc-hairline);
  border-radius: var(--mc-r-sm);
  padding: var(--mc-sp-2) var(--mc-sp-4);
  font-family: var(--mc-font);
  font-size: var(--mc-fs-sm);
  font-weight: 650;
  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); }

/* ── 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 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;
}

/* ── 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; }
.mc-who { margin-left: auto; 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: 650;
  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);
}

.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 ── */
.mc-wholink { display: flex; align-items: center; gap: var(--mc-sp-2); text-decoration: none; color: inherit; }
.mc-wholink:hover .mc-avatar { border-color: var(--mc-accent); }
/* 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(--mc-fs-lg); font-weight: 650; 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: 650; }
.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: 650;
  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 212 (MV2-PLAYBOOKS-SELF-HEAL): the `playbooks behind · refresh` chip is a BUTTON — the
   chip's own look, a pointer, the accent on hover; tokens only */
.mc-hub button.mc-state { font-family: var(--mc-font); cursor: pointer; border: var(--mc-hairline-w) solid var(--mc-hairline); }
.mc-hub button.mc-state:hover { border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-hub button.mc-state:disabled { cursor: wait; opacity: .6; }

.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: 650; color: var(--mc-accent); font-size: var(--mc-fs-lg); }
.mc-step h2 { font-size: var(--mc-fs-base); font-weight: 650; margin: 0; }
.mc-hint { color: var(--mc-muted); font-size: var(--mc-fs-sm); margin: var(--mc-sp-1) 0 0; }
.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); }
/* ── 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: 650;
  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); }
.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); }
.mc-hosting-row.mc-locked { 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: 650; }
.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 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; }
.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; }
.mc-hosting-pick input { flex: 1; min-width: 0; padding: var(--mc-sp-2) var(--mc-sp-3); }
.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-bottom: var(--mc-sp-3); }
.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-accent); font-weight: 650; }
/* 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. ── */
.mc-modal-card.mc-wizard { max-width: 34rem; max-height: 92vh; overflow: auto; }
.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: 650; font-size: var(--mc-fs-base); }
.mc-outcome .mc-warn { color: var(--mc-danger); }
.mc-tick { display: flex; align-items: center; gap: 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; white-space: nowrap; }
.mc-tick.mc-picked { border-color: var(--mc-success); }
.mc-door .mc-dot { display: inline-block; vertical-align: middle; }
.mc-picker-row.mc-picked { border-color: var(--mc-success); }
.mc-picker-row.mc-picked .mc-name::before { content: "✓ "; color: var(--mc-success); }
.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; }
.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; }
.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; }
.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; }

/* ── license gate (card MV2-SH-LICENSE) — curtain prose + the expiry banner ── */
.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 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) ── */
.mc-state.mc-live { background: none; color: var(--mc-accent); border: var(--mc-hairline-w) solid var(--mc-accent); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: var(--mc-sp-2); }
.mc-state.mc-live[hidden] { display: none; }
.mc-state.mc-live .mc-btn-ghost { width: auto; padding: 0 var(--mc-sp-2); font-size: var(--mc-fs-sm); color: var(--mc-danger); border-color: var(--mc-danger); }