/* Self-hosted (not Google Fonts CDN) so the "Handwriting" style preset works offline and, more
   importantly, so the web editor and the server-side PDF export (DocumentPdfRenderer, which
   embeds the same two files) render with the EXACT same font — previously the PDF substituted
   an unrelated OS font ("Segoe Print") since it has no access to Google's font CDN. */
@font-face {
    font-family: 'Caveat';
    src: url('/fonts/Caveat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Caveat';
    src: url('/fonts/Caveat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Brand tokens matching CalcAuthor-Website's Tailwind theme (src/styles/global.css there) —
   a deep engineering-navy toolbar/chrome scale with a muted copper/amber accent for primary
   actions and highlights. --toolbar-muted-fg/--toolbar-input-bg back the right-panel's dense
   settings fields (labels, hints, text inputs) once that panel is also navy, not white. These
   never reach the printed report itself: every style preset defines its own --preset-accent/
   --preset-*-font, so the document's own typography and heading colors are untouched. */
:root {
    --toolbar-bg: #122c47;
    --toolbar-fg: #eef3f8;
    --toolbar-muted-fg: #8fa8c4;
    --toolbar-input-bg: #17385a;
    --accent: #c98a3b;
    --accent-light: #e0a458;
    --accent-dark: #ab7029;
    --accent-ink: #0d2036;
    --canvas-bg: #eef1f5;
    --page-bg: #ffffff;
    --border: #d0d5dc;
    --error: #c62828;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #1f2430;
    background: var(--canvas-bg);
}

#app, .app-shell {
    height: 100%;
}

/* MainLayout only (the document editor uses EditorLayout — its own full-viewport .editor-shell
   is never a descendant of .app-shell). Deliberately mirrors .editor-shell/.editor-body's own
   structure: a full-width top bar first, then a row below it holding the sidebar + scrollable
   main content — NOT a sidebar running the full viewport height beside the bar. That's what
   makes the brand land at the same position as the document editor's own toolbar brand. */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.app-main-column {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

/* Same height/padding as .top-toolbar (the document editor's own top bar) so the two feel like
   one consistent chrome element across the whole app, not two different bars. */
.main-layout-account-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 64px;
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    flex-shrink: 0;
}

.main-layout-account-right {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* Same width as .side-toolbar (the document editor's own left palette) so the two line up. */
.left-nav {
    width: 260px;
    flex-shrink: 0;
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    display: flex;
    flex-direction: column;
    padding: 1rem 0.75rem;
    overflow-y: auto;
}

.left-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem 1.25rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--toolbar-fg);
}

.left-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 7px;
    color: var(--toolbar-muted-fg);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.left-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--toolbar-fg);
}

.left-nav-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--toolbar-fg);
}

.left-nav-section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--toolbar-muted-fg);
    padding: 0.9rem 0.7rem 0.3rem;
}

.left-nav-spacer {
    flex: 1;
}

/* ---------- Top toolbar ----------
   A single navy row — brand/nav, undo/redo, zoom/page size, autosave/print/settings/save — per
   the approved "Option D" mockup, rather than a dark nav row stacked over a separate view-bar. */

.top-toolbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    padding: 0 1.5rem;
    height: 64px;
    flex-shrink: 0;
}

.toolbar-brand {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.toolbar-brand-link {
    text-decoration: none;
    color: var(--toolbar-fg);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.toolbar-home-link {
    color: #adc5dd;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.toolbar-home-link:hover {
    color: var(--toolbar-fg);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}

.toolbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--toolbar-fg);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    cursor: pointer;
}

.toolbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.toolbar-icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.toolbar-select-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.toolbar-select {
    padding: 0.4rem 0.55rem;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: var(--toolbar-input-bg);
    color: var(--toolbar-fg);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.autosave-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #adc5dd;
    cursor: pointer;
    user-select: none;
}

/* A small badge inline in the toolbar (next to Autosave), not a full-width strip under it — the
   red-on-pink coloring stays the same, just sized to its own text instead of the page width. */
.unsaved-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: #fdecea;
    color: var(--error);
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.toolbar-group-end {
    margin-left: auto;
}

