/* MassGrowth Markets terminal. The chart from edge to edge (Chris, 22 Oct: "create as much space as
   possible for the chart", "putting all tools, symbols and anything else into pop-outs with smooth and
   impressive transitions"): the client area's paper, ink, steel and silver (styles.css), with the
   controls floating over the chart on frosted glass and everything else opening from them. */

body.terminal { overflow: hidden; background: var(--paper); }
.terminal {
  --t-pad: 14px; --t-line: 1px solid var(--silver-2); --t-sell: var(--loss); --t-warn: #b54708; --t-sma: #c4320a; --t-ema: #6941c6; --t-bb: #667085; --t-draw: #155eef; --t-star: #dc6803;
  /* The glass the controls float on, and how things move. */
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.93);
  --glass-line: rgba(24, 34, 48, 0.08);
  --t-hover: rgba(24, 34, 48, 0.06);
  --t-row: rgba(24, 34, 48, 0.035);
  --t-dim: rgba(24, 34, 48, 0.18);
  --t-sell-deep: #8f1d14;
  --glass-shadow: 0 1px 2px rgba(24, 34, 48, 0.05), 0 6px 20px rgba(24, 34, 48, 0.08);
  --pop-shadow: 0 2px 6px rgba(24, 34, 48, 0.06), 0 22px 48px rgba(24, 34, 48, 0.16);
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-spring: cubic-bezier(0.32, 1.25, 0.6, 1);
  --edge: 12px;
  --bar-h: 44px;
  --axis-w: 64px;
  --sheet-w: 368px;
  --book-h: min(40vh, 360px);
  --dock-h: 0px;
}
/* The terminal's type: four sizes, each for one kind of thing, and nothing between (Chris, 21 Oct: the sizes
   were not consistent). The caption: the words over a figure or a field, hints, counts, the rail's labels,
   the chart's axes and tags, the tabs. The text: tables, controls, menus, fields, notes. The figure: the
   account's figures, panel titles, the order's side and its button. The title: the instrument on the chart.
   On a touch screen every field is 16px (styles.css: a smaller one makes a phone zoom in), so the text and
   the figures are 16px there too, and the title steps up with them; the caption stays 12px, as a phone's
   own apps set theirs. The chart draws with the same sizes. */
.terminal { --t-caption: 0.75rem; --t-text: 0.8125rem; --t-figure: 0.9375rem; --t-title: 1.125rem; }
@media (pointer: coarse) {
  .terminal { --t-text: 1rem; --t-figure: 1rem; --t-title: 1.25rem; }
}
.terminal .error { font-size: var(--t-text); }

/* ---- dark (Chris, 22 Oct: a dark mode switch, "dark matt grey/black, invert colours accordingly"): the same
   page in matte graphite with light ink, the client area's tokens turned for the terminal alone; the chart
   reads the same tokens (chart.js refreshTheme), so its paper, grid, axes and lines turn with it. */
.terminal[data-theme="dark"] {
  --paper: #121314;
  --ink: #e7e9ec;
  --ink-2: #a3a9b2;
  --steel: #7d9fd0;
  --steel-deep: #9db8de;
  --blue: #7cb1ec;
  --action: #e7e9ec;
  --action-deep: #ffffff;
  --silver-1: #1c1d20;
  --silver-2: #2d2f34;
  --silver-3: #6c727c;
  --gain: #35c08f;
  --loss: #f2706f;
  --glass: rgba(22, 23, 25, 0.8);
  --glass-strong: rgba(27, 28, 31, 0.95);
  --glass-line: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32);
  --pop-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 56px rgba(0, 0, 0, 0.5);
  --t-hover: rgba(255, 255, 255, 0.07);
  --t-row: rgba(255, 255, 255, 0.035);
  --t-dim: rgba(0, 0, 0, 0.5);
  --t-sell: #e5484d;
  --t-sell-deep: #c93a40;
  --t-warn: #f0a04b;
  --t-sma: #ff8f5a;
  --t-ema: #a78bfa;
  --t-bb: #8b95a5;
  --t-draw: #5b9bff;
  --t-star: #f5b84b;
  color-scheme: dark;
}
/* Buttons in ink take the paper's colour for their words (light paper's white, dark paper's graphite). */
:where(.terminal[data-theme="dark"]) :is(button, .button), :where(.terminal[data-theme="dark"]) :is(button, .button):hover { color: var(--paper); }
.terminal[data-theme="dark"] .t-head .mark { background: rgba(255, 255, 255, 0.94); }
.terminal[data-theme="dark"] .notice { background: var(--silver-1); border-color: var(--silver-2); }
.terminal[data-theme="dark"] .notice.important { background: rgba(240, 160, 75, 0.12); border-color: rgba(240, 160, 75, 0.45); }
.terminal[data-theme="dark"] .rail .danger { background: rgba(242, 112, 111, 0.28); }
.terminal[data-theme="dark"] .rail .goal { background: rgba(53, 192, 143, 0.28); }
/* The switch itself eases the page from one to the other. */
.terminal.theme-easing, .terminal.theme-easing * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.term { position: fixed; inset: 0; overflow: hidden; }
.term[aria-busy="true"] .t-stage { opacity: 0.5; }

