/* ==========================================================================
   Base: design tokens and every component that both layouts share.
   The layout files under styles/mobile and styles/widescreen only arrange
   these pieces; all the colour, type and component work lives here.

   The palette, the type and the hard 0px corners come from mpakt.dev, so a
   reader arriving from the main site recognises where they are. That design
   is dark by nature; the light theme here is the same system inverted rather
   than a different one, because the theme switch has to keep working.
   ========================================================================== */

:root {
    --font-scale: 1;

    /* mPAKT sets everything in mono and reserves the display face for
       headlines. Both fall back to faces that actually exist on the machine,
       since we load no webfonts -- a news page should not wait on one. */
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas,
        "Liberation Mono", "Courier New", monospace;
    --font-display: "Space Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;

    --font-sans: var(--font-mono);
    --font-serif: var(--font-display);

    /* Dark is the default, matching mpakt.dev. */
    --bg: #000000;
    --bg-sunken: #030303;
    --surface: #070707;
    --surface-hover: #0d0d0d;
    --text: #ededed;
    --text-strong: #ffffff;
    --text-muted: #9a9a9a;
    --text-faint: #5a5a5a;
    --text-ghost: #3a3a3a;
    --border: #1c1c1c;
    --border-strong: #333333;

    --accent: #00e08a;
    --accent-soft: rgba(0, 224, 138, 0.14);
    --accent-ink: #000000;
    --like: #ff5f8f;
    --like-soft: rgba(255, 95, 143, 0.14);
    --share: #00e08a;
    --share-soft: rgba(0, 224, 138, 0.14);

    /* Nothing on mpakt.dev is rounded, and the borders do the work that
       shadows would elsewhere. Kept as tokens so the whole system can be
       softened from one place if that ever changes. */
    --radius: 0px;
    --radius-sm: 0px;
    --radius-pill: 0px;

    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: 0 30px 80px rgba(0, 0, 0, 0.7);

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    --step: 4px;
    --gap: 20px;
    --card-gap: 1px;
    --content-width: 1160px;
    --gutter: 1.75rem;

    color-scheme: dark;
}

/* The light theme. Same geometry, same accent, paper instead of ink -- for
   readers who cannot use a dark screen comfortably. */
:root[data-theme="light"] {
    --bg: #ffffff;
    --bg-sunken: #f4f4f2;
    --surface: #fafaf8;
    --surface-hover: #f1f1ee;
    --text: #14161a;
    --text-strong: #000000;
    --text-muted: #55585e;
    --text-faint: #7d818a;
    --text-ghost: #b3b6bc;
    --border: #e0e0dc;
    --border-strong: #c4c4bf;

    --accent: #007d4c;
    --accent-soft: rgba(0, 125, 76, 0.1);
    --accent-ink: #ffffff;
    --like: #c11e50;
    --like-soft: rgba(193, 30, 80, 0.1);
    --share: #007d4c;
    --share-soft: rgba(0, 125, 76, 0.1);

    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
        --bg: #ffffff;
        --bg-sunken: #f4f4f2;
        --surface: #fafaf8;
        --surface-hover: #f1f1ee;
        --text: #14161a;
        --text-strong: #000000;
        --text-muted: #55585e;
        --text-faint: #7d818a;
        --text-ghost: #b3b6bc;
        --border: #e0e0dc;
        --border-strong: #c4c4bf;

        --accent: #007d4c;
        --accent-soft: rgba(0, 125, 76, 0.1);
        --accent-ink: #ffffff;
        --like: #c11e50;
        --like-soft: rgba(193, 30, 80, 0.1);
        --share: #007d4c;
        --share-soft: rgba(0, 125, 76, 0.1);

        color-scheme: light;
    }
}

:root[data-density="compact"] {
    --gap: 14px;
    --card-gap: 1px;
}

/* --------------------------------------------------------------- reset */

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: calc(16px * var(--font-scale));
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 650;
}

p {
    margin: 0;
}

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

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

img {
    max-width: 100%;
    display: block;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--surface);
    box-shadow: var(--shadow-2);
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip:focus {
    left: 0;
}

.muted {
    color: var(--text-muted);
    font-size: 0.875em;
}


/* --------------------------------------------------------------- icons */

/* Every icon on the site is Lucide artwork inlined as SVG. Sized in ems so
   it scales with whatever text it sits beside. */
.icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    stroke-width: 2;
    vertical-align: -0.125em;
}

.icon--lg {
    width: 1.4em;
    height: 1.4em;
}

/* -------------------------------------------------------------- topbar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--border);
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    margin: 0 auto;
    padding: 10px 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
}

.brand__name {
    font-size: 1.05rem;
    white-space: nowrap;
}

.tabs {
    display: flex;
    min-width: 0;
    gap: 2px;
    padding: 3px;
    background: var(--bg-sunken);
    border-radius: var(--radius-pill);
}

.tab {
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    font-weight: 550;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

.tab:hover {
    color: var(--text);
}

.tab.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-1);
}

.icon-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.icon-button:hover {
    background: var(--bg-sunken);
    color: var(--text);
}

/* ---------------------------------------------------------------- head */

.column__head {
    padding: 26px 0 16px;
}

.column__head h1 {
    font-size: 1.7rem;
    font-family: var(--font-serif);
    font-weight: 600;
}

.column__head .muted {
    margin-top: 4px;
}

/* ---------------------------------------------------------------- card */

