:root {
  --bg: #070E18; --pane: #0A1422; --foam: #ECE9E2; --mist: #A3AEBF; --line: rgba(236, 233, 226, .1); --grid: rgba(236, 233, 226, .055);
  --gold: #C9A961; --gold-mark: #C9A961; --gold-soft: rgba(201, 169, 97, .12); --gold-ring: rgba(201, 169, 97, .22);
  --pos: #14B28E; --neg: #F23645; --warn: #E8A33D; --blue: #5480CC; --purple: #A383E0;
  --ichi-kj: #B0BEC5; --s-asia: #E67E22; --s-lon: #16A085; --s-ny: #2196F3; --v-week: #9B59B6; --v-month: #E74C3C;
  --pos-soft: rgba(20, 178, 142, .13); --neg-soft: rgba(242, 54, 69, .12); --warn-soft: rgba(232, 163, 61, .12);
  --pos-faint: rgba(20, 178, 142, .5); --neg-faint: rgba(242, 54, 69, .5);
  --menu: rgba(7, 14, 24, .14); --menu-sh: inset 0 .5px 0 var(--edge-t), inset 0 -.5px 0 var(--edge-b), 0 12px 32px var(--shadow);
  --glass-pop: rgba(7, 14, 24, .14); --gate-dim: rgba(4, 8, 14, .45); --chrome: rgba(7, 14, 24, .14); --chrome-sh: 0 6px 18px var(--shadow);
  --glass: rgba(7, 14, 24, .14); --inner: rgba(236, 233, 226, .035); --inner-2: rgba(236, 233, 226, .06);
  --rim-hi: rgba(255, 255, 255, .42); --rim-in: rgba(201, 169, 97, .32); --rim-lo: rgba(255, 255, 255, .04); --rim-ac: rgba(201, 169, 97, .42);
  --lit-a: rgba(255, 238, 200, .95); --lit-b: rgba(201, 169, 97, .6); --lit-fill: rgba(201, 169, 97, .07);
  --edge-t: rgba(255, 255, 255, .5); --edge-b: rgba(255, 255, 255, .14); --shadow: rgba(0, 0, 0, .32);
  --orb1: rgba(201, 169, 97, .15); --orb2: rgba(78, 106, 148, .14); --orb3: rgba(201, 169, 97, .1);
  --ct-warm: rgba(201, 169, 97, .42); --ct-cool: rgba(122, 158, 214, .3);
  --tip-bg: #0A1422; --on-gold: #070E18;
  --fg: var(--foam); --mut: var(--mist); --panel: var(--pane);
  --f-sans: 'Bai Jamjuree', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #F4F1EA; --pane: #FBFAF6; --foam: #141B27; --mist: #4C5666; --line: rgba(7, 14, 24, .12); --grid: rgba(7, 14, 24, .06);
  --gold: #85651F; --gold-mark: #B38B35; --gold-soft: rgba(201, 169, 97, .14); --gold-ring: rgba(201, 169, 97, .22);
  --pos: #067A66; --neg: #CC2A3A; --warn: #9C5B00; --blue: #3E6FB8; --purple: #7A58A8;
  --ichi-kj: #66727F; --s-asia: #B9600F; --s-lon: #0E7F69; --s-ny: #1A6FC4; --v-week: #8343A3; --v-month: #C8392B;
  --pos-soft: rgba(6, 122, 102, .1); --neg-soft: rgba(204, 42, 58, .09); --warn-soft: rgba(156, 91, 0, .1);
  --pos-faint: rgba(6, 122, 102, .45); --neg-faint: rgba(204, 42, 58, .45);
  --menu: rgba(244, 241, 234, .1); --menu-sh: inset 0 .5px 0 rgba(255, 255, 255, .5), 0 10px 30px rgba(7, 14, 24, .025);
  --glass-pop: rgba(244, 241, 234, .10); --gate-dim: rgba(244, 241, 234, .55); --chrome: rgba(244, 241, 234, .1); --chrome-sh: inset 0 .5px 0 rgba(255, 255, 255, .5), 0 6px 18px rgba(7, 14, 24, .03);
  --glass: rgba(244, 241, 234, .1); --inner: rgba(7, 14, 24, .03); --inner-2: rgba(7, 14, 24, .055);
  --rim-hi: rgba(7, 14, 24, .3); --rim-in: rgba(201, 169, 97, .45); --rim-lo: rgba(7, 14, 24, .05); --rim-ac: rgba(201, 169, 97, .5);
  --lit-a: rgba(140, 104, 28, .9); --lit-b: rgba(201, 169, 97, .5); --lit-fill: rgba(255, 255, 255, .5);
  --edge-t: rgba(255, 255, 255, .8); --edge-b: rgba(7, 14, 24, .06); --shadow: rgba(7, 14, 24, .08);
  --orb1: rgba(201, 169, 97, .22); --orb2: rgba(122, 158, 214, .16); --orb3: rgba(201, 169, 97, .12);
  --ct-warm: rgba(201, 169, 97, .5); --ct-cool: rgba(122, 158, 214, .35);
  --tip-bg: #FFFFFF; --on-gold: #070E18; --gfill-bg: #85651F; --gfill-fg: #FBFAF6; --gfill-hov: #6E5318; color-scheme: light; } }
:root[data-theme="light"] {
  --bg: #F4F1EA; --pane: #FBFAF6; --foam: #141B27; --mist: #4C5666; --line: rgba(7, 14, 24, .12); --grid: rgba(7, 14, 24, .06);
  --gold: #85651F; --gold-mark: #B38B35; --gold-soft: rgba(201, 169, 97, .14); --gold-ring: rgba(201, 169, 97, .22);
  --pos: #067A66; --neg: #CC2A3A; --warn: #9C5B00; --blue: #3E6FB8; --purple: #7A58A8;
  --ichi-kj: #66727F; --s-asia: #B9600F; --s-lon: #0E7F69; --s-ny: #1A6FC4; --v-week: #8343A3; --v-month: #C8392B;
  --pos-soft: rgba(6, 122, 102, .1); --neg-soft: rgba(204, 42, 58, .09); --warn-soft: rgba(156, 91, 0, .1);
  --pos-faint: rgba(6, 122, 102, .45); --neg-faint: rgba(204, 42, 58, .45);
  --menu: rgba(244, 241, 234, .1); --menu-sh: inset 0 .5px 0 rgba(255, 255, 255, .5), 0 10px 30px rgba(7, 14, 24, .025);
  --glass-pop: rgba(244, 241, 234, .10); --gate-dim: rgba(244, 241, 234, .55); --chrome: rgba(244, 241, 234, .1); --chrome-sh: inset 0 .5px 0 rgba(255, 255, 255, .5), 0 6px 18px rgba(7, 14, 24, .03);
  --glass: rgba(244, 241, 234, .1); --inner: rgba(7, 14, 24, .03); --inner-2: rgba(7, 14, 24, .055);
  --rim-hi: rgba(7, 14, 24, .3); --rim-in: rgba(201, 169, 97, .45); --rim-lo: rgba(7, 14, 24, .05); --rim-ac: rgba(201, 169, 97, .5);
  --lit-a: rgba(140, 104, 28, .9); --lit-b: rgba(201, 169, 97, .5); --lit-fill: rgba(255, 255, 255, .5);
  --edge-t: rgba(255, 255, 255, .8); --edge-b: rgba(7, 14, 24, .06); --shadow: rgba(7, 14, 24, .08);
  --orb1: rgba(201, 169, 97, .22); --orb2: rgba(122, 158, 214, .16); --orb3: rgba(201, 169, 97, .12);
  --ct-warm: rgba(201, 169, 97, .5); --ct-cool: rgba(122, 158, 214, .35);
  --tip-bg: #FFFFFF; --on-gold: #070E18; --gfill-bg: #85651F; --gfill-fg: #FBFAF6; --gfill-hov: #6E5318; color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--foam); font: 15px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; }
.num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.small { font-size: .875rem; } .big { font-size: 1.375rem; } .r { margin-left: auto; text-align: right; }
.mut { color: var(--mist); } .pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); } .gold { color: var(--gold); } .neu { color: var(--foam); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: -.005em; }
h2 { font-size: 1.25rem; } h3 { font-size: 1rem; }
.note { color: var(--mist); font-size: .875rem; margin: 0; }
button, select, input { font: inherit; color: inherit; }

/* ---------- the field behind everything ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg span { position: absolute; display: block; border-radius: 50%; filter: blur(10px); will-change: transform; }
.bg .b1 { top: -22%; left: 12%; width: 68vmax; height: 68vmax; background: radial-gradient(closest-side, var(--orb1), transparent 70%); transform: translate3d(calc(var(--bgp, 0) * 8vw), calc(var(--bgp, 0) * -26vh), 0); animation: drift1 26s ease-in-out infinite alternate; }
.bg .b2 { top: 34%; right: -18%; width: 58vmax; height: 58vmax; background: radial-gradient(closest-side, var(--orb2), transparent 70%); transform: translate3d(calc(var(--bgp, 0) * -12vw), calc(var(--bgp, 0) * -40vh), 0); animation: drift2 32s ease-in-out infinite alternate; }
.bg .b3 { bottom: -26%; left: -12%; width: 62vmax; height: 62vmax; background: radial-gradient(closest-side, var(--orb3), transparent 70%); transform: translate3d(calc(var(--bgp, 0) * 14vw), calc(var(--bgp, 0) * -30vh), 0); animation: drift1 38s ease-in-out infinite alternate-reverse; }
.bg .contours { position: absolute; inset: -6% -4%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.bg .contours { container-type: size; }
/* each line is its own svg so the browser can move it on the GPU (an animated path inside one svg redrew the page every frame);
   1 unit of the 1400 × 900 drawing = 1cqw/14 across and 1cqh/9 down, so the lines move exactly as far as before at any size */
.bg .contours svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; --ux: calc(1cqw / 14); --uy: calc(1cqh / 9);
  animation: wave var(--d, 20s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s);
  translate: calc(var(--sp, 0) * var(--px, 0) * var(--ux)) calc(var(--sp, 0) * var(--py, 0) * var(--uy)); }
.bg .contours path { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.bg .contours .warm path { stroke: var(--ct-warm); } .bg .contours .cool path { stroke: var(--ct-cool); }
@keyframes wave { from { transform: translate3d(calc(var(--ax, 18) * -1 * var(--ux)), calc(var(--ay, 26) * var(--uy)), 0); } to { transform: translate3d(calc(var(--ax, 18) * var(--ux)), calc(var(--ay, 26) * -1 * var(--uy)), 0); } }
@keyframes drift1 { to { translate: 5vw 4vh; } }
@keyframes drift2 { to { translate: -6vw -5vh; } }

/* ---------- glass: clear body, 3px blur, a gradient hairline that turns with scroll and pointer ---------- */
.glass { position: relative; isolation: isolate; background-color: var(--glass); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 0 .5px 0 var(--edge-t), inset 0 -.5px 0 var(--edge-b), 0 12px 34px var(--shadow); border-radius: 16px; }
.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(calc(145deg + var(--rimA, 0) * 70deg + var(--rimT, 0) * 1deg), var(--rim-hi), var(--rim-in) 24%, var(--rim-lo) 44%, transparent 56%, var(--rim-ac) 78%, var(--rim-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
@media (hover: hover) and (pointer: fine) {
  .glass:not(.rail)::after { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), var(--lit-a), var(--lit-b) 32%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease; }
  .glass.is-lit::after { opacity: 1; }
  .glass.is-lit { background-image: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), var(--lit-fill), transparent 65%); }
  .lift { transition: transform .2s ease, box-shadow .2s ease; }
}
/* the side rail gets the same rim light; at 641–960px its ::after is the top bar's line break, so the rim is left off there */
@media (hover: hover) and (pointer: fine) and (min-width: 961px), (hover: hover) and (pointer: fine) and (max-width: 640px) {
  .glass.rail::after { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), var(--lit-a), var(--lit-b) 32%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity .35s ease; }
  .glass.rail.is-lit::after { opacity: 1; }
  .lift:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--gold-mark), 0 18px 40px var(--shadow); }
}

/* ---------- frame ---------- */
.ae { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
.rail { position: sticky; top: 12px; z-index: 20; height: calc(100dvh - 24px); margin: 12px 0 12px 12px; padding: 20px 14px 16px; border-radius: 22px;
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto; scrollbar-width: none; --rim-in: rgba(201, 169, 97, .5); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--foam); text-decoration: none; padding: 0 4px; }
.brand .mark { color: var(--gold-mark); flex: none; }
.brand b { display: block; font-size: 1rem; line-height: 1.15; }
.brand .ver { margin-left: 7px; padding: 1px 6px; border-radius: 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--mist); box-shadow: inset 0 0 0 1px var(--line); vertical-align: 2px; font-variant-numeric: tabular-nums; }
.brand small { display: block; color: var(--gold); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rgroup { display: grid; gap: 8px; }
.rgroup-nav { gap: 6px; }
.rlabel { margin: 0; padding: 0 4px; color: var(--mist); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.rlabel-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rlabel-row .upd { font-size: .8125rem; }
.rrow { display: flex; align-items: center; gap: 8px; }
.usage { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 0 4px; font-size: .75rem; color: var(--mist); }
.usage .warn { color: var(--warn); font-weight: 600; }
.linkbtn { margin-left: auto; padding: 0; border: 0; background: none; color: var(--mist); font-size: .75rem; text-decoration: underline; text-decoration-color: var(--gold-mark); text-underline-offset: 2px; cursor: pointer; }
.linkbtn:hover { color: var(--foam); }
.rrow .grow { flex: 1; min-width: 0; }
.sel.sym { width: 100%; font-weight: 600; letter-spacing: .02em; }
.rbtn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: var(--gfill-bg, var(--gold-mark)); color: var(--gfill-fg, var(--on-gold)); transition: transform .25s, box-shadow .25s, background-color .25s; }
.rbtn:hover { background: var(--gfill-hov, #D7BB7A); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(201, 169, 97, .35); }
.rbtn:disabled { cursor: progress; opacity: .75; transform: none; box-shadow: none; }
.is-busy .rbtn svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.theme-sw.grow { display: flex; } .theme-sw.grow .theme-opt { flex: 1; width: auto; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 11px; color: var(--mist); text-decoration: none; font-size: .9375rem; transition: color .2s, background-color .2s; }
.rail-nav a svg { flex: none; }
.rail-nav a:hover { color: var(--foam); background: var(--inner); }
.rail-nav a[aria-current="true"] { color: var(--foam); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.rail-nav a[aria-current="true"] svg { color: var(--gold); }
.rail-foot { margin-top: auto; display: grid; gap: 14px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--line); }
.brand { padding-bottom: 14px; box-shadow: inset 0 -1px 0 var(--line); }
.row2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upd { display: flex; align-items: center; gap: 7px; color: var(--mist); }
.live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex: none; }
/* the ping ring scales and fades on its own layer (box-shadow animation repainted the page every frame); a copy of the dot on top hides the ring inside the dot */
.live::before, .live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.live::before { background: var(--pos-faint); opacity: 0; animation: ping 2.4s ease-out infinite; }
.live::after { background: inherit; }
.is-busy .live { background: var(--gold-mark); }
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3); opacity: 0; } }
.desk { min-width: 0; padding: 28px clamp(16px, 3vw, 36px) 40px; max-width: 1400px; width: 100%; container: desk / inline-size; }
.main-body { display: grid; gap: 34px; }
#app:not(.ready) .main-body { display: none; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; font-size: .9375rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn.sm { min-height: 32px; padding: 0 14px; font-size: .875rem; }
.btn-gold { background: var(--gfill-bg, var(--gold-mark)); color: var(--gfill-fg, var(--on-gold)); transition: background .25s, transform .25s, box-shadow .25s; }
.btn-gold:hover { background: var(--gfill-hov, #D7BB7A); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(201, 169, 97, .35); }
.btn-gold:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.btn-ghost { position: relative; color: var(--foam); background: var(--glass); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px var(--shadow); transition: box-shadow .25s, transform .25s, background-color .25s; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--gold-mark), 0 10px 24px var(--shadow); transform: translateY(-1px); }
.btn-ghost[aria-pressed="true"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.sel, .inp { min-height: 38px; padding: 0 12px; border-radius: 12px; background: var(--inner); border: 0; box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; transition: box-shadow .2s; }
.sel { padding-right: 30px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.sel option { background: var(--pane); color: var(--foam); }
.sel.sm { min-height: 32px; font-size: .875rem; }
.sel:hover, .inp:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.sel:focus-visible, .inp:focus-visible, .btn:focus-visible, button:focus-visible, a:focus-visible, [data-tip]:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.inp.grow { flex: 1 1 180px; min-width: 0; }
.theme-sw, .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); }
.theme-opt, .seg button { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--mist); cursor: pointer;
  font-size: .875rem; font-weight: 600; transition: color .2s, background-color .2s, box-shadow .2s; }