.toolbar-ghost-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--toolbar-fg);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.toolbar-ghost-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.side-toolbar button {
    background: rgba(255, 255, 255, 0.08);
    color: var(--toolbar-fg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-save {
    background: var(--accent) !important;
    border-color: var(--accent-dark) !important;
    color: var(--accent-ink) !important;
    border-radius: 7px;
    padding: 0.5rem 1.1rem;
    font-weight: 700;
}

.btn-save:hover {
    background: var(--accent-light) !important;
}

/* ---------- Editor shell layout ---------- */

.editor-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.editor-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.side-toolbar {
    width: 260px;
    flex-shrink: 0;
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    overflow-y: auto;
    padding: 0.75rem;
}

.side-toolbar-section {
    margin-bottom: 1rem;
}

.side-toolbar-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.side-toolbar-placeholder {
    font-size: 0.85rem;
    opacity: 0.5;
    font-style: italic;
}

/* ---------- Right panel (properties/details — Word/Figma Format-pane convention) ----------
   Option D: navy like the left palette, not the light inspector this used to be — "insert
   tools" (left) and "selected-item settings" (right) now read as one continuous navy toolbar
   frame around the light canvas, rather than a dark-rail/light-inspector pairing. Reuses
   .settings-* rules from DocumentSettingsPanel (originally styled for its old white modal, then
   a light inspector); both now carry their own light-on-navy colors below instead of inheriting
   dark-on-white ones. */
.side-toolbar-right {
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.side-toolbar-right button {
    background: rgba(255, 255, 255, 0.06);
    color: var(--toolbar-fg);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.side-toolbar-right button:hover {
    background: rgba(255, 255, 255, 0.14);
}

.side-toolbar-right button:disabled {
    opacity: 0.4;
    cursor: default;
}

.right-panel-content .side-toolbar-title {
    color: var(--accent-light);
    opacity: 1;
    font-size: 0.66rem;
    font-weight: 700;
}

.properties-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.properties-button-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.format-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.format-toolbar button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.op-example {
    font-family: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--toolbar-muted-fg);
}

.op-hint {
    font-size: 0.72rem;
    color: var(--toolbar-muted-fg);
    opacity: 0.85;
    font-style: italic;
    margin-bottom: 0.4rem;
}

/* ---------- Left palette (tabbed Blocks/Operators/Functions/Greek insert buttons) ---------- */

.left-palette {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Underline tabs, not pills — matching Option D: muted label text that turns white with a 2px
   copper underline when active, all sitting on one full-width divider under the row, rather than
   the solid accent-colored pill the tabs used before. */
.palette-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 1rem;
}

/* button.palette-tab (element + class), not just .palette-tab: needs to match
   ".side-toolbar button"'s specificity (one class + one type selector) to actually win — a
   bare-class rule here would lose that tie-break regardless of appearing later in the file. */
button.palette-tab {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 0 0.625rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #5c7ba0;
}

button.palette-tab:hover {
    background: none;
    color: var(--toolbar-fg);
}

button.palette-tab.active {
    color: #fff;
    border-bottom-color: var(--accent);
    font-weight: 700;
}

.palette-content {
    overflow-y: auto;
}

.palette-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.palette-subheading {
    margin-top: 1.375rem;
    padding: 0 0.625rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #5c7ba0;
    opacity: 1;
}

.palette-hint {
    font-size: 0.72rem;
    opacity: 0.6;
    font-style: italic;
    margin: 0;
}

/* minmax(0, 1fr), not plain 1fr — a bare 1fr track still won't shrink below its content's
   min-content width (the Operators tab's "( )" button, Functions' "round" label), so the grid
   quietly grew past the palette's own width and needed a horizontal scrollbar instead of wrapping
   those buttons onto more rows within the available width. minmax(0, ...) removes that floor. */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
}

.palette-grid-greek {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.palette-grid-wide {
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

.palette-button {
    aspect-ratio: 1 / 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1rem;
    overflow: hidden;
}

.palette-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.palette-button-wide {
    aspect-ratio: auto;
    padding: 0.35rem 0.2rem;
    font-size: 0.8rem;
}

/* A label too long to read at one grid column's width (e.g. "plottable", nearly double any
   other function name here) — spans 2 of the grid's 4 columns instead of clipping, which
   naturally wraps it onto its own row without disturbing the compact layout around it. */
.palette-button-span2 {
    grid-column: span 2;
}

/* Transparent by default (not a permanent translucent pill) — only tinted on hover, matching
   Option D's .pbtn treatment; each button's own icon carries the color via the chip below.
   button.palette-block-button (element + class) to out-specificity ".side-toolbar button". */
button.palette-block-button {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-align: left;
    padding: 0.5625rem 0.625rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #d6e2ee;
}

button.palette-block-button:hover {
    background: rgba(255, 255, 255, 0.06);
}

.palette-block-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(224, 164, 88, 0.14);
    color: var(--accent-light);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* overflow: auto (both axes, not just overflow-y) plus NOT using flex justify-content:center —
   centering a flex item that overflows its container only lets you scroll to ONE side in every
   major browser (a well-known flexbox limitation), which is exactly what happened at high zoom:
   the page kept growing to the right while the left half became unreachable. Centering is done
   at the .printed-page level instead (margin: 0 auto, below), which overflows and scrolls
   symmetrically on both sides since it's normal block layout, not flex alignment. */
.page-canvas-wrap {
    flex: 1;
    overflow: auto;
    padding: 2rem 1rem;
}

/* Plain block layout, not flex: a flex column's own auto-height can under-report an
   overflowing flex item's true rendered size (observed when a live-edited paragraph grows
   past its page's min-height while you're actively typing/re-focusing it), which let the
   NEXT page render into the same space instead of below it. A block container's auto-height
   always exactly equals the sum of its in-flow children, with no such ambiguity. */
.pages-stack {
    display: block;
}

.pages-stack > .printed-page {
    margin: 0 auto 1.5rem auto;
}

.pages-stack > .printed-page:last-child {
    margin-bottom: 0;
}

.loading-hint {
    color: #566;
    margin-top: 2rem;
}

/* ---------- Printed page (Letter / A4) — engineering calc-pad look (Phase 2) ----------
   Each page is its own bordered white sheet; content is grouped into whole pages by the
   editor's pagination engine (pagination-interop.js + DocumentEditor's ComputePageBreaks), so
   the white background and border always cover exactly one page's worth of content — typing
   past a page boundary starts a fresh bordered sheet automatically, it never just bleeds into
   the grey canvas behind it. */

.printed-page {
    background: var(--page-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    padding: 0.5in;
    position: relative;
}

.printed-page.size-letter {
    width: 8.5in;
    min-height: 11in;
    --paper-width: 8.5in;
}

.printed-page.size-a4 {
    width: 210mm;
    --paper-width: 210mm;
    min-height: 297mm;
}

/* ---------- Style presets: fonts + accent (Phase 2) ----------
   No page border in any preset — pages are set apart purely by the drop-shadow + gap against
   the grey canvas behind them (see .pages-stack), letterhead-style rather than a ruled sheet. */

.page-style-default {
    --preset-heading-font: 'Segoe UI', sans-serif;
    --preset-body-font: 'Segoe UI', sans-serif;
    --preset-accent: #3F72AF;
}

.page-style-classic {
    --preset-heading-font: Georgia, serif;
    --preset-body-font: 'Times New Roman', serif;
    --preset-accent: #7A2E2E;
}

/* Scoped to .page-body (not the whole .printed-page) so the margin rule only runs alongside
   the working content — it must not cut through the header/title-block above it. */
.page-body {
    position: relative;
}

.page-style-classic .page-body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.45in;
    width: 1px;
    background: #c79493;
    pointer-events: none;
}

/* Matches "Template (Modern Preset Style).docx" in CalcAuthor Supporting Files: Cambria body/
   heading text throughout (its Normal and Heading 1-3 styles all inherit Cambria; only its
   Heading 4 switches to a sans-serif, which this app's 3-level heading model doesn't reach),
   headings colored navy (its accent1, darkened — "2F5496"), and Heading 1 set in small-caps-
   style ALL CAPS (see .page-style-modern .heading-level-1 below). */
.page-style-modern {
    --preset-heading-font: Cambria, Georgia, serif;
    --preset-body-font: Cambria, Georgia, serif;
    --preset-accent: #2F5496;
}

.page-style-modern .heading-level-1 .heading-input {
    text-transform: uppercase;
}

.page-style-technical {
    --preset-heading-font: Cambria, serif;
    --preset-body-font: Verdana, sans-serif;
    --preset-accent: #455A64;
}

.page-style-technical .page-header-field {
    font-family: 'Consolas', 'Courier New', monospace;
}

.page-style-handwriting {
    --preset-heading-font: 'Caveat', cursive;
    --preset-body-font: 'Caveat', cursive;
    --preset-accent: #2A52BE;
    font-size: 1.1em;
}

/* Handwriting preset: make the working calculation/paragraph text look hand-written too, not
   just headings. .block-calculation and its rendered math already pick up --preset-body-font
   generically (same value as --preset-heading-font here, so no override needed for those) —
   this only needs to cover the LIVE typing surfaces, which default to a monospace/inherited
   font for every other preset (a code-editor-like affordance) and must be forced to Caveat here
   instead so typing itself looks hand-written too. */
.page-style-handwriting .calc-line-input,
.page-style-handwriting .ql-editor,
.page-style-handwriting .document-title-display {
    font-family: var(--preset-heading-font);
}

.printed-page {
    font-family: var(--preset-body-font, inherit);
}

.document-title-display,
.heading-input,
.heading-number,
.cover-page-kicker,
.cover-page-title,
.page-header-kicker,
.page-header-title {
    font-family: var(--preset-heading-font, inherit);
}

/* .heading-number is deliberately NOT in this list — it sits right next to the heading text
   itself (not a separate kicker/label element like the others here), so it takes the heading's
   own plain text color instead of the accent, matching font/size/color all together. */
.cover-page-kicker,
.page-header-kicker,
.toc-level-1 .toc-number,
.page-header-pagenum {
    color: var(--preset-accent, var(--accent));
}

.document-title-display {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0.2rem 0;
}

.empty-doc-hint {
    color: #8a8f99;
    font-style: italic;
}

/* ---------- Page header (letterhead) — logo column + Calculation Report/Title/Subtitle/Doc-info column ----------
   Two-column layout (logo left, text right) matching the reference Word template's letterhead.
   All four text-column lines are right-aligned and sized so their combined height sits within
   the logo's own height budget (25mm) — Title reads largest, the "Calculation Report" kicker
   and Subtitle are the second size, and the Doc No/Rev/Date/Page-number line is smallest. A
   rule below the whole header separates the letterhead from the calculation body, replacing
   the page-edge border removed elsewhere. */

.page-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--preset-accent, #333);
}

.page-header-logo-col {
    flex: 0 0 auto;
}

.page-header-logo {
    display: block;
    max-height: 25mm;
    max-width: 160px;
    object-fit: contain;
}

.page-header-text-col {
    flex: 1;
    min-width: 0;
    text-align: right;
}

.page-header-kicker {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    line-height: 1.25;
}

.page-header-title-row {
    margin-top: 0.1rem;
}

.page-header-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.page-header-subtitle-row {
    margin-top: 0.1rem;
}

.page-header-subtitle {
    font-style: italic;
    font-size: 0.8rem;
    line-height: 1.25;
}

.page-header-meta-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.9rem;
    font-size: 0.7rem;
    color: #556;
    margin-top: 0.15rem;
    flex-wrap: wrap;
}

.page-header-pagenum {
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Live in-progress page break ----------
   Shown only while actively typing past a page boundary inside a paragraph block (see
   quill-interop.js's PageBreakBlot / pagination-interop.js's syncLiveBreaks) — reuses
   .page-header so it looks identical to a real page's header, and inherits --preset-accent/etc.
   from the ancestor .printed-page.page-style-* it's nested in. Always stripped out of the saved
   HTML before it's persisted, so it never appears outside this live, in-progress view. */

.live-page-break {
    margin: 0;
    user-select: none;
    pointer-events: none;
}

.live-page-break-close {
    height: 0;
    margin-top: 0.5in;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.live-page-break-gap {
    height: 1.5rem;
    margin: 0 -0.5in;
    background: var(--canvas-bg);
}

.live-page-break-open {
    padding-top: 0.5in;
}

.live-page-break-open .page-header {
    margin-top: 0;
}

/* ---------- Cover page ----------
   Letterhead-style, matching the reference Word template: a right-aligned title block at the
   top, a large flexible gap, then a sign-off table / logo / confidentiality line pinned near
   the bottom — replacing the old "everything vertically centered as one group" layout. No page
   border, matching every other preset/page. */

.cover-printed-page {
    display: flex;
    flex-direction: column;
}

.cover-page-top {
    text-align: right;
}

.cover-page-kicker {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 1rem;
}

.cover-page-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cover-page-subtitle {
    font-size: 1.2rem;
    color: #556;
    margin-bottom: 1.25rem;
}

.cover-page-docinfo {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #556;
}

.cover-page-dateline {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: #556;
}

.cover-page-spacer {
    flex: 1;
    min-height: 1in;
}

.cover-page-signoff {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.cover-page-signoff-col {
    flex: 1;
    min-width: 0;
}

.cover-page-signoff-role {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #556;
    /* Extra room below the role label before the signature line so there's actual blank space
       to sign, not just enough for the printed name/designation/company text. */
    margin-bottom: 3rem;
}

.cover-page-signoff-line {
    font-size: 0.85rem;
    min-height: 1.2em;
    padding-bottom: 0.2rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.cover-page-logo {
    align-self: flex-end;
    max-height: 25mm;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 2.5rem;
}

.cover-page-disclaimer {
    font-size: 0.75rem;
    color: #778;
    text-align: center;
    line-height: 1.5;
}

@media print {
    .printed-page {
        box-shadow: none;
        page-break-after: always;
        break-after: page;
    }

    .pages-stack > .printed-page {
        margin-bottom: 0;
    }
}

/* ---------- Block rows (generic add/reorder chrome) ---------- */

/* Blocks flow as one continuous document — a block-row's own chrome (reorder/delete)
   is an overlay that only appears while that block has focus, and never takes up
   layout space, so rendered blocks of any type look identical until interacted with. */
.block-row {
    position: relative;
    margin: 0.15rem 0;
}

.block-row-controls {
    position: absolute;
    left: -2.1rem;
    top: 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

/* :hover as well as :focus-within — a marker block (TOC/LOF/LOT) has no focusable content of its
   own (it's a read-only generated preview), so focus-within alone would never reveal Move/Delete
   for it at all; hover makes those controls reachable for every block type, marker or not. */
.block-row:hover .block-row-controls,
.block-row:focus-within .block-row-controls {
    opacity: 1;
    pointer-events: auto;
}

.block-row-controls button {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    line-height: 1;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
}

.block-row-controls button:disabled {
    opacity: 0.3;
    cursor: default;
}

.block {
    min-width: 0;
}

.block-unsupported {
    padding: 0.5rem;
    background: #fff3cd;
    border: 1px solid #ffe08a;
    font-size: 0.85rem;
}

/* ---------- Heading block ---------- */

.block-heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.heading-input {
    border: none;
    background: transparent;
    width: 100%;
    font-weight: 700;
    /* No font-family here (it used to say "inherit") — that silently beat the earlier, correct
       ".heading-input { font-family: var(--preset-heading-font, ...) }" rule on any preset whose
       heading font differs from its body font (Classic, Technical), since same-specificity rules
       are decided by source order, not which one "sounds" more specific. Leave it to that rule. */
    color: inherit;
    padding: 0.1rem 0;
}

.heading-input:focus {
    outline: none;
    border-bottom: 1px solid var(--accent);
}

.heading-level-1 .heading-input,
.heading-level-1 .heading-number { font-size: 1.5rem; }
.heading-level-2 .heading-input,
.heading-level-2 .heading-number { font-size: 1.25rem; }
.heading-level-3 .heading-input,
.heading-level-3 .heading-number { font-size: 1.05rem; }

/* ---------- Table block ---------- */

.block-table {
    padding: 0.3rem 0;
}

.editable-table {
    border-collapse: collapse;
}

.editable-table td {
    border: 1px solid var(--border);
    padding: 0;
}

.editable-table.no-borders td {
    border: none;
}

.editable-table input {
    border: none;
    background: transparent;
    padding: 0.3rem 0.5rem;
    font: inherit;
    min-width: 6em;
    width: 100%;
}

.editable-table input:focus {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

/* Inline table chrome is deliberately minimal — a column-controls row (select-handle + remove
   per column, +add at the end) and per-row controls in the trailing cell (select-handle +
   insert + remove) are the only things that stay on the table itself, since add/remove
   row/column is the one thing explicitly asked to live with the table rather than the settings
   pane. Everything else (whole-table alignment/background/font size, and per-row/column/cell
   background/alignment/size once a row/column/cell is selected via its handle or by focusing a
   cell) lives in RightPanel's Table section instead — see TableSelection.cs. Controls fade in on
   focus-within, the same convention already used for block-row-controls elsewhere, so a table
   not currently being worked on stays visually quiet.

   .table-row-controls (the trailing cell in every row, including the column-controls row's own
   "+add column" cell) is a REAL <td> — an extra table column beyond the data — so it must never
   contribute real width to the <table>, or it skews the table's own alignment/centering and (were
   it ever given a background) would bleed the table's background color into UI chrome that isn't
   real table content. Collapsing it to width:0 and floating its content out via position:absolute
   keeps it perfectly row-aligned (it's still the same <tr>) while the table's rendered box stays
   exactly the width of its actual data columns — matching what print/PDF export renders, since
   .no-print removes this column there entirely. */

.table-row-controls {
    border: none !important;
    padding: 0 !important;
    width: 0;
    max-width: 0;
    overflow: visible;
    position: relative;
}

.table-column-controls-row,
.table-row-control {
    opacity: 0;
    transition: opacity 0.1s;
}

.block-table:focus-within .table-column-controls-row,
.block-table:focus-within .table-row-control {
    opacity: 1;
}

.table-row-control,
.table-row-controls > button {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 2;
}

.table-column-controls-row td {
    border: none !important;
    vertical-align: top;
    padding: 0.15rem !important;
    background: #f4f5f7;
}

.table-col-control,
.table-row-control {
    display: flex;
    align-items: center;
    gap: 3px;
}

.table-row-controls button {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 2px;
}

.table-row-controls button:hover {
    color: var(--error);
}

.table-row-controls button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* The row/column select-handle (▤/▥) opens that row/column's formatting fields in the settings
   pane — accent-colored (not the delete-red hover every other control button uses), and
   highlighted solid when it's the row/column RightPanel currently has open. */
.table-select-handle {
    color: var(--accent);
    border-radius: 2px;
}

.table-select-handle.is-active {
    background: var(--accent);
    color: #fff;
}

/* The row's own "insert row below" "+" button stays accent-colored on hover too, distinct from
   the delete-red every other control button uses. */
.table-row-control button[title^="Insert"] {
    color: var(--accent);
}

/* ---------- Paragraph block / Quill ----------
   No visible chrome until focused, matching the calculation block: the toolbar is hidden
   and the container is borderless until the user clicks into the text. */

.block-paragraph {
    /* Vertical spacing only — every other block type (heading/table/image/marker) has no
       horizontal padding of its own either, so all block content stays flush with the page's
       margin. A left/right value here would indent paragraphs relative to everything else. */
    padding: 0.4rem 0;
}

.ql-editor {
    min-height: 1.6em;
    /* !important needed here too, same reason as text-align below: quill.snow.css (loaded AFTER
       app.css — see index.html) sets its own ".ql-editor { padding: 12px 15px; ... }" default,
       which — same selector, same specificity, later in the cascade — silently wins over a plain
       declaration here. Without it, the paragraph's text sits indented from the page margin
       (and from every other block type, none of which route through Quill) regardless of what
       .block-paragraph's own padding is set to. */
    padding: 0.1rem 0 !important;
    font-family: inherit;
    font-size: 1rem;
    /* Justified is the report-body default. !important is safe here despite looking heavy-handed:
       quill.snow.css (loaded AFTER app.css — see index.html) sets its own conflicting text-align
       on .ql-editor's contents, which would otherwise win the tie and silently defeat a plain
       declaration. It does NOT fight the user's own explicit choice: Quill's ql-align-* classes
       are applied directly to the <p>/etc. elements themselves, and a rule that directly matches
       an element always wins over an ancestor's value — !important or not — so this only ever
       supplies the fallback for lines with no explicit alignment of their own. */
    text-align: justify !important;
}

/* Quill's own quill.snow.css already styles ql-align-center/right/justify — left needed adding
   here since quill-interop.js extends Quill's align whitelist to include it (see that file's own
   comment: without an explicit class, "left" was indistinguishable from "no alignment set", which
   now defaults to justify instead of left via .ql-editor's own rule above). */
.ql-align-left {
    text-align: left;
}

/* Matches Quill's own built-in empty-editor placeholder (.ql-editor.ql-blank::before, from
   quill.snow.css) so the live-editing and static (not-yet-clicked) views look identical.
   !important on the shared selector: index.html loads app.css BEFORE quill.snow.css, so without
   it Quill's own same-selector color rule (loaded later) would win the tie and silently override
   this one. */
.paragraph-placeholder,
.ql-editor.ql-blank::before {
    color: #999 !important;
    font-style: italic !important;
}

/* The static (non-editing) paragraph view wraps each top-level paragraph in a measurable
   .para-fragment marker (so pagination can split a long paragraph block across pages); this
   keeps its own margin at zero so Quill's normal <p>/<h1>/etc. spacing still comes entirely
   from the inner element, matching the live-editing view. */
.para-fragment {
    margin: 0;
}

.ql-container.ql-snow {
    border: none !important;
    font-family: inherit;
}

.block-paragraph:focus-within .ql-container.ql-snow {
    border: 1px solid var(--border) !important;
    border-radius: 4px;
}

/* ---------- Calculation block ---------- */

.block-calculation {
    position: relative;
    border: 1px solid transparent;
    border-radius: 4px;
    /* Vertical spacing only — see .block-paragraph's comment; matches every other block type's
       flush-left alignment with the page margin. */
    padding: 0.4rem 0;
    font-family: var(--preset-body-font, 'Cambria Math', Cambria, 'Times New Roman', serif);
}

.block-calculation.is-editing {
    border-color: var(--border);
    background: #fff;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* Always a REAL OpenType MATH font here (never --preset-body-font) — every native MathML
   construct (msqrt's radical + vinculum, mfrac's bar, msubsup/munderover's limit placement, and
   every stretchy <mo> delimiter like [ ] | ⌊ ⌋ and the ∫ Σ Π symbols themselves) is laid out
   using the resolved font's MATH table constants. A plain body/serif font has no MATH table at
   all, so the browser falls back to crude approximations — a flat, disconnected-looking radical,
   brackets that don't stretch to cover a tall matrix, and cramped spacing around fractions/
   integrals/sums. This one rule is what makes those actually look like real math. */
.block-calculation math {
    font-family: 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', 'Noto Sans Math', serif;
    font-size: 1em;
}

/* Chromium resolves <mi> glyphs from its own internal math font no matter what font-family is
   requested (even !important), so MathTypesetter.cs deliberately avoids <mi> for variable names
   and unit symbols, using <mtext>/<mn>/<mo> instead — but those still need the font-family
   applied directly to THEM, not just inherited from the ancestor <math> above, since Chromium's
   default UA stylesheet also assigns them their own "font-family: math" that plain inheritance
   from a styled ancestor doesn't override. Only mtext/mn (variable/function names, unit symbols,
   plain numbers — pure text content with no dependency on MATH-table metrics) follow the active
   style preset's body font; mo keeps the real math font from the rule above (see its own comment
   below) since its correctness is exactly the thing that font provides. */
.block-calculation math mtext,
.block-calculation math mn {
    font-family: var(--preset-body-font, 'Cambria Math', Cambria, 'Latin Modern Math', 'STIX Two Math', serif);
}

/* Deliberately NOT following --preset-body-font (unlike mtext/mn above) — every stretchy
   delimiter ([ ] | ⌊ ⌋) and math symbol (∫ Σ Π, comparison/logical operators) needs the same real
   MATH font as the <math> root itself for correct glyph shapes and stretch-to-fit sizing; a body
   font substitution here is exactly what produced flat brackets/radicals before this fix. */
.block-calculation math mo {
    font-family: 'Cambria Math', 'STIX Two Math', 'Latin Modern Math', 'Noto Sans Math', serif;
}

/* Restores the conventional italic look for variable names that <mi>'s built-in auto-italic
   used to provide, now that variables are plain (upright-by-default) <mtext>. Unit symbols
   (.calc-unit-sym) stay upright, matching engineering notation. */
.block-calculation math mtext.calc-var {
    font-style: italic;
}

.block-calculation math mtext.calc-unit-sym {
    font-style: normal;
}

/* The pin toggle floats over the block so it never affects layout/spacing, and only
   appears while the block is focused (or already pinned). */
/* Pinning is now toggled from the right properties panel; this is just the visual cue that a
   block stays in the panel — a small accent-colored left edge, so it's noticeable without
   needing to select the block to check. */
.block-calculation.is-pinned {
    border-left: 2px solid var(--accent);
}

/* Lines flow as continuous text, like a paragraph — no per-line boxes. */
.calc-line {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.1rem 0;
}

.calc-line-input {
    flex: 1;
    font: inherit;
    padding: 0.1rem 0;
    border: none;
    background: transparent;
    border-bottom: 1px solid transparent;
}

.calc-line-input:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

.calc-line-input.has-error {
    border-bottom: 1px dotted var(--error);
}

.calc-line-live {
    min-width: 8em;
    color: #2c6e2f;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0.85;
}

.calc-line-error {
    color: var(--error);
}

.calc-line-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.3rem;
    opacity: 0;
    transition: opacity 0.1s;
}

.calc-line:focus-within .calc-line-remove {
    opacity: 1;
}

.calc-line-remove:hover {
    color: var(--error);
}

.calc-add-line {
    background: none;
    border: none;
    color: #99a;
    font-size: 0.8rem;
    padding: 0.2rem 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s;
}

.block-calculation:focus-within .calc-add-line {
    opacity: 1;
}

.calc-rendered-view {
    cursor: text;
    min-height: 1.6em;
    padding: 0.3rem 0.2rem;
}

.calc-rendered-line {
    font-size: 1.05rem;
    padding: 0.5rem 0;
    /* Generous on purpose (not "normal"/1.4) — a fraction, an integral/sum/product with its
       limits, or a derivative's stacked d/dx can be 2-2.5x a plain text line's height, and this
       needs to give that room WITHOUT shrinking font-size, so simple lines just carry a bit of
       extra breathing room in exchange for tall ones never looking cramped against their
       neighbors. */
    line-height: 2.4;
}

.calc-rendered-empty {
    color: #bbb;
}

.calc-plot {
    max-width: 100%;
    margin: 0.3rem 0;
}

.calc-plot svg {
    width: 100%;
    height: auto;
    display: block;
}

.calc-error {
    color: var(--error);
}

.calc-eq {
    margin: 0 0.35em;
    opacity: 0.7;
}

/* User-editable result unit ("click the unit, type lbf*ft", Mathcad-style) */
.calc-result-unit {
    cursor: pointer;
    border-bottom: 1px dashed #99a;
    padding-bottom: 1px;
}

.calc-result-unit:hover {
    border-bottom-color: var(--accent);
    color: var(--accent-dark);
}

.calc-unit-input {
    font: inherit;
    font-size: 0.85em;
    width: 6.5em;
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 0 0.3em;
}

.calc-unit-error {
    color: var(--error);
    margin-left: 0.25em;
    cursor: help;
}

/* Fractions, radicals, superscripts and subscripts in the rendered expression are now real
   MathML (<mfrac>, <msqrt>, <mroot>, <msup>, <msub>) rendered natively by the browser, not
   CSS approximations — Cambria Math (already first in .block-calculation's font stack) is a
   proper OpenType Math font, so glyph metrics/spacing come out correctly. */

/* sup/sub here are the plain-HTML kind used only by CalcResultUnit's unit-editing display. */
sup, sub {
    font-size: 0.7em;
}

/* ---------- Document list page: file explorer (Details view) ---------- */

.explorer-page {
    width: 90%;
    margin: 2.5rem auto 3rem;
    padding: 0 1rem;
}

.explorer-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.explorer-heading {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Fixed min-height (title line + breadcrumb line) so the toolbar's own height — and the
       search/action buttons row beside it — never shifts as the breadcrumb appears/disappears
       going in and out of folders; only its content below the title changes. */
    min-height: 2.45rem;
}

.explorer-toolbar h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--accent-ink);
    line-height: 1.2;
}

.explorer-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.explorer-breadcrumb-item {
    background: none;
    border: none;
    padding: 0.1rem 0.3rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-radius: 5px;
}

.explorer-breadcrumb-item:hover {
    background: #eef1f5;
    color: var(--accent-ink);
}

.explorer-breadcrumb-sep {
    color: #c3c9d1;
    font-size: 0.78rem;
}

.explorer-secondary-btn {
    padding: 0.5rem 0.9rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: #fff;
    color: #374151;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}

.explorer-secondary-btn:hover {
    background: #f4f6f9;
}

/* Full-viewport "someone else is editing this" screen shown by DocumentEditor.razor in place of
   the editor itself when the document's lock is held by another user. */
.lock-conflict-page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f9;
}

.lock-conflict-card {
    max-width: 440px;
    padding: 2.5rem 2.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(20, 30, 50, 0.08);
    text-align: center;
}

.lock-conflict-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.lock-conflict-card h1 {
    font-size: 1.25rem;
    margin: 0 0 0.6rem;
    color: #1f2430;
}

.lock-conflict-card p {
    color: #56606f;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.lock-conflict-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

/* Canonical <select> style for every page outside the document editor (which has its own
   .toolbar-select/etc. — left untouched). Applied wherever a plain, unstyled <select> would
   otherwise fall back to inconsistent browser-default chrome. */
.form-select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    background: #fff;
    color: #1f2430;
    cursor: pointer;
}

.form-select:hover {
    border-color: var(--accent);
}

.explorer-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.explorer-search {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    width: 220px;
}

.explorer-status {
    color: #6b7280;
    padding: 2.5rem 0;
    text-align: center;
}

.recycle-bin-disclaimer {
    background: #fff7e6;
    border: 1px solid #f0d999;
    color: #7a5c00;
    padding: 0.65rem 0.9rem;
    border-radius: 7px;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.recycle-bin-urgent {
    color: var(--error) !important;
    font-weight: 600;
}

.recycle-bin-purge-btn {
    color: var(--error);
    margin-left: 0.4rem;
}

/* ---------- Dashboard ---------- */

.dashboard-continue-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: linear-gradient(135deg, var(--toolbar-bg), var(--accent-ink));
    color: #fff;
    border-radius: 10px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.25rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(13, 32, 54, 0.18);
}

.dashboard-continue-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

.dashboard-continue-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.dashboard-continue-meta {
    font-size: 0.8rem;
    opacity: 0.85;
}

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

.dashboard-tile {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 4px 14px rgba(13, 32, 54, 0.05);
}

.dashboard-tile:hover {
    border-color: var(--accent);
}

.dashboard-tile-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent-ink);
}

.dashboard-tile-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.dashboard-subheading {
    font-size: 0.9rem;
    margin: 1rem 0 0.4rem;
}

.dashboard-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dashboard-activity-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.88rem;
}

.dashboard-activity-list li:last-child {
    border-bottom: none;
}

.dashboard-activity-list a {
    color: #1f2430;
    text-decoration: none;
}

.dashboard-activity-list a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.dashboard-today {
    font-size: 0.82rem;
    color: #6b7280;
}

.dashboard-empty-state {
    text-align: center;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 3rem 2rem;
    margin-top: 1rem;
}

.dashboard-empty-icon {
    font-size: 2.5rem;
}

.dashboard-empty-state h2 {
    margin: 0.5rem 0 0.25rem;
}

.dashboard-empty-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
    align-items: start;
}

.dashboard-column {
    margin-top: 0 !important;
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.dashboard-section-header h2 {
    margin: 0;
}

.dashboard-view-all {
    font-size: 0.8rem;
    color: var(--accent-dark);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-view-all:hover {
    text-decoration: underline;
}

.dashboard-role-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #eef1f5;
    margin: 0.6rem 0 0.5rem;
}

.dashboard-role-segment {
    height: 100%;
}

.dashboard-role-admin { background: var(--accent); }
.dashboard-role-manager { background: #4c8bf5; }
.dashboard-role-author { background: #b7c0cc; }
.dashboard-role-dev { background: #1f2430; }

.dashboard-role-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.dashboard-role-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.35rem;
}

.dashboard-copy-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
}

.dashboard-copy-btn:hover {
    background: #f4f6f9;
}

.explorer-table-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(13, 32, 54, 0.06);
    overflow-x: auto;
}

.explorer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.explorer-table thead th {
    text-align: left;
    padding: 0.65rem 0.9rem;
    background: #f4f6f9;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.explorer-table thead th:hover {
    color: var(--accent-ink);
}

.explorer-col-actions {
    cursor: default !important;
    width: 2.5rem;
}

.explorer-col-checkbox {
    cursor: default !important;
    width: 2.2rem;
    text-align: center;
}

.explorer-col-checkbox input {
    margin: 0;
    cursor: pointer;
}

.explorer-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #374151;
}

.explorer-bulk-bar button {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    color: #1f2430;
}

.explorer-bulk-bar button:hover {
    background: #f4f6f9;
}

.explorer-bulk-delete {
    color: var(--error) !important;
    border-color: rgba(198, 40, 40, 0.3) !important;
}

.explorer-table tbody tr {
    border-bottom: 1px solid #eef1f5;
}

.explorer-table tbody tr:hover {
    background: #f8fafc;
}

.explorer-table td {
    padding: 0.55rem 0.9rem;
    vertical-align: middle;
}

.explorer-col-name {
    min-width: 240px;
}

.explorer-doc-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1f2430;
    text-decoration: none;
    font-weight: 500;
}

.explorer-doc-link:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.explorer-folder-link {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    text-align: left;
    cursor: pointer;
}

.explorer-doc-icon {
    font-size: 1rem;
}

.explorer-rename-input {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--accent);
    border-radius: 5px;
    font-size: 0.88rem;
}

