/* The Team focus panel (#4998) — the column beside every conversation, and
   the slim strip it folds to.

   Tokens only. Every colour in the approved artboards (A, B, E) is the DARK
   value of a token chat.css already defines in BOTH of its theme blocks,
   plus --review / --review-soft from the portal's app.css and --mono for the
   item ids, so the light theme needs no new token and no second palette.
   The panel's SEAT in the grid, the band toggle and the phone-width rule
   live in chat.css with the rest of the layout; everything below is the
   panel's own inside. */

#mm-focus {
  width: 264px; flex: none; min-width: 0; min-height: 0;
  background: var(--panel); border-left: 1px solid var(--border);
  overflow: hidden;
}
#mm-focus.is-folded { width: 48px; }
/* The light theme's two contrast rules (no new token, nothing app-wide
   moved). First: --text-dim is this app's dim ink and reads 5.7:1 on the
   dark artboard's panel, but only ~3:1 on white, under the 4.5:1 floor for
   the panel's small secondary text — owners, counts, section heads,
   reasons. Light re-values the token for the panel's subtree, exactly as
   the Settings rows already do inline.

   Second: --ok is ~3.3:1 on white, which is fine for a DOT (a non-text
   indicator needs 3:1) and not for a WORD. In light the status words
   "running" and "ready" take the panel's secondary ink and keep their dot
   green, so the signal survives at full legibility; dark keeps the green
   word the artboard drew. */
:root[data-theme="light"] #mm-focus,
:root[data-theme="light"] .mm-focus-card,
:root[data-theme="light"] .pop.mm-focus-popholder { --text-dim: var(--muted); }
:root[data-theme="light"] .mm-focus-live.live,
:root[data-theme="light"] .mm-focus-ready { color: var(--muted); }

