/* ---- Migraine characters (site/partials/character-*.html) ---- */
.character { display: block; width: 100%; height: auto; overflow: visible; }
.fx-bolt { transform-box: fill-box; transform-origin: center; animation: bolt-flash 2.4s ease-in-out infinite; }
.fx-bolt-2 { animation-delay: 1.2s; }
.fx-throb { animation: throb 1.6s ease-in-out infinite; }
.fx-aura polyline { stroke-dasharray: 6 6; animation: aura-shimmer 1.8s linear infinite; }
.fx-spark, .fx-zzz { animation: float-up 3s ease-in-out infinite; }
.fx-swirl { transform-box: fill-box; transform-origin: center; animation: swirl 4s linear infinite; }
.fx-sun { transform-box: fill-box; transform-origin: center; animation: sun-turn 18s linear infinite; }
.fx-steam { animation: float-up 2.4s ease-in-out infinite; }
@keyframes bolt-flash { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .35; transform: scale(.9); } }
@keyframes throb { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes aura-shimmer { to { stroke-dashoffset: -24; } }
@keyframes float-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes swirl { to { transform: rotate(360deg); } }
@keyframes sun-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-bolt, .fx-throb, .fx-aura polyline, .fx-spark, .fx-zzz, .fx-swirl, .fx-sun, .fx-steam { animation: none; }
}

