/* =========================================================================
   TZONE.IN v2 — terminal design system (mockup)
   Dark-first. Light is a token swap. Dense, monospace-numeric, hairline rules.
   ========================================================================= */

/* The UA rule for this is a bare attribute selector, so any class setting
   `display` outruns it — a hidden .panel (display:flex) stayed visible. */
[hidden] { display: none !important; }

:root {
  /* ---- surfaces ---- */
  --bg:        #06080C;
  --deep:      #04060A;
  --panel:     #0B0F16;
  --panel2:    #0F141D;
  --raised:    #131A24;
  --line:      #1A2230;
  --line2:     #232C3C;
  --line3:     #2E3949;

  /* ---- text ---- */
  --ink:       #DCE3EC;
  --ink2:      #AEB8C6;
  --muted:     #6F7C8E;
  --faint:     #4C5768;

  /* ---- brand ---- */
  --gold:      #C9A227;
  --gold-hi:   #E8C64F;
  --gold-dim:  rgba(201,162,39,.14);

  /* ---- semantic (zones) ---- */
  --bull:      #3DFFA0;
  --side:      #FFE94D;
  --bear:      #FF5C5C;
  --cyan:      #5DD3FF;
  --orange:    #FFB347;
  --pink:      #FF6FD8;
  --nifty:     #5AB0FF;
  --emerald:   #31C48D;
  --on-accent: #05070B;

  --bull-bg:   rgba(61,255,160,.10);
  --side-bg:   rgba(255,233,77,.10);
  --bear-bg:   rgba(255,92,92,.10);
  --pink-bg:   rgba(255,111,216,.10);
  --cyan-bg:   rgba(93,211,255,.10);
  --orange-bg: rgba(255,179,71,.10);

  /* ---- type ---- */
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
          "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;

  /* ---- metrics ---- */
  --rail-w:    228px;
  --rail-w-sm: 52px;
  --top-h:     38px;
  --status-h:  26px;
  --row-h:     26px;
}

html[data-theme="light"] {
  --bg:        #EDEFF3;
  --deep:      #E2E6EC;
  --panel:     #FFFFFF;
  --panel2:    #F6F8FA;
  --raised:    #FFFFFF;
  --line:      #D6DCE5;
  --line2:     #C4CCD8;
  --line3:     #AEB8C6;

  --ink:       #0C1119;
  --ink2:      #2C3644;
  --muted:     #5A6675;
  --faint:     #8B95A4;

  --gold:      #9A7B10;
  --gold-hi:   #7A6008;
  --gold-dim:  rgba(154,123,16,.12);

  --bull:      #0B8F55;
  --side:      #B87708;
  --bear:      #CE2F33;
  --cyan:      #1077A8;
  --orange:    #B85E06;
  --pink:      #A31C8B;
  --nifty:     #1B6FBE;
  --emerald:   #0E7A55;
  --on-accent: #FFFFFF;

  --bull-bg:   rgba(11,143,85,.10);
  --side-bg:   rgba(184,119,8,.10);
  --bear-bg:   rgba(206,47,51,.10);
  --pink-bg:   rgba(163,28,139,.10);
  --cyan-bg:   rgba(16,119,168,.10);
  --orange-bg: rgba(184,94,6,.10);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.45 var(--mono);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::selection { background: var(--gold); color: var(--on-accent); }

/* thin terminal scrollbars */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line2); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--line3); background-clip: content-box; }

a { color: inherit; text-decoration: none; }

/* =========================================================================
   SHELL
   ========================================================================= */
.shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--top-h) 1fr var(--status-h);
  grid-template-areas: "top top" "rail main" "status status";
  height: 100vh;
  transition: grid-template-columns .12s ease;
}
.shell[data-rail="collapsed"] { grid-template-columns: var(--rail-w-sm) 1fr; }

/* ---- top bar ---- */
.top {
  grid-area: top;
  display: flex; align-items: center; gap: 0;
  background: var(--deep);
  border-bottom: 1px solid var(--line);
  padding: 0 10px 0 0;
  z-index: 40;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  width: var(--rail-w); flex: none;
  padding-left: 12px;
  border-right: 1px solid var(--line);
  height: 100%;
  transition: width .12s ease;
}
.shell[data-rail="collapsed"] .brand { width: var(--rail-w-sm); padding-left: 0; justify-content: center; }
.shell[data-rail="collapsed"] .brand .brand-txt { display: none; }
.brand-mark { width: 4px; height: 15px; background: var(--gold); flex: none; }
.brand-txt { font-weight: 700; letter-spacing: 2.4px; font-size: 12px; }
.brand-txt em { font-style: normal; color: var(--gold); }
.brand-ver { color: var(--faint); font-size: 9.5px; letter-spacing: .6px; margin-left: 2px; }

.top-ctx {
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px; min-width: 0; flex: 1;
}
.top-ctx .crumb { color: var(--muted); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; }
.top-ctx .crumb b { color: var(--ink); font-weight: 700; }
.top-ctx .sep { color: var(--faint); }

.top-right { display: flex; align-items: center; gap: 6px; flex: none; }

.tbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  background: transparent; color: var(--ink2);
  border: 1px solid var(--line2);
  font: 600 10.5px/1 var(--mono); letter-spacing: .8px;
  cursor: pointer; white-space: nowrap;
}
.tbtn:hover { border-color: var(--gold); color: var(--gold-hi); }
.tbtn.is-on { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-hi); }
.tbtn .k { color: var(--faint); font-size: 9.5px; }

