/* The page is one surface: parts are joined by lines instead of floating as cards on a canvas. The dark page head sits
   attached under the top bar; popups, side panels, menus and toasts are the only things that still float. */

/* ---------- The surface ---------- */
/* No column cap: the page uses the whole screen, its edge growing a little with the width. Running text and forms keep
   a readable width of their own, left aligned on the same edge. */
.app-shell {
  --gutter: 28px;
  --pad-x: max(var(--gutter), 2.4vw);
}
@media (max-width: 860px) { .app-shell { --gutter: 16px; } }

/* The admin shares the shell but keeps its padded canvas, so these hold only where the surface is. */
.main:has(> .surface) { background: var(--panel); container: page / inline-size; }
.main:has(> .surface)::before { display: none; }
.main:has(> .surface) > .appfoot { border-top: 0; padding-left: var(--pad-x); padding-right: max(var(--pad-x), 80px); }

/* The page itself: no padding of its own, every part pads its own content to the column. */
.surface { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Every block that touches the page edge takes its inline padding from --zl and --zr, so a half can narrow them. */
.phead, .zone-head, .zone-body, .zone-note, .strip, .figs, .toolbar, .bulkbar,
.rl-head, .rl-row, .rl-group, .rl-foot, .actionbar, .empty-line, .edge-pad {
  padding-left: var(--zl, var(--pad-x)); padding-right: var(--zr, var(--pad-x));
}

/* ---------- The page head: what this page is and what you can do here ---------- */
/* Its menus open over the page below it, so the head is never clipped and sits above what follows. */
.phead {
  position: relative; z-index: 5; isolation: isolate;
  padding-top: 22px; padding-bottom: 24px;
  background: var(--stage-bg); color: var(--stage-ink);
}
.phead::before, .phead::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.phead::before {
  opacity: .75;
  background: radial-gradient(60% 140% at 100% 0%, var(--stage-glow-1), transparent 62%), radial-gradient(40% 120% at 0% 100%, var(--stage-glow-2), transparent 70%);
}
.phead::after { background-image: radial-gradient(var(--stage-dot) 1px, transparent 1px); background-size: 18px 18px; mask-image: var(--fade-right); }
.phead.has-tabs { padding-bottom: 0; }

/* The head is a grid: the title on the left, and on the right the aside with the actions beside it at the very top and
   the figures under them, so nothing beside the title can push the actions down or off the screen. */
.phead-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto 1fr; grid-template-areas: "ic title aside act" "ic title stats stats"; align-items: start; }
.phead-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; margin-right: 14px; border-radius: var(--r-l); background: var(--paper); color: var(--rtc, var(--brand)); }
.phead-ic svg { width: 22px; height: 22px; }
.phead-title { min-width: 0; }
/* Only inside the head's own grid do its parts take named places; a page that builds its own hero grid places them itself. */
.phead-top > .phead-ic { grid-area: ic; }
.phead-top > .phead-title { grid-area: title; }
.phead-top > .phead-actions { grid-area: act; }
.phead-top > .phead-aside { grid-area: aside; }
.phead-kicker { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--stage-muted); }
.phead h1 { display: block; margin: 2px 0 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: var(--tr-tight); color: var(--stage-ink); overflow-wrap: anywhere; }
/* A long title wraps, and its info icon follows the last word instead of the right edge of the head. */
.phead h1 .itip { --tip: var(--stage-muted); display: inline-flex; vertical-align: middle; margin-left: 8px; }
.phead-lead { margin: 6px 0 0; max-width: 680px; font-size: var(--fs-m); line-height: 1.5; color: var(--stage-muted); }
.phead-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; justify-self: end; gap: 8px; margin-left: 18px; }
.phead-actions > form { display: flex; }

