@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..700,0..100,0..1&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:wght@400..700&display=swap");

/* murmur, Starling Almanac. Every rule reads the tokens; no colour is written here twice.
   Class prefix mm-, so a consumer page can carry these beside its own without a collision. */

.mm-root {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.mm-display { font-family: var(--font-display); font-weight: 360; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; letter-spacing: -0.02em; }

/* The engraving grain: a fine stipple of ink, the paper of an old almanac plate. */
.mm-stipple {
  background-image: radial-gradient(var(--stipple) 0.7px, transparent 0.8px);
  background-size: 5px 5px;
}

/* ---------------------------------------------------------------- focus */
.mm-root :focus-visible,
.mm-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- button */
.mm-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font: 550 13px/1 var(--font-sans);
  letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 160ms ease-out;
}
.mm-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.mm-button:active { transform: scale(0.97); }
.mm-button[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; }
.mm-button--quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.mm-button--quiet:hover { background: var(--paper-sunk); border-color: var(--line-strong); }
.mm-button--quiet:active { background: var(--paper-sunk); }
.mm-button--small { height: 28px; padding: 0 10px; font-size: 12px; }
.mm-button--lamp { background: var(--lamp); border-color: var(--lamp); color: var(--on-lamp); }
.mm-button--lamp:hover { background: var(--lamp); border-color: var(--ink); }
.mm-button[disabled]:hover { background: var(--accent); border-color: var(--accent); }
.mm-button--quiet[disabled]:hover { background: transparent; border-color: var(--line-strong); }

/* --------------------------------------------------------------- status */
/* A state is a mark and a word in the state's own ink, set like a note in an almanac margin:
   no bubble, no fill. Each state has its own shape, so it reads without colour. */
