/* Sacred Place — minimal app shell.
   The Web Awesome kit handles all component styling, typography, color, and
   theming. <wa-page>, native.css, and the wa-* utility classes do the rest. */

/* Depth pass --------------------------------------------------------------
   Token-based shadows so cards, buttons, inputs, drawers, badges, and
   tags read as raised against the page rather than washed flat. Tokens
   come from WA so light/dark themes both behave; the *-scale bumps lift
   the default shadow intensity site-wide. */

:root {
    --wa-shadow-blur-scale: 1.5;
    --wa-shadow-spread-scale: 1;
}

body {
    background: var(--wa-color-surface-lowered);
    overflow-x: hidden;
}

.sp-main {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: var(--wa-space-l);
    padding-block: var(--wa-space-m);
    min-inline-size: 0;
    box-sizing: border-box;
}

wa-card,
wa-callout {
    box-shadow: var(--wa-shadow-m);
}

/* Card headers ----------------------------------------------------------- */

wa-card[with-header] {
    --sp-card-accent: var(--wa-color-brand-fill-loud);
}
/* Brand accent strip across the top of CARDS THAT EARN IT — opt-in via
   .sp-card-accent (or any .sp-card-accent--* tone modifier). Standard
   sections stay flat for less visual fatigue. Currently only used on
   the dashboard cards; detail-page cards stay calm. */
wa-card[with-header].sp-card-accent,
wa-card[with-header][class*="sp-card-accent--"] {
    position: relative;
}
wa-card[with-header].sp-card-accent::before,
wa-card[with-header][class*="sp-card-accent--"]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--sp-card-accent);
    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0;
    z-index: 1;
    pointer-events: none;
}
/* Extra top padding on accented cards so the colored strip has breathing
   room above the header text. */
wa-card[with-header].sp-card-accent::part(header),
wa-card[with-header][class*="sp-card-accent--"]::part(header) {
    padding-block-start: var(--wa-space-s);
}
wa-card[with-header]::part(header) {
    padding: var(--wa-space-2xs) var(--wa-space-s);
    background: var(--wa-color-surface-default);
    border-block-end: 1px solid var(--wa-color-surface-border);
}
wa-card > [slot="header"] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wa-color-text-normal);
    text-transform: none;
    letter-spacing: 0;
}

/* Card body — pull spacing in slightly to balance the tighter header. */
wa-card[with-header]::part(body) {
    padding-block-start: var(--wa-space-s);
}

/* Editable table view (Sundays) ----------------------------------------- */

.sp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    -webkit-overflow-scrolling: touch;
}
.sp-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 0.875rem;
}
.sp-table thead th {
    position: sticky;
    top: 0;
    background: var(--wa-color-surface-raised);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wa-color-text-quiet);
    padding: 0.4rem 0.6rem;
    border-block-end: 1px solid var(--wa-color-surface-border);
    white-space: nowrap;
    z-index: 1;
}
.sp-table thead th a {
    color: inherit;
    text-decoration: none;
}
.sp-table thead th a:hover {
    color: var(--wa-color-brand-on-quiet);
}
.sp-table tbody td {
    padding: 0.35rem 0.5rem;
    border-block-end: 1px solid var(--wa-color-surface-border);
    vertical-align: middle;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-table tbody tr:hover td {
    background: var(--wa-color-surface-lowered);
}
.sp-table .sp-cell-id a {
    font-variant-numeric: tabular-nums;
    color: var(--wa-color-brand-on-quiet);
    text-decoration: none;
}
.sp-table [contenteditable="true"] {
    cursor: text;
    min-width: 6ch;
    border-radius: var(--wa-border-radius-s);
}
.sp-table [contenteditable="true"]:focus,
.sp-table input:focus,
.sp-table select:focus {
    outline: 2px solid var(--wa-color-brand-fill-loud);
    outline-offset: -1px;
    background: var(--wa-color-surface-raised);
}
.sp-table input[type="date"],
.sp-table input[type="number"],
.sp-table select {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0.15rem 0.25rem;
    border-radius: var(--wa-border-radius-s);
    width: 100%;
}
.sp-table input[type="checkbox"] {
    accent-color: var(--wa-color-brand-fill-loud);
}

/* Audit log diffs ------------------------------------------------------- */

.sp-audit-json {
    background: var(--wa-color-surface-quiet);
    padding: var(--wa-space-s);
    border-radius: var(--wa-border-radius-s);
    font-size: 0.8rem;
    overflow-x: auto;
    max-height: 24rem;
}
.sp-audit-diff {
    width: 100%;
    border-collapse: collapse;
    margin-block-start: var(--wa-space-2xs);
    font-size: 0.875rem;
}
.sp-audit-diff td {
    padding: 0.2rem 0.5rem;
    border-block-end: 1px dashed var(--wa-color-surface-border);
    vertical-align: top;
}
.sp-audit-diff td:first-child { width: 14rem; }
.sp-audit-diff del { color: var(--wa-color-danger-on-quiet); text-decoration: line-through; }

/* Inline-edit save state indicators */
.sp-saving { box-shadow: inset 0 -2px 0 var(--wa-color-brand-fill-loud); }
.sp-saved  { box-shadow: inset 0 -2px 0 var(--wa-color-success-fill-loud); }
.sp-failed { box-shadow: inset 0 -2px 0 var(--wa-color-danger-fill-loud); }

/* Print views ----------------------------------------------------------- */

.sp-print-config .sp-print-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--wa-space-2xs) var(--wa-space-s);
}
.sp-print-col-check {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
}
.sp-print-title-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    font: inherit;
    color: inherit;
    background: var(--wa-color-surface-default);
}

.sp-print-doc {
    margin-block-start: var(--wa-space-l);
    background: var(--wa-color-surface-default);
    padding: var(--wa-space-l);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
}
.sp-print-title {
    margin: 0 0 var(--wa-space-2xs) 0;
    font-size: 1.5rem;
    font-weight: 700;
}
.sp-print-meta {
    margin: 0 0 var(--wa-space-m) 0;
    color: var(--wa-color-text-quiet);
    font-size: 0.875rem;
}
.sp-print-empty {
    color: var(--wa-color-text-quiet);
    font-style: italic;
}
.sp-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.sp-print-table th,
.sp-print-table td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-block-end: 1px solid var(--wa-color-surface-border);
    vertical-align: top;
}
.sp-print-table thead th {
    border-block-end: 2px solid var(--wa-color-surface-border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wa-color-text-quiet);
}
.sp-print-checkbox-cell { width: 24px; }
.sp-print-checkbox {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

@media print {
    /* Hide everything except the print doc. The topbar carries
       `header.sp-topbar { display: grid/flex !important }` for screen, so the
       hide rule has to out-specify it — `body header.sp-topbar` (0,1,2) beats
       `header.sp-topbar` (0,1,1) regardless of source order. */
    wa-page header,
    wa-page footer,
    body header.sp-topbar,
    .sp-topbar,
    .sp-back-link,
    .sp-print-config,
    nav { display: none !important; }

    body {
        background: white !important;
        color: black !important;
        font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    .sp-main, .wa-page, wa-page { background: white !important; }

    .sp-print-doc {
        margin: 0;
        padding: 0;
        border: 0;
        background: white;
    }
    .sp-print-title {
        font-size: 18pt;
        margin-bottom: 0.25rem;
    }
    .sp-print-meta { font-size: 10pt; color: #555; }
    .sp-print-table {
        font-size: 10pt;
        page-break-inside: auto;
    }
    .sp-print-table thead { display: table-header-group; }
    .sp-print-table tfoot { display: table-footer-group; }
    .sp-print-table tr { page-break-inside: avoid; }
    .sp-print-table th,
    .sp-print-table td {
        border-block-end: 1px solid #000;
        color: black;
    }
    .sp-print-table thead th {
        border-block-end: 2px solid #000;
        color: black;
    }
}

/* Back link above page titles ------------------------------------------- */

.sp-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    margin-block-end: var(--wa-space-2xs);
    color: var(--wa-color-text-quiet);
    font-size: 0.875rem;
    text-decoration: none;
}
.sp-back-link:hover {
    color: var(--wa-color-brand-on-quiet);
    text-decoration: underline;
}

wa-button::part(base) {
    box-shadow: var(--wa-shadow-s);
    transition: transform 80ms ease, box-shadow 120ms ease;
}
wa-button::part(base):hover {
    transform: translateY(-1px);
    box-shadow: var(--wa-shadow-m);
}
wa-button::part(base):active {
    transform: translateY(0);
    box-shadow: inset var(--wa-shadow-s);
}

wa-input::part(base),
wa-select::part(combobox),
wa-textarea::part(base) {
    box-shadow: inset var(--wa-shadow-s);
}

wa-drawer::part(dialog) {
    box-shadow: var(--wa-shadow-l);
}

/* Topbar: 3-column grid so the nav is always truly centred regardless of
   how wide the brand and right-side utility cluster are. */
header.sp-topbar {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--wa-space-s);
}
header.sp-topbar .sp-topbar-end {
    justify-self: end;
}

.sp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.sp-brand-icon {
    font-size: 1.25rem;
    color: var(--wa-color-brand-fill-loud);
}

.sp-brand-name {
    letter-spacing: 0.02em;
}

/* Avatars ----------------------------------------------------------------- */

.sp-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--wa-color-surface-raised);
}
.sp-avatar--lg {
    width: 4rem;
    height: 4rem;
}
.sp-avatar--xl {
    width: 6rem;
    height: 6rem;
    border: 2px solid var(--wa-color-brand-border-loud);
    box-shadow: var(--wa-shadow-m);
}
.sp-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    font-weight: 700;
    font-size: 2.25rem;
}

