/*! Alex2Tick Aegis Pro for Vest 0.9.61. Copyright (c) 2026 Alexander Diaz (Alex2Tick). All rights reserved. Proprietary: no copying, modification, reverse engineering or redistribution. See LICENSE.txt. */
/* Trade panel styles: Selenite, the see-through look (0.9.40–0.9.48, built on the Structured design
   approved 2026-10-12). Calm and precise:
   - one sheet of material (on Vest the host frosts the chart, see vest-main.js) holding see-through
     plates; every number, word and button sits on a plate, only his primary ink, the laurel head and
     the focus ring touch the material itself
   - restrained green / red / amber that always carry a word too; tabular numbers wherever a number
     can change
   - the user picks 12 / 14 / 16 / 18 px; every size below is in em of that choice, never smaller
     than 11px (his word, 2026-10-11)
   - focus is always visible; nothing depends on colour alone; reflected light, nothing glows
   Measured with the WCAG formula over a normal chart, every ink is 5:1 or more on its plate; over the
   worst flat case (a white price label behind the panel at Night) his ink is 7.8:1 on a plate and
   5.3:1 in the bar, grey 4.8:1, red 4.3:1. Design study: design/prototypes/selenite; reports:
   design/reports/. Today's look before Selenite is kept in design/rollback/. */

/* ------------------------------------------------------------------ tokens: Day */
:root {
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fs: 16px;
  --chart-scale: 1;
  --r: 16px;       /* the panel; plates 8, controls 7 and 5 inside (concentric) */
  --r-ctl: 7px;    /* a control group */
  --r-btn: 5px;    /* a button inside one */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* his v6 law-line curve */
  --tide: 480ms;                            /* the one rhythm every moment runs on */

  /* Day: parchment plates, warm charcoal ink, the market in sapphire */
  color-scheme: light;      /* what the browser draws itself (open menus, scrollbars) follows the theme */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235e5850' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bg: #eee9de;           /* the page around the panel (practice) */
  --card: #fcfaf5;          /* solid parchment: dialogs and the few things that must stay opaque */
  --plate-rgb: 252 250 245;  --plate-a: 0.58;  /* a plate: a little over half solid (0.9.51) */
  --surface: rgb(36 31 27 / 0.05);          /* raised: control tracks, quiet buttons */
  --ink: #1f1b17;           /* his ink */
  --ink-2: #5e5850;         /* secondary, warm grey */
  --ink-3: #5e5850;         /* numbering and hints */
  --market: #1a3d63;        /* what the market makes: price, size */
  --rule: rgb(36 31 27 / 0.10);
  --edge: rgb(36 31 27 / 0.10);          /* a plate's edge */
  --plate-light: rgb(255 255 255 / 0.9); /* the light falls from the upper left */
  --selected: #1f1b17;
  --selected-ink: #fcfaf5;
  --pick: rgb(31 27 23 / 0.08);          /* a choice: frosted, with a fine edge */
  --pick-edge: rgb(31 27 23 / 0.35);
  --green: #146948;
  --green-fill: rgb(20 105 72 / 0.09);
  --red: #a3303f;
  --red-fill: rgb(163 48 63 / 0.09);
  --amber: #7a5000;
  --amber-fill: rgb(122 80 0 / 0.09);
  --focus: #2459d6;
  --shadow: 0 12px 38px rgb(22 32 45 / 0.14), 0 2px 6px rgb(22 32 45 / 0.08);
  /* the material on Vest; --frame-solid is its fallback where transparency is asked away */
  --tint: 242 238 228;  --sw-a: 0.71;  --sw-sat: 150%;  --sw-bright: 1.04;  --sw-blur: 16px;
  --frame-solid: #eee9de;
  --bevel-top: rgb(255 255 255 / 0.75);
  --bevel-line: rgb(36 31 27 / 0.10);


  /* the names the practice page still uses */
  --warn-bg: var(--amber-fill);
  --warn-ink: var(--amber);

  /* the practice chart */
  --chart-bg: #fcfaf5;
  --chart-grid: #e6e9ee;
  --chart-axis: #56616e;
  --chart-up: #1f8a5c;
  --chart-down: #c2475a;
  --chart-price-bg: #182027;
  --chart-price-fg: #ffffff;
  --line-stop: #ab3546;
  --line-stop-fg: #ffffff;
  --line-stop-fill: #f8e7eb;
  --line-safe: #146948;
  --line-safe-fg: #ffffff;
  --line-safe-fill: #e3f2ea;
  --line-goal: #146948;
  --line-goal-fg: #ffffff;
  --line-goal-fill: #e3f2ea;
  --line-entry: #56616e;
  --line-entry-fg: #ffffff;
  --line-entry-fill: #eff1f4;
  --line-entry-ink: #182027;
}

/* ------------------------------------------------------------------ tokens: Night */
:root[data-theme="dark"] {
  /* a sapphire field, reflected light, his choices set in parchment */
  color-scheme: dark;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23b8b3a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bg: #0b0e18;
  --card: #111522;
  --plate-rgb: 17 21 34;  --plate-a: 0.43;
  --surface: rgb(233 226 208 / 0.06);
  --ink: #e9e2d0;           /* softened ivory against halation */
  --ink-2: #b8b3a7;         /* a shade brighter since the plates show more of the chart */
  --ink-3: #b8b3a7;
  --market: #a9bad1;        /* cold steel */
  --rule: rgb(233 226 208 / 0.10);
  --edge: rgb(233 226 208 / 0.09);
  --plate-light: rgb(233 226 208 / 0.045);
  --selected: #e9e2d0;
  --selected-ink: #111522;
  --pick: rgb(233 226 208 / 0.14);
  --pick-edge: rgb(233 226 208 / 0.38);
  --green: #64d7ac;
  --green-fill: rgb(100 215 172 / 0.15);
  --red: #f38b99;
  --red-fill: rgb(243 139 153 / 0.13);
  --amber: #e6bd68;
  --amber-fill: rgb(230 189 104 / 0.15);
  --focus: #8fb0ff;
  --shadow: 0 12px 38px rgb(0 0 0 / 0.34), 0 2px 6px rgb(0 0 0 / 0.22);
  --tint: 9 12 20;  --sw-a: 0.66;  --sw-sat: 180%;  --sw-bright: 0.78;  --sw-blur: 16px;
  --frame-solid: #0b0e18;
  --bevel-top: rgb(233 226 208 / 0.20);
  --bevel-line: rgb(233 226 208 / 0.10);

  --chart-bg: #111522;
  --chart-grid: #26292e;
  --chart-axis: #acb4bf;
  --chart-up: #4cbf92;
  --chart-down: #e07a89;
  --chart-price-bg: #e7ebf0;
  --chart-price-fg: #171b20;
  --line-stop: #f38b99;
  --line-stop-fg: #171b20;
  --line-stop-fill: #41292e;
  --line-safe: #64d7ac;
  --line-safe-fg: #171b20;
  --line-safe-fill: #213d33;
  --line-goal: #64d7ac;
  --line-goal-fg: #171b20;
  --line-goal-fill: #213d33;
  --line-entry: #acb4bf;
  --line-entry-fg: #171b20;
  --line-entry-fill: #25282d;
  --line-entry-ink: #f0f2f5;
}

:root[data-text="s"]  { --fs: 12px; --chart-scale: 0.75; }
:root[data-text="m"]  { --fs: 14px; --chart-scale: 0.82; }
:root[data-text="l"]  { --fs: 16px; --chart-scale: 0.9; }
:root[data-text="xl"] { --fs: 18px; --chart-scale: 1; }

