/* =========================================================
   PLAYGROUND
   ========================================================= */
.pg-section { background: var(--panel); }
.pg-intro { text-align: center; margin: 0 auto 2.5rem; }
.pg-intro .label { color: var(--kept); background: var(--kept-bg); padding: .25rem .65rem; border-radius: 20px; }
.pg-intro h2 { margin: .85rem auto 0; font-size: clamp(1.8rem, 3.8vw, 2.5rem); }
.pg-intro p { margin: 1rem auto 0; color: var(--slate); font-size: 1.05rem; }

.flow { display: flex; flex-direction: column; gap: 1.35rem; }
.card { border: 1px solid var(--rule); background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-head {
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1.35rem;
  border-bottom: 1px solid var(--rule); background: var(--panel-2);
}
.card-head .n {
  font-family: var(--f-mono); font-size: 12px; font-weight: 800;
  color: var(--paper); background: var(--ink);
  width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 4px;
}
.card-head h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.card-head .hd { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--slate); }
.card-body { padding: 1.35rem; }
.card-body > .lead { font-family: var(--f-body); font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 1.25rem; line-height: 1.55; }
.card-body > .fg:last-child { margin-bottom: 0; }

.fg { margin-bottom: 1.25rem; }
.fg > .label { display: block; margin-bottom: .45rem; }
textarea, input[type=text] {
  width: 100%; background: var(--paper); border: 1px solid var(--rule-strong);
  padding: .6rem .75rem; border-radius: var(--radius); resize: vertical;
  font-size: 13.5px; line-height: 1.5; font-family: var(--f-ui);
}
.step-row { display: flex; gap: .5rem; margin-bottom: .5rem; align-items: flex-start; }
.step-row .n { font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--slate-2); padding-top: .65rem; width: 1.3rem; flex: none; }
.step-row textarea { min-height: 38px; }
.x {
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--slate);
  width: 28px; height: 28px; cursor: pointer; margin-top: .4rem; flex: none;
  border-radius: var(--radius); font-size: 16px; font-weight: 700;
}
.x:hover { color: var(--dropped); border-color: var(--dropped); }

