/* ────────────────────────────────────────────────────────────
   Riverside Volunteer Manager — brand styles
   Palette from riversidecrc.ca:
     lime   #BAD236   (nav bar, logo "CRC")
     teal   #3085A3   (links, accents)
     ink    #151515   (text)
     grey   #9B9B9B   (muted text)
   Fonts: Lato (body), Merriweather (headings)
   ──────────────────────────────────────────────────────────── */
:root {
    --rv-lime: #BAD236;
    --rv-lime-dark: #B1AC1A;
    --rv-teal: #3085A3;
    --rv-ink: #151515;
    --rv-grey: #5F6368;
}

/* App bar: white like the church site header, with the lime rule underneath */
.riverside-appbar {
    border-bottom: 5px solid var(--rv-lime);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.riverside-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--rv-ink);
    margin-left: 6px;
}
.riverside-brand-logo {
    height: 38px;
    width: auto;
    display: block;
}
.riverside-brand-text {
    font-family: Merriweather, Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .01em;
    white-space: nowrap;
}
/* Search box in the top bar */
.riverside-search { width: 340px; max-width: 40vw; margin: 0 12px; }
.riverside-search .mud-input-outlined { background: #fff; }
.riverside-search .mud-input-control { margin: 0; }

@media (max-width: 600px) {
    .riverside-brand-text { display: none; }
    .riverside-search { flex: 1; width: auto; max-width: none; margin: 0 6px; min-width: 0; }
    .mud-main-content { padding-left: 10px !important; padding-right: 10px !important; }
    .riverside-hide-xs { display: none !important; }
    .riverside-account-name { display: none; }
    .riverside-brand-logo { height: 32px; }
}

/* Account menu, top right: avatar + name on desktop, avatar alone on phones. */
.riverside-account-btn {
    text-transform: none;
    color: var(--rv-ink);
    padding: 4px 8px;
    min-width: 0;
    border-radius: 24px;
}
.riverside-account-btn .mud-button-label { display: flex; align-items: center; gap: 8px; }
.riverside-account-name { font-weight: 600; font-size: .9rem; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.riverside-avatar { font-size: .8rem; font-weight: 700; background-color: var(--rv-lime); color: var(--rv-ink); }

/* Drawer / navigation */
.riverside-drawer {
    border-right: 1px solid #e5e7e9;
}
.riverside-nav-caption {
    display: block;
    padding: 14px 16px 6px;
    color: var(--rv-teal);
    font-weight: 700;
    letter-spacing: .12em;
    font-size: .7rem;
}
.riverside-drawer .mud-nav-link {
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--rv-ink);
    border-left: 4px solid transparent;
}
.riverside-drawer .mud-nav-link:hover {
    background-color: rgba(186, 210, 54, .18);
}
.riverside-drawer .mud-nav-link.active {
    background-color: rgba(186, 210, 54, .28);
    border-left-color: var(--rv-lime);
    color: var(--rv-ink);
}
.riverside-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--rv-teal);
}

/* Login / password pages */
.riverside-login-logo {
    height: 64px;
    width: auto;
}
.riverside-auth .mud-card {
    border-top: 5px solid var(--rv-lime);
}
.riverside-muted {
    color: var(--rv-grey);
}

/* Headings in Merriweather, like the church site */
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    color: var(--rv-ink);
}

/* Filled primary buttons: flat, uppercase, bold — matches the site nav */
.mud-button-filled.mud-button-filled-primary {
    text-transform: uppercase;
}

/* Table header tint */
.mud-table-head .mud-table-cell {
    background-color: #f2f3f8;
    font-weight: 700;
    color: var(--rv-ink);
}

.riverside-version {
    margin-left: 10px;
    font-size: .72rem;
    color: var(--rv-grey);
    align-self: flex-end;
    padding-bottom: 14px;
    cursor: default;
    white-space: nowrap;
}

/* Collapsible admin groups: group headings read like the section captions, nested links sit in a touch. */
.riverside-drawer .mud-nav-group > .mud-nav-link {
    font-weight: 700;
    color: var(--rv-teal);
}
.riverside-drawer .mud-nav-group .mud-nav-group-content .mud-nav-link {
    font-weight: 600;
    padding-left: 28px;
    font-size: .9rem;
}

