:root {
    --black: #000000;
    --bg: #ffffff;
    --bg-soft: #fafafa;
    --line: #e5e5e5;
    --line-soft: #ededed;
    --text: #1a1a1a;
    --text-muted: #6b6b6b;
    --text-faint: #9b9b9b;

    --c-world: #2c2c2c;
    --c-us: #1f8fff;
    --c-ny: #f5c518;
    --c-politics: #1f8fff;
    --c-business: #f59e0b;
    --c-opinion: #b06ad9;
    --c-tech: #6b4e2e;
    --c-science: #4caf50;
    --c-health: #00bcd4;
    --c-sports: #4caf50;

    --topbar-h: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* ============ TOP BAR ============ */
.topbar {
    height: var(--topbar-h);
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 18px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    /* fixed across desktop AND mobile */
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
}
.topbar .clock {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-size: 14px;
    margin-right: 14px;
    flex: 0 0 auto;
}
.topbar .icons { display: flex; align-items: center; gap: 16px; flex: 1; }
.topbar .icons button,
.topbar .login button {
    background: transparent; border: none; color: #fff;
    cursor: pointer; padding: 6px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.95; transition: all 0.15s;
    border-radius: 50%;
    position: relative;
}
.topbar .icons button:hover, .topbar .login button:hover { opacity: 1; }
.topbar .icons button.is-active,
.topbar .login button.is-active {
    background: #fff;
    color: #000;
}
.topbar .icons button.is-active svg,
.topbar .login button.is-active svg { stroke: #000; }
.topbar svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 1.5; fill: none; transition: stroke 0.15s; }
.topbar .login { display: flex; align-items: center; gap: 14px; font-weight: 500; flex: 0 0 auto; }
.topbar .login a { font-size: 14px; }

/* Account button in the top bar — looks like a plain link, but
   acts as a dropdown trigger when the visitor is a reader. The
   chevron flips when the panel is open. */
.topbar .login .login-account-link {
    background: transparent;
    border: none;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 4px 6px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.85;
    transition: opacity 0.15s;
    line-height: 1;
    /* Override the generic `.topbar .login button` rule which makes
       all topbar buttons round (border-radius: 50%) — this is a
       text link, not an icon, so we want a subtle pill instead. */
    border-radius: 4px;
}
.topbar .login .login-account-link:hover { opacity: 1; }
/* Active (panel open) state — the generic .topbar .login button.is-active
   inverts colours (white bg / black text), which is fine for the icon
   buttons but jarring on a text label. Override to stay transparent
   and just bump opacity so it doesn't look "selected" loudly. */
.topbar .login .login-account-link.is-active {
    background: transparent;
    color: #fff;
    opacity: 1;
}
.login-account-chev {
    display: inline-block;
    font-size: 9px;
    line-height: 1;
    opacity: 0.65;
    transition: transform 0.2s ease, opacity 0.15s;
    margin-top: 1px;
}
.topbar .login .login-account-link.is-active .login-account-chev {
    transform: rotate(180deg);
    opacity: 1;
}

/* ============ ACCOUNT DROPDOWN PANEL ============
   Small anchored dropdown that opens under the user's name. Lighter
   styling than the columnist/archive panels — more like a system
   menu (avatar action sheet) than an editorial popover. */
.panel-account {
    /* Sit on top of the chrome but anchored under the topbar. */
    position: fixed;
    top: var(--topbar-h);
    background: #1a1a1a;
    color: #fff;
    min-width: 200px;
    padding: 6px 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    /* Match the anchored panels — JS sets `left` based on the
       button's bounding rect. We override the default left:0 with
       right alignment by computing in JS, but as a fallback the
       panel still appears at the right edge of the topbar. */
    right: 8px;
    left: auto;
}
.account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #fff;
    text-decoration: none;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    transition: background 0.15s;
    cursor: pointer;
}
.account-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}
.account-menu-item-danger {
    color: #ff7a85;
}
.account-menu-item-danger:hover {
    background: rgba(255, 122, 133, 0.12);
    color: #ff9ba3;
}
.account-menu-icon {
    flex-shrink: 0;
    opacity: 0.85;
}
.account-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

@media (max-width: 720px) {
    .panel-account {
        min-width: 180px;
        right: 4px;
    }
    .topbar .login .login-account-link {
        /* Cap the visible width so a long display_name doesn't push
           the chevron off-screen on small phones. */
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Hamburger button — visible only on tablet/mobile */
.btn-hamburger {
    display: none !important;
    background: transparent; border: none; color: #fff;
    cursor: pointer; padding: 6px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    margin-right: 4px;
}
.btn-hamburger svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 1.8; fill: none; }

/* ============ MOBILE MENU SIDEBAR (left slide-in) ============ */
.mobile-menu {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: 320px;
    max-width: 88vw;
    height: calc(100vh - var(--topbar-h));
    background: #fff;
    z-index: 150;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    box-shadow: 4px 0 24px rgba(0,0,0,0.08);
}
.mobile-menu.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

.mobile-menu .mm-header {
    padding: 26px 22px 18px;
    border-bottom: 1px solid var(--line);
}
.mobile-menu .logo {
    margin-bottom: 18px;
}

/* Search input inside the mobile menu (always visible) */
.mm-search {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 0 10px;
    background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
}
.mm-search:focus-within {
    border-color: #000;
    background: #fff;
}
.mm-search svg {
    width: 16px; height: 16px;
    stroke: #777; stroke-width: 1.6; fill: none;
    flex: 0 0 16px;
}
.mm-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #1a1a1a;
}
.mm-search input::placeholder { color: #999; }

.mobile-menu .mm-body {
    flex: 1;
    padding: 18px 22px 30px;
}
.mobile-menu .weather {
    margin-bottom: 22px;
}
.mobile-menu .nav-section .group {
    font-size: 15px;
}
.mobile-menu .nav-section li {
    font-size: 15px;
    padding: 9px 0;
}
.mobile-menu .footer-mini {
    margin: 20px 22px 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* search input that slides */
.search-wrap {
    display: flex;
    align-items: center;
    position: relative;
}
.search-input {
    width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    padding: 0;
    transition: width 0.32s ease, padding 0.32s ease, border-color 0.32s ease;
    border-bottom: 1px solid transparent;
    height: 26px;
    margin-right: 0;
}
.search-input::placeholder { color: rgba(255,255,255,0.55); }
.search-input.is-open {
    width: 220px;
    padding: 0 8px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    margin-right: 4px;
}

/* ============ TOPBAR DROPDOWN PANELS ============ */
.dropdown-panel {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    background: #000;
    color: #fff;
    z-index: 150;
    box-shadow: 0 14px 30px rgba(0,0,0,0.25);
    display: none;
    animation: panelDown 0.22s ease-out;
    font-family: "Inter", sans-serif;
}
.dropdown-panel.is-open { display: block; }

@keyframes panelDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-panel .more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 18px;
    background: transparent;
    color: #fff;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    text-transform: lowercase;
}
.dropdown-panel .more-btn:hover { background: rgba(255,255,255,0.04); }
.dropdown-panel .more-btn .chev {
    width: 9px; height: 9px;
    border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
    transform: rotate(45deg); margin-bottom: 3px;
}

/* --- Columnists panel --- */
.panel-columnists {
    width: 600px;
    max-width: 100vw;
    padding: 28px 32px 0;
}
.panel-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 400;
}
.columnists-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 36px;
    padding-bottom: 16px;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}
