/* Fridays: apply page (v2, "Place Card"). Only what base.css section 13 (funnel) and section 6 (forms) lack, per DESIGN.md
   section 7 "Funnel": a 640px column, plus a 320px "Your request" face from 960px. Loads after base.css, so equal-specificity
   rules here win. Nothing is drawn; the Seal, the lozenge and the foil carry the page. */

.apply-main{padding-block:var(--s6) var(--s9)}

/* ---- layout: one column on phones, the form and the summary side by side from 960px */
.apply-main .funnel{--funnel-w:640px;max-width:none;width:min(100% - 2 * var(--margin),var(--funnel-w))}
.funnel-main{min-width:0;container-type:inline-size}
@media (min-width:960px){
  .apply-main .funnel:not(.funnel-closed){--funnel-w:1008px;display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--s7);align-items:start}
}

/* ---- head of the step: the kicker (Step 2 of 4, Your Fridays), the h1, the lead */
.funnel-count{margin-top:var(--s6)}
.funnel-count + form .funnel-panel{margin-top:var(--s2)}
.funnel-heading{margin-top:0;width:fit-content;max-width:100%;font-size:clamp(2.125rem,1.55rem + 2vw,3.25rem)}
.funnel-lead{max-width:52ch}
.funnel-fields{margin-top:var(--s6)}
#funnel-errors:not(:empty){margin-top:var(--s5)}
#funnel-errors:not(:empty) + .funnel-fields{margin-top:var(--s5)}
.funnel-alert:not(:empty){margin-top:var(--s5)}

/* phones: "Step 2 of 4, Your Fridays" sits over bare lozenges */
@media (max-width:599px){
  .apply-main{padding-block:var(--s4) var(--s8)}
  .funnel-main{display:flex;flex-direction:column}
  .funnel-count{order:-1;margin:0 0 var(--s3)}
  .funnel-steps{margin-bottom:var(--s5)}
  .funnel-count + form .funnel-panel{margin-top:0}
}

/* text-looking buttons: "Change" in the review (finished step names are styled by base.css) */
.link-btn{display:inline;padding:0;margin:0;background:none;border:0;border-radius:var(--radius);color:var(--ink);font:inherit;
  text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.link-btn:hover{text-decoration-thickness:2px}
.funnel-steps button.step-name{text-align:center}
.review .link-btn{font-weight:500;font-size:var(--fs-small);white-space:nowrap;min-height:44px;padding-inline:var(--s2);margin-block:-10px}

/* the panel dims once the Seal is being stamped, so the Seal is the only thing that moves */
.funnel-panel{transition:opacity 400ms var(--ease-out)}
.funnel-panel.is-sent{opacity:.35;pointer-events:none}

/* ---- path tiles: side by side when the column is wide enough, not when it is squeezed beside the summary */
.path-choice{grid-template-columns:1fr}
@container (min-width:560px){.path-choice{grid-template-columns:repeat(2,minmax(0,1fr))}}
.path-option{min-height:200px;gap:var(--s4);align-content:start}
@container (min-width:560px){.path-title{min-height:2.2em}}   /* side by side: titles of one or two lines share a baseline */
.path-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.path-top .candle-pair{margin:0}
.path-pick{font-weight:500;font-size:var(--fs-small);line-height:1.4;color:var(--gilt);opacity:0;transition:opacity 200ms var(--ease-set)}
.path-option:has(input:checked) .path-pick{opacity:1}
.path-title{font-size:clamp(1.625rem,1.3rem + .9vw,2rem)}
.path-lead{font-size:1rem;line-height:1.5}

/* ---- Friday tiles: "Friday 3", the date, the parasha in both scripts, the candle time */
.dinners{gap:var(--s3)}
.dinner-row{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;padding:var(--s4) var(--s5)}
.dinner-row .dinner-no{grid-column:1 / -1;font-weight:500;font-size:var(--fs-small);line-height:1.4;color:var(--muted)}
.dinner-row .dinner-date{grid-column:1 / -1;margin-top:2px;font-family:var(--font-display);font-weight:400;font-size:1.75rem;line-height:1.15}
.dinner-row .dinner-parasha{grid-column:1 / -1;margin-top:var(--s1);font-family:var(--font-text);font-size:1rem;line-height:1.4}
.dinner-row .dinner-candles{grid-column:1 / -1;margin-top:2px}
.dinner-row.is-full .dinner-no,.dinner-row.is-full .dinner-candles{color:var(--sage)}
.dinner-note{min-height:1.5em;margin-top:var(--s3)}
@media (max-width:599px){
  .dinner-row{grid-template-columns:6rem minmax(0,1fr);grid-template-areas:"date para" "no can";column-gap:var(--s4);align-items:center;min-height:72px;padding:var(--s3) 44px var(--s3) var(--s4)}
  .dinner-row .dinner-date{grid-area:date;margin:0;font-size:1.625rem}
  .dinner-row .dinner-no{grid-area:no}
  .dinner-row .dinner-parasha{grid-area:para;margin:0}
  .dinner-row .dinner-candles{grid-area:can;margin:0}
}

/* ---- fields */
.optional{font-weight:400;color:var(--muted);margin-left:.35em}
legend .optional{font-family:var(--font-text);font-size:var(--fs-small)}
.check-list{display:grid;grid-template-columns:1fr;margin-top:var(--s2)}
@container (min-width:480px){.check-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}}
.field > .dinners{margin-top:var(--s2)}
.char-count{text-align:right}
.field.is-invalid .dinners,.field.is-invalid .path-choice{outline:2px solid var(--claret);outline-offset:8px;border-radius:var(--r-face)}
.field.is-invalid .check-list{border-left:2px solid var(--claret);padding-left:var(--s3)}
.field input[type="checkbox"]:focus-visible,.field input[type="radio"]:focus-visible{outline-offset:3px}

