/* case-mmp-lifecycle-manager.html only: styles for this case study's own screens and sections.
   Shared patterns live in case-study.css (page) and case-ui.css (product UI).
   Everything product-side is scoped under .ui.is-mmp; page-side pieces use the mm- prefix. */

/* ==========================================================================
   1. Theme. MMP is a light product, so its screens stay light in both colour
   modes; only the canvas around them follows the page.
   ========================================================================== */

.ui.is-mmp {
  --mm-violet: #7c3aed;
  --mm-side-w: 184px;
}

.page-wrap:not(.light-mode) .ui.is-mmp {
  --ui-canvas-a: #1a1d23;
  --ui-canvas-b: #121418;

  --ui-bg: #ffffff;
  --ui-panel: #fafbfc;
  --ui-sunken: #f1f3f7;
  --ui-line: #e5e9ef;
  --ui-line-soft: #f0f2f6;

  --ui-ink: #14171d;
  --ui-ink-2: #545c68;
  --ui-ink-3: #626b78;

  --ui-solid: #101216;
  --ui-solid-ink: #ffffff;

  --ui-accent: #2563eb;
  --ui-ok: #17a05a;
  --ui-warn: #b4780c;
  --ui-bad: #dc2626;

  --ui-tint: 12%;
  --ui-tint-strong: 18%;
  --ui-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
}

/* Section prose rules (margins, max-width, colour) must not reach the product. */
.ui.is-mmp p { margin: 0; max-width: none; color: inherit; }
.ui.is-mmp svg.mm-spark { border: 0; border-radius: 0; }

/* ==========================================================================
   2. App shell: full-height sidebar with the brand, a status bar over the
   content column. Matches the Figma Make build.
   ========================================================================== */

.ui.is-mmp .mm-app {
  display: grid;
  grid-template-columns: var(--mm-side-w) minmax(0, 1fr);
  font-size: 11px;
}

.ui.is-mmp .mm-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-line);
}

.ui.is-mmp .mm-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px 12px;
  border-bottom: 1px solid var(--ui-line);
}

.ui.is-mmp .mm-brand svg.ui-logo { width: 24px; height: 24px; border-radius: 7px; }
.ui.is-mmp .mm-brand > span { display: grid; min-width: 0; }
.ui.is-mmp .mm-brand b { font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ui-ink); white-space: nowrap; }
.ui.is-mmp .mm-brand small { font-size: 9px; color: var(--ui-ink-3); white-space: nowrap; }

.ui.is-mmp .mm-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
}

.ui.is-mmp .mm-nav-i {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ui-ink);
  white-space: nowrap;
}

.ui.is-mmp .mm-nav-i .i { width: 13px; height: 13px; color: var(--ui-ink-2); }

.ui.is-mmp .mm-nav-i.is-on {
  background: var(--ui-solid);
  color: var(--ui-solid-ink);
  font-weight: 600;
}

.ui.is-mmp .mm-nav-i.is-on .i { color: var(--ui-solid-ink); }

.ui.is-mmp .mm-me {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 14px;
  border-top: 1px solid var(--ui-line);
}

.ui.is-mmp .mm-me > span:last-child { display: grid; min-width: 0; }
.ui.is-mmp .mm-me b { font-size: 10.5px; font-weight: 600; color: var(--ui-ink); }
.ui.is-mmp .mm-me small { font-size: 9px; color: var(--ui-ink-3); }

.ui.is-mmp .mm-ava {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #0b6b50;
  background: #d5f3e7;
}

.ui.is-mmp .mm-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui.is-mmp .mm-top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-bg);
  font-size: 10.5px;
  color: var(--ui-ink-3);
  white-space: nowrap;
  flex: none;
}

.ui.is-mmp .mm-top-i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 14px;
  border-left: 1px solid var(--ui-line);
}

.ui.is-mmp .mm-top-i .i { width: 11px; height: 11px; }
.ui.is-mmp .mm-top-i b { color: var(--ui-ink); font-weight: 600; }

