/* ============================================================
   rail-canvas.css — the redesign shell (rail / chat / canvas)

   Drop-in for public/. Load AFTER tokens.css and BEFORE primitives.css
   so existing sediment can still override during migration:

     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="rail-canvas.css">   <-- here
     ... existing chain ...

   Everything here reads from tokens.css. Two additions are made at the
   top because the redesign gives them a fixed meaning:

     --fmn-chrome  near-black chrome (rail, primary buttons, dark panels)
     --fmn-ai      Formon yellow, reserved exclusively for AI surfaces

   THE ONE RULE: yellow marks AI. Primary actions are chrome-black.
   If a yellow element is not AI-produced or AI-invokable, it's a bug.
   ============================================================ */

:root {
  --fmn-chrome:        #16150F;
  --fmn-chrome-soft:   rgba(22, 21, 15, 0.08);
  --fmn-ai:            var(--color-accent);        /* #FFD500 */
  --fmn-ai-wash:       #FFFDF2;
  --fmn-ai-line:       #F2E6A8;
  --fmn-ai-ink:        var(--color-peach-800);     /* #7D4F12 */

  /* legibility floors — an arm's length, outdoors, over 50 */
  --fmn-body:          15px;
  --fmn-label:         10.5px;
  --fmn-tap:           44px;
  --fmn-tap-primary:   48px;

  --fmn-rail-w:        76px;
  --fmn-chat-w:        404px;
}

/* ---------- app shell ---------- */

/* MB-R2 mod 08: with the shell up, the agent lives in the chat zone and the
   floating launcher is redundant chrome over the canvas. The classic app still
   mounts and uses it. Deliberately NOT deleted from agent-modal.js. */
body[data-fmn-shell="on"] .agm-launcher { display: none; }

.fmn-shell {
  display: flex;
  height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fmn-body);
  overflow: hidden;
}

.fmn-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- zone 1: the rail (navigate) ---------- */

.fmn-rail {
  width: var(--fmn-rail-w);
  flex-shrink: 0;
  background: var(--fmn-chrome);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) 0 var(--space-3);
  gap: var(--space-1_5);
}

.fmn-rail-mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--fmn-ai);
  color: var(--fmn-chrome);
  font-family: var(--font-serif);
  font-weight: 700; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}

.fmn-rail-item {
  width: 58px; height: 52px;
  border: none; background: transparent;
  border-radius: 13px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  cursor: pointer;
  position: relative;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.fmn-rail-item:hover  { background: rgba(255, 255, 255, 0.07); color: #fff; }
.fmn-rail-item.is-on  { background: rgba(255, 213, 0, 0.16);   color: var(--fmn-ai); }

.fmn-rail-label {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);     /* never smaller */
  letter-spacing: 0.02em;
}

.fmn-rail-badge {
  position: absolute; top: 5px; right: 10px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--color-rose-600);
  color: #fff;
  font-size: var(--fmn-label);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* The capture key. Deliberately the largest target in the app and the
   only yellow control in the rail — capture IS the AI's input. */
.fmn-rail-capture {
  width: 58px; height: 58px;
  border: none; border-radius: 15px;
  background: var(--fmn-ai);
  color: var(--fmn-chrome);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-sans);
  cursor: pointer;
  margin-bottom: var(--space-1_5);
}
.fmn-rail-capture:active { transform: translateY(1px); }

.fmn-rail-spacer { flex: 1; }

/* ---------- header + the search/ask bar ---------- */

.fmn-header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  display: flex; align-items: center; gap: var(--space-3_5);
}
.fmn-header-title {
  font-family: var(--font-serif);
  font-size: 23px; font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.fmn-header-meta {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink-700);      /* NOT ink-100: failed contrast on paper */
}

/* Looks like a search field on purpose. It is the on-ramp that teaches
   people the AI exists — a bare "ask me anything" box gets ignored. */
.fmn-askbar {
  margin: 0 var(--space-5) var(--space-3_5);
  display: flex; align-items: center; gap: var(--space-3);
  height: 58px; padding: 0 var(--space-3_5);
  background: var(--bg-elev-1);
  border: 1.5px solid var(--fmn-chrome);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 0 var(--fmn-chrome-soft);
}
.fmn-askbar-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-16);
  color: var(--text-primary);
}
.fmn-askbar-input::placeholder { color: var(--color-ink-100); }