/* Person detail (hero + grid + cards) ---------------------------------- */

.sp-hero {
    background: var(--wa-color-surface-default);
    background-image: radial-gradient(at 0% 0%, var(--wa-color-brand-fill-quiet), transparent 55%);
    border: 1px solid var(--wa-color-brand-border-loud);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-l);
    box-shadow: var(--wa-shadow-l);
    margin-block-end: var(--wa-space-m);
}
.sp-hero-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--wa-space-l);
    align-items: center;
}
.sp-hero-name {
    margin: 0 0 var(--wa-space-m) 0;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
}
.sp-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs);
    margin-block-end: var(--wa-space-m);
}
.sp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-xs);
    color: var(--wa-color-text-quiet);
    font-size: 0.95rem;
}
.sp-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--wa-color-text-normal);
}
.sp-hero-meta-item wa-icon {
    color: var(--wa-color-brand-on-quiet);
    font-size: 0.95rem;
}
.sp-hero-meta-sep {
    color: var(--wa-color-text-quiet);
    opacity: 0.6;
}
.sp-hero-contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-l);
}
.sp-hero-contact-item {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    color: var(--wa-color-brand-on-quiet);
    text-decoration: none;
    font-weight: 500;
}
.sp-hero-contact-item:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .sp-hero-body {
        grid-template-columns: auto 1fr;
        gap: var(--wa-space-m);
    }
    .sp-hero-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .sp-hero-name { font-size: 1.65rem; }
    /* Engagement line: drop the pill at narrow widths and let multi-clause
       captions wrap as a normal block; the pill shape was making "Engaged ·
       Last seen … · 1 touchpoint in 90d" render as a tall awkward capsule. */
    .sp-engagement-line {
        display: flex;
        flex-wrap: wrap;
        border-radius: var(--wa-border-radius-m);
        padding: var(--wa-space-2xs) var(--wa-space-s);
        line-height: 1.35;
    }
}
@media (max-width: 480px) {
    .sp-hero { padding: var(--wa-space-m); }
    .sp-hero-body {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .sp-hero-name { font-size: 1.4rem; line-height: 1.15; }
}
/* Address caption is a <p> with inline-flex content — make sure it gets a
   real bottom margin so it doesn't visually fuse with the street lines below. */
.sp-address-caption + br,
.sp-address-caption {
    margin-block-end: var(--wa-space-s);
}

.sp-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--wa-space-m);
}
@media (max-width: 720px) {
    .sp-detail-grid { grid-template-columns: 1fr; }
}

.sp-card-heading {
    display: inline-flex !important;
    align-items: center;
    gap: var(--wa-space-2xs);
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Stacked fact row: icon on the left, label-on-top-of-value on the right.
   Matches the Sunday detail mockup. */
.sp-fact-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    column-gap: var(--wa-space-s);
    align-items: start;
    padding-block: 0.55rem;
    border-block-end: 1px solid color-mix(in srgb, var(--wa-color-surface-border) 50%, transparent);
}
.sp-fact-row:last-child { border-block-end: 0; }
.sp-fact-icon {
    color: var(--wa-color-brand-on-quiet);
    margin-block-start: 0.2rem;
    opacity: 0.85;
}
.sp-fact-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sp-fact-label {
    display: block;
    color: var(--wa-color-text-quiet);
    font-size: 0.85rem;
    line-height: 1.2;
    opacity: 0.78;
}
.sp-fact-value {
    display: block;
    margin-block-start: 0.15rem;
    word-break: break-word;
    line-height: 1.35;
}
.sp-fact-value a {
    color: var(--wa-color-brand-on-quiet);
    text-decoration: none;
    font-weight: 500;
}
.sp-fact-value a:hover { text-decoration: underline; }

.sp-care-card {
    --sp-card-accent: var(--wa-color-brand-fill-loud);
}
.sp-care-card::part(base) {
    border-color: var(--wa-color-brand-border-loud);
}

/* Tone overrides for the top accent strip. Scoped to wa-card[with-header]
   so they out-specify the default rule that sets --sp-card-accent there. */
wa-card[with-header].sp-card-accent--brand   { --sp-card-accent: var(--wa-color-brand-fill-loud); }
wa-card[with-header].sp-card-accent--success { --sp-card-accent: var(--wa-color-success-fill-loud); }
wa-card[with-header].sp-card-accent--warning { --sp-card-accent: var(--wa-color-warning-fill-loud); }
wa-card[with-header].sp-card-accent--neutral { --sp-card-accent: var(--wa-color-surface-border); }
.sp-stat-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wa-space-s);
}
.sp-stat-tile {
    background: var(--wa-color-surface-quiet);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-m);
    text-align: center;
}
.sp-stat-icon {
    color: var(--wa-color-brand-on-quiet);
    font-size: 1.1rem;
    margin-block-end: var(--wa-space-2xs);
}
.sp-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}
.sp-stat-label {
    color: var(--wa-color-text-quiet);
    margin-top: var(--wa-space-2xs);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sp-block-link { display: block; text-decoration: none; }

/* Hero icon-square (used when there's no avatar — e.g. /sundays/{id}) */

.sp-hero-icon {
    width: 6rem;
    height: 6rem;
    border-radius: var(--wa-border-radius-l);
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wa-color-brand-border-loud);
    box-shadow: var(--wa-shadow-m);
    flex: 0 0 auto;
}
.sp-hero-icon wa-icon {
    font-size: 2.25rem;
}

/* Pills wrapped in <a> shouldn't get default link styling */

.sp-pill-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
}

/* Series art banner --------------------------------------------------- */

.sp-series-banner {
    width: 100%;
    border-radius: var(--wa-border-radius-l);
    overflow: hidden;
    margin-block: var(--wa-space-m);
    aspect-ratio: 4 / 1;
    background: var(--wa-color-surface-quiet);
    border: 1px solid var(--wa-color-surface-border);
}
.sp-series-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 720px) {
    .sp-series-banner { aspect-ratio: 3 / 1; }
}

/* Public-description / songs / similar inline blocks inside Details */

.sp-block-body {
    padding-block: var(--wa-space-2xs);
    line-height: 1.5;
    color: var(--wa-color-text-normal);
}

/* Two-column fact layout inside the Details card -------------------- */

.sp-details-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--wa-space-l);
}
.sp-details-cols > div + div {
    border-inline-start: 1px solid var(--wa-color-surface-border);
    padding-inline-start: var(--wa-space-l);
}
@media (max-width: 900px) {
    .sp-details-cols { grid-template-columns: 1fr; }
    .sp-details-cols > div + div {
        border-inline-start: 0;
        padding-inline-start: 0;
    }
}

/* The stacked .sp-fact-row scales fine inside .sp-details-cols — no
   override needed since icon + 1fr fits any column width. */

/* Engagement line in the hero ----------------------------------------- */

.sp-engagement-line {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-2xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-pill);
    margin-block-end: var(--wa-space-m);
    font-size: 0.95rem;
    border: 1px solid transparent;
}
.sp-engagement-line strong { font-weight: 700; }
.sp-engagement-sep { opacity: 0.6; }
.sp-engagement-reason { color: var(--wa-color-text-normal); opacity: 0.9; }
/* Softer Apple-Health-ish tones, not Xbox achievement. ~18% fill, 35% border. */
.sp-engagement-line--success {
    background: color-mix(in srgb, var(--wa-color-success-fill-loud) 18%, transparent);
    border-color:  color-mix(in srgb, var(--wa-color-success-border-loud) 35%, transparent);
    color: var(--wa-color-success-on-quiet);
}
.sp-engagement-line--warning {
    background: color-mix(in srgb, var(--wa-color-warning-fill-loud) 18%, transparent);
    border-color:  color-mix(in srgb, var(--wa-color-warning-border-loud) 35%, transparent);
    color: var(--wa-color-warning-on-quiet);
}
.sp-engagement-line--danger {
    background: color-mix(in srgb, var(--wa-color-danger-fill-loud) 18%, transparent);
    border-color:  color-mix(in srgb, var(--wa-color-danger-border-loud) 35%, transparent);
    color: var(--wa-color-danger-on-quiet);
}
.sp-engagement-line--brand {
    background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 18%, transparent);
    border-color:  color-mix(in srgb, var(--wa-color-brand-border-loud) 35%, transparent);
    color: var(--wa-color-brand-on-quiet);
}
.sp-engagement-line--neutral {
    background: var(--wa-color-neutral-fill-quiet);
    border-color: var(--wa-color-neutral-border-quiet);
    color: var(--wa-color-neutral-on-quiet);
}

/* Care Snapshot status banner ----------------------------------------- */

.sp-care-status {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    border-radius: var(--wa-border-radius-m);
    border: 1px solid transparent;
}
.sp-care-status wa-icon { font-size: 1.4rem; flex: 0 0 auto; }
.sp-care-status-text { display: flex; flex-direction: column; line-height: 1.25; }
.sp-care-status-action { font-size: 0.85rem; opacity: 0.85; }
.sp-care-status--success { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); border-color: var(--wa-color-success-border-quiet); }
.sp-care-status--warning { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); border-color: var(--wa-color-warning-border-quiet); }
.sp-care-status--danger  { background: var(--wa-color-danger-fill-quiet);  color: var(--wa-color-danger-on-quiet);  border-color: var(--wa-color-danger-border-quiet);  }
.sp-care-status--brand   { background: var(--wa-color-brand-fill-quiet);   color: var(--wa-color-brand-on-quiet);   border-color: var(--wa-color-brand-border-quiet);   }
.sp-care-status--neutral { background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet); border-color: var(--wa-color-neutral-border-quiet); }

