/* ==========================================================================
   The signed-in app on the homepage's espresso shell
   --------------------------------------------------------------------------
   At the owner's request (2026-10-11): "update the inner pages to be the
   same styling and ui as the homepage and colors and everything". The feed,
   map, friends, saved, leaderboard, event pages, profile, inbox, admin and
   moderation all sat on the cream "flyer wall" (taped paper cards over a
   sand gradient). They now wear the homepage's look: the near-black canvas,
   the floating glass navigation pill, ivory and sand type, Stanford red for
   the one primary action, hairline borders and 18-20px cards, as
   styles/layout.css draws them for the public pages (.otf-public-home,
   .otf-upcoming-card, .otf-explore-chip, renderPublicFooter).

   This file loads after every other stylesheet. The layers under it (the
   inline styles in index.html, layout.css's flyer wall) set their colours
   with !important on selectors up to three classes deep
   (.flyer-wall-page .event-card:nth-child(n)), so the rules here are scoped
   by #app, whose id outranks all of them, and carry !important too.
   ========================================================================== */

:root {
    --app-canvas: #0c0d0c;
    --app-surface: #1b1815;
    --app-surface-strong: #272019;
    --app-raised: rgba(255, 250, 240, 0.035);
    --app-fill: rgba(255, 250, 240, 0.06);
    --app-fill-hover: rgba(255, 250, 240, 0.1);
    --app-ivory: #fffaf0;
    --app-ink: #efe6d6;
    --app-muted: #b9aa92;
    --app-sand: #dfc79f;
    --app-amber: #c7924f;
    --app-red: #8c1515;
    --app-red-hover: #a31a1a;
    --app-green: #3e9e5f;
    --app-green-ink: #9fdcb4;
    /* Stanford red and the app's blues as text: lightened until they pass
       AA on espresso (#8c1515 on #1b1815 is 2.2:1; this red is 6:1). */
    --app-red-ink: #f07167;
    --app-blue-ink: #7cc4f2;
    --app-amber-ink: #f3c77a;
    --app-violet-ink: #c4b5fd;
    --app-line: rgba(255, 250, 240, 0.12);
    --app-line-strong: rgba(255, 250, 240, 0.24);
    --app-glass: rgba(18, 15, 13, 0.58);
    --app-glass-solid: rgba(18, 15, 13, 0.92);
    --app-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    --app-inset: clamp(16px, 2.4vw, 32px);
    --app-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* The cream shell's own tokens (layout.css reads them), re-pointed at
       the espresso family. */
    --shell-ink: #efe6d6;
    --shell-cream: #0c0d0c;
    --shell-cream-deep: #0c0d0c;
    --shell-panel: #1b1815;
    --shell-panel-soft: #201a16;
    --shell-pill: rgba(255, 250, 240, 0.06);
    --shell-paper: #1b1815;
    --shell-paper-tint: #272019;
    --shell-line: rgba(255, 250, 240, 0.12);
    --shell-shadow: rgba(0, 0, 0, 0.42);
    --shell-shadow-strong: rgba(0, 0, 0, 0.6);
}

/* ── Canvas ─────────────────────────────────────────────────────────────── */
html {
    color-scheme: dark;
    background-color: var(--app-canvas);
}

/* Was the sand gradient (layout.css "body, .flyer-wall-page"). */
body,
#app .flyer-wall-page,
#app .ai-result-page {
    background: var(--app-canvas) !important;
    color: var(--app-ink) !important;
}

#app .flyer-wall-page .main-content {
    background: none !important;
}

#app .flyer-wall-page ::selection {
    color: var(--app-ivory);
    background: rgba(140, 21, 21, 0.92);
}

#app .flyer-wall-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--app-sand) !important;
    outline-offset: 3px !important;
}

/* ── Navigation: the homepage's floating glass pill ─────────────────────── */
#app .app-header {
    position: sticky !important;
    top: 12px !important;
    z-index: 1190 !important;
    width: min(calc(100% - 2 * var(--app-inset)), 1180px) !important;
    min-height: 70px !important;
    margin: 12px auto 0 !important;
    padding: 10px 12px 10px 22px !important;
    gap: 16px !important;
    border: 1px solid rgba(255, 250, 240, 0.13) !important;
    border-radius: 999px !important;
    background: var(--app-glass-solid) !important;
    box-shadow: var(--app-shadow) !important;
    color: var(--app-ivory) !important;
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    #app .app-header {
        background: var(--app-glass) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
        backdrop-filter: blur(16px) saturate(1.3) !important;
    }
}

#app .app-header-left {
    gap: 10px !important;
    min-height: 44px !important;
    padding: 3px 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--app-ivory) !important;
}

#app .app-logo {
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#app .app-logo .sprout-mascot {
    --sprout-size: 38px !important;
}

/* The wordmark: the homepage's rounded 20px, not the old Georgia. */
#app .app-title {
    color: var(--app-ivory) !important;
    font-family: ui-rounded, system-ui, sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

#app .app-nav {
    gap: 8px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Round glass buttons, as the homepage's menu toggle. */
#app .app-nav-btn {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

#app .app-nav-btn:hover {
    border-color: var(--app-line-strong) !important;
    background: var(--app-fill-hover) !important;
}

/* The nav's one primary, as the homepage's red Create account. */
#app #navCreateBtn {
    border-color: rgba(255, 250, 240, 0.14) !important;
    background: var(--app-red) !important;
    color: #fff !important;
}

#app #navCreateBtn:hover {
    background: var(--app-red-hover) !important;
}

#app .nav-leaderboard {
    min-height: 44px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

#app .nav-leaderboard:hover {
    border-color: var(--app-line-strong) !important;
    background: var(--app-fill-hover) !important;
}

#app .nav-create-options {
    border: 1px solid var(--app-line) !important;
    background: #15120f !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
}

#app .nav-expand-opt {
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

#app .nav-expand-opt:hover {
    background: var(--app-fill-hover) !important;
}

/* ── Ask Sprout: a dark field on the canvas ─────────────────────────────── */
#app .smart-search-container {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#app .smart-search-bar {
    border: 1px solid rgba(255, 250, 240, 0.14) !important;
    background: rgba(255, 250, 240, 0.05) !important;
    box-shadow: none !important;
}

#app .smart-search-bar:focus-within {
    border-color: rgba(223, 199, 159, 0.5) !important;
    background: rgba(255, 250, 240, 0.07) !important;
}

#app .smart-search-input {
    background: transparent !important;
    color: var(--app-ivory) !important;
}

#app .smart-search-input::placeholder {
    color: var(--app-muted) !important;
    opacity: 1;
}

#app .smart-search-mark {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#app .smart-search-button {
    border: 1px solid rgba(255, 250, 240, 0.14) !important;
    background: var(--app-red) !important;
    color: #fff !important;
    box-shadow: none !important;
}

#app .smart-search-button:hover {
    background: var(--app-red-hover) !important;
}

#app .search-suggestions {
    border: 1px solid var(--app-line) !important;
    background: #15120f !important;
    color: var(--app-ink) !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
}

/* ── Tabs and filters: the homepage's Explore chips ─────────────────────── */
#app .tab-container,
#app .flyer-filter-strip {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* The strip's scroll hints were cream fades at either edge. */
#app .flyer-filter-strip::before,
#app .flyer-filter-strip::after {
    content: none !important;
    display: none !important;
}

#app .tab-button,
#app .filter-btn {
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
    font-weight: 760 !important;
}

#app .tab-button:hover,
#app .filter-btn:hover {
    border-color: rgba(255, 250, 240, 0.28) !important;
    color: var(--app-ivory) !important;
}

/* Selected: ivory with espresso type, as Explore's pressed chip. */
#app .tab-button.active,
#app .filter-btn.active {
    border-color: var(--app-ivory) !important;
    background: var(--app-ivory) !important;
    color: var(--app-canvas) !important;
}

/* ── Section titles: Explore's day headings ─────────────────────────────── */
#app .flyer-wall-page .section-title {
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 0 0 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-line) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--app-ivory) !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    font-weight: 760 !important;
    letter-spacing: -0.02em !important;
}

