/* KYLER · playbook page styles */

.pb-bar {
  position: sticky; top: 66px; z-index: 30;
  background: rgba(229, 233, 234, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.pb-bar-inner { display: flex; align-items: center; gap: 16px; height: 52px; }
.pb-bar-title {
  font-family: var(--head); font-size: 0.82rem; font-weight: 600;
  color: var(--charcoal); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.pb-bar-track {
  flex: 1; height: 3px; background: rgba(27, 42, 32, 0.12); border-radius: 100px; overflow: hidden;
}
.pb-bar-fill {
  height: 100%; width: 0; background: var(--pine);
  transition: width 220ms ease;
}
.pb-bar-label {
  font-family: var(--head); font-size: 0.74rem; font-weight: 600;
  color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}

.pb-tagline {
  font-family: var(--head); color: var(--sage);
  font-size: clamp(1rem, 1.5vw, 1.15rem); letter-spacing: -0.01em;
  margin: 12px 0 0;
}
.pb-howto {
  margin-top: 26px; padding: 18px 20px; background: var(--paper);
  border-left: 2px solid var(--moss); font-size: 0.94rem; max-width: var(--measure);
}
.pb-howto strong { font-family: var(--head); color: var(--charcoal); }

.pb-section {
  padding-block: clamp(34px, 4.4vw, 58px);
  border-top: 1px solid var(--line);
}
.pb-section:first-child { border-top: 0; }
.pb-section-head { margin-bottom: 26px; }
.pb-part {
  display: block; font-family: var(--head); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px;
}
.pb-num {
  font-family: var(--head); font-size: 0.78rem; font-weight: 700;
  color: var(--moss); letter-spacing: 0.1em; display: block; margin-bottom: 6px;
}
.pb-section h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.pb-note { margin-top: 12px; font-size: 0.94rem; color: var(--muted); }

.pb-field { margin-top: 22px; max-width: 100%; }
.pb-field label { font-size: 0.94rem; }
.pb-field .hint { margin-bottom: 2px; }

/* ---------- summary sheet ---------- */

.summary-sheet {
  margin-top: 32px; background: #fff; color: var(--ink);
  border-radius: 3px; padding: clamp(26px, 3vw, 40px);
}
.sum-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.sum-brand {
  font-family: var(--head); font-weight: 700; letter-spacing: 0.08em;
  color: var(--charcoal); font-size: 1rem;
}
.sum-title { font-family: var(--head); font-size: 0.86rem; color: var(--sage); }
.sum-who { margin-left: auto; font-family: var(--head); font-size: 0.8rem; color: var(--muted); }

.sum-row {
  display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .sum-row { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
}
.sum-row:last-child { border-bottom: 0; }
.sum-label {
  font-family: var(--head); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--slate);
}
.sum-value { font-size: 0.95rem; line-height: 1.55; }
.sum-row.empty .sum-value { color: var(--muted); font-style: italic; }

/* ---------- print ---------- */

@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 10.5pt; }
  .site-header, .site-footer, .pb-bar, .pb-sections, .hero, .cta-row, .formnote, .reassure, .eyebrow { display: none !important; }
  #summary { padding: 0 !important; background: #fff !important; color: #000 !important; }
  #summary h2, #summary p { display: none !important; }
  #summary .wrap { padding: 0 !important; max-width: none !important; }
  .summary-sheet { margin: 0; padding: 0; border-radius: 0; }
  .sum-row { break-inside: avoid; padding: 9px 0; }
  .sum-row.empty { display: none; }
  .sum-value { font-size: 10.5pt; }
  a[href]::after { content: none !important; }
}