/* Stock Solutions journal — black and silver, like the logo. One family (Outfit), tabular numbers everywhere money appears. */
@font-face { font-family: "Outfit"; src: url("fonts/Outfit-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --ink: #0A0A0B;        /* page */
  --panel: #141416;      /* surfaces */
  --raised: #1B1B1E;     /* inputs, hovered rows */
  --line: #2A2A2E;
  --text: #F4F4F5;
  --muted: #A1A1AA;
  --faint: #8A8A93;      /* 4.5:1+ on every dark surface (was #71717A, too dim to read) */
  --silver: #D4D4D8;
  --up: #34D399;
  --down: #F87171;
  --up-rgb: 52 211 153;
  --down-rgb: 248 113 113;
  /* theme-only colours (the light theme below overrides these) */
  --hi: #fff; --day-none: #111113; --on-tint: #fff; --on-tint-soft: rgb(255 255 255 / .72); --chart-line: #E4E4E7;
  --flat-tint: rgb(255 255 255 / .05); --row-hover: rgb(255 255 255 / .025); --glass: rgb(10 10 11 / .94); --tile-top: #17171A;
  --warn: #FBBF24; --warn-soft: #F5C77E; --warn-softer: #F1D4A6; --down-soft: #FCA5A5; --heat-empty: #222226; --heat-zero: #3a3a40;
  --shadow: rgb(0 0 0 / .6); --meter-start: #9C9CA4; --dash: #3A3A40; --silver-rgb: 212 212 216;
  color-scheme: dark;
  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --rail: 232px;
  --fs: 1;               /* text size: Settings → Display (1.12 large, 1.25 larger) */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 calc(15px * var(--fs))/1.55 "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--silver); }
:focus-visible { outline: 2px solid var(--silver); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: calc(28px * var(--fs)); }
h2 { font-size: calc(18px * var(--fs)); }
h3 { font-size: calc(15px * var(--fs)); }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.small { font-size: calc(13px * var(--fs)); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; clip: auto; z-index: 1000; padding: 10px 16px;
  background: var(--silver); color: var(--ink); border-radius: var(--r-m); font-weight: 600; text-decoration: none; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  padding: 22px 14px; border-right: 1px solid var(--line); background: var(--ink);
}
.lockup { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; text-decoration: none; }
.lockup img { width: 30px; height: auto; }
.lockup b { display: block; font-weight: 600; font-size: calc(16px * var(--fs)); letter-spacing: 0.01em; }
.lockup small { display: block; color: var(--faint); font-size: calc(12px * var(--fs)); letter-spacing: 0.04em; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-s);
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.nav a:hover { color: var(--text); background: var(--panel); }
.nav a[aria-current="page"] { color: var(--text); background: var(--raised); box-shadow: inset 2px 0 0 var(--silver); }
.nav svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav .sep { height: 1px; background: var(--line); margin: 10px 8px; }
.who { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.who img, .who .initial { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.who .initial { display: grid; place-items: center; background: var(--raised); color: var(--silver); font-weight: 600; }
.who .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who form { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; min-height: 24px; color: var(--faint); font: inherit; font-size: calc(13px * var(--fs)); cursor: pointer; }
.linkbtn:hover { color: var(--text); }

.main { padding: 28px 36px 64px; max-width: 1240px; width: 100%; }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.pagehead p { margin: 4px 0 0; color: var(--muted); }
.mobilebar, .tabbar { display: none; }

/* ---------- surfaces ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; }
.main > * + *, .stack > * + * { margin-top: 18px; }
.main > .flash + * { margin-top: 0; }
.main > .pagehead + * { margin-top: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.flash { border: 1px solid var(--line); background: var(--raised); border-radius: var(--r-m); padding: 11px 14px; margin-bottom: 18px; }
.error { border: 1px solid rgb(var(--down-rgb) / .45); background: rgb(var(--down-rgb) / .08); border-radius: var(--r-m); padding: 11px 14px; margin-bottom: 16px; }
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty h2 { color: var(--text); margin-bottom: 8px; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-m); border: 1px solid var(--line); background: var(--raised); color: var(--text);
  font: 500 calc(15px * var(--fs))/1 "Outfit", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--silver); border-color: var(--silver); color: var(--ink); }
.btn.primary:hover { background: var(--hi); border-color: var(--hi); }
.btn.discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.btn.discord:hover { background: #4752C4; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--down); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); }
.seg a { padding: 6px 11px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: calc(14px * var(--fs)); font-weight: 500; }
.seg a:hover { color: var(--text); }
.seg a[aria-current="true"] { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

label { display: block; font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--muted); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--ink); color: var(--text); font: 400 calc(15px * var(--fs))/1.4 "Outfit", sans-serif; font-variant-numeric: tabular-nums;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--silver); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 1px var(--silver); }
input[type="file"] { padding: 9px; }
.field { margin-bottom: 16px; }
.hint { font-size: calc(13px * var(--fs)); color: var(--faint); margin-top: 5px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 14px; }
.choice { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--ink); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label { margin: 0; padding: 7px 14px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: calc(14px * var(--fs)); }
.choice input:checked + label { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.choice input:focus-visible + label { outline: 2px solid var(--silver); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }

/* ---------- the P/L calendar (the page's centerpiece) ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.05fr); gap: 6px; }
.cal .dow { font-size: calc(12px * var(--fs)); color: var(--faint); padding: 0 4px 2px; }
.day {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 84px;
  padding: 8px 9px; border-radius: var(--r-m); background: var(--raised); border: 1px solid transparent;
  text-decoration: none; color: var(--text); overflow: hidden;
}
.day:hover { border-color: var(--faint); }
.day.out { background: transparent; border-color: transparent; color: var(--faint); pointer-events: none; }
.day.out .d { color: var(--faint); }
.day.none { background: var(--day-none); }
.day .d { font-size: calc(13px * var(--fs)); color: var(--muted); }
.day .v { font-weight: 600; font-size: calc(16px * var(--fs)); letter-spacing: -0.01em; }
.day .n { font-size: calc(12px * var(--fs)); color: var(--muted); }
.day.today { border-color: var(--silver); }
.day .dot { position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--silver); }
.day.u1 { background: rgb(var(--up-rgb) / .14); } .day.u2 { background: rgb(var(--up-rgb) / .22); } .day.u3 { background: rgb(var(--up-rgb) / .31); }
.day.u4 { background: rgb(var(--up-rgb) / .40); } .day.u5 { background: rgb(var(--up-rgb) / .50); }
.day.d1 { background: rgb(var(--down-rgb) / .14); } .day.d2 { background: rgb(var(--down-rgb) / .22); } .day.d3 { background: rgb(var(--down-rgb) / .31); }
.day.d4 { background: rgb(var(--down-rgb) / .40); } .day.d5 { background: rgb(var(--down-rgb) / .50); }
.day[class*=" u"] .v, .day[class*=" d"] .v { color: var(--on-tint); }
.day[class*=" u"] .n, .day[class*=" d"] .n, .day[class*=" u"] .d, .day[class*=" d"] .d { color: var(--on-tint-soft); }
.week { display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; border-radius: var(--r-m); border: 1px dashed var(--line); min-height: 84px; }
.week .lbl { font-size: calc(12px * var(--fs)); color: var(--faint); }
.week .v { font-weight: 600; }
.calhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.calhead h2 { font-size: calc(22px * var(--fs)); }
.calsum { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--muted); }
.calsum b { color: var(--text); font-weight: 600; }
.arrows { display: inline-flex; gap: 6px; }
.arrows a, .arrows span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-s); border: 1px solid var(--line); text-decoration: none; color: var(--muted); }
.arrows a:hover { color: var(--text); border-color: var(--faint); }
.arrows span { opacity: .35; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: calc(13px * var(--fs)); color: var(--faint); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--silver); margin-right: 6px; vertical-align: 1px; }

/* ---------- numbers ---------- */
.headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.headline .big { font-size: calc(40px * var(--fs)); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 0; }
.ledger div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ledger dt { color: var(--muted); }
.ledger dd { margin: 0; font-weight: 500; text-align: right; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .grid text, .chart .axis text { fill: var(--faint); font: 400 calc(13px * var(--fs)) "Outfit", sans-serif; }
.chart .zero { stroke: var(--faint); stroke-dasharray: 3 4; }
.chart .ln { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; }
.chart .area.up { fill: rgb(var(--up-rgb) / .10); } .chart .area.down { fill: rgb(var(--down-rgb) / .10); } .chart .area.flat { fill: var(--flat-tint); }
.chart .end { fill: var(--silver); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: calc(13px * var(--fs)); color: var(--faint); padding: 0 10px 10px; white-space: nowrap; }
td { padding: 11px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
.num { text-align: right; white-space: nowrap; }
tr.link { cursor: pointer; }
tr.link:hover td { background: var(--row-hover); }
td a.rowlink { text-decoration: none; font-weight: 500; }
tr.clickrow { cursor: pointer; }
tr.clickrow:hover td { background: var(--raised); }
.fillkind { display: inline-block; min-width: 3.2em; padding: 0 6px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--line); font-size: calc(11px * var(--fs)); color: var(--muted); text-align: center; }
.fillkind.exit { color: var(--text); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: calc(12px * var(--fs)); color: var(--muted); white-space: nowrap; }
.tag.long { color: var(--up); border-color: rgb(var(--up-rgb) / .35); }
.tag.short { color: var(--down); border-color: rgb(var(--down-rgb) / .35); }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: var(--muted); }

/* ---------- trade & day ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 22px; margin: 0; }
.facts div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: calc(13px * var(--fs)); color: var(--faint); }
.facts dd { margin: 2px 0 0; font-weight: 500; }
.note { white-space: pre-wrap; color: var(--silver); }
.stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { margin: 0; font-size: calc(26px * var(--fs)); line-height: 1; color: var(--line); cursor: pointer; padding: 2px; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--silver); }
.stars input:focus-visible + label { outline: 2px solid var(--silver); border-radius: 4px; }
.daylist a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line); text-decoration: none; }
.daylist a:hover .preview { color: var(--text); }
.daylist .preview { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--raised); color: var(--silver); font-size: calc(13px * var(--fs)); font-weight: 600; margin-right: 8px; }

/* ---------- auth & landing ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth .box { width: 100%; max-width: 400px; }
.auth .lockup { justify-content: center; padding-bottom: 26px; }
.auth h1 { font-size: calc(24px * var(--fs)); margin-bottom: 6px; text-align: center; }
.auth .sub { text-align: center; color: var(--muted); margin-bottom: 22px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: calc(13px * var(--fs)); margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wide { width: 100%; }


/* ---------- phones & tablets ---------- */
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .shell { display: block; }
  .rail { display: none; }
  .mobilebar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5;
    padding: 12px 16px; background: var(--glass); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .mobilebar .lockup { padding: 0; }
  .mobilebar .lockup small { display: none; }
  .mobilebar img.av { width: 30px; height: 30px; border-radius: 50%; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
    background: var(--glass); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; font-size: calc(11px * var(--fs)); color: var(--faint); text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--text); }
  .tabbar svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .main { padding: 18px 16px 96px; }
  h1 { font-size: calc(24px * var(--fs)); }
  .panel { padding: 16px; border-radius: var(--r-m); }
  .tablewrap { margin: 0 -16px; padding: 0 16px; }
  .ledger { grid-template-columns: 1fr; }
  .cal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .cal .wkcol, .cal .dow.wk { display: none; }
  .day { min-height: 54px; padding: 5px; border-radius: 7px; }
  .day .v { font-size: calc(11px * var(--fs)); }
  .day .n { display: none; }
  .day .d { font-size: calc(11px * var(--fs)); }
  .day .dot { top: 6px; right: 6px; width: 5px; height: 5px; }
  .daylist a { grid-template-columns: 1fr auto; }
  .daylist .preview { grid-column: 1 / -1; grid-row: 2; }
  .headline .big { font-size: calc(32px * var(--fs)); }
  .hide-sm { display: none; }
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg a { flex: none; }
  .filters { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.whotext { min-width: 0; }
.lbl { display: block; font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--muted); margin: 0 0 6px; padding: 0; }
fieldset.bare { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.chart { margin: 18px 0 0; }
.hide-all { display: none; }
.stack { min-width: 0; }
html, body { overflow-x: clip; }

/* =================== v2: richer pages =================== */
.main { position: relative; }
.main::before {             /* faint silver light at the top of every page */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 340px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 100% at 30% 0%, rgb(var(--silver-rgb) / .07), transparent 70%);
}
.shell { isolation: isolate; }
.greet { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.greet .date { color: var(--faint); font-size: calc(14px * var(--fs)); margin-bottom: 4px; }
.greet h1 { font-size: calc(30px * var(--fs)); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: calc(14px * var(--fs)); }
.btn svg.i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; background: linear-gradient(180deg, var(--tile-top), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-l);
        padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 132px; overflow: hidden; }
.tile .k { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: calc(13px * var(--fs)); font-weight: 500; }
.tile .k svg { width: 16px; height: 16px; fill: none; stroke: var(--silver); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.tile .v { font-size: calc(28px * var(--fs)); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.tile .sub { color: var(--faint); font-size: calc(13px * var(--fs)); margin-top: auto; }
.tile .row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile .spark { position: absolute; right: 0; bottom: 0; left: 0; height: 52px; opacity: .9; }
.tile .spark svg { width: 100%; height: 100%; display: block; }
.spark .pos { stroke: var(--up); } .spark .neg { stroke: var(--down); }
.spark path.l { fill: none; stroke-width: 1.6; }
.spark path.a.pos { fill: rgb(var(--up-rgb) / .10); stroke: none; } .spark path.a.neg { fill: rgb(var(--down-rgb) / .10); stroke: none; }
.ring circle { fill: none; }
.ring .track { stroke: var(--raised); }
.ring .fill { stroke: var(--silver); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring .fill.pos { stroke: var(--up); }
.ring text { fill: var(--text); font: 600 calc(14px * var(--fs)) "Outfit", sans-serif; }
.wl { display: grid; gap: 6px; font-size: calc(12px * var(--fs)); color: var(--faint); }
.wl .track { height: 6px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.wl .track i { display: block; height: 100%; border-radius: 4px; }
.wl .w i { background: var(--up); } .wl .l i { background: var(--down); }

/* bar charts */
.barchart svg { display: block; width: 100%; height: auto; }
.barchart rect.pos { fill: rgb(var(--up-rgb) / .85); } .barchart rect.neg { fill: rgb(var(--down-rgb) / .85); } .barchart rect.neu { fill: var(--line); }
.barchart rect:hover { opacity: .75; }
.barchart line.z { stroke: var(--faint); stroke-width: 1; opacity: .6; }
.barchart line.g { stroke: var(--line); }
.barchart text { fill: var(--faint); font: 400 calc(12px * var(--fs)) "Outfit", sans-serif; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.panel h2 .muted, .panel-head .muted { font-weight: 400; }
.split { display: grid; gap: 12px; }
.split .rowx { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.meter { height: 8px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 6px; }
.meter i.pos { background: var(--up); } .meter i.neg { background: var(--down); } .meter i.neu { background: var(--faint); }

/* widths for meters (no inline styles allowed by the page's security policy) */
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}

/* report tables */
.rtable td { padding: 9px 10px; }
.rtable .lbl2 { font-weight: 500; min-width: 90px; }
.rtable td.num, .rtable th { white-space: nowrap; }
.rtable td.lbl2 { overflow-wrap: anywhere; }
.rtable .barcell { width: 26%; min-width: 70px; padding-left: 14px; }
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.note-sm { font-size: calc(13px * var(--fs)); color: var(--faint); margin: 10px 0 0; }

/* events + earnings */
.impact { display: inline-flex; gap: 2px; vertical-align: middle; }
.impact i { width: 4px; height: 12px; border-radius: 2px; background: var(--line); }
.impact.h i { background: var(--down); } .impact.m i:nth-child(-n+2) { background: var(--warn); } .impact.l i:first-child { background: var(--faint); }
.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: calc(11px * var(--fs)); font-weight: 600; letter-spacing: .02em; background: var(--raised); color: var(--silver); border: 1px solid var(--line); }
.evday { margin-top: 18px; }
.evday:first-child { margin-top: 0; }
.evday h3 { display: flex; align-items: baseline; gap: 10px; font-size: calc(15px * var(--fs)); margin-bottom: 6px; }
.evday h3 .muted { font-weight: 400; font-size: calc(13px * var(--fs)); }
.evday.today h3::after { content: "Today"; font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--ink); background: var(--silver); border-radius: 999px; padding: 1px 8px; }
.ev td { padding: 8px 10px; }
.ev tr.hi td { background: rgb(var(--down-rgb) / .05); }
.ev tr.hi td:first-child { box-shadow: inset 2px 0 0 var(--down); }
.ev .t { width: 92px; color: var(--muted); white-space: nowrap; }
.ev .im { width: 30px; }
.ev .vals { white-space: nowrap; color: var(--muted); text-align: right; font-size: calc(14px * var(--fs)); }
.ev .vals b { color: var(--text); font-weight: 500; }
.earn { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.earn .col { background: var(--raised); border-radius: var(--r-m); padding: 12px; min-height: 120px; border: 1px solid transparent; }
.earn .col.today { border-color: var(--silver); }
.earn .col h3 { font-size: calc(14px * var(--fs)); margin-bottom: 10px; display: flex; justify-content: space-between; }
.earn .slot { font-size: calc(12px * var(--fs)); color: var(--faint); margin: 10px 0 6px; display: flex; align-items: center; gap: 6px; }
.earn .slot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.co { display: flex; align-items: center; gap: 9px; padding: 5px 0; min-width: 0; }
.co img { width: 28px; height: 28px; border-radius: 7px; flex: none; background: var(--panel); }
.co b { font-size: calc(14px * var(--fs)); font-weight: 600; display: block; line-height: 1.1; }
.co span { font-size: calc(12px * var(--fs)); color: var(--faint); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co div { min-width: 0; }
.eventlist { display: grid; gap: 2px; }
.eventlist a, .eventlist div.e { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; }
.eventlist .when { font-size: calc(12px * var(--fs)); color: var(--faint); line-height: 1.2; }
.eventlist .when b { display: block; color: var(--muted); font-weight: 500; font-size: calc(13px * var(--fs)); }

/* calendar: year */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 15px); grid-auto-columns: 15px; gap: 3px; padding-bottom: 4px; width: max-content; }
.heat i { display: block; width: 15px; height: 15px; border-radius: 4px; background: var(--heat-empty); }
.heat i.out { background: transparent; }
.heat i.zero { background: var(--heat-zero); }
.heat i.pos1 { background: rgb(var(--up-rgb) / .28); } .heat i.pos2 { background: rgb(var(--up-rgb) / .48); } .heat i.pos3 { background: rgb(var(--up-rgb) / .7); } .heat i.pos4 { background: var(--up); }
.heat i.neg1 { background: rgb(var(--down-rgb) / .28); } .heat i.neg2 { background: rgb(var(--down-rgb) / .48); } .heat i.neg3 { background: rgb(var(--down-rgb) / .7); } .heat i.neg4 { background: var(--down); }
.heatmonths { display: grid; grid-auto-flow: column; grid-auto-columns: 18px; font-size: calc(12px * var(--fs)); color: var(--faint); height: 20px; width: max-content; }
.heatmonths span { white-space: nowrap; overflow: visible; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.months a, .months span.m { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--raised); text-decoration: none; border: 1px solid transparent; }
.months a:hover { border-color: var(--faint); }
.months a[aria-current="true"] { border-color: var(--silver); }
.months span.m { color: var(--faint); }
.months .top { display: flex; justify-content: space-between; font-size: calc(13px * var(--fs)); color: var(--muted); }
.months .v { font-weight: 600; }

/* trade page */
.tradenav { display: inline-flex; gap: 6px; }
.fillchart svg { display: block; width: 100%; height: auto; margin: 4px 0 8px; }
.fillchart .grid line { stroke: var(--line); }
.fillchart text { fill: var(--faint); font: 400 calc(12px * var(--fs)) "Outfit", sans-serif; }
.fillchart .path { fill: none; stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fillchart .avg { stroke: var(--silver); stroke-dasharray: 5 4; opacity: .7; }
.fillchart path.mk { stroke: var(--ink); stroke-width: 1; }
.fillchart path.mk.neu { fill: var(--silver); } .fillchart path.mk.pos { fill: var(--up); } .fillchart path.mk.neg { fill: var(--down); }
.legend2 { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: calc(12px * var(--fs)); color: var(--faint); }
.legend2 b { font-weight: 600; } .legend2 .s { color: var(--silver); }

/* journal */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: calc(12px * var(--fs)); margin-right: 6px; border: 1px solid var(--line); }
.minitiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.minitiles div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; }
.minitiles dt { font-size: calc(12px * var(--fs)); color: var(--faint); }
.minitiles dd { margin: 4px 0 0; font-size: calc(22px * var(--fs)); font-weight: 600; }

/* more menu & floating add button (phones) */
.morelist a { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.morelist a:first-child { border-top: 0; }
.morelist svg { width: 20px; height: 20px; fill: none; stroke: var(--silver); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fab { display: none; }

@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: minmax(0, 1fr); } .earn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .rgrid { grid-template-columns: minmax(0, 1fr); } .minitiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .greet h1 { font-size: calc(24px * var(--fs)); }
  .tiles { gap: 10px; }
  .tile { padding: 13px 14px; min-height: 112px; }
  .tile .v { font-size: calc(22px * var(--fs)); }
  .tile .ring svg { width: 52px; height: 52px; }
  .earn { grid-template-columns: minmax(0, 1fr); }
  .minitiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 6;
         width: 52px; height: 52px; border-radius: 50%; background: var(--silver); color: var(--ink); box-shadow: 0 10px 30px var(--shadow); }
  .fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  body:has(main input:focus, main textarea:focus, main select:focus) .fab { display: none; }   /* typing: don't cover the field */
  .ev .vals { display: none; }
  .ev .t { width: 70px; }
}
.subhead { margin: 20px 0 8px; font-size: calc(15px * var(--fs)); }
.tile:has(.spark) .sub { margin-top: 0; }
.tile:has(.spark) { padding-bottom: 60px; }
.only-narrow { display: none; }
@media (max-width: 820px) { .only-wide { display: none; } .only-narrow { display: block; } span.only-narrow { display: inline; } }

/* add-trade fills */
.fills { display: grid; gap: 8px; }
.fillhead, .fillrow { display: grid; grid-template-columns: 140px minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1.45fr) 36px; gap: 8px; align-items: center; }
.fillhead span { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--muted); }
.fillrow { padding: 6px 6px 6px 10px; border-radius: var(--r-m); background: var(--ink); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--silver); }
.fillrow[data-kind="exit"] { box-shadow: inset 3px 0 0 var(--faint); }
.fillrow input, .fillrow select { min-height: 38px; background: var(--panel); }
.iconbtn { width: 36px; height: 36px; border-radius: var(--r-s); border: 1px solid transparent; background: none; color: var(--faint); font-size: calc(20px * var(--fs)); line-height: 1; cursor: pointer; }
.iconbtn:hover { color: var(--down); border-color: var(--line); }
.fillbtns { margin-top: 12px; }
.summary { margin: 12px 0 0; color: var(--silver); min-height: 1.4em; }
.summary.bad { color: var(--down); }
@media (max-width: 820px) {
  .fillhead { display: none; }
  .fillrow { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px; }
  .fillrow select { grid-column: 1 / 4; grid-row: 1; }
  .fillrow .iconbtn { grid-column: 4; grid-row: 1; justify-self: end; }
  .fillrow input[name=fill_qty] { grid-column: 1 / 3; }
  .fillrow input[name=fill_price] { grid-column: 3 / 5; }
  .fillrow input[name=fill_date] { grid-column: 1 / 3; }
  .fillrow .tm { grid-column: 3 / 5; }
}
[hidden] { display: none !important; }
.danger-zone { border-color: rgb(var(--down-rgb) / .5); background: rgb(var(--down-rgb) / .06); margin-bottom: 18px; }
.danger-zone h2 { margin-bottom: 6px; }
.btn.dangerbtn { background: var(--down); border-color: var(--down); color: #1a0606; }
.btn.dangerbtn:hover { background: var(--down-soft); }
.deletelink { margin: 12px 0 0; font-size: calc(14px * var(--fs)); }
.deletelink a { color: var(--faint); }
.deletelink a:hover { color: var(--down); }
.flash.undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.flash.undo form { margin: 0; }
.tm { display: grid; grid-template-columns: minmax(0, 1fr) 74px; gap: 6px; }
.fillrow .tm select { padding-right: 4px; }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--silver); color: var(--ink); font-size: calc(12px * var(--fs)); font-weight: 600; display: inline-grid; place-items: center; }
.morelist .badge { margin-left: 8px; }
.locknote { margin: 12px 0 0; font-size: calc(13px * var(--fs)); color: var(--faint); }
.askbox { padding: 0; }
.askbox > summary { list-style: none; cursor: pointer; padding: 14px 20px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.askbox > summary::-webkit-details-marker { display: none; }
.askbox > summary span { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.askbox[open] > summary { border-bottom: 1px solid var(--line); }
.askbox form { padding: 16px 20px 20px; }
.reqlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reqlist li { padding-top: 12px; border-top: 1px solid var(--line); }
.reqlist li:first-child { border-top: 0; padding-top: 0; }
.reqlist p { margin: 4px 0 0; }
.reqtop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.status { font-size: calc(12px * var(--fs)); font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.status.open { color: var(--warn); border-color: rgb(251 191 36 / .4); }
.status.done { color: var(--up); border-color: rgb(var(--up-rgb) / .4); }
.status.declined { color: var(--down); border-color: rgb(var(--down-rgb) / .4); }
.reqcard { scroll-margin-top: 20px; }
.reqcard .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: calc(14px * var(--fs)); margin-bottom: 10px; }
.reqcard blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--silver); background: var(--raised); border-radius: 0 var(--r-s) var(--r-s) 0; }
.editfills td { padding: 6px 6px; }
.editfills input, .editfills select { min-height: 36px; padding: 6px 8px; font-size: calc(14px * var(--fs)); }
.editfills .tm { grid-template-columns: minmax(64px, 1fr) 66px; }
.reqactions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; }
.reqactions .btns { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 820px) { .reqactions { grid-template-columns: minmax(0, 1fr); } }
.tradetools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.btn.danger { color: var(--down); }
.btn.ghost.danger:hover { border-color: rgb(var(--down-rgb) / .6); background: rgb(var(--down-rgb) / .08); }
.rowact { width: 36px; text-align: right; }
.trash { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--faint); }
.trash:hover { color: var(--down); background: rgb(var(--down-rgb) / .1); }
.trash svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* =================== v3: playbook and mistakes =================== */

