/* predict.css — the paper exchange, /predict.html (js/exchange.js).
   Built on store.css's tokens: the same ground, panels, lines and type. Two
   colours of its own, YES and NO, because a trade's side is the one thing a
   reader must never have to read twice. Every class starts xc-. */

:root {
  --xc-yes: #00c805;
  --xc-yes-ink: #04140a;
  --xc-yes-wash: rgba(0, 200, 5, .12);
  --xc-yes-line: rgba(0, 200, 5, .38);
  --xc-no: #ff5a4e;
  --xc-no-ink: #1c0604;
  --xc-no-wash: rgba(255, 90, 78, .12);
  --xc-no-line: rgba(255, 90, 78, .4);
  --xc-house: #6f8bd8;
  --xc-raise: 0 10px 30px rgba(0, 0, 0, .35);
}

.xc { max-width: 1280px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dim { color: var(--store-dim); }
.xc-up { color: var(--xc-yes); }
.xc-down { color: var(--xc-no); }
.xc-flat { color: var(--store-dim); }
.xc-c-yes { color: var(--xc-yes); }
.xc-c-no { color: var(--xc-no); }

/* ── the section row: the terminal's sub-tabs (terminal.css .term-sub) ──── */
.xc-bar { margin: 0 -16px; padding: 0 16px; background: var(--t-bg); border-bottom: 1px solid var(--t-line); }
/* the terminal's .wrap is 12px a side on a phone (terminal.css), so the row and the ticker bleed that far */
@media (max-width: 760px) { .xc-bar, .xc-ticker { margin-left: -12px; margin-right: -12px; } .xc-bar { padding: 0 12px; } }
.xc-bar-in { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.xc-paper { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--store-gold); border: 1px solid rgba(201, 162, 39, .45); border-radius: 3px; padding: 3px 6px; }
.xc-tabs { display: flex; gap: 4px; }
.xc-tab { padding: 5px 12px; border-radius: 3px; color: var(--t-muted); text-decoration: none; font-size: .82rem; white-space: nowrap; }
.xc-tab:hover { color: var(--t-ink); background: var(--t-raise); }
.xc-tab[aria-current] { color: var(--t-ink); background: var(--t-raise); box-shadow: inset 0 0 0 1px var(--t-line); }
.xc-wallet { margin-left: auto; }
.xc-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 3px;
  background: var(--t-panel); border: 1px solid var(--t-line); color: var(--t-ink);
  text-decoration: none; font-size: 13px; }
.xc-chip:hover { border-color: var(--t-muted); }
.xc-chip-k { color: var(--t-dim); font-size: 12px; }
.xc-signin { display: inline-block; padding: 7px 12px; border-radius: 3px; background: var(--xc-yes);
  color: var(--xc-yes-ink); font: 700 13px/1 var(--body); text-decoration: none; }
.xc-signin:hover { filter: brightness(1.08); }

/* the ticker: the day's movers, running */
.xc-ticker { margin: 0 -16px 18px; overflow: hidden; border-bottom: 1px solid var(--store-line);
  background: var(--store-hull); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.xc-ticker:empty { display: none; }
.xc-ticker-run { display: inline-flex; gap: 28px; padding: 8px 0; white-space: nowrap;
  animation: xc-run 70s linear infinite; }
.xc-ticker:hover .xc-ticker-run { animation-play-state: paused; }
.xc-ticker a { display: inline-flex; gap: 8px; align-items: baseline; color: var(--store-muted);
  text-decoration: none; font-size: 13px; }
.xc-ticker a b { color: var(--store-ink); }
@keyframes xc-run { to { transform: translateX(-50%); } }

.xc-body { padding-bottom: 80px; }
.xc-wait { display: flex; gap: 10px; align-items: center; padding: 60px 0; color: var(--store-muted); justify-content: center; }
.xc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--store-line-2);
  border-top-color: var(--xc-yes); animation: xc-spin .8s linear infinite; }
@keyframes xc-spin { to { transform: rotate(360deg); } }
.xc-empty { color: var(--store-dim); padding: 28px 0; text-align: center; }
.xc-banner { margin: 0 0 16px; padding: 11px 14px; border-radius: 3px; border: 1px solid rgba(201, 162, 39, .4);
  background: rgba(201, 162, 39, .08); color: var(--store-ink); font-size: 14px; }

