/* MiddleLeap Product — component recipes, v2.0 · 17 Oct 2026.
   Load after tokens.css. Every colour, size, space and radius is a token from tokens.json,
   and every token value equals middleleap-brand v1.7.0 (checked by the brand skill's
   scripts/check-product-ds.mjs). No hex values in this file.
   Motion is not a token family in this format, so the three durations and two curves live
   here, with the brand's values. The ember gradient is built from ember tokens below.
   Bar segments are .mlp-bar-* (.mlp-seg-* kept as aliases for older screens; .mlp-seg is the segmented control).
   Prefixes: ml- = controls and primitives shared with the brand (buttons, fields, checkbox,
   toggle, chip, select, combobox, date picker); mlp- = product patterns (shell, cards,
   answers, status, data, record). A new form control is ml-; a new pattern is mlp-.
   Spacing is on the 4px scale; the only half steps are 2px segment gaps and 2px chip padding.
   Anything you act on is at least 44px (--hit). */

:root {
  --dur-fast: .12s; --dur-base: .2s; --dur-leap: .4s;
  --ease-leap: cubic-bezier(.34, 1.3, .4, 1);
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ember-grad: linear-gradient(135deg, var(--ember-400) 0%, var(--ember-600) 100%); /* the mark and the word "Leap" only */
  --hit: 44px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur-base: .01ms; --dur-leap: .01ms; }
}

/* One visible ring, on everything focusable */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ml-check:focus-visible + .ml-check-box, .ml-toggle:focus-visible + .ml-toggle-track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* =====================================================================
   BRAND FOUNDATION
   ===================================================================== */

.ml-eyebrow { font: 400 var(--fs-ui)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--bone-3); }
.ml-label { font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); }
.ml-display { font: 400 var(--fs-hero)/var(--lh-tight) var(--font-display); color: var(--bone-0); letter-spacing: -.01em; }
.ml-display em, .mlp-title em { font-style: italic; color: var(--ember-text); }
.ml-h2 { font: 400 var(--fs-h2)/var(--lh-head) var(--font-display); color: var(--bone-0); }
.ml-body { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); color: var(--bone-1); }
.ml-caption { font: 400 var(--fs-caption)/var(--lh-ui) var(--font-body); color: var(--bone-3); }
.ml-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Button */
.ml-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  box-sizing: border-box; min-height: 44px; padding: 0 var(--s-4);
  font: 500 var(--fs-ui)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid transparent; border-radius: var(--r-ui);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.ml-btn[disabled] { cursor: not-allowed; opacity: .45; }
.ml-btn--primary { background: var(--ember-500); color: var(--on-ember); }
.ml-btn--primary:hover:not([disabled]) { background: var(--accent-fill-hover); }
.ml-btn--primary:active:not([disabled]) { background: var(--accent-fill); box-shadow: inset 0 0 0 2px var(--on-accent); }
.ml-btn--secondary { background: transparent; color: var(--text-body); border-color: var(--border-control); }   /* same recipe as middleleap-brand */
.ml-btn--secondary:hover:not([disabled]) { background: var(--surface-hover); color: var(--text-strong); }
.ml-btn--secondary:active:not([disabled]) { box-shadow: inset 0 0 0 1px var(--border-control); }
.ml-btn--ghost { background: transparent; color: var(--bone-2); padding-inline: var(--s-2); }
.ml-btn--ghost:hover:not([disabled]) { color: var(--ember-text); }
.ml-btn--danger { background: var(--danger-btn-bg); color: var(--on-danger); }
.ml-btn--danger:hover:not([disabled]) { background: var(--danger-btn-hover); }
.ml-btn--danger:active:not([disabled]) { box-shadow: inset 0 0 0 2px var(--on-danger); }
.ml-btn svg { width: 14px; height: 14px; flex: none; }

/* Text link */
.mlp-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--fs-small-ui)/1.2 var(--font-body); color: var(--ember-text); text-decoration: none; }
.mlp-link:hover { color: var(--ember-hover); text-decoration: underline; }

/* Brand chip (mono): identifiers and labels, not status */
.ml-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); font: 400 var(--fs-ui-small)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--r-chip); border: 1px solid transparent; }
.ml-chip--neutral { background: var(--surface-tile); color: var(--text-secondary); }
.ml-chip--outline { background: transparent; color: var(--bone-0); border-color: var(--bone-0); }
.ml-chip--ember { background: var(--accent-wash); color: var(--accent-text-hover); }
.ml-chip--inverse { background: var(--inverse-bg); color: var(--inverse-text); }
.ml-chip--dashed { background: transparent; color: var(--bone-2); border: 1px dashed var(--field-border); }

.ml-dot { display: inline-block; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); flex: none; }