/* Buttons on the dark head: the main one keeps the action fill, the rest are glass. */
.phead .btn:not(.primary) { border-color: var(--stage-rim); background: var(--stage-fill); color: var(--stage-ink); box-shadow: none; }
.phead .btn:not(.primary):hover:not(:disabled) { border-color: var(--stage-flow); background: var(--stage-fill-hover); color: var(--stage-ink); }
.phead .btn.primary { border-color: transparent; background: var(--stage-action); color: #fff; }
.phead .btn.primary:hover:not(:disabled) { background: var(--stage-action-hover); color: #fff; }
.phead .more > summary { border-color: var(--stage-rim); background: var(--stage-fill); color: var(--stage-ink); }
.phead .more > summary:hover { background: var(--stage-fill-hover); color: var(--stage-ink); }
.phead .more-menu { color: var(--ink); }

/* Small facts on the dark head: a dot of colour and a few words; one that links lights up on hover. */
.ph-badge {
  --tone: var(--stage-flow);
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; color: var(--stage-ink); text-decoration: none;
  background: color-mix(in srgb, var(--tone) 16%, var(--tone-base, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 36%, var(--tone-base, transparent));
}
.ph-badge svg { width: 13px; height: 13px; color: var(--tone); }
.ph-badge.ok { --tone: var(--stage-ok); }
.ph-badge.warn { --tone: var(--warn); }
.ph-badge.bad { --tone: var(--stage-bad); --tone-base: var(--stage-bad-base); }
.ph-badge.mute { --tone: var(--stage-muted); }
.ph-badge .brandmark { width: 64px; height: 18px; padding: 0 5px; border: 0; }
a.ph-badge:hover { color: var(--stage-ink); background: color-mix(in srgb, var(--tone) 26%, var(--tone-base, transparent)); }

/* ---------- Plates on the dark stage: a system or the hub, joined by a beam that flows once both sides are there ---------- */
.deck-status { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 4px 11px; border-radius: var(--r-full); background: var(--stage-fill); color: var(--stage-ink); font-size: var(--fs-xs); font-weight: 600; }
.deck-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--stage-flow); }
.deck-status.ok i { background: var(--stage-ok); }
.deck-status.warn i { background: var(--warn); }
.deck-status.bad i { background: var(--stage-bad); }

.deck-plate { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: 168px; height: 50px; border-radius: 14px; background: var(--stage-fill); color: var(--stage-ink); font-size: var(--fs-s); font-weight: 600; }
.deck-plate svg { width: 16px; height: 16px; }
.deck-slot { border: 1px dashed color-mix(in srgb, var(--stage-ink) 32%, transparent); background: none; color: var(--stage-muted); line-height: 1.15; text-align: center; }
.deck-beam { position: relative; flex: 1; min-width: 20px; height: 2px; margin-inline: 2px; overflow: hidden; background: color-mix(in srgb, var(--stage-flow) 30%, transparent); }
.deck-beam.off { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--stage-flow) 40%, transparent) 0 4px, transparent 4px 10px); }
.deck-beam.live::before, .deck-beam.live.both::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26%; background: linear-gradient(90deg, transparent, var(--stage-flow), transparent); }
.deck-beam.live::before { animation: deck-run 2.8s linear infinite; }
.deck-beam.live.both::after { animation: deck-back 2.8s linear infinite; }
@keyframes deck-run { from { left: -26%; } to { left: 100%; } }
@keyframes deck-back { from { left: 100%; } to { left: -26%; } }

/* A tick on the corner of a plate on the dark stage, popped in by its page once that side is connected. */
.check-badge {
  position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--stage-ok); color: var(--stage-on-ok); box-shadow: 0 0 0 3px var(--stage-bg); transform: scale(0);
  transition: transform .4s var(--ease-pop);
}
.check-badge svg { width: 13px; height: 13px; stroke-width: 3; }