/* ------------------------------------------------------------------ the frame and its plates */
.tp, .tp *, .tp-settings, .tp-settings * { box-sizing: border-box; }
.tp {
  min-width: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.45;
  color: var(--ink);
  background: transparent;          /* the material behind shows through the 8 px frame */
  border: 0;
  border-radius: 0 0 var(--r) var(--r);
  --pad: var(--fs);                 /* a length, so rows can still reach a plate's edges */
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.tp > .tp-head, .tp > .tp-ready, .tp > .tp-trade, .tp > .tp-locked, .tp > .tp-day, .tp > .tp-community {
  background: rgb(var(--plate-rgb) / var(--plate-a)); border-radius: 8px; padding: var(--pad);
  box-shadow: 0 0 0 1px var(--edge), inset 1px 1px 0 var(--plate-light);
}
.tp button, .tp-settings button, .tp input, .tp select, .tp-settings input, .tp-settings select { font: inherit; color: inherit; }
.tp button, .tp-settings button { cursor: pointer; }
.tp button:focus-visible, .tp-settings button:focus-visible, .tp input:focus-visible, .tp-settings input:focus-visible,
.tp-settings select:focus-visible, .tp summary:focus-visible, .tp a:focus-visible, .tp-settings summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.tp button:disabled, .tp-settings button:disabled { cursor: not-allowed; }
.tp button:hover:not(:disabled) { filter: brightness(0.96); }
:root[data-theme="dark"] .tp button:hover:not(:disabled) { filter: brightness(1.12); }
.tp button:active:not(:disabled) { transform: translateY(1px); }
.tp b { font-weight: 600; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.tp [hidden], .tp-settings [hidden] { display: none !important; }
.ico { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -0.16em; }
.muted { color: var(--ink-2); }
/* Words for screen readers only: the chart's lines, and a polite line for what just happened. */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ header */
.tp-head { display: flex; flex-direction: column; gap: 0.45em; }
.tp-market { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35em 0.6em; min-width: 0; }
.tp-market > .tp-sym { flex: none; }   /* the price is never covered: the row wraps instead (0.9.61) */
.tp-sym { display: flex; align-items: baseline; gap: 0.55em; min-width: 0; }
.tp-sym-name { font-weight: 600; font-size: 1.43em; letter-spacing: -0.025em; }
.tp-price { font-size: 1.21em; font-weight: 500; letter-spacing: -0.01em; color: var(--market); font-variant-numeric: tabular-nums; }
.tp-shield {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap;
  padding: 0.2em 0.65em 0.2em 0.55em; border-radius: 999px; background: var(--surface);
  font-size: max(11px, 0.857em); font-weight: 600; color: var(--green);
}
.tp-shield::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }
.tp-shield[data-tone="neutral"] { color: var(--ink-2); }
.tp-shield[data-tone="warn"] { color: var(--amber); }
.tp-shield[data-tone="bad"] { color: var(--red); }
.tp-shield[data-tone="bad"]::before { animation: tp-blink 1.2s steps(2) infinite; }
@keyframes tp-blink { 50% { opacity: 0.25; } }
/* 0.9.61 · the master switch: ARMED / DISARMED, the whole tool on or off, at the top on the permission's line */
.tp .arm-tool { all: unset; box-sizing: border-box; flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.2em 0.65em 0.2em 0.25em; border-radius: 999px; background: var(--surface); cursor: pointer; white-space: nowrap;
  font-size: max(11px, 0.786em); font-weight: 700; letter-spacing: 0.06em; color: var(--green); }
.tp .arm-tool[data-on="0"] { color: var(--ink-2); }
.tp .arm-tool:hover { filter: brightness(1.08); }
.tp .arm-tool:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.arm-track { position: relative; flex: none; width: 2.3em; height: 1.35em; border-radius: 999px; background: var(--green); transition: background-color 0.2s ease; }
.arm-track > i { position: absolute; top: 0.15em; left: 0.15em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transform: translateX(0.95em); transition: transform 0.2s ease; }
.arm-tool[data-on="0"] .arm-track { background: var(--rule); }
.arm-tool[data-on="0"] .arm-track > i { transform: none; }
:root[data-motion="off"] .arm-track, :root[data-motion="off"] .arm-track > i { transition: none; }
.arm-dialog { width: min(24em, 94vw); }
.act.act-danger { color: var(--red); }

.gear {
  flex: none; display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; padding: 0;
  border: 0; border-radius: var(--r-btn); background: transparent; color: var(--ink);
}
.gear:hover { background: var(--surface); }
.gear .ico { width: 1.2em; height: 1.2em; }
.tp-mode { margin: 0; display: flex; align-items: center; gap: 0.45em; font-size: max(11px, 0.857em); color: var(--ink-2); }
/* 0.9.61: the permission and the master switch on one line, so arming never changes the panel's height */
.tp-mode-row { display: flex; align-items: center; gap: 0.6em; min-width: 0; }
.tp-mode-row > .tp-mode { flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ notices */
.tp-alert, .tp-paused, .tp-nostop, .tp-notice {
  margin: 0; border-radius: var(--r-ctl); padding: 0.85em 0.95em;
  display: flex; gap: 0.65em; align-items: flex-start; background: linear-gradient(var(--fill), var(--fill)), var(--card);
}
/* On the frame a notice is a plate with its tint on it, so its coloured words never sit on the
   material itself (0.9.49: amber on the bare frame fell to about 3.7:1 over a white price label). */
.tp > .tp-alert, .tp > .tp-paused, .tp > .tp-nostop, .tp > .tp-notice {
  border-radius: 8px; background: linear-gradient(var(--fill), var(--fill)), var(--card);   /* solid under colour (0.9.52, HIG) */
  box-shadow: 0 0 0 1px var(--edge);
}
.tp-alert { flex-direction: column; align-items: stretch; --fill: var(--surface); }
.tp-alert.danger { --fill: var(--red-fill); color: var(--red); }
.tp-alert.warn { --fill: var(--amber-fill); color: var(--amber); }
/* A plain confirmation ("Picked your trade up again"): quiet, and it fades on its own. */
.tp-alert.info { --fill: var(--surface); color: var(--ink); }
.tp-alert p { margin: 0; font-weight: 600; }
.tp-alert-acts { display: flex; gap: 0.5em; flex-wrap: wrap; }
.tp-alert .act { min-height: 2.3em; background: var(--card); color: var(--ink); border-color: transparent; }
.tp-paused, .tp-notice { --fill: var(--amber-fill); color: var(--amber); }
.tp-paused b, .tp-notice b { display: block; font-weight: 600; }
.tp-notice.data { --fill: var(--surface); color: var(--ink); }
.tp-notice.data .ico { color: var(--ink-2); }
.tp-paused span, .tp-notice span { display: block; color: var(--ink); font-size: max(11px, 0.857em); margin-top: 0.2em; }
/* "No stop" also sits on top, in words, never colour alone */
.tp-nostop { --fill: var(--red-fill); color: var(--red); font-weight: 600; align-items: center; animation: tp-pulse 1.4s ease-in-out infinite; }
@keyframes tp-pulse { 50% { opacity: 0.8; } }
.tp-forget { width: 100%; }
.tp > .tp-forget { background: var(--card); }

/* ------------------------------------------------------------------ states */
.tp-ready, .tp-trade, .tp-locked { display: none; flex-direction: column; gap: 0.75em; }
.tp[data-state="ready"] .tp-ready,
.tp[data-state="trade"] .tp-trade,
.tp[data-state="locked"] .tp-locked { display: flex; }

/* numbered questions: 01 Risk per trade, 02 Profit plan, 03 Chart preview */
.tp-sec { display: flex; flex-direction: column; gap: 0.6em; margin-top: 0.35em; }
.tp-q { display: flex; align-items: baseline; gap: 0.6em; margin: 0; font-size: 1em; font-weight: 600; }
.num { font-size: max(11px, 0.786em); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tp-q .hint { margin-left: auto; font-weight: 400; font-size: max(11px, 0.857em); color: var(--ink-2); }
.sec-label { margin: 0.6em 0 0; font-size: 1em; font-weight: 600; }

/* segmented controls: one track; a choice is frosted parchment with a fine edge (warm is his) */
.seg {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: var(--r-ctl); background: var(--surface);
}
.tp .seg > button, .tp-settings .seg > button {
  flex: 1 1 0; min-width: max-content; min-height: 2.45em; padding: 0.35em 0.55em; border: 0;
  border-radius: var(--r-btn); background: transparent; font-size: max(11px, 0.857em); font-weight: 500; white-space: nowrap;
}
.tp .seg > button[aria-pressed="true"], .tp-settings .seg > button[aria-pressed="true"] {
  background: var(--pick); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--pick-edge);
}
.seg.seg-risk > button { min-width: 3.4em; }

/* plans: three equal buttons, then My lines and Bracket as quieter choices */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tp .plan {
  min-height: 2.65em; padding: 0.4em 0.3em; border: 1px solid var(--rule); border-radius: 7px; background: transparent;
  font-size: max(11px, 0.857em); font-weight: 500;
}
.tp .plan[aria-pressed="true"] {
  background: var(--pick); border-color: transparent; color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--pick-edge);
}
.plan-alt { display: flex; justify-content: center; gap: 0.4em; flex-wrap: wrap; }
.tp .plan-alt .plan { border: 0; min-height: 2.3em; padding: 0.3em 0.9em; color: var(--ink-2); }
.tp .plan-alt .plan[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.tp .plan-alt .plan[aria-pressed="true"]::after { content: " ✓"; }
.tp-blurb { margin: 0; color: var(--ink-2); font-size: max(11px, 0.857em); min-height: 2.6em; }

/* text buttons */
.tp .link-btn {
  align-self: flex-start; border: 0; background: transparent; padding: 0.35em 0; min-height: 2.2em;
  font-size: max(11px, 0.857em); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em;
}

/* the recap: what this trade risks and pays */
.tp-preview {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.65em 0.9em;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.95em 0; margin-top: 0.3em;
}
.tp-preview > div { display: flex; flex-direction: column; min-width: 0; }
.tp-preview > div > span { font-size: max(11px, 0.857em); color: var(--ink-2); }
.tp-preview > div > b { font-size: 1.5em; font-weight: 550; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 0.1em; }
.tp-preview .size-row { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 0.6em; }
.tp-preview .size-row b { font-size: max(11px, 0.857em); font-weight: 600; margin: 0; letter-spacing: 0; color: var(--market); }
.tf-note { margin: 0; display: flex; align-items: center; gap: 0.45em; color: var(--ink-2); font-size: max(11px, 0.857em); }
.tf-note.loading { color: var(--amber); }

/* BUY and SELL: tinted glass, a fine edge in their own colour, 44 px at least */
.gos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 0.2em; }
.tp .go {
  min-height: max(44px, 3.15em); border-radius: var(--r-ctl); border: 0; padding: 0.5em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05em;
}
.go-main { font-weight: 600; font-size: 1.04em; white-space: nowrap; }
.tp .go.buy {
  background: linear-gradient(var(--green-fill), var(--green-fill)), var(--card); color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent), inset 1px 1px 0 rgb(255 255 255 / 0.05);
}
.tp .go.sell {
  background: linear-gradient(var(--red-fill), var(--red-fill)), var(--card); color: var(--red);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent), inset 1px 1px 0 rgb(255 255 255 / 0.05);
}
.tp .go:disabled { opacity: 0.45; }
.tp-why { margin: 0; min-height: 1.4em; text-align: center; font-size: max(11px, 0.857em); color: var(--ink-2); }
.tp-why.bad { color: var(--red); font-weight: 600; }
.tp-why.good { color: var(--green); font-weight: 600; }
.tp-why.warn { color: var(--amber); background: linear-gradient(var(--amber-fill), var(--amber-fill)), var(--card); padding: 0.55em 0.75em; border-radius: var(--r-btn); text-align: left; font-weight: 600; }

