/* Use the device's clean sans-serif family consistently across the site. */
html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--pp-surface), 0 0 0 0.25rem var(--pp-primary);
}

/* The site shell: a letterhead along the top and a colophon along the bottom,
   in the same language as Home: Newsreader for the wordmark, Atkinson
   Hyperlegible for links, deep ink and warm paper, crimson for counts and the
   page you're on. The fonts' @font-face rules are with Home's styles below. */
.site-navbar,
.site-footer {
    --pp-serif: "Newsreader", "Iowan Old Style", "Sitka Text", Georgia, serif;
    --pp-shell-sans: "Atkinson Hyperlegible", var(--pp-font);
}

:root:not([data-bs-theme="dark"]) .site-navbar {
    --pp-bar: #FFFFFF;
    --pp-bar-hover: #F4EFE5;
    --pp-bar-text: #14223D;
    --pp-bar-muted: #5A6175;
    --pp-bar-rule: #E3DACA;
    --pp-bar-count: #A83246;
    --pp-on-bar-count: #FFFFFF;
    --pp-bar-mark: #A83246;
}

:root[data-bs-theme="dark"] .site-navbar {
    --pp-bar: #111829;
    --pp-bar-hover: #1E2740;
    --pp-bar-text: #ECEFF7;
    --pp-bar-muted: #AEB6CB;
    --pp-bar-rule: #2C3754;
    --pp-bar-count: #F0909F;
    --pp-on-bar-count: #3A0F18;
    --pp-bar-mark: #F0909F;
}

/* The colophon is always ink: paper-coloured text on the deep navy, a shade
   deeper in dark mode. */
.site-footer {
    --pp-bar: #14223D;
    --pp-bar-text: #F7F2E8;
    --pp-bar-muted: #AEB6CB;
    --pp-bar-rule: #2E3D5C;
    --pp-bar-mark: #F0909F;
}

:root[data-bs-theme="dark"] .site-footer {
    --pp-bar: #0C1322;
    --pp-bar-rule: #26314B;
}

/* Letterhead ------------------------------------------------------------- */
.site-navbar {
    --bs-navbar-toggler-border-color: var(--pp-bar-rule);
    --bs-navbar-toggler-border-radius: 999px;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2314223D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M5 9h20M5 15h20M5 21h20'/%3e%3c/svg%3e");
    --bs-navbar-color: var(--pp-bar-text);
    --bs-navbar-hover-color: var(--pp-bar-text);
    --bs-navbar-brand-color: var(--pp-bar-text);
    --bs-navbar-brand-hover-color: var(--pp-bar-text);
    padding: 0;
    border-bottom: 1px solid var(--pp-bar-rule);
    background-color: var(--pp-bar);
    font-family: var(--pp-shell-sans);
}

:root[data-bs-theme="dark"] .site-navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ECEFF7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M5 9h20M5 15h20M5 21h20'/%3e%3c/svg%3e");
}

    .site-navbar a:focus-visible,
    .site-navbar button:focus-visible {
        outline: 2px solid var(--pp-bar-text);
        outline-offset: 2px;
        box-shadow: none;
    }

.navbar-row {
    min-height: 3.6rem;
    gap: 0 1.25rem;
}

/* The wordmark: a small ink seal with the initials, then "Hello" in roman and
   "Across" in crimson italic. */
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: 0;
    padding: 0;
}

.site-brand-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background-color: var(--pp-bar-text);
    color: var(--pp-bar);
    font-family: var(--pp-serif);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.site-brand:hover .site-brand-seal,
.site-brand:focus-visible .site-brand-seal {
    transform: rotate(-24deg);
}

.navbar-brand-name {
    color: var(--pp-bar-text);
    font-family: var(--pp-serif);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.brand-pal {
    color: var(--pp-bar-mark);
    font-style: italic;
}

/* The main pages: quiet labels with a small icon. A short crimson rule grows
   under the one you point at and stays under the page you're on. Scoped to
   .site-navbar .navbar-nav to outrank Bootstrap's nav-link rules. */
.navbar-main-links {
    gap: 0.15rem;
}

.site-navbar .navbar-nav .navbar-main-link {
    position: relative;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    color: var(--pp-bar-muted);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.18s ease, background-color 0.18s ease;
}

    .site-navbar .navbar-nav .navbar-main-link .bi {
        font-size: 0.95rem;
    }

    .site-navbar .navbar-nav .navbar-main-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0.15rem;
        width: 1.25rem;
        height: 2px;
        margin-left: -0.625rem;
        border-radius: 2px;
        background-color: var(--pp-bar-mark);
        transform: scaleX(0);
        transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .site-navbar .navbar-nav .navbar-main-link:hover,
    .site-navbar .navbar-nav .navbar-main-link:focus {
        color: var(--pp-bar-text);
    }

        .site-navbar .navbar-nav .navbar-main-link:hover::after,
        .site-navbar .navbar-nav .navbar-main-link:focus-visible::after {
            transform: scaleX(0.6);
        }

.site-navbar .navbar-nav .navbar-main-link-active {
    color: var(--pp-bar-text);
    font-weight: 700;
}

    .site-navbar .navbar-nav .navbar-main-link-active::after,
    .site-navbar .navbar-nav .navbar-main-link-active:hover::after {
        transform: scaleX(1);
    }

/* Counts sit on the icon's top corner, ringed in the band's colour. */
.nav-icon-anchor {
    position: relative;
    display: inline-flex;
}

.nav-count-badge {
    position: absolute;
    top: -0.55rem;
    left: 0.6rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background-color: var(--pp-sunrise);
    color: var(--pp-on-sunrise);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.nav-count-badge[hidden] {
    display: none;
}

.site-navbar .notification-badge,
.site-navbar .nav-count-badge {
    --pp-sunrise: var(--pp-bar-count);
    --pp-on-sunrise: var(--pp-on-bar-count);
    box-shadow: 0 0 0 2px var(--pp-bar);
}

/* The member's own controls, set apart by a hairline. */
.navbar-account {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

@media (min-width: 1200px) {
    .navbar-account {
        padding-left: 1.1rem;
        border-left: 1px solid var(--pp-bar-rule);
    }
}

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--pp-bar-text);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

    .nav-icon-btn:hover,
    .nav-icon-btn[aria-expanded="true"] {
        border-color: var(--pp-bar-rule);
        background-color: var(--pp-bar-hover);
        color: var(--pp-bar-text);
    }

    .nav-icon-btn .bi {
        transform-origin: 50% 10%;
    }

    .nav-icon-btn:hover .bi-bell-fill {
        animation: site-bell-ring 0.6s ease;
    }

@keyframes site-bell-ring {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(12deg); }
    50% { transform: rotate(-9deg); }
    75% { transform: rotate(5deg); }
}

.account-control {
    display: inline-flex;
    align-items: center;
    max-width: 13rem;
    padding: 0.2rem 0.65rem 0.2rem 0.2rem;
    border: 1px solid var(--pp-bar-rule);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

    .account-control:hover,
    .account-control[aria-expanded="true"] {
        border-color: var(--pp-bar-muted);
        background-color: var(--pp-bar-hover);
    }

.account-control-username {
    max-width: 7.5rem;
    color: var(--pp-bar-text);
    font-size: 0.875rem;
    font-weight: 700;
}

.account-control-chevron {
    color: var(--pp-bar-muted);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.account-control[aria-expanded="true"] .account-control-chevron {
    transform: rotate(180deg);
}

/* Visitors' Log in and Sign up: an outline and an ink pill. */
.site-navbar .btn-outline-primary,
.site-navbar .btn-sunrise {
    border-radius: 999px;
    padding-inline: 1rem;
    font-weight: 700;
}

.site-navbar .btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--pp-bar-text);
    --bs-btn-border-color: var(--pp-bar-rule);
    --bs-btn-hover-bg: var(--pp-bar-hover);
    --bs-btn-hover-color: var(--pp-bar-text);
    --bs-btn-hover-border-color: var(--pp-bar-muted);
    --bs-btn-active-bg: var(--pp-bar-hover);
    --bs-btn-active-color: var(--pp-bar-text);
}

.site-navbar .btn-sunrise {
    --bs-btn-bg: var(--pp-bar-text);
    --bs-btn-color: var(--pp-bar);
    --bs-btn-border-color: var(--pp-bar-text);
    --bs-btn-hover-bg: var(--pp-bar-mark);
    --bs-btn-hover-color: var(--pp-on-bar-count);
    --bs-btn-hover-border-color: var(--pp-bar-mark);
    --bs-btn-active-bg: var(--pp-bar-mark);
    --bs-btn-active-color: var(--pp-on-bar-count);
}

.site-navbar .navbar-toggler {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

    .site-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem var(--pp-bar-rule);
    }

    .site-navbar .navbar-toggler-icon {
        width: 1.3rem;
        height: 1.3rem;
    }

/* Phones and tablets: the open menu is a list of large serif labels, each on
   its own rule, with the page you're on marked in crimson. */
@media (max-width: 1199.98px) {
    .navbar-main-links {
        gap: 0;
        margin: 0.25rem 0 1rem;
        border-top: 1px solid var(--pp-bar-rule);
    }

        .navbar-main-links .nav-item {
            border-bottom: 1px solid var(--pp-bar-rule);
        }

    .site-navbar .navbar-nav .navbar-main-link {
        gap: 0.85rem !important; /* over Bootstrap's gap-2 utility */
        padding: 0.85rem 0.25rem;
        border-radius: 0;
        color: var(--pp-bar-text);
        font-family: var(--pp-serif);
        font-size: 1.3rem;
    }

        .site-navbar .navbar-nav .navbar-main-link .bi {
            color: var(--pp-bar-muted);
            font-size: 1.05rem;
        }

        .site-navbar .navbar-nav .navbar-main-link::after {
            display: none;
        }

    .site-navbar .navbar-nav .navbar-main-link-active {
        color: var(--pp-bar-mark);
        font-weight: 500;
    }

        .site-navbar .navbar-nav .navbar-main-link-active .bi {
            color: var(--pp-bar-mark);
        }
}

/* Colophon --------------------------------------------------------------- */
.site-footer {
    padding: 3rem 0 1.5rem;
    background-color: var(--pp-bar);
    color: var(--pp-bar-muted);
    font-family: var(--pp-shell-sans);
    font-size: 0.9rem;
}

.site-footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 3rem;
    padding-bottom: 2.25rem;
}

.site-footer-name {
    display: block;
    color: var(--pp-bar-text);
    font-family: var(--pp-serif);
    font-size: 1.15rem;
    font-weight: 500;
}

    .site-footer-name .brand-pal {
        color: var(--pp-bar-mark);
    }

.site-footer-tagline {
    max-width: 22ch;
    margin: 0.5rem 0 0;
    color: var(--pp-bar-text);
    font-family: var(--pp-serif);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

    .site-footer-tagline em {
        color: var(--pp-bar-mark);
    }

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4rem;
}

.site-footer-heading {
    margin: 0 0 0.75rem;
    color: var(--pp-bar-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .site-footer-links a {
        display: inline-block;
        padding-block: 0.15rem;
        color: var(--pp-bar-text);
        text-decoration: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.25em;
        transition: text-decoration-color 0.18s ease, color 0.18s ease;
    }

        .site-footer-links a:hover,
        .site-footer-links a:focus-visible {
            color: var(--pp-bar-text);
            text-decoration-color: var(--pp-bar-mark);
        }

.site-footer a:focus-visible {
    outline: 2px solid var(--pp-bar-text);
    outline-offset: 2px;
}

.site-footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pp-bar-rule);
}

.site-footer-copy {
    margin: 0;
    font-size: 0.82rem;
}

.site-footer-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pp-bar-text);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

    .site-footer-top .bi {
        transition: transform 0.2s ease;
    }

    .site-footer-top:hover,
    .site-footer-top:focus-visible {
        color: var(--pp-bar-mark);
    }

        .site-footer-top:hover .bi,
        .site-footer-top:focus-visible .bi {
            transform: translateY(-3px);
        }

@media (max-width: 575.98px) {
    .site-footer {
        padding-top: 2.25rem;
    }

    .site-footer-nav {
        gap: 1.75rem 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-brand-seal,
    .navbar-main-link,
    .navbar-main-link::after,
    .account-control-chevron,
    .site-footer-links a,
    .site-footer-top .bi {
        transition: none;
    }

    .nav-icon-btn:hover .bi-bell-fill {
        animation: none;
    }

    .site-brand:hover .site-brand-seal,
    .site-brand:focus-visible .site-brand-seal,
    .site-footer-top:hover .bi,
    .site-footer-top:focus-visible .bi {
        transform: none;
    }
}

.account-dropdown-menu {
    width: 280px;
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-pop);
    padding: 0.5rem;
}

.account-dropdown-view-profile {
    color: var(--pp-primary);
    text-decoration: none;
}

    .account-dropdown-view-profile:hover {
        text-decoration: underline;
    }

.account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: var(--pp-radius-sm);
    padding: 0.5rem 0.75rem;
}

    .account-dropdown-item:hover {
        background-color: var(--pp-surface-muted);
    }

    .account-dropdown-item.text-danger:hover {
        background-color: var(--pp-danger-soft);
        color: var(--pp-danger) !important;
    }

/* The footer sits at the bottom of the window on short pages. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    body > footer {
        margin-top: auto;
    }

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

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

.chat-history {
    min-height: 16rem;
    max-height: min(65vh, 40rem);
    overflow-y: auto;
}

.chat-bubble {
    max-width: min(85%, 38rem);
    min-width: 0;
}

.chat-message-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-timestamp {
    opacity: 0.8;
}

.conversation-summary {
    min-width: 0;
    flex: 1 1 auto;
}

.conversation-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cozy Guild Hall: muted lavender, paper surfaces and plum accents.
   Existing components share the same semantic palette tokens.
   theme.js restores the Light/Dark choice before styles load. */

:root {
    color-scheme: light;
    --pp-header: #FBFBFD;
    --pp-bar: #2B4A7E; /* header and footer band: the Send button's navy, both modes */
    --pp-bar-hover: #213A63;
    --pp-bar-text: #FFFFFF;
    --pp-bar-muted: #C9D5EA;
    --pp-bar-rule: #46659A;
    --pp-bar-count: #F0909F; /* counts on the band */
    --pp-on-bar-count: #3A0F18;
    --pp-on-primary: #FFFFFF;
    --pp-success-soft: #DFEEE4;
    --pp-danger-soft: #FDECEA;
    --pp-bg: #E8E9EF; /* neutral page background */
    --pp-surface: #FBFBFD; /* ivory cards, sheets, inputs */
    --pp-surface-muted: #EEF0F6; /* hover and quiet fills */
    --pp-accent-soft: #E3E9F4; /* selected states */
    --pp-border: #D3D7E3;
    --pp-border-strong: #A3ABC2;
    --pp-text: #1F2433;
    --pp-text-secondary: #5A6175;
    --pp-primary: #2B4A7E; /* Royal banner navy: buttons, links and focus */
    --pp-primary-hover: #213A63;
    --pp-on-primary-muted: #5A6175; /* secondary header text */
    --pp-sunrise: #A83246; /* crimson: counts, New and "your turn" marks */
    --pp-sunrise-hover: #8A2839;
    --pp-sunrise-soft: #F6E3E6; /* soft "new" fills */
    --pp-sunrise-text: #A83246; /* crimson as text on ivory */
    --pp-on-sunrise: #FFFFFF;
    --pp-success: #2F7A62;
    --pp-danger: #B3261E;
    --pp-danger-hover: #92201A;
    --pp-warning-bg: #F7EFD9; /* waiting for review */
    --pp-warning-text: #7A5B14;
    --pp-shadow-pop: 0 8px 24px rgba(17, 24, 39, 0.12); /* menus and dropdowns only */
    --pp-radius: 8px;
    --pp-radius-sm: 6px;
    --pp-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --pp-display: var(--pp-font);
    --bs-body-font-family: var(--pp-font);
    --bs-primary: var(--pp-primary);
    --bs-primary-rgb: 43, 74, 126;
    --bs-link-color: var(--pp-primary);
    --bs-link-color-rgb: 43, 74, 126;
    --bs-link-hover-color: var(--pp-primary-hover);
    --bs-link-hover-color-rgb: 33, 58, 99;
    --bs-border-radius: 6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
    --bs-body-color: var(--pp-text);
    --bs-body-color-rgb: 31, 36, 51;
    --bs-body-bg-rgb: 251, 251, 253;
    --bs-tertiary-color: var(--pp-text-secondary);
    --bs-secondary-bg: var(--pp-surface-muted);
    --bs-tertiary-bg: var(--pp-surface-muted);
    --bs-emphasis-color: var(--pp-text);
    --bs-primary-text-emphasis: var(--pp-primary);
    --bs-primary-bg-subtle: var(--pp-accent-soft);
    --bs-primary-border-subtle: var(--pp-border-strong);
    /* Keep Bootstrap cards, menus, inputs and dialogs on the same surface. */
    --bs-body-bg: var(--pp-surface);
    --bs-border-color: var(--pp-border);
    --bs-secondary-color: var(--pp-text-secondary);
    --bs-success: var(--pp-success);
    --bs-success-rgb: 47, 122, 98;
    --bs-danger: var(--pp-danger);
    --bs-danger-rgb: 179, 38, 30;
}

:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --pp-bg: #161A26;
    --pp-header: #202638;
    --pp-surface: #202638;
    --pp-surface-muted: #2A3146;
    --pp-accent-soft: #2C3A58;
    --pp-border: #434C66;
    --pp-border-strong: #6E7895;
    --pp-text: #ECEFF7;
    --pp-text-secondary: #B9C0D4;
    --pp-primary: #9DB8EB;
    --pp-primary-hover: #BCD0F3;
    --pp-on-primary: #14213B;
    --pp-on-primary-muted: #B9C0D4;
    --pp-sunrise: #F0909F;
    --pp-sunrise-hover: #F6B0BB;
    --pp-sunrise-soft: #3D2229;
    --pp-sunrise-text: #F0909F;
    --pp-on-sunrise: #3A0F18;
    --pp-success: #85CDA3;
    --pp-success-soft: #1D3428;
    --pp-danger: #F09A94;
    --pp-danger-hover: #FFB4AC;
    --pp-danger-soft: #3C2221;
    --pp-warning-bg: #362E1D;
    --pp-warning-text: #E7CA85;
    --pp-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4);
    --bs-primary-rgb: 157, 184, 235;
    --bs-link-color-rgb: 157, 184, 235;
    --bs-link-hover-color-rgb: 188, 208, 243;
    --bs-body-color: var(--pp-text);
    --bs-body-color-rgb: 236, 239, 247;
    --bs-body-bg-rgb: 32, 38, 56;
    --bs-body-bg: var(--pp-surface);
    --bs-border-color: var(--pp-border);
    --bs-secondary-color: var(--pp-text-secondary);
    --bs-tertiary-color: var(--pp-text-secondary);
    --bs-secondary-bg: var(--pp-surface-muted);
    --bs-tertiary-bg: var(--pp-surface-muted);
    --bs-emphasis-color: var(--pp-text);
    --bs-primary-text-emphasis: var(--pp-primary);
    --bs-primary-bg-subtle: var(--pp-accent-soft);
    --bs-primary-border-subtle: var(--pp-border-strong);
    --bs-link-color: var(--pp-primary);
    --bs-link-hover-color: var(--pp-primary-hover);
    --bs-success: var(--pp-success);
    --bs-success-rgb: 133, 205, 163;
    --bs-danger: var(--pp-danger);
    --bs-danger-rgb: 240, 154, 148;
}

/* Cozy Guild Hall shell: the visual character lives in materials and shape,
   while all navigation labels and native controls stay familiar. */
.guild-app .profile-panel {
    box-shadow: none;
}

/* Home: the member's front page. An editorial serif (Newsreader) for the
   welcome, section names, titles and numbers; Atkinson Hyperlegible for the
   text. Both are self-hosted in wwwroot/fonts (the CSP allows only 'self'). */
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newsreader-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/newsreader-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newsreader-latin-ext-400-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/newsreader-latin-500-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/newsreader-latin-ext-500-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Home's palette: deep ink and warm paper, with the site's crimson for counts.
   In dark mode the ink panel turns paper-light, so the most important panel
   still stands out. Flat fills only. */
