/*
 * CORPUS — An archive of human text
 * Parchment, ink, and wax seals
 */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    color-scheme: light;
    --ink: #1a1a18;
    --ink-light: #3d3d3a;
    --ink-faded: #5a5a55;
    --parchment: #f4f1ea;
    --parchment-dark: #e8e4d9;
    --parchment-aged: #c9c4b5;
    --cream: #fdfcf9;
    --wax: #c41e00;
    --wax-light: rgba(196, 30, 0, 0.1);
    --wax-glow: rgba(196, 30, 0, 0.3);
    --surface-strong: #1a1a18;
    --surface-strong-text: #f4f1ea;
    --wax-contrast: #fdfcf9;
    --wax-hover: #a01800;
    /* Verdigris — the patina on aged copper, and a real manuscript pigment.
       The site's accent: buttons, card rules, the active nav marker, focus,
       links. --wax is no longer the everyday colour; it now means only
       "something is wrong or irreversible" (errors, flags, destructive
       actions, the negative pole of a vote), which is the one job a red does
       better than any other hue.

       Two values of one hue, because no single one can do both jobs. The
       wash is for areas big enough to hold text - buttons, badges, avatars,
       ::selection - where --ink sits on it at 8.44. It is NOT for thin
       graphics: a light fill scores under 2 against parchment, so a 3px card
       rule or an 8px bar in it is barely there. Those take the concentrate,
       as does anything that has to survive on parchment as text, a border or
       an outline.

       (Token still named verdigris; the value is currently mustard while
       the accent is being chosen. Rename once it settles.)
       See "The accent" in design-principles.md before adding a usage. */
    --verdigris: #e9c149;
    --verdigris-hover: #e2ad28;
    --verdigris-deep: #7f5c0a;
    /* Gilt. Gold is the one material here that isn't a flat colour - leaf
       catches the light and turns warmer as it falls away, and a flat fill
       of it just reads as mustard. So this gradient is doing the job the
       "no unmotivated gradients" rule exists to protect: it's the material,
       not a decorative sheen laid over an arbitrary hue. Note the stops
       shift hue (47deg -> 40deg), not only lightness - that hue turn is what
       separates metal from a tint. */
    --gilt: linear-gradient(160deg, #f1d56f 0%, #dfa126 100%);
    --gilt-pressed: linear-gradient(160deg, #ebc94c 0%, #c18b1f 100%);
    /* The rule along the top of a card, run across its width rather than
       down 3px of height where a gradient would be invisible. Deeper at the
       ends with the highlight off-centre, so it reads as a strip of leaf
       catching light rather than a flat band.

       This was --verdigris-deep, a flat #7f5c0a, picked because the bright
       gold scored 1.74 against parchment. That was a bad reason: WCAG's 3:1
       non-text minimum covers graphics that carry meaning and UI state, not
       a decorative rule on a card its own background already delimits - and
       a luminance ratio says nothing about a hue difference this large.

       Saturation is then half that of --gilt, because a full-strength gold
       band across the top of every card was more gold than the page could
       carry. Each stop was desaturated and its HSL lightness raised until its
       relative luminance matched the original to within 0.003 - halving
       saturation at a fixed lightness would have come out visibly darker,
       since a saturated yellow carries more luminance than a grey of the same
       nominal lightness. Same bands, half the gold, no change in weight. */
    --gilt-rule: linear-gradient(90deg, #b29455 0%, #e1d8b3 38%, #c7ae7b 100%);
    --verdigris-contrast: #1a1a18;
    --verdigris-light: rgba(127, 92, 8, 0.1);
    --verdigris-glow: rgba(127, 92, 8, 0.3);
    --fold: rgba(0,0,0,0.06);

    /* One face, everywhere. The four tokens are deliberately identical so the
       ~200 existing usages keep working and any one of them can be pointed at
       a different family again by editing a single line. Atkinson Hyperlegible
       Next is the variable successor to Atkinson Hyperlegible (200-800 rather
       than just 400/700), with the original as the fallback - if Next doesn't
       resolve, a weight like 600 simply rounds to 700.

       Note --mono is no longer monospaced. Anything that was relying on fixed
       advance widths to line up (`code`, `.stamp`, tabular figures) will now
       set proportionally. */
    --serif: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', Georgia, sans-serif;
    --sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', Georgia, sans-serif;
    --mono: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', Georgia, sans-serif;
    --reading: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', Georgia, sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f4f1ea;
    --ink-light: #d1cec4;
    --ink-faded: #aaa69a;
    --parchment: #171716;
    --parchment-dark: #272621;
    --parchment-aged: #aaa69a;
    --cream: #23231f;
    --wax: #ff8b78;
    --wax-light: rgba(255, 139, 120, 0.16);
    --wax-glow: rgba(255, 139, 120, 0.35);
    --surface-strong: #30302c;
    --surface-strong-text: #fdfcf9;
    --wax-contrast: #171716;
    --wax-hover: #ff7560;
    --verdigris: #e5c76c;
    --verdigris-hover: #ecd693;
    --verdigris-deep: #e5c76c;
    --gilt: linear-gradient(160deg, #ebd584 0%, #ddac4b 100%);
    --gilt-pressed: linear-gradient(160deg, #e7cc6a 0%, #d8a031 100%);
    --gilt-rule: linear-gradient(90deg, #997d47 0%, #dad1b4 38%, #b49b69 100%);
    --verdigris-contrast: #171716;
    --verdigris-light: rgba(229, 199, 108, 0.16);
    --verdigris-glow: rgba(229, 199, 108, 0.35);
    --fold: rgba(244, 241, 234, 0.14);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --ink: #f4f1ea;
        --ink-light: #d1cec4;
        --ink-faded: #aaa69a;
        --parchment: #171716;
        --parchment-dark: #272621;
        --parchment-aged: #aaa69a;
        --cream: #23231f;
        --wax: #ff8b78;
        --wax-light: rgba(255, 139, 120, 0.16);
        --wax-glow: rgba(255, 139, 120, 0.35);
        --surface-strong: #30302c;
        --surface-strong-text: #fdfcf9;
        --wax-contrast: #171716;
        --wax-hover: #ff7560;
        --verdigris: #e5c76c;
        --verdigris-hover: #ecd693;
        --verdigris-deep: #e5c76c;
        --gilt: linear-gradient(160deg, #ebd584 0%, #ddac4b 100%);
        --gilt-pressed: linear-gradient(160deg, #e7cc6a 0%, #d8a031 100%);
        --gilt-rule: linear-gradient(90deg, #997d47 0%, #dad1b4 38%, #b49b69 100%);
        --verdigris-contrast: #171716;
        --verdigris-light: rgba(229, 199, 108, 0.16);
        --verdigris-glow: rgba(229, 199, 108, 0.35);
        --fold: rgba(244, 241, 234, 0.14);
    }
}

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

/* The `hidden` attribute must always win. Several component rules below set
   `display` unconditionally (`.btn { display: inline-flex }` and similar),
   which is the same specificity as `[hidden]` — whichever is declared later
   in this file wins, so a hidden `.btn` (a settings-row "Change" toggle, an
   avatar action, etc.) can silently reappear. This was a real bug, not
   theoretical: see "Settings rows" in design-principles.md. */
[hidden] {
    display: none !important;
}

/* Removed from the visual layout but still read aloud and still part of the
   document outline — for a heading or label the page needs to have but
   shouldn't show. Not for hiding anything a sighted person also shouldn't
   get: that's `hidden`. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

html {
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--reading);
    background: var(--parchment);
    background-image:
        url("noise.png"),
        /* Fixed pixel stops, not percentages: a percentage stop is relative
           to the full page height, so the same 0%/30%/100% gradient fades
           gently over a long scrolling page (the feed) but gets compressed
           into a muddy, barely-white band on a short one (a single form).
           Fixed lengths make the fade read the same near the top of every
           page regardless of how much content follows. */
        linear-gradient(180deg, var(--cream) 0px, var(--parchment) 600px, var(--parchment-dark) 2000px);
    background-repeat: repeat, no-repeat;
    background-size: auto, auto;
    background-blend-mode: overlay, normal;
    color: var(--ink);
    line-height: 1.7;
    min-height: 100vh;
}

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

/* ==========================================
   TYPOGRAPHY — Dramatic & Editorial
   ========================================== */

h1 {
    font-family: var(--serif);
    font-size: clamp(3rem, 12vw, 8rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
}

h2 {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

h3 {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-light);
}

p {
    max-width: 58ch;
    font-size: 1rem;
    color: var(--ink-light);
}

a {
    color: inherit;
    text-decoration-color: var(--verdigris-deep);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--verdigris-deep);
}

small, .meta {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ink-light);
}

code {
    font-family: var(--mono);
    font-size: 0.875em;
    background: var(--parchment-dark);
    padding: 0.1em 0.4em;
}

/* ==========================================
   STAMPS & SEALS
   ========================================== */

.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.875rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 2px solid currentColor;
    border-radius: 2px;
    transform: rotate(-2deg);
}

.seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: var(--verdigris);
    color: var(--verdigris-contrast);
    font-family: var(--serif);
    font-size: 1.5rem;
    font-style: italic;
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 4px 12px var(--verdigris-glow);
    transform: rotate(-8deg);
}

/* ==========================================
   BUTTONS — Wax Seal Style
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* 83% of this button's height was once empty fill - 48px of box around
       8px of letterforms - which is why it read as heavy in whatever accent
       colour it was tried in. Padding came down; the type went up. Both
       directions help that ratio, and the eased transition went too, since
       state changes here are instant (see Motion in design-principles.md).

       Atkinson Hyperlegible, the same face as body text, in title case. This
       was tracked uppercase Geist Mono: fixed advance widths plus 0.15em of
       tracking read as mechanical, and forced caps meant a label could never
       just say what it says. Sentence case at a legible size needs no
       compensating letterspacing. */
    padding: 0.5rem 1.25rem;
    font-family: var(--reading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--ink);
    /* No border on any button. A secondary button therefore has to be a
       shape rather than an outline, so it carries a quiet --parchment-dark
       fill; without one it would be indistinguishable from a run of text.
       .btn-ghost is the borderless, fill-less variant for genuinely
       incidental actions (Skip). */
    background: var(--parchment-dark);
    border: none;
    cursor: pointer;
    position: relative;
}

/* Colour change only. The lift-and-slab this replaced put a hard 4px block
   under every button on the site, primary and secondary alike, and broke the
   Motion rule in design-principles.md twice - it moved and it grew a shadow.
   See the note on .btn-primary:hover. */
.btn:hover {
    background: var(--surface-strong);
    color: var(--surface-strong-text);
}

.btn-primary {
    background: var(--gilt);
    color: var(--verdigris-contrast);
}

/* The 4px hard slab under this button (and the lift-and-grow on hover) is
   what made every primary action read as a heavy 3D block rather than a
   printed mark, and the hover broke the Motion rule in design-principles.md
   twice over - it moved and it grew a shadow. The fill and the 2px border
   carry the emphasis on their own. */
.btn-primary:hover {
    background: var(--gilt-pressed);
}

.btn-primary:active {
    background: var(--gilt-pressed);
}

.btn-ghost {
    background: transparent;
}

.btn-ghost:hover {
    background: var(--parchment-aged);
    color: var(--ink);
    box-shadow: none;
    transform: none;
}

.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */

input, select, textarea {
    font-family: var(--mono);
    font-size: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--cream);
    border: none;
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    transition: all 0.2s;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--verdigris-deep);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    background: var(--parchment);
    border-bottom-color: var(--verdigris-deep);
}

input::placeholder {
    color: var(--ink-faded);
    font-style: italic;
}

label {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-light);
    margin-bottom: 0.625rem;
}

.form-group {
    margin-bottom: 2rem;
}

.field-hint {
    display: block;
    margin-top: 0.5rem;
}

/* ==========================================
   SETTINGS ROWS
   ========================================== */

.settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--parchment-dark);
}

.settings-row:first-child {
    padding-top: 0;
}

.settings-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-row-main {
    flex: 1;
    min-width: 0;
}

