/* BGT Trainee HQ — design tokens and component styles lifted from REFERENCE-ledger.html,
   extended with the app shell (header, tabs, login, goal banner, timer widget,
   coaching, settings) needed for the full app. */

/* ---------------------------------------------------------------------------
   Bohgan Group design system — tokens.
   Values are the handoff spec exactly (design_handoff_bgt_hq/README.md).

   DARK IS THE DEFAULT, and it is the bare :root rather than a media query. The
   app's own rule has always been "dark unless you explicitly choose light", so
   defining light first and overriding it meant a flash of the wrong theme before
   the script ran. Light is now the single explicit opt-in.

   Legacy names (--card, --rule, --amber, --muted, --faint) are kept as aliases
   of the system names so every existing rule in this file keeps working.
   --------------------------------------------------------------------------- */
:root {
  --bg: #070E16;
  /* NAMING, and it matters: this file has always used --surface for the RAISED tone that
     every existing card sits on. The handoff uses that name for the card tone itself.
     Adopting the spec's name outright repainted 33 rules across Log, History, Team,
     Coaching, Protocol and Settings so each card matched its own background and the
     screens went flat. So the spec's card tone gets its own name, --panel, and --surface
     keeps the meaning the rest of this file already depends on. */
  --panel: #0F1926;
  --surface: #14202F;
  --surface-2: #14202F;
  --raised: #1B2937;
  --line: rgb(242 235 221 / 0.09);
  --line-2: rgb(242 235 221 / 0.16);
  --ink: #F2EBDD;
  --ink-2: rgb(242 235 221 / 0.62);
  --ink-3: rgb(242 235 221 / 0.38);
  --gold: #C9A45C;
  --gold-lt: #EBD3B1;
  --gold-grad: linear-gradient(140deg, #EBD3B1, #C9A45C);
  --up: #35C08A;
  --down: #E5484D;
  --warn: #E8A13A;
  --info: #4C93D6;

  /* Aliases — the names the rest of this file already uses. */
  --card: var(--panel);
  --muted: var(--ink-2);
  --faint: var(--ink-3);
  --rule: var(--line);
  --amber: var(--gold);
  --amber-soft: rgb(201 164 92 / 0.14);
  --jay: var(--info);
  --jay-soft: rgb(76 147 214 / 0.15);
  --chart-amber: #AE8B3C;
  --chart-jay: #3D82C4;
  --profit: var(--up);
  --loss: var(--down);
  --loss-soft: rgb(229 72 77 / 0.12);
  --field: var(--surface-2);

  --r-chip-sm: 6px; --r-chip: 7px; --r-btn-sm: 8px; --r-nav: 9px;
  --r-btn: 11px; --r-rail: 12px; --r-banner: 14px; --r-tile: 16px; --r-panel: 18px;
}

/* The one explicit opt-out. The gold pair goes deep here: #C9A45C on cream fails
   contrast, so the spec ships a separate light-mode gradient. */
:root[data-theme="light"] {
  --bg: #F4F1EA;
  --panel: #FFFFFF;
  --surface: #FAF7F1;
  --surface-2: #FAF7F1;
  --raised: #FFFFFF;
  --line: rgb(15 25 38 / 0.12);
  --line-2: rgb(15 25 38 / 0.24);
  --ink: #0F1926;
  --ink-2: rgb(15 25 38 / 0.68);
  --ink-3: rgb(15 25 38 / 0.45);
  --gold: #8F7238;
  --gold-lt: #B08F45;
  --gold-grad: linear-gradient(140deg, #B08F45, #8F7238);

  --amber-soft: rgb(143 114 56 / 0.10);
  --jay: #2C6BA8;
  --jay-soft: rgb(44 107 168 / 0.10);
  --chart-amber: #8E6C1E;
  --chart-jay: #2C6BA8;
  --profit: #1E8F63;
  --loss: #C1272D;
  --loss-soft: rgb(193 39 45 / 0.09);
  --field: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  margin: 0; color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--amber); }

/* Content column per the handoff: 1280px cap, 40px horizontal padding. The old 880px
   was a single-column reading measure from before there was a dashboard to lay out — it
   left most of a 1440px screen empty. Prose inside still caps itself in ch, so the wider
   column buys grid room without stretching any line of text past comfortable. */
.wrap { max-width: 1280px; margin: 0 auto; padding: 28px 40px 72px; }
h1 {
  font-family: "Sora", sans-serif;
  font-size: clamp(26px, 5vw, 36px); font-weight: 700; margin: 0; letter-spacing: 0.01em;
}
.kicker {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 2px;
}
h2 {
  font-family: "Sora", sans-serif;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  margin: 30px 0 12px;
}
h2 .n { color: var(--amber); }
h3 {
  font-family: "Sora", sans-serif;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin: 0 0 8px;
}
.pos { color: var(--profit); }
.neg { color: var(--loss); }

/* ---------- login ---------- */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 34px 30px; width: 100%; max-width: 340px;
}
.login-card h1 { margin-bottom: 6px; }
.login-card .kicker { margin-bottom: 22px; }
.who-pick { display: flex; gap: 10px; margin-bottom: 16px; }
.who-btn {
  flex: 1; appearance: none; border: 1px solid var(--rule); background: var(--field); color: var(--muted);
  border-radius: 6px; padding: 12px 8px; cursor: pointer; font: 600 13.5px "Sora", sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.who-btn[aria-pressed="true"].amber { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); }
.who-btn[aria-pressed="true"].jay { border-color: var(--jay); color: var(--jay); background: var(--jay-soft); }
.login-card input[type="password"] { width: 100%; margin-bottom: 14px; }
.login-card .save { width: 100%; }
.login-err { color: var(--loss); font-size: 13px; margin: -6px 0 14px; min-height: 1em; }

/* ---------- header / shell ---------- */
.app { display: none; }
.app.show { display: block; }
header.top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
header.top .brand { margin-right: auto; }
.iconbtn {
  appearance: none; border: 1px solid var(--rule); background: var(--field); color: var(--muted);
  border-radius: 4px; width: 34px; height: 34px; cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { color: var(--amber); border-color: var(--amber); }
.userchip {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 7px 12px; border-radius: 20px;
}
.userchip.amber { background: var(--amber-soft); color: var(--amber); }
.userchip.jay { background: var(--jay-soft); color: var(--jay); }
.linkbtn {
  appearance: none; border: 0; background: none; color: var(--faint); cursor: pointer;
  font: 500 12.5px "IBM Plex Sans", sans-serif; text-decoration: underline; padding: 0;
}
.linkbtn:hover { color: var(--amber); }

/* ---------- goal banner ---------- */
.goalbanner {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 14px 16px; margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
}
.goaltext { display: flex; align-items: baseline; gap: 8px; flex: 1 1 240px; min-width: 200px; }
.goaltext .cap { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.goaltext .txt { font-size: 14.5px; font-weight: 500; }
.goaltext .setdate { font-size: 11.5px; color: var(--faint); }
.goaledit { display: flex; gap: 6px; align-items: center; flex: 1 1 100%; }
.goaledit input[type="text"] { flex: 1; }
.meters { display: flex; gap: 22px; flex-wrap: wrap; }
.meter { min-width: 150px; }
.meter .mhead { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.meter .mhead .who.amber { color: var(--amber); }
.meter .mhead .who.jay { color: var(--jay); }
.meter .mbar { height: 7px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.meter .mbar > i { display: block; height: 100%; border-radius: 4px; background: var(--profit); }
.meter.warn .mbar > i { background: var(--amber); }
.meter.critical .mbar > i { background: var(--loss); }
.meter .msub { font-size: 11px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.dailystop {
  background: var(--loss-soft); color: var(--loss); border: 1px solid var(--loss); border-radius: 6px;
  padding: 8px 14px; margin: 0 0 14px; font-size: 13px; font-weight: 600;
}

#banner {
  display: none; margin: 0 0 20px; padding: 10px 14px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--rule); font-size: 13.5px; color: var(--muted);
}
#banner.err { border-color: var(--loss); color: var(--loss); }
#banner.show { display: block; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 22px 0 22px; flex-wrap: wrap; }
.tabbtn {
  appearance: none; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted);
  font: 600 13px "Sora", sans-serif; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 14px; cursor: pointer; margin-bottom: -1px;
}
.tabbtn:hover { color: var(--amber); }
.tabbtn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amber); }
.panel { display: none; }
.panel.show { display: block; }

