/* ============================================================================================
   VOLURR — SOVEREIGN UI · V2-B · the shell: COMMAND RAIL · MISSION NAVIGATOR · modes
   (app/static/css/sovereign-shell.css — loads after sovereign.css; tokens only, no new colours)
   ============================================================================================ */

/* ── COMMAND RAIL ─────────────────────────────────────────────────────────────────────────
   A 56 px column at the inline-end edge, from under the topbar to the bottom. Present only while
   Room OS is engaged (body.sv-rail-on, set by room-rail.js). Expands on intent: hover or keyboard
   focus widens it to show the labels; nothing moves but the rail itself. */
.sv-rail{ position:fixed; inset-block:var(--sv-topbar-h) 0; inset-inline-end:0; width:var(--sv-rail-w);
  z-index:calc(var(--sv-z-floating) + 1); display:none; flex-direction:column; align-items:stretch; gap:2px;
  padding:var(--sv-4) var(--sv-3); background:var(--sv-surface-0); border-inline-start:1px solid var(--sv-border-subtle);
  transition:width var(--sv-panel) var(--sv-ease); overflow:hidden; }
.sv-rail.on{ display:flex; }
.sv-rail [hidden]{ display:none !important; }   /* DR-11: the item rules' display outranked the UA's [hidden]; what the rail hides stays hidden */
.sv-rail:hover, .sv-rail:focus-within{ width:184px; box-shadow:var(--sv-el-floating); }
.sv-rail-it{ position:relative; display:flex; align-items:center; gap:var(--sv-5); min-height:44px; padding:0 var(--sv-4);
  border:0; border-radius:var(--sv-r-s); background:transparent; color:var(--sv-text-secondary); cursor:pointer;
  font:var(--sv-t-label); text-align:start; white-space:nowrap;
  transition:background var(--sv-fast) var(--sv-ease), color var(--sv-fast) var(--sv-ease); }
.sv-rail-it svg{ flex:0 0 auto; width:var(--sv-ic-l); height:var(--sv-ic-l); margin-inline-start:2px; }
.sv-rail-lbl{ opacity:0; transform:translateX(-4px); transition:opacity var(--sv-normal) var(--sv-ease), transform var(--sv-normal) var(--sv-ease); }
[dir="rtl"] .sv-rail-lbl{ transform:translateX(4px); }
.sv-rail:hover .sv-rail-lbl, .sv-rail:focus-within .sv-rail-lbl{ opacity:1; transform:none; }
.sv-rail-it:hover{ background:var(--sv-surface-1); color:var(--sv-text-primary); }
.sv-rail-it:focus-visible{ outline:none; box-shadow:var(--sv-focus); }
/* the active state: red text, a soft red field, and a 3 px red bar on the outer edge — unmistakable, no block */
.sv-rail-it.on{ color:var(--sv-red); background:var(--sv-red-soft); }
.sv-rail-it.on::before{ content:""; position:absolute; inset-block:8px; inset-inline-end:-6px; width:3px; border-radius:3px; background:var(--sv-red); }
.sv-rail-ct{ margin-inline-start:auto; font:var(--sv-t-caption); font-variant-numeric:tabular-nums; color:var(--sv-text-muted);
  background:var(--sv-surface-2); border-radius:var(--sv-r-pill); padding:1px 6px; }
.sv-rail-it.on .sv-rail-ct{ color:var(--sv-red); background:transparent; }
/* collapsed: the count sits as a small mark beside the icon */
.sv-rail:not(:hover):not(:focus-within) .sv-rail-ct{ position:absolute; inset-block-start:6px; inset-inline-end:6px; padding:0 4px; min-width:16px; text-align:center; line-height:14px; }
.sv-rail-dot{ position:absolute; inset-block-start:8px; inset-inline-start:30px; width:7px; height:7px; border-radius:50%; background:var(--sv-red); box-shadow:0 0 0 2px var(--sv-surface-0); }
.sv-rail-sep{ height:1px; margin:var(--sv-3) var(--sv-4); background:var(--sv-border-subtle); }
.sv-rail-grow{ flex:1 1 auto; }
.sv-rail-mode{ color:var(--sv-text-muted); min-height:40px; }
.sv-rail-mode.on{ color:var(--sv-red); background:transparent; }
.sv-rail-mode.on::before{ display:none; }
@media (prefers-reduced-motion:reduce){ .sv-rail, .sv-rail-it, .sv-rail-lbl{ transition:none; } }