.columnists-grid::-webkit-scrollbar { width: 4px; }
.columnists-grid::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
.columnist {
    display: flex; align-items: flex-start; gap: 12px;
    cursor: pointer; transition: opacity 0.15s;
}
.columnist:hover { opacity: 0.75; }
.columnist .photo {
    width: 44px; height: 44px; border-radius: 50%;
    flex: 0 0 44px;
    background: linear-gradient(135deg, #c9b59a, #6b5340);
    position: relative; overflow: hidden;
}
.columnist .photo::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 38%, #f1d9b8 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 95%, #6b4f30 0 50%, transparent 51%);
}
.columnist .info { min-width: 0; }
.columnist .name { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; line-height: 1.2; }
.columnist .role { font-size: 11px; color: #888; line-height: 1.35; }

/* --- Advanced search --- */
.panel-search {
    width: 380px;
    padding: 28px 32px 0;
}
.search-row { margin-bottom: 24px; }
.search-row .row-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.search-row label {
    font-size: 13px;
    color: #fff;
    font-weight: 400;
}
.search-row .row-pct {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.slider-track {
    position: relative;
    height: 1px;
    background: #555;
    width: 100%;
    cursor: pointer;
}
.slider-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: #fff;
}
.slider-thumb {
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.18);
    transition: box-shadow 0.15s;
}
.slider-thumb:hover, .slider-thumb:active { box-shadow: 0 0 0 6px rgba(255,255,255,0.18); }
.slider-thumb:active { cursor: grabbing; }