.mm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 550 12.5px/16px var(--font-sans);
  white-space: nowrap;
  color: var(--ink-muted);
}
.mm-status::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.4 3.4v5.2M7.6 3.4v5.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4.4 3.4v5.2M7.6 3.4v5.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>") center / contain no-repeat;
}
.mm-status[data-tone="done"] { color: var(--success); }
.mm-status[data-tone="done"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.6 6.4l2.3 2.3 4.6-4.9' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.6 6.4l2.3 2.3 4.6-4.9' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.mm-status[data-tone="wait"] { color: var(--warning); }
.mm-status[data-tone="wait"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='3.7' stroke='black' stroke-width='1.6' fill='none'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='3.7' stroke='black' stroke-width='1.6' fill='none'/></svg>"); }
.mm-status[data-tone="fail"] { color: var(--danger); }
.mm-status[data-tone="fail"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.6 3.6l4.8 4.8M8.4 3.6l-4.8 4.8' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.6 3.6l4.8 4.8M8.4 3.6l-4.8 4.8' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>"); }
.mm-status[data-tone="info"] { color: var(--info); }
.mm-status[data-tone="info"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>"); width: 14px; }
.mm-status[data-tone="accent"] { color: var(--accent); }
.mm-status[data-tone="accent"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4' stroke='black' stroke-width='1.5' fill='none'/><path d='M6 2a4 4 0 0 1 0 8z' fill='black'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4' stroke='black' stroke-width='1.5' fill='none'/><path d='M6 2a4 4 0 0 1 0 8z' fill='black'/></svg>"); }
.mm-status[data-tone="live"] { color: var(--ink); }
.mm-status[data-tone="live"]::before { background: var(--lamp); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='3.3' fill='black'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='3.3' fill='black'/></svg>"); }

/* ----------------------------------------------------------------- tile */
/* The owner's rule: the label on the top edge, the value on the top edge, the note on the
   bottom edge, so a row of tiles never jumps. */
.mm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.mm-tile {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
}
.mm-tile__label { font: 550 12px/16px var(--font-sans); color: var(--ink-muted); }
.mm-tile__value { font: 400 28px/32px var(--font-mono); color: var(--ink); letter-spacing: -0.01em; }
.mm-tile__note { align-self: end; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- table */
/* One line per cell: a long value is cut and carries its whole text in its title. */
.mm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 20px; }
.mm-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.mm-table th {
  text-align: left;
  font: 550 12px/16px var(--font-sans);
  color: var(--ink-muted);
  background: var(--paper-sunk);
  padding: 10px var(--space-3);
  white-space: nowrap;
}
.mm-table td {
  padding: 9px var(--space-3);
  border-top: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  vertical-align: middle;
}
.mm-table td.mm-num, .mm-table th.mm-num { text-align: right; font-family: var(--font-mono); }
.mm-table code, .mm-code { font: 400 12.5px/18px var(--font-mono); color: var(--ink); }
.mm-table tbody tr:hover td { background: var(--paper-high); }

/* ----------------------------------------------------------------- card */
.mm-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.mm-card__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mm-card__title { font: 600 15px/22px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-card__meta { font: 400 12px/18px var(--font-mono); color: var(--ink-muted); }
.mm-card__body { font-size: 13px; line-height: 20px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-spacer { margin-left: auto; }

/* ---------------------------------------------------------- limit bar */
.mm-limit { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: var(--space-3); font-size: 12px; }
.mm-limit__name { color: var(--ink-muted); }
.mm-limit__rail { height: 6px; border-radius: var(--radius-pill); background: var(--paper-sunk); overflow: hidden; }
.mm-limit__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mm-limit[data-tone="wait"] .mm-limit__fill { background: var(--warning); }
.mm-limit[data-tone="fail"] .mm-limit__fill { background: var(--danger); }
.mm-limit__pct { font: 400 12px/1 var(--font-mono); text-align: right; }
.mm-limit[data-tone="wait"] .mm-limit__pct { color: var(--warning); }
.mm-limit[data-tone="fail"] .mm-limit__pct { color: var(--danger); }

/* ---------------------------------------------------------------- field */
/* Every control is 36 px tall, sits on paper-raised inside a line-strong border (3 to 1),
   and turns its border accent when focused. Nothing is square: the smallest corner is
   radius-xs. The select draws its own chevron, 12 px, inset 12 px from the edge, with the
   text stopping 36 px short of it, so the two never touch. */
.mm-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.mm-field > label, .mm-field__label { font: 550 12.5px/16px var(--font-sans); color: var(--ink); }
.mm-field__hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.mm-input, .mm-select, .mm-textarea,
.mm-field input, .mm-field select, .mm-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--paper-raised);
  color: var(--ink);
  font: 400 14px/20px var(--font-sans);
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.mm-field textarea, .mm-textarea { height: auto; min-height: 88px; padding: 8px var(--space-3); resize: vertical; }
.mm-field input::placeholder, .mm-field textarea::placeholder, .mm-input::placeholder { color: var(--ink-muted); opacity: 1; }
.mm-field input:hover, .mm-field select:hover, .mm-field textarea:hover { background: var(--paper-high); }
.mm-field input:focus, .mm-field select:focus, .mm-field textarea:focus { outline: none; border-color: var(--accent); box-sizing: border-box; }
.mm-field input:focus-visible, .mm-field select:focus-visible, .mm-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-field input[disabled], .mm-field select[disabled], .mm-field textarea[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; background: var(--paper-sunk); }
.mm-field[data-state="error"] input, .mm-field[data-state="error"] select, .mm-field[data-state="error"] textarea { border-color: var(--danger); }
.mm-field[data-state="error"] .mm-field__hint { color: var(--danger); }
.mm-field input[type="number"], .mm-field .mm-mono { font-family: var(--font-mono); font-size: 13.5px; }

/* The select: native control, our chevron. */
.mm-field select, .mm-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  background-image: none;
}
.mm-selectwrap { position: relative; display: block; min-width: 0; }
.mm-selectwrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.6l3 3 3-3' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.6l3 3 3-3' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  pointer-events: none;
}

/* An input with a fixed part inside its border: a currency, a unit, a search glass. */
.mm-affix {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--paper-raised);
  overflow: hidden;
}
.mm-affix:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-affix input { border: 0; height: 34px; border-radius: 0; background: transparent; outline: none; }
.mm-affix input:focus, .mm-affix input:focus-visible { outline: none; border: 0; }
.mm-affix__part { flex: none; padding: 0 12px; font: 400 13.5px/1 var(--font-sans); color: var(--ink-muted); }
.mm-affix__part:first-child { padding-right: 0; }
.mm-affix__part:last-child { padding-left: 0; }
.mm-affix--search::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 11px;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='5.2' cy='5.2' r='3.4' stroke='black' stroke-width='1.5' fill='none'/><path d='M7.8 7.8l2.6 2.6' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='5.2' cy='5.2' r='3.4' stroke='black' stroke-width='1.5' fill='none'/><path d='M7.8 7.8l2.6 2.6' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

/* ------------------------------------------------------------- choices */
/* A checkbox is a rounded square, never a square: radius-xs on 18 px. */
.mm-check, .mm-radio { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; cursor: pointer; }
.mm-check input, .mm-radio input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.mm-check input { border-radius: 6px; }
.mm-radio input { border-radius: var(--radius-pill); }
.mm-check input:hover, .mm-radio input:hover { border-color: var(--accent); }
.mm-check input:checked { background: var(--accent); border-color: var(--accent); }
.mm-check input:checked::after, .mm-check input:indeterminate::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.8 6.3l2.2 2.2 4.3-4.6' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.8 6.3l2.2 2.2 4.3-4.6' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.mm-check input:indeterminate { background: var(--accent); border-color: var(--accent); }
.mm-check input:indeterminate::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.2 6h5.6' stroke='black' stroke-width='1.9' stroke-linecap='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.2 6h5.6' stroke='black' stroke-width='1.9' stroke-linecap='round'/></svg>"); }
.mm-radio input:checked { border-color: var(--accent); border-width: 5px; background: var(--paper-raised); }
.mm-check input:focus-visible, .mm-radio input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-check input[disabled], .mm-radio input[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* The switch: something that is on or off right now, applied at once, no Save. */
.mm-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; cursor: pointer; }
.mm-switch input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.mm-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--paper-raised);
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mm-switch input:checked { background: var(--accent); }
.mm-switch input:checked::after { transform: translateX(16px); }
.mm-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-switch input[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* A card to choose one of: a provider, a size. The chosen one takes an accent border. */
.mm-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.mm-choice {
  position: relative;
  display: grid;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}
.mm-choice:hover { background: var(--paper-high); }
.mm-choice[aria-checked="true"] { border: 2px solid var(--accent); padding: 11px 15px; }
.mm-choice[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.8 6.3l2.2 2.2 4.3-4.6' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.8 6.3l2.2 2.2 4.3-4.6' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.mm-choice__title { font: 600 14px/20px var(--font-sans); padding-right: 22px; }
.mm-choice__meta { font: 400 12.5px/18px var(--font-mono); color: var(--ink-muted); }
.mm-choice__note { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
.mm-choice[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ----------------------------------------------------------- segmented */
/* One of a few settings that sit side by side and take effect at once (power modes, views). */
.mm-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--paper-sunk);
}
.mm-segmented button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-muted);
  font: 550 12.5px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.mm-segmented button:hover { color: var(--ink); }
.mm-segmented button[aria-pressed="true"] { background: var(--paper-raised); border-color: var(--line); color: var(--ink); }
.mm-segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- tabs */
.mm-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); }
.mm-tabs a, .mm-tabs button {
  position: relative;
  padding: 10px 0 12px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 550 14px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.mm-tabs [aria-selected="true"] { color: var(--ink); }
.mm-tabs [aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* ---------------------------------------------------------- icon button */
.mm-iconbutton {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.mm-iconbutton:hover { background: var(--paper-sunk); }
.mm-iconbutton svg { width: 16px; height: 16px; }
.mm-iconbutton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----------------------------------------------------------------- tag */
/* A name, not a state: the engine a lane runs on, a project, a region. */
.mm-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: 400 11.5px/1 var(--font-mono);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- text */
.mm-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mm-link:hover { text-decoration-thickness: 2px; }
.mm-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; font: 500 11px/1 var(--font-mono); color: var(--ink); }
.mm-inline-code { padding: 1px 6px; border-radius: 6px; background: var(--paper-sunk); font: 400 0.9em/1 var(--font-mono); white-space: nowrap; }

/* ------------------------------------------------------------- command */
.mm-command {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--paper-sunk);
  font: 400 12.5px/18px var(--font-mono);
  color: var(--ink);
}
.mm-command code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; }
.mm-command__prompt { color: var(--ink-muted); user-select: none; }

/* -------------------------------------------------------------- banner */
.mm-banner {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: 10px var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--field-butter);
  color: var(--ink);
  font-size: 13px;
  line-height: 20px;
}
.mm-banner b { color: var(--warning); font-weight: 600; }

/* ---------------------------------------------------------------- steps */
/* A dialog walks a real sequence, so its steps carry numbers. */
.mm-steps { display: grid; gap: var(--space-5); }
.mm-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); }
.mm-step__no {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font: 500 13px/1 var(--font-mono);
  background: var(--accent-field);
  color: var(--accent);
}
.mm-step[data-state="done"] .mm-step__no { background: var(--field-mint); color: var(--success); }
.mm-step__title { font: 600 15px/28px var(--font-sans); }
.mm-step__text { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.mm-step__body { display: grid; gap: var(--space-2); margin-top: var(--space-2); }

/* ---------------------------------------------------------------- drawer */
.mm-drawer {
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(520px, 100%);
  margin: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  overflow: hidden;
}
.mm-drawer__head { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--line); }
.mm-drawer__title { font: 600 18px/26px var(--font-sans); }
.mm-drawer__sub { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.mm-drawer__body { padding: var(--space-5); overflow: auto; }

/* ------------------------------------------------------------------ nav */
.mm-nav { display: grid; gap: 2px; padding: var(--space-3); }
.mm-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font: 500 14px/1 var(--font-sans);
}
.mm-nav a[aria-current="page"] { background: var(--accent-field); color: var(--accent); }
.mm-nav a .mm-count { margin-left: auto; font: 400 12px/1 var(--font-mono); color: var(--ink-muted); }
.mm-nav svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------- empty state */
.mm-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}
.mm-empty__title { font: 600 17px/24px var(--font-sans); }
.mm-empty__body { max-width: 56ch; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* --------------------------------------------------------------- ribbon */
/* A section divider drawn as a thin ribbon of birds, thickest in the middle, thinning out. */
.mm-ribbon {
  height: 14px;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") 0 0 / 11px 7px repeat-x, linear-gradient(90deg, transparent, #000 20%, #000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") 0 0 / 11px 7px repeat-x, linear-gradient(90deg, transparent, #000 20%, #000 62%, transparent);
  mask-composite: intersect;
  opacity: 0.7;
}

/* ------------------------------------------------------------ wordmark */
.mm-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 560;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 48;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mm-wordmark img, .mm-wordmark svg { height: 1em; width: auto; }

/* ------------------------------------------------ the seven-bird loader */
/* Gathering: the mark in motion. The lamp-lit bird holds the middle and the seven it watches
   wheel round it the way a flock wheels overhead, seen a little from the side, so the circle is
   flattened into an ellipse. A bird never turns over: its place moves round the ellipse and the
   bird itself stays back up, larger and darker as it comes round the front, smaller and paler
   behind. Used for waits of a second or more; a shorter wait shows nothing. */
.mm-gather { position: relative; display: inline-block; width: 30px; height: 24px; }
.mm-gather::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--lamp);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") center / contain no-repeat;
}
.mm-gather i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") center / contain no-repeat;
  animation: mm-gather 2.8s linear infinite;
}
.mm-gather i:nth-child(1) { --a: 0deg;   --r: 12px; animation-delay: 0s; }
.mm-gather i:nth-child(2) { --a: 51deg;  --r: 10px; animation-delay: -0.4s; }
.mm-gather i:nth-child(3) { --a: 103deg; --r: 12px; animation-delay: -0.8s; }
.mm-gather i:nth-child(4) { --a: 154deg; --r: 11px; animation-delay: -1.2s; }
.mm-gather i:nth-child(5) { --a: 206deg; --r: 12px; animation-delay: -1.6s; }
.mm-gather i:nth-child(6) { --a: 257deg; --r: 10px; animation-delay: -2s; }
.mm-gather i:nth-child(7) { --a: 309deg; --r: 11px; animation-delay: -2.4s; }
/* Read right to left: the bird is placed on a circle, turned back upright, and the whole
   circle is squashed into the ellipse, the bird unsquashed again, so only its place moves. */