/* ---------- week cards ---------- */
.wkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .wkgrid { grid-template-columns: 1fr; } }
.wk { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; }
.wk .who { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.wk .who.amber { color: var(--amber); }
.wk .who.jay { color: var(--jay); }
.wk .who.both { color: var(--muted); }
.wk .big { font-family: "IBM Plex Mono", monospace; font-size: 26px; font-weight: 600; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.wk .sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk .delta { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.wk .delta .vs { color: var(--faint); font-weight: 400; font-family: "IBM Plex Sans", sans-serif; }
#wksummary { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; max-width: 68ch; }

/* ---------- charts ---------- */
.chartcard { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px 10px; margin-bottom: 14px; }
.charthead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.charthead .t { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.legend { display: flex; gap: 14px; margin-left: auto; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend .sw-amber { background: var(--chart-amber); }
.legend .sw-jay { background: var(--chart-jay); }
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .zero { stroke: var(--faint); stroke-width: 1; }
.chart .bar-amber { fill: var(--chart-amber); }
.chart .bar-jay { fill: var(--chart-jay); }
.chart .bar-amber:hover, .chart .bar-jay:hover,
.chart .bar-amber:focus, .chart .bar-jay:focus { opacity: 0.82; outline: none; }
.chart text { font-family: "IBM Plex Mono", monospace; fill: var(--faint); font-size: 10px; }
.chart text.combo { fill: var(--muted); font-weight: 600; font-size: 10.5px; }
.chart .noData { fill: var(--faint); font-size: 12px; font-family: "IBM Plex Sans", sans-serif; }
#tooltip {
  position: fixed; z-index: 20; pointer-events: none; display: none;
  background: var(--ink); color: var(--bg); border-radius: 4px; padding: 6px 10px;
  font: 500 12px "IBM Plex Mono", monospace; max-width: 240px;
}
.tblview summary { cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 6px 0; }
.tblview summary:hover { color: var(--amber); }
.tblview table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.tblview th { text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--ink); }
.tblview th:first-child, .tblview td:first-child { text-align: left; padding-left: 0; }
.tblview td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--rule); }

/* ---------- form ---------- */
.form { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 18px; }
.grid { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 14px; }
.lbl {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--field); }
.seg button {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  font: 500 13.5px "IBM Plex Sans", sans-serif; padding: 8px 14px; cursor: pointer;
  border-left: 1px solid var(--rule);
}
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
input[type="date"], input[type="number"], input[type="text"], input[type="password"], select, textarea {
  background: var(--field); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px;
  font: 400 14px "IBM Plex Sans", sans-serif; padding: 8px 10px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--amber); outline-offset: -1px; }
.hint { font-size: 12px; color: var(--faint); margin-top: 5px; }
.traderow { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
.traderow input.rr { width: 90px; font-family: "IBM Plex Mono", monospace; }
.traderow input.note { flex: 1; min-width: 120px; }
.traderow .x {
  appearance: none; border: 1px solid var(--rule); background: var(--field); color: var(--muted);
  border-radius: 4px; width: 30px; height: 34px; cursor: pointer; font-size: 14px;
}
.traderow .x:hover { color: var(--loss); border-color: var(--loss); }
.addrow {
  appearance: none; display: inline-block; border: 1px dashed var(--rule); background: transparent; color: var(--muted);
  border-radius: 4px; padding: 7px 12px; cursor: pointer; font: 500 13px "IBM Plex Sans", sans-serif;
}
.addrow:hover { color: var(--amber); border-color: var(--amber); }
textarea { width: 100%; min-height: 64px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
@media (max-width: 620px) { .two { grid-template-columns: 1fr; } }
.formfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.save {
  appearance: none; border: 0; background: var(--amber); color: var(--bg);
  font: 600 14px "IBM Plex Sans", sans-serif; padding: 10px 22px; border-radius: 4px; cursor: pointer;
}
.save:disabled { opacity: 0.5; cursor: default; }
.save:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ghost {
  appearance: none; border: 1px solid var(--rule); background: var(--field); color: var(--muted);
  font: 500 13.5px "IBM Plex Sans", sans-serif; padding: 9px 16px; border-radius: 4px; cursor: pointer;
}
.ghost:hover { color: var(--amber); border-color: var(--amber); }
.cancel { appearance: none; border: 0; background: none; color: var(--muted); cursor: pointer; font: 500 13.5px "IBM Plex Sans", sans-serif; text-decoration: underline; display: none; }
#rrtotal { font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600; }
#savestate { font-size: 13px; color: var(--muted); }
#shots-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.thumb { position: relative; }
.thumb img { height: 74px; border-radius: 4px; border: 1px solid var(--rule); display: block; }
.thumb.removed img { opacity: 0.3; }
.thumb .rm {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: var(--ink); color: var(--bg); font-size: 11px; cursor: pointer; line-height: 1;
}
.ai-affordance {
  display: flex; align-items: center; gap: 10px; background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: 4px; padding: 8px 12px; margin: -2px 0 10px; font-size: 13px; color: var(--ink);
}
.ai-affordance button { appearance: none; border: 0; background: var(--amber); color: var(--bg); border-radius: 4px; padding: 6px 12px; cursor: pointer; font: 600 12.5px "IBM Plex Sans", sans-serif; }
.ai-affordance .dismiss { appearance: none; border: 0; background: none; color: var(--muted); cursor: pointer; margin-left: auto; font-size: 16px; }
.ai-review {
  border: 1px dashed var(--amber); border-radius: 4px; padding: 8px 12px; margin: 0 0 12px;
  font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ai-review .dismiss { appearance: none; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; text-decoration: underline; }

/* ---------- entries ---------- */
.filters { display: flex; gap: 8px; margin: 0 0 14px; }
.chip {
  appearance: none; border: 1px solid var(--rule); background: transparent; color: var(--muted);
  font: 500 12.5px "IBM Plex Mono", monospace; letter-spacing: 0.06em; padding: 5px 12px;
  border-radius: 20px; cursor: pointer; text-transform: uppercase;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.entry { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; margin-bottom: 14px; }
.ehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.edate { font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600; }
.tag {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
}
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.jay { background: var(--jay-soft); color: var(--jay); }
.tag.acct { background: var(--surface); color: var(--muted); border: 1px solid var(--rule); }
.nums { margin-left: auto; display: flex; gap: 14px; align-items: baseline; font-variant-numeric: tabular-nums; }
.rrbig { font-family: "IBM Plex Mono", monospace; font-size: 17px; font-weight: 600; }
.pnl { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; color: var(--muted); }
.entry details.trades { margin-top: 10px; }
.entry details.trades summary { cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.entry details.trades summary:hover { color: var(--amber); }
.tlist { margin: 8px 0 0; padding: 0; list-style: none; }
.tlist li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.tlist .trr { font-family: "IBM Plex Mono", monospace; font-weight: 600; min-width: 56px; text-align: right; }
.tlist .tnote { color: var(--muted); }
.shotrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.shotrow img { height: 92px; border-radius: 4px; border: 1px solid var(--rule); cursor: zoom-in; }
.shotrow img.zoom { height: auto; max-width: 100%; cursor: zoom-out; }
.refl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 620px) { .refl { grid-template-columns: 1fr; } }
.refl .cell { border-left: 3px solid var(--rule); padding: 2px 0 2px 12px; font-size: 13.5px; }
.refl .cell.good { border-left-color: var(--profit); }
.refl .cell.better { border-left-color: var(--loss); }
.refl .cap { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 3px; }
.eacts { display: flex; gap: 12px; margin-top: 12px; }
.eacts button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: 500 12.5px "IBM Plex Sans", sans-serif; color: var(--faint); text-decoration: underline; }
.eacts button:hover { color: var(--amber); }
.eacts button.confirm { color: var(--loss); font-weight: 600; }
.empty { color: var(--faint); font-style: italic; padding: 18px 0; }

/* ---------- coaching ---------- */
.weekly-block { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; margin-bottom: 20px; }
.weekly-block .wsummary { font-size: 14px; margin: 8px 0 12px; }
.weekly-block .wmeta { font-size: 11.5px; color: var(--faint); font-family: "IBM Plex Mono", monospace; }
.focuslist { list-style: none; margin: 0; padding: 0; }
.focuslist li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13.5px; }
.focuslist li::before { content: "\2192"; color: var(--amber); flex-shrink: 0; }
.coach-item { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; }
.coach-item .chead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.coach-item .ctitle { font-weight: 600; font-size: 14px; }
.coach-item .cdate { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--faint); margin-left: auto; }
.coach-item .csource { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-family: "IBM Plex Mono", monospace; }
.coach-item ul.points { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; }
.coach-item ul.points li { margin-bottom: 3px; }
.ai-extract { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; margin-bottom: 20px; }
.ai-extract textarea { min-height: 110px; }
.ai-disabled-note { font-size: 12.5px; color: var(--faint); font-style: italic; }
.addfeedback { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px; margin-bottom: 20px; }

/* ---------- settings ---------- */
.settings-block { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 18px; margin-bottom: 18px; max-width: 480px; }
.settings-block .fld { margin-bottom: 12px; }
.settings-block label.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.settings-msg { font-size: 12.5px; color: var(--muted); margin-top: 6px; min-height: 1em; }
.settings-msg.err { color: var(--loss); }
.settings-msg.ok { color: var(--profit); }

/* ---------- floating timer widget ---------- */
.timerwidget {
  position: fixed; bottom: 18px; right: 18px; z-index: 15; background: var(--card);
  border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.14);
  font-family: "IBM Plex Mono", monospace; overflow: hidden; width: 176px;
}
.timerwidget .twhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: pointer; background: var(--surface); }
.timerwidget .twhead .tw-name { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.timerwidget .twhead .tw-toggle { color: var(--faint); font-size: 11px; }
.timerwidget .twbody { padding: 10px 12px 12px; }
.timerwidget.collapsed .twbody { display: none; }
.timerwidget .tw-count { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 2px; }
.timerwidget .tw-next { font-size: 10.5px; color: var(--muted); }
.timerwidget .tw-zones { font-size: 10px; color: var(--faint); margin-top: 6px; }
.state-good .tw-name, .state-good .tw-count { color: var(--profit); }
.state-warn .tw-name, .state-warn .tw-count { color: var(--amber); }
.state-muted .tw-name, .state-muted .tw-count { color: var(--faint); }

footer { margin-top: 50px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--faint); }