#app .flyer-wall-page .section-title span:first-child {
    color: var(--app-ivory) !important;
}

#app .flyer-wall-page .section-title > div,
#app .flyer-wall-page .section-title > div * {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--app-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

/* ── Pop-ups, toasts and cards added to <body> ───────────────────────────
   These sit outside #app and outside the dialogs the rules above name, so
   they kept the cream app's white cards: a white share pop-up with a green
   header, a cream "event added" card, a white "Sprout is searching" card,
   white and solid-colour toasts. Where the inline-colour remap had already
   lightened their text, it was pale type on a pale card. They take the
   dialog's card instead: espresso, a hairline, 18px corners, ivory type and
   one red action. A toast says what kind it is with its icon's colour. */
.fizz-overlay,
.ai-loading-overlay,
.event-added-brain-overlay {
    background: rgba(12, 10, 9, 0.72) !important;
}

.fizz-popup,
.ai-loading-content,
.event-added-brain-card {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
    color: var(--app-ivory) !important;
}

.fizz-modal-header {
    border-bottom: 1px solid var(--app-line);
    border-radius: 0;
    background: none;
    color: var(--app-ivory);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.fizz-modal-body,
.fizz-modal-body :is(p, li, span, label),
.ai-loading-text p,
.event-added-brain-card p {
    color: var(--app-muted) !important;
}

.ai-loading-text h3,
.event-added-brain-card :is(h2, h3) {
    color: var(--app-ivory) !important;
    font-weight: 750 !important;
    letter-spacing: -0.02em !important;
}

.fizz-modal-footer {
    border-top: 1px solid var(--app-line);
}

.fizz-button,
.event-added-brain-actions button {
    min-height: 44px;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.fizz-button-primary,
.event-added-open-btn {
    border: 1px solid rgba(255, 250, 240, 0.14) !important;
    background: var(--app-red) !important;
    color: #fff !important;
}

.fizz-button-primary:hover,
.event-added-open-btn:hover {
    background: var(--app-red-hover) !important;
    box-shadow: none !important;
}

.fizz-button-secondary,
.event-added-close-btn {
    border: 1px solid rgba(255, 250, 240, 0.16) !important;
    background: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-ivory) !important;
}

.fizz-button-secondary:hover,
.event-added-close-btn:hover {
    background: var(--app-fill-hover) !important;
}

.fizz-notification,
.app-notification {
    border: 1px solid rgba(255, 250, 240, 0.16) !important;
    border-radius: 18px !important;
    background: var(--app-surface-strong) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important;
    color: var(--app-ivory) !important;
    font-weight: 650;
}

.fizz-notification span {
    color: var(--app-ivory) !important;
    font-weight: 650 !important;
}

.fizz-notification i,
.app-notification-info i {
    color: var(--app-sand) !important;
}

.app-notification-success i { color: var(--app-green-ink); }
.app-notification-error i { color: var(--app-red-ink); }
.app-notification-warning i { color: var(--app-amber-ink); }

/* Sprout's own bubbles (the location ask, the tutorial card) stay ivory, as
   its speech bubble is on the homepage (sprout-guide.css). Only their shapes
   change: 18px for the card, pills for the buttons. */
.location-prompt-card {
    border-radius: 18px;
}

.location-prompt-primary,
.location-prompt-secondary {
    border-radius: 999px;
}

/* The RSVP dialog's two panels were the cream app's mint. */
:is(#rsvpDetailsModal, #rsvpAttendeesModal) :is(.profile-soft-panel, .profile-select-panel) {
    border-color: var(--app-line) !important;
    background: var(--app-raised) !important;
    box-shadow: none !important;
}

:is(#rsvpDetailsModal, #rsvpAttendeesModal) :is(.profile-soft-panel, .profile-select-panel) :is(label, p, span, strong, div) {
    color: var(--app-ink);
}

/* ── Loading cards: the same espresso card, waiting ─────────────────────
   They were the cream card still: an ivory panel and pale bars on a dark
   feed. */
#app .ai-loading-pose {
    /* The event card's picture: edge to edge, 175px. */
    height: 175px;
    margin: 0 -20px 14px;
    border-radius: 0;
    border-bottom: 1px solid var(--app-line);
    background:
        radial-gradient(120% 140% at 30% 0%, rgba(199, 146, 79, 0.14), transparent 60%),
        var(--app-surface-strong);
}

#app .ai-loading-pose span {
    color: var(--app-sand);
    font-weight: 850;
    letter-spacing: 0.12em;
}

#app .ai-skeleton-shimmer {
    background: var(--app-fill);
}

#app .ai-skeleton-shimmer::after {
    background: linear-gradient(90deg, transparent, rgba(255, 250, 240, 0.1), transparent);
}

/* ── Headings: the homepage's two faces ─────────────────────────────────
   The homepage sets every title in the system face at 750, tracked -0.03em
   for a page title and -0.02em for a card's (--otf-heading in layout.css),
   and keeps its serif for the cinematic lines. The app set its titles
   anywhere from 400 to 950, most of them inline, and its two photo banners
   in Georgia. An event card's title is left alone: it already matches the
   homepage's event card (18px, 800). */
:is(#app .flyer-wall-page, .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet)
    :is(h1, h2, h3, h4):not(.app-title, .event-card-title, .otf-public-home *, .admin-card h3, .friend-matcher-hero h2, .leaderboard-page-hero h1, .admin-header h1, .moderation-workspace-header h1) {
    font-weight: 750 !important;
    letter-spacing: -0.02em !important;
}

#app .flyer-wall-page :is(.leaderboard-page-hero, .admin-header, .moderation-workspace-header) h1,
#profileModal #profileName {
    font-weight: 750 !important;
    letter-spacing: -0.03em !important;
}

.friend-matcher-hero h2 {
    font-family: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif !important;
    letter-spacing: -0.01em !important;
}

/* ── Event cards: the homepage's upcoming cards ─────────────────────────── */
/* Each card sets its own pastel paper inline (getEventThemeStyleVars); a
   stylesheet !important outranks an inline declaration, so the paper turns
   espresso here, the tape and the tilt go, and the accents read as sand. */
#app .flyer-wall-page .event-card {
    --event-card-bg: var(--app-surface) !important;
    --event-card-ink: var(--app-ivory) !important;
    --event-card-soft: var(--app-fill) !important;
    --event-card-accent: var(--app-sand) !important;
    --event-card-secondary: var(--app-sand) !important;
    --event-card-photo-border: transparent !important;
    --tape: transparent !important;
    --flyer-tilt: 0deg !important;
    --pin: var(--app-sand) !important;
    --pin-soft: var(--app-fill) !important;
    overflow: hidden !important;
    border: 1px solid var(--app-line) !important;
    border-radius: 20px !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
    color: var(--app-ink) !important;
    transform: none !important;
    transition: transform 360ms var(--app-ease), box-shadow 360ms ease, border-color 360ms ease !important;
}

#app .flyer-wall-page .event-card:hover {
    border-color: rgba(255, 250, 240, 0.26) !important;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34) !important;
    transform: translateY(-6px) !important;
}

#app .flyer-wall-page .event-card::before,
#app .flyer-wall-page .event-card::after {
    content: none !important;
    display: none !important;
}

#app .flyer-wall-page .event-card-theme-watermark {
    display: none !important;
}

/* The grid's top padding made room for the tape. */
#app .flyer-wall-page .flyer-wall-grid {
    gap: 24px !important;
    padding-top: 22px !important;
}

/* The photo runs edge to edge across the top, as on Explore: the card's
   top padding goes, and the photo reaches past the side padding. */
#app .flyer-wall-page .event-card {
    padding-top: 0 !important;
}

#app .flyer-wall-page .event-card .event-card-image {
    width: calc(100% + 40px) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 -20px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--app-surface-strong) !important;
}

/* Over the photo: the homepage's caption chip and round glass buttons. */
#app .flyer-wall-page .event-card-theme-chip {
    border: 0 !important;
    background: rgba(12, 13, 12, 0.74) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