.home-menu {
    --home-serif: "Newsreader", "Iowan Old Style", "Sitka Text", Georgia, serif;
    --home-sans: "Atkinson Hyperlegible", var(--pp-font);
    --home-ink: #14223D;
    --home-on-ink: #F7F2E8;
    --home-on-ink-muted: #C3CAD9;
    --home-paper: #F7F2E8;
    --home-paper-rule: #E3DACA;
    --home-rule: #14223D;
    --home-text: #14223D;
    --home-muted: #5A6175;
    --home-accent: var(--pp-sunrise);
    --home-tile: var(--pp-surface);
    --home-tile-border: #DCD6CB;
    --home-shadow: 0 1px 2px rgba(20, 34, 61, 0.05), 0 6px 18px rgba(20, 34, 61, 0.06);
    --home-shadow-hover: 0 2px 4px rgba(20, 34, 61, 0.06), 0 16px 34px rgba(20, 34, 61, 0.12);
    max-width: 72rem;
    margin: 2.25rem auto 3rem;
    color: var(--home-text);
    font-family: var(--home-sans);
}

:root[data-bs-theme="dark"] .home-menu {
    --home-ink: #F1EBDD;
    --home-on-ink: #14223D;
    --home-on-ink-muted: #4A5470;
    --home-paper: #1D2436;
    --home-paper-rule: #353E57;
    --home-rule: #E7E1D3;
    --home-text: #ECEFF7;
    --home-muted: #B9C0D4;
    --home-tile: var(--pp-surface);
    --home-tile-border: #3A4360;
    --home-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --home-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 34px rgba(0, 0, 0, 0.45);
}

/* The welcome: a small kicker, a large serif greeting with the name in italic,
   and a double rule under it, like a masthead. */
.home-menu-welcome {
    margin-bottom: 2.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px double var(--home-rule);
}

.home-menu-kicker,
.home-menu-section-title {
    margin: 0;
    color: var(--home-muted);
    font-family: var(--home-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-menu-welcome-title {
    margin: 0.5rem 0 0.4rem;
    color: var(--home-text);
    font-family: var(--home-serif);
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.home-menu-name {
    color: var(--home-accent);
    font-style: italic;
    font-weight: 500;
}

.home-menu-welcome-subtitle {
    margin: 0;
    color: var(--home-muted);
    font-family: var(--home-serif);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-style: italic;
}

/* Sections: a small uppercase name over a hairline. */
.home-menu-section + .home-menu-section {
    margin-top: 2.75rem;
}

.home-menu-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

    .home-menu-section-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--home-tile-border);
    }

.home-menu-grid {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-menu-item {
    display: flex;
    min-width: 0;
}

.home-menu-card {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    color: var(--home-text);
    text-decoration: none;
}

    .home-menu-card:hover,
    .home-menu-card:focus-visible {
        color: var(--home-text);
    }

a.home-menu-card:focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 4px;
}

.home-menu-number {
    color: var(--home-muted);
    font-family: var(--home-serif);
    font-size: 0.95rem;
    font-style: italic;
    font-variant-numeric: lining-nums tabular-nums;
}

.home-menu-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.home-menu-title {
    font-family: var(--home-serif);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.home-menu-description {
    color: var(--home-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.home-menu-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 1.2rem;
}

.home-menu-arrow {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .home-menu-arrow .bi {
        transition: transform 0.2s ease;
    }

a.home-menu-card:hover .home-menu-arrow .bi,
a.home-menu-card:focus-visible .home-menu-arrow .bi {
    transform: translateX(3px);
}

/* A live count shows instead of its quiet line; at 0 (hidden) the quiet line
   shows. notification-bell.js toggles [hidden], so this follows live. */
.home-menu-detail[hidden] {
    display: none;
}

.home-menu-detail:not([hidden]) + .home-menu-quiet {
    display: none;
}

/* Main actions: My Profile and Discover, with My Profile in solid ink. */
.home-menu-section-post .home-menu-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.home-menu-section-post .home-menu-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.home-menu-item-feature .home-menu-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 1.25rem 1rem;
    min-height: 15rem;
    padding: 1.75rem 1.9rem;
    border: 1px solid var(--home-paper-rule);
    border-radius: 1.25rem;
    background-color: var(--home-paper);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .home-menu-item-feature .home-menu-number {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .home-menu-item-feature .home-menu-icon {
        grid-column: 3;
        grid-row: 1;
        opacity: 0.85;
    }

    .home-menu-item-feature .home-menu-text {
        grid-column: 1 / 3;
        grid-row: 2;
        align-self: end;
    }

    .home-menu-item-feature .home-menu-arrow {
        grid-column: 3;
        grid-row: 2;
        align-self: end;
    }

    .home-menu-item-feature .home-menu-title {
        font-size: clamp(1.75rem, 3vw, 2.35rem);
    }

    .home-menu-item-feature .home-menu-description {
        font-size: 1rem;
    }

    /* The count as a big serif numeral: "2 unread". */
    .home-menu-item-feature .home-menu-detail,
    .home-menu-item-feature .home-menu-quiet {
        display: inline-flex;
        align-items: baseline;
        gap: 0.45rem;
        margin-top: 0.85rem;
        font-family: var(--home-serif);
        font-size: 1.1rem;
        font-style: italic;
    }

    .home-menu-item-feature .home-menu-detail [data-nav-count-number] {
        color: var(--home-accent);
        font-size: 3rem;
        font-style: normal;
        font-weight: 500;
        line-height: 0.9;
        font-variant-numeric: lining-nums;
    }

    .home-menu-item-feature .home-menu-quiet {
        color: var(--home-muted);
    }

.home-menu-item-feature .home-menu-card-profile {
    border-color: var(--home-ink);
    background-color: var(--home-ink);
    color: var(--home-on-ink);
}

    .home-menu-item-feature .home-menu-card-profile:hover,
    .home-menu-item-feature .home-menu-card-profile:focus-visible {
        color: var(--home-on-ink);
    }

    .home-menu-item-feature .home-menu-card-profile .home-menu-number,
    .home-menu-item-feature .home-menu-card-profile .home-menu-description,
    .home-menu-item-feature .home-menu-card-profile .home-menu-quiet {
        color: var(--home-on-ink-muted);
    }

    .home-menu-item-feature .home-menu-card-profile .home-menu-detail [data-nav-count-number] {
        color: var(--home-on-ink);
    }

.home-menu-item-feature a.home-menu-card:hover,
.home-menu-item-feature a.home-menu-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--home-shadow-hover);
}

.home-menu-item-feature a.home-menu-card:hover .home-menu-arrow,
.home-menu-item-feature a.home-menu-card:focus-visible .home-menu-arrow {
    background-color: var(--home-ink);
    color: var(--home-on-ink);
}

.home-menu-item-feature a.home-menu-card-profile:hover .home-menu-arrow,
.home-menu-item-feature a.home-menu-card-profile:focus-visible .home-menu-arrow {
    background-color: var(--home-on-ink);
    color: var(--home-ink);
}

/* Stay in touch: secondary tiles, with Messages first. */
.home-menu-section-circle .home-menu-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.home-menu-section-circle .home-menu-grid-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Icon and arrow on top, the words below. */
.home-menu-item-tile .home-menu-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 1.1rem 1rem;
    padding: 1.4rem 1.4rem 1.5rem;
    border: 1px solid var(--home-tile-border);
    border-radius: 1rem;
    background-color: var(--home-tile);
    box-shadow: var(--home-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .home-menu-item-tile .home-menu-number {
        display: none;
    }

    .home-menu-item-tile .home-menu-icon {
        grid-column: 1;
        grid-row: 1;
        color: var(--pp-primary);
    }

    .home-menu-item-tile .home-menu-text {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .home-menu-item-tile .home-menu-title {
        font-size: 1.4rem;
    }

    .home-menu-item-tile .home-menu-arrow {
        grid-column: 2;
        grid-row: 1;
        width: 2.1rem;
        height: 2.1rem;
        color: var(--home-muted);
    }

.home-menu-item-tile a.home-menu-card:hover,
.home-menu-item-tile a.home-menu-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--home-rule);
    box-shadow: var(--home-shadow-hover);
}

    .home-menu-item-tile a.home-menu-card:hover .home-menu-arrow,
    .home-menu-item-tile a.home-menu-card:focus-visible .home-menu-arrow {
        background-color: var(--home-rule);
        color: var(--pp-surface);
    }

/* Discover: the invitation, set larger, with the icon as a solid seal. */
.home-menu-card-discover .home-menu-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-color: var(--home-accent);
    background-color: var(--home-accent);
    color: var(--pp-on-sunrise);
    font-size: 1.45rem;
}

.home-menu-card-discover .home-menu-title {
    font-size: 1.75rem;
}

/* The small pill (My Penpals' count). */
.home-menu-item-tile .home-menu-detail {
    margin-top: 0.4rem;
    padding: 0.1rem 0.65rem;
    border: 1px solid var(--home-tile-border);
    border-radius: 999px;
    color: var(--home-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6;
}

/* Around the world: a numbered contents list between rules. */
.home-menu-section-world .home-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2rem;
}

.home-menu-item-row .home-menu-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.25rem 0.9rem;
    padding: 1.1rem 0 1.25rem;
    border-top: 2px solid var(--home-rule);
}

    .home-menu-item-row .home-menu-icon {
        display: none;
    }

    .home-menu-item-row .home-menu-number {
        color: var(--home-accent);
        font-size: 1.15rem;
    }

    .home-menu-item-row .home-menu-title {
        font-size: 1.5rem;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        transition: text-decoration-color 0.2s ease;
    }

    .home-menu-item-row .home-menu-arrow {
        align-self: center;
        width: auto;
        height: auto;
        border: 0;
        color: var(--home-muted);
    }

.home-menu-item-row a.home-menu-card:hover .home-menu-title,
.home-menu-item-row a.home-menu-card:focus-visible .home-menu-title {
    text-decoration-color: var(--home-accent);
}

.home-menu-item-row a.home-menu-card:hover .home-menu-arrow,
.home-menu-item-row a.home-menu-card:focus-visible .home-menu-arrow {
    color: var(--home-accent);
}

/* Not built yet: no link, no hover, a quiet label in place of the arrow. */
.home-menu-card-soon {
    cursor: default;
    opacity: 0.75;
}

.home-menu-soon {
    flex-shrink: 0;
    align-self: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--home-tile-border);
    border-radius: 999px;
    color: var(--home-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* One gentle entrance: the welcome, then each section. */
@keyframes home-menu-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.home-menu-welcome,
.home-menu-section {
    animation: home-menu-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.home-menu-section-post {
    animation-delay: 0.08s;
}

.home-menu-section-circle {
    animation-delay: 0.16s;
}

.home-menu-section-world {
    animation-delay: 0.24s;
}

@media (max-width: 991.98px) {
    .home-menu {
        margin-top: 1.75rem;
    }

    .home-menu-section-post .home-menu-grid:not(.home-menu-grid-single),
    .home-menu-section-circle .home-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-menu-section-circle .home-menu-grid:not(.home-menu-grid-pair) .home-menu-item:first-child {
        grid-column: 1 / -1;
    }

    .home-menu-item-feature .home-menu-card {
        min-height: 13rem;
        padding: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .home-menu-section-post .home-menu-grid:not(.home-menu-grid-single),
    .home-menu-section-world .home-menu-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-menu-item-row:last-child .home-menu-card {
        border-bottom: 1px solid var(--home-tile-border);
    }
}

@media (max-width: 575.98px) {
    .home-menu {
        margin-top: 1.25rem;
    }

    .home-menu-welcome {
        margin-bottom: 2rem;
    }

    .home-menu-section + .home-menu-section {
        margin-top: 2rem;
    }

    .home-menu-section-circle .home-menu-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-menu-item-feature .home-menu-card {
        min-height: 0;
        padding: 1.35rem;
    }

    .home-menu-item-feature .home-menu-detail [data-nav-count-number] {
        font-size: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-menu-welcome,
    .home-menu-section {
        animation: none;
    }

    .home-menu-card,
    .home-menu-arrow,
    .home-menu-arrow .bi,
    .home-menu-item-row .home-menu-title {
        transition: none;
    }

    .home-menu-item-feature a.home-menu-card:hover,
    .home-menu-item-feature a.home-menu-card:focus-visible,
    .home-menu-item-tile a.home-menu-card:hover,
    .home-menu-item-tile a.home-menu-card:focus-visible,
    a.home-menu-card:hover .home-menu-arrow .bi,
    a.home-menu-card:focus-visible .home-menu-arrow .bi {
        transform: none;
    }
}

/* The Discover filter pop-up (Home's Discover People card): a warm card like
   Home and My Profile, filters as tappable pastel pills, a two-handle age
   slider, and a sticky footer with the live "Show N people" button. Full
   screen on phones. */
.discover-filters {
    --discover-filters-card: #FFFCF7;
    --discover-chip-on: #E3E9F4;
}

:root[data-bs-theme="dark"] .discover-filters {
    --discover-filters-card: var(--pp-surface);
    --discover-chip-on: #2C3A58;
}

.discover-filters .modal-content {
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    background-color: var(--discover-filters-card);
    box-shadow: 0 12px 40px rgba(17, 24, 39, 0.18);
}

.discover-filters .modal-header {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--pp-border);
}

    .discover-filters .modal-header .btn-close {
        margin: 0;
    }

.discover-filters-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--pp-primary);
}

.discover-filters-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: var(--pp-text-secondary);
}

.discover-filters-clear {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--pp-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

    .discover-filters-clear:hover,
    .discover-filters-clear:focus-visible {
        background-color: var(--pp-surface-muted);
    }

.discover-filters .modal-body {
    padding: 1rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--pp-border-strong) transparent;
}

.discover-filters-search {
    position: relative;
    margin-bottom: 0.5rem;
}

    .discover-filters-search .bi {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        color: var(--pp-text-secondary);
        pointer-events: none;
    }

    .discover-filters-search .form-control {
        padding: 0.65rem 1rem 0.65rem 2.6rem;
        border-radius: 999px;
    }

.discover-filters-section {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--pp-border);
}

    .discover-filters-section:last-child {
        border-bottom: 0;
    }

.discover-filters-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.discover-filters-heading {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pp-text);
}

.discover-filters-hint,
.discover-filters-note {
    font-size: 0.8rem;
    color: var(--pp-text-secondary);
}

.discover-filters-note {
    margin: 0.35rem 0 0;
}

.discover-filters-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pp-text);
}

.discover-filters-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Pills: the real radio or checkbox (Bootstrap's .btn-check) stays in the
   form and keeps keyboard and screen-reader behaviour; the label is the pill. */
.discover-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.discover-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background-color: var(--pp-surface);
    color: var(--pp-text);
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .discover-pill:hover {
        border-color: var(--pp-border-strong);
    }

.btn-check:checked + .discover-pill {
    border-color: var(--pp-primary);
    background-color: var(--discover-chip-on);
    color: var(--pp-primary);
    font-weight: 600;
}

    .btn-check:checked + .discover-pill::before {
        content: "\2713";
        font-size: 0.8em;
    }

.btn-check:focus-visible + .discover-pill {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
}

/* The age slider: one track with the chosen range filled in, and two round
   handles (two range inputs laid over each other; only their handles take
   the pointer, so either can be grabbed). */
.discover-age-value {
    font-weight: 700;
    color: var(--pp-primary);
}

.discover-age-range {
    --discover-age-thumb: 1.5rem;
    position: relative;
    height: var(--discover-age-thumb);
    margin: 0.25rem calc(var(--discover-age-thumb) / 2) 0;
}

.discover-age-track {
    position: absolute;
    top: 50%;
    right: calc(var(--discover-age-thumb) / -2);
    left: calc(var(--discover-age-thumb) / -2);
    height: 0.4rem;
    border-radius: 999px;
    background-color: var(--pp-border);
    transform: translateY(-50%);
}

.discover-age-fill {
    position: absolute;
    top: 50%;
    height: 0.4rem;
    border-radius: 999px;
    background-color: var(--pp-primary);
    transform: translateY(-50%);
}

.discover-age-input {
    position: absolute;
    inset: 0 calc(var(--discover-age-thumb) / -2);
    width: calc(100% + var(--discover-age-thumb));
    height: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

    .discover-age-input::-webkit-slider-runnable-track {
        background: none;
    }

    .discover-age-input::-moz-range-track {
        background: none;
    }

    .discover-age-input::-webkit-slider-thumb {
        width: var(--discover-age-thumb);
        height: var(--discover-age-thumb);
        border: 3px solid var(--pp-primary);
        border-radius: 50%;
        background-color: var(--pp-surface);
        box-shadow: 0 2px 6px rgba(17, 24, 39, 0.2);
        cursor: grab;
        pointer-events: auto;
        appearance: none;
        -webkit-appearance: none;
    }

    .discover-age-input::-moz-range-thumb {
        width: var(--discover-age-thumb);
        height: var(--discover-age-thumb);
        box-sizing: border-box;
        border: 3px solid var(--pp-primary);
        border-radius: 50%;
        background-color: var(--pp-surface);
        box-shadow: 0 2px 6px rgba(17, 24, 39, 0.2);
        cursor: grab;
        pointer-events: auto;
    }

    .discover-age-input:active::-webkit-slider-thumb {
        cursor: grabbing;
        transform: scale(1.1);
    }

    .discover-age-input:focus-visible::-webkit-slider-thumb {
        outline: 3px solid color-mix(in srgb, var(--pp-primary) 35%, transparent);
        outline-offset: 2px;
    }

    .discover-age-input:focus-visible::-moz-range-thumb {
        outline: 3px solid color-mix(in srgb, var(--pp-primary) 35%, transparent);
        outline-offset: 2px;
    }

.discover-filters-switch {
    margin-top: 0.85rem;
    padding-left: 2.75rem;
}

    .discover-filters-switch .form-check-input {
        width: 2.25rem;
        height: 1.25rem;
        margin-left: -2.75rem;
        cursor: pointer;
    }

    .discover-filters-switch .form-check-label {
        cursor: pointer;
    }

.discover-filters .modal-footer {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--pp-border);
}

.discover-filters-skip {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.discover-filters-show {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 12rem;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .discover-filters .modal-content {
        border: 0;
        border-radius: 0;
    }

    .discover-filters .modal-header,
    .discover-filters .modal-body,
    .discover-filters .modal-footer {
        padding-inline: 1rem;
    }

    .discover-filters-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .discover-filters-show {
        flex: 1;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discover-pill {
        transition: none;
    }

    .discover-age-input:active::-webkit-slider-thumb {
        transform: none;
    }
}

.guild-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    margin-top: 1.5rem;
}

.guild-character {
    min-width: 0;
    border: 1px solid var(--pp-border);
    border-radius: 5rem 5rem 0.75rem 0.75rem;
    background: var(--pp-surface);
}

.guild-character .profile-postcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 !important;
    padding: 2rem 1.25rem 1.25rem;
    border-radius: 5rem 5rem 0.75rem 0.75rem;
    text-align: center;
    gap: 1rem;
    border: 0;
}

.guild-character-stats {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.875rem;
}

.guild-character-stats > dl {
    margin: 0;
    border-top: 1px solid var(--pp-border);
}

.guild-character-stats > dl > div {
    padding-top: 0.8rem;
}

.guild-character-stats dt {
    color: var(--pp-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.guild-character-stats dt i {
    color: var(--pp-primary);
    margin-right: 0.3rem;
}

.guild-character-stats dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.guild-character-stats .guild-interests {
    margin: 0;
}

.guild-character-stats .profile-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.guild-character-stats .profile-detail-label {
    display: block;
}

.guild-character-stats .profile-detail-value {
    text-align: left;
}

.guild-character-stats .guild-profile-details {
    margin-top: 1rem;
}

.guild-character .profile-postcard-avatar {
    margin: 0;
}

.guild-character .avatar-polaroid {
    border-radius: 50%;
    border: 4px double var(--pp-border-strong);
    transform: none;
    box-shadow: none;
}

.guild-character .profile-postcard-greeting {
    display: none;
}

.guild-character .profile-name {
    font-size: 1.65rem;
    color: var(--pp-text);
}

.guild-character .profile-postcard-actions {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-top: 1px solid var(--pp-border);
    padding: 1rem 0 0;
}

/* Pen Pals: a small status line, Message across the card, and Remove as a
   quiet text action that only turns red when you reach for it. */
.profile-penpal-status {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pp-success);
}

.profile-remove-penpal-form {
    margin: 0.5rem 0 0;
}

.profile-remove-penpal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    font-size: 0.825rem;
    color: var(--pp-text-secondary);
}

    .profile-remove-penpal:hover,
    .profile-remove-penpal:focus-visible {
        color: var(--pp-danger);
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

.game-shell { max-width: 760px; margin: 1.5rem auto; }
.game-eyebrow { color: var(--pp-text-secondary); font-size: .8rem; letter-spacing: .06em; margin-bottom: .5rem; }
.game-panel { background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); padding: clamp(1rem, 3vw, 1.5rem); }
.game-invite-form { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.game-list-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: .75rem; color: var(--pp-text); background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); text-decoration: none; overflow-wrap: anywhere; }
.game-list-item:hover { border-color: var(--pp-primary); }
.game-history-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.game-history-row .game-list-item { flex: 1 1 22rem; margin-bottom: 0; }
.game-history-row form { margin: 0; }
.game-choice-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(.5rem, 2vw, 1rem); align-items: stretch; }
.game-choice-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .75rem; min-height: 180px; padding: clamp(.75rem, 3vw, 1.5rem); border: 2px solid var(--pp-border); border-radius: var(--pp-radius); background: var(--pp-surface); color: var(--pp-text); overflow-wrap: anywhere; font-size: clamp(1.1rem, 3vw, 1.5rem); cursor: pointer; }
.game-choice-card .game-eyebrow { margin: 0; font-weight: normal; }
.game-choice-card:hover:not(:disabled) { border-color: var(--pp-primary); background: var(--pp-accent-soft); }
.game-choice-card:focus-visible { outline: 3px solid var(--pp-primary); outline-offset: 3px; }
.game-choice-card:disabled { opacity: .65; cursor: wait; }
.game-choice-or { align-self: center; color: var(--pp-text-secondary); }
.game-why summary { cursor: pointer; padding-block: .5rem; color: var(--pp-text-secondary); }
.game-reveal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin-top: 1rem; }
.game-explanation { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--pp-text-secondary); }
.game-reveal-match .game-answer { padding: .75rem 1rem; background: var(--pp-accent-soft); border: 1px solid var(--pp-primary); border-radius: var(--pp-radius); color: var(--pp-text); font-weight: 700; }
.game-match-label { color: var(--pp-primary); font-size: .875rem; font-weight: 700; }
.game-panel progress { accent-color: var(--pp-primary); }

