/* ==========================================================================
   IADB Sunday School Registration — Form, Calculator, Signature, Receipt
   --------------------------------------------------------------------------
   Loaded on the Education template only, with 'icdb-main' as a dependency, so
   every rule here resolves AFTER assets/css/main.css and can refine the shared
   .form-* / .btn / .card primitives without !important (except where noted).

   Mobile-first: the base rules describe the phone layout (most parents fill
   this in one-handed); min-width queries widen it. main.css already collapses
   .form-row to a single column at max-width 768px, so that is left alone.

   Every colour, space, radius, shadow and timing comes from the :root design
   tokens in style.css. The only literal values are documented in place.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Local aliases — all derived from the theme tokens
   -------------------------------------------------------------------------- */
:root {
    /* Focus ring. --color-secondary (#C8972E) is only ~2.4:1 on white, which
       fails WCAG 2.2 SC 1.4.11 for a focus indicator, so the ring itself uses
       --color-secondary-dark (#A67B1E, ~3.6:1) with a soft gold halo behind. */
    --iadb-focus: var(--color-secondary-dark);
    --iadb-focus-halo: rgba(200, 151, 46, 0.28);   /* --color-secondary @ 28% */

    /* Error palette. No light-error / error-text token exists in style.css.
       The tints are --color-error (#E74C3C) at low alpha; the text colour is
       the same #721C24 main.css already uses for .form-message--error
       (~9:1 on the tint, comfortably AA for body text). */
    --iadb-error-tint: rgba(231, 76, 60, 0.08);
    --iadb-error-tint-strong: rgba(231, 76, 60, 0.16);
    --iadb-error-text: #721C24;

    /* Positive/supportive tint — --color-accent (#4A7C6F) @ 8%, which resolves
       to roughly #F4F8F7 over --color-white. Three users: a ticked
       acknowledgement (section 8), the financial-aid payment panel and the
       financial-aid calculator caveat (sections 12-13). Measured on that
       resolved ground: --color-primary 12.8:1, --color-text-light 6.8:1 — both
       clear of the 4.5:1 SC 1.4.3 floor at the small sizes used here. */
    --iadb-accent-tint: rgba(74, 124, 111, 0.08);

    /* Contrast note, same reasoning as the focus ring above: --color-text-muted
       (#918981) measures only ~3.4:1 on --color-white, ~3.4:1 on
       --color-off-white and ~3.0:1 on --color-cream, so it fails WCAG 2.2
       SC 1.4.3 for anything under 18.66px bold / 24px regular. Every hint,
       note, sub-line and small label in this file is well under that, so they
       all use --color-text-light (#5C564E — ~7.2:1 on white, ~6.8:1 on
       off-white, ~6.2:1 on cream) instead. --color-text-muted is deliberately
       not referenced anywhere in this stylesheet. */

    /* Minimum tap target (iOS HIG / WCAG 2.2 SC 2.5.8 target size). */
    --iadb-tap: 44px;
}


/* --------------------------------------------------------------------------
   1. [hidden] has to win
   main.css sets .btn { display: inline-flex } and this file sets display on
   several containers; both out-rank the UA sheet's [hidden] rule. Without
   this, #iadb-add-student, #iadb-zelle-copy, #iadb-print, #iadb-calc, #iadb-sig
   and every .iadb-field-error would be visible before JS ran. Scoped to the
   registration UI so nothing else on the site is affected.
   -------------------------------------------------------------------------- */
#iadb-register [hidden],
#iadb-receipt [hidden],
.iadb-form [hidden],
.iadb-receipt [hidden] {
    display: none !important;
}


/* --------------------------------------------------------------------------
   2. Section shell + card
   -------------------------------------------------------------------------- */
#iadb-register,
#iadb-receipt,
.iadb-anchor {
    /* Clears the sticky header when the success/error redirect jumps here. */
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.iadb-anchor {
    display: block;
    height: 0;
    overflow: hidden;
}

/* The form lives inside .card, whose hover lift is meant for teaser cards.
   A very tall document that jumps 4px when the pointer enters it is not what
   we want, so the lift is cancelled for this card only. */
#iadb-register .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Same cancellation when the receipt renders in its own card (:has() is in a
   separate rule so browsers without support keep the id rule above). */
.card:has(.iadb-form):hover,
.card:has(.iadb-receipt):hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

#iadb-register .card__body {
    padding: var(--space-lg);
}


/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.iadb-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.iadb-hint {
    margin: var(--space-xs) 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.iadb-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    margin: var(--space-xs) 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--iadb-error-text);
}

.iadb-field-error::before {
    content: '\26A0';           /* warning sign */
    flex-shrink: 0;
    font-weight: 700;
    line-height: 1.45;
}


/* --------------------------------------------------------------------------
   4. Form shell and numbered sections
   -------------------------------------------------------------------------- */
.iadb-form {
    display: block;
}

.iadb-form fieldset {
    min-width: 0;               /* stops long legends forcing horizontal scroll */
    border: 0;
}

.iadb-form__section {
    padding-top: var(--space-lg);
}

.iadb-form__section:first-of-type {
    padding-top: 0;
}

.iadb-form__section + .iadb-form__section {
    margin-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.iadb-form__section-title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

/* Mirrors .section-heading__divider so the form reads as part of the page. */
.iadb-form__section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin-top: var(--space-sm);
    background: linear-gradient(90deg, var(--color-secondary), var(--color-cta));
    border-radius: var(--radius-full);
}

.iadb-form__intro {
    margin: 0 0 var(--space-md);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-text-light);
}


/* --------------------------------------------------------------------------
   5. Controls — 44px targets, 16px text, visible focus
   -------------------------------------------------------------------------- */
.iadb-form .form-group {
    margin-bottom: var(--space-md);
}

