/* ===========================================================================
   RememberedBy — “Elegant remembrance” design system
   Warm ivory ground, deep charcoal ink, muted gold + sage accents.
   Serif display: Cormorant Garamond · Body: Source Sans 3
   =========================================================================== */

:root {
    --ivory: #FAF7F2;
    --ivory-deep: #F2EDE4;
    --paper: #FFFFFF;
    --ink: #2B2B2B;
    --ink-soft: #5A564F;
    --ink-faint: #8B857B;
    --gold: #B08D57;
    --gold-soft: #C9AF87;
    --gold-wash: #F5EEE1;
    --sage: #8A9B8E;
    --sage-deep: #64756A;
    --sage-wash: #EEF1EE;
    --line: #E4DDD1;
    --danger: #A05252;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --shadow-soft: 0 2px 24px rgba(43, 43, 43, 0.07);
    --shadow-lift: 0 8px 40px rgba(43, 43, 43, 0.12);
    --radius: 10px;
    --transition: 240ms ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.15;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a { color: var(--sage-deep); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }

img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.7rem 1.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
}

.btn-primary { background: var(--ink); color: var(--ivory); }
.btn-primary:hover { background: #46423B; color: var(--ivory); box-shadow: var(--shadow-soft); }

/* The gold button is a site control, not page decoration, so it keeps the brand
   gold literally rather than through --gold. Themes re-point that variable, which
   made this button turn sage on one memorial and pale yellow on another.

   White text, on a deepened gold. The brand gold itself is too light to carry white
   (3.04:1 — fails WCAG AA), but the dark ink the button wore instead read as mud
   against it. This bronze keeps the same family and puts white at 4.66:1; hover
   darkens rather than lightens, so the label gains contrast under the pointer
   (5.70:1) instead of losing it.

   Both colours are literals. Themes re-point --ink as well as --gold — Twilight sets
   it to near-white for its dark ground — so a variable here would put pale text on a
   pale button on exactly the page that needs it most. */
.btn-gold { background: #8F6F3B; color: #FFFFFF; }
.btn-gold:hover { background: #7E6234; color: #FFFFFF; box-shadow: var(--shadow-soft); }

.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
/* The border carries the hover, not the label. Tinting the text with --gold put it
   at ~2.7:1 against ivory inside a themed page — legible at rest, then hard to read
   the moment you pointed at it. */
.btn-quiet:hover { border-color: var(--gold); color: var(--ink); box-shadow: var(--shadow-soft); }

.btn-danger-quiet { background: transparent; color: var(--danger); border-color: var(--line); }
.btn-danger-quiet:hover { border-color: var(--danger); }

.btn-sm { font-size: 0.85rem; padding: 0.35rem 1rem; }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* ---- Site chrome --------------------------------------------------------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem clamp(1rem, 5vw, 3.5rem);
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}

.wordmark {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.01em;
}

.wordmark span { color: var(--gold); }

.site-nav { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 2rem); flex-wrap: wrap; }

/* :not(.btn) throughout — a container link rule carries more weight than .btn-gold,
   so without it the "Create a page" button took the nav's muted colour and sat at
   2.36:1 on its own gold. Buttons bring their own colours; rules like this one are
   for prose links. */
.site-nav a:not(.btn) { color: var(--ink-soft); font-size: 0.98rem; }
.site-nav a:not(.btn):hover { color: var(--gold); }

/* The admin menu. Built on <details> rather than JavaScript so it opens before Blazor's
   circuit does, closes on Escape, and is reachable from the keyboard without any of that
   being written by hand. Only ever seen by whoever runs the site. */
.nav-menu { position: relative; }

.nav-menu > summary {
    list-style: none;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 0.98rem;
}

.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { color: var(--gold); }
.nav-menu[open] > summary { color: var(--gold); }

.nav-menu-items {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 40;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgb(0 0 0 / 8%);
}

.nav-menu-items a { padding: 0.35rem 0.5rem; border-radius: 4px; white-space: nowrap; }
.nav-menu-items a:hover { background: var(--parchment, #F7F3EC); }

/* Narrow screens have no room for a panel pinned to one corner, and the nav has already
   wrapped by here — so it becomes part of the flow rather than floating over it. */
@media (max-width: 640px) {
    .nav-menu-items {
        position: static;
        min-width: 0;
        border: none;
        box-shadow: none;
        padding: 0.25rem 0 0.25rem 0.75rem;
    }
}

.site-footer {
    margin-top: 5rem;
    padding: 3rem clamp(1rem, 5vw, 3.5rem);
    border-top: 1px solid var(--line);
    background: var(--ivory-deep);
    color: var(--ink-faint);
    font-size: 0.92rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.site-footer a:not(.btn) { color: var(--ink-soft); margin-right: 1.2rem; }

main.page { min-height: 70vh; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

/* ---- Marketing: hero ------------------------------------------------------ */

.hero {
    text-align: center;
    padding: clamp(4rem, 10vw, 7.5rem) 1.5rem clamp(3rem, 8vw, 6rem);
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, var(--gold-wash) 0%, transparent 65%),
        var(--ivory);
}

.hero .eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.4rem;
}

.hero h1 { max-width: 17em; margin-left: auto; margin-right: auto; }

.hero h1 em { font-style: italic; color: var(--sage-deep); }

.hero .lede {
    max-width: 38em;
    margin: 1.4rem auto 2.4rem;
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.hero .actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero .reassure { margin-top: 1.1rem; font-size: 0.9rem; color: var(--ink-faint); }

/* ---- Marketing: sections -------------------------------------------------- */

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-tinted { background: var(--ivory-deep); }

.section-head { text-align: center; max-width: 44em; margin: 0 auto 3rem; }
.section-head p { color: var(--ink-soft); font-weight: 300; }

.divider-leaf {
    text-align: center;
    color: var(--gold-soft);
    font-size: 1.2rem;
    letter-spacing: 0.8em;
    margin: 0 0 1.2rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
}

.feature-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.feature-card .glyph { font-size: 1.6rem; color: var(--gold); margin-bottom: 0.8rem; }
.feature-card h3 { margin-bottom: 0.4rem; }
.feature-card p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

.contrast-strip {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    flex-wrap: wrap;
    padding: 2.2rem 1.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    text-align: center;
}

.contrast-strip .point strong { font-family: var(--serif); font-size: 1.25rem; display: block; }
.contrast-strip .point span { color: var(--ink-faint); font-size: 0.9rem; }

/* ---- Marketing: pricing ---------------------------------------------------- */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    align-items: stretch;
}

.price-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.2rem 1.9rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
}

.price-card.hero-plan { border-color: var(--gold); box-shadow: var(--shadow-lift); position: relative; }

.price-card .plan-badge {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: #FFFDF8;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.price-card h3 { margin-bottom: 0.2rem; }
.price-card .amount { font-family: var(--serif); font-size: 2.6rem; }
.price-card .amount small { font-size: 1rem; color: var(--ink-faint); font-family: var(--sans); }
.price-card ul { list-style: none; padding: 0; margin: 1.2rem 0 1.8rem; flex: 1; }
.price-card li { padding: 0.32rem 0; color: var(--ink-soft); font-size: 0.95rem; }
.price-card li::before { content: "— "; color: var(--gold); }

/* ---- Auth-ish forms & panels ---------------------------------------------- */

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.form-grid { display: grid; gap: 1.1rem; }
.form-row-2 { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

label.field-label {
    display: block;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.35rem;
}

.input, input.input, textarea.input, select.input {
    width: 100%;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    transition: border-color var(--transition);
}

.input:focus { outline: none; border-color: var(--gold); background: var(--paper); }

textarea.input { resize: vertical; min-height: 120px; }

.hint { font-size: 0.85rem; color: var(--ink-faint); }

.alert {
    border-radius: 8px;
    padding: 0.8rem 1.1rem;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.alert-ok { background: var(--sage-wash); color: var(--sage-deep); border: 1px solid #CBD6CD; }
.alert-warn { background: #F7ECEC; color: var(--danger); border: 1px solid #E3CBCB; }

.badge {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.22rem 0.75rem;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    background: var(--ivory);
}

.badge-public { border-color: var(--sage); color: var(--sage-deep); background: var(--sage-wash); }
.badge-link { border-color: var(--gold-soft); color: var(--gold); background: var(--gold-wash); }
.badge-private { border-color: var(--line); }
.badge-pending { border-color: var(--gold-soft); color: var(--gold); }

/* ---- Dashboard ------------------------------------------------------------- */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.6rem;
}

.memorial-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}

.memorial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.memorial-card .card-portrait {
    height: 180px;
    background: linear-gradient(150deg, var(--ivory-deep), var(--gold-wash));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-soft);
    font-family: var(--serif);
    font-size: 3rem;
}

.memorial-card .card-portrait img { width: 100%; height: 100%; object-fit: cover; }

.memorial-card .card-body { padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.memorial-card .dates { color: var(--ink-faint); font-size: 0.9rem; }
.memorial-card .stats { display: flex; gap: 1rem; margin: 0.7rem 0 1rem; color: var(--ink-soft); font-size: 0.88rem; flex-wrap: wrap; }
.memorial-card .card-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---- Manage screen ---------------------------------------------------------- */

.manage-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; }

.manage-tabs button {
    font-family: var(--sans);
    font-size: 0.98rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.manage-tabs button.active { color: var(--ink); border-bottom-color: var(--gold); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }

.media-tile {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--ivory-deep);
}

.media-tile img, .media-tile video { width: 100%; height: 150px; object-fit: cover; display: block; }
.media-tile .tile-bar { display: flex; gap: 0.4rem; justify-content: space-between; align-items: center; padding: 0.45rem 0.6rem; font-size: 0.78rem; background: var(--paper); }
.media-tile .tile-actions { display: flex; gap: 0.45rem; }
.media-tile .tile-actions button { background: none; border: none; cursor: pointer; font-size: 0.78rem; color: var(--sage-deep); padding: 0; }
.media-tile .tile-actions button:hover { color: var(--gold); }
.media-tile.pending { outline: 2px solid var(--gold-soft); }

.upload-zone {
    border: 1.5px dashed var(--gold-soft);
    border-radius: var(--radius);
    background: var(--gold-wash);
    padding: 2rem;
    text-align: center;
    color: var(--ink-soft);
}

/* ---- Memorial public page ---------------------------------------------------- */

.memorial-page { background: var(--ivory); }

.memorial-hero {
    text-align: center;
    padding: clamp(3.5rem, 9vw, 6rem) 1.5rem 3rem;
    background:
        radial-gradient(ellipse 65% 60% at 50% 0%, var(--gold-wash) 0%, transparent 70%),
        var(--ivory);
}

.memorial-hero .portrait {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--paper);
    box-shadow: var(--shadow-lift);
    margin-bottom: 1.6rem;
    background: var(--ivory-deep);
}

.memorial-hero .portrait-placeholder {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 3.4rem;
    color: var(--gold-soft);
    background: linear-gradient(150deg, var(--paper), var(--gold-wash));
    border: 4px solid var(--paper);
    box-shadow: var(--shadow-lift);
    margin-bottom: 1.6rem;
}

.memorial-hero .in-memory { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
.memorial-hero h1 { font-weight: 500; }
.memorial-hero .known-as { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); }

.memorial-hero .life-dates {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--ink-soft);
    letter-spacing: 0.06em;
    margin-top: 0.5rem;
}

.memorial-actions {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.8rem;
}

.memorial-section { padding: 2.6rem 0; }

.memorial-section > .container-narrow > h2,
.memorial-section > .container > h2 { text-align: center; margin-bottom: 1.6rem; }

.obituary {
    font-size: 1.08rem;
    font-weight: 300;
    color: var(--ink);
    white-space: pre-line;
}

.obituary::first-letter { font-family: var(--serif); font-size: 2.1em; line-height: 1; padding-right: 2px; color: var(--gold); }

/* Gallery */

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gallery-grid a { display: block; border-radius: 8px; overflow: hidden; }
.gallery-grid img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform var(--transition); }
.gallery-grid a:hover img { transform: scale(1.03); }

.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.video-grid video { width: 100%; border-radius: 8px; background: #000; }

/* Events */

.event-card {
    display: flex;
    gap: 1.3rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}

.event-card .when {
    font-family: var(--serif);
    text-align: center;
    min-width: 74px;
    border-right: 1px solid var(--line);
    padding-right: 1.2rem;
}

.event-card .when .day { font-size: 1.9rem; line-height: 1; }
.event-card .when .month { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--gold); }
.event-card h3 { margin-bottom: 0.15rem; }
.event-card .meta { color: var(--ink-soft); font-size: 0.95rem; }

/* Guest book */

.candle-wall {
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

.candle-flame { font-size: 1.9rem; display: inline-block; animation: flicker 2.8s ease-in-out infinite; }

@keyframes flicker {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06) translateY(-1px); opacity: 0.88; }
}

