/* Machine-only presentation. Palette and typography inherit site tokens. */
.machine-page {
  --machine-unit: 4px;
  --machine-xs: 8px;
  --machine-sm: 12px;
  --machine-md: 16px;
  --machine-pad: 20px;
  --machine-lg: 24px;
  --machine-xl: 32px;
  --machine-gap: 48px;
  --machine-section: 64px;
  --machine-gutter: 20px;
  --machine-touch: 44px;
  --machine-input: 56px;
  --machine-line: 1px;
  --machine-ring: 2px;
  --machine-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --machine-fast: 180ms;
  --machine-enter: 240ms;
  --machine-drift: 24s;
  --machine-blur: 64px;
  --machine-body: 18px;
  --machine-number: clamp(24px, 3vw, 40px);
  --machine-total: clamp(48px, 6vw, 72px);
  --machine-edge: color-mix(in srgb, var(--ink) 12%, var(--card));
  --machine-shadow: 0 4px 8px -4px var(--hairline), 0 24px 48px -32px var(--hairline);
  --machine-surface: var(--card);
  isolation: isolate;
  font-size: max(var(--machine-body), var(--size-body));
}

/* Two prepainted, blurred shapes. Only transform and opacity drift. */
.machine-page .machine-haze {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.machine-page .machine-haze::before,
.machine-page .machine-haze::after {
  content: "";
  position: absolute;
  width: 88%;
  height: 52%;
  border-radius: 50%;
  background: var(--band-alt);
  filter: blur(var(--machine-blur));
  opacity: 0.65;
  will-change: transform, opacity;
  animation: machine-haze-drift var(--machine-drift) var(--machine-ease) infinite alternate;
}
.machine-page .machine-haze::before { top: 8%; left: -24%; }
.machine-page .machine-haze::after {
  right: -20%;
  bottom: 0;
  background: var(--haze-light);
  animation-direction: alternate-reverse;
}
@keyframes machine-haze-drift {
  from { transform: translate3d(0, 0, 0); opacity: 0.5; }
  to { transform: translate3d(8%, -6%, 0); opacity: 0.8; }
}

/* Open section ground lets the atmosphere remain behind opaque surfaces. */
.machine-page .wrap {
  width: min(var(--column), calc(100% - var(--machine-gutter) * 2));
  min-width: 0;
}
.machine-page .page-intro { padding-block: var(--machine-section) var(--machine-xl); }
.machine-page .band,
.machine-page .chain-strip { padding-block: var(--machine-gap); background: transparent; }
.machine-page #prestake { overflow: visible; }
.machine-page #prestake::before { content: none; animation: none; }
.machine-page .sec-head { margin-bottom: var(--machine-lg); }
.machine-page .sec-head .sub { margin-top: var(--machine-md); }
.machine-page :is(p, .sub, .lede, .fine, figcaption, label, input, .btn, .field-help, .field-error, [role="status"], [data-visual-caption], .result-rows dt, .result-rows dd, th, td) {
  font-size: max(var(--machine-body), var(--size-body));
}
.machine-page :is(.fine, .sub, .field-help, .pool-state, .ledger-head, .footer h3, .risk, .colophon) { color: var(--ink); }
.machine-page :is(.wrap, .card, .fields, .row-btns, .result-rows) > * { min-width: 0; }
.machine-page :is(p, dt, dd, button, a, .pool-counter, .condensation-body) { overflow-wrap: anywhere; }
.machine-page .card,
.machine-page .machine-log {
  padding: var(--machine-pad);
  border: var(--machine-line) solid var(--machine-edge);
  border-radius: var(--r-card);
  background: var(--machine-surface);
  box-shadow: var(--machine-shadow);
  min-width: 0;
}
.machine-page .card:has(a.btn, button, input, form):hover {
  transform: none;
  box-shadow: var(--machine-shadow);
}
.machine-page .card :is(.fine, .field-help, .result-rows dt, th) { color: var(--muted); }
.machine-page [data-visual-caption] { margin-block: 0 var(--machine-lg); align-items: flex-start; }
.machine-page .note-glyph { margin-top: var(--machine-unit); color: var(--accent-text); }
.machine-page .eyebrow-pill { width: fit-content; padding: var(--machine-sm) var(--machine-md); }
.machine-page .result-rows { gap: 0; margin-top: var(--machine-lg); }
.machine-page .result-rows > div {
  padding-block: var(--machine-md);
  border-top: var(--machine-line) solid var(--machine-edge);
  gap: var(--machine-md);
}
.machine-page .result-rows dd { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.machine-page .row-btns { gap: var(--machine-sm); margin-top: var(--machine-lg); }
.machine-page [role="status"]:empty { margin: 0; }
.machine-page #navWalletBalance { white-space: normal; overflow-wrap: anywhere; overflow: visible; }

/* Pool plate: a clear quantity, a quiet track, then the action. */
.machine-page .pool-card { max-width: none; }
.machine-page .pool-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--machine-xs) var(--machine-sm);
  font-family: var(--mono);
  font-size: var(--machine-number);
  line-height: 1.2;
  letter-spacing: normal;
}
.machine-page #prestakeTotal { font-family: var(--font); font-size: var(--machine-total); font-weight: 500; }
.machine-page .pool-unit { flex-basis: 100%; margin: 0; font-family: var(--font); font-size: var(--machine-body); }
.machine-page .pool-meter { gap: var(--machine-md); margin-block: var(--machine-lg); }
.machine-page .pool-meter progress { height: var(--machine-xs); }
.machine-page #prestakePct { font: var(--machine-body)/1.5 var(--mono); }
.machine-page .pool-rule { font-weight: 400; }
.machine-page .pool-state {
  border-top: var(--machine-line) solid var(--machine-edge);
  padding-top: var(--machine-lg);
  margin-block: var(--machine-xs) var(--machine-lg);
}

