/* ==========================================================================
   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);
}