/* Navigation supplement — router.js / boot.js / lifecycle-band.js.
 *
 * Everything else about the rail (width, the icons-only and drawer
 * breakpoints, the full-height sticky background) already lives in
 * app.css, owned by another agent in this pass — do NOT duplicate those
 * rules here, and do not edit app.css. This file only carries the ONE new
 * layout need router.js's own fixes introduced: the "real blocker + one
 * CTA" locked banner (SYNTHESIS round-3 #5) needs its action link pinned
 * to the end of the existing `.mai-locked-banner` flex row, which app.css
 * never had to lay out before (the old banner — `_shared.js`'s
 * `lockedNote()` — was reason text alone, no action).
 *
 * Round-3 #36 ("the sidebar background stops at about 900px"): verified
 * live (2026-09-26, chrome-devtools MCP, a Germany-market Command Centre
 * with content 2152px tall against an ~874px viewport) — `.mai-rail`'s
 * existing `position: sticky; height: 100vh; overflow-y: auto` already
 * covers the full viewport at every height and follows the scroll
 * correctly. That rule predates this pass (the shell redesign,
 * modernaiset-shell); nothing here duplicates or overrides it — the round-2
 * finding this item names is already fixed by app.css alone.
 *
 * Consistency round C8/M3: the padlock used to mean three different things
 * (done, read-only, no access — SYNTHESIS M3). router.js/boot.js now split
 * "done, kept for reference" from "not yet reached" into two mutually
 * exclusive classes, `.is-done` and `.is-locked` — never both on the same
 * node. `.is-locked`/`.mai-rail-lock-ic`/`.mai-locked-banner` are app.css's
 * own selectors (the padlock, and the dimming that goes with "not yet
 * reached"); `.is-done` and its icon are NEW selectors app.css never had
 * reason to style — a tick, and no dimming, because the place stays fully
 * usable. Adding them here does not touch or duplicate app.css's rules.
 */

.mai-locked-banner-cta {
  margin-left: auto;
  flex: none;
}

.mai-rail-group-done { display: inline-flex; color: var(--mai-good-ink); }
.mai-rail-group-done[hidden] { display: none; }
.mai-rail-done-ic { flex: none; color: var(--mai-good-ink); }
.mai-rail-done-ic[hidden] { display: none; }

.mai-locked-banner.is-done { border-style: solid; border-color: var(--mai-good); }
.mai-locked-banner.is-done .mai-locked-banner-ic { color: var(--mai-good-ink); }

/* Round-4 review M3: a band not yet reached collapses to ONE line — its label
 * plus the unlock condition — and finished bands fold into one collapsed
 * "Setup history" group at the bottom of the rail. */
.mai-rail-group-unlock { font-family: var(--mai-sans, inherit); letter-spacing: 0; text-transform: none; }
.mai-rail-group-unlock[hidden] { display: none; }
/* Round-6 #39: a not-yet-open band lists its places (greyed, padlock) so
 * the whole journey is visible from day one — no longer hidden. */
.mai-rail-group.is-locked > .mai-rail-item.is-locked,
.mai-rail-group.is-locked > .mai-rail-section-label { opacity: 0.55; }
.mai-rail-group.is-locked > .mai-rail-item.is-locked:hover { opacity: 0.85; }
.mai-rail-history-toggle {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; width: 100%;
  text-align: left; cursor: pointer; border-radius: var(--mai-radius);
}
.mai-rail-history-toggle:hover { color: var(--mai-ink); }
.mai-rail-history-toggle:focus-visible { outline: none; box-shadow: var(--mai-focus); }
.mai-rail-history-chev { display: inline-flex; margin-left: auto; transition: transform 120ms ease; }
.mai-rail-history.is-open .mai-rail-history-chev { transform: rotate(180deg); }
.mai-rail-history[hidden], .mai-rail-history-body[hidden] { display: none; }
.mai-rail-history-body { display: flex; flex-direction: column; gap: 2px; }
.mai-rail-history-body .mai-rail-group > .mai-rail-group-label { display: none; }
/* Round-4 m14: data-mode badge in the always-visible scope card. */
.mai-rail-scope-body .mai-rail-synthetic { margin-top: 4px; padding: 1px 6px; border-radius: var(--radius-sm); align-self: flex-start; }
.mai-manage-refused { margin: 0 0 var(--space-3); }
.mai-route-notice { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--mai-warn); background: var(--mai-warn-soft); color: var(--mai-ink); font-size: 13px; border-radius: 4px; }
/* Round-6 #6: the counted item (Decisions) never truncates its label — the
 * label takes its own width, the ONE compact badge sits at the far end;
 * hand-offs are on the Decisions page, not in the rail. A CEO's badge is
 * neutral (rule 1: a roll-up to read, not a red to-do count). */