.iadb-form .form-label {
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.iadb-form .form-input,
.iadb-form .form-select,
.iadb-form .form-textarea {
    min-height: var(--iadb-tap);
    padding: 0.6rem 0.85rem;
    /* 16px: anything smaller makes iOS Safari zoom the page on focus, which
       breaks the one-handed flow. Stepped back down at >=640px. */
    font-size: 1rem;
}

.iadb-form select.form-select {
    padding-right: var(--space-xl);
    background-color: var(--color-white);
    cursor: pointer;
}

.iadb-form input[type="date"] {
    display: block;
    width: 100%;
    /* Mobile Safari sizes date inputs from their content, not the box. */
    min-height: var(--iadb-tap);
}

.iadb-form .form-textarea {
    min-height: 96px;
}

/* Focus. main.css sets outline:none on :focus for inputs, so every focusable
   thing in this UI gets an explicit, higher-contrast replacement ring. */
#iadb-register a:focus-visible,
#iadb-register button:focus-visible,
#iadb-register input:focus-visible,
#iadb-register select:focus-visible,
#iadb-register textarea:focus-visible,
#iadb-register [tabindex]:focus-visible,
#iadb-receipt a:focus-visible,
#iadb-receipt button:focus-visible,
.iadb-receipt a:focus-visible,
.iadb-receipt button:focus-visible {
    outline: 3px solid var(--iadb-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--iadb-focus-halo);
}

.iadb-form .form-input:focus-visible,
.iadb-form .form-select:focus-visible,
.iadb-form .form-textarea:focus-visible {
    border-color: var(--iadb-focus);
    outline-offset: 1px;
}

/* Invalid state, set by Agent C (and by the server-rendered error state). */
.iadb-form [aria-invalid="true"] {
    border-color: var(--color-error);
    background-color: var(--iadb-error-tint);
}

.iadb-form [aria-invalid="true"]:focus-visible {
    outline-color: var(--color-error);
    border-color: var(--color-error);
    box-shadow: 0 0 0 5px var(--iadb-error-tint-strong);
}


/* --------------------------------------------------------------------------
   6. Error summary — must be unmissable
   -------------------------------------------------------------------------- */
.iadb-error-summary {
    margin-bottom: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    color: var(--iadb-error-text);
    background-color: var(--iadb-error-tint);
    border: 2px solid var(--color-error);
    border-left-width: 6px;
    border-radius: var(--radius-md);
}

.iadb-error-summary:focus,
.iadb-error-summary:focus-visible {
    outline: 3px solid var(--color-error);
    outline-offset: 3px;
}

.iadb-error-summary__title {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0 0 var(--space-sm);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--iadb-error-text);
}

.iadb-error-summary__title::before {
    content: '\26A0';
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}

.iadb-error-summary__list {
    list-style: disc;           /* main.css strips list markers globally */
    margin: 0;
    padding-left: var(--space-lg);
}

.iadb-error-summary__list li {
    margin: 0;
    line-height: 1.5;
}

.iadb-error-summary__list a {
    display: inline-block;
    padding: 0.5rem 0;          /* keeps the tap target close to 44px tall */
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--iadb-error-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.iadb-error-summary__list a:hover,
.iadb-error-summary__list a:focus {
    color: var(--color-primary-dark);
}

.iadb-error-summary p {
    margin: 0 0 var(--space-sm);
    font-size: 0.92rem;
    line-height: 1.55;
}


/* --------------------------------------------------------------------------
   7. Students repeater
   -------------------------------------------------------------------------- */
.iadb-students {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.iadb-student-row {
    padding: var(--space-md);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-200);
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-md);
}

.iadb-student-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: var(--iadb-tap);
    margin-bottom: var(--space-sm);
}

.iadb-student-row__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* .iadb-student-row__num needs no rule of its own: it inherits --color-primary
   (13.4:1 on the row's --color-off-white) from the title. Colouring it
   --color-secondary-dark put a 12.8px bold number at 3.6:1, under the 4.5:1
   SC 1.4.3 floor. The row keeps its gold accent through the 4px left border,
   which is a non-text element and only needs 3:1. */

/* Forward-compatibility hook: the template does not currently emit
   .iadb-student-row__fields — no markup anywhere produces that class. Kept so
   that wrapping the three .form-groups later needs no CSS change. */
.iadb-student-row__fields {
    display: grid;
    gap: var(--space-md);
}

.iadb-student-row .form-group:last-child {
    margin-bottom: 0;
}

/* Remove control — a real 44x44 target, not an icon-sized one. */
.iadb-student-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--iadb-tap);
    min-width: var(--iadb-tap);
    padding: 0 var(--space-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--iadb-error-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.iadb-student-remove::before {
    content: '\00D7';           /* multiplication sign */
    font-size: 1.15rem;
    line-height: 1;
}

.iadb-student-remove:hover {
    color: var(--iadb-error-text);
    background-color: var(--iadb-error-tint);
    border-color: var(--color-error);
}

.iadb-add-student {
    width: 100%;
    min-height: var(--iadb-tap);
    margin-top: var(--space-sm);
}

/* Newly appended row — Agent C may add .is-new; harmless if it never does. */
.iadb-student-row.is-new {
    animation: fadeInUp 0.3s ease;
}


/* --------------------------------------------------------------------------
   8. Registration timing — radio group and single-tier statement
   -------------------------------------------------------------------------- */
.iadb-fieldset {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

.iadb-fieldset > legend {
    padding: 0 var(--space-xs);
    margin-bottom: 0;
    font-size: 0.92rem;
    font-weight: 600;
}

/* main.css lays .form-radio-group out as a wrapping row; stacked reads better
   for full-sentence tier labels on a phone. */
.iadb-form .form-radio-group,
.iadb-form .form-checkbox-group {
    flex-direction: column;
    gap: var(--space-sm);
}

.iadb-radio,
.iadb-form .form-radio,
.iadb-checkbox,
.iadb-form .form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    min-height: var(--iadb-tap);
    /* The label, not the input, provides the 44px target. */
    padding: var(--space-sm) var(--space-md);
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast);
}

