/* Rex 20-environment build-out — shared chrome primitives (Ticket 0).
   Consumed by frontend/environments/rex-env-shell.js's builder functions.
   Reuses the :root tokens already defined in frontend/index.html — no new palette. */

/* === F1 — telemetry chip === */
.rex-chip-row{display:flex;align-items:center;gap:18px;min-width:0;overflow:hidden;flex-wrap:nowrap}
.rex-chip{display:flex;align-items:center;gap:6px;position:relative;white-space:nowrap;flex:0 0 auto}
.rex-chip-icon{display:flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--cyan);flex:0 0 auto}
.rex-chip-icon svg{width:13px;height:13px}
.rex-chip-label{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.rex-chip-value{font-size:11px;font-weight:600;color:var(--white)}
.rex-chip.is-ok .rex-chip-icon,.rex-chip.is-ok .rex-chip-value{color:var(--green)}
.rex-chip.is-warn .rex-chip-icon,.rex-chip.is-warn .rex-chip-value{color:var(--orange)}
.rex-chip.is-critical .rex-chip-icon,.rex-chip.is-critical .rex-chip-value{color:var(--red)}

/* F1b — 2-3 line stacked variant */
.rex-chip-b{align-items:flex-start}
.rex-chip-stack{display:flex;flex-direction:column;gap:1px}
.rex-chip-b .rex-chip-label{font-size:9px}
.rex-chip-b .rex-chip-value{font-size:13px}
.rex-chip-sub{font-size:9px;color:var(--faint)}

/* F1d — dismissable variant */
.rex-chip-d{padding-right:14px}
.rex-chip-dismiss{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--muted);font-size:10px;line-height:1;cursor:pointer;display:grid;place-items:center}

/* F1e — chip-with-bar variant */
.rex-chip-e{flex-direction:column;align-items:flex-start;gap:2px}
.rex-chip-bar{width:64px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.rex-chip-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan2));border-radius:2px}

/* === F2 / F2a / F3 — nav rail === */
.rex-nav-rail{display:flex;flex-direction:column;height:100%;min-height:0}
.rex-nav-section-title{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:14px 10px 6px}
.rex-nav-section-title:first-child{margin-top:4px}

/* F2a — sidebar-top identity card */
.rex-sidebar-top{margin:8px 10px 6px;padding:9px 11px;border:1px solid rgba(34,169,255,.09);border-radius:var(--rex-panel-radius);background:linear-gradient(180deg,rgba(7,18,30,.92),rgba(3,9,16,.94))}
.rex-sidebar-top-title{font-size:11px;font-weight:700;color:var(--white);letter-spacing:.2px}
.rex-sidebar-top-detail{font-size:9px;color:var(--muted);margin-top:2px}

