/* ============================================================
   TavernBoard base — DEV-82 foundation.
   Locked palette from design-previews/design-system.md §2.
   Single theme (no light/dark modes). Dark-valued by design.
   ============================================================ */
:root {
    /* Stone / structure */
    --stone-base: #1a1815;       /* stone wall base */
    --stone-mortar: #0a0808;     /* mortar between stones */
    --beam-wood: #3a2818;        /* top/bottom timber beams */
    --beam-grain: #4a3220;       /* wood grain highlight on beams */
    --board-wood: #4a3220;       /* noticeboard surface */
    --board-grain: #553820;      /* wood grain highlight */
    --board-frame: #2a1d12;      /* inset wooden frame */
    --iron: #2a2520;             /* iron mounting brackets */
    --candlelight: rgba(255, 200, 110, 0.45); /* warm upper-corner pools */

    /* Parchment / ink (card surfaces) */
    --parchment: #f4e8d0;
    --ink-primary: #1a1208;
    --ink-secondary: #6a5236;
    --ink-muted: #8a7556;

    /* Brass accent family */
    --brass: #c9a961;
    --brass-highlight: #f0d080;
    --brass-shadow: #6a4a1c;
    --brass-on-parchment: #8b6a2a;

    /* Status / text on stone */
    --crimson: #8b2635;
    --verified-green: #2e5a3a;
    --text-on-stone: #ede0c4;
    --text-muted-on-stone: #a89878;

    /* Fonts */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body {
    margin: 0;
    font-family: var(--font-ui);
    background-color: var(--stone-base);
    color: var(--text-on-stone);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

h1:focus {
    outline: none;
}

a {
    color: var(--brass);
}

a:hover {
    color: var(--brass-highlight);
}

code {
    font-family: 'Cascadia Code', Consolas, monospace;
    color: var(--brass-highlight);
}

/* Form validation (functional — keep) */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--verified-green);
}

.invalid {
    outline: 1px solid var(--crimson);
}

.validation-message {
    color: var(--crimson);
}

/* Blazor's last-resort error bar (DEV-145) — shown when the framework itself
   can't render, so it's raw HTML outside Blazor and must be styled by CSS
   alone. Reskinned to the tavern family: dark beam-wood bar, brass top edge,
   parchment text. (The component-level <ErrorRoom> handles graceful 500s.) */
#blazor-error-ui {
    color-scheme: dark only;
    background: linear-gradient(180deg, #2a1d12 0%, #1a1208 100%);
    color: var(--text-on-stone);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 0.8125rem;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(201, 169, 97, 0.4);
    border-top: 1px solid rgba(201, 169, 97, 0.5);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .reload {
        color: var(--brass);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        color: var(--text-muted-on-stone);
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: var(--crimson);
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

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

/* Boot loader */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--board-frame);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brass);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    color: var(--text-on-stone);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* ============================================================
   DEV-82 · App-shell — "the room" (design-system §1 / §4 / §5.11 / §11.1).
   Persistent chrome wrapping authenticated pages (Layout/AppShell.razor).
   Textures: wwwroot/textures (Polyhaven CC0). MudTheme stays chrome-only —
   the stone/wood/candlelight world lives here + in the AppShell component.
   ============================================================ */

/* Let the fixed room show through MudBlazor's layout surfaces. */
.mud-layout {
    background: transparent;
}

.room-content.mud-main-content {
    position: relative;
    z-index: 3;
    background: transparent;
    /* top clears the 72px timber app-bar; bottom clears the 44px floor beam */
    padding: 96px 48px 64px;
    min-height: 100vh;
}

/* ============================================================
   DEV-85 · Shared responsive lever — shell padding.
   The 48px side padding on <main> is inherited by every page and is
   the dominant horizontal-space constraint on phones (see memory
   mobile-padding-root-cause): a 375px screen kept only ~150px of
   leaf width. Shrink it at the shared chrome level so every leaf
   regains width without per-page hacks.
   ============================================================ */
@media (max-width: 900px) {
    .room-content.mud-main-content { padding-left: 28px; padding-right: 28px; }
    .room-beam--top .mud-toolbar { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 600px) {
    .room-content.mud-main-content { padding: 96px 12px 56px; }
    .room-beam--top .mud-toolbar { padding-left: 14px; padding-right: 14px; }
}

/* ---- Fixed room backdrop: stone wall + candlelight + vignette ---- */
.room-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.room-stone {
    position: absolute;
    inset: 0;
    background-image: url('../textures/stone-wall.jpg');
    background-size: 850px;
    background-position: center;
    /* §4 stone filter */
    filter: brightness(0.6) saturate(0.85) sepia(0.18) hue-rotate(-8deg) contrast(1.05);
}

/* §4 two candlelight pools at the upper corners.
   DEV-172: eased from 0.45/0.40 to 0.36/0.32. The pools light the top of the wall
   — exactly where the page copy sits (the hero) — while the vignette darkens the
   bottom, so the lightest patch of stone sat behind the lightest text and washed
   it out. Turning the lamps down lifts contrast at the top of every stone page
   without laying any shadow or scrim over the wall. */
.room-candlelight {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 40% at 18% 8%, rgba(255, 195, 100, 0.36), transparent 60%),
        radial-gradient(ellipse 45% 40% at 82% 8%, rgba(255, 195, 100, 0.32), transparent 60%);
}

/* §4 bottom vignette — darkens the lower page for depth */
.room-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 45% at 50% 100%, rgba(0, 0, 0, 0.60), transparent 65%);
}

/* ---- Timber beams: top app-bar + bottom floor frame ---- */
/* Textured + filtered layer lives on ::before so the filter never touches
   the brand/nav text rendered on the beam. */
.room-beam::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../textures/noticeboard-wood.jpg');
    background-size: 600px auto;
    background-repeat: repeat-x;
    background-position: center;
    filter: brightness(0.55) saturate(1.15) contrast(1.1);
    z-index: 0;
}

/* Top beam = MudAppBar (fixed, 72px) */
.room-beam--top.mud-appbar {
    background: transparent !important;
    box-shadow:
        inset 0 -4px 8px rgba(0, 0, 0, 0.75),
        inset 0 3px 5px rgba(255, 200, 120, 0.20),
        0 2px 6px rgba(0, 0, 0, 0.60);
    border-bottom: 1px solid rgba(0, 0, 0, 0.70);
    overflow: hidden;
}

.room-beam--top .mud-toolbar {
    position: relative;
    z-index: 1;
    height: 72px;
    padding-left: 46px;
    padding-right: 46px;
}

/* Bottom beam = slim floor frame (fixed) */
.room-beam--bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    z-index: 1200;
    overflow: hidden;
    pointer-events: none;
    border-top: 1px solid rgba(0, 0, 0, 0.70);
    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.75),
        inset 0 -3px 5px rgba(255, 200, 120, 0.18),
        0 -2px 6px rgba(0, 0, 0, 0.60);
}

/* Iron mounting brackets on the beams */
.beam-bracket {
    position: absolute;
    width: 24px;
    height: 28px;
    background: linear-gradient(180deg, #4a4540 0%, #1a1612 50%, #2a2520 100%);
    border-radius: 2px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.80),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    z-index: 2;
}

    .beam-bracket::before,
    .beam-bracket::after {
        content: '';
        position: absolute;
        width: 5px;
        height: 5px;
        left: 50%;
        transform: translateX(-50%);
        background: radial-gradient(circle, #1a1612 0%, #000 70%);
        border-radius: 50%;
        box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.30);
    }

    .beam-bracket::before { top: 5px; }
    .beam-bracket::after { bottom: 5px; }

.room-beam--top .beam-bracket {
    top: 50%;
    margin-top: -14px;
}

.room-beam--top .beam-bracket--l { left: 12px; }
.room-beam--top .beam-bracket--r { right: 12px; }
.room-beam--bottom .beam-bracket { top: 8px; }
.room-beam--bottom .beam-bracket--l { left: 18px; }
.room-beam--bottom .beam-bracket--r { right: 18px; }

/* ---- Brand mark (top-left, §5.11) ---- */
.room-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.room-brand__glyph {
    width: 24px;
    height: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.40));
}

.room-brand__text {
    line-height: 1.05;
}

.room-brand__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.005em;
    color: var(--text-on-stone);
}

.room-brand__tag {
    font-family: var(--font-ui);
    font-size: 9px;
    letter-spacing: 0.22em;
    margin-top: 4px;
    font-weight: 500;
    /* contrast pass: lifted from #a89878 muted to a brighter cast for legibility on the dark beam */
    color: #c3b390;
}

/* ---- Nav links (§5.11) ---- */
.room-nav {
    display: flex;
    gap: 24px;
    font-family: var(--font-ui);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
}

.room-nav__link {
    color: var(--text-on-stone);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .room-nav__link:hover {
        color: var(--brass-highlight);
    }

    .room-nav__link.active {
        border-bottom-color: currentColor;
    }

/* ============================================================
   Bottom tab bar — mobile primary nav (DEV-85).
   Hidden on desktop. On narrow viewports it replaces the top nav
   links and the decorative floor beam, becoming the timber floor
   that seats the role-gated destinations as thumb-friendly tabs.
   ============================================================ */
.room-tabbar { display: none; }

.room-tab {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 7px 2px 5px;
    text-decoration: none;
    color: var(--text-muted-on-stone);
    z-index: 1;
}
.room-tab__ico {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.room-tab__label {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px; letter-spacing: 0.08em; font-weight: 600;
    text-transform: uppercase;
}
.room-tab:hover { color: var(--text-on-stone); }
.room-tab.active { color: var(--brass-highlight); }
.room-tab.active::after {
    content: '';
    position: absolute; top: 0; left: 24%; right: 24%; height: 2px;
    background: var(--brass); border-radius: 0 0 2px 2px;
}

@media (max-width: 600px) {
    .room-nav { display: none; }
    .room-beam--bottom { display: none; }
    .room-user__greeting { display: none; }

    .room-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1300;
        display: flex;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: hidden;
        border-top: 1px solid rgba(0, 0, 0, 0.7);
        box-shadow:
            inset 0 4px 8px rgba(0, 0, 0, 0.55),
            inset 0 2px 0 rgba(255, 200, 120, 0.12),
            0 -2px 6px rgba(0, 0, 0, 0.6);
    }
    .room-tabbar::before {
        content: '';
        position: absolute; inset: 0; z-index: 0;
        background-image: url('../textures/noticeboard-wood.jpg');
        background-size: 600px auto; background-repeat: repeat-x; background-position: center;
        filter: brightness(0.5) saturate(1.15) contrast(1.1);
    }

    .room-content.mud-main-content { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Profile trigger (top-right, §5.11) ---- */
.room-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 22px;
    margin-left: 6px;
    border-left: 1px solid rgba(232, 220, 196, 0.18);
    cursor: pointer;
}

.room-user__greeting {
    text-align: right;
    line-height: 1.1;
}

.room-user__name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--text-on-stone);
    display: block;
}

.room-user__tag {
    font-family: var(--font-ui);
    font-size: 7.5px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--brass);
    font-weight: 700;
    margin-top: 2px;
    display: block;
}

.room-user__caret {
    color: var(--brass);
    font-size: 10px;
    margin-left: -2px;
}

/* ---- Notification bell badge: locked to crimson (§2), not MudBlazor's
   brighter default red ---- */
.notif-badge .mud-badge {
    background-color: var(--crimson) !important;
    color: var(--text-on-stone) !important;
    font-weight: 700;
}

/* ============================================================
   QUEST-ROLL SCROLL form scaffolding (DEV-84 · design-system §12.9)
   Shared by the Campaign Create wizard steps + the Edit single-sheet. Namespaced under
   .quest-form so the generic class names never collide with Discover / Landing / Hub.
   Self-contained widgets (PillGroup / Stepper / Toggle / SealTray / StepMedallion / scroll
   frame) live in their own scoped .razor.css; this block is only the parchment-native
   typography + layout scaffolding plus theming for the few MudBlazor pickers kept on parchment.
   ============================================================ */
.quest-form .form-section { margin-bottom: 14px; }

.quest-form .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.quest-form .form-field { flex: 1; min-width: 140px; }
.quest-form .form-field.short { flex: 0 0 120px; min-width: 0; }
.quest-form .form-field.med   { flex: 0 0 180px; min-width: 0; }
.quest-form .form-field.wide  { flex: 1.6; }

.quest-form .form-label {
    display: block;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted);
    margin-bottom: 5px;
}

.quest-form .form-label .req { color: var(--crimson); margin-left: 3px; font-weight: 700; }

.quest-form .form-label .opt {
    color: var(--ink-muted);
    margin-left: 6px;
    font-weight: 500;
    letter-spacing: 0.16em;
    opacity: 0.8;
    text-transform: none;
    font-style: italic;
}

.quest-form .form-label .opt-strong {
    font-style: normal;
    color: var(--brass-on-parchment);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 8.5px;
}

.quest-form .form-input {
    display: block;
    width: 100%;
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 17px;
    color: var(--ink-primary);
    line-height: 1.3;
    outline: none;
}

.quest-form .form-input:focus { border-bottom-color: var(--brass-on-parchment); }
.quest-form .form-input::placeholder { color: var(--ink-muted); opacity: 0.6; }

/* Native select styled as a parchment underline field (Language picker, DEV-161). */
.quest-form .form-select {
    display: block;
    width: 100%;
    padding: 6px 22px 6px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 17px;
    color: var(--ink-primary);
    line-height: 1.3;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238a7556' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1px center;
    background-size: 9px;
}
.quest-form .form-select:focus { border-bottom-color: var(--brass-on-parchment); }
.quest-form .form-input.title { font-size: 22px; font-weight: 500; }
.quest-form .form-input.tagline { font-style: italic; font-size: 14px; color: var(--ink-secondary); }
.quest-form .form-input.compact {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-primary);
    padding: 5px 0;
}

.quest-form .form-textarea {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 8px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--ink-primary);
    line-height: 1.55;
    outline: none;
    resize: vertical;
}

.quest-form .form-textarea:focus { border-bottom-color: var(--brass-on-parchment); }

.quest-form .char-counter {
    text-align: right;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted);
    margin-top: 3px;
}

.quest-form .field-error {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--crimson);
    margin-top: 4px;
}

.quest-form .form-hint {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-secondary);
}

/* Section headings (Edit single-sheet) */
.quest-form .section-heading {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink-secondary);
    margin: 0 0 10px;
    line-height: 1;
}

.quest-form .section-heading::before {
    content: '— ';
    color: var(--brass-on-parchment);
    font-style: normal;
    font-weight: 600;
}

.quest-form .section-divider {
    border: 0;
    border-top: 1px solid rgba(106, 74, 28, 0.20);
    margin: 16px 0 14px;
}

/* Steward's note — dashed parchment-inset hint (decorative) */
.quest-form .steward-note {
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px dashed rgba(106, 74, 28, 0.30);
    border-radius: 1px;
    background: rgba(232, 216, 184, 0.32);
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-secondary);
    line-height: 1.5;
}

.quest-form .steward-note strong {
    display: block;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 8.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

/* ---- Theming for the MudBlazor pickers kept on parchment (date/time/select/autocomplete).
   Only the on-parchment input is restyled; popovers keep the dark app theme. ---- */
.quest-form .mud-input-slot,
.quest-form .mud-input-slot input,
.quest-form .mud-select .mud-input-slot,
.quest-form .mud-autocomplete .mud-input-slot {
    color: var(--ink-primary) !important;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px;
}

.quest-form .mud-input-label,
.quest-form .mud-input-label-inputcontrol {
    color: var(--ink-muted) !important;
    font-family: var(--font-ui), 'Inter', sans-serif;
}

.quest-form .mud-input.mud-input-text .mud-input-slot::before,
.quest-form .mud-input-underline::before { border-bottom-color: rgba(106, 74, 28, 0.45) !important; }
.quest-form .mud-input-underline::after { border-bottom-color: var(--brass-on-parchment) !important; }

.quest-form .mud-input-adornment,
.quest-form .mud-input .mud-icon-root,
.quest-form .mud-select .mud-icon-root { color: var(--ink-muted) !important; }

/* ============================================================
   Campaign Create/Edit page hero scaffolding (DEV-84 · §12.3)
   Shared by the Create wizard and the Edit single-sheet. Namespaced under .cc-page so the generic
   names (.hero/.eyebrow/.hero-headline) don't collide with Discover/Landing scoped styles.
   ============================================================ */
.cc-page {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 12px;
}

.cc-page .hero { margin-bottom: 20px; }

.cc-page .eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted-on-stone, #a89878);
    margin-bottom: 10px;
}

.cc-page .eyebrow::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 12px;
}

.cc-page .hero-headline {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 1;
    margin: 0;
    color: #f0e6d0;
}