#app .flyer-wall-page .event-card-theme-chip span,
#app .flyer-wall-page .event-card-theme-chip i {
    background: none !important;
    color: var(--app-sand) !important;
}

#app .flyer-wall-page .event-card-save-btn,
#app .flyer-wall-page .event-card-report-btn {
    border: 1px solid var(--app-line) !important;
    background: rgba(12, 13, 12, 0.74) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

#app .flyer-wall-page .event-card-save-btn.saved {
    color: var(--app-sand) !important;
}

#app .flyer-wall-page .event-card-content {
    background: none !important;
    color: var(--app-ink) !important;
}

#app .flyer-wall-page .event-card-title {
    color: var(--app-ivory) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

/* Labels read as the homepage's metadata, plain text with an icon, rather
   than a pill around every one; only the tags keep a soft fill. */
#app .flyer-wall-page :is(.event-source-badge, .event-status-pill, .creator-chip) {
    padding-inline: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--app-sand) !important;
    box-shadow: none !important;
}

#app .flyer-wall-page .event-card-curation-chip {
    border: 0 !important;
    background: var(--app-fill) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
}

#app .flyer-wall-page :is(.event-source-badge, .event-status-pill, .creator-chip, .event-card-curation-chip) i {
    color: inherit !important;
}

#app .flyer-wall-page :is(.event-card-theme-note, .event-card-description, .event-social-proof, .event-social-proof span, .event-card-meta, .event-card-meta-item) {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--app-muted) !important;
}

#app .flyer-wall-page :is(.event-card-theme-note, .event-social-proof span) {
    padding-inline: 0 !important;
}

#app .flyer-wall-page :is(.event-card-theme-note, .event-card-meta-item, .event-social-proof) i {
    color: var(--app-sand) !important;
}

/* What the host offers (free food, a discount): Sprout green for good news. */
#app .flyer-wall-page .event-card-offer {
    margin: 8px 0 10px;
    padding: 7px 9px;
    border: 1px solid rgba(62, 158, 95, 0.32);
    border-radius: 10px;
    background: rgba(62, 158, 95, 0.12);
    color: var(--app-green-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

#app .flyer-wall-page .event-card-offer i {
    margin-right: 5px;
}

#app .flyer-wall-page .event-card-ai-reason {
    border: 0 !important;
    border-top: 1px solid var(--app-line) !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--app-muted) !important;
}

#app .flyer-wall-page .event-card-ai-reason i {
    color: var(--app-green) !important;
}

#app .flyer-wall-page .event-card-actions {
    border-color: var(--app-line) !important;
    background: none !important;
}

/* One red action per card: RSVP (or the host's Manage, green, inline).
   View details and the source page recede to glass. They are styled
   inline (renderEventCard), which a stylesheet !important outranks. */
#app .flyer-wall-page .event-card-actions :is([data-detail-button], .sprout-source-link) {
    border: 1px solid var(--app-line) !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
}

#app .flyer-wall-page .event-card-actions :is([data-detail-button], .sprout-source-link):hover {
    border-color: var(--app-line-strong) !important;
    background: var(--app-fill-hover) !important;
}

/* ── Floating buttons ───────────────────────────────────────────────────── */
#app .create-event-fab,
#fabSpeedDial :is(button, a) {
    border: 1px solid rgba(255, 250, 240, 0.13) !important;
    border-radius: 999px !important;
    background: var(--app-glass-solid) !important;
    color: var(--app-ivory) !important;
    box-shadow: var(--app-shadow) !important;
}

#app .create-event-fab::before,
#app .create-event-fab::after {
    content: none !important;
    display: none !important;
}

#app .create-event-fab-icon {
    background: var(--app-red) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ── Inline colours, re-pointed ──────────────────────────────────────────
   app.js and index.html draw much of the app with inline styles in the cream
   palette (some 1,400 colour declarations over a hundred-odd literals).
   Rather than restyle each, every literal is re-pointed here by its
   lightness and hue: the lists come from a census of the markup, so a new
   literal in that palette needs adding. Only inside the signed-in surfaces
   and their sheets and dialogs, and never inside a Google map popup (its
   bubble stays white), a QR code (which needs its white to scan), or the
   sign in and sign up dialogs, which keep the homepage's ivory paper
   (layout.css). A stylesheet !important outranks an inline declaration. */
