h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI26My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5My42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjA1NDMgMjYzLjU3NiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgmuguNzMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


.checklist-table :where(table, .mud-table) {
    background: var(--mud-palette-surface);
}

/* Only force white background on non-striped tables */
.checklist-table .mud-table:not(.mud-table-striped) .mud-table-body > tr:not(.nested-row) {
    background-color: #ffffff;
}

.nested-card {
    background: transparent;
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 2px;
}

.answers-table {
    --answers-bg: #f9fafc;
    background: var(--answers-bg);
}

    /* Only force white background on non-striped tables */
    .answers-table .mud-table:not(.mud-table-striped) .mud-table-body > tr:not(.nested-row) {
        background-color: #ffffff;
    }

    .answers-table .mud-table-body > tr:hover td {
        background-color: rgba(var(--mud-palette-primary-rgb, 25,118,210), 0.06);
    }

.conditionals-table {
    --conditionals-bg: #f6faff;
    background: var(--conditionals-bg);
}

    /* Only force white background on non-striped tables */
    .conditionals-table .mud-table:not(.mud-table-striped) .mud-table-body > tr {
        background-color: #ffffff;
    }

        .conditionals-table .mud-table-body > tr:hover td {
            background-color: rgba(var(--mud-palette-secondary-rgb, 156,39,176), 0.06);
        }

/* Apply manual striping only on non-striped tables */
.checklist-table .mud-table:not(.mud-table-striped) tr:nth-child(even) > td,
.answers-table .mud-table:not(.mud-table-striped) tr:nth-child(even) > td,
.conditionals-table .mud-table:not(.mud-table-striped) tr:nth-child(even) > td {
    background-color: rgba(0,0,0,0.015);
}

/* Remove border radius from ManageVersion tables - Comprehensive solution */
.checklist-table *,
.answers-table *,
.conditionals-table * {
    border-radius: 0 !important;
}

/* Specifically target MudBlazor table components */
.checklist-table .mud-table,
.checklist-table .mud-table-container,
.checklist-table .mud-card,
.checklist-table .mud-card-header,
.checklist-table .mud-card-content,
.checklist-table .mud-expansion-panel,
.checklist-table .mud-expansion-panel-content,
.answers-table .mud-table,
.answers-table .mud-table-container,
.answers-table .mud-card,
.answers-table .mud-card-header,
.answers-table .mud-card-content,
.answers-table .mud-expansion-panel,
.answers-table .mud-expansion-panel-content,
.conditionals-table .mud-table,
.conditionals-table .mud-table-container,
.conditionals-table .mud-card,
.conditionals-table .mud-card-header,
.conditionals-table .mud-card-content,
.conditionals-table .mud-expansion-panel,
.conditionals-table .mud-expansion-panel-content {
    border-radius: 0 !important;
}

/* Target nested cards specifically */
.nested-card,
.nested-card .mud-card-header,
.nested-card .mud-card-content {
    border-radius: 0 !important;
}

/* Profile Section Styling */
.profile-section-header {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12);
}

.profile-section-title {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.mud-table {
    padding-top: 0;
    padding-bottom: 0;
}

.mud-table .mud-table-row {
    height: 32px;
}

.mud-table .mud-table-cell {
    padding-top: 4px;
    padding-bottom: 4px;
}

.mud-table .mud-table-head .mud-table-cell {
    white-space: nowrap;
}

/* The button and icon-button re-skin that lived here is now in aeroplan-theme.css, where it
   reads --ap-* tokens. It had the palette re-typed as literals — rgba(31,140,249,…) glows and
   a hardcoded white outlined background — so it would have kept painting the old blue over the
   new palette. */

/* ── Dead rule cleanup ── */
/* .chapter-button was orphaned — removed */


.mud-table .mud-toolbar {
    height: auto;
    padding: 20px 20px 20px 15px; /*pt-2*/
    vertical-align:top;
}

.mud-table-root .mud-table-row .mud-table-cell { /*all tables should have its row contents top aligned*/
    vertical-align: top;
    padding-top: 12px;
}

.mud-table-dense .mud-table-cell {
    padding: 12px 16px 4px 16px !important;
}

.mud-dialog-actions {
    margin-right: 16px; /*mr-4*/
    margin-bottom: 16px; /*mb-4*/
}

/*Nav menu sub items should not have the same margin*/
.mud-collapse-wrapper .mud-nav-item .mud-nav-link-text {
    margin-left: 8px;
}

/* ── Navigation menu ─────────────────────────────────────────────────────────
   Selectors follow the DOM MudBlazor 9 actually emits, which is not what an older
   version of this block assumed:

     a/button.mud-nav-link        — a group HEADER is also a .mud-nav-link (a button),
                                    so there is no separate toggle class; one rule covers both
       span.mud-nav-link-icon     — the glyph; there is no icon *wrapper* element
       div.mud-nav-link-text      — owns the 12px gap after the icon
         p.mud-typography-body2   — the label itself

   Rules targeting .mud-nav-group-toggle, .mud-nav-link-icon-wrapper, .mud-button-label
   or .mud-expand-icon matched nothing and have been removed. */

/* Override MudBlazor's default of colouring nav items with primary */
.mud-navmenu .mud-nav-link,
.mud-navmenu .mud-nav-link .mud-nav-link-text {
    color: var(--mud-palette-drawer-text) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    font-family: var(--ap-font-ui) !important;
}

/* The row. MudBlazor sets display:inline-flex but no alignment, so without align-items the
   icon and label stretch to the row and the glyph rides its top edge — the reason the text
   sat high. A min-height plus centring is what gives every row the same box. */
.mud-navmenu .mud-nav-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    margin: 3px 0;
    border-radius: var(--ap-radius-md);
}

/* The label is a <p> in body2. Pinning its line box here means the nav no longer depends on
   the global body2 line-height, which is why that value carries a do-not-change warning. */
.mud-navmenu .mud-nav-link .mud-nav-link-text,
.mud-navmenu .mud-nav-link .mud-nav-link-text .mud-typography {
    line-height: 20px !important;
}

/* Centre the glyph on the same 20px box as the label, so icon and text share a baseline. */
.mud-navmenu .mud-nav-link .mud-nav-link-icon {
    display: flex;
    align-items: center;
    height: 20px;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    color: var(--mud-palette-drawer-icon) !important;
}

.mud-navmenu .mud-nav-link .mud-nav-link-expand-icon {
    color: var(--mud-palette-drawer-icon) !important;
}

/* Active: a lighter surface pill on the dark rail, not a black tint. A group whose child is
   active gets the same treatment on its header. */
.mud-nav-link.active,
.mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link {
    background-color: var(--ap-sidebar-active-bg) !important;
    color: var(--ap-sidebar-fg-strong) !important;
}

.mud-nav-link.active .mud-nav-link-text,
.mud-nav-link.active .mud-nav-link-text .mud-typography,
.mud-nav-link.active .mud-nav-link-icon,
.mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link .mud-nav-link-text,
.mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link .mud-nav-link-icon {
    color: var(--ap-sidebar-fg-strong) !important;
}

/* Hover: its own much subtler surface. Deliberately not a faded --ap-sidebar-active-bg —
   active is a light slate, so a tint of it would make every hovered row read as the current
   page. */
.mud-navmenu .mud-nav-link:not(.active):hover {
    background-color: var(--ap-sidebar-hover-bg) !important;
    color: var(--ap-sidebar-fg-strong) !important;
}

/* Nav container padding so the active pill floats inside the rail instead of touching it */
.mud-navmenu {
    padding: 4px 10px;
}

/* Compact nav + drawer layout and support box styles (minimal)
   - navmenu as column so support box can be pushed to bottom
   - drawer body holds navmenu and support box; navmenu scrolls when needed
   - single compact support-box style reused for drawer/nav variants */
.mud-navmenu { padding: 4px 8px; display: flex; flex-direction: column; }
.mud-drawer,
.mud-drawer .mud-drawer-body { display:flex; flex-direction:column; height:100%; margin-bottom: 20px; justify-content: flex-end; }
.mud-drawer .mud-drawer-body > .mud-navmenu { flex:1 1 auto; min-height:0; overflow:auto; }

/* The border radius that used to be pinned here now comes from
   AeroplanTheme.LayoutProperties.DefaultBorderRadius. It sat on `body` rather than `:root`
   because MudThemeProvider emits its own :root block inline in the body, later in document
   order, and would otherwise have won. Setting it through the theme removes the contest. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.mud-table .mud-table-cell.action-cell {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

/* Keep every cell vertically centered so taller action icons get equal
   space above and below, aligned with the text cells in the same row. */
.revisions-table .mud-table-cell {
    vertical-align: middle;
}

.mud-table .mud-table-cell.action-cell > * {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 !important;
}

.mud-table tr.selected-revision-row,
.mud-table tr.selected-revision-row:hover,
.mud-table tr.selected-revision-row.mud-table-striped-row {
    background-color: var(--mud-palette-primary-hover, rgba(94, 53, 177, 0.12)) !important;
}

.mud-table tr.selected-revision-row > td {
    font-weight: 600;
}

.mud-table .mud-table-cell.checklist-toggle-cell {
    text-align: right;
}

/* Reusable loading indication that wraps any content (see LoadingOverlay.razor) */
.loading-overlay {
    position: relative;
}

.loading-overlay__content {
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.loading-overlay__content--busy {
    filter: blur(2px) grayscale(0.2);
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
}

.loading-overlay__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mud-default-borderradius, 8px);
    background: color-mix(in srgb, var(--mud-palette-surface, #fff) 55%, transparent);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    z-index: 1;
    animation: loading-overlay-fade-in 0.15s ease;
}

@keyframes loading-overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Initial-load spinner (no content to blur yet); see AeroplanContent.razor */
.loading-overlay__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    animation: loading-overlay-fade-in 0.15s ease;
}

.mud-table .mud-table-cell.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* Make the full layout constrained to the viewport so MudMainContent is the
   scroll container. This means position:sticky top:0 anywhere inside the main
   content area sticks just below the AppBar, never behind it. */
.mud-layout {
    height: 100vh;
    overflow: hidden;
}

.mud-main-content {
    overflow-y: auto;
}

.mud-main-content .mud-container {
    margin-top: 10px;
    margin-bottom: 20px;
}

.mud-appbar {
    border-bottom: 1px solid #ddd;
}
/* Link in jodit should be visible distinct from text */
.jodit-wysiwyg a {
    color: blue !important;
    text-decoration: underline !important;
}

/* ── TipTap Editor ──────────────────────────────────────────────────── */
.tiptap-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 2px 6px;
    background: #fff;
    min-height: 36px;
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tiptap-toolbar-revision-chip {
    font-size: 11.5px;
    font-weight: 600;
    color: #1D4ED8;
    background: #DBEAFE;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    margin: 0 6px;
}

/* Top row: undo/redo + tab buttons */
.tiptap-toolbar-header {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e0e0e0;
    background: #f7f7f8;
    border-radius: 6px 6px 0 0;
}

.tiptap-toolbar-always-group {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    gap: 0;
    flex-shrink: 0;
}

.tiptap-toolbar-header-sep {
    width: 1px;
    background: #ddd;
    margin: 6px 0;
    flex-shrink: 0;
}

.tiptap-tab-headers {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 4px;
    flex: 1;
}

.tiptap-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    white-space: nowrap;
    user-select: none;
}

.tiptap-tab:hover {
    color: #1976d2;
    background: rgba(25, 118, 210, 0.06);
}

.tiptap-tab--active {
    color: #1976d2;
    border-bottom-color: #1976d2;
    background: #fff;
    font-weight: 600;
}

.tiptap-tab-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Content row */
.tiptap-toolbar-inner {
    padding: 4px 6px;
    min-height: 40px;
    gap: 2px;
}

.tiptap-toolbar-sep {
    width: 1px;
    height: 22px;
    background: #ccc;
    margin: 0 4px;
    align-self: center;
}

.table-size-picker-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.table-size-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 18px);
    gap: 4px;
}

.table-size-picker-cell {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
}

.table-size-picker-cell:hover,
.table-size-picker-cell:focus-visible {
    border-color: var(--mud-palette-primary);
    outline: 2px solid rgba(25, 118, 210, 0.22);
    outline-offset: 1px;
}

.table-size-picker-cell--selected {
    border-color: var(--mud-palette-primary);
    background: #dbeafe;
}

.table-size-picker-label {
    color: #334155;
    font: 700 14px/20px var(--ap-font-ui);
    text-align: center;
}

.tableWrapper.ProseMirror-selectednode {
    border-radius: 2px;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.tableWrapper.table-selection-in-range ::selection {
    background: transparent;
}

/* Small muted group labels inside the content area (Col / Row / Web / Ref) */
.tiptap-group-label {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
    padding: 0 2px;
    user-select: none;
}

.tiptap-editor-wrapper {
    border: 1px solid #ddd;
    border-radius: 0 0 6px 6px;
    min-height: 200px;
    background: #fff;
    cursor: text;
}

.tiptap-editor-wrapper--dialog {
    min-height: 300px;
    max-height: 60vh;
    overflow-y: auto;
}

.header-footer-editor-wrapper {
    min-height: 80px !important;
}

/* ── Document editor frame (header → content → footer) ─────────────── */

.manual-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
}


.manual-panel-height {
    height: calc(100vh - 120px);
}

.manual-pdf-viewer {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.manual-pdf-viewer-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
    background: #fff;
}

.doc-editor-frame {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    height: 100%;
}

/* Header/footer preview inside the A4 page (rendered by React, non-editable).
   Sized to match PDF output (style-set size, default 8pt ≈ 10.67px at 96dpi),
   page margin 36pt (≈48px) on outer side, 1cm padding (≈38px) on separator side. */
.a4-header-preview,
.a4-footer-preview {
    padding-left: 48px;
    padding-right: 48px;
    line-height: 1.4;
    color: #555;
    user-select: none;
    pointer-events: none;
    background: #fff;
    box-sizing: border-box;
}

.a4-header-preview {
    font-family: var(--manual-page-header-family, inherit);
    font-weight: var(--manual-page-header-weight, 400);
    font-size: var(--manual-page-header-size, 10.67px);
    padding-top: 48px;    /* matches PDF page.Margin(36pt) = 48px from paper edge */
    padding-bottom: 38px; /* matches PDF PaddingBottom(1cm) */
    border-bottom: 1px dashed rgba(100, 100, 100, 0.35);
}

.a4-footer-preview {
    font-family: var(--manual-page-footer-family, inherit);
    font-weight: var(--manual-page-footer-weight, 400);
    font-size: var(--manual-page-footer-size, 10.67px);
    padding-top: 38px;    /* matches PDF PaddingTop(1cm) */
    padding-bottom: 48px; /* matches PDF page.Margin(36pt) = 48px from paper edge */
    border-top: 1px dashed rgba(100, 100, 100, 0.35);
}

.a4-header-preview p,
.a4-footer-preview p {
    margin: 0;
}

.a4-zone-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(100, 100, 100, 0.55);
    user-select: none;
    pointer-events: none;
    text-align: right;
}

.a4-zone-label--header {
    padding-top: 3px;    /* just below the header dashed border */
    padding-right: 48px;
}