.explorer-col-date {
    color: #4b5563;
    white-space: nowrap;
}

.explorer-by {
    color: #9aa3af;
}

.explorer-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #eef1f5;
    color: #4b5563;
    white-space: nowrap;
}

.explorer-badge-shared {
    background: rgba(201, 138, 59, 0.15);
    color: var(--accent-dark);
}

.explorer-badge-locked {
    background: rgba(220, 68, 68, 0.12);
    color: #b33a3a;
    margin-left: 0.5rem;
}

.explorer-kebab {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.explorer-kebab:hover {
    background: #eef1f5;
    color: #1f2430;
}

.explorer-menu {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(13, 32, 54, 0.18);
    min-width: 150px;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
}

/* Positioned at the kebab click's viewport coordinates (set inline via style="left/top") rather
   than anchored absolutely to the button — the button lives inside .explorer-table-wrap, whose
   horizontal-scroll clipping (overflow-x: auto forces overflow-y to clip too, per the CSS spec)
   was hiding the dropdown whenever it would extend past that box. Fixed positioning escapes it
   entirely; the -100% X shift + small Y offset opens the menu up-and-left of the click point,
   since kebab buttons sit at the table's right edge and would otherwise overflow the viewport. */
.explorer-menu-floating {
    position: fixed;
    z-index: 1000;
    transform: translate(-100%, 8px);
}

.explorer-menu button {
    background: none;
    border: none;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #1f2430;
    white-space: nowrap;
}

.explorer-menu button:hover {
    background: #f4f6f9;
}

.explorer-menu-danger {
    color: var(--error) !important;
}

/* ---------- Share document overlay ---------- */

.share-overlay-card {
    width: min(460px, 92vw);
}

.share-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-size: 0.88rem;
}

