/* Glaux control center: page layout and dashboard glue only (docs/M16_SPEC.md A1).
   Components come from the design system: /static/glx/glx.css (master copy), /static/glx/glx-theme-light.css
   (Dawn) and /static/css/glx-extensions.css (real states and the few missing components). Every color, font,
   radius and motion value is a --glx- token: no literal colors and no font names here. */

html { background: var(--glx-bg-scene); }
html, body { min-height: 100%; }
body.glx { overflow-x: hidden; }
a { color: var(--glx-text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--glx-color-ember-line); }
[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; }

/* ------------------------------------------------------------ shell: side menu + main column */
/* The side menu is a drawer: hidden so the pages get the full width, it slides out over the page when the
   pointer reaches the left edge (.side-edge) or the menu button, and back after it leaves. Pinned, it is docked
   in its own column. Phones use the bottom bar instead. */
.shell { min-height: 100vh; }
.glx-side.sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: var(--glx-z-overlay); border-left: 0; overflow-y: auto; transform: translateX(calc(-100% - 32px)); visibility: hidden; transition: transform var(--glx-duration-panel) var(--glx-ease-out), visibility 0s linear var(--glx-duration-panel), box-shadow var(--glx-duration-panel) var(--glx-ease-out); }
.shell.side-open .glx-side.sidebar { transform: none; visibility: visible; transition: transform var(--glx-duration-panel) var(--glx-ease-out), visibility 0s, box-shadow var(--glx-duration-panel) var(--glx-ease-out); box-shadow: var(--glx-shadow-lg); }
.side-edge { position: fixed; left: 0; top: 0; bottom: 0; width: 14px; z-index: calc(var(--glx-z-overlay) - 1); }
.shell.side-pinned { display: grid; grid-template-columns: var(--glx-layout-sidebar) minmax(0, 1fr); }
.shell.side-pinned .glx-side.sidebar { position: sticky; transform: none; visibility: visible; box-shadow: none; transition: none; grid-column: 1; grid-row: 1; }
.shell.side-pinned .main { grid-column: 2; grid-row: 1; }
.shell.side-pinned .side-edge, .shell.side-pinned .menu-btn { display: none; }
.glx-side__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--glx-space-2); }
.side-pin { width: 32px; height: 32px; }
.side-pin svg { width: 16px; height: 16px; }
.side-pin[aria-pressed="true"] { color: var(--glx-color-ember-deep); background: var(--glx-color-ember-soft); }
.menu-btn { flex: none; margin-left: calc(-1 * var(--glx-space-3)); }
.menu-btn svg { width: 20px; height: 20px; }
.glx-side .brand { display: flex; align-items: center; }
.glx-side .brand img { height: 32px; width: auto; display: block; }
.sidebar .nav { display: grid; gap: var(--glx-space-1); }
.sidebar .nav-account { margin-top: var(--glx-space-2); }
/* the foot lines up with the menu links: the side's own 14px inset on both sides, controls never wider than it */
.sidebar .glx-side__foot { padding: var(--glx-space-4) 0 0; min-width: 0; }
.sidebar .glx-side__foot .glx-seg { width: 100%; min-width: 0; box-sizing: border-box; }
.sidebar .glx-side__foot .glx-theme .glx-seg__item { padding: 0 6px; gap: 4px; }
.sidebar .glx-side__foot .glx-label { margin-top: var(--glx-space-1); }
.sidebar .glx-side__foot .glx-seg--ui:not(.glx-theme) .glx-seg__item { flex: 1; }
.sidebar .glx-switch { justify-self: start; border: 0; background: none; padding: 0; height: auto; }
.sidebar .signout { justify-self: start; }
.sidebar .credit { text-decoration: underline; text-decoration-color: var(--glx-line-strong); }

.main { min-width: 0; padding: 0 var(--glx-layout-margin) var(--glx-space-10); }
.demo-banner { margin-top: var(--glx-space-4); }
.demo-banner > span { flex: 1 1 12em; min-width: 0; }
.demo-banner .glx-link { margin-left: auto; white-space: nowrap; color: var(--glx-text-primary); }

