/* ───────────────────────────────────────────────────────────────────────────
   NewsMaker — modern editorial newsroom theme
   Typography: Fraunces (display) · IBM Plex Sans (UI) · IBM Plex Mono (meta)
   Palette anchored on the DC brand gradient: deep midnight-violet → bright
   electric purple. The header carries the gradient on a dark surface; the
   workspace stays light & editorial for long-form readability.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Surfaces */
    --bg:            #F7F4FB;   /* whisper paper, faintly violet-tinted */
    --bg-grain:      rgba(40, 25, 80, 0.028);
    --surface:       #FFFFFF;
    --surface-soft:  #F0EAF8;
    --surface-sunk:  #E6DDF2;

    /* Dark surfaces (header, hero panels) — drawn from the logo gradient */
    --surface-dark:    #150B2C;   /* deepest, top-left of gradient */
    --surface-dark-2:  #2A1556;   /* mid */
    --surface-dark-3:  #4527A0;   /* shoulder before the bright violet */
    --gradient-brand:  linear-gradient(180deg, #150B2C 0%, #2A1556 38%, #4527A0 70%, #7C4DFF 100%);
    --gradient-brand-soft: linear-gradient(180deg, rgba(21, 11, 44, 0.96) 0%, rgba(42, 21, 86, 0.94) 38%, rgba(69, 39, 160, 0.92) 70%, rgba(124, 77, 255, 0.92) 100%);

    /* Ink */
    --ink:           #1A1129;
    --ink-strong:    #0E0820;
    --ink-soft:      #463B5E;
    --ink-muted:     #7B6F92;
    --ink-faint:     #B5A8C9;

    /* Rules */
    --rule:          #E6DEF1;
    --rule-strong:   #D2C7E5;

    /* Accents — pulled from the bright end of the logo gradient. The bright
       violet (`--accent`) is reserved for brand moments where vibrancy is the
       point (logo glow, active rail, focus halo). Buttons, links, and any
       text on white use the deeper indigo derivatives so they pass WCAG AA
       contrast without losing the family feel. */
    --accent:        #7C4DFF;   /* electric violet — focus glow, accent rail */
    --accent-deep:   #5B33D6;   /* button bg, brand "Maker" text, list rail */
    --accent-ink:    #3D1F94;   /* darkest accent text */
    --accent-soft:   #E5DAFC;   /* pale violet fill — selected card bg */
    --accent-tint:   #F2EBFE;   /* paler violet — audio container, glow */

    /* Audio amber (warm complement to the cool violet, used sparingly for
       the "has audio" indicator) */
    --audio:         #D08A1E;
    --audio-soft:    #FBEEDA;

    /* Status */
    --danger:        #B5384B;
    --danger-soft:   #FAE5E8;

    /* Type
       --font-display: editorial display, used ONLY for article titles
       --font-body:    long-form sans, used ONLY for article body
       --font-ui:      modern dashboard sans, used everywhere else
       --font-mono:    metadata, source codes, timestamps */
    --font-display:  'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
    --font-body:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-ui:       'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:     'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;

    /* Radius */
    --r-1: 3px;
    --r-2: 6px;
    --r-3: 10px;
    --r-4: 14px;

    /* Elevation — restrained, paper-like, with a faint violet undertone */
    --shadow-1: 0 1px 0 rgba(30, 18, 60, 0.04), 0 1px 2px rgba(30, 18, 60, 0.05);
    --shadow-2: 0 1px 0 rgba(30, 18, 60, 0.05), 0 4px 14px -6px rgba(30, 18, 60, 0.12);
    --shadow-3: 0 6px 28px -8px rgba(30, 18, 60, 0.22);
    --shadow-glow: 0 8px 28px -10px rgba(124, 77, 255, 0.45);

    /* Layout */
    --header-h: 64px;
    --footer-h: 36px;
    --list-w:   380px;

    /* Motion */
    --t-fast: 120ms cubic-bezier(.2, .7, .3, 1);
    --t-base: 180ms cubic-bezier(.2, .7, .3, 1);
    --t-slow: 320ms cubic-bezier(.2, .7, .3, 1);
}