.mm-focus-col {
  display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.mm-focus-grow { flex: 1; min-width: 0; }

/* -- the workspace this panel reads from (#8573) ----------------------------
   A button above the head: the workspace's tile, its name and a caret. It
   opens the rail's switcher, so a pick opens that workspace for the whole
   app. Tokens only; the focus ring is the rail tile's (chat.css
   .mm-ws-tile-btn:focus-visible), drawn on the tile. */
.mm-focus-ws {
  flex: none; display: flex; align-items: center; gap: 8px; box-sizing: border-box;
  width: 100%; height: 40px; padding: 0 12px 0 16px;
  border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0;
  background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.mm-focus-ws:hover, .mm-focus-ws[aria-expanded="true"] { background: var(--panel-2); }
.mm-focus-ws:focus-visible { outline: none; }
.mm-focus-ws .mm-ws-tile { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--border); }
.mm-focus-ws[aria-expanded="true"] .mm-ws-tile, .mm-focus-ws:focus-visible .mm-ws-tile {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
}
.mm-focus-ws-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-focus-ws-caret { flex: none; display: inline-flex; color: var(--text-dim); }
/* The strip's copy: the tile alone, centred in the 48px strip, in a block
   the same 40px as the column's button, so the head below keeps its seat
   and the collapse and expand controls share one rectangle. */
.mm-focus-ws-strip {
  flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 100%; height: 40px; border-bottom: 1px solid var(--border-soft);
  margin-bottom: -6px; /* the strip's own gap: the head keeps the column's seat */
}
.mm-focus-ws.is-tile {
  width: auto; height: auto; padding: 6px; border: 0; border-radius: 8px; justify-content: center;
}

/* -- the head: who this focus belongs to ------------------------------------ */
.mm-focus-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--border-soft);
}
.mm-focus-head-label { flex: none; font-size: 13px; font-weight: 650; color: var(--text); }
.mm-focus-team {
  min-width: 0; font-size: 11.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-focus-team-pick {
  display: inline-flex; align-items: center; gap: 4px; max-width: 148px;
  border: 0; border-radius: 6px; padding: 3px 5px; margin-left: -5px;
  background: none; font: inherit; font-size: 11.5px; color: var(--text-dim); cursor: pointer;
}
.mm-focus-team-pick:hover, .mm-focus-team-pick[aria-expanded="true"] {
  background: var(--panel-2); color: var(--text);
}
.mm-focus-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-focus-iconbtn {
  flex: none; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: none; color: var(--text-dim);
  font: inherit; cursor: pointer;
}
.mm-focus-iconbtn:hover { background: var(--panel-2); color: var(--text); }

/* -- the focus block: milestone, countdown, progress ------------------------ */
.mm-focus-target {
  flex: none; display: flex; flex-direction: column; gap: 9px;
  padding: 14px 16px 13px; border-bottom: 1px solid var(--border-soft);
}
.mm-focus-target-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mm-focus-edit { flex: none; }
.mm-focus-name {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 7px;
  background: none; font: inherit; color: var(--text); text-align: left;
  text-decoration: none; cursor: pointer;
}
.mm-focus-name .mm-icon { flex: none; color: var(--accent-ink); }
.mm-focus-name-text {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 650; color: var(--text);
  overflow-wrap: anywhere; white-space: normal; line-height: 1.45;
}
button.mm-focus-name:hover, a.mm-focus-name:hover, .mm-focus-name[aria-expanded="true"] {
  background: var(--panel-2);
}
.mm-focus-name-plain { cursor: default; }
.mm-focus-pace { display: flex; flex-direction: column; gap: 9px; }
.mm-focus-facts {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-dim);
}
.mm-focus-countdown {
  flex: none; padding: 1px 6px; border-radius: 5px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  background: var(--accent-soft); color: var(--accent-ink);
}
.mm-focus-countdown.at-risk { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.mm-focus-of { flex: none; color: var(--muted); }
.mm-focus-bar {
  display: flex; gap: 2px; height: 6px; border-radius: 3px;
  overflow: hidden; background: var(--panel-2);
}
.mm-focus-seg { height: 6px; }
.mm-focus-seg.ok { background: var(--ok); }
.mm-focus-seg.review { background: var(--review); }
.mm-focus-seg.build { background: var(--accent); }
.mm-focus-legend {
  display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 3px;
  font-size: 11.5px; line-height: 16px; color: var(--text-dim);
}
.mm-focus-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.mm-focus-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--text-dim); }
.mm-focus-dot.ok { background: var(--ok); }
.mm-focus-dot.review { background: var(--review); }
.mm-focus-dot.accent, .mm-focus-dot.build { background: var(--accent); }
.mm-focus-dot.warn { background: var(--warn); }
.mm-focus-dot.neutral { background: var(--muted); }
.mm-focus-dot.hollow { background: none; box-shadow: inset 0 0 0 1.5px var(--text-dim); }
/* #5094 B.7: the Critical section's dot. Solid danger — this section leads
   the panel and must not read as one more neutral heading. */
.mm-focus-dot.critical { background: var(--danger); }
.mm-focus-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }
.mm-focus-issue { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--warn); }
.mm-focus-choose {
  align-self: flex-start; border: 1px solid var(--border); border-radius: 7px;
  padding: 4px 10px; background: var(--mm-card); font: inherit; font-size: 12px;
  color: var(--accent-ink); cursor: pointer;
}
.mm-focus-choose:hover { border-color: var(--accent); }

