/* ============================================================
   minimal_ui — components
   All classes are prefixed .mui- to avoid collisions.
   ============================================================ */

/* ---------- Top bar ---------- */

.mui-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mui-sp-4);
  padding: var(--mui-sp-3) var(--mui-sp-5);
  background: var(--mui-surface);
  border-bottom: 1px solid var(--mui-border);
}

.mui-topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--mui-sp-3);
  font-size: var(--mui-fs-12);
  color: var(--mui-muted);
}
/* the topbar just holds a .mui-breadcrumbs and a .mui-topbar__meta */

/* ---------- Breadcrumbs (standalone) ----------
   <nav class="mui-breadcrumbs" aria-label="Breadcrumb">
     <a class="mui-breadcrumbs__item" href="#">Workspace</a>
     <span class="mui-breadcrumbs__sep">/</span>
     <span class="mui-breadcrumbs__item mui-breadcrumbs__item--current" aria-current="page">Dashboard</span>
   </nav>
   Standalone or dropped into a .mui-topbar. */

.mui-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mui-sp-2);
  font-size: var(--mui-fs-14);
  min-width: 0;
}

.mui-breadcrumbs__item {
  color: var(--mui-muted);
  text-decoration: none;
  white-space: nowrap;
}
a.mui-breadcrumbs__item:hover { color: var(--mui-ink); text-decoration: underline; text-underline-offset: 2px; }

.mui-breadcrumbs__item--current { color: var(--mui-ink); font-weight: 600; }

.mui-breadcrumbs__sep {
  color: var(--mui-faint);
  user-select: none;
}

/* ---------- Card & panel ---------- */

.mui-card {
  background: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow-sm);
}

.mui-card--pad { padding: var(--mui-sp-4); }
.mui-card--lg  { border-radius: var(--mui-radius-lg); }

.mui-panel {
  background: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius-lg);
  box-shadow: var(--mui-shadow-sm);
  overflow: hidden;
}

.mui-panel__head {
  display: flex;
  align-items: center;
  gap: var(--mui-sp-3);
  padding: var(--mui-sp-4) var(--mui-sp-5);
  cursor: default;
}

.mui-panel__head--toggle { cursor: pointer; }

.mui-panel__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--mui-radius-xs);
  background: var(--mui-surface-2);
  color: var(--mui-ink);
}

.mui-panel__titles { flex: 1 1 auto; min-width: 0; }
.mui-panel__title  { font-size: var(--mui-fs-16); font-weight: 600; }
.mui-panel__sub    { font-size: var(--mui-fs-13); color: var(--mui-muted); }

.mui-panel__chevron {
  flex: 0 0 auto;
  color: var(--mui-faint);
  transition: transform var(--mui-dur) var(--mui-ease);
}
.mui-panel[data-open="false"] .mui-panel__chevron { transform: rotate(-90deg); }
.mui-panel[data-open="false"] .mui-panel__body   { display: none; }

.mui-panel__body { padding: 0 var(--mui-sp-5) var(--mui-sp-5); }

/* ---------- Section label ("Items 4", "Saved 6" ...) ---------- */

.mui-section-label {
  display: flex;
  align-items: baseline;
  gap: var(--mui-sp-2);
  font-size: var(--mui-fs-14);
  font-weight: 600;
  color: var(--mui-ink);
}
.mui-section-label .mui-count { color: var(--mui-faint); font-weight: 500; }

/* ---------- Buttons ---------- */

.mui-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mui-sp-2);
  padding: 0 var(--mui-sp-4);
  height: 34px;
  border-radius: var(--mui-radius-xs);
  border: 1px solid transparent;
  background: var(--mui-surface-2);
  color: var(--mui-ink);
  font-size: var(--mui-fs-13);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--mui-dur) var(--mui-ease),
              border-color var(--mui-dur) var(--mui-ease);
}
/* hover: blend the button toward the ink color for a visible delta in
   BOTH themes (surface-2 -> surface-3 was too small a step in dark). */
.mui-btn:hover { background: color-mix(in srgb, var(--mui-surface-2) 82%, var(--mui-ink)); }
.mui-btn:disabled, .mui-btn[disabled] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

.mui-btn--primary {
  background: var(--mui-inverse);
  color: var(--mui-on-inverse);
}
/* mix toward on-inverse (the contrasting tone) so it visibly lightens in
   light mode and darkens in dark mode — a real hover delta either way. */
.mui-btn--primary:hover { background: color-mix(in srgb, var(--mui-inverse) 84%, var(--mui-on-inverse)); }

.mui-btn--ghost {
  background: transparent;
  border-color: var(--mui-border);
}
.mui-btn--ghost:hover {
  background: color-mix(in srgb, transparent 82%, var(--mui-ink));
  border-color: var(--mui-border-2);
}

.mui-btn--sm { height: 28px; padding: 0 var(--mui-sp-3); font-size: var(--mui-fs-12); }

/* ---------- Chips / filter pills ---------- */

