/* ---------------------------------------------------------------- 1. skins */

:root,
[data-clobber-skin="dashboard"] {
  /* dashboard: the house light palette, and the fallback for every token a skin leaves out.
     It sits on :root and never on .clb: variables are inherited, so a widget that declared them
     on its own element would beat an ancestor's skin and every skin would render as this one. */
  --clobber-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --clobber-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --clobber-font-size: 13px;
  --clobber-bg: #F4F3EE;
  --clobber-panel: #FFFFFF;
  --clobber-sunken: #F4F3EE;
  --clobber-fg: #142029;
  --clobber-muted: #56646D;
  --clobber-grid: #D3D7D3;
  --clobber-grid-soft: #E4E6E2;
  --clobber-bid: #167A5B;
  --clobber-ask: #BD493B;
  --clobber-bid-wash: rgba(22,122,91,.11);
  --clobber-ask-wash: rgba(189,73,59,.11);
  --clobber-accent: #142029;
  --clobber-accent-fg: #F4F3EE;
  --clobber-badge: #F0BB48;
  --clobber-badge-fg: #142029;
  --clobber-radius: 4px;
  --clobber-pad: 10px;
  --clobber-row: 20px;
  --clobber-glow: none;
  --clobber-label-transform: uppercase;
  --clobber-label-track: .08em;
  --clobber-label-weight: 600;
  --clobber-border: 1px;
}

[data-clobber-skin="terminal"] {
  --clobber-font: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --clobber-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --clobber-font-size: 12px;
  --clobber-bg: #0E171E;
  --clobber-panel: #142029;
  --clobber-sunken: #0B1319;
  --clobber-fg: #F4F3EE;
  --clobber-muted: #9AA8B0;
  --clobber-grid: #2C3A44;
  --clobber-grid-soft: #1D2A33;
  --clobber-bid: #3DB58A;
  --clobber-ask: #E8806F;
  --clobber-bid-wash: rgba(61,181,138,.16);
  --clobber-ask-wash: rgba(232,128,111,.16);
  --clobber-accent: #3DB58A;
  --clobber-accent-fg: #0E171E;
  --clobber-badge: #F0BB48;
  --clobber-badge-fg: #142029;
  --clobber-radius: 2px;
  --clobber-pad: 9px;
  --clobber-row: 19px;
  --clobber-glow: none;
  --clobber-label-transform: uppercase;
  --clobber-label-track: .1em;
  --clobber-label-weight: 500;
}

[data-clobber-skin="neon"] {
  --clobber-font: 'Archivo', system-ui, sans-serif;
  --clobber-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --clobber-font-size: 12px;
  --clobber-bg: #05060C;
  --clobber-panel: #0A0D1A;
  --clobber-sunken: #070911;
  --clobber-fg: #E6F1FF;
  --clobber-muted: #7A88B0;
  --clobber-grid: #1B2242;
  --clobber-grid-soft: #121732;
  --clobber-bid: #27F5C0;
  --clobber-ask: #FF4D9D;
  --clobber-bid-wash: rgba(39,245,192,.14);
  --clobber-ask-wash: rgba(255,77,157,.14);
  --clobber-accent: #27F5C0;
  --clobber-accent-fg: #05060C;
  --clobber-badge: #A06BFF;
  --clobber-badge-fg: #05060C;
  --clobber-radius: 2px;
  --clobber-pad: 10px;
  --clobber-row: 20px;
  --clobber-glow: 0 0 0 1px rgba(39,245,192,.18), 0 0 28px rgba(39,245,192,.10);
  --clobber-label-transform: uppercase;
  --clobber-label-track: .16em;
  --clobber-label-weight: 600;
}

[data-clobber-skin="contrast"] {
  --clobber-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --clobber-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --clobber-font-size: 14px;
  --clobber-bg: #000000;
  --clobber-panel: #000000;
  --clobber-sunken: #000000;
  --clobber-fg: #FFFFFF;
  --clobber-muted: #E8E8E8;
  --clobber-grid: #FFFFFF;
  --clobber-grid-soft: #7A7A7A;
  --clobber-bid: #00E676;
  --clobber-ask: #FF6E6E;
  --clobber-bid-wash: rgba(0,230,118,.28);
  --clobber-ask-wash: rgba(255,110,110,.28);
  --clobber-accent: #FFE500;
  --clobber-accent-fg: #000000;
  --clobber-badge: #FFE500;
  --clobber-badge-fg: #000000;
  --clobber-radius: 0px;
  --clobber-pad: 12px;
  --clobber-row: 24px;
  --clobber-glow: none;
  --clobber-label-transform: uppercase;
  --clobber-label-track: .1em;
  --clobber-label-weight: 700;
  --clobber-border: 2px;
}