/* ── the hero ────────────────────────────────────────────────────────────── */
.xc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: center;
  padding: 22px; margin-bottom: 20px; border-radius: 3px; border: 1px solid var(--store-line);
  background: radial-gradient(120% 140% at 100% 0%, rgba(0, 200, 5, .09), transparent 55%), var(--store-panel); }
.xc-hero-q { color: var(--store-ink); text-decoration: none; }
.xc-hero-q h2 { font: 700 26px/1.2 var(--body); margin: 10px 0 14px; letter-spacing: -.015em; }
.xc-hero-q:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.xc-hero-a { margin: -6px 0 14px; color: var(--store-muted); font: 600 15px/1.3 var(--body); }
.xc-hero-a b { color: var(--store-ink); }
.xc-hero-n { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.xc-hero-n b { font-size: 46px; line-height: 1; color: var(--xc-yes); font-weight: 600; }
.xc-hero-n > span:first-of-type { color: var(--store-muted); }
.xc-hero-meta { margin: 12px 0 0; color: var(--store-dim); font-size: 13px; }
.xc-hero-r { display: block; }
.xc-hot { font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--xc-no);
  background: var(--xc-no-wash); padding: 4px 7px; border-radius: 3px; }

/* ── filters ─────────────────────────────────────────────────────────────── */
.xc-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 16px; }
.xc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-pill { padding: 8px 13px; border-radius: 3px; border: 1px solid var(--store-line); background: transparent;
  color: var(--store-muted); font: 600 13px/1 var(--body); cursor: pointer; }
.xc-pill:hover { color: var(--store-ink); border-color: var(--store-line-2); }
.xc-pill[aria-pressed="true"] { background: var(--store-ink); color: var(--store-bg); border-color: var(--store-ink); }
.xc-pill .num { opacity: .65; font-size: 11px; }
.xc-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xc-search input, .xc-tools select, .xc-tk-top select {
  height: 36px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--store-line); background: var(--store-pit);
  color: var(--store-ink); font: 14px var(--body); }
.xc-search input { width: 220px; }
.xc-search input:focus, .xc-tools select:focus, .xc-input:focus-within { outline: none; border-color: var(--xc-yes-line);
  box-shadow: 0 0 0 3px var(--xc-yes-wash); }
.xc-seg { display: inline-flex; padding: 3px; border-radius: 3px; background: var(--store-pit); border: 1px solid var(--store-line); }
.xc-seg button { padding: 7px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--store-muted);
  font: 600 13px/1 var(--body); cursor: pointer; }
.xc-seg button[aria-pressed="true"] { background: var(--store-panel-2); color: var(--store-ink); box-shadow: var(--bevel); }

/* ── cards ───────────────────────────────────────────────────────────────── */
.xc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.xc-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 3px; border: 1px solid var(--store-line);
  background: var(--store-panel); transition: border-color .15s, transform .15s, box-shadow .15s; min-width: 0; }
.xc-card:hover { border-color: var(--store-line-2); transform: translateY(-2px); box-shadow: var(--xc-raise); }
.xc-card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.xc-card h3 { font: 600 16px/1.3 var(--body); margin: 0; color: var(--store-ink); }
.xc-card-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--store-dim); flex-wrap: wrap; }
.xc-cat { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 4px 7px; border-radius: 3px;
  background: var(--store-panel-2); color: var(--store-muted); }
