/*
  Gigan Design System — gigan-site (htmx/alpine) token layer
  Fonts: Fraunces (headings), Lora (body), Space Mono (mono/system)
  Base spacing: 6px | Radius: 2px | Motion: 100ms linear
*/
:root {
    --font-size-base: 15px;

    /* Surfaces — warm near-black, 60deg hue at 3% saturation */
    --bg-primary: #141413;
    --bg-secondary: #1e1e1c;
    --bg-tertiary: #26261f;
    --text-primary: #faf9f5;
    --text-secondary: #807e76c7;
    --text-heading: #faf9f5;
    --border-color: #2e2e2b;
    --border-hover: #3a3a35;
    --control-bg: #141413;
    --control-hover-bg: #788c5d;
    --control-hover-text: #141413;
    --tooltip-bg: #1e1e1c;
    --tooltip-border: #2e2e2b;
    --scrollbar-track: #141413;
    --scrollbar-thumb: #2e2e2b;
    --scrollbar-thumb-hover: #807e76;
    --code-bg: #141413;
    --blockquote-border: #CC785C;
    --blockquote-text: #faf9f5;
    --link-color: #6a9bcc;
    --active-highlight: rgba(120, 140, 93, 0.25);
    --active-shadow: rgba(120, 140, 93, 0.5);
    --hover-overlay: rgba(255, 255, 255, 0.04);

    /* Design system accent colors */
    --ds-primary: #788c5d;
    --ds-secondary: #CC785C;
    --ds-accent: #6a9bcc;
    --ds-destructive: #A5524A;

    /* Fonts */
    --heading-font: 'Fraunces', serif;
    --body-font: 'Lora', Georgia, serif;
    --mono-font: 'Space Mono', monospace;

    /* Clerk dark mode theming */
    --clerk-color-background: #1e1e1c;
    --clerk-color-neutral: #faf9f5;
    --clerk-color-primary: #788c5d;
    --clerk-color-primary-foreground: #141413;
    --clerk-color-foreground: #faf9f5;
    --clerk-color-input-foreground: #faf9f5;
    --clerk-color-input: #141413;

    --annotation-color-0: #6a9bcc;
    --annotation-color-1: #788c5d;
    --annotation-color-2: #CC785C;
    --annotation-color-3: #c8a84c;
    --annotation-color-4: #a490c2;
    --annotation-color-5: #A5524A;
    --annotation-color-6: #e07050;
    --annotation-color-7: #5ba8b0;
    --annotation-color-8: #8ba85d;
    --annotation-color-9: #6b6154;
}

/* Light theme — surfaces inverted, accents darkened for WCAG AA on cream.
   Matches design system [data-theme="light"] token set. */
body.theme-light {
    --bg-primary: #f5f3ed;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0ede6;
    --text-primary: #1c1c1a;
    --text-secondary: #605e57;
    --text-heading: #1c1c1a;
    --border-color: #d8d5cb;
    --border-hover: #c5c2b8;
    --control-bg: #f5f3ed;
    --control-hover-bg: #4d6b3a;
    --control-hover-text: #f5f3ed;
    --tooltip-bg: #ffffff;
    --tooltip-border: #d8d5cb;
    --scrollbar-track: #f0ede6;
    --scrollbar-thumb: #d8d5cb;
    --scrollbar-thumb-hover: #c5c2b8;
    --code-bg: #f0ede6;
    --blockquote-border: #a85838;
    --blockquote-text: #605e57;
    --link-color: #2d6490;
    --active-highlight: rgba(77, 107, 58, 0.15);
    --active-shadow: rgba(77, 107, 58, 0.3);
    --hover-overlay: rgba(0, 0, 0, 0.02);

    /* Darkened accents for light backgrounds */
    --ds-primary: #4d6b3a;
    --ds-secondary: #a85838;
    --ds-accent: #3d78a8;
    --ds-destructive: #923f38;

    /* Lighter shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.14);

    /* Annotation colors darkened for light backgrounds */
    --annotation-color-0: #3d78a8;
    --annotation-color-1: #4d6b3a;
    --annotation-color-2: #a85838;
    --annotation-color-3: #9e8530;
    --annotation-color-4: #7a6499;
    --annotation-color-5: #923f38;
    --annotation-color-6: #c05540;
    --annotation-color-7: #3a8a92;
    --annotation-color-8: #5a8040;
    --annotation-color-9: #5a5448;
}

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

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--body-font);
    line-height: 1.65;
    font-size: var(--font-size-base);
    opacity: 0;
    animation: fadeIn 0.4s linear forwards;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 22px;
    margin-bottom: 6px;
    color: var(--text-heading);
    text-align: center;
    line-height: 1.15;
}

h3 {
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.3;
}