.candle-wall .count { font-family: var(--serif); font-size: 1.25rem; margin: 0.4rem 0 1rem; }

.tribute-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}

.tribute-card .who { font-family: var(--serif); font-size: 1.12rem; }
.tribute-card .when-posted { color: var(--ink-faint); font-size: 0.82rem; margin-left: 0.5rem; }
.tribute-card p { margin: 0.5rem 0 0; color: var(--ink-soft); white-space: pre-line; }
.tribute-card.candle-note { background: var(--gold-wash); }

/* ---- Share box ---------------------------------------------------------------- */

.share-box { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.share-box code {
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

/* ---- Page transitions / misc --------------------------------------------------- */

.fade-in { animation: fadeIn 400ms ease both; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { padding: clamp(2.5rem, 6vw, 4rem) 0 1rem; }
.page-head p { color: var(--ink-soft); font-weight: 300; max-width: 40em; }

.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.6rem; } .mt-4 { margin-top: 2.4rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.6rem; }
.center { text-align: center; }
.muted { color: var(--ink-faint); }

/* ---- Validation + Blazor chrome ------------------------------------------------- */

.validation-message { color: var(--danger); font-size: 0.85rem; }

.invalid { border-color: var(--danger) !important; }

#blazor-error-ui {
    color-scheme: light only;
    background: var(--ivory-deep);
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--ink-faint); text-align: end; }

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* ---- Compatibility styles for the built-in Identity/Account pages ---------------- */