/* The one skin with a look instead of a palette: neon puts its accent into the glass, so prices
   carry a halo and a panel sits on a lit edge. Structure is still untouched. */
[data-clobber-skin="neon"] .clb-row > span:first-child,
[data-clobber-skin="neon"] .clb-quote-last,
[data-clobber-skin="neon"] .clb-stat-last .clb-stat-v {
  text-shadow: 0 0 12px currentColor;
}
[data-clobber-skin="neon"] .clb-head { border-bottom-color: var(--clobber-accent); }

/* ---------------------------------------------------------------- 2. base */

.clb {
  font-family: var(--clobber-font);
  font-size: var(--clobber-font-size);
  color: var(--clobber-fg);
  background: var(--clobber-panel);
  border: var(--clobber-border, 1px) solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
  box-shadow: var(--clobber-glow);
  box-sizing: border-box;
  line-height: 1.35;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.clb *, .clb *::before, .clb *::after { box-sizing: border-box; }
/* Every row in here is a grid or a flex box, and a display rule beats the hidden attribute, so a
   row the widget retired would stay on screen. The widgets hide by attribute; this is what makes
   that work. */
.clb [hidden] { display: none !important; }
.clb-num {
  font-family: var(--clobber-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.clb-label {
  text-transform: var(--clobber-label-transform);
  letter-spacing: var(--clobber-label-track);
  font-weight: var(--clobber-label-weight);
  font-size: .85em;
  color: var(--clobber-muted);
}
.clb-up { color: var(--clobber-bid); }
.clb-down { color: var(--clobber-ask); }
.clb-flat { color: var(--clobber-muted); }

.clb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--clobber-pad) * .7) var(--clobber-pad);
  border-bottom: 1px solid var(--clobber-grid-soft);
  background: var(--clobber-panel);
  flex: none;
}
.clb-head-title {
  font-weight: var(--clobber-label-weight);
  text-transform: var(--clobber-label-transform);
  letter-spacing: var(--clobber-label-track);
  font-size: .85em;
}
.clb-head-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.clb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clobber-muted);
  flex: none;
}
.clb-dot[data-status="live"] { background: var(--clobber-bid); }
.clb-dot[data-status="connecting"] { background: var(--clobber-badge); }
.clb-dot[data-status="resyncing"] { background: var(--clobber-badge); animation: clb-pulse .9s ease-in-out infinite; }
.clb-dot[data-status="closed"] { background: var(--clobber-ask); }
@keyframes clb-pulse { 50% { opacity: .25; } }

.clb-badge {
  background: var(--clobber-badge);
  color: var(--clobber-badge-fg);
  border-radius: var(--clobber-radius);
  padding: 1px 6px;
  font-size: .8em;
  text-transform: var(--clobber-label-transform);
  letter-spacing: var(--clobber-label-track);
  font-weight: var(--clobber-label-weight);
  white-space: nowrap;
}
.clb-empty {
  padding: var(--clobber-pad);
  color: var(--clobber-muted);
  font-size: .9em;
}

/* ---------------------------------------------------------------- 3. order book */

.clb-book-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.clb-book-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 2px var(--clobber-pad);
  border-bottom: 1px solid var(--clobber-grid-soft);
}
.clb-book-cols span { font-size: .78em; }
.clb-book-cols span:nth-child(2), .clb-book-cols span:nth-child(3) { text-align: right; }
.clb-side { display: flex; flex-direction: column; }
.clb-side-asks { justify-content: flex-end; }
.clb-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  height: var(--clobber-row);
  padding: 0 var(--clobber-pad);
  position: relative;
  cursor: default;
}
.clb-row > span { position: relative; z-index: 1; }
.clb-row > span:nth-child(2), .clb-row > span:nth-child(3) { text-align: right; }
.clb-row > span:nth-child(3) { color: var(--clobber-muted); }
.clb-row::before {
  content: "";
  position: absolute;
  top: 1px; bottom: 1px; right: 0;
  width: var(--clb-bar, 0%);
  background: var(--clb-wash, transparent);
  transition: width 140ms ease-out;
}
.clb-row[data-side="bid"] { --clb-wash: var(--clobber-bid-wash); }
.clb-row[data-side="ask"] { --clb-wash: var(--clobber-ask-wash); }
.clb-row[data-side="bid"] > span:first-child { color: var(--clobber-bid); }
.clb-row[data-side="ask"] > span:first-child { color: var(--clobber-ask); }
.clb-row[data-clickable="1"] { cursor: pointer; }
.clb-row[data-clickable="1"]:hover { outline: 1px solid var(--clobber-grid); outline-offset: -1px; }
.clb-spread {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: calc(var(--clobber-row) + 6px);
  border-top: 1px solid var(--clobber-grid-soft);
  border-bottom: 1px solid var(--clobber-grid-soft);
  background: var(--clobber-sunken);
  font-size: .9em;
  flex: none;
}
.clb-flash-up { animation: clb-flash-up 420ms ease-out; }
.clb-flash-down { animation: clb-flash-down 420ms ease-out; }
@keyframes clb-flash-up { from { background: var(--clobber-bid-wash); } }
@keyframes clb-flash-down { from { background: var(--clobber-ask-wash); } }