.xc-cat-players { color: #8fd18f; }
.xc-cat-gates { color: #e0b765; }
.xc-cat-store { color: #93b4ff; }
.xc-game { color: var(--store-muted); }
.xc-meta-chip { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--store-dim); }
.xc-card-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.xc-card-dial { position: relative; display: grid; justify-items: center; width: 76px; }
.xc-card-dial b { position: absolute; top: 18px; font-size: 18px; color: var(--store-ink); }
.xc-card-dial small { position: absolute; top: 40px; font-size: 10px; color: var(--store-dim); }
.xc-dial-bg, .xc-dial-fg { fill: none; stroke-width: 7; stroke-linecap: round; }
.xc-dial-bg { stroke: var(--store-line); }
.xc-dial-fg { stroke: var(--xc-yes); }
.xc-card-spark { height: 36px; }
.xc-card-foot { display: flex; gap: 12px; font-size: 12px; color: var(--store-dim); margin-top: auto; }
.xc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.xc-rows li { display: grid; grid-template-columns: minmax(44px, 1fr) minmax(40px, 72px) 46px auto; gap: 10px; align-items: center;
  font-size: 14px; }
.xc-row-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a text answer ("The Millers") wants the room a number's bar would take */
.xc-rows li.is-text { grid-template-columns: minmax(0, 1fr) 46px auto; }
.xc-rows li.is-text .xc-row-bar { display: none; }
.xc-row-l { color: var(--store-ink); text-decoration: none; font-weight: 600; }
.xc-row-bar { height: 6px; border-radius: 3px; background: var(--store-pit); overflow: hidden; }
.xc-row-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--g-core), var(--xc-yes)); border-radius: 3px; }
.xc-rows b { text-align: right; }
.xc-row-yn { display: inline-flex; gap: 4px; }

/* sparklines */
.xc-spark { width: 100%; height: 100%; display: block; overflow: visible; }
.xc-spark-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.xc-spark.is-up .xc-spark-line, .xc-curve.is-up .xc-spark-line { stroke: var(--xc-yes); }
.xc-spark.is-down .xc-spark-line, .xc-curve.is-down .xc-spark-line { stroke: var(--xc-no); }
.xc-spark.is-up .xc-spark-fill, .xc-curve.is-up .xc-spark-fill { fill: var(--xc-yes-wash); }
.xc-spark.is-down .xc-spark-fill, .xc-curve.is-down .xc-spark-fill { fill: var(--xc-no-wash); }
.xc-spark-flat { stroke: var(--store-line-2); stroke-dasharray: 3 4; }
.xc-spark.is-hero { height: 170px; }
.xc-spark.is-hero .xc-spark-line { stroke-width: 2.4; }

/* yes / no buttons */
.xc-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xc-yes, .xc-no { display: inline-flex; justify-content: center; align-items: baseline; gap: 6px; padding: 10px 12px;
  border-radius: 3px; border: 1px solid transparent; font: 700 14px/1 var(--body); cursor: pointer;
  transition: background .12s, color .12s, transform .08s; }
.xc-yes { background: var(--xc-yes-wash); color: var(--xc-yes); border-color: var(--xc-yes-line); }
.xc-no { background: var(--xc-no-wash); color: var(--xc-no); border-color: var(--xc-no-line); }
.xc-yes:hover:not(:disabled), .xc-yes.is-on { background: var(--xc-yes); color: var(--xc-yes-ink); }
.xc-no:hover:not(:disabled), .xc-no.is-on { background: var(--xc-no); color: var(--xc-no-ink); }
.xc-yes:active:not(:disabled), .xc-no:active:not(:disabled) { transform: scale(.98); }
.xc-yes:disabled, .xc-no:disabled { opacity: .45; cursor: not-allowed; }
.xc-yes b, .xc-no b { font-family: var(--mono); font-weight: 600; }
.xc-yes.sm, .xc-no.sm { padding: 6px 9px; font-size: 12px; border-radius: 3px; }
.xc-yn.is-big .xc-yes, .xc-yn.is-big .xc-no { padding: 14px; font-size: 16px; }
.xc-resolved { padding: 10px 12px; border-radius: 3px; font: 700 14px/1.2 var(--body); text-align: center; }
.xc-resolved small { display: block; font: 400 13px/1.4 var(--body); color: var(--store-muted); margin-top: 4px; }
.xc-res-yes { background: var(--xc-yes-wash); color: var(--xc-yes); }
.xc-res-no { background: var(--xc-no-wash); color: var(--xc-no); }
.xc-res-void { background: var(--store-panel-2); color: var(--store-muted); }
.xc-resolved.is-big { font-size: 18px; margin: 4px 0 14px; text-align: left; padding: 14px 16px; }