.taglist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.taglist li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); font-size: calc(14px * var(--fs)); }
.taglist form { margin: 0; }
.taglist .x { width: 24px; height: 24px; border-radius: 50%; border: 0; background: none; color: var(--faint); font-size: calc(16px * var(--fs)); line-height: 1; cursor: pointer; }
.taglist .x:hover { background: var(--line); color: var(--text); }
.inlineform { display: flex; gap: 10px; max-width: 520px; }
.inlineform .btn { flex: none; }
.verdict { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--raised); border: 1px solid var(--line); font-size: calc(14px * var(--fs)); color: var(--silver); }
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { padding: 12px 0; border-top: 1px solid var(--line); }
.rules li:first-child { border-top: 0; padding-top: 0; }
.rtop { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rtop b { font-weight: 600; white-space: nowrap; font-size: calc(14px * var(--fs)); }
.meterbar { height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; margin-bottom: 6px; }
.meterbar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--meter-start), var(--silver)); }
.rules p { margin: 4px 0 0; }
.minitrades { list-style: none; margin: 0; padding: 0; }
.minitrades a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; font-size: calc(14px * var(--fs)); }
.minitrades li:first-child a { border-top: 0; }
.minitrades a:hover b { text-decoration: underline; }
.pre { white-space: pre-line; color: var(--muted); }
.discscore { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.discscore b { font-size: calc(34px * var(--fs)); font-weight: 600; letter-spacing: -0.02em; }
.discscore span { color: var(--muted); }

/* Setup and mistakes form on a trade */
.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; font-size: calc(15px * var(--fs)); }
.check input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--silver); }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipcheck { position: relative; cursor: pointer; }
.chipcheck input, .segradio input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.chipcheck span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); color: var(--muted); font-size: calc(14px * var(--fs)); transition: background .15s, color .15s, border-color .15s; }
.chipcheck:hover span { color: var(--text); border-color: var(--faint); }
.chipcheck input:checked + span { background: rgb(var(--down-rgb) / .12); border-color: rgb(var(--down-rgb) / .45); color: var(--down-soft); }
.chipcheck input:focus-visible + span, .segradio input:focus-visible + span { outline: 2px solid var(--silver); outline-offset: 2px; }
.segradio { display: inline-flex; }
.segradio label { cursor: pointer; }
.segradio span { display: inline-block; padding: 6px 14px; border-radius: 7px; color: var(--muted); font-size: calc(14px * var(--fs)); font-weight: 500; }
.segradio input:checked + span { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 820px) {
  .inlineform { max-width: none; }
}

/* =================== v3: screenshots, R-multiples =================== */
.shotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.shot { margin: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--ink); }
.shot img { display: block; width: 100%; height: 130px; object-fit: cover; }
.shot a:hover img { opacity: .9; }
.shot figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; font-size: calc(13px * var(--fs)); }
.shot figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot form { margin: 0; flex: none; }
.dropzone { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center;
  padding: 22px 16px; margin-bottom: 12px; border: 1.5px dashed var(--dash); border-radius: var(--r-m); background: var(--ink); cursor: pointer;
  color: var(--muted); font-size: calc(14px * var(--fs)); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--silver); background: var(--raised); }
.dropzone.busy { opacity: .6; pointer-events: none; }
.dropzone b { color: var(--text); font-weight: 600; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.riskedit { margin-top: 14px; }
.riskedit summary { cursor: pointer; color: var(--muted); font-size: calc(14px * var(--fs)); font-weight: 500; }
.riskedit summary:hover { color: var(--text); }
.riskedit form { margin-top: 12px; }
.rsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.rdist { list-style: none; margin: 0; padding: 0; }
.rdist li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 6px 0; font-size: calc(14px * var(--fs)); }
.rdist .lbl { color: var(--muted); }
.rdist .track { height: 10px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.rdist .fill { display: block; height: 100%; border-radius: 99px; background: var(--faint); }
.rdist .fill.up { background: var(--up); }
.rdist .fill.down { background: var(--down); }
.rdist .n { text-align: right; color: var(--muted); }
@media (max-width: 820px) { .rsplit { grid-template-columns: minmax(0, 1fr); } .rdist li { grid-template-columns: 120px minmax(0, 1fr) 24px; } }

/* =================== v3: trading accounts and prop-firm rules =================== */
.acctpick { margin: -6px 4px 16px; }
.acctpick select { min-height: 36px; padding: 6px 10px; font-size: calc(14px * var(--fs)); background: var(--panel); }
.acctpick.wide { margin: 14px 0 0; }
.acctbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; padding: 9px 14px;
  border-radius: var(--r-m); border: 1px solid var(--line); background: var(--panel); font-size: calc(14px * var(--fs)); color: var(--muted); }