/* ── Phone tab bar (MainLayout): the main places one tap away, like an app. Phones only; never printed. ── */
.rv-tabbar { display: none; }
@media (max-width: 599.98px) {
    .rv-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250;
        background: #fff; border-top: 1px solid #e3e6da; box-shadow: 0 -2px 8px rgba(0,0,0,.06);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .rv-tabbar a, .rv-tabbar button {
        flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        padding: 7px 2px 6px; min-height: 56px; color: #5f6368; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer;
    }
    .rv-tabbar span { font-size: .68rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .rv-tabbar .on { color: var(--rv-teal); font-weight: 700; }
    .rv-tabbar a:focus-visible, .rv-tabbar button:focus-visible { outline: 2px solid var(--rv-teal); outline-offset: -2px; }
    /* room under the page so the bar never covers the last lines */
    .mud-main-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
    .riverside-drawer .mud-drawer-content { padding-bottom: 72px; }
}
@media print { .rv-tabbar { display: none !important; } }

/* ── Household photo framing (PhotoCropDialog + js/photocrop.js) ── */
.rvc-box { position: relative; display: inline-block; max-width: 100%; overflow: hidden; line-height: 0; user-select: none; border-radius: 6px; }
.rvc-box img { display: block; max-width: 100%; max-height: 60vh; }
.rvc-frame { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; touch-action: none; }
.rvc-frame:focus-visible { outline: 3px solid var(--rv-lime); }
.rvc-frame::before, .rvc-frame::after { content: ""; position: absolute; border: 0 dashed rgba(255,255,255,.55); pointer-events: none; }
.rvc-frame::before { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-left-width: 1px; border-right-width: 1px; }
.rvc-frame::after { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-top-width: 1px; border-bottom-width: 1px; }
.rvc-handle { position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--rv-teal); cursor: nwse-resize; touch-action: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PHONE LAYOUT (under 600 px) — one look for every list on a phone (see the phone-layout mockups).
   • rv-phone / rv-desk: show one of two layouts of the same thing (RvPhone / RvDesktop components).
   • RvItem rows: date tile or avatar, bold title, grey line, tags, something on the right.
   • Every other MudTable that stacks on a phone gets the same compact row look automatically (below),
     so no page shows the old "Label ……… value" ladder.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
    --rv-ink2: #1F2A2E;   /* row titles */
    --rv-sub: #5F6368;    /* grey lines (4.5:1 on white) */
    --rv-line: #ECEEE6;
    --rv-tile: #F1F3EC;
    --rv-teal-dark: #21677F;  /* teal dark enough for white text and small links */
}
.rv-phone, .rv-phone-inline { display: none !important; }
.rv-desk-inline { display: contents; }
@media (max-width: 599.98px) {
    .rv-phone { display: block !important; }
    .rv-phone-inline { display: inline-flex !important; }
    .rv-desk, .rv-desk-inline { display: none !important; }
}