/* "Use $X instead" and the other wide actions */
.act {
  min-height: 2.75em; padding: 0.4em 0.9em; border-radius: 7px; border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: max(11px, 0.93em);
}
.act:disabled { opacity: 0.45; }
.tp .act-wide { grid-column: 1 / -1; background: linear-gradient(var(--amber-fill), var(--amber-fill)), var(--card); color: var(--amber); border-color: transparent; }
.tp .act-close {
  grid-column: 1 / -1; background: linear-gradient(var(--red-fill), var(--red-fill)), var(--card); color: var(--red); border-color: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 28%, transparent);
}
.tp .act-primary { background: var(--selected); color: var(--selected-ink); border-color: transparent; }
/* The pressed order button while Vest works on it: full strength, its words, a small turning ring. */
.tp .go.busy:disabled, .tp .act.busy { opacity: 1; cursor: progress; }
.tp .go.busy .go-main::before, .tp .act.busy::before {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.45em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tp-spin 0.8s linear infinite;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ in a trade */
.tp > .tp-trade { position: relative; }   /* the TP line runs round this plate */
.tp-trade.closing > :not(.tp-pnl-box) { display: none; }
.tp-trade.closing .tp-pnl-box > :not(.tp-sentence) { display: none; }
.tp-pnl-box { display: flex; flex-direction: column; gap: 0.15em; }
.tp-pnl-box > .label { font-size: max(11px, 0.857em); color: var(--ink-2); }
.tp-pnl { font-size: 2.43em; font-weight: 550; line-height: 1.12; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.tp-sentence { margin: 0; font-size: max(11px, 0.857em); color: var(--ink-2); }
.tp-sentence b { color: var(--ink); }
/* A fill away from the planned price (0.9.54): amber when worse, green when better; solid under the colour. */
.tp-slip {
  margin: 0.5em 0 0; padding: 0.45em 0.65em; border-radius: var(--r-btn); font-size: max(11px, 0.857em); line-height: 1.4;
  border: 1px solid currentColor; background: linear-gradient(var(--amber-fill), var(--amber-fill)), var(--card); color: var(--amber);
}
.tp-slip.better { background: linear-gradient(var(--green-fill), var(--green-fill)), var(--card); color: var(--green); }
.tp-slip b { font-weight: 600; }

/* the protection card: green only when Vest really holds the stop */
.tp-safe {
  margin: 0.25em 0 0; display: flex; gap: 0.65em; align-items: flex-start; padding: 0.9em 0.95em;
  border-radius: var(--r-ctl); background: var(--surface); color: var(--ink);
}
.tp-safe .ico { margin-top: 0.12em; }
.tp-safe b { display: block; font-weight: 600; }
.tp-safe span { display: block; color: var(--ink); font-size: max(11px, 0.857em); margin-top: 0.15em; font-variant-numeric: tabular-nums; }
.tp-safe.good { background: linear-gradient(var(--green-fill), var(--green-fill)), var(--card); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 22%, transparent); }
.tp-safe.warn { background: linear-gradient(var(--amber-fill), var(--amber-fill)), var(--card); color: var(--amber); }
.tp-safe.bad { background: var(--red-fill); color: var(--red); }

/* trade progress: the starting stop on the left, the furthest TP on the right. The red is what the
   trade can still lose, from the stop to the entry; it drains away when the stop reaches the entry. */
.meter { padding: 1.3em 0 1.7em; }
.meter-track { position: relative; height: 5px; border-radius: 3px; background: var(--surface); margin: 0 0.2em; }
.meter-bad {
  position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: color-mix(in srgb, var(--red) 22%, transparent);
  transition: left var(--tide) var(--ease), width var(--tide) var(--ease);
}
.meter-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: left 0.2s linear, width 0.2s linear; }
.meter-fill.up { background: var(--green); }
.meter-fill.down { background: var(--red); }
.meter-mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink-2);
  transition: left var(--tide) var(--ease), background-color var(--tide) ease;
}
.meter-mark span {
  position: absolute; top: calc(100% + 0.35em); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: max(11px, 0.786em); color: var(--ink-2); line-height: 1.2; transition: color var(--tide) ease;
}
.meter-mark.edge-r span { left: auto; right: -1px; transform: none; }
.meter-mark.edge-l span { left: -1px; transform: none; }
.meter-mark.m-stop { background: var(--red); }
.meter-mark.m-stop span { color: var(--red); top: auto; bottom: calc(100% + 0.35em); }
.meter-mark.m-stop.safe { background: var(--green); }
.meter-mark.m-stop.safe span { color: var(--green); }
.meter-mark.m-goal { background: var(--green); }
.meter-mark.m-goal span { color: var(--green); }
.meter-mark.m-goal.hit span::after { content: " ✓"; }
.meter-now {
  position: absolute; top: 50%; width: 0.75em; height: 0.75em; margin: -0.375em 0 0 -0.375em;
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--card); transition: left 0.2s linear;
}

