/* Blue Bridge Logic — proposal page styles.
   Implements the "Proposal" Claude Design template (Client proposal design system,
   Proposal.dc.html) in plain CSS. Components below mirror the design system's
   bundled Card / Button / BridgeDivider so no runtime is needed.
   Tokens come from ./tokens/*.css; this file only uses them. */

/* ---------- Design-system components (mirrors _ds_bundle.js) ---------- */
.bbl-card{background:var(--surface-card);border:1px solid var(--border-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:var(--space-5)}
.bbl-card--lg{padding:var(--space-6)}
.bbl-card--tint{background:var(--surface-tint);border-color:var(--blue-100)}
.bbl-card--sunken{background:var(--surface-sunken);box-shadow:none}

.bbl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--weight-semibold);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);white-space:nowrap}
.bbl-btn:active{transform:translateY(1px)}
.bbl-btn--md{height:44px;padding:0 20px;font-size:1rem}
.bbl-btn--lg{height:52px;padding:0 28px;font-size:1.0625rem}
.bbl-btn--primary{background:var(--action-primary);color:var(--paper)}
.bbl-btn--primary:hover{background:var(--action-primary-hover);color:var(--paper)}
.bbl-btn--accent{background:var(--action-accent);color:#fff}
.bbl-btn--accent:hover{background:var(--action-accent-hover);color:#fff}
.bbl-btn--secondary{background:transparent;color:var(--action-primary);border-color:var(--action-primary)}
.bbl-btn--secondary:hover{background:var(--blue-50);color:var(--action-primary-hover)}
.bbl-btn--quiet{background:transparent;color:var(--text-link);padding-left:8px;padding-right:8px}
.bbl-btn--quiet:hover{text-decoration:underline;text-underline-offset:4px;color:var(--action-primary-hover)}

/* The signature "bridge span" rule: a 2px chord with truss ticks above it. */
.bbl-span{width:96px}
.bbl-span__ticks{height:var(--span-tick-h);background:repeating-linear-gradient(90deg,var(--span-color) 0,var(--span-color) var(--span-tick-w),transparent var(--span-tick-w),transparent var(--span-gap))}
.bbl-span__chord{height:var(--span-chord);background:var(--span-color)}

/* Logomark: inline <svg class="bbl-mark"><use href="#bridge-mark"/></svg>. */
.bbl-mark{display:block;flex-shrink:0;color:var(--blue-700)}
.bbl-mark--paint{color:var(--bridge-paint)}

/* ---------- Page ---------- */
html{scroll-behavior:smooth}
.p-page{min-height:100vh;background:var(--paper);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-body)}
.p-wrap{max-width:67.5rem;margin:0 auto;padding:0 var(--gutter)}
.p-lockup{display:flex;align-items:center;gap:10px}
.p-lockup__name{font-family:var(--font-serif);font-weight:600;font-size:18px;letter-spacing:-0.01em;color:var(--blue-700)}
.p-mono{font-family:var(--font-mono);letter-spacing:0.02em}

/* Sticky top bar: phones only (< 640px). */
.p-topbar{display:none;position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--border-line)}
.p-topbar__inner{padding:10px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px}
.p-topbar .p-lockup{gap:8px}
.p-topbar .p-lockup__name{font-size:17px}
.p-topbar__label{font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;color:var(--text-muted)}
.p-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0%;background:var(--blue-500)}
@media (max-width:639.98px){.p-topbar{display:block}}

/* Cover */
.p-cover{background:var(--blue-900);color:var(--paper)}
.p-cover__inner{max-width:67.5rem;margin:0 auto;padding:clamp(40px,8vw,64px) var(--gutter) clamp(48px,8vw,72px)}
.p-cover__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(48px,10vw,96px)}
.p-cover__bar .p-lockup__name{color:var(--paper)}
.p-cover__read{font-family:var(--font-mono);font-size:13px;letter-spacing:0.02em;color:var(--blue-200)}
.p-cover__eyebrow{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--bridge-paint);margin-bottom:20px}
.p-cover__title{color:var(--paper);font-size:clamp(2.5rem,6vw,4rem);line-height:1.1;letter-spacing:-0.012em;max-width:16ch;margin-bottom:28px}
.p-cover__lede{font-size:var(--text-body-lg);line-height:var(--lh-body-lg);color:var(--blue-200);max-width:34rem}
@media (max-width:639.98px){.p-cover__bar{display:none}}

