/* ══════════════════════════════════════════════════════════════════
   Arbiter — a Ghost theme
   Design tokens lifted from the Arbiter routing dashboard so the blog
   and the control panel read as one system. Dark is the native state;
   light is a faithful inversion rather than a second design.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --sidebar-w: 260px;

    /* --accent-strong is overridden by the site accent colour set in
       Ghost admin; the rest of the ramp derives from it. */
    --accent-strong: #8b5cf6;
    --accent: #a78bfa;
    --accent-dim: rgba(167, 139, 250, 0.15);
    --accent-glow: rgba(139, 92, 246, 0.3);

    --radius: 8px;
    --radius-sm: 5px;
    --radius-lg: 12px;

    /* Ghost injects --gh-font-heading / --gh-font-body via {{ghost_head}}
       when a font is chosen in admin; Inter is the fallback either way. */
    --font-sans: var(--gh-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --font-heading: var(--gh-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --measure: 720px;
}

/* ── Dark (default) ── */
:root, :root[data-scheme="dark"] {
    color-scheme: dark;

    --bg: #0a0a0b;
    --sidebar-bg: #0d0d0f;
    --surface: #111113;
    --surface-hover: #161619;
    --surface-raised: #18181b;
    --border: #1f1f23;
    --border-strong: #2a2a30;

    --green: #34d399;
    --green-dim: rgba(52, 211, 153, 0.12);
    --amber: #fbbf24;
    --amber-dim: rgba(251, 191, 36, 0.12);
    --red: #f87171;
    --red-dim: rgba(248, 113, 113, 0.12);
    --coral: #fb923c;
    --coral-dim: rgba(251, 146, 60, 0.12);

    --text: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --prose: #d7d7dc;
}

/* ── Light ── */
:root[data-scheme="light"] {
    color-scheme: light;

    --bg: #fcfcfd;
    --sidebar-bg: #f5f5f7;
    --surface: #ffffff;
    --surface-hover: #f3f3f5;
    --surface-raised: #ffffff;
    --border: #e5e5ea;
    --border-strong: #d2d2d9;

    --green: #059669;
    --green-dim: rgba(5, 150, 105, 0.11);
    --amber: #b45309;
    --amber-dim: rgba(180, 83, 9, 0.11);
    --red: #dc2626;
    --red-dim: rgba(220, 38, 38, 0.1);
    --coral: #c2410c;
    --coral-dim: rgba(194, 65, 12, 0.1);

    --text: #18181b;
    --text-secondary: #52525b;
    --text-tertiary: #8a8a93;
    --prose: #303036;
}

/* Derive the accent ramp from the admin-set accent where supported, so
   changing one colour in Ghost keeps hovers, glows and pills coherent.
   Light needs a darker accent to hold contrast against white. */
@supports (color: color-mix(in srgb, red 50%, white)) {
    :root, :root[data-scheme="dark"] {
        --accent: color-mix(in srgb, var(--accent-strong) 72%, #ffffff);
        --accent-dim: color-mix(in srgb, var(--accent-strong) 16%, transparent);
        --accent-glow: color-mix(in srgb, var(--accent-strong) 32%, transparent);
    }
    :root[data-scheme="light"] {
        --accent: color-mix(in srgb, var(--accent-strong) 82%, #000000);
        --accent-dim: color-mix(in srgb, var(--accent-strong) 12%, transparent);
        --accent-glow: color-mix(in srgb, var(--accent-strong) 26%, transparent);
    }
}

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

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

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

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

/* ── Sidebar ─────────────────────────────────────────────────────── */

.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 30;
    transition: transform 0.2s ease;
}

.sidebar-collapsed .sidebar { transform: translateX(calc(var(--sidebar-w) * -1)); }

/* Brand and scheme toggle share the top row — the one place in the sidebar
   with spare horizontal room, and visible without scrolling the panel. The
   button is a sibling of the link rather than a child: a <button> inside an
   <a> is invalid HTML, and its click would race the navigation. */
.sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    /* min-width: 0 lets a long site title ellipsis instead of shoving the
       toggle off the edge — a flex item will not shrink below its content
       width without it. */
    flex: 1;
    min-width: 0;
}
.sidebar-brand:hover { color: var(--text); }

.brand-icon {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a0a0b;
    box-shadow: 0 2px 12px var(--accent-glow);
    flex-shrink: 0;
    overflow: hidden;
}
.brand-icon img { width: 100%; height: 100%; object-fit: cover; }

.brand-text {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    padding: 4px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.nav-section { margin-bottom: 20px; }

.nav-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 8px 10px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.12s, background 0.12s;
    margin-bottom: 1px;
}

.nav-item:hover { color: var(--text); background: var(--surface-hover); }
.nav-item.active { color: var(--accent); background: var(--accent-dim); }

.nav-item svg { flex-shrink: 0; opacity: 0.6; }
.nav-item.active svg, .nav-item:hover svg { opacity: 1; }

.nav-tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    flex-shrink: 0;
}

