/* ==========================================================================
   The home page's project builder ("What are you building?"). Pick a world and a need; the
   plan beside it is built from the site's own pages. Uses the kinetic tokens (.kn).
   ========================================================================== */

.pb-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4cqw, 60px); align-items: start; }
@container (max-width: 900px) { .pb-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the two questions (chips: shell.css) ---------- */
.pb-form { display: grid; gap: 30px; }
.pb-go { justify-self: start; }
.js-builder .pb-go { display: none; }   /* with the script, the plan follows each pick */

/* ---------- the plan ---------- */
.pb-out { container-type: inline-size; position: relative; min-height: 440px; padding: clamp(22px, 3.2cqw, 36px); border-radius: 22px;
    border: 1px solid var(--kn-rule); background: var(--surface); overflow: hidden; transition: opacity .2s; }
.pb-out::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--accent-color), transparent 88%), transparent 70%); }
.pb-out > * { position: relative; }
.pb-out.pb-busy { opacity: .55; }

.pb-empty { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 380px; text-align: center; }
.pb-dots { display: grid; grid-template-columns: repeat(6, 10px); gap: 12px; margin-bottom: 14px; }
.pb-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--ink), .14);
    animation: pb-dot 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 85ms); }
@keyframes pb-dot { 0%, 100% { background: rgba(var(--ink), .14); transform: none; } 35% { background: var(--accent-color); transform: scale(1.3); } }
.pb-empty-t { margin: 0; font-family: var(--display-font); text-transform: uppercase; font-size: clamp(1.3rem, 4cqw, 1.7rem); color: var(--heading-color); }
.pb-empty-p { margin: 0; max-width: 40ch; color: var(--kn-soft); line-height: 1.65; }

.pb-plan { display: grid; gap: 26px; }
.pb-eyebrow { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-color); }
.pb-h { margin: 0; font-family: var(--display-font); font-weight: 400; text-transform: uppercase; line-height: 1; color: var(--heading-color);
    font-size: clamp(1.35rem, 4.6cqw, 2.1rem); text-wrap: balance; }
.pb-h span { color: var(--accent-color); }
.pb-block h4 { margin: 0 0 12px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); }

.pb-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-svc a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 13px;
    border: 1px solid var(--kn-rule); text-decoration: none; color: var(--default-color); transition: border-color .2s, transform .25s var(--kn-ease); }
.pb-svc a:hover { border-color: var(--accent-color); transform: translateX(4px); color: var(--default-color); }
.pb-svc-n { font-family: var(--display-font); font-size: 1.15rem; color: var(--accent-color); }
.pb-svc-b { display: grid; gap: 3px; min-width: 0; }
.pb-svc-b strong { color: var(--heading-color); font-size: 1rem; }
.pb-svc-b span { color: var(--kn-soft); font-size: .9rem; line-height: 1.45; }
.pb-svc a i { color: var(--kn-soft); transition: transform .25s var(--kn-ease), color .2s; }
.pb-svc a:hover i { color: var(--accent-color); transform: translateX(3px); }

.pb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: pb; }
.pb-steps li { counter-increment: pb; position: relative; padding: 32px 13px 14px; border-radius: 13px; background: rgba(var(--ink), .045);
    font-size: .88rem; line-height: 1.45; color: var(--default-color); }
.pb-steps li::before { content: counter(pb, decimal-leading-zero); position: absolute; top: 11px; left: 13px; font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; color: var(--accent-color); }
@container (max-width: 520px) { .pb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pb-reads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pb-reads a { display: flex; align-items: baseline; gap: 10px; color: var(--heading-color); text-decoration: none; font-weight: 500; line-height: 1.45; }
.pb-reads a:hover { color: var(--accent-color); }
.pb-reads i { color: var(--accent-color); flex: none; }

.pb-send { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--kn-rule); }
.pb-brief { margin: 0; color: var(--kn-soft); font-size: .93rem; line-height: 1.6; }
.pb-brief span { display: block; margin-bottom: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pb-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* A plan that has just been swapped in builds itself, row by row. */
.pb-new .pb-svc li, .pb-new .pb-steps li { animation: kn-rise .5s var(--kn-ease) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
.pb-new .pb-steps li { animation-delay: calc(var(--i) * 70ms + 260ms); }

@media (prefers-reduced-motion: reduce) {
    .pb-dots span, .pb-new .pb-svc li, .pb-new .pb-steps li { animation: none; }
    .pb-svc a { transition: none; }
}