.cc-page .hero-headline .italic {
    font-style: italic;
    color: var(--brass, #d6b770);
    display: block;
}

.cc-page .hero-sub {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 10px;
    max-width: 520px;
    color: #b8a888;
}

@media (max-width: 600px) {
    .cc-page .hero-headline { font-size: 36px; }
}

/* ============================================================
   THE BANDED TAVERN LOGBOOK — list-page leaf (DEV-143 · design-system §15)
   Shared scaffolding for /campaigns (GM), /parties (player), /requests (split-pane).
   Namespaced under .lb-page so the generic ledger class names never collide with
   Discover / Hub / Profile scoped styles. The parchment leaf is pinned to the
   <NoticeBoard> wood (same surface as Discover §5.9); WaxSeal + RomanNumeral are reused.
   ============================================================ */
.lb-page {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 8px;
}

/* ---- The parchment leaf (§15.1) — 4 brass tacks + crimson binding margin + curl ---- */
.lb-page .lb-leaf {
    position: relative;
    z-index: 2;
    padding: 22px 32px 14px 90px;   /* extra left for the binding-margin gutter (§15.3) */
    border-radius: 2px;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px,
            rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
}

/* paper-curl on the lower-right corner */
.lb-page .lb-leaf::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
}

/* Brass tacks — 4 corners (§11.12 vocabulary) */
.lb-page .lb-tack {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 4;
}

.lb-page .lb-tack.tl { top: 10px; left: 18px; }
.lb-page .lb-tack.tr { top: 10px; right: 18px; }
.lb-page .lb-tack.bl { bottom: 10px; left: 18px; }
.lb-page .lb-tack.br { bottom: 10px; right: 18px; }

/* Crimson binding rule (§15.3) — decorative ornament, NOT a destructive-action signal. */
.lb-page .lb-binding {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 56px;
    width: 2px;
    background: rgba(139, 38, 53, 0.35);
    box-shadow: 0 0 1px rgba(139, 38, 53, 0.4);
    z-index: 3;
}

.lb-page .lb-binding::before,
.lb-page .lb-binding::after {
    content: '';
    position: absolute;
    left: -3px;
    width: 8px;
    height: 2px;
    background: rgba(139, 38, 53, 0.35);
}

.lb-page .lb-binding::before { top: 22px; }
.lb-page .lb-binding::after { bottom: 14px; }

/* ---- Leaf header — title block (left) + stats + CTA (right) ---- */
.lb-page .lb-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid rgba(106, 74, 28, 0.30);
}

.lb-page .lb-title-block { min-width: 0; }

.lb-page .lb-eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.lb-page .lb-title {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.05;
    color: var(--ink-primary);
    margin: 0;
}

.lb-page .lb-sub {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--brass-on-parchment);
    margin-top: 4px;
}

.lb-page .lb-header-right {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding-bottom: 2px;
}

.lb-page .lb-stats { display: flex; gap: 22px; }
.lb-page .lb-stat { text-align: center; }

.lb-page .lb-stat .num {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    color: var(--brass-on-parchment);
}

.lb-page .lb-stat .lbl {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* Brass-bordered CTA (§5.8 .btn-dark). Explicit reset — no shared <button> reset, no font: shorthand. */
.lb-page .lb-cta {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.14s ease, color 0.14s ease;
}

.lb-page .lb-cta:hover {
    color: var(--brass-highlight);
    border-color: rgba(201, 169, 97, 0.8);
}

/* ---- Section rule (§15) — italic Cormorant label centered between hairline rules ---- */
.lb-page .lb-sec-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 4px;
}

.lb-page .lb-sec-rule .line { flex: 1; height: 1px; background: rgba(106, 74, 28, 0.25); }

.lb-page .lb-sec-rule .lbl {
    flex-shrink: 0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    font-weight: 500;
    color: var(--brass-on-parchment);
}

/* ---- Ledger — banded rows with Roman-numeral indices in the binding gutter ---- */
.lb-page .lb-ledger { display: flex; flex-direction: column; margin-top: 2px; }

.lb-page .lb-row {
    position: relative;
    display: grid;
    grid-template-columns: 26px 100px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 9px 4px 9px 0;
}

.lb-page .lb-row:nth-child(odd) { background: rgba(106, 74, 28, 0.04); }

.lb-page .lb-row::before {
    content: '';
    position: absolute;
    left: -34px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(106, 74, 28, 0.14);
}

/* Roman-numeral row index (ornament only — §15.4) */
.lb-page .lb-roman {
    position: absolute;
    left: -62px;
    width: 32px;
    text-align: center;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-muted);
}

.lb-page .lb-qst {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.45;
}

.lb-page .lb-qst .num { display: block; color: var(--ink-secondary); }
.lb-page .lb-qst .when { display: block; font-weight: 500; opacity: 0.85; }

.lb-page .lb-body { min-width: 0; }

.lb-page .lb-body .title {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    color: var(--ink-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-page .lb-body .meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    overflow: hidden;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.lb-page .lb-body .meta em {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brass-on-parchment);
}

/* Status stamps (§5.4 vocabulary, parchment-toned) — logbook palette per DEV-143 AC:
   open/active = green · filling = rust · closed = muted. */
.lb-page .lb-stamp {
    flex-shrink: 0;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 800;
    font-size: 8px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 2px 7px;
    color: #6a4a1c;
    border: 1px solid rgba(106, 74, 28, 0.55);
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(-2deg);
    filter: blur(0.15px);
}

.lb-page .lb-stamp.open    { color: #3a6a4a; border-color: rgba(58, 106, 74, 0.65); }
.lb-page .lb-stamp.filling { color: #8b3a1c; border-color: rgba(139, 58, 28, 0.55); }
.lb-page .lb-stamp.closed  { color: var(--ink-muted); border-color: rgba(106, 74, 28, 0.4); }
/* My Parties (§15.5.2) — membership state */
.lb-page .lb-stamp.active  { color: #3a6a4a; border-color: rgba(58, 106, 74, 0.65); }
.lb-page .lb-stamp.past    { color: var(--ink-muted); border-color: rgba(106, 74, 28, 0.4); }

/* Inline action icons. Explicit reset — no shared <button> reset, no font: shorthand. */
.lb-page .lb-actions { display: flex; gap: 4px; }

.lb-page .lb-ico {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid rgba(106, 74, 28, 0.32);
    border-radius: 2px;
    color: var(--ink-secondary);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.lb-page .lb-ico:hover {
    background: rgba(106, 74, 28, 0.10);
    border-color: rgba(106, 74, 28, 0.6);
}

.lb-page .lb-ico.crimson { color: var(--crimson); border-color: rgba(139, 38, 53, 0.45); }
.lb-page .lb-ico.crimson:hover { background: rgba(139, 38, 53, 0.08); border-color: rgba(139, 38, 53, 0.7); }

/* Pending-count deep-link → that campaign's received requests (DEV-130). */
.lb-page .lb-pending-link {
    color: var(--brass-on-parchment);
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 106, 42, 0.4);
}
.lb-page .lb-pending-link:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* ---- Leaf footer (§14.11) — "more on the next page" line + pager ---- */
.lb-page .lb-footer {
    margin-top: 12px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.lb-page .lb-footer .more {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--ink-muted);
}

/* ---- Empty / loading states (§15.7) ---- */
.lb-page .lb-state {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 20px;
}

.lb-page .lb-state-inner { max-width: 380px; }

.lb-page .lb-state .head {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ink-secondary);
    margin: 0 0 8px;
}

.lb-page .lb-state .sub {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0 0 18px;
}

/* Stack the header before the title block gets crowded by the stats + CTA. */
@media (max-width: 1024px) {
    .lb-page .lb-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .lb-page .lb-header-right { align-self: stretch; justify-content: space-between; }
}

@media (max-width: 720px) {
    .lb-page .lb-leaf { padding: 20px 18px 12px 64px; }
    .lb-page .lb-binding { left: 40px; }
    .lb-page .lb-roman { left: -50px; width: 26px; }
    .lb-page .lb-row { grid-template-columns: 22px 1fr auto; }
    .lb-page .lb-qst { display: none; }
    .lb-page .lb-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .lb-page .lb-header-right { flex-direction: column; align-items: flex-start; gap: 12px; }
    /* Stats wrap to a second line instead of pushing the last stat past the leaf
       edge on narrow phones (the labels — "Campaigns Run" etc. — are wide). */
    .lb-page .lb-header-right { width: 100%; }
    .lb-page .lb-stats { flex-wrap: wrap; row-gap: 10px; }
}

/* ============================================================
   MY REQUESTS — split-pane + 1:1 wood-chat (DEV-139 · design-system §15.5.3)
   Ported from design-previews/my-requests-final.html (LOCKED). Reuses the
   .lb-* leaf/ledger scaffolding above; adds the 38/62 split frame, the
   req-tab chips, the selected-row state, and the 1:1 chat that vibe-matches
   the §11.5 Hub group chat (same engraved sender names, role-tags, day
   dividers, brass scrollbar, own-message cream tint, 28px brass avatar).

   DEV-140 reuse: the .split-chat / .chat-list / .msg / .chat-day / .chat-composer
   primitives below are the canonical wood-chat surface. When the Hub (§11)
   is reskinned, its group chat reuses these selectors (the Hub variant adds
   its own wood because it sits on stone — see the critical note below).

   CRITICAL (§15.5.3): .split-chat sits INSIDE the <NoticeBoard> wood, whose
   ::before already applies the wood texture + brightness(0.78) filter. CSS
   filters cascade to descendants, so .split-chat carries NO wood, NO filter,
   and NO inset-shadow of its own — that would double-filter and read as "two
   different woods". The chat region is distinguished purely by the engraved
   separators on its header/composer (2px dark line + warm inset catch). The
   leaf-side and chat-side share the one noticeboard wood underneath.
   ============================================================ */

/* The /requests page fills the viewport so the chat-list can scroll inside a
   bounded height; the room chrome (NoticeBoard wood) frames the split-pane. */
.lb-page.lb-requests {
    max-width: 1320px;
    height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 12px;
}

.lb-page.lb-requests .notice-board {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 18px;
}

.lb-page.lb-requests .nb-content {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* ---- Split frame: 38% ledger leaf + 62% wood-chat ---- */
.lb-page .split {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 38% 62%;
    overflow: hidden;
}

/* Narrower leaf (§15.5.3) — binding gutter 90px → 70px, binding rule → 44px */
.lb-page .split .lb-leaf {
    height: 100%;
    margin: 0;
    padding: 18px 22px 12px 70px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lb-page .split .lb-binding { left: 44px; }
.lb-page .split .lb-header { padding-bottom: 10px; }
.lb-page .split .lb-title { font-size: 26px; }
.lb-page .split .lb-stats { gap: 16px; }
.lb-page .split .lb-stat .num { font-size: 20px; }

/* Tab chips above the ledger (Pledges Sent / Pledges Received).
   Explicit reset — no shared <button> reset, no font: shorthand. */
.lb-page .req-tabs {
    display: flex;
    gap: 4px;
    margin: 6px 0 8px;
    flex-shrink: 0;
}

.lb-page .req-tab {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 5px 10px;
    background: transparent;
    color: var(--ink-secondary);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid rgba(106, 74, 28, 0.30);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.lb-page .req-tab:hover { border-color: rgba(106, 74, 28, 0.55); }

.lb-page .req-tab.active {
    color: var(--ink-primary);
    background: rgba(106, 74, 28, 0.18);
    border-color: rgba(106, 74, 28, 0.55);
}

.lb-page .req-tab .count { margin-left: 5px; opacity: 0.7; font-weight: 600; }

/* Scrollable ledger + simplified split rows (hide roman/qst/actions). */
.lb-page .split .lb-ledger {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(106, 74, 28, 0.6) rgba(106, 74, 28, 0.10);
}

.lb-page .split .lb-row {
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    padding: 8px 2px;
    cursor: pointer;
}

.lb-page .split .lb-row::before { left: 0; }
.lb-page .split .lb-roman,
.lb-page .split .lb-qst,
.lb-page .split .lb-actions { display: none; }

.lb-page .split .lb-row .lb-body .title { font-size: 14px; }
.lb-page .split .lb-row .lb-body .title em {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brass-on-parchment);
}
.lb-page .split .lb-row .lb-body .meta { font-size: 8px; letter-spacing: 0.14em; }
.lb-page .split .lb-row .lb-body .meta em {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brass-on-parchment);
}

/* Selected row — warmed parchment + 3px brass left-rule ("the open page"). */
.lb-page .split .lb-row.selected {
    background: rgba(201, 169, 97, 0.18);
    box-shadow: inset 3px 0 0 var(--brass-on-parchment);
}

/* Pledge status stamps (§15.5.3 vocabulary). */
.lb-page .lb-stamp.pending   { color: #8b3a1c; border-color: rgba(139, 58, 28, 0.55); }
.lb-page .lb-stamp.accepted  { color: #3a6a4a; border-color: rgba(58, 106, 74, 0.65); }
.lb-page .lb-stamp.declined  { color: var(--ink-muted); border-color: rgba(106, 74, 28, 0.4); }
.lb-page .lb-stamp.withdrawn { color: var(--ink-muted); border-color: rgba(106, 74, 28, 0.4); }
.lb-page .lb-stamp.kicked    { color: var(--crimson); border-color: rgba(139, 38, 53, 0.55); }

/* ---- Right pane: 1:1 wood-chat. NO wood/filter/shadow of its own. ---- */
.lb-page .split-chat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Empty state — no row selected. */
.lb-page .split-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--text-muted-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Chat header — sits on the wood; distinction is the engraved separator
   (2px dark line + warm inset catch) and the larger sender typography. */
.lb-page .split-chat-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: transparent;
    box-shadow: inset 0 -1px 0 rgba(255, 200, 120, 0.22);
    border-bottom: 2px solid rgba(0, 0, 0, 0.65);
}

.lb-page .split-chat-header .who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lb-page .split-chat-header .who.who-clickable {
    cursor: pointer;
    border-radius: 8px;
    margin: -4px -6px;
    padding: 4px 6px;
    transition: background 0.12s ease;
}

.lb-page .split-chat-header .who.who-clickable:hover {
    background: rgba(255, 220, 150, 0.06);
}

.lb-page .split-chat-header .who.who-clickable:hover .nm {
    text-decoration: underline;
    text-decoration-color: rgba(198, 160, 90, 0.5);
    text-underline-offset: 2px;
}

.lb-page .split-chat-header .who .av {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d4a878, #8b6238 65%, #4a3020);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1.5px var(--brass-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4e8d0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 14px;
}

.lb-page .split-chat-header .who .meta-block { min-width: 0; line-height: 1.15; }

.lb-page .split-chat-header .who .nm {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--brass);
    text-shadow:
        0 -0.5px 0 rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 220, 150, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-page .split-chat-header .who .camp {
    margin-top: 3px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-page .split-chat-header .head-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Chat-header action icons — brass-on-wood. Explicit reset, no font: shorthand. */
.lb-page .chat-ico {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 169, 97, 0.32);
    border-radius: 2px;
    color: var(--brass);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.lb-page .chat-ico:hover { border-color: rgba(201, 169, 97, 0.7); background: rgba(255, 255, 255, 0.08); }
.lb-page .chat-ico:disabled { opacity: 0.4; cursor: default; }
.lb-page .chat-ico.crimson { color: #d87a82; border-color: rgba(216, 122, 130, 0.45); }
.lb-page .chat-ico.crimson:hover { border-color: rgba(216, 122, 130, 0.75); background: rgba(139, 38, 53, 0.14); }
.lb-page .chat-ico.accept { color: #8fd0a0; border-color: rgba(143, 208, 160, 0.45); }
.lb-page .chat-ico.accept:hover { border-color: rgba(143, 208, 160, 0.75); background: rgba(58, 106, 74, 0.18); }

/* Chat surface — §11.5 vocabulary. Transparent (wood shows through); brass scrollbar. */
.lb-page .chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 20px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 97, 0.88) rgba(0, 0, 0, 0.18);
}

.lb-page .chat-list::-webkit-scrollbar { width: 6px; }
.lb-page .chat-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); }
.lb-page .chat-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.88), rgba(106, 74, 28, 0.88));
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(201, 169, 97, 0.4), inset 0 1px 0 rgba(255, 220, 150, 0.3);
}

/* Engraved day divider — italic Cormorant date flanked by brass-tinted hairlines. */
.lb-page .chat-day {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    background: transparent;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.lb-page .chat-day .dd-rule { flex: 1; height: 1px; background: rgba(201, 169, 97, 0.22); }

.lb-page .chat-day .dd-date {
    color: rgba(35, 20, 8, 0.95);
    text-shadow:
        0 -0.5px 0 rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 225, 165, 0.88),
        0 2px 4px rgba(255, 200, 120, 0.40);
}

.lb-page .msg { display: flex; gap: 10px; align-items: flex-start; }
.lb-page .msg.own { flex-direction: row-reverse; }

.lb-page .msg .av {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d4a878, #8b6238 65%, #4a3020);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1.5px var(--brass-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4e8d0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 10px;
}

.lb-page .msg-body { flex: 1; min-width: 0; }
.lb-page .msg-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.lb-page .msg.own .msg-head { justify-content: flex-end; }

.lb-page .msg-author {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14.5px;
    color: var(--brass);
    line-height: 1;
    text-shadow:
        0 -0.5px 0 rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 220, 150, 0.25);
}