.ui.is-mmp .mm-top-r {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.ui.is-mmp .mm-top-r .ui-stat-i .i { color: var(--ui-accent); }
.ui.is-mmp .mm-top-r .ui-stat-i:nth-child(2) .i { color: var(--ui-ok); }

.ui.is-mmp .mm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  min-width: 0;
}

/* --- headings ------------------------------------------------------------ */

.ui.is-mmp .mm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ui.is-mmp .mm-head > div:first-child { display: grid; gap: 2px; min-width: 0; }

.ui.is-mmp .mm-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ui-ink);
}

.ui.is-mmp .mm-desc { font-size: 11px; color: var(--ui-ink-3); }

.ui.is-mmp .mm-head.is-sec { align-items: flex-end; margin-top: 2px; margin-bottom: -4px; }
.ui.is-mmp .mm-head.is-sec .mm-title { font-size: 13px; }
.ui.is-mmp .mm-head.is-sec .mm-desc { font-size: 10px; }

.ui.is-mmp .mm-k,
.ui.is-mmp .mm-tile-k {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ui-ink-3);
}

.ui.is-mmp .mm-fine { font-size: 9.5px; color: var(--ui-ink-3); }

/* --- cards --------------------------------------------------------------- */

.ui.is-mmp .mm-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
}

.ui.is-mmp .mm-card.is-flush { padding: 0; gap: 0; overflow: hidden; }

.ui.is-mmp .mm-card-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ui-ink);
}

.ui.is-mmp .mm-card-t small { font-size: 10px; font-weight: 600; color: var(--ui-ink-3); margin-left: 4px; }

.ui.is-mmp .mm-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ui.is-mmp .mm-card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-panel);
}

.ui.is-mmp .mm-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ui.is-mmp .mm-wide { width: 100%; justify-content: center; padding-top: 7px; padding-bottom: 7px; }
.ui.is-mmp .mm-grow { flex: 1; }
.ui.is-mmp .ui-field { margin-bottom: 0; }
.ui.is-mmp .ui-help { margin: 5px 0 0; }
.ui.is-mmp .ui-label { margin-bottom: 5px; }

/* --- tables -------------------------------------------------------------- */

.ui.is-mmp .mm-table th { padding: 8px 10px; background: var(--ui-bg); }
.ui.is-mmp .mm-table td { padding: 8px 10px; white-space: nowrap; }
.ui.is-mmp .mm-table .is-num { text-align: right; }
.ui.is-mmp .mm-table td.mm-strong { color: var(--ui-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui.is-mmp .mm-name { font-weight: 600; color: var(--ui-ink); }

.ui.is-mmp .mm-cell { display: inline-flex; align-items: center; gap: 8px; }
.ui.is-mmp .mm-cell b { font-weight: 600; color: var(--ui-ink); }

.ui.is-mmp .mm-score { font-weight: 700; color: var(--ui-ink); font-variant-numeric: tabular-nums; }

.ui.is-mmp svg.mm-spark {
  display: inline-block;
  width: 64px;
  height: 18px;
  vertical-align: middle;
  fill: none;
  stroke: #6366f1;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui.is-mmp .mm-ck-col { width: 16px; padding-right: 0; }

.ui.is-mmp .mm-ck {
  display: block;
  width: 12px;
  height: 12px;
  border: 1.5px solid color-mix(in srgb, var(--ui-ink-3) 55%, transparent);
  border-radius: 3px;
}

/* Skill tags and type tags: outlined, each its own hue, as in the build. */
.ui.is-mmp .mm-skill,
.ui.is-mmp .mm-type {
  --c: var(--ui-accent);
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--c) 78%, var(--ui-ink));
  background: color-mix(in srgb, var(--c) 9%, var(--ui-bg));
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}

.ui.is-mmp .mm-skill.is-nlp { --c: var(--mm-violet); }
.ui.is-mmp .mm-skill.is-vision { --c: var(--ui-accent); }
.ui.is-mmp .mm-skill.is-audio { --c: #d97706; }
.ui.is-mmp .mm-skill.is-multimodal { --c: var(--ui-ok); }
.ui.is-mmp .mm-type.is-eds { --c: var(--ui-accent); }
.ui.is-mmp .mm-type.is-ids { --c: var(--ui-ok); }
.ui.is-mmp .mm-type.is-model { --c: var(--ui-accent); }
.ui.is-mmp .mm-type.is-weights { --c: var(--mm-violet); }
.ui.is-mmp .mm-type.is-config { --c: #d97706; }

.ui.is-mmp .mm-state { margin: 0; justify-items: start; }

/* Filter chips. */
.ui.is-mmp .mm-filters { display: flex; flex-wrap: wrap; gap: 5px; }

.ui.is-mmp .mm-filters span {
  padding: 4px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-ink);
  background: var(--ui-bg);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.ui.is-mmp .mm-filters span.is-on { background: var(--ui-solid); border-color: var(--ui-solid); color: var(--ui-solid-ink); }

/* ==========================================================================
   3. Screens
   ========================================================================== */

/* --- 01 overview ---------------------------------------------------------- */

.ui.is-mmp .mm-welcome {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ui-sunken) 0%, var(--ui-panel) 70%);
}

.ui.is-mmp .mm-welcome-head { display: flex; align-items: center; gap: 9px; }

.ui.is-mmp .mm-welcome-ico {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ui-ink-3) 18%, var(--ui-bg));
  color: var(--ui-ink);
}

