/* ============ THE PLAYGROUND ============
   Interactive demos on the work side of the site. Tokens only, no new colours.
   Everything here is keyboard reachable and survives prefers-reduced-motion. */

.play-priv{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-45);margin-top:1.4rem;
}

/* `hidden` must win over any author display rule (.btn sets display:inline-flex,
   which otherwise re-shows the round-two button and the result panel). */
.play [hidden],.play[hidden]{display:none!important}

/* the shared shell every demo sits in */
.play{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-float);
  padding:clamp(1.2rem,3vw,2rem);
  margin:2.4rem 0 1.6rem;
}
.play-two{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
}
@media (max-width:860px){ .play-two{grid-template-columns:1fr;} }

.play label{display:block;margin-bottom:1.05rem;font-size:.9rem;color:var(--ink-70);}
.play label.chk,.play label.chk-row{
  display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem;cursor:pointer;
}
.play input[type=range]{
  display:block;width:100%;margin-top:.35rem;cursor:grab;height:24px;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.play input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;background:var(--line-strong);
}
.play input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;background:var(--line-strong);
}
.play input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-6px;
  width:15px;height:15px;border-radius:50%;background:var(--cobalt);
  border:2px solid var(--white);box-shadow:0 2px 6px rgba(20,26,43,.35);
}
.play input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border:2px solid var(--white);border-radius:50%;
  background:var(--cobalt);box-shadow:0 2px 6px rgba(20,26,43,.35);
}
.play input[type=range]:active{cursor:grabbing;}
.q-disc-val{
  font-family:var(--mono);font-size:.78rem;color:var(--cobalt);
  font-variant-numeric:tabular-nums;
}
.play input[type=text],.play select,.play textarea{
  display:block;width:100%;margin-top:.45rem;
  font-family:var(--body);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;
  padding:.6rem .75rem;
}
.play textarea{font-family:var(--mono);font-size:.82rem;line-height:1.65;resize:vertical;}
.play input[type=checkbox]{accent-color:var(--cobalt);width:1.15rem;height:1.15rem;flex:none;}

/* Touch: every control gets a 44px-tall hit area. */
@media (pointer:coarse){
  .play label.chk,.play label.chk-row{min-height:44px;align-items:center;margin-bottom:.15rem;}
  .play input[type=checkbox]{width:1.35rem;height:1.35rem;}
  .play input[type=range]{height:44px;}
  .play .btn{min-height:44px;}
  .m-samples .btn-sm{min-height:40px;}
}
.play :is(input,select,textarea,button):focus-visible{
  outline:2px solid var(--cobalt);outline-offset:2px;
}
.play fieldset{border:0;padding:0;margin:0 0 1.05rem;}
.play legend{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);padding:0;margin-bottom:.55rem;
}
.btn-sm{padding:.42rem .85rem;font-size:.78rem;}

/* ---------- 1. run the office ---------- */
.g-bar{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding-bottom:1rem;border-bottom:1px solid var(--line);
}
.g-meta{display:flex;align-items:baseline;gap:1.1rem;font-family:var(--mono);}
.g-clock{
  font-size:1.9rem;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.g-score{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);}
