/* profile-preview.css — WS1 of the provider-builder.
   Page-local styles for the rendered profile (profile-render.js), lifted from
   app-demo/public-profile.html and scoped under .pfscope. Shared component
   styles live in components.css; tokens only.
   Also holds: gh-* ghost variants (empty-field treatment — dashed ghostcard
   default; a later lab pick is a class swap), [data-region] click/flash
   affordances, and the modal set (modals mount INSIDE the .pfscope container —
   position:fixed still works). */

.pfscope { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); }
.pfscope *, .pfscope *::before, .pfscope *::after { box-sizing: border-box; }
.pfscope a { color: var(--color-accent-dark); }

/* ---- layout (verbatim page-locals from public-profile.html) ---- */
.pfscope .wrap { max-width: 1020px; margin: 0 auto; padding: var(--space-6) var(--space-6) 0; }
.pfscope .mission { font-size: var(--text-body); color: var(--color-ink-secondary); max-width: 640px; margin: 0; }
.pfscope .mission + .mission { margin-top: var(--space-2); } /* story renders as up to 3 paragraphs */
.pfscope .mission-wrap { max-width: 640px; margin: 0 0 var(--space-2); }
.pfscope .cols { display: grid; grid-template-columns: 62fr 38fr; gap: var(--space-8); align-items: start; }
@media (max-width: 860px) { .pfscope .cols { grid-template-columns: 1fr; } .pfscope .railcol { position: static !important; } }
.pfscope section.open { margin-bottom: var(--space-12); }

/* page-scoped component overrides */
.pfscope .rail .btn-primary { width: 100%; }
.pfscope .rail .kv .k { width: 92px; }

/* fit teaser */
.pfscope .fit-teaser { text-align: center; padding: var(--space-4) var(--space-2) var(--space-2); }
.pfscope .fit-teaser p { margin: 0 0 var(--space-3); color: var(--color-ink-secondary); }

/* ---- DRAFT chip (builder-leftpane-lab precedent) ---- */
.pfscope .draftchip { display: inline-flex; font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-gold-tint); color: var(--color-gold-ink); }

/* ---- ghost variants — G3 SKELETON treatment (Tate pick 2026-09-09) ----
   Wash shapes with a slow shimmer + micro captions (ghost-states-lab G3).
   Previous dashed default retired; swap here again if the pick changes. */
.pfscope .gh-text { display: inline-block; min-width: 60%; color: var(--color-ink-muted); font-size: var(--text-micro); font-style: normal; background: linear-gradient(90deg, var(--color-wash) 25%, color-mix(in oklab, var(--neutral-99) 50%, var(--color-wash)) 45%, var(--color-wash) 65%); background-size: 200% 100%; animation: gs-shimmer 3.2s linear infinite; border-radius: var(--radius-sm); padding: 2px 8px; }
.pfscope .hero .gh-text { min-width: 0; color: rgba(255,255,255,.75); background: linear-gradient(90deg, rgba(255,255,255,.14) 25%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.14) 65%); background-size: 200% 100%; animation: gs-shimmer 3.2s linear infinite; }
/* ghost text tracks its context's type size — the title ghost must read as a title */
.pfscope .identity h1 .gh-text, .pfscope h1 .gh-text { font-size: inherit; font-weight: inherit; padding: 0 14px; border-radius: var(--radius-md); }
.pfscope .identity .m .gh-text { font-size: inherit; }
.pfscope .proofrow .gh-text { font-size: inherit; }
.pfscope .gh-hero { background: linear-gradient(160deg, var(--accent-90), var(--neutral-90)); }
.pfscope .gh-hero .scrim { background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.12) 40%, rgba(0,0,0,0) 65%); }
.pfscope .gh-card { border: none; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-wash) 25%, color-mix(in oklab, var(--neutral-99) 50%, var(--color-wash)) 45%, var(--color-wash) 65%); background-size: 200% 100%; animation: gs-shimmer 3.2s linear infinite; padding: var(--space-4); font-size: var(--text-micro); color: var(--color-ink-muted); font-style: normal; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.pfscope .gh-kv { display: inline-block; min-width: 90px; border: none; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-wash) 25%, color-mix(in oklab, var(--neutral-99) 50%, var(--color-wash)) 45%, var(--color-wash) 65%); background-size: 200% 100%; animation: gs-shimmer 3.2s linear infinite; padding: 1px 8px; color: var(--color-ink-muted); font-size: var(--text-micro); font-style: normal; }
.pfscope .gh-block { border: none; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-wash) 25%, color-mix(in oklab, var(--neutral-99) 50%, var(--color-wash)) 45%, var(--color-wash) 65%); background-size: 200% 100%; animation: gs-shimmer 3.2s linear infinite; padding: var(--space-2) var(--space-3); color: var(--color-ink-muted); font-size: var(--text-micro); font-style: normal; }
.pfscope .gh-chip { border: none; background: linear-gradient(90deg, var(--color-wash) 25%, color-mix(in oklab, var(--neutral-99) 50%, var(--color-wash)) 45%, var(--color-wash) 65%); background-size: 200% 100%; animation: gs-shimmer 3.2s linear infinite; color: var(--color-ink-muted); font-style: normal; }
.pfscope .voice.gh-voice { border: 1px solid var(--color-border); background: linear-gradient(90deg, var(--color-wash) 25%, color-mix(in oklab, var(--neutral-99) 50%, var(--color-wash)) 45%, var(--color-wash) 65%); background-size: 200% 100%; animation: gs-shimmer 3.8s linear infinite; box-shadow: none; min-height: 120px; }
.pfscope .gh-voice p { color: var(--color-ink-muted); font-size: var(--text-micro); font-style: normal; }
@keyframes gs-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- region affordances (builder navigates by clicking regions) ---- */
.pfscope [data-region] { scroll-margin-top: 10px; border-radius: var(--radius-sm); transition: box-shadow 300ms var(--ease-out); cursor: pointer; }
.pfscope [data-region]:hover { outline: 1px dashed color-mix(in oklab, var(--accent-60) 40%, transparent); outline-offset: 2px; }
.pfscope [data-region].flash { box-shadow: none; outline: 3px solid var(--accent-70); outline-offset: 2px; }
.pfscope .hero[data-region] { border-radius: var(--card-radius); } /* keep the hero's own radius */

