/* Senova — Word-Ribbon Shell · additive rehoming layer (scoped under body.shell)
   Spacing scale: 4 / 8 / 12 / 16 / 24. The deck is 68px: 8 top pad · 40 control
   row · 12 caption band · 8 bottom pad. Group bodies clip (overflow:hidden) so a
   regression clips visibly instead of overlapping a caption. Z-band model: app
   bar + status bar are sacred; drawers/stage inset to the work band; one toast
   slot above the status bar. */

/* neutralize the old 3-col grid; hide old chrome (nodes stay ALIVE) */
body.shell { display: block !important; overflow: hidden; }
body.shell > aside.side, body.shell > aside.rail { display: none !important; }
body.shell #shell-canvas .main > .bar { display: none !important; }
body.shell #cmp-toggle { display: none !important; }
body.shell .main { width: 100% !important; height: 100% !important; min-height: 0; }
#shell-attic { display: none; }

#shell-root { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: 46px 36px 68px auto minmax(0, 1fr) 26px; background: var(--cream, #f7f1e6); color: var(--ink, #2a221d); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
#shell-root.deck-collapsed { grid-template-rows: 46px 36px 0 auto minmax(0, 1fr) 26px; }

/* ---------------- APP BAR (sacred) ---------------- */
#shell-appbar { display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--paper, #fffdf8); border-bottom: 1px solid var(--line, #e6dccb); position: relative; z-index: 3; }
.sh-wordmark { display: flex; align-items: center; gap: 8px; }
.sh-wordmark .sh-mk { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--clay, #ba4526), var(--clay-deep, #8f3319)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.sh-wordmark b { font-family: var(--serif, 'Newsreader', serif); font-weight: 600; font-size: 17px; }
.sh-wordmark .sh-live { font: 700 9px var(--sans); letter-spacing: .05em; color: var(--clay); background: var(--clay-wash); padding: 2px 6px; border-radius: 10px; }
.sh-breadcrumb { display: flex; align-items: center; gap: 6px; }
.sh-crumb-btn { border: 0; background: none; font: 600 13px var(--sans); color: var(--ink); cursor: pointer; padding: 5px 8px; border-radius: 8px; }
.sh-crumb-btn:hover { background: var(--cream-2, #efe6d6); }
.sh-crumb-sep { color: #b3a288; }
.sh-quick { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sh-q { border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 600 12.5px var(--sans); padding: 7px 13px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sh-q:hover { background: var(--cream-2); }
.sh-q:disabled { opacity: .4; cursor: default; }
.sh-q.sh-clay { background: var(--clay); color: #fff; border-color: var(--clay); box-shadow: 0 3px 12px rgba(186, 69, 38, .26); min-width: 96px; justify-content: center; }
.sh-q.sh-clay:hover { background: var(--clay-deep); }
.sh-q.busy { color: transparent; position: relative; pointer-events: none; }
.sh-q.busy::after { content: 'Building…'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 600 12px var(--sans); }
.sh-q.sh-icon { padding: 7px 10px; font-size: 15px; }
.sh-q-sep { width: 1px; height: 20px; background: var(--line); }

/* ---------------- TAB ROW ---------------- */
#shell-tabrow { display: flex; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); padding: 0 10px; position: relative; z-index: 2; }
.sh-tabs-perm, .sh-tabs-ctx { display: flex; align-items: stretch; }
.sh-tabs-ctx { margin-left: 8px; }
.sh-tab { border: 0; background: none; font: 600 12.5px var(--sans); color: var(--ink-2, #5b4f47); padding: 0 15px; cursor: pointer; position: relative; border-bottom: 2px solid transparent; }
.sh-tab:hover { color: var(--ink); }
.sh-tab.on { color: var(--clay); border-bottom-color: var(--clay); }
.sh-tab.ctx { color: var(--clay); background: var(--clay-wash); border-radius: 8px 8px 0 0; margin: 4px 0 0; }
.sh-tab.pulse { animation: shpulse .5s ease; }
@keyframes shpulse { 0%, 100% { background: transparent; } 40% { background: var(--clay-wash); } }
.sh-tab.glow { animation: shglow 1s ease; }
@keyframes shglow { 0%, 100% { box-shadow: none; } 40% { box-shadow: inset 0 -2px 0 var(--clay); } }
.sh-chevron { margin-left: auto; align-self: center; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font-size: 12px; cursor: pointer; width: 24px; height: 24px; border-radius: 7px; }
.sh-chevron:hover { background: var(--cream-2); }

/* ---------------- RIBBON DECK (68px; clips) ---------------- */
#shell-deck { height: 68px; display: flex; align-items: stretch; gap: 0; padding: 8px 12px 0; background: var(--paper); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; position: relative; }
#shell-root.deck-collapsed #shell-deck { height: 0; padding: 0; overflow: hidden; border-bottom: 0; }
.sh-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--clay); transition: width .3s; }
.sh-progress.on { width: 100%; animation: shprog 1.2s ease-in-out infinite; }
@keyframes shprog { 0% { width: 8%; } 50% { width: 82%; } 100% { width: 96%; } }
.sh-group { display: flex; flex-direction: column; padding: 0 16px; border-right: 1px solid var(--line); min-width: 0; }
.sh-group:last-child { border-right: 0; }
.sh-group:first-child { padding-left: 4px; }
.sh-group-body { height: 40px; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.sh-group-cap { height: 12px; line-height: 12px; font: 700 9px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: #a8977f; text-align: center; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-item-large { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid transparent; background: none; cursor: pointer; border-radius: 9px; height: 40px; padding: 2px 12px; min-width: 54px; color: var(--ink); }
.sh-item-large:hover { background: var(--cream-2); border-color: var(--line); }
.sh-item-large .g { font-size: 18px; line-height: 1; color: var(--clay); }
.sh-item-large .l { font: 600 10.5px var(--sans); }
/* small stacks: max 2 rows, wrap into new columns (never overflow the 40px body) */
.sh-smalls { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 18px); grid-auto-columns: max-content; align-content: center; gap: 2px 10px; height: 40px; overflow: hidden; }
.sh-item-small { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 600 11.5px var(--sans); color: var(--ink); padding: 0 8px; height: 18px; border-radius: 6px; white-space: nowrap; text-align: left; }
.sh-item-small:hover { background: var(--cream-2); }
.sh-item-small:disabled { opacity: .4; cursor: default; }
.sh-item-small .g { color: var(--clay); width: 14px; text-align: center; flex: none; }
.sh-item-small.ring, .sh-item-large.ring { box-shadow: 0 0 0 2px var(--clay); }
.sh-seg { display: inline-flex; background: var(--cream-2); border-radius: 8px; padding: 3px; align-self: center; }
.sh-seg button { border: 0; background: none; font: 600 11px var(--sans); color: var(--ink-2); padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.sh-seg button.on { background: var(--clay); color: #fff; }

/* transplanted #dirs — constant chip box, quiet selection (no layout jump) */
body.shell #shell-deck #dirs { flex-direction: row !important; gap: 6px; align-items: center; height: 40px; }
body.shell #shell-deck #dirs .dir { flex: none !important; flex-direction: column !important; width: 58px; height: 40px; min-height: 0; padding: 4px 3px; gap: 2px; border-radius: 8px; text-align: center; overflow: hidden; border: 1px solid var(--line); font: 600 8px var(--sans) !important; color: var(--ink-2); line-height: 1.05; white-space: nowrap; }
body.shell #shell-deck #dirs .dir .sw { width: 18px; height: 18px; margin: 0 auto; flex: none; }
body.shell #shell-deck #dirs .dir.on { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); color: var(--clay); }
/* transplanted #cust — single 40px horizontal strip, internal labels hidden */
body.shell #shell-deck #cust { display: flex !important; flex-direction: row !important; gap: 14px; align-items: center; height: 40px; overflow: hidden; }
body.shell #shell-deck #cust .cust-grp { display: flex !important; flex-direction: row; align-items: center; gap: 6px; margin: 0 !important; }
body.shell #shell-deck #cust .cust-lbl { display: none !important; }
body.shell #shell-deck #cust .cust-sw-row { flex-direction: row !important; gap: 5px; }
body.shell #shell-deck #cust .cust-sw { padding: 4px 7px; border-radius: 8px; }
body.shell #shell-deck #cust .cust-sw .cap { display: none; }
body.shell #shell-deck #cust .cust-types { flex-wrap: nowrap !important; gap: 3px; max-width: none; }
body.shell #shell-deck #cust .cust-type { padding: 4px 7px; font-size: 12px; }
body.shell #shell-deck #cust .cust-type .nm { display: none; }
body.shell #shell-deck #cust .cust-rad { gap: 6px; }
body.shell #shell-deck #cust .cust-rad input[type=range] { width: 80px; }
body.shell #shell-deck #cust .cust-reset { width: auto; margin: 0; padding: 5px 10px; white-space: nowrap; }
body.shell #shell-deck #devs { align-self: center; }

/* ---------------- VISITOR BANNER (real tenancy) ---------------- */
#shell-visitorbar { display: flex; align-items: center; height: 0; overflow: hidden; background: var(--paper); padding: 0 16px; gap: 12px; }
#shell-root.visitor #shell-visitorbar { height: 44px; border-bottom: 1px solid var(--line); }
body.shell #shell-visitorbar #cmp-bar { position: static !important; transform: none !important; box-shadow: none !important; border: 0 !important; height: auto !important; background: none !important; width: 100%; padding: 0 !important; }

/* ---------------- WORK ROW ---------------- */
#shell-workrow { display: grid; grid-template-columns: var(--chat-w, 320px) 1fr var(--dock-w, 0px); grid-template-rows: minmax(0, 1fr); min-height: 0; }
#shell-workrow > * { min-height: 0; min-width: 0; overflow: hidden; }
#shell-workrow.chat-rail { --chat-w: 52px; }
#shell-workrow.dock-open { --dock-w: 340px; }
#shell-chat { background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
#shell-canvas { position: relative; background: var(--cream); }
#shell-canvas .main { position: relative; }
body.shell #shell-canvas #canvas { padding-bottom: 52px !important; }
#shell-dock { background: var(--paper); border-left: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
#shell-dock[hidden] { display: none; }
.sh-dock-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); font: 700 12px var(--sans); position: sticky; top: 0; background: var(--paper); }
.sh-dock-h .g { color: var(--clay); }
.sh-dock-x { margin-left: auto; border: 0; background: none; font-size: 18px; color: var(--ink-2); cursor: pointer; }
.sh-dock-body { padding: 14px 16px; }

/* ---------------- STATUS BAR (sacred) ---------------- */
#shell-statusbar { display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--ink, #2a221d); color: #e8ddcf; font: 600 11px var(--sans); position: relative; z-index: 3; }
.sh-status-left, .sh-status-right { display: flex; align-items: center; gap: 14px; }
.sh-status-right { margin-left: auto; }
#sh-phase-mirror { color: #f0c98a; min-width: 84px; }
#sh-phase-mirror.on::before { content: '● '; color: var(--clay); }
.sh-status-count { color: #b3a68f; }
.sh-seal { display: inline-flex; align-items: center; gap: 5px; color: #d9cfc4; }
.sh-seal:empty { display: none; }
.sh-seal.pulse { animation: shsealpulse 1s ease; }
@keyframes shsealpulse { 40% { color: #fff; } }
.sh-status-btn { border: 1px solid rgba(255, 255, 255, .16); background: none; color: #e8ddcf; font: 600 11px var(--sans); padding: 4px 10px; border-radius: 7px; cursor: pointer; }
.sh-status-btn:hover { background: rgba(255, 255, 255, .1); }

/* ---------------- FOCUS MODE (keep the canvas; overlay it full-viewport) ---------------- */
#shell-root.focus > #shell-appbar, #shell-root.focus > #shell-tabrow, #shell-root.focus > #shell-deck, #shell-root.focus > #shell-visitorbar, #shell-root.focus > #shell-statusbar { visibility: hidden; }
#shell-root.focus #shell-workrow { position: fixed; inset: 0; z-index: 40; background: var(--cream); grid-template-columns: 1fr; }
#shell-root.focus #shell-chat, #shell-root.focus #shell-dock { display: none; }
#sh-exit-focus { position: fixed; top: 14px; right: 16px; z-index: 60; border: 0; background: var(--ink); color: #fff; font: 600 12px var(--sans); padding: 8px 14px; border-radius: 20px; cursor: pointer; box-shadow: 0 8px 24px rgba(30, 20, 12, .3); display: none; }
body.shell.focusing #sh-exit-focus { display: block; }

/* ---------------- Z-BAND: inset feature drawers/stage to the work band ---------------- */
/* inset to the work band (below the ribbon deck y150, above status bar y874) so nothing chrome is covered */
body.shell #pf-drawer, body.shell #sf-drawer { top: 156px !important; bottom: 32px !important; height: auto !important; max-height: none !important; border-radius: 14px 0 0 14px; box-shadow: -14px 12px 44px rgba(60, 40, 25, .18) !important; z-index: 40 !important; }
#shell-root.deck-collapsed ~ #pf-drawer, body.shell.deck-collapsed #pf-drawer { top: 88px !important; }
body.shell #pf-drawer { padding-bottom: 24px; }
body.shell #sf-stage { top: 160px !important; bottom: 36px !important; max-height: none !important; z-index: 39 !important; border-radius: 14px; }
body.shell #sf-night-card, body.shell #sf-gapfill-modal { z-index: 44 !important; }
body.shell #cmp-lineup-view { border-radius: 12px; }

/* ---------------- floaters → docked in the canvas gutter / repositioned ---------------- */
/* corner-dock the persistent floaters into the gutter (never over the center of the site) */
body.shell .rp-fab { left: auto !important; right: 18px !important; bottom: 34px !important; transform: none !important; z-index: 20 !important; }
body.shell .rp-fab.show { transform: none !important; }
/* one floater lane: hint bottom-CENTER, fab bottom-right — never overlap */
body.shell .ed-hint { bottom: 34px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; font-family: var(--sans) !important; }
body.shell .cmp-ribbon { position: fixed !important; left: 340px !important; bottom: 34px !important; top: auto !important; right: auto !important; z-index: 22; font: 600 10.5px var(--sans) !important; color: var(--ink-2) !important; background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 5px 12px !important; box-shadow: 0 2px 10px rgba(60, 40, 25, .06) !important; width: fit-content; max-width: none; white-space: nowrap; overflow: visible; font-family: var(--mono) !important; }
body.shell #taste-chip { bottom: 36px !important; right: 20px !important; z-index: 55 !important; }
body.shell .cmp-trace { bottom: 88px !important; }
body.shell .cmp-flash, body.shell .sf-toast { bottom: 40px !important; }

/* pause continuous canvas animations while an overlay is open */
body.shell.overlay-open #doc *, body.shell.overlay-open .cmp-pane * { animation-play-state: paused !important; }

/* one toast slot above the status bar */
#sh-toast { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(10px); z-index: 56; background: var(--ink); color: #fff; font: 600 12.5px var(--sans); padding: 10px 15px; border-radius: 12px; box-shadow: 0 14px 34px rgba(30, 20, 12, .34); opacity: 0; transition: .3s; display: flex; align-items: center; gap: 12px; pointer-events: none; }
#sh-toast.in { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
#sh-toast .sh-toast-btn { border: 0; background: var(--clay); color: #fff; font: 600 11px var(--sans); padding: 4px 10px; border-radius: 8px; cursor: pointer; }

/* command palette */
#sh-palette { position: fixed; inset: 0; z-index: 70; background: rgba(30, 20, 12, .35); display: none; justify-content: center; align-items: flex-start; padding-top: 12vh; }
#sh-palette.on { display: flex; }
.sh-pal-box { width: 520px; max-width: 92vw; background: var(--paper); border-radius: 14px; box-shadow: 0 30px 70px rgba(30, 20, 12, .4); overflow: hidden; }
.sh-pal-box input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); font: 600 15px var(--sans); padding: 16px; outline: none; color: var(--ink); }
.sh-pal-list { max-height: 320px; overflow-y: auto; }
.sh-pal-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; font-size: 13px; }
.sh-pal-item.on, .sh-pal-item:hover { background: var(--clay-wash); }
.sh-pal-item .g { color: var(--clay); }
.sh-pal-item .sub { margin-left: auto; font-size: 11px; color: #a8977f; }

@media (prefers-reduced-motion: reduce) {
  .sh-tab.pulse, .sh-tab.glow, .sh-seal.pulse, .sh-progress.on { animation: none !important; }
  /* Reduced motion JUMPS TO END STATE — never pauses (a paused entrance
     freezes the built page at opacity:0). Sections land fully shown; any
     other #doc animation fast-forwards once instead of looping/pausing. */
  body.shell #doc .sec { animation: none !important; opacity: 1 !important; transform: none !important; }
  body.shell #doc * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-play-state: running !important; }
}

/* ---------------- left chat (receipt LEDGER) ---------------- */
.ch-head { display: flex; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ch-h-t { font: 700 12.5px var(--sans); color: var(--ink); }
.ch-collapse { margin-left: auto; border: 1px solid var(--line); background: var(--paper); font-size: 13px; color: var(--ink-2); cursor: pointer; width: 24px; height: 24px; border-radius: 7px; }
#shell-workrow.chat-rail #shell-chat .ch-head, #shell-workrow.chat-rail #shell-chat .ch-stream, #shell-workrow.chat-rail #shell-chat .ch-inputrow { display: none; }
#shell-workrow.chat-rail #shell-chat::before { content: 'Assistant'; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px var(--sans); color: var(--ink-2); padding: 14px 0; margin: 0 auto; }
.ch-stream { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ch-hello { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; background: var(--cream); border-radius: 10px; padding: 12px 13px; }
.ch-user { align-self: flex-end; max-width: 85%; background: var(--clay); color: #fff; font: 600 12.5px var(--sans); padding: 8px 12px; border-radius: 12px 12px 3px 12px; margin-top: 8px; }
.ch-reply { font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ch-chip { border: 1px solid var(--line); background: var(--paper); color: var(--clay); font: 600 11px var(--sans); padding: 5px 10px; border-radius: 14px; cursor: pointer; }
.ch-chip:hover { background: var(--clay-wash); }
.ch-receipt { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; min-height: 28px; font: 500 11.5px var(--sans); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 10px; }
.ch-receipt.undoable { cursor: pointer; }
.ch-receipt.undoable:hover { color: var(--ink); }
.ch-receipt.meta { color: #a8977f; font-style: italic; grid-template-columns: 1fr; }
.ch-actor { font: 700 8.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ink-2); padding: 2px 0; border-radius: 8px; text-align: center; }
.ch-receipt.undoable .ch-actor { background: var(--clay); }
.ch-r-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-r-undo { color: var(--clay); opacity: 0; }
.ch-receipt.undoable:hover .ch-r-undo { opacity: 1; }
.ch-inputrow { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ch-inputrow input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--cream); border-radius: 10px; padding: 10px 12px; font: 600 12.5px var(--sans); color: var(--ink); outline: none; }
.ch-inputrow input:focus { border-color: var(--clay); }
.ch-send { border: 0; background: var(--clay); color: #fff; font-size: 14px; width: 40px; border-radius: 10px; cursor: pointer; }

/* ---- Cockpit: ⌘K affordance + instrument cluster (Phase 1) ---- */
.sh-cockpit { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 6px; }
.sh-cmdk { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 1px solid var(--line, #e6dccb); border-radius: 8px; background: transparent; color: var(--ink, #2a221d); font: 600 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.sh-cmdk:hover { background: var(--cream-2, #efe6d6); }
.sh-cmdk-ic { font-size: 13px; opacity: .7; }
.sh-cmdk-tx { color: var(--ink-2, #5b4f47); }
.sh-cmdk-kbd { font: 600 10px var(--mono); color: #a8977f; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.sh-instruments { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sh-gauge { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px 0 10px; border: 1px solid var(--line, #e6dccb); border-radius: 9px; background: var(--paper, #fffdf8); color: var(--ink, #2a221d); font: 600 12px var(--sans); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s; }
.sh-gauge:hover { background: var(--cream-2, #efe6d6); border-color: var(--clay-soft, #d98b6b); }
.sh-gauge:focus-visible { outline: 2px solid var(--clay, #ba4526); outline-offset: 2px; }
.sh-g-ic { font-size: 13px; line-height: 1; opacity: .85; color: var(--clay); }
.sh-g-tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.sh-g-name { font: 600 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #a8977f; }
.sh-g-val { font: 600 12px var(--sans); color: var(--ink); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.sh-g-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-left: 1px; flex: 0 0 auto; }
.sh-gauge.g-attn { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); }
.sh-gauge.g-attn .sh-g-dot { background: var(--clay); }
.sh-gauge.g-live .sh-g-dot { background: #3a8a4f; }
.sh-gauge.g-open .sh-g-val { color: var(--clay); font-weight: 700; }
.sh-g-stale { background: transparent; }
.sh-gauge.g-stale .sh-g-stale { background: #c9821f; box-shadow: 0 0 0 2px rgba(201, 130, 31, .22); }
.sh-gauge.g-fresh .sh-g-stale { background: #3a8a4f; }
@keyframes shGaugePulse { 0% { box-shadow: inset 0 0 0 1px var(--clay); } 100% { box-shadow: none; } }
.sh-gauge.g-pulse { animation: shGaugePulse .4s ease-out; }
.sh-bar-sp { flex: 1 1 auto; min-width: 6px; }
/* the old margin-left:auto on .sh-quick is now redundant with the spacer; keep it harmless */
body.shell #shell-appbar .sh-quick { margin-left: 0; }
@media (max-width: 1180px) { .sh-g-name { display: none; } .sh-g-val { max-width: 92px; } }
@media (max-width: 1010px) { .sh-cmdk-tx { display: none; } }
@media (max-width: 880px) { .sh-instruments .sh-g-tx { display: none; } .sh-gauge { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .sh-gauge.g-pulse { animation: none; } }

/* ==================== COCKPIT PHASE 2 (overlay layer; classic mode is untouched) ==================== */
#sh-cmdbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 57;
  display: flex; align-items: center; gap: 10px; width: min(560px, calc(100vw - 48px));
  background: var(--paper); border: 1px solid var(--line); border-radius: 15px;
  box-shadow: 0 10px 34px -12px rgba(60, 40, 25, .32), 0 2px 8px rgba(60, 40, 25, .08); padding: 9px 13px; }
#sh-cmdbar.sel { border-color: var(--clay); box-shadow: 0 10px 34px -12px rgba(186, 69, 38, .34); }
.sh-cmdbar-target { font: 600 11px var(--mono, monospace); letter-spacing: .02em; color: var(--clay); background: var(--clay-wash, rgba(186,69,38,.09)); border: 1px solid var(--clay-line, rgba(186,69,38,.24)); border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
.sh-cmdbar-ic { color: #a8977f; font-size: 15px; line-height: 1; }
#sh-cmd-in { flex: 1; min-width: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--ink); outline: none; }
#sh-cmd-in::placeholder { color: #a8977f; }
.sh-cmdbar-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--clay); animation: shSpin .7s linear infinite; }
@keyframes shSpin { to { transform: rotate(360deg); } }
#shell-root.focus ~ #sh-cmdbar, body.focusing #sh-cmdbar { left: 50vw; }

.sh-ledger { position: fixed; top: 194px; right: 0; bottom: 26px; width: 340px; z-index: 41;
  background: var(--paper); border-left: 1px solid var(--line); box-shadow: -24px 0 54px -34px rgba(30, 20, 12, .5);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; }
.sh-ledger.open { transform: none; }
.sh-ledger-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sh-ledger-t { font: 600 13px var(--sans); color: var(--ink); flex: 1; }
.sh-ledger-x { border: 0; background: none; color: var(--ink-2, #5b4f47); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.sh-ledger-x:hover { background: var(--cream-2, #efe6d6); }
#sh-ledger-stream { flex: 1; overflow-y: auto; padding: 10px 12px; }
#sh-ledger-tab { position: fixed; right: 0; top: 244px; z-index: 40; width: 26px; height: 66px;
  border: 1px solid var(--line); border-right: 0; border-radius: 9px 0 0 9px; background: var(--paper);
  color: var(--ink-2, #5b4f47); cursor: pointer; box-shadow: -6px 0 16px -10px rgba(30, 20, 12, .4); font-size: 13px; }
#sh-ledger-tab:hover { color: var(--clay); }
.sh-ledger.open ~ #sh-ledger-tab { opacity: 0; pointer-events: none; }

.sh-diff { position: fixed; z-index: 44; pointer-events: none; }
.sh-diff-ghost { position: absolute; inset: 0; border: 2px solid var(--clay); border-radius: 12px; background: rgba(186, 69, 38, .06); animation: shDiffIn .35s ease; }
.sh-diff-chips { position: absolute; top: -15px; right: 10px; display: flex; gap: 6px; pointer-events: auto; }
.sh-diff-chips button { font: 600 11.5px var(--sans); border-radius: 8px; padding: 5px 11px; cursor: pointer; border: 1px solid var(--line); }
.sh-diff-keep { background: var(--paper); color: var(--ink); }
.sh-diff-refine { background: var(--clay); color: #fff; border-color: var(--clay); }
@keyframes shDiffIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .sh-ledger { transition: none; } .sh-diff-ghost { animation: none; } .sh-cmdbar-spin { animation: none; } }
@media (max-width: 640px) { #sh-cmdbar { width: calc(100vw - 24px); bottom: 34px; } .sh-ledger { width: 88vw; } }

/* ---- Phase-2 cockpit: declutter the bottom band ------------------------
   The floating command bar owns the bottom-centre. The demo's edit hint sat
   centred at the same spot and collided with it — removed here (the command
   bar's placeholder + click-to-select cover it). The replay bar is lifted
   clear above the command-bar band so the two never collide, and the command
   bar gets a little more clearance above the status strip. Gated on
   .sh-cockpit, so classic mode keeps the demo's original placement. */
body.sh-cockpit .ed-hint { display: none !important; }
body.sh-cockpit .rp-fab { bottom: 92px !important; right: 18px !important; left: auto !important; z-index: 50 !important; }
body.sh-cockpit #sh-cmdbar { bottom: 46px; }