.a4-zone-label--footer {
    padding-bottom: 3px; /* just above the footer dashed border */
    padding-right: 48px;
}

/* Header zone */
.doc-zone--header {
    border-bottom: 2px dashed #90caf9;
}

/* Footer zone */
.doc-zone--footer {
    border-top: 2px dashed #a5d6a7;
}

.doc-zone {
    background: #fff;
    padding: 0;
}

.doc-zone__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
    user-select: none;
}

.doc-zone--header .doc-zone__label {
    color: #1565c0;
    background: #e3f2fd;
    border-bottom: 1px solid #bbdefb;
}

.doc-zone--footer .doc-zone__label {
    color: #2e7d32;
    background: #e8f5e9;
    border-bottom: 1px solid #c8e6c9;
}

.doc-zone__sublabel {
    font-size: 10px;
    font-weight: 400;
    color: #aaa;
    margin-left: 2px;
    text-transform: none;
    letter-spacing: 0;
}

.doc-zone__save-btn {
    margin-left: auto !important;
}

.doc-zone__toolbar {
    border-bottom: 1px solid #eee;
}

.doc-zone__editor {
    min-height: 72px;
    max-height: 180px;
    overflow-y: auto;
    border: none !important;
    border-radius: 0 !important;
}

/* ── PDF header/footer preview editor ─────────────────────────────────────── */

.pdf-preview-container {
    max-width: 100%;
    overflow-x: auto;
}

/* 697px = A4 content width (523.28pt) at 96 DPI */
.pdf-page-preview {
    width: 697px;
    border: 1px solid #cdd5de;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.pdf-section-label {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    background: #f0f4f8;
    font-size: 11px;
    font-weight: 600;
    color: #546e7a;
    border-bottom: 1px solid #cdd5de;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pdf-dimension-hint {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 6px;
    text-transform: none;
    font-style: italic;
}

/* Header editor content area: 96px = 72pt at 96 DPI.
   Sized off the style set (like .a4-header-preview) so what is typed here is the size it prints;
   the read-only render shares the rule so a published revision looks no different. */
.pdf-header-editor .simple-editor-content.tiptap-editor-content,
.pdf-header-editor .pdf-static-content {
    min-height: 0 !important;
    height: 96px;
    overflow-y: auto;
    padding: 8px 12px;
    font-family: var(--manual-page-header-family, inherit);
    font-weight: var(--manual-page-header-weight, 400);
    font-size: var(--manual-page-header-size, 10.67px);
    line-height: 1.4;
}

/* Footer editor content area: 48px = 36pt at 96 DPI */
.pdf-footer-editor .simple-editor-content.tiptap-editor-content,
.pdf-footer-editor .pdf-static-content {
    min-height: 0 !important;
    height: 48px;
    overflow-y: auto;
    padding: 6px 12px;
    font-family: var(--manual-page-footer-family, inherit);
    font-weight: var(--manual-page-footer-weight, 400);
    font-size: var(--manual-page-footer-size, 10.67px);
    line-height: 1.4;
}

.pdf-header-editor .pdf-static-content p,
.pdf-footer-editor .pdf-static-content p {
    margin: 0;
}

.pdf-header-editor,
.pdf-footer-editor {
    border-bottom: 2px dashed #b0bec5;
}

.pdf-footer-editor {
    border-top: 2px dashed #b0bec5;
    border-bottom: none;
}

/* Compact toolbar in simple editor */
.simple-editor-toolbar-bar {
    border-bottom: 1px solid #e3eaf0;
    background: #fafbfc;
}

.simple-editor-toolbar-bar .tiptap-toolbar {
    flex-wrap: nowrap;
    min-height: unset;
    padding: 2px 4px;
}

.pdf-body-placeholder {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aab4be;
    font-size: 13px;
    background: #f7f9fb;
    border-top: 1px solid #e3eaf0;
    border-bottom: 1px solid #e3eaf0;
}


.doc-editor-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.doc-editor-chapter-label {
    display: flex;
    align-items: center;
    padding: 6px 16px 4px;
    background: #f0f4f8;
    font-size: 12px;
    font-weight: 600;
    color: #546e7a;
    border-bottom: 1px solid #dde3e8;
    letter-spacing: 0.03em;
}

.tiptap-editor-content {
    padding: 12px 16px;
    min-height: 180px;
    outline: none;
    font-size: inherit; /* the manual page (.chapter-a4-page) owns the base size */
    line-height: 1.6;
}

.tiptap-editor-content ul,
.tiptap-editor-content ol {
    padding-left: 1.5rem;
}

.tiptap-editor-content ul { list-style-type: disc; }
.tiptap-editor-content ol { list-style-type: decimal; }

.tiptap-editor-content ul ul,
.tiptap-editor-content ol ol,
.tiptap-editor-content ul ol,
.tiptap-editor-content ol ul {
    padding-left: 1.5rem;
}

.tiptap-editor-content blockquote {
    border-left: 3px solid #9ca3af;
    padding: 2px 0 2px 8px;
    margin: 2.67px 0;
}

.tiptap-editor-content a {
    color: blue;
    text-decoration: underline;
}

/* Law reference badge — pretty inline pill for law names like 145.A.10 */
.law-ref,
.tiptap-editor-content .law-ref {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.82em;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

.law-ref:hover,
.tiptap-editor-content .law-ref:hover {
    background: #fde68a;
    border-color: #f59e0b;
    text-decoration: none;
}

/* Pages extension — header/footer/gap must paint above content */
.tiptap-page-header {
    position: relative;
    z-index: 3;
    background: #fff;
}

.tiptap-page-footer {
    position: relative;
    z-index: 3;
    background: #fff;
}

.tiptap-pagination-gap {
    z-index: 3;
}

/* ── Section cards (Notion-style) ──────────────────────────────────── */

/* TipTap ReactNodeViewRenderer wrapper — controls the gap between cards */
.node-section {
    margin-bottom: 28px !important;
}

/* Outer wrapper — no border, no extra spacing */
.editor-section {
    position: relative;
    display: block;
    /* Border sits 24px in from page edge; card padding brings content to 48px (matches chapter heading) */
    margin: 0 24px;
    overflow: visible;
}

/* Inner card — this is what gets the border */
.editor-section-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 3px;
    /* 24px padding brings content to 48px from page edge — aligned with chapter heading */
    padding: 6px 24px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-section:hover .editor-section-card,
.editor-section--active .editor-section-card {
    border-color: #9ca3af;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.editor-section:focus-within .editor-section-card {
    border-color: #9ca3af;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* Section body grows to fill available width */
.section-body {
    flex: 1;
    min-width: 0;
}

/* First/last child margin cleanup */
.editor-section-card > .section-body > *:first-child { margin-top: 0; }
.editor-section-card > .section-body > *:last-child  { margin-bottom: 0; }

/* ── Law ref tags — always visible, bottom-right corner of the section ─── */

.section-law-refs {
    position: absolute;
    right: 0;
    bottom: -10px;
    transform: translateY(50%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 60%;
    z-index: 20;
    pointer-events: auto;
}

.section-law-ref-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0;
    padding: 3px 4px 3px 8px;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
}

.section-law-ref-tag-link {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.section-law-ref-tag-link:hover {
    text-decoration: underline;
}

.section-law-ref-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: #93c5fd;
    border-radius: 3px;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
}

.section-law-ref-tag-remove:hover {
    background: #bfdbfe;
    color: #1d4ed8;
}

/* ── Drag handle — vertically centered, left edge of card ───────────── */

.section-drag-handle {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.editor-section-card:hover .section-drag-handle,
.editor-section:focus-within .section-drag-handle,
.editor-section--active .section-drag-handle {
    opacity: 1;
}

.section-drag-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: grab;
    color: #9ca3af;
    transition: background 0.1s, color 0.1s;
}

.section-drag-grip:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #4b5563;
}

.section-drag-grip:active {
    cursor: grabbing;
}

/* ── Section action bar (outside/below the card border) ─────────────── */

.section-actions {
    position: absolute;
    bottom: -26px;
    left: 0;
    right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.editor-section:hover .section-actions,
.editor-section:focus-within .section-actions,
.editor-section--active .section-actions {
    opacity: 1;
    pointer-events: auto;
}

.section-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-family: var(--ap-font-ui);
    line-height: 1;
    color: #6b7280;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.section-action-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.section-action-btn:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #111827;
}

.section-action-delete:hover {
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

/* ── Section law reference tags in section-actions ──────────────────────── */

.section-action-law-ref {
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.section-action-law-ref:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.check-suggestion-card {
    z-index: 1400;
    width: max-content;
    max-width: min(340px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #111827;
    background: #fff;
    box-shadow: 0 10px 28px rgb(15 23 42 / 18%);
    pointer-events: none;
}

.check-suggestion-card-category {
    margin-bottom: 5px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.check-suggestion-card-replacement {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}

.check-suggestion-card-explanation {
    margin-top: 5px;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.4;
}

.ai-answer {
    min-width: 0;
}

.ai-answer-content {
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.ai-answer-disclaimer {
    font-size: 0.75rem;
    line-height: 1.35;
}

.ai-answer-disclaimer .mud-alert-icon {
    font-size: 1rem;
}

/* ── Page break section ─────────────────────────────────────────────────── */

.editor-page-break {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    cursor: default;
    user-select: none;
}

.editor-page-break::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed #94a3b8;
    pointer-events: none;
}

.editor-page-break-label {
    background: #f8fafc;
    padding: 0 10px;
    /* font-family: var(--ap-font-ui); */
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.ProseMirror-selectednode .editor-page-break {
    outline: 2px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

@media print {
    .editor-section--page-break {
        page-break-after: always !important;
        margin: 0 !important;
    }
    .editor-page-break { display: none !important; }
}

/* ── Info Panel node (block inside a section) ───────────────────────────────── */

.editor-info-panel {
    border-radius: 6px;
    border-left-width: 4px;
    border-left-style: solid;
    margin: 4px 0;
    overflow: hidden;
    font-family: var(--manual-info-panel-family, inherit);
    font-weight: var(--manual-info-panel-weight, 400);
    font-size: var(--manual-info-panel-size, inherit);
}

.editor-info-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 6px;
}

.editor-info-panel-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.editor-info-panel-type-selector {
    display: flex;
    gap: 4px;
    flex: 1;
    flex-wrap: wrap;
}

.info-panel-type-btn {
    padding: 2px 8px;
    font-size: 11px;
    font-family: var(--ap-font-ui);
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.1s, background 0.1s, border-color 0.1s;
}

.info-panel-type-btn:hover {
    opacity: 1;
}

.info-panel-type-btn.active {
    opacity: 1;
    border-color: currentColor;
    background: rgba(0, 0, 0, 0.1);
}


.editor-info-panel-headline {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--manual-info-panel-headline-size, 14.67px);
    font-weight: 600;
    font-family: var(--manual-info-panel-family, inherit);
    color: inherit;
    padding: 0 12px 6px;
    box-sizing: border-box;
}

.editor-info-panel-headline::placeholder {
    opacity: 0.45;
    font-weight: 400;
}

.editor-info-panel-body {
    padding: 6px 12px 10px;
    min-height: 32px;
}

.editor-info-panel-body > *:first-child { margin-top: 0; }
.editor-info-panel-body > *:last-child  { margin-bottom: 0; }

/* Colour themes */

.editor-info-panel--info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e40af;
}

.editor-info-panel--success {
    background: #f0fdf4;
    border-left-color: #22c55e;
    color: #166534;
}

.editor-info-panel--warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

.editor-info-panel--error {
    background: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

[data-info-panel] {
    border-left: 4px solid #3b82f6;
    background: #eff6ff;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 8px 0;
    color: #1e40af;
}

[data-info-panel]::before {
    content: attr(data-info-panel-headline);
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
}

[data-info-panel][data-info-panel-type="success"] {
    border-left-color: #22c55e;
    background: #f0fdf4;
    color: #166534;
}

[data-info-panel][data-info-panel-type="warning"] {
    border-left-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

[data-info-panel][data-info-panel-type="error"],
[data-info-panel][data-info-panel-type="danger"] {
    border-left-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

/* ── Add Section dialog ────────────────────────────────────────────────────── */

.add-section-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 8px;
    outline: none;
}

.add-section-common {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.add-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d1d5db;
    margin: 0 1px;
}

.add-section-divider::before,
.add-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.add-section-divider span {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d1d5db;
}

.add-section-secondary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.add-section-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-family: inherit;
    outline: none;
}

.add-section-option:hover {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.07);
    background: #fafafe;
}

.add-section-option:focus-visible {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.add-section-option--secondary {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px 10px;
    gap: 7px;
    border-color: #efefef;
    background: #fafafa;
}

.add-section-option--secondary:hover {
    background: #fafafe;
    border-color: rgba(99, 102, 241, 0.35);
}

.add-section-option--secondary:focus-visible {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.add-section-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #6366f1;
    flex-shrink: 0;
}

.add-section-option-icon svg {
    width: 22px;
    height: 22px;
}

.add-section-option--secondary .add-section-option-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.add-section-option--secondary .add-section-option-icon svg {
    width: 15px;
    height: 15px;
}

.add-section-option-icon--info {
    background: #eff6ff;
    color: #3b82f6;
}

.add-section-option-text {
    display: contents;
}

.add-section-option-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}

.add-section-option--secondary .add-section-option-label {
    font-size: 11px;
    font-weight: 500;
    color: #374151;
}

.add-section-option-desc {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}

.add-section-option--secondary .add-section-option-desc {
    display: none;
}

.tiptap-editor-content table {
    border-collapse: collapse;
    width: 100%;
}

.tiptap-editor-content img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Prevent oversized images from triggering the Pages infinite-layout-loop.
       --page-max-height is injected by the Pages extension at runtime. */
    max-height: var(--page-max-height, 100vh);
}

/* ── Image resize (ResizableNodeView) ───────────────────────────────── */

/* Outer container — provides relative positioning for handles */
[data-resize-container] {
    position: relative;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
}

/* Selected state: blue outline */
[data-resize-container].ProseMirror-selectednode,
.ProseMirror-selectednode [data-resize-container] {
    outline: 2px solid #4f9cf9;
    border-radius: 2px;
}

/* Wrapper holds the actual img */
[data-resize-wrapper] {
    display: block;
    line-height: 0;
}

/* Resize handles */
[data-resize-handle] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #4f9cf9;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.12s;
}

/* Show handles when the container is hovered or the node is selected */
[data-resize-container]:hover [data-resize-handle],
.ProseMirror-selectednode [data-resize-handle] {
    opacity: 1;
}

/* Position each handle corner/edge */
[data-resize-handle="right"]        { right: -5px;  top: 50%;    transform: translateY(-50%); cursor: e-resize; }
[data-resize-handle="bottom"]       { bottom: -5px; left: 50%;   transform: translateX(-50%); cursor: s-resize; }
[data-resize-handle="bottom-right"] { right: -5px;  bottom: -5px; cursor: se-resize; }
[data-resize-handle="top"]          { top: -5px;    left: 50%;   transform: translateX(-50%); cursor: n-resize; }
[data-resize-handle="top-right"]    { right: -5px;  top: -5px;   cursor: ne-resize; }
[data-resize-handle="top-left"]     { left: -5px;   top: -5px;   cursor: nw-resize; }
[data-resize-handle="bottom-left"]  { left: -5px;   bottom: -5px; cursor: sw-resize; }
[data-resize-handle="left"]         { left: -5px;   top: 50%;    transform: translateY(-50%); cursor: w-resize; }

/* Active resize: show semi-transparent overlay on container */
[data-resize-container][data-resize-state="true"] {
    outline: 2px solid #4f9cf9;
    cursor: grabbing;
}

[data-resize-container][data-resize-state="true"] [data-resize-handle] {
    opacity: 1;
}

/* Image alignment helpers applied via bubble menu / toolbar */
.tiptap-editor-content img[style*="margin-left:auto"][style*="margin-right:auto"],
.tiptap-editor-content [data-resize-container][style*="margin-left:auto"][style*="margin-right:auto"] {
    display: block;
}

.tiptap-editor-content img[style*="margin-left:auto"][style*="margin-right:0"],
.tiptap-editor-content [data-resize-container][style*="margin-left:auto"][style*="margin-right:0"] {
    display: block;
    margin-left: auto !important;
    margin-right: 0 !important;
}


.tiptap-editor-content td,
.tiptap-editor-content th {
    border: 1px solid #ccc;
    padding: 6px 10px;
    min-width: 60px;
}

.tiptap-editor-content th {
    background: #f0f0f0;
    font-weight: 600;
}

.tiptap-section-editor {
    width: 100%;
}

/* ── Chapter editor (single TipTap per chapter) ─────────────────────── */

.chapter-editor-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Toolbar slot — hoisted as a direct child of .doc-editor-frame (outside the scroll area)
   so it always spans the full frame width with no scrollbar gap */
.chapter-editor-toolbar-slot {
    flex-shrink: 0;
    width: 100%;
    background: #d0d0d0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    height: 41px;
    overflow: visible;
}

/* Toolbar sits inside the slot — no sticky needed since the slot is outside scroll */
.chapter-editor-toolbar-bar {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: visible;
}

/* Save status inside the toolbar bar — pushed to the right, sits on the grey bar */
.toolbar-save-status {
    margin-left: 0;
    padding: 0;
    white-space: nowrap;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    align-self: stretch;
    background: #fff;
}

.toolbar-save-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #9e9e9e;
    transition: background 0.2s ease;
    /* button reset */
    border: none;
    cursor: default;
    font-family: inherit;
    outline: none;
    align-self: stretch;
    margin: 2px 0;
}

.toolbar-save-status-chip--unsaved {
    background: #1976d2;
    cursor: pointer;
}

.toolbar-save-status-chip--unsaved:hover {
    background: #1565c0;
}

.toolbar-save-status-chip--saving,
.toolbar-save-status-chip:disabled {
    background: #9e9e9e;
    cursor: default;
}

.toolbar-save-status-chip--saved {
    background: #388e3c;
    cursor: default;
}

.toolbar-save-status-icon {
    display: inline-flex;
    align-items: center;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.toolbar-save-status-icon svg {
    width: 13px;
    height: 13px;
}

.toolbar-save-status--unsaved {
    color: #b45309;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.toolbar-save-status--saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #2e7d32;
}

/* Mode action buttons flanking the Save chip in the TipTap toolbar bar */
.toolbar-mode-actions {
    display: flex;
    align-items: stretch;
    gap: 2px;
    background: #fff;
    align-self: stretch;
    padding: 0 4px;
}

.toolbar-right-actions {
    display: flex;
    align-items: stretch;
    gap: 2px;
    align-self: stretch;
    padding: 0 4px;
    overflow: visible;
}

.toolbar-dropdown {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: stretch;
}

.toolbar-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    margin-top: 4px;
}

.toolbar-dropdown--open .toolbar-dropdown-content {
    display: block;
}

.toolbar-dropdown-content.tiptap-dropdown-menu-content {
    padding: 0.375rem;
    border-radius: 1.125rem;
    background-color: #fff;
    color: #374151;
    box-shadow: 0px 16px 48px 0px rgba(17,24,39,0.04),
                0px 12px 24px 0px rgba(17,24,39,0.04),
                0px 6px 8px 0px rgba(17,24,39,0.02),
                0px 2px 3px 0px rgba(17,24,39,0.02);
    min-width: 8rem;
}

.toolbar-dropdown-content .tiptap-dropdown-menu-group {
    display: flex;
    flex-direction: column;
}

.toolbar-dropdown-content .tiptap-dropdown-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: #374151;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.toolbar-dropdown-content .tiptap-dropdown-menu-item:hover {
    background-color: rgba(0,0,0,0.05);
    color: #111;
}