.feed {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.card {
    position: relative;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.18s ease, border-color 0.18s ease,
        transform 0.18s ease, opacity 0.22s ease;
    animation: rise 0.32s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
}

/* A left edge that colours in as the reader gives stronger signals. */
.card::before {
    content: "";
    position: absolute;
    inset: 14px auto 14px 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: transparent;
    transition: background 0.2s ease;
}

.card.is-liked::before {
    background: var(--like);
}

.card.is-shared::before {
    background: var(--share);
}

.card.is-read .card__title {
    color: var(--text-muted);
}

.card.is-dismissed {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

.card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 0.76rem;
    color: var(--text-faint);
}

/* A long publication name truncates rather than pushing the match badge off
   the edge of a narrow card. */
.card__source {
    min-width: 0;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.card__time::before {
    content: "·";
    margin-right: 8px;
}

.card__score {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.card__title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.011em;
    text-wrap: balance;
    transition: color 0.15s ease;
}

.card__title:hover {
    color: var(--accent);
}

/* Text and thumbnail sit side by side on wide screens and stack on narrow
   ones, so the card never grows taller than the content it holds. */
.card__main {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.card__text {
    flex: 1;
    min-width: 0;
}

.card__media {
    flex-shrink: 0;
    width: 100%;
    margin-top: 12px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    aspect-ratio: 16 / 9;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card:hover .card__media img {
    transform: scale(1.02);
}

.card__body {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:root[data-density="compact"] .card {
    padding: 13px 15px;
}

:root[data-density="compact"] .card__media,
:root[data-density="compact"] .card__body {
    display: none;
}

:root[data-density="compact"] .card__reasons {
    display: none;
}

/* --------------------------------------------------------------- chips */

.card__reasons,
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.chip {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------- actions */

.card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 550;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease,
        border-color 0.15s ease;
}

.action:hover {
    background: var(--bg-sunken);
    color: var(--text);
}

/* Sharing is the outcome worth the most, so it is the one action that reads
   as a primary control rather than a quiet one. */
.action--share {
    margin-right: auto;
    border-color: var(--border);
    color: var(--share);
}

.action--share:hover {
    background: var(--share-soft);
    border-color: transparent;
}

.action--like:hover,
.action--like[aria-pressed="true"] {
    background: var(--like-soft);
    color: var(--like);
}

/* A liked story fills the heart in; an unliked one leaves it outlined. */
.action--like[aria-pressed="true"] .icon {
    fill: currentColor;
}

.action--dislike[aria-pressed="true"] {
    background: var(--bg-sunken);
    color: var(--text);
}

.action--dislike[aria-pressed="true"] .icon {
    fill: currentColor;
}

.action--dislike .action__label:empty {
    display: none;
}

.action.is-bursting .icon {
    animation: pop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes pop {
    35% {
        transform: scale(1.45);
    }

    70% {
        transform: scale(0.93);
    }

    100% {
        transform: scale(1);
    }
}

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

/* -------------------------------------------------------------- status */

.feed-status {
    padding: 22px 4px 40px;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.85rem;
}

.feed-status.is-busy::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 8px;
    vertical-align: -1px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------ card tiers */

/* The ranking is expressed only as prominence. The top story gets the most
   room, and every tier below it gets less. */

.lede {
    display: grid;
    gap: var(--card-gap);
    margin-bottom: var(--card-gap);
}

.card--hero .card__title {
    font-size: 1.9rem;
    line-height: 1.14;
    letter-spacing: -0.022em;
}

.card--hero .card__body {
    font-size: 1rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.card--hero .card__media {
    aspect-ratio: 16 / 9;
}

.card--lead .card__title {
    font-size: 1.24rem;
}

.card--standard .card__title {
    font-size: 1.1rem;
}

/* Deep in the ranking a story is a headline and nothing more. */
.card--compact {
    padding: 12px 16px;
}

.card--compact .card__title {
    font-size: 0.98rem;
    line-height: 1.35;
}

.card--compact .card__meta {
    margin-bottom: 4px;
}

.card--compact .card__actions {
    margin-top: 9px;
    padding-top: 8px;
}

.card--compact .action__label {
    display: none;
}

.card--compact .action--share .action__label {
    display: inline;
}

/* ---------------------------------------------------------------- rail */

.rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card--panel h2 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    font-weight: 650;
}

.card--panel p {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.rail__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
    font-weight: 550;
    color: var(--accent);
}

.rail__link:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ ads */

/* Slots reserve their space whether or not an ad ever fills them, so the
   page never reflows when one loads. */
.ad {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}

.ad__placeholder {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.ad--leaderboard {
    width: 100%;
    min-height: 90px;
    margin-bottom: var(--card-gap);
}

.ad--rectangle {
    width: 100%;
    min-height: 250px;
}

.ad--halfpage {
    width: 100%;
    min-height: 600px;
}

.ad--infeed {
    width: 100%;
    min-height: 140px;
    margin: 4px 0;
}

/* --------------------------------------------------------------- prose */

.prose {
    max-width: 68ch;
    padding: 30px 0 60px;
}

.prose h1 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.prose__lead {
    margin-top: 10px;
    font-size: 1.06rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.prose__meta {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--text-faint);
}

.prose h2 {
    margin-top: 34px;
    font-size: 1.16rem;
    font-family: var(--font-serif);
    font-weight: 600;
}

.prose p,
.prose ul {
    margin-top: 12px;
    color: var(--text);
    line-height: 1.68;
}

.prose ul {
    padding-left: 0;
}

.prose li {
    position: relative;
    margin-top: 9px;
    padding-left: 20px;
    line-height: 1.6;
}

.prose li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--bg-sunken);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
}

.table-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table th,
.table td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.table th {
    background: var(--bg-sunken);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.table tr:last-child td {
    border-bottom: 0;
}

/* ---------------------------------------------------------------- gate */

.gate {
    display: grid;
    place-items: center;
    min-height: 78vh;
    padding: 40px 20px 60px;
}

.gate__card {
    width: min(480px, 100%);
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    text-align: center;
}

.gate__mark {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: var(--accent);
    color: #fff;
    font-size: 24px;
}

.gate__card h1 {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 600;
}

.gate__lead {
    margin-top: 8px;
    color: var(--text-muted);
}

.gate__points {
    margin: 22px 0;
    text-align: left;
}

.gate__points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: 0.89rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.gate__points .icon {
    margin-top: 2px;
    font-size: 1.1em;
    color: var(--accent);
}

.gate__legal {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--text-faint);
}

.gate__legal a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.is-gated .topbar .tabs,
body.is-gated .topbar__actions {
    display: none;
}

/* -------------------------------------------------------------- footer */

.footer {
    margin-top: 40px;
    border-top: 1px solid var(--border);
    background: var(--bg-sunken);
}

.footer__inner {
    display: grid;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 20px 26px;
}

.footer__about p {
    max-width: 56ch;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.brand--footer {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
}

.footer__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.footer__links a {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.footer__links a:hover {
    color: var(--text);
    text-decoration: underline;
}

.footer__legal {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 20px 30px;
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------- panel */

.panel[hidden] {
    display: none;
}

.panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
}

.panel__scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 12, 16, 0.45);
    backdrop-filter: blur(3px);
    animation: fade 0.2s ease;
}

@keyframes fade {
    from {
        opacity: 0;
    }
}

.panel__sheet {
    position: relative;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.panel__head h2 {
    font-size: 1.05rem;
}

.panel__body {
    flex: 1;
    /* Without this a flex item refuses to shrink below its content height,
       and the sheet grows past the viewport instead of scrolling. */
    min-height: 0;
    overflow-y: auto;
    padding: 4px 20px 0;
}

/* The footer lives inside the scrolling form, so it is pinned rather than
   scrolled away: Save is always reachable. */
.panel__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    margin: 0 -20px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.field-group {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

.field-group:last-of-type {
    border-bottom: 0;
}

.field-group h3 {
    margin-bottom: 12px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.field > span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.field select,
.field input[type="text"] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    transition: border-color 0.15s ease;
}

.field select:hover,
.field input[type="text"]:hover {
    border-color: var(--text-faint);
}

.field input[type="range"] {
    accent-color: var(--accent);
}

.hint {
    margin-top: 4px;
    color: var(--text-faint);
    font-size: 0.76rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------- switch */

.switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__track {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 21px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    transition: background 0.18s ease;
}

.switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-1);
    transition: transform 0.18s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.switch input:checked + .switch__track {
    background: var(--accent);
}

.switch input:checked + .switch__track .switch__thumb {
    transform: translateX(15px);
}

.switch input:focus-visible + .switch__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.switch__label {
    font-size: 0.88rem;
}

/* -------------------------------------------------------------- button */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.88rem;
    font-weight: 560;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.button:hover {
    background: var(--bg-sunken);
}

.button--primary {
    flex: 1;
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}

.button--primary:hover {
    filter: brightness(1.07);
}

.button--primary:disabled {
    opacity: 0.6;
    cursor: progress;
}

.button--small {
    padding: 6px 12px;
    font-size: 0.83rem;
}

.button--block {
    width: 100%;
    margin-top: 6px;
}

.link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: inherit;
    font-weight: 550;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ----------------------------------------------------------- auth panel */

.panel--center {
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.panel__sheet--card {
    width: min(400px, 100%);
    max-height: 92vh;
    border-radius: var(--radius);
    animation: rise-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
    }
}

.auth__lead {
    margin: 14px 0 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.auth__switch {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.notice--error {
    margin-bottom: 12px;
    background: var(--like-soft);
    color: var(--like);
    font-weight: 550;
}

.account__email {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 12px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    font-size: 0.9rem;
    word-break: break-all;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* --------------------------------------------------------------- toast */

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 70;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    background: var(--text);
    color: var(--bg);
    font-size: 0.85rem;
    font-weight: 550;
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translate(-50%, 14px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------------------------------------------------------- story page */

.crumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    font-size: 0.8rem;
    color: var(--text-faint);
}

.crumbs a {
    color: var(--accent);
}

.crumbs a:hover {
    text-decoration: underline;
}

.story__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 14px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.story__outlets {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 550;
}

.story__time {
    color: var(--text-faint);
}

/* The machine-written disclosure is a standing part of the page, not a
   dismissible banner: it appears above the copy, every time. */
.story__disclosure {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.story__disclosure .icon {
    margin-top: 2px;
    color: var(--accent);
    font-size: 1.05em;
}

.story__cover {
    margin: 20px 0 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-sunken);
}

.story__cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.story__cover figcaption {
    padding: 8px 2px 0;
    color: var(--text-faint);
    font-size: 0.75rem;
}

.keypoints {
    margin-top: 26px;
    padding: 16px 18px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg-sunken);
}

.keypoints h2 {
    margin: 0 0 6px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    font-family: var(--font-sans);
}

.keypoints li {
    font-size: 0.92rem;
}

.story__body {
    margin-top: 22px;
    font-size: 1.04rem;
}

.story__body p {
    margin-top: 15px;
    line-height: 1.72;
}

.story__syndicated {
    padding-left: 14px;
    border-left: 2px solid var(--border-strong);
    color: var(--text-muted);
    font-style: italic;
}

.coverage {
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.coverage h2 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

/* --------------------------------------------------------- attribution */

.story__sources {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.story__sources ul {
    margin-top: 12px;
}

.source a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    margin-bottom: 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.source a:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
}

.source__name {
    flex-shrink: 0;
    max-width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--accent);
}

.source__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.source .icon {
    flex-shrink: 0;
    color: var(--text-faint);
    font-size: 0.9em;
}

.story__actions {
    margin-top: 26px;
}

.story__actions .card__actions {
    border-top: 0;
    padding-top: 0;
}

/* ------------------------------------------------------- related rail */

.rail__stories li + li {
    margin-top: 2px;
}

.rail__stories a {
    display: block;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.rail__stories li:first-child a {
    border-top: 0;
    padding-top: 4px;
}

.rail__source {
    display: block;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rail__title {
    display: block;
    margin-top: 3px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
}

.rail__stories a:hover .rail__title {
    color: var(--accent);
}

/* The source list is a set of link cards, not a bulleted list. */
.story__sources li::before,
.rail__stories li::before,
.keypoints li::before {
    display: none;
}

.keypoints li {
    padding-left: 0;
}

.keypoints li + li {
    margin-top: 7px;
}

/* A story page has a rail beside it, so the reading measure is centred in
   what is left rather than hugging the left edge. */
.story {
    max-width: 74ch;
    margin-inline: auto;
}

/* ==========================================================================
   mPAKT skin.
   Everything above builds the page; this layer makes it look like the rest
   of mpakt.dev. It is kept separate and last so the structural rules stay
   readable and a future change of house style is one file to rewrite.
   ========================================================================== */

/* ------------------------------------------------------------- backdrop */

/* The faint grid and the scanline wash are the two things that make the
   main site read as a terminal rather than a document. Both are decorative,
   both are pointer-transparent, and both are dropped for anyone who has
   asked for less motion or is printing. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.027) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.027) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(
        100% 60% at 50% 0%, #000 20%, transparent 80%);
    mask-image: radial-gradient(
        100% 60% at 50% 0%, #000 20%, transparent 80%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    /* Above everything, including open dialogs -- it is a wash over the whole
       screen, and it never intercepts a pointer. */
    z-index: 9999;
    pointer-events: none;
    opacity: 0.35;
    background: repeating-linear-gradient(
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 3px
    );
}

:root[data-theme="light"] body::before,
:root[data-theme="light"] body::after {
    display: none;
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] body::before,
    :root[data-theme="system"] body::after {
        display: none;
    }
}

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

/* --------------------------------------------------------------- type */

body {
    font-size: calc(14px * var(--font-scale));
    line-height: 1.6;
    font-feature-settings: "liga" 0;
}

h1,
h2,
h3,
.brand__name,
.card__title,
.queue__title {
    font-family: var(--font-display);
    letter-spacing: -0.035em;
    font-weight: 600;
    color: var(--text-strong);
}

/* The wide-tracked uppercase micro-label is the main site's signature. Every
   piece of secondary metadata here uses it. */
.card__source,
.card__time,
.ad__placeholder,
.queue__source,
.filing__tag,
.story__read,
.story__count,
.section-kicker,
.footer__legal,
.queue__hint,
.chip {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.muted,
.hint {
    color: var(--text-muted);
}

/* --------------------------------------------------------------- chrome */

.topbar {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.brand__mark {
    color: var(--accent);
    background: none;
    border: 1px solid var(--border);
}

.brand__name {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tab {
    border: 0;
    border-radius: 0;
    color: var(--text-faint);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    background: none;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.tab:hover {
    color: var(--text-strong);
    background: var(--surface-hover);
}

.tab.is-active {
    color: var(--text-strong);
    background: none;
    box-shadow: inset 0 -1px 0 var(--accent);
}

.icon-button,
.button {
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    transition: color 0.15s var(--ease), background 0.15s var(--ease),
        border-color 0.15s var(--ease);
}

.icon-button:hover,
.button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text-strong);
}

.button--primary {
    border-color: var(--text-strong);
    background: var(--text-strong);
    color: var(--bg);
}

.button--primary:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 24px var(--accent-soft);
}

/* ---------------------------------------------------------------- feed */

/* One hairline grid rather than a stack of floating cards: the gap between
   cards is the border, which is how the panels on mpakt.dev are built. */
.feed {
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
    transition: background 0.2s var(--ease);
}

.card:hover {
    background: var(--surface-hover);
    box-shadow: none;
    transform: none;
}

/* The accent hairline that appears along the top edge on hover. */
.card::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    border-radius: 0;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.2s var(--ease);
}

.card:hover::before,
.card:focus-within::before {
    opacity: 1;
}

.card.is-liked::before,
.card.is-shared::before {
    opacity: 1;
}

.card__source {
    color: var(--text-muted);
}

.card__title {
    letter-spacing: -0.03em;
}

.card__title:hover {
    color: var(--accent);
}

.card__media,
.card__media img {
    border-radius: 0;
}

.card__media {
    border: 1px solid var(--border);
}

.chip {
    border-radius: 0;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-faint);
    padding: 0.15rem 0.45rem;
}

.action {
    border-radius: 0;
    border: 1px solid transparent;
    background: none;
    color: var(--text-faint);
}

.action:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--text-strong);
}

.lede .card,
.card--hero {
    background: var(--surface);
}

.card--hero .card__title {
    letter-spacing: -0.045em;
}

/* ---------------------------------------------------------------- rail */

.card--panel {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: none;
}

.rail__link {
    border-radius: 0;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.rail__link:hover {
    color: var(--accent);
    background: none;
}

/* ----------------------------------------------------------------- ads */

.ad {
    border: 1px dashed var(--border);
    border-radius: 0;
    background: var(--bg-sunken);
    transition: min-height 0.2s var(--ease), opacity 0.2s var(--ease);
}

.ad__placeholder {
    color: var(--text-ghost);
}

/* A slot the network declined to fill. The page's ad runtime adds this once,
   after the first story has rendered, and it is not reconsidered: a slot
   still empty by then is not going to fill. Collapsed rather than merely
   hidden, so the layout closes up instead of leaving a gap. */
.ad--empty {
    display: none !important;
}

.ad--filled {
    border-style: solid;
    border-color: var(--border);
}

/* Until the check has run, a slot holds its space so nothing jumps when an
   ad arrives. Afterwards the reserved minimum is no longer needed. */
:root[data-ads-checked="1"] .ad--filled {
    min-height: 0;
}

/* -------------------------------------------------------------- story */

.story__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
    padding: 0.85rem 0;
    margin: 1rem 0 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.story__read,
.story__count {
    color: var(--text-faint);
}

.story__topics {
    margin-top: 1rem;
}

.story__disclosure {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: 0.75rem 0.9rem;
    border-left: 2px solid var(--accent);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.7;
}

.story__disclosure .icon {
    color: var(--accent);
    flex: 0 0 auto;
}

.story__cover {
    margin: 1.5rem 0;
    border: 1px solid var(--border);
}

.story__cover img {
    width: 100%;
    height: auto;
}

.story__cover figcaption {
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-faint);
    font-size: 0.7rem;
}

.keypoints {
    margin: 2rem 0;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

.keypoints h2 {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.keypoints li::before {
    content: "//";
    color: var(--accent);
    opacity: 0.6;
    margin-right: 0.5rem;
}

.story__syndicated {
    font-size: 1rem;
    line-height: 1.9;
}

.story__sources ul,
.coverage__list {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-top: 1rem;
}

.source a,
.coverage__list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    transition: background 0.15s var(--ease);
}

.source a:hover,
.coverage__list a:hover {
    background: var(--surface-hover);
}

.source__name,
.coverage__source {
    grid-column: 1;
    color: var(--accent);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.source__title,
.coverage__title {
    grid-column: 1;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.5;
}

.source__time {
    grid-column: 1;
    color: var(--text-faint);
    font-size: 0.66rem;
}

.source a .icon,
.coverage__list a .icon {
    grid-column: 2;
    grid-row: 1 / -1;
    color: var(--text-ghost);
}

.source a:hover .icon,
.coverage__list a:hover .icon {
    color: var(--accent);
}

/* Who filed when. A two-column ledger, oldest at the top. */
.filings {
    margin-top: 1rem;
    border: 1px solid var(--border);
}

.filing {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    background: var(--surface);
    font-size: 0.78rem;
}

.filing + .filing {
    border-top: 1px solid var(--border);
}

.filing__when {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.filing__who {
    color: var(--text);
}

.filing--first .filing__who {
    color: var(--text-strong);
}

.filing__tag {
    margin-left: auto;
    color: var(--accent);
    font-size: 0.6rem;
}

.story__context,
.story__also,
.story__filings,
.coverage {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.story__stamp {
    margin-top: 2rem;
    color: var(--text-ghost);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    color: var(--text-faint);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.crumbs a:hover {
    color: var(--accent);
}

/* --------------------------------------------------------- reading queue */

/* The rail on a story page is a queue the reader can work down without
   losing the article. It scrolls on its own inside a sticky column, so the
   article stays put while the list moves. */
.rail--queue .rail__sticky {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-height: calc(100vh - 104px);
}

.queue {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--border);
    background: var(--surface);
}

.queue__head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.queue__head h2 {
    font-size: 0.95rem;
}

.queue__hint {
    margin-top: 0.35rem;
    color: var(--text-faint);
}

.queue__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.queue__list::-webkit-scrollbar {
    width: 8px;
}

.queue__list::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

.queue__list::-webkit-scrollbar-track {
    background: transparent;
}

.queue__item + .queue__item,
.queue__ad,
.queue__ad + .queue__item {
    border-top: 1px solid var(--border);
}

.queue__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    transition: background 0.15s var(--ease);
}

.queue__link:hover {
    background: var(--surface-hover);
}

.queue__index {
    color: var(--text-ghost);
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    padding-top: 0.15rem;
}

.queue__link:hover .queue__index {
    color: var(--accent);
}

.queue__text {
    display: block;
    min-width: 0;
}

.queue__source {
    display: block;
    color: var(--text-muted);
    font-size: 0.62rem;
}

.queue__title {
    display: block;
    margin-top: 0.2rem;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.queue__link:hover .queue__title {
    color: var(--text-strong);
}

.queue__time {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-ghost);
    font-size: 0.62rem;
}

.queue__thumb {
    display: block;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--border);
    filter: grayscale(1);
    transition: filter 0.25s var(--ease);
}

.queue__link:hover .queue__thumb {
    filter: grayscale(0);
}

.queue__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* An ad between queue entries. It sits inside the scroller with the stories,
   which is what stops it reading as a banner bolted onto the side. */
.queue__ad {
    padding: 0.75rem 1.1rem;
    background: var(--bg-sunken);
}

.queue__ad .ad {
    min-height: 200px;
}

.queue__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.queue__more:hover {
    color: var(--accent);
    background: var(--surface-hover);
}

/* On a narrow screen the rail stops being a rail: it falls under the
   article and scrolls with the page rather than inside itself. */
@media (max-width: 1000px) {
    .rail--queue .rail__sticky {
        position: static;
        max-height: none;
    }

    .queue__list {
        overflow-y: visible;
        max-height: none;
    }
}

/* --------------------------------------------------------------- prose */

.prose h1 {
    letter-spacing: -0.045em;
}

.prose h2 {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 500;
}

.prose__lead {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.85;
}

.prose li::before {
    color: var(--accent);
}

.prose a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.prose a:hover {
    border-bottom-color: var(--accent);
}

.prose code {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* --------------------------------------------------------------- panels */

.panel__sheet {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
}

.panel__head {
    border-bottom: 1px solid var(--border);
}

.field input,
.field select,
.panel input,
.panel select {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--surface);
}

.field input:focus,
.field select:focus {
    border-color: var(--accent);
}

.switch__track {
    border-radius: 0;
}

.switch__thumb {
    border-radius: 0;
}

.switch input:checked + .switch__track {
    background: var(--accent);
}

/* ---------------------------------------------------------------- gate */

.gate__card {
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-3);
}

.gate__mark {
    border-radius: 0;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: none;
}

.gate__points .icon {
    color: var(--accent);
}

/* -------------------------------------------------------------- footer */

.footer {
    border-top: 1px solid var(--border);
    background: var(--bg-sunken);
}

.footer__links a:hover {
    color: var(--accent);
}

.footer__legal {
    border-top: 1px solid var(--border);
    color: var(--text-ghost);
}

/* --------------------------------------------------------------- toast */

.toast {
    border-radius: 0;
    border: 1px solid var(--accent);
    background: var(--bg);
    color: var(--text-strong);
}

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
    body::after {
        display: none;
    }

    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body::before,
    body::after,
    .ad,
    .rail,
    .topbar {
        display: none !important;
    }
}

/* -------------------------------------------------------- status strip */

/* The live counters under the masthead. Same idea as the one on mpakt.dev:
   a thin band of uppercase telemetry that says the thing is running. */
.statusbar {
    border-bottom: 1px solid var(--border);
    background: var(--bg-sunken);
}

.statusbar__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.status-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.status-key {
    color: var(--text-ghost);
}

.status-val {
    color: var(--text-muted);
}

.status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--accent);
    animation: status-pulse 2.4s var(--ease) infinite;
}

@keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 var(--accent-soft); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------------------------------------------------------- rail panels */

.card--panel {
    padding: 1.25rem 1.35rem;
}

.panel__lead {
    margin-top: 0.4rem;
    color: var(--text-faint);
    font-size: 0.74rem;
    line-height: 1.65;
}

/* A newsroom tally. The bar is a proportion of the busiest publication, not
   an absolute scale -- it is there to be scanned, not measured. */
.tallies {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.tally {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
}

.tally__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.tally__bar {
    height: 4px;
    background: var(--border);
}

.tally__fill {
    display: block;
    height: 100%;
    background: var(--accent);
    opacity: 0.65;
}

.tally__count {
    color: var(--text-ghost);
    font-variant-numeric: tabular-nums;
    font-size: 0.66rem;
}

.chips--topics {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.chip--topic {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.chip__count {
    color: var(--accent);
    opacity: 0.8;
}

/* ------------------------------------------------------- column footnote */

/* What a reader hits when the infinite scroll runs out. Somewhere to go
   that is not the back button. */
.column__footnote {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    max-width: 68ch;
}

.column__footnote h2 {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 500;
}

.column__footnote p {
    margin-top: 0.9rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.85;
}

.column__footnote a {
    color: var(--accent);
    border-bottom: 1px solid transparent;
}

.column__footnote a:hover {
    border-bottom-color: var(--accent);
}

/* ------------------------------------------------------- live writing */

/* Shown while a brief is being written. The reader already has the
   headline, the outlets and every source link; this reports what is
   happening to the part that is still missing. */
.writing {
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    background: var(--surface);
}

.writing__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.78rem;
}

.writing__head .icon {
    color: var(--accent);
    flex: 0 0 auto;
    animation: writing-spin 1.1s linear infinite;
}

@keyframes writing-spin {
    to { transform: rotate(360deg); }
}

.writing__elapsed {
    margin-left: auto;
    color: var(--text-ghost);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.writing__steps {
    padding: 0.75rem 1.1rem;
    display: grid;
    gap: 0.5rem;
}

.writing__step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-ghost);
    font-size: 0.74rem;
    transition: color 0.2s var(--ease);
}

.writing__dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: currentColor;
    opacity: 0.5;
}

.writing__step.is-active {
    color: var(--accent);
}

.writing__step.is-active .writing__dot {
    opacity: 1;
    animation: status-pulse 1.6s var(--ease) infinite;
}

.writing__step.is-done {
    color: var(--text-muted);
}

.writing__step.is-done .writing__dot {
    opacity: 1;
}

.writing__note {
    padding: 0 1.1rem 0.9rem;
    color: var(--text-faint);
    font-size: 0.72rem;
    line-height: 1.6;
}

.writing.is-failed {
    border-left-color: var(--like);
}

.writing.is-failed .writing__head .icon {
    animation: none;
    color: var(--like);
}

/* The finished article fades in rather than appearing mid-scroll, so a
   reader who has started on the sources is not jolted. */
.story__body p {
    animation: writing-in 0.35s var(--ease) both;
}

@keyframes writing-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .writing__head .icon,
    .writing__step.is-active .writing__dot,
    .story__body p {
        animation: none;
    }
}

/* -------------------------------------------------------------- sign in */

/* Google requires its button to be legible and unaltered, so the mark keeps
   its own colours against a neutral surface rather than being tinted to
   match the site. Everything around it is ours. */
.button--google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 46px;
    margin-top: 1.1rem;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-strong);
    font-size: 0.84rem;
    letter-spacing: 0.01em;
}

.button--google:hover,
.button--google:focus-visible {
    border-color: var(--accent);
    background: var(--surface-hover);
    color: var(--text-strong);
}

.google-mark {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.auth__why {
    margin-top: 0.9rem;
    line-height: 1.7;
}

.auth__legal {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-ghost);
    font-size: 0.7rem;
    line-height: 1.6;
}

.auth__legal a {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
}

.auth__legal a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.notice--error {
    padding: 0.7rem 0.9rem;
    margin-top: 0.9rem;
    border: 1px solid var(--like);
    border-left-width: 2px;
    background: var(--like-soft);
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.6;
}

/* The signed-in identity, as Google supplies it. */
.account__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.account__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
}