.btn {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: .65rem 1.25rem; font-weight: 700; font-size: 14px; cursor: pointer;
  width: 100%; border-radius: var(--radius); transition: all .15s ease;
}
.btn:hover:not(:disabled) { background: var(--kept); border-color: var(--kept); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn.ghost:hover:not(:disabled) { border-color: var(--ink); background: var(--panel); }

.toggle { display: flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.toggle button { flex: 1; padding: .55rem; background: transparent; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--slate); transition: all .15s ease; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.toggle button:disabled { opacity: .4; cursor: not-allowed; }
.range-row { display: flex; align-items: center; gap: .85rem; }
input[type=range] { flex: 1; accent-color: var(--kept); }
.hint { font-size: 12px; color: var(--slate); margin-top: .4rem; line-height: 1.5; }

.sub {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .65rem 1.35rem; background: var(--panel-2);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.roster { border-top: 1px solid var(--rule); }
.rw { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .65rem 1.35rem; border-bottom: 1px solid var(--rule); align-items: center; }
.rw .id { font-weight: 700; font-size: 13px; }
.rw .m2 { font-family: var(--f-mono); font-size: 11px; color: var(--slate); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kept); }
.dot.off { background: var(--dropped); }

.asg { border-top: 1px solid var(--rule); }
.asg-row { display: grid; grid-template-columns: 6rem 1fr; gap: .85rem; padding: .65rem 1.35rem; border-bottom: 1px solid var(--rule); align-items: baseline; font-size: 13px; }
.asg-row:last-child { border-bottom: 0; }
.asg-w { font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--kept); }
.asg-t { color: var(--ink-soft); }
.asg-row.cont .asg-w { color: var(--slate); }
.asg-row.cont .asg-t { color: var(--slate-2); }
.asg-none { padding: .85rem 1.35rem; font-size: 13px; color: var(--slate-2); }

.pairs { margin: 0; border-top: 1px solid var(--rule); }
.pairs div { display: grid; grid-template-columns: 9rem 1fr; gap: .85rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); font-size: 13px; align-items: baseline; }
.pairs .k { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.pairs span:last-child { color: var(--ink-soft); }

.keys { display: flex; flex-direction: column; gap: .55rem; }
.keyrow { display: grid; grid-template-columns: 1fr; gap: .3rem; }
.keyrow .who { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.keyrow .who b { font-size: 12.5px; font-weight: 700; }
.keyrow .who span { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate); }
.kwrap { display: flex; gap: .4rem; }
input[type=password] { width: 100%; background: var(--paper); border: 1px solid var(--rule-strong); padding: .5rem .65rem; font-family: var(--f-mono); font-size: 12.5px; border-radius: var(--radius); }
input[type=password].filled { border-color: var(--kept); }
.eye { border: 1px solid var(--rule-strong); background: var(--paper); color: var(--slate); font-size: 10.5px; font-weight: 700; padding: 0 .6rem; cursor: pointer; flex: none; border-radius: var(--radius); }
.keyfoot { display: flex; gap: .5rem; margin-top: .65rem; }
.keyfoot .btn { flex: 1; }
.checkline { display: flex; align-items: flex-start; gap: .55rem; margin-top: .65rem; font-size: 12.5px; color: var(--slate); line-height: 1.45; }
.checkline input { margin-top: .2rem; accent-color: var(--kept); }
.vres { margin-top: .65rem; display: flex; flex-direction: column; gap: .35rem; }
.vrow { display: flex; align-items: baseline; gap: .5rem; font-size: 12.5px; border-left: 3px solid var(--rule-strong); padding-left: .65rem; }
.vrow.ok { border-left-color: var(--kept); }
.vrow.bad { border-left-color: var(--dropped); }
.vrow b { font-size: 12px; }
.vrow span { font-family: var(--f-mono); font-size: 11px; color: var(--slate); word-break: break-word; }

/* ---------------- Pipeline Live Monitor ---------------- */
.lv-cap { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.35rem; border-bottom: 1px solid var(--rule); font-family: var(--f-ui); font-size: 13.5px; background: var(--panel-2); }
.lv-cap .what { font-weight: 700; color: var(--ink); }
.lv-cap .detail { color: var(--slate); font-family: var(--f-mono); font-size: 12px; margin-left: auto; text-align: right; }

.wrail { display: flex; align-items: center; padding: .75rem 1.35rem; gap: .4rem; border-bottom: 1px solid var(--rule); overflow-x: auto; background: var(--paper); }
.wd { display: flex; align-items: center; gap: .45rem; flex: none; border: 1px solid var(--rule); padding: .3rem .6rem; font-family: var(--f-mono); font-size: 11.5px; color: var(--slate-2); border-radius: 4px; white-space: nowrap; }
.wd .bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
.wd.active { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.wd.active .bullet { background: var(--amber); }
.wd.done { color: var(--kept); border-color: var(--kept); background: var(--kept-bg); }
.wd.done .bullet { background: var(--kept); }
.wd.failed { color: var(--dropped); border-color: var(--dropped); background: var(--dropped-bg); }
.wd.failed .bullet { background: var(--dropped); }
.wd-link { flex: 1 0 12px; height: 1px; background: var(--rule); min-width: 8px; }

.seq-list { list-style: none; margin: 0; padding: .5rem 0 .75rem; }
.sq { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: .25rem .65rem; align-items: baseline; padding: .6rem 1.35rem .6rem 1.15rem; border-left: 3px solid transparent; }
.sq-n { font-family: var(--f-mono); font-size: 11px; font-weight: 800; color: var(--slate-2); grid-row: span 2; }
.sq-t { font-family: var(--f-ui); font-size: 13.5px; font-weight: 700; color: var(--slate); }
.sq-st { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); }
.sq-d { grid-column: 2 / -1; font-family: var(--f-ui); font-size: 12px; line-height: 1.5; color: var(--slate-2); }
.sq-live { grid-column: 2 / -1; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: var(--kept); display: none; }
.sq.has-live .sq-live { display: block; }
.sq.is-now { border-left-color: var(--amber); background: var(--amber-bg); }
.sq.is-now .sq-t { color: var(--ink); }
.sq.is-now .sq-d { color: var(--ink-soft); }
.sq.is-now .sq-st, .sq.is-now .sq-n { color: var(--amber); }
.sq.is-done { border-left-color: var(--kept); }
.sq.is-done .sq-t { color: var(--ink-soft); }
.sq.is-done .sq-st, .sq.is-done .sq-n { color: var(--kept); }
.sq.is-done.has-live .sq-d { display: none; }
.sq.is-flag { border-left-color: var(--dropped); background: var(--dropped-bg); }
.sq.is-flag .sq-t, .sq.is-flag .sq-st, .sq.is-flag .sq-n, .sq.is-flag .sq-live { color: var(--dropped); }

.run-body { padding: 1.35rem; display: flex; flex-direction: column; gap: 1rem; }
.empty { color: var(--slate); text-align: center; padding: 4.5rem 2rem; font-family: var(--f-ui); }
.empty h4 { font-size: 17px; margin: 0 0 .6rem; color: var(--ink); font-weight: 700; }
.empty p { margin: 0 auto; font-size: 13.5px; }

.wc { border: 1px solid var(--rule); background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.wc.running { border-color: var(--amber); }
.wc.failed { border-color: var(--dropped); }
/* The whole header is the control that opens and closes the turn. */
.wc-head {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--rule);
  background: var(--panel-2); font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.wc-head:hover { background: var(--panel); }
.wc-head:focus-visible { outline: 2px solid var(--kept); outline-offset: -2px; }
.wc.closed .wc-head { border-bottom: 0; }
.wc-who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

/* What the turn produced, shown on the header so a closed card still says
   something. Only ever visible when the card is closed. */
.wc-done { display: none; gap: .4rem; align-items: center; flex-wrap: wrap; }
.wc.closed .wc-done { display: flex; }
.wc.closed .wc-live { display: none; }
.wc-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--slate); white-space: nowrap;
}
.wc-tag.kept { color: var(--kept); }
.wc-tag.flag { color: var(--dropped); }

