/*
 * Glint themes, the layout/type/ornament axis, orthogonal to the colour scheme.
 * Colours come only from color scheme tokens (--bg-color, --text-color, --link-color, …)
 * so every theme renders under all 18 color schemes, light or dark. This file sets fonts,
 * shape, rule weight, and per-theme ornament keyed off the root [data-theme] attribute.
 * Loaded after layout.css; selectors carry [data-theme] so they win over the legacy
 * chrome (gradient headings, Inter/Outfit families) without !important.
 */

/* ---- Theme tokens ------------------------------------------------------- */
:root[data-theme="reader"] {
    --theme-ui: 'IBM Plex Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --theme-display: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --theme-body: var(--theme-display);
    --theme-radius: 12px;
    --theme-radius-sm: 8px;
    --theme-rule: 1px;
}

:root[data-theme="almanac"] {
    --theme-ui: 'Newsreader Variable', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --theme-display: 'Newsreader Variable', 'Iowan Old Style', Georgia, serif;
    --theme-body: var(--theme-display);
    --theme-radius: 0px;
    --theme-radius-sm: 0px;
    --theme-rule: 1.5px;
}

/* Accent: only default.css defines --link-color; every color scheme defines --blue, so fall
 * back to it. Keeps the theme accent color-scheme-driven across all 18 color schemes. */
[data-theme] { --theme-accent: var(--link-color, var(--blue)); }

/* ---- Shared chrome (both themes) --------------------------------------- */
[data-theme] .sidebar { font-family: var(--theme-ui); width: 280px; min-width: 280px; }

[data-theme] .content-wrapper {
    font-family: var(--theme-body);
    max-width: 46rem;
}

[data-theme] .content-wrapper a { color: var(--theme-accent); }

/* Neutralize the legacy gradient/centered H1 and green sans headings. */
[data-theme] .content-wrapper h1,
[data-theme] .content-wrapper h2,
[data-theme] .content-wrapper h3,
[data-theme] .content-wrapper h4,
[data-theme] .content-wrapper h5,
[data-theme] .content-wrapper h6 {
    font-family: var(--theme-display);
    color: var(--text-color);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-align: left;
    letter-spacing: -0.015em;
    font-weight: 600;
}

/* First # is the document title: larger and centered, not a section heading. */
[data-theme] .content-wrapper h1 {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    text-align: center;
    margin: 0.2rem auto 1.4rem;
    letter-spacing: -0.02em;
}

/* Frontmatter header (#67): left-align to match the theme's left-aligned prose. */
[data-theme] .article-header { text-align: left; margin-bottom: 1.5rem; }
[data-theme] .article-header .article-meta,
[data-theme] .article-header .article-tags { justify-content: flex-start; }
[data-theme] .article-header .article-description { text-align: left; margin-left: 0; margin-right: 0; }
[data-theme] .content-wrapper h2 {
    font-size: 1.35rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--theme-rule) solid var(--border-color);
}

/* ---- Sidebar (rebuilt to match the mock) ------------------------------ */
[data-theme] .sidebar { display: flex; flex-direction: column; }
[data-theme] .sidebar svg { width: 1em; height: 1em; display: block; flex-shrink: 0; }