@keyframes mm-gather {
  0%   { transform: scaleY(0.5) rotate(0deg)   translateX(var(--r)) rotate(0deg)    scaleY(2) scale(0.95); opacity: 0.8; }
  25%  { transform: scaleY(0.5) rotate(90deg)  translateX(var(--r)) rotate(-90deg)  scaleY(2) scale(1.2);  opacity: 1; }
  50%  { transform: scaleY(0.5) rotate(180deg) translateX(var(--r)) rotate(-180deg) scaleY(2) scale(0.95); opacity: 0.8; }
  75%  { transform: scaleY(0.5) rotate(270deg) translateX(var(--r)) rotate(-270deg) scaleY(2) scale(0.7);  opacity: 0.45; }
  100% { transform: scaleY(0.5) rotate(360deg) translateX(var(--r)) rotate(-360deg) scaleY(2) scale(0.95); opacity: 0.8; }
}

/* A bird as an inline mark (the Board icon, lists): currentColor, 12px. */
.mm-bird { display: inline-block; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M0.4 6Q3.2 1.8 6 6.8Q8.8 1.8 11.6 6Q8.8 5.2 6 9.4Q3.2 5.2 0.4 6Z' fill='black'/></svg>") center / contain no-repeat; }

/* --------------------------------------------------------------- flock */
.mm-flock { display: block; width: 100%; height: 100%; }
.mm-plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper-sunk);
}
.mm-readout { font: 400 12px/18px var(--font-mono); color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .mm-gather i { animation: none; transform: scaleY(0.5) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scaleY(2); }
  .mm-button { transition: none; }
}