.tiptap-dropdown-menu-item--disabled {
    opacity: 0.4;
    pointer-events: none;
}


.toolbar-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    white-space: nowrap;
    align-self: stretch;
    margin: 2px 0;
    transition: background 0.15s ease;
}

.toolbar-action-btn:hover:not(:disabled) {
    background: #f3f4f6;
}

.toolbar-action-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.toolbar-action-btn--active {
    color: #1976d2;
}

.toolbar-action-btn-icon {
    display: inline-flex;
    align-items: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.toolbar-action-btn-icon svg {
    width: 14px;
    height: 14px;
}


/* Scrollable canvas — grey background like a print preview */
.chapter-editor-wrapper {
    background: #f8f9fa;
    flex: 1;
    padding: 0 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* React root: sized by content */
.chapter-editor-react-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Let Pages extension own the ProseMirror element's size */
.chapter-editor-content {
    padding: 0;
}

/* ── Manual typography (style sets) ──────────────────────────────────────────
   All manual surfaces (live editor, read-only view, diff) render inside
   .chapter-a4-page. Sizing and families come from --manual-* custom properties
   emitted by ManualTypographyScope from the manual's style set; every var() has
   the built-in default as fallback so surfaces without a scope render the
   default look. Pixel values are pt × 96/72 — the same numbers the PDF uses —
   so the on-screen page IS the printed page. */

/* Self-hosted manual fonts — the same typefaces QuestPDF embeds server-side, so the
   editor and the PDF render with identical metrics, online and offline (no font CDN).
   Browsers fetch a face only when a rendered page actually uses it, and cache it after,
   so a user only ever downloads the families their manuals use. WOFF2 (latin subset,
   ~20-110 KB per face) where available; the Liberation families ship as TTF. */

/* Inter is one of the manual body faces a company can pick, not the application UI - that is
   Source Sans 3, below. The extra weights are left from when it was the UI face.

   These seven declared their family as var(--ap-font-ui), which is not valid in an @font-face
   descriptor, so the browser dropped all seven and Inter never registered. QuestPDF registers
   the same files for the PDF, so a manual set to Inter printed in Inter and rendered in the
   editor with whatever the machine happened to substitute. */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: 'IBM Plex Sans Condensed'; src: url('fonts/IBMPlexSansCondensed-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url('fonts/IBMPlexSansCondensed-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url('fonts/IBMPlexSansCondensed-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url('fonts/IBMPlexSansCondensed-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('fonts/OpenSans-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: 'Liberation Sans'; src: url('fonts/LiberationSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Liberation Sans'; src: url('fonts/LiberationSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Liberation Sans'; src: url('fonts/LiberationSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Liberation Sans'; src: url('fonts/LiberationSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: 'Liberation Serif'; src: url('fonts/LiberationSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Liberation Serif'; src: url('fonts/LiberationSerif-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Liberation Serif'; src: url('fonts/LiberationSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Liberation Serif'; src: url('fonts/LiberationSerif-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-It.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-BoldIt.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

/* Single A4 white page — wraps heading + ProseMirror as one unit */
.chapter-a4-page {
    position: relative;
    width: 794px;
    min-height: 1123px; /* A4 at 96 dpi */
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    margin-top: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: var(--manual-body-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-weight: var(--manual-body-weight, 400);
    font-size: var(--manual-body-size, 13.33px); /* 10pt × 96/72 — strict pt→px so the page matches the PDF */
    line-height: 1.6;
    color: #1a1a1a;
}

/* Headings: one rule for editor AND read/diff view (both live inside the A4 page).
   Sizes derive from the style set's single heading size, scaled exactly like the PDF. */
.chapter-a4-page h1,
.chapter-a4-page h2,
.chapter-a4-page h3,
.chapter-a4-page h4,
.chapter-a4-page h5,
.chapter-a4-page h6 {
    font-family: var(--manual-heading-family, inherit);
    font-weight: var(--manual-heading-weight, 700);
    line-height: 1.25;
    margin-bottom: 3.3px;
}
.chapter-a4-page h1 { font-size: var(--manual-h1-size, 26.67px); margin-top: 10px; }
.chapter-a4-page h2 { font-size: var(--manual-h2-size, 22.67px); margin-top: 8px; }
.chapter-a4-page h3 { font-size: var(--manual-h3-size, 20px);    margin-top: 6.5px; }
.chapter-a4-page h4 { font-size: var(--manual-h4-size, 17.33px); margin-top: 5px; }
.chapter-a4-page h5 { font-size: var(--manual-h5-size, 16px);    margin-top: 3.3px; }
.chapter-a4-page h6 { font-size: var(--manual-h6-size, 14.67px); margin-top: 3.3px; }

/* Inline code matches the PDF's body-derived code size regardless of section. */
.chapter-a4-page code {
    font-family: 'JetBrains Mono', "Courier New", Courier, monospace;
    font-size: var(--manual-code-size, 12.67px);
}

/* Typed/generated sections. The !important rules intentionally beat the inline pt
   sizes baked into stored section HTML and React node views: published revisions keep
   frozen snapshot HTML, and the manual's CURRENT style set must restyle them — the PDF
   behaves identically because HtmlToDocNodes never reads inline font sizes. */
.chapter-a4-page .editor-section--toc,
.chapter-a4-page [data-section-type="toc"] {
    font-family: var(--manual-toc-family, inherit);
    font-weight: var(--manual-toc-weight, 400);
    font-size: var(--manual-toc-size, 13.33px);
}
.chapter-a4-page .editor-section--lep,
.chapter-a4-page [data-section-type="lep"],
.chapter-a4-page .lep-preview-table-header {
    font-family: var(--manual-lep-family, inherit);
    font-weight: var(--manual-lep-weight, 400);
    font-size: var(--manual-lep-size, 13.33px);
}
.chapter-a4-page .editor-section--rev p,
.chapter-a4-page [data-section-type="rev"] p {
    font-family: var(--manual-rev-family, inherit) !important;
    font-weight: var(--manual-rev-weight, 400) !important;
    font-size: var(--manual-rev-heading-size, 14.67px) !important;
}
.chapter-a4-page .editor-section--rev table,
.chapter-a4-page .editor-section--rev table p,
.chapter-a4-page [data-section-type="rev"] table,
.chapter-a4-page [data-section-type="rev"] table p {
    font-family: var(--manual-rev-family, inherit) !important;
    font-weight: var(--manual-rev-weight, 400) !important;
    font-size: var(--manual-rev-size, 13.33px) !important;
}
.chapter-a4-page .editor-section--mel table,
.chapter-a4-page [data-section-type="mel-header"] table {
    font-family: var(--manual-mel-family, inherit) !important;
    font-weight: var(--manual-mel-weight, 400) !important;
    font-size: var(--manual-mel-size, 13.33px) !important;
}
/* MEL2 shares the MEL typography kind, so it reads from the same variables. */
.chapter-a4-page .editor-section--mel2,
.chapter-a4-page [data-section-type="mel2"] {
    font-family: var(--manual-mel-family, inherit);
    font-size: var(--manual-mel-size, 13.33px);
}
.chapter-a4-page .editor-section--attachment,
.chapter-a4-page [data-section-type="attachment"],
.chapter-a4-page .attachment-preview {
    font-family: var(--manual-attachment-family, inherit);
    font-weight: var(--manual-attachment-weight, 400);
    font-size: var(--manual-attachment-size, 14.67px);
}
.chapter-a4-page .section-law-refs,
.chapter-a4-page .section-law-ref-tag {
    font-family: var(--manual-law-ref-family, inherit);
    font-weight: var(--manual-law-ref-weight, 400);
    font-size: var(--manual-law-ref-size, 10px);
}

/* Direct table row/column controls. They live outside ProseMirror's document so
   using them never changes the HTML saved for a manual section. */
.table-edge-controls {
    position: absolute;
    inset: 0;
    z-index: 24;
    pointer-events: none;
}

.table-boundary-control {
    position: absolute;
    z-index: 4;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
}

/* Reserve the floating options bar's footprint so it never covers the next
   editable block, and provide an internal top gutter for column boundary
   controls. The class is present only while that table owns the selection. */
.chapter-editor-content .tableWrapper.table-controls-active {
    margin-top: 18px;
    margin-bottom: 46px;
}

.table-boundary-dot {
    position: relative;
    z-index: 2;
    width: 4px;
    height: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #cbd5e1;
    color: transparent;
    font: 600 14px/1 sans-serif;
    transition: width 100ms ease, height 100ms ease, background 100ms ease, color 100ms ease;
}

.table-boundary-line {
    position: absolute;
    z-index: 1;
    background: var(--mud-palette-primary);
    opacity: 0;
    pointer-events: none;
}

.table-boundary-control--row .table-boundary-line {
    left: var(--table-line-offset);
    top: var(--table-line-cross-offset);
    width: var(--table-line-size);
    height: 3px;
}

.table-boundary-control--column .table-boundary-line {
    left: var(--table-line-cross-offset);
    top: var(--table-line-offset);
    width: 3px;
    height: var(--table-line-size);
}

.table-boundary-control:hover .table-boundary-dot,
.table-boundary-control:focus-visible .table-boundary-dot {
    width: 18px;
    height: 18px;
    background: var(--mud-palette-primary);
    color: #fff;
}

.table-boundary-control:hover .table-boundary-line,
.table-boundary-control:focus-visible .table-boundary-line {
    opacity: 1;
}

.table-boundary-control:focus-visible {
    outline: none;
}

.table-axis-handle-bridge {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.table-axis-handle-bridge--row { width: 17px; }
.table-axis-handle-bridge--column { height: 17px; }

.table-axis-handle {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #64748b;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    pointer-events: auto;
}

.table-axis-handle--row {
    position: absolute;
    left: 11.5px;
    width: 11px;
    height: 28px;
}

.table-axis-handle--column {
    position: absolute;
    top: 11.5px;
    width: 28px;
    height: 11px;
}

.table-axis-handle:hover,
.table-axis-handle:focus-visible,
.table-axis-handle[data-state="open"] {
    border-color: #60a5fa;
    background: #dbeafe;
    color: var(--mud-palette-primary);
    outline: none;
}

.table-axis-grip {
    display: block;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1.2px);
    background-size: 4px 4px;
}

.table-axis-handle--row .table-axis-grip { width: 5px; height: 17px; }
.table-axis-handle--column .table-axis-grip { width: 17px; height: 5px; }

.table-axis-menu { min-width: 190px; }

.table-axis-menu .tiptap-dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-axis-menu-icon {
    width: 16px;
    color: #64748b;
    text-align: center;
}

.table-axis-menu-item--danger { color: var(--mud-palette-error); }

.table-options-trigger {
    position: absolute;
    z-index: 3;
    transform: translateX(-50%);
    height: 32px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dbe1e8;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    font: 500 13px/1.2 var(--ap-font-ui);
    cursor: pointer;
    pointer-events: auto;
    white-space: nowrap;
}

.table-options-trigger:hover,
.table-options-trigger:focus-visible,
.table-options-trigger[data-state="open"] {
    border-color: #93c5fd;
    background: #eff6ff;
    color: var(--mud-palette-primary);
    outline: none;
}

.table-options-trigger svg { width: 12px; height: 12px; }
.table-options-icon { font-size: 15px; }
.table-options-menu {
    min-width: 176px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.table-options-menu .tiptap-dropdown-menu-checkbox-item {
    position: relative;
    width: 100%;
    min-height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 7px 10px 7px 34px;
    border-radius: 4px;
    color: #475569;
    font: 400 14px/20px var(--ap-font-ui);
    cursor: pointer;
    outline: none;
    user-select: none;
}

.table-options-menu .tiptap-dropdown-menu-checkbox-item[data-highlighted] {
    background: #eff6ff;
    color: var(--mud-palette-primary);
}

.table-options-menu .tiptap-dropdown-menu-item-indicator {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-options-menu .tiptap-dropdown-menu-item-indicator svg {
    width: 15px;
    height: 15px;
}

/* Non-editable chapter heading — mirrors the PDF bold heading + rule */
.chapter-a4-page-heading {
    padding: 13px 48px 5px;
    user-select: none;
    pointer-events: none;
}

/* Align chapter heading text with regular text sections inside the editor card */
.editor-section-card--headline .chapter-a4-page-heading {
    padding-left: 0;
    padding-right: 0;
}

.chapter-a4-heading-text {
    display: block;
    font-family: var(--manual-chapter-heading-family, inherit);
    font-size: var(--manual-chapter-heading-size, 25.33px); /* 19pt × (96/72) — matches PDF */
    font-weight: var(--manual-chapter-heading-weight, 700);
    color: #1a1a1a;
    padding-bottom: 5px; /* 4pt × (96/72) — matches PDF PaddingBottom before rule */
}

.chapter-a4-heading-rule {
    height: 0.5px;
    background: #d0d7de;
}

/* ProseMirror: inherits white background from .chapter-a4-page, no own shadow */
.chapter-editor-wrapper .ProseMirror {
    /* Top/bottom padding only — horizontal margins are handled per-section */
    padding: 0 0 48px;
    box-sizing: border-box;
    min-height: 1040px;
    flex-shrink: 0;
}

/* The ProseMirror element inside the canvas must not stretch to fill flex parent */
.chapter-editor-wrapper > .ProseMirror,
.chapter-editor-wrapper > [contenteditable] {
    flex-shrink: 0;
}

/* ── Section styles ─────────────────────────────────────────────────── */

.section-container {
    padding: 8px 0;
}

.section-content {
    font-size: inherit; /* the manual page (.chapter-a4-page) owns the base size */
    line-height: 1.6;
}

/* Empty placeholder text */
.section-empty-placeholder {
    color: #9e9e9e;
    font-style: italic;
    font-size: 1rem;
    padding: 4px 0;
}

.logo-img {
    max-width: 100%;
    height: auto;
}

.page-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ap-canvas);
}

/* loading.png is pure white with the mark carried entirely in its alpha, so masking a token
   colour through it gives an exact tint. It replaces a filter chain — invert/sepia/saturate/
   hue-rotate — that encoded the old blue as magic numbers no one could read or retune.
   The element is a div rather than an img because a mask on an img still shows the image's own
   white pixels; the class stays because MudAnimate rotates it by selector. */
.page-loading .loading-ani-example {
    width: 144px;
    height: 144px;
    background-color: var(--ap-primary);
    -webkit-mask: url('loading.png') center / contain no-repeat;
    mask: url('loading.png') center / contain no-repeat;
}

/* ── EAR Viewer / Import shared row styles ──────────────────────────── */
/* Main-column wrapper for the Law Explorer content pane inside AppLayout */
.ear-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The content scroll pane. Padding lives on an inner wrapper (pa-4), never here:
   sticky table headers pin to this scrollport's edge, and padding on the scroller
   would leave a strip above the pinned header with content scrolling through it. */
.ear-content-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Query container for the pane-spanning table breakout: a block inside the 900px-capped
   body cannot otherwise know the pane's width. Deliberately on the padding wrapper and
   NOT on .ear-content-scroll — that element is the sticky-header scrollport easa-view.js
   measures, and the comment above warns off box properties there. */
.ear-content-measure { container-type: inline-size; }

.ear-subject-row {
    padding: 3px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    font-size: inherit;
    white-space: nowrap;
    overflow: hidden;
}
.ear-subject-row:hover { background: rgba(0,0,0,0.07); }
/* Neutral selection: soft fill + a primary edge, so type badges, icons and count chips
   keep their own colours on the selected row */
.ear-subject-row--selected {
    background: rgba(0, 0, 0, 0.08);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
    white-space: normal; /* the selected row may wrap: reading the full title beats one-line tidiness */
}
.ear-subject-row--selected:hover { background: rgba(0, 0, 0, 0.11); }
.ear-subject-row span { overflow: hidden; text-overflow: ellipsis; }
.ear-subject-row--selected span { overflow: visible; text-overflow: clip; }
/* AMC/GM child rows dropped beneath their selected rule in the middle column */
.ear-subject-row--child {
    margin-left: 12px;
    border-left: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 0 4px 4px 0;
}
/* Number-only guidance count chips at a rule row's right edge — colour carries the
   type (shared .easa-type--* backgrounds: AMC amber, GM green), the title tooltip
   spells it out */
.easa-count-chips { display: inline-flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.easa-count-chip {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
    opacity: 0.85;
}
/* Side padding so selection pills float free of the pane edges; extra room below the
   last row before the collapse-all footer */
.law-toc-tree { padding: 8px 6px 12px; }
.ear-folder-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-bottom: 1px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0; /* overflow:hidden zeroes the automatic min-height, so a flex-column parent could squash rows */
    transition: background-color 0.1s ease;
}
.ear-folder-row:hover { background: rgba(0,0,0,0.05); }
/* Top-level entries (annexes, cover) anchor the hierarchy visually; a gap above each
   one separates the document's parts into scannable groups */
.ear-folder-row--root { font-weight: 600; }
.ear-folder-row + .ear-folder-row--root { margin-top: 10px; }
/* Mockup-style selection: a soft primary pill with primary text (ToC only — the
   requirements list keeps the neutral grey + edge) */
.ear-folder-row--selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    white-space: normal; /* selected tree rows wrap instead of truncating */
}
.ear-folder-row--selected:hover { background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
/* !important: the tree items carry their truncation as inline styles */
.ear-folder-row--selected span { overflow: visible !important; text-overflow: clip !important; }
.ear-folder-chevron { color: var(--mud-palette-text-secondary); font-size: 18px; }
.ear-folder-row--selected .ear-folder-chevron { color: inherit; }
/* Leaf rows carry no chevron; the selected one shows the mockup's marker dot */
.ear-folder-leaf-slot { width: 20px; flex-shrink: 0; text-align: center; font-weight: 700; }

/* ── Law regulation picker (/Law without a chosen regulation) ── */
.law-picker { max-width: 1280px; margin: 0 auto; }
.law-picker-header { margin-bottom: 16px; }
.law-picker-title.mud-typography { font-weight: 600; margin-bottom: 2px; }
.law-picker-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.law-picker-search { flex: 1; min-width: 0; }
/* Two classes on purpose: app.css loads BEFORE MudBlazor.min.css, so one class loses to .mud-input-control by order */
.law-picker-search.mud-input-control { margin: 0; }
.law-picker-no-match { padding: 8px 0; }
/* auto-fill: 3 columns from 1052px of content up to the 1280px cap (never 4), 2 from 696px, else 1 */
.law-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.law-picker-card-shell { position: relative; }
/* The card is an anchor: colour/decoration reset, then the house hover language minus the shadow */
.law-picker-card {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 96px;
    padding: 14px 12px 14px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* MudBlazor's a:hover (0,1,1) outranks the class alone */
.law-picker-card:hover, .law-picker-card:visited, .law-picker-card:focus { color: inherit; text-decoration: none; }
.law-picker-card:hover { background-color: #F0F7FF; border-color: #1F8CF9; }
.law-picker-card:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.law-picker-card-body { flex: 1; min-width: 0; padding-right: 24px; } /* keeps the title clear of the kebab */
.law-picker-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.law-picker-card-ref { margin-top: 2px; font-size: 0.8125rem; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.law-picker-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.law-picker-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: #F3F4F6;
    color: #374151;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}
.law-picker-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 0.75rem; color: #6B7280; }
.law-picker-card-chevron { flex-shrink: 0; color: #9CA3AF; }
.law-picker-card:hover .law-picker-card-chevron { color: #1F8CF9; }
/* Kebab: a sibling of the link (never nested in it); muted at rest, brightens on card hover; always visible where hover doesn't fire */
.law-picker-card-actions { position: absolute; top: 6px; right: 6px; }
.law-picker-card-actions .ear-row-menu .mud-icon-button {
    padding: 2px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.55;
    transition: opacity .15s;
}
.law-picker-card-actions .ear-row-menu .mud-icon-button .mud-icon-root { font-size: 1.05rem; }
.law-picker-card-shell:hover .ear-row-menu .mud-icon-button,
.law-picker-card-actions .ear-row-menu .mud-icon-button:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 600px) {
    .law-picker-card-actions .ear-row-menu .mud-icon-button { opacity: 1; }
    .law-picker-controls { flex-direction: column; align-items: stretch; }
}

/* Law Explorer TOC pane header: a labelled back-to-catalogue row above a bordered
   regulation-switcher control. Two stacked rows, so the fixed one-row .bl-panel-header
   height gives way — two classes on purpose: block-layout.css loads AFTER app.css
   (App.razor), so a single-class rule here loses to .bl-panel-header. */
.bl-panel-header.law-toc-header { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 10px 8px; }
.law-toc-back {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}
.law-toc-back:hover { background: rgba(0, 0, 0, 0.05); color: var(--mud-palette-primary); }
.law-toc-back .mud-icon-root { font-size: 16px; }
/* Switcher: a select-like control opening the regulation menu. .mud-menu defaults to
   inline-flex + align-self:center — stretch it to fill the column row. */
.bl-panel-header.law-toc-header .law-toc-switcher { align-self: stretch; min-width: 0; }
.law-toc-switcher-control {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 8px 5px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}
.law-toc-switcher-control:hover { border-color: var(--mud-palette-primary); }
.law-toc-title.mud-typography {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.law-toc-switcher-chevron { flex-shrink: 0; color: var(--mud-palette-text-secondary); }
.law-toc-switcher-active { background: rgba(0, 0, 0, 0.05); font-weight: 600; }
/* Pinned tree footer with the collapse-all action */
.law-toc-footer { flex-shrink: 0; display: flex; align-items: stretch; gap: 6px; border-top: 1px solid #e5e7eb; padding: 6px 8px; }
.law-toc-footer .mud-tooltip-root { display: flex; }
.law-toc-collapse-all {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}
.law-toc-collapse-all:hover { background: rgba(0, 0, 0, 0.04); color: var(--mud-palette-text-primary); }
.law-toc-collapse-all .mud-icon-root { font-size: 15px; }
/* Keyboard-shortcut legend (EASA explorer): a footer icon whose tooltip lists the keys */
.law-toc-keys {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    cursor: default;
}
.law-toc-keys:hover, .law-toc-keys:focus-visible { background: rgba(0, 0, 0, 0.04); color: var(--mud-palette-text-primary); }
.law-toc-keys .mud-icon-root { font-size: 16px; }
.law-toc-keys-legend {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
}
.law-toc-keys-legend kbd {
    font: inherit;
    padding: 0 4px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
}
/* Regulatory-hierarchy breadcrumbs can carry long heading titles — truncate per crumb */
.bl-sub-header-breadcrumbs .mud-breadcrumb-item { max-width: 260px; overflow: hidden; }
.bl-sub-header-breadcrumbs .mud-breadcrumb-item a,
.bl-sub-header-breadcrumbs .mud-breadcrumb-item span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── /Law/Catalog: compact flat regulation lists ────────────────────── */
.law-catalog { max-width: 1080px; margin: 0 auto; }
.law-catalog-list {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background-color: #FFFFFF;
    overflow: hidden;
}
.catalog-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.catalog-row + .catalog-row { border-top: 1px solid #EEF0F2; }
/* Added rows navigate to the regulation on click; same hover language as the picker cards */
.catalog-row--link { cursor: pointer; transition: background-color 0.15s ease; }
.catalog-row--link:hover { background-color: #F0F7FF; }
.catalog-row-main { flex: 1; min-width: 0; }
.catalog-row-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Row-menu items live in the popover tree (hence not scoped to .catalog-row); the default
   icon size renders the fa glyphs a touch large beside the small labels */
.catalog-menu-item .mud-icon-root { font-size: 1.1rem; }
/* Even Size.Small MudButtons keep Material's 64px min-width and roomy padding — too heavy
   beside a two-line compact row. Two classes on purpose: app.css loads BEFORE
   MudBlazor.min.css (App.razor), so a single-class rule here loses to .mud-button by order. */
.mud-button-root.catalog-add-btn { min-width: 0; padding: 2px 14px; line-height: 1.5; }
/* A busy row's spinner + text must never be squeezed by a long name: the status keeps its
   width (flex: none) and the title gives way instead (the main column already shrinks). */
.catalog-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row-status { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
.catalog-row--pending { cursor: default; }
@media (max-width: 600px) {
    .catalog-row { flex-wrap: wrap; }
    .catalog-row-status { flex-basis: 100%; }
}

/* ── EASA law viewer (body-block rendering) ─────────────────────────── */
/* Reading measure for a rule view: a full-pane line is hard to track back to the next
   line's start on a wide monitor. Owned by a wrapper rather than by the body itself, so
   the title banner, the source/applicability captions and the related-guidance list all
   share the column's width and left edge.
   --easa-outer is the column's own outer width, which the wide-table breakout below
   reclaims the slack around. */
.easa-measure {
    --easa-measure: 840px;
    --easa-outer: var(--easa-measure);
    max-width: var(--easa-measure);
    margin: 0 auto;
    scroll-margin-top: 16px; /* pane pan-to-top lands with breathing room */
}
/* A rule carrying AMC/GM badges needs 76px somewhere for the rail. On a pane with no room
   to spare it comes out of the column, widened by the same amount so the text still wraps
   at the measure (box-sizing is border-box globally, MudBlazor's reset). Keyed off the
   body's marker class because EasaContentBody is the only component that can see whether
   any block anchors a badge. */
/* Direct child on purpose: a body nested inside an inline guidance section must not
   widen the column — its rail renders in-card instead. */
.easa-measure:has(> .easa-body--with-gutter) {
    --easa-outer: calc(var(--easa-measure) + 76px);
    max-width: var(--easa-outer);
    padding-right: 76px;
}
/* Once the pane can hold the rail in its own slack, stop reserving it inside the column:
   the badged column is exactly the measure again, so the text starts in the same place
   whether or not a rule carries badges — the badges must not count towards the centring.
   992px is the measure plus a rail's width of slack on each side; below it the slack
   cannot take the rail and the reservation above still stands. max-width tracks
   --easa-outer from the rule above, custom properties resolving after the cascade. */
@container (min-width: 992px) {
    .easa-measure:has(> .easa-body--with-gutter) {
        --easa-outer: var(--easa-measure);
        padding-right: 0;
    }
}
/* Landscape-page tables span the content pane: squeezed into the prose measure their
   column proportions are unreadable. The pull is the measure's own side gap, which only
   the pane knows — hence the container query on .ear-content-measure. It collapses to 0
   once the pane is narrower than the measure, so nothing overflows on small viewports. */
.easa-block--table-wide {
    margin-inline: calc(-1 * max(0px, (100cqw - var(--easa-outer)) / 2));
}
.easa-block {
    padding: 1px 4px;
    margin-bottom: 4px;
    font-size: 0.9375rem; /* a step above body2: long-form legal reading */
    line-height: 1.6;
    transition: background-color 120ms ease-in-out;
}
/* Fixed-width spacer replacing the label/text tab separator */
.easa-tab {
    display: inline-block;
    width: 1.25em;
}
/* Hanging indent for labelled subsections: wrapped lines align under the text */
.easa-block--labeled {
    padding-left: 2.6em;
    text-indent: -2.6em;
}
.easa-block--labeled .easa-label {
    display: inline-block;
    min-width: 1.35em;
    text-indent: 0;
}
.easa-block--bullet {
    padding-left: 1.2em;
    text-indent: -1.2em;
}
/* Tab-tabulated definition rows (ANNEX VI acronym list): a fixed-width term column
   keeps every definition starting at the same offset, wrapped lines included */
.easa-block--dl {
    padding-left: 8em;
    text-indent: -8em;
}
.easa-block--dl .easa-dl-term {
    display: inline-block;
    min-width: 8em;
    text-indent: 0;
}

/* ── EASA content-type colour coding (official Easy Access Rules scheme:
      IR blue, CS navy, AMC orange, GM green; cover articles purple;
      remaining Cover Regulation content plain) ── */
.easa-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 34px;
    padding: 1px 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.5;
}
/* --easa-type-color mirrors the background so accents (the rule-header edge) can pick
   the provision colour up without a second palette */
.easa-type--ir       { background: #0083bf; --easa-type-color: #0083bf; } /* Implementing Rule */
.easa-type--dr       { background: #0083bf; --easa-type-color: #0083bf; } /* delegated rules ride with IR */
.easa-type--cs       { background: #203162; --easa-type-color: #203162; } /* Certification Specification */
.easa-type--amc      { background: #feb74b; --easa-type-color: #feb74b; } /* Acceptable Means of Compliance */
.easa-type--gm       { background: #00cf86; --easa-type-color: #00cf86; } /* Guidance Material */
.easa-type--appendix { background: #607D8B; --easa-type-color: #607D8B; }
.easa-type--art      { background: #005a8e; --easa-type-color: #005a8e; } /* cover-regulation Articles */
.easa-type--misc     { background: #9E9E9E; --easa-type-color: #9E9E9E; } /* content outside the IR/DR/CS/AMC/GM/Appendix/ART scheme */
.easa-type--plain    { background: transparent; color: inherit; }
/* Rule header in the content panel: badge + citation above a standard heading, with the
   provision colour as a left accent instead of the old solid bar. Declared after the
   .easa-type--* colours, so the transparent background wins on the shared element. */
.easa-title-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 2px 0 2px 12px;
    margin-bottom: 10px;
    border-left: 4px solid var(--easa-type-color, transparent);
    background: transparent;
    color: inherit;
}
.easa-rule-meta { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.easa-rule-tag { font-size: 13px; font-weight: 600; letter-spacing: 0.2px; color: var(--mud-palette-text-secondary); }
.easa-rule-title.mud-typography { font-weight: 600; line-height: 1.3; }
.easa-rule-actions { display: inline-flex; gap: 2px; margin-left: auto; }
/* Legal-status chips under the rule title: binding nature, applicability, amendment
   status. Future applicability keeps the app's purple convention. */
.easa-status-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.easa-status-chip {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.easa-status-chip--binding { border-color: rgba(0, 131, 191, 0.45); background: rgba(0, 131, 191, 0.07); color: #006a9b; }
.easa-status-chip--now { border-color: rgba(0, 129, 79, 0.4); background: rgba(0, 207, 134, 0.08); color: #00814F; }
.easa-status-chip--future { border-color: rgba(162, 94, 171, 0.45); background: rgba(162, 94, 171, 0.08); color: #A25EAB; }
/* Cover Regulation content carries no provision colour */
.easa-title-banner.easa-type--plain {
    border-left-color: transparent;
    padding-left: 0;
}
/* Inline [applicable until/from …] applicability notes, as printed in the PDF */
.easa-block--marker {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}
/* GeneralAviation character style: text applicable only from a future date, printed
   purple in the official PDF (colour A25EAB in the source XML). Declared after the
   marker rule so GA-styled markers render purple italics, not grey. */
.easa-block--future {
    color: #A25EAB;
}
/* Inline cross-reference to another rule — IR blue, underlined like a hyperlink */
.easa-ref-link {
    color: #007FBA;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.easa-ref-link:hover {
    color: #005f8c;
}
/* Sub-header of one part of a per-paragraph split rule, e.g. "(a) Accountable manager" */
.easa-section-title {
    font-weight: 600;
    margin: 12px 0 4px;
}
.easa-table {
    border-collapse: collapse;
    margin: 6px auto; /* centred in the text column, like the official PDF layout */
    max-width: 100%;
}
/* The source declares w:tblLayout=fixed alongside its w:tblGrid; honour both. Under auto
   layout the browser has to satisfy each <col> percentage AND each column's min-content,
   so a tick column declared at 3.9% that needs 51px drags the whole table out to ~1300px,
   and max-width cannot pull it back — max-width never crosses the min-content floor.
   Scoped to gridded tables: one without a colgroup has no proportions to honour and keeps
   its shrink-to-fit width. */
.easa-table--gridded {
    table-layout: fixed;
    width: 100%;
}
.easa-table-caption, .easa-table-subtitle { text-align: center; }
.easa-table th, .easa-table td {
    border: 1px solid rgba(0, 0, 0, 0.25);
    padding: 4px 8px;
    vertical-align: top;
    white-space: pre-wrap;
    /* Fixed layout hands a column its declared share, so a token too long for that share
       has to break rather than spill out of the cell. */
    overflow-wrap: break-word;
}
.easa-table th { background: rgba(0, 0, 0, 0.05); font-weight: 600; }
.easa-table--layout th, .easa-table--layout td { border: none; }
/* Style-resolved tables: borders come from the source's table style via the CSS
   variable set inline (easaTable = white gutters between grey cells, easaForm =
   black hairlines); cell fills arrive inline, so the generic th tint steps aside */
.easa-table--styled th, .easa-table--styled td { border: var(--easa-tbl-border, 1px solid rgba(0, 0, 0, 0.25)); }
.easa-table--styled th { background: none; }
/* Header rows pin while long syllabus tables scroll. Sticky sits on the thead
   element, not per-cell top:0 — per-cell offsets pin both rows of a two-row
   header at the same height, so the second row paints over the first. Applied
   only via --pin, toggled by easa-view.js when the table is taller than its
   scroll pane: a table that fits entirely on screen never pins. */
.easa-table--pin thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface, #fff);
}
/* Cells still need opaque paint of their own — the thead background alone lets
   body rows show through unfilled header cells while they slide underneath. */
.easa-table--pin thead th, .easa-table--pin thead td {
    background-color: var(--mud-palette-surface, #fff);
}
/* The source separated these blocks with an empty paragraph (definition lists) */
.easa-block--spaced { margin-top: 12px; }
/* ── Inline AMC/GM sections under a rule ── */
.easa-guidance-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
/* Root carries the .easa-type--* class for --easa-type-color; background/colour reset
   here wins the equal-specificity race by declaration order, like the title banner. */
.easa-guidance-section {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    overflow: hidden;
    scroll-margin-top: 12px;
}
.easa-guidance-section--focused {
    box-shadow: 0 0 0 2px var(--easa-type-color, var(--mud-palette-primary));
    border-color: transparent;
}
/* Arrival pulse: widens the focus ring briefly, then settles to the class value */
.easa-guidance-flash { animation: easa-guidance-pulse 1.6s ease-out 1; }
@keyframes easa-guidance-pulse {
    0%, 35% { box-shadow: 0 0 0 5px var(--easa-type-color, var(--mud-palette-primary)); }
}
.easa-guidance-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-left: 4px solid var(--easa-type-color, transparent);
    cursor: pointer;
}
.easa-guidance-header:hover { background: rgba(0, 0, 0, 0.04); }
.easa-guidance-title.mud-typography { flex: 1 1 0; min-width: 0; font-weight: 600; }
.easa-guidance-copy { flex-shrink: 0; }
.easa-guidance-chevron { flex-shrink: 0; color: var(--mud-palette-text-secondary); }
.easa-guidance-body { padding: 8px 12px 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
/* Badge rails inside a section stay within the card instead of the page-level
   margin-pull into the measure's reserved padding */
.easa-guidance-body .easa-block--with-rail { margin-right: 0; grid-template-columns: minmax(0, 1fr) auto; }
/* "AMC to SERA.xxxx" parent link and "Back to SERA.xxxx" inline-ref return link,
   both above the title banner and sharing one look */
.easa-parent-link, .easa-back-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    color: var(--mud-palette-primary);
    font-size: var(--mud-typography-body2-size);
}
.easa-parent-link:hover, .easa-back-link:hover { text-decoration: underline; }
/* ── Guidance-reference gutter: AMC/GM badges beside the paragraph they address ── */
/* .easa-body--with-gutter carries no box properties of its own — it is a marker saying
   "some paragraph on this page anchors a badge", which .easa-measure:has() above reads to
   find the rail its 76px, either from the column on a cramped pane or from the pane's own
   slack when there is room. Resolving it on the column rather than here is what keeps the
   banner and captions aligned with the text; every row still wraps at the same width. */
/* Badged rows: text column + badge rail. The rail is a real grid column, so stacked
   badges grow the row's height instead of painting over the following paragraphs. */
.easa-block--with-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px;
    column-gap: 8px;
    margin-right: -76px; /* the rail lives outside the text column: in the column's reserved
                            right padding on a cramped pane, in the pane's slack when wide */
}
.easa-ref-gutter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-content: flex-start;
    text-indent: 0;         /* undo the labelled block's hanging-indent inheritance */
    line-height: normal;
}
.easa-ref-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.6;
    cursor: pointer;
    opacity: 0.85;
}
.easa-ref-badge:hover { opacity: 1; }
/* "+N" chip expanding a collapsed rail with many badges */
.easa-ref-more { background: #757575; }
/* Hover preview card inside the badge tooltip */
.easa-ref-preview { max-width: 360px; text-align: left; }
.easa-ref-preview-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-weight: 600;
}
/* Paragraph(s) the hovered AMC/GM addresses (gutter badge, related row or
   middle-column child row) — soft IR-blue tint, transient cue only */
.easa-block--ref-highlight {
    background-color: rgba(0, 127, 186, 0.08);
    border-radius: 4px;
}
/* Arrival flash for subsections cited by an inline-reference deep link (easasub):
   holds the tint briefly, then fades. Runs once — the class staying on the
   element afterwards is harmless. */
.easa-block--ref-flash {
    animation: easa-ref-flash 2.4s ease-out 1;
    border-radius: 4px;
}
@keyframes easa-ref-flash {
    0%, 35% { background-color: rgba(0, 127, 186, 0.18); }
    100%    { background-color: transparent; }
}
/* Breathing room above the scrolled-to block at the pane's top edge */
.easa-flash-target { scroll-margin-top: 8px; }
/* Prev/next requirement pager at the foot of a rule page */
.easa-rule-pager { display: flex; justify-content: space-between; gap: 12px; }
.easa-rule-pager-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    cursor: pointer;
    max-width: 48%;
}
.easa-rule-pager-link:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.25); }
.easa-rule-pager-text { display: flex; flex-direction: column; min-width: 0; }
.easa-rule-pager-link--next .easa-rule-pager-text { text-align: right; }
.easa-rule-pager-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}
.easa-rule-pager-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hover preview card for inline cross-reference links: fixed-position, inert (it must
   never swallow the hover that opened it), shares the badge-preview inner layout */
.easa-ref-hover-card {
    position: fixed;
    z-index: 1500;
    width: 380px;
    max-width: calc(100vw - 24px);
    padding: 10px 12px;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
/* Paragraph permalink: a reveal-on-hover copy-link trailing the labelled subsection's
   text, GitHub-heading-anchor style. text-indent resets the labelled block's hanging
   indent so the icon never shifts a wrapped line. */
.easa-para-link {
    display: inline-block;
    margin-left: 6px;
    text-indent: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
    color: var(--mud-palette-text-secondary);
}
.easa-block:hover .easa-para-link { opacity: 0.65; }
.easa-para-link:hover { opacity: 1; color: var(--mud-palette-primary); }
.easa-para-link .mud-icon-root { font-size: 15px; width: 15px; height: 15px; vertical-align: text-bottom; }


.chapter-rows {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    cursor: pointer;
    border-radius: 4px;
    height: 30px;
    font-size: inherit;
    white-space: nowrap;
    overflow: hidden;
}

.chapter-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    cursor: pointer;
    border-radius: 4px;
    height: 30px;
    font-size: inherit;
    white-space: nowrap;
    overflow: hidden;
}
.chapter-row:hover {        background: rgba(0,0,0,0.07);}
.chapter-row--selected {    background: var(--mud-palette-primary);    color: #fff;}
.chapter-row--selected:hover {    background: var(--mud-palette-primary);    color: #fff;}
.chapter-row--selected .mud-icon-root {    color: #fff !important;}

.chapter-row-deleted {
    text-decoration: line-through;
}

.chapter-button {
    margin: 4px;
}
/* TOC page — non-editable chapter editor; ProseMirror cursor is suppressed */
.toc-page-content .ProseMirror {
    cursor: default;
    user-select: text;
}

/* Locked TOC section — rendered directly by SectionNodeView, not by ProseMirror content */
.editor-section-card--locked {
    background: transparent;
    cursor: default;
}

.editor-section-card--toc {
    background: transparent;
    cursor: default;
    padding: 0 24px;
}

.toc-locked-content {
    padding: 4px 0;
}

.toc-locked-entry {
    display: flex;
    align-items: baseline;
    padding-bottom: 6px;
    line-height: 1.5;
    color: #1a1a1a;
}

.toc-locked-entry--link {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.toc-locked-entry--link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.toc-locked-entry--link:hover .toc-locked-name {
    text-decoration: underline;
}

.toc-locked-index {
    min-width: 44px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.toc-locked-name {
    flex: 1;
}

.toc-locked-page {
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.45);
}

.toc-locked-empty {
    color: rgba(0, 0, 0, 0.45);
    margin: 0;
}

/* LEP section card */
.editor-section-card--lep {
    background: transparent;
    cursor: default;
    padding: 0 24px;
}

.lep-preview-table-header,
.lep-preview-row {
    display: flex;
    align-items: baseline;
    line-height: 1.4;
    color: #1a1a1a;
}

.lep-preview-table-header {
    font-weight: 700;
    padding-bottom: 4px;
}

.lep-preview-col-page {
    flex: 0 0 57px;
    font-variant-numeric: tabular-nums;
}

.lep-preview-col-chapter {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lep-preview-col-rev {
    flex: 0 0 91px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lep-preview-divider {
    height: 0.5px;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 0 6px;
}

.lep-preview-row {
    padding-bottom: 4px;
}

.lep-preview-row--link {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.lep-preview-row--link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.lep-preview-row--link:hover .lep-preview-col-chapter {
    text-decoration: underline;
}

.lep-preview-rows {
    display: flex;
    flex-direction: column;
}

/* MEL section — EASA CS-MMEL staircase header + editable data table */
.editor-section-card--mel {
    padding: 0 24px; /* match horizontal text margins of regular sections */
    overflow: hidden;
}

/* Constrain both the static header and body to the card's content width */
.editor-section--mel .mel-static-header,
.editor-section--mel .section-body {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--manual-mel-family, inherit);
    font-weight: var(--manual-mel-weight, 400);
    font-size: var(--manual-mel-size, 13.33px); /* explicit: TipTap NodeViewContent breaks inheritance */
}

/* Static staircase column header (non-editable) */
/* One visual field: floated chapter dropdown (sized to the SELECTED value, not the longest
   option) with the free text flowing around it — continuation lines return to the left edge. */
.mel-title-row {
    display: flow-root; /* contain the float */
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #000;
    border-bottom: none;
    background: #fff;
    min-height: 1.6em;
}
/* Width mirror: the in-flow hidden ::after holds the selected label and is the ONLY thing
   sizing the wrapper; the select is absolutely positioned over it so its intrinsic width
   (= its longest option) cannot influence layout. */
/* The float must be EXACTLY one text line tall (vertical spacing via margin, not padding),
   otherwise the second text line still overlaps it vertically and gets pushed right —
   a single line break must already return to the left edge. */
.mel-title-select-wrap {
    float: left;
    position: relative;
    max-width: 100%;
    margin-top: 4px; /* aligns with .mel-title-text's top padding */
}
.mel-title-select-wrap::after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre;
    display: block;
    padding: 0 26px 0 6px; /* right side mirrors select padding + dropdown arrow */
    font: inherit;
    font-weight: bold; /* keep the width mirror in sync with the bold select */
}
.mel-title-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 0 6px;
    font: inherit;
    font-weight: bold;
    background: #fff;
    outline: none;
    cursor: pointer;
}
.mel-title-text {
    display: block;
    padding: 4px 6px;
    min-height: 1.6em;
    font: inherit;
    background: transparent;
    outline: none;
}
.mel-title-text:empty::before {
    content: attr(data-placeholder);
    color: #b0b8c1; /* same placeholder grey as every other fill-in field */
    pointer-events: none;
}
.mel-static-header table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: inherit;
    font-family: inherit;
}

.mel-static-header th {
    background: #fff;
    font-weight: bold;
    cursor: default;
    user-select: none;
    pointer-events: none;
    padding: 4px;
    border: 1px solid #000;
    vertical-align: top;
    text-align: left;
}

/* Empty staircase cells in rows 1–3: suppress internal horizontal lines */
.mel-static-header table tr:not(:last-child) th:empty {
    border-top: hidden;
    border-bottom: hidden;
}

/* Empty staircase cells in row 4: suppress top border (adjacent to row-3 text cells) */
.mel-static-header table tr:last-child th:empty {
    border-top: hidden;
}

/* No separator line between header and data rows:
   - tr:last-child th covers row-4 cells (col2-5)
   - th[rowspan] covers the col1 rowspan=4 cell (lives in tr:first-child) */
.mel-static-header table tr:last-child th,
.mel-static-header table th[rowspan] {
    border-bottom: none;
}

/* Editable data table */
.editor-section--mel .section-body table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: inherit;
    font-family: inherit;
}

/* EASA 6-column: col1a(10%) item no. + col1b(20%) system name = visually one col | cat(7%) | inst(7%) | req(7%) | remarks(49%) */
/* !important beats TipTap Table extension's inline col styles (set by columnResizing plugin) */
.editor-section--mel .section-body table col:nth-child(1) { width: 10% !important; min-width: 0 !important; }
.editor-section--mel .section-body table col:nth-child(2) { width: 20% !important; min-width: 0 !important; }
.editor-section--mel .section-body table col:nth-child(3) { width: 7%  !important; min-width: 0 !important; }
.editor-section--mel .section-body table col:nth-child(4) { width: 7%  !important; min-width: 0 !important; }
.editor-section--mel .section-body table col:nth-child(5) { width: 7%  !important; min-width: 0 !important; }
.editor-section--mel .section-body table col:nth-child(6) { width: 49% !important; min-width: 0 !important; }
.editor-section--mel .section-body td:nth-child(1) { width: 10%; border-right: hidden; }
.editor-section--mel .section-body td:nth-child(2) { width: 20%; }
.editor-section--mel .section-body td:nth-child(3) { width: 7%;  text-align: center; }
.editor-section--mel .section-body td:nth-child(4) { width: 7%;  text-align: center; }
.editor-section--mel .section-body td:nth-child(5) { width: 7%;  text-align: center; }
.editor-section--mel .section-body td:nth-child(6) { width: 49%; }

.editor-section--mel .section-body td {
    padding: 4px 6px;
    border: 1px solid #000;
    vertical-align: top;
    background: #fff;
    font-size: 13px; /* explicit — table CSS inheritance is unreliable in some browsers */
}

/* Hide legacy th header rows stored in old MEL sections */
.editor-section--mel .section-body th,
.editor-section--mel .section-body tr:has(th) {
    display: none;
}

/* Placeholder: an empty cell names the value it wants, the way a MEL2 field does, and
   clears while it holds the caret. The active cell is marked by the melActiveRow plugin —
   :focus-within cannot be used, because ProseMirror keeps contenteditable on the editor
   root rather than on the cell, so it never matches here. */
.editor-section--mel .section-body td:not(.mel-active-cell) > p:only-child:empty::before,
.editor-section--mel .section-body td:not(.mel-active-cell) > p:only-child:has(> br:only-child)::before {
    content: var(--mel-cell-placeholder, '-');
    color: #b0b8c1;
    pointer-events: none;
    user-select: none;
}
.editor-section--mel .section-body td:nth-child(1) { --mel-cell-placeholder: '24-17'; }
.editor-section--mel .section-body td:nth-child(2) { --mel-cell-placeholder: 'Item name'; }
.editor-section--mel .section-body td:nth-child(3) { --mel-cell-placeholder: 'B'; }
.editor-section--mel .section-body td:nth-child(4) { --mel-cell-placeholder: '1'; }
.editor-section--mel .section-body td:nth-child(5) { --mel-cell-placeholder: '0'; }
.editor-section--mel .section-body td:nth-child(6) { --mel-cell-placeholder: 'Remarks or exceptions'; }

/* Suppress browser default paragraph margins inside MEL data cells (Bootstrap adds margin-bottom: 1rem) */
.editor-section--mel .section-body td p {
    margin: 0;
}

/* Force center-align on paragraph content in centre columns (cols 3–5) */
.editor-section--mel .section-body td:nth-child(3) p,
.editor-section--mel .section-body td:nth-child(4) p,
.editor-section--mel .section-body td:nth-child(5) p {
    text-align: center;
}

/* Suppress top border on first data row — static header provides the separator */
.editor-section--mel .section-body table tr:first-child td {
    border-top: none;
}

/* ── MEL row-actions footer — docked to the bottom edge of the card ──────── */

.mel-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    /* Full-bleed strip: cancel the card's 24px side padding (card has overflow:hidden) */
    margin: 8px -24px 0;
    padding: 4px 12px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.mel-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    font-size: 11.5px;
    font-family: inherit;
    line-height: 1;
    color: #4b5563;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.mel-row-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.mel-row-btn:disabled {
    color: #b6bcc6;
    cursor: default;
}

.mel-row-btn:not(:disabled):hover {
    background: #fff;
    border-color: #e5e7eb;
    color: #111827;
}

.mel-row-btn-delete:not(:disabled):hover {
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.2);
    color: #dc2626;
}

.mel-row-actions-status {
    margin-left: auto;
    padding-left: 8px;
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

/* ── Fill-in field treatment — shared by MEL and MEL2 ────────────────────────
   Every surface an author types a value into behaves identically: quiet until
   pointed at, a grey rule on hover, an indigo rule and a pale wash while it holds
   the caret. MEL's cells are ProseMirror content and MEL2's values are
   contentEditable spans, so they cannot share a class — they share these rules.
   Keep the three selector groups in step; splitting them is how the two formats
   drifted apart in the first place. */

.mel2-field,
.mel-title-text,
.editor-section--mel .section-body td > p {
    border-bottom: 1px solid transparent;
    outline: none;
}

.mel2-field:hover,
.mel-title-text:hover,
.editor-section--mel .section-body td:hover > p {
    border-bottom-color: #e5e7eb;
}

.mel2-field:focus,
.mel-title-text:focus,
.editor-section--mel .section-body td.mel-active-cell > p {
    border-bottom-color: #6366f1;
}

.mel2-field:focus,
.mel-title-text:focus,
.editor-section--mel .section-body td.mel-active-cell {
    background: #f8faff;
}

/* ── MEL2 section — fixed dispatch-item format ───────────────────────────────
   The editor card mirrors what SectionHtmlRenderer.RenderMel2 prints, so the author
   is looking at the printed shape while filling it in. The diff/read-only views get
   the stored HTML instead and only need the shared .editor-section--mel2 sizing. */

.editor-section-card--mel2 {
    padding: 0 24px; /* match horizontal text margins of regular sections */
}

.editor-section--mel2 .mel2-body,
.editor-section--mel2 > .editor-section-card > * {
    font-family: var(--manual-mel-family, inherit);
    font-size: var(--manual-mel-size, 13.33px);
}

.mel2-body {
    padding: 4px 0 10px;
}

.mel2-chapter-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.mel2-chapter-prefix {
    font-weight: bold;
}

/* The chapter is changed in place from a dropdown, as in a MEL title row. Same width-mirror
   trick: ::after reproduces the current label so the select is only as wide as its value. */
.mel2-chapter-select-wrap {
    position: relative;
    max-width: 100%;
}

.mel2-chapter-select-wrap::after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre;
    display: block;
    padding: 0 26px 0 4px; /* right side mirrors select padding + dropdown arrow */
    font: inherit;
    font-weight: bold; /* keep the width mirror in sync with the bold select */
}

.mel2-chapter-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 0 4px;
    font: inherit;
    font-weight: bold;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.mel2-item-row,
.mel2-intro {
    margin: 2px 0 0;
}

.mel2-table {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: inherit;
}

.mel2-table th,
.mel2-table td {
    width: 25%;
    padding: 3px 4px;
    border: 1px solid #000;
    text-align: center;
    background: #fff;
}

.mel2-table th {
    font-weight: bold;
    user-select: none;
}

.mel2-conditions {
    margin-top: 8px;
}

.mel2-condition {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* Right-aligned like the printed form, so the text column starts at the same place
   whether the marker is "a." or "aa." */
.mel2-condition-letter {
    flex: 0 0 auto;
    min-width: 1.6em;
    text-align: right;
    user-select: none;
}

.mel2-field--condition {
    flex: 1 1 auto;
}

.mel2-condition-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s, color 0.1s, background 0.1s;
}

.mel2-condition-remove svg {
    width: 12px;
    height: 12px;
}

.mel2-condition:hover .mel2-condition-remove,
.mel2-condition-remove:focus-visible {
    opacity: 1;
}

.mel2-condition-remove:hover {
    background: #fef2f2;
    color: #dc2626;
}

.mel2-condition-add {
    margin-top: 4px;
    padding: 2px 7px;
    font-size: 11.5px;
    font-family: inherit;
    color: #4b5563;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
}

.mel2-condition-add:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #111827;
}

/* The fill-in surfaces. Deliberately quiet — an underline on hover/focus is enough to
   say "this part is yours" without printing a form onto the page. */
/* Hover/focus rules live with the shared MEL/MEL2 field treatment further up. */
.mel2-field {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 2px;
    white-space: pre-wrap;
}

.mel2-field:empty::before {
    content: attr(data-placeholder);
    color: #b0b8c1;
    pointer-events: none;
}

.mel2-field--item-number {
    min-width: 3.5em;
}

.mel2-field--item-title {
    min-width: 8em;
}


/* Used for maual review diff */
ins {
    background-color: #cfc;
    text-decoration: none;
}

del {
    color: #999;
    background-color: #FEC8C8;
}

/* ── Diff view content — mirrors DocNodesToQuestPdf styling exactly ─────── */
.diff-view-content {
    flex: 1; /* fills remaining height so footer is pinned to bottom */
    padding: 8px 48px; /* matches PDF 36pt (48px) side margins */
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}

/* Paragraphs: 2pt (2.67px) bottom spacing, no top margin (matches PDF PaddingBottom(2)) */
.diff-view-content p {
    margin-top: 0;
    margin-bottom: 2.67px;
}

/* Empty paragraphs: placeholder height (body size × 1.4, matches PDF spacer) */
.diff-view-content p:empty {
    min-height: calc(var(--manual-body-size, 13.33px) * 1.4);
    margin: 0;
}

/* Headings are styled once for all surfaces on .chapter-a4-page h1–h6 above. */

/* Lists: 12pt (16px) indent per level (ListIndentPoints = 12pt), disc and decimal markers */
.diff-view-content ul,
.diff-view-content ol {
    padding-left: 16px;
    margin: 0;
}
.diff-view-content ul { list-style-type: disc; }
.diff-view-content ol { list-style-type: decimal; }
.diff-view-content li { margin: 0; padding: 0; font-size: inherit; }

/* Nested lists add another 16px indent level */
.diff-view-content li ul,
.diff-view-content li ol {
    padding-left: 16px;
}

/* Table: 0.5px border collapse (matches PDF Border(0.5f) / Padding(4)) */
.diff-view-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 5.33px 0;
    font-size: inherit;
}
.diff-view-content td,
.diff-view-content th {
    border: 0.5px solid #000;
    padding: 4px;
    font-size: inherit;
    vertical-align: top;
}
.diff-view-content th {
    font-weight: bold;
}

/* HR: 0.5px solid grey (matches PDF LineHorizontal(0.5f) color #9ca3af) */
.diff-view-content hr {
    border: none;
    border-top: 0.5px solid #9ca3af;
    margin: 5.33px 0;
}

/* Blockquote: 3px left border #9ca3af, 8px left pad, 2px top/bottom (matches PDF) */
.diff-view-content blockquote {
    border-left: 3px solid #9ca3af;
    padding: 2px 0 2px 8px;
    margin: 2.67px 0;
}

/* Code block: grey bg, 8px pad, Courier New (matches PDF RenderCodeBlock) */
.diff-view-content pre {
    background: #f3f4f6;
    padding: 8px;
    font-size: inherit;
    overflow-x: auto;
}
.diff-view-content pre code {
    font-family: 'JetBrains Mono', "Courier New", Courier, monospace;
    font-size: inherit;
    background: none;
    padding: 0;
}

/* Inline code: matches PDF FontFamily("Courier New").FontSize(body - 0.5pt) */
.diff-view-content code {
    font-family: 'JetBrains Mono', "Courier New", Courier, monospace;
    font-size: var(--manual-code-size, 12.67px);
}

/* Links: indigo + underline (matches PDF FontColor("#4f46e5").Underline()) */
.diff-view-content a {
    color: #4f46e5;
    text-decoration: underline;
}

/* Images: constrained width */
.diff-view-content img {
    max-width: 100%;
}

/* Info panels (matches PDF RenderInfoPanel with type-specific colours) */
.diff-view-content .info-panel,
.diff-view-content [data-info-panel] {
    border-left: 4px solid;
    padding: 10px;
    margin: 5.33px 0;
    font-family: var(--manual-info-panel-family, inherit);
    font-weight: var(--manual-info-panel-weight, 400);
    font-size: var(--manual-info-panel-size, 13.33px);
}
.diff-view-content .info-panel > strong {
    display: block;
    font-size: var(--manual-info-panel-headline-size, 14.67px);
    margin-bottom: 4px;
}
.diff-view-content [data-info-panel]::before {
    content: attr(data-info-panel-headline);
    display: block;
    font-weight: bold;
    font-size: var(--manual-info-panel-headline-size, 14.67px);
    margin-bottom: 4px;
}
.diff-view-content .info-panel-info,
.diff-view-content [data-info-panel][data-info-panel-type="info"]    { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.diff-view-content .info-panel-success,
.diff-view-content [data-info-panel][data-info-panel-type="success"] { background: #f0fdf4; border-color: #22c55e; color: #166534; }
.diff-view-content .info-panel-warning,
.diff-view-content [data-info-panel][data-info-panel-type="warning"] { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.diff-view-content .info-panel-error,
.diff-view-content .info-panel-danger,
.diff-view-content [data-info-panel][data-info-panel-type="error"],
.diff-view-content [data-info-panel][data-info-panel-type="danger"]  { background: #fef2f2; border-color: #ef4444; color: #991b1b; }

/* Attachment links in diff view */
.diff-view-content .attachment-link,
.diff-view-content .attachment-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0.5px solid #d1d5db;
    padding: 6px 8px;
    font-size: inherit;
    color: #0055CC;
    text-decoration: none;
}
.diff-view-content .attachment-label {
    color: inherit;
}

/* Section node: gap between sections — matches editor .node-section margin-bottom */
.diff-view-content .node-section {
    position: relative; /* contain absolutely-positioned law-ref tags */
    display: block;
    margin-bottom: 28px !important;
}

/* Status indicator via box-shadow — does not affect layout, indicator sits in the left margin.
   Scoped to .diff-view-content (DiffPage wrapper) so it never touches the live editor, and
   targeted at .node-section — the class DiffSectionNode actually renders. */
.diff-view-content .node-section:has(.section-modified) { box-shadow: -4px 0 0 0 var(--mud-palette-warning); }
.diff-view-content .node-section:has(.section-inserted) { box-shadow: -4px 0 0 0 lawngreen; }
.diff-view-content .node-section:has(.section-deleted)  { box-shadow: -4px 0 0 0 #ff0000; }

/* Strip editor card chrome — keep vertical padding to match editor section card */
.diff-view-content .editor-section-card {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 6px 0; /* matches editor-section-card top/bottom padding; horizontal handled by .diff-view-content */
    transition: none;
}

/* Diff page: remove dashed header/footer indicator lines and zone labels */
.diff-page .a4-header-preview { border-bottom: none; }
.diff-page .a4-footer-preview { border-top: none; }
.diff-page .a4-zone-label    { display: none; }

.section-changed {
    border-color: #757575;
}

.manual-readonly-view .node-section:has(.section-changed) { box-shadow: -4px 0 0 0 #757575; }

.section-modified {
    border-color: var(--mud-palette-warning);
}

.section-deleted {
    border-color: #ff0000;
}

.section-unchanged {
    border-color: lightgray;
}

.section-inserted {
    border-color: lawngreen;
}


.section-law-ref-inserted {
    border-color: lawngreen;
}

.section-law-ref-modified {
    border-color: var(--mud-palette-warning);
}

.section-law-ref-unchanged {
    border-color: lightgray;
}

.section-law-ref-deleted {
    border-color: #ff0000;
    text-decoration: line-through;
}

.chapter-changes {
    background: rgba(217, 119, 6, 0.15);
    border-radius: 4px;
    color: var(--mud-palette-warning);
}

.submitter-note {
    border: solid 2px;
    border-color: var(--mud-palette-primary);
    border-radius: 4px;
    padding: 4px
}

.review-bar-expansion .mud-expand-panel-header,
.review-bar-expansion .mud-expansion-panel-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.review-bar-expansion .mud-expand-panel-content,
.review-bar-expansion .mud-expansion-panel-content,
.review-bar-expansion .mud-expansion-panel-content-inner,
.review-bar-expansion .mud-expand-panel-body,
.review-bar-expansion .mud-expansion-panel-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding: 0 !important;
}

/* MudBlazor caps panel width; let the change groups span the whole sidebar. */
.review-bar-expansion,
.review-bar-expansion .mud-expand-panel,
.review-bar-expansion .mud-expansion-panel {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent;
}
.review-bar-expansion { margin: 0 !important; padding: 0 !important; }

/* ── Review bar: revision-summary panel + approve/reject form ─────────── */
.review-bar        { height: 100%; overflow: hidden; }
.review-bar-body   { flex-grow: 1; overflow-y: auto; }
.review-bar-footer { background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-inputs); }

.review-summary-box    { border-radius: 8px; border: 1px solid var(--mud-palette-lines-inputs); }
.review-submission-box { background-color: #fafafa; border-radius: 8px; }

/* Change-group headers: coloured status dot next to Added / Modified / Deleted */
.review-dot           { height: 8px; width: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.review-dot--added    { background-color: var(--mud-palette-success); }
.review-dot--modified { background-color: var(--mud-palette-warning); }
.review-dot--deleted  { background-color: var(--mud-palette-error); }

/* A single changed chapter inside a group — clickable jump to that chapter */
.review-change-row         { cursor: pointer; border-radius: 6px; border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); transition: all .2s; }
.review-change-row-label   { flex-grow: 1; }
.review-change-row-chevron { opacity: .7; }

/* Submission-detail tags + long free-text fields */
.review-change-type-tag { background: #e0f2fe; color: #0369a1; font-size: .6875rem; font-weight: 500; display: inline-block; }
.review-pre-wrap        { white-space: pre-wrap; }
.review-italic-muted    { font-style: italic; color: var(--mud-palette-text-secondary); }

/* ── Review overview card (intro / completion screen) ─────────────────── */
.review-overview-card        { background: var(--ap-surface); }
.review-overview-title       { font-weight: 700; }
.review-overview-start-btn   { text-transform: none; font-weight: 600; border-radius: 6px; }
.review-field-label          { font-weight: 600; text-transform: uppercase; }
.review-field-value          { font-weight: 600; }
.review-field-value--primary { color: var(--mud-palette-primary); }

/* ── Diff chapter tree ────────────────────────────────────────────────── */
.diff-chapters-list        { padding: 8px; }
.diff-chapter-edits        { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; }
.diff-state-icon--deleted  { color: var(--mud-palette-error); }
.diff-state-icon--inserted { color: var(--mud-palette-success); }
.diff-state-icon--modified { color: var(--mud-palette-warning); }

/* ── Diff page (A4 preview) ───────────────────────────────────────────── */
.diff-page-content     { padding-top: 24px; }
.diff-page-footer-text { text-align: center; }
.diff-section--wrap    { white-space: normal; }

.mud-avatar.menu-avatar {
    background-color: var(--mud-palette-surface);
}

.menu-avatar:hover {
    background-color: var(--mud-palette-lines-inputs);
}

.icon-small .mud-icon-root {
    font-size: 0.95rem !important;
}

/* ── Manual Source Picker (create manual dialog) ────────────────────── */

.manual-source-picker {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.manual-source-picker__column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.manual-source-picker__panel {
    overflow-y: auto;
    height: 260px;
}

/* ── Manuals Folder View ────────────────────────────────────────────── */

/* Folder card */
.manual-folder-card {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    position: relative;
    background-color: #FFFFFF;
    padding: 12px 14px;
}

.manual-folder-card:hover {
    background-color: #F0F7FF;
    border-color: #1F8CF9;
    box-shadow: 0 2px 8px rgba(31, 140, 249, 0.12);
}

/* Folder icon — Google Drive amber */
.folder-icon {
    color: #FBBC04;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Action buttons hidden at rest, revealed on card hover */
.manual-folder-card .folder-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.manual-folder-card:hover .folder-actions {
    opacity: 1;
}

/* Always show actions on touch / small screens where hover doesn't fire */
@media (hover: none), (max-width: 600px) {
    .manual-folder-card .folder-actions {
        opacity: 1;
    }
}

/* Sub-info line beneath the folder name */
.folder-meta {
    font-size: 0.75rem;
    color: #9CA3AF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section label — "FOLDERS" / "FILES" */
.view-section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6B7280;
    padding: 4px 0 2px;
}

/* Manuals table header cells — keep header from wrapping; font matches MudBlazor defaults */
.manuals-view-table .mud-table-head th {
    white-space: nowrap;
}

/* Status chips */
.status-chip {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    height: 22px !important;
    border-radius: 20px !important;
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
}

.status-chip-editing            { background-color: #DBEAFE !important; color: #1D4ED8 !important; }
.status-chip-waiting-internal   { background-color: #FEF3C7 !important; color: #B45309 !important; }
.status-chip-approved-internally{ background-color: #D1FAE5 !important; color: #065F46 !important; }
.status-chip-waiting-external   { background-color: #FEF3C7 !important; color: #B45309 !important; }
.status-chip-approved           { background-color: #DCFCE7 !important; color: #166534 !important; }
.status-chip-published          { background-color: #DCFCE7 !important; color: #166534 !important; }
.status-chip-rejected           { background-color: #FEE2E2 !important; color: #991B1B !important; }
.status-chip-default            { background-color: #F3F4F6 !important; color: #6B7280 !important; }

/* File icon in manual name column */
.manual-file-icon {
    color: #9CA3AF;
    flex-shrink: 0;
}

/* Empty state */
.folder-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    color: #9CA3AF;
    gap: 12px;
    text-align: center;
}

.folder-empty-state .empty-icon {
    font-size: 5rem;
    line-height: 1;
}

.folder-empty-state .empty-title {
    font-size: 1rem;
    font-weight: 500;
    color: #6B7280;
    margin: 0;
}

.folder-empty-state .empty-subtitle {
    font-size: 0.875rem;
    color: #9CA3AF;
    margin: 0;
}

/* Manuals dashboard */
.manuals-dashboard {
    background: #F8FBFF;
    border-radius: 16px;
    padding: 32px;
    overflow: hidden;
    width: 75%;
    border: 1px solid #E6E6E6;
}

.manuals-dashboard-widget {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 32px;
    overflow: hidden;
    width: 100%;
    border: 1px solid #E6E6E6;
}

.manuals-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 250px);
    gap: 20px;
}


.manuals-stat-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px 24px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.manuals-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.manuals-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
}

.manuals-stat-icon {
    color: #111827;
    font-size: 1.1rem;
}

.manuals-stat-icon-danger {
    color: #DC2626;
}

.manuals-stat-value {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #111827;
    margin-top: 12px;
}

.manuals-stat-footnote {
    margin-top: auto;
    align-self: flex-end;
    font-size: 0.8rem;
    color: #6B7280;
}

.manuals-stat-reminder-btn {
    margin-top: auto;
    align-self: flex-end;
}

.manuals-dashboard-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
    margin-left: -32px;
    margin-right: -32px;
    margin-bottom: -32px;
    padding: 16px 32px;
    background: #EBF4FF;
}

/* Manuals pending approvals table */
.manuals-pending-approvals {
    margin-top: 20px;
    width: 75%;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}

.manuals-pending-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 24px 14px;
    border-bottom: 1px solid #F3F4F6;
}

.manuals-pending-header-icon {
    color: #6B7280;
    font-size: 1rem;
    align-self: center;
}

.manuals-pending-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
}

.manuals-pending-subtitle {
    font-size: 0.75rem;
    color: #9CA3AF;
}

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

.manuals-pending-table thead tr {
    background: #F9FAFB;
}

.manuals-pending-table th {
    padding: 10px 24px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
    border-bottom: 1px solid #E5E7EB;
}

.manuals-pending-table td {
    padding: 14px 24px;
    color: #111827;
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
}

.manuals-pending-table tbody tr:last-child td {
    border-bottom: none;
}

.manuals-pending-row {
    cursor: pointer;
}

.manuals-pending-table tbody tr:hover {
    background: #F9FAFB;
}

.manuals-pending-manual-name {
    display: block;
    font-weight: 600;
    color: #111827;
}

.manuals-pending-version-name {
    display: block;
    font-size: 0.75rem;
    color: #6B7280;
    margin-top: 2px;
}

.manuals-pending-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    color: #374151;
}

.manuals-pending-type-badge--internal {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1D4ED8;
}

.manuals-pending-type-badge--external {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #15803D;
}

.manuals-pending-approvers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.manuals-pending-logic-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #F3F4F6;
    color: #6B7280;
    border: 1px solid #E5E7EB;
}

.manuals-pending-action {
    text-align: right;
}

.manuals-pending-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 8px 16px;
    border-top: 1px solid #F3F4F6;
}

.manuals-pending-pager-label {
    font-size: 0.8rem;
    color: #6B7280;
    min-width: 40px;
    text-align: center;
}

/* Breadcrumb back button */
.breadcrumb-back-btn {
    width: 28px !important;
    height: 28px !important;
    color: #6B7280 !important;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.breadcrumb-back-btn:hover {
    color: #111827 !important;
    background-color: #F3F4F6 !important;
}

/* Manual read-only view (approved/published) — A4 DiffPage layout, no diff chrome */
.manual-readonly-view .a4-zone-label          { display: none !important; }
.manual-readonly-view .editor-section-card    { border-color: transparent !important; box-shadow: none !important; }
.manual-readonly-view .mud-divider            { display: none !important; }
/* Chapter headline: drop the heading's built-in 48px side inset so the text and
   underline rule span the full section content width, matching body sections. */
.manual-readonly-view .chapter-a4-page-heading { padding-left: 0 !important; padding-right: 0 !important; }

/* ── MudChip global pill style ───────────────────────────────────────────────── */
.mud-chip {
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    height: 22px !important;
    padding: 0 10px !important;
    box-shadow: none !important;
}

/* ── Approval Letter section ───────────────────────────────────────────────────
   One rule set for the editor node view, the read-only section preview and the diff
   view — all three render the markup SectionHtmlRenderer.RenderApprovalLetter emits,
   so the letter looks the same everywhere it is shown on screen. The PDF draws its
   own equivalent in DocNodesToQuestPdf. */

@font-face {
    font-family: 'Caveat';
    src: url('/_content/Aeroplan.Shared/fonts/Caveat.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
}

.editor-section-card--approval-letter {
    background: transparent;
    cursor: default;
    padding: 0;
}

.approval-letter {
    /* The double blue rule is what makes this read as a formal letter rather than
       another page of manual text; it mirrors the frame drawn in the PDF. */
    border: 3px solid #2f5fd0;
    padding: 4px;
    text-align: center;
}

.approval-letter-title,
.approval-letter-manual,
.approval-letter-revision,
.approval-letter-intro,
.approval-letter-approvers {
    margin: 0;
    border-left: 1px solid #2f5fd0;
    border-right: 1px solid #2f5fd0;
}

.approval-letter-title {
    border-top: 1px solid #2f5fd0;
    padding: 22px 24px 14px;
    font-style: italic;
    font-size: 13pt;
}

.approval-letter-manual {
    padding: 0 24px 12px;
    font-style: italic;
    font-weight: 700;
    font-size: 21pt;
    color: #2f5fd0;
}

.approval-letter-revision {
    padding: 0 24px 12px;
    font-style: italic;
    font-size: 13pt;
}

.approval-letter-intro {
    padding: 0 42px 10px;
    font-style: italic;
    font-size: 11pt;
    line-height: 1.45;
}

.approval-letter-intro:focus {
    outline: 2px solid rgba(47, 95, 208, 0.35);
    outline-offset: 2px;
}

.approval-letter-approvers {
    border-bottom: 1px solid #2f5fd0;
    padding: 0 24px 24px;
    /* The letter fills a page in print; the reserved space keeps the on-screen
       proportions honest about what the PDF will look like. */
    min-height: 320px;
    text-align: left;
}

/* Reorder affordances are editor-only chrome: they exist solely in the TipTap node view, never in
   the markup SectionHtmlRenderer stores, so they cannot leak into the preview, diff or PDF. */

.approval-letter-reorder-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 24px 4px;
    padding: 7px 12px;
    border: 1px dashed rgba(47, 95, 208, 0.5);
    border-radius: 6px;
    background: rgba(47, 95, 208, 0.06);
    color: #2f5fd0;
    font-family: var(--mud-typography-body2-family, inherit);
    font-size: 12px;
    font-style: normal;
    text-align: left;
    user-select: none;
}

/* A gutter above the first approver, so the front of the letter is somewhere the pointer can reach.
   Editor-only, like the rest of the arrange chrome: the printed letter has no such gap. */
.approval-letter-approvers--arrangeable {
    padding-top: 16px;
}

.approval-letter-approver {
    position: relative;
    padding-top: 16px;
}

/* A reorderable row reads as a movable block even before the pointer reaches it. The indent is kept
   small and the handle sits in it, so arrange mode still shows the letter close to how it prints. */
.approval-letter-approver--reorderable {
    padding-left: 32px;
    border: 1px dashed transparent;
    border-radius: 6px;
    transition: background 0.12s, border-color 0.12s;
}

.approval-letter-approver--reorderable:hover {
    border-color: rgba(47, 95, 208, 0.45);
    background: rgba(47, 95, 208, 0.04);
}

.approval-letter-approver--dragging {
    opacity: 0.4;
}

/* Drop slots: every position the row can land in, lit as soon as the drag starts rather than only
   the one under the cursor. The vertical counterpart of the signature strip on the Configure page —
   a bar in each gap, plus one past the last row. */
.approval-letter-approvers--dropping .approval-letter-approver::before,
.approval-letter-approvers--dropping .approval-letter-approver:last-child::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: rgba(47, 95, 208, 0.45);
    pointer-events: none;
}

.approval-letter-approvers--dropping .approval-letter-approver::before {
    top: 6px;
}

/* The slot in the gutter above the first row — the front of the letter. */
.approval-letter-approvers--dropping .approval-letter-approver:first-child::before {
    top: -10px;
}

.approval-letter-approvers--dropping .approval-letter-approver:last-child::after {
    bottom: -6px;
}

/* The line the row will actually land on — the trailing slot included, which is where a row dropped
   in the page's reserved empty space goes. */
.approval-letter-approvers--dropping .approval-letter-approver--dropTarget::before,
.approval-letter-approvers--dropping .approval-letter-approver--dropTargetEnd:last-child::after {
    height: 4px;
    background: #2f5fd0;
}

.approval-letter-drag-handle {
    position: absolute;
    left: 2px;
    top: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(47, 95, 208, 0.45);
    border-radius: 5px;
    background: #fff;
    color: #2f5fd0;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.approval-letter-drag-handle:hover {
    background: rgba(47, 95, 208, 0.1);
}

.approval-letter-approver--dragging .approval-letter-drag-handle,
.approval-letter-drag-handle:active {
    cursor: grabbing;
}


.approval-letter-signature {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 10px 1px;
    min-height: 30px;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: 21pt;
    line-height: 1.1;
    color: #2f5fd0;
}

.approval-letter-date {
    min-width: 150px;
    flex-shrink: 0;
}

.approval-letter-rule {
    border-bottom: 1px solid #3f4d63;
}

.approval-letter-identity {
    padding-top: 2px;
    font-size: 7.5pt;
    color: #1a1a1a;
}

.approval-letter-timestamp {
    font-size: 7.5pt;
    color: #6b7280;
}

.approval-letter-comment {
    padding-top: 3px;
    font-style: italic;
    font-size: 11pt;
    color: #6b7280;
}

.approval-letter-pending {
    padding-top: 3px;
    font-size: 8pt;
    font-style: italic;
    color: rgba(0, 0, 0, 0.4);
}


/* ── Consolidated approval summary ────────────────────────────────────── */
/* Titles itself in its body rather than in a card header, so it draws the rule a card header
   would have drawn under it — the headline and its reference sit above the content, not on it. */
.approval-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ap-hairline);
}

/* Weight, tracking and line-height now come from the shared card headline; what is left here is
   the one thing that is this card's own. */
.approval-summary-title {
    text-transform: none;
}

.approval-summary-ref {
    display: block;
    color: var(--mud-palette-text-secondary);
}

.approval-summary-status {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffffff;
}

.approval-summary-status--inflight { background: #2f6fe0; }
.approval-summary-status--released { background: #15803d; }
.approval-summary-status--rejected { background: #b91c1c; }
.approval-summary-status--draft    { background: #64748b; }

/* The signature strip mirrors the letter of approval: one card per approver, in letter order.
   A manual can carry a long list of approvers, so the strip stays a single row and scrolls
   sideways rather than reflowing into a block that pushes the log off the screen. */
.approval-signature-strip {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

/* A visible track, so a clipped strip reads as scrollable rather than as a cut-off card. */
.approval-signature-strip,
.approval-log-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 95, 208, .35) transparent;
}

/* The fade sits over the card's own background, so it is invisible when the strip fits and only
   reads as "more to the right" when it actually clips an approver. */
.approval-signature-strip-wrap {
    position: relative;
}

.approval-signature-strip-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 14px;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--mud-palette-surface, #fff));
}

.approval-signature-strip::-webkit-scrollbar,
.approval-log-scroll::-webkit-scrollbar {
    height: 8px;
}

.approval-signature-strip::-webkit-scrollbar-track,
.approval-log-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .04);
    border-radius: 4px;
}

.approval-signature-strip::-webkit-scrollbar-thumb,
.approval-log-scroll::-webkit-scrollbar-thumb {
    background: rgba(47, 95, 208, .35);
    border-radius: 4px;
}

.approval-signature-card {
    flex: 0 0 216px;
    padding: 12px 14px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: #ffffff;
}

.approval-signature-card--signed {
    border-color: #bfd4f7;
    background: #eef4fe;
}

.approval-signature-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
}

.approval-signature-name {
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: 1.5rem;
    line-height: 1.1;
    color: #2f5fd0;
    overflow-wrap: anywhere;
}

.approval-signature-mark {
    color: rgba(47, 95, 208, .35);
}

/* The hint sits directly under the arrangeable strip and carries the gap instead. The inline padding
   makes room for the drop slots either side of the end cards without shifting the cards themselves,
   which the negative margin cancels out. */
/* The left gutter is the first position's drop target. Without it the strip began exactly where the
   first card began, so dragging a card past that card — the obvious way to ask for "put this one
   first" — left the drop area altogether and the browser bounced the card back. */
.approval-signature-strip--arrangeable {
    position: relative;
    margin-bottom: 4px;
    margin-inline: -10px;
    padding-inline: 10px;
    padding-left: 42px;
}

/* MudDropZone wraps each item, so the flex sizing has to live on its wrapper rather than the card. */
.approval-signature-strip--arrangeable .mud-drop-item:not(.mud-drop-item-preview-start) {
    position: relative;
    display: flex;
    flex: 0 0 216px;
}

.approval-signature-strip--arrangeable .mud-drop-item > .approval-signature-card {
    flex: 1 1 auto;
}

/* MudBlazor sizes the leading drop target for a vertical list — a band across the top — and places it
   over the first item. This strip runs horizontally, so it becomes a band filling the left gutter
   instead, wide enough to aim at and clear of the first card rather than lying on top of it. */
.approval-signature-strip--arrangeable > .mud-drop-item-preview-start {
    left: 0;
    top: 0;
    width: 42px;
    height: 100%;
}

/* Lit like the other slots, so the front of the letter reads as somewhere a card can land. */
.approval-signature-strip--dropping > .mud-drop-item-preview-start {
    border: 1px dashed rgba(47, 95, 208, .45);
    border-radius: 6px;
    background: rgba(47, 95, 208, .07);
}

/* Drop slots: a bar in every gap, and one past each end, shown for the whole strip as soon as a drag
   starts so every position a card can land in is visible at once. */
.approval-signature-strip--dropping .mud-drop-item:not(.mud-drop-item-preview-start)::before,
.approval-signature-strip--dropping .mud-drop-item:not(.mud-drop-item-preview-start)::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: rgba(47, 95, 208, .45);
    pointer-events: none;
}

.approval-signature-strip--dropping .mud-drop-item:not(.mud-drop-item-preview-start)::before {
    left: -7.5px;
}

.approval-signature-strip--dropping .mud-drop-item:not(.mud-drop-item-preview-start)::after {
    right: -7.5px;
}

.approval-signature-dragging,
.approval-signature-dragging .approval-signature-card {
    opacity: .5;
}

.approval-signature-card--draggable {
    cursor: grab;
    user-select: none;
}

.approval-signature-card--draggable:active {
    cursor: grabbing;
}

.approval-signature-grip {
    color: rgba(47, 95, 208, .55);
    cursor: grab;
}

/* A callout rather than a caption: the strip's cards read as signed-off paperwork, so a line of grey
   small print underneath was not enough to say they can still be moved. Matches the reorder hint the
   letter editor shows over the same approvers. The stacking context keeps the wrap's right-hand
   scroll fade off the pill's border. */
.approval-signature-hint {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 2px;
    margin-bottom: 16px;
    padding: 7px 13px 7px 8px;
    border: 1px dashed rgba(47, 95, 208, .5);
    border-radius: 7px;
    background: rgba(47, 95, 208, .06);
    color: #2f5fd0;
    font-family: var(--mud-typography-body2-family, inherit);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    user-select: none;
}

/* Drawn as the same small handle the cards wear, so the instruction points at something the eye has
   already seen rather than at a symbol of its own. */
.approval-signature-hint .approval-signature-hint-grip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(47, 95, 208, .45);
    border-radius: 5px;
    background: #fff;
    color: #2f5fd0;
    font-size: 12px;
}

.approval-signature-card--pending .approval-signature-name {
    color: #93a7cc;
}

.approval-signature-rule {
    margin: 4px 0 8px;
    border-bottom: 1px solid rgba(47, 95, 208, .35);
}

/* Stacked, not wrapped: letting the two share a line put the stage chip beside a short job title and
   under a long one, so the cards in a strip lined up differently from one another. */
.approval-signature-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 6px;
}

.approval-signature-title {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.approval-signature-state {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #b45309;
}

.approval-signature-card--signed .approval-signature-state {
    color: #15803d;
}

.approval-signature-comment {
    margin-top: 6px;
    font-size: .75rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.approval-summary-section-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.approval-log-scroll {
    margin-top: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.approval-log-table {
    min-width: 660px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
}

/* Fixed layout so every row's cells start at the same x, whatever the row happens to contain. */
.approval-log-table table { table-layout: fixed; }

/* The timestamp column absorbs the slack and aligns right, which keeps the approver and the action
   reading as one pair on the left instead of drifting apart across the width of the card. */
.approval-log-col-approver  { width: 36%; }
.approval-log-col-action    { width: 300px; }
.approval-log-col-timestamp { width: auto; }

/* Matches MudBlazor's own .mud-table-head .mud-table-cell specificity, which otherwise wins. */
.approval-log-table .mud-table-head .mud-table-cell {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.approval-log-table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Only the data cells align right — the group header is a th spanning the row, and would otherwise
   be caught by :last-child too. */
.approval-log-table .mud-table-head .mud-table-cell:last-child,
.approval-log-table tbody td:last-child {
    text-align: right;
}

.approval-log-table .approval-log-group {
    padding-top: 8px;
    padding-bottom: 8px;
    background: #f1f5f9;
}

.approval-log-round {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.approval-log-approver {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.approval-log-approver-name {
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.approval-log-note {
    font-size: .75rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.approval-log-action-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.approval-log-action-cell .review-change-type-tag {
    flex-shrink: 0;
    white-space: nowrap;
}

.approval-log-action {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
}

.approval-log-action--approved  { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.approval-log-action--published { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.approval-log-action--rejected  { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.approval-log-action--reverted  { border-color: #fde68a; background: #fffbeb; color: #b45309; }

.approval-log-timestamp {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.approval-summary-footer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #bfd4f7;
    border-radius: 8px;
    background: #eef4fe;
}

.approval-summary-footer-icon {
    color: #2f6fe0;
    margin-top: 2px;
}

.approval-summary-footer-title {
    font-weight: 700;
    color: #1d4ed8;
}

/* The owner's decision dialog grows as it is answered: saying "no" unfolds a justification, a second
   question and a list of recipients.
   MudBlazor gives .mud-dialog its own overflow-y:auto, so a growing body scrolls the entire dialog
   and carries the title and buttons off with it. Here the dialog holds still and only its body
   scrolls. Both selectors are deliberately more specific than MudBlazor's single class, which would
   otherwise win on source order. */
.mud-dialog.owner-decision-dialog,
.mud-dialog:has(.owner-decision-content) {
    overflow-y: hidden;
}

.mud-dialog-content.owner-decision-content {
    flex: 1 1 auto;
    /* The justification is a textarea, so the body has no fixed height. A flex child defaults to
       min-height:auto and refuses to shrink below its content — which is why the dialog grew rather
       than the body scrolling, and why only the multi-line field triggered it. */
    min-height: 0;
    overflow-y: auto;
    /* Pinned: a browser promotes overflow-x to a scrollbar of its own the moment overflow-y is set. */
    overflow-x: hidden;
}