.guild-badge-settings {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.guild-badge-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

.guild-badge-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.guild-badge-option .form-check-input {
    flex-shrink: 0;
}

.guild-badge-form .btn {
    flex: 0 0 100%;
    min-height: 36px;
    white-space: nowrap;
}

.guild-badge-settings summary,
.guild-profile-details > summary {
    cursor: pointer;
    min-height: 44px;
    padding-block: 0.65rem;
    color: var(--pp-text-secondary);
}

.guild-profile-story {
    padding: 1.5rem;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    min-width: 0;
}

.guild-story-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.guild-profile-story .profile-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.guild-profile-story .card-body {
    padding: 0 !important;
}

.guild-profile-story #about-heading {
    font-family: var(--pp-display);
    font-size: 1.4rem;
    font-weight: 500;
}

.guild-profile-story .profile-prose {
    font-size: 1.05rem;
    line-height: 1.75;
}

.guild-profile-story [aria-labelledby="scrapbook-heading"] {
    border-top: 1px solid var(--pp-border);
    padding-top: 1.25rem;
}

.guild-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.guild-profile-details {
    border-top: 1px solid var(--pp-border);
    font-size: 0.9rem;
}

.guild-profile-details > summary:focus-visible,
.guild-badge-settings > summary:focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
}

.guild-app .letters-thread {
    background: var(--pp-bg);
}

@media (max-width: 767.98px) {
    .guild-character {
        border-radius: var(--pp-radius);
    }
    .guild-profile-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .guild-character .profile-postcard {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-areas: "avatar identity" "actions actions";
        align-items: center;
        text-align: left;
        border-radius: var(--pp-radius);
        padding: 1rem;
    }

    .guild-character .avatar-xl {
        width: 80px;
        height: 80px;
    }

    .guild-character .profile-postcard-actions {
        width: 100%;
        text-align: right;
        padding-top: 0.75rem;
    }

    .guild-profile-story {
        padding: 1.1rem;
    }
}

.site-theme-control {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--pp-text-secondary);
}

.site-theme-control select {
    width: auto;
}

.account-appearance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.account-appearance label {
    white-space: nowrap;
}

.account-appearance select {
    width: auto;
}

/* These Bootstrap utility names were authored for light pages. Keep them
   semantic on account, moderation and profile screens in either theme. */
.bg-white, .text-bg-light, .bg-light {
    background-color: var(--pp-surface) !important;
    color: var(--pp-text) !important;
}

.bg-primary.text-white, .bg-primary .text-white, .text-bg-primary {
    color: var(--pp-on-primary) !important;
}

:root[data-bs-theme="dark"] .text-bg-danger,
:root[data-bs-theme="dark"] .text-bg-success {
    color: var(--pp-on-primary) !important;
}

.btn-primary {
    --bs-btn-color: var(--pp-on-primary);
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-color: var(--pp-on-primary);
    --bs-btn-disabled-color: var(--pp-on-primary);
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-bg: var(--pp-primary);
    --bs-btn-border-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-primary-hover);
    --bs-btn-hover-border-color: var(--pp-primary-hover);
    --bs-btn-active-bg: var(--pp-primary-hover);
    --bs-btn-active-border-color: var(--pp-primary-hover);
    --bs-btn-disabled-bg: var(--pp-primary);
    --bs-btn-disabled-border-color: var(--pp-primary);
}

/* Outline buttons sit on paper and on the ruled page, so they get a solid
   white face instead of Bootstrap's see-through one. Hover/active colours
   come from each variant below. */
.btn[class*="btn-outline-"] {
    --bs-btn-bg: var(--pp-surface);
    --bs-btn-disabled-bg: var(--pp-surface);
}

.btn-outline-primary {
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-color: var(--pp-on-primary);
    --bs-btn-color: var(--pp-primary);
    --bs-btn-border-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-primary);
    --bs-btn-hover-border-color: var(--pp-primary);
    --bs-btn-active-bg: var(--pp-primary);
    --bs-btn-active-border-color: var(--pp-primary);
}

/* Sunrise buttons answer someone on the other side of the world (Accept a
   request) or join them (Sign up on the night bar). Dark text, never white. */
/* Accept and Sign up: navy like every button (crimson is only for counts,
   New and "your turn" marks, so it never reads as a warning on a button). */
.btn-sunrise {
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-color: var(--pp-on-primary);
    --bs-btn-bg: var(--pp-primary);
    --bs-btn-border-color: var(--pp-primary);
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-hover-bg: var(--pp-primary-hover);
    --bs-btn-hover-border-color: var(--pp-primary-hover);
    --bs-btn-active-color: var(--pp-on-primary);
    --bs-btn-active-bg: var(--pp-primary-hover);
    --bs-btn-active-border-color: var(--pp-primary-hover);
    --bs-btn-disabled-color: var(--pp-on-primary);
    --bs-btn-disabled-bg: var(--pp-primary);
    --bs-btn-disabled-border-color: var(--pp-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pp-text-secondary);
    --bs-btn-border-color: var(--pp-border);
    --bs-btn-hover-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-surface-muted);
    --bs-btn-hover-border-color: var(--pp-text-secondary);
    --bs-btn-active-color: var(--pp-primary);
    --bs-btn-active-bg: var(--pp-surface-muted);
    --bs-btn-active-border-color: var(--pp-text-secondary);
}

.btn-danger {
    --bs-btn-color: var(--pp-on-primary);
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-color: var(--pp-on-primary);
    --bs-btn-hover-bg: var(--pp-danger-hover);
    --bs-btn-active-bg: var(--pp-danger-hover);
    --bs-btn-hover-border-color: var(--pp-danger-hover);
    --bs-btn-active-border-color: var(--pp-danger-hover);
    --bs-btn-bg: var(--pp-danger);
    --bs-btn-border-color: var(--pp-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--pp-danger);
    --bs-btn-border-color: var(--pp-danger);
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-color: var(--pp-on-primary);
    --bs-btn-hover-bg: var(--pp-danger);
    --bs-btn-active-bg: var(--pp-danger);
    --bs-btn-hover-border-color: var(--pp-danger);
    --bs-btn-active-border-color: var(--pp-danger);
}

.text-primary {
    color: var(--pp-primary) !important;
}

/* The page: flat, a faint dusk white. */
::selection {
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
}

h1, .h1,
h2, .h2 {
    font-family: var(--pp-display);
    font-weight: 600;
}

body {
    line-height: 1.6;
    caret-color: var(--pp-primary);
    background-color: #fff;
}

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--pp-surface-muted);
    color: var(--pp-primary);
    font-weight: 600;
    flex-shrink: 0;
}

    .avatar-circle.avatar-lg {
        width: 3rem;
        height: 3rem;
        font-size: 1.1rem;
    }

    .avatar-circle.avatar-xl {
        width: 96px;
        height: 96px;
        font-size: 2rem;
    }

    .avatar-circle.avatar-image {
        object-fit: cover;
        background-color: var(--pp-border);
    }

/* A big profile picture you can click to see full size (_PictureViewer). */
.avatar-zoom {
    display: inline-flex;
    border-radius: 50%;
    cursor: zoom-in;
}

    .avatar-zoom:focus-visible {
        outline: 2px solid var(--pp-primary);
        outline-offset: 3px;
    }

.picture-viewer-image {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--pp-radius-sm);
}

/* A new profile picture waiting for an admin's review (only its member and admins see it). */
.profile-picture-pending {
    outline: 2px dashed var(--bs-warning);
    outline-offset: 2px;
}

.notification-badge {
    position: absolute;
    top: 0.1rem;
    right: 0;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background-color: var(--pp-sunrise);
    color: var(--pp-on-sunrise);
    font-size: 0.65rem;
    line-height: 1.1rem;
    text-align: center;
}

/* Notification bell dropdown + unread indicators */
.notification-dropdown-menu {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-border);
    box-shadow: var(--pp-shadow-pop);
    padding: 0.5rem;
}

/* Phones: Bootstrap pins navbar dropdowns to their button, and this one is
   wider than the space left of the bell, so it hung off the screen. Anchor
   it to the navbar's right edge instead, and never wider than the screen. */
@media (max-width: 575.98px) {
    #notification-bell {
        position: static;
    }

        #notification-bell .notification-dropdown-menu[data-bs-popper] {
            left: auto;
            right: 0.75rem;
            width: min(320px, calc(100% - 1.5rem));
        }
}

.notification-dropdown-item {
    align-items: flex-start;
    white-space: normal;
}

    .notification-dropdown-item i {
        color: var(--pp-text-secondary);
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

.notification-dropdown-item-unread {
    background-color: var(--pp-surface-muted);
}

    .notification-dropdown-item-unread i {
        color: var(--pp-sunrise-text);
    }

/* Notifications page: the Letters ledger, one line per notification. Unread
   ones are in full ink with a sun "New" sticker (the Sun Is New Rule). */
.letters-label-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.notification-row .letter-row-link {
    align-items: flex-start;
}

.notification-text {
    color: var(--pp-text-secondary);
    line-height: 1.4;
}

.notification-row-unread .notification-text {
    color: var(--pp-text);
}

.notification-time {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--pp-text-secondary);
}

/* Notices from HelloAcross itself carry the HelloAcross mark, not a person's initials. */
.avatar-circle.avatar-system {
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
    font-size: 1.05rem;
}

.letter-row-new.notification-new {
    padding: 0 0.55rem;
    font-size: 0.85rem;
}

.notifications-footnote {
    margin: 0.75rem 0.25rem 0;
    font-size: 0.8rem;
    color: var(--pp-text-secondary);
}

@media (max-width: 575.98px) {
    /* Keep the New sticker beside the line rather than under it (the Letters
       list stacks its actions under the name at this width). */
    .letter-row.notification-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* A conversation with a member who deleted their account: still readable, but quieter. */
.letter-row-deleted .conversation-summary > div:first-child {
    color: var(--pp-text-secondary);
    font-style: italic;
}

.avatar-circle.avatar-deleted {
    background-color: var(--pp-border);
    color: var(--pp-text-secondary);
}

.dashboard-card {
    position: relative;
    background-color: var(--pp-surface);
    border-radius: var(--pp-radius);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--pp-border);
}

    .dashboard-card h2 {
        font-family: var(--pp-display);
        font-weight: 500;
    }

/* Admin > Writing Prompts and Forum Categories: one slip per item; retired
   prompts and hidden categories fade back. */
.writing-prompt-list,
.forum-category-admin-list {
    display: grid;
    gap: 0.75rem;
}

.writing-prompt-item,
.forum-category-admin-item {
    padding: 0.9rem 1.25rem;
}

.writing-prompt-retired,
.forum-category-admin-hidden {
    color: var(--pp-text-secondary);
    box-shadow: none;
    border: 1px dashed var(--pp-border);
}

/* My Stamp Collection: a pencilled note by the title; each stamp carries a
   faint postal cancellation. */
.stamp-album-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    color: var(--pp-text-secondary);
}

.pp-stamp:not(.pp-stamp-placeholder)::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: -0.25rem;
    width: 3.4rem;
    height: 1.5rem;
    background: url("../images/penpal/cancel-lines.svg") no-repeat center / contain;
    opacity: 0.3;
    pointer-events: none;
}

.welcome-header {
    background-color: var(--pp-surface-muted);
    border: 1px solid var(--pp-border);
}

.welcome-header-bg {
    position: absolute;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
    font-size: 9rem;
    line-height: 1;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The admin menu (Areas/Admin/Views/Admin/_AdminBanner.cshtml), on every admin page.
   Links wrap onto more rows on narrow screens rather than scrolling sideways. */
.admin-menu {
    background: var(--pp-surface-muted);
    color: var(--pp-text);
    border-left: 0.3rem solid var(--pp-sunrise);
    border-radius: var(--pp-radius-sm);
    padding: 0.75rem 1rem;
}

.admin-menu-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.admin-banner-section {
    color: var(--pp-text-secondary);
}

.admin-menu-links {
    flex-wrap: wrap;
    gap: 0.25rem;
}

.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: var(--pp-text);
}

.admin-menu-link:hover,
.admin-menu-link:focus-visible {
    background: var(--pp-surface);
    color: var(--pp-text);
}

.admin-menu-link.active {
    background: var(--pp-primary);
    color: var(--pp-on-primary);
}

/* Dashboard report trends: one-colour data bars beside each row's number (the table is the data). */
.admin-trend-table caption {
    color: var(--pp-text);
    font-weight: 600;
}

.admin-trend-table {
    table-layout: fixed;
}

.admin-trend-label {
    width: 45%;
}

.admin-trend-count {
    width: 15%;
}

.admin-trend-bar-cell {
    vertical-align: middle;
}

.admin-trend-bar {
    display: block;
    width: 100%;
    height: 0.75rem;
}

.admin-trend-bar rect {
    fill: var(--pp-primary);
}

/* After a review, a queue opens scrolled to the next item; keep it clear of the sticky header. */
.review-queue-item {
    scroll-margin-top: 6rem;
}

.admin-menu-count {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--pp-sunrise);
    color: var(--pp-on-primary);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4rem;
    text-align: center;
}

/* "My Stamp Collection" (the profile's stamp album): one postage stamp per pen pal country.
   The perforated edge is a mask: solid over the content box, and a grid of
   holes across the padding ring (--pp-stamp-hole sets both). */
.pp-stamp-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.stamp-album-progress {
    display: grid;
    gap: 0.35rem;
}

/* A flat bar: one muted track, one primary fill, no browser frame. */
.stamp-album-progress progress {
    width: 100%;
    max-width: 24rem;
    height: 0.5rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--pp-surface-muted);
    color: var(--pp-primary);
    appearance: none;
    overflow: hidden;
}

    .stamp-album-progress progress::-webkit-progress-bar {
        background-color: var(--pp-surface-muted);
    }

    .stamp-album-progress progress::-webkit-progress-value {
        background-color: var(--pp-primary);
    }

    .stamp-album-progress progress::-moz-progress-bar {
        background-color: var(--pp-primary);
    }

/* Regions sit side by side and wrap; a region with many stamps takes the
   width it needs. */
.stamp-album-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.stamp-album-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    max-width: 24rem;
    font-size: 0.875rem;
}

.stamp-album-next a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Collectible: 104px stamps, alternately night soft and sunrise soft, each
   with a white printed face (a fine double frame), a 60x45 flag and the
   country in small capitals. */
.pp-stamp {
    --pp-stamp-hole: 4px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 104px;
    padding: calc(var(--pp-stamp-hole) * 2.25);
    background-color: var(--pp-accent-soft);
    color: var(--pp-text);
    text-decoration: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        radial-gradient(circle var(--pp-stamp-hole), #0000 95%, #000) calc(var(--pp-stamp-hole) * -1) calc(var(--pp-stamp-hole) * -1) / calc(var(--pp-stamp-hole) * 2) calc(var(--pp-stamp-hole) * 2) round;
    mask:
        linear-gradient(#000 0 0) content-box,
        radial-gradient(circle var(--pp-stamp-hole), #0000 95%, #000) calc(var(--pp-stamp-hole) * -1) calc(var(--pp-stamp-hole) * -1) / calc(var(--pp-stamp-hole) * 2) calc(var(--pp-stamp-hole) * 2) round;
}

.pp-stamp:nth-child(even) {
    background-color: var(--pp-sunrise-soft);
}

a.pp-stamp:hover,
a.pp-stamp:focus-visible {
    color: var(--pp-text);
    background-color: color-mix(in srgb, var(--pp-sunrise) 35%, var(--pp-sunrise-soft));
}

.pp-stamp-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    border: 1px solid color-mix(in srgb, var(--pp-primary) 18%, transparent);
    outline: 1px solid color-mix(in srgb, var(--pp-primary) 10%, transparent);
    outline-offset: -5px;
    background-color: var(--pp-surface);
    font-size: 1.75rem;
    color: var(--pp-text-secondary);
}

.pp-stamp-art img {
    display: block;
    width: 60px;
    height: 45px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.pp-stamp-name {
    width: 100%;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-stamp-date {
    font-size: 0.65rem;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.pp-stamp-count {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: var(--pp-sunrise);
    color: var(--pp-on-sunrise);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.pp-stamp-placeholder {
    opacity: 0.6;
}

/* A community photo keeps its own shape: never wider than its card, never
   taller than 480px, and centred. (Stretching it to the card's width left
   bands beside portrait photos.) */
.community-photo-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    margin-inline: auto;
    border-radius: var(--pp-radius);
}

/* Scrapbook: a member's approved pages as small polaroids on a card under
   About on their profile, alternately tilted a degree either way. */
.scrapbook-strip-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1.25rem 1rem;
    padding: 0.35rem 0.25rem 0;
}

.scrapbook-strip-page {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 0.5rem 0.5rem 0.65rem;
    background-color: var(--pp-surface);
    border-radius: var(--pp-radius-sm);
    color: var(--pp-text);
    text-decoration: none;
    border: 1px solid var(--pp-border);
}

    .scrapbook-strip-page-photo {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        margin-bottom: 0.3rem;
        background-color: var(--pp-surface-muted);
    }

    .scrapbook-strip-page:hover .scrapbook-strip-page-title {
        text-decoration: underline;
    }

    .scrapbook-strip-page:focus-visible {
        outline: 2px solid var(--pp-primary);
        outline-offset: 3px;
    }

.scrapbook-strip-page-title {
    font-family: var(--pp-display);
    font-weight: 500;
    line-height: 1.2;
    color: var(--pp-primary);
    overflow-wrap: anywhere;
}

.scrapbook-strip-page-country {
    font-size: 0.8rem;
    color: var(--pp-text-secondary);
}

/* In the gallery a card also says what the page is about and who made it. */
.scrapbook-page-type {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pp-text-secondary);
}

.scrapbook-strip-page-author {
    font-size: 0.8rem;
    color: var(--pp-text-secondary);
    overflow-wrap: anywhere;
}

/* Scrapbooks share Discover's backdrop, toolbar and photo-card grid. */
.scrapbook-gallery-filters {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.scrapbook-gallery-filters .form-select {
    min-width: 11rem;
    min-height: 2.6rem;
    border-radius: 999px;
}

.scrapbook-gallery-toolbar .btn {
    min-height: 2.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.scrapbook-gallery-add { margin-left: auto; }

.scrapbook-gallery-pages .scrapbook-strip-page {
    padding: 0 0 1rem;
    gap: 0.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.scrapbook-gallery-pages .scrapbook-strip-page-photo {
    aspect-ratio: 4 / 3;
    margin: 0 0 0.35rem;
}

.scrapbook-gallery-pages .scrapbook-strip-page > span {
    margin-inline: 1rem;
}

.scrapbook-gallery-pages .scrapbook-strip-page-title {
    font-size: 1.2rem;
    line-height: 1.25;
}

.scrapbook-gallery-pages .scrapbook-strip-page-country,
.scrapbook-gallery-pages .scrapbook-strip-page-author { font-size: 0.875rem; }

.scrapbook-gallery-pages .scrapbook-strip-page-author { margin-top: auto; }

.scrapbook-gallery-pages .scrapbook-strip-page:focus-visible {
    outline-offset: -3px;
    border-radius: 14px;
}

@media (max-width: 575.98px) {
    .scrapbook-gallery-filters > div,
    .scrapbook-gallery-add { width: 100%; }
    .scrapbook-gallery-filters .form-select { font-size: 16px; }
}

/* Top of Discover: People | Scrapbooks. */
/* Reporting a scrapbook page: the page quoted on the form and in admin evidence. */
.report-page-quote {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
}

.report-page-quote-photo {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: var(--pp-radius-sm);
    background-color: var(--pp-surface-muted);
}

.report-page-quote-zoom {
    flex-shrink: 0;
    cursor: zoom-in;
}

.scrapbook-page-report {
    color: var(--pp-text-secondary);
}

    .scrapbook-page-report:hover {
        color: #dc3545;
    }

/* Admins: remove a photo or page, with the reason the member sees (_AdminRemoveForm). */
.admin-remove > summary {
    list-style: none;
}

    .admin-remove > summary::-webkit-details-marker {
        display: none;
    }

.admin-remove[open] > summary {
    margin-bottom: 0.5rem;
}

.admin-remove-form {
    min-width: min(20rem, 100%);
}

.admin-page-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

/* Why an admin removed your photo or page, under the notification. */
.notification-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--pp-text-secondary);
}

/* A scrapbook page on its own: warm paper held by mint tape (it's shared),
   the photos as polaroids, a handwritten title, and the story. */
.scrapbook-page-desk {
    padding-top: 0.75rem;
}

.scrapbook-page {
    position: relative;
    padding: 1.5rem 1.75rem 1rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
}

.scrapbook-page-status {
    padding: 0.5rem 0.75rem;
    background-color: var(--pp-surface-muted);
    border-radius: var(--pp-radius-sm);
}

.scrapbook-page-photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin: 0.5rem 0 1.5rem;
}

.scrapbook-page-photo {
    display: block;
    max-width: min(100%, 22rem);
    padding: 8px 8px 22px;
    background-color: var(--pp-surface);
    cursor: zoom-in;
    border: 1px solid var(--pp-border);
}

    .scrapbook-page-photo img {
        display: block;
        max-width: 100%;
        max-height: 22rem;
        height: auto;
    }

    .scrapbook-page-photo:focus-visible {
        outline: 2px solid var(--pp-primary);
        outline-offset: 3px;
    }

.scrapbook-page-title {
    margin: 0 0 0.25rem;
    font-family: var(--pp-display);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pp-primary);
    overflow-wrap: anywhere;
}

.scrapbook-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--pp-text-secondary);
}