/* ── the workspace makes room for the rail ─────────────────────────────────────────────── */
html[dir="ltr"] body.sv-rail-on .pcstage{ margin-right:var(--sv-rail-w); }
html[dir="rtl"] body.sv-rail-on .pcstage{ margin-left:var(--sv-rail-w); }
html[dir="ltr"] body.sv-rail-on.lr-docked .pcstage{ margin-right:calc(var(--lr-dock) + var(--sv-rail-w)); }
html[dir="rtl"] body.sv-rail-on.lr-docked .pcstage{ margin-left:calc(var(--lr-dock) + var(--sv-rail-w)); }
body.sv-rail-on .lrd-dock:not(.lrd-dock-free):not(.lrd-dock-max){ inset-inline-end:var(--sv-rail-w); }
body.sv-rail-on .lrd-fab{ inset-inline-end:calc(var(--sv-rail-w) + 14px); }
/* the dock's horizontal strip is redundant beside the rail: hidden, not removed (the product still drives it) */
@media (min-width:761px){ body.sv-rail-on .lrd-dock.sv-has-rail .lrd-tabs{ display:none; } }   /* on a phone the strip stays in the sheet (V2-H) */

/* ── MISSION NAVIGATOR ───────────────────────────────────────────────────────────────────
   The hub (#lrhub) keeps its markup, its data and its window controls; rooms-compact.js gives it
   its skin and now resolves that skin onto the layer. These rules add what the compact skin does
   not know: where the panel sits when the rail is present, and the row grammar. Specificity is
   raised to html #lrhub … because the compact skin is injected later and marks everything
   !important; that is the cost of not rewriting a file another wave owns. */
body.sv-rail-on #lrhub .lrh-panel:not(.lrh-pmax){ inset-inline-end:calc(var(--sv-rail-w) + 10px) !important; }
html #lrhub .lrh-panel{ background:var(--sv-surface-0) !important; box-shadow:var(--sv-el-overlay) !important; border-radius:var(--sv-r-l) !important; }
html #lrhub .lrh-head{ background:transparent !important; border-bottom:1px solid var(--sv-border-subtle) !important; }
html #lrhub .lrh-mark{ background:var(--sv-red-soft) !important; border-radius:var(--sv-r-m) !important; }
html #lrhub .lrh-name{ font:var(--sv-t-panel) !important; letter-spacing:0 !important; }
html #lrhub .lrh-live{ font:var(--sv-t-caption) !important; letter-spacing:var(--sv-caption-track) !important; text-transform:uppercase; color:var(--sv-red) !important; }
html #lrhub .lrh-live::before{ background:var(--sv-red) !important; box-shadow:none !important; }
html #lrhub .lrh-subnow{ font:var(--sv-t-meta) !important; color:var(--sv-text-muted) !important; }
html #lrhub .lrh-search{ background:var(--sv-surface-1) !important; border:1px solid var(--sv-border-subtle) !important; border-radius:var(--sv-r-m) !important; height:40px !important; }
html #lrhub .lrh-search:focus-within{ border-color:var(--sv-border-active) !important; box-shadow:0 0 0 3px var(--sv-red-soft) !important; background:var(--sv-surface-1) !important; }
html #lrhub .lrh-search input{ font:var(--sv-t-body) !important; }
html #lrhub .lrh-sel, html #lrhub .lrh-viewsel{ font:var(--sv-t-label) !important; border-radius:var(--sv-r-s) !important; background:var(--sv-surface-1) !important; border-color:var(--sv-border-subtle) !important; color:var(--sv-text-secondary) !important; }
html #lrhub .lrh-toolbar{ border-bottom:1px solid var(--sv-border-subtle) !important; padding-bottom:var(--sv-4) !important; }
/* section heads: institutional captions, not sentence-case headlines */
html #lrhub .lrh-scroll .lrh-sechead h2{ font:var(--sv-t-caption) !important; letter-spacing:var(--sv-caption-track) !important; text-transform:uppercase; color:var(--sv-text-muted) !important; }
/* KPI strip: numbers in the numeric role, labels in the caption role (the compact skin had them at 8.5 px) */
html #lrhub .lrh-kpi{ background:var(--sv-surface-1) !important; border:1px solid var(--sv-border-subtle) !important; border-radius:var(--sv-r-m) !important; }
html #lrhub .lrh-kpi .v{ font:var(--sv-t-financial) !important; font-variant-numeric:tabular-nums; letter-spacing:0 !important; color:var(--sv-text-primary) !important; }
html #lrhub .lrh-kpi .l{ font:var(--sv-t-caption) !important; letter-spacing:var(--sv-caption-track) !important; text-transform:uppercase; color:var(--sv-text-muted) !important; }
/* rows: symbol tile · name / meta · live · online — one grammar, hairlines between */
html #lrhub .lr-row2, html #lrhub .lrc{ border-bottom:1px solid var(--sv-border-subtle) !important; padding:var(--sv-5) var(--sv-6) !important; gap:var(--sv-5) !important; }
html #lrhub .lr-row2:hover, html #lrhub .lrc:hover{ background:var(--sv-surface-1) !important; }
html #lrhub .lr-row2 .lr-sym{ width:40px !important; height:40px !important; border-radius:var(--sv-r-m) !important; font:var(--sv-t-caption) !important; letter-spacing:var(--sv-caption-track) !important;
  background:var(--sv-surface-1) !important; color:var(--sv-text-secondary) !important; box-shadow:0 0 0 1px var(--sv-border-subtle) !important; }
