/* ==========================================================================
   RecordedMinistry.com - site stylesheet
   Loaded after /css/pico.min.css (Pico CSS v2, https://picocss.com, MIT).

   1. Palette      <- edit colours here, nowhere else
   2. Pico mapping
   3. Base
   4. Layout (header, tabs, page, footer)
   5. Components
   6. Legacy compatibility (old table-based markup)
   ========================================================================== */


/* 1. PALETTE ---------------------------------------------------------------
   Change these values to re-theme the whole site. Hover, focus and tint
   shades are derived from them automatically.                              */

:root {
    --rm-accent:  #3b5bdb;   /* links, buttons, current tab */
    --rm-bg:      #f5f6f8;   /* page background */
    --rm-surface: #ffffff;   /* cards, header */
    --rm-text:    #1f2328;   /* body text */
    --rm-heading: #111418;   /* headings */
    --rm-muted:   #656d76;   /* secondary text */
    --rm-border:  #e2e5ea;   /* lines and outlines */
    --rm-notice:  #b45309;   /* flash messages */
    --rm-radius:  0.625rem;  /* corner rounding */
}

/* Dark theme. Chosen with the header toggle, or the device setting until a
   visitor picks one (js/theme.js sets data-theme on <html>).              */
:root[data-theme=dark] {
    --rm-accent:  #8aa2ff;
    --rm-bg:      #121418;
    --rm-surface: #1a1d23;
    --rm-text:    #d5d9e0;
    --rm-heading: #f0f2f5;
    --rm-muted:   #949ba8;
    --rm-border:  #2a2f38;
    --rm-notice:  #f5b153;
}


/* 2. PICO MAPPING ----------------------------------------------------------
   Feeds the palette into Pico, for both themes. The selectors are as specific
   as Pico's own theme selectors and come later, so these win.             */

:root:not([data-theme=dark]),
:root[data-theme=dark] {
    --rm-accent-hover: color-mix(in srgb, var(--rm-accent) 82%, var(--rm-text));
    --rm-accent-tint:  color-mix(in srgb, var(--rm-accent) 10%, var(--rm-surface));

    --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --pico-border-radius: var(--rm-radius);

    --pico-background-color: var(--rm-bg);
    --pico-color: var(--rm-text);
    --pico-muted-color: var(--rm-muted);
    --pico-muted-border-color: var(--rm-border);
    --pico-table-border-color: var(--rm-border);
    --pico-h1-color: var(--rm-heading);
    --pico-h2-color: var(--rm-heading);
    --pico-h3-color: var(--rm-heading);
    --pico-h4-color: var(--rm-heading);
    --pico-h5-color: var(--rm-heading);
    --pico-h6-color: var(--rm-heading);

    --pico-primary: var(--rm-accent);
    --pico-primary-background: var(--rm-accent);
    --pico-primary-border: var(--rm-accent);
    --pico-primary-underline: color-mix(in srgb, var(--rm-accent) 45%, transparent);
    --pico-primary-hover: var(--rm-accent-hover);
    --pico-primary-hover-background: var(--rm-accent-hover);
    --pico-primary-hover-border: var(--rm-accent-hover);
    --pico-primary-hover-underline: var(--rm-accent-hover);
    --pico-primary-focus: color-mix(in srgb, var(--rm-accent) 35%, transparent);
    --pico-primary-inverse: var(--rm-surface);

    --pico-card-background-color: var(--rm-surface);
    --pico-card-sectioning-background-color: color-mix(in srgb, var(--rm-surface) 96%, var(--rm-text));
    --pico-card-box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 0 0 1px var(--rm-border);
    --pico-dropdown-background-color: var(--rm-surface);
    --pico-dropdown-border-color: var(--rm-border);
    --pico-dropdown-hover-background-color: var(--rm-accent-tint);
    --pico-form-element-background-color: var(--rm-surface);
    --pico-form-element-border-color: color-mix(in srgb, var(--rm-border) 70%, var(--rm-muted));
    --pico-form-element-focus-color: var(--rm-accent);
    --pico-form-element-active-border-color: var(--rm-accent);
}