/* Field */
.ml-field { display: flex; flex-direction: column; gap: var(--s-2); }
.ml-field-label { font: 600 var(--fs-small-ui)/1.3 var(--font-body); color: var(--bone-0); }
.ml-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); background: var(--surface-field); color: var(--text-body); font: 400 var(--fs-body)/1.4 var(--font-body); border: 1px solid var(--border-control); border-radius: var(--r-ui); transition: border-color var(--dur-base) var(--ease-out); }
.ml-input::placeholder { color: var(--text-placeholder); opacity: 1; }
.ml-input[aria-invalid="true"] { border-color: var(--critical); }
.ml-error { font: 400 var(--fs-caption)/var(--lh-ui) var(--font-body); color: var(--critical-text); }
.mlp-search { display: flex; align-items: center; gap: var(--s-2); box-sizing: border-box; height: var(--hit); padding: 0 var(--s-3); border: 1px solid var(--field-border); border-radius: var(--r-ui); background: var(--ink-0); color: var(--bone-3); }
.mlp-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 var(--fs-small)/1 var(--font-body); color: var(--bone-0); outline: none; }
.mlp-search input::placeholder { color: var(--bone-3); opacity: 1; }
.mlp-search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Pivot glyphs: the only rounded shapes */
.ml-check { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.ml-check-box { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; background: var(--ink-0); border: 1px solid var(--field-border); border-radius: var(--r-mark); transition: transform var(--dur-leap) var(--ease-leap), background var(--dur-base) var(--ease-out); }
.ml-check-box svg { stroke: transparent; }
.ml-check:checked + .ml-check-box { background: var(--ember-500); border-color: var(--ember-500); transform: rotate(45deg); }
.ml-check:checked + .ml-check-box svg { transform: rotate(-45deg); stroke: var(--on-ember); }
.ml-toggle { position: absolute; opacity: 0; width: 48px; height: 24px; margin: 0; }
.ml-toggle-track { display: inline-flex; align-items: center; box-sizing: border-box; width: 48px; height: 24px; padding: 4px; background: var(--ink-3); border: 1px solid var(--field-border); border-radius: var(--r-ui); transition: background var(--dur-base) var(--ease-out); }
.ml-toggle-thumb { width: 14px; height: 14px; background: var(--bone-2); border-radius: var(--r-mark); transition: transform var(--dur-leap) var(--ease-leap), background var(--dur-base) var(--ease-out); }
.ml-toggle:checked + .ml-toggle-track { background: var(--ember-dim); border-color: var(--ember-500); }
.ml-toggle:checked + .ml-toggle-track .ml-toggle-thumb { background: var(--ember-500); transform: translateX(24px) rotate(45deg); }
.ml-loader { width: 20px; height: 20px; background: var(--ember-500); border-radius: var(--r-mark); animation: ml-pivot 1.2s var(--ease-leap) infinite; }
@keyframes ml-pivot { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .ml-loader { animation: none; transform: rotate(45deg); } }

/* =====================================================================
   PRODUCT LAYER
   ===================================================================== */

.mlp-app { display: flex; align-items: stretch; min-height: 100%; background: var(--app-canvas); color: var(--bone-1); font: 400 var(--fs-small)/var(--lh-ui) var(--font-body); }
.mlp-main { flex: 1 1 auto; min-width: 0; }

/* Navigation rail: Ink on both surfaces, folds to icons with tooltips */
.mlp-rail { flex: none; box-sizing: border-box; width: 232px; padding: var(--s-4) var(--s-3); background: var(--rail-bg); display: flex; flex-direction: column; gap: var(--s-1); transition: width var(--dur-base) var(--ease-out); }
.mlp-rail[data-folded="true"] { width: var(--s-8); padding: var(--s-4) calc((var(--s-8) - 44px) / 2); }
.mlp-rail-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.mlp-rail-logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-3); height: 44px; padding: 0 var(--s-1); color: var(--rail-mark); text-decoration: none; overflow: hidden; white-space: nowrap; }
.mlp-rail-logo span { font: 400 var(--fs-h3)/1 var(--font-display); color: var(--rail-text-active); }
.mlp-rail-heading { padding: var(--s-4) var(--s-3) var(--s-1); font: 400 var(--fs-ui-small)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--rail-heading); }
.mlp-rail-divider { display: none; width: 24px; height: 1px; margin: var(--s-2) auto; background: var(--rail-divider); }
.mlp-rail-item { position: relative; display: flex; align-items: center; gap: var(--s-3); box-sizing: border-box; width: 100%; height: 44px; padding: 0 var(--s-3); color: var(--rail-text); font: 500 var(--fs-small)/1 var(--font-body); text-decoration: none; white-space: nowrap; overflow: hidden; background: transparent; border: 0; border-radius: var(--r-ui); cursor: pointer; }
.mlp-rail-item svg { width: 20px; height: 20px; flex: none; }
.mlp-rail-item:hover, .mlp-rail-item[aria-current="page"] { background: var(--rail-item-active); color: var(--rail-text-active); }
.mlp-rail-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--s-3); width: 3px; height: 20px; background: var(--ember-500); }
.mlp-rail-item .mlp-count { margin-left: auto; }
.mlp-rail-toggle { flex: none; width: 44px; justify-content: center; padding: 0; color: var(--rail-text); border: 1px solid var(--rail-divider); }
.mlp-rail[data-folded="true"] .mlp-rail-top { flex-direction: column; gap: var(--s-1); }
.mlp-rail[data-folded="true"] .mlp-rail-label, .mlp-rail[data-folded="true"] .mlp-rail-heading, .mlp-rail[data-folded="true"] .mlp-rail-logo span { display: none; }
.mlp-rail[data-folded="true"] .mlp-rail-divider { display: block; }
.mlp-rail[data-folded="true"] .mlp-rail-item, .mlp-rail[data-folded="true"] .mlp-rail-logo { justify-content: center; padding: 0; overflow: visible; }
.mlp-rail[data-folded="true"] .mlp-count { position: absolute; top: var(--s-1); right: 2px; margin: 0; }
.mlp-rail[data-folded="true"] .mlp-rail-item[data-label]:hover::after,
.mlp-rail[data-folded="true"] .mlp-rail-item[data-label]:focus-visible::after {
  content: attr(data-label); position: absolute; left: calc(100% + var(--s-3)); top: 50%; transform: translateY(-50%); z-index: 10;
  padding: var(--s-1) var(--s-2); background: var(--rail-item-active); color: var(--rail-text-active); border: 1px solid var(--rail-divider);
  font: 500 var(--fs-small-ui)/1.4 var(--font-body); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-1);
}

/* Narrow screens: the rail folds itself below 900px; below 600px it gives way to bottom tabs */
.mlp-tabbar.mlp-tabbar--auto { display: none; }
@media (max-width: 900px) {
  .mlp-rail { width: var(--s-8); padding: var(--s-4) calc((var(--s-8) - 44px) / 2); }
  .mlp-rail .mlp-rail-label, .mlp-rail .mlp-rail-heading, .mlp-rail .mlp-rail-logo span, .mlp-rail .mlp-rail-toggle { display: none; }
  .mlp-rail .mlp-rail-divider { display: block; }
  .mlp-rail .mlp-rail-top { flex-direction: column; }
  .mlp-rail .mlp-rail-item, .mlp-rail .mlp-rail-logo { justify-content: center; padding: 0; overflow: visible; }
  .mlp-rail .mlp-count { position: absolute; top: var(--s-1); right: 2px; margin: 0; }
  .mlp-rail .mlp-rail-item[data-label]:hover::after, .mlp-rail .mlp-rail-item[data-label]:focus-visible::after {
    content: attr(data-label); position: absolute; left: calc(100% + var(--s-3)); top: 50%; transform: translateY(-50%); z-index: 10;
    padding: var(--s-1) var(--s-2); background: var(--rail-item-active); color: var(--rail-text-active); border: 1px solid var(--rail-divider);
    font: 500 var(--fs-small-ui)/1.4 var(--font-body); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-1);
  }
}
@media (max-width: 600px) {
  .mlp-rail { display: none; }
  .mlp-tabbar.mlp-tabbar--auto { display: grid; position: sticky; bottom: 0; z-index: 5; }
  .mlp-topbar .mlp-search, .mlp-topbar .mlp-path { display: none; }
}

.mlp-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 var(--s-1); background: var(--ember-500); color: var(--on-ember); font: 400 var(--fs-ui-small)/1 var(--font-mono); border-radius: var(--r-chip); }

/* Environment strip: synthetic data is labelled at the top, not in a footer */
.mlp-env { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-1) var(--s-4); background: var(--inverse-bg); color: var(--inverse-text); font: 400 var(--fs-ui-small)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.mlp-env::before { content: ""; width: 6px; height: 6px; background: var(--ember-500); transform: rotate(45deg); }