.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 9px; height: 24px;
  border: 1px solid var(--line2);
  color: var(--muted); font-size: 10.5px; letter-spacing: .6px;
}
.stamp b { color: var(--gold); font-weight: 700; }
.dot-live {
  width: 6px; height: 6px; background: var(--bull); flex: none;
  box-shadow: 0 0 0 2px rgba(61,255,160,.16);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- rail ---- */
.rail {
  grid-area: rail;
  background: var(--deep);
  border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
  padding: 6px 0 12px;
}
.rail-search {
  margin: 4px 8px 8px; height: 26px;
  display: flex; align-items: center; gap: 7px;
  padding: 0 8px;
  border: 1px solid var(--line2); background: var(--panel);
  color: var(--muted); font-size: 10.5px; cursor: pointer;
}
.rail-search:hover { border-color: var(--gold); color: var(--ink2); }
.rail-search .kbd { margin-left: auto; }
.shell[data-rail="collapsed"] .rail-search { justify-content: center; padding: 0; margin: 4px 8px; }
.shell[data-rail="collapsed"] .rail-search span:not(.ico) { display: none; }

.grp { margin-top: 2px; }
.grp-hd {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 9px;
  color: var(--gold); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.7px; text-transform: uppercase;
  cursor: pointer; user-select: none;
}
.grp-hd:hover { background: rgba(201,162,39,.06); }
.grp-hd .chev { font-size: 8px; width: 8px; transition: transform .12s ease; color: var(--faint); }
.grp.open > .grp-hd .chev { transform: rotate(90deg); }
.grp-hd .n { margin-left: auto; color: var(--faint); font-size: 9px; letter-spacing: .5px; }
.grp-hd .fk { color: var(--faint); font-size: 9px; font-weight: 600; }
.grp-body { display: none; padding-bottom: 3px; }
.grp.open > .grp-body { display: block; }

.nav {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 10px 3px 22px;
  color: var(--ink2); font-size: 11.5px; cursor: pointer;
  border-left: 2px solid transparent;
  white-space: nowrap;
}
.nav:hover { background: rgba(255,255,255,.04); color: var(--ink); }
html[data-theme="light"] .nav:hover { background: rgba(0,0,0,.045); }
.nav.active {
  background: var(--gold-dim); border-left-color: var(--gold);
  color: var(--ink); font-weight: 700;
}
.nav .ico { width: 12px; text-align: center; flex: none; font-size: 11px; opacity: .9; }
.nav .tag { margin-left: auto; font-size: 9px; color: var(--faint); letter-spacing: .5px; }

.shell[data-rail="collapsed"] .grp-hd { justify-content: center; padding: 6px 0; }
.shell[data-rail="collapsed"] .grp-hd .chev,
.shell[data-rail="collapsed"] .grp-hd .n,
.shell[data-rail="collapsed"] .grp-hd .fk,
.shell[data-rail="collapsed"] .grp-hd .lbl { display: none; }
.shell[data-rail="collapsed"] .grp-hd::after { content: attr(data-abbr); font-size: 9px; }
.shell[data-rail="collapsed"] .grp-body { display: block; }
.shell[data-rail="collapsed"] .nav { justify-content: center; padding: 4px 0; }
.shell[data-rail="collapsed"] .nav .lbl,
.shell[data-rail="collapsed"] .nav .tag { display: none; }

.rail-foot { margin: 10px 8px 0; padding-top: 8px; border-top: 1px solid var(--line); }
.shell[data-rail="collapsed"] .rail-foot { display: none; }
.rail-user {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  cursor: pointer; border: 1px solid transparent;
}
.rail-user:hover { border-color: var(--line2); }
.avatar {
  width: 20px; height: 20px; flex: none;
  background: var(--gold); color: var(--on-accent);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
}
.rail-user .who { min-width: 0; }
.rail-user .who b { display: block; font-size: 11px; font-weight: 600; }
.rail-user .who span { display: block; font-size: 9px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }

/* ---- main ---- */
.main { grid-area: main; overflow-y: auto; overflow-x: hidden; }
.main-pad { padding: 12px 14px 40px; }

/* ---- status bar ---- */
.status {
  grid-area: status;
  display: flex; align-items: center; gap: 0;
  background: var(--deep); border-top: 1px solid var(--line);
  font-size: 10px; letter-spacing: .7px; color: var(--muted);
  padding: 0 10px;
}
.status .seg { display: flex; align-items: center; gap: 6px; padding: 0 11px; border-right: 1px solid var(--line); height: 100%; }
.status .seg:first-child { padding-left: 0; }
.status .seg b { color: var(--ink2); font-weight: 600; }
.status .seg.ok b { color: var(--bull); }
.status .push { margin-left: auto; }
.status .hint { padding: 0 9px; }
.status .hint em { font-style: normal; color: var(--faint); }

.kbd {
  display: inline-block; padding: 1px 5px;
  border: 1px solid var(--line2); background: var(--panel2);
  color: var(--muted); font: 600 9.5px/1.5 var(--mono);
}

/* =========================================================================
   COMMAND PALETTE
   ========================================================================= */
.palette-bg {
  position: fixed; inset: 0; background: rgba(2,4,8,.72);
  backdrop-filter: blur(2px); z-index: 100; display: none;
}
html[data-theme="light"] .palette-bg { background: rgba(60,70,85,.42); }
.palette-bg.show { display: block; }
.palette {
  position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(620px, 92vw);
  background: var(--panel); border: 1px solid var(--line3);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.palette input {
  width: 100%; height: 40px; padding: 0 14px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: 13px var(--mono); outline: none;
}
.palette input::placeholder { color: var(--faint); }
.pal-list { max-height: 46vh; overflow-y: auto; padding: 4px 0; }
.pal-sec { padding: 6px 14px 3px; color: var(--gold); font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; }
.pal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px; cursor: pointer; font-size: 12px;
}
.pal-row:hover, .pal-row.sel { background: var(--gold-dim); }
.pal-row .ico { width: 12px; color: var(--muted); }
.pal-row .cat { margin-left: auto; color: var(--faint); font-size: 9.5px; letter-spacing: 1px; }
.pal-foot {
  display: flex; gap: 14px; padding: 6px 14px;
  border-top: 1px solid var(--line); color: var(--faint); font-size: 9.5px;
}

/* =========================================================================
   PAGE HEADER + CONTROL BAR
   ========================================================================= */
.phead { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.ptitle { font-size: 15px; font-weight: 700; letter-spacing: .4px; }
.ptitle .code { color: var(--gold); }
/* The list switcher stands where the list's name used to be printed, so it is
   styled as part of the heading rather than as a control sitting next to one.
   It keeps .sel's focus ring, which is the only part that must still read as
   something you can operate. */
.ptitle .lsel {
  background: none; border: 0; height: auto; padding: 0 15px 0 6px;
  /* A select is as wide as its widest option, which would leave the arrow
     stranded far from a short list name. Where this is supported the control
     hugs the name actually shown; where it is not, the old behaviour stands. */
  field-sizing: content;
  color: var(--gold); font: inherit; letter-spacing: inherit;
  appearance: none; max-width: 320px; text-overflow: ellipsis;
}
.ptitle .lsel:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.ptitle .lsel:hover { color: var(--gold-hi); }
.ptitle .lsel option { font: 11.5px var(--mono); letter-spacing: 0; color: var(--ink);
                       background: var(--panel2); }
/* The arrow the border used to imply. */
.ptitle .lwrap { position: relative; display: inline-block; }
.ptitle .lwrap::after {
  content: "▾"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); color: var(--gold); font-size: 10px; pointer-events: none;
}
.psub { color: var(--muted); font-size: 11px; }
.psub b { color: var(--ink2); }

.ctlbar {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--panel);
  margin-bottom: 12px;
}
.ctl {
  display: flex; align-items: center; gap: 8px;
  padding: 0 11px; height: 30px;
  border-right: 1px solid var(--line);
}
.ctl:last-child { border-right: 0; }
.ctl > label { color: var(--muted); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; }
.ctl.push { margin-left: auto; border-right: 0; border-left: 1px solid var(--line); }

.sel {
  background: var(--panel2); border: 1px solid var(--line2);
  color: var(--ink); font: 11.5px var(--mono); height: 21px; padding: 0 6px;
  outline: none; cursor: pointer;
}
.sel:focus { border-color: var(--gold); }
.inp {
  background: var(--panel2); border: 1px solid var(--line2);
  color: var(--ink); font: 11.5px var(--mono); height: 21px; padding: 0 7px; outline: none;
}
.inp:focus { border-color: var(--gold); }
.inp::placeholder { color: var(--faint); }

.seg-ctl { display: inline-flex; border: 1px solid var(--line2); }
.seg-ctl button {
  background: transparent; border: 0; border-right: 1px solid var(--line2);
  color: var(--muted); font: 600 10.5px var(--mono); letter-spacing: .8px;
  height: 21px; padding: 0 8px; cursor: pointer;
}
.seg-ctl button:last-child { border-right: 0; }
.seg-ctl button:hover { color: var(--ink); }
.seg-ctl button.on { background: var(--gold); color: var(--on-accent); font-weight: 700; }

/* =========================================================================
   PANELS
   ========================================================================= */