.theme-opt { padding: 0; width: 30px; }
.theme-opt:hover, .seg button:hover { color: var(--foam); }
.theme-opt[aria-checked="true"], .seg button[aria-pressed="true"] { color: var(--foam); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.tog { display: inline-flex; align-items: center; gap: 9px; color: var(--mist); cursor: pointer; }
.tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tg { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--inner-2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, box-shadow .2s; flex: none; }
.tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--mist); transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.tog input:checked + .tg { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.tog input:checked + .tg::after { transform: translateX(14px); background: var(--gold-mark); }
.tog input:focus-visible + .tg { box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.tog:hover .tg { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; font-weight: 500; padding: 3px 10px; border-radius: 999px; color: var(--mist); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.c-pos { color: var(--pos); background: var(--pos-soft); box-shadow: none; }
.c-neg { color: var(--neg); background: var(--neg-soft); box-shadow: none; }
.c-warn { color: var(--warn); background: var(--warn-soft); box-shadow: none; }
.c-mut { color: var(--mist); }
.c-gold { color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.tag { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; line-height: 1.7; padding: 0 6px; border-radius: 5px; background: var(--gold-soft); color: var(--gold); vertical-align: 1px; }

/* ---------- head ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 24px; }
.eyebrow { margin: 0; color: var(--gold); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.px { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.px b { font-size: clamp(2.25rem, 4.4vw, 3.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; transition: color .6s ease; }
.px b.flash-up { color: var(--pos); transition: none; } .px b.flash-dn { color: var(--neg); transition: none; }
.chg { font-size: 1rem; font-weight: 600; }
.lead { margin: 6px 0 0; color: var(--mist); font-size: .9375rem; }
.head-r { display: flex; align-items: center; gap: 14px; }
.hv { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; text-decoration: none; color: var(--foam); }
.hv .ring-mini { width: 44px; height: 44px; }
.hv b { display: block; font-size: 1rem; line-height: 1.2; } .hv small { color: var(--mist); font-size: .8125rem; }
.banner { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; box-shadow: inset 0 0 0 1px var(--warn), 0 12px 34px var(--shadow); }
.loader { display: flex; gap: 16px; align-items: center; padding: 40px 4px; }
.pulse { display: flex; gap: 5px; align-items: flex-end; height: 26px; }
.pulse span { width: 5px; border-radius: 3px; background: var(--gold-mark); animation: eq 1s ease-in-out infinite; }
.pulse span:nth-child(2) { animation-delay: -.33s; } .pulse span:nth-child(3) { animation-delay: -.66s; }
@keyframes eq { 0%, 100% { height: 8px; } 50% { height: 26px; } }

/* ---------- sections and cards ---------- */
.sec { min-width: 0; display: grid; gap: 14px; scroll-margin-top: 20px; }
.sh { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.sh .note { flex-basis: 100%; }
.ctl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; max-width: 100%; min-width: 0; }
.ctl-row .sel { min-width: 0; max-width: 100%; flex: 1 1 auto; }
.card { padding: 18px 20px; min-width: 0; }
.cb-h { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.cb-h .note { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; padding: 14px 16px 12px; border-radius: 14px; min-width: 0; cursor: default; outline: none; }
.tl { color: var(--mist); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv { margin-top: 4px; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.tv small { font-size: .875rem; font-weight: 500; color: var(--mist); }
.tile.wide .tv { font-size: 1.0625rem; line-height: 1.35; }
.spark { display: block; width: 100%; height: 30px; margin-top: auto; padding-top: 8px; overflow: visible; }
.spark polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark path { stroke: none; opacity: .14; }
/* verdict */
.verdict { padding: 20px 22px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 28px; align-items: start; }
.vring { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ring { position: relative; width: 180px; aspect-ratio: 1; }
.ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ring .trk { fill: none; stroke: var(--inner-2); stroke-width: 12; }
.ring .seg-s { fill: none; stroke-width: 12; stroke-linecap: butt; transition: stroke-dasharray .8s cubic-bezier(.2, .7, .2, 1), stroke-width .18s; }
.ring .seg-s:hover { stroke-width: 15; }
.ring .needle { stroke: var(--foam); stroke-width: 2; stroke-linecap: round; transition: transform .8s cubic-bezier(.2, .7, .2, 1); transform-origin: 50px 50px; }
.ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ring-c b { font-size: 2.1rem; font-weight: 600; line-height: 1; }
.ring-c small { color: var(--mist); font-size: .8125rem; margin-top: 4px; }
.vlabel { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.vring .note { max-width: 24ch; }
.vmeter { display: grid; gap: 6px; margin-bottom: 6px; }
.vml { display: flex; justify-content: space-between; font-weight: 600; font-size: .9375rem; }
.vbar { position: relative; height: 8px; border-radius: 6px; overflow: hidden; background: var(--neg); }
.vbar span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 50) * 1%); background: var(--pos); border-radius: 6px 0 0 6px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.ftable { display: grid; }
.frow { display: grid; grid-template-columns: minmax(150px, 1.05fr) minmax(0, 2fr) 120px; gap: 14px; align-items: center; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; font-size: .9375rem; outline: none; transition: background-color .18s; }
.frow + .frow { box-shadow: inset 0 1px 0 var(--line); }
.frow:hover, .frow:focus-visible, .frow.is-hot { background: var(--gold-soft); box-shadow: none; }
.frow:hover + .frow, .frow.is-hot + .frow { box-shadow: none; }
.fn { font-weight: 600; } .fn .mut { font-weight: 500; font-size: .8125rem; } .fi { color: var(--mist); min-width: 0; }
.fbar { position: relative; height: 8px; background: var(--inner-2); border-radius: 5px; }
.fbar .mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--mist); opacity: .6; }
.fbar .fill { position: absolute; top: 0; bottom: 0; width: calc(var(--p, 0) * 1%); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.fbar .fill.r { left: 50%; border-radius: 0 5px 5px 0; } .fbar .fill.l { right: 50%; border-radius: 5px 0 0 5px; }
.fbar .fill.pos { background: var(--pos); } .fbar .fill.neg { background: var(--neg); }

.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-weight: 500; color: var(--mist); padding: 7px 9px; box-shadow: inset 0 -1px 0 var(--line); white-space: nowrap; }
.tbl td { padding: 7px 9px; box-shadow: inset 0 -1px 0 var(--grid); white-space: nowrap; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: var(--gold-soft); }
.tbl td.r { text-align: right; }
.icon-btn { background: none; border: 0; box-shadow: inset 0 0 0 1px var(--line); color: var(--mist); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; transition: color .2s, box-shadow .2s; }
/* svg charts (admin analytics recipe) */
.svgc { position: relative; min-height: 230px; }
.svgc svg { display: block; width: 100%; overflow: visible; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-zero { stroke: var(--mist); stroke-width: 1; opacity: .7; }
.c-axis { fill: var(--mist); font-size: 12px; font-variant-numeric: tabular-nums; }
.c-axis.b { fill: var(--foam); font-weight: 600; font-size: 12px; }
.c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-area { opacity: .16; }
.c-dot { stroke: var(--bg); stroke-width: 2; }
.c-cross { stroke: var(--mist); stroke-width: 1; opacity: .6; }
.c-hit { fill: transparent; cursor: crosshair; outline: none; }
.c-hit.is-on, .c-hit:focus-visible { fill: var(--inner-2); }
.c-bar { transition: opacity .15s; }
svg.is-hovering .c-bar:not(.is-hot) { opacity: .4; }
.c-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.foot { display: flex; gap: 12px; align-items: flex-start; color: var(--mist); font-size: .8125rem; margin-top: 36px; padding: 22px 0 90px; border-top: 1px solid var(--line); }
.foot .mark { color: var(--gold-mark); flex: none; margin-top: 1px; }
.foot-t { flex: 1 1 auto; min-width: 0; display: grid; justify-items: start; gap: 10px; line-height: 1.6; text-wrap: pretty; }

/* tooltip (admin recipe) */
.tip { position: fixed; z-index: 80; min-width: 150px; max-width: 320px; padding: 9px 12px; border-radius: 10px; pointer-events: none; background: var(--tip-bg); color: var(--foam);
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px var(--shadow); font-size: .875rem; animation: tipin .14s ease-out; }
.tip p { margin: 0; display: flex; align-items: center; gap: 8px; }
.tip .tip-h { margin-bottom: 4px; color: var(--mist); }
.tip i { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.tip b { font-variant-numeric: tabular-nums; }
.tip span { color: var(--mist); }
.tip .kv { justify-content: space-between; gap: 18px; }
.tip .tip-n { display: block; margin: 1px 0 6px; font-size: .8125rem; line-height: 1.4; color: var(--mist); opacity: .85; }
.tip:has(.tip-n) { max-width: 340px; }
/* explained tips: the name + value line is the heading, the note under it is the explanation */
.tip.tip-ex { padding: 10px 13px 8px; }
.tip.tip-ex .tip-h { color: var(--foam); font-weight: 600; font-size: .875rem; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.tip.tip-ex .kv { padding-top: 7px; }
.tip.tip-ex .tip-n + .kv { margin-top: 7px; border-top: 1px solid var(--line); }
.tip.tip-ex .kv span { color: var(--foam); font-weight: 600; }
.tip.tip-ex .tip-n { margin: 3px 0 0; padding: 0 0 0 9px; border-left: 2px solid var(--gold-mark); font-size: .72rem; color: var(--mist); opacity: 1; }
@keyframes tipin { from { opacity: 0; transform: translateY(3px); } }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--foam); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-size: .9375rem; z-index: 90; }
/* ---------- motion: boxes rise as they come into view, bars grow, lines draw (played once per box, never on refresh) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv.play { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n, 0) * 55ms); }
  .play .chk, .play .frow, .play .ir, .play .lv, .play .tbl tbody tr { animation: row .4s ease-out both; animation-delay: calc(var(--r, 0) * 28ms + 120ms); }
  .play .gy { transform-box: fill-box; transform-origin: 50% var(--oy, 100%); animation: growy .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
  .play .gx { transform-origin: var(--ox, left) center; animation: growx .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--r, 0) * 40ms + 150ms); }
  .play .draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: draw 1.2s ease-out .15s forwards; }
  .play .c-area { animation: fade .8s ease-out .5s both; }
  .play .c-dot, .play .c-val { animation: fade .3s ease-out 1s both; }
  .play .ring .seg-s { animation: ringin 1s cubic-bezier(.2, .7, .2, 1) both; }
  .play .ring .needle { animation: needle 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .play .lad-mark, .play .gauge span, .play .range span, .play .rr i { animation: slide .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .2s; }
  .play .spark polyline { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.2s ease-out .25s forwards; }
  .play .ob, .play .lq, .play .lqe { animation: row .45s ease-out both; animation-delay: calc(var(--r, 0) * 45ms + 120ms); }

  /* every card answers the pointer, and briefly glows gold when its numbers change on a new bar */
  main .glass:not(.banner) { transition: transform .22s ease, box-shadow .22s ease; }
  main .glass:not(.banner):not(.verdict):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold-ring), 0 14px 34px var(--shadow); }
  main .glass.lift:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--gold-mark), 0 18px 40px var(--shadow); }
  .glass.cpulse { animation: updp 1.4s ease-out; }
  .play .pc-h, .play .oc-h, .play .ic-h, .play .hc-h, .play .vc-h, .play .cb-h, .play .ec-h { animation: fade .5s ease-out .1s both; }
}
@keyframes updp { 0% { box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); } 100% { box-shadow: inset 0 0 0 1px transparent, 0 0 0 3px transparent; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes row { from { opacity: 0; transform: translateY(5px); } }
@keyframes growy { from { transform: scaleY(0); } }
@keyframes growx { from { transform: scaleX(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes ringin { from { stroke-dasharray: 0 100; } }
@keyframes needle { from { transform: rotate(-90deg); } }
@keyframes slide { from { left: 50%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bg span, .bg .contours svg, .live, .live::before, .ob.in, .lq.in, .hint, .pulse span { animation: none !important; } * { transition-duration: 0s !important; } }
/* ---------- narrower screens ---------- */
@media (max-width: 960px) {
  .ae { grid-template-columns: minmax(0, 1fr); }
  .rail { position: sticky; top: 0; height: auto; margin: 0; border-radius: 0 0 18px 18px; padding: 10px 14px; gap: 8px; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; }
  .brand small { display: none; }
  .brand { padding-bottom: 0; box-shadow: none; }
  .rlabel, .rail-foot .rlabel-row, .usage { display: none; }
  .rgroup { display: contents; }
  .sel.sym { width: auto; flex: 0 1 160px; }
  .rail-nav { order: 9; flex-basis: 100%; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
  .rail-nav a { flex: none; padding: 6px 11px; font-size: .875rem; gap: 6px; }
  .rail-nav a svg { width: 15px; height: 15px; }
  .rail-foot { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding: 0; box-shadow: none; }
  .theme-sw.grow { display: inline-flex; } .theme-sw.grow .theme-opt { flex: none; width: 30px; }
}
/* top bar, tablet / side-panel widths: row 1 = brand · symbol … theme · language; row 2 = data controls; row 3 = sections */
@media (max-width: 960px) and (min-width: 641px) {
  .rail-foot { display: contents; }
  .rail::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .brand { order: 1; } #symSel { order: 2; flex: 0 1 240px; }
  .rail-foot .rgroup:last-child .rrow { order: 3; margin-left: auto; }
  .rail-foot .rgroup:first-child .rrow { order: 5; } .rail-foot .tog { order: 6; }
  .rail-foot .rgroup:first-child .rrow #refreshSel { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .rail-foot .tog, .rail-foot #refreshSel { display: none; }
  .brand .ver { display: none; }
  .rrow { gap: 6px; }
  .desk { padding-top: 20px; }
  .chart { height: 300px; } .chart.tall { height: 300px; }
  .card, .scard, .vcard, .hcard, .verdict { padding: 16px; }
}

/* ---------- layout follows the working column's own width (it shrinks when the page sits in a side panel) ---------- */
@container desk (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container desk (max-width: 1000px) {
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container desk (max-width: 960px) {
  .ichi-top { grid-template-columns: minmax(0, 1fr); }
  .verdict { grid-template-columns: minmax(0, 1fr); }
  .vring { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; column-gap: 20px; }
  .vring .ring { width: 140px; grid-row: span 3; }
}
@container desk (max-width: 820px) {
  .cb-body { grid-template-columns: minmax(0, 1fr); } .pside { box-shadow: inset 0 2px 0 var(--warn); padding: 12px 0 0; }
  .loggrid { grid-template-columns: minmax(0, 1fr); }
}
@container desk (max-width: 720px) {
  .vgrid, .setgrid { grid-template-columns: minmax(0, 1fr); }
  .setgrid > * { order: var(--o, 0); }
  .frow { grid-template-columns: minmax(0, 1fr) 100px; } .fi { grid-column: 1 / -1; grid-row: 2; }
  .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container desk (max-width: 640px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
}
@container desk (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.wide { grid-column: auto; }
  .vring { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .vring .ring { grid-row: auto; }
  .ladder { padding: 0 14px; } .lad-labels { font-size: .6875rem; } .lad-labels b { font-weight: 400; }
}
@container desk (max-width: 440px) {
  .grid5 { grid-template-columns: minmax(0, 1fr); }
}
/* back to top: shows once the page is scrolled past the first screen */
.to-top.glass { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; color: var(--gold); cursor: pointer;
  background-color: var(--glass); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: inset 0 .5px 0 var(--edge-t), inset 0 -.5px 0 var(--edge-b), 0 8px 22px var(--shadow);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s, background-color .2s; }
.to-top.glass.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top.glass:hover { background-color: var(--gold-soft); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* hover tips: the main site's drop-down glass (navy 14% dark, paper 16% light, 5px blur) — the same glass as the cards — tinted see-through panel, a frosted backdrop strong enough to keep the text
   readable over busy tables and charts, the light edge and the gold rim */
.tip, .lm-p.glass { isolation: isolate; max-height: calc(100vh - 16px); overflow: hidden; background: var(--menu); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: var(--menu-sh); border-radius: 12px; }
.tip::before, .lm-p.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(145deg, var(--rim-hi), var(--rim-in) 24%, var(--rim-lo) 44%, transparent 56%, var(--rim-ac) 78%, var(--rim-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
/* rail: never scrolls sideways; the decimals setting takes two lines (label over the select) so it fits in either language */
.rail { overflow-x: hidden; }
@media (min-width: 961px) {
  .rrow.dec-row .sel { flex: 1 1 auto; min-width: 0; }
  /* the rail never scrolls: spacing tightens with the window height so everything fits */
  .rail { overflow: hidden; gap: clamp(6px, 1.6vh, 16px); padding-top: clamp(12px, 2vh, 20px); padding-bottom: clamp(10px, 1.6vh, 16px); }
  .rail-nav a { padding-top: clamp(3px, .65vh, 8px); padding-bottom: clamp(3px, .65vh, 8px); }
  .rail-foot { gap: clamp(8px, 1.4vh, 14px); padding-top: clamp(8px, 1.4vh, 14px); }
  .rail-foot .rgroup { gap: clamp(5px, 1vh, 8px); }
}
/* short windows: tighter section links, then the symbol / section headings and the call counter make room */
@media (min-width: 961px) and (max-height: 880px) {
  .rail-nav a { padding-top: 3px; padding-bottom: 3px; font-size: .9375rem; }
  .rail-nav a svg { width: 16px; height: 16px; }
}
@media (min-width: 961px) and (max-height: 800px) {
  .rail .rgroup-nav > .rlabel, .rail .rgroup:has(> #symSel) > .rlabel { display: none; }
  .rail-foot .usage { display: none; }
}
@media (min-width: 961px) and (max-height: 700px) {
  .rail-nav a { padding-top: 2px; padding-bottom: 2px; font-size: .875rem; }
  .rail-foot .rgroup > .rlabel, .rail-foot .rlabel-row { display: none; }
  .rail .brand { margin-bottom: 0; }
}

/* buttons and switches float over the page like the main site's: navy 14% on dark, paper (cream) 14% on light — the boxes
   keep the plain glass (navy 14% / white 10%), exactly as arxonedge.com */
.btn-ghost, .theme-sw, .ch-tools button.glass, .to-top.glass { background-color: var(--chrome); }

/* no single orphan word on the last line of notes and paragraphs */
p, .note, li, .small { text-wrap: pretty; }
/* performance: the rim angle follows scroll on the rims themselves (a scroll-linked animation of a registered property
   on each ::before), not through a variable on the root that restyles the whole page every frame */
@property --rimA { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --rimT { syntax: '<number>'; inherits: false; initial-value: 0; }
@supports (animation-timeline: scroll()) {
  .glass::before { animation: rimturn linear both; animation-timeline: scroll(root block); }
  @keyframes rimturn { from { --rimA: 0; } to { --rimA: 1; } }
}
.bg .b1, .bg .b2, .bg .b3 { will-change: transform, translate; }
.bg.hold *, .bg.hold { animation-play-state: paused !important; }

/* ================= Arxon Edge Journal — components added on the Bridge frame ================= */
/* journal-only tokens: day colours on the calendar and heatmap, set from the same pos / neg / warn as the Bridge */
:root { --day-pos: color-mix(in srgb, var(--pos) 16%, transparent); --day-neg: color-mix(in srgb, var(--neg) 14%, transparent);
  --day-pos-hi: color-mix(in srgb, var(--pos) 32%, transparent); --day-neg-hi: color-mix(in srgb, var(--neg) 28%, transparent); --drawer-w: min(440px, 100vw); }

/* ---------- views ---------- */
.view { display: grid; gap: 28px; min-width: 0; }
.view[hidden] { display: none; }
.sec { content-visibility: visible; }
.sh h2 { display: flex; align-items: center; gap: 10px; }
.cnt { font-size: .875rem; color: var(--mist); font-weight: 500; }
.headbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.headbar .seg button { min-width: 38px; }
.filt-from { display: inline-flex; align-items: center; gap: 6px; }
.filt-from .inp { min-height: 32px; font-size: .875rem; padding: 0 8px; }
.px small { font-size: .9375rem; color: var(--mist); font-weight: 500; }
.rbtn-wide { width: 100%; }

/* demo banner and storage status */
.banner.demo { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 70%, transparent), 0 12px 34px var(--shadow); }
.banner .b-t { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
.banner .b-t b { color: var(--warn); }
.banner .b-a { display: flex; gap: 8px; flex-wrap: wrap; }
.store-st { display: flex; align-items: center; gap: 7px; padding: 0 4px; color: var(--mist); font-size: .8125rem; line-height: 1.35; }
.store-st .live::before { animation: none; }
.store-st[data-st="db"] .live { background: var(--pos); }
.store-st[data-st="local"] .live { background: var(--warn); }
.store-st[data-st="demo"] .live, .store-st[data-st="mem"] .live { background: var(--mist); }
.store-st[data-st="saving"] .live { background: var(--gold-mark); } .store-st[data-st="saving"] .live::before { animation: ping 1.2s ease-out infinite; }

/* ---------- KPI tiles: five across, the score ring beside them ---------- */
.kpi { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.kpi .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile .tsub { margin-top: 2px; font-size: .8125rem; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wlbar { display: flex; height: 6px; margin-top: auto; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--grid); }
.wlbar i { display: block; height: 100%; }
.wlbar .w { background: var(--pos); } .wlbar .l { background: var(--neg); } .wlbar .b { background: var(--mist); opacity: .5; }
.tile .tfoot { margin-top: auto; padding-top: 8px; }
.gauge2 { position: relative; height: 6px; border-radius: 4px; background: var(--inner-2); overflow: hidden; }
.gauge2 i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%); background: var(--gold-mark); border-radius: 4px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.score { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.score .ring { width: 132px; }
.score-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.score-top .vlabel { font-size: 1rem; }
.sc-rows { display: grid; gap: 7px; }
.sc-r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(56px, 1fr) 34px; gap: 8px; align-items: center; font-size: .875rem; padding: 3px 6px; margin: 0 -6px; border-radius: 8px; outline: none; transition: background-color .18s; }
.sc-r:hover, .sc-r:focus-visible, .sc-r.is-hot { background: var(--gold-soft); }
.sc-r > span:first-child { color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-r b { text-align: right; font-weight: 600; }
.ring .seg-s.sc { stroke-linecap: round; }

/* ---------- charts ---------- */
.ch2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; }
.svgc.h260 { min-height: 260px; }
.c-dd { fill: var(--neg); opacity: .14; }
.c-ddl { stroke: var(--neg); stroke-width: 1; opacity: .6; fill: none; }
.c-end { stroke: var(--bg); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; color: var(--mist); }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.bk { display: grid; gap: 4px; }
.bk-r { display: grid; grid-template-columns: 84px minmax(0, 1fr) 92px 48px; gap: 10px; align-items: center; padding: 6px 8px; margin: 0 -8px; border-radius: 9px; font-size: .875rem; outline: none; transition: background-color .15s; }
.bk-r:hover, .bk-r:focus-visible, .bk-r.is-hot { background: var(--gold-soft); }
.bk-r > b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-r > .num { text-align: right; }
.bk-r .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.bkbar { position: relative; height: 8px; background: var(--inner-2); border-radius: 5px; }
.bkbar .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--mist); opacity: .5; }
.bkbar .fill { position: absolute; top: 0; bottom: 0; width: calc(var(--p, 0) * 1%); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.bkbar .fill.r { left: 50%; border-radius: 0 5px 5px 0; background: var(--pos); } .bkbar .fill.l { right: 50%; border-radius: 5px 0 0 5px; background: var(--neg); }

/* ---------- calendar ---------- */
.calbox { padding: 16px 18px; display: grid; gap: 12px; }
.cal-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-h h3 { font-size: 1.0625rem; min-width: 9.5em; }
.cal-h .r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.navb { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(96px, .9fr); gap: 6px; }
.cal.mini { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); padding: 0 4px 2px; }
.cday { position: relative; min-height: 92px; padding: 7px 8px; border-radius: 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 2px; background: var(--inner); box-shadow: inset 0 0 0 1px var(--line);
  border: 0; text-align: left; color: var(--foam); font: inherit; cursor: default; outline: none; transition: box-shadow .2s, transform .2s, background-color .2s; min-width: 0; }
.cday.out { opacity: .38; }
.cday.has { cursor: pointer; }
.cday.pos { background: var(--day-pos); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 40%, transparent); }
.cday.neg { background: var(--day-neg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 38%, transparent); }
.cday.be { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 55%, transparent); }
.cday.has:hover, .cday.has:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-mark); transform: translateY(-2px); }
.cday:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.cday.sel { box-shadow: inset 0 0 0 1.5px var(--gold-mark); background-image: linear-gradient(var(--gold-soft), var(--gold-soft)); }
.cday.today .cd-n { color: var(--gold); font-weight: 700; }
.cday.today { outline: 1.5px solid var(--gold-mark); outline-offset: -1.5px; }
.cd-n { font-size: .8125rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.cd-v { align-self: center; font-size: 1rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cd-s { font-size: .75rem; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cd-ic { position: absolute; right: 7px; bottom: 6px; display: flex; gap: 3px; }
.cd-ic i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-mark); }
.cweek { min-height: 92px; padding: 8px 10px; border-radius: 12px; display: grid; align-content: center; gap: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.cweek .cd-n { letter-spacing: .06em; }
.cal.mini .cday { min-height: 46px; padding: 4px 5px; border-radius: 9px; grid-template-rows: auto 1fr; }
.cal.mini .cd-v { font-size: .75rem; font-weight: 600; }
.cal.mini .cd-n { font-size: .6875rem; }

.cal.mini .cd-s, .cal.mini .cd-ic { display: none; }
.wk-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.wk { padding: 8px 10px; border-radius: 10px; background: var(--inner); display: grid; gap: 1px; }
.wk b { font-size: .9375rem; }

/* ---------- day cards and trade table ---------- */
.dcard { padding: 14px 16px; display: grid; gap: 10px; }
.dc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.dc-h h3 { font-size: 1rem; }
.dc-h .r { display: flex; gap: 8px; align-items: center; }
.dc-b { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px 22px; align-items: center; }
.dc-sp { height: 64px; }
.dc-sp .spark { height: 64px; padding-top: 0; }
.dc-st { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px 14px; }
.kv2 { display: grid; gap: 0; } .kv2 > span { font-size: .8125rem; color: var(--mist); } .kv2 b { font-size: .9375rem; font-weight: 600; }
.tbl.tr-tbl td, .tbl.tr-tbl th { padding: 8px 9px; }
.tbl th.sortable { cursor: pointer; user-select: none; } .tbl th.sortable:hover { color: var(--foam); }
.tbl th.sorted { color: var(--gold); }
.tbl th .ar { display: inline-block; margin-left: 4px; font-size: .6875rem; }
.tr-row { cursor: pointer; outline: none; }
.tr-row:focus-visible td { background: var(--gold-soft); }
.tr-row.on td { background: var(--gold-soft); }
.tr-row td:first-child { box-shadow: inset 2px 0 0 transparent, inset 0 -1px 0 var(--grid); }
.tr-row.win td:first-child { box-shadow: inset 2px 0 0 var(--pos), inset 0 -1px 0 var(--grid); }
.tr-row.loss td:first-child { box-shadow: inset 2px 0 0 var(--neg), inset 0 -1px 0 var(--grid); }
.side { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: 1px 7px; border-radius: 6px; }
.side.buy { color: var(--pos); background: var(--pos-soft); } .side.sell { color: var(--neg); background: var(--neg-soft); }
.rv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mist); }
.rv-dot.ok { background: var(--gold-mark); box-shadow: none; }
.ttags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; white-space: normal; }
.tchip { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; padding: 1px 8px; border-radius: 999px; color: var(--foam); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--mist)) 60%, transparent); background: color-mix(in srgb, var(--tc, var(--mist)) 12%, transparent); white-space: nowrap; }
.tchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--mist)); }
.tchip.pick { cursor: pointer; font: inherit; font-size: .8125rem; border: 0; padding: 3px 10px; opacity: .55; transition: opacity .2s, box-shadow .2s; }
.tchip.pick:hover { opacity: .9; box-shadow: inset 0 0 0 1px var(--gold-mark); }
.tchip.pick[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--tc, var(--gold-mark)); }
.flt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flt .sel { min-height: 32px; font-size: .875rem; }
.empty { display: grid; place-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--mist); }
.empty b { color: var(--foam); font-size: 1rem; }
.empty .btn { margin-top: 6px; }
.more-row { display: flex; justify-content: center; padding-top: 6px; }

/* ---------- drawer ---------- */
.drawer-dim { position: fixed; inset: 0; z-index: 85; background: var(--gate-dim); opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-dim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 86; top: 12px; right: 12px; bottom: 12px; width: var(--drawer-w); max-width: calc(100vw - 24px); display: flex; flex-direction: column; border-radius: 20px;
  background-color: var(--glass-pop); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: inset 0 .5px 0 var(--edge-t), inset 0 -.5px 0 var(--edge-b), 0 24px 60px var(--shadow);
  transform: translateX(calc(100% + 24px)); transition: transform .38s cubic-bezier(.2, .7, .2, 1); visibility: hidden; }
.drawer.on { transform: none; visibility: visible; }
.dr-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; box-shadow: inset 0 -1px 0 var(--line); }
.dr-h b { font-size: 1.0625rem; }
.dr-h .r { display: flex; gap: 6px; margin-left: auto; }
.dr-b { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; } .dr-b > * { flex: none; }
.dr-f { padding: 12px 18px 16px; box-shadow: inset 0 1px 0 var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.dr-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dr-big b { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.kvg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kvg > div { padding: 8px 10px; border-radius: 10px; background: var(--inner); display: grid; gap: 1px; min-width: 0; }
.kvg span { font-size: .8125rem; color: var(--mist); } .kvg b { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.icon-btn.x:hover { color: var(--foam); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.icon-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }

/* ---------- trade review page ---------- */
.rvw { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.rvw-l, .rvw-r { display: grid; gap: 14px; min-width: 0; }
.rvw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rvw-top h2 { font-size: 1.375rem; }
.rvw-top .r { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fld { display: grid; gap: 5px; min-width: 0; }
.fld > label, .fld > .lb { font-size: .8125rem; font-weight: 600; color: var(--mist); letter-spacing: .02em; }
.fld-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.fld-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inp { width: 100%; }
textarea.inp { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.55; color: var(--foam); }
textarea.inp.tall { min-height: 150px; }
.inp::placeholder, textarea::placeholder { color: var(--mist); opacity: .75; }
input[type="date"].inp, input[type="datetime-local"].inp { color-scheme: inherit; }
.stars { display: inline-flex; gap: 2px; }
.stars button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--mist); cursor: pointer; display: grid; place-items: center; transition: color .15s, background-color .15s, box-shadow .15s; }
.stars button:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.stars button.on { color: var(--gold-mark); }
.stars svg { width: 18px; height: 18px; }
.ckl { display: grid; gap: 4px; }
.ckl-g { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin: 8px 0 2px; }
.ckl-g:first-child { margin-top: 0; }
/* tick boxes are drawn: no solid white control in either theme */
.ck { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 8px; margin: 0 -8px; border-radius: 9px; cursor: pointer; font-size: .9375rem; line-height: 1.45; transition: background-color .15s; }
.ck:hover { background: var(--inner); }
.ck input { appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 18px; height: 18px; border-radius: 6px; background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; display: grid; place-items: center; transition: box-shadow .2s, background-color .2s; }
.ck input:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.ck input:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.ck input:checked { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-mark); }
.ck input:checked::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--gold-mark); border-bottom: 2px solid var(--gold-mark); transform: rotate(-45deg); }
.ck.auto { cursor: default; } .ck.auto:hover { background: transparent; }
.ck .st { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.ck .st.ok { background: var(--pos-soft); color: var(--pos); } .ck .st.no { background: var(--neg-soft); color: var(--neg); } .ck .st.na { background: var(--inner-2); color: var(--mist); }
.ck small { display: block; color: var(--mist); font-size: .8125rem; }
/* trade map: SL, entry, TP and the exit on one price scale, with an R ruler */
.tmap svg { display: block; width: 100%; overflow: visible; }
.tm-lab { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-ax { fill: var(--mist); font-size: 12px; font-variant-numeric: tabular-nums; }
.tm-band-w { fill: var(--pos); opacity: .1; } .tm-band-l { fill: var(--neg); opacity: .1; }
.tline { position: relative; height: 26px; border-radius: 8px; background: var(--inner-2); overflow: hidden; }
.tline i { position: absolute; top: 0; bottom: 0; opacity: .35; }
.tline { overflow: visible; }
.tline .hold { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--gold-mark) 55%, transparent); box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold); }
.tline .hold::before, .tline .hold::after { content: ""; position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--gold); border-radius: 1px; } .tline .hold::before { left: 0; } .tline .hold::after { right: 0; }
.tl-lab { position: relative; height: 18px; margin-bottom: 6px; font-size: .8125rem; color: var(--mist); } .tl-lab > * { } .tl-lab { text-align: center; } .tl-lab b { color: var(--gold); font-weight: 600; }
.tl-lab { padding-left: calc(var(--l) - 50%); padding-right: calc(50% - var(--l)); white-space: nowrap; }
.tl-ax { display: flex; justify-content: space-between; font-size: .75rem; color: var(--mist); margin-top: 4px; font-variant-numeric: tabular-nums; }
.savehint { font-size: .8125rem; color: var(--mist); display: inline-flex; align-items: center; gap: 6px; }
.savehint.ok { color: var(--pos); }
.btn-ghost.on { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); color: var(--gold); }
.btn-ghost.danger:hover { box-shadow: inset 0 0 0 1px var(--neg), 0 10px 24px var(--shadow); color: var(--neg); }
.btn-ghost.armed { color: var(--neg); box-shadow: inset 0 0 0 1px var(--neg); background: var(--neg-soft); }