/* ---- actions: Back (secondary, left) and Continue (primary, right); full width on phones */
.funnel-actions{margin-top:var(--s7)}
@media (max-width:599px){
  .funnel-actions{margin-top:var(--s6)}
  .funnel-actions .btn{flex:1;white-space:nowrap}
  .funnel-actions #funnel-back{flex:0 0 auto}
  .funnel-actions .btn:only-child{margin-left:0}
}

/* ---- review: a sheet of paper, one row per answer, "Change" beside each */
.review-block{margin-top:var(--s7);padding:var(--s5) var(--s5) var(--s4);background:var(--white);border-radius:var(--r-print);box-shadow:var(--elev-1)}
.review-block h2{font-size:var(--fs-h3);line-height:1.2;margin-bottom:var(--s3)}
.review{border-top:1px solid var(--edge)}
.review dd{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.review-value{display:block;min-width:0;overflow-wrap:anywhere}
.review-line{display:block}
.review-line.muted{color:var(--sage)}
.review-value.is-long{white-space:pre-wrap}
.review-block .help{margin-top:var(--s4)}
@media (max-width:599px){
  .review-block{padding:var(--s4)}
  .review > div{grid-template-columns:1fr;gap:var(--s1)}
}

/* ---- "Your request": the small face. Its Seal is blind until you send, then it is stamped and turns to foil. */
.funnel-summary{grid-column:2}
@media (min-width:960px){.funnel-summary{position:sticky;top:var(--s5);margin-top:var(--s6)}}
@media (max-width:959px){.funnel-summary{margin-top:var(--s7)}}
.funnel-summary{--line:rgba(185,199,189,.28)}   /* dark stock: rules are Mist at 28% */
.funnel-summary h2{font-family:var(--font-display);font-weight:400}
.funnel-summary dl{border-bottom:1px solid var(--line)}
.funnel-summary dl > div{align-items:baseline}
.summary-seal{position:relative;width:96px;height:96px;margin:var(--s4) auto var(--s5)}
.summary-seal .seal{margin:0}
.summary-foil{position:absolute;inset:0;opacity:0;transition:opacity 300ms var(--ease-ink) 200ms}
.summary-foil .seal{filter:none}
.funnel-summary.is-sent .summary-seal{animation:ap-stamp 260ms var(--ease-press) both}
.funnel-summary.is-sent .summary-foil{opacity:1}
@keyframes ap-stamp{from{transform:scale(1.2)}to{transform:none}}
.funnel-summary dd{color:var(--cotton);font-weight:500;font-size:var(--fs-ui);line-height:1.4}
.funnel-summary dd.is-empty{color:var(--mist);font-weight:400}
.funnel-summary [hidden]{display:none}
.summary-note{margin-top:var(--s4);color:var(--mist);font-size:var(--fs-small);line-height:1.5}
@media (max-width:599px){.summary-seal{width:72px;height:72px}.funnel-summary .seal{--seal:72px}}

/* honeypot: out of sight and out of the tab order */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}