.mui-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--mui-sp-4);
  border-radius: var(--mui-radius-pill);
  border: 1px solid var(--mui-border);
  background: var(--mui-surface);
  color: var(--mui-ink-2);
  font-size: var(--mui-fs-13);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--mui-dur) var(--mui-ease),
              color var(--mui-dur) var(--mui-ease);
}
.mui-chip:hover:not(.mui-chip--active) { background: var(--mui-surface-2); }
.mui-chip--active {
  background: var(--mui-inverse);
  border-color: var(--mui-inverse);
  color: var(--mui-on-inverse);
}
/* active chip keeps its inverse fill on hover — just a subtle shift */
.mui-chip--active:hover {
  background: color-mix(in srgb, var(--mui-inverse) 84%, var(--mui-on-inverse));
  border-color: color-mix(in srgb, var(--mui-inverse) 84%, var(--mui-on-inverse));
}

/* ---------- Badges ---------- */

.mui-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--mui-radius-xs);
  font-size: var(--mui-fs-11);
  font-weight: 600;
  letter-spacing: var(--mui-track-label);
  text-transform: uppercase;
  background: var(--mui-surface-2);
  color: var(--mui-muted);
  border: 1px solid var(--mui-border);
}
.mui-badge--fixed  { background: var(--mui-surface-2); color: var(--mui-ink-2); }
.mui-badge--full   { background: var(--mui-inverse); color: var(--mui-on-inverse); border-color: var(--mui-inverse); }
.mui-badge--pos    { background: var(--mui-pos-bg); color: var(--mui-pos); border-color: transparent; }
.mui-badge--warn   { background: var(--mui-warn-bg); color: var(--mui-warn-ink); border-color: transparent; }

/* ---------- Delta (+6% / -7%) ---------- */

.mui-delta { font-size: var(--mui-fs-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.mui-delta--pos { color: var(--mui-pos); }
.mui-delta--neg { color: var(--mui-neg); }

/* ---------- Stat rows + horizontal bars ---------- */

.mui-stat-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: var(--mui-sp-4);
  padding: var(--mui-sp-2) 0;
}
.mui-stat-row__label { font-size: var(--mui-fs-14); color: var(--mui-ink); }
.mui-stat-row__value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mui-sp-2);
  font-size: var(--mui-fs-14);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

.mui-bar {
  position: relative;
  height: 26px;
  border-radius: var(--mui-radius-xs);
  background: var(--mui-surface-2);
  overflow: hidden;
}
.mui-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mui-bar-value, 50%);
  background: var(--mui-accent);
  border-radius: var(--mui-radius-xs);
  transition: width 500ms var(--mui-ease), background var(--mui-dur) var(--mui-ease);
}

/* Labelled chart bars (ranked horizontal bars) */
.mui-hbar-chart { display: flex; flex-direction: column; gap: var(--mui-sp-2); }
.mui-hbar {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: var(--mui-sp-3);
  font-size: var(--mui-fs-13);
}
.mui-hbar__label { color: var(--mui-ink-2); }
.mui-hbar__track {
  position: relative;
  height: 16px;
  border-radius: var(--mui-radius-xs);
  background: var(--mui-surface-2);
  overflow: hidden;
}
.mui-hbar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mui-bar-value, 50%);
  background: var(--mui-chart-2);
  border-radius: var(--mui-radius-xs);
  transition: width 500ms var(--mui-ease), background var(--mui-dur) var(--mui-ease);
}
.mui-hbar--lead .mui-hbar__fill { background: var(--mui-chart-1); }
.mui-hbar__val { color: var(--mui-muted); font-variant-numeric: tabular-nums; }

/* ---------- Entity card ---------- */

.mui-entity {
  background: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius);
  padding: var(--mui-sp-4);
  box-shadow: var(--mui-shadow-sm);
}
.mui-entity__head {
  display: flex;
  align-items: center;
  gap: var(--mui-sp-2);
  margin-bottom: var(--mui-sp-3);
}
.mui-entity__icon { color: var(--mui-faint); }
.mui-entity__name { font-size: var(--mui-fs-14); font-weight: 600; }

.mui-spec-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: var(--mui-sp-1) var(--mui-sp-3);
  font-size: var(--mui-fs-13);
}
.mui-spec-grid dt { color: var(--mui-muted); }
.mui-spec-grid dd { margin: 0; font-weight: 600; color: var(--mui-ink); text-align: left; }

/* ---------- List row card (Saved lists) ---------- */

.mui-listcard {
  display: flex;
  align-items: center;
  gap: var(--mui-sp-3);
  padding: var(--mui-sp-4);
  background: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius);
  box-shadow: var(--mui-shadow-sm);
}
.mui-listcard__icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--mui-radius-xs);
  background: var(--mui-surface-2);
  color: var(--mui-muted);
  flex: 0 0 auto;
}
.mui-listcard__title { font-size: var(--mui-fs-14); font-weight: 600; }
.mui-listcard__sub   { font-size: var(--mui-fs-12); color: var(--mui-muted); }