/* ---------- prop starting point (Settings) ---------- */
.opening-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 620px) {
  .opening-grid { grid-template-columns: 1fr; gap: 18px; }
}
.opening-col .kicker { margin: 0 0 10px; }
.opening-col .kicker.amber-k { color: var(--amber); }
.opening-col .kicker.jay-k { color: var(--jay); }
.opening-col input { width: 100%; }
.opening-preview {
  margin: 10px 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.opening-preview .ok { color: var(--profit); }
.opening-preview .warn { color: var(--amber); }
.opening-preview .critical { color: var(--loss); }

/* ---------- daily briefing (announcements + coaching focus) ---------- */
.briefing { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
.ann {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--surface);
}
.ann .badge {
  font: 600 9.5px 'Sora', sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; flex: none; margin-top: 1px;
}
.ann.pause { border-color: var(--loss); background: var(--loss-soft); }
.ann.pause .badge { background: var(--loss); color: var(--bg); }
.ann.risk { border-color: var(--amber); }
.ann.risk .badge { background: var(--amber); color: var(--bg); }
.ann.notice .badge { background: var(--amber-soft); color: var(--amber); }
.ann .anntext { font-size: 14px; line-height: 1.5; }
.ann .annmeta { font: 400 11px 'IBM Plex Mono', monospace; color: var(--faint); margin-top: 4px; }
.tipcard {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--surface);
}
.tipcard .tipmark { color: var(--amber); font-size: 15px; line-height: 1.5; flex: none; }
.tipcard .tipbody { flex: 1; min-width: 0; }
.tiplabel {
  font: 400 10px 'IBM Plex Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 3px;
}
.tiptext { font-size: 15px; line-height: 1.5; margin: 0; }
.checkin {
  font: 400 10px 'IBM Plex Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--profit); flex: none; white-space: nowrap; margin-top: 2px;
}
@media (max-width: 620px) { .checkin { display: none; } }

/* ---------- brand masthead ---------- */
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mastmark {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule), 0 8px 28px -10px rgb(0 0 0 / 0.55);
}
.brandtext { min-width: 0; }
h1.wordmark {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 34px; line-height: 1;
  letter-spacing: 0.12em; margin: 0 0 5px;
}
.loginmark { display: flex; justify-content: center; margin-bottom: 18px; }
.loginmark img {
  width: 108px; height: 108px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule), 0 14px 40px -12px rgb(0 0 0 / 0.6);
}
.login-card h1.wordmark { font-size: 30px; text-align: center; }
.login-card .kicker { text-align: center; }
@media (max-width: 620px) {
  .mastmark { width: 54px; height: 54px; }
  h1.wordmark { font-size: 26px; }
  .loginmark img { width: 88px; height: 88px; }
}

/* ---------- sidebar shell ---------- */
.shell { display: grid; grid-template-columns: 250px 1fr; align-items: start; }
@media (max-width: 1180px) { .shell { grid-template-columns: 64px 1fr; } }
@media (max-width: 760px) { .shell { grid-template-columns: 1fr; } }
/* Inside the shell the column is centred in whatever the rail leaves.
   `width: 100%` is load-bearing: auto margins on a GRID ITEM switch it from stretch to
   fit-content, so without a definite width every tab was as wide as its own content —
   Today 1110px, Team 727px — and the app changed width as you moved between them. */