/* Forms retain native disabled and busy behavior. No synthetic loader. */
.machine-page .amount-field { max-width: none; margin-top: var(--machine-lg); }
.machine-page input {
  min-height: var(--machine-input);
  margin-top: var(--machine-xs);
  padding: var(--machine-sm) var(--machine-md);
  border: var(--machine-line) solid var(--muted);
  border-radius: var(--machine-sm);
  background: var(--card);
  font-family: var(--mono);
  color: var(--ink);
}
.machine-page input:not(:disabled):hover { border-color: var(--ink); box-shadow: none; }
.machine-page input[aria-invalid="true"] { border-color: var(--accent-text); box-shadow: inset 0 0 0 var(--machine-line) var(--accent-text); }
.machine-page :is(button, input):disabled,
.machine-page .btn:disabled:hover,
.machine-page .btn:disabled:active {
  background: var(--page);
  color: var(--ink);
  border-color: var(--machine-edge);
  opacity: 1;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.machine-page :is(a[href], button, input) { transition: opacity var(--machine-fast) var(--machine-ease), transform var(--machine-fast) var(--machine-ease); }
.machine-page :is(button, a[href]) { min-height: var(--machine-touch); }
.machine-page .btn { min-height: var(--machine-input); padding: var(--machine-sm) var(--machine-lg); will-change: auto; }
.machine-page .card .btn:not(:disabled) { background: var(--ink); color: var(--card); border-color: var(--ink); box-shadow: none; }
.machine-page .card .btn:not(:disabled):hover { background: var(--accent-text); border-color: var(--accent-text); transform: none; }
.machine-page .text-button:not(:disabled):hover { color: var(--accent-text); }
.machine-page :is(a[href], button):active { transform: none; }
.machine-page .btn:not(:disabled):active { transform: scale(0.99); }
.machine-page :is(a[href], button, input):focus-visible { outline: var(--machine-ring) solid var(--accent-text); outline-offset: var(--machine-unit); }
.machine-page .btn[aria-busy="true"],
.machine-page .btn[aria-busy="true"]:hover,
.machine-page .btn[aria-busy="true"]:active {
  cursor: progress;
  border-color: var(--accent-text);
  box-shadow: inset 0 0 0 var(--machine-line) var(--accent-text);
}
.machine-page #tokenUnstakeMax { flex: 0 0 auto; width: auto; min-width: var(--machine-input); margin-top: var(--machine-xs); }
.machine-page :is(#prestakeBtn, #tokenStakeBtn, #tokenUnstakeBtn) { width: 100%; }
.machine-page .field-error { padding-left: var(--machine-sm); border-left: var(--machine-ring) solid var(--accent-text); }

/* Boards and logs use ruled rows, aligned values and generous link targets. */
.machine-page #tokenTable { margin-top: var(--machine-lg); table-layout: fixed; }
.machine-page :is(th, td) { padding-block: var(--machine-md); border-bottom: var(--machine-line) solid var(--machine-edge); }
.machine-page th { font-family: var(--font); }
.machine-page td { font-family: var(--mono); }
.machine-page #tokenTable tbody tr:hover,
.machine-page #tokenTable tbody tr:focus-within { background: var(--page); color: var(--ink); }
.machine-page #tokenTable tbody tr:hover a,
.machine-page #tokenTable tbody tr:focus-within a { color: var(--ink); }
.machine-page #boardPagination { justify-content: space-between; }
.machine-page .text-button { font-size: var(--machine-body); }
.machine-page #historyStatus { margin: 0; }
.machine-page #historyList:not(:empty) { margin-top: var(--machine-lg); }
.machine-page .condensation-row { padding-block: var(--machine-md); border-top-color: var(--machine-edge); }
.machine-page .condensation-mark { box-shadow: none; margin-top: var(--machine-md); }
.machine-page .condensation-body { align-items: center; gap: var(--machine-xs) var(--machine-md); }
.machine-page .condensation-body > * { font-size: var(--machine-body); }
.machine-page :is(.condensation-wallet, .condensation-time, .condensation-tx) { color: var(--ink); }
.machine-page #historyList a { display: inline-flex; align-items: center; min-width: var(--machine-touch); min-height: var(--machine-touch); max-width: 100%; }
.machine-page .condensation-amount { flex-basis: 100%; }
.machine-page #calcHistoryList { margin-top: var(--machine-lg); padding-left: var(--machine-lg); font-size: var(--machine-body); }
.machine-page #calcHistoryList li { padding-block: var(--machine-md); border-top: var(--machine-line) solid var(--machine-edge); }
.machine-page .ledger-head { gap: var(--machine-sm); font-family: var(--mono); }
.machine-page .chart { margin-block: var(--machine-lg); }
.machine-page .fields { gap: var(--machine-lg); }
.machine-page .chain-strip .wrap { border-top: var(--machine-line) solid var(--machine-edge); padding-top: var(--machine-xl); }
.machine-page .chain-strip .result-rows { max-width: none; }
.machine-page .chain-strip .result-rows dt { color: var(--ink); }
.machine-page .chain-strip .result-rows > div { flex-direction: column; align-items: flex-start; gap: var(--machine-xs); }
.machine-page .chain-strip .result-rows dd { text-align: left; }

/* The existing observer owns entrances; CSS caps timing and removes stagger. */
.motion-ready .machine-page .reveal { transition: opacity var(--machine-enter) var(--machine-ease), transform var(--machine-enter) var(--machine-ease); transition-delay: 0s; }
.motion-ready .machine-page .reveal.waiting { transform: translateY(var(--machine-xs)); }

@media (min-width: 768px) {
  .machine-page { --machine-gutter: 24px; --machine-pad: 32px; }
  .machine-page .chain-strip .result-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--machine-lg); }
}
@media (min-width: 1024px) {
  .machine-page .band:not(#calculator) > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--machine-gap); align-items: start; }
  .machine-page .band .sec-head { margin-bottom: 0; }
  .machine-page #calculator .sec-head { margin-bottom: var(--machine-xl); }
}
@media (max-width: 767px) {
  .machine-page .result-rows > div { flex-wrap: wrap; gap: var(--machine-xs) var(--machine-md); }
  .machine-page .result-rows dd { margin-left: auto; }
  .machine-page .chain-strip .result-rows dd { margin-left: 0; }
  .machine-page .ledger-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .machine-page .fields { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .machine-page .machine-haze::before,
  .machine-page .machine-haze::after { animation: none; transform: none; will-change: auto; }
  .machine-page *, .machine-page *::before, .machine-page *::after { transition: none !important; animation: none !important; }
  .motion-ready .machine-page .reveal.waiting { opacity: 1; transform: none; }
  .machine-page .btn:not(:disabled):active { transform: none; }
}