/* the totals under the grid, and how it works */
.xc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0; }
.xc-stats div { padding: 14px; border-radius: 3px; border: 1px solid var(--store-line); background: var(--store-hull); }
.xc-stats b { display: block; font-size: 22px; }
.xc-stats span { color: var(--store-dim); font-size: 13px; }
.xc-how { padding: 20px; border-radius: 3px; border: 1px solid var(--store-line); background: var(--store-hull); }
.xc-how h2 { font: 700 18px/1 var(--body); margin: 0 0 14px; }
.xc-how ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  counter-reset: xc; }
.xc-how li { counter-increment: xc; color: var(--store-muted); font-size: 14px; }
.xc-how li::before { content: counter(xc); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--store-panel-2); color: var(--store-ink); font: 700 13px/1 var(--mono); margin-bottom: 8px; }
.xc-how li b { color: var(--store-ink); display: block; margin-bottom: 2px; }
.xc-agentbox code { font: 12px var(--mono); color: var(--store-muted); background: var(--store-pit);
  padding: 2px 5px; border-radius: 3px; overflow-wrap: anywhere; }

/* ── one market ──────────────────────────────────────────────────────────── */
.xc-market { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.xc-crumb { display: flex; gap: 8px; font-size: 13px; color: var(--store-dim); margin-bottom: 10px; }
.xc-crumb a { color: var(--store-muted); }
.xc-mhead h1 { font: 700 26px/1.2 var(--body); margin: 0 0 8px; letter-spacing: -.015em; }
.xc-mmeta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--store-dim); }
.xc-mmeta b { color: var(--store-ink); font-family: var(--mono); font-weight: 500; }
.xc-sibs { display: flex; gap: 6px; overflow-x: auto; margin: 16px 0 4px; padding-bottom: 4px; }
.xc-sibs a { display: grid; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: 3px; border: 1px solid var(--store-line);
  background: var(--store-panel); color: var(--store-muted); text-decoration: none; font-size: 12px; text-align: center; }
.xc-sibs a b { color: var(--store-ink); font-size: 15px; }
.xc-sibs a[aria-current] { border-color: var(--xc-yes-line); background: var(--xc-yes-wash); }
.xc-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 12px; }
.xc-big b { font-size: 40px; line-height: 1; font-weight: 600; }
.xc-big > span { color: var(--store-muted); }
.xc-asof { margin-left: auto; }
.xc-panel { padding: 16px; border-radius: 3px; border: 1px solid var(--store-line); background: var(--store-panel); margin-bottom: 16px; }
.xc-ph { font: 600 15px/1 var(--body); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.xc-ph small { color: var(--store-dim); font: 400 12px var(--body); }
.xc-chart-panel { position: relative; padding-bottom: 10px; }
.xc-chart-wrap { position: relative; }
.xc-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.xc-gl { stroke: var(--store-line); stroke-dasharray: 2 4; stroke-width: 1; }
.xc-axis { fill: var(--store-dim); font: 11px var(--mono); }
.xc-open { stroke: var(--store-gold); stroke-dasharray: 1 5; opacity: .6; }
.xc-line { fill: none; stroke-width: 2.2; }
.xc-line.is-yes { stroke: var(--xc-yes); }
.xc-line.is-no { stroke: var(--xc-no); }
.xc-area.is-yes { fill: var(--xc-yes-wash); }
.xc-area.is-no { fill: var(--xc-no-wash); }
.xc-now.is-yes, .xc-cross-dot.is-yes { fill: var(--xc-yes); }
.xc-now.is-no, .xc-cross-dot.is-no { fill: var(--xc-no); }
.xc-now { stroke: var(--store-panel); stroke-width: 2; animation: xc-pulse-r 2s ease-out infinite; }
.xc-cross { stroke: var(--store-line-2); stroke-width: 1; }
.xc-hit { fill: transparent; cursor: crosshair; }
.xc-tip { position: absolute; pointer-events: none; display: grid; gap: 2px; min-width: 120px; padding: 7px 10px; border-radius: 3px;
  background: var(--store-panel-2); border: 1px solid var(--store-line-2); box-shadow: var(--xc-raise); font-size: 12px; }
.xc-tip b { font: 600 14px var(--mono); }
.xc-tip span { color: var(--store-dim); }
.xc-vol { width: 100%; height: 36px; display: block; margin-top: 4px; }
.xc-vol rect { fill: var(--store-line-2); }
.xc-ranges { display: flex; gap: 4px; justify-content: flex-end; margin-top: 8px; }
.xc-ranges button { padding: 5px 10px; border-radius: 3px; border: 0; background: transparent; color: var(--store-dim);
  font: 600 12px/1 var(--mono); cursor: pointer; }
.xc-ranges button[aria-pressed="true"] { background: var(--store-panel-2); color: var(--store-ink); }

/* the live read */
.xc-live { padding: 16px; margin-bottom: 16px; border-radius: 3px; border: 1px solid var(--xc-yes-line);
  background: linear-gradient(180deg, var(--xc-yes-wash), transparent 80%), var(--store-panel); }
.xc-live-h { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--xc-yes); margin-bottom: 10px; }
.xc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--xc-yes); animation: xc-pulse-r 1.6s ease-out infinite; }
@keyframes xc-pulse-r { 0% { box-shadow: 0 0 0 0 rgba(0, 200, 5, .55); } 100% { box-shadow: 0 0 0 10px rgba(0, 200, 5, 0); } }
.xc-live-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.xc-live-n b { font-size: 32px; line-height: 1; }
.xc-live-n span { color: var(--store-muted); }
.xc-prog { height: 10px; border-radius: 3px; background: var(--store-pit); overflow: hidden; margin: 12px 0; }
.xc-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--g-core), var(--xc-yes));
  transition: width .5s ease; }