html #lrhub .lr-row2 .lr-rowav, html #lrhub .lrc-av{ width:40px !important; height:40px !important; border-radius:var(--sv-r-m) !important; }
html #lrhub .lr-row2 .lr-nm b, html #lrhub .lrc-nm{ font:var(--sv-t-card) !important; letter-spacing:0 !important; color:var(--sv-text-primary) !important; }
html #lrhub .lr-row2 .lr-nm span, html #lrhub .lrc-meta{ font:var(--sv-t-meta) !important; color:var(--sv-text-muted) !important; }
html #lrhub .lr-rlive{ font:var(--sv-t-caption) !important; letter-spacing:var(--sv-caption-track) !important; text-transform:uppercase; color:var(--sv-red) !important; }
html #lrhub .lr-rlive::before{ background:var(--sv-red) !important; box-shadow:none !important; }
html #lrhub .lr-row2 .lr-on{ font:var(--sv-t-numeric) !important; color:var(--sv-text-muted) !important; }
html #lrhub .lr-row2 .lr-on:not(.zero){ color:var(--sv-success) !important; }
html #lrhub .lr-bdg{ font:var(--sv-t-caption) !important; letter-spacing:var(--sv-caption-track) !important; text-transform:uppercase; border-radius:var(--sv-r-s) !important; }
/* the bottom action bar: one primary, one ghost */
html #lrhub .lrh-actionbar{ border-top:1px solid var(--sv-border-subtle) !important; background:var(--sv-surface-0) !important; }
html #lrhub .lrh-act{ font:var(--sv-t-label) !important; height:44px !important; border-radius:var(--sv-r-m) !important; }
html #lrhub .lrh-act-ghost{ background:var(--sv-surface-1) !important; border:1px solid var(--sv-border-subtle) !important; color:var(--sv-text-primary) !important; }
html #lrhub .lrh-act-live{ background:var(--sv-red) !important; color:var(--sv-text-on-red) !important; box-shadow:none !important; }
html #lrhub .lrh-x, html #lrhub .lrh-maxbtn{ border-radius:var(--sv-r-s) !important; background:transparent !important; border:1px solid transparent !important; color:var(--sv-text-muted) !important; }
html #lrhub .lrh-x:hover, html #lrhub .lrh-maxbtn:hover{ background:var(--sv-surface-1) !important; color:var(--sv-text-primary) !important; border-color:var(--sv-border-subtle) !important; }
html #lrhub :is(button, input, select, [tabindex]):focus-visible{ outline:none !important; box-shadow:var(--sv-focus) !important; }

/* ── MODES ───────────────────────────────────────────────────────────────────────────────
   FOCUS: the sidebar is hidden through the shell's own class and the dock is minimized; the rail
   stays as the way back. COMMAND: everything as the person left it. */
body[data-sv-mode="focus"] .sv-rail{ background:color-mix(in srgb, var(--sv-surface-0) 92%, transparent); }

/* ── the dock head takes the panel role and loses its heaviest chrome (V2-C refines the body) ── */
.lrd-dock .lrd-head{ padding:var(--sv-5) var(--sv-6) !important; }
.lrd-dock .lrd-hb{ border-radius:var(--sv-r-s); }