/* The playground reuses Replay's shell, steps, stages, slip and cast panel (../replay/replay.css). Only what is new is here. */
.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  font-size: 14px;
  color: var(--ink-2);
}
.statusbar .item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.statusbar .dot {
  flex: none;
}
.statusbar.off {
  border-style: dashed;
}
.banner {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--glow-ink);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(217, 130, 74, 0.08);
  color: var(--ink);
  font-size: 14px;
}
.banner.bad {
  border-color: var(--deny-ink);
  background: rgba(166, 59, 47, 0.08);
}
.keys {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.keyrow {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  font-size: 14px;
}
.keyrow .l {
  color: var(--ink-3);
}
.keyrow .mono {
  overflow-wrap: anywhere;
}
details.secret {
  margin-top: 12px;
}
details.secret summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-3);
}
.secret .keys {
  margin-top: 8px;
}
.rtable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 14px;
}
.rtable th,
.rtable td {
  text-align: left;
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.rtable th {
  color: var(--ink-3);
  font: 400 12px / 1.2 var(--mono);
}
.rtable input {
  width: 100%;
  min-width: 72px;
  font: 400 14px / 1.2 var(--mono);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--stage, #0b0f10);
  color: var(--ink);
  caret-color: var(--lake);
  transition: border-color 160ms var(--ease);
}
.rtable input:hover:not([disabled]) {
  border-color: rgba(233, 236, 232, 0.24);
}
.rtable input:focus-visible {
  outline: 2px solid var(--lake);
  outline-offset: 1px;
  border-color: var(--lake);
}
.rtable input.name {
  font-family: var(--sans);
}
.rtable input[disabled] {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}
.rtable td.n {
  font-family: var(--mono);
  color: var(--ink-2);
  white-space: nowrap;
}
.rtable tr.you td:first-child {
  color: var(--lake);
}
.rtable tr.flag td {
  background: rgba(217, 130, 74, 0.1);
}
.rtable .lab {
  font: 400 12px / 1 var(--mono);
  color: var(--glow-ink);
}
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.paper-act {
  font: inherit;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--lake);
  background: transparent;
  color: var(--lake);
  cursor: pointer;
}
.paper-act:hover:not(:disabled) {
  background: rgba(31, 95, 91, 0.08);
}
.paper-act.primary {
  background: var(--dusk);
  border-color: var(--dusk);
  color: var(--d-1);
}
.paper-act.primary:hover:not(:disabled) {
  background: #1d2427;
}
.paper-act.warn {
  border-color: var(--glow-ink);
  color: var(--glow-ink);
}
.paper-act:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.problems {
  margin-top: 12px;
  color: var(--deny-ink);
  font-size: 14px;
}
.hint {
  color: var(--ink-3);
  font-size: 14px;
  margin-top: 8px;
}
.progress {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}
.progress .p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 14.5px;
  color: var(--d-3);
}
.progress .p.now {
  color: var(--d-1);
}
.progress .p.done {
  color: var(--d-2);
}
.progress .mark {
  font-family: var(--mono);
  color: var(--d-lake);
}
.stage .cast {
  background: var(--dusk-card);
  border-color: var(--d-line);
  margin-top: 16px;
}
.stage .cast h3 {
  color: var(--d-1);
}
.stage .cast .who {
  color: var(--d-1);
}
.stage .cast .does,
.stage .cast .acct {
  color: var(--d-2);
}
.stage .cast .cap {
  color: var(--d-3);
}
.stage .cast .role {
  color: var(--d-lake);
}
.stage .cast a.acct {
  color: var(--d-lake);
}
.refusal {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--deny);
  border-left-width: 3px;
  border-radius: 8px;
  color: var(--d-1);
  background: rgba(224, 103, 90, 0.08);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.moves {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}
.move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  font: 400 14px / 1.4 var(--mono);
  border-bottom: 1px solid var(--d-line);
  padding-bottom: 6px;
}
.move .who {
  color: var(--d-1);
  font-family: var(--sans);
}
.move.you {
  color: var(--d-lake);
}
@media (max-width: 920px) {
  .keyrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .rtable {
    display: block;
    overflow-x: auto;
  }
}
.rtable td:first-child {
  white-space: nowrap;
  padding-right: 12px;
}

/* Dark, like the landing page (2026-11-14): the status bar sits on the header's light band, frosted like the "Who uses it" tiles. */
.intro .statusbar {
  position: relative;
  background: rgba(15, 20, 22, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(233, 236, 232, 0.14);
}
/* The playground's header is shorter than Replay's, so its light band sits lower: behind the status bar, never behind the lede. */
.intro {
  padding-bottom: 40px;
}
.intro::before {
  background:
    linear-gradient(180deg, var(--paper) 0%, rgba(15, 20, 22, 0) 30%, rgba(15, 20, 22, 0) 88%, var(--paper) 100%),
    linear-gradient(
      180deg,
      transparent 66%,
      rgba(31, 95, 91, 0.6) 72%,
      rgba(12, 40, 38, 0.5) 76%,
      rgba(217, 130, 74, 0.42) 81%,
      rgba(160, 80, 44, 0.3) 84%,
      rgba(10, 28, 28, 0.65) 88%,
      rgba(124, 196, 184, 0.3) 92%,
      rgba(20, 72, 66, 0.6) 96%,
      transparent 100%
    );
}

/* Narrow screens: each pay run line is a small card (2026-11-14). The name spans the top, the three amounts sit in one row of
   inputs, and the three worked-out values below them; each takes its column name from data-label, so no column is cut off. */
@media (max-width: 600px) {
  .rtable,
  .rtable tbody {
    display: block;
    overflow: visible;
  }
  .rtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .rtable tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .rtable tr.flag {
    background: rgba(217, 130, 74, 0.1);
  }
  .rtable td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .rtable tr.flag td {
    background: none;
  }
  .rtable td:first-child {
    grid-column: 1 / -1;
  }
  .rtable td[data-label="Name"] {
    grid-column: 1 / -1;
  }
  .rtable td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font: 400 12px / 1.2 var(--mono);
    color: var(--ink-3);
  }
  .rtable input {
    min-width: 0;
  }
}

/* On the dark page the main action is the off-white button with dark text, so it reads first (2026-11-14). Lead-ins in the limits
   list are 500, not 700, as everywhere else. */
.paper-act.primary {
  background: var(--d-1);
  border-color: var(--d-1);
  color: #15181a;
}
.paper-act.primary:hover:not(:disabled) {
  background: #ffffff;
  border-color: #ffffff;
}
.limits strong,
main li > strong {
  font-weight: 500;
  color: var(--d-1);
}