.grid { display: grid; gap: 10px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.g-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1180px) { .g2, .g3, .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0;
  position: relative;            /* the column panel hangs off this */
}
.panel-hd {
  display: flex; align-items: center; gap: 9px;
  height: 26px; padding: 0 10px;
  border-bottom: 1px solid var(--line); background: var(--panel2);
}
.panel-hd h3 {
  margin: 0; font-size: 10px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink2);
}
.panel-hd .sub { color: var(--faint); font-size: 9.5px; letter-spacing: .6px; }
.panel-hd .rt { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* The column panel hangs off the body, not the whole panel — anchored to the
   panel it would cover the header it is opened from, including the button
   that closes it again. */
.panel-bd { padding: 10px; flex: 1; min-width: 0; position: relative; }
.panel-bd.flush { padding: 0; }

/* ---- a panel given the whole screen -------------------------------------
   Sized to the viewport rather than the page, so the table's own scroller
   gets every pixel that is left after the header. The grid macro writes an
   inline max-height on .tblwrap, which is the one thing here that has to be
   overridden rather than simply set. */
.panel.popped {
  position: fixed; inset: 0; z-index: 80; border: 0;
  max-height: 100vh; background: var(--panel);
}
.panel.popped > .panel-hd { flex: none; }
/* Not every table sits in a .tblwrap. Scrolling the body covers those without
   touching the table's own layout — display:block on a <table> would take it
   out of table formatting and let the columns drift apart. */
.panel.popped > .panel-bd {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column;
}
.panel.popped .tblwrap { max-height: none !important; flex: 1; min-height: 0; }
.panel.popped .tz-pop { border-color: var(--gold); color: var(--gold-hi); }

/* ---- the column panel ---------------------------------------------------
   One list doing both jobs: order and visibility. It sits over the table
   rather than above it, because twenty rows of column names pushing the data
   down the page would make arranging the table hide the thing being
   arranged. */
.colpanel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 292px; z-index: 30;
  background: var(--panel2); border-left: 1px solid var(--line2);
  display: flex; flex-direction: column; min-height: 0;
  box-shadow: -14px 0 34px rgba(0, 0, 0, .45);
}
.colpanel[hidden] { display: none; }
.cp-hd {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; flex: none;
  border-bottom: 1px solid var(--line);
}
.cp-hd b { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }
.cp-hd .sub { color: var(--faint); font-size: 9.5px; }
.cp-note {
  padding: 7px 10px; border-bottom: 1px solid var(--line); flex: none;
  color: var(--muted); font-size: 9.5px; line-height: 1.55;
}
.cp-list { overflow: auto; flex: 1; min-height: 0; padding: 4px 0 12px; position: relative; }
.cp-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 10px;
  background: var(--panel2); cursor: grab; user-select: none; touch-action: none;
}
.cp-row:hover { background: var(--raised); }
.cp-row.off .cp-name { color: var(--faint); text-decoration: line-through; }
.cp-row.drag { opacity: .35; }
.cp-row .grip { color: var(--faint); font-size: 10px; letter-spacing: -2px; }
.cp-row .cp-name {
  flex: 1; font-size: 10.5px; color: var(--ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-row input[type=checkbox] { accent-color: var(--gold); margin: 0; cursor: pointer; }
.cp-move { display: flex; flex-direction: column; gap: 1px; }
.cp-move button {
  background: none; border: 0; color: var(--faint); cursor: pointer;
  font-size: 7px; line-height: 6px; padding: 0 2px;
}
.cp-move button:hover { color: var(--gold); }
/* The frozen line is a real boundary, so it is drawn as one. */
.cp-frozen {
  display: flex; align-items: center; gap: 8px; padding: 2px 10px; cursor: grab;
  color: var(--gold); font-size: 8.5px; letter-spacing: 1.3px;
  text-transform: uppercase; background: var(--gold-dim);
  border-top: 1px dashed var(--gold); border-bottom: 1px dashed var(--gold);
  touch-action: none;
}
.cp-frozen span { margin-left: auto; color: var(--muted); letter-spacing: 0;
                  text-transform: none; font-size: 9px; }
.cp-drop { position: absolute; left: 6px; right: 6px; height: 2px;
           background: var(--gold); pointer-events: none; z-index: 5; }
.cp-foot {
  padding: 8px 10px; border-top: 1px solid var(--line); flex: none;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.cp-hd .chip {
  font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; padding: 1px 5px; border: 1px solid currentColor;
  white-space: nowrap;
}
.cp-hd .chip.account { color: var(--bull); }
.cp-hd .chip.house { color: var(--cyan); }
.cp-hd .chip.app { color: var(--muted); }
.tbtn.tz-cols { padding: 0 8px; }
.panel:fullscreen { background: var(--panel); }
.tbtn.tz-pop { padding: 0 8px; font-size: 12px; }

/* =========================================================================
   KPI STRIP — terminal readout
   ========================================================================= */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); border: 1px solid var(--line); background: var(--panel); margin-bottom: 10px; }
.kpi { padding: 8px 12px; border-right: 1px solid var(--line); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi .k { color: var(--muted); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.kpi .k .sw { width: 7px; height: 7px; flex: none; }
.kpi .v { font-size: 21px; font-weight: 700; line-height: 1.15; margin-top: 3px; letter-spacing: -.4px; }
.kpi .row2 { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.kpi .s { color: var(--faint); font-size: 10px; }
.kpi .sparkbox { margin-top: 5px; height: 18px; }

.delta { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; }
.delta.up { color: var(--bull); }
.delta.down { color: var(--bear); }
.delta.flat { color: var(--muted); }

/* regime block */
.regime { padding: 8px 12px; border-right: 1px solid var(--line); }
.regime .k { color: var(--muted); font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; }
.regime .v { font-size: 19px; font-weight: 700; margin-top: 2px; }
.regime .streak { color: var(--faint); font-size: 10px; margin-top: 1px; }

/* =========================================================================
   DISTRIBUTION BAR
   ========================================================================= */
.dbar { display: flex; height: 20px; width: 100%; overflow: hidden; border: 1px solid var(--line); }
.dbar .seg { display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--on-accent); overflow: hidden; white-space: nowrap; }
.dbar .seg.b { background: var(--bull); }
.dbar .seg.s { background: var(--side); }
.dbar .seg.r { background: var(--bear); }
.dbar.thin { height: 9px; }
.dbar.thin .seg { font-size: 0; }

.legend { display: flex; gap: 16px; font-size: 10.5px; color: var(--muted); margin: 6px 0; }
.legend b { font-weight: 700; }
.legend .sw { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; }

.wkrow { margin-bottom: 7px; }
.wkrow .lbl { font-size: 9.5px; color: var(--muted); letter-spacing: .6px; margin-bottom: 2px; display: flex; }
.wkrow .lbl .now { margin-left: auto; color: var(--gold); }

/* =========================================================================
   DATA TABLE — the workhorse
   ========================================================================= */
.tblwrap { overflow: auto; max-height: 100%; }
table.dt { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.dt thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel2); color: var(--muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  text-align: left; padding: 5px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--line2); cursor: pointer; user-select: none;
}
table.dt thead th:hover { color: var(--gold); }
table.dt thead th.num, table.dt tbody td.num { text-align: right; }
/* A shaded chip is a fixed-width block, so left-aligning it leaves a ragged
   gutter down the column. Centre the cell and the header together — the
   header has to move too, or it no longer sits over its own values. */
table.dt thead th.mid, table.dt tbody td.mid { text-align: center; }
table.dt thead th .sortarrow { color: var(--gold); font-size: 8px; margin-left: 3px; }
table.dt tbody td {
  padding: 0 8px; height: var(--row-h);
  border-bottom: 1px solid var(--line);
  white-space: nowrap; color: var(--ink2);
}
table.dt tbody tr:hover td { background: rgba(255,255,255,.035); color: var(--ink); }
html[data-theme="light"] table.dt tbody tr:hover td { background: rgba(0,0,0,.035); }
table.dt tbody tr.sel td { background: var(--gold-dim); }
table.dt tbody td.name { color: var(--ink); font-weight: 600; }
table.dt tbody td.name a { border-bottom: 1px dotted var(--line3); }
table.dt tbody td.name a:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
table.dt tbody td.mono { font-variant-numeric: tabular-nums; }
table.dt tfoot td {
  padding: 4px 8px; background: var(--panel2); color: var(--muted);
  font-size: 10px; letter-spacing: .6px; border-top: 1px solid var(--line2);
}
table.dt.zebra tbody tr:nth-child(even) td { background: rgba(255,255,255,.017); }
html[data-theme="light"] table.dt.zebra tbody tr:nth-child(even) td { background: rgba(0,0,0,.018); }

.rowidx { color: var(--faint); font-size: 10px; }

/* value colouring */
.v-bull { color: var(--bull); }
.v-side { color: var(--side); }
.v-bear { color: var(--bear); }
.v-cyan { color: var(--cyan); }
.v-orange { color: var(--orange); }
.v-pink { color: var(--pink); }
.v-emerald { color: var(--emerald); }
.v-faint { color: var(--faint); }
.v-gold { color: var(--gold); }
.v-muted { color: var(--muted); }

/* `cv` marks a column that opts into colour inside a data table: the two
   stop-loss states (High/Low, ST H/L) and the two above/below trends (MT,
   W STK). A bare `.v-bull` is (0,1,0) and loses to `table.dt tbody td` at
   (0,1,3), so it would render grey; `td.cv.v-bull` is (0,3,3) and wins —
   over the row-hover colour at (0,2,4) too, so the colour survives hover.
   Colour is opt-in per column because a row where every value is coloured
   tells you nothing. Every token is listed, not just the ones in use, so
   recolouring a state in palette.py cannot silently fall back to grey. */
table.dt tbody td.cv.v-bull { color: var(--bull); }
table.dt tbody td.cv.v-side { color: var(--side); }
table.dt tbody td.cv.v-bear { color: var(--bear); }
table.dt tbody td.cv.v-cyan { color: var(--cyan); }
table.dt tbody td.cv.v-orange { color: var(--orange); }
table.dt tbody td.cv.v-pink { color: var(--pink); }
table.dt tbody td.cv.v-emerald { color: var(--emerald); }
table.dt tbody td.cv.v-faint { color: var(--faint); }
table.dt tbody td.cv.v-gold { color: var(--gold); }
table.dt tbody td.cv.v-muted { color: var(--muted); }
.pos { color: var(--bull); }
.neg { color: var(--bear); }

/* zone pill — square, terminal.
   Every pill is the width of the longest word in the vocabulary, SIDEWAYS,
   so BULL and BEAR do not render narrower. In a column of them a ragged
   right edge reads as if the size meant something; it does not, it only
   tracks how many letters the word has.
   Sized exactly rather than by eye: the app is monospace throughout, so 1ch
   is one character. SIDEWAYS is 8ch, plus letter-spacing on 8 characters
   (8 x 0.6px) and, under the global border-box, the 10px of padding and 2px
   of border. */
.pill {
  display: inline-block; min-width: calc(8ch + 17px); text-align: center;
  padding: 0 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  line-height: 15px; border: 1px solid currentColor;
}
.pill.bull { color: var(--bull); background: var(--bull-bg); }
.pill.side { color: var(--side); background: var(--side-bg); }
.pill.bear { color: var(--bear); background: var(--bear-bg); }
.pill.solid.bull { background: var(--bull); color: var(--on-accent); }
.pill.solid.side { background: var(--side); color: var(--on-accent); }
.pill.solid.bear { background: var(--bear); color: var(--on-accent); }

/* A shaded chip for the stop-loss columns: same tint language as the zone
   pills, without the border and the 8ch floor, because these sit mid-row
   rather than anchoring it. The tint is on this span and not on the cell,
   so the zebra stripe and the row-hover highlight still read underneath —
   a background on the td would have covered both. Sitting inside the cell
   also sidesteps the specificity fight entirely: `table.dt tbody td` cannot
   match a span, so no `cv` marker is needed here. */
.shade {
  /* Every chip is the width of the widest word, so the four read as one set
     rather than four sizes. `min-width: 8ch` was not enough: box-sizing is
     border-box, so the 12px of padding eats into the floor and Continue -
     exactly 8 characters - pushed past it while High, Low and Check sat
     under it. The floor has to clear the text *and* the padding, which is
     what the zone pills already do.

     The widest word differs by set - Continue is 8, the radar's Weakening
     and Improving are 9 - so the floor is a variable a table can raise
     rather than a constant that fits one set and strands the other. */
  display: inline-block; min-width: calc(var(--chip-ch, 8ch) + 17px);
  text-align: center;
  padding: 0 6px; line-height: 16px; border-radius: 2px;
  font-weight: 600;
}
.shade.v-bull { color: var(--bull); background: var(--bull-bg); }
.shade.v-side { color: var(--side); background: var(--side-bg); }
.shade.v-bear { color: var(--bear); background: var(--bear-bg); }
.shade.v-pink { color: var(--pink); background: var(--pink-bg); }
.shade.v-cyan { color: var(--cyan); background: var(--cyan-bg); }
.shade.v-orange { color: var(--orange); background: var(--orange-bg); }
/* A chip is as wide as the longest word in its own column, not the
   longest word anywhere. Above/Below need five characters where
   Continue needs eight. */
table.dt tbody td.ch5 { --chip-ch: 5ch; }

.tag {
  display: inline-block; padding: 0 5px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px; border: 1px solid var(--line2); color: var(--muted);
}

/* micro bar inside a table cell */
.cellbar { display: inline-flex; height: 8px; width: 76px; vertical-align: -1px; border: 1px solid var(--line); }
.cellbar i { display: block; height: 100%; }
.cellbar i.b { background: var(--bull); }
.cellbar i.s { background: var(--side); }
.cellbar i.r { background: var(--bear); }

/* =========================================================================
   TRANSITION MATRIX
   ========================================================================= */
table.matrix { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.matrix th, table.matrix td {
  border: 1px solid var(--line); padding: 6px 8px; text-align: center;
}
table.matrix thead th { background: var(--panel2); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
table.matrix tbody th { background: var(--panel2); text-align: left; font-size: 10.5px; letter-spacing: .8px; }
table.matrix td.zero { color: var(--faint); }
table.matrix td a { font-weight: 700; border-bottom: 1px dotted currentColor; }
table.matrix td.diag { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--line) 4px, var(--line) 5px); }

/* =========================================================================
   TABS
   ========================================================================= */
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 10px; overflow-x: auto; }
.tab {
  padding: 6px 13px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink2); }
.tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.tab .n { color: var(--faint); font-weight: 600; margin-left: 5px; }
.tabpane { display: none; }
.tabpane.on { display: block; }

/* =========================================================================
   BUTTONS / CHIPS
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  height: 26px; padding: 0 12px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--ink2);
  font: 700 10.5px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase;
}
.btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.btn.primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--on-accent); }
.btn.danger { color: var(--bear); border-color: var(--bear); }
.btn.sm { height: 21px; padding: 0 8px; font-size: 9.5px; }
.btn.wide { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 7px; font-size: 10.5px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--ink2); cursor: pointer;
}
.chip:hover { border-color: var(--gold); }
.chip.on { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-hi); font-weight: 700; }
.chip .x { color: var(--faint); font-size: 11px; }

/* =========================================================================
   FORMS
   ========================================================================= */
.field { margin-bottom: 9px; }
.field > label {
  display: block; color: var(--muted); font-size: 9.5px;
  letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 3px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--panel2); border: 1px solid var(--line2);
  color: var(--ink); font: 12px var(--mono); padding: 6px 8px; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.field .hint { color: var(--faint); font-size: 9.5px; margin-top: 3px; }
.field.err input { border-color: var(--bear); }
.field .errmsg { color: var(--bear); font-size: 10px; margin-top: 3px; }