.topbar { position: sticky; top: var(--glx-space-3); z-index: var(--glx-z-sticky); margin: var(--glx-space-4) 0 var(--glx-space-6); height: auto; min-height: var(--glx-layout-topbar); padding: var(--glx-space-3) var(--glx-space-3) var(--glx-space-3) var(--glx-space-6); flex-wrap: wrap; row-gap: var(--glx-space-2); overflow: visible; }
.topbar .glx-topbar__right { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--glx-space-2); }
.kill-btn { width: 32px; padding: 0; }
.topbar { gap: var(--glx-space-2); }
.topbar .glx-topbar__title { margin-right: var(--glx-space-2); }
.topbar .glx-topbar__right { gap: var(--glx-space-2); }
.topbar .glx-status, .topbar .glx-status .glx-clock { font-size: 11px; }
.topbar .glx-status { padding: 0 var(--glx-space-2) 0 10px; gap: 4px; }
.topbar .glx-topbar__right { gap: 6px; }
.phone-brand { display: none; }
.title-accent { font: inherit; }
@media (max-width: 1599px) {
  .glx-switch .long { display: none; }
  .topbar .glx-topbar__title { font-size: 26px; }
  .topbar .controls-bar .glx-btn--secondary { --h: 32px; padding: 0 var(--glx-space-4); font-size: 13px; }
  /* status in two compact lines: phase and countdown over the ET / PT time */
  .topbar .glx-status { display: inline-grid; grid-template-columns: auto auto; column-gap: 4px; align-content: center; height: 36px; line-height: 13px; border-radius: var(--glx-radius-input); }
  .topbar .glx-status .when { grid-column: 1 / -1; font-size: 10px; }
}
.topbar-pills { display: inline-flex; gap: var(--glx-space-2); align-items: center; }
.topbar .glx-topbar__right { min-width: 0; }
.controls-bar { display: inline-flex; gap: var(--glx-space-2); align-items: center; }
.controls-bar .glx-chip svg { width: 14px; height: 14px; }
.page-foot { margin-top: var(--glx-space-8); }

/* ------------------------------------------------------------ page grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--glx-layout-gutter); }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
.stack { display: grid; gap: var(--glx-layout-gutter); align-content: start; }
.row { display: flex; gap: var(--glx-space-3); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt { margin-top: var(--glx-space-4); }
.section { margin-bottom: var(--glx-layout-gutter); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--glx-layout-gutter); margin-bottom: var(--glx-layout-gutter); }
.kpis:has(+ .glx-asof) { margin-bottom: 0; }
.kpis--sm { gap: var(--glx-space-4); }
/* the change figure keeps its words; the sparkline gives way (down to 48px), then drops under it */
.glx-kpi__row { flex-wrap: wrap; row-gap: var(--glx-space-2); }
.glx-kpi__row > span:has(> .glx-spark) { flex: 0 1 120px; min-width: 48px; display: block; }
.glx-kpi__row .glx-spark--wide { width: 100%; }
.kpis + .glx-asof { margin: var(--glx-space-3) 0 var(--glx-layout-gutter); }
.glx-panel.is-stale { border-color: var(--glx-color-warning); }
.glx-panel.is-accent { border-color: var(--glx-color-ember-line); }
.panel-fill { display: flex; flex-direction: column; }
.panel-fill .chart { flex: 1 0 auto; }  /* grows to fill a tall row, never below its own height (phones) */
.glx-table td.chips-cell { white-space: normal; min-width: 140px; line-height: 2; }
/* panel heads: a long title, its caption and a pill wrap inside the card instead of spilling out of it */
.glx-panel__head { flex-wrap: wrap; row-gap: var(--glx-space-2); }
.glx-panel__title { flex-wrap: wrap; white-space: normal; min-width: 0; row-gap: 2px; }
.glx-panel__title .glx-label { white-space: nowrap; }
.glx-feed__item > div { min-width: 0; }
.glx-feed__title { overflow-wrap: anywhere; }
.banners { display: flex; flex-wrap: wrap; gap: var(--glx-space-2); }
.gain { color: var(--glx-color-gain); }
.loss { color: var(--glx-color-loss); }
.dim { color: var(--glx-text-secondary); }
.flash-up { animation: glx-tick-up var(--glx-duration-tick) var(--glx-ease-out); }
.flash-down { animation: glx-tick-down var(--glx-duration-tick) var(--glx-ease-out); }
.empty { color: var(--glx-text-secondary); font-size: var(--glx-type-body-sm-size); padding: var(--glx-space-3) 0; display: flex; gap: var(--glx-space-2); align-items: baseline; }
.empty .dash { font-family: var(--glx-font-mono); font-size: 18px; color: var(--glx-text-disabled); }
.meta { font-size: var(--glx-type-caption-size); line-height: var(--glx-type-caption-line); color: var(--glx-text-secondary); display: flex; gap: var(--glx-space-2); align-items: center; flex-wrap: wrap; }
.meta .src::before { content: "· "; }