.xc-live-row { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--store-dim); }
.xc-live-row b { color: var(--store-ink); }
.xc-live-row a { margin-left: auto; }

/* the ladder */
.xc-ladder { font-size: 13px; }
.xc-lhead, .xc-lrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.xc-lhead { color: var(--store-dim); font: 600 11px/1 var(--mono); text-transform: uppercase; padding: 0 10px 8px; }
.xc-lhead span:not(:first-child), .xc-lrow span:not(:first-of-type) { text-align: right; }
.xc-lrow { position: relative; width: 100%; padding: 5px 10px; border: 0; background: transparent; color: var(--store-ink);
  font: inherit; cursor: pointer; text-align: left; border-radius: 3px; overflow: hidden; }
.xc-lrow:hover { background: var(--store-panel-2); }
.xc-lrow > span { position: relative; z-index: 1; }
.xc-lbar, .xc-lbar-book { position: absolute; right: 0; top: 2px; bottom: 2px; border-radius: 3px; }
.xc-lrow.is-ask .xc-lbar { background: rgba(255, 90, 78, .1); }
.xc-lrow.is-bid .xc-lbar { background: rgba(0, 200, 5, .1); }
.xc-lrow.is-ask .xc-lbar-book { background: rgba(255, 90, 78, .28); }
.xc-lrow.is-bid .xc-lbar-book { background: rgba(0, 200, 5, .28); }
.xc-lrow.is-ask .xc-lpx { color: var(--xc-no); }
.xc-lrow.is-bid .xc-lpx { color: var(--xc-yes); }
.xc-lval { color: var(--store-muted); }
.xc-spread { display: flex; justify-content: space-between; padding: 8px 10px; margin: 4px 0; border-block: 1px solid var(--store-line);
  color: var(--store-dim); font-size: 12px; }
.xc-spread b { color: var(--store-ink); }
.xc-lnote { margin: 10px 0 0; font-size: 12px; color: var(--store-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xc-key-book, .xc-key-amm { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.xc-key-book { background: rgba(0, 200, 5, .45); }
.xc-key-amm { background: rgba(0, 200, 5, .14); border: 1px solid var(--store-line-2); }

/* tabs under the market */
.xc-subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--store-line); margin: -4px -4px 14px; }
.xc-subtabs button { padding: 10px 12px; border: 0; background: transparent; color: var(--store-dim); font: 600 14px/1 var(--body);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.xc-subtabs button[aria-selected="true"] { color: var(--store-ink); border-bottom-color: var(--xc-yes); }
.xc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.xc-table th { text-align: left; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--store-dim);
  padding: 0 8px 8px; border-bottom: 1px solid var(--store-line); white-space: nowrap; }
.xc-table td.r, .xc-table td:nth-child(2) { white-space: nowrap; }
.xc-table td { padding: 9px 8px; border-bottom: 1px solid rgba(43, 51, 44, .5); vertical-align: middle; }
.xc-table .r { text-align: right; }
.xc-table tr.is-you td { background: var(--xc-yes-wash); }
.xc-table a { color: var(--store-ink); }
.xc-scroll { overflow-x: auto; }
.xc-side-yes, .xc-side-no { font: 700 11px/1 var(--mono); text-transform: uppercase; padding: 4px 6px; border-radius: 3px; white-space: nowrap; }
.xc-side-yes { color: var(--xc-yes); background: var(--xc-yes-wash); }
.xc-side-no { color: var(--xc-no); background: var(--xc-no-wash); }
h4.xc-side-yes, h4.xc-side-no { display: inline-block; margin: 0 0 10px; }
.xc-trader { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--store-ink); }
.xc-trader:hover { text-decoration: underline; }
.xc-ava { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--store-panel-2);
  color: #fff; font: 700 11px/1 var(--body); flex: none; }