/* ---------- Labeled tile (eyebrow + title + body) ---------- */

.mui-tile {
  padding: var(--mui-sp-4);
  background: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius-sm);
}
.mui-tile__eyebrow {
  display: flex; align-items: center; gap: var(--mui-sp-2);
  margin-bottom: var(--mui-sp-2);
}
.mui-tile__title { font-size: var(--mui-fs-14); font-weight: 600; margin-bottom: var(--mui-sp-1); }
.mui-tile__body  { font-size: var(--mui-fs-13); color: var(--mui-muted); line-height: var(--mui-lh); }

/* ---------- Callout box ---------- */

.mui-callout {
  padding: var(--mui-sp-3) var(--mui-sp-4);
  background: var(--mui-surface-2);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius-sm);
}
.mui-callout__label {
  font-size: var(--mui-fs-11);
  font-weight: 600;
  letter-spacing: var(--mui-track-label);
  text-transform: uppercase;
  color: var(--mui-muted);
  margin-bottom: 2px;
}
.mui-callout__body { font-size: var(--mui-fs-14); color: var(--mui-ink); }

/* Inline note strip */
.mui-note {
  padding: var(--mui-sp-3) var(--mui-sp-4);
  background: var(--mui-surface-2);
  border-radius: var(--mui-radius-sm);
  font-size: var(--mui-fs-13);
  color: var(--mui-ink-2);
}

/* ---------- Highlight (AI / insight) block ---------- */

.mui-highlight {
  position: relative;
  padding: var(--mui-sp-5);
  border-radius: var(--mui-radius-lg);
  background: var(--mui-ink-fixed);   /* stays dark in both themes */
  color: var(--mui-on-ink);
  box-shadow: var(--mui-shadow-halo);
}
/* faint gradient halo behind the highlight block */
.mui-highlight--halo::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(96,165,250,0.5), rgba(232,121,249,0.4), rgba(74,222,128,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
}
.mui-highlight__head {
  display: flex; align-items: center; gap: var(--mui-sp-3);
  margin-bottom: var(--mui-sp-3);
}
.mui-highlight__avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--mui-radius-sm);
  background: rgba(255,255,255,0.08);
  color: var(--mui-on-ink);
  flex: 0 0 auto;
}
.mui-highlight__name { font-weight: 600; }
.mui-highlight__tag  { font-size: var(--mui-fs-12); color: var(--mui-on-ink-muted); }
.mui-highlight__lede { font-size: var(--mui-fs-14); color: #e4e4e7; margin-bottom: var(--mui-sp-3); }

.mui-highlight__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mui-sp-2); }
.mui-highlight__list li {
  position: relative;
  padding-left: var(--mui-sp-4);
  font-size: var(--mui-fs-14);
  color: #e4e4e7;
}
.mui-highlight__list li::before {
  content: "";
  position: absolute; left: 4px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--mui-on-ink-muted);
}

/* Small insight card (light card inside a panel) */
.mui-insight {
  padding: var(--mui-sp-4);
  background: var(--mui-surface-2);
  border-radius: var(--mui-radius-sm);
}
.mui-insight__title { font-size: var(--mui-fs-14); font-weight: 600; margin-bottom: 2px; }
.mui-insight__body  { font-size: var(--mui-fs-13); color: var(--mui-muted); }

/* ---------- Donut (data-driven SVG, built by minimal-ui.js) ----------
   <div class="mui-donut" data-mui-donut data-mui-donut-legend>
     <span data-value="30" data-label="Open"></span>
     <span data-value="20" data-label="Pending"></span>
     <span data-value="10" data-label="Closed"></span>
   </div>
   Values are raw or %; JS normalizes and renders an SVG ring with gaps.
   Size via --mui-donut-size; ring thickness via --mui-donut-thickness;
   gap (in svg user units) via --mui-donut-gap. Colors auto-assign from
   --mui-chart-1..3 (then repeat); override per segment with data-color. */
.mui-donut {
  --mui-donut-size: 96px;
  --mui-donut-thickness: 14;   /* stroke width in the 0..100 viewBox */
  --mui-donut-gap: 3;          /* gap between segments, same units */
  display: flex; align-items: center; gap: var(--mui-sp-5);
}
/* when built, the container holds a chart + (optional) legend side by side */
.mui-donut__svg {
  width: var(--mui-donut-size); height: var(--mui-donut-size);
  flex: 0 0 auto; transform: rotate(-90deg);  /* start at 12 o'clock */
}
.mui-donut__seg { fill: none; stroke-linecap: butt; transition: stroke-dasharray 500ms var(--mui-ease), stroke-dashoffset 500ms var(--mui-ease); }

.mui-donut-legend { display: flex; flex-direction: column; gap: var(--mui-sp-2); font-size: var(--mui-fs-14); }
.mui-donut-legend__row { display: flex; align-items: center; gap: var(--mui-sp-2); }
.mui-donut-legend__row b { font-variant-numeric: tabular-nums; }
.mui-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* palette dots (also used by hand-written legends) */
.mui-dot--1 { background: var(--mui-chart-1); }
.mui-dot--2 { background: var(--mui-chart-2); }
.mui-dot--3 { background: var(--mui-chart-3); }