.scrapbook-page-story,
.admin-scrapbook-story {
    white-space: pre-line;
}

.scrapbook-page-story {
    margin-bottom: 1.25rem;
    line-height: 1.65;
}

.scrapbook-page-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--pp-border);
    font-size: 0.9rem;
}

.admin-scrapbook-photo {
    max-width: calc(50% - 0.25rem);
}

@media (max-width: 575.98px) {
    .scrapbook-page {
        padding-inline: 1rem;
    }

    .scrapbook-strip-pages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Share a moment (adding a scrapbook page): three numbered sections in a
   reading column, with a live preview of the page beside them from 992px
   (below that it sits just before Review & share). */
.share-moment {
    max-width: 40rem;
    margin-inline: auto;
}

.share-moment-header {
    margin-bottom: 1.25rem;
}

.share-moment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photos" "story" "preview" "review";
    gap: 1rem;
}

.share-moment-photos { grid-area: photos; }
.share-moment-story { grid-area: story; }
.share-moment-review { grid-area: review; }
.share-preview { grid-area: preview; }

@media (min-width: 992px) {
    .share-moment {
        max-width: 62rem;
    }

    .share-moment-form {
        grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "photos preview" "story preview" "review preview";
        column-gap: 1.5rem;
    }

    .share-preview {
        position: sticky;
        top: calc(var(--pp-sticky-top, 0px) + 1rem);
        align-self: start;
    }
}

.share-moment-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.share-moment-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
    font-family: var(--bs-body-font-family);
    font-size: 0.85rem;
    font-weight: 700;
}

.share-moment-more {
    font-size: 0.875rem;
}

    .share-moment-more > summary {
        width: fit-content;
        color: var(--pp-primary);
        cursor: pointer;
    }

    .share-moment-more ul {
        margin: 0.5rem 0 0;
        padding-left: 1.1rem;
        color: var(--pp-text-secondary);
    }

/* The photo area: chosen photos as thumbnails, then a dashed drop zone whose
   whole surface is a transparent file input (click, keyboard or drop). */
.share-upload {
    margin-bottom: 0.5rem;
}

.share-upload-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.75rem 1rem;
    text-align: center;
    background-color: var(--pp-surface-muted);
    border: 1.5px dashed var(--pp-border-strong);
    border-radius: var(--pp-radius);
    color: var(--pp-text-secondary);
}

    .share-upload-drop[hidden] {
        display: none;
    }

    .share-upload-drop:hover,
    .share-upload-drop.is-dragging {
        border-color: var(--pp-primary);
        background-color: var(--pp-accent-soft);
    }

    .share-upload-drop:focus-within {
        outline: 2px solid var(--pp-primary);
        outline-offset: 2px;
    }

    .share-upload-drop.is-compact {
        flex-direction: row;
        justify-content: center;
        padding: 0.75rem 1rem;
    }

.share-upload-picker {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.share-upload-icon {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--pp-primary);
}

.share-upload-drop.is-compact .share-upload-icon {
    font-size: 1.15rem;
}

.share-upload-prompt strong {
    color: var(--pp-text);
}

.share-upload-browse {
    color: var(--pp-primary);
    text-decoration: underline;
}

.share-upload-thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 13rem));
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

    .share-upload-thumbs[hidden] {
        display: none;
    }

.share-upload-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--pp-surface-muted);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
}

    .share-upload-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.share-upload-cover {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.share-upload-remove {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--pp-border);
    border-radius: 50%;
    background-color: var(--pp-surface);
    color: var(--pp-text-secondary);
    font-size: 0.8rem;
    box-shadow: var(--pp-shadow-pop);
}

    .share-upload-remove:hover,
    .share-upload-remove:focus-visible {
        color: var(--pp-danger);
        border-color: var(--pp-danger);
    }

/* What it's about: one chip per type, with its icon. */
.share-moment legend.form-label {
    font-size: 1rem;
}

.share-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.share-type-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border-strong);
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
}

    .share-type-chip .bi {
        color: var(--pp-primary);
    }

    .share-type-chip:hover {
        background-color: var(--pp-surface-muted);
    }

.btn-check:checked + .share-type-chip {
    border-color: var(--pp-primary);
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
    font-weight: 700;
}

.btn-check:focus-visible + .share-type-chip {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
}

.share-story-count {
    color: var(--pp-text-secondary);
    font-variant-numeric: tabular-nums;
}

    .share-story-count.is-short {
        color: var(--pp-warning-text);
    }

    .share-story-count.is-near {
        color: var(--pp-danger);
    }

/* The live preview: a small copy of the published page. */
.share-preview[hidden] {
    display: none;
}

.share-preview-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pp-text-secondary);
}

.share-preview-page {
    padding: 1rem 1.1rem 0.75rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
}

.share-preview-photos {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.share-preview-photo {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 5px 14px;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
}

    .share-preview-photo img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .share-preview-photo.is-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4 / 3;
        padding: 0;
        background-color: var(--pp-surface-muted);
        border-style: dashed;
        color: var(--pp-text-secondary);
        font-size: 1.75rem;
    }

.share-preview-title {
    margin: 0 0 0.2rem;
    font-family: var(--pp-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pp-primary);
    overflow-wrap: anywhere;
}

.share-preview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: var(--pp-text-secondary);
}

.share-preview-story {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.share-preview-foot {
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--pp-border);
    font-size: 0.8rem;
    color: var(--pp-text-secondary);
}

.share-preview .is-placeholder {
    color: var(--pp-text-secondary);
    font-style: italic;
    opacity: 0.8;
}

.share-preview-note {
    margin-top: 0.5rem;
    color: var(--pp-text-secondary);
}

.share-moment-confirm {
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background-color: var(--pp-surface-muted);
    border-radius: var(--pp-radius-sm);
}

.share-moment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.share-moment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1.75rem;
}

@media (max-width: 575.98px) {
    .share-moment-section {
        padding: 1rem;
    }

    .share-moment-submit {
        width: 100%;
    }
}

/* Compact profile lists (Discover / My Pen Pals) */

.page-container {
    max-width: 1320px;
    margin: 0 auto;
}

.page-header-title {
    font-weight: 600;
}

.page-header-subtitle {
    color: var(--pp-text-secondary);
}

/* Admin Reports' search and filters. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.6rem;
}

.filter-bar-search {
    flex: 1 1 220px;
}

.filter-bar-select {
    flex: 0 1 170px;
    min-width: 140px;
}

.result-count {
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.profile-list {
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03);
    overflow: visible;
}

    .profile-list .profile-row:first-child {
        border-radius: var(--pp-radius) var(--pp-radius) 0 0;
    }

    .profile-list .profile-row:last-child {
        border-radius: 0 0 var(--pp-radius) var(--pp-radius);
    }

.profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--pp-border);
}

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

.profile-row-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 260px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--pp-radius-sm);
    padding: 0.25rem;
    margin: -0.25rem;
}

.profile-row {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

    .profile-row:hover,
    .profile-row:focus-within {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1.25rem rgba(17, 24, 39, 0.08);
    }

@media (prefers-reduced-motion: reduce) {
    .profile-row {
        transition: box-shadow 180ms ease;
    }

        .profile-row:hover,
        .profile-row:focus-within {
            transform: none;
        }
}

.profile-row-link:hover {
    background-color: var(--pp-surface-muted);
}

    .profile-row-link:hover .profile-row-name {
        color: var(--pp-primary);
    }

.avatar-circle.avatar-md {
    width: 60px;
    height: 60px;
    font-size: 1.3rem;
}

.profile-row-info {
    min-width: 0;
}

.profile-row-name {
    font-weight: 600;
}

.profile-row-meta {
    font-size: 0.825rem;
    color: var(--pp-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-row-bio {
    font-size: 0.825rem;
    color: var(--pp-text-secondary);
    margin-top: 0.15rem;
}

.profile-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.profile-row-state {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pp-text-secondary);
    white-space: nowrap;
    padding: 0.375rem 0.25rem;
}

    .profile-row-state.accepted {
        color: var(--pp-success);
    }

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
}

@media (max-width: 575.98px) {
    .filter-bar-select {
        flex-basis: 100%;
    }

    .profile-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stacked, the row's 260px flex-basis would become a height, and Safari
       sizes the link to its longest line instead of the card. Keep it to the
       card's width so the details line ends in an ellipsis. */
    .profile-row-link {
        flex: 0 0 auto;
        max-width: calc(100% + 0.5rem);
    }

    .profile-row-info {
        flex: 1 1 0;
    }

    .profile-row-actions {
        justify-content: flex-start;
    }
}

.card, .list-group-item {
    overflow-wrap: anywhere;
}

/* Terms and Privacy: the page label, then the text on one sheet of warm
   paper, with handwritten section headings divided by dashed rules. */
.legal-sheet {
    padding: 1.5rem 1.75rem 0.75rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    line-height: 1.6;
}

    .legal-sheet h2 {
        margin: 1.5rem 0 0.6rem;
        padding-top: 1.25rem;
        border-top: 1px dashed var(--pp-border);
        font-family: var(--pp-display);
        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.2;
        color: var(--pp-primary);
    }

    .legal-sheet ul {
        padding-left: 1.2rem;
    }

    .legal-sheet li + li {
        margin-top: 0.35rem;
    }

@media (max-width: 575.98px) {
    .legal-sheet {
        padding-inline: 1rem;
    }
}

/* Profile pages: the compact country map at the bottom of the details card
   (_CountryMap, country-map.js, Leaflet + OpenStreetMap tiles). */
.country-map {
    height: 200px;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    border: 1px solid var(--pp-border);
    background-color: var(--pp-surface-muted);
}

@media (max-width: 575.98px) {
    .country-map {
        height: 180px;
    }
}

/* Personal and public profile pages */
.profile-page {
    max-width: 70rem;
}

.profile-panel {
    border-color: var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03);
}

a.profile-panel {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    a.profile-panel:hover {
        box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

.min-w-0 {
    min-width: 0;
}

.stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--pp-radius);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-card-icon-blue {
    background-color: var(--pp-surface-muted);
}

.stat-card-icon-green {
    background-color: var(--pp-success-soft);
}

.stat-card-icon-red {
    background-color: var(--pp-danger-soft);
}

.stat-card-icon-orange {
    background-color: var(--pp-warning-bg);
}

.report-queue-row {
    position: relative;
    transition: background-color 0.15s ease-in-out, transform 180ms ease;
}

    .report-queue-row:hover {
        background-color: var(--pp-surface-muted);
        transform: translateY(-2px);
    }

@media (prefers-reduced-motion: reduce) {
    .report-queue-row {
        transition: background-color 0.15s ease-in-out;
    }

        .report-queue-row:hover {
            transform: none;
        }
}

/* Discover filter chips and interest tags */
.discover-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background-color: var(--pp-surface-muted);
    color: var(--pp-primary);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--pp-border);
    max-width: 100%;
}

.discover-chip-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.discover-chip > .bi {
    flex-shrink: 0;
}

.discover-reset {
    color: var(--pp-primary);
}

    .discover-chip:hover {
        background-color: var(--pp-border);
        color: var(--pp-primary-hover);
    }

.discover-interest-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: var(--pp-surface-muted);
    color: var(--pp-text-secondary);
    font-size: 0.75rem;
}

.discover-interest-tag-muted {
    background-color: transparent;
    border: 1px dashed var(--pp-border);
}

/* Discover pagination footer */
.discover-pagination-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
}

.discover-pagination-info,
.discover-pagination-size {
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.discover-pagination-size {
    justify-content: center;
}

@media (min-width: 768px) {
    .discover-pagination-footer {
        grid-template-columns: 1fr auto 1fr;
    }

    .discover-pagination-info {
        text-align: left;
    }

    .discover-pagination-size {
        justify-content: flex-end;
    }
}

/* Discover results (2026-10-19): on Home's backdrop, a Home-style heading,
   then a toolbar with Filters (opens the filter pop-up), search and sort. */
.discover-page {
    position: relative;
    padding-bottom: 2.5rem;
}

.discover-heading {
    margin: 0.5rem 0 1.25rem;
    text-shadow: none;
}

.discover-heading-title {
    margin: 0 0 0.25rem;
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: var(--pp-text);
}

.discover-heading-subtitle {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    font-weight: 500;
    color: var(--pp-text);
}

.discover-heading-note {
    max-width: 60rem;
    font-size: 0.875rem;
    font-weight: 400;
}

.discover-results-main {
    min-width: 0;
}

/* One warm bar: Filters, the search pill and sort. */
.discover-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background-color: #FFFCF7;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 14px rgba(17, 24, 39, 0.06);
}

:root[data-bs-theme="dark"] .discover-toolbar {
    background-color: var(--pp-surface);
}

.discover-filters-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.6rem;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--pp-primary);
    border-radius: 999px;
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
    font-weight: 700;
}

    .discover-filters-button:hover,
    .discover-filters-button:focus-visible {
        background-color: var(--pp-primary);
        color: var(--pp-on-primary);
    }

.discover-filters-count {
    min-width: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background-color: var(--pp-sunrise);
    color: var(--pp-on-sunrise);
    font-size: 0.75rem;
    line-height: 1.35rem;
    text-align: center;
}

.discover-results-search {
    position: relative;
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    min-width: 0;
}

    .discover-results-search > .bi {
        position: absolute;
        left: 1rem;
        color: var(--pp-text-secondary);
        pointer-events: none;
    }

    .discover-results-search .form-control {
        min-height: 2.6rem;
        padding-left: 2.6rem;
        border-radius: 999px 0 0 999px;
    }

    .discover-results-search .btn {
        min-height: 2.6rem;
        padding-inline: 1.1rem;
        border-radius: 0 999px 999px 0;
    }

.discover-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

@media (max-width: 767.98px) {
    .discover-results-search .form-control {
        font-size: 16px;
    }

    .discover-filters-button,
    .discover-active-filters > a {
        min-height: 44px;
    }

    .discover-sort {
        margin-left: 0;
    }

    .discover-reset {
        display: inline-flex;
        align-items: center;
    }
}

/* Endless scrolling: the next people load as "Show more people" nears the
   screen (or is pressed); a friendly note when everyone's shown. */
.discover-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.discover-more-button {
    padding: 0.55rem 1.5rem;
    border: 1px solid var(--pp-primary);
    border-radius: 999px;
    background-color: #FFFCF7;
    color: var(--pp-primary);
    font-weight: 700;
}

    .discover-more-button:hover,
    .discover-more-button:focus-visible {
        background-color: var(--pp-primary);
        color: var(--pp-on-primary);
    }

:root[data-bs-theme="dark"] .discover-more-button {
    background-color: var(--pp-surface);
}

.discover-more-end {
    margin: 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background-color: #FFFCF7;
    color: var(--pp-text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

:root[data-bs-theme="dark"] .discover-more-end {
    background-color: var(--pp-surface);
}

/* Discover's backdrop scrolls with nothing: the image holds still behind the grid. */
.discover-backdrop .home-backdrop-theme {
    background-attachment: fixed;
}

/* Photo-first profile grids: one through four columns, with equal-height cards. */
.discover-result-list,
.penpal-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .discover-result-list, .penpal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .discover-result-list, .penpal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
    /* Discover's photo tiles stay three across beside the filter panel. */
    .penpal-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.discover-result-identity { min-height: 5rem; }
.discover-result-actions .btn, .penpal-card-actions .btn { width: 100%; min-height: 44px; border-radius: var(--pp-radius-sm); white-space: normal; }

.profile-card-age { font-size: .9rem; font-weight: 400; color: var(--pp-text-secondary); }
.profile-card-handle { font-size: .8rem; color: var(--pp-text-secondary); overflow-wrap: anywhere; }
.profile-card-bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em;
    max-height: 4.5em;
    line-height: 1.5;
    font-size: .875rem;
    margin: 0;
    color: var(--pp-text-secondary);
    overflow-wrap: anywhere;
}
.profile-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: .3rem;
    min-height: 2rem;
}
.profile-card-tags .discover-interest-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card-details { font-size: .8rem; color: var(--pp-text-secondary); overflow-wrap: anywhere; }
.profile-card-details summary { padding-block: .3rem; color: var(--pp-primary); }
.profile-card-details[open] > :not(summary) { margin-top: .5rem; }
.discover-result-row, .penpal-card { transition: border-color .15s ease, box-shadow .15s ease, transform .2s ease; }
.discover-result-row:hover, .penpal-card:hover { border-color: var(--pp-border-strong); box-shadow: 0 3px 10px rgba(17,24,39,.06); }
@media (prefers-reduced-motion: reduce) {
    .discover-result-row, .penpal-card { transition: none; }
    .discover-result-list .discover-result-row:hover { transform: none; }
}

.discover-empty-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.discover-empty-suggestions a {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Discover's photo grid (owner's choice, 2026-10-19): a warm card like Home
   and My Profile, the photo across its top with where you stand on it
   (top left), a pill action, and a soft lift on hover. */
.discover-result-row {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background-color: #FFFCF7;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 4px 14px rgba(17, 24, 39, 0.06);
}

:root[data-bs-theme="dark"] .discover-result-row {
    background-color: var(--pp-surface);
}

.discover-result-list .discover-result-row:hover {
    transform: translateY(-3px);
    border-color: var(--pp-border-strong);
    box-shadow: 0 4px 8px rgba(17, 24, 39, 0.06), 0 14px 30px rgba(17, 24, 39, 0.12);
}

.discover-result-photo {
    position: relative;
}

.discover-result-photo-link {
    display: block;
    width: 100%;
}

.avatar-circle.discover-result-avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    font-size: 3.5rem;
    border: 0;
    border-radius: 0;
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
}