.mai-rail-item.has-count .mai-rail-label { flex: 0 0 auto; overflow: visible; }
.mai-rail-item.has-count .mai-rail-count { margin-left: auto; }
.mai-rail-count.is-neutral { background: var(--mai-surface-2); color: var(--mai-ink-2); border: 1px solid var(--mai-line-2); }

/* Round-6 #28: Operate / Prove / Plan sub-heads inside the live band. */
.mai-rail-section-label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mai-ink-3);
  padding: var(--space-2) var(--space-2) 2px calc(var(--space-2) + 1px);
}
.mai-rail-group > .mai-rail-section-label:first-of-type { padding-top: 2px; }
@media (max-width: 1099px) { .mai-rail:not([data-open]) .mai-rail-section-label { display: none; } }
/* Connect data hoisted into Analyse while a department there has no data. */
.mai-rail-item.is-next .mai-rail-label::after { content: " · next"; color: var(--mai-warn-ink); font-size: 11px; font-family: var(--mai-mono); }

/* Round-6 #6/#40: the rail's background runs the full page height (a full-
 * page capture used to show it stopping at ~900px — the sticky rail is one
 * viewport tall), nothing in the rail shrinks (the scope card overflowed
 * its own border when the nav was long), and the foot (Admin, Manage, the
 * user chip) follows the nav in the rail's own scroll box — never pinned
 * over it (a pinned foot covered the current page's own rail item). */
.mai-shell { position: relative; }
.mai-shell::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--mai-rail-w);
  background: var(--mai-rail); border-right: 1px solid var(--mai-line); pointer-events: none; z-index: 0;
}
@media (max-width: 1099px) { .mai-shell::before { width: var(--mai-rail-w-icon); } }
@media (max-width: 719px) { .mai-shell::before { display: none; } }
.mai-rail > * { flex-shrink: 0; }

.mai-rail-scope { height: auto; }
.mai-rail-scope-name { white-space: normal; overflow-wrap: anywhere; }

/* Round-6 #39: a not-yet-open page lists its unmet exit criteria. */
.mai-exit-criteria { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 2px; max-width: 480px; }
.mai-exit-criterion { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--mai-line); font-size: var(--fs-sm); }
.mai-exit-criterion.is-met { color: var(--mai-ink-3); }
.mai-exit-criterion.is-met .mai-exit-mark { color: var(--mai-good-ink); }
.mai-exit-count { font-family: var(--mai-mono); font-size: 12px; color: var(--mai-ink-2); }

/* Round-6 NEW: cross-market function scope chips in the top bar. */
.mai-fnscope { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-3); }
.mai-fnscope[hidden] { display: none; }
.mai-fnscope-label { font-size: var(--fs-xs); color: var(--mai-ink-2); margin-right: 2px; }
.mai-fnscope-chip {
  font-family: var(--mai-mono); font-size: 11px; line-height: 1; padding: 5px 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--mai-line-2); color: var(--mai-ink-2); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center;
}
.mai-fnscope-chip:hover { color: var(--mai-ink); background: var(--mai-surface-2); }
.mai-fnscope-chip.is-current { background: var(--mai-accent-soft); color: var(--mai-ink); border-color: transparent; font-weight: 600; }
.mai-fnscope-chip.is-readonly:not(.is-current) { border-style: dashed; }
@media (max-width: 719px) { .mai-fnscope { display: none; } }