/* Body layout: sticky contents rail on wide screens (>= 900px). */
.p-layout{max-width:67.5rem;margin:0 auto;padding:0 var(--gutter);display:flex;gap:56px;align-items:flex-start}
.p-toc{display:none;flex:0 0 13rem;position:sticky;top:0;padding:64px 0 32px}
.p-toc__title{font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-line)}
.p-toc__list{display:flex;flex-direction:column;gap:4px}
.p-toc__link{display:grid;grid-template-columns:28px 1fr;gap:6px;padding:8px 0 8px 12px;margin-left:-14px;font-size:15px;color:var(--text-muted);text-decoration:none;border-left:2px solid transparent;transition:color 140ms var(--ease-out),border-color 140ms var(--ease-out)}
.p-toc__link:hover{color:var(--blue-700)}
.p-toc__link.is-active{color:var(--blue-700);border-left-color:var(--gold-500);font-weight:600}
.p-toc__num{font-family:var(--font-mono);font-size:12px;padding-top:3px}
.p-toc .bbl-span{margin-top:32px}
@media (min-width:900px){.p-toc{display:block}}
.p-main{flex:1 1 0;min-width:0;max-width:48rem}

/* Sections */
.p-section{padding:48px 0;scroll-margin-top:24px}
.p-section--first{padding-top:64px}
.p-section--last{padding-bottom:88px}
.p-section__head{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.p-section__num{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--text-accent)}
.p-lede{font-size:var(--text-body-lg);line-height:var(--lh-body-lg);color:var(--text-secondary);margin-bottom:32px;max-width:36rem}
.p-note{font-size:15px;color:var(--text-muted)}
.p-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;color:var(--blue-500);margin-bottom:10px}
.p-eyebrow--tight{margin-bottom:4px}
.p-body-sm{font-size:15px;line-height:1.55;color:var(--text-secondary)}

/* Card trio ("In short") */
.p-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.p-cards strong{font-weight:600}

/* Pull quote ("in your words") */
.p-quote{margin:0 0 28px;padding:0 0 0 24px;border-left:2px solid var(--blue-300)}
.p-quote__text{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.5rem,3vw,2rem);line-height:1.35;color:var(--blue-700);margin-bottom:16px}
.p-quote__who{font-size:15px;color:var(--text-muted)}

/* Numbered list grid (problems, next steps) */
.p-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px 28px}
.p-list__item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:baseline;border-top:1px solid var(--border-line);padding-top:16px}
.p-list__num{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--blue-500)}

/* Figure + steps ("How it works") */
.p-fig-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px 40px;align-items:center}
.p-fig{background:#fff;border:1px solid var(--border-line);border-radius:10px;padding:20px 8px 12px;box-shadow:var(--shadow-1)}
.p-fig > svg{width:100%;max-width:400px;height:auto;display:block;margin:0 auto;font-family:var(--font-sans);overflow:visible}
.p-fig__caption{font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;color:var(--text-muted);text-align:center;margin-top:12px}
.p-steps{display:flex;flex-direction:column;gap:24px}
.p-steps h4{margin-bottom:6px}
.p-steps__kicker{font-size:15px;color:var(--text-muted);border-top:1px solid var(--border-line);padding-top:16px}

/* Timeline ("Phases") */
.p-timeline{position:relative;max-width:44rem}
.p-timeline__rail{position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--blue-200)}
.p-timeline__fill{position:absolute;left:11px;top:8px;width:2px;height:0%;background:var(--blue-700);transition:height 200ms linear}
.p-timeline__items{display:flex;flex-direction:column;gap:36px}
.p-phase{position:relative;padding-left:40px}
.p-phase__dot{position:absolute;left:6px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--blue-700)}
.p-phase--gold .p-phase__dot{background:var(--gold-500);border-color:var(--gold-500)}
.p-phase__meta{font-family:var(--font-mono);font-size:13px;color:var(--blue-500);margin-bottom:6px}
.p-phase h4{margin-bottom:8px}
.p-phase .p-body-sm{max-width:36rem}
.p-timeline-note{margin-top:28px;padding-left:40px}

/* Risks */
.p-risks{background:var(--fog);border-radius:10px;padding:8px clamp(16px,4vw,28px)}
.p-risk{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 32px;padding:20px 0;border-bottom:1px solid var(--border-line)}
.p-risk:last-child{border-bottom:0}

/* Close */
.p-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.p-list--close{margin-bottom:40px}

/* Footer */
.p-footer{border-top:1px solid var(--border-line)}
.p-footer__inner{max-width:67.5rem;margin:0 auto;padding:28px var(--gutter);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.p-footer__meta{font-family:var(--font-mono);font-size:13px;letter-spacing:0.02em;color:var(--text-muted)}

/* ---------- Motion ----------
   Hidden states only apply once JS has run (html.js), so the page reads fully
   without scripts. prefers-reduced-motion settles everything immediately. */
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.js .reveal.is-shown{opacity:1;transform:none}
.js [data-node]{opacity:0;transform:translateY(6px)}
.js [data-node].is-shown{opacity:1;transform:none}
.js [data-draw]{transition:stroke-dashoffset 800ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js [data-node]{opacity:1;transform:none;transition:none}
  .js [data-draw]{transition:none;stroke-dashoffset:0!important;stroke-dasharray:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .p-topbar,.p-toc{display:none}
  .p-cover{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .js .reveal,.js [data-node]{opacity:1;transform:none}
}