:root {
  --ground: #070b13;
  --surface: #111827;
  --ink: #edf3ff;
  --muted: #9aa8bd;
  --line: #273448;
  --armed: #e4ae43;
  --armed-wash: #292415;
  --held: #78a6d7;
  --up: #58c797;
  --down: #f07878;
  --held-wash: #142235;
  --up-wash: #142c28;
  --down-wash: #341d25;
  --sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1.25rem 5rem;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  max-width: 62rem;
  margin-inline: auto;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--armed); }

/* ---------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1.5rem;
}
.masthead h1 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.asof { margin: 0; color: var(--muted); font-size: .8125rem; }

/* ---------------------------------------------------------- data health

   3.4's rule: no price appears without its session date and status, and an
   actionable row must be impossible to mistake for a stale one. Freshness is
   carried by the left border and the badge; provenance is stated in words on
   every single row rather than only on the bad ones, so a clean row is
   positively confirmed instead of merely unmarked. */

.datahealth {
  background: var(--surface);
  border-left: 4px solid var(--up);
  padding: .875rem 1.125rem;
  margin-bottom: 1.5rem;
}
.datahealth.warn { border-left-color: var(--armed); background: var(--armed-wash); }
.datahealth.bad { border-left-color: var(--down); background: #FBF0EE; }
.datahealth p { margin: 0; font-size: .875rem; }
.datahealth .gates {
  margin-top: .375rem;
  padding-top: .375rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .8125rem;
}

.provenance {
  grid-column: 2;
  margin: -.25rem 0 0;
  font-size: .6875rem;
  color: var(--muted);
  letter-spacing: .01em;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.provenance .sep { opacity: .5; }
.provenance .state { font-weight: 500; }
.provenance.current .state { color: var(--up); }
.provenance.delayed .state { color: var(--armed); }
.provenance.no_feed .state { color: var(--down); }
.provenance .held-back { color: var(--armed); }

.row.delayed { border-left-color: var(--armed); }
.tag.late { border-color: var(--armed); color: var(--armed); letter-spacing: .04em; }
.tag.gated { border-color: var(--muted); color: var(--muted); letter-spacing: .04em; }

.gatenote {
  grid-column: 1 / -1;
  margin: .25rem 0 0;
  padding: .4rem .625rem;
  background: var(--held-wash);
  border-left: 3px solid var(--muted);
  color: var(--muted);
  font-size: .75rem;
}
.gatenote.severe {
  border-left-color: var(--down);
  background: var(--down-wash);
  color: var(--down);
  font-weight: 500;
}

/* ---------------------------------------------------------- trade entry */

.trade-panel, .row-actions { background: var(--surface); margin-bottom: 1.5rem; padding: .75rem 1rem; }
.row-actions { grid-column: 1 / -1; margin: .25rem 0 0; background: var(--held-wash); }
summary { cursor: pointer; font-weight: 500; }
.trade-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-top: .875rem; }
.trade-form label { display: grid; gap: .2rem; color: var(--muted); font-size: .75rem; }
.trade-form input, .trade-form select, .trade-form button { font: inherit; min-height: 2rem; border: 1px solid var(--line); padding: .25rem .4rem; }
.trade-form button { background: var(--ink); color: white; cursor: pointer; border-color: var(--ink); }
.trade-form.compact { margin-top: .6rem; }
.trade-form.compact + .trade-form.compact { border-top: 1px solid var(--line); padding-top: .75rem; }

/* ---------------------------------------------------------- exposure */

.exposure {
  background: var(--surface);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.figure.primary .value {
  display: block;
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}
.figure.primary .label {
  display: block;
  margin-top: .5rem;
  font-size: .9375rem;
  font-weight: 500;
}
.figure.primary .gloss {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .8125rem;
  max-width: 34ch;
}

.figures { margin: 0; display: grid; gap: .5rem; align-content: start; }
.figures > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.figures dt { color: var(--muted); font-size: .875rem; }
.figures dd { margin: 0; font-size: .9375rem; }

/* ---------------------------------------------------------- rows */

.row {
  background: var(--surface);
  padding: 1.125rem 1.25rem;
  margin-bottom: 2px;
  display: grid;
  grid-template-columns: minmax(0, 12rem) auto;
  gap: .75rem 1.5rem;
  align-items: start;
  border-left: 4px solid transparent;
}
.row.held { border-left-color: var(--held); }
.row.armed { border-left-color: var(--armed); background: var(--armed-wash); }
.row.muted { color: var(--muted); }

/* Dead feed: a symbol that stopped trading. Must never read as a live row —
   the danger is that 18-month-old prices look exactly like today's. */
.row.stale {
  border-left-color: var(--down);
  background: repeating-linear-gradient(
    135deg, var(--surface), var(--surface) 9px, var(--down-wash) 9px, var(--down-wash) 18px);
}
.row.stale .price .last { color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--down); text-decoration-thickness: 1px; }
.asof-stale { color: var(--down); font-size: .75rem; font-family: var(--sans); }
.withheld { grid-column: 2; margin: 0; color: var(--muted);
  font-size: .8125rem; font-style: italic; max-width: 46ch; }

.ident h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: .01em; }
.ident .name { margin: .125rem 0 0; color: var(--muted); font-size: .8125rem; }
.ident p { margin: .125rem 0 0; font-size: .8125rem; }
.tag.dead {
  border-color: var(--down);
  color: var(--down);
  letter-spacing: .04em;
}
.tag {
  font-size: .625rem;
  font-weight: 600;
  padding: .1rem .3rem;
  border: 1px solid var(--held);
  color: var(--held);
  vertical-align: .15em;
}

.price { grid-column: 2; display: flex; align-items: baseline; gap: .625rem; }
.price .last { font-size: 1.375rem; font-weight: 500; }
.price .chg { font-size: .875rem; }

/* rail: where price sits between the next add and the exit */
.rail { grid-column: 2; }
.track {
  position: relative;
  height: 6px;
  background: linear-gradient(to right, var(--armed-wash), var(--held-wash));
  border: 1px solid var(--line);
}
.marker { position: absolute; top: -4px; width: 2px; height: 12px; }
.marker.now { background: var(--ink); width: 3px; }
.marker.cost { background: var(--muted); }
.ends {
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  color: var(--muted);
  margin-top: .25rem;
}

.stats {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.75rem;
}
.stats dt { color: var(--muted); font-size: .75rem; }
.stats dd { margin: 0; font-size: .9375rem; }
.since { color: var(--muted); font-size: .6875rem; font-family: var(--sans); }

.flags { grid-column: 1 / -1; margin: .25rem 0 0; padding: 0; list-style: none; }
.flag {
  font-size: .8125rem;
  padding: .4rem .625rem;
  border-left: 3px solid var(--muted);
  background: var(--held-wash);
  color: var(--ink);
  margin-top: 2px;
}
.flag.entry { border-left-color: var(--armed); background: var(--armed-wash); }
.flag.add { border-left-color: var(--armed); background: var(--armed-wash); font-weight: 500; }
.flag.target { border-left-color: var(--up); background: var(--up-wash); font-weight: 500; }
.flag.stale { border-left-color: var(--down); background: var(--down-wash); color: var(--down); font-weight: 500; }
.flag.stale_data {
  border-left-color: var(--down);
  background: var(--down-wash);
  color: var(--down);
  font-weight: 500;
}

.empty code { font-family: var(--mono); font-size: .8125rem; }