/* Brand / masthead */
[data-theme] .glint-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1.1rem 1.1rem 0.8rem;
}
[data-theme] .glint-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--theme-radius-sm);
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 0.8rem;
}
[data-theme] .glint-wordmark { font-family: var(--theme-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
/* Brand mark and project name are buttons (nav to landing / project home): strip button chrome. */
[data-theme] .glint-brand-home { display: flex; align-items: center; gap: 0.55rem; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
[data-theme] .glint-brand-project { display: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
[data-theme] .glint-brand-home:hover .glint-wordmark { text-decoration: underline; }
[data-theme] .glint-brand-project:hover { text-decoration: underline; }

/* Top controls */
[data-theme] .glint-sidebar-top { display: flex; flex-direction: column; gap: 0.55rem; padding: 0 0.9rem 0.6rem; }
[data-theme] .glint-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.65rem;
    background: var(--bg-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    color: var(--aqua, var(--theme-accent));
}
[data-theme] .glint-switcher select {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.2rem;
    background: transparent;
    border: none;
    color: var(--text-color);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
    text-overflow: ellipsis;
}
[data-theme] .glint-switcher select:focus-visible { outline: none; }
[data-theme] .glint-switcher::after {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-dim);
}
[data-theme] .glint-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.65rem;
    background: var(--bg-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    color: var(--text-dim);
}
[data-theme] .glint-search input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    color: var(--text-color);
    font: inherit;
    font-size: 0.85rem;
}
[data-theme] .glint-search input:focus-visible { outline: none; }
[data-theme] .glint-search kbd {
    font: inherit;
    font-size: 0.65rem;
    color: var(--text-dim);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}
[data-theme] .glint-search-results { display: flex; flex-direction: column; }
[data-theme] .glint-search-results a { padding: 0.3rem 0.4rem; color: var(--text-color); border-radius: var(--theme-radius-sm); font-size: 0.85rem; overflow-wrap: anywhere; }
[data-theme] .glint-search-results a:hover { background: var(--bg-highlight); }

/* File tree */
[data-theme] .glint-tree { flex: 1; overflow-y: auto; padding: 0.2rem 0.6rem 0.8rem; font-size: 0.85rem; }
[data-theme] .glint-tree ul { list-style: none; margin: 0; padding-left: 0.85rem; }
[data-theme] .glint-tree > ul { padding-left: 0; }
[data-theme] .glint-tree li { margin: 1px 0; }
[data-theme] .glint-tree-file,
[data-theme] .glint-tree-folder > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.5rem;
    border-radius: var(--theme-radius-sm);
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
[data-theme] .glint-tree-folder > summary::-webkit-details-marker { display: none; }
[data-theme] .glint-tree-folder > summary { color: var(--text-dim); }
[data-theme] .glint-tree-file svg,
[data-theme] .glint-tree-folder svg:not(.glint-caret) { color: var(--text-dim); }
[data-theme] .glint-tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme] .glint-caret { transition: transform 0.15s ease; color: var(--text-dim); }
[data-theme] .glint-tree-folder[open] > summary .glint-caret { transform: rotate(90deg); }
[data-theme] .glint-tree-file:hover,
[data-theme] .glint-tree-folder > summary:hover { background: var(--bg-highlight); }
[data-theme] .glint-leader { display: none; }

/* Active page */
[data-theme] .glint-tree-file[aria-current="page"] {
    font-weight: 600;
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    box-shadow: inset 0 0 0 var(--theme-rule) color-mix(in srgb, var(--theme-accent) 45%, transparent);
}
[data-theme] .glint-tree-file[aria-current="page"] svg { color: var(--theme-accent); }

/* "On this page" ToC dock (#56): sits between the tree and the footer, capped and
   independently scrollable so a long file tree still gets room. Theme ornament below. */
[data-theme] .glint-toc-dock { flex: 0 1 auto; max-height: 44vh; overflow-y: auto; margin: 0 0.6rem; padding: 0.3rem 0; border-top: var(--theme-rule) solid var(--border-color); font-size: 0.8rem; }
[data-theme] .glint-toc-dock > summary { cursor: pointer; list-style: none; padding: 0.2rem 0.25rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
[data-theme] .glint-toc-dock > summary::-webkit-details-marker { display: none; }
[data-theme] .glint-toc-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }
[data-theme] .glint-toc-item a { display: flex; gap: 0.5rem; align-items: center; text-decoration: none; color: var(--text-dim); padding: 0.15rem 0.25rem; line-height: 1.3; }
[data-theme] .glint-toc-item.toc-h3 a { padding-left: 1rem; }
[data-theme] .glint-toc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme] .glint-toc-item a:hover { color: var(--text-color); }
[data-theme] .glint-toc-item a.current { color: var(--theme-accent); }
[data-theme] .glint-toc-item a.done { color: var(--border-color); }
/* Reader: a progress rail — spine down the list with a marker dot per heading. */
[data-theme="reader"] .glint-toc-list { border-left: 2px solid var(--border-color); margin-left: 0.45rem; }
[data-theme="reader"] .glint-toc-item a::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-left: -0.75rem; border-radius: 50%; background: var(--border-color); }
[data-theme="reader"] .glint-toc-item a.current::before { background: var(--theme-accent); }
[data-theme="reader"] .glint-toc-item a.done::before { background: color-mix(in srgb, var(--theme-accent) 40%, var(--border-color)); }
/* Almanac: a numbered field-guide index (1, 2, 2.1, ...) in tabular monospace. */
[data-theme="almanac"] .glint-toc-dock > summary { font-variant: all-small-caps; letter-spacing: 0.1em; text-transform: none; color: var(--theme-accent); border-bottom: 1.5px solid var(--border-color); padding-bottom: 0.3rem; }
[data-theme="almanac"] .glint-toc-list { counter-reset: toc-h2; }
[data-theme="almanac"] .glint-toc-item:not(.toc-h3) { counter-increment: toc-h2; counter-reset: toc-h3; }
[data-theme="almanac"] .glint-toc-item.toc-h3 { counter-increment: toc-h3; }
[data-theme="almanac"] .glint-toc-item a { border-bottom: 1px solid var(--border-color); }
[data-theme="almanac"] .glint-toc-item a::before { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--text-dim); min-width: 2.2ch; }
[data-theme="almanac"] .glint-toc-item:not(.toc-h3) a::before { content: counter(toc-h2); }
[data-theme="almanac"] .glint-toc-item.toc-h3 a::before { content: counter(toc-h2) "." counter(toc-h3); }
[data-theme="almanac"] .glint-toc-label { font-variant: all-small-caps; letter-spacing: 0.03em; }