/* Topic dots cycle the dashboard's tier palette. */
.tag-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-tertiary);
}
.nav-tags .nav-item-tag:nth-child(4n+1) .tag-dot { background: var(--green); }
.nav-tags .nav-item-tag:nth-child(4n+2) .tag-dot { background: var(--accent); }
.nav-tags .nav-item-tag:nth-child(4n+3) .tag-dot { background: var(--coral); }
.nav-tags .nav-item-tag:nth-child(4n+4) .tag-dot { background: var(--amber); }

.sidebar-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
/* Guards against a trailing gap if anything is ever added below the CTA. */
.sidebar-footer > :last-child { margin-bottom: 0; }

.sidebar-cta { width: 100%; justify-content: center; margin-bottom: 10px; }

/* ── Sidebar toggle ──────────────────────────────────────────────── */

.sidebar-toggle {
    position: fixed;
    top: 14px; left: 14px;
    z-index: 40;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    width: 34px; height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.sidebar-toggle:hover { color: var(--text); border-color: var(--border-strong); }

.sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 25;
    border: 0;
    padding: 0;
}
.sidebar-scrim[hidden] { display: none; }

/* ── Main content ────────────────────────────────────────────────── */

.main-content {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    padding: 0 36px 60px;
    transition: margin-left 0.2s ease;
}

.sidebar-collapsed .main-content { margin-left: 0; }

.content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px 0 28px;
    gap: 16px;
}

.content-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--text);
    line-height: 1.25;
}

.content-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    max-width: 62ch;
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.section { margin-bottom: 26px; }

.section-label { margin-bottom: 12px; }

/* ── Cards & grids ───────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
}

.card-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}


/* ── Masthead ───────────────────────────────────────────────────── */

/* The masthead is deliberately restrained: the sidebar brand already states
   who this is, so this block only has to say what the site is about and offer
   the one action. Keeping it short puts the newest post above the fold. */

.masthead { padding: 40px 0 28px; }

.masthead-title {
    font-family: var(--font-heading);
    font-size: clamp(23px, 2.7vw, 31px);
    font-weight: 700;
    letter-spacing: -0.7px;
    line-height: 1.25;
    color: var(--text);
    max-width: 30ch;
    text-wrap: balance;
}


/* ── Lead post ───────────────────────────────────────────────────── */

.lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
    padding: 34px 0 38px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.lead:has(+ .site-footer) { border-bottom: none; }

.lead-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

.lead-title {
    margin-top: 16px;
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -1.4px;
    line-height: 1.08;
}
.lead-title a { color: var(--text); }
.lead-title a:hover { color: var(--accent); }

.lead-excerpt {
    margin-top: 14px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 58ch;
}

.lead-foot {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.lead-author {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
}

.lead-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}
.lead-link svg { transition: transform 0.15s; }
.lead-link:hover { color: var(--accent); }
.lead-link:hover svg { transform: translateX(3px); }

.lead-image {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 4 / 3;
}
.lead-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.lead-image:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
    .lead { grid-template-columns: 1fr; gap: 24px; }
    .lead-image { aspect-ratio: 16 / 9; order: -1; }
}

/* ── Log feed ────────────────────────────────────────────────────── */
/* The row rhythm of Arbiter's request-trace list: a mono figure on the
   left, the title carrying the weight, metadata pinned right. */

.section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
    padding-top: 30px;
}
.section-rule { flex: 1; height: 1px; background: var(--border); }

.log { display: flex; flex-direction: column; }

.row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto auto;
    gap: 20px;
    align-items: baseline;
    padding: 20px 12px 20px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: background 0.12s;
}

