/*
 * Feessie components — site-wide building blocks in the "De Keukentafel"
 * style. Colours ONLY via tokens (tokens.css); BrandTokensTest fails if a hex
 * value sneaks in here. Page layouts live in pages.css; old app.css classes
 * are re-skinned to match in compat.css.
 */

/* ── Base ──────────────────────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

body,
body.playful-theme {
    font-synthesis: none; /* the display face ships up to 600 — never fake a heavier bold */
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    letter-spacing: -0.015em;
    color: var(--ink);
}

::selection { background: var(--wash-accent); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

/* Full-bleed page wrapper (edge-to-edge sections under the header). */
.bleed {
    position: relative;
    z-index: 1;
    margin: -2.5rem 0 -3.5rem; /* cancel .main-content padding */
    background: var(--paper);
    font-size: 1.0625rem;
}
.bleed *,
.bleed *::before,
.bleed *::after { box-sizing: border-box; }
.bleed img { display: block; width: 100%; height: auto; }
.bleed section[id] { scroll-margin-top: 6rem; } /* anchors below the sticky header */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.narrow > * { max-width: 820px; } /* narrow text column, same left edge */

/* ── Type ──────────────────────────────────────────────────────────────── */

.display-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 5.2vw, 3.6rem);
    line-height: 1.05;
    font-weight: var(--weight-display);
    letter-spacing: -0.015em;
    margin: 0;
}
.page-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 2.5rem);
    line-height: 1.1;
    font-weight: var(--weight-display);
    margin: 0 0 0.5rem;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    line-height: 1.15;
    font-weight: var(--weight-display);
    margin: 0 0 2rem;
}
.section-title-tight { margin-bottom: 1.5rem; }
.subsection-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.2;
    font-weight: var(--weight-display);
    margin: 0 0 0.75rem;
}
.eyebrow,
.kicker { font-size: 0.9rem; font-weight: 600; color: var(--secondary); margin: 0 0 0.9rem; }
.lead { font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); max-width: 34rem; margin: 1.25rem 0 1.75rem; }
.sublead { font-size: 1.1rem; color: var(--ink-soft); margin: -1.25rem 0 2rem; }
.muted { color: var(--ink-soft); }
.note { font-size: 0.92rem; color: var(--ink-soft); margin-top: 1.5rem; }
.more { margin: 2rem 0 0; }

/* ── Buttons ───────────────────────────────────────────────────────────────
 * One system for every action on the site:
 *   .btn-primary    the ONE main action on a screen (marker red)
 *   .btn-secondary  other actions (ink outline)
 *   .btn-quiet      low-emphasis / "or …" links that act like buttons
 *   .btn-accent     celebratory secondary (ochre), e.g. "thank-you card"
 *   .btn-subtle     low-key bordered action (edit, copy, back)
 *   .btn-danger     destructive (delete, remove)
 * Sizes .btn-sm / .btn-lg, .btn-block for full width, .btn-icon for icon-only.
 * Sentence case, no shadows, min 44px touch target (36px for .btn-sm).
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 85%, var(--ink)); color: var(--ink); }
.btn-subtle { background: var(--surface-raised); border-color: var(--rule-strong); color: var(--ink); }
.btn-subtle:hover { border-color: var(--ink); color: var(--ink); }
.btn-quiet {
    min-height: 0;
    padding: 0.7rem 0.2rem;
    border: 0;
    border-bottom: 1.5px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink);
}
.btn-quiet:hover { border-bottom-color: var(--ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--on-danger); }
.btn-danger-outline { border-color: var(--danger); color: var(--danger); }
.btn-danger-outline:hover { background: var(--wash-danger); }

.btn-sm { min-height: 36px; padding: 0.45rem 0.95rem; font-size: 0.92rem; }
.btn-lg { min-height: 52px; padding: 0.95rem 1.7rem; font-size: 1.08rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 36px; }

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* On a primary-coloured band the roles invert. */
.on-primary .btn-primary { background: var(--surface-raised); border-color: var(--surface-raised); color: var(--ink); }
.on-primary .btn-primary:hover { background: #fff; border-color: #fff; }
.on-primary .btn-quiet { color: var(--on-primary); border-bottom-color: color-mix(in srgb, var(--on-primary) 55%, transparent); }
.on-primary .btn-quiet:hover { border-bottom-color: var(--on-primary); }
.on-primary .btn:focus-visible { outline-color: var(--on-primary); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.actions-center { justify-content: center; }

/* ── Links ─────────────────────────────────────────────────────────────── */

.text-link { color: var(--secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--secondary-hover); }

.crumbs { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.crumbs a { color: var(--secondary); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ── Cards, labels, chips ──────────────────────────────────────────────── */

.card {
    background: var(--surface-raised);
    border: 1.5px solid var(--rule);
    border-radius: var(--radius-card);
    padding: 1.5rem;
}
.card-lift:hover { box-shadow: var(--shadow-lift); }

.label-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-label);
    background: var(--accent);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
}
.label-tag-soft { background: var(--wash-accent); }
.label-tag-success { background: var(--wash-success); color: var(--success); }
.label-tag-danger { background: var(--wash-danger); color: var(--danger); }
.label-tag-secondary { background: var(--wash-secondary); color: var(--secondary); }

.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips a,
.chip {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.chips a:hover,
.chip:hover { border-color: var(--ink); }
.chip.active,
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.bullet-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.bullet-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.4rem;
    border-top: 1px solid var(--rule);
}
.bullet-list li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 1.05rem;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--accent);
}
.bullet-list-roomy li { padding-top: 0.8rem; padding-bottom: 0.8rem; }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field-label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--ink); }
.field-hint { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.35rem; }
.field {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 500;
}
.field:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }

/* ── Alerts ────────────────────────────────────────────────────────────── */

.notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-card);
    border: 1.5px solid var(--rule);
    background: var(--surface-raised);
    color: var(--ink);
    font-weight: 500;
}
.notice-success { background: var(--wash-success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.notice-error { background: var(--wash-danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.notice-info { background: var(--wash-secondary); border-color: color-mix(in srgb, var(--secondary) 35%, transparent); }

/* ── Sections & washes ─────────────────────────────────────────────────── */

.section { position: relative; overflow: hidden; padding: 4.5rem 0; border-top: 1px solid var(--rule); }
.section-raised { background: var(--surface-raised); }
.wash-soft { background: var(--wash-soft); }
.wash-secondary { background: var(--wash-secondary); }
.wash-accent { background: var(--wash-accent); }

.cta-band {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 5.5rem;
    text-align: center;
    background: var(--surface-sunken);
    border-top: 1px solid var(--rule);
}
.cta-band .section-title { margin-bottom: 1.5rem; }
.cta-band-primary { background: var(--primary); border-top: 0; padding-top: 6rem; }
.cta-band-primary .section-title,
.cta-band-primary .sublead { color: var(--on-primary); }

/* ── Motif kit (art-direction.md §4b/§4c) ──────────────────────────────────
 * Paper bunting, die-cut stickers, masking tape, felt-tip marks and doodles.
 * Deliberate accents, never wallpaper. Motion only on hover; none with
 * prefers-reduced-motion.
 */
.bunting { position: absolute; top: 0; left: 0; width: 100%; height: 56px; pointer-events: none; }

/* Felt-tip underline in the primary colour (a mask, so it follows the token). */
.mark { position: relative; white-space: nowrap; }
.mark::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 0.32em;
    background: var(--primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C40 4 80 14 120 8 S180 5 198 10' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C40 4 80 14 120 8 S180 5 198 10' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    pointer-events: none;
}

.taped { position: relative; }
.taped::before,
.taped::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 92px;
    height: 26px;
    background: color-mix(in srgb, var(--accent) 78%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.taped::before { top: -11px; left: 18px; transform: rotate(-7deg); }
.taped::after { top: -9px; right: 18px; transform: rotate(6deg); }
.taped-small::before,
.taped-small::after { width: 64px; height: 20px; }
.taped-small::after { display: none; }
.taped > img { position: relative; }

.sticker {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: var(--shadow-sticker);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--on-primary);
    transform: rotate(-6deg);
    transition: transform 0.2s ease;
}
.sticker-primary { background: var(--primary); }
.sticker-accent { background: var(--accent); color: var(--ink); }
.sticker-secondary { background: var(--secondary); color: var(--on-secondary); }
.sticker-soft { background: var(--soft); color: var(--ink); }
.sticker-sm { width: 2.2rem; height: 2.2rem; font-size: 1rem; border-width: 3px; }

.doodle { position: absolute; width: 64px; height: 64px; pointer-events: none; }

@media (max-width: 900px) {
    .doodle { display: none; }
    .bunting { height: 40px; }
    .section { padding: 3.25rem 0; }
    .cta-band-primary { padding-top: 4.5rem; }
}

@media (max-width: 600px) {
    .bleed { font-size: 1rem; }
    .lead { font-size: 1.1rem; }
    .actions .btn-primary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .sticker { transition: none; }
}

/* ── Site chrome: header, menu, notices, footer ────────────────────────── */

.beta-banner {
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 1rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    padding: 0;
}
.header-bar { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }

.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; }
.brand-mark { width: 30px; height: 36px; flex: none; transform: rotate(-6deg); }
.brand-word { font-family: var(--font-display); font-size: 1.45rem; font-weight: var(--weight-display); letter-spacing: -0.02em; }
.brand-small .brand-mark { width: 24px; height: 29px; }
.brand-small .brand-word { font-size: 1.2rem; }

.header-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.header-link { color: var(--ink); font-weight: 600; text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.header-link:hover { border-bottom-color: var(--accent); }
.header-link[aria-current="page"] { border-bottom-color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-menu-wrapper { position: relative; }
.nav-menu-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-menu-btn .icon-close { display: none; }
.nav-menu-btn[aria-expanded="true"] .icon-open { display: none; }
.nav-menu-btn[aria-expanded="true"] .icon-close { display: inline; }

.nav-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    width: 260px;
    padding: 1rem;
    background: var(--surface-raised);
    border: 1.5px solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
    z-index: 60;
}
.nav-menu-dropdown.show { display: block; }
.menu-links { display: none; flex-direction: column; margin-bottom: 0.75rem; }
.menu-links a { padding: 0.55rem 0; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); }
.menu-group + .menu-group { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.menu-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.5rem; }
.menu-langs { display: flex; gap: 0.4rem; }
.menu-langs .chip { flex: 1; text-align: center; padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.menu-account { font-size: 0.9rem; color: var(--ink); word-break: break-all; margin-bottom: 0.6rem; }
.menu-only-mobile { display: none; }

.notice-wrap { margin-top: 1rem; position: relative; z-index: 2; }
/* Success messages are confirmations, not something to read twice: they fade
   out after 2 seconds (CSS only, so it also works without JS). Errors stay.
   Notices never end up on paper: printing a page must not print its flash. */
.notice-wrap--timed { max-height: 12rem; overflow: hidden; animation: notice-out 0.3s ease 2s forwards; }
@keyframes notice-out { to { opacity: 0; max-height: 0; margin-top: 0; visibility: hidden; } }
@media print { .notice-wrap { display: none !important; } }

.site-footer {
    background: var(--surface-sunken);
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
    padding: 2.5rem 0;
    margin-top: 0;
}
.footer-bar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; }
.footer-tagline { margin: 0.5rem 0 0; font-size: 0.95rem; max-width: 30rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.95rem; }
.footer-links a { color: var(--ink); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .header-bar { gap: 0.75rem; min-height: 58px; }
    .header-nav { display: none; }
    .header-actions { margin-left: auto; }
    .menu-links { display: flex; }
    .header-actions > .btn-secondary:not(.btn-icon) { display: none; }
    .menu-only-mobile { display: block; }
    .brand-word { font-size: 1.3rem; }
}

/* ── Party layer: confetti colours on the paper ────────────────────────────
 * The kids'-birthday layer on top of the brand frame. Only uses the --pop-*
 * confetti tokens (decoration, never text), so re-colouring = tokens.css §1.
 *   body           a sparse confetti speckle on the page background
 *   .party-ribbon  mini paper flags hanging under the site header
 *   .stripe-*      a coloured top edge on cards (auto-cycles on .toy-card)
 *   .mark-*        felt-tip underline in a confetti colour
 *   .sticker-*     die-cut stickers in every confetti colour
 *   .page-head     page title block with room for doodles
 */
body,
body.playful-theme {
    background-color: var(--paper);
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--pop-pink) 55%, transparent) 0 3px, transparent 3.5px),
        radial-gradient(circle, color-mix(in srgb, var(--pop-sky) 55%, transparent) 0 2.5px, transparent 3px),
        radial-gradient(circle, color-mix(in srgb, var(--pop-sun) 70%, transparent) 0 3.5px, transparent 4px),
        radial-gradient(circle, color-mix(in srgb, var(--pop-mint) 55%, transparent) 0 2.5px, transparent 3px),
        radial-gradient(circle, color-mix(in srgb, var(--pop-lilac) 55%, transparent) 0 3px, transparent 3.5px),
        radial-gradient(circle, color-mix(in srgb, var(--pop-orange) 50%, transparent) 0 2px, transparent 2.5px);
    background-size: 340px 340px;
    background-position: 30px 60px, 210px 20px, 120px 190px, 290px 250px, 60px 300px, 250px 130px;
    background-attachment: fixed;
}
/* Full-bleed marketing pages paint their own sections. */
.bleed { background: var(--paper); }