/* what happens next: numbered rows; a step just ticked shows it once */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li { display: flex; gap: 0.75em; align-items: flex-start; padding: 0.7em 0; border-bottom: 1px solid var(--rule); }
.steps .mark { min-width: 1.2em; font-size: max(11px, 0.786em); color: var(--ink-3); padding-top: 0.15em; font-variant-numeric: tabular-nums; }
.steps .txt { display: flex; flex-direction: column; min-width: 0; }
.steps .txt b { font-weight: 600; font-size: max(11px, 0.93em); }
.steps .txt span { font-size: max(11px, 0.857em); color: var(--ink-2); margin-top: 0.1em; font-variant-numeric: tabular-nums; }
.steps li.done .txt b { color: var(--ink-2); font-weight: 500; }
.steps li.done .mark { color: var(--green); font-weight: 700; }
.steps li.next .mark, .steps li.active .mark { color: var(--ink); font-weight: 700; }
.steps li.active .txt b { color: var(--green); }
.steps li.warn { border-bottom-color: var(--rule); }
.steps li.warn .mark { color: var(--amber); font-weight: 700; }
.steps li.warn .txt b { color: var(--amber); }
.steps li.just .mark, .steps li.just .txt b { animation: tp-tick var(--tide) var(--ease); }
@keyframes tp-tick { from { opacity: 0.15; } }

/* A TP taken: one thin line runs once round the trade's plate, then fades. */
.strike { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.strike rect { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; animation: tp-strike 1100ms var(--ease) forwards; }
@keyframes tp-strike { 45% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 0.5em; }
.acts-note { margin: 0; text-align: center; color: var(--ink-2); font-size: max(11px, 0.857em); }

/* ------------------------------------------------------------------ rolling figures */
/* Each digit is a column of 0–9 that turns to its value. The glyphs are drawn by CSS, so the figure
   reads, copies and is spoken once, as the plain text beside it. */
.roll { display: inline-flex; align-items: flex-start; }
.roll > span { display: block; height: var(--dgh, 1.12em); line-height: var(--dgh, 1.12em); }   /* every glyph on one line box (whole pixels while rolling), so the baseline holds */
.roll > span[data-c]::before { content: attr(data-c); }
.roll-txt { display: inline-block; width: 1px; height: 1px; margin-right: -1px; overflow: hidden; white-space: nowrap; vertical-align: top; color: transparent; }
.dg { overflow: hidden; }
.dg-s { display: block; transition: translate 420ms var(--ease); }
.dg-s::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; display: block; line-height: var(--dgh, 1.12em); }

/* ------------------------------------------------------------------ locked and paused */
.tp-locked { gap: 0.8em; }
.lock-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; }
.lock-head .ico { width: 1.25em; height: 1.25em; color: var(--ink-2); margin-bottom: 0.2em; }
.lock-head h2 { margin: 0; font-size: 1.36em; font-weight: 600; letter-spacing: -0.02em; }
.lock-head p { margin: 0; color: var(--ink-2); font-size: max(11px, 0.857em); }
.lock-limit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8em; margin-top: 0.6em; }
.lock-limit span { display: block; color: var(--ink-2); font-size: max(11px, 0.857em); }
.lock-limit b { display: block; font-size: 1.7em; font-weight: 500; margin-top: 0.1em; letter-spacing: -0.02em; }
.lock-track { height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.lock-track span { display: block; height: 100%; background: var(--red); }
.tp-locked-text { margin: 0; color: var(--ink-2); font-size: max(11px, 0.857em); }
.sum-rows { display: flex; flex-direction: column; }
.sum-row { display: flex; justify-content: space-between; gap: 1em; padding: 0.7em 0; border-bottom: 1px solid var(--rule); font-size: max(11px, 0.93em); }
.sum-row span { color: var(--ink-2); }
.sum-row b { font-weight: 600; text-align: right; }
.tp-locked .act { width: 100%; }

/* ------------------------------------------------------------------ the day, with its card */
.tp-day { display: flex; flex-direction: column; gap: 0.45em; font-size: max(11px, 0.857em); }
.day-line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8em; }
.day-line .day-count { color: var(--ink-2); white-space: nowrap; }
.day-text b { font-weight: 600; }
.day-right { display: inline-flex; align-items: baseline; gap: 0.6em; }
.day-bar { height: 4px; border-radius: 2px; background: var(--surface); overflow: hidden; }
.day-fill { display: block; height: 100%; width: 0; background: var(--ink-2); }
.day-fill[data-level="mid"] { background: var(--amber); }
.day-fill[data-level="high"] { background: var(--red); }
.bg-line { margin: 0; display: flex; gap: 0.45em; align-items: center; color: var(--green); font-weight: 600; }
.tp .day-share {
  border: 0; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 0.2em 0.75em;
  font: inherit; font-weight: 600; min-height: 2em; box-shadow: 0 0 0 1px var(--edge);
}
.tp .day-share:hover { background: color-mix(in srgb, var(--ink) 7%, var(--surface)); }
/* The card sheet is large whatever the panel's text size (his word, 2026-10-14): its own 16 px type, the card
   on the left as big as the window allows (16:9, the whole sheet within the window's height), the options in a
   column beside it; under 860 px wide they stack. */
