/* The AI paper bot's live view -- a trading screen watched on a phone.

   DELIBERATELY DARK AND SINGLE-THEME, like a market terminal: every colour is
   stated here and `body` paints its own ground, so it looks the same on any
   machine. Numbers are tabular so a changing balance does not jitter.
   Each run has its own colour, used for its card's edge, its line, its
   column in the table and its runs in the history -- violet for the
   compounding run, cyan for the 48-hour runs, amber for the retired run
   with the script's stops. Green and red only ever mean money made and
   money lost. */

:root {
  --bg: #0d1015;
  --panel: #141920;
  --panel-2: #1a2029;
  --edge: #262e39;
  --ink: #e9eef4;
  --dim: #8d98a7;
  --faint: #5d6776;
  --up: #3ecf7a;
  --down: #ff6b6b;
  --warn: #f2b134;
  --grow: #b592ff;
  --step: #f58ac4;
  --stops: #f2b134;
  --free: #4cc2ff;
  --r: 14px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -.01em; }

/* ---- top ----------------------------------------------------------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 18px 16px 10px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mark {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background:
    linear-gradient(135deg, var(--grow) 0 50%, var(--free) 50% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
h1 { font-size: 20px; font-weight: 750; }
.sub { margin: 0; color: var(--dim); font-size: 13px; }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--edge);
  font-size: 13px; font-weight: 650; white-space: nowrap;
}
.pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint);
}
.pill.live::before { background: var(--up); box-shadow: 0 0 0 0 rgba(62, 207, 122, .6);
                     animation: beat 2s ease-out infinite; }
.pill.paused::before, .pill.waiting::before { background: var(--warn); }
.pill.down::before { background: var(--down); }
@keyframes beat { 70% { box-shadow: 0 0 0 7px rgba(62, 207, 122, 0); }
                  100% { box-shadow: 0 0 0 0 rgba(62, 207, 122, 0); } }

main { max-width: 1180px; margin: 0 auto; padding: 0 16px 24px;
       display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
}

/* ---- right now ------------------------------------------------------------ */
.now { display: grid; gap: 10px; }
.now-one {
  display: grid; gap: 10px 18px; padding: 14px 16px;
  grid-template-columns: auto 1fr;
  align-items: center;
}
.now-left { display: flex; flex-direction: column; gap: 2px; }
.now-coin { font-size: 12px; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--dim); }
.now-clock { font: 700 30px/1.1 var(--mono); letter-spacing: -.02em; }
.now-clock small { font: 600 12px/1 system-ui, sans-serif; color: var(--dim);
                   margin-left: 6px; letter-spacing: 0; }
.now-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--dim); }
.now-facts b { color: var(--ink); font-weight: 650; }
.now-call { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline;
            gap: 4px 10px; padding-top: 10px; border-top: 1px solid var(--edge); }
.call {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-weight: 800; font-size: 14px; padding: 2px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--edge);
}
.call.UP { color: var(--up); border-color: rgba(62, 207, 122, .45); }
.call.DOWN { color: var(--down); border-color: rgba(255, 107, 107, .45); }
.call.SKIP, .call.ERROR { color: var(--dim); }
.why { color: var(--dim); font-size: 13.5px; }

/* ---- the two runs --------------------------------------------------------- */
.lanes { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lanes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.lane {
  --c: var(--free);
  position: relative; overflow: hidden;
  padding: 16px 16px 14px;
  border-top: 3px solid var(--c);
  display: flex; flex-direction: column; gap: 12px;
}
.lane[data-lane="grow"], .hrun[data-lane="grow"] { --c: var(--grow); }
.lane[data-lane="free"], .hrun[data-lane="free"] { --c: var(--free); }
.lane[data-lane="step"], .hrun[data-lane="step"] { --c: var(--step); }
.hrun[data-lane="stops"] { --c: var(--stops); }
.lane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lane-name { font-size: 17px; font-weight: 750; color: var(--c); }
.lane-rule { margin: 2px 0 0; font-size: 13px; color: var(--dim); }
.badge {
  flex: none; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--edge); color: var(--dim);
  white-space: nowrap;
}
.badge.on { color: var(--up); border-color: rgba(62, 207, 122, .45); }
.badge.over { color: var(--ink); }