.fmn-askbar-btn {
  width: var(--fmn-tap); height: var(--fmn-tap);
  border: none; border-radius: 11px;
  background: var(--fmn-chrome); color: var(--fmn-ai);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.fmn-askbar-btn.is-secondary { background: var(--color-paper-100); color: var(--color-ink-300); }

/* ---------- zones 2 + 3 ---------- */

.fmn-zones {
  flex: 1; min-height: 0;
  display: flex; gap: var(--space-3_5);
  padding: 0 var(--space-5) var(--space-4_5);
}

.fmn-chat, .fmn-canvas {
  background: var(--bg-elev-1);
  border: 1px solid var(--border-default);
  border-radius: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fmn-chat   { width: var(--fmn-chat-w); flex-shrink: 0; }
.fmn-canvas { flex: 1; min-width: 0; }

.fmn-chat-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--space-3_5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.fmn-chat-you {
  align-self: flex-end; max-width: 82%;
  background: var(--color-paper-100);
  border-radius: 14px 14px 4px 14px;
  padding: 11px 13px; line-height: var(--leading-normal);
}
.fmn-chat-ai { line-height: var(--leading-normal); }

/* A card the agent emits. Chrome border = "this one is the recommendation". */
.fmn-card {
  border: 1px solid var(--border-default);
  background: #FDFCF9;
  border-radius: 14px;
  padding: 12px 13px;
}
.fmn-card.is-primary { border: 2px solid var(--fmn-chrome); box-shadow: 0 2px 0 var(--fmn-chrome-soft); }
.fmn-card.is-risk    { border-color: var(--color-rose-200); background: var(--color-rose-50); }

/* The card is a real button when it navigates, so it is keyboard-reachable and
   announces itself. These reset the UA button look without touching .fmn-card. */
button.fmn-card {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.fmn-chat-cards { display: flex; flex-direction: column; gap: var(--space-2_5); }
.fmn-card-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* "OPEN" is chrome, not yellow-on-white: the glyph is the affordance, and the
   card is a navigation, not an AI action. */
.fmn-card-open {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  font-weight: 700;
  background: var(--fmn-chrome); color: #fff;
  border-radius: var(--radius-xs);
  padding: 3px 7px;
}
.fmn-card-name { font-size: var(--text-16); font-weight: 700; }
.fmn-card-meta { font-family: var(--font-mono); font-size: var(--fmn-label); color: var(--color-ink-300); margin-left: auto; }
.fmn-card-body { display: block; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ink-700); margin-top: 7px; }

/* ---------- AI surfaces — the only yellow in the content area ---------- */

.fmn-ai-panel {
  background: var(--fmn-ai-wash);
  border: 1px solid var(--fmn-ai-line);
  border-radius: 14px;
  padding: var(--space-3_5) var(--space-4);
}
.fmn-ai-tag {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  font-weight: 700; letter-spacing: var(--tracking-caps);
  background: var(--fmn-ai); color: var(--fmn-chrome);
  padding: 4px 8px; border-radius: var(--radius-sm);
}
/* Receipts. Non-optional on every AI claim. */
.fmn-ai-receipts {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  color: var(--fmn-ai-ink);
  text-decoration: underline;
  background: none; border: none; cursor: pointer;
}
/* Confidence. Cheap honesty; the thing that prevents an over-promise. */
.fmn-ai-confidence {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  color: var(--fmn-ai-ink);
}
/* Correction. If the user can't push back, they stop trusting it. */
.fmn-ai-reject {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: 600;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-elev-1); color: var(--color-ink-300);
  padding: 7px 10px; cursor: pointer; white-space: nowrap;
}

/* The trust row (MB-R2). One strip under every AI answer: what it read, how
   sure it is, why, and the way to push back. Frame 2b is the reference. It is
   deliberately quiet - mono, small, no yellow. Yellow marks the AI's OUTPUT,
   not the machinery for auditing it. */
.fmn-trust-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  color: var(--color-ink-300);
}
.fmn-trust-why {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  color: var(--fmn-ai-ink);
  text-decoration: underline;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
/* Confidence earns a color only at the ends of the scale, so MEDIUM does not
   read as a warning. */
.fmn-ai-confidence.is-low    { color: var(--color-rose-600); }
.fmn-ai-confidence.is-medium { color: var(--color-peach-600); }
.fmn-ai-confidence.is-high   { color: var(--color-sage-600); }

/* The op list behind "N records". Indented so it reads as evidence under the
   claim rather than another row of chrome. */
.fmn-trust-receipt-list {
  flex-basis: 100%;
  margin-left: var(--space-3);
  padding-left: var(--space-2_5);
  border-left: 2px solid var(--border-default);
  display: flex; flex-direction: column; gap: 2px;
}
.fmn-trust-receipt-item {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  color: var(--color-ink-300);
}

/* ---------- the docked agent (MB-R2 mod 01) ---------- */

/* AgentModal.dock() mounts the real conversation UI here. The host is already
   a flex column (.fmn-chat), so the transcript just needs permission to shrink;
   modals.css gives .agm-transcript a 200px floor that would stop it scrolling. */
.agm-dock { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.agm-dock .agm-transcript { min-height: 0; }
/* No overlay chrome in dock mode: the shell owns the frame. */
.agm-dock .agm-inputbar { border-top: 1px solid #EEEEEC; }
.agm-dock .agm-foot { padding: 0 var(--space-4) var(--space-3); }

/* Annotations printed ON the data, not described above it. */
.fmn-annot {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  font-weight: 700;
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}
.fmn-annot.is-ai      { background: var(--fmn-ai); color: var(--fmn-chrome); }
.fmn-annot.is-neutral { background: var(--color-paper-100); color: var(--color-ink-300); }

/* ---------- canvas chrome ---------- */

/* MB-R2: renderers return one frame element that the router drops into the
   .fmn-canvas pane, so the frame - not the pane - is the flex column. */
.fmn-canvas-frame {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}
.fmn-canvas-iconbtn {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--bg-elev-1);
  color: var(--color-ink-300);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fmn-canvas-kind {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.fmn-canvas-spacer { flex: 1; }

/* A record that is gone, or not visible to this user. Never a blank pane. */
.fmn-canvas-missing { padding: var(--space-5) var(--space-4); }
.fmn-canvas-missing-title { font-size: var(--text-16); font-weight: 700; }
.fmn-canvas-missing-sub {
  font-size: var(--text-sm); color: var(--color-ink-300);
  line-height: var(--leading-normal); margin-top: 5px;
}

/* Canvas lists: the page modules' own cards, wrapped for navigation. The
   wrapper adds the affordance and nothing else, so the card cannot drift. */
.fmn-canvas-listhead {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1.5px solid var(--border-strong);
}
.fmn-canvas-listtitle { font-family: var(--font-serif); font-size: 23px; font-weight: 600; }
.fmn-canvas-listcount {
  font-family: var(--font-mono); font-size: var(--fmn-label);
  font-weight: 500; letter-spacing: 0.04em; color: var(--color-ink-700);
}
.fmn-canvas-listitem { cursor: pointer; }
.fmn-canvas-listitem:hover { background: var(--color-paper-100); border-radius: 12px; }

.fmn-canvas-mail { margin-bottom: var(--space-3); }

.fmn-canvas-bar {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid #EEEEEC;
  display: flex; align-items: center; gap: var(--space-2);
  flex-shrink: 0;
}
.fmn-canvas-origin {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.06em;
  color: var(--color-ink-300);
}
.fmn-canvas-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--space-4) var(--space-4_5);
  display: flex; flex-direction: column; gap: var(--space-3_5);
}
.fmn-canvas-foot {
  padding: var(--space-3) var(--space-4_5);
  border-top: 1px solid #EEEEEC;
  display: flex; align-items: center; gap: var(--space-2_5);
  flex-shrink: 0;
}
/* A product promise, not decoration. Keep it. */
.fmn-gate {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  color: var(--color-ink-300);
  white-space: nowrap;
  margin-left: auto;
}

.fmn-canvas-tabs { display: flex; gap: var(--space-1_5); border-bottom: 1px solid #EEEEEC; }
.fmn-canvas-tab {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  color: var(--color-ink-300); padding: 9px 13px;
  border-bottom: 2.5px solid transparent;
}
.fmn-canvas-tab.is-on { color: var(--text-primary); font-weight: 700; border-bottom-color: var(--fmn-chrome); }

/* ---------- buttons ---------- */

.fmn-btn {
  height: var(--fmn-tap-primary);
  padding: 0 var(--space-4_5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600;
  color: var(--text-primary);
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
/* Primary is BLACK. Yellow is reserved for AI. */
.fmn-btn.is-primary { background: var(--fmn-chrome); color: #fff; border-color: var(--fmn-chrome); font-size: 14.5px; font-weight: 700; }
/* The only yellow button: invoking the AI. */
.fmn-btn.is-ai      { background: var(--fmn-ai); color: var(--fmn-chrome); border-color: var(--fmn-ai); font-weight: 700; }
.fmn-btn.is-compact { height: var(--fmn-tap); padding: 0 var(--space-3_5); }

/* ---------- Focus / Detail ---------- */

/* Focus is the default. Density is a rep instrument; it should not be the
   first thing a director or a visitor meets. */
.fmn-segment { display: flex; background: var(--color-paper-100); border: 1px solid var(--border-default); border-radius: 11px; overflow: hidden; }
.fmn-segment button {
  height: 38px; padding: 0 var(--space-3_5);
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-ink-300);
}
.fmn-segment button.is-on { background: var(--fmn-chrome); color: #fff; font-weight: 700; }

.fmn-shell[data-density="focus"] [data-density-only="detail"] { display: none; }

/* ---------- outdoors ---------- */

/* Not just brighter — heavier. A phone in Gulf Coast sun at 2pm. */
.fmn-shell[data-sun="on"] {
  --border-default: rgba(28, 28, 26, 0.24);
  --text-secondary: var(--color-ink-900);
  --color-ink-300:  var(--color-ink-900);
}
.fmn-shell[data-sun="on"] .fmn-ai-panel { border-width: 2px; }

/* ---------- responsive ---------- */

/* iPad portrait: the canvas takes over, chat becomes a sheet. Never try to
   show both zones under 1000px — you get two unusable columns. */
@media (max-width: 1000px) {
  .fmn-chat { position: absolute; inset: auto 0 0 0; width: 100%; height: 62vh; border-radius: 18px 18px 0 0; z-index: var(--z-side-panel); }
  .fmn-zones { position: relative; }
}
/* Phone: rail becomes a bottom bar, thumb-reachable. */
@media (max-width: 640px) {
  .fmn-shell { flex-direction: column-reverse; }
  .fmn-rail { width: 100%; height: 76px; flex-direction: row; justify-content: space-around; padding: 0 var(--space-2); }
  .fmn-rail-mark, .fmn-rail-spacer { display: none; }
}

/* ============================================================
   MB-R3 mod 03 — voice capture (frames 4b / 4c)

   LAYERING, verified against the --z-* scale in tokens.css:
     --z-side-panel      900   the portrait chat sheet
     [capture sheet]     950   <-- here
     --z-modal-backdrop 1000
     --z-modal          1010   the composer and every modal
   The capture sheet sits ABOVE the shell and the portrait chat sheet, and
   BELOW every modal tier, because the composer must always be able to open
   over a capture in progress. It is not a modal-stacking citizen: it never
   spawns a modal, so it never needs an escalating level.
   ============================================================ */

.fmn-capture-sheet {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--bg-page);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4_5) var(--space-6);
  /* One column, centered, so the confirm sheet reads as a form and not as a
     landscape dashboard on an iPad. */
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: var(--fmn-body);
  color: var(--text-primary);
}

.fmn-cap-title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.fmn-cap-hint {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-700);
}
.fmn-cap-timer {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-ink-700);
  font-variant-numeric: tabular-nums;
}

/* The live transcript. Mono so a mis-heard name is obvious at a glance. */
.fmn-cap-live {
  flex: 1;
  min-height: 120px;
  max-height: 42vh;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: var(--leading-relaxed);
  color: var(--color-ink-900);
  background: var(--bg-elev-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3_5);
  white-space: pre-wrap;
}

/* The one yellow control in the sheet. Capture IS the AI's input, so this is
   the same exemption the rail's LOG IT key holds under the yellow rule. */
.fmn-cap-stop {
  min-height: 84px;
  border: none;
  border-radius: 18px;
  background: var(--fmn-ai);
  color: var(--fmn-chrome);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2_5);
  cursor: pointer;
  flex-shrink: 0;
}
.fmn-cap-stop:active { transform: translateY(1px); }

.fmn-cap-cancel {
  min-height: var(--fmn-tap);
  border: none;
  background: transparent;
  color: var(--color-ink-700);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  text-decoration: underline;
  cursor: pointer;
  flex-shrink: 0;
}

.fmn-cap-typed {
  min-height: 200px;
  resize: vertical;
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-elev-1);
  border: 1.5px solid var(--fmn-chrome);
  border-radius: var(--radius-lg);
  padding: var(--space-3_5);
}