.iadb-radio + .iadb-radio,
.iadb-checkbox + .iadb-checkbox {
    margin-top: var(--space-sm);
}

.iadb-radio input[type="radio"],
.iadb-checkbox input[type="checkbox"],
.iadb-form .form-radio input[type="radio"],
.iadb-form .form-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0.15rem 0 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.iadb-radio:hover,
.iadb-checkbox:hover {
    border-color: var(--color-secondary);
}

.iadb-radio:focus-within,
.iadb-checkbox:focus-within,
.iadb-form .form-radio:focus-within,
.iadb-form .form-checkbox:focus-within {
    outline: 3px solid var(--iadb-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--iadb-focus-halo);
}

/* Selected states (progressive: ignored where :has() is unsupported). */
.iadb-radio:has(input:checked) {
    background-color: var(--color-cream);
    border-color: var(--color-secondary);
    box-shadow: inset 0 0 0 1px var(--color-secondary);
}

.iadb-checkbox:has(input:checked) {
    background-color: var(--iadb-accent-tint);
    border-color: var(--color-accent);
}

.iadb-checkbox:has(input[aria-invalid="true"]) {
    background-color: var(--iadb-error-tint);
    border-color: var(--color-error);
}

.iadb-tier-static {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    background-color: var(--color-cream);
    border: 1px solid var(--color-gray-200);
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-md);
}

.iadb-tier-static > .form-label {
    margin-bottom: var(--space-xs);
    color: var(--color-text-light);
}

