/* ════════════════════════════════════════════════════════════════
   Stablecoin Dominance dashboard styles. Originally for the
   standalone /dominance preview page; now also used by the Analytics
   page's Stablecoins tab (pages/analytics.html). Namespaced .dom-*
   so it doesn't bleed into other Analytics panels.
   ════════════════════════════════════════════════════════════════ */

:root {
  --stable-c: #4fb38f;   /* stable-coin band */
  --risk-c:   #9b72ff;   /* risk-asset band */
  --in-c:     #4fb38f;   /* stable IN (capital queued — green) */
  --in-c2:    #d97a83;   /* risk IN (sell pressure — red) */
  --out-c:    #7a8aa0;   /* stable OUT (capital deployed — neutral) */
  --out-c2:   #a78bff;   /* risk OUT (accumulation — accent) */
}

body { min-height: 100vh; display: flex; flex-direction: column; }

.dom-shell { max-width: 1280px; margin: 12px auto 80px; padding: 0 16px; width: 100%; flex: 1; }
@media (max-width: 860px) { .dom-shell { padding: 0 8px; } }

.dom-intro { padding: 6px 4px 16px; }
.dom-intro h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--text-hi); letter-spacing: -.3px; }
.dom-sub { color: var(--text-md); font-weight: 500; font-size: 16px; }
.dom-blurb { color: var(--text-md); font-size: 13px; margin: 0 0 12px; max-width: 720px; line-height: 1.5; }

.dom-tf { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 0; }
.dom-tf-btn { background: transparent; border: 0; color: var(--text-md); font-family: var(--font); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.dom-tf-btn:hover { color: var(--text-hi); }
.dom-tf-btn.active { background: var(--accent); color: #fff; }

.dom-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-top: 16px; }
.dom-card-label { font-size: 10.5px; font-weight: 700; color: var(--text-lo); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; }
.dom-card-headline { font-size: 22px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dom-card-sub { color: var(--text-md); font-size: 12px; margin: 2px 0 12px; }
.dom-card-foot { color: var(--text-lo); font-size: 11.5px; margin-top: 10px; line-height: 1.5; }
.dom-card-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; color: var(--text-md); font-size: 11px; }
.dom-card-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dom-card-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ════ Chart grid ════ */
.dom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .dom-grid { grid-template-columns: 1fr; } }
.dom-grid .dom-card { margin-top: 0; }
.dom-wide { grid-column: 1 / -1; }   /* C spans full width */

.dom-canvas { width: 100%; height: 220px; display: block; transition: opacity .25s ease-out; }
.dom-canvas-tall { height: 320px; }

/* ════ Progressive paint ════
   Each chart card wraps its canvas in .dom-canvas-wrap. While its
   data hasn't been rendered yet (initial load or after a period swap),
   the card carries .dom-pending which:
     - dims the canvas (the previous render, if any, is still there
       under the skeleton)
     - reveals the .dom-skel shimmer overlay on top
   Once paintAll() in dominance.js calls a renderer for this card it
   removes .dom-pending — canvas fades back to opacity 1 and the
   shimmer dissolves. */
.dom-canvas-wrap { position: relative; }
.dom-canvas-wrap-tall { /* keep same anchor; sizing comes from .dom-canvas-tall */ }
.dom-skel {
  position: absolute; inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-active) 0%, rgba(255,255,255,.06) 50%, var(--bg-active) 100%);
  background-size: 200% 100%;
  animation: dom-skel-shimmer 1.4s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease-out;
}
.dom-pending .dom-skel   { opacity: 1; }
.dom-pending .dom-canvas { opacity: .25; }
@keyframes dom-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* (Per-card refresh pulse removed — five accent bars firing at once on
   each WS refresh read as wiggling charts. The status pill in the
   header (dom-status-dot / dom-status-text) is the single loader signal:
   pulses + "refreshing…" while in flight, "just updated" after.) */

/* ════ Controls row (timeframe pills + status) ════
   On desktop the status pill ("updated 15s ago") sits to the right of
   the tf pills with text. On mobile we collapse it to a dot-only
   indicator — the text was wide enough that it wrapped to a second
   line on most phone widths, and that wrap toggled in/out as the text
   length changed ("loading…" → "just updated" → "updated 15s ago"),
   pushing the grid down each time. Dot color is enough as a loader
   signal: green=live, pulsing accent=refreshing, amber=stale, red=error. */