/* ---- the stage: the chart, from edge to edge (a docked panel takes its side on a wide screen) */
.t-stage { position: absolute; inset: 0 0 var(--dock-h) 0; container: stage / size; transition: opacity 0.4s ease; }
.term.dock-r .t-stage { right: calc(var(--sheet-w) + var(--edge) * 2); }
.term.dock-b .t-stage { bottom: calc(var(--book-h) + var(--edge) * 2); }
.t-canvas { position: absolute; inset: 0; }
.t-cv { display: block; touch-action: none; cursor: crosshair; }
.t-cv:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; }

/* ---- glass, icons and tips */
.t-glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  backdrop-filter: saturate(1.8) blur(16px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
}
.t-glass:hover { border-color: var(--glass-line); }
.t-icon {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 9px; background: none; color: var(--ink-2); cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.t-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.t-icon:hover { background: var(--t-hover); color: var(--ink); }
.t-icon:active { transform: scale(0.92); }
.t-icon[aria-pressed="true"], .t-icon[aria-expanded="true"], .t-icon.is-on { background: var(--ink); color: var(--paper); }
.t-icon:disabled { opacity: 0.35; cursor: default; background: none; color: var(--ink-2); transform: none; }
.t-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--steel); color: var(--paper); font-size: var(--t-caption); font-weight: 600; line-height: 16px; }
@media (hover: hover) {
  [data-tip]:hover::after {
    content: attr(data-tip); position: absolute; z-index: 30; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%);
    padding: 5px 9px; border-radius: 7px; background: var(--ink); color: var(--paper); font-size: var(--t-caption); font-weight: 500; white-space: nowrap;
    pointer-events: none; opacity: 0; animation: t-tip 0.16s 0.4s var(--ease-out) forwards;
  }
  .t-zoom [data-tip]:hover::after, .t-flyout [data-tip]:hover::after { left: 50%; top: auto; bottom: calc(100% + 8px); transform: translate(-50%, 4px); animation-name: t-tip-up; }
  .t-head [data-tip]:hover::after { left: 50%; top: calc(100% + 10px); transform: translate(-50%, -4px); animation-name: t-tip-up; }
  /* What a control opens is shown: its tip is not. */
  [aria-expanded="true"][data-tip]:hover::after { content: none; }
  .t-tools-right [data-tip]:hover::after { left: auto; right: calc(100% + 10px); transform: translate(4px, -50%); }
}
@keyframes t-tip { to { opacity: 1; transform: translate(0, -50%); } }
@keyframes t-tip-up { to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- the bar over the chart */
.t-head {
  position: absolute; z-index: 12; top: var(--edge); left: var(--edge); right: var(--edge); height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none;
}
.t-head-l, .t-head-r { display: flex; align-items: center; gap: 8px; min-width: 0; pointer-events: none; }
.t-head-l > *, .t-head-r > * { pointer-events: auto; }
.t-head .mark { display: grid; place-items: center; width: 56px; height: var(--bar-h); border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); }
.t-head .mark img { height: 34px; }
.t-symbol { display: inline-flex; align-items: center; gap: 10px; height: var(--bar-h); min-height: var(--bar-h); padding: 0 10px 0 14px; color: var(--ink); cursor: pointer; transition: background-color 0.2s ease, transform 0.12s ease; }
.t-symbol:hover { background: var(--glass-strong); color: var(--ink); }
.t-symbol:active { transform: scale(0.98); }
.t-symbol-name { font-size: var(--t-title); font-weight: 600; letter-spacing: -0.01em; }
.t-symbol-quote { font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; }
.t-symbol-quote b { color: var(--ink); font-weight: 600; }
.t-chev { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.28s var(--ease-out); }
[aria-expanded="true"] > .t-chev { transform: rotate(180deg); }

/* the timeframes: an ink pill glides under the one chosen */
.t-seg { display: inline-flex; border: var(--t-line); border-radius: var(--radius-s); padding: 2px; gap: 2px; background: var(--paper); }
.t-seg button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--ink-2); font-weight: 500; font-size: var(--t-text); }
.t-seg button:hover { background: var(--silver-1); color: var(--ink); }
.t-seg button[aria-pressed="true"], .t-seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.t-tf { position: relative; height: var(--bar-h); align-items: center; padding: 4px; gap: 0; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); }
.t-tf-favs { position: relative; display: flex; align-items: center; height: 100%; }
.t-tf-more { width: 30px; height: 34px; min-height: 34px; margin-left: 2px; border-radius: 8px; }
.t-tf-more svg { width: 16px; height: 16px; transition: transform 0.28s var(--ease-out); }
.t-tf-more[aria-expanded="true"] { background: var(--t-hover); color: var(--ink); }
.t-tf-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.t-tf-favs button.t-tf-extra { box-shadow: inset 0 0 0 1px var(--silver-2); }
.t-tf button { position: relative; z-index: 1; min-height: 34px; padding: 0 11px; border-radius: 8px; transition: color 0.25s ease, background-color 0.25s ease; }
.t-tf.has-ink button, .t-tf.has-ink button:hover { background: none; }
.t-tf.has-ink button[aria-pressed="true"] { color: var(--paper); }
.t-tf-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 8px; background: var(--ink); transition: left 0.38s var(--ease-spring), width 0.38s var(--ease-spring); }
.t-chart-tools { display: inline-flex; align-items: center; gap: 2px; height: var(--bar-h); padding: 0 4px; }
.t-theme .t-sun, .t-theme[aria-pressed="true"] .t-moon { display: none; }
.t-theme[aria-pressed="true"] .t-sun { display: block; }
.t-theme[aria-pressed="true"] { background: none; color: var(--ink-2); }
.t-theme[aria-pressed="true"]:hover { background: var(--t-hover); color: var(--ink); }
.t-tf-now:hover { background: var(--glass-strong); color: var(--ink); }
.t-tf-now { display: none; height: var(--bar-h); min-height: var(--bar-h); padding: 0 14px; color: var(--ink); font-weight: 600; font-size: var(--t-text); }