/* ---------- daily journal ---------- */
.jrn { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.jlist { padding: 10px; display: flex; flex-direction: column; max-height: calc(100dvh - 160px); overflow: hidden; position: sticky; top: 16px; }
.jl-sc { display: grid; gap: 4px; align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.jl-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 9px 10px; border-radius: 11px; border: 0; background: transparent; color: var(--foam); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.jl-i:hover { background: var(--inner); }
.jl-i[aria-current="true"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.jl-i b { font-size: .9375rem; font-weight: 600; } .jl-i .num { text-align: right; font-size: .875rem; font-weight: 600; }
.jl-i small { color: var(--mist); font-size: .8125rem; grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.jl-i small .dotj { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-mark); }
.jl-i small .dotj.no { background: transparent; box-shadow: inset 0 0 0 1px var(--mist); }
.jed { padding: 18px 20px; display: grid; gap: 16px; }
.jed-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.jed-h h3 { font-size: 1.25rem; }
.jed-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.moods { display: flex; flex-wrap: wrap; gap: 6px; }
.moods .tchip.pick { --tc: var(--gold-mark); }

/* ---------- playbooks ---------- */
.pbg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.pb { padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.pb.tpl { --rim-in: rgba(201, 169, 97, .7); --rim-ac: rgba(201, 169, 97, .7); }
.pb-h { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.pb-h b { font-size: 1.0625rem; margin-right: auto; }
.pb-d { margin: 0; color: var(--mist); font-size: .9375rem; line-height: 1.55; }
.pb-st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pb-st > div { padding: 10px 12px; border-radius: 12px; background: var(--inner); display: grid; gap: 2px; min-width: 0; }
.pb-st span { font-size: .8125rem; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-st b { font-size: 1.375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-st small { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* equal-height cards: the buttons sit on the bottom line */
.pb { display: flex; flex-direction: column; } .pb > .pb-f { margin-top: auto; }
/* followed in full vs not: two bars on one scale */
.pb-vs { display: grid; gap: 8px; margin-top: 4px; } .pb-vc { font-size: .8125rem; color: var(--mist); }
.pb-cmp .kv b > span { font-weight: 400; font-size: .8125rem; margin-left: 6px; }
.pb-vr { display: grid; grid-template-columns: minmax(0, auto) minmax(48px, 1fr) auto; align-items: center; gap: 10px; font-size: .875rem; }
.pb-vr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-vr > b { font-weight: 600; min-width: 72px; text-align: right; }
.pb-vb { height: 8px; border-radius: 5px; background: var(--inner-2); overflow: hidden; }
.pb-vb i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: 5px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.pb-vb i.p { background: var(--pos); } .pb-vb i.n { background: var(--neg); }
.pb-vd { margin: 2px 0 0; font-size: .875rem; line-height: 1.5; } .pb-vd.pos { color: var(--pos); } .pb-vd.warn { color: var(--warn); }
/* no trades yet: one quiet line instead of a grid of dashes */
.pb-empty { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--inner); color: var(--mist); }
.pb-empty > svg { flex: none; margin-top: 3px; color: var(--gold); }
.pb-empty b { display: block; color: var(--foam); font-weight: 600; font-size: .9375rem; } .pb-empty span { display: block; font-size: .875rem; line-height: 1.5; margin-top: 2px; }
.pb-cmp { display: grid; gap: 6px; }
.pb-cmp .kv { font-size: .875rem; }
.pb-rules { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .875rem; color: var(--mist); }
.pb-f { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; box-shadow: inset 0 1px 0 var(--line); }
.rl-ed { display: grid; gap: 6px; }
.rl-ed-r { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.rl-ed .inp { min-height: 34px; }

/* ---------- discipline ---------- */
.dsc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch; }
.dtoday { padding: 16px 18px; display: grid; gap: 12px; }
.streak { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.streak .big2 { font-size: 2.6rem; font-weight: 600; line-height: 1; }
.streak .fl { width: 38px; height: 38px; color: var(--gold-mark); }
.hm { padding: 16px 18px; display: grid; gap: 10px; }
.hm-g { display: grid; grid-template-columns: auto repeat(20, minmax(0, 1fr)); grid-template-rows: auto repeat(7, auto); gap: 5px; align-content: center; }
.hm-c { width: 100%; aspect-ratio: 1; max-height: 34px; border-radius: 4px; background: var(--inner-2); outline: none; }
.hm-c.p { background: var(--pos); } .hm-c.h { background: color-mix(in srgb, var(--pos) 45%, var(--inner-2)); } .hm-c.f { background: var(--neg); } .hm-c.m { background: color-mix(in srgb, var(--warn) 70%, transparent); }
.hm-c.fut { opacity: .25; }
.hm-c:hover, .hm-c:focus-visible { box-shadow: 0 0 0 1.5px var(--gold-mark); }
.hm-k { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8125rem; color: var(--mist); align-items: center; }
.hm-k i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rl-tbl td:first-child { white-space: normal; min-width: 180px; }

/* ---------- accounts and import ---------- */
.acc-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.acard { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.acard-h { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.acard-h b { font-size: 1.0625rem; margin-right: auto; }
.chip.c-real { color: var(--pos); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 50%, transparent); }
.chip.c-prop { color: var(--purple); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 50%, transparent); }
.drop { position: relative; display: grid; place-items: center; gap: 8px; padding: 30px 18px; border-radius: 16px; text-align: center; cursor: pointer; color: var(--mist);
  background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--inner) 9px 10px); transition: box-shadow .2s, background-color .2s; }
.drop:hover, .drop.over { box-shadow: inset 0 0 0 1.5px var(--gold-mark); background-color: var(--gold-soft); }
.drop:focus-within { box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.drop b { color: var(--foam); font-size: 1rem; }
.drop svg { color: var(--gold-mark); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 8px; }
.steps li { counter-increment: st; position: relative; padding-left: 32px; font-size: .9375rem; line-height: 1.5; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.prev-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.prev-g > div { padding: 8px 10px; border-radius: 10px; background: var(--inner); display: grid; gap: 1px; }
.prev-g span { font-size: .8125rem; color: var(--mist); } .prev-g b { font-size: 1.05rem; }
.chkline { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: .9375rem; line-height: 1.5; }
.chkline.ok { background: var(--pos-soft); } .chkline.no { background: var(--neg-soft); } .chkline.na { background: var(--warn-soft); }
.chkline .ln-ic { margin-top: 2px; }
.chkline.ok .ln-ic { color: var(--pos); } .chkline.no .ln-ic { color: var(--neg); } .chkline.na .ln-ic { color: var(--warn); }
.warns { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .875rem; color: var(--warn); }

/* ---------- modal (wizard) ---------- */
.gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: var(--gate-dim); }
.gate[hidden] { display: none; }
.gate-b { width: min(680px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; padding: 0; border-radius: 20px; }
.gate-b.glass { background-color: var(--glass-pop); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: inset 0 .5px 0 var(--edge-t), inset 0 -.5px 0 var(--edge-b), 0 24px 60px var(--shadow); }
.gate-in { overflow-y: auto; padding: 20px 22px; display: grid; gap: 14px; min-height: 0; }
.gate-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gate-top b { font-size: 1.125rem; color: var(--gold); }
.gate-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px 18px; box-shadow: inset 0 1px 0 var(--line); }
.gate-f .r { display: flex; gap: 8px; margin-left: auto; }
.wz-prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wz-prog i { height: 4px; border-radius: 3px; background: var(--inner-2); transition: background-color .3s; }
.wz-prog i.on { background: var(--gold-mark); }
.opts { display: grid; gap: 8px; }
.opt { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 0; text-align: left; font: inherit; color: var(--foam); cursor: pointer;
  background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background-color .2s; }
.opt:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.opt[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--gold-mark); background: var(--gold-soft); }
.opt:disabled { opacity: .55; cursor: not-allowed; }
.opt:disabled:hover { box-shadow: inset 0 0 0 1px var(--line); }
.opt .oi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--gold); background: var(--gold-soft); }
.opt b { display: block; font-size: .9375rem; } .opt small { color: var(--mist); font-size: .875rem; line-height: 1.45; display: block; }
html.gated { overflow: hidden; }

/* ---------- layout follows the working column ---------- */
@container desk (max-width: 980px) { .kpi { grid-template-columns: minmax(0, 1fr); } .score { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .score .sc-rows { grid-column: 2; } }
@container desk (max-width: 1000px) { .ch2, .dsc-top { grid-template-columns: minmax(0, 1fr); } .rvw { grid-template-columns: minmax(0, 1fr); } }
@container desk (max-width: 860px) { .jrn { grid-template-columns: minmax(0, 1fr); } .jlist { position: static; max-height: 260px; } .cal { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(54px, .75fr); } .cweek { padding: 6px; min-height: 0; } .cweek .cd-s, .cweek .chip { display: none; } .cweek .cd-v { font-size: .8125rem; } .dc-b { grid-template-columns: minmax(0, 1fr); } }
@container desk (max-width: 720px) { .kpi .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .score { grid-template-columns: minmax(0, 1fr); } .score .sc-rows { grid-column: auto; } .pb-st, .prev-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cday { min-height: 64px; padding: 5px 6px; } .cd-v { font-size: .875rem; } .cd-s { display: none; } .bk-r { grid-template-columns: 70px minmax(0, 1fr) 80px; } .bk-r > :last-child { display: none; } }
@container desk (max-width: 480px) { .fld-row, .fld-row.three { grid-template-columns: minmax(0, 1fr); } .cal { gap: 3px; } .cday { min-height: 52px; border-radius: 8px; } .cd-v { font-size: .75rem; } .cal .dow { font-size: .6875rem; letter-spacing: .04em; } }
@media (max-width: 640px) { .drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; height: min(82dvh, 720px); transform: translateY(calc(100% + 24px)); } .drawer.on { transform: none; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-dim { transition: none; } }
@media (prefers-reduced-motion: no-preference) {
  .play .cday, .play .bk-r, .play .sc-r, .play .jl-i, .play .hm-c { animation: row .4s ease-out both; animation-delay: calc(var(--r, 0) * 14ms + 100ms); }
}

.tbl th.r { text-align: right; }
.card > .drop { height: 100%; }
.kvg > .w2 { grid-column: 1 / -1; }

textarea { font: inherit; color: inherit; }
.gate-in:focus, .gate-in:focus-visible { outline: none; box-shadow: none; }
.fld .sel, .fld .inp { width: 100%; min-width: 0; text-overflow: ellipsis; }

/* the drawer sits over dense tables: the same glass and transparency, with a stronger frost so its text stays readable (as the Bridge does for its tips) */
.drawer { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

.kv { display: flex; justify-content: space-between; gap: 10px; }
.kv > span:first-child { min-width: 0; }

.cd-v .v-s { display: none; }

@container desk (max-width: 720px) { .cd-v .v-l { display: none; } .cd-v .v-s { display: inline; } }
.gate-b.glass { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* ---------- the rail as a top bar (side panel, tablet, phone): a grid with a fixed place for each control, so nothing wraps into a stray row ---------- */
.rbreak { display: none; }
@media (max-width: 960px) {
  /* a short page (an empty journal) must not stretch the bar: the bar's row stays its own height and the page takes the rest */
  .ae { grid-template-rows: auto 1fr; align-content: start; }
  .rail { align-self: start; align-content: start; }
  .rail { display: grid; grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr) auto auto auto; grid-template-areas: "brand acc . imp theme lang" "nav nav nav nav nav nav"; align-items: center; column-gap: 10px; row-gap: 8px; }
  .rail::after { display: none; }
  .rail .rail-foot, .rail .rail-foot .rgroup, .rail .rail-foot .rgroup .rr-view { display: contents; }
  .rail .store-st, .rail .rbreak { display: none; }
  .rail .brand { grid-area: brand; }
  .rail #accSel { grid-area: acc; width: 100%; min-width: 0; }
  .rail .rail-foot .rgroup .rr-imp { grid-area: imp; margin: 0; }
  .rail .theme-sw, .rail .theme-sw.grow { grid-area: theme; flex: none; margin: 0; }
  .rail .lang { grid-area: lang; }
  .rail .rail-nav { grid-area: nav; margin: 0 -14px; }
  .rail .rr-imp .btn { width: auto; }
}
/* narrower: the import button keeps its icon only */
@media (max-width: 800px) {
  .rail .rr-imp .btn { width: 34px; min-height: 34px; height: 34px; padding: 0; border-radius: 50%; }
  .rail .rr-imp .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* phone: display settings beside the logo, the account and import together, then the pages */
@media (max-width: 640px) {
  .rail { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand . theme lang" "acc acc acc imp" "nav nav nav nav"; }
  .rail .rail-foot .rgroup .rr-imp { justify-self: end; }
}
@media (max-width: 374px) { .rail .brand > span { display: none; } }

/* ---------- month and year picker on the calendar ---------- */
.calbox { position: relative; }
.cal-ttl { display: inline-flex; align-items: center; gap: 8px; min-width: 9.5em; padding: 5px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--foam); font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.cal-ttl svg { color: var(--gold); transition: transform .2s; }
.cal-ttl:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.cal-ttl[aria-expanded="true"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.cal-ttl[aria-expanded="true"] svg { transform: rotate(180deg); }
.cal-pop.glass { position: fixed; z-index: 84; width: min(340px, calc(100vw - 24px)); padding: 12px; display: grid; gap: 10px; border-radius: 14px;
  background-color: var(--menu); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: var(--menu-sh); animation: tipin .14s ease-out; }
.cp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-h b { font-size: 1rem; }
.cp-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cp-m { display: grid; gap: 1px; justify-items: center; padding: 8px 4px; border: 0; border-radius: 10px; background: var(--inner); color: var(--foam); font: inherit; font-size: .875rem; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background-color .2s; min-width: 0; }
.cp-m small { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.cp-m:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.cp-m:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.cp-m[aria-current="true"] { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-mark); }
.cp-m:disabled { opacity: .35; cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--line); }
.cp-f { display: flex; justify-content: flex-end; }
.cal-pop[hidden] { display: none; }

/* ---------- your data: status, then one group per job, the irreversible one last and set apart ---------- */
.dcard2 { display: grid; gap: 14px; align-content: start; }
.dcard2 .cb-h { margin-bottom: 0; }
.dz-st { display: grid; gap: 4px; }
.dz-st .store-st { padding: 0; font-size: .9375rem; color: var(--foam); }
.dz-st .store-st b { font-weight: 600; }
.dz { display: grid; gap: 8px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--line); }
.dz-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.dz-h b { font-size: .9375rem; font-weight: 600; }
.dz-danger .dz-h b { color: var(--neg); }
.btn-ghost.danger { color: var(--neg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 45%, transparent), 0 6px 18px var(--shadow); }
.btn-ghost.danger:focus-visible { box-shadow: inset 0 0 0 1px var(--neg), 0 0 0 3px var(--neg-soft); }
.bk-pick { position: relative; }
.bk-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bk-pick:focus-within { box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.rs-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container desk (max-width: 640px) { .rs-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .rs-g { grid-template-columns: minmax(0, 1fr); } }

/* ---------- settings ---------- */
.pref-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pref { display: grid; gap: 14px; align-content: start; }
.pref .cb-h { margin-bottom: 0; }
.pref .fld .note { margin-top: 4px; }
.pref-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .9375rem; }
.pref-l li { display: flex; align-items: center; gap: 9px; }
.pref-l li.off { color: var(--mist); text-decoration: line-through; text-decoration-color: var(--line); }
@container desk (max-width: 860px) { .pref-g { grid-template-columns: minmax(0, 1fr); } .pref-g > [style*="span 2"] { grid-column: auto !important; } }
.pref .fld > .seg { justify-self: start; }
.pref .cb-h > .btn { margin-left: auto; }

/* ---------- selecting trades and the bulk bar ---------- */
.tbl th.sel-c, .tbl td.sel-c { width: 34px; padding-right: 0; }
.ckb { appearance: none; -webkit-appearance: none; margin: 0; width: 17px; height: 17px; border-radius: 5px; background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; transition: box-shadow .2s, background-color .2s; }
.ckb:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.ckb:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.ckb:checked { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold-mark); }
.ckb:checked::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid var(--gold-mark); border-bottom: 2px solid var(--gold-mark); transform: rotate(-45deg); }
.tr-row.sel-on td { background: color-mix(in srgb, var(--gold-mark) 9%, transparent); }
/* the bar rides along the foot of the working column (never over the rail or the top bar), centred in it */
.bulk.glass { position: sticky; z-index: 83; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 18px auto 0; width: max-content; max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: 16px;
  background-color: var(--menu); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: var(--menu-sh); animation: tipin .18s ease-out; }
.bulk[hidden] { display: none; }
.bk-n { display: flex; align-items: baseline; gap: 6px; font-size: .9375rem; }
.bk-n b { font-size: 1.125rem; color: var(--gold); }
.bk-a { display: flex; align-items: center; gap: 6px; }
.bk-a .sel.sm { max-width: 220px; }
html.bulk-on .to-top.glass { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) { .bulk.glass { width: auto; } .bk-a .sel.sm { max-width: none; flex: 1 1 140px; } .bk-a { flex: 1 1 100%; } }
.tbl td .small, .tbl td .chip { text-wrap: nowrap; white-space: nowrap; }

/* ---------- goals ---------- */
.ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.gcard { padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.gcard.is-met { --rim-in: rgba(201, 169, 97, .75); --rim-ac: rgba(201, 169, 97, .75); }
.gcard.is-brk { --rim-in: rgba(242, 54, 69, .6); --rim-ac: rgba(242, 54, 69, .6); }
.gc-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.gc-h b { font-size: 1rem; } .gc-h > .num { font-size: 1.25rem; font-weight: 600; }
.gr { display: grid; gap: 5px; }
.gr-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .875rem; color: var(--mist); }
.gr-h .chip { font-size: .75rem; padding: 1px 8px; }
.gr-v { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .875rem; }
.gbar { position: relative; height: 7px; border-radius: 5px; background: var(--inner-2); overflow: hidden; }
.gbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%); border-radius: 5px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.gbar i.pos { background: var(--pos); } .gbar i.neg { background: var(--neg); } .gbar i.warn { background: var(--warn); } .gbar i.gold { background: var(--gold-mark); } .gbar i.mute { background: color-mix(in srgb, var(--neg) 45%, var(--inner-2)); }
.g-quiet { opacity: .55; display: grid; gap: 12px; }
.g-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.g-cta b { font-size: 1rem; } .g-cta .note { margin-top: 2px; }
.nudges { display: grid; gap: 6px; }
.nudge { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: .9375rem; line-height: 1.5; background: var(--inner); box-shadow: inset 3px 0 0 var(--line); }
.nudge .ln-ic { margin: 2px 0 0; flex: none; }
.nudge.n-neg { background: var(--neg-soft); box-shadow: inset 3px 0 0 var(--neg); } .nudge.n-neg .ln-ic { color: var(--neg); }
.nudge.n-warn { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); } .nudge.n-warn .ln-ic { color: var(--warn); }
.nudge.n-gold { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold-mark); } .nudge.n-gold .ln-ic { color: var(--gold); }
.nudge.n-pos { background: var(--pos-soft); box-shadow: inset 3px 0 0 var(--pos); } .nudge.n-pos .ln-ic { color: var(--pos); }
.nudge.n-mut .ln-ic { color: var(--mist); }
.gform { display: grid; gap: 18px; }
.glines { display: grid; gap: 2px; }
.gline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--grid); }
.gline:last-child { box-shadow: none; }
.gline .gl-t { display: grid; gap: 2px; } .gline .gl-t b { font-size: .9375rem; font-weight: 600; }
.gline .gl-c { display: flex; align-items: center; gap: 8px; } .gline .gl-c .sel.sm { min-width: 0; width: auto; }
.gline.off .gl-t, .gline.off .gl-c { opacity: .5; }
.gnum { width: 96px; text-align: right; }
.gsplit-box { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--inner); }
.gsplit-box .wk { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--inner-2); }
.gsplit-box .wk b { font-size: 1.0625rem; } .gsplit-box .wk.main { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.gsplit { font-size: .75rem; color: var(--mist); opacity: .85; }
.gexp { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--foam); opacity: .7; }
.gbar { overflow: visible; } .gbar i { overflow: hidden; }
@media (max-width: 560px) { .gline { grid-template-columns: auto minmax(0, 1fr); } .gline .gl-c { grid-column: 2; } .gline .gl-c:empty { display: none; } }
.gs-c { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.gs-c .sel.sm { min-width: 0; width: auto; }
.ghist td:last-child { white-space: normal; } .ghist td:last-child .chip { margin: 2px 2px 2px 0; }
.ghist tr.g-met td:first-child { box-shadow: inset 3px 0 0 var(--gold-mark), inset 0 -1px 0 var(--grid); }
.rv-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.rv-g .card { display: grid; gap: 12px; }
.cd-g { position: absolute; top: 6px; right: 7px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: .6875rem; font-weight: 800; }
.cd-g.hit { color: var(--gold); }
.cd-g.brk { color: var(--bg); background: var(--neg); }
.cday.today .cd-g { right: 9px; }
.cweek .chip { justify-self: start; margin-top: 3px; font-size: .6875rem; padding: 1px 7px; }
@container desk (max-width: 980px) { .ggrid { grid-template-columns: minmax(0, 1fr); } .rv-g { grid-template-columns: minmax(0, 1fr); } }
@container desk (max-width: 720px) { .cd-g { top: 3px; right: 3px; width: 12px; height: 12px; } }
.tog { position: relative; } .tblwrap { position: relative; }

/* goal ladder: the period's P&L on a track from the loss limit through zero to the target; trail, chevrons and the riding price as on the Bridge VWAP ladders */
.gc-h > .gc-v { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.gc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gc-chips .chip { font-size: .75rem; padding: 1px 8px; }
.gc-rest { display: grid; gap: 10px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--grid); }
.gl { position: relative; padding: 30px 6px 0; container: gl / inline-size; }
.gl-track { position: relative; height: 10px; border-radius: 6px; background: var(--inner-2); }
.gl-z { position: absolute; top: 0; bottom: 0; }
.gl-z.neg { background: linear-gradient(90deg, color-mix(in srgb, var(--neg) 30%, transparent), var(--neg-soft)); border-radius: 6px 0 0 6px; }
.gl-z.pos { background: linear-gradient(90deg, var(--pos-soft), color-mix(in srgb, var(--pos) 30%, transparent)); border-radius: 0 6px 6px 0; }
.gl-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -.5px; background: var(--mist); opacity: .5; }
.gl-tick.zero { width: 3px; margin-left: -1.5px; background: var(--gold-mark); opacity: 1; border-radius: 2px; }
.gl-tick.lim { background: var(--neg); opacity: .9; width: 2px; } .gl-tick.gtg { background: var(--pos); opacity: .9; width: 2px; margin-left: -2px; }
.gl-tick.plan { top: -5px; bottom: -5px; background: none; border-left: 1.5px dashed var(--foam); opacity: .75; }
.gl-mark { position: absolute; top: -7px; width: 4px; height: 24px; margin-left: -2px; background: var(--foam); border-radius: 2px; left: calc(var(--p, 50) * 1%); z-index: 2;
  box-shadow: 0 0 0 3px var(--bg), 0 0 14px var(--gold-ring); transition: left .9s cubic-bezier(.2, .7, .2, 1); }