/* Stat tile clickable variant ----------------------------------------- */

.sp-stat-tile--link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 100ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.sp-stat-tile--link:hover {
    transform: translateY(-1px);
    box-shadow: var(--wa-shadow-m);
    border-color: var(--wa-color-brand-border-loud);
}
.sp-stat-tile--link:focus-visible {
    outline: 2px solid var(--wa-color-brand-border-loud);
    outline-offset: 2px;
}

/* Contact card subgroup labels ---------------------------------------- */

.sp-fact-group + .sp-fact-group { margin-block-start: var(--wa-space-m); }
.sp-fact-group-label {
    margin: 0 0 var(--wa-space-2xs) 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wa-color-text-quiet);
}

/* Bigger labeled block (Public description / Songs on the Sunday page) */
.sp-block-section {
    margin-block-start: var(--wa-space-m);
    padding-block-start: var(--wa-space-m);
    border-block-start: 1px solid var(--wa-color-surface-border);
}
.sp-block-label {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    margin: 0 0 var(--wa-space-s) 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wa-color-text-normal);
    text-transform: none;
    letter-spacing: 0;
}
.sp-block-label wa-icon {
    color: var(--wa-color-brand-on-quiet);
    font-size: 1.05rem;
}

/* PCO/TIC collapsed details ------------------------------------------- */

/* PCO / TIC sync info: a flat collapsible block, NOT another card.
   Strip wa-details' own border + background so it doesn't double up
   with the surrounding cards. */
.sp-admin-details {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    border-block-start: 1px solid color-mix(in srgb, var(--wa-color-surface-border) 50%, transparent);
    margin-block-start: var(--wa-space-s);
}
.sp-admin-details::part(base) {
    background: transparent;
    border: 0;
}
.sp-admin-details::part(header) {
    padding: var(--wa-space-s) 0;
    background: transparent;
    border: 0;
}
.sp-admin-details::part(content) {
    padding: 0 0 var(--wa-space-s) 0;
    background: transparent;
}
.sp-admin-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    color: var(--wa-color-text-quiet);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Address caption ----------------------------------------------------- */

.sp-address-caption {
    margin: 0 0 var(--wa-space-s) 0;
    color: var(--wa-color-brand-on-quiet);
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    font-size: 0.9rem;
    font-weight: 600;
    word-break: break-word;
}
.sp-address-lines {
    line-height: 1.45;
    word-break: break-word;
}

/* Touchpoint narrative rows ------------------------------------------- */

.sp-tp-list {
    display: flex;
    flex-direction: column;
}
.sp-tp-row {
    display: grid;
    grid-template-columns: 0.75rem 1fr;
    gap: var(--wa-space-s);
    align-items: start;
    padding: var(--wa-space-s) var(--wa-space-2xs);
    border-block-end: 1px solid var(--wa-color-surface-border);
    text-decoration: none;
    color: inherit;
}
.sp-tp-row:last-child { border-block-end: 0; }
.sp-tp-row:hover { background: var(--wa-color-surface-quiet); }
.sp-tp-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    margin-block-start: 0.35rem;
    flex: 0 0 auto;
}
.sp-tp-dot--success { background: var(--wa-color-success-fill-loud); }
.sp-tp-dot--warning { background: var(--wa-color-warning-fill-loud); }
.sp-tp-dot--danger  { background: var(--wa-color-danger-fill-loud);  }
.sp-tp-dot--brand   { background: var(--wa-color-brand-fill-loud);   }
.sp-tp-dot--neutral { background: var(--wa-color-neutral-fill-loud); }
.sp-tp-dot--custom  { background: var(--wa-color-neutral-fill-loud); }
.sp-tp-headline { font-weight: 600; }
.sp-tp-sub {
    font-size: 0.85rem;
    color: var(--wa-color-text-quiet);
}
.sp-tp-sep { opacity: 0.5; margin: 0 0.15rem; }

/* Filter chip on list pages ------------------------------------------- */

.sp-filter-chip {
    margin-block-end: var(--wa-space-s);
}
.sp-filter-chip a { color: inherit; }
.sp-filter-chip-clear {
    margin-inline-start: var(--wa-space-s);
    font-size: 0.85rem;
    text-decoration: underline;
}

.sp-address-card-body {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
    gap: var(--wa-space-m);
    align-items: start;
}
@media (max-width: 720px) {
    .sp-address-card-body { grid-template-columns: 1fr; }
}
.sp-address-map {
    width: 100%;
    height: 195px;
    border: 0;
    border-radius: var(--wa-border-radius-m);
    display: block;
}

/* Admin "Danger zone" — destructive actions live here, off the main flow */
.sp-admin-zone {
    margin-block-start: var(--wa-space-l);
    padding: var(--wa-space-m);
    border: 1px dashed color-mix(in srgb, var(--wa-color-danger-border-loud, #b91c1c) 50%, transparent);
    border-radius: var(--wa-border-radius-m);
    background: color-mix(in srgb, var(--wa-color-danger-fill-quiet, #1a0c0c) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-m);
    flex-wrap: wrap;
}
.sp-admin-zone-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--wa-color-text-quiet);
    font-size: 0.9rem;
}
.sp-admin-zone-text strong {
    color: var(--wa-color-text-normal);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sp-empty-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-l) var(--wa-space-m);
    color: var(--wa-color-text-quiet);
}
.sp-empty-icon {
    font-size: 2rem;
    color: var(--wa-color-text-quiet);
    opacity: 0.5;
}
.sp-empty-headline {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wa-color-text-normal);
}
.sp-empty-block .sp-muted {
    margin: 0;
    text-align: center;
}

/* Sunday detail tab group -------------------------------------------- */
wa-tab-group.sp-detail-tabs,
.sp-detail-grid > wa-tab-group,
wa-tab-group:has(wa-tab-panel[name="notes"]) {
    --track-color: transparent;
}

/* Remove the tab-panel's default padding so our grid/card control spacing */
wa-tab-panel[name="details"],
wa-tab-panel[name="notes"] {
    padding-block-start: var(--wa-space-m);
}

.sp-notes-body {
    line-height: 1.7;
    font-size: 1rem;
}

.sp-notes-body h1, .sp-notes-body h2, .sp-notes-body h3 {
    margin-block: var(--wa-space-m) var(--wa-space-2xs);
    font-weight: 700;
}

.sp-notes-body p { margin-block: 0 var(--wa-space-s); }

.sp-notes-body ul, .sp-notes-body ol {
    padding-inline-start: 1.5rem;
    margin-block: 0 var(--wa-space-s);
}

.sp-notes-body blockquote {
    border-inline-start: 3px solid var(--wa-color-brand-fill);
    margin-inline-start: 0;
    padding-inline-start: var(--wa-space-s);
    color: var(--wa-color-text-quiet);
}

/* Other Sundays in this series ---------------------------------------- */

.sp-other-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--wa-space-s);
}
.sp-other-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--wa-space-s) var(--wa-space-m);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-quiet);
    color: var(--wa-color-text-normal);
    text-decoration: none;
    transition: border-color 120ms, transform 120ms;
}
.sp-other-tile:hover {
    border-color: var(--wa-color-brand-border-loud);
    transform: translateY(-1px);
}
.sp-other-tile--current {
    border-color: var(--wa-color-brand-border-loud);
    background: var(--wa-color-brand-fill-quiet);
}
.sp-other-tile-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--wa-color-text-quiet);
    font-size: 0.85rem;
}
.sp-other-tile-head wa-icon {
    color: var(--wa-color-brand-on-quiet);
}
.sp-other-date {
    flex: 1 1 auto;
}
.sp-other-current {
    margin-inline-start: auto;
}
.sp-other-title {
    font-weight: 600;
    line-height: 1.3;
}
.sp-other-scripture {
    font-size: 0.9rem;
    color: var(--wa-color-text-quiet);
}
.sp-other-tile--more {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0.5rem;
    background: transparent;
    color: var(--wa-color-brand-on-quiet);
    font-weight: 600;
}

.sp-extra-cards { margin-block-start: var(--wa-space-m); }

/* Row links (inside detail-page card lists) ------------------------------ */

.sp-row-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sp-row {
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    border-radius: var(--wa-border-radius-s);
    transition: background 100ms ease;
}
a:hover > .sp-row,
.sp-row-link:hover .sp-row {
    background: var(--wa-color-surface-raised);
}

/* Topbar / mobile menu ---------------------------------------------------- */

.sp-hamburger { display: none; }
.sp-nav-mobile { display: none; }

/* Read-only PCO facts on the person edit form: long URLs wrap mid-string
   so the avatar URL doesn't break the column on narrow viewports. */
.sp-readonly-facts dd {
    overflow-wrap: anywhere;
}

/* Pull-to-refresh indicator (standalone mode only; ptr.js gates this) */
#sp-ptr {
    position: fixed;
    top: -3rem;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9999;
    pointer-events: none;
    padding: var(--wa-space-2xs) var(--wa-space-s);
    background: var(--wa-color-surface-default);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: 999px;
    box-shadow: var(--wa-shadow-m);
    color: var(--wa-color-brand-fill-loud);
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0;
}

@media (max-width: 900px) {
    header.sp-topbar {
        display: flex !important;
        justify-content: space-between;
    }
    .sp-nav-desktop { display: none; }
    .sp-user { display: none; }
    .sp-nav-quickadd { display: none; }
    #sp-redeploy-form { display: none; }
    .sp-hamburger { display: inline-flex; }
}

/* Desktop nav links + dropdown triggers --------------------------------- */

.sp-nav-link,
.sp-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-2xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    color: var(--wa-color-text-normal);
    font-weight: 500;
    line-height: 1.2;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sp-nav-link wa-icon,