/* F3 — sidebar-bottom slot, all sub-variants */
.rex-sidebar-bottom{margin:auto 10px 12px;flex:0 0 auto}
.rex-sidebar-status-pill{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid rgba(34,169,255,.09);border-radius:var(--rex-panel-radius);background:linear-gradient(180deg,rgba(7,18,30,.92),rgba(3,9,16,.94));font-size:11px;color:var(--text)}
.rex-status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px currentColor;flex:0 0 auto}
.rex-status-dot.is-ok{background:var(--green);color:var(--green)}
.rex-status-dot.is-warn{background:var(--orange);color:var(--orange)}
.rex-status-dot.is-critical{background:var(--red);color:var(--red)}
.rex-status-pill-label{font-weight:600;color:var(--white)}
.rex-status-pill-detail{color:var(--muted);font-size:9px;margin-left:auto}
.rex-sidebar-descriptor{padding:11px;border:1px solid rgba(34,169,255,.09);border-radius:var(--rex-panel-radius);background:linear-gradient(180deg,rgba(7,18,30,.92),rgba(3,9,16,.94))}
.rex-descriptor-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#8094a8;margin-bottom:6px}
.rex-descriptor-detail{font-size:10px;color:var(--muted);line-height:1.4}
.rex-descriptor-btn{margin-top:8px;width:100%;height:26px;border-radius:7px;border:1px solid rgba(34,169,255,.28);background:rgba(6,168,255,.1);color:var(--cyan2);font-size:10px;cursor:pointer}
.rex-sidebar-health-ring{padding:9px 11px;border:1px solid rgba(34,169,255,.09);border-radius:var(--rex-panel-radius);background:linear-gradient(180deg,rgba(7,18,30,.92),rgba(3,9,16,.94));text-align:center}
.rex-health-ring-ttl{font-size:9px;font-weight:700;letter-spacing:.4px;color:#8094a8;text-transform:uppercase;margin-bottom:6px;text-align:left}
.rex-health-ring{width:56px;height:56px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) calc(var(--pct)*1%),rgba(255,255,255,.08) 0)}
.rex-health-ring span{width:42px;height:42px;border-radius:50%;background:#050d18;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--white)}
.rex-health-ring-detail{font-size:9px;color:var(--muted);margin-top:6px}

/* === F4 — command dock (default + F4b + F4c) === */
.rex-dock{display:flex;align-items:center;gap:14px;width:100%;height:100%}
.rex-dock-input-row{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.rex-dock-status{flex:0 0 auto;display:flex;flex-direction:column;gap:1px}
.rex-dock-status-label{font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--white)}
.rex-dock-status-detail{font-size:9px;color:var(--muted)}
.rex-dock-inputwrap{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 8px 0 14px;border:1px solid rgba(0,169,255,.3);border-radius:10px;background:rgba(7,15,25,.88)}
.rex-dock-input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font-size:12px}
.rex-dock-mic{width:30px;height:30px;border-radius:50%;border:1px solid rgba(34,169,255,.38);background:#071522;color:var(--white);flex:0 0 auto;cursor:pointer}
.rex-dock-shortcut{font-size:9px;color:var(--muted);border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:2px 5px;flex:0 0 auto}
.rex-dock-send-chip{height:26px;padding:0 10px;border-radius:6px;border:0;background:linear-gradient(135deg,#7b3cff,#4c6bff);color:#fff;font-size:10px;font-weight:700;cursor:pointer;flex:0 0 auto}
.rex-dock-actions{display:flex;align-items:center;gap:8px;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.rex-dock-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:64px;height:44px;padding:0 10px;border-radius:8px;border:1px solid rgba(34,169,255,.14);background:rgba(7,15,25,.7);color:var(--text);font-size:9px;text-align:center;cursor:pointer;flex:0 0 auto}
.rex-dock-action-icon{width:14px;height:14px;color:var(--cyan)}
.rex-dock-action-icon svg{width:14px;height:14px}
.rex-dock-voice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:96px;height:44px;padding:0 12px;border-radius:8px;background:linear-gradient(135deg,#0b3156,#071522);border:1px solid rgba(0,169,255,.35);color:var(--cyan2);font-size:9px;font-weight:700;letter-spacing:.3px;flex:0 0 auto;cursor:pointer}
.rex-dock-critical{height:36px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,48,61,.4);background:rgba(255,48,61,.14);color:#ffb3b8;font-size:10px;font-weight:700;letter-spacing:.3px;cursor:pointer;flex:0 0 auto}
.rex-dock-mode-pill{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;border:1px solid rgba(31,242,130,.3);background:rgba(31,242,130,.08);color:var(--green);font-size:9px;font-weight:700;letter-spacing:.3px;flex:0 0 auto}
.rex-dock-orb{width:52px;height:52px;border-radius:50%;border:1px solid rgba(0,169,255,.5);background:radial-gradient(circle,#0a3c71 0,#061627 60%,transparent 100%);box-shadow:0 0 22px rgba(0,150,255,.35);color:var(--white);font-size:11px;font-weight:800;cursor:pointer;flex:0 0 auto}

/* F4b — 3-part dock */
.rex-dock-f4b{justify-content:space-between}
.rex-dock-third{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0}
.rex-dock-third-actions{justify-content:center;overflow-x:auto;scrollbar-width:none}
.rex-dock-third-summary{justify-content:flex-end}

/* F4c — two-tier dock */
.rex-dock-f4c{flex-direction:column;align-items:stretch;gap:8px;height:auto}
.rex-dock-tier2{display:flex;gap:8px;width:100%}
.rex-dock-tier-panel{flex:1 1 0;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid rgba(34,169,255,.12);background:rgba(7,15,25,.6)}
.rex-dock-tier-ttl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-bottom:4px}
.rex-dock-tier-body{font-size:10px;color:var(--text)}

/* === Per-environment console shell (Ticket 1+) === */
/* The shared .card base rule (frontend/index.html) is position:absolute,
   built for the legacy coordinate-positioned dashboard. Every environment
   console flows its .card children in normal flex/grid layout instead, so
   override that here — this is the one deliberate exception to reusing
   .card completely unmodified, and it's scoped to [data-rex-env] only. */
[data-rex-env] .card{position:relative}
/* .rex-env-shell is the same element as #stage>[data-rex-env] (both
   selectors target the environment <section> itself) — position:absolute
   already comes from that rule in frontend/index.html, not repeated here. */
.rex-env-shell{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:16px}
/* top/right account for the parent [data-rex-env]'s own 60px/1.6vw padding —
   position:absolute offsets are measured from the padding edge, not the
   content edge, so top:0 here would sit at the very top of the box (under
   the fixed .rex-auth-bar) rather than inside the padded content area. */
.rex-env-close{position:absolute;top:70px;right:1.6vw;z-index:2;height:34px;padding:0 14px;border-radius:8px;border:1px solid rgba(34,169,255,.28);background:rgba(7,18,30,.9);color:var(--cyan2);font-size:11px;font-weight:600;cursor:pointer}
.rex-env-body{display:flex;gap:16px;flex:1;min-height:0;overflow:auto}
.rex-env-col-main{flex:1 1 62%;min-width:0;display:flex;flex-direction:column;gap:14px}
.rex-env-col-side{flex:1 1 34%;min-width:0;display:flex;flex-direction:column;gap:14px}
.rex-env-panel{position:relative}
.rex-env-unavailable-row{display:flex;gap:14px}
.rex-env-unavailable-row .card{flex:1 1 0;min-width:0}
.rex-env-empty{font-size:11px;color:var(--muted);padding:10px 2px;line-height:1.5}
.rex-env-caption{font-size:9px;color:var(--faint);margin-top:10px;line-height:1.4}

/* F13 — generalized approval card (built from HOME's .rex-approval-notice) */
.rex-approvals-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.rex-approval-card{padding:12px;border-radius:9px;border:1px solid rgba(34,169,255,.14);background:rgba(7,15,25,.6)}
.rex-approval-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rex-approval-card-category{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--white)}
.rex-approval-card-status{font-size:9px;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:10px;background:rgba(255,157,0,.14);color:var(--orange)}
.rex-approval-card-status.is-approved{background:rgba(31,242,130,.14);color:var(--green)}
.rex-approval-card-status.is-denied,.rex-approval-card-status.is-expired{background:rgba(255,48,61,.14);color:var(--red)}
.rex-approval-card-reason{font-size:11px;color:var(--text);margin-bottom:8px}
.rex-approval-card-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:10px}
.rex-approval-card-grid span{color:var(--muted)}
.rex-approval-card-grid b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rex-approval-card-safety{margin-top:8px;font-size:9px;color:var(--faint)}
.rex-approval-card-actions{display:flex;gap:8px;margin-top:9px}
.rex-approval-card-actions button{flex:1;height:28px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer}
.rex-approval-approve{border:1px solid rgba(31,242,130,.4);background:rgba(31,242,130,.12);color:var(--green)}
.rex-approval-deny{border:1px solid rgba(255,48,61,.35);background:rgba(255,48,61,.1);color:#ffb3b8}
.rex-approval-card-actions button:disabled{opacity:.5;cursor:not-allowed}

/* 3-column environments (#04 Memory & Recall, later #17) */
.rex-env-body-3col{align-items:flex-start}
.rex-env-body-3col .rex-env-col-main{flex:1 1 42%}
.rex-env-col-center{flex:1 1 34%;min-width:0;display:flex;flex-direction:column;gap:14px}
.rex-env-body-3col .rex-env-col-side{flex:1 1 22%}
.rex-env-panel-tall{flex:1;display:flex;flex-direction:column;min-height:400px}
.rex-env-filter-input{width:100%;height:32px;margin:8px 0;padding:0 10px;border-radius:7px;border:1px solid rgba(34,169,255,.2);background:rgba(7,15,25,.7);color:var(--text);font-size:11px}
.rex-mem-session-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.rex-mem-session-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:7px;border:1px solid rgba(34,169,255,.12);background:rgba(7,15,25,.5);cursor:pointer;font-size:10px}
.rex-mem-session-row:hover,.rex-mem-session-row.is-active{border-color:rgba(34,169,255,.4);background:rgba(6,168,255,.08)}
.rex-mem-session-row b{color:var(--white);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.rex-mem-session-row span{color:var(--muted);flex:0 0 auto}
.rex-mem-thread{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;margin-top:8px}
.rex-mem-msg{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04);font-size:11px;line-height:1.4}
.rex-mem-msg.role-user{border-color:rgba(34,169,255,.14)}
.rex-mem-msg.role-rex,.rex-mem-msg.role-assistant{border-color:rgba(31,242,130,.12)}
.rex-mem-msg-role{font-size:8px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:3px}
.rex-mem-msg-time{font-size:8px;color:var(--faint);margin-top:4px;text-align:right}
.rex-mem-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:8px;font-size:10px}
.rex-mem-summary-grid span{color:var(--muted)}
.rex-mem-summary-grid b{color:var(--text);font-weight:600}

/* Ticket 5 — Research Intelligence */
.rex-res-job-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rex-res-job{padding:10px;border-radius:8px;border:1px solid rgba(34,169,255,.12);background:rgba(7,15,25,.5);cursor:pointer;font-size:10px}
.rex-res-job:hover,.rex-res-job.is-active{border-color:rgba(34,169,255,.4)}
.rex-res-job-query{color:var(--white);font-weight:600;font-size:11px;margin-bottom:4px}
.rex-res-job-meta{display:flex;gap:12px;color:var(--muted);flex-wrap:wrap}
.rex-res-job-status{text-transform:uppercase;font-size:9px;padding:1px 7px;border-radius:8px;background:rgba(6,168,255,.14);color:var(--cyan2)}
.rex-res-job-status.status-completed{background:rgba(31,242,130,.14);color:var(--green)}
.rex-res-job-status.status-failed{background:rgba(255,48,61,.14);color:#ff9aa2}
.rex-res-evidence-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:8px}
.rex-res-evidence-card{padding:9px;border-radius:8px;border:1px solid rgba(34,169,255,.12);background:rgba(7,15,25,.5);font-size:9px}
.rex-res-evidence-card b{display:block;color:var(--text);font-size:10px;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Generic N-up row (Ticket 4 Governance and later) */
.rex-env-row{display:flex;gap:14px;flex-wrap:wrap}
.rex-env-row .card{flex:1 1 200px;min-width:200px}
.rex-env-scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:8px;font-size:10px}
.rex-env-scope-grid span{color:var(--muted)}
.rex-env-scope-grid b{color:var(--text);font-weight:600}
.rex-cert-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9px;text-transform:uppercase;letter-spacing:.3px;background:rgba(255,157,0,.14);color:var(--orange);margin:3px 6px 3px 0}

/* Ticket 3 — Files / Memory / Workflow */
.rex-fmw-upload-btn{cursor:pointer;text-align:left;color:var(--cyan2)}
.rex-fmw-files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:10px;max-height:280px;overflow-y:auto}
.rex-fmw-file-tile{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:8px;border:1px solid rgba(34,169,255,.12);background:rgba(7,15,25,.5);font-size:9px}
.rex-fmw-file-thumb{width:100%;height:56px;border-radius:5px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:8px;overflow:hidden}
.rex-fmw-file-thumb img{width:100%;height:100%;object-fit:cover}
.rex-fmw-file-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rex-fmw-file-meta{color:var(--faint)}
.rex-fmw-assistant-inputwrap{display:flex;gap:8px;margin-top:10px}
.rex-fmw-assistant-inputwrap input{flex:1;height:32px;padding:0 10px;border-radius:7px;border:1px solid rgba(34,169,255,.2);background:rgba(7,15,25,.7);color:var(--text);font-size:11px}
.rex-fmw-assistant-inputwrap button{height:32px;padding:0 14px;border-radius:7px;border:0;background:linear-gradient(135deg,#7b3cff,#4c6bff);color:#fff;font-size:10px;font-weight:700;cursor:pointer}

/* Cost baseline card */
.rex-cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:8px}
.rex-cost-grid div{display:flex;flex-direction:column;gap:2px}
.rex-cost-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.rex-cost-grid b{font-size:16px;font-weight:700;color:var(--white)}

/* === F5 — content header === */
.rex-content-header{display:flex;flex-direction:column;gap:10px}
.rex-content-header-main{display:flex;align-items:flex-start;gap:10px}
.rex-content-header-icon{width:20px;height:20px;color:var(--cyan);flex:0 0 auto}
.rex-content-header-icon svg{width:20px;height:20px}
.rex-content-header-title{font-size:20px;font-weight:700;color:var(--white)}
.rex-content-header-subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.rex-content-header-controls{margin-left:auto;display:flex;align-items:center;gap:8px}
.rex-tab-row{display:flex;gap:6px}
.rex-tab{padding:6px 12px;border-radius:7px;font-size:11px;color:var(--muted);cursor:pointer}
.rex-tab.is-active{background:rgba(6,168,255,.16);color:var(--white);border:1px solid rgba(6,168,255,.32)}

/* Ticket 6 — Infrastructure Topology: F14/F14a node-link diagram, migration
   stepper. Built generically here for reuse by Tickets 7 (#02) and 13 (#10). */
.rex-infra-diagram{display:flex;align-items:stretch;gap:18px;margin-top:10px;flex-wrap:wrap}
.rex-infra-group{flex:1 1 200px;min-width:180px;display:flex;flex-direction:column;gap:8px}
.rex-infra-group-label{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:2px}
.rex-infra-hub{flex:0 0 64px;align-self:center;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1px solid rgba(34,169,255,.3);background:radial-gradient(circle,rgba(6,168,255,.14),rgba(7,15,25,.6));color:var(--cyan2);font-size:8px;text-align:center;text-transform:uppercase;letter-spacing:.3px}
/* F14 node card, F14a modifier via data-rex-infra-node-state */
.rex-infra-node{padding:10px;border-radius:8px;border:1px solid rgba(34,169,255,.14);background:rgba(7,15,25,.5)}
.rex-infra-node[data-rex-infra-node-state="active"]{border-color:rgba(31,242,130,.4);background:rgba(31,242,130,.06)}
.rex-infra-node[data-rex-infra-node-state="planned"]{border-style:dashed;opacity:.72}
.rex-infra-node-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;color:var(--white)}
.rex-infra-node-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rex-infra-node-badge{font-size:8px;text-transform:uppercase;letter-spacing:.3px;padding:2px 7px;border-radius:8px;white-space:nowrap;flex:0 0 auto}
.rex-infra-node[data-rex-infra-node-state="active"] .rex-infra-node-badge{background:rgba(31,242,130,.16);color:var(--green)}
.rex-infra-node[data-rex-infra-node-state="planned"] .rex-infra-node-badge{background:rgba(255,165,0,.14);color:var(--orange)}
.rex-infra-node-stats{margin-top:6px;display:flex;flex-direction:column;gap:3px;font-size:9px;color:var(--muted)}
.rex-infra-node-stats b{color:var(--text);font-weight:600}
.rex-infra-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(34,169,255,.08);font-size:9px;color:var(--muted)}
.rex-infra-legend span{display:inline-flex;align-items:center;gap:5px}
.rex-infra-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.rex-infra-legend i.is-active{background:var(--green);border-radius:50%}
.rex-infra-legend i.is-planned{border:1px dashed var(--orange);background:transparent}
/* F16 — 4-stage migration stepper, roadmap content only (never measured) */
.rex-infra-stepper{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rex-infra-stage{padding:8px 10px;border-radius:7px;border:1px solid rgba(34,169,255,.1);background:rgba(7,15,25,.4);display:flex;align-items:center;justify-content:space-between;gap:10px}
.rex-infra-stage-label{font-size:10px;color:var(--text)}
.rex-infra-stage-pill{font-size:8px;text-transform:uppercase;letter-spacing:.3px;padding:2px 7px;border-radius:8px;flex:0 0 auto}
.rex-infra-stage-pill.is-active{background:rgba(31,242,130,.16);color:var(--green)}
.rex-infra-stage-pill.is-planned{background:rgba(255,165,0,.14);color:var(--orange)}
.rex-infra-stage-pill.is-future{background:rgba(120,140,170,.14);color:var(--muted)}

/* Ticket 7 — Multi-Model Orchestration Council. The pulsing central-hub ring
   is deliberately #02-specific (per packets §02's distinctiveness anchor) —
   do not reuse .rex-oc-hub styling for #16/#10's plain F14 instances. */
.rex-oc-graph{display:flex;align-items:center;justify-content:center;min-height:220px;margin-top:10px}
.rex-oc-hub{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--cyan2);background:radial-gradient(circle,rgba(6,168,255,.16),rgba(7,15,25,.7));border:1px solid rgba(6,168,255,.35);box-shadow:0 0 0 1px rgba(6,168,255,.08),0 0 32px rgba(6,168,255,.12);animation:rex-oc-pulse 3s ease-in-out infinite}
@keyframes rex-oc-pulse{0%,100%{box-shadow:0 0 0 1px rgba(6,168,255,.08),0 0 24px rgba(6,168,255,.1)}50%{box-shadow:0 0 0 1px rgba(6,168,255,.16),0 0 40px rgba(6,168,255,.22)}}
.rex-oc-weight-row{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:10px;color:var(--muted)}
.rex-oc-weight-row span{flex:0 0 46px}
.rex-oc-weight-row input[type="range"]{flex:1;accent-color:var(--cyan2)}
.rex-oc-lifecycle-steps{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rex-oc-lifecycle-step{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--text);padding:6px 8px;border-radius:6px;background:rgba(7,15,25,.4);border:1px solid rgba(34,169,255,.08)}
.rex-oc-lifecycle-step em{font-style:normal;font-size:8px;text-transform:uppercase;color:var(--muted)}