/* ---- modal set (verbatim page-locals, scoped; mounts inside .pfscope) ---- */
.pfscope .modal-backdrop { position: fixed; inset: 0; background: color-mix(in oklab, var(--color-ink) 45%, transparent); display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--space-4); }
.pfscope .modal-backdrop[hidden] { display: none; }
.pfscope .modal { background: var(--color-card); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); width: 430px; max-width: 100%; max-height: 90vh; overflow: auto; padding: var(--space-5, 20px); position: relative; cursor: auto; }
.pfscope .modal-sm { width: 340px; text-align: center; }
.pfscope .modal-x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 18px; color: var(--color-ink-muted); cursor: pointer; }
.pfscope .mhead { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.pfscope .mhead img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.pfscope .mhead .avatar { width: 44px; height: 44px; font-size: var(--text-small); }
.pfscope .mhead h3 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; }
.pfscope .mhead .sub { font-size: var(--text-small); color: var(--color-ink-muted); }
.pfscope .mintro { font-size: var(--text-small); color: var(--color-ink-secondary); margin: 0 0 var(--space-3); }
.pfscope .mfield { display: block; margin-bottom: var(--space-3); }
.pfscope .mfield > span { display: block; font-size: var(--text-small); font-weight: 700; margin-bottom: 4px; }
.pfscope .mfield .input { width: 100%; }
.pfscope textarea.input { resize: vertical; font: inherit; }
.pfscope .mchips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pfscope .mchip { border: 1px solid var(--color-border-strong); background: var(--color-card); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: var(--text-small); cursor: pointer; }
.pfscope .mchip.on { background: var(--color-accent-tint); border-color: var(--color-accent); color: var(--color-accent-dark); font-weight: 700; }
.pfscope .mnote { font-size: 12px; color: var(--color-ink-muted); text-align: center; margin: var(--space-2) 0 0; }
.pfscope .mlater { display: block; margin: var(--space-2) auto 0; background: none; border: none; color: var(--color-ink-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--text-small); }
.pfscope .modal-sm h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; margin: var(--space-2) 0 var(--space-4); }

/* ==== WS4 containment (2026-09-09): .hero/.voicerail/.band in components.css
   use 100vw full-bleed math that assumes body-width layout; inside the
   builder's 2/3 preview pane they overflow. Neutralize within pfscope. ==== */
.pfscope .hero, .pfscope .band { width: 100%; margin-left: 0; }
.pfscope .voicerail { margin-left: 0; margin-right: 0; padding-left: var(--space-2); padding-right: var(--space-2); scroll-padding-left: var(--space-2); }
/* WS4: pages that link styles.css set h1/h2 color to ink, beating the hero's inherited white */
.pfscope .hero .identity h1 { color: #fff; }

/* ==== toggle features (Tate picks 2026-09-09): A1a accreditation chip · B2 bundles tiles ==== */
.pfscope .titlerow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pfscope .acc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius-pill); color: #fff; font-size: var(--text-micro); font-weight: 700; white-space: nowrap; backdrop-filter: blur(2px); }
.pfscope .cbcard { margin-top: var(--space-3); padding: var(--space-4); }
.pfscope .cb-h { font-size: var(--text-small); font-weight: 700; }
.pfscope .cb-sub { font-size: var(--text-micro); color: var(--color-ink-muted); margin: 1px 0 var(--space-2); }
.pfscope .cb-tile { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--color-border); }
.pfscope .cb-tile .cb-nm { font-size: var(--text-small); font-weight: 700; flex: 1; min-width: 0; }
/* A8 (staff feedback 2026-09-09): pre-partner ghost inside the Common Programs card */
.pfscope .cbcard .gh-card { margin-top: var(--space-2); }
/* A5 (staff feedback 2026-09-09): "Coming soon" badge — caution tokens; components.css
   has no .badge-caution class (badge-spots uses the same tokens), so it lives here */
.pfscope .badge-caution { background: var(--badge-caution-bg); }
.pfscope .badge-caution i, .pfscope .badge-caution .dot { background: var(--badge-caution-dot); }
/* tag pills card in the rail (moved from About, 2026-09-09) */
.pfscope .tagcard { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.pfscope .tagcard-row { display: flex; gap: 6px; flex-wrap: wrap; }