.lb-page .msg-author .role-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-style: normal;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone);
    border: 1px solid rgba(168, 152, 120, 0.36);
    border-radius: 1px;
    vertical-align: 2px;
}

.lb-page .msg-text {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.lb-page .msg.own .msg-body { text-align: right; }
.lb-page .msg.own .msg-text { color: rgba(255, 224, 168, 0.95); }

.lb-page .msg-time {
    margin-top: 4px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone);
}

/* System message — centered italic muted cream, no avatar. */
.lb-page .msg.sys {
    justify-content: center;
    padding: 4px 0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--text-muted-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Composer — engraved top separator (mirrors the header). Live textarea + brass send. */
.lb-page .chat-composer {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 18px 14px;
    background: transparent;
    box-shadow: inset 0 2px 0 rgba(255, 200, 120, 0.22);
    border-top: 2px solid rgba(0, 0, 0, 0.65);
}

.lb-page .composer-input {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    max-height: 96px;
    resize: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-on-stone);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.55;
}

.lb-page .composer-input::placeholder {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: rgba(168, 152, 120, 0.75);
}

.lb-page .composer-send {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0 4px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--brass);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    transition: color 0.14s ease;
}

.lb-page .composer-send:hover:not(:disabled) { color: var(--brass-highlight); }
.lb-page .composer-send:disabled { opacity: 0.4; cursor: default; }

/* Read-only composer (sealed pledge) — single tavern-voice line, no input. */
.lb-page .chat-closed {
    flex-shrink: 0;
    padding: 14px 18px;
    background: transparent;
    box-shadow: inset 0 2px 0 rgba(255, 200, 120, 0.22);
    border-top: 2px solid rgba(0, 0, 0, 0.65);
    text-align: center;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--text-muted-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Mobile back affordance — returns from the full-screen chat to the pledge list.
   Hidden on the desktop split-pane (both panes always visible); shown only when
   the pane collapses to a switcher below. */
.lb-page .chat-back {
    display: none;
    align-self: stretch;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 10px 16px;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -1px 0 rgba(255, 200, 120, 0.12);
    text-align: left;
    color: var(--brass);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px; font-weight: 600; font-style: normal;
    letter-spacing: 0.14em; text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
}
.lb-page .chat-back:hover { color: var(--brass-highlight); }

/* Narrow viewports: collapse the split-pane into a switcher (DEV-85). The pledge
   list shows alone by default; selecting a pledge hides the list and shows the
   chat full-screen, with the Back affordance to return. */
@media (max-width: 860px) {
    .lb-page.lb-requests { height: auto; }
    .lb-page .split { grid-template-columns: 1fr; }
    .lb-page .split .lb-leaf { padding: 18px 18px 12px 64px; }
    .lb-page .split .lb-binding { left: 40px; }

    .lb-page.lb-requests .split-chat { display: none; }
    .lb-page.lb-requests.chat-open .split .lb-leaf { display: none; }
    .lb-page.lb-requests.chat-open .split-chat { display: flex; min-height: 72vh; }
    .lb-page.lb-requests .chat-back { display: inline-flex; }
}

/* Phones: the 64px binding gutter (plus the room/board padding stack) starves the
   request rows until the flexible middle column collapses to a one-char-wide
   vertical strip and the second tab is clipped. Drop the decorative binding, cut
   the gutter to a normal inset, and let the two tabs wrap. */
@media (max-width: 560px) {
    .lb-page.lb-requests .notice-board { padding: 14px 12px 12px; }
    .lb-page.lb-requests .split .lb-leaf { padding: 16px 14px 12px 18px; }
    .lb-page.lb-requests .split .lb-binding { display: none; }
    .lb-page .req-tabs { flex-wrap: wrap; }
}

/* ============================================================
   THE GUILD REGISTER PAGE — Profile leaf (DEV-141 · design-system §14)
   Ported from design-previews/profile-final.html (LOCKED). A single parchment
   leaf pinned to the <NoticeBoard> wood by 4 brass tacks — the same parchment
   vocabulary as the §15 logbook leaf, but a different leaf: NO crimson binding
   gutter, a 3-column header (portrait / meta / stats), and the display-only
   Tables Held + Tales Told sections. Namespaced under .gr-page so the generic
   leaf class names never collide with the .lb-* logbook or Discover/Hub styles.
   Reuses WaxSeal, GmMedallion, VerifiedStamp (prominent). Buttons are plain
   <button>/<select> with explicit resets (no shared reset, no font: shorthand).
   ============================================================ */
.gr-page {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 8px;
}

/* ---- The parchment leaf (§14.5) — 4 brass tacks + paper curl, no binding gutter ---- */
.gr-page .gr-leaf {
    position: relative;
    z-index: 2;
    padding: 26px 38px 16px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px,
            rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
}

/* Leaf is a flex column — let its sections shrink below content width (keeps the
   tables rows on the parchment when the chrome squeezes width, e.g. mobile). */
.gr-page .gr-leaf > * { min-width: 0; }
.gr-page .gr-tables-held,
.gr-page .gr-table-row { min-width: 0; }

/* paper-curl on the lower-right corner */
.gr-page .gr-leaf::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
}

/* Brass tacks — 4 corners (§11.12 vocabulary) */
.gr-page .gr-tack {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 4;
}

.gr-page .gr-tack.tl { top: 10px; left: 18px; }
.gr-page .gr-tack.tr { top: 10px; right: 18px; }
.gr-page .gr-tack.bl { bottom: 10px; left: 18px; }
.gr-page .gr-tack.br { bottom: 10px; right: 18px; }

/* ---- Leaf header (§14.6) — [160px portrait] [1fr meta] [auto stats] ---- */
.gr-page .gr-header {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: flex-start;
    gap: 26px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(106, 74, 28, 0.22);
}

/* Portrait medallion wrapper (§14.6) — MUST be position:relative so the ring
   pins to the portrait, not the whole leaf. Hosts <GmMedallion Size="160">. */
.gr-page .gr-portrait {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.gr-page .gr-portrait::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid var(--brass-shadow);
    box-shadow: 0 0 0 2px rgba(40, 24, 12, 0.55), 0 3px 8px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* The medallion is hosted at a fixed inline Size (160px); the wrapper shrinks at
   breakpoints (120/88px), so pin the medallion to the wrapper — otherwise a photo
   keeps its 160px and spills past the brass ring on narrow viewports (DEV-172). */
.gr-page .gr-portrait .gm-avatar {
    width: 100% !important;
    height: 100% !important;
}

.gr-page .gr-meta { min-width: 0; padding-top: 4px; }

.gr-page .gr-eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 5px;
}

.gr-page .gr-name {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.05;
    color: var(--ink-primary);
    margin: 0 0 2px;
}

.gr-page .gr-subtitle {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--brass-on-parchment);
    margin: 0;
}

.gr-page .gr-since {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
}

.gr-page .gr-plays {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.gr-page .gr-plays .plays-lbl {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-right: 2px;
}

/* "Plays" swatch pill — soft parchment-tinted, hosts a 16px WaxSeal + name (§14.8) */
.gr-page .gr-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 4px;
    background: rgba(106, 74, 28, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(106, 74, 28, 0.18);
}

.gr-page .gr-swatch .nm {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-secondary);
}

/* Stats column (§14.6) — three brass Cormorant numerals, baseline-aligned to the name */
.gr-page .gr-header-stats {
    display: flex;
    gap: 28px;
    align-items: flex-end;
    padding-top: 36px;
    padding-right: 6px;
}

.gr-page .gr-stat { flex: 0 0 auto; text-align: center; }

.gr-page .gr-stat .num {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    color: var(--brass-on-parchment);
}

.gr-page .gr-stat .num.stars { font-size: 26px; }

.gr-page .gr-stat .lbl {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 4px;
}

/* ---- Section rule (§14) — italic Cormorant label between hairline rules ---- */
.gr-page .gr-sec-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 6px;
}

.gr-page .gr-sec-rule .line { flex: 1; height: 1px; background: rgba(106, 74, 28, 0.25); }

.gr-page .gr-sec-rule .lbl {
    flex-shrink: 0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    font-weight: 500;
    color: var(--brass-on-parchment);
}

/* ---- About (§14.8) ---- */
.gr-page .gr-bio {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-secondary);
    margin: 0;
}

.gr-page .gr-bio.empty { color: var(--ink-muted); }

/* ---- Tables Held (§14.9) — 2-column dotted-rule list of campaigns ---- */
.gr-page .gr-tables-held {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
}

.gr-page .gr-table-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-bottom: 1px dotted rgba(106, 74, 28, 0.18);
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.14s ease;
}

.gr-page .gr-table-row:hover { background: rgba(106, 74, 28, 0.07); }

.gr-page .gr-table-row .qst {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.gr-page .gr-table-row .title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-page .gr-table-row .role {
    flex-shrink: 0;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--brass-on-parchment);
    border: 1px solid rgba(139, 106, 42, 0.55);
    padding: 1px 5px;
}

.gr-page .gr-table-row .role.player {
    color: var(--ink-secondary);
    border-color: rgba(106, 74, 28, 0.4);
}

.gr-page .gr-table-row .status {
    flex-shrink: 0;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 800;
    font-size: 7px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 2px 5px;
    color: #6a4a1c;
    border: 1px solid rgba(106, 74, 28, 0.55);
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(-2deg);
    filter: blur(0.15px);
}

.gr-page .gr-table-row .status.active { color: #3a6a4a; border-color: rgba(58, 106, 74, 0.65); }
.gr-page .gr-table-row .status.filled { color: #8b3a1c; border-color: rgba(139, 58, 28, 0.55); }
.gr-page .gr-table-row .status.past { color: var(--ink-muted); border-color: rgba(106, 74, 28, 0.4); }

/* ---- Tales Told (§14.10) — rating scraps with a brass-shadow left rule ---- */
.gr-page .gr-tales { display: flex; flex-direction: column; gap: 6px; }

.gr-page .tale {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255, 250, 240, 0.4);
    border-left: 2px solid var(--brass-shadow);
}

.gr-page .tale .r-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d4a878, #8b6238 65%, #4a3020);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4e8d0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 10px;
    box-shadow: 0 0 0 1px var(--brass-shadow);
}

.gr-page .tale .r-body { flex: 1; min-width: 0; }

.gr-page .tale .r-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.gr-page .tale .r-name {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--brass-on-parchment);
}

.gr-page .tale .r-meta {
    flex-shrink: 0;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.gr-page .tale .r-stars { font-size: 10px; color: var(--brass-on-parchment); letter-spacing: 1px; }
.gr-page .tale .r-stars .off { color: rgba(106, 74, 28, 0.28); }

.gr-page .tale .r-review {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-secondary);
    margin: 1px 0 0;
    white-space: pre-wrap;
}

/* ---- Footer (§14.11) — "more on the next page" hint + actions ---- */
.gr-page .gr-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(106, 74, 28, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.gr-page .gr-footer .more {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--ink-muted);
}

.gr-page .gr-actions { display: flex; gap: 8px; }

/* Footer icon-action buttons (Rate / Report / Block). Explicit reset — no shared reset, no font: shorthand. */
.gr-page .gr-ico {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid rgba(106, 74, 28, 0.4);
    border-radius: 2px;
    color: var(--ink-secondary);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.gr-page .gr-ico:hover { background: rgba(106, 74, 28, 0.10); border-color: rgba(106, 74, 28, 0.65); }
.gr-page .gr-ico.active-ico { color: var(--brass-on-parchment); border-color: rgba(139, 106, 42, 0.55); }
.gr-page .gr-ico.crimson { color: var(--crimson); border-color: rgba(139, 38, 53, 0.5); }
.gr-page .gr-ico.crimson:hover { background: rgba(139, 38, 53, 0.08); border-color: rgba(139, 38, 53, 0.75); }

/* Dark brass-bordered primary button (§5.8 .btn-dark). Explicit reset. */
.gr-page .gr-btn-dark {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.14s ease, color 0.14s ease;
}

.gr-page .gr-btn-dark:hover { color: var(--brass-highlight); border-color: rgba(201, 169, 97, 0.8); }
.gr-page .gr-btn-dark:disabled { opacity: 0.55; cursor: default; }

/* Ghost text button (§12.16) — used for Discard Changes. Explicit reset. */
.gr-page .gr-btn-ghost {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    color: var(--ink-secondary);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.14s ease;
}

.gr-page .gr-btn-ghost:hover { color: var(--ink-primary); }

/* ---- Edit form primitives (§14.12, reused from §12.9) ---- */
.gr-page .gr-form-label {
    display: block;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.gr-page .gr-form-label .opt {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-muted);
    margin-left: 6px;
}

.gr-page .gr-form-input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 16px;
    color: var(--ink-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    padding: 3px 0;
    outline: none;
    border-radius: 0;
}

.gr-page .gr-form-input:focus { border-bottom-color: var(--brass-on-parchment); }
.gr-page .gr-form-input.compact { font-family: var(--font-ui), 'Inter', sans-serif; font-size: 12px; }
.gr-page .gr-form-input.name { font-size: 24px; }

.gr-page .gr-form-select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px;
    color: var(--ink-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    border-radius: 0;
    padding: 3px 18px 3px 0;
    outline: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
        linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: right 4px top 9px, right 0 top 9px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.gr-page .gr-form-select:focus { border-bottom-color: var(--brass-on-parchment); }
.gr-page .gr-form-textarea {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    min-height: 56px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ink-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    border-radius: 0;
    padding: 3px 0;
    outline: none;
    resize: vertical;
}

.gr-page .gr-form-textarea:focus { border-bottom-color: var(--brass-on-parchment); }
.gr-page .gr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 8px; }
.gr-page .gr-form-row.full { grid-template-columns: 1fr; }

/* Photo controls (Edit header) */
.gr-page .gr-photo-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.gr-page .gr-photo-btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(106, 74, 28, 0.08);
    border: 1px solid rgba(106, 74, 28, 0.3);
    border-radius: 1px;
    color: var(--ink-secondary);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.gr-page .gr-photo-btn:hover { background: rgba(106, 74, 28, 0.14); border-color: rgba(106, 74, 28, 0.5); }
.gr-page .gr-photo-btn.danger { color: var(--crimson); border-color: rgba(139, 38, 53, 0.4); }
.gr-page .gr-photo-btn.primary { color: #e8d09c; background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%); border-color: rgba(201, 169, 97, 0.5); }
.gr-page .gr-photo-btn:disabled { opacity: 0.55; cursor: default; }

.gr-page .gr-photo-error {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--crimson);
    margin-top: 6px;
}

/* Blocked-users strip (§14.12) — hatched parchment-tinted settings region */
.gr-page .gr-blocked-list {
    padding: 8px 12px;
    background: rgba(106, 74, 28, 0.05);
    border-left: 2px solid rgba(106, 74, 28, 0.35);
    border-radius: 0 2px 2px 0;
}

.gr-page .gr-blocked-empty {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--ink-muted);
}

.gr-page .gr-blocked-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.gr-page .gr-blocked-row .nm {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--ink-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-page .gr-blocked-row a.nm:hover { color: var(--ink-primary); text-decoration: underline; }

.gr-page .gr-blocked-row .dt {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.gr-page .gr-blocked-row .ub {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 2px 6px;
    background: transparent;
    border: 1px solid rgba(139, 106, 42, 0.45);
    border-radius: 1px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-on-parchment);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.gr-page .gr-blocked-row .ub:hover { background: rgba(106, 74, 28, 0.10); border-color: rgba(139, 106, 42, 0.7); }
.gr-page .gr-blocked-row .ub:disabled { opacity: 0.55; cursor: default; }

/* ---- Empty / loading / not-found states ---- */
.gr-page .gr-state {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 20px;
}

.gr-page .gr-state-inner { max-width: 420px; }

.gr-page .gr-state .head {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ink-secondary);
    margin: 0 0 8px;
}

.gr-page .gr-state .sub {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0;
}

.gr-page .gr-section-empty {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--ink-muted);
}

/* ---- Responsive (§14.15) ----
   NOTE: full mobile fit is DEV-85 territory. The dominant constraint on narrow
   viewports is the AppShell <main> 48px side padding (shared by every page —
   lb-page hits the same squeeze), not anything Profile-specific. These rules
   degrade the leaf gracefully within that chrome; DEV-85 owns the holistic fix. */
