/* /demos/arb-lab page chrome.
 *
 * Loaded only by this page, through Tags.PageCSS. Not a shell asset, so sw.js's
 * CACHE_VERSION has nothing to say about it — the ?v= in PageCSSHref is the
 * whole cache-busting story, and it is served with a 30-day max-age.
 *
 * COLORS COME FROM THE SHARED SHEET'S CUSTOM PROPERTIES. css.css declares
 * --ink, --ink-muted, --hairline, --surface, --surface-alt and --accent, and
 * redeclares every one of them under the dark theme. Reading them here is what
 * makes this page survive both without a second palette to keep in step — a
 * hard-coded gray that reads correctly on white is invisible on black, and
 * nothing on the page would say so.
 *
 * THE FOUR PLOT COLORS ARE THIS PAGE'S OWN VOCABULARY and are declared here:
 * profit, loss, the reader's own position on the curve and the optimum. They
 * follow the same three-way discipline as the shared sheet — system preference,
 * and then an explicit toggle overriding it in BOTH directions, because without
 * the second pair the plot would follow the OS while the rest of the page
 * followed the toggle.
 */

.arb-stage {
  --arb-gain: #1a7f37;
  --arb-loss: #bc4c00;
  --arb-you: #0a66c2;
  --arb-best: #8250df;
}

@media (prefers-color-scheme: dark) {
  .arb-stage {
    --arb-gain: #3fb950;
    --arb-loss: #f0883e;
    --arb-you: #58a6ff;
    --arb-best: #d2a8ff;
  }
}

[data-theme="dark"] .arb-stage {
  --arb-gain: #3fb950;
  --arb-loss: #f0883e;
  --arb-you: #58a6ff;
  --arb-best: #d2a8ff;
}

[data-theme="light"] .arb-stage {
  --arb-gain: #1a7f37;
  --arb-loss: #bc4c00;
  --arb-you: #0a66c2;
  --arb-best: #8250df;
}

/* THE SIMULATION LABEL IS NOT DECORATION. It is the one sentence that stops a
 * reader taking a profit figure for a finding about a real market, so it gets
 * the weight of a caption rather than a footnote — and it sits at the TOP of
 * the stage, above the first step, rather than under it. */
.arb-stage__label {
  margin: 1.5rem 0 0.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--surface-alt);
  font-size: 0.9rem;
}

.arb-status {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  min-height: 1.4em;
}

/* Each step is a panel so the tutorial reads as a sequence rather than as one
 * long page with headings in it. */
.arb-step {
  margin: 1.5rem 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.25rem;
  background: var(--surface-alt);
}

.arb-step h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0;
}

.arb-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

/* THE TWO POOLS SIT SIDE BY SIDE AND STACK, rather than scrolling. They are two
 * short lists of labelled figures, and horizontal scrolling cannot rescue a
 * comparison — a reader would have to scroll back and forth once per row to
 * make it. A 14rem floor is what makes them stack at 320px instead. */
.arb-pools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.arb-pool {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 1rem;
  background: var(--surface);
  min-width: 0;
}

.arb-pool h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

/* The role chip says which pool the round trip buys from. It is filled in by
 * the module, so it starts empty and reserves its line. */
.arb-pool__role {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-muted);
  vertical-align: middle;
  min-height: 1.1em;
}

/* auto-fit with a 9rem floor is what keeps a readout legible at 320px: four
 * figures become one column rather than four columns that each overflow. */
.arb-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}

.arb-figure {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* overflow-wrap is load-bearing rather than tidy. These values are unrounded
 * model output, and a long unbroken number is the classic way a grid cell
 * pushes a page wider than the viewport. */
.arb-figure__value {
  font-size: 1.55rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.arb-figure--small .arb-figure__value {
  font-size: 1.15rem;
}

/* The profit cell takes its color from a data attribute the script sets from
 * the model's own Profitable flag. The SIGN IS NEVER TESTED IN JAVASCRIPT — a
 * comparison at a boundary is exactly where a page and a model can disagree
 * about whether a trade paid. */
.arb-figure__value[data-sign="gain"] {
  color: var(--arb-gain);
}

.arb-figure__value[data-sign="loss"] {
  color: var(--arb-loss);
}

.arb-figure__unit {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.arb-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
}

.arb-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1.25rem;
}

.arb-control {
  min-width: 0;
}

.arb-control label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.arb-control output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.arb-control input[type="range"] {
  display: block;
  width: 100%;
  max-width: 100%;
  accent-color: var(--accent);
}

.arb-run {
  margin: 0.5rem 0;
}

/* The band bar draws the no-arb range against the whole ratio control, so the
 * fee step's claim — "this widens as fees rise" — is something a reader watches
 * rather than reads. Its two halves are positioned by the script from the
 * model's own band bounds; nothing about the geometry is computed here. */
.arb-band {
  position: relative;
  height: 2.1rem;
  margin: 1rem 0 0.35rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.arb-band__inside {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--arb-loss);
  opacity: 0.28;
}

.arb-band__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--arb-you);
}

.arb-band__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* The note reserves its line rather than shifting the panel every time a
 * message appears and disappears. */
.arb-note {
  margin: 1rem 0 0;
  min-height: 1.4em;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* A TABLE SCROLLS INSIDE ITS OWN CONTAINER, never past the viewport. The
 * min-width below is what forces the columns to stay readable; the wrapper is
 * what stops that min-width becoming the page's width at 320px. The wrapper
 * also carries tabindex, role and aria-label in the markup, because a div that
 * scrolls with neither is a region a keyboard user cannot enter and a screen
 * reader announces as nothing. */
.arb-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
  max-width: 100%;
}

.arb-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 26rem;
}

.arb-table th,
.arb-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 0.55rem 0.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.arb-table thead th,
.arb-table tbody th {
  text-align: left;
  font-weight: 600;
  white-space: normal;
}

.arb-table thead th {
  border-bottom: 2px solid var(--hairline);
}

/* At the narrowest phones the figure type has to come down, or a six-figure
 * value with a decimal tail sets a column wider than the screen even with
 * overflow-wrap allowed. */
@media (max-width: 400px) {
  .arb-figure__value {
    font-size: 1.25rem;
  }

  .arb-step {
    padding: 1rem 0.85rem;
  }
}