/*
 * Auditiono — base stylesheet.
 *
 * One file. No framework. No build step. CSS custom properties for theming;
 * prefers-color-scheme switches the palette. The light scheme is the
 * canonical brand expression: royal purple on warm off-white. The dark
 * scheme is a brand-tuned fallback for users whose OS preference is dark.
 *
 * Palette intent — distinct from sister products:
 *   - Sleuthy uses blue
 *   - Royaltally uses green
 *   - Auditiono uses royal purple, on warm paper-cream backgrounds
 *
 * Conventions:
 *   .container        — max-width wrapper; use on <main>
 *   .stack            — vertical spacing utility (form fields, page sections)
 *   .stack-tight      — tighter vertical spacing
 *   .flash            — banner-style status message; .flash-success / .flash-error
 *   .btn / .btn-primary — buttons
 *   .field            — wraps a label + input pair
 *   .muted            — secondary text colour
 */

:root {
    color-scheme: light dark;
    --bg: #faf7f2;
    --bg-alt: #f1ebe0;
    --text: #1f1a26;
    --text-muted: #5a4f63;
    --text-faint: #8c8395;
    --border: #e1dccf;
    --border-strong: #cbc4b3;
    --link: #5b2c91;
    --link-hover: #3f1d6b;
    --accent: #5b2c91;
    --accent-hover: #3f1d6b;
    --accent-text: #ffffff;
    --accent-soft-bg: #efe7f7;
    --success-bg: #ecf5ee;
    --success-border: #9fc7ac;
    --success-text: #21532f;
    --error-bg: #fbe9e9;
    --error-border: #d99c9c;
    --error-text: #7a1f1f;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --radius: 6px;
    --shadow: 0 1px 2px rgba(28, 18, 38, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1320;
        --bg-alt: #251b30;
        --text: #ece4f1;
        --text-muted: #b3a5be;
        --text-faint: #7c7185;
        --border: #392f44;
        --border-strong: #4f4259;
        --link: #b89cd9;
        --link-hover: #d0bbeb;
        --accent: #8a5cc9;
        --accent-hover: #a378d9;
        --accent-text: #ffffff;
        --accent-soft-bg: #2f2240;
        --success-bg: #1a3020;
        --success-border: #336b40;
        --success-text: #bde0c5;
        --error-bg: #3a1717;
        --error-border: #6e3030;
        --error-text: #f0b5b5;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }
}

/* ---- Reset / base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4 {
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: 0;
    color: var(--text);
}
h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem 0; }

code, pre { font-family: var(--font-mono); }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

/* ---- Layout primitives ------------------------------------------------ */

.container {
    max-width: 38rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.container-wide {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.stack > * + * { margin-top: 1.25rem; }
.stack-tight > * + * { margin-top: 0.625rem; }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: 0.9rem; }

/* ---- Top nav (in layouts/header.php) --------------------------------- */

.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.site-header-inner {
    /* Fixed site-wide header band — same width on every page, so the brand
     * logo + nav sit in the identical horizontal position regardless of the
     * page's content width. Matches the homepage (80rem). Per-page header
     * width tracking was retired 2026-06-06 in favour of this uniform bar. */
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-brand {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
}
.site-brand:hover { color: var(--accent-hover); }
/* Brand logo image (replaces the text wordmark). Height drives the size;
 * width auto-scales (native art is ~7.63:1). Adjust the height here if the
 * header should sit taller/shorter. */
.site-brand-logo { height: 18px; width: auto; display: block; }
.site-nav {
    display: flex;
    flex-wrap: wrap;          /* nav now carries Guides too — wrap, don't overflow */
    gap: 0.5rem 1.1rem;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.95rem;
}
@media (max-width: 40rem) {
    .site-nav { gap: 0.4rem 0.9rem; font-size: 0.9rem; }
}
.site-nav a {
    color: var(--text-muted);
    text-decoration: none;
}
.site-nav a:hover { color: var(--link); }

/* ---- Footer (in layouts/footer.php) ---------------------------------- */

.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 4rem;
    padding: 1.5rem 0;
    color: var(--text-faint);
    font-size: 0.875rem;
}
.site-footer-inner {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    justify-content: space-between;
    align-items: baseline;
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--link); }
.site-footer .footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer .footer-version { color: var(--text-faint); margin-left: 0.5rem; opacity: 0.7; }

/* Manual "Report a concern" link on public profiles + listings — kept deliberately low-key. */
.report-link { margin: 2.5rem auto 0; text-align: center; font-size: 0.8125rem; }
.report-link a { color: var(--text-faint); text-decoration: none; }
.report-link a:hover { color: var(--link); text-decoration: underline; }

/* ---- Forms ------------------------------------------------------------ */

.field { display: block; }
.field > label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
}
.field-hint {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.95rem;
}
.checkbox-row input[type="checkbox"] {
    margin-top: 0.25rem;
    width: auto;
    accent-color: var(--accent);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { border-color: var(--text-muted); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: var(--shadow);
}
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-text);
}

/* ---- Flash / status messages ----------------------------------------- */

.flash {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 1.25rem;
}
.flash-success {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}
.flash-error {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
}
.flash-info {
    background: var(--accent-soft-bg);
    border-color: var(--accent);
    color: var(--accent);
}
.flash p:last-child { margin-bottom: 0; }

/* ---- Misc ------------------------------------------------------------- */

.lede {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-top: 0;
}

.list-errors {
    margin: 0;
    padding-left: 1.25rem;
}

::selection {
    background: var(--accent-soft-bg);
    color: var(--accent);
}

/* ---- Fieldsets (long forms — narrator wizard, etc.) ------------------- */

fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
    background: var(--bg);
}
fieldset > legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.01em;
}

/* Group-level label (e.g. for a cluster of radios or checkboxes inside .field). */
.field > .label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Required-field asterisk inside a label. */
.req {
    color: var(--error-text);
    font-weight: 600;
    margin-left: 0.15rem;
}

/* ---- Radio rows (mirrors .checkbox-row) ------------------------------- */

.radio-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.95rem;
    margin-top: 0.3rem;
}
.radio-row:first-of-type {
    margin-top: 0;
}
.radio-row input[type="radio"] {
    margin-top: 0.25rem;
    width: auto;
    accent-color: var(--accent);
}

/* ---- Long-form helpers (narrator wizard) ------------------------------ */

/* Two-up field row: first/last name, country/city, etc. Falls back to a
   single column on narrow viewports. */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 30rem) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

/* Multi-column checkbox grid for long ticklist sections (accents, genres,
   languages, heritage). Auto-fills based on viewport so very long lists
   stay scannable on a wide screen and stack cleanly on mobile. */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.4rem 1rem;
    margin-top: 0.25rem;
}

/* Subhead inside a fieldset (region groups for accents, fiction vs.
   nonfiction in genres, etc.). */
.group-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 1rem 0 0.4rem;
    font-weight: 600;
}

/* Indented radio group sitting under a parent compensation checkbox. */
.indent-group {
    margin: 0.3rem 0 0.6rem 1.6rem;
}

/* File input — vanilla browser styling is ugly; soften the chrome. */
input[type="file"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}

/* Select dropdown sits next to the input/textarea rule already in base, but
   match the height pattern; the base rule covers it. Just optgroup label
   color tweak for legibility. */
optgroup {
    color: var(--text-muted);
    font-style: normal;
    font-weight: 600;
}
option {
    color: var(--text);
}

/* ---- Danger button (delete, decline) ---------------------------------- */

.btn-danger {
    background: var(--bg-alt);
    border-color: var(--error-border);
    color: var(--error-text);
}
.btn-danger:hover {
    background: var(--error-bg);
    border-color: var(--error-text);
    color: var(--error-text);
}

/* Inline form (delete buttons inside list items, etc.) */
.inline-form {
    display: inline-block;
    margin: 0.4rem 0 0 0;
}