.account__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account__name {
    display: block;
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: 0.92rem;
    letter-spacing: -0.02em;
}

.account__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    color: var(--accent);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.account__verified .icon {
    width: 12px;
    height: 12px;
}

/* ------------------------------------------------------- agreeing to terms */

/* What the reader is agreeing to, spelled out above the checkbox rather than
   compressed into "I accept the terms". */
.auth__terms {
    margin-top: 1.1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.65;
}

.auth__terms ul {
    margin-top: 0.6rem;
    display: grid;
    gap: 0.45rem;
}

.auth__terms li {
    padding-left: 0.9rem;
    position: relative;
}

.auth__terms li::before {
    content: "//";
    position: absolute;
    left: 0;
    color: var(--accent);
    opacity: 0.6;
}

.auth__terms a {
    color: var(--accent);
    border-bottom: 1px solid transparent;
}

.auth__terms a:hover {
    border-bottom-color: var(--accent);
}

.auth__agree {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    color: var(--text);
    font-size: 0.78rem;
    line-height: 1.6;
    cursor: pointer;
}

.auth__agree input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    accent-color: var(--accent);
    cursor: pointer;
}

.auth__agree a {
    color: var(--accent);
    border-bottom: 1px solid transparent;
}

.auth__agree a:hover {
    border-bottom-color: var(--accent);
}