/* Top bar */
.mlp-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); min-height: 56px; padding: var(--s-2) var(--s-5); background: var(--app-canvas); border-bottom: 1px solid var(--app-card-border); }
.mlp-product { display: flex; align-items: baseline; gap: var(--s-2); }
.mlp-product-name { font: 400 var(--fs-h3)/1 var(--font-display); color: var(--bone-0); }
.mlp-product-by { font: 400 var(--fs-ui)/1 var(--font-body); color: var(--bone-3); }
.mlp-product-by b { font-weight: 600; color: var(--bone-0); }
.mlp-wordmark-leap { background: var(--ember-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mlp-path { font: 400 var(--fs-small)/1.3 var(--font-body); color: var(--bone-2); }
.mlp-path strong { font-weight: 600; color: var(--bone-0); }
.mlp-avatar { width: var(--hit); height: var(--hit); display: inline-flex; align-items: center; justify-content: center; background: var(--raised-bg); color: var(--raised-text); border: 0; border-radius: var(--r-ui); font: 400 var(--fs-ui)/1 var(--font-mono); cursor: pointer; }

/* Page header */
.mlp-title { margin: 0; font: 400 var(--fs-h1)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--bone-0); }
.mlp-meta { font: 400 var(--fs-small-ui)/1.4 var(--font-body); color: var(--bone-3); }

/* Tabs: page sections as links */
.mlp-tabs { display: flex; gap: var(--s-6); overflow-x: auto; border-bottom: 1px solid var(--app-card-border); }
.mlp-tab { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 2px; border-bottom: 2px solid transparent; color: var(--bone-2); font: 500 var(--fs-small)/1 var(--font-body); text-decoration: none; white-space: nowrap; }
.mlp-tab:hover { color: var(--bone-0); }
.mlp-tab[aria-current="page"], .mlp-tab[aria-selected="true"] { color: var(--bone-0); font-weight: 600; border-bottom-color: var(--ember-600); }
.mlp-tab-count { font: 400 var(--fs-ui-small)/1 var(--font-mono); color: var(--bone-3); }

/* Card */
.mlp-card { background: var(--app-card); border: 1px solid var(--app-card-border); border-radius: var(--r-ui); padding: var(--s-5); }
.mlp-card-title { margin: 0; font: 600 var(--fs-card-title)/1.3 var(--font-body); color: var(--bone-0); }
.mlp-card-sub { font: 400 var(--fs-small-ui)/1.45 var(--font-body); color: var(--bone-3); }
.mlp-note { padding: var(--s-3); background: var(--app-tile); font: 400 var(--fs-small-ui)/1.5 var(--font-body); color: var(--bone-2); }

/* Banner: a notice inside the page */
.mlp-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-ui); font: 400 var(--fs-small)/1.5 var(--font-body); color: var(--bone-0); }
.mlp-banner svg { width: 16px; height: 16px; flex: none; }
.mlp-banner b { font-weight: 600; }
.mlp-banner .mlp-link { margin-left: auto; min-height: var(--hit); display: inline-flex; align-items: center; }
.mlp-banner--info { background: var(--info-dim); } .mlp-banner--info svg { color: var(--info-text); }
.mlp-banner--caution { background: var(--caution-dim); } .mlp-banner--caution svg { color: var(--caution-text); }
.mlp-banner--critical { background: var(--critical-dim); } .mlp-banner--critical svg { color: var(--critical-text); }

/* Empty state: terse and factual */
.mlp-empty { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5); border: 1px dashed var(--field-border); border-radius: var(--r-ui); }
.mlp-empty-title { font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--bone-0); }
.mlp-empty-fact { font: 400 var(--fs-small-ui)/1.45 var(--font-body); color: var(--bone-3); }

/* Answer card + stat tiles */
.mlp-verdict { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font: 400 var(--fs-verdict)/1.5 var(--font-body); color: var(--bone-0); }
.mlp-verdict strong { font-weight: 700; }
.mlp-verdict::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: var(--s-2); background: var(--ember-600); transform: rotate(45deg); }
.mlp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }
.mlp-tile { display: flex; flex-direction: column; gap: var(--s-1); box-sizing: border-box; padding: var(--s-4); background: var(--app-tile); border: 1px solid transparent; border-radius: var(--r-ui); }
.mlp-tile-value { font: 700 var(--fs-stat)/1.1 var(--font-body); color: var(--bone-0); }
.mlp-tile-value small { font-size: var(--fs-small); font-weight: 500; }
.mlp-tile-label { font: 600 var(--fs-small-ui)/1.3 var(--font-body); color: var(--bone-2); }
.mlp-tile--positive { background: var(--positive-dim); } .mlp-tile--positive * { color: var(--positive-text); }
.mlp-tile--caution { background: var(--caution-dim); } .mlp-tile--caution * { color: var(--caution-text); }
.mlp-tile--critical { background: var(--critical-dim); } .mlp-tile--critical * { color: var(--critical-text); }
.mlp-tile--owed { border: 1px dashed var(--field-border); }
.mlp-tile--inverse { background: var(--inverse-bg); } .mlp-tile--inverse .mlp-tile-value { color: var(--ember-on-inverse); } .mlp-tile--inverse .mlp-tile-label { color: var(--inverse-text); }

/* Status chip (product): words and an icon on a tint; never colour alone */
.mlp-status { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-chip); font: 600 var(--fs-ui)/1.4 var(--font-body); white-space: nowrap; }
.mlp-status svg { width: 12px; height: 12px; flex: none; }
.mlp-status--positive { background: var(--positive-dim); color: var(--positive-text); }
.mlp-status--caution { background: var(--caution-dim); color: var(--caution-text); }
.mlp-status--critical { background: var(--critical-dim); color: var(--critical-text); }
.mlp-status--info { background: var(--info-dim); color: var(--info-text); }
.mlp-status--neutral { background: var(--app-tile); color: var(--bone-2); }

/* Provenance tag: where a fact came from (record · executed check · derived · telemetry) */
.mlp-prov { display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-2); background: var(--app-card); border: 1px solid var(--app-card-border); border-radius: var(--r-chip); font: 400 var(--fs-ui-small)/1.4 var(--font-mono); color: var(--bone-2); cursor: pointer; text-align: left; }
.mlp-prov:hover { border-color: var(--field-border); color: var(--bone-0); }
.mlp-prov b { font-weight: 500; color: var(--bone-0); text-transform: uppercase; letter-spacing: .06em; }
.mlp-prov::before { content: ""; box-sizing: border-box; width: 8px; height: 8px; flex: none; }
.mlp-prov--record::before { background: var(--bone-0); }
.mlp-prov--check::before { background: var(--ember-600); transform: rotate(45deg) scale(.86); }
.mlp-prov--derived::before { border: 1px solid var(--bone-0); }
.mlp-prov--telemetry::before { border: 1px dashed var(--bone-2); }

/* Action card ("Needs you") */
/* Ink emphasis card: the one dark panel on a page (critical path, boundaries). The border keeps it from sinking into the Ink canvas. */
.mlp-card--ink { padding: var(--s-5); background: var(--rail-bg); color: var(--rail-text-active); border: 1px solid var(--app-card-border); border-radius: var(--r-ui); }
.mlp-card--ink .ml-label { color: var(--ember-300); }

.mlp-action { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--app-card); border: 1px solid var(--app-card-border); border-top: 3px solid var(--action-edge); border-radius: var(--r-ui); }
.mlp-action--lead { border-top-color: var(--ember-600); }
.mlp-action-kicker { font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); }
.mlp-action-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.mlp-action-title { margin: 0; font: 600 var(--fs-card-title)/1.3 var(--font-body); color: var(--bone-0); }
.mlp-action-body { margin: 0; font: 400 var(--fs-small)/var(--lh-ui) var(--font-body); color: var(--bone-2); }
.mlp-action-blocks { font: 400 var(--fs-small-ui)/1.4 var(--font-body); color: var(--bone-1); }
.mlp-action-blocks b { font-weight: 600; }
.mlp-action .ml-btn { align-self: flex-start; margin-top: auto; }

/* Segmented role switch: the pressed segment is outlined, not just tinted */
.mlp-seg { display: inline-flex; gap: var(--s-1); padding: var(--s-1); background: var(--app-tile); border-radius: var(--r-ui); }
.mlp-seg button { min-height: var(--hit); padding: 0 var(--s-4); border: 0; border-radius: var(--r-ui); background: transparent; color: var(--bone-2); font: 600 var(--fs-small-ui)/1 var(--font-body); cursor: pointer; }
.mlp-seg button:hover { color: var(--bone-0); }
.mlp-seg button[aria-pressed="true"] { background: var(--app-card); color: var(--bone-0); box-shadow: inset 0 0 0 1px var(--bone-0); }