.subtitle {
    text-align: center;
    font-family: var(--mono-font);
    color: var(--ds-primary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.main-container {
    background: transparent;
    border-radius: 2px;
}

/* ─── Title card (TOC hero) ───────────────────────────────────────────
   Mixes display type (title, subtitle, image) with body content
   (tagline, features list). The display zone stays centered; the body
   zone is left-aligned inside a constrained reading column. This
   prevents multi-line bullets from wrapping in an ugly centered mess,
   which was the main complaint with the old style. */
.title-card {
    width: 100%;
    padding: 28px 36px 24px;
    background-color: var(--bg-secondary);
    border-radius: 2px;
    margin-bottom: 28px;
    border: 1px solid var(--border-color);
}

.title-card-title {
    font-family: var(--heading-font);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.15;
}

/* Body text lives inside a constrained reading column and defaults to
   LEFT alignment. Display elements (h1/h2/image) override to center. */
.title-card-content {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.55;
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    padding: 0 12px;
}

/* Main title — Fraunces display, centered, big. */
.title-card-content h1 {
    text-align: center;
    color: var(--text-heading);
    font-family: var(--heading-font);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.05;
}

/* Author / subtitle — centered mono accent, tight below. */
.title-card-content h2 {
    text-align: center;
    color: var(--ds-primary);
    font-family: var(--mono-font);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

/* Image — rectangular card (cleaner than the old cameo medallion) but
   still wrapped in the accent-green ring so the composition keeps its
   splash of color. The ring is built from an offset box-shadow instead
   of two borders so the corners stay crisp. */
.title-card-content .toc-image {
    display: block;
    margin: 0 auto 20px;
    width: 140px;
    height: auto;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--ds-primary);
    box-shadow:
        0 0 0 3px var(--bg-secondary),
        0 0 0 4px var(--ds-primary),
        0 8px 22px rgba(0, 0, 0, 0.45);
}

/* Lead paragraph — used for the book tagline that sits between the
   image and the features list. Centered display type but muted so it
   doesn't fight the title. NO italic — the italic-17px treatment was
   the worst part of the old style. */
.title-card-content > p:first-of-type {
    text-align: center;
    font-family: var(--heading-font);
    font-style: normal;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 520px;
    margin: 0 auto 22px;
    padding: 0;
}

/* Subsequent paragraphs render as regular body copy, left-aligned. */
.title-card-content p {
    margin: 0 0 10px;
    color: var(--text-primary);
}

/* Section heading inside the card (e.g. "Features"). Left-aligned so
   it anchors the list below it instead of floating in the middle. */
.title-card-content h3 {
    font-family: var(--mono-font);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* Bulleted lists — left-aligned, tight spacing, muted markers so
   the content carries the weight instead of the bullets. */
.title-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.title-card-content li {
    position: relative;
    padding: 0 0 0 18px;
    margin: 0 0 6px;
    color: var(--text-primary);
    line-height: 1.55;
}

.title-card-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 8px;
    height: 1px;
    background-color: var(--ds-primary);
}

/* Inline links inside the title card render as plain body copy — the
   default blue-underline treatment clashes with the muted composition.
   Hover brings in a subtle underline for affordance without shouting. */
.title-card-content a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 100ms linear;
}

.title-card-content a:hover {
    border-bottom-color: var(--text-secondary);
}

.sections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
}

.section-card {
    display: block;
    padding: 24px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: all 100ms linear;
    position: relative;
    overflow: hidden;
}

.section-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, var(--hover-overlay));
    opacity: 0;
    transition: opacity 100ms linear;
    pointer-events: none;
}