/* Until the box is ticked. The button still works if scripting never
   arrives -- the browser enforces the required checkbox on submit. */
.button--google.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.button--google.is-disabled:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}

/* ------------------------------------------------------------- skeleton */

/* Shown while the client fetches a feed the server shipped without, which
   happens on a cold instance. The page is already interactive; this is a
   placeholder for the one part that is not there yet. */
:root[data-feed-pending] #feed::before,
:root[data-feed-pending] #lede::before {
    content: "";
    display: block;
    height: 180px;
    border: 1px solid var(--border);
    background: linear-gradient(
        100deg,
        var(--surface) 30%,
        var(--surface-hover) 50%,
        var(--surface) 70%
    );
    background-size: 220% 100%;
    animation: skeleton 1.4s var(--ease) infinite;
}

:root[data-feed-pending] #lede::before {
    height: 320px;
}

@keyframes skeleton {
    from { background-position: 180% 0; }
    to { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-feed-pending] #feed::before,
    :root[data-feed-pending] #lede::before {
        animation: none;
    }
}

/* --------------------------------------------------------- unverified */

/* Social sources, kept visually apart from the newsroom list so the two are
   never read as carrying the same weight. */
.story__unverified {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.unverified__list {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-left: 2px solid var(--like);
    margin-top: 1rem;
}

.unverified a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.3rem 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--surface);
    transition: background 0.15s var(--ease);
}

.unverified a:hover {
    background: var(--surface-hover);
}

.unverified__where {
    grid-column: 1;
    color: var(--like);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.unverified__title {
    grid-column: 1;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.5;
}

.unverified__how {
    grid-column: 1;
    color: var(--text-ghost);
    font-size: 0.66rem;
}

.unverified a .icon {
    grid-column: 2;
    grid-row: 1 / -1;
    color: var(--text-ghost);
}

.unverified a:hover .icon {
    color: var(--like);
}

/* --------------------------------------------------------- no brief yet */

/* A story whose article was never written. The page is not broken -- every
   source below it is real -- so this reads as an explanation with a next
   step rather than as an error. */
.unwritten {
    margin: 1.75rem 0;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border);
    border-left: 2px solid var(--text-muted);
    background: var(--surface);
}

.unwritten__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

.unwritten__head .icon {
    color: var(--text-muted);
    flex: 0 0 auto;
}

.unwritten__body {
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.8;
}

.unwritten__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.unwritten__actions .button {
    min-height: 40px;
    padding: 0 1rem;
    font-size: 0.78rem;
}

#unwritten-status:not(:empty) {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* While a retry is in flight the spinner turns and the button is out of
   reach: this is the one control here that spends real budget. */
.unwritten.is-working {
    border-left-color: var(--accent);
}

.unwritten.is-working .unwritten__head .icon,
.unwritten.is-working #unwritten-retry .icon {
    color: var(--accent);
    animation: writing-spin 1.1s linear infinite;
}

#unwritten-retry[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .unwritten.is-working .unwritten__head .icon,
    .unwritten.is-working #unwritten-retry .icon {
        animation: none;
    }
}

/* ==========================================================================
   Global intelligence dashboard.
   The map is the primary interface: a high-contrast surface with black 1px
   country borders and a white-to-red activity scale. All interaction and
   data classes live here so the mobile and widescreen layouts only arrange
   the same pieces.
   ========================================================================== */

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--intel-accent, #e33b45);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.intel {
    --intel-accent: #e33b45;
    --intel-accent-soft: rgba(227, 59, 69, 0.13);
    --intel-panel: #08090b;
    --intel-panel-2: #0d0f12;
    --intel-border: #24272d;
    --intel-muted: #8e949d;
    --intel-text: #f0f1f3;
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 20px 34px;
}

.intel .button {
    border-color: var(--intel-border);
    background: #111318;
    color: var(--intel-text);
}

.intel .button:hover {
    border-color: var(--intel-accent);
    color: #fff;
}

.intel button,
.intel input,
.intel select,
.intel summary {
    font: inherit;
}

.intel__toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: color-mix(in srgb, var(--intel-panel) 92%, transparent);
    border: 1px solid var(--intel-border);
    border-radius: 2px;
}

.intel-search {
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    max-width: 460px;
    gap: 6px;
}

.intel-search input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    color: var(--intel-text);
    background: #050608;
    border: 1px solid var(--intel-border);
    border-radius: 2px;
}

.intel-search input::placeholder {
    color: #666c76;
}

.intel-search input:focus {
    border-color: var(--intel-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--intel-accent-soft);
}

.segmented {
    display: flex;
    border: 1px solid var(--intel-border);
    background: #050608;
}

.segmented__button,
.mode-switch__button {
    min-height: 32px;
    padding: 5px 11px;
    color: var(--intel-muted);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--intel-border);
    cursor: pointer;
}

.segmented__button:last-child,
.mode-switch__button:last-child {
    border-right: 0;
}

.segmented__button:hover,
.mode-switch__button:hover {
    color: #fff;
    background: #15171c;
}

.segmented__button.is-active,
.mode-switch__button.is-active {
    color: #fff;
    background: var(--intel-accent);
}