/* Phase track: square done, diamond now, outline ahead */
.mlp-phases { display: flex; align-items: center; }
.mlp-phase { flex: none; box-sizing: border-box; width: 12px; height: 12px; }
.mlp-phase--done { background: var(--data-context-1); }
.mlp-phase--now { width: 13px; height: 13px; background: var(--ember-600); transform: rotate(45deg); }
.mlp-phase--ahead { width: 11px; height: 11px; border: 1px solid var(--data-context-3); }
.mlp-phase-line { flex: 1; height: 2px; background: var(--data-context-1); }
.mlp-phase-line--ahead { height: 1px; background: var(--data-track); }
/* Four phases: dots sit at 0, 1/3, 2/3 and 1 of the track, so the label columns are 1:2:2:1 and the middle two centre on their dots */
.mlp-phase-labels { display: grid; grid-template-columns: 1fr 2fr 2fr 1fr; gap: var(--s-2); margin-top: var(--s-2); font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bone-3); }
.mlp-phase-labels span:nth-child(2), .mlp-phase-labels span:nth-child(3) { text-align: center; }
.mlp-phase-labels span:last-child { text-align: right; }
/* Phase columns: when each phase has a column of text under it, every column starts with its own dot and line, so the dot always sits over its text */
.mlp-phase-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-5); }
@media (max-width: 600px) { .mlp-phase-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mlp-phase-cols > div { display: flex; flex-direction: column; gap: var(--s-2); padding-right: var(--s-4); }
.mlp-phase-cols .mlp-phases { margin-bottom: var(--s-2); margin-right: calc(-1 * var(--s-4)); }
.mlp-phase-labels .is-now { color: var(--ember-text); font-weight: 500; }

/* Data bar: two dark segments (solid, cross-hatched), two light (outlined, hatched), 2px gaps */
.mlp-bar { display: flex; gap: 2px; height: 12px; }
.mlp-bar > span, .mlp-legend i { display: block; box-sizing: border-box; }
.mlp-bar-focus, .mlp-seg-focus { background: var(--data-focus); }
.mlp-bar-context, .mlp-seg-context { background: var(--data-context-2); }
.mlp-bar-done, .mlp-seg-done { background: var(--data-done); }
.mlp-bar-wait, .mlp-seg-wait { background: var(--data-wait); box-shadow: inset 0 0 0 1px var(--data-wait-edge); }
.mlp-bar-back, .mlp-seg-back { background-color: var(--data-back); background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--app-card) 3px 4px), repeating-linear-gradient(-45deg, transparent 0 3px, var(--app-card) 3px 4px); }
.mlp-bar-owed, .mlp-seg-owed { background: repeating-linear-gradient(45deg, var(--data-context-2) 0 2px, var(--app-tile) 2px 5px); box-shadow: inset 0 0 0 1px var(--data-context-2); }
.mlp-bar-later, .mlp-seg-later { background: transparent; box-shadow: inset 0 0 0 1px var(--data-context-2); }
.mlp-bar-track, .mlp-seg-track { background: var(--data-track); }
.mlp-bar-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-2); font: 400 var(--fs-small-ui)/1.3 var(--font-body); color: var(--bone-1); }
.mlp-bar-head b { font-weight: 600; color: var(--bone-0); }
.mlp-bar-head span:last-child { font: 400 var(--fs-ui)/1.3 var(--font-mono); color: var(--bone-2); white-space: nowrap; }
.mlp-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font: 400 var(--fs-ui)/1.3 var(--font-body); color: var(--bone-2); }
.mlp-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.mlp-legend i { width: 16px; height: 12px; }

/* Rows: a whole row is the link */
.mlp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding: var(--s-3) var(--s-2); margin: 0 calc(-1 * var(--s-2)); border-top: 1px solid var(--app-card-border); color: inherit; text-decoration: none; }
a.mlp-row:hover { background: var(--surface-hover); }

/* Table */
.mlp-table-wrap { overflow-x: auto; }
.mlp-table { width: 100%; border-collapse: collapse; font: 400 var(--fs-small)/1.4 var(--font-body); color: var(--bone-1); }
.mlp-table caption { text-align: left; padding-bottom: var(--s-2); font: 600 var(--fs-card-title)/1.3 var(--font-body); color: var(--bone-0); }
.mlp-table th { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-top: 1px solid var(--bone-0); border-bottom: 1px solid var(--app-card-border); font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); white-space: nowrap; }
.mlp-table td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--app-card-border); vertical-align: top; }
.mlp-table td:first-child { color: var(--bone-0); font-weight: 600; }
.mlp-table .num { white-space: nowrap; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mlp-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-1); }
.mlp-table th[aria-sort] { color: var(--bone-0); }

/* The record: people and the agent, told apart */
.mlp-record { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--app-card-border); }
.mlp-record:last-child { border-bottom: 0; }
.mlp-actor { flex: none; height: fit-content; padding: 2px var(--s-2); border-radius: var(--r-chip); font: 400 var(--fs-ui-small)/1.4 var(--font-mono); letter-spacing: .06em; }
.mlp-actor--person { background: var(--inverse-bg); color: var(--inverse-text); }
.mlp-actor--machine { border: 1px solid var(--ember-600); color: var(--ember-text); }
.mlp-record-what { font: 400 var(--fs-small)/1.4 var(--font-body); color: var(--bone-0); }
.mlp-record-when { font: 400 var(--fs-ui)/1.4 var(--font-body); color: var(--bone-3); }

/* Sourced answer (assistant) */
.mlp-ask { align-self: flex-end; max-width: 80%; padding: var(--s-3) var(--s-4); background: var(--raised-bg); color: var(--raised-text); font: 400 var(--fs-small)/1.45 var(--font-body); }
/* Suggested questions: separate chips that wrap freely, not a segmented switch */
.mlp-suggest { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mlp-suggest button { min-height: var(--hit); padding: 0 var(--s-3); background: var(--app-card); color: var(--bone-1); border: 1px solid var(--app-card-border); border-radius: var(--r-ui); font: 400 var(--fs-small-ui)/1.3 var(--font-body); text-align: left; cursor: pointer; }
.mlp-suggest button:hover { border-color: var(--field-border); color: var(--bone-0); }
.mlp-suggest button[aria-pressed="true"] { border-color: var(--bone-0); color: var(--bone-0); font-weight: 600; }
.mlp-answer { display: flex; flex-direction: column; gap: var(--s-3); max-width: 92%; padding: var(--s-4) var(--s-5); background: var(--app-card); border: 1px solid var(--app-card-border); font: 400 var(--fs-small)/var(--lh-ui) var(--font-body); color: var(--bone-1); }
.mlp-claim { display: flex; flex-direction: column; gap: var(--s-2); padding-left: var(--s-3); border-left: 3px solid var(--bone-3); }
.mlp-claim--critical { border-left-color: var(--critical-text); }
.mlp-claim--caution { border-left-color: var(--caution-text); }
.mlp-cite { font: 400 var(--fs-ui-small)/1 var(--font-mono); color: var(--ember-text); }
.mlp-sources { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mlp-source { padding: 2px var(--s-2); border-radius: var(--r-chip); background: var(--app-tile); font: 400 var(--fs-ui-small)/1.5 var(--font-mono); color: var(--bone-1); }
.mlp-source--owed { background: var(--critical-dim); color: var(--critical-text); }
.mlp-boundary { font: 400 var(--fs-caption)/var(--lh-ui) var(--font-body); color: var(--bone-3); }

/* Dialog: confirm before anything hard to undo */
.mlp-scrim { display: grid; place-items: center; padding: var(--s-5); background: var(--scrim); }
.mlp-dialog { box-sizing: border-box; width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--app-card); border: 1px solid var(--app-card-border); border-radius: var(--r-ui); box-shadow: var(--shadow-2); }
.mlp-dialog-title { margin: 0; font: 600 var(--fs-card-title)/1.3 var(--font-body); color: var(--bone-0); }
.mlp-dialog-body { margin: 0; font: 400 var(--fs-small)/var(--lh-ui) var(--font-body); color: var(--bone-1); }
.mlp-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }

/* Phone: bottom tabs and the one-at-a-time stepper */
.mlp-tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--s-1) var(--s-1) var(--s-5); background: var(--app-card); border-top: 1px solid var(--app-card-border); }
.mlp-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-height: 48px; padding: var(--s-2) 0; color: var(--bone-2); text-decoration: none; font: 400 var(--fs-ui)/1 var(--font-body); }
.mlp-tabbar a svg { width: 22px; height: 22px; }
.mlp-tabbar a[aria-current="page"] { color: var(--bone-0); font-weight: 600; }
.mlp-tabbar .mlp-count { position: absolute; top: var(--s-1); left: calc(50% + 6px); }
.mlp-stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.mlp-stepper button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 48px; height: 48px; padding: 0 var(--s-3); background: transparent; color: var(--bone-0); border: 1px solid var(--bone-0); border-radius: var(--r-ui); font: 500 var(--fs-ui)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.mlp-stepper button[disabled] { color: var(--bone-4); border-color: var(--app-card-border); cursor: default; }
.mlp-stepper-dots { display: flex; gap: var(--s-2); }
.mlp-stepper-dots span { width: 24px; height: 4px; background: var(--data-track); }
.mlp-stepper-dots span[aria-current="step"] { background: var(--ember-600); }

/* =====================================================================
   v1.8 ADDITIONS — after the Loom Estate review (16 Oct 2026)
   ===================================================================== */

/* Rail without a script: a checkbox just before the rail folds it (design canvases, static pages).
   <input class="mlp-rail-fold" id="fold" type="checkbox" aria-label="Fold menu"> <nav class="mlp-rail">… <label class="mlp-rail-item mlp-rail-toggle" for="fold">… */
.mlp-rail-fold { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.mlp-rail-fold:checked + .mlp-rail { width: var(--s-8); padding: var(--s-4) calc((var(--s-8) - 44px) / 2); }
.mlp-rail-fold:checked + .mlp-rail .mlp-rail-top { flex-direction: column; gap: var(--s-1); }
.mlp-rail-fold:checked + .mlp-rail .mlp-rail-label, .mlp-rail-fold:checked + .mlp-rail .mlp-rail-heading, .mlp-rail-fold:checked + .mlp-rail .mlp-rail-logo span { display: none; }
.mlp-rail-fold:checked + .mlp-rail .mlp-rail-divider { display: block; }
.mlp-rail-fold:checked + .mlp-rail .mlp-rail-item, .mlp-rail-fold:checked + .mlp-rail .mlp-rail-logo { justify-content: center; padding: 0; overflow: visible; }
.mlp-rail-fold:checked + .mlp-rail .mlp-count { position: absolute; top: var(--s-1); right: 2px; margin: 0; }
.mlp-rail-fold:checked + .mlp-rail .mlp-rail-item[data-label]:hover::after,
.mlp-rail-fold:checked + .mlp-rail .mlp-rail-item[data-label]:focus-visible::after {
  content: attr(data-label); position: absolute; left: calc(100% + var(--s-3)); top: 50%; transform: translateY(-50%); z-index: 10;
  padding: var(--s-1) var(--s-2); background: var(--rail-item-active); color: var(--rail-text-active); border: 1px solid var(--rail-divider);
  font: 500 var(--fs-small-ui)/1.4 var(--font-body); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-1);
}
.mlp-rail-fold:focus-visible + .mlp-rail .mlp-rail-toggle { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
label.mlp-rail-toggle { display: inline-flex; align-items: center; }

/* Built on: the partner a product runs on, in words beside "by MiddleLeap" */
.mlp-product-on { padding-left: var(--s-2); border-left: 1px solid var(--app-card-border); font: 400 var(--fs-ui)/1 var(--font-body); color: var(--bone-3); }
.mlp-product-on b { font-weight: 600; color: var(--bone-0); }

/* Availability tag: is this data live from a partner, waiting on one, or mocked? Shape, then tint, then words */
.mlp-avail { display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-2); border: 1px solid transparent; border-radius: var(--r-chip); font: 400 var(--fs-ui-small)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.mlp-avail::before { content: ""; box-sizing: border-box; width: 8px; height: 8px; flex: none; }
.mlp-avail--live { background: var(--positive-dim); color: var(--positive-text); }
.mlp-avail--live::before { background: currentColor; }
.mlp-avail--needs { background: var(--caution-dim); color: var(--caution-text); }
.mlp-avail--needs::before { border: 1px solid currentColor; }
.mlp-avail--mocked { background: transparent; color: var(--bone-2); border-color: var(--field-border); border-style: dashed; }
.mlp-avail--mocked::before { border: 1px solid currentColor; background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 3px); }

/* Note (callout): an aside inside a card. Tile by default; outline on a tile; inverse for the one point a page must not miss */
.mlp-note-label { display: block; margin-bottom: var(--s-1); font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-2); }
.mlp-note b { font-weight: 600; color: var(--bone-0); }
.mlp-note p { margin: 0 0 var(--s-2); } .mlp-note p:last-child { margin-bottom: 0; }
.mlp-note--outline { background: transparent; border: 1px solid var(--app-card-border); }
.mlp-note--inverse { background: var(--inverse-bg); color: var(--inverse-text); }
.mlp-note--inverse b { color: var(--inverse-text); }
.mlp-note--inverse .mlp-note-label { color: var(--ember-on-inverse); }
.mlp-note-sign { display: block; margin-top: var(--s-3); font: 400 var(--fs-caption)/var(--lh-ui) var(--font-body); color: inherit; }
.mlp-note-sign b { font-weight: 600; }

/* Code block: commands, payloads and config. Ink on both surfaces, like the rail */
.mlp-code { margin: 0; background: var(--rail-bg); color: var(--rail-text-active); border: 1px solid var(--app-card-border); border-radius: var(--r-ui); overflow: hidden; }
.mlp-code-head { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--rail-divider); font: 400 var(--fs-ui-small)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--rail-heading); }
.mlp-code pre { margin: 0; padding: var(--s-4); overflow-x: auto; font: 400 var(--fs-ui)/1.7 var(--font-mono); tab-size: 2; }
.mlp-code code { font: inherit; }
.mlp-code .c { color: var(--rail-heading); }
.mlp-code .s { color: var(--rail-text); }
.mlp-code .k { color: var(--rail-text-active); font-weight: 500; }
.mlp-code .hl { display: inline-block; min-width: 100%; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); background: var(--rail-item-active); box-shadow: inset 3px 0 0 var(--ember-500); }
code.mlp-inline-code { padding: 0 var(--s-1); background: var(--app-tile); color: var(--bone-0); font: 400 .92em/1 var(--font-mono); border-radius: var(--r-chip); }