/* The caret itself is in base.css. A worker card starts open, so it points
   up until the turn is folded away. */
.wc .chev { transform: rotate(-135deg); }
.wc.closed .chev { transform: rotate(45deg); }

.wc.done { border-color: var(--kept); }
.wc.done .wc-seq { background: var(--kept); }

/* Open all / close all, beside the section heading. */
.tinybtn {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate); cursor: pointer;
  background: transparent; border: 1px solid var(--rule-strong);
  border-radius: 3px; padding: .2rem .5rem; margin-left: auto;
}
.tinybtn:hover { color: var(--ink); border-color: var(--ink); }
.tinybtn + .hd { margin-left: .6rem; }
.wc-seq { font-family: var(--f-mono); font-size: 12px; font-weight: 800; color: var(--paper); background: var(--ink); width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 4px; }
.wc.running .wc-seq { background: var(--amber); }
.wc.failed .wc-seq { background: var(--dropped); }
.wc-id { font-weight: 700; font-size: 14px; }
/* Which company answered this turn. The engine never reads it; it is here
   because "five workers" is a much weaker claim than "five vendors". */
.wc-vendor { font-family: var(--f-mono); font-size: 11px; font-weight: 400; color: var(--slate); }
.wc-model { font-family: var(--f-mono); font-size: 11px; color: var(--slate); }
.wc-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.wc-live { display: flex; align-items: center; gap: .6rem; }
.pill { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: .2rem .5rem; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; }
.pill.ok { color: var(--kept); border-color: var(--kept); background: var(--kept-bg); }
.pill.warn { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.pill.bad { color: var(--dropped); border-color: var(--dropped); background: var(--dropped-bg); }
.wc-body { padding: 1rem; display: flex; flex-direction: column; gap: .85rem; }
/* A class setting `display` beats the browser's own `[hidden]` rule, so say
   it here or the attribute does nothing. */
.wc-body[hidden] { display: none; }
.wc-task { font-size: 13.5px; color: var(--ink-soft); font-family: var(--f-ui); }

.meter-bar { height: 7px; background: var(--panel-2); border: 1px solid var(--rule); border-radius: 4px; position: relative; overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--kept); }
.meter-cap { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; color: var(--slate); margin-top: .35rem; }