.intel-select select,
.intel-filters select,
.compare-picker select {
    min-height: 34px;
    padding: 6px 28px 6px 9px;
    color: var(--intel-text);
    background: #050608;
    border: 1px solid var(--intel-border);
    border-radius: 2px;
}

.intel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    color: var(--intel-muted);
    border: 1px solid var(--intel-border);
    background: #050608;
    cursor: pointer;
    user-select: none;
}

.intel-toggle input {
    accent-color: var(--intel-accent);
}

.intel-filters {
    position: relative;
}

.intel-filters > summary {
    list-style: none;
    min-height: 34px;
    padding: 8px 12px;
    color: var(--intel-muted);
    border: 1px solid var(--intel-border);
    background: #050608;
    cursor: pointer;
}

.intel-filters > summary::-webkit-details-marker {
    display: none;
}

.intel-filters[open] > summary {
    color: #fff;
    border-color: var(--intel-accent);
}

.intel-filters__body {
    position: absolute;
    right: 0;
    z-index: 25;
    width: min(340px, calc(100vw - 32px));
    padding: 14px;
    background: #0b0d10;
    border: 1px solid var(--intel-border);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
}

.intel-filters__body .field {
    margin-bottom: 12px;
}

.intel-filters__body .field > span {
    display: block;
    margin-bottom: 4px;
    color: var(--intel-muted);
    font-size: 0.72rem;
}

.intel-filters__body .field select {
    width: 100%;
}

.intel-filters__body input[type="range"] {
    width: 100%;
    accent-color: var(--intel-accent);
}

.intel-types {
    margin: 0;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid var(--intel-border);
}

.intel-types legend {
    padding: 0;
    margin-bottom: 8px;
    color: var(--intel-muted);
    font-size: 0.72rem;
}

#intel-type-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.type-check {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--intel-muted);
    font-size: 0.68rem;
    cursor: pointer;
}

.type-check input {
    accent-color: var(--intel-accent);
}

.legend-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: var(--swatch, #888);
}

.legend-swatch--nodata {
    --swatch: #34373d;
    border: 1px solid #000;
}

.intel__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
    gap: 18px;
}

.map-panel {
    min-width: 0;
    background: var(--intel-panel);
    border: 1px solid var(--intel-border);
}

.map-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px 14px;
    border-bottom: 1px solid var(--intel-border);
}

.map-panel__head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #fff;
}

.map-panel__lede {
    max-width: 64ch;
    margin: 8px 0 0;
    color: var(--intel-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.mode-switch {
    display: flex;
    flex: 0 0 auto;
    border: 1px solid var(--intel-border);
}

.mode-switch__button {
    min-height: 34px;
}

.map-stage {
    position: relative;
    height: clamp(440px, 56vh, 680px);
    min-height: 380px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, #151b24 0%, #0a0d12 55%, #050608 100%);
    border-bottom: 1px solid var(--intel-border);
}

.world-map {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: pan-y;
}

@media (pointer: fine) {
    .world-map {
        touch-action: none;
    }
}

.world-map:active {
    cursor: grabbing;
}

.map-countries .country {
    stroke: #000000 !important;
    stroke-width: 1px !important;
    vector-effect: non-scaling-stroke;
    transition: filter 120ms linear, fill 180ms linear;
    cursor: pointer;
}

.map-countries .country--territory {
    pointer-events: none;
}

.map-countries .country.is-no-data {
    fill: #34373d;
}

.map-countries .country:hover,
.map-countries .country:focus-visible {
    filter: brightness(1.16);
    outline: none;
}

.map-countries .country:focus-visible {
    filter: brightness(1.18) drop-shadow(0 0 4px rgba(255, 255, 255, 0.75));
}

.map-countries .country.is-selected {
    filter: brightness(1.12) drop-shadow(0 0 5px rgba(255, 255, 255, 0.55));
}

.map-countries .country.is-down {
    filter: saturate(0.9);
}

.map-pulses {
    pointer-events: none;
}

.country-pulse {
    fill: none;
    stroke: #ff4e58;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    animation-name: country-pulse;
    animation-timing-function: ease-out;
    animation-iteration-count: 3;
    opacity: 0;
}

.country-pulse[data-direction="down"] {
    stroke: #6fb7ff;
}

@keyframes country-pulse {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    18% {
        opacity: 0.72;
    }
    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

.map-connections .connection {
    cursor: pointer;
    outline: none;
}

.map-connections .connection__hit {
    pointer-events: stroke;
}

.map-connections .connection__line {
    pointer-events: none;
    transition: stroke-width 120ms linear, stroke-opacity 120ms linear;
}

.map-connections .connection:hover .connection__line,
.map-connections .connection:focus-visible .connection__line {
    stroke-opacity: 1 !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
}

.map-connections .connection.is-selected .connection__line {
    stroke-opacity: 1 !important;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

.map-tooltip {
    position: absolute;
    z-index: 12;
    width: 230px;
    padding: 9px 11px;
    color: var(--intel-text);
    background: rgba(6, 7, 9, 0.96);
    border: 1px solid #4a505a;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.map-tooltip p {
    margin: 0;
}

.map-tooltip__title {
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
}

.map-tooltip__score {
    margin-top: 3px !important;
    color: #ff8c93;
    font-size: 0.74rem;
}

.map-tooltip__muted,
.map-tooltip__hint {
    margin-top: 3px !important;
    color: var(--intel-muted);
    font-size: 0.66rem;
    line-height: 1.4;
}

.map-tooltip__hint {
    color: #b5bac2;
}

.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-control {
    min-width: 74px;
    padding: 6px 8px;
    color: #e7e9ec;
    background: rgba(7, 9, 12, 0.92);
    border: 1px solid #3b4048;
    cursor: pointer;
    font-size: 0.66rem;
}

.map-control:hover,
.map-control:focus-visible {
    border-color: #fff;
    background: #1a1d22;
}

.map-hint {
    position: absolute;
    left: 11px;
    bottom: 9px;
    max-width: 420px;
    margin: 0;
    padding: 5px 8px;
    color: #9ba1aa;
    background: rgba(5, 6, 8, 0.8);
    border: 1px solid #2a2f37;
    font-size: 0.62rem;
    pointer-events: none;
}

.map-loading {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: #dfe3e8;
    background: rgba(5, 6, 8, 0.82);
    font-size: 0.78rem;
    text-align: center;
}

.map-loading[hidden] {
    display: none;
}

.map-loading__pulse {
    width: 9px;
    height: 9px;
    background: var(--intel-accent);
    border-radius: 50%;
    animation: loading-pulse 1.2s ease-in-out infinite;
}

@keyframes loading-pulse {
    50% {
        transform: scale(1.8);
        opacity: 0.35;
    }
}

.map-stage.is-loading .world-map {
    opacity: 0.55;
}

.map-legend {
    border-bottom: 1px solid var(--intel-border);
    background: #060709;
}

.map-legend > summary {
    padding: 9px 14px;
    color: #aeb4bd;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0 14px 14px;
}

.legend-block {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #252930;
    background: #0a0c0f;
}

.legend-block--wide {
    grid-column: span 2;
}

.legend-title {
    display: block;
    margin-bottom: 6px;
    color: #f0f1f3;
    font-size: 0.68rem;
    font-weight: 700;
}

.legend-gradient {
    display: block;
    height: 12px;
    border: 1px solid #000;
}

.legend-gradient--activity {
    background: linear-gradient(90deg,
        #ffffff 0%, #fde2e2 15%, #f8a3a3 35%, #eb5252 55%,
        #be1428 75%, #8c0014 90%, #5c000c 100%);
}

.legend-gradient--change {
    background: linear-gradient(90deg,
        #0c3f7c 0%, #90b8e0 28%, #4b5058 50%, #e58b8b 72%, #780012 100%);
}

.legend-scale {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 3px;
    color: #8b919a;
    font-size: 0.59rem;
}

.legend-note {
    margin: 7px 0 0;
    color: #9197a1;
    font-size: 0.63rem;
    line-height: 1.45;
}

.legend-nodata {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    color: #9197a1;
    font-size: 0.63rem;
}

.legend-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    color: #b5bac2;
    font-size: 0.63rem;
}

.legend-line::before {
    display: block;
    content: "";
    width: 64px;
    height: 1px;
    background: #ff5a5f;
}

.legend-line--strong::before {
    height: 5px;
}

.legend-border {
    display: block;
    width: 100%;
    height: 12px;
    margin: 5px 0;
    background: #777;
    border: 1px solid #000;
    box-shadow: inset 0 0 0 1px #000;
}

.legend-pulse {
    display: block;
    width: 28px;
    height: 28px;
    margin: 3px 0;
    border: 1px solid #ff5a5f;
    border-radius: 50%;
    opacity: 0.75;
}

.legend-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.legend-category {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #b9bec6;
    font-size: 0.62rem;
}

.legend-short {
    color: #767d87;
    font-size: 0.56rem;
}

.map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 13px;
    color: #8e949d;
    font-size: 0.63rem;
    border-bottom: 1px solid var(--intel-border);
}

.map-stats {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.map-stats strong {
    color: #fff;
    font-weight: 700;
}

.map-freshness {
    max-width: 58ch;
    color: #8e949d;
    font-size: 0.61rem;
    text-align: right;
}

.map-freshness.is-warning {
    color: #ffb37a;
}

.map-history {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px 10px;
    color: #989ea8;
    font-size: 0.63rem;
}

.map-history label {
    color: #d8dbe0;
}

.map-history input {
    flex: 1 1 180px;
    min-width: 100px;
    accent-color: var(--intel-accent);
}

.map-history output {
    min-width: 52px;
    color: #fff;
    text-align: right;
}

.map-history__note {
    color: #7e858f;
    font-size: 0.58rem;
}

.intel-sidebar {
    position: sticky;
    top: 64px;
    min-width: 0;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--intel-panel);
    border: 1px solid var(--intel-border);
    scrollbar-width: thin;
    scrollbar-color: #3b414a transparent;
}

.intel-sidebar::-webkit-scrollbar {
    width: 8px;
}

.intel-sidebar::-webkit-scrollbar-thumb {
    background: #3b414a;
}

.intel-sidebar__head {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 14px 14px 10px;
    background: #0a0c0f;
    border-bottom: 1px solid var(--intel-border);
}

.intel-sidebar__head h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.24rem;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.intel-sidebar__close {
    margin-top: 8px;
}

.intel-sidebar__body {
    padding: 0 14px 22px;
}

.sidebar-summary,
.sidebar-empty,
.sidebar-loading {
    margin: 10px 0;
    color: var(--intel-muted);
    font-size: 0.68rem;
    line-height: 1.5;
}

.sidebar-filter-note {
    margin: 10px 0;
    padding: 8px 9px;
    color: #ffc9cc;
    background: var(--intel-accent-soft);
    border-left: 2px solid var(--intel-accent);
    font-size: 0.65rem;
    line-height: 1.45;
}

.sidebar-section-head {
    margin: 17px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--intel-border);
}

.sidebar-section-head .eyebrow {
    margin-bottom: 3px;
}

.sidebar-section-head h3 {
    margin: 0;
    color: #f4f5f6;
    font-family: var(--font-display);
    font-size: 0.98rem;
    line-height: 1.2;
}

.story-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--intel-border);
}

.story-card {
    position: relative;
    min-width: 0;
    padding: 11px 10px;
    background: #0a0c0f;
    cursor: pointer;
}

.story-card:hover {
    background: #12141a;
}

.story-card__rank {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--intel-accent);
    font-size: 0.6rem;
    font-weight: 700;
}