.gl .lad-px { left: clamp(34px, calc(var(--p, 50) * 1%), calc(100% - 34px)); bottom: calc(100% + 9px); }

.gl.gl-hit .gl-mark { background: var(--gold-mark); box-shadow: 0 0 0 3px var(--bg), 0 0 18px var(--gold-mark); }
.gl.gl-near .gl-mark { background: var(--warn); } .gl.gl-brk .gl-mark { background: var(--neg); box-shadow: 0 0 0 3px var(--bg), 0 0 16px var(--neg); }
.gl.idle .gl-mark { opacity: .55; box-shadow: 0 0 0 3px var(--bg); } .gl.idle .lad-px { color: var(--mist); }
.gl-labs { position: relative; height: 32px; margin-top: 9px; font-size: .75rem; }
.gl-labs.two { height: 60px; }
.gl-lab { position: absolute; top: 0; transform: translateX(-50%); display: grid; text-align: center; line-height: 1.35; white-space: nowrap; color: var(--foam); }
.gl-lab em { font-style: normal; color: var(--mist); } .gl-lab b { font-weight: 500; }
.gl-lab.lo { transform: none; text-align: left; } .gl-lab.hi { transform: translateX(-100%); text-align: right; }
.gl-lab.zero em { color: var(--gold); } .gl-lab.neg b { color: var(--neg); } .gl-lab.pos b { color: var(--pos); }
.gl-lab.low { top: 28px; } .gl-lab.low::before { content: ""; position: absolute; left: 50%; top: -30px; height: 28px; width: 1px; background: var(--line); }
.gl-lab.lo.low::before { left: 0; } .gl-lab.hi.low::before { left: auto; right: 0; }
.gl-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--mist); }
.gl-foot b { color: var(--foam); font-weight: 600; } .gl-foot b.pos { color: var(--pos); } .gl-foot b.neg { color: var(--neg); } .gl-foot b.warn { color: var(--warn); }
.gl .lad-trail { position: absolute; top: 1px; bottom: 1px; left: calc(var(--a, 50) * 1%); width: calc(var(--w, 0) * 1%); border-radius: 6px; pointer-events: none; }
.gl .lad-trail.up { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pos) 60%, transparent)); }
.gl .lad-trail.dn { background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--neg) 60%, transparent)); }
.lad-dir { position: absolute; top: -4px; height: 18px; left: calc(var(--p, 50) * 1%); width: 26px; pointer-events: none; transition: left .9s cubic-bezier(.2, .7, .2, 1); z-index: 1; }
.lad-dir.up { margin-left: 5px; } .lad-dir.dn { margin-left: -31px; }
.lad-dir i { position: absolute; top: 4px; width: 7px; height: 7px; border-top: 2px solid; border-right: 2px solid; opacity: 0; animation: ladgo 1.6s ease-out infinite; }
.lad-dir.up i { left: 0; color: var(--pos); transform: rotate(45deg); }
.lad-dir.dn i { right: 0; color: var(--neg); transform: rotate(-135deg); --go: -14px; }
.lad-dir i + i { animation-delay: .8s; }
@keyframes ladgo { 0% { opacity: 0; translate: 0 0; } 25% { opacity: .9; } 100% { opacity: 0; translate: var(--go, 14px) 0; } }
.lad-px { position: absolute; transform: translateX(-50%); z-index: 3; padding: 1px 7px; border-radius: 6px; font-size: .8125rem; font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--foam);
  background: var(--chrome); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: inset 0 0 0 1px var(--line); transition: left .9s cubic-bezier(.2, .7, .2, 1), color .6s; font-variant-numeric: tabular-nums; }