.avatar-circle.discover-result-avatar.discover-tint-0 { background-color: #FBEFD2; color: #633806; }
.avatar-circle.discover-result-avatar.discover-tint-1 { background-color: #E6E1FA; color: #3C3489; }
.avatar-circle.discover-result-avatar.discover-tint-2 { background-color: #FBE3DA; color: #712B13; }
.avatar-circle.discover-result-avatar.discover-tint-3 { background-color: #D9F2EA; color: #085041; }
.avatar-circle.discover-result-avatar.discover-tint-4 { background-color: #DDEBFA; color: #0C447C; }
.avatar-circle.discover-result-avatar.discover-tint-5 { background-color: #F6E3E6; color: #72243E; }

:root[data-bs-theme="dark"] .avatar-circle.discover-result-avatar[class*="discover-tint-"] {
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
}

.discover-result-actions .btn {
    border-radius: 999px;
    font-weight: 700;
}

.discover-result-photo .discover-mark {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.15);
}

.discover-result-body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: .75rem;
    padding: 0.85rem 1rem 1rem;
}

.discover-result-identity > * {
    display: block;
    overflow-wrap: anywhere;
}

.discover-result-languages {
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-result-name {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--pp-display);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
}

.discover-result-username {
    color: var(--pp-primary);
    text-decoration: none;
}

    .discover-result-username:hover,
    .discover-result-username:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

/* Where you stand with them, as a small sticker: sky for your request
   (yours), sun for theirs (new). Pen Pals aren't shown in Discover. */
.discover-mark {
    flex-shrink: 0;
    margin-left: 0;
    padding: 0 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--pp-border);
    color: var(--pp-primary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4rem;
    white-space: nowrap;
}

.discover-mark-sent {
    background-color: var(--pp-surface-muted);
}

.discover-mark-incoming {
    background-color: var(--pp-sunrise-soft);
}

.discover-result-displayname {
    color: var(--pp-text-secondary);
    font-size: 0.875rem;
    line-height: 1.35;
    margin-bottom: 0.15rem;
}

.discover-result-meta {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--pp-text-secondary);
}

/* Why you might get along, written in the margin: the top two reasons in
   full (they wrap), and how many more are on the profile. */
.discover-result-reasons {
    padding: 0.15rem 0 0.15rem 0.7rem;
    border-left: 2px solid var(--pp-border-strong);

    overflow-wrap: anywhere;
}

.discover-result-meta.discover-result-reason,
.discover-result-reason-more {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--pp-primary);
}

.discover-result-reason-more {
    margin-top: 0.1rem;
}

    .discover-result-reason i,
    .discover-result-reason-more i {
        margin-right: 0.15rem;
        font-size: 0.85em;
    }

.discover-result-reason-count {
    display: inline-block;
    margin-top: 0.1rem;
    font-size: 0.8125rem;
    color: var(--pp-text-secondary);
}

/* "Why you might get along" on a member's profile. */
.compatibility-reasons li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

.compatibility-reasons i {
    color: var(--pp-primary);
}

/* A Pen Pal request's optional note, as the receiver sees it. */
.request-note {
    margin-left: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--pp-border);
    background-color: var(--pp-surface-muted);
    border-radius: var(--pp-radius-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Pen Pal Requests: each request is a scrap held by pink tape (pink is other
   people), with their note on a slip of dotted notepaper, like the first
   letter it becomes when accepted. */
.request-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding-top: 0.75rem;
}

.request-scrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    background-color: var(--pp-surface);
    border-radius: var(--pp-radius-sm);
    overflow-wrap: anywhere;
    border: 1px solid var(--pp-border);
}

.request-scrap-photo {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

    .request-scrap-photo .avatar-polaroid {
        width: 4rem;
        height: 4rem;
        font-size: 1.3rem;
    }

.request-scrap-body {
    flex: 1 1 auto;
    min-width: 0;
}

.request-scrap-name {
    margin: 0;
    font-family: var(--pp-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
}

    .request-scrap-name a {
        color: var(--pp-primary);
        text-decoration: none;
    }

        .request-scrap-name a:hover,
        .request-scrap-name a:focus-visible {
            text-decoration: underline;
            text-underline-offset: 0.2em;
        }

.request-scrap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.9rem;
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

/* The note: the sender's first hello on a quiet tinted panel.
   Its text sits alone in .request-slip-text so pre-wrap keeps only the
   sender's own line breaks. */
.request-slip {
    margin: 0.85rem 0 0;
    padding: 0.9rem 1rem;
    background-color: var(--pp-surface-muted);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
}

.request-note-label {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pp-text-secondary);
}

.request-next-step {
    padding: 1rem 1.25rem;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background-color: var(--pp-accent-soft);
}

.letter-drafts {
    padding: 1rem;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
}

.letter-draft-link {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    color: var(--pp-primary);
}

.letter-draft-link[hidden], .letter-drafts[hidden] {
    display: none;
}

.letter-draft-link + .letter-draft-link {
    border-top: 1px solid var(--pp-border);
}

.letter-draft-mark {
    padding: 0.1rem 0.5rem;
    background: var(--pp-accent-soft);
    border-radius: 999px;
    font-size: 0.75rem;
}

.letter-draft-preview {
    display: block;
    margin-top: 0.25rem;
    color: var(--pp-text-secondary);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.request-connection-context {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    color: var(--pp-primary);
}

.request-no-note, .request-accept-help {
    margin: 0.85rem 0 0;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.request-slip-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.request-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

    /* Decline sits apart from Accept and asks before it acts. */
    .request-decline {
        margin-left: auto;
    }

@media (max-width: 575.98px) {
    .request-scrap {
        padding-inline: 1rem;
    }

    .request-scrap-photo .avatar-polaroid {
        width: 3.25rem;
        height: 3.25rem;
    }

    .request-actions .btn {
        min-height: 44px;
    }
}

.request-note-preview {
    color: var(--pp-text-secondary);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Send Pen Pal Request: the optional note, then the full-width button, with
   one even gap between them. */
.request-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 22rem;
}

.request-note-editor summary {
    cursor: pointer;
    color: var(--pp-primary);
}

.discover-result-interests {
    order: 1;
    min-height: 2rem;
    min-width: 0;
}

.discover-result-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pp-text-secondary);
    margin-bottom: 0.2rem;
}

/* All three preview interests stay visible, including on narrow screens. */
.discover-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

    .discover-result-tags .discover-interest-tag {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

/* The action spans the card width at its foot. */
.discover-result-actions {
    order: 3;
    display: flex;
    margin-top: auto;
}

/* Country flags: a small inline flag next to a country name. */
.country-flag {
    width: 1.25em;
    height: auto;
    aspect-ratio: 4 / 3;
    vertical-align: -0.1em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12);
}

.profile-identity,
.profile-actions,
.profile-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-prose {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.75;
}

.profile-details dt {
    color: var(--pp-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.profile-details dd {
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

    .profile-details dd:last-child {
        margin-bottom: 0;
    }

/* Shared identity header for public profiles; My Profile places it in the
   arched Guild Hall character panel below. */
.profile-postcard {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "avatar identity actions";
    align-items: start;
    gap: 1rem 1.5rem;
    margin-top: 2.25rem;
    padding: 1.6rem 1.5rem 1.4rem;
    border-radius: var(--pp-radius-sm);
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
}

.profile-postcard-avatar {
    grid-area: avatar;
    margin-top: -3rem;
}

.profile-postcard-identity {
    grid-area: identity;
}

.profile-postcard-greeting {
    margin: 0 0 0.1rem;
    font-size: 1rem;
    color: var(--pp-text-secondary);
}

.profile-postcard .profile-name {
    font-family: var(--pp-display);
    font-weight: 500;
    color: var(--pp-primary);
}

.profile-postcard-actions {
    grid-area: actions;
    max-width: 22rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--pp-border);
}

/* Someone else's profile: the safety actions (Block, Report) in a ⋯ menu in
   the top-right corner. The postcard keeps a strip clear for it, so nothing
   sits under a control. */
.profile-postcard-menu {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
}

.profile-postcard-menu-toggle {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-color: var(--pp-text-secondary);
    --bs-btn-bg: var(--pp-surface);
    --bs-btn-border-color: var(--pp-border);
    --bs-btn-hover-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-surface-muted);
    --bs-btn-hover-border-color: var(--pp-text-secondary);
    --bs-btn-active-color: var(--pp-primary);
    --bs-btn-active-bg: var(--pp-surface-muted);
    --bs-btn-active-border-color: var(--pp-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.profile-postcard-has-menu {
    padding-right: 3.25rem;
}

/* A steady column for the actions, so the full-width button has room. */
@media (min-width: 992px) {
    .profile-postcard-actions {
        width: 17rem;
    }
}

/* Tablets: photo and identity in a row; the actions below. */
@media (max-width: 991.98px) {
    .profile-postcard {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "avatar identity"
            "actions actions";
    }

    .profile-postcard-actions {
        max-width: none;
        padding: 1rem 0 0;
        border-left: 0;
        border-top: 1px dashed var(--pp-border);
    }
}

/* Phones: the photo, then who they are, then the actions. */
@media (max-width: 575.98px) {
    .profile-postcard {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "avatar"
            "identity"
            "actions";
        padding-inline: 1.1rem;
    }

    .profile-postcard-has-menu {
        padding-right: 1.1rem;
    }
}

/* My Profile: About Me drop cap */
.profile-bio-dropcap::first-letter {
    font-family: var(--pp-display);
    /* Spans the first two lines; the top padding lines its top up with the
       first line's capitals. */
    font-size: 2.6em;
    font-weight: 500;
    float: left;
    line-height: 0.85;
    padding-right: 0.1em;
    padding-top: 0.12em;
    color: var(--pp-primary);
}

/* My Profile: compact detail rows */
.profile-detail-rows {
    display: flex;
    flex-direction: column;
}

.profile-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
}

    .profile-detail-row:not(:last-child) {
        border-bottom: 1px solid var(--pp-border);
    }

.profile-detail-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pp-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

    .profile-detail-label i {
        color: var(--pp-primary);
        opacity: 0.8;
        font-size: 0.95rem;
    }

.profile-detail-value {
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 400px) {
    .profile-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .profile-detail-value {
        text-align: left;
    }
}

/* Languages with levels (profile pages) */
.profile-language-list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 0.75rem;
}

.profile-language {
    white-space: nowrap;
}

.profile-language-level {
    color: var(--bs-secondary-color);
    font-size: 0.875em;
}

.profile-language-level::before {
    content: "\00b7\00a0";
}

@media (max-width: 400px) {
    .profile-language-list {
        justify-content: flex-start;
    }
}

/* Edit Profile (2026-10-20): a personal profile editor in the correspondence
   language of Home, Discover and the site shell. A numbered section rail
   (scrollspy marks where you are; a chip row on narrower screens), your photo
   and name as an ink identity banner, the form as numbered paper sheets beside
   a live Discover preview, and a save bar that stays in reach and turns
   crimson-ruled when there are unsaved changes. Scoped to .profile-editor.
   Flat fills only. */
.profile-editor {
    --pe-serif: "Newsreader", "Iowan Old Style", "Sitka Text", Georgia, serif;
    --pe-sans: "Atkinson Hyperlegible", var(--pp-font);
    --pe-ink: #14223D;
    --pe-on-ink: #F7F2E8;
    --pe-on-ink-muted: #C3CAD9;
    --pe-paper: #F7F2E8;
    --pe-card: #FFFFFF;
    --pe-field: #FFFFFF;
    --pe-rule: #E3DACA;
    --pe-rule-strong: #C9BDA7;
    --pe-text: #14223D;
    --pe-muted: #5A6175;
    --pe-accent: #A83246;
    --pe-accent-hover: #8A2839;
    --pe-on-accent: #FFFFFF;
    --pe-accent-soft: #F8EBEC;
    --pe-focus: rgba(20, 34, 61, 0.16);
    --pe-shadow: 0 1px 2px rgba(20, 34, 61, 0.05), 0 6px 18px rgba(20, 34, 61, 0.06);
    --pe-shadow-up: 0 -8px 24px rgba(20, 34, 61, 0.1);
    --pe-page: #FFFFFF;
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2.5rem;
    max-width: 86rem;
    margin: 0 auto;
    padding: 1.75rem 0 0;
    color: var(--pe-text);
    font-family: var(--pe-sans);
}

:root[data-bs-theme="dark"] .profile-editor {
    --pe-ink: #F1EBDD;
    --pe-on-ink: #14223D;
    --pe-on-ink-muted: #4A5470;
    --pe-paper: #1D2436;
    --pe-card: var(--pp-surface);
    --pe-field: #1A2031;
    --pe-rule: #3A4360;
    --pe-rule-strong: #57617F;
    --pe-text: #ECEFF7;
    --pe-muted: #B9C0D4;
    --pe-accent: #F0909F;
    --pe-accent-hover: #F6B0BB;
    --pe-on-accent: #3A0F18;
    --pe-accent-soft: #3D2229;
    --pe-focus: rgba(241, 235, 221, 0.18);
    --pe-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --pe-shadow-up: 0 -8px 24px rgba(0, 0, 0, 0.4);
    --pe-page: var(--pp-bg);
}

/* The section rail: numbered like a contents page, the current section in
   ink on a crimson rule. */
.pe-rail {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    padding-top: 0.5rem;
}

.pe-rail-kicker,
.pe-kicker {
    margin: 0;
    color: var(--pe-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pe-rail-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
    margin: 0.85rem 0 1.25rem;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--pe-rule);
}

    .pe-rail-list .nav-link {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        margin-left: -1px;
        padding: 0.45rem 0.75rem;
        border-left: 2px solid transparent;
        color: var(--pe-muted);
        font-size: 0.9rem;
        line-height: 1.3;
        transition: color 0.18s ease, border-color 0.18s ease;
    }

        .pe-rail-list .nav-link:hover,
        .pe-rail-list .nav-link:focus-visible {
            color: var(--pe-text);
        }

        .pe-rail-list .nav-link.active {
            border-left-color: var(--pe-accent);
            color: var(--pe-text);
            font-weight: 700;
        }

.pe-rail-number,
.pe-section-number {
    color: var(--pe-accent);
    font-family: var(--pe-serif);
    font-style: italic;
    font-weight: 400;
    font-variant-numeric: lining-nums tabular-nums;
}

.pe-rail-view {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--pe-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

    .pe-rail-view .bi {
        transition: transform 0.2s ease;
    }

    .pe-rail-view:hover .bi,
    .pe-rail-view:focus-visible .bi {
        transform: translateX(3px);
    }

.pe-main {
    min-width: 0;
}

/* The masthead. */
.pe-masthead {
    margin-bottom: 1.75rem;
    padding-bottom: 1.35rem;
    border-bottom: 3px double var(--pe-ink);
}

.pe-title {
    margin: 0.4rem 0 0.5rem;
    color: var(--pe-text);
    font-family: var(--pe-serif);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.pe-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0;
    color: var(--pe-muted);
    font-family: var(--pe-serif);
    font-size: 1.1rem;
    font-style: italic;
}

    .pe-subtitle a {
        color: var(--pe-accent);
        font-family: var(--pe-sans);
        font-size: 0.9rem;
        font-style: normal;
        font-weight: 700;
    }

/* 01: the identity banner, in ink, with the photo on a polaroid and your
   name set large. */
.pe-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem 2.25rem;
    margin-bottom: 1.75rem;
    padding: 2rem 2.25rem;
    border-radius: 1.4rem;
    background-color: var(--pe-ink);
    color: var(--pe-on-ink);
    scroll-margin-top: 1.5rem;
}

.pe-identity-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

    .pe-identity-photo .avatar-xl {
        width: 9rem;
        height: 9rem;
        font-family: var(--pe-serif);
        font-size: 3.5rem;
    }

.profile-edit-photo-pending {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.profile-edit-pending-mark {
    padding: 0 0.6rem;
    border-radius: 999px;
    background-color: var(--pe-accent);
    color: var(--pe-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6rem;
}

.pe-identity-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    color: var(--pe-on-ink-muted);
    font-family: var(--pe-sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

    .pe-identity-title .pe-section-number {
        font-size: 1rem;
        letter-spacing: 0;
        text-transform: none;
    }

.pe-identity-name {
    margin: 0.35rem 0 0;
    color: var(--pe-on-ink);
    font-family: var(--pe-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.pe-identity-handle {
    margin: 0.2rem 0 0;
    color: var(--pe-on-ink-muted);
    font-size: 0.9rem;
}

.pe-identity .alert {
    margin: 1rem 0 0;
}

.pe-identity .text-muted {
    color: var(--pe-on-ink-muted) !important; /* over Bootstrap's .text-muted on the ink banner */
}

.pe-identity .btn-link {
    color: var(--pe-on-ink);
}

.pe-identity-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
}

    /* Scoped through .pe-identity to outrank the general .profile-editor
       label and hint colours, which are for the paper sheets. */
    .pe-identity .pe-identity-actions .form-label {
        color: var(--pe-on-ink);
        font-size: 0.8rem;
        font-weight: 700;
    }

    .pe-identity .pe-identity-actions .form-text {
        max-width: 34rem;
        color: var(--pe-on-ink-muted);
    }

.pe-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    /* The picker's own button sits centred in the pill: Bootstrap gives it
       negative top and bottom margins, which knocked it out of line. */
    .pe-upload-row .profile-picture-input {
        max-width: 20rem;
        height: 2.75rem;
        padding: 0.3rem 0.4rem;
        border-color: transparent;
        border-radius: 999px;
        background-color: var(--pe-field);
        color: var(--pe-text);
        line-height: 2.15rem;
    }

        .pe-upload-row .profile-picture-input::file-selector-button {
            height: 2.15rem;
            margin: 0 0.75rem 0 0;
            padding: 0 1rem;
            border: 0;
            border-radius: 999px;
            background-color: var(--pe-paper);
            color: var(--pe-text);
            font-weight: 700;
            vertical-align: top;
        }

    /* Upload photo in the site's crimson. */
    .pe-upload-row .btn {
        min-height: 2.75rem;
        padding-inline: 1.25rem;
        border: 1px solid var(--pe-accent);
        border-radius: 999px;
        background-color: var(--pe-accent);
        color: var(--pe-on-accent);
        font-weight: 700;
    }

        .pe-upload-row .btn:hover,
        .pe-upload-row .btn:focus-visible {
            border-color: var(--pe-accent-hover);
            background-color: var(--pe-accent-hover);
            color: var(--pe-on-accent);
        }

/* Remove photo: an outline on the banner (.letters-delete paints a white
   button through Bootstrap's button variables, so set those), crimson on hover. */
.pe-identity .letters-delete {
    --bs-btn-color: var(--pe-on-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--pe-on-ink-muted);
    --bs-btn-hover-color: var(--pe-on-accent);
    --bs-btn-hover-bg: var(--pe-accent);
    --bs-btn-hover-border-color: var(--pe-accent);
    --bs-btn-active-color: var(--pe-on-accent);
    --bs-btn-active-bg: var(--pe-accent-hover);
    --bs-btn-active-border-color: var(--pe-accent-hover);
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    border-radius: 999px;
    font-weight: 700;
}

.pe-identity a:focus-visible,
.pe-identity button:focus-visible,
.pe-identity input:focus-visible {
    outline: 2px solid var(--pe-on-ink);
    outline-offset: 2px;
}

/* The form: numbered sheets beside the live preview. */
.pe-form {
    position: relative;
}

.pe-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 2rem;
    align-items: start;
}

.pe-sheets {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.pe-section {
    padding: 1.75rem 2rem 2rem;
    border: 1px solid var(--pe-rule);
    border-radius: 1.25rem;
    background-color: var(--pe-card);
    box-shadow: var(--pe-shadow);
    scroll-margin-top: 1.5rem;
}

.pe-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--pe-rule);
}

    .pe-section-head .pe-section-number {
        font-size: 1.6rem;
        line-height: 1;
    }

    .pe-section-head .profile-edit-section-title {
        margin: 0;
        color: var(--pe-text);
        font-family: var(--pe-serif);
        font-size: 1.65rem;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

.pe-section-note {
    margin: 0.3rem 0 0;
    color: var(--pe-muted);
    font-size: 0.9rem;
}

/* Optional, said quietly in italic serif; anything unmarked is needed. */
.pe-optional {
    color: var(--pe-muted);
    font-family: var(--pe-serif);
    font-size: 0.95em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.pe-field-group + .pe-field-group {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--pe-rule);
}

/* Fields: one height, soft paper borders, an ink ring on focus, crimson when
   invalid, and a quiet locked look when read-only. */
.profile-editor .form-label {
    margin-bottom: 0.4rem;
    color: var(--pe-text);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.profile-editor .form-text {
    color: var(--pe-muted);
    font-size: 0.8rem;
}

.pe-form .form-control,
.pe-form .form-select,
.pe-form .input-group-text {
    min-height: 2.9rem;
    border-color: var(--pe-rule-strong);
    border-radius: 0.75rem;
    background-color: var(--pe-field);
    color: var(--pe-text);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pe-form .input-group-text {
    background-color: var(--pe-paper);
    color: var(--pe-muted);
    font-weight: 700;
}

.pe-form .form-control:hover,
.pe-form .form-select:hover {
    border-color: var(--pe-muted);
}

.pe-form .form-control:focus,
.pe-form .form-select:focus,
.pe-form .pp-select-toggle[aria-expanded="true"] {
    border-color: var(--pe-ink);
    box-shadow: 0 0 0 0.25rem var(--pe-focus);
}

.pe-form .form-control:disabled,
.pe-form .form-control[readonly] {
    border-style: dashed;
    background-color: var(--pe-paper);
    color: var(--pe-muted);
    cursor: not-allowed;
}

.pe-form .input-validation-error,
.pe-form .input-validation-error:focus {
    border-color: var(--pe-accent);
    background-color: var(--pe-accent-soft);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--pe-accent) 18%, transparent);
}

.pe-form .field-validation-error {
    display: block;
    margin-top: 0.35rem;
    color: var(--pe-accent) !important; /* over Bootstrap's .text-danger */
    font-size: 0.82rem;
    font-weight: 700;
}

.pe-locked .input-group-text.pe-lock {
    color: var(--pe-muted);
}

/* About me is written, so it gets the serif and room to breathe. */
.pe-form .pe-bio {
    min-height: 9.5rem;
    padding: 0.85rem 1rem;
    font-family: var(--pe-serif);
    font-size: 1.08rem;
    line-height: 1.6;
}

.pe-bio-meta {
    font-variant-numeric: tabular-nums;
}

    .pe-bio-meta .text-success {
        color: var(--pp-success) !important; /* the minimum, once it's met */
        font-weight: 700;
    }

.profile-bio-guidance summary {
    color: var(--pe-accent);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.profile-bio-guidance blockquote {
    padding: 0.85rem 1.1rem;
    border-left: 2px solid var(--pe-accent);
    border-radius: 0 0.6rem 0.6rem 0;
    background-color: var(--pe-paper);
    font-family: var(--pe-serif);
    font-size: 1rem;
    font-style: italic;
}

/* Languages: each language and level on one row, Remove as a round button,
   and Add as a dashed pill. */
.language-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 10rem) auto;
    gap: 0.5rem;
    align-items: center;
}

.pe-form .language-remove {
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border-color: var(--pe-rule-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--pe-muted);
}

    .pe-form .language-remove:hover,
    .pe-form .language-remove:focus-visible {
        border-color: var(--pe-accent);
        background-color: var(--pe-accent-soft);
        color: var(--pe-accent);
    }

.pe-form .language-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem !important; /* over the .mt-1 utility */
    padding: 0.45rem 1rem !important; /* over the .px-0 utility */
    border: 1px dashed var(--pe-rule-strong);
    border-radius: 999px;
    color: var(--pe-text);
    font-weight: 700;
    text-decoration: none;
}

    .pe-form .language-add[hidden] {
        display: none;
    }

    .pe-form .language-add:hover,
    .pe-form .language-add:focus-visible {
        border-color: var(--pe-ink);
        background-color: var(--pe-paper);
    }

/* Interests: pills in groups; a chosen one turns ink with a tick. The real
   checkbox stays in the label for keyboards and screen readers. */
.pe-interests-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.25rem;
}

    .pe-interests-head .form-text {
        max-width: 38rem;
    }

.pe-interest-count {
    margin: 0;
    color: var(--pe-accent);
    font-family: var(--pe-serif);
    font-size: 1.15rem;
    font-style: italic;
}

.profile-edit-interest-groups {
    display: grid;
    gap: 1.25rem;
}

.profile-interest-group legend {
    float: none;
    margin-bottom: 0.6rem;
    color: var(--pe-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.profile-edit-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-interest-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.35rem 1rem;
    border: 1px solid var(--pe-rule-strong);
    border-radius: 999px;
    background-color: var(--pe-field);
    color: var(--pe-text);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .profile-interest-tag input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .profile-interest-tag:hover {
        border-color: var(--pe-ink);
    }

    .profile-interest-tag:has(input:checked) {
        border-color: var(--pe-ink);
        background-color: var(--pe-ink);
        color: var(--pe-on-ink);
        font-weight: 700;
    }

        .profile-interest-tag:has(input:checked) span::before {
            content: "\2713\00a0";
        }

    .profile-interest-tag:has(input:focus-visible) {
        outline: 2px solid var(--pe-ink);
        outline-offset: 2px;
    }

/* Gender: the radios drawn as pills. */
.pe-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pe-choice {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.35rem 1rem;
    border: 1px solid var(--pe-rule-strong);
    border-radius: 999px;
    background-color: var(--pe-field);
    color: var(--pe-text);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .pe-choice:hover {
        border-color: var(--pe-ink);
    }

.pe-choices .btn-check:checked + .pe-choice {
    border-color: var(--pe-ink);
    background-color: var(--pe-ink);
    color: var(--pe-on-ink);
    font-weight: 700;
}

.pe-choices .btn-check:focus-visible + .pe-choice {
    outline: 2px solid var(--pe-ink);
    outline-offset: 2px;
}

/* What to fix after a save that didn't validate. */
.profile-edit-errors.validation-summary-valid {
    display: none;
}

.pe-form .profile-edit-errors {
    border: 1px solid var(--pe-accent);
    border-left-width: 4px;
    border-radius: 0.9rem;
    background-color: var(--pe-accent-soft);
    color: var(--pe-text);
}

.profile-edit-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* The live preview, beside the sheets on wide screens. */
.pe-preview {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 1.5rem;
}

    .pe-preview > summary {
        display: none;
    }

.discover-people.discover-people-preview {
    max-width: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

    .discover-people-preview .discover-result-row {
        animation: none;
    }

/* The save bar: always in reach at the bottom of the screen. With unsaved
   changes it gains a crimson rule and a crimson dot. */
.pe-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.75rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.25rem;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    border: 1px solid var(--pe-rule);
    border-top: 2px solid var(--pe-rule);
    border-radius: 1.1rem 1.1rem 0 0;
    background-color: var(--pe-card);
    box-shadow: var(--pe-shadow-up);
    transition: border-color 0.2s ease;
}

.profile-save-status {
    display: inline-flex;
    flex: 1 1 14rem;
    align-items: center;
    gap: 0.55rem;
    color: var(--pe-muted);
    font-size: 0.88rem;
}

    .profile-save-status::before {
        content: "";
        flex-shrink: 0;
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50%;
        background-color: var(--pe-rule-strong);
        transition: background-color 0.2s ease;
    }

.pe-form[data-dirty] .pe-savebar {
    border-top-color: var(--pe-accent);
}

.pe-form[data-dirty] .profile-save-status {
    color: var(--pe-text);
    font-weight: 700;
}

    .pe-form[data-dirty] .profile-save-status::before {
        background-color: var(--pe-accent);
    }

.pe-savebar .btn {
    min-height: 2.9rem;
    padding-inline: 1.5rem;
    border-radius: 999px;
    font-weight: 700;
}

.pe-savebar .btn-primary {
    border-color: var(--pe-ink);
    background-color: var(--pe-ink);
    color: var(--pe-on-ink);
}

    .pe-savebar .btn-primary:hover,
    .pe-savebar .btn-primary:focus-visible {
        border-color: var(--pe-accent);
        background-color: var(--pe-accent);
        color: var(--pe-on-accent);
    }

.pe-savebar .btn-outline-secondary {
    border-color: var(--pe-rule-strong);
    background: transparent;
    color: var(--pe-text);
}

/* Below 1200px: the preview becomes a section you can open, above the sheets. */
@media (max-width: 1199.98px) {
    .pe-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .pe-preview,
    .pe-sheets {
        grid-column: 1;
        grid-row: auto;
    }

    .pe-preview {
        position: static;
        border: 1px solid var(--pe-rule);
        border-radius: 1.1rem;
        background-color: var(--pe-paper);
    }

        .pe-preview > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 3.25rem;
            padding: 0.6rem 1.25rem;
            color: var(--pe-text);
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }

            .pe-preview > summary::-webkit-details-marker {
                display: none;
            }

            .pe-preview > summary::after {
                content: "\002B";
                color: var(--pe-accent);
                font-family: var(--pe-serif);
                font-size: 1.5rem;
                line-height: 1;
                transition: transform 0.2s ease;
            }

        .pe-preview[open] > summary::after {
            transform: rotate(45deg);
        }

    .pe-preview-inner {
        max-width: 22rem;
        padding: 0 1.25rem 1.25rem;
    }
}

/* Below 992px: the rail becomes a sticky row of section chips. */
@media (max-width: 991.98px) {
    .profile-editor {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-top: 0;
    }

    .pe-rail {
        top: 0;
        z-index: 6;
        margin: 0 -0.75rem 1rem;
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--pe-rule);
        background-color: var(--pe-page);
    }

    .pe-rail-kicker,
    .pe-rail-view {
        display: none;
    }

    .pe-rail-list {
        flex-direction: row;
        gap: 0.4rem;
        margin: 0;
        overflow-x: auto;
        border-left: 0;
        scrollbar-width: none;
    }

        .pe-rail-list::-webkit-scrollbar {
            display: none;
        }

        .pe-rail-list .nav-link {
            flex-shrink: 0;
            margin: 0;
            padding: 0.4rem 0.85rem;
            border: 1px solid var(--pe-rule);
            border-radius: 999px;
            white-space: nowrap;
        }

            .pe-rail-list .nav-link.active {
                border-color: var(--pe-ink);
                background-color: var(--pe-ink);
                color: var(--pe-on-ink);
            }

                .pe-rail-list .nav-link.active .pe-rail-number {
                    color: inherit;
                }

    .pe-identity,
    .pe-section {
        scroll-margin-top: 4.5rem;
    }
}

@media (max-width: 767.98px) {
    .pe-identity {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.5rem;
    }

    .pe-section {
        padding: 1.35rem 1.15rem 1.5rem;
    }

    .pe-form .form-control,
    .pe-form .form-select {
        font-size: 16px; /* no zoom on focus on phones */
    }

    .pe-savebar {
        margin-inline: -0.75rem;
        border-radius: 0;
    }

        .pe-savebar .btn {
            flex: 1 1 auto;
        }
}

@media (prefers-reduced-motion: reduce) {
    .pe-rail-list .nav-link,
    .pe-rail-view .bi,
    .profile-interest-tag,
    .pe-choice,
    .pe-savebar,
    .profile-save-status::before,
    .pe-preview > summary::after {
        transition: none;
    }

    .pe-rail-view:hover .bi,
    .pe-rail-view:focus-visible .bi {
        transform: none;
    }
}

/* Give language names their own line on phones instead of squeezing them
   between the proficiency picker and Remove. Works with native/custom selects. */
@media (max-width: 575.98px) {
    .language-row {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .language-row > :first-child {
        grid-column: 1 / -1;
    }

    .language-row > *,
    .letters-places > span {
        min-width: 0;
    }

    .language-remove,
    .language-add,
    .discover-result-actions .btn,
    .letter-reply-foot .btn {
        min-height: 44px;
    }

    .letter-reply-foot .btn {
        width: 100%;
    }

    .letters-places {
        flex-wrap: wrap;
        overflow-wrap: anywhere;
    }
}

/* ==================================================
   HelloAcross design-system accents (decorative, ~10-20% of UI)
   ================================================== */

.penpal-page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background-color: var(--pp-accent-soft);
    border-radius: var(--pp-radius-sm);
    padding: 1.25rem 1.75rem;
    border: 1px solid var(--pp-border);
}

    .penpal-page-header h1 {
        font-family: var(--pp-display);
        font-weight: 500;
    }

.penpal-page-header-text {
    min-width: 0;
}

.penpal-page-header-tagline {
    color: var(--pp-primary);
    font-size: 0.95rem;
    line-height: 1.35;
    opacity: 0.85;
}

.penpal-illustration {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .penpal-illustration img {
        display: block;
        width: 100%;
        height: auto;
    }

.penpal-illustration-sm {
    max-width: 96px;
}

.penpal-illustration-md {
    max-width: 160px;
}

.penpal-illustration-lg {
    max-width: 220px;
}

@media (max-width: 991.98px) {
    .penpal-illustration-lg {
        max-width: 140px;
    }
}

@media (max-width: 767.98px) {
    .penpal-page-header {
        flex-wrap: wrap;
    }

    .penpal-illustration-hide-mobile {
        display: none;
    }
}

.penpal-stamp {
    width: 56px;
    height: auto;
    flex-shrink: 0;
}

.penpal-postmark {
    width: 72px;
    height: auto;
    opacity: 0.9;
    flex-shrink: 0;
}

.penpal-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background-color: var(--pp-surface);
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-border);
}

    .penpal-empty-state img {
        width: 96px;
        height: auto;
        margin-bottom: 0.75rem;
    }

.penpal-empty-state-illustration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: -0.5rem;
}

/* Letters: each letter is a plain card, oldest to newest, signed with who
   wrote it and where from, in a muted panel. Letters you received are white;
   your own are a pale blue. New letters carry a soft blue "New" mark. */

.letters-desk {
    max-width: 46rem;
    margin-inline: auto;
}

    .letters-desk.letters-desk-wide {
        max-width: 56rem;
    }

/* The label at the top of a Letters page. */
.letters-label {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1.4rem 1.25rem 1rem;
    background-color: var(--pp-accent-soft);
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-border);
}

.letters-label-text {
    flex: 1 1 16rem;
    min-width: 0;
}

.letters-label-title {
    margin: 0;
    font-family: var(--pp-display);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pp-primary);
}