.section-card:hover {
    background-color: var(--bg-tertiary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.section-card:hover::after {
    opacity: 1;
}

.section-card h3 {
    font-family: var(--heading-font);
    color: var(--text-primary);
    font-size: 1.15rem;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.section-card p {
    font-family: var(--body-font);
    color: var(--text-secondary);
    text-align: left;
    margin: 0;
    font-size: 0.88rem;
}

.section-header {
    margin-top: 8px;
    margin-bottom: 2px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.section-header h1 {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    line-height: 1.15;
}

.breadcrumb {
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.02em;
}

.breadcrumb a {
    font-family: var(--mono-font);
    color: var(--link-color);
    text-decoration: none;
    font-size: 0.72rem;
    text-transform: capitalize;
    transition: color 100ms linear;
}

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

.section-container {
    opacity: 0;
    animation: fadeInSection 0.4s ease-in forwards;
}

.section-container:first-child {
    padding-top: 2px;
}

.section-container:last-child {
    padding-bottom: 30px;
}

.section-container[data-cached="true"] {
    animation: fadeInSection 0.2s ease-in forwards;
}

@keyframes fadeInSection {
    to { opacity: 1; }
}

.text-container {
    position: relative;
    font-size: var(--font-size-base);
    line-height: 1.9;
    padding: 30px;
    padding-bottom: 0;
    padding-top: 0;
    text-align: justify;
    overflow-wrap: break-word;
}

.text-container br {
    display: block;
    margin: 0.5em 0;
    content: "";
}

.annotation {
    cursor: pointer;
    border-bottom: 2px solid;
    border-radius: 2px;
    transition: all 100ms linear;
}

.annotation:hover {
    background: var(--hover-overlay);
}

.annotation.active {
    background: var(--active-highlight);
    box-shadow: 0 0 0 3px var(--active-shadow);
    border-bottom-width: 3px;
}

.annotation[data-style-slot="0"] {
    border-bottom-color: var(--annotation-color-0);
}

.annotation[data-style-slot="1"] {
    border-bottom-color: var(--annotation-color-1);
}

.annotation[data-style-slot="2"] {
    border-bottom-color: var(--annotation-color-2);
}

.annotation[data-style-slot="3"] {
    border-bottom-color: var(--annotation-color-3);
}

.annotation[data-style-slot="4"] {
    border-bottom-color: var(--annotation-color-4);
}

.annotation[data-style-slot="5"] {
    border-bottom-color: var(--annotation-color-5);
}

.annotation[data-style-slot="6"] {
    border-bottom-color: var(--annotation-color-6);
}

.annotation[data-style-slot="7"] {
    border-bottom-color: var(--annotation-color-7);
}

.annotation[data-style-slot="8"] {
    border-bottom-color: var(--annotation-color-8);
}

.annotation[data-style-slot="9"] {
    border-bottom-color: var(--annotation-color-9);
}

.annotation .annotation {
    border-bottom: none;
}

.annotation .annotation[data-style-slot="0"] {
    background-color: rgba(52, 152, 219, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="1"] {
    background-color: rgba(46, 204, 113, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="2"] {
    background-color: rgba(243, 156, 18, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="3"] {
    background-color: rgba(26, 188, 156, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="4"] {
    background-color: rgba(155, 89, 182, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="5"] {
    background-color: rgba(233, 30, 99, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="6"] {
    background-color: rgba(255, 87, 34, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="7"] {
    background-color: rgba(0, 188, 212, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="8"] {
    background-color: rgba(139, 195, 74, var(--nested-annotation-alpha));
}

.annotation .annotation[data-style-slot="9"] {
    background-color: rgba(52, 73, 94, var(--nested-annotation-alpha));
}

/* Hide uncited annotations (default off — user can toggle in settings) */
body.hide-uncited .annotation.no-sources {
    border-bottom: none;
    pointer-events: none;
}
body.hide-uncited .annotation.no-sources .annotation {
    background-color: transparent;
}

body.annotations-disabled .annotation {
    border-bottom: none;
}

body.annotations-disabled .annotation .annotation {
    background-color: transparent;
}

body.annotations-disabled .annotation:hover {
    border-bottom: 2px solid;
}

body.annotations-disabled .annotation[data-style-slot="0"]:hover {
    border-bottom-color: var(--annotation-color-0);
}

body.annotations-disabled .annotation[data-style-slot="1"]:hover {
    border-bottom-color: var(--annotation-color-1);
}

body.annotations-disabled .annotation[data-style-slot="2"]:hover {
    border-bottom-color: var(--annotation-color-2);
}

body.annotations-disabled .annotation[data-style-slot="3"]:hover {
    border-bottom-color: var(--annotation-color-3);
}

body.annotations-disabled .annotation[data-style-slot="4"]:hover {
    border-bottom-color: var(--annotation-color-4);
}

body.annotations-disabled .annotation[data-style-slot="5"]:hover {
    border-bottom-color: var(--annotation-color-5);
}

body.annotations-disabled .annotation[data-style-slot="6"]:hover {
    border-bottom-color: var(--annotation-color-6);
}

body.annotations-disabled .annotation[data-style-slot="7"]:hover {
    border-bottom-color: var(--annotation-color-7);
}

body.annotations-disabled .annotation[data-style-slot="8"]:hover {
    border-bottom-color: var(--annotation-color-8);
}

body.annotations-disabled .annotation[data-style-slot="9"]:hover {
    border-bottom-color: var(--annotation-color-9);
}

.annotation.type-disabled {
    border-bottom: none;
}

.annotation.type-disabled .annotation {
    background-color: transparent;
}

.annotation[data-style-slot="0"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-0);
}

.annotation[data-style-slot="1"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-1);
}

.annotation[data-style-slot="2"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-2);
}

.annotation[data-style-slot="3"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-3);
}

.annotation[data-style-slot="4"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-4);
}

.annotation[data-style-slot="5"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-5);
}

.annotation[data-style-slot="6"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-6);
}

.annotation[data-style-slot="7"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-7);
}

.annotation[data-style-slot="8"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-8);
}

.annotation[data-style-slot="9"].type-disabled:hover {
    border-bottom: 2px solid var(--annotation-color-9);
}

#tooltip-container {
    display: none;
    position: absolute;
    left: 5%;
    width: 90%;
    background: var(--tooltip-bg);
    border: 1px solid var(--tooltip-border);
    border-radius: 2px;
    margin-top: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: hidden;
}

#tooltip-container.visible {
    display: block;
}

#tooltip-container.loading {
    display: block;
    text-align: center;
    color: var(--text-secondary);
    padding: 24px;
}

.tooltip-close-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    z-index: 1001;
    transition: all 100ms linear;
}

.tooltip-close-btn:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);
    border-color: var(--border-hover);
}

.tooltip-close-btn:active {
    transform: scale(0.95);
}

.tooltip-text {
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 0;
    padding: 16px 50px 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    font-size: 15px;
    letter-spacing: 0.01em;
}

.tooltip-content-wrapper {
    position: relative;
}

.tooltip-content {
    max-height: 35vh;
    min-height: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: justify;
    padding: 16px 20px;
    margin-bottom: 0;
    position: relative;
    line-height: 1.7;
}

.tooltip-scroll-indicator {
    position: absolute;
    bottom: 8px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: var(--tooltip-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--border-color);
}

.tooltip-scroll-indicator.visible {
    opacity: 0.9;
}

.tooltip-scroll-indicator svg {
    width: 20px;
    height: 20px;
}

.tooltip-content ul,
.tooltip-content ol {
    padding-left: 20px;
    margin: 8px 0;
}

.tooltip-content li {
    margin: 4px 0;
}

.tooltip-content p {
    margin: 10px 0;
}

.tooltip-content p:first-child {
    margin-top: 0;
}

.tooltip-content p:last-child {
    margin-bottom: 0;
}

.tooltip-content h1,
.tooltip-content h2,
.tooltip-content h3,
.tooltip-content h4,
.tooltip-content h5,
.tooltip-content h6 {
    margin: 12px 0 8px 0;
    font-weight: 600;
}

.tooltip-content h3 {
    font-size: 1.1em;
}

.tooltip-content blockquote {
    margin: 8px 0;
    padding-left: 12px;
    border-left: 3px solid var(--blockquote-border);
    font-style: italic;
    color: var(--blockquote-text);
}

.tooltip-content code {
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 1px;
    font-family: var(--mono-font);
    font-size: 0.85em;
}