/* ─── reset / base ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body {
    height: 100vh;
    overflow: hidden;          /* lock the page; only inner panels scroll */
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    /* Subtle paper texture — diagonal grain */
    background-image:
        radial-gradient(var(--bg-grain) 1px, transparent 1px),
        radial-gradient(var(--bg-grain) 1px, transparent 1px);
    background-size: 6px 6px, 6px 6px;
    background-position: 0 0, 3px 3px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'cv11';
}

/* ─── thin, hover-revealed scrollbars ───────────────────────────────────
   Firefox uses `scrollbar-width`/`scrollbar-color`; Chromium/WebKit use
   pseudo-elements. Track stays invisible. Thumb is transparent until the
   container is hovered/focused or the user is interacting with the bar. */

.scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color var(--t-base);
}
.scroll:hover,
.scroll:focus-within { scrollbar-color: var(--ink-faint) transparent; }

.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--t-base);
}
.scroll:hover::-webkit-scrollbar-thumb,
.scroll:focus-within::-webkit-scrollbar-thumb,
.scroll:active::-webkit-scrollbar-thumb {
    background: var(--ink-faint);
    background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ink-soft);
    background-clip: padding-box;
}
.scroll::-webkit-scrollbar-corner { background: transparent; }

button { font-family: inherit; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

kbd {
    font-family: var(--font-mono);
    font-size: 0.78em;
    padding: 1px 5px;
    border: 1px solid var(--rule-strong);
    border-bottom-width: 2px;
    border-radius: var(--r-1);
    background: var(--surface);
    color: var(--ink-soft);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

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

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: var(--s-3);
    background: var(--ink-strong);
    color: var(--bg);
    padding: 6px 10px;
    border-radius: var(--r-2);
    z-index: 100;
    transition: top var(--t-base);
}
.skip-link:focus { top: var(--s-3); text-decoration: none; }

/* ─── header ─────────────────────────────────────────────────────────────── */

.app-header {
    flex: 0 0 auto;
    z-index: 30;
    height: var(--header-h);
    color: #F2EBFE;
    background: var(--surface-dark);
    /* Header runs the brand gradient horizontally (deep left → bright right)
       so the wide thin band reads as a single sweep across the page. */
    background-image: linear-gradient(90deg, #150B2C 0%, #2A1556 38%, #4527A0 70%, #7C4DFF 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 6px 18px -10px rgba(124, 77, 255, 0.35);
    position: relative;
    overflow: hidden;
}
/* A soft violet bloom in the upper-right corner adds depth to the gradient. */
.app-header::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at center, rgba(180, 140, 255, 0.28) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(2px);
}
.app-header__inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--s-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: #FFFFFF;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__logo {
    display: block;
    height: 36px;
    width: auto;          /* preserve PNG aspect ratio */
    object-fit: contain;
    /* Lime tapt mark on the violet gradient — complementary contrast pop. */
}
.brand__product {
    display: inline-flex;
    align-items: baseline;
    padding-left: var(--s-3);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.025em;
    line-height: 1;
}
.brand__product-news  { color: #FFFFFF; }
.brand__product-maker {
    background: linear-gradient(135deg, #C9B5FF 0%, #FFFFFF 60%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.app-header__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(229, 218, 252, 0.78);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.app-header__line { font-weight: 500; }
.app-header__sep  { color: rgba(229, 218, 252, 0.4); }
.app-header__user {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
    text-transform: none;
    letter-spacing: 0;
}
.app-header__logout-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.app-header__logout {
    background: none;
    border: none;
    padding: 0 0 1px 0;
    font: inherit;
    color: rgba(229, 218, 252, 0.78);
    text-decoration: none;
    border-bottom: 1px dashed rgba(229, 218, 252, 0.4);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.app-header__logout:hover {
    color: #FFFFFF;
    border-bottom-color: var(--accent);
    text-decoration: none;
}
.app-header__logout:focus-visible {
    outline: none;
    color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.35);
    border-radius: 2px;
}

/* ─── workspace ──────────────────────────────────────────────────────────── */

#main {
    flex: 1 1 auto;
    min-height: 0;             /* allow children to shrink below content size */
    display: flex;
    flex-direction: column;
}

.workspace {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--s-6) var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

/* ─── finder (search bar) ───────────────────────────────────────────────── */

.finder {
    flex: 0 0 auto;            /* never shrink — keep search bar fully visible */
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    position: relative;
}
.finder::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #150B2C 0%, #4527A0 35%, #7C4DFF 70%, transparent 100%);
    opacity: 0.85;
}
.finder__inner {
    display: grid;
    grid-template-columns: auto minmax(220px, 2.2fr) repeat(3, minmax(140px, 1fr)) auto;
    align-items: end;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
}
.finder__label {
    grid-column: 1;
    align-self: end;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-strong);
    letter-spacing: -0.01em;
    padding-right: var(--s-4);
    border-right: 1px solid var(--rule);
}
.finder__label svg { color: var(--accent-deep); }

