/* ═══════════════════════════════════════════════════════════════
   /delax-chrome.css — shared header + footer for every DELAX surface
   ═══════════════════════════════════════════════════════════════
   Loaded by workspace.html (and, from the next cycle, index.html, intel and
   analysis) so the four destinations cannot drift apart visually.

   DESIGN INTENT — instrument panel, not sci-fi terminal.
   The platform's claim is that it tells you what it does and does not know.
   Glow and neon read as "simulation"; restraint reads as "measurement". The
   amber brand mark stays for continuity; everything else is quiet, and colour
   is reserved for information that carries meaning — most of all the tier
   badge, which is the single most important thing on any page.

   Depends on the design tokens (--bg-*, --text-*, --amber, --cyan …) already
   declared by the host page's :root block.
   ═══════════════════════════════════════════════════════════════ */

/* ── LINK BASELINE ────────────────────────────────────────────────
   Every anchor gets an explicit colour. Without this, an <a> with no class
   falls back to the user-agent default (#0000EE) which is effectively
   invisible on a near-black background — the bug that buried the workspace
   header link and the dashboard CTA. Never remove this rule. */
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }

/* ═══ HEADER ═══ */
.dx-header{
  width:100%;
  position:sticky; top:0; z-index:600;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  padding:0 1.1rem;
}
.dx-header-row{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:1rem;
  min-height:52px; flex-wrap:wrap;
}

/* ── brand + page name ── */
.dx-brand{
  display:flex; align-items:baseline; gap:.45rem;
  text-decoration:none; color:var(--text-pri); flex-shrink:0;
}
.dx-brand:hover{ text-decoration:none; }
.dx-brand:hover .dx-wordmark{ color:#fff; }
.dx-mark{ color:var(--amber); font-size:.9rem; line-height:1; }
.dx-wordmark{
  font-family:var(--display); font-size:.98rem; letter-spacing:.07em;
  color:var(--text-pri); white-space:nowrap; transition:color .15s;
}
.dx-wordmark em{ font-style:normal; color:var(--amber); }

.dx-divider{ width:1px; align-self:stretch; background:var(--border-dim); margin:.7rem 0; }

.dx-page{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-sec); white-space:nowrap;
}

.dx-spacer{ flex:1 1 auto; min-width:0; }

/* ── STATE CHIP — which model am I reading? ──
   The most consequential element in the header. Structure name plus its
   evidence tier, together, because a structure name without its tier invites
   the reader to assume the numbers are all equally well grounded. */
.dx-state{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--bg-deep); border:1px solid var(--border-dim);
  border-radius:3px; padding:.3rem .55rem; min-width:0;
}
.dx-state-name{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.04em;
  color:var(--text-pri); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:11rem;
}
.dx-tier{
  font-family:var(--mono); font-size:.5rem; letter-spacing:.13em;
  text-transform:uppercase; padding:.14rem .38rem; border-radius:2px;
  white-space:nowrap; flex-shrink:0;
}
/* Fitted to observed data — the strongest claim the platform makes. */
.dx-tier[data-tier="EMPIRICAL"]{
  color:var(--green); background:rgba(0,230,160,.09); border:1px solid rgba(0,230,160,.28);
}
/* Not priced by any market — deliberately loud, because it is a caveat. */
.dx-tier[data-tier="UNPRICED"]{
  color:var(--amber); background:rgba(255,224,64,.09); border:1px solid rgba(255,224,64,.32);
}
.dx-tier[data-tier="MODELLED"],.dx-tier:not([data-tier]){
  color:var(--text-sec); background:transparent; border:1px solid var(--border-dim);
}

/* ── SCENARIO — segmented, not a dropdown ──
   All three states stay visible. A <select> hides two thirds of the model's
   range behind a click and makes the active one look like the only one. */
