/* The Team page (T1 "Front desk", 2026-09-28) and its setup wizard (W1).
   Design: the Team page canvas — Main.dc.html (T1), S1/S2/S3, W1-*, R1.

   Every colour is one of the app's own tokens (app.css) or the presence
   colour `--pc` (presence.css), so light and dark come for free and a state
   reads the same green, blue, violet and red it does everywhere else.
   Sizes are fixed where content arrives late — the desk, the focus card and
   the team card have their final heights from the skeleton's first frame. */

.mm-tm { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 1180px; padding: 28px 32px 40px; box-sizing: border-box; }
.mm-tm [hidden] { display: none !important; }
.mm-tm-people { padding: 18px 20px; }
.mm-tm-people-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mm-tm-people-head h2 { font-size: 14px; margin: 0; }
.mm-tm-people-count { color: var(--text-dim); font-weight: 400; }
.mm-tm-people a { text-decoration: none; font-size: 12px; }
.mm-tm-people-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 14px; }
.mm-tm-person { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: 10px; border-left: 2px solid var(--accent); }
.mm-tm-person strong { color: var(--text); overflow-wrap: anywhere; }
.mm-tm-person span { color: var(--text-dim); overflow-wrap: anywhere; }

/* -- the Team section: Overview | People | Agents (components/teamsection.js) ----
   One rail item, three tabs; the tab is the route. The strip has one fixed
   height and the page under it keeps its own layout, with its top padding
   taken by the strip and its sides lined up with the tabs. */
.mm-teamsec { display: flex; flex-direction: column; min-width: 0; }
.mm-teamsec-tabs { display: flex; align-items: flex-end; gap: 22px; height: 52px; flex: none; box-sizing: border-box;
  padding: 0 32px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.mm-teamsec-tabs::-webkit-scrollbar { display: none; }
.mm-teamsec-tab { display: inline-flex; align-items: center; height: 40px; padding: 0 2px; margin-bottom: -1px; flex: none;
  border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 13.5px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.mm-teamsec-tab:hover { color: var(--text); }
.mm-teamsec-tab[aria-current="page"] { color: var(--text); font-weight: 650; border-bottom-color: var(--accent); }
.mm-teamsec-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.mm-teamsec-body { min-width: 0; }
.mm-teamsec .mm-tm, .mm-teamsec .mm-ab { padding-top: 22px; }
@media (max-width: 720px) {
  .mm-teamsec-tabs { padding: 0 20px; }
  .mm-teamsec .mm-tm, .mm-teamsec .mm-ab { padding-left: 20px; padding-right: 20px; padding-top: 18px; }
}
@media (max-width: 480px) {
  .mm-teamsec-tabs { padding: 0 16px; gap: 18px; height: 46px; }
  .mm-teamsec .mm-tm, .mm-teamsec .mm-ab { padding-left: 16px; padding-right: 16px; }
}

/* A viewer who is not a workspace admin reads the team; one quiet line says
   who changes it. */
.mm-tm-readonly { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-dim); font-size: 12px; text-align: right; }
.mm-tm-readonly > svg { flex: none; }
.mm-tm-hero-note { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-dim); font-size: 13px; }