/* Footer */
[data-theme] .glint-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
    border-top: var(--theme-rule) solid var(--border-color);
}
[data-theme] .glint-primary {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.5rem;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    border-radius: var(--theme-radius-sm);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
[data-theme] .glint-primary:hover { background: var(--theme-accent); }
[data-theme] .glint-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    background: var(--bg-color);
    color: var(--text-dim);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    cursor: pointer;
}
[data-theme] .glint-icon-btn:hover { color: var(--text-color); background: var(--bg-highlight); }

/* Landing + settings shells, top-aligned (never floating mid-page). */
[data-theme] .glint-landing .content-wrapper { align-items: start; max-width: 60rem; }
[data-theme] .glint-landing-shell { width: 100%; padding: 2.5rem 0 3rem; }
[data-theme] .glint-landing-shell h1 {
    font-family: var(--theme-display);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    letter-spacing: -0.03em;
    line-height: 0.95;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-color);
    text-align: left;
    margin: 0;
}
[data-theme] .glint-eyebrow { margin: 0 0 0.35rem; color: var(--theme-accent); font-family: var(--theme-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* Page masthead: title block + a ghost action (Settings / Close). */
[data-theme] .glint-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
[data-theme] .glint-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-family: var(--theme-ui);
    font-size: 0.85rem;
    color: var(--text-color);
    background: var(--bg-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}
[data-theme] .glint-ghost-btn svg { width: 1em; height: 1em; }
[data-theme] .glint-ghost-btn:hover { background: var(--bg-highlight); border-color: var(--theme-accent); color: var(--theme-accent); }

/* Source-type icon (Drive / GitHub / Local). */
[data-theme] .glint-source-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); flex-shrink: 0; }
[data-theme] .glint-source-icon svg { width: 1.1em; height: 1.1em; }

/* Two-column landing: projects | open a source. */
[data-theme] .glint-landing-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
[data-theme] .glint-col-label {
    font-family: var(--theme-display);
    font-size: 0.8rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--theme-rule) solid var(--border-color);
}
[data-theme] .glint-landing-page .glint-project-row { padding: 0; }
[data-theme] .glint-project-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.4rem; color: var(--text-color); text-decoration: none; border-radius: var(--theme-radius-sm); }
[data-theme] .glint-project-open:hover { background: var(--bg-highlight); }
[data-theme] .glint-landing-page .glint-source-grid { grid-template-columns: 1fr; gap: 0.7rem; }