/* ---- Narrator dashboard: change-your-URL details panel --------------- */
/*
 * Card-shaped <details> sitting below the progress cards. The summary line
 * is styled as a clearly clickable row — text on the left, "Click to
 * expand" hint and rotating chevron on the right. Hover and open states
 * use the brand accent for unambiguous "this is interactive" feedback.
 */

.np-url-settings {
    margin-top: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.np-url-settings > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.np-url-settings > summary::-webkit-details-marker { display: none; }
.np-url-settings > summary::after {
    /* Chevron that flips when open. */
    content: '\25BE';      /* black down-pointing small triangle */
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: transform 0.15s ease, color 0.12s ease;
}
.np-url-settings[open] > summary::after {
    transform: rotate(180deg);
    color: var(--accent);
}
.np-url-settings > summary:hover {
    background: var(--accent-soft-bg);
    color: var(--accent);
}
.np-url-settings > summary:hover::after {
    color: var(--accent);
}
.np-url-settings[open] > summary {
    border-bottom: 1px solid var(--border);
}

.np-url-settings-label {
    font-weight: 500;
    color: inherit;
}
.np-url-settings-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-left: auto;
    margin-right: 0.5rem;
}
.np-url-settings[open] > summary .np-url-settings-hint {
    /* Once open, "Click to expand" is misleading; the chevron alone is fine. */
    display: none;
}

.np-url-settings > form {
    padding: 1rem 1.1rem 1.1rem;
}
.np-url-settings-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.np-url-settings-field input[type="text"] {
    flex: 1;
    min-width: 12rem;
}

/* ---- Admin dashboard ------------------------------------------------- */

/* Page-width overrides — see consolidated block at end of file for the
 * full tier system. The few rules below remain here only because the
 * surrounding page-specific blocks reference them.
 */
.page-admin-dashboard main.container {
    max-width: 80rem;
}

.admin-pulse {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
    margin: 0 0 2rem 0;
    background: var(--bg-alt);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.admin-pulse > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.admin-pulse-n {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}
.admin-pulse-n.admin-pulse-warn {
    color: var(--error-text);
}
.admin-pulse-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.admin-section {
    margin: 0 0 2.25rem 0;
}
.admin-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.admin-section-head h2 {
    margin: 0;
    font-size: 1.15rem;
}
.admin-section-count {
    font-size: 0.85rem;
    color: var(--text-faint);
}

.admin-section-quiet {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-muted);
}
.admin-section-quiet h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.admin-section-quiet a {
    color: var(--text-muted);
}
.admin-section-quiet a:hover {
    color: var(--link);
}
.admin-section-quiet ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-section-quiet li {
    margin-bottom: 0.25rem;
}

.admin-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-list-card {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    margin-bottom: 0.5rem;
}
.admin-list-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    font-size: 0.95rem;
}
.admin-list-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.admin-tools {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admin-tools li {
    margin-bottom: 0.6rem;
    line-height: 1.55;
}

/* Status pills used in the recent-decisions list. Reuses brand colors
   semantically: green-ish for verified, error-ish for hidden. */
.admin-pill {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.admin-pill-verified {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}
.admin-pill-hidden {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

/* Additional status pills — used on the admin narrator roster
   (/admin/narrators/). .admin-pill-warn is also consumed by the
   dashboard listing queue. All theme-safe: existing semantic vars
   only, so they track the dark-mode overrides automatically. */
.admin-pill-pending {
    background: var(--bg-alt);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}
.admin-pill-pending_review,
.admin-pill-warn {
    background: var(--accent-soft-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
}
.admin-pill-featured {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}
.admin-pill-suspended {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

/* ---- Admin narrator roster (/admin/narrators/) ----------------------- */
/*
 * Full-width table of every narrator profile. The toolbar (search box +
 * live count) and the sortable column headers are progressively
 * enhanced by scripts/admin-narrator-roster.js; with JS off the table
 * is still a complete alphabetical roster.
 */
.roster-summary {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}
.admin-roster-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem 0;
}
.admin-roster-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 20rem;
}
.admin-roster-search span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.admin-roster-search input {
    flex: 1 1 auto;
    margin: 0;
}
.admin-roster-count {
    font-size: 0.82rem;
    color: var(--text-faint);
    white-space: nowrap;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--border);
    vertical-align: baseline;
}
.admin-table thead th {
    padding: 0;
    border-bottom: 2px solid var(--border-strong);
}
.admin-table thead th button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    margin: 0;
    padding: 0.5rem 0.7rem;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    cursor: pointer;
}
.admin-table thead th button:hover {
    color: var(--link);
}
.admin-table thead th button::after {
    content: " \2195";   /* up-down arrow — column is sortable */
    opacity: 0.35;
    font-size: 0.85em;
}
.admin-table thead th button[data-dir="asc"]::after {
    content: " \2191";   /* up arrow — sorted ascending */
    opacity: 1;
}
.admin-table thead th button[data-dir="desc"]::after {
    content: " \2193";   /* down arrow — sorted descending */
    opacity: 1;
}
.admin-table tbody tr:hover {
    background: var(--bg-alt);
}
.roster-name a {
    text-decoration: none;
}
.roster-name a:hover strong {
    text-decoration: underline;
}
.roster-pub {
    margin-left: 0.35rem;
    font-size: 0.85rem;
    text-decoration: none;
}
.roster-email {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

/* ---- Narrator dashboard: account footer block ------------------------ */
/*
 * GDPR-relevant self-service surfaces (export + delete). Visually
 * de-emphasised — muted color, small font, top border separator — so
 * they're findable without competing with the primary surfaces above.
 */

.np-account-links {
    margin-top: 4.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-faint);
}
.np-account-links h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin: 0 0 0.6rem 0;
    font-weight: 600;
}
.np-account-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.np-account-links li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}
.np-account-links a {
    color: var(--text-faint);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 2px;
}
.np-account-links a:hover {
    color: var(--link);
    text-decoration-color: var(--link);
}

/* ---- Narrator dashboard progress cards -------------------------------- */

.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}
.progress-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.progress-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.progress-count {
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
}

/* ---- Samples list ----------------------------------------------------- */

.samples-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.sample-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    margin-bottom: 0.8rem;
}
.sample-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
}
.sample-index {
    font-weight: 600;
    color: var(--accent);
}
.sample-genre {
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--bg-alt);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.sample-vibe {
    margin: 0.3rem 0 0.7rem;
    color: var(--text-muted);
}
.sample-card audio {
    width: 100%;
    margin: 0.4rem 0;
}

/* Action row under a sample: the Edit-details disclosure + the Delete
   button. Mirrors .credit-actions. Wraps cleanly on narrow screens. */
.sample-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}
.sample-actions .inline-form { margin: 0; }

/* The in-place genre + vibe editor sits behind a <details> so the fields
   only appear when the narrator wants them. Summary is styled to read as a
   secondary button, matching .credit-cover-upload. */
.sample-edit {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-alt);
    font-size: 0.95rem;
    flex: 1 1 20rem;
    min-width: 0;
}
.sample-edit > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.55rem 1.1rem;
    user-select: none;
    color: var(--text);
}
.sample-edit > summary::-webkit-details-marker { display: none; }
.sample-edit > summary::before {
    content: '✎ ';
    color: var(--text-muted);
    font-weight: 600;
}
.sample-edit[open] > summary::before { content: '− '; }
.sample-edit[open] > summary {
    border-bottom: 1px solid var(--border);
}
.sample-edit > form {
    padding: 0.85rem 1rem 1rem;
}

/* ---- Credits list ----------------------------------------------------- */

.credits-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.credit-card {
    padding: 0.8rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    margin-bottom: 0.6rem;
}
/* Cards with a cover thumbnail use a two-column layout (cover left, body
   right). Cards without a cover keep their single-column flow. */
.credit-card.has-cover {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
    align-items: start;
}
.credit-cover {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-alt);
    object-fit: cover;
}
.credit-body { min-width: 0; }

/* Action row under a credit's body: capture button, replace/upload details,
   delete button. Wraps cleanly on narrow screens. */