.row::before {
    content: '';
    position: absolute;
    left: -12px; top: 0; bottom: 0;
    width: 2px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.14s;
}
.row:hover::before { opacity: 1; }
.row:hover { background: var(--surface-hover); }

.row-date {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-tertiary);
    white-space: nowrap;
    padding-top: 3px;
}

.row-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.35;
}
.row-title a { color: var(--text); }
.row:hover .row-title a { color: var(--accent); }

.row-excerpt {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 68ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.row-tags { display: flex; gap: 6px; align-items: center; }

.row-rt {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    min-width: 76px;
    text-align: right;
}

@media (max-width: 780px) {
    .row {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        padding: 18px 0;
    }
    .row-date { grid-row: 1; grid-column: 1; padding-top: 0; }
    .row-rt { grid-row: 1; grid-column: 2; min-width: 0; }
    .row-main { grid-row: 2; grid-column: 1 / -1; }
    .row-tags { grid-row: 3; grid-column: 1 / -1; margin-top: 4px; }
    .row::before { left: -8px; }
}

/* ── Badges ──────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.7;
}

.badge-tag { color: var(--accent); background: var(--accent-dim); }
.badge-tag:hover { color: var(--accent); background: var(--accent-dim); filter: brightness(1.25); }
.badge-locked { color: var(--amber); background: var(--amber-dim); }
.badge-featured { color: var(--coral); background: var(--coral-dim); }

/* Multiple tags on a post read as a tier strip. */
.post-tags .badge-tag:nth-child(4n+1) { color: var(--green); background: var(--green-dim); }
.post-tags .badge-tag:nth-child(4n+2) { color: var(--accent); background: var(--accent-dim); }
.post-tags .badge-tag:nth-child(4n+3) { color: var(--coral); background: var(--coral-dim); }
.post-tags .badge-tag:nth-child(4n+4) { color: var(--amber); background: var(--amber-dim); }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    text-decoration: none;
    white-space: nowrap;
}

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

.btn-primary {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.1); color: #fff; }

.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn.is-disabled {
    color: var(--text-tertiary);
    cursor: default;
    opacity: 0.5;
}
.btn.is-disabled:hover { background: var(--surface); border-color: var(--border); }

/* ── Post cards ──────────────────────────────────────────────────── */

.post-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}


.post-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, transform 0.15s;
}

.post-card:hover { border-color: var(--border-strong); }
.post-card:hover .post-card-arrow { color: var(--accent); transform: translateX(3px); }
.post-card:hover .post-card-image { transform: scale(1.03); }

.post-card-image-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
}

.post-card-image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.post-card-body {
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.post-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-tertiary);
}

.post-card-date, .post-card-rt {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

.post-card-dot { color: var(--text-tertiary); opacity: 0.6; }

.post-card-title {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.35;
}
.post-card-title a { color: var(--text); }
.post-card:hover .post-card-title a { color: var(--accent); }

.post-card-excerpt {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: none;
    /* The helper's word limit is deliberately generous; the clamp does the
       trimming so the cut always lands on an ellipsis, not mid-sentence. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.post-card-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-card-arrow {
    color: var(--text-tertiary);
    display: flex;
    transition: color 0.15s, transform 0.15s;
}

/* Whole-card click target. The title's own link is stretched over the
   card rather than adding a second overlay anchor, so screen readers
   announce one link per card instead of a duplicate pair. */
.post-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.post-card-image-link, .post-card-meta a { position: relative; z-index: 2; }

/* ── Pagination ──────────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 4px;
}

.pagination-status {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ── Post & page ─────────────────────────────────────────────────── */

.post-full { max-width: var(--measure); margin: 0 auto; }
.post-full .content-header { display: block; padding-bottom: 22px; }

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.post-title {
    font-size: 36px;
    letter-spacing: -1.1px;
    line-height: 1.18;
}

.post-excerpt {
    margin-top: 12px;
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-tertiary);
}

.post-meta-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.post-meta-author { color: var(--text-secondary); font-weight: 600; }
.post-meta-author:hover { color: var(--accent); }
.post-meta-sep { opacity: 0.5; }

.post-feature-image {
    margin: 0 0 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.post-feature-image img { width: 100%; }
.post-feature-image figcaption {
    padding: 10px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    background: var(--surface);
    border-top: 1px solid var(--border);
    text-align: center;
}

/* ── Prose (Ghost post content) ──────────────────────────────────── */

.prose {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--prose);
}

.prose > * + * { margin-top: 1.35em; }

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    font-family: var(--font-heading);
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.3;
    scroll-margin-top: 24px;
}

.prose h2 { font-size: 25px; margin-top: 2em; }
.prose h3 { font-size: 20px; margin-top: 1.8em; }
.prose h4 { font-size: 17px; margin-top: 1.6em; }
.prose h5, .prose h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    margin-top: 1.8em;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-dim);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.12s;
}
.prose a:hover { text-decoration-color: var(--accent); color: var(--accent); }

.prose strong { color: var(--text); font-weight: 700; }
.prose em { font-style: italic; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--text-tertiary); }

.prose blockquote {
    border-left: 3px solid var(--accent);
    padding: 4px 0 4px 20px;
    color: var(--text-secondary);
    font-size: 17px;
}
.prose blockquote p + p { margin-top: 0.8em; }

.prose hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2.4em 0;
}

/* Inline code uses the dashboard's accent-on-dim treatment. It stays on the
   Arbiter accent rather than the Tokyo Night ramp below: inline code sits in
   a sentence and should read as prose, not as a fragment of an editor. */
.prose :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 2px 6px;
    border-radius: 3px;
    word-break: break-word;
}

/* ══ Code blocks — Tokyo Night ══
   Palette taken from folke/tokyonight.nvim: the `night` variant for dark and
   `day` for light, so the block follows the reader's scheme toggle instead of
   pinning one. Scoped to `.prose pre` on purpose — the surrounding page keeps
   the Arbiter tokens, which makes a code block read as a separate editor pane
   rather than bleeding into the article. */
.prose {
    --tn-bg: #1a1b26;
    --tn-border: #292e42;
    --tn-gutter: #3b4261;
    --tn-fg: #c0caf5;          /* @variable                */
    --tn-fg-dark: #a9b1d6;     /* @punctuation.bracket     */
    --tn-comment: #565f89;     /* @comment                 */
    --tn-dark3: #545c7e;       /* diff headers, non-code   */
    --tn-blue: #7aa2f7;        /* @function                */
    --tn-cyan: #7dcfff;        /* @function.builtin, @preproc */
    --tn-blue1: #2ac3de;       /* @type                    */
    --tn-blue5: #89ddff;       /* @operator, @punctuation.delimiter */
    --tn-blue6: #b4f9f8;       /* @string.regexp           */
    --tn-magenta: #bb9af7;     /* @keyword                 */
    --tn-purple: #9d7cd8;      /* @keyword.import          */
    --tn-orange: #ff9e64;      /* @number, @constant       */
    --tn-yellow: #e0af68;      /* @variable.parameter, @attribute */
    --tn-green: #9ece6a;       /* @string                  */
    --tn-teal: #73daca;        /* @property, @variable.member */
    --tn-red: #f7768e;         /* @tag, @variable.builtin  */
    --tn-add-bg: rgba(158, 206, 106, 0.13);
    --tn-del-bg: rgba(247, 118, 142, 0.13);
}
:root[data-scheme="light"] .prose {
    --tn-bg: #e1e2e7;
    --tn-border: #c4c8da;
    --tn-gutter: #a8aecb;
    --tn-fg: #3760bf;
    --tn-fg-dark: #6172b0;
    --tn-comment: #848cb5;
    --tn-dark3: #8990b3;
    --tn-blue: #2e7de9;
    --tn-cyan: #007197;
    --tn-blue1: #188092;
    --tn-blue5: #006a83;
    --tn-blue6: #3e6968;
    --tn-magenta: #9854f1;
    --tn-purple: #7847bd;
    --tn-orange: #b15c00;
    --tn-yellow: #8c6c3e;
    --tn-green: #587539;
    --tn-teal: #118c74;
    --tn-red: #f52a65;
    --tn-add-bg: rgba(88, 117, 57, 0.20);
    --tn-del-bg: rgba(245, 42, 101, 0.11);
}

