/* Trade Copier -- read-only monitoring surface.

   Tokens are the dashboard's own, so this page follows the app's themes rather
   than carrying its own palette. Two traps found while rendering it:

   - --ink-muted does not exist here; the muted ramp is --ink-2/-3/-4.
   - --orange is BLUE in this theme (#2563eb / #3b82f6), an accent rather than a
     warning. A "stream down" strip painted with it would read as information.
     So the warning colour is declared below rather than borrowed.

   Every rule that sets a background also sets a colour from the same token set:
   inheriting text colour onto a card whose background flipped is what made the
   tile values near-white on white in the light theme. */

:root{ --copier-warn:#b45309; }
:root[data-theme="dark"]{ --copier-warn:#fbbf24; }

.copier-status{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem; border-radius:8px; margin-bottom:1rem;
  border:1px solid var(--line, #e2e6ea);
  background:var(--bg-card, #fff);
  color:var(--ink, #0f172a);
  font-size:.92rem;
}
.copier-dot{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--line-strong, #9aa5b1);
}
/* Semantic state, kept separate from the app accent: a copier that has died is
   the one thing on this page that must read at a glance. */
.copier-status--ok      { border-color:var(--pos, #1a7f47); }
.copier-status--ok      .copier-dot{ background:var(--pos, #1a7f47); }
.copier-status--warn    { border-color:var(--copier-warn, #b45309); }
.copier-status--warn    .copier-dot{ background:var(--copier-warn, #b45309); }
.copier-status--down    { border-color:var(--neg, #b3261e);
                          background:var(--neg-soft, #fdecea);
                          color:var(--ink, #0f172a); }
.copier-status--down    .copier-dot{ background:var(--neg, #b3261e); }
.copier-status--unknown .copier-dot{ background:var(--line-strong, #9aa5b1); }
.copier-status-text{ font-weight:600; }
.copier-status-detail{ color:var(--ink-3, #64748b); font-weight:400; }

.copier-controls{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem;
}
.copier-controls label{ font-size:.82rem; color:var(--ink-3, #64748b); }
.copier-controls select,
.copier-refresh{
  padding:.35rem .6rem; border-radius:6px; font:inherit; font-size:.88rem;
  border:1px solid var(--line, #e2e6ea); background:var(--bg-card, #fff);
  color:var(--ink, #0f172a); cursor:pointer;
}
.copier-updated{ font-size:.8rem; color:var(--ink-3, #64748b); margin-left:auto; }

.copier-tiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr));
  gap:.8rem; margin-bottom:1.4rem;
}
.copier-tile{
  border:1px solid var(--line, #e2e6ea); border-radius:8px;
  background:var(--bg-card, #fff); color:var(--ink, #0f172a);
  padding:.75rem .9rem; display:flex; flex-direction:column; gap:.15rem;
}
.copier-tile-label{
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3, #64748b);
}
.copier-tile-value{ font-size:1.35rem; font-weight:700; font-variant-numeric:tabular-nums; }
.copier-tile-sub{ font-size:.78rem; color:var(--ink-3, #64748b); }

.copier-panel{ margin-bottom:1.6rem; }
.copier-panel-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; }
.copier-panel-head h3{ margin:0; font-size:1.05rem; }
.copier-note{
  margin:0 0 .7rem; font-size:.85rem; color:var(--ink-3, #64748b); max-width:60ch;
}
.copier-badge{
  font-size:.75rem; font-weight:700; padding:.1rem .5rem; border-radius:999px;
  background:var(--bg-soft, #eef1f4); color:var(--ink-3, #64748b);
}
.copier-badge--alert{ background:var(--neg-soft, #fdecea); color:var(--neg-on-soft, #b3261e); }
.copier-badge--quiet{ opacity:.7; }

/* "Unchanged since", not "last updated". The copier rewrites the open tables
   only when the open state CHANGES, so an old value here means nothing has
   happened - not that the copier has gone quiet. Freshness is the status
   strip's job, which reads a heartbeat that ticks either way. */
.copier-asof{ font-size:.78rem; color:var(--ink-3, #64748b); margin-left:auto; }

.copier-empty{
  padding:1.1rem; border:1px dashed var(--line, #e2e6ea); border-radius:8px;
  color:var(--ink-3, #64748b); font-size:.9rem;
}

/* Signed values. Positive shortfall means the copy beat the source, so this
   cannot simply be "non-zero is bad". */
.copier-good{ color:var(--pos, #1a7f47); font-weight:600; }
.copier-bad { color:var(--neg, #b3261e); font-weight:600; }
.copier-flat{ color:var(--ink-3, #64748b); }

.copier-dir{
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:.08rem .4rem; border-radius:4px;
}
.copier-dir--buy { background:var(--pos-soft, #e6f4ec); color:var(--pos-on-soft, #137437); }
.copier-dir--sell{ background:var(--neg-soft, #fdecea); color:var(--neg-on-soft, #b3261e); }

.copier-reason{ font-family:ui-monospace, Consolas, monospace; font-size:.82rem; }