@media (max-width: 900px) {
    .gr-page .gr-header { grid-template-columns: 120px 1fr; }
    .gr-page .gr-portrait { width: 120px; height: 120px; }
    .gr-page .gr-portrait .gm-avatar { font-size: 120px !important; }
    .gr-page .gr-header-stats { grid-column: 1 / -1; padding-top: 12px; justify-content: flex-start; flex-wrap: wrap; gap: 18px; }
    .gr-page .gr-tables-held { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .gr-page { padding: 16px 10px 8px; }
    .gr-page .gr-leaf { padding: 18px 14px 12px; }
    .gr-page .gr-header { grid-template-columns: 88px 1fr; gap: 14px; }
    .gr-page .gr-portrait { width: 88px; height: 88px; }
    .gr-page .gr-portrait .gm-avatar { font-size: 88px !important; }
    .gr-page .gr-name { font-size: 28px; }
    .gr-page .gr-plays { width: 100%; min-width: 0; }
    .gr-page .gr-plays .gr-swatch { max-width: 100%; }
    .gr-page .gr-plays .gr-swatch .nm { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gr-page .gr-header-stats { gap: 14px; }
    .gr-page .gr-form-row { grid-template-columns: 1fr; }
    .gr-page .tale .r-head { flex-direction: column; gap: 2px; }
    .gr-page .gr-footer { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   THE BOOTH — Campaign Hub (DEV-140 · design-system §11)
   Ported from design-previews/hub-*-final.html (Direction 4, LOCKED). The
   Hub is the party's quiet wood-panelled ALCOVE inset into the stone wall —
   it replaces Discover's noticeboard. Three tabs (Posts / Chat / Members)
   share one alcove; only the active tab + its content change.

   Reuse: the page root carries BOTH `lb-page` and `hub-page`, so the shared
   wood-chat primitives (.chat-list / .msg / .chat-day / .chat-composer,
   scoped `.lb-page …`) apply to the Chat tab verbatim — no new chat CSS.
   The Hub does NOT wrap in <NoticeBoard>: the alcove's ::before is the single
   wood source (so no double-filter trap). The Chat tab adds only its §11.5
   darker wash over the alcove wood (see `.lb-page.hub-page .chat-list`).
   Namespaced under .hub-page so the generic class names never collide with
   the .lb-* logbook, .gr-* register, Discover, or Landing styles.
   ============================================================ */
.lb-page.hub-page {
    max-width: 1320px;
    height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 12px;
}

/* ---- Hub hero (§11.2, trimmed): back-link eyebrow + title + sub + 2 real stats.
   No party-name accent and no "Nights at Table" — neither is modelled. ---- */
.hub-page .hub-hero {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 16px;
}

.hub-page .hub-hero-left { min-width: 0; max-width: 62%; }

/* Back-link eyebrow — a real <button> (navigates to /parties). Explicit reset. */
.hub-page .hub-backlink {
    appearance: none;
    -webkit-appearance: none;
    margin: 0 0 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone);
    transition: color 0.14s ease;
}

.hub-page .hub-backlink::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    background: currentColor;
    margin-right: 4px;
    vertical-align: middle;
}

.hub-page .hub-backlink:hover { color: var(--brass-highlight); }

.hub-page .hub-headline {
    margin: 0;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1;
    color: #f0e6d0;
}

.hub-page .hub-sub {
    margin-top: 12px;
    max-width: 520px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    color: #b8a888;
}

/* External-platform link (GM can add/edit) — understated brass, under the sub. */
.hub-page .hub-ext {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.hub-page .hub-ext-link {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    transition: color 0.14s ease;
}

.hub-page .hub-ext-link:hover { color: var(--brass-highlight); }

.hub-page .hub-ext-edit {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted-on-stone);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    transition: color 0.14s ease;
}

.hub-page .hub-ext-edit:hover { color: var(--brass); }

.hub-page .hub-stats {
    display: flex;
    gap: 30px;
    align-items: flex-end;
    flex-shrink: 0;
}

.hub-page .hub-stat { text-align: center; }

.hub-page .hub-stat .num {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1;
    color: var(--brass);
}

.hub-page .hub-stat .lbl {
    margin-top: 6px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone);
}

/* ---- The booth: lantern + alcove (§11.3 / §11.10 scroll chain) ---- */
.hub-page .hub-booth {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.hub-page .hub-lantern {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 44px;
    z-index: 7;
    filter:
        drop-shadow(0 0 8px rgba(255, 200, 100, 0.65))
        drop-shadow(0 0 16px rgba(255, 180, 80, 0.4));
    pointer-events: none;
}

.hub-page .hub-alcove {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.65),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(40, 24, 12, 0.7);
}

/* SAME wood + SAME filter as Discover's noticeboard (§11.3) — single source. */
.hub-page .hub-alcove::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../textures/noticeboard-wood.jpg');
    background-size: 900px;
    background-position: center;
    filter: brightness(0.78) saturate(1.05) contrast(1.05);
    z-index: 0;
}

/* Lantern halo pooling at the top edge */
.hub-page .hub-alcove::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% -2%,
            rgba(255, 210, 130, 0.34) 0%,
            rgba(255, 195, 100, 0.14) 38%,
            transparent 75%);
    z-index: 1;
    pointer-events: none;
}

.hub-page .hub-alcove > * { position: relative; z-index: 2; }

/* ---- Tab band (§11.4): line-only, engraved hairline below ---- */
.hub-page .hub-tabs {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    box-shadow: inset 0 -1px 0 rgba(255, 200, 120, 0.22);
    border-bottom: 2px solid rgba(0, 0, 0, 0.65);
}

/* Tab chip — real <button>, explicit reset, no font: shorthand. */
.hub-page .hub-tab {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    background: transparent;
    border: none;
    border-radius: 1px;
    cursor: pointer;
    position: relative;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-on-stone);
    transition: color 0.14s ease;
}

.hub-page .hub-tab .count {
    margin-left: 6px;
    opacity: 0.7;
    font-size: 9px;
    font-weight: 500;
}

.hub-page .hub-tab:hover { color: var(--brass-highlight); }

/* Active — brass-engraved text + thin brass underline (§11.4 locked). No fill. */
.hub-page .hub-tab.active {
    color: var(--brass);
    text-shadow:
        0 -0.5px 0 rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 220, 150, 0.25);
}

.hub-page .hub-tab.active::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 11px;
    right: 11px;
    height: 1px;
    background: var(--brass);
    box-shadow: 0 0 2px rgba(201, 169, 97, 0.55);
}

.hub-page .hub-tab.active .count { opacity: 0.85; }

/* ---- Tab content area ---- */
.hub-page .hub-content {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Loading / empty state inside a tab — centred tavern voice on the wood. */
.hub-page .hub-tab-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 40px 24px;
}

.hub-page .hub-tab-state .head {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--text-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hub-page .hub-tab-state .sub {
    max-width: 360px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* DEV-146 · empty-state eyebrow (§ empty-states · wood-empty) — small-caps
   Inter on the wood, sits above the head on the Chat / Posts / Members empties. */
.hub-page .hub-tab-state .eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    margin-bottom: -2px;
}

/* Chat empty — brass arrow nodding down to the (hot) composer. */
.hub-page .hub-chat-empty .arrow {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 22px;
    line-height: 1;
    color: var(--brass);
    text-shadow: 0 0 6px rgba(201, 169, 97, 0.4);
    margin-top: 4px;
    animation: hub-arrow-drop 2.6s ease-in-out infinite;
}

@keyframes hub-arrow-drop {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(3px); opacity: 1; }
}

/* "Hot" composer — drawn forward when the room is silent: it's the only
   thing the user can do, so it gets a warm glow on the top edge + a brighter
   send glyph. Quiet enough to fit the room (§ empty-states · panel 7). */
.lb-page.hub-page .chat-composer.hot {
    box-shadow:
        inset 0 2px 0 rgba(255, 220, 150, 0.40),
        0 -10px 24px -8px rgba(255, 200, 120, 0.18);
}

.lb-page.hub-page .chat-composer.hot .composer-input::placeholder {
    color: rgba(232, 208, 156, 0.88);
}

.lb-page.hub-page .chat-composer.hot .composer-send {
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 6px rgba(201, 169, 97, 0.55));
}

/* ---- CHAT TAB: reuse .chat-list/.msg/.chat-day/.chat-composer (from .lb-page).
   §11.5 wants the darker wash over the alcove wood for cream-on-wood contrast. ---- */
.lb-page.hub-page .chat-list {
    padding: 0 24px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.12) 100%);
    gap: 12px;
}

/* Day dividers are sticky in the Hub group chat (§11.9) — pin to viewport top. */
.lb-page.hub-page .chat-day {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0 -24px;
    padding: 6px 24px;
}

/* ===================================================================
   POSTS TAB (§11.7) — parchment leaves pinned to the alcove wood
   =================================================================== */
.hub-page .hub-posts-action {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 14px 28px 8px;
}

.hub-page .hub-posts-count {
    margin-right: auto;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone);
}

/* "Write a Post" — Pledge-style dark button (§5.8). Explicit reset. */
.hub-page .hub-write-btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    cursor: pointer;
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 200, 120, 0.15);
    transition: border-color 0.14s ease, color 0.14s ease;
}

.hub-page .hub-write-btn::before { content: '✎'; font-size: 11px; opacity: 0.85; }
.hub-page .hub-write-btn:hover { border-color: rgba(201, 169, 97, 0.85); color: #f4e2b4; }

.hub-page .hub-posts-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--brass) rgba(0, 0, 0, 0.18);
}

.hub-page .hub-posts-list::-webkit-scrollbar { width: 6px; }
.hub-page .hub-posts-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }
.hub-page .hub-posts-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.88) 0%, rgba(106, 74, 28, 0.88) 100%);
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(201, 169, 97, 0.4), inset 0 1px 0 rgba(255, 220, 150, 0.3);
}

/* Parchment leaf (§11.11 treatment + §11.12 tack) */
.hub-page .hub-post-leaf {
    position: relative;
    padding: 28px 28px 18px;
    border-radius: 2px;
    color: var(--ink-primary);
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 30%, rgba(160, 120, 70, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 82% 70%, rgba(140, 100, 60, 0.06) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 32px rgba(106, 74, 28, 0.06);
}

.hub-page .hub-post-leaf::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 36px; height: 36px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 2px 0;
}

.hub-page .hub-post-tack {
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 3;
}

.hub-page .hub-post-actions {
    position: absolute;
    top: 12px; right: 14px;
    display: flex;
    gap: 6px;
}

/* Parchment icon button (post edit/delete, roster rate/report/kick). Reset, no font:. */
.hub-page .hub-ico {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: transparent;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.55;
    color: var(--ink-secondary);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    transition: opacity 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.hub-page .hub-ico:hover { opacity: 1; background: rgba(106, 74, 28, 0.10); }
.hub-page .hub-ico.crimson { color: var(--crimson); }
.hub-page .hub-ico.crimson:hover { background: rgba(139, 38, 53, 0.10); }

.hub-page .hub-post-body {
    margin-bottom: 14px;
    padding-right: 42px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.62;
    color: var(--ink-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hub-page .hub-post-sign {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(106, 74, 28, 0.20);
}

.hub-page .hub-post-author {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--brass-on-parchment);
}

.hub-page .hub-post-author::before { content: '— '; color: var(--ink-muted); font-style: normal; }

.hub-page .hub-post-date {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* ===================================================================
   MEMBERS TAB (§11.8) — single parchment roster, 4 corner tacks
   =================================================================== */
.hub-page .hub-roster-sheet,
.hub-page .hub-overview-sheet {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 22px 28px 26px;
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    color: var(--ink-primary);
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
}

.hub-page .hub-roster-sheet::after,
.hub-page .hub-overview-sheet::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 42px; height: 42px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 2px 0;
}

.hub-page .hub-roster-sheet > .hub-tack,
.hub-page .hub-overview-sheet > .hub-tack {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 3;
}

.hub-page .hub-roster-sheet > .hub-tack.tl,
.hub-page .hub-overview-sheet > .hub-tack.tl { top: 8px; left: 14px; }
.hub-page .hub-roster-sheet > .hub-tack.tr,
.hub-page .hub-overview-sheet > .hub-tack.tr { top: 8px; right: 14px; }
.hub-page .hub-roster-sheet > .hub-tack.bl,
.hub-page .hub-overview-sheet > .hub-tack.bl { bottom: 8px; left: 14px; }
.hub-page .hub-roster-sheet > .hub-tack.br,
.hub-page .hub-overview-sheet > .hub-tack.br { bottom: 8px; right: 14px; }

.hub-page .hub-roster-header {
    flex-shrink: 0;
    text-align: center;
    padding: 24px 32px 18px;
    border-bottom: 1px solid rgba(106, 74, 28, 0.25);
}

.hub-page .hub-roster-eyebrow {
    margin-bottom: 8px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hub-page .hub-roster-title {
    margin-bottom: 8px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
    line-height: 1;
    color: var(--ink-primary);
}

.hub-page .hub-roster-stat {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hub-page .hub-roster-stat strong { color: var(--brass-on-parchment); font-weight: 700; }

.hub-page .hub-roster-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 32px 18px;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--brass-shadow) rgba(106, 74, 28, 0.14);
}

.hub-page .hub-roster-list::-webkit-scrollbar { width: 6px; }
.hub-page .hub-roster-list::-webkit-scrollbar-track { background: rgba(106, 74, 28, 0.12); border-radius: 3px; }
.hub-page .hub-roster-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.92) 0%, rgba(139, 106, 42, 0.92) 100%);
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(201, 169, 97, 0.4), inset 0 1px 0 rgba(255, 220, 150, 0.35);
}

.hub-page .hub-roster-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(106, 74, 28, 0.16);
}

.hub-page .hub-roster-row:last-child { border-bottom: none; }
.hub-page .hub-roster-row .gm-avatar { flex-shrink: 0; }

/* Whole row links through to /profiles/{userId}; the action cluster
   stops propagation so Rate/Report/Remove don't also navigate. */
.hub-page .hub-roster-row.clickable {
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s ease;
}

.hub-page .hub-roster-row.clickable:hover {
    background: rgba(106, 74, 28, 0.07);
}

.hub-page .hub-roster-row.clickable:hover .hub-roster-name .nm {
    text-decoration: underline;
    text-decoration-color: rgba(106, 74, 28, 0.45);
    text-underline-offset: 2px;
}

/* No players yet — sits below the lone GM row inside the roster list. */
.hub-page .hub-roster-empty {
    padding: 26px 8px 8px;
    text-align: center;
}

.hub-page .hub-roster-empty .eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(106, 74, 28, 0.6);
    margin-bottom: 10px;
}

.hub-page .hub-roster-empty .head {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    color: var(--ink, #3a2c1a);
    margin-bottom: 8px;
}

.hub-page .hub-roster-empty .sub {
    max-width: 46ch;
    margin: 0 auto 16px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(58, 44, 26, 0.72);
}

.hub-page .hub-roster-info { flex: 1; min-width: 0; }

.hub-page .hub-roster-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.1;
    color: var(--brass-on-parchment);
}

.hub-page .hub-roster-name .nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-page .hub-you-tag {
    flex-shrink: 0;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
    transform: translateY(0.5px);
}

.hub-page .hub-role-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 7px 1px;
    border: 1px solid rgba(106, 74, 28, 0.32);
    border-radius: 1px;
    line-height: 1;
    transform: translateY(0.5px);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hub-page .hub-role-badge.gm { color: var(--brass-on-parchment); border-color: rgba(139, 106, 42, 0.55); }

.hub-page .hub-roster-meta {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--ink-muted);
}

.hub-page .hub-roster-rating {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    min-width: 88px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-size: 17px;
    color: var(--brass-on-parchment);
}

.hub-page .hub-roster-rating .star {
    font-size: 16px;
    color: var(--brass-on-parchment);
    filter: drop-shadow(0 1px 0 rgba(255, 220, 150, 0.4));
}

.hub-page .hub-roster-rating .rating-count {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hub-page .hub-roster-rating .no-rating {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11px;
    color: var(--ink-muted);
}

.hub-page .hub-roster-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    min-width: 72px;
    justify-content: flex-end;
}


/* ===================================================================
   OVERVIEW TAB (§15.9.c merge — GM-only) — particulars + management.
   Shares the .hub-overview-sheet parchment + corner tacks with the
   roster sheet (grouped above) and the .hub-roster-* header classes.
   =================================================================== */
.hub-page .hub-ov-titlewrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.hub-page .hub-ov-titlewrap .hub-roster-title { margin-bottom: 0; }

.hub-page .hub-recruit-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px 2px;
    border-radius: 1px;
    border: 1px solid rgba(106, 74, 28, 0.4);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink-muted);
}

.hub-page .hub-recruit-pill.open {
    color: #3f6b3a;
    border-color: rgba(63, 107, 58, 0.55);
    background: rgba(63, 107, 58, 0.08);
}

.hub-page .hub-recruit-pill.closed {
    color: var(--crimson);
    border-color: rgba(139, 38, 53, 0.45);
    background: rgba(139, 38, 53, 0.06);
}

.hub-page .hub-overview-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 32px 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--brass-shadow) rgba(106, 74, 28, 0.14);
}

.hub-page .hub-overview-scroll::-webkit-scrollbar { width: 6px; }
.hub-page .hub-overview-scroll::-webkit-scrollbar-track { background: rgba(106, 74, 28, 0.12); border-radius: 3px; }
.hub-page .hub-overview-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(201, 169, 97, 0.92) 0%, rgba(139, 106, 42, 0.92) 100%);
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(201, 169, 97, 0.4), inset 0 1px 0 rgba(255, 220, 150, 0.35);
}

