/* Missions · Rooms — /missions.html. CSP-safe, design-token driven.
   Uses .page-head, .btn, .btn-primary, .icon from app-shell.css. */

.missions-page { padding: 32px 32px 80px; max-width: 1280px; margin: 0 auto; }

/* ─── List view ─── */
.missions-shell { display: flex; flex-direction: column; gap: 24px; }
/* The display:flex above outranks the [hidden] UA rule, so shell.hidden=true
   from mission-flow.js / missions-list.js wouldn't actually hide the list shell
   on the goal-detail route — leaving "Loading your missions…" stuck forever
   (QA round 63). Make the attribute win. */
.missions-shell[hidden] { display: none !important; }
.missions-loading { padding: 32px; color: var(--fg-muted); text-align: center; }

.missions-rail { display: flex; flex-direction: column; gap: 12px; }
.missions-rail-head { display: flex; justify-content: space-between; align-items: baseline; }
.missions-rail-head h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin: 0; }
.missions-rail-head h3 .icon { color: var(--accent-cyan); }
.missions-rail-head .count { font-size: 12px; color: var(--fg-muted); }
.missions-rail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.mission-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border);
  text-align: left; color: var(--fg);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  text-decoration: none;
}
.mission-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-md);
}
[data-ux-mode="cozy"] .mission-card {
  background: var(--cozy-paper-elevated, #FFFBF2);
  border: var(--cozy-border-hairline, 1px solid rgba(166, 130, 85, 0.20));
}
[data-ux-mode="cozy"] .mission-card:hover {
  box-shadow: 0 6px 18px var(--cozy-warm-shadow, rgba(90, 60, 30, 0.10));
}

.mission-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mission-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; }
.mission-card-meta { font-size: 12px; color: var(--fg-muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mission-card-meta-item { display: inline-flex; align-items: center; gap: 4px; }

/* Role + health badges */
.role-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600;
  padding: 3px 8px; border-radius: 99px;
}
.role-badge.owner {
  background: rgba(148, 121, 255, 0.14);
  color: var(--accent-purple);
  border: 1px solid rgba(148, 121, 255, 0.30);
}
.role-badge.collaborator {
  background: rgba(79, 172, 254, 0.10);
  color: var(--accent-cyan);
  border: 1px solid rgba(79, 172, 254, 0.28);
}
[data-ux-mode="cozy"] .role-badge.owner {
  background: rgba(168, 71, 95, 0.10); color: var(--cozy-rose);
  border-color: rgba(168, 71, 95, 0.30);
}
[data-ux-mode="cozy"] .role-badge.collaborator {
  background: rgba(182, 151, 99, 0.16); color: var(--cozy-ink);
  border-color: rgba(166, 130, 85, 0.30);
}

.sg-health-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sg-health-dot.on-track { background: var(--success, #34d399); }
.sg-health-dot.at-risk { background: var(--warning, #f59e0b); }
.sg-health-dot.blocked { background: var(--danger, #ef4444); }
.sg-health-dot.paused { background: var(--fg-muted); }

.mission-card-add {
  background: transparent; border: 1px dashed var(--border-subtle);
  align-items: center; justify-content: center; text-align: center;
  color: var(--fg-muted); min-height: 96px;
}

.mission-card-empty {
  padding: 32px 24px; text-align: center; color: var(--fg-muted);
  border: 1px dashed var(--border-subtle); border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
[data-ux-mode="cozy"] .mission-card-empty {
  background: var(--cozy-paper-elevated, #FFFBF2);
  color: var(--cozy-ink-muted, #5A5540);
}

/* ─── 6-tab room ─── */
/* flex-wrap is LOAD-BEARING on narrow viewports (fixed 2026-08-08). The 6 tabs
   total ~556px; at 390px they sat on one unwrapped row inside an ancestor with
   `overflow-x: hidden`, so Connections was 100% off-canvas and Knowledge ~70%
   clipped with no scrollbar and no way to reach either. Wrap rather than
   `overflow-x: auto` — a hidden horizontal scroller is undiscoverable, and
   `overflow-x` would compute `overflow-y: auto` and clip the active tab's
   box-shadow. At desktop width the row fits, so wrapping is a no-op there. */
.mflow-tabs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mflow-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--fg-muted);
  background: transparent; border: 0; border-radius: 8px;
  cursor: pointer; transition: all 0.18s;
}
.mflow-tab:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
.mflow-tab.is-active {
  color: var(--fg-strong, var(--fg));
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
[data-ux-mode="cozy"] .mflow-tab.is-active {
  background: var(--cozy-paper-elevated, #FFFBF2);
  color: var(--cozy-ink, #1A2438);
  box-shadow: 0 6px 18px var(--cozy-warm-shadow, rgba(90, 60, 30, 0.10));
}
/* Mission pane (the flow viz pane). The 4 other panes are .group-room__pane
   and inherit their own display rules from group-room.css. */
.mflow-pane[data-mpane="mission"] { display: none; }
.mflow-pane[data-mpane="mission"].is-active {
  display: block;
  /* height + overflow are LOAD-BEARING, not cosmetic (fixed 2026-07-24).
     This pane sits inside .group-room__body (`flex:1; overflow:hidden`) in a
     `height:100vh` shell. Every SIBLING pane also carries .group-room__pane,
     which supplies `height:100%; overflow-y:auto` — this one carries only
     .mflow-pane, so it inherited the clipping without the scroller. The flow
     chart then rendered at its natural height (3043px measured on a 34-task
     goal) inside a 696px hidden-overflow parent: 2347px of chart silently
     cut off with NO scrollbar and no way to reach it.
     Do not remove — short goals fit in 696px, so the bug is invisible until
     a goal gets big enough to matter. */
  height: 100%;
  overflow-y: auto;
}

/* ─── Hidden-attribute traps (class display rules outrank [hidden]) ─── */
.room-search-banner[hidden], .missions-search[hidden], .mroom-invite[hidden], .mission-card[hidden], .missions-rail[hidden] { display: none !important; }

/* ─── List search (2026-09-03) ─── */
.missions-search { display: flex; align-items: center; gap: 8px; max-width: 420px; min-height: 42px; margin: -8px 0 20px; padding: 0 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); color: var(--fg-faded); }
.missions-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--fg); font: inherit; outline: none; }
.mission-card-progress { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.mission-card-progress .mo-bar { flex: 1; }
#missionsShell button.missions-archived-toggle { align-self: flex-start; background: transparent; border: 1px solid var(--border); color: var(--fg-muted);
  min-height: 34px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; box-shadow: none; }
#missionsShell button.missions-archived-toggle::before { content: none; }
.missions-rail-archived[hidden] { display: none; }

/* ─── Room mode: page head off, compact header on (§6.1) ─── */
body.mission-room-mode .missions-page > .page-head { display: none !important; }
body.mission-room-mode .missions-search { display: none !important; }
.mission-flow-shell { display: flex; flex-direction: column; gap: 16px; }
.mroom-head { padding: 0 0 8px; border-bottom: 1px solid var(--border); }
.mroom-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 4px 0 10px; }
.mroom-back { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-muted); text-decoration: none; font-size: 13px; min-height: 36px; }
.mroom-back:hover { color: var(--fg); }
.mroom-back .icon { width: 14px; height: 14px; }
.mroom-title-wrap { flex: 1 1 320px; min-width: 0; }
.mroom-title { font-size: 20px; font-weight: 600; line-height: 1.25; }
.mroom-sub { font-size: 12px; color: var(--fg-muted); }
.mroom-sub:empty { display: none; }
.mroom-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.mroom-status { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); }
.mroom-status.status-active { color: var(--success, #34d399); border-color: color-mix(in srgb, var(--success, #34d399) 50%, transparent); }
.mroom-status.status-paused { color: var(--warning, #f59e0b); }
.mroom-status.status-completed { color: var(--accent-cyan); }
.mroom-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); }
.mroom-bar-track { width: 90px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; display: inline-block; }
.mroom-bar-track i { display: block; height: 100%; background: var(--accent-cyan); }
.mroom-members { display: inline-flex; }
/* reviewer 2026-09-03: white on the purple fill was 3.26:1 → dark ink; the ring makes the chip visible on cozy paper too */
.mroom-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface-2); border: 2px solid var(--bg-body); box-shadow: 0 0 0 1px var(--border-strong, var(--border)); color: var(--fg); margin-left: -6px; }
.mroom-avatar:first-child { margin-left: 0; }
.mroom-avatar.is-owner { background: var(--accent-purple); color: #0b1220; }
.mroom-avatar.is-more { background: transparent; border-color: var(--border); color: var(--fg-muted); }
#missionFlowShell button.mroom-invite { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; }

/* ─── Mission pane sizing (load-bearing, see the 2026-07-24 note in git history) ─── */
.mflow-pane[data-mpane="mission"] { display: none; }
.mflow-pane[data-mpane="mission"].is-active { display: block; height: 100%; overflow-y: auto; }
.mission-flow-canvas { position: relative; padding: 4px 0 40px; min-height: 320px; }
.mflow-empty { padding: 20px; text-align: center; color: var(--fg-muted); font-size: 13px; border: 1px dashed var(--border); border-radius: 10px; }

/* ─── Outline (§3.1) ─── */
.mo-bar { display: inline-block; width: 110px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.mo-bar i { display: block; height: 100%; background: var(--accent-cyan); }
.mo-goal { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 18px;
  background-image: linear-gradient(135deg, rgba(79,172,254,0.08), rgba(148,121,255,0.08)); }
.mo-goal-head { display: flex; align-items: flex-start; gap: 10px; }
.mo-status-badge { flex: 0 0 auto; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); }
.mo-goal-title { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.mo-goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 13px; color: var(--fg-muted); }
/* §619 batch 37: the goal's end date, changed by its owner */
.mo-goal-date { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mo-goal-target-change, .mo-goal-date-cancel { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.mo-goal-date-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mo-goal-date-input { font: inherit; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border, rgba(148,163,184,.4)); background: transparent; color: inherit; }
.mo-goal-date-save { font: inherit; padding: 2px 10px; border-radius: 6px; border: 1px solid var(--border, rgba(148,163,184,.4)); background: transparent; color: inherit; cursor: pointer; }
.mo-goal-date-done, .mo-goal-date-err { flex-basis: 100%; font-size: 12px; }
.mo-goal-fit { margin-top: 10px; font-size: 12px; color: var(--fg-muted); }
.mo-goal-err { margin-top: 8px; font-size: 12px; color: var(--danger, #e5484d); }
.mo-goal-err.is-ok { color: var(--fg-muted); }
/* §788.11: the export's data-use line under the two download items */
.mo-menu-note { padding: 6px 12px 8px; font-size: 11.5px; line-height: 1.45; color: var(--fg-muted); border-top: 1px solid var(--border); margin-top: 4px; }
.mo-menu-note a { color: inherit; text-decoration: underline; }
.mo-legend { margin-top: 12px; font-size: 11px; color: var(--fg-faded); letter-spacing: .02em; }
.mo-menu { position: relative; flex: 0 0 auto; }
#missionFlowShell button.mo-menu-btn { width: 36px; height: 36px; min-height: 36px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--fg); font-size: 18px; line-height: 1; padding: 0; box-shadow: none; }
/* §718.3 (2026-10-25, c505): an opaque fill — --surface-raised is 0.92 alpha and the goal title read through the open menu. Cozy keeps its paper rule below. */
.mo-menu-list { position: absolute; right: 0; top: 40px; z-index: 30; min-width: 220px; padding: 6px; border-radius: 12px; background: var(--surface-flat, #0f172a); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.mo-menu-list[hidden] { display: none; }
/* §725.4 (c519): placeMenu() in mission-flow.js opens the list upward when it would land under the phone bottom nav. Must follow the base rule AND outrank the <=768 `top: 48px` (it does: two classes). */
.mo-menu-list.is-up { top: auto; bottom: calc(100% + 4px); }
.mo-menu-list { scroll-margin-block-end: 96px; }   /* the no-room-above fallback scrolls it clear of the nav */
#missionFlowShell button.mo-menu-item { display: block; width: 100%; min-height: 36px; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); font: inherit; font-size: 13px; box-shadow: none; }
#missionFlowShell button.mo-menu-item:hover { background: var(--surface-2); }
#missionFlowShell button.mo-menu-item.is-danger { color: var(--danger, #e5484d); }

.mo-outline { position: relative; padding-left: 22px; }
.mo-outline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.mo-ms { position: relative; margin: 0 0 14px; }
#missionFlowShell button.mo-ms-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--fg); font: inherit; font-size: 14px; box-shadow: none; }
#missionFlowShell button.mo-ms-head[aria-expanded="true"] .icon { transform: rotate(90deg); }
.mo-ms-kicker { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faded); }
.mo-ms-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; }
.mo-ms-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.mo-ms-body { padding: 8px 0 4px 14px; }
.mo-ms-body[hidden] { display: none; }
.mo-ms-empty { padding: 8px 12px; font-size: 12px; color: var(--fg-faded); }
.mo-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-purple, #9479FF); background: transparent; }
.status-completed > .mo-ms-head > .mo-dot, .mo-task.status-completed .mo-dot { background: var(--success, #34d399); border-color: var(--success, #34d399); }
.status-in_progress > .mo-ms-head > .mo-dot, .status-queued > .mo-ms-head > .mo-dot, .mo-task.status-in_progress .mo-dot, .mo-task.status-queued .mo-dot { border-color: var(--accent-cyan, #4FACFE); background: color-mix(in srgb, var(--accent-cyan, #4FACFE) 40%, transparent); }
.status-waiting_user > .mo-ms-head > .mo-dot, .mo-task.status-waiting_user .mo-dot { border-color: var(--warning, #f59e0b); background: var(--warning, #f59e0b); }
.mo-task.status-skipped .mo-dot, .mo-task.status-failed .mo-dot { border-color: var(--fg-faded); }

.mo-task { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 0 6px; border: 1px solid transparent; border-radius: 10px; }
.mo-task.is-expanded { border-color: var(--border); background: var(--surface-2); }
#missionFlowShell button.mo-task-row { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px; text-align: left;
  border: 0; border-radius: 10px; background: transparent; color: var(--fg); font: inherit; font-size: 14px; box-shadow: none; }
#missionFlowShell button.mo-task-row:hover { background: var(--surface-2); }
.mo-task.status-completed .mo-task-title { color: var(--fg-muted); }
.mo-task.status-completed .mo-task-title::before { content: "✓ "; color: var(--success, #34d399); }
.mo-chip { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-muted); }
.mo-chip.cls-digital { color: var(--accent-cyan); } .mo-chip.cls-action { color: var(--accent-gold, #fbbf24); } .mo-chip.cls-decision { color: var(--accent-purple); }
.mo-task-title { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
/* §619 re-test (Liam, 390 px, 2026-10-15): the dot + two chips + date left a task title 27 px wide — one word per
   line — and a milestone title ~100 px. Rows may wrap; a title keeps a basis of ~11rem and drops to its own line
   under the chips when the row is narrower, and the row keeps ~16rem so the Result button wraps beneath it. */
#missionFlowShell button.mo-task-row, #missionFlowShell button.mo-ms-head { flex-wrap: wrap; row-gap: 4px; }
#missionFlowShell button.mo-task-row { flex: 1 1 16rem; }
.mo-task-title, .mo-ms-title { flex: 1 1 11rem; }
.mo-task-date { flex: 0 0 auto; font-size: 12px; color: var(--fg-faded); white-space: nowrap; }
.mo-task-row .icon, .mo-ms-head .icon { width: 14px; height: 14px; color: var(--fg-faded); transition: transform .15s; }
.mo-task.is-expanded > .mo-task-row .icon { transform: rotate(90deg); }
/* the Result button is a sibling of the row button (buttons cannot nest): flex gives it its own column */
.mo-task > .mo-result-inline { flex: 0 0 auto; margin: 8px 10px 0 0; }
.mo-task.is-expanded > .mo-result-inline { display: none; }
.mo-task-detail { flex-basis: 100%; padding: 4px 12px 12px 44px; font-size: 13px; }
.mo-task-raw { color: var(--fg-faded); font-size: 12px; margin-bottom: 4px; }
.mo-task-desc { margin: 0 0 10px; color: var(--fg-muted); line-height: 1.5; white-space: pre-line; }
.mo-detail-row { display: flex; gap: 8px; margin-top: 3px; }
.mo-detail-label { flex: 0 0 90px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faded); padding-top: 2px; }
.mo-detail-row.is-past .mo-detail-value { color: var(--fg-muted, #b9b9c7); }   /* §619 batch 18: a past date is a fact, never red */
.mo-detail-est, .mo-detail-delay { margin-top: 6px; font-size: 12px; color: var(--fg-muted); }
/* Round nf3 (Haruto): a step the iSpirit is running says so, how long and where it lands. */
.mo-detail-run { margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: var(--fg-muted); border-radius: 8px;
  border-left: 3px solid color-mix(in srgb, var(--accent-blue, #60a5fa) 70%, transparent);
  background: color-mix(in srgb, var(--accent-blue, #60a5fa) 8%, transparent); }
.mo-detail-delay { color: var(--warning, #f59e0b); }
#missionFlowShell button.mo-result, #missionFlowShell a.mo-result { display: inline-flex; align-items: center; min-height: 32px; margin-top: 10px; padding: 0 12px;
  font-size: 12px; font-weight: 600; text-decoration: none; color: var(--fg); border-radius: 8px; box-shadow: none; line-height: 1.2;
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 20%, transparent); border: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 55%, transparent); cursor: pointer; }
/* §616.4: links to the work a step uses — wrap a long document name instead of overflowing at 390 px. */
#missionFlowShell .mo-uses-work { display: flex; flex-wrap: wrap; gap: 8px; }
#missionFlowShell .mo-uses-work .mo-result { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; padding: 6px 12px; }
#missionFlowShell .mo-result-inline { margin-top: 0; min-height: 28px; font-size: 11px; }
#missionFlowShell button.mo-result:hover, #missionFlowShell a.mo-result:hover { background: color-mix(in srgb, var(--accent-purple, #9479ff) 34%, transparent); }
.mo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
#missionFlowShell button.mo-btn, #missionFlowShell a.mo-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--fg); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: none; line-height: 1.2; }
#missionFlowShell button.mo-btn:hover:not(:disabled) { border-color: var(--accent-purple, #9479FF); }
#missionFlowShell button.mo-btn:disabled { opacity: .55; cursor: default; }
.mo-note { flex-basis: 100%; margin-top: 4px; font-size: 12px; line-height: 1.4; }
.mo-note.is-ok { color: var(--success, #34d399); } .mo-note.is-warn { color: var(--warning, #f59e0b); }
/* Change date on an opened step (§619 re-test 12, sk) — the board's control (goal-board.css .gb-date), mission spacing. */
.mo-date { margin-top: 8px; }
.mo-date__form { display: grid; gap: 6px; justify-items: start; padding: 8px 10px; border: 1px solid rgba(148, 121, 255, 0.28); border-radius: 10px; }
.mo-date__label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.mo-date__input { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border, rgba(127, 127, 127, 0.4)); background: transparent; color: inherit; min-height: 40px; }
.mo-date__say { margin: 0; font-size: 0.88rem; }
.mo-date__conflicts { margin: 0; padding-left: 18px; font-size: 0.84rem; color: var(--fg-muted, #b9b9c7); }
/* `#missionFlowShell button.mo-btn { display: inline-flex }` beats the UA [hidden] rule — the §622.1 trap, again. */
#missionFlowShell .mo-date [hidden] { display: none; }
[data-ux-mode="cozy"] .mo-date__form { border-color: var(--cozy-gold-soft, rgba(182, 151, 99, 0.32)); }
[data-ux-mode="cozy"] .mo-date__say, [data-ux-mode="cozy"] .mo-date__label { color: var(--cozy-ink, #2c2418) !important; }
[data-ux-mode="cozy"] .mo-date__conflicts { color: var(--cozy-ink-muted, #5b4f3a) !important; }
/* the global gradient-button rule paints ::before shimmers — none of ours want one */
#missionFlowShell button::before { content: none; }

@media (max-width: 900px) {
  .missions-page { padding: 20px 16px 80px; }
  .mroom-bar { gap: 8px 12px; }
  .mroom-title { font-size: 17px; }
  .mroom-bar-track { width: 70px; }
  .mo-outline { padding-left: 16px; }
  .mo-ms-meta .mo-bar { width: 60px; }
  .mo-task-date { display: none; }
  .mo-task > .mo-result-inline { margin: 6px 8px 0 0; }
  .mo-task-detail { padding-left: 12px; }
  .mo-detail-label { flex-basis: 76px; }
}

/* cozy: tokens carry the palette; paper surfaces for the two cards */
[data-ux-mode="cozy"] .mo-goal, [data-ux-mode="cozy"] #missionFlowShell button.mo-ms-head, [data-ux-mode="cozy"] .mo-task.is-expanded {
  background: var(--cozy-paper-elevated, #FFFBF2); border: var(--cozy-border-hairline, 1px solid rgba(166, 130, 85, 0.20)); background-image: none; }
[data-ux-mode="cozy"] .mo-menu-list { background: var(--cozy-paper-elevated, #FFFBF2); }

/* Result review loop (spec 2026-09-04 §3.9): readiness chip on the outline row */
.mo-chip.rd-ready { color: var(--accent-green, #34d399); } .mo-chip.rd-provisional { color: var(--accent-gold, #fbbf24); } .mo-chip.rd-weak { color: var(--accent-rose, #fb7185); }

/* Pending invites (§391) — owner-only list under the Members tab's invite box */
.pending-invites { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.pending-invites h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pending-invite-list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pending-invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-flat); border: 1px solid var(--border); font-size: 13px; }
.pending-invite-email { font-weight: 600; overflow-wrap: anywhere; }
.pending-invite-date { color: var(--fg-muted); font-size: 11px; margin-right: auto; }
.pending-invite-row button { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--fg); cursor: pointer; }
.pending-invite-row button:hover { border-color: var(--accent-cyan); }
.pending-invite-link { flex: 1 1 100%; padding: 5px 8px; font-size: 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-flat); color: var(--fg); }
@media (max-width: 480px) {
  .pending-invite-date { margin-right: 0; flex-basis: 100%; }
}

/* ── Agent lane chip in the task outline (Task B6, 2026-09-22) ────────────────────────────── */
.mo-lane-chip {
  align-self: center; font-size: .78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(79, 172, 254, .14); color: #2a6f9e;
}
.mo-lane-chip--working { background: rgba(52, 168, 83, .16); color: #1e6b33; }

@media (prefers-color-scheme: dark) {
  .mo-lane-chip { background: rgba(79, 172, 254, .22); color: #bfe3ff; }
  .mo-lane-chip--working { background: rgba(52, 168, 83, .24); color: #b9edc6; }
}

/* 2026-09-24 — the room composer is reachable without hunting for it.
   group-room.css gives the shell `height: 100vh`, but on this page the shell
   starts BELOW the topbar, the email-verify nudge and the page padding (153px
   at 1920×1080), so its bottom — the composer — sat off-screen (492px of page
   scroll on desktop, 616px on a phone; found while checking a Claude Desktop
   sweep of room chat). */

/* Desktop: while the Chat tab is open the app column becomes a viewport-tall
   flex column and the shell takes what is left; other tabs keep page flow. */
@media (min-width: 901px) {
  body:has(#grp-pane-chat.is-active:not([hidden])) .app { min-height: 0; }
  body:has(#grp-pane-chat.is-active:not([hidden])) .app > .main {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding-bottom: 0;
    overflow: hidden;
  }
  body:has(#grp-pane-chat.is-active:not([hidden])) .app > .main > * { flex: 0 0 auto; }
  body:has(#grp-pane-chat.is-active:not([hidden])) .app > .main > main.missions-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body:has(#grp-pane-chat.is-active:not([hidden])) main.missions-page > * { flex: 0 0 auto; }
  body:has(#grp-pane-chat.is-active:not([hidden])) #missionFlowShell {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
  /* No bottom nav on desktop: drop navigation.css's 80px reserve for it. */
  body.has-mobile-bottom-nav:has(#grp-pane-chat.is-active:not([hidden])) { padding-bottom: 0; }
  /* The injected dashboard footer sits after .app — the last 118px of scroll. */
  body:has(#grp-pane-chat.is-active:not([hidden])) #dashboardFooter { display: none; }
}

/* Phone: the room header (title, progress, Invite, two rows of tabs) is
   ~320px, so fitting the whole room to a 760px screen left the thread 73px
   and clipped the composer. Instead the page keeps its normal flow, the Chat
   pane is one screen tall (below the sticky topbar, above the fixed bottom
   nav) with its own scroll, and mission-flow.js scrolls it into view when the
   tab opens — the same shape as /chat on a phone. */
@media (max-width: 900px) {
  body:has(#grp-pane-chat.is-active:not([hidden])) #missionFlowShell { height: auto; }
  body:has(#grp-pane-chat.is-active:not([hidden])) .group-room__body { overflow: visible; }
  /* §619 re-test 15 (sk: "I scrolled up and down about ten times"): on a phone the Mission pane was a 529px inner
     scroller holding a 4,072px outline, 405px down a 100vh shell, inside a page that scrolled too — two scrolls, and
     the outline looked cut off with empty space below. On a phone the room flows and the page scrolls once. The
     desktop rule above (height:100%; overflow-y:auto — 2026-07-24) stays: there the room is one screen. */
  body:has(.mflow-pane[data-mpane="mission"].is-active) #missionFlowShell { height: auto; }
  body:has(.mflow-pane[data-mpane="mission"].is-active) .group-room__body { overflow: visible; }
  .mflow-pane[data-mpane="mission"].is-active { height: auto; overflow: visible; }
  #grp-pane-chat.is-active {
    height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px));
    min-height: 320px;
    scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  /* §491 (2026-09-29): the fixed .bottom-nav covers the last ~69px (72px
     cozy). A keyboard focus / scrollIntoView on the LAST pending invite's
     copy-link or revoke button parked it at the viewport's bottom edge —
     under the nav (bottom 844 vs nav top 775.5 at 390x844). Reserve the
     bar's height (same 88px as the §423 drawer fix) as the page's scroll
     padding while the Members tab is open, so the browser stops them above
     the bar. Scroll PADDING on the root, not scroll-margin on the buttons:
     Chrome clips a scroll-margin box to the room's overflow-clipped body, so
     the margin came out at ~40px (measured). Members-only on purpose — the
     Chat pane already carries its own scroll-margin-bottom above. */
  html:has(#grp-pane-members.is-active:not([hidden])) {
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

/* The cookie card is lifted above the composer only on body.chat-page (the
   live values are app-shell-polish.css's !important ones: 140px phone, 148px
   desktop); the room composer is the same shape, so give it the same lift —
   on a phone the card's OK button sat exactly on the room's Send. */
@media (max-width: 900px) {
  body:has(#grp-pane-chat.is-active:not([hidden])) .cc-overlay { bottom: 140px !important; }
}
@media (min-width: 901px) {
  body:has(#grp-pane-chat.is-active:not([hidden])) .cc-overlay { bottom: 148px !important; }
}

/* Your notes on the step (owner 2026-10-15; sk) — the person's own journal entry written for this step. */
.mo-note-chip { background: color-mix(in srgb, var(--accent-purple, #9479ff) 16%, transparent); }
.mo-my-notes { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--accent-purple, #9479ff); border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 8%, transparent); }
.mo-my-notes__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 4px; }
.mo-my-note + .mo-my-note { margin-top: 8px; }
.mo-my-note__title { font-weight: 600; text-decoration: underline; }
.mo-my-note__text { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
[data-ux-mode="cozy"] .mo-my-notes { border-left-color: var(--cozy-gold, #b69763); background: var(--cozy-paper, #fdf6e3); }
[data-ux-mode="cozy"] .mo-my-notes__label, [data-ux-mode="cozy"] .mo-my-note__text, [data-ux-mode="cozy"] .mo-my-note__title { color: var(--cozy-ink, #2c2418) !important; }
/* You handed in (§619 batch 20) — the person's own result on a finished action step. */
.mo-your-result { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--accent-purple, #9479ff); border-radius: 6px; background: color-mix(in srgb, var(--accent-purple, #9479ff) 8%, transparent); }
.mo-your-result__label { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--fg-muted, #b9b9c7); }
.mo-your-result__note { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
[data-ux-mode="cozy"] .mo-your-result { border-left-color: var(--cozy-gold, #b69763); background: rgba(182, 151, 99, 0.12); }


/* §619 batch 22: "Your deadlines" above the outline (mission-flow.js deadlinesBox) — the same list the Progress card
   shows. The buttons restate every property styles.css's bare-button gradient sets. */
.mo-deadlines { margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(148, 121, 255, 0.28); border-radius: 10px; font-size: 0.9rem; }
.mo-deadlines__title { margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; }
.mo-deadlines__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mo-deadlines .mo-deadlines__item { display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mo-deadlines .mo-deadlines__item:hover, .mo-deadlines .mo-deadlines__item:focus-visible { background: color-mix(in srgb, var(--accent-purple, #9479ff) 14%, transparent); }
.mo-deadlines__date { flex: 0 0 auto; min-width: 6.5em; font-weight: 600; white-space: nowrap; }
.mo-deadlines__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mo-deadlines__more { margin: 4px 0 0; color: var(--fg-muted, #b9b9c7); font-size: 0.8rem; }
/* §619 batch 22b: a deadline after the plan's finish — said plainly, with a drafted re-plan in chat. */
.mo-deadlines__gap { margin: 8px 0 6px; color: var(--fg-muted, #b9b9c7); font-size: 0.85rem; line-height: 1.4; }
.mo-deadlines__replan { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; font-size: 0.85rem; }
/* §619 batch 24: the key part of the draft a step uses, under "Open the draft" (mission-flow.js excerptBox). */
.mo-uses-excerpt { margin: 8px 0 4px; padding: 10px 12px; border-left: 3px solid color-mix(in srgb, var(--accent-purple, #9479ff) 55%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--accent-purple, #9479ff) 7%, transparent); }
.mo-uses-excerpt-head { font-size: 0.8rem; font-weight: 600; color: var(--fg-muted, #b9b9c7); margin-bottom: 4px; }
.mo-uses-excerpt-text { font-size: 0.9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.mo-uses-excerpt-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mo-uses-excerpt .mo-uses-excerpt-more, .mo-uses-excerpt .mo-uses-excerpt-copy { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; font: inherit; font-size: 0.85rem; font-weight: 600; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 55%, transparent); border-radius: 8px; box-shadow: none; cursor: pointer; }
.mo-uses-excerpt .mo-uses-excerpt-more { border-style: dashed; }
.mo-uses-excerpt-cut { margin-top: 4px; font-size: 0.8rem; color: var(--fg-muted, #b9b9c7); }
.mo-copy-offscreen { position: fixed; left: -9999px; top: 0; }

/* This week (§619 batch 27): a long plan opens on this week's steps; the count says how many of the open ones. */
.mo-week { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.mo-week-count { font-size: 0.86rem; color: var(--text-muted, #64748b); }
.mo-week-next { margin: 0 0 8px; font-size: 0.9rem; color: var(--text-muted, #64748b); }

/* §716.1 (2026-10-24, c503): the product's 44 px touch floor for secondary controls at <=768 px (QA Lap 67,
   measured at 390). One min-height pass; desktop sizes unchanged. */
@media (max-width: 768px) {
  #missionFlowShell button.mo-menu-item { min-height: 44px; }   /* pause / proactive / archive, were 38 px */
  .mo-menu-note a { display: inline-flex; align-items: center; min-height: 44px; }   /* §788.11 */
  #missionFlowShell button.mo-menu-btn { width: 44px; height: 44px; min-height: 44px; }   /* §718.2 (c505): the ⋯ trigger itself, was 44x36 */
  .mo-menu-list { top: 48px; }   /* keeps the 4 px gap under the taller trigger (40 px under the 36 px one on desktop) */
}