[data-theme] .glint-source-card {
    min-height: 0;
    gap: 0.35rem;
    border-radius: var(--theme-radius);
    border-width: var(--theme-rule);
    font-family: var(--theme-ui);
}
[data-theme] .glint-source-card .glint-source-icon { color: var(--theme-accent); }
[data-theme] .glint-source-card .glint-source-icon svg { width: 1.4em; height: 1.4em; }
[data-theme] .glint-source-card strong { color: var(--theme-accent); font-family: var(--theme-display); }
[data-theme] .glint-source-card input,
[data-theme] .glint-source-card button { border-radius: var(--theme-radius-sm); }

/* ---- Landing: single URL open box (#67) -------------------------------- */
[data-theme] .glint-url-open { display: flex; flex-direction: column; gap: 0.6rem; }
[data-theme] .glint-url-open label { font-size: 0.85rem; color: var(--text-dim); font-family: var(--theme-ui); }
[data-theme] .glint-url-open input {
    padding: 0.6rem 0.7rem; font-size: 0.95rem; font-family: var(--theme-ui);
    background: var(--bg-color); color: var(--text-color);
    border: var(--theme-rule) solid var(--border-color); border-radius: var(--theme-radius-sm);
}
[data-theme] .glint-url-open input:focus { outline: 2px solid var(--theme-accent); outline-offset: 1px; }
[data-theme] .glint-url-error { color: var(--red, #d33); font-size: 0.85rem; margin: 0; }
[data-theme] .glint-url-error:empty { display: none; }
[data-theme] .glint-url-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
[data-theme] .glint-url-actions button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.9rem; font-family: var(--theme-ui); font-size: 0.9rem; cursor: pointer;
    border-radius: var(--theme-radius-sm); border: var(--theme-rule) solid var(--border-color);
    background: var(--bg-highlight); color: var(--text-color);
}
[data-theme] .glint-url-actions button[type="submit"] { background: var(--theme-accent); color: var(--bg-color); border-color: var(--theme-accent); }
[data-theme] .glint-url-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme] .glint-url-pick svg { width: 1.1em; height: 1.1em; }