.acctbar b { color: var(--text); }
.acctbar form { margin: 0; }
.acctgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 14px; }
.acct { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.acct.breached { border-color: rgb(var(--down-rgb) / .4); }
.acct.passed { border-color: rgb(var(--up-rgb) / .4); }
.acct.warning { border-color: rgb(245 180 81 / .45); }
.acchead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.acchead p { margin: 2px 0 0; }
.pill { flex: none; padding: 3px 10px; border-radius: 999px; font-size: calc(12px * var(--fs)); font-weight: 600; border: 1px solid var(--line); }
.pill.down { color: var(--down-soft); border-color: rgb(var(--down-rgb) / .45); background: rgb(var(--down-rgb) / .1); }
.pill.up { color: var(--up); border-color: rgb(var(--up-rgb) / .45); background: rgb(var(--up-rgb) / .1); }
.pill.warn { color: var(--warn-soft); border-color: rgb(245 180 81 / .45); background: rgb(245 180 81 / .1); }
.acctnums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acctnums dt { font-size: calc(12px * var(--fs)); color: var(--faint); }
.acctnums dd { margin: 2px 0 0; font-weight: 600; font-size: calc(15px * var(--fs)); }
.rule .rtop span { color: var(--muted); font-size: calc(14px * var(--fs)); }
.rule p { margin: 2px 0 0; }
.meterbar.down span { background: linear-gradient(90deg, rgb(var(--down-rgb) / .6), var(--down)); }
.meterbar.up span { background: linear-gradient(90deg, rgb(var(--up-rgb) / .5), var(--up)); }
.acctmsg { margin: 0; padding: 8px 12px; border-radius: var(--r-s); font-size: calc(13px * var(--fs)); }
.acctmsg.down { background: rgb(var(--down-rgb) / .08); color: var(--down-soft); }
.acctmsg.warn { background: rgb(245 180 81 / .08); color: var(--warn-soft); }
.acctactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.acctactions form { display: flex; gap: 8px; margin: 0; }
.minitrades li.arch { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.minitrades li.arch:first-child { border-top: 0; }
.minitrades li.arch form { margin: 0; }
.acctmove { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.acctmove .lbl { margin: 0; white-space: nowrap; }
.acctmove select { max-width: 260px; min-height: 36px; padding: 6px 10px; font-size: calc(14px * var(--fs)); }
select.autow { width: auto; }
.propalert { display: block; margin-bottom: 12px; padding: 11px 14px; border-radius: var(--r-m); text-decoration: none; font-size: calc(14px * var(--fs)); }
.propalert.warn { background: rgb(245 180 81 / .08); border: 1px solid rgb(245 180 81 / .35); color: var(--warn-softer); }
.propalert.down { background: rgb(var(--down-rgb) / .08); border: 1px solid rgb(var(--down-rgb) / .4); color: var(--down-soft); }
@media (max-width: 820px) { .acctgrid { grid-template-columns: minmax(0, 1fr); } .acctnums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =================== v3: goals and progress =================== */

/* =================== v3: chart replay =================== */
.setlist { list-style: none; margin: 0; padding: 0; }
.setlist li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.setlist li:first-child { border-top: 0; padding-top: 0; }
.setlist a:first-child { display: flex; flex-direction: column; gap: 2px; text-decoration: none; min-width: 0; }
.setbtns { display: flex; gap: 8px; flex: none; }
.setbtns form { margin: 0; }
.howto h3 { font-size: calc(15px * var(--fs)); margin: 14px 0 4px; }
.howto h3:first-child { margin-top: 0; }
.howto p { color: var(--muted); font-size: calc(14px * var(--fs)); }
.rtoolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 14px; }
.rtoolbar .field { margin: 0; min-width: 160px; }
.rmain { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rchartwrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 10px; }
.rchart { height: min(64vh, 620px); min-height: 360px; border-radius: var(--r-m); overflow: hidden; }
.rplay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 2px 2px; }
.rplay select { min-height: 34px; padding: 4px 8px; font-size: calc(14px * var(--fs)); }
.rclock { margin-left: auto; color: var(--muted); font-size: calc(14px * var(--fs)); font-variant-numeric: tabular-nums; }
.rside .panel { margin-bottom: 14px; }
.rpos { font-size: calc(18px * var(--fs)); font-weight: 600; margin-bottom: 6px; }
.rpl { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.rpl b { font-size: calc(20px * var(--fs)); color: var(--text); }
.rpl b.up, #rsess.up { color: var(--up); }
.rpl b.down, #rsess.down { color: var(--down); }
.rbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.btn.buy { background: rgb(var(--up-rgb) / .16); border-color: rgb(var(--up-rgb) / .5); color: var(--up); font-weight: 600; }
.btn.buy:hover { background: rgb(var(--up-rgb) / .26); }
.btn.sell { background: rgb(var(--down-rgb) / .14); border-color: rgb(var(--down-rgb) / .5); color: var(--down-soft); font-weight: 600; }
.btn.sell:hover { background: rgb(var(--down-rgb) / .24); }
.rlevels { margin-top: 14px; }
.rlevels .field { margin-bottom: 8px; }
.rmsg { min-height: 20px; margin: 10px 0 0; font-size: calc(14px * var(--fs)); color: var(--silver); }
.rmsg.bad { color: var(--down-soft); }
.rkeys kbd { font: 500 calc(12px * var(--fs)) "Outfit", sans-serif; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--raised); color: var(--silver); }
.credit { margin-top: 14px; }
@media (max-width: 980px) { .rmain { grid-template-columns: minmax(0, 1fr); } .rchart { height: 52vh; } }

/* =================== v3.1: polish =================== */
.rail { overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rowtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.stag, .mtag { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: calc(11px * var(--fs)); line-height: 18px; white-space: nowrap; }
.stag { background: var(--raised); border: 1px solid var(--line); color: var(--silver); }
.mtag { background: rgb(var(--down-rgb) / .1); border: 1px solid rgb(var(--down-rgb) / .3); color: var(--down-soft); }
.weekstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 14px 0 0; }
.wcard { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-l); border: 1px solid var(--line);
  background: var(--panel); text-decoration: none; transition: border-color .15s; min-width: 0; }
.wcard:hover { border-color: var(--dash); }
.wcard .wk { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: calc(13px * var(--fs)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .wk svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--silver); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wcard .wv { font-size: calc(22px * var(--fs)); font-weight: 600; letter-spacing: -0.01em; }
.wcard .wv .faint { font-size: calc(14px * var(--fs)); font-weight: 500; }
.wcard .ws { font-size: calc(13px * var(--fs)); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcard .ws.down { color: var(--down-soft); }
.wcard .meterbar { margin: 4px 0 0; }
.setuptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.minitrades.practice li > span { display: grid; grid-template-columns: 52px auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fs)); }
.minitrades.practice li:first-child > span { border-top: 0; }
.minitrades.practice .stag { justify-self: start; }
.clearform { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acctpick.nomargin { margin: 0; }
@media (max-width: 820px) { .setuptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sesslist li > span { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fs)); }
.sesslist li:first-child > span { border-top: 0; }
.setuptiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tagchip input:checked + span { background: rgb(var(--silver-rgb) / .14); border-color: rgb(var(--silver-rgb) / .45); color: var(--text); }
.tagbox .chipset { margin-bottom: 10px; }
.tagbox .chipset:empty { display: none; }
.acctconfirm { margin-top: auto; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid rgb(var(--down-rgb) / .4); background: rgb(var(--down-rgb) / .06); }
.acctconfirm p { margin: 0 0 10px; font-size: calc(14px * var(--fs)); color: var(--muted); }
.acctconfirm b { color: var(--text); }
.linkbtn.danger { color: var(--down-soft); margin-left: 12px; }

/* journaling each trade on the day page */
.daytrades { margin-top: 22px; }
.dtgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: start; }
.dtcard { margin: 0; }
.dthead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dtsym { text-decoration: none; }
.dtsym b { font-size: calc(16px * var(--fs)); }
.dtpl { margin-left: auto; font-size: calc(17px * var(--fs)); font-weight: 600; }
.dtsum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.dtstars { color: var(--silver); letter-spacing: 1px; font-size: calc(13px * var(--fs)); margin-right: 4px; }
.dtnote { margin: 8px 0 0; color: var(--muted); font-size: calc(14px * var(--fs)); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dtform { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dtform summary { cursor: pointer; font-weight: 500; color: var(--silver); font-size: calc(14px * var(--fs)); }
.dtform summary:hover { color: var(--text); }
.dtform[open] summary { margin-bottom: 12px; }
@media (max-width: 820px) { .dtgrid { grid-template-columns: minmax(0, 1fr); } }
.editfills input[name^="price_"] { min-width: 92px; }
.editfills input[name^="qty_"], .editfills input[name^="comm_"] { min-width: 50px; }
.editfills input[type="date"] { min-width: 124px; }
.editpanel .editfills td { padding: 6px 4px; }
.editpanel .editfills .tm { grid-template-columns: 58px 62px; }

/* a button whose form is being sent (base.js) */
.btn.busy { opacity: .7; cursor: progress; pointer-events: none; }

/* Trades page: "Go to trade #" box */
.jump { display: flex; gap: 6px; margin: 0; }
.jump input { width: 7.5em; }

/* Trades page: date range picker (daterange.js) */
.drp { position: relative; }
.drp-fallback { display: flex; gap: 6px; }
.drp-fallback input { width: auto; }
.drp-hidden { display: none; }
/* "Custom" date range next to the period buttons (Dashboard, Reports) */
.period-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; max-width: 100%; }
.period-pick > .seg { min-width: 0; }
.seg-custom { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); }
.seg-custom .drp-fallback input { padding: 4px 8px; min-height: 0; }
.drp-btn.compact { min-height: 0; min-width: 0; gap: 8px; padding: 6px 11px; border: 0; border-radius: 7px; background: none;
  color: var(--muted); font: 500 calc(14px * var(--fs))/1.2 "Outfit", sans-serif; white-space: nowrap; }
.drp-btn.compact:hover, .drp-btn.compact[aria-expanded="true"] { color: var(--text); }
.drp-btn.compact .drp-ico { width: 13px; height: 13px; }
.drp-btn.compact .drp-ico::before { top: 2.5px; }
.seg-custom.on .drp-btn.compact { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.drp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; min-width: 15em; padding: 0 14px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--ink); color: var(--muted); font: 400 calc(15px * var(--fs))/1 "Outfit", sans-serif; cursor: pointer; text-align: left; }
.drp-btn:hover, .drp-btn[aria-expanded="true"] { border-color: var(--silver); }
.drp-btn.set { color: var(--text); }
.drp-ico { width: 16px; height: 16px; flex: none; border: 1.5px solid currentColor; border-radius: 3px; position: relative; opacity: .8; }
.drp-ico::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1.5px solid currentColor; }
.drp-pop { position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; display: flex; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-l); box-shadow: 0 18px 50px var(--shadow); overflow: hidden; }
.drp-pop[hidden] { display: none; }
.drp-presets { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); min-width: 9.5em; }
.drp-preset { background: none; border: 0; color: var(--muted); font: 400 calc(14px * var(--fs))/1.2 "Outfit", sans-serif; text-align: left; padding: 8px 10px; border-radius: var(--r-s); cursor: pointer; white-space: nowrap; }
.drp-preset:hover { background: var(--raised); color: var(--text); }
.drp-preset.on { background: var(--raised); color: var(--text); box-shadow: inset 2px 0 0 var(--silver); }
.drp-main { padding: 14px 16px 12px; position: relative; }
.drp-head { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.drp-nav { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--text); font-size: calc(20px * var(--fs)); line-height: 1; cursor: pointer; }
.drp-nav:hover { border-color: var(--line); background: var(--raised); }
.drp-months { display: flex; gap: 26px; }
.drp-mtitle { text-align: center; font-weight: 600; margin: 6px 0 12px; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 40px); row-gap: 2px; }
.drp-dow { text-align: center; font-size: calc(12px * var(--fs)); color: var(--faint); padding-bottom: 6px; }
.drp-day { position: relative; height: 40px; border: 0; background: none; color: var(--text); font: 400 calc(14px * var(--fs))/1 "Outfit", sans-serif; cursor: pointer; font-variant-numeric: tabular-nums; }
.drp-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; }
.drp-day:hover .drp-num { box-shadow: inset 0 0 0 1px var(--silver); }
.drp-day.today .drp-num { box-shadow: inset 0 0 0 1px var(--faint); }
.drp-day.inrange { background: rgb(var(--silver-rgb) / .12); }
.drp-day.first { border-radius: 20px 0 0 20px; }
.drp-day.last { border-radius: 0 20px 20px 0; }
.drp-day.first.last { border-radius: 20px; }
.drp-day.edge .drp-num { background: var(--silver); color: var(--ink); font-weight: 600; }
.drp-dot { position: absolute; z-index: 2; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--faint); }
.drp-dot.up { background: var(--up); }
.drp-dot.down { background: var(--down); }
.drp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.drp-sum { font-size: calc(14px * var(--fs)); }
.drp-subtle { color: var(--muted); }
.drp-subtle.up { color: var(--up); }
.drp-subtle.down { color: var(--down); }
.drp-fbtns { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 719px) {
  .drp-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; flex-direction: column; }
  .drp-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
  .drp-grid { grid-template-columns: repeat(7, minmax(36px, 1fr)); }
  .drp-months { justify-content: center; }
}

/* Progress bar (money goals) */
.tbar { position: relative; height: 12px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.tfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--silver); }
.tfill.up { background: var(--up); }
.tfill.down { background: var(--down); }

/* ---------------- Goals page ---------------- */
.glbl { display: block; font-size: calc(12px * var(--fs)); font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.warn { color: var(--warn); }
.ckcard { padding: 18px 20px; }
.ckcard.due { border-color: var(--silver); background: linear-gradient(135deg, var(--raised), var(--panel)); }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ck-row h2 { margin: 0 0 4px; }
.ck-row p { margin: 0; max-width: 62ch; }
.newgoal > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.newgoal > summary::-webkit-details-marker { display: none; }
.newgoal > summary h2 { margin: 0; }
.newgoal > summary h2::before { content: "+ "; color: var(--faint); }
.newgoal[open] > summary { margin-bottom: 14px; }
.newgoal[open] > summary h2::before { content: "– "; }
.goalform .field { margin-bottom: 14px; }
.goalform textarea { resize: vertical; }
.seg-radio { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.seg-radio legend { margin-bottom: 6px; width: 100%; }
.seg-radio label { margin: 0; cursor: pointer; position: relative; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; padding: 0; }
.seg-radio span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: calc(14px * var(--fs)); }
.seg-radio input:checked + span { background: var(--silver); border-color: var(--silver); color: var(--ink); font-weight: 600; }
.seg-radio input:focus-visible + span { outline: 2px solid var(--silver); outline-offset: 2px; }
.gsections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.gsections .panel { margin: 0; }
.glist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gcard { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--ink); }
.gcard.hit { border-color: rgb(var(--up-rgb) / .5); }
.gcard.done { opacity: .75; }
.gcard.done h3 { text-decoration: line-through; text-decoration-color: var(--faint); }
.gc-top { display: flex; gap: 10px; align-items: flex-start; }
.gc-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(12px * var(--fs)); border: 1px solid var(--line); color: var(--faint); }
.gcard.done .gc-mark, .gc-mark.done { background: rgb(var(--up-rgb) / .15); border-color: rgb(var(--up-rgb) / .5); color: var(--up); }
.gcard.missed .gc-mark, .gc-mark.missed { background: rgb(var(--down-rgb) / .12); border-color: rgb(var(--down-rgb) / .45); color: var(--down); }
.gc-main h3 { margin: 0; font-size: calc(16px * var(--fs)); font-weight: 600; line-height: 1.3; }
.gc-when { margin: 2px 0 0; color: var(--muted); }
.gc-money { margin: 10px 0 0; }
.gc-nums { font-size: calc(14px * var(--fs)); margin-bottom: 6px; }
.gc-nums b { font-size: calc(17px * var(--fs)); }
.gc-pct { float: right; color: var(--silver); font-weight: 600; }
.gc-hint { margin: 6px 0 0; }
.gc-plan, .gc-why { margin: 10px 0 0; }
.gc-plan p, .gc-why p { margin: 0; white-space: pre-wrap; font-size: calc(14px * var(--fs)); color: var(--silver); }
.gc-why p { color: var(--muted); }
.gc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.gc-actions form { margin: 0; }
.gc-edit[open] { flex-basis: 100%; order: 9; }
.gc-edit > summary { list-style: none; display: inline; }
.gc-edit > summary::-webkit-details-marker { display: none; }
.gc-edit[open] > summary { display: none; }
.gc-edit .goalform { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.gc-actions .gc-del { margin-left: auto; }
.ideas { border-top: 1px solid var(--line); padding-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--silver); font-size: calc(13px * var(--fs)); text-decoration: none; }
.gchip:hover { border-color: var(--faint); color: var(--text); }
.gchip.ghost { background: none; color: var(--muted); }
.gchip.on { background: var(--silver); color: var(--ink); border-color: var(--silver); }
.pastlist { list-style: none; margin: 0; padding: 0; }
.pastlist li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pastlist li:last-child { border-bottom: 0; }
.pastlist li > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pastlist b { font-weight: 500; }
.pastact { display: flex; gap: 10px; }
.pastact form { margin: 0; }
/* check-in */
.crumb { margin: 0 0 2px; font-size: calc(13px * var(--fs)); color: var(--faint); }
.crumb a { color: var(--muted); }
.ckstats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.ckgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ckgrid.two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.ckgrid .panel { margin: 0; }
.cklast { position: sticky; top: 16px; }
.ckans { margin-bottom: 14px; }
.ckans p { margin: 0; white-space: pre-wrap; color: var(--silver); font-size: calc(14px * var(--fs)); }
.ckmini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; font-size: calc(14px * var(--fs)); }
.ckmini li { display: flex; justify-content: space-between; color: var(--muted); }
.ckmini b { color: var(--text); }
.ckform .field { margin-bottom: 16px; }
.ckform textarea { resize: vertical; }
.ckrates { border: 0; padding: 0; margin: 4px 0 8px; }
.rate { margin-bottom: 14px; }
.rate-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.pills { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.pills label { margin: 0; cursor: pointer; }
.pills label { position: relative; }
.pills input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; padding: 0; }
.pills span { display: flex; align-items: center; justify-content: center; height: 36px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--ink); color: var(--muted); font-size: calc(14px * var(--fs)); font-variant-numeric: tabular-nums; }
.pills label:hover span { border-color: var(--faint); color: var(--text); }
.pills label.was span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--silver); text-decoration-thickness: 2px; }
.pills input:checked + span { background: var(--silver); border-color: var(--silver); color: var(--ink); font-weight: 600; }
.pills input:focus-visible + span { outline: 2px solid var(--silver); outline-offset: 2px; }
.ckbars { list-style: none; margin: 0 0 10px; padding: 0; }
.ckbars li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 26px 46px; gap: 10px; align-items: center; padding: 7px 0; font-size: calc(14px * var(--fs)); }
.ckbars .lbl2 { color: var(--muted); }
.ckbars .track { position: relative; height: 10px; border-radius: 99px; background: var(--raised); }
.ckbars .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--silver); }
.ckbars .was { position: absolute; left: 0; top: -3px; bottom: -3px; border-right: 2px dashed var(--faint); }
.ckbars b { text-align: right; }
.ckbars .chg { font-size: calc(12px * var(--fs)); }
@media (max-width: 1100px) { .gsections { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .ckgrid.two { grid-template-columns: minmax(0, 1fr); } .cklast { position: static; } .ckstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pills span { height: 32px; font-size: calc(13px * var(--fs)); } .ckbars li { grid-template-columns: 100px minmax(0, 1fr) 24px 40px; } }

/* Journal day page: your goals */
.daygoals .glbl { margin-top: 4px; }
.dg-focus { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--raised); color: var(--silver); white-space: pre-wrap; }
.dg-focus .glbl { margin: 0 0 2px; }
.dg-list { list-style: none; margin: 0 0 12px; padding: 0; }
.dg-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dg-list li:last-child { border-bottom: 0; }
.dg-list li.done b { text-decoration: line-through; text-decoration-color: var(--faint); color: var(--muted); }
.dg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dg-main b { font-weight: 500; font-size: calc(14px * var(--fs)); }
.dg-plan { color: var(--muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-list form { margin: 0; flex: none; }
.tbar.thin { height: 6px; margin-top: 2px; }

/* Chart replay: start without files */
.rstart { padding: 20px; }
.rstart .seg-radio { align-items: center; }
.seg-radio input.rother-in { position: static; opacity: 1; pointer-events: auto; width: 9.5em; height: auto; min-height: 36px; padding: 6px 12px; margin-left: 2px; border-radius: 999px; }
.rstart-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.rstart-row .field { margin: 0; }
.rstart-row input[type=date] { width: auto; }
.rstart-go { display: flex; flex-wrap: wrap; gap: 8px; }
.rstart .hint { margin: 12px 0 0; }
.ownfiles > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ownfiles > summary::-webkit-details-marker { display: none; }
.ownfiles > summary h2 { margin: 0; font-size: calc(17px * var(--fs)); }
.ownfiles > summary h2::before { content: "+ "; color: var(--faint); }
.ownfiles[open] > summary { margin-bottom: 14px; }
.ownfiles[open] > summary h2::before { content: "– "; }
.howto-wrap { margin-top: 14px; }
.howto-wrap > summary { cursor: pointer; color: var(--muted); }
.rsteps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: calc(14px * var(--fs)); }
.rsteps b { color: var(--text); font-weight: 500; }
.rmine .tag { margin-left: 4px; }
.rmine-note { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.rblind-day { width: 15em; color: var(--muted); }

/* Trade charts (trade page and journal day cards) */
.tradechart .panel-head { flex-wrap: wrap; gap: 8px; }
.tc-stage { height: 340px; }
.tradechart.compact { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--ink); padding: 4px 4px 0; }
.tradechart.compact .tc-stage { height: 190px; }
.tradechart.compact .tc-note { margin: 2px 6px 6px; font-size: calc(11px * var(--fs)); }
.tradechart.tc-empty .tc-stage { height: 0; }
.tradechart.compact.tc-empty { padding: 6px 10px; }
.tc-note { margin: 6px 0 0; }
.tc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tc-tf { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 10px; font: 400 calc(12px * var(--fs))/1 "Outfit", sans-serif; cursor: pointer; }
.tc-tf:hover { color: var(--text); border-color: var(--faint); }
.tc-tf.on { background: var(--silver); color: var(--ink); border-color: var(--silver); font-weight: 600; }
.tc-replay { margin-left: 8px; color: var(--muted); }
@media (max-width: 720px) { .tc-stage { height: 260px; } }

/* Drawing tools (draw.js) */
.draw-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
.drawbar { margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.dt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dt-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.drawbar .dt { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 7px;
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--raised); color: var(--muted); cursor: pointer; font: 500 calc(12px * var(--fs))/1 "Outfit", sans-serif; }
.drawbar .dt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drawbar .dt:hover:not(:disabled) { color: var(--text); border-color: var(--faint); }
.drawbar .dt.on { background: var(--silver); border-color: var(--silver); color: var(--ink); }
.drawbar .dt:disabled { opacity: .4; cursor: default; }
.drawbar .dt-hint { color: var(--faint); font-size: calc(12px * var(--fs)); margin-left: 6px; }
.dt-style { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--raised); font-size: calc(12px * var(--fs)); }
.dt-style[hidden] { display: none; }
.ds-title { color: var(--text); font-weight: 600; margin-right: 2px; }
.ds-swatches { display: inline-flex; gap: 4px; }
.dt-color { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; }
.dt-color.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--ink) inset; }
.ds-ctl { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: calc(12px * var(--fs)); font-weight: 400; }
.ds-ctl input[type=color] { width: 30px; height: 24px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
.ds-ctl input[type=range] { width: 90px; min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--silver); }
.ds-ctl select { width: auto; min-height: 26px; padding: 2px 6px; font-size: calc(12px * var(--fs)); }
.ds-fvg { display: inline-flex; align-items: center; gap: 10px; }
.draw-text-input { position: absolute; z-index: 5; width: 220px; min-height: 0; padding: 4px 8px; font-size: calc(13px * var(--fs)); border: 1px solid var(--silver); background: var(--ink); }
.rtools { margin-bottom: 6px; }

