/* The Agents board (Plan #5011, task #5016) — cards and the list layout.
   Design: docs/design/agent-management/boards/A2-Calm.* and L2-List-Accounts.*

   Plain by decision (Ian, 2026-09-20: "more standard, i don't like the random
   colors, more clean, vanilla"): no identity colour anywhere. Colour appears
   only where it carries meaning — the state dot and word, the capacity bars,
   and the red outline on a card that needs you. Every value below is one of
   the app's own tokens; this sheet adds no palette of its own.

   Light is the bare default and dark is the override, the way agents.css
   scopes its own: a token declared once would otherwise bleed across themes.
   The capacity ramp comes from agents.css through `.mm-energy-colors` on the
   root, so a bar here is the same green, amber and red as every other. */

/* Every surface that draws an avatar or a capacity bar declares these, not
   just the board: a dialog lives on document.body, OUTSIDE the board's root,
   so a token scoped to `.mm-ab` alone would leave its bars unpainted. */
:where(.mm-ab, .mm-as, .mm-ae, .mm-tp) {
  --ab-avatar-bg: #eef1f5; --ab-avatar-fg: #4c5665; --ab-avatar-edge: #d9dee6;
  --ab-track: #dfe4ea; --ab-hatch: #b7bfca; --ab-local: #8a93a3; --ab-out: rgba(194,47,69,.28);
  --ab-ws-bg: #eef1f5;
}
:root:not([data-theme="light"]) :is(.mm-ab, .mm-as, .mm-ae, .mm-tp) {
  --ab-avatar-bg: #1a2130; --ab-avatar-fg: #c3ccd7; --ab-avatar-edge: #2c3644;
  --ab-track: #232b37; --ab-hatch: #3a4351; --ab-local: #6d7887; --ab-out: rgba(255,114,133,.28);
  --ab-ws-bg: #161b22;
}
.mm-ab { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 28px 32px 40px; box-sizing: border-box; }

/* -- header ---------------------------------------------------------- */