/* ---------- 4c: the confirm sheet ---------- */

.fmn-cap-pillrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fmn-cap-pill-label {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.06em;
  color: var(--color-ink-300);
  width: 72px;
  flex-shrink: 0;
}
.fmn-cap-pill {
  flex: 1;
  min-width: 0;
  min-height: var(--fmn-tap);
  text-align: left;
  padding: 0 var(--space-3_5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
/* Rose, not yellow: this is "the assistant is not sure", which is a caution,
   not an AI surface. Yellow would read as a recommendation. */
.fmn-cap-pill.is-unsure {
  border: 2px solid var(--color-rose-200);
  background: var(--color-rose-50);
  color: var(--color-rose-800);
}

.fmn-cap-select {
  flex: 1;
  min-width: 0;
  min-height: var(--fmn-tap);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  color: var(--text-primary);
  text-transform: capitalize;
}

.fmn-cap-body {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-elev-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3_5);
}

.fmn-cap-section {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.06em;
  color: var(--color-ink-700);
  margin-top: var(--space-2);
}

.fmn-cap-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--fmn-tap);
  padding: 11px var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  cursor: pointer;
}
.fmn-cap-item.is-unsure {
  border: 1.5px solid var(--color-rose-200);
  background: var(--color-rose-50);
}
.fmn-cap-item input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--fmn-chrome);
}
.fmn-cap-item-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-900);
}