/* Support tickets */
.tklist { list-style: none; margin: 0; padding: 0; }
.tk a { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.tk:last-child a { border-bottom: 0; }
.tk a:hover b { text-decoration: underline; text-decoration-color: var(--faint); }
.tk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tk-top b { font-weight: 500; }
.tk-status { font-size: calc(12px * var(--fs)); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tk-status.open { color: var(--warn); border-color: rgb(251 191 36 / .4); }
.tk-status.answered { color: var(--up); border-color: rgb(var(--up-rgb) / .4); }
.tk.unread .tk-top b { font-weight: 700; }
.tkclosed { margin-top: 10px; }
.tkclosed > summary { cursor: pointer; color: var(--muted); }
.thread { display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--ink); max-width: 46rem; }
.msg.admin { align-self: flex-end; background: var(--raised); border-color: rgb(var(--up-rgb) / .35); }
.msg-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.msg p { margin: 0; white-space: pre-wrap; }
.msg-reply { border-top: 1px solid var(--line); padding-top: 14px; }
.msg-reply label { margin-bottom: 6px; }
/* Terms, privacy and the links to them */
.legal-links { margin: 12px 0 0; font-size: calc(12px * var(--fs)); color: var(--faint); }
.legal-links a { color: var(--faint); }
.legal-links.center { text-align: center; }
.agree { margin-top: 10px; }
.legal { max-width: 46rem; margin: 0 auto; padding: 28px 22px 60px; line-height: 1.65; }
.legal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 30px; }
.legal-head nav { display: flex; gap: 16px; font-size: calc(14px * var(--fs)); }
.legal-head nav a { color: var(--muted); text-decoration: none; }
.legal-head nav a[aria-current] { color: var(--text); font-weight: 600; }
.legal h1 { margin: 0 0 4px; }
.legal h2 { font-size: calc(18px * var(--fs)); margin: 30px 0 8px; }
.legal h3 { font-size: calc(15px * var(--fs)); margin: 18px 0 6px; color: var(--silver); }
.legal p, .legal li { color: var(--silver); }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal-date { color: var(--faint); margin: 0 0 22px; }
.legal mark.ph { background: rgb(251 191 36 / .18); color: var(--warn); padding: 0 3px; border-radius: 3px; }
.legal-foot { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 14px; }

/* "Add this trade?" confirmation (add.js) */
.confirm-dlg { width: min(30rem, calc(100vw - 32px)); padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--panel); color: var(--text); box-shadow: 0 24px 70px var(--shadow); }
.confirm-dlg::backdrop { background: rgb(0 0 0 / .6); }
.confirm-dlg h2 { margin: 0 0 10px; font-size: calc(20px * var(--fs)); }
.cd-trade { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 14px; }
.cd-trade b { font-size: calc(17px * var(--fs)); }
.cd-trade .muted { flex-basis: 100%; font-size: calc(14px * var(--fs)); }
.cd-info { padding: 12px 14px; border-radius: var(--r-m); background: var(--raised); border: 1px solid var(--line); font-size: calc(14px * var(--fs)); }
.cd-info p { margin: 0 0 6px; color: var(--silver); }
.cd-info p:last-child { margin-bottom: 0; }
.cd-info b { color: var(--text); }
.cd-skip { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: calc(13px * var(--fs)); font-weight: 400; color: var(--muted); cursor: pointer; }
.cd-skip input { width: auto; min-height: 0; accent-color: var(--silver); }
.cd-actions { justify-content: flex-end; margin-top: 16px; }


/* ---------- light theme (Settings → Appearance, or the sun/moon button in the sidebar) ---------- */
:root[data-theme="light"] {
    --ink: #F4F4F6; --panel: #FFFFFF; --raised: #F0F0F3; --line: #E2E2E7; --text: #17171A; --muted: #52525B; --faint: #686871;
    --silver: #27272A; --up: #047857; --down: #C81E1E; --up-rgb: 4 120 87; --down-rgb: 200 30 30;
    --hi: #000; --day-none: #ECECEF; --on-tint: #17171A; --on-tint-soft: rgb(23 23 26 / .66); --chart-line: #3F3F46;
    --flat-tint: rgb(0 0 0 / .04); --row-hover: rgb(0 0 0 / .03); --glass: rgb(244 244 246 / .94); --tile-top: #FFFFFF;
    --warn: #A14A08; --warn-soft: #92400E; --warn-softer: #92400E; --down-soft: #B91C1C; --heat-empty: #E6E6EA; --heat-zero: #CBCBD2;
    --shadow: rgb(15 15 20 / .16); --meter-start: #71717A; --dash: #C8C8CF; --silver-rgb: 39 39 42;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --ink: #F4F4F6; --panel: #FFFFFF; --raised: #F0F0F3; --line: #E2E2E7; --text: #17171A; --muted: #52525B; --faint: #686871;
    --silver: #27272A; --up: #047857; --down: #C81E1E; --up-rgb: 4 120 87; --down-rgb: 200 30 30;
    --hi: #000; --day-none: #ECECEF; --on-tint: #17171A; --on-tint-soft: rgb(23 23 26 / .66); --chart-line: #3F3F46;
    --flat-tint: rgb(0 0 0 / .04); --row-hover: rgb(0 0 0 / .03); --glass: rgb(244 244 246 / .94); --tile-top: #FFFFFF;
    --warn: #A14A08; --warn-soft: #92400E; --warn-softer: #92400E; --down-soft: #B91C1C; --heat-empty: #E6E6EA; --heat-zero: #CBCBD2;
    --shadow: rgb(15 15 20 / .16); --meter-start: #71717A; --dash: #C8C8CF; --silver-rgb: 39 39 42;
    color-scheme: light;
  }
}
:root[data-theme="light"] .lockup img { filter: brightness(.42) contrast(1.15); }
@media (prefers-color-scheme: light) { :root[data-theme="system"] .lockup img { filter: brightness(.42) contrast(1.15); } }

/* ---------- sidebar quick toggles: hide $ amounts, theme ---------- */
.quick { display: flex; gap: 6px; margin: 10px 0 0; }
.quick button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: transparent; color: var(--muted); font: 500 calc(12.5px * var(--fs))/1 "Outfit", sans-serif; cursor: pointer; }
.quick button:hover { color: var(--text); border-color: var(--faint); }
.quick button[aria-pressed="true"] { color: var(--text); background: var(--raised); }
.quick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobilebar .quick { margin: 0 0 0 auto; }
.mobilebar .quick button { flex: none; min-height: 34px; width: 38px; padding: 0; }
.mobilebar .quick .ql { display: none; }
.hidepl-note { display: none; }
html.hide-pl .hidepl-note { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--fs)); color: var(--muted);
  border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; }
.theme-note { margin-top: 14px; }
kbd { font: 500 calc(12px * var(--fs))/1 "Outfit", sans-serif; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: var(--raised); }

/* admin-only "restart the bot / website" warnings */
.syswarn { border: 1px solid rgb(245 180 81 / .45); background: rgb(245 180 81 / .08); color: var(--warn-soft); border-radius: var(--r-m);
  padding: 10px 14px; margin-bottom: 14px; font-size: calc(14px * var(--fs)); }
.tk-sent { display: flex; gap: 12px; align-items: flex-start; border: 1px solid rgb(var(--up-rgb) / .4); background: rgb(var(--up-rgb) / .08);
  border-radius: var(--r-m); padding: 12px 16px; margin-bottom: 16px; }
.tk-sent svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--up); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-cd-msg { white-space: pre-wrap; color: var(--muted); border-left: 2px solid var(--line); padding-left: 10px; }

/* ---------- errors you can't miss: red flash, form error box, red fields ---------- */
.flash.bad, .formerr { border: 1px solid rgb(var(--down-rgb) / .55); background: rgb(var(--down-rgb) / .1); color: var(--text); }
.flash.bad::before { content: "⚠ "; color: var(--down); }
.formerr { border-radius: var(--r-m); padding: 11px 14px; margin-bottom: 14px; font-size: calc(14px * var(--fs)); }
.formerr b { color: var(--down); }
.formerr[hidden] { display: none; }
.panel.has-error { border-color: rgb(var(--down-rgb) / .45); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--down); box-shadow: 0 0 0 3px rgb(var(--down-rgb) / .18); }
.field.invalid label { color: var(--down); }
.fieldhint { font-size: calc(12.5px * var(--fs)); color: var(--faint); margin: 5px 0 0; display: flex; justify-content: space-between; gap: 10px; }
.field.invalid .fieldhint { color: var(--down); }
.fieldhint .count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fieldhint .count.short { color: var(--down); }
.fieldhint .count.ok { color: var(--up); }
.tk-kind { color: var(--muted); }
.tk-status.declined { color: var(--down); border-color: rgb(var(--down-rgb) / .4); }