/* the connection, the positions, the account, the way to trade */
.t-conn { margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 0 6px; font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; }
.t-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--silver-3); }
.t-conn[data-state="live"] .t-dot { background: var(--gain); animation: t-live 2.4s ease-out infinite; }
.t-conn[data-state="reconnecting"] .t-dot { background: var(--t-warn); }
.t-conn[data-state="offline"] .t-dot { background: var(--loss); }
@keyframes t-live { 0% { box-shadow: 0 0 0 0 rgba(19, 121, 91, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(19, 121, 91, 0); } }
.t-pill {
  position: relative; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-content: center; justify-items: start;
  height: var(--bar-h); min-height: var(--bar-h); padding: 0 14px; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color 0.2s ease, transform 0.12s ease;
}
.t-pill:hover { background: var(--glass-strong); color: var(--ink); }
.t-pill:active { transform: scale(0.98); }
.t-pill-k { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); font-weight: 400; color: var(--ink-2); line-height: 1.2; }
.t-pill-k b { color: var(--ink); font-weight: 600; }
.t-pill-v { font-size: var(--t-text); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.t-pill-v.gain { color: var(--gain); }
.t-pill-v.loss { color: var(--loss); }
.t-pill-room { align-self: end; font-size: var(--t-caption); color: var(--ink-2); line-height: 1.4; white-space: nowrap; }
.t-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); }
.t-pill-dot.paused { background: var(--t-warn); }
.t-pill-dot.ended { background: var(--loss); }
.t-pill-dot.watch { background: var(--silver-3); }
/* The meter beside "Equity": where equity stands between the maximum-loss floor (empty) and the target (full). */
.t-meter { position: absolute; top: 12px; right: 14px; width: 48px; height: 4px; border-radius: 2px; background: var(--silver-2); overflow: hidden; }
.t-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 2px; background: var(--steel); transition: width 0.7s var(--ease-out), background-color 0.3s ease; }
.t-meter-fill.near { background: var(--t-warn); }
.t-meter-fill.danger { background: var(--loss); }
.t-trade-btn {
  height: var(--bar-h); min-height: var(--bar-h); padding: 0 22px; border-radius: 12px; border: 0; background: var(--ink); color: var(--paper);
  font-size: var(--t-text); font-weight: 600; box-shadow: var(--glass-shadow); transition: background-color 0.2s ease, transform 0.12s ease;
}
.t-trade-btn:hover { background: var(--action-deep); }
.t-trade-btn:active { transform: scale(0.97); }
.t-trade-btn[aria-expanded="true"] { background: var(--steel); }

/* ---- notices and the margin warning, under the bar */
.t-notices { position: absolute; z-index: 11; top: calc(var(--edge) * 2 + var(--bar-h)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - var(--edge) * 2)); display: grid; gap: 6px; padding: 0; }
.t-notices .notice { padding: 8px 14px; font-size: var(--t-text); border-radius: 12px; box-shadow: var(--glass-shadow); }
.t-notices .notice-close { font-size: inherit; }
.t-margin-warn { position: absolute; z-index: 11; top: calc(var(--edge) * 2 + var(--bar-h)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - var(--edge) * 2)); margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--loss) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent); color: var(--loss); font-size: var(--t-text); font-weight: 600; box-shadow: var(--glass-shadow); }

/* ---- the tools down the side */
.t-tools { position: absolute; z-index: 10; left: var(--edge); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 14px; }
.t-tools-toggle { display: none; }
/* Moved by its grip (computers): its place kept with the trader's settings; on the right half its flyouts open leftwards. */
.t-grip { display: grid; place-items: center; width: 36px; height: 14px; min-height: 14px; margin: -2px 0 2px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--silver-3); cursor: grab; touch-action: none; }
.t-grip svg { width: 20px; height: 8px; fill: currentColor; }
.t-grip:hover { background: var(--t-hover); color: var(--ink-2); }
.t-tools.is-moving { transition: none; cursor: grabbing; box-shadow: var(--pop-shadow); }
.t-tools.is-moving .t-grip { cursor: grabbing; }
.t-tools.t-tools-right .t-flyout { left: auto; right: calc(100% + 12px); transform: translate(6px, -50%) scale(0.96); transform-origin: right center; }
.t-tools.t-tools-right .t-flyout.is-open { transform: translate(0, -50%); }
/* A group's button shows the tool last picked from it, and a mark in its corner says there are more. */
.t-group-tool { position: relative; }
.t-group-btn::before { content: ""; position: absolute; right: 4px; bottom: 4px; width: 0; height: 0; border: 2.5px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: 0.55; }
.t-flyout {
  position: absolute; z-index: 2; left: calc(100% + 12px); top: 50%; display: flex; gap: 2px; padding: 4px; border-radius: 12px;
  background: var(--glass-strong); box-shadow: var(--pop-shadow);
  opacity: 0; transform: translate(-6px, -50%) scale(0.96); transform-origin: left center;
  transition: opacity 0.16s ease, transform 0.3s var(--ease-spring);
}
.t-flyout.is-open { opacity: 1; transform: translate(0, -50%); }
.t-tools-toggle.is-active { background: var(--steel); color: var(--paper); }
#draw-clear.is-armed { background: var(--loss); color: var(--paper); }
.t-draw { display: flex; flex-direction: column; gap: 2px; }
.t-sep { width: 20px; height: 1px; margin: 4px 0; background: var(--silver-2); }

