/* Rotary Club de Neuchâtel — brand tokens & public site base. See docs/specs/09-branding.md. */

/* Open Sans (self-hosted) is declared once in /fonts/fonts.css — link that alongside this file.
   It is kept separate because the in5 bundles and the registration-window placeholder need the font but do
   NOT link brand.css. See docs/specs/09-branding.md. */

:root {
    --rcn-blue: #0c3c7c;       /* Royal Blue */
    --rcn-gold: #f7a81b;       /* Gold */
    --rcn-blue-ink: #0a2f61;   /* darker hover/active */
    --rcn-surface: #ffffff;
    --rcn-surface-alt: #f5f7fa;
    --rcn-text: #1a1a1a;
    --rcn-font: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body {
    margin: 0;
    font-family: var(--rcn-font);
    color: var(--rcn-text);
    background: var(--rcn-surface);
}

.rcn-site { display: flex; flex-direction: column; min-height: 100vh; }

/* --- DEV environment marker (rendered only when IHostEnvironment.IsDevelopment()) --- */
.rcn-dev-ribbon {
    display: flex; align-items: center; justify-content: center;
    padding: 0.35rem 1rem;
    background: repeating-linear-gradient(
        45deg, #b91c1c, #b91c1c 14px, #991b1b 14px, #991b1b 28px);
    color: #fff;
    font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
/* Recolour the header's gold underline to red on DEV */
.rcn-env-dev .rcn-header { border-bottom-color: #b91c1c; }

.rcn-header {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.75rem 1.5rem;
    border-bottom: 3px solid var(--rcn-gold);
    background: var(--rcn-surface);
}

.rcn-brand { display: flex; align-items: center; text-decoration: none; }
.rcn-logo { height: 50px; width: auto; display: block; }

.rcn-header-right { display: flex; align-items: center; gap: 1.5rem; }
.rcn-nav { display: flex; gap: 1.25rem; }
.rcn-nav a { color: var(--rcn-blue); text-decoration: none; font-weight: 600; }
.rcn-nav a:hover { color: var(--rcn-gold); }

/* Hamburger toggle — hidden on desktop, shown below the breakpoint */
.rcn-nav-toggle {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
}
.rcn-nav-toggle-bar {
    display: block; width: 26px; height: 3px; border-radius: 2px;
    background: var(--rcn-blue); transition: transform 0.2s ease, opacity 0.2s ease;
}
.rcn-nav-toggle[aria-expanded="true"] .rcn-nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.rcn-nav-toggle[aria-expanded="true"] .rcn-nav-toggle-bar:nth-child(2) { opacity: 0; }
.rcn-nav-toggle[aria-expanded="true"] .rcn-nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Discreet account control on the right of the header */
.rcn-account { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.rcn-account-name { color: var(--rcn-blue); font-weight: 600; text-decoration: none; }
.rcn-account-name:hover { color: var(--rcn-gold); }
.rcn-account-link { color: var(--rcn-text-muted, #6b7280); text-decoration: none; }
.rcn-account-link:hover { color: var(--rcn-gold); }

.rcn-main { flex: 1 1 auto; }

.rcn-hero {
    background: var(--rcn-blue);
    color: #fff;
    padding: 4rem 1.5rem;
    text-align: center;
}
.rcn-hero h1 { margin: 0 0 0.5rem; font-size: 2.4rem; }
.rcn-hero p { margin: 0; opacity: 0.9; }

#blazor-error-ui {
    background: #fff3cd;
    color: #1a1a1a;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui a { color: var(--rcn-blue); font-weight: 600; }

.rcn-page { max-width: 880px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.rcn-page h1 { color: var(--rcn-blue); margin-top: 0; }
.rcn-muted { color: #888; font-size: 0.95rem; }

/* Branded status pages (404, error, …) — centered card matching the invoice pages */
.rcn-status { display: flex; justify-content: center; padding: 3rem 1.5rem; }
.rcn-status-card {
    max-width: 520px;
    width: 100%;
    background: var(--rcn-surface);
    border-radius: 10px;
    padding: 2.75rem 2.25rem;
    text-align: center;
    box-shadow: 0 6px 24px rgba(12, 60, 124, 0.10);
    border: 1px solid #eef1f6;
}
.rcn-status-accent { border-top: 2px solid var(--rcn-gold); width: 48px; margin: 0 auto 1.5rem; }
.rcn-status-card h1 { color: var(--rcn-blue); font-size: 1.5rem; margin: 0 0 0.75rem; }
.rcn-status-card p { color: #777; font-size: 0.95rem; line-height: 1.7; margin: 0 0 1.75rem; }
.rcn-status-card .rcn-btn { margin-top: 0.25rem; }
.rcn-status-code { color: var(--rcn-gold); font-size: 2.75rem; font-weight: 800; line-height: 1; margin-bottom: 0.5rem; letter-spacing: 0.02em; }

.rcn-footer {
    padding: 1.25rem 1.5rem;
    background: var(--rcn-surface-alt);
    color: #555;
    font-size: 0.9rem;
    border-top: 1px solid #e3e8ef;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    justify-content: space-between;
}

.rcn-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.rcn-footer-legal a {
    color: #555;
    text-decoration: none;
}

.rcn-footer-legal a:hover {
    color: var(--rcn-blue);
    text-decoration: underline;
}

/* --- Legal pages (docs/specs/21-crm.md) --- */
.rcn-legal-body {
    max-width: 60rem;
    line-height: 1.65;
}

.rcn-legal-body h2 { margin-top: 1.75rem; }

/* Markdown lists — an explicit hanging indent. MudBlazor's site-wide reset (MudBlazor.min.css, loaded before
   brand.css) trims the browser's default list padding, leaving bullets almost flush with the body text; set it
   back deliberately. list-style stays outside so wrapped lines align under the text, not the marker. */
.rcn-legal-body ul, .rcn-legal-body ol,
.rcn-help-body ul, .rcn-help-body ol {
    padding-left: 1.75rem;
    margin: 0.75rem 0;
}
.rcn-legal-body li, .rcn-help-body li { margin: 0.3rem 0; }
.rcn-legal-body ul ul, .rcn-legal-body ol ol, .rcn-legal-body ul ol, .rcn-legal-body ol ul,
.rcn-help-body ul ul, .rcn-help-body ol ol, .rcn-help-body ul ol, .rcn-help-body ol ul { margin: 0.3rem 0; }

/* Blockquotes ( > … ) render as a highlighted callout — same as the in-app help body. Without this the legal
   body left them as unstyled, faintly-indented text that read as "not processed". */
.rcn-legal-body blockquote {
    margin: 1rem 0;
    padding: 0.6rem 1rem;
    border-left: 4px solid var(--rcn-gold);
    background: #fffaf0;
}
.rcn-legal-body blockquote > :first-child { margin-top: 0; }
.rcn-legal-body blockquote > :last-child { margin-bottom: 0; }

/* In-editor faithful preview panel (/admin/legal) — the public .rcn-legal look inside a bordered box */
.rcn-legal-editor-preview {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    background: #fff;
}
.rcn-legal-editor-preview h1 { color: var(--rcn-blue); margin-top: 0; }

/* Admin-only draft preview banner on the real legal route (?preview=draft) */
.rcn-legal-preview-banner {
    background: #fff8e1;
    border: 1px solid #f0d98c;
    border-left: 4px solid var(--rcn-gold);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: #5f4b0a;
}

/* --- In-app user manual (/admin/help, docs/manual/*.md) --- */
.rcn-help-body {
    max-width: 62rem;
    line-height: 1.65;
}

.rcn-help-body h1 { color: var(--rcn-blue); font-size: 1.75rem; margin: 0 0 1rem; }
.rcn-help-body h2 { color: var(--rcn-blue); margin-top: 2rem; border-bottom: 2px solid var(--rcn-gold); padding-bottom: 0.25rem; }
.rcn-help-body h3 { margin-top: 1.5rem; }
.rcn-help-body table { border-collapse: collapse; margin: 1rem 0; width: 100%; }
.rcn-help-body th, .rcn-help-body td { border: 1px solid #e3e8ef; padding: 0.45rem 0.75rem; text-align: left; vertical-align: top; }
.rcn-help-body th { background: #f5f8fc; }
/* Inline code sits mid-sentence, so it must not look shrunken. Naming a real monospace stack matters: with the
   bare generic `monospace` keyword browsers fall back to their monospace default size (~13px vs the document's
   16px), which — compounded by an em reduction — is what made `code` spans read as too small. 0.95em keeps the
   optically-larger monospace glyphs from crowding the line without shrinking them. */
.rcn-legal-body code, .rcn-help-body code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.95em;
    background: #f0f3f8;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.rcn-help-body pre { background: #0a2f61; color: #eef3fb; padding: 0.9rem 1.1rem; border-radius: 6px; overflow-x: auto; }
.rcn-legal-body pre code, .rcn-help-body pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }
.rcn-help-body blockquote { margin: 1rem 0; padding: 0.6rem 1rem; border-left: 4px solid var(--rcn-gold); background: #fffaf0; }
.rcn-help-body blockquote > :first-child { margin-top: 0; }
.rcn-help-body blockquote > :last-child { margin-bottom: 0; }

/* --- Preference center (docs/specs/21-crm.md) --- */
.rcn-pref-table {
    border-collapse: collapse;
    margin: 1.25rem 0;
}

.rcn-pref-table th, .rcn-pref-table td {
    border: 1px solid #e3e8ef;
    padding: 0.5rem 0.9rem;
    text-align: center;
}

.rcn-pref-table th:first-child, .rcn-pref-table td:first-child { text-align: left; }

.rcn-pref-cell { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.rcn-pref-ok { color: #1f7a3d; font-weight: 600; }

.rcn-btn-secondary {
    background: #fff;
    border: 1px solid var(--rcn-blue);
    color: var(--rcn-blue);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}

.rcn-btn-secondary:hover { background: var(--rcn-surface-alt); }

.rcn-btn-primary {
    background: var(--rcn-blue);
    border: 1px solid var(--rcn-blue);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    margin-right: 0.5rem;
}

.rcn-btn-primary:hover { filter: brightness(1.08); }

.rcn-btn-primary:disabled, .rcn-btn-secondary:disabled { opacity: 0.5; cursor: default; }

/* --- Photo galleries (docs/specs/07-photo-library.md) --- */

/* Album tiles on /galleries */
.rcn-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.rcn-album-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
    background: var(--rcn-surface);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.rcn-album-tile:hover {
    box-shadow: 0 6px 18px rgba(12, 60, 124, 0.15);
    transform: translateY(-2px);
}
.rcn-album-cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--rcn-surface-alt);
}
.rcn-album-cover--empty {
    background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 12px, #e3e8ef 12px, #e3e8ef 24px);
}
.rcn-album-meta { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.rcn-album-title { color: var(--rcn-blue); font-weight: 700; }
.rcn-album-date { color: #888; font-size: 0.85rem; }

/* Album header: subtitle + Markdown description */
.rcn-album-subtitle {
    font-size: 1.2rem;
    color: var(--rcn-blue-ink);
    margin: -0.25rem 0 0.5rem;
    font-weight: 600;
}
.rcn-album-description {
    margin: 0.75rem 0 0.5rem;
    line-height: 1.6;
}
.rcn-album-description > :first-child { margin-top: 0; }
.rcn-album-description > :last-child { margin-bottom: 0; }
.rcn-album-description h1,
.rcn-album-description h2,
.rcn-album-description h3 { color: var(--rcn-blue); }
.rcn-album-description a { color: var(--rcn-blue); }
.rcn-album-description img { max-width: 100%; height: auto; }

/* Thumbnail grid inside an album */
.rcn-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.rcn-gallery-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: var(--rcn-surface-alt);
}
.rcn-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.rcn-gallery-item:hover img { transform: scale(1.04); }
.rcn-gallery-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity 0.15s ease;
}
.rcn-gallery-item:hover .rcn-gallery-caption { opacity: 1; }

/* Events list */
.rcn-event-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.rcn-event-card {
    border: 1px solid #e3e8ef;
    border-left: 4px solid var(--rcn-gold);
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    background: var(--rcn-surface);
}
.rcn-event-card--past { border-left-color: #cbd3dd; opacity: 0.72; }
.rcn-event-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.rcn-event-title { color: var(--rcn-blue); margin: 0; font-size: 1.35rem; }
.rcn-event-subtitle { color: var(--rcn-blue-ink); font-weight: 600; margin: 0.15rem 0 0; }
.rcn-event-date { margin: 0.25rem 0 0; }
.rcn-event-description { margin: 0.6rem 0 0; line-height: 1.6; }
.rcn-event-description > :first-child { margin-top: 0; }
.rcn-event-description > :last-child { margin-bottom: 0; }
.rcn-event-description h1, .rcn-event-description h2, .rcn-event-description h3 { color: var(--rcn-blue); }
.rcn-event-description a { color: var(--rcn-blue); }
.rcn-event-description img { max-width: 100%; height: auto; }
.rcn-event-cta { display: flex; align-items: center; gap: 1rem; margin-top: 0.9rem; flex-wrap: wrap; }

.rcn-event-badge {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap;
}
/* Badge text colours darkened to clear WCAG AA (≥4.5:1) on their tints. */
.rcn-event-badge--open { background: #e6f4ea; color: #0f5f28; }
.rcn-event-badge--soon { background: #fff3cd; color: #6b5200; }
.rcn-event-badge--closed { background: #eef0f3; color: #4b5563; }

.rcn-btn {
    display: inline-block; background: var(--rcn-blue); color: #fff; text-decoration: none;
    font-weight: 600; padding: 0.5rem 1.1rem; border-radius: 6px;
}
.rcn-btn:hover { background: var(--rcn-blue-ink); }

/* --- Accessibility & robustness (public site) --- */
/* Visible keyboard-focus ring on the custom (non-MudBlazor) interactive elements.
   Offset places the blue ring on the white page, so it reads against any element
   fill (including the blue buttons). :focus-visible keeps it keyboard-only. */
.rcn-brand:focus-visible,
.rcn-nav a:focus-visible,
.rcn-account a:focus-visible,
.rcn-nav-toggle:focus-visible,
.rcn-btn:focus-visible,
.rcn-album-tile:focus-visible,
.rcn-gallery-item:focus-visible,
.rcn-page a:focus-visible {
    outline: 3px solid var(--rcn-blue);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Long unbroken strings (pasted URLs in Markdown descriptions, etc.) must not
   force horizontal scroll on a phone. break-word only kicks in when needed. */
.rcn-event-title, .rcn-album-title, .rcn-hero h1,
.rcn-event-description, .rcn-album-description { overflow-wrap: break-word; }

/* MudTable toolbars (the registrations grid, etc.) pack a search box, a status
   filter, an expand toggle and — once rows are selected — a whole row of bulk
   actions. MudBlazor's toolbar is a fixed-height, non-wrapping flex row, so they
   overflow / get cramped even on a desktop. Let the toolbar grow and wrap to
   multiple lines. Scoped to table toolbars only (app bars are untouched). */
.mud-table-toolbar {
    height: auto;
    min-height: var(--mud-internal-toolbar-height, 64px);
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Admin layout utilities — shared so wrapping is defined once instead of via
   per-element inline `display:flex`. All wrap, so rows of title+actions or
   multiple fields reflow on narrow screens (desktop unaffected when they fit). */
.rcn-adminhead { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rcn-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rcn-fieldrow { display: flex; gap: 1rem; flex-wrap: wrap; }
.rcn-fieldrow > .mud-input-control { flex: 1 1 12rem; }

/* === Generic responsive list: a table on wide screens, cards on phones ===
   Used via the <ResponsiveList> + <DataCard> components across the admin. */

/* Layout switch (toggled in the @media block below). */
.rcn-tbl-cards { display: none; }

.rcn-card { padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; }
.rcn-card-selectall { margin-bottom: 0.4rem; }
.rcn-card-head { display: flex; align-items: flex-start; gap: 0.4rem; }
.rcn-card-select { flex: 0 0 auto; margin-top: -0.15rem; }
.rcn-card-headmain {
    display: flex; flex: 1 1 auto; min-width: 0;
    justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.rcn-card-title { font-weight: 700; color: var(--rcn-blue); overflow-wrap: anywhere; }
.rcn-card-status { font-size: 0.8rem; font-weight: 600; color: #555; white-space: nowrap; }

/* --- Admin breadcrumb trail --- Ancestors are links (Rotary blue), the current page is plain.
   Wraps rather than overflowing on narrow screens; MudBreadcrumbs collapses the middle past MaxItems. */
.rcn-crumbs { margin-bottom: 0.5rem; font-size: 0.85rem; }
.rcn-crumbs ol { flex-wrap: wrap; }
.rcn-crumbs a { color: var(--rcn-blue); }
.rcn-crumbs .mud-breadcrumb-item.mud-disabled,
.rcn-crumbs li:last-child { color: #666; overflow-wrap: anywhere; }

/* --- Registration lifecycle indicator (Nouveau → Confirmé → Facturé → Payé) ---
   Segmented track + label. ~70px for 4 steps, so it is narrower than a chip and fits the
   card view on a phone. The label always stays: the pips are a scanning aid, not the message.
   A cancelled registration is rendered off-track (muted + struck), never as a position. */
.rcn-prog { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.rcn-prog-track { display: inline-flex; gap: 2px; flex: none; }
.rcn-prog-track i { display: block; width: 14px; height: 4px; border-radius: 2px; background: #e0e0e0; }
.rcn-prog-track i.done { background: var(--rcn-blue); }
.rcn-prog-track i.done.full { background: #2e7d32; }   /* fully paid / complete */
.rcn-prog-label { font-size: 0.85rem; }
.rcn-prog-off .rcn-prog-track i { background: #eee; }
.rcn-prog-off .rcn-prog-label { text-decoration: line-through; color: #999; }
.rcn-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.rcn-card-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; color: #666; font-size: 0.85rem; margin-top: 0.25rem; }
.rcn-card-body { margin-top: 0.4rem; font-size: 0.9rem; }
/* Long unbreakable values (SendGrid error JSON/URLs, message-ids, emails) must
   wrap inside the card instead of forcing it wider than the screen. overflow-wrap
   isn't inherited, so it's applied to the card and its descendants. */
.rcn-card, .rcn-card * { overflow-wrap: anywhere; }
.rcn-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.4rem; }
.rcn-card-detail { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eef1f5; }
/* Optional slots collapse when their (conditional) content renders nothing. */
.rcn-card-select:empty, .rcn-card-meta:empty, .rcn-card-body:empty, .rcn-card-detail:empty { display: none; }

/* --- Registrations grid: bespoke toolbar (search + filter + selection bar) --- */
.rcn-reg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rcn-search { position: relative; display: inline-flex; }
.rcn-search-popup {
    position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 0.25rem;
    width: 22rem; max-width: calc(100vw - 2rem);
}
.rcn-selbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    background: var(--rcn-surface-alt); border: 1px solid #e3e8ef;
}
/* FilterButton: the checklist floats below its button. */
.rcn-filter { position: relative; display: inline-flex; }
.rcn-filter-panel {
    position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 0.25rem;
    min-width: 15rem; max-width: calc(100vw - 2rem);
}

/* --- Internal admin notes (NotesPanel) --- */
.rcn-notes { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed #d9dee5; }
.rcn-notes-head { display: block; color: var(--rcn-blue-ink); margin-bottom: 0.25rem; }
.rcn-note {
    background: var(--rcn-surface-alt); border: 1px solid #e3e8ef; border-radius: 6px;
    padding: 0.4rem 0.6rem; margin-bottom: 0.35rem;
}
.rcn-note-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; }
.rcn-note-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: #888; font-size: 0.78rem; margin-top: 0.15rem; }
.rcn-note-buttons { display: flex; gap: 0.1rem; flex-shrink: 0; }
.rcn-note-actions { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.rcn-note-add { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.4rem; }
.rcn-note-add > .mud-input-control { flex: 1 1 auto; }
/* In the dialog the panel is the whole content — drop its inline separator. */
.rcn-notes-dialog .rcn-notes { margin-top: 0; padding-top: 0; border-top: none; }
.rcn-notes-dialog .rcn-notes-head { display: none; }   /* the dialog title already names it */

/* ============================================================
   Responsive — phones & small tablets (see docs/specs/09-branding.md)
   ============================================================ */
@media (max-width: 720px) {
    /* Header collapses to logo + hamburger; nav/account drop into a panel. */
    .rcn-header { padding: 0.6rem 1rem; flex-wrap: nowrap; }
    .rcn-logo { height: 40px; }
    .rcn-nav-toggle { display: flex; }

    .rcn-header-right {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
        display: none;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 0.5rem 0 0.75rem;
        background: var(--rcn-surface);
        border-bottom: 3px solid var(--rcn-gold);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }
    .rcn-header-right.open { display: flex; }

    .rcn-nav { flex-direction: column; gap: 0; width: 100%; }
    .rcn-nav a { padding: 0.7rem 1.25rem; border-top: 1px solid #eef1f5; }

    .rcn-account {
        flex-direction: column; align-items: stretch; gap: 0;
        font-size: 0.95rem; border-top: 1px solid #eef1f5; margin-top: 0.25rem;
    }
    .rcn-account-name, .rcn-account-link { padding: 0.7rem 1.25rem; }

    /* On DEV, match the panel underline to the red marker. */
    .rcn-env-dev .rcn-header-right { border-bottom-color: #b91c1c; }

    /* Public content breathes a bit tighter on phones. */
    .rcn-hero { padding: 2.5rem 1.25rem; }
    .rcn-hero h1 { font-size: 1.8rem; }
    .rcn-page { padding: 1.75rem 1.25rem; }

    /* (Admin title/action & field rows now use the .rcn-adminhead/.rcn-actions/
       .rcn-fieldrow utilities, which wrap intrinsically — no inline-style hack.) */

    /* Registrations grid: show the search icon, collapse the field until tapped
       (then it drops to its own full-width line), and swap the table for cards. */
    .rcn-tbl-wide { display: none; }
    .rcn-tbl-cards { display: block; }

    /* MudTable mobile (stacked-card) layout: long values — email addresses,
       SendGrid message-ids, cc/bcc lists on the email log — must wrap instead
       of forcing the card wider than the screen (horizontal scroll). The cells
       are flex with the label as ::before; give the value room to shrink/break.
       overflow-wrap isn't inherited, so it's set on the cell and its children. */
    .mud-xs-table .mud-table-cell { min-width: 0; overflow-wrap: anywhere; }
    .mud-xs-table .mud-table-cell > * { min-width: 0; overflow-wrap: anywhere; }
}

/* Monaco hosts (MonacoHost.razor) — every admin editor uses this one box.
   The host is positioned + clipping and the BlazorMonaco element is PINNED inside it. That pin is the load-
   bearing part: Monaco's view is built from absolutely-positioned layers, so it must resolve against this box.
   If it resolved against an ancestor further up (which is what happens when Monaco's own stylesheet is late or
   was pruned from <head> — see js/monaco-loader.js) the editor paints its raw lines across the whole page,
   over the surrounding UI. Pinned, the worst case is an unstyled editor inside its own frame.
   Monaco also measures its container, so it needs a real height rather than an auto-collapsing one. */
.rcn-monaco-host { position: relative; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden; }
.rcn-monaco-host > .rcn-monaco { position: absolute; inset: 0; }
.rcn-monaco { height: 100%; width: 100%; display: block; }
.rcn-monaco-loading { display: flex; align-items: center; gap: .5rem; padding: .75rem; font-size: 12px; }

/* Rendered-Markdown preview in the note / custom-email editors (MarkdownFieldEditor). */
.rcn-md-preview p { margin: 0 0 8px; } .rcn-md-preview p:last-child { margin-bottom: 0; }
.rcn-md-preview ul, .rcn-md-preview ol { margin: 0 0 8px; padding-left: 20px; }
.rcn-md-preview a { color: var(--rcn-blue); }

/* --- Event-day door console (/event-day/{slug}) — docs/specs/30-event-day-console.md ---
   Plain HTML, no component library: this surface is WebAssembly and every kilobyte is downloaded once over a
   venue's network. Sized for a phone held in one hand — large tap targets, one column, no horizontal scroll. */
.rcn-door { max-width: 640px; margin: 0 auto; padding: 8px 10px 32px; font-family: var(--rcn-font); }
.rcn-door-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rcn-door-head h1 { font-size: 1.15rem; color: var(--rcn-blue); margin: 0; }
.rcn-door-sub { margin: 2px 0 0; font-size: .78rem; color: #6b6b6b; }
.rcn-door-pending { color: #b26a00; }
.rcn-door-loading, .rcn-door-empty { color: #6b6b6b; padding: 16px 2px; }

.rcn-door-icon {
    border: 1px solid rgba(0,0,0,.15); background: #fff; color: var(--rcn-blue);
    border-radius: 8px; font-size: 1.2rem; line-height: 1; padding: 8px 12px; cursor: pointer;
}
.rcn-door-icon:disabled { opacity: .5; }

.rcn-door-banner { border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: .85rem; }
.rcn-door-banner.is-offline { background: #fff4e0; border: 1px solid #f0c47a; color: #7a4a00; }
.rcn-door-banner.is-error { background: #fdecea; border: 1px solid #f5b1ab; color: #8a1c12; }
.rcn-door-banner.is-arm { background: #eef3fb; border: 1px solid #b9cbe8; color: #0a2f61; }
.rcn-door-arm {
    margin-top: 8px; border: none; background: var(--rcn-blue); color: #fff;
    border-radius: 8px; padding: 10px 14px; font-size: .85rem; font-family: inherit; cursor: pointer;
}
.rcn-door-arm:disabled { opacity: .55; cursor: default; }
.rcn-door-armed { font-size: .75rem; color: #6b6b6b; margin: 0 0 10px; }

.rcn-door-search {
    width: 100%; box-sizing: border-box; margin: 8px 0 6px;
    padding: 12px; font-size: 1rem; font-family: inherit;
    border: 1px solid rgba(0,0,0,.2); border-radius: 8px;
}

.rcn-door-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rcn-door-chip {
    border: 1px solid var(--rcn-blue); background: #fff; color: var(--rcn-blue);
    border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-family: inherit; cursor: pointer;
}
.rcn-door-chip.is-on { background: var(--rcn-blue); color: #fff; }

.rcn-door-list { list-style: none; margin: 0; padding: 0; }
.rcn-door-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 2px; border-bottom: 1px solid rgba(0,0,0,.08);
    min-height: 52px;   /* comfortable thumb target */
}
.rcn-door-row.is-in .rcn-door-name > span:first-child { color: #6b6b6b; }
.rcn-door-check { width: 26px; height: 26px; flex: 0 0 auto; accent-color: #2e7d32; }
.rcn-door-who { min-width: 0; flex: 1; }
.rcn-door-name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rcn-door-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .78rem; color: #6b6b6b; }
.rcn-door-at { color: #2e7d32; }

/* The payment flag: a shape, not a colour — still a dot in greyscale, so meaning never depends on hue.
   Its wording lives in aria-label/title and on tap; it is deliberately never printed beside the name,
   because the guest is standing close enough to read the screen. docs/30 §9.1–9.2. */
.rcn-door-flag {
    width: 10px; height: 10px; padding: 0; flex: 0 0 auto;
    border: none; border-radius: 50%;
    background: var(--rcn-gold);
    cursor: pointer;
}
.rcn-door-flag--legend { display: inline-block; vertical-align: middle; margin-right: 4px; cursor: default; }

.rcn-door-foot { margin-top: 20px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 12px; }
.rcn-door-legend { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: #6b6b6b; margin: 0 0 10px; }
.rcn-door-wipe {
    border: 1px solid rgba(0,0,0,.2); background: #fff; color: #8a1c12;
    border-radius: 8px; padding: 8px 12px; font-size: .8rem; font-family: inherit; cursor: pointer;
}

/* Confirmation sheet for un-checking someone in — a rare correction that discards a recorded arrival
   time, so it asks. Bottom-anchored: reachable with a thumb on a phone held one-handed. */
.rcn-door-sheet {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,.45);
    display: flex; align-items: flex-end; justify-content: center;
}
.rcn-door-sheet-card {
    background: #fff; border-radius: 14px 14px 0 0;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    width: 100%; max-width: 640px;
}
.rcn-door-sheet-card h2 { margin: 0 0 6px; font-size: 1.05rem; color: var(--rcn-blue); }
.rcn-door-sheet-card p { margin: 0 0 16px; font-size: .9rem; color: #444; }
.rcn-door-sheet-actions { display: flex; gap: 10px; }
.rcn-door-sheet-actions button {
    flex: 1; border-radius: 10px; padding: 14px 12px;
    font-size: .9rem; font-family: inherit; cursor: pointer;
}
.rcn-door-sheet-cancel { border: 1px solid rgba(0,0,0,.25); background: #fff; color: #333; }
.rcn-door-sheet-actions button:disabled { opacity: .55; cursor: default; }
.rcn-door-warn { background: #fff4e0; border: 1px solid #f0c47a; color: #7a4a00; border-radius: 8px; padding: 8px 10px; }
.rcn-door-sheet-ok { border: none; background: #8a1c12; color: #fff; }

/* Reseating sheet: table targets as full-width tap rows, and the inline table chip that opens it. */
.rcn-door-table {
    border: 1px dashed rgba(12,60,124,.45); background: transparent; color: var(--rcn-blue);
    border-radius: 6px; padding: 1px 6px; font: inherit; font-size: .78rem; cursor: pointer;
}
.rcn-door-targets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 45vh; overflow-y: auto; }
.rcn-door-target {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid rgba(0,0,0,.2); background: #fff; color: #222;
    border-radius: 8px; padding: 12px; font: inherit; font-size: .9rem; cursor: pointer; text-align: left;
}
.rcn-door-target span { color: #6b6b6b; font-size: .78rem; }
.rcn-door-target.is-detach { color: #8a1c12; }
.rcn-door-target:disabled { opacity: .55; cursor: default; }
.rcn-door-walkin { display: inline-block; margin-bottom: 10px; color: var(--rcn-blue); font-size: .8rem; }

.rcn-door-toast {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    background: var(--rcn-blue); color: #fff; border-radius: 8px;
    padding: 10px 16px; font-size: .85rem; max-width: 90vw; cursor: pointer; z-index: 50;
}