/* Home hero scene: the journey from a migraine to a better day */
.hero-scene { position: relative; }
.hero-scene .hero-art svg { border-radius: var(--radius-lg); }
.hero-cast { position: absolute; inset: auto 0 15% 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 6%; pointer-events: none; }
.hero-cast .character { width: 34%; max-width: 170px; filter: drop-shadow(0 6px 10px rgb(14 42 92 / 18%)); }
.hero-cast .cast-after { width: 38%; max-width: 190px; }
.hero-cast .cast-after .character { width: 100%; max-width: none; }
.hero-cast-arrow { flex: 1; align-self: center; margin: 0 2%; height: 6px; border-radius: 999px; background: repeating-linear-gradient(90deg, #ffffff 0 14px, transparent 14px 26px); opacity: .9; }

/* Characters beside a section heading or in a guide hero */
.with-character { display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 18vw, 190px); gap: 1.5rem; align-items: center; }
.with-character > .character, .with-character > .character-wrap { width: 100%; }
.condition-hero .wrap.with-character { align-items: start; }
@media (max-width: 640px) {
  .with-character { grid-template-columns: minmax(0, 1fr) 96px; gap: 1rem; }
}

/* Our focus: colourful aim cards with a character each */
.aims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.aim { --c: var(--blue); display: grid; gap: .7rem; align-content: start; padding: 1.4rem 1.4rem 1.6rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-top: 8px solid var(--c); }
.aim .character { width: 96px; }
.aim h3 { font-size: 1.2rem; }
.aim-num { font: 800 .95rem var(--font-display); color: var(--c); letter-spacing: .04em; text-transform: uppercase; }
.aim-blue { --c: var(--blue); } .aim-teal { --c: var(--teal); } .aim-green { --c: var(--green); } .aim-sun { --c: var(--sun); }
.aim-sun .aim-num { color: var(--ink); }
@media (max-width: 1000px) { .aims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aims { grid-template-columns: 1fr; } }

/* Stages explorer */
.stage-explorer { display: grid; gap: 1.25rem; }
.stage-explorer-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.stage-explorer-tabs button { --c: var(--blue); flex: 1 1 9rem; min-height: 3rem; padding: .6rem 1rem; border-radius: 999px; border: 2px solid var(--c); background: var(--surface); color: var(--ink); font: 700 1rem var(--font-display); cursor: pointer; }
.stage-explorer-tabs button[aria-selected="true"] { background: var(--c); color: #ffffff; }
.stage-explorer-tabs button:nth-child(1) { --c: var(--teal); }
.stage-explorer-tabs button:nth-child(2) { --c: var(--blue); }
.stage-explorer-tabs button:nth-child(3) { --c: var(--violet); }
.stage-explorer-tabs button:nth-child(4) { --c: var(--green); }
.stage-panels { display: grid; gap: 1rem; }
.stage-panel { --c: var(--blue); display: grid; grid-template-columns: clamp(110px, 22vw, 220px) minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: clamp(1.1rem, 3vw, 2rem); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 2px solid color-mix(in srgb, var(--c) 40%, var(--line)); }
.stage-panel:nth-child(1) { --c: var(--teal); }
.stage-panel:nth-child(2) { --c: var(--blue); }
.stage-panel:nth-child(3) { --c: var(--violet); }
.stage-panel:nth-child(4) { --c: var(--green); }
.stage-panel h3 { font-size: var(--step-2); }
.stage-panel .stage-when { font: 700 1rem var(--font-display); color: var(--c); }
.stage-panel ul { margin: .5rem 0 0; }
.stage-explorer-nav { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 640px) { .stage-panel { grid-template-columns: 1fr; } .stage-panel .character { max-width: 140px; } }

/* Workspace triggers: tap a trigger to see the fix */
.trigger-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.trigger-card { --c: var(--teal); border-radius: var(--radius); background: var(--surface); border: 2px solid color-mix(in srgb, var(--c) 45%, var(--line)); overflow: hidden; }
.trigger-card:nth-child(3n+2) { --c: var(--blue); }
.trigger-card:nth-child(3n) { --c: var(--green); }
.trigger-card summary { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.1rem; cursor: pointer; font: 700 1.05rem var(--font-display); color: var(--ink); list-style: none; min-height: 3.25rem; }
.trigger-card summary::-webkit-details-marker { display: none; }
.trigger-card summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; color: var(--c); }
.trigger-card[open] summary::after { content: "–"; }
.trigger-card[open] summary { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.trigger-emoji { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.trigger-emoji svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.trigger-fix { padding: .25rem 1.1rem 1.1rem; display: grid; gap: .4rem; }
.trigger-fix p { margin: 0; }
.trigger-fix .fix-label { font-weight: 700; color: var(--c); }
@media (max-width: 900px) { .trigger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trigger-grid { grid-template-columns: 1fr; } }

/* Application help: quick check and documents checklist */
.quick-check, .doc-checklist { display: grid; gap: 1rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--radius-lg); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); }
.quick-check { border-color: var(--blue); }
.doc-checklist { border-color: var(--green); }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tick-list label { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius); background: var(--bg); border: 1.5px solid var(--line); cursor: pointer; }
.tick-list input { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: .1rem; accent-color: var(--green); }
.tick-list label:has(input:checked) { border-color: var(--green); background: var(--tint-green); }
.tick-list .doc-name { font-weight: 700; color: var(--ink); display: block; }
.tick-list .doc-hint { color: var(--muted); font-size: .95rem; display: block; }
.doc-badge { display: inline-block; margin-left: .4rem; padding: .05rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; vertical-align: middle; }
.doc-badge-req { background: var(--sun-soft); color: var(--ink); border: 1px solid var(--sun); }
.doc-badge-help { background: var(--tint-teal); color: var(--ink); border: 1px solid var(--teal); }
.check-result { padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--bg); border-left: 6px solid var(--line); font-weight: 700; }
.check-result.is-yes { border-left-color: var(--green); background: var(--tint-green); }
.check-result.is-partial { border-left-color: var(--sun); background: var(--tint-sun); }
.doc-progress { display: grid; gap: .4rem; font-weight: 700; color: var(--ink); }
.doc-progress progress { width: 100%; height: .9rem; accent-color: var(--green); }
.help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: help; }
.help-step { --c: var(--blue); position: relative; display: grid; gap: .4rem; padding: 1.2rem 1.3rem 1.3rem 4.4rem; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 8%, var(--surface)); border-left: 6px solid var(--c); counter-increment: help; }
.help-step::before { content: counter(help); position: absolute; left: 1.1rem; top: 1.1rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--c); color: #ffffff; font: 800 1.1rem var(--font-display); }
.help-step:nth-child(6n+2) { --c: var(--teal); } .help-step:nth-child(6n+3) { --c: var(--green); } .help-step:nth-child(6n+4) { --c: var(--sun); } .help-step:nth-child(6n+5) { --c: var(--violet); } .help-step:nth-child(6n) { --c: var(--coral); }
.help-step:nth-child(6n+4)::before { color: var(--ink); }
.faq { display: grid; gap: .6rem; }
.faq details { border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); }
.faq summary { padding: 1rem 1.2rem; cursor: pointer; font: 700 1.05rem var(--font-display); color: var(--ink); }
.faq details > div { padding: 0 1.2rem 1.1rem; display: grid; gap: .5rem; }

/* Sponsors: logo grid on the home page and How we raise funds. Add a logo with
   an li.sponsor holding an img of the logo, saved in site/assets/sponsors/ */
