/* ============================================================
 *  shared/action-page.css: The Dad Shift's standard action page look
 *  (agreed 20 Oct 2026, first used on /paternity-leave-petition).
 *
 *  - Fast track flow: header with logo + step progress, one step on
 *    screen at a time ([data-slide] sections), form card, quiet grey
 *    second-choice buttons, coloured share/follow buttons.
 *  - Phones: crisp off-white page (#F9FAF9), yellow main buttons.
 *  - Desktop (760px+): yellow "top glow" behind the page, each step in
 *    one raised white card set high on the page; main buttons and the
 *    counter bar go black on the yellow.
 *  - Dad Shift yellow #F6CD45, flat buttons, 8px corners (--r), Figtree.
 *
 *  Pair with shared/action-page.js (progress pills, step transition,
 *  toast, Plausible helper, bot check). Page-specific rules belong in the page.
 *  No em dashes in any copy (Alex's rule).
 * ============================================================ */
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

/* The Fast track design (agreed 19 Oct 2026): Dad Shift yellow, flat
   buttons, 8px corners, progress in the header, big-number counter. */
:root {
  --y: #F6CD45; --ink: #141414; --bg: #F9FAF9; --card: #FFFFFF; --line: #DADDD5;
  --mute: #5A5F58; --ok: #1F8A3B; --warn: #FFF6CC; --orange: #EB5027; --track: #E3E6DE;
  --grey-btn: #E6E9E2; --r: 8px; --err: #B3261E;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Figtree", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2 { font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; line-height: 1.06; }
a { color: inherit; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #2E6BE6; outline-offset: 2px; }

/* Header: logo + progress (no Donate button on action pages). */
.top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .in { padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1080px; margin: 0 auto; }
.top img { height: 34px; width: auto; display: block; flex: none; }
.hp { display: grid; gap: 4px; justify-items: end; min-width: 0; }
.hp .lbl { font-size: 12px; font-weight: 700; white-space: nowrap; }
.hp .lbl b { font-weight: 900; }
.hp .segs { display: grid; grid-template-columns: repeat(4, 22px); gap: 4px; }
.hp .segs i { height: 6px; border-radius: 99px; background: var(--track); display: block; }
.hp .segs i.done { background: var(--ok); }
.hp .segs i.now { background: var(--y); }
.hp .names { display: none; }

.wrap { padding: 20px 16px 40px; display: grid; gap: 14px; max-width: 1080px; margin: 0 auto; }
/* Kicker: the small label above the headline, e.g. "Petition to the UK
   Government". Plain, smaller grey capitals, no fill (Alex, 20 Oct 2026,
   option 6 "muted grey"; it used to be black on the page's accent). */
.kicker { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.5; color: var(--mute); }
.kicker span { color: inherit; }
.eye { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin: 0; }
/* Headline size "4b" (Alex, 20 Oct 2026): the size follows the width of
   the headline's column (10.5% of it, between 30px and 52px), so the
   lines reach most of the way across instead of stopping halfway, with
   balanced lines (text-wrap: balance, set above). Never more than 3 lines:
   shared/action-page.js shrinks a longer headline until it fits in 3.
   cqi = 1% of the nearest container's width; .two-col .left is the
   container. Old browsers without cqi keep the 30px line. */
.two-col .left { container-type: inline-size; }
h1 { font-size: 30px; font-size: clamp(30px, 10.5cqi, 52px); line-height: 1.05; letter-spacing: -.025em; }
h1 mark { background: linear-gradient(transparent 58%, var(--y) 58%); color: inherit; padding: 0 .04em; }
.lead { margin: 0; font-size: 16px; }
details.more { font-size: 15px; }
details.more summary { font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; display: inline-block; padding: 12px 14px; margin: -12px -14px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " +"; }
details.more[open] summary::after { content: " \2212"; }
details.more div { display: grid; gap: 8px; padding-top: 8px; }
details.more p { margin: 0; }
/* Phones: very slightly shorter than 16:9 so the form starts higher (J13,
   20 Oct 2026). Desktop sets its own ratio below. */
.photo { margin: 0; overflow: hidden; border-radius: calc(var(--r) * 1.33); background: #ddd; max-width: 100%; aspect-ratio: 16/8.5; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Spacing at the top of the page: option B (Alex, 20 Oct 2026). The left
   column's gaps are set per element so each can differ. */
.two-col { display: grid; gap: 20px; }
.two-col .left { display: grid; gap: 0; align-content: start; min-width: 0; }
.two-col .left > .photo { margin-bottom: 16px; }
.two-col .left > .kicker { margin-bottom: 12px; }
.two-col .left > h1 { margin-bottom: 12px; }
.two-col .left > .lead { margin-bottom: 14px; }
.two-col .right { display: grid; gap: 18px; align-content: start; min-width: 0; }

/* Counter: big number */
.c1 { display: grid; gap: 10px; }
.c1 .nums { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.c1 .n { font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.c1 .n small { font-size: 14px; font-weight: 700; letter-spacing: 0; margin-left: 4px; }
.c1 .goal { font-size: 13px; font-weight: 700; color: var(--mute); }
.c1 .bar { height: 10px; background: var(--track); border-radius: 99px; overflow: hidden; }
.c1 .bar i { display: block; height: 100%; width: 0; background: var(--y); border-radius: 99px; }

/* The form card: what your eye lands on */
.card { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--r) * 1.33); padding: 14px 14px 16px; display: grid; gap: 9px; box-shadow: 0 1px 2px rgba(0,0,0,.04); min-width: 0; }
.ctitle { font-size: 22px; font-weight: 900; letter-spacing: -.015em; margin: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field { display: grid; gap: 3px; min-width: 0; }
label { font-weight: 700; font-size: 13.5px; }
label small { font-weight: 500; color: var(--mute); }
input[type=text], input[type=email], input[type=tel] { width: 100%; height: 42px; padding: 0 12px; border: 1.5px solid #8A8F86; background: #fff; border-radius: calc(var(--r) * .83); font: 500 16px/1 "Figtree", Arial, sans-serif; color: var(--ink); }
input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(20,20,20,.08); }
.field.bad input { border-color: var(--err); }
.field .err { color: var(--err); font-size: 12.5px; font-weight: 700; margin: 0; display: none; }
.field.bad .err { display: block; }
.hint { font-size: 12px; color: var(--mute); margin: 0; line-height: 1.35; }
.optq { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.optq legend { padding: 0; }
.optq .q1 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; }
.optq .q2 { margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.4; }
.req { color: #D93025; }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yn label { height: 40px; border: 1.5px solid #8A8F86; background: #fff; border-radius: calc(var(--r) * .83); font: 700 15px/1 "Figtree", Arial, sans-serif; display: grid; place-items: center; cursor: pointer; position: relative; }
.yn input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.yn label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.yn label:has(input:focus-visible) { outline: 3px solid #2E6BE6; outline-offset: 2px; }
.optq.bad .yn label { border-color: var(--err); }
/* Fallback for browsers without :has() (set by shared/action-page.js). */
.yn label.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.optq .err { color: var(--err); font-size: 12.5px; font-weight: 700; margin: 0; display: none; }
.optq.bad .err { display: block; }
.sure { background: var(--warn); border-radius: calc(var(--r) * .67); padding: 8px 10px; font-size: 13px; margin: 0; }
.cta { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 52px; background: var(--y); color: var(--ink); border: 0; border-radius: var(--r); padding: 12px 16px; font: 900 18px/1.1 "Figtree", Arial, sans-serif; text-align: center; text-decoration: none; }
.cta:disabled { opacity: .6; cursor: wait; }
.cta.second { background: var(--grey-btn); min-height: 46px; font-size: 16px; font-weight: 700; }
.fine { font-size: 12.5px; color: var(--mute); margin: 0; }
.formerr { color: var(--err); font-weight: 700; font-size: 14px; margin: 0; }
/* Padding = a thumb-sized tap area (about 44px tall) with no visible
   change (J13, 20 Oct 2026). */
.textlink { background: none; border: 0; color: var(--ink); font: 700 15px/1 "Figtree", Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; padding: 14px 18px; margin: -8px -12px; justify-self: center; }
.who { background: #F1F2EE; border-radius: var(--r); padding: 10px 12px; font-size: 15px; display: grid; gap: 2px; }
.who b { font-weight: 800; }
.who .textlink { justify-self: start; padding: 10px 0; margin: -6px 0 -10px; font-size: 14px; }

/* Follow-up steps: one centred column */
/* Later steps (Alex, 20 Oct 2026): the same spacing on every step, in the
   sign step's rhythm (spacing B). Phone: small label to heading 12px,
   heading to its intro 12px, everything else 18px apart. Desktop: 16px,
   18px and 22px. A wrapper round a heading and its intro (e.g. the donate
   step's two versions) uses the same spacing inside it.
   Step headings are about 82% of the sign step's headline: 8.6% of the
   column (26px to 42px; about 28px at 360px, 33px at 412px, 42px on
   desktop), balanced, and never more than 3 lines (shared/action-page.js
   shrinks a longer one). */
.solo { max-width: 560px; margin: 0 auto; width: 100%; display: grid; gap: 18px; container-type: inline-size; }
.solo > div:has(> h2) { display: grid; gap: inherit; }
.solo > h2, .solo > div > h2 { font-size: 26px; font-size: clamp(26px, 8.6cqi, 42px); line-height: 1.08; letter-spacing: -.02em; }
.solo h2:has(+ p) { margin-bottom: -6px; }
.solo > :is(.kicker, .stepnote):has(+ h2) { margin-bottom: -6px; }
.solo p.body { margin: 0; font-size: 16px; }
.solo p.ask { margin: 0; font-size: 17px; font-weight: 800; }
/* The FundraiseUp form is an inline box (max 376px): centre it in the column. */
.fru-slot { min-height: 60px; text-align: center; }
.fru-slot > * { margin-left: auto; margin-right: auto; }
.chan { display: grid; gap: 8px; }
.chan .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chan .one { display: grid; }
.chan.follow { grid-template-columns: 1fr 1fr; }
/* Step change: the old step slides up and out, the new one slides up into place. */
@keyframes stepOut { to { opacity: 0; transform: translateY(-18px); } }
@keyframes stepIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
[data-slide].step-out { animation: stepOut .14s ease-in forwards; pointer-events: none; }
[data-slide].step-in { animation: stepIn .26s cubic-bezier(.2,.8,.2,1) both; }
.sb { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 52px; border: 0; border-radius: var(--r); font: 800 17px/1 "Figtree", Arial, sans-serif; color: #fff; text-decoration: none; }
.sb svg { width: 20px; height: 20px; flex: none; }
.sb.big { min-height: 56px; font-size: 18px; }
.sb.wa { background: #25D366; color: #06210D; }
/* Share colours darkened so white text passes WCAG AA, 4.5:1 (bug check
   fix 24, Alex, 20 Oct 2026). Text box and Yes/No outlines: #8A8F86, 3.3:1. */
.sb.ig { background: linear-gradient(90deg, #D62976, #8134AF); }
.sb.fb { background: #166FE5; }
.sb.li { background: #0A66C2; }
.sb.em { background: #C8401C; }
.sb.cp { background: #6B7178; }
.sb.tt { background: #000; }
.sb.x { background: #000; }
/* Tally shows its cover photo and logo at the top of every page of
   the survey, and no embed option hides them, so the slot clips that
   band off. Measured 19 Oct 2026 at 343px and 560px wide: the logo ends
   250px down and the survey text starts at 314px, so trim 280px. If the
   cover or logo is ever removed in Tally, set --tally-trim to 0px. */
.tally-slot { min-height: 320px; overflow: hidden; --tally-trim: 280px; }
.tally-slot iframe { width: 100%; border: 0; display: block; margin-top: calc(-1 * var(--tally-trim)); }
/* Bot check (ActionPage.botCheck, 20 Oct 2026). The widget is invisible
   for nearly everyone; when Turnstile needs a tick, the box shows by the
   button with a short line under it. While a press waits for the check
   (or the server), the button shows a spinner and is disabled. If the
   check can't run, a short message and a Try again button show under the
   button. */
.ap-bot { display: flex; justify-content: center; min-width: 0; }
.ap-bot:empty { display: none; }
.ap-bot:focus { outline: none; }
.ap-bot-tick { margin: 0; font-size: 14px; font-weight: 800; text-align: center; }
.ap-bot-fail { display: grid; gap: 8px; justify-items: start; background: var(--warn); border-radius: calc(var(--r) * .67); padding: 10px 12px; }
.ap-bot-fail p { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; }
.ap-bot-retry { background: var(--ink); color: #fff; border: 0; border-radius: calc(var(--r) * .83); padding: 9px 16px; font: 800 15px/1 "Figtree", Arial, sans-serif; }
.ap-spin { display: inline-block; flex: none; width: 1em; height: 1em; border: .16em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: apSpin .7s linear infinite; }
@keyframes apSpin { to { transform: rotate(360deg); } }
.cta.ap-busy:disabled { opacity: .85; cursor: progress; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 20; max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; }
footer { padding: 24px 16px 40px; text-align: center; font-size: 13px; color: var(--mute); }

@media (min-width: 760px) {
  .top .in { padding: 12px 24px; }
  .top .in::after { content: ""; width: 120px; flex: none; }
  .top img { height: 46px; }
  .hp { gap: 6px; justify-items: center; flex: 1; }
  .hp .lbl, .hp .segs { display: none; }
  .hp .names { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .hp .names li { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 700; color: var(--mute); background: #F1F2EE; }
  .hp .names li b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #fff; color: var(--mute); }
  .hp .names li.done { color: var(--ink); }
  .hp .names li.done b { background: var(--ok); color: #fff; }
  .hp .names li.now { background: var(--y); color: var(--ink); }
  .hp .names li.now b { background: var(--ink); color: var(--y); }
  .wrap { padding: 36px 24px 56px; gap: 18px; }
  .lead { font-size: 18px; }
  .card { padding: 20px 22px 22px; gap: 11px; }
  .ctitle { font-size: 26px; }
  .two-col { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; }
  .two-col .left > .kicker { margin-bottom: 16px; }
  .two-col .left > h1 { margin-bottom: 18px; }
  .two-col .left > .lead { margin-bottom: 18px; }
  .two-col .left > .photo { order: 9; margin: 22px 0 0; aspect-ratio: 16/10; }
  .solo { padding-top: 8px; gap: 22px; }
  .solo h2:has(+ p) { margin-bottom: -4px; }
  .chan { grid-template-columns: 1fr 1fr; }
  .chan .sb.big { grid-column: 1 / -1; }
  .chan .two { display: contents; }
  .chan .one { grid-column: 1 / -1; }

  /* Desktop look chosen 20 Oct 2026: a soft yellow "top glow" behind the
     page, and each step's content in one raised white card set high on
     the page so the ask sits above the fold. On the yellow page the main
     buttons and counter bar are black, as in the prototype Alex picked. */
  /* The glow colours can be changed per page with --glow-1..4 (e.g. a
     joint page in a partner's accent); these are the Dad Shift ones. */
  body { background: var(--glow-3, #F6CD45) radial-gradient(120% 70% at 50% 0%, var(--glow-1, #FFF27A) 0%, var(--glow-2, #FFE04D) 35%, var(--glow-3, #F6CD45) 70%, var(--glow-4, #EFC032) 100%) fixed; }
  .wrap { padding: 24px 24px 56px; }
  .wrap > .two-col, .wrap > .solo { background: #fff; border-radius: calc(var(--r) * 2); padding: 34px 40px 38px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 48px rgba(20,20,20,.10); }
  .wrap > .solo { max-width: 640px; margin-top: 4px; }
  .wrap > .two-col { grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; }
  .two-col .card { border: 0; box-shadow: none; padding: 0; background: transparent; }
  .cta:not(.second) { background: var(--ink); color: #fff; }
  .c1 .bar i { background: var(--ink); }
  footer { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* The busy spinner keeps turning, slowly: it's how people know the page is working. */
  .ap-spin { animation: apSpin 1.6s linear infinite !important; }
}