/* Compact AI Engine account directory. All colors follow the app theme. */
.mm-accounts {display:flex;flex-direction:column;height:100%;min-height:0;background:var(--panel);color:var(--text)}
.mm-acc-head {display:flex;align-items:center;gap:24px;padding:28px 32px 22px;flex:none;flex-wrap:wrap}
.mm-acc-heading {flex:1;min-width:200px}
.mm-acc-title {margin:0;font-size:25px;font-weight:650;letter-spacing:-.025em}
.mm-acc-subtitle {margin:6px 0 0;color:var(--muted);font-size:13px}
.mm-acc-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mm-acc-toolbar {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 32px 20px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.mm-acc-body {min-height:0;flex:1;overflow:auto;padding:0 32px 28px;display:flex;flex-direction:column;gap:18px}
.mm-acc-request-status {margin:0 32px 20px;padding:12px 16px;color:var(--danger);background:var(--danger-soft);border-radius:6px;font-size:13px}
.mm-acc-request-status[hidden] {display:none}
.mm-acc-engine {min-width:0}
.mm-acc-engine-head {display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:13px}
.mm-acc-version {margin-left:auto;border:0;background:transparent;color:var(--muted);padding:6px;font:inherit;font-size:12px;cursor:pointer}
.mm-acc-version:hover {color:var(--accent-ink);text-decoration:underline}
.mm-acc-grid {display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:8px;overflow:hidden}
.mm-acc-card {display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(210px,2fr) 80px 18px;gap:24px;align-items:center;width:100%;min-height:66px;padding:12px 18px;border:0;border-bottom:1px solid var(--border-soft);background:var(--panel);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.mm-acc-card:last-child {border-bottom:0}
.mm-acc-card:hover {background:var(--panel-2)}
.mm-acc-card > * {min-width:0}
.mm-acc-card:focus-visible {outline:2px solid var(--accent);outline-offset:-3px}
.mm-acc-card-name {color:var(--text);display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.mm-acc-card-sub,.mm-acc-secondary {display:block;font-size:12px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.mm-acc-card-sub {margin-top:3px}
.mm-acc-agent-count {font-size:12px;color:var(--muted)}
.mm-acc-quotas {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 22px}
.mm-acc-quota {display:block;min-width:0}
.mm-acc-quota:only-child {grid-column:1/-1;max-width:300px;width:100%}
.mm-acc-quota-label {display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:6px;color:var(--muted)}
.mm-acc-quota-label strong {font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}
.mm-acc-track {display:block;height:5px;background:var(--border-soft);border-radius:3px;overflow:hidden}
.mm-acc-track > span {display:block;height:100%;background:var(--accent-fill);border-radius:inherit}
.mm-acc-quota.warn .mm-acc-track > span {background:var(--warn)}
.mm-acc-quota.low .mm-acc-track > span {background:var(--danger)}
.mm-acc-quota.warn strong,.mm-acc-limit-note {color:var(--warn)}
.mm-acc-quota.low strong,.mm-acc-secondary.error {color:var(--danger)}
.mm-acc-quotas > .mm-acc-secondary,.mm-acc-limit-note,.mm-acc-connection {grid-column:1/-1;font-size:12px}
.mm-acc-connection {color:var(--text);font-weight:500}
.mm-acc-limit-list {display:flex;flex-direction:column;gap:22px;margin:22px 0}
.mm-acc-limit-list .mm-acc-quota {padding-bottom:20px;border-bottom:1px solid var(--border-soft);max-width:none}
.mm-acc-limit-list .mm-acc-quota-label {font-size:14px}
.mm-acc-limit-list .mm-acc-track {margin:10px 0}
.mm-acc-sheet {display:flex;flex-direction:column;min-height:360px}
.mm-acc-tabs {display:flex;gap:26px;padding:0 26px;border-bottom:1px solid var(--border-soft)}
.mm-acc-tab {padding:15px 0;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:13px;background:transparent;cursor:pointer}
.mm-acc-tab[aria-selected=true] {border-bottom-color:var(--accent);color:var(--text);font-weight:600}
.mm-acc-tab-body {padding:26px;min-height:240px;overflow-wrap:anywhere}
.mm-acc-tab-body h4 {font-size:15px;margin:0 0 18px}
.mm-acc-tab-body > .btn {margin-top:16px;margin-right:12px}
.mm-acc-sheet-foot {padding:18px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--border-soft)}
.mm-acc-history-row,.mm-acc-assignment {display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.mm-acc-history-row time {color:var(--muted);flex:0 0 140px;font-size:12px}
.mm-acc-detail-error {color:var(--danger);font-weight:600;font-size:13px}
@media(max-width:760px){.mm-acc-head{padding:24px 20px 18px}.mm-acc-body{padding:0 20px 24px}.mm-acc-toolbar{margin:0 20px 18px}.mm-acc-card{grid-template-columns:minmax(120px,1.2fr) minmax(160px,2fr) 60px 14px;gap:16px;padding:12px}.mm-acc-quotas{gap:6px 14px}}
@media(max-width:560px){.mm-acc-card{grid-template-columns:1fr 75px 16px}.mm-acc-capacity{grid-column:1/-1;grid-row:2}.mm-acc-agent-count{grid-column:2;grid-row:1;text-align:right}.mm-acc-card > svg{grid-column:3;grid-row:1}.mm-acc-quotas .mm-acc-quota:only-child{max-width:none}.mm-acc-tabs{gap:20px;padding:0 18px}.mm-acc-tab-body{padding:22px 18px}.mm-acc-sheet-foot{padding:16px 18px;flex-wrap:wrap}.mm-acc-history-row{flex-direction:column;gap:6px}.mm-acc-history-row time{flex:auto}}
.mm-model-map { display:flex; flex-direction:column; gap:20px; padding:20px 24px 24px; }
.mm-model-map p { margin:0; line-height:1.55; }
.mm-model-map-intro { font-size:14px; color:var(--text-dim); }
.mm-model-map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mm-model-map-engine { display:inline-flex; gap:18px; align-items:center; justify-content:space-between; min-height:42px; min-width:180px; }
.mm-model-map-stamp { color:var(--muted); font-size:12px; }
.mm-model-map-table-wrap { overflow:auto; border:1px solid var(--border-soft); border-radius:8px; }
.mm-model-map-table { border-collapse:collapse; width:100%; font-size:13px; text-align:left; }
.mm-model-map-table th, .mm-model-map-table td { padding:17px 18px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.mm-model-map-table thead th { background:var(--panel-2); color:var(--text-dim); font-size:12px; font-weight:500; }
.mm-model-map-table tbody th { font-weight:600; }
.mm-model-map-table tr:last-child > * { border-bottom:0; }
.mm-model-map-table code { font-size:12px; overflow-wrap:anywhere; }
.mm-model-map-table td:last-child { white-space:nowrap; }
.mm-model-map-note, .mm-model-map-unavailable { color:var(--text-dim); font-size:12px; }
.mm-model-map-warning { color:var(--warn); font-size:13px; }
.mm-model-map-error { color:var(--danger); font-weight:600; }
.mm-model-map-loading { color:var(--text-dim); padding:24px 0; }
@media (max-width:600px) {
  .mm-model-map { gap:16px; padding:18px 16px 22px; }
  .mm-model-map-table th, .mm-model-map-table td { padding:14px 10px; }
}
/* The signed-out block: the host's own line, the bare command, Copy,
   Open Terminal (the default account only), the paste note. */
.mm-acc-signin {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border-soft); padding-top: 10px;
}
.mm-acc-signin-lead { font-size: 11.5px; color: var(--muted); }
.mm-acc-signin-fix { font-size: 11.5px; color: var(--warn); }
.mm-acc-signin-cmd {
  display: block; font-family: var(--mono); font-size: 10.5px; color: var(--accent-ink);
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: 7px;
  padding: 8px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-acc-signin-actions { display: flex; gap: 8px; }
.mm-acc-signin-note { font-size: 11px; color: var(--text-dim); }

/* -- the footer: the hint, Re-check ----------------------------------------------- */
.mm-acc-foot { display: flex; align-items: center; gap: 12px; }
.mm-acc-hint { flex: 1; font-size: 11px; color: var(--text-dim); }
.mm-acc-recheck { flex: none; }

/* -- the honest browser notice ----------------------------------------------------- */
.mm-acc-notice {
  max-width: 560px; margin: 60px auto; text-align: center;
  color: var(--text-dim); font-size: 13.5px;
}
.mm-acc-download {
  display: inline-block; margin-top: 10px; color: var(--accent);
  text-decoration: none; font-size: 13px;
}
.mm-acc-download:hover { text-decoration: underline; }

/* -- #3933: an adopted account's folder, and the Add sheet's How block ------ */
/* The folder an adopted account was picked from, as the host returned it:
   one mono line under the card's sub-line, clipped, the full path on the
   tooltip. */
.mm-acc-card-folder {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The two radios under the Name field: create (the default) or adopt. */
.mm-acc-how { display: flex; flex-direction: column; gap: 6px; }
.mm-acc-how-opt {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer;
}
.mm-acc-how-opt input { margin: 0; }
.mm-acc-how .bs-help { margin: 0 0 4px 22px; }
/* #4996: the provider recipe is about the account, not about either radio,
   so it keeps the sheet's own left edge. */
.mm-acc-how .mm-acc-provider-help { margin: 8px 0 0; }
.mm-provider-steps { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.mm-provider-steps .is-done { color: var(--text); font-weight: 600; }

/* Actual provider identity stays distinct from the person's friendly label. */
.mm-acc-identity, .mm-acc-shared { margin:6px 0 0; font-size:11px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.mm-acc-identity:empty { display:none; }
.mm-acc-identity-notice, .mm-acc-detail-identity-notice { margin:12px 0 0; padding:9px 10px; border-radius:5px; background:var(--warn-soft); color:var(--warn); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.mm-acc-identity-notice[hidden], .mm-acc-detail-identity-notice:empty { display:none; }
/* #4996: the runtime and the provider, two labelled facts — which is the
   point of them: one card cannot answer both in one line. The VALUE is the
   answer and carries the card's own text colour; the label is the quieter
   half, so a glance reads "Claude Agent" and "z.ai". */
.mm-acc-facts { margin:8px 0 0; font-size:11px; line-height:1.5; }
.mm-acc-facts[hidden] { display:none; }
.mm-acc-facts > div { display:flex; gap:6px; margin:2px 0; overflow-wrap:anywhere; }
.mm-acc-facts dt { color:var(--muted); }
.mm-acc-facts dt::after { content:" ·"; }
.mm-acc-facts dd { margin:0; color:var(--text); }
/* #4994: billing the host cannot read, and an engine that reports no plan
   capacity. Both are statements of fact, not faults — muted, never warned. */
.mm-acc-billing { margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.mm-acc-billing[hidden] { display:none; }
/* Two separate statements, not one paragraph: the billing sentence above it
   answers a different question, and the card's own rhythm is 8px. */
.mm-acc-no-capacity { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.mm-acc-detail-identity { font-size:12px; margin:16px 0; }
.mm-acc-detail-identity > div { display:grid; grid-template-columns:155px minmax(0,1fr); gap:12px; margin:8px 0; }
.mm-acc-detail-identity dt { color:var(--muted); }
.mm-acc-detail-identity dd { margin:0; overflow-wrap:anywhere; }
@media(max-width:450px) { .mm-acc-detail-identity > div { grid-template-columns:1fr; gap:3px; } }
.mm-model-map-engines {display:flex;flex-wrap:wrap;gap:8px}
.mm-model-map-engines [aria-pressed=true] {background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.mm-model-choices {display:flex;flex-direction:column;gap:9px;max-height:340px;overflow:auto}
.mm-model-choice {display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:7px;padding:15px;font-size:13px;cursor:pointer}
.mm-model-choice:has(input:checked) {border-color:var(--accent);background:var(--accent-soft)}
.mm-model-review-row {display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--border-soft);padding:14px 0;font-size:13px}

.mm-acc-card .mm-acc-identity { margin:0; }

/* AI accounts: one list (views/accounts.js, Ian 2026-09-26), grouped by AI
   with each AI's versions in its header ("A2b", Ian 2026-10-03). */
.mm-acl { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
/* Narrower than its columns (a ≤900px window, or Settings' ~640px column at a
   980px window) the list scrolls sideways rather than clipping Status and ⋯. */
.mm-acl { overflow-x: auto; }
.mm-acl-row, .mm-acl-ghead, .mm-acl-gnote { min-width: 764px; }
/* The list lives in .mm-acc-body, a scrolling flex column. A flex item that
   clips its own overflow may shrink below its content, which cut every row
   past the window's height with nothing to scroll (14 accounts showed 7). */
.mm-acl, .mm-acl-foot { flex: none; }
.mm-acl-row {
  /* One line per account. Every text cell truncates with an ellipsis (the
     full text is on its title), and the ⋯ never falls off the edge. */
  display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(130px, 1.45fr) minmax(56px, .5fr) minmax(128px, 1.35fr) minmax(96px, 1.05fr) minmax(92px, 108px) 30px;
  column-gap: 12px; align-items: center; padding: 0 12px 0 16px;
}
.mm-acl-row > * { min-width: 0; }
.mm-acl-head { height: 36px; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mm-acl-head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-acl-tr { height: 36px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 13px; }
.mm-acl-tr[hidden] { display: none; }
.mm-acl-group:last-child > .mm-acl-tr:last-child { border-bottom: 0; }
.mm-acl-tr:hover { background: var(--panel-2); }
.mm-acl-tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mm-acl-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* The AI's header: the fold (chevron, mark, name, counts) and its versions. */
.mm-acl-ghead { border-bottom: 1px solid var(--border-soft); background: var(--panel-2); }
.mm-acl-group.folded:last-child > .mm-acl-ghead { border-bottom: 0; }
.mm-acl-gnote { padding: 6px 12px 8px 44px; font-size: 12.5px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--border-soft); overflow-wrap: anywhere; }
.mm-acl-gnote.stops { color: var(--warn); }
.mm-acl-gnote[hidden] { display: none; }
.mm-acl-group.has-note > .mm-acl-ghead { border-bottom: 0; }
.mm-acl-group.folded:last-child > .mm-acl-gnote { border-bottom: 0; }
.mm-acl-gcell { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 0 12px 0 8px; min-width: 0; overflow: hidden; }
.mm-accounts .mm-acl-fold { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: none; height: 28px; padding: 0 8px; margin: 0;
  border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.mm-accounts .mm-acl-fold:hover { background: var(--border-soft); }
.mm-accounts .mm-acl-fold:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.mm-accounts .mm-acl-fold .icon { color: var(--muted); flex: none; transition: transform .12s ease; }
.mm-accounts .mm-acl-group.folded .mm-acl-fold .icon { transform: rotate(-90deg); }
.mm-acl-mark { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.mm-acl-mark[data-engine="claude-agent"] { color: var(--warn); }
.mm-acl-mark[data-engine="codex"] { color: var(--accent-ink); }
.mm-acl-gname { font-weight: 650; }
.mm-acl-gcount { color: var(--muted); }
.mm-acl-glow { color: var(--warn); font-weight: 600; }
.mm-acl-glow[hidden] { display: none; }
.mm-acl-glow-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.mm-acl-builtin-short { display: none; }
/* A narrow header gives things up in order (accounts.js fitHeader); the CLI
   and its version and the Update/Retry button never go. */
.mm-fit-1 .mm-acl-builtin-long { display: none; }
.mm-fit-1 .mm-acl-builtin-short { display: inline; }
.mm-fit-2 .mm-acl-ver-adapter { display: none; }
.mm-fit-3 .mm-acl-glow-text { display: none; }
.mm-fit-3 .mm-acl-glow-dot { display: inline-block; }
.mm-fit-4 .mm-acl-ver-state.accent { display: none; }
.mm-accounts .mm-fit-4 .mm-acl-fold { flex: 0 1 auto; min-width: 0; }
.mm-fit-4 .mm-acl-gname, .mm-fit-4 .mm-acl-gcount { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mm-acl-ver { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; font-size: 12px; color: var(--muted); }
.mm-acl-ver-text { font-family: var(--mono); white-space: nowrap; flex: none; }
.mm-acl-builtin, .mm-acl-ver-state { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.mm-acl-builtin { cursor: help; }
.mm-acl-ver-state.ok { color: var(--muted); }
.mm-acl-ver-state.ok svg { color: var(--ok); }
.mm-acl-ver-state.accent { color: var(--accent-ink); font-weight: 600; }
.mm-acl-ver-state.danger { color: var(--danger); font-weight: 600; }
.mm-acl-ver-state.warn { color: var(--warn); font-weight: 600; }
.mm-accounts .mm-acl-ver-btn { flex: none; height: 24px; min-height: 0; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: 6px; line-height: 1; }
.mm-accounts .mm-acl-ver-btn.accent { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.mm-accounts .mm-acl-ver-btn.accent:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }

/* The cells. Button rules carry .mm-accounts: the launch screen resets
   every button's font (.mm-launch button), and these must win there. */
.mm-acl-name { min-width: 0; display: flex; align-items: center; }
.mm-accounts .mm-acl-name-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 0; background: none; padding: 3px 6px; margin: -3px -6px;
  border-radius: 7px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--text); cursor: text; text-align: left; }
.mm-accounts .mm-acl-name-btn .icon { color: var(--muted); opacity: 0; flex-shrink: 0; }
.mm-accounts .mm-acl-name-btn:hover { background: var(--panel-2); }
.mm-accounts .mm-acl-tr:hover .mm-acl-name-btn .icon, .mm-accounts .mm-acl-name-btn:focus-visible .icon { opacity: .7; }
.mm-acl-name-text { font-weight: 650; font-size: 13.5px; }
.mm-accounts .mm-acl-name-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; font-weight: 650; padding: 4px 7px; border-radius: 7px;
  border: 1px solid var(--accent); background: var(--bg); color: var(--text); }
.mm-acl-who { color: var(--text); }
.mm-acl-who.warn { color: var(--warn); }
.mm-acl-plan { color: var(--muted); }
.mm-acl-muted { color: var(--muted); font-size: 12.5px; }
/* Left this week: the percent, never a bar; warn at 25, danger at 10. */
.mm-acl-pct { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.mm-acl-pct b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); min-width: 4.4ch; }
.mm-acl-pct .mm-acl-muted { overflow: hidden; text-overflow: ellipsis; }
.mm-acl-pct.warn b { color: var(--warn); }
.mm-acl-pct.low b { color: var(--danger); }
.mm-acl-used { color: var(--text); }
.mm-acl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mm-acl-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.mm-acl-status.ok { color: var(--ok); }
.mm-acl-status.need { color: var(--warn); }
.mm-acl-status.busy { color: var(--muted); }
.mm-accounts .mm-acl-status-btn { color: var(--warn); border: 0; background: none; padding: 3px 6px; margin: -3px -6px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mm-accounts .mm-acl-status-btn:hover { background: var(--warn-soft); }
.mm-accounts .mm-acl-more { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.mm-accounts .mm-acl-more:hover { background: var(--panel-2); color: var(--text); }
.mm-acl-empty { padding: 34px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.mm-acl-empty p { margin: 0; color: var(--muted); }
.mm-acl-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.mm-acl-spacer { flex: 1; }
.mm-accounts .mm-acl-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mm-accounts .mm-acl-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
/* A narrow HOST, not a narrow window: Settings' content column at a 980px
   window is ~640px. There the Plan column steps aside (the account sheet
   still has it) and the reset time rides the percent's title, so every other
   column, the version text and the Update button fit without scrolling; the
   version text truncates first. */
.mm-accounts { container-type: inline-size; }
@container (max-width: 800px) {
  .mm-acl-row { grid-template-columns: minmax(116px, 1.5fr) minmax(108px, 1.5fr) minmax(100px, .7fr) minmax(88px, 1fr) 100px 28px; }
  /* …and the reset time moves to the percent's title and label. The window
     name stays: without it a 5-hour figure reads as the week's. */
  .mm-acl-pct .mm-acl-muted:not(.mm-acl-win) { display: none; }
  .mm-acl-row > :nth-child(3) { display: none; }
  .mm-acl-row, .mm-acl-ghead, .mm-acl-gnote { min-width: 628px; }
}

/* #8456: Manage a headless computer (js/views/headlesscomputer.js). */
.mm-hc-body {gap:28px}
.mm-hc-section {display:flex;flex-direction:column;gap:10px;min-width:0}
.mm-hc-heading {margin:0;font-size:15px;font-weight:650}
.mm-hc-hint {margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.mm-hc-empty {margin:0;color:var(--muted);font-size:13px}
.mm-hc-list {display:flex;flex-direction:column;border:1px solid var(--border-soft);border-radius:8px;overflow:hidden}
.mm-hc-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border-soft);background:var(--panel)}
.mm-hc-row:last-child {border-bottom:0}
.mm-hc-list + .mm-hc-row.mm-hc-add,.mm-hc-add {border:1px dashed var(--border-soft);border-radius:8px}
.mm-hc-main {display:flex;flex-direction:column;gap:3px;min-width:0}
.mm-hc-add .mm-hc-main {flex-direction:row;flex-wrap:wrap;gap:10px}
.mm-hc-name {font-size:14px;font-weight:600;overflow-wrap:anywhere}
.mm-hc-sub {font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.mm-hc-path.is-missing {color:var(--warn)}
.mm-hc-actions {display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.mm-hc-row > :not(.mm-hc-main):not(.mm-hc-actions) {grid-column:1/-1}
.mm-hc-input {min-width:0;max-width:340px;width:100%}
.mm-hc-add .mm-hc-input {flex:1;min-width:160px}
.mm-hc-select {max-width:240px;min-width:0;height:30px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;padding:0 8px}
.mm-hc-status {margin:0;font-size:12px;color:var(--muted)}
.mm-hc-status.is-done {color:var(--ok)}
.mm-hc-status.is-failed {color:var(--danger)}
.mm-hc-warn {margin:0;font-size:12px;color:var(--warn);line-height:1.5}
.mm-hc-warn a {color:inherit;text-decoration:underline}
.mm-hc-signin {display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px;background:var(--panel-2);font-size:13px}
.mm-hc-signin p {margin:0;line-height:1.5}
.mm-hc-signin.is-failed,.mm-hc-signin.is-abandoned {color:var(--danger)}
.mm-hc-link {color:var(--accent-ink);overflow-wrap:anywhere}
.mm-hc-code {align-self:flex-start;font-family:"DM Mono",ui-monospace,monospace;font-size:18px;letter-spacing:.12em;padding:6px 10px;border-radius:6px;background:var(--panel);border:1px solid var(--border-soft)}
.mm-hc-paste {display:flex;gap:8px;flex-wrap:wrap}
.mm-hc-paste .mm-hc-input {flex:1;min-width:160px}
.mm-hc-runhere {display:flex;flex-direction:column;gap:10px;margin-top:6px}
.mm-headless-note {margin:48px auto;max-width:440px;text-align:center;color:var(--muted);font-size:14px;line-height:1.6}
.mm-rh-path {width:100%;min-width:200px}
@media(max-width:560px){.mm-hc-row{grid-template-columns:1fr;padding:12px}.mm-hc-actions{justify-content:flex-start}.mm-hc-select,.mm-hc-input{max-width:none}}

/* #8755: a bounded computer directory; setup forms live in focused dialogs. */
.mm-hc .mm-acc-head {padding:20px 28px 12px}
.mm-hc .mm-acc-title {font-size:22px}
.mm-hc-tabs {flex:none;margin-bottom:20px;padding:0 28px}
.mm-hc-tabs .mm-acc-tab {padding:12px 0}
.mm-hc-body {padding:0 28px 24px;gap:16px}
.mm-hc-body > .mm-hc-section {width:100%;max-width:1000px;gap:14px}
.mm-hc-body:focus {outline:none}
.mm-hc-toolbar {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mm-hc-directory {display:flex;flex-direction:column;gap:12px;min-width:0}
.mm-hc-directory > .mm-hc-input {max-width:380px;height:34px}
.mm-hc-row.mm-hc-compact {display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
.mm-hc-open {display:flex;align-items:center;gap:16px;min-height:56px;width:100%;padding:8px 16px;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.mm-hc-open:hover {background:var(--panel-2)}
.mm-hc-open:focus-visible,.mm-hc-tabs .mm-acc-tab:focus-visible {outline:2px solid var(--accent);outline-offset:-3px}
.mm-hc-open .mm-hc-main {flex:1;overflow:hidden;gap:2px}
.mm-hc-open .mm-hc-name {line-height:20px}
.mm-hc-open .mm-hc-sub {line-height:16px}
.mm-hc-open .mm-hc-name,.mm-hc-open .mm-hc-sub {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-hc-open > .icon {flex:none;color:var(--muted)}
.mm-hc-badge {font-size:12px;color:var(--muted);text-align:right;max-width:44%;overflow-wrap:anywhere}
.mm-hc-compact > .mm-hc-status {padding:0 16px 10px}
.mm-hc-pagination {display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12px;color:var(--muted)}
.mm-hc-pagination > span {margin-right:auto}
.mm-hc-summary {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mm-hc-summary .btn {min-height:70px;white-space:normal;justify-content:flex-start;text-align:left;background:var(--panel-2);font-size:14px;padding:16px}
.mm-hc-notice {margin:0;border:1px solid var(--border-soft);border-radius:8px;padding:14px 16px;font-size:12px;line-height:1.6;color:var(--muted);background:var(--panel-2)}
.mm-hc-dialog {display:flex;flex-direction:column;gap:16px;min-width:0;padding:22px 24px 24px}
.mm-hc-dialog .mm-hc-actions {justify-content:flex-start}
.mm-hc-dialog .modal-label {display:flex;flex-direction:column;gap:8px;margin:0;color:var(--text);font-size:13px}
.mm-hc-dialog .mm-hc-input,.mm-hc-dialog .mm-hc-select {max-width:none;width:100%;height:36px}
.mm-hc-dialog .mm-hc-row {padding:12px;border:1px solid var(--border-soft);border-radius:8px}
.mm-hc-dialog .mm-hc-row.mm-hc-compact {padding:0;border:0;border-bottom:1px solid var(--border-soft);border-radius:0}
.mm-hc-dialog .mm-hc-row.mm-hc-compact:last-child {border-bottom:0}
.mm-hc-dialog .mm-hc-signin .mm-hc-hint {color:inherit}
.mm-hc-fact {display:flex;gap:18px;align-items:baseline;font-size:13px}
.mm-hc-fact strong {font-weight:600}
.mm-hc-fact span {color:var(--muted)}
@media(max-width:560px) {
  .mm-hc .mm-acc-head {padding:18px 18px 8px}
  .mm-hc-tabs {padding:0 18px;margin-bottom:16px}
  .mm-hc-body {padding:0 18px 20px}
  .mm-hc-summary {grid-template-columns:1fr;gap:8px}
  .mm-hc-summary .btn {min-height:54px;padding:12px}
  .mm-hc-open {gap:10px;padding:11px 12px;min-height:62px}
  .mm-hc-badge {font-size:11px;max-width:35%}
  .mm-hc-dialog {padding:18px;gap:14px}
  .mm-hc-dialog .mm-hc-row {grid-template-columns:1fr}
}

.mm-hc-section-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}