.ui.is-mmp .mm-welcome-ico .i { width: 13px; height: 13px; }
.ui.is-mmp .mm-welcome-t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ui-ink); }
.ui.is-mmp .mm-welcome-d { font-size: 11px; color: var(--ui-ink-3); max-width: 520px; margin-top: -4px; }

.ui.is-mmp .mm-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-bg);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ui-ink);
  white-space: nowrap;
}

.ui.is-mmp .mm-pill .i { width: 10px; height: 10px; }

.ui.is-mmp .ui-steps .ui-step { min-height: 84px; }

.ui.is-mmp .mm-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
}

.ui.is-mmp .mm-lanes .ui-row:last-child { margin-bottom: 0; }

.ui.is-mmp .mm-lane-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-ink);
}

.ui.is-mmp .mm-lane-h i,
.ui.is-mmp .mm-lane-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent); }
.ui.is-mmp .mm-lane-h i.is-ok { background: var(--ui-ok); }

.ui.is-mmp .mm-lanes-arrow { display: grid; place-items: center; padding-top: 18px; color: var(--ui-ink); }
.ui.is-mmp .mm-lanes-arrow .i { width: 15px; height: 15px; }

/* --- 02 repository -------------------------------------------------------- */

.ui.is-mmp .mm-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
}

.ui.is-mmp .mm-strip-i { display: flex; align-items: center; gap: 9px; }
.ui.is-mmp .mm-strip-i > span:last-child { display: grid; }
.ui.is-mmp .mm-strip-i b { font-size: 11px; font-weight: 600; color: var(--ui-ink); }
.ui.is-mmp .mm-strip-i small { font-size: 9.5px; color: var(--ui-ink-3); }

.ui.is-mmp .mm-strip-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-bg));
  border: 1px solid color-mix(in srgb, var(--ui-accent) 25%, transparent);
}

.ui.is-mmp .mm-strip-ico.is-ok {
  color: var(--ui-ok);
  background: color-mix(in srgb, var(--ui-ok) 10%, var(--ui-bg));
  border-color: color-mix(in srgb, var(--ui-ok) 25%, transparent);
}

.ui.is-mmp .mm-strip-ico .i { width: 14px; height: 14px; }
.ui.is-mmp .mm-strip-arrow { color: var(--ui-ink); }
.ui.is-mmp .mm-strip-arrow .i { width: 15px; height: 15px; }

.ui.is-mmp .mm-queue {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ui-ink-2);
}