/* Ticket 8 — Geopolitical Risk Analysis body (mounted inside the shared F6
   shell from rex-report-reader.js's [data-rex-rr-body] slot). */
.rex-geo-body-wrap{display:flex;gap:14px;align-items:stretch;height:100%}
.rex-geo-cols{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.rex-geo-video-card{flex:0 0 240px;display:flex;flex-direction:column}
.rex-geo-video-card .rex-env-empty{margin-top:auto;margin-bottom:auto}

/* Ticket 9 — Navigation (#05). Deliberately built with the established
   .rex-env-row/.card flex pattern rather than the reference's exact 4-column
   masonry — see CODEX_IMPLEMENTATION_QUEUE.md's Ticket 9 entry for the scope
   note on the deferred F2a sidebar-identity-card and F4b dock variant (both
   would require editing shared/global HOME chrome outside this environment's
   own [data-rex-env] section, out of bounds for a per-environment ticket). */
.rex-nav-cols{display:flex;gap:14px;align-items:stretch}
.rex-nav-col{flex:1 1 200px;display:flex;flex-direction:column;gap:14px;min-width:0}
.rex-nav-map-card{flex:3 1 380px;display:flex;flex-direction:column;min-height:0}
.rex-nav-map-canvas{flex:1;min-height:320px;border-radius:8px;overflow:hidden;margin-top:8px;background:rgba(4,10,18,.6)}
.rex-nav-api-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:6px 0;border-bottom:1px solid rgba(34,169,255,.06)}
.rex-nav-api-row:last-child{border-bottom:none}
.rex-nav-api-status{font-size:8px;text-transform:uppercase;letter-spacing:.3px;padding:2px 7px;border-radius:8px;flex:0 0 auto}
.rex-nav-api-status.is-connected{background:rgba(31,242,130,.16);color:var(--green)}
.rex-nav-api-status.is-not-connected{background:rgba(120,140,170,.12);color:var(--muted)}