/* =========================================================================
   NOTES / CALLOUTS
   ========================================================================= */
.note {
  border: 1px solid var(--line2); border-left: 2px solid var(--gold);
  background: var(--panel2); padding: 7px 10px; color: var(--ink2); font-size: 11px;
}
.note.warn { border-left-color: var(--side); }
.note.bad { border-left-color: var(--bear); }
.note.good { border-left-color: var(--bull); }
.note b { color: var(--ink); }

.readout { font-size: 11.5px; line-height: 1.7; color: var(--ink2); }
.readout b { color: var(--ink); }

/* =========================================================================
   AI CHAT
   ========================================================================= */
.chat { display: flex; flex-direction: column; gap: 9px; }
.msg { display: flex; gap: 9px; font-size: 12px; line-height: 1.6; }
.msg .who {
  flex: none; width: 46px; padding-top: 1px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.msg.user .who { color: var(--cyan); }
.msg.ai .who { color: var(--gold); }
.msg .body { min-width: 0; color: var(--ink2); }
.msg .body b { color: var(--ink); }
.msg .body ul { margin: 5px 0; padding-left: 16px; }
.msg .body li { margin: 2px 0; }
.trace {
  margin-top: 6px; border: 1px solid var(--line); background: var(--panel2);
  font-size: 10.5px; color: var(--muted);
}
.trace .th { padding: 4px 8px; border-bottom: 1px solid var(--line); color: var(--faint); letter-spacing: 1.2px; font-size: 9.5px; text-transform: uppercase; }
.trace pre { margin: 0; padding: 7px 8px; overflow-x: auto; color: var(--cyan); font: 10.5px/1.6 var(--mono); }

.askbar { display: flex; gap: 0; border: 1px solid var(--line2); background: var(--panel2); }
.askbar input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--ink); font: 12px var(--mono); padding: 8px 10px;
}
.askbar input::placeholder { color: var(--faint); }
.askbar .btn { border: 0; border-left: 1px solid var(--line2); }

.suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.suggest span {
  padding: 3px 8px; font-size: 10.5px; color: var(--muted);
  border: 1px dashed var(--line2); cursor: pointer;
}
.suggest span:hover { border-style: solid; border-color: var(--gold); color: var(--gold-hi); }

/* =========================================================================
   RULE BUILDER (Strategy Lab)
   ========================================================================= */
.rulegrp { border: 1px solid var(--line2); background: var(--panel2); margin-bottom: 7px; }
.rulegrp-hd {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border-bottom: 1px solid var(--line); font-size: 9.5px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}
.rulegrp-hd .rt { margin-left: auto; display: flex; gap: 5px; }
.pred { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.pred:last-child { border-bottom: 0; }
.pred .and { width: 26px; flex: none; font-size: 9px; font-weight: 700; color: var(--faint); letter-spacing: 1px; }
.pred select, .pred input { background: var(--panel); border: 1px solid var(--line2); color: var(--ink); font: 11.5px var(--mono); height: 22px; padding: 0 6px; outline: none; }
.pred select:focus, .pred input:focus { border-color: var(--gold); }
.pred .del { margin-left: auto; color: var(--faint); cursor: pointer; padding: 0 4px; }
.pred .del:hover { color: var(--bear); }
.orbar { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--gold); font-size: 9.5px; letter-spacing: 1.6px; }
.orbar::before, .orbar::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* =========================================================================
   LANDING (pre-auth) — same tokens, more air
   ========================================================================= */