/* ------------------------------------------------------------ charts */
.chart { width: 100%; height: 300px; position: relative; }
.chart.tall { height: 340px; }
.chart.short { height: 220px; }
.chart.mini { height: 120px; }
/* donut beside its legend; in a narrow card the legend goes under it instead of out of the card */
.donut-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--glx-space-4); align-items: center; }
.donut-wrap > :first-child { flex: 0 0 148px; }
.donut-wrap > .glx-legend-list { flex: 1 1 190px; min-width: 0; }
.donut-wrap .chart { height: 148px; }
.donut-center .glx-kpi-m { font-size: 18px; line-height: 24px; }
.catalysts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--glx-space-8); }
.catalysts .glx-feed__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.catalysts:not(:has(.glx-feed__item ~ .glx-feed__item)) { grid-template-columns: 1fr; }  /* one event: the whole row */
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center .glx-kpi-m { display: block; }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--glx-space-2) * -1); }
.glx-table .sym-sub { color: var(--glx-text-secondary); font-weight: 400; margin-left: var(--glx-space-2); }
.glx-table td .glx-trade { min-width: 150px; }
.glx-table td.wrap { white-space: normal; }

/* ------------------------------------------------------------ feed, approvals, catalysts */
.feed-scroll { max-height: 520px; overflow-y: auto; }
.glx-feed__time span { display: block; }
.approval { display: grid; grid-template-columns: 1fr auto; gap: var(--glx-space-2) var(--glx-space-4); padding: var(--glx-space-3) 0; border-bottom: 1px solid var(--glx-line-soft); }
.approval:last-child { border-bottom: 0; }
.approval .actions { display: flex; gap: var(--glx-space-2); align-items: center; flex-wrap: wrap; }
.approval .meta b { color: var(--glx-text-primary); font-weight: 500; }

/* ------------------------------------------------------------ strategies, research, risk, system */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--glx-layout-gutter); }
.pipeline { display: flex; gap: var(--glx-space-1); }
.pipeline span { flex: 1; text-align: center; font: 600 10px/1.2 var(--glx-font-ui); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 2px; border-radius: var(--glx-radius-sm); background: var(--glx-line-soft); color: var(--glx-text-secondary); }
.pipeline span.done { background: var(--glx-color-ember-soft); color: var(--glx-color-ember-deep); }
.pipeline span.now { background: var(--glx-color-ember); color: var(--glx-color-on-ember); }
.stages { display: flex; gap: 6px; flex-wrap: wrap; }
.stage { font: 600 11px/1 var(--glx-font-mono); padding: 5px 8px; border-radius: var(--glx-radius-sm); text-decoration: none; }
.stage.pass { background: var(--glx-color-gain-soft); color: var(--glx-color-gain); }
.stage.fail { background: var(--glx-color-loss-soft); color: var(--glx-color-loss); }
.stage.none { background: var(--glx-line-soft); color: var(--glx-text-secondary); }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--glx-space-3); margin: 0; }
.kv div { display: grid; gap: 2px; min-width: 0; }
.kv dt, .kv .k { font: var(--glx-type-label-weight) 10.5px/16px var(--glx-font-ui); letter-spacing: var(--glx-type-label-track); text-transform: uppercase; color: var(--glx-text-secondary); }
.kv dd, .kv .v { margin: 0; font: 500 15px/22px var(--glx-font-mono); font-variant-numeric: tabular-nums; }
.kv.kv-greeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv.kv-big dd { font-size: var(--glx-type-kpi-m-size); line-height: var(--glx-type-kpi-m-line); }
.funnel { display: grid; gap: var(--glx-space-2); }
.funnel .step { display: grid; grid-template-columns: 100px 1fr 60px; gap: 10px; align-items: center; font-size: var(--glx-type-body-sm-size); }
.funnel .bar { height: 22px; border-radius: var(--glx-radius-sm); background: var(--glx-chart-1); min-width: 4px; transition: width var(--glx-duration-panel) var(--glx-ease-out); }
.filters { display: flex; gap: var(--glx-space-2); flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: var(--glx-space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--glx-space-4); }
.progress { height: 8px; border-radius: 999px; background: var(--glx-color-smoke); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--glx-color-info); border-radius: 999px; transition: width var(--glx-duration-panel) var(--glx-ease-out); }