/* ── Generated by scripts/app-dark-remap.mjs: from here ── */
/* Dark ink: soft ivory. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="color"]:is(
    [style*="#111827"],
    [style*="#163323"],
    [style*="#17221a"],
    [style*="#1a1a2e"],
    [style*="#1a237e"],
    [style*="#1f2937"],
    [style*="#29482f"],
    [style*="#2b2118"],
    [style*="#2d4a35"],
    [style*="#2e241b"],
    [style*="#2f2417"],
    [style*="#2f241d"],
    [style*="#2f251c"],
    [style*="#2f4a35"],
    [style*="#374151"],
    [style*="#3b1010"],
    [style*="#3b2b18"],
    [style*="#3b2b20"],
    [style*="#3d2c1e"],
    [style*="#3f2c1f"],
    [style*="#3f3125"],
    [style*="#3F3420"],
    [style*="#493321"],
    [style*="#4a3424"],
    [style*="#4b392a"],
    [style*="#4b3a25"],
    [style*="#4f3a28"]
):not(.gm-style *):not([class*="qr"]) {
    color: var(--app-ink) !important;
}

/* Brown and grey secondary text: warm grey. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="color"]:is(
    [style*="#495057"],
    [style*="#4a7a5a"],
    [style*="#4b5563"],
    [style*="#5a4b36"],
    [style*="#5a5ca0"],
    [style*="#5e4532"],
    [style*="#5f4632"],
    [style*="#66564b"],
    [style*="#666"],
    [style*="#66715f"],
    [style*="#6b5540"],
    [style*="#6b5847"],
    [style*="#6b5848"],
    [style*="#6b5a44"],
    [style*="#6b5a4e"],
    [style*="#6b7280"],
    [style*="#7a5c3a"],
    [style*="#7a5c42"],
    [style*="#7c897e"],
    [style*="#8a6a4e"],
    [style*="#8a7060"],
    [style*="#8a7867"],
    [style*="#8b6a50"]
):not(.gm-style *):not([class*="qr"]) {
    color: var(--app-muted) !important;
}

/* Stanford red as text (2.2:1 on espresso): the sand accent the homepage uses. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="color"]:is(
    [style^="color: #8C1515"],
    [style*="; color: #8C1515"],
    [style*=";color: #8C1515"],
    [style^="color:#8C1515"],
    [style*="; color:#8C1515"],
    [style*=";color:#8C1515"],
    [style^="color: #8c1515"],
    [style*="; color: #8c1515"],
    [style*=";color: #8c1515"],
    [style^="color:#8c1515"],
    [style*="; color:#8c1515"],
    [style*=";color:#8c1515"]
):not(.gm-style *):not([class*="qr"]) {
    color: var(--app-sand) !important;
}

/* Other reds as text (errors, warnings): a lighter red. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="color"]:is(
    [style*="color: #4f2f24"],
    [style*="color:#4f2f24"],
    [style*="color: #6d1d1d"],
    [style*="color:#6d1d1d"],
    [style*="color: #74313b"],
    [style*="color:#74313b"],
    [style*="color: #7f1d1d"],
    [style*="color:#7f1d1d"],
    [style*="color: #991b1b"],
    [style*="color:#991b1b"],
    [style*="color: #9A3412"],
    [style*="color:#9A3412"],
    [style*="color: #b91c1c"],
    [style*="color:#b91c1c"],
    [style*="color: #bf360c"],
    [style*="color:#bf360c"],
    [style*="color: #c62828"],
    [style*="color:#c62828"],
    [style*="color: #db4f35"],
    [style*="color:#db4f35"],
    [style^="color: #dc2626"],
    [style*="; color: #dc2626"],
    [style*=";color: #dc2626"],
    [style^="color:#dc2626"],
    [style*="; color:#dc2626"],
    [style*=";color:#dc2626"],
    [style*="color: #e94560"],
    [style*="color:#e94560"]
):not(.gm-style *):not([class*="qr"]) {
    color: var(--app-red-ink) !important;
}

/* Ambers and oranges, lightened. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="color"]:is(
    [style*="color: #6b4b00"],
    [style*="color:#6b4b00"],
    [style*="color: #7a4a08"],
    [style*="color:#7a4a08"],
    [style*="color: #7a4e1a"],
    [style*="color:#7a4e1a"],
    [style*="color: #b45309"],
    [style*="color:#b45309"],
    [style*="color: #e65100"],
    [style*="color:#e65100"]
):not(.gm-style *):not([class*="qr"]) {
    color: var(--app-amber-ink) !important;
}

/* Greens, lightened. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="color"]:is(
    [style*="color: #047857"],
    [style*="color:#047857"],
    [style*="color: #0a3d24"],
    [style*="color:#0a3d24"],
    [style*="color: #0f5132"],
    [style*="color:#0f5132"],
    [style*="color: #166534"],
    [style*="color:#166534"],
    [style*="color: #1a6632"],
    [style*="color:#1a6632"],
    [style*="color: #1a7a3c"],
    [style*="color:#1a7a3c"],
    [style*="color: #254d32"],
    [style*="color:#254d32"],
    [style*="color: #2e7d32"],
    [style*="color:#2e7d32"],
    [style*="color: #3c7a4b"],
    [style*="color:#3c7a4b"],
    [style^="color: #6B8E23"],
    [style*="; color: #6B8E23"],
    [style*=";color: #6B8E23"],
    [style^="color:#6B8E23"],
    [style*="; color:#6B8E23"],
    [style*=";color:#6B8E23"]
):not(.gm-style *):not([class*="qr"]) {
    color: var(--app-green-ink) !important;
}

/* Blues, lightened. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="color"]:is(
    [style*="color: #007AFF"],
    [style*="color:#007AFF"],
    [style*="color: #0284c7"],
    [style*="color:#0284c7"],
    [style*="color: #1565c0"],
    [style*="color:#1565c0"],
    [style*="color: #3234a0"],
    [style*="color:#3234a0"],
    [style*="color: #4285f4"],
    [style*="color:#4285f4"],
    [style*="color: #5c6bc0"],
    [style*="color:#5c6bc0"]
):not(.gm-style *):not([class*="qr"]) {
    color: var(--app-blue-ink) !important;
}

/* Paper, white, cream and grey boxes: espresso. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="background"]:is(
    [style*="background: #d1d5db"],
    [style*="background:#d1d5db"],
    [style*="background: #d6d3cb"],
    [style*="background:#d6d3cb"],
    [style*="background: #e5dcff"],
    [style*="background:#e5dcff"],
    [style*="background: #e5e7eb"],
    [style*="background:#e5e7eb"],
    [style*="background: #e7ddff"],
    [style*="background:#e7ddff"],
    [style*="background: #e7eadc"],
    [style*="background:#e7eadc"],
    [style*="background: #ede9e3"],
    [style*="background:#ede9e3"],
    [style*="background: #edf7ea"],
    [style*="background:#edf7ea"],
    [style*="background: #f0fdf4"],
    [style*="background:#f0fdf4"],
    [style*="background: #f3f4f6"],
    [style*="background:#f3f4f6"],
    [style*="background: #f6fbf4"],
    [style*="background:#f6fbf4"],
    [style*="background: #f8f9fa"],
    [style*="background:#f8f9fa"],
    [style*="background: #f8fbf3"],
    [style*="background:#f8fbf3"],
    [style*="background: #f9fafb"],
    [style*="background:#f9fafb"],
    [style*="background: #fdecea"],
    [style*="background:#fdecea"],
    [style*="background: #fff"],
    [style*="background:#fff"],
    [style*="background: rgba(161, 207, 244, "],
    [style*="background:rgba(161, 207, 244, "],
    [style*="background: rgba(161,207,244,"],
    [style*="background:rgba(161,207,244,"],
    [style*="background: rgba(232, 240, 230, "],
    [style*="background:rgba(232, 240, 230, "],
    [style*="background: rgba(232,240,230,"],
    [style*="background:rgba(232,240,230,"],
    [style*="background: rgba(246, 251, 244, 0.6"],
    [style*="background:rgba(246, 251, 244, 0.6"],
    [style*="background: rgba(246, 251, 244, 0.8"],
    [style*="background:rgba(246, 251, 244, 0.8"],
    [style*="background: rgba(246, 251, 244, 0.9"],
    [style*="background:rgba(246, 251, 244, 0.9"],
    [style*="background: rgba(246,251,244,0.6"],
    [style*="background:rgba(246,251,244,0.6"],
    [style*="background: rgba(246,251,244,0.8"],
    [style*="background:rgba(246,251,244,0.8"],
    [style*="background: rgba(246,251,244,0.9"],
    [style*="background:rgba(246,251,244,0.9"],
    [style*="background: rgba(250, 246, 242, "],
    [style*="background:rgba(250, 246, 242, "],
    [style*="background: rgba(250,246,242,"],
    [style*="background:rgba(250,246,242,"],
    [style*="background: rgba(252, 255, 250, "],
    [style*="background:rgba(252, 255, 250, "],
    [style*="background: rgba(252,255,250,"],
    [style*="background:rgba(252,255,250,"],
    [style*="background: rgba(255, 246, 246, "],
    [style*="background:rgba(255, 246, 246, "],
    [style*="background: rgba(255, 248, 220, "],
    [style*="background:rgba(255, 248, 220, "],
    [style*="background: rgba(255, 248, 226, "],
    [style*="background:rgba(255, 248, 226, "],
    [style*="background: rgba(255, 248, 231, 0.9"],
    [style*="background:rgba(255, 248, 231, 0.9"],
    [style*="background: rgba(255, 248, 237, 0.7"],
    [style*="background:rgba(255, 248, 237, 0.7"],
    [style*="background: rgba(255, 248, 237, 0.8"],
    [style*="background:rgba(255, 248, 237, 0.8"],
    [style*="background: rgba(255, 248, 237, 0.9"],
    [style*="background:rgba(255, 248, 237, 0.9"],
    [style*="background: rgba(255, 249, 223, "],
    [style*="background:rgba(255, 249, 223, "],
    [style*="background: rgba(255, 249, 231, "],
    [style*="background:rgba(255, 249, 231, "],
    [style*="background: rgba(255, 249, 237, "],
    [style*="background:rgba(255, 249, 237, "],
    [style*="background: rgba(255, 252, 235, "],
    [style*="background:rgba(255, 252, 235, "],
    [style*="background: rgba(255, 252, 242, "],
    [style*="background:rgba(255, 252, 242, "],
    [style*="background: rgba(255, 253, 240, "],
    [style*="background:rgba(255, 253, 240, "],
    [style*="background: rgba(255, 253, 247, 0.7"],
    [style*="background:rgba(255, 253, 247, 0.7"],
    [style*="background: rgba(255, 253, 247, 0.8"],
    [style*="background:rgba(255, 253, 247, 0.8"],
    [style*="background: rgba(255, 253, 247, 0.9"],
    [style*="background:rgba(255, 253, 247, 0.9"],
    [style*="background: rgba(255, 255, 255, 0.5"],
    [style*="background:rgba(255, 255, 255, 0.5"],
    [style*="background: rgba(255, 255, 255, 0.6"],
    [style*="background:rgba(255, 255, 255, 0.6"],
    [style*="background: rgba(255, 255, 255, 0.7"],
    [style*="background:rgba(255, 255, 255, 0.7"],
    [style*="background: rgba(255, 255, 255, 0.8"],
    [style*="background:rgba(255, 255, 255, 0.8"],
    [style*="background: rgba(255, 255, 255, 0.9"],
    [style*="background:rgba(255, 255, 255, 0.9"],
    [style*="background: rgba(255,246,246,"],
    [style*="background:rgba(255,246,246,"],
    [style*="background: rgba(255,248,220,"],
    [style*="background:rgba(255,248,220,"],
    [style*="background: rgba(255,248,226,"],
    [style*="background:rgba(255,248,226,"],
    [style*="background: rgba(255,248,231,0.9"],
    [style*="background:rgba(255,248,231,0.9"],
    [style*="background: rgba(255,248,237,0.7"],
    [style*="background:rgba(255,248,237,0.7"],
    [style*="background: rgba(255,248,237,0.8"],
    [style*="background:rgba(255,248,237,0.8"],
    [style*="background: rgba(255,248,237,0.9"],
    [style*="background:rgba(255,248,237,0.9"],
    [style*="background: rgba(255,249,223,"],
    [style*="background:rgba(255,249,223,"],
    [style*="background: rgba(255,249,231,"],
    [style*="background:rgba(255,249,231,"],
    [style*="background: rgba(255,249,237,"],
    [style*="background:rgba(255,249,237,"],
    [style*="background: rgba(255,252,235,"],
    [style*="background:rgba(255,252,235,"],
    [style*="background: rgba(255,252,242,"],
    [style*="background:rgba(255,252,242,"],
    [style*="background: rgba(255,253,240,"],
    [style*="background:rgba(255,253,240,"],
    [style*="background: rgba(255,253,247,0.7"],
    [style*="background:rgba(255,253,247,0.7"],
    [style*="background: rgba(255,253,247,0.8"],
    [style*="background:rgba(255,253,247,0.8"],
    [style*="background: rgba(255,253,247,0.9"],
    [style*="background:rgba(255,253,247,0.9"],
    [style*="background: rgba(255,255,255,0.5"],
    [style*="background:rgba(255,255,255,0.5"],
    [style*="background: rgba(255,255,255,0.6"],
    [style*="background:rgba(255,255,255,0.6"],
    [style*="background: rgba(255,255,255,0.7"],
    [style*="background:rgba(255,255,255,0.7"],
    [style*="background: rgba(255,255,255,0.8"],
    [style*="background:rgba(255,255,255,0.8"],
    [style*="background: rgba(255,255,255,0.9"],
    [style*="background:rgba(255,255,255,0.9"]
):not(.gm-style *):not([class*="qr"]) {
    background-color: var(--app-surface) !important;
    background-image: none !important;
}

/* The mint info cards: a raised espresso. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="background"]:is(
    [style*="background: #dff0e2"],
    [style*="background:#dff0e2"],
    [style*="background: #e8f5e2"],
    [style*="background:#e8f5e2"],
    [style*="background: #e9f4e6"],
    [style*="background:#e9f4e6"],
    [style*="background-color: #e9f4e6"],
    [style*="background-color:#e9f4e6"],
    [style*="background: #eaf6e4"],
    [style*="background:#eaf6e4"],
    [style*="background: rgba(220, 240, 224, "],
    [style*="background:rgba(220, 240, 224, "],
    [style*="background: rgba(220,240,224,"],
    [style*="background:rgba(220,240,224,"],
    [style*="background: rgba(226, 237, 225, "],
    [style*="background:rgba(226, 237, 225, "],
    [style*="background: rgba(226,237,225,"],
    [style*="background:rgba(226,237,225,"]
):not(.gm-style *):not([class*="qr"]) {
    background-color: var(--app-surface-strong) !important;
    background-image: none !important;
}

/* Green washes and chips: a green tint. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="background"]:is(
    [style*="background: #c5e6cd"],
    [style*="background:#c5e6cd"],
    [style*="background: #d4edda"],
    [style*="background:#d4edda"],
    [style*="background: #d7ead2"],
    [style*="background:#d7ead2"],
    [style*="background: #d9f0e0"],
    [style*="background:#d9f0e0"],
    [style*="background: rgba(176, 218, 145, "],
    [style*="background:rgba(176, 218, 145, "],
    [style*="background: rgba(176,218,145,"],
    [style*="background:rgba(176,218,145,"],
    [style*="background: rgba(181, 228, 181, "],
    [style*="background:rgba(181, 228, 181, "],
    [style*="background: rgba(181,228,181,"],
    [style*="background:rgba(181,228,181,"],
    [style*="background: rgba(196, 239, 181, "],
    [style*="background:rgba(196, 239, 181, "],
    [style*="background: rgba(196,239,181,"],
    [style*="background:rgba(196,239,181,"]
):not(.gm-style *):not([class*="qr"]) {
    background-color: rgba(62, 158, 95, 0.16) !important;
    background-image: none !important;
}

/* Yellow stickers and chips: a sand tint. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="background"]:is(
    [style*="background: #ead7b6"],
    [style*="background:#ead7b6"],
    [style*="background: #efe3c7"],
    [style*="background:#efe3c7"],
    [style*="background: #f1eee7"],
    [style*="background:#f1eee7"],
    [style*="background: #f3eee0"],
    [style*="background:#f3eee0"],
    [style*="background-color: #f3eee0"],
    [style*="background-color:#f3eee0"],
    [style*="background: #f4c95d"],
    [style*="background:#f4c95d"],
    [style*="background: #f4d66e"],
    [style*="background:#f4d66e"],
    [style*="background: #f8df8a"],
    [style*="background:#f8df8a"],
    [style*="background: #ffe2b8"],
    [style*="background:#ffe2b8"],
    [style*="background: #ffe4b9"],
    [style*="background:#ffe4b9"],
    [style*="background: #fff1d9"],
    [style*="background:#fff1d9"],
    [style*="background: #fff4c9"],
    [style*="background:#fff4c9"],
    [style*="background: #fff4cf"],
    [style*="background:#fff4cf"],
    [style*="background: #fff4d4"],
    [style*="background:#fff4d4"],
    [style*="background: #fff6d8"],
    [style*="background:#fff6d8"],
    [style*="background: rgba(248, 222, 103, 0.8"],
    [style*="background:rgba(248, 222, 103, 0.8"],
    [style*="background: rgba(248,222,103,0.8"],
    [style*="background:rgba(248,222,103,0.8"],
    [style*="background: rgba(255, 224, 117, "],
    [style*="background:rgba(255, 224, 117, "],
    [style*="background: rgba(255,224,117,"],
    [style*="background:rgba(255,224,117,"]
):not(.gm-style *):not([class*="qr"]) {
    background-color: rgba(223, 199, 159, 0.16) !important;
    background-image: none !important;
    color: var(--app-sand) !important;
}

/* Pink and red washes: a red tint. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="background"]:is(
    [style*="background: #f4d4d1"],
    [style*="background:#f4d4d1"],
    [style*="background: #f7d2d0"],
    [style*="background:#f7d2d0"],
    [style*="background: rgba(255, 182, 193, "],
    [style*="background:rgba(255, 182, 193, "],
    [style*="background: rgba(255,182,193,"],
    [style*="background:rgba(255,182,193,"]
):not(.gm-style *):not([class*="qr"]) {
    background-color: rgba(240, 113, 103, 0.14) !important;
    background-image: none !important;
}

/* Brown, mint and cream hairlines: the homepage line. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style]:is(
    [style*="1.5px solid rgba(118,79,45,"],
    [style*="1px solid rgba(118,79,45,"],
    [style*="1px solid rgba(15,81,50,"],
    [style*="1px solid #E3D8C8"],
    [style*="1px solid #e3d8c8"],
    [style*="1px solid #F0E3C8"],
    [style*="1px solid #f0e3c8"],
    [style*="1px solid rgba(240,227,200,"],
    [style*="1px solid #E5E7EB"],
    [style*="1px solid #e5e7eb"],
    [style*="rgba(118,79,45,"],
    [style*="rgba(22,101,52,"],
    [style*="rgba(140,21,21,0.2"],
    [style*="rgba(140,21,21,0.18"],
    [style*="rgba(140,21,21,0.26"],
    [style*="rgba(30,100,50,"],
    [style*="rgba(101,68,38,"]
):not(.gm-style *):not([class*="qr"]) {
    border-color: var(--app-line) !important;
}

/* The flyer wall's tape strips (decorative, click-through): gone with it. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) [style*="pointer-events:none"]:is(
    [style*="rgba(248,222,103,0.8"],
    [style*="rgba(239,163,180,0.8"],
    [style*="rgba(161,207,244,0.8"],
    [style*="rgba(196,239,181,0.8"],
    [style*="rgba(176,218,145,0.8"]
) {
    display: none !important;
}

/* Red gradient banners heading a dialog: the homepage's espresso header with
   a sand glow; red stays for the one primary action. */
