/* ============================================================================
   IFX — component library. Built entirely on the token files (themes for free).
   Loaded via styles.css after tokens. Class prefix: .ifx-*
   ========================================================================== */

/* ---- Root / surface ---- */
.ifx {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent);
}
.ifx *,
.ifx *::before,
.ifx *::after { box-sizing: border-box; }
.ifx ::selection { background: var(--accent); color: var(--accent-fg); }

/* ---- Typography ---- */
.ifx-display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ifx-h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.ifx-h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0; }
.ifx-h3 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); margin: 0; }
.ifx-editorial {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}
.ifx-lead { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-muted); }
.ifx-label {
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text);
}
.ifx-label--muted { color: var(--text-muted); font-weight: 600; }
.ifx-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ifx-pixel { font-family: var(--font-pixel); text-transform: uppercase; line-height: 1; }
.ifx-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ifx-link { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
.ifx-link:hover { color: var(--link-hover); }

/* ---- Color-note swatch (the dotted square) ---- */
.ifx-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border: var(--border-width) dotted var(--border-dotted);
  background: var(--bg);
}
.ifx-swatch::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1px dotted var(--border-dotted);
  background: var(--bg);
}
.ifx-swatch--iris { background: var(--note-iris); }
.ifx-swatch--ocean { background: var(--note-ocean); }
.ifx-swatch--mist { background: var(--note-mist); }
.ifx-swatch--forest { background: var(--note-forest); }
.ifx-swatch--orange { background: var(--note-orange); }
.ifx-swatch--ink { background: var(--note-ink); }
.ifx-swatch--up { background: var(--up); }
.ifx-swatch--down { background: var(--down); }
.ifx-swatch--outline { background: var(--bg); }

/* swatch + label */
.ifx-note { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.ifx-note > .ifx-label { color: var(--text); }
.ifx-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--border);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text);
}

/* ---- Buttons (signature double-square) ---- */
.ifx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--border-width) solid var(--btn-bg);
  cursor: pointer;
  transition: filter var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ifx-btn::after { /* adornment square */
  content: "";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: var(--swatch-size);
  height: var(--swatch-size);
  background: var(--btn-bg);
}
.ifx-btn:hover { filter: brightness(1.12); }
.ifx-btn:active { filter: brightness(0.94); }
.ifx-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ifx-btn--secondary { background: var(--bg); color: var(--text); border: var(--border-width) dotted var(--border-dotted); }
.ifx-btn--secondary::after { background: var(--border-dotted); }
.ifx-btn--secondary:hover { background: var(--surface-2); filter: none; }
.ifx-btn--ghost { background: transparent; color: var(--text); border-color: transparent; }
.ifx-btn--ghost::after { display: none; }
.ifx-btn--ghost:hover { background: var(--surface-2); filter: none; }
.ifx-btn--buy { background: var(--up); color: #06140c; border-color: var(--up); }
.ifx-btn--buy::after { background: var(--up); }
.ifx-btn--sell { background: var(--down); color: #1a0606; border-color: var(--down); }
.ifx-btn--sell::after { background: var(--down); }
.ifx-btn--sm { padding: var(--space-2) var(--space-4); }
.ifx-btn--block { width: 100%; }
.ifx-btn:disabled, .ifx-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* icon button */
.ifx-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: var(--border-width) solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ifx-icon-btn:hover { background: var(--surface-2); }
.ifx-icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Badges / status pills ---- */
.ifx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  border: var(--border-width) solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
}
.ifx-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ifx-badge--nodot::before { display: none; }
.ifx-badge--live { color: var(--up); border-color: color-mix(in oklab, var(--up) 50%, transparent); background: var(--up-bg); }
.ifx-badge--halted { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 50%, transparent); background: var(--warn-bg); }
.ifx-badge--settled { color: var(--text-muted); }
.ifx-badge--new { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.ifx-badge--info { color: var(--info); border-color: color-mix(in oklab, var(--info) 50%, transparent); background: var(--info-bg); }
.ifx-badge--up { color: var(--up); border-color: color-mix(in oklab, var(--up) 45%, transparent); background: var(--up-bg); }
.ifx-badge--down { color: var(--down); border-color: color-mix(in oklab, var(--down) 45%, transparent); background: var(--down-bg); }

/* ---- Price cells ---- */
.ifx-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.ifx-price--up { color: var(--up); }
.ifx-price--down { color: var(--down); }
.ifx-delta { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ifx-delta--up { color: var(--up); }
.ifx-delta--up::before { content: "▲"; font-size: 0.7em; }
.ifx-delta--down { color: var(--down); }
.ifx-delta--down::before { content: "▼"; font-size: 0.7em; }

/* ---- Cards / panels ---- */
.ifx-card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  padding: var(--space-5);
}
.ifx-card--dotted { border-style: dotted; border-color: var(--border-dotted); }
.ifx-panel { background: var(--surface); border: var(--border-width) solid var(--border); }
.ifx-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}
.ifx-panel__body { padding: var(--space-4); }