.story-card__title {
    display: block;
    color: #f1f2f4;
    font-family: var(--font-display);
    font-size: 0.87rem;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.story-card__title:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.story-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin: 6px 0 0;
    color: #8e949d;
    font-size: 0.61rem;
    line-height: 1.4;
}

.story-card__meta span + span::before {
    content: "/";
    margin-right: 7px;
    color: #4b515a;
}

.story-card__countries {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

.country-chip {
    padding: 3px 6px;
    color: #d9dce1;
    background: #16191f;
    border: 1px solid #313640;
    cursor: pointer;
    font-size: 0.58rem;
}

.country-chip:hover,
.country-chip:focus-visible {
    border-color: var(--intel-accent);
    color: #fff;
}

.story-card__summary {
    margin: 7px 0 0;
    color: #a5abb4;
    font-size: 0.66rem;
    line-height: 1.48;
}

.story-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #1e2229;
}

.story-card__internal {
    color: #ff9ca2;
    font-size: 0.61rem;
    text-decoration: none;
}

.story-card__internal:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.story-card__evidence {
    color: #7f8690;
    font-size: 0.58rem;
}

.change-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--intel-border);
}

.change-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-bottom: 1px solid #1f232a;
    font-size: 0.64rem;
}

.change-list__item:last-child {
    border-bottom: 0;
}

.change-list__name {
    color: #e7e9ec;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.change-list__value {
    color: #9da3ac;
    font-size: 0.6rem;
    text-align: right;
}

.change-list__item--up .change-list__value {
    color: #ff9ea4;
}

.change-list__item--down .change-list__value {
    color: #88c5ff;
}

.change-list__item--new .change-list__value {
    color: #ffc078;
}

.change-list__open {
    padding: 3px 5px;
    color: #b7bdc6;
    background: transparent;
    border: 1px solid #333842;
    cursor: pointer;
    font-size: 0.57rem;
}

.connection-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--intel-border);
}

.connection-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    color: #d6d9de;
    background: #0a0c0f;
    border: 0;
    border-left: 3px solid var(--connection-color, #888);
    cursor: pointer;
    text-align: left;
}

.connection-row:hover {
    background: #12151a;
}

.connection-row__category {
    color: var(--connection-color, #aaa);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.connection-row__route {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.64rem;
}

.connection-row__strength {
    color: #aeb4bd;
    font-size: 0.59rem;
}

.source-health {
    margin-top: 16px;
    padding: 9px 10px;
    border: 1px solid #3a3021;
    background: #151108;
}

.source-health h3 {
    margin: 0 0 4px;
    color: #ffc078;
    font-size: 0.72rem;
}

.source-health__line {
    margin: 3px 0;
    color: #b9a98f;
    font-size: 0.62rem;
    line-height: 1.45;
}

.sidebar-method {
    margin: 16px 0 0;
    padding-top: 10px;
    color: #767d87;
    border-top: 1px solid var(--intel-border);
    font-size: 0.58rem;
    line-height: 1.5;
}

.country-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 13px;
}

