/* Screen: structure — where the process splits. Layout and colour only; the
   motion primitives (.pd-rise, .pd-hidden) belong to product.css and are used
   as-is. Scoping them here would outrank their own `.in` rule and the element
   would never appear. */

/* ── window chrome ─────────────────────────────────────────────── */
.af-screen[data-screen="structure"] .st-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.af-screen[data-screen="structure"] .st-top-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.af-screen[data-screen="structure"] .st-top-r { display: flex; align-items: center; gap: 8px; }
.af-screen[data-screen="structure"] .st-add { font-size: 13px; color: var(--pd-ink-2); }
.af-screen[data-screen="structure"] .st-name { font-size: 15px; font-weight: 600; color: var(--pd-ink); }
.af-screen[data-screen="structure"] .st-note { font-size: 12px; color: var(--pd-ink-2); margin-right: 4px; }

/* ── card head ─────────────────────────────────────────────────── */
.af-screen[data-screen="structure"] .st-card { padding: 22px 24px 24px; }
.af-screen[data-screen="structure"] .st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.af-screen[data-screen="structure"] .st-head .pd-card-sub { max-width: 56ch; margin-top: 5px; }
.af-screen[data-screen="structure"] .st-detected { flex: none; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--pd-ink-2); max-width: 20ch; text-align: right; }

.af-screen[data-screen="structure"] .st-count { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: var(--pd-ink-2); max-width: 92ch; }
.af-screen[data-screen="structure"] .st-count b { color: var(--pd-ink); font-weight: 600; }

/* ── the flow ──────────────────────────────────────────────────── */
.af-screen[data-screen="structure"] .st-flow { margin-top: 20px; }

/* Before the split the block is chrome-less, so the steps read as the one
   flat list the wizard hands over. `.split` is what resolves it. */
.af-screen[data-screen="structure"] .st-block { position: relative; padding: 14px 16px 14px 20px; border: 1px solid transparent; border-radius: 10px; background: transparent; transition: background-color 0.5s ease, border-color 0.5s ease; }
.af-screen[data-screen="structure"] .st-block.split { background: var(--pd-card-2); border-color: var(--pd-line); }
.af-screen[data-screen="structure"] .st-bar { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.af-screen[data-screen="structure"] .st-bar.in { transform: scaleY(1); }
.af-screen[data-screen="structure"] .st-block[data-accent="green"] .st-bar { background: var(--pd-green); }
.af-screen[data-screen="structure"] .st-block[data-accent="blue"] .st-bar { background: var(--pd-blue); }
.af-screen[data-screen="structure"] .st-block[data-accent="yellow"] .st-bar { background: var(--pd-yellow); }

.af-screen[data-screen="structure"] .st-bhead { margin-bottom: 12px; }
.af-screen[data-screen="structure"] .st-bname { font-size: 14px; font-weight: 600; color: var(--pd-ink); }
.af-screen[data-screen="structure"] .st-bvol { font-size: 12px; color: var(--pd-ink-2); margin-top: 3px; }

/* ── steps ─────────────────────────────────────────────────────── */
.af-screen[data-screen="structure"] .st-steps { display: grid; gap: 8px; }
.af-screen[data-screen="structure"] .st-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) 92px; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--pd-line); border-radius: 8px; background: var(--pd-card); }
.af-screen[data-screen="structure"] .st-n { flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--pd-card-3); color: var(--pd-ink-2); font-family: var(--font-mono); font-size: 11px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.af-screen[data-screen="structure"] .st-line1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.af-screen[data-screen="structure"] .st-title { font-size: 13.5px; font-weight: 600; color: var(--pd-ink); }
.af-screen[data-screen="structure"] .st-desc { font-size: 12.5px; line-height: 1.5; color: var(--pd-ink-2); margin-top: 4px; }
.af-screen[data-screen="structure"] .st-unit { justify-self: end; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--pd-ink-2); background: var(--pd-card-3); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* ── the boundaries ────────────────────────────────────────────── */
/* Height is reserved from mount: js/site.js measures the screen once and a
   connector that grows mid-play would leave the frame the wrong size. */
.af-screen[data-screen="structure"] .st-link { display: flex; align-items: center; gap: 12px; height: 42px; padding-left: 20px; }
.af-screen[data-screen="structure"] .st-line { flex: none; width: 2px; height: 30px; border-left: 2px dashed var(--pd-line-2); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.af-screen[data-screen="structure"] .st-link[data-accent="blue"] .st-line { border-left-color: var(--pd-blue); }
.af-screen[data-screen="structure"] .st-link[data-accent="yellow"] .st-line { border-left-color: var(--pd-yellow); }
.af-screen[data-screen="structure"] .st-link.in .st-line { transform: scaleY(1); }
.af-screen[data-screen="structure"] .st-linktext { font-size: 12.5px; font-style: italic; color: var(--pd-ink-2); }

/* Reduced motion / reset: kill every transition inside the screen. */
.af-screen[data-screen="structure"].st-still *, .af-screen[data-screen="structure"].st-still *::before { transition: none !important; }