@media (min-width: 761px) {
  @container stage (max-height: 700px) {
    .t-tools { top: calc(var(--edge) * 2 + var(--bar-h)); transform: none; padding: 4px; gap: 1px; }
    .t-tools .t-icon { width: 32px; height: 32px; min-height: 32px; }
    .t-tools .t-sep { margin: 2px 0; }
  }
  @container stage (max-height: 520px) {
    .t-tools .t-icon { width: 28px; height: 28px; min-height: 28px; }
    .t-tools .t-icon svg { width: 18px; height: 18px; }
  }
}

/* ---- the selected drawing's look, floating under the bar */
.t-drawbar {
  position: absolute; z-index: 9; top: calc(var(--edge) * 2 + var(--bar-h)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 12px; max-width: calc(100% - var(--edge) * 2); flex-wrap: wrap; justify-content: center;
}
.t-drawbar:not([hidden]) { animation: t-bar-in 0.26s var(--ease-spring) both; }
@keyframes t-bar-in { from { opacity: 0; transform: translate(-50%, -6px) scale(0.97); } }
.t-db-colour { position: relative; }
.t-db-swatch { display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.t-db-swatch:hover { background: var(--t-hover); }
.t-db-swatch span { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.t-db-palette { position: absolute; z-index: 3; top: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(6, 26px); gap: 6px; padding: 8px; border-radius: 12px; background: var(--glass-strong); box-shadow: var(--pop-shadow); }
.t-db-palette button { width: 26px; height: 26px; min-height: 26px; padding: 0; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); cursor: pointer; transition: transform 0.15s var(--ease-spring); }
.t-db-palette button:hover { transform: scale(1.12); }
.t-db-palette button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.t-db-palette label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: var(--t-caption); color: var(--ink-2); }
.t-db-palette input[type="color"] { width: 40px; min-height: 26px; padding: 1px; border-radius: 6px; }
.t-db-range { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); color: var(--ink-2); }
.t-db-range input[type="range"] { width: 84px; min-height: 24px; padding: 0; border: 0; background: none; accent-color: var(--steel); }
.t-db-range output { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.t-db-seg { padding: 2px; gap: 1px; }
.t-db-seg button { display: grid; place-items: center; width: 30px; min-height: 28px; padding: 0; }
.t-db-seg button span { display: block; width: 16px; border-radius: 2px; background: currentColor; }
.t-db-w1 { height: 1px; }
.t-db-w2 { height: 2px; }
.t-db-w3 { height: 3px; }
.t-db-w4 { height: 4px; }
.t-db-seg svg { width: 22px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.t-drawbar .t-icon { width: 32px; height: 32px; min-height: 32px; }
@media (hover: hover) {
  .t-drawbar [data-tip]:hover::after { left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); animation-name: t-tip-up; }
}

/* ---- zoom, at the bottom of the chart (shown while the pointer is over it) */
.t-zoom { position: absolute; z-index: 6; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); opacity: 0; transition: opacity 0.25s ease; }
.t-stage:hover .t-zoom, .t-zoom:focus-within { opacity: 1; }
.t-zoom .t-icon { width: 32px; height: 32px; min-height: 32px; }

/* ---- the chart's own overlays: one-click trading, a paused instrument, the questions */
.t-oneclick { position: absolute; top: calc(var(--edge) * 2 + var(--bar-h)); right: calc(var(--axis-w) + 12px); z-index: 4; display: flex; align-items: stretch; gap: 4px; padding: 4px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.t-oc { min-height: 40px; padding: 2px 14px; display: grid; gap: 0; justify-items: center; line-height: 1.15; font-size: var(--t-caption); border-radius: 8px; }
.t-oc b { font-size: var(--t-figure); font-weight: 600; }
.t-oc[data-oc="sell"] { background: var(--t-sell); border-color: var(--t-sell); }
.t-oc[data-oc="sell"]:hover { background: var(--t-sell-deep); border-color: var(--t-sell-deep); }
.t-oc-lots { align-self: center; padding: 0 4px; font-size: var(--t-caption); font-weight: 600; color: var(--ink-2); }
.t-confirm { position: absolute; top: calc(var(--edge) * 2 + var(--bar-h) + 52px); left: 50%; transform: translateX(-50%); z-index: 6; width: min(440px, calc(100% - 24px)); display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--pop-shadow); font-size: var(--t-text); }
.t-confirm p { margin: 0; color: var(--ink); }
.t-confirm-acts { display: flex; gap: 8px; }
.t-confirm-acts button { min-height: 34px; padding: 0 14px; }
.t-paused {
  position: absolute; top: calc(var(--edge) * 2 + var(--bar-h)); left: 50%; transform: translateX(-50%); z-index: 3;
  max-width: min(520px, 90%); margin: 0; padding: 8px 14px; border-radius: 12px;
  background: var(--glass-strong); border: 1px solid rgba(181, 71, 8, 0.35); box-shadow: inset 3px 0 0 var(--t-warn), var(--glass-shadow);
  color: var(--ink); font-size: var(--t-text); text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .t-confirm:not([hidden]) { animation: t-pop-in 0.32s var(--ease-spring) both; }
}
@keyframes t-pop-in { from { opacity: 0; transform: translate(-50%, -8px) scale(0.97); } }