/* Keep the type size steady (Pico grows it on large screens) */
:root { --pico-font-size: 100%; }
@media (min-width: 1024px) { :root { --pico-font-size: 106.25%; } }


/* 3. BASE ------------------------------------------------------------------ */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { --pico-text-decoration: none; }
a:hover { --pico-text-decoration: underline; }

h1 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }

/* Pico makes every input full width: keep buttons and short fields natural */
[type=submit], [type=button], [type=reset] { width: auto; }

img { max-width: 100%; height: auto; }

.muted { color: var(--rm-muted); }
.small { font-size: .875rem; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}


/* 4. LAYOUT ---------------------------------------------------------------- */

/* Header bar */
body > .site-header, body > .site-footer { padding-block: 0; }
.site-header {
    background: var(--rm-surface);
    border-bottom: 1px solid var(--rm-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
}
.brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--rm-heading);
}
.brand span { color: var(--rm-accent); }
.brand:hover { --pico-text-decoration: none; }
.header-link { font-weight: 500; }

/* Account dropdown (Pico details.dropdown) */
.account-menu { margin: 0; }
.site-header details.dropdown.account-menu > summary:not([role]) {
    border: 0;
    background-color: transparent;
    box-shadow: none;
    height: auto;
    padding: .4rem .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--rm-text);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-header details.dropdown.account-menu > summary:not([role])::after { float: none; margin: 0; flex: none; }
.site-header details.dropdown.account-menu > summary:not([role]):hover { color: var(--rm-accent); }
.account-menu > ul {
    left: auto;
    right: 0;
    min-width: 11rem;
}