.credit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}
.credit-actions .inline-form { margin: 0; }

/* The manual cover upload sits behind a <details> so the file input only
   appears when the narrator wants it. Summary is styled to look like a
   secondary button. */
.credit-cover-upload {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-alt);
    font-size: 0.95rem;
}
.credit-cover-upload > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.55rem 1.1rem;
    user-select: none;
    color: var(--text);
}
.credit-cover-upload > summary::-webkit-details-marker { display: none; }
.credit-cover-upload > summary::before {
    content: '+ ';
    color: var(--text-muted);
    font-weight: 600;
}
.credit-cover-upload[open] > summary::before { content: '− '; }
.credit-cover-upload[open] > summary {
    border-bottom: 1px solid var(--border);
}
.credit-cover-upload > form {
    padding: 0.85rem 1rem 1rem;
}

.credit-main {
    margin-bottom: 0.25rem;
}
.credit-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
}
.credit-role {
    background: var(--bg-alt);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    color: var(--text);
    font-size: 0.85rem;
}

/* ---- Admin verify key/value layout ----------------------------------- */

dl.kv {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: 0.35rem 1.25rem;
    margin: 0.5rem 0 1.25rem;
}
dl.kv dt {
    font-weight: 500;
    color: var(--text-muted);
}
dl.kv dd {
    margin: 0;
}

/* ---- Public narrator profile (/n/<id>) -------------------------------- */
/*
 * Two-up hero with a compact 220px headshot, chip-based skill clusters,
 * card-grid credits, three-column working-details panel. Bio sits high
 * (right after hero) per ACX / IMDb / Voice123 convention. Container is
 * wider (64rem) than the default 38rem so the two-up has room to breathe.
 * Falls back cleanly to single-column on viewports ≤40rem.
 */

.page-narrator-public main.container {
    max-width: 72rem;
}

.narrator-public {
    margin: 0;
}

/* ----- Hero ------------------------------------------------------------ */

.np-hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    margin: 0.5rem 0 2rem 0;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 40rem) {
    .np-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.np-hero-photo {
    width: 220px;
}
@media (max-width: 40rem) {
    .np-hero-photo {
        width: min(220px, 60%);
        margin: 0 auto;
    }
}
.np-hero-photo img {
    display: block;
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
@media (max-width: 40rem) {
    .np-hero-photo img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* CSS-only avatar fallback: royal-purple square with narrator's initials.
   Sized to exactly match the headshot's footprint so layout never jumps. */
.np-avatar-fallback {
    width: 220px;
    height: 220px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    box-shadow: var(--shadow);
    user-select: none;
}
@media (max-width: 40rem) {
    .np-avatar-fallback {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        font-size: clamp(3rem, 14vw, 5rem);
    }
}

.np-hero-meta {
    min-width: 0;     /* let long names wrap inside the grid cell */
}

.np-name {
    margin: 0 0 0.35rem 0;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
}
.np-pronouns {
    display: inline-block;
    margin-left: 0.55rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-muted);
    vertical-align: 0.25em;
}
.np-tagline {
    margin: 0 0 0.6rem 0;
    color: var(--text-muted);
    font-size: 1.1rem;
    font-style: italic;
}
.np-location-line {
    margin: 0 0 0.6rem 0;
    color: var(--text);
    font-size: 0.95rem;
}

/* Native accent surfaced at identity level — sits between location and the
   hero sample. Pill carries an uppercase "Native" prefix to disambiguate
   from location text. */
.np-hero-native {
    margin: 0 0 1.1rem 0;
}
.np-chip-prefix {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 0.4rem;
    /* No opacity reduction — the prefix is differentiated from the accent
       name by being uppercase + smaller + letter-spaced; dropping opacity
       on top of that murders legibility on the solid-purple chip. */
}

.np-hero-sample {
    margin: 0 0 1.1rem 0;
    padding: 0.75rem 0.85rem;
    background: var(--bg-alt);
    border-radius: var(--radius);
}
.np-hero-sample-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-bottom: 0.45rem;
}
.np-hero-sample-vibe {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.np-hero-sample audio {
    width: 100%;
    height: 36px;
}

.np-hero-cta { margin-top: 0.25rem; }
.np-hero-cta-quiet {
    font-size: 0.9rem;
}
.np-hero-cta-quiet a {
    color: var(--text-muted);
    text-decoration: none;
}
.np-hero-cta-quiet a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ----- Sections -------------------------------------------------------- */

.np-section {
    margin: 1.75rem 0;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
}
.np-section:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}
.np-section h2 {
    margin: 0 0 0.9rem 0;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.np-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.np-section-head h2 { margin: 0; }
.np-section-count {
    font-size: 0.85rem;
    color: var(--text-faint);
}

/* About */
.np-bio {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    line-height: 1.65;
}
.np-training,
.np-find-online {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
}
.np-find-online + .np-training,
.np-training   + .np-find-online {
    margin-top: 0.35rem;
}
.np-find-online a {
    text-decoration: none;
}
.np-find-online a:hover {
    text-decoration: underline;
}
.np-training-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-faint);
    margin-right: 0.4rem;
}

/* ----- Chips ---------------------------------------------------------- */

.np-chip {
    display: inline-block;
    background: var(--bg-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
/* Native language/accent: solid royal-purple chip with white text. Lives in
   the hero alongside identity-level info (name, tagline, location) so it
   earns the same high-contrast treatment as the format-opt-in chips. The
   soft-purple-on-light-purple treatment we tried first was too tonal —
   text got lost, especially with a low-opacity prefix on top. */
.np-chip-native {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
    font-weight: 500;
}
/* Genre chip used inline next to a sample's vibe text (small visual tag). */
.np-chip-genre {
    background: var(--bg);
    color: var(--text-muted);
    border-color: var(--border-strong);
    font-size: 0.82rem;
}
/* Format opt-ins (multi-cast, dual-POV) — purple-filled accent chips. */
.np-chip-accent {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
    font-weight: 500;
}

.np-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}
.np-chips-spaced { margin-top: 0.7rem; }

.np-chip-group { margin: 0 0 1rem 0; }
.np-chip-group:last-child { margin-bottom: 0; }

.np-chip-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-faint);
    margin: 0 0 0.35rem 0;
}

/* Two-up chip clusters (voice ages + languages share a row at desktop). */
.np-chip-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin: 0 0 1rem 0;
}
@media (max-width: 40rem) {
    .np-chip-row { grid-template-columns: 1fr; }
}

/* ----- Credit cards (2-up grid, with optional cover thumb) ------------ */

.np-credit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.7rem;
}
.np-credit-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
}
/* When a cover thumb was captured, lay the card out as a two-column row
   (cover left, body right). Cards without a cover keep their single-column
   flow so the text doesn't sit indented under empty space. */
.np-credit-card.has-cover {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.8rem;
    align-items: start;
}
.np-credit-cover {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    object-fit: cover;
}
.np-credit-body { min-width: 0; }

.np-credit-title {
    margin: 0 0 0.2rem 0;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text);
}
.np-credit-byline {
    margin: 0 0 0.4rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.np-credit-link {
    text-decoration: none;
    font-size: 0.82rem;
    color: var(--accent);
}
.np-credit-link:hover { text-decoration: underline; }

/* ----- More samples (2-up compact card grid) -------------------------- */

.np-sample-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.7rem;
}
.np-sample-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.85rem;
}
.np-sample-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-bottom: 0.45rem;
}
.np-sample-vibe {
    color: var(--text-muted);
    font-size: 0.88rem;
}
.np-sample-card audio {
    width: 100%;
    height: 32px;
}

/* ----- Working details panel (3-column) ------------------------------- */