.sp-nav-trigger wa-icon {
    font-size: 0.95em;
    color: var(--wa-color-text-quiet);
}
.sp-nav-link:hover,
.sp-nav-trigger:hover {
    background: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
}
.sp-nav-link:hover wa-icon,
.sp-nav-trigger:hover wa-icon {
    color: var(--wa-color-brand-on-quiet);
}
.sp-nav-link.is-active,
.sp-nav-trigger.is-active {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}
.sp-nav-link.is-active wa-icon,
.sp-nav-trigger.is-active wa-icon {
    color: var(--wa-color-brand-on-quiet);
}
.sp-nav-trigger .sp-nav-caret {
    font-size: 0.7em;
    margin-inline-start: 2px;
    opacity: 0.7;
}

.sp-nav-dropdown wa-dropdown-item.is-active::part(base) {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    font-weight: 600;
}

/* "+" trigger pushed to the right edge of the nav */
.sp-nav-quickadd {
    margin-inline-start: auto;
    padding-inline-start: var(--wa-space-s);
}
.sp-nav-quickadd > wa-button[slot="trigger"]::part(base) {
    aspect-ratio: 1;
    padding-inline: 0;
    min-inline-size: 2rem;
}

/* Mobile drawer -------------------------------------------------------- */

/* Cap the drawer to the viewport — Web Awesome's default --size (~25rem)
   can be wider than a narrow phone, which pushes content off the edge. */
#sp-mobile-drawer {
    --size: min(22rem, 88vw);
}
#sp-mobile-drawer .sp-nav-mobile {
    display: flex;
}
.sp-nav-mobile-link {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    color: var(--wa-color-text-normal);
    font-weight: 500;
}
.sp-nav-mobile-link wa-icon {
    color: var(--wa-color-text-quiet);
    width: 1.25rem;
    text-align: center;
}
.sp-nav-mobile-link:hover {
    background: var(--wa-color-surface-raised);
}
.sp-nav-mobile-link.is-active {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}
.sp-nav-mobile-link.is-active wa-icon {
    color: var(--wa-color-brand-on-quiet);
}
.sp-nav-mobile-section {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
    padding-block-start: var(--wa-space-2xs);
}
.sp-nav-mobile-heading {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-2xs) var(--wa-space-m);
    color: var(--wa-color-text-quiet);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sp-nav-mobile-heading wa-icon {
    font-size: 0.85em;
}
.sp-nav-mobile-sublink {
    padding-inline-start: var(--wa-space-l);
}
.sp-nav-mobile-footer {
    margin-block-start: var(--wa-space-m);
    padding-block-start: var(--wa-space-s);
    border-block-start: 1px solid var(--wa-color-surface-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-s);
    flex-wrap: wrap;
}
.sp-nav-mobile-footer .sp-user {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    margin-inline-start: auto;
    min-inline-size: 0;
}
.sp-nav-mobile-footer .sp-user span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-nav-mobile-footer wa-button::part(base),
.sp-nav-mobile-footer wa-button::part(base):hover {
    box-shadow: none;
    transform: none;
}

/* Journey board ----------------------------------------------------------- */

.sp-journey-topbar {
    align-items: center;
}

.sp-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 16rem;
    gap: var(--wa-space-m);
    align-items: start;
    overflow-x: auto;
    padding-block-end: var(--wa-space-s);
    min-inline-size: 0;
}

.sp-kanban-col {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-raised);
    border-block-start: 3px solid var(--wa-color-neutral-fill-loud);
    min-height: 6rem;
    box-shadow: var(--wa-shadow-m);
}
.sp-kanban-col--brand   { border-block-start-color: var(--wa-color-brand-fill-loud); }
.sp-kanban-col--success { border-block-start-color: var(--wa-color-success-fill-loud); }
.sp-kanban-col--warning { border-block-start-color: var(--wa-color-warning-fill-loud); }
.sp-kanban-col--danger  { border-block-start-color: var(--wa-color-danger-fill-loud); }
.sp-kanban-col--neutral { border-block-start-color: var(--wa-color-neutral-fill-loud); }
.sp-kanban-col--custom  { border-block-start-color: var(--wa-color-neutral-fill-loud); }

.sp-kanban-head {
    align-items: center;
    margin-block-end: var(--wa-space-2xs);
}

.sp-card-link {
    text-decoration: none;
    color: inherit;
}

.sp-card {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-xs) var(--wa-space-s);
    background: var(--wa-color-surface-default);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    box-shadow: var(--wa-shadow-s);
    transition: transform 100ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.sp-card-link:hover .sp-card {
    transform: translateY(-1px);
    border-color: var(--wa-color-brand-border-loud);
    box-shadow: var(--wa-shadow-m);
}

.sp-card-name {
    font-weight: 600;
}

.sp-task-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
}

.sp-task {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
    padding-block-end: var(--wa-space-xs);
    border-block-end: 1px solid var(--wa-color-surface-border);
}
.sp-task:last-child {
    border-block-end: none;
    padding-block-end: 0;
}

.sp-task-title {
    font-weight: 500;
}

.sp-task-person {
    text-decoration: none;
}

.sp-task-empty {
    color: var(--wa-color-text-quiet);
    font-style: italic;
    margin: 0;
}

.sp-task-group-head {
    align-items: center;
    margin-block-end: var(--wa-space-xs);
}

/* Reports + query builder ------------------------------------------------- */

.sp-muted { color: var(--wa-color-text-quiet); }
.sp-link-quiet { color: inherit; text-decoration: none; }
.sp-link-quiet:hover { text-decoration: underline; }
.sp-link-bold { font-weight: 600; text-decoration: none; }
.sp-link-bold:hover { text-decoration: underline; }

/* List-page CTA clusters need a real gap when buttons wrap onto a
   second line on narrow viewports. Override Web Awesome's wa-cluster
   with explicit flex-wrap + a noticeable gap so 'New touchpoint'
   doesn't sit flush against the row above. !important + larger value
   because the WA token-default was too tiny to read as breathing room. */
.sp-page-head .wa-cluster {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--wa-space-s) !important;
    align-items: center;
}

/* Page head subtitle (sits below the title + count badge) ------------- */

.sp-page-head-text {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
}
.sp-page-subtitle {
    margin: 0;
    color: var(--wa-color-text-quiet);
    font-size: 0.95rem;
}

/* List rows (cards in card view) -------------------------------------- */

.sp-list-rows {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
}
.sp-list-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--wa-space-m);
    padding: var(--wa-space-s) var(--wa-space-m);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    transition: border-color 120ms, background 120ms;
}
.sp-list-row:hover {
    border-color: var(--wa-color-brand-border-loud);
    background: var(--wa-color-surface-quiet);
}
/* When this row's overflow menu is open, lift the row above its siblings
   so the absolutely-positioned menu doesn't get covered by the next row. */
.sp-list-row:has(.sp-overflow[open]) {
    z-index: 100;
}
.sp-list-row-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    color: inherit;
}
.sp-list-row > *:not(.sp-list-row-link) {
    position: relative;
    z-index: 2;
}
.sp-list-row a:not(.sp-list-row-link),
.sp-list-row wa-tag,
.sp-list-row wa-badge,
.sp-list-row wa-dropdown {
    pointer-events: auto;
}

.sp-list-checkbox {
    accent-color: var(--wa-color-brand-fill-loud);
    cursor: pointer;
}