/* Saving is an ACTION, not an AI surface: chrome, per the yellow rule. */
.fmn-cap-save {
  min-height: var(--fmn-tap-primary);
  border: 1px solid var(--fmn-chrome);
  border-radius: var(--radius-lg);
  background: var(--fmn-chrome);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-16);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.fmn-cap-save:disabled { opacity: 0.6; cursor: default; }

/* ---------- name lookup inside the confirm sheet ---------- */

.fmn-cap-search {
  flex: 1;
  min-width: 0;
  min-height: var(--fmn-tap);
  padding: 0 var(--space-3_5);
  border: 1.5px solid var(--fmn-chrome);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  color: var(--text-primary);
}
.fmn-cap-search-hits {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
  width: 100%;
}
.fmn-cap-search-hit {
  min-height: var(--fmn-tap);
  text-align: left;
  padding: 0 var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  color: var(--text-primary);
  cursor: pointer;
}
.fmn-cap-search-hit:hover { background: var(--color-paper-100); }

/* ---------- the offline queue chip ---------- */

/* Peach, not rose: queued is a WAITING state, not a failure. Nothing is lost,
   and the chip must not read as an error the rep has to fix. */
.fmn-cap-queue-chip {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--color-peach-200);
  border-radius: var(--radius-sm);
  background: var(--color-peach-50);
  color: var(--color-peach-800);
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.fmn-cap-queue-chip:disabled { opacity: 0.6; cursor: default; }