.site-header { overflow: visible; }
/* Marketing pages hang their own, bigger bunting (a hidden landing — wizard open — does not count). */
body:has(.bleed:not([style*="none"])) .party-ribbon { display: none; }
.party-ribbon {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    pointer-events: none;
    background: repeating-linear-gradient(90deg,
        var(--primary) 0 36px, var(--pop-sun) 36px 72px, var(--pop-sky) 72px 108px,
        var(--pop-pink) 108px 144px, var(--pop-mint) 144px 180px, var(--pop-lilac) 180px 216px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 14'%3E%3Cpath d='M4 0H32L18 14Z'/%3E%3C/svg%3E") repeat-x 0 0 / 36px 14px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 14'%3E%3Cpath d='M4 0H32L18 14Z'/%3E%3C/svg%3E") repeat-x 0 0 / 36px 14px;
}

/* Card stripes */
.stripe-pink { border-top: 6px solid var(--pop-pink) !important; }
.stripe-mint { border-top: 6px solid var(--pop-mint) !important; }
.stripe-sky { border-top: 6px solid var(--pop-sky) !important; }
.stripe-sun { border-top: 6px solid var(--pop-sun) !important; }
.stripe-lilac { border-top: 6px solid var(--pop-lilac) !important; }
.stripe-orange { border-top: 6px solid var(--pop-orange) !important; }
.stripe-primary { border-top: 6px solid var(--primary) !important; }

/* Washes in confetti colours */
.wash-pink { background: var(--wash-pink); }
.wash-mint { background: var(--wash-mint); }
.wash-sky { background: var(--wash-sky); }
.wash-sun { background: var(--wash-sun); }
.wash-lilac { background: var(--wash-lilac); }

/* Felt-tip underline in other colours (same mask as .mark) */
.mark-sun::after { background: var(--pop-sun); }
.mark-sky::after { background: var(--pop-sky); }
.mark-pink::after { background: var(--pop-pink); }
.mark-mint::after { background: var(--pop-mint); }
.mark-lilac::after { background: var(--pop-lilac); }
.mark { z-index: 0; }
.mark::after { z-index: -1; }

.sticker-pink { background: var(--pop-pink); color: var(--ink); }
.sticker-mint { background: var(--pop-mint); color: var(--ink); }
.sticker-sky { background: var(--pop-sky); color: var(--ink); }
.sticker-sun { background: var(--pop-sun); color: var(--ink); }
.sticker-lilac { background: var(--pop-lilac); color: var(--ink); }
.sticker-lg { width: 4.2rem; height: 4.2rem; font-size: 1.9rem; border-width: 5px; }
.sticker-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; }
/* Drawn party stickers (StickerCatalog::img()). 1em by default so it sits where the emoji used to.
   The white die-cut border is NOT in the SVG files: `.sticker-art--die` adds it, here and nowhere else. */
.sticker-art { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; object-fit: contain; flex-shrink: 0; }
.sticker-art--die {
    padding: 0.07em;
    box-sizing: content-box;
    background: var(--on-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-sticker);
}
.sticker:hover { transform: rotate(0) scale(1.06); }

/* Page title block (app pages): title, optional sticker, doodles in the corners. */
.page-head { position: relative; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 1.75rem; }
.page-head .page-title { margin: 0; }
.page-head .lead { margin: 0.4rem 0 0; font-size: 1.08rem; }
.page-head .doodle { width: 48px; height: 48px; }
.page-head .doodle-a { right: 0; top: -0.75rem; transform: rotate(10deg); }
.page-head .doodle-b { right: 64px; bottom: -0.5rem; width: 36px; height: 36px; }

/* Card-level bunting (guest-facing cards): the bunting partial inside a
   position:relative card with .has-bunting reserves room above the content. */
.has-bunting { position: relative; overflow: hidden; padding-top: 3.5rem !important; }
.has-bunting > .bunting { height: 44px; }

/* Confetti-dot scatter for a hero/card corner (decoration only). */
.confetti-corner { position: relative; }
.confetti-corner::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, var(--pop-pink) 0 4px, transparent 4.5px),
        radial-gradient(circle, var(--pop-sky) 0 3px, transparent 3.5px),
        radial-gradient(circle, var(--pop-sun) 0 5px, transparent 5.5px),
        radial-gradient(circle, var(--pop-mint) 0 3px, transparent 3.5px),
        radial-gradient(circle, var(--pop-lilac) 0 4px, transparent 4.5px);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: calc(100% - 28px) 22px, calc(100% - 74px) 12px, calc(100% - 44px) 58px, calc(100% - 110px) 40px, calc(100% - 16px) 96px;
}