/* ---------- Chat bubbles ---------- */

.mui-chat { display: flex; flex-direction: column; gap: var(--mui-sp-3); }
.mui-bubble {
  max-width: 80%;
  padding: var(--mui-sp-3) var(--mui-sp-4);
  border-radius: var(--mui-radius);
  font-size: var(--mui-fs-14);
  line-height: var(--mui-lh);
}
.mui-bubble--user {
  align-self: flex-end;
  background: var(--mui-inverse);
  color: var(--mui-on-inverse);
  border-bottom-right-radius: var(--mui-radius-xs);
}
.mui-bubble--assistant {
  align-self: flex-start;
  background: var(--mui-surface-2);
  color: var(--mui-ink);
  border-bottom-left-radius: var(--mui-radius-xs);
}

/* Suggestion chips under the chat input */
.mui-suggestion {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--mui-sp-3);
  border-radius: var(--mui-radius-xs);
  border: 1px solid var(--mui-border);
  background: var(--mui-surface);
  color: var(--mui-ink-2);
  font-size: var(--mui-fs-12);
  cursor: pointer;
}
.mui-suggestion:hover { background: var(--mui-surface-2); }

/* Chat input */
.mui-input {
  display: flex;
  align-items: center;
  gap: var(--mui-sp-3);
  padding: var(--mui-sp-3) var(--mui-sp-4);
  border-radius: var(--mui-radius-pill);
  border: 1px solid var(--mui-border);
  background: var(--mui-surface);
}
.mui-input input {
  flex: 1 1 auto;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--mui-ink);
}
.mui-input input::placeholder { color: var(--mui-faint); }

/* ============================================================
   TYPOGRAPHY — element defaults (opt-in via .mui-prose) plus
   utility classes. .mui-prose styles raw tags so you can drop
   in markdown-ish content without per-element classes.
   ============================================================ */

.mui-prose { color: var(--mui-ink); font-size: var(--mui-fs-14); line-height: var(--mui-lh); }
.mui-prose > * + * { margin-top: var(--mui-sp-4); }

.mui-prose h1, .mui-h1 { font-size: var(--mui-fs-24); font-weight: 700; line-height: var(--mui-lh-tight); letter-spacing: -0.01em; }
.mui-prose h2, .mui-h2 { font-size: var(--mui-fs-20); font-weight: 600; line-height: var(--mui-lh-tight); }
.mui-prose h3, .mui-h3 { font-size: var(--mui-fs-16); font-weight: 600; }
.mui-prose h4, .mui-h4 { font-size: var(--mui-fs-14); font-weight: 600; }
.mui-prose h5, .mui-h5 { font-size: var(--mui-fs-13); font-weight: 600; text-transform: uppercase; letter-spacing: var(--mui-track-label); color: var(--mui-muted); }
.mui-prose h6, .mui-h6 { font-size: var(--mui-fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: var(--mui-track-label); color: var(--mui-faint); }

.mui-prose p { color: var(--mui-ink-2); }
.mui-prose a, .mui-link { color: var(--mui-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--mui-border-2); }
.mui-prose a:hover, .mui-link:hover { text-decoration-color: var(--mui-ink); }

.mui-prose ul, .mui-prose ol, .mui-list { padding-left: 1.25em; color: var(--mui-ink-2); }
.mui-prose ul, .mui-list--bullet { list-style: disc; }
.mui-prose ol, .mui-list--ordered { list-style: decimal; }
.mui-prose li + li, .mui-list li + li { margin-top: var(--mui-sp-1); }

.mui-prose blockquote, .mui-quote {
  margin: 0;
  padding: var(--mui-sp-2) var(--mui-sp-4);
  border-left: 3px solid var(--mui-border-2);
  color: var(--mui-muted);
  font-style: italic;
}

.mui-prose code, .mui-code {
  font-family: var(--mui-mono);
  font-size: 0.9em;
  padding: 0.1em 0.4em;
  border-radius: var(--mui-radius-xs);
  background: var(--mui-surface-2);
  color: var(--mui-ink);
}
.mui-prose pre, .mui-pre {
  margin: 0;
  padding: var(--mui-sp-4);
  border-radius: var(--mui-radius-sm);
  background: var(--mui-surface-2);
  border: 1px solid var(--mui-border);
  overflow-x: auto;
  font-family: var(--mui-mono);
  font-size: var(--mui-fs-12);
  line-height: 1.6;
  color: var(--mui-ink-2);
}
.mui-prose pre code, .mui-pre code { padding: 0; background: none; }

.mui-kbd {
  display: inline-block;
  font-family: var(--mui-mono);
  font-size: var(--mui-fs-11);
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--mui-radius-xs);
  background: var(--mui-surface);
  border: 1px solid var(--mui-border-2);
  box-shadow: 0 1px 0 var(--mui-border-2);
  color: var(--mui-ink-2);
}