.finder__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.finder__cap {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

.finder__input,
.finder__select {
    width: 100%;
    padding: 9px 11px;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    appearance: none;
    -webkit-appearance: none;
}
.finder__input::placeholder { color: var(--ink-faint); }
.finder__input:hover,
.finder__select:hover { border-color: var(--ink-faint); }
.finder__input:focus,
.finder__select:focus {
    outline: none;
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--surface);
}
.finder__select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
        linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) calc(50% - 2px),
        calc(100% - 9px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

.finder__actions {
    display: inline-flex;
    gap: var(--s-2);
    align-self: end;
}

.btn {
    padding: 9px 18px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    border-radius: var(--r-2);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent-deep);
}
.btn--primary {
    background: var(--accent-deep);
    color: #FFFFFF;
    border-color: var(--accent-deep);
    box-shadow: var(--shadow-1);
}
.btn--primary:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
}
.btn--primary:active { transform: translateY(1px); }
.btn--ghost {
    background: var(--surface);
    color: var(--ink-soft);
    border-color: var(--rule-strong);
}
.btn--ghost:hover {
    color: var(--ink);
    border-color: var(--ink-faint);
    background: var(--surface-soft);
}

/* ─── board (two-column list + detail) ─────────────────────────────────── */

.board {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--list-w) 1fr;
    gap: var(--s-5);
    align-items: stretch;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.panel__head {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
}
.panel__title {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-strong);
    letter-spacing: -0.005em;
}
.panel__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

/* ─── new-articles banner ───────────────────────────────────────────────── */

.newbar {
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--rule);
    background: var(--accent-tint);
    animation: newbar-in 240ms cubic-bezier(.2, .7, .3, 1);
}
@keyframes newbar-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.newbar__btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 8px 12px;
    background: var(--accent-deep);
    color: #FFFFFF;
    border: none;
    border-radius: var(--r-2);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-1);
    transition: background var(--t-fast);
}
.newbar__btn:hover { background: var(--accent-ink); }
.newbar__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.32);
}
.newbar__chevron {
    font-size: 16px;
    line-height: 1;
    animation: chev-bob 1.6s ease-in-out infinite;
}
@keyframes chev-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2px); }
}
.newbar__count {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 12px;
}

/* ─── article list ───────────────────────────────────────────────────────── */

.list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}
.list.scroll { /* applies thin/auto-hide scrollbar styles */ }
.list:focus { outline: none; }
.list:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: -2px;
}

.list__placeholder {
    padding: var(--s-7) var(--s-5);
    text-align: center;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
}
.list__placeholder-pulse {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--accent-deep);
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1); }
}