.tooltip-content a {
    color: var(--link-color);
    text-decoration: none;
}

.tooltip-content a:hover {
    text-decoration: underline;
}

.tooltip-content::-webkit-scrollbar {
    width: 8px;
}

.tooltip-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

.tooltip-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

.tooltip-content::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.tooltip-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 12px 20px 20px 20px;
    border-top: 1px solid var(--border-hover);
    margin-bottom: 0;
}

.tooltip-meta-type {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.tooltip-type-value {
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.tooltip-meta-debug {
    display: flex;
    gap: 20px;
    margin-left: auto;
}

.tooltip-meta-item {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.tooltip-meta-label {
    font-family: var(--mono-font);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

/* Permission-based visibility rules */
/* Hide reviewer-only elements by default, show when user has reviewer permission */
.settings-group.perm-reviewer-only {
    display: none;
}

body.perm-reviewer .settings-group.perm-reviewer-only {
    display: flex;
}

/* Flag button for annotation review requests */
.tooltip-flag {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.flag-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--mono-font);
    font-size: 0.72rem;
    transition: all 100ms linear;
}

.flag-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.flag-icon {
    width: 14px;
    height: 14px;
}

.flag-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 250px;
}

.flag-comment {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--body-font);
    resize: none;
}

.flag-comment:focus {
    outline: none;
    border-color: var(--text-secondary);
}

.flag-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.flag-submit,
.flag-cancel {
    padding: 6px 12px;
    border-radius: 2px;
    font-family: var(--heading-font);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 100ms linear;
}

.flag-submit {
    background: var(--ds-destructive);
    color: var(--text-primary);
    border: none;
}

.flag-submit:hover {
    filter: brightness(1.1);
}

.flag-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.flag-cancel:hover {
    border-color: var(--text-secondary);
}

.flag-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-destructive);
    font-size: 0.72rem;
}

.flag-status-text {
    opacity: 0.8;
}

/* Hide flag button when already flagged */
.tooltip-flag.flagged .flag-btn {
    display: none;
}

.tooltip-flag.flagged .flag-status {
    display: flex !important;
}

/* Flag Modal Styles */
.flag-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.flag-modal.visible {
    display: block;
}

.flag-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.flag-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

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

.flag-modal-header h3 {
    font-family: var(--heading-font);
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.flag-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.flag-modal-close:hover {
    color: var(--text-primary);
}

.flag-modal-body {
    padding: 20px;
}

.flag-modal-body label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.flag-modal-textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: var(--body-font);
    resize: vertical;
    min-height: 100px;
}

.flag-modal-textarea:focus {
    outline: none;
    border-color: var(--text-secondary);
}

.flag-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.flag-modal-cancel,
.flag-modal-submit {
    padding: 6px 18px;
    border-radius: 2px;
    font-family: var(--heading-font);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 100ms linear;
}

.flag-modal-cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.flag-modal-cancel:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.flag-modal-submit {
    background: var(--ds-destructive);
    border: none;
    color: var(--text-primary);
}

.flag-modal-submit:hover {
    filter: brightness(1.1);
}

/* Annotation preview in flag modal */
.flag-modal-annotation-preview {
    margin-bottom: 16px;
}

.flag-modal-annotation-preview label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.flag-modal-annotation-content {
    max-height: 200px;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    font-family: var(--body-font);
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-primary);
}

.flag-modal-annotation-content p {
    margin: 0 0 8px 0;
}

.flag-modal-annotation-content p:last-child {
    margin-bottom: 0;
}

.tooltip-context {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-family: var(--mono-font);
    margin-top: 6px;
    line-height: 1.4;
}

/* Annotation citation sources styling - collapsible */
.tooltip-sources {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-hover);
}

.tooltip-sources-header {
    font-family: var(--mono-font);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tooltip-sources-header:hover {
    color: var(--text-primary);
}

.tooltip-sources-header .toggle-icon {
    font-size: 8px;
    transition: transform 0.2s ease;
}

.tooltip-sources.expanded .tooltip-sources-header .toggle-icon {
    transform: rotate(90deg);
}

.tooltip-sources-content {
    display: none;
    margin-top: 10px;
}

.tooltip-sources.expanded .tooltip-sources-content {
    display: block;
}

.tooltip-source-item {
    /* Scale proportionally with main font size (2px smaller) */
    font-size: calc(var(--font-size-base) - 2px);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 4px;
    padding: 4px 12px;
    background: var(--container-bg);
    border-left: 3px solid var(--link-color);
    border-radius: 2px;
}

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

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-hover);
    border-top-color: var(--link-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-style: italic;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

#scroll-restore-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 26, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

#scroll-restore-overlay.active {
    display: flex;
}

.restore-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--ds-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.controls {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--control-bg);
}

.controls.collapsed {
    transform: translateX(100%);
}

.controls-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.annotation-type-wrapper {
    position: relative;
}

.annotation-type-wrapper:hover .annotation-type-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Generic wrapper for toggle buttons that need a hover tooltip label.
 * Kept distinct from .annotation-type-wrapper so the mobile media query
 * (which hides annotation-type-wrapper) doesn't also hide these. */
.control-btn-wrapper {
    position: relative;
}

.control-btn-wrapper:hover .control-btn-tooltip {
    opacity: 1;
    visibility: visible;
}

.control-btn-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--tooltip-bg);
    color: var(--text-primary);
    border: 1px solid var(--tooltip-border);
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.control-btn-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--tooltip-border);
}

.control-btn-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--tooltip-bg);
}