.ui.is-mmp .mm-queue .ui-when { justify-items: end; }
.ui.is-mmp .mm-queue .ui-meter { width: 120px; margin: 0; }
.ui.is-mmp .is-complete .mm-queue .ui-meter i { background: var(--ui-ok); }

.ui.is-mmp .mm-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10.5px;
  color: var(--ui-ink-3);
}

.ui.is-mmp .mm-pager-b { display: flex; gap: 6px; }
.ui.is-mmp .mm-pager .ui-btn { background: var(--ui-bg); color: var(--ui-ink); }
.ui.is-mmp .mm-pager .ui-btn.is-off { color: var(--ui-ink-3); }

/* --- 03 scoring arena ----------------------------------------------------- */

.ui.is-mmp .ui-note { margin-bottom: 0; }

.ui.is-mmp .mm-pick {
  min-height: 52px;
  padding: 9px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-panel);
  align-items: center;
}

.ui.is-mmp .mm-pick > .w-before { text-align: center; font-size: 10.5px; color: var(--ui-ink-3); }
.ui.is-mmp .mm-pick > .w-after { display: flex; flex-wrap: wrap; gap: 5px; align-content: center; }
.ui.is-mmp .mm-add { margin-top: 7px; }
.ui.is-mmp .mm-add .ui-tag { font-size: 9.5px; padding: 2px 8px; border-radius: 6px; color: var(--ui-ink); }

.ui.is-mmp .mm-grow > .ui-empty { display: grid; align-content: center; height: 100%; min-height: 150px; }

.ui.is-mmp .mm-skillrun {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ui-ink-2);
}

.ui.is-mmp .mm-grow .w-after .mm-fine { display: block; margin-top: 8px; }

.ui.is-mmp .mm-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
  font-size: 10.5px;
  color: var(--ui-ink-3);
}

.ui.is-mmp .mm-tip > span:nth-child(2) { flex: 1; min-width: 0; }
.ui.is-mmp .mm-tip b { display: block; font-size: 11px; font-weight: 600; color: var(--ui-ink); }
.ui.is-mmp .mm-tip-ico { display: grid; place-items: center; color: var(--ui-ink); }
.ui.is-mmp .mm-tip-ico .i { width: 15px; height: 15px; }
.ui.is-mmp .mm-tip .ui-btn { background: var(--ui-bg); color: var(--ui-ink); }

/* --- 04 leaderboard ------------------------------------------------------- */

.ui.is-mmp .mm-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ui.is-mmp .mm-kpi {
  display: grid;
  gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
  min-width: 0;
}