.mui-hr, .mui-prose hr { height: 1px; border: 0; background: var(--mui-border); margin: var(--mui-sp-5) 0; }

.mui-mark { background: color-mix(in srgb, var(--mui-warn) 22%, transparent); border-radius: 3px; padding: 0 2px; }

/* ============================================================
   FORMS
   ============================================================ */

.mui-field { display: flex; flex-direction: column; gap: 6px; }
.mui-label { font-size: var(--mui-fs-13); font-weight: 500; color: var(--mui-ink); }
.mui-label .mui-req { color: var(--mui-neg); margin-left: 2px; }
.mui-help  { font-size: var(--mui-fs-12); color: var(--mui-muted); }
.mui-error { font-size: var(--mui-fs-12); color: var(--mui-neg); }

/* shared control skin */
.mui-control,
.mui-input-text,
.mui-textarea,
.mui-select {
  width: 100%;
  min-height: var(--mui-control-h);
  padding: 8px var(--mui-sp-3);
  font: inherit;
  font-size: var(--mui-fs-14);
  color: var(--mui-ink);
  background: var(--mui-surface);
  border: 1px solid var(--mui-border-2);
  border-radius: var(--mui-radius-xs);
  outline: 0;
  transition: border-color var(--mui-dur) var(--mui-ease),
              box-shadow var(--mui-dur) var(--mui-ease);
  -webkit-appearance: none;
  appearance: none;
}
.mui-control::placeholder,
.mui-input-text::placeholder,
.mui-textarea::placeholder { color: var(--mui-faint); }

.mui-control:focus,
.mui-input-text:focus,
.mui-textarea:focus,
.mui-select:focus {
  border-color: var(--mui-ink);
  box-shadow: var(--mui-focus);
}

.mui-control:disabled,
.mui-input-text:disabled,
.mui-textarea:disabled,
.mui-select:disabled { background: var(--mui-surface-2); color: var(--mui-faint); cursor: not-allowed; }

.mui-control[aria-invalid="true"],
.mui-input-text.is-invalid,
.mui-textarea.is-invalid,
.mui-select.is-invalid { border-color: var(--mui-neg); }
.mui-control[aria-invalid="true"]:focus,
.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mui-neg) 22%, transparent); }

.mui-textarea { min-height: 88px; padding: var(--mui-sp-3); resize: vertical; line-height: var(--mui-lh); }

/* select — custom chevron */
.mui-select {
  padding-right: var(--mui-sp-8);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--mui-ink);
  cursor: pointer;
}

/* input adornments: <span class="mui-input-group"><span class="mui-input-group__addon">$</span><input class="mui-input-text"></span> */
.mui-input-group { display: flex; align-items: stretch; }
.mui-input-group > .mui-input-text { border-radius: 0; }
.mui-input-group > :first-child { border-top-left-radius: var(--mui-radius-xs); border-bottom-left-radius: var(--mui-radius-xs); }
.mui-input-group > :last-child  { border-top-right-radius: var(--mui-radius-xs); border-bottom-right-radius: var(--mui-radius-xs); }
.mui-input-group > * + * { margin-left: -1px; }
.mui-input-group__addon {
  display: inline-flex; align-items: center;
  padding: 0 var(--mui-sp-3);
  background: var(--mui-surface-2);
  border: 1px solid var(--mui-border-2);
  color: var(--mui-muted);
  font-size: var(--mui-fs-13);
  white-space: nowrap;
}
.mui-input-group > .mui-input-text:focus { z-index: 1; }

/* checkbox & radio — style the native input directly */
.mui-check {
  display: inline-flex; align-items: center; gap: var(--mui-sp-2);
  font-size: var(--mui-fs-14); color: var(--mui-ink); cursor: pointer;
}
.mui-check input[type="checkbox"],
.mui-check input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
  border: 1px solid var(--mui-border-2);
  background: var(--mui-surface);
  cursor: pointer;
  display: grid; place-content: center;
  transition: background var(--mui-dur) var(--mui-ease), border-color var(--mui-dur) var(--mui-ease);
}
.mui-check input[type="checkbox"] { border-radius: var(--mui-radius-xs); }
.mui-check input[type="radio"]    { border-radius: 50%; }
.mui-check input:focus-visible { box-shadow: var(--mui-focus); }
.mui-check input:checked { background: var(--mui-inverse); border-color: var(--mui-inverse); }
.mui-check input[type="checkbox"]:checked::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid var(--mui-on-inverse); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mui-check input[type="radio"]:checked::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mui-on-inverse);
}
.mui-check input:disabled { background: var(--mui-surface-2); cursor: not-allowed; }
.mui-check input:disabled + span, .mui-check:has(input:disabled) { color: var(--mui-faint); }