/* ---------- phone: sign-in code, installable app ---------- */
.devcode { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: var(--r-m); background: var(--raised); }
.devcode-value { font-size: calc(30px * var(--fs)); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.devcode-help { margin-top: 10px; }
.codeinput { font-size: calc(22px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.codebtn { margin-top: 10px; }
@media (max-width: 820px) {
  .mobilebar { padding-top: calc(12px + env(safe-area-inset-top)); }
  .main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
.dellist { margin: 0 0 12px; padding-left: 18px; } .dellist li { margin-bottom: 6px; }
.datadel { margin-top: 14px; } .dangerlink { color: var(--down); }

/* ---------- learn diagrams (theme colours, so they work in light and dark) ---------- */
.dg { margin: 18px 0 22px; padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--raised); }
.dg svg { width: 100%; height: auto; display: block; overflow: visible; }
.dg figcaption { font-size: calc(13px * var(--fs)); color: var(--muted); margin-top: 8px; }
.dg-up { fill: var(--up); } .dg-down { fill: var(--down); }
.dg-wick { stroke: var(--muted); stroke-width: 2; }
.dg-label { fill: var(--muted); font-size: calc(13px * var(--fs)); } .dg-small { fill: var(--muted); font-size: calc(12px * var(--fs)); }
.dg-title { fill: var(--text); font-size: calc(13px * var(--fs)); font-weight: 600; } .dg-big { fill: var(--text); font-size: calc(18px * var(--fs)); font-weight: 600; }
.dg-guide { stroke: var(--line); stroke-width: 1; }
.dg-zone { fill: rgb(var(--silver-rgb) / .14); stroke: rgb(var(--silver-rgb) / .35); stroke-dasharray: 4 3; }
.dg-price { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linejoin: round; }
.dg-dot { fill: var(--up); } .dg-dot.down { fill: var(--down); }
.dg-trend { stroke: var(--warn); stroke-width: 2; } .dg-trend.faint { stroke-dasharray: 6 5; opacity: .7; }
.dg-level { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 6 5; }
.dg-fib { stroke: var(--faint); stroke-width: 1; } .dg-fib.strong { stroke: var(--warn); stroke-width: 1.6; }
.dg-gap { fill: rgb(var(--up-rgb) / .16); stroke: rgb(var(--up-rgb) / .5); stroke-dasharray: 4 3; }
.dg-reward { fill: rgb(var(--up-rgb) / .18); } .dg-risk { fill: rgb(var(--down-rgb) / .18); }
.dg-entry { stroke: var(--text); stroke-width: 2; }
.dg-sess { fill: rgb(var(--silver-rgb) / .12); stroke: var(--line); } .dg-sess.alt { fill: rgb(var(--silver-rgb) / .2); }
.dg-sess.hi { fill: rgb(var(--up-rgb) / .18); } .dg-halt { fill: rgb(var(--down-rgb) / .25); }

/* ---------- Learn ---------- */
.learn-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.learn-top .panel { margin: 0; }
.learn-progress .tbar { margin: 4px 0 14px; }
.learn-next { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-m); background: var(--raised); border: 1px solid var(--line); text-decoration: none; }
.learn-next:hover { border-color: var(--faint); }
.learn-next b { font-size: calc(16px * var(--fs)); }
.learn-searchhint { margin-top: 8px; }
.learn-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.learn-tracks .panel { margin: 0; }
.lt-count { font-size: calc(12px * var(--fs)); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.lt-count.all { color: var(--up); border-color: rgb(var(--up-rgb) / .45); }
.lessonlist { list-style: none; margin: 8px 0 0; padding: 0; }
.lessonlist a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; }
.lessonlist a:hover b { text-decoration: underline; text-decoration-color: var(--faint); }
.ll-mark { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: calc(12px * var(--fs)); color: var(--muted); }
.lessonlist a.done .ll-mark { background: rgb(var(--up-rgb) / .15); border-color: rgb(var(--up-rgb) / .5); color: var(--up); }
.ll-text { display: flex; flex-direction: column; gap: 1px; }
.ll-min { white-space: nowrap; padding-top: 2px; }
.lessonlist li[hidden], .learn-track[hidden], .gl-item[hidden], .gl-group[hidden], .learn-none[hidden] { display: none; }
.learn-disclaimer { margin-top: 22px; }
@media (max-width: 980px) { .learn-top, .learn-tracks { grid-template-columns: minmax(0, 1fr); } }

.lesson { max-width: 780px; }
.lesson h1 { font-size: calc(30px * var(--fs)); margin-bottom: 6px; }
.lesson-meta { margin-bottom: 14px; }
.lesson-lede { font-size: calc(17px * var(--fs)); color: var(--silver); margin-bottom: 18px; }
.lesson-body { font-size: calc(16px * var(--fs)); line-height: 1.7; }
.lesson-body h2 { font-size: calc(20px * var(--fs)); margin: 28px 0 10px; }
.lesson-body h3 { font-size: calc(16px * var(--fs)); margin: 20px 0 8px; }
.lesson-body ul, .lesson-body ol { padding-left: 22px; margin: 0 0 14px; }
.lesson-body li { margin-bottom: 6px; }
.lesson-body code { font-size: calc(14px * var(--fs)); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.callout { border-left: 3px solid var(--warn); background: rgb(245 180 81 / .07); padding: 10px 14px; border-radius: 0 var(--r-s) var(--r-s) 0; margin: 14px 0 18px; }
.ltable { width: 100%; font-size: calc(14px * var(--fs)); margin: 8px 0 16px; }
.ltable th { color: var(--muted); }
.ltable td, .ltable th { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.quiz { margin: 30px 0 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); }
.quiz h2 { font-size: calc(18px * var(--fs)); margin-bottom: 10px; }
.qz { padding: 10px 0; border-top: 1px solid var(--line); }
.qz:first-of-type { border-top: 0; }
.qz-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.qz-opt { text-align: left; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--raised); color: var(--text); font: 400 calc(15px * var(--fs))/1.4 "Outfit", sans-serif; cursor: pointer; }
.qz-opt:hover:not(:disabled) { border-color: var(--faint); }
.qz-opt:disabled { cursor: default; }
.qz-opt.right { border-color: rgb(var(--up-rgb) / .7); background: rgb(var(--up-rgb) / .12); }
.qz-opt.wrong { border-color: rgb(var(--down-rgb) / .7); background: rgb(var(--down-rgb) / .12); }
.qz-why { margin: 10px 0 0; font-size: calc(14px * var(--fs)); color: var(--muted); }
.qz.got-it .qz-why { color: var(--text); }
.qz-score { margin-top: 10px; }
.practice { margin: 22px 0; padding: 14px 18px; border-radius: var(--r-l); background: rgb(var(--up-rgb) / .07); border: 1px solid rgb(var(--up-rgb) / .3); }
.practice h2 { font-size: calc(16px * var(--fs)); margin-bottom: 6px; }
.practice ul { margin: 0; padding-left: 18px; }
.lesson-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.lesson-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-nav .btn { white-space: normal; text-align: left; }

.gl-letters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.gl-letters a { min-width: 28px; text-align: center; padding: 3px 6px; border-radius: var(--r-s); border: 1px solid var(--line); text-decoration: none; font-size: calc(13px * var(--fs)); }
.gl-letter { font-size: calc(20px * var(--fs)); margin-bottom: 6px; }
.gl { margin: 0; }
.gl-item { padding: 9px 0; border-top: 1px solid var(--line); }
.gl-item dt { font-weight: 600; }
.gl-item dd { margin: 2px 0 0; color: var(--muted); }
.gl-item dd a { margin-left: 4px; }
.wv-text { font-size: calc(15px * var(--fs)); line-height: 1.3; }

/* ---------- Watch mode (narrated slides) ---------- */
.watch-btn { margin: 4px 0 18px; }
.watch-btn svg { width: 16px; height: 16px; fill: currentColor; }
.watch-len { font-weight: 400; opacity: .75; }
.shot { margin: 18px 0 22px; }
.shot img { width: 100%; height: auto; display: block; border-radius: var(--r-m); border: 1px solid var(--line); }
.shot figcaption { font-size: calc(13px * var(--fs)); color: var(--muted); margin-top: 8px; }
dialog.watch { width: min(1180px, 100vw); max-width: 100vw; height: min(760px, 100dvh); max-height: 100dvh; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-l); background: var(--ink); color: var(--text); display: none; flex-direction: column; overflow: hidden; }
dialog.watch[open] { display: flex; }
dialog.watch::backdrop { background: rgb(0 0 0 / .78); }
.ws-stage { flex: 1; min-height: 0; position: relative; padding: 34px 44px 10px; overflow: hidden; }
.ws-slide { height: 100%; display: flex; flex-direction: column; }
.ws-slide h2 { font-size: calc(30px * var(--fs)); margin-bottom: 18px; }
.ws-kicker { color: var(--muted); font-size: calc(14px * var(--fs)); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.ws-title { justify-content: center; text-align: center; }
.ws-title h2 { font-size: calc(46px * var(--fs)); }
.ws-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.ws-body.has-visual.has-points { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.ws-visual { min-height: 0; max-height: 100%; display: flex; align-items: center; justify-content: center; }
.ws-visual .dg { margin: 0; width: 100%; background: transparent; border: 0; padding: 0; }
.ws-visual .dg figcaption { display: none; }
.ws-visual img { max-width: 100%; max-height: 52vh; border-radius: var(--r-m); border: 1px solid var(--line); }
.ws-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: calc(21px * var(--fs)); }
.ws-body:not(.has-visual) .ws-points { max-width: 760px; margin: 0 auto; width: 100%; }
.ws-points li { padding: 10px 14px 10px 18px; border-left: 3px solid var(--up); background: var(--panel); border-radius: 0 var(--r-m) var(--r-m) 0;
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.ws-points li.shown { opacity: 1; transform: none; }
.ws-end .ws-points li { border-left-color: var(--warn); }
.ws-caption { margin: 0; min-height: 64px; padding: 10px 44px; font-size: calc(19px * var(--fs)); line-height: 1.45; text-align: center; color: var(--text);
  background: linear-gradient(0deg, rgb(var(--silver-rgb) / .06), transparent); }
.ws-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.ws-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--raised); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.ws-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws-play { width: 46px; height: 46px; background: var(--silver); color: var(--ink); border-color: var(--silver); }
.ws-play svg { fill: currentColor; stroke: none; } .ws-play .i-pause { fill: none; stroke: currentColor; stroke-width: 2.6; }
.ws-play .i-play { display: none; } .watch.paused .ws-play .i-play { display: block; } .watch.paused .ws-play .i-pause { display: none; }
.ws-progress { flex: 1; height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; min-width: 40px; }
.ws-progress span { display: block; height: 100%; width: 0; background: var(--up); transition: width .4s ease; }
.ws-count { color: var(--muted); white-space: nowrap; }
.ws-bar select { width: auto; min-height: 36px; padding: 4px 8px; font-size: calc(13px * var(--fs)); max-width: 170px; }
@media (max-width: 820px) {
  dialog.watch { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .ws-stage { padding: calc(18px + env(safe-area-inset-top)) 18px 6px; }
  .ws-slide h2 { font-size: calc(22px * var(--fs)); margin-bottom: 12px; } .ws-title h2 { font-size: calc(30px * var(--fs)); }
  .ws-body.has-visual.has-points { display: flex; }
  .ws-points { font-size: calc(16px * var(--fs)); gap: 8px; } .ws-points li { padding: 7px 10px 7px 12px; }
  .ws-caption { font-size: calc(16px * var(--fs)); padding: 8px 16px; min-height: 70px; }
  .ws-bar { flex-wrap: wrap; gap: 6px; } .ws-progress { order: -1; flex-basis: 100%; }
  .ws-bar select { max-width: 120px; }
}
/* diagrams draw themselves on each slide */
.ws-slide.on .dg svg > * { animation: ws-fade .5s ease both; }
.ws-slide.on .dg svg > line, .ws-slide.on .dg svg > polyline { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: ws-draw 1.6s ease forwards; }
.ws-slide.on .dg-level, .ws-slide.on .dg-trend.faint, .ws-slide.on .dg-fib { animation: ws-fade .6s ease both !important; stroke-dasharray: 6 5 !important; stroke-dashoffset: 0 !important; }
.ws-slide.on .dg-fib:not(.strong) { stroke-dasharray: none !important; }
@keyframes ws-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ws-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ws-slide.on .dg svg > * { animation: none !important; stroke-dashoffset: 0 !important; } .ws-points li { transition: none; } }
.ws-slide.on .dg svg > *:nth-child(1) { animation-delay: 0.23s; }
.ws-slide.on .dg svg > *:nth-child(2) { animation-delay: 0.36s; }
.ws-slide.on .dg svg > *:nth-child(3) { animation-delay: 0.49s; }
.ws-slide.on .dg svg > *:nth-child(4) { animation-delay: 0.62s; }
.ws-slide.on .dg svg > *:nth-child(5) { animation-delay: 0.75s; }
.ws-slide.on .dg svg > *:nth-child(6) { animation-delay: 0.88s; }
.ws-slide.on .dg svg > *:nth-child(7) { animation-delay: 1.01s; }
.ws-slide.on .dg svg > *:nth-child(8) { animation-delay: 1.14s; }
.ws-slide.on .dg svg > *:nth-child(9) { animation-delay: 1.27s; }
.ws-slide.on .dg svg > *:nth-child(10) { animation-delay: 1.4s; }
.ws-slide.on .dg svg > *:nth-child(11) { animation-delay: 1.53s; }
.ws-slide.on .dg svg > *:nth-child(12) { animation-delay: 1.66s; }
.ws-slide.on .dg svg > *:nth-child(13) { animation-delay: 1.79s; }
.ws-slide.on .dg svg > *:nth-child(14) { animation-delay: 1.92s; }
.ws-slide.on .dg svg > *:nth-child(15) { animation-delay: 2.05s; }
.ws-slide.on .dg svg > *:nth-child(16) { animation-delay: 2.18s; }
.ws-slide.on .dg svg > *:nth-child(17) { animation-delay: 2.31s; }
.ws-slide.on .dg svg > *:nth-child(18) { animation-delay: 2.44s; }
.ws-slide.on .dg svg > *:nth-child(19) { animation-delay: 2.57s; }
.ws-slide.on .dg svg > *:nth-child(20) { animation-delay: 2.7s; }
.ws-slide.on .dg svg > *:nth-child(21) { animation-delay: 2.83s; }
.ws-slide.on .dg svg > *:nth-child(22) { animation-delay: 2.96s; }
.ws-slide.on .dg svg > *:nth-child(23) { animation-delay: 3.09s; }
.ws-slide.on .dg svg > *:nth-child(24) { animation-delay: 3.22s; }
.ws-slide.on .dg svg > *:nth-child(25) { animation-delay: 3.35s; }
.ws-slide.on .dg svg > *:nth-child(26) { animation-delay: 3.48s; }
.ws-slide.on .dg svg > *:nth-child(27) { animation-delay: 3.61s; }
.ws-slide.on .dg svg > *:nth-child(28) { animation-delay: 3.74s; }
.ws-slide.on .dg svg > *:nth-child(29) { animation-delay: 3.87s; }
.ws-slide.on .dg svg > *:nth-child(30) { animation-delay: 4.0s; }
.ws-slide.on .dg svg > *:nth-child(31) { animation-delay: 4.13s; }
.ws-slide.on .dg svg > *:nth-child(32) { animation-delay: 4.26s; }
.ws-slide.on .dg svg > *:nth-child(33) { animation-delay: 4.39s; }
.ws-slide.on .dg svg > *:nth-child(34) { animation-delay: 4.52s; }
.ws-slide.on .dg svg > *:nth-child(35) { animation-delay: 4.65s; }
.ws-slide.on .dg svg > *:nth-child(36) { animation-delay: 4.78s; }
.ws-slide.on .dg svg > *:nth-child(37) { animation-delay: 4.91s; }
.ws-slide.on .dg svg > *:nth-child(38) { animation-delay: 5.04s; }
.ws-slide.on .dg svg > *:nth-child(39) { animation-delay: 5.17s; }
.ws-slide.on .dg svg > *:nth-child(40) { animation-delay: 5.3s; }

.dg-ask { fill: rgb(var(--down-rgb) / .45); } .dg-bid { fill: rgb(var(--up-rgb) / .45); }
.dg-spread { fill: rgb(var(--silver-rgb) / .1); stroke: var(--line); stroke-dasharray: 4 3; }
.up-t { fill: var(--up); } .down-t { fill: var(--down); }
.dg-up-l { stroke: var(--up); stroke-width: 3; } .dg-down-l { stroke: var(--down); stroke-width: 3; }
.dg-pay { fill: none; stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.dg-floor { fill: none; stroke: var(--down); stroke-width: 2.4; stroke-dasharray: 7 5; }
.dg-card { fill: var(--panel); stroke: var(--line); }
.dg-funnel { stroke: var(--line); } .dg-funnel.a { fill: rgb(var(--silver-rgb) / .08); } .dg-funnel.b { fill: rgb(var(--silver-rgb) / .15); } .dg-funnel.c { fill: rgb(var(--up-rgb) / .2); }
.dg-vol { fill: rgb(var(--silver-rgb) / .3); } .dg-vol.big { fill: var(--up); }
.dg-ma { fill: none; stroke: #60A5FA; stroke-width: 2.2; } .dg-vwap { fill: none; stroke: #C084FC; stroke-width: 2.2; stroke-dasharray: 8 5; }
.ma-t { fill: #60A5FA; } .vwap-t { fill: #C084FC; }
.dg-pivot { fill: var(--faint); } .dg-beam { stroke: var(--text); stroke-width: 6; stroke-linecap: round; }
.dg-card.win { stroke: rgb(var(--up-rgb) / .6); fill: rgb(var(--up-rgb) / .1); } .dg-card.bad { stroke: rgb(var(--down-rgb) / .6); fill: rgb(var(--down-rgb) / .1); }
.dg-barv { fill: rgb(var(--up-rgb) / .55); }
.dg-cell.good { fill: rgb(var(--up-rgb) / .12); stroke: rgb(var(--up-rgb) / .45); } .dg-cell.bad { fill: rgb(var(--down-rgb) / .12); stroke: rgb(var(--down-rgb) / .45); }
.dg-ring { fill: none; stroke: var(--down); stroke-width: 2; stroke-dasharray: 8 6; }

/* ---------- Watch mode: animated scenes (web/static/scenes.js) ---------- */
.ws-visual { position: relative; width: 100%; height: 100%; min-height: 240px; }
.ws-base { width: 100%; display: flex; align-items: center; justify-content: center; transition: opacity .45s ease, transform .45s ease; }
.ws-base.off { opacity: 0; transform: scale(.97); position: absolute; inset: 0; pointer-events: none; }
.ws-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.ws-scene.on { position: relative; opacity: 1; width: 100%; height: 100%; }
.ws-base:not(.off) + .ws-scene:not(.on) { display: none; }
.ws-scene > svg.sc { width: 100%; height: 100%; max-height: 58vh; overflow: visible; }
.ws-ambient { position: absolute; inset: 8% 4% 6%; opacity: .2; pointer-events: none; }
.ws-ambient svg { width: 100%; height: 100%; }
.ws-title { position: relative; } .ws-title > :not(.ws-ambient) { position: relative; z-index: 1; }
/* screenshots drift slowly (a "Ken Burns" pan), moving on with each line */
.ws-shot { overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--line); max-height: 54vh; display: flex; }
.ws-shot img { border: 0; border-radius: 0; max-height: 54vh; width: 100%; object-fit: cover; object-position: top; transition: transform 7s ease-out; transform-origin: 30% 20%; }
.ws-shot.kb0 img { transform: scale(1.02); } .ws-shot.kb1 img { transform: scale(1.12); transform-origin: 20% 25%; }
.ws-shot.kb2 img { transform: scale(1.14); transform-origin: 75% 40%; } .ws-shot.kb3 img { transform: scale(1.1); transform-origin: 45% 80%; }
/* diagrams: parts appear as the narrator gets to them */
.ws-slide.on .dg svg > .ws-hold { animation: none !important; opacity: 0; transition: opacity .5s ease; }
.ws-slide.on .dg svg > .ws-hold.ws-show { opacity: 1; }
.ws-slide.on .dg svg > line.ws-hold.ws-show:not(.dg-level):not(.faint):not(.dg-fib):not(.dg-guide),
.ws-slide.on .dg svg > polyline.ws-hold.ws-show { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: ws-draw 1.4s ease forwards !important; }
@media (prefers-reduced-motion: reduce) { .ws-shot img { transition: none; transform: none !important; } }

/* shared scene pieces */
.sc text { font-family: "Outfit", sans-serif; }
.sc .in, .sc-big .in, .sc-cards .in { opacity: 1 !important; transform: none !important; }
.sc-grid line { stroke: var(--line); stroke-width: 1; opacity: .6; }
.sc-c { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; transform-box: fill-box; }
.sc-c.in { opacity: 1; transform: none; }
.sc-c.up rect { fill: var(--up); } .sc-c.down rect { fill: var(--down); }
.sc-wick { stroke: var(--muted); stroke-width: 1.6; } .sc-wick.big { stroke-width: 4; stroke-linecap: round; }
.sc-vol { fill: rgb(var(--silver-rgb) / .28); } .sc-vol.big { fill: var(--up); }
.sc-last { opacity: 0; transition: transform .2s ease, opacity .3s; } .sc-last.on { opacity: 1; }
.sc-last rect { fill: var(--up); } .sc-last.down rect { fill: var(--down); } .sc-last text { fill: var(--ink); font-size: calc(12px * var(--fs)); font-weight: 600; }
.sc-axis { fill: var(--muted); font-size: calc(12px * var(--fs)); }
.sc-h, .sc-tl, .sc-fib, .sc-arrow { opacity: 0; transition: opacity .4s; }
.sc-draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.sc-draw.in { animation: sc-draw 1.2s ease forwards; }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
.sc-h { stroke: var(--silver); stroke-width: 2; } .sc-h.in { stroke-dasharray: 7 5; animation: none; stroke-dashoffset: 0; }
.sc-h.res { stroke: var(--down); } .sc-h.sup { stroke: var(--up); } .sc-h.stop { stroke: var(--down); } .sc-h.tgt { stroke: var(--up); } .sc-h.entry { stroke: var(--text); stroke-dasharray: none !important; }
.sc-tl { stroke: var(--warn); stroke-width: 2.4; } .sc-tl.faint { stroke-opacity: .7; }
.sc-hl { fill: var(--muted); font-size: calc(13px * var(--fs)); font-weight: 500; opacity: 0; transition: opacity .4s; }
.sc-hl.up, .sc-lab.up text { fill: var(--up); } .sc-hl.down, .sc-lab.down text { fill: var(--down); } .sc-hl.warn, .sc-lab.warn text { fill: var(--warn); }
.sc-hl.res, .sc-hl.stop { fill: var(--down); } .sc-hl.sup, .sc-hl.tgt { fill: var(--up); } .sc-hl.entry { fill: var(--text); }
.sc-lab { opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.sc-lab text { fill: var(--text); font-size: calc(13.5px * var(--fs)); font-weight: 600; paint-order: stroke; stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; }
.sc-lab.muted text { fill: var(--muted); }
.sc-dot { fill: var(--text); opacity: 0; transition: opacity .3s; } .sc-dot.up { fill: var(--up); } .sc-dot.down { fill: var(--down); } .sc-dot.warn { fill: var(--warn); }
.sc-ring { fill: none; stroke: var(--up); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(2.2); transition: opacity .35s, transform .45s ease; }
.sc-ring.down { stroke: var(--down); }
.sc-zone { fill: rgb(var(--silver-rgb) / .12); opacity: 0; transition: opacity .5s; }
.sc-zone.res { fill: rgb(var(--down-rgb) / .16); } .sc-zone.sup { fill: rgb(var(--up-rgb) / .16); } .sc-zone.warn { fill: rgb(251 191 36 / .14); }
.sc-box { fill: rgb(var(--silver-rgb) / .1); stroke: rgb(var(--silver-rgb) / .4); stroke-dasharray: 5 4; opacity: 0; transition: opacity .5s; }
.sc-box.up { fill: rgb(var(--up-rgb) / .16); stroke: rgb(var(--up-rgb) / .6); }
.sc-fib { stroke: var(--faint); stroke-width: 1; } .sc-fib.strong { stroke: var(--warn); stroke-width: 1.6; }
.sc-ma { fill: none; stroke: #60A5FA; stroke-width: 2.4; } .sc-ma.vwap { stroke: #C084FC; stroke-dasharray: 9 5; }
.sc-matag { fill: #60A5FA; font-size: calc(12px * var(--fs)); font-weight: 600; } .sc-matag.vwap { fill: #C084FC; }
.sc-pane { fill: rgb(var(--silver-rgb) / .04); stroke: var(--line); }
.sc-rsi { fill: none; stroke: var(--warn); stroke-width: 2; } .sc-rsi-lv { stroke: var(--line); stroke-dasharray: 4 4; }
.sc-pnl { opacity: 0; transition: opacity .4s; } .sc-pnl rect { fill: var(--panel); stroke: var(--line); }
.sc-pnlv { fill: var(--up); font-size: calc(19px * var(--fs)); font-weight: 700; } .sc-pnl.down .sc-pnlv { fill: var(--down); }
.sc-risk { fill: rgb(var(--down-rgb) / .13); opacity: 0; transition: opacity .5s; } .sc-reward { fill: rgb(var(--up-rgb) / .13); opacity: 0; transition: opacity .5s; }
.sc-chart.quiet .sc-last, .sc-chart.quiet .sc-grid { display: none; }
.sc-title { fill: var(--text); font-size: calc(17px * var(--fs)); font-weight: 600; }
.sc-base, .sc-zero { stroke: var(--line); stroke-width: 2; } .sc-zero { stroke-dasharray: 5 5; }
.sc-guide { stroke: var(--line); stroke-width: 1.5; }
/* big numbers */
.sc-big { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: stretch; width: 100%; }
.sc-bigc { flex: 1 1 200px; max-width: 340px; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); text-align: center;
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s ease, transform .5s ease; }
.sc-bign { font-size: clamp(34px, 6vw, 64px); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sc-bigc.up .sc-bign { color: var(--up); } .sc-bigc.down .sc-bign { color: var(--down); }
.sc-bigl { margin-top: 10px; color: var(--muted); font-size: calc(17px * var(--fs)); }
/* equations */
.sc-calc { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; align-items: center; font-size: clamp(22px, 3.6vw, 40px); font-weight: 600; max-width: 900px; }
.sc-tok { padding: 10px 16px; border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--line); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; font-variant-numeric: tabular-nums; }
.sc-tok.op { background: none; border-color: transparent; color: var(--muted); padding: 10px 2px; }
.sc-tok.last { background: rgb(var(--up-rgb) / .16); border-color: rgb(var(--up-rgb) / .55); color: var(--up); }
.sc-tok.in { opacity: 1; transform: none; }
/* bars */
.sc-bar { opacity: 0; transition: opacity .3s; } .sc-bar rect { fill: var(--up); } .sc-bar.down rect { fill: var(--down); }
.sc-barv { fill: var(--text); font-size: calc(18px * var(--fs)); font-weight: 700; } .sc-barl { fill: var(--muted); font-size: calc(14px * var(--fs)); }
/* timeline */
.sc-tm { opacity: .25; transition: opacity .4s; } .sc-tm.in { opacity: 1 !important; } .sc-tm circle { fill: var(--raised); stroke: var(--silver); stroke-width: 2; }
.sc-tm.cur circle { fill: var(--warn); stroke: var(--warn); } .sc-tmt { fill: var(--text); font-size: calc(18px * var(--fs)); font-weight: 700; } .sc-tml { fill: var(--muted); font-size: calc(13.5px * var(--fs)); }
.sc-tm.cur .sc-tml { fill: var(--text); }
.sc-now { fill: none; stroke: var(--warn); stroke-width: 2.5; opacity: 0; transition: cx .7s ease, opacity .3s; } .sc-now.in { opacity: 1; }
/* streak */
.sc-streak { text-align: center; width: 100%; }
.sc-coins { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 720px; margin: 0 auto; }
.sc-coin { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: calc(18px * var(--fs)); color: var(--ink);
  opacity: 0; transform: rotateY(90deg); transition: opacity .25s, transform .35s ease, box-shadow .3s; }
.sc-coin.w { background: var(--up); } .sc-coin.l { background: var(--down); }
.sc-coin.in { opacity: 1; transform: none; } .sc-coin.hot { box-shadow: 0 0 0 4px rgb(var(--down-rgb) / .35); }
.sc-snote { margin-top: 22px; font-size: calc(22px * var(--fs)); font-weight: 600; opacity: 0; transition: opacity .4s; }
.sc-snote.in { opacity: 1; }
/* equity */
.sc-eqline { fill: none; stroke: var(--up); stroke-width: 3; stroke-linejoin: round; } .sc-eqline.warn { stroke: var(--warn); } .sc-eqline.down { stroke: var(--down); }
.sc-floor { fill: none; stroke: var(--down); stroke-width: 2.4; stroke-dasharray: 7 5; }
.sc-eq .sc-draw.in { animation-duration: 2.4s; }
/* cards */
.sc-cards { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 640px; }
.sc-card { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--panel); font-size: clamp(17px, 2.2vw, 22px);
  opacity: 0; transform: translateX(-18px); transition: opacity .45s, transform .45s; }
.sc-card.good { border-color: rgb(var(--up-rgb) / .55); background: rgb(var(--up-rgb) / .08); } .sc-card.bad { border-color: rgb(var(--down-rgb) / .55); background: rgb(var(--down-rgb) / .08); }
.sc-mark { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--ink); }
.sc-card.good .sc-mark { background: var(--up); } .sc-card.bad .sc-mark { background: var(--down); }
/* flow */
.sc-node { opacity: 0; transition: opacity .4s; } .sc-node rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.sc-node text { fill: var(--text); font-size: calc(16px * var(--fs)); font-weight: 600; } .sc-node.cur rect { fill: rgb(var(--up-rgb) / .16); stroke: var(--up); }
.sc-arrow { stroke: var(--muted); stroke-width: 2; } .sc-ahead { fill: var(--muted); }
/* one candle */
.sc-body { fill: var(--muted); transition: y .3s, height .3s; } .sc-body.up { fill: var(--up); } .sc-body.down { fill: var(--down); }
.sc-tickline { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 4 4; transition: opacity .4s; } .sc-tickp { fill: var(--text); font-size: calc(16px * var(--fs)); font-weight: 600; }
.sc-tickline.gone, .sc-tickp.gone { opacity: 0; }
.sc-one line, .sc-one text { transition: y1 .3s, y2 .3s, y .3s; }
/* order book */
.sc-ask { fill: rgb(var(--down-rgb) / .5); transition: opacity .3s; } .sc-bid { fill: rgb(var(--up-rgb) / .5); }
.sc-ask.gone, .sc-book .gone { opacity: 0; } .sc-bookp { fill: var(--text); font-size: calc(15px * var(--fs)); font-variant-numeric: tabular-nums; }
.sc-spreadbar { fill: rgb(251 191 36 / .5); } .sc-lastp { fill: var(--text); font-size: calc(18px * var(--fs)); font-weight: 700; } .sc-lastp.up { fill: var(--up); }
/* seesaw */
.sc-pivot { fill: var(--raised); stroke: var(--line); } .sc-beam line { stroke: var(--text); stroke-width: 7; stroke-linecap: round; }
.sc-weight { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; } .sc-weight.warn { stroke: var(--warn); }
.sc-beam text { fill: var(--text); font-size: calc(17px * var(--fs)); font-weight: 600; }
@media (max-width: 820px) {
  .ws-visual { min-height: 200px; } .ws-scene > svg.sc { max-height: 42vh; }
  .sc-bigc { padding: 16px; } .sc-bigl { font-size: calc(14px * var(--fs)); } .sc-coin { width: 38px; height: 38px; font-size: calc(14px * var(--fs)); }
  .sc-card { padding: 12px 14px; } .sc-calc { gap: 8px; } .sc-tok { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .sc *, .sc-big *, .sc-cards * { transition: none !important; animation: none !important; } }
.sc-donec { fill: rgb(var(--up-rgb) / .1); stroke: var(--up); stroke-width: 5; } .sc-donek { fill: none; stroke: var(--up); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.sc-donet { fill: var(--text); font-size: calc(26px * var(--fs)); font-weight: 700; opacity: 0; transition: opacity .5s; }
@media (prefers-reduced-motion: reduce) { .sc-draw { stroke-dasharray: none; stroke-dashoffset: 0; } .sc-c, .sc-lab, .sc-hl, .sc-h, .sc-tl, .sc-zone, .sc-box { transition: none; } }

/* ---------- personal insights ---------- */
.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.insight { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.insight:last-child { border-bottom: 0; }
.insight-dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--silver); }
.insight.bad .insight-dot { background: var(--down); } .insight.good .insight-dot { background: var(--up); } .insight.info .insight-dot { background: var(--warn); }
.insight-text { margin: 0 0 6px; line-height: 1.5; }
.insight-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ---------- coach feedback on a trade ---------- */
.coach-thread { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coach-msg { padding: 12px 14px; border-radius: var(--r-m); background: var(--raised); border: 1px solid var(--line); }
.coach-msg.from-coach { background: rgb(var(--up-rgb) / .08); border-color: rgb(var(--up-rgb) / .4); }
.coach-who { margin: 0 0 6px; } .coach-body { white-space: pre-wrap; line-height: 1.5; }
.coach-form { margin-top: 6px; } .coach-note { margin-top: -6px; }
.facts.one { grid-template-columns: minmax(0, 1fr); } dd.pre { white-space: pre-wrap; }
.coach-ask { border-color: rgb(var(--up-rgb) / .45); }
.coach-q { font-size: calc(18px * var(--fs)); line-height: 1.5; margin: 0 0 6px; white-space: pre-wrap; }
.coach-ask .actions { align-items: center; margin: 12px 0 0; }
.coach-bottom { margin-top: 18px; }
.coach-bottom textarea { min-height: 160px; }

/* ---------- Market: daily recap ---------- */
.market-week, .news-nav { margin-bottom: 14px; }
.recap-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.recap-top h2 { margin: 2px 0 0; font-size: calc(22px * var(--fs)); }
.eyebrow { margin: 0; font-size: calc(12px * var(--fs)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgb(var(--up-rgb) / .22); animation: livepulse 1.8s ease-in-out infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 6px rgb(var(--up-rgb) / 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.recap-sum { margin: 12px 0 4px; font-size: calc(15.5px * var(--fs)); line-height: 1.55; max-width: 78ch; }
.mstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mcard { position: relative; display: grid; gap: 2px; padding: 11px 12px 34px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--raised); overflow: hidden; min-width: 0; }
.mlabel { font-size: calc(12px * var(--fs)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mval { font-size: calc(18px * var(--fs)); font-variant-numeric: tabular-nums; }
.mmove { font-size: calc(13px * var(--fs)); font-weight: 600; font-variant-numeric: tabular-nums; }
.spark { position: absolute; left: 0; right: 0; bottom: 4px; width: 100%; height: 26px; }
.spark polyline { fill: none; stroke: var(--faint); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark.up polyline { stroke: var(--up); } .spark.dn polyline { stroke: var(--down); }
.recap-grid { margin-top: 0; }
.secbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.secbars li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 4.6em; align-items: center; gap: 10px; font-size: calc(14px * var(--fs)); }
.secbars .sname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secbars b { text-align: right; font-variant-numeric: tabular-nums; }
.sbar { height: 10px; border-radius: 5px; background: var(--raised); overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 5px; }
.sbar i.up { background: var(--up); } .sbar i.dn { background: var(--down); }
.sbar i.w1 { width: 10%; } .sbar i.w2 { width: 20%; } .sbar i.w3 { width: 30%; } .sbar i.w4 { width: 40%; } .sbar i.w5 { width: 50%; }
.sbar i.w6 { width: 60%; } .sbar i.w7 { width: 70%; } .sbar i.w8 { width: 80%; } .sbar i.w9 { width: 90%; } .sbar i.w10 { width: 100%; }
.movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.movers h3 { margin: 0 0 6px; font-size: calc(13px * var(--fs)); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.mover { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--fs)); }
.mover:last-child { border-bottom: 0; }
.mover img { border-radius: 7px; }
.mover div { display: grid; min-width: 0; } .mover div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover > b { font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right; }
/* heat map: sector blocks, and company tiles packed on a grid, sized by class (no inline styles, for the CSP) */
.hmap { display: flex; flex-wrap: wrap; gap: 8px; }
.hsec { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hsec.g6 { flex: 30 1 440px; } .hsec.g5 { flex: 18 1 330px; } .hsec.g4 { flex: 11 1 250px; } .hsec.g3 { flex: 7 1 200px; } .hsec.g2 { flex: 4 1 170px; } .hsec.g1 { flex: 2 1 120px; }
.hname { font-size: calc(11px * var(--fs)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); grid-auto-rows: 42px; grid-auto-flow: dense; gap: 3px; }
.htile { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 5px; padding: 4px; min-width: 0; overflow: hidden; text-align: center; color: #fff; background: #3a3a40; line-height: 1.15; cursor: default; }
.htile b { font-size: calc(12.5px * var(--fs)); } .htile span { font-size: calc(11px * var(--fs)); font-variant-numeric: tabular-nums; }
.htile.s2 { grid-column: span 2; } .htile.s3 { grid-column: span 2; grid-row: span 2; }
.htile.s4 { grid-column: span 3; grid-row: span 2; } .htile.s5 { grid-column: span 3; grid-row: span 3; }
.htile.s3 b { font-size: calc(14px * var(--fs)); } .htile.s4 b { font-size: calc(16px * var(--fs)); } .htile.s5 b { font-size: calc(20px * var(--fs)); } .htile.s5 span, .htile.s4 span { font-size: calc(13px * var(--fs)); }
/* tile colours dark enough for white text (4.5:1) at every strength */
.htile.up1 { background: #2f5e49; } .htile.up2 { background: #276b4c; } .htile.up3 { background: #1a7a4e; } .htile.up4 { background: #0f7a47; }
.htile.dn1 { background: #6e3a3d; } .htile.dn2 { background: #8f3439; } .htile.dn3 { background: #a82c33; } .htile.dn4 { background: #c0272f; }
.htile.flat { background: #45454c; } .htile.na { background: var(--raised); color: var(--faint); }
.hlegend { display: flex; gap: 3px; margin-top: 10px; justify-content: flex-end; }
.hlegend .htile { padding: 2px 8px; font-size: calc(11px * var(--fs)); }
@media (max-width: 1100px) { .mstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .mstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movers { grid-template-columns: minmax(0, 1fr); }
  .hsec, .hsec.g6, .hsec.g5, .hsec.g4, .hsec.g3, .hsec.g2, .hsec.g1 { flex: 1 1 100%; }
  .htiles { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); grid-auto-rows: 38px; }
  .secbars li { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 4.4em; font-size: calc(13px * var(--fs)); }
}

/* ---------- Market: news ---------- */
.story { padding: 11px 0; border-bottom: 1px solid var(--line); }
.story:last-child { border-bottom: 0; }
.story > a { color: var(--text); text-decoration: none; }
.story > a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.story h3 { margin: 0; font-size: calc(15px * var(--fs)); line-height: 1.35; font-weight: 600; }
.story p { margin: 5px 0 0; color: var(--muted); font-size: calc(14px * var(--fs)); line-height: 1.5; }
.story.lead h3 { font-size: calc(22px * var(--fs)); line-height: 1.25; }
.story.lead p { font-size: calc(15px * var(--fs)); }
.smeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: calc(12px * var(--fs)) !important; color: var(--faint) !important; }
.pill.hot { color: var(--warn); border-color: rgb(251 191 36 / .4); }
.front-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.front-grid .story.lead { border-bottom: 0; padding-top: 2px; }
.front-list .story:first-child { padding-top: 2px; }
.news-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.news-sections .panel { margin: 0; }
.latest-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line); }
.latest-row:last-child { border-bottom: 0; } .latest-row .story { border-bottom: 0; }
@media (max-width: 980px) { .front-grid, .news-sections { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .latest-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .latest-row > .small { padding-top: 10px; } .story.lead h3 { font-size: calc(19px * var(--fs)); } }

/* ---------- Market: search bars and stock lookup ---------- */
.msearch { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; max-width: 640px; }
.msearch input[type="search"] { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: calc(15px * var(--fs)); }
.msearch input[type="search"]:focus { outline: 2px solid rgb(var(--up-rgb) / .5); outline-offset: 1px; }
mark { background: rgb(251 191 36 / .28); color: inherit; border-radius: 3px; padding: 0 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--text); text-decoration: none; font-size: calc(13px * var(--fs)); font-weight: 600; }
.chip:hover { border-color: var(--muted); }
.choices { display: grid; gap: 6px; }
.choices a { display: grid; grid-template-columns: 6em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--text); text-decoration: none; }
.choices a:hover { background: var(--raised); }
a.htile, a.mover { text-decoration: none; color: inherit; }
a.htile { color: #fff; } a.htile:hover { filter: brightness(1.15); outline: 2px solid rgb(255 255 255 / .5); outline-offset: -2px; }
a.mover:hover { background: var(--raised); }
.sh-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.sh-top img { border-radius: 12px; }
.sh-name h2 { margin: 0; font-size: calc(22px * var(--fs)); } .sh-name p { margin: 2px 0 0; }
.sh-price { text-align: right; display: grid; } .sh-price b { font-size: calc(26px * var(--fs)); font-variant-numeric: tabular-nums; } .sh-price span { font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-chart { margin-top: 14px; }
.pchart { width: 100%; height: 190px; display: block; margin-top: 10px; }
.pchart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pchart.up polyline { stroke: var(--up); } .pchart.dn polyline { stroke: var(--down); }
.pchart.up polygon { fill: rgb(var(--up-rgb) / .10); } .pchart.dn polygon { fill: rgb(var(--down-rgb) / .10); }
.pchart-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notes li { padding: 9px 12px 9px 14px; border-radius: var(--r-m); background: var(--raised); border-left: 3px solid var(--line); font-size: calc(14px * var(--fs)); line-height: 1.5; }
.notes li.up { border-left-color: var(--up); } .notes li.down { border-left-color: var(--down); } .notes li.warn { border-left-color: var(--warn); }
.perf td, .perf th { padding: 6px 8px; }
.range52 { margin: 14px 0 6px; }
.r52bar { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--down-rgb) / .6), var(--raised), rgb(var(--up-rgb) / .6)); margin: 6px 0 4px; }
.r52bar i { position: absolute; top: -4px; width: 4px; height: 14px; border-radius: 2px; background: var(--text); transform: translateX(-2px); }
.r52labels { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.earn-next { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 820px) {
  .sh-top { grid-template-columns: 40px minmax(0, 1fr); } .sh-top img { width: 40px; height: 40px; }
  .sh-price { grid-column: 1 / -1; text-align: left; } .sh-price b { font-size: calc(24px * var(--fs)); }
  .pchart { height: 150px; }
  .msearch .btn.ghost { display: none; }
}
.r52bar i.p0 { left: 0%; } .r52bar i.p5 { left: 5%; } .r52bar i.p10 { left: 10%; } .r52bar i.p15 { left: 15%; } .r52bar i.p20 { left: 20%; } .r52bar i.p25 { left: 25%; } .r52bar i.p30 { left: 30%; } .r52bar i.p35 { left: 35%; } .r52bar i.p40 { left: 40%; } .r52bar i.p45 { left: 45%; } .r52bar i.p50 { left: 50%; } .r52bar i.p55 { left: 55%; } .r52bar i.p60 { left: 60%; } .r52bar i.p65 { left: 65%; } .r52bar i.p70 { left: 70%; } .r52bar i.p75 { left: 75%; } .r52bar i.p80 { left: 80%; } .r52bar i.p85 { left: 85%; } .r52bar i.p90 { left: 90%; } .r52bar i.p95 { left: 95%; } .r52bar i.p100 { left: 100%; }

/* ---------- back links (top of sub-pages; "More" on phones for pages in the More menu) ---------- */
.backlink { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px -4px; padding: 5px 12px 5px 6px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: calc(14px * var(--fs)); font-weight: 500; border: 1px solid transparent; }
.backlink svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.backlink:hover { color: var(--text); background: var(--raised); border-color: var(--line); }
.backlink:hover svg { transform: translateX(-2px); }
.backlink:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.main > .backlink + * { margin-top: 0; }
.backlink.only-narrow { display: none; }
@media (max-width: 820px) { .backlink.only-narrow { display: inline-flex; } .backlink { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .backlink svg { transition: none; } }

/* ---------- news pictures ---------- */
.story .thumb { display: block; overflow: hidden; border-radius: var(--r-m); background: var(--raised); }
.story .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s, transform .3s; }
.story .thumb img.in { opacity: 1; }
.story:hover .thumb img.in { transform: scale(1.03); }
.story.has-big .thumb { aspect-ratio: 16 / 9; margin-bottom: 10px; }
.story.has-side { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; align-items: start; }
.story.has-side .thumb { order: 2; aspect-ratio: 16 / 10; }
.story.has-side .stext { order: 1; min-width: 0; }
.front-grid .story.lead.has-big .thumb { margin-bottom: 14px; }
@media (max-width: 820px) { .story.has-side { grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .story .thumb img { transition: none; } .story:hover .thumb img.in { transform: none; } }
.story .stext > a { color: var(--text); text-decoration: none; }
.story .stext > a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.news-sections .story.has-big .thumb { aspect-ratio: 2 / 1; }

/* ---------- the phone app: install, notifications, offline, iPhone polish ---------- */
a, button, label, select, summary { -webkit-tap-highlight-color: transparent; }
button, .btn, .seg a, .tabbar a { touch-action: manipulation; }       /* no double-tap zoom delay */
@media (max-width: 820px) {
  /* iPhones zoom into any field with text smaller than 16px; keep every field at 16px on phones */
  input, select, textarea, .msearch input[type="search"], .editfills input, .editfills select { font-size: calc(16px * var(--fs)); }
  .draw-text-input { font-size: calc(16px * var(--fs)); }
}
.app-only { display: none; }
html.is-app .app-only { display: block; }
html.is-app body { overscroll-behavior-y: none; }                     /* no rubber-band past the app's edges */
html.is-app .mobilebar { -webkit-user-select: none; user-select: none; }
.installbar { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  padding: 10px 10px 10px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); }
.installbar[hidden] { display: none; }
.installbar img { border-radius: 10px; }
.installbar div { display: grid; min-width: 0; } .installbar div b { font-size: calc(15px * var(--fs)); }
.installbar .iconbtn { width: 32px; height: 32px; display: grid; place-items: center; }
.installbar .iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.installbar .iconbtn:hover { color: var(--text); }
.appinstall .steps { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 6px; font-size: calc(14px * var(--fs)); }
.kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); text-align: center; font-size: calc(12px * var(--fs)); }
.pushbox { margin-bottom: 10px; }
.pushbox .actions { margin-top: 8px; }
.pushprefs fieldset { border: 0; padding: 0; margin: 6px 0 10px; }
.pushprefs legend { margin-bottom: 2px; }
.pushprefs .check > span { display: grid; gap: 1px; }
.offline-body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.offline-card { max-width: 380px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.offline-card h1 { margin: 6px 0 0; font-size: calc(24px * var(--fs)); }
.offline-card p { margin: 0; }

/* ---------- phones: everything you tap is at least ~40px (Apple and Google both ask for 44/48) ---------- */
@media (max-width: 820px) {
  .seg a { min-height: 40px; display: inline-flex; align-items: center; }
  .seg-custom .drp-btn, .drp-btn { min-height: 40px; }
  .backlink { min-height: 40px; }
  .mobilebar > a[aria-label="Menu"] { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
  .trash { width: 40px; height: 40px; }
  .tc-tf { padding: 9px 12px; font-size: calc(13px * var(--fs)); }
  .tc-replay { display: inline-block; padding: 9px 0; }
  .drawbar .dt { min-width: 38px; height: 38px; }
  .linkbtn { padding: 8px 4px; margin: -8px -4px; }            /* bigger tap area, same look */
  .linkbtn.danger { margin-left: 8px; }
  .panel-head a.small, a.small { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .taglist .x { width: 36px; height: 36px; }
  .gl-letters a { min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; }
  .installbar .iconbtn { width: 40px; height: 40px; }
  summary.linkbtn { display: inline-block; }
  .btn.sm, .gchip { min-height: 40px; }
  .mobilebar .quick button { min-height: 40px; min-width: 40px; }
  .insight-links a, .calsum a { display: inline-block; padding: 9px 0; }
  details > summary { padding-top: 8px; padding-bottom: 8px; }
}
.coach-self { margin-top: 16px; padding-top: 4px; border-top: 1px dashed var(--line); }
.coach-self .actions { margin-top: 8px; }

/* ---------- import: where each broker keeps its export ---------- */
.brokers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.broker { border-bottom: 1px solid var(--line); }
.broker summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: calc(14px * var(--fs)); list-style-position: inside; }
.broker p { margin: 0 0 10px; }
.note-box { padding: 9px 12px; border-radius: var(--r-m); background: var(--raised); border-left: 3px solid var(--warn); }
@media (max-width: 820px) { .brokers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- advanced stats ---------- */
.minitiles.adv-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.minitiles.adv-tiles dd { font-size: calc(19px * var(--fs)); }
.adv-tiles div[title] { cursor: help; }
.edgechart { width: 100%; height: 170px; display: block; margin-top: 8px; }
.edgechart.total { height: 120px; }
.edgechart path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke: var(--up); }
.edgechart.neg path { stroke: var(--down); }
.edgechart.total path { stroke: var(--silver); }
.edgechart .zero, .scatter .zero { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.scatter .axis { stroke: var(--line); stroke-width: 1; }
.chart-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.egrid { border-collapse: separate; border-spacing: 3px; min-width: 560px; }
.egrid th { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--muted); text-align: center; padding: 4px; white-space: nowrap; }
.egrid th span { display: block; font-weight: 400; }
.egrid th.lbl2, .egrid tr.totals th { text-align: left; color: var(--text); font-size: calc(13px * var(--fs)); max-width: 14em; white-space: normal; }
.ecell { text-align: center; padding: 7px 4px; border-radius: 6px; background: var(--raised); min-width: 64px; cursor: default; }
.ecell b { display: block; font-size: calc(13px * var(--fs)); font-variant-numeric: tabular-nums; }
.ecell span { display: block; font-size: calc(11px * var(--fs)); font-variant-numeric: tabular-nums; }
.ecell.empty { background: transparent; }
.ecell.thin { outline: 1px dashed var(--faint); outline-offset: -3px; }   /* few trades: marked, not faded */
.ecell.all { box-shadow: inset 0 0 0 1px var(--line); }
.ecell.up1 { background: rgb(var(--up-rgb) / .1); } .ecell.up2 { background: rgb(var(--up-rgb) / .17); } .ecell.up3 { background: rgb(var(--up-rgb) / .25); } .ecell.up4 { background: rgb(var(--up-rgb) / .33); }
.ecell.dn1 { background: rgb(var(--down-rgb) / .1); } .ecell.dn2 { background: rgb(var(--down-rgb) / .17); } .ecell.dn3 { background: rgb(var(--down-rgb) / .25); } .ecell.dn4 { background: rgb(var(--down-rgb) / .33); }
.egrid tr.totals .ecell { box-shadow: inset 0 -2px 0 var(--line); }
.scatter { width: 100%; height: auto; display: block; margin-top: 6px; }
.scatter circle { stroke: none; opacity: .75; }
.scatter circle.pos { fill: var(--up); } .scatter circle.neg { fill: var(--down); } .scatter circle.neu { fill: var(--faint); }
.scatter circle:hover { opacity: 1; r: 6; }
.scatter .lbl { fill: var(--faint); font-size: calc(11px * var(--fs)); }
#grid .panel-head { flex-wrap: wrap; gap: 8px; }

/* ---------- reviews and social links ---------- */
.stars { display: inline-flex; gap: 1px; color: var(--faint); font-size: calc(15px * var(--fs)); letter-spacing: 0; line-height: 1; vertical-align: -1px; }
.stars i { font-style: normal; } .stars i.on { color: var(--warn); }
.starpick { border: 0; padding: 0; margin: 0 0 14px; }
.starpick legend { font-size: calc(13px * var(--fs)); color: var(--muted); margin-bottom: 4px; }
.starrow { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.starrow input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starrow label { font-size: calc(34px * var(--fs)); line-height: 1; color: var(--line); cursor: pointer; padding: 2px 3px; transition: color .1s, transform .1s; }
.starrow label:hover, .starrow label:hover ~ label, .starrow input:checked ~ label { color: var(--warn); }
.starrow label:hover { transform: scale(1.1); }
.starrow input:focus-visible + label { outline: 2px solid var(--muted); outline-offset: 2px; border-radius: 4px; }
.reviewform .check { margin: 4px 0 10px; }
.reviewform .check > span { display: grid; gap: 1px; }
.socials { display: flex; flex-wrap: wrap; gap: 6px; }
.socials a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px 6px 9px; font-size: calc(13px * var(--fs)); font-weight: 500; }
.socials a:hover { color: var(--text); border-color: var(--faint); background: var(--raised); }
.socials svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.socials.rail-socials { gap: 4px; margin: 10px 0 0; }
.socials.rail-socials a { padding: 7px; }
.socials.rail-socials span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.socials.big a { padding: 9px 14px 9px 11px; font-size: calc(14px * var(--fs)); }
.rvsum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 16px; }
.rvavg { display: grid; justify-items: center; gap: 2px; } .rvavg b { font-size: calc(36px * var(--fs)); line-height: 1; }
.rvbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 360px; }
.rvbars li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 2em; gap: 8px; align-items: center; font-size: calc(13px * var(--fs)); }
.rvbars .track { height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.rvbars .track i { display: block; height: 100%; background: var(--warn); border-radius: 4px; }
.rvbars i.w0 { width: 0; } .rvbars i.w1 { width: 10%; } .rvbars i.w2 { width: 20%; } .rvbars i.w3 { width: 30%; } .rvbars i.w4 { width: 40%; }
.rvbars i.w5 { width: 50%; } .rvbars i.w6 { width: 60%; } .rvbars i.w7 { width: 70%; } .rvbars i.w8 { width: 80%; } .rvbars i.w9 { width: 90%; } .rvbars i.w10 { width: 100%; }
.rvlist { display: grid; gap: 10px; }
.rv { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv p { margin: 6px 0 0; }
@media (max-width: 820px) { .rvsum { grid-template-columns: minmax(0, 1fr); } .starrow label { font-size: calc(40px * var(--fs)); } }

/* ---------- community ---------- */
.ctools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.ctools .csearch { margin: 0; flex: 1; min-width: 220px; max-width: 420px; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.cfeed { display: grid; gap: 14px; min-width: 0; }
.cfeed > .panel { margin: 0; }
.cside { display: grid; gap: 14px; position: sticky; top: 18px; }
.cside .panel { margin: 0; }
.cpost { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; min-width: 0; }
.cpost.pinned { border-color: rgb(var(--up-rgb) / .35); }
.cpost.is-hidden, .ccomment.is-hidden { opacity: .6; border-style: dashed; }
.chead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cwho { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; margin-right: auto; min-width: 0; }
.cwho > span { display: grid; min-width: 0; } .cwho b { font-size: calc(14px * var(--fs)); }
.cwho.big { margin: 0 0 8px; }
.cav { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.cav.initial { display: inline-grid; place-items: center; background: var(--raised); border: 1px solid var(--line); font-weight: 600; font-size: calc(14px * var(--fs)); color: var(--silver); }
.chead .cav[width="28"], .ctop .cav { width: 28px; height: 28px; font-size: calc(12px * var(--fs)); }
.cwho.big .cav { width: 44px; height: 44px; }
.coachpill { margin-left: 6px; color: var(--up); border-color: rgb(var(--up-rgb) / .35); }
.pill.warn { color: var(--warn); border-color: rgb(251 191 36 / .4); }
.ckind { font-size: calc(12px * var(--fs)); font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--raised); color: var(--muted); }
.ckind.k-idea { color: #93c5fd; } .ckind.k-trade { color: var(--up); } .ckind.k-talk { color: var(--silver); }
.ctitle { margin: 10px 0 6px; font-size: calc(17px * var(--fs)); line-height: 1.35; }
.ctitle a { color: var(--text); text-decoration: none; } .ctitle a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 12px; margin: 6px 0 8px; border-radius: var(--r-m);
  background: var(--raised); font-size: calc(14px * var(--fs)); font-variant-numeric: tabular-nums; }
.cbox .lv { color: var(--muted); } .cbox .lv b { color: var(--text); } .cbox .lv.up b { color: var(--up); } .cbox .lv.down b { color: var(--down); }
.outcome { margin-left: auto; font-size: calc(12px * var(--fs)); font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.outcome.o-hit { color: var(--up); border-color: rgb(var(--up-rgb) / .4); } .outcome.o-stopped { color: var(--down); border-color: rgb(var(--down-rgb) / .4); }
.cbody { color: var(--silver); font-size: calc(15px * var(--fs)); line-height: 1.6; overflow-wrap: anywhere; }
.cbody.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.symlink { color: #93c5fd; text-decoration: none; font-weight: 600; } .symlink:hover { text-decoration: underline; }
.cimg { display: block; margin-top: 10px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); background: var(--raised); }
.cimg img { display: block; width: 100%; height: auto; }
.cimg.small img { max-height: 340px; object-fit: cover; object-position: top; }
.cfoot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
form.inline { display: inline; margin: 0; }
.cbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line);
  background: none; color: var(--muted); font: inherit; font-size: calc(13px * var(--fs)); text-decoration: none; cursor: pointer; }
.cbtn:hover { color: var(--text); border-color: var(--faint); }
.cbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cbtn.on { color: var(--down); border-color: rgb(var(--down-rgb) / .4); } .cbtn.on svg { fill: currentColor; }
.cbtn.more { margin-left: auto; }
.ccomment { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ccomment:last-of-type { border-bottom: 0; }
.ccomment p { margin: 6px 0 0; overflow-wrap: anywhere; }
.cact { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.creport summary { list-style: none; cursor: pointer; display: inline; } .creport summary::-webkit-details-marker { display: none; }
.creport form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.creport.post { margin: 4px 2px; }
.creport.post input { flex: 1; min-width: 180px; }
.cdelete { display: inline-block; } .cdelete summary { list-style: none; } .cdelete summary::-webkit-details-marker { display: none; }
.cdelete form { margin-left: 8px; }
.cmanage { display: grid; gap: 12px; }
.outcomeform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segbtn { padding: 6px 11px; border-radius: 7px; background: none; border: 0; color: var(--muted); font: inherit; font-size: calc(14px * var(--fs)); cursor: pointer; }
.segbtn.on { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.cquick { display: grid; gap: 6px; }
.cquick a { display: grid; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--text); text-decoration: none; }
.cquick a:hover { background: var(--raised); }
.ctop { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctop a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.ctop a > span { display: grid; }
.crules { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.cform .crow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ckinds { margin-bottom: 14px; }
.sidepick { display: inline-flex; }
.sidepick label { position: relative; cursor: pointer; }
.sidepick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sidepick span { display: inline-block; padding: 8px 16px; border-radius: 7px; color: var(--muted); font-weight: 500; }
.sidepick input:checked + span { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.sidepick .long input:checked + span { color: var(--up); } .sidepick .short input:checked + span { color: var(--down); }
.sidepick input:focus-visible + span { outline: 2px solid var(--muted); }
@media (max-width: 1100px) { .cgrid { grid-template-columns: minmax(0, 1fr); } .cside { position: static; } }
@media (max-width: 820px) { .cform .crow { grid-template-columns: minmax(0, 1fr); } .cpost { padding: 14px; } .cbtn { min-height: 40px; } .outcome { margin-left: 0; } }
:root[data-theme="light"] .symlink, :root[data-theme="light"] .ckind.k-idea { color: #1d4ed8; }
.cname { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cname .coachpill { margin-left: 0; }


/* ---------- display and accessibility (Settings → Display; classes on <html>, see web/a11y.py) ---------- */
.displayform .check > span { display: grid; gap: 1px; }
.displayform .seg-radio { margin-bottom: 10px; }
.pl-sample { margin: 0 0 10px; color: var(--muted); }
.pl-sample span { margin-left: 6px; font-weight: 600; }
summary { min-height: 24px; }
.tc-tf { min-height: 24px; }

:root.a11y-text-large { --fs: 1.12; }
:root.a11y-text-larger { --fs: 1.25; }
:root.a11y-text-larger { --rail: 252px; }

/* colour-blind friendly: blue for gains, orange for losses (safe for red-green colour blindness) */
:root.a11y-cb { --up: #60A5FA; --down: #FB923C; --up-rgb: 96 165 250; --down-rgb: 251 146 60; --down-soft: #FDBA74; }
:root.a11y-cb[data-theme="light"] { --up: #1D5FC2; --down: #B34A00; --up-rgb: 29 95 194; --down-rgb: 179 74 0; --down-soft: #9A3F00; }
@media (prefers-color-scheme: light) {
  :root.a11y-cb[data-theme="system"] { --up: #1D5FC2; --down: #B34A00; --up-rgb: 29 95 194; --down-rgb: 179 74 0; --down-soft: #9A3F00; }
}
.a11y-cb .htile.up1 { background: #2c4f7a; } .a11y-cb .htile.up2 { background: #24589c; } .a11y-cb .htile.up3 { background: #1d5fc2; } .a11y-cb .htile.up4 { background: #1a56b0; }
.a11y-cb .htile.dn1 { background: #6b4326; } .a11y-cb .htile.dn2 { background: #8a4a17; } .a11y-cb .htile.dn3 { background: #a34a0a; } .a11y-cb .htile.dn4 { background: #b34a00; }

/* ▲ ▼ on gains and losses, so a result never depends on colour alone */
.a11y-arrows :is(.num, .v, .wv, .big, .mmove, .pl-sample span).up::before,
.a11y-arrows :is(.ecell, .htile):is(.up1, .up2, .up3, .up4) > :is(b, span):first-of-type::before,
.a11y-arrows .htile:is(.up1, .up2, .up3, .up4) > span::before,
.a11y-arrows .day:is(.u1, .u2, .u3, .u4, .u5) .v::before { content: "▲\00a0"; font-size: .78em; }
.a11y-arrows :is(.num, .v, .wv, .big, .mmove, .pl-sample span).down::before,
.a11y-arrows :is(.ecell, .htile):is(.dn1, .dn2, .dn3, .dn4) > :is(b, span):first-of-type::before,
.a11y-arrows .htile:is(.dn1, .dn2, .dn3, .dn4) > span::before,
.a11y-arrows .day:is(.d1, .d2, .d3, .d4, .d5) .v::before { content: "▼\00a0"; font-size: .78em; }
.a11y-arrows .htile > b::before { content: none !important; }

/* high contrast: brighter text and borders */
:root.a11y-contrast { --text: #FFFFFF; --muted: #E4E4E7; --faint: #C4C4CC; --line: #5A5A63; --silver: #F4F4F5; --raised: #202024; }
:root.a11y-contrast[data-theme="light"] { --text: #000000; --muted: #26262B; --faint: #3B3B42; --line: #8A8A93; --silver: #111113; --raised: #ECECF0; }
@media (prefers-color-scheme: light) {
  :root.a11y-contrast[data-theme="system"] { --text: #000000; --muted: #26262B; --faint: #3B3B42; --line: #8A8A93; --silver: #111113; --raised: #ECECF0; }
}
.a11y-contrast .panel, .a11y-contrast .btn, .a11y-contrast input, .a11y-contrast select, .a11y-contrast textarea { border-width: 1.5px; }

/* calm: no animation or movement */
.a11y-calm *, .a11y-calm *::before, .a11y-calm *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* bold focus: a thick ring that can't be missed */
.a11y-focus :focus-visible, .a11y-focus .choice input:focus-visible + label, .a11y-focus .seg-radio input:focus-visible + span,
.a11y-focus input:focus-visible, .a11y-focus select:focus-visible, .a11y-focus textarea:focus-visible {
  outline: 3px solid #FACC15 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgb(0 0 0 / .85) !important;
}

/* underline every link */
.a11y-underline a:not(.btn):not(.nav a):not(.lockup):not(.chip):not(.cbtn) { text-decoration: underline; text-decoration-color: currentColor; }
.lp-stop { stop-color: var(--up); } .lp-curve .ln { stroke: var(--up); }
/* big numbers shrink to fit their tile instead of being cut off (long totals, larger text) */
.tile { container-type: inline-size; }
.tile .v { font-size: min(calc(28px * var(--fs)), 11.5cqi); }
/* small text links get a little more room to tap (padding on inline links doesn't move the layout) */
a.small, .lp-nav a, .lp-foot a, .legal-links a, .panel-head > a, .insight a { padding-block: 3px; }
summary.linkbtn { display: inline-flex; align-items: center; }

/* ---------- Learn: levels, badges, For you, practice drills, track tests, calculators, videos, coach pages ---------- */
.learn-mid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.learn-mid .panel { margin: 0; }
.foryou-list { list-style: none; margin: 0; padding: 0; }
.foryou-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.foryou-list li:first-child { border-top: 0; padding-top: 0; }
.fy-lesson { display: flex; flex-direction: column; gap: 1px; text-decoration: none; }
.fy-lesson b { font-size: calc(15px * var(--fs)); }
.fy-lesson:hover b { text-decoration: underline; text-decoration-color: var(--faint); }
.fy-why { margin: 4px 0 0; }
.drillcards { display: grid; gap: 10px; margin-bottom: 12px; }
.drillcards.big { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.drillcard { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--raised); text-decoration: none; }
.drillcards.big .drillcard { padding: 18px; background: var(--panel); }
.drillcard:hover { border-color: var(--faint); }
.drillcard b { font-size: calc(15px * var(--fs)); }
.learn-level { margin-top: 26px; }
.learn-level[hidden] { display: none; }
.ll-head { margin-bottom: 12px; }
.ll-head h2 { font-size: calc(22px * var(--fs)); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ll-head p { margin: 4px 0 6px; }
.ll-head .tbar { max-width: 420px; }
.learn-level.current .ll-head h2::before { content: ""; width: 4px; height: 1.1em; border-radius: 4px; background: var(--up); }
.lt-name { display: flex; align-items: center; gap: 8px; font-size: calc(17px * var(--fs)); }
.lt-test { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.lbadges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lbadge { display: inline-flex; flex: none; }
.lbadge .lb-ribbon { fill: rgb(var(--up-rgb) / .55); }
.lbadge .lb-disc { fill: var(--up); stroke: rgb(var(--up-rgb) / .4); stroke-width: 3; }
.lbadge .lb-check { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lbadge.locked .lb-ribbon { fill: var(--line); } .lbadge.locked .lb-disc { fill: var(--raised); stroke: var(--line); } .lbadge.locked .lb-check { stroke: var(--faint); }
.b-liquidity .lb-disc { fill: #60A5FA; } .b-pro .lb-disc { fill: #A78BFA; } .b-mind .lb-disc { fill: #F472B6; } .b-risk .lb-disc { fill: #FBBF24; }
.lbadge.locked.b-liquidity .lb-disc, .lbadge.locked.b-pro .lb-disc, .lbadge.locked.b-mind .lb-disc, .lbadge.locked.b-risk .lb-disc { fill: var(--raised); }
@media (max-width: 980px) { .learn-mid { grid-template-columns: minmax(0, 1fr); } }

.drill { max-width: 760px; }
.drill-q { font-size: calc(16px * var(--fs)); }
.drillchart { width: 100%; height: auto; display: block; margin: 6px 0 14px; background: var(--ink); border-radius: var(--r-m); border: 1px solid var(--line); }
.dc-grid { stroke: var(--line); stroke-width: 1; }
.dc-tick { fill: var(--muted); font-size: 11px; }
.dc-level { stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 6 5; }
.dc-split { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 4; }
.dc-bar line { stroke: var(--muted); stroke-width: 1.2; }
.dc-bar.up rect:not(.dc-mark) { fill: var(--up); } .dc-bar.down rect:not(.dc-mark) { fill: var(--down); }
.dc-mark { fill: rgb(var(--silver-rgb) / .12); stroke: var(--warn); stroke-width: 1.5; }
.drill .future { visibility: hidden; }
.drill.revealed .future { visibility: visible; animation: ws-fade .5s ease both; }
.drill-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.drill-result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dr-verdict { font-size: calc(18px * var(--fs)); font-weight: 600; margin-bottom: 6px; }

.testform fieldset.qz { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 14px 0; min-width: 0; }
.testform legend.qz-q { padding: 0; margin-bottom: 4px; }

.qz-radio { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--raised);
  color: var(--text); font-size: calc(15px * var(--fs)); font-weight: 400; cursor: pointer; }
.qz-radio input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--silver); }
.qz-radio:has(input:checked) { border-color: var(--silver); }
.testresult { margin: 14px 0; }
.testresult.pass { border-color: rgb(var(--up-rgb) / .55); } .testresult.fail { border-color: rgb(245 180 81 / .5); }
.tr-score { font-size: calc(24px * var(--fs)); margin-bottom: 6px; }

.ltool { margin: 24px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel); }
.ltool h2 { font-size: calc(17px * var(--fs)); margin-bottom: 12px; }
.ltool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.ltool-out { margin: 4px 0 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--raised); }
.ltool-out b { font-size: calc(18px * var(--fs)); }
.lvideo { margin: 18px 0; }
.lvideo-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: #000; border: 1px solid var(--line); }
.lvideo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lvideo video { width: 100%; border-radius: var(--r-m); background: #000; }
.lvideo figcaption { margin-top: 6px; font-size: calc(13px * var(--fs)); color: var(--muted); }

.mtable td, .mtable th { vertical-align: top; }
.leditform textarea.mono, textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: calc(13px * var(--fs)); line-height: 1.5; }
.ledit-more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ledit-help pre { background: var(--raised); padding: 10px 12px; border-radius: var(--r-s); overflow-x: auto; font-size: calc(12.5px * var(--fs)); }
.ledit-help p { margin-bottom: 8px; }
.lpreview { max-height: 80vh; overflow: auto; }
ul.plain { list-style: none; margin: 4px 0 14px; padding: 0; } ul.plain li { padding: 3px 0; }
.dg-pool.buy { fill: rgb(var(--up-rgb) / .12); stroke: rgb(var(--up-rgb) / .45); stroke-dasharray: 4 3; }
.dg-pool.sell { fill: rgb(var(--down-rgb) / .12); stroke: rgb(var(--down-rgb) / .45); stroke-dasharray: 4 3; }
.dg-vol { fill: rgb(var(--silver-rgb) / .35); } .dg-vol.poc { fill: var(--warn); }
.dg-va { fill: rgb(var(--up-rgb) / .08); }
.ledit-help code { overflow-wrap: anywhere; }
/* Learn: track cards on the Learn page, each opening its own page */
.trackcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.trackcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--panel); text-decoration: none; }
.trackcard:hover { border-color: var(--faint); }
.trackcard.finished { border-color: rgb(var(--up-rgb) / .45); }
.tc-top { display: flex; align-items: center; justify-content: space-between; }
.tc-name { font-size: calc(17px * var(--fs)); }
.trackcard .tbar { margin-top: auto; }
.tc-foot { margin-top: 2px; }
.learn-results[hidden], [data-learn-browse][hidden], .learn-results [hidden] { display: none; }
.trackhead .crumb { margin: 0 0 4px; }
.trackprog { margin-bottom: 16px; } .trackprog .tbar { margin-top: 4px; }
.lessonlist.big a { padding: 13px 0; } .lessonlist.big .ll-text b { font-size: calc(16px * var(--fs)); }
.tracknav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.crumb a { color: inherit; }
.chartex .drillchart { margin: 0 0 6px; }
.dc-ltext { fill: var(--warn); font-size: 11px; font-weight: 600; }
.dc-note { fill: var(--text); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--ink); stroke-width: 3px; }
.dc-note.up { fill: var(--up); } .dc-note.dn { fill: var(--down); }
.dg-huge { fill: var(--text); font-size: calc(44px * var(--fs)); font-weight: 600; }
.dg-floor { fill: var(--down); }

/* email confirmation bar, and the admin's reset-link tool */
.syswarn.confirmbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form input[type=email] { flex: 1 1 220px; min-width: 0; }
.resetlink { width: 100%; font-size: calc(13px * var(--fs)); }