.np-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1.5rem;
}
@media (max-width: 40rem) {
    .np-details-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.np-detail { min-width: 0; }
.np-detail-primary {
    margin: 0 0 0.15rem 0;
    font-size: 0.95rem;
    color: var(--text);
}
.np-detail-secondary {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.np-details-footer {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.np-details-footer-row { line-height: 1.55; }
.np-details-footer-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-faint);
    margin-right: 0.4rem;
}

/* ----- Discovery strip ------------------------------------------------ */

.np-discovery {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-size: 0.95rem;
}
.np-discovery a { text-decoration: none; }
.np-discovery a:hover { text-decoration: underline; }

/* ----- Footer CTA ----------------------------------------------------- */

.np-footer-cta {
    margin: 2.5rem 0 0.5rem;
    text-align: center;
}
.np-footer-cta .btn-primary {
    padding: 0.7rem 1.5rem;
    font-size: 1.05rem;
}

/* ---- Role-chooser cards (/onboarding) --------------------------------- */

.role-card {
    display: block;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.role-card:hover {
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-1px);
}
.role-card h2 {
    margin: 0 0 0.35rem 0;
    color: var(--accent);
}
.role-card p {
    margin: 0 0 0.5rem 0;
    color: var(--text-muted);
}
.role-cta {
    display: inline-block;
    font-weight: 500;
    color: var(--accent);
}

/* ============================================================ */
/* Slice 5 — discovery surfaces                                  */
/* ============================================================ */

/* ----- Listing detail page (/listing/<slug>) -------------------------- */

.page-listing-public .container { max-width: 72rem; }

/* Dense info panels (Deal Structure / Deadlines / Book Basics / Special
 * Requirements) sit side-by-side in a 2-column grid at wider widths so
 * the wider container fills horizontally rather than stretching every
 * kv pair across the page. Audition Script + Rightsholder remain full
 * width below this grid because they want reading-width constraints
 * (script) or paragraph flow (bio). */
.lp-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
    gap: 0 2rem;
}
.lp-info-grid > .np-section { min-width: 0; }

/* Investment-case panel — RS / Hybrid / Custom listings only. Renders
 * above the Deal Structure grid because deal terms are abstract until
 * the narrator has commercial context. Tinted accent-soft background
 * + left rule in the brand purple give the section visual weight
 * without competing with the audition script blockquote below. */
.lp-investment-case {
    background: var(--accent-soft-bg);
    border-left: 3px solid var(--accent);
    padding: 1.2rem 1.5rem;
    border-radius: 4px;
    margin-bottom: 1.75rem;
}
.lp-investment-case h2 { margin-top: 0; }
.lp-investment-case-intro {
    margin: 0 0 1rem 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.lp-investment-case-pitch {
    margin: 1.1rem 0 0 0;
    padding: 0.9rem 1.1rem;
    background: var(--bg);
    border-left: 3px solid var(--accent-hover);
    border-radius: 3px;
    font-size: 1.02rem;
    line-height: 1.65;
}

.lp-hero {
    margin: 0.5rem 0 1.6rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--border);
}
.lp-title {
    margin: 0 0 0.3rem 0;
    font-size: 1.85rem;
    line-height: 1.2;
}
.lp-series {
    margin: 0 0 0.5rem 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-style: italic;
}
.lp-byline {
    margin: 0 0 0.9rem 0;
    font-size: 1.05rem;
    color: var(--text);
}
.lp-hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    align-items: center;
}
.lp-rwb-pill {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.5rem;
    background: var(--accent-soft-bg);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.lp-chip-deadline {
    background: var(--accent-soft-bg);
    color: var(--accent);
    border-color: var(--accent);
}
.lp-chip-firm {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}
.lp-audition-script {
    background: var(--bg-alt);
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    margin: 0;
    max-height: 420px;
    overflow: auto;
    line-height: 1.55;
}

/* Book description — rightsholder's own copy. Reads as prose, not boxed
 * quote: this is the narrative voice of the book, distinct from the
 * audition script (which is excerpted text) and the investment case
 * (which is a structured pitch). Generous line-height, comfortable
 * max-width for readability at desktop. */
.lp-description-body {
    line-height: 1.7;
    font-size: 1.02rem;
    max-width: 42rem;
    white-space: pre-wrap;
}

.lp-author-bio {
    color: var(--text-muted);
    font-style: italic;
    margin: 0.3rem 0 0.6rem;
}
.lp-footer-cta {
    margin: 2.5rem 0 1rem;
    text-align: center;
}
.lp-footer-cta .btn,
.lp-footer-cta .btn-primary {
    padding: 0.7rem 1.5rem;
    font-size: 1.05rem;
}
.lp-footer-cta .faint {
    margin-top: 0.6rem;
}

/* ----- Stub modal (Slice 5 placeholder for Slice 6 flows) ------------- */

.stub-modal {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    padding: 1.5rem 1.6rem;
    max-width: 32rem;
    box-shadow: var(--shadow);
}
.stub-modal::backdrop {
    background: rgba(20, 12, 30, 0.45);
}
.stub-modal h2 {
    margin: 0 0 0.7rem 0;
    color: var(--accent);
    font-size: 1.15rem;
}
.stub-modal p { margin: 0 0 0.7rem; }
.stub-modal p:last-child { margin-bottom: 0; }

/* ----- Listings browse (/listings) ----------------------------------- */

.page-listings-browse .container,
.page-narrators-browse .container { max-width: 88rem; }

.browse-filters {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin: 0.5rem 0 1.5rem;
}
.browse-filters legend {
    padding: 0 0.4rem;
    font-weight: 600;
    color: var(--accent);
}
.browse-filters .field {
    margin-bottom: 0.7rem;
}
.browse-filters .field:last-child {
    margin-bottom: 0;
}
.browse-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.1rem;
    align-items: flex-end;
}
.browse-filter-row .field {
    flex: 1 1 12rem;
    min-width: 10rem;
    margin-bottom: 0;
}
.browse-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border);
}

/* Search-by-name row — sits at the top of the filter fieldset. The input
 * grows to fill the row with the Search button pinned to its right. */
.browse-search {
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed var(--border);
}
.browse-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.browse-search-row input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
}
.browse-search-row .btn {
    flex: 0 0 auto;
}

.browse-result-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem;
    color: var(--text-muted);
}
.browse-result-bar .browse-result-count {
    font-weight: 600;
    color: var(--text);
}

.browse-empty {
    background: var(--bg-alt);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
    text-align: center;
    color: var(--text-muted);
}

/* Listing cards */
.listing-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 1rem;
}
.listing-card {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.listing-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.listing-card-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}
.listing-card-title a {
    color: var(--text);
    text-decoration: none;
}
.listing-card-title a:hover { color: var(--accent); }
.listing-card-byline {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.listing-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
}
.listing-card-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.listing-card-meta strong { color: var(--text); }

