/* =========================================================================
   SONIOX WALLET + USAGE WIDGET — see js/soniox-usage.js.

   Card chrome reuses the app's .eo-rail-card / .eo-rail-kicker vocabulary
   (eo-operator.css) so it sits on the Command Centre like every other
   instrument; only the Soniox-specific parts live here.

   The graph is the hero. The range chips, refresh and gear above it are
   deliberately recessive — muted, small, no fill until hovered — so the eye
   lands on the balance and the columns, not the controls.
   ========================================================================= */

.sx-rail-card{ display:flex; flex-direction:column; }
.sx-body{ display:flex; flex-direction:column; gap:10px; min-width:0; }

/* ---- head: kicker + recessive controls ---- */
.sx-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sx-head-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.sx-ranges{ display:flex; gap:2px; }

.sx-chip{
  appearance:none; cursor:pointer; white-space:nowrap;
  padding:2px 8px; border-radius:999px;
  border:1px solid transparent; background:transparent;
  color:var(--faint); font:600 9.5px/1.6 var(--font-mono); letter-spacing:.04em;
  transition:color .15s var(--ease,ease), border-color .15s var(--ease,ease);
}
.sx-chip:hover{ color:var(--text); border-color:var(--line); }
.sx-chip.is-active{ color:var(--text); border-color:var(--line-bright); }

.sx-icon{
  appearance:none; cursor:pointer; flex:none;
  width:22px; height:22px; padding:0; border-radius:var(--r-md);
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-size:12px; line-height:1;
  transition:color .15s var(--ease,ease), border-color .15s var(--ease,ease), transform .35s var(--ease,ease);
}
.sx-icon:hover{ color:var(--text); border-color:var(--hud-edge, var(--line-bright)); }
.sx-icon:active{ transform:rotate(180deg); }