.settings-row-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-light);
    margin-bottom: 0.375rem;
}

.settings-row-value {
    font-family: var(--reading);
    font-size: 1rem;
    color: var(--ink);
}

.settings-row-hint {
    font-family: var(--reading);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--ink-faded);
    margin-top: 0.375rem;
}

.settings-row-action {
    flex-shrink: 0;
    padding-top: 0.125rem;
}

/* The click-to-edit control itself: the value while at rest, dotted-underlined
   like content-editable text. JS swaps this node's contents in place — the
   value and its editable form never both exist in the DOM at once. */
.settings-inline-display {
    display: inline-block;
    cursor: text;
    border-bottom: 1px dotted var(--ink-faded);
    padding-bottom: 0.125rem;
}

.settings-inline-display:hover,
.settings-inline-display:focus-visible {
    border-bottom-color: var(--verdigris-deep);
    outline: none;
}

.settings-inline-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-inline-edit input,
.settings-inline-edit select {
    border: none;
    border-bottom: 1px dotted var(--verdigris-deep);
    background: transparent;
    padding: 0 0 0.125rem;
    font-family: var(--reading);
    font-size: 1rem;
    color: var(--ink);
    min-width: 12rem;
}

.settings-inline-edit input:focus,
.settings-inline-edit select:focus {
    outline: none;
    border-bottom-style: solid;
}

.settings-inline-save {
    background: none;
    border: none;
    color: var(--verdigris-deep);
    font-family: var(--serif);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
}

.settings-inline-save:hover {
    color: var(--ink);
}

.settings-inline-save:disabled {
    color: var(--parchment-aged);
    cursor: default;
}

.settings-inline-save:disabled:hover {
    color: var(--parchment-aged);
}

.settings-row-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--parchment-aged);
}

.settings-row-status {
    font-family: var(--mono);
    font-size: 0.75rem;
    margin-top: 0.625rem;
    min-height: 1em;
}

.settings-row-status.success {
    color: var(--ink-light);
}

.settings-row-status.error {
    color: var(--wax);
}

/* ==========================================
   ALERTS — Margin Notes
   ========================================== */

.alert {
    position: relative;
    padding: 1.25rem 1.5rem;
    padding-left: 2rem;
    font-family: var(--reading);
    font-style: italic;
    font-size: 0.9375rem;
    background: var(--cream);
    border-left: none;
    margin-bottom: 2.5rem;
}

.alert::before {
    content: '※';
    position: absolute;
    left: 0.5rem;
    top: 1.25rem;
    font-size: 1rem;
    color: var(--ink-faded);
}

.alert-error {
    background: var(--wax-light);
}

.alert-error::before {
    content: '!';
    color: var(--wax);
    font-weight: bold;
    font-style: normal;
}

/* ==========================================
   LANDING PAGE — The Cover
   ========================================== */

/* The navbar is fixed, so the in-flow children are the reading/rail split,
   the closing call, and the footer. The split takes the leftover height,
   which keeps the last two at the bottom of a short page rather than
   stretching them. */
.landing-page {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
    padding-top: 56px;
}

.landing-page .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem;
}

/* The site's name, set as a name. 0.625rem of uppercase Geist Mono at 0.3em
   tracking made it a barcode - unreadable at a glance and the first thing a
   visitor sees. */
.nav-brand {
    font-family: var(--reading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--ink-faded);
}

.nav-links {
    display: flex;
    gap: 0.75rem;
}

/* ==========================================
   HOMEPAGE — the site's explanation reads down the left; a rail of live
   Review Feed cards sits beside it and stays pinned while that column
   scrolls. The same landing page is available to guests and logged-in
   visitors; the navbar and the rail's next-step action change based on
   session state.
   ========================================== */

/* One column by default (see the two-column rule below): the opening copy,
   then the rail, then the rest of the explanation. */
.landing-split {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 3.5rem 4rem 4rem;
    position: relative;
}

.landing-split::before {
    content: '';
    position: absolute;
    top: 0;
    left: 4rem;
    right: 4rem;
    height: 1px;
    background: var(--fold);
}

.landing-copy {
    display: contents;
}

/* Two columns once there's room for a reading measure and a card side by
   side. The reading sections form their own stack, so the rail's height does
   not determine the distance between them. */
@media (min-width: 1100px) {
    .landing-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
        gap: 3.5rem;
        align-items: start;
        /* .landing-page gives this the page's leftover height; without this
           the auto rows would stretch to absorb it. */
        align-content: start;
    }

    .landing-copy {
        display: flex;
        flex-direction: column;
        gap: 3.5rem;
        grid-column: 1;
    }

    .review-rail {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 1099px) {
    .landing-split > .landing-copy > .hero-copy {
        order: 1;
    }

    .landing-split > .review-rail {
        order: 2;
    }

    .landing-split > .landing-copy > .open-data {
        order: 3;
    }

    .landing-split > .landing-copy > .landing-contribute {
        order: 4;
    }
}

.hero-copy h1 {
    margin-bottom: 1.5rem;
    max-width: 700px;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.hero-subtitle {
    font-family: var(--sans);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--ink-light);
    max-width: 480px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.hero-cta .btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

/* A deliberately odd, handmade touch - the rest of the page is built from a
   fairly disciplined component system, and this is the one thing that looks
   taped on rather than assembled. The slight rotation is what carries that,
   not the colour, so it survives a repaint. Keep it that way.

   It was a hardcoded yellow (#f5e960), which sat about one step from the gilt
   and read as the same idea twice. Wax red against gold is the older pairing
   anyway - rubric and leaf on the same page - and being tokenised it now
   inverts correctly in dark mode instead of staying a fixed colour.

   This is the one decorative use of --wax on the site; everywhere else red
   means an error or a destructive action. It's a named exception, not a
   precedent - see "The accent" in design-principles.md.

   The negative margin cancels most of the rail's gap so the note still
   overlaps the first card the way it did above the old single demo slot. */
.hero-ribbon {
    display: inline-block;
    align-self: flex-start;
    position: relative;
    left: 1rem;
    z-index: 2;
    background: var(--wax);
    color: var(--wax-contrast);
    font-family: var(--reading);
    font-size: 0.8125rem;
    font-style: italic;
    padding: 0.5rem 0.875rem;
    transform: translateY(2.25rem) rotate(-2deg);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.12);
    max-width: 100%;
    margin-bottom: -0.5rem;
}

/* ---- Review rail ---------------------------------------------------------
   The rail is its own grid column, so a card changing height - a result
   revealed, a longer question swapped in - can't move the reading column
   beside it. That's what makes the fixed-height, inner-scrolling hero slot
   this replaces unnecessary: nothing here scrolls inside itself and no card
   is ever clipped. */
.review-rail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

@media (min-width: 1100px) {
    /* Pinned beside the reading column until that column runs out, so the
       questions stay in reach while someone reads about the site. The offset
       clears the fixed 56px navbar. */
    .review-rail {
        position: sticky;
        top: calc(56px + 1.5rem);
    }

    /* A rail taller than the viewport would pin its lower half permanently
       off-screen. homepage-feed.js measures the rail and releases it rather
       than giving it a scrollbar. */
    .review-rail.review-rail-unpinned {
        position: static;
    }
}

.review-rail-slot[aria-busy="true"] {
    opacity: 0.6;
}

/* One question on a single column, not a stack: a second card would push the
   page's explanation well below the fold. Both slots are still rendered, so
   widening the window reveals the second one without a reload. */
@media (max-width: 1099px) {
    .review-rail-slot + .review-rail-slot {
        display: none;
    }

    /* Keep the card near its two-column width rather than letting it run the
       full measure of a 1000px-wide window. */
    .review-rail {
        max-width: 560px;
    }
}

/* Keep the homepage rail's answered card surface solid too; only the card's
   contents should look inactive. */
.review-rail .feed-card-done {
    opacity: 1;
}

/* The rail's one exit, at its foot rather than inside a card: it's rendered
   by homepage-feed.js once a logged-in member has no question left waiting
   in the rail, so it always turns up in the same place regardless of which
   card they answered first. */
.review-rail-handoff {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}

.review-rail-handoff p {
    margin: 0;
    font-family: var(--reading);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--ink-light);
}

/* A rail card carries more weight than the same component in /review's feed -
   this is the page's demonstration of what the site does - but not the
   hero-sized type it had as a single card, because two of them now share
   the column. */
.review-rail .feed-card {
    margin-bottom: 0;
    padding: 1.75rem 2rem;
    /* A more noticeable lift than the standard .card shadow - these are the
       elements on the page that should feel like they're sitting above the
       paper, not printed on it. */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.12);
}

/* No fill. This was a filled wax block when the card was a single hero and
   needed the weight; the 4px wax rule along the card's top edge and the
   raised shadow carry that now. A filled verdigris block sat directly under
   that red rule with a yellow post-it across it, which is three saturated
   colours in two inches - see the note on the token. */
/* .feed-card::before is suppressed for the run of cards in /review's feed
   (repeating it down a column turns a deliberate mark into stripes). A rail
   card is a single manuscript page again, so it gets the rule back - as a
   gradient, which the border-top it used before could not be. */
.review-rail .feed-card::before {
    display: block;
    height: 4px;
    background: var(--gilt-rule);
}

.review-rail .feed-card-label {
    display: inline-block;
    font-size: 0.75rem;
    margin-bottom: 1.125rem;
}

/* Rail only, and only once answered: homepage-feed.js rewrites this badge
   from the card's kind to "YOU SAID: AGREE", so it stops being the archive's
   label and becomes the reader's mark - and turns wax to say so. /review
   leaves the label alone and reports saving in .feed-card-status instead, so
   its labels stay verdigris throughout. */
.review-rail .feed-card-done .feed-card-label {
    color: var(--verdigris-deep);
}

.review-rail .feed-card-statement {
    font-size: 1.375rem;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.review-rail .feed-card-attribution {
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
}

.review-rail .scale5 {
    gap: 0.5rem;
    margin-bottom: 0;
}

.review-rail .scale5-btn {
    padding: 0.75rem 0.625rem;
    font-size: 0.6875rem;
}

/* The comparison card's side-by-side columns need the feed's full width.
   In a 460px rail they'd be two ~200px slivers, so the two responses stack
   and stay readable - which is the whole point of the card. */
.review-rail .comparison-columns {
    grid-template-columns: 1fr;
}

/* Keep the pulse's response area at its post-vote height from the start.
   The breakdown is revealed in the same reserved space, so showing results
   and replacing the controls never pushes the content below the card down. */
.homepage-pulse-response {
    position: relative;
    min-height: 5.5rem;
    margin-bottom: 1.25rem;
}

.homepage-pulse-response .pulse-breakdown {
    position: absolute;
    inset: 0;
    justify-content: center;
    margin: 0;
}

/* A stronger tell that this is the chosen answer, not just a filled button -
   matches the "selected answers in a more noticeable way" treatment. */
.review-rail .scale5-btn.active {
    box-shadow: 0 0 0 4px var(--verdigris-glow);
}

.review-rail .feed-card-hint {
    font-size: 0.9375rem;
}

/* The result no longer needs the question's instruction, but its reserved
   line box keeps the card and the rail exactly where they were. */
.feed-card-result-hint {
    visibility: hidden;
}

.homepage-demo-entering {
    animation: homepage-demo-fade-in 0.2s ease;
}

@keyframes homepage-demo-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-demo-entering {
        animation: none;
    }
}