/* -- header ------------------------------------------------------------ */
.mm-tm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.mm-tm-heading { min-width: 0; }
.mm-tm-title { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.025em; line-height: 34px; }
.mm-tm-sub { margin: 4px 0 0; min-height: 18px; color: var(--text-dim); font-size: 13px; overflow-wrap: anywhere; }
.mm-tm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-tm-tool { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mm-tm-more { width: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* -- S3's banner: a computer is off ------------------------------------ */
.mm-tm-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); color: var(--text); font-size: 13.5px; }
.mm-tm-banner > svg { color: var(--warn); flex: none; }
.mm-tm-banner-text { flex: 1 1 240px; min-width: 0; }
.mm-tm-banner-asks { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-tm-banner-asks .btn { display: inline-flex; align-items: center; gap: 6px; }

/* -- cards ------------------------------------------------------------- */
.mm-tm-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mm-tm-card { min-width: 0; box-sizing: border-box; padding: 20px 22px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--edge-hi); }
.mm-tm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; min-width: 0; }
.mm-tm-label { margin: 0; color: var(--text-dim); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.mm-tm-count { letter-spacing: normal; }
.mm-tm-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.mm-tm-link:hover { text-decoration: underline; }
.mm-tm-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .mm-tm-grid { grid-template-columns: minmax(0, 1fr); } }
/* Team size does not change the wide two-column layout. */
.mm-tm[data-size="large"] .mm-tm-focus { min-height: 174px; }
.mm-tm-members { display: flex; flex-direction: column; gap: 8px; }
.mm-tm-member { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mm-tm-member:last-child { border-bottom: 0; padding-bottom: 0; }
.mm-tm-row-tasks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 4px 46px; }
.mm-tm-row-checkout { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mm-tm-row-task { color: var(--accent-ink); font-size: 13px; font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; text-decoration: none; }
.mm-tm-row-task:hover { text-decoration: underline; }
.mm-tm-row-task:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mm-tm-row-activity { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.mm-tm-desk-tasks { margin-left: 0; }
.mm-tm-row-health { color: var(--text-dim); font-size: 12.5px; overflow-wrap: anywhere; }
.mm-tm-row-health[data-flag="down"] { color: var(--danger); }

/* -- the Maestro desk -------------------------------------------------- */
.mm-tm-desk { min-height: 232px; display: flex; flex-direction: column; gap: 14px; }
.mm-tm-maestro { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.mm-tm-maestro-face { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 22px; }
.mm-tm-maestro-face:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mm-tm-maestro-face .avatar { border-radius: 18px; }
.mm-tm-maestro-info { min-width: 0; flex: 1; }
.mm-tm-maestro-line { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.mm-tm-maestro-name { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.015em; line-height: 28px; overflow-wrap: anywhere; }
.mm-tm-maestro-role { color: var(--text-dim); font-size: 13px; }
.mm-tm-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--pc, var(--text-dim)); font-size: 13px; font-weight: 550; }
.mm-tm-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc, var(--text-dim)); }
.mm-tm-maestro-desc { margin: 6px 0 0; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.mm-tm-computer { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--text-dim); font-size: 12.5px; }
.mm-tm-computer-icon { display: inline-flex; }
.mm-tm-computer[data-kind="laptop"] { color: var(--warn); }
.mm-tm-computer[data-kind="offline"] { color: var(--danger); }
.mm-tm-ask { position: relative; display: flex; align-items: center; min-width: 0; }
.mm-tm-ask-input { width: 100%; min-width: 0; height: 46px; box-sizing: border-box; padding: 0 52px 0 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.mm-tm-ask-input::placeholder { color: var(--text-dim); }
.mm-tm-ask-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.mm-tm-ask-input:disabled { opacity: .6; cursor: not-allowed; }
.mm-tm-ask-send { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: var(--accent-fill); color: var(--on-accent); cursor: pointer; }
.mm-tm-ask-send:disabled { opacity: .45; cursor: not-allowed; }
.mm-tm-ask-note { margin: -6px 0 0; color: var(--text-dim); font-size: 12.5px; }
.mm-tm-examples { display: flex; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.mm-tm-example { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.mm-tm-example > span { display: inline-flex; color: var(--text-dim); }
.mm-tm-example:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.mm-tm-example:disabled { opacity: .55; cursor: not-allowed; }

/* -- S1: meet your Maestro --------------------------------------------- */
.mm-tm-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 36px 0 8px; }
.mm-tm-hero-mark { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); }
.mm-tm-hero h2 { margin: 6px 0 0; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.mm-tm-hero-text { margin: 0; max-width: 520px; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.mm-tm-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.mm-tm-cta { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; }
.mm-tm-facts { width: 100%; margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; padding: 22px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid var(--border); background: var(--panel); text-align: left; }
@media (max-width: 980px) { .mm-tm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mm-tm-facts { grid-template-columns: minmax(0, 1fr); } }
.mm-tm-fact { display: flex; gap: 12px; min-width: 0; font-size: 12.5px; line-height: 1.45; }
.mm-tm-fact > span:last-child { display: flex; flex-direction: column; gap: 2px; color: var(--text-dim); min-width: 0; }
.mm-tm-fact strong { color: var(--text); font-size: 13px; font-weight: 600; }
.mm-tm-fact-icon { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); }

/* -- S2: the Maestro needs a team -------------------------------------- */
.mm-tm-needs { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.mm-tm-needs-text { flex: 1 1 320px; min-width: 0; }
.mm-tm-needs h3 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.mm-tm-needs p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.mm-tm-needs-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.mm-tm-needs-hint { color: var(--text-dim); font-size: 12px; }

/* -- focus and idle risk ----------------------------------------------- */
.mm-tm-focus { min-height: 214px; }
.mm-tm-focus-title { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.mm-tm-focus-name { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.mm-tm-focus-meta { color: var(--text-dim); font-size: 12.5px; }
.mm-tm-focus-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.mm-tm-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--panel-2); }
.mm-tm-seg { display: block; height: 100%; width: 0; transition: width .4s ease; }
.mm-tm-seg-done { background: var(--ok); }
.mm-tm-seg-review { background: var(--warn); }
.mm-tm-seg-progress { background: var(--accent); }
.mm-tm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.mm-tm-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-tm-stat strong { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 28px; }
.mm-tm-stat span { color: var(--text-dim); font-size: 12px; }
.mm-tm-idle { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--text-dim); font-size: 13px; }
.mm-tm-idle::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.mm-tm-idle[data-tone="risk"] { color: var(--warn); }
.mm-tm-idle[data-tone="risk"]::before { background: var(--warn); }
.mm-tm-idle[data-tone="quiet"]::before { background: var(--text-dim); }
.mm-tm-focus-empty { margin: 12px 0 0; color: var(--text-dim); font-size: 13px; }
.mm-tm-focus[data-phase="none"] .mm-tm-bar, .mm-tm-focus[data-phase="none"] .mm-tm-stats,
.mm-tm-focus[data-phase="failed"] .mm-tm-bar, .mm-tm-focus[data-phase="failed"] .mm-tm-stats { opacity: .35; }

/* Today's work stays inside the focus card, with inline task numbers. */
.mm-tm-focus-work { display: grid; gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.mm-tm-focus-work[hidden] { display: none; }
.mm-tm-task-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.mm-tm-task-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 650; }
.mm-tm-task-head h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.is-next > .mm-tm-task-head h3::before { background: var(--ok); }
.mm-tm-task-count { color: var(--text-dim); font-weight: 450; font-variant-numeric: tabular-nums; }
.mm-tm-task-list { display: grid; gap: 7px; }
.mm-tm-task { min-width: 0; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--panel-2); }
.mm-tm-task-line { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.mm-tm-task-title { color: var(--text); font-weight: 550; text-decoration: none; }
.mm-tm-task-title:hover { color: var(--accent); text-decoration: underline; }
.mm-tm-task-id { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; }
.mm-tm-task-id:hover { text-decoration: underline; }
.mm-tm-task-id:focus-visible, .mm-tm-task-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.mm-tm-task-status { display: block; margin-top: 4px; color: var(--text-dim); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.mm-tm-task-status[data-tone="active"] { color: var(--accent); }
.mm-tm-task-status[data-tone="stale"] { color: var(--warn); }
.mm-tm-task-status[data-tone="ready"] { color: var(--ok); }
.mm-tm-task-empty { margin: 0; color: var(--text-dim); font-size: 12.5px; }
.mm-tm-task-empty[hidden] { display: none; }

/* -- the team, by computer and owner ----------------------------------- */
.mm-tm-team { min-height: 260px; }
.mm-tm-groups { display: flex; flex-direction: column; gap: 14px; }
.mm-tm-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; font-size: 12.5px; color: var(--text-dim); }
.mm-tm-group-icon { display: inline-flex; flex: none; }
.mm-tm-group-name { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tm-group-owner { white-space: nowrap; }
.mm-tm-group-kind { white-space: nowrap; }
.mm-tm-group-kind:not(:empty)::before { content: "· "; color: var(--text-dim); }
.mm-tm-group[data-kind="always_on"] .mm-tm-group-kind { color: var(--ok); }
.mm-tm-group[data-kind="laptop"] .mm-tm-group-kind { color: var(--warn); }
.mm-tm-group[data-kind="offline"] .mm-tm-group-kind { color: var(--danger); }
.mm-tm-group[data-kind="offline"] .mm-tm-rows { opacity: .72; }
/* #6608: when the computer was last heard from; red once it has gone quiet. */
.mm-tm-group-heard { white-space: nowrap; }
.mm-tm-group-heard:not(:empty)::before { content: "· "; color: var(--text-dim); }
.mm-tm-group[data-flag="down"] .mm-tm-group-heard, .mm-tm-computer[data-flag="down"] { color: var(--danger); }
.mm-tm-group-note { margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; background: var(--panel-2); color: var(--text-dim); font-size: 12.5px; }
.mm-tm-rows { display: flex; flex-direction: column; margin-top: 4px; }
.mm-tm-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px 6px 6px 2px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mm-tm-row:hover { background: var(--panel-2); }
.mm-tm-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mm-tm-row-person { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mm-tm-row-who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mm-tm-row-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-tm-row-role { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mm-tm-row-status { display: flex; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--text-dim); }
.mm-tm-row-word { flex: none; color: var(--pc, var(--text-dim)); font-weight: 550; }
.mm-tm-row-line { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-tm-row-age { flex: none; white-space: nowrap; }
/* #6608: the asks waiting and a stuck request, under the state line. */
.mm-tm-row-extra { min-width: 0; margin: 0; font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.mm-tm-row[data-flag="stuck"] .mm-tm-row-extra, .mm-tm-desk[data-flag="stuck"] .mm-tm-maestro-extra { color: var(--warn); }
.mm-tm-chip[data-flag="stuck"] { border-color: var(--warn); }

.mm-tm-empty { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* -- not on the team: one compact row of the workspace's other agents -- */
.mm-tm-outside .mm-tm-card-head { margin-bottom: 4px; }
.mm-tm-outside-note { margin: 0 0 12px; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.mm-tm-outside-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.mm-tm-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; height: 40px; box-sizing: border-box;
  padding: 0 4px 0 2px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); }
.mm-tm-chip-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 6px 0 4px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mm-tm-chip-who:hover { background: var(--panel); }
.mm-tm-chip-who:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.mm-tm-chip-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mm-tm-chip-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-tm-chip-role { color: var(--text-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mm-tm-chip-add { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 28px; padding: 0 9px; }
.mm-tm-chip-add:disabled { opacity: .5; cursor: not-allowed; }

/* -- skeletons: grey shapes at the final sizes ------------------------- */
.mm-tm-skel { display: block; border-radius: 6px; background: var(--panel-2); }
.mm-tm-skeleton .mm-tm-skel, .mm-tw-skel { animation: mm-tm-pulse 1.4s ease-in-out infinite; }
@keyframes mm-tm-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mm-tm-skeleton .mm-tm-skel, .mm-tw-skel { animation: none; } }
.mm-tm-skel-big { width: 64px; height: 64px; border-radius: 18px; flex: none; }
.mm-tm-skel-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; padding-top: 4px; }
.mm-tm-skel-title { width: 180px; max-width: 70%; height: 20px; }
.mm-tm-skel-a { width: 70%; height: 12px; }
.mm-tm-skel-b { width: 40%; height: 12px; }
.mm-tm-skel-ask { height: 46px; border-radius: 10px; }
.mm-tm-skel-chip { height: 32px; border-radius: 8px; }
.mm-tm-skel-bar { height: 8px; margin: 18px 0 16px; border-radius: 99px; }
.mm-tm-skel-stat { height: 44px; }
.mm-tm-skel-row, .mm-tm-skel-role { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.mm-tm-skel-face { width: 34px; height: 34px; border-radius: 11px; flex: none; }
.mm-tm-skel-role .mm-tm-skel-face { display: none; }
.mm-tm-team.mm-tm-skeleton > .mm-tm-skel-a { width: 120px; height: 12px; margin-bottom: 8px; }
.mm-tm-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mm-tm-error p { margin: 0; }

/* -- dialogs: Add a role, Pause, Change focus -------------------------- */
.mm-tm-dialog { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 16px; min-width: 0; overflow-y: auto; }
.mm-tm-dialog p { margin: 0; line-height: 1.5; font-size: 13.5px; }
.mm-tm-dialog-lead { color: var(--text-dim); }
.mm-tm-roles { display: flex; flex-direction: column; gap: 8px; min-height: 280px; }
.mm-tm-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .mm-tm-role-grid { grid-template-columns: minmax(0, 1fr); } }
.mm-tm-role { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mm-tm-role:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.mm-tm-role strong { font-size: 13.5px; font-weight: 600; }
.mm-tm-role span { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
.mm-tm-roles .mm-tm-label { margin-top: 6px; }

/* -- the setup wizard (W1) --------------------------------------------- */
.mm-tw { min-width: 0; }
.mm-tw-steps { display: flex; gap: 6px; padding: 2px 20px 0; }
.mm-tw-step { flex: 1; height: 3px; border-radius: 99px; background: var(--panel-2); }
.mm-tw-step.done, .mm-tw-step.now { background: var(--accent); }
.mm-tw-step-label { display: block; padding: 8px 20px 0; color: var(--text-dim); font-size: 12px; }
.mm-tw-body { padding: 6px 20px 8px; display: flex; flex-direction: column; gap: 12px; }
.mm-tw-title { margin: 6px 0 0; font-size: 19px; font-weight: 650; letter-spacing: -.015em; outline: none; }
.mm-tw-lead { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.mm-tw-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mm-tw-label { margin: 6px 0 0; color: var(--text-dim); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.mm-tw-name-row { display: flex; align-items: flex-end; gap: 14px; }
.mm-tw-face .avatar { border-radius: 14px; }
.mm-tw-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.mm-tw-options { display: flex; flex-direction: column; gap: 8px; }
.mm-tw-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; box-sizing: border-box; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mm-tw-option:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.mm-tw-option.checked { border-color: var(--accent); background: var(--accent-soft); }
.mm-tw-option:disabled { opacity: .55; cursor: not-allowed; }
.mm-tw-option.mm-tw-skel { cursor: default; background: var(--panel-2); border-color: transparent; }
.mm-tw-radio { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text-dim); box-sizing: border-box; }
.mm-tw-option.checked .mm-tw-radio { border: 5px solid var(--accent); }
.mm-tw-tick { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 650; }
.mm-tw-tick.on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.mm-tw-option-icon { flex: none; display: inline-flex; color: var(--text-dim); }
.mm-tw-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mm-tw-option-text strong { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.mm-tw-option-note { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
.mm-tw-option-note.warn { color: var(--warn); }
.mm-tw-option-note.ok { color: var(--ok); }
.mm-tw-option-aside { flex: none; color: var(--text-dim); font-size: 12px; }
.mm-tw-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 11px; border-radius: 8px; background: var(--warn-soft); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.mm-tw-warn > svg { flex: none; color: var(--warn); margin-top: 1px; }
.mm-tw-footnote, .mm-tw-empty { margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.mm-tw-elsewhere { display: flex; gap: 12px; padding: 14px; border-radius: 10px; border: 1px dashed var(--border); background: var(--panel-2); }
.mm-tw-elsewhere strong { font-size: 13.5px; }
.mm-tw-elsewhere p { margin: 4px 0 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.mm-tw-folder { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); }
.mm-tw-folder.chosen { border-color: var(--accent); background: var(--accent-soft); }
.mm-tw-path { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.mm-tw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .mm-tw-tiles { grid-template-columns: minmax(0, 1fr); } }
.mm-tw-tile { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 10px; background: var(--panel-2); font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.mm-tw-tile strong { color: var(--text); font-size: 13px; }
.mm-tw-fixed { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-tw-chip { padding: 4px 9px; border-radius: 7px; background: var(--panel-2); color: var(--text-dim); font-size: 12px; }
.mm-tw-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .mm-tw-roles { grid-template-columns: minmax(0, 1fr); } }
.mm-tw-role { display: flex; flex-direction: column; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); min-width: 0; }
.mm-tw-role-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%; min-width: 0; }
.mm-tw-agent-names { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mm-tw-agent-name { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.mm-tw-agent-name input { width: 100%; min-width: 0; box-sizing: border-box; }
.mm-tw-role.on { border-color: var(--accent); background: var(--accent-soft); }
.mm-tw-role.unavailable { opacity: .6; cursor: not-allowed; }
.mm-tw-role input { margin: 2px 0 0; flex: none; accent-color: var(--accent-fill); }
.mm-tw-count { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; color: var(--text-dim); }
.mm-tw-count-btn { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.mm-tw-count-btn:disabled { opacity: .45; cursor: not-allowed; }
.mm-tw-status { margin: 0; padding: 0 20px; min-height: 18px; color: var(--danger); font-size: 12.5px; }
.mm-tw-actions { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border-soft); }
.mm-tw-hint { flex: 1; min-width: 0; color: var(--text-dim); font-size: 12px; }
.mm-tw-actions [hidden] { display: none !important; }

/* Narrow windows and phones (320 px and up). */
@media (max-width: 640px) {
  .mm-tm { padding: 18px 16px 32px; }
  .mm-tm-title { font-size: 22px; line-height: 28px; }
  .mm-tm-card { padding: 16px; }
  .mm-tm-maestro { gap: 12px; }
  .mm-tm-maestro-face .avatar { width: 48px !important; height: 48px !important; }
  .mm-tm-maestro-name { font-size: 19px; }
  .mm-tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-tm-tool { padding-left: 10px; padding-right: 10px; }
  .mm-tw-hint { display: none; }
  .mm-tw-name-row { align-items: center; }
  .mm-tm-chip { flex: 1 1 100%; justify-content: space-between; }
  .mm-tm-chip-role { display: none; }
}

/* The wizard on a phone: the whole height, a smaller heading, and the
   engineer count on its own line under the role's words. */
@media (max-width: 560px) {
  .modal-card.mm-dlg-wizard.mm-tw-card { height: calc(100dvh - 24px); }
  .mm-tw-title { font-size: 17px; }
  .mm-tw-steps, .mm-tw-step-label, .mm-tw-body, .mm-tw-status { padding-left: 14px; padding-right: 14px; }
  .mm-tw-actions { padding: 10px 14px 14px; flex-wrap: wrap; }
  .mm-tw-role-choice { flex-wrap: wrap; }
  .mm-tw-role .mm-tw-option-text { flex: 1 1 calc(100% - 30px); }
  .mm-tw-count { margin-left: 26px; }
}