.prose pre {
    font-family: var(--font-mono);
    font-size: 13px;
    /* Tighter than the prose ruleset: an editor buffer is denser than a
       paragraph, and loose leading is what makes a code block look pasted. */
    line-height: 1.55;
    background: var(--tn-bg);
    border: 1px solid var(--tn-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    overflow-x: auto;
    color: var(--tn-fg);
    tab-size: 4;
    /* JetBrains Mono ships programming ligatures on by default: -> renders as
       an arrow, != as a slashed equals, >>= as a single glyph. That is fine in
       an editor where you typed the code, but in a post a reader is scanning to
       copy a config line it shows characters the file does not contain. Off. */
    font-variant-ligatures: none;
    font-feature-settings: "calt" 0, "liga" 0;
}
.prose pre code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    color: inherit;
    padding: 0;
}

/* ── Token map ──
   Prism's grammars are coarser than treesitter's, so several captures collapse
   onto one Prism class; where Prism does make a distinction (builtin vs
   function, class-name vs variable, property vs string) it is honoured, which
   is what gives the block the colour variety of an editor rather than the
   four-colour look of a stock web highlighter. Comments below name the
   treesitter capture each rule is standing in for. */

.prose .token.comment,
.prose .token.prolog,
.prose .token.doctype,
.prose .token.cdata {            /* @comment */
    color: var(--tn-comment);
    font-style: italic;
}

.prose .token.punctuation { color: var(--tn-fg-dark); }        /* @punctuation.bracket */
.prose .token.punctuation.punct-delim,
.prose .token.operator,
.prose .token.entity { color: var(--tn-blue5); }               /* @operator, @punctuation.delimiter */

.prose .token.keyword,
.prose .token.atrule,
.prose .token.rule,
.prose .token.attr-name,
.prose .token.escape { color: var(--tn-magenta); }             /* @keyword, @tag.attribute */
.prose .token.keyword.module,
.prose .token.package { color: var(--tn-purple); }             /* @keyword.import */

.prose .token.string,
.prose .token.char,
.prose .token.attr-value,
.prose .token.url,
.prose .token.inserted { color: var(--tn-green); }             /* @string */
.prose .token.regex { color: var(--tn-blue6); }                /* @string.regexp */

.prose .token.function,
.prose .token.function-name,
.prose .token.method { color: var(--tn-blue); }                /* @function */
.prose .token.builtin,
.prose .token.important { color: var(--tn-cyan); }             /* @function.builtin */

.prose .token.class-name,
.prose .token.maybe-class-name,
.prose .token.selector,
.prose .token.tag .token.class-name { color: var(--tn-blue1); } /* @type */

.prose .token.number,
.prose .token.boolean,
.prose .token.constant,
.prose .token.symbol,
.prose .token.unit { color: var(--tn-orange); }                /* @number, @constant */

.prose .token.property,
.prose .token.property-access { color: var(--tn-teal); }       /* @property, @variable.member */

.prose .token.parameter,
.prose .token.namespace,
.prose .token.annotation { color: var(--tn-yellow); }          /* @variable.parameter, @attribute */

.prose .token.variable { color: var(--tn-fg); }                /* @variable */
.prose .token.tag,
.prose .token.deleted { color: var(--tn-red); }                /* @tag, @diff.minus */

/* Prism gives bash's shebang the alias `important`, which is cyan above at the
   same specificity — so this has to come after it to win. nvim treats a shebang
   as a comment, and so do we. */
.prose .token.shebang {
    color: var(--tn-comment);
    font-style: italic;
}

.prose .token.bold { font-weight: 600; }
.prose .token.italic { font-style: italic; }
/* Prism gives `namespace` a blanket 0.7 opacity in its own stylesheets; the
   colour above already de-emphasises it, so keep it at full strength. */
.prose .token.namespace { opacity: 1; }

/* ── Diffs ──
   Prism nests a `.token.prefix` (the bare +/-) inside the line wrapper:
   <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span>…
   Putting `display: block` on `.deleted`/`.inserted` therefore promotes that
   marker to its own line and splits every changed line in two. The tint has to
   hang off `*-sign`. Consecutive changed lines coalesce into a single token, so
   one bar spans them; the negative margin matches `.prose pre`'s padding. */