.ui.is-mmp .mm-kpi b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ui-ink); }
.ui.is-mmp .mm-kpi small { font-size: 9.5px; color: var(--ui-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ui.is-mmp .mm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: -4px; }
.ui.is-mmp .mm-rank { color: var(--ui-ink-3); font-weight: 600; width: 18px; }

.ui.is-mmp .mm-bar { display: flex; align-items: center; gap: 9px; }
.ui.is-mmp .mm-bar .ui-track { width: 110px; height: 6px; }
.ui.is-mmp .mm-bar .ui-fill { background: #6366f1; transition: none; }

.ui.is-mmp .mm-lb tbody tr { transition: opacity .4s ease, background .4s ease; }
.ui.is-mmp .mm-lb:has(tr.is-on) tbody tr:not(.is-on) { opacity: .32; }
.ui.is-mmp .mm-lb tbody tr.is-on { background: color-mix(in srgb, #6366f1 5%, var(--ui-bg)); }

/* --- 05 comparison -------------------------------------------------------- */

.ui.is-mmp .mm-versus { gap: 12px; }
.ui.is-mmp .mm-versus .ui-vcard { display: flex; flex-direction: column; padding: 14px; }
.ui.is-mmp .mm-versus .mm-card-row { margin-bottom: 14px; }
.ui.is-mmp .mm-versus .ui-t { font-size: 13px; }
.ui.is-mmp .mm-k-gap { display: block; margin-bottom: 7px; }

.ui.is-mmp .mm-stats {
  margin-top: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--ui-line);
}

.ui.is-mmp .mm-versus .ui-vcard.is-hero .mm-stats { margin-top: 12px; }
.ui.is-mmp .mm-versus .ui-vcard.is-hero .mm-wide { margin-top: auto; }
.ui.is-mmp .mm-versus .ui-vcard.is-hero .mm-stats { margin-bottom: 12px; }

.ui.is-mmp .mm-versus .ui-stat {
  margin: 0 -8px;
  padding: 7px 8px;
  border-radius: 7px;
  align-items: center;
  transition: background .35s ease;
}

.ui.is-mmp .mm-versus .ui-stat.is-on { background: var(--ui-sunken); }
.ui.is-mmp .mm-versus .ui-vcard.is-hero .ui-stat.is-on { background: color-mix(in srgb, var(--ui-ok) 10%, var(--ui-bg)); }
.ui.is-mmp .mm-versus .ui-vcard.is-red .ui-stat.is-on { background: color-mix(in srgb, var(--ui-bad) 7%, var(--ui-bg)); }

/* --- 06 optimization lab -------------------------------------------------- */

.ui.is-mmp .mm-forecast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: linear-gradient(100deg, var(--ui-sunken) 0%, color-mix(in srgb, var(--ui-ok) 7%, var(--ui-bg)) 100%);
}

.ui.is-mmp .mm-forecast > div { display: grid; gap: 2px; }
.ui.is-mmp .mm-fc-row { display: flex; gap: 28px; margin-top: 8px; }
.ui.is-mmp .mm-fc { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; }
.ui.is-mmp .mm-fc small { grid-column: 1 / -1; font-size: 10px; color: var(--ui-ink-3); }
.ui.is-mmp .mm-fc b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: color-mix(in srgb, var(--ui-ok) 80%, var(--ui-ink)); }

.ui.is-mmp .mm-fc em {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  color: color-mix(in srgb, var(--ui-ok) 70%, var(--ui-ink));
  background: color-mix(in srgb, var(--ui-ok) 12%, var(--ui-bg));
  border: 1px solid color-mix(in srgb, var(--ui-ok) 30%, transparent);
  white-space: nowrap;
}

.ui.is-mmp .mm-fc-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--ui-ok);
  background: color-mix(in srgb, var(--ui-ok) 14%, var(--ui-bg));
  border: 1px solid color-mix(in srgb, var(--ui-ok) 35%, transparent);
}

.ui.is-mmp .mm-fc-badge .i { width: 22px; height: 22px; }

.ui.is-mmp .mm-step { align-items: center; margin-bottom: 0; }
.ui.is-mmp .mm-step .ui-st-t { font-size: 11.5px; }

.ui.is-mmp .mm-step-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ui-ink-2);
  background: var(--ui-sunken);
  transition: background .4s ease, color .4s ease;
}

.ui.is-mmp .mm-step[data-state="run"] .mm-step-n { background: var(--ui-accent); color: #fff; }
.ui.is-mmp .mm-step[data-state="done"] .mm-step-n { background: color-mix(in srgb, var(--ui-ok) 16%, var(--ui-bg)); color: var(--ui-ok); }

.ui.is-mmp .mm-result { margin-top: auto; padding-top: 2px; }

/* --- 07 artifacts and settings -------------------------------------------- */

.ui.is-mmp .mm-stack { display: grid; gap: 16px; }

.ui.is-mmp .mm-art,
.ui.is-mmp .mm-set {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
  min-width: 0;
}

.ui.is-mmp .mm-art + .mm-art { margin-top: -6px; }
.ui.is-mmp .mm-art > .grow,
.ui.is-mmp .mm-set > .grow { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ui.is-mmp .mm-art b,
.ui.is-mmp .mm-set b { font-size: 12px; font-weight: 600; color: var(--ui-ink); }
.ui.is-mmp .mm-set small { font-size: 10px; color: var(--ui-ink-3); }

.ui.is-mmp .mm-art-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--ui-ink);
  background: var(--ui-sunken);
}