/* The chip lives under LOG IT in the rail, which is dark. */
.fmn-rail .fmn-cap-queue-chip { margin-bottom: var(--space-2); }

@media (max-width: 640px) {
  /* Phone: the sheet is the whole screen and the stop target grows. */
  .fmn-capture-sheet { padding: var(--space-4) var(--space-3_5) var(--space-5); gap: var(--space-2_5); }
  .fmn-cap-stop { min-height: 96px; }
  .fmn-cap-pill-label { width: 100%; }
}

/* ---------- chat cards that ASK something (frames 4a / 4d) ----------
   A who-to-reach card navigates, so it is a <button>. These do not: they carry
   two answers. Same card skin, an action row instead of a click target. */
.fmn-chat-prompt { display: flex; flex-direction: column; gap: var(--space-2_5); }
.fmn-chat-cardactions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fmn-chat-cardactions .fmn-btn { flex: 1; min-width: 128px; }

/* ============================================================
   MB-R3 mod 09 — impact (1d) · material (3c) · MD board (5b) · Ops board (5c)
   ============================================================ */

/* ---------- 1d: the scoreboard ---------- */

.fmn-imp-loading { font-size: var(--text-sm); color: var(--color-ink-300); }

.fmn-imp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.fmn-imp-stat {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-elev-1);
  padding: var(--space-3_5);
}
.fmn-imp-num {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.fmn-imp-label {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.06em;
  color: var(--color-ink-300);
  margin-top: 5px;
}

/* The gate is the whole point of the board. Chrome, and the loudest thing
   on it: this is a promise about the product, not an AI output. */
.fmn-imp-gate {
  background: var(--fmn-chrome);
  color: #fff;
  border-radius: 14px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fmn-imp-gate strong {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.fmn-imp-gate span { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.78); }

/* The one estimate on the board, and it shows its arithmetic. Peach, not
   yellow: it is a caveat, not an AI surface. */
.fmn-imp-est {
  border: 1px solid var(--color-peach-200);
  background: var(--color-peach-50);
  border-radius: 14px;
  padding: var(--space-3_5);
}
.fmn-imp-est-head { font-size: var(--text-16); font-weight: 700; color: var(--color-peach-900); }
.fmn-imp-est-math {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  line-height: var(--leading-normal);
  color: var(--color-peach-800);
  margin-top: 5px;
}

.fmn-imp-spend {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.03em;
  color: var(--color-ink-700);
}

/* ---------- 3c: material ---------- */

.fmn-mat-head { display: flex; flex-direction: column; gap: 6px; }
.fmn-mat-name {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.fmn-mat-spec {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.02em;
  color: var(--color-ink-700);
}
.fmn-mat-desc { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ink-700); }

.fmn-mat-section {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.06em;
  color: var(--color-ink-300);
  border-top: 1px solid #EEEEEC;
  padding-top: var(--space-3);
}
.fmn-mat-empty { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ink-300); }
.fmn-mat-switch { display: flex; flex-direction: column; gap: var(--space-2); }

.fmn-mat-row, .fmn-mail-row {
  min-height: var(--fmn-tap);
  width: 100%;
  text-align: left;
  padding: 10px var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  color: var(--text-primary);
  cursor: pointer;
}
.fmn-mat-row:hover, .fmn-mail-row:hover { background: var(--color-paper-100); }
/* A competitor mention is a live opening, not a warning about the account. */
.fmn-mat-row.is-switch { border-left: 3px solid var(--color-peach-400); }
.fmn-mail-row.is-flat { cursor: default; color: var(--color-ink-300); }
.fmn-mail-row.is-flat:hover { background: var(--bg-elev-1); }

.fmn-mail-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fmn-mail-hint { font-size: var(--text-sm); color: var(--color-ink-300); }

/* ---------- 5b: the MD board ---------- */

.fmn-md-week {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.06em;
  color: var(--color-ink-300);
}
.fmn-md-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fmn-md-label { font-size: var(--text-16); font-weight: 600; min-width: 148px; }
.fmn-md-nums {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-700);
  min-width: 62px;
}
.fmn-md-bar {
  flex: 1;
  min-width: 120px;
  height: 12px;
  border-radius: 6px;
  background: var(--color-paper-100);
  overflow: hidden;
}
.fmn-md-fill { display: block; height: 100%; border-radius: 6px; background: var(--color-ink-300); }
/* States come straight from DirectiveStats.cell().state, so the board and the
   Sales Flash report can never disagree about what "behind" means. */