/* ---- the balance ---- */
.sx-hero{ display:flex; flex-direction:column; gap:6px; }
.sx-hero-value{
  font:600 30px/1 var(--font-mono); letter-spacing:-.01em; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.sx-hero.is-low .sx-hero-value{ color:var(--warn); }
.sx-hero.is-empty .sx-hero-value{ color:var(--danger, var(--warn)); }
.sx-hero.is-setup .sx-hero-value{ color:var(--faint); }
.sx-hero-sub{ color:var(--faint); font:500 10.5px/1.4 var(--font-mono); letter-spacing:.02em; }

/* Drain bar — how much of the anchored balance is left, not a progress bar. */
.sx-drain{ height:3px; border-radius:999px; background:var(--card-subtle); overflow:hidden; }
.sx-drain i{
  display:block; height:100%; border-radius:999px;
  background:var(--accent); transition:width .4s var(--ease,ease);
}
.sx-hero.is-low .sx-drain i{ background:var(--warn); }
.sx-hero.is-empty .sx-drain i{ background:var(--danger, var(--warn)); }

/* ---- the graph (the point of the card) ---- */
.sx-chart{ position:relative; display:flex; align-items:stretch; gap:6px; }
.sx-chart svg{ display:block; width:100%; height:104px; overflow:visible; }
.sx-bar{ fill:var(--accent); opacity:.85; }
.sx-chart svg:hover .sx-bar{ opacity:.6; }
.sx-chart rect:hover ~ .sx-bar{ opacity:.85; }
.sx-axis{ stroke:var(--line); stroke-width:1; }

/* Fixed width so the date axis below can reserve exactly this gutter and stay
   aligned to the plot area rather than to the card. */
.sx-chart-scale{
  display:flex; flex-direction:column; justify-content:space-between; flex:none;
  min-width:38px; padding:6px 0 10px; color:var(--faint);
  font:500 9px/1 var(--font-mono); letter-spacing:.03em;
}

.sx-chart-axis{
  display:flex; justify-content:space-between; gap:8px;
  margin-top:-4px; padding-right:44px;  /* 38px scale gutter + 6px chart gap */
  color:var(--faint); font:500 9px/1 var(--font-mono); letter-spacing:.03em;
}
.sx-chart-empty{ padding:26px 4px; color:var(--faint); font:500 11px/1.4 var(--font-body); }

/* ---- per-model split ---- */
.sx-models{ display:flex; flex-direction:column; gap:2px; }
.sx-model{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font:500 10.5px/1.6 var(--font-mono); letter-spacing:.02em;
}
.sx-model-id{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-model-cost{ color:var(--text); flex:none; font-variant-numeric:tabular-nums; }

/* ---- foot ---- */
.sx-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  color:var(--faint); font:500 9.5px/1.5 var(--font-mono); letter-spacing:.03em;
}
.sx-foot-when{ flex:none; }

/* ---- states ---- */
.sx-state{
  display:flex; flex-direction:column; gap:4px; padding:18px 4px;
  color:var(--muted); font:600 10.5px/1.5 var(--font-mono); letter-spacing:.04em;
}
.sx-state small{ color:var(--faint); font:500 10px/1.45 var(--font-body); letter-spacing:0; }
.sx-state.is-error{ color:var(--warn); }

/* =========================================================================
   COMPACT WALLET TILE — one command readout, sized and weighted to match the
   OpenRouter wallet card it sits next to (see .or-wallet-* in shell.css), so a
   rail holding both reads as one instrument rather than two designs.
   ========================================================================= */
.sx-wallet-card{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.sx-wallet-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sx-wallet-head .eo-rail-kicker{ font-size:14px; color:#fff; }

.sx-wallet-refresh{
  width:28px; height:28px; display:grid; place-items:center; padding:0;
  color:var(--muted); background:transparent; border:1px solid var(--line-soft, var(--line));
  border-radius:var(--r-sm); font:600 14px/1 var(--font-mono); cursor:pointer;
  transition:color var(--t-snap,.15s) var(--ease,ease), border-color var(--t-snap,.15s) var(--ease,ease), transform 120ms var(--ease,ease);
}
.sx-wallet-refresh:hover{ color:var(--accent); border-color:var(--hud-edge, var(--line-bright)); }
.sx-wallet-refresh:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sx-wallet-refresh:active{ transform:scale(.97); }

.sx-wallet-body{ min-height:60px; display:flex; align-items:center; }
.sx-wallet-reading{ width:100%; display:flex; align-items:end; }
.sx-wallet-value{
  color:var(--text); font:650 28px/1 var(--font-mono); letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; text-wrap:balance;
}
.sx-wallet-reading.is-empty .sx-wallet-value{ color:var(--danger, var(--warn)); }

.sx-wallet-state{ width:100%; color:var(--faint); font:700 10px/1.35 var(--font-mono); letter-spacing:.08em; }
.sx-wallet-state small{
  display:block; margin-top:4px; color:var(--muted);
  font:500 10px/1.4 var(--font-body); letter-spacing:0; text-wrap:pretty;
}
.sx-wallet-state.is-setup{ color:var(--warn); }
.sx-wallet-state.is-error{ color:var(--danger, var(--warn)); }

/* ---- anchor editor ---- */
.sx-editor{ display:flex; flex-direction:column; gap:8px; }
.sx-field{ display:flex; align-items:center; gap:8px; }
.sx-field > span{
  flex:none; width:58px; color:var(--faint);
  font:600 10px/1.4 var(--font-mono); letter-spacing:.04em;
}
/* Native form widgets (the date field's calendar glyph and its picker, the
   number field's spinners) paint in the OS light scheme unless the control
   opts in — same fix the capture inputs use in thought-capture.css. */
.sx-field input.eo-input{ flex:1; min-width:0; color-scheme:dark; }
.sx-editor-actions{ display:flex; gap:6px; }
.sx-editor-note{ margin:0; color:var(--faint); font:500 10px/1.45 var(--font-body); }
.sx-approx{ color:var(--warn); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }