/* ── Search bar ──────────────────────────────────────────────────── */
.search-bar-wrap {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 1.25rem 0 1.1rem;
    margin-bottom: 0;
}

.search-input-group {
    max-width: 100%;
}

/* ── Filter bar ──────────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 2rem;
    padding: 0.85rem 0;
    border-bottom: 3px double var(--rule-dark);
    margin-bottom: 2rem;
    /* No z-index here on purpose: it would create a stacking context that caps the dropdown panels
       (z-index 200) below the sticky masthead (z-index 100). The panels carry their own z-index and
       render correctly in the root context — above both the masthead and the results below. */
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.filter-label {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.2;
}

/* Readable labels for form fields (login etc.) — body font, normal case. */
.auth-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.2rem;
}

.filter-select {
    font-size: 0.8rem;
    /* Extra right padding leaves room for the .form-select caret. */
    padding: 0.25rem 1.7rem 0.25rem 0.6rem;
    height: auto;
    border-color: var(--rule-dark);
    background-color: var(--paper);
    color: var(--ink);
    min-width: 8rem;
    border-radius: 0;
    background-position: right 0.5rem center;
}

.filter-select:focus {
    box-shadow: none;
    border-color: var(--ink);
}

/* Date-range picker (von/bis) — matches the print aesthetic of .filter-select. */
.filter-date {
    font-size: 0.8rem;
    padding: 0.22rem 0.5rem;
    height: auto;
    border-color: var(--rule-dark);
    background-color: var(--paper);
    color: var(--ink);
    border-radius: 0;
}

.filter-date:focus {
    box-shadow: none;
    border-color: var(--ink);
}

.filter-count {
    opacity: 0.55;
    font-size: 0.65rem;
    margin-left: 0.2rem;
}

.filter-count:empty,
.filter-count[data-zero="true"] {
    display: none;
}

/* ── Newspaper multi-select dropdown ─────────────────────────────── */
/* <details>/<summary> based dropdown — hide the native disclosure marker */
.filter-dropdown {
    position: relative;
}

.filter-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 9rem;
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--rule-dark);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-body);
    text-align: left;
    list-style: none;
}

.filter-dropdown-toggle::-webkit-details-marker { display: none; }
.filter-dropdown-toggle::marker { content: ''; }

.filter-dropdown[open] .filter-dropdown-arrow {
    transform: rotate(180deg);
}

.filter-dropdown-toggle:hover {
    border-color: var(--ink);
}

.filter-dropdown-arrow {
    opacity: 0.5;
    font-size: 0.7rem;
}

.filter-dropdown-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 14rem;
    background: var(--paper);
    border: 1px solid var(--rule-dark);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
    padding: 0.35rem 0;
}

.filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--ink);
    user-select: none;
}

.filter-dropdown-item:hover {
    background: rgba(200, 184, 154, 0.25);
}

a.filter-dropdown-item {
    text-decoration: none;
}

.filter-dropdown-item.active {
    background: rgba(200, 184, 154, 0.35);
    font-weight: 600;
}

.filter-dropdown-item input[type="checkbox"] {
    accent-color: var(--accent);
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    cursor: pointer;
}

.filter-dropdown-name {
    flex: 1;
}

.filter-dropdown-apply {
    display: block;
    width: calc(100% - 1.5rem);
    margin: 0.45rem 0.75rem 0.2rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border-radius: 0;
    font-family: var(--font-body);
}

.filter-dropdown-apply:hover { background: var(--accent); border-color: var(--accent); }

.filter-dropdown-clear {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.35rem 0.75rem;
    border: none;
    border-top: 1px solid var(--rule);
    background: transparent;
    font-size: 0.75rem;
    color: var(--ink-soft);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: none;
}

.filter-dropdown-clear:hover {
    background: rgba(200, 184, 154, 0.2);
    color: var(--accent);
    text-decoration: none;
}

/* ── Search tips (collapsed by default to keep the search bar quiet) ─ */
.search-tips {
    margin: 0.45rem 0 0;
}

.search-tips-summary {
    display: inline-block;
    cursor: pointer;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--ink-soft);
    user-select: none;
    list-style: none;
}

.search-tips-summary::-webkit-details-marker { display: none; }

.search-tips-summary::before {
    content: "▸ ";
    font-style: normal;
}

.search-tips[open] .search-tips-summary::before {
    content: "▾ ";
}

.search-tips-summary:hover {
    color: var(--accent);
}

.search-hint {
    margin: 0.35rem 0 0;
    max-width: 100%;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* ── Section heading ─────────────────────────────────────────────── */
.section-heading {
    font-family: var(--font-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--rule-dark);
}

/* ── Newspaper tiles (landing) ───────────────────────────────────── */
.newspaper-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.newspaper-tile {
    position: relative; /* anchors the F-16 "new" badge */
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1rem 0.9rem;
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--rule-dark);
    color: var(--ink);
    text-decoration: none;
    transition: border-top-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.tile-thumb {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: top center;
    background: #fff;
    border: 1px solid var(--rule);
    margin-bottom: 0.35rem;
}

.newspaper-tile:hover {
    border-top-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--ink);
}

/* F-16: "new since last login" badge, pinned to the tile's top rule like a kicker label. */
.tile-badge-new {
    position: absolute;
    top: -3px;
    right: 0.6rem;
    padding: 0.15rem 0.5rem 0.1rem;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tile-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--accent);
}

.tile-date {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--ink);
}

.tile-meta {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.empty-hint {
    font-style: italic;
    color: var(--ink-soft);
}

/* ── Results meta line ───────────────────────────────────────────── */
.results-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.results-filter-tag {
    background: var(--rule);
    color: var(--ink);
    padding: 0.1rem 0.45rem;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Edition result cards (grouped per edition: thumbnail + per-page hits) ─── */
.edition-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--rule);
}

.edition-card:last-child { border-bottom: 1px solid var(--rule); }

.edition-thumb { flex: 0 0 120px; display: block; align-self: flex-start; }

.edition-thumb img {
    width: 120px;
    height: 168px;
    object-fit: cover;
    object-position: top center;
    background: #fff;
    border: 1px solid var(--rule-dark);
}

.edition-body { flex: 1 1 auto; min-width: 0; }