.g-btns{display:flex;flex-wrap:wrap;gap:.6rem;}
.g-status{
  margin:.9rem 0 0;font-size:.88rem;color:var(--ink-70);min-height:1.3em;
}
.g-board{
  position:relative;margin-top:1rem;height:min(58vh,420px);
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    repeating-linear-gradient(0deg,transparent 0 32px,var(--line) 32px 33px) padding-box;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
[data-mode=system] .g-board{background:linear-gradient(var(--paper-2),var(--paper));}
.g-lead{
  position:absolute;display:block;text-align:left;max-width:min(58%,17rem);
  background:var(--white);border:1px solid var(--line-strong);
  border-radius:10px;padding:.55rem .7rem .55rem 1.5rem;cursor:pointer;
  box-shadow:0 12px 28px -14px rgba(20,26,43,.5);
  animation:g-in .28s cubic-bezier(.2,.9,.3,1) both;
}
.g-lead::before{
  content:"";position:absolute;left:.7rem;top:.95rem;width:6px;height:6px;border-radius:50%;
  background:var(--ember);
}
.g-lead b{display:block;font-size:.86rem;font-weight:600;color:var(--ink);}
.g-lead i{display:block;font-style:normal;font-size:.73rem;color:var(--ink-45);margin-top:.12rem;}
.g-lead em{
  display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem;color:var(--cobalt);
}
.g-lead:hover{transform:translateY(-1px);border-color:var(--cobalt);}
.g-lead.done::before{background:var(--cobalt);}
.g-lead.done{opacity:.55;animation:g-out .9s ease forwards;pointer-events:none;}
.g-lead.missed::before{background:var(--ink-45);}
.g-lead.missed{opacity:.4;animation:g-out .9s ease forwards;pointer-events:none;}
.g-lead.missed em{color:var(--ink-45);}
.g-lead.blocked{border-color:var(--ember);cursor:not-allowed;}
.g-lead.blocked::before{background:var(--ember);}
.g-lead.blocked em{color:var(--ember);}
@keyframes g-in{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes g-out{to{opacity:0;transform:translateY(-10px);}}

.g-result{
  margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);
}
.g-res-row{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:baseline;
  padding:.55rem 0;font-size:.95rem;color:var(--ink-70);
}
.g-res-row b{color:var(--ink);font-variant-numeric:tabular-nums;}
.g-res-cmp{
  border-top:1px solid var(--line);margin-top:.35rem;padding-top:.9rem;
  font-family:var(--display);font-size:1.15rem;color:var(--ink);
}
.g-res-cmp b{color:var(--ember);}
.g-res-note{margin:.9rem 0 0;font-size:.88rem;color:var(--ink-70);}
.g-conf{
  position:absolute;top:-8px;width:6px;height:10px;border-radius:1px;
  animation:g-fall 2.4s cubic-bezier(.3,.1,.5,1) forwards;
}
@keyframes g-fall{to{transform:translateY(440px) rotate(540deg);opacity:0;}}

/* ---------- 2. quote engine ---------- */
.q-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1rem,2.4vw,1.5rem);position:sticky;top:6rem;
}
.q-price{display:flex;flex-direction:column;gap:.3rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);}
.q-out{
  font-family:var(--display);font-size:clamp(2.6rem,7vw,3.6rem);line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.q-floor{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--ink-45);}
.q-flag{
  display:none;margin-top:.9rem;padding:.7rem .85rem;border-radius:10px;
  background:rgba(200,119,44,.12);border:1px solid rgba(200,119,44,.4);
  font-size:.84rem;color:var(--ink);
}
.at-floor .q-flag{display:block;}
.at-floor .q-out{color:var(--ember);}
.q-lab,.m-lab,.s-lab,.h-lab{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);margin:1.1rem 0 .5rem;
}
.q-why{list-style:none;padding:0;margin:0;}
.q-why li{
  font-size:.85rem;color:var(--ink-70);padding:.32rem 0 .32rem .95rem;position:relative;
}
.q-why li::before{
  content:"";position:absolute;left:0;top:.85em;width:5px;height:1px;background:var(--line-strong);
}
.q-note,.s-note,.m-note{
  margin:1.1rem 0 0;font-size:.78rem;line-height:1.6;color:var(--ink-45);
}