.annotation-type-tooltip.show {
    opacity: 1;
    visibility: visible;
}

.annotation-type-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--tooltip-bg);
    color: var(--text-primary);
    border: 1px solid var(--tooltip-border);
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.annotation-type-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--tooltip-border);
}

.annotation-type-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--tooltip-bg);
}

.control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 100ms linear;
}

.control-btn:hover {
    background-color: var(--control-hover-bg);
    color: var(--control-hover-text);
    border-color: var(--control-hover-bg);
}

.control-btn .icon {
    width: 18px;
    height: 18px;
}

/* Toggled-on state for stateful control buttons (e.g. show-uncited).
 * Inverts background/foreground so readers can tell at a glance what's on. */
.control-btn.active {
    background-color: var(--control-hover-bg);
    color: var(--control-hover-text);
    border-color: var(--control-hover-bg);
}

.control-btn.active:hover {
    filter: brightness(0.9);
}

.position-toggle-btn {
    width: 100%;
    padding: 8px;
    justify-content: center;
}

.position-toggle-btn .icon {
    width: 24px;
    height: 24px;
}

.annotation-type-toggle {
    font-size: 14px;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-width: 2px;
    transition: all 0.15s ease;
}

.annotation-type-toggle.enabled {
    color: var(--control-hover-text);
    opacity: 0.8;
}

.annotation-type-toggle:not(.enabled) {
    background-color: transparent;
    color: var(--text-secondary);
}

.annotation-type-toggle:not(.enabled):hover {
    color: var(--control-hover-text);
    opacity: 0.8;
}

.mobile-collapse-toggle {
    display: none;
    position: fixed;
    top: 6px;
    right: 6px;
    z-index: 1001;
    transition: top 0.3s ease, bottom 0.3s ease;
}

.mobile-collapse-toggle.bottom-position {
    top: auto;
    bottom: 14px;
}