.lad-px .rl { display: inline-block; animation: rollup .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
.lad-px .rl.dn { animation-name: rolldn; }
.lad-px.px-up { animation: pxup 1.2s ease-out; } .lad-px.px-dn { animation: pxdn 1.2s ease-out; }
@keyframes rollup { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rolldn { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pxup { 0%, 40% { color: var(--pos); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 60%, transparent); } }
@keyframes pxdn { 0%, 40% { color: var(--neg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 60%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lad-dir i { animation: none; opacity: .8; } .lad-dir i + i { display: none; } .lad-px .rl, .lad-px.px-up, .lad-px.px-dn { animation: none; } }
.simbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 14px; margin-bottom: 10px; font-size: .9375rem; --rim-in: rgba(201, 169, 97, .6); }
.simbar .r { margin-left: auto; display: flex; gap: 8px; }
.ggrid + .nudges, .nudges + .ggrid { margin-top: 10px; }
.lad-dir.edge { display: none; }
.sim-b { display: inline-flex; align-items: baseline; gap: 2px 10px; flex-wrap: wrap; } .sim-b .linkbtn { margin-left: 0; }
.how-f summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.how-f summary::-webkit-details-marker { display: none; }
.how-f summary::after { content: ""; width: 8px; height: 8px; border-right: 1.8px solid var(--mist); border-bottom: 1.8px solid var(--mist); transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.how-f[open] summary::after { transform: rotate(-135deg); } .how-f[open] summary { margin-bottom: 10px; }
.how-f summary h3 { margin: 0; }

/* visual tiles */
.tiles.kt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t2 .t2-in { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.t2 .t2-l { min-width: 0; } .t2 .tv { font-size: 1.625rem; }
.t2 .t2-v { flex: none; display: grid; justify-items: center; gap: 6px; }
.semi { width: 104px; height: 58px; overflow: visible; } .donut { width: 64px; height: 64px; }
.semi .sg-t, .donut .sg-t { fill: none; stroke: var(--inner-2); stroke-width: 8; }
.semi .sg, .donut .sg { fill: none; stroke-width: 8; stroke-linecap: butt; }
.semi .sg-t { stroke-linecap: round; }
.play .semi .sg, .play .donut .sg { animation: sgin 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
@keyframes sgin { from { opacity: 0; stroke-dasharray: 0 200; } }
.pills { display: flex; gap: 5px; }
.pl { min-width: 26px; padding: 0 7px; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.6; text-align: center; }
.pl.w { color: var(--pos); background: var(--pos-soft); } .pl.b { color: var(--gold); background: var(--gold-soft); } .pl.l { color: var(--neg); background: var(--neg-soft); }
.splitbar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; gap: 3px; }
.splitbar .w { flex: none; width: calc(var(--p, 50) * 1%); background: var(--pos); border-radius: 5px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.splitbar .l { flex: 1; background: var(--neg); border-radius: 5px; }
.split-l { display: flex; justify-content: space-between; margin-top: 6px; font-size: .875rem; font-weight: 600; }
/* score cards side by side */
.scores { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.edge .ed-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.radar { width: 100%; max-width: 340px; overflow: visible; justify-self: center; }
.rd-r { fill: none; stroke: var(--grid); stroke-width: .6; } .rd-r:first-child { stroke: var(--line); }
.rd-a { stroke: var(--grid); stroke-width: .5; }
.rd-p { fill: color-mix(in srgb, var(--gold-mark) 22%, transparent); stroke: var(--gold-mark); stroke-width: 1.2; stroke-linejoin: round; transform-origin: 60px 52px; }
.play .rd-p { animation: rdin 1s cubic-bezier(.2, .7, .2, 1) both .15s; } @keyframes rdin { from { transform: scale(.2); opacity: 0; } }
.ed-dot { fill: var(--bg); stroke: var(--gold-mark); stroke-width: 1.3; cursor: default; outline: none; transition: r .15s; } .ed-dot:hover, .ed-dot:focus-visible, .ed-dot.is-hot { r: 3.6; fill: var(--gold-mark); }
.rd-l text { font-size: 5.6px; fill: var(--mist); font-family: inherit; }
.ed-s { display: grid; gap: 4px; align-content: center; }
.ed-s > b { font-size: 2.4rem; font-weight: 600; line-height: 1.05; }
.ed-bar { margin-top: 8px; }
.ed-trk { position: relative; height: 8px; border-radius: 5px; background: linear-gradient(90deg, var(--neg), var(--gold-mark) 50%, var(--pos)); opacity: .9; }
.ed-m { position: absolute; top: 50%; left: calc(var(--p, 0) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 3px var(--bg), 0 0 8px var(--gold-ring); transition: left .9s cubic-bezier(.2, .7, .2, 1); }
.ed-ticks { position: relative; height: 16px; margin-top: 6px; font-size: .6875rem; color: var(--mist); }
.ed-ticks span { position: absolute; transform: translateX(-50%); } .ed-ticks span:first-child { transform: none; } .ed-ticks span:last-child { transform: translateX(-100%); }
@container desk (max-width: 980px) { .scores { grid-template-columns: minmax(0, 1fr); } }
@container desk (max-width: 720px) { .tiles.kt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t2 .t2-v .pills { display: none; } .semi { width: 76px; height: 44px; } .donut { width: 50px; height: 50px; } }
@container desk (max-width: 520px) { .edge .ed-g { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .play .semi .sg, .play .donut .sg, .play .rd-p { animation: none; } }

/* weekly totals beside each calendar week */
.cal.mini { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(48px, .8fr); }
.cal.mini .cweek { min-height: 46px; padding: 4px 6px; border-radius: 9px; gap: 0; }
.cal.mini .cweek .cd-n { font-size: .6875rem; } .cal.mini .cweek b { font-size: .8125rem; }
.cweek.pos { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 45%, transparent); background: var(--pos-soft); }
.cweek.neg { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 45%, transparent); background: var(--neg-soft); }
.cweek b.cd-v { font-size: 1rem; }
.cal .wkh { text-align: center; }
/* phone: the tile picture sits under its number */
@container desk (max-width: 720px) { .t2 .t2-in { flex-direction: column; align-items: stretch; gap: 6px; } .t2 .t2-v { justify-items: start; } .t2 .tv { font-size: 1.375rem; } }

/* price chart and replay */
.pxc { display: grid; gap: 10px; margin-bottom: 14px; }
.px-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.px-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .px-t h3 { margin: 0; }
.px-sym { cursor: pointer; border: 0; font: inherit; font-size: .8125rem; display: inline-flex; align-items: center; gap: 6px; } .px-sym svg { width: 12px; height: 12px; }
.px-symf { display: inline-flex; gap: 6px; } .px-symf .inp { width: 170px; }
.px-ohlc { min-height: 1.4em; color: var(--mist); display: flex; flex-wrap: wrap; gap: 4px 8px; } .px-ohlc b { color: var(--foam); font-weight: 600; } .px-ohlc b.pos { color: var(--pos); } .px-ohlc b.neg { color: var(--neg); }
.px-box { position: relative; min-height: 300px; border-radius: 12px; background: var(--inner); overflow: hidden; }
.px-box svg { display: block; width: 100%; }
.px-grid { stroke: var(--grid); stroke-width: 1; } .px-ax { font-size: 11px; fill: var(--mist); font-family: inherit; font-variant-numeric: tabular-nums; }
.px-up { fill: var(--pos); stroke: var(--pos); } .px-dn { fill: var(--neg); stroke: var(--neg); } .wick { stroke-width: 1; }
.px-vu { fill: color-mix(in srgb, var(--pos) 28%, transparent); } .px-vd { fill: color-mix(in srgb, var(--neg) 28%, transparent); }
.px-hold { fill: color-mix(in srgb, var(--gold-mark) 9%, transparent); stroke: color-mix(in srgb, var(--gold-mark) 30%, transparent); stroke-dasharray: 3 3; }
.px-lv { stroke-width: 1.3; } .px-lv.en { stroke: var(--blue); } .px-lv.ex { stroke: var(--gold-mark); stroke-width: 1.6; } .px-lv.sl { stroke: var(--neg); stroke-dasharray: 5 4; } .px-lv.tp { stroke: var(--pos); stroke-dasharray: 5 4; }
.px-tag rect { fill: var(--inner-2); } .px-tag text { font-size: 11px; font-weight: 600; font-family: inherit; font-variant-numeric: tabular-nums; }
.px-tag.en rect { fill: var(--blue); } .px-tag.en text { fill: #fff; } .px-tag.ex rect { fill: var(--gold-mark); } .px-tag.ex text { fill: #0b1220; }
.px-tag.sl text { fill: var(--neg); } .px-tag.tp text { fill: var(--pos); } .px-tag.last.up rect { fill: color-mix(in srgb, var(--pos) 85%, #000); } .px-tag.last.dn rect { fill: color-mix(in srgb, var(--neg) 85%, #000); } .px-tag.last text { fill: #fff; }
.px-last { stroke: var(--mist); stroke-dasharray: 1 3; opacity: .7; }
.px-mk.en { fill: var(--blue); } .px-mk.ex { fill: var(--gold-mark); stroke: var(--bg); stroke-width: 2; }
.px-path { stroke-width: 1.4; stroke-dasharray: 2 4; fill: none; } .px-path.pos { stroke: var(--pos); } .px-path.neg { stroke: var(--neg); }
.px-oth { fill: none; stroke: var(--mist); stroke-width: 1.2; opacity: .6; }
.px-cross { stroke: var(--foam); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; pointer-events: none; }
.px-msg { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 300px; padding: 20px; text-align: center; color: var(--mist); font-size: .9375rem; }
.px-msg svg { color: var(--warn); } .px-msg.ld .live { animation: pxpulse 1.2s infinite; } .px-msg.ld .live::before { animation: none; } @keyframes pxpulse { 50% { opacity: .3; } }
.px-play { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-pb { min-width: 108px; } .px-scrub { flex: 1; min-width: 120px; accent-color: var(--gold-mark); }
.px-live { min-height: 1.6em; font-size: .9375rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* the radar points breathe: a ring swells out of each one, one after another */
.ed-halo { fill: none; stroke: var(--gold-mark); stroke-width: 1; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: edpulse 4s cubic-bezier(.25, .6, .35, 1) infinite; animation-delay: calc(var(--i, 0) * .65s); }
@keyframes edpulse { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

/* the marker's glow breathes on its own layer by opacity (box-shadow animation repainted the page every frame) */
.ed-m::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 14px color-mix(in srgb, var(--gold-mark) 60%, transparent); opacity: 0; animation: edm 4s ease-in-out infinite; }
@keyframes eddot { 0%, 100% { fill: var(--bg); } 40% { fill: color-mix(in srgb, var(--gold-mark) 55%, var(--bg)); } }
@keyframes edm { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ed-halo { display: none; } .ed-dot, .ed-m, .ed-m::before { animation: none; } }
.view > .sec { min-width: 0; }
.sec > * { min-width: 0; }

/* day window */
.drawer.wide { --drawer-w: 760px; }
.dd-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dd-ch { border-radius: 12px; background: var(--inner); padding: 6px 4px 0; } .dd-ch svg { display: block; width: 100%; }
.dd-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-a.pos { fill: color-mix(in srgb, var(--pos) 22%, transparent); } .dd-a.neg { fill: color-mix(in srgb, var(--neg) 22%, transparent); }
.dd-l { fill: none; stroke-width: 1.8; stroke-linejoin: round; } .dd-pk { fill: var(--gold-mark); stroke: var(--bg); stroke-width: 2; } .dd-end { stroke: var(--bg); stroke-width: 2; }
.px-grid.z { stroke: var(--line); }
.rp-b { width: 28px; height: 28px; font-size: .75rem; color: var(--gold); }
@media (max-width: 700px) { .dd-g { grid-template-columns: minmax(0, 1fr); } }

/* yearly calendar */
.ygw { overflow-x: auto; }
.yg { display: grid; grid-template-columns: 64px repeat(12, minmax(58px, 1fr)) 84px; gap: 6px; min-width: 900px; }
.yg-h { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); text-align: center; padding-bottom: 2px; }
.yg-y, .yg-t { display: grid; place-content: center; text-align: center; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); min-height: 64px; gap: 2px; }
.yg-y { font-weight: 600; } .yg-t span, .yg-c span { font-size: .75rem; color: var(--mist); }
.yg-c { display: grid; place-content: center; gap: 2px; min-height: 64px; border-radius: 12px; border: 0; font: inherit; color: var(--foam); background: var(--inner); text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.yg-c.none { cursor: default; color: var(--mist); opacity: .55; } .yg-c.fut { opacity: .3; }
.yg-c.pos { background: color-mix(in srgb, var(--pos) calc(var(--a) * 100%), var(--inner)); } .yg-c.neg { background: color-mix(in srgb, var(--neg) calc(var(--a) * 100%), var(--inner)); }
.yg-c.pos b { color: var(--foam); } .yg-c:not(.none):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.yg-c.on { box-shadow: inset 0 0 0 1.5px var(--gold-mark), 0 0 0 3px var(--gold-ring); }
.dr-b > * { min-height: min-content; } .dr-b > .tblwrap { min-height: fit-content; }

/* the way back from a trade to the day it came from */
#drTitle { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.dr-back { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border: 0; border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--gold); background: var(--gold-soft); cursor: pointer; transition: box-shadow .15s; }
.dr-back:hover, .dr-back:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-mark); } .dr-back svg { width: 14px; height: 14px; }

/* trade drawer tabs */
.dr-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--inner); overflow-x: auto; scrollbar-width: none; }
.dr-tabs button { flex: 1 0 auto; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--mist); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.dr-tabs button:hover { color: var(--foam); } .dr-tabs button[aria-selected="true"] { background: var(--gold-soft); color: var(--foam); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.dr-pane { display: flex; flex-direction: column; gap: 12px; } .dr-pane > * { flex: none; }
.dr-ta { min-height: 180px; resize: vertical; } .dr-ta.sm { min-height: 90px; }
.pxc.flat { gap: 10px; } .pxc.flat .px-box { min-height: 260px; }
.cweek .cd-n, .cweek b { white-space: nowrap; overflow: hidden; min-width: 0; }
.cweek .cd-n .v-s { display: none; } @container desk (max-width: 720px) { .cweek .cd-n .v-l { display: none; } .cweek .cd-n .v-s { display: inline; } }
/* the score marker breathes like the radar points: a ring swells out of it */
.ed-m::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold-mark); animation: edring 4s cubic-bezier(.25, .6, .35, 1) infinite; pointer-events: none; }
@keyframes edring { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ed-m::after { display: none; } }

/* the latest point on a line chart breathes */
.c-halo { fill: none; stroke-width: 1.5; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: chalo 4s cubic-bezier(.25, .6, .35, 1) infinite; animation-delay: calc(var(--i, 0) * 1s); }
@keyframes chalo { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c-halo { display: none; } }

.px-svg { touch-action: pan-y; user-select: none; } .px-box { touch-action: pan-y; } .px-box.grab, .px-box.grab .px-hit { cursor: grabbing; } .px-hit { cursor: crosshair; } .px-tag.cross rect { fill: var(--foam); } .px-tag.cross text { fill: var(--bg); }
.px-tag.off rect { fill: var(--inner-2); stroke: currentColor; stroke-dasharray: 2 2; } .px-tag.off.tp { color: var(--pos); } .px-tag.off.sl { color: var(--neg); }

/* the goal in one line */
.gsum { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px; border-radius: 14px; }
.gsum-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: .9375rem; } .gsum-t b { font-weight: 600; }
.gsum-sep { width: 1px; height: 14px; background: var(--line); }

/* page groups in the rail */
.nav-g { margin: 10px 0 2px; padding: 0 10px; color: var(--mist); opacity: .75; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav-g:first-child { margin-top: 0; }
@media (max-height: 820px) { .nav-g { margin-top: 6px; } }
@media (max-height: 700px) { .nav-g { display: none; } }
/* in the top bar the group names are left out: a thin divider keeps the groups apart */
@media (max-width: 960px) { .rail-nav .nav-g { display: block; flex: none; align-self: center; width: 1px; height: 16px; margin: 0 4px; padding: 0; overflow: hidden; color: transparent; background: var(--line); } .rail-nav .nav-g:first-child { display: none; } }

/* controls on the bare page take Bridge's floating-control surface; inside glass they keep the inner tint */
.desk .seg:not(.glass .seg):not(.gsum .seg), .desk .sel:not(.glass .sel), .desk .inp:not(.glass .inp) { background-color: var(--chrome); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.desk .sel:not(.glass .sel) { background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%); }
/* the chart's A button, as Bridge's chart tools */

/* Replay page */
.rp-g { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.rp-g > .pxc { margin-bottom: 0; }
.rp-sum { margin-bottom: 14px; align-items: stretch; } .rp-sum .btn { align-self: center; justify-self: start; }
.rp-list { display: grid; gap: 10px; position: sticky; top: 14px; max-height: calc(100dvh - 28px); overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; }
.rp-rows { display: grid; gap: 4px; overflow-y: auto; align-content: start; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.rp-r { display: grid; grid-template-columns: 24px minmax(0, 1fr) 10px auto; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--inner); color: var(--foam); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s, opacity .2s; }
.rp-r:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); } .rp-r.hot { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.rp-n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .75rem; font-weight: 700; background: var(--inner-2); color: var(--mist); }
.rp-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; } .rp-m .side { font-size: .6875rem; }
.rp-st { width: 8px; height: 8px; border-radius: 50%; background: var(--mist); opacity: .5; }
.rp-r[data-st="wait"] { opacity: .5; } .rp-r[data-st="on"] .rp-st { background: var(--gold-mark); opacity: 1; box-shadow: 0 0 0 3px var(--gold-ring); }
.rp-r.win[data-st="done"] .rp-st, .rp-r[data-st="done"]:has(.pos) .rp-st { background: var(--pos); opacity: 1; } .rp-r[data-st="done"]:has(.neg) .rp-st { background: var(--neg); opacity: 1; }
.px-seg { stroke-width: 1.6; } .px-seg.en { stroke: var(--blue); opacity: .75; } .px-seg.hot { stroke-width: 2.6; opacity: 1; }
.px-num { font-size: 11px; font-weight: 700; fill: var(--mist); font-family: inherit; } .px-num.hot { fill: var(--gold); }
.px-mk.ex.w { fill: var(--pos); } .px-mk.ex.l { fill: var(--neg); }
@container desk (max-width: 1100px) { .rp-g { grid-template-columns: minmax(0, 1fr); } .rp-list { position: static; max-height: 420px; } }
.hm { grid-template-rows: auto minmax(0, 1fr) auto auto; } .hm-g { min-height: 0; }
.hm-l { font-size: .6875rem; color: var(--mist); align-self: center; padding-right: 4px; white-space: nowrap; } .hm-l.mo { align-self: end; padding: 0; letter-spacing: .04em; }
.hm-s { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Reports */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rg { display: grid; gap: 12px; }
.rg-h { display: grid; gap: 8px; } .rg-h h3 { margin: 0; }
.rg-v { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.rg-v .spark { flex: 1; min-width: 120px; height: 56px; } .rg-big { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.rr-l { display: grid; }
.rr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--grid); font-size: .9375rem; outline: none; }
.rr:last-child { box-shadow: none; } .rr > span { color: var(--mist); } .rr b { font-weight: 600; text-align: right; }
.rr[data-tip] > span { text-decoration: underline dotted; text-decoration-color: var(--line); text-underline-offset: 3px; cursor: default; }
.hbars { display: grid; gap: 8px; width: 100%; } .hb { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.hb-t { height: 8px; border-radius: 5px; background: var(--inner-2); overflow: hidden; } .hb-t i { display: block; height: 100%; border-radius: 5px; }
.rt-h { flex-wrap: wrap; gap: 8px; }
.pt { stroke: none; opacity: .62; } .pt.w { fill: var(--pos); } .pt.l { fill: var(--neg); } .pt.b { fill: var(--mist); } .pt.cut { opacity: 1; stroke: var(--bg); stroke-width: 1; }
.pt-ring { fill: none; stroke: var(--foam); stroke-width: 1.5; pointer-events: none; }
@container desk (max-width: 1150px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container desk (max-width: 700px) { .rgrid { grid-template-columns: minmax(0, 1fr); } }

/* the day window's numbers as small pictures */
.dqg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dq { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--inner); min-width: 0; }
.dq.wide { grid-column: 1 / -1; }
.dq-h { font-size: .8125rem; color: var(--mist); }
.dq-row { display: flex; align-items: center; gap: 12px; } .dq-row > div { display: grid; gap: 4px; min-width: 0; }
.dq .semi { width: 74px; height: 42px; } .dq .donut { width: 46px; height: 46px; }
.dq-big { font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.dq-bars { display: grid; gap: 6px; } .dqb { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.dqb i { height: 8px; border-radius: 5px; } .dqb i.pos { background: var(--pos); } .dqb i.neg { background: var(--neg); } .dqb b { font-size: .875rem; }
.dq-day { position: relative; height: 22px; border-radius: 7px; background: var(--inner-2); overflow: hidden; }
.dq-day .se { position: absolute; top: 0; bottom: 0; opacity: .22; } .dq-day .tk { position: absolute; top: 4px; bottom: 4px; min-width: 2px; border-radius: 2px; background: var(--mist); }
.dq-day .tk.w { background: var(--pos); } .dq-day .tk.l { background: var(--neg); }
.dq-ax { display: flex; justify-content: space-between; color: var(--mist); margin-top: -4px; }
.dq .small b { color: var(--foam); }
.icon-btn { display: inline-grid; place-items: center; padding: 0; line-height: 0; } .icon-btn svg { display: block; }
.dr-h .icon-btn.x { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.dq .semi { width: 62px; height: 36px; flex: none; } .dq .donut { flex: none; } .dq .pills { flex-wrap: wrap; } .dq .pl { min-width: 22px; padding: 0 6px; }
.dq-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: .875rem; } .dq-line > b:first-child { font-size: 1.125rem; } .dq-line b { font-weight: 600; }

/* chart tools: ↺ reset and A auto-scale, top-left over the plot, copied from the Bridge */
.ch-tools { position: absolute; top: 6px; left: 6px; z-index: 4; display: flex; gap: 4px; }
.ch-tools button.glass { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 0; padding: 0; cursor: pointer; color: var(--mist); font: 600 .75rem/1 var(--f-sans);
  background-color: var(--glass); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: inset 0 .5px 0 var(--edge-t), inset 0 -.5px 0 var(--edge-b), 0 4px 12px var(--shadow); transition: color .2s, background-color .2s; }
.ch-tools button.glass:hover { color: var(--fg); background-color: var(--gold-soft); }
.ch-tools .ch-a.glass[aria-pressed="true"] { color: var(--gold); background-color: var(--gold-soft); }
.ch-tools button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.px-wrap { position: relative; }
.px-auto { margin: -2px 0 0; padding: 6px 10px; border-radius: 9px; font-size: .8125rem; color: var(--gold); background: var(--gold-soft); } .px-auto[hidden] { display: none; }

/* in the trade window the bar sizes take their own full row under the title */
.pxc.flat .px-h { flex-direction: column; align-items: stretch; gap: 8px; }
.pxc.flat .px-h .ctl-row { width: 100%; } .pxc.flat .px-h .seg { width: 100%; } .pxc.flat .px-h .seg button { flex: 1; }
.pxc.flat .px-ohlc { font-size: .8125rem; }
.tip { z-index: 95; }   /* above the trade and day windows (86), so a chart inside them shows its readout */

/* day window, balanced: the curve across the top, then four picture tiles, then the result and the day's timing */
.dd-g { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dqg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dq.span3 { grid-column: span 3; }
.dq-row { flex-direction: column; align-items: flex-start; gap: 8px; } .dq-row > div { width: 100%; }
.dq-sub { display: grid; gap: 2px; color: var(--mist); } .dq-sub b { color: var(--foam); font-weight: 600; }
@media (max-width: 700px) { .dqg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dq.span3 { grid-column: 1 / -1; } }
.dq-row { flex-direction: row; align-items: center; gap: 10px; } .dq .donut { width: 40px; height: 40px; } .dq .semi { width: 56px; height: 32px; }
.dqg > .dq { align-content: space-between; } .dq .split-l { margin-top: 0; font-size: .875rem; }

/* the chart's data source: where the candles come from, the ticker, its exchange; a pen when it can be changed */
.px-sym { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 4px; border: 0; border-radius: 999px; font: inherit; color: var(--foam); cursor: pointer;
  background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background-color .2s; }
.px-sym:hover, .px-sym:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--gold-mark); background: var(--gold-soft); }
.px-src { padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); }
.px-sym b { font-size: .875rem; font-weight: 600; letter-spacing: .02em; } .px-ex { font-size: .75rem; color: var(--mist); }
.px-ed { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--mist); transition: color .2s; } .px-ed svg { width: 12px; height: 12px; }
.px-sym:hover .px-ed { color: var(--gold); }
.px-sym:not([data-act]) , .px-sym:disabled { cursor: default; }

/* Reports overview, in order: one result band across the top, then four cards of one height */
.rhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 28px; align-items: center; margin-bottom: 14px; }
.rhero .rg-big { font-size: 2.4rem; margin: 2px 0 14px; }
.rk-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rk { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--inner); outline: none; } .rk span { font-size: .8125rem; color: var(--mist); } .rk b { font-size: 1rem; font-weight: 600; }
.rk[data-tip] span { text-decoration: underline dotted; text-decoration-color: var(--line); text-underline-offset: 3px; }
.rh-r .spark { height: 150px; width: 100%; }
.rgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.rg { grid-template-rows: auto 64px 1fr auto; align-content: start; }
.rg-v { display: flex; align-items: center; gap: 12px; min-height: 64px; height: 64px; }
.rv-n { display: grid; gap: 4px; } .rv-n > b { font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.rg .semi { width: 78px; height: 44px; flex: none; } .rg .hbars { align-self: center; }
.rg-f { margin: 0; padding-top: 10px; box-shadow: inset 0 1px 0 var(--grid); } .rg-f.warn { color: var(--warn); }
@container desk (max-width: 1250px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container desk (max-width: 760px) { .rhero { grid-template-columns: minmax(0, 1fr); } .rh-r .spark { height: 90px; } }
@container desk (max-width: 640px) { .rgrid { grid-template-columns: minmax(0, 1fr); } .rk-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mp-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k l n" "b b v"; align-items: center; gap: 6px 10px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--grid); }
.mp-r:last-child { box-shadow: none; } .mp-r .chip { grid-area: k; font-size: .75rem; padding: 1px 8px; } .mp-r > b:not(.num) { grid-area: l; font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-r > .small { grid-area: n; } .mp-b { grid-area: b; height: 8px; border-radius: 5px; background: var(--inner-2); overflow: hidden; } .mp-b i { display: block; height: 100%; border-radius: 5px; } .mp-b i.pos { background: var(--pos); } .mp-b i.neg { background: var(--neg); }
.mp-r > b.num { grid-area: v; font-size: .9375rem; font-weight: 600; } h3.pos { color: var(--pos); } h3.neg { color: var(--neg); }

/* segmented controls: one gold thumb that slides to the new choice; the choice's label lifts as it lands */
.seg { position: relative; isolation: isolate; }
.seg > .seg-th { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark), 0 0 14px color-mix(in srgb, var(--gold-mark) 22%, transparent);
  transition: transform .38s cubic-bezier(.3, .8, .25, 1), width .38s cubic-bezier(.3, .8, .25, 1), height .2s; pointer-events: none; }
.seg.has-th > button[aria-pressed="true"], .seg.has-th > button[aria-selected="true"] { background: transparent; box-shadow: none; }
.seg > button { transition: color .25s, transform .2s; } .seg > button:active { transform: scale(.94); }
.seg > button.seg-pop { animation: segpop .42s cubic-bezier(.3, .8, .25, 1); }
@keyframes segpop { 0% { transform: scale(.92); } 60% { transform: scale(1.05); } 100% { transform: none; } }
.dr-tabs button:active, .tchip.pick:active, .btn:active { transform: scale(.96); } .btn { transition: transform .15s, box-shadow .25s, background-color .25s; }
@media (prefers-reduced-motion: reduce) { .seg > .seg-th { transition: none; } .seg > button.seg-pop { animation: none; } }
.rh-r { align-self: stretch; display: flex; } .rcum { width: 100%; min-height: 150px; } .rcum svg { display: block; width: 100%; height: 100%; }
.rg-v[data-tip] { cursor: default; border-radius: 10px; outline: none; } .rg-v[data-tip]:hover { background: var(--inner); } .rk[data-tip] { cursor: default; } .rk[data-tip]:hover { box-shadow: inset 0 0 0 1px var(--gold-mark); }

/* row selection: round, iOS style; the tick draws in and the ring pops */
.ckb { width: 19px; height: 19px; border-radius: 50%; transition: background-color .2s, box-shadow .2s, transform .2s; }
.ckb:checked { background: var(--gold-mark); box-shadow: inset 0 0 0 1.5px var(--gold-mark), 0 0 0 3px var(--gold-ring); animation: ckpop .32s cubic-bezier(.3, .9, .3, 1.3); }
.ckb:checked::after { width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid #0b1220; border-bottom: 2px solid #0b1220; transform: rotate(-45deg); animation: cktick .28s ease-out both .06s; }
.ckb:active { transform: scale(.88); }
@keyframes ckpop { 0% { transform: scale(.7); } 70% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes cktick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .ckb:checked, .ckb:checked::after { animation: none; } }
/* reviewed: an eye, not a circle, so it does not read as a second selection box */
.rv-eye { display: inline-grid; place-items: center; color: var(--mist); opacity: .45; } .rv-eye svg { display: block; }
.rv-eye.ok { color: var(--gold); opacity: 1; } .rv-eye.h { opacity: .8; }
th.c, td.c { text-align: center; }
/* Edge score: one column at every width (the discipline card's two-column rule does not apply), and an entrance like the other boxes */
.score.edge { grid-template-columns: minmax(0, 1fr) !important; }
@media (prefers-reduced-motion: no-preference) {
  .play .rd-r, .play .rd-a { animation: fade .5s ease-out both; }
  .play .rd-p { animation: rdin 1s cubic-bezier(.2, .8, .2, 1.15) both .2s; }
  .play .ed-dot, .play .ed-halo { animation: edin .45s cubic-bezier(.3, .9, .3, 1.4) both; animation-delay: calc(var(--i, 0) * 90ms + .7s); transform-box: fill-box; transform-origin: center; }
  .play .rd-l text { animation: fade .5s ease-out both; animation-delay: calc(.4s + var(--i, 0) * 60ms); }
  .play .ed-trk { animation: growx .8s cubic-bezier(.2, .7, .2, 1) both .3s; transform-origin: left center; }
  .play .ed-m { animation: edslide 1.1s cubic-bezier(.2, .8, .2, 1) both .5s; }
  .play .ed-s .vlabel { animation: fade .5s ease-out both 1.1s; }
}
@keyframes edin { from { transform: scale(0); opacity: 0; } }
@keyframes edslide { from { left: 0; opacity: 0; } 15% { opacity: 1; } }


/* dashboard: the Reports in short */
.rs-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rs-c { display: grid; gap: 8px; align-content: start; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .25s; }
.rs-c:hover { transform: translateY(-2px); } .rs-t { font-size: .875rem; color: var(--mist); } .rs-c > b { font-size: 1.375rem; font-weight: 600; line-height: 1.15; }
.rs-hb { display: grid; gap: 5px; height: 36px; align-content: center; } .rs-hb span { display: block; height: 8px; border-radius: 5px; background: var(--inner-2); overflow: hidden; }
.rs-hb i { display: block; height: 100%; border-radius: 5px; } .rs-hb .pos i { background: var(--pos); } .rs-hb .neg i { background: var(--neg); }
.rs-day { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 36px; align-items: center; } .rs-day i { height: 14px; border-radius: 2px; background: var(--inner-2); }
.rs-day i.pos { background: color-mix(in srgb, var(--pos) 45%, transparent); } .rs-day i.neg { background: color-mix(in srgb, var(--neg) 45%, transparent); } .rs-day i.hi { background: var(--pos); height: 26px; } .rs-day i.lo { background: var(--neg); height: 26px; }
.rs-wk { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 36px; align-items: end; } .rs-wk i { display: block; border-radius: 2px; } .rs-wk i.pos { background: var(--pos); } .rs-wk i.neg { background: var(--neg); }
@container desk (max-width: 1100px) { .rs-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the six tiles and the two scores read as one block: same gap as between the tiles */
.kpi-sec { gap: 12px; } .kpi-sec .scores { gap: 12px; }
.kpi-sec .score { border-radius: 14px; }
/* dashboard: the month beside the latest trades, the calendar taking the larger share */
.cal-rec { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 14px; align-items: stretch; container: calrec / inline-size; }
.cal-rec > .card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .cal-rec > .card .tblwrap { flex: 1; overflow: auto; }
.cal-rec .calbox .cal { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(64px, .8fr); }
.cal-rec .calbox .cday { min-height: 74px; }
@container desk (max-width: 1100px) { .cal-rec { grid-template-columns: minmax(0, 1fr); } .cal-rec > .card .tblwrap { max-height: none; } }
.cal-rec .cweek .chip, .cal-rec .cweek .cd-s { display: none; } .cal-rec .cweek { align-content: center; }
.cal-rec > .card .tbl { font-size: .875rem; } .cal-rec > .card .tbl th, .cal-rec > .card .tbl td { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.cal-rec > .card .tbl td:first-child, .cal-rec > .card .tbl th:first-child { padding-left: 10px; }
.cal-rec .cweek .v-l { display: none; } .cal-rec .cweek .v-s { display: inline; } .cal-rec .cweek b.cd-v { font-size: .9375rem; }

/* at rest the ladder price wears the sign of the total; while digits roll it flashes the way it moved (Bridge) */
.gl .lad-px.px-c-up { color: var(--pos); } .gl .lad-px.px-c-dn { color: var(--neg); }
/* dashboard: the charts row splits like the calendar row beneath it, so the column edges line up */
.ch2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* show more years: a quiet bar across the foot of the card, its chevron turning when open */
.yg-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 12px; border: 0; border-radius: 12px; font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--mist); background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: color .2s, box-shadow .2s, background-color .2s; }
.yg-more:hover, .yg-more:focus-visible { outline: none; color: var(--foam); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.yg-more svg { color: var(--gold); transition: transform .25s; } .yg-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* calendar page: summary with change from last month beside the month curve */
.cal-sum { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 14px; align-items: stretch; }
.cal-sum .wk-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; align-content: stretch; } .cal-sum .wk { display: grid; grid-template-rows: auto auto auto; gap: 2px; align-content: center; min-width: 0; }
.cal-sum .wk-go { border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .2s, box-shadow .25s; } .cal-sum .wk-go:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.cal-sum .wk { padding: 12px 14px; gap: 4px; } .cal-sum .wk > .small { font-size: .9375rem; }
.cal-sum .wk > b { font-size: 1.5rem; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-sum .dlt { font-size: .875rem; display: block; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container desk (max-width: 1200px) { .cal-sum .wk > b { font-size: 1.25rem; } }
@container desk (max-width: 640px) { .cal-sum .wk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dlt { font-size: .8125rem; font-weight: 600; } .dlt.pos { color: var(--pos); } .dlt.neg { color: var(--neg); } .dlt .mut { font-weight: 400; }
.cal-curve { display: grid; grid-template-rows: auto 1fr; gap: 6px; } .cal-cv { min-height: 140px; } .cal-cv svg { display: block; width: 100%; height: 100%; }
@container desk (max-width: 1000px) { .cal-sum { grid-template-columns: minmax(0, 1fr); } }
.cal-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
/* colour by trades: one gold that deepens */
.cday.heat { background: color-mix(in srgb, var(--gold-mark) calc(var(--a, .2) * 100%), var(--inner)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-mark) 40%, transparent); }
.cday.warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); } .cd-v.warn { color: var(--warn); } .cd-v.gold { color: var(--foam); }
/* a release on the day */
.cd-news { position: absolute; left: 7px; bottom: 6px; padding: 0 5px; border-radius: 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.cd-news.t2 { color: #fff; background: color-mix(in srgb, var(--neg) 80%, transparent); } .cd-news.t1 { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.cday.news .cd-s { padding-left: 0; } .cday.news:has(.cd-s:not(:empty)) .cd-news { bottom: auto; top: 7px; left: auto; right: 26px; }
.cal.mini .cd-news { display: none; }
@container desk (max-width: 720px) { .cd-news { font-size: .5rem; padding: 0 3px; } }
/* weekday totals */
.cdow-h { grid-column: 1 / -1; margin-top: 6px; padding: 8px 4px 0; box-shadow: inset 0 1px 0 var(--line); font-size: .75rem; font-weight: 600; color: var(--mist); }
.cdow { display: grid; gap: 2px; align-content: center; min-height: 54px; padding: 6px 8px; border-radius: 10px; background: var(--inner); min-width: 0; }
.cdow.pos { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 40%, transparent); } .cdow.neg { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 40%, transparent); }
.cdow b { font-size: .9375rem; font-weight: 600; } .cdow.sum { background: transparent; } .cdow .cd-v .v-s { display: none; }
@container desk (max-width: 720px) { .cdow .cd-v .v-l { display: none; } .cdow .cd-v .v-s { display: inline; } .cdow .cd-s { display: none; } .cdow { min-height: 40px; padding: 4px; } }
/* legend */
.cal-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; color: var(--mist); } .cal-lg > span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .lg.pos { background: var(--day-pos); box-shadow: inset 0 0 0 1px var(--pos); } .lg.neg { background: var(--day-neg); box-shadow: inset 0 0 0 1px var(--neg); }
.lg.warn { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); } .lg.heat { width: 40px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold-mark) 12%, var(--inner)), var(--gold-mark)); }
.lg-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: .6875rem; font-weight: 800; } .lg-ic.gold { color: var(--gold); } .lg-ic.brk { color: var(--bg); background: var(--neg); }
.lg-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-mark); } .cd-news.lg-n { position: static; } .cal-lg-sep { width: 1px; height: 14px; background: var(--line); }
/* news days */
.nw-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; align-items: start; }
.nw-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .nw-v { grid-column: 1 / -1; margin: 0; }
.nw-c { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--inner); } .nw-c.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neg) 45%, transparent); }
.nw-c > b { font-size: 1.375rem; font-weight: 600; } .nw-k { display: grid; gap: 2px; margin-top: 6px; color: var(--mist); } .nw-k b { color: var(--foam); font-weight: 600; } .nw-k b.pos { color: var(--pos); } .nw-k b.neg { color: var(--neg); }
.nw-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; width: 100%; padding: 9px 4px; border: 0; background: none; color: var(--foam); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; box-shadow: inset 0 -1px 0 var(--grid); }
.nw-r:hover { background: var(--inner); } .nw-r .cd-news { position: static; } .nw-r > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container desk (max-width: 1000px) { .nw-g { grid-template-columns: minmax(0, 1fr); } }
@container desk (max-width: 640px) { .nw-r { grid-template-columns: auto minmax(0, 1fr) auto; } .nw-r > span:nth-child(3), .nw-r > span:nth-child(4) { display: none; } }
/* phone: a release becomes a small dot in the corner, the name stays in the tooltip and the list */
@container desk (max-width: 560px) { .cal:not(.mini) .cd-news { top: auto !important; bottom: 4px !important; left: 4px !important; right: auto !important; width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: none; } .cal:not(.mini) .cd-news.t1 { background: var(--warn); } }
/* both news cards share one height: the comparison stretches, its verdict sits at the foot */
.nw-g { align-items: stretch; } .nw-cmp { grid-template-rows: 1fr auto; align-items: stretch; } .nw-v { align-self: end; }
.nw-g > .card:last-child { display: flex; flex-direction: column; } .nw-g > .card:last-child .nw-r:last-child { box-shadow: none; }
.nw-foot { margin: auto 0 0; padding-top: 10px; box-shadow: inset 0 1px 0 var(--grid); }
/* month title: centred between its arrows; the arrows are true circles with the chevron in the middle */
.cal-ttl { justify-content: center; }
.cal-h .navb { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: none; } .cal-h .navb svg { display: block; }
.cal-ttl { height: 36px; padding-top: 3px; padding-bottom: 0; line-height: 1; }

