/* The kit walkthrough, on top of the landing's stylesheet and the shared task
   UI. Only what the landing shot never draws lives here: the all-projects
   rooms, and the opened task's timeline, gate panels and composer. Sizes are
   the shot's scale, not the app's pixels. */

body{padding:0}
.see{padding:clamp(40px,6vw,72px) 0}

/* Both views share one fixed-height stage, so switching between the board and
   the task never moves the page under the reader. */
.wt-dash{height:620px}
.wt-main{position:relative;overflow:hidden}
.wt-view{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:opacity .35s,transform .4s cubic-bezier(.3,.7,.3,1),visibility 0s .4s}
.wt-view.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .4s cubic-bezier(.3,.7,.3,1),visibility 0s}
.wt-push{margin-left:auto}
.sp-track.wt-track{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ── all projects ─────────────────────────────────────────────────────────── */
.wt-all{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:var(--muted);box-shadow:0 0 0 2px var(--line-2)}
.wt-rooms{padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.wt-room{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;position:relative}
.wt-room::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--room,var(--line-2));opacity:.75}
.wt-rh{display:flex;align-items:center;gap:11px;padding:11px 14px}
.wt-rh .pchip{width:28px;height:28px;font-size:12px}
.wt-rn{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.wt-rn b{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.wt-rn i{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--faint)}
.wt-rc{margin-left:auto;display:flex;align-items:baseline;gap:12px;font-size:11.5px;color:var(--faint);white-space:nowrap}
.wt-rc b{font-size:13px;font-weight:750;margin-right:4px;font-variant-numeric:tabular-nums}
.wt-rc .g b{color:var(--gate)} .wt-rc .g.zero b{color:var(--faint)}
.wt-rc .r b{color:var(--run)}
.wt-rb{display:flex;gap:6px}
.wt-room .pl-card{margin:0 10px 10px}
.wt-room .pl-card.cf .cf-tap{padding:13px 16px 12px;cursor:default}
.wt-room .pl-cta{cursor:default}
.wt-pc-checkout{background:rgba(120,160,200,.18);color:#93b4d6}
.wt-pc-docs{background:rgba(240,181,69,.16);color:var(--gate)}

/* ── buttons drawn as pictures of buttons ─────────────────────────────────── */
.wt-btn{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:6px 11px;
  border-radius:8px;white-space:nowrap;line-height:1.2;transition:transform .12s,filter .12s,opacity .2s}
.wt-btn.ghost{border:1px solid var(--line-2);background:var(--card);color:var(--text)}
.wt-btn.primary{background:var(--gate);color:var(--gate-ink)}
.wt-btn.primary.dim{opacity:.45}
.wt-btn.ghost.dim{color:var(--faint);border-color:var(--line)}
.wt-btn svg{flex:none}

/* ── the opened task ──────────────────────────────────────────────────────── */
.wt-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--gate-soft),transparent 60%);min-width:0}
.wt-back{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);transition:transform .12s,filter .12s}
.wt-crumb{flex:none;font-size:11px;color:var(--faint)}
.wt-title{min-width:0;flex:1;font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-chip{flex:none}
.wt-chip .chip{font-size:11.5px}
.wt-railrow{display:flex;align-items:center;gap:14px;padding:9px 16px;border-bottom:1px solid var(--line);min-width:0}
.wt-railrow .rail .bar{width:16px;margin:0 6px}
.wt-where{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wt-where.gate{color:var(--gate-strong)} .wt-where.run{color:var(--run)} .wt-where.bad{color:var(--bad)} .wt-where.done{color:var(--done-ink)}

/* The timeline keeps its newest entry at the bottom, the way the app's does;
   older entries slide up and out of the top. */
.wt-tl{flex:1;min-height:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34px);mask-image:linear-gradient(180deg,transparent 0,#000 34px)}
.wt-tl-in{position:absolute;left:0;right:0;bottom:0;padding:10px clamp(14px,5%,56px) 12px;display:flex;flex-direction:column;gap:8px}
.wt-e{display:grid;grid-template-rows:1fr}
.wt-e>div{min-height:0}
.wt-e.enter{animation:wt-in .45s cubic-bezier(.3,.7,.3,1) both}
@keyframes wt-in{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
.wt-ev{display:flex;align-items:baseline;gap:14px;font-size:12px;color:var(--muted)}
.wt-ev .k{flex:none;width:72px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.wt-ev .k.ok{color:var(--done-ink)} .wt-ev .k.you{color:var(--gate)} .wt-ev .k.bad{color:var(--bad)}
.wt-ev .v{min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wt-ev .mono{font-size:11px}
.wt-ev .wt-btn{padding:3px 8px;font-size:11px}
.wt-work{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--run);padding:2px 0 2px 86px}
.wt-work .d{width:7px;height:7px;border-radius:50%;background:var(--run);animation:denly-breathe 1.6s ease-in-out infinite}

.wt-msg{max-width:560px;border:1px solid var(--line-2);background:var(--card);border-radius:12px;padding:11px 14px;font-size:12px;line-height:1.55;color:var(--text)}
.wt-msg.you{margin-left:auto;border-color:var(--gate-line);background:var(--gate-soft)}
.wt-msg h4{font-size:13px;font-weight:700;margin:0 0 4px}
.wt-msg p{margin:4px 0 0;color:var(--muted)}
.wt-msg .who{display:block;font-family:var(--mono);font-size:10px;color:var(--faint);margin-bottom:3px}
.wt-diff{margin:8px 0 6px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);padding:8px 0;font-family:var(--mono);font-size:10.5px;line-height:1.6;overflow:hidden}
.wt-diff div{padding:0 12px;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.wt-diff .h{color:var(--faint)}
.wt-diff .del{background:var(--bad-soft);color:var(--bad)}
.wt-diff .add{background:var(--done-soft);color:var(--done-ink)}
.wt-checks{display:flex;flex-direction:column;gap:3px;margin-top:6px;font-family:var(--mono);font-size:10.5px}
.wt-checks span{display:flex;align-items:center;gap:7px;color:var(--muted)}
.wt-checks .ok svg{color:var(--done-ink)} .wt-checks .no{color:var(--bad)}
.wt-checks em{font-style:normal;color:var(--faint)}
.wt-checks.row{flex-direction:row;flex-wrap:wrap;gap:4px 14px}

/* The gate panels: amber when the decision is yours, red when the run stopped. */
.wt-panel{border:1px solid var(--gate-line);border-radius:12px;padding:12px 14px;
  background:linear-gradient(180deg,var(--gate-soft),transparent 120%),var(--card)}
.wt-panel.bad{border-color:var(--bad);background:linear-gradient(180deg,var(--bad-soft),transparent 120%),var(--card)}
.wt-panel b{display:block;font-size:13px;font-weight:700}
.wt-panel.bad b{color:var(--bad)}
.wt-panel .eb{display:block;margin-top:3px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gate)}
.wt-panel p{margin:5px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.wt-panel ul{margin:6px 0 0;padding-left:18px;font-size:12px;line-height:1.6}
.wt-panel .row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.wt-panel .t{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--faint);margin-left:8px}
.wt-or{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint)}

.wt-comp{margin:0 clamp(14px,5%,56px) 12px;border:1px dashed var(--line-2);border-radius:12px;padding:10px 12px;background:var(--panel);transition:border-color .25s}
.wt-comp.answer{border-style:solid;border-color:var(--gate-line)}
.wt-comp-t{font-size:12px;color:var(--text);min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-comp-t.empty::after{content:attr(data-ph);color:var(--faint)}
.wt-comp-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.wt-comp-mode{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;border:1px solid var(--line-2);color:var(--muted)}
.wt-comp.answer .wt-comp-mode{color:var(--gate);border-color:var(--gate-line)}

@media (max-width:760px){
  .wt-dash{height:640px}
  .wt-rooms{padding:11px 10px}
  .wt-room .pl-card{margin:0 8px 8px}
  .wt-rb,.wt-hide-sm{display:none}
  .wt-where{display:none}
  .wt-tl-in{padding:10px 12px 12px}
  .wt-comp{margin:0 12px 10px}
  .wt-work{padding-left:0}
}
@media (max-width:560px){
  .sp-track.wt-track{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wt-crumb,.wt-rc .r{display:none}
  .wt-ev .k{width:60px}
  .wt-head{padding:9px 12px}
  .wt-railrow{padding:8px 12px}
}

/* Keep grid items narrower than their mobile container. The diff remains
   complete: wrapping is preferable to clipping the expression being reviewed. */
.wt-e,.wt-e>div,.wt-msg,.wt-panel{min-width:0;max-width:100%}
.wt-diff div{white-space:pre-wrap;overflow-wrap:anywhere;text-overflow:clip}
.wt-checks span,.wt-panel p{overflow-wrap:anywhere;min-width:0}
.section-head h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.025em;margin:12px 0 16px}
.wt-home{display:inline-block;margin-bottom:20px;color:var(--text);text-underline-offset:4px}
.wt-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.wt-actions .btn{white-space:normal;text-align:center}
.wt-prerequisites{max-width:760px;color:var(--muted);line-height:1.6;margin:0 0 28px}
.wt-prerequisites a,.wt-explanation a:not(.btn){color:var(--text);text-decoration:underline;text-underline-offset:3px}
.wt-explanation{max-width:760px;margin:36px auto 0;line-height:1.7;color:var(--muted)}
.wt-explanation h2{color:var(--text);font-size:26px;line-height:1.25}
.wt-explanation ol{padding-left:24px}.wt-explanation li{margin:10px 0}
.wt-explanation code{overflow-wrap:anywhere;color:var(--text)}
@media(max-width:560px){.wt-actions{flex-direction:column}.wt-actions .btn{width:100%}}

footer.container{padding-bottom:28px}.foot-nav{display:flex;flex-wrap:wrap;gap:14px}.foot-nav a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}