.form-control, .form-select {
    width: 100%;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
}

.form-control:focus, .form-select:focus { outline: none; border-color: var(--gold); }

.form-floating { position: relative; margin-bottom: 1rem; }
.form-floating > label { position: absolute; top: -0.7rem; left: 0.7rem; background: var(--paper); padding: 0 0.35rem; font-size: 0.78rem; color: var(--ink-faint); }

.form-label { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.form-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0; }
.form-check-label { color: var(--ink-soft); font-size: 0.95rem; }

.btn-lg { font-size: 1.05rem; padding: 0.8rem 1.9rem; }
.btn-link { background: none; border: none; color: var(--sage-deep); cursor: pointer; padding: 0; font-size: inherit; }
.btn-link:hover { color: var(--gold); }
.w-100 { width: 100%; }

.text-danger { color: var(--danger); }
.alert-danger { background: #F7ECEC; color: var(--danger); border: 1px solid #E3CBCB; border-radius: 8px; padding: 0.8rem 1.1rem; margin-bottom: 1rem; }
.alert-info, .alert-success { background: var(--sage-wash); color: var(--sage-deep); border: 1px solid #CBD6CD; border-radius: 8px; padding: 0.8rem 1.1rem; margin-bottom: 1rem; }

h1:focus, h2:focus { outline: none; }

/* ===========================================================================
   Page themes (MEM-7)
   Each theme re-points the palette variables inside the memorial article only,
   so the surrounding site chrome keeps its own identity. The same five keys
   drive the slideshow colour grade, so the video matches the page it came from.
   =========================================================================== */

.memorial-page {
    background: var(--ivory);
    color: var(--ink);
}

.memorial-page.theme-twilight {
    --ivory: #141A2B;
    --ivory-deep: #1B2238;
    --paper: #1E263C;
    --ink: #F2EFE8;
    --ink-soft: #C3BFB4;
    --ink-faint: #8D8A82;
    --gold: #D8B26A;
    --gold-soft: #B99A5E;
    --gold-wash: #232B44;
    --sage-deep: #C9B98E;
    --line: #2E3752;
    --shadow-soft: 0 2px 24px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.memorial-page.theme-garden {
    --ivory: #EDF1EC;
    --ivory-deep: #E2E9E1;
    --gold: #7C9182;
    --gold-soft: #A3B4A6;
    --gold-wash: #E4EBE3;
    --ink: #28332B;
    --ink-soft: #57635A;
    --line: #D2DCD1;
}

.memorial-page.theme-seaside {
    --ivory: #EAF0F3;
    --ivory-deep: #DDE7EC;
    --gold: #6E93A6;
    --gold-soft: #9BB6C4;
    --gold-wash: #E0EAEF;
    --ink: #24333B;
    --ink-soft: #52646E;
    --line: #CCDBE2;
}

.memorial-page.theme-legacy {
    --ivory: #F1E9DC;
    --ivory-deep: #E8DECD;
    --gold: #9C7B4E;
    --gold-soft: #BFA179;
    --gold-wash: #EAE0CF;
    --ink: #3A3128;
    --ink-soft: #6A5C4B;
    --line: #DED0BA;
}

/* Cards read from the variables above, so they follow the theme along. */
.memorial-page .panel,
.memorial-page .tribute-card,
.memorial-page .event-card,
.memorial-page .candle-wall { background: var(--paper); border-color: var(--line); }

/* Prose links take the theme's accent — but not buttons.
   `.memorial-page a` outweighs `.btn-gold`, so without :not(.btn) a gold button
   inside a themed page had its text repainted the same colour as its own
   background and vanished, and a quiet button's dark label became pale accent
   on near-white. Buttons have their own colours; leave them alone. */
.memorial-page a:not(.btn) { color: var(--gold); }
.memorial-page a:not(.btn):hover { color: var(--ink); }

/* ---- Gallery attribution (MED-4) ---------------------------------------------- */

.gallery-grid a { position: relative; }

.gallery-grid .added-by {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.7rem 0.4rem;
    font-size: 0.74rem;
    color: #FFF;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}

.gallery-grid a:hover .added-by,
.gallery-grid a:focus-visible .added-by { opacity: 1; }

/* ---- Featured tribute video (SLD-9) ------------------------------------------- */

.featured-slideshow video {
    width: 100%;
    border-radius: var(--radius);
    background: #000;
    box-shadow: var(--shadow-lift);
    display: block;
}

/* ---- Donation card (MEM-8) ----------------------------------------------------- */

.donation-card {
    text-align: center;
    background: var(--gold-wash);
    border: 1px solid var(--gold-soft);
    border-radius: var(--radius);
    padding: 1.8rem 1.5rem;
}

.donation-card .glyph { font-size: 1.6rem; color: var(--gold); }
.donation-card h3 { margin: 0.3rem 0 0.2rem; }
.donation-card p { margin-bottom: 0.9rem; }

/* ---- Share bar and QR (PRV-3) -------------------------------------------------- */

.share-bar { text-align: center; }
.share-bar .share-box { justify-content: center; }

.share-links { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.share-link {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font-size: 0.88rem;
    font-family: var(--sans);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--sage-deep);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

.share-link:hover { border-color: var(--gold); color: var(--gold); }

.qr-panel {
    display: inline-block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem;
}

.qr-panel img { display: block; margin: 0 auto; }

/* ---- Badges and tabs ------------------------------------------------------------ */

.badge-ok { border-color: var(--sage); color: var(--sage-deep); background: var(--sage-wash); }
.badge-warn { border-color: #E3CBCB; color: var(--danger); background: #F7ECEC; }
.badge-working { border-color: var(--gold-soft); color: var(--gold); background: var(--gold-wash); }

.manage-tabs button { position: relative; }

.tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* ---- Alerts -------------------------------------------------------------------- */

.alert-upgrade {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: var(--gold-wash);
    border: 1px solid var(--gold-soft);
    color: var(--ink-soft);
    border-radius: 8px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1rem;
}

/* ---- Slideshow builder (SLD-1, SLD-5) ------------------------------------------ */

.render-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

.render-idle,
.render-working {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.render-working { justify-content: flex-start; }
.render-working .candle-flame { font-size: 2.2rem; }

.render-ready { display: grid; grid-template-columns: minmax(280px, 1.2fr) 1fr; gap: 1.6rem; align-items: start; }
.render-ready video { width: 100%; border-radius: 8px; background: #000; display: block; }

@media (max-width: 780px) {
    .render-ready { grid-template-columns: 1fr; }
}

.watermark-note {
    background: var(--gold-wash);
    border: 1px solid var(--gold-soft);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    font-size: 0.92rem;
}

.slide-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.slide-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--paper);
    cursor: grab;
    transition: box-shadow var(--transition), opacity var(--transition);
}

.slide-card:hover { box-shadow: var(--shadow-soft); }
.slide-card.dragging { opacity: 0.45; }
.slide-card img { width: 100%; height: 130px; object-fit: cover; display: block; }

.slide-number {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    background: rgba(43, 43, 43, 0.72);
    color: #FFF;
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.slide-kind {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: var(--gold);
    color: #FFF;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.slide-foot { padding: 0.45rem 0.5rem; }

.slide-caption,
.tile-caption {
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-soft);
    padding: 0.2rem 0;
}

.slide-caption:focus,
.tile-caption:focus { outline: none; border-bottom-color: var(--gold-soft); }

.tile-caption { padding: 0.35rem 0.6rem; border-top: 1px solid var(--line); }

.slide-tools { display: flex; gap: 0.3rem; justify-content: flex-end; margin-top: 0.25rem; }

.slide-tools button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-faint);
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
}

.slide-tools button:hover:not(:disabled) { color: var(--gold); }
.slide-tools button:disabled { opacity: 0.3; cursor: default; }

.media-tile.dragging { opacity: 0.45; }
.media-tile .tile-actions button.danger:hover { color: var(--danger); }

.range { width: 100%; accent-color: var(--gold); }

/* ---- Music picker (SLD-3) ------------------------------------------------------ */

.music-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
}

.music-row:last-child { border-bottom: none; }
.music-row.chosen { background: var(--gold-wash); margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
.music-row strong { font-family: var(--serif); font-size: 1.1rem; }

/* ---- Contribute page (ACC-4) --------------------------------------------------- */

.contribute-head { text-align: center; margin-bottom: 2rem; }

.contribute-head .portrait-small {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--paper);
    box-shadow: var(--shadow-lift);
    margin-bottom: 1rem;
}

/* ---- Directory (PRV-4) --------------------------------------------------------- */

.directory-search { display: flex; gap: 0.6rem; max-width: 34rem; margin: 0 auto; }
.directory-search .input { flex: 1; }

.directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; }

.directory-card {
    display: block;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.4rem 1rem;
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition), transform var(--transition);
}

.directory-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.directory-card h3 { margin: 0.8rem 0 0.15rem; font-size: 1.15rem; }
.directory-card .card-portrait { width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; overflow: hidden; }
.directory-card .card-portrait img { width: 100%; height: 100%; object-fit: cover; }

.life-dates-small { font-family: var(--serif); color: var(--ink-faint); font-size: 0.95rem; }

/* ---- Manage: members, address, danger zone ------------------------------------- */

.member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

.member-row:last-of-type { border-bottom: none; }

.slug-editor { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.slug-editor .input { flex: 1; min-width: 12rem; }
.slug-prefix { color: var(--ink-faint); font-size: 0.9rem; overflow-wrap: anywhere; }

.danger-panel { border-color: #E3CBCB; }
.danger-panel h3 { color: var(--danger); }

.btn-link.danger { color: var(--danger); }

.tribute-photo { max-width: 220px; border-radius: 8px; margin-top: 0.7rem; display: block; }

.back-link { display: inline-block; font-size: 0.9rem; margin-bottom: 0.8rem; }

/* ---- FAQ ------------------------------------------------------------------------ */

.faq-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
    margin-bottom: 0.7rem;
}

.faq-item summary {
    cursor: pointer;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; color: var(--gold); margin-right: 0.5rem; }
.faq-item[open] summary::before { content: "\2013"; }
.faq-answer { color: var(--ink-soft); padding-top: 0.6rem; }

/* ---- Legal pages ---------------------------------------------------------------- */

.legal h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }

/* ---- Example page (MKT-4) ------------------------------------------------------- */

.example-banner {
    background: var(--ink);
    color: var(--ivory);
    padding: 0.7rem 0;
    font-size: 0.92rem;
}

.example-banner .container {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.example-slot,
.example-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--gold-wash);
    border: 1.5px dashed var(--gold-soft);
    border-radius: var(--radius);
    color: var(--ink-soft);
}

.example-slot { padding: 3rem 1.5rem; }
.example-slot .glyph { font-size: 2rem; color: var(--gold); margin-bottom: 0.4rem; }

.example-photo { height: 210px; padding: 1rem; }
.example-photo .glyph { font-size: 1.6rem; color: var(--gold-soft); }
.example-caption { font-family: var(--serif); font-size: 0.95rem; margin-top: 0.4rem; }

/* ---- Pricing extras -------------------------------------------------------------- */

.alacarte {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* ---- Footer ---------------------------------------------------------------------- */

.footer-links { display: flex; flex-direction: column; gap: 0.35rem; }

/* ---- Obituary writing assistant (MEM-3) ------------------------------------------ */

.assistant-panel {
    background: var(--gold-wash);
    border: 1px solid var(--gold-soft);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.6rem;
}

.assistant-invite {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.assistant-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.assistant-draft {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.3rem 1.5rem;
}

.draft-head {
    display: flex;
    gap: 0.8rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}

/* The draft is prose the family is about to read closely, so it gets the reading
   treatment the finished page uses rather than form-field styling. */
.obituary-draft {
    white-space: pre-line;
    font-size: 1.04rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--ink);
    margin: 0;
}

.draft-actions {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.ml-1 { margin-left: 0.5rem; }

/* ---- Life timeline (MEM-4) --------------------------------------------------------- */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
    position: relative;
}

/* The spine. Drawn behind the entries so the date markers sit on top of it. */
.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 1px;
    background: var(--gold-soft);
}

.timeline-entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.2rem;
    align-items: start;
    padding: 0 0 1.8rem 1.4rem;
}