/* ---------------------------------------------------------- watchlist admin */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.masthead a { color: var(--held); }

.filterbar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: end;
  background: var(--surface); padding: .75rem 1rem; margin-bottom: 2px;
}
.search { display: grid; gap: .2rem; color: var(--muted); font-size: .75rem; flex: 1 1 14rem; }
.search input { font: inherit; min-height: 2rem; border: 1px solid var(--line); padding: .25rem .4rem; }
label.check { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .75rem; }
.filterbar .count { margin: 0 0 .3rem auto; color: var(--muted); font-size: .75rem; }

.symbols { width: 100%; border-collapse: collapse; background: var(--surface); }
.symbols th, .symbols td {
  text-align: start; vertical-align: top; padding: .625rem .75rem;
  border-bottom: 1px solid var(--line); font-weight: 400;
}
.symbols thead th {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 2px solid var(--ink);
}
.symbols tbody tr.inactive { background: var(--held-wash); color: var(--muted); }
.symbols tbody tr.inactive .code { text-decoration: line-through; }
.symbols .code { font-weight: 600; font-size: .9375rem; letter-spacing: .01em; }
.symbols .name { display: block; color: var(--muted); font-size: .75rem; margin-top: .1rem; }
.symbols .name.ar { font-size: .8125rem; }
.symbols .feed, .symbols .compliance, .symbols .state { font-size: .8125rem; }
.symbols .ticker { display: block; color: var(--muted); font-size: .6875rem; margin-top: .1rem; }
.symbols .since { color: var(--muted); font-size: .6875rem; }
.symbols .since.none { color: var(--down); }
.symbols .since.gated { color: var(--armed); display: block; margin-top: .1rem; }
.symbols .pct { margin-inline-start: .3rem; }
.compliance .yes { color: var(--up); font-weight: 500; }
.compliance .no { color: var(--muted); }
.compliance .unknown { color: var(--armed); }
.compliance .since { display: block; margin-top: .1rem; }
.state .on { color: var(--up); }
.state .off { color: var(--down); }
.tag.held-tag { display: inline-block; margin-bottom: .2rem; border-color: var(--held); color: var(--held); }
.symbols tbody tr { position: relative; }
.symbols .actions { width: 1%; white-space: nowrap; }
/* The edit controls float over the table instead of widening the actions
   column. With 93 rows the table is for scanning; a permanently wide column
   for a control used occasionally would cost every row to serve one. */