/* ---- pop-outs: they open from what was pressed, and sheets slide in from the side or the bottom */
.t-scrim { position: absolute; inset: 0; z-index: 15; background: var(--t-dim); opacity: 0; transition: opacity 0.3s ease; }
.t-scrim.is-open { opacity: 1; }
.t-pop {
  position: absolute; z-index: 20; top: calc(var(--edge) * 2 + var(--bar-h)); max-height: calc(100% - var(--bar-h) - var(--edge) * 4); overflow: auto;
  padding: 10px 14px 14px; border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--pop-shadow);
  -webkit-backdrop-filter: saturate(1.8) blur(24px); backdrop-filter: saturate(1.8) blur(24px);
  opacity: 0; transform: translateY(-10px) scale(0.96); transform-origin: top left;
  transition: opacity 0.18s ease, transform 0.34s var(--ease-spring);
}
.t-pop.is-open { opacity: 1; transform: none; }
.t-pop-l { left: calc(var(--edge) + 64px); width: min(420px, calc(100% - var(--edge) * 2)); }
.t-pop-r { right: var(--edge); width: min(400px, calc(100% - var(--edge) * 2)); transform-origin: top right; }
.t-pop-tools { left: calc(var(--edge) + 60px); width: min(340px, calc(100% - var(--edge) * 2)); }
.t-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -4px 6px 0; }
.t-pop-head .t-h { padding: 6px 0; }
.t-close { flex: none; width: 32px; height: 32px; min-height: 32px; margin-left: auto; }
.t-pop:focus, .t-sheet:focus { outline: none; }
.t-sheet {
  position: absolute; z-index: 16; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--pop-shadow);
  -webkit-backdrop-filter: saturate(1.8) blur(24px); backdrop-filter: saturate(1.8) blur(24px);
  transition: transform 0.38s var(--ease-out), opacity 0.2s ease;
}
.t-sheet-r { top: calc(var(--edge) * 2 + var(--bar-h)); right: var(--edge); bottom: var(--edge); width: var(--sheet-w); overflow: auto; padding: 10px 16px 16px; transform: translateX(calc(100% + var(--edge) * 2)); }
.t-sheet-b { left: var(--edge); right: var(--edge); bottom: var(--edge); height: var(--book-h); transform: translateY(calc(100% + var(--edge) * 2)); }
.term.dock-r .t-sheet-b { right: calc(var(--sheet-w) + var(--edge) * 2); }
.t-sheet.is-open { transform: none; }

/* ---- type in the pop-outs */
.t-h { font-size: var(--t-figure); font-weight: 600; padding: 10px var(--t-pad) 8px; }
.t-meta { color: var(--ink-2); font-size: var(--t-text); white-space: nowrap; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }

/* ---- the account: which one, its figures, its rules */
.t-account { display: grid; gap: 6px; margin-bottom: 12px; }
.t-account select { width: 100%; min-height: 40px; font-weight: 600; font-size: var(--t-figure); padding: 0 30px 0 12px; border-radius: 10px; }
.t-account select:disabled { opacity: 1; color: var(--ink); background: var(--silver-1); border-color: transparent; cursor: default; appearance: none; padding-right: 12px; }
.t-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--silver-1); }
.t-fig { display: grid; gap: 0; min-width: 0; }
.t-fig dt { font-size: var(--t-caption); color: var(--ink-2); }
.t-fig dd { margin: 0; font-weight: 500; font-size: var(--t-figure); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-fig-key dd { font-weight: 600; }
.t-rules { display: grid; gap: 6px; margin-bottom: 12px; }
.t-rail .rail { margin: 0 8px; }
.t-rail .rail .label, .t-rail .rail .needle-label { font-size: var(--t-caption); }
.t-rules-text { display: grid; gap: 4px; font-size: var(--t-text); }
.t-room { color: var(--ink); display: flex; flex-wrap: wrap; gap: 2px 20px; }
.t-room b { font-weight: 600; }
.t-status { color: var(--ink-2); }
.t-status.paused { color: var(--t-warn); }
.t-status.ended { color: var(--loss); }
.t-pop-links { display: flex; gap: 18px; margin: 4px 0 0; padding-top: 10px; border-top: var(--t-line); font-size: var(--t-text); }
.t-pop-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.t-pop-links a:hover { text-decoration: underline; }

/* ---- watching, before a first challenge (terminal.js watchOnly) */
.term[data-mode="watch"] .t-book-pill, .term[data-mode="watch"] .t-dock-book, .term[data-mode="watch"] .t-figs, .term[data-mode="watch"] .t-rules, .term[data-mode="watch"] .t-meter { display: none; }
.t-watchonly { display: grid; gap: 12px; padding: 0 0 18px; font-size: var(--t-text); color: var(--ink-2); }
.term[data-mode="watch"] #pop-trade .t-pop-head { position: absolute; top: 10px; right: 12px; margin: 0; }
.t-watchonly .t-h { padding-left: 0; padding-right: 0; }
.t-watchonly-lead { color: var(--ink); font-size: var(--t-figure); font-weight: 500; }
.t-watchonly .button { justify-self: start; }

/* ---- tables */
.t-table { width: 100%; border-collapse: collapse; font-size: var(--t-text); }
.t-table th { position: sticky; top: 0; z-index: 1; background: var(--glass-strong); text-align: left; font-weight: 500; color: var(--ink-2); padding: 6px 10px; border-bottom: var(--t-line); white-space: nowrap; }
.t-table td { padding: 7px 10px; border-bottom: 1px solid var(--silver-1); white-space: nowrap; }
.t-table .n { text-align: right; }
.t-table tbody tr { transition: background-color 0.15s ease; }
.t-table tbody tr:hover td { background: var(--t-row); }
.t-empty { padding: 18px var(--t-pad); color: var(--ink-2); font-size: var(--t-text); }
.t-more { margin: 10px var(--t-pad) 16px; min-height: 34px; font-size: var(--t-text); }
.t-scroll { overflow: auto; min-height: 0; flex: 1; }

/* the instruments: search, groups, favourites */
.t-watch { display: flex; flex-direction: column; min-height: 0; }
.t-watch .t-h { padding: 6px 0; }
.t-watch-tools { display: grid; gap: 8px; padding: 0 0 8px; }
.t-watch-tools input[type="search"] { min-height: 38px; font-size: var(--t-text); border-radius: 10px; background: var(--silver-1); border-color: transparent; }
.t-watch-tools input[type="search"]:focus { background: var(--paper); }
.t-watch .t-scroll { max-height: min(58vh, 560px); margin: 0 -14px; }
.t-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.t-chips button { min-height: 28px; padding: 0 10px; border-radius: 999px; border: var(--t-line); background: var(--paper); color: var(--ink-2); font-size: var(--t-caption); transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.t-chips button:hover { background: var(--silver-1); color: var(--ink); border-color: var(--silver-2); }
.t-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.t-watchlist .t-group th { position: static; padding: 12px 6px 4px 14px; font-size: var(--t-caption); font-weight: 600; border-bottom: 1px solid var(--silver-1); background: none; }
.t-watchlist tbody .t-group:hover th { background: none; }
.t-watchlist td.t-name { white-space: nowrap; }
.t-star { min-height: 24px; width: 24px; margin-right: 2px; padding: 0; border: 0; background: none; color: var(--silver-3); font-size: var(--t-figure); line-height: 1; vertical-align: middle; transition: color 0.18s ease, transform 0.18s var(--ease-spring); }
.t-star:hover { background: none; color: var(--ink); }
.t-star[aria-pressed="true"] { color: var(--t-star); transform: scale(1.12); }
.t-watchlist td, .t-watchlist th { padding-left: 6px; padding-right: 6px; }
.t-watchlist td:first-child { padding-left: 12px; }
.t-watchlist thead th:first-child { padding-left: 40px; }
.t-watchlist td:last-child, .t-watchlist th:last-child { padding-right: var(--t-pad); }
.t-watchlist tbody tr { cursor: pointer; }
.t-watchlist tbody tr[aria-selected="true"] td { background: rgba(61, 90, 128, 0.08); }
.t-watchlist tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--steel); }
.t-watchlist .sym { font-weight: 600; }
.t-watchlist .paused td { color: var(--silver-3); }
.t-watchlist .paused .t-flag { color: var(--t-warn); }
.t-flag { font-size: var(--t-caption); }
.t-up { color: var(--gain); }
.t-down { color: var(--loss); }
/* Every timeframe: chips with a star; the chosen one in ink. */
.t-pop-tf { width: min(380px, calc(100% - var(--edge) * 2)); }
.t-sub { margin: 10px 0 6px; font-size: var(--t-caption); font-weight: 600; color: var(--ink-2); }
.t-tf-grid, .t-tf-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.t-tf-all { display: grid; gap: 4px; }
.t-tf-group { margin: 6px 0 2px; font-size: var(--t-caption); color: var(--ink-2); }
.t-tf-chip { position: relative; display: flex; }
.t-tf-chip > button[data-tf] { flex: 1; min-height: 40px; padding: 0 22px 0 10px; border-radius: 10px; background: var(--silver-1); border: 0; color: var(--ink); font-size: var(--t-text); font-weight: 600; text-align: left; transition: background-color 0.18s ease, color 0.18s ease; }
.t-tf-chip > button[data-tf]:hover { background: var(--silver-2); color: var(--ink); }
.t-tf-chip > button[data-tf][aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.t-tf-chip .t-star { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 22px; min-height: 22px; font-size: var(--t-text); }
.t-tf-chip .t-star[aria-pressed="true"] { transform: translateY(-50%) scale(1.12); }
.t-tf-chip > button[data-tf][aria-pressed="true"] + .t-star { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.t-tf-chip > button[data-tf][aria-pressed="true"] + .t-star[aria-pressed="true"] { color: var(--t-star); }

/* ---- indicators and the chart's look */
.t-ind { display: grid; gap: 10px; }
.t-ind fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; margin: 0; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--silver-1); }
.t-ind legend { padding: 0; margin-bottom: 6px; font-size: var(--t-caption); font-weight: 600; color: var(--ink-2); }
.t-ind legend label { display: flex; align-items: center; gap: 8px; font-size: var(--t-text); font-weight: 500; color: var(--ink); }
.t-ind label { font-size: var(--t-caption); color: var(--ink-2); gap: 3px; }
.t-ind input[inputmode] { width: 72px; min-height: 32px; padding: 0 8px; font-size: var(--t-text); border-radius: 8px; }
.t-ind input[type="checkbox"], .t-switch input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--steel); }
.t-ind .t-hint { margin: 0; }
.t-style .t-choices { display: grid; gap: 6px; width: 100%; }
.t-style .t-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-style .t-choices label { display: flex; align-items: center; gap: 8px; font-size: var(--t-text); color: var(--ink); }
.t-style input[type="radio"], .t-style input[type="checkbox"] { width: 16px; min-height: 16px; margin: 0; accent-color: var(--steel); }
.t-sets { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.t-sets button { min-height: 30px; padding: 0 10px; font-size: var(--t-text); }
.t-sets button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.t-style .t-colour { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 8px; font-size: var(--t-text); color: var(--ink-2); }
.t-colour input[type="color"] { width: 40px; min-height: 30px; padding: 2px; border-radius: var(--radius-s); cursor: pointer; }
#style-reset { justify-self: start; min-height: 32px; padding: 0 12px; font-size: var(--t-text); }

/* ---- the order ticket */
.t-ticket { display: grid; gap: 4px; }
.t-ticket .t-h { padding: 6px 0; }
.t-ticket-symbol { color: var(--ink-2); font-weight: 500; }
.t-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--t-text); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.t-form { display: grid; gap: 12px; padding: 0 0 8px; }
.t-form label { font-size: var(--t-caption); }
.t-form input, .t-form select { min-height: 38px; font-size: var(--t-text); }
.t-side, .t-type { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.t-type button { padding: 0 4px; }
.t-side button { min-height: 40px; font-size: var(--t-figure); transition: background-color 0.2s ease, color 0.2s ease; }
.t-side button[data-side="buy"][aria-pressed="true"] { background: var(--steel); }
.t-side button[data-side="sell"][aria-pressed="true"] { background: var(--t-sell); }
.t-stepper { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 6px; }
.t-step { min-height: 38px; padding: 0; background: var(--paper); color: var(--steel); font-size: var(--t-figure); }
.t-step:hover { background: var(--silver-1); color: var(--steel-deep); }
.t-hint { color: var(--ink-2); font-weight: 400; font-size: var(--t-caption); }
.t-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t-pair:has(> .t-expiry-at[hidden]) { grid-template-columns: 1fr; }
.t-estimate { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 12px; border-radius: 10px; background: var(--silver-1); font-size: var(--t-text); }
.t-estimate:empty { display: none; }
.t-estimate dt { color: var(--ink-2); }
.t-estimate dd { margin: 0; text-align: right; font-weight: 500; }
.t-estimate .t-risk { color: var(--loss); }
.t-send { min-height: 46px; font-size: var(--t-figure); border-radius: 10px; transition: background-color 0.2s ease, transform 0.12s ease; }
.t-send:active { transform: scale(0.985); }
.t-send[data-side="sell"] { background: var(--t-sell); border-color: var(--t-sell); }
.t-send[data-side="sell"]:hover { background: var(--t-sell-deep); border-color: var(--t-sell-deep); }

/* ---- positions, orders, history */
.t-book { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.t-book-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 8px 14px; }
.t-booktabs { align-self: flex-start; }
.t-count { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: var(--silver-1); color: var(--ink-2); font-size: var(--t-caption); }
.t-booktabs button[aria-selected="true"] .t-count { background: color-mix(in srgb, var(--paper) 22%, transparent); color: var(--paper); }
.t-bookbody { border-top: var(--t-line); }
.t-actions { display: flex; gap: 6px; justify-content: flex-end; }
.t-actions button, .t-edit button { min-height: 28px; padding: 0 10px; font-size: var(--t-text); }
.t-edit td { background: var(--silver-1); }
.t-edit form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.t-edit label { font-size: var(--t-caption); }
.t-edit input { min-height: 32px; width: 120px; font-size: var(--t-text); }
.t-edit .error { min-height: 0; margin: 0; align-self: center; }
.t-activity { list-style: none; margin: 0; padding: 0; font-size: var(--t-text); }
.t-activity li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 7px var(--t-pad); border-bottom: 1px solid var(--silver-1); }
.t-activity time { color: var(--ink-2); white-space: nowrap; }