.dx-scenario{
  display:inline-flex; border:1px solid var(--border-dim);
  border-radius:3px; overflow:hidden; background:var(--bg-deep); flex-shrink:0;
}
.dx-scenario button{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.09em;
  text-transform:uppercase; background:transparent; color:var(--text-dim);
  border:none; border-right:1px solid var(--border-dim);
  padding:.36rem .6rem; cursor:pointer; transition:color .15s, background .15s;
}
.dx-scenario button:last-child{ border-right:none; }
.dx-scenario button:hover{ color:var(--text-pri); background:rgba(255,255,255,.03); }
.dx-scenario button[aria-pressed="true"]{ color:var(--bg-deep); background:var(--text-sec); font-weight:600; }
.dx-scenario button[aria-pressed="true"][data-scenario="pessimistic"]{ background:var(--red);   color:#fff; }
.dx-scenario button[aria-pressed="true"][data-scenario="optimistic"]{  background:var(--green); color:var(--bg-deep); }
.dx-scenario button[aria-pressed="true"][data-scenario="baseline"]{    background:var(--amber); color:var(--bg-deep); }
.dx-scenario button:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }

/* ── NAV ── */
.dx-nav{ display:flex; align-items:center; gap:.15rem; flex-shrink:0; }
.dx-nav a{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim);
  padding:.36rem .5rem; border-radius:2px; text-decoration:none; transition:color .15s, background .15s;
}
.dx-nav a:hover{ color:var(--text-pri); background:rgba(255,255,255,.04); text-decoration:none; }
.dx-nav a[aria-current="page"]{ color:var(--amber); }
/* Wrapper kept so nav labels stay addressable. Icons were tried and rejected —
   emoji rendered inconsistently across platforms and an abbreviation is a
   guess — so this carries no styling; the nav scrolls at narrow widths. */
.dx-nav-label{ display:inline; }

/* ── RESPONSIVE ──
   Below 860px the row wraps: identity on line one, model state on line two.
   Nothing is hidden behind a hamburger — the tier badge in particular must
   never be a click away. */
@media(max-width:860px){
  .dx-header-row{ padding:.5rem 0; gap:.6rem; }
  .dx-spacer{ flex-basis:100%; height:0; }
  .dx-page{ font-size:.55rem; letter-spacing:.14em; }
  .dx-state-name{ max-width:8rem; }
}
@media(max-width:520px){
  .dx-header{ padding:0 .8rem; }
  .dx-divider,.dx-page{ display:none; }
  .dx-nav a{ padding:.36rem .38rem; font-size:.56rem; }
  .dx-scenario button{ padding:.34rem .45rem; font-size:.54rem; }
}

/* ═══ FOOTER ═══
   Class names and structure mirror the dashboard exactly so the two pages
   read identically. */