/* switch */
.mui-switch { display: inline-flex; align-items: center; gap: var(--mui-sp-2); cursor: pointer; font-size: var(--mui-fs-14); }
.mui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mui-switch__track {
  position: relative; width: 40px; height: 22px; flex: 0 0 auto;
  border-radius: var(--mui-radius-pill);
  background: var(--mui-border-2);
  transition: background var(--mui-dur) var(--mui-ease);
}
.mui-switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;                 /* light knob reads on both track states */
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition: transform var(--mui-dur) var(--mui-ease);
}
/* on-track: knob flips to the surface color so it contrasts the light fill */
.mui-switch input:checked + .mui-switch__track { background: var(--mui-inverse); }
.mui-switch input:checked + .mui-switch__track::after { background: var(--mui-surface); }
.mui-switch input:checked + .mui-switch__track::after { transform: translateX(18px); }
.mui-switch input:focus-visible + .mui-switch__track { box-shadow: var(--mui-focus); }
.mui-switch input:disabled + .mui-switch__track { opacity: 0.5; }

/* range slider */
.mui-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
.mui-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--mui-radius-pill); background: var(--mui-border-2); }
.mui-range::-moz-range-track { height: 4px; border-radius: var(--mui-radius-pill); background: var(--mui-border-2); }
.mui-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--mui-inverse); border: 2px solid var(--mui-surface); box-shadow: var(--mui-shadow-sm);
}
.mui-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--mui-inverse); border: 2px solid var(--mui-surface); box-shadow: var(--mui-shadow-sm);
}
.mui-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--mui-focus); }

/* file input */
.mui-file { display: inline-flex; }
.mui-file input[type="file"] { display: none; }
.mui-file__btn {
  display: inline-flex; align-items: center; gap: var(--mui-sp-2);
  padding: 0 var(--mui-sp-4); height: var(--mui-control-h);
  border: 1px dashed var(--mui-border-2); border-radius: var(--mui-radius-xs);
  background: var(--mui-surface-2); color: var(--mui-ink-2);
  font-size: var(--mui-fs-13); cursor: pointer;
}
.mui-file__btn:hover { background: color-mix(in srgb, var(--mui-surface-2) 82%, var(--mui-ink)); }

/* fieldset */
.mui-fieldset { border: 1px solid var(--mui-border); border-radius: var(--mui-radius-sm); padding: var(--mui-sp-4); }
.mui-fieldset > legend { padding: 0 var(--mui-sp-2); font-size: var(--mui-fs-13); font-weight: 600; color: var(--mui-muted); }

/* ============================================================
   TABLE
   ============================================================ */

.mui-table-wrap { overflow-x: auto; border: 1px solid var(--mui-border); border-radius: var(--mui-radius-sm); }
.mui-table { width: 100%; border-collapse: collapse; font-size: var(--mui-fs-13); }
.mui-table thead th {
  text-align: left; font-weight: 600; color: var(--mui-muted);
  font-size: var(--mui-fs-12);
  padding: var(--mui-sp-3) var(--mui-sp-4);
  border-bottom: 1px solid var(--mui-border);
  background: var(--mui-surface-2);
  white-space: nowrap;
}
.mui-table tbody td { padding: var(--mui-sp-3) var(--mui-sp-4); border-bottom: 1px solid var(--mui-border); color: var(--mui-ink-2); }
.mui-table tbody tr:last-child td { border-bottom: 0; }
.mui-table--hover tbody tr:hover td { background: var(--mui-surface-2); }
.mui-table--striped tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--mui-surface-2) 55%, transparent); }
.mui-table .mui-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   FEEDBACK — alert, progress, spinner, avatar
   ============================================================ */

.mui-alert {
  display: flex; gap: var(--mui-sp-3);
  padding: var(--mui-sp-3) var(--mui-sp-4);
  border-radius: var(--mui-radius-sm);
  border: 1px solid var(--mui-border);
  background: var(--mui-surface-2);
  font-size: var(--mui-fs-13); color: var(--mui-ink-2);
}
.mui-alert__title { font-weight: 600; color: var(--mui-ink); }
.mui-alert--pos  { background: var(--mui-pos-bg);  border-color: color-mix(in srgb, var(--mui-pos) 30%, transparent); }
.mui-alert--warn { background: var(--mui-warn-bg); border-color: color-mix(in srgb, var(--mui-warn) 30%, transparent); }
.mui-alert--neg  { background: var(--mui-neg-bg);  border-color: color-mix(in srgb, var(--mui-neg) 30%, transparent); }

.mui-progress { height: 8px; border-radius: var(--mui-radius-pill); background: var(--mui-surface-2); overflow: hidden; }
.mui-progress__bar { height: 100%; width: var(--mui-bar-value, 0%); background: var(--mui-inverse); border-radius: inherit; transition: width var(--mui-dur) var(--mui-ease); }

.mui-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--mui-border-2); border-top-color: var(--mui-ink);
  animation: mui-spin 0.7s linear infinite; display: inline-block;
}
@keyframes mui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mui-spinner { animation-duration: 2s; }
  .mui-bar__fill, .mui-hbar__fill, .mui-progress__bar, .mui-donut__seg { transition: none; }
}