.homepage-demo-error {
    font-size: 0.875rem;
    color: var(--ink-light);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.homepage-demo-next {
    margin-left: auto;
}

.homepage-nudge-lead {
    font-family: var(--serif);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.homepage-nudge-actions {
    justify-content: flex-start;
    gap: 0.75rem;
}

.homepage-nudge-continue {
    flex-shrink: 0;
}

.homepage-nudge-account {
    margin-top: 1rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    line-height: 1.6;
    color: var(--ink-faded);
}

.homepage-nudge-account a {
    color: var(--ink-light);
    text-decoration-thickness: 1px;
}

@media (max-width: 900px) {
    .landing-split {
        padding: 2.5rem 1.5rem 3rem;
        gap: 2.5rem;
    }

    .hero-ribbon {
        transform: translateY(1.25rem) rotate(-2deg);
    }

    .review-rail .feed-card {
        padding: 1.5rem 1.5rem;
    }
}

/* ---- Response report ------------------------------------------------------
   The dashboard's one backward-looking card: what became of something the
   member wrote, rather than another queue asking for more work. Each row runs
   prompt, response, reception - the prompt first because it's the context
   that makes the response legible at all.

   Lives here rather than in dashboard.twig's page-local <style> block; that
   block is why the dashboard kept the old red through a palette change, and
   it isn't a pattern to extend. */
.response-report {
    list-style: none;
    margin: 0;
    padding: 0;
}

.response-report-item {
    padding: 1rem 0;
    border-top: 1px solid var(--fold);
}

.response-report-item:first-child {
    border-top: 0;
    padding-top: 0.25rem;
}

.response-report-prompt {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-bottom: 0.375rem;
    overflow-wrap: anywhere;
}

/* A preview, not the whole thing - eight full responses would bury the
   reception line that's the point of the card. The member wrote these, so
   they only need enough to recognise which one it is. */
.response-report-body {
    color: var(--ink);
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.response-report-reception {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-light);
    max-width: none;
}

.response-report-waiting {
    font-style: italic;
    color: var(--ink-faded);
}

/* ---- Open data ----------------------------------------------------------- */
/* No panel and no background: the reading column is one measure, flush to the
   same left edge as the headline above it, with a hairline rule marking the
   section break. A cream box here would both indent the text away from that
   edge and put a second, near-identical card surface next to the real cards
   in the rail. The full-width band this section used to be isn't available
   either - it would cut straight across the questions. */
.open-data {
    padding: 2.5rem 0 0;
    border-top: 1px solid var(--fold);
}

.open-data-purpose,
.open-data h2,
.open-data > p,
.open-data-cta {
    max-width: 700px;
}

.open-data-purpose {
    font-family: var(--reading);
    font-style: italic;
    color: var(--ink-light);
    margin-bottom: 2rem;
}

.open-data h2 {
    margin-bottom: 1.25rem;
}

.open-data p {
    margin-bottom: 1rem;
}

.open-data-cta {
    margin-top: 1.5rem;
}

.landing-contribute {
    padding-top: 2.5rem;
    border-top: 1px solid var(--fold);
}

.landing-contribute h2 {
    margin-bottom: 1rem;
}

.landing-contribute p {
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
    .open-data {
        padding: 2rem 0 0;
    }
}

/* ---- Disagreement --------------------------------------------------------- */
.disagreement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 3rem;
    padding: 5rem 4rem;
    background: var(--cream);
    border-top: 1px solid var(--fold);
    align-items: start;
}

.disagreement-copy h2 {
    margin-bottom: 1.25rem;
}

.disagreement-copy p {
    margin-bottom: 1rem;
}

.disagreement-example {
    margin-bottom: 0;
}

.disagreement-sample-size {
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faded);
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .disagreement {
        grid-template-columns: 1fr;
        padding: 3rem 1.5rem;
        gap: 2rem;
    }
}

/* ---- Final CTA -------------------------------------------------------------- */
/* Spans the page below the split, under both columns. Being addressed to the
   whole page is what earns the centring - centred text inside the flush-left
   reading column would just read as a block that lost its alignment. */
.final-cta {
    padding: 5rem 4rem 4rem;
    border-top: 1px solid var(--fold);
    text-align: center;
}

.final-cta h2 {
    margin-bottom: 0.75rem;
}

.final-cta p {
    margin: 0 auto 1.5rem;
}

.final-cta p.final-cta-links {
    margin-top: 2rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.final-cta-upload {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--ink-faded);
}

@media (max-width: 900px) {
    .final-cta {
        padding: 3rem 1.5rem;
    }
}

/* Footer */
.footer {
    padding: 2.5rem 4rem;
    border-top: 1px solid var(--fold);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer p {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
}

/* ==========================================
   APP LAYOUT — The Archive
   ========================================== */

.app-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: var(--surface-strong);
    color: var(--surface-strong-text);
    z-index: 100;
}

.app-navbar .nav-brand {
    color: var(--surface-strong-text);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar-placeholder {
    background: var(--verdigris);
    color: var(--verdigris-contrast);
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 600;
}

.user-name {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--parchment-aged);
}

.user-menu-widget {
    position: relative;
}

.theme-menu {
    position: relative;
}

.theme-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.theme-menu-trigger:hover,
.theme-menu-trigger[aria-expanded="true"] {
    background: var(--parchment-dark);
}

.theme-menu-trigger:focus-visible {
    outline: 2px solid var(--verdigris-deep);
    outline-offset: 2px;
}

.theme-menu-icon {
    font-size: 1rem;
    line-height: 1;
}

.theme-menu-panel {
    min-width: 260px;
}

.theme-switcher {
    min-width: 0;
    padding: 0.875rem 1rem 1rem;
    border: 0;
}

.theme-switcher legend {
    padding: 0;
    margin-bottom: 0.625rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faded);
}

.theme-toggle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 2.5rem;
    padding: 2px;
    border: 1px solid var(--parchment-aged);
    border-radius: 999px;
    background: var(--parchment);
    isolation: isolate;
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc((100% - 4px) / 3);
    border-radius: 999px;
    background: var(--cream);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: transform 0.2s ease;
    z-index: 0;
}

.theme-toggle[data-theme-track="system"] .theme-toggle-thumb {
    transform: translateX(100%);
}

.theme-toggle[data-theme-track="dark"] .theme-toggle-thumb {
    transform: translateX(200%);
}

.theme-toggle-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2rem;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--ink-faded);
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.theme-toggle-option:hover,
.theme-toggle-option:focus-visible {
    color: var(--ink);
    outline: 2px solid var(--verdigris-deep);
    outline-offset: 2px;
    border-radius: 999px;
}

.theme-toggle-option[aria-checked="true"] {
    color: var(--ink);
}

.auth-page > .theme-menu {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.user-menu-trigger .user-name {
    color: var(--parchment-aged);
}

.user-menu-trigger:hover .user-name,
.user-menu-trigger[aria-expanded="true"] .user-name {
    color: var(--surface-strong-text);
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    min-width: 200px;
    background: var(--cream);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.24),
        0 3px 8px rgba(0, 0, 0, 0.12);
    z-index: 200;
}

.user-menu-widget > .user-menu-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.user-menu-panel-header {
    padding: 0.75rem 1rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faded);
    border-bottom: 1px solid var(--parchment-dark);
}

.user-menu-item {
    display: block;
    padding: 0.75rem 1rem;
    font-family: var(--reading);
    font-size: 0.9375rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--cream);
}

.user-menu-item:hover,
.user-menu-item:focus {
    background: var(--parchment-dark);
    outline: none;
}

.user-menu-divider {
    border: none;
    border-top: 1px solid var(--parchment-dark);
    margin: 0;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    min-height: 100vh;
    padding-top: 56px;
}

/* Sidebar — The Index */
.sidebar {
    width: auto;
    min-height: calc(100vh - 56px);
    height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
    align-self: start;
    background: var(--cream);
    border-right: 1px solid var(--fold);
    padding: 2rem 0;
    overflow-y: auto;
    z-index: 90;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
}

.guest-sidebar-content {
    padding: 0 1.5rem;
}

.guest-sidebar-content .btn {
    width: 100%;
    justify-content: center;
}

.sidebar-section-label {
    padding: 2rem 1.5rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-light);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    font-family: var(--reading);
    font-size: 0.875rem;
    color: var(--ink-light);
    text-decoration: none;
    transition: all 0.15s;
    position: relative;
}

.sidebar-link:hover {
    color: var(--ink);
    background: var(--parchment);
}

.sidebar-link.active {
    color: var(--verdigris-deep);
    font-style: italic;
}

.sidebar-link.active::before {
    content: '→';
    position: absolute;
    left: 0.5rem;
    font-style: normal;
}

.sidebar-link svg {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

.sidebar-link:hover svg,
.sidebar-link.active svg {
    opacity: 0.8;
}

.sidebar-link-highlight {
    background: var(--verdigris);
    color: var(--verdigris-contrast);
}

.sidebar-link-highlight:hover {
    background: var(--verdigris-hover);
    color: var(--verdigris-contrast);
}

.sidebar-link-highlight.active {
    color: var(--verdigris-contrast);
    background: var(--verdigris-hover);
}

.sidebar-link-highlight svg {
    opacity: 1;
}

.sidebar-link-highlight:hover svg,
.sidebar-link-highlight.active svg {
    opacity: 1;
}

.sidebar-divider {
    height: 1px;
    background: var(--fold);
    margin: 1.5rem 1.5rem;
    border: none;
}

/* Main Content */
.main-content {
    grid-column: 2;
    min-width: 0;
    margin-left: 0;
    padding: 3rem 4rem;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0;
}
.page-header h1 {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.page-subtitle {
    font-family: var(--reading);
    font-style: italic;
    color: var(--ink-faded);
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

/* ==========================================
   CARDS — Manuscript Pages
   ========================================== */

.card {
    background: var(--cream);
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.03);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gilt-rule);
}

.card h2 {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

.card h3 {
    margin-bottom: 1rem;
}

/* ==========================================
   STATS — Ledger Style
   ========================================== */

.stats-grid {
    display: flex;
    gap: 0;
    margin-bottom: 3rem;
    background: var(--cream);
    border: 1px solid var(--ink);
}

.stat-card {
    flex: 1;
    padding: 1.75rem 1.5rem;
    text-align: center;
    border-right: 1px solid var(--fold);
    position: relative;
}

.stat-card:last-child {
    border-right: none;
}

.stat-value {
    font-family: var(--serif);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-value.negative {
    color: var(--wax);
}

.stat-label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-light);
}

/* ==========================================
   DOCUMENT LIST — Archive Index
   ========================================== */

.document-list {
    display: flex;
    flex-direction: column;
}

.document-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--fold);
    text-decoration: none;
    transition: all 0.15s;
}

.document-card:first-child {
    border-top: 1px solid var(--fold);
}

a.document-card-link {
    color: inherit;
    cursor: pointer;
}

a.document-card-link * {
    text-decoration: none;
}

.document-card:hover {
    background: var(--cream);
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.document-votes {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    min-width: 60px;
    text-align: right;
}

.document-votes.positive { color: var(--ink); }
.document-votes.negative { color: var(--wax); }

.vote-score {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
}

.vote-score.positive { color: var(--ink); }
.vote-score.negative { color: var(--wax); }

.document-info {
    min-width: 0;
}

.document-title {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.document-title:hover {
    color: var(--verdigris-deep);
}

.document-meta {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.375rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
    letter-spacing: 0.05em;
}

.document-type {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid currentColor;
}

.type-text { color: var(--ink-light); background: var(--parchment-dark); border-color: transparent; }
.type-markdown { color: var(--ink); background: var(--parchment-dark); border-color: transparent; }
.type-html { color: var(--cream); background: var(--verdigris-deep); border-color: transparent; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
}

.page-info {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faded);
    letter-spacing: 0.1em;
}

/* ==========================================
   DOCUMENT VIEW — Reading a Manuscript
   ========================================== */

.document-view-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 3rem;
    align-items: start;
}

.document-main .card {
    padding: 3rem;
}

.document-content {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.document-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: var(--reading);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ink-light);
    max-width: 100%;
}

.document-sidebar .card {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

/* Shared on/off switch (the checked track + sliding thumb below): built once
   here and reused wherever a pure on/off preference needs one, rather than a
   page-local copy - see "When extending the theme" in design-principles.md. */
.switch {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    cursor: pointer;
    line-height: 1.3;
    color: var(--ink-light);
    position: relative;
}

.switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch input:checked + .toggle-track {
    background: var(--surface-strong);
    border-color: var(--surface-strong);
}

.switch input:checked + .toggle-track .toggle-thumb {
    transform: translateX(16px);
    background: var(--parchment);
}

.switch input:focus-visible + .toggle-track {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.auto-next-toggle {
    font-size: 0.62rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.toggle-track {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--parchment);
    border: 1px solid var(--parchment-dark);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex: 0 0 auto;
}

.toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}

.toggle-text {
    color: var(--ink-light);
}

.auto-next-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 999;
}