body.landing { overflow: auto; font-family: var(--mono); }
.lp { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px; height: 46px;
  border-bottom: 1px solid var(--line); background: rgba(6,8,12,.9);
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .lp-nav { background: rgba(255,255,255,.9); }
.lp-nav .row { gap: 18px; }
.lp-nav .lnk { color: var(--muted); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
.lp-nav .lnk:hover { color: var(--gold); }
.lp-hero { padding: 60px 0 42px; }
.eyebrow { color: var(--gold); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; }
.lp-hero h1 {
  margin: 14px 0 0; font-size: 42px; line-height: 1.12; font-weight: 700;
  letter-spacing: -1px; max-width: 15ch;
}
.lp-hero h1 em { font-style: normal; color: var(--gold); }
.lede { margin: 14px 0 0; max-width: 62ch; font-size: 13.5px; line-height: 1.75; color: var(--ink2); font-family: var(--sans); }
.lede b { color: var(--ink); }
.trust { display: flex; gap: 20px; margin-top: 22px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.trust .tick { color: var(--bull); }
.featgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
@media (max-width: 900px) { .featgrid { grid-template-columns: 1fr; } .lp-hero h1 { font-size: 30px; } }
.feat { border: 1px solid var(--line); background: var(--panel); padding: 14px; }
.feat .n { color: var(--gold); font-size: 10px; letter-spacing: 2px; }
.feat h4 { margin: 8px 0 5px; font-size: 13px; }
.feat p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; font-family: var(--sans); }
.lp-foot { border-top: 1px solid var(--line); margin-top: 46px; padding: 22px 0 40px; color: var(--faint); font-size: 10.5px; }

/* auth card */
.authwrap { min-height: 100vh; display: grid; place-items: center; padding: 30px 16px; }
.authcard { width: min(400px, 100%); border: 1px solid var(--line2); background: var(--panel); }
.authcard .hd { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.authcard .bd { padding: 18px 20px; }
.authcard .ft { padding: 10px 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; display: flex; gap: 10px; }
.steps { display: flex; gap: 0; margin-bottom: 16px; }
.step { flex: 1; padding: 5px 0; text-align: center; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); border-bottom: 2px solid var(--line); }
.step.on { color: var(--gold); border-bottom-color: var(--gold); }
.step.done { color: var(--bull); border-bottom-color: var(--bull); }

/* =========================================================================
   UTILITIES
   ========================================================================= */
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.push { margin-left: auto; }
.small { font-size: 10.5px; }
.micro { font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.dim { color: var(--muted); }
.faint { color: var(--faint); }
.b { font-weight: 700; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

.mocknote {
  position: fixed; right: 6px; bottom: 30px; z-index: 60;
  border: 1px solid var(--line2); background: var(--deep);
  color: var(--faint); font-size: 8.5px; letter-spacing: 1.2px;
  padding: 2px 6px; text-transform: uppercase; pointer-events: none; opacity: .55;
}

/* =========================================================================
   APP ADDITIONS (beyond the mockup) — nav states, sync UI
   ========================================================================= */
.nav.soon { opacity: .42; cursor: default; }
.nav.soon:hover { background: transparent; color: var(--ink2); }
.nav.soon .tag { font-size: 8px; opacity: .8; }
.pal-row.soon { opacity: .45; }

/* --- progress bar --- */
.prog {
  height: 18px; border: 1px solid var(--line2); background: var(--panel2);
  position: relative; overflow: hidden;
}
.prog i {
  display: block; height: 100%; width: 0;
  background: var(--gold); transition: width .25s ease;
}
.prog.run i { background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.prog.err i { background: var(--bear); }
.prog.ok  i { background: var(--bull); }
.prog span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--ink); mix-blend-mode: difference;
}

/* --- sync console --- */
.console {
  height: 190px; overflow-y: auto; background: var(--deep);
  border: 1px solid var(--line); padding: 7px 9px;
  font: 10.5px/1.75 var(--mono); color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}
.console b { color: var(--ink2); }
.console .l-ok   { color: var(--bull); }
.console .l-err  { color: var(--bear); }
.console .l-head { color: var(--gold); }

/* --- status dots --- */
.sdot { display: inline-block; width: 7px; height: 7px; vertical-align: 0; }
.sdot.ok { background: var(--bull); }
.sdot.warn { background: var(--side); }
.sdot.err { background: var(--bear); }
.sdot.idle { background: var(--faint); }

/* --- key/value readout used on the settings page --- */
table.kv { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.kv td { padding: 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.kv td:first-child {
  color: var(--muted); width: 40%; font-size: 9.5px;
  letter-spacing: 1.2px; text-transform: uppercase; padding-right: 10px;
}
table.kv tr:last-child td { border-bottom: 0; }
table.kv td b { color: var(--ink); }
code.dsn { color: var(--cyan); word-break: break-all; font-size: 10.5px; }

/* --- empty state --- */
.empty {
  border: 1px dashed var(--line2); padding: 34px 24px; text-align: center;
  background: var(--panel);
}
.empty .big { font-size: 15px; font-weight: 700; letter-spacing: .4px; }
.empty p { color: var(--muted); font-size: 11.5px; max-width: 62ch; margin: 8px auto 16px; line-height: 1.8; }

/* --- toast --- */
.toast {
  position: fixed; right: 12px; bottom: 36px; z-index: 90;
  border: 1px solid var(--line3); background: var(--panel);
  padding: 8px 12px; font-size: 11px; color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.45); max-width: 380px;
}
.toast.ok  { border-left: 2px solid var(--bull); }
.toast.err { border-left: 2px solid var(--bear); }

/* --- frozen first column on wide grids --- */
table.dt th.sticky-col, table.dt td.sticky-col {
  position: sticky; left: 0; z-index: 2;
  background: var(--panel);
}
table.dt thead th.sticky-col { z-index: 4; background: var(--panel2); }
table.dt.zebra tbody tr:nth-child(even) td.sticky-col { background: var(--panel2); }
table.dt tbody tr:hover td.sticky-col { background: var(--raised); }
table.dt tbody tr.sel td.sticky-col { background: var(--raised); }
/* One divider, at the right-hand edge of the frozen block. Tables that pin a
   single column keep the plain rule below; a table with a chosen number of
   frozen columns marks the last of them instead. */
.tblwrap[data-frozen] th.sticky-col::after,
.tblwrap[data-frozen] td.sticky-col::after { display: none; }
.tblwrap[data-frozen] th.freeze-edge::after,
.tblwrap[data-frozen] td.freeze-edge::after { display: block; }

table.dt th.sticky-col::after, table.dt td.sticky-col::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: 1px; background: var(--line2);
}
table.dt thead th a { color: inherit; }
table.dt thead th a:hover { color: var(--gold); }
.btn.disabled { opacity: .35; pointer-events: none; }

/* --- collapsible slicer panel --- */
details.panel > summary { display: flex; align-items: center; gap: 9px; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before {
  content: "▶"; font-size: 8px; color: var(--faint); transition: transform .12s ease;
}
details.panel[open] > summary::before { transform: rotate(90deg); }
details.panel > summary:hover { background: var(--raised); }

/* --- inline autocomplete (script picker) --- */
.ac {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 340px; max-height: 300px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line3);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.ac.open { display: block; }
.ac-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; font-size: 11.5px; color: var(--ink2); cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.ac-row:last-child { border-bottom: 0; }
.ac-row b { color: var(--ink); font-weight: 700; min-width: 96px; }
.ac-row:hover, .ac-row.sel { background: var(--gold-dim); color: var(--ink); }
.ac-meta { color: var(--cyan); font-size: 10.5px; min-width: 70px; }
.ac-cat { margin-left: auto; color: var(--faint); font-size: 9.5px;
          letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.ac-empty { padding: 8px 10px; color: var(--faint); font-size: 11px; }
tr.clickable { cursor: pointer; }

/* --- export menu --- */
details.exp { position: relative; display: inline-block; }
details.exp > summary { list-style: none; cursor: pointer; }
details.exp > summary::-webkit-details-marker { display: none; }
.exp-menu {
  position: absolute; right: 0; top: calc(100% + 3px); z-index: 60;
  min-width: 230px; background: var(--panel); border: 1px solid var(--line3);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.exp-menu a {
  display: block; padding: 6px 11px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink2);
}
.exp-menu a:last-child { border-bottom: 0; }
.exp-menu a:hover { background: var(--gold-dim); color: var(--ink); }
.exp-menu a b { display: block; font-size: 11.5px; }
.exp-menu a span { display: block; font-size: 9.5px; color: var(--faint); }

/* --- capability denied --- */
.denied { border-left: 2px solid var(--bear); }

/* --- strategy lab: rule builder --- */
.lab-group { border-left: 2px solid var(--line3); padding: 6px 0 8px 8px; margin-bottom: 6px; }
.lab-group + .lab-group { margin-top: 2px; }
.lab-or {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--gold);
  margin: 0 0 5px -10px; padding-left: 2px;
}
.lab-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.lab-row .sel, .lab-row .inp { font-size: 10.5px; padding: 2px 4px; }
.lab-and {
  font-size: 9px; font-weight: 700; color: var(--faint); width: 24px; flex: 0 0 24px;
}
.lab-and.hide { visibility: hidden; }
.lab-spacer { width: 88px; flex: 0 0 88px; }

/* --- inline magnitude bar (year contribution) --- */
.minibar { height: 8px; width: var(--w, 0); min-width: 1px; background: var(--line3); }
.minibar.up { background: var(--bull); }
.minibar.down { background: var(--bear); }

/* --- signed-out pages (login, setup, reset, forced password change) --- */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 16px; background: var(--bg);
}
.auth-wrap { width: 100%; max-width: 360px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.auth-mark {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold); color: var(--gold); font-size: 15px;
}
.auth-name { font-size: 16px; font-weight: 700; letter-spacing: .16em; color: var(--ink); }
.auth-tag { font-size: 9.5px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.auth-card { border: 1px solid var(--line); background: var(--panel); padding: 18px 16px 16px; }
.auth-h1 {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 12px;
}
.auth-foot { margin-top: 12px; font-size: 10.5px; color: var(--faint); text-align: center; }
.auth-foot a { color: var(--gold); }
.auth-foot a:hover { text-decoration: underline; }

/* --- account menu in the top bar --- */
.acct { position: relative; }
.acct-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 5px); z-index: 60;
  min-width: 190px; background: var(--panel); border: 1px solid var(--line3);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.acct-menu.on { display: block; }
.acct-hd { padding: 8px 11px; border-bottom: 1px solid var(--line); }
.acct-hd b { display: block; font-size: 11.5px; color: var(--ink); }
.acct-hd span { display: block; font-size: 9.5px; color: var(--faint); }
.acct-hd .acct-role {
  margin-top: 3px; color: var(--gold); letter-spacing: .1em; text-transform: uppercase;
}
.acct-menu a {
  display: block; padding: 6px 11px; font-size: 11.5px; color: var(--ink2);
  border-bottom: 1px solid var(--line);
}
.acct-menu a:last-child { border-bottom: 0; }
.acct-menu a:hover { background: var(--gold-dim); color: var(--ink); }
.acct-menu a.acct-out { color: var(--bear); }
.exp-menu .exp-mail { padding: 7px 11px; border-top: 1px solid var(--line2); }
.exp-menu .exp-mail b { font-size: 11.5px; color: var(--ink2); }

/* --- column picker --- */
.colpick {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px;
  padding: 3px 0; font-size: 11px; color: var(--ink2); cursor: pointer;
}
.colpick:hover { color: var(--ink); }
.colpick input { margin: 0; }

/* --- type-ahead script picker (Strategy Lab) --- */
.picker { position: relative; }
.picker-list {
  display: none; position: absolute; left: 0; top: calc(100% + 3px); z-index: 55;
  min-width: 230px; max-height: 240px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line3);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.picker-list.on { display: block; }
.picker-list a {
  display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px;
  font-size: 11px; color: var(--ink2); border-bottom: 1px solid var(--line);
}
.picker-list a:last-child { border-bottom: 0; }
.picker-list a:hover { background: var(--gold-dim); color: var(--ink); }
.picker-list a span { color: var(--faint); font-size: 9.5px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 6px;
  border: 1px solid var(--line3); font-size: 10px; color: var(--ink2);
}
.chip button {
  background: none; border: 0; color: var(--bear); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0 1px;
}

/* --- Bull episode row lit by hovering its band on the chart --- */
tr.ep-hot > td { background: var(--gold-dim) !important; }

/* --- Bull-band hover card on the price chart --- */
#chart-price rect.epband { cursor: help; }
#chart-price rect.epband:hover { fill: rgba(61,255,160,.20); }
.eptip {
  display: none; position: absolute; z-index: 40; width: 224px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line3); padding: 7px 9px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
}
.eptip.on { display: block; }
.eptip-hd {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--bull);
  margin-bottom: 5px;
}
.eptip table { width: 100%; border-collapse: collapse; }
.eptip td { font-size: 10.5px; color: var(--ink2); padding: 1px 0; white-space: nowrap; }
.eptip td:first-child { color: var(--faint); width: 46px; }
.eptip td.num { text-align: right; font-family: var(--mono, monospace); color: var(--ink); }
.eptip i { color: var(--faint); font-style: normal; font-size: 9px; }
.eptip-ft {
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--faint);
}
.eptip-gap { margin-top: 3px; font-size: 9px; color: var(--faint); }