.settings-panel {
    position: fixed;
    top: 47px;
    right: 12px;
    z-index: 999;
    background-color: var(--control-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 280px;
    transition: top 0.3s ease, bottom 0.3s ease;
}

.settings-panel.bottom-position {
    top: auto;
    bottom: 62px;
}

.controls.bottom-position {
    top: auto;
    bottom: 8px;
}

.settings-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.settings-group.version-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.settings-group.version-row .position-toggle-btn {
    width: auto;
    min-width: 40px;
    padding: 6px 8px;
}

.settings-group.horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.settings-label {
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stats-table {
    width: 100%;
    font-family: var(--mono-font);
    font-size: 0.72rem;
    border-collapse: collapse;
}

.stats-table td {
    padding: 2px 4px;
}

.stats-table .stat-label {
    color: var(--text-secondary);
    text-align: left;
}

.stats-table .stat-value {
    text-align: right;
    font-weight: 500;
}

.theme-selector {
    display: flex;
    gap: 3px;
}

.theme-option {
    flex: 1;
    padding: 6px 9px;
    font-family: var(--heading-font);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 100ms linear;
}

.theme-option:hover {
    background-color: var(--hover-overlay);
    border-color: var(--border-hover);
}

.theme-option.active {
    background-color: var(--control-hover-bg);
    color: var(--control-hover-text);
    border-color: var(--control-hover-bg);
}

.font-size-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.font-size-display {
    min-width: 40px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.font-size-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .sections-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    
    .container {
        padding-top: 12px;
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 60px;
    }
}

@media (min-width: 1200px) {
    .sections-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.font-size-btn:disabled:hover {
    background-color: var(--control-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.version-display {
    font-family: var(--mono-font);
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.settings-toggle img.icon {
    filter: brightness(0) saturate(100%) invert(1);
}

body.theme-light .settings-toggle img.icon {
    filter: brightness(0) saturate(100%);
}

body.theme-light .annotation-type-toggle {
    background-color: #1c1c1a;
}

body.theme-light .annotation-type-toggle.enabled {
    color: #f5f3ed;
}

body.theme-light .tooltip-text {
    color: #605e57;
}

@media (max-width: 768px) {

    .settings-panel {
        right: 6px;
    }

    .annotation-type-wrapper {
        display: none;
    }

    .annotation-type-tooltip {
        display: none !important;
    }

    /* Hover tooltip label has no place on mobile — no hover state. */
    .control-btn-tooltip {
        display: none !important;
    }

    .tooltip-close-btn {
        display: flex;
    }

    /* Larger touch targets for mobile/tablet */
    .control-btn {
        width: 44px;
        height: 44px;
    }

    .control-btn .icon {
        width: 24px;
        height: 24px;
    }

    .annotation-type-toggle {
        width: 44px;
        height: 44px;
    }

    .mobile-collapse-toggle {
        display: flex;
    }

    .controls {
        transition: transform 0.2s ease;
    }

    .controls:not(.collapsed) {
        right: 44px;
    }

    body.index-page .controls:not(.collapsed) {
        right: -6px;
    }

    .container {
        padding: 60px 1.5rem;
    }

    .main-container {
        background: transparent;
        border-radius: 0;
    }

    .text-container {
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }

    /* Left-align annotation content on mobile for better readability */
    .tooltip-content {
        text-align: left;
    }
}

@media (max-width: 767px) {
    #tooltip-container {
        left: 0 !important;
        width: 100% !important;
        /* max-height: 50vh;
        overflow: hidden; */
        border-radius: 2px 2px 0 0;
        border-left: none;
        border-right: none;
    }

    .tooltip-content {
        max-height:50vh; 
        /* // calc(50vh - 100px); */
    }

    .tooltip-meta-debug {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

.summary-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
}

.summary-panel-overlay[x-show="showSummaryPanel"] {
    display: block;
}

.summary-panel {
    position: fixed;
    top: 0;
    right: -600px;
    width: 600px;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 2px solid var(--border-color);
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
    transition: right 0.3s ease-in-out;
    display: none;
    box-sizing: border-box;
}

.summary-panel[x-show="showSummaryPanel"] {
    display: block;
    right: 0;
}

.summary-panel .panel-close {
    position: sticky;
    top: 0;
    left: 0;
    float: left;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 24px;
    padding: 8px 16px;
    cursor: pointer;
    z-index: 1000;
    margin: 16px;
}

.summary-panel .panel-close:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);
}

.summary-panel-content {
    padding: 24px;
    color: var(--text-primary);
    line-height: 1.8;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.summary-panel-content h1 {
    font-family: var(--heading-font);
    color: var(--text-heading);
    font-size: 1.5rem;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.summary-panel-content h2 {
    font-family: var(--heading-font);
    color: var(--text-heading);
    font-size: 1.1rem;
    margin-top: 24px;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.summary-panel-content p {
    font-family: var(--body-font);
    margin-bottom: 12px;
    text-align: justify;
    line-height: 1.65;
}

.summary-panel-content em {
    font-style: italic;
    color: var(--text-secondary);
}

.summary-trigger {
    background: transparent;
    border: none;
    color: var(--text-heading);
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    margin-left: 8px;
    transition: opacity 0.2s;
}

.summary-trigger:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .summary-panel {
        width: 100vw;
        right: -100vw;
        left: auto;
    }
    
    .summary-panel[x-show="showSummaryPanel"] {
        right: 0;
    }
}

/* Back link — Space Mono, accent (blue), underlined */
.back-link {
    display: block;
    text-align: center;
    font-family: var(--mono-font);
    font-size: 0.68rem;
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 100ms linear;
}

.back-link:hover {
    color: var(--text-primary);
}

/* Debug checkbox in settings */
.debug-checkbox {
    margin-right: 8px;
    vertical-align: middle;
}

/* Debug mode label - smaller text to match version display */
.debug-mode-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Debug section in tooltip */
/* User-facing review summary — three quality score pills from the first
 * scored review. Hidden by default; revealed when either the
 * `body.show-review` flag is set (user opted into showing review info via
 * the settings panel) OR when the summary is flagged `.has-borderline`
 * (at least one rendered score fell in the 4..=6 band and deserves
 * attention regardless of the user's show-review preference). Distinct
 * from the reviewer-only `.tooltip-debug` section, which dumps the full
 * review history and is gated behind `debugMode`. */
.tooltip-review-summary {
    display: none;
    margin-top: 6px;
    margin-bottom: 6px;
}

body.show-review .tooltip-review-summary,
.tooltip-review-summary.has-borderline {
    display: block;
}

.tooltip-review-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.review-score-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 2px;
    font-family: var(--mono-font);
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--bg-tertiary, rgba(128, 128, 128, 0.15));
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* General-user reasoning dropdown — per-dimension commentary from the
 * review stage (Accurate / Insightful / Citation explanations), minus
 * the Action rationale section. Hidden by default; visible when
 * `body.show-review` is set (toggled by the "Show review" checkbox in
 * the settings panel). Reuses the `.tooltip-sources-header` /
 * `-content` classes for layout; the expand/collapse behavior is
 * driven by the `.expanded` class on this container. */
.tooltip-reasoning-dropdown {
    display: none;
    margin-top: 10px;
}

body.show-review .tooltip-reasoning-dropdown {
    display: block;
}

.tooltip-reasoning-dropdown.expanded .tooltip-sources-header .toggle-icon {
    transform: rotate(90deg);
}

.tooltip-reasoning-dropdown.expanded .tooltip-sources-content {
    display: block;
}

.tooltip-reasoning-dropdown .tooltip-sources-content {
    font-size: calc(var(--font-size-base) - 2px);
    color: var(--text-secondary);
    line-height: 1.5;
}

.tooltip-debug {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.tooltip-debug-header {
    font-family: var(--mono-font);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 700;
}

.tooltip-debug-item {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.tooltip-debug-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
    flex-shrink: 0;
}

.tooltip-debug-value {
    color: var(--text-primary);
    word-break: break-word;
}

/* Review action color coding — design system accents */
.tooltip-debug-action-keep {
    color: var(--ds-primary);
    font-weight: 600;
}

.tooltip-debug-action-update {
    color: var(--ds-secondary);
    font-weight: 600;
}

.tooltip-debug-action-delete {
    color: var(--ds-destructive);
    font-weight: 600;
}

/* Clerk Auth Container */
.clerk-auth-container {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1000;
}

.clerk-auth-container #user-button {
    /* UserButton styling handled by Clerk */
}

/* Sign out button in settings panel */
.site-sign-out-btn {
    font-family: var(--heading-font);
    font-weight: 600;
    letter-spacing: -0.02em;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 18px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.78rem;
    width: 100%;
    transition: all 100ms linear;
}

.site-sign-out-btn:hover {
    border-color: var(--text-secondary);
}

#site-auth-actions {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 4px;
}

/* Access gate — shown after preview sections for gated content */
.access-gate {
    max-width: 640px;
    margin: 48px auto;
    padding: 0 16px;
}

.access-gate-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 24px;
    text-align: center;
}

.access-gate-card h3 {
    font-family: var(--heading-font);
    color: var(--text-primary);
    margin: 0 0 12px;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

.access-gate-card p {
    color: var(--text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.access-gate-form {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.access-gate-input {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--body-font);
    font-size: 0.88rem;
    min-width: 240px;
    outline: none;
    transition: all 100ms linear;
}

.access-gate-input:focus {
    border-color: var(--border-hover);
}

.access-gate-input[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
}

.access-gate-button {
    padding: 6px 18px;
    border: none;
    border-radius: 2px;
    background: var(--ds-primary);
    color: var(--bg-primary);
    font-family: var(--heading-font);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 100ms linear;
}

.access-gate-button:hover {
    opacity: 0.85;
}

.access-gate-success,
.access-gate-pending {
    border-color: var(--border-hover);
}

/* Gated sections hidden by default — revealed via JS when user has access */
.gated-section {
    display: none;
}

/* ─── Section Menu (Hamburger Slide-out) ─── */
.section-menu-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 100ms linear;
}

.section-menu-toggle:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);
}

.section-menu-toggle .icon {
    width: 20px;
    height: 20px;
}

.section-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1002;
}

.section-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    z-index: 1003;
    overflow-y: auto;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
}

.section-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    border-bottom: 1px solid var(--border-color);
}

