/*
 * The Cockpit (owner's request, 2026-10-17): the dashboard fits the window on
 * a wide screen. The money in one strip, the bots in rows with the chosen one
 * beside them, and everything else behind a tab rather than down the page.
 * Long lists scroll inside their own panel; the page itself does not.
 */
.ck { display: flex; flex-direction: column; gap: 12px; }
.ck-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ck-h1 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.ck-h2 { margin: 0 0 var(--space-2); font-size: 1rem; font-weight: 600; }
.ck-head-fill { flex: 1; }
.ck-range { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.75rem; color: var(--color-text-muted); }
.ck-note { font-size: 0.75rem; color: var(--color-text-muted); }
.ck-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; position: relative; }

/* The money strip: eight figures in one row on a wide screen, two rows of four below that (Daily average joined, 2026-10-27). */
.ck-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
/* Fewer to a row as the screen narrows, so no figure is squeezed past its text (owner, 2026-10-27: the figures spilled on a small desktop and a tablet). */
/* Seven figures: where they wrap, the last fills what the row leaves. */
@media (max-width: 1600px) { .ck-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ck-strip > :last-child { grid-column: span 2; } }
@media (max-width: 1000px) { .ck-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Each figure is its own container: its value and words size to the figure, not the window. */
.ck-fig { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 14px; min-width: 0; container-type: inline-size; overflow: hidden; }
/* A figure that leads somewhere (Needs you, when anything does): a button that looks like the others, with a hint it can be pressed. */
.ck-fig-btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-border)); }
.ck-fig-btn:hover, .ck-fig-btn:focus-visible { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-surface)); outline: none; }
.ck-fig-btn .ck-fig-sub::after { content: ' \203A'; }
/* Best streak: a link that feels like a button, pressed in when tapped; lit and gently pulsing while the streak is still going (2026-10-26). */
.ck-fig-link { text-decoration: none; border-color: var(--color-border); box-shadow: 0 2px 0 var(--color-border); transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease; }
.ck-fig-link:hover, .ck-fig-link:focus-visible { background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface)); outline: none; }
.ck-fig-link:active { transform: translateY(2px); box-shadow: 0 0 0 var(--color-border); }
.ck-fig-hot { border-color: var(--color-success); box-shadow: 0 2px 0 color-mix(in srgb, var(--color-success) 60%, var(--color-border)), 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); animation: ck-fig-glow 2.4s ease-in-out infinite; }
.ck-fig-hot:active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); }
@keyframes ck-fig-glow { 50% { box-shadow: 0 2px 0 color-mix(in srgb, var(--color-success) 60%, var(--color-border)), 0 0 0 6px color-mix(in srgb, var(--color-success) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ck-fig-hot { animation: none; } .ck-fig-link { transition: none; } }
.ck-fig-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* The value shrinks with its figure (about 13 characters, "+1,234.56 USD", always fit), never past 0.95rem. */
.ck-fig-value { font-family: var(--font-mono, monospace); font-size: clamp(0.95rem, 11.5cqi, 1.45rem); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The words under it wrap to a second line rather than being cut off. */
.ck-fig-sub { font-size: 0.75rem; color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }

/*
 * Shots today, Avg per shot, Best current streak, Best day and Best shot (owner's request, 2026-10-29: "add a tactile
 * buttons to the dashboard"; 2026-10-31: the best day and the best shot): five buttons that look pressable, with a
 * raised edge that sinks when tapped, at least 44px tall: five across, three and two on a narrow screen, two by two
 * on a phone with the last across the row.
 */
.ck-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .ck-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ck-tiles[hidden] { display: none; }
.ck-tile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 14px 12px;
  text-align: left; font: inherit; color: var(--color-text); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); border-radius: 12px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}
.ck-tile:hover { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
/* Best current streak's tooltip: the top 10 streaks by bot (owner's request, 2026-11-03). */
.ck-tile { position: relative; }
.ck-tile-tip {
  display: none; position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; cursor: default;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}
.ck-tile:hover .ck-tile-tip, .ck-tile:focus-visible .ck-tile-tip { display: flex; }
/* A figure that explains itself: Running Profit (owner's request, 2026-11-03). */
.ck-fig-has-tip { cursor: help; }
.ck-fig-has-tip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ck-float-tip {
  position: fixed; z-index: 1000; width: min(300px, calc(100vw - 32px)); padding: 10px 12px; pointer-events: none;
  font-size: 0.8rem; line-height: 1.4; text-align: left; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}
.ck-float-tip[hidden] { display: none; }
.ck-tile-tip-head { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.ck-tile-tip-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; }
.ck-tile-tip-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ck-tile-tip-n { flex: none; font-family: var(--font-mono, monospace); color: var(--color-success); }
.ck-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ck-tile:active { transform: translateY(4px); box-shadow: 0 0 0 color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.ck-tile-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.ck-tile-label::after { content: ' \203A'; }
.ck-tile-value { font-family: var(--font-mono, monospace); font-size: 1.35rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two figures in one tile: Avg per shot, today and lifetime (owner's request, 2026-11-03). */
.ck-tile-pair { display: flex; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.ck-tile-pair-part { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ck-tile-pair-label { font-size: 0.68rem; color: var(--color-text-muted); }
.ck-tile-pair .ck-tile-value { font-size: 1.05rem; }
.ck-tile-sub { font-size: 0.75rem; color: var(--color-text-muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .ck-tiles { gap: 8px; }
  .ck-tile { padding: 8px 10px 10px; }
  .ck-tile-label { font-size: 0.65rem; letter-spacing: 0.03em; }
  .ck-tile-value { font-size: 1.1rem; }
}
/* A phone: five across would be about 65px each, so rows of two, the last tile across the row; "+0.22 USD" may still wrap rather than be cut off. */
@media (max-width: 480px) {
  .ck-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-tile-tip { right: auto; width: min(280px, calc(100vw - 32px)); }
  .ck-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ck-tile-value { font-size: 0.95rem; white-space: normal; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .ck-tile { transition: none; } .ck-tile:active { transform: none; } }

/* The panels. */
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; min-height: 0; }
.ck-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ck-panel-head { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.ck-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ck-view[hidden], .ck-scroll[hidden] { display: none; }
.ck-scroll { flex: 1; min-height: 0; overflow: auto; }
.ck-view.ck-scroll { padding: 12px; }
.ck-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ck-detail { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; gap: 10px; scrollbar-color: transparent transparent; }
.ck-detail:hover { scrollbar-color: var(--color-bg-tertiary) transparent; }
.ck-feed { flex: 1 1 200px; min-height: 140px; }
.ck-feed .ck-scroll { padding: 4px 14px; }
.ck-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: var(--space-4); min-width: 0; }
.ck-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ck-empty { margin: 0; padding: 14px 4px; font-size: 0.85rem; color: var(--color-text-muted); }

/* Tabs. */
.ck-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
/* The exchange filter under the bot tabs (2026-10-20): only the exchanges the tab's bots are on. */
.ck-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 12px 2px; }
/* The cards sit 12px in from each side of the panel, as the tabs and chips above them do (owner, 2026-10-24); rows stay edge to edge. */
#bot-grid { padding: 4px 12px 12px; }
.ck-chips[hidden] { display: none; }
.ck-chips-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 2px; }
.ck-chip { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 0.8rem; cursor: pointer; }
.ck-chip:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.ck-chip.is-on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.ck-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* A market section's heading (owner's request, 2026-11-01): a handle to drag it, and a + or - to hide or show it. */
.bot-group-head { font-size: 0.9rem; font-weight: 600; margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 4px; }
.bot-group-grip { flex: none; min-width: 28px; min-height: 28px; padding: 0 4px; font: inherit; font-weight: 700; letter-spacing: 1px; line-height: 1; color: var(--color-text-muted); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: grab; touch-action: none; user-select: none; }
.bot-group-grip:hover, .bot-group-grip:focus-visible { color: var(--color-text); border-color: var(--color-border); }
.bot-group-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 6px 0 2px; font: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.bot-group-toggle:hover .bot-group-sign, .bot-group-toggle:focus-visible .bot-group-sign { color: var(--color-text); border-color: var(--color-text-muted); }
.bot-group-sign { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-family: monospace; font-size: 0.85rem; line-height: 1; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.bot-group.is-collapsed .bot-group-grid, .bot-group.is-collapsed .bot-group-empty { display: none !important; }
.bot-group.is-dragging { opacity: 0.55; }
.bot-group.is-dragging .bot-group-grip { cursor: grabbing; }
.bot-group.is-drop-before { box-shadow: 0 -3px 0 var(--color-accent); }
.bot-group.is-drop-after { box-shadow: 0 3px 0 var(--color-accent); }
.ck-subtabs { flex: none; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.ck-tab { height: 34px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ck-tab:hover { color: var(--color-text); background: var(--color-bg-secondary); }
.ck-tab.is-on { background: var(--color-accent); color: #fff; }
.ck-tab-n { font-family: var(--font-mono, monospace); font-weight: 500; opacity: 0.85; }
.ck-tab-badge { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: middle; }
.ck-tab.is-on .ck-tab-badge { background: #fff; color: var(--color-accent); }
.ck-tabs-small .ck-tab { height: 30px; padding: 0 10px; font-size: 0.8rem; }
.ck-tabs-small .ck-tab.is-on { background: var(--color-bg-tertiary); color: var(--color-text); }

/* The bot rows. */
.ck-rows { display: flex; flex-direction: column; }
.ck-row {
  display: grid; grid-template-columns: 10px minmax(0, 2fr) minmax(0, 2.2fr) 96px 108px; gap: 12px; align-items: center;
  width: 100%; min-height: 48px; padding: 4px 14px; border: 0; border-bottom: 1px solid var(--color-border);
  background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
}
.ck-row:hover { background: var(--color-bg-secondary); }
.ck-row.is-on { background: color-mix(in srgb, var(--color-accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--color-accent); }
.ck-dot { width: 9px; height: 9px; border-radius: 3px; }
.ck-row-name, .ck-result-what { display: flex; flex-direction: column; min-width: 0; }
.ck-row-title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A bot held for want of money: tagged here, not counted in Needs you (2026-10-20). */
.funds-tag { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--color-danger); background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; vertical-align: middle; max-width: 100%; white-space: normal; }
/* A Sniper whose learning raised its floors after a loss, so it shoots less (2026-10-23). */
.learned-tag { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); font-size: 0.68rem; font-weight: 700; line-height: 1.5; max-width: 100%; white-space: normal; cursor: help; }
/*
 * A paper bot ready to promote to live (owner's request, 2026-11-01), by the
 * rule in js/promote.js: a light green tile with a tag saying so, on the
 * dashboard's rows and cards here and on the Bots page (fit-perf.css). A
 * chosen row keeps its accent edge, so the choice still shows on the green.
 */
.promote-tag { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--color-promote-border); background: var(--color-surface); color: var(--color-promote-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; vertical-align: middle; max-width: 100%; white-space: nowrap; }
.bot-card.is-promotable { --bot-tile-bg: var(--color-promote-bg); }
/* Promote to live on the Bots page (owner's request, 2026-11-03). */
.bots-promote { margin-right: 6px; white-space: nowrap; font-size: 0.78rem; }
.bots-promote.is-ready { color: var(--color-success); border-color: var(--color-success); font-weight: 600; }
.promote-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(0 0 0 / 55%); }
.promote-dialog { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 12px; }
.promote-dialog h2 { margin: 0 0 8px; font-size: 1.1rem; }
.promote-dialog p { margin: 0 0 10px; font-size: 0.9rem; }
.promote-field { display: block; margin-bottom: 10px; font-size: 0.8rem; color: var(--color-text-muted); }
.promote-field input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; font: inherit; font-size: 0.95rem; color: var(--color-text); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 8px; }
.promote-dialog .promote-note { font-size: 0.8rem; color: var(--color-text-muted); }
.promote-confirm { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; font-size: 0.9rem; color: var(--color-danger); }
.promote-dialog .promote-status { min-height: 1.2em; font-size: 0.85rem; }
.promote-status[data-bad] { color: var(--color-danger); }
.promote-acts { display: flex; justify-content: flex-end; gap: 8px; }
.ck-row.is-promotable { background: var(--color-promote-bg); box-shadow: inset 3px 0 0 var(--color-promote-border); }
.ck-row.is-promotable:hover { background: var(--color-promote-bg-hover); }
.ck-row.is-promotable.is-on { box-shadow: inset 3px 0 0 var(--color-accent), inset 0 0 0 1px var(--color-accent); }
/* A bot not running (owner's request, 2026-11-01, js/bot-running.js): a light red tile, ahead of the green. */
.bot-card.is-not-running { --bot-tile-bg: var(--color-stopped-bg); }
.ck-row.is-not-running { background: var(--color-stopped-bg); box-shadow: inset 3px 0 0 var(--color-stopped-border); }
.ck-row.is-not-running:hover { background: var(--color-stopped-bg-hover); }
.ck-row.is-not-running.is-on { box-shadow: inset 3px 0 0 var(--color-accent), inset 0 0 0 1px var(--color-accent); }
.set-in-effect { outline: 2px solid var(--color-warning); outline-offset: 4px; border-radius: 6px; }
.set-in-effect-note { display: block; margin-top: 4px; font-size: 0.76rem; line-height: 1.4; color: var(--color-warning); }
.set-in-effect-banner { margin: 0 0 var(--space-3); padding: 8px 12px; border: 1px solid var(--color-warning); border-left-width: 4px; border-radius: 8px; background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-text); font-size: 0.82rem; line-height: 1.45; }
.set-in-effect-go { margin-left: 4px; min-height: 32px; padding: 2px 10px; border: 1px solid var(--color-warning); border-radius: 6px; background: transparent; color: var(--color-warning); font: inherit; font-weight: 600; cursor: pointer; }
.ck-row-sub { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* What the bot buys and holds, one line (owner's request, 2026-10-29). */
.ck-row-buys { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-detail-buys { font-size: 0.8rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.ck-row-now { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.8rem; }
.ck-row-now-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* How close to its next sale, filling as it nears. */
.ck-meter { display: block; height: 4px; border-radius: 2px; background: var(--color-bg-tertiary); overflow: hidden; }
.ck-meter i { display: block; height: 100%; border-radius: 2px; background: var(--color-accent); transition: width 0.6s ease; }
.ck-row-price { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--color-text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A row whose state just changed flashes once. */
.ck-row.is-flash { animation: ck-flash 1.4s ease-out; }
@keyframes ck-flash { from { background: color-mix(in srgb, var(--color-accent) 28%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ck-row.is-flash { animation: none; } .ck-meter i { transition: none; } }
/* A fixed width and even digits, so "just now" turning into "12s ago" never moves what sits beside it. */
.ck-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; min-width: 24ch; font-variant-numeric: tabular-nums; }
.ck-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); animation: ck-pulse 2s ease-in-out infinite; }
.ck-live.is-stale::before { background: var(--color-warning); animation: none; }
@keyframes ck-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ck-live::before { animation: none; } }
.ck-row-pnl { font-family: var(--font-mono, monospace); font-weight: 600; font-size: 0.88rem; text-align: right; white-space: nowrap; }
.ck-result { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--color-border); }

/* The chosen bot. */
.ck-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ck-detail-name { font-size: 1.1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-detail-sub { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ck-detail-pnl { font-family: var(--font-mono, monospace); font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.ck-detail-note { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 0.85rem; line-height: 1.4; }
.ck-detail-note.is-warn { background: var(--color-warning-bg, rgba(245, 158, 11, 0.1)); color: var(--color-warning); }
/* Three lines, always: a reason that grows or shrinks does not move what is below it. */
.ck-detail-activity, .ck-detail-note { min-height: calc(3 * 1.4em + 16px); }
.ck-detail-activity { font-size: 0.85rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ck-detail-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ck-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ck-facts dt { font-size: 0.7rem; color: var(--color-text-muted); }
.ck-facts dd { margin: 0; font-family: var(--font-mono, monospace); font-size: 0.85rem; }
.ck-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ck-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.ck-btn:hover { background: var(--color-bg-secondary); }
.ck-btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.ck-btn-primary:hover { background: var(--color-brand-dark, #1d4ed8); }
.ck-sheet-close { display: none; }
.ck-detail .ck-sheet-close + #bot-detail { display: flex; flex-direction: column; gap: 10px; }
#bot-detail { display: flex; flex-direction: column; gap: 10px; }

/* A wide, tall enough screen: the dashboard is at least the window's height,
   longer when it holds more, so the page scrolls a little rather than cutting
   anything off; each list keeps to about a screen and scrolls inside itself. */
@media (min-width: 1101px) and (min-height: 640px) {
  body[data-route="dashboard"] .ck { min-height: max(560px, calc(100dvh - var(--ck-top, 72px) - var(--space-4))); }
  body[data-route="dashboard"] .ck-scroll { max-height: calc(100dvh - 160px); }
  /* The charts are as long as they are: one scroll, the page's (owner's request, 2026-11-01). */
  body[data-route="dashboard"] .ck-view[data-ck-view="charts"] { max-height: none; overflow: visible; flex: none; }
  body[data-route="dashboard"] .ck-body { flex: 1; }
  body[data-route="dashboard"] .ck-grid { flex: 1; }
}

/* Narrower: the panels stack, and each list keeps to its own height. */
@media (max-width: 1100px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  /* One scroll, the page's: the lists flow with it rather than scroll in boxes of their own. */
  .ck-main .ck-scroll, .ck-feed .ck-scroll { max-height: none; overflow: visible; }
  /* The results panel as tall as its list: at its 200px basis it cut the list off with nothing to scroll (19 Oct 2026). */
  .ck-feed { flex: none; }
  .ck-two { grid-template-columns: minmax(0, 1fr); }
}

/* A phone: two figures a row, short rows, and the chosen bot as a sheet from the bottom. */
@media (max-width: 768px) {
  /* One row of figures to swipe through, rather than a screen of them. */
  .ck-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
  .ck-fig { flex: 0 0 172px; scroll-snap-align: start; padding: 8px 12px; }
  .ck-fig-value { font-size: clamp(0.9rem, 11.5cqi, 1.15rem); }
  .ck-head { gap: 6px 8px; }
  .ck-h1 { font-size: 1.1rem; }
  .ck-range > span:first-child { display: none; }
  .ck-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; min-height: 52px; }
  .ck-row-now, .ck-row-price { display: none; }
  .ck-detail { display: none; }
  .ck-detail.is-open {
    display: flex; position: fixed; left: 0; right: 0; bottom: 62px; z-index: 150; max-height: 70vh;
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
  }
  /* Filled and raised, so it reads as a button on the panel's dark surface (owner, 2026-11-01). */
  .ck-detail.is-open .ck-sheet-close { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: flex-end; flex: none; height: 44px; min-width: 104px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--color-text-muted); background: var(--color-bg-tertiary); color: var(--color-text); font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
  .ck-detail.is-open .ck-sheet-close::before { content: "\2715"; font-size: 0.85em; }
  .ck-detail.is-open .ck-sheet-close:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
  .ck-detail.is-open .ck-sheet-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .ck-btn { height: 46px; }
}

/* A prediction market bot's shots (js/shot-slots.js): a ring per place, draining to the market's close. */
.ss { display: flex; flex-direction: column; gap: 6px; }
/* Why a bot needs the owner: what is happening, why, what to do. */
.ck-why { border: 1px solid var(--color-warning); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--color-warning) 8%, transparent); display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; line-height: 1.4; }
.ck-why.is-error { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
.ck-why-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--color-warning); }
.ck-why.is-error .ck-why-head { color: var(--color-danger); }
.ck-why-for { color: var(--color-text-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ck-why-title { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.ck-why-line { margin: 0; color: var(--color-text); }
.ck-why-line ul { margin: 4px 0 0; padding-left: 18px; }
.ck-why-line li { margin: 2px 0; }
.ck-why-line a { color: var(--color-accent); font-weight: 600; }
.ck-why-raw { font-size: 0.75rem; color: var(--color-text-muted); }
.ck-why-raw summary { cursor: pointer; }
/* The win rate against the price paid: when a bigger shot size is safe. */
.ss-record { margin: 0; font-size: 0.75rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.ss-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.ss-head b { font-family: var(--font-mono, monospace); color: var(--color-text); font-size: 0.85rem; letter-spacing: 0; }
.ss-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.ss-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.ss-ring { flex: none; }
.ss-what { font-size: 0.72rem; font-weight: 600; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ss-sub { font-size: 0.66rem; color: var(--color-text-muted); line-height: 1.25; }
.ss-free .ss-what { color: var(--color-text-muted); font-weight: 400; }

/* Wins and losses on a bot's tile and its detail (js/bot-stats-view.js renderWinLoss). */
.win-loss { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.75rem; color: var(--color-text-muted); min-width: 0; }
.win-loss-bar { flex: 0 0 72px; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--color-bg-tertiary); }
.win-loss-won { background: var(--color-success); }
.win-loss-lost { background: var(--color-danger); }
.win-loss-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-loss-text b { color: var(--color-text); font-family: var(--font-mono, monospace); }

/* The bot picker over the chosen bot: any bot in one step. */
.ck-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.78rem; color: var(--color-text-muted); }
.ck-pick[hidden] { display: none; }
.ck-pick-label { flex: none; }
.ck-pick select { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.85rem; }
.ck-pick select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
/* The card shown in the panel, outlined; and a card with the keyboard on it. */
bot-card[selectable] { border-radius: 12px; }
bot-card[selected] > .bot-card { outline: 2px solid var(--color-accent); outline-offset: 2px; }
bot-card[selectable]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* The charts, full screen (owner's request, 2026-10-25): a period bar, then each chart the screen's width. */
.ck-chart-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.cfs { position: fixed; inset: 0; z-index: 1000; background: var(--color-bg); display: flex; flex-direction: column; }
.cfs-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.cfs-periods { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: center; }
.cfs-periods .toggle-btn, .cfs-bar [data-cfs-close] { min-height: 36px; padding: 6px 14px; font-size: 0.85rem; }
.cfs-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; gap: 16px; align-content: start; max-width: 1400px; width: 100%; margin: 0 auto; }
body.cfs-open { overflow: hidden; }
@media (max-width: 600px) { .cfs-periods { justify-content: flex-start; order: 3; flex-basis: 100%; } }

/* The Daily average's picker, under its figure (owner, 2026-10-27): quick choices, then any day. */
.ck-avg-pop {
  position: absolute; z-index: 60; width: min(340px, 100%); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.ck-avg-pop[hidden] { display: none; }
.ck-avg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck-avg-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.ck-avg-close { min-width: 40px; min-height: 40px; margin: -10px -8px -10px 0; border: 0; background: transparent; color: var(--color-text-muted); font-size: 1.3rem; cursor: pointer; border-radius: 8px; }
.ck-avg-close:hover, .ck-avg-close:focus-visible { color: var(--color-text); background: var(--color-surface-2, var(--color-border)); outline: none; }
.ck-avg-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ck-avg-chip {
  min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--color-border);
  background: transparent; color: var(--color-text); font: inherit; font-size: 0.85rem; cursor: pointer; text-align: center;
}
.ck-avg-chip[aria-pressed="true"] { background: var(--color-surface-2, var(--color-border)); border-color: var(--color-text-muted); font-weight: 600; }
.ck-avg-chip:hover { border-color: var(--color-text-muted); }
.ck-avg-chip:focus-visible, .ck-avg-form input:focus-visible { outline: 2px solid var(--color-accent, #6366f1); outline-offset: 2px; }
.ck-avg-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; }
.ck-avg-label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; font-size: 0.75rem; color: var(--color-text-muted); }
.ck-avg-label.is-on { color: var(--color-text); font-weight: 600; }
.ck-avg-form input[type="date"] {
  min-height: 40px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-bg, var(--color-surface)); color: var(--color-text); font: inherit; font-size: 0.9rem; color-scheme: light dark;
}
.ck-avg-form .ck-btn { min-height: 40px; padding: 0 14px; }
.ck-avg-note { margin: 0; font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.35; }

/* What the account figure shows (owner, 2026-10-25): at the right end of the page head, so the tile rows sit together (owner, 2026-11-01). */
.ck-acct-view { display: flex; justify-content: flex-end; gap: 4px; margin: 0; }
.ck-acct-btn {
  padding: 2px 10px; border-radius: 999px; border: 1px solid var(--color-border);
  background: transparent; color: var(--color-text-muted); font-size: 0.75rem; cursor: pointer;
}
.ck-acct-btn[aria-pressed="true"] { background: var(--color-surface-2, var(--color-border)); color: var(--color-text); border-color: var(--color-text-muted); }
.ck-acct-btn:focus-visible { outline: 2px solid var(--color-accent, #6366f1); outline-offset: 2px; }

/*
 * The Live tab (owner's request, 2026-10-26, js/live-shots.js): every
 * prediction market shot in play, closing soonest first. A row is drawn once
 * and its words patched in place, so its size holds still as prices move;
 * figures are tabular so a ticking number does not shift what is beside it.
 */
.ls { display: flex; flex-direction: column; gap: 12px; }
.ls-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-fig .ck-fig-value.pm-up { color: var(--color-success); }
.ls-fig .ck-fig-value.pm-down { color: var(--color-danger); }
.ls-error { margin: 0; font-size: 0.85rem; color: var(--color-danger); }
.ls-error[hidden], .ls-rows[hidden], [data-ls-empty-slot][hidden] { display: none; }
.ls-rows { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-bg); }
/* The rows follow the width of the column they sit in (the dashboard's main column is narrow on a wide screen), not the window's. */
.ls-rows, .ls-settled { container: live-shots / inline-size; }
.ls-row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(170px, 1fr) minmax(0, 0.9fr) 120px minmax(0, 1.5fr) minmax(0, 1.2fr) 72px 124px;
  gap: 12px; align-items: center; min-height: 56px; padding: 8px 14px;
  border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none;
  box-shadow: inset 3px 0 0 transparent; transition: background-color 0.4s ease;
}
.ls-row:last-child { border-bottom: 0; }
a.ls-row:hover { background: var(--color-bg-secondary); }
a.ls-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ls-row[data-state="winning"] { box-shadow: inset 3px 0 0 var(--color-success); }
.ls-row[data-state="losing"] { box-shadow: inset 3px 0 0 var(--color-danger); }
.ls-row[data-state="won"] { background: var(--color-success-bg); box-shadow: inset 3px 0 0 var(--color-success); }
.ls-row[data-state="lost"] { background: var(--color-danger-bg); box-shadow: inset 3px 0 0 var(--color-danger); }
.ls-row[data-state="sold"], .ls-row[data-state="ended"] { background: var(--color-bg-secondary); }
.ls-what, .ls-price, .ls-level, .ls-money, .ls-settled-what { display: flex; flex-direction: column; min-width: 0; }
.ls-title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-sub, .ls-chance, .ls-worth, .ls-level-line { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-side { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 0.85rem; white-space: nowrap; }
.ls-entry { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ls-side-word { font-weight: 700; padding: 1px 7px; border-radius: 6px; border: 1px solid currentColor; font-size: 0.75rem; }
.ls-side-word.is-yes { color: var(--color-success); }
.ls-side-word.is-no { color: var(--color-danger); }
.ls-entry, .ls-price .pm-num, .ls-money .pm-num, .ls-level .pm-num, .ls-clock { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.ls-level .pm-up, .ls-worth .pm-up { color: var(--color-success); }
.ls-level .pm-down, .ls-worth .pm-down { color: var(--color-danger); }
/*
 * Set by column: a shot with no line to show has no level cell, and the cells
 * after it slid one column left, the status over the clock (owner, 2026-11-01).
 */
.ls-money { grid-column: 6; white-space: nowrap; }
.ls-clock { grid-column: 7; font-size: 0.9rem; font-weight: 600; text-align: right; white-space: nowrap; }
.ls-status { grid-column: 8; justify-self: end; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.ls-row[data-state="winning"] .ls-status, .ls-row[data-state="won"] .ls-status, .ls-settled-row[data-state="won"] .ls-status { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-bg); }
.ls-row[data-state="losing"] .ls-status, .ls-row[data-state="lost"] .ls-status, .ls-settled-row[data-state="lost"] .ls-status { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-bg); }
.ls-empty { padding: 20px 16px; border: 1px dashed var(--color-border); border-radius: 10px; }
.ls-empty-title { margin: 0 0 4px; font-weight: 600; }
.ls-empty .ck-empty { padding: 0; }
.ls-h3 { margin: 4px 0 8px; font-size: 0.9rem; font-weight: 600; }
.ls-settled { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.ls-settled-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--color-border); }
.ls-settled-row:last-child { border-bottom: 0; }
.ls-best { margin-bottom: 12px; }
/* Settled today: the result and, beside it, what the shot made after fees (owner, 2026-10-31). */
.ls-settled-tags { justify-self: end; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ls-settled-tags .ls-status { justify-self: auto; }
.ls-profit { padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: var(--color-text-muted); border: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
.ls-profit[data-profit="up"] { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-bg); }
.ls-profit[data-profit="down"] { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-bg); }
/* Your own shots: the ones bought by hand on the venues' apps, with their period (owner, 2026-10-31). */
.hs { margin-top: 18px; }
.hs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hs-days { display: inline-flex; gap: 4px; }
.hs-day { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.hs-day.is-on { color: var(--color-text); border-color: var(--color-primary, var(--color-text)); }
.hs-note { margin: 4px 0 10px; }
.hs-list { margin-top: 10px; }
.ls-settled-row[data-state="open"] .ls-status { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .ls-row { transition: none; } }

/*
 * Each row in its item, with the button that opens its live chart beside it
 * and the chart under it, full width (js/live-shot-chart.js). A row without a
 * chart keeps an empty column, so the rows' columns line up.
 */
.ls-item { display: grid; grid-template-columns: minmax(0, 1fr) 40px; border-bottom: 1px solid var(--color-border); }
.ls-item:last-child { border-bottom: 0; }
.ls-item > .ls-row { border-bottom: 0; }
.ls-item:has(> .ls-row[data-state="won"]) { background: var(--color-success-bg); }
.ls-item:has(> .ls-row[data-state="lost"]) { background: var(--color-danger-bg); }
.ls-item:has(> .ls-row[data-state="sold"]), .ls-item:has(> .ls-row[data-state="ended"]) { background: var(--color-bg-secondary); }
.ls-expand {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.ls-expand:hover { background: var(--color-bg-secondary); color: var(--color-accent); }
.ls-expand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ls-expand[aria-expanded="true"] { color: var(--color-accent); background: var(--color-bg-secondary); }
.ls-expand-icon { width: 16px; height: 16px; }
.ls-expand-chev { display: none; width: 14px; height: 14px; }
.ls-expand-text { display: none; }
.ls-item.is-open .ls-expand-icon { transform: scale(1.1); }
.ls-chart { grid-column: 1 / -1; min-width: 0; padding: 10px 14px 14px; border-top: 1px dashed var(--color-border); background: var(--color-surface, var(--color-bg)); }
.ls-chart[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ls-expand-chev { transition: transform 0.2s ease; }
}

/* Narrower: the coin line and the clock share a column with the money. */
@media (max-width: 1100px) {
  .ls-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container live-shots (max-width: 1000px) {
  .ls-row { grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 124px; }
  .ls-price { display: none; }
  .ls-money { grid-column: 4; }
  .ls-clock { grid-column: 5; grid-row: 1; align-self: start; }
  .ls-status { grid-column: 5; grid-row: 1; align-self: end; }
  /* The feed takes a line of its own under the row's words. */
  .ls-row .ls-feed { grid-column: 1 / 5; grid-row: 2; flex-direction: row; align-items: center; gap: 10px; }
  .ls-row .ls-feed-top { flex: 0 1 220px; }
  /* A row that can have a feed keeps its line while the feed is off, so turning on moves nothing. */
  .ls-row .ls-feed[data-feed="off"]:not([data-feed-can]) { display: none; }
}

/* A phone (375 px), or the narrow dashboard column: each shot is a small card of a few lines, the result on the right. */
@media (max-width: 768px) {
  .ls-strip { display: flex; }
}
@container live-shots (max-width: 720px) {
  .ls-title { white-space: normal; }
  .ls-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what clock" "side status" "level level" "money money" "feed feed";
    gap: 4px 10px; padding: 10px 12px;
  }
  /* grid-area alone: it replaces the wider layout's column and row, and a grid-column after it would undo the area (the card's lines ran together). */
  .ls-row .ls-feed { grid-area: feed; }
  /* The line keeps its width whatever trades print beside it. */
  .ls-row .ls-feed-top { flex: 0 0 60%; }
  .ls-row .ls-trades { flex: 1 1 0; }
  .ls-what { grid-area: what; }
  .ls-clock { grid-area: clock; align-self: start; }
  .ls-side { grid-area: side; }
  .ls-status { grid-area: status; align-self: center; }
  /*
   * Set lines, never wrapped to fit: as prices ticked, "To beat" and "Now" went
   * from one line to two and back, and the graph under them jumped (owner, 2026-11-01).
   */
  .ls-level { grid-area: level; }
  .ls-money { grid-area: money; flex-direction: row; gap: 0 10px; font-size: 0.8rem; }
  .ls-money > .pm-num { flex: none; }
  .ls-worth { min-width: 0; }
  .ls-settled-row { grid-template-columns: auto minmax(0, 1fr); }
  .ls-settled-row .ls-settled-tags { grid-column: 2; justify-self: start; }
  /* A phone: the chart's button is a bar of its own under the card, easy to tap, its words shown. */
  .ls-item { grid-template-columns: minmax(0, 1fr); }
  .ls-expand-none { display: none; }
  .ls-expand { min-height: 40px; border-left: 0; border-top: 1px solid var(--color-border); }
  .ls-expand-text, .ls-expand-chev { display: inline; }
  .ls-expand[aria-expanded="true"] .ls-expand-chev { transform: rotate(180deg); }
  .ls-chart { padding: 8px 8px 12px; }
}

/*
 * Each Live row's feed of its market (js/live-shots.js): the last minute as
 * a small line (a fixed 100 x 24 box the row stretches, so a point changes
 * one attribute), a dot for live or stale, and the last trades as they print.
 * A row without a feed keeps its column, so the rows hold their shape.
 */
.ls-feed { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-feed[data-feed="off"] { visibility: hidden; }
.ls-feed-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ls-spark { display: block; flex: 1 1 auto; min-width: 40px; width: 100%; height: 24px; overflow: visible; }
.ls-spark-line { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ls-feed[data-trend="up"] .ls-spark-line { stroke: var(--color-success); }
.ls-feed[data-trend="down"] .ls-spark-line { stroke: var(--color-danger); }
.ls-spark-target { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.55; vector-effect: non-scaling-stroke; }
.ls-feed[data-state="stale"] .ls-spark-line { opacity: 0.45; }
.ls-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); opacity: 0.6; }
.ls-feed[data-state="live"] .ls-dot { background: var(--color-success); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); }
.ls-feed[data-state="stale"] .ls-dot { background: var(--color-warning); opacity: 1; }
.ls-trades { display: flex; gap: 6px; min-width: 0; overflow: hidden; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.ls-trades[hidden] { display: none; }
.ls-trade { color: var(--color-text-muted); }
.ls-trade.is-up { color: var(--color-success); }
.ls-trade.is-down { color: var(--color-danger); }
.ls-trade:nth-child(n+2) { opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .ls-trade:first-child { animation: ls-trade-in 300ms ease-out; }
}
@keyframes ls-trade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* The Live tab's switch: Shots and Cryptos (js/live-tab.js). */
.lt { display: flex; flex-direction: column; gap: 10px; }
.lt-tabs { align-self: flex-start; }
.lt-pane[hidden] { display: none; }

/*
 * The Cryptos view (js/cryptos.js, js/crypto-chart.js): a coin's price on each
 * crypto exchange that lists it, one chart each, side by side where the
 * column has room and stacked where it has not (sized by the column, as the
 * dashboard's is narrow on a wide screen).
 */
.cx { display: flex; flex-direction: column; gap: 12px; container: cryptos / inline-size; }
.cx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cx-pick { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 260px; min-width: 0; }
.cx-pick-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cx-input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 700; font-family: var(--font-mono, monospace); text-transform: uppercase; }
.cx-input::placeholder { text-transform: none; font-weight: 400; font-family: var(--font-sans, inherit); }
.cx-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.cx-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.cx-list[hidden] { display: none; }
.cx-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.cx-opt[aria-selected="true"], .cx-opt:hover { background: var(--color-bg-secondary); }
.cx-opt-coin { font-family: var(--font-mono, monospace); font-weight: 700; }
.cx-opt-on { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-opt-none { cursor: default; color: var(--color-text-muted); font-size: 0.85rem; }
.cx-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cx-strip:empty { display: none; }
.cx-fig { display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; }
.cx-fig-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-fig-value { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-fig-sub { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-fig.is-high { border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border)); }
.cx-fig.is-low { border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border)); }
.cx-fig.is-stale .cx-fig-value { color: var(--color-text-muted); }
.cx-fig-spread { background: var(--color-bg-secondary); grid-column: 1 / -1; }
/* The spread's figure and its "highest, lowest" line wrap rather than cut off: it has its own row. */
.cx-fig-spread .cx-fig-value, .cx-fig-spread .cx-fig-sub { white-space: normal; overflow: visible; }
.cx-notes { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.cx-notes[hidden] { display: none; }
.cx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cx-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-grid[data-count="1"], .cx-grid[data-count="0"] { grid-template-columns: minmax(0, 1fr); }
.cx-cell { min-width: 0; }
.cx-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.cx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cx-ex { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-ex-name { font-weight: 700; font-size: 0.9rem; }
.cx-pair { font-size: 0.72rem; color: var(--color-text-muted); font-family: var(--font-mono, monospace); }
.cx-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); opacity: 0.6; }
.cx-card[data-state="live"] .cx-dot { background: var(--color-success); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent); }
.cx-card[data-state="stale"] .cx-dot { background: var(--color-warning); opacity: 1; }
.cx-status { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cx-card[data-state="live"] .cx-status { color: var(--color-success); }
.cx-card[data-state="stale"] .cx-status { color: var(--color-warning); }
.cx-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-height: 1.6em; }
.cx-last { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 700; }
.cx-change { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--color-text-muted); }
.cx-change.pm-up { color: var(--color-success); }
.cx-change.pm-down { color: var(--color-danger); }
.cx-stage { position: relative; height: 160px; min-width: 0; overflow: hidden; contain: layout paint; }
.cx-svg { display: block; width: 100%; height: 160px; }
.cx-card.is-up .lv-line { stroke: var(--color-success); }
.cx-card.is-up .lv-grad-top { stop-color: var(--color-success); }
.cx-card.is-up .lv-dot, .cx-card.is-up .lv-halo { fill: var(--color-success); }
.cx-card.is-down .lv-line { stroke: var(--color-danger); }
.cx-card.is-down .lv-grad-top { stop-color: var(--color-danger); }
.cx-card.is-down .lv-dot, .cx-card.is-down .lv-halo { fill: var(--color-danger); }
.cx-card[data-state="stale"] .lv-line { opacity: 0.5; }
.cx-quote { margin: 0; font-size: 0.72rem; color: var(--color-text-muted); }
.cx-source { margin: 0; font-size: 0.75rem; }
/* The column narrow (the dashboard's on a wide screen, or a phone): the charts stacked, one a row. */
@container cryptos (max-width: 760px) {
  .cx-grid, .cx-grid[data-count="2"] { grid-template-columns: minmax(0, 1fr); }
  .cx-stage, .cx-svg { height: 140px; }
}
@container cryptos (max-width: 420px) {
  .cx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-pick { flex: 1 1 100%; }
  .cx-last { font-size: 1.1rem; }
}

/* The Live tab's shots whose market has closed: below those still trading, under a Settling heading, until the result moves them to Settled today (owner, 2026-10-27). */
.ls-item.is-settling:first-child::before,
.ls-item:not(.is-settling) + .ls-item.is-settling::before {
  content: 'Settling: market closed, waiting on the result';
  /* Across the item: left to find a cell, the heading took the row's and crushed the row into the chart button's. */
  grid-column: 1 / -1;
  display: block; padding: 12px 14px 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
.ls-item.is-settling .ls-row { opacity: 0.8; }