.pkgbox { border: 1px solid var(--rule); background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.pkgbox > .label { display: block; padding: .6rem .85rem .45rem; background: var(--panel); border-bottom: 1px solid var(--rule); }
.pkg-text { font-family: var(--f-mono); font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; padding: .85rem; max-height: 320px; overflow: auto; color: var(--ink-soft); }
.pkg-text .h { color: var(--kept); font-weight: 700; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.box { border: 1px solid var(--rule); border-radius: var(--radius); padding: .75rem .85rem; background: var(--paper); }
.box > .label { margin-bottom: .45rem; display: block; font-size: 10px; font-weight: 800; }
.box ul { margin: 0; padding-left: 1.15rem; }
.box li { font-size: 12.5px; margin-bottom: .35rem; color: var(--ink-soft); font-family: var(--f-ui); line-height: 1.45; }
.box.flagged { border-color: var(--dropped); background: var(--dropped-bg); }
.box.flagged > .label { color: var(--dropped); }
.box.good { border-color: var(--kept); background: var(--kept-bg); }
.box.good > .label { color: var(--kept); }
.none { color: var(--slate-2); font-size: 12.5px; font-family: var(--f-ui); }
.why { color: var(--slate); display: block; font-size: 11.5px; margin-top: .15rem; }

.boundary { display: flex; align-items: center; gap: .85rem; padding: .65rem 1rem; flex-wrap: wrap; border: 1px dashed var(--kept); background: var(--kept-bg); border-radius: var(--radius); font-family: var(--f-mono); font-size: 11px; color: var(--kept); }

.st-group { border-bottom: 1px solid var(--rule); }
.st-head { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1.35rem; border-bottom: 1px solid var(--rule); background: var(--panel); }
.st-count { font-family: var(--f-mono); font-size: 11.5px; color: var(--slate); }
.st-count.grew { color: var(--kept); font-weight: 800; }
.st-body { padding: .75rem 1.35rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; }
.st-item { font-size: 12.5px; border-left: 3px solid var(--rule-strong); padding-left: .65rem; font-family: var(--f-ui); line-height: 1.45; }
.st-item .who { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-2); display: block; margin-top: .15rem; }
.st-item.flag { border-left-color: var(--dropped); }
.st-item.okv { border-left-color: var(--kept); }

.summary-final { border: 1px solid var(--kept); background: var(--kept-bg); border-radius: var(--radius); padding: 1.15rem; font-family: var(--f-ui); }
.summary-final.bad { border-color: var(--dropped); background: var(--dropped-bg); }
.sf-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; padding: .25rem 0; }
.sf-row b { font-family: var(--f-mono); }