.timeline-entry::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    width: 9px;
    height: 9px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--ivory);
}

.timeline-when {
    grid-column: 1 / -1;
    font-family: var(--serif);
    font-size: 0.98rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-bottom: 0.2rem;
}

.timeline-body h3 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.timeline-body p { margin: 0; color: var(--ink-soft); white-space: pre-line; }

.timeline-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid var(--paper);
    box-shadow: var(--shadow-soft);
}

@media (max-width: 620px) {
    .timeline-entry { grid-template-columns: 1fr; }
    .timeline-photo { width: 100%; height: 180px; }
}

.timeline-tools { display: flex; gap: 0.8rem; margin-top: 0.5rem; font-size: 0.9rem; }

/* ---- Reactions (GBK-5) -------------------------------------------------------------- */

.reaction-bar {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}

.reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ink-faint);
    transition: background var(--transition), border-color var(--transition);
}

.reaction:hover:not(:disabled) { background: var(--ivory-deep); }
.reaction:disabled { cursor: default; opacity: 0.6; }

/* The reader's own reactions are marked, so tapping again clearly takes one back. */
.reaction.mine {
    border-color: var(--gold-soft);
    background: var(--gold-wash);
    color: var(--ink-soft);
}

.reaction .glyph { font-size: 1rem; line-height: 1; }
.reaction .count { font-variant-numeric: tabular-nums; }

