/* /demos/amm-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 three plot colors are the exception and are declared here, because they
 * are this page's own vocabulary rather than the site's: the curve, the pool's
 * current point and the post-trade point have to stay distinguishable from each
 * other. They follow the same three-way discipline as the shared sheet — system
 * preference, and then an explicit toggle overriding it in both directions.
 */

.amm-stage {
  --amm-curve: #0a66c2;
  --amm-mark: #1a7f37;
  --amm-after: #bc4c00;
}

@media (prefers-color-scheme: dark) {
  .amm-stage {
    --amm-curve: #58a6ff;
    --amm-mark: #3fb950;
    --amm-after: #f0883e;
  }
}

/* An explicit choice wins over the system preference, matching the shell's own
 * theme toggle. Without this the plot colors would follow the OS while the rest
 * of the page followed the toggle. */
[data-theme="dark"] .amm-stage {
  --amm-curve: #58a6ff;
  --amm-mark: #3fb950;
  --amm-after: #f0883e;
}

[data-theme="light"] .amm-stage {
  --amm-curve: #0a66c2;
  --amm-mark: #1a7f37;
  --amm-after: #bc4c00;
}

/* THE SIMULATION LABEL IS NOT DECORATION. It is the one sentence that stops a
 * reader taking these figures for a reading off a deployed pool, so it gets the
 * weight of a caption rather than the weight of a footnote — and it sits at the
 * TOP of the stage, above the first step, rather than under it. */
.amm-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;
}

.amm-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. */
.amm-step {
  margin: 1.5rem 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 1.25rem;
  background: var(--surface-alt);
}

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

.amm-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;
}

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

.amm-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 — a share count can run to a dozen significant figures — and a
 * long unbroken number is the classic way a grid cell pushes a page wider than
 * the viewport. */
.amm-figure__value {
  font-size: 1.55rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.amm-figure--warn .amm-figure__value {
  color: var(--amm-after);
}

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

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

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

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

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

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

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

/* The fee tiers are BUTTONS rather than a select, on purpose: three options that
 * all fit is a case where a listbox costs a reader a click and gains them
 * nothing. They wrap rather than scroll. */
.amm-feetiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.amm-fee {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 0.4rem 1.1rem;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.amm-fee.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

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

/* The note reserves its line rather than shifting the panel every time a message
 * appears and disappears. */
.amm-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. */
.amm-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
  max-width: 100%;
}

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

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

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

.amm-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) {
  .amm-figure__value {
    font-size: 1.25rem;
  }

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