.edition-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.edition-hitcount {
    margin-left: auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.edition-hits { list-style: none; margin: 0; padding: 0; }
.edition-hit { border-top: 1px dotted var(--rule); }
.edition-hit:first-child { border-top: none; }

.edition-hit a {
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    color: var(--ink);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: border-left-color 0.12s, background 0.12s;
}

.edition-hit a:hover {
    border-left-color: var(--accent);
    background: rgba(200, 184, 154, 0.13);
    text-decoration: none;
}

.hit-page {
    flex: 0 0 4.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    white-space: nowrap;
    padding-top: 0.15rem;
}

.hit-fragments { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; line-height: 1.55; }
.hit-fragment { display: block; }
.hit-fragment + .hit-fragment { margin-top: 0.15rem; color: var(--ink-soft); }

/* ── Result meta (shared by the edition cards' header row) ────────── */
.result-newspaper {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

.result-dot {
    color: var(--rule-dark);
    font-size: 0.75rem;
}

.result-date {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ink-soft);
}

/* ── Highlighted terms ───────────────────────────────────────────── */
mark {
    background-color: #f5d87a;
    color: var(--ink);
    padding: 0 0.12em;
    font-weight: 600;
    border-radius: 0;
}

/* ── Neutral notice (e.g. "page not found" in the viewer) ────────── */
.notice {
    border-left: 3px solid var(--rule-dark);
    background: var(--rule);
    color: var(--ink);
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

/* ── Error ───────────────────────────────────────────────────────── */
.result-error {
    border-left: 3px solid var(--accent);
    background: #fdf0f0;
    color: var(--ink);
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

/* ── Inline SVG icons ────────────────────────────────────────────── */
/* Icons inherit the control's colour (currentColor) and size (1em). The small negative
   vertical-align centres them against adjacent label text. */
.icon { vertical-align: -0.125em; }
/* Icon + label buttons get a small gap; icon-only buttons are unaffected. */
.btn .icon, .reader-download .icon { margin-right: 0.4em; }

/* ── Pagination ──────────────────────────────────────────────────── */
.newspaper-pagination {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 2rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.25rem;
}

.newspaper-pagination .page-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 0.3rem 0.65rem;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
}

.newspaper-pagination .page-link:hover {
    background: var(--rule);
    color: var(--ink);
    text-decoration: none;
}

.newspaper-pagination .page-item.active .page-link {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* ── Reader toolbar (page nav, zoom, in-document search, download) ─── */
.reader-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1rem;
    font-size: 0.8rem;
}

.reader-group { display: flex; align-items: center; gap: 0.3rem; }

.reader-btn {
    border: 1px solid var(--rule-dark);
    background: var(--paper);
    color: var(--ink);
    border-radius: 0;
    padding: 0.15rem 0.55rem;
    line-height: 1.4;
    cursor: pointer;
    font-family: var(--font-body);
}

.reader-btn:hover:not(:disabled) { background: var(--rule); }
.reader-btn:disabled { opacity: 0.4; cursor: default; }

.reader-pageinfo { display: flex; align-items: center; gap: 0.25rem; color: var(--ink-soft); }

#pdf-page-input {
    width: 3.2rem;
    text-align: center;
    padding: 0.1rem 0.2rem;
    border: 1px solid var(--rule-dark);
    border-radius: 0;
    font-family: var(--font-body);
}

.reader-zoom-label { min-width: 3rem; text-align: center; color: var(--ink-soft); }

.reader-find { flex: 1 1 14rem; }
.reader-find-input { flex: 1 1 auto; min-width: 8rem; font-size: 0.8rem; padding: 0.15rem 0.5rem; }
.reader-find-status {
    min-width: 2.5rem;
    text-align: center;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.reader-download { margin-left: auto; font-size: 0.78rem; white-space: nowrap; }

/* Fullscreen toggle is mobile-only (desktop has the window already). */
.reader-fullscreen-btn { display: none; }
@media (max-width: 640px) {
    .reader-fullscreen-btn { display: inline-flex; align-items: center; }
}

/* Floating exit button, shown only while the PDF is in fullscreen. */
.pdf-fs-exit { display: none; }
body.is-pdf-fullscreen .pdf-fs-exit {
    display: inline-flex;
    align-items: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
    right: calc(env(safe-area-inset-right, 0px) + 0.6rem);
    z-index: 1001;
    border: 1px solid var(--rule-dark);
    background: rgba(244, 241, 232, 0.92);
    color: var(--ink);
    border-radius: 0;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}

/* Fullscreen stage: the stage becomes a full-viewport scroll surface and the page-sized container
   is centered inside it (flex + margin:auto — the auto margins collapse to 0 once the page is
   zoomed larger than the screen, so panning still reaches every corner). Works without the native
   Fullscreen API too (iOS Safari), since it is pure fixed positioning. */
body.is-pdf-fullscreen { overflow: hidden; }
body.is-pdf-fullscreen .site-top,
body.is-pdf-fullscreen .viewer-nav,
body.is-pdf-fullscreen .reader-toolbar { display: none; }
body.is-pdf-fullscreen .newspaper-main { max-width: none; margin: 0; padding: 0; }
body.is-pdf-fullscreen .pdf-stage {
    position: fixed;
    inset: 0;
    z-index: 1000;
    max-width: none;
    overflow: auto;
    background: #111;
    display: flex;
}
body.is-pdf-fullscreen .pdf-viewer-container {
    margin: auto;
    flex: none;
    border: none;
    box-shadow: none;
}

/* ── PDF viewer ──────────────────────────────────────────────────── */
/* Loading state: a centred spinner shown until the first page has rendered. */
.pdf-loading { text-align: center; padding: 3rem 0; }
.newspaper-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--rule);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Stage: a horizontal-overflow container so a zoomed page scrolls inside the content column instead
   of widening the page and breaking the surrounding layout. In fullscreen the container is fixed and
   escapes the stage, so this only governs the normal (in-page) view. */
.pdf-stage { max-width: 100%; overflow-x: auto; }

/* Container size (width/height) and --scale-factor are set by pdfViewer.js.
   All three layers are absolutely positioned at 0,0 with identical dimensions
   so the canvas, text layer and highlights stay pixel-aligned. */
.pdf-viewer-container {
    position: relative;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    border: 1px solid var(--rule-dark);
    /* Allow one-finger panning/scrolling but let the viewer own two-finger pinch-zoom (pdfViewer.js),
       so pinch works inside native fullscreen too and re-renders sharp; this also disables the
       browser's double-tap-to-zoom, freeing double-tap for the fullscreen toggle. */
    touch-action: pan-x pan-y;
}

/* The top download link only appears on mobile (see the reader-toolbar hiding below). */
.viewer-download-mobile { display: none; }

#pdf-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* PDF.js text layer — transparent, selectable glyphs over the raster (copy-paste). */
.textLayer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: clip;
    opacity: 1;
    line-height: 1;
    text-align: initial;
    forced-color-adjust: none;
    transform-origin: 0 0;
}

