/* Dryways Code Block 1 of 5 — cut
   Every selector is rooted at .dw-cb-cut. Nothing here reaches outside that
   element. Extracted from DA-03 prototype v1.3.0; the only change from source
   is the root prefix. Colour, type, rail and breakpoints come from the global
   token layer, never from this file. */

/* ---------- the cut ---------- */
.dw-cb-cut .cut-grid { display:grid; gap:clamp(28px,4vw,52px); }
@media (min-width:1024px) {
  .dw-cb-cut .cut-grid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
}
.dw-cb-cut .switch { display:flex; gap:7px; flex-wrap:wrap; margin-top:26px; }
.dw-cb-cut .switch button {
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--body); font-size:.84rem; font-weight:600; color:var(--txt-2);
  background:transparent; border:1px solid var(--ctl); border-radius:var(--r);
  padding:9px 17px; cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background-color .16s ease;
}
.dw-cb-cut .switch button:hover { color:var(--txt); border-color:var(--txt-3); }
.dw-cb-cut .switch button[aria-pressed="true"] { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.dw-cb-cut .render {
  position:relative;
  background:radial-gradient(90% 80% at 60% 40%, var(--panel) 0%, var(--ground-2) 78%);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:clamp(14px,2vw,26px);
  overflow:hidden;
}
.dw-cb-cut .render-stack { position:relative; aspect-ratio:1500/1100; }
/* the render plate sits on the dark band and already has a drawn edge; a
   diffuse shadow on that ground reads as haze, not lift */
.dw-cb-cut .render-stack img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.dw-cb-cut .render img[hidden] { display:none; }
/* the single authored moment: the surface draws back to expose the substrate */
.dw-cb-cut .render-stack { clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:no-preference) {
  .dw-cb-cut .render-stack { clip-path:inset(0 0 0 0); }
  .dw-cb-cut .render-stack.armed { clip-path:inset(0 0 62% 0); }
  .dw-cb-cut .render-stack.revealed { clip-path:inset(0 0 0 0); transition:clip-path 1.25s cubic-bezier(.16,1,.3,1); }
}
.dw-cb-cut .balloon {
  position:absolute; width:23px; height:23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 2px 10px -2px var(--shadow);
  transform:translate(-50%,-50%);
}
.dw-cb-cut .balloon.cold { background:var(--cold); }
.dw-cb-cut .keys { display:grid; gap:0; margin-top:20px; }
.dw-cb-cut .key { display:grid; grid-template-columns:23px minmax(0,1fr); gap:13px; align-items:baseline; padding:9px 0; border-top:1px solid var(--hair); }
.dw-cb-cut .key:last-child { border-bottom:1px solid var(--hair); }
.dw-cb-cut .key .n { font-family:var(--mono); font-size:.75rem; font-weight:600; color:var(--accent); }
.dw-cb-cut .key .n.cold { color:var(--cold); }
.dw-cb-cut .key p { margin:0; font-size:.9rem; color:var(--txt-2); }
.dw-cb-cut .key p b { color:var(--txt); font-weight:500; }
.dw-cb-cut .key { cursor:default; transition:background-color .15s ease; }
.dw-cb-cut .key.lit { background:var(--wash); }
.dw-cb-cut .balloon { transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease; }
.dw-cb-cut .balloon.lit { transform:translate(-50%,-50%) scale(1.45); box-shadow:0 0 0 4px var(--accent-ring), 0 2px 10px -2px var(--shadow); }
.dw-cb-cut .balloon.cold.lit { box-shadow:0 0 0 4px var(--cold-ring), 0 2px 10px -2px var(--shadow); }