.fmn-md-fill.is-met   { background: var(--fmn-chrome); }
.fmn-md-fill.is-near  { background: var(--color-peach-400); }
.fmn-md-fill.is-under { background: var(--color-rose-400); }

/* ---------- 5c: the Ops board ---------- */

/* Rose, deliberately. This banner is the trust rules turned on ourselves and
   it must not be comfortable to look at or easy to stop noticing. */
.fmn-ops-banner {
  border: 2px solid var(--color-rose-200);
  background: var(--color-rose-50);
  color: var(--color-rose-800);
  border-radius: 14px;
  padding: var(--space-3_5);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-normal);
}
.fmn-ops-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--fmn-tap);
  padding: 0 var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
}
.fmn-ops-name { flex: 1; font-size: var(--text-16); font-weight: 600; }
.fmn-ops-src, .fmn-ops-qty {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.04em;
  color: var(--color-ink-300);
}
.fmn-ops-qty { min-width: 62px; text-align: right; }

/* ---------- the manager board switcher, in the shell header ---------- */

.fmn-board-switch { display: flex; gap: var(--space-1_5); margin-left: auto; }
.fmn-board-switch:empty { display: none; }
.fmn-segment-btn {
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--bg-elev-1);
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink-700);
  cursor: pointer;
}
.fmn-segment-btn:hover { background: var(--color-paper-100); }