/* ---- RSVP (MEM-5) -------------------------------------------------------------------- */

.rsvp-panel {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.rsvp-head {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.rsvp-choices { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.rsvp-choice {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.92rem;
    transition: border-color var(--transition), background var(--transition);
}

.rsvp-choice:hover { border-color: var(--gold-soft); }
.rsvp-choice.chosen { border-color: var(--gold); background: var(--gold-wash); color: var(--ink); }

.rsvp-thanks { margin: 0; color: var(--ink-soft); }

.rsvp-summary { border-top: 1px dashed var(--line); padding-top: 0.7rem; }

.rsvp-list summary { cursor: pointer; color: var(--sage-deep); font-size: 0.92rem; }

.rsvp-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.rsvp-row:last-child { border-bottom: none; }

/* ---- Resource centre (MKT-6) -------------------------------------------------------- */

.resource-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    margin-bottom: 0.9rem;
    box-shadow: var(--shadow-soft);
    transition: box-shadow var(--transition), transform var(--transition);
}

.resource-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.resource-card h3 { margin: 0 0 0.3rem; }
.resource-card p { margin: 0 0 0.4rem; color: var(--ink-soft); }

.resource-article h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.resource-article p { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.75; }
.resource-article .lede { color: var(--ink); }

/* A tick rather than a bullet: these are lists people work through. */
.checklist { list-style: none; padding-left: 0; margin: 1rem 0 1.4rem; }

.checklist li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.6rem;
    color: var(--ink-soft);
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold);
    font-size: 0.95rem;
}

/* ---- Slideshow pacing (SLD-8) -------------------------------------------------------- */

.pacing-box {
    background: var(--ivory-deep);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem 1.2rem;
}

/* ---- Pet themes (MEM-10) ------------------------------------------------------------ */

.memorial-page.theme-meadow {
    --ivory: #EFF4E8;
    --ivory-deep: #E4EDD9;
    --gold: #7A9A52;
    --gold-soft: #A6BE86;
    --gold-wash: #E7EFDC;
    --ink: #2C3A24;
    --ink-soft: #566349;
    --line: #D5E2C4;
}

.memorial-page.theme-hearth {
    --ivory: #F6EDE2;
    --ivory-deep: #EFE1D0;
    --gold: #C08A4C;
    --gold-soft: #D6AE81;
    --gold-wash: #F1E3D2;
    --ink: #3B2E24;
    --ink-soft: #6B5A4A;
    --line: #E4D3BE;
}