.share-row-name {
    font-weight: 500;
}

.share-row-email {
    color: var(--toolbar-muted-fg);
    font-size: 0.8rem;
    margin-left: auto;
}

.share-overlay-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}

/* ---------- User blockers overlay (Platform dashboard) ---------- */

.blockers-section-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--toolbar-muted-fg);
    margin: 1rem 0 0.4rem;
}

.blockers-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blockers-row-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.blockers-row-title {
    font-weight: 500;
}

.blockers-row-sub {
    color: var(--toolbar-muted-fg);
    font-size: 0.78rem;
}

/* ---------- Folder picker overlay ---------- */

.folder-picker-row {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--toolbar-fg);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
}

.folder-picker-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

.folder-picker-icon {
    margin-right: 0.3rem;
}

/* ---------- Document settings (Phase 2: cover page, header/footer, style preset) ----------
   Formerly a modal (.settings-overlay/.settings-panel); now embedded directly in the right
   panel, so only the section/field rules below are still needed. */

.settings-section {
    margin: 1.1rem 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.settings-section h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--toolbar-fg);
}

.settings-section select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--toolbar-input-bg);
    color: var(--toolbar-fg);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    font-size: 0.78rem;
}

.settings-hint {
    font-size: 0.75rem;
    color: var(--toolbar-muted-fg);
    line-height: 1.6;
    margin: 0 0 0.6rem;
}