/* Narrator browse cards */
.narrator-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}
.narrator-card {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.narrator-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.narrator-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.narrator-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-soft-bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.narrator-card-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.narrator-card-name {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}
.narrator-card-name a {
    color: var(--text);
    text-decoration: none;
}
.narrator-card-name a:hover { color: var(--accent); }
.narrator-card-loc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.narrator-card-tagline {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text);
    font-style: italic;
}
.narrator-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
}
.narrator-card-stats {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.narrator-card-stats strong { color: var(--text); }
.narrator-card-actions {
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.narrator-card-actions .btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}

/* ============================================================ */
/* Page widths — consolidated tier system                        */
/* ============================================================ */
/* Default .container is 38rem (auth/forms). Pages with denser
 * content set a page-class on the body and override here. Tiers:
 *
 *   38rem (default) — auth forms (login, signup, password reset,
 *                     resend-verification, verify-email-required),
 *                     legal prose (privacy, terms), home, onboarding
 *                     role chooser, account export/delete, 404/500
 *   48rem           — author profile wizard (small form)
 *   56rem           — narrator profile wizard (long form; field
 *                     readability still matters more than width)
 *   64rem           — sample/credit management, listing-create wizard
 *   72rem           — public narrator profile, public listing detail,
 *                     admin verify/review/diagnostic action pages,
 *                     narrator dashboard
 *   80rem           — admin dashboard, author dashboard (queues +
 *                     lists of items, where horizontal real estate
 *                     reduces scroll meaningfully)
 *   88rem           — browse surfaces (listings / narrators) — card
 *                     grids that pack more per row at wider widths
 *
 * Rules earlier in this file already set 72rem on .page-listing-public,
 * 80rem on .page-admin-dashboard, 72rem on .page-narrator-public, and
 * 88rem on the two browse pages. The remaining tier assignments live
 * here so the system is grokkable from one block. New page-classes
 * should be added to this block, not scattered.
 */
.page-author-create        main.container { max-width: 48rem; }
.page-narrator-create      main.container { max-width: 56rem; }
.page-narrator-samples     main.container,
.page-narrator-credits     main.container,
.page-listing-create       main.container { max-width: 64rem; }
.page-admin                main.container,
.page-admin-verify         main.container,
.page-admin-listing-review main.container,
.page-narrator-dashboard   main.container { max-width: 72rem; }
.page-author-dashboard     main.container { max-width: 80rem; }
.page-admin-narrators      main.container { max-width: 88rem; }
/* Content + SEO pass — homepage + supporting content pages. */
.page-home                 main.container { max-width: 80rem; }
.page-how-it-works         main.container { max-width: 64rem; }
.page-faq                  main.container { max-width: 56rem; }
.page-about                main.container { max-width: 56rem; }
.page-guide                main.container { max-width: 56rem; }

/* Header inner width is now a single fixed band (80rem) defined on
 * .site-header-inner above — uniform on every page so the logo never shifts
 * between pages. The former per-page header-width overrides were removed
 * 2026-06-06; content-area widths below are unaffected. */

/* ============================================================ */
/* Dashboard chrome — identity strip + pulse + listing cards     */
/* ============================================================ */
/* Used on both /profile/author/dashboard and
 * /profile/narrator/dashboard for consistent visual language
 * across the two surfaces. The admin dashboard uses its own
 * .admin-pulse classes (predates this); they're visually parallel
 * but not yet unified. */

.dashboard-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.2rem;
    padding: 0.75rem 1.1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0.5rem 0 1.25rem;
}
.dashboard-identity-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    min-width: 0;
}
.dashboard-identity-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
}
.dashboard-identity-meta {
    font-size: 0.88rem;
    color: var(--text-muted);
}
.dashboard-identity-meta a {
    color: var(--text-muted);
    text-decoration: none;
}
.dashboard-identity-meta a:hover {
    color: var(--accent);
    text-decoration: underline;
}
.dashboard-identity-actions .btn {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

.dashboard-pulse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 2rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 1.5rem;
}
.dashboard-pulse > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dashboard-pulse-n {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}
.dashboard-pulse-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 0.35rem;
}
.dashboard-pulse-pill {
    margin-left: auto;
    padding: 0.4rem 0.9rem;
    background: var(--accent-soft-bg);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}
.dashboard-pulse-pill.is-warn {
    background: var(--error-bg);
    color: var(--error-text);
}

.dashboard-action-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.5rem 0;
}
.dashboard-action-bar .btn-primary {
    padding: 0.55rem 1.3rem;
    font-size: 1rem;
}

/* Pro-account interest note — only rendered when an author is at the
 * 30-day listing cap (dashboard.php). Quiet, accent-tinted card that
 * acts as the demand trigger for the unbuilt Pro tier. */
.dashboard-pro-note {
    margin: 0 0 1.5rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--accent-soft-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}
.dashboard-pro-note p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.dashboard-pro-note strong { color: var(--text); }

/* Per-status listing-card system used on the author dashboard. Parallel
 * to .listing-card on /listings browse but with action buttons and
 * status chips for the owner-facing context. */

.dash-listing-group {
    margin-top: 1.5rem;
}
.dash-listing-group h3 {
    margin: 0 0 0.7rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.dash-listing-group-hint {
    margin: -0.5rem 0 0.7rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.dash-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 0.9rem;
}

.dash-listing-card {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.9rem 1.05rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.dash-listing-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.dash-listing-card-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}
.dash-listing-card-title a {
    color: var(--text);
    text-decoration: none;
}
.dash-listing-card-title a:hover { color: var(--accent); }

.dash-status-chip {
    flex: 0 0 auto;
    font-size: 0.68rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
}
.dash-status-chip-open           { background: var(--success-bg); color: var(--success-text); }
.dash-status-chip-pending_review { background: var(--accent-soft-bg); color: var(--accent); }
.dash-status-chip-draft          { background: var(--bg-alt); color: var(--text-muted); }
.dash-status-chip-hidden         { background: var(--error-bg); color: var(--error-text); }
.dash-status-chip-closed,
.dash-status-chip-archived       { background: var(--bg-alt); color: var(--text-faint); }

.dash-listing-card-byline {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}
.dash-listing-card-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.dash-listing-card-meta strong { color: var(--text); font-weight: 600; }

.dash-listing-card-decline-note {
    margin: 0;
    padding: 0.5rem 0.7rem;
    background: var(--bg-alt);
    border-left: 2px solid var(--error-border);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

.dash-listing-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}
.dash-listing-card-actions .btn,
.dash-listing-card-actions .btn-danger-quiet {
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
}
.dash-listing-card-actions form {
    margin: 0;
}

.dashboard-empty {
    background: var(--bg-alt);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 1.4rem 1.2rem;
    text-align: center;
    color: var(--text-muted);
    margin: 1rem 0;
}

/* Status chip with click-to-expand popover. Used on the narrator
 * dashboard identity strip for the Verified state — the chip stays
 * compact, the verification details + share guidance live in the
 * expanded popover.
 *
 * Uses native <details>/<summary> so it works without JS and is
 * CSP-clean. The summary inherits .dash-status-chip-* coloring; the
 * body is absolutely positioned so opening it doesn't push the
 * identity strip out of its row. */
.status-chip-expander {
    position: relative;
    display: inline-block;
}
.status-chip-expander > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.status-chip-expander > summary::-webkit-details-marker {
    display: none;
}
.status-chip-expander > summary::after {
    content: " \25BE";  /* small down-caret to hint the chip is expandable */
    margin-left: 0.2em;
    opacity: 0.7;
}
.status-chip-expander[open] > summary::after {
    content: " \25B4";  /* up-caret when expanded */
}
.status-chip-expander-body {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 10;
    width: max-content;
    max-width: min(34rem, calc(100vw - 2rem));
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    box-shadow: var(--shadow);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
}
.status-chip-expander-body p {
    margin: 0 0 0.55rem;
}
.status-chip-expander-body p:last-child {
    margin-bottom: 0;
}
.status-chip-expander-body a {
    color: var(--accent);
}

/* Quiet bottom-of-page re-engagement banner (narrator dashboard
 * "wear two hats" cross-sell). Demoted from the top of the page
 * 2026-05-17 — only a small fraction of narrators are also authors,
 * so the prompt sits near the account links, low-key, with a
 * dismiss button that sets a year-long cookie. */
.np-author-prompt-quiet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0 1rem;
    padding: 0.7rem 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-muted);
}
.np-author-prompt-quiet strong {
    color: var(--text);
    margin-right: 0.3rem;
}
.np-author-prompt-quiet a {
    color: var(--accent);
}
.np-author-prompt-quiet form { margin: 0; }
.np-author-prompt-dismiss {
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: transparent;
    border-color: var(--border);
}
.np-author-prompt-dismiss:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* =========================================================================
 * Slice 6 (2026-05-19) — audition + invitation surfaces.
 *
 * Width tiers: submit and invite are form pages (56rem). Both inbox
 * surfaces (narrator + author per-listing) are 72rem matching the
 * narrator dashboard. The chip palette extends dash-status-chip-* with
 * audition and invitation states. The audition-card system parallels
 * dash-listing-card from Slice 5 — a soft-bordered surface with header,
 * audio player, optional cover note + quote, and an actions row.
 * ========================================================================= */

.page-narrator-audition-submit main.container,
.page-author-invite             main.container { max-width: 56rem; }