/* ---------------------------------------------------------------- 4. canvas widgets */

.clb-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.clb-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.clb-tip {
  position: absolute;
  pointer-events: none;
  background: var(--clobber-panel);
  border: 1px solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
  padding: 4px 7px;
  font-family: var(--clobber-mono);
  font-variant-numeric: tabular-nums;
  font-size: .85em;
  white-space: nowrap;
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: opacity 100ms;
  z-index: 3;
}
.clb-tip[data-show="1"] { opacity: 1; }
.clb-chart-body { flex: 1 1 auto; min-height: 0; position: relative; }
.clb-intervals { display: flex; gap: 2px; }
.clb-intervals button {
  font: inherit;
  font-size: .8em;
  font-family: var(--clobber-mono);
  color: var(--clobber-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--clobber-radius);
  padding: 1px 6px;
  cursor: pointer;
}
.clb-intervals button:hover { color: var(--clobber-fg); border-color: var(--clobber-grid-soft); }
.clb-intervals button[aria-pressed="true"] {
  color: var(--clobber-accent-fg);
  background: var(--clobber-accent);
  border-color: var(--clobber-accent);
}

/* ---------------------------------------------------------------- 5. tape */

.clb-tape-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.clb-tape-row {
  display: grid;
  grid-template-columns: 14px 1fr 1fr 1fr;
  align-items: center;
  height: var(--clobber-row);
  padding: 0 var(--clobber-pad);
  border-bottom: 1px solid var(--clobber-grid-soft);
}
.clb-tape-row > span:nth-child(3), .clb-tape-row > span:nth-child(4) { text-align: right; }
.clb-tape-row > span:nth-child(4) { color: var(--clobber-muted); font-size: .9em; }
.clb-tape-row[data-side="buy"] > span:first-child,
.clb-tape-row[data-side="buy"] > span:nth-child(2) { color: var(--clobber-bid); }
.clb-tape-row[data-side="sell"] > span:first-child,
.clb-tape-row[data-side="sell"] > span:nth-child(2) { color: var(--clobber-ask); }
.clb-new { animation: clb-in 280ms ease-out; }
@keyframes clb-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------------- 6. summary */

.clb-summary-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--clobber-pad) calc(var(--clobber-pad) * 1.6);
  padding: var(--clobber-pad);
}
.clb-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clb-stat-v { font-family: var(--clobber-mono); font-variant-numeric: tabular-nums; font-size: 1.05em; }
.clb-stat-last .clb-stat-v { font-size: 1.6em; line-height: 1.1; }
.clb-stat-change { display: flex; align-items: baseline; gap: 5px; }

/* ---------------------------------------------------------------- 7. ticker banner */

.clb-ticker {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--clobber-radius);
  flex-direction: row;
  height: calc(var(--clobber-row) * 1.9);
}
.clb-ticker-brand {
  display: flex; align-items: center; gap: 7px;
  padding: 0 var(--clobber-pad);
  background: var(--clobber-accent);
  color: var(--clobber-accent-fg);
  font-weight: var(--clobber-label-weight);
  text-transform: var(--clobber-label-transform);
  letter-spacing: var(--clobber-label-track);
  font-size: .8em;
  white-space: nowrap;
  flex: none;
  z-index: 2;
}
.clb-ticker-brand .clb-dot { background: currentColor; }
.clb-ticker-view { position: relative; overflow: hidden; flex: 1 1 auto; }
.clb-ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: clb-marquee var(--clb-marquee, 60s) linear infinite;
  will-change: transform;
}
.clb-ticker:hover .clb-ticker-track { animation-play-state: paused; }
@keyframes clb-marquee { to { transform: translateX(-50%); } }
.clb-quote {
  display: flex; align-items: baseline; gap: 7px;
  padding: 0 calc(var(--clobber-pad) * 1.4);
  border-right: 1px solid var(--clobber-grid-soft);
  white-space: nowrap;
  height: 100%;
  align-content: center;
  align-items: center;
}
.clb-quote-sym { font-weight: var(--clobber-label-weight); letter-spacing: .02em; }
.clb-quote-last { font-family: var(--clobber-mono); font-variant-numeric: tabular-nums; }
.clb-quote-chg { font-family: var(--clobber-mono); font-size: .9em; }
.clb-quote[data-dir="up"] .clb-quote-last { color: var(--clobber-bid); }
.clb-quote[data-dir="down"] .clb-quote-last { color: var(--clobber-ask); }
.clb-quote-halt { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .clb-ticker-track { animation: none; }
  .clb-ticker-view { overflow-x: auto; }
}