/* ---- Person or pet, on the creation wizard (MEM-10) --------------------------------- */

.kind-choice { display: flex; gap: 0.8rem; margin-bottom: 1.4rem; flex-wrap: wrap; }

.kind-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 1rem;
    transition: border-color var(--transition), background var(--transition);
}

.kind-option:hover { border-color: var(--gold-soft); }
.kind-option.chosen { border-color: var(--gold); background: var(--gold-wash); color: var(--ink); }
.kind-option .glyph { font-size: 1.2rem; }

/* ---- Voice recordings (MED-7) -------------------------------------------------------- */

.recording-card {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 0.9rem;
    box-shadow: var(--shadow-soft);
}

.recording-card .glyph { font-size: 1.5rem; line-height: 1.2; }
.recording-card audio { width: 100%; margin-top: 0.6rem; }

/* A recording has nothing to look at, so its tile is a labelled player. */
.audio-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 150px;
    padding: 0.8rem;
    background: var(--gold-wash);
}

.audio-tile .glyph { font-size: 1.6rem; }
.audio-tile audio { width: 100%; height: 34px; }

/* ---- Gifting (PAY-5) ----------------------------------------------------------------- */

.gift-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; }

.gift-option {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
    font-family: var(--sans);
    transition: border-color var(--transition), background var(--transition);
}

.gift-option:hover { border-color: var(--gold-soft); }
.gift-option.chosen { border-color: var(--gold); background: var(--gold-wash); }
.gift-option strong { font-family: var(--serif); font-size: 1.2rem; }
.gift-option .amount { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); }