.list-item {
    position: relative;
    display: grid;
    grid-template-columns: 4px 1fr;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: background var(--t-fast);
}
.list-item:hover { background: var(--surface-soft); }
.list-item:focus { outline: none; }
.list-item__rail {
    width: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background var(--t-fast);
}
.list-item:hover .list-item__rail { background: var(--ink-faint); }
.list-item__main { min-width: 0; }
.list-item__title {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--accent-deep);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}
.list-item__cat {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-item__cat-code {
    font-family: var(--font-mono);
    color: var(--ink-strong);
    font-weight: 600;
    margin-right: 2px;
}
.list-item__source {
    color: var(--ink-muted);
}
.list-item__meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}
.list-item__time {
    color: var(--ink-strong);
    font-weight: 500;
}
.list-item__date { color: var(--ink-muted); }
.list-item__audio {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--audio);
    padding: 2px 7px;
    background: var(--audio-soft);
    border-radius: 999px;
    font-weight: 600;
}
.list-item__audio::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 999px;
    background: var(--audio);
}

.list-item.is-selected {
    background: var(--accent-tint);
}
.list-item.is-selected .list-item__rail {
    background: var(--accent-deep);
}
.list-item.is-selected .list-item__title { color: var(--accent-ink); font-weight: 600; }
.list-item.is-active:not(.is-selected) {
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.list__empty {
    padding: var(--s-7) var(--s-5);
    text-align: center;
    color: var(--ink-muted);
}
.list__empty-mark {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
    margin-bottom: var(--s-2);
}

/* ─── detail panel ───────────────────────────────────────────────────────── */

.detail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-7) var(--s-7) var(--s-8);
    display: flex;
    flex-direction: column;
}
.detail__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink-muted);
    gap: var(--s-3);
}
.detail__empty-mark {
    color: var(--ink-faint);
    margin-bottom: var(--s-3);
}
.detail__empty-line {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink-soft);
    max-width: 42ch;
    line-height: 1.5;
    letter-spacing: -0.005em;
}
.detail__empty-hint {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
}
.detail__empty-hint kbd { margin: 0 2px; }

.detail__loaded {
    max-width: 72ch;
    width: 100%;
    margin: 0 auto;
    animation: fade-in 220ms ease-out;
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.detail__head {
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-5);
}
.detail__title {
    margin: 0 0 var(--s-3);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink-strong);
    letter-spacing: -0.015em;
    white-space: pre-wrap;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}
.detail__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
}
.detail__byline-key { color: var(--ink-faint); }
.detail__byline-val { color: var(--ink-strong); font-weight: 600; }
.detail__byline-sep {
    width: 3px; height: 3px;
    border-radius: 999px;
    background: var(--ink-faint);
}
.detail__byline-cat {
    color: var(--accent-deep);
}

.detail__body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    font-feature-settings: 'ss01';
}

.detail__byline-audio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--accent-tint);
    color: var(--accent-ink);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.detail__byline-audio::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 999px;
    background: var(--accent-deep);
}

/* ─── inline audio clip ──────────────────────────────────────────────────
   Rendered inline within the body wherever a <!--Audio:NAME--> marker
   appears. Multiple clips per article are common (one per "Source:" block).
   Disrupts the text flow just enough to be unmissable, but doesn't shout. */

.audio-clip {
    display: block;
    margin: var(--s-4) 0;
    padding: var(--s-3) var(--s-4);
    background: var(--accent-tint);
    border: 1px solid var(--accent);
    border-left-width: 3px;
    border-radius: var(--r-2);
    box-shadow: var(--shadow-1);
    white-space: normal;
}
.audio-clip--fallback {
    margin-top: var(--s-7);
}