.iadb-tier-static__rate {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   9. Acknowledgements — the 21 policy items
   -------------------------------------------------------------------------- */
.iadb-policy-list {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.iadb-policy-list li {
    position: relative;
    padding: 0.3rem 0 0.3rem var(--space-lg);
    font-size: 0.89rem;
    line-height: 1.5;
    color: var(--color-text-light);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.iadb-policy-list li::before {
    content: '\2713';           /* check mark, same device as .supplies-list */
    position: absolute;
    left: 0;
    top: 0.3rem;
    font-weight: 700;
    color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   10. Learner contract
   -------------------------------------------------------------------------- */
.iadb-contract {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text-light);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.iadb-contract > :first-child {
    margin-top: 0;
}

.iadb-contract > :last-child {
    margin-bottom: 0;
}

.iadb-contract h4,
.iadb-contract__subtitle {
    margin: var(--space-md) 0 var(--space-sm);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.iadb-contract ul,
.iadb-contract ol,
.iadb-contract-list {
    list-style: none;
    display: grid;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md);
    padding: 0;
}

.iadb-contract li {
    position: relative;
    padding-left: var(--space-lg);
}

.iadb-contract li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background-color: var(--color-secondary);
    border-radius: var(--radius-full);
}

.iadb-contract li strong,
.iadb-contract__lead {
    color: var(--color-primary);
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   11. Handbook link
   -------------------------------------------------------------------------- */
.iadb-handbook-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--iadb-tap);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    background-color: var(--color-cream);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

/* NOTE — verified against page-education.php, and neither this comment's
   previous claim nor the template's own comment matches what ships:

     <p>
       <a class="iadb-handbook-link" href="…" target="_blank" rel="noopener noreferrer">
         Student &amp; Parent Handbook 2026–2027 (PDF)
         <span class="iadb-sr-only"> (opens in a new tab)</span>
       </a>
     </p>

   The "opens in a new tab" cue is text for screen readers only. There is no
   <span class="iadb-newtab-icon"> in the template (this comment used to say
   there was, and that this file had dropped a duplicate ::after to avoid
   "… (PDF) ↗↗"), and there is no ::after here either — so the link currently
   has NO visible external-link indicator. That is a template decision, not a
   stylesheet one: putting the arrow back means the template emitting the span,
   at which point the rule below styles it. It is kept, unmatched, for that
   reason rather than deleted. */
.iadb-newtab-icon {
    font-size: 1rem;
    line-height: 1;
}

.iadb-handbook-link:hover {
    color: var(--color-white);
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
}

/* CORRECTION — this comment used to say "the class sits on the wrapping <p>;
   the real link is the <a> inside it". It does not: the template puts
   .iadb-handbook-link on the <a> itself, inside a plain <p>. The hover flip is
   safe anyway, and for a simpler reason than the one that used to be recorded
   here — .iadb-handbook-link:hover (0,2,0) matches the anchor directly and
   out-ranks main.css `a:hover` (0,1,1) on class count, so the label really does
   go white on --color-secondary-dark rather than gold-on-gold.

   The descendant rule below therefore matches nothing today. Kept, not deleted:
   it costs nothing, and it is the guard that stops the white hover colour from
   being lost to a direct `a:hover` match if the chip is ever moved back onto a
   wrapper. Delete it only together with that possibility.

   No :focus-within background flip: the keyboard ring at #iadb-register
   a:focus-visible is painted in --iadb-focus (--color-secondary-dark), the
   same colour the flip would paint the background, which would erase it. */
.iadb-handbook-link a,
.iadb-handbook-link a:hover,
.iadb-handbook-link a:focus {
    color: inherit;
}


/* --------------------------------------------------------------------------
   12. Payment panels
   -------------------------------------------------------------------------- */

/* Panel titles. The template emits all four of them —
   <h4 class="iadb-zelle__title">Paying by Zelle</h4>,
   <h4 class="iadb-frontdesk__title">Paying in person</h4>,
   <h4 class="iadb-aid__title">Requesting Educational Zakat</h4> and
   <h4 class="iadb-calc-fallback__title">What you will owe today</h4> (section 13,
   styled here so the eyebrow lives in one place) — and none of them had a rule.
   The financial-aid panel's title is grouped here rather than getting a rule of
   its own, so all four panel eyebrows keep one definition; see the note on
   .iadb-aid below for the rest of that panel's markup.

   They fell through to main.css `h4 { font-size: 1.1rem; font-weight: 600 }` in
   --font-heading / --color-primary-dark, ~40% larger than the visually identical
   "Goals", "Responsibilities", "Students", "Fees" and "Payment" titles, which
   .iadb-contract h4 and .iadb-receipt h4 normalise to a 0.8rem eyebrow.

   No font-family here on purpose: these are always <h4>, so main.css's
   `h1,…,h6` rule already supplies --font-heading, exactly as .iadb-contract h4
   relies on it.

   The margin is `0 0 var(--space-sm)`, NOT .iadb-contract h4's
   `var(--space-md) 0 var(--space-sm)`. All four are the first child of their
   panel and have no `> :first-child { margin-top: 0 }` guard of the kind
   .iadb-contract carries; in .iadb-zelle (a grid) a top margin would also stack
   on top of the grid gap and push the artwork down. main.css's universal reset
   zeroes the UA heading margins, so without this rule these headings currently
   have no gap under them at all.

   The descendant `h4` halves are the same insurance the .iadb-contract and
   .iadb-receipt title rules use: the block still reads correctly if a title ever
   ships without its BEM class. */
.iadb-zelle h4,
.iadb-zelle__title,
.iadb-frontdesk h4,
.iadb-frontdesk__title,
.iadb-aid h4,
.iadb-aid__title,
.iadb-calc-fallback h4,
.iadb-calc-fallback__title {
    margin: 0 0 var(--space-sm);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.iadb-zelle {
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    text-align: center;
    /* Neutral gray card so the purple Zelle artwork does not fight the
       navy/gold palette. */
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.iadb-zelle__img {
    width: 100%;
    max-width: 320px;
    height: auto;
    padding: var(--space-sm);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.iadb-zelle__tag {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-text-light);
}

.iadb-zelle__code {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    background-color: var(--color-white);
    border: 1px dashed var(--color-secondary);
    border-radius: var(--radius-sm);
    -webkit-user-select: all;
    user-select: all;           /* one tap selects the whole tag */
}

.iadb-zelle .btn,
#iadb-zelle-copy {
    min-height: var(--iadb-tap);
}

/* There was a .iadb-zelle__status rule here (a visible "Copied!" confirmation
   under the copy button, with a reserved 1.2em line so the panel would not
   jump). Deleted: no such element exists. The copy confirmation the template
   actually renders is
   <p id="iadb-zelle-copy-status" class="iadb-sr-only" role="status" aria-live="polite">,
   which is announced, never seen, and must stay clipped by .iadb-sr-only — so
   the rule could only ever have applied to markup that does not exist. If a
   visible confirmation is wanted later, it needs a new element (or the
   .iadb-sr-only class dropped from that one), not this rule back. */

/* Memo instruction under the copy button. main.css's `p + p { margin-top: 1rem }`
   matched it — the sr-only status <p> is its previous sibling in the DOM even
   though it is out of flow — so it sat 1rem plus the grid gap below the button.
   Zeroed to the panel's own rhythm, and sized like .iadb-zelle__tag above it. */
.iadb-zelle__note {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-light);
}

.iadb-frontdesk {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-light);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-200);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.iadb-frontdesk p {
    margin: 0;
}

.iadb-frontdesk p + p {
    margin-top: var(--space-sm);
}

.iadb-frontdesk strong {
    color: var(--color-primary);
}

/* Financial aid — the third payment panel, shown when the parent picks
   "Financial Aid — Request Educational Zakat".

   MARKUP STATUS: live. page-templates/page-education.php:1001 emits it exactly
   as the contract specified —

     <div id="iadb-aid-panel" class="iadb-aid">
       <h4 class="iadb-aid__title">Requesting Educational Zakat</h4>
       <p>…</p>
       <p>… <a href="tel:…">office phone</a></p>
     </div>

   — so every selector in this block, and .iadb-aid / .iadb-aid__title in the
   shared eyebrow rule at the top of this section, matches shipping markup. The
   panel is wrapped in an `if ( $iadb_aid_offered )` guard in the template, so
   it is absent rather than empty when the option is switched off.

   VISIBILITY: no `display` is declared on the block, deliberately. All three
   panels ship without the hidden attribute so a visitor with JavaScript off
   reads every payment route under its own heading; the JS then toggles `hidden`
   on the two that do not apply. A block with no display of its own is hidden by
   the UA sheet alone, and section 1's `#iadb-register [hidden]` already covers
   #iadb-aid-panel through the descendant selector — so, unlike .iadb-zelle
   (display: grid), this panel adds nothing new for [hidden] to beat.

   IDENTITY: this is supportive information, not a payment instruction, so it
   reads differently from its two siblings without leaving the palette —
   .iadb-zelle is a neutral --color-gray-100 card that keeps the purple artwork
   off the navy/gold scheme, and .iadb-frontdesk is plain --color-off-white with
   a single sage rule down its left edge. This one inverts that emphasis: the
   sage moves into the ground (--iadb-accent-tint) and runs all the way round
   the border, which marks it as help rather than as a third set of payment
   steps. No new colour is introduced — --color-accent and its 8% tint are both
   already in the file. */
.iadb-aid {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-light);
    background-color: var(--iadb-accent-tint);
    border: 1px solid var(--color-accent);
    /* Heavier on the left, echoing .iadb-frontdesk's rule so the two panels
       still look like siblings rather than unrelated components. */
    border-left-width: 4px;
    border-radius: var(--radius-md);
}

/* Same paragraph rhythm as .iadb-frontdesk: main.css's `p + p { margin-top:
   1rem }` would otherwise open the panel up far wider than its siblings. */
.iadb-aid p {
    margin: 0;
}

.iadb-aid p + p {
    margin-top: var(--space-sm);
}

.iadb-aid strong {
    color: var(--color-primary);
}

/* The office phone number, which the template renders from icdb_ss_office_phone()
   as <a href="tel:…">, the way the contact block at the top of the same
   template does it.

   inline-flex, not inline-block: the link sits inside a running sentence, so it
   has to stay in the inline flow, but it also has to be a real 44px target
   (SC 2.5.8) for the parent who wants to phone the office from their phone.
   inline-flex + align-items:center gives the box its full height with the label
   centred in it; inline-block with the same min-height would top-align the text
   inside a 44px box and look broken. Wrapping is unaffected — the box moves to
   the next line whole, which is what you want for a phone number.

   No focus rule here: #iadb-register a:focus-visible in section 5 already rings
   it, and repainting the background on focus would fight that ring. */
.iadb-aid a {
    display: inline-flex;
    align-items: center;
    min-height: var(--iadb-tap);
    padding: 0 0.15rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.iadb-aid a:hover,
.iadb-aid a:focus {
    color: var(--color-accent-dark);
}


/* --------------------------------------------------------------------------
   13. Fee calculator — reads like a receipt
   -------------------------------------------------------------------------- */
.iadb-calc {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}

.iadb-calc__table,
.iadb-calc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.iadb-calc__table th,
.iadb-calc table th {
    padding: var(--space-sm) 0;
    text-align: left;
    font-weight: 500;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.iadb-calc__table td,
.iadb-calc table td {
    padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    border-bottom: 1px solid var(--color-gray-200);
}

.iadb-calc__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    color: var(--color-text-light);
}

/* The two live-calculator note spans. The template renders them as
   <span id="iadb-calc-perchild-note" class="iadb-calc__note"> inside the row's
   <th>, and the JS only ever sets their text, so both the id and the class stay
   on the element — the class is listed alongside the ids so the pair is not
   held together by the ids alone.
   No display change here on purpose: these sit inline after the row label
   ("Per-child registration fees 2 × $50.00"), unlike the receipt's
   .iadb-calc__sub, which is display:block and drops to its own line. */
#iadb-calc-perchild-note,
#iadb-calc-tuition-note,
.iadb-calc__note {
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    color: var(--color-text-light);
}

/* Amount Due Today: the dominant figure, with a rule above it. */
.iadb-calc__due th,
.iadb-calc__due td {
    padding-top: var(--space-md);
    border-top: 2px solid var(--color-primary);
    border-bottom: 0;
}

.iadb-calc__due th {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.iadb-calc__due td,
#iadb-calc-due {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-secondary-dark);
}

/* Financial-aid caveat under the Amount Due Today row.

   MARKUP STATUS: live. page-templates/page-education.php:1051 emits
   <p id="iadb-calc-aid-note" class="iadb-calc__aid-note"> — the id the contract
   asked for, matching the convention every other live element in this table
   already uses (#iadb-calc-family, #iadb-calc-perchild, #iadb-calc-regtotal,
   #iadb-calc-tuition, #iadb-calc-due, and the two note spans above). Both
   selector halves are therefore live; they stay paired so the rule does not
   hang on the id alone, exactly as the note-span rule above pairs them.

   It must NOT read as another figure. The row above it is a 1.5rem heading-face
   total in --color-secondary-dark; this is 0.8rem body-face running text,
   left-aligned, in --color-text-light, on the same sage tint as the aid panel
   in section 12 — visually part of that panel's voice, not part of the sum. The
   fees themselves are unchanged: a parent requesting Educational Zakat still
   sees the standard amount, so nothing here dims or strikes through the total.

   `font-family: var(--font-body)`, `white-space: normal` and `text-align: left`
   are defensive rather than load-bearing in the shipped shape: the <p> is a
   sibling of the table, not a descendant of it, so it inherits none of
   .iadb-calc__due th's --font-heading or .iadb-calc__table td's nowrap/right
   alignment. They are kept because the span form below can sit inside a cell. */
#iadb-calc-aid-note,
.iadb-calc__aid-note {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    color: var(--color-text-light);
    background-color: var(--iadb-accent-tint);
    border-left: 3px solid var(--color-accent);
    border-bottom: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* The template ships the <p> form, which is a block already, so this rule is
   unmatched today. Only the inline form would need promoting — and a <td> must
   NOT be turned into a block or the browser wraps it in an anonymous cell and
   the row loses its shape, which is why the span form is scoped by type here
   rather than folded into the base rule above.

   Deleted from here: a tr.iadb-calc__aid-note td/th group written as a fallback
   for the caveat shipping as its own table row. Its own note said to delete it
   once the block form was confirmed; page-education.php:1051 confirms it. No
   print counterpart went with it — the print rule for this caveat in section 20
   selects the id and the class, which both match the live <p>. */
span#iadb-calc-aid-note,
span.iadb-calc__aid-note {
    display: block;
}

.iadb-calc-fallback {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-light);
    background-color: var(--color-off-white);
    border: 1px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
}

.iadb-calc-fallback p {
    margin: 0;
}

.iadb-calc-fallback p + p {
    margin-top: var(--space-xs);
}

.iadb-calc-fallback strong {
    color: var(--color-primary);
}

/* The four fee lines are a <ul>, and it had no rule: main.css already strips
   the markers (`ul, ol { list-style: none }`) and its universal reset already
   zeroes the UA 40px indent, so the items rendered as four unmarked, unspaced
   lines of running text. `list-style` and `padding` are restated rather than
   inherited from those two global rules so this block does not silently change
   shape if either is ever scoped or removed. The bottom margin separates the
   list from the .iadb-hint under it, whose own margin-top is overridden by the
   .iadb-calc-fallback p rule above. */
.iadb-calc-fallback ul,
.iadb-calc-fallback ol {
    list-style: none;
    margin: 0 0 var(--space-sm);
    padding: 0;
}

/* Matches .iadb-policy-list li — same indent, same check glyph, same accent on
   the same --color-off-white ground. Font size and colour are inherited from
   .iadb-calc-fallback (0.9rem / --color-text-light), so they are not repeated. */
.iadb-calc-fallback li {
    position: relative;
    padding: 0.3rem 0 0.3rem var(--space-lg);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.iadb-calc-fallback li::before {
    content: '\2713';           /* check mark */
    position: absolute;
    left: 0;
    top: 0.3rem;
    font-weight: 700;
    color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   14. Electronic signature
   -------------------------------------------------------------------------- */
.iadb-sig {
    margin: 0 0 var(--space-md);
}

.iadb-sig__canvas {
    display: block;
    width: 100%;
    height: 170px;
    /* Stops the browser scrolling or zooming the page while a finger or
       stylus is drawing. Required for touch signing. */
    touch-action: none;
    cursor: crosshair;
    background-color: var(--color-white);
    /* Ruled signing line ~40px above the base of the pad. Painted in CSS, so
       it is never part of the exported PNG. */
    background-image: linear-gradient(
        to bottom,
        transparent calc(100% - 40px),
        var(--color-gray-300) calc(100% - 40px),
        var(--color-gray-300) calc(100% - 39px),
        transparent calc(100% - 39px)
    );
    background-repeat: no-repeat;
    border: 2px dashed var(--color-gray-400);
    border-radius: var(--radius-md);
}

.iadb-sig__canvas:hover {
    border-color: var(--color-secondary);
}

.iadb-sig__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.iadb-sig__actions .btn {
    min-height: var(--iadb-tap);
}

.iadb-sig__hint {
    margin: var(--space-xs) 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.iadb-sig-fallback {
    margin: 0 0 var(--space-md);
    padding: var(--space-md);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-light);
    background-color: var(--color-cream);
    border: 1px solid var(--color-gray-200);
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-md);
}


/* --------------------------------------------------------------------------
   15. Submit
   -------------------------------------------------------------------------- */
.iadb-submit {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.iadb-submit .btn {
    width: 100%;
    min-height: 52px;
}

.iadb-submit__note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-light);
}


/* --------------------------------------------------------------------------
   16. Receipt / success state
   Parts beyond the contract's #iadb-receipt / .iadb-receipt are styled both as
   BEM classes and as plain descendants, so the block still looks right
   whichever of the two Agent B emits.
   -------------------------------------------------------------------------- */
.iadb-receipt {
    color: var(--color-text);
}

.iadb-receipt__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    padding: 0.3rem var(--space-md);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
}

.iadb-receipt__title,
.iadb-receipt h2 {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary);
}