.ui.is-mmp .mm-art-ico .i { width: 15px; height: 15px; }

.ui.is-mmp .mm-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 10px;
  color: var(--ui-ink-3);
}

.ui.is-mmp .mm-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ui.is-mmp .mm-art .ui-btn { background: var(--ui-bg); color: var(--ui-ink); }

.ui.is-mmp .mm-set-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ui.is-mmp .mm-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 22px;
}

.ui.is-mmp .mm-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--ui-ink-2);
}

.ui.is-mmp .mm-key .ui-kbd { font-size: 9px; padding: 2px 6px; }

/* ==========================================================================
   4. The design-system specimen
   ========================================================================== */

.ui.is-mmp .mm-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ui-ink);
  text-align: left;
}

.ui.is-mmp .mm-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  min-width: 0;
}

.ui.is-mmp .mm-tile.is-wide { grid-column: span 2; }

.ui.is-mmp .mm-tile-k { display: flex; align-items: center; gap: 7px; }

.ui.is-mmp .mm-tile-k b {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ui-solid-ink);
  background: var(--ui-solid);
}

.ui.is-mmp .mm-tile-body { flex: 1; display: grid; gap: 6px; align-content: center; min-width: 0; }
.ui.is-mmp .mm-tile-body.mm-nav { padding: 0; }
.ui.is-mmp .mm-tile-body .ui-row { margin: 0; }
.ui.is-mmp .mm-tile-d { font-size: 10.5px; color: var(--ui-ink-2); }

.ui.is-mmp .mm-badges { gap: 9px; }
.ui.is-mmp .mm-badge-set { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ui.is-mmp .mm-badge-set small { width: 52px; font-size: 9.5px; color: var(--ui-ink-3); }

.ui.is-mmp .mm-top.is-spec {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  overflow: hidden;
}

/* ==========================================================================
   5. Page pieces
   ========================================================================== */

/* The four words the product runs on. */
.mm-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing--12);
  max-width: var(--cs-wide);
  margin: var(--spacing--24) 0 var(--spacing--24);
}

.mm-terms > div {
  padding: var(--spacing--16) var(--spacing--20);
  border: 1px solid var(--_🎨-color--tokens---color-grade--light-16);
  border-radius: calc(var(--_🔘-radius---general--default) + 4px);
  background: var(--_🎨-color--tokens---color-grade--light-4);
}

.mm-terms dt {
  margin-bottom: 6px;
  font-family: var(--_🔠-typography---font-family--label-2);
  font-size: var(--_🔠-typography---size--label-2);
  letter-spacing: var(--_🔠-typography---letter-spacing--label-2);
  color: var(--cs-accent);
}

.mm-terms dd {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--_🎨-color--tokens---text-body--medium);
}

.cs-section p.mm-gallery-note { margin-top: calc(var(--spacing--8) * -1); }

/* ==========================================================================
   6. Small screens. The kit lets wide windows scroll sideways inside their
   canvas below 768px; here the sidebar folds away like the kit's rail, so
   the subject keeps the width.
   ========================================================================== */

@media screen and (max-width: 991px) {
  .mm-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui.is-mmp .mm-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
  .ui.is-mmp .mm-app { grid-template-columns: minmax(0, 1fr); }
  .ui.is-mmp .mm-side { display: none; }
  .ui.is-mmp .ui-scroll > .mm-app { min-width: 600px; }
  .ui.is-mmp .mm-main { padding: 14px; }
  .ui.is-mmp .mm-top { padding: 0 14px; }
  .ui.is-mmp .mm-hide-s { display: none; }
  .ui.is-mmp .ui-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui.is-mmp .mm-versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui.is-mmp .mm-spec { grid-template-columns: minmax(0, 1fr); }
  .ui.is-mmp .mm-tile.is-wide { grid-column: auto; }
  .ui.is-mmp .mm-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 479px) {
  .mm-terms { grid-template-columns: minmax(0, 1fr); }
  .ui.is-mmp .ui-scroll > .mm-app { min-width: 560px; }
}