/* Timeline: what happened and what comes next. The pivot carries state: square done, ember diamond now, outline ahead, hatched owed */
.mlp-timeline { list-style: none; margin: 0; padding: 0; }
.mlp-event { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding: 0 0 var(--s-5) var(--s-6); }
.mlp-event::before { content: ""; position: absolute; left: 0; top: 5px; box-sizing: border-box; width: 10px; height: 10px; background: var(--data-context-1); }
.mlp-event::after { content: ""; position: absolute; left: 4px; top: 21px; bottom: var(--s-1); width: 2px; background: var(--data-track); }
.mlp-event:last-child { padding-bottom: 0; } .mlp-event:last-child::after { display: none; }
.mlp-event--now::before { background: var(--ember-600); transform: rotate(45deg); }
.mlp-event--ahead::before { background: transparent; border: 1px solid var(--data-context-3); }
.mlp-event--owed::before { background: repeating-linear-gradient(45deg, var(--data-context-2) 0 1px, transparent 1px 3px); border: 1px solid var(--data-context-2); }
.mlp-event-when { font: 400 var(--fs-ui)/1.6 var(--font-mono); color: var(--bone-3); white-space: nowrap; }
.mlp-event-what { margin: 0; font: 600 var(--fs-small)/1.5 var(--font-body); color: var(--bone-0); }
.mlp-event-detail { margin: var(--s-1) 0 0; font: 400 var(--fs-small-ui)/1.45 var(--font-body); color: var(--bone-2); }
.mlp-event--now .mlp-event-when { color: var(--ember-text); }
@media (max-width: 600px) { .mlp-event { grid-template-columns: minmax(0, 1fr); } }

/* View switch: two to three views of the same thing, side by side, each with a one-line description */
.mlp-seg--lens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); box-sizing: border-box; width: 100%; }
.mlp-seg--lens button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-1); min-height: 56px; padding: var(--s-2) var(--s-4); text-align: left; line-height: 1.3; }
.mlp-seg--lens button span { font: 400 var(--fs-caption)/1.35 var(--font-body); color: var(--bone-2); }
@media (max-width: 600px) { .mlp-seg--lens { grid-auto-flow: row; } }

/* System grid: the estate as selectable tiles, grouped by what they serve; dependencies of the selected one */
.mlp-systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.mlp-systems-group { grid-column: 1 / -1; margin-top: var(--s-2); font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); }
.mlp-systems-group:first-child { margin-top: 0; }
.mlp-sys { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); box-sizing: border-box; min-height: 112px; padding: var(--s-4); background: var(--app-card); color: inherit; border: 1px solid var(--app-card-border); border-radius: var(--r-ui); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out); }
.mlp-sys:hover { border-color: var(--field-border); }
.mlp-sys[aria-pressed="true"] { border-color: var(--bone-0); box-shadow: inset 0 0 0 1px var(--bone-0); }
.mlp-sys--unknown { border-style: dashed; border-color: var(--field-border); }
.mlp-sys-name { font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--bone-0); }
.mlp-sys-meta { font: 400 var(--fs-caption)/1.4 var(--font-body); color: var(--bone-3); }
.mlp-sys > :last-child:not(:first-child) { margin-top: auto; }
.mlp-deps { display: flex; flex-direction: column; }
.mlp-dep { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--app-card-border); font: 400 var(--fs-small)/1.4 var(--font-body); color: var(--bone-1); }
.mlp-dep-dir { grid-column: 1 / -1; font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); }
.mlp-dep b { font-weight: 600; color: var(--bone-0); }

/* Comparison table: rows are the questions, columns the options; one column may be the focus */
.mlp-table--compare tbody th { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-top: 0; border-bottom: 1px solid var(--app-card-border); font: 600 var(--fs-small)/1.4 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--bone-0); white-space: normal; vertical-align: top; }
.mlp-table--compare td:first-child { color: inherit; font-weight: 400; }
.mlp-table--compare .is-focus { background: var(--app-tile); padding-left: var(--s-3); color: var(--bone-1); }
.mlp-table--compare thead .is-focus { color: var(--bone-0); border-top: 3px solid var(--bone-0); }

/* Option cards: a decision between two to four courses, each with what it costs */
.mlp-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3); }
.mlp-option { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); background: var(--app-card); border: 1px solid var(--app-card-border); border-radius: var(--r-ui); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out); }
.mlp-option > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mlp-option:hover { border-color: var(--field-border); }
.mlp-option:has(> input:checked) { border-color: var(--bone-0); box-shadow: inset 0 0 0 1px var(--bone-0); }
.mlp-option:has(> input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mlp-option-head { display: flex; align-items: center; gap: var(--s-2); }
.mlp-option-mark { box-sizing: border-box; width: 14px; height: 14px; flex: none; border: 1px solid var(--field-border); transition: transform var(--dur-leap) var(--ease-leap); }
.mlp-option:has(> input:checked) .mlp-option-mark { background: var(--bone-0); border-color: var(--bone-0); }
.mlp-option-kicker { font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); }
.mlp-option-head .ml-chip { margin-left: auto; }
.mlp-option-title { margin: 0; font: 600 var(--fs-card-title)/1.3 var(--font-body); color: var(--bone-0); }
.mlp-option-body { margin: 0; font: 400 var(--fs-small)/var(--lh-ui) var(--font-body); color: var(--bone-2); }
.mlp-option-facts { display: flex; flex-direction: column; gap: var(--s-1); margin: var(--s-1) 0 0; padding: 0; list-style: none; font: 400 var(--fs-small-ui)/1.45 var(--font-body); color: var(--bone-1); }
.mlp-option-facts li { display: flex; gap: var(--s-2); }
.mlp-option-facts li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; background: var(--bone-3); transform: rotate(45deg); }

/* Ranked list: an order to work in (patch order, triage). The number is the order; the reason says why */
.mlp-rank { list-style: none; margin: 0; padding: 0; counter-reset: mlp-rank; }
.mlp-rank > li { counter-increment: mlp-rank; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: start; padding: var(--s-3) 0; border-top: 1px solid var(--app-card-border); }
.mlp-rank > li::before { content: counter(mlp-rank); grid-row: span 2; display: inline-grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px; background: var(--app-tile); color: var(--bone-0); font: 500 var(--fs-ui)/1 var(--font-mono); }
.mlp-rank > li:first-child::before { background: var(--inverse-bg); color: var(--inverse-text); }
.mlp-rank > li.is-unranked { counter-increment: none; }
.mlp-rank > li.is-unranked::before { content: "?"; background: transparent; color: var(--bone-2); border: 1px dashed var(--field-border); }
.mlp-rank-title { font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--bone-0); }
.mlp-rank-why { grid-column: 2 / -1; font: 400 var(--fs-small-ui)/1.45 var(--font-body); color: var(--bone-2); }
.mlp-rank-due { font: 400 var(--fs-ui)/1.4 var(--font-mono); color: var(--bone-2); white-space: nowrap; text-align: right; }

/* Severity badge: four steps, told apart by how many bars are filled, then tint, then the word */
.mlp-sev { --sev-2: var(--data-track); --sev-3: var(--data-track); --sev-4: var(--data-track); display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-chip); font: 500 var(--fs-ui-small)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.mlp-sev::before { content: ""; flex: none; width: 3px; height: 9px; margin-right: 15px; background: currentColor; box-shadow: 5px 0 0 var(--sev-2), 10px 0 0 var(--sev-3), 15px 0 0 var(--sev-4); }
.mlp-sev--critical { --sev-2: currentColor; --sev-3: currentColor; --sev-4: currentColor; background: var(--critical-dim); color: var(--critical-text); }
.mlp-sev--high { --sev-2: currentColor; --sev-3: currentColor; background: var(--caution-dim); color: var(--caution-text); }
.mlp-sev--medium { --sev-2: currentColor; background: var(--app-tile); color: var(--bone-1); }
.mlp-sev--low { background: var(--app-tile); color: var(--bone-2); }