/* Sticky bottom bar that appears when list-row checkboxes are checked */
.sp-bulk-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: var(--wa-space-s) var(--wa-space-l);
    background: var(--wa-color-surface-default);
    border-top: 1px solid var(--wa-color-surface-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Icon-block avatar for entities that don't have photos
   (Sundays, Series, Songs, Tasks, Touchpoints, Households w/o avatar). */
.sp-list-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.sp-list-icon--success { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.sp-list-icon--warning { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.sp-list-icon--neutral { background: var(--wa-color-surface-quiet); color: var(--wa-color-text-quiet); }

/* Sunday-code chip prefix in list rows ("26-01 The Altar No One Built") */
.sp-code-chip {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-inline-end: 0.4rem;
    border-radius: 999px;
    background: var(--wa-color-surface-quiet);
    color: var(--wa-color-text-quiet);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: 1px;
}
.sp-code-pill {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}

.sp-list-identity {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    min-width: 0;
}
.sp-list-name {
    font-weight: 600;
    color: var(--wa-color-text-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-list-sub {
    font-size: 0.85rem;
    color: var(--wa-color-text-quiet);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-list-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-list-tags,
.sp-list-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs);
    min-width: 0;
}

.sp-list-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* <details>-based row overflow menu.
   The host <details> must not pick up native.css's card-like defaults
   (background / border / padding), which would render a chunky panel
   around the trigger. */
.sp-overflow,
.sp-overflow[open] {
    position: relative;
    display: inline-block;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible;
}
.sp-overflow > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}
.sp-overflow > summary::-webkit-details-marker { display: none !important; }
.sp-overflow > summary::marker { content: "" !important; }
.sp-overflow > summary::before { content: none !important; }
.sp-overflow > summary::after  { content: none !important; }
.sp-row-overflow-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.4rem 0.55rem;
    border-radius: var(--wa-border-radius-s);
    color: var(--wa-color-text-quiet);
    cursor: pointer;
    line-height: 1;
    user-select: none;
    font-size: 1.05rem;
}
.sp-row-overflow-trigger:hover {
    background: var(--wa-color-surface-border);
    color: var(--wa-color-text-normal);
}
.sp-overflow[open] > .sp-row-overflow-trigger {
    background: var(--wa-color-surface-border);
    color: var(--wa-color-text-normal);
}
.sp-overflow-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 11rem;
    background: var(--wa-color-surface-default);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    box-shadow: var(--wa-shadow-l);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 50;
}
.sp-overflow-form {
    display: contents;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.sp-overflow-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--wa-border-radius-s);
    color: var(--wa-color-text-normal);
    text-decoration: none;
    font-size: 0.92rem;
    /* Reset button defaults so a <button> works the same as an <a> here. */
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.sp-overflow-item wa-icon {
    color: var(--wa-color-brand-on-quiet);
    font-size: 0.95rem;
}
.sp-overflow-item:hover {
    background: var(--wa-color-surface-quiet);
}
.sp-overflow-item--danger {
    color: var(--wa-color-danger-on-quiet, #ff6b6b);
}
.sp-overflow-item--danger wa-icon {
    color: inherit;
}
.sp-overflow-item--danger:hover {
    background: var(--wa-color-danger-fill-quiet, rgba(255, 107, 107, 0.12));
}

/* Section header inside a list (e.g. month group on /sundays) */

.sp-list-section-header {
    margin: var(--wa-space-m) 0 var(--wa-space-2xs) 0;
    padding-block-start: var(--wa-space-s);
    padding-inline-start: var(--wa-space-m);
    border-block-start: 1px solid var(--wa-color-surface-border);
    color: var(--wa-color-text-quiet);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sp-list-section-header:first-child {
    border-block-start: 0;
    padding-block-start: 0;
    margin-block-start: 0;
}

/* List footer: view toggle + count ------------------------------------ */

.sp-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wa-space-s);
    margin-block-start: var(--wa-space-m);
    padding-block-start: var(--wa-space-s);
    border-block-start: 1px solid var(--wa-color-surface-border);
    color: var(--wa-color-text-quiet);
    font-size: 0.9rem;
}
.sp-list-footer-left,
.sp-list-footer-right {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
}

@media (max-width: 720px) {
    .sp-list-row {
        grid-template-columns: auto 1fr auto;
        grid-auto-flow: dense;
    }
    .sp-list-tags,
    .sp-list-status {
        grid-column: 2 / 3;
    }
}

.sp-chip-row { flex-wrap: wrap; }
.sp-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--wa-color-text-normal);
    background: var(--wa-color-surface-default);
}
.sp-chip[aria-current="page"] {
    background: var(--wa-color-brand-fill-quiet);
    border-color: var(--wa-color-brand-border-loud);
    color: var(--wa-color-brand-on-quiet);
    font-weight: 600;
}

.sp-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.sp-data-table th,
.sp-data-table td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-block-end: 1px solid var(--wa-color-surface-border);
    vertical-align: top;
}
.sp-data-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wa-color-text-quiet);
    border-block-end: 2px solid var(--wa-color-surface-border);
}
.sp-data-table tbody tr:hover { background: var(--wa-color-surface-quiet); }
.sp-row-actions { text-align: end; white-space: nowrap; }

.sp-report-summary {
    padding: var(--wa-space-s) var(--wa-space-m);
    background: var(--wa-color-brand-fill-quiet);
    border-inline-start: 4px solid var(--wa-color-brand-border-loud);
    border-radius: var(--wa-border-radius-s);
    font-size: 0.95rem;
}

/* Query builder ----------------------------------------------------------- */

.sp-qb-group {
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    padding: var(--wa-space-s);
    background: var(--wa-color-surface-default);
}
.sp-qb-depth-1 { background: var(--wa-color-surface-quiet); }
.sp-qb-depth-2 { background: var(--wa-color-surface-default); }
.sp-qb-group + .sp-qb-group { margin-block-start: var(--wa-space-2xs); }
.sp-qb-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--wa-space-2xs);
}
.sp-qb-group-body {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    padding-inline-start: var(--wa-space-s);
    border-inline-start: 2px solid var(--wa-color-surface-border);
    margin-block-end: var(--wa-space-2xs);
}
.sp-qb-empty { font-style: italic; color: var(--wa-color-text-quiet); padding: var(--wa-space-2xs) 0; }

.sp-qb-op-pill {
    display: inline-flex;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: 999px;
    overflow: hidden;
}
.sp-qb-op-btn {
    padding: 0.15rem 0.7rem;
    border: 0;
    background: transparent;
    color: var(--wa-color-text-quiet);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.sp-qb-op-active {
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
}

.sp-qb-leaf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-2xs);
}
.sp-qb-leaf select,
.sp-qb-leaf input[type="text"],
.sp-qb-leaf input[type="number"],
.sp-qb-leaf input[type="date"] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    background: var(--wa-color-surface-default);
    color: inherit;
    font: inherit;
}
.sp-qb-field { min-width: 14ch; }
.sp-qb-op    { min-width: 8ch; }

.sp-qb-value {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs);
    align-items: center;
}
.sp-qb-pair-sep { color: var(--wa-color-text-quiet); }

.sp-qb-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.1rem 0.6rem;
    padding: var(--wa-space-2xs);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    background: var(--wa-color-surface-default);
    max-width: 36rem;
}
.sp-qb-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.sp-qb-add,
.sp-qb-remove {
    border: 1px solid var(--wa-color-surface-border);
    background: var(--wa-color-surface-default);
    color: inherit;
    border-radius: var(--wa-border-radius-s);
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}
.sp-qb-add:hover,
.sp-qb-remove:hover { border-color: var(--wa-color-brand-border-loud); }
.sp-qb-remove {
    width: 1.6rem;
    padding: 0;
    line-height: 1.4rem;
    text-align: center;
    color: var(--wa-color-text-quiet);
}

/* ===================================================================
   Dashboard
   =================================================================== */

.sp-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
}
.sp-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wa-space-m);
}
@media (max-width: 1000px) {
    .sp-dash-grid { grid-template-columns: 1fr; }
}

/* Stat strip ---------------------------------------------------------- */

.sp-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--wa-space-s);
}
.sp-stat-tile {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-m);
    border-radius: var(--wa-border-radius-l);
    background: color-mix(in srgb, var(--sp-tile-tone, var(--wa-color-brand-fill-loud)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sp-tile-tone, var(--wa-color-brand-border-loud)) 28%, transparent);
}
.sp-stat-tile--brand   { --sp-tile-tone: var(--wa-color-brand-fill-loud); }
.sp-stat-tile--success { --sp-tile-tone: var(--wa-color-success-fill-loud); }
.sp-stat-tile--warning { --sp-tile-tone: var(--wa-color-warning-fill-loud); }
.sp-stat-tile--danger  { --sp-tile-tone: var(--wa-color-danger-fill-loud); }
.sp-stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.sp-stat-icon--sm { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.sp-stat-icon--brand   { background: var(--wa-color-brand-fill-quiet);   color: var(--wa-color-brand-on-quiet); }
.sp-stat-icon--success { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.sp-stat-icon--warning { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.sp-stat-icon--danger  { background: var(--wa-color-danger-fill-quiet, var(--wa-color-brand-fill-quiet));  color: var(--wa-color-danger-on-quiet, var(--wa-color-brand-on-quiet)); }

.sp-stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-stat-value { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--wa-color-text-normal); }
.sp-stat-label { color: var(--wa-color-text-quiet); font-size: 0.85rem; line-height: 1.2; }
.sp-stat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
    color: var(--wa-color-brand-on-quiet);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.sp-stat-link:hover { text-decoration: underline; }

/* Card heading layout (shared, but needed in dashboard) --------------- */

.sp-card-heading-left {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
}
.sp-card-heading-quiet {
    color: var(--wa-color-text-quiet);
    font-weight: 500;
    font-size: 0.9em;
    margin-inline-start: 0.4rem;
}
.sp-card-heading-link {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--wa-color-brand-on-quiet);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}
.sp-card-heading-link:hover { text-decoration: underline; }
.sp-card-heading {
    width: 100%;
    justify-content: space-between !important;
}
.sp-card-footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    color: var(--wa-color-brand-on-quiet);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding-block: var(--wa-space-2xs);
}
.sp-card-footer-link:hover { text-decoration: underline; }

/* Needs Attention list ------------------------------------------------ */

.sp-attention-list {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
}
.sp-attention-item {
    display: grid;
    grid-template-columns: 2.25rem 2.5rem 1fr 1.25rem;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    color: var(--wa-color-text-normal);
    transition: background 120ms;
}
.sp-attention-item:hover { background: var(--wa-color-surface-quiet); }
.sp-attention-count { font-size: 1.5rem; font-weight: 800; }
.sp-attention-label { color: var(--wa-color-text-normal); font-weight: 500; }
.sp-attention-chevron { color: var(--wa-color-text-quiet); }

/* This Sunday card ---------------------------------------------------- */

.sp-this-sunday {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: var(--wa-space-m);
    align-items: stretch;
}
@media (max-width: 720px) {
    .sp-this-sunday { grid-template-columns: 1fr; }
}
.sp-this-sunday-art {
    border-radius: var(--wa-border-radius-m);
    background-size: cover;
    background-position: center;
    min-height: 11rem;
    background-color: var(--wa-color-surface-quiet);
}
.sp-this-sunday-art--empty {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wa-color-text-quiet);
    font-size: 2rem;
}
.sp-this-sunday-text {
    display: flex; flex-direction: column; gap: 0.4rem;
    min-width: 0;
}
.sp-this-sunday-title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.sp-this-sunday-meta { color: var(--wa-color-text-quiet); font-size: 0.95rem; }
.sp-this-sunday-cal  { color: var(--wa-color-text-normal); font-size: 0.95rem; }
.sp-this-sunday-tp   { color: var(--wa-color-text-quiet); font-size: 0.85rem; }
.sp-this-sunday-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--wa-color-brand-on-quiet);
    font-size: 0.85rem;
    font-weight: 600;
}
.sp-this-sunday-phase wa-icon { font-size: 0.9rem; }
.sp-this-sunday-quote {
    margin: 0;
    padding-inline-start: 0.6rem;
    border-inline-start: 3px solid var(--wa-color-brand-border-loud);
    color: var(--wa-color-text-normal);
    font-style: italic;
    line-height: 1.4;
}