.tp-settings.tp-cardsheet {
  font-size: 16px; max-height: calc(100vh - 32px);
  width: min(1180px, 94vw, calc((100vh - 140px) * 16 / 9 + 21.5em + 2.6em));
}
.card-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20em; gap: 1.5em; align-items: start; margin-top: 0.5em; }
.card-side { min-width: 0; }
.tp-settings .card-side .card-pick { width: 100%; max-width: none; }
@media (max-width: 860px) { .card-layout { grid-template-columns: minmax(0, 1fr); gap: 0.7em; } }
.card-img { display: block; width: 100%; height: auto; margin: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--edge); }
.tp-cardsheet .seg > button { min-height: 2.3em; }
.tp-cardsheet .seg > button:disabled { color: var(--ink-3); }
.tp-cardsheet .card-looks { margin-top: 0.5em; }
.card-pick-row { display: grid; gap: 0.3em; margin: 0 0 0.6em; color: var(--ink-2); }
.card-pick { flex: 1; min-height: 2.3em; padding: 0 0.7em; border-radius: var(--r-ctl); border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font: inherit; }
.card-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tp-cardsheet .card-why { margin: 0.6em 0 0; }
/* The day's trades in the Today row (0.9.51): a bar each, up from the middle green, down red */
.day-bars { display: inline-flex; gap: 3px; height: 22px; vertical-align: middle; margin: 0 0.15em 0 0.6em; position: relative; top: -1px; }
.day-bars[hidden] { display: none; }
.day-bars i { display: block; width: 5px; border-radius: 1.5px; }
.day-bars.many { gap: 2px; }
.day-bars.many i { width: 3px; }
.day-bars i.up { background: var(--green); align-self: flex-end; margin-bottom: 11.5px; }
.day-bars i.down { background: var(--red); align-self: flex-start; margin-top: 11.5px; }
.day-bars i.none { background: var(--ink-3); opacity: 0.45; height: 3px; align-self: center; }
.day-bars::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1px; background: var(--rule); }
.day-bars i.even { background: var(--ink-3); height: 2px; width: 5px; align-self: center; }
.day-bars .more { align-self: center; font-size: 0.75em; font-weight: 500; color: var(--ink-2); margin-right: 2px; }
.card-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0.7em; }
.card-acts .card-describe { grid-column: 1 / -1; }

/* links: one quiet disclosure under the footer, away from the trade buttons */
.tp-community { font-size: max(11px, 0.857em); line-height: 1.35; }
.tp > .tp-community { padding: 0; }
.tp-community summary {
  list-style: none; cursor: pointer; padding: 0.75em var(--pad); min-height: 2.75em; display: flex; align-items: center; gap: 0.5em;
  color: var(--ink-2); font-weight: 500;
}
.tp-community summary::-webkit-details-marker { display: none; }
.tp-community summary::after { content: "+"; margin-left: auto; font-size: 1.2em; line-height: 1; }
.tp-community[open] summary::after { content: "−"; }
.tp-community .more-body { padding: 0 var(--pad) 1em; display: flex; flex-direction: column; gap: 0.15em; }
.tp-community p { margin: 0 0 0.5em; color: var(--ink-2); }
.community-link {
  font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em;
  min-height: 2.4em; display: flex; align-items: center;
}
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; flex-wrap: wrap; }
.tp .chip-copy { min-height: 2.2em; padding: 0 0.75em; border-radius: var(--r-btn); border: 1px solid var(--rule); background: var(--surface); font-weight: 600; }

/* ------------------------------------------------------------------ your own amount */
.other-row { display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; }
.risk-dollar { font-weight: 600; color: var(--ink-2); }
.risk-input {
  font: inherit; font-size: 1em; font-weight: 600; width: 6.5em; min-height: 2.45em; padding: 0 0.6em;
  border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tp .chip-use { min-height: 2.45em; min-width: 4em; padding: 0 0.9em; border: 0; border-radius: var(--r-btn); background: var(--selected); color: var(--selected-ink); font-weight: 600; }
.risk-msg { flex-basis: 100%; font-weight: 600; color: var(--red); font-size: max(11px, 0.857em); }
.risk-msg:empty { display: none; }

/* My lines: how many TPs */
.goals-row { display: flex; align-items: center; gap: 0.7em; }
.goals-row .show-label { font-size: max(11px, 0.857em); color: var(--ink-2); white-space: nowrap; }
.goals-row .seg { flex: 1; }

/* ------------------------------------------------------------------ the bracket */
.bracket { container-type: inline-size; display: flex; flex-direction: column; gap: 0.6em; }
.bk-folded { display: flex; align-items: center; gap: 0.75em; padding: 0.8em 0.9em; border-radius: var(--r-ctl); background: var(--surface); }
.bk-sum { display: flex; flex-direction: column; gap: 0.15em; margin-right: auto; min-width: 0; font-size: max(11px, 0.857em); font-variant-numeric: tabular-nums; }
.bk-sum-top { font-weight: 600; }
.bk-sum-tps { color: var(--ink-2); }
.tp .bk-toggle { min-height: 2.3em; padding: 0 0.9em; border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--card); font-weight: 600; white-space: nowrap; font-size: max(11px, 0.857em); }
.bk-editor { display: flex; flex-direction: column; gap: 0.55em; border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 0.95em; }
.bk-title b { display: block; font-size: 1.21em; font-weight: 600; letter-spacing: -0.02em; }
.bk-title span { display: block; font-size: max(11px, 0.857em); color: var(--ink-2); margin-top: 0.1em; }
.bk-field { display: flex; align-items: center; justify-content: space-between; gap: 0.7em; font-size: max(11px, 0.93em); }
.bk-field-label { display: flex; flex-direction: column; }
.bk-field-label small { font-size: max(11px, 0.857em); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* a number with its own − and + : one control */
.num-ctl { display: inline-flex; align-items: stretch; border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--surface); min-width: 0; }
.tp .num-ctl > button { border: 0; background: transparent; min-width: 1.9em; min-height: 2.35em; padding: 0; color: var(--ink-2); font-weight: 600; border-radius: var(--r-btn); }
.tp .num-ctl > button[hidden] { visibility: hidden; display: inline-block !important; }
.tp .bk-r {
  width: 100%; min-width: 2.6em; border: 0; background: transparent; color: var(--ink); text-align: center; padding: 0 0.1em;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.tp .bk-r:focus-visible { outline-offset: 0; }
.bk-stop-ctl { width: 9.5em; }
.bk-head, .bk-row { display: grid; grid-template-columns: 2.9em minmax(0, 1fr) minmax(0, 1fr) 1.9em; gap: 0.45em; align-items: center; }
.bk-head { font-size: max(11px, 0.786em); color: var(--ink-2); padding-top: 0.5em; }
.bk-name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: max(11px, 0.93em); }
.bk-usd { font-size: max(11px, 0.786em); font-weight: 500; color: var(--green); }
.bk-pcell { display: flex; flex: 1; min-width: 0; }
.bk-rest { flex: 1; display: grid; place-items: center; font-weight: 600; color: var(--ink-2); min-height: 2.35em; font-size: max(11px, 0.857em); white-space: nowrap; }
.tp .bk-x { border: 0; background: transparent; color: var(--ink-2); min-height: 2.2em; padding: 0; border-radius: var(--r-btn); font-size: 1.05em; }
.tp .bk-x[hidden] { visibility: hidden; display: inline-block !important; }
.bk-alloc { display: flex; justify-content: space-between; font-size: max(11px, 0.857em); margin-top: 0.4em; }
.bk-alloc span { color: var(--ink-2); }
.bk-alloc b { font-weight: 600; }
.bk-alloc-track { height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.bk-alloc-track span { display: block; height: 100%; background: var(--green); }
.bk-toggle-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8em; padding-top: 0.85em; margin-top: 0.3em;
  border-top: 1px solid var(--rule); font-size: max(11px, 0.93em); cursor: pointer;
}
.bk-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 0.4em; }
.tp .bk-save { background: var(--selected); color: var(--selected-ink); border-color: transparent; }
/* A narrow bracket (a phone, or the largest text in a small window): each take-profit
   takes two lines, ratio above and share below, so nothing runs off the edge. */
@container (max-width: 19em) {
  .bk-row { grid-template-columns: 2.9em minmax(0, 1fr) 1.9em; row-gap: 0.3em; }
  .bk-row > .bk-name { grid-row: span 2; }
  .bk-row > .bk-x { grid-column: 3; grid-row: 1; }
  .bk-row > .bk-pcell { grid-column: 2; }
  .bk-head { display: none; }
  .bk-stop-ctl { width: 8em; }
}