.auto-next-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

.auto-next-overlay-content {
    background: var(--cream);
    color: var(--ink);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    min-width: 220px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.auto-next-overlay-content p {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.auto-next-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(15, 15, 15, 0.2);
    border-top-color: var(--ink);
    display: inline-block;
    animation: autoNextSpin 0.8s linear infinite;
}

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

/* Voting — The Seal */
.voting-card {
    text-align: center;
    background: var(--surface-strong);
    color: var(--surface-strong-text);
    padding: 2rem 1.5rem;
    position: relative;
    overflow: visible;
    z-index: 0;
}

.voting-card::before {
    background: var(--gilt-rule);
    z-index: 0;
}

.voting-card h3 {
    color: var(--surface-strong-text);
    margin-bottom: 0.5rem;
}

.voting-description {
    font-family: var(--reading);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-bottom: 1.5rem;
}

.curation-guidance {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ink-faded);
    margin: 0 0 1.25rem;
}

.voting-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    overflow: visible;
}

.vote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: 1px solid var(--ink-faded);
    color: var(--ink-faded);
    cursor: pointer;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.vote-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.vote-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

.vote-btn:disabled:hover {
    border-color: var(--ink-faded);
    color: var(--ink-faded);
}

.vote-btn.active:disabled {
    opacity: 1;
}

.vote-btn.active.vote-up {
    background: var(--parchment);
    border-color: var(--parchment);
    color: var(--ink);
}

.vote-btn.active.vote-down {
    background: var(--wax);
    border-color: var(--wax);
    color: var(--cream);
}

.vote-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    bottom: calc(100% + 12px);
    background: var(--cream);
    color: var(--ink);
    border: 1px solid var(--parchment-dark);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 200;
}

.vote-btn:hover .vote-tooltip,
.vote-btn:focus-visible .vote-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.vote-btn.active.vote-neutral {
    background: var(--parchment-dark);
    border-color: var(--parchment);
    color: var(--ink);
}

.vote-count {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
}

.vote-label {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.curation-reason-group {
    margin: 0 auto 1.25rem;
    max-width: 24rem;
}

.curation-reason-group label {
    display: block;
    margin-bottom: 0.35rem;
}

.curation-reason-group small {
    display: block;
    margin-top: 0.35rem;
    color: var(--ink-faded);
}

.vote-total-display {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--parchment-aged);
    letter-spacing: 0.1em;
}

#vote-total {
    font-family: var(--serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--surface-strong-text);
}

#vote-total.negative { color: var(--wax); }

.vote-summary {
    margin-top: 0.75rem;
}

.vote-bar {
    width: 100%;
    height: 8px;
    background: var(--fold);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    margin-bottom: 0.5rem;
}

.vote-bar.empty {
    height: auto;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--fold);
    background: transparent;
    color: var(--parchment-aged);
    font-size: 0.75rem;
}

.vote-bar-fill {
    height: 100%;
}

/* Was --surface-strong-text: a near-white fill on a near-transparent track,
   so the majority share of a document's votes was all but invisible in light
   mode. It's collective data, which makes verdigris both the fix and the
   right answer. */
.vote-bar-fill.up {
    background: var(--verdigris-deep);
}

.vote-bar-fill.down {
    background: var(--wax);
}

.vote-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--parchment-aged);
}

.vote-stats .up-votes {
    color: var(--ink-light);
}

.vote-stats .down-votes {
    color: var(--wax);
}

.vote-stats .ratio {
    font-family: var(--mono);
}

.spotlight-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.spotlight-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.spotlight-btn.active {
    background: var(--surface-strong);
    border-color: var(--surface-strong);
    color: var(--surface-strong-text);
}

.spotlight-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spotlight-count {
    font-family: var(--serif);
    font-weight: 600;
}

/* Meta */
.meta-list {
    font-size: 0.8125rem;
}

.meta-list dt {
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
    margin-top: 1rem;
}

.meta-list dt:first-child { margin-top: 0; }

.meta-list dd {
    font-family: var(--reading);
    color: var(--ink);
    margin-top: 0.25rem;
}

/* Tags */
.tags-card h3 { margin-bottom: 0.375rem; }

.tags-description {
    font-family: var(--reading);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-bottom: 1.25rem;
}

.tag-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.tag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--fold);
}

.tag-name {
    font-family: var(--reading);
    font-size: 0.875rem;
}

.tag-votes {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.tag-vote-btn {
    padding: 0.25rem;
    background: none;
    border: none;
    color: var(--ink-faded);
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s;
}

.tag-vote-btn:hover { opacity: 1; color: var(--ink); }
.tag-vote-btn.active.tag-vote-up { opacity: 1; color: var(--ink); }
.tag-vote-btn.active.tag-vote-down { opacity: 1; color: var(--wax); }

.tag-vote-count {
    font-family: var(--mono);
    font-size: 0.625rem;
    min-width: 2rem;
    text-align: center;
    color: var(--ink-faded);
}

.no-tags {
    font-style: italic;
    color: var(--ink-faded);
    font-size: 0.875rem;
}

.add-tag-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.add-tag-form input {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.8125rem;
}

.add-tag-btn { width: 100%; }

/* Collections */
.collection-card h3 { margin-bottom: 0.375rem; }

.collection-description {
    font-family: var(--reading);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-bottom: 1rem;
    max-width: none;
}

.collection-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    max-height: 200px;
    overflow-y: auto;
}

.collection-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--parchment);
    cursor: pointer;
    font-family: var(--reading);
    font-size: 0.875rem;
    margin-bottom: 0;
    transition: background 0.15s;
}

.collection-item:hover {
    background: var(--parchment-dark);
}

.collection-item input[type="checkbox"] {
    width: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.collection-item span {
    flex: 1;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.collection-item small {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
}

.no-collections {
    font-style: italic;
    color: var(--ink-faded);
    font-size: 0.875rem;
}

.new-collection-form {
    margin-bottom: 1rem;
}

.new-collection-form input {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.625rem;
    font-size: 0.875rem;
}

.new-collection-form .form-actions {
    display: flex;
    gap: 0.5rem;
}

.new-collection-form .btn {
    flex: 1;
}

#new-collection-btn {
    width: 100%;
}

/* ==========================================
   REVIEW PAGE
   ========================================== */

.review-container {
    max-width: 700px;
    margin: 0 auto;
}

.review-document {
    margin-bottom: 2rem;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ink);
}

.review-content {
    max-height: 45vh;
    overflow-y: auto;
    padding: 2rem;
    background: var(--cream);
}

.review-content pre {
    font-family: var(--reading);
    font-size: 1rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.review-actions {
    text-align: center;
    padding: 3rem;
    background: var(--cream);
    margin-top: 2rem;
}

.review-actions h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.review-actions > p {
    font-style: italic;
    color: var(--ink-faded);
    margin-bottom: 2.5rem;
}

.review-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.review-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 2.5rem;
    background: var(--parchment);
    border: 2px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.2s;
}

.review-btn svg { width: 28px; height: 28px; }

.btn-nice:hover, .btn-nice.voted {
    background: var(--surface-strong);
    color: var(--surface-strong-text);
}

.btn-not-nice:hover, .btn-not-nice.voted {
    background: var(--wax);
    border-color: var(--wax);
    color: var(--cream);
}

.btn-skip:hover {
    background: var(--parchment-dark);
}

.review-progress {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
    letter-spacing: 0.1em;
}

/* ==========================================
   PROFILE PAGE
   ========================================== */

.profile-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
}

.profile-card {
    text-align: center;
    background: var(--surface-strong);
    color: var(--surface-strong-text);
    padding: 2.5rem 2rem;
}

.profile-card::before { background: var(--gilt-rule); }

.profile-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 600;
    background: var(--verdigris);
    color: var(--verdigris-contrast);
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.2),
        0 4px 12px rgba(0,0,0,0.3);
}

.profile-avatar-image,
.profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-placeholder {
    background: var(--verdigris);
    color: var(--verdigris-contrast);
}

.profile-name {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.profile-joined {
    font-family: var(--mono);
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--parchment-aged);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ink-faded);
}

.profile-stat { text-align: center; }

.profile-stat .stat-value {
    font-size: 1.75rem;
    color: var(--surface-strong-text);
}

.profile-stat .stat-value.negative { color: var(--wax); }

.profile-stat .stat-label {
    font-size: 0.5rem;
    color: var(--parchment-aged);
}

.profile-main .card { margin-bottom: 1.5rem; }

.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: var(--verdigris);
    color: var(--verdigris-contrast);
    margin-left: 0.75rem;
    transform: rotate(-2deg);
}

.empty-message {
    font-style: italic;
    color: var(--ink-faded);
}

/* Activity */
.activity-list { display: flex; flex-direction: column; }

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px dotted var(--fold);
}

.activity-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 600;
}

.activity-icon.up { color: var(--ink); }
.activity-icon.down { color: var(--wax); }
.activity-icon.neutral { color: var(--ink-light); }

.activity-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.activity-link {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink);
    text-decoration: none;
}

.activity-link:hover { color: var(--verdigris-deep); }

.activity-time {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
    margin-left: auto;
}

/* ==========================================
   PROFILE RECORD — A Member's Archive Ledger
   ========================================== */

.profile-page-header {
    margin-bottom: 2rem;
}

.profile-kicker,
.profile-record-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--verdigris-deep);
    margin-bottom: 0.5rem;
}

.profile-page-header .profile-kicker {
    margin-bottom: 0.375rem;
}

.profile-page-header .page-actions {
    display: flex;
    gap: 0.5rem;
}

.profile-intro-card {
    background:
        linear-gradient(135deg, var(--cream) 0%, var(--verdigris-light) 100%);
    padding: 2.25rem 2.5rem;
}

.profile-intro-heading,
.profile-section-heading,
.profile-timeline-topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.profile-intro-heading .profile-record-label,
.profile-section-heading h3 {
    margin-bottom: 0;
}

.profile-member-id,
.profile-section-count,
.profile-analysis-total {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    white-space: nowrap;
}

.profile-summary {
    max-width: 52ch;
    margin-top: 1rem;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.profile-next-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dotted var(--parchment-aged);
    font-size: 0.875rem;
    color: var(--ink-light);
}

.profile-next-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border: 1px solid var(--verdigris-deep);
    color: var(--verdigris-deep);
    font-family: var(--serif);
    font-size: 1.25rem;
}

.profile-record-stats {
    margin-bottom: 2rem;
}

.profile-record-stats .stat-card {
    min-width: 0;
}

.profile-record-stats .stat-card.highlight {
    background: linear-gradient(135deg, var(--cream) 0%, var(--verdigris-light) 100%);
}

.profile-stat-sub {
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
    color: var(--ink-faded);
}

.profile-analysis-grid,
.profile-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.profile-analysis-card,
.profile-resource-card {
    min-width: 0;
}

.profile-analysis-card .card-description,
.profile-resource-card .card-description,
.profile-activity-card .card-description,
.profile-uploads-card .card-description {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.profile-mix-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem;
}

.profile-mix-label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.375rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-light);
}

.profile-mix-label strong {
    color: var(--ink);
}

.profile-mix-bar,
.profile-vote-bar {
    display: flex;
    overflow: hidden;
    height: 0.5rem;
    background: var(--parchment-dark);
}

.profile-mix-fill,
.profile-vote-fill {
    display: block;
    height: 100%;
}

.profile-mix-documents { background: var(--ink); }
.profile-mix-responses { background: var(--verdigris-deep); }
.profile-mix-comparisons { background: var(--parchment-aged); }
.profile-mix-pulses { background: var(--ink-faded); }

.profile-footnote {
    margin-top: 1.25rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    line-height: 1.5;
    color: var(--ink-faded);
}

.profile-vote-bar {
    height: 1rem;
    margin-top: 1.75rem;
}

