/* ══════════════════════════════════════════════════════════════════════
   PIPVANA — Analysis.

   Laid out like dbotzone's Advanced tool: a card per market, a digit grid
   with the notable digits outlined, and each trade pair as
   percentage · buttons · percentage.

   The reference is a light theme; this keeps Pipvana's own surface so the
   page still belongs to the rest of the site, and carries the reference's
   colour language across: green rise, red fall, blue even, red odd,
   orange over, cyan under. Flat colours only — no gradients anywhere.
   ══════════════════════════════════════════════════════════════════════ */

/* The market colours and every surface token now come from site.css, so this
   file is layout and nothing else. */

/* The header is sticky and holds its own space, so the main column needs
   breathing room rather than clearance. */
.dash-main { padding-top: clamp(14px, 2vh, 20px); padding-bottom: clamp(16px, 2.4vh, 26px); }

/* ── settings ───────────────────────────────────────────────────────────
   Kept deliberately short. On a 768px-tall laptop the whole panel plus the
   first row of cards has to be on screen at once, so every field is one
   compact row and nothing here is allowed to grow. */

.tools {
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tools-head { margin-bottom: 10px; }
.tools-t { font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 700; }

/* Fields flow in one line and wrap only when they must. */
.tools-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fld { flex: 1 1 150px; min-width: 130px; margin-top: 0; display: block; }
/* `display: block` above beats [hidden] on its own, which is why the
   account field was still on the page after being hidden. */
.fld[hidden] { display: none; }

.fld-k {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.fld-i {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--base);
  border: 1px solid var(--line-hi);
  border-radius: 9px;
}
.fld-i:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.fld-i:disabled { opacity: 0.5; cursor: not-allowed; }

/* The multiplier sits under its own switch, so the pair reads as one control.
   The switch itself is styled in site.css: three pages use it now. */
.fld--mart { flex: 0 1 190px; }

.syms { margin-top: 10px; }
.syms-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

.sym {
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-2);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sym:hover { color: var(--ink); border-color: var(--ink-faint); }
.sym.is-on { color: var(--on-accent); background: var(--blue); border-color: var(--blue); }

/* Risk note and next stake share one line rather than stacking. */
.tools-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  min-height: 1em;
}
.next-stake { font-size: 12px; font-weight: 650; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.next-stake.is-recovering { color: var(--over); }

/* ── the cards ──────────────────────────────────────────────────────── */

.cards-grid {
  display: grid;
  /* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a single
     selected symbol would stretch its card across the whole page; auto-fill
     keeps them, and one card stays exactly one card wide. */
  /* 360. Narrower than this and three cards fit across a 1500px screen, which
     sounds like a win until the pair rows read "Over 5: 43…" — two
     percentages and two buttons do not go into 290px. A card that scrolls is
     better than a label that lies. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 14px;
  margin-top: 14px;
}
.cards-none { padding: 40px 0; text-align: center; color: var(--ink-faint); }

.mkt {
  padding: clamp(14px, 1.6vw, 18px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.mkt-h {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 14.5px;
  font-weight: 650;
  text-align: center;
}
.mkt-c { color: var(--ink-faint); font-weight: 500; font-size: 13px; }
.mkt-c b { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── digits ─────────────────────────────────────────────────────────── */

.dgts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.dgt {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 2px;
  background: var(--surface-2);
  /* Two-pixel, transparent by default, so an outlined box is exactly the
     same size as a plain one and the grid never shifts. */
  border: 2px solid transparent;
  border-radius: 9px;
}
.dgt b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dgt span { font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.dgt.is-high { border-color: var(--up); }
.dgt.is-high b, .dgt.is-high span { color: var(--up); }
.dgt.is-low { border-color: var(--down); }
.dgt.is-low b, .dgt.is-low span { color: var(--down); }
/* The live digit wins the outline — it is the one the next contract settles
   against, so it matters more than the tallies. */
.dgt.is-cur { border-color: var(--cur); }
.dgt.is-cur b, .dgt.is-cur span { color: var(--cur); }

/* ── pair rows ──────────────────────────────────────────────────────── */

.rows { display: grid; gap: 6px; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.pbar {
  padding: 7px 9px;
  font-size: 11.2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}
/* The leading side gets the border, so the answer is visible without
   comparing two numbers. */
.pbar.is-lead { border-color: currentColor; }

.acts { display: inline-flex; gap: 5px; }
.act {
  padding: 7px 10px;
  font: inherit;
  font-size: 11.2px;
  font-weight: 700;
  color: var(--on-accent);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.act:hover:not(:disabled) { filter: brightness(1.12); }
.act:active:not(:disabled) { transform: translateY(1px); }
.act:disabled { opacity: 0.35; cursor: not-allowed; }
/* The leading side is ringed. A light ring, not currentColor: the label on a
   filled button is deliberately dark, and a dark ring would vanish. */
.act.is-lead { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ring); }

/* Colour belongs to the BAR's text and the BUTTON's fill — never the button's
   text, which stays dark. Setting both from one rule painted every label in
   the same colour as the fill behind it and made them invisible. */
.pbar--rise { color: var(--up); }
.pbar--fall { color: var(--down); }
.pbar--even { color: var(--even); }
.pbar--odd { color: var(--odd); }
.pbar--over { color: var(--over); }
.pbar--under { color: var(--under); }
.pbar--match { color: var(--match); }
.pbar--differ { color: var(--differ); }

.act { color: var(--on-accent); }
.act--rise { background: var(--up); }
.act--fall { background: var(--down); }
.act--even { background: var(--even); }
.act--odd { background: var(--odd); }
.act--over { background: var(--over); }
.act--under { background: var(--under); }
.act--match { background: var(--match); }
.act--differ { background: var(--differ); }

.pbar--rise { background: rgba(34, 197, 94, 0.10); }
.pbar--fall { background: rgba(239, 68, 68, 0.10); }
.pbar--even { background: rgba(59, 130, 246, 0.10); }
.pbar--odd { background: rgba(239, 68, 68, 0.10); }
.pbar--over { background: rgba(245, 158, 11, 0.10); }
.pbar--under { background: rgba(6, 182, 212, 0.10); }
.pbar--match { background: rgba(168, 85, 247, 0.10); }
.pbar--differ { background: rgba(148, 163, 184, 0.10); }

/* Says what the coloured buttons above it are for. Quiet, because it is a
   label rather than an instruction anyone needs twice. */
.mkt-hint {
  margin-top: 8px;
  font-size: 10.5px;
  text-align: center;
  color: var(--ink-faint);
}

/* ── recent ticks ───────────────────────────────────────────────────── */

.ticks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
}
.tk {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.tk--even { background: var(--even); }
.tk--odd { background: var(--odd); }

/* ── results ────────────────────────────────────────────────────────── */

.results { margin-top: 14px; }
.grp-note { margin-left: 8px; font-weight: 700; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.grp-note.is-up { color: var(--up); }
.grp-note.is-down { color: var(--down); }

.risk { font-size: 12px; color: var(--ink-faint); }
/* Green, for the same reason as ai.css: a correct, expected state should not
   be dressed as a fault. */
.risk--real { color: var(--up); }
.status { margin-top: 6px; font-size: 12.5px; color: var(--ink-muted); min-height: 1.2em; }
.status--error { color: var(--pink); }
.status--success { color: var(--up); }
.status--warning { color: #e3b341; }

@media (max-width: 480px) {
  /* The three columns STAY. A percentage belongs beside the button it is
     about — stacked above and below, the eye has to travel to pair them up.
     Everything shrinks instead. */
  .row { gap: 4px; }
  .pbar { padding: 6px 5px; font-size: 10px; letter-spacing: -0.01em; }
  .act { padding: 6px 7px; font-size: 10px; }
  .acts { gap: 3px; }
  .dgts { gap: 4px; }
  .dgt { padding: 6px 1px; }
  .dgt b { font-size: 13px; }
  .dgt span { font-size: 9.5px; }
}

@media (max-width: 360px) {
  /* Only the labels give way, never the layout. */
  .pbar { font-size: 9px; padding: 6px 3px; }
  .act { font-size: 9px; padding: 6px 5px; }
}

/* ── Transactions ───────────────────────────────────────────────────────
   One markup, two shapes. Wide: a rail down the right, always open, with
   the page inset to make room for it. Narrow: a sheet parked at the bottom
   showing only its handle, sliding up when tapped — a 340px rail would eat
   the width the market cards need. */

.txn {
  position: fixed;
  right: 0;
  top: 68px;                 /* under the fixed nav */
  bottom: 0;
  /* Above the bot: raising the transactions is how you check what the bot has
     been doing, so it must not open behind it. */
  z-index: 80;
  width: 340px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.txn-handle { display: none; }

.txn-body {
  display: flex;
  flex-direction: column;
  min-height: 0;             /* lets the rows scroll instead of pushing */
  flex: 1;
  padding: 16px;
}

.txn-head {
  display: grid;
  grid-template-columns: var(--tx-cols);
  gap: 10px;
  padding: 0 2px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.txn-head-r { text-align: right; }

.txn-rows {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
  overscroll-behavior: contain;
}
.txn-rows::-webkit-scrollbar { width: 8px; }
.txn-rows::-webkit-scrollbar-track { background: transparent; }
.txn-rows::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 999px;
  border: 2px solid var(--surface);
}

/* One definition of the columns, used by the header and every row, so the
   three never drift apart at any width. */
.txn { --tx-cols: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 1.05fr); }

.tx {
  display: grid;
  grid-template-columns: var(--tx-cols);
  gap: 10px;
  align-items: start;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.tx:last-child { border-bottom: 0; }

/* The newest trade arrives from the right rather than appearing.
   Two reasons it is worth the twenty lines: a result that simply appears at
   the top of a list is easy to miss when you were looking at a card, and the
   movement says WHICH row is new when three rows in a row read "Even 1.00".
   Only the row that has just landed carries the class — see txn.js. */
@keyframes tx-in {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}

.tx--in { animation: tx-in 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* The row is briefly wider than its column while it travels. */
.txn-rows { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tx--in { animation: none; }
}
.tx-none { padding: 26px 0; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

.tx-type { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; }
.tx-dot { width: 8px; height: 8px; border-radius: 50%; grid-row: span 2; }
.tx-dot--win { background: var(--up); }
.tx-dot--loss { background: var(--down); }
.tx-type-t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-type-s { grid-column: 2; font-size: 10.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Entry above, exit below — the two spots the contract settled between. */
.tx-spot { display: grid; gap: 2px; font-variant-numeric: tabular-nums; min-width: 0; }
.tx-spot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-in { color: var(--ink-muted); }
.tx-out { color: var(--ink-faint); }

.tx-money { display: grid; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.tx-money span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-buy { color: var(--ink-muted); }
.tx-pl { font-weight: 650; }
.tx-pl.is-up, .sum-v.is-up { color: var(--up); }
.tx-pl.is-down, .sum-v.is-down { color: var(--down); }

/* ── the totals ─────────────────────────────────────────────────────── */

.sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 14px;
  padding: 16px 12px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sum-c { display: grid; gap: 4px; text-align: center; min-width: 0; }
.sum-k { font-size: 9.5px; font-weight: 600; color: var(--ink-faint); line-height: 1.3; }
.sum-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.txn-reset { width: 100%; margin-top: 12px; }

/* Make room for the rail so no card ever sits under it. */
@media (min-width: 1200px) {
  .dash-main { padding-right: calc(340px + var(--gutter)); }
}

/* ── the sheet ──────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
  .txn {
    top: auto;
    left: 0;
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--line-hi);
    border-radius: 16px 16px 0 0;
    /* Parked with only the handle showing. Translating the whole panel keeps
       the animation on the compositor, so it stays smooth on a phone. */
    transform: translateY(calc(100% - 52px));
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: min(82vh, 620px);
  }
  .txn.is-open { transform: translateY(0); }

  .txn-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .txn-grip {
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    background: var(--line-hi);
    border-radius: 999px;
  }
  .txn-chev { color: var(--ink-faint); transition: transform 0.28s ease; }
  .txn.is-open .txn-chev { transform: rotate(180deg); }

  .txn-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--blue);
    border-radius: 999px;
  }
  .txn-count:empty { display: none; }

  .txn-body { padding: 0 16px 16px; overflow-y: auto; }
  .txn-rows { max-height: 40vh; }

  /* The parked handle covers the page bottom, so the last card is not hidden. */
  .dash-main { padding-bottom: 76px; }
}

/* ── Fitting a laptop ───────────────────────────────────────────────────
   On a 1366x768 screen the tools panel and the first row of cards should
   both be on screen without scrolling. These only load on this page, so
   the roomier spacing elsewhere is untouched. */

@media (min-width: 1000px) {
  /* No clearance at all. This carried 84px over from a site whose nav is
     POSITION: FIXED and therefore floats over the page. Here the header is
     sticky, so it already occupies its own space in the flow, and 84px on top
     of it was 84px of nothing between the header and the first panel. */
  .dash-main { padding-top: clamp(10px, 1.4vh, 16px); padding-bottom: 24px; }

  .tools-head { margin-bottom: 8px; }
  .tools { padding: 12px 16px; }
  .syms { margin-top: 8px; }
  .tools-foot { margin-top: 8px; }

  .mkt { padding: 12px 14px; }
  .mkt-h { margin-bottom: 10px; font-size: 13.5px; }
  .dgts { gap: 5px; margin-bottom: 10px; }
  .dgt { padding: 6px 2px; }
  .dgt b { font-size: 14px; }
  .rows { gap: 5px; }
  .pbar { padding: 6px 8px; }
  .act { padding: 6px 10px; }
  .ticks { margin-top: 9px; gap: 4px; }
  .tk { width: 23px; height: 23px; font-size: 11px; }
}

/* A quiet aside inside the label, not a second line. */
.fld-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  opacity: 0.85;
}

/* ── The floating bot ───────────────────────────────────────────────────
   Fixed, draggable by its header, and above everything except a modal. */

.bot {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 70;
  width: 268px;
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: 14px;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.bot[hidden] { display: none; }
/* No transition while dragging, or the card lags behind the pointer. */
.bot.is-dragging { user-select: none; cursor: grabbing; }

.bot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;   /* the pointer events are the drag, not a scroll */
}
.bot.is-dragging .bot-head { cursor: grabbing; }
/* Six solid dots, drawn with shadows rather than a radial-gradient — the
   page has no gradients anywhere and this is not the place to start. */
.bot-grip {
  width: 2px; height: 2px; flex: none;
  margin: 0 6px 0 0;
  border-radius: 50%;
  background: var(--ink-faint);
  box-shadow:
    0 5px var(--ink-faint), 0 10px var(--ink-faint),
    5px 0 var(--ink-faint), 5px 5px var(--ink-faint), 5px 10px var(--ink-faint);
  align-self: center;
  transform: translateY(-5px);
}
.bot-t { font-size: 12.5px; font-weight: 700; margin-right: auto; }
.bot-x {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  color: var(--ink-faint);
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.bot-x:hover { color: var(--ink); background: var(--surface); }

.bot-body { padding: 12px; display: grid; gap: 10px; }
.bot-f { display: grid; gap: 5px; }
.bot-k {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.bot-note { font-size: 10.5px; line-height: 1.45; color: var(--ink-faint); margin-top: -4px; }
.bot-f .fld-i { padding: 7px 9px; font-size: 13px; }

.bot-run { width: 100%; padding: 9px; font-size: 13.5px; }
.bot-run.is-running { background: var(--down); border-color: var(--down); }

.bot-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; padding-top: 10px; border-top: 1px solid var(--line);
}
.bot-stats dt {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.bot-stats dd { margin: 2px 0 0; }
.bot-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bot-v.is-up { color: var(--up); }
.bot-v.is-down { color: var(--down); }

.bot-status { font-size: 11px; line-height: 1.45; color: var(--ink-muted); min-height: 1.4em; }
.bot-status--warning { color: var(--over); }
.bot-status--success { color: var(--up); }
.bot-status--error { color: var(--down); }

/* What brings it back once closed. */
.bot-open {
  position: fixed;
  right: 24px; bottom: 24px;
  /* Above the transactions rail, not under it. The rail is a fixed panel down
     the right on a wide screen, and at z-index 70 the button that brings the
     bot back was sitting behind it — closed the bot, and there was no way to
     open it again without reloading. */
  z-index: 85;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px;
  font: inherit; font-size: 13px; font-weight: 650;
  color: var(--on-accent);
  background: var(--blue);
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
}
.bot-open[hidden] { display: none; }

/* Green while a run continues behind the closed card. */
.bot-open-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.bot-open.is-running { background: var(--up); }
.bot-open.is-running .bot-open-dot { display: block; animation: bot-pulse 1.6s ease-in-out infinite; }
@keyframes bot-pulse { 50% { opacity: 0.35; } }

@media (min-width: 1200px) {
  /* Beside the rail rather than over it: 340px of panel plus the same gutter
     it would have had against the edge. */
  .bot-open { right: 364px; }
}
@media (max-width: 1199px) {
  /* Clear of the transactions sheet parked at the bottom. */
  .bot-open { bottom: 66px; }
}
@media (max-width: 420px) {
  .bot { width: calc(100vw - 24px); }
}