/* Recent Activity list ------------------------------------------------ */

.sp-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
}
.sp-activity-item {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto auto;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-2xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    text-decoration: none;
    color: var(--wa-color-text-normal);
}
.sp-activity-item:hover { background: var(--wa-color-surface-quiet); }
.sp-activity-text { min-width: 0; }
.sp-activity-headline { font-weight: 600; line-height: 1.2; }
.sp-activity-sub { color: var(--wa-color-text-quiet); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-activity-date { color: var(--wa-color-text-quiet); font-size: 0.85rem; }

/* People Snapshot ----------------------------------------------------- */

.sp-snapshot {
    display: flex; flex-direction: column;
    gap: var(--wa-space-s);
}
.sp-snap-row {
    display: grid;
    grid-template-columns: 2.25rem 2.5rem 1fr;
    align-items: center;
    gap: var(--wa-space-s);
}
.sp-snap-count { font-size: 1.5rem; font-weight: 800; }
.sp-snap-meter { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.sp-snap-meter-head {
    display: flex; justify-content: space-between;
    color: var(--wa-color-text-quiet);
    font-size: 0.9rem;
}
.sp-snap-meter-head span:first-child { color: var(--wa-color-text-normal); }
.sp-snap-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--wa-color-surface-border);
    overflow: hidden;
}
.sp-snap-bar-fill { height: 100%; border-radius: inherit; }
.sp-snap-bar-fill--success { background: var(--wa-color-success-fill-loud); }
.sp-snap-bar-fill--warning { background: var(--wa-color-warning-fill-loud); }
.sp-snap-bar-fill--brand   { background: var(--wa-color-brand-fill-loud); }

.sp-snapshot-totals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wa-space-s);
    margin-block-start: var(--wa-space-m);
    padding-block-start: var(--wa-space-m);
    border-block-start: 1px solid var(--wa-color-surface-border);
}
.sp-snap-stat {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.5rem;
    align-items: center;
}
.sp-snap-stat wa-icon { color: var(--wa-color-brand-on-quiet); font-size: 1.1rem; }
.sp-snap-num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.sp-snap-label { color: var(--wa-color-text-quiet); font-size: 0.85rem; }
@media (max-width: 720px) {
    .sp-snapshot-totals { grid-template-columns: 1fr; }
}

/* Quick Actions ------------------------------------------------------- */

.sp-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--wa-space-s);
}
.sp-quick-action {
    display: grid;
    grid-template-columns: 2.25rem 1fr 1rem;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    text-decoration: none;
    color: var(--wa-color-text-normal);
    transition: border-color 120ms, background 120ms, transform 120ms;
}
.sp-quick-action:hover {
    border-color: var(--wa-color-brand-border-loud);
    background: var(--wa-color-surface-quiet);
    transform: translateY(-1px);
}
.sp-quick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-quick-label { font-weight: 700; line-height: 1.2; }
.sp-quick-sub { color: var(--wa-color-text-quiet); font-size: 0.85rem; line-height: 1.2; }
.sp-quick-action > wa-icon { color: var(--wa-color-text-quiet); justify-self: end; }

/* ----------------------------------------------------------------------
 * Person-page Email + SMS dialogs
 * ----------------------------------------------------------------------*/
.sp-msg-dialog {
    /* wa-dialog's outer width is set via the --width custom property,
     * not via ::part(body). Default is ~25rem, which is fine on
     * mobile but cramped on desktop where the editor wants room. */
    --width: min(48rem, 92vw);
}
.sp-msg-form { width: 100%; }
.sp-msg-recipient {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-quiet);
}
.sp-msg-recipient > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sp-msg-recipient > wa-icon {
    color: var(--wa-color-brand-border-loud);
    font-size: 1.25rem;
}
.sp-msg-editor wa-tab-panel { padding-top: var(--wa-space-s); }
.sp-msg-preview {
    min-height: 14rem;
    padding: var(--wa-space-m);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.sp-msg-preview > *:first-child { margin-top: 0; }
.sp-msg-preview > *:last-child  { margin-bottom: 0; }
.sp-msg-preview h1, .sp-msg-preview h2, .sp-msg-preview h3 { margin-top: var(--wa-space-m); }
.sp-msg-preview blockquote {
    border-left: 3px solid var(--wa-color-brand-border-loud);
    padding-left: var(--wa-space-s);
    color: var(--wa-color-text-quiet);
    margin: var(--wa-space-s) 0;
}
.sp-msg-preview pre {
    background: var(--wa-color-surface-quiet);
    padding: var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    overflow-x: auto;
}
.sp-msg-preview code {
    font-family: var(--wa-font-family-code);
    font-size: 0.9em;
}
.sp-sms-meter {
    font-size: 0.85rem;
    text-align: right;
}
.sp-msg-actions {
    border-top: 1px solid var(--wa-color-surface-border);
    padding-top: var(--wa-space-m);
    margin-top: var(--wa-space-s);
}

/* wa-textarea ignores the rows attribute when resize="auto" — both editor
   bodies were rendering as a single line on iOS. Force a comfortable
   resting height on the underlying control. */
.sp-sms-body::part(textarea) { min-height: 8rem; }
.sp-msg-body::part(textarea) { min-height: 18rem; }

/* ----------------------------------------------------------------------
 * Messages thread card (person detail page)
 * ----------------------------------------------------------------------*/
.sp-msg-thread-card .sp-msg-thread {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    max-height: 28rem;
    overflow-y: auto;
    padding: var(--wa-space-2xs) var(--wa-space-2xs) var(--wa-space-s);
}
.sp-msg-day {
    display: flex;
    justify-content: center;
    margin: var(--wa-space-s) 0 var(--wa-space-2xs);
}
.sp-msg-day span {
    font-size: 0.75rem;
    color: var(--wa-color-text-quiet);
    background: var(--wa-color-surface-quiet);
    padding: 2px var(--wa-space-s);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sp-msg-bubble {
    padding: var(--wa-space-2xs) var(--wa-space-s);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    transition: filter 120ms;
}
.sp-msg-bubble:hover { filter: brightness(0.96); }
.sp-msg-row {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}
.sp-msg-row--in {
    align-self: flex-start;
    align-items: flex-start;
}
.sp-msg-row--out {
    align-self: flex-end;
    align-items: flex-end;
}
.sp-msg-bubble--in {
    background: var(--wa-color-surface-quiet);
    color: var(--wa-color-text-normal);
    border-bottom-left-radius: 6px;
}
.sp-msg-bubble--out {
    align-self: flex-end;
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-on-loud);
    border-bottom-right-radius: 6px;
}
.sp-msg-bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    opacity: 0.7;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sp-msg-bubble-meta wa-icon { font-size: 0.75rem; }
.sp-msg-bubble-subject {
    font-weight: 700;
    margin-bottom: 2px;
}
.sp-msg-bubble-body { white-space: pre-wrap; }
.sp-msg-bubble-via {
    font-size: 0.7rem;
    color: var(--wa-color-text-quiet);
    padding: 2px var(--wa-space-xs) 0;
}
.sp-msg-reply-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-s);
    justify-content: flex-end;
    border-top: 1px solid var(--wa-color-surface-border);
    padding-top: var(--wa-space-s);
    margin-top: var(--wa-space-s);
}
.sp-msg-filter {
    display: inline-flex;
    gap: var(--wa-space-3xs);
    padding: var(--wa-space-3xs);
    margin-bottom: var(--wa-space-s);
    background: var(--wa-color-surface-quiet);
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
}
.sp-msg-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--wa-color-text-quiet);
    font: inherit;
    font-size: 0.85rem;
    padding: 4px var(--wa-space-s);
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.sp-msg-filter-btn:hover { color: var(--wa-color-text-normal); }
.sp-msg-filter-btn.is-active {
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-normal);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.sp-msg-filter-btn wa-icon { font-size: 0.85rem; }
.sp-msg-filter-count {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-quiet);
}
.sp-msg-filter-btn.is-active .sp-msg-filter-count {
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-on-loud);
}
.sp-msg-thread[data-filter="sms"]   .sp-msg-row[data-channel="email"],
.sp-msg-thread[data-filter="email"] .sp-msg-row[data-channel="sms"] {
    display: none;
}
.sp-msg-empty[hidden] { display: none; }
.sp-msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-l) var(--wa-space-s);
    color: var(--wa-color-text-quiet);
    font-size: 0.9rem;
}
.sp-msg-empty wa-icon { font-size: 1.5rem; opacity: 0.5; }
@media (max-width: 640px) {
    .sp-msg-row { max-width: 92%; }
    .sp-msg-thread-card .sp-msg-thread { max-height: 22rem; }
}

/* /admin/tag-styles — one form per group section; a single Save commits
   every row in that section. Native <select> so form participation is
   bulletproof. Per-row Reset is a sibling form referenced via the
   button's HTML `form` attribute (forms can't nest). */