/* Ticket 11 — Personal Protection (#18). The not-connected banner is a
   product-honesty requirement (packets §18) — deliberately high-contrast
   and impossible to miss, not styled like a normal muted .rex-env-empty
   caption. Never remove or mute this without an explicit decision to do so. */
.rex-protection-banner{margin:0 1.6vw 14px;padding:12px 18px;border-radius:8px;background:rgba(255,138,0,.14);border:1px solid rgba(255,165,0,.5);color:#ffcf8a;font-size:12px;font-weight:700;letter-spacing:.2px;text-align:center}
.rex-protection-response-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:10px}
.rex-protection-response-card{padding:12px;border-radius:8px;border:1px solid rgba(34,169,255,.14);background:rgba(7,15,25,.5);display:flex;flex-direction:column;gap:6px}
.rex-protection-response-card b{font-size:11px;color:var(--text)}
.rex-protection-response-card span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.rex-protection-response-card-medical{border-color:rgba(255,48,61,.4);background:rgba(255,48,61,.07)}
.rex-protection-response-card-medical b{color:#ff9aa2}

/* Ticket 12 — Driving Navigation. Two render paths for one static section:
   the JS renderer toggles [data-rex-driving-focus-only] elements' `hidden`
   attribute based on window.REX_STATE.current (FOCUS = full console shown,
   FULL_DISSOLVE = minimal HUD, per REX_TRANSITION_BEHAVIOUR_SPEC.md §8.3) —
   a genuine DOM removal, not a CSS opacity/dim trick. */
.rex-driving-plate{background:radial-gradient(ellipse at 50% 120%,rgba(20,30,45,.9),rgba(2,6,12,.98) 70%);position:relative;overflow:hidden}
.rex-driving-plate-overlay{position:relative;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;padding:24px}
.rex-driving-maneuver-stack{display:flex;flex-direction:column;gap:8px;align-self:flex-start;width:100%;max-width:280px}
.rex-driving-maneuver-card{padding:10px 14px;border-radius:8px;border:1px solid rgba(34,169,255,.2);background:rgba(7,15,25,.75);backdrop-filter:blur(2px)}
.rex-driving-maneuver-card b{display:block;font-size:13px;color:var(--white)}
.rex-driving-maneuver-card span{font-size:10px;color:var(--muted)}
.rex-driving-maneuver-card.is-primary{border-color:rgba(6,168,255,.4)}
.rex-driving-speed{display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;border:2px solid rgba(6,168,255,.4);background:rgba(7,15,25,.75)}
.rex-driving-speed b{font-size:28px;font-weight:700;color:var(--white)}
.rex-driving-speed span{font-size:9px;color:var(--muted);text-transform:uppercase}
.rex-driving-lane-status{padding:6px 14px;border-radius:8px;background:rgba(7,15,25,.75);border:1px solid rgba(34,169,255,.16);font-size:10px;color:var(--muted)}
.rex-driving-deviation{padding:8px 16px;border-radius:8px;background:rgba(255,48,61,.16);border:1px solid rgba(255,48,61,.4);color:#ff9aa2;font-size:11px;font-weight:700}
.rex-driving-restore-fast{position:absolute;top:70px;left:24px;z-index:50;padding:12px 20px;border-radius:10px;background:rgba(6,168,255,.16);border:1px solid rgba(6,168,255,.4);color:var(--cyan2);font-size:14px;font-weight:700;cursor:pointer}
/* FULL_DISSOLVE scale-up (~1.4x), set via JS by adding this class */
.rex-driving-plate.is-dissolve-scale .rex-driving-maneuver-card b{font-size:18px}
.rex-driving-plate.is-dissolve-scale .rex-driving-speed{width:134px;height:134px}
.rex-driving-plate.is-dissolve-scale .rex-driving-speed b{font-size:38px}
.rex-driving-plate.is-dissolve-scale .rex-driving-lane-status{font-size:13px;padding:9px 18px}
/* [hidden] loses to any author rule setting `display` at equal specificity
   (.rex-env-row{display:flex} etc.) — the same class of trap documented for
   #stage>* elsewhere in this file. Force it back for driving's toggled
   focus-only elements specifically. */
[data-rex-driving-focus-only][hidden]{display:none !important}

/* Ticket 13 — Self-Improvement (#10). Reuses F16 (.rex-infra-stepper /
   .rex-infra-stage, from Ticket 6) verbatim for the pipeline, plus a new
   neutral pill variant (absent a real pipeline, no stage can honestly claim
   Active/Planned/Future). Horizontal activity row is a deliberate F12
   variant per the packet (this environment's feed reads left-to-right, not
   the standard vertical list every other environment uses). */
.rex-infra-stage-pill.is-neutral{background:rgba(120,140,170,.12);color:var(--muted)}
.rex-si-activity-row{display:flex;gap:10px;overflow-x:auto;margin-top:8px;padding-bottom:2px}
.rex-si-activity-row .rex-env-empty{flex:1 1 auto}