.page-narrator-auditions-inbox  main.container { max-width: 72rem; }
.page-author-auditions-inbox    main.container { max-width: 88rem; }

/* ---- Status chip palette additions (audition + invitation states) ----- */
.dash-status-chip-submitted        { background: var(--accent-soft-bg); color: var(--accent); }
.dash-status-chip-shortlisted      { background: var(--success-bg);     color: var(--success-text); }
.dash-status-chip-declined         { background: var(--error-bg);       color: var(--error-text); }
.dash-status-chip-withdrawn        { background: var(--bg-alt);         color: var(--text-faint); }
.dash-status-chip-selected         { background: var(--success-bg);     color: var(--success-text); font-weight: 700; }
.dash-status-chip-invite-sent      { background: var(--accent-soft-bg); color: var(--accent); }
.dash-status-chip-invite-accepted  { background: var(--success-bg);     color: var(--success-text); }
.dash-status-chip-invite-declined  { background: var(--error-bg);       color: var(--error-text); }
.dash-status-chip-invite-expired   { background: var(--bg-alt);         color: var(--text-faint); }

/* ---- Audition card system (shared across narrator + author inboxes) --- */
.audition-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0.7rem 0 1.5rem;
}
@media (min-width: 56rem) {
    .audition-card-grid-author {
        grid-template-columns: 1fr;  /* stays single-col for legibility; audio + chips need horizontal room */
    }
}

.audition-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}
.audition-card audio {
    display: block;
    width: 100%;
    margin: 0.7rem 0;
    height: 36px;
}
.audition-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}
.audition-card-title {
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.3;
}
.audition-card-title a {
    color: var(--text);
    text-decoration: none;
}
.audition-card-title a:hover { color: var(--accent); }
.audition-card-meta {
    margin: 0 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.audition-card-meta strong { color: var(--text); font-weight: 600; }
.audition-card-expires {
    margin: 0.2rem 0 0.5rem;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 500;
}
.audition-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    margin-top: 0.75rem;
    align-items: flex-start;
}
.audition-card-actions form { margin: 0; }
.audition-card-quote {
    margin: 0.55rem 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.audition-card-quote strong {
    color: var(--text);
    font-weight: 600;
}
.audition-card-status-note {
    margin: 0.55rem 0 0;
    padding: 0.6rem 0.85rem;
    background: var(--bg-alt);
    border-radius: var(--radius);
    font-size: 0.92rem;
    color: var(--text-muted);
}

/* Author-side audition card adds a narrator-mini-identity strip with
 * avatar / name / credit count side-by-side. Narrator-side audition
 * cards don't need this — the narrator already knows who they are. */
.audition-card-narrator {
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

/* Author-side queue: horizontal-row layout per card (88rem-wide page).
 * Identity left, audio center, action buttons right; chips + cover note +
 * rate quote wrap to a compact second line beneath. Each audition reads
 * as a list row rather than a full-screen card, so scanning 12+
 * submissions doesn't require constant scrolling. Mobile collapses back
 * to the stacked layout below the 60rem breakpoint. */
.audition-card-grid-author { gap: 0.6rem; }

.audition-card-grid-author .audition-card-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1.1rem;
    padding: 0.85rem 1.1rem;
}
.audition-card-grid-author .audition-card-author > .audition-card-head {
    flex: 1 1 260px;
    min-width: 220px;
    align-items: center;
    margin-bottom: 0;
}
.audition-card-grid-author .audition-card-author > audio {
    flex: 0 1 320px;
    min-width: 220px;
    margin: 0;
    height: 36px;
}
.audition-card-grid-author .audition-card-author > .audition-card-actions {
    flex: 0 0 auto;
    margin-top: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}
/* Wrap extras (chips, cover note, quote, status note) to a second flex
 * line filling the full row width. If a card has none of these, the
 * second line collapses automatically and the card stays one line tall. */
.audition-card-grid-author .audition-card-author > .audition-card-chips,
.audition-card-grid-author .audition-card-author > .audition-cover-note,
.audition-card-grid-author .audition-card-author > .audition-card-quote,
.audition-card-grid-author .audition-card-author > .audition-card-status-note {
    flex: 1 1 100%;
    margin: 0;
    margin-top: 0.25rem;
}
.audition-card-grid-author .audition-cover-note {
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
}
.audition-card-grid-author .audition-card-chips {
    margin-top: 0.15rem;
}

@media (max-width: 60rem) {
    .audition-card-grid-author .audition-card-author {
        display: block;
    }
    .audition-card-grid-author .audition-card-author > audio {
        width: 100%;
        margin-top: 0.5rem;
    }
    .audition-card-grid-author .audition-card-author > .audition-card-actions {
        margin-top: 0.7rem;
    }
}
.audition-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--accent-soft-bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}
.audition-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.audition-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0.6rem;
}
.audition-card-cover-note,
.audition-cover-note {
    margin: 0.5rem 0;
    padding: 0.6rem 0.85rem;
    background: var(--bg-alt);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    font-size: 0.93rem;
    color: var(--text);
}
.audition-card-cover-note summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.audition-card-cover-note summary:hover { color: var(--accent); }
.audition-card-cover-note[open] {
    padding: 0.6rem 0.85rem 0.7rem;
}
.audition-card-cover-note[open] summary {
    margin-bottom: 0.4rem;
}
.audition-card-cover-note p {
    margin: 0;
}

/* Subhead / section structure inside the inbox surfaces. */
.audition-inbox-section h2 {
    font-size: 1.4rem;
    margin: 0 0 0.6rem;
}
.audition-inbox-subhead {
    font-size: 1.05rem;
    margin: 1.2rem 0 0.5rem;
    color: var(--text);
    font-weight: 600;
}
.audition-inbox-subhead .faint { font-weight: 400; margin-left: 0.3rem; }
.audition-inbox-history > summary {
    cursor: pointer;
    padding: 0.6rem 0;
    color: var(--text-muted);
    list-style: revert;
}
.audition-inbox-history > summary:hover { color: var(--accent); }
.audition-inbox-history[open] > summary { color: var(--text); }

/* Invitation cards — slight variation on audition-card for the "sent"
 * (awaiting reply) state. Past invitations render in the same shape
 * but visually de-emphasised. */
.invitation-card-sent {
    border-left: 3px solid var(--accent);
}
.invitation-card-past {
    opacity: 0.85;
}
.invitation-personal-note {
    margin: 0.6rem 0 0.8rem;
    padding: 0.6rem 0.9rem;
    background: var(--accent-soft-bg);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    color: var(--text);
    font-style: italic;
}

/* Decline-invitation expander (narrator side). Pure <details> + form —
 * no JS needed. Same pattern for pass-on-audition (author side). */