.site-header__actions { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.site-header__actions .account-menu { min-width: 0; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.brand { flex: none; }
@media (max-width: 480px) {
    .brand { font-size: 1rem; }
    .site-header details.dropdown.account-menu > summary:not([role]) { max-width: 7.5rem; }
}

/* Light / dark switch */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    border: 1px solid var(--rm-border);
    background: transparent;
    color: var(--rm-text);
}
.theme-toggle:hover, .theme-toggle:focus { background: var(--rm-accent-tint); color: var(--rm-accent); border-color: var(--rm-border); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .icon-sun { display: none; }
[data-theme=dark] .theme-toggle .icon-sun { display: block; }
[data-theme=dark] .theme-toggle .icon-moon { display: none; }
.no-js .theme-toggle { display: none; }

/* Main menu: inline on wide screens, in the drawer below 1024px */
.site-nav { flex: 1; min-width: 0; padding: 0; }
.site-nav ul { display: flex; gap: .15rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.site-nav li { list-style: none; margin: 0; padding: 0; }
.site-nav a {
    display: block;
    white-space: nowrap;
    padding: .4rem .65rem;
    margin: 0;
    border-radius: .5rem;
    color: var(--rm-muted);
    font-weight: 500;
}
.site-nav a:hover { color: var(--rm-text); background: var(--rm-accent-tint); --pico-text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--rm-accent); background: var(--rm-accent-tint); }

/* Drawer (Pico styles a bare <details>, so reset it) */
.site-menu { position: static; margin: 0; padding: 0; border: 0; }
.site-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: 0;
    border-radius: .5rem;
    border: 1px solid var(--rm-border);
    color: var(--rm-text);
    cursor: pointer;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary::after { display: none; }
.site-menu[open] > summary { margin-bottom: 0; }
.site-menu > summary:hover { color: var(--rm-accent); background: var(--rm-accent-tint); }
.site-menu > summary svg { width: 1.2rem; height: 1.2rem; }
.site-menu .icon-close, .site-menu[open] .icon-menu { display: none; }
.site-menu[open] .icon-close { display: block; }
.site-menu__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    padding: .5rem var(--pico-spacing) 1rem;
    background: var(--rm-surface);
    border-bottom: 1px solid var(--rm-border);
    box-shadow: 0 12px 24px rgb(0 0 0 / .08);
}
/* (Pico lays every nav and nav ul out as a row with negative margins) */
.site-menu__panel { display: block; }
.site-menu .site-menu__panel ul { display: block; margin: 0; padding: 0; }
.site-menu__panel li { display: block; list-style: none; margin: 0; padding: 0; }
.site-menu__panel a {
    display: block;
    margin: 0;
    padding: .7rem .75rem;
    border-radius: .5rem;
    color: var(--rm-text);
    font-weight: 500;
}
.site-menu__panel a:hover { background: var(--rm-accent-tint); --pico-text-decoration: none; }
.site-menu__panel a[aria-current="page"] { color: var(--rm-accent); background: var(--rm-accent-tint); }
.site-menu__account { margin-top: .5rem !important; padding-top: .5rem !important; border-top: 1px solid var(--rm-border); }
.site-menu__name { padding: .5rem .75rem; font-size: .875rem; font-weight: 600; color: var(--rm-muted); }
@media (min-width: 1024px) {
    .site-menu { display: none; }
}
@media (max-width: 1023.98px) {
    .site-nav, .site-header__actions .account-menu, .site-header__actions .header-link { display: none; }
    .site-header__bar { position: relative; }
}

/* Section sub-menu: a single row that scrolls sideways on small screens */
.site-tabs { padding-top: 0; padding-bottom: 0; }
.site-tabs ul {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.site-tabs ul::-webkit-scrollbar { display: none; }
.site-tabs li { list-style: none; margin: 0; padding: 0; }
.site-tabs a {
    display: block;
    white-space: nowrap;
    padding: .6rem .8rem;
    margin: 0;
    border-radius: 0;
    color: var(--rm-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
}
.site-tabs a:hover { color: var(--rm-text); --pico-text-decoration: none; }
.site-tabs a[aria-current="page"] {
    color: var(--rm-accent);
    border-bottom-color: var(--rm-accent);
}

/* Main area */
.site-main {
    flex: 1;
    padding-top: 1.75rem;
    padding-bottom: 3rem;
}

/* Page heading row: title (+ breadcrumbs) and an optional control such as auto reload */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-bottom: 1.75rem;
}
.page-head .page-title { margin-bottom: 0; }
.page-head .auto-reload { margin: 0; }
.page-head .auto-reload label { margin: 0; }

/* Page heading + breadcrumbs */
.page-title { margin-bottom: 1.75rem; }
.page-title h1 { margin: 0; }
.breadcrumbs { padding: 0; margin-bottom: .35rem; }
.breadcrumbs { display: block; }
.page-title .breadcrumbs ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.page-title .breadcrumbs li { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.page-title .breadcrumbs li a { margin: 0; padding: 0; }
.page-title .breadcrumbs li:not(:first-child) { margin-inline-start: 0; }
.page-title .breadcrumbs li:not(:last-child)::after { content: "/"; position: static; margin: 0 .5rem; width: auto; color: var(--rm-muted); transform: none; }
.page-title .breadcrumbs li:last-child::after { display: none; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--rm-border);
    background: var(--rm-surface);
    font-size: .875rem;
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/* 5. COMPONENTS ------------------------------------------------------------ */

/* Flash message */
.alert {
    border: 1px solid color-mix(in srgb, var(--rm-notice) 35%, transparent);
    background: color-mix(in srgb, var(--rm-notice) 10%, var(--rm-surface));
    color: var(--rm-notice);
    border-radius: var(--rm-radius);
    padding: .75rem 1rem;
    font-weight: 500;
}

/* Generic stacks and grids */
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.grid-auto {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}
.grid-auto > article { margin: 0; }

/* Section with heading */
.section { margin-top: 2.5rem; }
.section:first-child { margin-top: 0; }
.section > h2 { margin-bottom: 1rem; }

/* Cards: Pico <article>, tightened */
article { --pico-block-spacing-vertical: 1.25rem; --pico-block-spacing-horizontal: 1.25rem; }
article > header { margin-bottom: 1rem; }
.card-title { font-size: 1.05rem; margin-bottom: .5rem; }

/* Set page */
.set-summary { color: var(--rm-muted); margin: -1rem 0 1.5rem; }
.set-insert { max-width: 46rem; }
.set-insert img { border-radius: .4rem; }
.set-insert table { display: block; max-width: 100%; overflow-x: auto; margin: .75rem 0 0; }
.set-insert td { border: 0; background: transparent; }

/* Badges */
.badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--rm-accent-tint);
    color: var(--rm-accent);
    white-space: nowrap;
}
.badge--muted { background: color-mix(in srgb, var(--rm-muted) 14%, var(--rm-surface)); color: var(--rm-muted); }
a.badge:hover { --pico-text-decoration: none; filter: brightness(.96); }

/* Download buttons (MP3 / Low) */
.dl-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-dl {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--rm-border);
    background: var(--rm-surface);
    color: var(--rm-text);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}