/* --- P-Score guidance band legend --- */
.psbands {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 7px 10px; border-top: 1px solid var(--line); font-size: 10px;
  color: var(--ink2);
}
.psbands b {
  font-size: 9px; letter-spacing: .12em; color: var(--faint); font-weight: 700;
}
.psbands span { display: inline-flex; align-items: center; gap: 5px; }
.psbands i { width: 11px; height: 11px; display: inline-block; }
.psbands .push { margin-left: auto; }

/* --- transition matrix: split corner + clickable cells --- */
table.matrix th.corner {
  position: relative; padding: 0; height: 34px; min-width: 92px; overflow: hidden;
}
table.matrix th.corner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
table.matrix th.corner .c-to   { position: absolute; top: 3px; right: 7px; color: var(--muted); }
table.matrix th.corner .c-from { position: absolute; bottom: 3px; left: 7px; color: var(--muted); }
table.matrix td.na { color: var(--faint); font-size: 9.5px; cursor: help; }
table.matrix td a:hover { background: var(--gold-dim); }
/* KPI cards that navigate look like it */
a.kpi { display: block; text-decoration: none; }
a.kpi:hover { background: var(--gold-dim); }

/* Secondary jump from a sector name to its own breadth page. Faint until
   hovered, so the primary link (the name itself) stays the obvious one. */
.secalt { margin-left: 5px; color: var(--faint); font-size: 9.5px; }
.secalt:hover { color: var(--gold); }

/* --- model page: state legend under the composition chart --- */
.mdlegend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 7px 10px; border-top: 1px solid var(--line); font-size: 10.5px;
  color: var(--ink2);
}
.mdlegend b {
  font-size: 9px; letter-spacing: .12em; color: var(--faint); font-weight: 700;
  font-family: var(--mono, monospace);
}
.mdlegend span { display: inline-flex; align-items: center; gap: 5px; }
.mdlegend i { width: 11px; height: 11px; display: inline-block; }
.mdnote {
  padding: 0 10px 8px; font-size: 9.5px; color: var(--faint); line-height: 1.5;
}

/* --- rotation chart: every row links to that sector's breadth page --- */
a.rotrow { cursor: pointer; }
a.rotrow:hover text { fill: var(--gold); }
a.rotrow:hover rect[fill="transparent"] { fill: var(--gold-dim); }

/* A page title that navigates. Underlined on hover only — it should read as
   the heading first and a link second. */
.ptitle-link { color: inherit; }
.ptitle-link:hover { color: var(--gold); border-bottom: 1px solid currentColor; }

/* --- conventions page --- */
.swatch {
  display: inline-block; width: 12px; height: 12px; vertical-align: -2px;
  margin-right: 5px; border: 1px solid var(--line3);
}

/* ==== generated: scale steps (app.palette.scale_css) ==== */
/* P-Score: 0 (weakest momentum) .. 14 (strongest momentum) */
.ps-0 { color: var(--bear); color: color-mix(in srgb, var(--bear) 100%, var(--side)); }
table.dt tbody td.cv.ps-0 { color: var(--bear); color: color-mix(in srgb, var(--bear) 100%, var(--side)); }
.ps-1 { color: var(--bear); color: color-mix(in srgb, var(--bear) 86%, var(--side)); }
table.dt tbody td.cv.ps-1 { color: var(--bear); color: color-mix(in srgb, var(--bear) 86%, var(--side)); }
.ps-2 { color: var(--bear); color: color-mix(in srgb, var(--bear) 71%, var(--side)); }
table.dt tbody td.cv.ps-2 { color: var(--bear); color: color-mix(in srgb, var(--bear) 71%, var(--side)); }
.ps-3 { color: var(--bear); color: color-mix(in srgb, var(--bear) 57%, var(--side)); }
table.dt tbody td.cv.ps-3 { color: var(--bear); color: color-mix(in srgb, var(--bear) 57%, var(--side)); }
.ps-4 { color: var(--side); color: color-mix(in srgb, var(--bear) 43%, var(--side)); }
table.dt tbody td.cv.ps-4 { color: var(--side); color: color-mix(in srgb, var(--bear) 43%, var(--side)); }
.ps-5 { color: var(--side); color: color-mix(in srgb, var(--bear) 29%, var(--side)); }
table.dt tbody td.cv.ps-5 { color: var(--side); color: color-mix(in srgb, var(--bear) 29%, var(--side)); }
.ps-6 { color: var(--side); color: color-mix(in srgb, var(--bear) 14%, var(--side)); }
table.dt tbody td.cv.ps-6 { color: var(--side); color: color-mix(in srgb, var(--bear) 14%, var(--side)); }
.ps-7 { color: var(--side); color: color-mix(in srgb, var(--bear) 0%, var(--side)); }
table.dt tbody td.cv.ps-7 { color: var(--side); color: color-mix(in srgb, var(--bear) 0%, var(--side)); }
.ps-8 { color: var(--side); color: color-mix(in srgb, var(--bull) 14%, var(--side)); }
table.dt tbody td.cv.ps-8 { color: var(--side); color: color-mix(in srgb, var(--bull) 14%, var(--side)); }
.ps-9 { color: var(--side); color: color-mix(in srgb, var(--bull) 29%, var(--side)); }
table.dt tbody td.cv.ps-9 { color: var(--side); color: color-mix(in srgb, var(--bull) 29%, var(--side)); }
.ps-10 { color: var(--side); color: color-mix(in srgb, var(--bull) 43%, var(--side)); }
table.dt tbody td.cv.ps-10 { color: var(--side); color: color-mix(in srgb, var(--bull) 43%, var(--side)); }
.ps-11 { color: var(--bull); color: color-mix(in srgb, var(--bull) 57%, var(--side)); }
table.dt tbody td.cv.ps-11 { color: var(--bull); color: color-mix(in srgb, var(--bull) 57%, var(--side)); }
.ps-12 { color: var(--bull); color: color-mix(in srgb, var(--bull) 71%, var(--side)); }
table.dt tbody td.cv.ps-12 { color: var(--bull); color: color-mix(in srgb, var(--bull) 71%, var(--side)); }
.ps-13 { color: var(--bull); color: color-mix(in srgb, var(--bull) 86%, var(--side)); }
table.dt tbody td.cv.ps-13 { color: var(--bull); color: color-mix(in srgb, var(--bull) 86%, var(--side)); }
.ps-14 { color: var(--bull); color: color-mix(in srgb, var(--bull) 100%, var(--side)); }
table.dt tbody td.cv.ps-14 { color: var(--bull); color: color-mix(in srgb, var(--bull) 100%, var(--side)); }
/* ==== end generated ==== */