.invitation-decline-details,
.audition-pass-details {
    margin: 0;
}
.invitation-decline-details > summary,
.audition-pass-details > summary {
    list-style: none;
    cursor: pointer;
}
.invitation-decline-details > summary::-webkit-details-marker,
.audition-pass-details > summary::-webkit-details-marker { display: none; }
.invitation-decline-details[open] > summary,
.audition-pass-details[open] > summary {
    background: var(--bg-alt);
    border-color: var(--text-muted);
}
.invitation-decline-form,
.audition-pass-form {
    margin-top: 0.7rem;
    padding: 0.9rem 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.invitation-decline-form .field,
.audition-pass-form .field { margin-bottom: 0.75rem; }
.invitation-decline-form .field:last-child,
.audition-pass-form .field:last-child { margin-bottom: 0; }

/* ---- Submit-audition form ---- */
.audition-submit-form .field-hint {
    line-height: 1.45;
}
.audition-rate-quote {
    margin: 0;
    padding: 0.9rem 1rem 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.audition-rate-quote legend {
    padding: 0 0.4rem;
    font-weight: 600;
    color: var(--text);
}
.audition-rate-input-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.audition-rate-input-row input {
    flex: 0 1 8rem;
}

/* ---- Invite-to-audition form ---- */
.invite-narrator-summary {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}
.invite-narrator-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.invite-narrator-name {
    font-size: 1.1rem;
    margin: 0 0 0.3rem;
}
.invite-narrator-tagline {
    margin: 0 0 0.3rem;
    color: var(--text-muted);
    font-style: italic;
}
.invite-listing-static {
    margin: 0;
    padding: 0.7rem 0.9rem;
    background: var(--accent-soft-bg);
    border-radius: var(--radius);
    color: var(--text);
}
.invite-ineligible-listings {
    margin: -0.5rem 0 0;
}
.invite-ineligible-listings > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.3rem 0;
}
.invite-ineligible-listings > summary:hover { color: var(--accent); }
.invite-ineligible-list {
    margin: 0.6rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.invite-ineligible-list li {
    margin: 0.2rem 0;
}

/* ---- Narrator-dashboard inbox snapshot (Slice 6 addition) ------------- */
.dashboard-inbox-snapshot h2 {
    font-size: 1.4rem;
    margin: 0 0 0.6rem;
}
.dashboard-inbox-snapshot p:last-child { margin-bottom: 0; }

/* ============================================================ */
/* Content + SEO pass — homepage hero + section structure        */
/* ============================================================ */
/* The homepage is the single page on the site with a real hero
 * and multi-column marketing-style sections. Keep the visual
 * vocabulary aligned with the rest of the site (royal purple
 * accent, warm off-white bg) and lean on the existing chip /
 * card primitives where possible. */

.home-hero {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}
.home-hero-title {
    margin: 0 0 1rem;
    font-size: 2.4rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--accent);
}
.home-hero-lede {
    margin: 0 0 0.8rem;
    max-width: 48rem;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text);
}
.home-hero-lede-strong {
    font-weight: 600;
}
.home-hero-quiet {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.93rem;
}
.home-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}
.home-cta {
    padding: 0.7rem 1.3rem;
    font-size: 1rem;
}

.home-section {
    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid var(--border);
}
.home-section:last-child {
    border-bottom: none;
}
.home-section-title {
    margin: 0 0 1.2rem;
    font-size: 1.6rem;
    color: var(--text);
}
.home-section p {
    max-width: 56rem;
    line-height: 1.55;
}

/* ---- Three-column value grid ---- */
.home-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 1.2rem;
    margin: 0;
}
.home-value-card {
    padding: 1.2rem 1.3rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.home-value-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--accent);
}
.home-value-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
}

/* ---- Two-column narrator / author paths ---- */
.home-paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    gap: 1.5rem;
}
.home-path-card {
    padding: 1.5rem 1.6rem;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.home-path-card h2 {
    margin: 0 0 0.8rem;
    font-size: 1.4rem;
    color: var(--accent);
}
.home-path-card p {
    max-width: none;
    margin: 0 0 0.9rem;
    line-height: 1.55;
}
.home-path-card p:last-of-type { margin-bottom: 1.1rem; }
.home-path-cta {
    margin: 1.2rem 0 0;
}

/* ---- Why now + RWM + closing CTA share the same column flow ---- */
.home-why-now p,
.home-rwm p,
.home-close-cta p {
    margin-bottom: 0.85rem;
}

.home-close-cta {
    text-align: left;
}
.home-close-cta .home-cta-row {
    margin-top: 1.2rem;
}

@media (max-width: 40rem) {
    .home-hero-title {
        font-size: 1.8rem;
    }
    .home-hero-lede {
        font-size: 1.05rem;
    }
    .home-cta-row .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* ============================================================ */
/* /how-it-works — numbered step list                            */
/* ============================================================ */
.how-section {
    margin: 2rem 0;
}
.how-section + .how-section {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.how-section > h2 {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: 1.6rem;
}

/* Public guides — modelled on .how-section. Same vertical rhythm,
 * accent-coloured h2, separator between consecutive sections. Used by
 * /guides/preparing-your-listing and any future siblings. */
.guide-section {
    margin: 2rem 0;
}
.guide-section + .guide-section {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.guide-section > h2 {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: 1.6rem;
}
.guide-checklist ul {
    columns: 1;
}

/* Guides hub (/guides) — card grid with branded thumbnails. The thumbnail
 * is each guide's 1200×630 og:image card reused at grid scale, so the hub
 * and link previews share one visual identity. Whole card is the anchor. */
.guide-card-grid {
    display: grid;
    /* 16rem min (was 20rem): keeps two columns alive on tablets even with
     * enlarged text settings (rem inflation was collapsing iPads to one
     * giant column), and lets desktop breathe at three columns. */
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.guide-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.guide-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.guide-card-thumb {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--border);
}
.guide-card-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.guide-card-audience {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.guide-card-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--accent);
}
.guide-card:hover .guide-card-title { text-decoration: underline; }
.guide-card-blurb {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Deal calculator (/guides/pfh-vs-royalty-share) — theme-adaptive port of
 * Sleuthy's free calculator, restyled on the site variables (works in dark
 * mode). JS lives in scripts/deal-calculator.js (CSP: no inline). */
.calc-section {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.4rem 1.1rem;
    margin: 1.25rem 0;
    box-shadow: var(--shadow);
}
.calc-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}
.calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.calc-grid.calc-grid-2 { grid-template-columns: 1fr 1fr; max-width: 40rem; }
@media (max-width: 56rem) {
    /* Tablets: three input columns get cramped inside the 56rem container;
     * two columns keeps labels on one line. */
    .calc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .calc-grid, .calc-grid.calc-grid-2 { grid-template-columns: 1fr; }
}
.calc .form-group { position: relative; }
.calc .form-group label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.calc .form-group label .unit { font-weight: 400; color: var(--text-faint); font-size: 0.78rem; }
.calc .input-wrap { position: relative; }
.calc .input-wrap .prefix {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--text-faint);
    pointer-events: none;
}
.calc input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    color: var(--text);
    font-family: inherit;
}
.calc input.has-prefix { padding-left: 1.6rem; }
.calc input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft-bg);
}
.calc input.invalid { border-color: var(--error-border); background: var(--error-bg); }
.calc .hint { font-size: 0.74rem; color: var(--text-faint); margin-top: 0.25rem; font-style: italic; }
.calc .error-msg { font-size: 0.74rem; color: var(--error-text); margin-top: 0.25rem; display: none; }
.calc input.invalid ~ .error-msg { display: block; }
.calc input.invalid ~ .hint { display: none; }

.calc .tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--border-strong);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
}
.calc .tooltip-trigger .tooltip-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.6rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 400;
    font-style: normal;
    color: var(--text-muted);
    width: min(240px, 70vw);  /* never wider than the small-screen viewport */
    line-height: 1.45;
    box-shadow: var(--shadow);
    z-index: 10;
    text-transform: none;
    letter-spacing: normal;
}
.calc .tooltip-trigger:hover .tooltip-text,
.calc .tooltip-trigger:focus .tooltip-text { display: block; }

.calc-btn-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 1.45rem;   /* aligns the button with the adjacent input */
}
.calc-btn {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.7rem 2.5rem;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
}
.calc-btn:hover { background: var(--accent-hover); }