.prose pre[class*="language-diff"] .token.deleted-sign,
.prose pre[class*="language-diff"] .token.inserted-sign {
    display: block;
    margin: 0 -18px;
    padding: 0 18px;
}
.prose pre[class*="language-diff"] .token.inserted-sign { background: var(--tn-add-bg); }
.prose pre[class*="language-diff"] .token.deleted-sign  { background: var(--tn-del-bg); }
/* File and hunk headers (---, +++, @@) orient the reader; they are not code. */
.prose .token.coord { color: var(--tn-dark3); }

/* Ghost's code card wraps the block in a <figure> and can carry a caption.
   Captions elsewhere are centred under images; under code, left reads better. */
.prose .kg-code-card { margin-top: 1.8em; }
.prose .kg-code-card pre { margin: 0; }
.prose .kg-code-card figcaption {
    margin-top: 8px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.prose img, .prose video { border-radius: var(--radius); }

.prose figure { margin-top: 1.8em; }
.prose figcaption {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}
.prose figcaption a { color: var(--text-secondary); }

/* Tables inherit the dashboard's table rhythm. */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    display: block;
    overflow-x: auto;
}
.prose th {
    text-align: left;
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.prose td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--surface-raised);
}
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover td { background: var(--surface-hover); }

/* ── Ghost editor cards ──────────────────────────────────────────── */

.prose .kg-card { margin-top: 1.8em; }

.kg-width-wide { max-width: min(1040px, 118%); margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { max-width: min(1280px, 132%); margin-left: 50%; transform: translateX(-50%); }

.kg-image { margin-left: auto; margin-right: auto; }

.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; border-radius: var(--radius); }

.kg-callout-card {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 15px;
}
.kg-callout-emoji { flex-shrink: 0; }

.kg-toggle-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.kg-toggle-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.kg-toggle-heading-text { font-size: 16px; font-weight: 700; color: var(--text); }
.kg-toggle-card-icon { color: var(--text-tertiary); }
.kg-toggle-content { margin-top: 12px; font-size: 15px; color: var(--text-secondary); }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-card-icon { transform: rotate(-90deg); }

.kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
    transition: border-color 0.12s;
}
.kg-bookmark-card a.kg-bookmark-container:hover { border-color: var(--border-strong); }
.kg-bookmark-content { padding: 18px 20px; flex: 1; min-width: 0; }
.kg-bookmark-title { font-weight: 700; font-size: 15px; }
.kg-bookmark-description {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kg-bookmark-metadata {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}
.kg-bookmark-icon { width: 16px; height: 16px; }
.kg-bookmark-thumbnail { flex: 0 0 180px; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.kg-button-card { display: flex; justify-content: center; }
.kg-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    background: var(--accent-strong);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.kg-btn:hover { filter: brightness(1.1); color: #fff; }

.kg-header-card, .kg-product-card, .kg-audio-card, .kg-file-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.kg-gallery-row { display: flex; gap: 10px; }
.kg-gallery-image { flex: 1; min-width: 0; }
.kg-gallery-row + .kg-gallery-row { margin-top: 10px; }

@media (max-width: 900px) {
    .kg-width-wide, .kg-width-full { max-width: 100%; margin-left: 0; transform: none; }
    .kg-bookmark-thumbnail { display: none; }
}

/* ── Members gate ────────────────────────────────────────────────── */

.gate-card {
    margin-top: 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.gate-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(100% 120% at 50% 0%, var(--accent-dim), transparent 60%);
    pointer-events: none;
}
.gate-title { font-family: var(--font-heading); font-size: 21px; font-weight: 800; letter-spacing: -0.5px; margin-top: 10px; }
.gate-text { margin-top: 8px; color: var(--text-secondary); font-size: 14px; }
.gate-actions { margin-top: 18px; display: flex; gap: 8px; justify-content: center; position: relative; z-index: 1; }

/* ── Author card & related ───────────────────────────────────────── */

.post-footer { margin-top: 40px; }

.author-card { display: flex; gap: 18px; align-items: flex-start; }
.author-card-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-card-body { min-width: 0; }
.author-card-name {
    font-family: var(--font-heading);
    display: block;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.author-card-name:hover { color: var(--accent); }
.author-card-bio { margin-top: 6px; font-size: 13.5px; color: var(--text-secondary); }

/* ── Table of contents ───────────────────────────────────────────────
   Hidden by default and only revealed once main.js confirms the post
   actually has headings, so a post without them keeps the plain centred
   measure rather than an empty rail. */

.post-toc { display: none; }

@media (min-width: 1280px) {
    .post-layout.has-toc {
        display: grid;
        grid-template-columns: minmax(0, var(--measure)) 232px;
        gap: 56px;
        align-items: start;
        justify-content: center;
        max-width: calc(var(--measure) + 232px + 56px);
        margin: 0 auto;
    }
    /* The article stops centring itself once it is a grid column. */
    .post-layout.has-toc .post-full { max-width: none; margin: 0; }

    .post-layout.has-toc .post-toc {
        display: block;
        position: sticky;
        top: 32px;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
        padding-left: 18px;
        border-left: 1px solid var(--border);
    }
}

.toc-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.toc-nav a {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-tertiary);
    border-left: 2px solid transparent;
    margin-left: -19px;
    padding-left: 17px;
    transition: color 0.12s, border-color 0.12s;
}
.toc-nav a:hover { color: var(--text); }
/* Indent is relative to the shallowest heading in the post, not to a fixed
   tag name — see the topLevel calculation in main.js. */
.toc-nav a.toc-d1 { padding-left: 29px; font-size: 12.5px; }
.toc-nav a.toc-d2 { padding-left: 41px; font-size: 12.5px; color: var(--text-tertiary); }

/* Scrollspy state, mirroring the sidebar's active-nav treatment. */
.toc-nav a.active {
    color: var(--accent);
    border-left-color: var(--accent);
}

/* Anchor jumps shouldn't land the heading flush against the viewport edge. */
.prose h1, .prose h2, .prose h3, .prose h4 { scroll-margin-top: 24px; }

.related-section { max-width: var(--measure); margin: 44px auto 0; }

.archive-image, .archive-avatar {
    width: 56px; height: 56px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--border);
}
.archive-avatar { border-radius: 50%; }

/* ── Empty / error states ────────────────────────────────────────── */

.empty-state {
    padding: 44px 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}


.endpoint-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    flex-wrap: wrap;
}

.http-method {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 44px;
    text-align: center;
    flex-shrink: 0;
    color: var(--green);
    background: var(--green-dim);
}

.endpoint-path {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.endpoint-desc { font-size: 12px; color: var(--text-secondary); }

.error-actions { margin-top: 18px; }

.error-stack {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    overflow-x: auto;
    color: var(--text-secondary);
}

/* ── Site footer ─────────────────────────────────────────────────── */

.site-footer {
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-tertiary);
}
.footer-copy a { color: var(--text-secondary); }
.footer-copy a:hover { color: var(--accent); }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .sidebar-toggle { display: flex; }
    .sidebar { transform: translateX(calc(var(--sidebar-w) * -1)); }
    .main-content { margin-left: 0; padding: 0 20px 48px; }
    .content-header { padding-top: 64px; }
    /* Clear the sidebar toggle, which is absolutely positioned over this corner. */
    .masthead { padding-top: 64px; }

    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-toggle { color: var(--text); }
}

@media (max-width: 700px) {
    .post-title { font-size: 28px; letter-spacing: -0.8px; }
    .content-title { font-size: 22px; }
    .prose { font-size: 16px; }
    .prose h2 { font-size: 22px; }
    .author-card { flex-direction: column; gap: 12px; }
    .pagination { flex-direction: column; align-items: stretch; text-align: center; }
}

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

.error-details { list-style: none; margin: 12px 0 0; padding: 0; }
.error-details > li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.error-detail-row { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.error-ref {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 1px 6px;
    border-radius: 3px;
}

/* ── Scheme toggle ───────────────────────────────────────────────── */

.scheme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.12s, border-color 0.12s;
}
.scheme-toggle:hover { color: var(--text); border-color: var(--border-strong); }

/* Show the icon for the scheme you would switch TO. */
.scheme-toggle .icon-sun { display: none; }
.scheme-toggle .icon-moon { display: block; }
:root[data-scheme="light"] .scheme-toggle .icon-sun { display: block; }
:root[data-scheme="light"] .scheme-toggle .icon-moon { display: none; }

/* ── Site footer ─────────────────────────────────────────────────── */

.footer-link {
    font-size: 12px;
    color: var(--text-tertiary);
}
.footer-link:hover { color: var(--accent); }