.audio-clip__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    min-width: 0;
}
.audio-clip__dot {
    flex: 0 0 auto;
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--accent-deep);
    box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.22);
}
.audio-clip__label {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-ink);
}
.audio-clip__name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audio-clip__dl {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--accent-ink);
    background: var(--surface);
    border: 1px solid var(--accent);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.audio-clip__dl:hover {
    background: var(--accent-deep);
    color: #FFFFFF;
    border-color: var(--accent-deep);
    text-decoration: none;
}
.audio-clip__dl:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.32);
}

.audio-clip audio {
    width: 100%;
    height: 36px;
    display: block;
}

.detail__error {
    padding: var(--s-5);
    border: 1px solid var(--danger);
    background: var(--danger-soft);
    border-radius: var(--r-2);
    color: var(--danger);
    font-size: 13px;
}

/* ─── footer ─────────────────────────────────────────────────────────────── */

.app-footer {
    flex: 0 0 auto;
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s-6);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}

/* ─── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .finder__inner {
        grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) auto;
    }
    .finder__label {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--rule);
        padding: 0 0 var(--s-3) 0;
        margin-bottom: var(--s-2);
    }
}

@media (max-width: 980px) {
    /* Below tablet width, stacked panels need the page itself to scroll. */
    html, body { height: auto; overflow: auto; }
    body { display: block; }
    #main { display: block; min-height: calc(100vh - var(--header-h) - var(--footer-h)); }
    .app-header { position: sticky; top: 0; }

    .workspace { display: block; padding: var(--s-5); }
    .finder { margin-bottom: var(--s-5); }

    .board {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .panel { height: auto; }
    .panel--list { min-height: 360px; }
    .panel--list .list { max-height: 50vh; }
    .panel--detail { min-height: 480px; }
    .detail { overflow: visible; padding: var(--s-5) var(--s-5) var(--s-7); }
}

@media (max-width: 720px) {
    .workspace { padding: var(--s-4); }
    .finder__inner {
        grid-template-columns: 1fr 1fr;
        padding: var(--s-4);
        gap: var(--s-3);
    }
    .finder__field--query { grid-column: 1 / -1; }
    .finder__actions { grid-column: 1 / -1; justify-content: flex-end; }
    .app-header__inner { padding: 0 var(--s-4); gap: var(--s-3); }
    .app-header__line { display: none; }
    .brand__wordmark { font-size: 18px; }
    .detail__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── print ──────────────────────────────────────────────────────────────
   When the user prints, hand them just the script: title, byline, body.
   Strip the chrome (header, finder, article list, footer, panel headers,
   audio players) so the page flows cleanly across A4. */

@media print {
    @page { margin: 18mm 16mm; }

    html, body {
        height: auto;
        overflow: visible;
        background: #ffffff;
        color: #000000;
    }
    body {
        display: block;
        font-size: 12pt;
        line-height: 1.5;
    }

    .app-header,
    .app-footer,
    .finder,
    .panel--list,
    .panel__head,
    .audio-clip,
    .skip-link,
    .newbar,
    .detail__empty,
    .detail__byline-audio { display: none !important; }

    #main, .workspace { display: block; padding: 0; margin: 0; }
    .board { display: block; }
    .panel,
    .panel--detail {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        height: auto;
    }
    .detail {
        overflow: visible;
        padding: 0;
        display: block;
    }
    .detail__loaded {
        max-width: none;
        margin: 0;
        animation: none;
    }
    .detail__head {
        border-bottom: 1px solid #000;
        padding-bottom: 6mm;
        margin-bottom: 6mm;
    }
    .detail__title {
        color: #000;
        font-size: 18pt;
    }
    .detail__byline {
        color: #333;
    }
    .detail__byline-val,
    .detail__byline-cat,
    .detail__byline-key { color: #333; }
    .detail__body {
        color: #000;
        font-size: 12pt;
        line-height: 1.55;
    }
    /* If the empty state is showing, suppress everything. */
    .detail__empty ~ * { display: none !important; }
}