.phead-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.phead-top:has(.phead-ic) ~ .phead-meta { padding-left: 60px; }
.phead-meta .ph-badge { white-space: nowrap; }
.phead-meta .sep { width: 1px; height: 18px; background: var(--stage-rim); }
.phead-pair { display: inline-flex; align-items: center; }
.phead-pair .brandmark { width: 108px; height: 30px; padding: 0 9px; border: 0; border-radius: 9px; }
.phead-pair .deck-beam { width: 54px; flex: none; }
.phead-pair .deck-plate { width: auto; height: 30px; padding: 0 12px; border-radius: 9px; font-size: var(--fs-xs); }
.phead-pair .deck-plate svg { width: 14px; height: 14px; }
/* The aside: badges and the systems at the top right, the pair stacked source over target with the beam running down. */
.phead-aside { display: flex; align-items: center; justify-self: end; gap: 14px; margin-left: 18px; }
.phead-actions ~ .phead-stats, .phead-aside ~ .phead-stats { margin-top: 14px; }
/* Badges stand in one row beside the systems, never in a staggered pile. */
.phead-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.phead-badges .ph-badge { white-space: nowrap; }
.phead-pair.stack { flex-direction: column; }
.phead-pair.stack .deck-plate { width: 108px; }
.phead-pair.stack .deck-beam { width: 2px; min-width: 0; height: 22px; margin: 3px 0; }
.phead-pair.stack .deck-beam.off { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--stage-flow) 40%, transparent) 0 4px, transparent 4px 10px); }
.phead-pair.stack .deck-beam.live::before, .phead-pair.stack .deck-beam.live.both::after { left: 0; right: 0; bottom: auto; width: auto; height: 40%; background: linear-gradient(180deg, transparent, var(--stage-flow), transparent); }
.phead-pair.stack .deck-beam.live::before { animation-name: deck-down; }
.phead-pair.stack .deck-beam.live.both::after { animation-name: deck-up; }
@keyframes deck-down { from { top: -40%; } to { top: 100%; } }
@keyframes deck-up { from { top: 100%; } to { top: -40%; } }
.phead .crm-plate { background: var(--stage-fill); box-shadow: inset 0 0 0 1px var(--stage-rim); color: var(--stage-ink); }
.phead .crm-plate svg { color: var(--stage-muted); }

.phead-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; }
.phead-stats > div { display: grid; gap: 1px; }
.phead-stats b { font-family: var(--mono); font-size: 22px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--stage-ink); }
.phead-stats b.bad { color: var(--stage-bad); }
.phead-stats span { font-size: var(--fs-xs); color: var(--stage-muted); }
.phead-top > .phead-stats { grid-area: stats; justify-self: end; margin-left: 18px; }