/* ---------------------------------------------------------------- 8. order ticket */

.clb-ticket-body { display: flex; flex-direction: column; gap: calc(var(--clobber-pad) * .8); padding: var(--clobber-pad); }
.clb-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.clb-seg button {
  font: inherit;
  font-size: .9em;
  padding: 6px 4px;
  border: var(--clobber-border, 1px) solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
  background: var(--clobber-panel);
  color: var(--clobber-muted);
  cursor: pointer;
  text-transform: var(--clobber-label-transform);
  letter-spacing: var(--clobber-label-track);
  font-weight: var(--clobber-label-weight);
}
.clb-seg button:hover { color: var(--clobber-fg); }
.clb-seg button[aria-pressed="true"] { background: var(--clobber-sunken); color: var(--clobber-fg); border-color: var(--clobber-fg); }
.clb-seg[data-role="side"] button[aria-pressed="true"][value="buy"] { background: var(--clobber-bid); border-color: var(--clobber-bid); color: var(--clobber-panel); }
.clb-seg[data-role="side"] button[aria-pressed="true"][value="sell"] { background: var(--clobber-ask); border-color: var(--clobber-ask); color: var(--clobber-panel); }
.clb-field { display: flex; flex-direction: column; gap: 3px; }
.clb-field input {
  font-family: var(--clobber-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1em;
  padding: 6px 8px;
  color: var(--clobber-fg);
  background: var(--clobber-sunken);
  border: var(--clobber-border, 1px) solid var(--clobber-grid);
  border-radius: var(--clobber-radius);
  width: 100%;
}
.clb-field input:focus-visible { outline: 2px solid var(--clobber-accent); outline-offset: 1px; }
.clb-field input:disabled { opacity: .45; }
.clb-opts { display: flex; gap: var(--clobber-pad); flex-wrap: wrap; align-items: center; }
.clb-check { display: flex; align-items: center; gap: 5px; font-size: .9em; color: var(--clobber-muted); cursor: pointer; }
.clb-lines { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; border-top: 1px solid var(--clobber-grid-soft); }
.clb-line { display: flex; justify-content: space-between; gap: 8px; font-size: .9em; color: var(--clobber-muted); }
.clb-line span:last-child { font-family: var(--clobber-mono); font-variant-numeric: tabular-nums; color: var(--clobber-fg); }
.clb-submit {
  font: inherit;
  font-weight: var(--clobber-label-weight);
  text-transform: var(--clobber-label-transform);
  letter-spacing: var(--clobber-label-track);
  padding: 9px 10px;
  border: none;
  border-radius: var(--clobber-radius);
  background: var(--clobber-accent);
  color: var(--clobber-accent-fg);
  cursor: pointer;
}
.clb-submit[data-side="buy"] { background: var(--clobber-bid); color: #fff; }
.clb-submit[data-side="sell"] { background: var(--clobber-ask); color: #fff; }
.clb-submit:disabled { opacity: .5; cursor: default; }
.clb-note { font-size: .9em; min-height: 1.2em; }
.clb-note[data-kind="error"] { color: var(--clobber-ask); }
.clb-note[data-kind="ok"] { color: var(--clobber-bid); }

/* ---------------------------------------------------------------- 9. market layout */

.clb-market {
  display: grid;
  gap: var(--clobber-pad);
  grid-template-columns: minmax(0, 2.2fr) minmax(230px, 1fr);
  grid-template-areas:
    "summary summary"
    "chart   book"
    "depth   tape"
    "ticket  tape";
  align-items: stretch;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.clb-market > [data-clobber="market-summary"] { grid-area: summary; }
.clb-market > [data-clobber="market-chart"] { grid-area: chart; min-height: 280px; }
.clb-market > [data-clobber="order-book"] { grid-area: book; min-height: 280px; }
.clb-market > [data-clobber="depth-chart"] { grid-area: depth; min-height: 190px; }
.clb-market > [data-clobber="trade-tape"] { grid-area: tape; min-height: 190px; }
.clb-market > [data-clobber="order-ticket"] { grid-area: ticket; }
.clb-market[data-ticket="0"] {
  grid-template-areas:
    "summary summary"
    "chart   book"
    "depth   tape";
}
@media (max-width: 720px) {
  .clb-market, .clb-market[data-ticket="0"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary" "chart" "book" "depth" "tape" "ticket";
  }
}