/* --- conventions: a scale rendered as its own steps --- */
.scaleramp { display: flex; gap: 3px; flex-wrap: wrap; }
.scaleramp span {
  flex: 1 1 34px; text-align: center; padding: 7px 0;
  border: 1px solid var(--line); background: var(--panel2);
}
.scaleramp b { font-size: 13px; }

/* Rules the episode table into groups: entry | exit | outcome. */
table.dt th.vsep, table.dt td.vsep { border-right: 1px solid var(--line2); }

/* =========================================================================
   Rotation radar — the animated quadrant view on /rotation.
   Plot and a ranked rail side by side; the rail collapses under the plot on
   a narrow screen rather than squeezing the canvas into unreadability.
   ========================================================================= */
.rr { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 1px;
      background: var(--line); border-bottom: 1px solid var(--line); }
.rr-main { background: var(--panel); min-width: 0; }
@media (max-width: 1080px) { .rr { grid-template-columns: minmax(0, 1fr); } }

/* Both plots, not just the sector one. Without a CSS width the canvas
   takes its layout width from the width *attribute*, which radar.js sets
   to clientWidth x devicePixelRatio — so on a scaled display each resize
   multiplied the width again and the box grew without ever coming back. */
#rrPlot, #wrPlot { display: block; width: 100%; }
/* Weakening and Improving are nine characters. */
#rrTbl { --chip-ch: 9ch; }

.rr-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
          border-top: 1px solid var(--line); }
.rr-bar input[type=range] { flex: 1; accent-color: var(--gold); min-width: 70px;
                            height: 20px; cursor: pointer; }
.rr-bar .btn.on { color: var(--on-accent); background: var(--gold);
                  border-color: var(--gold); }

.rr-key { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
          background: var(--line); border-top: 1px solid var(--line); }
.rr-key > div { background: var(--panel); padding: 6px 10px; }
.rr-key b { font-size: 9.5px; letter-spacing: 1px; }
.rr-key span { display: block; color: var(--muted); font-size: 9.5px;
               margin-top: 1px; }

/* The rail is the same ranking the chart shows, in words — 45 dots cannot all
   carry a label, so the names live here and the plot stays legible. */
.rr-rail { background: var(--panel); max-height: 420px; overflow-y: auto; }
.rr-mv { display: grid; grid-template-columns: 8px 1fr 38px 46px; align-items: center;
         gap: 7px; width: 100%; text-align: left; padding: 0 9px; height: 24px;
         background: none; border: 0; border-bottom: 1px solid var(--line);
         color: var(--ink2); font: 11px/1 var(--mono); cursor: pointer; }
.rr-mv:hover { background: var(--panel2); color: var(--ink); }
.rr-mv.sel { background: var(--gold-dim); color: var(--ink); }
.rr-mv i { width: 8px; height: 8px; border-radius: 50%; }
.rr-mv .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-mv .dim, .rr-mv .b { text-align: right; font-variant-numeric: tabular-nums; }
.rr-mv .b { font-weight: 700; }

/* Quadrant filter. The chips are built by radar.js so both pages get the same
   set from one definition; the page supplies only the container. */
.rr-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 10px;
             border-top: 1px solid var(--line); }
.rr-q { display: inline-flex; align-items: center; gap: 5px; height: 21px;
        padding: 0 8px; cursor: pointer; background: var(--raised);
        border: 1px solid var(--line2); color: var(--muted);
        font: 700 9.5px/1 var(--mono); letter-spacing: .8px;
        text-transform: uppercase; }
/* Off is the state that has to look off — a filter you cannot read is worse
   than no filter. Dropping the dot to a ring says "excluded" without relying
   on colour alone. */
.rr-q i { width: 8px; height: 8px; border-radius: 50%; opacity: .28;
          box-shadow: inset 0 0 0 1px var(--line3); }
.rr-q.on { color: var(--ink); border-color: var(--line3); background: var(--panel2); }
.rr-q.on i { opacity: 1; box-shadow: none; }
.rr-q b { font-variant-numeric: tabular-nums; color: var(--ink2); }
.rr-q.on b { color: var(--ink); }
.rr-q:hover { border-color: var(--gold); color: var(--ink); }
.rr-q.act { color: var(--gold); border-color: var(--gold-dim); }
.rr-none { color: var(--faint); font-size: 10.5px; padding: 14px 10px;
           text-align: center; }
/* The canvas is draggable, so stop a pan from selecting the page around it. */
#rrPlot, #wrPlot { user-select: none; touch-action: none; }

/* Expanded radar: the rail folds away and the plot takes the panel. Used both
   for the in-page expand and as the styling for real fullscreen. */
.rr.rr-wide { grid-template-columns: minmax(0, 1fr); }
.rr.rr-wide .rr-rail { display: none; }
.rr-main:fullscreen { background: var(--panel); display: flex;
                      flex-direction: column; justify-content: center; }
.rr-main:fullscreen canvas { width: 100%; }

/* The name box and sector picker sit above the quadrant chips: they choose
   which names are in play, the chips then sort those by direction. */
.rr-pick { display: flex; gap: 6px; padding: 7px 10px 0; }
.rr-pick .inp { flex: 1 1 160px; min-width: 0; }
.rr-pick .sel { flex: 1 1 190px; min-width: 0; }

/* The rail footer names the signed-in account. The address is there because a
   display name is not unique — two people, or two accounts of one person, can
   share one, and the role alone does not say which you are using. */
.rail-user { display: flex; gap: 8px; align-items: center; text-decoration: none;
             color: inherit; }
.rail-user .whomail { font-size: 9px; color: var(--faint); letter-spacing: 0;
                      text-transform: none; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }

/* The registered mark rides above the brand rather than sitting in the line:
   at full size next to a 2px-tracked logotype it reads as a character of the
   name. `sup` alone would inherit the tracking and float too far right. */
.reg { font-size: .5em; vertical-align: super; letter-spacing: 0;
       margin-left: 1px; opacity: .75; }
.auth-name .reg { font-size: .42em; opacity: .8; }