:is(#app .flyer-wall-page, #app .public-home:not(.otf-public-home), .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), #requiredPolicyAcceptance, .friend-matcher-modal, .social-directory-modal, #userProfileSheet, .event-added-brain-overlay) :is([style*="linear-gradient(135deg,#8C1515 0%,#a31a1a 45%,#7a1212 100%)"], [style*="linear-gradient(135deg,#8C1515 0%,#6d0f0f 100%)"]) {
    border-bottom: 1px solid var(--app-line) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(199, 146, 79, 0.18), transparent 60%),
        var(--app-surface) !important;
}
/* ── Generated by scripts/app-dark-remap.mjs: to here ── */

/* ── The event sheet (showEventDetailFizz) ──────────────────────────────── */
/* It sets its own pastel theme inline, as the cards do. */
.bottom-sheet.event-theme-sheet {
    --event-card-bg: var(--app-surface) !important;
    --event-card-detail-bg: #120f0d !important;
    --event-card-accent: var(--app-sand) !important;
    --event-card-secondary: var(--app-sand) !important;
    --event-card-ink: var(--app-ink) !important;
    --event-card-soft: var(--app-surface-strong) !important;
    --event-card-photo-border: transparent !important;
    border: 1px solid var(--app-line) !important;
    border-bottom: 0 !important;
    background: #120f0d !important;
    color: var(--app-ink) !important;
}