.letters-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.75rem;
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.letters-places {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.05rem;
    color: var(--pp-primary);
}

/* One thread panel, like a chat: the letters scroll on their own above,
   the reply box sits along the bottom. messages.js opens the letters on the
   first new one, or the newest. */
.letters-thread {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background-color: var(--pp-surface-muted);
    overflow: hidden;
}

.penpal-letter-history {
    position: relative; /* messages.js measures letters from the panel's top */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 16rem;
    max-height: min(65vh, 44rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
}

    .penpal-letter-history:focus-visible {
        outline: 0.2rem solid var(--pp-primary);
        outline-offset: -0.2rem;
    }

/* A letter: theirs on the left beside their picture, yours on the right. */
.letter-entry {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 82%;
    scroll-margin-top: 1rem;
}

.letter-entry-outgoing {
    align-self: flex-end;
}

.letter-avatar {
    flex-shrink: 0;
    margin-bottom: 1.4rem; /* level with the bubble's last line, above its foot */
}

    .letter-avatar .avatar-circle {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.85rem;
        border: 3px double var(--pp-border-strong);
        background-color: var(--pp-accent-soft);
    }

/* A line for each new day. */
.letter-day {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pp-text-secondary);
}

    .letter-day::before,
    .letter-day::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--pp-border);
    }

/* "Write a reply": a quiet jump from the top of the page to the reply box. */
.letters-jump {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

    .letters-jump:hover,
    .letters-jump:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

/* A letter that received focus from messages.js (after Load earlier). */
.penpal-letter:focus {
    outline: none;
}

.penpal-letter:focus-visible {
    outline: 0.2rem solid var(--pp-primary);
    outline-offset: 0.25rem;
}

/* The bubble: the corner nearest the writer is tucked in, so it reads as
   speech without a tail. Theirs on the surface, yours in the accent. */
.penpal-letter {
    min-width: 0;
    padding: 0.75rem 1rem 0.35rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: 1rem 1rem 1rem 0.3rem;
}

/* Yours in the Send Letter button's colour, with its text colour; the small
   lines (name, place, time, Delete) use that colour too, slightly softer. */
.penpal-letter-outgoing {
    border-color: var(--pp-primary);
    border-radius: 1rem 1rem 0.3rem 1rem;
    background-color: var(--pp-primary);
    color: var(--pp-on-primary);
}

:root[data-palette="discord"] .penpal-letter-outgoing {
    border-color: #5865F2;
    background-color: #5865F2;
    color: #FFFFFF;
}

    .penpal-letter-outgoing .penpal-letter-from,
    .penpal-letter-outgoing .penpal-letter-place,
    .penpal-letter-outgoing .penpal-letter-foot,
    .penpal-letter-outgoing .penpal-letter-action,
    .penpal-letter-outgoing .penpal-letter-action:hover,
    .penpal-letter-outgoing .penpal-letter-action:focus-visible {
        color: inherit;
    }

    .penpal-letter-outgoing .penpal-letter-place,
    .penpal-letter-outgoing .penpal-letter-foot {
        opacity: 0.85;
    }

    .penpal-letter:not(.penpal-letter-outgoing) .penpal-letter-from {
        color: var(--pp-sunrise-text);
    }

/* Who wrote it, where from, and New: one small line above the letter. */
.penpal-letter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    margin-bottom: 0.25rem;
}

.penpal-letter-from {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pp-primary);
    overflow-wrap: anywhere;
}

.penpal-letter-place {
    font-size: 0.78rem;
    color: var(--pp-text-secondary);
}

.penpal-letter-new-mark {
    padding: 0 0.5rem;
    border-radius: 999px;
    background-color: var(--pp-sunrise);
    color: var(--pp-on-sunrise);
    font-size: 0.75rem;
}

.penpal-letter-content {
    max-width: 34em; /* about 70 characters a line */
    margin: 0 0 0.35rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The time, with Delete and Report beside it. */
.penpal-letter-foot {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--pp-text-secondary);
}

/* A letter's "Delete for me" and "Report this letter": quiet, with a hit
   area big enough for a thumb. Only Delete turns red; reporting isn't
   destructive. With a mouse they appear on hover (or keyboard focus);
   touch screens always show the icons. */
.penpal-letter-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 0.4rem;
    color: var(--pp-text-secondary);
    font-size: 0.78rem;
    line-height: 1;
    text-decoration: none;
}

    .penpal-letter-action:hover,
    .penpal-letter-action:focus-visible {
        color: var(--pp-primary);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .penpal-letter-action-delete:hover,
    .penpal-letter-action-delete:focus-visible {
        color: var(--pp-danger);
    }

@media (hover: hover) {
    .penpal-letter-action {
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
    }

    .letter-entry:hover .penpal-letter-action,
    .letter-entry:focus-within .penpal-letter-action {
        opacity: 1;
    }
}

@media (hover: none) {
    .penpal-letter-action-label {
        display: none;
    }
}

/* A letter that lands while the page is open fades in. */
.penpal-letter-arrived {
    animation: penpal-letter-arrive 320ms ease-out both;
}

@keyframes penpal-letter-arrive {
    from {
        opacity: 0;
        transform: translateY(0.4rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .penpal-letter-arrived {
        animation: none;
    }
}

.penpal-letter-empty {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
}

.penpal-letter-empty-image {
    width: 88px;
}

/* A reply box: a card with a plain text box (the forum uses it too). */
.letter-reply {
    scroll-margin-top: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
}

.letter-reply-label {
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: var(--pp-primary);
}

/* At least 16px, or iOS zooms the page when you tap in to write. */
.form-control.letter-reply-text {
    min-height: calc(1.65em * 5 + 1rem);
    font-size: max(16px, 1.0625rem);
    line-height: 1.65;
    resize: vertical;
}

/* In a letter thread the reply runs along the bottom of the panel: three
   lines to start; messages.js grows it to about twelve, then it scrolls. */
.letters-thread .letter-reply {
    padding: 0.75rem 1rem;
    border: 0;
    border-top: 1px solid var(--pp-border);
    border-radius: 0;
}

.letters-thread .form-control.letter-reply-text {
    min-height: calc(1.6em * 3 + 1rem);
    max-height: calc(1.6em * 12 + 1rem);
    line-height: 1.6;
    resize: none;
    overflow-y: auto;
}

.letter-reply-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

.letter-reply-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.75rem;
}

/* Why you can't write here any more, along the bottom of the thread. */
.letters-thread-closed {
    margin: 0;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--pp-border);
    background-color: var(--pp-surface);
    font-size: 0.9rem;
    color: var(--pp-text-secondary);
}

/* messages.js focuses the message from your last action so it's read out;
   it isn't something you can act on, so it doesn't need a focus ring. */
.letters-desk > .alert:focus {
    outline: none;
}

/* Busy, but still focusable (messages.js): "Sending…", "Loading earlier letters…". */
.letters-desk .btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: progress;
}

@media (max-width: 575.98px) {
    .letter-entry {
        max-width: 100%;
    }

    .letter-avatar {
        display: none;
    }

    .penpal-letter-history {
        padding: 0.75rem;
    }
}