.symbols .actions .panel {
  position: absolute;
  inset-inline-end: .75rem;
  z-index: 3;
  width: min(38rem, 88vw);
  white-space: normal;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(23, 40, 44, .18);
  padding: .875rem 1rem;
}
.symbols .actions details[open] summary { font-weight: 600; }
.trade-form.danger button { background: var(--down); border-color: var(--down); color: #210f14; }
.blocked {
  margin: .6rem 0 0; padding: .5rem .625rem; max-width: 34rem;
  background: var(--down-wash); border-left: 3px solid var(--down);
  color: var(--down); font-size: .75rem; white-space: normal;
}
.trade-form .gloss { margin: .2rem 0 .4rem; color: var(--muted); font-size: .75rem; flex-basis: 100%; }
.trade-panel .gloss { margin: .625rem 0 0; color: var(--muted); font-size: .75rem; max-width: 52ch; }
.empty-cell { color: var(--muted); }
.empty-cell code { font-family: var(--mono); font-size: .8125rem; }

@media (max-width: 40rem) {
  /* The symbol table stops being a table on a phone: each row becomes a card,
     because five columns of provenance at 375px is unreadable. */
  .symbols thead { display: none; }
  .symbols, .symbols tbody, .symbols tr, .symbols th, .symbols td { display: block; width: auto; }
  .symbols tr { border-bottom: 2px solid var(--line); padding: .25rem 0; }
  .symbols th, .symbols td { border-bottom: 0; padding: .3rem .75rem; }
  .symbols .actions { white-space: normal; }
}

@media (max-width: 40rem) {
  body { padding: 1.25rem .875rem 4rem; }
  .exposure { grid-template-columns: 1fr; gap: 1.25rem; }
  .row { grid-template-columns: 1fr; }
  .price, .rail, .stats, .provenance { grid-column: 1; }
  .provenance { margin-top: .125rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ 5.3
   Research report. Win rate stays secondary to drawdown, duration, and
   capital risk: survivability numbers lead, findings and audit detail follow.
   It shares the one semantic palette defined at the top of this file.
   ------------------------------------------------------------------------ */

/* --- shared table + button, first needed on these pages --- */
.grid { width: 100%; border-collapse: collapse; background: var(--surface); }
.grid th, .grid td {
  text-align: start; vertical-align: top; padding: .5rem .7rem;
  border-bottom: 1px solid var(--line); font-weight: 400; font-size: .8125rem;
}
.grid thead th {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 2px solid var(--ink);
}
.grid td.num, .grid th.num { text-align: end; }
.grid tbody th { font-weight: 500; }

.btn {
  display: inline-block; padding: .3rem .7rem; border: 1px solid var(--held);
  border-radius: 3px; color: var(--held); text-decoration: none;
  font-size: .75rem; letter-spacing: .01em; background: var(--surface);
}
.btn:hover { background: var(--held-wash); }

.small { font-size: .75rem; }
.muted { color: var(--muted); }
.neg { color: var(--down); }
.pos { color: var(--up); }

/* --- "this is not a signal" banner --- */
.backtest-banner {
  margin: 0 0 1.4rem; padding: .65rem .85rem;
  border-inline-start: 3px solid var(--armed);
  background: var(--armed-wash); font-size: .8125rem; line-height: 1.55;
}
.backtest-banner a { color: var(--held); }

/* --- the review-gate-F explainer --- */
.gate-f { margin: 0 0 1.8rem; }
.gate-f h2 { font-size: .9375rem; margin: 0 0 .4rem; }
.gate-f > p { font-size: .8125rem; line-height: 1.6; max-width: 62ch; margin: 0 0 .9rem; }
.three-things { display: grid; gap: .8rem; margin: 0;
                grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.three-things > div { background: var(--surface); padding: .7rem .8rem;
                      border: 1px solid var(--line); }
.three-things dt { font-weight: 600; font-size: .8125rem; margin-bottom: .25rem; }
.three-things dd { margin: 0; font-size: .75rem; line-height: 1.55; color: var(--muted); }
.three-things .k-live { color: var(--up); }
.three-things .k-hypo { color: var(--armed); }
.three-things .k-back { color: var(--held); }

/* --- plain-language verdict --- */
.verdict { margin: 0 0 1.4rem; }
.verdict .headline { font-size: 1rem; line-height: 1.6; margin: 0 0 .55rem;
                     max-width: 64ch; }
.verdict .failure { margin: 0; font-size: .875rem; }
.verdict .tag {
  display: inline-block; margin-inline-end: .5rem; padding: .1rem .4rem;
  font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; background: var(--down); color: #210f14; border-radius: 2px;
}

/* --- the four numbers that decide --- */
.bignums {
  display: grid; gap: .75rem; margin: 0 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.bignum {
  padding: .8rem .9rem; border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: .1rem;
}
.bignum .label { font-size: .6875rem; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--muted); }
.bignum .value { font-family: var(--mono); font-size: 2rem; line-height: 1.15;
                 font-variant-numeric: tabular-nums; }
.bignum .unit { font-size: 1rem; color: var(--muted); }
.bignum .note { font-size: .6875rem; line-height: 1.5; color: var(--muted);
                margin-top: .15rem; }
.bignum.bad { border-color: var(--down); }
.bignum.bad .value { color: var(--down); }

/* --- charts --- */
.chart { margin: 0 0 2rem; }
.chart h2 { font-size: .9375rem; margin: 0 0 .25rem; }
.chart .cap { font-size: .78125rem; line-height: 1.6; color: var(--muted);
              margin: 0 0 .55rem; max-width: 66ch; }
.spark, .depth { width: 100%; height: auto; display: block;
                 border: 1px solid var(--line); background: var(--surface); }

.eq-area { fill: var(--held-wash); stroke: none; }
.eq-line { fill: none; stroke: var(--held); stroke-width: 1.4;
           vector-effect: non-scaling-stroke; }
.eq-zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3;
           vector-effect: non-scaling-stroke; }

.cap-reserve  { fill: var(--armed-wash); }
.cap-deployed { fill: var(--held-wash); }
.cap-line { fill: none; stroke: var(--armed); stroke-width: 1.2;
            vector-effect: non-scaling-stroke; }

.axis { display: flex; justify-content: space-between; gap: .6rem;
        font-size: .6875rem; color: var(--muted); margin: .3rem 0 0;
        flex-wrap: wrap; }
.key { display: inline-block; width: .65rem; height: .65rem; margin-inline-end: .3rem;
       vertical-align: -1px; border: 1px solid var(--line); }
.cap-deployed-key { background: var(--held-wash); border-color: var(--held); }
.cap-reserve-key  { background: var(--armed-wash); border-color: var(--armed); }

.depth .bar { fill: var(--held); }
.depth .bar.open    { fill: var(--armed); }
.depth .bar.stopped { fill: var(--muted); }

/* --- findings --- */
.findings { margin: 0 0 2rem; }
.findings h2 { font-size: .9375rem; margin: 0 0 .6rem; }
.finding { padding: .65rem .85rem; margin: 0 0 .5rem; background: var(--surface);
           border-inline-start: 3px solid var(--line); }
.finding h3 { font-size: .8125rem; margin: 0 0 .25rem; font-weight: 600; }
.finding p  { font-size: .8125rem; line-height: 1.65; margin: 0; max-width: 70ch; }
.finding.sev3 { border-inline-start-color: var(--down); }
.finding.sev2 { border-inline-start-color: var(--armed); }
.finding.sev1 { border-inline-start-color: var(--muted); }

/* --- the two framings --- */
.framings { margin: 0 0 2rem; }
.framings h2 { font-size: .9375rem; margin: 0 0 .25rem; }
.framings .cap { font-size: .78125rem; line-height: 1.6; color: var(--muted);
                 margin: 0 0 .7rem; max-width: 66ch; }
.frames { display: grid; gap: .75rem;
          grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.frame { padding: .8rem .9rem; border: 1px solid var(--line); background: var(--surface); }
.frame h3 { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
            color: var(--muted); margin: 0 0 .25rem; font-weight: 600; }
.frame .amount { font-family: var(--mono); font-size: 1.5rem; margin: 0;
                 font-variant-numeric: tabular-nums; }
.frame .on { font-size: .78125rem; margin: .1rem 0 .45rem; }
.frame .basis { font-size: .71875rem; line-height: 1.55; color: var(--muted); margin: 0; }
.frame.conservative { border-color: var(--ink); }

/* --- remaining sections --- */
.benchmarks, .worst, .paramgrid, .assumptions, .open-pos, .caveat { margin: 0 0 2rem; }
.benchmarks h2, .worst h2, .paramgrid h2, .assumptions h2, .open-pos h2,
.caveat h2 { font-size: .9375rem; margin: 0 0 .45rem; }
.paramgrid .cap { font-size: .78125rem; line-height: 1.6; color: var(--muted);
                  margin: 0 0 .6rem; max-width: 66ch; }
.benchmarks td.note { font-size: .71875rem; color: var(--muted); }
.open-pos { background: var(--armed-wash); padding: .75rem .9rem;
            border-inline-start: 3px solid var(--armed); }
.open-pos p { font-size: .8125rem; line-height: 1.65; margin: 0 0 .35rem; max-width: 70ch; }
.open-pos p:last-child { margin-bottom: 0; }

.grid tr.current { background: var(--held-wash); }
.grid tr.current td:first-child::after { content: " (in use)"; font-size: .625rem;
                                         color: var(--muted); }

.assume { display: grid; gap: .45rem; margin: 0 0 .9rem; }
.assume > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; }
.assume dt { font-size: .75rem; font-weight: 600; color: var(--muted); }
.assume dd { font-size: .78125rem; line-height: 1.6; margin: 0; max-width: 66ch; }

.download { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin: 0; }

.caveat { padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--ink); }
.caveat p { font-size: .8125rem; line-height: 1.65; margin: 0 0 .55rem; max-width: 70ch; }
.caveat p:last-child { margin-bottom: 0; }

.empty { padding: 2rem 0; }
.empty h2 { font-size: 1rem; margin: 0 0 .35rem; }
.empty p  { font-size: .8125rem; line-height: 1.6; max-width: 62ch; margin: 0; }

.research-list tr.thin { color: var(--muted); }
.research-list .sym { font-weight: 600; }

.foot { margin-top: 2.5rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.foot p { font-size: .71875rem; line-height: 1.6; color: var(--muted); margin: 0;
          max-width: 72ch; }

.masthead h1 .sub { font-weight: 400; color: var(--muted); font-size: 1rem; }

/* Phones. The four big numbers stay two-up rather than stacking: one column
   pushes the drawdown figure so far from the hold time that they stop reading
   as a single group, which is the entire point of the row. */
@media (max-width: 40rem) {
  .bignums { grid-template-columns: repeat(2, 1fr); }
  .bignum .value { font-size: 1.4rem; }
  .assume > div { grid-template-columns: 1fr; gap: .05rem; }
  .research-list .wide { display: none; }
}

/* -------------------------------------------------------------------------
   6.0 private workspace redesign

   Blue is an interaction colour only. Green, amber, and red continue to mean
   positive/current, caution, and withheld/bad data. This keeps an attractive
   dark shell from turning a trading state into a decorative colour choice.
   ------------------------------------------------------------------------ */

body {
  max-width: 76rem;
  padding: 1.25rem 1.25rem 4rem;
  background:
    radial-gradient(44rem 26rem at -12% -10%, rgba(44, 103, 205, .17), transparent 65%),
    radial-gradient(38rem 28rem at 110% 7%, rgba(122, 70, 188, .11), transparent 70%),
    var(--ground);
  color: var(--ink);
}

a { color: #8bb5ff; }
a:hover { color: #c6d9ff; }

.workspace-nav {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding: .45rem .55rem .45rem .9rem;
  border: 1px solid rgba(120, 145, 184, .18);
  border-radius: .8rem;
  background: rgba(12, 18, 30, .78);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: baseline; gap: .35rem; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.025em; }
.brand span, .login-brand > span { font-size: 1.125rem; }
.brand small, .login-brand small { color: #6f9eff; font: 500 .6rem/1 var(--mono); letter-spacing: .12em; }
.workspace-links { display: flex; align-items: center; gap: .2rem; }
.workspace-links a { color: var(--muted); text-decoration: none; font-size: .8125rem; padding: .55rem .7rem; border-radius: .45rem; }
.workspace-links a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.workspace-links a.active { color: #fff; background: #214d9b; box-shadow: inset 0 0 0 1px rgba(133,174,255,.2); }
.session-actions { margin-left: auto; display: flex; align-items: center; gap: .65rem; }
.signed-in { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.quiet-button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: .4rem; padding: .4rem .6rem; font: inherit; font-size: .72rem; cursor: pointer; }
.quiet-button:hover { border-color: #6f9eff; color: var(--ink); }

.masthead { border-bottom-color: var(--line); padding: 0 0 1rem; margin-bottom: 1.25rem; }
.masthead h1 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.035em; }
.asof { color: var(--muted); }
.datahealth, .trade-panel, .exposure, .row, .grid, .symbols, .filterbar,
.three-things > div, .bignum, .frame, .finding, .caveat {
  border-color: var(--line);
  background: rgba(17, 24, 39, .88);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.datahealth { border-left-color: var(--up); border-radius: .65rem; }
.datahealth.warn, .row.armed, .open-pos { background: var(--armed-wash); }
.datahealth.bad, .gatenote.severe { background: var(--down-wash); }
.trade-panel, .exposure, .filterbar { border: 1px solid var(--line); border-radius: .7rem; }
.trade-panel { padding: .9rem 1rem; }
.trade-form input, .trade-form select, .trade-form button, .symbols input, .symbols select {
  color: var(--ink); border-color: #34445e; background: #0c1422; border-radius: .35rem;
}
.trade-form input:focus, .trade-form select:focus, .symbols input:focus, .symbols select:focus,
.login-form input:focus { outline: 2px solid #4c85ee; outline-offset: 2px; }
.trade-form button, .btn { color: #fff; border-color: #336de0; background: #2f68d7; box-shadow: 0 8px 18px rgba(37, 99, 235, .2); }
.trade-form button:hover, .btn:hover { color: #fff; background: #427bec; }
.row { border-radius: .45rem; margin-bottom: .45rem; border: 1px solid var(--line); border-left: 4px solid transparent; }
.row.held { border-left-color: var(--held); }
.row.armed { border-left-color: var(--armed); }
.grid th, .grid td, .symbols th, .symbols td { border-bottom-color: var(--line); }
.grid thead th, .symbols thead th { border-bottom-color: #50627e; }
.filterbar { padding: .8rem .9rem; }

/* Sign-in is a separate, calm surface. It does not invent account recovery,
   social authentication, or trading permissions that Borsa does not have. */
body.login-page { max-width: none; min-height: 100vh; padding: 1.5rem; display: grid; place-items: center; }
.login-shell { width: min(100%, 29rem); }
.login-card {
  position: relative; overflow: hidden; padding: 2rem; border: 1px solid rgba(137, 166, 216, .25);
  border-radius: 1rem; background: linear-gradient(145deg, rgba(17, 25, 41, .97), rgba(11, 17, 29, .97));
  box-shadow: 0 28px 80px rgba(0,0,0,.46), 0 0 80px rgba(53, 96, 204, .11);
}
.login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #387ff3, #7255dc); }
.login-brand { display: flex; align-items: baseline; gap: .45rem; margin-bottom: 2.4rem; }
.login-card header { margin-bottom: 1.35rem; }
.eyebrow { color: #78a8ff; font: 500 .68rem/1 var(--mono); letter-spacing: .12em; margin: 0 0 .55rem; }
.login-card h1 { margin: 0; font-size: 1.85rem; letter-spacing: -.035em; }
.login-copy { color: var(--muted); max-width: 37ch; margin: .55rem 0 0; font-size: .875rem; line-height: 1.6; }
.login-form { display: grid; gap: .95rem; }
.login-form label { display: grid; gap: .4rem; color: #becae0; font-size: .78rem; font-weight: 500; }
.login-form input { width: 100%; min-height: 3rem; border: 1px solid #34445e; border-radius: .55rem; padding: .65rem .75rem; background: #0b1320; color: var(--ink); font: inherit; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 4.5rem; }
.password-toggle { position: absolute; top: 50%; right: .55rem; transform: translateY(-50%); border: 0; background: transparent; color: #79a7fc; cursor: pointer; font: 500 .72rem var(--sans); }
.login-submit { min-height: 3.1rem; margin-top: .25rem; border: 1px solid #5d96ff; border-radius: .55rem; background: linear-gradient(135deg, #367cf3, #285bd0); color: #fff; font: 600 .95rem var(--sans); cursor: pointer; box-shadow: 0 14px 26px rgba(33, 93, 211, .28); }
.login-submit:hover { background: linear-gradient(135deg, #4b8df8, #336bdd); }
.login-error { border: 1px solid rgba(240, 120, 120, .5); border-radius: .5rem; padding: .65rem .75rem; background: var(--down-wash); color: #ffb2b2; font-size: .8125rem; }
.login-note { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; text-align: center; }

@media (max-width: 42rem) {
  body { padding: .75rem .75rem 2.5rem; }
  .workspace-nav { gap: .5rem; flex-wrap: wrap; padding: .6rem .7rem; }
  .workspace-links { order: 3; width: 100%; overflow-x: auto; }
  .workspace-links a { white-space: nowrap; }
  .session-actions { margin-left: auto; }
  .signed-in { display: none; }
  .exposure { padding: 1rem; gap: 1rem; }
  body.login-page { padding: 1rem; }
  .login-card { padding: 1.4rem; }
}

/* -------------------------------------------------------------------------
   Ledger workspace. The large visual blocks use a deliberately small palette:
   blue says "interact", green confirms a trusted completed close, amber says
   a market mark is withheld, and violet labels a strategy rule. */

.portfolio-page { max-width: 88rem; }
.portfolio-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: .35rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.portfolio-header h1 { margin: .2rem 0 0; font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.04em; }
.portfolio-header p:not(.eyebrow) { max-width: 48rem; margin: .5rem 0 0; color: var(--muted); font-size: .875rem; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; padding-top: .3rem; }
.session-badge, .basis { display: inline-flex; align-items: center; width: fit-content; border-radius: .45rem; padding: .28rem .45rem; font-size: .65rem; font-weight: 600; line-height: 1.2; letter-spacing: .04em; }
.session-badge { border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.session-badge.current, .basis-close { color: #a8edcf; border-color: rgba(88,199,151,.28); background: rgba(88,199,151,.1); }
.session-badge.warning, .basis-warning { color: #ffca70; border-color: rgba(228,174,67,.28); background: rgba(228,174,67,.1); }
.basis { border: 1px solid rgba(120,166,215,.25); background: rgba(120,166,215,.1); color: #b9d9ff; text-transform: uppercase; }
.basis-rule { border-color: rgba(165,120,255,.28); background: rgba(137,92,222,.12); color: #d8c4ff; }
.primary-action, .secondary-action { min-height: 2.45rem; border-radius: .55rem; padding: .5rem .8rem; font: 600 .78rem var(--sans); cursor: pointer; }
.primary-action { border: 1px solid #5790f5; background: linear-gradient(135deg, #397cf1, #285bd0); color: #fff; box-shadow: 0 10px 22px rgba(37,99,235,.22); }
.secondary-action { border: 1px solid #40516d; background: #101a2a; color: #d9e6fb; }
.secondary-action.block { width: 100%; margin-top: 1rem; }
.workspace-health { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; margin: 1rem 0; padding: .7rem .85rem; border: 1px solid rgba(88,199,151,.23); border-left: 3px solid var(--up); border-radius: .6rem; background: rgba(88,199,151,.06); color: #d6f7e5; font-size: .78rem; }
.workspace-health span { color: var(--muted); }
.workspace-health.warn { border-color: rgba(228,174,67,.3); border-left-color: var(--armed); background: rgba(228,174,67,.07); color: #ffd483; }
.workspace-health.bad { border-color: rgba(240,120,120,.35); border-left-color: var(--down); background: var(--down-wash); color: #ffb7b7; }
.equity-ribbon { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.15fr; gap: .75rem; margin: 1.25rem 0 .75rem; }
.equity-surface, .strategy-surface { margin: 1.25rem 0; }
.equity-surface { border-color: rgba(59,130,246,.28); }
.strategy-surface { border-color: rgba(165,120,255,.25); }
.equity-surface .portfolio-cards, .strategy-surface .portfolio-cards { margin: 0; padding: 1rem; }
.surface-title-row { display: flex; align-items: center; gap: .65rem; }
.surface-head-actions { display: flex; align-items: center; gap: .65rem; }
.surface-head-actions .primary-action { min-height: 2.1rem; padding: 0 .85rem; font-size: .75rem; }
.equity-grid { grid-template-columns: 1.25fr 1fr 1fr 1.15fr; }
.equity-sub-pill { font-size: .62rem; font-weight: 600; color: #94a3b8; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: .25rem; padding: .1rem .35rem; }
.unit { font-size: .75rem; font-weight: 500; color: var(--muted); }
.cash-modal-card { max-width: 28rem; }
.equity-card, .equity-hero-card { border: 1px solid var(--line); border-radius: .75rem; background: rgba(17,24,39,.88); box-shadow: 0 12px 26px rgba(0,0,0,.12); min-height: 8.75rem; padding: 1rem; display: flex; flex-direction: column; }
.equity-hero-card { border-color: rgba(87,144,245,.4); background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(17,24,39,.95) 75%); box-shadow: 0 14px 30px rgba(37,99,235,.12); }
.equity-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.equity-label { color: var(--muted); font-size: .69rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.equity-badge-live { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #60a5fa; background: rgba(37,99,235,.18); border: 1px solid rgba(96,165,250,.3); border-radius: .25rem; padding: .1rem .35rem; }
.equity-main-val { display: block; margin-top: .75rem; font-size: clamp(1.35rem, 2.6vw, 1.85rem); letter-spacing: -.04em; color: #f8fafc; }
.equity-val { display: block; margin-top: .75rem; font-size: clamp(1.15rem, 2.2vw, 1.55rem); letter-spacing: -.03em; color: #f5f8ff; }
.equity-sub-breakdown { margin-top: auto; color: #94a3b8; font-size: .72rem; display: flex; align-items: center; gap: .4rem; }
.equity-sub-breakdown .sep { opacity: .4; }
.equity-sub-breakdown strong { color: #e2e8f0; }
.equity-hint { margin-top: auto; color: var(--muted); font-size: .72rem; }
.cash-update-btn { background: rgba(30,41,59,.8); color: #93c5fd; border: 1px solid #334155; border-radius: .35rem; padding: .15rem .45rem; font: 600 .68rem var(--sans); cursor: pointer; transition: all .15s ease; }
.cash-update-btn:hover { background: #334155; color: #fff; border-color: #64748b; }
.pnl-pill { font-size: .65rem; font-weight: 700; padding: .12rem .4rem; border-radius: .3rem; letter-spacing: .02em; }
.pnl-pos { color: #4ade80 !important; }
.pnl-neg { color: #f87171 !important; }
.pnl-pill.pnl-pos { background: rgba(21,128,61,.2); border: 1px solid rgba(34,197,94,.3); }
.pnl-pill.pnl-neg { background: rgba(185,28,28,.2); border: 1px solid rgba(239,68,68,.3); }
.pnl-pos-val { color: #86efac !important; }
.pnl-neg-val { color: #fca5a5 !important; }
.buffer-badge { display: inline-block; padding: .12rem .45rem; border-radius: .3rem; font-size: .65rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.buffer-healthy { background: rgba(21,128,61,.22); color: #4ade80; border: 1px solid rgba(34,197,94,.35); }
.buffer-tight { background: rgba(180,83,9,.25); color: #fde047; border: 1px solid rgba(245,158,11,.35); }
.buffer-deficit { background: rgba(185,28,28,.25); color: #f87171; border: 1px solid rgba(239,68,68,.35); }
.concentration-badge { display: inline-block; padding: .12rem .35rem; border-radius: .25rem; background: rgba(180,83,9,.2); color: #fde047; border: 1px solid rgba(245,158,11,.35); font-size: .65rem; font-weight: 600; }
.portfolio-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.summary-card, .surface { border: 1px solid var(--line); border-radius: .75rem; background: rgba(17,24,39,.88); box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.summary-card { min-height: 8.75rem; padding: 1rem; display: flex; flex-direction: column; }
.summary-card p { display: flex; gap: .4rem; align-items: center; margin: 0; color: var(--muted); font-size: .69rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.summary-card strong { display: block; margin-top: 1rem; font-size: clamp(1.15rem, 2.3vw, 1.6rem); letter-spacing: -.04em; color: #f5f8ff; }
.summary-card > span { margin-top: auto; color: var(--muted); font-size: .72rem; }
.summary-card.remaining { border-color: rgba(88,199,151,.26); background: linear-gradient(135deg, rgba(88,199,151,.1), rgba(17,24,39,.88) 65%); }
.summary-card.remaining strong { color: #c7f4db; }
.summary-card.remaining.over { border-color: rgba(240,120,120,.36); background: var(--down-wash); }
.summary-card.remaining.over strong { color: #ffb7b7; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr); gap: 1rem; align-items: start; }
.surface { overflow: hidden; }
.surface-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .85rem; border-bottom: 1px solid var(--line); }
.surface-head h2 { margin: 0; font-size: .95rem; letter-spacing: -.015em; }
.surface-head p { margin: .25rem 0 0; color: var(--muted); font-size: .72rem; }
.surface-head a { color: #9fc3ff; font-size: .73rem; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.position-table { width: 100%; min-width: 43rem; border-collapse: collapse; text-align: left; }
.position-table th, .position-table td { padding: .8rem 1rem; border-bottom: 1px solid rgba(39,52,72,.75); vertical-align: top; font-size: .78rem; }
.position-table thead th { background: rgba(8,13,23,.42); color: #8493ab; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.position-table tbody tr:last-child > * { border-bottom: 0; }
.position-table th[scope="row"] > a { color: #f5f8ff; text-decoration: none; }
.position-table small, .signal-card p { display: block; margin-top: .22rem; color: var(--muted); font: .65rem/1.4 var(--sans); }
.side-stack { display: grid; gap: 1rem; }
.guardrail, .ledger-preview { padding-bottom: 1rem; }
.guardrail .surface-head, .ledger-preview .surface-head { padding-bottom: .65rem; }
.progress { height: .5rem; margin: 1rem 1rem 0; overflow: hidden; border-radius: 999px; background: #0b1320; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #397cf1, #8058db); }
.progress-label { display: flex; justify-content: space-between; gap: .5rem; margin: .55rem 1rem 0; color: var(--muted); font-size: .69rem; }
.guardrail .secondary-action { margin-inline: 1rem; width: calc(100% - 2rem); }
.ledger-preview ol { display: grid; gap: .8rem; margin: 0; padding: 1rem 1rem 0 1.8rem; list-style: none; }
.ledger-preview li { position: relative; display: grid; gap: .18rem; color: var(--muted); font-size: .66rem; }
.ledger-preview li::before { content: ""; position: absolute; left: -1.15rem; top: .24rem; width: .42rem; height: .42rem; border-radius: 50%; background: #5b91f0; box-shadow: 0 0 0 4px rgba(57,124,241,.11); }
.ledger-preview li strong { color: #dce7f8; font-size: .72rem; }
.ledger-preview li.quiet::before { background: #68758a; }
.empty-state { padding: 2rem 1rem; text-align: center; }
.empty-state strong { font-size: .92rem; }
.empty-state p { max-width: 40ch; margin: .45rem auto 1rem; color: var(--muted); font-size: .77rem; }
.signals-surface { margin-top: 1rem; }
.signal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; padding: 1rem; }
.signal-card { min-height: 9.1rem; padding: .85rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(8,13,23,.38); }
.signal-card.held { border-left: 3px solid var(--held); }.signal-card.stale { border-left: 3px solid var(--down); background: rgba(52,29,37,.6); }
.signal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.signal-head h3 { margin: 0; font-size: .85rem; }.signal-head p { max-width: 12rem; margin: .15rem 0 0; }
.price-line { display: block; margin-top: .75rem; color: #f2f6ff; font-size: 1.1rem; }.signal-meta { margin-bottom: 0; }.signal-rule { margin: .5rem 0 0; color: #b9d9ff !important; }.signal-card.stale .signal-rule { color: #ffb7b7 !important; }
.empty-list { margin: 0; padding: 1rem; color: var(--muted); font-size: .78rem; }
.decision-boundary { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(10,16,27,.6); color: var(--muted); font-size: .74rem; }.decision-boundary strong { color: #dbe7f9; }
.workspace-drawer { margin-top: .75rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(10,16,27,.75); }.workspace-drawer summary { padding: .85rem 1rem; color: #e7effc; }.workspace-drawer[open] summary { border-bottom: 1px solid var(--line); }.workspace-drawer > p { margin: .85rem 1rem 0; color: var(--muted); font-size: .74rem; }
.workspace-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 1rem; }.workspace-form.slim { grid-template-columns: repeat(2, minmax(0, 1fr)); }.workspace-form label { display: grid; gap: .32rem; color: #b8c6dc; font-size: .68rem; font-weight: 600; }.workspace-form .wide, .workspace-form .form-actions { grid-column: 1 / -1; }.workspace-form input, .workspace-form select { min-width: 0; min-height: 2.3rem; padding: .4rem .5rem; border: 1px solid #34445e; border-radius: .4rem; background: #0b1320; color: var(--ink); font: .8rem var(--sans); }.form-actions { display: flex; align-items: center; gap: .75rem; }.form-actions span { color: var(--muted); font-size: .72rem; }.legacy-drawer { opacity: .8; }
@media (max-width: 58rem) { .equity-ribbon, .equity-grid, .portfolio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.workspace-grid { grid-template-columns: 1fr; }.side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }.portfolio-header { align-items: stretch; flex-direction: column; }.header-actions { justify-content: flex-start; }.workspace-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 42rem) { .portfolio-page { padding-inline: .75rem; }.equity-ribbon, .equity-grid, .portfolio-cards, .side-stack, .workspace-form, .workspace-form.slim { grid-template-columns: 1fr; }.summary-card, .equity-card, .equity-hero-card { min-height: 7.5rem; }.header-actions { align-items: stretch; }.primary-action { flex: 1; }.session-badge { justify-content: center; }.signal-grid { grid-template-columns: 1fr; }.workspace-form .wide, .workspace-form .form-actions { grid-column: auto; } }

/* -------------------------------------------------------------------------
   P1.4 Opportunity Radar

   Every state on this page is carried by three independent channels: a word,
   a glyph, and a colour. Colour is the last of the three and never the only
   one, because a red row that reads only as "red" is an instruction, and this
   page is explicitly not allowed to instruct.

   Logical properties throughout (inline-start/end, margin-inline) so the
   whole page mirrors under dir="rtl" without a second stylesheet. Numbers
   stay dir="ltr" in the markup: Arabic text runs right to left, Arabic
   *numerals* do not.
   ------------------------------------------------------------------------ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.disclaimer {
  margin: 0 0 1.25rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--held);
  border-radius: .65rem;
  background: rgba(10, 16, 27, .6);
}
.disclaimer p { margin: 0; max-width: 72ch; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.disclaimer strong { color: var(--ink); }

/* The scroll container is focusable so the table can be reached and panned
   from the keyboard on a narrow screen, where it is the only way to see the
   trailing columns. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: var(--surface);
}
.tablewrap:focus-visible { outline: 2px solid #6f9eff; outline-offset: 2px; }
.grid.radar { min-width: 44rem; }
.grid.radar thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.grid.radar thead th a {
  display: inline-flex; align-items: center; gap: .3rem;
  color: inherit; text-decoration: none;
}
.grid.radar thead th a:hover { color: var(--ink); }
.grid.radar thead th a:focus-visible { outline: 2px solid #6f9eff; outline-offset: 2px; border-radius: 2px; }
.grid.radar thead th[aria-sort="none"] .sortmark { opacity: .35; }
.sortmark { font-size: .6rem; }
.grid.radar tbody tr:hover { background: rgba(255, 255, 255, .025); }
.grid.radar td, .grid.radar tbody th { vertical-align: top; }
.grid.radar .sym a { color: var(--ink); text-decoration: none; font-weight: 600; }
.grid.radar .sym a:hover { text-decoration: underline; }

/* --- state: word + glyph + colour, in that order of importance --- */
.statebadge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .45rem;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
.statebadge .glyph { font-size: .7rem; line-height: 1; }
.s-reclaim { color: var(--up); background: var(--up-wash); }
.s-breakdown { color: var(--down); background: var(--down-wash); }
.s-near_support { color: var(--armed); background: var(--armed-wash); }
.s-neutral { color: var(--muted); background: transparent; }
.s-insufficient_data { color: var(--muted); background: transparent; border-style: dashed; }

/* Reason codes are the whole content of an INSUFFICIENT_DATA row. They are
   shown verbatim rather than prose, because they are the same strings the
   contract, the API and the tests use. */
.reasons { margin: .35rem 0 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.reasons li { color: var(--muted); font-size: .65rem; letter-spacing: .02em; }

.qualitybadge {
  display: inline-block; padding: .08rem .4rem;
  border: 1px solid currentColor; border-radius: 2px;
  font-size: .625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; white-space: nowrap;
}
.q-trusted { color: var(--up); }
.q-degraded { color: var(--armed); }
.q-quarantined { color: var(--down); }
.q-missing { color: var(--muted); }
.provider { display: block; margin-top: .25rem; color: var(--muted); font-size: .65rem; }

/* "1.80 of 1.20 needed" — the comparison is spelled out so the threshold
   never lives only in a colour or a bar width. */
.thresholdnote { display: block; margin-top: .15rem; color: var(--muted); font-size: .65rem; font-family: var(--sans); }

.radar-filter fieldset {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.radar-filter legend {
  padding: 0; margin-inline-end: .6rem;
  color: var(--muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
}
.radar-filter label.check { font-size: .75rem; color: var(--ink); }
.radar-filter label.check .mono { color: var(--muted); }
.radar-filter input:focus-visible { outline: 2px solid #6f9eff; outline-offset: 2px; }
.clearfilter { font-size: .72rem; }
.radar-filter .count { flex-basis: 100%; margin: .2rem 0 0; }

.radar-legend { margin-top: 1.5rem; }
.radar-legend h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .7rem; }
.radar-legend dl { display: grid; gap: .55rem; margin: 0; }
.radar-legend dl > div { display: grid; grid-template-columns: 10rem 1fr; gap: .8rem; align-items: baseline; }
.radar-legend dt { margin: 0; }
.radar-legend dd { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; max-width: 68ch; }
.radar-legend .gloss { margin: .9rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.6; max-width: 72ch; }

@media (max-width: 46rem) {
  .radar-legend dl > div { grid-template-columns: 1fr; gap: .2rem; }
  .radar-filter fieldset { gap: .25rem .7rem; }
  .grid.radar th, .grid.radar td { padding: .45rem .5rem; }
}

/* The quality note is deliberately not the banner's own colour: a current
   session that contains a degraded row is one good fact and one bad one, and
   collapsing them into a single amber block states neither accurately. */
.datahealth .qualitynote {
  margin-top: .45rem;
  color: var(--armed);
  font-size: .8125rem;
}
.datahealth .qualitynote.severe { color: var(--down); }
.datahealth .qualitynote strong { font-weight: 600; }

/* -------------------------------------------------------------------------
   Phase 4: Actionable Buy Limit Orders & Planning Drawer
   ------------------------------------------------------------------------ */

.action-col { width: 14rem; text-align: center; }
.action-cell { text-align: center; }
.order-quick { display: inline-flex; align-items: center; gap: .45rem; justify-content: center; }
.order-price { font-weight: 600; color: #a8edcf; }
.order-price small { font-size: .65rem; color: var(--muted); }
.order-shares { color: var(--muted); font-size: .72rem; }
.btn-plan-order {
  padding: .2rem .55rem; border: 1px solid #3b82f6; border-radius: .4rem;
  background: #1e3a8a; color: #eff6ff; font: 600 .68rem var(--sans);
  cursor: pointer; transition: background .15s;
}
.btn-plan-order:hover { background: #2563eb; }
.btn-plan-order:focus-visible { outline: 2px solid #6f9eff; outline-offset: 2px; }

/* Actionable orders deck on daily workspace */
.actionable-surface { margin: 1.25rem 0; border: 1px solid rgba(88,199,151,.28); }
.actionable-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: .85rem; padding: 1rem;
}
.actionable-card {
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line); border-radius: .65rem;
  background: rgba(11, 17, 29, .75); padding: .9rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; }
.sym-title { font-size: 1.1rem; color: #f5f8ff; }
.sym-title a { color: inherit; text-decoration: none; }
.sym-title a:hover { text-decoration: underline; }
.buy-tag {
  font-size: .62rem; font-weight: 600; padding: .15rem .45rem;
  border-radius: .35rem; background: rgba(88,199,151,.15);
  color: #a8edcf; border: 1px solid rgba(88,199,151,.3);
}
.card-body { display: grid; gap: .4rem; margin-bottom: .85rem; }
.num-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; }
.num-row .label { color: var(--muted); }
.num-row strong.highlight { font-size: 1rem; color: #a8edcf; }
.num-row.sub { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--line); color: var(--muted); font-size: .68rem; }
.card-actions { display: flex; gap: .5rem; }
.copy-thndr-btn {
  flex: 1; min-height: 2.1rem; border: 1px solid #3b82f6; border-radius: .45rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
  font: 600 .72rem var(--sans); cursor: pointer;
}
.copy-thndr-btn:hover { background: #3b82f6; }
.prefill-fill-btn { min-height: 2.1rem; padding: 0 .7rem; font-size: .72rem; }

/* Order modal / slide-out drawer */
.order-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px); display: none; place-items: center;
  z-index: 1000; padding: 1rem;
}
.order-modal-backdrop.open { display: grid; }
.order-modal-card {
  box-sizing: border-box; width: 100%; max-width: 32rem;
  background: #0e1726; border: 1px solid #334155; border-radius: .85rem;
  padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.7);
  overflow: hidden;
}
.order-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1.2rem; gap: 1rem;
}
.order-modal-head h2 { margin: 0; font-size: 1.25rem; color: #f8fafc; line-height: 1.3; }
.order-modal-head .asof { margin-top: .25rem; font-size: .75rem; color: var(--muted); line-height: 1.4; }
.modal-close-btn {
  border: 0; background: transparent; color: var(--muted);
  font-size: 1.5rem; cursor: pointer; line-height: 1; padding: .2rem .4rem;
  border-radius: .35rem; transition: color .15s, background .15s;
}
.modal-close-btn:hover { color: #f8fafc; background: rgba(255,255,255,.06); }
.order-modal-form { display: grid; gap: 1rem; width: 100%; box-sizing: border-box; }
.modal-row-inputs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem; width: 100%; box-sizing: border-box;
}
.order-modal-form label {
  display: grid; gap: .35rem; font-size: .75rem; color: #94a3b8;
  font-weight: 500; min-width: 0; width: 100%; box-sizing: border-box;
}
.order-modal-form input {
  box-sizing: border-box; width: 100%; min-width: 0;
  padding: .55rem .75rem; border: 1px solid #334155; border-radius: .45rem;
  background: #020617; color: #f8fafc; font: inherit; font-size: .95rem;
  font-family: var(--mono);
}
.order-modal-form input:focus {
  outline: 2px solid #3b82f6; outline-offset: 1px; border-color: #3b82f6;
}
.modal-calc-box {
  box-sizing: border-box; width: 100%; background: #020617;
  border: 1px solid #1e293b; border-radius: .6rem; padding: .9rem 1rem;
  display: grid; gap: .45rem;
}
.modal-calc-row { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
.modal-calc-row.highlight { font-size: .95rem; font-weight: 600; color: #a8edcf; }
.modal-calc-row.sub {
  font-size: .72rem; color: var(--muted); padding-top: .45rem;
  border-top: 1px dashed #1e293b; margin-top: .2rem;
}
.thndr-copy-box {
  box-sizing: border-box; width: 100%; background: #0f172a;
  border: 1px dashed #3b82f6; border-radius: .55rem; padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.thndr-copy-box code {
  font-family: var(--mono); color: #93c5fd; font-weight: 600;
  font-size: .85rem; word-break: break-all;
}
.modal-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; margin-top: .25rem;
}
.modal-actions .fill-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem;
  border: 1px solid #334155; border-radius: .45rem; background: #1e293b;
  color: #f1f5f9; font: 600 .8rem var(--sans); text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.modal-actions .fill-btn:hover { background: #334155; border-color: #475569; color: #fff; }
.modal-actions .cancel-btn {
  padding: .55rem .9rem; border: 1px solid transparent; border-radius: .45rem;
  background: transparent; color: var(--muted); font: 500 .8rem var(--sans);
  cursor: pointer; transition: color .15s;
}
.modal-actions .cancel-btn:hover { color: #f8fafc; }

/* Liquidity Guardrails & Exit Feasibility */
.liq-badge {
  display: inline-block; padding: .15rem .42rem; border-radius: .25rem;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.2; vertical-align: middle;
}
.liq-liquid { background: rgba(21, 128, 61, .2); color: #4ade80; border: 1px solid rgba(34, 197, 94, .3); }
.liq-moderate { background: rgba(29, 78, 216, .2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, .3); }
.liq-thin { background: rgba(180, 83, 9, .2); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .3); }
.liq-illiquid { background: rgba(185, 28, 28, .25); color: #f87171; border: 1px solid rgba(239, 68, 68, .35); }
.liq-missing { background: rgba(100, 116, 139, .2); color: #94a3b8; border: 1px solid rgba(148, 163, 184, .25); }

.liq-cell { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.liq-atv { font-size: .75rem; color: #94a3b8; }

.liq-card-warning {
  margin-top: .35rem; padding: .3rem .5rem; border-radius: .35rem;
  background: rgba(180, 83, 9, .15); border: 1px solid rgba(245, 158, 11, .3);
  color: #fde68a; font-size: .68rem; line-height: 1.3;
}

.modal-liq-box {
  box-sizing: border-box; width: 100%; background: #070d18;
  border: 1px solid #1e293b; border-radius: .6rem; padding: .85rem 1rem;
  display: grid; gap: .4rem;
}
.modal-liq-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; font-weight: 600; color: #94a3b8; margin-bottom: .2rem;
}
.modal-liq-row { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; }
.modal-liq-disclaimer {
  font-size: .65rem; color: #64748b; font-style: italic; margin-top: .2rem; line-height: 1.3;
}
.liq-warning-banner {
  box-sizing: border-box; width: 100%; padding: .6rem .8rem;
  background: rgba(180, 83, 9, .15); border: 1px solid rgba(245, 158, 11, .4);
  border-radius: .45rem; color: #fde68a; font-size: .72rem; line-height: 1.35;
  display: none;
}
.liq-warning-banner.visible { display: block; }

@media (max-width: 34rem) {
  .modal-row-inputs { grid-template-columns: 1fr; }
  .thndr-copy-box { flex-direction: column; align-items: stretch; gap: .6rem; }
  .thndr-copy-box button { width: 100%; }
  .order-modal-card { padding: 1.1rem; }
}

/* -------------------------------------------------------------------------
   P1.4 Opportunity Radar — Live Search & Universe Inclusion Checker
   ------------------------------------------------------------------------ */

/* Floating Expandable Search Widget */
.radar-floating-search {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
}

.floating-search-capsule {
  position: relative;
  display: flex;
  align-items: center;
  background: #0f172a;
  background: linear-gradient(145deg, #131d33, #0b1322);
  border: 1.5px solid #2563eb;
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(37, 99, 235, 0.22);
  width: 52px;
  height: 52px;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.radar-floating-search.is-extended .floating-search-capsule {
  width: min(29rem, calc(100vw - 3rem));
  border-color: #3b82f6;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.75), 0 0 26px rgba(37, 99, 235, 0.3);
}

.floating-search-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #93c5fd;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s, color 0.15s;
}

.floating-search-toggle:hover {
  color: #fff;
  transform: scale(1.06);
}

.search-svg-icon {
  display: block;
}

.floating-active-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font: 700 0.62rem/1 var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0b1322;
}

.floating-search-input-area {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s 0.05s ease-in-out;
  padding-right: 0.65rem;
}

.radar-floating-search.is-extended .floating-search-input-area {
  opacity: 1;
  pointer-events: auto;
}

#radar-search {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #f8fafc;
  font: 0.88rem var(--sans);
  padding: 0 0.4rem;
  outline: none;
}

#radar-search::placeholder {
  color: #64748b;
}

.floating-kbd {
  padding: 0.12rem 0.38rem;
  border: 1px solid #34445e;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font: 500 0.68rem/1 var(--mono);
  pointer-events: none;
  margin-left: 0.35rem;
  flex-shrink: 0;
}

.floating-btn-clear,
.floating-btn-close {
  border: 0;
  background: transparent;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 0.3rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.floating-btn-clear:hover,
.floating-btn-close:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.1);
}

.floating-status-popup {
  width: min(29rem, calc(100vw - 3rem));
  margin-bottom: 0.75rem;
}

.floating-status-popup .search-status-card {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
}

/* Filterbar trigger pill */
.btn-filterbar-search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid #334155;
  border-radius: 0.4rem;
  background: #101a2a;
  color: #cbd5e1;
  font: 500 0.75rem var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.btn-filterbar-search:hover {
  border-color: #3b82f6;
  background: #1e293b;
  color: #fff;
}

.btn-filterbar-search kbd {
  font-size: 0.62rem;
  padding: 0.05rem 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid #334155;
  border-radius: 0.2rem;
  color: var(--muted);
}

/* Status Banner */
.search-status-banner {
  margin: .85rem 0 1.15rem;
}

.search-status-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 1.15rem;
  border-radius: .65rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
  transition: all .2s ease-in-out;
}

.search-status-card.included {
  background: rgba(5, 46, 22, .55);
  border: 1px solid rgba(34, 197, 94, .35);
  color: #bbf7d0;
}

.search-status-card.state-filtered {
  background: rgba(15, 30, 65, .65);
  border: 1px solid rgba(59, 130, 246, .4);
  color: #bfdbfe;
}

.search-status-card.excluded {
  background: rgba(69, 10, 10, .55);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #fecaca;
}

.search-status-card.not-tracked {
  background: rgba(30, 41, 59, .6);
  border: 1px solid rgba(100, 116, 139, .3);
  color: #cbd5e1;
}

.status-badge-icon {
  font-size: 1.35rem;
  line-height: 1.1;
  flex-shrink: 0;
}

.status-info {
  display: grid;
  gap: .3rem;
  flex: 1;
  min-width: 0;
}

.status-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
}

.status-title .ar {
  color: #94a3b8;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: .82rem;
  font-weight: 500;
}

.status-tag {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: .25rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tag-excluded {
  background: rgba(185, 28, 28, .25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, .4);
}

.status-msg {
  margin: 0;
  font-size: .78rem;
  color: #94a3b8;
  line-height: 1.45;
}

.status-note {
  display: block;
  margin-top: .2rem;
  color: #64748b;
  font-size: .72rem;
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
}

.btn-state-jump {
  padding: .28rem .7rem;
  border: 1px solid #3b82f6;
  border-radius: .4rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font: 600 .72rem var(--sans);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .2);
  transition: background .15s;
}

.btn-state-jump:hover {
  background: #3b82f6;
}

.btn-state-jump.secondary {
  border-color: #475569;
  background: #1e293b;
  color: #e2e8f0;
  box-shadow: none;
}

.btn-state-jump.secondary:hover {
  background: #334155;
  color: #fff;
}

/* Symbol column enrichment */
.sym-cell {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.sym-ticker-row {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.tag-33 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  font-family: var(--mono);
  color: #60a5fa;
  background: rgba(59, 130, 246, .15);
  border: 1px solid rgba(59, 130, 246, .35);
  border-radius: .25rem;
  padding: 0 .32rem;
  height: 1.15rem;
  line-height: 1;
}

.sym-names {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.sym-name-ar {
  color: #94a3b8;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: .75rem;
  line-height: 1.25;
}

.sym-name-en {
  color: #64748b;
  font-size: .68rem;
  line-height: 1.2;
}

@media (max-width: 46rem) {
  .radar-search-input-wrap { max-width: 100%; }
  .search-status-card { flex-direction: column; gap: .5rem; }
}