/* Conversation: turns between a person and the agent, each with who said it */
.mlp-convo { display: flex; flex-direction: column; gap: var(--s-4); }
.mlp-turn { display: flex; align-items: flex-start; gap: var(--s-3); }
.mlp-turn--person { flex-direction: row-reverse; }
.mlp-turn .mlp-ask { align-self: auto; max-width: min(560px, 80%); }
.mlp-turn .mlp-answer { max-width: min(720px, 88%); }
.mlp-turn-who { flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px; border-radius: var(--r-ui); font: 400 var(--fs-ui-small)/1 var(--font-mono); letter-spacing: .04em; }
.mlp-turn--agent .mlp-turn-who { border: 1px solid var(--ember-600); color: var(--ember-text); }
.mlp-turn--person .mlp-turn-who { background: var(--raised-bg); color: var(--raised-text); }

/* Select and date: native controls, dressed like ml-input */
.ml-select { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--s-2) var(--s-7) var(--s-2) var(--s-3); background-color: var(--ink-0); background-image: linear-gradient(45deg, transparent 50%, var(--bone-2) 50%), linear-gradient(135deg, var(--bone-2) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; color: var(--text-body); font: 400 var(--fs-body)/1.4 var(--font-body); border: 1px solid var(--border-control); border-radius: var(--r-ui); cursor: pointer; }
.ml-select[aria-invalid="true"] { border-color: var(--critical); }
.ml-input[type="date"] { font-family: var(--font-mono); font-size: var(--fs-ui); }
.ml-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
[data-theme="dark"] .ml-input, [data-theme="dark"] .ml-select { color-scheme: dark; }

/* Tooltip: a short fact on hover and focus; never the only place something is said */
.mlp-tip { position: relative; display: inline-flex; }
.mlp-tip-text { position: absolute; bottom: calc(100% + var(--s-2)); left: 50%; z-index: 20; transform: translateX(-50%); box-sizing: border-box; width: max-content; max-width: 260px; padding: var(--s-1) var(--s-2); background: var(--inverse-bg); color: var(--inverse-text); border-radius: var(--r-ui); box-shadow: var(--shadow-1); font: 400 var(--fs-small-ui)/1.4 var(--font-body); text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }
.mlp-tip:hover .mlp-tip-text, .mlp-tip:focus-within .mlp-tip-text { opacity: 1; visibility: visible; }
.mlp-tip[data-dismissed] .mlp-tip-text { opacity: 0; visibility: hidden; }
.mlp-tip--below .mlp-tip-text { top: calc(100% + var(--s-2)); bottom: auto; }

/* Toast: confirms something the person just did. Never an error, never a request */
.mlp-toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 50; display: flex; flex-direction: column; gap: var(--s-2); width: min(400px, calc(100vw - 2 * var(--s-4))); }
.mlp-toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); background: var(--inverse-bg); color: var(--inverse-text); border-radius: var(--r-ui); box-shadow: var(--shadow-1); font: 400 var(--fs-small)/1.45 var(--font-body); }
.mlp-toast svg { width: 16px; height: 16px; flex: none; }
.mlp-toast b { font-weight: 600; }
.mlp-toast-text { flex: 1 1 auto; min-width: 0; padding: var(--s-1) 0; }
.mlp-toast-act { flex: none; min-height: 44px; padding: 0 var(--s-3); background: transparent; color: var(--ember-on-inverse); border: 0; border-radius: var(--r-ui); font: 500 var(--fs-ui)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.mlp-toast-act:hover { text-decoration: underline; }
@media (max-width: 600px) { .mlp-toasts { right: var(--s-4); left: var(--s-4); bottom: calc(var(--s-4) + 72px); width: auto; } }

/* =====================================================================
   v1.9 ADDITIONS — the three pieces v1.8 left undesigned
   ===================================================================== */

/* Combobox: a text input that filters a list (WAI-ARIA combobox with listbox popup) */
.ml-combo { position: relative; }
.ml-combo .ml-input { padding-right: var(--s-7); background-image: linear-gradient(45deg, transparent 50%, var(--bone-2) 50%), linear-gradient(135deg, var(--bone-2) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.ml-combo-list { position: absolute; left: 0; right: 0; top: calc(100% + var(--s-1)); z-index: 30; box-sizing: border-box; max-height: 288px; overflow-y: auto; margin: 0; padding: var(--s-1) 0; list-style: none; background: var(--app-card); border: 1px solid var(--field-border); border-radius: var(--r-ui); box-shadow: var(--shadow-1); }
.ml-combo-list[hidden] { display: none; }
.ml-combo-group { padding: var(--s-2) var(--s-3) var(--s-1); font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); }
.ml-combo-opt { display: flex; align-items: center; gap: var(--s-2); min-height: var(--hit); padding: var(--s-2) var(--s-3); font: 400 var(--fs-small)/1.35 var(--font-body); color: var(--bone-1); cursor: pointer; }
.ml-combo-opt small { margin-left: auto; font: 400 var(--fs-caption)/1.3 var(--font-body); color: var(--bone-3); }
.ml-combo-opt mark { background: transparent; color: var(--bone-0); font-weight: 700; }
.ml-combo-opt::before { content: ""; flex: none; width: 6px; height: 6px; transform: rotate(45deg); }
.ml-combo-opt[aria-selected="true"] { color: var(--bone-0); font-weight: 600; }
.ml-combo-opt[aria-selected="true"]::before { background: var(--bone-0); }
.ml-combo-opt[data-active], .ml-combo-opt:hover { background: var(--surface-hover); color: var(--bone-0); }
.ml-combo-opt[data-active] { box-shadow: inset 2px 0 0 var(--bone-0); }
.ml-combo-empty { padding: var(--s-3); font: 400 var(--fs-small-ui)/1.45 var(--font-body); color: var(--bone-3); }

/* Date picker: a typed date plus a calendar grid; Monday first; today outlined, chosen day settled (bone-0 square) */
.ml-date { position: relative; display: flex; gap: var(--s-1); }
.ml-date .ml-input { flex: 1 1 auto; font-family: var(--font-mono); font-size: var(--fs-ui); }
.ml-date-btn { flex: none; display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; background: var(--ink-0); color: var(--bone-2); border: 1px solid var(--field-border); border-radius: var(--r-ui); cursor: pointer; }
.ml-date-btn:hover, .ml-date-btn[aria-expanded="true"] { color: var(--bone-0); border-color: var(--bone-0); }
.ml-date-btn svg { width: 16px; height: 16px; }
.ml-cal { position: absolute; top: calc(100% + var(--s-1)); right: 0; z-index: 30; box-sizing: border-box; width: 348px; max-width: calc(100vw - 32px); padding: var(--s-4); background: var(--app-card); border: 1px solid var(--field-border); border-radius: var(--r-ui); box-shadow: var(--shadow-1); }
.ml-cal[hidden] { display: none; }
.ml-cal--inline { position: static; box-shadow: none; }
.ml-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.ml-cal-title { font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--bone-0); }
.ml-cal-nav { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--bone-2); border: 1px solid transparent; border-radius: var(--r-ui); cursor: pointer; }
.ml-cal-nav:hover { color: var(--bone-0); border-color: var(--app-card-border); }
.ml-cal-nav svg { width: 16px; height: 16px; }
.ml-cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ml-cal-grid th { padding: var(--s-1) 0; font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bone-3); text-align: center; }
.ml-cal-grid td { padding: 1px; text-align: center; }
.ml-cal-day { position: relative; box-sizing: border-box; width: 100%; height: var(--hit); padding: 0; background: transparent; color: var(--bone-1); border: 1px solid transparent; border-radius: var(--r-ui); font: 400 var(--fs-ui)/1 var(--font-mono); cursor: pointer; }
.ml-cal-day:hover { background: var(--surface-hover); color: var(--bone-0); }
.ml-cal-day[aria-current="date"] { border-color: var(--bone-0); color: var(--bone-0); }
.ml-cal-day[aria-pressed="true"] { background: var(--bone-0); color: var(--ink-0); border-color: var(--bone-0); }
.ml-cal-day.is-outside { color: var(--bone-3); }
.ml-cal-day[disabled] { color: var(--bone-4); cursor: not-allowed; background: transparent; }
.ml-cal-day.has-due::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; background: currentColor; transform: rotate(45deg); }
.ml-cal-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font: 400 var(--fs-caption)/1.4 var(--font-body); color: var(--bone-3); }