/* Letters list: one notepaper ledger, one line per pen pal. */
.letter-ledger {
    background-color: var(--pp-surface);
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-border);
}

.letter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.6rem 1rem;
}

    .letter-row + .letter-row {
        border-top: 1px dashed var(--pp-border);
    }

.letter-row-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

    .letter-row-link:hover .letter-row-name,
    .letter-row-link:focus-visible .letter-row-name {
        text-decoration: underline;
    }

.letter-row-info {
    flex: 1 1 auto;
    min-width: 0;
}

.letter-row-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.letter-row-name {
    overflow: hidden;
    font-weight: 700;
    color: var(--pp-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.letter-row-country,
.letter-row-date {
    flex-shrink: 0;
    color: var(--pp-text-secondary);
    white-space: nowrap;
}

.letter-row-country {
    font-size: 0.95rem;
}

.letter-row-date {
    font-size: 0.8rem;
}

.letter-row-preview {
    overflow: hidden;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.letter-row-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* My Pen Pals: a collection of friendships. The header carries the
   flat night soft; under it, one card per Pen
   Pal in the responsive photo-first grid. Each card has a rectangular
   avatar, the @username, the flag (just once, by the country), country
   and city, whose turn it is, what they speak and share, one line from your letters,
   Write a Letter as the one primary action, and Remove tucked in a ⋯ menu. */
.penpal-collection {
    max-width: 68rem;
    margin-inline: auto;
    padding-top: 1.25rem;
}

.penpal-collection-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background-color: var(--pp-surface-muted);
}

.penpal-collection-header-text {
    flex: 1 1 22rem;
    min-width: 0;
}

.penpal-collection-title {
    margin: 0 0 0.35rem;
    font-family: var(--pp-display);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.15;
}

.penpal-collection-subtitle {
    margin: 0;
    color: var(--pp-text-secondary);
}

    .penpal-collection-subtitle strong {
        color: var(--pp-primary);
        font-weight: 600;
    }

.penpal-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background-color: var(--pp-surface);
}

    .penpal-card:focus-within {
        border-color: color-mix(in srgb, var(--pp-primary) 30%, var(--pp-border));
    }

.penpal-card-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.penpal-card-portrait {
    display: block;
    width: 100%;
}

    .penpal-card-portrait .avatar-circle {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border: 0;
        border-radius: var(--pp-radius-sm);
        background-color: var(--pp-accent-soft);
        font-size: 3rem;
    }

.penpal-card-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.penpal-card-who {
    min-height: 5.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.penpal-card-name {
    display: block;
    min-width: 0;
    font-family: var(--pp-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--pp-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .penpal-card-name:hover {
        color: var(--pp-primary);
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

.penpal-card-place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.35rem;
    margin-top: 0.15rem;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

    .penpal-card-place .country-flag {
        width: 18px;
        height: auto;
        border-radius: 1px;
    }

.penpal-card-menu {
    align-self: flex-start;
    flex-shrink: 0;
}

.penpal-card-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--pp-border);
    border-radius: 50%;
    background-color: var(--pp-surface);
    color: var(--pp-text-secondary);
}

    .penpal-card-menu-toggle:hover,
    .penpal-card-menu-toggle[aria-expanded="true"] {
        border-color: var(--pp-border-strong);
        background-color: var(--pp-surface-muted);
        color: var(--pp-primary);
    }

.penpal-card-speaks,
.penpal-card-bio {
    margin: 0;
    font-size: 0.925rem;
}

.penpal-card-bio { margin: 0; }

/* Whose turn: sunrise when it's yours, a soft accent for a first letter,
   plain text when you're waiting on them. */
.penpal-card-turn {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pp-text-secondary);
}

.penpal-card-turn-yours {
    background-color: var(--pp-sunrise);
    color: var(--pp-on-sunrise);
}

.penpal-card-turn-new {
    background-color: var(--pp-accent-soft);
    color: var(--pp-primary);
}

.penpal-card-shared {
    margin: 0;
    font-size: 0.925rem;
}

    .penpal-card-shared .bi {
        color: var(--pp-primary);
    }

/* Your letters so far, one quiet line. */
.penpal-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.4rem;
    margin: 0;
    font-size: 0.825rem;
    color: var(--pp-text-secondary);
}

.penpal-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

@media (max-width: 575.98px) {
    .penpal-collection-header {
        padding: 1.25rem;
    }

    .penpal-collection-title {
        font-size: 1.6rem;
    }

    .penpal-collection-find {
        width: 100%;
    }
}

/* The Requests page: the ledger as an address book, one line per person. */
.penpal-book .letter-row-country .country-flag {
    width: 18px;
    height: auto;
    margin-right: 0.3rem;
    border-radius: 1px;
    vertical-align: -0.1em;
}

.penpal-book-speaks {
    font-weight: 700;
    color: var(--pp-text);
}

/* Delete stays quiet; it only turns red when you reach for it. */
.letters-delete {
    --bs-btn-color: var(--pp-text-secondary);
    --bs-btn-bg: var(--pp-surface);
    --bs-btn-border-color: var(--pp-border);
    --bs-btn-hover-color: var(--pp-danger);
    --bs-btn-hover-bg: var(--pp-surface);
    --bs-btn-hover-border-color: var(--pp-danger);
    --bs-btn-active-color: var(--pp-danger);
    --bs-btn-active-bg: var(--pp-surface);
    --bs-btn-active-border-color: var(--pp-danger);
}

/* Unread letters: a small sunrise sticker with the count. */
.letter-row-new {
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background-color: var(--pp-sunrise);
    box-shadow: 0 0 0 2px var(--pp-surface);
    color: var(--pp-on-sunrise);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.6rem;
    text-align: center;
}

.letter-row-unread .letter-row-preview {
    color: var(--pp-text);
}

/* A conversation with a member who deleted their account: still readable, but quieter. */
.letter-row-deleted .letter-row-name {
    color: var(--pp-text-secondary);
    font-style: italic;
    font-weight: 400;
}

@media (max-width: 575.98px) {
    .letter-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .letter-row-side {
        justify-content: flex-end;
    }

    .penpal-letter-history {
        max-height: 60vh;
    }
}

/* Forum: the search line, then each category as a white card with its
   latest threads one per line (the same ledger rows as Letters). */
.forum-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.forum-search-text {
    flex: 1 1 14rem;
}

    .forum-search .form-select {
        min-width: 11rem;
    }

.forum-category,
.forum-rows-sheet {
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
}

.forum-category {
    margin-bottom: 1rem;
}

.forum-category-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid var(--pp-border);
}

.forum-category-text {
    min-width: 0;
}

.forum-category-name {
    margin: 0;
    font-family: var(--pp-display);
    font-size: 1.25rem;
    font-weight: 500;
}

    .forum-category-name a {
        color: var(--pp-primary);
        text-decoration: none;
    }

        .forum-category-name a:hover,
        .forum-category-name a:focus-visible {
            text-decoration: underline;
        }

.forum-category-description {
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.forum-category-empty,
.forum-category-more {
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.forum-category-more {
    border-top: 1px solid var(--pp-border);
}

.forum-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 0.55rem 1rem;
}

    .forum-row + .forum-row {
        border-top: 1px dashed var(--pp-border);
    }

.forum-row-title {
    font-weight: 700;
    color: var(--pp-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .forum-row-title:hover,
    .forum-row-title:focus-visible {
        text-decoration: underline;
    }

.forum-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
    font-size: 0.8125rem;
    color: var(--pp-text-secondary);
}

.forum-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.8125rem;
    color: var(--pp-text-secondary);
    white-space: nowrap;
}

.forum-row-replies {
    font-weight: 700;
    color: var(--pp-text);
}

.forum-closed-mark {
    padding: 0 0.45rem;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background-color: var(--pp-surface-muted);
    font-size: 0.75rem;
}

@media (max-width: 575.98px) {
    .forum-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .forum-row-side {
        flex-direction: row;
        gap: 0.6rem;
    }
}

/* A thread: the post on a white card, its replies as smaller cards, then
   the reply box (.letter-reply). Text keeps the member's line breaks. */
.forum-post {
    padding: 1.25rem 1.5rem 1rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
}

.forum-post-title {
    margin: 0 0 0.35rem;
    font-family: var(--pp-display);
    font-size: 1.6rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.forum-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.forum-post-body,
.forum-reply-body {
    max-width: 40em;
    font-size: 1.0625rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.forum-post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pp-border);
}

    .forum-post-foot form,
    .forum-reply-actions form {
        margin: 0;
    }

.forum-closed-note {
    margin: 1rem 0 0;
    padding: 0.6rem 1rem;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    background-color: var(--pp-surface-muted);
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
}

.forum-replies-title {
    margin: 1.5rem 0 0.75rem;
    font-family: var(--pp-display);
    font-size: 1.25rem;
    font-weight: 500;
}

.forum-replies {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.forum-reply {
    padding: 0.85rem 1.25rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    scroll-margin-top: 1rem;
}

.forum-reply-deleted {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--pp-text-secondary);
}

.forum-reply-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.4rem;
    font-size: 0.875rem;
}

/* "Report this post" / "Report": quiet, like a letter's report link. */
.forum-report-link {
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
    text-decoration: none;
}

    .forum-report-link:hover,
    .forum-report-link:focus-visible {
        color: var(--pp-primary);
        text-decoration: underline;
    }

/* The post or reply being reported, quoted on the form. */
.forum-report-quote {
    padding: 0.75rem 1rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
}

/* Admin report evidence: the reported text keeps its line breaks. */
.forum-evidence-text {
    white-space: pre-wrap;
}

/* Delete stays quiet; it only turns red when you reach for it. */
.btn-link.forum-delete-link {
    color: var(--pp-text-secondary);
    text-decoration: none;
}

    .btn-link.forum-delete-link:hover,
    .btn-link.forum-delete-link:focus-visible {
        color: var(--pp-danger);
        text-decoration: underline;
    }

/* Settings and the Scrapbook gallery sit on paper above the ruled page. */
.settings-sheet,
.paper-panel {
    margin: 0.5rem auto 1.5rem;
    padding: 1.75rem;
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    overflow-wrap: anywhere;
}

.preferences-sheet {
    max-width: 60rem;
}

.account-settings-sheet {
    max-width: 70rem;
}

@media (max-width: 575.98px) {
    .settings-sheet,
    .paper-panel {
        padding: 1.25rem 1rem;
    }
}

/* Pen Pal Preferences: compact age and gender inputs. */
.preferences-age-input {
    width: 6rem;
}

.preferences-gender-select {
    max-width: 16rem;
}

/* Public homepage: The Letter on the Desk. */
.site-content:has(.landing-page) {
    --landing-paper: #f9f3e8;
    --landing-ink: #192841;
    --landing-accent: #a73a39;
    --landing-rule: #ded0be;
    flex-grow: 1;
    /* The tilted envelope behind the letter must not cause sideways scrolling. */
    overflow-x: clip;
    background: var(--landing-paper);
}

/* Same width and gutters as the header and footer (.container-xxl). */
.landing-page {
    --landing-serif: "Newsreader", Georgia, serif;
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: 0.75rem;
    color: var(--landing-ink);
}

:root[data-bs-theme="dark"] .site-content:has(.landing-page) {
    --landing-paper: #242e41;
    --landing-ink: #f9f3e8;
    --landing-accent: #ffaca3;
    --landing-rule: #555e70;
}

.landing-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.93fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.landing-welcome h1 {
    color: inherit;
    font-family: var(--landing-serif);
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.99;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.landing-welcome h1 em {
    color: var(--landing-accent);
}

.landing-cta {
    --bs-btn-bg: var(--landing-ink);
    --bs-btn-border-color: var(--landing-ink);
    --bs-btn-color: var(--landing-paper);
    --bs-btn-hover-bg: var(--landing-accent);
    --bs-btn-hover-border-color: var(--landing-accent);
    --bs-btn-hover-color: var(--landing-paper);
    --bs-btn-active-bg: var(--landing-accent);
    --bs-btn-active-border-color: var(--landing-accent);
    --bs-btn-active-color: var(--landing-paper);
}

.landing-reassurance {
    margin: 1rem 0 0;
    font-size: 0.875rem;
}

.landing-description {
    max-width: 32rem;
    margin: 0 0 1.5rem;
    line-height: 1.65;
}

.landing-letter {
    position: relative;
    isolation: isolate;
    margin: 0 0.875rem 0 0.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #192841;
    line-height: 1.7;
    transform: rotate(-3deg);
}

.landing-letter::before,
.landing-letter::after {
    content: "";
    position: absolute;
    pointer-events: none;
    box-shadow: 0 0.5rem 1.25rem #251a2626;
}

.landing-letter::before {
    inset: 0.75rem -0.65rem -0.75rem 0.65rem;
    z-index: -2;
    background: #e4c7a9;
    transform: rotate(6deg);
}

.landing-letter::after {
    inset: 0;
    z-index: -1;
    border: 1px solid #d5c4ac;
    background: #fffaf0;
}

.landing-letter figcaption {
    color: #973c37;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.landing-letter-greeting, .landing-letter-signature {
    font-family: var(--landing-serif);
    font-size: 1.5rem;
    line-height: 1.3;
}

.landing-letter-signature {
    margin-bottom: 0;
}

.landing-how {
    padding: 1.5rem 0;
    border-top: 1px solid var(--landing-rule);
}

.landing-how h2 {
    color: inherit;
    font-family: var(--landing-serif);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    margin-bottom: 1.25rem;
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.landing-steps li {
    border-top: 2px solid var(--landing-accent);
    padding-top: 0.75rem;
}

.landing-steps h3 {
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.landing-steps p, .landing-guidelines {
    font-size: 0.9rem;
}

.landing-steps p, .landing-guidelines p {
    margin: 0;
}

.landing-guidelines {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--landing-rule);
}

.landing-guidelines a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .landing-welcome, .landing-steps {
        grid-template-columns: 1fr;
    }

    .landing-welcome {
        gap: 2.5rem;
    }

    .landing-letter {
        max-width: 30rem;
        transform: none;
    }
}
/* Shown only while the real-time connection is lost (realtime.js). */
.realtime-status {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background-color: var(--pp-surface);
    color: var(--pp-text-secondary);
    font-size: 0.8125rem;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
}

.realtime-status[hidden] {
    display: none;
}

/* Custom select widget (pp-select.js) - a scroll-friendly replacement
   for native <select> dropdowns, which capture the mouse wheel while open. */
.pp-select {
    width: 100%;
}

.pp-select-toggle {
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pp-select-menu {
    max-height: 280px;
    overflow-y: auto;
    min-width: 100%;
    padding-top: 0;
}

.pp-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5rem 0.5rem 0.375rem;
    background-color: var(--bs-dropdown-bg);
}

.pp-select-no-matches {
    padding: 0.25rem 1rem 0.5rem;
}

.pp-select-item.active {
    background-color: var(--pp-surface-muted);
    color: var(--pp-primary);
    font-weight: 600;
}

/* Forum feeds: ordinary links keep search/category state and work without JS. */
.forum-feed-tabs,
.forum-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.forum-feed-tabs a,
.forum-category-filters a {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    color: var(--pp-primary);
    background: var(--pp-surface);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.forum-feed-tabs a[aria-current="page"],
.forum-category-filters a[aria-current="page"] {
    background: var(--pp-accent-soft);
    font-weight: 700;
    border-color: var(--pp-primary);
}
.forum-category-filters a { font-size: 0.85rem; }
.forum-category-directory {
    border-top: 1px solid var(--pp-border);
    padding-top: 0.85rem;
}
.forum-category-directory summary { cursor: pointer; font-weight: 600; color: var(--pp-primary); }

/* Plain page canvases follow the theme; artwork stays inside cards and maps. */
body,
body > .site-content {
    background: #fff;
}
:root[data-bs-theme="dark"] body,
:root[data-bs-theme="dark"] body > .site-content {
    background: var(--pp-bg);
}
.home-backdrop {
    display: none;
}
.site-content > .container-xxl > main {
    color: var(--pp-text);
}
.settings-sheet,
.game-panel,
.profile-panel {
    color: var(--pp-text);
}
/* Only animate palette changes during an intentional switch, never on load. */
.theme-changing body,
.theme-changing body * {
    transition: background-color 600ms ease-in-out, color 600ms ease-in-out,
                border-color 600ms ease-in-out, box-shadow 600ms ease-in-out,
                text-shadow 600ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .theme-changing body,
    .theme-changing body * {
        transition: none !important;
    }
}

/* A photo and its story, presented as an open scrapbook in the gallery. */
#scrapbook-viewer .modal-content {
    border: 1px solid var(--pp-border);
    border-radius: 24px;
    overflow: hidden;
    background: #FFFCF7;
    box-shadow: 0 24px 80px rgba(17, 24, 39, 0.25);
}

:root[data-bs-theme="dark"] #scrapbook-viewer .modal-content {
    background: var(--pp-surface);
}

#scrapbook-viewer .modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--pp-border);
}

.scrapbook-viewer-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--pp-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

#scrapbook-viewer .btn-close {
    padding: 0.75rem;
    border-radius: 50%;
    background-color: var(--pp-accent-soft);
}