/* Tabs sit on the head's bottom edge: the second level of navigation, never a floating bar. */
.phead-tabs { display: flex; gap: 2px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; }
.phead-tabs::-webkit-scrollbar { display: none; }
.phead-tabs a {
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 14px 12px;
  border-bottom: 2px solid transparent; color: var(--stage-muted); font-size: var(--fs-s); font-weight: 500; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.phead-tabs a svg { width: 15px; height: 15px; }
.phead-tabs a:hover { color: var(--stage-ink); }
.phead-tabs a.on { border-bottom-color: var(--stage-flow); color: var(--stage-ink); font-weight: 600; }
.phead-tabs .tab-count { padding: 0 7px; border-radius: var(--r-full); background: var(--stage-fill); color: var(--stage-ink); font-size: var(--fs-2xs); font-weight: 600; line-height: 18px; }
.phead-tabs .tab-count.info { background: var(--stage-action); }
.phead-tabs .tab-count.bad { background: var(--stage-bad-fill); color: var(--stage-ink); }
.phead-tabs .tab-count.quiet { background: none; box-shadow: inset 0 0 0 1px var(--stage-fill); color: var(--stage-muted); }

/* A tab in the colour of its kind: the tone classes, lightened for the dark head. */
.phead .tone-brand { --stage-tone: var(--stage-flow); }
.phead .tone-sky { --stage-tone: var(--stage-rt-contact); }
.phead .tone-teal { --stage-tone: var(--stage-rt-estimate); }
.phead .tone-steel { --stage-tone: var(--stage-rt-job); }
.phead .tone-gold { --stage-tone: var(--stage-rt-opportunity); }
.phead .tone-graphite { --stage-tone: var(--stage-rt-appointment); }
.phead-tabs a svg { color: var(--stage-tone, currentColor); }
.phead-tabs a.on { border-bottom-color: var(--stage-tone, var(--stage-flow)); }

/* The steps of a flow sit where the tabs do; a step already done can be opened again, one still to come cannot. */
.phead-steps { display: flex; gap: 2px; margin-top: 20px; overflow-x: auto; scrollbar-width: none; }
.phead-steps::-webkit-scrollbar { display: none; }
.phead-steps > * {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px 12px; border-bottom: 2px solid transparent;
  color: var(--stage-muted); font-size: var(--fs-s); font-weight: 500; white-space: nowrap;
}
.phead-steps .num {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--stage-fill); box-shadow: inset 0 0 0 1px var(--stage-rim); color: var(--stage-ink); font-size: var(--fs-2xs); font-weight: 700;
}
.phead-steps .on { border-bottom-color: var(--stage-flow); color: var(--stage-ink); font-weight: 600; }
.phead-steps .on .num { background: var(--stage-action); box-shadow: none; color: #fff; }
.phead-steps .done { color: var(--stage-ink); }
.phead-steps a.done:hover { color: var(--stage-flow); }
.phead-steps .done .num { background: var(--stage-ok); box-shadow: none; color: var(--stage-on-ok); font-size: 0; }
.phead-steps .done .num::after { content: "\2713"; font-size: 12px; }

/* A panel per tab; the open tab lives in the address. */
.tabpanel { display: none; }
.tabpanel.on { display: block; }

/* ---------- The action bar: the last line of a page that changes something ---------- */
.actionbar {
  position: sticky; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; padding-bottom: 12px;
  border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.actionbar .hint { font-size: var(--fs-xs); color: var(--ink-4); }
.actionbar .right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.actionbar form { display: flex; }
.actionbar[hidden] { display: none; }

/* ---------- The trail is the way back: no Back button outside a flow of steps ---------- */
/* The level just above the page stays in the trail, also on a phone, with a chevron in front. */
.top-crumbs > a.crumb-up { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .top-crumbs > a.crumb-up { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; max-width: 45%; }
  .top-crumbs > a.crumb-up::before { content: "\2039"; font-size: 18px; line-height: 1; color: var(--ink-4); }
}

/* ---------- The AI Agents switcher: the crumb opens every agent and every installed sub-account ---------- */
.top-crumbs { overflow: visible; }
.switcher { position: relative; flex: none; }
/* The last crumb is cut with an ellipsis; the switcher never is, or its menu is cut with it. */
.top-crumbs > .switcher.switcher:not(.sep):not(.btn):not(.top-title) { overflow: visible; }
.switch-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-left: -8px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r-btn); background: none; cursor: pointer;
  color: var(--ink-3); font: inherit; font-size: var(--fs-s); white-space: nowrap;
}
.switch-btn svg { width: 15px; height: 15px; color: var(--brand-text); }
.switch-btn .caret { width: 13px; height: 13px; color: var(--ink-4); }
.switch-btn:hover, .switcher.open .switch-btn { border-color: var(--line); background: var(--panel-2); color: var(--ink); }
.top-crumbs > .switcher:last-child .switch-btn { color: var(--ink); font-weight: 600; }
.switch-menu {
  position: absolute; left: -8px; top: calc(100% + 10px); z-index: 60; display: none;
  width: 380px; max-width: calc(100vw - 24px); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); box-shadow: var(--sh-pop);
}
.switcher.open .switch-menu { display: block; }
.sw-search { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.sw-search svg { width: 15px; height: 15px; flex: none; color: var(--ink-4); }
.sw-search input { flex: 1; min-width: 0; height: 28px; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-s); }
.sw-list { max-height: min(470px, 62vh); overflow-y: auto; padding: 6px; }
.sw-all, .sw-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-s); color: var(--ink-2); }
.sw-all { font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.sw-all svg { width: 15px; height: 15px; color: var(--ink-4); }
.sw-n { margin-left: auto; padding: 1px 7px; border-radius: var(--r-full); background: var(--panel-3); color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 600; }
.sw-all:hover, .sw-row:hover { background: var(--panel-2); color: var(--ink); }
.sw-all.on, .sw-row.on { background: color-mix(in srgb, var(--brand-text) 9%, var(--panel)); box-shadow: inset 2px 0 0 var(--brand); }
.sw-sec { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.sw-h { display: flex; align-items: center; gap: 8px; margin: 6px 10px 4px; font-size: var(--fs-2xs); color: var(--ink-4); }
.sw-h .brandmark.xs { width: 86px; height: 20px; }
.sw-hl { font-weight: 600; }
.sw-h a { margin-left: auto; font-weight: 600; }
.sw-row .dot { margin-left: 2px; }
.sw-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); font-weight: 500; color: var(--ink); }
.sw-s { font-size: var(--fs-2xs); color: var(--ink-4); white-space: nowrap; }
.sw-go { font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-text); }
.sw-none { margin: 0; padding: 14px 10px; font-size: var(--fs-xs); color: var(--ink-4); }
.sw-row[hidden], .sw-sec[hidden], .sw-all[hidden], .sw-none[hidden] { display: none; }
.sw-foot { display: flex; flex-direction: column; gap: 1px; padding: 6px; border-top: 1px solid var(--line); background: var(--panel-2); }
.sw-foot a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); font-size: var(--fs-s); font-weight: 600; }
.sw-foot a svg { width: 15px; height: 15px; flex: none; }
.sw-foot a:hover { background: var(--panel-3); }