.btn-dl svg { width: 1em; height: 1em; flex: none; }
.btn-dl:hover {
    --pico-text-decoration: none;
    border-color: var(--rm-accent);
    color: var(--rm-accent);
}
.btn-dl--primary {
    background: var(--rm-accent);
    border-color: var(--rm-accent);
    color: var(--rm-surface);
}
.btn-dl--primary:hover { background: var(--rm-accent-hover); color: var(--rm-surface); }

/* Recording list */
.rec-list-title { margin: 0 0 1rem; }
.rec-list-title small { display: block; font-size: .9rem; font-weight: 400; color: var(--rm-muted); margin-top: .25rem; }
.rec-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius);
}
.rec-list:empty { display: none; }
.rec-item {
    list-style: none;
    margin: 0;
    padding: .9rem 1.1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
}
.rec-item + .rec-item { border-top: 1px solid var(--rm-border); }
.rec-item__num {
    font-weight: 600;
    color: var(--rm-muted);
    font-variant-numeric: tabular-nums;
}
.rec-item__title { font-weight: 600; font-size: 1rem; }
.rec-item__sets { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .2rem; }
.rec-item__by, .rec-item__meta { color: var(--rm-muted); font-size: .875rem; }
.rec-item__meta { display: flex; flex-wrap: wrap; gap: .15rem .75rem; }
.rec-item__count { margin-left: .4rem; vertical-align: .1em; }
@media (min-width: 720px) {
    /* fixed columns, so sets (no download buttons) line up with single recordings */
    .rec-item, .rec-item--set { grid-template-columns: minmax(0, 1fr) 12rem 10.5rem; align-items: center; gap: 1.25rem; }
    .rec-item--num { grid-template-columns: 2.5rem minmax(0, 1fr) 12rem 10.5rem; }
    .rec-item .dl-actions { justify-content: flex-end; }
    .rec-item__meta { flex-direction: column; }
}
/* Compact card variant ("of the Day") */
.rec-item.rec-item--card { grid-template-columns: minmax(0, 1fr); gap: .6rem; align-content: start; }
.rec-item--card .rec-item__meta { flex-direction: row; }
.rec-list:has(> .rec-item--card) { margin: 0; height: 100%; }

/* Letter / date browse indexes */
.browse-index { margin-top: 2.5rem; }
.browse-index h2 { font-size: 1.1rem; margin-bottom: .75rem; }
.browse-index--bare { margin: 0 0 1.5rem; }
.quick-browse { margin: 2rem 0 0; }
.quick-browse .browse-index:first-child { margin-top: 0; }

/* Previous / next under a browse list */
.prev-next { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; padding: 0; }
.prev-next a { font-weight: 600; }
.chip-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.chip-nav > * { list-style: none; margin: 0; padding: 0; }
.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 .6rem;
    border-radius: .5rem;
    border: 1px solid var(--rm-border);
    background: var(--rm-surface);
    font-size: .875rem;
    font-weight: 600;
    color: var(--rm-text);
}
a.chip:hover { --pico-text-decoration: none; border-color: var(--rm-accent); color: var(--rm-accent); }
.chip[aria-current] { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-surface); }
.chip--off { color: var(--rm-muted); opacity: .45; background: transparent; }
.date-index { display: grid; gap: .6rem; }
.date-index__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.date-index__label { font-weight: 600; font-size: .875rem; color: var(--rm-muted); }
@media (max-width: 480px) {
    .date-index__row { grid-template-columns: 1fr; gap: .3rem; }
}