.watch { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.watch-clock { font: 700 26px/1.1 var(--mono); letter-spacing: -.02em; }
.watch-of { color: var(--dim); font-size: 13px; }
.bar { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.bar b { display: block; height: 100%; width: 0; border-radius: 99px;
         background: var(--c); transition: width 1s linear; }
.ended-why { margin: 0; font-size: 13.5px; color: var(--ink);
             padding: 8px 10px; border-radius: 10px; background: var(--panel-2);
             border: 1px solid var(--edge); }

.money { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.bal { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.pnl { font-size: 17px; font-weight: 750; }
.pos { color: var(--up); }
.neg { color: var(--down); }
.flat { color: var(--dim); }
.after { font-size: 12.5px; color: var(--dim); width: 100%; }

.spark { display: block; width: 100%; height: 64px; }
.spark .base { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 3 4; }
.spark .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round;
               stroke-linecap: round; }
.spark .area { fill: var(--c); opacity: .12; }
.spark .dot { fill: var(--c); }
.spark-note { margin: -6px 0 0; font-size: 12px; color: var(--faint); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.stats div { background: var(--panel-2); border: 1px solid var(--edge); border-radius: 10px;
             padding: 7px 9px; min-width: 0; }
.stats dt { font-size: 11px; font-weight: 700; letter-spacing: .06em;
            text-transform: uppercase; color: var(--faint); }
.stats dd { margin: 1px 0 0; font-size: 17px; font-weight: 750; }
.stats dd small { font-size: 12px; font-weight: 600; color: var(--dim); }

/* ---- the AI ---------------------------------------------------------------- */
.ai { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px; }
.ai .tile { padding: 11px 13px; margin: 0; }   /* a <dl> brings its own margin */
.tile dt { font-size: 11px; font-weight: 700; letter-spacing: .06em;
           text-transform: uppercase; color: var(--faint); }
.tile dd { margin: 2px 0 0; font-size: 19px; font-weight: 750; }
.tile dd small { font-size: 12.5px; font-weight: 600; color: var(--dim); margin-left: 4px; }

/* ---- run history ----------------------------------------------------------- */
.hist-sum { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); font-weight: 650; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hrun {
  --c: var(--free);
  padding: 12px 14px; border-left: 3px solid var(--c);
  display: flex; flex-direction: column; gap: 8px;
}
.hrun-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tag {
  font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c); white-space: nowrap;
}
.hrun-when { font-size: 14px; font-weight: 650; }
.hrun-len { font-size: 13px; color: var(--dim); white-space: nowrap; }
.hrun-body { display: grid; gap: 10px 18px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .hrun-body { grid-template-columns: minmax(260px, 2fr) 3fr; } }
.hrun-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.hrun-money div { background: var(--panel-2); border: 1px solid var(--edge); border-radius: 10px;
                  padding: 7px 9px; min-width: 0; }
.hrun-money dt { font-size: 11px; font-weight: 700; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--faint); }
.hrun-money dd { margin: 1px 0 0; font-size: 17px; font-weight: 750; white-space: nowrap; }
.hrun-money dd small { display: block; font-size: 12px; font-weight: 650; }
.hchart { display: block; width: 100%; height: 96px; }
.hchart .base { stroke: var(--edge); stroke-width: 1; stroke-dasharray: 3 4; }
.hchart .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round;
                stroke-linecap: round; }
.hchart .area { fill: var(--c); opacity: .12; }
.hrun-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px;
             font-size: 11.5px; color: var(--faint); }
.hrun-axis .mid { color: var(--dim); text-align: center; }
.hrun-foot { margin: 0; font-size: 12.5px; color: var(--dim); }
.hrun-why { margin: -4px 0 0; font-size: 12.5px; color: var(--faint); }
.more {
  margin-top: 10px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--edge); border-radius: 10px;
  padding: 8px 14px; cursor: pointer;
}
.more:hover { border-color: var(--faint); }
.more:focus-visible { outline: 2px solid var(--free); outline-offset: 2px; }

/* ---- every call ------------------------------------------------------------ */
.sec-head h2 { font-size: 17px; }
.sec-head p { margin: 2px 0 10px; color: var(--dim); font-size: 13px; }
.scroll { overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--r);
          background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em;
     text-transform: uppercase; color: var(--faint); padding: 10px 12px;
     border-bottom: 1px solid var(--edge); white-space: nowrap; }
th.lane-col[data-lane="grow"] { color: var(--grow); }
th.lane-col[data-lane="free"] { color: var(--free); }
th.lane-col[data-lane="step"] { color: var(--step); }
td { padding: 9px 12px; border-bottom: 1px solid var(--edge); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td .t { white-space: nowrap; }
td .s { display: block; color: var(--faint); font-size: 12px; white-space: nowrap; }
td .r { display: block; color: var(--dim); font-size: 12.5px; max-width: 42ch;
        margin-top: 2px; }
.bet { white-space: nowrap; font-weight: 700; }
.bet .s { font-weight: 500; }
.bet.none { color: var(--faint); font-weight: 500; }
.bet.open { color: var(--warn); }
.empty { margin: 8px 2px 0; color: var(--dim); font-size: 13.5px; }

/* ---- log ------------------------------------------------------------------- */
.log { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); }
.log summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 14px;
               list-style-position: inside; }
.log summary:focus-visible, a:focus-visible { outline: 2px solid var(--free); outline-offset: 2px; }
.log ol { list-style: none; margin: 0; padding: 0 14px 12px; max-height: 360px; overflow: auto;
          font: 12.5px/1.5 var(--mono); color: var(--dim); }
.log li { padding: 3px 0; border-top: 1px solid var(--edge); }
.log li b { color: var(--faint); font-weight: 500; margin-right: 8px; }

footer { max-width: 1180px; margin: 0 auto; padding: 6px 16px 28px; color: var(--faint);
         font-size: 12.5px; }
footer p { margin: 0; }

/* A phone: the table keeps the columns that compare the two runs and drops
   the AI's reasoning (the window open now still shows it, at the top). */
@media (max-width: 560px) {
  td .r, .call .sure, td:first-child .s, .bet .s { display: none; }
  th, td { padding: 8px 6px; }
  th:first-child, td:first-child { padding-left: 10px; }
}
@media (max-width: 380px) {
  table { font-size: 12.5px; }
  th, td { padding: 8px 4px; }
  .call { font-size: 12.5px; padding: 2px 7px; gap: 4px; }
}

@media (max-width: 480px) {
  .now-clock { font-size: 26px; }
  .bal { font-size: 30px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .now-one { grid-template-columns: 1fr; }
  .hrun-money dd { font-size: 15px; }
  .hrun-axis .mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pill.live::before { animation: none; }
  .bar b { transition: none; }
}