@media (max-width: 720px) {
    [data-theme] .glint-landing-cols { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---- Settings ---------------------------------------------------------- */
[data-theme] .glint-setting-group { margin: 2rem 0; }
[data-theme] .glint-setting-group h2 {
    font-family: var(--theme-display);
    font-size: 0.9rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    margin: 0 0 0.75rem;
}
[data-theme] .glint-setting-note { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 0.9rem; }
[data-theme] .glint-error-msg { color: var(--red); font-family: var(--theme-ui); margin: 0; }
[data-theme] .glint-field { display: block; margin-top: 1rem; }
[data-theme] .glint-field select {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 0.6rem;
    min-width: 16rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    font: inherit;
}
[data-theme] .glint-toggle { display: flex; align-items: center; gap: 0.6rem; }

[data-theme] .glint-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
[data-theme] .glint-theme-card {
    text-align: left;
    padding: 0.9rem 1rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius);
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
[data-theme] .glint-theme-card strong { font-family: var(--theme-display); font-size: 1.05rem; }
[data-theme] .glint-theme-card span { color: var(--text-dim); font-size: 0.85rem; }
[data-theme] .glint-theme-card.selected { border-color: var(--theme-accent); border-width: 2px; box-shadow: inset 0 0 0 1px var(--theme-accent); }

[data-theme] .glint-project-list { list-style: none; margin: 0; padding: 0; border-top: var(--theme-rule) solid var(--border-color); }
[data-theme] .glint-project-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.2rem;
    border-bottom: var(--theme-rule) solid var(--border-color);
}
[data-theme] .glint-drag-handle { cursor: grab; color: var(--text-dim); user-select: none; line-height: 1; font-size: 1.1rem; flex-shrink: 0; }
[data-theme] .glint-project-row.glint-dragging { opacity: 0.5; }
[data-theme] .glint-project-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
[data-theme] .glint-project-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme] .glint-project-source { color: var(--text-dim); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme] .glint-project-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
[data-theme] .glint-project-actions button {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
    background: transparent;
    color: var(--text-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    cursor: pointer;
}
/* button.glint-danger (0,2,1) ties .glint-project-actions button and wins on order. */
[data-theme] button.glint-danger { color: var(--red); border-color: var(--red); }
[data-theme] button.glint-danger[data-reset-projects] { margin-top: 1rem; background: transparent; padding: 0.5rem 0.9rem; border: var(--theme-rule) solid var(--red); border-radius: var(--theme-radius-sm); cursor: pointer; font: inherit; }

/* ---- Modal (auth + rename) -------------------------------------------- */
.glint-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 5000;
}
[data-theme] .glint-modal {
    width: min(30rem, 100%);
    background: var(--bg-color);
    color: var(--text-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    padding: 1.5rem;
    font-family: var(--theme-ui);
}
[data-theme] .glint-modal-head h2 { font-family: var(--theme-display); font-size: 1.25rem; margin: 0 0 0.25rem; color: var(--text-color); }
[data-theme] .glint-modal-head p { color: var(--text-dim); font-size: 0.85rem; margin: 0; }
[data-theme] .glint-modal form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
[data-theme] .glint-modal label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
[data-theme] .glint-modal input {
    padding: 0.65rem 0.7rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    font: inherit;
}
[data-theme] .glint-modal-primary {
    padding: 0.75rem;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    border-radius: var(--theme-radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
[data-theme] .glint-modal-or { display: flex; align-items: center; gap: 0.75rem; color: var(--text-dim); font-size: 0.8rem; }
[data-theme] .glint-modal-or::before,
[data-theme] .glint-modal-or::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
[data-theme] .glint-modal-help { font-size: 0.75rem; color: var(--text-dim); font-weight: 400; margin: 0; }
[data-theme] .glint-modal-error { color: var(--red); font-size: 0.8rem; font-weight: 600; margin: 0; }
[data-theme] .glint-modal-actions { display: flex; flex-direction: row; justify-content: flex-end; gap: 0.6rem; }
[data-theme] .glint-modal-actions button { padding: 0.55rem 1.1rem; border-radius: var(--theme-radius-sm); font: inherit; cursor: pointer; }
[data-theme] .glint-modal-cancel { background: transparent; color: var(--text-dim); border: var(--theme-rule) solid var(--border-color); }
[data-theme] .glint-modal-confirm { background: var(--theme-accent); color: var(--bg-color); border: none; font-weight: 600; }

/* ---- Comment compose + discussions ------------------------------------ */
[data-theme] .glint-compose {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--bg-dim);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
}
[data-theme] .glint-compose textarea {
    width: 100%;
    resize: vertical;
    padding: 0.55rem 0.6rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    font: inherit;
    font-family: var(--theme-ui);
}
[data-theme] .glint-compose-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
[data-theme] .glint-compose-actions button { padding: 0.4rem 0.9rem; border-radius: var(--theme-radius-sm); font: inherit; cursor: pointer; border: var(--theme-rule) solid var(--border-color); }
[data-theme] .glint-compose-actions button[type="submit"] { background: var(--text-color); color: var(--bg-color); border-color: var(--text-color); font-weight: 600; }
[data-theme] .glint-compose-cancel { background: transparent; color: var(--text-dim); }

[data-theme] .glint-discussion-controls { margin-top: 3rem; padding-top: 1rem; border-top: var(--theme-rule) solid var(--border-color); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
[data-theme] .glint-discussion-controls h2 { font-family: var(--theme-display); font-size: 1.1rem; margin: 0 auto 0 0; border: none; color: var(--text-color); }
[data-theme] .glint-discussion-controls button { padding: 0.4rem 0.9rem; font: inherit; font-size: 0.85rem; cursor: pointer; background: transparent; color: var(--text-color); border: var(--theme-rule) solid var(--border-color); border-radius: var(--theme-radius-sm); }
[data-theme] .glint-discussion-controls button:hover { background: var(--bg-highlight); }
[data-theme] .glint-toggle-resolved { color: var(--text-dim); }
[data-theme] .glint-discussion {
    margin: 0.75rem 0;
    padding: 0.9rem 1rem;
    background: var(--bg-dim);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius);
    font-family: var(--theme-ui);
    font-size: 0.9rem;
}
/* Resolved threads are hidden until "Show resolved" toggles .glint-show-resolved on <html> (#55). */
[data-theme] .glint-discussion.resolved { display: none; }
[data-theme].glint-show-resolved .glint-discussion.resolved { display: block; opacity: 0.6; }
[data-theme] .glint-discussion-meta { color: var(--text-dim); font-size: 0.75rem; margin: 0 0 0.35rem; }
[data-theme] .glint-discussion-body { color: var(--text-color); }
[data-theme] .glint-discussion-body > :first-child { margin-top: 0; }
[data-theme] .glint-discussion-body > :last-child { margin-bottom: 0; }
[data-theme] .glint-discussion-reply { margin-top: 0.6rem; padding-left: 0.75rem; border-left: 2px solid var(--border-color); }
[data-theme] .glint-discussion-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
[data-theme] .glint-discussion-actions button { padding: 0.3rem 0.75rem; font: inherit; font-size: 0.8rem; cursor: pointer; background: transparent; color: var(--text-color); border: var(--theme-rule) solid var(--border-color); border-radius: var(--theme-radius-sm); }

/* ---- Almanac ornament -------------------------------------------------- */
[data-theme="almanac"] .sidebar { border-right-width: 1.5px; }

/* Masthead: small-caps eyebrow + project title, heavy rule (mock ab05). */
[data-theme="almanac"] .glint-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    margin: 0 0.9rem 0.5rem;
    padding: 1.1rem 0 0.5rem;
    border-bottom: 1.5px solid var(--text-color);
}
[data-theme="almanac"] .glint-brand-mark { display: none; }
[data-theme="almanac"] .glint-wordmark {
    font-size: 0.72rem;
    font-variant: all-small-caps;
    letter-spacing: 0.16em;
    color: var(--theme-accent);
}
[data-theme="almanac"] .glint-brand-project {
    display: block;
    font-family: var(--theme-display);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Flat, ruled controls instead of pills. */
[data-theme="almanac"] .glint-switcher,
[data-theme="almanac"] .glint-search {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0 0.1rem;
}
[data-theme="almanac"] .glint-search kbd { display: none; }

/* Index: small-caps titles, dotted leaders, roman-numeral folios, no icons. */
[data-theme="almanac"] .glint-tree { counter-reset: folio; }
[data-theme="almanac"] .glint-tree-file { counter-increment: folio; }
[data-theme="almanac"] .glint-tree-file svg { display: none; }
[data-theme="almanac"] .glint-tree-label { flex: 0 1 auto; font-variant: all-small-caps; letter-spacing: 0.04em; font-size: 1.05em; }
[data-theme="almanac"] .glint-tree-folder > summary .glint-tree-label { font-variant: all-small-caps; letter-spacing: 0.1em; color: var(--text-dim); }
[data-theme="almanac"] .glint-leader {
    display: block;
    flex: 1 1 auto;
    min-width: 0.75rem;
    border-bottom: 1px dotted var(--border-color);
    transform: translateY(-0.25em);
}
[data-theme="almanac"] .glint-tree-file::after {
    content: counter(folio, lower-roman);
    color: var(--text-dim);
    font-variant: all-small-caps;
    font-size: 0.85em;
}
[data-theme="almanac"] .glint-tree-file[aria-current="page"] { background: transparent; box-shadow: none; color: var(--text-color); }
[data-theme="almanac"] .glint-tree-file[aria-current="page"] .glint-leader { border-bottom-style: solid; border-color: var(--theme-accent); }
[data-theme="almanac"] .glint-tree-file[aria-current="page"]::after { color: var(--theme-accent); }

/* Footer: typographic buttons, heavy top rule. */
[data-theme="almanac"] .glint-sidebar-footer { border-top: 1.5px solid var(--text-color); }
[data-theme="almanac"] .glint-primary {
    background: transparent;
    color: var(--text-color);
    border-radius: 0;
    justify-content: flex-start;
    font-variant: all-small-caps;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
}
[data-theme="almanac"] .glint-primary:hover { background: transparent; color: var(--theme-accent); }
[data-theme="almanac"] .glint-icon-btn { background: transparent; border: none; }

[data-theme="almanac"] .glint-setting-group h2,
[data-theme="almanac"] .glint-col-label,
[data-theme="almanac"] .glint-discussion-controls h2 { font-variant: all-small-caps; letter-spacing: 0.1em; text-transform: none; color: var(--theme-accent); }
[data-theme="almanac"] .glint-eyebrow { font-variant: all-small-caps; text-transform: none; letter-spacing: 0.14em; }

/* Almanac landing / settings, printed masthead, ruled columns, roman folios (mock p.3). */
[data-theme="almanac"] .glint-landing-shell h1 { font-size: clamp(2.8rem, 7vw, 4rem); }
[data-theme="almanac"] .glint-landing-page .glint-landing-shell h1 { font-size: clamp(3rem, 8vw, 4.6rem); }
[data-theme="almanac"] .glint-page-head {
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--text-color);
    box-shadow: 0 3px 0 -1px var(--text-color);
    align-items: flex-end;
}
[data-theme="almanac"] .glint-ghost-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    font-variant: all-small-caps;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    padding: 0.2rem 0;
}
[data-theme="almanac"] .glint-ghost-btn:hover { color: var(--theme-accent); background: transparent; }
[data-theme="almanac"] .glint-col-label { border-bottom-color: var(--text-color); border-bottom-width: 1px; }
[data-theme="almanac"] .glint-source-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0.85rem 0.2rem;
    min-height: 0;
}
[data-theme="almanac"] .glint-source-card:not(.disabled):hover { background: transparent; }
[data-theme="almanac"] .glint-source-card strong { font-variant: all-small-caps; letter-spacing: 0.05em; }