/* Tables */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    margin-bottom: 1.5rem;
}
.table-wrap > table { margin: 0; }
.table-wrap th, .table-wrap td { padding: .6rem .9rem; background-color: transparent; }
.table-wrap thead th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rm-muted); }
.table-wrap tr.newsection > * { border-top: 2px solid var(--rm-border); }
.table-wrap tr:last-child > * { border-bottom: 0; }
table :is(input:not([type=checkbox], [type=radio]), select, textarea) {
    --pico-form-element-spacing-vertical: .35rem;
    --pico-form-element-spacing-horizontal: .5rem;
    margin-bottom: 0;
}
/* Stack table rows into cards on phones; cells need data-label="..." */
@media (max-width: 640px) {
    table.responsive thead { display: none; }
    table.responsive, table.responsive tbody, table.responsive tr, table.responsive td, table.responsive th { display: block; width: 100%; }
    table.responsive tr { padding: .5rem 0; border-bottom: 1px solid var(--rm-border); }
    table.responsive tr:last-child { border-bottom: 0; }
    table.responsive td, table.responsive th { border: 0; padding: .2rem .9rem; }
    table.responsive td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--rm-muted);
    }
}

/* Access logfile: date rows, and two short lines per login on phones */
table.log-table tr.newsection th { font-weight: 600; color: var(--rm-heading); }
@media (max-width: 640px) {
    table.log-table tr:not(.newsection) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .75rem; padding: .5rem 0; }
    table.log-table td[data-label]::before { display: none; }
    table.log-table td { padding: .1rem .9rem; width: auto; }
    table.log-table td[data-label=Time], table.log-table td[data-label=Session] { color: var(--rm-muted); }
    table.log-table tr.newsection th { font-weight: 600; padding: .6rem .9rem .2rem; }
}