.bottom-sheet .bottom-sheet-handle {
    background: rgba(255, 250, 240, 0.24) !important;
}

/* Was a gradient of the event's pastel accent, then a flat pink
   (.bottom-sheet.event-pin-sheet .bottom-sheet-header, three classes). */
.bottom-sheet.event-pin-sheet.event-theme-sheet .bottom-sheet-header {
    border-bottom: 1px solid var(--app-line) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(199, 146, 79, 0.18), transparent 60%),
        var(--app-surface) !important;
}

/* The About box mixes the theme with white (color-mix ... #fff). */
.event-theme-sheet [style*="color-mix(in srgb, var(--event-card-soft"] {
    border-color: var(--app-line) !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
}

/* RSVP stays the one red action; Share and Save recede to glass. All
   three are full pills, as every button on the homepage. */
.bottom-sheet.event-theme-sheet :is(.event-sheet-primary, .event-sheet-action) {
    border-radius: 999px !important;
}

.bottom-sheet.event-theme-sheet .event-sheet-action {
    border: 1px solid var(--app-line-strong) !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

.bottom-sheet.event-theme-sheet .event-sheet-action:hover {
    background: var(--app-fill-hover) !important;
}

.bottom-sheet.event-theme-sheet .event-sheet-action.is-saved {
    color: var(--app-green-ink) !important;
}

:is(#app .flyer-wall-page, .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal)) .sprout-surface {
    border: 1px solid var(--app-line) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(62, 158, 95, 0.14), transparent 60%),
        var(--app-surface-strong) !important;
    box-shadow: none !important;
    color: var(--app-ink) !important;
}

:is(#app .flyer-wall-page, .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal)) :is(.btn-secondary, .btn-outline) {
    border: 1px solid var(--app-line-strong) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

:is(#app .flyer-wall-page, .bottom-sheet, .fizz-popup, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal)) :is(.btn-secondary, .btn-outline):hover {
    background: var(--app-fill-hover) !important;
}

/* ── Shared controls ────────────────────────────────────────────────────── */
/* Secondary buttons (Back to all events, Enhance with Sprout): glass pills. */
:is(#app, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), .bottom-sheet, .social-directory-modal, .friend-matcher-modal) .profile-secondary-btn {
    border: 1px solid var(--app-line-strong) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

:is(#app, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal), .bottom-sheet, .social-directory-modal, .friend-matcher-modal) .profile-secondary-btn:hover {
    background: var(--app-fill-hover) !important;
}

/* Saved and empty states reuse the profile card. */
#app .flyer-wall-page .profile-modal-card {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
    color: var(--app-ink) !important;
}

#app .flyer-wall-page .profile-modal-card :is(h2, h3) {
    color: var(--app-ivory) !important;
}

#app .flyer-wall-page .profile-modal-card p {
    color: var(--app-muted) !important;
}

/* ── Map chrome ─────────────────────────────────────────────────────────── */
/* The map itself stays Google's light map, as the homepage's map story is;
   the controls around it take the shell. */
#app .map-control-drawer,
#app .map-legend-drawer {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-glass-solid) !important;
    box-shadow: none !important;
    color: var(--app-ink) !important;
}

#app :is(.map-control-drawer, .map-legend-drawer) summary {
    color: var(--app-ivory) !important;
}

#app :is(.map-control-drawer, .map-legend-drawer) :is(small, .map-control-drawer-copy span + span, .map-legend-item) {
    color: var(--app-muted) !important;
}

#app .map-community-control > span {
    color: var(--app-muted) !important;
}

#app .map-control-drawer-icon {
    border: 0 !important;
    background: var(--app-fill) !important;
    color: var(--app-sand) !important;
}

#app :is(#mapCommunitySelect, .map-control-drawer select) {
    border: 1px solid rgba(255, 250, 240, 0.16) !important;
    border-radius: 14px !important;
    background-color: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-ivory) !important;
}

#app .map-filter-btn {
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
}

#app .map-filter-btn:hover {
    color: var(--app-ivory) !important;
}

#app .map-filter-btn.active {
    border-color: var(--app-ivory) !important;
    background: var(--app-ivory) !important;
    color: var(--app-canvas) !important;
}

#app .map-gather-location-btn {
    border: 1px solid rgba(255, 250, 240, 0.13) !important;
    border-radius: 999px !important;
    background: var(--app-glass-solid) !important;
    color: var(--app-ivory) !important;
    box-shadow: var(--app-shadow) !important;
}

/* ── Friend Match (the /friends tab) and its dialog ─────────────────────── */
#app .friend-matcher-board,
#app .leaderboard-shell {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* The hero keeps its photograph behind an espresso scrim instead of the red
   one, the homepage's way with a photo. */
#app :is(.friend-matcher-hero, .leaderboard-hero),
.social-directory-modal .social-directory-hero {
    border: 1px solid var(--app-line) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(12, 13, 12, 0.35), rgba(12, 13, 12, 0.86)),
        url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1400&auto=format&fit=crop") center / cover !important;
    box-shadow: none !important;
}

#app :is(.friend-matcher-hero, .leaderboard-hero) :is(h2, p),
.social-directory-modal .social-directory-hero :is(h2, p) {
    color: var(--app-ivory) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
}

:is(#app, .social-directory-modal, .friend-matcher-modal) .friend-matcher-kicker {
    color: var(--app-sand) !important;
}

#app .friend-matcher-consent {
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: rgba(12, 13, 12, 0.6) !important;
    color: var(--app-ink) !important;
}

#app .friend-matcher-visual {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface-strong) !important;
    box-shadow: none !important;
}

#app .friend-matcher-visual figcaption {
    background: rgba(12, 13, 12, 0.74) !important;
    color: var(--app-ivory) !important;
}

#app .friend-search-panel {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#app .friend-search-row {
    border: 1px solid rgba(255, 250, 240, 0.14) !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 240, 0.05) !important;
    box-shadow: none !important;
    color: var(--app-muted) !important;
}

#app .friend-search-row input {
    background: transparent !important;
    color: var(--app-ivory) !important;
}

#app .friend-search-row input::placeholder {
    color: var(--app-muted) !important;
}