.mui-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mui-surface-3); color: var(--mui-ink-2);
  font-size: var(--mui-fs-12); font-weight: 600;
  overflow: hidden; flex: 0 0 auto;
}
.mui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mui-avatar--sm { width: 26px; height: 26px; }
.mui-avatar--lg { width: 44px; height: 44px; font-size: var(--mui-fs-14); }

/* ============================================================
   INTERACTIVE (paired with minimal-ui.js)
   ============================================================ */

/* Tabs */
.mui-tabs__list { display: flex; gap: 2px; border-bottom: 1px solid var(--mui-border); }
.mui-tab {
  padding: var(--mui-sp-3) var(--mui-sp-4);
  font-size: var(--mui-fs-13); font-weight: 500; color: var(--mui-muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
}
.mui-tab:hover { color: var(--mui-ink); }
.mui-tab[aria-selected="true"] { color: var(--mui-ink); border-bottom-color: var(--mui-ink); }
.mui-tab:focus-visible { box-shadow: var(--mui-focus); border-radius: var(--mui-radius-xs); }
.mui-tabs__panel { padding: var(--mui-sp-4) 0; }
.mui-tabs__panel[hidden] { display: none; }

/* Accordion */
.mui-accordion { border: 1px solid var(--mui-border); border-radius: var(--mui-radius-sm); overflow: hidden; }
.mui-accordion__item + .mui-accordion__item { border-top: 1px solid var(--mui-border); }
.mui-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--mui-sp-3);
  padding: var(--mui-sp-4); background: var(--mui-surface);
  border: 0; border-bottom: 1px solid transparent;   /* divider appears when open */
  font-size: var(--mui-fs-14); font-weight: 500; color: var(--mui-ink); text-align: left; cursor: pointer;
  transition: background var(--mui-dur) var(--mui-ease), border-color var(--mui-dur) var(--mui-ease);
}
.mui-accordion__trigger:hover { background: var(--mui-surface-2); }
/* open: separate the trigger from its panel */
.mui-accordion__trigger[aria-expanded="true"] { border-bottom-color: var(--mui-border); }
.mui-accordion__icon { color: var(--mui-faint); transition: transform var(--mui-dur) var(--mui-ease); }
.mui-accordion__trigger[aria-expanded="true"] .mui-accordion__icon { transform: rotate(180deg); }
.mui-accordion__panel { padding: var(--mui-sp-4); font-size: var(--mui-fs-13); color: var(--mui-muted); }
.mui-accordion__panel[hidden] { display: none; }

/* Dropdown menu */
.mui-dropdown { position: relative; display: inline-block; }
.mui-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 180px; padding: 4px;
  background: var(--mui-surface); border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius-sm); box-shadow: var(--mui-shadow);
}
/* right-align to the trigger — set manually, or auto-applied by minimal-ui.js
   when a left-aligned menu would overflow the viewport's right edge */
.mui-menu--end { left: auto; right: 0; }
.mui-menu[hidden] { display: none; }
.mui-menu__item {
  display: flex; align-items: center; gap: var(--mui-sp-2); width: 100%;
  padding: 8px var(--mui-sp-3); border: 0; background: none; border-radius: var(--mui-radius-xs);
  font-size: var(--mui-fs-13); color: var(--mui-ink); text-align: left; cursor: pointer;
  text-decoration: none;   /* also usable as an <a> link */
}
.mui-menu__item:hover, .mui-menu__item:focus-visible { background: var(--mui-surface-2); outline: 0; }
.mui-menu__sep { height: 1px; background: var(--mui-border); margin: 4px 0; }

/* Tooltip (CSS-only, data-mui-tooltip) */
[data-mui-tooltip] { position: relative; }
[data-mui-tooltip]::after {
  content: attr(data-mui-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px);
  padding: 4px 8px; border-radius: var(--mui-radius-xs);
  background: var(--mui-inverse); color: var(--mui-on-inverse);
  /* tooltip text is neutral regardless of the host's typography */
  font-size: var(--mui-fs-11); font-weight: 400;
  text-transform: none; letter-spacing: normal;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--mui-dur) var(--mui-ease), transform var(--mui-dur) var(--mui-ease);
}
[data-mui-tooltip]:hover::after, [data-mui-tooltip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Rich tooltip (JS-driven) — title + multi-line body.
   Trigger:  <button data-mui-tooltip-title="…" data-mui-tooltip-body="…">
   minimal-ui.js appends ONE .mui-tooltip to <body> and positions it, so it
   escapes any overflow:hidden ancestor. */
.mui-tooltip {
  position: absolute; z-index: 300;
  max-width: 260px;
  padding: var(--mui-sp-3);
  border-radius: var(--mui-radius-sm);
  background: var(--mui-inverse); color: var(--mui-on-inverse);
  box-shadow: var(--mui-shadow);
  font-size: var(--mui-fs-12); line-height: var(--mui-lh);
  text-transform: none; letter-spacing: normal;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--mui-dur) var(--mui-ease), transform var(--mui-dur) var(--mui-ease);
  pointer-events: none;
}
.mui-tooltip.is-open { opacity: 1; transform: translateY(0); }
.mui-tooltip__title { font-weight: 600; font-size: var(--mui-fs-13); margin-bottom: 2px; }
.mui-tooltip__body  { opacity: 0.85; }
/* little pointer */
.mui-tooltip::after {
  content: ""; position: absolute; left: var(--mui-tip-arrow, 50%); transform: translateX(-50%);
  border: 5px solid transparent;
}
.mui-tooltip[data-placement="top"]::after    { top: 100%;    border-top-color: var(--mui-inverse); }
.mui-tooltip[data-placement="bottom"]::after { bottom: 100%; border-bottom-color: var(--mui-inverse); }