.section-menu-toc-link {
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    text-decoration: none;
    transition: color 100ms linear;
}

.section-menu-toc-link:hover {
    color: var(--ds-accent);
}

.section-menu-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0 6px;
}

.section-menu-close:hover {
    color: var(--text-primary);
}

.section-menu-progress {
    padding: 6px 18px;
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.section-menu-list {
    display: flex;
    flex-direction: column;
}

.section-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    color: var(--text-primary);
    font-family: var(--body-font);
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background 100ms linear;
}

.section-menu-item:hover {
    background: var(--hover-overlay);
}

.section-menu-item.current {
    background: var(--active-highlight);
    font-weight: 600;
}

.section-menu-read-toggle {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    transition: all 100ms linear;
}

.section-menu-read-toggle:hover {
    border-color: var(--ds-primary);
    color: var(--ds-primary);
}

.section-menu-item.read .section-menu-read-toggle {
    border-color: var(--ds-primary);
    color: var(--ds-primary);
    background: rgba(120, 140, 93, 0.15);
}

.section-menu-link {
    flex: 1;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 6px 0;
}

.section-menu-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-menu-position {
    font-family: var(--mono-font);
    font-size: 0.62rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Paragraph wrapping ─── */
.para-wrap {
    margin-bottom: 0.5em;
}

/* ─── Selection comment button (Medium-style) ─── */
.selection-comment-btn {
    position: absolute;
    z-index: 1000;
    transform: translateX(-50%);
    -webkit-touch-callout: none;
}

.selection-comment-action {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-primary);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 100ms linear;
}

.selection-comment-action:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);
}

/* ─── Comment modal backdrop ─── */
.comment-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

/* ─── Comment panel (centered modal, 75% of text width) ─── */
.comment-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 75%;
    max-width: 680px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.comment-panel-close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0 6px;
}

.comment-panel-close:hover {
    color: var(--text-primary);
}

.comment-panel-quote,
.comment-panel-note-quote {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 15px;
    color: var(--text-primary);
    opacity: 0.7;
    border-left: 2px solid var(--ds-accent);
    padding: 6px 12px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.comment-panel-note-quote {
    font-size: 13px;
    margin-bottom: 6px;
}

.comment-panel-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.comment-panel-item:last-child {
    border-bottom: none;
}

.comment-panel-text {
    font-family: var(--body-font);
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 6px;
}

.comment-panel-actions {
    display: flex;
    gap: 12px;
}

.comment-panel-edit,
.comment-panel-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--mono-font);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.comment-panel-edit:hover {
    color: var(--ds-accent);
}

.comment-panel-delete:hover {
    color: var(--ds-destructive);
}

/* Stacked: textarea full width, save button below */
.comment-panel-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
}

.comment-panel-textarea {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: var(--body-font);
    padding: 12px;
    font-size: 16px;
    resize: none;
    overflow: hidden;
    border-radius: 2px;
    box-sizing: border-box;
    line-height: 1.5;
}

.comment-panel-textarea:focus {
    outline: none;
    border-color: var(--border-hover);
}

.comment-panel-save {
    align-self: flex-end;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-primary);
    font-family: var(--heading-font);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 100ms linear;
}

.comment-panel-save:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);
}

/* ─── Comment indicator (right-side clickable stripe) ─── */
.comment-stripe {
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ds-accent);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    transition: width 100ms linear;
}

.comment-stripe:hover {
    width: 6px;
    background: var(--text-primary);
}

/* Prevent Safari callout menu from conflicting with comment button */
.text-container {
    -webkit-touch-callout: none;
}

.text-container .annotation {
    -webkit-touch-callout: default;
}

/* Tablet: larger selection comment button */
@media (min-width: 768px) and (max-width: 1024px) {
    .selection-comment-action {
        font-size: 0.85rem;
        padding: 10px 18px;
    }

    .comment-panel {
        width: 80%;
    }
}

/* ─── Bottom action bar (bookmark FAB) ─── */
/* Default: bottom-right (matches controls default top position) */
.reading-fab-bar {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 1002;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* When controls are at bottom, FAB goes to top-right (mirrors hamburger at top-left) */
body:has(.controls.bottom-position) .reading-fab-bar {
    bottom: auto;
    top: 12px;
    right: 12px;
}

.bookmark-fab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-secondary);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 100ms linear;
}

.bookmark-fab:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.bookmark-fab.active {
    border-color: var(--ds-secondary);
    color: var(--ds-secondary);
}