/* Admin dashboard */
.admin-dash { --grid-min: 18rem; align-items: start; }
.admin-dash ul { padding-left: 1.1rem; }
.admin-dash .card-title + ul, .admin-dash ul + .card-title { margin-top: .25rem; }
.admin-dash ul + .card-title { margin-top: 1.25rem; }
ul.admin-waiting { list-style: none; padding: 0; margin: 0; max-height: 20rem; overflow-y: auto; border-top: 1px solid var(--rm-border); }
ul.admin-waiting li { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; margin: 0; border-bottom: 1px solid var(--rm-border); font-size: .875rem; }
ul.admin-waiting li span { min-width: 0; overflow-wrap: anywhere; }
.status-list .status--ok { color: #1a7f37; }
.status-list .status--busy { color: var(--rm-notice); }
.status-list .status--error { color: #c62828; }
[data-theme=dark] .status-list .status--ok { color: #57c26f; }
[data-theme=dark] .status-list .status--error { color: #ff7b72; }

/* Detail cards (user details, recording details) */
.detail-card { max-width: 52rem; }
.detail-card__title { font-size: 1.35rem; margin: 0; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .9rem 1.5rem; margin: 0 0 1rem; }
.detail-list > div { min-width: 0; }
.detail-list dt { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rm-muted); margin: 0; }
.detail-list dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.detail-list__wide { grid-column: 1 / -1; }
.detail-card > footer.form-actions { margin-top: 0; }
.detail-card__type { margin: 0; font-weight: 500; }
.detail-card__dl { margin-bottom: 1.25rem; }
.mtgedit-dl { justify-content: center; margin: .5rem 0 0; }
.btn-danger { --pico-color: #c62828; --pico-border-color: #c62828; color: #c62828; border-color: #c62828; }

/* Admin edit forms: the old two-column layout tables, stacked on phones */
.admin-form table.data { width: 100%; max-width: 60rem; }
.admin-form table.data > tbody > tr > :is(td, th) { border-bottom: 0; }
.admin-form input:not([type=checkbox], [type=radio], [type=submit], [type=button]), .admin-form select, .admin-form textarea { margin-bottom: .35rem; }
.admin-form td[align=right] { white-space: nowrap; }
@media (max-width: 720px) {
    .admin-form table, .admin-form tbody, .admin-form tr,
    .admin-form td, .admin-form th { display: block; width: auto !important; text-align: left !important; }
    .admin-form td[align=right] { padding-bottom: 0 !important; }
    .admin-form textarea { width: 100%; }
}

/* To-do checklist */
.todo-list ul ul { margin-top: .25rem; }
.todo-list strike { color: var(--rm-muted); }

/* Forms */
.form-card { max-width: 28rem; }
.form-card--center { margin-inline: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }
.form-actions > * { margin: 0; }
.field-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Long-form reading pages */
.prose { max-width: 46rem; line-height: 1.7; }
.prose a { --pico-text-decoration: underline; }
.prose img { border-radius: var(--rm-radius); }
.scripture { font-size: 1.05rem; }
.scripture cite { display: block; font-style: normal; font-weight: 600; font-size: .875rem; color: var(--rm-accent); margin-bottom: .25rem; }

/* Home page hero */
/* centred over the cards below it, so wide screens don't leave an empty right half */
.hero { max-width: 46rem; margin: 0 auto; padding: 1.5rem 0 1rem; text-align: center; }
.hero h1 { margin: 1.25rem 0 1rem; }
.hero .scripture { margin: 0 auto; padding: 0; border: 0; font-style: italic; color: var(--rm-muted); }
.hero .form-actions { margin-top: 1.5rem; justify-content: center; }
.hero [role=button] { margin: 0; }
.hero + .section .section-more { text-align: center; }
@media (max-width: 640px) { .hero p { text-align: left; } }

/* Highlighted announcement */
.notice {
    border-left: 4px solid var(--rm-accent);
    background: var(--rm-accent-tint);
}
.notice h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.notice p:last-child { margin-bottom: 0; }

/* "More ..." link under a section */
.section-more { margin: 1rem 0 0; font-weight: 500; }

/* Full disclaimer on the About page */
section.disclaimer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rm-border); }

/* Live broadcast card (Unpublished overview) */
.live-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.live-card p { margin: 0; }
.live-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.live-card__actions [role=button] { margin: 0; }

/* Live broadcast page */
.live-player article { max-width: 40rem; }
.live-player #playerContainer { margin: 1rem 0; }
.schedule-days { --grid-min: 15rem; margin-bottom: 1rem; }
.schedule-day h3 { font-size: 1rem; margin-bottom: .5rem; }
.schedule-day ul { margin: 0; padding: 0; }
.schedule-day li { list-style: none; margin: 0; }
.schedule-day__time { font-weight: 600; margin-right: .35rem; }

/* Notes Of Interest: scanned newsletter laid out in its original columns */
.noi-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.5rem; padding: 0; }
.facsimile + .noi-pager { margin: 2rem 0 0; }
.noi-pager__next { font-weight: 600; }
/* (Pico gives links in a nav negative margins) */
.noi-pager ul.chip-nav { margin: 0; gap: .35rem; }
.noi-pager ul.chip-nav li { margin: 0; padding: 0; }
.noi-pager ul.chip-nav li .chip { margin: 0; }
.facsimile { line-height: 1.65; background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: var(--rm-radius); padding: clamp(1rem, 3vw, 2rem); }
.facsimile table.invisibleData { width: 100% !important; }
.facsimile table.invisibleData > tbody > tr > td { padding: 0 clamp(.5rem, 2vw, 1.25rem); }
.facsimile hr { border-color: var(--rm-text); opacity: .5; }

/* Intro paragraph */
.lead { font-size: 1.05rem; color: var(--rm-muted); max-width: 40rem; }
.lead ul { margin: 0; }
.lead li { margin-bottom: .35rem; }
.lead strong { color: var(--rm-text); }

/* "of the Day" picks */
.day-picks { --grid-min: 15rem; align-items: stretch; }
.day-picks > div { display: flex; flex-direction: column; }
.day-picks h2 { font-size: 1.05rem; margin-bottom: .6rem; }
.day-picks .rec-list { flex: 1; }

/* Login */
.login-card { margin-top: clamp(1rem, 6vh, 4rem); }
.login-card h1 { margin-bottom: .25rem; }
.login-card header p { margin: 0; }
.login-card [type=submit] { width: 100%; margin-bottom: 0; }

/* Page links (prev / 1 2 3 / next) */
.pager { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; margin: 1.5rem 0; }

/* Auto-reload switch */
.auto-reload label { font-weight: 600; color: var(--rm-text); }

/* Disclaimer: collapsed under the title on listing pages, open on the About page */
.disclaimer-note {
    margin: -.75rem 0 1.75rem;
    padding: 0;
    border: 0;
    max-width: 46rem;
}
.disclaimer-note > summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--rm-muted);
    padding: 0;
    margin: 0;
}
.disclaimer-note > summary::after { float: none; margin: 0; }
.disclaimer-note[open] > summary { margin-bottom: .75rem; color: var(--rm-text); }
.disclaimer-note[open] {
    padding: 1rem 1.25rem;
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    box-shadow: var(--pico-card-box-shadow);
}