/* --- Archive panel --- */
.panel-archive {
    width: 540px;
    padding: 24px 32px 0;
}
.archive-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px;
}
.archive-top .label {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px; color: #fff; font-weight: 400;
}
.archive-top .results {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: #888;
}
.archive-top .results-bullets {
    display: inline-flex; align-items: center; gap: 6px;
}
.result-bubble {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 600;
    font-family: "Inter", sans-serif;
}
.result-bubble.b1 { background: #f5a623; }
.result-bubble.b2 { background: #1f8fff; }
.result-bubble.b3 { background: #ff3b6b; }
.result-bubble.b4 { background: #d4a017; }
.result-bubble.b5 { background: #4caf50; }

/* mode checkboxes (circular, multi-select) — labels acima das colunas, alinhadas à esquerda */
.archive-modes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 0 0 22px 0;
    margin-bottom: 4px;
}
.archive-mode {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: #fff;
    user-select: none;
    justify-self: start;
    padding-left: 0;
}
.archive-mode .check {
    width: 14px; height: 14px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    position: relative;
    flex: 0 0 14px;
    transition: background 0.15s;
}
.archive-mode.is-active .check {
    background: #fff;
}
.archive-mode.is-active .check::after {
    content: "";
    position: absolute;
    left: 3px; top: 0px;
    width: 4px; height: 8px;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    transform: rotate(45deg);
}
.archive-mode.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* archive cols (wheel pickers)
   Layout per column: [text labels — left, takes most of the width] [track + handle — right edge]
   The vertical track and the white handle are positioned at the right side of each column,
   so they don't sit on top of the day/month/year names. */
.archive-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding-bottom: 24px;
}
.archive-col {
    position: relative;
    height: 320px;
    overflow: hidden;
    transition: opacity 0.2s;
    /* Reserve space on the right for the track/handle */
    padding-right: 24px;
}
.archive-col.is-disabled {
    opacity: 0.25;
    pointer-events: none;
}
/* vertical track line — positioned at the right edge of the column, NOT in the middle */
.archive-col::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 32px; bottom: 32px;
    width: 1px;
    background: #2a2a2a;
    z-index: 1;
}
.archive-col-inner {
    position: absolute;
    left: 0; right: 24px; top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
    z-index: 2;
    padding-left: 4px;
}
.archive-item {
    padding: 10px 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* keep label left, count right */
    gap: 8px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 13px;
    color: #6e6e6e;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: color 0.2s, font-size 0.2s;
}
.archive-item.is-selected {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.archive-item.is-empty {
    color: #4a4a4a;
    opacity: 0.45;
    cursor: not-allowed;
}
.archive-item.is-placeholder {
    color: #888;
    font-style: italic;
    font-size: 11px;
    text-align: center;
    justify-content: center;
    cursor: default;
}
.archive-item-count {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 10px;
    color: #888;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}
.archive-item.is-selected .archive-item-count {
    color: #fff;
    background: rgba(255,255,255,0.18);
}
/* selection handle (white dot on the track at the centerline) — now on the right */
.archive-col .handle {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    transform: translate(50%, -50%);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 3px #000;
}
/* arrows only on year column (matches the design) — also right-aligned */
.archive-col .arrow {
    position: absolute;
    right: 12px;
    transform: translateX(50%);
    width: 16px; height: 16px;
    cursor: pointer;
    z-index: 4;
    background: transparent; border: none;
    color: #fff;
    display: none;
}
.archive-col[data-col="year"] .arrow { display: block; }
.archive-col .arrow svg { width: 100%; height: 100%; stroke: #fff; stroke-width: 2; fill: none; }
.archive-col .arrow.up   { top: 8px; }
.archive-col .arrow.down { bottom: 8px; }
.archive-col .arrow:hover { opacity: 0.7; }

/* ============ TIMELINE SIDEBAR (Calendar icon) ============ */
.timeline-sidebar {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    /* Desktop: 35% of viewport */
    width: 35vw;
    min-width: 380px;
    max-width: 600px;
    height: calc(100vh - var(--topbar-h));
    background: #000;
    color: #fff;
    z-index: 150;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
    font-family: "Inter", sans-serif;
    pointer-events: none;
}
.timeline-sidebar.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.timeline-sidebar .header {
    padding: 22px 26px 18px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.timeline-sidebar .header h3 {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
}
.timeline-sidebar .close-btn {
    background: transparent; border: none; color: #fff;
    cursor: pointer; padding: 4px;
    font-size: 20px;
    line-height: 1;
    opacity: 0.7;
}
.timeline-sidebar .close-btn:hover { opacity: 1; }
.timeline-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 26px 26px;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}
.timeline-list::-webkit-scrollbar { width: 4px; }
.timeline-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.timeline-row {
    display: grid;
    grid-template-columns: 75px 1fr 70px;
    gap: 14px;
    padding: 16px 0;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
}
.timeline-row:last-child { border-bottom: none; }
.timeline-time {
    font-size: 11px;
    color: #888;
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
    position: relative;
    text-align: right;
    padding-right: 18px;
}
.timeline-time::after {
    content: "";
    position: absolute;
    right: 0; top: 4px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dot, #888);
    box-shadow: 0 0 0 2px #000;
}
.timeline-row::before {
    content: "";
    position: absolute;
    left: 89px;
    top: 12px; bottom: -16px;
    width: 1px;
    background: #2a2a2a;
}
.timeline-row:last-child::before { bottom: 0; }
.timeline-headline {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px; font-weight: 600; line-height: 1.25;
    color: #fff; cursor: pointer;
}
.timeline-headline.is-featured { color: #ff3b6b; }

/* When the headline is a real link (server-supplied posts), keep the
   same styling as the div but make the click feedback obvious. */
.timeline-headline-link {
    display: block;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px; font-weight: 600; line-height: 1.25;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
.timeline-headline-link:hover { color: #cce4ff; }
.timeline-headline-link.is-featured { color: #ff3b6b; }
.timeline-headline-link.is-featured:hover { color: #ff6b8b; }

/* Empty state when the site has no published posts yet. */
.timeline-empty {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-family: "Source Serif 4", Georgia, serif;
    font-style: italic;
    font-size: 14px;
}
.timeline-row .author {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; cursor: pointer;
}
.timeline-row .author .photo-sm {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #c9b59a, #6b5340);
    position: relative; overflow: hidden; margin-bottom: 4px;
}
.timeline-row .author .photo-sm::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 38%, #f1d9b8 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 95%, #6b4f30 0 50%, transparent 51%);
}
.timeline-row .author .a-name { font-size: 10px; color: #fff; line-height: 1.15; font-weight: 500; }
.timeline-row .author .a-comments { font-size: 9px; color: #888; margin-top: 2px; }

/* ============ NOTIFICATIONS SIDEBAR (Bell icon) ============ */
/* Same animation/structure as the timeline, but slides from the RIGHT
   with its own card-based content. */
.notif-sidebar {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    width: 35vw;
    min-width: 380px;
    max-width: 600px;
    height: calc(100vh - var(--topbar-h));
    background: #000;
    color: #fff;
    z-index: 150;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
    font-family: "Inter", sans-serif;
    pointer-events: none;
}
.notif-sidebar.is-open {
    transform: translateX(0);
    pointer-events: auto;
}
.notif-sidebar .header {
    padding: 22px 26px 18px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-sidebar .header h3 {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    flex: 1;
}
.notif-sidebar .mark-all {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: #ccc;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.15s;
}
.notif-sidebar .mark-all:hover {
    border-color: #fff;
    color: #fff;
}
.notif-sidebar .close-btn {
    background: transparent; border: none; color: #fff;
    cursor: pointer; padding: 4px;
    font-size: 20px;
    line-height: 1;
    opacity: 0.7;
}
.notif-sidebar .close-btn:hover { opacity: 1; }

.notif-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px 26px;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

.notif-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    background: #1a1d24;
    border-radius: 8px;
    border-left: 3px solid var(--notif-accent, #1f8fff);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    position: relative;
}
.notif-card:hover {
    background: #232730;
    transform: translateX(-2px);
}
.notif-card.is-unread::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--notif-accent, #1f8fff);
    box-shadow: 0 0 0 2px #1a1d24;
}
.notif-card.is-read {
    opacity: 0.6;
}

.notif-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--notif-accent, #1f8fff);
    flex: 0 0 36px;
}
.notif-icon svg {
    width: 18px; height: 18px;
    stroke: #fff; stroke-width: 1.8;
    fill: none;
}
.notif-icon.icon-fill svg path,
.notif-icon.icon-fill svg circle {
    fill: #fff; stroke: none;
}

.notif-body { min-width: 0; padding-right: 18px; }
.notif-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--notif-accent, #1f8fff);
    margin-bottom: 4px;
}
.notif-headline {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 4px;
}
.notif-preview {
    font-size: 12px;
    color: #b8bcc4;
    line-height: 1.4;
    margin-bottom: 8px;
}
.notif-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #888;
}
.notif-meta .dot-sep {
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #555;
    flex: 0 0 2px;
}

.notif-empty {
    text-align: center;
    padding: 60px 24px;
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    font-family: "Source Serif 4", Georgia, serif;
    font-style: italic;
}
.notif-empty p { margin: 0 0 16px; }
.notif-empty-cta {
    display: inline-block;
    padding: 8px 18px;
    background: #fff;
    color: #1a1a1a;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-radius: 4px;
    font-style: normal;
    transition: opacity 0.15s;
}
.notif-empty-cta:hover { opacity: 0.85; }

/* Notification badge on bell button */
.notif-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 14px;
    height: 14px;
    background: #ff3b6b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    border-radius: 10px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1.5px solid #000;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, border-color 0.15s;
}
.topbar .login button.is-active .notif-badge { border-color: #fff; }
.notif-badge.is-zero {
    opacity: 0;
    transform: scale(0.5);
}

/* Backdrop / scrim */
.scrim {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(0,0,0,0.4);
    z-index: 140;
    display: none;
    animation: fadeIn 0.2s ease;
}
.scrim.is-open { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============ LAYOUT ============ */
.layout {
    display: grid;
    grid-template-columns: 200px 1fr 260px;
    height: calc(100vh - var(--topbar-h));
    margin-top: var(--topbar-h);
    overflow: hidden;
}

/* ============ LEFT SIDEBAR ============ */
.sidebar-left {
    border-right: 1px solid var(--line);
    padding: 26px 22px;
    background: #fff;
    overflow-y: auto;
    height: 100%;
}
.logo {
    /* Legacy: fallback typography used when a text logo is shown.
       The new theme ships a PNG icon by default (see .logo-img below). */
    font-family: "UnifrakturCook", "Old English Text MT", serif;
    font-weight: 700; font-size: 56px; line-height: 0.9;
    color: #000; letter-spacing: -0.02em; margin-bottom: 36px;
    /* Anchor variant: when wrapping the icon image */
    display: inline-block;
    text-decoration: none;
}
/* When we're using the bundled PNG icon (or a custom WP logo image),
   constrain it to a sensible size and let the surrounding `.logo`
   margin-bottom carry the layout spacing. */
.logo .logo-img,
.logo .custom-logo {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    /* Adapt to dark themes by inverting the (black) icon when needed.
       Light themes leave it black. */
    transition: filter 0.2s ease;
}
body.theme-negative .logo .logo-img,
body.theme-negative .logo .custom-logo {
    filter: invert(1);
}
/* Inside the mobile menu header we render it a bit smaller. */
.mm-header .logo .logo-img,
.mm-header .logo .custom-logo {
    width: 44px;
    height: 44px;
}
.weather {
    padding: 10px 0 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
    font-family: "Inter", sans-serif;
    font-size: 13px; color: #333;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.weather-row {
    display: flex; align-items: center; gap: 8px;
}
.weather-icon {
    width: 18px; height: 18px; flex: 0 0 18px;
    display: flex; align-items: center; justify-content: center;
    color: #fbbf24;
}
.weather-icon svg {
    width: 18px; height: 18px;
    display: block;
}
.weather .temp { font-weight: 600; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.weather .cond { color: #555; }
.weather-city {
    font-size: 11px;
    color: #777;
    font-weight: 500;
    padding-left: 26px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.weather.is-loading .temp,
.weather.is-loading .cond { color: #aaa; }

.nav-section { font-family: "Inter", sans-serif; }

/* The "group" header is now a real toggle: caret rotates when open */
.nav-section .group {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; font-weight: 600;
    padding: 10px 0;
    color: #111;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.nav-section .group:hover { color: #000; }
.nav-section .group .chev {
    width: 9px; height: 9px;
    border-right: 1.5px solid #111;
    border-bottom: 1.5px solid #111;
    transform: rotate(45deg);
    margin-bottom: 3px;
    transition: transform 0.22s ease;
    flex: 0 0 9px;
}
/* When the section is OPEN, the caret points up (rotated 225deg) */
.nav-section .group.is-open .chev {
    transform: rotate(-135deg);
    margin-bottom: -3px;
}

/* Collapsible body — uses max-height for smooth open/close */
.nav-section .group-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.22s ease;
    padding: 0;
}
.nav-section .group-body.is-open {
    max-height: 800px;
    opacity: 1;
    padding: 4px 0 14px;
}

.nav-section ul { list-style: none; padding: 0; margin: 0; }

/* News items: dot acts as a checkbox toggle, label is a clickable link */
.nav-section li.cat-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    color: #1a1a1a;
}
.nav-section li.cat-item .cat-name {
    cursor: pointer;
    flex: 1;
    transition: color 0.15s;
    /* Works for both <span> (legacy) and <a> (WP build): */
    color: inherit;
    text-decoration: none;
}
.nav-section li.cat-item .cat-name:hover {
    color: #000;
    text-decoration: underline;
}
.nav-section li.cat-item.is-disabled .cat-name {
    color: #b8b8b8;
    text-decoration: line-through;
}

/* Dot is now a button (interactive) — full color when active, just outlined when disabled */
.dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex: 0 0 11px;
    display: inline-block;
    cursor: pointer;
    border: 1.5px solid transparent;
    background-clip: padding-box;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    position: relative;
}
.dot:hover { transform: scale(1.15); }
.dot:active { transform: scale(0.95); }

/*
 * Dot colour resolution.
 *
 * Three sources, in order of precedence:
 *   1. Inline style="--cat-color: …" (WP build — set by PHP from term meta)
 *   2. Slug-based .dot.{slug} class (legacy mockup defaults)
 *   3. Hardcoded fallback below if nothing matches
 *
 * Inline style wins because it's directly on the element. The class-based
 * rules below provide colours for the original mockup categories so the
 * static HTML pages still work.
 */
.dot.world    { background: var(--c-world); }
.dot.us       { background: var(--c-us); }
.dot.ny       { background: var(--c-ny); }
.dot.politics { background: var(--c-politics); }
.dot.business { background: var(--c-business); }
.dot.opinion  { background: var(--c-opinion); }
.dot.tech     { background: var(--c-tech); }
.dot.science  { background: var(--c-science); }
.dot.health   { background: var(--c-health); }
.dot.sports   { background: var(--c-sports); }

/* Disabled dot: outline only, transparent fill — color hint preserved on the border */
.cat-item.is-disabled .dot {
    background: transparent !important;
    border-color: currentColor;
    opacity: 0.5;
    /* Use the inline --cat-color (WP build) when present */
    color: var(--cat-color, currentColor);
}
.cat-item.is-disabled .dot.world    { color: var(--c-world); }
.cat-item.is-disabled .dot.us       { color: var(--c-us); }
.cat-item.is-disabled .dot.ny       { color: var(--c-ny); }
.cat-item.is-disabled .dot.politics { color: var(--c-politics); }
.cat-item.is-disabled .dot.business { color: var(--c-business); }
.cat-item.is-disabled .dot.opinion  { color: var(--c-opinion); }
.cat-item.is-disabled .dot.tech     { color: var(--c-tech); }
.cat-item.is-disabled .dot.science  { color: var(--c-science); }
.cat-item.is-disabled .dot.health   { color: var(--c-health); }
.cat-item.is-disabled .dot.sports   { color: var(--c-sports); }

/* "More" items: plain links, no dot/checkbox */
.nav-section li.more-item {
    padding: 7px 0;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: color 0.15s;
}
.nav-section li.more-item:hover {
    color: #000;
    text-decoration: underline;
}
/* In WP build, link is a real <a> inside the <li> */
.nav-section li.more-item > a {
    color: inherit;
    text-decoration: none;
    display: block;
}
.nav-section li.more-item:hover > a {
    text-decoration: underline;
}

.nav-section .group.section-more {
    border-top: 1px solid var(--line);
    margin-top: 8px;
}

/* ============ TEXT EDIT BUTTON + POPOVER ============ */
.text-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 38px;
    height: 38px;
    background: #2a2e36;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.15s, background 0.15s;
    margin-top: 30px;
    padding: 0;
}
.text-edit-btn:hover { transform: scale(1.05); background: #3a3f48; }
.text-edit-btn .a-large { font-size: 16px; }
.text-edit-btn .a-small { font-size: 11px; margin-left: 1px; }


/* ============ LOCALE SWITCHER (PT / EN / ES) ============
   Sits below the text-edit button in the left sidebar. Three states:
     - Closed: shows current locale's flag + native name
     - Open:   reveals popover list of all 3 locales
     - Saving: button is disabled, "…" overlay (handled in JS) */
.locale-switcher {
    position: relative;
    margin-top: 14px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
}

.locale-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    color: var(--text-strong);
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.locale-switcher-btn:hover {
    border-color: var(--text-strong);
}
.locale-switcher-btn[aria-expanded="true"] {
    border-color: var(--text-strong);
    background: var(--text-strong);
    color: var(--bg);
}

.locale-switcher-flag {
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}
.locale-switcher-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.locale-switcher-caret {
    flex: 0 0 10px;
    color: currentColor;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.locale-switcher-btn[aria-expanded="true"] .locale-switcher-caret {
    transform: rotate(180deg);
}

/* The popover list. Anchored above the button (drops up) so it
   doesn't overlap the footer-mini below. */
.locale-switcher-list {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}
.locale-switcher-list[hidden] {
    display: none;
}

.locale-switcher-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    color: var(--text-strong);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.locale-switcher-option:hover,
.locale-switcher-option:focus-visible {
    background: var(--text-strong);
    color: var(--bg);
}
.locale-switcher-option.is-current {
    background: rgba(0, 0, 0, 0.05);
    font-weight: 600;
}
[data-theme="dark"] .locale-switcher-option.is-current,
[data-theme="negative"] .locale-switcher-option.is-current {
    background: rgba(255, 255, 255, 0.08);
}

.locale-switcher-name {
    flex: 1 1 auto;
}
.locale-switcher-check {
    flex: 0 0 14px;
    color: currentColor;
    opacity: 0.8;
}

/* Saving state — applied to the wrapper while AJAX is in flight */
.locale-switcher.is-saving .locale-switcher-btn,
.locale-switcher.is-saving .locale-switcher-option {
    pointer-events: none;
    opacity: 0.5;
    cursor: progress;
}


/* ----- Popover (font-size controls) ----- */
.text-edit-popover {
    position: fixed;
    width: 280px;
    background: #1a1d24;
    color: #fff;
    border-radius: 6px;
    padding: 22px 22px 18px;
    z-index: 220;
    box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
    font-family: "Inter", sans-serif;
    display: none;
    transform-origin: var(--callout-origin, bottom left);
    animation: textEditIn 0.2s ease-out;
}
.text-edit-popover.is-open { display: block; }

@keyframes textEditIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Callout pointer (triangle) — points back to the button */
.text-edit-popover::before {
    content: "";
    position: absolute;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* default: points DOWN, anchored bottom-left (button on the left below) */
    bottom: -8px;
    left: 24px;
    border-top: 8px solid #1a1d24;
}
.text-edit-popover.point-up::before {
    bottom: auto;
    top: -8px;
    border-top: none;
    border-bottom: 8px solid #1a1d24;
}

.te-title {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #fff;
    margin-bottom: 18px;
    text-transform: uppercase;
}

/* Font choice (Serif / Sans) */
.te-fonts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.te-font-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 6px;
    padding: 10px 0 8px;
    cursor: pointer;
    color: #c9ccd1;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.te-font-choice .glyph {
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 6px;
}
.te-font-choice .label {
    font-size: 12px;
    font-weight: 500;
}
.te-font-choice[data-font="serif"] .glyph { font-family: "Source Serif 4", Georgia, serif; }
.te-font-choice[data-font="sans"]  .glyph { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; }
.te-font-choice.is-active {
    color: #fff;
    background: rgba(255,255,255,0.04);
}
.te-font-choice.is-active .glyph { color: #fff; }
.te-font-choice:hover { color: #fff; }

/* Color theme swatches */
.te-themes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}
.te-theme {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
    position: relative;
    background-clip: padding-box;
}
.te-theme:hover { transform: scale(1.1); }
.te-theme[data-theme="default"]      { background: #ffffff; border-color: rgba(255,255,255,0.2); }
.te-theme[data-theme="low-contrast"] { background: #c9b59a; }
.te-theme[data-theme="negative"]     { background: #000000; border-color: rgba(255,255,255,0.4); }
.te-theme.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}

/* Divider */
.te-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 14px 0;
}

/* Auto Night Theme toggle */
.te-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.te-toggle-row .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
    text-transform: uppercase;
}
.te-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: #4a505a;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
    flex: 0 0 36px;
}
.te-switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.te-switch.is-on { background: #1f8fff; }
.te-switch.is-on::after { transform: translateX(16px); }

/* Font size slider */
.te-size-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}
.te-size-row .a-min, .te-size-row .a-max {
    color: #fff;
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}
.te-size-row .a-min { font-size: 11px; }
.te-size-row .a-max { font-size: 18px; }
.te-size-track {
    flex: 1;
    position: relative;
    height: 2px;
    background: #4a505a;
    border-radius: 2px;
    cursor: pointer;
}
.te-size-thumb {
    position: absolute;
    top: 50%;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: box-shadow 0.15s;
}
.te-size-thumb:hover { box-shadow: 0 0 0 6px rgba(255,255,255,0.15); }
.te-size-thumb:active { cursor: grabbing; }

/* ============ GLOBAL THEME APPLICATION ============
   These tokens drive the WHOLE site when changed.
   Each theme rewrites the variables below. */

/* DEFAULT theme: white background, black text — current look */
body.theme-default {
    --bg: #ffffff;
    --text: #1a1a1a;
    --text-strong: #000000;
    --line: #e5e5e5;
    --bg-card: #f0f0f0;
    --bg-soft: #fafafa;
    --bg-right: #f5f5f5;
    --text-muted: #6b6b6b;
    --text-faint: #9b9b9b;
    --link-accent: #1f8fff;
}

/* LOW CONTRAST: warm sepia/cream — softer reading */
body.theme-low-contrast {
    --bg: #f5ecd9;
    --text: #3a2f20;
    --text-strong: #1f1812;
    --line: #d9c9a3;
    --bg-card: #ede0c4;
    --bg-soft: #f0e6cf;
    --bg-right: #ebe0c5;
    --text-muted: #6b5a3f;
    --text-faint: #957f5a;
    --link-accent: #b06b1c;
}

/* NEGATIVE: dark mode — black bg, light text */
body.theme-negative {
    --bg: #0f1115;
    --text: #ececec;
    --text-strong: #ffffff;
    --line: #2a2e35;
    --bg-card: #1a1d24;
    --bg-soft: #14171c;
    --bg-right: #14171c;
    --text-muted: #b8bcc4;
    --text-faint: #7a8090;
    --link-accent: #5aa9e6;
}

/* ============ APPLY TOKENS — uses !important to override the hardcoded
   colors / sizes that exist throughout the legacy CSS above. ============ */

body { background: var(--bg) !important; color: var(--text) !important; }

/* ----- Left sidebar ----- */
.sidebar-left { background: var(--bg) !important; border-right-color: var(--line) !important; }
.sidebar-left .logo { color: var(--text-strong) !important; }
.sidebar-left .weather { color: var(--text) !important; border-top-color: var(--line) !important; border-bottom-color: var(--line) !important; }
.sidebar-left .weather .temp { color: var(--text-strong) !important; }
.sidebar-left .weather .cond { color: var(--text-muted) !important; }
.sidebar-left .weather-city { color: var(--text-muted) !important; }
.sidebar-left .nav-section .group { color: var(--text-strong) !important; }
.sidebar-left .nav-section .cat-item,
.mobile-menu .nav-section .cat-item { color: var(--text) !important; }
.sidebar-left .nav-section .more-item,
.mobile-menu .nav-section .more-item { color: var(--text-muted) !important; }
.sidebar-left .nav-section .more-item:hover,
.mobile-menu .nav-section .more-item:hover { color: var(--text-strong) !important; }
.sidebar-left .nav-section .group .chev,
.mobile-menu .nav-section .group .chev {
    border-right-color: var(--text-strong) !important;
    border-bottom-color: var(--text-strong) !important;
}
.sidebar-left .nav-section .group.section-more,
.mobile-menu .nav-section .group.section-more {
    border-top-color: var(--line) !important;
}

/* ----- Main columns ----- */
.column { background: var(--bg) !important; border-right-color: var(--line) !important; }
.col-label {
    background: var(--bg) !important;
    color: var(--text-muted) !important;
    border-bottom-color: var(--line) !important;
}
.card { border-bottom-color: var(--line) !important; }
.hero h1, .midcard h2, .std h3 { color: var(--text-strong) !important; }
.hero .deck { color: var(--text) !important; }
.midcard .body, .std .body { color: var(--text) !important; }
.byline-info .author { color: var(--text-strong) !important; }
.byline-row .meta .name { color: var(--text-strong) !important; }
.byline-sm { color: var(--text-muted) !important; }
.byline-sm .name { color: var(--text-strong) !important; }
.byline-info .role, .byline-row .meta { color: var(--text-muted) !important; }
.com { color: var(--text-faint) !important; }
.hero-secondary-grid .card { border-right-color: var(--line) !important; border-bottom-color: var(--line) !important; }

/* ----- Right sidebar ----- */
.sidebar-right { background: var(--bg-right) !important; border-left-color: var(--line) !important; }
.sidebar-right .panel { border-bottom-color: var(--line) !important; }
.sidebar-right h4, .book-title { color: var(--text-strong) !important; }
.book-author .meta .name { color: var(--text-strong) !important; }
.sidebar-right .tags li { color: var(--text) !important; }
.sidebar-right .tags li:hover { color: var(--text-strong) !important; }
.sidebar-right .book-tag, .book-author .meta { color: var(--text-muted) !important; }
.sidebar-right .critics-pick li { color: var(--text) !important; border-bottom-color: var(--line) !important; }
.full-cal { color: var(--text-muted) !important; }
.full-cal .chev {
    border-right-color: var(--text-muted) !important;
    border-bottom-color: var(--text-muted) !important;
}

/* Cards backgrounds — only when on dark/sepia themes; default keeps white */
body.theme-low-contrast .calendar-week-event-card,
body.theme-negative .calendar-week-event-card {
    background: var(--bg-card) !important;
}

/* Load more button uses theme tokens */
.load-more-btn { background: var(--bg) !important; border-color: var(--text-strong) !important; color: var(--text-strong) !important; }
.load-more-btn:hover { background: var(--text-strong) !important; color: var(--bg) !important; }
.load-more-count { color: var(--text-faint) !important; }

/* Mobile menu uses theme tokens */
.mobile-menu { background: var(--bg) !important; border-right-color: var(--line) !important; }
.mobile-menu .mm-header { border-bottom-color: var(--line) !important; }
.mobile-menu .logo { color: var(--text-strong) !important; }
.mm-search { background: var(--bg-soft) !important; border-color: var(--line) !important; }
.mm-search input { color: var(--text-strong) !important; }
.mm-search input::placeholder { color: var(--text-faint) !important; }
.mm-search svg { stroke: var(--text-muted) !important; }

/* Hero illustration tweaks for dark mode (so the gun is still visible) */
body.theme-negative .illo svg path[fill="#5b6b7a"] { fill: #8a96a3 !important; }
body.theme-negative .illo svg text { fill: #c8d0d8 !important; }

/* Background card hover doesn't fight theme */
.std:hover, .midcard:hover { background: var(--bg-soft) !important; }

/* ============ GLOBAL FONT FAMILY (toggleable) ============ */
body.font-serif { --font-display: "Source Serif 4", Georgia, serif; }
body.font-sans  { --font-display: "Inter", "Helvetica Neue", Arial, sans-serif; }

/* Apply --font-display to ALL text surfaces — !important to beat the
   inline font-family declarations sprinkled throughout the legacy CSS */
body.font-serif,
body.font-sans,
body.font-serif .hero h1,  body.font-sans .hero h1,
body.font-serif .hero .deck, body.font-sans .hero .deck,
body.font-serif .midcard h2, body.font-sans .midcard h2,
body.font-serif .std h3,    body.font-sans .std h3,
body.font-serif .midcard .body, body.font-sans .midcard .body,
body.font-serif .std .body, body.font-sans .std .body,
body.font-serif .col-label, body.font-sans .col-label,
body.font-serif .book-title, body.font-sans .book-title,
body.font-serif .sidebar-right h4, body.font-sans .sidebar-right h4,
body.font-serif .timeline-headline, body.font-sans .timeline-headline,
body.font-serif .archive-item, body.font-sans .archive-item,
body.font-serif .panel-title, body.font-sans .panel-title,
body.font-serif .calendar-week-event-card-title, body.font-sans .calendar-week-event-card-title,
body.font-serif .byline-info .author, body.font-sans .byline-info .author,
body.font-serif .byline-info .role, body.font-sans .byline-info .role,
body.font-serif .byline-sm, body.font-sans .byline-sm,
body.font-serif .byline-row .meta .name, body.font-sans .byline-row .meta .name,
body.font-serif .com, body.font-sans .com {
    font-family: var(--font-display) !important;
}

/* ============ GLOBAL FONT SIZE SCALE (slider-driven) ============
   Each text surface is given a base size with !important so the slider
   can override the legacy hardcoded sizes elsewhere in the CSS. */
body { font-size: calc(14px * var(--font-scale, 1)) !important; }
.hero h1 { font-size: calc(56px * var(--font-scale, 1)) !important; }
.hero .deck { font-size: calc(26px * var(--font-scale, 1)) !important; }
.midcard h2 { font-size: calc(28px * var(--font-scale, 1)) !important; }
.std h3 { font-size: calc(20px * var(--font-scale, 1)) !important; }
.std .body, .midcard .body { font-size: calc(15px * var(--font-scale, 1)) !important; }
.byline-info .author { font-size: calc(14px * var(--font-scale, 1)) !important; }
.byline-info .role,
.byline-sm,
.byline-row .meta .name { font-size: calc(12px * var(--font-scale, 1)) !important; }
.col-label { font-size: calc(12px * var(--font-scale, 1)) !important; }
.sidebar-right h4 { font-size: calc(22px * var(--font-scale, 1)) !important; }
.book-title { font-size: calc(28px * var(--font-scale, 1)) !important; }
.tags li { font-size: calc(14px * var(--font-scale, 1)) !important; }
.critics-pick li { font-size: calc(13px * var(--font-scale, 1)) !important; }
.timeline-headline { font-size: calc(16px * var(--font-scale, 1)) !important; }
.cat-item { font-size: calc(14px * var(--font-scale, 1)) !important; }
.more-item { font-size: calc(13px * var(--font-scale, 1)) !important; }
.weather { font-size: calc(13px * var(--font-scale, 1)) !important; }

/* Responsive overrides keep the *base* size, slider still scales them */
@media (max-width: 1280px) {
    .hero h1 { font-size: calc(44px * var(--font-scale, 1)) !important; }
    .hero .deck { font-size: calc(22px * var(--font-scale, 1)) !important; }
}
@media (max-width: 1024px) {
    .hero h1 { font-size: calc(40px * var(--font-scale, 1)) !important; }
    .hero .deck { font-size: calc(22px * var(--font-scale, 1)) !important; }
    .col-label { font-size: calc(14px * var(--font-scale, 1)) !important; }
}
@media (max-width: 640px) {
    .hero h1 { font-size: calc(30px * var(--font-scale, 1)) !important; }
    .hero .deck { font-size: calc(18px * var(--font-scale, 1)) !important; }
}

.footer-mini {
    font-family: "Inter", sans-serif;
    font-size: 11px; color: var(--text-faint);
    margin-top: 60px; padding-top: 20px;
}

/* ============ MAIN ============ */
.main {
    display: grid;
    grid-template-columns: 2.1fr 1fr 1fr 1fr;
    border-right: 1px solid var(--line);
    height: 100%;
    overflow: hidden;
}

.column {
    border-right: 1px solid var(--line);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}
.column:last-child { border-right: none; }
.column::-webkit-scrollbar { width: 6px; }
.column::-webkit-scrollbar-track { background: transparent; }
.column::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
.column::-webkit-scrollbar-thumb:hover { background: #aaa; }

.col-label {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 5;
}
.column-body { flex: 1; }

/* ---- Card primitives ---- */
.card {
    padding: 16px 18px 22px;
    border-bottom: 1px solid var(--line);
    position: relative;
    animation: fadeUp 0.35s ease both;
}
.card:last-child { border-bottom: none; }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    font-family: "Inter", sans-serif; font-size: 12px; margin-bottom: 12px;
}
.timestamp { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.timestamp .pip { width: 6px; height: 6px; border-radius: 50%; background: #1a1a1a; display: inline-block; }
.timestamp .pip.multi {
    width: auto; height: auto; background: transparent;
    display: inline-flex; gap: 3px;
}
.timestamp .pip.multi i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.com { color: var(--text-faint); font-weight: 400; font-size: 12px; }

.t-blue   { color: #1f8fff; }
.t-pink   { color: #ff3b6b; }
.t-yellow { color: #d4a017; }
.t-green  { color: #2ea043; }

.hero h1 {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700; font-size: 56px; line-height: 1.04;
    letter-spacing: -0.012em; color: #000; margin-bottom: 22px;
}
.hero .deck {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 26px; line-height: 1.3; color: #1a1a1a;
    font-weight: 400; margin-bottom: 28px;
}
.byline { display: flex; align-items: center; gap: 12px; font-family: "Inter", sans-serif; }
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #c9b59a, #8a7960);
    flex: 0 0 38px; overflow: hidden; position: relative;
}
.avatar::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 38%, #f1d9b8 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 95%, #6b4f30 0 50%, transparent 51%);
}
.byline-info .author { font-size: 14px; font-weight: 600; color: #111; }
.byline-info .role { font-size: 12px; color: #777; margin-top: 2px; }

.midcard h2 {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700; font-size: 28px; line-height: 1.1;
    color: #000; margin-bottom: 16px; letter-spacing: -0.005em;
}
.midcard .body { font-size: 16px; line-height: 1.45; color: #1a1a1a; margin-bottom: 18px; }
.std h3 {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700; font-size: 20px; line-height: 1.15;
    margin-bottom: 12px; color: #000;
}
.std .body { font-size: 14px; line-height: 1.45; color: #2a2a2a; margin-bottom: 14px; }
.byline-sm { font-family: "Inter", sans-serif; font-size: 12px; color: #555; }
.byline-sm .name { font-weight: 600; color: #111; }
.byline-row { display: flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; }
.avatar-sm {
    width: 28px; height: 28px; border-radius: 50%;
    flex: 0 0 28px;
    background: linear-gradient(135deg, #b39577, #6e573d);
    position: relative; overflow: hidden;
}
.avatar-sm::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 38%, #e8caa6 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 95%, #5a4225 0 50%, transparent 51%);
}
.byline-row .meta { font-size: 11px; color: #666; line-height: 1.3; }
.byline-row .meta .name { font-weight: 600; color: #111; font-size: 12px; }

.hero-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
}
.hero-secondary-grid .card {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.hero-secondary-grid .card:nth-child(2n) { border-right: none; }

.illo { position: relative; height: 130px; margin-top: 4px; margin-bottom: 8px; overflow: visible; }
.illo svg { position: absolute; right: -8px; top: -10px; width: 150px; height: 150px; }

/* Load more — DESKTOP ONLY */
.load-more-wrap { padding: 24px 18px 36px; text-align: center; }
.load-more-btn {
    font-family: "Inter", sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em; text-transform: uppercase;
    background: #fff; border: 1px solid #000; color: #000;
    padding: 11px 22px; border-radius: 0;
    cursor: pointer; transition: all 0.15s ease;
    width: 100%; max-width: 220px;
}
.load-more-btn:hover { background: #000; color: #fff; }
.load-more-btn:disabled { opacity: 0.4; cursor: default; }
.load-more-btn:disabled:hover { background: #fff; color: #000; }
.load-more-count {
    display: block; font-family: "Inter", sans-serif;
    font-size: 11px; color: #999; margin-top: 8px;
    font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* Article-card click affordance — title gets pointer + hover underline */
.card.hero h1,
.card.midcard h2,
.card.std h3 {
    cursor: pointer;
    transition: opacity 0.15s;
}
.card.hero h1:hover,
.card.midcard h2:hover,
.card.std h3:hover {
    opacity: 0.7;
}

/* RIGHT SIDEBAR */
.sidebar-right {
    background: #f5f5f5; padding: 0;
    border-left: 1px solid var(--line);
    height: 100%; overflow-y: auto;
}

/* Auto-collapse — when the admin removes every widget from the home
   sidebar, the <aside> renders empty (no children inside). The
   `:has(:empty)` pair below detects that case and re-flows the
   layout grid to 2 columns, restoring the full main width.

   The same pattern is used for the tag and archive sidebars in their
   own CSS files. */
.sidebar-right--home:empty {
    display: none;
}
.layout:has(.sidebar-right--home:empty) {
    grid-template-columns: 200px 1fr;
}
@media (max-width: 1280px) {
    .layout:has(.sidebar-right--home:empty) {
        grid-template-columns: 180px 1fr;
    }
}
.sidebar-right .panel {
    padding: 18px 18px 22px;
    border-bottom: 1px solid #e0e0e0;
}
.sidebar-right h4 {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700; font-size: 22px; color: #000;
    margin-bottom: 14px; letter-spacing: -0.005em;
}
.tags {
    font-family: "Inter", sans-serif;
    font-size: 14px; line-height: 1.85; font-weight: 500; color: #1a1a1a;
}
.tags li { list-style: none; cursor: pointer; }
.tags li:hover { color: #000; text-decoration: underline; }

.book-tag { font-family: "Inter", sans-serif; font-size: 12px; color: #777; margin-bottom: 8px; }
.book-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700; font-size: 28px; color: #000;
    margin-bottom: 16px; letter-spacing: -0.005em;
}
.book-cover {
    aspect-ratio: 4/3; background: #f3f3f3; border: 1px solid #e0e0e0;
    margin-bottom: 14px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.book-cover svg { width: 80%; height: 80%; }
.book-author { display: flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; }
.book-author .meta { font-size: 11px; color: #666; line-height: 1.3; }
.book-author .meta .name { font-weight: 600; color: #111; font-size: 12px; }

.critics-pick li {
    list-style: none; font-family: "Inter", sans-serif;
    padding: 6px 0; font-size: 13px; color: #1a1a1a;
    border-bottom: 1px dashed #e0e0e0;
}
.critics-pick li:last-child { border-bottom: none; }
.critics-pick li::before { content: "‘"; }
.critics-pick li::after { content: "’"; }

.full-cal {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 18px;
    font-family: "Inter", sans-serif; font-size: 13px; color: #333;
    cursor: pointer;
}
.full-cal .chev {
    width: 10px; height: 10px;
    border-right: 1.5px solid #333; border-bottom: 1.5px solid #333;
    transform: rotate(45deg); margin-bottom: 2px;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ BREAKPOINTS ============
   Desktop:  ≥ 1281px → 4 columns, full layout, per-column scroll
   Compact:  1025–1280px → still 4 cols, slimmer sidebars
   Tablet:   641–1024px → 2 columns, natural document scroll, sidebars hidden
   Mobile:   ≤ 640px   → 1 column, natural document scroll
============================================================ */

/* Compact desktop tweaks */
@media (max-width: 1280px) {
    .layout { grid-template-columns: 180px 1fr 240px; }
    .main { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
    .hero h1 { font-size: 44px; }
    .hero .deck { font-size: 22px; }
}

/* TABLET: 641–1024px → 2 columns side by side, natural scroll */
@media (max-width: 1024px) {
    html, body { overflow: auto; height: auto; }
    .layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .sidebar-left, .sidebar-right { display: none; }
    .main {
        /* 2 column grid: hero spans both, then 3 secondary cols pair up */
        grid-template-columns: 1fr 1fr;
        height: auto;
        overflow: visible;
    }
    /* Hero column takes the full width on top */
    .column[data-column="relevant"] {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .column {
        height: auto;
        overflow: visible;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    /* Right edge of every other column has no right border (pair boundary) */
    .column[data-column="hour"]  { border-right: 1px solid var(--line); }
    .column[data-column="day"]   { border-right: none; }
    .column[data-column="week"]  { border-right: 1px solid var(--line); grid-column: 1 / -1; }
    /* "last 72 hours" full width below the pair, like a footer row */

    .col-label {
        position: sticky; top: var(--topbar-h);
        background: var(--bg);
        font-weight: 600; font-size: 14px; color: var(--text-strong);
        padding: 14px 18px 12px;
        text-transform: uppercase; letter-spacing: 0.04em;
        z-index: 10;
    }
    .hero h1 { font-size: 40px; }
    .hero .deck { font-size: 22px; }
    .hero-secondary-grid { grid-template-columns: 1fr 1fr; }
    .hero-secondary-grid .card:nth-child(2n) { border-right: none; }

    /* No per-column scroll, no Load More on tablet/mobile */
    .load-more-wrap { display: none; }
    .feed-slot .card { display: none; }
    .feed-slot .card.is-mobile-visible { display: block; }

    /* "last 72 hours" row: when full width, allow cards to flow in 2 cols */
    .column[data-column="week"] .feed-slot {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .column[data-column="week"] .feed-slot .card:nth-child(2n) {
        border-left: 1px solid var(--line);
    }

    /* Topbar dropdown panels become full width */
    .panel-columnists, .panel-search, .panel-archive {
        width: 100%;
        max-width: 100vw;
        max-height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
    }
    .timeline-sidebar,
    .notif-sidebar {
        width: 60vw;
        min-width: 380px;
        max-width: 100%;
    }
    /* Hide topbar search button — search lives in mobile menu */
    .search-wrap { display: none !important; }
    /* Show hamburger button in topbar */
    .btn-hamburger { display: flex !important; }
}

/* MOBILE: ≤ 640px → 1 column, sidebars hidden, simplified layout */
@media (max-width: 640px) {
    .main {
        grid-template-columns: 1fr;
    }
    .column,
    .column[data-column="relevant"],
    .column[data-column="hour"],
    .column[data-column="day"],
    .column[data-column="week"] {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .hero-secondary-grid { grid-template-columns: 1fr; }
    .hero-secondary-grid .card,
    .hero-secondary-grid .card:nth-child(2n) {
        border-right: none;
    }
    .column[data-column="week"] .feed-slot {
        grid-template-columns: 1fr;
    }
    .column[data-column="week"] .feed-slot .card:nth-child(2n) {
        border-left: none;
    }

    .topbar .icons { gap: 10px; }
    .topbar .clock { font-size: 12px; margin-right: 6px; }
    .hero h1 { font-size: 30px; }
    .hero .deck { font-size: 18px; }
    .card { padding: 14px 16px 18px; }

    .panel-archive { padding: 18px; }
    .archive-modes { gap: 6px; }
    .archive-mode { padding-left: 0; font-size: 12px; }
    /* No mobile: ocultar track vertical e handle — apenas nomes ficam visíveis */
    .archive-col {
        padding-right: 0;
    }
    .archive-col::before { display: none; }
    .archive-col .handle { display: none; }
    .archive-col-inner {
        right: 0;
        align-items: flex-start;
        padding-left: 8px;
    }
    .archive-col[data-col="year"] .arrow { display: none; }
    .columnists-grid { grid-template-columns: 1fr; }
    .timeline-sidebar,
    .notif-sidebar { width: 100%; min-width: 0; }
    /* Mobile menu narrower */
    .mobile-menu { width: 280px; }
}

/* ====================================================================
   ARCHIVE FILTER BANNER

   Sits at the top of listing pages when a date filter is active.
   Subtle but unmissable; visually anchored to the page chrome.
==================================================================== */

.archive-filter-banner {
    background: #fff8e1;
    border: 1px solid #f5d56b;
    border-radius: 4px;
    padding: 10px 16px;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    color: #5a4a1a;
}
.archive-filter-banner-label { flex: 1; }
.archive-filter-banner-label strong {
    font-weight: 600;
    color: #1a1a1a;
}
.archive-filter-banner-clear {
    background: #1a1a1a;
    color: white;
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background 0.15s;
}
.archive-filter-banner-clear:hover { background: #333; }

/* When the negative (dark) theme is active, recolour for legibility */
body.theme-negative .archive-filter-banner {
    background: #2a2410;
    border-color: #5a4a1a;
    color: #f5d56b;
}
body.theme-negative .archive-filter-banner-label strong { color: #fff; }

/* ====================================================================
   ARCHIVE PANEL — action buttons & clickable result bubbles

   Sit inside the .panel-archive which has a black background and white
   text. Styling is tuned for that context.
==================================================================== */

.archive-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    justify-content: flex-end;
    align-items: center;
}

.archive-btn {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 9px 18px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    line-height: 1;
}

/* "Show all" — ghost button, white outline on dark */
.archive-btn-clear {
    background: transparent;
    color: #d4d4d4;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.archive-btn-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* "Apply filter" — solid white button (high contrast against dark panel) */
.archive-btn-apply {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #fff;
}
.archive-btn-apply:hover {
    background: #f5d56b;
    color: #1a1a1a;
    border-color: #f5d56b;
}
.archive-btn-apply[disabled],
.archive-btn-apply.is-disabled {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.4);
    border-color: transparent;
    cursor: not-allowed;
}
.archive-btn-apply[disabled]:hover,
.archive-btn-apply.is-disabled:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.4);
}

/* Result-bubble is now a clickable button */
.results-bullets .result-bubble {
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s, border-color 0.12s, opacity 0.12s;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-weight: 600;
}
.results-bullets .result-bubble:hover:not([disabled]) {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.6);
}
.results-bullets .result-bubble.is-active {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.results-bullets .result-bubble[disabled],
.results-bullets .result-bubble.is-empty {
    opacity: 0.3;
    cursor: not-allowed;
}
.results-bullets .result-bubble.is-empty:hover {
    transform: none;
    border-color: transparent;
}

/* =================================================================
   ADVANCED SEARCH FILTER

   When a user drags one of the popover sliders above 0%, cards that
   don't match the filter get `.is-search-filtered-out` and disappear.
   We use display:none rather than visibility/opacity because we want
   layout to reflow (no gaps in the grid).

   When every card on the page is filtered out, JS injects an empty-
   state banner at the top of the feed so the user can reset.
================================================================= */
/* Hide cards regardless of which template-specific class they use. */
.is-search-filtered-out {
    display: none !important;
}

.adv-search-empty-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    margin: 14px 18px;
    background: var(--bg-soft, #f8f8f7);
    border: 1px solid var(--line, #e5e5e3);
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--text, #444);
}
.adv-search-empty-banner .adv-reset-btn {
    background: var(--text-strong, #1a1a1a);
    color: var(--bg, #fff);
    border: none;
    padding: 7px 14px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.adv-search-empty-banner .adv-reset-btn:hover {
    opacity: 0.9;
}

/* When the empty banner is on a dark theme, invert colors. */
body.theme-negative .adv-search-empty-banner {
    background: rgba(255,255,255,0.06);
    color: #e0e0e0;
    border-color: rgba(255,255,255,0.12);
}
body.theme-negative .adv-search-empty-banner .adv-reset-btn {
    background: #fff;
    color: #000;
}

/* The "more" button — it's a real link now, make sure cursor reflects that. */
.panel-search .more-btn {
    cursor: pointer;
}

/* =================================================================
   ACCESSIBILITY UTILITIES
================================================================= */
.screen-reader-text {
    /* WordPress-standard pattern: visually hidden but still announced
       by screen readers and keyboard users. */
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ============ ADMIN-ONLY INLINE PLUGIN NOTICE ============
   Rendered by masthead_render_plugin_notice() when a feature gate
   wants to tell the admin that a feature needs the masthead-core
   plugin. Visible only to manage_options users (PHP-guarded). */
.masthead-plugin-notice {
    display: block;
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid #ffb900;
    background: rgba(255, 185, 0, 0.06);
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
    color: var(--text-strong, #1a1a1a);
    line-height: 1.45;
}
.masthead-plugin-notice strong {
    color: #ad8004;
    margin-right: 4px;
}

/* ====================================================================
   FEATURED IMAGES — home page cards

   When a post has a featured image, the hero, midcard, and smallcard
   layouts grow an image block above the text content. Without an
   image, every card keeps the existing text-only layout — preserving
   the original NYT-style typography-first feel.

   Image sizes used:
     - hero:     masthead-feature  (900×600)
     - midcard:  masthead-card     (600×450)
     - smallcard: masthead-card    (600×450)

   Each variant gets a `--with-image` modifier class. The image link
   is wrapped in <a aria-hidden tabindex="-1"> so it doesn't double
   up keyboard / screen reader hits — the headline link is the
   canonical accessible anchor.
==================================================================== */

/* ---- HERO with image (column 1 lead) ---- */
.card.hero.hero--with-image {
    padding-top: 0;
}
.hero-image-link {
    display: block;
    margin: 0 -18px 18px;  /* break out of the card's 18px horizontal padding */
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;   /* matches masthead-feature 900×600 */
    object-fit: cover;
    transition: transform 0.4s ease;
}
.hero-image-link:hover .hero-image {
    transform: scale(1.02);
}
.hero-body {
    /* nothing — body now owns the card-header + title + deck + byline */
}
/* When image is present, slightly reduce title size so the visual
   hierarchy stays balanced — image is doing the heavy lifting */
.card.hero.hero--with-image h1 {
    font-size: 48px;
    margin-bottom: 18px;
}
.card.hero.hero--with-image .deck {
    font-size: 22px;
    margin-bottom: 24px;
}


/* ---- MIDCARD with image (column 1 secondary cards, 2 of them) ---- */
.card.midcard.midcard--with-image {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
}
.midcard-image-link {
    display: block;
    margin: -16px -18px 14px;  /* same breakout logic as hero */
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.midcard-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;       /* matches masthead-card 600×450 */
    object-fit: cover;
    transition: transform 0.4s ease;
}
.midcard-image-link:hover .midcard-image {
    transform: scale(1.02);
}
.card.midcard.midcard--with-image h2 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.18;
}
.card.midcard.midcard--with-image .body {
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 1.45;
}


/* ---- SMALLCARD with image (columns 2-4) ---- */
.card.smallcard.smallcard--with-image {
    padding-top: 16px;
}
.smallcard-image-link {
    display: block;
    margin: -16px -18px 12px;
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.smallcard-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;      /* taller card ratio to keep columns compact */
    object-fit: cover;
    transition: transform 0.4s ease;
}
.smallcard-image-link:hover .smallcard-image {
    transform: scale(1.02);
}
.card.smallcard.smallcard--with-image h3 {
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 10px;
}


/* ---- MOBILE adjustments ---- */
@media (max-width: 1024px) {
    .card.hero.hero--with-image h1 {
        font-size: 36px;
    }
    .card.hero.hero--with-image .deck {
        font-size: 18px;
    }
    .card.midcard.midcard--with-image h2 {
        font-size: 20px;
    }
}
@media (max-width: 640px) {
    .card.hero.hero--with-image h1 {
        font-size: 28px;
        margin-bottom: 12px;
    }
    .card.hero.hero--with-image .deck {
        font-size: 16px;
        margin-bottom: 16px;
    }
}


/* ---- DARK / NEGATIVE THEME ---- */
[data-theme="dark"] .hero-image,
[data-theme="dark"] .midcard-image,
[data-theme="dark"] .smallcard-image,
[data-theme="negative"] .hero-image,
[data-theme="negative"] .midcard-image,
[data-theme="negative"] .smallcard-image {
    /* Slightly de-saturate images on dark variants so they don't
       feel like glowing patches on the dark canvas. */
    filter: saturate(0.85) brightness(0.95);
}


/* ====================================================================
   PAGINATION (.cat-pagination) — shared between category page 2+
   and tag archives. Lives here so neither template needs to enqueue
   the full category.css just for these ~50 lines.

   Markup: <nav class="cat-pagination">{paginate_links output}</nav>
==================================================================== */
.cat-pagination {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 40px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: "Inter", "Helvetica Neue", sans-serif;
}
.cat-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--text-strong);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cat-pagination .page-numbers:hover {
    background: var(--text-strong);
    color: var(--bg);
    border-color: var(--text-strong);
}
.cat-pagination .page-numbers.current {
    background: var(--text-strong);
    color: var(--bg);
    border-color: var(--text-strong);
}
.cat-pagination .page-numbers.dots {
    border: none;
    color: var(--text-faint);
    padding: 8px 4px;
}
.cat-pagination .prev,
.cat-pagination .next {
    font-weight: 600;
}
@media (max-width: 640px) {
    .cat-pagination {
        padding: 8px 20px 40px;
        gap: 4px;
    }
    .cat-pagination .page-numbers {
        padding: 6px 10px;
        font-size: 12px;
    }
}