/* AI-in-the-loop §1: a sliced rail group's sub-headings ("Where the fee leaks",
   "How mature") reuse the section label above; the places under one are indented,
   and a leak place carries its £ from the board (boot.js::paintRailAmounts). */
.mai-rail-item.is-sub { padding-left: calc(var(--space-2) + 10px); }
.mai-rail-amt { flex: none; margin-left: auto; font-family: var(--mai-mono); font-size: 11px; color: var(--mai-crit-ink); font-variant-numeric: tabular-nums; }
.mai-rail-item:has(.mai-rail-amt) .mai-rail-label { flex: 0 1 auto; }
@media (max-width: 1099px) {
  .mai-rail:not([data-open]) .mai-rail-amt { display: none; }
  .mai-rail:not([data-open]) .mai-rail-item.is-sub { padding-left: var(--space-2); }
}

/* modernAIseL control surfaces (2026-10-13): the seven-band rail — each band a
   collapsible group (glyph, label, chevron), its places indented under a guide
   line. Only `.mai-rail-nav-banded` (boot.js::buildBandedRailNav) uses these. */
.mai-rail-nav-banded { gap: 2px; }
.mai-rail-band { gap: 0; }
.mai-rail-band-toggle {
  appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 40px; padding: 0 var(--space-2); border: 0; border-radius: var(--mai-radius);
  background: transparent; color: var(--mai-ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-align: left; cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
}
.mai-rail-band-toggle:hover { background: var(--mai-surface-2); color: var(--mai-ink); }
.mai-rail-band-toggle:focus-visible { outline: none; box-shadow: var(--mai-focus); }
.mai-rail-band.holds-current > .mai-rail-band-toggle { color: var(--mai-ink); }
.mai-rail-band.holds-current > .mai-rail-band-toggle .mai-rail-icon { color: var(--mai-accent-text); }
.mai-rail-band-chev { display: inline-flex; flex: none; margin-left: auto; color: var(--mai-ink-3); transform: rotate(-90deg); transition: transform 140ms ease; }
.mai-rail-band.is-open > .mai-rail-band-toggle .mai-rail-band-chev { transform: rotate(0deg); }
.mai-rail-band-body {
  display: flex; flex-direction: column; gap: 1px; margin: 2px 0 var(--space-2) 17px;
  padding-left: var(--space-2); border-left: 1px solid var(--mai-line);
}
.mai-rail-band-body[hidden] { display: none; }
.mai-rail-band-body > .mai-rail-section-label { padding-left: var(--space-2); }
.mai-rail-item.is-child { min-height: 34px; gap: var(--space-2); }
.mai-rail-item.is-child .mai-rail-icon { display: none; }
.mai-rail-item.is-child[aria-current="page"] { box-shadow: inset 2px 0 0 var(--mai-accent); }
.mai-rail-item.is-child.is-sub { padding-left: calc(var(--space-2) + 8px); }
@media (prefers-reduced-motion: reduce) { .mai-rail-band-chev, .mai-rail-band-toggle { transition: none; } }
@media (max-width: 1099px) {
  .mai-rail:not([data-open]) .mai-rail-band-toggle { justify-content: center; }
  .mai-rail:not([data-open]) .mai-rail-band-chev { display: none; }
  .mai-rail:not([data-open]) .mai-rail-band-body { margin-left: 0; padding-left: 0; border-left: 0; }
  .mai-rail:not([data-open]) .mai-rail-item.is-child { justify-content: center; padding-left: var(--space-2); }
  .mai-rail:not([data-open]) .mai-rail-item.is-child .mai-rail-icon { display: inline-flex; }
}
.mai-rail-band-toggle .mai-rail-label { white-space: normal; line-height: 1.25; }
.mai-rail-item.is-band { font-weight: 600; }