/* ── The pages a member actually sees ─────────────────────────────────────────────────
   Loaded by forms/submit.html, submitted.html, closed.html and password.html — four
   standalone pages that do not extend base.html and used to carry four near-identical
   copies of the same band, card and palette. They now share this file, and take their
   tokens from app.css, so a colour is stated once.

   ★ The association's mark and name go in the band; the FORM's name is the masthead below
     it. Cramming a form name into a 14px navigation bar was why every form looked alike.
*/

/* ── Identity band. Chrome, not a title bar. ──
   0.20.0: white, with the official logo in one of the guide's colours, picked per page load —
   the guide assigns no logo colour exclusively to one program. Same masthead as YIM. */
.pf-band{background:var(--surface);padding:12px 20px;display:flex;align-items:center;gap:13px;
  border-bottom:1px solid var(--g200)}
.pf-band svg{height:34px;width:45px;display:block;flex-shrink:0}
.pf-org{color:var(--g900);font-size:15px;font-weight:700;letter-spacing:.01em}
.ylogo-purple{color:var(--y-purple)}.ylogo-blue{color:var(--y-blue)}.ylogo-green{color:var(--y-green)}
.ylogo-red{color:var(--y-red)}.ylogo-orange{color:var(--y-orange)}
[data-theme="dark"] .ylogo-purple{color:var(--brand)}

/* ── Masthead. The form's own name, given room to be read. ── */
.pf-mast{padding:34px 20px 22px;text-align:center;background:var(--brand-tint);
  border-bottom:1px solid var(--g200)}
.pf-mast h1{font-size:30px;font-weight:700;letter-spacing:-.015em;color:var(--brand-deep);
  text-wrap:balance;max-width:22ch;margin:0 auto;line-height:1.2}
.pf-desc{margin:8px auto 0;font-size:15px;color:var(--g700);max-width:56ch;line-height:1.6}
.pf-desc a{color:var(--brand);text-decoration:underline}
/* 1.2.0: the banner photo. Full width, the title in white over a soft dark fade so it reads
   on any photo. Height scales with the screen rather than cropping the photo to a sliver. */
.pf-hero{position:relative;background-size:cover;background-position:center;background-color:var(--brand-deep);
  min-height:clamp(200px,32vw,380px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:40px 20px 30px;border-bottom:0}
.pf-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--y-ink) 62%,transparent) 100%)}
.pf-hero>*{position:relative}
.pf-hero h1{color:#fff;max-width:28ch;text-shadow:0 2px 12px color-mix(in srgb,var(--y-ink) 50%,transparent)}
.pf-hero .pf-desc{color:#fff;text-shadow:0 1px 8px color-mix(in srgb,var(--y-ink) 55%,transparent)}
.pf-hero .pf-desc a{color:#fff}
/* A form may tint this rule (forms.theme_color) but never the masthead itself — a form
   that can recolour its own chrome can make itself unrecognisable as the association's. */
.pf-accent{height:3px;background:var(--brand)}

.pf-wrap{max-width:680px;margin:0 auto;padding:26px 16px 60px}
.pf-card{background:var(--surface);border:1px solid var(--g200);border-radius:var(--rl);
  box-shadow:0 4px 16px var(--shade);padding:28px 30px}
.pf-center{max-width:520px;margin:32px auto 0;text-align:center}
.pf-mark{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:28px;margin:0 auto 18px}
.pf-mark-ok{background:var(--greenlt)}
.pf-mark-shut{background:var(--g100)}
.pf-h{font-size:21px;font-weight:700;color:var(--g900);margin-bottom:8px}
.pf-sub{font-size:15px;color:var(--g700);line-height:1.6}
.pf-ref{background:var(--brand-tint);border-radius:var(--r);padding:13px 16px;margin:20px 0}
.pf-ref-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--g500);margin-bottom:3px}
.pf-ref-num{font-size:20px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.pf-foot{text-align:center;font-size:12.5px;color:var(--g500);margin-top:22px}

/* ── Buttons. Blue carries "do something"; purple is identity and never a call to action. ── */
.pf-btn{font-family:var(--ff);font-size:16px;font-weight:700;color:#fff;background:var(--action);
  border:none;border-radius:var(--r);padding:12px 34px;cursor:pointer;
  box-shadow:0 1px 3px var(--shade);transition:background .12s;text-decoration:none;
  display:inline-block}
.pf-btn:hover{background:var(--action-dark)}
.pf-btn:disabled{opacity:.7;cursor:not-allowed}
.pf-btn-quiet{font-family:var(--ff);font-size:14px;font-weight:500;color:var(--brand);
  background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  padding:4px 2px}
.pf-btn-quiet:hover{color:var(--brand-deep)}

@media(max-width:560px){
  .pf-mast{padding:24px 16px 18px}
  .pf-mast h1{font-size:24px}
  .pf-card{padding:22px 18px}
}
/* 0.19.0: a closed form's own message keeps the builder's line breaks; its button sits below */
.pf-closed-msg{white-space:pre-line;margin-top:12px}
.pf-closed-link{margin-top:20px}