/* day window: each tile explains itself on hover; the session bands and every trade on the 24-hour strip too */
.dqg .dq[data-tip] { cursor: default; outline: none; transition: box-shadow .2s, background-color .2s; } .dqg .dq[data-tip]:hover, .dqg .dq.is-hot { box-shadow: inset 0 0 0 1px var(--gold-mark); }
.dq-day .se-hit { position: absolute; top: 0; bottom: 0; z-index: 1; outline: none; } .dq-day .tk { z-index: 2; outline: none; transition: transform .15s; } .dq-day .tk:hover, .dq-day .tk.is-hot { transform: scaleY(1.5); box-shadow: 0 0 0 1px var(--foam); }
/* and it plays in like the rest of the app: tiles rise, gauges sweep, bars grow, trades land one by one */
@media (prefers-reduced-motion: no-preference) {
  .dqg.play > .dq { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; } .dqg.play > .dq:nth-child(2) { animation-delay: .06s; } .dqg.play > .dq:nth-child(3) { animation-delay: .12s; } .dqg.play > .dq:nth-child(4) { animation-delay: .18s; } .dqg.play > .dq:nth-child(5) { animation-delay: .24s; } .dqg.play > .dq:nth-child(6) { animation-delay: .3s; }
  .dqg.play .semi .sg, .dqg.play .donut .sg { animation: sgin 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms + .25s); }
  .dqg.play .splitbar .w, .dqg.play .splitbar .l, .dqg.play .dqb i { animation: growx .8s cubic-bezier(.2, .7, .2, 1) both .3s; transform-origin: left center; }
  .dqg.play .dq-day .tk { animation: tkin .35s cubic-bezier(.3, .9, .3, 1.3) both; animation-delay: calc(min(var(--i, 0), 40) * 18ms + .45s); }
  .dqg.play .dq-big, .dqg.play .dq-line > b { animation: fade .5s ease-out both .35s; }
}
@keyframes tkin { from { transform: scaleY(0); opacity: 0; } }

/* scroll fade, copied from the Bridge record tables: while a box has more to scroll, its last ~40px fade out
   (to 8% at the very edge) so the next row shows there is more; the class is set from the scroll position */
.sf-y { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); }
/* once a box is scrolled down, the top edge fades too: rows going up melt away to clear under the header (a mask, so no extra blur cost) */
.sf-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-t, 28px)); mask-image: linear-gradient(to right, transparent, #000 var(--fade-t, 28px)); }
.sf-l.sf-x { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-t, 28px), #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); mask-image: linear-gradient(to right, transparent, #000 var(--fade-t, 28px), #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); }
.sf-t { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-t, 28px)); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-t, 28px)); }
.sf-t.sf-y { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-t, 28px), #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-t, 28px), #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); }
.sf-x { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); mask-image: linear-gradient(to right, #000 calc(100% - var(--fade, 40px)), rgba(0,0,0,.08)); }

/* motion for the boxes that only rose before: their rows slide in one by one, small bars grow, big values fade up */
@media (prefers-reduced-motion: no-preference) {
  .play .rr, .play .rk, .play .rp-r, .play .kvg > div, .play .pb-st > div, .play .pb-cmp .kv, .play .pb-vr, .play .pb-empty { animation: row .4s ease-out both; animation-delay: calc(var(--r, 0) * 35ms + 140ms); }
  .play .rs-hb i, .play .gauge2 i, .play .pb-vb i { animation: growx .8s cubic-bezier(.2, .7, .2, 1) both .25s; transform-origin: left center; }
  .play .rs-day i, .play .rs-wk i { animation: growy .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--r, 0) * 22ms + .2s); transform-origin: 50% 100%; }
  .play .rs-wk i[style*="align-self:start"] { transform-origin: 50% 0; }
  .play .rs-c > b, .play .wk > b, .play .wk > .dlt, .play .acard-h, .play .pb-h, .play .pb-d, .play .store-st { animation: fade .5s ease-out both .15s; }
}

/* charts and lists that now play when their box comes in: scatter dots sweep in left to right, breakdown bars grow
   out of the centre line, the month curve draws like the other curves, calendar days ripple in on a diagonal */