/* ─── TOC Read Status ─── */
.section-card-check {
    position: absolute;
    top: 6px;
    right: 6px;
    color: var(--ds-primary);
    font-size: 18px;
    font-weight: bold;
    z-index: 1;
    pointer-events: none;
}

.section-card-progress {
    position: absolute;
    top: 0px;
    right: 0px;
    font-family: var(--mono-font);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ds-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--ds-secondary);
    border-radius: 2px;
    padding: 2px 6px;
}

/* ─── Bookmark Go-To (absolute, beside title) ─── */
.bookmark-goto {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.bookmark-goto-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--ds-secondary);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 100ms linear;
    white-space: nowrap;
}

.bookmark-goto-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

/* ─── Toast Notifications ─── */
.gigan-toast {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(18px);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    font-family: var(--body-font);
    padding: 6px 18px;
    font-size: 13px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 100ms linear, transform 100ms linear;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gigan-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .section-menu-toggle {
        top: 6px;
        left: 6px;
    }

    .bookmark-goto {
        position: static;
        transform: none;
        text-align: center;
        margin-top: 6px;
    }

    /* Comment stripe needs more room on mobile */
    .comment-stripe {
        right: -4px;
    }

    .comment-panel {
        width: 92vw;
        left: 4vw;
        transform: translate(0, -50%);
    }

    /* iOS auto-zoom prevention */
    .comment-panel-textarea {
        font-size: 16px;
    }
}

/* -----------------------------------------------------------------
   Intro page — standalone HTML rendered from markdown (via comrak).
   No annotation controls; content width + typography mirror the
   chapter-page reading experience. Selectors live under .intro-page
   on <body> so annotated chapter pages are not affected.
   ----------------------------------------------------------------- */
body.intro-page .intro-content {
    font-family: var(--body-font);
    color: var(--text-primary);
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0 4rem 0;
}

body.intro-page .intro-content h1,
body.intro-page .intro-content h2,
body.intro-page .intro-content h3,
body.intro-page .intro-content h4,
body.intro-page .intro-content h5,
body.intro-page .intro-content h6 {
    font-family: var(--heading-font);
    color: var(--text-heading, var(--text-primary));
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 0.6em;
}

/* Tighter top margins per level — h1 stays roomy, h2/h3 breathe less */
body.intro-page .intro-content h1 { font-size: 2rem; font-weight: 700; margin-top: 1.2em; }
body.intro-page .intro-content h2 { font-size: 1.55rem; font-weight: 600; margin-top: 1em; }
body.intro-page .intro-content h3 { font-size: 1.25rem; font-weight: 600; margin-top: 0.9em; }
body.intro-page .intro-content h4 { font-size: 1.08rem; font-weight: 600; margin-top: 0.9em; }
body.intro-page .intro-content h5,
body.intro-page .intro-content h6 { margin-top: 0.9em; }

/* Hide the ↩ back-reference link comrak appends to each footnote body
   (class `footnote-backref`). Readers scroll back themselves; the arrow
   adds visual noise to the References list. */
body.intro-page .intro-content .footnote-backref {
    display: none;
}

body.intro-page .intro-content p {
    margin: 0 0 1.1em 0;
}

body.intro-page .intro-content a {
    color: var(--ds-primary, #788c5d);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
body.intro-page .intro-content a:hover {
    opacity: 0.8;
}

body.intro-page .intro-content ul,
body.intro-page .intro-content ol {
    padding-left: 1.4em;
    margin: 0 0 1.1em 0;
}
body.intro-page .intro-content li {
    margin: 0.25em 0;
}
body.intro-page .intro-content li > p { margin: 0.25em 0; }

/* Dedicated blockquote text color — deliberately lighter than
   --text-secondary, which rendered noticeably dark in the light theme.
   Defaults to the dark-theme shade; the light-theme override sits under
   body.theme-light further down. */
body.intro-page .intro-content blockquote {
    border-left: 3px solid var(--border-color, #2e2e2b);
    margin: 1.2em 0;
    padding: 0.2em 1em;
    color: #b5b1a4;
    font-style: italic;
}

body.intro-page.theme-light .intro-content blockquote {
    color: #9a968a;
}

body.intro-page .intro-content code {
    font-family: var(--mono-font, 'Space Mono', monospace);
    font-size: 0.88em;
    background: var(--bg-tertiary, rgba(128,128,128,0.12));
    padding: 0.08em 0.35em;
    border-radius: 2px;
}

body.intro-page .intro-content pre {
    background: var(--bg-tertiary, rgba(128,128,128,0.12));
    border: 1px solid var(--border-color, #2e2e2b);
    border-radius: 2px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 1.2em 0;
}
body.intro-page .intro-content pre code {
    background: transparent;
    padding: 0;
}

body.intro-page .intro-content hr {
    border: 0;
    border-top: 1px solid var(--border-color, #2e2e2b);
    margin: 2em 0;
}

/* GFM table extension (comrak `table: true`) */
body.intro-page .intro-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.2em 0;
    font-size: 0.95em;
}
body.intro-page .intro-content th,
body.intro-page .intro-content td {
    border: 1px solid var(--border-color, #2e2e2b);
    padding: 8px 10px;
    text-align: left;
}
body.intro-page .intro-content th {
    background: var(--bg-tertiary, rgba(128,128,128,0.12));
    font-family: var(--heading-font);
    font-weight: 600;
}

body.intro-page .intro-content img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    margin: 1em 0;
}

/* Task-list checkboxes rendered by comrak's GFM task-list extension */
body.intro-page .intro-content input[type="checkbox"] {
    margin-right: 0.4em;
    vertical-align: middle;
}