.footer{
  border-top:1px solid var(--border-dim); background:var(--bg-panel);
  padding:1.5rem 1.25rem 2rem; margin-top:2.5rem;
  font-family:var(--mono); text-align:center;
}
.footer-line{ font-size:.66rem; line-height:1.75; color:var(--text-sec); margin-bottom:.4rem; }
.footer-line:last-child{ margin-bottom:0; }
.footer-brand{ font-size:.72rem; color:var(--text-pri); letter-spacing:.05em; }
.footer-brand strong{ color:var(--amber); font-weight:700; letter-spacing:.08em; }
.footer-meta{ font-size:.62rem; color:var(--text-dim); }
.footer-sep{ margin:0 .4rem; color:var(--border); }
.footer-dim{ font-size:.62rem; color:var(--text-dim); }
.footer-links{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:.35rem 1.15rem; margin:.85rem 0;
}
.footer-links a{
  font-size:.66rem; color:var(--cyan); text-decoration:none;
  letter-spacing:.03em; padding:.2rem 0;
}
.footer-links a:hover,.footer-links a:focus-visible{ text-decoration:underline; color:#fff; }
.footer-links a[aria-current="page"]{ color:var(--amber); }
.footer-legal{
  font-size:.6rem; color:var(--text-dim); line-height:1.8;
  max-width:56rem; margin:0 auto;
}
@media(max-width:600px){
  .footer{ padding:1.25rem .9rem 1.75rem; }
  .footer-links{ gap:.3rem .8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   STATE CHIP — SWITCHER MODE
   The dashboard's structure buttons and tier badge live INSIDE the chip, so the
   evidence grade is visible at the moment of choosing rather than in a separate
   bar below. #structureBtns and #tierBadge are populated by the host page.
   ═══════════════════════════════════════════════════════════════ */
.dx-state-switch{gap:.45rem;padding:.28rem .45rem}
.dx-state-label{
  font-family:var(--mono); font-size:.5rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim); white-space:nowrap;
}
.dx-state-switch #structureBtns{display:flex; gap:4px}
/* Touch targets: the structure buttons were 4px vertical padding — roughly 24px
   tall against a 44px minimum. Enforced here so the host page's inline styles
   (which set colour, not size) do not need editing. */
.dx-state-switch #structureBtns button{
  min-height:32px; padding:5px 12px !important;
}
@media(pointer:coarse){
  .dx-state-switch #structureBtns button{min-height:44px; padding:8px 14px !important}
}

/* ═══ CONTEXT STRIP — live readouts and page actions ═══ */
.dx-context{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.4rem 0 .5rem; border-top:1px solid var(--border-dim);
  font-family:var(--mono); font-size:.6rem; color:var(--text-sec);
}
.dx-context .dx-ctx-sep{color:var(--border); user-select:none}
.dx-context button{min-height:32px}
@media(pointer:coarse){ .dx-context button{min-height:44px} }

/* Live/cached status reduced to a dot plus label — the old pill was a full
   badge competing with the brand for attention. */
.dx-status{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap}
.dx-status-dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 6px rgba(0,230,160,.6); flex-shrink:0;
}
.dx-status[data-state="cached"] .dx-status-dot{background:var(--text-dim); box-shadow:none}

