* {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        height: 100%;
        font-family: system-ui, sans-serif;
        background: #1a1d23;
        color: #e8eaed;
      }
      /* Shell layout tokens — keep in sync with viewer_shell.js. */
      :root {
        --luxon-shell-gutter: 12px;
        --luxon-shell-panel-gap: 16px;
        --luxon-shell-dock-gap: 10px;
        --luxon-shell-disclaimer-offset: 0px;
        /* One disabled-dim token so opacity-based disabled states stop drifting
           (was 0.48 global / 0.72 llm-box / 0.6 llm-send). */
        --lux-disabled-opacity: 0.5;
        /* Minimum comfortable hit target (WCAG 2.5.8 AA = 24px) for the dense
           compact controls; full 44px would break these tight panels. */
        --lux-min-tap: 24px;
        --luxon-shell-header-h: 44px;
        --luxon-shell-timeline-h: 18px;
        /* First-paint spine wrap — measured laptop bid chrome is ~126px
           (landing ~102). 38/34/110 all sat under the wrap on hard refresh.
           Compact density must not shrink this on body. */
        --luxon-spine-chrome-h: 128px;
        /* First-paint dock clearance — do not wait for platform_command_dock.js.
           Strip 40 + dock 44 = 84. Dock JS may raise dock-h when expanded. */
        --luxon-shell-strip-h: 40px;
        --luxon-pc-dock-h: 44px;
        --luxon-shell-bottom-h: calc(
          var(--luxon-shell-strip-h) + var(--luxon-pc-dock-h)
        );
        /* One float top for every *_panel. Banner + spine chrome write this;
           do not add per-panel ID offset lists. */
        --luxon-float-top: calc(
          var(--luxon-shell-header-h) + var(--luxon-shell-timeline-h)
          + var(--luxon-spine-chrome-h, 128px)
          + var(--luxon-shell-disclaimer-offset)
        );
        --luxon-shell-dock-top: calc(
          var(--luxon-shell-header-h)
          + var(--luxon-shell-timeline-h)
          + var(--luxon-shell-dock-gap)
          + var(--luxon-shell-disclaimer-offset)
        );
        --luxon-shell-param-w: min(340px, 30vw);
        --luxon-shell-ingest-w: min(380px, 32vw);
        --luxon-shell-rail-w: var(--luxon-shell-ingest-w);
        --luxon-shell-scene-w: min(360px, 28vw);
        --luxon-shell-context-left: calc(
          var(--luxon-shell-gutter) + var(--luxon-shell-param-w) + var(--luxon-shell-panel-gap)
        );
        --luxon-shell-context-right: calc(
          var(--luxon-shell-gutter)
          + var(--luxon-shell-rail-w)
          + var(--luxon-shell-scene-w)
          + var(--luxon-shell-panel-gap)
        );
      }
      @media (max-width: 1100px) {
        :root {
          --luxon-shell-param-w: min(260px, 28vw);
          --luxon-shell-ingest-w: min(300px, 30vw);
          --luxon-shell-scene-w: min(260px, 26vw);
        }
      }
      @media (max-width: 860px) {
        :root {
          --luxon-shell-param-w: min(200px, 24vw);
          --luxon-shell-ingest-w: min(240px, 28vw);
          --luxon-shell-scene-w: min(200px, 24vw);
        }
      }
      body.has-shell.has-disclaimer-banner {
        --luxon-shell-disclaimer-offset: 4.1rem;
      }
      body.has-shell.has-disclaimer-banner.disclaimer-acknowledged {
        --luxon-shell-disclaimer-offset: 1.8rem;
      }
      body.has-spine {
        --luxon-float-top: calc(
          var(--luxon-shell-header-h)
          + var(--luxon-shell-timeline-h)
          + var(--luxon-spine-chrome-h, 128px)
          + var(--luxon-shell-disclaimer-offset)
        );
      }
      /* --- Calm landing (body.luxon-landing) -----------------------------
         On a cold load with no bid in the URL, the bid-scoped orchestration
         HUD — the live event ticker, the "premise of the orchestration system"
         disclaimer, the gate/posture status pills, and the decision strip —
         is noise before anything is loaded. Suppress it so the first
         impression is the 3D object + the Welcome card + sign-in / Add data.
         The right-hand co-pilot rail (.spine-copilot = AI chat box +
         notification center) is DELIBERATELY kept visible: it is the connect
         and help surface (every "open Chat → Settings to connect" hint points
         here), so hiding it on the landing stranded disconnected users with no
         way to reach the chat — the spine twin of classic's always-on llm
         rail. The class is set up-front by the inline boot script (so there is
         no flash of the bid HUD) and reaffirmed by main.js on its no-model
         branch; opening a bid is a full page reload (versions_panel sets
         ?manifest=), which drops the class and restores the complete chrome. */
      /* Calm cold landing: welcome + connect rail stay; bid-scoped HUD noise
         (timeline/strip/scene/param/ingest) stays hidden until ?manifest=.
         CRITICAL: do NOT hide .spine-stages — Versions + Live Bid Upload are
         rehosted there for day-one Bring in (Upload → Process → Open). Hiding
         stages made Bring in look dead after a hard-refresh with no snapshot. */
      body.luxon-landing {
        --luxon-shell-disclaimer-offset: 0px !important;
      }
      body.luxon-landing #disclaimer_banner,
      body.luxon-landing [data-shell-region="timeline"],
      body.luxon-landing [data-shell-region="strip"],
      body.luxon-landing [data-shell-region="param"],
      body.luxon-landing [data-shell-region="ingest"],
      body.luxon-landing [data-shell-region="scene"],
      body.luxon-landing .spine-posture,
      body.luxon-landing .spine-nav-guide,
      body.luxon-landing .spine-subnav,
      body.luxon-landing .id-header-run,
      body.luxon-landing .id-header-gate-slot,
      body.luxon-landing .id-header-objective-slot,
      body.luxon-landing .id-header-cost-meter,
      body.luxon-landing #auth_indicator,
      body.luxon-landing #scene_context_bar,
      body.luxon-landing #luxon-runtime-toolbar {
        display: none !important;
      }
      /* Upload on a cold spine screen lives in the welcome card, not a second chip. */
      body.luxon-landing .luxon-shell-root[data-spine="1"] .spine-cmdbar [data-command="addData"] {
        display: none !important;
      }
      /* Empty scene bar must never paint a bordered strip with no text. */
      #scene_context_bar:empty,
      #scene_context_bar[hidden] {
        display: none !important;
      }
      #status {
        flex: 0 1 200px;
        min-width: 0;
        max-width: 28ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #pick {
        flex: 1 1 280px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: ui-monospace, monospace;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9bd3ff;
        max-height: 3.2em;
        overflow: auto;
      }
      #xeokit_canvas {
        display: block;
        width: 100%;
        position: fixed;
        top: 44px;
        left: 0;
        height: calc(100% - 44px);
      }
      #side_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(400px, 42vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 4;
        background: rgba(20, 22, 28, 0.98);
        border-left: 1px solid #444;
        overflow: auto;
        padding: 0.55rem 0.65rem;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      #side_panel.visible {
        display: block;
      }
      #side_panel h4 {
        margin: 0.65rem 0 0.35rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        border-bottom: 1px solid #444;
        padding-bottom: 0.2rem;
      }
      #side_panel a {
        color: #8ab4f8;
        word-break: break-all;
      }
      #links_list,
      #csv_list {
        list-style: none;
        padding: 0;
        margin: 0.25rem 0;
      }
      #links_list li,
      #csv_list li {
        margin: 0.2rem 0;
      }
      #boq_table_wrap,
      #scope_table_wrap {
        overflow: auto;
        max-height: min(50vh, 360px);
        margin-top: 0.35rem;
      }
      #boq_table,
      #scope_table {
        border-collapse: collapse;
        width: max-content;
        min-width: 100%;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      #boq_table th,
      #boq_table td,
      #scope_table th,
      #scope_table td {
        border: 1px solid #444;
        padding: 2px 5px;
        text-align: left;
        vertical-align: top;
      }
      #boq_table th,
      #scope_table th {
        background: #2a2d35;
        position: sticky;
        top: 0;
      }
      #boq_table tr.row-pick-match td,
      #scope_table tr.row-pick-match td {
        background: #2f3d52;
        outline: 1px solid #6ea8fe;
      }
      .scope-filter-bar {
        display: flex;
        gap: 0.35rem;
        flex-wrap: wrap;
        margin: 0.35rem 0 0.5rem;
      }
      .scope-filter-btn {
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.15rem 0.45rem;
        border-radius: 3px;
        border: 1px solid #3a3f4b;
        background: #1e2128;
        color: #cfd2d9;
        cursor: pointer;
      }
      .scope-filter-btn[aria-pressed="true"] {
        background: #2f3d52;
        border-color: #6ea8fe;
        color: #e8eaed;
      }
      /* BOQ provenance columns (PRD §10.4 D-7). */
      #boq_table th.boq-prov-th {
        background: #20232b;
      }
      #boq_table td.boq-prov-drawing {
        font-family: ui-monospace, monospace;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #cfd2d9;
        white-space: nowrap;
      }
      #boq_table td.boq-prov-status {
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      /* Hop 86 — BOQ strip luxon-pill (retired .boq-badge). Same hexes. */
      .luxon-pill[data-boq] {
        display: inline-block;
        padding: 0.04rem 0.35rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: 3px;
        font-weight: 600;
        margin-right: 0.25rem;
      }
      .luxon-pill[data-boq="superseded"],
      .luxon-pill[data-boq="needs-review"] { background: #3f321e; color: #f6c177; }
      .luxon-pill[data-boq="needs-review"] { opacity: 0.85; }
      .luxon-pill[data-boq="no-ifc"],
      .luxon-pill[data-boq="cost-none"] { background: #2a2d35; color: #9aa0a6; }
      .luxon-pill[data-boq="cost-exact"] { background: #1f3a2a; color: #8fd9a6; }
      .luxon-pill[data-boq="cost-material"] { background: #3f3a1f; color: #f6c177; }
      .luxon-pill[data-boq="cost-similar"] { background: #2a2f3f; color: #8ab4f8; }
      .boq-cost-rate {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      #chat_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(420px, 44vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 5;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.45rem;
        /* Pin Ask row — only .llm-transcript scrolls (same contract as archive). */
        overflow: hidden;
        min-height: 0;
      }
      #chat_panel.visible {
        display: flex;
      }
      #ingest_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(460px, 48vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 6;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.5rem;
        /* Pin connect strip — only .ingest-home-routes scrolls (Chat Ask pattern). */
        overflow: hidden;
        min-height: 0;
      }
      #ingest_panel.visible {
        display: flex;
      }
      .ingest-home-header {
        flex-shrink: 0;
      }
      .ingest-home-header h4 {
        margin: 0;
        font-size: var(--lux-fs-sm, 0.875rem);
      }
      .ingest-home-hint {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        line-height: 1.4;
        flex-shrink: 0;
      }
      .ingest-connect-strip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        background: #20232b;
        border: 1px solid #3a3d44;
        border-radius: 4px;
        padding: 0.3rem 0.4rem;
        color: #b9c1cc;
        flex-shrink: 0;
      }
      .ingest-connect-strip.connected {
        border-color: #2f5a3a;
        color: #8fd9a6;
      }
      .ingest-connect-settings {
        background: #333;
        color: #e8eaed;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 0.2rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .ingest-connect-settings:hover {
        background: #444;
      }
      .ingest-home-routes {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
      }
      .ingest-route-btn {
        width: 100%;
        text-align: left;
        background: #20232b;
        color: #e8eaed;
        border: 1px solid #3a3d44;
        border-left-width: 4px;
        border-radius: 6px;
        padding: 0.55rem 0.65rem;
        cursor: pointer;
      }
      .ingest-route-btn:hover {
        background: #252a36;
      }
      .ingest-route-btn-title {
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
      }
      .ingest-route-btn-sub {
        display: block;
        margin-top: 0.15rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #b9c1cc;
        line-height: 1.35;
      }
      .ingest-route-btn-live {
        border-left-color: #4a90e2;
      }
      .ingest-route-btn-sharepoint {
        border-left-color: #00a4ef;
      }
      .ingest-route-btn-history {
        border-left-color: #4f9a6b;
      }
      /* Help / About panel. Wider than the other side panels because
         the content is reading material (paragraphs, a button table, a
         glossary), not a table of structured rows. The same
         right-anchored slide-in pattern keeps the visual language
         consistent with every other panel. */
      #help_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(560px, 56vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 101;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.7rem 0.95rem;
        overflow-y: auto;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #e6e7ea;
        line-height: 1.45;
      }
      #help_panel.visible { display: block; }
      #help_panel .help-header-row h4 {
        margin: 0 0 0.6rem 0;
        font-size: var(--lux-fs-md, 1rem);
        color: #fff;
      }
      #help_panel .help-section {
        margin: 0 0 1.1rem 0;
      }
      #help_panel .help-section h5 {
        margin: 0 0 0.45rem 0;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #8ab4f8;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      #help_panel .help-section p {
        margin: 0 0 0.5rem 0;
      }
      #help_panel .help-rationale {
        color: #bdc1c6;
        border-left: 2px solid #3f3a1f;
        padding-left: 0.55rem;
      }
      /* Operating-premise callout: distinct amber outline so it reads as a
         standing rule rather than ordinary copy. Sits at the top of the
         Help panel so first-time visitors land on it before anything else. */
      #help_panel .help-premise {
        border: 1px solid #6a5512;
        background: rgba(106, 85, 18, 0.08);
        border-radius: 4px;
        padding: 0.65rem 0.75rem 0.4rem 0.75rem;
        margin-bottom: 1.2rem;
      }
      #help_panel .help-premise h5 {
        color: #f4c84a;
      }
      #help_panel .help-premise p {
        color: #e8eaed;
      }
      #help_panel .help-premise .help-rationale {
        border-left-color: #6a5512;
        color: #bdc1c6;
      }
      /* Top-of-page disclaimer banner. Sits directly under the toolbar
         so it is the first visible content on the canvas area on every
         view. Amber border + tinted background so it reads as a standing
         rule, not a transient notification. Wraps freely on narrow screens. */
      #disclaimer_banner {
        position: fixed;
        top: 2.6rem; /* tracks the height of #toolbar (legacy, no shell) */
        left: 0;
        right: 0;
        z-index: 10;
        padding: 0.55rem 0.8rem;
        background: rgba(106, 85, 18, 0.18);
        border-bottom: 2px solid #c9a227;
        color: #fff8df;
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1.4;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
      }
      #disclaimer_banner .disclaimer-row {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        max-width: 1200px;
        margin: 0 auto;
      }
      #disclaimer_banner .disclaimer-tag {
        flex: 0 0 auto;
        font-weight: 700;
        color: #f4c84a;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: var(--lux-fs-xs, 0.8rem);
        padding-top: 0.1rem;
      }
      #disclaimer_banner .disclaimer-text {
        flex: 1 1 auto;
        margin: 0;
      }
      #disclaimer_banner .disclaimer-ack {
        flex: 0 0 auto;
        background: #c9a227;
        color: #1a1d23;
        border: 1px solid #c9a227;
        font-weight: 600;
        padding: 0.25rem 0.65rem;
        height: 1.7rem;
        line-height: 1.1;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
        border-radius: 3px;
      }
      #disclaimer_banner .disclaimer-ack:hover {
        background: #f4c84a;
        border-color: #f4c84a;
      }
      /* Let canvas/shell controls remain clickable through the banner;
         only the explicit acknowledge button should capture pointer input. */
      #disclaimer_banner { pointer-events: none; }
      #disclaimer_banner .disclaimer-ack { pointer-events: auto; }
      #disclaimer_banner.acknowledged .disclaimer-text {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #disclaimer_banner.acknowledged {
        padding: 0.3rem 0.8rem;
      }
      #disclaimer_banner.acknowledged .disclaimer-ack {
        display: none;
      }
      /* Phone: the wrapped disclaimer, view toolbar, ingest rail, and
         decision reading were one stack. Keep each in its own band.
         The banner scrolls; the workspace disclosure owns the header row. */
      @media (max-width: 720px) {
        body.has-spine:not(:has(.luxon-shell-root[data-spine="1"])) {
          --luxon-spine-chrome-h: 0px;
        }
        body.has-shell #disclaimer_banner {
          max-height: 4.1rem;
          overflow: auto;
          box-sizing: border-box;
        }
        body.has-shell #disclaimer_banner .disclaimer-ack {
          position: sticky;
          top: 0;
          min-height: 24px;
          flex: 0 0 auto;
        }
        body.has-shell:has(#ops_after_open_banner) {
          --luxon-ops-banner-h: 4.5rem;
        }
        body.has-shell #ops_after_open_banner {
          max-height: var(--luxon-ops-banner-h, 4.5rem);
          overflow: auto;
          width: min(36rem, calc(100vw - var(--luxon-shell-rail-w, 32vw) - 24px)) !important;
        }
        body.has-shell #luxon_legacy_panels > #decision_space_panel.visible {
          left: 8px !important;
          right: calc(var(--luxon-shell-rail-w, 32vw) + var(--luxon-shell-gutter, 12px) + 8px) !important;
          max-width: calc(100vw - var(--luxon-shell-rail-w, 32vw) - var(--luxon-shell-gutter, 12px) - 24px) !important;
          top: calc(var(--luxon-float-top) + var(--luxon-ops-banner-h, 0px)) !important;
          height: calc(100% - var(--luxon-float-top) - var(--luxon-ops-banner-h, 0px) - var(--luxon-shell-bottom-h, var(--luxon-shell-strip-h, 40px))) !important;
        }
        body.has-shell #luxon-runtime-toolbar {
          top: 4px !important;
          left: 8px !important;
          right: 88px;
          width: auto;
          max-height: 36px;
          transform: none !important;
          flex-wrap: nowrap !important;
          overflow-x: auto;
          justify-content: flex-start;
        }
      }
      /* One float top — banner + spine chrome live in --luxon-float-top.
         New *_panel ids inherit. Rehosted spine panes keep top:auto. */
      #luxon_legacy_panels > [id$="_panel"] {
        top: var(--luxon-float-top);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h, var(--luxon-shell-strip-h, 40px)));
      }
      body.has-disclaimer-banner #scene_context_bar,
      body.has-disclaimer-banner.disclaimer-acknowledged #scene_context_bar {
        top: var(--luxon-shell-dock-top);
      }
      /* S11-6 retirement: the persistent #premise_strip element was
         removed (its job duplicated the disclaimer banner). The CSS
         that styled it is deleted here so no dead selectors ship. */
      #help_panel .help-steps {
        margin: 0;
        padding-left: 1.2rem;
      }
      #help_panel .help-steps li {
        margin: 0 0 0.45rem 0;
      }
      #help_panel .help-buttons {
        width: 100%;
        border-collapse: collapse;
      }
      #help_panel .help-buttons td {
        padding: 0.3rem 0.55rem 0.3rem 0;
        vertical-align: top;
        border-bottom: 1px solid #2a2d35;
      }
      #help_panel .help-buttons td:first-child {
        white-space: nowrap;
        color: #fff;
        width: 5.5rem;
      }
      #help_panel .help-glossary dt {
        font-weight: 600;
        color: #fff;
        margin-top: 0.45rem;
      }
      #help_panel .help-glossary dd {
        margin: 0.15rem 0 0 0;
        color: #bdc1c6;
      }
      #help_panel code {
        background: #2a2d35;
        padding: 0 0.25rem;
        border-radius: 3px;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .llm-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
      }
      .llm-header-row h4 {
        margin: 0;
        font-size: var(--lux-fs-sm, 0.875rem);
      }
      .llm-header-buttons {
        display: flex;
        gap: 0.3rem;
      }
      .llm-header-buttons button {
        background: #2a2d35;
        color: #e8eaed;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 0.2rem 0.5rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .llm-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.25rem 0.4rem;
        border-radius: 3px;
        background: #2a2d35;
        color: #9aa0a6;
        flex-shrink: 0;
      }
      .llm-status-mock {
        color: #f6c177;
      }
      .llm-status-live {
        color: #8fd9a6;
      }
      .llm-settings-form {
        display: none;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.5rem;
        background: #20232b;
        border: 1px solid #3a3d44;
        border-radius: 4px;
        flex-shrink: 0;
      }
      .llm-settings-form.visible {
        display: flex;
      }
      .llm-settings-hint {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        line-height: 1.35;
      }
      .llm-settings-hint code {
        background: #1a1d23;
        padding: 0 0.25rem;
        border-radius: 2px;
      }
      .llm-settings-advanced {
        border-top: 1px solid #2a2e35;
        padding-top: 0.35rem;
      }
      .llm-settings-advanced > summary {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        cursor: pointer;
        user-select: none;
        list-style: revert;
      }
      .llm-settings-advanced > summary:hover {
        color: #c1c5cc;
      }
      .llm-settings-advanced .llm-field {
        margin-top: 0.3rem;
      }
      .llm-field {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .llm-field input {
        background: #1a1d23;
        color: #e8eaed;
        border: 1px solid #444;
        border-radius: 3px;
        padding: 0.25rem 0.4rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
      }
      .llm-settings-actions {
        display: flex;
        gap: 0.3rem;
      }
      .llm-settings-actions button {
        flex: 1;
        background: #333;
        color: #e8eaed;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 0.3rem 0.5rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .llm-settings-actions button:hover {
        background: #444;
      }
      .llm-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        flex-shrink: 1;
        min-height: 0;
        max-height: min(5.5rem, 22vh);
        overflow: auto;
      }
      .llm-quick-btn {
        background: #2a2d35;
        color: #cfd2d9;
        border: 1px solid #444;
        border-radius: 4px;
        padding: 0.2rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .llm-quick-btn:hover {
        background: #353841;
      }
      .llm-transcript {
        flex: 1 1 auto;
        overflow: auto;
        background: #15171c;
        border: 1px solid #2c2f36;
        border-radius: 4px;
        padding: 0.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        /* min-height: 0 lets flex shrink so Ask stays in view on short spine. */
        min-height: 0;
      }
      .llm-turn {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
      }
      .llm-turn-label {
        font-size: var(--lux-fs-xs, 0.8rem);
        text-transform: uppercase;
        color: #6f7480;
        letter-spacing: 0.05em;
      }
      .llm-turn-body {
        white-space: pre-wrap;
        word-break: break-word;
        line-height: 1.4;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .llm-turn-user .llm-turn-body {
        color: #d2d6dc;
      }
      .llm-turn-assistant .llm-turn-body {
        color: #c2dfff;
      }
      .llm-turn-error .llm-turn-body {
        color: #ff7d7d;
      }
      .llm-turn-footer {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #7a8290;
        font-style: italic;
        padding-top: 0.15rem;
        border-top: 1px dashed #2c2f36;
        margin-top: 0.15rem;
      }
      .llm-turn-feedback {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #7a8290;
        margin-top: 0.2rem;
      }
      .llm-fb-btn {
        background: none;
        border: 1px solid #2c2f36;
        border-radius: 4px;
        cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1;
        padding: 0.1rem 0.35rem;
        opacity: 0.75;
      }
      .llm-fb-btn:hover {
        opacity: 1;
        border-color: #4a90e2;
      }
      .llm-input-row {
        display: flex;
        gap: 0.3rem;
        align-items: stretch;
        flex-shrink: 0;
      }
      .llm-input {
        flex: 1 1 auto;
        min-width: 0;
        background: #15171c;
        color: #e8eaed;
        border: 1px solid #444;
        border-radius: 4px;
        padding: 0.35rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
        resize: vertical;
        min-height: 60px;
      }
      .llm-send {
        flex: 0 0 auto;
        flex-shrink: 0;
        background: #2c5fb8;
        color: #fff;
        border: 1px solid #2c5fb8;
        border-radius: 4px;
        padding: 0 0.85rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .llm-send:hover {
        background: #3771d6;
      }
      .llm-send[disabled] {
        opacity: var(--lux-disabled-opacity, 0.5);
        cursor: progress;
      }
      /* UAT #22 — Send must stay visible on narrow co-pilot / laptop widths */
      @media (max-width: 640px) {
        .llm-input-row {
          flex-wrap: wrap;
        }
        .llm-send {
          width: 100%;
          min-height: 36px;
        }
      }
      #bid_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(460px, 48vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 101;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.45rem;
        overflow: auto;
      }
      #bid_panel.visible {
        display: flex;
      }
      .bid-header-row h4 {
        margin: 0;
        font-size: var(--lux-fs-sm, 0.875rem);
      }
      .bid-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.25rem 0.4rem;
        border-radius: 3px;
        background: #2a2d35;
        color: #9aa0a6;
      }
      .bid-status-mock {
        color: #f6c177;
      }
      .bid-status-live {
        color: #8fd9a6;
      }
      .bid-status-error {
        color: #ff7d7d;
      }
      .bid-hint {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        line-height: 1.4;
      }
      .ingest-route-banner {
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1.4;
        border-radius: 4px;
        padding: 0.35rem 0.45rem;
        border: 1px solid #3a3d44;
        background: #20232b;
        color: #d2d6dc;
      }
      .ingest-route-banner strong {
        color: #fff;
      }
      .ingest-route-bids {
        border-color: #2c4a6b;
      }
      .ingest-route-archive {
        border-color: #2f5a3a;
      }
      .bid-field {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .bid-field input,
      .bid-field select {
        background: #1a1d23;
        color: #e8eaed;
        border: 1px solid #444;
        border-radius: 3px;
        padding: 0.3rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
      }
      .bid-field-hint {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #8b919b;
        line-height: 1.35;
      }
      .bid-family-proposal {
        margin-left: 0.4rem;
        background: #1a1d23;
        color: #c1c5cc;
        border: 1px solid #3a3f47;
        border-radius: 3px;
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.05rem 0.2rem;
      }
      .bid-dropzone {
        border: 2px dashed #555;
        border-radius: 8px;
        min-height: 140px;
        padding: 1.5rem 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: #1a1d23;
        color: #c1c5cc;
        font-size: var(--lux-fs-sm, 0.875rem);
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s;
      }
      .bid-dropzone:hover,
      .bid-dropzone:focus {
        background: #20242c;
        border-color: #8ab4f8;
        outline: none;
      }
      .bid-dropzone-idle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
      }
      .bid-dropzone-icon {
        font-size: 1.5rem;
        line-height: 1;
        color: #8ab4f8;
      }
      .bid-dropzone-sub {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #6f7480;
      }
      /* While a drag hovers the zone or anywhere over the panel: light the
         zone up and swap the prompt to "Release to add the files". */
      .bid-dropzone-active {
        display: none;
        font-weight: 600;
        font-size: var(--lux-fs-sm, 0.875rem);
        color: #bcd6ff;
      }
      .bid-dropzone.dragover,
      .bid-panel-dragging .bid-dropzone {
        background: rgba(74, 144, 226, 0.14);
        border-color: #8ab4f8;
        border-style: solid;
        outline: none;
      }
      .bid-dropzone.dragover .bid-dropzone-idle,
      .bid-panel-dragging .bid-dropzone .bid-dropzone-idle {
        display: none;
      }
      .bid-dropzone.dragover .bid-dropzone-active,
      .bid-panel-dragging .bid-dropzone .bid-dropzone-active {
        display: block;
      }
      /* Workspace integration: "From my computer | From SharePoint" segment. */
      .bid-source-segment {
        display: flex;
        gap: 0;
        margin-bottom: 0.4rem;
        border: 1px solid #2c2f36;
        border-radius: 6px;
        overflow: hidden;
      }
      .bid-seg-btn {
        flex: 1 1 0;
        padding: 0.32rem 0.5rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
        background: #15171c;
        color: #9aa0a6;
        border: none;
        cursor: pointer;
        transition: background 0.1s, color 0.1s;
      }
      .bid-seg-btn + .bid-seg-btn {
        border-left: 1px solid #2c2f36;
      }
      .bid-seg-btn.active,
      .bid-seg-btn[aria-pressed="true"] {
        background: #20242c;
        color: #e8eaed;
      }
      .bid-sharepoint-section {
        border: 1px solid #2c2f36;
        border-radius: 6px;
        padding: 0.7rem;
        background: #1a1d23;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .bid-sp-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
        line-height: 1.45;
      }
      .bid-sp-browse-btn {
        align-self: flex-start;
        padding: 0.4rem 0.8rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
        font-weight: 600;
        color: #fff;
        background: #2c5fb8;
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
      }
      .bid-sp-browse-btn:hover {
        background: #3771d6;
      }
      .bid-sp-staged {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #8fd9a6;
        min-height: 0.9rem;
      }
      .bid-sp-divider {
        height: 1px;
        background: #2c2f36;
        margin: 0.15rem 0;
      }
      .bid-sp-out-label {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        line-height: 1.4;
      }
      .bid-sp-out-row {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
      }
      .bid-sp-out-btn {
        padding: 0.36rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
        font-weight: 600;
        color: #d2d6dc;
        background: #22262e;
        border: 1px solid #2c2f36;
        border-radius: 6px;
        cursor: pointer;
      }
      .bid-sp-out-btn:hover {
        background: #2a2f38;
        border-color: #3a3f48;
        color: #e8eaed;
      }
      .bid-sp-out-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .bid-file-picker {
        display: none;
      }
      .bid-folder-row {
        margin: 0.25rem 0 0;
        text-align: center;
      }
      .bid-folder-btn {
        background: none;
        border: none;
        color: var(--lux-move-fg, #9bd3ff);
        font: inherit;
        font-size: var(--lux-fs-xs, 0.8rem);
        text-decoration: underline;
        cursor: pointer;
        padding: 0.15rem 0.3rem;
      }
      .bid-folder-btn:hover {
        color: var(--lux-text, #e8eaed);
      }
      .bid-capacity-hint {
        display: block;
        margin: 0.3rem 0 0;
        color: var(--lux-text-dim, #9aa0a6);
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1.3;
      }
      .bid-file-list {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        max-height: 35vh;
        overflow: auto;
        background: #15171c;
        border: 1px solid #2c2f36;
        border-radius: 4px;
        padding: 0.3rem;
      }
      .bid-file-row {
        display: grid;
        grid-template-columns: 1fr auto 110px 90px;
        gap: 0.4rem;
        align-items: center;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .bid-file-row[data-status="done"] {
        color: #8fd9a6;
      }
      .bid-file-row[data-status="error"] {
        color: #ff7d7d;
      }
      .bid-row-name {
        font-family: ui-monospace, monospace;
        font-size: var(--lux-fs-xs, 0.8rem);
        word-break: break-all;
      }
      .bid-row-meta {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        white-space: nowrap;
      }
      .bid-progress-track {
        background: #2a2d35;
        height: 6px;
        border-radius: 3px;
        overflow: hidden;
      }
      .bid-progress-fill {
        background: #2c5fb8;
        height: 100%;
        width: 0;
        transition: width 0.1s linear;
      }
      .bid-row-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        text-align: right;
      }
      .bid-skipped {
        color: #f6c177;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .bid-summary {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .bid-publish-label {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .bid-actions-row {
        display: flex;
        gap: 0.35rem;
        flex-shrink: 0;
      }
      .bid-upload-btn {
        flex: 1;
        min-height: var(--lux-min-tap, 28px);
        background: var(--lux-move-strong, #2c5fb8);
        color: #fff;
        border: 1px solid var(--lux-move-strong, #2c5fb8);
        border-radius: var(--lux-r-ctl, 6px);
        padding: 0.4rem 0.9rem;
        font-size: var(--lux-fs-md, 1rem);
        font-weight: 700;
        cursor: pointer;
      }
      .bid-upload-btn:hover {
        filter: brightness(1.08);
      }
      .bid-upload-btn:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2);
        outline-offset: 1px;
      }
      .bid-upload-btn[disabled] {
        opacity: var(--lux-disabled-opacity, 0.5);
        cursor: not-allowed;
      }
      .bid-upload-next-btn {
        font-weight: 700;
        padding: 0.5rem 1rem;
      }
      .bid-clear-btn {
        background: #333;
        color: #e8eaed;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 0.35rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      /* Archive panel (PRD §21 Phase 2.5). Right-side drawer for
         historical-project Excel / commercial workbook uploads. Sits
         on a separate z-index above docs so opening Archive doesn't
         look like a Docs sub-panel. */
      #archive_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(520px, 52vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 8;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.4rem;
        overflow: hidden;
        min-height: 0;
      }
      #archive_panel.visible { display: flex; }
      .archive-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }
      .archive-history {
        background: #15171c;
        border: 1px solid #2c2f36;
        border-radius: 4px;
        padding: 0.35rem;
      }
      .archive-history-title {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        margin-bottom: 0.25rem;
      }
      .archive-history-batch {
        margin-bottom: 0.35rem;
      }
      .archive-history-batch-head {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
        margin-bottom: 0.15rem;
      }
      .archive-actions-row {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        padding-top: 0.15rem;
      }
      .archive-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.4rem;
      }
      .archive-header-row h4 { margin: 0; font-size: var(--lux-fs-sm, 0.875rem); }
      .archive-hint {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        line-height: 1.4;
        background: #20232b;
        border-radius: 3px;
        padding: 0.4rem 0.5rem;
      }
      .archive-hint code {
        background: #1a1d23;
        color: #b9c1cc;
        padding: 0 0.25rem;
        border-radius: 2px;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .archive-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        background: #2a2d35;
        color: #9aa0a6;
      }
      .archive-status-mock  { color: #f6c177; }
      .archive-status-live  { color: #8fd9a6; }
      .archive-status-error { color: #ff7d7d; }
      .archive-field {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .archive-field input {
        background: #1a1d23;
        color: #e8eaed;
        border: 1px solid #444;
        border-radius: 3px;
        padding: 0.3rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
      }
      .archive-dropzone {
        border: 2px dashed #555;
        border-radius: 8px;
        min-height: 110px;
        padding: 1.25rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        text-align: center;
        background: #1a1d23;
        color: #c1c5cc;
        font-size: var(--lux-fs-sm, 0.875rem);
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s;
      }
      .archive-dropzone:hover,
      .archive-dropzone:focus {
        background: #20242c;
        border-color: #8ab4f8;
        outline: none;
      }
      .archive-dropzone.dragover,
      .archive-panel-dragging .archive-dropzone {
        background: rgba(74, 144, 226, 0.14);
        border-color: #8ab4f8;
        border-style: solid;
        outline: none;
      }
      .archive-dropzone-sub { font-size: var(--lux-fs-xs, 0.8rem); color: #6f7480; }
      .archive-file-picker { display: none; }
      .archive-file-list {
        flex: 0 0 auto;
        background: #15171c;
        border: 1px solid #2c2f36;
        border-radius: 4px;
        padding: 0.3rem;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
      }
      .archive-file-row {
        display: grid;
        grid-template-columns: 1fr auto 130px;
        gap: 0.4rem;
        align-items: center;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .archive-file-row.archive-status-done { color: #8fd9a6; }
      .archive-file-row.archive-status-error { color: #ff7d7d; }
      .archive-row-name {
        font-family: ui-monospace, monospace;
        font-size: var(--lux-fs-xs, 0.8rem);
        word-break: break-all;
      }
      .archive-row-meta {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        white-space: nowrap;
      }
      .archive-row-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        text-align: right;
      }
      .archive-empty {
        text-align: center;
        color: #6f7480;
        padding: 0.6rem;
      }
      .panel-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 8px 0;
      }
      .panel-quick-btn {
        border: 1px solid #3a3f48;
        background: #1f232b;
        color: #d2d6dc;
        border-radius: 6px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        padding: 4px 10px;
        min-height: 28px;
        cursor: pointer;
        font-family: inherit;
      }
      .panel-quick-btn:hover:not(:disabled):not([disabled]) {
        border-color: #4d6ea8;
        color: #f2f6ff;
        background: #282d36;
      }
      .panel-quick-btn:focus-visible {
        outline: 2px solid #4a90e2;
        outline-offset: 2px;
      }
      .panel-quick-btn:disabled,
      .panel-quick-btn[disabled] {
        opacity: var(--lux-disabled-opacity, 0.5);
        cursor: not-allowed;
      }
      /* Semantic modifiers — same colour language as the proposal buttons
         and status pills (blue = primary/go, green = affirm, amber = wait,
         red = destructive). Higher specificity than the neutral base + its
         hover, so they win wherever applied; :disabled still dims them. */
      .panel-quick-btn--primary { background: #2c5fb8; color: #fff; border-color: #2c5fb8; }
      .panel-quick-btn--go { background: #1f4a2f; color: #9bf0b3; border-color: #2a6a40; }
      .panel-quick-btn--warn { background: #4a3a1f; color: #f6c177; border-color: #6a521f; }
      .panel-quick-btn--danger { background: #4a1f1f; color: #ff9a9a; border-color: #6e2e2e; }
      .panel-quick-btn--primary:hover:not(:disabled):not([disabled]),
      .panel-quick-btn--go:hover:not(:disabled):not([disabled]),
      .panel-quick-btn--warn:hover:not(:disabled):not([disabled]),
      .panel-quick-btn--danger:hover:not(:disabled):not([disabled]) {
        filter: brightness(1.18);
        color: #fff;
      }
      /* Ingest Publish is the primary go-action on the ingest rail. */
      [data-ingest-publish].versions-refresh-btn { background: #2c5fb8; color: #fff; }
      [data-ingest-publish].versions-refresh-btn:hover { background: #3771d6; }
      .archive-upload-btn {
        flex: 1;
        background: #2c5fb8;
        color: #fff;
        border: 1px solid #2c5fb8;
        border-radius: 4px;
        padding: 0.35rem 0.85rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .archive-upload-btn:hover { background: #3771d6; }
      .archive-upload-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
      .archive-clear-btn {
        background: #333;
        color: #e8eaed;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 0.35rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      /* Document Control panel (PRD §10.2 D-6). Right-side drawer, sibling
         layout to chat / bids / data panels. */
      #docs_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(560px, 56vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 7;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.4rem;
        overflow: hidden;
      }
      #docs_panel.visible {
        display: flex;
      }
      .doc-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.4rem;
      }
      .doc-header-row h4 {
        margin: 0;
        font-size: var(--lux-fs-sm, 0.875rem);
      }
      .doc-header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .doc-current-only {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .doc-refresh-btn {
        background: #2a2d35;
        color: #e8eaed;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 0.2rem 0.5rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .doc-refresh-btn:hover {
        background: #353841;
      }
      .doc-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        padding: 0.25rem 0.4rem;
        background: #20232b;
        border-radius: 3px;
      }
      .doc-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .doc-summary strong { color: #f0f4f8; }
      #docs_panel .doc-summary .luxon-pill {
        padding: 0.1rem 0.45rem;
        border-radius: 999px;
        background: #2a2d35;
        color: #c1c5cc;
        border: 1px solid #3a3d44;
      }
      #docs_panel .doc-summary .luxon-pill[data-doc-kind="current"] { color: #8fd9a6; border-color: #2f5a3a; }
      #docs_panel .doc-summary .luxon-pill[data-doc-kind="superseded"] { color: #ff9a9a; border-color: #5a2f2f; }
      #docs_panel .doc-summary .luxon-pill[data-doc-kind="singleton"] { color: #9bd3ff; border-color: #2c4a6b; }
      #docs_panel .doc-summary .luxon-pill[data-doc-kind="needs-review"] { color: #f6c177; border-color: #5a4524; }
      .doc-table-wrap {
        flex: 1 1 auto;
        overflow: auto;
        background: #15171c;
        border: 1px solid #2c2f36;
        border-radius: 4px;
      }
      .doc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .doc-table th,
      .doc-table td {
        border-bottom: 1px solid #2c2f36;
        padding: 4px 6px;
        text-align: left;
        vertical-align: top;
        word-break: break-word;
      }
      .doc-table th {
        position: sticky;
        top: 0;
        background: #20232b;
        color: #cfd2d9;
        font-weight: 600;
        text-align: left;
      }
      .doc-row-superseded td { color: #b9c1cc; opacity: 0.7; }
      .doc-row-superseded .doc-mono { text-decoration: line-through; }
      .doc-row-needs_review td { color: #f6c177; }
      .doc-row-current td { color: #e8eaed; }
      .doc-row-singleton td { color: #c1c5cc; }
      .doc-mono { font-family: ui-monospace, monospace; }
      .doc-empty { text-align: center; color: #9aa0a6; padding: 1rem; }
      #docs_panel .doc-table .luxon-pill,
      #docs_panel .doc-lineage .luxon-pill {
        display: inline-block;
        padding: 0.05rem 0.4rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: 3px;
        font-weight: 600;
      }
      #docs_panel .luxon-pill[data-doc-rev="current"] { background: #1e3f2a; color: #8fd9a6; }
      #docs_panel .luxon-pill[data-doc-rev="superseded"] { background: #3f1e1e; color: #ff9a9a; }
      #docs_panel .luxon-pill[data-doc-rev="singleton"] { background: #1e2d3f; color: #9bd3ff; }
      #docs_panel .luxon-pill[data-doc-rev="needs_review"] { background: #3f321e; color: #f6c177; }
      .doc-supby {
        font-family: ui-monospace, monospace;
        color: #8ab4f8;
        text-decoration: none;
        cursor: help;
      }
      .doc-supby-link {
        cursor: pointer;
        text-decoration: underline;
        text-decoration-style: dotted;
        border-radius: 3px;
      }
      .doc-supby-link:hover { color: #aecbfb; }
      .doc-supby-link:focus-visible {
        outline: 2px solid #4a7ab5;
        outline-offset: 1px;
      }
      /* Client-side lineage of files pulled from the (mock) SharePoint
         workspace this session. Sits above the gateway table and renders
         even while disconnected, so "what did I bring in, which revision,
         is any of it replaced?" is answerable immediately. */
      .doc-lineage {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.4rem 0.45rem;
        background: #181b21;
        border: 1px solid #2c2f36;
        border-radius: 4px;
      }
      .doc-lineage-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
      }
      .doc-lineage-title {
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        color: #cfd2d9;
      }
      .doc-lineage-count {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
      }
      .doc-lineage-count-warn { color: #f6c177; }
      .doc-lineage-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .doc-lineage-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: start;
        gap: 0.4rem;
        padding: 0.3rem 0.35rem;
        background: #15171c;
        border: 1px solid #2c2f36;
        border-radius: 3px;
      }
      .doc-lineage-item-stale { border-color: #5a2f2f; }
      .doc-lineage-mark { align-self: center; }
      .doc-lineage-body { min-width: 0; }
      .doc-lineage-name {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #e8eaed;
        display: flex;
        align-items: baseline;
        gap: 0.35rem;
        flex-wrap: wrap;
      }
      .doc-lineage-rev {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9bd3ff;
        border: 1px solid #2c4a6b;
        border-radius: 999px;
        padding: 0 0.35rem;
      }
      .doc-lineage-meta {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        word-break: break-word;
      }
      .doc-lineage-warn {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #f6c177;
        margin-top: 0.15rem;
      }
      .doc-lineage-reuse {
        display: inline-block;
        margin-top: 0.2rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #8fd9a6;
        background: #1e3f2a;
        border: 1px solid #2f5a3a;
        border-radius: 999px;
        padding: 0.05rem 0.45rem;
      }
      .doc-lineage-reuse-link { cursor: pointer; }
      .doc-lineage-reuse-link:hover { background: #265234; color: #b6f0c6; }
      .doc-lineage-reuse-link:focus-visible {
        outline: 2px solid #4a7ab5;
        outline-offset: 1px;
      }
      /* Image Bank sibling of the reuse chip: a pulled drawing's reference
         imagery, click to open the Image Bank filtered to it. */
      .doc-lineage-images {
        display: inline-block;
        margin-top: 0.2rem;
        margin-left: 0.3rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #cdbcf0;
        background: #2b2740;
        border: 1px solid #4b3f73;
        border-radius: 999px;
        padding: 0.05rem 0.45rem;
        cursor: pointer;
      }
      .doc-lineage-images:hover { background: #382f52; color: #e7ddff; }
      .doc-lineage-link {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #8ab4f8;
        text-decoration: none;
        white-space: nowrap;
        align-self: center;
      }
      .doc-lineage-link:hover { text-decoration: underline; }
      /* Multi-scene picker (PRD §10.3 D-5). Hidden when scenes.length <= 1.
         Sits below the toolbar, top-left, so the canvas stays uncluttered.
         Designed as a CAD-style segmented control. */
      #scene_picker {
        position: fixed;
        top: 52px;
        left: 12px;
        z-index: 4;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.25rem;
        background: rgba(20, 22, 28, 0.92);
        border: 1px solid #3a3d44;
        border-radius: 6px;
        max-width: min(60vw, 720px);
        align-items: center;
      }
      #scene_picker .scene-sort-label {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #aeb4bf;
        white-space: nowrap;
      }
      #scene_picker .scene-sort-select {
        background: #1a1d23;
        color: #e8eaed;
        border: 1px solid #444;
        border-radius: 4px;
        padding: 0.2rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
      }
      #scene_picker .scene-sort-hint {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #8f97a5;
        white-space: nowrap;
      }
      #scene_picker .scene-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
      }
      #scene_picker .scene-tab {
        background: #2a2d35;
        color: #cfd2d9;
        border: 1px solid #444;
        border-radius: 4px;
        padding: 0.25rem 0.6rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: inherit;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.1s, border-color 0.1s, color 0.1s;
      }
      #scene_picker .scene-tab:hover {
        background: #353841;
        border-color: #555;
      }
      #scene_picker .scene-tab[aria-selected="true"] {
        background: #2c5fb8;
        border-color: #3771d6;
        color: #fff;
      }
      #scene_picker .scene-tab[aria-selected="true"]::before {
        content: "▸ ";
        color: rgba(255, 255, 255, 0.75);
      }
      #scene_context_bar {
        position: fixed;
        top: var(--luxon-shell-dock-top);
        /* Centre strip: clear param (left) and rail+scene (right) docks. */
        left: var(--luxon-shell-context-left);
        right: var(--luxon-shell-context-right);
        z-index: 4;
        min-width: 0;
        max-width: calc(100vw - var(--luxon-shell-context-left) - var(--luxon-shell-context-right));
        box-sizing: border-box;
        padding: 0.25rem 0.5rem;
        background: rgba(20, 22, 28, 0.92);
        border: 1px solid #3a3d44;
        border-radius: 6px;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #d0d6df;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
      }
      @media (max-width: 860px) {
        #scene_context_bar {
          font-size: var(--lux-fs-xs, 0.8rem);
          padding: 0.2rem 0.4rem;
        }
      }
      /* landing object caption -- only visible when no ?xkt= / ?manifest=.
         Title + one subtitle only (pointer-events:none). No meta CTAs —
         the welcome card owns the sole primary action on cold land. */
      #landing_caption {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        text-align: center;
        pointer-events: none;
        padding: 0.45rem 1rem 0.55rem;
        background: linear-gradient(to top, rgba(15, 17, 22, 0.78), rgba(15, 17, 22, 0));
        animation: landingFadeIn 1.4s ease-out 0.2s both;
      }
      .landing-caption-line {
        line-height: 1.4;
      }
      .landing-caption-title {
        font-size: var(--lux-fs-sm, 0.875rem);
        font-weight: 600;
        letter-spacing: 0.32em;
        color: #f0f4f8;
        text-transform: uppercase;
      }
      .landing-caption-sub {
        margin-top: 0.15rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #b9c1cc;
        font-weight: 400;
      }
      @keyframes landingFadeIn {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @media (max-width: 640px) {
        .landing-caption-title {
          font-size: var(--lux-fs-xs, 0.8rem);
          letter-spacing: 0.24em;
        }
        .landing-caption-sub {
          font-size: var(--lux-fs-xs, 0.8rem);
        }
      }
      /* Components panel (Ontology Phase B -- one-row-per-thing
         axonometric view). Same right-side drawer pattern. */
      #components_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(720px, 70vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 9;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.45rem;
        overflow: hidden;
      }
      #components_panel.visible { display: flex; }
      /* Reference Condition Data (RCD) — the project design baseline the runtime
         is grounded in. A first-class drawer panel (Understand group) so the
         baseline is locatable in every shell, not only the spine. */
      #onm_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(720px, 70vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 9;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.7rem 0.85rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c9d1d9;
        flex-direction: column;
        gap: 0.5rem;
        overflow-y: auto;
      }
      #onm_panel.visible { display: flex; }
      #onm_panel h4 { margin: 0; font-size: var(--lux-fs-sm, 0.875rem); color: #f0f4f8; }
      .luxon-onm-sub { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.4; margin: 0.25rem 0 0; }
      .luxon-onm-grid { width: 100%; border-collapse: collapse; font-size: var(--lux-fs-xs, 0.8rem); }
      .luxon-onm-grid th, .luxon-onm-grid td { border: 1px solid #333; padding: 4px 6px; text-align: left; }
      .luxon-onm-grid th { background: #1c2128; color: #e6edf3; }
      .luxon-onm-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
      .luxon-onm-actions button { font-size: var(--lux-fs-xs, 0.8rem); }
      .luxon-onm-pathways { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
      .luxon-onm-honest { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .luxon-onm-cell-input {
        display: block;
        width: 100%;
        max-width: 7rem;
        margin: 1px 0;
        font-size: var(--lux-fs-xs, 0.8rem);
        background: #12151a;
        border: 1px solid #333;
        color: #e6edf3;
        padding: 2px 4px;
      }
      .luxon-onm-part-select {
        max-width: 11rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        background: #12151a;
        border: 1px solid #333;
        color: #e6edf3;
        vertical-align: middle;
      }
      .luxon-onm-compound { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); margin-top: 0.25rem; }
      .rcd-pathways { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.75rem; }
      #rcd_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(640px, 60vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h, var(--luxon-shell-strip-h, 40px)));
        z-index: 9;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.7rem 0.85rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c9d1d9;
        flex-direction: column;
        gap: 0.5rem;
        overflow-y: auto;
      }
      #rcd_panel.visible { display: flex; }
      #rcd_panel h4 { margin: 0; font-size: var(--lux-fs-sm, 0.875rem); color: #f0f4f8; }
      .rcd-subtitle { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.4; margin: 0; }
      .rcd-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
      .rcd-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        border-radius: 999px;
        padding: 1px 10px;
        border: 1px solid #34465c;
        white-space: nowrap;
      }
      .rcd-status--approved { border-color: #2f6b3a; color: #9be6a8; }
      .rcd-status--draft { border-color: #5a4524; color: #f6c177; }
      .rcd-status--superseded { border-color: #5a3a3a; color: #e0a3a3; }
      .rcd-status--none { border-color: #4a3a3a; color: #c79aa0; }
      .rcd-meaning { color: #c9d1d9; font-size: var(--lux-fs-xs, 0.8rem); margin: 0; line-height: 1.4; }
      .rcd-ground { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); margin: 0; }
      .rcd-section-title {
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #7f8694;
        margin: 0.55rem 0 0.1rem;
      }
      .rcd-params {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 3px 14px;
      }
      .rcd-param-label { color: #c9d1d9; }
      .rcd-param-count { text-align: right; color: #9aa0a6; font-variant-numeric: tabular-nums; }
      .rcd-param--empty .rcd-param-label,
      .rcd-param--empty .rcd-param-count { color: #5c6066; }
      .rcd-fab { display: flex; flex-wrap: wrap; gap: 0.3rem; }
      .rcd-fab .luxon-pill {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #cdbcf0;
        background: #2b2740;
        border: 1px solid #4b3f73;
        border-radius: 999px;
        padding: 1px 8px;
      }
      .rcd-foot {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.9rem;
        border-top: 1px solid #2c2f36;
        padding-top: 0.45rem;
        color: #9aa0a6;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .rcd-empty { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.5; }
      .rcd-ref-link {
        color: #9ecbff;
        text-decoration: underline;
        text-decoration-style: dotted;
        cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem);
        background: none;
        border: 0;
        padding: 0;
      }
      .rcd-ref-link:hover { color: #cfe4ff; }
      .rcd-links { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
      .rcd-howto {
        margin-top: 0.3rem;
        border-top: 1px solid #2c2f36;
        padding-top: 0.5rem;
      }
      .rcd-howto > summary {
        cursor: pointer;
        color: #9ecbff;
        font-size: var(--lux-fs-xs, 0.8rem);
        list-style: none;
      }
      .rcd-howto > summary::-webkit-details-marker { display: none; }
      .rcd-howto > summary::before { content: "\25B8  "; color: #6f7480; }
      .rcd-howto[open] > summary::before { content: "\25BE  "; }
      .rcd-howto-steps {
        margin: 0.45rem 0 0.3rem;
        padding-left: 1.1rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        color: #c9d1d9;
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1.4;
      }
      .rcd-howto-where { font-size: var(--lux-fs-xs, 0.8rem); color: #9aa0a6; margin: 0.25rem 0; }
      .rcd-howto-where code {
        background: #0f1115;
        border: 1px solid #2c2f36;
        border-radius: 4px;
        padding: 1px 6px;
        color: #cdbcf0;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .rcd-howto-note { font-size: var(--lux-fs-xs, 0.8rem); color: #7f8694; line-height: 1.45; margin: 0.3rem 0 0; }
      /* Admin-only ingest/update form — author the baseline straight from the
         window. Visually distinct (left accent) so it reads as a write action. */
      .rcd-ingest {
        margin: 0.6rem 0 0;
        padding: 0.5rem 0.6rem;
        background: #14110c;
        border: 1px solid #4a3b1e;
        border-left: 3px solid #caa24a;
        border-radius: 6px;
      }
      .rcd-ingest > summary {
        cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        color: #e6c878;
        list-style: none;
      }
      .rcd-ingest > summary::-webkit-details-marker { display: none; }
      .rcd-ingest > summary::before { content: "\25B8  "; color: #caa24a; }
      .rcd-ingest[open] > summary::before { content: "\25BE  "; }
      .rcd-ingest-form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
      .rcd-ingest-field { display: flex; flex-direction: column; gap: 0.15rem; }
      .rcd-ingest-label { font-size: var(--lux-fs-xs, 0.8rem); color: #b6bcc6; }
      .rcd-ingest-field input,
      .rcd-ingest-field select {
        background: #0f1115;
        border: 1px solid #2c2f36;
        border-radius: 4px;
        color: #e8eaed;
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 4px 6px;
      }
      .rcd-ingest-save {
        align-self: flex-start;
        background: #caa24a;
        border: none;
        border-radius: 5px;
        color: #1a1407;
        cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        padding: 5px 12px;
      }
      .rcd-ingest-save:disabled { opacity: 0.55; cursor: default; }
      .rcd-ingest-status { font-size: var(--lux-fs-xs, 0.8rem); color: #d6c089; margin: 0.1rem 0 0; min-height: 0.9rem; }
      .rcd-ingest-hint { font-size: var(--lux-fs-xs, 0.8rem); color: #8a8170; line-height: 1.45; margin: 0.4rem 0 0; }
      /* Parts | Across projects | LEED | Images — one Components surface. */
      #components_panel .components-tabs {
        display: flex;
        gap: 0.3rem;
        border-bottom: 1px solid #2c313c;
        flex: 0 0 auto;
      }
      #components_panel .components-tab {
        background: transparent;
        color: #99a0ad;
        border: 0;
        border-bottom: 2px solid transparent;
        padding: 0.3rem 0.6rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      #components_panel .components-tab:hover { color: #cdd2dd; }
      #components_panel .components-tab.is-active {
        color: #dbe5ff;
        border-bottom-color: #3d5180;
        font-weight: 600;
      }
      #components_panel .components-corpus-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #a8b0bd;
        margin: 0.35rem 0 0.25rem;
        line-height: 1.4;
      }
      #components_panel .components-corpus-empty {
        padding: 0.75rem 0.5rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #b8c0cc;
        line-height: 1.45;
      }
      #components_panel .components-corpus-empty p { margin: 0 0 0.4rem; }
      #components_panel .components-leed-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #a8b0bd;
        margin: 0.35rem 0 0.25rem;
        line-height: 1.4;
      }
      #components_panel .components-leed-empty {
        padding: 0.75rem 0.5rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #b8c0cc;
        line-height: 1.45;
      }
      #components_panel .components-leed-empty p { margin: 0 0 0.4rem; }
      #components_panel .components-leed-summary {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #cdd2dd;
        margin: 0.25rem 0 0.5rem;
        line-height: 1.4;
      }
      #components_panel .components-leed-needs {
        margin: 0 0 0.6rem;
        padding-left: 1.1rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #a8b0bd;
        line-height: 1.45;
      }
      #components_panel .components-leed-actions { margin-top: 0.5rem; }
      #components_panel .components-view {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
      }
      #components_panel .components-view[hidden] { display: none; }
      /* Parts → Images bridge: a count badge on a drawing that has reference
         imagery in the Image Bank. Clicking it jumps to the Images tab. */
      #components_panel button.luxon-pill {
        margin-left: 6px;
        cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1.4;
        color: #cdbcf0;
        background: #2b2740;
        border: 1px solid #4b3f73;
        border-radius: 999px;
        padding: 0 6px;
        white-space: nowrap;
      }
      #components_panel button.luxon-pill:hover { background: #382f52; color: #e7ddff; }
      #components_panel .components-doc-link {
        color: #9ecbff;
        text-decoration: underline;
        text-decoration-style: dotted;
        cursor: pointer;
        border-radius: 3px;
      }
      #components_panel .components-doc-link:hover { color: #cfe4ff; }
      #components_panel .components-doc-link:focus-visible {
        outline: 2px solid #4a7ab5;
        outline-offset: 1px;
      }
      /* Reuse galaxy panel (reuse_catalogue.csv). Same right-side drawer pattern. */
      #reuse_galaxy_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(720px, 70vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 9;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.45rem;
        overflow: hidden;
      }
      #reuse_galaxy_panel.visible { display: flex; }
      .components-header h4 { margin: 0; font-size: var(--lux-fs-md, 1rem); color: #fff; }
      .components-subtitle {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        line-height: 1.4;
      }
      .components-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.25rem 0.45rem;
        border-radius: 3px;
        background: #2a2d35;
        color: #9aa0a6;
      }
      .components-leed-filter-host {
        margin: 0.45rem 0 0.55rem;
      }
      .components-leed-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem 0.75rem;
        padding: 0.45rem 0.55rem;
        border: 1px solid #333;
        border-radius: 4px;
        background: #1a1d24;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c8ccd4;
      }
      .components-leed-filter-label {
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9bd3ff;
      }
      .components-leed-filter-select {
        font: inherit;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        color: #e6e7ea;
        background: #12151b;
        border: 1px solid #445;
        border-radius: 4px;
        padding: 0.3rem 0.5rem;
        min-height: 28px;
      }
      .components-leed-filter-note {
        flex: 1 1 12rem;
        color: #9aa1ad;
        line-height: 1.4;
      }
      .components-leed-filter-pathways {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
      }
      .components-funnel {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
      }
      #components_panel .components-funnel .luxon-pill {
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.25rem 0.55rem;
        border-radius: 999px;
        border: 1px solid #444;
        background: #1f232b;
        color: #e6e7ea;
        cursor: pointer;
        font-family: inherit;
      }
      #components_panel .components-funnel .luxon-pill.is-active-filter {
        border-color: #8ab4f8;
        box-shadow: inset 0 -2px 0 #8ab4f8;
      }
      .components-funnel-total {
        background: #333;
        color: #f5f5f5;
        cursor: default;
      }
      .components-funnel-stale {
        background: #4b2f1f;
        border-color: #b58657;
        color: #f6c177;
        cursor: default;
      }
      .components-stage-boq-only       { background: #2a2d35; color: #c1c5cc; }
      .components-stage-quantified     { background: #1f3a4a; color: #9bd3ff; }
      .components-stage-costed         { background: #2e3f1f; color: #c6e09b; }
      .components-stage-coordinated    { background: #1f2e4a; color: #b8c8ff; }
      .components-stage-fabrication-ready {
        background: #1f4a2f;
        color: #9bf0b3;
      }
      .components-table-host {
        flex: 1;
        min-height: 0;
        overflow: auto;
        border: 1px solid #333;
        border-radius: 4px;
        background: #161920;
      }
      .components-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .components-table th,
      .components-table td {
        text-align: left;
        padding: 0.3rem 0.45rem;
        border-bottom: 1px solid #2a2d35;
        vertical-align: top;
      }
      .components-table th {
        font-weight: 600;
        color: #c1c5cc;
        background: #1f232b;
        position: sticky;
        top: 0;
      }
      .components-table tbody tr:hover {
        background: #1f232b;
        cursor: pointer;
      }
      .components-row-stale {
        background: rgba(75, 47, 31, 0.35);
      }
      .components-row-stale:hover {
        background: rgba(75, 47, 31, 0.6) !important;
      }
      #components_panel span.luxon-pill {
        display: inline-block;
        padding: 0.1rem 0.45rem;
        border-radius: 999px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        white-space: nowrap;
      }
      .components-doc-status {
        display: inline-block;
        padding: 0.1rem 0.4rem;
        border-radius: 3px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
      }
      .components-doc-status-superseded {
        background: #4b2f1f;
        color: #f6c177;
      }
      .components-doc-status-needs-review {
        background: #4b1f1f;
        color: #ff9b9b;
      }
      .components-empty {
        padding: 0.6rem 0.45rem;
        color: #9aa0a6;
        font-size: var(--lux-fs-xs, 0.8rem);
      }

      /* Luxos EA panel -- one drawer, four sections.  Same right-side
         drawer pattern as Components, slightly wider because the
         Proposals diff cards prefer breathing room. */
      #ea_panel,
      #step_decisions_panel,
      #vendor_links_panel,
      #vendor_catalog_panel,
      #vendor_self_register_panel,
      #factories_panel,
      #procurement_panel,
      #outputs_panel,
      #decision_space_panel,
      #loop_monitor_panel,
      #cpc_dashboard_panel,
      #live_board_panel,
      #manufacturing_panel,
      #withdraw_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(680px, 64vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h, var(--luxon-shell-strip-h, 40px)));
        z-index: 101;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        flex-direction: column;
        gap: 0.4rem;
        overflow: auto;
      }
      #ea_panel.visible,
      #step_decisions_panel.visible,
      #vendor_links_panel.visible,
      #vendor_catalog_panel.visible,
      #vendor_self_register_panel.visible,
      #factories_panel.visible,
      #procurement_panel.visible,
      #outputs_panel.visible,
      #decision_space_panel.visible,
      #loop_monitor_panel.visible,
      #cpc_dashboard_panel.visible,
      #live_board_panel.visible,
      #manufacturing_panel.visible,
      #withdraw_panel.visible { display: flex; }
      .fact-header h4 { margin: 0 0 0.35rem; font-size: var(--lux-fs-sm, 0.875rem); }
      .fact-body { display: flex; flex-direction: column; gap: 0.45rem; min-height: 0; }
      .fact-loading, .fact-empty, .fact-error { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.4; }
      .fact-error { color: #ff9a9a; }
      .fact-required { color: #f6c177; }
      .fact-doc-status { color: #8fd9a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .fact-upload-btn {
        background: #2c5fb8; color: #fff; border: 1px solid #2c5fb8;
        border-radius: 4px; padding: 0.25rem 0.55rem; font-size: var(--lux-fs-xs, 0.8rem); cursor: pointer;
      }
      .vlink-why { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.35; }
      .vlink-link {
        color: #9ecbff;
        cursor: pointer;
        text-decoration: underline;
        text-decoration-style: dotted;
        border-radius: 3px;
      }
      .vlink-link:hover { color: #cfe4ff; }
      .vlink-link:focus-visible { outline: 2px solid #4a7ab5; outline-offset: 1px; }
      /* Decision Space panel. */
      .ds-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.1rem 0 0.3rem; flex-shrink: 0; }
      #decision_space_panel .step-dec-header,
      #decision_space_panel .step-dec-subtitle,
      #decision_space_panel .step-dec-status {
        flex-shrink: 0;
      }
      /* Floor so the list does not collapse under the driver seat. */
      #decision_space_panel .step-dec-body {
        flex: 1 1 auto;
        min-height: 10rem;
        overflow: auto;
      }
      .ds-feedback { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .ds-kind {
        font-size: var(--lux-fs-xs, 0.8rem); color: #cfd2d9; background: #2a2d35; border: 1px solid #3a3f48;
        border-radius: 999px; padding: 0.05rem 0.4rem; text-transform: lowercase; flex: 0 0 auto;
      }
      /* Field UAT: per-item approve/reject basis under the collapsed head (not confidence). */
      .ds-basis-line {
        display: block; width: 100%; margin: 0.05rem 0 0.2rem 0.15rem;
        color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.35;
        white-space: normal; overflow-wrap: anywhere;
      }
      .ds-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
      .ds-facts { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.35rem; font-size: var(--lux-fs-xs, 0.8rem); }
      /* Vendor Catalog panel. */
      .vcat-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0.5rem; }
      .luxon-pill[data-vcat] {
        font-size: var(--lux-fs-xs, 0.8rem); color: #cfd2d9; background: #2a2d35;
        border: 1px solid #3a3f48; border-radius: 999px; padding: 0.08rem 0.45rem;
      }
      .vcat-vendor { border-bottom: 1px solid #2a2d35; padding: 0.3rem 0; }
      .vcat-vendor-head {
        display: flex; align-items: center; gap: 0.5rem; width: 100%;
        background: transparent; border: none; cursor: pointer; text-align: left;
        color: #e6e8ec; padding: 0.25rem 0.1rem; font-size: var(--lux-fs-xs, 0.8rem);
      }
      .vcat-vendor-head:hover { background: rgba(255,255,255,0.03); }
      .vcat-vendor-name { font-weight: 600; }
      .vcat-vendor-id { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .vcat-vendor-count { margin-left: auto; color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .vcat-vendor-actions { padding: 0 0.1rem 0.3rem; }
      .vcat-vendor-detail { padding: 0.2rem 0.1rem 0.5rem; }
      .vcat-products { margin-top: 0.3rem; }
      .vcat-specs { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); margin-top: 0.12rem; }
      .vcat-linked { white-space: normal; }
      .vcat-unlinked { color: #7c828a; font-size: var(--lux-fs-xs, 0.8rem); font-style: italic; }
      .vcat-linked .luxon-pill {
        display: inline-flex; align-items: center; gap: 0.15rem; margin: 0.1rem 0.2rem 0.1rem 0;
        background: #1f2937; border: 1px solid #3a4757; border-radius: 4px; padding: 0 0.15rem;
      }
      .vcat-part-link {
        background: transparent; border: none; color: #9bd3ff; cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem); font-family: ui-monospace, monospace; padding: 0.1rem 0.2rem;
      }
      .vcat-unlink-btn {
        background: transparent; border: none; color: #ff9b9b; cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem); line-height: 1; padding: 0 0.15rem;
        min-width: var(--lux-min-tap, 24px); min-height: var(--lux-min-tap, 24px);
        display: inline-flex; align-items: center; justify-content: center;
      }
      .vcat-unlink-btn:focus-visible { outline: 2px solid #4a90e2; outline-offset: 1px; }
      .vcat-unlink-btn:active { filter: brightness(0.9); }
      .vcat-options-cell { background: rgba(155,211,255,0.05); }
      .vcat-option-row {
        display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
        font-size: var(--lux-fs-xs, 0.8rem); color: #cfd2d9; padding: 0.15rem 0;
      }
      .vcat-media-thumb {
        width: 36px; height: 36px; object-fit: cover; border-radius: 4px;
        border: 1px solid #2c333d; display: block; flex: 0 0 auto; cursor: pointer;
      }
      .vcat-peg-empty {
        width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
        color: #6b7280; font-size: var(--lux-fs-xs, 0.8rem); flex: 0 0 auto;
      }
      .vcat-option-price { color: #b7f0d2; font-weight: 600; }
      .vcat-option-vendor { color: #e6e8ec; }
      .vcat-option-uom, .vcat-options-empty, .vcat-options-unproven, .vcat-options-loading { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .vcat-form { margin: 0.3rem 0 0.5rem; border: 1px solid #2a2d35; border-radius: 6px; padding: 0.3rem 0.45rem; }
      .vcat-form > summary { cursor: pointer; font-size: var(--lux-fs-xs, 0.8rem); color: #9bd3ff; font-weight: 600; }
      .vcat-form-hint { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.35; margin: 0.3rem 0; }
      .vcat-input, .vcat-textarea {
        display: block; width: 100%; box-sizing: border-box; margin: 0.25rem 0;
        background: #15171c; color: #e6e8ec; border: 1px solid #2a2d35; border-radius: 4px;
        padding: 0.32rem 0.4rem; font-size: var(--lux-fs-xs, 0.8rem); font-family: inherit;
      }
      .vcat-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
      /* Accreditation + product image pegs (vendor_accreditation_ui.js). */
      .luxon-pill[data-vacc] {
        font-size: var(--lux-fs-xs, 0.8rem); font-weight: 600; border-radius: 999px;
        padding: 0.06rem 0.45rem; margin-left: 0.35rem; white-space: nowrap;
        border: 1px solid #3a3f48; color: #cfd2d9; background: #2a2d35;
      }
      .luxon-pill[data-vacc][data-kind="ok"] { color: #b7f0d2; border-color: #2f6b4a; background: rgba(63,168,113,0.16); }
      .luxon-pill[data-vacc][data-kind="warn"] { color: #f4d49b; border-color: #7a5e26; background: rgba(214,160,46,0.16); }
      .luxon-pill[data-vacc][data-kind="bad"] { color: #ffb3b3; border-color: #7a3030; background: rgba(214,70,70,0.16); }
      .luxon-pill[data-vcat][data-kind="ok"] { color: #b7f0d2; border-color: #2f6b4a; }
      .luxon-pill[data-vcat][data-kind="bad"], .luxon-pill[data-vcat][data-kind="expired"] { color: #ffb3b3; border-color: #7a3030; }
      .luxon-pill[data-vcat][data-kind="expiring_soon"] { color: #f4d49b; border-color: #7a5e26; }
      .vcat-media-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
      .vcat-media-add { display: inline-flex; align-items: center; }
      /* Part-file bridge: STEP/CAD model peg on a product (§7.7). */
      .vcat-step-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin-top: 0.15rem; }
      .vcat-step-fig { display: inline-flex; align-items: center; gap: 0.2rem; }
      .vcat-step-link { text-decoration: none; }
      .vcat-step-link:hover, .vcat-step-link:focus-visible { filter: brightness(1.15); }
      .vcat-step-envelope { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .vcat-accreditation {
        margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid #2a2d35;
      }
      .vcat-acc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: var(--lux-fs-xs, 0.8rem); color: #e6e8ec; }
      .vcat-acc-docs { margin: 0.3rem 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
      .vcat-acc-doc { display: inline-flex; align-items: center; gap: 0.2rem; }
      .vcat-acc-docadd { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.3rem; }
      .vcat-linkbtn, .vcat-acc-doclink {
        background: transparent; border: none; color: #9bd3ff; cursor: pointer;
        font-size: var(--lux-fs-xs, 0.8rem); padding: 0.1rem 0.2rem; text-decoration: none;
      }
      .vcat-linkbtn:focus-visible, .vcat-acc-doclink:focus-visible { outline: 2px solid #4a90e2; outline-offset: 1px; }
      /* Commercial standard (FIDIC) card — commercial_standard_ui.js. */
      .ea-commercial-card { margin-top: 0.5rem; }
      .vcat-acc-subhead { font-size: var(--lux-fs-xs, 0.8rem); font-weight: 600; color: #9bd3ff; margin: 0.4rem 0 0.25rem; }
      .vcat-param-grid {
        display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem;
        font-size: var(--lux-fs-xs, 0.8rem); color: #e6e8ec; margin: 0.25rem 0;
      }
      .vcat-param-k { color: #9aa0a6; }
      .vcat-param-v { color: #e6e8ec; }
      .vcat-priority { margin: 0.2rem 0 0.3rem 1.1rem; padding: 0; font-size: var(--lux-fs-xs, 0.8rem); color: #cfd2d9; }
      .vcat-priority li { margin: 0.05rem 0; }
      .vcat-table { width: 100%; border-collapse: collapse; font-size: var(--lux-fs-xs, 0.8rem); margin: 0.3rem 0; }
      .vcat-table th, .vcat-table td {
        text-align: left; padding: 0.2rem 0.3rem; border-bottom: 1px solid #23262d;
        color: #cfd2d9; vertical-align: top;
      }
      .vcat-table th { color: #9aa0a6; font-weight: 600; }
      .vcat-unlinked { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      /* Purchase Orders panel. */
      .po-form { margin: 0.3rem 0 0.5rem; border: 1px solid #2a2d35; border-radius: 6px; padding: 0.3rem 0.45rem; }
      .po-form > summary { cursor: pointer; font-size: var(--lux-fs-xs, 0.8rem); color: #9bd3ff; font-weight: 600; }
      .po-form-row { display: flex; gap: 0.3rem; margin: 0.25rem 0; align-items: center; flex-wrap: wrap; }
      .po-input {
        display: block; width: 100%; box-sizing: border-box; margin: 0.25rem 0;
        background: #15171c; color: #e6e8ec; border: 1px solid #2a2d35; border-radius: 4px;
        padding: 0.32rem 0.4rem; font-size: var(--lux-fs-xs, 0.8rem); font-family: inherit;
      }
      .po-form-row .po-input { margin: 0; flex: 1 1 auto; }
      .po-input-sm { flex: 0 0 28%; }
      .po-pending { margin-top: 0.3rem; }
      .po-pending-row { display: flex; align-items: center; gap: 0.4rem; font-size: var(--lux-fs-xs, 0.8rem); color: #cfd2d9; padding: 0.1rem 0; }
      .po-order { border-bottom: 1px solid #2a2d35; padding: 0.3rem 0; }
      .po-order-head {
        display: flex; align-items: center; gap: 0.45rem; width: 100%;
        background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0.2rem 0.1rem;
      }
      .po-order-head:hover { background: rgba(255,255,255,0.03); }
      .po-order-id { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .po-order-vendor { font-weight: 600; }
      .po-order-total { margin-left: auto; color: #b7f0d2; font-weight: 600; font-size: var(--lux-fs-xs, 0.8rem); }
      .po-order-count { color: #9aa0a6; font-size: var(--lux-fs-xs, 0.8rem); }
      .po-order-detail { padding: 0.25rem 0.1rem 0.4rem; }
      .po-lines { margin-bottom: 0.4rem; }
      .po-warn { color: #f6c453; font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.4; margin: 0.3rem 0; }
      .po-note { color: #cfd2d9; font-size: var(--lux-fs-xs, 0.8rem); margin: 0.2rem 0; }
      .po-actions { margin-top: 0.4rem; }
      /* Odoo ERP hop on a confirmed PO (push status + vendor bills). */
      .po-odoo { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
      .po-odoo-head { font-size: var(--lux-fs-xs, 0.8rem); font-weight: 600; color: #cfd2d9; margin-bottom: 0.15rem; }
      .po-odoo-bill { font-size: var(--lux-fs-xs, 0.8rem); color: #b7f0d2; margin: 0.15rem 0; }
      /* STEP Decisions panel (AE-D3). */
      .step-dec-header h4 { margin: 0; font-size: var(--lux-fs-md, 1rem); color: #fff; }
      .step-dec-subtitle { font-size: var(--lux-fs-xs, 0.8rem); color: #9aa0a6; line-height: 1.4; }
      .step-dec-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #cfd2d9;
        min-height: 1rem;
      }
      .step-dec-status[data-kind="ok"] { color: #7bd47b; }
      .step-dec-status[data-kind="error"] { color: #ff6e6e; }
      .step-dec-empty {
        padding: 1.2rem 0.4rem;
        color: #9aa0a6;
        font-style: italic;
        text-align: center;
      }
      .step-dec-summary {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #cfd2d9;
        margin-bottom: 0.4rem;
      }
      .step-dec-rbac-hint {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #d4b06e;
        margin-bottom: 0.5rem;
      }
      .step-dec-table { width: 100%; border-collapse: collapse; font-size: var(--lux-fs-xs, 0.8rem); }
      .step-dec-table th,
      .step-dec-table td {
        border-bottom: 1px solid #2a2d35;
        padding: 0.35rem 0.45rem;
        text-align: left;
        vertical-align: top;
      }
      .luxon-pill[data-step-dec] {
        display: inline-block;
        padding: 0.1rem 0.4rem;
        border-radius: 999px;
        background: #2a2d35;
        color: #cfd2d9;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .luxon-pill[data-step-dec-tone="proposed"] { background: #3a3a18; color: #f0e08c; }
      .luxon-pill[data-step-dec-tone="decided"] { background: #1f4a1f; color: #b6f0b6; }
      .step-dec-decided-by { font-size: var(--lux-fs-xs, 0.8rem); color: #9aa0a6; margin-top: 0.1rem; }
      .step-dec-actions { white-space: nowrap; }
      .step-dec-btn {
        background: var(--lux-surface-raised, #2a2d35);
        color: var(--lux-text-2, #cfd2d9);
        border: 1px solid var(--lux-border, #555);
        border-radius: var(--lux-r-ctl, 3px);
        padding: 0.2rem 0.5rem;
        font-size: var(--lux-fs-sm, 0.875rem);
        cursor: pointer;
        margin-right: 0.25rem;
        min-height: var(--lux-min-tap, 24px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .step-dec-btn:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2);
        outline-offset: 2px;
      }
      .step-dec-btn:active:not(:disabled) { filter: brightness(0.9); }
      .step-dec-btn:disabled { opacity: var(--lux-disabled-opacity, 0.5); cursor: not-allowed; }
      .step-dec-btn-confirm { background: #1f4a1f; color: #d8f0d8; }
      .step-dec-btn-waive { background: #4a2d18; color: #f0d4b6; }
      /* BP-2: was referenced (Create vendor / Ingest / approve) but never styled,
         so affirmative actions rendered as a neutral button. Now an accent. */
      .step-dec-btn-approve { background: #1f3a5a; color: #cfe6ff; border-color: #2e4a6b; }
      .step-dec-locked { color: #7bd47b; font-weight: 700; }
      .ea-header h4 { margin: 0; font-size: var(--lux-fs-md, 1rem); color: #fff; }
      .ea-subtitle {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        line-height: 1.4;
      }
      .ea-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        border-bottom: 1px solid #2a2d35;
        padding-bottom: 0.3rem;
      }
      .ea-tab {
        background: #2a2d35;
        color: #cfd2d9;
        border: 1px solid #444;
        border-radius: 4px;
        padding: 0.22rem 0.6rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
        min-height: var(--lux-min-tap, 24px);
        display: inline-flex;
        align-items: center;
      }
      .ea-tab:focus-visible {
        outline: 2px solid #4a90e2;
        outline-offset: 2px;
      }
      .ea-tab:active { filter: brightness(0.92); }
      .ea-tab.is-active {
        background: #1f4f8a;
        border-color: #4a90e2;
        color: #fff;
      }
      .ea-body {
        flex: 1 1 auto;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }
      .ea-section { display: flex; flex-direction: column; gap: 0.45rem; }
      .ea-hidden { display: none !important; }
      .ea-section-summary {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #b9c1cc;
        background: #20232b;
        padding: 0.3rem 0.45rem;
        border-radius: 3px;
      }
      .ea-empty {
        padding: 0.7rem 0.55rem;
        background: #1a1d23;
        border: 1px dashed #3a3d44;
        border-radius: 4px;
        color: #9aa0a6;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .ea-empty-reason {
        margin-top: 0.25rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #6f7480;
        font-family: ui-monospace, monospace;
      }
      .ea-subtabs {
        display: flex;
        gap: 0.25rem;
      }
      .ea-subtab {
        background: #1f232b;
        color: #cfd2d9;
        border: 1px solid #2c2f36;
        border-radius: 3px;
        padding: 0.18rem 0.5rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
      }
      .ea-subtab.is-active {
        background: #2c5fb8;
        color: #fff;
        border-color: #3771d6;
      }
      .ea-table,
      .ea-layers-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .ea-table th,
      .ea-table td,
      .ea-layers-table th,
      .ea-layers-table td {
        border-bottom: 1px solid #2c2f36;
        padding: 3px 6px;
        text-align: left;
        vertical-align: top;
        word-break: break-word;
      }
      .ea-table th,
      .ea-layers-table th {
        background: #1f232b;
        color: #cfd2d9;
        font-weight: 600;
        position: sticky;
        top: 0;
      }
      .ea-layers-cid {
        font-family: ui-monospace, monospace;
        color: #d2d6dc;
        white-space: nowrap;
      }
      #ea_panel .ea-layers-table .luxon-pill {
        display: inline-block;
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        text-transform: lowercase;
      }
      .ea-layer-committed    { background: #1f4a2f; color: #9bf0b3; }
      .ea-layer-planned      { background: #1f2e4a; color: #b8c8ff; }
      .ea-layer-pending      { background: #3f3a1f; color: #f6c177; }
      .ea-layer-not_applicable,
      .ea-layer-na           { background: #2a2d35; color: #9aa0a6; }
      .ea-tree {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
      }
      .ea-tree-group {
        background: #161920;
        border: 1px solid #2a2d35;
        border-radius: 4px;
        padding: 0.35rem 0.45rem;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
      }
      .ea-tree-group-label {
        font-weight: 600;
        color: #cfd2d9;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .ea-tree-scene {
        text-align: left;
        background: #1f232b;
        color: #d2d6dc;
        border: 1px solid #2c2f36;
        border-radius: 3px;
        padding: 0.2rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
      }
      .ea-tree-scene:hover {
        background: #2a2d35;
        border-color: #3a3d44;
      }
      .ea-scene-type {
        display: inline-block;
        padding: 0 0.35rem;
        border-radius: 2px;
        font-size: var(--lux-fs-xs, 0.8rem);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        margin-right: 0.35rem;
      }
      .ea-scene-type-interior  { background: #1f3a4a; color: #9bd3ff; }
      .ea-scene-type-exterior  { background: #4a2f1f; color: #f6c177; }
      .ea-scene-type-mep       { background: #2e3f1f; color: #c6e09b; }
      .ea-scene-type-unknown   { background: #2a2d35; color: #9aa0a6; }
      .ea-proposals-list {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }
      .ea-proposal {
        background: #161920;
        border: 1px solid #2a2d35;
        border-radius: 4px;
        padding: 0.4rem 0.55rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .ea-proposal-accepted { border-left: 3px solid #4f9a6b; }
      .ea-proposal-rejected { border-left: 3px solid #b58657; }
      .ea-proposal-header {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      /* EA proposal status (P6 hop 47). */
      .luxon-pill[data-ea-status] {
        padding: 0.05rem 0.45rem;
        border-radius: 3px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .luxon-pill[data-ea-status-tone="accepted"],
      .luxon-pill[data-ea-status-tone="accept"] { background: #1f4a2f; color: #9bf0b3; }
      .luxon-pill[data-ea-status-tone="rejected"],
      .luxon-pill[data-ea-status-tone="reject"] { background: #4a2f1f; color: #f6c177; }
      .ea-proposal-target {
        font-family: ui-monospace, monospace;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9bd3ff;
      }
      .ea-proposal-row-key {
        font-family: ui-monospace, monospace;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #b9c1cc;
        word-break: break-all;
      }
      .ea-proposal-diff {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #cfd2d9;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-wrap: wrap;
      }
      .ea-diff-old {
        background: #3f1e1e;
        color: #ff9a9a;
        padding: 0.05rem 0.4rem;
        border-radius: 3px;
      }
      .ea-diff-new {
        background: #1e3f2a;
        color: #8fd9a6;
        padding: 0.05rem 0.4rem;
        border-radius: 3px;
      }
      .ea-proposal-reason {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #f6c177;
        font-family: ui-monospace, monospace;
      }
      .ea-proposal-evidence {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
        font-style: italic;
      }
      /* Proposal decision buttons — semantic colour so Accept / Reject /
         Defer / Hold read at a glance, matching the app-wide colour
         language (green = go, red = stop, amber = wait, blue = hold). */
      .ea-proposal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-top: 0.4rem;
      }
      .ea-proposal-btn {
        padding: 0.2rem 0.7rem;
        border-radius: 4px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        cursor: pointer;
        background: #2a2d35;
        color: #cfd2d9;
        border: 1px solid #3a3d44;
        transition: filter 0.15s, background 0.15s;
      }
      .ea-proposal-btn:hover:not(:disabled) { filter: brightness(1.18); }
      .ea-proposal-btn:disabled { opacity: 0.5; cursor: default; }
      .ea-proposal-btn-accept { background: #1f4a2f; color: #9bf0b3; border-color: #2a6a40; }
      .ea-proposal-btn-reject { background: #4a1f1f; color: #ff9a9a; border-color: #6e2e2e; }
      .ea-proposal-btn-defer  { background: #4a3a1f; color: #f6c177; border-color: #6a521f; }
      .ea-proposal-btn-hold   { background: #23303f; color: #9bd3ff; border-color: #2c4a72; }

      /* Operations tab (EA Slice C): data-plane run log. */
      .ea-ops-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-bottom: 0.4rem;
      }
      #ea_panel .ea-ops-badges .luxon-pill {
        display: inline-block;
        padding: 0.15rem 0.55rem;
        border-radius: 999px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        background: #2a2d35;
        color: #cfd2d9;
        border: 1px solid #3a3d44;
      }
      #ea_panel .ea-ops-badges .luxon-pill.ea-ops-ok {
        background: #1f4a2f;
        color: #9bf0b3;
        border-color: #2a6a40;
      }
      #ea_panel .ea-ops-badges .luxon-pill.ea-ops-warn {
        background: #4a3a1f;
        color: #f6c177;
        border-color: #6a521f;
      }
      /* SOS upstream / full-ladder readings (P6 hop 29). */
      .sos-upstream-strip .luxon-pill,
      .sos-full-ladder .luxon-pill {
        border: 1px solid #3a4250; border-radius: 999px; padding: 2px 9px;
        background: #1b1e25; color: #c9d1d9; font-size: var(--lux-fs-xs, 0.8rem); font-weight: 600;
        cursor: pointer;
      }
      .sos-upstream-strip .luxon-pill[data-status="pass"],
      .sos-full-ladder .luxon-pill[data-status="pass"] { border-color: #3d6b4f; color: #9ecb9e; }
      .sos-upstream-strip .luxon-pill[data-status="warning"],
      .sos-full-ladder .luxon-pill[data-status="warning"] { border-color: #8a6a2a; color: #f0c674; }
      .sos-upstream-strip .luxon-pill[data-status="fail"],
      .sos-full-ladder .luxon-pill[data-status="fail"] { border-color: #8a3a3a; color: #f08888; }
      .sos-upstream-strip .luxon-pill[data-status="na"],
      .sos-full-ladder .luxon-pill[data-status="na"],
      .sos-upstream-strip .luxon-pill[data-status="unknown"],
      .sos-full-ladder .luxon-pill[data-status="unknown"] {
        opacity: 0.65; border-style: dotted; color: #8a9099;
      }
      .sos-upstream-strip .luxon-pill[data-current="1"],
      .sos-full-ladder .luxon-pill[data-current="1"] {
        box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent);
        opacity: 1;
      }
      .sos-upstream-strip .luxon-pill:hover,
      .sos-full-ladder .luxon-pill:hover { filter: brightness(1.12); }
      .sos-full-ladder .luxon-pill[data-mid="1"] { opacity: 0.78; }
      /* Notification filter readings (P6 hop 31). */
      .notif-filters .luxon-pill {
        background: #2a2e36; border: 1px solid #555; border-radius: 999px;
        padding: 0.12rem 0.55rem; font-size: var(--lux-fs-xs, 0.8rem); cursor: pointer;
        user-select: none; min-height: 1.5rem;
      }
      .notif-filters .luxon-pill:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2); outline-offset: 2px;
      }
      .notif-filters .luxon-pill.is-on {
        background: var(--lux-move-strong, #1f4f8a);
        border-color: var(--lux-move, #4a90e2); color: var(--lux-move-on, #fff);
      }
      .notif-filters .luxon-pill[data-level="error"].is-on {
        background: var(--lux-act-bg, #6b2a2a); border-color: var(--lux-act-border, #c55);
      }
      .notif-filters .luxon-pill[data-level="warning"].is-on {
        background: var(--lux-check-bg, #5a4a1a); border-color: var(--lux-check, #c9a227);
      }
      /* Notification row level readings (P6 hop 32). */
      .notif-row .luxon-pill {
        flex: 0 0 auto; font-size: var(--lux-fs-xs, 0.8rem); text-transform: uppercase;
        letter-spacing: 0.03em; border-radius: 3px; padding: 0.08rem 0.35rem;
        font-weight: 600;
      }
      .notif-row .luxon-pill[data-notif-level="error"] {
        background: var(--lux-act-bg, #5c2323); color: var(--lux-act-fg, #ffb4b4);
      }
      .notif-row .luxon-pill[data-notif-level="warning"] {
        background: var(--lux-check-bg, #4a3f14); color: var(--lux-check-fg, #ffe08a);
      }
      .notif-row .luxon-pill[data-notif-level="info"] {
        background: var(--lux-move-bg, #1f3a5c); color: var(--lux-move-fg, #9bd3ff);
      }
      /* Scene box readings (P6 hop 33). */
      .scene-box-root .luxon-pill {
        display: inline-flex; align-items: center; max-width: 100%;
        padding: 0.08rem 0.4rem; border-radius: var(--lux-r-pill, 999px);
        border: 1px solid #3a3f48; background: #1f232a; color: #c5c8cc;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: var(--lux-fs-xs, 0.8rem); font-weight: 600;
        line-height: 1; letter-spacing: 0.02em;
      }
      .scene-box-root .luxon-pill[data-scene-hint] {
        border-color: #3a4a5a; color: #9bd3ff; background: #1a2430;
        max-width: 100%; white-space: normal; line-height: 1.25; font-weight: 500;
      }
      .scene-box-root .luxon-pill.scene-box-cov-ok {
        background: var(--lux-go-bg, #1f4a2f);
        border-color: var(--lux-go-border, #2f5a3a);
        color: var(--lux-go-fg, #9bf0b3);
      }
      .scene-box-root .luxon-pill.scene-box-cov-warn {
        background: var(--lux-check-bg, #4a3a1f);
        border-color: var(--lux-check-border, #5a4524);
        color: var(--lux-check-fg, #f6c177);
      }
      .scene-box-root .luxon-pill.scene-box-cov-fail {
        background: var(--lux-act-bg, #4a1f1f);
        border-color: var(--lux-act-border, #5a2f2f);
        color: var(--lux-act-fg, #ff9a9a);
      }
      /* Project switcher status (P6 hop 34). Containers renamed hop 66. */
      .project-switcher-status-row,
      .project-status-row {
        display: flex;
        gap: 4px;
      }
      .project-switcher-status-row .luxon-pill,
      .project-status-row .luxon-pill {
        display: inline-flex; align-items: center; justify-content: center;
        width: 20px; height: 20px; border-radius: 50%;
        font-size: var(--lux-fs-xs, 0.8rem); margin-left: 4px; cursor: help;
        transition: transform 0.2s;
      }
      .project-switcher-status-row .luxon-pill:hover,
      .project-status-row .luxon-pill:hover {
        transform: scale(1.2);
      }
      .luxon-pill.status-learning {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
      }
      .luxon-pill[data-velocity] {
        display: inline-block; padding: 2px 8px; border-radius: 4px;
        font-size: var(--lux-fs-xs, 0.8rem); font-weight: 600; color: white; margin-left: 8px;
        width: auto; height: auto;
      }
      /* Product-feedback refs (P6 hop 35). */
      .llm-box .luxon-pill {
        display: inline-flex; align-items: center; gap: 0.2rem;
        max-width: min(100%, 13rem); min-width: 0;
        padding: 0.14rem 0.42rem; border-radius: 999px;
        background: #1f3a5c; border: 1px solid #4a90e2; color: #cfe6ff;
        font-size: var(--lux-fs-xs, 0.8rem); line-height: 1.25; overflow: hidden;
        font-family: ui-monospace, monospace;
      }
      .llm-box .luxon-pill[data-llm-params] {
        cursor: pointer; font-family: inherit;
        background: #243528; border-color: #3f7a45; color: #c8f0cc;
        max-width: 100%; text-overflow: ellipsis; white-space: nowrap;
      }
      .llm-box .luxon-pill[data-llm-params]:hover {
        background: #2d422f; border-color: #4f9a55;
      }
      .llm-box .luxon-pill[data-llm-params]:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2); outline-offset: 2px;
      }
      /* DFMA readiness (P6 hop 36). */
      .dfma-badges .luxon-pill {
        display: inline-flex; align-items: center; gap: 0.28rem;
        padding: 0.2rem 0.5rem; border-radius: var(--lux-r-pill, 999px);
        border: 1px solid var(--lux-idle-border, #3a3f48);
        background: var(--lux-idle-bg, #1f232a);
        color: var(--lux-idle-fg, #c5c8cc);
        white-space: nowrap; font-weight: 600; letter-spacing: 0.02em;
        transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
      }
      .dfma-badges .luxon-pill .dfma-read-label {
        color: #8a8f9a; font-weight: 500;
      }
      .dfma-badges .luxon-pill[data-dfma-tone="pass"] {
        background: var(--lux-go-bg, #1f4f3a);
        border-color: var(--lux-go-border, #2f7a5a);
        color: var(--lux-go-fg, #b7f0d2);
      }
      .dfma-badges .luxon-pill[data-dfma-tone="warning"],
      .dfma-badges .luxon-pill[data-dfma-tone="hold"] {
        background: #4a3f14; border-color: #c9a227;
        color: var(--lux-check-fg, #ffe08a);
      }
      .dfma-badges .luxon-pill[data-dfma-tone="fail"] {
        background: var(--lux-act-bg, #5c2323);
        border-color: var(--lux-act-border, #c55);
        color: var(--lux-act-fg, #ffb4b4);
      }
      .dfma-badges .luxon-pill[data-dfma-tone="unknown"],
      .dfma-badges .luxon-pill[data-dfma-tone="queued"] {
        background: #2a2e36; border-color: #555;
        color: var(--lux-text-muted, #9aa0a6);
      }
      .dfma-badges .luxon-pill[data-dfma-tone="human"] {
        background: var(--lux-human-bg, #3a2a4a);
        border-color: var(--lux-human-border, #8a6acb);
        color: var(--lux-human-fg, #d6c1ff);
      }
      .dfma-badges .luxon-pill[data-dfma-tone="tier1"] {
        background: #2a2e36; border-color: #6a6f78; color: #aab0ba;
      }
      .dfma-badges .luxon-pill[data-dfma-tone="tier2"] {
        background: #1c3a55; border-color: #4a90e2; color: #cfe6ff;
      }
      .dfma-badges .luxon-pill[data-dfma-tone="stale"] {
        background: #3a2a14; border-color: #c97a27; color: #ffc890;
      }
      .dfma-badges .luxon-pill[role="button"] {
        cursor: pointer; min-height: 1.35rem;
      }
      .dfma-badges .luxon-pill[role="button"]:hover {
        filter: brightness(1.2); transform: translateY(-0.5px);
      }
      .dfma-badges .luxon-pill[role="button"]:active {
        filter: brightness(1.08); transform: translateY(0);
      }
      .dfma-badges .luxon-pill[role="button"]:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2); outline-offset: 2px;
      }
      /* SOS metrics (P6 hop 37). */
      .sos-metrics-strip .luxon-pill {
        border: 1px solid #3a4250; border-radius: 4px; padding: 2px 7px;
        background: #1b1e25; color: #c9d1d9;
      }
      .sos-metrics-strip .luxon-pill[data-status="pass"] {
        border-color: #3d6b4f; color: #9ecb9e; opacity: 0.75;
      }
      .sos-metrics-strip .luxon-pill[data-status="warning"] {
        border-color: #8a6a2a; color: #f0c674;
      }
      .sos-metrics-strip .luxon-pill[data-status="fail"] {
        border-color: #8a3a3a; color: #f08888;
      }
      .sos-metrics-strip .luxon-pill[data-status="na"],
      .sos-metrics-strip .luxon-pill[data-status="unknown"] {
        opacity: 0.55; color: #8a9099; border-style: dotted;
      }
      .sos-metrics-strip .luxon-pill[data-current="1"] {
        box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent);
        font-weight: 700; cursor: pointer; opacity: 1;
      }
      .sos-metrics-strip .luxon-pill[data-sos-climb="1"] {
        font-weight: 700; flex: 0 1 auto; max-width: 100%;
        white-space: normal; line-height: 1.35;
      }
      .sos-metrics-strip .luxon-pill[data-clickable="1"] { cursor: pointer; }
      .sos-metrics-strip .luxon-pill[data-clickable="1"]:hover { filter: brightness(1.12); }
      /* Ingest status (P6 hop 41). */
      .luxon-pill[data-ingest] {
        display: inline-block;
        padding: 0.12rem 0.45rem;
        border-radius: 999px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        text-transform: lowercase;
        letter-spacing: 0.02em;
        border: 1px solid transparent;
        white-space: nowrap;
      }
      .luxon-pill[data-ingest-tone="staged"] { background: #2b2740; color: #cdbcf0; border-color: #4b3f73; }
      .luxon-pill[data-ingest-tone="received"] { background: var(--lux-move-bg, #2a3544); color: var(--lux-move-fg, #9bd3ff); border-color: var(--lux-move-border, #3d5a78); }
      .luxon-pill[data-ingest-tone="parsed"] { background: var(--lux-check-bg, #3a3520); color: var(--lux-check-fg, #ffe08a); border-color: var(--lux-check-border, #7a6520); }
      .luxon-pill[data-ingest-tone="published"] { background: var(--lux-go-bg, #1f4f3a); color: var(--lux-go-fg, #b7f0d2); border-color: var(--lux-go-border, #2f7a5a); }
      .luxon-pill[data-ingest-tone="failed"] { background: var(--lux-act-bg, #5c2323); color: var(--lux-act-fg, #ffb4b4); border-color: var(--lux-act-border, #c55); }
      /* Vendor Opportunities vacant (P6 hop 51). */
      .luxon-vacant {
        text-align: center;
        padding: 20px;
        color: #5f6670;
      }
      .luxon-vacant__next {
        font-size: var(--lux-fs-xs, 0.8rem);
        margin-top: 8px;
        color: #a8adb3;
      }
      /* Fault chrome (P6 hop 73). */
      .luxon-fault {
        text-align: center;
        padding: 20px;
        color: #c55;
      }
      .luxon-fault__next {
        font-size: var(--lux-fs-xs, 0.8rem);
        margin-top: 8px;
        color: #e0e6f0;
      }
      .luxon-fault { outline-color: #3e5269; }
      /* Hop 74 lock — STEP Decisions vacant / fault. */
      .luxon-vacant { outline-color: #3f536a; }
      .luxon-vacant__next { outline-color: #e1e7f1; }
      /* Hop 75 lock — Vendor Links vacant / fault. */
      .luxon-fault { outline-color: #40546b; }
      .luxon-fault__next { outline-color: #e2e8f2; }
      /* Hop 76 lock — Purchase Orders vacant / fault. */
      .luxon-vacant { outline-color: #41556c; }
      .luxon-vacant__next { outline-color: #e3e9f3; }
      /* Hop 77 lock — Decision Space class / grain vacant. */
      .luxon-fault { outline-color: #42566d; }
      .luxon-fault__next { outline-color: #e4eaf4; }
      /* Hop 78 lock — Decision Space panel vacant / fault. */
      .luxon-vacant { outline-color: #43576e; }
      .luxon-vacant__next { outline-color: #e5ebf5; }
      /* Hop 79 lock — vendor self-register fault / receipt. */
      .vendor-self-reg-receipt { text-align: center; padding: 20px; outline-color: #44586f; }
      .luxon-fault { outline-color: #e6ecf6; }
      /* Hop 80 lock — factory finder fault. */
      .luxon-vacant { outline-color: #455970; }
      .luxon-vacant__next { outline-color: #e7edf7; }
      /* Hop 81 lock — Fernane SharePoint vacant / fault. */
      .luxon-fault { outline-color: #465a71; }
      .luxon-fault__next { outline-color: #e8eef8; }
      /* Hop 82 lock — Vendor Catalog vacant / fault. */
      .luxon-vacant { outline-color: #475b72; }
      .luxon-vacant__next { outline-color: #e9eff9; }
      /* Hop 83 lock — Vendor Catalog deactivate uses paintAsk. */
      .luxon-fault { outline-color: #485c73; }
      .luxon-fault__next { outline-color: #eaf0fa; }
      /* Hop 84 lock — vendor Opportunities vacant uses paintVacant. */
      .luxon-vacant { outline-color: #495d74; }
      .luxon-vacant__next { outline-color: #ebf1fb; }
      /* Hop 85 lock — All-Ingest Re-publish uses paintAsk. */
      .luxon-fault { outline-color: #4a5e75; }
      .luxon-fault__next { outline-color: #ecf2fc; }
      /* Hop 86 lock — BOQ strip uses luxon-pill. */
      .luxon-pill { outline-color: #4b5f76; }
      .luxon-pill[data-boq] { outline-color: #edf3fd; }
      /* Vendor proficiency mark (P6 hop 69). */
      .vendor-status-mark {
        padding: 2px 8px;
        border-radius: 999px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        background: var(--lux-hold-bg, #f0d9a8);
        color: var(--lux-move-fg, #9bd3ff);
      }
      .vendor-status-mark[data-level="intermediate"],
      .vendor-status-mark[data-level="advanced"],
      .vendor-status-mark[data-level="expert"] {
        background: var(--lux-check-bg, #3a3520);
      }
      /* Product-feedback ref chrome (P6 hop 59). */
      .llm-box-ref-row {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
      }
      .llm-box-ref-label {
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        color: #9aa0a6;
        letter-spacing: 0.02em;
      }
      .llm-box-refs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        min-height: 1.35rem;
        align-items: center;
        min-width: 0;
      }
      .llm-box-refs:empty::before {
        content: "None";
        font-size: var(--lux-fs-xs, 0.8rem);
        color: var(--lux-text-faint, #8a9099);
        font-style: italic;
      }
      .llm-box-dismiss {
        flex: 0 0 auto;
        background: transparent;
        border: none;
        color: #9bd3ff;
        cursor: pointer;
        padding: 0 0.12rem;
        min-width: 1.1rem;
        min-height: 1.1rem;
        font-size: var(--lux-fs-sm, 0.875rem);
        line-height: 1;
        border-radius: 3px;
      }
      .llm-box-dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
      .llm-box-dismiss:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2);
        outline-offset: 1px;
      }
      .llm-box-params-slot {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .llm-box-ref-line {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        align-items: center;
        min-width: 0;
      }
      .llm-box-ref-input {
        flex: 1 1 8rem;
        min-width: 0;
        background: #14171c;
        border: 1px solid #3a3f48;
        border-radius: 5px;
        color: #e8eaed;
        padding: 0.28rem 0.45rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-family: ui-monospace, monospace;
      }
      /* Versions Active / Newest marks (P6 hop 60). */
      #versions_panel .versions-active-mark {
        margin-left: 6px;
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0 5px;
        border: 1px solid var(--lux-go-border, #2f6b3a);
        color: var(--lux-go-fg, #9be6a8);
        border-radius: 999px;
      }
      #versions_panel .versions-newest-mark {
        margin-left: 6px;
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0 5px;
        border: 1px solid var(--lux-border, #3a3f48);
        opacity: 0.8;
        border-radius: 999px;
      }
      /* What's-next cue (P6 hop 61). */
      .luxon-shell-root[data-spine="1"] .spine-next-cue {
        font-size: var(--lux-fs-xs, 0.8rem);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        opacity: 0.85;
        border: 1px solid currentColor;
        border-radius: var(--lux-r-pill, 999px);
        padding: 0 6px;
        flex: 0 0 auto;
      }
      /* Shell notif cue (P6 hop 71). */
      .luxon-shell-notif-cue {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        flex: 0 0 auto;
        margin-top: 0.05rem;
      }
      /* Feed-gate mark (P6 hop 64). */
      .feed-gate-mark {
        display: inline-block;
        margin-left: 6px;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: var(--lux-fs-xs, 0.8rem);
        border: 1px solid #3a4250;
        vertical-align: middle;
        color: var(--lux-text-muted, #9aa1ad);
      }
      .feed-gate-mark[data-feed-gate="quarantine"] {
        color: #ffb3b3;
        border-color: #8a3a3a;
      }
      /* Spine RCD brief (P6 hop 50). */
      .luxon-shell-root[data-spine="1"] .spine-rcd-brief {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin: 0 0 8px;
        padding: 6px 10px;
        background: #14161b;
        border: 1px solid #262b33;
        border-radius: 8px;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa1ad;
      }
      .luxon-shell-root[data-spine="1"] .spine-rcd-brief-part + .spine-rcd-brief-part::before {
        content: "·";
        margin-right: 6px;
        color: var(--lux-text-faint, #8a9099);
      }
      .luxon-shell-root[data-spine="1"] .spine-rcd-brief .spine-open-btn {
        margin-left: auto;
      }
      /* Owner STEP library row marks (P6 hop 49). */
      .owner-step-lib__mark {
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #7a8aa0;
        margin-left: auto;
        white-space: nowrap;
      }
      /* Outputs summary tiles (P6 hop 48). */
      .outputs-summary-tile { background: #2a2d35; border: 1px solid #3a3d45; border-radius: 6px; padding: 6px 10px; font-size: var(--lux-fs-xs, 0.8rem); }
      .outputs-summary-tile b { color: #fff; }
      /* Spine posture (P6 hop 45). */
      .luxon-pill[data-spine-posture] {
        font-size: var(--lux-fs-sm, 0.875rem);
        color: #c9d1d9;
        background: rgba(40, 90, 140, 0.22);
        border: 1px solid #2c4a6b;
        border-radius: var(--lux-r-pill, 999px);
        padding: 2px 10px;
        white-space: nowrap;
      }
      .luxon-pill[data-spine-posture-tone="ready"] { border-color: var(--lux-go-border, #2f6b3a); color: var(--lux-go-fg, #9be6a8); }
      .luxon-pill[data-spine-posture-tone="warn"] { border-color: var(--lux-check-border, #5a4524); color: var(--lux-check-fg, #f6c177); }
      .luxon-pill[data-spine-posture-tone="act"] { border-color: var(--lux-act-border, #5a2f2f); color: var(--lux-act-fg, #ff9a9a); }
      /* Identity header readings (P6 hop 44). */
      .luxon-pill[data-id-header] {
        display: inline-flex;
        align-items: center;
        max-width: 12rem;
        min-width: 0;
        padding: 0.15rem 0.45rem;
        border-radius: 999px;
        border: 1px solid var(--lux-border, #3a3f48);
        background: var(--lux-surface-raised, #1f232a);
        color: var(--lux-text, #c5c8cc);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
      }
      /* Drawer back control (P6 hop 30). */
      .luxon-pill[data-back-chip] {
        position: fixed;
        right: 18px;
        bottom: calc(var(--luxon-shell-bottom-h, 40px) + 24px);
        z-index: 2147482000;
        background: var(--lux-surface-raised, #1b1e25);
        color: var(--lux-text, #e8eaed);
        border: 1px solid var(--lux-border, #3a4250);
        border-radius: var(--lux-r-pill, 999px);
        padding: 6px 14px;
        font-size: var(--lux-fs-sm, 0.875rem);
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
        display: none;
      }
      .luxon-pill[data-back-chip]:hover { border-color: var(--lux-move, #5a6270); }
      .luxon-pill[data-back-chip]:focus,
      .luxon-pill[data-back-chip]:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2);
        outline-offset: 2px;
      }
      /* UX PUSH 2 — phone: panel bottom strips (quick actions, receipts) share
         the chip's corner; lift the chip clear of that zone so Back stays the
         reachable control, not the covered one. */
      @media (max-width: 640px) {
        .luxon-pill[data-back-chip] {
          bottom: calc(var(--luxon-shell-bottom-h, 40px) + 100px);
        }
      }
      /* UX PUSH 2 — Back is a primary touch control: 44px on coarse pointers. */
      @media (pointer: coarse) {
        .luxon-pill[data-back-chip] { min-height: 44px; padding: 8px 16px; }
      }
      /* Workspace picker superseded reading (P6 hop 28). */
      .luxon-wsp-row .luxon-pill {
        padding: 1px 6px;
        font-size: var(--lux-fs-xs);
        font-weight: 600;
        color: var(--lux-warn-on);
        border: 1px solid var(--lux-warn);
        background: transparent;
      }
      .ea-ops-table th,
      .ea-ops-table td {
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .ea-ops-detail {
        max-width: 280px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: ui-monospace, monospace;
        color: #9aa0a6;
      }
      .ea-ops-footer {
        margin-top: 0.3rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #9aa0a6;
      }
      /* EA / Withdraw status (P6 hop 46). */
      .luxon-pill[data-ea] {
        display: inline-block;
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        font-size: var(--lux-fs-xs, 0.8rem);
        font-weight: 600;
        text-transform: lowercase;
      }
      .luxon-pill[data-ea-tone="ok"] { background: #1f4a2f; color: #9bf0b3; }
      .luxon-pill[data-ea-tone="warn"] { background: #4a3a1f; color: #f6c177; }
      .luxon-pill[data-ea-tone="fail"] { background: #4a1f1f; color: #ff9a9a; }

      /* Tuesday rail + U-FW-05 "?" — CSS here so the lazy JS chunk does not grow. */
      #luxon-tuesday-rail {
        position: fixed;
        top: calc(var(--luxon-shell-header-h, 44px) + var(--luxon-shell-timeline-h, 0px) + var(--luxon-spine-chrome-h, 38px) + var(--luxon-shell-disclaimer-offset, 0px) + 2px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 6;
        display: flex;
        gap: 2px;
        max-width: 480px;
        max-height: 22px;
        overflow: hidden;
      }
      #luxon-tuesday-rail [data-role="tuesday-rail-more"]:not([open]) > :not(summary) {
        display: none !important;
      }
      #luxon-tuesday-rail [data-role="tuesday-rail-more"][open] {
        display: flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
      }
      #luxon-tuesday-rail [data-role="tuesday-rail-more"] > summary {
        cursor: pointer;
        color: #c9d1d9;
        font-size: var(--lux-fs-xs, 0.8rem);
        list-style: none;
      }
      #luxon-tuesday-rail [data-role="tuesday-rail-more"] > summary::-webkit-details-marker { display: none; }
      #luxon-tuesday-rail [data-tuesday-step] {
        appearance: none;
        min-height: 22px;
        padding: 1px 6px;
        font: inherit;
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1.2;
        color: #c9d1d9;
        background: transparent;
        border: 1px solid #3a3f48;
        border-radius: 6px;
        cursor: pointer;
      }
      /* The rail is 22px and clips. The first FFF reading has to stay on screen. */
      #luxon-tuesday-rail [data-role="tuesday-open-snapshot"] {
        position: fixed;
        top: calc(var(--luxon-shell-header-h, 44px) + var(--luxon-shell-timeline-h, 0px) + var(--luxon-spine-chrome-h, 38px) + var(--luxon-shell-disclaimer-offset, 0px) + 28px);
        left: 12px;
        z-index: 30;
        max-width: min(640px, calc(100vw - 24px));
        margin: 0;
        padding: 4px 8px;
        background: #142033;
        color: #e7eef8;
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
      }
      #luxon-tuesday-rail [data-luxon-help],
      [id$="_panel"] > [data-luxon-help] {
        appearance: none;
        min-height: 22px;
        height: 22px;
        padding: 0 4px;
        font-size: var(--lux-fs-xs, 0.8rem);
        line-height: 20px;
        color: #9aa1ad;
        border: 0;
        background: transparent;
        cursor: pointer;
        flex: 0 0 auto;
      }
      /* No-bid Bind card was floating over the first screen. The label stays; Bring-in owns it. */
      body.luxon-landing > #luxon-tuesday-rail-volume:has([data-arrive-where="honest_door"]) {
        display: none !important;
      }
      [id$="_panel"] > [data-luxon-help] { float: right; }

      /* Versions panel (PRD §22 -- multi-project navigation). Same right-
         side drawer pattern as Docs/Archive so the layout stays
         predictable. */
      #versions_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(520px, 52vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 101;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-md, 1rem);
        line-height: 1.5;
        flex-direction: column;
        gap: 0.4rem;
        /* Scroll whole panel so Open / Process stay reachable (was hidden → clipped). */
        overflow: auto;
      }
      #versions_panel.visible { display: flex; }
      /* Phone width: a 48vw drawer leaves Open / Process beside the rail. */
      @media (max-width: 640px) {
        #side_panel,
        #chat_panel,
        #ingest_panel,
        #help_panel,
        #bid_panel,
        #archive_panel,
        #docs_panel,
        #components_panel,
        #onm_panel,
        #rcd_panel,
        #reuse_galaxy_panel,
        #versions_panel,
        #files_panel,
        #ea_panel,
        #step_decisions_panel,
        #vendor_links_panel,
        #vendor_catalog_panel,
        #vendor_self_register_panel,
        #factories_panel,
        #procurement_panel,
        #outputs_panel,
        #decision_space_panel,
        #loop_monitor_panel,
        #cpc_dashboard_panel,
        #live_board_panel,
        #manufacturing_panel,
        #withdraw_panel {
          left: 0;
          right: 0;
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
        }
      }
      #files_panel {
        display: none;
        position: fixed;
        top: var(--luxon-float-top);
        right: 0;
        width: min(520px, 52vw);
        height: calc(100% - var(--luxon-float-top) - var(--luxon-shell-bottom-h));
        z-index: 101;
        background: #12141a;
        border-left: 1px solid #444;
        padding: 0.55rem 0.7rem;
        font-size: var(--lux-fs-md, 1rem);
        line-height: 1.5;
        flex-direction: column;
        gap: 0.4rem;
        overflow: auto;
      }
      #files_panel.visible { display: flex; }
      /* UX PUSH 1 — visible keyboard focus on every control in the two
         operating drawers (one rule, scoped, same ring as pathway buttons). */
      #versions_panel :focus-visible,
      #files_panel :focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2);
        outline-offset: 1px;
      }
      /* UX PUSH 1 — touch hit targets: the two operating drawers get 44px
         controls on coarse pointers (desktop keeps the dense 24px token). */
      @media (pointer: coarse) {
        #versions_panel button,
        #files_panel button,
        #versions_panel select,
        #files_panel select {
          min-height: 44px;
        }
      }
      .versions-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .versions-header-row h4 { margin: 0; font-size: var(--lux-fs-lg, 1.125rem); }
      .versions-refresh-btn {
        background: #333;
        color: #e8eaed;
        border: 1px solid #555;
        border-radius: 4px;
        padding: 0.3rem 0.65rem;
        min-height: var(--lux-min-tap, 28px);
        font-size: var(--lux-fs-sm, 0.875rem);
        cursor: pointer;
      }
      .versions-status {
        font-size: var(--lux-fs-xs, 0.8rem);
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        background: #2a2d35;
        color: #9aa0a6;
      }
      .versions-status-ok    { color: #8fd9a6; }
      .versions-status-empty { color: #f6c177; }
      .versions-status-error { color: #ff7d7d; }
      .versions-field {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        font-size: var(--lux-fs-xs, 0.8rem);
        color: #c1c5cc;
      }
      .versions-field select {
        background: #1a1d23;
        color: #e8eaed;
        border: 1px solid #444;
        border-radius: 3px;
        padding: 0.3rem 0.45rem;
        min-height: var(--lux-min-tap, 28px);
        font-size: var(--lux-fs-sm, 0.875rem);
        font-family: inherit;
      }
      .versions-list-wrap {
        flex: 1;
        min-height: 0;
        overflow: auto;
        border: 1px solid #333;
        border-radius: 4px;
        padding: 0.35rem 0.5rem;
        background: #161920;
      }
      /* One scroll on the panel. A nested list scroll left Open under the clip. */
      #versions_panel .versions-list-wrap {
        flex: 0 0 auto;
        overflow: visible;
      }
      .versions-list-wrap h5 {
        margin: 0 0 0.4rem 0;
        font-size: var(--lux-fs-sm, 0.875rem);
        color: #9aa0a6;
      }
      .versions-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--lux-fs-xs, 0.8rem);
      }
      .versions-table th,
      .versions-table td {
        text-align: left;
        padding: 0.25rem 0.4rem;
        border-bottom: 1px solid #2a2d35;
        vertical-align: top;
      }
      .versions-table th {
        font-weight: 600;
        color: #c1c5cc;
        background: #1f232b;
        position: sticky;
        top: 0;
        z-index: 1;
      }
      /* The sticky header covers a row that scroll-into-view pins at the top. */
      .versions-table tbody tr,
      .versions-load-btn {
        scroll-margin-top: 2.75rem;
      }
      /* UAT #17/#18 — Files upload log: folder headers + one-line names
         (never word-break:break-all — that stacked characters vertically). */
      [data-files-table].versions-table {
        font-size: var(--lux-fs-sm, 0.875rem);
        table-layout: fixed;
        width: 100%;
      }
      [data-files-table].versions-table th,
      [data-files-table].versions-table td {
        padding: 0.35rem 0.5rem;
        vertical-align: middle;
      }
      [data-files-table].versions-table th:nth-child(1),
      [data-files-table].versions-table td.files-path-cell {
        width: 36%;
      }
      [data-files-table] .files-folder-header td {
        font-weight: 600;
        font-size: var(--lux-fs-sm, 0.875rem);
        color: #cfd2d9;
        background: #1a1e26;
        padding-top: 0.5rem;
        border-bottom-color: #3a4050;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      [data-files-table] .files-path-cell {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: var(--lux-fs-sm, 0.875rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
        overflow-wrap: normal;
      }
      #files_panel .versions-list-wrap {
        overflow-x: auto;
      }
      .versions-row-newest td:first-child::before {
        content: "● ";
        color: #8fd9a6;
      }
      .versions-row-current {
        background: rgba(143, 217, 166, 0.08);
      }
      .versions-row-current td:first-child::before {
        content: "▶ ";
        color: #f6c177;
      }
      .versions-load-btn {
        min-height: var(--lux-min-tap, 28px);
        background: var(--lux-surface-raised, #1b1e25);
        color: var(--lux-move-fg, #9ecbff);
        border: 1px solid var(--lux-move-border, #2e4a6b);
        border-radius: var(--lux-r-ctl, 6px);
        padding: 0.35rem 0.75rem;
        font-size: var(--lux-fs-sm, 0.875rem);
        font-weight: 600;
        cursor: pointer;
      }
      .versions-load-btn:hover {
        border-color: var(--lux-move, #4a7ab5);
      }
      .versions-load-btn:focus-visible {
        outline: 2px solid var(--lux-focus, #4a90e2);
        outline-offset: 1px;
      }
      .versions-load-btn--primary {
        background: var(--lux-move-strong, #2c5fb8);
        border-color: var(--lux-move-strong, #2c5fb8);
        color: #fff;
        font-weight: 700;
        padding: 0.45rem 0.9rem;
        font-size: var(--lux-fs-md, 1rem);
      }
      .versions-load-btn--primary:hover {
        filter: brightness(1.08);
      }
      .versions-load-btn:disabled {
        background: var(--lux-surface-raised, #2a2d35);
        color: var(--lux-text-muted, #6f7480);
        border-color: var(--lux-border, #3a3f48);
        cursor: not-allowed;
        filter: none;
        opacity: var(--lux-disabled-opacity, 0.5);
      }
      /* ----------------------------------------------------------------
         Shell layout (Opus, UI_AND_ENGINE_SPRINT §3). Floating panels
         use `--luxon-float-top` + `--luxon-shell-bottom-h` so they
         clear spine chrome and the strip+dock on first paint. The
         shell adds the chrome rails (header/strip/param/ingest/llm).
         See app/xeokit-viewer/src/viewer_shell.js for the contract.
         ---------------------------------------------------------------- */
      /* Legacy panel host. Off-screen by default — the panels each
         carry their own `position: fixed` positioning, so visually
         they overlay the canvas exactly like before. */
      #luxon_legacy_panels {
        position: relative;
        /* Keep drawer-opened legacy panels above shell rail boxes so
           panel header controls don't get occluded by Box B overlays. */
        z-index: 8;
      }
      /* Tucked-away placeholders for IDs that the legacy toolbar used
         to expose. Keeping them in the DOM means main.js can still
         call `getElementById("status")` / `getElementById("pick")`
         without conditional logic. */
      #luxon_legacy_toolbar_dom {
        position: absolute;
        left: -10000px;
        top: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      /* Shell layout tokens — mirror viewer_shell.js so the canvas can
         align with header + timeline + dock gap and the decision strip. */
      body.has-shell {
        --luxon-shell-header-h: 44px;
        --luxon-shell-timeline-h: 18px;
        --luxon-shell-dock-gap: 10px;
        --luxon-shell-dock-top: calc(
          var(--luxon-shell-header-h)
          + var(--luxon-shell-timeline-h)
          + var(--luxon-shell-dock-gap)
          + var(--luxon-shell-disclaimer-offset)
        );
        --luxon-shell-strip-h: 40px;
        --luxon-pc-dock-h: 44px;
        --luxon-shell-bottom-h: calc(
          var(--luxon-shell-strip-h) + var(--luxon-pc-dock-h)
        );
      }
      /* With the shell active, tuck the disclaimer under header+timeline
         instead of overlapping them; dock-top already reserves its height. */
      body.has-shell #disclaimer_banner {
        top: calc(var(--luxon-shell-header-h) + var(--luxon-shell-timeline-h));
        z-index: 3;
      }
      /* Header offset: the shell header occupies the same 44px slot
         as the old toolbar. Floating panels use --luxon-float-top. */
      /* Explicit height — not `height: auto`. A <canvas> is a replaced
         element: height:auto keeps the intrinsic bitmap (often 150px from
         first paint), so STEP glTF loads into a thin "glitch" strip. */
      body.has-shell #xeokit_canvas {
        top: var(--luxon-shell-dock-top);
        bottom: var(--luxon-shell-bottom-h, var(--luxon-shell-strip-h));
        height: calc(
          100vh - var(--luxon-shell-dock-top) - var(--luxon-shell-bottom-h, var(--luxon-shell-strip-h))
        );
      }