@media (prefers-reduced-motion: no-preference) {
  .play .pt-layer { animation: ptsweep 1.1s cubic-bezier(.3, .6, .25, 1) .15s both; }
  .play .pt-band { animation: fade .6s ease-out both; }
  .play .bkbar .fill { animation: growx .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--r, 0) * 45ms + .2s); }
  .bkbar .fill.r { transform-origin: left center; } .bkbar .fill.l { transform-origin: right center; }
  .play .cal-cv .dd-a { animation: fade .8s ease-out .5s both; }
  .play .cal-cv .dd-end, .play .cal-cv .c-halo { animation: fade .3s ease-out 1.2s both; }
  .play .cal .cday { animation: row .45s ease-out both; animation-delay: calc(var(--r, 0) * 30ms + 80ms); }
  .play .cal .cweek { animation: row .45s ease-out both; animation-delay: calc(var(--r, 0) * 30ms + 140ms); }
  .play .ptn .wk { animation: row .4s ease-out both; animation-delay: calc(var(--r, 0) * 60ms + .5s); }
}
@keyframes ptsweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.pt-layer { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; }
/* the short-holds tile on the points page runs the full width so its three numbers sit on one line */
.ptn .wk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ptn .wk.w2 { grid-column: 1 / -1; } .ptn .wk { padding: 10px 12px; gap: 3px; } .ptn .wk .small { font-size: .875rem; } .ptn .wk b { font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ptn .wk .sub { font-size: .875rem; color: var(--mist); line-height: 1.45; } .ptn .wk .sub .nw, .ptn .wk .sub .num { white-space: nowrap; }

/* summary & advice card: headline, the one thing to fix and the one to keep, the rule findings, then Claude's read */
.adv { display: grid; gap: 12px; }
.adv .cb-h .r { margin-left: auto; }
.adv-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } .adv-hd > b { font-size: 1.5rem; font-weight: 600; line-height: 1.15; } .adv-hd .mut { font-size: .9375rem; }
.adv-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .9375rem; } .adv-pick b { font-weight: 600; }
.adv .nudges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .adv .nudge { font-size: .9375rem; }
@container desk (max-width: 860px) { .adv .nudges { grid-template-columns: minmax(0, 1fr); } }
.adv .adv-more { margin-top: 0; }
.ai-ic { width: 1.05em; height: 1.05em; flex: none; color: var(--gold); } .ai-btn .ai-ic { width: 16px; height: 16px; } .ai-btn[disabled] { opacity: .6; cursor: default; }
.lb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-out { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--inner); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.ai-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ai-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--gold); } 
.ai-b { font-size: .9375rem; line-height: 1.65; } .ai-b h4 { margin: 10px 0 4px; font-size: .9375rem; font-weight: 600; color: var(--foam); } .ai-b h4:first-child { margin-top: 0; }
.ai-b p { margin: 0 0 6px; } .ai-b ul, .ai-b ol { margin: 0 0 6px; padding-left: 20px; } .ai-b li { margin: 2px 0; } .ai-b b { color: var(--foam); }
.ai-wait { display: flex; align-items: center; gap: 8px; color: var(--mist); margin: 0; }
.ai-out .note.neg { color: var(--neg); } .ai-out .note.warn { color: var(--warn); }
@media (prefers-reduced-motion: no-preference) { .play .adv-hd, .play .adv-pick { animation: fade .5s ease-out both .15s; } .play .adv .nudge { animation: row .4s ease-out both; animation-delay: calc(var(--r, 0) * 50ms + .2s); } }

/* reports overview: on a wide card the gauge and its number sit together on the left and the split fills the rest */
.rg { container: rgc / inline-size; }
.rg-v:has(.semi) { justify-content: flex-start; gap: 18px; }
.rv-dist { display: none; flex: 1; min-width: 0; gap: 8px; align-content: center; }
.rv-bar { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; background: var(--inner-2); }
.rv-bar i { display: block; min-width: 3px; transform-origin: left center; } .rv-bar .w { background: var(--pos); } .rv-bar .b { background: var(--gold-mark); } .rv-bar .l { background: var(--neg); }
.rv-lg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; color: var(--mist); } .rv-lg b { color: var(--foam); font-weight: 600; }
.rv-lg .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } .rv-lg .sw.w { background: var(--pos); } .rv-lg .sw.b { background: var(--gold-mark); } .rv-lg .sw.l { background: var(--neg); }
@container rgc (min-width: 440px) {
  .rg-v:has(.rv-dist) { justify-content: flex-start; gap: 22px; }
  .rv-dist { display: grid; } .rg-v:has(.rv-dist) .pills { display: none; }
  .rg .rg-v:has(.rv-dist) .rv-n > b { font-size: 1.625rem; }
}
.adv-sp { width: 1px; height: 16px; background: var(--line); margin: 0 4px; } @container desk (max-width: 640px) { .adv-sp { flex-basis: 100%; height: 0; margin: 0; } }

/* the rest of the findings: a box that slides open (rows 0fr → 1fr), its cards easing in one after another;
   the box and its button share one wrapper so the closed box adds no gap */
.adv-xw { display: grid; margin-top: -12px; } .adv-xw .adv-more { margin-top: 12px; }
.adv-x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.adv-x > div { min-height: 0; overflow: hidden; } .adv-x .nudges { padding-top: 8px; }
.adv-x.open { grid-template-rows: 1fr; }
.adv-x .nudge { opacity: 0; transform: translateY(6px); transition: opacity .3s ease-out, transform .35s cubic-bezier(.2, .7, .2, 1); }
.adv-x.open .nudge { opacity: 1; transform: none; transition-delay: calc(var(--j, 0) * 45ms + 90ms); }
@media (prefers-reduced-motion: reduce) { .adv-x, .adv-x .nudge { transition: none; } }