.settings-field {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #d6e2ee;
    margin-bottom: 0.375rem;
}

.settings-field input,
.settings-field select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.6rem;
    margin-top: 0.375rem;
    background: var(--toolbar-input-bg);
    color: var(--toolbar-fg);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    font-family: inherit;
}

.settings-field select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-field-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #d6e2ee;
}

/* Small-caps muted label — same treatment as .palette-subheading, so left palette and right
   panel section headings read as one consistent design language. Also doubles as the "Row 3" /
   "Column A" / "Cell (…)" contextual heading (with its trailing Done link), which needed the
   same visual weight since both are section-level headings within the panel. */
.settings-subheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--toolbar-muted-fg);
}

.settings-clear-link {
    background: none;
    border: none;
    color: var(--accent-light);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    padding: 0;
}

.settings-field-inline button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--toolbar-fg);
    cursor: pointer;
}

.settings-field-group-label {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--toolbar-muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Segmented button row (Option D's "Alignment" control) — used wherever a field is really a
   small, mutually-exclusive choice (2-4 options), instead of a <select> for it. */
.settings-align-group {
    display: flex;
    gap: 0.25rem;
}

.settings-align-group button {
    flex: 1;
    text-align: center;
    padding: 0.45rem 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: none;
    color: var(--toolbar-muted-fg);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.settings-align-group button.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* ---------- TOC / List of Figures / List of Tables markers (Phase 2) ---------- */

.block-marker {
    padding: 0.5rem 0;
}

/* Every other block type keeps its Move/Delete controls visible via :focus-within because
   clicking into it focuses a real input/contenteditable — that focus is sticky regardless of
   where the mouse goes afterwards. A marker block (TOC/LOF/LOT) has no such content, so it's
   made focusable directly (tabindex, see TocMarkerBlockEditor.razor etc.) and clicking it now
   behaves the same way: focus sticks until a different block is selected, instead of depending
   on the mouse continuously hovering the block while it travels toward the controls (which sit
   outside the block's own box) — the exact path a hover-only reveal loses partway across. */
.block-marker:focus {
    outline: none;
    box-shadow: inset 2px 0 0 var(--accent);
}

.marker-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.marker-empty {
    color: #8a8f99;
    font-style: italic;
    font-size: 0.9rem;
}

.toc-entry {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.15rem 0;
}

.toc-number {
    min-width: 2.2rem;
    font-weight: 600;
}

.toc-level-2 { padding-left: 1.2rem; }
.toc-level-3 { padding-left: 2.4rem; }

.toc-leader {
    flex: 1;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 0.3rem;
}

.toc-page {
    min-width: 1.6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Image block (Phase 2) ---------- */

.block-image {
    padding: 0.4rem 0;
}

.image-placeholder {
    border: 1px dashed var(--border);
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
    background: #fafbfc;
}

.block-image:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.image-error {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.image-preview {
    display: block;
    margin: 0 auto;
    /* Width is user-controlled as a percentage of the true PAPER width (not just the printable
       column) via --img-width-percent, set inline per-image from ImageBlock.WidthPercent —
       --paper-width comes from the ancestor .printed-page.size-letter/.size-a4. max-width:100%
       is a safety clamp: a percentage that would render wider than the printable column (e.g.
       anything over ~88% on Letter with 0.5in margins) is capped at the column edge instead of
       overflowing past the margin, so 100% reproduces the previous "fill the column" default
       without the input needing its own hard upper bound. height:auto preserves aspect ratio —
       no fixed max-height, since the user now owns that size tradeoff directly via width. */
    width: calc(var(--paper-width, 100%) * var(--img-width-percent, 100) / 100);
    max-width: 100%;
    height: auto;
}

/* Figure captions sit under the picture; table captions sit above the table (see
   ImageBlockEditor's markup order and TableBlockEditor's SliceStart==0 gate) — matching the
   Word convention this report format follows. Both otherwise read as plain paragraph text
   (same font/size/color as the surrounding body copy, via inheritance), just italicized to
   read as a caption rather than body content. Figure image+caption are always centered; table
   captions stay left-aligned/full-width (not part of this ask). */
.image-caption-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.4rem;
    text-align: center;
}

.table-caption-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    text-align: center;
}

.image-caption-number,
.table-caption-number {
    font-style: italic;
    white-space: nowrap;
}

.image-caption-text {
    font-style: italic;
}

.table-caption-text {
    font-style: italic;
}

/* ---------- Heading number (Phase 2 auto-numbering) ---------- */

.heading-number {
    font-weight: 700;
    margin-right: 0.5rem;
}

/* ---------- Print (PDF export always renders rendered/typeset state, no chrome) ---------- */

@media print {
    /* Default paper size/margin — overridden dynamically per-document (A4 vs Letter) by a
       <style id="dynamic-print-page-size"> tag injected right before window.print() (see
       pagination-interop.js's printDocument). Without an explicit @page rule at all, the
       browser applies its OWN default print margins on top of .printed-page's already-full
       physical page width, which overflows the sheet and clips text on both edges — margin:0
       here hands page-sizing entirely to .printed-page's own CSS width + 0.5in padding. */
    @page {
        size: letter;
        margin: 0;
    }

    /* .editor-shell is pinned to 100vh and .editor-body/.page-canvas-wrap clip overflow for the
       on-screen single-viewport layout — left in place, printing would cut off (or scale to)
       whatever fit in the browser window's height at print time instead of flowing the full
       document across as many printed pages as it needs. */
    html, body, #app, .editor-shell, .editor-body, .page-canvas-wrap {
        height: auto !important;
        overflow: visible !important;
    }

    .editor-shell, .editor-body {
        display: block !important;
    }

    .no-print, .top-toolbar, .side-toolbar, .block-row-controls, .paragraph-placeholder {
        display: none !important;
    }

    .calc-edit-view {
        display: none !important;
    }

    .page-canvas-wrap {
        padding: 0;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ---------- References overlay — this app's first modal ---------- */

.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 32, 54, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay-card {
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    width: min(560px, 92vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    outline: none;
}

.overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.overlay-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.overlay-close {
    background: none;
    border: none;
    color: var(--toolbar-fg);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.overlay-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.overlay-body {
    overflow-y: auto;
    margin: 0.5rem 0;
    flex: 1;
}

/* ---------- Repeatable settings-list rows (References today; a generic-enough pattern for
   any future "user-managed list of records" to reuse) ---------- */

.settings-list-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-list-textarea {
    flex: 1;
    min-height: 2.6rem;
    resize: vertical;
    padding: 0.45rem 0.6rem;
    background: var(--toolbar-input-bg);
    color: var(--toolbar-fg);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
}

.settings-list-row-controls {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.settings-list-row-controls button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--toolbar-fg);
    border-radius: 4px;
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    cursor: pointer;
    white-space: nowrap;
}

.settings-list-row-controls button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
}

.settings-list-row-controls button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.settings-add-link {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--accent-light);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0;
}

.settings-add-link:hover {
    text-decoration: underline;
}

/* ---------- Inline citation markers ---------- */

/* Palette buttons that fail an insert attempt (nothing focused yet) — a quieter cousin of
   .calc-line-error, since this is a transient hint rather than a persistent validation state. */
.palette-hint-error {
    color: var(--accent-light);
    opacity: 1;
    font-style: normal;
}

/* .cite-marker: rendered both live inside Quill (as a real embed) and in the static paragraph
   view / calc-line note (via CitationText.Resolve*) — kept visually identical in both places so
   switching between editing and reading a paragraph never looks like anything changed. */
.cite-marker {
    color: var(--accent-dark);
    font-weight: 600;
    white-space: nowrap;
}

.printed-page .cite-marker {
    color: var(--preset-accent, var(--accent-dark));
}

.equation-note {
    margin-left: 0.75rem;
    font-size: 0.85em;
    color: #8a8f99;
    font-style: italic;
}

.condition-badge {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.1rem 0.55rem;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    vertical-align: middle;
}

.condition-badge-error {
    font-weight: 400;
    font-style: italic;
    letter-spacing: normal;
}

/* ---------- Auth pages (login/register) ---------- */

.toolbar-user-name {
    font-size: 0.85rem;
    color: var(--toolbar-fg);
}

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

.auth-card {
    width: min(380px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 8px 28px rgba(13, 32, 54, 0.08);
}

/* Same icon + Space Grotesk wordmark as .toolbar-brand-link (Toolbar.razor/MainLayout.razor),
   just recolored for a light card background instead of the dark toolbar. */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.auth-brand-text {
    font-size: 1.4rem;
    color: var(--accent-ink);
}

.auth-subtitle {
    margin: 0 0 1.5rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.auth-field {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #374151;
}

.auth-field input {
    display: block;
    width: 100%;
    max-width: 420px;
    margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}

.auth-field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: #8a8f99;
    line-height: 1.5;
}

.auth-password-wrap {
    position: relative;
}

.auth-password-wrap input {
    padding-right: 3.2rem !important;
}

.auth-password-toggle {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(calc(0.15rem - 50%));
    background: none;
    border: none;
    color: var(--accent-dark);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

.auth-password-toggle:hover {
    text-decoration: underline;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: -0.3rem 0 1rem;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
}

.auth-remember input {
    margin: 0;
}

.auth-remember-hint {
    display: block;
    margin: -0.85rem 0 1rem;
}

.auth-error {
    color: var(--error);
    font-size: 0.85rem;
    margin: -0.4rem 0 1rem;
}

.auth-submit {
    width: 100%;
    text-align: center;
}

.auth-switch {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
}

.auth-link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-dark);
    font-size: inherit;
    cursor: pointer;
}

.auth-link-button:hover:not(:disabled) {
    text-decoration: underline;
}

.auth-link-button:disabled {
    color: #9aa1ac;
    cursor: default;
}

/* ---------- Admin: team management ---------- */

.admin-page {
    width: 90%;
    margin: 2rem auto 3rem;
    padding: 0 1rem;
}

.admin-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}

.admin-section h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.admin-tier-field select {
    margin-top: 0.3rem;
}

.admin-hint {
    font-size: 0.82rem;
    color: #8a8f99;
}

.account-success {
    color: #1a7f3c;
    font-size: 0.85rem;
    margin: -0.4rem 0 1rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

.admin-invite-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.admin-invite-result {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    background: var(--canvas-bg);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
}

/* ---------- Org Structure tree (Manage Team page) ---------- */

.hierarchy-tree, .hierarchy-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.hierarchy-tree ul {
    padding-left: 1.4rem;
    margin-top: 0.35rem;
    border-left: 1px solid var(--border);
}

.hierarchy-tree > li {
    margin-bottom: 0.6rem;
}

.hierarchy-tree li {
    font-size: 0.9rem;
}

.hierarchy-tree summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.15rem 0;
}

.hierarchy-tree summary::marker {
    color: #8a8f99;
}

.hierarchy-manager-label {
    font-weight: 400;
    color: #8a8f99;
    font-size: 0.85rem;
    margin-left: 0.3rem;
}

.hierarchy-leaf {
    padding: 0.2rem 0 0.2rem 0.2rem;
    color: #444;
}

.hierarchy-empty {
    padding: 0.2rem 0 0.2rem 0.2rem;
    color: #8a8f99;
    font-style: italic;
}

/* ---------- Help / Documentation page ---------- */

.docs-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.25rem;
}

.docs-toc {
    position: sticky;
    top: 1.5rem;
    flex: 0 0 220px;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    font-size: 0.83rem;
}

.docs-toc-group {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.7rem;
    color: #8a8f99;
    margin: 0.9rem 0 0.35rem;
}

.docs-toc-group:first-child {
    margin-top: 0;
}

.docs-toc a {
    display: block;
    padding: 0.2rem 0;
    color: #374151;
    text-decoration: none;
    line-height: 1.4;
}

.docs-toc a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

.docs-content {
    flex: 1;
    min-width: 0;
}

.docs-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 1.5rem;
}