/* Roman-numeral folios on project lists, via CSS counters (no markup). */
[data-theme="almanac"] .glint-project-list { counter-reset: vol; border-top: 1px solid var(--text-color); }
[data-theme="almanac"] .glint-project-row { counter-increment: vol; align-items: baseline; }
[data-theme="almanac"] .glint-project-row::before {
    content: counter(vol, lower-roman);
    flex-shrink: 0;
    width: 1.5rem;
    font-style: italic;
    color: var(--theme-accent);
    font-size: 1.05em;
}
[data-theme="almanac"] .glint-project-name { font-variant: normal; font-weight: 600; }
[data-theme="almanac"] .glint-project-source { font-variant: all-small-caps; letter-spacing: 0.06em; }
/* Drop cap on the opening paragraph. */
[data-theme="almanac"] .content-wrapper .glint-section:first-of-type > p:first-of-type::first-letter {
    float: left;
    font-family: var(--theme-display);
    font-size: 3.1em;
    line-height: 0.7;
    font-weight: 600;
    padding: 0.05em 0.1em 0 0;
    color: var(--theme-accent);
}
/* Marginalia-style discussions: hairline, accented left rule, italic replies. */
[data-theme="almanac"] .glint-discussion { background: transparent; border: none; border-left: 3px solid var(--theme-accent); border-radius: 0; padding-left: 1rem; }
[data-theme="almanac"] .glint-discussion-meta { font-variant: all-small-caps; letter-spacing: 0.06em; }
[data-theme="almanac"] .glint-discussion-reply { font-style: italic; border-left-style: dotted; }