/* ---- the gate (signed out, nothing to show) and notices */
.t-gate { position: fixed; inset: 0; display: grid; place-content: center; justify-items: start; gap: 14px; padding: 24px; background: var(--paper); z-index: 40; }
.t-gate h1 { font-size: var(--step-2); }
.t-gate p { color: var(--ink-2); }
.t-toasts { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 24px); transform: translateX(-50%); z-index: 30; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; width: min(380px, calc(100vw - 32px)); }
.t-toasts li { padding: 11px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: var(--t-text); box-shadow: var(--pop-shadow); }
.t-toasts li.bad { background: var(--loss); }
@media (prefers-reduced-motion: no-preference) {
  .t-toasts li { animation: t-in 0.32s var(--ease-spring); }
}
@keyframes t-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* ---- the one moment the page moves by itself: the controls come in around the chart as it opens */
@media (prefers-reduced-motion: no-preference) {
  .term:not([aria-busy]) .t-head { animation: t-head-in 0.6s var(--ease-out) both; }
  .term:not([aria-busy]) .t-tools { animation: t-rail-in 0.6s 0.08s var(--ease-out) both; }
}
@keyframes t-head-in { from { opacity: 0; translate: 0 -12px; } }
@keyframes t-rail-in { from { opacity: 0; translate: -14px 0; } }
@media (prefers-reduced-motion: reduce) {
  .terminal .t-pop, .terminal .t-sheet, .terminal .t-scrim, .terminal .t-tf-ink, .terminal .t-meter-fill { transition-duration: 0.01ms; }
  .terminal .t-conn[data-state="live"] .t-dot { animation: none; }
}