/* ------------------------------------------------------------ tooltips, hold-to-confirm, toasts */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: var(--glx-z-tooltip);
  background: var(--glx-glass-3-fallback); color: var(--glx-text-primary); border: 1px solid var(--glx-glass-3-border); padding: 8px 10px; border-radius: var(--glx-radius-sm);
  font: 400 12px/16px var(--glx-font-ui); letter-spacing: 0; text-transform: none; white-space: pre; box-shadow: var(--glx-shadow-md); pointer-events: none;
}
.hold { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold::before { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--hold, 0)); background: currentColor; opacity: 0.22; pointer-events: none; }
.hold.held { box-shadow: var(--glx-focus-ring); }
.toasts { position: fixed; right: var(--glx-space-4); bottom: var(--glx-space-4); z-index: var(--glx-z-toast); display: grid; gap: var(--glx-space-2); max-width: min(380px, calc(100vw - 32px)); }
.toast { width: auto; font-size: var(--glx-type-body-sm-size); }
.toast.ok { border-color: var(--glx-color-gain); }
.toast.error { border-color: var(--glx-color-loss); }

/* ------------------------------------------------------------ phone bottom bar and More sheet */
.bottombar, .sheet, .sheet-backdrop { display: none; }
@media (display-mode: standalone) {
  .main { padding-top: env(safe-area-inset-top); }
  .sidebar { padding-top: calc(var(--glx-space-5) + env(safe-area-inset-top)); }
}