/* Disclaimer text */
.disclaimer { font-size: .875rem; line-height: 1.6; }
.disclaimer blockquote { margin: 1rem 0; padding: .1rem 0 .1rem .9rem; border-left: 3px solid var(--rm-accent); font-style: italic; }
.disclaimer blockquote footer { margin-top: .25rem; padding: 0; background: none; font-style: normal; }
.disclaimer cite { font-style: normal; font-weight: 600; color: var(--rm-accent); }


/* 6. LEGACY COMPATIBILITY ------------------------------------------------
   Modern look for pages still using the old table-based markup.
   Remove rules here once nothing uses the class any more.               */

.title1, .title1 * { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 700; color: var(--rm-heading); }
.title2, .title2 * { font-size: 1.3rem; font-weight: 700; color: var(--rm-heading); }
.title3, .title3 * { font-size: 1.1rem; font-weight: 700; color: var(--rm-heading); }
a.small { font-weight: 400; }
.biglink { font-size: 1.5rem; font-weight: 600; }

/* Layout-only tables */
table.invisible, table.invisibleData { width: auto; margin: 0; border: 0; }
table.invisible td, table.invisibleData td,
table.invisible th, table.invisibleData th { border: 0; background: transparent; padding: .25rem .5rem; vertical-align: top; }

/* Boxed data tables */
table.data {
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    margin-bottom: 1rem;
    overflow: hidden;
}
table.data > tbody > tr > :is(td, th), table.data > tr > :is(td, th) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rm-border);
    padding: .6rem .9rem;
}
table.data > tbody > tr:last-child > :is(td, th) { border-bottom: 0; }
table.data th { font-weight: 600; }
table.data tr.newsection > td { border-top: 2px solid var(--rm-border); }
table.data td.iconHolder { padding: .35rem; }
table.data table.invisible td { padding: 0; }

/* Flash message box */
table.message { width: auto; margin: 0 auto 1rem; }
table.message td {
    border: 1px solid color-mix(in srgb, var(--rm-notice) 35%, transparent);
    background: color-mix(in srgb, var(--rm-notice) 10%, var(--rm-surface));
    color: var(--rm-notice);
    border-radius: var(--rm-radius);
    font-weight: 600;
}

/* On phones, stack layout tables and let wide data tables scroll */
@media (max-width: 640px) {
    table.invisible, table.invisible > tbody, table.invisible > tbody > tr, table.invisible > tbody > tr > td,
    table.invisibleData, table.invisibleData > tbody, table.invisibleData > tbody > tr, table.invisibleData > tbody > tr > td {
        display: block;
        width: auto !important;
    }
    table.data { display: block; max-width: 100%; overflow-x: auto; }
}

/* Printing: content only */
@media print {
    .site-header, .site-footer, .disclaimer-note { display: none; }
    .site-main { padding: 0; }
    :root { --rm-bg: #fff; }
}