#app .friend-search-row button {
    border: 1px solid rgba(255, 250, 240, 0.14) !important;
    border-radius: 999px !important;
    background: var(--app-red) !important;
    color: #fff !important;
}

:is(#app, .social-directory-modal, .friend-matcher-modal) :is(.friend-search-empty, .friend-match-empty) {
    color: var(--app-muted) !important;
}

:is(#app, .friend-matcher-modal) .friend-match-card,
#app .leaderboard-card {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
    color: var(--app-ink) !important;
}

:is(#app, .friend-matcher-modal) .friend-match-card :is(h3, h3 button) {
    color: var(--app-ivory) !important;
}

:is(#app, .friend-matcher-modal) .friend-match-score {
    border: 0 !important;
    background: rgba(223, 199, 159, 0.16) !important;
    color: var(--app-sand) !important;
    box-shadow: none !important;
}

:is(#app, .friend-matcher-modal) .friend-match-meta span {
    border: 0 !important;
    background: none !important;
    color: var(--app-muted) !important;
}

:is(#app, .friend-matcher-modal) .friend-match-meta i {
    color: var(--app-sand) !important;
}

/* Add Friend is the card's one primary; Message recedes. */
:is(#app, .friend-matcher-modal) .friend-connect-button {
    border: 1px solid rgba(255, 250, 240, 0.14) !important;
    border-radius: 999px !important;
    background: var(--app-red) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:is(#app, .friend-matcher-modal) .friend-message-button {
    border: 1px solid var(--app-line-strong) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

/* ── Contacts & groups dialog ───────────────────────────────────────────── */
html body .social-directory-modal .social-directory-board {
    border: 1px solid var(--app-line) !important;
    border-radius: 24px !important;
    background: #15120f !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
    color: var(--app-ink) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

:is(#app, .social-directory-modal, .friend-matcher-modal, body > div[id$="Modal"]:not(#loginModal, #signupModal, #passwordResetModal)) .friend-matcher-close {
    border: 1px solid var(--app-line) !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

html body .social-directory-modal .social-directory-section {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface) !important;
    box-shadow: none !important;
}

html body .social-directory-modal .social-directory-section-title {
    color: var(--app-ivory) !important;
}

html body .social-directory-modal .social-directory-section-title strong {
    background: rgba(223, 199, 159, 0.16) !important;
    color: var(--app-sand) !important;
}

/* ── Create an Event ────────────────────────────────────────────────────── */
#createEventModal .create-step-card {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface-strong) !important;
    box-shadow: none !important;
    color: var(--app-ink) !important;
}

#createEventModal .create-step-card :is(h2, h3) {
    color: var(--app-ivory) !important;
}

/* Fields: the contract's 14px corners on the dark fill. */
:is(#createEventModal, #manageEventModal, #profileCustomizationModal, #rsvpDetailsModal, #usernameClaimModal, #onboardingModal, #customPromptModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
    border: 1px solid rgba(255, 250, 240, 0.16) !important;
    border-radius: 14px !important;
    background-color: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

:is(#createEventModal, #manageEventModal, #profileCustomizationModal, #rsvpDetailsModal, #usernameClaimModal, #onboardingModal, #customPromptModal) :is(input, textarea)::placeholder {
    color: var(--app-muted) !important;
}

:is(#createEventModal, #manageEventModal, #profileCustomizationModal, #rsvpDetailsModal, #usernameClaimModal, #onboardingModal, #customPromptModal) :is(input, textarea, select):focus {
    border-color: rgba(223, 199, 159, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(223, 199, 159, 0.16) !important;
}

/* The bar filled with the paper colour; it fills with sand now. */
#createEventModal #createStepProgress {
    background: var(--app-sand) !important;
}

#createEventModal .create-draft-notice {
    border: 1px solid rgba(62, 158, 95, 0.32) !important;
    border-radius: 14px !important;
    background: rgba(62, 158, 95, 0.12) !important;
    color: var(--app-green-ink) !important;
}

#createEventModal .create-draft-notice button {
    border: 1px solid var(--app-line-strong) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
}

/* ── Inbox ──────────────────────────────────────────────────────────────── */
#inboxModal .inbox-tab {
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
}

#inboxModal .inbox-tab:hover {
    color: var(--app-ivory) !important;
}

#inboxModal .inbox-tab.active {
    border-color: var(--app-ivory) !important;
    background: var(--app-ivory) !important;
    color: var(--app-canvas) !important;
}

#inboxModal .inbox-empty-state,
#inboxModal .inbox-empty-state span {
    color: var(--app-muted) !important;
}

#inboxModal .inbox-empty-state strong {
    color: var(--app-ivory) !important;
}

/* ── Leaderboard ────────────────────────────────────────────────────────── */
/* The page hero: the homepage's subpage title over the 680px column. */
#app .leaderboard-page-hero {
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 32px) 0;
}

#app .leaderboard-page-eyebrow {
    margin: 0;
    color: var(--app-sand);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#app .leaderboard-page-hero h1 {
    margin: 10px 0 0;
    color: var(--app-ivory);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

#app .leaderboard-page-hero > p:not(.leaderboard-page-eyebrow):not(.leaderboard-page-rank) {
    max-width: 62ch;
    margin: 14px 0 0;
    color: var(--app-muted);
    font-size: 17px;
    line-height: 1.6;
}

#app .leaderboard-page-hero > .leaderboard-page-rank {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 18px;
    border: 1px solid var(--app-line);
    border-radius: 999px;
    background: var(--app-fill);
    font-size: 13px;
    font-weight: 700;
}

#app .leaderboard-page-rank strong {
    color: var(--app-ivory);
    font-size: 20px;
    font-weight: 800;
}

#app .leaderboard-scope-btn {
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
}

#app .leaderboard-scope-btn:hover {
    color: var(--app-ivory) !important;
}

#app .leaderboard-scope-btn.active {
    border-color: var(--app-ivory) !important;
    background: var(--app-ivory) !important;
    color: var(--app-canvas) !important;
}

#app .leaderboard-card.is-current-user {
    border-color: rgba(223, 199, 159, 0.4) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(199, 146, 79, 0.14), transparent 60%),
        var(--app-surface) !important;
}

#app :is(.leaderboard-row-sticker, .leaderboard-rank.top) {
    border: 0 !important;
    background: rgba(223, 199, 159, 0.16) !important;
    color: var(--app-sand) !important;
    box-shadow: none !important;
}

#app .leaderboard-rank {
    border: 0 !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

#app .leaderboard-score {
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--app-fill) !important;
    box-shadow: none !important;
}

/* ── Messages ───────────────────────────────────────────────────────────── */
#inboxModal .message-center-header h3,
#inboxModal .message-privacy-panel h3,
#inboxModal .message-thread-topline h3,
:is(#inboxModal, .friend-matcher-modal) .new-message-section h3 {
    color: var(--app-ivory) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: -0.02em !important;
}

#inboxModal :is(.message-center-header p, .message-privacy-panel p, .message-thread-topline span, .message-thread-status, .message-thread-main p) {
    color: var(--app-muted) !important;
}

#inboxModal .message-center-new-btn {
    border: 1px solid rgba(255, 250, 240, 0.14) !important;
    border-radius: 999px !important;
    background: var(--app-red) !important;
    color: #fff !important;
    box-shadow: none !important;
}

#inboxModal .message-control-menu summary {
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
}

#inboxModal .message-control-menu > div {
    border: 1px solid var(--app-line) !important;
    background: #15120f !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
}

#inboxModal .message-control-menu button {
    color: var(--app-ink) !important;
}

#inboxModal :is(.message-control-menu button.active, .message-privacy-actions button.active) {
    background: rgba(62, 158, 95, 0.16) !important;
    color: var(--app-green-ink) !important;
}

#inboxModal :is(.message-privacy-panel, .message-request-banner) {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface-strong) !important;
    color: var(--app-ink) !important;
}