/* ⋯ options, as the Bridge record options: one button in a header, one frosted panel for the page */
.lm { flex: none; margin-left: auto; display: inline-flex; }
.cb-h .r .lm, .ctl-row .lm, .cb-h .linkbtn + .lm { margin-left: 6px; }
.lm-b.btn.sm { width: 32px; min-height: 30px; height: 30px; padding: 0; display: grid; place-items: center; color: var(--mist); }
.lm-b[aria-expanded="true"] { color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.lm-p { position: fixed; z-index: 96; min-width: 210px; padding: 6px; border-radius: 12px; display: grid; gap: 2px; }
.lm-p.glass { position: fixed; background: var(--menu); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: var(--menu-sh); }
.lm-p[hidden] { display: none; }
.lm-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--foam); font: inherit; font-size: .875rem; text-align: left; white-space: nowrap; cursor: pointer; }
.lm-i:hover, .lm-i:focus-visible { background: var(--inner-2); outline: none; }
.lm-i::before { content: ''; width: 16px; height: 16px; flex: none; background: var(--gold); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.lm-i[data-ic="copy"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E"); }
.lm-i[data-ic="csv"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E"); }
.lm-i[data-ic="md"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
.lm-i[data-ic="clear"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.lm-s { height: 1px; margin: 4px 6px; background: var(--line); }
.lm-i.lm-d { color: var(--neg); } .lm-i.lm-d::before { background: var(--neg); }
.lm-i.armed { background: color-mix(in srgb, var(--neg) 12%, transparent); }
.dr-big .lm { margin-left: auto; align-self: center; }
/* the first-visit terms, as the Bridge */
.terms { z-index: 210; }
.gate-l { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .9375rem; line-height: 1.6; } .gate-l b { color: var(--foam); }
.gate-c { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); font-size: .9375rem; line-height: 1.5; cursor: pointer; flex: 1 1 100%; }
.gate-c input { margin-top: 3px; accent-color: var(--gold-mark); width: 16px; height: 16px; flex: none; }
.gate-acc .r .btn:disabled { opacity: .45; cursor: not-allowed; }
.gate-in a { color: var(--gold); }
.docs { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--grid); }
.docs-l { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .875rem; } .docs-l a { color: var(--gold); text-decoration: none; } .docs-l a:hover { text-decoration: underline; }
.docs .row2 { align-items: center; }

.foot-l { margin-left: 0; font-size: .8125rem; white-space: nowrap; }

/* reminders that lead somewhere: the whole row is the button, a chevron on the right */
.nudge.nu-go { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s; }
.nudge.nu-go > span { flex: 1; min-width: 0; }
.nu-arr { font-style: normal; color: var(--mist); font-size: 1.125rem; line-height: 1.2; margin-left: 8px; transition: transform .2s, color .2s; }
.nudge.nu-go:hover .nu-arr, .nudge.nu-go:focus-visible .nu-arr { color: var(--gold); transform: translateX(3px); }
.nudge.nu-go:hover, .nudge.nu-go:focus-visible { outline: none; transform: translateX(2px); }
.nudge.nu-go.n-mut:hover, .nudge.nu-go.n-mut:focus-visible { background: var(--inner-2); }
.nudge-top .nu-xw { margin-top: -14px; } .nudge-top .adv-x .nudges { padding-top: 6px; } .nudge-top .nu-xw .adv-more, .nudge-top .nu-more { margin-top: 8px; }

/* reports: larger type for the summary boxes, the card rows and the split legends */
.rk { gap: 4px; padding: 12px 14px; } .rk span { font-size: .875rem; } .rk b { font-size: 1.25rem; line-height: 1.2; }
.rr { font-size: .9375rem; padding: 10px 0; }
.rv-lg { font-size: .9375rem; }
.rg .hb .small, .rg .hbars .small { font-size: .9375rem; }
.rhero .rg-big { font-size: 2.6rem; }
@container desk (max-width: 640px) { .rk b { font-size: 1.125rem; } }
@container desk (max-width: 720px) { .tile .tl, .tile .tsub { white-space: normal; overflow: visible; } }

/* Replay: the day at a glance, six tiles in the month-summary look */
.rp-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.rp-tiles .wk { display: grid; grid-template-rows: auto auto auto; gap: 4px; padding: 12px 14px; min-width: 0; }
.rp-tiles .wk > .small { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tiles .wk > b { font-size: 1.5rem; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tiles .dlt { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container desk (max-width: 900px) { .rp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh .ctl-row .seg button { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
@container desk (max-width: 560px) { .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-tiles .wk > b { font-size: 1.25rem; } }
/* Replay: the trade list takes the chart card's height (size containment keeps the list from setting the row's height);
   its rows scroll inside, with the scroll fade; stacked on narrow screens it goes back to a fixed height */
.rp-g { align-items: stretch; }
.rp-g > .rp-list { position: relative; top: auto; max-height: none; contain: size; align-self: stretch; }
@container desk (max-width: 1100px) { .rp-g > .rp-list { contain: none; max-height: 420px; } }

/* weekly review: both cards one height; the left one carries tiles, the seven days, goals and the standout trades */
.rv-g { align-items: stretch; }
.rv-f { align-content: start; }
.rv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rv-tiles .wk { display: grid; gap: 4px; padding: 12px 14px; min-width: 0; }
.rv-tiles .wk > .small { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tiles .wk > b { font-size: 1.5rem; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-tiles .dlt { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 10px; border-radius: 12px; background: var(--inner); }
.rv-d { display: grid; grid-template-rows: auto 72px auto; justify-items: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; transition: background-color .15s; min-width: 0; }
.rv-d:hover:not([disabled]), .rv-d:focus-visible { background: var(--inner-2); outline: none; } .rv-d[disabled] { cursor: default; }
.rv-dv { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.rv-db { position: relative; width: 60%; max-width: 28px; height: 100%; } .rv-db::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 1px; background: var(--line); }
.rv-db i { position: absolute; left: 0; right: 0; border-radius: 4px; } .rv-db i.up { bottom: 50%; background: var(--pos); } .rv-db i.dn { top: 50%; background: var(--neg); }
.rv-dl { font-size: .8125rem; color: var(--mist); }
.rv-goals { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-rows { display: grid; gap: 6px; } .rv-row .chip { flex: none; } .rv-row b { font-weight: 600; }
.rv-q { align-content: start; }
@container desk (max-width: 640px) { .rv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-tiles .wk > b { font-size: 1.25rem; } }
@media (prefers-reduced-motion: no-preference) { .play .rv-d { animation: row .4s ease-out both; animation-delay: calc(var(--r, 0) * 45ms + .15s); } }
.rv-f { container: rvf / inline-size; }
@container rvf (max-width: 560px) { .rv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nudge.nu-go.rv-row > .chip { flex: 0 0 auto; }
.rv-q { grid-template-rows: repeat(3, minmax(0, 1fr)); align-content: stretch; }
.rv-q .fld { grid-template-rows: auto minmax(0, 1fr); } .rv-q textarea { height: 100%; min-height: 96px; resize: none; }

/* trades page, day cards: each figure says what it means underneath */
.kv2 { gap: 2px; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; outline: none; transition: background-color .15s; } .kv2[data-tip]:hover, .kv2[data-tip]:focus-visible { background: var(--inner); }
.kv2 b { font-size: 1.125rem; } .kv2 small { font-size: .8125rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv2 small.warn, .kv2 b.warn { color: var(--warn); }
.dc-st { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
/* long days: ten rows, the rest scroll inside with the header kept on top; the fade starts under the header */
.dc-sc { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dc-sc.h-out thead, .dc-sc.h-out thead tr { visibility: collapse; }
.dc-hd { overflow: hidden; } .dc-hd table { table-layout: fixed; } .dc-hd th { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.tbl th svg, .tbl th button { vertical-align: middle; }
/* year grid: every cell two lines, one height; the count never wraps */
.yg-c { place-content: initial; align-content: center; justify-items: center; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 72px; padding: 0 4px; }
.yg-c b, .yg-c span, .yg-t span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv2 .pos { color: var(--pos); } .kv2 .neg { color: var(--neg); }
.dcard > .dc-hd + .dc-sc { margin-top: -10px; }
.kv2 b .pos, .kv2 b .neg { font-size: inherit; }

/* rail: the save status stays on one line in any language; when the window is short the rail scrolls with the fade */
.rail .store-st { white-space: nowrap; overflow: hidden; } .rail .store-st > span:not(.live) { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 961px) and (max-height: 920px) { .rail { gap: 14px; } .rail-nav a { padding-top: 4px; padding-bottom: 4px; } }
@media (min-width: 961px) and (max-height: 840px) { .rail { gap: 10px; padding-top: 16px; padding-bottom: 12px; } .nav-g { margin: 4px 0 0; } .rail-nav a { padding-top: 2px; padding-bottom: 2px; } .rail-foot { gap: 8px; padding-top: 8px; } }
@media (min-width: 961px) and (max-height: 780px) { .nav-g { margin: 2px 0 0; font-size: .625rem; line-height: 1.2; } .rail .brand .mark { width: 30px; height: 30px; } }

/* totals by weekday: one tile shape for every day and the month; name, total, trades · win %, a win-rate bar */
.cdow { position: relative; grid-template-rows: auto auto auto auto; gap: 3px; align-content: start; min-height: 0; padding: 10px 12px 12px; border-radius: 12px; }
.cdow.pos { background: color-mix(in srgb, var(--pos) 9%, var(--inner)); } .cdow.neg { background: color-mix(in srgb, var(--neg) 9%, var(--inner)); }
.cdow.none { opacity: .55; }
.cdow.sum { background: var(--inner); box-shadow: inset 0 0 0 1px var(--gold-mark); }
.cdw-l { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--mist); white-space: nowrap; }
.cdow b { font-size: 1.125rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdow .cd-s { font-size: .8125rem; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdw-bar { display: block; height: 4px; margin-top: 4px; border-radius: 3px; background: color-mix(in srgb, var(--neg) 45%, transparent); overflow: hidden; }
.cdw-bar i { display: block; height: 100%; border-radius: 3px; background: var(--pos); transform-origin: left center; }
.cdw-m { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: .6875rem; font-weight: 600; }
.cdw-m.pos { color: var(--pos); background: var(--pos-soft); } .cdw-m.neg { color: var(--neg); background: var(--neg-soft); }
@container desk (max-width: 720px) { .cdow { padding: 6px; gap: 2px; } .cdow b { font-size: .875rem; } .cdw-m { display: none; } .cdw-l { font-size: .75rem; } }
.cdow.sum { padding-left: 10px; padding-right: 10px; } .cdow.sum b { font-size: 1rem; }
@container desk (max-width: 720px) { .cdow { padding: 5px 3px 6px; border-radius: 8px; justify-items: center; text-align: center; } .cdow .cdw-l, .cdow .cd-s { display: none; } .cdow b, .cdow.sum b { font-size: .6875rem; } .cdw-bar { width: 100%; margin-top: 2px; height: 3px; } }

/* calendar page: one type scale for every number in the grid (days, weeks, weekday totals, the month), sized from the
   calendar's own width so the longest figure (+$1,417.48) fits a column; narrower than that it switches to the short form */
.calfull { container: calb / inline-size; --cv: 1.25rem; --cs: clamp(.6875rem, calc(1.1cqi + 1px), .875rem); }
.calfull .cd-v, .calfull .cweek b.cd-v, .calfull .cdow b, .calfull .cdow.sum b { font-size: var(--cv); line-height: 1.2; }
.calfull .cd-s, .calfull .cweek .cd-s, .calfull .cdow .cd-s, .calfull .cdw-l, .calfull .cweek .cd-n, .calfull .cday .cd-n { font-size: var(--cs); }
.calfull .cdow .cd-v, .calfull .cdow b { overflow: hidden; text-overflow: clip; }
@container calb (max-width: 980px) {
  .calfull .cdw-m { width: 7px; height: 7px; padding: 0; font-size: 0; border-radius: 50%; }
  .calfull .cdw-m.pos { background: var(--pos); } .calfull .cdw-m.neg { background: var(--neg); }
}
/* the short form (−523 for −$522.89) is chosen by fitText: only when the full figures would have to shrink too far */
.calfull.cal-short > * { --cv: clamp(.875rem, 2.3cqi, 1.125rem); } .calfull.cal-short .cds-n { display: none; } .calfull.cal-short .cweek .cd-s { display: none; }
.calfull.cal-short .cd-v .v-l, .calfull.cal-short .cdow .cd-v .v-l, .calfull.cal-short .cweek .cd-n .v-l { display: none; }
.calfull.cal-short .cd-v .v-s, .calfull.cal-short .cdow .cd-v .v-s, .calfull.cal-short .cweek .cd-n .v-s { display: inline; }
/* the dashboard's calendar follows the same rule: the week column shows the full figure when it fits */
.cal-rec .calfull:not(.cal-short) .cweek .v-l { display: inline; } .cal-rec .calfull:not(.cal-short) .cweek .v-s { display: none; }
.cal-rec .calfull .cweek b.cd-v { font-size: var(--cv); }
@container calb (max-width: 480px) {
  .calfull .cday, .calfull .cweek { padding: 4px 2px; } .calfull .cday .cd-v, .calfull .cweek .cd-v { text-align: center; letter-spacing: -.02em; }
  .calfull .cdow { padding: 5px 2px 6px; } .calfull .cdow b.cd-v { letter-spacing: -.02em; }
}

/* the reload button: the Bridge's round gold .rbtn beside the import button */
.rr-imp .rbtn { width: 32px; height: 32px; }
.cal-rec .calbox.calfull .cal { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* the colour-by switch shares the month row, left of the month total */
.cal-h .r { margin-left: auto; } .cal-h .cal-tools { margin: 0 6px 0 0; flex-wrap: nowrap; }
/* phone: month and its total on the first line; the colour switch (stretched) and "this month" on the second */
@container calb (max-width: 560px) {
  .cal-h { gap: 8px; } .cal-h .r { display: contents; }
  .cal-h .r:has(.cal-tools) > .chip { display: none; }   /* the month summary above already shows the total */
  .cal-h .r > .chip { order: 1; margin-left: auto; }
  .cal-h .cal-tools { order: 2; flex: 1 1 60%; min-width: 0; margin: 0; } .cal-h .seg > button { white-space: nowrap; font-size: .8125rem; } .cal-h .cal-tools > .small { display: none; }
  .cal-h .cal-tools .seg { flex: 1; display: flex; } .cal-h .cal-tools .seg > button { flex: 1; padding-left: 4px; padding-right: 4px; }
  .cal-h .r > .btn, .cal-h .r > a { order: 3; flex: none; }
  .cal-h h3, .cal-h .cal-ttl { min-width: 0; }
}
.card > .dc-hd + .dc-sc { margin-top: 0; }

/* inside an open drawer: the width eases and the new view slides in (day → trade from the right, back from the left) */
/* the width changes at once (animating it re-lays out the whole panel every frame under the blur); only the content moves */
.drawer.sw-r .dr-b > *, .drawer.sw-l .dr-b > *, .drawer.sw-f .dr-b > * { will-change: transform, opacity; }
.drawer.sw-r .dr-b > *, .drawer.sw-r #drTitle, .drawer.sw-r #drFoot > * { animation: swr .42s cubic-bezier(.2, .7, .2, 1) both; }
.drawer.sw-l .dr-b > *, .drawer.sw-l #drTitle, .drawer.sw-l #drFoot > * { animation: swl .42s cubic-bezier(.2, .7, .2, 1) both; }
.drawer.sw-f .dr-b > *, .drawer.sw-f #drTitle, .drawer.sw-f #drFoot > * { animation: swf .32s ease-out both; }
.drawer.sw-r .dr-b > *:nth-child(2), .drawer.sw-l .dr-b > *:nth-child(2) { animation-delay: .04s; }
.drawer.sw-r .dr-b > *:nth-child(n+3), .drawer.sw-l .dr-b > *:nth-child(n+3) { animation-delay: .08s; }
@keyframes swr { from { opacity: 0; transform: translateX(28px); } } @keyframes swl { from { opacity: 0; transform: translateX(-28px); } } @keyframes swf { from { opacity: 0; transform: translateY(6px); } }
.drawer.morph .dr-b { overflow-x: hidden; }

/* trade drawer tabs: the Bridge's sliding gold thumb; the panel below eases in from the side of the tab picked */
.dr-tabs.seg > .seg-th { border-radius: 9px; }
.drawer.tb-r .dr-tabs ~ *, .drawer.tb-r #drFoot > * { animation: tbr .34s cubic-bezier(.2, .7, .2, 1) both; }
.drawer.tb-l .dr-tabs ~ *, .drawer.tb-l #drFoot > * { animation: tbl .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tbr { from { opacity: 0; transform: translateX(16px); } } @keyframes tbl { from { opacity: 0; transform: translateX(-16px); } }
.dr-tabs.seg > button { height: auto; min-height: 34px; padding: 6px 12px; line-height: 1.3; border-radius: 9px; display: grid; place-items: center; }
/* Reports tabs on a phone: fill the row, tighter padding so four English labels fit */
@media (max-width: 560px) { .sh .ctl-row .seg[role="tablist"] { width: 100%; display: flex; } .sh .ctl-row .seg[role="tablist"] > button { flex: 1 1 auto; padding: 0 6px; } }

/* swaps (fx.js swapNext / swapRun): what a press changed eases in, each kind its own way */
.xf { position: relative; }
.xf > .xf-old { position: absolute; pointer-events: none; animation: xfout .46s ease-out forwards; }
@keyframes xfout { to { opacity: 0; } }
@keyframes swset { from { opacity: .2; } }
@keyframes swroll { from { opacity: 0; translate: 0 .45em; } }
@keyframes swfade { from { opacity: 0; translate: 0 6px; } }
@keyframes swtint { from { background-color: var(--c0); } }
/* data: rows and loose figures settle in (counted figures already count from the last value) */
.sw-data :is(tbody tr, .frow, .ir, .lv, .bk-r, .sc-r, .rp-r, .rr, .rk, .jl-i, .dc, .gx, .nudge) { animation: swset .42s ease-out both; animation-delay: calc(min(var(--r, 0), 10) * 22ms); }
.sw-data .num:not([data-cu]):not(:is(tbody tr, .frow, .ir, .lv, .bk-r, .sc-r, .rp-r, .rr, .rk, .jl-i, .dc, .gx, .nudge, .calfull) *) { animation: swset .42s ease-out both; }
/* unit: every figure rolls up in the new unit */
.sw-unit :is(.num, [data-cu]):not(:is(.num, [data-cu]) *) { animation: swroll .38s cubic-bezier(.2, .7, .2, 1) both; }
/* tint: calendar days ease from their old colour on a diagonal; figures settle with them */
:is(.cday, .cweek, .cdow).tn { animation: swtint .55s ease-out both; animation-delay: var(--td, 0ms); }
:is(.cday, .cweek, .cdow).tn :is(.cd-v, .cd-s, .cdw-v, b, small) { animation: swroll .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--td, 0ms); }
/* tabs: boxes on screen slide in from the side picked (their charts and rows draw in as on a first visit); layout: fade up */
.rv.play.swp-r { animation: swtr .44s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n, 0) * 45ms); }
.rv.play.swp-l { animation: swtl .44s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n, 0) * 45ms); }
.rv.play.swp-m { animation: swfade .4s ease-out both; animation-delay: calc(var(--n, 0) * 40ms); }
@keyframes swtr { from { opacity: 0; transform: translateX(26px); } } @keyframes swtl { from { opacity: 0; transform: translateX(-26px); } }
/* language: text fades over */
.sw-lang#view > *, .rail.sw-lang .rail-nav, .rail.sw-lang .rail-foot { animation: swfade .32s ease-out both; }
.sw-lang#view > *:nth-child(2) { animation-delay: .03s; } .sw-lang#view > *:nth-child(n+3) { animation-delay: .06s; }
/* price chart: a new timeframe's candles fade in */
.pxin { animation: swfade .36s ease-out both; }
/* theme: the whole page cross-fades (View Transitions where the browser has them) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { .xf > .xf-old { display: none; } [class*="sw-"] *, .sw-lang#view > *, .pxin, .tn, .tn *, .rv.play[class*="swp-"] { animation: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* chart end-point rings lifted out of the svg (fx.js liftPulses): the same rings, pulsing on the GPU */
.pl { position: absolute; pointer-events: none; overflow: visible; }
.po { position: absolute; border-radius: 50%; translate: -50% -50%; box-sizing: border-box; pointer-events: none; transform-origin: center; }
.po.ph, .po.pe { border: var(--bw, 1.5px) solid var(--c, var(--gold-mark)); }
.po.ph { animation: chalo 4s cubic-bezier(.25, .6, .35, 1) infinite; animation-delay: calc(var(--i, 0) * 1s); }
.po.pe { border-color: var(--gold-mark); animation: edpulse 4s cubic-bezier(.25, .6, .35, 1) infinite; animation-delay: calc(var(--i, 0) * .65s); }
.po.pd { background: color-mix(in srgb, var(--gold-mark) 55%, var(--bg)); opacity: 0; animation: eddo 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .65s); }
@keyframes eddo { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
circle.lifted.c-halo, circle.lifted.ed-halo { visibility: hidden; }
.play .pl { animation: fade .4s ease-out 1.2s both; }
@media (prefers-reduced-motion: reduce) { .pl { display: none; } }

/* secondary lines wrap instead of being cut with "…"; main figures shrink to fit their box (no figure is ever cut) */
.tile .tsub, .sc-r > span:first-child, .pb-st span, .pb-st small, .cal-sum .dlt, .rp-tiles .wk > .small, .rp-tiles .dlt, .rv-tiles .wk > .small, .rv-tiles .dlt, .kv2 small, .bk-r > b, .pb-vr > span, .cdow .cd-s { white-space: normal; overflow: visible; text-overflow: clip; }
.bk-r > b { line-height: 1.3; }
.pb-st > div { container-type: inline-size; } .pb-st b { font-size: clamp(1rem, 13.5cqi, 1.375rem); }
/* discipline heatmap: labels at the page's small size, figures at tile size with what they mean */
.hm-l { font-size: .8125rem; } .hm-l.mo { letter-spacing: 0; }
.hm-s .wk { padding: 10px 12px; gap: 3px; } .hm-s .wk .small { font-size: .875rem; }
.hm-s .wk > b { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.hm-s .wk .sub { font-size: .8125rem; color: var(--mist); line-height: 1.4; }
@media (max-width: 560px) { .hm-l.odd { visibility: hidden; } .hm-s { grid-template-columns: minmax(0, 1fr); } }
/* back in the day window: the trade you came from glows once */
.tr-row.was > td { animation: wasrow 1.6s ease-out both; } @keyframes wasrow { 0%, 35% { background: color-mix(in srgb, var(--gold-mark) 26%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tr-row.was > td { animation: none; } }
/* the day curve: the moment the daily target was reached, and what came after */
.dd-after { opacity: .07; } .dd-after.pos { fill: var(--pos); } .dd-after.neg { fill: var(--neg); }
.dd-tgx { stroke: var(--gold-mark); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.dd-tg { stroke: var(--gold-mark); stroke-width: 1; stroke-dasharray: 5 4; opacity: .55; }
.px-ax.dd-tgl { fill: var(--gold-mark); }

/* the account menu's icons */
.lm-i[data-ic="pen"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.lm-i[data-ic="up"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M5 20h14'/%3E%3C/svg%3E"); }
.lm-i[data-ic="hand"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.lm-i[data-ic="archive"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v10h14V9M10 13h4'/%3E%3C/svg%3E"); }
.lm-i[data-ic="trash"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.lm-i[data-ic="clear"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
/* accounts: the menu sits at the right of a card's head; archived accounts fold away in one row each */
.acard-h > .r { margin-left: 2px; }
.acc-arch { margin-top: 12px; padding: 6px 14px 10px; }
.acc-arch .yg-more { width: 100%; justify-content: space-between; }
.arows { display: grid; gap: 2px; margin-top: 6px; }
.arow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 8px 4px; border-top: 1px solid var(--line); }
.arow b { font-weight: 600; } .arow .r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* auto-sync: the promises, and the three confirmations in the wizard */
.sy-safe { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sy-safe li { display: flex; gap: 8px; align-items: flex-start; color: var(--mist); font-size: .875rem; } .sy-safe li svg { color: var(--pos); flex: none; margin-top: 2px; }
.sy-ok { display: grid; gap: 8px; margin: 4px 0 12px; }
.chk { display: flex; gap: 10px; align-items: flex-start; color: var(--mist); font-size: .875rem; line-height: 1.5; } .chk .ckb { margin-top: 3px; flex: none; }
.chk:has(input:disabled) { opacity: .75; }
.gate-f .btn-gold.sy-soon:disabled { opacity: .45; cursor: not-allowed; }
.acard { position: relative; } .acard-h { padding-right: 40px; } .acard-h > .r { position: absolute; top: 12px; right: 12px; margin: 0; }
.sy-calm { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--foam); font-size: .875rem; } .sy-calm svg { color: var(--pos); flex: none; margin-top: 2px; }
.sy-terms { font-size: .8125rem; color: var(--mist); margin-left: 28px; }
.sy-terms summary { cursor: pointer; color: var(--gold); width: fit-content; } .sy-terms summary:hover { text-decoration: underline; }
.sy-terms ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.5; }
/* account wizard step 2: the form on the left, how to do it on the right (stacked on phones) */
.gate-b.wz-wide { width: min(940px, 100%); }
.wz-2c { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.wz-form { display: grid; gap: 14px; min-width: 0; }
.wz-how { position: sticky; top: 0; padding: 16px 18px; border-radius: 14px; background: var(--inner-2); display: grid; gap: 10px; }
.wz-how-h { display: flex; align-items: center; gap: 10px; } .wz-how-h b { font-size: 1rem; }
.wz-how-h .oi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); flex: none; }
.wz-how .steps { margin: 0; } .wz-how .note { margin: 0; }
@media (max-width: 760px) { .wz-2c { grid-template-columns: 1fr; } .wz-how { position: static; } }
/* account wizard motion: steps slide in the way you went, the box eases to its new size, the step bar fills or empties, a picked card settles */
.wz-prog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz-prog i { position: relative; overflow: hidden; background: var(--inner-2); }
.wz-prog i.on { background: var(--inner-2); }
.wz-prog i b { position: absolute; inset: 0; border-radius: inherit; background: var(--gold-mark); transform: scaleX(0); transform-origin: left; }
.wz-prog i.on b { transform: none; }
.wz-prog i.wz-g b { animation: wzgrow .42s cubic-bezier(.22,.8,.24,1) both; }
.wz-prog i.wz-d b { animation: wzdrop .36s cubic-bezier(.4,0,.2,1) both; }
@keyframes wzgrow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes wzdrop { from { transform: none; } to { transform: scaleX(0); } }
.wz-body { display: grid; gap: 14px; min-width: 0; }
.wz-body.wz-r { animation: wzr .36s cubic-bezier(.22,.8,.24,1) both; }
.wz-body.wz-l { animation: wzl .36s cubic-bezier(.22,.8,.24,1) both; }
.wz-body.wz-f { animation: wzf .3s ease-out both; }
@keyframes wzr { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wzl { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes wzf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.opt { transition: box-shadow .28s ease, background-color .28s ease, transform .2s ease; }
.opt .oi { transition: background-color .28s ease, transform .3s cubic-bezier(.3,1.5,.5,1); }
.opt.wpick { animation: optpick .32s cubic-bezier(.3,1.4,.5,1); }
.opt.wpick .oi { animation: oipop .38s cubic-bezier(.3,1.4,.5,1); }
@keyframes oipop { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.opt[aria-pressed="true"] .oi { background: color-mix(in srgb, var(--gold-mark) 22%, transparent); }
@keyframes optpick { 0% { transform: scale(.985); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-body, .wz-prog i b, .opt.wpick, .opt.wpick .oi { animation: none !important; } }
/* pop layers (the dim animates its colour, never opacity: an ancestor with opacity or an opacity animation cuts the glass's backdrop blur; fills are backwards only, so nothing stays applied once a layer has arrived): dialogs rise and settle over a fading dim, menus and the month picker unfold from their button, the toast slides up; each leaves the same way it came, quicker */
.gate:not([hidden]) { animation: gdim .24s ease-out backwards; }
.gate:not([hidden]) > .gate-b { animation: gpop .34s cubic-bezier(.2, .8, .2, 1) backwards; }
.gate.pop-out { animation: gdimo .19s ease-in both; pointer-events: none; }
.gate.pop-out > .gate-b { animation: gpopo .19s ease-in both; }
@keyframes gdim { from { background-color: transparent; } }
@keyframes gdimo { to { background-color: transparent; } }
@keyframes gpop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes gpopo { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.lm-p:not([hidden]), .cal-pop:not([hidden]) { animation: lmin .2s cubic-bezier(.2, .8, .2, 1) backwards; }
.cal-pop { transform-origin: top left; }
.lm-p.pop-out, .cal-pop.pop-out { animation: lmout .14s ease-in both; pointer-events: none; }
@keyframes lmin { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
@keyframes lmout { to { opacity: 0; transform: scale(.96) translateY(-3px); } }
.toast:not([hidden]) { animation: toin .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.toast.pop-out { animation: toout .22s ease-in both; }
.toast.tbump { animation: tobump .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes toin { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }
@keyframes toout { to { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes tobump { 0% { transform: translate(-50%, 0) scale(.96); } 100% { transform: translate(-50%, 0); } }
.bulk:not([hidden]) { animation: rise .32s cubic-bezier(.2, .8, .2, 1) backwards; }
@media (prefers-reduced-motion: reduce) { .gate, .gate > .gate-b, .lm-p, .cal-pop, .toast, .bulk { animation: none !important; } }
.toast.pop-out, .toast.tbump.pop-out { animation: toout .22s ease-in both; }

/* journal.arxonedge.com: the gold PRO tag on what comes with Journal Pro */
.pro-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 7px; border-radius: 999px; vertical-align: .15em;
  font-size: .625rem; font-weight: 700; letter-spacing: .12em; line-height: 1.3; color: #0A1422; background: linear-gradient(135deg, #E2C98A, #C9A961 55%, #A88A45);
  box-shadow: 0 1px 6px rgba(201, 169, 97, .28); white-space: nowrap; }
.rail-nav a .pro-tag { margin-left: auto; }
h2 .pro-tag { font-size: .6875rem; }

/* add a trade, quick first (1 Nov 2026): result as won / lost / even plus an amount, tag pickers with a quick-add box, the rest folded away */
.man-f { display: grid; gap: 14px; }
.man-seg { width: 100%; display: flex; }
.man-seg > button { flex: 1 1 0; }
.man-seg > .r-win[aria-pressed="true"] { color: var(--pos); box-shadow: inset 0 0 0 1px var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.man-seg > .r-loss[aria-pressed="true"] { color: var(--neg); box-shadow: inset 0 0 0 1px var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.man-res { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.man-res .inp:disabled { opacity: .45; }
@media (max-width: 520px) { .man-res { grid-template-columns: minmax(0, 1fr); } }
.tpick { align-items: center; }
.tpick .tq { width: 128px; min-height: 30px; height: 30px; padding: 4px 12px; border-radius: 999px; font-size: .8125rem; background: transparent; box-shadow: inset 0 0 0 1px var(--line); border: 0; }
.tpick .tq:focus { width: 180px; box-shadow: inset 0 0 0 1px var(--gold-mark); outline: none; }
@media (prefers-reduced-motion: no-preference) { .tpick .tq { transition: width .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; } }
.man-more { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.man-more > summary { cursor: pointer; padding: 10px 14px; color: var(--mist); font-size: .875rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.man-more > summary::-webkit-details-marker { display: none; }
.man-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); flex: none; }
.man-more[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .man-more > summary::before { transition: transform .2s ease; } }
.man-more-b { display: grid; gap: 12px; padding: 0 14px 14px; }
.man-more-b .note { margin: 0; }
/* journal.arxonedge.com: the page outside claude.ai, and the sign-in card */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; }
[hidden]:not([hidden=until-found i]) { display: none !important; }
.w-wide { width: 100%; justify-content: center; gap: 10px; }
.w-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0; }
.w-or::before, .w-or::after { content: ""; height: 1px; background: var(--line); }
.w-form { display: grid; gap: 12px; }
.w-form .fld { display: grid; gap: 6px; }
.w-links { margin-top: 14px; }
.w-recaptcha { position: fixed; bottom: 0; right: 0; }

/* the member button, top right: beside the page on a wide screen, the end of the top bar on a narrow one */
.desk { position: relative; }
.w-me { position: relative; z-index: 60; }
.desk > .w-me { position: absolute; top: 22px; right: clamp(16px, 3vw, 36px); }
.w-av { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: var(--foam); cursor: pointer;
  border: 1px solid var(--line); background: var(--chrome); box-shadow: var(--chrome-sh); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.w-av.paid { border-color: var(--gold-ring); }
.w-av:hover, .w-av[aria-expanded="true"] { border-color: var(--gold-mark); box-shadow: 0 0 0 3px var(--gold-soft), var(--chrome-sh); }
.w-av:active { transform: scale(.96); }
.w-av:focus-visible { outline: 2px solid var(--gold-mark); outline-offset: 2px; }
@media (max-width: 960px) {
  .rail { grid-template-areas: "brand acc . imp theme lang me" "nav nav nav nav nav nav nav"; grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr) auto auto auto auto; }
  .rail > .w-me { grid-area: me; }
  .w-av { width: 34px; height: 34px; }
  .w-av svg { width: 18px; height: 18px; }
}
@media (max-width: 640px) {
  .rail { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "brand . theme lang me" "acc acc acc acc imp" "nav nav nav nav nav"; }
}
/* phone: the logo alone, so the display settings and the member button share the first row */
@media (max-width: 480px) { .rail .brand > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .w-av { transition: none; } }

/* the member menu: the journal's own menu (.lm-p glass, .lm-i items, .lm-s rule), with the member's name and tier on top */
.w-menu { min-width: 240px; max-width: min(320px, calc(100vw - 24px)); transform-origin: top right; }
.w-mh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 0; }
.w-ml { color: var(--mist); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.w-menu .w-note { margin: 0; padding: 2px 10px 0; color: var(--gold); }
.w-menu .w-mail { margin: 0; padding: 2px 10px 6px; color: var(--mist); overflow-wrap: anywhere; }
.w-menu .lm-i { text-decoration: none; }
.lm-i[data-ic="acc"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 19.5c1.2-3.3 4-5 7-5s5.8 1.7 7 5'/%3E%3C/svg%3E"); }
.lm-i[data-ic="out"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l5-5-5-5M15 12H4'/%3E%3C/svg%3E"); }

/* the tier beside the logo: JOURNAL · PLUS, JOURNAL · PRO; free stays JOURNAL */
.brand[data-tier="plus"] small::after { content: " · PLUS"; }
.brand[data-tier="pro"] small::after { content: " · PRO"; }