/* Scannable label/value particulars grid */
.hub-page .hub-ov-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
}

.hub-page .hub-ov-fact { min-width: 0; }

.hub-page .hub-ov-fact.wide {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid rgba(106, 74, 28, 0.18);
}

.hub-page .hub-ov-fact .k {
    margin-bottom: 4px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hub-page .hub-ov-fact .v {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hub-page .hub-ov-fact.wide .v { line-height: 1.62; }

.hub-page .hub-overview-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 32px 18px;
    border-top: 1px solid rgba(106, 74, 28, 0.25);
}

.hub-page .hub-ov-act-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Crimson outline button (delete) — explicit reset, no font: shorthand */
.hub-page .hub-ov-delete {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid rgba(139, 38, 53, 0.5);
    border-radius: 1px;
    cursor: pointer;
    color: var(--crimson);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.hub-page .hub-ov-delete::before { content: '✕'; font-size: 11px; opacity: 0.85; }
.hub-page .hub-ov-delete:hover { border-color: rgba(139, 38, 53, 0.85); background: rgba(139, 38, 53, 0.08); }

/* ---- Defensive narrow-viewport (full responsive pass is DEV-85) ---- */
@media (max-width: 860px) {
    .lb-page.hub-page { height: auto; }
    .hub-page .hub-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hub-page .hub-hero-left { max-width: 100%; }
    .hub-page .hub-headline { font-size: 34px; }
    .hub-page .hub-booth { min-height: 70vh; }
    .hub-page .hub-roster-rating { min-width: 0; }
    .hub-page .hub-roster-meta { letter-spacing: 0.10em; }
    .hub-page .hub-ov-facts { grid-template-columns: 1fr; }
    .hub-page .hub-overview-actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   §13 — DIALOGS (Unpinned Slip)
   Canonical: design-previews/dialogs-final.html
   MudDialog is the host; .dlg-host / .dlg-host-content strip its
   chrome so only the parchment slip shows. Every dialog rule is
   scoped under .dlg-slip so nothing leaks into page surfaces.
   ============================================================ */

/* ---- MudDialog host chrome reset (set via Class / ContentClass) ---- */
.mud-dialog.dlg-host {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    width: auto;
    max-width: none;
    min-width: 0;
}
.mud-dialog.dlg-host .mud-dialog-content.dlg-host-content {
    padding: 0;
    overflow: visible;
    max-height: none;
}

/* ---- Dim overlay — warm umber, anti-vignette pulling focus to center (§13.3) ---- */
.mud-overlay-dialog .mud-overlay-scrim {
    background: radial-gradient(ellipse 55% 45% at 50% 50%,
        rgba(20, 12, 6, 0.55) 0%,
        rgba(16, 10, 5, 0.72) 55%,
        rgba(12, 8, 4, 0.85) 100%) !important;
    opacity: 1 !important;
}

/* ---- The slip (§13.4) — parchment + curl + drop shadow + -1.2deg, no tack ---- */
.dlg-slip {
    position: relative;
    width: 480px;
    max-width: calc(100vw - 32px);
    padding: 28px 30px 22px;
    transform: rotate(-1.2deg);
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px,
            rgba(150, 110, 60, 0.025) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.78),
        0 12px 22px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
    border-radius: 2px;
    color: var(--ink-primary);
}
.dlg-slip::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 42px; height: 42px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
    border-radius: 0 0 2px 0;
}
.dlg-slip.rich { width: 500px; }
.dlg-slip.danger { width: 520px; }

/* ---- Typography (§13.5) — all center-aligned (direct address) ---- */
.dlg-slip .dlg-eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 600;
    font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink-muted);
    text-align: center;
    margin-bottom: 10px;
}
.dlg-slip .dlg-eyebrow .flag { color: var(--crimson); margin-right: 6px; font-weight: 700; }
.dlg-slip .dlg-headline {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 500;
    font-size: 26px; line-height: 1.15;
    color: var(--ink-primary);
    text-align: center;
    margin: 0 0 14px;
}
.dlg-slip .dlg-headline em { color: var(--brass-on-parchment); font-style: italic; font-weight: 500; }
.dlg-slip .dlg-body {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13.5px; line-height: 1.55;
    color: var(--ink-secondary);
    text-align: center;
    margin: 0 0 18px;
}
.dlg-slip .dlg-body em { color: var(--brass-on-parchment); font-style: italic; }
.dlg-slip .dlg-body strong { color: var(--ink-primary); font-weight: 500; }

/* ---- Shared-campaign warning panel (Block User) ---- */
.dlg-slip .dlg-warning {
    background:
        repeating-linear-gradient(45deg,
            rgba(139, 38, 53, 0.04) 0px,
            rgba(139, 38, 53, 0.04) 4px,
            transparent 4px,
            transparent 9px),
        rgba(139, 38, 53, 0.06);
    border-left: 2px solid rgba(139, 38, 53, 0.55);
    padding: 10px 12px;
    margin: 0 0 14px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px; line-height: 1.5;
    color: var(--ink-secondary);
}
.dlg-slip .dlg-warning ul { margin: 6px 0 0; padding-left: 18px; }
.dlg-slip .dlg-warning li { margin-bottom: 2px; }
.dlg-slip .dlg-warning strong { color: var(--ink-primary); font-weight: 500; font-style: italic; }

/* ---- Actions row (§13.5) — Cancel left (ghost), Confirm right (dark) ---- */
.dlg-slip .dlg-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(106, 74, 28, 0.22);
    padding-top: 14px;
    margin-top: 4px;
}

/* ---- Form primitives at dialog scale (§13.8, reuses §12.9 compact) ---- */
.dlg-slip .form-label {
    display: block;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--ink-muted);
    font-weight: 600;
    margin: 4px 0 6px;
}
.dlg-slip .form-label .req { color: var(--crimson); margin-left: 4px; font-weight: 700; }
.dlg-slip .form-label .opt {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 400;
    font-size: 11px; letter-spacing: 0; text-transform: none;
    color: var(--ink-muted); margin-left: 6px;
}
.dlg-slip .form-label .title-echo {
    color: var(--brass-on-parchment);
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic; text-transform: none; letter-spacing: 0; font-size: 12px;
}
.dlg-slip .form-input {
    display: block; width: 100%;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 12px; color: var(--ink-primary);
    background: transparent; border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    padding: 5px 0;
    outline: none;
}
.dlg-slip .form-input:focus { border-bottom-color: var(--brass-on-parchment); }
.dlg-slip .form-textarea {
    display: block; width: 100%;
    min-height: 56px;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11.5px; line-height: 1.55;
    color: var(--ink-primary);
    background: transparent; border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    padding: 5px 0;
    outline: none; resize: none;
}
.dlg-slip .form-textarea.tall { min-height: 110px; }
.dlg-slip .form-textarea:focus { border-bottom-color: var(--brass-on-parchment); }
.dlg-slip .form-textarea::placeholder,
.dlg-slip .form-input::placeholder {
    color: rgba(106, 82, 54, 0.55);
    font-style: italic;
}
.dlg-slip .form-select {
    display: block; width: 100%;
    font-family: var(--font-ui), 'Inter', sans-serif; font-size: 12px;
    color: var(--ink-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    border-radius: 0;
    padding: 5px 18px 5px 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                      linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.dlg-slip .form-select:focus { border-bottom-color: var(--brass-on-parchment); }
.dlg-slip .char-counter {
    text-align: right;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-muted);
    margin: 5px 0 4px;
    font-weight: 600;
}

/* ---- Checkbox (§13.8) ---- */
.dlg-slip .dlg-checkbox {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px; color: var(--ink-secondary);
    margin: 14px 0 4px;
    cursor: pointer;
    user-select: none;
}
.dlg-slip .dlg-checkbox em { color: var(--brass-on-parchment); font-style: italic; }
.dlg-slip .dlg-checkbox .check-box {
    width: 14px; height: 14px;
    border: 1px solid rgba(106, 74, 28, 0.55);
    background: rgba(255, 250, 240, 0.3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--ink-primary);
    flex-shrink: 0;
    line-height: 1;
}

/* ---- Star picker (§13.8) — brass on parchment ---- */
.dlg-slip .dlg-stars {
    display: flex; justify-content: center; gap: 10px;
    font-size: 28px; margin: 6px 0 16px;
    line-height: 1;
}
.dlg-slip .dlg-stars .star {
    color: var(--brass-on-parchment);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    background: none; border: 0; padding: 0;
    font-size: inherit; line-height: 1;
}
.dlg-slip .dlg-stars .star.off { color: rgba(106, 74, 28, 0.28); text-shadow: none; }
.dlg-slip .dlg-stars-label {
    text-align: center;
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px; color: var(--ink-muted);
    margin: -10px 0 18px;
}

/* ---- Buttons (§13.6) — explicit resets, no font: shorthand ---- */
.dlg-slip .btn-dark {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
    padding: 9px 18px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10.5px; font-weight: 700; font-style: normal;
    letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.1;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer; white-space: nowrap;
}
.dlg-slip .btn-dark:hover { color: var(--brass-highlight); border-color: rgba(201, 169, 97, 0.8); }
.dlg-slip .btn-dark:disabled { opacity: 0.5; cursor: default; color: #e8d09c; border-color: rgba(201, 169, 97, 0.5); }
.dlg-slip .btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
    padding: 8px 14px;
    background: transparent;
    color: var(--ink-secondary);
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10px; font-weight: 600; font-style: normal;
    letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.1;
    border: 0;
    cursor: pointer; white-space: nowrap;
}
.dlg-slip .btn-ghost:hover { color: var(--ink-primary); }
.dlg-slip .btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
    padding: 9px 18px;
    background: linear-gradient(180deg, #4a1018 0%, #2a0a0e 100%);
    color: #f0e0c0;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 10.5px; font-weight: 700; font-style: normal;
    letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.1;
    border: 1px solid rgba(139, 38, 53, 0.7);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 100, 100, 0.12);
    cursor: pointer; white-space: nowrap;
}
.dlg-slip .btn-danger:hover { border-color: rgba(139, 38, 53, 1); color: #fff0e8; }
.dlg-slip .btn-danger:disabled { opacity: 0.5; cursor: default; }
.dlg-slip .btn-danger .x { margin-right: 2px; opacity: 0.85; font-size: 11px; }

/* ---- Danger zone (§13.7) — two stacked rows, never a single 3-element flex ---- */
.dlg-slip .dlg-danger-zone {
    margin-top: 14px;
    padding: 12px 14px 10px;
    border: 1px solid rgba(139, 38, 53, 0.45);
    border-radius: 1px;
    background:
        repeating-linear-gradient(45deg,
            rgba(139, 38, 53, 0.04) 0px,
            rgba(139, 38, 53, 0.04) 4px,
            transparent 4px,
            transparent 9px),
        rgba(139, 38, 53, 0.06);
    display: flex; flex-direction: column; gap: 8px;
}
.dlg-slip .dlg-danger-zone .dz-eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 700;
    font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--crimson);
    margin-bottom: 2px;
}
.dlg-slip .dlg-danger-zone .dz-copy {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 11.5px; line-height: 1.4; color: var(--ink-secondary);
}
.dlg-slip .dlg-danger-zone .dz-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}

/* ============================================================
   DEV-147 Auth + DEV-148 Onboarding — "the open Guild Register".
   Ported from design-previews/auth-final.html + onboarding-final.html
   (both LOCKED). Full-viewport stone room (top + bottom beams, hanging
   lantern) with the parchment book/leaf centered on the keeper's table.
   No AppShell — these pages render their own chrome via <AuthChrome>.
   Namespaced under .ab-page so the generic leaf/beam/brand class names
   never collide with Landing (scoped) or the .lb-/.gr-/.hub-/.dlg-
   reskins. Tokens from the global :root; textures via /textures.
   Button resets are explicit per memory/feedback_button_reset.md —
   no `font:` shorthand anywhere.
   ============================================================ */
.ab-page {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-ui);
    color: var(--text-on-stone);
}

/* ---- Room backdrop: stone + candlelight pools + lantern book-pool ---- */
.ab-page .ab-stone-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/textures/stone-wall.jpg');
    background-size: 850px;
    background-position: center;
    filter: brightness(0.6) saturate(0.85) sepia(0.18) hue-rotate(-8deg) contrast(1.05);
}

.ab-page .ab-candlelight {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 40% at 18% 8%, rgba(255, 195, 100, 0.45), transparent 60%),
        radial-gradient(ellipse 45% 40% at 82% 8%, rgba(255, 195, 100, 0.4), transparent 60%),
        radial-gradient(ellipse 60% 45% at 50% 100%, rgba(0, 0, 0, 0.6), transparent 65%);
}

/* Warm pool the hanging lantern casts on the laid book (centered). */
.ab-page .ab-book-pool {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 55% at 50% 56%,
            rgba(255, 200, 120, 0.18) 0%,
            rgba(255, 195, 100, 0.08) 38%,
            transparent 72%);
}

/* ---- Timber beams (top + bottom). Texture on ::before so brand text
   stays crisp. Flex children so the content seats between them. ---- */
.ab-page .ab-beam {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    height: 80px;
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.75), inset 0 3px 5px rgba(255, 200, 120, 0.2);
}

.ab-page .ab-beam::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/textures/noticeboard-wood.jpg');
    background-size: 600px auto;
    background-repeat: repeat-x;
    background-position: center;
    filter: brightness(0.55) saturate(1.15) contrast(1.1);
}

.ab-page .ab-beam.top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    padding: 0 46px;
}
.ab-page .ab-beam.bottom { border-top: 1px solid rgba(0, 0, 0, 0.7); }

.ab-page .ab-bracket {
    position: absolute;
    z-index: 2;
    width: 24px;
    height: 28px;
    background: linear-gradient(180deg, #4a4540 0%, #1a1612 50%, #2a2520 100%);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ab-page .ab-bracket::before,
.ab-page .ab-bracket::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, #1a1612 0%, #000 70%);
    border-radius: 50%;
}

.ab-page .ab-bracket::before { top: 5px; }
.ab-page .ab-bracket::after { bottom: 5px; }
.ab-page .ab-beam.top .ab-bracket-l { left: 18px; bottom: 6px; }
.ab-page .ab-beam.top .ab-bracket-r { right: 18px; bottom: 6px; }
.ab-page .ab-beam.bottom .ab-bracket-l { left: 18px; top: 6px; }
.ab-page .ab-beam.bottom .ab-bracket-r { right: 18px; top: 6px; }

/* ---- Content column between the beams ---- */
.ab-page .ab-content {
    position: relative;
    z-index: 3;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px 40px;
}

/* ---- Top bar — brand left, back-link / progress dots right ---- */
.ab-page .ab-topbar {
    position: relative;
    z-index: 3;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ab-page .ab-brand { display: flex; align-items: center; gap: 10px; }
.ab-page .ab-brand-glyph { width: 24px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.4)); }
.ab-page .ab-brand-text { line-height: 1.05; }
.ab-page .ab-brand-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text-on-stone); }
.ab-page .ab-brand-tag { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.22em; margin-top: 4px; color: var(--text-muted-on-stone); font-weight: 500; }

/* Mobile: mirror the Landing beam shrink (Landing.razor.css @680px) so the header matches everywhere. */
@media (max-width: 680px) {
    .ab-page .ab-beam { height: 56px; }
    .ab-page .ab-beam.top { padding: 0 16px; }
    .ab-page .ab-brand-glyph { width: 20px; height: 26px; }
    .ab-page .ab-brand-name { font-size: 16px; }
    .ab-page .ab-brand-tag { font-size: 7px; }
}

.ab-page .ab-back-wall {
    appearance: none;
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted-on-stone);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: 0;
}
.ab-page .ab-back-wall:hover { color: var(--text-on-stone); }
.ab-page .ab-back-wall.muted { opacity: 0.4; cursor: default; }