/* ------------------------------------------------------------------ checkboxes */
/* Drawn by the panel, not the system: a quiet rounded square, filled in the choice colour when on
   (0.9.54; the system box stayed white at night, his screenshots 2026-10-14). */
.tp input[type="checkbox"], .tp-settings input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center;
  width: 1.25em; height: 1.25em; margin: 0; flex: none; cursor: pointer;
  border: 1px solid var(--pick-edge); border-radius: var(--r-btn); background: var(--surface);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.tp input[type="checkbox"]::after, .tp-settings input[type="checkbox"]::after {
  content: ''; width: 0.36em; height: 0.66em; margin-top: -0.12em;
  border: solid var(--selected-ink); border-width: 0 0.14em 0.14em 0; transform: rotate(45deg) scale(0);
  transition: transform 160ms var(--ease);
}
.tp input[type="checkbox"]:checked, .tp-settings input[type="checkbox"]:checked { background: var(--selected); border-color: var(--selected); }
.tp input[type="checkbox"]:checked::after, .tp-settings input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.tp input[type="checkbox"]:disabled, .tp-settings input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
.tp input[type="checkbox"]:focus-visible, .tp-settings input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ menus (select) */
/* The closed menu: the panel's own chevron in its ink. The open list: the theme's card and ink,
   so Night opens dark and Day opens parchment (it opened white with ivory text at night). */
.tp select, .tp-settings select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 1.9em !important;
  background-image: var(--chev);
  background-position: right 0.6em center;
  background-size: 0.75em 0.75em;
  background-repeat: no-repeat;
}
.tp select option, .tp-settings select option { background-color: var(--card); color: var(--ink); }
.tp select option:checked, .tp-settings select option:checked { background-color: color-mix(in srgb, var(--selected) 16%, var(--card)); font-weight: 600; }
.tp select option:disabled, .tp-settings select option:disabled { color: var(--ink-2); }

/* ------------------------------------------------------------------ settings (an opaque sheet) */
.tp-settings {
  font-family: var(--font); font-size: var(--fs); line-height: 1.45; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 1.3em 1.3em 1.1em; width: min(26em, 94vw);
  max-height: min(46em, 92vh); box-shadow: var(--shadow); font-variant-numeric: tabular-nums;
}
.tp-settings::backdrop { background: rgb(10 14 20 / 0.5); }
.set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4em; }
.set-head h2 { margin: 0; font-size: 1.29em; font-weight: 600; }
.tp-settings .act { min-height: 2.4em; }
.tp-settings h3 { margin: 1.3em 0 0.2em; font-size: max(11px, 0.857em); font-weight: 600; color: var(--ink-2); }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9em; padding: 0.7em 0;
  border-bottom: 1px solid var(--rule); font-size: max(11px, 0.93em); min-height: 3.1em;
}
.set-row > label { min-width: 0; }
.tp-settings select, .tp-settings .set-input {
  min-height: 2.3em; max-width: 10em; padding: 0 0.5em; border: 1px solid var(--rule); border-radius: var(--r-btn);
  background-color: var(--surface); color: var(--ink); font-size: 1em;
}
.tp-settings .set-input { width: 6.5em; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-settings .set-input::placeholder { color: var(--ink-2); font-weight: 400; }
.set-note { margin: 0.5em 0 0; color: var(--ink-2); font-size: max(11px, 0.857em); }
.preset-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 0.4em; }
.preset { display: flex; flex-direction: column; gap: 0.2em; font-size: max(11px, 0.857em); color: var(--ink-2); min-width: 0; }
.tp-settings .preset-input { width: 100%; min-width: 0; font-size: max(12px, 1.07em); }
.tp-settings .risk-input { background: var(--surface); }
.tp-settings .risk-msg { display: block; margin-top: 0.4em; }
.set-more { margin-top: 1.2em; font-size: max(11px, 0.857em); }
.set-more summary { font-weight: 600; cursor: pointer; min-height: 2.2em; display: flex; align-items: center; }
.set-more li { margin: 0.4em 0; color: var(--ink-2); }

/* ------------------------------------------------------------------ the bar, on the material */
/* On Vest and on the practice page: the shield and the name left, the laurel head (his ask,
   2026-10-12) small and quiet in the middle, his wordmark and the fold button right. Only his
   primary ink sits on the material here. */
.bar {
  position: relative; display: flex; align-items: center; gap: 0.5em; padding: 0.55em calc(8px + 0.3em) 0.55em calc(8px + 0.75em);
  background: transparent; color: var(--ink); border: 0;
  font: 600 var(--fs, 16px) var(--font); letter-spacing: -0.01em;
  cursor: move; user-select: none; touch-action: none;
}
.bar span { margin-right: auto; display: inline-flex; align-items: center; gap: 0.45em; }
.bar .ico { width: 1.1em; height: 1.1em; }
.bar .by { margin: 0; font-weight: 400; color: var(--ink); font-size: max(11px, 0.786em); letter-spacing: 0; }
.bar .wordmark { height: 0.95em; width: auto; display: block; flex: none; color: var(--ink); }
.bar .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 1.9em; width: auto; pointer-events: none; opacity: 0.85; filter: brightness(0.2); }
:root[data-theme="dark"] .bar .mark { filter: none; opacity: 0.8; }
.bar button {
  font: inherit; min-width: 2em; min-height: 2em; border-radius: var(--r-btn); border: 0;
  background: transparent; color: var(--ink); cursor: pointer;
}
.bar button:hover { background: rgb(var(--tint) / 0.55); }
.bar button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Folded, the bar still says how the trade stands, on its own opaque pill (never coloured ink on the
   material). It takes the place of "by Alex2Tick", so the head stays clear in the middle. */
.bar:has(.bar-live:not([hidden])) .by, .bar:has(.bar-live:not([hidden])) .wordmark { display: none; }
.bar-live {
  margin-left: auto; padding: 0.12em 0.6em; border-radius: 999px; background: var(--card); color: var(--ink);
  font-size: max(11px, 0.857em); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px var(--edge);
}
.bar .bar-live { margin-right: 0; }
.bar-live[hidden] { display: none; }
.bar-live[data-tone="pos"] { color: var(--green); }
.bar-live[data-tone="neg"] { color: var(--red); }

/* ------------------------------------------------------------------ Advanced OCO (0.9.54) */
/* The builder, in the panel's own controls: one card per leg, one quiet line per group until opened
   (progressive disclosure), and everything in em so it follows the text size. Design: design/advanced-oco/. */
.oco { display: flex; flex-direction: column; gap: 0.7em; }
.oco[hidden], .oco-nowbox[hidden] { display: none; }
.oco-nowbox { display: flex; flex-direction: column; gap: 0.6em; }
.oco-sublabel { margin: 0; font-size: max(11px, 0.857em); font-weight: 600; color: var(--ink-2); }
.oco-leg { display: flex; flex-direction: column; gap: 0.55em; padding: 0.75em 0.8em 0.65em; border-radius: 8px;
  background: rgb(var(--plate-rgb) / var(--plate-a)); box-shadow: 0 0 0 1px var(--edge); }