.iadb-receipt__lede {
    margin: 0 0 var(--space-lg);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

.iadb-receipt__ref {
    display: grid;
    gap: var(--space-xs);
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    text-align: center;
    background-color: var(--color-cream);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
}

.iadb-receipt__ref-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.iadb-receipt__ref-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    word-break: break-all;
    color: var(--color-primary);
}

/* "Submitted <date>", the optional third line of the reference panel. Had no
   rule, so it printed at full body size directly under the 1.3rem reference
   number and read louder than the 0.75rem label above it. */
.iadb-receipt__ref-date {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.iadb-receipt__section {
    margin-bottom: var(--space-lg);
}

.iadb-receipt__section-title,
.iadb-receipt h3,
.iadb-receipt h4 {
    margin: 0 0 var(--space-sm);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.iadb-receipt__table,
.iadb-receipt table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.iadb-receipt__table th,
.iadb-receipt table th {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    text-align: left;
    font-weight: 500;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.iadb-receipt__table td,
.iadb-receipt table td {
    padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-gray-200);
}

.iadb-receipt__table td:last-child,
.iadb-receipt table td:last-child {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* The student roster reads better left-aligned than as figures — the Level
   column is not currency. The `table.` prefix is load-bearing: the generic
   rule above is a two-selector list whose `.iadb-receipt table td:last-child`
   half is (0,2,2), so a bare `.iadb-receipt__table--students td:last-child`
   (0,2,1) would still lose to it. The type+class form ties at (0,2,2) and
   wins on source order. Measured: without the prefix the Level cell still
   computed text-align:right / font-weight:600. */
table.iadb-receipt__table--students td:last-child,
table.iadb-receipt__table--students th:last-child {
    text-align: left;
    font-weight: 500;
}

/* Amount Due Today. Verified against page-education.php: the template closes
   .iadb-receipt__table--fees and then renders a standalone

       <div class="iadb-receipt__due">
         <span class="iadb-receipt__due-label">Amount Due Today</span>
         <span class="iadb-receipt__due-value">$…</span>
       </div>

   AFTER the table — it is not a row of it. Two comments here used to claim the
   opposite ("the template renders the total as a <tr>"), and a whole
   tr.iadb-receipt__due group was written for that row; the group matched
   nothing and has been deleted, base and print. The `:not(tr)` guard that used
   to scope this rule away from the row variant went with it: with no table-row
   form left in the file there is nothing to disambiguate from, and the plain
   class keeps the specificity low enough to stay easy to override. */
.iadb-receipt__due {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background-color: var(--color-off-white);
    border-top: 2px solid var(--color-primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.iadb-receipt__due-label {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.iadb-receipt__due-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-secondary-dark);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Deleted from here: a tr.iadb-receipt__due th / td group (cell padding, the
   2px rule above the total, and the 1.75rem figure, plus a `td:last-child`
   half written to out-rank .iadb-receipt__table td:last-child). Every one of
   those selectors required a <tr class="iadb-receipt__due">, which the template
   does not render — see the note on .iadb-receipt__due above. The rule above
   the figure is not lost: the .iadb-receipt__due div carries its own
   `border-top: 2px solid var(--color-primary)`.

   Also deleted: .iadb-receipt__note (an accent-bordered callout panel). No
   element in the template or the JS carries that class — the two note spans it
   was written for are .iadb-calc__sub now, which is styled in section 13. */

.iadb-receipt__actions {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.iadb-receipt__actions .btn,
#iadb-print {
    min-height: var(--iadb-tap);
}

/* CORRECTION: the receipt does NOT render the payment panels — it renders a
   plain paragraph carrying a bare <code class="iadb-zelle__code">, which is a
   top-level selector in section 12 and so styles correctly on its own. This
   rule is kept, unmatched, only so the panels would sit correctly if a future
   receipt ever embeds them. Same "kept, and why" convention as the notes on
   .iadb-newtab-icon and .iadb-handbook-link above. */
.iadb-receipt .iadb-zelle,
.iadb-receipt .iadb-frontdesk {
    margin-bottom: var(--space-lg);
}

/* Also currently unmatched by page-education.php and sunday-school-form.js,
   and kept deliberately as the receipt/section vocabulary a future template
   revision would reach for: .iadb-form__intro, .iadb-sig__hint,
   .iadb-submit__note, .iadb-receipt__badge, .iadb-receipt__lede,
   .iadb-receipt__section, .iadb-receipt__note, .iadb-zelle__status and
   .iadb-newtab-icon. Two more are live only through their descendant halves:
   .iadb-receipt__section-title is unmatched but .iadb-receipt h3 (grouped with
   it) styles the section headings the template actually emits, which carry
   .iadb-receipt__title. Do not delete one half of those pairs without checking
   the other.

   The financial-aid additions in sections 12-13 (.iadb-aid, .iadb-aid__title,
   #iadb-calc-aid-note / .iadb-calc__aid-note) are NOT on this list: the
   template landed and every one of them now matches live markup — see the
   MARKUP STATUS notes at .iadb-aid and #iadb-calc-aid-note. The one genuinely
   dead rule that shipped alongside them, the <tr> fallback for the calculator
   caveat, has been deleted. The only survivor there is the
   span#iadb-calc-aid-note display promotion, which is unmatched by the <p> the
   template emits and is documented in place. */


/* --------------------------------------------------------------------------
   17. >= 640px — large phones landscape, tablets and up
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    #iadb-register .card__body {
        padding: var(--space-xl);
    }

    .iadb-form .form-input,
    .iadb-form .form-select,
    .iadb-form .form-textarea {
        /* Past the iOS zoom threshold concern; match main.css sizing. */
        font-size: 0.95rem;
    }

    .iadb-form__section-title {
        font-size: 1.2rem;
    }

    /* Forward-compatibility only, like the base rule in section 7 — the
       template does not emit .iadb-student-row__fields today. If that wrapper
       is ever added, the name spans the row and DOB + level sit side by side.
       Without it the row is plain block flow: the name is full width and
       DOB + level go two-up from 768px, where main.css stops collapsing
       .form-row. That shared breakpoint is deliberately not overridden here
       (see the file header), so 640-767px stacks all three. */
    .iadb-student-row__fields {
        grid-template-columns: 1fr 1fr;
    }

    .iadb-student-row__fields > .form-group:first-child {
        grid-column: 1 / -1;
    }

    .iadb-add-student {
        width: auto;
    }

    .iadb-zelle {
        padding: var(--space-lg);
    }

    .iadb-calc,
    .iadb-calc-fallback,
    .iadb-contract,
    .iadb-policy-list,
    .iadb-frontdesk,
    .iadb-aid,
    .iadb-sig-fallback {
        padding: var(--space-lg);
    }

    .iadb-calc__due td,
    #iadb-calc-due {
        font-size: 1.75rem;
    }

    .iadb-sig__canvas {
        height: 200px;
    }

    .iadb-submit {
        justify-items: center;
    }

    .iadb-submit .btn {
        width: auto;
        min-width: 280px;
    }

    .iadb-receipt__actions {
        grid-auto-flow: column;
        justify-content: start;
    }

    .iadb-receipt__due-value {
        font-size: 2rem;
    }
}


/* --------------------------------------------------------------------------
   18. >= 720px — the 21 policy items go two-up
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
    .iadb-policy-list {
        columns: 2;
        column-gap: var(--space-xl);
    }
}


/* --------------------------------------------------------------------------
   19. >= 900px — full container--narrow width
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .iadb-form__section + .iadb-form__section {
        margin-top: var(--space-xl);
        padding-top: var(--space-xl);
    }

    .iadb-student-row {
        padding: var(--space-lg);
    }

    .iadb-sig__canvas {
        height: 220px;
    }
}


/* --------------------------------------------------------------------------
   20. Print — the receipt on one clean page
   -------------------------------------------------------------------------- */
@media print {
    @page {
        margin: 14mm;
    }

    /* Literal black and white below: printing is intentionally monochrome and
       every theme colour token is tinted. */
    body {
        background: #FFFFFF !important;
        color: #000000 !important;
        font-size: 11pt;
        line-height: 1.45;
    }

    .skip-link,
    .site-header,
    .app-banner,
    .announcement-bar,
    .top-bar,
    .header-main,
    .primary-nav,
    .mega-menu,
    .mobile-overlay,
    .mobile-menu-toggle,
    .page-hero,
    .breadcrumbs,
    .site-footer,
    .iadb-receipt__actions,
    #iadb-print,
    #iadb-register .btn,
    .iadb-receipt .btn,
    .iadb-add-student,
    .iadb-student-remove,
    #iadb-zelle-copy,
    button {
        display: none !important;
    }

    /* Everything on the Education page except the registration UI is noise on
       paper. Two rules, one per state: the receipt after a successful submit,
       or the blank form (a family without JavaScript is told to print it and
       sign at the front desk). :has() is widely supported; where it is not,
       the other sections simply print after it. */
    #main-content:has(#iadb-receipt) > section:not(:has(#iadb-receipt)) {
        display: none !important;
    }

    #main-content:has(.iadb-form) > section:not(:has(.iadb-form)) {
        display: none !important;
    }

    /* A printed blank form has to be fillable in pen. */
    .iadb-form .form-input,
    .iadb-form .form-select,
    .iadb-form .form-textarea,
    .iadb-radio,
    .iadb-checkbox,
    .iadb-form .form-radio,
    .iadb-form .form-checkbox,
    .iadb-sig__canvas {
        color: #000000 !important;
        background: transparent !important;
        border: 1pt solid #000000 !important;
        box-shadow: none !important;
    }

    .iadb-form__section,
    .iadb-student-row,
    .iadb-sig {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .iadb-form__section-title,
    .iadb-form .form-label,
    .iadb-form legend,
    .iadb-policy-list li,
    .iadb-contract,
    .iadb-contract li,
    .iadb-tier-static__rate {
        color: #000000 !important;
    }

    /* The four panel eyebrows and the fee list from sections 12-13, for the
       same reason as .iadb-policy-list li above: each carries its own colour
       declaration, which out-ranks the monochrome `body { color: #000 }` by
       specificity and would otherwise print tinted. The financial-aid panel's
       body text and phone link are listed too: main.css's `a { color:
       var(--color-link) }` matches the link directly, and a direct match always
       beats a colour inherited from an ancestor — even the !important one on
       .iadb-aid — so the anchor has to be named. The receipt renders a phone
       link of its own now (page-education.php:499); it is handled by
       `.iadb-receipt a` in the receipt colour group further down, for exactly
       the same reason. */
    .iadb-zelle__title,
    .iadb-frontdesk__title,
    .iadb-aid__title,
    .iadb-aid,
    .iadb-aid a,
    .iadb-calc-fallback__title,
    .iadb-calc-fallback li {
        color: #000000 !important;
    }

    /* The aid caveat under the total. Its sage tint and left rule are the one
       thing in the calculator that would print as grey mush, so it drops to the
       same 1pt black rule the panels use. Both id and class are listed for the
       reason given at the base rule in section 13. */
    #iadb-calc-aid-note,
    .iadb-calc__aid-note {
        color: #000000 !important;
        background: transparent !important;
        border-left: 1pt solid #000000 !important;
        border-radius: 0 !important;
    }

    .iadb-student-row,
    .iadb-policy-list,
    .iadb-contract,
    .iadb-tier-static,
    .iadb-sig-fallback,
    .iadb-calc-fallback {
        background: transparent !important;
        border: 1pt solid #000000 !important;
    }

    .section {
        padding: 0 !important;
    }

    .container,
    .container--narrow {
        max-width: none !important;
        padding: 0 !important;
    }

    .card,
    #iadb-register .card {
        background: #FFFFFF !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .card__body,
    #iadb-register .card__body {
        padding: 0 !important;
    }

    /* `.iadb-receipt a` is not decoration: the financial-aid branch of the
       receipt renders an office-phone <a href="tel:…"> inside a <p>
       (page-education.php:499), and main.css's `a { color: var(--color-link) }`
       matches it directly, which beats the black this <p> inherits down. Without
       it that one phone number prints navy on an otherwise monochrome page. */
    .iadb-receipt,
    .iadb-receipt h2,
    .iadb-receipt h3,
    .iadb-receipt h4,
    .iadb-receipt p,
    .iadb-receipt a,
    .iadb-receipt th,
    .iadb-receipt td,
    .iadb-receipt__ref-value,
    .iadb-receipt__due-label,
    .iadb-receipt__due-value,
    .iadb-calc th,
    .iadb-calc td {
        color: #000000 !important;
        background: transparent !important;
    }

    .iadb-receipt__badge {
        padding: 2pt 6pt;
        color: #000000 !important;
        background: transparent !important;
        border: 1pt solid #000000;
    }

    .iadb-receipt__ref {
        background: transparent !important;
        border: 1pt solid #000000;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .iadb-receipt__ref-value {
        font-size: 18pt;
    }

    /* The total is one <div>, so the box rules and the page-break guard can sit
       on the block itself. (The tr counterparts of these three rules, which had
       to put the borders on the cells because a printed row box drops them, went
       with the dead tr.iadb-receipt__due group in section 16.) */
    .iadb-receipt__due {
        page-break-inside: avoid;
        break-inside: avoid;
        background: transparent !important;
        border-top: 1.5pt solid #000000;
        border-bottom: 1.5pt solid #000000;
    }

    .iadb-receipt__due-value {
        font-size: 20pt;
    }

    .iadb-receipt__section,
    .iadb-receipt__table,
    .iadb-receipt table,
    .iadb-calc {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .iadb-receipt__table th,
    .iadb-receipt__table td,
    .iadb-receipt table th,
    .iadb-receipt table td,
    .iadb-calc th,
    .iadb-calc td {
        border-color: #000000 !important;
    }

    /* A printed blank form carries all three payment panels — print is the
       no-JavaScript path, where nothing has hidden the two that do not apply —
       so the aid panel needs the same monochrome box as its siblings. */
    .iadb-calc,
    .iadb-frontdesk,
    .iadb-aid {
        background: transparent !important;
        border: 1pt solid #000000 !important;
    }

    /* The QR stays useful on paper; kept small so the receipt is one page. */
    .iadb-zelle {
        background: transparent !important;
        border: 1pt solid #000000;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .iadb-zelle__img {
        max-width: 150px;
        box-shadow: none !important;
    }

    .iadb-zelle__code {
        color: #000000 !important;
        border: 1pt solid #000000;
    }

    /* No URL footnotes on a registration receipt. */
    .iadb-receipt a[href]::after {
        content: '';
    }
}


/* --------------------------------------------------------------------------
   21. Reduced motion — neutralise every transition introduced above
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .iadb-form,
    .iadb-form *,
    .iadb-receipt,
    .iadb-receipt *,
    .iadb-student-row,
    .iadb-student-row.is-new,
    .iadb-student-remove,
    .iadb-radio,
    .iadb-checkbox,
    .iadb-handbook-link,
    .iadb-aid a,
    .iadb-sig__canvas {
        transition: none !important;
        animation: none !important;
    }
}