.textLayer span,
.textLayer br {
    position: absolute;
    color: transparent;
    white-space: pre;
    cursor: text;
    transform-origin: 0 0;
}

.textLayer span.markedContent {
    top: 0;
    height: 0;
}

.textLayer ::selection {
    background: rgba(40, 100, 255, 0.30);
}

.pdf-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
}

.pdf-highlight {
    position: absolute;
    background-color: rgba(245, 216, 122, 0.40);
    border: 1px solid rgba(200, 150, 0, 0.55);
    mix-blend-mode: multiply;
}

/* ── Viewer nav ──────────────────────────────────────────────────── */
.viewer-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.viewer-meta strong {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--accent);
}

/* ── Utility bar (auth + language) & login ───────────────────────── */
.utility-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0.35rem clamp(1rem, 3vw, 3rem) 0;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.04em;
}

.lang-link {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.05rem 0.3rem;
    border-bottom: 1px solid transparent;
}

.lang-link:hover { color: var(--ink); }

.lang-link.is-active {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.auth-card {
    max-width: 380px;
    margin: 1rem auto;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.auth-form .form-control { margin-bottom: 0.4rem; }

.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0.2rem 0 0.6rem;
}

.auth-form .btn-primary { align-self: flex-start; }

.auth-divider {
    text-align: center;
    font-style: italic;
    color: var(--ink-soft);
    margin: 1rem 0;
}

.auth-sso { width: 100%; }

/* ── Responsive / mobile ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .search-bar-wrap { padding: 1rem 0 0.9rem; }
    .search-input-group { max-width: 100%; }

    /* Filters: each control takes a flexible full-width-ish slot and wraps */
    .filter-bar { gap: 0.7rem 1rem; }
    .filter-group { flex: 1 1 9rem; }
    .filter-select,
    .filter-date,
    .filter-dropdown-toggle { min-width: 0; width: 100%; }
    .filter-dropdown-panel { max-width: 90vw; }

    .results-meta { flex-wrap: wrap; }

    .newspaper-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
    .tile-thumb { height: 150px; }

    /* Edition cards: thumbnail on top, hit rows stack */
    .edition-card { flex-direction: column; gap: 0.6rem; }
    .edition-thumb { flex-basis: auto; }
    .edition-thumb img { width: 110px; height: 154px; }
    .edition-hit a { flex-direction: column; gap: 0.1rem; }
    .hit-page { flex-basis: auto; }

    .newspaper-pagination { flex-wrap: wrap; }

    /* Viewer nav wraps instead of overflowing */
    .viewer-nav { flex-wrap: wrap; gap: 0.5rem; }

    /* PDF reader on phones: hide the button toolbar entirely — gestures replace it (swipe = page
       turn, double-tap = fullscreen, pinch = zoom). Only the download action stays, moved up into
       the nav next to the date. */
    .reader-toolbar { display: none; }
    .viewer-download-mobile { display: inline-flex; align-items: center; margin-left: auto; }
}

