/* Modals (SPEC §Modals, field-guide styling per redesign/HANDOFF.md §Modals): paper plates, 4px corners, a forest scrim.
   .pm* is the program modal, .ev-modal the event modal, .fg-dlg the Newsletter / Mentorship forms, .nlv the
   Turnstile confirm step. */
.modal-bg{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(31,51,36,.45)}
.modal{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper-2);border:1px solid var(--card-line);border-radius:4px;box-shadow:0 20px 60px rgba(31,51,36,.3);color:var(--ink)}
.modal:focus{outline:none}
.modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 12px 0 18px;font-family:var(--f-display);font-size:21px;font-weight:500;line-height:1.2;color:var(--ink)}
.modal-h span{padding-top:5px;min-width:0;overflow-wrap:anywhere}
.modal-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:3px;background:none;color:var(--muted);cursor:pointer}
.modal-x:hover{background:var(--hover-stone);color:var(--ink)}

/* Event modal: fern spine on the left edge */
.ev-modal::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--events)}
.ev-modal .dl{display:grid;grid-template-columns:84px 1fr;gap:9px 12px;margin:0;padding:14px 18px 18px;font-size:13.5px}
.ev-modal .dl dt{color:var(--muted);font-family:var(--f-display);font-variant-caps:small-caps;letter-spacing:.04em;font-weight:600}
.ev-modal .dl dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ev-modal a{color:var(--apps);text-underline-offset:2px}
.ev-modal .ev-host{display:flex;align-items:center;gap:8px}
.ev-modal .ev-host .lg{width:16px;height:16px;color:var(--forest)}