.shell > .wrap { max-width: 1280px; width: 100%; margin: 0 auto; }

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--rule); background: var(--surface);
  padding: 22px 0; display: flex; flex-direction: column; gap: 22px;
}
@media (max-width: 760px) {
  .rail { position: static; height: auto; flex-direction: row; align-items: center;
          overflow-x: auto; padding: 10px 14px; gap: 10px; border-right: none;
          border-bottom: 1px solid var(--rule); }
}
.railbrand { display: flex; align-items: center; gap: 11px; padding: 0 20px; }
.railbrand img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.railword { font: 700 14px 'Sora', sans-serif; letter-spacing: 0.12em; display: block; }
.railsub { font: 400 9px 'IBM Plex Mono', monospace; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--faint); display: block; margin-top: 2px; }
.railgroup { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) { .railgroup { flex-direction: row; gap: 4px; } }
.railhead {
  font: 400 9.5px 'IBM Plex Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px; padding: 0 20px;
}
.acctcard { padding: 0 20px; }
.acctname { display: block; font: 500 14px 'IBM Plex Sans', sans-serif; }
.acctrole {
  display: inline-block; margin-top: 4px; font: 400 9px 'IBM Plex Mono', monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
  background: var(--amber-soft); border-radius: 999px; padding: 2px 8px;
}
.railitem {
  display: flex; align-items: center; gap: 11px; padding: 9px 20px; width: 100%;
  color: var(--muted); text-decoration: none; font: 500 14px 'IBM Plex Sans', sans-serif;
  border: none; background: none; border-left: 2px solid transparent; cursor: pointer;
  text-align: left; white-space: nowrap; transition: background 120ms ease, color 120ms ease;
}
.railitem:hover { background: var(--bg); color: var(--ink); }
.railitem.active { background: var(--amber-soft); color: var(--amber); border-left-color: var(--amber); }
.railitem .ico { width: 16px; text-align: center; flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.railfoot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) { .railfoot { margin-top: 0; margin-left: auto; flex-direction: row; } }
@media (max-width: 1180px) {
  .railbrand { padding: 0; justify-content: center; }
  .railhead, .acctcard, .railtxt { display: none; }
  .railitem { justify-content: center; padding: 9px 0; }
}
@media (max-width: 760px) { .railbrand .railtxt { display: none; } }

/* ---------- operator-view preview ---------- */
.previewbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  justify-content: center; gap: 14px; padding: 9px 16px;
  background: var(--amber); color: var(--bg);
  font: 600 11px 'Sora', sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
}
.pvexit {
  border: 1px solid var(--bg); background: none; color: var(--bg); cursor: pointer;
  border-radius: 999px; padding: 3px 12px; font: inherit; letter-spacing: 0.1em;
}
.pvexit:hover { background: var(--bg); color: var(--amber); }
body.preview-operator .staff-only { display: none !important; }

/* One maxim a day, deliberately quiet — it is a nudge, not a headline. */
.dailyquote {
  font-size: 13.5px; line-height: 1.55; color: var(--muted); font-style: italic;
  margin: 2px 0 0; padding-left: 16px; border-left: 2px solid var(--amber-soft);
}

/* Strategy picker wraps — there are more strategies than account types. */
.seg.wrapseg { flex-wrap: wrap; }
.seg.wrapseg button { flex: 0 1 auto; }
.seg .segnone { opacity: 0.75; font-style: italic; }

/* ---------- journal on the Bohgan system ----------
   The tokens were swapped earlier but the components never were: panels rendered
   transparent with square corners, so nothing on the page read as a surface. These
   bring the journal's shapes in line with the desk — cards on --surface, 1px border,
   14px radius, 4pt spacing. */
.panel.show {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px;
}
.form { background: none; border: none; padding: 0; }
.grid { gap: 16px; }
.fld { margin-bottom: 16px; }
input[type=text], input[type=number], input[type=date], textarea, select {
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--field);
  color: var(--ink);
}
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, textarea:focus {
  outline: 2px solid var(--amber); outline-offset: -1px; border-color: var(--amber);
}
.save, button.save {
  border-radius: 8px; height: 40px; padding: 0 20px;
  background: linear-gradient(135deg, var(--amber-bright, var(--amber)), var(--amber));
  color: var(--bg); font-family: 'Sora', sans-serif; font-weight: 600; border: none;
  transition: filter 120ms ease, transform 120ms ease;
}
.save:hover { filter: brightness(1.1); transform: translateY(-1px); }
.goalbanner {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 22px;
}
.tabs { border-bottom: 1px solid var(--rule); gap: 4px; }
.tabbtn {
  font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; border-radius: 8px 8px 0 0;
}
.tabbtn[aria-selected="true"] { color: var(--amber); border-bottom-color: var(--amber); }
.ecard, .card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }

/* What the screenshot could not supply, asked for rather than left silently blank. */
.missing-note {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 8px;
  background: var(--amber-soft); border: 1px solid var(--amber);
  color: var(--ink); font-size: 13.5px; line-height: 1.5;
}
.missing-note b {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 3px;
}

/* Where you stand this week and month, on the page you log from. */
.period-totals {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--rule);
}
.period-totals .pt { display: flex; flex-direction: column; gap: 2px; }
.period-totals .pt i {
  font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.period-totals .pt b {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
}
.period-totals .pt em {
  font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint);
}
.period-totals .pt-delta {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; align-self: center;
}
@media (max-width: 560px) { .period-totals { gap: 8px 18px; } .period-totals .pt b { font-size: 22px; } }

/* ---------- mobile ----------
   Grid children default to min-width:auto, so any wide descendant (a table, a long
   segmented control) widens the column and the whole page slides sideways. Pinning the
   children to min-width:0 makes them shrink to the viewport and scroll their own
   overflow instead. */
.shell, .shell > * { min-width: 0; }