#inboxModal .message-privacy-actions button,
#inboxModal :is(.message-request-actions, .message-request-banner) button:not(:first-child) {
    border: 1px solid var(--app-line-strong) !important;
    border-radius: 999px !important;
    background: var(--app-fill) !important;
    color: var(--app-ivory) !important;
    box-shadow: none !important;
}

#inboxModal .message-thread-card {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface-strong) !important;
    box-shadow: none !important;
}

#inboxModal .message-thread-card:hover {
    border-color: var(--app-line-strong) !important;
}

#inboxModal .message-thread-card.unread {
    border-color: rgba(223, 199, 159, 0.42) !important;
}

:is(#inboxModal, #privateInviteModal) .message-avatar {
    border: 1px solid var(--app-line) !important;
    background: rgba(62, 158, 95, 0.16) !important;
    color: var(--app-green-ink) !important;
}

:is(#inboxModal, #privateInviteModal) .message-avatar .message-online-dot {
    border-color: var(--app-surface) !important;
}

/* The empty state's bubble icon. */
#inboxModal .fa-comments {
    background: rgba(62, 158, 95, 0.16) !important;
    color: var(--app-green-ink) !important;
}

/* The new-message composer and the friend matcher open in their own dialog. */
html body .friend-matcher-modal :is(.friend-message-board, .friend-matcher-board) {
    border: 1px solid var(--app-line) !important;
    border-radius: 24px !important;
    background: #15120f !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
    color: var(--app-ink) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .friend-matcher-modal .friend-message-board h2 {
    color: var(--app-ivory) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: -0.02em !important;
}

html body .friend-matcher-modal :is(.friend-message-help, .friend-search-empty) {
    color: var(--app-muted) !important;
}

:is(#inboxModal, .friend-matcher-modal) :is(.new-message-section, .new-message-search) {
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: var(--app-surface-strong) !important;
    color: var(--app-ink) !important;
}

:is(#inboxModal, .friend-matcher-modal) .new-message-search input {
    background: transparent !important;
    color: var(--app-ivory) !important;
}

:is(#inboxModal, .friend-matcher-modal) .new-message-row {
    border: 1px solid var(--app-line) !important;
    border-radius: 14px !important;
    background: var(--app-fill) !important;
    color: var(--app-ink) !important;
    box-shadow: none !important;
}

:is(#inboxModal, .friend-matcher-modal) .new-message-row:hover {
    background: var(--app-fill-hover) !important;
}

:is(#inboxModal, .friend-matcher-modal) .new-message-badge {
    border: 0 !important;
    background: var(--app-fill) !important;
    color: var(--app-muted) !important;
}

:is(#inboxModal, .friend-matcher-modal) .new-message-badge.friend {
    background: rgba(62, 158, 95, 0.16) !important;
    color: var(--app-green-ink) !important;
}

:is(#inboxModal, .friend-matcher-modal) .new-message-badge.stranger {
    background: rgba(240, 113, 103, 0.14) !important;
    color: var(--app-red-ink) !important;
}

/* ── A conversation, in the espresso skin ───────────────────────────────── */
/* Private invites and conversations open in this dialog's card. */
#privateInviteModal .private-invite-card-shell,
#privateInviteModal .private-invite-card-shell:is(.invite-ready, .invite-opened, .chat-open) {
    border: 1px solid var(--app-line) !important;
    background: #15120f !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
}

#privateInviteModal .private-invite-card {
    border: 1px solid var(--app-line) !important;
    background: var(--app-surface) !important;
    color: var(--app-ink) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] {
    border-color: var(--app-line) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-header {
    border-bottom: 1px solid var(--app-line) !important;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(199, 146, 79, 0.16), transparent 60%),
        var(--app-surface) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-header h2 {
    color: var(--app-ivory) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] :is(.chatbox-header p, .chatbox-live-pill) {
    color: var(--app-muted) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-privacy-pill {
    background: var(--app-fill) !important;
    color: var(--app-ink) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-messages {
    background: none !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-compose {
    border-top: 1px solid var(--app-line) !important;
    background: var(--app-surface) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-compose input {
    border: 1px solid rgba(255, 250, 240, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-ivory) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-compose input::placeholder {
    color: var(--app-muted) !important;
}

#privateInviteModal .chatbox-shell[data-chat-skin="espresso"] .chatbox-photo-btn {
    border-color: var(--app-line) !important;
    background: var(--app-fill) !important;
    color: var(--app-sand) !important;
}

/* ── Profile customisation ──────────────────────────────────────────────── */
#profileCustomizationModal .profile-tab-btn {
    border: 1px solid var(--app-line) !important;
    border-radius: 999px !important;
    background: rgba(255, 250, 240, 0.05) !important;
    color: var(--app-muted) !important;
    box-shadow: none !important;
}

#profileCustomizationModal .profile-tab-btn:hover {
    color: var(--app-ivory) !important;
}

#profileCustomizationModal .profile-tab-btn.active {
    border-color: var(--app-ivory) !important;
    background: var(--app-ivory) !important;
    color: var(--app-canvas) !important;
}

/* ── Username and first-run setup (Tailwind white cards) ────────────────── */
:is(#usernameClaimModal, #onboardingModal) .bg-white {
    border: 1px solid var(--app-line) !important;
    background: #15120f !important;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8) !important;
    color: var(--app-ink) !important;
}

:is(#usernameClaimModal, #onboardingModal) :is(h1, h2, h3, .text-gray-900, .text-gray-800) {
    color: var(--app-ivory) !important;
}

:is(#usernameClaimModal, #onboardingModal) :is(p, label, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
    color: var(--app-muted) !important;
}

/* The @ sat at the field's top corner: the Tailwind build has no top-1/2 or
   -translate-y-1/2, so it was never centred. */
#usernameClaimModal span.absolute.left-4 {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
}

#usernameClaimModal #usernameClaimInput {
    padding-left: 32px !important;
}

:is(#usernameClaimModal, #onboardingModal) :is(.text-green-900, .text-green-800, .text-green-700) {
    color: var(--app-green-ink) !important;
}

:is(#usernameClaimModal, #onboardingModal) .bg-gray-200 {
    background: var(--app-fill) !important;
}

/* ── Sprout search results ─────────────────────────────────────────────── */
#app .ai-search-back {
    width: min(calc(100% - 2 * var(--app-inset)), 1180px);
    margin: 18px auto 0;
}

#app .ai-search-back .profile-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* ── Phones ─────────────────────────────────────────────────────────────── */
/* The pill takes the homepage's phone size (64px, a 17px wordmark), and the
   icons keep the app's own phone behaviour: one row that scrolls sideways
   inside the pill. */
@media (max-width: 640px) {
    #app .app-header {
        gap: 8px !important;
        min-height: 64px !important;
        padding: 10px 10px 10px 16px !important;
    }

    #app .flyer-wall-page .app-header-left,
    #app .app-header-left {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 8px !important;
        padding: 3px 0 !important;
    }

    #app .app-logo {
        width: 32px !important;
        height: 32px !important;
    }

    #app .app-logo .sprout-mascot {
        --sprout-size: 32px !important;
    }

    #app .app-header-left .app-title {
        font-size: 17px !important;
    }

    #app .flyer-wall-page .app-nav,
    #app .app-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 0 !important;
        position: static !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain !important;
        scrollbar-width: none !important;
    }

    #app .app-nav::-webkit-scrollbar {
        display: none !important;
    }

    /* The + menu opened to the left of its button, inside that scrolling
       row, so on a phone it sat off screen (it did on the cream header too).
       It drops under the pill instead, as the homepage's phone menu does:
       placed against the header, which the row's clipping does not reach. */
    #app .nav-create-expand {
        position: static !important;
    }

    #app .nav-create-options {
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 18px !important;
        transform: translateY(-8px) !important;
    }

    #app .nav-create-expand.expanded .nav-create-options {
        transform: none !important;
    }
}

/* ── Reduced motion and transparency ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #app .flyer-wall-page .event-card,
    #app .flyer-wall-page .event-card:hover {
        transform: none !important;
        transition: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    #app .app-header {
        background: var(--app-glass-solid) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}