@media (max-width: 400px) {
    .newspaper-tiles { grid-template-columns: 1fr 1fr; }
}

/* ── Admin backend (F-08) ────────────────────────────────────────── */
.admin-shell { width: 100%; max-width: 1500px; margin: 1.5rem auto; padding: 0 clamp(1rem, 3vw, 3rem); }
.admin-title { font-family: var(--font-head); font-size: 1.8rem; margin: 0.5rem 0 1rem; }
.admin-h2 { font-size: 1.1rem; margin: 0 0 0.6rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.2rem; }
.admin-h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }

/* Sub-navigation as connected tabs (shared by Admin + Settings): each tab is a square, print-style
   box; the active one merges with the rule below it so it reads as joined to the content panel. */
.admin-nav {
    display: flex;
    gap: 0.25rem;
    align-items: flex-end;
    border-bottom: 1px solid var(--rule-dark);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.admin-nav-link {
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px; /* overlap the rule so the active tab can connect to the content below */
    transition: background 0.1s, color 0.1s;
}
.admin-nav-link:hover { color: var(--ink); background: var(--rule); }
.admin-nav-link.is-active {
    color: var(--ink);
    font-weight: 600;
    background: var(--paper);
    border-color: var(--rule-dark);        /* top + left + right */
    border-bottom: 1px solid var(--paper); /* hide the rule under the active tab → looks joined */
}

/* Tab bar docked in the sticky header (NF-09): aligns with the content column and stays put while
   the page scrolls (it lives inside .site-top). */
.subnav-bar {
    background: var(--paper);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 3rem);
}
.subnav-bar .admin-nav { margin-bottom: 0; }

.admin-section { margin: 1.75rem 0; }