.sp-tag-styles-card .sp-tag-styles-rows { padding-block: var(--wa-space-2xs); }
.sp-tag-styles-group-form { margin: 0; }
.sp-tag-styles-section-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--wa-space-m);
}
.sp-tag-styles-reset-form { display: none; }
.sp-tag-styles-usedin {
    margin-block: var(--wa-space-2xs) var(--wa-space-s);
    padding: var(--wa-space-2xs) var(--wa-space-s);
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-s);
}
.sp-tag-styles-usedin-heading {
    margin: 0 0 var(--wa-space-3xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wa-color-text-quiet);
}
.sp-tag-styles-usedin-list {
    margin: 0;
    padding-inline-start: 1.1rem;
    color: var(--wa-color-text-quiet);
    font-size: 0.875rem;
}
.sp-tag-styles-usedin-list li { margin-block: var(--wa-space-3xs); }
.sp-tag-styles-row {
    display: grid;
    grid-template-columns: 11rem auto 1fr auto;
    gap: var(--wa-space-m);
    align-items: center;
    padding: var(--wa-space-s) 0;
    border-bottom: 1px dashed var(--wa-color-surface-border);
}
.sp-tag-styles-row:last-child { border-bottom: none; }
.sp-tag-styles-row-label { min-width: 0; }
.sp-tag-styles-row-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
}
.sp-tag-styles-row-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--wa-space-s);
    margin: 0;
}
.sp-tag-styles-field {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
    min-width: 8rem;
}
.sp-tag-styles-field select,
.sp-tag-styles-field input[type="text"] {
    height: 2.25rem;
    padding: 0 var(--wa-space-2xs);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-default);
    font: inherit;
}
.sp-tag-styles-color { display: flex; flex-direction: column; gap: var(--wa-space-3xs); }
.sp-tag-styles-color[hidden] { display: none; }
.sp-tag-styles-color input[type="color"] {
    width: 3rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    background: transparent;
    cursor: pointer;
}
.sp-tag-styles-row-actions {
    display: flex;
    gap: var(--wa-space-2xs);
    justify-content: flex-end;
}
.sp-tag-styles-save,
.sp-tag-styles-reset-btn {
    height: 2.25rem;
    padding: 0 var(--wa-space-s);
    border: 1px solid transparent;
    border-radius: var(--wa-border-radius-s);
    font: inherit;
    cursor: pointer;
}
.sp-tag-styles-save {
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
}
.sp-tag-styles-save:hover { filter: brightness(0.95); }
.sp-tag-styles-reset {
    margin: 0;
}
.sp-tag-styles-reset-btn {
    width: 2.25rem;
    background: transparent;
    color: var(--wa-color-text-quiet);
    border-color: var(--wa-color-surface-border);
    line-height: 1;
}
.sp-tag-styles-reset-btn:hover { color: var(--wa-color-text-default); }
.sp-tag-styles-row--new {
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-s);
    padding-inline: var(--wa-space-s);
}
.sp-tag-styles-divider {
    border: none;
    border-top: 1px solid var(--wa-color-surface-border);
    margin: var(--wa-space-s) 0;
}
@media (max-width: 720px) {
    .sp-tag-styles-row {
        grid-template-columns: 1fr;
        gap: var(--wa-space-2xs);
    }
    .sp-tag-styles-row-actions { justify-content: flex-start; }
}

/* ─── Markdown editor (CodeMirror 6) ──────────────────────────────────
   Our own thin Markdown editor over CodeMirror 6 (assets-src/sp-editor.js,
   bundled to app/assets/vendor/sp-editor.js). Chrome is tuned to match Web
   Awesome's rounded cards; colours come from WA custom properties so dark
   mode follows along. Replaces the retired EasyMDE/CodeMirror-5 shell.
*/
.sp-md-card .sp-ed { margin-top: 0; }

.sp-ed {
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    overflow: hidden;
}
.sp-ed-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem;
    padding: 0.35rem 0.45rem;
    background: var(--wa-color-neutral-fill-quiet);
    border-bottom: 1px solid var(--wa-color-surface-border);
}
.sp-ed-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--wa-border-radius-s);
    background: transparent;
    color: var(--wa-color-neutral-on-quiet);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.sp-ed-btn:hover,
.sp-ed-btn.is-active {
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
}
.sp-ed-sep {
    width: 1px;
    align-self: stretch;
    margin: 0.2rem 0.25rem;
    background: var(--wa-color-surface-border);
}
.sp-ed-split {
    display: flex;
    align-items: stretch;
}
.sp-ed-cm { flex: 1 1 auto; min-width: 0; }
.sp-ed-cm .cm-editor {
    min-height: 220px;
    max-height: 600px;
}
.sp-ed-preview {
    display: none;
    flex: 1 1 50%;
    min-width: 0;
    max-height: 600px;
    overflow: auto;
    border-left: 1px solid var(--wa-color-surface-border);
}
.sp-ed.is-split .sp-ed-preview { display: block; }
.sp-ed.is-split .sp-ed-cm { flex: 1 1 50%; }

/* On narrow screens never split — the preview stacks below when toggled on. */
@media (max-width: 800px) {
    .sp-ed-split { flex-direction: column; }
    .sp-ed.is-split .sp-ed-preview { border-left: 0; border-top: 1px solid var(--wa-color-surface-border); }
}

.sp-ed-preview,
.sp-md-preview {
    background: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
    border-color: var(--wa-color-surface-border);
    padding: 1rem 1.25rem;
}
.sp-md-preview-empty,
.sp-md-preview-error {
    color: var(--wa-color-text-quiet);
    font-size: 0.9rem;
    font-style: italic;
}
.sp-md-preview-error {
    color: var(--wa-color-danger-600);
}
.sp-md-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.sp-md-label {
    display: block;
    font-size: 0.85rem;
    color: var(--wa-color-text-quiet);
    margin-bottom: 0.35rem;
}

/* Sunday resource-document attachments (detail page). */
.sp-attach-row {
    display: flex;
    align-items: flex-start;
    gap: var(--wa-space-s);
    padding: var(--wa-space-2xs) 0;
    border-bottom: 1px solid var(--wa-color-surface-border);
}
.sp-attach-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-attach-title { font-weight: 600; word-break: break-word; }
.sp-attach-meta {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    font-size: 0.8rem;
    color: var(--wa-color-text-quiet);
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
}
.sp-attach-form { margin-top: var(--wa-space-m); }
/* Native file input has an intrinsic min-width that overflows narrow
   (mobile) cards; constrain it to the card and clip the filename. */
.sp-attach-form input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.sp-attach-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 2.5rem;
    padding: 0 0.6rem;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-normal);
    font: inherit;
}