.sponsor-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.sponsor { display: flex; align-items: center; justify-content: center; min-height: 6.5rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sponsor img { display: block; max-width: 100%; max-height: 4rem; width: auto; height: auto; object-fit: contain; }
.sponsor-empty { border-style: dashed; color: var(--muted); font-weight: 700; text-align: center; }
.section-head.with-character { max-width: none; }
.section-head.with-character > div { display: grid; gap: .75rem; max-width: 60ch; }
.page-hero .with-character > .character { max-width: 200px; justify-self: end; }

/* ---- Contact page (site/pages/contact.html) and the top bar contact links */
.utility-note a { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.utility-note a:hover { color: #ffffff; }
.utility-note a[aria-current] { text-decoration-color: var(--sun); }
.contact-layout { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
.contact-card { border-top-color: var(--teal); }
.contact-aside { display: grid; gap: 1.25rem; }
.contact-aside .fact-panel { border-top-color: var(--sun); }
.contact-urgent { background: color-mix(in srgb, var(--coral) 9%, var(--surface)); border-left: 6px solid var(--coral); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.contact-urgent h2 { font-size: var(--step-1); margin: 0 0 0.4rem; }
.contact-done { display: grid; gap: 0.6rem; }
.contact-done[hidden] { display: none; }
.contact-done h2 { font-size: var(--step-1); margin: 0; }
.contact-done p { font-weight: 400; }
.contact-done .btn { justify-self: start; }
.contact-count { margin: 0; font-size: 0.9em; }
.optional { font-weight: 400; color: var(--muted); }
.contact-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-card [aria-invalid="true"] { border-color: var(--danger); }

/* ---- Printable migraine diaries (application help page) */
.diary-band { background: linear-gradient(135deg, var(--tint-blue), var(--tint-green)); }
.diary-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.diary-card { display: grid; gap: 0.6rem; align-content: start; background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem 1.5rem 1.6rem; box-shadow: var(--shadow); border-top: 6px solid var(--blue); }
.diary-card-green { border-top-color: var(--green); }
.diary-card h3 { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); margin: 0; }
.diary-kicker { margin: 0; font-weight: 700; font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.diary-card-green .diary-kicker { color: var(--green); }
.diary-card .btn { justify-self: start; margin-top: 0.4rem; }
.diary-size { font-weight: 400; }
.diary-note { margin-top: 1.25rem; }

/* ---- Trustee Mailbox: choosing a shared mailbox (applications@ or info@) */
.mail-box-switch select { width: auto; min-height: 42px; padding: 0.35rem 0.7rem; }
.mail-tag-box { background: var(--tint-teal); color: var(--teal); }

/* ---- Donate page (site/pages/donate.html) */
.nav-donate { color: var(--coral); font-weight: 700; }
.donate-layout { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .donate-layout { grid-template-columns: minmax(0, 1fr); } }
.donate-card { border-top-color: var(--sun); }
.donate-aside { display: grid; gap: 1.25rem; }
.donate-safe { border-top-color: var(--green); }
.donate-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 0.6rem; min-width: 0; }
.donate-choice legend { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--step-1); margin-bottom: 0.5rem; }
.segmented, .amount-grid { display: grid; gap: 0.6rem; }
.segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amount-grid { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
.segmented label, .amount-grid label { position: relative; display: block; }
.segmented input, .amount-grid input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span, .amount-grid span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0.5rem 0.75rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.segmented input:checked + span, .amount-grid input:checked + span { border-color: var(--ink); background: var(--sun-soft); box-shadow: inset 0 0 0 1px var(--ink); }
.segmented input:focus-visible + span, .amount-grid input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.donate-other[hidden] { display: none; }
.donate-impact { margin: 0; color: var(--green); font-weight: 700; min-height: 1.5em; }
.donations-table .chip { margin-left: 0.4rem; }
.check-field[hidden] { display: none; }

/* Home page donation band */
.home-donate { padding-bottom: 0; }
.donate-band .eyebrow { color: #1d2b44; }
.donate-band-action { display: grid; gap: 0.9rem; flex: 0 1 24rem; min-width: 0; }
.donate-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.donate-quick a { display: flex; align-items: center; justify-content: center; min-height: 54px; border: 2px solid transparent; border-radius: var(--radius); background: rgba(255, 255, 255, 0.9); color: #1d2b44; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.donate-quick a:hover { background: #ffffff; border-color: #1d2b44; }
.donate-quick a:focus-visible { outline: 3px solid #1d2b44; outline-offset: 2px; }
.donate-band .button-row .btn { flex: 1 1 auto; }
.donate-band-note { margin: 0; font-size: var(--step--1); }

/* Site engagement: the founder's Restart visit figures button */
.engagement-restart { display: grid; gap: 0.5rem; justify-items: end; max-width: 24rem; text-align: right; }
.engagement-restart p { margin: 0; }
@media (max-width: 640px) { .engagement-restart { justify-items: start; text-align: left; } }