.spinner { width: 13px; height: 13px; border: 2px solid var(--rule-strong); border-top-color: var(--amber); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.err { border: 1px solid var(--dropped); background: var(--dropped-bg); color: var(--dropped); padding: .75rem 1rem; font-size: 13px; font-family: var(--f-ui); border-radius: var(--radius); }

.debrief { border: 1px solid var(--rule-strong); background: var(--panel); border-radius: var(--radius); padding: 1.15rem; font-family: var(--f-ui); }
.debrief > .label { display: block; margin-bottom: .6rem; }
.debrief ol { margin: 0; padding-left: 1.25rem; }
.debrief li { font-size: 13px; color: var(--ink-soft); margin-bottom: .55rem; line-height: 1.55; }
.debrief li:last-child { margin-bottom: 0; }

/* ---------------- Footer ---------------- */
footer { border-top: 1px solid var(--rule); padding: 3rem 0 5rem; text-align: center; }
footer p { color: var(--slate); font-size: .95rem; margin: 0 auto; }

/* ---------------- Responsive Tweaks ---------------- */
@media (max-width: 560px) {
  .nav .brand { font-size: 13px; }
  #themeBtn { display: none; }
  .card-body, .run-body { padding: .95rem; }
  .card-head, .sub, .lv-cap, .wrail, .rw, .asg-row, .st-head, .st-body { padding-left: .95rem; padding-right: .95rem; }
  .sq { padding-left: .75rem; padding-right: .95rem; }
  .lv-cap { flex-wrap: wrap; }
  .lv-cap .detail { margin-left: 0; flex-basis: 100%; text-align: left; }
  .wc-head { flex-wrap: wrap; }
  .wc-right { margin-left: 0; flex-basis: 100%; }
  .sf-row { flex-wrap: wrap; gap: .1rem 1rem; }
  .empty { padding: 2.5rem 1rem; }
}
/* =========================================================
   PLAYGROUND SETUP
   ---------------------------------------------------------
   Four things to settle before a run: a key, the job, who
   does it, and go. On a narrow screen they stack in that
   order. Given room, the first two sit side by side and the
   run output takes the full width, because a worker card is
   mostly text and text wants the space.
   ========================================================= */

#playground .flow { display: flex; flex-direction: column; gap: 1.35rem; }

@media (min-width: 1080px) {
  #playground .flow {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.35rem; align-items: start;
  }
  #playground .c-keys { grid-column: span 5; }
  #playground .c-job  { grid-column: span 7; }
  #playground .c-team,
  #playground .c-run  { grid-column: 1 / -1; }
}

/* The run output, once there is one. The turn-by-turn column is the reading
   surface; the stage list and the record are references you glance at, so
   they go beside it and stay put while it scrolls. */
#playground .live-grid { display: flex; flex-direction: column; gap: 1.35rem; }

@media (min-width: 1240px) {
  #playground .live-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px;
    gap: 1.35rem; align-items: start;
  }
  #playground .c-turns { grid-row: span 2; }
  #playground .c-now, #playground .c-record { position: sticky; top: 1rem; }
  #playground .c-record { max-height: 78vh; overflow-y: auto; }
}

/* -- selects ------------------------------------------------ */
#playground select {
  width: 100%; background: var(--paper); border: 1px solid var(--rule-strong);
  padding: .5rem .6rem; border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 12px; color: var(--ink);
  cursor: pointer; max-width: 100%;
}
#playground select:disabled { opacity: .5; cursor: not-allowed; }

/* -- the keys you brought ----------------------------------- */
/* One block per credential. Each one is checked on its own, against its own
   vendor, and reports its own model list, because the entire point is that
   they need not be the same vendor. */