/* ---- Stat / KPI tile ---- */
.ifx-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) solid var(--border); background: var(--surface); }
.ifx-stat__label { font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.ifx-stat__value { font-family: var(--font-mono); font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.ifx-stat__sub { display: flex; align-items: center; gap: var(--space-2); }

/* ---- Inputs / order entry ---- */
.ifx-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ifx-field > label { font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.ifx-field__hint { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.ifx-field__hint--error { color: var(--down); }
.ifx-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
.ifx-input::placeholder { color: var(--text-subtle); }
.ifx-input:focus, .ifx-input:focus-within { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
.ifx-input--error { border-color: var(--down); }
.ifx-input--error:focus { outline-color: var(--down); }
.ifx-input-group { display: flex; align-items: stretch; border: var(--border-width) solid var(--border-strong); background: var(--bg-elevated); }
.ifx-input-group .ifx-input { border: 0; outline-offset: -2px; }
.ifx-input-group__unit { display: flex; align-items: center; padding: 0 var(--space-3); border-left: var(--border-width) solid var(--border); font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); background: var(--surface-2); }
.ifx-input-group__unit--left { border-left: 0; border-right: var(--border-width) solid var(--border); }

/* select */
.ifx-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  cursor: pointer;
  appearance: none;
}
.ifx-select:focus { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
.ifx-select-wrap { position: relative; display: inline-flex; width: 100%; }
.ifx-select-wrap::after { content: "▾"; position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); font-family: var(--font-mono); }

/* checkbox / radio / switch */
.ifx-check { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text); cursor: pointer; }
.ifx-check__box { width: 16px; height: 16px; border: var(--border-width) solid var(--border-strong); background: var(--bg-elevated); display: inline-flex; align-items: center; justify-content: center; color: var(--bg); }
.ifx-check__box--radio { border-radius: 50%; }
.ifx-check[data-checked="true"] .ifx-check__box { background: var(--text); border-color: var(--text); }
.ifx-check[data-checked="true"] .ifx-check__box--radio { background: var(--text); }
.ifx-switch { position: relative; width: 36px; height: 18px; border: var(--border-width) solid var(--border-strong); background: var(--surface-2); cursor: pointer; transition: background var(--dur) var(--ease); }
.ifx-switch__knob { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; background: var(--text-muted); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.ifx-switch[data-checked="true"] { background: color-mix(in oklab, var(--up) 24%, transparent); border-color: var(--up); }
.ifx-switch[data-checked="true"] .ifx-switch__knob { transform: translateX(18px); background: var(--up); }

/* ---- Segmented control / tabs ---- */
.ifx-segment { display: inline-flex; border: var(--border-width) solid var(--border-strong); }
.ifx-segment button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  cursor: pointer;
  border-right: var(--border-width) solid var(--border);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ifx-segment button:last-child { border-right: 0; }
.ifx-segment button[aria-selected="true"], .ifx-segment button.is-active { background: var(--text); color: var(--bg); }

/* line tabs */
.ifx-tabs { display: inline-flex; gap: var(--space-5); border-bottom: var(--border-width) solid var(--border); }
.ifx-tabs button { appearance: none; border: 0; background: transparent; padding: var(--space-3) 0; font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur) var(--ease); }
.ifx-tabs button[aria-selected="true"], .ifx-tabs button.is-active { color: var(--text); border-bottom-color: var(--text); }

/* ---- Order book ---- */
.ifx-orderbook { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ifx-ob-row { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); padding: 2px var(--space-3); }
.ifx-ob-row > span { position: relative; z-index: 1; }
.ifx-ob-row__depth { position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; }
.ifx-ob-row--bid .ifx-ob-row__depth { background: var(--depth-bid); }
.ifx-ob-row--bid .ifx-ob-price { color: var(--up); }
.ifx-ob-row--ask .ifx-ob-row__depth { background: var(--depth-ask); }
.ifx-ob-row--ask .ifx-ob-price { color: var(--down); }
.ifx-ob-spread { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); border-top: var(--border-width) solid var(--border); border-bottom: var(--border-width) solid var(--border); color: var(--text-muted); }

/* ---- Depth / ASCII block bar ---- */
.ifx-ascii { font-family: var(--font-pixel); font-size: 13px; line-height: 1; letter-spacing: -0.04em; color: var(--text); overflow: hidden; white-space: nowrap; }
.ifx-depth { display: flex; height: 8px; border: var(--border-width) solid var(--border); background: var(--surface-2); }
.ifx-depth__fill { height: 100%; }
.ifx-depth__fill--up { background: var(--up); }
.ifx-depth__fill--down { background: var(--down); }
.ifx-depth__fill--accent { background: var(--accent); }

/* ---- Ticker tape ---- */
.ifx-ticker { display: flex; overflow: hidden; border-block: var(--border-width) solid var(--border); background: var(--surface); }
.ifx-ticker__track { display: inline-flex; gap: var(--space-6); padding: var(--space-2) var(--space-4); white-space: nowrap; animation: ifx-marquee 40s linear infinite; }
.ifx-ticker__item { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ifx-ticker__sym { font-family: var(--font-label); font-weight: 700; letter-spacing: var(--tracking-label); color: var(--text); }
@keyframes ifx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Table ---- */
.ifx-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ifx-table thead th { text-align: right; padding: var(--space-2) var(--space-3); font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); border-bottom: var(--border-width) solid var(--border-strong); white-space: nowrap; }
.ifx-table thead th:first-child, .ifx-table tbody td:first-child { text-align: left; }
.ifx-table tbody td { padding: var(--space-2) var(--space-3); text-align: right; border-bottom: var(--border-width) solid var(--border); color: var(--text); }
.ifx-table tbody tr:hover { background: var(--surface-2); }
.ifx-table--rows tbody tr { cursor: pointer; }

/* ---- Nav ---- */
.ifx-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-bottom: var(--border-width) solid var(--border); background: var(--surface); }
.ifx-nav__links { display: flex; align-items: center; gap: var(--space-5); }
.ifx-nav__links a { font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.ifx-nav__links a:hover, .ifx-nav__links a[aria-current="page"] { color: var(--text); }

/* ---- Divider ---- */
.ifx-divider { border: 0; border-top: var(--border-width) solid var(--border); margin: 0; }
.ifx-divider--dotted { border-top-style: dotted; border-top-color: var(--border-dotted); }

/* ---- Alert / inline message (error & warning states) ---- */
.ifx-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.ifx-alert__icon { font-family: var(--font-pixel); line-height: 1; flex-shrink: 0; margin-top: 1px; }
.ifx-alert__title { font-family: var(--font-label); font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.ifx-alert__body { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }
.ifx-alert--error { border-color: color-mix(in oklab, var(--down) 55%, transparent); background: var(--down-bg); }
.ifx-alert--error .ifx-alert__icon, .ifx-alert--error .ifx-alert__title { color: var(--down); }
.ifx-alert--warn { border-color: color-mix(in oklab, var(--warn) 55%, transparent); background: var(--warn-bg); }
.ifx-alert--warn .ifx-alert__icon, .ifx-alert--warn .ifx-alert__title { color: var(--warn); }
.ifx-alert--info { border-color: color-mix(in oklab, var(--info) 55%, transparent); background: var(--info-bg); }
.ifx-alert--info .ifx-alert__icon, .ifx-alert--info .ifx-alert__title { color: var(--info); }

/* ---- Toast ---- */
.ifx-toast { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border: var(--border-width) solid var(--border-strong); box-shadow: var(--shadow-pop); color: var(--text); font-family: var(--font-mono); font-size: var(--text-sm); }
.ifx-toast__dot { width: 8px; height: 8px; flex-shrink: 0; }
.ifx-toast__dot--up { background: var(--up); }
.ifx-toast__dot--down { background: var(--down); }
.ifx-toast__dot--info { background: var(--info); }

/* ---- Tooltip ---- */
.ifx-tooltip { position: relative; display: inline-flex; }
.ifx-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3);
  background: var(--ifx-ink);
  color: var(--ifx-ob);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  white-space: nowrap;
  border: var(--border-width) solid var(--border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: var(--z-overlay);
}
[data-theme="dark"] .ifx-tooltip__bubble, .dark .ifx-tooltip__bubble { background: #eaf2ee; color: var(--ifx-ink); }
.ifx-tooltip:hover .ifx-tooltip__bubble, .ifx-tooltip:focus-within .ifx-tooltip__bubble { opacity: 1; }

/* ---- Empty state ---- */
.ifx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: var(--border-width) dotted var(--border-dotted);
  background: var(--surface);
}
.ifx-empty__art { font-family: var(--font-pixel); font-size: 13px; line-height: 1.3; letter-spacing: -0.04em; color: var(--text-subtle); white-space: pre; }
.ifx-empty__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text); }
.ifx-empty__body { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); max-width: 42ch; }

/* ---- Theme toggle ---- */
.ifx-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text);
}
.ifx-toggle__dot { width: var(--swatch-size); height: var(--swatch-size); background: var(--text); }

/* ---- ASCII background field ---- */
.ifx-ascii-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  white-space: pre;
  line-height: 1;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .ifx-ticker__track { animation: none; }
  .ifx * { transition-duration: 0.01ms !important; }
}