/* The rail's pages under a group, with how many wait in each. */
.rail .nav-sub a .sub-count {
  margin-left: auto; padding: 1px 7px; border-radius: var(--r-full); background: var(--panel-3);
  color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rail .nav-sub a .sub-count.warn { background: color-mix(in srgb, var(--warn) 14%, var(--panel)); color: var(--warn); }

/* ---------- Narrower pages: the page measures itself, so a collapsed rail gives the content its width back ---------- */
@container page (max-width: 820px) {
  .phead h1 { font-size: 23px; }
  /* The aside and the figures fall under the title; the actions keep the top right corner. */
  .phead-top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: "ic title act" "aside aside aside" "stats stats stats"; }
  .phead-aside, .phead-top > .phead-stats { justify-self: start; margin-left: 0; margin-top: 16px; }
  .phead-actions ~ .phead-aside, .phead-actions ~ .phead-stats, .phead-aside ~ .phead-stats { margin-top: 16px; }
  /* Under the title the aside lies down: badges and the pair side by side, the pair in a row again. */
  .phead-aside { flex-direction: row-reverse; justify-content: flex-end; flex-wrap: wrap; }
  .phead-badges { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .phead-pair.stack { flex-direction: row; }
  .phead-pair.stack .deck-plate { width: auto; }
  .phead-pair.stack .deck-beam { width: 30px; height: 2px; margin: 0 2px; }
  .phead-pair.stack .deck-beam.off { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--stage-flow) 40%, transparent) 0 4px, transparent 4px 10px); }
  .phead-pair.stack .deck-beam.live::before, .phead-pair.stack .deck-beam.live.both::after { top: 0; bottom: 0; right: auto; width: 26%; height: auto; background: linear-gradient(90deg, transparent, var(--stage-flow), transparent); }
  .phead-pair.stack .deck-beam.live::before { animation-name: deck-run; }
  .phead-pair.stack .deck-beam.live.both::after { animation-name: deck-back; }
  .actionbar .hint { display: none; }
  /* Cancel and Back keep the left; the deciding buttons wrap under them on the right when the line is full. */
  .actionbar { flex-wrap: wrap; row-gap: 8px; }
  .actionbar .right { flex-wrap: wrap; justify-content: flex-end; }
}

@container page (max-width: 640px) {
  .phead { padding-top: 16px; padding-bottom: 18px; }
  .phead.has-tabs { padding-bottom: 0; }
  /* On a phone buttons take the top right corner on a line of their own, so the title keeps the full width;
     a lone More button stays beside the title. */
  .phead-top:has(> .phead-actions > :not(details.more)) { grid-template-areas: "act act act" "ic title title" "aside aside aside" "stats stats stats"; }
  .phead-top:has(> .phead-actions > :not(details.more)) > .phead-actions { margin: 0 0 12px; }
  /* When they need two lines the overflow lines up above, so the last one, the More button, stays top right. */
  .phead-actions { flex-wrap: wrap-reverse; margin-left: 12px; }
  .phead-ic { width: 38px; height: 38px; margin-right: 12px; }
  .phead-top:has(.phead-ic) ~ .phead-meta { padding-left: 0; }
  .phead-stats { gap: 18px; }
  .phead-pair .brandmark { width: 88px; height: 26px; }
  .phead-pair .deck-beam { width: 30px; }
  .phead-meta .sep { display: none; }
  .phead-steps > :not(.on) .lbl { display: none; }
}

@media (max-width: 760px) {
  .deck-plate { width: clamp(104px, 34vw, 150px); height: 42px; padding: 0 10px; }
  .deck-slot svg { display: none; }
}

@media (max-width: 700px) {
  .switch-menu { position: fixed; top: 62px; left: 12px; right: 12px; width: auto; max-width: none; }
  .top-crumbs > .switcher:not(:last-child) .sw-lbl { display: none; }
}