.dom-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 28px; }
.dom-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text-md); font-size: 12px; }
/* State-modifier classes are dom-st-* prefixed (NOT plain .live/.loading/etc).
   Reason: analytics.css has a generic .loading { padding: 30px } rule inside
   its ≤860px media block — that bled through into our 8px dot and inflated
   it to 60×60 on mobile during the "refreshing…" state, pushing the chart
   grid down by 28px every WS refresh. The prefix kills the collision and
   means we never rely on accidental specificity ordering. */
.dom-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-lo); flex: none; padding: 0; transition: background .2s; }
.dom-status-dot.dom-st-live    { background: #4fb38f; box-shadow: 0 0 6px rgba(79,179,143,.6); }
.dom-status-dot.dom-st-stale   { background: #b89a4a; }
.dom-status-dot.dom-st-loading { background: var(--accent-2); animation: dom-pulse 1s ease-in-out infinite; }
.dom-status-dot.dom-st-error   { background: #d97a83; }
@keyframes dom-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.dom-status-text { font-variant-numeric: tabular-nums; }

/* ════ Footer ════ */
.dom-foot { margin-top: 28px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.dom-foot p { margin: 0 0 4px; color: var(--text-md); font-size: 12px; }
.dom-foot p b { color: var(--text-hi); font-weight: 700; }
.dom-foot-meta { color: var(--text-lo) !important; font-size: 11px !important; }
.dom-foot a { color: var(--accent-2); text-decoration: none; }
.dom-foot a:hover { text-decoration: underline; }

/* ════ Mobile ≤860px ════
   On phones the full-width chart C at 320px tall makes the page scroll
   forever, and the desktop padding eats half the canvas width on a 390px
   viewport. Tighter card + canvas chrome, smaller headlines, the long
   intro blurb hides (the timeframe pills + chart subtitles already explain
   what's on screen), and chart C drops to 220px tall so it sits beside its
   peers in the vertical stack instead of dominating it.
   The footer's "stable set" list of ~25 symbols is hidden too — desktop is
   the place to inspect the admin-curated set, mobile users just want the
   charts. */
@media (max-width: 860px) {
  .dom-intro      { padding: 4px 2px 10px; }
  .dom-intro h1   { font-size: 17px; }
  .dom-sub        { font-size: 13px; }
  .dom-blurb      { display: none; }
  /* Force the controls onto one line. Hiding the status text removes
     the wrapping trigger (the variable-width "updated Ns ago" was
     pushing the row to 2 lines + back as freshness counter ticked).
     The dot stays as the loader signal — sized down to 6px since the
     text is gone and the dot is the only thing being read. */
  .dom-controls   { gap: 10px; flex-wrap: nowrap; min-height: 24px; }
  .dom-status     { gap: 0; }
  .dom-status-text { display: none; }
  .dom-status-dot { width: 6px; height: 6px; }
  .dom-status-dot.dom-st-live { box-shadow: 0 0 4px rgba(79,179,143,.55); }
  .dom-tf-btn     { padding: 5px 10px; font-size: 11.5px; }

  .dom-grid       { gap: 10px; margin-top: 10px; }
  .dom-card       { padding: 12px; border-radius: 10px; }
  .dom-card-label    { font-size: 9.5px; margin-bottom: 6px; }
  .dom-card-headline { font-size: 17px; }
  .dom-card-sub      { font-size: 11px; margin: 2px 0 8px; }
  .dom-card-foot     { font-size: 10.5px; margin-top: 6px; line-height: 1.45; }
  .dom-card-legend   { gap: 8px 12px; font-size: 10px; margin-top: 6px; }

  .dom-canvas      { height: 170px; }
  .dom-canvas-tall { height: 220px; }   /* chart C: 320 → 220 on mobile */

  .dom-foot       { margin-top: 16px; padding: 10px 12px; }
  .dom-foot p     { font-size: 11px; }
  .dom-foot p:first-child { display: none; }   /* hide the long stable-set list */
}