.profile-vote-positive { background: var(--verdigris-deep); }
.profile-vote-neutral { background: var(--parchment-aged); }
.profile-vote-negative { background: var(--wax); }

.profile-vote-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.875rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
}

.legend-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: currentColor;
}

.legend-dot.positive { color: var(--ink); }
.legend-dot.neutral { color: var(--parchment-aged); }
.legend-dot.negative { color: var(--wax); }

.profile-activity-card,
.profile-uploads-card {
    margin-top: 1.5rem;
}

.profile-timeline {
    margin-top: 1.25rem;
}

.profile-timeline-item {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 0;
    border-top: 1px dotted var(--fold);
}

.profile-timeline-item:last-child {
    border-bottom: 1px dotted var(--fold);
}

.profile-timeline-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    font-family: var(--serif);
    font-size: 1.1rem;
}

.profile-timeline-positive { color: var(--ink); }
.profile-timeline-negative { color: var(--wax); }
.profile-timeline-neutral { color: var(--ink-faded); }

.profile-timeline-body {
    min-width: 0;
    flex: 1;
}

.profile-timeline-topline strong {
    font-family: var(--reading);
    font-size: 0.875rem;
    font-weight: 700;
}

.profile-timeline-topline time {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--ink-faded);
    letter-spacing: 0.04em;
}

.profile-timeline-detail {
    display: block;
    max-width: 58ch;
    overflow: hidden;
    margin-top: 0.125rem;
    color: var(--ink-faded);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

a.profile-timeline-detail:hover {
    color: var(--verdigris-deep);
}

.profile-resource-grid {
    margin-top: 1.5rem;
}

.profile-small-link {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--verdigris-deep);
    text-decoration: none;
}

.profile-topic-list,
.profile-collection-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
}

.profile-topic-row,
.profile-collection-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px dotted var(--fold);
    color: var(--ink);
    text-decoration: none;
}

.profile-topic-row:last-child,
.profile-collection-row:last-child {
    border-bottom: 1px dotted var(--fold);
}

.profile-topic-row:hover,
.profile-collection-row:hover {
    color: var(--verdigris-deep);
}

.profile-topic-name,
.profile-collection-row strong {
    font-family: var(--reading);
    font-size: 0.875rem;
}

.profile-topic-count,
.profile-collection-row em {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-style: normal;
    color: var(--ink-faded);
}

.profile-collection-row > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-collection-row small {
    overflow: hidden;
    margin-top: 0.15rem;
    color: var(--ink-faded);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-marks-card h3 {
    margin-bottom: 1.25rem;
}

.profile-marks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-mark {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-mark-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 1px solid var(--verdigris-deep);
    color: var(--verdigris-deep);
    font-size: 0.875rem;
    transform: rotate(-8deg);
}

.profile-mark strong,
.profile-mark small {
    display: block;
}

.profile-mark strong {
    font-family: var(--reading);
    font-size: 0.8125rem;
}

.profile-mark small {
    margin-top: 0.125rem;
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--ink-faded);
}

.profile-side-note {
    padding: 1.5rem;
    border-left: 2px solid var(--verdigris-deep);
}

.profile-side-note p {
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.5;
}

/* ==========================================
   SEARCH
   ========================================== */

.search-card { margin-bottom: 2rem; padding: 2rem; }

.search-form { display: flex; flex-direction: column; gap: 1.5rem; }

.search-input-wrapper { position: relative; }

.search-input {
    width: 100%;
    padding: 1rem 1.25rem;
    padding-right: 3rem;
    font-family: var(--reading);
    font-size: 1.125rem;
    font-style: italic;
    background: var(--parchment);
    border: none;
    border-bottom: 2px solid var(--ink);
}

.search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--ink-faded);
    cursor: pointer;
}

.search-btn:hover { color: var(--ink); }

.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
}

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

.filter-group select {
    padding: 0.625rem;
    min-width: 150px;
    background: var(--cream);
    border: 1px solid var(--ink-faded);
}

.results-header { margin-bottom: 1.5rem; }

.results-count {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faded);
    letter-spacing: 0.1em;
}

.active-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: var(--surface-strong);
    color: var(--surface-strong-text);
    font-family: var(--mono);
    font-size: 0.625rem;
}

.remove-filter {
    color: var(--parchment-aged);
    text-decoration: none;
}

.remove-filter:hover { color: var(--surface-strong-text); }

.document-preview {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--cream);
    font-family: var(--reading);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-light);
    border-left: 3px solid var(--verdigris-deep);
    max-height: 60px;
    overflow: hidden;
}

.search-tips {
    padding: 3rem;
    text-align: center;
}

.search-tips h3 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 1.5rem;
}

.search-tips ul {
    list-style: none;
    font-style: italic;
    color: var(--ink-faded);
}

.search-tips li { margin-bottom: 0.5rem; }

/* ==========================================
   TAGS BROWSER
   ========================================== */

.tags-browser {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    background: var(--fold);
    border: 1px solid var(--fold);
}

.tag-card {
    display: block;
    padding: 1.25rem;
    background: var(--cream);
    text-decoration: none;
    transition: all 0.15s;
}

.tag-card:hover {
    background: var(--parchment);
}

.tag-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.tag-card-name {
    font-family: var(--reading);
    font-weight: 400;
    color: var(--ink);
}

.tag-card-count {
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--ink-faded);
}

.tag-card-votes {
    display: flex;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.625rem;
}

.tag-card-votes .vote-up { color: var(--ink-light); }
.tag-card-votes .vote-down { color: var(--wax); }

/* ==========================================
   LEADERBOARD
   ========================================== */

.leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.leaderboard-list { display: flex; flex-direction: column; }

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px dotted var(--fold);
}

.leaderboard-item .rank {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    width: 2rem;
    text-align: center;
    color: var(--ink-faded);
}

.leaderboard-item .rank.top-1 { color: var(--ink); font-size: 1.5rem; }
.leaderboard-item .rank.top-2 { color: var(--ink-light); }
.leaderboard-item .rank.top-3 { color: var(--verdigris-deep); }

.leaderboard-name {
    flex: 1;
    font-family: var(--reading);
    color: var(--ink);
    text-decoration: none;
}

.leaderboard-name:hover { color: var(--verdigris-deep); }

.leaderboard-value {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faded);
}

.leaderboard-value.positive { color: var(--ink); }
.leaderboard-value.negative { color: var(--wax); }

/* ==========================================
   MY DOCUMENTS
   ========================================== */

.my-document-card {
    grid-template-columns: 1fr auto;
}

.document-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vote-breakdown {
    font-family: var(--mono);
    font-size: 0.625rem;
    display: flex;
    gap: 0.5rem;
}

.vote-breakdown .up { color: var(--ink-light); }
.vote-breakdown .down { color: var(--wax); }

.delete-form { display: inline; }

/* ==========================================
   EXPORT
   ========================================== */

.export-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

.export-form { display: flex; flex-direction: column; gap: 2rem; }

.radio-group, .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.radio-label, .checkbox-label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    font-family: var(--reading);
}

.radio-label input, .checkbox-label input {
    width: auto;
    margin-top: 0.25rem;
}

.radio-label span, .checkbox-label span { font-weight: 400; }

.radio-label small, .checkbox-label small {
    width: 100%;
    margin-left: 1.5rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--ink-faded);
}

.export-form input[type="number"] { max-width: 120px; }

/* ==========================================
   UPLOAD
   ========================================== */

.upload-form { max-width: 480px; }

.upload-info {
    padding: 1.5rem;
    background: var(--cream);
    margin-bottom: 2rem;
    position: relative;
}

.upload-info::before {
    content: '※';
    position: absolute;
    left: 0.5rem;
    top: 1.5rem;
    font-size: 1rem;
    color: var(--ink-faded);
}

.upload-info { padding-left: 2rem; }

.upload-info h3 {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.upload-info ul {
    margin-left: 1rem;
    font-size: 0.875rem;
    color: var(--ink-light);
    font-style: italic;
}

.upload-info li { margin-bottom: 0.25rem; }

/* ==========================================
   EMPTY STATES
   ========================================== */

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.empty-state p {
    font-style: italic;
    color: var(--ink-faded);
    margin: 0 auto 2rem;
}

/* ==========================================
   AUTH PAGES
   ========================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-container { width: 100%; max-width: 380px; }

.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-header .nav-brand {
    display: block;
    margin-bottom: 2.5rem;
}

.auth-header h1 {
    font-size: 2rem;
}

.auth-card {
    background: var(--cream);
    padding: 2.5rem;
    position: relative;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gilt-rule);
}

.auth-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: var(--ink-faded);
}

.auth-footer a {
    color: var(--ink);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

.auth-form .form-group small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-faded);
    font-style: italic;
}

/* ==========================================
   DASHBOARD
   ========================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.dashboard-grid .card { margin-bottom: 0; }

.quick-actions { display: flex; flex-direction: column; gap: 0.5rem; }

.action-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--parchment);
    border: none;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--reading);
    transition: all 0.15s;
}

.action-btn-highlight {
    background: var(--verdigris);
    color: var(--verdigris-contrast);
    font-weight: 600;
}

.action-btn-highlight svg {
    stroke: var(--cream);
}

.action-btn-highlight:hover {
    background: var(--verdigris-hover);
    color: var(--verdigris-contrast);
}

.action-btn:hover {
    background: var(--parchment-dark);
    padding-left: 1.5rem;
}

.action-btn svg { color: var(--verdigris-deep); opacity: 0.7; }

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1024px) {
    .document-view-grid { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .export-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* Keep the archive index available as a compact icon rail while the page
   still has room for a desktop layout. It becomes a drawer on mobile. */
@media (max-width: 1100px) and (min-width: 769px) {
    .dashboard-layout {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .sidebar {
        width: auto;
    }

    .sidebar-section-label {
        display: none;
    }

    .sidebar-link {
        justify-content: center;
        padding: 0.75rem 0.5rem;
        gap: 0;
        font-size: 0;
    }

    .sidebar-link.active::before {
        display: none;
    }

    .sidebar-link svg {
        width: 20px;
        height: 20px;
    }

    .sidebar-divider {
        margin: 1rem 0.75rem;
    }

    .main-content {
        grid-column: 2;
        margin-left: 0;
        padding-right: 2.5rem;
        padding-left: 2.5rem;
    }
}

@media (max-width: 768px) {
    .dashboard-layout {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        left: -100%;
        width: 240px;
        transition: left 0.3s ease;
    }

    .sidebar.open { left: 0; }

    .main-content {
        grid-column: auto;
        margin-left: 0;
        padding: 2rem 1.5rem;
    }

    .hero { padding: 3rem 2rem; }
    .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }

    .features { padding: 3rem 2rem; }
    .features::before { left: 2rem; }

    .page-header { flex-direction: column; align-items: flex-start; gap: 1rem; }

    .stats-grid { flex-direction: column; }
    .stat-card { border-right: none; border-bottom: 1px solid var(--fold); }
    .stat-card:last-child { border-bottom: none; }

    .search-filters { flex-direction: column; }
    .filter-group { width: 100%; }
    .filter-group select { width: 100%; }

    .review-buttons { flex-direction: column; }
    .review-btn { width: 100%; }

    .leaderboard-grid { grid-template-columns: 1fr; }

    .document-card { grid-template-columns: 60px 1fr auto; gap: 1rem; }
}

@media (max-width: 480px) {
    .landing-page .navbar,
    .static-page .navbar {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .landing-page .navbar .nav-links,
    .static-page .navbar .nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .app-navbar-guest .user-menu {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .landing-page .navbar { padding: 1.5rem; }
    .hero { padding: 2rem 1.5rem; }
    .nav-links { gap: 0.5rem; }
    .nav-links .btn { padding: 0.5rem 0.75rem; font-size: 0.5625rem; }

    .stat-value { font-size: 2.25rem; }

    .document-card { grid-template-columns: 1fr; gap: 0.5rem; }
    .document-votes { text-align: left; margin-top: 0.5rem; }
}

/* Menu overlay */
.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 85;
}

.menu-overlay.active { display: block; }

/* ==========================================
   SITE FOOTER
   ========================================== */

.site-footer {
    background: var(--surface-strong);
    color: var(--parchment-aged);
    padding: 4rem;
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    max-width: 1100px;
    margin-bottom: 3rem;
}

.footer-brand {
    max-width: 280px;
}

.footer-logo {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--surface-strong-text);
}

.footer-tagline {
    font-family: var(--reading);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--ink-faded);
    margin-top: 0.75rem;
    max-width: none;
}