#playground .kcard {
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: .8rem; margin-bottom: .7rem; background: var(--paper);
}
#playground .kcard.ok { border-color: var(--kept); }
#playground .kcard.bad { border-color: var(--dropped); }
#playground .khead {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
#playground .khead .kname { font-size: 12.5px; font-weight: 700; }
#playground .khead .kdrop { margin-left: auto; }
#playground .vendor {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; padding: .16rem .45rem; border-radius: 3px;
  border: 1px solid var(--rule-strong); color: var(--slate);
}
#playground .vendor.on { color: var(--kept); border-color: var(--kept); background: var(--kept-bg); }
#playground .kbase { margin-top: .5rem; }
#playground .kmsg {
  margin-top: .5rem; font-size: 12px; line-height: 1.45;
  padding-left: .6rem; border-left: 3px solid var(--rule-strong); color: var(--slate);
}
#playground .kmsg.ok { border-left-color: var(--kept); color: var(--ink-soft); }
#playground .kmsg.bad { border-left-color: var(--dropped); color: var(--dropped); }
#playground .kmsg b { color: var(--ink); }

/* The offer to lend a key, which is the first thing most visitors want. */
#playground .lend {
  border: 1px dashed var(--kept); background: var(--kept-bg);
  border-radius: var(--radius); padding: .85rem 1rem;
  font-size: 13px; line-height: 1.55; color: var(--ink-soft);
}
#playground .lend b { color: var(--ink); }
#playground .lend .sig {
  display: block; margin-top: .4rem; font-family: var(--f-mono);
  font-size: 11px; color: var(--slate);
}

/* -- the team ----------------------------------------------- */
/* Worker, step, credential, model, ceiling. One row each, and every cell but
   the first two is something you can change. */
#playground .team { border-top: 1px solid var(--rule); }
#playground .trow {
  display: grid; gap: .45rem .7rem; align-items: center;
  grid-template-columns: 1fr;
  padding: .7rem 1.35rem; border-bottom: 1px solid var(--rule);
}
#playground .trow:last-child { border-bottom: 0; }
#playground .trow .tw { display: flex; align-items: baseline; gap: .5rem; }
#playground .trow .tid { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--kept); }
#playground .trow .trole {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate-2);
}
#playground .trow .ttask { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
#playground .trow .tcap { font-family: var(--f-mono); font-size: 11px; color: var(--slate); white-space: nowrap; }

@media (min-width: 900px) {
  #playground .trow { grid-template-columns: 9rem minmax(0, 1fr) 13rem 15rem 5.5rem; }
  #playground .trow .ttask {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

#playground .team-empty { padding: 1.1rem 1.35rem; font-size: 13px; color: var(--slate-2); }

/* -- one-shot and sequential -------------------------------- */
#playground .modehint {
  font-size: 12.5px; color: var(--slate); line-height: 1.55;
  margin-top: .5rem; padding-left: .7rem; border-left: 2px solid var(--rule-strong);
}
#playground .planned {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: 12px; color: var(--slate); margin-bottom: .6rem;
}
#playground .planned .who {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--kept);
}
#playground .step-row .cap {
  width: 4.6rem; flex: none; margin-top: .35rem;
  font-family: var(--f-mono); font-size: 11.5px; text-align: right;
  padding: .45rem .3rem; border: 1px solid var(--rule-strong);
  border-radius: var(--radius); background: var(--paper); color: var(--slate);
}
#playground .btnrow { display: flex; gap: .5rem; margin-top: .5rem; }
#playground .btnrow .btn { flex: 1; }

/* -- after a worker: what is done, and what it handed on ----- */
/* The two questions people actually ask between turns. The checklist is
   canonical state, and the document is the next briefing verbatim. */
#playground .after {
  display: grid; gap: .8rem; margin: .8rem 0 0;
}
@media (min-width: 820px) {
  #playground .after { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
#playground .checklist ul { list-style: none; margin: 0; padding: 0; }
#playground .checklist li {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .4rem;
  font-size: 12px; line-height: 1.5; padding: .18rem 0; color: var(--ink-soft);
}
#playground .checklist li .tick { font-family: var(--f-mono); font-size: 11px; color: var(--kept); }
#playground .checklist li.todo { color: var(--slate-2); }
#playground .checklist li.todo .tick { color: var(--slate-2); }
#playground .handdoc .pkg-text { max-height: 260px; }
#playground .handoff-note {
  font-size: 11.5px; color: var(--slate); margin-top: .4rem; line-height: 1.5;
}