.xc-ava.big { width: 44px; height: 44px; font-size: 18px; }
.xc-agent { font: 600 10px/1 var(--mono); text-transform: uppercase; color: var(--xc-house); border: 1px solid rgba(111, 139, 216, .5);
  border-radius: 3px; padding: 3px 5px; vertical-align: middle; }
.xc-holders { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xc-holder { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(43, 51, 44, .5); }
.xc-holder .num { margin-left: auto; }
.xc-rules p { color: var(--store-muted); line-height: 1.6; margin: 0 0 14px; }
.xc-rules dl { display: grid; gap: 10px; margin: 0 0 14px; }
.xc-rules dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.xc-rules dt { color: var(--store-dim); }
.xc-rules dd { margin: 0; overflow-wrap: anywhere; }

/* ── the ticket ──────────────────────────────────────────────────────────── */
.xc-mright { position: sticky; top: 68px; }
.xc-ticket { padding: 16px; border-radius: 3px; border: 1px solid var(--store-line-2); background: var(--store-panel);
  box-shadow: var(--xc-raise); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.xc-ticket > *, .xc-field, .xc-mright, .xc-mleft { min-width: 0; }
.xc-sheet-grip, .xc-sheet-x { display: none; }
.xc-tk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.xc-bs button { min-width: 64px; }
.xc-tk-out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xc-tk-out .xc-yes, .xc-tk-out .xc-no { padding: 14px 10px; font-size: 15px; }
.xc-field { display: grid; gap: 6px; }
.xc-field > span { font-size: 13px; color: var(--store-muted); }
.xc-input { display: flex; align-items: center; height: 46px; border-radius: 3px; border: 1px solid var(--store-line);
  background: var(--store-pit); padding: 0 12px; }
.xc-input input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; color: var(--store-ink);
  font: 600 20px var(--mono); text-align: right; outline: none; }
.xc-input em { font-style: normal; color: var(--store-dim); margin-left: 8px; font-size: 13px; }
.xc-step button { width: 30px; height: 30px; border-radius: 3px; border: 1px solid var(--store-line); background: var(--store-panel-2);
  color: var(--store-ink); font: 600 16px/1 var(--mono); cursor: pointer; }
.xc-step input { text-align: center; }
.xc-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.xc-quick button { padding: 6px 10px; border-radius: 3px; border: 1px solid var(--store-line); background: transparent;
  color: var(--store-muted); font: 600 12px/1 var(--mono); cursor: pointer; }
.xc-quick button:hover { color: var(--store-ink); border-color: var(--store-line-2); }
.xc-held { margin-left: auto; font-size: 12px; color: var(--store-dim); }
.xc-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--store-muted); }
.xc-sum:empty { display: none; }
.xc-sumdl { display: grid; gap: 7px; margin: 0; font-size: 13px; }
.xc-sumdl div { display: flex; justify-content: space-between; gap: 12px; }
.xc-sumdl dt { color: var(--store-dim); }
.xc-sumdl dd { margin: 0; text-align: right; }
.xc-win { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 3px; background: var(--xc-yes-wash); }
.xc-win span { color: var(--store-muted); font-size: 13px; }
.xc-win b { margin-left: auto; font-size: 22px; color: var(--xc-yes); }
.xc-win em { font-style: normal; color: var(--xc-yes); font-size: 13px; }
.xc-go { display: block; width: 100%; padding: 15px; border-radius: 3px; border: 0; font: 700 16px/1 var(--body); cursor: pointer;
  text-align: center; text-decoration: none; transition: filter .12s, transform .08s; }