.calc-results { display: none; }
.calc-results.visible { display: block; }
.calc-runtime-banner {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.4rem;
    margin: 1.25rem 0;
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.calc-stat { text-align: center; }
.calc-stat-val { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.calc-stat-lbl { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

.calc-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 600px) { .calc-compare-grid { grid-template-columns: 1fr; } }
.calc-compare-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
}
.calc-card-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.8rem;
}
.calc-party {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin: 0.9rem 0 0.2rem;
}
.calc-party:first-of-type { margin-top: 0; }
.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}
.calc-row:last-child { border-bottom: none; }
.calc-row-label { font-size: 0.84rem; color: var(--text-muted); }
.calc-row-value { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.calc-row.calc-hl .calc-row-value { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.calc-row.calc-pos .calc-row-value { color: var(--success-text); }
.calc-row.calc-neg .calc-row-value { color: var(--error-text); }

.calc-verdict {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    text-align: center;
}
.calc-verdict-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.calc-verdict-text { font-size: 0.97rem; color: var(--text); line-height: 1.55; margin: 0.35rem 0; }
.calc-pos-text { color: var(--success-text); }
.calc-warn-text { color: var(--accent); }
.calc-neg-text { color: var(--error-text); }

.calc-breakeven { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.calc-breakeven-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.calc-bar-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.calc-bar-fill { height: 100%; width: 0%; border-radius: 4px; transition: width 0.6s ease-out; }
.calc-bar-green  { background: var(--success-border); }
.calc-bar-amber  { background: #d9a23c; }
.calc-bar-red    { background: var(--error-border); }
.calc-bar-accent { background: var(--accent); }

.calc-note {
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.how-steps {
    counter-reset: how-step;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.how-steps > li {
    counter-increment: how-step;
    position: relative;
    padding: 0.5rem 0 0.6rem 3rem;
    margin: 0 0 1rem;
    min-height: 2.5rem;
}
.how-steps > li::before {
    content: counter(how-step);
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
}
.how-steps > li h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: var(--text);
}
.how-steps > li p {
    margin: 0;
    line-height: 1.55;
}
.how-handoff,
.how-not {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    border-top: 1px solid var(--border);
}
.how-handoff h2,
.how-not h2 {
    margin-top: 0;
    color: var(--accent);
}
.how-not ul {
    margin: 0.7rem 0;
    padding-left: 1.3rem;
}
.how-not li {
    margin: 0.4rem 0;
    line-height: 1.5;
}

/* ============================================================ */
/* /faq — collapsible Q&A                                        */
/* ============================================================ */
.faq-section {
    margin: 2rem 0;
}
.faq-section + .faq-section {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.faq-section > h2 {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: 1.5rem;
}
.faq-item {
    margin: 0 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-alt);
    overflow: hidden;
}
.faq-item > summary {
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    user-select: none;
    position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: '+';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.faq-item[open] > summary::after {
    content: '\2212'; /* minus sign */
}
.faq-item > summary:hover {
    color: var(--accent);
}
.faq-item[open] {
    background: var(--bg);
}
.faq-item[open] > summary {
    border-bottom: 1px solid var(--border);
}
.faq-item > p,
.faq-item > ul,
.faq-item > ol {
    margin: 0;
    padding: 0.85rem 1.1rem;
    line-height: 1.55;
}
.faq-item > p + p,
.faq-item > p + ul,
.faq-item > ul + p,
.faq-item > p + ol {
    padding-top: 0;
}

/* ============================================================ */
/* Favorites — Save / Saved control                              */
/* ------------------------------------------------------------ */
/* Favorites List spec v1 (2026-05-23). The toggle appears in the */
/* narrator card actions (/narrators, /favorites) and in the      */
/* profile hero (/n.php). "Save" reads as professional            */
/* shortlisting; the icon is a bookmark, not a heart.             */
/*                                                                */
/* The bookmark glyph is a CSS mask so its colour follows the     */
/* element's background-color: a stroked outline mask in the      */
/* unsaved state, a solid mask in the saved state — giving a true */
/* outline-vs-filled distinction without two icon files.          */
/* ============================================================ */
.favorite-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
}
.favorite-toggle:hover {
    border-color: var(--text-muted);
}
.favorite-toggle:disabled {
    opacity: 0.55;
    cursor: default;
}

.favorite-toggle__icon {
    width: 0.95em;
    height: 0.95em;
    flex: none;
    display: inline-block;
    background-color: var(--text-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Saved state — brand purple fill (#5b2c91 via --accent), soft tinted
 * background, solid bookmark glyph. */
.favorite-toggle.is-saved {
    background: var(--accent-soft-bg);
    border-color: var(--accent);
    color: var(--accent);
}
.favorite-toggle.is-saved:hover {
    border-color: var(--accent-hover);
}
.favorite-toggle.is-saved .favorite-toggle__icon {
    background-color: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Profile-hero placement (/n.php) — sits below the CTA cluster. */
.np-hero-save {
    margin-top: 0.6rem;
}

/* ============================================================ */
/* Slice 9 — dual / duet / multi-cast role casting               */
/* ------------------------------------------------------------ */
/* Three surfaces: the roles repeater on the listing wizard,     */
/* the Cast & roles block on the public listing page, and the    */
/* role-grouped author review queue. All reuse existing tokens.  */
/* ============================================================ */

/* Listing wizard — roles repeater rows. Each row reads as a distinct
 * card (left accent rule, tinted background) so multiple roles don't
 * blur together; Remove is deliberately quiet next to the inputs and
 * only turns "dangerous" on hover, while Add a role sits apart below
 * the stack with primary-adjacent weight. */
.role-row {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg-alt);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.8rem;
}
.role-row .field { margin-bottom: 0.6rem; }
.role-row .role-remove {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}
.role-row .role-remove:hover {
    border-color: var(--error-border);
    color: var(--error-text);
    background: transparent;
}
#role-add {
    margin-top: 0.4rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
}
#role-add:hover {
    background: var(--accent-soft-bg);
}

/* Public listing page — role-specific audition passage headings. */
.lp-script-role-name {
    margin: 1.4rem 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
}
.lp-script-role-name:first-of-type { margin-top: 0.8rem; }

/* Public listing page — Cast & roles definition list. */
.lp-roles-list {
    margin: 0.8rem 0 0;
}
.lp-roles-list dt {
    font-weight: 600;
    color: var(--text);
    margin-top: 0.9rem;
}
.lp-roles-list dt:first-of-type { margin-top: 0; }
.lp-roles-list dd {
    margin: 0.15rem 0 0 0;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Author review queue — per-role sections. */
.audition-role-group {
    margin: 1.75rem 0 0;
}
.audition-role-group-head {
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 0.9rem;
}
.audition-role-group-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.audition-role-group-desc {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
}
.audition-role-group-empty {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * Saved-search alerts (Slice 10)
 * ------------------------------------------------------------------------- */

/* "Save this search" control on the listings browse page. */
.saved-search-cta {
    margin: 1.25rem 0 0.5rem;
}
.saved-search-cta-hint {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.saved-search-cta-status {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.8rem;
    background: var(--accent-soft-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.92rem;
}
.saved-search-cta-prompt {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.92rem;
}
.js-save-search.is-saved {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

/* Manage page: one card per saved search. */
.saved-search-list {
    margin-top: 1rem;
}
.saved-search-row {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-alt);
    box-shadow: var(--shadow);
}
.saved-search-row.is-paused {
    opacity: 0.72;
}
.saved-search-row-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.saved-search-row-title {
    font-weight: 600;
    font-size: 1.05rem;
}
.saved-search-chip-on {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
}
.saved-search-chip-off {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}
.saved-search-row-criteria {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.9rem;
}
.saved-search-row-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem;
}
.saved-search-row-form .field {
    margin: 0;
}
.saved-search-row-secondary {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.saved-search-delete {
    color: var(--error-text);
    border-color: var(--error-border);
}

/* ---------------------------------------------------------------------------
   Shared audition reviews (Slice 11, 2026-06-19)
   --------------------------------------------------------------------------- */
.audition-share-panel {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.audition-share-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.audition-share-panel-head h2 {
    margin: 0;
    font-size: 1.1rem;
}
.audition-share-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.audition-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.65rem 0;
    border-top: 1px solid var(--border);
}
.share-link-field {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
}
.btn-small {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

/* Read-only reviewer view: simpler card, no actions. */
.audition-card-shared .audition-card-title {
    margin: 0;
}
.audition-card-shared audio {
    width: 100%;
    margin-top: 0.6rem;
}
.page-shared-review .audition-card-grid {
    margin-top: 1.25rem;
}

/* Unlisted-listing badge (Slice 12, 2026-06-19) */
.lp-chip-unlisted {
    background: var(--accent-soft-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 600;
}