#scrapbook-viewer .modal-body { padding: 0; }

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-desk {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-photos {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 0;
    margin: 0;
    padding: 1.5rem;
    background: var(--pp-accent-soft);
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-photo {
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-photo img {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 12px;
}

.scrapbook-viewer-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2rem;
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-meta {
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-meta > span:not([aria-hidden]) {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--pp-accent-soft);
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-meta > [aria-hidden] { display: none; }

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-story {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top-style: solid;
}

#scrapbook-viewer .btn { border-radius: 999px; }
:is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-foot .btn { padding: 0.65rem 1rem; }

.scrapbook-viewer-tools {
    margin-top: 1rem;
    font-size: 0.8rem;
}

.scrapbook-viewer-tools a { color: var(--pp-text-secondary); }

#scrapbook-viewer .modal-footer {
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--pp-border);
}

.scrapbook-viewer-hint {
    font-size: 0.8rem;
    color: var(--pp-text-secondary);
}

@media (max-width: 991.98px) {
    :is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page { grid-template-columns: minmax(0, 1fr); }
    :is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-photos { padding: 1rem; }
    :is(#scrapbook-viewer, .scrapbook-full-page) .scrapbook-page-photo img { max-height: 45vh; }
    .scrapbook-viewer-details { padding: 1.5rem; }
}

@media (max-width: 575.98px) {
    #scrapbook-viewer .modal-content { border: 0; border-radius: 0; }
    #scrapbook-viewer .modal-header,
    #scrapbook-viewer .modal-footer { padding-inline: 1rem; }
    .scrapbook-viewer-details { padding: 1.25rem; }
    .scrapbook-viewer-hint { display: none; }
    #scrapbook-viewer .modal-footer { justify-content: flex-end; }
}

/* The full-page view carries the same open-scrapbook layout as the preview. */
.scrapbook-full-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 1.25rem;
}

.scrapbook-full-nav .scrapbook-viewer-label {
    color: var(--pp-text);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

:root[data-bs-theme="dark"] .scrapbook-full-nav .scrapbook-viewer-label {
    text-shadow: none;
}

.scrapbook-full-page .scrapbook-page-desk > .scrapbook-page {
    overflow: hidden;
    border: 1px solid var(--pp-border);
    border-radius: 24px;
    background: #FFFCF7;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
}

:root[data-bs-theme="dark"] .scrapbook-full-page .scrapbook-page-desk > .scrapbook-page {
    background: var(--pp-surface);
}

.scrapbook-full-page .scrapbook-page-photos { align-self: stretch; }
.scrapbook-full-page .scrapbook-page-foot .btn { border-radius: 999px; }

.scrapbook-full-page .scrapbook-page-desk > p,
.scrapbook-full-page .admin-page-tools {
    padding: 1rem;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    background: var(--pp-surface);
}

@media (max-width: 575.98px) {
    .scrapbook-full-page .scrapbook-page-desk > .scrapbook-page { border-radius: 16px; }
    .scrapbook-full-nav .scrapbook-viewer-label { font-size: 0.8rem; }
}

/* ------------------------------------------------------------------------
   Discover People (2026-10-20): the correspondence language of Home and the
   site shell. A masthead with the count, one search bar (search, Filters,
   sort), then portrait cards: a square photo, the name in serif with the age
   in italic, the country set like a postmark, why you might get along in the
   margin, a line of their own words, interests and one action. Everything is
   scoped to .discover-people (and the filter pop-up), so Scrapbooks, My Pen
   Pals and Profile Edit's preview, which borrow discover-* classes, keep
   their own look. Flat fills only.
   ------------------------------------------------------------------------ */
.discover-people,
.discover-filters {
    --dp-serif: "Newsreader", "Iowan Old Style", "Sitka Text", Georgia, serif;
    --dp-sans: "Atkinson Hyperlegible", var(--pp-font);
    --dp-ink: #14223D;
    --dp-on-ink: #F7F2E8;
    --dp-paper: #F7F2E8;
    --dp-paper-deep: #EEE6D6;
    --dp-card: #FFFFFF;
    --dp-rule: #E3DACA;
    --dp-text: #14223D;
    --dp-muted: #5A6175;
    --dp-accent: #A83246;
    --dp-on-accent: #FFFFFF;
    --dp-accent-soft: #F8EBEC;
    --dp-shadow: 0 1px 2px rgba(20, 34, 61, 0.05), 0 6px 18px rgba(20, 34, 61, 0.06);
    --dp-shadow-lift: 0 4px 10px rgba(20, 34, 61, 0.07), 0 22px 40px rgba(20, 34, 61, 0.14);
}

:root[data-bs-theme="dark"] .discover-people,
:root[data-bs-theme="dark"] .discover-filters {
    --dp-ink: #F1EBDD;
    --dp-on-ink: #14223D;
    --dp-paper: #1D2436;
    --dp-paper-deep: #262E44;
    --dp-card: var(--pp-surface);
    --dp-rule: #3A4360;
    --dp-text: #ECEFF7;
    --dp-muted: #B9C0D4;
    --dp-accent: #F0909F;
    --dp-on-accent: #3A0F18;
    --dp-accent-soft: #3D2229;
    --dp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --dp-shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.35), 0 22px 40px rgba(0, 0, 0, 0.45);
}

.discover-people {
    max-width: 82rem;
    margin-inline: auto;
    padding-top: 1.75rem;
    color: var(--dp-text);
    font-family: var(--dp-sans);
}

/* The masthead: kicker, a large serif title, the count in italic, the note on
   how Recommended works, and a double rule. */
.discover-people .discover-heading {
    margin: 0 0 1.75rem;
    padding-bottom: 1.4rem;
    border-bottom: 3px double var(--dp-ink);
}

.discover-kicker {
    margin: 0;
    color: var(--dp-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.discover-people .discover-heading-title {
    margin: 0.4rem 0 0.5rem;
    color: var(--dp-text);
    font-family: var(--dp-serif);
    font-size: clamp(2.4rem, 6vw, 4.25rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.discover-people .discover-heading-subtitle {
    gap: 0.35rem;
    font-weight: 400;
}

    .discover-people .discover-heading-subtitle > span:first-child {
        color: var(--dp-accent);
        font-family: var(--dp-serif);
        font-size: clamp(1.15rem, 2vw, 1.4rem);
        font-style: italic;
    }

.discover-people .discover-heading-note {
    max-width: 62ch;
    color: var(--dp-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* One search bar: the search field leads, then Filters and sort. */
.discover-people .discover-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.4rem;
    border: 1px solid var(--dp-rule);
    border-radius: 999px;
    background-color: var(--dp-card);
    box-shadow: var(--dp-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .discover-people .discover-toolbar:focus-within {
        border-color: var(--dp-ink);
        box-shadow: var(--dp-shadow-lift);
    }

.discover-people .discover-results-search {
    flex: 1 1 auto;
}

    .discover-people .discover-results-search > .bi {
        left: 1.1rem;
        color: var(--dp-muted);
        font-size: 1.05rem;
    }

    .discover-people .discover-results-search .form-control {
        min-height: 3rem;
        padding-left: 2.9rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--dp-text);
        font-size: 1rem;
        box-shadow: none;
    }

        .discover-people .discover-results-search .form-control::placeholder {
            color: var(--dp-muted);
            font-family: var(--dp-serif);
            font-style: italic;
        }

    .discover-people .discover-results-search .btn {
        min-height: 2.6rem;
        padding-inline: 1.25rem;
        border: 0;
        border-radius: 999px;
        background-color: var(--dp-ink);
        color: var(--dp-on-ink);
        font-weight: 700;
    }

        .discover-people .discover-results-search .btn:hover,
        .discover-people .discover-results-search .btn:focus-visible {
            background-color: var(--dp-accent);
            color: var(--dp-on-accent);
        }

.discover-people .discover-filters-button {
    min-height: 2.6rem;
    border: 1px solid var(--dp-rule);
    background-color: transparent;
    color: var(--dp-text);
}

    .discover-people .discover-filters-button:hover,
    .discover-people .discover-filters-button:focus-visible {
        border-color: var(--dp-ink);
        background-color: var(--dp-paper);
        color: var(--dp-text);
    }

.discover-people .discover-filters-count {
    background-color: var(--dp-accent);
    color: var(--dp-on-accent);
}

.discover-people .discover-sort {
    flex-shrink: 0;
    gap: 0.4rem;
    margin: 0;
    padding: 0 0.5rem 0 0.9rem;
    border-left: 1px solid var(--dp-rule);
    color: var(--dp-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

    .discover-people .discover-sort .form-select {
        min-height: 2.4rem;
        border: 0;
        background-color: transparent;
        color: var(--dp-text);
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: none;
    }

/* Active filters: removable pills, and Clear all. */
.discover-people .discover-active-filters > .small {
    color: var(--dp-muted) !important; /* over Bootstrap's .text-muted */
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.discover-people .discover-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.1rem;
    padding: 0.2rem 0.65rem 0.2rem 0.85rem;
    border: 1px solid var(--dp-rule);
    border-radius: 999px;
    background-color: var(--dp-paper);
    color: var(--dp-text);
    font-size: 0.85rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .discover-people .discover-chip > .bi {
        color: var(--dp-muted);
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .discover-people .discover-chip:hover,
    .discover-people .discover-chip:focus-visible {
        border-color: var(--dp-accent);
        background-color: var(--dp-accent-soft);
    }

        .discover-people .discover-chip:hover > .bi,
        .discover-people .discover-chip:focus-visible > .bi {
            color: var(--dp-accent);
            transform: rotate(90deg);
        }

.discover-people .discover-reset {
    color: var(--dp-accent);
    font-weight: 700;
}

/* The people: portrait cards, as many across as fit. */
.discover-people .discover-result-list {
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.75rem 1.25rem;
    margin-top: 1.5rem;
}

.discover-people .discover-result-row {
    border: 1px solid var(--dp-rule);
    border-radius: 1.1rem;
    background-color: var(--dp-card);
    box-shadow: var(--dp-shadow);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

    .discover-people .discover-result-list .discover-result-row:hover,
    .discover-people .discover-result-list .discover-result-row:focus-within {
        transform: translateY(-4px);
        border-color: var(--dp-ink);
        box-shadow: var(--dp-shadow-lift);
    }

/* The photo, square, zooming a touch on hover. Without one, their initials in
   serif on paper (alternating two paper tones). The photo-scoped selectors
   outrank the older dark-mode tint rule. */
.discover-people .discover-result-photo {
    overflow: hidden;
    border-bottom: 1px solid var(--dp-rule);
}

.discover-people .avatar-circle.discover-result-avatar {
    aspect-ratio: 5 / 4;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.discover-people .discover-result-row:hover .avatar-circle.discover-result-avatar,
.discover-people .discover-result-row:focus-within .avatar-circle.discover-result-avatar {
    transform: scale(1.04);
}

.discover-people .discover-result-photo .avatar-circle.discover-result-avatar[class*="discover-tint-"] {
    background-color: var(--dp-paper);
    color: var(--dp-text);
    font-family: var(--dp-serif);
    font-size: 4.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.discover-people .discover-result-photo .avatar-circle.discover-result-avatar.discover-tint-1[class*="discover-tint-"],
.discover-people .discover-result-photo .avatar-circle.discover-result-avatar.discover-tint-3[class*="discover-tint-"],
.discover-people .discover-result-photo .avatar-circle.discover-result-avatar.discover-tint-5[class*="discover-tint-"] {
    background-color: var(--dp-paper-deep);
}

/* Where you stand with them: a tag on the photo. Crimson when they want to
   write to you; ink when you've sent a request or they're in the other age group. */
.discover-people .discover-result-photo .discover-mark {
    top: 0.75rem;
    left: 0.75rem;
    padding: 0 0.65rem;
    border: 0;
    box-shadow: none;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.6rem;
}

.discover-people .discover-mark-sent {
    background-color: var(--dp-ink);
    color: var(--dp-on-ink);
}

.discover-people .discover-mark-incoming {
    background-color: var(--dp-accent);
    color: var(--dp-on-accent);
}

.discover-people .discover-result-body {
    gap: 0.85rem;
    padding: 1.1rem 1.2rem 1.25rem;
}

.discover-people .discover-result-identity {
    min-height: 0;
}

/* The name in serif, the age after it in italic. */
.discover-people .discover-result-name {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-family: var(--dp-serif);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.discover-people .discover-result-username {
    overflow: hidden;
    color: var(--dp-text);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-overflow: ellipsis;
    text-underline-offset: 0.18em;
    white-space: nowrap;
    transition: text-decoration-color 0.2s ease;
}

    .discover-people .discover-result-username:hover,
    .discover-people .discover-result-username:focus-visible {
        text-decoration-color: var(--dp-accent);
    }

.discover-people .profile-card-age {
    flex-shrink: 0;
    color: var(--dp-muted);
    font-family: var(--dp-serif);
    font-size: 1.15rem;
    font-style: italic;
}

.discover-people .discover-result-displayname {
    margin: 0.2rem 0 0.6rem;
    color: var(--dp-muted);
    font-size: 0.8rem;
}

/* The country set like a postmark; the town and languages under it. */
.discover-people .discover-result-country {
    color: var(--dp-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.6;
    text-transform: uppercase;
}

.discover-people .discover-result-meta {
    color: var(--dp-muted);
}

.discover-people .discover-result-location,
.discover-people .discover-result-languages {
    font-size: 0.82rem;
}

/* Why you might get along, in the margin: italic serif on a crimson rule. */
.discover-people .discover-result-reasons {
    padding: 0.55rem 0.75rem;
    border-left: 2px solid var(--dp-accent);
    border-radius: 0 0.6rem 0.6rem 0;
    background-color: var(--dp-paper);
}

.discover-people .discover-result-meta.discover-result-reason,
.discover-people .discover-result-reason-more {
    color: var(--dp-text);
    font-family: var(--dp-serif);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.3;
}

    .discover-people .discover-result-reason i,
    .discover-people .discover-result-reason-more i {
        color: var(--dp-accent);
        font-style: normal;
    }

.discover-people .discover-result-reason-count {
    color: var(--dp-muted);
    font-size: 0.78rem;
}

/* Their own words: serif, three lines. */
.discover-people .discover-result-bio {
    color: var(--dp-text);
    font-family: var(--dp-serif);
    font-size: 0.98rem;
    line-height: 1.45;
    min-height: 4.35em;
    max-height: 4.35em;
}

.discover-people .discover-interest-tag {
    border: 1px solid var(--dp-rule);
    border-radius: 999px;
    background-color: transparent;
    color: var(--dp-text);
    font-size: 0.75rem;
}

/* Interests and the one action sit at the bottom, so they line up across a
   row; the action is an ink outline that fills when the card is pointed at. */
.discover-people .discover-result-interests {
    margin-top: auto;
}

.discover-people .discover-result-interests + .discover-result-actions {
    margin-top: 0;
}

.discover-people .discover-result-actions {
    margin-top: auto;
}

    .discover-people .discover-result-actions .btn {
        min-height: 2.75rem;
        border: 1px solid var(--dp-ink);
        background-color: transparent;
        color: var(--dp-text);
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .discover-people .discover-result-actions .btn::after {
            content: "\2192";
            display: inline-block;
            margin-left: 0.4rem;
            transition: transform 0.2s ease;
        }

.discover-people .discover-result-actions .btn:hover,
.discover-people .discover-result-actions .btn:focus-visible {
    background-color: var(--dp-ink);
    color: var(--dp-on-ink);
}

    .discover-people .discover-result-actions .btn:hover::after,
    .discover-people .discover-result-actions .btn:focus-visible::after {
        transform: translateX(3px);
    }

/* Nobody matches: a large italic line, the usual help, and the ways to widen
   the search as pills. */
.discover-people .discover-empty {
    margin-top: 1.5rem;
    padding: 3rem 1.5rem;
    border: 1px solid var(--dp-rule);
    border-radius: 1.25rem;
    background-color: var(--dp-paper);
    color: var(--dp-text);
    text-align: center;
}

.discover-empty-mark {
    margin: 0 0 0.75rem;
    color: var(--dp-accent);
    font-family: var(--dp-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-style: italic;
    line-height: 1.05;
}

.discover-people .discover-empty h2 {
    font-family: var(--dp-serif);
    font-size: 1.4rem;
    font-weight: 500;
}

.discover-people .discover-empty .text-muted {
    color: var(--dp-muted) !important; /* over Bootstrap's .text-muted */
}

.discover-people .discover-empty .btn {
    border-radius: 999px;
}

.discover-people .discover-empty .btn-outline-primary,
.discover-people .discover-empty .btn-outline-secondary {
    --bs-btn-color: var(--dp-text);
    --bs-btn-border-color: var(--dp-rule);
    --bs-btn-bg: var(--dp-card);
    --bs-btn-hover-color: var(--dp-on-ink);
    --bs-btn-hover-bg: var(--dp-ink);
    --bs-btn-hover-border-color: var(--dp-ink);
    --bs-btn-active-color: var(--dp-on-ink);
    --bs-btn-active-bg: var(--dp-ink);
}

/* More people: an ink outline pill that shows a turning ring while it loads
   (discover-results.js sets aria-busy), and an italic line between rules at
   the end. */
.discover-people .discover-more {
    margin-top: 2.5rem;
}

.discover-people .discover-more-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.9rem;
    padding: 0.5rem 1.75rem;
    border: 1px solid var(--dp-ink);
    background-color: var(--dp-card);
    color: var(--dp-text);
}

    .discover-people .discover-more-button:hover,
    .discover-people .discover-more-button:focus-visible {
        background-color: var(--dp-ink);
        color: var(--dp-on-ink);
    }

    .discover-people .discover-more-button[aria-busy="true"]::before {
        content: "";
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: discover-turn 0.8s linear infinite;
    }

@keyframes discover-turn {
    to { transform: rotate(360deg); }
}

.discover-people .discover-more-end {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--dp-muted);
    font-family: var(--dp-serif);
    font-size: 1.05rem;
    font-style: italic;
}

    .discover-people .discover-more-end[hidden] {
        display: none;
    }

    .discover-people .discover-more-end::before,
    .discover-people .discover-more-end::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--dp-rule);
    }

/* Page links (without JavaScript): ink for the current page. */
.discover-people .discover-pagination-footer .page-link {
    border-color: var(--dp-rule);
    background-color: var(--dp-card);
    color: var(--dp-text);
}

.discover-people .discover-pagination-footer .page-item.active .page-link {
    border-color: var(--dp-ink);
    background-color: var(--dp-ink);
    color: var(--dp-on-ink);
}

/* People arrive with a short rise, a few at a time. */
@keyframes discover-arrive {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.discover-people .discover-heading,
.discover-people .discover-toolbar {
    animation: discover-arrive 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.discover-people .discover-toolbar {
    animation-delay: 0.06s;
}

.discover-people .discover-result-row {
    animation: discover-arrive 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

    .discover-people .discover-result-row:nth-child(2) { animation-delay: 0.05s; }
    .discover-people .discover-result-row:nth-child(3) { animation-delay: 0.1s; }
    .discover-people .discover-result-row:nth-child(4) { animation-delay: 0.15s; }
    .discover-people .discover-result-row:nth-child(n+5) { animation-delay: 0.2s; }

/* Tablets and phones: the search bar becomes a rounded panel, the search on
   its own row, Filters and sort side by side under it. */
@media (max-width: 767.98px) {
    .discover-people {
        padding-top: 1rem;
    }

    .discover-people .discover-toolbar {
        flex-wrap: wrap;
        padding: 0.5rem;
        border-radius: 1.25rem;
    }

    .discover-people .discover-results-search {
        flex-basis: 100%;
    }

    .discover-people .discover-filters-button,
    .discover-people .discover-sort {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }

    .discover-people .discover-sort {
        padding: 0;
    }

        /* The select still has its label for screen readers. */
        .discover-people .discover-sort > label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

    .discover-people .discover-result-list {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .discover-people .discover-result-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .discover-people .discover-heading,
    .discover-people .discover-toolbar,
    .discover-people .discover-result-row {
        animation: none;
    }

    .discover-people .discover-result-row,
    .discover-people .avatar-circle.discover-result-avatar,
    .discover-people .discover-chip > .bi,
    .discover-people .discover-result-actions .btn::after {
        transition: none;
    }

    .discover-people .discover-result-list .discover-result-row:hover,
    .discover-people .discover-result-list .discover-result-row:focus-within,
    .discover-people .discover-result-row:hover .avatar-circle.discover-result-avatar,
    .discover-people .discover-result-row:focus-within .avatar-circle.discover-result-avatar,
    .discover-people .discover-chip:hover > .bi,
    .discover-people .discover-chip:focus-visible > .bi,
    .discover-people .discover-result-actions .btn:hover::after {
        transform: none;
    }

    .discover-people .discover-more-button[aria-busy="true"]::before {
        animation: none;
    }
}

/* The filter pop-up (Home's Discover card and Discover's Filters button), in
   the same language: a serif title, small-caps section names, ink for chosen
   pills, the age range in crimson, and an ink "Show people". */
.discover-filters {
    --discover-filters-card: var(--dp-card);
    --discover-chip-on: var(--dp-ink);
    font-family: var(--dp-sans);
}

    .discover-filters .modal-content {
        border-color: var(--dp-rule);
        border-radius: 1.25rem;
    }

    .discover-filters .modal-header {
        padding: 1.5rem 1.6rem 1rem;
        border-bottom: 3px double var(--dp-ink);
    }

.discover-filters-title {
    color: var(--dp-text);
    font-family: var(--dp-serif);
    font-size: 1.85rem;
    font-weight: 400;
    letter-spacing: -0.015em;
}

    .discover-filters-title .bi {
        color: var(--dp-accent);
        font-size: 1.35rem;
    }

.discover-filters-subtitle {
    color: var(--dp-muted);
    font-family: var(--dp-serif);
    font-style: italic;
}

.discover-filters-clear {
    color: var(--dp-accent);
}

.discover-filters-search .form-control {
    min-height: 3rem;
    border-color: var(--dp-rule);
    background-color: var(--dp-paper);
}

    .discover-filters-search .form-control::placeholder {
        color: var(--dp-muted);
        font-family: var(--dp-serif);
        font-style: italic;
    }

.discover-filters-section {
    border-bottom-color: var(--dp-rule);
}

.discover-filters-heading {
    color: var(--dp-muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.discover-filters .discover-pill {
    border-color: var(--dp-rule);
    background-color: var(--dp-card);
    color: var(--dp-text);
}

    .discover-filters .discover-pill:hover {
        border-color: var(--dp-ink);
    }

.discover-filters .btn-check:checked + .discover-pill {
    border-color: var(--dp-ink);
    background-color: var(--dp-ink);
    color: var(--dp-on-ink);
}

.discover-filters .discover-age-value {
    color: var(--dp-accent);
    font-family: var(--dp-serif);
    font-size: 1.1rem;
    font-style: italic;
}

.discover-filters .discover-age-track {
    background-color: var(--dp-rule);
}

.discover-filters .discover-age-fill {
    background-color: var(--dp-accent);
}

.discover-filters .discover-age-input::-webkit-slider-thumb {
    border-color: var(--dp-ink);
    background-color: var(--dp-card);
}

.discover-filters .discover-age-input::-moz-range-thumb {
    border-color: var(--dp-ink);
    background-color: var(--dp-card);
}

.discover-filters .modal-footer {
    border-top-color: var(--dp-rule);
    background-color: var(--dp-paper);
    border-radius: 0 0 1.25rem 1.25rem;
}

.discover-filters .discover-filters-show {
    border: 0;
    border-radius: 999px;
    background-color: var(--dp-ink);
    color: var(--dp-on-ink);
}

    .discover-filters .discover-filters-show:hover,
    .discover-filters .discover-filters-show:focus-visible {
        background-color: var(--dp-accent);
        color: var(--dp-on-accent);
    }

/* Wave controls are shown within member profiles. */
.wave-control { margin: 0; }
.wave-button { width: 100%; min-height: 44px; white-space: normal; }
.wave-button:disabled { opacity: .65; cursor: default; }