/* Machine-first working area. Tokens only. Expo-out motion. */
body[data-page="machine"] { --mf-ease: cubic-bezier(.16, 1, .3, 1); }
body[data-page="machine"] .lab-page { overflow-x: clip; }
body[data-page="machine"] .lab-page > .harbour-head {
  text-align: left;
  justify-items: start;
  width: min(calc(100% - 48px), 1180px);
  max-width: none;
  margin-inline: auto;
  padding: 24px 0 8px;
}
body[data-page="machine"] .harbour-head h1 { margin: 8px 0; max-width: none; }
body[data-page="machine"] .harbour-head .lede { margin: 0; max-width: 62ch; }
body[data-page="machine"] #on-chain-now.oc-section { padding-block: 0 16px; }
.mf-work {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-24);
  align-items: start;
  min-width: 0;
  max-width: 100%;
  padding-block: var(--space-16) var(--space-32);
}
.mf-work > #stakers-board {
  grid-column: 1 / 8;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.mf-work > #tokenStakeCard {
  grid-column: 8 / 13;
  min-width: 0;
}
body[data-page="machine"] #stakers-board.oc-board {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  box-shadow: none;
}
.mf-actions {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-24);
  position: sticky;
  top: calc(var(--nav-h) + var(--oc-subnav-h, 0px));
  z-index: 8;
  align-self: start;
  box-shadow: none;
  transition: border-color 200ms cubic-bezier(.16, 1, .3, 1);
}
.mf-actions .section-head { padding: 0; display: block; margin-bottom: var(--space-12); }
.mf-actions .cycle-no { display: none; }
.mf-actions h2 { margin: 0; font: 500 20px/1.3 var(--font-display); letter-spacing: -.02em; }
.mf-actions .prestake,
.mf-actions .oc-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.mf-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-16);
}
.mf-tabs button {
  position: relative;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 8px;
  background: transparent;
  border: 0;
  font: 500 14px/1.4 var(--font-body);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 200ms cubic-bezier(.16, 1, .3, 1);
}
.mf-tabs button::after {
  content: '';
  position: absolute;
  inset: auto 8px -1px;
  height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transition: transform 200ms cubic-bezier(.16, 1, .3, 1);
}
.mf-tabs [aria-selected="true"] { color: var(--ink); }
.mf-tabs [aria-selected="true"]::after { transform: scaleX(1); }
.mf-actions .ui-field__input,
.mf-actions button.ui-press,
.mf-actions .prestake__amount { min-height: 44px; }
.mf-actions .oc-empty { padding-block: 16px; min-height: 0; }
.mf-actions .oc-position {
  margin-top: var(--space-24);
  padding: var(--space-16) 0 0;
  border-block: 0;
  border-top: 1px solid var(--hairline);
}
.mf-actions .oc-position .oc-figures { padding-top: 16px; }
#mfPanel1 #tokenUnstakeBtn,
#mfPanel1 #tokenUnstakeMax,
#mfPanel1 #tokenFeeDisclosure { display: none; }
#mfPanel2 #tokenStakeBtn { display: none; }
.unstake-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
}
.unstake-progress li {
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--hairline);
  font: 500 12px/1.4 var(--font-body);
  color: var(--ink-soft);
  transition: color 200ms cubic-bezier(.16, 1, .3, 1), border-color 200ms cubic-bezier(.16, 1, .3, 1);
}
.unstake-progress li.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent-deep);
}
.unstake-progress li.is-done {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.mf-figures { padding-block: var(--space-32); min-width: 0; max-width: 100%; }
.mf-tide { padding-block: var(--space-64); min-width: 0; max-width: 100%; }
.mf-tide > h2 {
  margin: 0 0 var(--space-16);
  font: 500 clamp(24px, 3vw, 36px)/1.2 var(--font-display);
  letter-spacing: -.035em;
}
#tokenStakeCard,
#stakers-board,
#receipts,
#chain-readings,
#try-the-tide,
#machine-work {
  scroll-margin-top: calc(var(--nav-h) + var(--oc-subnav-h, 0px) + 24px);
}
.mf-pill-primary {
  background: var(--accent);
  color: var(--ink);
  border-color: transparent;
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1), color 200ms cubic-bezier(.16, 1, .3, 1);
}
.mf-pill-primary:hover { background: var(--accent-deep); color: var(--card); }
body[data-page="story"] .oc-heading .mf-pill-primary { margin-left: auto; }
@media (max-width: 1023px) {
  .mf-work { grid-template-columns: minmax(0, 1fr); }
  .mf-work > #tokenStakeCard {
    grid-column: 1 / -1;
    grid-row: 1;
    position: static;
  }
  .mf-work > #stakers-board { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 767px) {
  body[data-page="machine"] .lab-page > .harbour-head { width: calc(100% - 32px); padding-top: 16px; }
  .mf-actions { padding: var(--space-16); }
  .mf-tabs button { font-size: 12px; padding-inline: 4px; }
  .mf-tide { padding-block: var(--space-40); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-work, .mf-actions, .mf-tabs button, .mf-tabs button::after, .mf-pill-primary {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* lead 2026-09-20: sub-nav was position:relative with top:72px, so it slid down over the page title; headings inside the white action panel carried the ground colour as a box */
#machine-subnav.oc-subnav { position: sticky; top: 72px; z-index: 5; }
.mf-actions .section-head { background: transparent; }
@media (max-width: 767px) {
  #machine-subnav.oc-subnav { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #machine-subnav.oc-subnav::-webkit-scrollbar { display: none; }
  #machine-subnav.oc-subnav a { flex: none; white-space: nowrap; }
}