.oco-leg.picked { box-shadow: 0 0 0 1.5px var(--pick-edge); }
.oco-leg-head { display: flex; flex-direction: column; gap: 0.45em; }
.oco-when { display: flex; align-items: center; gap: 0.6em; }
.oco-when .seg { flex: 1; }
.oco-side { font-weight: 600; font-size: max(11px, 0.93em); min-width: 2.4em; }
.oco-side.buy { color: var(--green); } .oco-side.sell { color: var(--red); }
.tp .seg.oco-side-pick.is-buy > button[aria-pressed="true"] { color: var(--green); }
.tp .seg.oco-side-pick.is-sell > button[aria-pressed="true"] { color: var(--red); }
.oco-level-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.tp .oco-level { all: unset; box-sizing: border-box; width: 100%; min-width: 0; padding: 0.05em 0.3em; margin: 0 -0.3em; border-radius: 6px;
  font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); cursor: text; }
.tp .oco-level:hover { background: var(--surface); }
.tp .oco-level:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oco-drag { flex: none; font-size: max(11px, 0.786em); color: var(--ink-3); white-space: nowrap; }
.oco-drag::before { content: "⇕ "; }
.oco-how { margin: 0; font-size: max(11px, 0.857em); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.oco-how b { color: var(--ink); font-weight: 600; }
.oco-note { display: block; margin-top: 0.15em; color: var(--amber); }
.tp .seg.oco-small > button { min-height: 2.15em; font-size: max(11px, 0.786em); padding: 0.25em 0.4em; }
.seg.oco-nums { min-width: 9.5em; }
.oco-step { width: 100%; }
.oco-step > output { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 0.25em; text-align: center; min-height: 2.35em; font-weight: 600; font-variant-numeric: tabular-nums; font-size: max(11px, 0.93em); }
.oco-val small { font-weight: 400; color: var(--ink-2); font-size: 0.86em; }
.tp .oco-step.oco-fixed > button { visibility: hidden; }
.oco-meta { margin: 0; padding-top: 0.5em; border-top: 1px solid var(--rule); font-size: max(11px, 0.786em); color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* a group: one line, opened in place */
.oco-group { border-radius: 8px; background: rgb(var(--plate-rgb) / var(--plate-a)); box-shadow: 0 0 0 1px var(--edge); }
.oco-group > summary { list-style: none; display: grid; grid-template-columns: auto 1fr 0.8em; align-items: center; gap: 0.6em; padding: 0.7em 0.8em; cursor: pointer; }
.oco-group > summary::-webkit-details-marker { display: none; }
.oco-group > summary::after { content: ""; width: 0.45em; height: 0.45em; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); justify-self: end; transition: transform var(--tide, 0.2s) var(--ease, ease); }
.oco-group[open] > summary::after { transform: rotate(45deg); }
.oco-group > summary b { font-weight: 600; font-size: max(11px, 0.93em); }
.oco-gsum { font-size: max(11px, 0.786em); color: var(--ink-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.oco-group > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.oco-gbody { display: flex; flex-direction: column; gap: 0.6em; padding: 0.7em 0.8em 0.8em; border-top: 1px solid var(--rule); }
.oco-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7em; min-height: 2.2em; font-size: max(11px, 0.93em); }
.oco-rr { display: flex; align-items: center; gap: 0.4em; }
.oco-rr .seg { min-width: 11.5em; }
.oco-tp { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr) 3.2em; gap: 0.4em; align-items: center; }
.oco-tp .oco-step > output { min-height: 2.15em; font-size: max(11px, 0.857em); }
.tp .oco-tp .num-ctl > button { min-width: 1.6em; min-height: 2.15em; }
.oco-tpn { font-size: max(11px, 0.857em); font-weight: 600; color: var(--ink-2); }
.oco-tpm { text-align: right; font-size: max(11px, 0.857em); font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.oco-foot { margin: 0; font-size: max(11px, 0.786em); color: var(--ink-3); }
.oco-sub { display: flex; flex-direction: column; gap: 0.6em; padding-left: 0.7em; border-left: 2px solid var(--rule); }
/* a switch, the panel's own: the parchment track when on */
.tp .oco-switch { position: relative; flex: none; width: 2.75em; height: 1.6em; padding: 0; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; transition: background 0.2s; }
.tp .oco-switch > span { position: absolute; top: 0.15em; left: 0.15em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--ink-2); transition: transform 0.2s var(--ease, ease), background 0.2s; }
.tp .oco-switch[aria-checked="true"] { background: var(--selected); box-shadow: none; }
.tp .oco-switch[aria-checked="true"] > span { transform: translateX(1.15em); background: var(--selected-ink); }
.tp .oco-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oco-list { border-radius: 8px; background: rgb(var(--plate-rgb) / var(--plate-a)); box-shadow: 0 0 0 1px var(--edge); }
.oco-list > .oco-row { padding: 0.45em 0.8em; }
.oco-list > .oco-row + .oco-row { border-top: 1px solid var(--rule); }
.oco-sum { margin: 0; padding: 0.7em 0.8em; border-radius: 8px; font-size: max(11px, 0.857em); line-height: 1.45;
  background: rgb(var(--plate-rgb) / var(--plate-a)); box-shadow: 0 0 0 1px var(--edge); }
.tp .oco-arm { width: 100%; min-height: 2.9em; }
/* Pinned to the panel's bottom edge while the settings scroll under it, so the one action is always in
   reach (his real-Vest test, 2026-10-14: on a 765 px window it sat cut off at the bottom). */
.tp .oco-arm { position: sticky; bottom: 0.6em; z-index: 2; box-shadow: var(--shadow); }
.oco-check { list-style: none; margin: 0.4em 0 0.7em; padding: 0; }
.oco-check li { display: flex; justify-content: space-between; gap: 0.8em; padding: 0.5em 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.oco-check li span { color: var(--ink-2); }
.oco-check li b { text-align: right; }
.oco-dialog { width: min(24em, 94vw); }

/* 0.9.61 · the strategy row: which saved strategy the builder holds, "Edited", Save */
.oco-strat { display: flex; align-items: center; gap: 0.5em; }
.tp .oco-strat-pick { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.5em;
  min-height: 2.4em; padding: 0.35em 2em 0.35em 0.8em; border-radius: 8px; cursor: pointer; position: relative;
  background: rgb(var(--plate-rgb) / var(--plate-a)); box-shadow: 0 0 0 1px var(--edge); }
.tp .oco-strat-pick::after { content: ""; position: absolute; right: 0.85em; top: 50%; width: 0.42em; height: 0.42em; margin-top: -0.32em;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.tp .oco-strat-pick:hover:not(:disabled) { background: var(--surface); }
.tp .oco-strat-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tp .oco-strat-pick:disabled { cursor: default; }
.tp .oco-strat-pick:disabled::after { display: none; }
.oco-strat-k { flex: none; font-size: max(11px, 0.786em); color: var(--ink-2); }
.oco-strat-pick b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.oco-edited { flex: none; font-size: max(11px, 0.786em); font-weight: 600; color: var(--amber); }
.oco-edited[hidden] { display: none; }
.tp .oco-save { flex: none; min-height: 2.4em; padding: 0 0.9em; }

/* 0.9.61 · the strategies sheet */
.oco-sheet { width: min(28em, 94vw); }
.oco-snew > .act { width: 100%; }
.oco-slist { list-style: none; margin: 0.3em 0 0; padding: 0; }
.oco-sitem { display: flex; align-items: center; gap: 0.5em; border-bottom: 1px solid var(--rule); }
.oco-sitem.current { box-shadow: inset 3px 0 0 var(--selected); }
.tp-settings .oco-sopen { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1em;
  padding: 0.55em 0.5em 0.55em 0.7em; cursor: pointer; border-radius: 6px; }
.tp-settings .oco-sopen:hover { background: var(--surface); }
.tp-settings .oco-sopen:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.oco-sopen b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oco-sopen span { font-size: max(11px, 0.786em); color: var(--ink-2); }
.oco-sacts { flex: none; display: flex; gap: 0.3em; }
.tp-settings .oco-sact { min-height: 2.1em; padding: 0 0.6em; font-size: max(11px, 0.786em); }
.tp-settings .oco-sdel { color: var(--red); }
.oco-sclose { grid-template-columns: 1fr; }
.tp-settings input.set-input.oco-name { width: 100%; max-width: none; margin: 0.3em 0 0; }

/* ------------------------------------------------------------------ asked for by the user */
/* More contrast: firm edges, stronger inks, solid plates */
@media (prefers-contrast: more) {
  :root { --edge: #5e574f; --rule: #8a8378; --ink-2: #47423b; --ink-3: #47423b; --green: #0f5a3c; --red: #8f2236; --amber: #6b4600; --plate-a: 1; }
  :root[data-theme="dark"] { --edge: #8c9db5; --rule: #5e6e86; --ink-2: #c4bfb3; --ink-3: #c4bfb3; --plate-a: 1; }
  .tp > .tp-head, .tp > .tp-ready, .tp > .tp-trade, .tp > .tp-locked, .tp > .tp-day, .tp > .tp-community { box-shadow: 0 0 0 1.5px var(--edge); }
}
/* Less motion, from the computer */
@media (prefers-reduced-motion: reduce) {
  .meter-now { transition: none; }
  .tp-nostop, .tp-shield[data-tone="bad"]::before { animation: none; }
  .tp .go.busy .go-main::before, .tp .act.busy::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
}
/* Settings → Animations: Off */
:root[data-motion="off"] .dg-s, :root[data-motion="off"] .meter-bad, :root[data-motion="off"] .meter-mark,
:root[data-motion="off"] .meter-mark span, :root[data-motion="off"] .meter-fill, :root[data-motion="off"] .meter-now { transition: none; }
:root[data-motion="off"] .steps li.just .mark, :root[data-motion="off"] .steps li.just .txt b,
:root[data-motion="off"] .tp-nostop, :root[data-motion="off"] .tp-shield[data-tone="bad"]::before, :root[data-motion="off"] .strike rect { animation: none; }
:root[data-motion="off"] .tp .go.busy .go-main::before, :root[data-motion="off"] .tp .act.busy::before { animation: none; border-right-color: currentColor; opacity: 0.6; }

/* ------------------------------------------------------------------ wider, not taller (0.9.55)
   His ask, 2026-10-14: "It feels unnatural when the panel becomes so tall that you have to scroll ... use
   width instead of tallness." panel.js measures the view in one column; past the height cap it lays it
   out in two columns (.is-wide), or three (.is-wide3), each only where the chart keeps its room. On Vest
   the panel grows to the left, away from the price axis. Prototype: design/0.9.55-layout/. */

/* columns flow only in a block: the ready view is a block here (a flex column above) */
.tp.is-wide[data-state="ready"] .tp-ready { display: block; columns: 2; column-gap: 1.6em; column-fill: balance; }
.tp.is-wide .tp-ready > * { break-inside: avoid; margin-bottom: 0.75em; }
/* the right column starts at Entry: Risk, the profit plan and its numbers on the left; how the trade goes in,
   and Buy / Sell, on the right */
.tp.is-wide .tp-ready > .tp-sec:has(> [aria-label="How the trade goes in"]) { break-before: column; }

/* Plan: the builder runs the full width under Risk | Entry */
.tp.is-wide .tp-ready > .oco { column-span: all; margin-top: 0.6em; }
.tp.is-wide .oco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7em 1.6em; align-items: start; }
.tp.is-wide .oco > * { grid-column: 1 / -1; }
/* Buy and Sell side by side, as they sit on the two sides of the price */
.tp.is-wide .oco > .oco-leg { grid-column: auto; }
.tp.is-wide .oco > .oco-leg:only-of-type { grid-column: 1 / -1; }
/* the summary beside Arm plan: the one action at the bottom right, where the eye ends */
.tp.is-wide .oco > .oco-sum { grid-column: 1; align-self: stretch; }
.tp.is-wide .oco > .oco-arm { grid-column: 2; align-self: end; position: static; box-shadow: none; }

/* "If a leg fills" shown open while there is room, without changing what the user chose for one column.
   Left: how it exits (stop, TPs). Right: what moves the stop (break-even, trail). */
.tp.is-wide:not(.keep-fold) .oco-group::details-content { content-visibility: visible; display: block; }
.tp.is-wide:not(.keep-fold) .oco-group > summary { pointer-events: none; cursor: default; }
.tp.is-wide:not(.keep-fold) .oco-group > summary::after { visibility: hidden; }
.tp.is-wide .oco-gbody { display: block; columns: 2; column-gap: 1.6em; }
.tp.is-wide .oco-gbody > * { break-inside: avoid; margin-bottom: 0.6em; }
.tp.is-wide .oco-gbody > .oco-foot + .oco-row { break-before: column; }
.tp.is-wide .oco-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.6em; }
.tp.is-wide .oco-list > .oco-row { border-bottom: 0; }
.tp.is-wide .oco-list > .oco-row:only-child { grid-column: 1 / -1; }

/* the foot: Today and Accounts side by side */
.tp.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.6em; }
.tp.is-wide > * { grid-column: 1 / -1; }
.tp.is-wide > .tp-day { grid-column: 1; }
.tp.is-wide > .tp-community { grid-column: 2; align-self: start; }

/* three columns (Plan): Single | Either, Buy | Sell, the window and the summary on the left two;
   "If a leg fills" the full height on the right, with Arm plan under it */
.tp.is-wide3 .oco { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; }
/* the strategy beside One trigger | OCO pair, so no column grows (0.9.61) */
.tp.is-wide3 .oco > .oco-strat { grid-column: 2; grid-row: 1; }
.tp.is-wide3 .oco > .oco-strat + .seg { grid-column: 1; grid-row: 1; }
.tp.is-wide3 .oco > .oco-leg:first-of-type { grid-column: 1; grid-row: 2; }
.tp.is-wide3 .oco > .oco-leg:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.tp.is-wide3 .oco > .oco-leg:only-of-type { grid-column: 1 / 3; }
.tp.is-wide3 .oco > .oco-list { grid-column: 1 / 3; grid-row: 3; }
.tp.is-wide3 .oco > .oco-sum { grid-column: 1 / 3; grid-row: 4; align-self: start; }
.tp.is-wide3 .oco > .tp-why { grid-column: 1 / 3; grid-row: 5; }
.tp.is-wide3 .oco > .oco-group { grid-column: 3; grid-row: 1 / 5; }
.tp.is-wide3 .oco > .oco-arm { grid-column: 3; grid-row: 5; }
/* Active (0.9.61): the strategy, what is watched and Cancel, one under the other */
.tp.is-wide .oco.armed > * { grid-column: 1 / -1; grid-row: auto; }
.tp.is-wide3 .oco-gbody { columns: 1; }
.tp.is-wide3 .oco-gbody > .oco-foot + .oco-row { break-before: auto; }

/* Settings, when it would scroll and the window has the room: a wide sheet in two columns
   (trading, risk, daily protection | appearance and audio) */
.tp-settings.is-wide { width: min(54em, 94vw); max-height: min(64em, calc(100vh - 32px)); }
.tp-settings.is-wide > .set-body { columns: 2; column-gap: 2em; }
.tp-settings.is-wide > .set-body > * { break-inside: avoid; }
.tp-settings.is-wide > .set-body > h3 { break-after: avoid; }
.tp-settings.is-wide > .set-body > h3.set-col2 { break-before: column; }
.tp-settings.is-wide > .set-body > h3:first-child { margin-top: 0.4em; }