.admin-cards { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.admin-card {
    display: flex; flex-direction: column; gap: 0.2rem;
    min-width: 130px; padding: 0.8rem 1rem;
    border: 1px solid var(--rule); background: #fff;
}
.admin-card-num { font-size: 1.5rem; font-weight: 700; }
.admin-card-label { font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.admin-health-green { color: #1a7f37; }
.admin-health-yellow { color: #9a6700; }
.admin-health-red { color: #b00020; }

/* Wrapper lets wide admin tables scroll horizontally on narrow screens instead of
   overflowing the page (the publisher/newspaper tables carry several columns). */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }
.admin-error { color: #b00020; font-size: 0.8rem; max-width: 360px; }

.admin-muted { color: var(--ink-soft); font-size: 0.8rem; }
.admin-warn { color: #b45309; font-size: 0.8rem; font-weight: 600; }

.admin-inline-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }
.admin-inline-form { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0; }

/* Auto-download status is a full-width sub-row under each newspaper: the main row carries no bottom
   border so the two read as one block, and the sub-row lays the facts out horizontally. */
.admin-table tr.admin-mainrow > td { border-bottom: 0; }
.admin-subrow > td { padding-top: 0; }
.admin-download-row { display: flex; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; }
.admin-download-facts { display: flex; align-items: baseline; gap: 0.2rem 1.25rem; flex-wrap: wrap; font-size: 0.85rem; }
.admin-download-row .admin-inline-actions { margin-top: 0; margin-left: auto; }
.admin-add { margin-top: 0.75rem; }
.admin-input {
    font-family: var(--font-body, inherit); font-size: 0.9rem;
    padding: 0.3rem 0.5rem; border: 1px solid var(--rule-dark); background: #fff;
}
.admin-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

.admin-btn {
    border: 1px solid var(--rule-dark); background: transparent; color: var(--ink-soft);
    font-size: 0.8rem; padding: 0.3rem 0.6rem; cursor: pointer; font-family: var(--font-body, inherit);
    /* inline-flex + gap spaces an icon from its label, and leaves icon-only buttons centred. */
    display: inline-flex; align-items: center; gap: 0.4em;
}
.admin-btn:hover { background: var(--rule); color: var(--ink); }
.admin-btn-primary { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.admin-btn-danger:hover { background: #b00020; color: #fff; border-color: #b00020; }

.admin-flash { padding: 0.5rem 0.75rem; font-size: 0.85rem; margin: 0.75rem 0; border-left: 3px solid; }
.admin-flash-ok { border-color: #1a7f37; background: #f0fbf3; }
.admin-flash-err { border-color: #b00020; background: #fdf0f1; }

.admin-badge { font-size: 0.72rem; padding: 0.1rem 0.4rem; border: 1px solid; }
.admin-badge-on { color: #1a7f37; border-color: #1a7f37; }
.admin-badge-off { color: #b00020; border-color: #b00020; }

/* ── User menu (logged-in dropdown) & masthead admin link ────────── */
.utility-bar .user-menu { margin-right: auto; position: relative; }

.user-menu-toggle {
    cursor: pointer;
    list-style: none;
    color: var(--ink-soft);
}
.user-menu-toggle::-webkit-details-marker { display: none; }
.user-menu-toggle::marker { content: ''; }
.user-menu-toggle::after { content: ' ▾'; opacity: 0.5; }
.user-menu[open] .user-menu-toggle::after { content: ' ▴'; }

.user-menu-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    min-width: 170px;
    background: var(--paper);
    border: 1px solid var(--rule-dark);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 200;
    display: flex;
    flex-direction: column;
}
.user-menu-panel form { margin: 0; }

.user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    font-family: var(--font-body);
    color: var(--ink-soft);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.user-menu-item:hover { background: var(--rule); color: var(--ink); text-decoration: none; }
.user-menu-logout { border-top: 1px solid var(--rule); }

/* ── Admin: section heads, + buttons, edit/delete actions, modal dialogs ───────────── */
.admin-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.admin-section-head .admin-h2 { margin: 0; flex: 1; }
.admin-add-btn {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem; padding: 0; line-height: 1;
    font-size: 1.2rem; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
}

.admin-dialog {
    border: 1px solid var(--rule-dark); padding: 0; max-width: 30rem; width: calc(100% - 2rem);
    background: #fff; color: var(--ink); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.admin-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
/* .admin-field's own display would beat the UA [hidden] rule, silently breaking every conditional
   row (login fields, week-of-month). Re-assert it for everything inside a dialog. */
.admin-dialog [hidden] { display: none !important; }
.admin-dialog-form { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; }
/* Standalone (non-dialog) settings forms: same column layout, capped width, no dialog padding. */
.admin-form-narrow { max-width: 32rem; }
.admin-dialog-title { font-size: 1.05rem; margin: 0; border-bottom: 2px solid var(--ink); padding-bottom: 0.3rem; }
.admin-field { display: flex; flex-direction: column; gap: 0.25rem; }
.admin-field > span { font-size: 0.8rem; color: var(--ink-soft); }
.admin-field .admin-input { width: 100%; box-sizing: border-box; }
.admin-field .admin-muted { font-size: 0.72rem; }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }

/* Wide dialog (newspaper edit): two-column field grid; full-width rows opt in explicitly.
   Collapses back to one column on narrow screens. */
.admin-dialog--wide { max-width: 46rem; }

/* Download-history dialog: wide table (5 columns incl. error text), capped height, pager below. */
.admin-dialog--history { max-width: 60rem; }
.admin-history-scroll { max-height: 55vh; overflow-y: auto; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.admin-pager .admin-btn:disabled { opacity: 0.35; cursor: default; }
.admin-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.25rem; align-items: start; }
.admin-field-grid .admin-field-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .admin-field-grid { grid-template-columns: 1fr; }
}

/* The download-config group: a quiet framed section instead of the browser-default fieldset. */
.admin-fieldset {
    border: 1px solid var(--rule, #d8d2c4); padding: 0.9rem 1rem 1rem; margin: 0;
}
.admin-fieldset > legend {
    font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft); padding: 0 0.4rem;
}
.admin-input-mono { font-family: var(--font-mono, monospace); font-size: 0.8rem; }
textarea.admin-input { resize: vertical; }
.admin-input[readonly] { background: var(--rule, #eee); color: var(--ink-soft); cursor: not-allowed; }

/* Publisher logo: small thumbnail in the table, larger preview in the edit dialog. */
.admin-logo-cell { width: 3rem; }
.admin-logo-thumb { max-width: 2.5rem; max-height: 2.5rem; object-fit: contain; display: block; }
.admin-logo-preview { max-width: 8rem; max-height: 5rem; object-fit: contain; border: 1px solid var(--rule, #ccc); padding: 0.2rem; background: #fff; }
.admin-checkbox { flex-direction: row; align-items: center; gap: 0.4rem; font-size: 0.8rem; }

/* Publication-day checkboxes (F-10): a wrapping row of weekday toggles. */
.admin-weekday-set { border: none; margin: 0; padding: 0; }
.admin-weekday-set > legend { font-size: 0.8rem; color: var(--ink-soft); padding: 0; }
.admin-weekday-options { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.25rem 0; }
.admin-weekday-option { white-space: nowrap; }

/* ── Main navigation (always visible; wraps to multiple rows on small screens) ──────── */
.main-nav { margin-top: 0.5rem; }
/* On compact pages (and the scrolled search page) the dateline and its double rule collapse, so the
   title↔menu separator would vanish. Restore it as a top rule on the menu itself — the same 3px
   double rule as the search-page dateline. */
.is-scrolled .main-nav {
    margin-top: 0;
    padding-top: 0.4rem;
    border-top: 3px double var(--ink);
}
.main-nav-list {
    list-style: none; margin: 0; padding: 0.45rem 0.5rem;
    display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem 1.6rem;
}
.main-nav-link {
    font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
    padding: 0.15rem 0.1rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.main-nav-link:hover { color: var(--ink); border-bottom-color: var(--rule); }
.main-nav-link.is-active { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 640px) {
    .main-nav-list { gap: 0.25rem 1.1rem; }
    .main-nav-link { font-size: 0.7rem; letter-spacing: 0.12em; }
}

/* ── Impressum ─────────────────────────────────────────────────────────────────────── */
.impressum-block { font-family: var(--font-body, serif); line-height: 1.7; }

/* "Why the Morgue?" (overview) — text beside the 1942 NYT-morgue photograph; stacks on narrow screens. */
.about-morgue { display: flex; gap: 1.75rem; align-items: flex-start; }
.about-morgue-text { flex: 1 1 24rem; line-height: 1.7; }
.about-morgue-text p { margin: 0 0 0.9rem; }
.about-morgue-figure { flex: 0 1 18rem; margin: 0; }
.about-morgue-figure img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--rule-dark, #999); filter: sepia(0.15);
}
.about-morgue-figure figcaption {
    margin-top: 0.4rem; font-size: 0.72rem; font-style: italic;
    color: var(--ink-soft); line-height: 1.45;
}
@media (max-width: 640px) {
    .about-morgue { flex-direction: column; }
    .about-morgue-figure { flex-basis: auto; max-width: 24rem; }
}

/* ── Search-alert subscriptions (F-15) ───────────────────────────── */
.subscription-form {
    border: 1px solid var(--rule);
    padding: 0.8rem 1rem;
    margin-bottom: 0.8rem;
}

.subscription-exclusions summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 0.9rem;
}

.subscription-exclusion {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.25rem 1rem 0.25rem 0;
    font-size: 0.9rem;
}

.subscription-test-hit {
    border-left: 3px solid var(--rule-dark);
    padding-left: 1rem;
    margin-bottom: 0.9rem;
}

.subscription-test-fragment {
    margin: 0.15rem 0;
    color: var(--ink);
    font-size: 0.92rem;
}

/* Changelog on the overview page (one list per release). */
.changelog-list {
    margin: 0.2rem 0 0.6rem 1.2rem;
    padding: 0;
    font-size: 0.9rem;
    color: var(--ink);
}
.changelog-list li { margin: 0.2rem 0; }