/* The build handoff: the spec on the left, the agent that reads it on
   the right. Colour comes only from the --pd-* set in product.css. */

.af-screen[data-screen="handoff"] .ho-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.af-screen[data-screen="handoff"] .pd-card { min-height: 470px; display: flex; flex-direction: column; }

.af-screen[data-screen="handoff"] .ho-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.af-screen[data-screen="handoff"] .ho-title { font-size: 18px; font-weight: 600; color: var(--pd-ink); margin: 0 0 4px; }
.af-screen[data-screen="handoff"] .ho-sub { font-size: 12.5px; line-height: 1.5; color: var(--pd-ink-2); margin: 0 0 18px; max-width: 44ch; }

/* The spec rows */
.af-screen[data-screen="handoff"] .ho-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--pd-line); }
.af-screen[data-screen="handoff"] .ho-row .k { font-size: 12.5px; color: var(--pd-ink-2); }
.af-screen[data-screen="handoff"] .ho-row .v { font-size: 13px; color: var(--pd-ink); }
.af-screen[data-screen="handoff"] .ho-row .v.pd-mono { font-size: 11.5px; letter-spacing: -0.01em; }

.af-screen[data-screen="handoff"] .ho-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }
.af-screen[data-screen="handoff"] .ho-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pd-ink-3); }

/* The transcript */
.af-screen[data-screen="handoff"] .ho-log { display: grid; gap: 2px; margin-top: 2px; }
.af-screen[data-screen="handoff"] .ho-line { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; color: var(--pd-ink-2); }
.af-screen[data-screen="handoff"] .ho-line .g { font-style: normal; color: var(--pd-ink-3); }
.af-screen[data-screen="handoff"] .ho-line.done { color: var(--pd-green); }
.af-screen[data-screen="handoff"] .ho-line.done .g { color: var(--pd-green); }

/* Pre-animation state. .pd-rise is left entirely to product.css: scoping
   it here would outrank its own `.pd-rise.in` rule and the rows would
   never appear. Only .ho-line, which is ours, is declared below. */
.af-screen[data-screen="handoff"] .ho-line { opacity: 0; transform: translateY(6px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.af-screen[data-screen="handoff"] .ho-line.in { opacity: 1; transform: none; }