/* ---- a smaller desk: the connection's words go, the ways in stay */
@media (max-width: 1279px) {
  .t-conn #conn-text { display: none; }
  .t-symbol-quote { display: none; }
  .t-tf button { padding: 0 8px; }
}

/* ---- phones: the controls on the bar, the rest along the bottom; pop-outs rise from the bottom */
@media (max-width: 760px) {
  .terminal { --edge: 8px; --bar-h: 42px; --dock-h: calc(54px + env(safe-area-inset-bottom)); }
  .t-head .mark { display: none; }
  .t-tf { display: none; }
  .t-tf-now { display: inline-flex; align-items: center; }
  .t-symbol { gap: 8px; padding: 0 8px 0 12px; }
  .t-symbol-quote { display: none; }
  .t-conn, .t-book-pill, .t-trade-btn, .t-chart-tools, .t-grip { display: none; }
  .t-acct-pill { grid-template-columns: auto; padding: 0 12px; }
  .t-pill-room, .t-meter { display: none; }
  .t-dock {
    position: absolute; z-index: 14; left: 0; right: 0; bottom: 0; height: var(--dock-h); padding: 0 6px env(safe-area-inset-bottom);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 0; border-width: 1px 0 0;
  }
  .t-dock button { min-height: 54px; border: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: var(--t-caption); font-weight: 500; padding: 0 2px; }
  .t-dock button[aria-expanded="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 2px 0 var(--steel); }
  .t-dock .t-dock-trade { color: var(--ink); font-weight: 600; }
  /* The drawing tools fold into one button on the left until it is pressed. */
  .t-tools { top: auto; bottom: 36px; transform: none; flex-direction: column-reverse; padding: 4px; animation: none; }
  .t-tools-toggle { display: grid; }
  .t-tools[data-open-state="closed"] > :not(.t-tools-toggle) { display: none; }
  .t-tools[data-open-state="open"] > :not(.t-tools-toggle) { animation: t-tool-in 0.26s var(--ease-out) both; }
  .t-zoom { display: none; }
  .t-oneclick { right: calc(var(--axis-w) + 8px); }
  .t-oc { padding: 2px 10px; min-height: 36px; }
  .t-pop, .t-sheet-r, .t-sheet-b {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: auto; max-height: 84vh; max-height: 84dvh;
    border-radius: 18px 18px 0 0; border-width: 1px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    opacity: 1; transform: translateY(105%); transform-origin: bottom center;
    transition: transform 0.38s var(--ease-out);
  }
  .t-pop::before, .t-sheet::before { content: ""; display: block; flex: none; width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--silver-2); }
  .t-pop.is-open, .t-sheet.is-open { transform: none; }
  .t-sheet-b { height: 70vh; padding: 8px 0 0; }
  .t-book-head { padding: 4px 8px 8px 12px; }
  .t-booktabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .t-booktabs button { flex: none; padding: 0 9px; }
  .t-watch .t-scroll { max-height: 56vh; margin: 0 -16px; }
  .term.dock-r .t-stage, .term.dock-b .t-stage { right: 0; bottom: var(--dock-h); }
  .t-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) {
  .t-dock { display: none; }
}
@keyframes t-tool-in { from { opacity: 0; transform: translateY(6px) scale(0.9); } }
@media (max-width: 560px) {
  .t-room { font-size: var(--t-caption); gap: 0 12px; }
  .t-status.quiet { display: none; }
  .t-send { position: sticky; bottom: 0; box-shadow: 0 -8px 12px var(--paper); }
  /* The watchlist's four columns fit a phone, crypto's wider prices too. */
  .t-watchlist td, .t-watchlist th { padding-left: 4px; padding-right: 4px; }
  .t-watchlist td:last-child, .t-watchlist th:last-child { padding-right: 10px; }
  /* Positions, orders and trades as cards: each cell labelled with its column. */
  .t-cards thead { display: none; }
  .t-cards tbody tr:not(.t-edit) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px var(--t-pad); border-bottom: var(--t-line); }
  .t-cards tbody td { padding: 0; border: 0; white-space: normal; }
  .t-cards tbody td.n { text-align: left; }
  .t-cards tbody td::before { content: attr(data-label); display: block; font-size: var(--t-caption); color: var(--ink-2); }
  .t-cards tbody td.t-act { grid-column: 1 / -1; }
  .t-cards tbody td.t-act::before { content: none; }
  .t-cards .t-actions { justify-content: flex-start; }
  .t-cards tbody tr:hover td { background: none; }
  .t-edit td { display: block; padding: 12px var(--t-pad); }
  .t-rail .rail { margin: 0; }
  .t-activity li { grid-template-columns: 1fr; gap: 2px; }
}