.mm-ab-header { display: flex; flex-direction: column; gap: 20px; flex: none; }
.mm-ab-header [hidden] { display: none !important; }
.mm-ab-heading-row, .mm-ab-heading-actions, .mm-ab-filters, .mm-ab-results { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mm-ab-heading-row, .mm-ab-results { justify-content: space-between; }
.mm-ab-heading-row { flex-wrap: wrap; }
.mm-ab-heading { min-width: 0; }
.mm-ab-heading-actions { flex: none; }
.mm-ab-title { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.025em; line-height: 34px; }
.mm-ab-workspace { margin-top: 4px; color: var(--text-dim); font-size: 13px; overflow-wrap: anywhere; }
.mm-ab-tool, .mm-ab-create { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.mm-ab-manage { width: 38px; min-height: 40px; padding: 0; border-color: transparent; background: transparent; color: var(--text-dim); font-size: 22px; }
.mm-ab-manage:hover { color: var(--text); background: var(--panel-2); }
.mm-ab-ownership { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.mm-ab-owner-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.mm-ab-owner-tab[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }
.mm-ab-owner-count { min-width: 20px; padding: 1px 5px; border-radius: 5px; background: var(--panel-2); color: var(--text-dim); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.mm-ab-scope-note { min-width: 130px; margin-left: auto; padding-bottom: 13px; color: var(--text-dim); font-size: 12px; }
.mm-ab-filters { gap: 10px; flex-wrap: wrap; }
.mm-ab-search, .mm-ab-filter { height: 40px; box-sizing: border-box; padding: 0 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13.5px; }
.mm-ab-search { flex: 1 1 180px; width: 100%; min-width: 0; max-width: 300px; }
.mm-ab-search::placeholder { color: var(--text-dim); }
.mm-ab-filter { max-width: 100%; }
.mm-ab-team-filter { max-width: 220px; }
.mm-ab-view-button { margin-left: auto; }
.mm-ab-count { color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mm-ab-clear { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.mm-ab-clear:hover { text-decoration: underline; }
/* One dot vocabulary, shared by the filter chips and the list's State cell. */
.mm-ab-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex: none; }
[data-state="needs"] > .mm-ab-chip-dot { background: var(--danger); }
[data-state="working"] > .mm-ab-chip-dot { background: var(--accent-fill); }
[data-state="ready"] > .mm-ab-chip-dot { background: var(--ok); }
[data-state="offline"] > .mm-ab-chip-dot { background: transparent; border: 2px solid var(--text-dim); box-sizing: border-box; }

/* The banner floats over the top of the roster (a zero-height host), so a
   dropped connection never pushes the grid down and back up again. */
.mm-ab-banner-host { position: relative; height: 0; z-index: 5; }
.mm-ab-banner {
  position: absolute; top: 12px; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 100%;
  min-height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 14px; border-radius: 10px; font-size: 13.5px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  box-shadow: 0 6px 18px var(--shadow);
}
.mm-ab-banner[hidden] { display: none; }

/* The person's Refresh, beside the Manage menu and in its quiet style. */
.mm-ab-refresh { font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.mm-ab-refresh[aria-busy="true"] .icon { animation: mm-ab-spin 1s linear infinite; }
@keyframes mm-ab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-ab-refresh[aria-busy="true"] .icon { animation: none; } }

/* Placeholders shaped like what replaces them — the first paint of the
   board, and every agent dialog while it waits. */
.mm-ab-skel { display: block; border-radius: 6px; background: var(--panel-2); }
.mm-ab-skeleton .mm-ab-skel, .mm-as-skeleton .mm-ab-skel { animation: mm-ab-pulse 1.4s ease-in-out infinite; }
@keyframes mm-ab-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mm-ab-skeleton .mm-ab-skel, .mm-as-skeleton .mm-ab-skel { animation: none; } }
.mm-ab-skel-card { cursor: default; pointer-events: none; }
.mm-ab-skel-card .mm-ab-body { display: flex; flex-direction: column; gap: 12px; }
.mm-ab-skel-ws { height: 14px; width: 45%; margin: 12px 14px 0; }
.mm-ab-skel-avatar { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.mm-ab-skel-line { height: 12px; width: 70%; }
.mm-ab-skel-short { height: 10px; width: 45%; margin-top: 6px; }
.mm-ab-skel-bar { height: 6px; width: 100%; border-radius: 3px; }
.mm-ab-skel-dot { width: 30px; height: 30px; border-radius: 8px; }
.mm-ab-skel-row { pointer-events: none; }
.mm-as-skel-label { width: 110px; height: 12px; flex: none; }
.mm-as-skel-value { height: 12px; flex-grow: 1; max-width: 60%; }
.mm-set-skeleton { display: flex; flex-direction: column; }

/* Agent dialogs open at their FINAL size, one height per family, and never
   grow as their content loads: the head and the action row stay put and the
   body scrolls. Sheet, wizards (create, team, transfer) and panels (Teams,
   Transfers, AI setup, Activity, Team). */
.modal-card.mm-dlg-sheet { height: min(88vh, 820px, calc(100dvh - 32px)); }
.modal-card.mm-dlg-wizard { height: min(78vh, 640px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); }
.modal-card.mm-dlg-panel { min-height: min(420px, calc(100dvh - 32px)); }
.modal-card.mm-dlg-wizard > :not(.modal-head):not(.modal-actions),
.modal-card.mm-dlg-panel > :not(.modal-head):not(.modal-actions) { flex: 1 1 auto; }
/* The team wizard's steps swap its body; its action row is pinned. */
.modal-card.mm-dlg-wizard > form.mm-team-wizard { display: flex; flex-direction: column; overflow: hidden; }
.modal-card.mm-dlg-wizard > form.mm-team-wizard > .mm-team-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-card.mm-dlg-wizard > form.mm-team-wizard > :not(.mm-team-body) { flex: none; }

/* -- shared pieces ---------------------------------------------------- */

.mm-ab-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-sizing: border-box; border-radius: 28%; background: var(--ab-avatar-bg); color: var(--ab-avatar-fg);
  border: 1px solid var(--ab-avatar-edge); font-weight: 700;
}
.mm-ab-avatar[data-state="asleep"], .mm-ab-avatar[data-state="offline"] { opacity: .72; }
.mm-ab-avatar .avatar { border-radius: 28%; overflow: hidden; }
.mm-ab-dot {
  position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--mm-card); background: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; line-height: 1; color: var(--on-accent);
}
.mm-ab-avatar[data-state="working"] .mm-ab-dot { background: var(--accent-fill); }
.mm-ab-avatar[data-state="ready"] .mm-ab-dot { background: var(--ok); }
.mm-ab-avatar[data-state="needs"] .mm-ab-dot { background: var(--danger); }
.mm-ab-avatar[data-state="offline"] .mm-ab-dot { background: var(--mm-card); border-color: var(--text-dim); }
.mm-ab-initials { line-height: 1; letter-spacing: .01em; }

.mm-ab-name { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text); }
.mm-ab-role { font-size: 13px; line-height: 18px; color: var(--muted); }
.mm-ab-type { font-size: 12px; line-height: 15px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; min-width: 0; }
.mm-ab-type > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-ab-spark { flex: none; }
.mm-ab-names { min-width: 0; flex-grow: 1; display: flex; flex-direction: column; }
.mm-ab-name, .mm-ab-role, .mm-ab-type, .mm-ab-line, .mm-ab-sub, .mm-ab-slot-name,
.mm-ab-state-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mm-ab-state { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12.5px; height: 18px; }
.mm-ab-state .mm-ab-chip-dot { align-self: center; }
.mm-ab-state-text { min-width: 0; }
.mm-ab-state-word { font-weight: 600; color: var(--muted); flex: none; }
.mm-ab-state[data-state="needs"] .mm-ab-state-word { color: var(--danger); }
.mm-ab-state[data-state="working"] .mm-ab-state-word { color: var(--accent-ink); }
.mm-ab-state[data-state="ready"] .mm-ab-state-word { color: var(--text-dim); font-weight: 500; }
.mm-ab-state[data-state="offline"] .mm-ab-state-word { color: var(--text-dim); }
.mm-ab-state-rest { color: var(--text-dim); min-width: 0; }

/* The five bar looks, and no sixth. An unknown figure is hatched or dashed —
   never a zero-width fill, which would read as "out of capacity". */
.mm-ab-bars { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.mm-ab-bar { display: block; width: 100%; height: 5px; border-radius: 5px; background: var(--ab-track); overflow: hidden; }
.mm-ab-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--energy-tone, var(--ok)); }
.mm-ab-bar[data-look="hatched"] {
  background: repeating-linear-gradient(45deg, var(--ab-hatch) 0 2px, transparent 2px 5px);
}
.mm-ab-bar[data-look="local"] { background: var(--ab-local); }
.mm-ab-bar[data-look="signedout"] { background: var(--ab-out); }
.mm-ab-bar[data-look="empty"] { background: transparent; border: 1px dashed var(--ab-avatar-edge); box-sizing: border-box; }
.mm-ab-card[data-state="asleep"] .mm-ab-bars, .mm-ab-tr[data-state="asleep"] .mm-ab-bar { opacity: .55; }

.mm-ab-menu {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: var(--text-dim); font: inherit; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.mm-ab-menu:hover, .mm-ab-menu:focus-visible { background: var(--panel-2); border-color: var(--border); color: var(--text); }

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

.mm-ab-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.mm-ab-card {
  position: relative; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column;
  background: var(--mm-card); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden;
  cursor: pointer; text-align: left;
}
.mm-ab-card:hover { background: color-mix(in srgb, var(--mm-card) 92%, var(--text) 8%); border-color: var(--border); }
.mm-ab-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mm-ab-card[data-state="needs"] { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.mm-ab-card[data-selected="true"] { border-color: var(--accent); }
.mm-ab-ws {
  height: 24px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--ab-ws-bg); border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; padding: 0 8px;
}
.mm-ab-card > .mm-ab-menu, .mm-ab-card-check { position: absolute; top: 32px; right: 10px; }
.mm-ab-card .mm-ab-menu { opacity: .7; }
.mm-ab-card:hover .mm-ab-menu, .mm-ab-card:focus-within .mm-ab-menu { opacity: 1; }
.mm-ab-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mm-ab-who { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.mm-ab-card .mm-ab-name { padding-right: 18px; }

/* -- list ------------------------------------------------------------- */

/* The list's columns have real widths, so the table must not be allowed to
   push its own container wider than the window — that is what would stop the
   board from ever measuring itself as narrow. It scrolls inside a box that
   can shrink instead. */
.mm-ab-body-host { min-width: 0; }
.mm-ab-scroll { min-width: 0; overflow-x: auto; }
.mm-ab-table {
  /* The tracks below need 1000px (818 fixed + Status's 110 + gaps and
     padding); a narrower minimum squeezed Status to nothing and its header
     ran into Main AI. Narrower windows scroll the table in .mm-ab-scroll. */
  margin-top: 14px; min-width: 1000px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); overflow: hidden;
}
.mm-ab-row {
  display: grid; grid-template-columns: 28px minmax(0, 236px) 176px 124px minmax(110px, 1fr) 112px 112px 30px;
  column-gap: 14px; align-items: center; padding: 0 12px;
}
.mm-ab-head { height: 36px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; background: var(--panel); }
.mm-ab-th {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  display: flex; align-items: center; gap: 5px; white-space: nowrap; text-align: left;
}
button.mm-ab-th:hover { color: var(--text); }
button.mm-ab-th[aria-sort="ascending"], button.mm-ab-th[aria-sort="descending"] { color: var(--muted); }
.mm-ab-arrow { font-size: 10px; }
.mm-ab-tr { height: 54px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.mm-ab-tbody > .mm-ab-tr:last-child { border-bottom: 0; }
.mm-ab-tr:hover { background: var(--surface-hover, rgba(120, 120, 120, .12)); }
.mm-ab-tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mm-ab-tr[data-selected="true"] { background: var(--accent-soft); }
.mm-ab-cell { min-width: 0; }
.mm-ab-who-cell { display: flex; align-items: center; gap: 10px; }
.mm-ab-stack { display: flex; flex-direction: column; }
.mm-ab-line { font-size: 13.5px; color: var(--text); }
.mm-ab-sub, .mm-ab-slot-name { font-size: 11.5px; color: var(--text-dim); }
.mm-ab-more { color: var(--text-dim); }
.mm-ab-slot { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mm-ab-slot .mm-ab-bar { height: 6px; }
.mm-ab-tr .mm-ab-state { height: auto; }

/* -- popovers and empty states ---------------------------------------- */

.mm-ab-view { display: flex; flex-direction: column; gap: 14px; padding: 4px; min-width: 240px; }
.mm-ab-vtitle { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.mm-ab-seg { display: flex; gap: 4px; background: var(--panel-2); border-radius: 8px; padding: 3px; }
.mm-ab-segbtn {
  flex: 1 1 0; height: 28px; border-radius: 6px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; white-space: nowrap;
}
.mm-ab-segbtn[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.mm-ab-capacity { min-width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.mm-ab-capacity h3 { margin: 0; font-size: 14px; }
.mm-ab-acct { display: flex; flex-direction: column; gap: 2px; }
.mm-ab-acct-name { font-size: 13.5px; font-weight: 600; }
.mm-ab-quiet, .mm-ab-empty { color: var(--text-dim); font-size: 13.5px; }
.mm-ab-empty { margin: 48px 0; text-align: center; }
.mm-ab-check { width: 15px; height: 15px; accent-color: var(--accent-fill); }

@media (max-width: 720px) {
  .mm-ab-search { flex-basis: 100%; max-width: none; }
  .mm-ab-scope-note { display: none; }
  .mm-ab-team-filter { max-width: min(220px, 45%); }
  .mm-ab { padding: 20px 20px 32px; }
  .mm-ab-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
}

/* -- the agent sheet (#5019) ------------------------------------------
   One agent behind five tabs. It borrows modal()'s overlay for Escape, the
   backdrop, focus return and stacked dialog behaviour, and replaces its title bar
   with the agent's own identity row — so the close button stays where a
   reader of any other dialog expects it. */

/* `position: relative` is load-bearing: the close button is absolute, and
   without it the button positions against the viewport instead of the card. */
.mm-as-modal { padding-top: max(24px, 6vh); }
.mm-as-modal .modal-card { --modal-w: 920px; max-height: min(88vh, 820px); display: flex; flex-direction: column; padding: 0; position: relative; }
.mm-as-modal .modal-head { position: absolute; top: 16px; right: 16px; padding: 0; margin: 0; border: 0; background: none; z-index: 2; }
.mm-as-modal .modal-head h3 { display: none; }
.mm-as-modal .modal-card > .mm-as-head-row { overflow-y: visible; flex-shrink: 0; }
.mm-as-modal .modal-card > .mm-as-tabs { overflow-y: hidden; flex-shrink: 0; }

.mm-as-head-row { display: flex; align-items: flex-start; gap: 14px; padding: 28px 64px 0 28px; flex: none; }
.mm-as-ident { min-width: 0; flex-grow: 1; }
.mm-as-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.mm-as-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; line-height: 1.3; }
.mm-as-sub { font-size: 13.5px; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; line-height: 1.5; }
.mm-as-head-actions { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.mm-as-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px;
  background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 600; flex: none;
}
.mm-as-pill[data-state="needs"] { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.mm-as-pill[data-state="working"] { background: var(--accent-soft); color: var(--accent-ink); }
.mm-as-pill[data-state="ready"] { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }

.mm-as-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); padding: 0 28px; margin-top: 24px; flex: none; overflow-x: auto; }
.mm-as-tab {
  height: 36px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.mm-as-tab[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.mm-as-tab:hover { color: var(--text); }

.mm-as-body { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 28px; overscroll-behavior: contain; }
.mm-as-panel, .mm-as-stack { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.mm-as-fill { height: 100%; }
.mm-as-section { display: flex; flex-direction: column; gap: 7px; }
.mm-as-caps { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.mm-as-head { margin: 0; font-size: 15px; font-weight: 600; }
.mm-as-prose { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.mm-as-quiet { margin: 0; font-size: 13px; color: var(--text-dim); }
.mm-as-spacer { flex-grow: 1; }
.mm-as-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.mm-as-card, .mm-as-now, .mm-as-danger {
  border: 1px solid var(--border); border-radius: 10px; background: var(--mm-card); overflow: hidden;
}
.mm-as-now { display: flex; align-items: center; gap: 12px; padding: 16px; }
.mm-as-now-text { min-width: 0; flex-grow: 1; }
.mm-as-now-line { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.5; }
/* #7961: the Right now fix keeps its label on one line beside the text. */
.mm-as-now > .btn { flex-shrink: 0; white-space: nowrap; }
.mm-as-danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); display: flex; align-items: center; gap: 14px; padding: 10px 14px; }

.mm-as-row, .mm-as-slot { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 12px 16px; box-sizing: border-box; border-bottom: 1px solid var(--border-soft); }
.mm-as-card > :last-child { border-bottom: 0; }
.mm-as-row-label { width: 130px; flex: none; font-size: 13px; color: var(--text-dim); }
.mm-as-row-value, .mm-as-row-main { min-width: 0; flex-grow: 1; font-size: 13.5px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.mm-as-row-title { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; line-height: 1.5; }
.mm-as-slot-bar { display: block; width: 120px; flex: none; }
.mm-as-kind { flex: none; font-size: 11.5px; font-weight: 600; color: var(--accent-ink); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.mm-as-more-link { display: flex; align-items: center; height: 36px; padding: 0 14px; font-size: 13px; }
.mm-as-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }

.mm-as-textarea {
  flex-grow: 1; min-height: 220px; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg); color: var(--text);
  padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.65;
}
.mm-as-textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }

@media (max-width: 720px) {
  .mm-as-modal { padding: 16px; }
  .mm-as-modal .modal-card { --modal-w: 100vw; max-height: calc(100dvh - 32px); border-radius: 12px; }
  .mm-as-head-row { flex-wrap: wrap; padding: 24px 48px 0 20px; }
  .mm-as-body { padding: 24px 20px; }
  .mm-as-head-actions { margin-right: 0; width: 100%; justify-content: flex-start; }
  .mm-as-tabs { gap: 16px; padding: 0 20px; overflow-x: auto; }
}

/* -- everyday actions (#5017), the AI setup dialog (#5018), teams and
      transfers (#5027) ------------------------------------------------- */

.mm-ac-dialog, .mm-tp, .mm-ae { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 0; }
.mm-ac-dialog.modal-body { padding: 24px; gap: 20px; }
.mm-ac-prose, .mm-tp-prose { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.mm-ac-options { display: flex; flex-direction: column; gap: 8px; }
.mm-ac-option {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--mm-card); cursor: pointer;
}
.mm-ac-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mm-ac-option input { margin-top: 2px; accent-color: var(--accent-fill); }
.mm-ac-option-title { display: block; font-size: 14px; font-weight: 600; }
.mm-ac-option-note { display: block; font-size: 13px; color: var(--text-dim); }
.mm-ac-actions, .mm-ae-actions, .mm-tp-actions { display: flex; align-items: center; gap: 8px; }
.mm-ac-spacer, .mm-ae-spacer { flex-grow: 1; }

/* Clean up memory (#5020): plain words in the app's own greys — nothing here
   carries meaning through colour. */
.mm-cu.modal-body { gap: 14px; padding: 4px 20px 18px; }
.mm-cu-lines { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--text); }
.mm-cu-availability { color: var(--text); }
.mm-cu .mm-as-check input { accent-color: var(--accent-fill); }

/* The bulk bar floats over the roster, centred, and never covers a card's
   own controls for long: it appears only while something is selected. */
.mm-ab-bulk-host { position: sticky; bottom: 0; z-index: 7; display: flex; justify-content: center; pointer-events: none; }
.mm-ac-bulk {
  pointer-events: auto; margin-bottom: 22px; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 60px rgba(2, 6, 16, .45); flex-wrap: wrap;
}
.mm-ac-bulk-count { font-size: 14px; font-weight: 600; padding-right: 8px; white-space: nowrap; }
.mm-ac-bulk-note { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.mm-ac-bulk-x { width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font: inherit; }
.mm-ac-bulk-x:hover { background: var(--surface-hover, rgba(120, 120, 120, .12)); color: var(--text); }

.mm-ae-modal .modal-card { --modal-w: 680px; }
.mm-ae-modal .mm-ae { padding: 24px 28px; gap: 24px; }
.mm-ae-modal .modal-head { padding: 24px 28px 0; }
.mm-ae-modal .modal-actions { padding: 0 28px 24px; }
.mm-ae-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-ae-slots { display: flex; gap: 4px; background: var(--panel-2); border-radius: 8px; padding: 3px; flex: none; }
.mm-ae-slot { height: 28px; padding: 0 14px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; }
.mm-ae-slot[aria-selected="true"] { background: var(--panel); color: var(--text); font-weight: 600; }
.mm-ae-accounts { display: flex; flex-direction: column; gap: 10px; }
.mm-ae-account {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--mm-card); color: var(--text); font: inherit;
}
.mm-ae-account[data-picked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.mm-ae-account:disabled { opacity: .55; cursor: not-allowed; }
.mm-ae-account:not(:disabled):hover { border-color: var(--border-soft); }
.mm-ae-bar { display: block; width: 64px; flex: none; }
.mm-ae-account-text { min-width: 0; flex-grow: 1; display: flex; flex-direction: column; }
.mm-ae-account-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mm-ae-account-sub, .mm-ae-quiet, .mm-ae-note { font-size: 12.5px; color: var(--text-dim); }
.mm-ae-account-sub { overflow-wrap: anywhere; line-height: 1.5; }
.mm-ae-account-machine { font-size: 12px; color: var(--text-dim); flex: none; }
.mm-ae-note { margin: 0; }
.mm-ae-typerow, .mm-ae-previewrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-ae-label { width: 84px; flex: none; font-size: 13px; color: var(--text-dim); }
.mm-ae-type { height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13.5px; padding: 0 8px; }
.mm-ae-preview { font-size: 13.5px; font-weight: 600; }

.modal-card.mm-tp-modal > .modal-head { padding: 24px 28px 0; }
.modal-card.mm-tp-modal > .mm-tp { padding: 20px 28px 28px; gap: 24px; }
.mm-agent-management-panel .mm-agents-schedules { display: flex; flex-direction: column; gap: 16px; }
.mm-agent-management-panel .mm-agents-schedules > h2 { margin: 0; }
.mm-tp-head { display: flex; align-items: flex-start; gap: 12px; }
.mm-tp-titles { flex-grow: 1; min-width: 0; }
.mm-tp-title { margin: 0; font-size: 18px; font-weight: 700; }
.mm-tp-sub, .mm-tp-quiet { margin: 0; font-size: 13px; color: var(--text-dim); }
.mm-tp-stack { display: flex; flex-direction: column; gap: 16px; }
.mm-tp-caps { margin: 0 0 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.mm-tp-card { border: 1px solid var(--border); border-radius: 12px; background: var(--mm-card); overflow: hidden; }
.mm-tp-row, .mm-tp-pick {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 16px;
  border-bottom: 1px solid var(--border-soft); background: none; border-left: 0; border-right: 0; border-top: 0;
  color: var(--text); font: inherit; text-align: left;
}
.mm-tp-card > :last-child { border-bottom: 0; }
.mm-tp-card > .mm-tp-quiet { padding: 20px; }
.mm-tp-pick:hover { background: var(--surface-hover, rgba(120, 120, 120, .12)); }
.mm-tp-row-main { min-width: 0; flex-grow: 1; }
.mm-tp-row-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-tp-row-value { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-tp-col { width: 190px; flex: none; min-width: 0; }
.mm-tp-foot { min-height: 44px; display: flex; align-items: center; padding: 8px 14px; font-size: 13px; color: var(--text-dim); }
.mm-tp-more { width: 26px; height: 26px; border-radius: 6px; border: 0; background: transparent; color: var(--text-dim); font: inherit; flex: none; }
.mm-tp-more:hover { background: var(--panel-2); color: var(--text); }

/* Explicit layout roles keep the sheet's scrolling body independent of the
   persistent identity and controls. Memory tags have a fixed column. */
.mm-as-profile { border: 0; padding: 0; margin-top: 8px; background: none; color: var(--accent-ink); font: inherit; font-size: 13px; cursor: pointer; }
.mm-as-profile:hover { text-decoration: underline; }
.mm-as-menu { min-width: 36px; font-weight: 700; letter-spacing: 1px; }
.mm-as-row > .btn { flex-shrink: 0; }
.mm-as-card > .mm-as-quiet { padding: 16px; }
.mm-as-memory-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: start; }
.mm-as-memory-row .mm-as-kind { justify-self: start; margin-top: 3px; }
.mm-as-memory-row .mm-as-quiet { margin-top: 4px; line-height: 1.5; }
.mm-as-memory-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mm-memory-expiry { width: auto; min-width: 0; flex: none; }
/* #5594: a Lead's workers in its owner's sheet — each worker, then its jobs indented. */
.mm-as-worker { min-height: 44px; }
.mm-as-worker-job { min-height: 44px; padding-left: 32px; }
.mm-as-worker-job .mm-as-row-title { font-weight: 500; }
/* #5681: a job keeps Cancel on its row at phone widths (beats the ≤540 px
   row wrap below); the title column shrinks and wraps, Cancel does not. */
.mm-as-row.mm-as-worker-job { flex-wrap: nowrap; }
/* #5681: the Workers field shows when it cannot be edited (the house disabled
   look), and a count the page refuses is marked on the field — at 0,3,0 the
   mark outlasts `.modal-input:focus`, so it survives the returned focus. */
.mm-agent-sheet-editor .mm-agents-workers:disabled { opacity: .55; cursor: not-allowed; }
.mm-agent-sheet-editor .mm-agents-workers[aria-invalid="true"] { border-color: var(--danger); }
.mm-ac-pop-full { max-height: calc(100dvh - 32px); min-width: 220px; }
.mm-ac-pop .pop-item { min-height: 34px; padding: 8px 12px; }
[data-state="unknown"] > .mm-ab-chip-dot { background: var(--text-dim); opacity: .5; }
.mm-ab-avatar[data-state="unknown"] .mm-ab-dot { background: var(--mm-card); border-color: var(--text-dim); border-style: dotted; }
@media (max-width: 540px) {
  .modal-card.mm-tp-modal > .modal-head { padding: 20px 20px 0; }
  .modal-card.mm-tp-modal > .mm-tp { padding: 20px; }
  .mm-tp-row, .mm-tp-head, .mm-tp-actions { flex-wrap: wrap; }
  .mm-tp-col { width: auto; flex: 1 1 120px; }
  .mm-as-row, .mm-as-slot { flex-wrap: wrap; gap: 8px 12px; }
  .mm-as-row-label { width: 100%; }
  .mm-as-memory-row { grid-template-columns: 64px minmax(0, 1fr); }
  .mm-as-memory-row > .btn, .mm-as-memory-row > .mm-as-memory-actions { grid-column: 2; justify-self: start; }
  .mm-as-head-row > .mm-as-avatar { display: none; }
  .mm-ae-modal .mm-ae { padding: 20px; }
  .mm-ae-account { flex-wrap: wrap; }
  .mm-ae-account-machine { padding-left: 76px; }
}

.mm-ab-group { margin-top: 28px; }
.mm-ab-group-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.mm-ab-group .mm-ab-grid { margin-top: 14px; }

.mm-as-status-notes { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.mm-as-status-notes .mm-as-quiet { line-height: 1.5; }

/* #9180 — Conversations (C1: boards C1-Conversations, C1-Transcript and
   C-States). A list whose row opens the transcript in place. Colour only in
   the outcome word and its dot. Secondary text is the dim ink in dark and
   the muted ink in light, where the dim ink is too faint for small text. */
.mm-as-convos { --convo-dim: var(--muted); }
:root:not([data-theme="light"]) .mm-as-convos { --convo-dim: var(--text-dim); }
.mm-as-convos, .mm-as-convo-stack, .mm-as-transcript { gap: 18px; }
.mm-as-transcript { display: flex; flex-direction: column; min-width: 0; }
.mm-as-convo-count { font-size: 13px; font-weight: 400; color: var(--convo-dim); white-space: pre-wrap; }
.mm-as-convo {
  display: flex; flex-direction: column; gap: 4px; width: 100%; box-sizing: border-box; padding: 9px 14px;
  border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.mm-as-convo:hover { background: var(--panel-2); }
.mm-as-convo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.mm-as-convo-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mm-as-convo-who { min-width: 0; flex-grow: 1; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-as-convo-who strong { font-weight: 600; }
.mm-as-convo-dim { color: var(--convo-dim); }
.mm-as-convo-preview { min-width: 0; flex-grow: 1; font-size: 13px; color: var(--convo-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-as-convo-note { flex: none; font-size: 12px; color: var(--convo-dim); white-space: nowrap; }
.mm-as-convo-place {
  flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.mm-as-outcome { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--convo-dim); white-space: nowrap; }
.mm-as-outcome::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.mm-as-outcome[data-tone="ok"] { color: var(--ok); }
.mm-as-outcome[data-tone="live"] { color: var(--accent-ink); }
.mm-as-outcome[data-tone="bad"] { color: var(--danger); }
/* The back link is a `.mm-as-back`, whose quieter ink is declared later in
   this file; scoped here so the board's accent link wins. */
.mm-as-convo-more, .mm-as-convos .mm-as-convo-back {
  align-self: flex-start; border: 0; padding: 0; background: none; color: var(--accent-ink);
  font: inherit; font-size: 13px; cursor: pointer;
}
.mm-as-convo-more:hover, .mm-as-convos .mm-as-convo-back:hover { color: var(--accent-ink); text-decoration: underline; }
.mm-as-convo-more:disabled { color: var(--convo-dim); cursor: wait; text-decoration: none; }
.mm-as-convo-more:focus-visible, .mm-as-convo-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mm-as-convo-skel { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.mm-as-convo-skel > .mm-ab-skel:first-child { height: 10px; width: min(220px, 60%); }
.mm-as-convo-skel > .mm-ab-skel:last-child { height: 8px; width: min(340px, 85%); }
.mm-as-convo-skel:nth-child(2) > .mm-ab-skel:first-child { width: min(180px, 50%); }
.mm-as-convo-skel:nth-child(3) > .mm-ab-skel:last-child { width: min(370px, 90%); }
.mm-as-convo-failed { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.mm-as-convo-failed .mm-as-row-main { color: var(--muted); }
.mm-as-convo-failed .btn { flex: none; display: inline-flex; align-items: center; gap: 7px; }
.mm-as-convo-warn { display: inline-flex; flex: none; color: var(--warn); }
.mm-as-convo-hidden { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--convo-dim); }
.mm-as-convo-hidden svg { flex: none; }
.mm-as-convo-head { display: flex; flex-direction: column; gap: 4px; }
.mm-as-convo-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mm-as-convo-title { margin: 0; flex-grow: 1; min-width: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.mm-as-convo-meta { font-size: 12.5px; color: var(--convo-dim); line-height: 1.7; overflow-wrap: anywhere; }
.mm-as-leg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-as-leg-line { font-size: 12.5px; color: var(--convo-dim); overflow-wrap: anywhere; }
.mm-as-leg-name { color: var(--text); font-weight: 600; }
.mm-as-leg-ask {
  border: 1px solid var(--border); border-radius: 10px; background: var(--mm-card); padding: 10px 14px;
  font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.mm-as-leg-posts { margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.mm-as-post { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-as-post-label { font-size: 11.5px; color: var(--convo-dim); }
.mm-as-post-body { font-size: 13.5px; line-height: 1.45; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.mm-as-post[data-kind="progress"] .mm-as-post-body, .mm-as-post[data-kind="notice"] .mm-as-post-body { color: var(--muted); }
@media (max-width: 540px) {
  /* A narrow sheet: the names take their own line and wrap; the kind word,
     hidden count and outcome sit under them. */
  .mm-as-convo-line { flex-wrap: wrap; gap: 4px 10px; }
  .mm-as-convo-who { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mm-as-convo-preview { flex-basis: 100%; }
  .mm-as-leg-posts { margin-left: 4px; }
}

/* Existing-agent editing belongs to the sheet. The single footer stays outside
   its scrolling body; hidden panels remain mounted to preserve one draft. */
.mm-as-content[hidden], .mm-as-editor-host[hidden], .mm-as-footer-host[hidden],
.mm-agent-sheet-editor [hidden] { display: none !important; }
.mm-as-modal .modal-card > .mm-as-footer-host { flex: none; overflow: visible; padding: 0; }
.mm-as-editor-footer { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 18px 28px; border-top: 1px solid var(--border); background: var(--mm-card); }
.mm-as-editor-footer > :first-child { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; }
.mm-as-editor-footer > .btn { flex: none; }
.mm-agent-sheet-editor { width: 100%; min-width: 0; }
.mm-as-editor-panel { display: flex; flex-direction: column; gap: 28px; }
.mm-agent-sheet-editor .mm-agent-field { margin: 0; }
.mm-agent-sheet-editor .modal-label { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
.mm-agent-sheet-editor .modal-input { width: 100%; min-height: 42px; padding: 10px 12px; font-size: 14px; }
.mm-agent-sheet-editor .mm-agents-context { width: 100%; min-height: 260px; resize: vertical; padding: 14px; font: inherit; font-size: 14px; line-height: 1.6; background: var(--mm-card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.mm-agent-sheet-editor .mm-set-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.6; }
.mm-agent-sheet-editor .mm-agents-panel { gap: 20px; }
.mm-as-settings-section { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; border-top: 1px solid var(--border); }
.mm-as-settings-section:first-child { border-top: 0; padding-top: 0; }
.mm-as-settings-section > h3, .mm-as-settings-section > summary { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.mm-agent-sheet-editor .mm-agent-simple-toggle { margin: 0; padding: 0 0 18px; }
.mm-agent-sheet-editor .mm-agents-avatar { align-items: flex-start; gap: 20px; }
.mm-agent-sheet-editor .mm-agents-avatar-acts { flex-wrap: wrap; margin-top: 14px; gap: 10px; }
.mm-agent-sheet-editor .mm-agents-brief { padding: 14px 16px; }
.mm-agent-sheet-editor .mm-agents-brief summary { font-size: 13px; cursor: pointer; }
.mm-agent-sheet-editor .mm-agents-brief-text { max-height: none; font-size: 13px; line-height: 1.6; margin-top: 16px; }
.mm-agent-sheet-editor .mm-agents-perms { display: block; }
.mm-agent-sheet-editor .mm-agents-side { background: none; border: 0; padding: 0; }
.mm-agent-sheet-editor .mm-agents-check { padding: 10px 0; font-size: 13px; }
.mm-agent-sheet-editor .mm-ai-intro { margin: 0 0 20px; }
.mm-agent-sheet-editor .mm-ai-slot { padding: 20px; background: var(--mm-card); }
.mm-agent-sheet-editor .mm-ai-slot-heading h3 { font-size: 16px; }
.mm-agent-sheet-editor .mm-ai-slot-number { display: none; }
.mm-agent-sheet-editor .mm-ai-slot .mm-agent-field { margin-top: 20px; }
@media (max-width: 720px) {
  .mm-as-editor-footer { padding: 16px 20px; gap: 12px; }
  .mm-agent-sheet-editor .mm-agents-avatar { flex-wrap: wrap; }
  .mm-agent-sheet-editor .mm-ai-loadout { grid-template-columns: minmax(0, 1fr); }
}

/* Focused editing uses the Overview row language, without a second navigation bar. */
.mm-as-setting-page, .mm-as-engine-main, .mm-as-engine-options { display: flex; flex-direction: column; gap: 24px; }
.mm-as-back { align-self: flex-start; border: 0; padding: 0; background: none; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }
.mm-as-back:hover { color: var(--text); }
.mm-as-settings-list .mm-as-row { min-height: 68px; padding: 18px 20px; gap: 20px; }
.mm-as-settings-list .mm-as-row-label { width: 130px; }
.mm-agent-sheet-editor .mm-as-section > .btn { align-self: flex-start; }
.mm-agent-sheet-editor .mm-as-row .btn { flex: none; }
.mm-agent-sheet-editor .mm-as-backups { background: none; border: 0; padding: 0; }
.mm-as-editor-panel .mm-as-quiet { line-height: 1.6; }
.mm-as-editor-panel .mm-as-head { margin: 0; }
@media (max-width: 540px) {
  .mm-as-settings-list .mm-as-row { padding: 16px; gap: 8px; }
  .mm-as-settings-list .mm-as-row-label { width: 100%; }
}

@media (max-width: 420px) {
  .mm-ab { padding: 20px 16px 32px; }
  .mm-ab-heading-row { align-items: flex-start; gap: 8px; }
  .mm-ab-heading-actions { gap: 4px; }
  .mm-ab-create { padding-left: 10px; padding-right: 10px; }
  .mm-ab-ownership { gap: 12px; }
  .mm-ab-owner-tab { gap: 6px; font-size: 13px; }
  .mm-ab-title { font-size: 24px; }
}

/* Focused AI editing: one account, one model, one ordered fallback list. */
.mm-engine-backup-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; }
.mm-engine-backup-heading h3 { margin:0; font-size:15px; font-weight:600; }
.mm-engine-backup { display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--border); }
.mm-engine-backup[draggable="true"] { cursor:grab; }
.mm-engine-backup[draggable="true"]:active { cursor:grabbing; }
.mm-engine-order { display:grid; place-items:center; flex:none; width:28px; height:28px; border:1px solid var(--border); border-radius:6px; color:var(--text-dim); font-size:12px; }
.mm-engine-row-info { display:flex; flex:1; min-width:0; flex-direction:column; gap:6px; overflow-wrap:anywhere; }
.mm-engine-row-info strong { font-size:14px; font-weight:600; }
.mm-engine-row-actions, .mm-engine-links { display:flex; flex-wrap:wrap; gap:8px; }
.mm-as-backups > select { margin:16px 0 0; }
.modal-overlay.mm-engine-dialog { padding:20px 16px; align-items:center; }
.mm-engine-dialog .modal-card { max-height:calc(100dvh - 40px); }
.mm-engine-dialog .modal-head { padding:24px 28px 0; }
.mm-engine-dialog-body { padding:24px 28px; overflow-y:auto; }
.mm-engine-dialog .modal-actions { padding:18px 28px; border-top:1px solid var(--border); }
.mm-engine-fields { display:flex; flex-direction:column; gap:20px; }
.mm-engine-fields [hidden] { display:none !important; }
.mm-engine-fields .mm-agent-field { margin:0; }
.mm-engine-fields .modal-label { display:block; margin-bottom:10px; font-size:13px; font-weight:600; color:var(--text); }
.mm-engine-fields .modal-input { box-sizing:border-box; width:100%; min-height:44px; padding:10px 12px; font:inherit; font-size:14px; }
.mm-engine-fields .mm-as-quiet { margin:0; line-height:1.6; }
.mm-engine-error:empty { display:none; }
.mm-engine-error, .mm-engine-warning, .mm-agent-save-status[data-state="error"] { color:var(--danger, #ff627d); font-weight:650; line-height:1.5; }
.mm-agent-save-status[data-state="success"] { color:var(--text); font-weight:600; }
.mm-agent-save-status[data-state="saving"] { color:var(--text); font-weight:600; }
.mm-as-editor-footer .btn[aria-busy="true"] { opacity:1; cursor:wait; }
.mm-as-editor-footer .btn[aria-busy="true"]::before { content:""; display:inline-block; width:12px; height:12px; margin-right:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:mm-engine-saving .8s linear infinite; }
@keyframes mm-engine-saving { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .mm-as-editor-footer .btn[aria-busy="true"]::before { animation:none; } }
@media (max-width:600px) {
  .mm-engine-backup-heading { align-items:flex-start; flex-direction:column; gap:6px; }
  .mm-engine-backup { flex-wrap:wrap; }
  .mm-engine-row-actions { width:100%; justify-content:flex-end; }
  .mm-as-editor-footer { align-items:stretch; flex-direction:column; gap:12px; }
  .mm-engine-dialog-body { padding:20px; }
}
.mm-engine-title { display:flex; flex-direction:column; gap:8px; }
.mm-engine-title .mm-as-head, .mm-engine-title .mm-as-quiet { margin:0; }
.mm-as-editor-footer > [hidden] { display:none !important; }
.mm-agent-sheet-editor select.modal-input, .mm-engine-dialog select.modal-input {
  appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%238a96a6' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.mm-engine-account-name { align-self:flex-start; padding:0; border:0; background:none; color:var(--text); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
.mm-engine-account-name:hover { text-decoration:underline; }

/* Theme-aware selection surfaces replace OS dropdown popups in AI editing. */
.mm-engine-primary-section h4 { margin:0 0 16px; font-size:14px; font-weight:600; color:var(--text); }
.mm-engine-primary { display:flex; align-items:center; gap:16px; padding:22px; border:1px solid var(--border); border-radius:10px; background:var(--mm-card, var(--panel)); }
.mm-engine-primary-name { font-size:16px; font-weight:600; line-height:1.4; }
.mm-engine-provider-mark { display:grid; place-items:center; width:40px; height:40px; flex:none; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); color:var(--text-dim); font-size:18px; font-weight:600; }
.mm-engine-choice-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:6px; overflow-wrap:anywhere; }
.mm-engine-choice-title { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--text); font-size:14px; font-weight:600; line-height:1.4; }
.mm-engine-choice-description { color:var(--text-dim); font-size:13px; line-height:1.5; font-weight:400; }
.mm-engine-choice-badge { flex:none; padding:3px 7px; border-radius:5px; background:var(--panel-2); color:var(--text-dim); font-size:11px; line-height:1.4; font-weight:500; }
.mm-engine-choices, .mm-engine-account-list { display:flex; flex-direction:column; gap:10px; }
.mm-engine-choice, .mm-engine-account-option { display:flex; align-items:center; gap:14px; box-sizing:border-box; width:100%; padding:17px 18px; border:1px solid var(--border); border-radius:9px; background:var(--panel); color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.mm-engine-choice:has(input:checked), .mm-engine-account-option[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft, var(--panel-2)); }
.mm-engine-choice:hover:not(:has(input:disabled)), .mm-engine-account-option:hover:not(:disabled) { border-color:var(--text-dim); background:var(--panel-2); }
.mm-engine-choice:focus-within, .mm-engine-account-option:focus-visible, .mm-engine-add:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.mm-engine-choice:has(input:disabled), .mm-engine-account-option:disabled { cursor:not-allowed; opacity:.6; }
.mm-engine-choice input[type="radio"] { appearance:none; box-sizing:border-box; width:18px; height:18px; flex:none; margin:0; border:1.5px solid var(--text-dim); border-radius:50%; background:var(--panel); }
.mm-engine-choice input[type="radio"]:checked { border:5px solid var(--accent); }
.mm-engine-choice input[type="radio"]:focus { outline:0; }
.mm-engine-add { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:44px; margin-top:16px; padding:12px 18px; border:1px solid var(--accent); border-radius:8px; background:var(--accent-soft); color:var(--accent-ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.mm-engine-add span { font-size:20px; line-height:1; }
.mm-engine-add:hover:not(:disabled) { background:var(--panel-2); color:var(--accent-ink); border-color:var(--accent); }
.mm-engine-add:disabled { opacity:.55; cursor:not-allowed; }
.mm-as-engine-main { gap:28px; }
.mm-engine-dialog .modal-head { padding:28px 28px 0; }
.mm-engine-dialog .modal-head h3 { font-size:18px; font-weight:600; }
.mm-engine-dialog-body { padding:24px 28px 28px; }
.mm-engine-dialog-body > div > [hidden] { display:none !important; }
.mm-engine-dialog .modal-actions { gap:10px; }
@media (max-width:540px) {
  .mm-engine-primary { padding:18px; gap:12px; flex-wrap:wrap; }
  .mm-engine-primary > .btn { margin-left:auto; }
  .mm-engine-choice, .mm-engine-account-option { padding:16px; gap:12px; }
  .mm-engine-dialog .modal-head { padding:22px 20px 0; }
  .mm-engine-dialog-body { padding:20px; }
  .mm-engine-dialog .modal-actions { padding:16px 20px; }
}

/* "Run here" (components/runhere.js): move an agent to this computer. */
.mm-rh { gap: 12px; }
.mm-rh-lead { margin: 0; color: var(--text-2, var(--muted)); line-height: 1.5; }
.mm-rh-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.mm-rh-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.mm-rh-step.is-ok .mm-rh-dot { background: color-mix(in srgb, #2fb36b 20%, transparent); color: #2fb36b; }
.mm-rh-step.is-need .mm-rh-dot { background: color-mix(in srgb, #e5a322 22%, transparent); color: #c98a12; }
.mm-rh-text { flex: 1; min-width: 0; }
.mm-rh-title { font-weight: 600; }
.mm-rh-detail { display: block; color: var(--text-2, var(--muted)); font-size: 12.5px; line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; }
.mm-rh-select { max-width: 220px; align-self: center; }
.mm-rh-modes { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mm-rh-modes legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.mm-rh-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.mm-rh-choice:has(input:checked) { border-color: var(--accent, #3c64d8); }
.mm-rh-choice b { display: block; }
.mm-rh-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-rh-note { margin: 0; flex-basis: 100%; color: var(--text-2, var(--muted)); font-size: 12.5px; min-height: 1em; }

/* Settings → This computer → Name (components/computername.js). */
.mm-cn { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.mm-cn-label { font-weight: 600; }
.mm-cn-row { display: flex; gap: 10px; }
.mm-cn-input { flex: 1; min-width: 0; }

/* Where the agent runs (agentboard.js whereFacts): this computer is marked. */
.mm-ab-ws { display: flex; align-items: center; gap: 8px; }
.mm-ab-ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-ab-where { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel-2); white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis;
  text-transform: none; letter-spacing: 0; }
.mm-ab-where.is-here { color: #2f9e62; background: color-mix(in srgb, #2fb36b 16%, transparent); }
.mm-ab-sub .mm-ab-where { margin-left: 6px; }