/* Program modal */
.pm-head{display:flex;align-items:center;gap:12px;padding:18px 18px 0}
.pm-lg{flex:none;width:34px;height:34px;color:var(--forest)}
.pm-ttl{flex:1;min-width:0}
.pm-ttl p{margin:0;font-size:12.5px;font-style:italic;color:var(--muted)}
.pm-ttl h2{margin:2px 0 0;font-family:var(--f-display);font-size:23px;font-weight:500;line-height:1.2;letter-spacing:0}
.pm-hr{flex:none;align-self:flex-start;display:flex;align-items:center;gap:6px;margin:0 -6px 0 0}
.pm-ext{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:3px;color:var(--muted);text-decoration:none}
.pm-ext:hover{background:var(--hover-forest);color:var(--forest)}
.pm-x{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:3px;background:none;color:var(--muted);cursor:pointer}
.pm-x:hover{background:var(--hover-stone);color:var(--ink)}
.pm-btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:500;padding:7px 14px;border-radius:3px;border:1px solid var(--card-line);background:var(--paper-2);color:var(--ink);text-decoration:none;cursor:pointer}
.pm-btn.pri{border-color:var(--apps);color:var(--apps)}
.pm-btn.pri:hover{background:var(--apps);color:var(--cream)}
.pm-btn.pri.sm{height:32px;padding:0 14px;box-sizing:border-box}
.pm-desc{margin:14px 18px 0;font-size:14.5px;line-height:1.5;color:var(--ink)}
/* Dates: one bordered list; the open-applications row gets a blue spine */
.pm-dates{margin:16px 18px 0;display:flex;flex-direction:column;border:1px solid var(--card-line);border-radius:4px;overflow:hidden}
.pm-dr{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;font-size:13.5px;background:var(--paper-2);color:#5E5949}
.pm-dr + .pm-dr{border-top:1px solid var(--rule)}
.pm-dr.apps{background:var(--apps-soft);color:var(--apps)}
.pm-dr.now{background:var(--apps-soft);color:var(--apps);box-shadow:inset 3px 0 0 var(--apps)}
.pm-dr .pm-di{flex:none}
.pm-dr .pm-dk{font-weight:600;white-space:nowrap}
.pm-dr .pm-dv{flex:1;min-width:0}
.pm-pill{flex:none;font-size:12px;font-weight:600;padding:2px 9px;border-radius:2px;background:var(--hover-paper);border:1px solid var(--apps-line);color:var(--apps);font-variant-numeric:tabular-nums}
.pm-dr.now .pm-pill{background:var(--apps);border-color:var(--apps);color:var(--cream)}
.pm-dr:not(.apps):not(.now) .pm-pill{border-color:var(--card-line);color:#5E5949}
/* Facts: small-caps labels */
.pm dl{display:grid;grid-template-columns:100px 1fr;gap:8px 14px;margin:0;padding:16px 18px 18px;font-size:13.5px}
.pm dt{color:var(--muted);font-family:var(--f-display);font-variant-caps:small-caps;letter-spacing:.04em;font-size:13.5px;font-weight:600}
.pm dd{margin:0;color:var(--ink);min-width:0}
.pm-desc:last-child,.pm-dates:last-child{margin-bottom:18px}

/* ── Newsletter and Mentorship forms ───────────────────────────────────────────────────────── */
.fg-dlg{padding:20px 22px 22px}
.fg-dlg.sm{max-width:420px}
.fg-dlg h2{margin:0 36px 14px 0;font-family:var(--f-display);font-weight:500;font-size:22px;line-height:1.2}
.fg-dlg.sm h2{margin-bottom:2px}
.fg-dlg .modal-x{position:absolute;top:10px;right:10px}
.fg-subh{margin:-8px 0 14px;font-size:13.5px;color:var(--muted)}
.fg-dlg.sm .fg-subh{margin:0 0 12px}
.fg-form{display:flex;flex-direction:column;gap:12px}
.fg-form label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--ink);min-width:0}
.fg-form label>span{font-weight:600}
.fg-form input,.fg-form textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--hover-paper);border:1px solid var(--card-line);border-radius:3px;padding:7px 10px;width:100%;box-sizing:border-box;min-width:0}
.fg-form textarea{resize:none;overflow:hidden;line-height:1.4;min-height:36px}
.fg-form input:focus-visible,.fg-form textarea:focus-visible{outline:2px solid var(--forest);outline-offset:0;border-color:var(--forest)}
.fg-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg-fa{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:4px}
.fg-thanks{margin:0;font-size:14.5px;overflow-wrap:anywhere}
.fg-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Email row (newsletter) */
.sf-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sf-row{display:flex;gap:8px}
.sf-in{flex:1;min-width:0;height:36px;box-sizing:border-box;border:1px solid var(--card-line);border-radius:3px;padding:0 10px;font:inherit;font-size:14px;color:var(--ink);background:var(--hover-paper)}
.sf-in::placeholder{color:#A79E86}
.sf-in:focus-visible{outline:2px solid var(--forest);outline-offset:0;border-color:var(--forest)}
.sf-go{flex:none;height:36px;padding:0 16px;border-radius:3px;border:0;background:var(--forest);color:var(--cream);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.sf-go:hover{background:var(--forest-2)}
.sf-go:disabled{opacity:.7;cursor:default}
.sf-go:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.sf-done{margin:0;font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.sf-err{margin:6px 0 0;font-size:13px;color:#A12D24}
.sf-err:empty{display:none}

/* Turnstile confirm step (opens over the form after Sign Up / Apply) */
.nlv-bg{z-index:120}
.nlv{max-width:380px}
.nlv-b{padding:6px 18px 18px}
.nlv-d{margin:0 0 12px;font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.nlv-ts{min-height:65px;display:flex;justify-content:center}
.nlv-ts[hidden]{display:none}
.nlv-msg{margin:10px 0 0;min-height:18px;font-size:13px;color:var(--muted);text-align:center}
.nlv-msg.err{color:#A12D24}

/* Keyboard focus */
.pm-ext:focus-visible,.pm-x:focus-visible,.pm-btn:focus-visible,.modal-x:focus-visible,.ev-modal a:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
/* Narrow screens: rows wrap instead of overflowing */
@media (max-width:520px){
  .pm-dr{flex-wrap:wrap;column-gap:10px;row-gap:2px;padding:6px 12px}
  .pm-dr .pm-dv{flex:1 1 auto}
  .pm-dr .pm-pill{margin-left:auto}
  .pm dl{grid-template-columns:88px 1fr}
  /* Logo + actions on the first line, org and name full width below */
  .pm-head{flex-wrap:wrap;row-gap:8px}
  .pm-hr{margin-left:auto}
  .pm-ttl{order:3;flex-basis:100%}
  .fg-dlg{padding:18px 16px 18px}
}
@media (max-width:480px){.fg-2{grid-template-columns:1fr}}