.xc-go-yes { background: var(--xc-yes); color: var(--xc-yes-ink); }
.xc-go-no { background: var(--xc-no); color: var(--xc-no-ink); }
.xc-go:hover:not(:disabled) { filter: brightness(1.08); }
.xc-go:active:not(:disabled) { transform: scale(.99); }
.xc-go:disabled { opacity: .5; cursor: not-allowed; }
.xc-go.is-busy { opacity: .7; cursor: progress; }
.xc-go.sm { display: inline-block; width: auto; padding: 11px 16px; font-size: 14px; }
.xc-why { margin: 0; font-size: 13px; color: var(--store-gold); }
.xc-fine { margin: -4px 0 0; font-size: 12px; color: var(--store-dim); text-align: center; }
.xc-pos { border-top: 1px solid var(--store-line); padding-top: 12px; }
.xc-pos h4 { font: 600 13px/1 var(--body); margin: 0 0 10px; display: flex; justify-content: space-between; }
.xc-pl, .xc-ord { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.xc-ord { grid-template-columns: auto 1fr auto; }
.xc-x { width: 26px; height: 26px; border-radius: 3px; border: 1px solid var(--store-line); background: transparent; color: var(--store-muted);
  font-size: 16px; line-height: 1; cursor: pointer; }
.xc-x:hover { color: var(--xc-no); border-color: var(--xc-no-line); }
.xc-link { border: 0; background: none; padding: 0; color: var(--store-link); font: inherit; font-size: 12px; cursor: pointer; }
.xc-dock, .xc-scrim { display: none; }

/* ── portfolio, board, trader ────────────────────────────────────────────── */
.xc-phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 6px 0 18px; flex-wrap: wrap; }
.xc-phead h1 { font: 700 28px/1.1 var(--body); margin: 0 0 6px; }
.xc-phead p { margin: 0; }
.xc-who { display: flex; gap: 14px; align-items: center; }
.xc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.xc-kpi { padding: 14px 16px; border-radius: 3px; border: 1px solid var(--store-line); background: var(--store-panel); display: grid; gap: 4px; }
.xc-kpi span { font-size: 12px; color: var(--store-dim); }
.xc-kpi b { font-size: 24px; font-weight: 600; }
.xc-kpi small { color: var(--store-dim); font-size: 12px; }
.xc-curve { width: 100%; height: 150px; display: block; }
.xc-zero { stroke: var(--store-line-2); stroke-dasharray: 2 4; }
.xc-curve-empty { padding: 20px 0; text-align: center; }
.xc-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.xc-calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.xc-calls li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.xc-calls li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; }
.xc-calls li.is-right span { background: var(--xc-yes-wash); color: var(--xc-yes); }
.xc-calls li.is-wrong span { background: var(--xc-no-wash); color: var(--xc-no); }
.xc-calls em { font-style: normal; color: var(--store-dim); font-family: var(--mono); font-size: 11px; }
.xc-calls a { color: var(--store-ink); }
.xc-agentbox { margin-top: 8px; color: var(--store-muted); font-size: 14px; }
.xc-agentbox summary { cursor: pointer; color: var(--store-dim); }
.xc-cta { max-width: 520px; margin: 40px auto; padding: 28px; text-align: center; border-radius: 3px; border: 1px solid var(--store-line);
  background: var(--store-panel); }
.xc-cta h2 { font: 700 24px/1.2 var(--body); margin: 0 0 10px; }
.xc-cta p { color: var(--store-muted); margin: 0 0 18px; }
.xc-medal { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 3px;
  background: var(--store-panel-2); font: 700 12px/1 var(--mono); color: var(--store-ink); }

/* ── badges, skins won, the month's race ─────────────────────────────────── */
.xc-bdg { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; margin-left: 4px; border-radius: 3px;
  background: var(--store-panel-2); border: 1px solid var(--store-line-2); color: var(--store-gold); font: 700 10px/1 var(--mono);
  vertical-align: middle; cursor: default; }
.xc-bdgs { display: flex; gap: 2px; justify-content: center; min-height: 20px; }
.xc-bdgs .xc-bdg { margin: 0; }
.xc-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.xc-badge { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px;
  padding: 12px; border-radius: 3px; border: 1px dashed var(--store-line-2); background: var(--store-pit); opacity: .8; }