/* -- the sections ----------------------------------------------------------- */
.mm-focus-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 6px; }
.mm-focus-block { display: block; }
.mm-focus-sec {
  display: flex; align-items: center; gap: 7px; padding: 12px 8px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim);
}
.mm-focus-count { letter-spacing: 0; font-weight: 500; }
.mm-focus-row {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 8px;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mm-focus-row:hover { background: var(--panel-2); }
.mm-focus-row-top { display: flex; gap: 7px; align-items: baseline; width: 100%; min-width: 0; }
.mm-focus-id { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.mm-focus-title {
  flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Two-line rows clamp instead of truncating: a work item's first words are
   rarely enough to tell two of them apart. */
.mm-focus-row.two .mm-focus-title {
  white-space: normal; max-height: 36px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mm-focus-row-meta {
  display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%;
  font-size: 11.5px; line-height: 16px; color: var(--text-dim);
  overflow: hidden; white-space: nowrap;
}
.mm-focus-sep { color: var(--text-dim); }
.mm-focus-owners { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.mm-focus-owners .avatar { flex: none; border-radius: 5px; }
.mm-focus-owner-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mm-focus-owners.is-quiet, .mm-focus-owners.is-nobody { color: var(--muted); opacity: .75; }
.mm-focus-live { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mm-focus-live.live { color: var(--ok); }
.mm-focus-live.live .mm-focus-dot { background: var(--ok); }
.mm-focus-live.quiet { color: var(--text-dim); }
.mm-focus-live.quiet .mm-focus-dot { background: none; box-shadow: inset 0 0 0 1.5px var(--text-dim); }
.mm-focus-chip {
  flex: none; padding: 0 6px; border-radius: 5px; letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 650; line-height: 16px;
}
.mm-focus-ready { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--ok); }
.mm-focus-blocked { color: var(--warn); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mm-focus-morerow { display: flex; align-items: center; gap: 8px; padding: 4px 8px 2px; }
.mm-focus-more {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--accent-ink); cursor: pointer; text-align: left;
}
.mm-focus-more:hover { color: var(--text); }
.mm-focus-competing {
  display: inline-flex; align-items: center; gap: 5px; border: 0; padding: 0;
  background: none; font: inherit; font-size: 12px; color: var(--warn); cursor: pointer;
}
.mm-focus-competing:hover { color: var(--text); }

/* -- the folded strip (artboard B) ------------------------------------------ */
.mm-focus-strip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; padding: 0;
}
.mm-focus-strip .mm-focus-head { box-sizing: border-box; width: 100%; justify-content: flex-end; padding-inline: 0 10px; }
.mm-focus-glyphs { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Every glyph is a real button whose accessible name carries its number —
   the ring, the faces and the pills are the picture of it, not the fact. */
.mm-focus-glyph {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 40px; padding: 6px 0; border: 0; border-radius: 10px;
  background: none; font: inherit; color: inherit; cursor: pointer;
}
.mm-focus-glyph:hover, .mm-focus-glyph[aria-expanded="true"] { background: var(--panel-2); }
.mm-focus-glyph-word {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
}
/* "CRITICAL" is eight characters — the longest word on the strip, and it
   does not fit the 40px glyph at the tracking the others use (BUILD, NEXT,
   REVIEW are five or six). Tightened just for this one so the word is
   READ rather than clipped: the strip is 48px, and at this size it lands
   inside it. Shortening the word was the alternative and it is worse —
   "Critical" is the name of the thing (#5094). */
.mm-focus-glyph[data-glyph="critical"] .mm-focus-glyph-word {
  font-size: 9px; letter-spacing: .01em;
}
.mm-focus-rule { width: 28px; height: 1px; margin: 2px 0; background: var(--border); flex: none; }
.mm-focus-ringbox {
  position: relative; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mm-focus-ring { position: absolute; left: 0; top: 0; }
.mm-focus-ring-track { fill: none; stroke: var(--border); stroke-width: 3; }
.mm-focus-ring-arc { fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; }
.mm-focus-ringnum { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--text); }
.mm-focus-ringnum.at-risk { color: var(--warn); }
.mm-focus-ringbox .mm-icon { color: var(--accent-ink); }
.mm-focus-stack { position: relative; display: inline-flex; flex-direction: column; gap: 3px; }
.mm-focus-stack .avatar { border-radius: 6px; }
.mm-focus-more-faces {
  width: 22px; height: 16px; border-radius: 5px; background: var(--panel-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--text-dim);
}
/* ONE dot for the whole group: somebody on this team is running right now. */
.mm-focus-livedot {
  position: absolute; right: -3px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--panel);
}
.mm-focus-pill {
  min-width: 30px; height: 24px; padding: 0 6px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 650;
}
.mm-focus-pill.review { background: var(--review-soft); color: var(--review); }
.mm-focus-pill.accent, .mm-focus-pill.build { background: var(--accent-soft); color: var(--accent-ink); }
/* The folded strip's Critical count (#5094 B.7). SOLID, not the soft wash
   the other pills use: on a 48px strip this is the one number that means
   "an incident", and a wash would sit at the same weight as Review and
   Next. Filled and inked with the danger pair, which carries in both
   themes — --danger alone is a light pink in dark and would take white at
   2.6:1. */
.mm-focus-pill.critical { background: var(--danger-fill); color: var(--on-danger); font-weight: 700; }

/* -- the strip's floating card (artboard B) --------------------------------- */
/* The panel's OWN positioned node, never a popover: the change-focus dialog
   opens from inside it, and dom.js's popover is a singleton that closes
   whatever is open first. It floats over the conversation, so #mm-chat keeps
   the width the strip gave it. */
.mm-focus-card {
  position: fixed; z-index: 1350; width: 296px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 16px); overflow: auto;
  background: var(--mm-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow);
}
.mm-focus-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-focus-cardinner { display: flex; flex-direction: column; }
.mm-focus-cardinner .mm-focus-target { border-bottom: 1px solid var(--border-soft); }
.mm-focus-cardlist { padding: 0 8px 8px; }

/* -- the change-focus popover (artboard E) ---------------------------------- */
/* The top padding matches the SIDES as they are actually seen: 8px of box
   plus the head's own 10px inset.
   The MILESTONE LIST is the one thing that scrolls. .pop scrolls itself by
   default, and popover() hands focus to the first button it finds — the
   Cancel down at the foot — so a workspace with a few milestones opened
   this dialog already scrolled, with its heading cut off against the top
   edge and the reason field out of sight. Holding the head, the field and
   the actions still and letting the options shrink fixes both. */
.pop.mm-focus-popholder {
  width: 340px; max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 24px));
  overflow: hidden; display: flex;
  background: var(--mm-card); padding: 18px 8px 12px;
}
.mm-focus-pop { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mm-focus-pop > * { flex: none; }
.mm-focus-pophead { display: flex; flex-direction: column; gap: 1px; padding: 0 10px 8px; }
.mm-focus-poptitle { font-size: 13.5px; font-weight: 650; color: var(--text); }
.mm-focus-popsub { font-size: 11.5px; color: var(--text-dim); }
.mm-focus-options { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mm-focus-option {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
}
.mm-focus-option:hover { background: var(--panel-2); }
.mm-focus-option.picked { background: var(--accent-soft); }
.mm-focus-option input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.mm-focus-option-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mm-focus-option-name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-focus-option-sub { font-size: 11.5px; color: var(--text-dim); }
.mm-focus-option-tag {
  flex: none; padding: 0 6px; border-radius: 5px; background: var(--panel-2);
  color: var(--text-dim); font-size: 10.5px; font-weight: 650; line-height: 16px;
}
.mm-focus-optsep { height: 1px; margin: 6px 10px; background: var(--border-soft); }
.mm-focus-reasonlabel {
  padding: 10px 10px 6px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.mm-focus-reason {
  width: calc(100% - 20px); margin: 0 10px; resize: none; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4;
}
.mm-focus-reason:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-focus-popnote { margin: 8px 10px 0; font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }
.mm-focus-poperror { margin: 8px 10px 0; font-size: 11.5px; line-height: 1.4; color: var(--danger); }
.mm-focus-popactions {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 10px 0;
}
.mm-focus-btn {
  height: 32px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px;
  background: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
.mm-focus-btn:hover:not([disabled]) { border-color: var(--accent); }
.mm-focus-btn.primary {
  border-color: transparent; background: var(--accent-fill); color: var(--on-accent); font-weight: 650;
}
.mm-focus-btn[disabled] { opacity: .45; cursor: default; }

/* Classic refinement: one readable milestone, then the work that matters.
   Keep the measured 264px seat and server-owned ordering within each list. */
.mm-focus-head { height:48px; padding-inline:18px 10px; border-bottom:0; }
.mm-focus-target { margin:0 12px 12px; padding:12px; border:1px solid var(--border); border-radius:7px; background:var(--panel-2); gap:8px; }
.mm-focus-target-head { align-items:center; justify-content:space-between; }
.mm-focus-target-label { font-size:9px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.mm-focus-edit { width:auto; height:auto; padding:2px 0 2px 6px; font-size:11px; color:var(--accent-ink); }
.mm-focus-edit:hover { background:none; text-decoration:underline; }
.mm-focus-name { display:block; flex:none; width:100%; margin:0; padding:0; }
.mm-focus-name-text { display:block; font-size:14px; line-height:1.45; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mm-focus-pace { gap:8px; }
.mm-focus-facts { flex-wrap:wrap; gap:6px; font-size:11px; }
.mm-focus-facts .mm-focus-grow { display:none; }
.mm-focus-of { width:100%; font-size:12px; color:var(--text); padding-top:2px; }
.mm-focus-bar,.mm-focus-seg { height:6px; }
.mm-focus-legend { font-size:10px; gap:4px 8px; }
.mm-focus-risk { margin:0; color:var(--warn); font-size:11px; font-weight:600; }
/* No top padding (#6472): Chrome keeps a sticky box inside the scroll
   container's CONTENT box, so any top padding is a strip the stuck band
   never covers and rows show through it. The air above the first band is
   the focus block's own bottom margin. */
.mm-focus-list { padding:0 12px 12px; }
.mm-focus-block { margin-bottom:20px; }
.mm-focus-col > .mm-focus-block { margin:0 12px 18px; }
.mm-focus-sec { text-transform:none; letter-spacing:0; font-size:12px; padding:6px 2px 10px; color:var(--text); }
.mm-focus-count { color:var(--text-dim); }
.mm-focus-count::before { content:"("; }
.mm-focus-count::after { content:")"; }
.mm-focus-next-count { color:var(--text-dim); font-weight:500; }
.mm-focus-change { margin-left:auto; color:var(--accent-ink); font-size:11px; font-weight:500; text-decoration:none; }
.mm-focus-change:hover { text-decoration:underline; text-underline-offset:2px; }
.mm-focus-change:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.mm-focus-row { box-sizing:border-box; padding:10px; gap:6px; margin-bottom:7px; border:1px solid var(--border); border-radius:7px; background:var(--mm-card, var(--bg)); cursor:default; }
.mm-focus-row:last-child { margin-bottom:0; }
.mm-focus-row:hover { background:var(--mm-card, var(--bg)); border-color:var(--text-dim); }
/* Inline flow keeps wrapped title lines aligned with the card's left edge. */
.mm-focus-row-top { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:19px; }
.mm-focus-id { display:inline; border:0; border-radius:3px; background:none; padding:1px 0; margin-right:3px; font-family:var(--mono); font-size:11px; font-weight:600; line-height:inherit; color:var(--accent-ink); cursor:pointer; }
.mm-focus-title,.mm-focus-row.two .mm-focus-title { display:inline; font-size:12px; line-height:inherit; font-weight:550; white-space:normal; max-height:none; overflow:visible; -webkit-line-clamp:unset; color:var(--text); text-decoration:none; overflow-wrap:anywhere; }
.mm-focus-id:hover,.mm-focus-title:hover { color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
/* Critical titles keep their signal on hover and in the folded panel card. */
.mm-focus-block:has(> .mm-focus-sec .mm-focus-dot.critical) .mm-focus-title { color:var(--danger); }
.mm-focus-id:focus-visible,.mm-focus-title:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.mm-focus-row-meta { font-size:11px; flex-wrap:wrap; white-space:normal; gap:4px 6px; }
.mm-focus-row > .mm-focus-owners { font-size:11px; }
.mm-focus-task-meta { display:flex; gap:5px; align-items:center; min-width:0; flex-wrap:wrap; font-size:11px; }
.mm-focus-task-meta .mm-focus-row-meta { width:auto; flex:1; }
.mm-focus-kind { margin-left:auto; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.mm-focus-work-status { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--muted); }
.mm-focus-beacon { width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; }
.mm-focus-work.is-active { background:var(--accent-soft); }
.mm-focus-work.is-active .mm-focus-work-status { color:var(--accent-ink); }
.mm-focus-work.is-stale,.mm-focus-work.is-waiting { border-left:2px solid var(--warn); }
.mm-focus-work.is-stale .mm-focus-work-status,.mm-focus-work.is-waiting .mm-focus-work-status { color:var(--warn); }
.mm-focus-activity { font-size:11px; line-height:1.5; color:var(--muted); border-top:1px solid var(--border-soft); padding-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.mm-focus-responder { font-size:11px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
/* #6107: a Plan is one block — its row, then each wave indented under it. */
.mm-focus-plan { margin-bottom:7px; }
.mm-focus-plan > .mm-focus-row { margin-bottom:4px; }
.mm-focus-wave { margin:0 0 4px 12px; padding-left:8px; border-left:2px solid var(--border-soft); }
.mm-focus-wavehead { font-size:11px; line-height:1.5; font-weight:600; color:var(--muted); margin-bottom:4px; }
.mm-focus-wave .mm-focus-row { margin-bottom:4px; }
.mm-focus-inplan { color:var(--muted); }
.mm-focus-motion { height:2px; background:var(--border-soft); border-radius:2px; overflow:hidden; }
.mm-focus-motion::after { content:""; display:block; height:100%; width:28%; background:var(--accent); animation:mm-focus-work-sweep 2.8s ease-in-out infinite; }
.mm-focus-work.is-active .mm-focus-beacon { animation:mm-focus-work-pulse 1.8s ease-in-out infinite; }
@keyframes mm-focus-work-sweep { from { transform:translateX(-110%); } to { transform:translateX(460%); } }
@keyframes mm-focus-work-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .mm-focus-motion::after,.mm-focus-work.is-active .mm-focus-beacon { animation:none; } }
.mm-focus-morerow { padding:3px 2px 0; }
[data-home-style="flat"] .mm-focus-row { background:transparent; border-color:transparent; border-bottom-color:var(--border-soft); border-radius:0; }

/* #6472: one job per surface. The legend's review and building counts are
   links to the surfaces that own those lists; parked is muted; the
   14-day line stands alone so it never wraps mid-sentence. */
.mm-focus-legend a { color:inherit; text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:2px; padding:4px 0; }
.mm-focus-legend a:hover { color:var(--text); text-decoration-color:currentColor; }
.mm-focus-legend a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.mm-focus-legend .is-parked { color:var(--text-dim); }
.mm-focus-closed { font-size:11px; color:var(--text-dim); padding-top:2px; }
/* D1: the list's two heads are full-width bands in the card's caption
   style, sticky inside the scrolling list — the boundary between Working
   now and Next up reads at 264px without a line of air. Two classes so
   this outranks the refinement block's .mm-focus-sec above. */
.mm-focus-sec.mm-focus-band { position:sticky; top:0; z-index:1; box-sizing:border-box; margin:0 -12px 8px; padding:8px 16px; background:var(--panel-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); font-size:10.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--text-dim); }
.mm-focus-sec.mm-focus-band .mm-focus-count, .mm-focus-sec.mm-focus-band .mm-focus-next-count { letter-spacing:0; }
.mm-focus-band-word { color:var(--muted); }
.mm-focus-band-word.is-critical { color:var(--danger); font-weight:650; }
.mm-focus-cardlist .mm-focus-band { margin-inline:-8px; padding-inline:12px; }

/* Conversations lead with the person. Engine/capacity controls stay available
   on request; warnings remain visible outside this disclosure. */
#mm-top #mm-session-hub { display:none; }

/* S3 (approval requests): a row whose item waits for a person's approval
   gets an amber Approve pill at its right; the title keeps its two-line
   clamp in the space the pill leaves. */
.mm-focus-row.has-approval { border-color:var(--warn); background:var(--mm-card, var(--bg)); }
.mm-focus-row.has-approval:hover { border-color:var(--warn); }
.mm-focus-row.has-approval .mm-focus-row-top { display:flex; align-items:flex-start; gap:6px; overflow:visible; -webkit-line-clamp:unset; }
.mm-focus-row.has-approval .mm-focus-row-text { flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mm-focus-approve { flex:none; display:inline-flex; align-items:center; gap:4px; height:20px; margin-top:-1px; padding:0 8px; border:1px solid var(--warn); border-radius:999px; background:var(--warn-soft); color:var(--warn); font:inherit; font-size:10.5px; font-weight:650; line-height:1; cursor:pointer; }
.mm-focus-approve:hover { background:var(--warn); color:var(--panel); }
.mm-focus-approve:focus-visible { outline:2px solid var(--warn); outline-offset:2px; }