/* Modal / dialog */
.mui-modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--mui-sp-5);
  background: color-mix(in srgb, #000 45%, transparent);
}
.mui-modal[hidden] { display: none; }
.mui-modal__box {
  width: 100%; max-width: 460px;
  background: var(--mui-surface); border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius-lg); box-shadow: var(--mui-shadow);
  padding: var(--mui-sp-5);
}
.mui-modal__head { display: flex; align-items: start; justify-content: space-between; gap: var(--mui-sp-3); margin-bottom: var(--mui-sp-3); }
.mui-modal__title { font-size: var(--mui-fs-16); font-weight: 600; }
.mui-modal__close { border: 0; background: none; color: var(--mui-faint); font-size: 18px; cursor: pointer; line-height: 1; }
.mui-modal__close:hover { color: var(--mui-ink); }
.mui-modal__foot { display: flex; justify-content: flex-end; gap: var(--mui-sp-2); margin-top: var(--mui-sp-5); }

/* Toast */
.mui-toasts {
  position: fixed; bottom: var(--mui-sp-5); right: var(--mui-sp-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--mui-sp-2); max-width: 340px;
}
.mui-toast {
  display: flex; align-items: start; gap: var(--mui-sp-3);
  padding: var(--mui-sp-3) var(--mui-sp-4);
  background: var(--mui-inverse); color: var(--mui-on-inverse);
  border-radius: var(--mui-radius-sm); box-shadow: var(--mui-shadow);
  border-left: 3px solid transparent;   /* accent stripe, colored per variant */
  font-size: var(--mui-fs-13);
  animation: mui-toast-in var(--mui-dur) var(--mui-ease);
}
.mui-toast--pos  { border-left-color: var(--mui-pos); }
.mui-toast--warn { border-left-color: var(--mui-warn); }
.mui-toast--neg  { border-left-color: var(--mui-neg); }

.mui-toast__close { margin-left: auto; border: 0; background: none; color: currentColor; opacity: 0.6; cursor: pointer; }
.mui-toast__close:hover { opacity: 1; }
@keyframes mui-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   EXAMPLE / showcase — a titled live preview, optionally over a
   copyable code panel. Use it to document components.

   Structure (code panel is optional):
     <figure class="mui-example">
       <figcaption class="mui-example__label">Label</figcaption>
       <div class="mui-example__preview"> …live demo… </div>
       <div class="mui-example__code">                     <!-- optional -->
         <button class="mui-example__copy" data-mui-copy>Copy</button>
         <pre>…escaped source…</pre>
       </div>
     </figure>
   The Copy button (data-mui-copy) is auto-wired by minimal-ui.js:
   it copies the text of the nearest <pre> in the code panel.
   ============================================================ */

.mui-example {
  margin: 0;
  background: var(--mui-surface);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius);
  overflow: hidden;
}
.mui-example__label {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mui-sp-3);
  padding: 8px var(--mui-sp-4);
  font-size: var(--mui-fs-12); font-weight: 600; color: var(--mui-muted);
  border-bottom: 1px solid var(--mui-border);
}
.mui-example__preview {
  padding: var(--mui-sp-5);
  background: var(--mui-bg);
}
/* opt-in layouts for the preview contents */
.mui-example__preview--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mui-sp-3); }
.mui-example__preview--col { display: flex; flex-direction: column; gap: var(--mui-sp-2); align-items: flex-start; }
.mui-example__preview--center { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mui-sp-3); }

.mui-example__code {
  position: relative;
  border-top: 1px dashed var(--mui-border);
  background: var(--mui-surface-2);
}
.mui-example__code pre {
  margin: 0;
  padding: var(--mui-sp-4) var(--mui-sp-5);
  overflow-x: auto;
  font-family: var(--mui-mono); font-size: var(--mui-fs-12);
  line-height: 1.6; color: var(--mui-ink-2);
  white-space: pre;
}
.mui-example__copy {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 10px; border-radius: var(--mui-radius-xs);
  border: 1px solid var(--mui-border); background: var(--mui-surface);
  font-size: var(--mui-fs-11); font-weight: 600; color: var(--mui-muted);
  cursor: pointer;
}
.mui-example__copy:hover { color: var(--mui-ink); background: var(--mui-surface-3); }
.mui-example__copy.is-copied { color: var(--mui-pos); border-color: var(--mui-pos); }