/* ── list rows ── */
.rv-list { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); margin-bottom: 12px; }
.rv-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; min-height: 48px; border-bottom: 1px solid var(--rv-line); background: #fff; }
.rv-list > .rv-item:last-child { border-bottom: 0; }
.rv-item-card { border-radius: 14px; border-bottom: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); margin-bottom: 10px; }
.rv-item-hi { background: #F6FAE6; }
.rv-item-lead { flex: none; }
.rv-item-main { flex: 1; min-width: 0; }
.rv-item-title { font-weight: 700; font-size: .95rem; color: var(--rv-ink2); line-height: 1.3; overflow-wrap: anywhere; }
.rv-item-sub { font-size: .82rem; color: var(--rv-sub); margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.rv-item-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rv-item-body { margin-top: 6px; font-size: .85rem; }
.rv-item-body:empty, .rv-item-meta:empty, .rv-item-sub:empty { display: none; }
.rv-item-trail { flex: none; display: flex; align-items: center; gap: 4px; position: relative; z-index: 1; text-align: right; }
.rv-item-chev { flex: none; color: #9AA096; }
/* the whole row opens the link; buttons on the right stay clickable above it */
.rv-item-link { color: inherit; text-decoration: none; }
.rv-item-link::after { content: ""; position: absolute; inset: 0; }
.rv-item-link:focus-visible { outline: none; }
.rv-item-link:focus-visible::after { outline: 2px solid var(--rv-teal); outline-offset: -2px; border-radius: inherit; }
.rv-item-btn { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.rv-item-body a, .rv-item-body button, .rv-item-meta a, .rv-item-meta button, .rv-item-sub a { position: relative; z-index: 1; }
.rv-item:has(.rv-item-link):active { background: #F4F5F0; }

.rv-group { font-weight: 900; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-sub); padding: 14px 4px 6px; }

/* the right-hand number ("41 turning", "24 years") */
.rv-num { text-align: center; min-width: 42px; }
.rv-num b { display: block; font-weight: 900; font-size: 1.15rem; line-height: 1; color: var(--rv-ink2); }
.rv-num small { display: block; font-size: .68rem; color: var(--rv-sub); margin-top: 2px; }
.rv-num.teal, .rv-num-teal { background: none !important; }   /* MudBlazor's own .teal would fill the box */
.rv-num.teal b, .rv-num-teal b { color: var(--rv-teal-dark); }

.rv-date { width: 44px; text-align: center; border-radius: 10px; background: var(--rv-tile); padding: 5px 0 4px; }
.rv-date-top { display: block; font-weight: 700; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--rv-sub); }
.rv-date-day { display: block; font-weight: 900; font-size: 1.15rem; line-height: 1.1; color: var(--rv-ink2); }
.rv-date-accent { background: #E6F0F3; } .rv-date-accent .rv-date-top { color: var(--rv-teal-dark); }
.rv-date-today { background: var(--rv-teal-dark); } .rv-date-today .rv-date-top, .rv-date-today .rv-date-day { color: #fff; }

.rv-avatar { width: 40px; height: 40px; border-radius: 50%; background: #DDE6E9; color: var(--rv-teal-dark); font-weight: 900; font-size: .85rem; display: flex; align-items: center; justify-content: center; object-fit: cover; }

.rv-tag { display: inline-block; font-weight: 700; font-size: .7rem; border-radius: 999px; padding: 2px 8px; line-height: 1.5; white-space: nowrap; }
.rv-tag-neutral { color: #3F443B; background: #ECEEE6; }
.rv-tag-info { color: #174D5F; background: #E6F0F3; }
.rv-tag-ok { color: #14532D; background: #DDF1E4; }
.rv-tag-warn { color: #7A4100; background: #FDEBD7; }
.rv-tag-bad { color: #9B1C14; background: #FCE4E1; }

.rv-seg { display: flex; background: #E9EBE3; border-radius: 10px; padding: 3px; }
.rv-seg button { flex: 1; border: 0; background: none; font: inherit; font-weight: 700; font-size: .82rem; color: #4A4F45; border-radius: 8px; min-height: 36px; padding: 0 10px; cursor: pointer; }
.rv-seg button.on { background: #fff; color: var(--rv-ink2); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.rv-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
.rv-chips::-webkit-scrollbar { display: none; }
.rv-chip { flex: none; min-height: 36px; border-radius: 999px; border: 1px solid #D6D9CF; background: #fff; font: inherit; font-weight: 700; font-size: .82rem; color: var(--rv-ink2); padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.rv-chip.on { background: var(--rv-ink2); color: #fff; border-color: var(--rv-ink2); }
.rv-chip i { font-style: normal; font-weight: 900; font-size: .68rem; background: var(--rv-lime); color: var(--rv-ink2); border-radius: 999px; padding: 1px 6px; }

.rv-pill { min-height: 36px; border-radius: 999px; border: 1px solid #CFE0E6; background: #F2F8FA; color: #174D5F; font-weight: 700; font-size: .82rem; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.rv-icon-btn { width: 44px; height: 44px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--rv-ink2); padding: 0; border-radius: 10px; cursor: pointer; }
.rv-swap { min-height: 40px; border: 1px solid #D9A441; color: #7A4F00; background: #FFF8EA; border-radius: 10px; font: inherit; font-weight: 700; font-size: .82rem; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* options button + bottom sheet (RvOptions) */
.rv-opt-btn { position: relative; width: 44px; height: 40px; border: 1px solid #D6D9CF; border-radius: 10px; background: #fff; color: var(--rv-ink2); align-items: center; justify-content: center; cursor: pointer; flex: none; }
.rv-opt-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #B45309; }
.rv-sheet-backdrop { position: fixed; inset: 0; background: rgba(20,28,30,.45); z-index: 1400; }
.rv-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1401; background: #fff; border-radius: 20px 20px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.18); max-height: 85vh; overflow-y: auto; }
.rv-sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: #D6D9CF; margin: 0 auto 10px; }
.rv-sheet-head { display: flex; align-items: center; }
.rv-sheet-title { flex: 1; font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--rv-ink2); }
.rv-sheet-body { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 6px 0 12px; }
.rv-sheet-body > * { margin: 0 !important; }
.rv-sheet-body .mud-button-root { min-height: 46px; width: 100%; justify-content: center; }
.rv-sheet-body .mud-input-control { width: 100% !important; }
.rv-sheet-done { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--rv-teal-dark); color: #fff; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; }

/* floating "add" button (RvFab) — phones only, above the tab bar */
.rv-fab { display: none; }
@media (max-width: 599.98px) {
    .rv-fab { display: inline-flex; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1200; height: 52px; border-radius: 16px; border: 0;
              background: var(--rv-teal-dark); color: #fff; font: inherit; font-weight: 700; font-size: .95rem; padding: 0 18px; align-items: center; gap: 8px;
              box-shadow: 0 4px 12px rgba(0,0,0,.22); text-decoration: none; cursor: pointer; }
}

/* ── page furniture on a phone ── */
@media (max-width: 599.98px) {
    /* a page with a floating add button: room under the last row so the button never covers it */
    .mud-main-content:has(.rv-fab) { padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
    .mud-main-content .mud-typography-h4 { font-size: 1.45rem; line-height: 1.25; }
    .mud-main-content .mud-typography-h5 { font-size: 1.2rem; }
    .mud-main-content .mud-typography-h4 > .mud-icon-root:first-child { display: none; }   /* the icon before a page title: the title alone reads better */
    /* a title row with buttons: buttons wrap under the title and get smaller */
    .mud-main-content .d-flex:has(> .mud-typography-h4) { flex-wrap: wrap; gap: 8px; }
    .mud-main-content .d-flex:has(> .mud-typography-h4) > .mud-typography-h4 { flex: 1 1 100%; }
    .mud-main-content .d-flex:has(> .mud-typography-h4) .mud-button-root:not(.mud-icon-button) { font-size: .75rem; padding: 4px 10px; min-height: 36px; }
    .mud-main-content .mud-paper { border-radius: 14px; }
    .mud-main-content .mud-tabs-toolbar .mud-tab { min-width: 0; padding: 6px 12px; font-size: .8rem; }

    /* ── every stacked MudTable becomes compact rows (pages without a hand-made phone list) ── */
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-container { overflow: visible; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-body { border-top: 0; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-body .mud-table-row { display: block; position: relative; padding: 10px 14px; border-bottom: 1px solid var(--rv-line); background: #fff; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-body .mud-table-row:last-child { border-bottom: 0; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-row .mud-table-cell:last-child { border-bottom: 0; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell,
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table).mud-table-dense .mud-table-cell { display: block; padding: 1px 0 !important; border: 0 !important; font-size: .84rem; color: var(--rv-ink2); min-height: 0; text-align: start !important; overflow-wrap: anywhere; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell::before { content: attr(data-label); display: inline; font-weight: 400; font-size: .78rem; color: var(--rv-sub); padding: 0 6px 0 0 !important; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell[data-label=""]::before, :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell:not([data-label])::before { content: none; }
    /* the first column is the row's title */
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-body .mud-table-row > .mud-table-cell:first-child { font-size: .98rem; font-weight: 700; padding-bottom: 3px !important; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-body .mud-table-row > .mud-table-cell:first-child::before { content: none; }
    /* a column of buttons sits on one line at the end */
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell:has(> .mud-icon-button), :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell:has(> .mud-button-root):not(:first-child) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding-top: 4px !important; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell:has(> .mud-icon-button)::before { content: none; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-cell .mud-input-control { margin-top: 2px; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-smalldevices-sortselect { padding: 4px 14px 8px; }
    :is(.mud-xs-table,.mud-sm-table,.mud-md-table,.mud-lg-table,.mud-xl-table,.mud-xxl-table) .mud-table-body .mud-table-cell.rv-empty-cell:not(:first-child) { display: none !important; }
    /* plain tables (MudSimpleTable) scroll sideways inside their card instead of squeezing */
    .mud-simple-table .mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mud-simple-table table { min-width: 100%; }
    .mud-simple-table th { white-space: nowrap; }
    .mud-simple-table td { min-width: 6.5rem; }
}

/* ── Readable lime ──
   The theme's Secondary colour is the Riverside lime, which is too light for text on white (about 1.6:1). Text, links
   and icons in that colour read as grey or a dark olive instead; lime stays as a fill (filled buttons, chips, the
   header rule) where its dark text sits on top. */
.mud-secondary-text { color: #5F6368 !important; }                                   /* explanation text under page titles */
a.mud-secondary-text, .mud-link.mud-secondary-text { color: var(--rv-teal-dark) !important; }
.mud-icon-button.mud-secondary-text, .mud-icon-root.mud-secondary-text, .mud-svg-icon.mud-secondary-text { color: #5C6B10 !important; }
.mud-button-outlined-secondary, .mud-button-text-secondary { color: #4E5A0E; border-color: #A7BE2C; }
.mud-chip-outlined.mud-chip-color-secondary, .mud-chip-text.mud-chip-color-secondary { color: #4E5A0E; border-color: #A7BE2C; }
.mud-alert-text-secondary, .mud-alert-outlined-secondary { color: #3F4A0B !important; }

/* AddressInput: one address in separate boxes */
.rv-addr-label { font-size: .8rem; color: var(--mud-palette-text-secondary); margin: 4px 0 -2px; }
.rv-addr-row { display: grid; gap: 0 12px; }
.rv-addr-row.r1 { grid-template-columns: 76px 104px minmax(0, 1fr) 96px; }
.rv-addr-row.r2 { grid-template-columns: minmax(0, 1fr) 110px 120px; }
.rv-addr-help { font-size: .78rem; color: var(--rv-grey); margin-top: 4px; overflow-wrap: anywhere; }
.rv-addr-help.warn { color: #8a5300; }
@media (max-width: 599.98px) {
    .rv-addr-row.r1 { grid-template-columns: 72px minmax(0, 1fr); }
    .rv-addr-row.r1 .rv-addr-street { grid-column: 1 / -1; }
    .rv-addr-row.r1 .rv-addr-box { grid-column: 1 / 2; }
    .rv-addr-row.r2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rv-addr-row.r2 .rv-addr-city { grid-column: 1 / -1; }
}

/* ── slide previews: a screen in miniature, as Riverside Presenter shows it ── */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--spw, 240px), 1fr)); gap: 10px; }
.sp { position: relative; }
.sp-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 5% 6%; }
.sp-text { width: 100%; max-height: 100%; text-align: center; line-height: 1.22; font-weight: 600; overflow-wrap: anywhere; }
.sp-text.shadow { text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.sp-text b { font-weight: 800; }
.sp-text .large { font-size: 1.25em; }
.sp-text .small { font-size: .75em; }
.sp-text .gap { display: inline-block; height: .5em; }
.sp-text.title { font-weight: 700; }
.sp-text .part { font-size: .55em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: .25em; }
.sp-text .loudtext.bold { font-weight: 800; }
.sp-text .quiettext { font-weight: 400; }
.sp-cap { display: flex; justify-content: space-between; font-size: .72rem; color: var(--mud-palette-text-secondary); margin-top: 2px; gap: 6px; }
.sp-cap .grp { font-weight: 600; }
.sp.tight .sp-screen { outline: 2px solid var(--mud-palette-warning); }
.sp.tight .sp-cap .warn { display: inline; }
.sp-cap .warn { display: none; color: var(--mud-palette-warning); font-weight: 600; }
.sp.off .sp-screen { opacity: .3; filter: grayscale(1); }
.lyrics-box { width: 100%; box-sizing: border-box; font-family: Consolas, "Cascadia Mono", monospace; font-size: .9rem; line-height: 1.45; padding: 10px 12px;
  border: 1px solid var(--mud-palette-lines-inputs); border-radius: 4px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); resize: vertical; }
.lyrics-box:focus { outline: 2px solid var(--mud-palette-primary); border-color: transparent; }
.fmt-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.fmt-bar .mud-button-root { min-width: 0; }