.code-input {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.gift-code {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;
    letter-spacing: 0.08em;
    background: var(--ivory-deep);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
}

.gift-note {
    margin: 1.2rem auto 0;
    max-width: 32em;
    padding: 0 0 0 14px;
    border-left: 3px solid var(--gold-soft);
    color: var(--ink-soft);
    text-align: left;
    font-style: italic;
}

/* ===========================================================================
   Printed order of service (Phase 3 — keepsakes)

   Four sides made from what is already on the page, so a family can put a
   programme in people's hands without paying anyone for design work.

   Two rules govern everything below:

   1. It must print correctly on both A4 and US Letter without the family
      choosing. So the page box is never given a fixed height — a min-height of
      240mm fits inside the shorter of the two printable areas (Letter, 249mm
      at 15mm margins) while still filling A4's 267mm respectably.
   2. It must not empty an ink cartridge. The Twilight theme is white text on
      near-black; on paper that is both unreadable and expensive, so the sheet
      is always ink-on-white and only borrows each theme's accent colour.
   =========================================================================== */

.program {
    --program-ink: #2B2721;
    --program-soft: #6A645B;
    --program-accent: var(--gold, #B08D57);
    --program-line: #D9D2C6;

    background: #FFF;
    color: var(--program-ink);
    max-width: 210mm;
    margin: 0 auto 3rem;
}

/* Only the accent travels from the theme; the paper stays paper. */
.program.theme-twilight { --program-accent: #A98A4E; }
.program.theme-garden   { --program-accent: #6C8273; }
.program.theme-seaside  { --program-accent: #5E8395; }
.program.theme-legacy   { --program-accent: #8C6B3E; }
.program.theme-meadow   { --program-accent: #6E8F5A; }
.program.theme-hearth   { --program-accent: #A8663F; }

.program-page {
    min-height: 240mm;
    padding: 18mm 16mm;
    border: 1px solid var(--program-line);
    border-radius: 4px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    background: #FFF;
}

.program-cover,
.program-back {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.program-rule {
    width: 46mm;
    height: 1px;
    background: var(--program-accent);
    margin: 0 auto;
    flex: 0 0 auto;
}

.program-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--program-soft);
    margin: 10mm 0 8mm;
}

.program-portrait {
    width: 78mm;
    height: 96mm;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 9mm;
}

.program-name {
    font-family: var(--font-display, Georgia, serif);
    font-size: 2.5rem;
    line-height: 1.15;
    margin: 0;
    color: var(--program-ink);
}

.program-known-as {
    font-style: italic;
    color: var(--program-soft);
    margin-top: 2mm;
}

.program-dates {
    color: var(--program-soft);
    margin: 5mm 0 10mm;
    font-size: 1.02rem;
}

.program-heading {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.5rem;
    text-align: center;
    margin: 0 0 8mm;
    color: var(--program-ink);
}

.program-heading::after {
    content: "";
    display: block;
    width: 26mm;
    height: 1px;
    background: var(--program-accent);
    margin: 4mm auto 0;
}

.program-heading-second { margin-top: 12mm; }

.program-event { margin-bottom: 9mm; text-align: center; }
.program-event h3 { font-family: var(--font-display, Georgia, serif); font-size: 1.15rem; margin: 0 0 1.5mm; }
.program-event-when { color: var(--program-ink); }
.program-event-where { color: var(--program-soft); margin-top: 1mm; }
.program-event-detail { color: var(--program-soft); margin: 2.5mm auto 0; max-width: 34em; font-size: 0.95rem; }

.program-timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 36em; }
.program-timeline li {
    display: flex;
    gap: 6mm;
    padding: 2mm 0;
    border-bottom: 1px solid var(--program-line);
}
.program-timeline li:last-child { border-bottom: none; }
.program-timeline-when { color: var(--program-soft); min-width: 34mm; font-variant-numeric: tabular-nums; }
.program-timeline-what { color: var(--program-ink); }

.program-body {
    line-height: 1.75;
    margin: 0 0 4mm;
    /* Justified text with hyphenation reads as "printed" rather than "web page". */
    text-align: justify;
    hyphens: auto;
}

.program-centre { text-align: center; }
.program-muted { color: var(--program-soft); text-align: center; }

.program-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5mm;
}
.program-photos img {
    width: 100%;
    height: 58mm;
    object-fit: cover;
    border-radius: 2px;
}

.program-closing {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 24em;
    margin: 10mm auto 8mm;
}

.program-qr { width: 32mm; height: 32mm; margin: 6mm auto; }

.program-link {
    color: var(--program-accent);
    font-size: 0.95rem;
    word-break: break-all;
    margin: 1mm 0 10mm;
}

.program-partner {
    color: var(--program-soft);
    font-size: 0.85rem;
    margin: 0 0 8mm;
}

@media print {
    /* `auto` rather than a named size, so the sheet already in the tray is used. */
    @page { size: auto; margin: 15mm; }

    /* Hide the chrome by name. A blanket `body > *:not(.program)` would not work —
       the programme sits inside the site shell, so that rule hides its own ancestor. */
    header,
    footer,
    nav,
    .no-print,
    #blazor-error-ui,
    #components-reconnect-modal {
        display: none !important;
    }

    /* Neutralise the wrappers so the sheet starts at the top of the page. */
    html, body { background: #FFF; margin: 0; padding: 0; }

    .site-shell,
    main.page,
    .section,
    .container {
        display: block;
        margin: 0;
        padding: 0;
        max-width: none;
        min-height: 0;
    }

    .program { max-width: none; margin: 0; }

    .program-page {
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
        /* One side of paper each, and never split mid-page. */
        break-after: page;
        break-inside: avoid;
    }

    .program-page:last-child { break-after: auto; }

    /* Printers drop backgrounds by default, which would lose every rule and tint. */
    .program-rule,
    .program-heading::after,
    .program-photos img,
    .program-portrait {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ===========================================================================
   Account pages (sign in, register, password reset)

   The scaffolded Identity pages are laid out with Bootstrap's grid, which this
   site does not load — so `row` and `col-lg-6` did nothing and every field ran
   the full width of the window. AccountLayout gives them a column; the rules
   below make what is inside it look like the rest of the site rather than like
   an unstyled form.

   Everything is scoped under .auth-card on purpose. These are Bootstrap's class
   names, and defining them globally would quietly restyle anything that happens
   to share one.
   =========================================================================== */

.auth-section {
    display: flex;
    justify-content: center;
    padding: clamp(2.5rem, 7vw, 4.5rem) 1rem clamp(3rem, 8vw, 5rem);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
}

.auth-card h1 {
    font-size: clamp(1.9rem, 4vw, 2.3rem);
    text-align: center;
    margin: 0 0 1.6rem;
}

/* The template's "Create a new account." / "Use a local account to log in." —
   an instruction, not a second heading, so it is set as one. */
.auth-card h2 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink-soft);
    text-align: center;
    margin: 0 0 1.5rem;
    letter-spacing: 0;
}

.auth-card h3 {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-soft);
    text-align: center;
    margin: 0 0 1rem;
}

.auth-card hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 1.5rem 0;
}

/* The heading rules sit directly under their heading, so the separator the
   template puts there would only crowd it. */
.auth-card h2 + hr,
.auth-card h3 + hr {
    display: none;
}

.auth-card .form-floating,
.auth-card .mb-3 { margin-bottom: 1.1rem; }

.auth-card .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
    cursor: pointer;
}

.auth-card .form-check-input { margin: 0; }

/* Links the template stacks in <p> tags: forgotten password, register, resend. */
.auth-card p {
    margin: 0.5rem 0;
    text-align: center;
    font-size: 0.95rem;
}

/* Same trap as .memorial-page a: this would outweigh .btn-*. Only prose links. */
.auth-card a:not(.btn) { color: var(--sage-deep); }
.auth-card a:not(.btn):hover { color: var(--gold); }

/* Bootstrap utilities the passkey block relies on. */
.auth-card .d-flex { display: flex; }
.auth-card .flex-column { flex-direction: column; }
.auth-card .mx-auto { margin-left: auto; margin-right: auto; }
.auth-card .mt-2 { margin-top: 0.5rem; }

.auth-card .text-secondary {
    color: var(--ink-faint);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-card .validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* The external-provider column, which the grid used to place beside the form. */
.auth-card .col-lg-4 { margin-top: 2rem; }

.auth-card .col-lg-4 p,
.auth-card .col-lg-4 .text-secondary {
    color: var(--ink-faint);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ---- Manage account -------------------------------------------------------
   Wider than the sign-in card: these pages carry a side nav beside the form. */

.manage-account { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }

.manage-account h1 { font-size: clamp(1.8rem, 4vw, 2.2rem); margin-bottom: 0.4rem; }

.manage-layout {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 720px) {
    .manage-layout { grid-template-columns: minmax(0, 1fr); }
}

.auth-card .external-logins {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ===========================================================================
   The printed-piece editor

   One idea holds all of this together: every position is a percentage of the
   sheet, never a pixel. The canvas on screen is whatever width the window
   allows and the sheet is 210mm — a pixel would be wrong on one of them. So the
   canvas is given the paper's aspect ratio and everything inside is positioned
   in percentages, which makes "what you see" and "what prints" the same
   arithmetic rather than two that have to be kept in step.

   Type is sized against --page-h, set on the sheet, for the same reason.
   =========================================================================== */

.pe { display: flex; flex-direction: column; min-height: calc(100vh - 78px); }

.pe-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem clamp(1rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    flex-wrap: wrap;
}

.pe-bar-left, .pe-bar-right { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

.pe-title {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    background: transparent;
    min-width: 12rem;
}

.pe-title:hover { border-color: var(--line); }
.pe-title:focus { outline: none; border-color: var(--gold); background: var(--ivory); }

.pe-saved { color: var(--ink-faint); font-size: 0.85rem; min-width: 5rem; text-align: right; }

.input-sm { padding: 0.35rem 0.6rem; font-size: 0.9rem; width: auto; }

.pe-body {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 17rem;
    gap: 1rem;
    padding: 1rem clamp(0.5rem, 2vw, 1.5rem) 3rem;
    align-items: start;
}

@media (max-width: 1100px) {
    /* The sheet comes first: on a narrow screen the panels are reference, the
       page is the work. */
    .pe-body { grid-template-columns: minmax(0, 1fr); }
    .pe-stage { order: -1; }
    .pe-tools, .pe-props { position: static; }
}

.pe-tools, .pe-props {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    position: sticky;
    top: 5.5rem;
}

.pe-tools-head {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-family: var(--sans);
    margin: 0 0 0.6rem;
}

.pe-tools .pe-tools-head:not(:first-child) { margin-top: 1.5rem; }

.pe-add { display: flex; flex-direction: column; gap: 0.45rem; }

.pe-tray {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    max-height: 16rem;
    overflow-y: auto;
}

.pe-tray-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    cursor: grab;
    border: 1px solid var(--line);
}

.pe-tray-photo:hover { border-color: var(--gold); }
.pe-tray-photo:active { cursor: grabbing; }

/* ---- The sheet ------------------------------------------------------------ */

.pe-stage { display: flex; flex-direction: column; align-items: center; }

.pe-pagebar { display: flex; gap: 0.3rem; margin-bottom: 0.8rem; flex-wrap: wrap; justify-content: center; }

.pe-pagetab {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.pe-pagetab:hover { border-color: var(--gold); }
.pe-pagetab.is-current { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pe-pagetab-add { font-size: 1rem; line-height: 1; padding: 0.3rem 0.7rem; }

.pe-canvas-wrap { width: 100%; max-width: 46rem; }

/* The sheet. --page-h is what type is sized against, so the same layout reads
   identically at any canvas width and on paper. */
.print-sheet {
    --page-h: 100cqh;
    --print-serif: 'Cormorant Garamond', Georgia, serif;
    --print-sans: 'Source Sans 3', 'Segoe UI', sans-serif;
    --print-accent: #B08D57;

    container-type: size;
    position: relative;
    width: 100%;
    background: #FFF;
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}

/* Only the accent travels from the page's theme. The sheet stays ink-on-white
   whatever the memorial looks like — Twilight is white-on-near-black, which on
   paper is both unreadable and expensive. */
.print-sheet.theme-twilight { --print-accent: #A98A4E; }
.print-sheet.theme-garden   { --print-accent: #6C8273; }
.print-sheet.theme-seaside  { --print-accent: #5E8395; }
.print-sheet.theme-legacy   { --print-accent: #8C6B3E; }
.print-sheet.theme-meadow   { --print-accent: #6E8F5A; }
.print-sheet.theme-hearth   { --print-accent: #A8663F; }

.pe-canvas.is-drop-target { outline: 2px dashed var(--gold); outline-offset: -4px; }

.pe-el, .pe-el-print { position: absolute; }

.pe-el {
    cursor: move;
    outline: 1px dashed transparent;
    outline-offset: 2px;
    touch-action: none;
}

.pe-el:hover { outline-color: var(--gold-soft); }
.pe-el:focus-visible { outline: 2px solid var(--gold); }
.pe-el.is-selected { outline: 1.5px solid var(--gold); }
.pe-el.is-dragging { outline-style: solid; opacity: 0.92; }

.pe-text {
    width: 100%;
    height: 100%;
    line-height: 1.45;
    /* Newlines are how a family separates a service's title, time and place
       inside one box, so they have to survive. */
    white-space: pre-wrap;
    overflow: hidden;
}

.pe-image, .pe-qr { width: 100%; height: 100%; display: block; }
.pe-qr { object-fit: contain; }
.pe-rule { width: 100%; height: 1px; margin-top: calc(var(--page-h) * 0.01); }

.pe-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    background: var(--paper);
    border: 1.5px solid var(--gold);
    border-radius: 2px;
}

.pe-handle[data-handle="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.pe-handle[data-handle="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.pe-handle[data-handle="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.pe-handle[data-handle="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* Shown only at the moment something has actually snapped to the middle. */
.pe-guide-v, .pe-guide-h { position: absolute; display: none; background: var(--gold); opacity: 0.5; }
.pe-guide-v { left: 50%; top: 0; bottom: 0; width: 1px; }
.pe-guide-h { top: 50%; left: 0; right: 0; height: 1px; }

/* ---- Properties ------------------------------------------------------------ */

.pe-props-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
.pe-props-head h3 { font-size: 1rem; margin: 0; }
.pe-props-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.pe-swatches { display: flex; gap: 0.5rem; }

.pe-swatch {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    border: 2px solid var(--line);
    cursor: pointer;
    padding: 0;
}

.pe-swatch.is-current { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-wash); }

.print-only { display: none; }

/* ---- On paper --------------------------------------------------------------
   The canvas rules already position everything in percentages, so printing is
   mostly a matter of hiding the editor and giving each sheet a page to itself. */

@media print {
    @page { size: auto; margin: 0; }

    .pe, .no-print, header, footer, nav, #blazor-error-ui, #components-reconnect-modal {
        display: none !important;
    }

    html, body { background: #FFF; margin: 0; padding: 0; }
    .site-shell, main.page { display: block; margin: 0; padding: 0; min-height: 0; }

    .print-only { display: block; }

    .print-page {
        width: 100%;
        box-shadow: none;
        break-after: page;
        break-inside: avoid;
    }

    .print-page:last-child { break-after: auto; }

    /* Printers drop backgrounds by default, which would lose every rule and
       every photograph on the sheet. */
    .print-page, .print-page * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ---- "Would you rather we did it?" ----------------------------------------
   Shown wherever a family could make something themselves. Quiet on purpose,
   and always below the thing it offers to replace: this appears to someone
   arranging a funeral, and an upsell that shouts at them there would be the
   worst-judged element on the site. */

.design-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold-soft);
    border-radius: 8px;
    background: var(--ivory-deep);
}

.design-offer strong {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
}

.design-offer p {
    margin: 0.15rem 0 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
    max-width: 52ch;
}

/* ---- storage dashboard (VED-139) ------------------------------------------ */

.storage-bar {
    height: 12px;
    background: #EDE7DC;
    border-radius: 999px;
    overflow: hidden;
    margin: 0.4rem 0 0.5rem;
}

.storage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8C6F3F, #B08D57);
    transition: width 300ms ease;
}

.storage-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
    margin: 1.4rem 0 0;
}

.storage-figures dt { color: #6E6558; font-size: 0.85rem; }
.storage-figures dd { margin: 0.1rem 0 0; font-size: 1.35rem; font-family: 'Cormorant Garamond', Georgia, serif; }
.storage-figures .hint { margin-top: 0.2rem; }