/* ---- Configurable content bar + comment rail -------------------------- */
/* Content top bar, off by default; shown only when the setting is on and a page
 * is open (the JS toggles the [hidden] attribute). */
.glint-content-bar { display: none; }
[data-contentbar="on"] .glint-content-bar:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 0.6rem 1.5rem;
    background: var(--bg-color);
    border-bottom: var(--theme-rule) solid var(--border-color);
    font-family: var(--theme-ui);
}
[data-theme] .glint-breadcrumb { display: flex; align-items: center; gap: 0.4rem; min-width: 0; font-size: 0.8rem; color: var(--text-dim); overflow: hidden; }
[data-theme] .glint-breadcrumb > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme] .glint-crumb-sep { color: var(--text-dim); opacity: 0.6; }
[data-theme] .glint-crumb-current { color: var(--text-color); font-weight: 600; }
[data-theme] .glint-content-bar-actions { margin-left: auto; display: flex; gap: 0.4rem; flex-shrink: 0; }
[data-theme] .glint-bar-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    font: inherit;
    font-size: 0.78rem;
    background: transparent;
    color: var(--text-dim);
    border: var(--theme-rule) solid var(--border-color);
    border-radius: var(--theme-radius-sm);
    cursor: pointer;
}
[data-theme] .glint-bar-btn svg { width: 0.9em; height: 0.9em; }
[data-theme] .glint-bar-btn:hover { color: var(--text-color); background: var(--bg-highlight); }
/* When the bar carries the page actions, drop the duplicates from the sidebar footer. */
[data-contentbar="on"] .glint-sidebar-footer [data-export-page],
[data-contentbar="on"] .glint-sidebar-footer [data-delete-page] { display: none; }
[data-theme="almanac"] .glint-content-bar { border-bottom-width: 1.5px; }
[data-theme="almanac"] .glint-breadcrumb { font-variant: all-small-caps; letter-spacing: 0.06em; }