@media (max-width: 760px) {
    .party-ribbon { height: 10px; -webkit-mask-size: 26px 10px; mask-size: 26px 10px; }
    .page-head .doodle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sticker:hover { transform: rotate(-6deg); }
}

/* Inline line icons (View::icon) sit on the text baseline. */
.icon { flex: none; display: inline-block; vertical-align: -0.2em; }
.sticker-orange { background: var(--pop-orange); color: var(--ink); }

/* A small round sticker holding a line icon (step titles, choice cards). */
.step-sticker {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: var(--shadow-sticker);
    color: var(--ink);
    transform: rotate(-6deg);
}
.step-sticker .icon { width: 1.25rem; height: 1.25rem; }

/* Felt-tip squiggle under a page title (a mask, so it takes any token colour).
   .squiggle-center for centred titles; --squiggle-colour to recolour. */
.squiggle::after {
    content: '';
    display: block;
    height: 0.32em;
    margin-top: 0.15em;
    background: var(--squiggle-colour, var(--pop-sun));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M3 10 C18 3 30 14 46 8 S76 3 90 9 S110 12 117 6' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 3.6em 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M3 10 C18 3 30 14 46 8 S76 3 90 9 S110 12 117 6' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 3.6em 100%;
}
.squiggle-center::after { -webkit-mask-position: center; mask-position: center; }
.hero-sticker { width: 4rem; height: 4rem; margin: 0 auto 0.75rem; border-width: 4px; }
.hero-sticker .icon { width: 1.9rem; height: 1.9rem; }

/* Celebration dialog (partials/celebration.php): a happy moment, e.g. after
   reserving a gift. Homepage illustration, short title and text, one button. */
.celebrate-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    animation: celebrate-fade 0.2s ease-out;
}
.celebrate-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: var(--radius-xl, 1.25rem);
    background: var(--surface-raised);
    border: 2px solid var(--ink);
    text-align: center;
    overflow: hidden;
    animation: celebrate-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.celebrate-image {
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto 0.75rem;
    border-radius: var(--radius-lg, 1rem);
}
.celebrate-title { font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.4rem; color: var(--ink); }
.celebrate-text { margin: 0 0 1.25rem; color: var(--ink-soft); font-weight: 600; line-height: 1.45; }
.celebrate-confetti { position: absolute; inset: 0; pointer-events: none; }
.celebrate-confetti span {
    position: absolute;
    top: -12px;
    left: calc(var(--i) * 7%);
    width: 9px;
    height: 14px;
    border-radius: 2px;
    background: var(--pop-pink);
    opacity: 0;
    animation: celebrate-fall 1.6s ease-in calc(var(--i) * 0.05s) 1 forwards;
}
.celebrate-confetti span:nth-child(3n+1) { background: var(--pop-sun); }
.celebrate-confetti span:nth-child(3n+2) { background: var(--pop-sky); }
.celebrate-confetti span:nth-child(4n) { background: var(--pop-mint); width: 8px; height: 8px; border-radius: 50%; }
@keyframes celebrate-fade { from { opacity: 0; } }
@keyframes celebrate-pop { from { transform: scale(0.7); opacity: 0; } }
@keyframes celebrate-fall {
    0% { opacity: 1; transform: translateY(0) rotate(0); }
    100% { opacity: 0; transform: translateY(420px) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
    .celebrate-backdrop, .celebrate-card { animation: none; }
    .celebrate-confetti { display: none; }
}

/* Footer in three columns: the party pages, gifts and wishlists, and Feessie itself. */
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)); gap: 1.5rem 2.5rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-head { margin: 0 0 0.25rem; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 1rem; color: var(--ink); }
@media (max-width: 640px) {
    .footer-cols { grid-template-columns: minmax(0, 1fr); }
}