/* ═══ SUBTITLE ═══ */
.dx-subtitle{
  font-family:var(--mono); font-size:.56rem; color:var(--text-dim);
  letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:22rem;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   Verified by rendering at 1280 / 900 / 390px, not by reading the rules. The
   first draft passed a CSS review and still wrapped the nav onto a third line
   at 1280px and overflowed horizontally at 390px.

   Invariant: the tier badge is never hidden at any width. Everything else may
   shed — tier is the honesty system and must be on screen before any number.
   ═══════════════════════════════════════════════════════════════ */

/* Nothing in the header may exceed the viewport. */
.dx-header,.dx-header *{box-sizing:border-box}
.dx-header-row,.dx-context{min-width:0}
.dx-header-row>*,.dx-context>*{min-width:0}

/* Band 1 stays a single line: brand and page truncate before the nav wraps. */
.dx-header-row{flex-wrap:nowrap}
.dx-brand{flex-shrink:0}
.dx-page{overflow:hidden;text-overflow:ellipsis}
.dx-nav{flex-shrink:0}

/* Long tier text truncates rather than pushing the row wider. */
.dx-tier{overflow:hidden;text-overflow:ellipsis;max-width:16rem}

@media(max-width:1180px){
  .dx-subtitle{display:none}
  .dx-tier{max-width:12rem}
}

/* The clock is the least valuable thing in the instrument row — the WTI figure
   and its 7-day move carry the information. Dropping it first is what keeps the
   row to a single line at tablet widths instead of spilling to a third band. */
@media(max-width:1080px){
  .timestamp,.dx-ctx-sep{display:none}
  /* "RISK STRUCTURE" is a label for a control whose buttons already say what
     they are, and "LIVE MODEL" is a caption for a dot that already carries the
     meaning in colour. Both are the cheapest width to reclaim, and dropping
     them is what keeps the instrument row to one line on a tablet. */
  .dx-state-label{display:none}
  .dx-context .live-badge{font-size:0; gap:0}
  .dx-context .live-badge .live-dot{margin:0}
}

@media(max-width:860px){
  .dx-header{padding:0 .9rem}
  /* flex-shrink:0 above keeps the nav intact at wide widths; here it must be
     allowed to shrink or its scroll container cannot fit and the whole document
     overflows horizontally. */
  .dx-nav{flex-shrink:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dx-nav::-webkit-scrollbar{display:none}
  .dx-header-row{min-height:46px}
  .dx-context{gap:.45rem;font-size:.56rem;padding:.35rem 0 .45rem}
  /* The structure switcher takes the full width and scrolls rather than
     shrinking its buttons below a usable size. */
  .dx-state-switch{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* One break after the structure chip, then readouts and actions share the
     next line — actions pinned right rather than wrapping onto a row of their
     own. Applied from 860 down, not just on phones: the 520–860 band was
     otherwise the tallest layout on the site at 190px. */
  .dx-context{row-gap:.4rem}
  .dx-context>.dx-spacer{flex-basis:100%;height:0;order:0}
  .dx-context .live-badge,.dx-context .dx-wti{order:1}
  .dx-context .refresh-btn{order:2;margin-left:auto}
  .dx-context #settingsBtn{order:3}
  .dx-context .refresh-btn,.dx-context #settingsBtn{padding:.3rem .5rem}
  .dx-tier{max-width:none}
}

@media(max-width:520px){
  .dx-header{padding:0 .7rem}
  .dx-page,.dx-divider{display:none}
  .dx-wordmark{font-size:.86rem}
  /* Nav keeps WORDS. Icons were tried and rejected: the emoji set rendered
     inconsistently across platforms and an abbreviation is a guess, which is
     the wrong trade on a tool whose whole claim is clarity. The nav scrolls
     horizontally instead. */
  .dx-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dx-nav::-webkit-scrollbar{display:none}
  .dx-nav a{padding:.34rem .4rem;font-size:.54rem}
  .dx-ctx-hide-sm{display:none !important}
  .dx-state-label{display:none}
  .dx-context{font-size:.54rem}
}

/* ═══════════════════════════════════════════════════════════════
   SHARE ROW
   Three platform anchors render server-side (so they work without JS and are
   crawlable); the native-sheet and copy buttons are added by /delax-share.js.
   The native button stays hidden until the API is confirmed present — offering
   a share sheet that cannot open is worse than not offering one.
   ═══════════════════════════════════════════════════════════════ */
.dx-share{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:.85rem 0;margin:1.25rem 0;
  border-top:1px solid var(--border-dim);border-bottom:1px solid var(--border-dim)}
.dx-share-label{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);margin-right:.2rem}
.dx-share-btn{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
  background:transparent;border:1px solid var(--border-dim);color:var(--text-sec);
  padding:.4rem .7rem;border-radius:2px;cursor:pointer;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;
  min-height:34px;display:inline-flex;align-items:center;white-space:nowrap}
.dx-share-btn:hover{border-color:var(--cyan);color:var(--cyan);
  background:rgba(0,212,255,.07);text-decoration:none}
.dx-share-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.dx-share-btn[data-share="copy"]{border-color:var(--border);color:var(--text-pri)}
.dx-share-btn[data-share="copy"]:hover{border-color:var(--green);color:var(--green);
  background:rgba(0,230,160,.07)}
@media(pointer:coarse){ .dx-share-btn{min-height:44px;padding:.5rem .8rem} }
@media(max-width:420px){ .dx-share-label{flex-basis:100%;margin-bottom:.15rem} }

.dx-share-toast{position:fixed;bottom:1.25rem;left:50%;
  transform:translateX(-50%) translateY(140%);
  background:var(--bg-card);border:1px solid var(--border);
  border-left:3px solid var(--green);color:var(--text-pri);
  font-family:var(--mono);font-size:.66rem;line-height:1.5;
  padding:.7rem 1rem;border-radius:2px;z-index:1200;max-width:min(90vw,400px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.dx-share-toast.show{transform:translateX(-50%) translateY(0)}