.footer-links {
    display: flex;
    gap: 4rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-column h4 {
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--surface-strong-text);
    margin-bottom: 0.75rem;
}

.footer-column a {
    font-family: var(--reading);
    font-size: 0.875rem;
    color: var(--ink-faded);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-column a:hover {
    color: var(--surface-strong-text);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--ink-light);
}

.footer-bottom p {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    max-width: none;
}

/* ==========================================
   STATIC PAGES & LEGAL DOCUMENTS
   ========================================== */

.static-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.static-page .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
}

.static-page-authed {
    padding-top: 56px;
}

.static-page:not(.static-page-authed) {
    padding-top: 56px;
}

.static-content {
    flex: 1;
    padding: 3rem 4rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.legal-document {
    background: var(--cream);
    padding: 3rem 4rem;
}

.legal-document .page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ink);
}

.legal-body {
    font-family: var(--reading);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink-light);
}

.legal-body section {
    margin-bottom: 2.5rem;
}

.legal-body h2 {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
    margin-top: 0;
}

.legal-body h3 {
    font-family: var(--reading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.legal-body p {
    margin-bottom: 1rem;
    max-width: none;
}

.legal-body ul, .legal-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-body li {
    margin-bottom: 0.5rem;
}

.legal-body a:not(.btn) {
    color: var(--verdigris-deep);
}

.legal-body strong {
    color: var(--ink);
    font-weight: 600;
}

/* Cookie table */
.cookie-table {
    width: 100%;
    margin: 1rem 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.cookie-table th,
.cookie-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--fold);
}

.cookie-table th {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-light);
    background: var(--parchment);
}

.cookie-table code {
    font-size: 0.8125rem;
}

.contact-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-intro p {
    font-family: var(--reading);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ink-light);
    max-width: none;
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.contact-card {
    display: flex;
    flex-direction: column;
    background: var(--parchment);
    padding: 2rem;
    text-align: center;
}

.contact-card h2 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.contact-card > p {
    font-size: 0.875rem;
    color: var(--ink-light);
    margin-bottom: 1.5rem;
    max-width: none;
}

.contact-card .btn {
    /* Grid stretches every .contact-card to the row's tallest card, and this
       pushes the button (the last item in each card, now that .contact-note
       moved above it) flush to the bottom - so all three line up on the same
       baseline regardless of how much description/note text precedes them. */
    margin-top: auto;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
}

.contact-note {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
    margin-top: 1rem;
}

.contact-note a {
    color: var(--ink-light);
}

.contact-box {
    background: var(--parchment);
    padding: 1.5rem;
    margin: 1rem 0;
}

.contact-faq, .contact-response {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--fold);
}

.contact-faq h2, .contact-response h2 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.contact-faq ul {
    list-style: none;
    margin-left: 0;
}

.contact-faq li {
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--fold);
}

.contact-faq a {
    color: var(--ink);
    text-decoration: none;
}

.contact-faq a:hover {
    color: var(--verdigris-deep);
}

/* ==========================================
   FLAG CARD
   ========================================== */

.flag-card {
    background: var(--cream);
}

.flag-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--wax-light);
    color: var(--wax);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.flag-warning svg {
    flex-shrink: 0;
}

.flag-description,
.admin-delete-description {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-bottom: 1rem;
    max-width: none;
}

.admin-delete-confirm p {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wax);
    margin-bottom: 0.75rem;
    max-width: none;
}

.flag-btn {
    width: 100%;
    justify-content: center;
}

.flag-form {
    margin-top: 1rem;
}

.flag-form select,
.flag-form textarea {
    width: 100%;
}

.flag-form textarea {
    resize: vertical;
    min-height: 60px;
}

.flag-form-actions {
    display: flex;
    gap: 0.5rem;
}

.flag-form-actions .btn {
    flex: 1;
}

/* ==========================================
   MODERATION PAGE
   ========================================== */

.moderation-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.moderation-item {
    padding: 0;
    overflow: hidden;
}

.moderation-item::before {
    background: var(--gilt-rule);
}

.moderation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--parchment);
    border-bottom: 1px solid var(--fold);
}

.moderation-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.moderation-info .document-title {
    font-family: var(--mono);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ink);
}

.flag-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--wax);
}

.moderation-preview {
    padding: 1.5rem;
    background: var(--cream);
    border-bottom: 1px solid var(--fold);
    max-height: 200px;
    overflow-y: auto;
}

.moderation-preview pre {
    font-family: var(--reading);
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--ink-light);
}

.moderation-flags {
    padding: 1.5rem;
}

.moderation-flags h4 {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
    margin-bottom: 1rem;
}

.flag-item {
    padding: 1rem;
    background: var(--parchment);
    margin-bottom: 0.75rem;
}

.flag-item:last-child {
    margin-bottom: 0;
}

.flag-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.flag-reason {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border: 1px solid currentColor;
}

.flag-pii { color: var(--wax); background: var(--wax-light); border-color: var(--wax); }
.flag-dangerous { color: var(--wax); }
.flag-copyright { color: var(--ink-light); }
.flag-spam { color: var(--ink-faded); }
.flag-other { color: var(--ink-faded); }

.flag-reporter, .flag-date {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
}

.flag-item .flag-description {
    font-family: var(--reading);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--ink-light);
    margin-bottom: 1rem;
    max-width: none;
}

.flag-actions {
    display: flex;
    gap: 0.5rem;
}

.flag-resolved {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--ink-faded);
}

/* ==========================================
   DOWNLOAD PAGE
   ========================================== */

.download-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

.download-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.tag-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tag-checkbox {
    padding: 0.5rem 0.75rem;
    background: var(--parchment);
    font-size: 0.8125rem;
}

.tag-checkbox:hover {
    background: var(--parchment-dark);
}

.tag-checkbox input:checked + span {
    color: var(--verdigris-deep);
    font-weight: 600;
}

.radio-inline {
    flex-direction: row;
    gap: 2rem;
}

.radio-inline .radio-label small {
    display: none;
}

@media (max-width: 768px) {
    .download-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .radio-inline {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==========================================
   ADMIN PAGES
   ========================================== */

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

.admin-form {
    max-width: 800px;
}

.admin-form .card {
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="datetime-local"],
.admin-form textarea,
.admin-form select {
    width: 100%;
}

.admin-form .form-group small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-faded);
    font-style: italic;
}

.admin-form .form-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.admin-form .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-form .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.admin-main .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.admin-main .card-header h2 {
    margin-bottom: 0;
}

.search-inline {
    display: flex;
    gap: 0.5rem;
}

.search-inline input {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    width: 200px;
}

.users-table {
    overflow-x: auto;
}

.users-table table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th,
.users-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--fold);
}

.users-table th {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
    background: var(--parchment);
}

.user-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-cell strong {
    font-family: var(--reading);
    font-size: 0.9375rem;
}

.user-email {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
}

.permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--surface-strong);
    color: var(--surface-strong-text);
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 0.375rem;
    margin-bottom: 0.25rem;
}

.badge-remove {
    background: none;
    border: none;
    color: var(--parchment-aged);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 0.875rem;
}

.badge-remove:hover {
    color: var(--surface-strong-text);
}

.no-permissions {
    font-family: var(--reading);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-faded);
}

.grant-form {
    display: flex;
    gap: 0.5rem;
}

.grant-form select {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    min-width: 140px;
}

.empty-cell {
    text-align: center;
    font-style: italic;
    color: var(--ink-faded);
    padding: 2rem !important;
}

.admin-sidebar .card {
    margin-bottom: 1.5rem;
}

.card-description {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-bottom: 1rem;
    max-width: none;
}

.permission-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.permission-item {
    padding: 1rem;
    background: var(--parchment);
}

.permission-item strong {
    display: block;
    font-family: var(--reading);
    margin-bottom: 0.25rem;
}

.permission-slug {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
}

.permission-item p {
    font-size: 0.8125rem;
    color: var(--ink-light);
    margin: 0.5rem 0;
    max-width: none;
}

.permission-count {
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--ink-faded);
}

.create-tag-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.create-tag-form .form-group {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

/* App Footer (for logged-in pages) */
.app-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--fold);
    text-align: center;
}

.app-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.app-footer-links a {
    font-family: var(--mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    text-decoration: none;
    transition: color 0.15s;
}

.app-footer-links a:hover {
    color: var(--ink);
}

.app-footer > p {
    font-family: var(--mono);
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
}

/* Responsive footer */
@media (max-width: 768px) {
    .site-footer {
        padding: 3rem 2rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 2.5rem;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 2rem;
    }

    .footer-column {
        min-width: 140px;
    }

    .static-page .navbar {
        padding: 1.5rem 2rem;
    }

    .static-content {
        padding: 2rem 1.5rem;
    }

    .legal-document {
        padding: 2rem;
    }
}

/* ==========================================
   UPLOAD-STYLE FORM PAGES (Invite)
   ========================================== */

/* Upload itself now uses .feed-layout/.feed-main/.feed-sidebar (upload.twig)
   - the same grid as the Review feed and Suggest a Prompt. This grid remains
   for other quota-gated form pages (invite.twig) that haven't moved to it. */
.upload-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

.upload-grid > .card:first-child {
    max-width: 640px;
}

.quota-info {
    font-family: var(--mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    padding: 0.75rem 1rem;
    background: var(--parchment-dark);
    border-radius: 4px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.quota-warning {
    padding: 2rem;
    text-align: center;
    color: var(--ink-light);
}

.quota-warning strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--wax);
    margin-bottom: 0.5rem;
}

.quota-warning p {
    margin: 0 auto;
    font-size: 0.9375rem;
}

.quality-list,
.reject-list {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
}

.quality-list li,
.reject-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: var(--ink-light);
    line-height: 1.5;
}

.quality-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--verdigris-deep);
    font-weight: bold;
}

.reject-list li::before {
    content: "\2717";
    position: absolute;
    left: 0;
    color: var(--verdigris-deep);
    font-weight: bold;
}

@media (max-width: 768px) {
    .upload-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   COLLECTIONS PAGES
   ========================================== */

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.collection-card-link {
    text-decoration: none;
}

.collection-preview-card {
    transition: transform 0.15s, box-shadow 0.15s;
}

.collection-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.collection-preview-card h2 {
    font-family: var(--serif);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.collection-desc {
    font-family: var(--reading);
    font-size: 0.875rem;
    color: var(--ink-light);
    margin-bottom: 1rem;
    max-width: none;
}

.collection-meta {
    display: flex;
    gap: 1.5rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
    letter-spacing: 0.05em;
}

.new-collection-card {
    margin-bottom: 2rem;
}

.new-collection-card .form-actions {
    display: flex;
    gap: 1rem;
}

/* Collection View */
.collection-view-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 3rem;
    align-items: start;
}

.collection-stats {
    margin-bottom: 1.5rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faded);
    letter-spacing: 0.1em;
}

.page-actions {
    display: flex;
    gap: 0.5rem;
}

.danger-zone {
    border-top: 3px solid var(--wax);
}