@media (max-width: 760px) {
  .wrap { padding: 18px 14px 72px; }
  /* The rail wraps onto as many rows as it needs rather than scrolling sideways —
     a nav you have to swipe to discover is a nav people do not use. */
  .rail {
    flex-wrap: wrap; overflow-x: visible; justify-content: center;
    row-gap: 4px; padding: 10px 12px;
  }
  /* The base rule sets width:100% for the vertical rail; in a wrapped row that makes
     every item full-bleed and pushes the rest off screen. 44px is the minimum a thumb
     can hit reliably — icon-only items land well under that on padding alone. */
  .railitem {
    flex: 0 0 auto; width: auto; min-width: 44px; min-height: 44px;
    padding: 0 12px; justify-content: center; align-items: center;
  }
  .railitem .ico { font-size: 15px; }
  .railfoot { margin-left: 0; }
  /* Five tabs do not fit one 390px row, and a sideways-scrolling strip hides the last
     one with no affordance — Settings simply vanishes. They wrap instead, so every tab
     is visible and the strip is not one more thing that slides. */
  .tabs { flex-wrap: wrap; row-gap: 0; }
  .tabbtn { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; font-size: 13px; }
  /* Wide controls wrap instead of forcing the page wider. */
  .seg { flex-wrap: wrap; }
  .grid { grid-template-columns: 1fr; }
  .period-totals { gap: 10px 20px; }
  table { font-size: 13px; }
  /* Anything that genuinely cannot shrink gets its own scroller. */
  .gridscroll, .tablewrap, .chartscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.mhead .mlabel { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em; color: var(--faint); }

/* The byline is a separate line under the notice — inline it collides with the last
   word of the body text. */
.ann .annmeta { display: block; margin-top: 6px; }

/* Room and Standing are both number cards, so they pair; the two prose cards each take
   the full width. Left as one column below 720px by the rule above. */
@media (min-width: 720px) {
  #prep-focus { grid-column: 1 / -1; }
}

/* The floating market timer is pinned bottom-right on desktop, where there is dead
   space. On a phone that lands on top of the pause notice, so it docks to the bottom
   edge instead and stops covering anything that is being read. */
@media (max-width: 719px) {
  .mhead { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* On a phone a 176px card pinned to a corner sits on top of whatever is being read.
   It docks to the bottom edge as a full-width bar instead, and the page reserves the
   room so nothing ever hides underneath it. */
@media (max-width: 719px) {
  .timerwidget {
    left: 0; right: 0; bottom: 0; width: auto; border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .timerwidget .twhead { padding: 10px 16px; }
  .timerwidget .twbody { padding: 10px 16px 14px; }
  footer { padding-bottom: 150px; }
}

/* The masthead is branding, and on a phone it was pushing the first real card below the
   fold. It shrinks so the 6:30 questions are what you actually open to, and the user chip
   sits beside the wordmark instead of on its own line. */
@media (max-width: 719px) {
  .top { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .brand { gap: 10px; }
  .mastmark { width: 40px; height: 40px; }
  .wordmark { font-size: 24px; letter-spacing: 0.05em; }
  .top .kicker { font-size: 9.5px; letter-spacing: 0.09em; }
  .userchip { margin: 0; padding: 5px 11px; font-size: 10.5px; flex: 0 0 auto; }
  .tabs { margin-top: 14px; }
}

/* ---------- Google sign-in ---------- */
.orrule {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.orrule::before, .orrule::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--surface); color: var(--ink); text-decoration: none;
  font: 600 14px 'IBM Plex Sans', sans-serif;
}
.gbtn:hover { border-color: var(--amber); }
.gbtn svg { flex: 0 0 auto; }
.login-note { margin-top: 14px; font-size: 13px; line-height: 1.5; text-align: left; }
.login-note.ok { color: var(--profit); }
.login-note.err { color: var(--loss); }

/* ---------- Team: the desk as an operator sees it ---------- */
.teamhead { margin-bottom: 16px; }
.teamsub { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.standouts { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
@media (min-width: 720px) { .standouts { grid-template-columns: repeat(3, 1fr); } }
.standout { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; }
.soname { font: 600 16px 'Sora', sans-serif; margin: 6px 0 2px; }
.someta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); margin: 0; }
.provisional {
  grid-column: 1 / -1;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 14px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0;
}

.roster { display: flex; flex-direction: column; gap: 10px; }
.rcard { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
/* Your own row is marked, not moved — rank has to stay honest. */
.rcard.self { border-color: var(--amber); }
.rcard header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rrank {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--faint);
  min-width: 20px; text-align: center;
}
.rrank.none { opacity: .45; }
.rname { font: 600 15.5px 'Sora', sans-serif; flex: 1 1 auto; }
.rname em { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--amber); letter-spacing: .1em; }
.rbadges { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--muted);
}
.pill.tier { border-color: var(--amber); color: var(--amber); }
.pill.tier.muted { border-color: var(--rule); color: var(--faint); }

.rstats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; }
.rstats span { display: flex; flex-direction: column; }
.rstats b { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 600; }
.rstats b.up { color: var(--profit); }
.rstats b.down { color: var(--loss); }
.rstats i {
  font-family: 'IBM Plex Mono', monospace; font-style: normal; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 2px;
}
.rstrat { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
.rstrat b.up { color: var(--profit); }
.rstrat b.down { color: var(--loss); }
.thin, .nosessions { font-size: 12.5px; color: var(--faint); margin: 10px 0 0; }

/* ---------- Session summary + notes ---------- */
.summaryhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.summaryhead .lbl { margin: 0; }
.aitag {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber);
  border-radius: 999px; padding: 2px 8px;
}
.linkbtn {
  appearance: none; background: none; border: 0; color: var(--amber); cursor: pointer;
  font: 600 12.5px 'IBM Plex Sans', sans-serif; padding: 4px 2px; margin-left: auto;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn:disabled { color: var(--faint); cursor: default; text-decoration: none; }
.linkbtn.muted { color: var(--muted); }

.notesblock { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 18px; }
.notecount { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint); }
.notelist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.note { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; }
/* A trainer note is weighted differently by the AI, so it reads differently here too. */
.note.trainer { border-left: 3px solid var(--amber); }
.notehead { display: flex; align-items: center; gap: 8px; }
.notewho { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.notewhen { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--faint); }
.notenew {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--profit); border: 1px solid var(--profit);
  border-radius: 999px; padding: 1px 6px;
}
.noterm { appearance: none; background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; margin-left: auto; padding: 0 2px; }
.noterm:hover { color: var(--loss); }
.notebody { margin: 6px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

.noteadd textarea { width: 100%; }
.noterow { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.noterow .linkbtn { margin-left: auto; }
.foldrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--amber); border-radius: 10px;
  padding: 10px 14px; font-size: 13px;
}
.proposal { margin-top: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.proplabel { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 12px 0 4px; }
.proptext { margin: 0; font-size: 14px; line-height: 1.55; }
.proposal .noterow .linkbtn { margin-left: 0; }
.proposal .noterow { justify-content: flex-start; gap: 18px; }
.notemsg { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; min-height: 1em; }
.notemsg.err { color: var(--loss); }
.noteauthor {
  width: 150px; background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 6px; padding: 7px 9px; font-size: 13px;
}

/* ---------- Today: the session you already logged ---------- */
.tsession { display: flex; flex-direction: column; gap: 8px; }
.tstats { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tbig { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; }
.tbig.up { color: var(--profit); }
.tbig.down { color: var(--loss); }
.tmeta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.tlist { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tlist li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.tlist b { font-family: 'IBM Plex Mono', monospace; min-width: 52px; }
.tlist b.up { color: var(--profit); }
.tlist b.down { color: var(--loss); }
.tlist span { color: var(--muted); }
.tsum { margin: 0; font-size: 13.5px; line-height: 1.5; }
.tsum i {
  font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-right: 8px;
}

/* ---------- Training ---------- */
.trdate {
  margin-left: auto; background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 8px; padding: 8px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
}
.trblock { margin-bottom: 30px; }
.trblock > .prepcap { margin-bottom: 12px; }
.trsession { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.trshots { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.trshots img {
  width: 220px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rule);
  display: block;
}
.trshots a:hover img { border-color: var(--amber); }

/* Trades fold away — the number and the two summary lines are the point. */
.tdetails { margin-top: 10px; }
.tdetails > summary {
  cursor: pointer; list-style: none; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  padding: 4px 0;
}
.tdetails > summary::-webkit-details-marker { display: none; }
.tdetails > summary::before { content: '+ '; color: var(--amber); }
.tdetails[open] > summary::before { content: '– '; }
.tdetails > summary:hover { color: var(--amber); }
.trtx { font-size: 13px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; margin: 8px 0 0; }

.trcoach {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 10px;
}
.trcoach header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trtitle { font: 600 15.5px 'Sora', sans-serif; flex: 1 1 auto; }
.trsum { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 8px 0 0; }
.trcoach .coachlist { gap: 6px; margin-top: 6px; }
.trcoach .coachlist li { font-size: 14px; }

.tradd { margin-top: 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.tradd > summary {
  cursor: pointer; list-style: none; padding: 13px 18px;
  font: 600 13.5px 'IBM Plex Sans', sans-serif; color: var(--amber);
}
.tradd > summary::-webkit-details-marker { display: none; }
.tradd > summary::before { content: '+ '; }
.tradd[open] > summary::before { content: '– '; }
.traddbody { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.traddbody textarea, .traddbody input[type="url"] { width: 100%; }
.traddbody input[type="url"] {
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
.traddbody .save { align-self: flex-start; }

/* ---------- Pre-market protocol ---------- */
#tr-mantra {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--amber); margin: 0 0 14px;
}
.corelist { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
.corelist li {
  counter-increment: rule; display: grid; grid-template-columns: 30px 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.corelist li::before {
  content: counter(rule, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--faint); padding-top: 3px;
}
.corelist b { font-weight: 600; font-size: 14.5px; }
.corelist span { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.checks {
  margin: 22px 0; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
}
.checks .lbl {
  flex-basis: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin: 0;
}
.checks .c { font-size: 14px; }
.checks .c::before { content: '☐ '; color: var(--faint); }

.refsec { border-bottom: 1px solid var(--rule); }
.refsec:first-of-type { border-top: 1px solid var(--rule); }
.refsec > summary {
  cursor: pointer; list-style: none; padding: 13px 2px;
  font: 600 13px 'Sora', sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.refsec > summary::-webkit-details-marker { display: none; }
.refsec > summary::before { content: '+ '; color: var(--amber); }
.refsec[open] > summary::before { content: '– '; }
.refsec > summary:hover { color: var(--amber); }
.refbody { padding: 2px 2px 20px 22px; max-width: 640px; }
.refbody h4 {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin: 16px 0 6px;
}
.refbody p, .refbody li { font-size: 14px; line-height: 1.6; }
.refbody ul { margin: 0 0 12px; padding-left: 18px; }
.refbody li { margin-bottom: 6px; }
.refbody .do { color: var(--profit); }
.refbody .never { color: var(--loss); }
.wintable { border-collapse: collapse; width: 100%; min-width: 460px; margin: 4px 0 12px; }
.wintable th {
  text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule);
}
.wintable td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; vertical-align: top; }
.wintable td.t { white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.wintable .go { color: var(--profit); font-weight: 600; }
.wintable .no { color: var(--loss); font-weight: 600; }
.wintable .maybe { color: var(--amber); font-weight: 600; }
.callout {
  border-left: 3px solid var(--amber); background: var(--surface);
  padding: 12px 16px; margin: 12px 0; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.55;
}
.callout.loss { border-left-color: var(--loss); }

/* ---------- Viewing as another operator ---------- */
.previewbar.asbar { background: var(--loss); color: #fff; }
.previewbar.asbar .pvexit { border-color: rgba(255,255,255,.5); color: #fff; }
/* Nothing is writable while previewing, so the controls that would write are removed
   rather than left to fail against the server. */
body.viewing-as .tabbtn[data-tab="log"],
body.viewing-as #go-log,
body.viewing-as .tradd,
body.viewing-as #pr-add,
body.viewing-as .notesblock,
body.viewing-as .eacts,
body.viewing-as #gen-weekly-btn,
body.viewing-as .tabbtn[data-tab="settings"] { display: none !important; }

/* ---------- Protocol additions ---------- */
.addition { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.addition .notehead { margin-bottom: 6px; }
.addrule { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.addwhy { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.verdict { border-radius: 10px; padding: 14px 16px; border: 1px solid var(--rule); background: var(--surface); }
.verdict .vhead { margin: 0 0 6px; font: 600 14px 'Sora', sans-serif; }
.verdict p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; }
.verdict .vcite { color: var(--muted); font-size: 12.5px; font-style: italic; }
.verdict.covered { border-color: var(--amber); }
.verdict.covered .vhead { color: var(--amber); }
.verdict.conflicts { border-color: var(--loss); }
.verdict.conflicts .vhead { color: var(--loss); }
.verdict.added { border-color: var(--profit); }
.verdict.added .vhead { color: var(--profit); }

/* The day sits under the week rollup, separated so it reads as detail, not a repeat. */
.daysection { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }

/* ===========================================================================
   TODAY — the dashboard, to the Bohgan handoff spec.
   Values here are the spec's, not approximations: 18px panel radius, 16px card
   gap, 46px hero, 30px stat, 7px risk meter, 5px step meter.
   =========================================================================== */
/* .show on the class alone loses to an id selector, so this MUST carry .show — without
   it the dashboard outranks `.panel { display: none }` and renders on top of every other
   tab. */
#panel-today.show { display: flex; flex-direction: column; gap: 16px; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.eyebrow.gold { color: var(--gold); }
/* The rule trails off rather than boxing the label in. */
.eyebrow i { flex: 1; height: 1px; background: linear-gradient(90deg, rgb(201 164 92 / 0.45), transparent); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 20px 22px;
}
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* (a) directive row */
.directiverow { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.rightstack { display: flex; flex-direction: column; gap: 16px; }
.directive {
  border: 1px solid rgb(201 164 92 / 0.28); border-radius: var(--r-panel); padding: 26px 28px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(201 164 92 / 0.13), rgb(201 164 92 / 0) 58%),
    var(--panel);
}
.dirhead {
  font: 600 31px/1.16 'Sora', sans-serif; letter-spacing: -0.015em;
  max-width: 22ch; text-wrap: pretty; margin: 14px 0 10px; color: var(--ink);
}
.dirbody { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 56ch; margin: 0; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  padding: 6px 11px; border-radius: var(--r-chip); background: rgb(242 235 221 / 0.06);
  border: 1px solid var(--line); font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-2); white-space: nowrap;
}
:root[data-theme="light"] .chip { background: rgb(15 25 38 / 0.04); }

.daystate { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; margin-top: 5px; }
.dot.up { background: var(--up); box-shadow: 0 0 0 4px rgb(53 192 138 / 0.16); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 4px rgb(232 161 58 / 0.16); }
.dot.down { background: var(--down); box-shadow: 0 0 0 4px rgb(229 72 77 / 0.16); }
.dstitle { font: 600 16px 'Sora', sans-serif; margin: 0; color: var(--ink); }
.dsnote { font-size: 13px; color: var(--ink-3); margin: 3px 0 0; line-height: 1.5; }

/* Room left */
.roomval {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 27px;
  letter-spacing: -0.02em; margin: 12px 0 10px; display: flex; align-items: baseline; gap: 8px;
}
.roomval.up { color: var(--up); } .roomval.warn { color: var(--warn); } .roomval.down { color: var(--down); }
.roomval span { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.meter7 { height: 7px; border-radius: 999px; background: rgb(242 235 221 / 0.08); overflow: hidden; }
:root[data-theme="light"] .meter7 { background: rgb(15 25 38 / 0.08); }
.meter7 i { display: block; height: 100%; border-radius: 999px; }
.meter7 i.up { background: linear-gradient(90deg, #2BA372, #35C08A); }
.meter7 i.warn { background: linear-gradient(90deg, #C9862B, #E8A13A); }
.meter7 i.down { background: linear-gradient(90deg, #C43B40, #E5484D); }

/* (b) lock banner */
.lockbanner {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid rgb(229 72 77 / 0.34); border-radius: var(--r-banner); padding: 15px 22px;
  background: linear-gradient(90deg, rgb(229 72 77 / 0.14), rgb(229 72 77 / 0.04));
}
.locktile {
  width: 34px; height: 34px; border-radius: 10px; background: rgb(229 72 77 / 0.18);
  display: grid; place-items: center; flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 15px; color: #FF8A8D;
}
.locktitle { font: 600 15px 'Sora', sans-serif; color: #FFB1B3; margin: 0; }
.locksub { font-size: 13px; color: var(--ink-2); margin: 3px 0 0; }

/* (c) scorecard */
.scorecard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-tile); padding: 18px 20px;
}
.stile .eyebrow { font-size: 9px; letter-spacing: 0.2em; }
.sval {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 30px;
  letter-spacing: -0.03em; margin: 12px 0 6px; color: var(--ink-2);
}
.sval.up { color: var(--up); } .sval.down { color: var(--down); }
.sval span { font-size: 14px; color: var(--ink-3); margin-left: 6px; font-weight: 400; letter-spacing: 0; }
.smeta { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--ink-3); margin: 0; }
.smeta.thin { margin-top: 14px; }
.spark { display: block; width: 100%; height: 38px; margin: 10px 0 8px; }

/* (d) session card */
.sessioncard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel);
  overflow: hidden; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
.sessleft { background: var(--surface); border-right: 1px solid var(--line); padding: 24px 26px; }
.hero {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 46px;
  line-height: 1; letter-spacing: -0.04em; margin: 14px 0 4px; color: var(--ink-2);
}
.hero.up { color: var(--up); } .hero.down { color: var(--down); }
.herounit {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.statrows { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.statrow { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.statrow span { color: var(--ink-3); }
.statrow b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--ink); }
.statrow b.up { color: var(--up); } .statrow b.down { color: var(--down); }

.sessright { padding: 24px 26px; display: flex; flex-direction: column; gap: 20px; }
.noteblock + .noteblock { border-top: 1px solid var(--line); padding-top: 20px; }
.notelbl {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase;
}
.notelbl .dot { width: 5px; height: 5px; margin: 0; box-shadow: none; }
.notelbl.up { color: rgb(53 192 138 / 0.9); }
.notelbl.warn { color: rgb(232 161 58 / 0.9); }
.notebody { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 70ch; margin: 0; text-wrap: pretty; }

/* (e) goal + CTA */
.goalrow { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.goalcard { padding: 22px 24px; }
.goaltitle { font: 600 19px 'Sora', sans-serif; margin: 12px 0 14px; color: var(--ink); }
.stepmeter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.stepmeter i { height: 5px; border-radius: 999px; background: var(--line); }
.stepmeter i.on { background: var(--gold-grad); }
#goal-line { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
.gstep { color: var(--ink-3); }
.gstep.done { color: var(--ink-2); }

.ctacard { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: var(--surface); }
.btn-gold {
  appearance: none; border: 0; width: 100%; padding: 15px 20px; border-radius: var(--r-btn);
  background: var(--gold-grad); color: #0A121C; font: 600 15px 'Sora', sans-serif;
  cursor: pointer; box-shadow: 0 6px 22px rgb(201 164 92 / 0.22);
}
.btn-gold:hover { filter: brightness(1.06); }
:root[data-theme="light"] .btn-gold { color: #FFFFFF; }
.btn-ghost {
  appearance: none; width: 100%; padding: 13px 20px; border-radius: var(--r-btn);
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  font: 400 13.5px 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--ink); }

#panel-today .dailyquote {
  border-left: 0; padding: 0; margin: 10px 0 0;
  font: italic 14px 'Sora', sans-serif; color: var(--ink-3);
}
/* The 22px gold rule sits above the line rather than beside it. */
#panel-today .dailyquote::before {
  content: ''; display: block; width: 22px; height: 1px;
  background: var(--gold); margin-bottom: 14px;
}

/* The four-across scorecard and the two side-by-side rows collapse in one step —
   at this width a 1.55fr column is narrower than the headline it has to hold. */
@media (max-width: 1000px) {
  .directiverow, .goalrow { grid-template-columns: 1fr; }
  .scorecard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sessioncard { grid-template-columns: 1fr; }
  .sessleft { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .scorecard { grid-template-columns: 1fr; }
  .directive { padding: 20px 18px; }
  .dirhead { font-size: 25px; }
  .hero { font-size: 38px; }
}

/* The global h2/h3 are the old all-caps section labels. The dashboard's headlines are
   sentence-case Sora per the spec, so they opt out rather than inheriting it. */
.dirhead, .goaltitle, .dstitle, .locktitle, .coachhead h3, .trtitle {
  text-transform: none; letter-spacing: -0.015em; color: var(--ink);
}
.goaltitle, .coachhead h3 { letter-spacing: -0.01em; }
.sval { white-space: nowrap; }

/* A wider column must not turn prose screens into wall-to-wall text. These cap the
   measure where the content is read rather than scanned; the dashboard's own grids are
   unaffected. */
.corelist li > div, .trblock > .hint, #panel-protocol > .hint { max-width: 80ch; }
.settings-block { max-width: 560px; }
.trsession, .trcoach, .addition { max-width: 900px; }

/* Every tab shares the dashboard's column so the app does not change width under you when
   you switch. Where a screen is genuinely read rather than scanned, the MEASURE is capped
   on the text itself (in ch) rather than on the panel — that keeps lines comfortable
   without making the whole screen narrow. */

/* Settings was a single 560px column, which in a 1280px frame reads as a ribbon down the
   left. Two columns fill the width without stretching any one field. */
@media (min-width: 900px) {
  #panel-settings { column-count: 2; column-gap: 24px; }
  #panel-settings > h2 { break-after: avoid; }
  #panel-settings .settings-block { break-inside: avoid; max-width: none; }
}
#panel-settings > h2:first-child { margin-top: 0; }

/* The log form's own fields stay at a sane width; the wide column just gives the two-up
   note boxes and the screenshot strip more room. */
#panel-log .form { max-width: 1080px; }

/* ---------- Coaching: the week reduced to one instruction ---------- */
.weekfocus {
  border: 1px solid rgb(201 164 92 / 0.28); border-radius: var(--r-panel); padding: 22px 24px;
  margin-bottom: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(201 164 92 / 0.13), rgb(201 164 92 / 0) 58%),
    var(--panel);
}
.focustext {
  font: 600 22px/1.3 'Sora', sans-serif; letter-spacing: -0.01em;
  color: var(--ink); margin: 12px 0 0; max-width: 46ch; text-wrap: pretty;
}
.focuspoints { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.focuspoints li { font-size: 14px; line-height: 1.55; color: var(--ink-2); padding-left: 16px; position: relative; }
.focuspoints li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

/* ---------- Coaching: the day ---------- */
.dayhead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.dayhead h3 { font: 600 22px 'Sora', sans-serif; margin: 8px 0 0; color: var(--ink); text-transform: none; letter-spacing: -0.01em; }
.daymeta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-3); margin: 5px 0 0; }
.trdate { margin-left: 0; }

.daycard {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tile);
  padding: 16px 18px; margin-bottom: 10px;
}
.dayrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dayrr {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 26px;
  letter-spacing: -0.03em; color: var(--ink-2); display: inline-flex; align-items: baseline; gap: 5px;
}
.dayrr.up { color: var(--up); } .dayrr.down { color: var(--down); }
.dayrr i { font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.daycard .trshots { margin: 14px 0 0; }
.daycard .trshots img { width: 190px; height: 118px; }
.daycard .tdetails { margin-top: 12px; }

/* ===========================================================================
   COACHING — to the Bohgan handoff. Main column + rail; the shell is untouched.
   =========================================================================== */
.colayout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
/* flex-grow 100 so the main column takes essentially all the slack, while both
   columns can still wrap to full width on a narrow screen. */
.comain { flex: 100 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.corail { flex: 1 1 288px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.eyebrow.up { color: rgb(53 192 138 / 0.9); }
.eyebrow.warn { color: rgb(232 161 58 / 0.9); }
.rulechip {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgb(201 164 92 / 0.4); border-radius: var(--r-chip-sm);
  padding: 3px 8px; white-space: nowrap;
}
#weekfocus .dirhead { margin-top: 16px; max-width: 26ch; }
#weekfocus .eyebrow .rulechip { margin: 0; flex: 0 0 auto; }

/* The hero's four counted figures. */
.statstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 14px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.wsval {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; margin: 6px 0 0; color: var(--ink);
}
.wsval.up { color: var(--up); } .wsval.down { color: var(--down); }

.dayhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.daynav { display: flex; align-items: center; gap: 8px; }
.daystep {
  appearance: none; width: 30px; height: 30px; border-radius: var(--r-btn-sm);
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.daystep:hover { border-color: var(--gold); color: var(--ink); }

/* Session card: counted numbers left, evidence right. */
#tr-session.sessioncard { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
#tr-session .sessleft { display: flex; flex-direction: column; background: var(--panel); }
.chips.patterns { margin-top: 14px; }
.warnchip { border-color: rgb(232 161 58 / 0.3); background: rgb(232 161 58 / 0.1); color: #F0BC72; }
.sfigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 14px; }
.sfigval {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 20px;
  letter-spacing: -0.02em; margin: 6px 0 0; color: var(--ink);
}
.sfigval.up { color: var(--up); } .sfigval.down { color: var(--down); }

/* The read */
.readcard { padding: 24px 26px; }
.readhead {
  font: 600 23px/1.28 'Sora', sans-serif; letter-spacing: -0.01em; text-transform: none;
  color: var(--ink); margin: 14px 0 12px; max-width: 34ch; text-wrap: pretty;
}
.readcols { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .readcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; } }
.heldlist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.heldlist li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.tick { color: var(--up); flex: 0 0 auto; }
.changelist { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
/* Cards, per the design — each change reads as its own object rather than a run of
   indented paragraphs. */
.changeitem {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-rail); padding: 14px 16px;
}
.changehead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.changetitle { font: 600 15px 'Sora', sans-serif; color: var(--ink); letter-spacing: -0.005em; }
.changebody { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 8px 0 0; }

/* Rail */
.railweek { font: 600 17px 'Sora', sans-serif; color: var(--ink); margin: 12px 0 4px; }
.daystrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
/* A box per day with the label beneath it, per the design. A traded day is filled; the
   selected one is outlined. Two different facts, two different signals, so a selected
   empty day still reads as empty. */
.dstrip {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dstrip i {
  display: block; width: 100%; height: 30px; border-radius: var(--r-chip-sm);
  border: 1px dashed var(--line-2); background: transparent;
}
.dstrip span {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.dstrip.on i { border-style: solid; border-color: rgb(201 164 92 / 0.35); background: rgb(201 164 92 / 0.16); }
.dstrip.on span { color: var(--gold); }
.dstrip.sel i { border-color: var(--gold); border-style: solid; }
.dstrip.sel span { color: var(--ink); }

.complist { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.comprow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.complabel { font-size: 13px; color: var(--ink-2); }
.compval { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.compval.up { color: var(--up); } .compval.warn { color: var(--warn); } .compval.down { color: var(--down); }
.compbar { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: rgb(242 235 221 / 0.08); overflow: hidden; }
:root[data-theme="light"] .compbar { background: rgb(15 25 38 / 0.08); }
.compbar i { display: block; height: 100%; border-radius: 999px; background: var(--ink-3); }
.compbar i.up { background: linear-gradient(90deg, #2BA372, #35C08A); }
.compbar i.warn { background: linear-gradient(90deg, #C9862B, #E8A13A); }
.compbar i.down { background: linear-gradient(90deg, #C43B40, #E5484D); }
.compcount { grid-column: 1 / -1; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; color: var(--ink-3); }

.playlist { list-style: none; margin: 14px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.playlist li { display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; color: var(--ink-2); }
.rulenum { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--gold); }
.corail .linkbtn { margin-left: 0; padding-left: 0; }

.weekall > summary {
  cursor: pointer; list-style: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
}
.weekall > summary::-webkit-details-marker { display: none; }
.weekall > summary::before { content: '+ '; color: var(--gold); }
.weekall[open] > summary::before { content: '– '; }
.weekall .coachcols { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.coachcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); padding: 14px 16px; }
.coachcol.good { border-left: 3px solid var(--up); }
.coachcol.work { border-left: 3px solid var(--warn); }
.coachlist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coachlist li { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.5; }
.coachlist .cdate { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.coachlist .tnote {
  align-self: flex-start; font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgb(201 164 92 / 0.4); border-radius: 999px; padding: 1px 6px;
}
.coachempty { color: var(--ink-3); font-size: 13px; }
#panel-coaching .wmeta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-3); margin-top: 18px; }
@media (max-width: 720px) { #tr-session.sessioncard { grid-template-columns: 1fr; } }

/* Session card, to the design: the number reads across, not down. */
.herorow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.herorow .hero { margin: 0; }
.herorow .herounit { margin: 0; }
.herorow .chips { margin-left: auto; }
#tr-session .sfigs { margin-top: 22px; }
#tr-session .sfigval b { font-weight: 600; }
.goodchip { border-color: rgb(53 192 138 / 0.3); background: rgb(53 192 138 / 0.1); color: #7BD9B0; }
#tr-session .sessright { background: var(--surface); border-left: 1px solid var(--line); gap: 12px; }
.chartbox {
  display: block; position: relative; border: 1px solid var(--line);
  border-radius: var(--r-chip); overflow: hidden; background: var(--bg); min-height: 132px;
}
.chartbox img { display: block; width: 100%; height: 132px; object-fit: cover; }
.chartbox:hover { border-color: var(--gold); }
.chartcap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px;
  background: rgb(7 14 22 / 0.78); font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.chartbox.empty {
  display: grid; place-items: center; border-style: dashed;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.viewtrades { margin-left: 0; padding-left: 0; align-self: flex-start; }
.tradelist .tlist { margin: 0; }

/* Add coaching is a card, not a disclosure — it is the reason to be on this screen. */
.addcard .traddbody { padding: 0; margin-top: 14px; }
.addfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.addfoot .hint { margin: 0; flex: 1 1 220px; }
.addbtn { width: auto; padding: 13px 22px; flex: 0 0 auto; }
.railhint { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin: 0; }
/* A session filed under the wrong day is invisible on Today and lands in the wrong week,
   so a non-today date says so at the moment it is chosen. */
.datenote { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--warn); margin: 6px 0 0; }
.datenote.err { color: var(--down); }
.datenote.ok { color: var(--ink-3); }

/* ---------- History ---------- */
#panel-history .scorecard { margin-bottom: 10px; }
.trendhead { margin-top: 30px; }
.chartrow { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
@media (min-width: 900px) { .chartrow { grid-template-columns: 1fr 1fr; } }
.chartcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 18px 20px;
}
/* The SVG carries a 420x200 viewBox. At width:100% in a 940px column that scaled to
   ~450px tall — a single bar in a wall of empty grid. Cap the height and let the width
   follow it. */
.chart svg { max-height: 200px; width: auto; max-width: 100%; }
.nodata { font-size: 13px; color: var(--ink-3); margin: 18px 0; }
#panel-history #filters { display: none; }
#panel-history .entry {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-tile); padding: 14px 16px; margin-bottom: 10px;
}
/* Whose words the summary is. An AI read and the operator's own notes are different
   things and must not look identical on a screen used to decide what to change. */
.refl .cap { display: flex; align-items: baseline; gap: 8px; }
.refl .src {
  font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgb(201 164 92 / 0.4); border-radius: 999px; padding: 1px 6px;
}
.refl .src.own { color: var(--ink-3); border-color: var(--line-2); }
.trendbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.trendbar .trendhead { margin-bottom: 0; }
.chartrow { display: block; }