/* ------------------------------------------------------------ responsive (design-system breakpoints) */
@media (max-width: 1279px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 1023px) {
  .grid > [class*="c"] { grid-column: span 6; }
  .grid > .c12, .grid > .c8, .grid > .c9, .grid > .wide { grid-column: span 12; }
}
@media (max-width: 767px) {
  .grid > [class*="c"] { grid-column: span 12; }
}
@media (max-width: 599px) {
  .shell, .shell.side-pinned { display: block; }
  .side-edge, .menu-btn { display: none !important; }
  .sidebar { display: none !important; }
  .main { padding: 0 var(--glx-layout-margin) calc(110px + env(safe-area-inset-bottom)); }
  .phone-brand { display: flex; align-items: center; justify-content: space-between; padding: var(--glx-space-4) 0 var(--glx-space-1); }
  .phone-brand img { height: 32px; width: auto; }
  .phone-brand__pills { display: inline-flex; gap: var(--glx-space-2); }
  .topbar .top-mode { display: none; }
  .topbar { position: relative; top: 0; margin: var(--glx-space-4) 0 var(--glx-space-5); padding: 0; gap: var(--glx-space-3); flex-wrap: wrap; height: auto; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar .glx-topbar__title { width: 100%; font-size: var(--glx-type-display-m-size); line-height: var(--glx-type-display-m-line); }
  .topbar .title-accent { font-style: italic; color: var(--glx-color-ember-deep); }
  .topbar .glx-topbar__right { margin-left: 0; width: 100%; justify-content: flex-start; }
  .topbar .glx-status { display: inline-block; white-space: normal; height: auto; min-height: 32px; padding: 7px var(--glx-space-3); line-height: 1.5; max-width: 100%; border-radius: var(--glx-radius-input); }
  .topbar .glx-status .glx-clock { display: inline-flex; }
  .topbar .glx-status > * + * { margin-left: 4px; }  /* inline-block: no flex gap between the parts */
  .topbar .glx-status .when { white-space: nowrap; }
  .grid { grid-template-columns: 1fr; gap: var(--glx-space-4); }
  .grid > [class*="c"] { grid-column: 1 / -1; }
  .stack { gap: var(--glx-space-4); }
  .kpis { grid-template-columns: 1fr 1fr; gap: var(--glx-space-3); }
  .kpis > .kpi-hero { grid-column: 1 / -1; }
  .glx-kpi { padding: var(--glx-space-4); min-height: 0; }
  .glx-kpi .glx-kpi-l { font-size: var(--glx-type-kpi-m-size); line-height: var(--glx-type-kpi-m-line); }
  .kpis > .kpi-hero .glx-kpi-l { font-size: var(--glx-type-kpi-l-size); line-height: var(--glx-type-kpi-l-line); }
  .glx-kpi:not(.kpi-hero) .glx-spark, .glx-kpi__top .glx-kpi__meta { display: none; }
  .cards { grid-template-columns: 1fr; }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart { height: 240px; } .chart.tall { height: 260px; }
  .glx-panel { padding: var(--glx-space-4); }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--glx-z-nav); height: auto; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: var(--glx-z-overlay); background: var(--glx-scrim); }
  .sheet { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--glx-z-dialog); gap: 14px; max-height: 80vh; overflow-y: auto; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .sheet-links { display: grid; gap: 2px; }
  .sheet-settings { display: grid; gap: 10px; border-top: 1px solid var(--glx-line); padding-top: var(--glx-space-3); }
  .sheet-settings .glx-seg--ui:not(.glx-theme) .glx-seg__item { flex: 1; }
  .sheet-settings .glx-switch { border: 0; background: none; padding: 0; justify-self: start; }
  .sheet-account { display: flex; justify-content: space-between; align-items: center; gap: var(--glx-space-3); }
  .toasts { left: var(--glx-space-3); right: var(--glx-space-3); bottom: calc(96px + env(safe-area-inset-bottom)); max-width: none; }
  .controls-bar { flex-wrap: wrap; }
  .approval { grid-template-columns: 1fr; }
  .approval > * { min-width: 0; }
  .catalysts { grid-template-columns: 1fr; }
  /* tables become cards */
  table.cards-on-phone thead { display: none; }
  table.cards-on-phone, table.cards-on-phone tbody, table.cards-on-phone tr, table.cards-on-phone td { display: block; width: 100%; }
  table.cards-on-phone tr { padding: 10px var(--glx-space-1); border-bottom: 1px solid var(--glx-line); display: grid; grid-template-columns: 1fr 1fr; gap: var(--glx-space-1) var(--glx-space-3); }
  table.cards-on-phone td { border: 0; padding: 2px var(--glx-space-1); white-space: normal; text-align: left !important; height: auto; }
  table.cards-on-phone td::before { content: attr(data-label); display: block; font: 600 10px/14px var(--glx-font-ui); letter-spacing: var(--glx-type-label-track); text-transform: uppercase; color: var(--glx-text-secondary); }
  table.cards-on-phone td.full { grid-column: 1 / -1; }
  table.cards-on-phone td:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glx-side.sidebar, .shell.side-open .glx-side.sidebar { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glx-glass-1, .glx-glass-2, .glx-glass-3 { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ------------------------------------------------------------ positions (reference 03) */
.tabs-head { flex-wrap: wrap; row-gap: var(--glx-space-3); }
.tabs-head .glx-tabs { border-bottom: 0; }
.orders-unit { font-size: 0.6em; }
.positions-table tbody { border: 0; }
.positions-table td .exp { vertical-align: middle; }
.positions-table tr.is-child td[colspan] { padding: var(--glx-space-3) var(--glx-space-4) var(--glx-space-4) 40px; }
.bracket-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--glx-space-6); align-items: center; }
.sub-title { margin: var(--glx-space-4) 0 var(--glx-space-2); }
.sub-title:first-child { margin-top: 0; }
@media (max-width: 599px) {
  .bracket-row { grid-template-columns: 1fr; }
  .positions-table th:nth-child(2), .positions-table td:nth-child(2), .positions-table th:nth-child(6), .positions-table td:nth-child(6), .positions-table th:nth-child(8), .positions-table td:nth-child(8) { display: none; }
}
.glx-status .when::before { content: "· "; }
@media (min-width: 600px) and (max-width: 1599px) { .glx-status .when::before { content: none; } }
.kv dd.glx-caption { font: 400 var(--glx-type-caption-size)/var(--glx-type-caption-line) var(--glx-font-ui); color: var(--glx-text-secondary); }