/* Comment rail, a column beside the page when the setting is "rail". The rail
 * element carries a [hidden] attribute the JS clears when there are comments. */
/* body:not(.glint-landing): the rail layout is for open documents only — Settings
   and Landing render in the same .glint-content-body and must not get the two-column
   shift (#8). */
[data-comments="rail"] body:not(.glint-landing) .glint-content-body {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    max-width: 72rem;
    margin: 0 auto;
}
[data-comments="rail"] body:not(.glint-landing) .glint-content-body .content-wrapper { margin: 0; max-width: none; flex: 1; min-width: 0; }
[data-theme] .glint-comment-rail {
    flex: 0 0 20rem;
    position: sticky;
    top: 1.5rem;
    padding: 1.5rem 0 2rem;
    font-family: var(--theme-ui);
}
[data-theme] .glint-rail-toggle {
    display: block; margin: 0 0 0.75rem auto; padding: 0.1rem 0.5rem;
    background: none; border: var(--theme-rule) solid var(--border-color); border-radius: 0.25rem;
    color: var(--text-dim); cursor: pointer; font: inherit; font-size: 0.8rem;
}
[data-theme] .glint-comment-rail.collapsed { flex-basis: auto; }
[data-theme] .glint-comment-rail.collapsed > :not(.glint-rail-toggle) { display: none; }
[data-theme] .glint-comment-rail.collapsed .glint-rail-toggle { margin-bottom: 0; writing-mode: vertical-rl; }
[data-theme] .glint-comment-rail .glint-discussion-controls { margin-top: 0; }
[data-theme] .glint-comment-rail .glint-discussion { margin: 0.6rem 0; }
[data-theme] .glint-discussion-anchor { margin: 0 0 0.35rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
[data-theme="almanac"] .glint-discussion-anchor { font-variant: all-small-caps; text-transform: none; letter-spacing: 0.1em; }

@media (max-width: 900px) {
    [data-comments="rail"] .glint-content-body { flex-direction: column; }
    [data-theme] .glint-comment-rail { position: static; flex-basis: auto; width: 100%; border-top: var(--theme-rule) solid var(--border-color); }
}