.fmn-help-btn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 700;
  color: var(--color-ink-700);
  cursor: pointer;
}
/* Sits at the right edge whether or not the manager switcher is present. */
.fmn-board-switch:empty + .fmn-help-btn { margin-left: auto; }
.fmn-help-btn:hover { background: var(--color-paper-100); }

/* ============================================================
   MB-R3 mods 07 / 08 — the Morning-Brief landing and the clean slate
   ============================================================ */

/* The chat head is a sibling of the dock host, so AgentModal.dock() still owns
   everything below it and needs no knowledge of the shell. */
.fmn-chat-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid #EEEEEC;
  flex-shrink: 0;
}
.fmn-chat-head-title {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.06em;
  color: var(--color-ink-300);
}
.fmn-chat-new {
  margin-left: auto;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--color-ink-700);
  cursor: pointer;
}
.fmn-chat-new:hover { background: var(--color-paper-100); }

.fmn-chat > #fmn-chat-host { flex: 1; min-height: 0; }

/* THE LANDING. Frame 1b: on a cold load there is exactly ONE input, the
   askbar. The docked chat's own input row would be a second box asking the
   same question, which is the redundancy this resolves. It reveals itself the
   moment he interacts, and from then on both work. */
.fmn-shell.is-landing .agm-dock .agm-inputbar { display: none; }
.fmn-shell.is-landing .fmn-askbar { border-width: 2px; }

/* ============================================================
   MB-R3 c3 — the first-run story (frame 5d)

   z 960: above the capture sheet (950) and the portrait chat sheet (900),
   below --z-modal-backdrop (1000). It is the first thing a new user sees, so
   nothing in the shell may sit over it, but a modal still can.
   ============================================================ */

.fmn-first-run {
  position: fixed;
  inset: 0;
  z-index: 960;
  background: rgba(22, 21, 15, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.fmn-fr-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg-elev-1);
  border-radius: 20px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 18px 48px rgba(22, 21, 15, 0.28);
}
.fmn-fr-step {
  font-family: var(--font-mono);
  font-size: var(--fmn-label);
  letter-spacing: 0.08em;
  color: var(--color-ink-300);
}
.fmn-fr-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.fmn-fr-body {
  font-size: var(--fmn-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-700);
  margin: 0;
}
.fmn-fr-dots { display: flex; gap: 6px; }
.fmn-fr-dot {
  width: 22px; height: 4px;
  border-radius: 2px;
  background: var(--color-paper-100);
}
/* Chrome, not yellow: progress through an intro is not an AI output. */
.fmn-fr-dot.is-on { background: var(--fmn-chrome); }

.fmn-fr-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.fmn-fr-skip {
  min-height: var(--fmn-tap);
  border: none; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--color-ink-300);
  text-decoration: underline;
  cursor: pointer;
}
.fmn-fr-next {
  margin-left: auto;
  min-height: var(--fmn-tap-primary);
  padding: 0 var(--space-5);
  border: 1px solid var(--fmn-chrome);
  border-radius: var(--radius-lg);
  background: var(--fmn-chrome);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-16); font-weight: 700;
  cursor: pointer;
}