.country-badge {
    display: grid;
    place-items: center;
    width: 42px;
    height: 34px;
    flex: 0 0 42px;
    color: #fff;
    background: var(--intel-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.country-head h3 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.1;
}

.country-head__meta {
    margin: 3px 0 0;
    color: #8f959f;
    font-size: 0.62rem;
}

.country-score {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #30353d;
    background: #0a0c0f;
}

.country-score__row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.country-score__value {
    color: #fff;
    font-family: var(--font-display);
    font-size: 2.35rem;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.country-score__denominator {
    color: #7d848e;
    font-size: 0.8rem;
}

.country-score__label {
    margin: 5px 0 0;
    color: #9aa0a9;
    font-size: 0.65rem;
}

.confidence {
    margin-left: auto;
    padding: 2px 5px;
    border: 1px solid #3c424b;
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.confidence--high {
    color: #b7f0cf;
    border-color: #286044;
}

.confidence--medium {
    color: #ffe1a6;
    border-color: #67542c;
}

.confidence--low {
    color: #ffb3b7;
    border-color: #653238;
}

.country-change {
    margin: 9px 0 0;
    padding-top: 8px;
    border-top: 1px solid #272c34;
    color: #aeb4bd;
    font-size: 0.66rem;
    line-height: 1.45;
}

.country-change--up,
.country-change--new {
    color: #ff9ea4;
}

.country-change--down {
    color: #8ecaff;
}

.country-change--unavailable {
    color: #818892;
}

.trend-chart svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 70px;
    background: #080a0d;
    border: 1px solid #22262d;
}

.trend-chart__scale {
    margin: 5px 0 0;
    color: #777e88;
    font-size: 0.58rem;
    line-height: 1.4;
}

.topic-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.topic-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 42px;
    align-items: center;
    gap: 7px;
    font-size: 0.63rem;
}

.topic-bar__label {
    overflow: hidden;
    color: #c9cdd3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-bar__track,
.score-component__track,
.relationship-strength__track {
    display: block;
    height: 4px;
    background: #23272e;
}

.topic-bar__fill,
.score-component__fill,
.relationship-strength__fill {
    display: block;
    height: 100%;
}

.topic-bar__value {
    color: #969ca6;
    text-align: right;
    font-size: 0.59rem;
}

.score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.score-component__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.score-component__label {
    color: #d4d7dc;
    font-size: 0.65rem;
}

.score-component__contribution {
    color: #ff9da3;
    font-size: 0.62rem;
    font-weight: 700;
}

.score-component__fill {
    background: linear-gradient(90deg, #8c0014, #e33b45);
}

.score-component__detail {
    margin: 3px 0 0;
    color: #777e88;
    font-size: 0.56rem;
    line-height: 1.4;
}

.score-breakdown__note {
    margin: 5px 0 0;
    padding-top: 7px;
    color: #868d97;
    font-size: 0.58rem;
    line-height: 1.45;
    border-top: 1px solid #242930;
}

.compare-picker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--intel-border);
}

.compare-picker label {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    color: #9aa0a9;
    font-size: 0.64rem;
}

.compare-picker select {
    min-width: 0;
    flex: 1 1 auto;
}

.compare-panel {
    margin-top: 14px;
}

.compare-grid {
    border: 1px solid var(--intel-border);
}

.compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 72px;
    gap: 7px;
    padding: 5px 7px;
    border-bottom: 1px solid #1f232a;
    color: #969ca6;
    font-size: 0.61rem;
}

.compare-row:last-child {
    border-bottom: 0;
}

.compare-row strong {
    color: #e5e7ea;
    font-weight: 600;
    text-align: right;
}

.compare-topics {
    margin: 5px 0 0;
    color: #8e949d;
    font-size: 0.59rem;
    line-height: 1.45;
}

.relationship-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid #30353d;
    background: #0a0c0f;
}

.relationship-route__place {
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.15;
}

.relationship-route__place:last-child {
    text-align: right;
}

.relationship-route__arrow {
    color: #9aa0a9;
    font-size: 0.55rem;
    text-align: center;
}

.relationship-type {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 7px;
    color: var(--connection-color, #fff);
    border: 1px solid var(--connection-color, #555);
    font-size: 0.6rem;
}

.relationship-strength {
    margin-top: 12px;
}

.relationship-strength__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    color: #c7cbd1;
    font-size: 0.65rem;
}

.relationship-strength__top strong {
    color: #fff;
}

.relationship-strength__confidence {
    margin: 5px 0 0;
    color: #868d97;
    font-size: 0.59rem;
}

.relationship-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    margin: 12px 0 0;
    padding: 9px;
    border: 1px solid #2b3038;
    font-size: 0.62rem;
}

.relationship-facts dt {
    color: #868d97;
}

.relationship-facts dd {
    margin: 0;
    color: #e0e3e7;
    text-align: right;
}

.relationship-explanation {
    margin: 10px 0;
    color: #aeb4bd;
    font-size: 0.65rem;
    line-height: 1.5;
}

.sidebar-warning {
    margin: 10px 0;
    padding: 7px 8px;
    color: #ffc8a0;
    background: #171006;
    border-left: 2px solid #ff9f43;
    font-size: 0.63rem;
    line-height: 1.45;
}

.evidence-card {
    padding: 9px;
    margin-bottom: 1px;
    background: #0a0c0f;
    border: 1px solid #22262d;
}

.evidence-card__title {
    display: block;
    color: #e8eaed;
    font-family: var(--font-display);
    font-size: 0.77rem;
    line-height: 1.3;
    text-decoration: none;
}

.evidence-card__title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.evidence-card__meta {
    margin: 5px 0 0;
    color: #818892;
    font-size: 0.58rem;
    line-height: 1.4;
}

.evidence-card__excerpt {
    margin: 6px 0 0;
    color: #9da3ac;
    font-size: 0.63rem;
    line-height: 1.45;
}

.story-detail__title {
    display: block;
    margin-top: 12px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.28rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-decoration: none;
}

.story-detail__title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.story-detail__meta {
    margin: 7px 0;
    color: #8d949e;
    font-size: 0.63rem;
    line-height: 1.45;
}

.story-detail__summary {
    margin: 9px 0;
    color: #bcc1c8;
    font-size: 0.7rem;
    line-height: 1.55;
}

.story-detail__basis {
    margin: 8px 0;
    color: #8c939d;
    font-size: 0.6rem;
    line-height: 1.45;
}

.source-row {
    padding: 8px 0;
    border-bottom: 1px solid #20242b;
}

.source-row__title {
    display: block;
    color: #e1e4e7;
    font-size: 0.7rem;
    line-height: 1.35;
    text-decoration: none;
}

.source-row__title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.source-row__meta {
    display: block;
    margin-top: 3px;
    color: #7f8690;
    font-size: 0.57rem;
}

.empty-state {
    margin: 12px 0;
    padding: 13px 11px;
    border: 1px dashed #343a43;
    background: #090b0e;
}

.empty-state h3 {
    margin: 0 0 5px;
    color: #e4e6ea;
    font-family: var(--font-display);
    font-size: 0.9rem;
}

.empty-state p {
    margin: 0 0 9px;
    color: #9097a1;
    font-size: 0.64rem;
    line-height: 1.5;
}

.intel-noscript {
    max-width: 900px;
    margin: 12px auto;
    padding: 12px;
    color: #ffcf9e;
    border: 1px solid #59401f;
    background: #161006;
    font-size: 0.75rem;
}

.shell--feed {
    margin-top: 18px;
}

@media (max-width: 1250px) {
    .intel__layout {
        grid-template-columns: minmax(0, 1fr) 350px;
    }
}

@media (max-width: 1080px) {
    .intel {
        padding: 12px 14px 26px;
    }

    .intel__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .intel-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .map-stage {
        height: 60vh;
        min-height: 400px;
    }

    .legend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legend-block--wide {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .intel {
        padding: 8px 10px 22px;
    }

    .intel__toolbar {
        gap: 6px;
        padding: 8px;
    }

    .intel-search {
        flex-basis: 100%;
        max-width: none;
    }

    .intel-search .button {
        flex: 0 0 auto;
    }

    .map-panel__head {
        flex-direction: column;
        gap: 10px;
        padding: 13px 12px 11px;
    }

    .map-panel__head h1 {
        font-size: 1.65rem;
    }

    .mode-switch {
        width: 100%;
    }

    .mode-switch__button {
        flex: 1;
    }

    .map-stage {
        height: 54vh;
        min-height: 330px;
    }

    .map-hint {
        display: none;
    }

    .map-controls {
        top: 7px;
        right: 7px;
        flex-direction: row;
    }

    .map-control {
        min-width: 0;
        min-height: 40px;
        padding: 8px 10px;
    }

    .segmented__button,
    .mode-switch__button,
    .intel-search input,
    .intel-search .button,
    .intel-toggle {
        min-height: 40px;
    }

    .legend-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .legend-block--wide {
        grid-column: auto;
    }

    .map-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .map-freshness {
        text-align: left;
    }

    .map-history {
        flex-wrap: wrap;
    }

    .map-history__note {
        flex-basis: 100%;
    }

    .intel-sidebar__head {
        position: static;
    }

    .topic-bar {
        grid-template-columns: minmax(0, 1fr) 70px 38px;
    }

    .relationship-route {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
    }

    .relationship-route__place:last-child {
        text-align: left;
    }

    .relationship-route__arrow {
        text-align: left;
    }

    .intel-filters__body {
        right: auto;
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .country-pulse,
    .map-loading__pulse {
        animation: none;
    }

    .country-pulse {
        opacity: 0.45;
    }

    .map-countries .country,
    .map-connections .connection__line {
        transition: none;
    }
}