/* Dependency map: what a system depends on (left) and what uses it (right), drawn as a tree; lists underneath, so it reads without the lines */
.mlp-depmap { --depmap-gap: var(--s-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--depmap-gap); row-gap: var(--s-2); align-items: center; }
.mlp-depmap-head { grid-row: 1; font: 400 var(--fs-ui-small)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--bone-3); }
.mlp-depmap-head:nth-of-type(2) { text-align: center; } .mlp-depmap-head:nth-of-type(3) { text-align: right; }
.mlp-depmap-col { grid-row: 2; display: grid; grid-auto-rows: 1fr; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.mlp-depmap-node { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); box-sizing: border-box; min-height: 64px; padding: var(--s-2) var(--s-3); background: var(--app-card); border: 1px solid var(--app-card-border); border-radius: var(--r-ui); }
.mlp-depmap-node b { font: 600 var(--fs-small)/1.3 var(--font-body); color: var(--bone-0); }
.mlp-depmap-node small { font: 400 var(--fs-caption)/1.35 var(--font-body); color: var(--bone-3); }
.mlp-depmap-node .mlp-status { align-self: flex-start; }
.mlp-depmap-node--focus { border-color: var(--bone-0); box-shadow: inset 0 0 0 1px var(--bone-0); padding: var(--s-4); }
.mlp-depmap-node--unknown { border-style: dashed; border-color: var(--field-border); }
/* stubs and the bus: up-nodes draw right, down-nodes draw left, every node but the last draws its share of the vertical bus */
.mlp-depmap-col--up .mlp-depmap-node::after, .mlp-depmap-col--down .mlp-depmap-node::after { content: ""; position: absolute; top: 50%; width: calc(var(--depmap-gap) / 2 + 1px); border-top: 1px solid var(--data-context-2); }
.mlp-depmap-col--up .mlp-depmap-node::after { left: 100%; }
.mlp-depmap-col--down .mlp-depmap-node::after { right: 100%; }
.mlp-depmap-node--unknown::after { border-top-style: dashed !important; }
.mlp-depmap-col--up .mlp-depmap-node:not(:last-child)::before, .mlp-depmap-col--down .mlp-depmap-node:not(:last-child)::before { content: ""; position: absolute; top: 50%; height: calc(100% + var(--s-3)); border-left: 1px solid var(--data-context-2); }
.mlp-depmap-col--up .mlp-depmap-node::before { left: calc(100% + var(--depmap-gap) / 2); }
.mlp-depmap-col--down .mlp-depmap-node::before { right: calc(100% + var(--depmap-gap) / 2 - 1px); }
.mlp-depmap-col--mid .mlp-depmap-node::before, .mlp-depmap-col--mid .mlp-depmap-node::after { content: ""; position: absolute; top: 50%; width: calc(var(--depmap-gap) / 2 + 1px); border-top: 1px solid var(--data-context-2); }
.mlp-depmap-col--mid .mlp-depmap-node::before { right: 100%; } .mlp-depmap-col--mid .mlp-depmap-node::after { left: 100%; }
.mlp-depmap-none { min-height: 64px; display: grid; place-items: center; border: 1px dashed var(--app-card-border); font: 400 var(--fs-caption)/1.4 var(--font-body); color: var(--bone-3); }
.mlp-depmap-col .mlp-depmap-none::before, .mlp-depmap-col .mlp-depmap-none::after { display: none; }
@media (max-width: 600px) {
  .mlp-depmap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mlp-depmap-head, .mlp-depmap-col { grid-row: auto; text-align: left !important; }
  .mlp-depmap-head:nth-of-type(1) { order: 1; } .mlp-depmap-col--up { order: 2; } .mlp-depmap-head:nth-of-type(2) { order: 3; } .mlp-depmap-col--mid { order: 4; } .mlp-depmap-head:nth-of-type(3) { order: 5; } .mlp-depmap-col--down { order: 6; }
  .mlp-depmap-node::before, .mlp-depmap-node::after { display: none; }
}
.mlp-depmap:has(.mlp-depmap-col--up .mlp-depmap-none) .mlp-depmap-col--mid .mlp-depmap-node::before,
.mlp-depmap:has(.mlp-depmap-col--down .mlp-depmap-none) .mlp-depmap-col--mid .mlp-depmap-node::after { display: none; }


/* ---------- Composition (v2.0) -------------------------------- */
/* Use these instead of inline layout styles: every gap is on the 4px scale. */
.mlp-page { box-sizing: border-box; width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); }
.mlp-stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.mlp-stack--1 { gap: var(--s-1); } .mlp-stack--2 { gap: var(--s-2); } .mlp-stack--3 { gap: var(--s-3); } .mlp-stack--5 { gap: var(--s-5); } .mlp-stack--6 { gap: var(--s-6); }
.mlp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-width: 0; }   /* not .mlp-row, which is a list row in a card */
.mlp-inline--2 { gap: var(--s-2); } .mlp-inline--4 { gap: var(--s-4); } .mlp-inline--between { justify-content: space-between; } .mlp-inline--top { align-items: flex-start; }
.mlp-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.mlp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mlp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mlp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .mlp-grid--2, .mlp-grid--3, .mlp-grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* Headings inside a page: the page title is the h1 question; sections use these. */
.mlp-h1 { margin: 0; font: 400 var(--fs-h1)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--bone-0); }
.mlp-h1 em { font-style: italic; color: var(--ember-text); }
.mlp-h2 { margin: 0; font: 400 var(--fs-h3)/1.2 var(--font-display); color: var(--bone-0); }   /* section heading: serif 22 */
.mlp-h3 { margin: 0; font: 600 var(--fs-card-title)/1.3 var(--font-body); color: var(--bone-0); }   /* card or group heading: sans 600 17 */
.mlp-kicker { margin: 0; font: 400 var(--fs-ui-small)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-3); }
.mlp-text { margin: 0; font: 400 var(--fs-small)/1.5 var(--font-body); color: var(--bone-1); max-width: 72ch; }
.mlp-meta { margin: 0; font: 400 var(--fs-small-ui)/1.45 var(--font-body); color: var(--bone-3); }