.danger-zone::before {
    display: none;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.modal-content {
    width: 100%;
    max-width: 440px;
    margin: 1rem;
}

.signup-modal-content .btn-google {
    margin-top: 0.75rem;
}

.signup-modal-title {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.signup-modal-subline {
    display: block;
    margin-top: 0.2rem;
}

.modal-content h2 {
    font-family: var(--serif);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.modal-content .form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.modal-actions-right {
    justify-content: flex-end;
}

.modal-actions-center {
    justify-content: center;
}

@media (max-width: 768px) {
    .collection-view-grid {
        grid-template-columns: 1fr;
    }

    .collections-grid {
        grid-template-columns: 1fr;
    }
}

/* Collections Download List */
.collections-download-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.collection-download-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: var(--parchment);
}

.collection-download-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.collection-download-info strong {
    font-family: var(--reading);
    font-size: 0.9375rem;
    color: var(--ink);
}

.collection-download-count {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
    letter-spacing: 0.05em;
}

.collection-download-actions {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .collection-download-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Other Datasets (review-feed exports) */
.other-datasets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.other-dataset-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: var(--parchment);
    gap: 1rem;
}

.other-dataset-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.other-dataset-info strong {
    font-family: var(--reading);
    font-size: 0.9375rem;
    color: var(--ink);
}

.other-dataset-count {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
    letter-spacing: 0.05em;
}

.other-dataset-desc {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-light);
    letter-spacing: 0.03em;
}

@media (max-width: 480px) {
    .other-dataset-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Profile Image Upload */
.profile-image-upload {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.current-avatar {
    flex-shrink: 0;
}

.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-preview.avatar-placeholder {
    background: var(--verdigris);
    color: var(--verdigris-contrast);
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 600;
}

.avatar-controls {
    flex: 1;
}

.avatar-help {
    font-family: var(--reading);
    font-size: 0.875rem;
    color: var(--ink-light);
    margin-bottom: 1rem;
    max-width: none;
}

.avatar-buttons {
    display: flex;
    gap: 0.5rem;
}

.avatar-status {
    margin-top: 0.75rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}

.avatar-status.success {
    color: var(--ink);
}

.avatar-status.error {
    color: var(--wax);
}

@media (max-width: 480px) {
    .profile-image-upload {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .avatar-buttons {
        justify-content: center;
    }
}

/* ==========================================
   GOOGLE OAUTH BUTTON
   ========================================== */

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    margin-bottom: 0.75rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--ink);
    background: var(--cream);
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-google:hover {
    background: var(--parchment);
    color: var(--ink);
}

.btn-google .google-icon {
    flex-shrink: 0;
}

/* ==========================================
   GITHUB OAUTH BUTTON
   ========================================== */

.btn-github {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    margin-bottom: 0.75rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff;
    background: #24292e;
    border-radius: var(--radius);
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-github:hover {
    background: #1b1f23;
    color: #fff;
}

.btn-github .github-icon {
    flex-shrink: 0;
}

/* ==========================================
   LINKEDIN OAUTH BUTTON
   ========================================== */

.btn-linkedin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    margin-bottom: 0.75rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff;
    background: #0a66c2;
    border-radius: var(--radius);
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-linkedin:hover {
    background: #004182;
    color: #fff;
}

.btn-linkedin .linkedin-icon {
    flex-shrink: 0;
}

.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--ink-faded);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fold);
}

.auth-divider span {
    padding: 0 1rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ==========================================
   BLOG PAGES
   ========================================== */

.blog-page {
    padding: 3rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--fold);
}

.blog-header h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 1rem;
}

.blog-subtitle {
    font-family: var(--reading);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ink-light);
    max-width: 500px;
    margin: 0 auto;
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 4rem;
    align-items: start;
}

.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Blog Card */
.blog-card {
    background: var(--cream);
    position: relative;
}

.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gilt-rule);
}

.blog-card-image {
    display: block;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.02);
}

.blog-card-content {
    padding: 2rem;
}

.blog-card-meta {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faded);
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.blog-card-meta .separator {
    margin: 0 0.5rem;
}

.blog-card h2 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.blog-card h2 a {
    text-decoration: none;
    color: var(--ink);
}

.blog-card h2 a:hover {
    color: var(--verdigris-deep);
}

.blog-card-excerpt {
    font-family: var(--reading);
    font-size: 1rem;
    color: var(--ink-light);
    line-height: 1.7;
    margin-bottom: 1rem;
    max-width: none;
}

.read-more {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--verdigris-deep);
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
}

/* Blog Sidebar */
.blog-sidebar,
.blog-post-sidebar {
    position: sticky;
    top: 2rem;
}

.sidebar-section {
    background: var(--cream);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sidebar-section h3 {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-faded);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fold);
}

.category-list {
    list-style: none;
}

.category-list li {
    margin-bottom: 0.5rem;
}

.category-list li.active a {
    color: var(--verdigris-deep);
    font-weight: 600;
}

.category-list a {
    font-family: var(--reading);
    font-size: 0.9375rem;
    color: var(--ink);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-list a:hover {
    color: var(--verdigris-deep);
}

.category-list .count {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
}

.recent-posts {
    list-style: none;
}

.recent-posts li {
    padding: 0.75rem 0;
    border-bottom: 1px dotted var(--fold);
}

.recent-posts li:last-child {
    border-bottom: none;
}

.recent-posts a {
    font-family: var(--reading);
    font-size: 0.875rem;
    color: var(--ink);
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
}

.recent-posts a:hover {
    color: var(--verdigris-deep);
}

.recent-posts time {
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--ink-faded);
    letter-spacing: 0.1em;
}

/* Single Blog Post */
.blog-post-page {
    padding: 3rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 4rem;
    align-items: start;
}

.preview-banner {
    grid-column: 1 / -1;
    background: var(--verdigris-light);
    color: var(--verdigris-deep);
    padding: 1rem 1.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.preview-banner a {
    color: var(--verdigris-deep);
}

.blog-article {
    background: var(--cream);
    padding: 3rem;
    position: relative;
}

.blog-article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gilt-rule);
}

.article-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--fold);
}

.article-categories {
    margin-bottom: 1rem;
}

.category-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: var(--parchment-dark);
    color: var(--ink-light);
    text-decoration: none;
    margin-right: 0.5rem;
}

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

.article-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.article-meta {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faded);
    letter-spacing: 0.05em;
}

.article-meta .separator {
    margin: 0 0.75rem;
}

.article-meta .author {
    color: var(--ink-light);
}

.article-featured-image {
    margin: -3rem -3rem 2.5rem;
}

.article-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.article-content {
    font-family: var(--reading);
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--ink-light);
}

.article-content h2 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin: 2.5rem 0 1rem;
}

.article-content h3 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    margin: 2rem 0 0.75rem;
}

.article-content p {
    margin-bottom: 1.25rem;
    max-width: none;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.25rem;
    margin-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--parchment);
    border-left: 4px solid var(--verdigris-deep);
    font-style: italic;
}

.article-content pre,
.article-content code {
    font-family: var(--mono);
}

.article-content pre {
    background: var(--surface-strong);
    color: var(--surface-strong-text);
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.875rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

.article-content a {
    color: var(--verdigris-deep);
}

.article-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--fold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.share-section {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faded);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.share-link {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

.share-link:hover {
    color: var(--verdigris-deep);
}

/* Blog Admin */
.blog-editor {
    max-width: 100%;
}

.editor-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

.editor-main .card {
    padding: 2rem;
}

.editor-sidebar .card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.editor-sidebar .card h3 {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-faded);
    margin-bottom: 1rem;
}

.input-large {
    font-size: 1.25rem;
    padding: 1rem;
}

.slug-input {
    display: flex;
    align-items: center;
}

.slug-prefix {
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ink-faded);
    padding: 0.875rem 0;
    padding-right: 0.25rem;
}

.slug-input input {
    flex: 1;
}

.category-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.current-image {
    margin-bottom: 1rem;
}