/* ---------- 3. meeting to tasks ---------- */
.m-samples{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem;}
.m-out{list-style:none;padding:0;margin:0;}
.m-out li{
  display:grid;grid-template-columns:auto 1fr auto;gap:.5rem .9rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.88rem;
}
.m-who{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cobalt);white-space:nowrap;
}
.m-what{color:var(--ink);}
.m-when{
  font-family:var(--mono);font-size:.7rem;color:var(--ink-45);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.m-out li.unowned .m-who{color:var(--ember-ink);}
.m-out li.unowned{background:rgba(200,119,44,.06);}
.m-out li.m-foot{
  display:block;border-bottom:0;padding-top:.9rem;
  font-size:.8rem;color:var(--ink-45);line-height:1.6;
}
@media (max-width:520px){ .m-out li{grid-template-columns:1fr;} }

/* ---------- 4. applicant scorer ---------- */
.s-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1rem,2.4vw,1.5rem);position:sticky;top:6rem;
}
.s-num{display:flex;align-items:baseline;gap:.4rem;}
.s-score{
  font-family:var(--display);font-size:clamp(2.6rem,7vw,3.6rem);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);
  transition:color .3s ease;
}
[data-band=go] .s-score{color:var(--cobalt);}
[data-band=no] .s-score{color:var(--ember);}
.s-of{font-family:var(--mono);font-size:.8rem;color:var(--ink-45);}
.s-why{list-style:none;padding:0;margin:0;}
.s-why li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.36rem 0;border-bottom:1px solid var(--line);font-size:.84rem;color:var(--ink-70);
}
.s-why li b{font-family:var(--mono);font-size:.78rem;color:var(--ink);font-variant-numeric:tabular-nums;}
.s-verdict{
  margin:1.1rem 0 0;padding:.8rem .9rem;border-radius:10px;
  background:var(--white);border:1px solid var(--line-strong);
  font-size:.88rem;color:var(--ink);
}
[data-band=go] .s-verdict{border-color:rgba(42,69,216,.4);}
.s-q{margin-top:1.2rem;}

/* ---------- 5. hook writer ---------- */
.h-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1rem,2.4vw,1.5rem);
}
.h-out{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;}
.h-out li{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem .85rem;
}
.h-kind{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);
}
.h-out p{margin:.4rem 0 0;font-family:var(--display);font-size:1.02rem;line-height:1.45;color:var(--ink);}
.h-copy{
  margin-top:.6rem;background:none;border:1px solid var(--line-strong);border-radius:99px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-70);padding:.28rem .7rem;cursor:pointer;
}
.h-copy:hover{border-color:var(--cobalt);color:var(--cobalt);}

/* Content stress: a visitor can paste a 4,000-character unbroken string. Without
   this the hook panel grew to 39,000px wide. Anything that renders typed text
   must be able to break inside a word. */
.h-out p,.h-kind,.m-what,.m-who,.m-when,.q-why li,.s-why li,.s-verdict,.g-lead b,.g-lead i{
  overflow-wrap:anywhere;word-break:break-word;
}
.h-out,.m-out,.q-why,.s-why{min-width:0}
.m-out li{min-width:0}

/* ---------- the operations receipt ---------- */
.receipt{
  border:1px solid var(--line-strong);border-radius:16px;
  padding:clamp(1.1rem,2.6vw,1.6rem);margin-bottom:1rem;
  background:linear-gradient(180deg,rgba(251,248,242,.6),transparent);
}
.r-kicker{
  display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:.9rem;
}
.receipt ol{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem 1.6rem;
}
.receipt li{
  font-size:.84rem;line-height:1.55;color:var(--ink-70);
  padding-top:.6rem;border-top:1px solid var(--line);
}
.receipt li b{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.2rem;
}

.play-close{padding-top:1rem;}

/* dark band context: the demos keep their paper ground, labels lift */
.band .play{background:var(--white);}
.band .receipt{
  background:rgba(243,237,227,.05);border-color:rgba(243,237,227,.2);
}
.band .receipt li{border-top-color:rgba(243,237,227,.16);color:rgba(243,237,227,.72);}
.band .receipt li b,.band .r-kicker{color:var(--bone);}

@media (prefers-reduced-motion:reduce){
  .g-lead,.g-lead.done,.g-lead.missed{animation:none;}
  .g-conf{display:none;}
}