/* -- narrow screens ----------------------------------------- */
@media (max-width: 560px) {
  #playground .card-body { padding: .95rem; }
  #playground .card-head, #playground .sub, #playground .lv-cap,
  #playground .wrail, #playground .rw, #playground .trow,
  #playground .st-head, #playground .st-body { padding-left: .95rem; padding-right: .95rem; }
  #playground .btnrow { flex-direction: column; }
  /* The step row is a flex line. Letting the share field claim a full width
     inside it squeezes the textarea to its minimum and the row grows to
     absurd heights, so wrap the line instead of widening the field. */
  #playground .step-row { flex-wrap: wrap; }
  #playground .step-row textarea { flex: 1 1 8rem; min-width: 0; }
  #playground .step-row .cap { width: 4.6rem; }
}


/* ---------------- What it built ----------------
   Full width under the three live cards, and hidden until a run has actually
   finished: a half-written record is not something to invite anyone to check. */
.c-built { margin-top: 1.35rem; }
.bt-lead {
  color: var(--ink-soft); font-size: .95rem; line-height: 1.65;
  margin: .2rem 0 1.1rem;
}

.bt-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.bt-tab {
  padding: .48rem .85rem; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--slate); cursor: pointer;
  font-family: var(--f-ui); font-size: .87rem; font-weight: 600;
}
.bt-tab:hover { color: var(--ink); border-color: var(--rule-strong); }
.bt-tab.on { color: var(--kept); border-color: var(--kept); background: var(--kept-bg); }
.bt-tab:focus-visible { outline: 2px solid var(--kept); outline-offset: 2px; }

.bt-group { margin-bottom: 1.6rem; }
.bt-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.bt-count {
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--slate);
  background: var(--panel); border-radius: 3px; padding: .1rem .4rem;
}
.bt-note { color: var(--slate); font-size: .86rem; line-height: 1.6; margin: 0 0 .6rem; }
.bt-note .bad { color: var(--dropped); font-weight: 700; }
.bt-body { display: flex; flex-direction: column; gap: .4rem; }

.bt-item {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card-bg); font-size: .92rem;
}
.bt-item.okv { border-left: 3px solid var(--kept); }
.bt-what { color: var(--ink); }
.bt-item .ver { font-size: 10px; color: var(--slate); }
.bt-item .why { color: var(--ink-soft); font-size: .85rem; }
.bt-item .who { color: var(--slate); font-size: 11.5px; font-family: var(--f-mono); }
.bt-body .none { color: var(--slate); font-size: .86rem; }
.bt-item.flag { border-left: 3px solid var(--dropped); }
.bt-note.bad-head { margin: .8rem 0 .4rem; }

/* One worker's turn, opened to inspect. Details rather than a hand-rolled
   toggle: find-in-page reaches inside a closed one in most browsers. */
.bt-fold {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card-bg); margin-bottom: .55rem;
}
.bt-fold > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
  padding: .75rem .9rem; cursor: pointer; list-style: none;
}
.bt-fold > summary::-webkit-details-marker { display: none; }
.bt-fold[open] > summary { border-bottom: 1px solid var(--rule); }
.bt-ft { font-family: var(--f-ui); font-weight: 700; color: var(--ink); }
.bt-fs { font-family: var(--f-mono); font-size: 11px; color: var(--slate); }
.bt-fb { padding: .9rem; }

.bt-pre { margin-bottom: .9rem; }
.bt-pre pre, .bt-raw {
  margin: .35rem 0 0; padding: .8rem .9rem;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.65; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
  max-height: 26rem; overflow: auto;
}
.bt-raw { max-height: 34rem; }

.bt-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .3rem;
}
.bt-meta { color: var(--slate); font-family: var(--f-mono); font-size: 11px; }