.current-image img {
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

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

.admin-table th {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
    background: var(--parchment);
}

.post-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.post-cell strong {
    font-family: var(--reading);
    font-size: 1rem;
}

.post-slug {
    font-family: var(--mono);
    font-size: 0.625rem;
    color: var(--ink-faded);
}

.date-cell .muted {
    color: var(--ink-faded);
    font-style: italic;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.status-published {
    background: var(--surface-strong);
    color: var(--surface-strong-text);
}

.status-draft {
    background: var(--parchment-dark);
    color: var(--ink-faded);
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.inline-form {
    display: inline;
}

/* Was an outlined button; with borders gone it takes the same soft-fill
   treatment as .alert-error so it still reads as its own, riskier class of
   action rather than an ordinary one. */
.btn-danger {
    color: var(--wax);
    background: var(--wax-light);
}

.btn-danger:hover {
    background: var(--wax);
    color: var(--cream);
}

/* Error Page */
.error-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.error-content {
    text-align: center;
    max-width: 480px;
}

.error-content h1 {
    font-size: 8rem;
    line-height: 1;
    color: var(--ink-faded);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.error-content h2 {
    font-family: var(--serif);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.error-content p {
    font-family: var(--reading);
    font-style: italic;
    color: var(--ink-light);
    margin-bottom: 2rem;
    max-width: none;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Responsive Blog */
@media (max-width: 1024px) {
    .blog-layout,
    .blog-post-page {
        grid-template-columns: 1fr;
    }

    .blog-sidebar,
    .blog-post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .sidebar-section {
        margin-bottom: 0;
    }

    .editor-layout {
        grid-template-columns: 1fr;
    }

    .editor-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .editor-sidebar .card {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .blog-page,
    .blog-post-page {
        padding: 2rem 1.5rem;
    }

    .blog-article {
        padding: 2rem 1.5rem;
    }

    .article-featured-image {
        margin: -2rem -1.5rem 2rem;
    }

    .article-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-table {
        font-size: 0.875rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.75rem 0.5rem;
    }

    .action-buttons {
        flex-direction: column;
    }
}

/* ==========================================
   CONFIRM DIALOG — Wax-sealed decisions
   ========================================== */

.confirm-dialog {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 420px;
    width: calc(100% - 2rem);
}

.confirm-dialog::backdrop {
    background: rgba(26, 26, 24, 0.5);
}

.confirm-dialog-form {
    background: var(--cream);
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.confirm-dialog-title {
    font-size: 1.375rem;
    margin-bottom: 0.75rem;
}

.confirm-dialog-message {
    font-family: var(--reading);
    color: var(--ink-light);
    margin-bottom: 1.75rem;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.confirm-dialog-danger {
    background: var(--wax);
    border-color: var(--wax);
    color: var(--cream);
}

/* ==========================================
   REVIEW FEED CARDS — shared by /review (feed.js) and the homepage's
   single-card demo (homepage-feed.js). Moved here from review.twig's inline
   {% block styles %} so both pages can reuse one implementation instead of
   two copies of the same component.
   ========================================== */

.feed-layout {
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 2rem;
    align-items: start;
    min-width: 0;
    /* Cap the grid at the width its columns already want — .feed-main's
       640px cap plus the 210px rail plus the 2rem gap. Without it the 1fr
       track absorbs extra viewport width, and since .feed-main stops at
       640px, that surplus renders as dead space between the two columns.
       Leftover viewport goes to the right of the whole block instead. */
    max-width: calc(640px + 2rem + 210px);
}

.feed-main {
    max-width: 640px;
    min-width: 0;
}

.feed {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.feed-card {
    position: relative;
    padding: 2.5rem 1.75rem 1.5rem;
    transition: none;
}

/* The wax rule at the top of a .card marks a manuscript page — one heading,
   one topic. The review feed is a run of many small cards rather than a page
   of sections, so repeating the rule down the column turns a deliberate mark
   into stripes. Dropped for this page's cards only; .card keeps it everywhere
   else. */
.feed-card::before,
.composer::before,
.feed-sidebar .card::before {
    display: none;
}

/* ---- Composer ----------------------------------------------------------
   A quiet box, not a form: the field carries no border of its own so the
   card is the only enclosure, and the button below is the one piece of
   chrome. It stays out of the way until someone types something. */
.composer {
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.25rem;
}

.composer-text {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--reading);
    font-size: 1.0625rem;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
}

.composer-text::placeholder {
    color: var(--ink-faded);
}

#prompt-composer .composer-text {
    background: var(--parchment);
}

.composer-text:focus {
    outline: none;
}

/* Used outside the feed composer (e.g. the standalone Suggest a Prompt page),
   where there's no auto-grow JS to expand the field as you type - it needs
   to stay manually resizable instead of pinned to its initial row count. */
.composer-text-standalone {
    resize: vertical;
    overflow: auto;
}

.composer-text:disabled {
    opacity: 0.6;
}

.composer-actions {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Confirmation sits beside the button that caused it, since a new prompt
   doesn't show up in your own feed - without this line there'd be nothing
   to tell you it worked. */
.composer-note {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    margin: 0;
}

.composer-error {
    font-size: 0.8125rem;
    color: var(--wax);
    margin: 0.5rem 0 0;
}

.composer .btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Hold the button at its rest appearance while disabled, so hovering a
   button that does nothing doesn't read as "this works". */
.composer .btn:disabled:hover {
    background: var(--verdigris);
    border-color: var(--verdigris);
}

/* A card kind such as "Compare responses" or "Document curation" names the
   thing; it isn't an action and it isn't a warning,
   so it takes neither accent. Putting the accent here would tie it to the
   button below it and make the whole card read as one block of urgency,
   which is what it did when this was wax. */
.feed-card-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
    margin-bottom: 0.75rem;
}

.feed-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.feed-card-byline {
    font-size: 0.875rem;
    color: var(--ink-light);
    margin-bottom: 0.75rem;
}

.feed-card-excerpt {
    font-size: 0.9375rem;
    color: var(--ink-light);
    margin-bottom: 1rem;
}

.feed-card-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--ink-light);
    margin-bottom: 1.25rem;
}

.feed-card-block {
    margin-bottom: 1.25rem;
}

.feed-card-block-label {
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    margin-bottom: 0.375rem;
}

.feed-card-prompt {
    font-style: italic;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.feed-card-answer {
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* On the rating card, the answer is the thing actually being judged - a
   light weight bump sets it apart from the prompt above it without reading
   as heavy emphasis. The comparison card's two answers stay at the default
   weight; they're already set apart by sitting in their own column cards. */
.feed-card-response .feed-card-answer {
    font-weight: 600;
}

.feed-card-hint {
    font-size: 0.875rem;
    color: var(--ink-light);
    margin-bottom: 1.25rem;
}

.feed-card-statement {
    font-family: var(--reading);
    font-size: 1.25rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

.feed-card-attribution {
    font-size: 0.875rem;
    color: var(--ink-light);
    margin-bottom: 1.25rem;
}

.feed-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* The skip action is incidental, not a real choice — it stays visually
   quiet (no fill) so it doesn't compete with the primary action, and gets
   an explicit hover fill so it's still discoverable as a button. In the
   comparison card's column layout it also can't be allowed to stretch to
   the container's full width, or a transparent, borderless-looking control
   becomes an easy accidental click across the whole row. */
.feed-card-actions [data-action="skip"] {
    background: transparent;
}

.feed-card-actions [data-action="skip"]:hover {
    background: var(--parchment-dark);
}

.feed-card-actions-column [data-action="skip"] {
    align-self: flex-start;
}

/* Kept in the layout, just invisible - see the comment on markDone() in
   feed.js for why this can't be `hidden`. */
.feed-card-action-spent {
    visibility: hidden;
}

.ternary-vote {
    display: flex;
    gap: 0.5rem;
}

/* The feed's thumbs are borderless icon buttons, not the boxed .vote-btn used
   on a document page: no border at rest, hover only tints the square behind
   the icon (the icon itself doesn't change colour), and the chosen one turns
   wax-red — the same colour whichever way the vote went, since "this is what
   I picked" is one state, not three. */
.ternary-vote .vote-btn {
    padding: 0.625rem;
    border-color: transparent;
    color: var(--ink-light);
}

.ternary-vote .vote-btn:hover:not(:disabled) {
    background: var(--parchment-dark);
    border-color: transparent;
    color: var(--ink-light);
}

.ternary-vote .vote-btn:disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--ink-light);
}

.ternary-vote .vote-btn.active.vote-up,
.ternary-vote .vote-btn.active.vote-neutral,
.ternary-vote .vote-btn.active.vote-down {
    background: transparent;
    border-color: transparent;
    color: var(--wax);
}

.comparison-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 900px) {
    .comparison-columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* A response column is a button so the whole block - not just a control
   underneath it - is the click target for "this one is better". The 2px
   transparent border is reserved at rest so selecting it doesn't shift
   layout (see "Layout stability" in design-principles.md). */
.comparison-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 1rem;
    background: var(--parchment);
    border: 2px solid transparent;
    border-radius: 4px;
    font: inherit;
    text-align: left;
    color: inherit;
    appearance: none;
    cursor: pointer;
}

.comparison-column:hover:not(:disabled) {
    background: var(--parchment-dark);
}

.comparison-column-readonly {
    cursor: default;
}

.comparison-column-readonly:hover:not(:disabled) {
    background: var(--parchment);
}

.comparison-column.active {
    background: var(--cream);
    border-color: var(--verdigris-deep);
}

.comparison-column:disabled {
    cursor: default;
}

.comparison-column:disabled:not(.active) {
    opacity: 0.6;
}

.feed-card-actions-column {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.comparison-vote {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comparison-vote .btn {
    flex: 0 0 auto;
    justify-content: center;
}

.comparison-vote .btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.comparison-vote .btn:disabled:hover {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
    transform: none;
    box-shadow: none;
}

.comparison-vote .btn.active {
    background: var(--verdigris);
    border-color: var(--verdigris);
    color: var(--verdigris-contrast);
}

/* The selected comparison choice is disabled after it is saved. Keep its
   selected colour when the pointer passes over it; the broader disabled-hover
   rule above otherwise wins on specificity and makes the choice look
   interactive again. */
.comparison-vote .btn.active:disabled:hover {
    background: var(--verdigris);
    border-color: var(--verdigris);
    color: var(--verdigris-contrast);
    transform: none;
    box-shadow: none;
}

.write-response-textarea {
    width: 100%;
    font-family: var(--reading);
    font-size: 0.9375rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--fold);
    border-radius: 4px;
    background: var(--parchment);
    color: var(--ink);
    resize: vertical;
    margin-bottom: 0.75rem;
}

.write-response-textarea:disabled {
    opacity: 0.6;
}

.feed-card-error {
    font-size: 0.8125rem;
    color: var(--wax);
    margin-bottom: 0.75rem;
}

.session-substat {
    font-size: 0.875rem;
    font-family: var(--reading);
    color: var(--ink-light);
    margin-top: 0.25rem;
}

.scale5 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.scale5-btn {
    flex: 1 1 0;
    padding: 0.625rem 0.75rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 2px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: center;
}

.scale5-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.scale5-btn.active {
    background: var(--verdigris);
    border-color: var(--verdigris);
    color: var(--verdigris-contrast);
}

.pulse-breakdown {
    margin: 0.75rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pulse-breakdown-row {
    display: grid;
    grid-template-columns: 9rem 1fr 2.5rem;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-light);
}

/* The one moment on the site where your judgment and everyone else's are
   shown together. The crowd's bars carry the accent; your row is set apart by
   weight and ink rather than a second hue - red now means a warning, and
   "this is the answer you gave" is not one. */
.pulse-breakdown-row.is-chosen {
    color: var(--ink);
    font-weight: 600;
}

.pulse-breakdown-bar {
    height: 8px;
    background: var(--fold);
}

.pulse-breakdown-bar > div {
    height: 100%;
    background: var(--verdigris-deep);
}

.pulse-breakdown-row.is-chosen .pulse-breakdown-bar > div {
    background: var(--ink);
}

/* A small corner badge rather than a line in the action row: it reports
   "this is saved, and here's how to dismiss it" without taking up space
   next to the buttons or shifting anything when it appears. */
.feed-card-status {
    position: absolute;
    top: 1.25rem;
    right: 1.75rem;
    margin: 0;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    /* Matches .feed-card-hide's fixed 1.125rem box so the label and the ×
       button resolve to the same line-box height before flex centers them —
       otherwise the label's taller default line-height shifts its visual
       center relative to the button's. */
    line-height: 1.125rem;
}

/* Guarded with :not([hidden]) — this element is toggled by the `hidden`
   attribute, and an unconditional `display` here would win the specificity
   tie and silently unhide it. See "Settings rows" in design-principles.md. */
.feed-card-status:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.feed-card-hide {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.9375rem;
    line-height: 1;
    color: var(--ink-faded);
    cursor: pointer;
    transform: translateY(-1px);
}

.feed-card-hide:hover {
    color: var(--verdigris-deep);
}

/* An answered card keeps its cream surface, while its remaining contents
   become quieter. The base card already reserves the top space needed by the
   Saved / × status, so this state does not change the layout. Keep controls at
   a single muted level rather than stacking their own disabled opacity on top
   of the card's content opacity. */
.feed-card-done {
    opacity: 1;
}

.feed-card-done > :not(.feed-card-status) {
    opacity: 0.58;
}

.feed-card-done > :not(.feed-card-status) button,
.feed-card-done > :not(.feed-card-status) textarea {
    opacity: 1 !important;
}

/* Dismissal is the one animated state on this page. Everything below a
   dismissed card moves up, so the fade identifies which card left and the
   collapse keeps that movement from being a jump. Hover and focus states
   stay instant, per the Motion section of design-principles.md. */
.feed-card-dismissing {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.feed-card-collapsing {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: height 0.18s ease, margin-bottom 0.18s ease, padding 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .feed-card-dismissing,
    .feed-card-collapsing {
        transition: none;
    }
}

.feed-sentinel {
    height: 1px;
}

.feed-end-message {
    text-align: center;
    color: var(--ink-faded);
    font-size: 0.875rem;
    padding: 1.5rem 0;
}

.feed-sidebar {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* .card's 2rem/2.5rem padding is sized for a full-width page section; in a
   210px rail it leaves the text a narrow ribbon. The margin-bottom is dropped
   because this is a flex column — it would stack on top of the gap above. */
.feed-sidebar .card {
    padding: 1.125rem 1.25rem;
    margin-bottom: 0;
}

.feed-sidebar .card h3 {
    margin-bottom: 0.75rem;
}

.session-card p:not(.session-substat) {
    font-size: 1.5rem;
    font-family: var(--serif);
}

.session-card #session-count {
    color: var(--verdigris-deep);
}

.auto-hide-card .switch {
    flex-direction: column;
    gap: 0.625rem;
    justify-content: center;
}

/* Overrides the global `label` reset (mono, uppercase, letter-spacing) -
   this text reads as a sentence, not a form field name. */
.auto-hide-card .toggle-text {
    font-family: var(--reading);
    font-size: 0.8125rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.guide-list dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 0.75rem;
}

.guide-list dt:first-child {
    margin-top: 0;
}

.guide-list dd {
    font-size: 0.8125rem;
    color: var(--ink-light);
    margin: 0.125rem 0 0;
}

@media (max-width: 900px) {
    .feed-layout {
        grid-template-columns: 1fr;
    }
    .feed-main {
        max-width: none;
    }
    .feed-sidebar {
        position: static;
        order: 2;
    }
    /* Full width below the breakpoint, so the rail's tighter padding no
       longer applies — match the feed cards it now sits under. */
    .feed-sidebar .card {
        padding: 1.5rem 1.75rem;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 2rem 1rem;
    }

    .feed-card {
        padding: 1.25rem;
    }

    .profile-page-header,
    .profile-intro-heading,
    .profile-section-heading,
    .profile-timeline-topline {
        align-items: flex-start;
    }

    .profile-page-header {
        flex-direction: column;
        gap: 1rem;
    }

    .profile-page-header .page-actions {
        width: 100%;
    }

    .profile-page-header .page-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .profile-intro-card {
        padding: 1.75rem 1.25rem;
    }

    .profile-record-stats,
    .profile-analysis-grid,
    .profile-resource-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .profile-record-stats .stat-card {
        padding: 1.25rem 0.75rem;
    }

    .profile-record-stats .stat-value {
        font-size: 2rem;
    }

    .profile-timeline-topline {
        flex-direction: column;
        gap: 0.125rem;
    }
}

@media (max-width: 520px) {
    .profile-record-stats,
    .profile-analysis-grid,
    .profile-resource-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .profile-summary {
        font-size: 1.35rem;
    }

    .profile-member-id,
    .profile-section-count,
    .profile-analysis-total {
        display: none;
    }

    .profile-vote-legend {
        flex-direction: column;
        gap: 0.4rem;
    }
}