/* /media library page — drop zone + tile grid. */
.sp-media-upload-card { margin-bottom: 1rem; }
.sp-media-drop {
    border: 2px dashed var(--wa-color-surface-border);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    background: var(--wa-color-surface-default);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sp-media-drop.is-dragover {
    background: var(--wa-color-brand-fill-quiet, #eef2ff);
    border-color: var(--wa-color-brand-border-loud, #6366f1);
}
.sp-media-drop-icon { font-size: 2rem; color: var(--wa-color-text-quiet); }
.sp-media-drop-text { margin: 0.5rem 0; }
.sp-media-drop-pick {
    background: none; border: 0; padding: 0;
    color: var(--wa-color-brand-on-quiet); cursor: pointer;
    text-decoration: underline; font: inherit;
}
.sp-media-progress {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--wa-color-surface-raised);
    border-radius: 6px;
    font-size: 0.9rem;
}
.sp-media-progress.is-error {
    color: var(--wa-color-danger-on-quiet, #b91c1c);
    background: var(--wa-color-danger-fill-quiet, #fef2f2);
}

.sp-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.sp-media-tile {
    margin: 0;
    background: var(--wa-color-surface-raised);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sp-media-tile-link {
    display: block;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.sp-media-tile-link img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.sp-media-tile figcaption {
    padding: 0.5rem 0.65rem 0.65rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.sp-media-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sp-media-name {
    font-size: 0.78rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Friendly original filename — primary label above the hashed name. */
.sp-media-label {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-media-name-sub { font-size: 0.7rem; color: var(--wa-color-text-quiet); }
.sp-media-search { margin: 1rem 0; align-items: center; }
.sp-media-actions { flex-wrap: wrap; }
.sp-media-actions wa-button { font-size: 0.8rem; }
.sp-media-delete-form { margin: 0; }
.sp-media-pager { margin-top: 1.5rem; }

.sp-media-crumbs {
    margin: 1rem 0 0.25rem;
    align-items: center;
    font-size: 0.9rem;
}
.sp-media-crumbs a {
    color: inherit;
    text-decoration: none;
}
.sp-media-crumbs a:hover { text-decoration: underline; }

.sp-media-folders {
    margin: 0.75rem 0 1.25rem;
    flex-wrap: wrap;
}
.sp-media-folder {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--wa-color-surface-border, #d8d8d8);
    border-radius: var(--wa-border-radius-m, 0.5rem);
    background: var(--wa-color-surface-lowered, #f7f7f7);
    color: inherit;
    text-decoration: none;
    max-width: 16rem;
}
.sp-media-folder:hover {
    border-color: var(--wa-color-brand-fill-loud, #888);
}
.sp-media-folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hero-image preview on the newsletter compose page. Constrained
   so a tall portrait doesn't blow out the form. */
.sp-hero-preview {
    display: block;
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    border: 1px solid var(--wa-color-surface-border);
    background: var(--wa-color-surface-raised);
    object-fit: contain;
}

/* Upload-in-flight cursor + a tiny progress hint. */
html.sp-md-uploading,
html.sp-md-uploading * { cursor: progress !important; }

/* Toast holder for upload errors. Pinned bottom-right so it doesn't
   cover the editor while pastor's working. */
.sp-md-toast-holder {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(28rem, 90vw);
    pointer-events: none;
}
.sp-md-toast-holder wa-callout {
    pointer-events: auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Newsletter pages */
.sp-newsletter-summary { padding: var(--wa-space-m); }
.sp-newsletter-preview-frame { background: white; }
.sp-meta-table { border-collapse: collapse; }
.sp-meta-table td, .sp-meta-table th { padding: 0.35rem 0; vertical-align: top; }

/* People list — advanced filters disclosure */
.sp-filter-advanced > summary {
    cursor: pointer;
    color: var(--wa-color-neutral-text-loud, #444);
    font-weight: 500;
    padding: 0.25rem 0;
    list-style: none;
    user-select: none;
}
.sp-filter-advanced > summary::-webkit-details-marker { display: none; }
.sp-filter-advanced > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.5em;
    transition: transform 0.15s ease;
}
.sp-filter-advanced[open] > summary::before {
    transform: rotate(90deg);
}

/* Short links admin (/admin/links) */
.sp-link-stats {
    margin-block: var(--wa-space-s) var(--wa-space-m);
    font-size: 0.95rem;
}
.sp-link-filter { margin-block-end: var(--wa-space-m); }
.sp-link-list {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
}
.sp-link-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--wa-space-m);
}
.sp-link-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
}
.sp-link-slug { text-decoration: none; }
.sp-link-slug code { font-size: 0.95rem; }
.sp-link-dest,
.sp-link-title {
    display: block;
    max-width: 56ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-link-dest { font-size: 0.85rem; }
.sp-link-item-meta {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
.sp-link-edit { margin-block-start: var(--wa-space-s); }
.sp-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wa-space-s);
}
wa-dialog.sp-link-dialog { --width: min(34rem, 92vw); }
@media (max-width: 38rem) {
    .sp-link-item-head { flex-direction: column; gap: var(--wa-space-2xs); }
    .sp-link-item-meta { text-align: left; }
    .sp-link-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   Signage console (/pair) — client app (app/assets/signage-admin.js)
   Master-detail: a rail of screens + playlists, an editor on the right
   with a live preview, drag-drop reordering, and inline item editing.
   ====================================================================== */

.sp-signage-app {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: var(--wa-space-l);
    align-items: start;
}
.sp-signage-skeleton { padding: var(--wa-space-2xl); }

/* Web Awesome's native.css already styles bare input/select globally — we
   only set layout (stacked label + full-width control) here. */
.sp-signage-app .sp-field { display: flex; flex-direction: column; gap: var(--wa-space-2xs); }
.sp-signage-app .sp-field > span { color: var(--wa-color-text-quiet); }
.sp-signage-app .sp-field input,
.sp-signage-app .sp-field select { width: 100%; }

/* ---- rail ---- */
.sp-signage-rail {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    position: sticky;
    top: var(--wa-space-m);
}
.sp-rail-group { margin-top: var(--wa-space-s); }
.sp-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--wa-font-size-2xs);
    color: var(--wa-color-text-quiet);
    padding: 0 var(--wa-space-2xs);
    margin-bottom: var(--wa-space-2xs);
}
.sp-rail-home,
.sp-rail-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wa-space-s);
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--wa-border-radius-m);
    background: transparent;
    padding: var(--wa-space-xs) var(--wa-space-s);
    cursor: pointer;
    color: inherit;
    font: inherit;
    box-shadow: none;
}
.sp-rail-home:hover,
.sp-rail-item:hover { background: var(--wa-color-surface-raised); }
.sp-rail-home.is-active,
.sp-rail-item.is-active {
    background: var(--wa-color-brand-fill-quiet);
    border-color: var(--wa-color-brand-border-quiet);
}
.sp-rail-item-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sp-rail-item-text small { color: var(--wa-color-text-quiet); }
.sp-rail-item-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-rail-ic { color: var(--wa-color-text-quiet); }
.sp-rail-empty { padding: var(--wa-space-2xs) var(--wa-space-s); }
.sp-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
.sp-dot-ok { background: var(--wa-color-success-fill-loud); }
.sp-dot-warn { background: var(--wa-color-warning-fill-loud); }

/* ---- detail ---- */
.sp-detail-head { margin-bottom: var(--wa-space-m); }
.sp-detail-head h1 { margin: 0; }
.sp-detail-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); }
.sp-detail-head code { font-size: .85em; }

.sp-stats { margin-top: var(--wa-space-m); }
.sp-stat {
    display: flex; flex-direction: column;
    padding: var(--wa-space-m) var(--wa-space-l);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    min-width: 7rem;
}
.sp-stat-n { font-size: 2rem; font-weight: 800; line-height: 1; }
.sp-stat-l { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }

.sp-card-block {
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-m) var(--wa-space-l);
}
.sp-card-block h2 { margin: 0 0 var(--wa-space-s); }
.sp-card-pad { padding-block: var(--wa-space-s); }

.sp-screen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wa-space-l); align-items: start; }

/* ---- live preview ---- */
.sp-preview { position: sticky; top: var(--wa-space-m); }
.sp-preview iframe {
    width: 100%; aspect-ratio: 16 / 9;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    background: #010c39;
    display: block;
}
.sp-preview-bar { margin-top: var(--wa-space-xs); }

.sp-device-list { display: flex; flex-direction: column; gap: var(--wa-space-xs); }
.sp-device-row { padding-block: var(--wa-space-2xs); border-bottom: 1px solid var(--wa-color-surface-border); }

.sp-code-input {
    text-transform: uppercase; letter-spacing: .2em;
    font-family: ui-monospace, monospace;
}
.sp-title-input {
    font-size: var(--wa-font-size-2xl); font-weight: 800;
    border: 1px solid transparent !important; background: transparent !important;
    padding: var(--wa-space-2xs) var(--wa-space-xs) !important;
    flex: 1 1 auto; min-width: 0;
}
.sp-title-input:hover { border-color: var(--wa-color-surface-border) !important; }
.sp-title-input:focus { background: var(--wa-color-surface-default) !important; }

/* ---- playlist items ---- */
.sp-items { display: flex; flex-direction: column; gap: var(--wa-space-xs); }
.sp-item {
    display: flex; align-items: center; gap: var(--wa-space-s);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-xs) var(--wa-space-s);
    background: var(--wa-color-surface-default);
}
.sp-item.is-dragging { opacity: .5; box-shadow: var(--wa-shadow-l); }
.sp-item.is-off { opacity: .55; }
.sp-item-grip { cursor: grab; color: var(--wa-color-text-quiet); touch-action: none; }
.sp-item-thumb {
    width: 5rem; height: 3rem; flex: 0 0 auto;
    border-radius: var(--wa-border-radius-s);
    background-size: cover; background-position: center;
    background-color: var(--wa-color-neutral-fill-quiet);
    object-fit: cover;
}
.sp-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--wa-space-2xs); }

/* Collapsed by default — show a one-line summary, hide the editor body.
   The chevron in actions toggles .is-expanded to reveal the full editor. */
.sp-item:not(.is-expanded) .sp-item-body { display: none; }
.sp-item.is-expanded .sp-item-summary { display: none; }
.sp-item-summary {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: var(--wa-space-xs);
}
.sp-item-summary-caption {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600;
}
.sp-item-meta { color: var(--wa-color-text-quiet); justify-content: flex-start; }
.sp-item-caption {
    width: 100%;
    border: 1px solid transparent !important; background: transparent !important;
    font-weight: 600; padding: 0.2rem 0.3rem !important;
}
.sp-item-caption:hover { border-color: var(--wa-color-surface-border) !important; }
.sp-item-caption:focus { background: var(--wa-color-surface-default) !important; }
.sp-inline-field { display: inline-flex; align-items: center; gap: 0.25rem; }
.sp-dur { width: 4rem !important; }
.sp-type-sel { width: auto !important; }
.sp-item-actions { flex: 0 0 auto; }

.sp-sched-panel {
    margin-top: var(--wa-space-xs);
    padding: var(--wa-space-s);
    border: 1px dashed var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    display: flex; flex-direction: column; gap: var(--wa-space-xs);
}
.sp-dow { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--wa-font-size-s); }
.sp-sched-days { flex-wrap: wrap; }

/* ---- toast ---- */
.sp-signage-toast {
    position: fixed; right: var(--wa-space-l); bottom: var(--wa-space-l);
    z-index: 1000; max-width: 24rem;
    transform: translateY(1rem); opacity: 0;
    transition: transform .2s ease, opacity .2s ease; pointer-events: none;
}
.sp-signage-toast.is-shown { transform: translateY(0); opacity: 1; }

/* The back link is rendered as a <button> inside the SPA so it can dispatch
   nav-home through delegation, but Web Awesome's native button styling
   gives it a pill background by default — strip that so it reads as a
   text link, matching the <a class="sp-back-link"> rendering elsewhere. */
button.sp-back-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--wa-color-text-quiet);
    font: inherit;
    cursor: pointer;
    box-shadow: none;
}
button.sp-back-link:hover {
    color: var(--wa-color-brand-on-quiet);
    text-decoration: underline;
}

@media (max-width: 860px) {
    .sp-signage-app { grid-template-columns: 1fr; }
    .sp-signage-rail { position: static; flex-direction: column; }
    .sp-screen-grid { grid-template-columns: 1fr; }
    .sp-preview { position: static; }
}

/* On phone widths, let the playlist-item row wrap so the caption/schedule
   editor uses the full row width below the thumb instead of cramping into
   a narrow middle column. */
@media (max-width: 640px) {
    .sp-item { flex-wrap: wrap; align-items: flex-start; }
    .sp-item-thumb { width: 4rem; height: 2.5rem; }
    .sp-item-body { flex: 0 0 100%; order: 99; }
    .sp-item-actions { margin-left: auto; }
}