.docs-section h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

.docs-section h3 {
    font-size: 1rem;
    margin: 1.4rem 0 0.5rem;
    color: var(--accent-ink);
}

.docs-section h3:first-of-type {
    margin-top: 0.75rem;
}

.docs-section p {
    line-height: 1.55;
    color: #333a45;
}

.docs-lead {
    color: #56606f;
    font-size: 0.92rem;
}

.docs-callout {
    background: #fdf6ec;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    color: #4a3c22;
    margin: 0.75rem 0;
}

.docs-table-wrap {
    overflow-x: auto;
    margin: 0.75rem 0 1.25rem;
}

.docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.docs-table th, .docs-table td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.docs-table th {
    background: #f4f6f9;
    font-weight: 600;
}

.docs-table code {
    white-space: nowrap;
}

.docs-section code, .docs-lead code, .docs-callout code {
    font-family: "Cascadia Code", "Consolas", monospace;
    background: #f4f6f9;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.88em;
    color: #17385a;
}

.docs-example {
    font-family: "Cascadia Code", "Consolas", monospace;
    background: #17385a;
    color: #eef3f8;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0.6rem 0;
    white-space: pre-wrap;
}

.docs-kbd {
    display: inline-block;
    font-family: "Cascadia Code", "Consolas", monospace;
    background: #fff;
    border: 1px solid #b6bcc4;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .docs-layout {
        flex-direction: column;
    }

    .docs-toc {
        position: static;
        width: 100%;
        max-height: none;
    }
}