.xc-badge.is-on { border-style: solid; border-color: rgba(201, 162, 39, .55); opacity: 1;
  background: radial-gradient(120% 120% at 0% 0%, rgba(201, 162, 39, .12), transparent 60%), var(--store-panel); }
.xc-badge-m { grid-row: 1 / span 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 3px;
  background: var(--store-panel-2); color: var(--store-dim); font: 700 15px/1 var(--mono); }
.xc-badge.is-on .xc-badge-m { background: var(--store-gold); color: #1b1503; }
.xc-badge b { font: 600 14px/1.2 var(--body); }
.xc-badge small { color: var(--store-dim); font-size: 12px; line-height: 1.35; }
.xc-badge-p { display: block; height: 4px; border-radius: 3px; background: var(--store-line); overflow: hidden; margin-top: 6px; }
.xc-badge-p i { display: block; height: 100%; background: var(--store-gold); }
.xc-badge em { grid-column: 2; font-style: normal; font-size: 11px; color: var(--store-dim); }
.xc-won ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.xc-won li { display: flex; gap: 10px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.xc-won li a { margin-left: auto; font-size: 13px; }
.xc-won p { margin: 0; font-size: 12px; }
.xc-race { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border-color: rgba(201, 162, 39, .45); background: radial-gradient(100% 140% at 100% 0%, rgba(201, 162, 39, .1), transparent 60%), var(--store-panel); }
.xc-race p { margin: 0; color: var(--store-muted); }
.xc-race ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xc-race li { display: flex; gap: 10px; align-items: center; font-size: 14px; }

.xc-gtag { font: 700 11px/1 var(--mono); color: var(--store-muted); text-decoration: none; vertical-align: middle; }
.xc-gtag:hover { color: var(--store-ink); }
.xc-gtag.big { font-size: 13px; color: var(--store-ink); }

/* ── a phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .xc-market { grid-template-columns: minmax(0, 1fr); }
  .xc-hero { grid-template-columns: minmax(0, 1fr); }
  .xc-hero-r { display: none; }
  .xc-how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xc-two { grid-template-columns: minmax(0, 1fr); }
  /* the ticket becomes a sheet the dock opens */
  .xc-mright { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; transform: translateY(105%);
    transition: transform .22s ease; max-height: 88vh; overflow-y: auto; }
  .xc-mright.is-open { transform: none; }
  .xc-ticket { border-radius: 3px 3px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .xc-sheet-grip { display: block; justify-self: center; width: 40px; height: 4px; border-radius: 3px; background: var(--store-line-2); }
  .xc-sheet-x { display: inline-block; }
  .xc-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none;
    transition: opacity .2s; }
  .xc-scrim.is-open { opacity: 1; pointer-events: auto; }
  .xc-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 12, 10, .95); border-top: 1px solid var(--store-line); }
  .xc-dock .xc-yes, .xc-dock .xc-no { padding: 14px; font-size: 15px; }
}
@media (max-width: 640px) {
  .xc-race { grid-template-columns: minmax(0, 1fr); }
  .xc-bar-in { flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; }
  .xc-tabs { order: 3; width: 100%; overflow-x: auto; }
  .xc-tab { padding: 7px 10px; font-size: 13px; }
  .xc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xc-how ol { grid-template-columns: minmax(0, 1fr); }
  .xc-search input { width: 100%; }
  .xc-tools { width: 100%; }
  .xc-search { flex: 1 1 100%; }
  .xc-tools select { flex: 1; }
  .xc-hero { padding: 16px; }
  .xc-hero-q h2 { font-size: 21px; }
  .xc-hero-n b { font-size: 38px; }
  .xc-mhead h1 { font-size: 21px; }
  .xc-big b { font-size: 34px; }
  .xc-rules dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .xc-holders { grid-template-columns: minmax(0, 1fr); }
  .xc-grid { grid-template-columns: minmax(0, 1fr); }
  .xc-lval { display: none; }
  .xc-lhead, .xc-lrow { grid-template-columns: 1fr 1fr; }
  .xc-lhead span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xc-ticker-run, .xc-pulse, .xc-now, .xc-spin { animation: none; }
  .xc-card, .xc-mright, .xc-prog i { transition: none; }
}