/* Progress dots (onboarding) */
.ab-page .ab-onb-steps { display: flex; align-items: center; gap: 8px; }
.ab-page .ab-onb-step { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ab-page .ab-onb-step.done,
.ab-page .ab-onb-step.now {
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 28%, var(--brass) 60%, #8a6f3a 88%, #4a3318 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* The "now" dot adds a warm halo glow over the shared brass fill. */
.ab-page .ab-onb-step.now {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 8px rgba(255, 210, 130, 0.55);
}
.ab-page .ab-onb-step.next {
    background: rgba(255, 250, 240, 0.05);
    border: 1px solid rgba(168, 152, 120, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================
   THE BOOK — facing leaves on the keeper's table.
   ============================================================ */
.ab-page .ab-book-stage {
    position: relative;
    z-index: 3;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 4px;
}

.ab-page .ab-book {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 1080px;
    max-width: 96vw;
    height: 100%;
    max-height: 660px;
}
.ab-page .ab-book.single { width: 600px; height: auto; }
.ab-page .ab-book.single.wide { width: 720px; }

.ab-page .ab-leaf {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 24px 32px 22px;
    overflow: hidden;
    background:
        repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Single leaf (callback / onboarding) seats its content centered. */
.ab-page .ab-leaf.single { padding: 32px 36px 28px; justify-content: center; gap: 14px; }

/* Paper-curl on the lower-OUTER corner (mirrors per leaf side). */
.ab-page .ab-leaf.left::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 42px; height: 42px;
    background: linear-gradient(45deg, transparent 48%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
}
.ab-page .ab-leaf.right::after,
.ab-page .ab-leaf.single::after {
    content: '';
    position: absolute; bottom: 0; right: 0;
    width: 42px; height: 42px;
    background: linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
}

/* Peek leaf — the unfocused page in the spread (DEV-172).
   Balance: at 0.62 the page dissolved into the stone and the copy was unreadable;
   at 0.92 it read as a second focused page — the spread lost its near/far.
   So the recession is carried mostly by brightness/saturation (the page sits in
   shadow but stays solid, which keeps the ink legible) and only partly by opacity
   — rather than opacity alone, which blends the ink into the busy wall behind it. */
.ab-page .ab-leaf.peek { opacity: 0.75; filter: saturate(0.8) brightness(0.82); }
.ab-page .ab-leaf.peek::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(60, 40, 20, 0.08), rgba(60, 40, 20, 0.20));
    pointer-events: none;
    z-index: 1;
}

/* Brass tacks */
.ab-page .ab-leaf-tack {
    position: absolute;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 4;
}
.ab-page .ab-leaf-tack.tl { top: 10px; left: 14px; }
.ab-page .ab-leaf-tack.tr { top: 10px; right: 14px; }
.ab-page .ab-leaf-tack.bl { bottom: 10px; left: 14px; }
.ab-page .ab-leaf-tack.br { bottom: 10px; right: 14px; }

/* Spine / binding stripe (crimson seam at the gutter) */
.ab-page .ab-leaf.left .ab-leaf-binding { right: 0; }
.ab-page .ab-leaf.right .ab-leaf-binding,
.ab-page .ab-leaf.single .ab-leaf-binding { left: 0; }
.ab-page .ab-leaf-binding {
    position: absolute;
    top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #5a1820 0%, #7a1f28 12%, #6b1a22 50%, #7a1f28 88%, #5a1820 100%);
    box-shadow: inset 0 0 0 0.5px rgba(40, 8, 14, 0.55), 0 0 6px rgba(40, 8, 14, 0.4);
    z-index: 3;
}

.ab-page .ab-spine-stitches {
    position: absolute;
    top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 6px;
    z-index: 5;
    pointer-events: none;
    background-image: radial-gradient(circle at 50% 0%, rgba(40, 8, 14, 0.75) 0, rgba(40, 8, 14, 0.75) 1.2px, transparent 1.5px);
    background-size: 6px 26px;
    background-repeat: repeat-y;
    background-position: center 14px;
}

/* ---- Leaf header ---- */
.ab-page .ab-leaf-eyebrow {
    font-family: var(--font-ui);
    font-size: 8.5px; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
}
.ab-page .ab-leaf-eyebrow .echo { color: var(--brass-on-parchment); font-weight: 700; }
.ab-page .ab-leaf-eyebrow .echo-sep { color: rgba(106, 74, 28, 0.45); margin: 0 7px; }
.ab-page .ab-leaf-title {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 32px; line-height: 1.05;
    color: var(--ink-primary);
    margin: 4px 0 0;
}
.ab-page .ab-leaf-sub {
    font-family: var(--font-display); font-style: italic;
    font-size: 14px; color: var(--brass-on-parchment);
    line-height: 1.45;
    margin: 6px 0 0;
    max-width: 460px;
}
.ab-page .ab-leaf-rule { height: 1px; background: rgba(106, 74, 28, 0.22); margin: 12px 0 4px; }

/* ============================================================
   FORM PRIMITIVES (§12.9)
   ============================================================ */
.ab-page .ab-form-grid { display: flex; flex-direction: column; gap: 14px; }
.ab-page .ab-form-row { display: block; }
.ab-page .ab-form-label {
    display: block;
    font-family: var(--font-ui); font-size: 9px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-muted); margin-bottom: 4px;
}
.ab-page .ab-form-label .req { color: var(--crimson); margin-left: 3px; font-weight: 700; }
.ab-page .ab-form-label .opt {
    font-family: var(--font-display); font-style: italic;
    font-weight: 400; font-size: 10.5px; letter-spacing: 0;
    text-transform: none; color: var(--ink-muted); margin-left: 6px;
}
.ab-page .ab-form-input {
    display: block; width: 100%;
    font-family: var(--font-display); font-size: 16px;
    color: var(--ink-primary);
    background: transparent; border: 0;
    border-bottom: 1px solid rgba(106, 74, 28, 0.45);
    padding: 3px 0; outline: none;
}
.ab-page .ab-form-input:focus { border-bottom-color: var(--brass-on-parchment); }
.ab-page .ab-form-input::placeholder { color: var(--ink-muted); font-style: italic; opacity: 0.85; }
.ab-page .ab-form-input.pw { font-family: var(--font-ui); font-size: 15px; color: var(--ink-primary); }
.ab-page .ab-form-input.pw::placeholder { font-family: var(--font-display); }

.ab-page .ab-char-counter {
    font-family: var(--font-ui);
    font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase;
    font-weight: 600; color: var(--ink-muted);
    text-align: right; margin-top: 5px;
}
.ab-page .ab-char-counter .ct-num { color: var(--ink-secondary); }

/* ---- Remember me ---- */
.ab-page .ab-remember-row { display: flex; align-items: center; gap: 9px; margin-top: 4px; cursor: pointer; }
.ab-page .ab-remember-check {
    width: 14px; height: 14px;
    border: 1px solid rgba(106, 74, 28, 0.55);
    background: rgba(255, 250, 240, 0.45);
    border-radius: 1px;
    position: relative; flex-shrink: 0;
    box-shadow: inset 0 1px 1px rgba(106, 74, 28, 0.10);
}
.ab-page .ab-remember-check.on::after {
    content: '\2713';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%);
    font-family: var(--font-display);
    font-size: 14px; color: var(--ink-primary); line-height: 1;
}
.ab-page .ab-remember-label { font-family: var(--font-display); font-style: italic; font-size: 12.5px; color: var(--ink-secondary); }

/* ---- "or by another road" divider ---- */
.ab-page .ab-other-road { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.ab-page .ab-other-road .line { flex: 1; height: 1px; background: rgba(106, 74, 28, 0.30); }
.ab-page .ab-other-road .lbl { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--brass-on-parchment); font-weight: 500; flex-shrink: 0; }

/* ---- OAuth provider buttons (explicit reset, no font shorthand) ---- */
.ab-page .ab-oauth-stack { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.ab-page button.ab-oauth-btn {
    appearance: none;
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: rgba(255, 250, 240, 0.5);
    color: var(--ink-secondary);
    font-family: var(--font-ui);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
    border: 1px solid rgba(106, 74, 28, 0.40);
    border-radius: 2px;
    cursor: pointer;
    margin: 0;
    text-align: left;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.ab-page button.ab-oauth-btn:hover { background: rgba(255, 250, 240, 0.72); border-color: rgba(106, 74, 28, 0.6); }
.ab-page button.ab-oauth-btn .ab-oauth-disc {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%; flex-shrink: 0;
    font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1;
    color: #f4e8d0;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.55), inset 1px 2px 2px rgba(255, 255, 255, 0.32), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ab-page button.ab-oauth-btn .ab-oauth-disc.google { background: radial-gradient(circle at 32% 28%, #d4a850, #8a6a1a); }
.ab-page button.ab-oauth-btn .ab-oauth-disc.facebook { background: radial-gradient(circle at 32% 28%, #d63830, #7a1a14); }
.ab-page button.ab-oauth-btn .ab-oauth-disc.microsoft { background: radial-gradient(circle at 32% 28%, #6a8a3a, #3a4a18); }
.ab-page button.ab-oauth-btn .ab-oauth-name { flex: 1; }

/* ---- Dark CTA (locked §12.9) ---- */
.ab-page button.ab-btn-dark {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui);
    font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 700;
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer; white-space: nowrap;
    margin: 0;
    text-decoration: none;
}
.ab-page button.ab-btn-dark.wide { width: 100%; }
.ab-page button.ab-btn-dark:hover {
    color: #f0d896;
    border-color: rgba(240, 208, 128, 0.8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 200, 120, 0.22), 0 0 14px rgba(255, 190, 90, 0.18);
}
.ab-page button.ab-btn-dark.disabled,
.ab-page button.ab-btn-dark:disabled {
    background: linear-gradient(180deg, #1f1610 0%, #14100a 100%);
    color: rgba(232, 208, 156, 0.42);
    border-color: rgba(201, 169, 97, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    cursor: default;
}

/* ---- Cross-link + terms ---- */
.ab-page .ab-crosslink-row { display: flex; justify-content: flex-end; margin-bottom: -2px; }
.ab-page .ab-crosslink {
    appearance: none;
    font-family: var(--font-display); font-style: italic;
    font-size: 11.5px; color: var(--ink-muted);
    text-decoration: none; cursor: pointer;
    border: 0; border-bottom: 1px solid rgba(106, 74, 28, 0.30);
    padding: 0 0 1px; background: none;
}
.ab-page .ab-crosslink:hover { color: var(--ink-secondary); border-bottom-color: rgba(106, 74, 28, 0.55); }
.ab-page .ab-terms-line {
    font-family: var(--font-display); font-style: italic;
    font-size: 11px; color: var(--ink-muted);
    line-height: 1.5; margin: 10px 0 0; max-width: 380px;
}
.ab-page .ab-terms-line a { color: var(--ink-secondary); text-decoration: none; border-bottom: 1px solid rgba(106, 74, 28, 0.35); cursor: pointer; }

/* ---- Peek leaf body ---- */
.ab-page .ab-peek-stack {
    display: flex; flex-direction: column; gap: 14px;
    align-items: flex-start; justify-content: center;
    height: 100%; padding: 8px 28px;
    max-width: 380px; margin: 0 auto;
}
.ab-page .ab-peek-cta { margin-top: 4px; }

/* ============================================================
   CALLBACK LEAVES
   ============================================================ */
.ab-page .ab-cb-stack {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; height: 100%;
    gap: 14px; padding: 18px 24px;
}
.ab-page .ab-cb-stack .ab-leaf-eyebrow { letter-spacing: 0.32em; }
.ab-page .ab-cb-stack .ab-leaf-title { font-size: 30px; text-align: center; }
.ab-page .ab-cb-stack .ab-leaf-sub { font-size: 13.5px; max-width: 380px; text-align: center; }
.ab-page .ab-cb-meta {
    font-family: var(--font-ui);
    font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 600; margin-top: 2px;
}
.ab-page .ab-cb-throb { display: flex; gap: 7px; margin: 4px 0; }
.ab-page .ab-cb-throb span {
    width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 30%, var(--brass) 60%, #8a6f3a 90%);
    box-shadow: 0 0 6px rgba(255, 200, 120, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: ab-throb 1.1s ease-in-out infinite;
}
.ab-page .ab-cb-throb span:nth-child(2) { animation-delay: 0.18s; }
.ab-page .ab-cb-throb span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ab-throb { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ab-page .ab-cb-throb span { animation: none; }
    .ab-page .ab-cb-throb span:nth-child(2) { opacity: 0.75; }
    .ab-page .ab-cb-throb span:nth-child(3) { opacity: 0.50; }
}

.ab-page .ab-cb-medallion {
    width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d4a878 0%, #b89060 25%, #8b6a2a 55%, #6a4a1c 85%, #3a2818 100%);
    display: flex; align-items: center; justify-content: center;
    color: #f4e8d0;
    font-family: var(--font-display); font-weight: 500; font-size: 28px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    position: relative;
    box-shadow: 0 0 0 1.5px var(--brass-shadow), 0 3px 8px rgba(0, 0, 0, 0.4);
    margin: 4px 0;
}
.ab-page .ab-cb-medallion::before {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 2px 3px 5px rgba(255, 232, 168, 0.35), inset -2px -3px 5px rgba(40, 24, 12, 0.45);
    pointer-events: none;
}

.ab-page .ab-cb-rejected-stamp {
    position: absolute; top: 30px; right: 32px;
    width: 86px; height: 84px;
    background: radial-gradient(circle at 38% 32%, #a82a32 0%, #8b2030 35%, #5e121c 75%, #3a0810 100%);
    border-radius: 49% 47% 51% 48% / 47% 50% 48% 51%;
    transform: rotate(-12deg);
    box-shadow:
        inset -2px -3px 5px rgba(0, 0, 0, 0.45),
        inset 2px 2px 3px rgba(255, 200, 180, 0.18),
        0 3px 6px rgba(0, 0, 0, 0.5),
        0 0 0 0.5px rgba(40, 8, 14, 0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
}
.ab-page .ab-cb-rejected-stamp .rj-text {
    font-family: var(--font-ui); font-weight: 800;
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(255, 220, 200, 0.85);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    line-height: 1.25;
}

.ab-page .ab-cb-ctas { display: flex; gap: 8px; margin-top: 4px; justify-content: center; flex-wrap: wrap; }
.ab-page button.ab-btn-ghost-parchment {
    appearance: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    background: transparent;
    color: var(--ink-secondary);
    font-family: var(--font-ui);
    font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
    border: 1px solid rgba(106, 74, 28, 0.40);
    border-radius: 1px;
    cursor: pointer; white-space: nowrap; margin: 0; text-decoration: none;
}
.ab-page button.ab-btn-ghost-parchment:hover { background: rgba(106, 74, 28, 0.07); border-color: rgba(106, 74, 28, 0.6); color: var(--ink-primary); }
.ab-page button.ab-btn-ghost-parchment:disabled { opacity: 0.5; cursor: default; }

.ab-page .ab-cb-provider {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-ui);
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    color: var(--ink-muted);
}
.ab-page .ab-cb-provider .mini-disc {
    width: 14px; height: 14px; border-radius: 50%;
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.55), inset 1px 1px 1px rgba(255, 255, 255, 0.32), 0 1px 1px rgba(0, 0, 0, 0.4);
}
.ab-page .ab-cb-provider .mini-disc.google { background: radial-gradient(circle at 32% 28%, #d4a850, #8a6a1a); }
.ab-page .ab-cb-provider .mini-disc.facebook { background: radial-gradient(circle at 32% 28%, #d63830, #7a1a14); }
.ab-page .ab-cb-provider .mini-disc.microsoft { background: radial-gradient(circle at 32% 28%, #6a8a3a, #3a4a18); }

/* ---- Sealed-letter envelope glyph ---- */
.ab-page .ab-cb-envelope { position: relative; width: 130px; height: 90px; margin: 2px 0 4px; flex-shrink: 0; }
.ab-page .ab-cb-envelope .env-body {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-radius: 1px;
}
.ab-page .ab-cb-envelope .env-flap {
    position: absolute; top: 0; left: 0; right: 0; height: 100%;
    clip-path: polygon(0 0, 100% 0, 50% 52%);
    background: linear-gradient(178deg, #f3e7cf 0%, #ebdbbb 50%, #e3d3b3 100%);
    filter: drop-shadow(0 0.5px 0.3px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
.ab-page .ab-cb-envelope .env-folds {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(40, 24, 10, 0.55) calc(50% - 0.5px), rgba(40, 24, 10, 0.55) calc(50% + 0.5px), transparent calc(50% + 0.5px)) top left / 50% 52% no-repeat,
        linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(40, 24, 10, 0.55) calc(50% - 0.5px), rgba(40, 24, 10, 0.55) calc(50% + 0.5px), transparent calc(50% + 0.5px)) top right / 50% 52% no-repeat;
}
.ab-page .ab-cb-envelope .env-seal {
    position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%);
    width: 28px; height: 27px;
    background: radial-gradient(circle at 38% 32%, #a82a32 0%, #8b2030 35%, #5e121c 75%, #3a0810 100%);
    border-radius: 49% 47% 51% 48% / 47% 50% 48% 51%;
    box-shadow: inset -1px -2px 3px rgba(0, 0, 0, 0.45), inset 1px 1px 2px rgba(255, 200, 180, 0.18), 0 2px 3px rgba(0, 0, 0, 0.5);
}
.ab-page .ab-cb-envelope.faded .env-seal { background: radial-gradient(circle at 38% 32%, #8a4a4e 0%, #6a3036 35%, #3e1218 75%, #2a0810 100%); opacity: 0.75; }
.ab-page .ab-cb-envelope.faded .env-body,
.ab-page .ab-cb-envelope.faded .env-flap { filter: saturate(0.55) brightness(0.92); }

/* ---- Pressed brass seal (confirm-email success) ---- */
.ab-page .ab-cb-pressed-seal {
    width: 90px; height: 86px;
    background: radial-gradient(circle at 38% 32%, #f0d080 0%, #c9a961 30%, #8a6f3a 70%, #4a3318 100%);
    border-radius: 49% 47% 51% 48% / 47% 50% 48% 51%;
    position: relative;
    box-shadow:
        inset -3px -4px 6px rgba(60, 40, 16, 0.55),
        inset 2px 3px 4px rgba(255, 235, 180, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.5),
        0 0 0 0.5px rgba(60, 40, 16, 0.55);
    margin: 4px 0 6px; flex-shrink: 0;
}
.ab-page .ab-cb-pressed-seal::after {
    content: 'T';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 40px; line-height: 1;
    color: rgba(60, 40, 16, 0.50);
    text-shadow: 0 1px 0 rgba(255, 235, 180, 0.45);
}

/* ---- Leaf notice ribbon (email not confirmed) ---- */
.ab-page .ab-leaf-notice {
    position: relative;
    padding: 10px 14px 10px 40px;
    background: rgba(201, 169, 97, 0.10);
    border-left: 2px solid var(--brass-on-parchment);
    font-family: var(--font-display); font-style: italic;
    font-size: 12.5px; line-height: 1.45;
    color: var(--ink-secondary);
    margin: 2px 0 4px; border-radius: 1px;
}
.ab-page .ab-leaf-notice::before {
    content: '!';
    position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--brass-on-parchment); color: #f8ecd4;
    font-family: var(--font-display); font-weight: 700; font-style: normal;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1;
    box-shadow: inset 0 1px 1px rgba(255, 235, 180, 0.4);
}
.ab-page .ab-leaf-notice .notice-resend {
    display: inline-block; margin-top: 5px;
    font-family: var(--font-ui);
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
    color: var(--brass-on-parchment);
    border: 0; border-bottom: 1px solid rgba(139, 106, 42, 0.50);
    padding: 0 0 1px; background: none; cursor: pointer;
    text-decoration: none; font-style: normal;
}
.ab-page .ab-leaf-notice .notice-resend:disabled { opacity: 0.55; cursor: default; }

/* ============================================================
   ONBOARDING — play-tiles + xp-chips (brass, never wax — §14.7)
   ============================================================ */
.ab-page .ab-play-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 8px; }
.ab-page button.ab-play-tile {
    appearance: none;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 18px 12px 16px; width: 100%;
    background: rgba(255, 250, 240, 0.18);
    border: 1px solid rgba(106, 74, 28, 0.30);
    border-radius: 2px;
    cursor: pointer; margin: 0; text-align: center;
    font-family: var(--font-ui); color: var(--ink-secondary);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.40) inset, 0 1px 2px rgba(106, 74, 28, 0.08);
    position: relative;
}
.ab-page button.ab-play-tile:hover { background: rgba(255, 250, 240, 0.30); border-color: rgba(106, 74, 28, 0.5); }
.ab-page button.ab-play-tile.selected {
    background: radial-gradient(ellipse at 50% 40%, rgba(255, 220, 140, 0.15) 0%, transparent 70%), rgba(201, 169, 97, 0.22);
    border: 1.5px solid rgba(139, 106, 42, 0.85);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.60) inset,
        0 0 0 1px rgba(139, 106, 42, 0.35),
        0 3px 7px rgba(106, 74, 28, 0.22),
        inset 0 -2px 4px rgba(139, 106, 42, 0.10);
}
.ab-page .ab-play-emblem {
    width: 56px; height: 56px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe8a0 0%, #f0d080 22%, var(--brass) 52%, #8a6f3a 82%, #4a3318 100%);
    box-shadow:
        inset -2px -2px 4px rgba(0, 0, 0, 0.50),
        inset 1px 2px 3px rgba(255, 255, 255, 0.42),
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(40, 24, 12, 0.55);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ab-page .ab-play-emblem svg { width: 32px; height: 32px; stroke: rgba(28, 18, 8, 0.85); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ab-page .ab-play-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1; color: var(--ink-primary); margin-top: 2px; }
.ab-page .ab-play-sub { font-family: var(--font-display); font-style: italic; font-size: 12.5px; line-height: 1.35; color: var(--ink-secondary); max-width: 200px; }

.ab-page .ab-xp-chips { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-top: 2px; }
.ab-page button.ab-xp-chip {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 8px;
    background: rgba(106, 74, 28, 0.04);
    color: var(--ink-secondary);
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 14px; line-height: 1; letter-spacing: 0.01em;
    border: 1px solid rgba(106, 74, 28, 0.30);
    border-radius: 14px;
    cursor: pointer; margin: 0; text-align: center;
}
.ab-page button.ab-xp-chip:hover { background: rgba(106, 74, 28, 0.10); border-color: rgba(106, 74, 28, 0.5); }
.ab-page button.ab-xp-chip.selected {
    background: linear-gradient(180deg, rgba(255, 220, 140, 0.18) 0%, rgba(201, 169, 97, 0.26) 100%);
    border: 1.5px solid rgba(139, 106, 42, 0.85);
    color: var(--ink-primary); font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(106, 74, 28, 0.20), 0 0 0 1px rgba(139, 106, 42, 0.18);
}
.ab-page .ab-xp-helper { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--ink-muted); margin: 7px 0 0; line-height: 1.4; }
.ab-page .ab-portrait-note { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--ink-muted); line-height: 1.4; margin: 10px 0 0; text-align: center; }
.ab-page .ab-leaf-foot { display: flex; justify-content: center; padding-top: 10px; }
.ab-page .ab-onb-form-grid { margin-top: 10px; gap: 16px; }

/* ============================================================
   Responsive (light pass — DEV-85 audits fully)
   ============================================================ */
@media (max-width: 900px) {
    .ab-page .ab-book { flex-direction: column; height: auto; max-height: none; gap: 14px; }
    .ab-page .ab-leaf.peek { display: none; }
    .ab-page .ab-book-stage { align-items: flex-start; padding-top: 4px; }
    .ab-page .ab-leaf-binding, .ab-page .ab-spine-stitches { display: none; }
    .ab-page .ab-play-tiles { grid-template-columns: 1fr; }
    .ab-page .ab-xp-chips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .ab-page .ab-content { padding: 14px 16px; }
    .ab-page .ab-leaf { padding: 20px 20px 18px; }
    .ab-page .ab-leaf-title { font-size: 27px; }
}

/* ============================================================
   MARKETING PAGES (DEV-154) — About / Code of Conduct / Contact.
   Public surfaces seated in AuthChrome's stone room. A single scrolling
   parchment sheet reusing the .ab-leaf-* prose primitives, with a brass
   cross-nav footer. Namespaced .mk-* under .ab-page. Tokens from :root.
   ============================================================ */
.ab-page .mk-sheet {
    position: relative;
    width: min(700px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: 30px 40px 26px;
    background:
        repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 30px rgba(106, 74, 28, 0.06);
    border-radius: 1px;
}

.ab-page .mk-prose {
    color: #2a2018;
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.7;
    margin-top: 10px;
}
.ab-page .mk-prose p { margin: 0 0 13px; }
.ab-page .mk-prose h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: var(--ink-primary);
    margin: 20px 0 7px;
}
.ab-page .mk-prose ul { margin: 0 0 13px; padding-left: 18px; }
.ab-page .mk-prose li { margin: 0 0 6px; }
.ab-page .mk-prose strong { color: var(--ink-primary); font-weight: 700; }
.ab-page .mk-prose a {
    color: var(--brass-on-parchment);
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 106, 42, 0.4);
    transition: color 0.14s ease, border-color 0.14s ease;
}
.ab-page .mk-prose a:hover { color: #6b4f1e; border-bottom-color: rgba(139, 106, 42, 0.8); }

/* Keeper sign-off — italic close, matches the Landing's keeper-signoff voice */
.ab-page .mk-signoff {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--brass-on-parchment);
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(106, 74, 28, 0.22);
}
.ab-page .mk-signoff .by { color: var(--ink-muted); font-size: 12px; }

@media (max-width: 560px) {
    .ab-page .mk-sheet { padding: 22px 22px 20px; }
    .ab-page .mk-prose h2 { font-size: 18px; }
}

/* DEV-87 · Waitlist signup form — seated in the marketing parchment (.ab-page .mk-sheet).
   Plain, legible field + a dark brass CTA that echoes §5.8 .btn-dark. */
.ab-page .wl-form { margin: 16px 0 8px; }
.ab-page .wl-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 6px;
}
.ab-page .wl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.ab-page .wl-input {
    flex: 1 1 220px;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 10px 12px;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink-primary);
    background: rgba(255, 252, 244, 0.7);
    border: 1px solid rgba(106, 74, 28, 0.35);
    border-radius: 1px;
    box-shadow: inset 0 1px 2px rgba(60, 44, 20, 0.12);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.ab-page .wl-input:focus {
    outline: none;
    border-color: rgba(139, 106, 42, 0.7);
    box-shadow: inset 0 1px 2px rgba(60, 44, 20, 0.12), 0 0 0 2px rgba(201, 169, 97, 0.25);
}
.ab-page .wl-input:disabled { opacity: 0.6; }
.ab-page .wl-input::placeholder { color: rgba(90, 74, 48, 0.5); }
.ab-page .wl-submit {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex: 0 0 auto;
    padding: 10px 18px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.14s ease, color 0.14s ease;
}
.ab-page .wl-submit:hover { color: var(--brass-highlight); border-color: rgba(201, 169, 97, 0.8); }
.ab-page .wl-submit:disabled { opacity: 0.55; cursor: default; }
.ab-page .wl-error {
    margin: 10px 0 0;
    color: var(--crimson);
    font-family: var(--font-ui);
    font-size: 12.5px;
}
.ab-page .wl-fine {
    margin: 4px 0 0;
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: 11.5px;
    line-height: 1.6;
}
/* DEV-167 · play/run/both intent — segmented control above the email row. */
.ab-page .wl-seg {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.ab-page .wl-seg-btn {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 96px;
    margin: 0;
    padding: 9px 14px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: rgba(255, 252, 244, 0.55);
    border: 1px solid rgba(106, 74, 28, 0.35);
    border-radius: 1px;
    box-shadow: inset 0 1px 2px rgba(60, 44, 20, 0.1);
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.ab-page .wl-seg-btn:hover { color: var(--ink-primary); border-color: rgba(139, 106, 42, 0.6); }
.ab-page .wl-seg-btn.is-on {
    color: #e8d09c;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    border-color: rgba(201, 169, 97, 0.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 200, 120, 0.15);
}
.ab-page .wl-seg-btn:disabled { opacity: 0.55; cursor: default; }

.ab-page .wl-done { margin: 8px 0 0; }
.ab-page .wl-done-mark {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #3c6b3c;
    border: 1px solid rgba(60, 107, 60, 0.5);
    border-radius: 50%;
    margin: 0 0 12px;
}

/* Global footer links (DEV-154) — seated in the wooden bottom beam of every
   chrome (BoardFooter.razor). Brass-on-wood, centered; the beam stays
   click-through except the links themselves. */
.board-footer {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 64px;
    pointer-events: none;
}
.board-footer__links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    pointer-events: auto;
}
.board-footer__link {
    font-family: var(--font-ui);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    transition: color 0.15s ease;
}
.board-footer__link:hover { color: #e8c877; }
.board-footer__sep { color: rgba(201, 169, 97, 0.4); font-size: 9.5px; }
.board-footer__copy {
    font-family: var(--font-ui);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted-on-stone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 560px) {
    .board-footer { padding: 0 20px; gap: 10px; }
    .board-footer__copy { display: none; }
}

/* ============================================================
   NOTIFICATIONS (DEV-149) — bell + drawer + full route + toast.
   Canonical source: design-previews/notifications-final.html.
   No design-system § governs this (toast was explicitly deferred);
   the locked mockup reuses onboarding/my-requests/hub vocab.
   Namespaced .nb-* so the drawer/route/toast never collide with the
   .lb-/.ab-/.hub- reskins. Tokens from the global :root; stamp tints
   are literal hex matching .lb-stamp (no new palette). Every button.nb-*
   resets explicitly — no `font:` shorthand (memory/feedback_button_reset).
   ============================================================ */

/* ---- Shared type-glyph (NotificationGlyph.razor): one line-art SVG
   per NotificationType, stamp-palette tinted. Disc + sizing supplied by
   the calling surface (.nb-slip / .nb-row / .nb-toast). ---- */
.nb-glyph {
    display: block;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke: var(--ink-primary);   /* default dark ink — chat messages */
}
.nb-glyph.tint-accepted { stroke: #3a6a4a; }
.nb-glyph.tint-pending  { stroke: #8b3a1c; }
.nb-glyph.tint-declined { stroke: var(--ink-muted); }
.nb-glyph.tint-kicked   { stroke: var(--crimson); }
.nb-glyph.tint-brass    { stroke: var(--brass-on-parchment); }

/* Brass disc the glyph sits on — the onboarding progress-dot recipe. */
.nb-glyph-disc {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 22%, var(--brass) 52%, #8a6f3a 82%, #4a3318 100%);
    box-shadow:
        inset -1px -1px 2px rgba(0, 0, 0, 0.45),
        inset 0.5px 1px 1.5px rgba(255, 255, 255, 0.40),
        0 1px 2px rgba(0, 0, 0, 0.50),
        0 0 0 0.5px rgba(40, 24, 12, 0.55);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Brass-link pseudo-link (Mark-all-read · See-all-tidings · drawer footer). */
button.nb-brass-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0; margin: 0;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--brass-on-parchment);
}
button.nb-brass-link:hover { color: var(--brass); }
button.nb-brass-link:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   BELL — brass bell in the topbar nav cluster (AppShell).
   Resting stroke dim; unread promotes to full brass + stamped coin.
   ============================================================ */
button.nb-bell {
    appearance: none;
    position: relative;
    width: 34px; height: 34px;
    background: transparent;
    border: 0;
    padding: 0; margin: 0;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.nb-bell svg {
    width: 22px; height: 24px;
    stroke: var(--brass-on-parchment);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: filter 0.2s ease, stroke 0.2s ease;
}
.nb-bell:hover svg { stroke: var(--brass); }
.nb-bell.has-unread svg { stroke: var(--brass); }

/* Stamped brass coin over the bell's upper-right with the count engraved. */
.nb-coin {
    position: absolute;
    top: -3px; right: -3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.75),
        0 0 0 0.5px rgba(40, 24, 12, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(60, 40, 16, 0.50);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
/* Inter numeral (not Cormorant — serif digits read bottom-heavy in a circle). */
.nb-coin .num {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 10px; line-height: 1;
    color: #1a0a02;
}
.nb-coin.dd .num { font-size: 8.5px; letter-spacing: -0.4px; }

/* ============================================================
   DRAWER — parchment slip hanging from the bell. The MudMenu popover
   carries .nb-pop so we neutralise Mud's paper/list chrome and lay our
   own parchment board, pinned by a single brass tack.
   ============================================================ */
.nb-pop.mud-popover {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.nb-pop .mud-list { padding: 0; background: transparent; }

.nb-drawer {
    position: relative;
    width: 380px;
    max-width: calc(100vw - 24px);
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.72),
        0 6px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
    padding: 14px 0 0;
}
/* Brass tack pinning the drawer top edge. */
.nb-drawer::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.7),
        0 0 0 0.5px rgba(40, 24, 12, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
}

.nb-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 18px 10px;
    border-bottom: 1px solid rgba(106, 74, 28, 0.22);
}
.nb-eyebrow {
    font-family: var(--font-ui);
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink-muted);
}

.nb-drawer-list { padding: 4px 0; max-height: 60vh; overflow-y: auto; }

.nb-drawer-footer {
    padding: 9px 18px 12px;
    border-top: 1px solid rgba(106, 74, 28, 0.22);
    display: flex; justify-content: center;
}

/* ---- Empty state ("The board is clear.") ---- */
.nb-drawer-empty {
    padding: 36px 18px 30px;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; text-align: center;
}
.nb-drawer-empty .bell {
    width: 36px; height: 40px;
    opacity: 0.32; margin-bottom: 4px;
}
.nb-drawer-empty .bell path {
    stroke: var(--brass-on-parchment);
    fill: none; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.nb-drawer-empty .title {
    font-family: var(--font-display); font-style: italic;
    font-weight: 500; font-size: 18px;
    color: var(--ink-secondary);
}
.nb-drawer-empty .sub {
    font-family: var(--font-ui);
    font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
    font-weight: 500; color: var(--ink-muted);
}

/* ============================================================
   SLIP — one notification row inside the drawer.
   ============================================================ */
button.nb-slip {
    appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    column-gap: 11px;
    align-items: start;
    padding: 9px 18px 9px 22px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
button.nb-slip:hover { background: rgba(106, 74, 28, 0.05); }
button.nb-slip + button.nb-slip { border-top: 1px solid rgba(106, 74, 28, 0.12); }
.nb-slip .nb-glyph-disc { width: 28px; height: 28px; }
.nb-slip .nb-glyph { width: 15px; height: 15px; }

.nb-unread-mark {
    position: absolute;
    left: 9px; top: 16px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 28%, var(--brass) 60%, #8a6f3a 88%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.5),
        0 0 5px rgba(255, 210, 130, 0.40);
}

.nb-body { min-width: 0; }
.nb-title {
    font-family: var(--font-ui);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ink-primary);
    line-height: 1.25;
    margin: 1px 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-msg {
    font-family: var(--font-display);
    font-size: 13px; line-height: 1.3;
    color: var(--ink-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-time {
    font-family: var(--font-ui);
    font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-muted);
    margin-top: 4px;
    text-align: right; white-space: nowrap;
}

/* Read slips dim. */
.nb-slip.read { opacity: 0.78; }
.nb-slip.read .nb-title { color: var(--ink-secondary); font-weight: 600; }
.nb-slip.read .nb-msg { color: var(--ink-muted); }
.nb-slip.read .nb-glyph-disc { filter: saturate(0.75) brightness(0.92); }

/* ============================================================
   FULL ROUTE /notifications — single laid leaf inside AppShell
   (the room chrome + beams already come from AppShell). Centered
   720px leaf with a hanging lantern, Unread/Read sections, older pill.
   ============================================================ */
.nb-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 24px;
}

/* Hanging lantern over the leaf (canonical 3-flame SVG, §5.9). */
.nb-page .nb-lantern {
    width: 40px; height: 50px;
    margin: 0 auto -6px;
    z-index: 1;
    pointer-events: none;
    filter:
        drop-shadow(0 0 8px rgba(255, 200, 100, 0.65))
        drop-shadow(0 0 16px rgba(255, 180, 80, 0.4));
}

.nb-page .nb-book {
    position: relative;
    width: 720px;
    max-width: 96vw;
    display: flex;
}
.nb-page .nb-leaf {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 26px 32px 22px;
    overflow: hidden;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.045) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 11px 24px rgba(0, 0, 0, 0.62),
        0 3px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 36px rgba(106, 74, 28, 0.06);
    display: flex; flex-direction: column;
    gap: 10px;
}
/* Paper-curl on the lower-right corner. */
.nb-page .nb-leaf::after {
    content: '';
    position: absolute; bottom: 0; right: 0;
    width: 42px; height: 42px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0.05) 70%, transparent 100%);
    pointer-events: none;
}
/* Crimson binding stripe at the left gutter. */
.nb-page .nb-binding {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg,
        #5a1820 0%, #7a1f28 12%, #6b1a22 50%, #7a1f28 88%, #5a1820 100%);
    box-shadow: inset 0 0 0 0.5px rgba(40, 8, 14, 0.55), 0 0 6px rgba(40, 8, 14, 0.4);
    z-index: 3;
}
/* 4 brass corner tacks. */
.nb-page .nb-tack {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(40, 24, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 4;
}
.nb-page .nb-tack.tl { top: 10px; left: 14px; }
.nb-page .nb-tack.tr { top: 10px; right: 14px; }
.nb-page .nb-tack.bl { bottom: 10px; left: 14px; }
.nb-page .nb-tack.br { bottom: 10px; right: 14px; }

.nb-page .nb-head-row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-left: 12px;
}

/* Section divider — italic Cormorant label between hairline rules. */
.nb-page .nb-section {
    display: flex; align-items: center; gap: 12px;
    margin: 6px 12px 2px;
}
.nb-page .nb-section .rule { flex: 1; height: 1px; background: rgba(106, 74, 28, 0.25); }
.nb-page .nb-section .lbl {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: 12.5px; letter-spacing: 0.06em;
    color: var(--ink-secondary);
}

.nb-page .nb-list { display: flex; flex-direction: column; }

/* A row reuses the slip layout, wider. */
button.nb-row {
    appearance: none;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    column-gap: 13px;
    align-items: start;
    padding: 9px 12px 9px 22px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
button.nb-row:hover { background: rgba(106, 74, 28, 0.05); }
button.nb-row + button.nb-row { border-top: 1px solid rgba(106, 74, 28, 0.12); }
.nb-row .nb-glyph-disc { width: 32px; height: 32px; }
.nb-row .nb-glyph { width: 17px; height: 17px; }
.nb-row .nb-unread-mark { left: 9px; top: 17px; }
.nb-row .nb-title { font-size: 12px; }
.nb-row .nb-msg { font-size: 14px; }
.nb-row.read { opacity: 0.78; }
.nb-row.read .nb-title { color: var(--ink-secondary); font-weight: 600; }
.nb-row.read .nb-msg { color: var(--ink-muted); }
.nb-row.read .nb-glyph-disc { filter: saturate(0.75) brightness(0.92); }

/* Older-tidings pill — replaces Mud's outlined "Load more". */
.nb-page .nb-older-row { display: flex; justify-content: center; padding: 12px 0 6px; }
button.nb-older {
    appearance: none;
    cursor: pointer;
    background: transparent;
    color: var(--brass-on-parchment);
    border: 1px solid rgba(106, 74, 28, 0.40);
    border-radius: 2px;
    padding: 7px 14px; margin: 0;
    font-family: var(--font-ui);
    font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
button.nb-older:hover {
    color: var(--brass);
    border-color: rgba(139, 106, 42, 0.7);
    background: rgba(201, 169, 97, 0.06);
}
button.nb-older:disabled { opacity: 0.5; cursor: default; }

/* Loading / empty states on the leaf. */
.nb-page .nb-leaf-state {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
    padding: 44px 18px 38px;
}
.nb-page .nb-leaf-state .bell { width: 40px; height: 44px; opacity: 0.32; }
.nb-page .nb-leaf-state .bell path {
    stroke: var(--brass-on-parchment); fill: none; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.nb-page .nb-leaf-state .title {
    font-family: var(--font-display); font-style: italic;
    font-weight: 500; font-size: 20px; color: var(--ink-secondary);
}
.nb-page .nb-leaf-state .sub {
    font-family: var(--font-ui);
    font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
    font-weight: 500; color: var(--ink-muted);
}

/* ============================================================
   PUSH TOAST — SignalR OnNotificationReceived. Restyles the Mud
   snackbar surface (config.SnackbarTypeClass = "nb-toast") into a
   brass-tack-pinned parchment slip. Chrome only — the snackbar
   system stays MudBlazor.
   ============================================================ */
.mud-snackbar.nb-toast {
    position: relative;
    background:
        repeating-linear-gradient(91deg,
            rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px,
            transparent 1px, transparent 3px),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    color: var(--ink-primary);
    border-radius: 3px;
    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.72),
        0 8px 14px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    padding: 12px 14px 10px;
    overflow: visible;
}
.mud-snackbar.nb-toast::before {
    content: '';
    position: absolute;
    top: -6px; left: 14px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 0 0 0.5px rgba(40, 24, 12, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Auto-dismiss timer line — brass bar draining left→right, synced to the
   default VisibleStateDuration (5s). Toast is added/removed from the DOM on
   show/hide, so the animation runs once per toast. */
.mud-snackbar.nb-toast::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 100%;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--brass) 0%, rgba(201, 169, 97, 0.25) 100%);
    box-shadow: 0 0 4px rgba(255, 210, 130, 0.5);
    animation: nb-toast-drain 5000ms linear forwards;
}
@keyframes nb-toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* The toast body we render (glyph-disc + title + msg). */
.nb-toast-body { display: grid; grid-template-columns: 32px 1fr; column-gap: 11px; align-items: center; }
.nb-toast-body .nb-glyph-disc { width: 32px; height: 32px; }
.nb-toast-body .nb-glyph { width: 17px; height: 17px; }
.nb-toast .nb-title { white-space: normal; }
.nb-toast .nb-msg { white-space: normal; }
/* The Mud action ("View") promoted to a brass link on parchment. */
.mud-snackbar.nb-toast .mud-snackbar-content-action .mud-button-root {
    font-family: var(--font-ui);
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--brass);
}
/* Mud's close × tinted to ink so it reads on parchment. */
.mud-snackbar.nb-toast .mud-snackbar-close-button .mud-icon-root { color: var(--ink-muted); }

/* ============================================================
   DEV-145 · Error pages — "the tavern's voice" (design-previews/
   error-pages-final.html). Three full-viewport stone-room surfaces, one
   tavern voice. 404 = bare brass tack (notice taken down); 403 = wax-sealed
   envelope (not for your eyes); 500 = snuffed lantern (the light went out).
   Reachable unauthed, so no AppShell — the <ErrorRoom> component supplies its
   own room chrome under the .er-page namespace. Tokens from :root; textures
   via /textures. Button reset is explicit per memory/feedback_button_reset.md
   — no `font:` shorthand.
   ============================================================ */
.er-page {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-ui);
    color: var(--text-on-stone);
}

/* ---- Room backdrop ---- */
.er-page .er-stone-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/textures/stone-wall.jpg');
    background-size: 850px;
    background-position: center;
    filter: brightness(0.6) saturate(0.85) sepia(0.18) hue-rotate(-8deg) contrast(1.05);
}

.er-page .er-candlelight {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 40% at 18% 8%, rgba(255, 195, 100, 0.45), transparent 60%),
        radial-gradient(ellipse 45% 40% at 82% 8%, rgba(255, 195, 100, 0.4), transparent 60%),
        radial-gradient(ellipse 60% 45% at 50% 100%, rgba(0, 0, 0, 0.6), transparent 65%);
}

/* ---- Timber beams (top + bottom), texture on ::before ---- */
.er-page .er-beam {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    height: 78px;
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.75), inset 0 3px 5px rgba(255, 200, 120, 0.2);
}

.er-page .er-beam::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/textures/noticeboard-wood.jpg');
    background-size: 600px auto;
    background-repeat: repeat-x;
    background-position: center;
    filter: brightness(0.55) saturate(1.15) contrast(1.1);
}

.er-page .er-beam.top { border-bottom: 1px solid rgba(0, 0, 0, 0.7); }
.er-page .er-beam.bottom { border-top: 1px solid rgba(0, 0, 0, 0.7); }

.er-page .er-bracket {
    position: absolute;
    z-index: 2;
    width: 24px;
    height: 28px;
    background: linear-gradient(180deg, #4a4540 0%, #1a1612 50%, #2a2520 100%);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.er-page .er-bracket::before,
.er-page .er-bracket::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, #1a1612 0%, #000 70%);
    border-radius: 50%;
}

.er-page .er-bracket::before { top: 5px; }
.er-page .er-bracket::after { bottom: 5px; }
.er-page .er-beam.top .er-bracket-l { left: 18px; bottom: 6px; }
.er-page .er-beam.top .er-bracket-r { right: 18px; bottom: 6px; }
.er-page .er-beam.bottom .er-bracket-l { left: 18px; top: 6px; }
.er-page .er-beam.bottom .er-bracket-r { right: 18px; top: 6px; }

/* ---- Content column (seats between the beams) ---- */
.er-page .er-content {
    position: relative;
    z-index: 3;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px;
}

/* ---- Noticeboard fragment — intimate close-up of the board, NOT a full
   board, so the surface reads "close-up on a piece of the board." ---- */
.er-page .er-fragment {
    position: relative;
    width: 420px;
    max-width: 86vw;
    height: 320px;
    margin-bottom: 36px;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.75),
        0 5px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 200, 120, 0.15);
    overflow: visible;
}

.er-page .er-fragment::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url('/textures/noticeboard-wood.jpg');
    background-size: auto, 900px;
    background-position: center, center;
    filter: brightness(0.78) saturate(1.05) contrast(1.05);
    pointer-events: none;
    z-index: 0;
}

/* 500 variant — darker, because the lantern above it has gone out. */
.er-page .er-fragment.dark::before {
    filter: brightness(0.42) saturate(1.05) contrast(1.05);
}

/* ---- 404 · the bare tack ---- */
.er-page .er-tack {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        #ffe8a0 0%, #f0d080 25%, var(--brass) 55%, #8a6f3a 85%, #4a3318 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 0 0.5px rgba(40, 24, 12, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(60, 40, 16, 0.4);
    z-index: 4;
}

/* ---- 403 · sealed folded letter (back-of-envelope) ---- */
.er-page .er-envelope {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
    transform-origin: center;
    width: 260px;
    height: 180px;
    z-index: 3;
}

.er-page .er-envelope-body {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.06) 0%, transparent 40%),
        linear-gradient(178deg, #f8ecd4 0%, #f0e0c0 50%, #e8d8b8 100%);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.65),
        0 5px 10px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.er-page .er-envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 50% 50%);
    background:
        repeating-linear-gradient(91deg, rgba(150, 110, 60, 0.025) 0px, rgba(150, 110, 60, 0.025) 1px, transparent 1px, transparent 3px),
        radial-gradient(ellipse at 18% 22%, rgba(160, 120, 70, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(140, 100, 60, 0.06) 0%, transparent 40%),
        linear-gradient(178deg, #f3e7cf 0%, #ebdbbb 50%, #e3d3b3 100%);
    filter:
        drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.55))
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
    z-index: 4;
}

.er-page .er-envelope-folds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background:
        linear-gradient(to top right,
            transparent calc(50% - 0.6px),
            rgba(40, 24, 10, 0.55) calc(50% - 0.6px),
            rgba(40, 24, 10, 0.55) calc(50% + 0.6px),
            transparent calc(50% + 0.6px))
            top left / 50% 50% no-repeat,
        linear-gradient(to top left,
            transparent calc(50% - 0.6px),
            rgba(40, 24, 10, 0.55) calc(50% - 0.6px),
            rgba(40, 24, 10, 0.55) calc(50% + 0.6px),
            transparent calc(50% + 0.6px))
            top right / 50% 50% no-repeat;
}

.er-page .er-envelope-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 50px;
    background: radial-gradient(circle at 38% 32%,
        #a82a32 0%, #8b2030 35%, #5e121c 75%, #3a0810 100%);
    border-radius: 49% 47% 51% 48% / 47% 50% 48% 51%;
    box-shadow:
        inset -2px -3px 5px rgba(0, 0, 0, 0.45),
        inset 2px 2px 3px rgba(255, 200, 180, 0.18),
        0 3px 6px rgba(0, 0, 0, 0.5),
        0 0 0 0.5px rgba(40, 8, 14, 0.6);
    z-index: 6;
}

.er-page .er-envelope-seal::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 -1px 0 rgba(255, 220, 200, 0.10);
}

/* ---- 500 · snuffed lantern (hangs in the alcove, no wood beneath) ---- */
.er-page .er-snuffed {
    position: relative;
    width: 90px;
    height: 200px;
    margin-bottom: 36px;
    pointer-events: none;
}

.er-page .er-snuffed .smoke {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 70px;
    background:
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(160, 155, 150, 0.65) 0%, transparent 70%),
        radial-gradient(ellipse 80% 100% at 50% 60%, rgba(130, 125, 120, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 30%, rgba(110, 105, 100, 0.20) 0%, transparent 70%);
    filter: blur(2.5px);
}

.er-page .er-snuffed .er-snuffed-lantern {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 110px;
}

.er-page .er-snuffed .ember {
    position: absolute;
    top: 122px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #d8804a 0%, #803020 60%, transparent 100%);
    filter: blur(0.5px);
    box-shadow: 0 0 6px rgba(216, 128, 74, 0.5);
}

/* ---- The tavern's voice — typography on stone, below the motif ---- */
.er-page .er-voice {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 460px;
    color: var(--text-on-stone);
}

.er-page .er-eyebrow {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted-on-stone);
    margin-bottom: 10px;
}

.er-page .er-title {
    font-family: var(--font-display), 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 30px;
    line-height: 1.1;
    color: var(--text-on-stone);
    margin: 0 0 12px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.er-page .er-body {
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted-on-stone);
    margin: 0 auto 22px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* CTA — brass-bordered dark button (§5.8). Explicit reset, no `font:`. */
button.er-cta {
    cursor: pointer;
    margin: 0;
}

.er-page .er-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #2a1a0c 0%, #1a1208 100%);
    color: #e8d09c;
    font-family: var(--font-ui), 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid rgba(201, 169, 97, 0.5);
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 200, 120, 0.15);
    white-space: nowrap;
    text-decoration: none;
}

.er-page .er-cta:hover {
    color: #f0d896;
    border-color: rgba(201, 169, 97, 0.75);
}

@media (max-width: 560px) {
    .er-page .er-fragment { height: 260px; }
    .er-page .er-title { font-size: 26px; }
}

/* ============================================================
   DEV-85 · Touch targets (kept at end of file on purpose).
   The inline action icons are 22–34px, below the 44px minimum tap
   target. On narrow (touch) viewports grow the hit area to 44px;
   the glyph stays centred and unchanged — only the tappable box
   grows. This block lives at the end so it wins over the base
   .lb-ico / .hub-ico / .chat-ico rules (equal specificity, defined
   earlier in the file). Right-aligned icon clusters sit in `auto`
   grid columns, so wider boxes are absorbed by the row's `1fr`
   column without introducing horizontal overflow.
   ============================================================ */
@media (max-width: 600px) {
    .lb-page .lb-ico,
    .lb-page .chat-ico,
    .hub-page .hub-ico,
    button.nb-bell { width: 44px; height: 44px; }
}