/* copy trading (class prefix cp-). Lane copy: the banner, the tracker's card, the arm control and the arm dialog.
   docs/LANES.md 8.2 to 8.5 and the width contract of 3.7.
   Colours only through the tokens of styles.css: no colour literal and no custom property in this file. */

/* ---------- the banner: a strip in the page's flow, under the second bar, on every page ----------
   It PUSHES the page down (it takes its own room) and it stays on screen while the page scrolls: it sticks right
   under the two bars at the top, so STOP is always one tap away. It is at the top, so it never covers the token
   page's sticky buy bar, which sits at the bottom. The host is hidden by the shell while nothing is armed. */
#shell-banner { position: sticky; top: calc(var(--mock-h) + var(--top-h) + var(--bar2-h)); z-index: 28; }
.cp-banner { border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.cp-banner.cp-is-armed { border-bottom-color: var(--brand); background: var(--bg-3); }
.cp-banner.cp-is-live { border-bottom-color: var(--down); }
.cp-banner.cp-is-paused { border-bottom-color: var(--warn); }

/* row 1: the state word, the time left, STOP. Never wrapped; STOP never shrinks and is at least 44 px high. */
.cp-b1 { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; padding: 6px 16px; }
.cp-b1-main { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; white-space: nowrap; overflow: hidden; }
.cp-state { flex: none; font: 800 13px/1 var(--font-ui); letter-spacing: 0.1em; color: var(--brand-hi); }
.cp-is-live .cp-state { color: var(--down); }
.cp-is-paused .cp-state { color: var(--warn); }
.cp-is-off .cp-state { color: var(--muted); }
.cp-time { flex: none; font: 700 15px/1 var(--font-mono); color: var(--text); }
.cp-alerts { flex: none; }
.cp-stop { flex: none; min-width: 84px; min-height: 44px; font-weight: 800; letter-spacing: 0.08em; }
.cp-close { flex: none; min-height: 44px; }

/* row 2: who is copied, the SOL used, the mode, and every line that stays until it is closed */
.cp-b2 { padding: 0 16px 10px; font-size: 13px; }
.cp-b2 p { margin: 0 0 6px; }
.cp-sum { color: var(--muted); }
.cp-paused { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--warn); }
.cp-no { color: var(--down); }
.cp-notices { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.cp-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); border-left-width: 3px; background: var(--bg-3); }
.cp-notice-t { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.cp-notice.cp-red { border-color: var(--down); background: var(--down-soft); color: var(--text); font-weight: 700; }
.cp-notice.cp-warn { border-color: var(--warn); background: var(--warn-soft); }
.cp-x { flex: none; min-width: 32px; min-height: 32px; font-size: 18px; line-height: 1; }

/* under 560 px row 2 is behind a tap on row 1 (and opens by itself when a line arrives); from 560 px it is always there */
@media (max-width: 559px) {
  .cp-b1 { padding: 4px 10px; }
  .cp-b2 { display: none; padding: 0 10px 10px; }
  .cp-banner.is-open .cp-b2 { display: block; }
}

/* ---------- the card on the tracker page ---------- */
.cp-panel { min-width: 0; }
.cp-lead { margin: 0 0 8px; }
.cp-rules { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; }
.cp-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; color: var(--muted); }
.cp-last { margin: 0 0 6px; color: var(--muted); }
.cp-bad { color: var(--down); }
.cp-leaders { display: grid; gap: 0; margin: 0 0 8px; padding: 0; list-style: none; }
.cp-leader { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.cp-leader-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cp-leader-cfg { flex: 1 1 220px; min-width: 0; }
.cp-actions { margin: 0 0 12px; }
.cp-stop-here { min-height: 36px; font-weight: 800; letter-spacing: 0.08em; }
.cp-log-head { margin-top: 6px; }
/* the log scrolls inside its own box: the page itself never scrolls sideways */
.cp-log-wrap { max-height: 320px; overflow-x: auto; overflow-y: auto; min-width: 0; }
.cp-log { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cp-row:last-child { border-bottom: 0; }
.cp-row-t { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.cp-row-skip .cp-row-t { color: var(--muted); }
.cp-row-bad .cp-row-t { color: var(--down); font-weight: 700; }
.cp-row-state .cp-row-t { color: var(--brand-hi); }
.cp-chip-reh { border-style: dashed; }

/* ---------- the arm control in a tracked wallet's row ---------- */
.cp-rowarm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.cp-rowarm:empty { display: none; }
.cp-arm[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- the arm dialog: the shared modal, one column, no fixed width ---------- */
.cp-dlg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.cp-dlg .field { margin: 0 0 10px; }
.cp-dlg-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.cp-h { margin: 10px 0 6px; font-size: 14px; color: var(--muted); letter-spacing: 0.02em; }
.cp-in { width: 100%; max-width: 100%; }
.cp-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; min-width: 0; }
.cp-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.cp-check span { min-width: 0; overflow-wrap: anywhere; }
.cp-live1 span, .cp-live2 span { font-weight: 700; }
.cp-live2 { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--down); background: var(--down-soft); }
.cp-mode { margin: 0 0 10px; }
.cp-bags { min-width: 0; }
.cp-bag-list { display: grid; gap: 2px; margin: 0 0 6px; padding: 0; list-style: none; }
.cp-warn { display: grid; gap: 8px; margin: 0 0 10px; padding: 12px 12px 12px 32px; border-radius: 8px; border: 1px solid var(--line-2); border-left: 3px solid var(--warn); background: var(--bg-3); font-size: 13.5px; }
.cp-warn li { overflow-wrap: anywhere; }
.cp-read { padding: 10px; border-radius: 8px; border: 1px solid var(--brand); background: var(--brand-soft); font-weight: 700; }
.cp-dlg-err { min-height: 1.4em; margin: 0; color: var(--down); font-size: 13px; }

/* ---------- its words on the Security page ---------- */
.cp-sec { margin-top: 12px; }