/* ══════════════════════════════════════════════════════════════════════════════
   agreement.css — the Collective Agreement reader (ONE stylesheet for three sites)
   Canonical here (Meeting Registrations 2); vendored byte-for-byte to the Admin Portal and
   agreement.oectahw.com by sync-agreement-from-member.sh. Moved out of portal.css by
   tools/split-agreement-css.mjs on 2026-09-21 — every rule whose selector names something the
   reader (agreement.js / renderer.js) renders. Edit HERE, never the copies.
   ══════════════════════════════════════════════════════════════════════════════ */
/* =========================================================
 * AGREEMENT EMBED — iframe of agreement.oectahw.com/?mode=member
 * Lazy-loaded by agreement.js into #tab-agreement.
 * ========================================================= */
#tab-agreement {
    padding: 0;
    margin: 0;
}

.agreement-embed-host {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--portal-header-height, 64px));
    overflow: hidden;
    background: var(--oecta-surface, #faf9fc);
}

.agreement-embed-host #agreement-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: var(--oecta-surface, #faf9fc);
}

.agreement-embed-skeleton {
    position: absolute;
    inset: 0;
    background: var(--oecta-surface, #faf9fc);
    z-index: 1;
}

.agreement-embed-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: calc(100vh - var(--portal-header-height, 64px));
    padding: 24px;
    gap: 12px;
    background: var(--oecta-surface, #faf9fc);
}

.agreement-embed-fallback h3 {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    color: var(--on-surface, #181c21);
}

.agreement-embed-fallback p {
    color: var(--on-surface-variant, #5a6470);
    max-width: 380px;
    margin: 0;
    line-height: 1.5;
}

.agreement-embed-fallback-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--oecta-primary-container, #204164);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.agreement-embed-fallback-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(32, 65, 100, 0.25);
}

@media (max-width: 768px) {
.agreement-embed-host,
    .agreement-embed-fallback {
        height: calc(100vh - var(--bottom-nav-height, 56px));
    }

}

/* Auth-bridge failure banner — overlays the iframe at the top of #tab-agreement
 * when /api/sso/token errors or the iframe doesn't ack within 5s. Non-blocking:
 * iframe stays scrollable and readable; only saving notes is gated on retry. */
.agreement-embed-auth-banner {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fff7ed;
    border-bottom: 1px solid #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    font-size: 0.92rem;
    color: #78350f;
    animation: agreementBannerSlideIn 0.25s ease-out;
}

@keyframes agreementBannerSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.agreement-embed-auth-banner > .material-icons-outlined {
    color: #f59e0b;
    font-size: 22px;
    flex-shrink: 0;
}

.agreement-embed-auth-banner-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.agreement-embed-auth-banner-retry {
    background: #f59e0b;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.agreement-embed-auth-banner-retry:hover {
    background: #d97706;
}

.agreement-embed-auth-banner-dismiss {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #78350f;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.agreement-embed-auth-banner-dismiss:hover {
    background: rgba(120, 53, 15, 0.1);
}

.agreement-embed-auth-banner-dismiss .material-icons-outlined {
    font-size: 18px;
}

body.dark-mode .agreement-embed-auth-banner {
    background: #2a1f0d;
    color: #fbbf24;
    border-bottom-color: #f59e0b;
}

body.dark-mode .agreement-embed-auth-banner-dismiss {
    color: #fbbf24;
}

body.dark-mode .agreement-embed-auth-banner-dismiss:hover {
    background: rgba(251, 191, 36, 0.15);
}

/* =========================================================
 * NATIVE COLLECTIVE AGREEMENT VIEWER (Zero-Scroll & Responsive)
 * ========================================================= */
/* =========================================================
 * NATIVE COLLECTIVE AGREEMENT VIEWER (Clean Layout & Blue Hamburger Toggle)
 * ========================================================= */
.mp-agreement-wrapper {
    max-width: 100%;
    padding: 0 0 80px;
    position: relative;
}

/* Little Blue Circular Hamburger Toggle Button (from original CA design) */
.hamburger-menu {
    width: 36px;
    height: 36px;
    background-color: #204164;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.hamburger-menu span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.hamburger-menu:hover {
    transform: scale(1.08);
    background-color: #173250;
}

.hamburger-menu:active {
    transform: scale(0.95);
}

/* Floating open hamburger button (visible when the CA sidebar is closed, desktop only).
   It is position:fixed, so it has to clear the portal's own fixed sidebar — mirror the
   `.portal-sidebar ~ .portal-content` offset exactly (64px collapsed / 240px expanded).
   `left: 14px` sat on top of the "Events" nav item (Paul, 2026-09-20). */
.floating-ca-hamburger {
    position: fixed;
    top: calc(var(--portal-header-height, 64px) + 12px);
    left: calc(var(--oecta-sidebar-collapsed, 64px) + 16px);
    z-index: 990;
    display: none;
}

.portal-sidebar.expanded ~ .portal-content .floating-ca-hamburger {
    left: calc(var(--oecta-sidebar-width, 240px) + 16px);
}

@media (max-width: 860px) {
.floating-ca-hamburger {
        display: none !important; /* Replaced by sticky mobile sub-header TOC button */
    }

}

.mp-ca-layout.mp-ca-nav-collapsed .floating-ca-hamburger,
.mp-ca-layout.mp-ca-nav-collapsed ~ .floating-ca-hamburger,
#mp-agreement-wrapper.mp-ca-nav-collapsed .floating-ca-hamburger,
#mp-agreement-wrapper.mp-ca-nav-collapsed #mp-ca-hamburger-open,
.mp-ca-nav-collapsed .floating-ca-hamburger {
    display: flex !important;
}

/* Mobile Drawer Overlay Backdrop */
.mp-ca-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mp-ca-overlay.is-active,
.mp-ca-layout.mp-ca-drawer-open ~ .mp-ca-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar Top Brand Bar */
.mp-ca-nav-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.mp-ca-nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mp-ca-nav-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.mp-ca-nav-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mp-ca-nav-title {
    font: 800 0.82rem Inter, sans-serif;
    color: #204164;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-mode .mp-ca-nav-title {
    color: #93c5fd;
}

.mp-ca-nav-subtitle {
    font: 600 0.7rem Inter, sans-serif;
    color: #64748b;
}

/* Sidebar Action Bar (Listen Aloud / External) */
.mp-ca-nav-actions-bar {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.mp-ca-action-chip {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--surface-container-low, #f1f5f9);
    color: #204164;
    border: 1px solid rgba(32, 65, 100, 0.1);
    border-radius: 6px;
    padding: 5px 8px;
    font: 600 0.74rem Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.mp-ca-action-chip:hover {
    background: #204164;
    color: #ffffff;
    border-color: #204164;
}

body.dark-mode .mp-ca-action-chip {
    background: #1e293b;
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .mp-ca-action-chip:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Floating Read Aloud Toggle Chip (Bottom-Right) */
.mp-ca-floating-ra {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #204164;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    padding: 10px 18px;
    font: 700 0.85rem Inter, sans-serif;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.28);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mp-ca-floating-ra:hover {
    background: #fea520;
    color: #204164;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 165, 32, 0.35);
}

.mp-ca-floating-ra.is-active,
.mp-ca-player-active .mp-ca-floating-ra,
.mp-ca-floating-ra[style*="none"] {
    display: none !important;
}

@media (max-width: 860px) {
.mp-ca-floating-ra {
        bottom: calc(var(--bottom-nav-height, 56px) + 16px);
        right: 16px;
        padding: 8px 14px;
        font-size: 0.8rem;
    }

}

/* ── Mobile Sticky Sub-Header & In-Document Controls (<= 860px) ── */
.mp-ca-mobile-bar {
    display: none;
    border: none;
}

@media (max-width: 860px) {
.mp-ca-mobile-bar {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: var(--portal-header-height, 56px);
        z-index: 95;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
        border: none;
        transition: background-color 0.2s ease;
    }

body.dark-mode .mp-ca-mobile-bar {
        background: rgba(17, 24, 39, 0.94);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

.mp-ca-mob-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        gap: 8px;
    }

.mp-ca-mob-toc-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 999px;
        background: var(--surface-container-low, #f1f5f9);
        color: #204164;
        border: none;
        font: 700 0.84rem Inter, sans-serif;
        cursor: pointer;
        flex-shrink: 0;
        min-height: 44px;
        min-width: 44px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        transition: background 0.15s ease, transform 0.1s ease;
    }

.mp-ca-mob-toc-btn:active {
        background: #204164;
        color: #ffffff;
        transform: scale(0.96);
    }

.mp-ca-mob-toc-btn .material-icons-outlined {
        font-size: 20px;
        color: #204164;
    }

.mp-ca-mob-toc-btn:active .material-icons-outlined {
        color: #ffffff;
    }

body.dark-mode .mp-ca-mob-toc-btn {
        background: #1e293b;
        color: #93c5fd;
    }

body.dark-mode .mp-ca-mob-toc-btn .material-icons-outlined {
        color: #93c5fd;
    }

body.dark-mode .mp-ca-mob-toc-btn:active {
        background: #3b82f6;
        color: #ffffff;
    }

body.dark-mode .mp-ca-mob-toc-btn:active .material-icons-outlined {
        color: #ffffff;
    }

.mp-ca-mob-crumb-wrap {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border-radius: 8px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }

.mp-ca-mob-crumb-wrap:hover,
    .mp-ca-mob-crumb-wrap:active {
        background: rgba(32, 65, 100, 0.06);
    }

body.dark-mode .mp-ca-mob-crumb-wrap:hover,
    body.dark-mode .mp-ca-mob-crumb-wrap:active {
        background: rgba(255, 255, 255, 0.06);
    }

.mp-ca-mob-crumb-part {
        font: 800 0.8rem Inter, sans-serif;
        color: #204164;
        flex-shrink: 0;
    }

body.dark-mode .mp-ca-mob-crumb-part {
        color: #93c5fd;
    }

.mp-ca-mob-crumb-sep {
        color: #94a3b8;
        font-size: 0.78rem;
        flex-shrink: 0;
    }

.mp-ca-mob-crumb-art {
        font: 600 0.8rem Inter, sans-serif;
        color: #475569;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

body.dark-mode .mp-ca-mob-crumb-art {
        color: #cbd5e1;
    }

.mp-ca-mob-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

.mp-ca-mob-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s, color 0.15s, transform 0.1s;
    }

.mp-ca-mob-icon-btn:hover,
    .mp-ca-mob-icon-btn:active,
    .mp-ca-mob-icon-btn.is-active {
        background: rgba(32, 65, 100, 0.08);
        color: #204164;
        transform: scale(0.96);
    }

body.dark-mode .mp-ca-mob-icon-btn {
        color: #94a3b8;
    }

body.dark-mode .mp-ca-mob-icon-btn:hover,
    body.dark-mode .mp-ca-mob-icon-btn:active,
    body.dark-mode .mp-ca-mob-icon-btn.is-active {
        background: rgba(255, 255, 255, 0.08);
        color: #60a5fa;
    }

.mp-ca-mob-parts {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 12px 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

.mp-ca-mob-parts::-webkit-scrollbar {
        display: none;
    }

.mp-ca-mob-part-chip {
        flex-shrink: 0;
        padding: 8px 16px;
        border-radius: 999px;
        border: none;
        font: 600 0.8rem Inter, sans-serif;
        color: #64748b;
        background: var(--surface-container-low, #f1f5f9);
        cursor: pointer;
        min-height: 44px;
        transition: all 0.14s ease;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }

.mp-ca-mob-part-chip:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

.mp-ca-mob-part-chip.active {
        background: #204164;
        color: #ffffff;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(32, 65, 100, 0.22);
    }

.mp-ca-mob-part-chip .mob-part-sub {
        font-size: 0.74em;
        opacity: 0.85;
        margin-left: 4px;
        font-weight: 500;
    }

body.dark-mode .mp-ca-mob-part-chip {
        background: #1e293b;
        color: #94a3b8;
    }

body.dark-mode .mp-ca-mob-part-chip:hover {
        background: #283548;
        color: #f8fafc;
    }

body.dark-mode .mp-ca-mob-part-chip.active {
        background: #3b82f6;
        color: #ffffff;
    }

}

/* ── Android Bottom Sheet Backdrop & Drawers ── */
.mp-ca-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1190;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.mp-ca-sheet-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

.mp-ca-mob-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(88vh - env(safe-area-inset-top, 0px));
    max-height: calc(88dvh - env(safe-area-inset-top, 0px));
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 48px rgba(15, 23, 42, 0.22);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
    visibility: hidden;
    border: none;
}

body.dark-mode .mp-ca-mob-sheet {
    background: #16202e;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.7);
}

.mp-ca-mob-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
}

.mp-ca-sheet-drag-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 10px auto 4px;
    flex-shrink: 0;
    cursor: grab;
}

body.dark-mode .mp-ca-sheet-drag-handle {
    background: #475569;
}

.mp-ca-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    flex-shrink: 0;
}

.mp-ca-sheet-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 800 1.05rem Inter, sans-serif;
    color: #204164;
}

body.dark-mode .mp-ca-sheet-title {
    color: #93c5fd;
}

.mp-ca-sheet-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    transition: background 0.15s, color 0.15s;
}

.mp-ca-sheet-close:active {
    background: rgba(32, 65, 100, 0.08);
    color: #204164;
}

body.dark-mode .mp-ca-sheet-close {
    color: #94a3b8;
}

body.dark-mode .mp-ca-sheet-close:active {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

.mp-ca-sheet-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 16px 8px;
    flex-shrink: 0;
}

.mp-ca-sheet-search-wrap input {
    width: 100%;
    min-height: 48px;
    padding: 12px 40px 12px 44px !important;
    border-radius: 12px;
    border: none;
    background: var(--surface-container-low, #f1f5f9);
    font: 500 16px/1.4 Inter, sans-serif !important;
    color: inherit;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

body.dark-mode .mp-ca-sheet-search-wrap input {
    background: #0f172a;
    color: #f8fafc;
}

.mp-ca-sheet-search-icon {
    position: absolute;
    left: 28px;
    font-size: 22px;
    color: #94a3b8;
    pointer-events: none;
}

.mp-ca-sheet-filter-clear {
    position: absolute;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mp-ca-sheet-parts {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 16px 10px;
    scrollbar-width: none;
    flex-shrink: 0;
}

.mp-ca-sheet-parts::-webkit-scrollbar {
    display: none;
}

.mp-ca-sheet-part-chip {
    min-height: 40px;
    padding: 6px 16px;
    border-radius: 999px;
    border: none;
    background: var(--surface-container-low, #f1f5f9);
    color: #64748b;
    font: 600 0.82rem Inter, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.mp-ca-sheet-part-chip.active {
    background: #204164;
    color: #ffffff;
    font-weight: 700;
}

body.dark-mode .mp-ca-sheet-part-chip {
    background: #0f172a;
    color: #94a3b8;
}

body.dark-mode .mp-ca-sheet-part-chip.active {
    background: #3b82f6;
    color: #ffffff;
}

.mp-ca-sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px calc(env(safe-area-inset-bottom, 16px) + 24px);
    overscroll-behavior: contain;
}

.mp-ca-sheet-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: none;
    border-radius: 12px;
    background: var(--surface-container-low, #f8fafc);
    color: #1e293b;
    text-align: left;
    cursor: pointer;
    gap: 12px;
    transition: background 0.15s ease, transform 0.1s ease;
}

.mp-ca-sheet-item:active {
    background: #e2e8f0;
    transform: scale(0.99);
}

body.dark-mode .mp-ca-sheet-item {
    background: #0f172a;
    color: #f1f5f9;
}

body.dark-mode .mp-ca-sheet-item:active {
    background: #1e293b;
}

.mp-ca-sheet-item-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 6px;
    font: 800 0.72rem Inter, sans-serif;
    letter-spacing: 0.02em;
}

.mp-ca-sheet-item-badge.part-a { background: rgba(32, 65, 100, 0.1); color: #204164; }

.mp-ca-sheet-item-badge.part-b { background: rgba(14, 116, 144, 0.12); color: #0e7490; }

.mp-ca-sheet-item-badge.part-c { background: rgba(16, 185, 129, 0.12); color: #059669; }

.mp-ca-sheet-item-badge.part-loa { background: rgba(245, 158, 11, 0.14); color: #d97706; }

body.dark-mode .mp-ca-sheet-item-badge.part-a { background: rgba(147, 197, 253, 0.15); color: #93c5fd; }

body.dark-mode .mp-ca-sheet-item-badge.part-b { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }

body.dark-mode .mp-ca-sheet-item-badge.part-c { background: rgba(52, 211, 153, 0.15); color: #34d399; }

body.dark-mode .mp-ca-sheet-item-badge.part-loa { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }

.mp-ca-sheet-item-title {
    flex: 1;
    font: 600 0.88rem Inter, sans-serif;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-ca-sheet-item-arrow {
    color: #94a3b8;
    font-size: 20px;
    flex-shrink: 0;
}

.mp-ca-sheet-loading,
.mp-ca-sheet-empty,
.mp-ca-mob-search-empty {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font: 500 0.88rem/1.5 Inter, sans-serif;
}

.mp-ca-mob-search-stats {
    padding: 0 16px 8px;
    font: 600 0.78rem Inter, sans-serif;
    color: #64748b;
}

body.dark-mode .mp-ca-mob-search-stats {
    color: #94a3b8;
}

.mp-ca-search-card {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--surface-container-low, #f8fafc);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    border: none;
}

.mp-ca-search-card:active {
    background: #e2e8f0;
    transform: scale(0.99);
}

body.dark-mode .mp-ca-search-card {
    background: #0f172a;
}

body.dark-mode .mp-ca-search-card:active {
    background: #1e293b;
}

.mp-ca-search-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.mp-ca-search-clause-badge {
    font: 700 0.74rem Inter, sans-serif;
    color: #204164;
    background: rgba(32, 65, 100, 0.08);
    padding: 3px 7px;
    border-radius: 6px;
}

body.dark-mode .mp-ca-search-clause-badge {
    color: #93c5fd;
    background: rgba(255, 255, 255, 0.08);
}

.mp-ca-search-article-name {
    font: 600 0.8rem Inter, sans-serif;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-mode .mp-ca-search-article-name {
    color: #94a3b8;
}

.mp-ca-search-card-snippet {
    font: 400 0.86rem/1.5 Inter, sans-serif;
    color: #334155;
}

body.dark-mode .mp-ca-search-card-snippet {
    color: #cbd5e1;
}

mark.mob-kw-mark {
    background: rgba(254, 165, 32, 0.35);
    color: inherit;
    font-weight: 700;
    padding: 1px 3px;
    border-radius: 3px;
}

body.dark-mode mark.mob-kw-mark {
    background: rgba(254, 165, 32, 0.45);
    color: #ffffff;
}

body.ca-sheet-locked {
    overflow: hidden !important;
    touch-action: none;
}

/* ── Mobile Collapsible Article Cards (<= 860px) ── */
@media (max-width: 860px) {
.article-container {
        background: var(--surface-container-lowest, #ffffff);
        border-radius: 14px;
        margin-bottom: 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
        overflow: hidden;
        border: none;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

body.dark-mode .article-container {
        background: #151e2b;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }

.article-container > h2 {
        cursor: pointer;
        padding: 14px 16px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.98rem;
        font-weight: 700;
        line-height: 1.35;
        min-height: 48px;
        background: var(--surface-container-low, #f8fafc);
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        border: none;
    }

body.dark-mode .article-container > h2 {
        background: #1d2839;
    }

.article-container > h2::after {
        content: '\e5ce'; /* expand_less */
        font-family: 'Material Icons Outlined';
        font-size: 24px;
        color: #64748b;
        margin-left: 10px;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

.article-container.is-collapsed > h2::after {
        content: '\e5cf'; /* expand_more */
        color: #94a3b8;
    }

.article-container.is-collapsed > .clause-row,
    .article-container.is-collapsed > .table-wrapper,
    .article-container.is-collapsed > .loa-section-heading,
    .article-container.is-collapsed > p.underline,
    .article-container.is-collapsed > .space2,
    .article-container.is-collapsed > .part-b-header {
        display: none !important;
    }

.article-container:not(.is-collapsed) {
        padding-bottom: 12px;
    }

}

/* Floating Scroll-to-Top Button */
.mp-ca-scroll-top {
    position: fixed;
    bottom: calc(var(--bottom-nav-height, 60px) + env(safe-area-inset-bottom, 0px) + 16px);
    left: 16px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #204164;
    border: none;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mp-ca-scroll-top:hover {
    background: #204164;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(32, 65, 100, 0.25);
}

body.dark-mode .mp-ca-scroll-top {
    background: #1e293b;
    color: #93c5fd;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

body.dark-mode .mp-ca-scroll-top:hover {
    background: #3b82f6;
    color: #ffffff;
}

/* ── Two-Pane Layout ── */
.mp-ca-layout {
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* Left Navigation Sidebar */
.mp-ca-nav-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: var(--portal-header-height, 64px);
    height: calc(100vh - var(--portal-header-height, 64px));
    background: #fbfbfd;
    border-right: 1px solid rgba(32, 65, 100, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    z-index: 18;
}

body.dark-mode .mp-ca-nav-sidebar {
    background: #141b26;
    border-right-color: rgba(255, 255, 255, 0.08);
}

#panel-agreement .mp-ca-layout.mp-ca-nav-collapsed .mp-ca-nav-sidebar,
#panel-agreement #mp-agreement-wrapper.mp-ca-nav-collapsed .mp-ca-nav-sidebar,
#panel-agreement.mp-ca-nav-collapsed .mp-ca-nav-sidebar,
.mp-ca-layout.mp-ca-nav-collapsed .mp-ca-nav-sidebar,
#mp-agreement-wrapper.mp-ca-nav-collapsed .mp-ca-nav-sidebar {
    display: none !important;
}

#panel-agreement .mp-ca-layout.mp-ca-nav-collapsed .mp-ca-main-pane,
#panel-agreement #mp-agreement-wrapper.mp-ca-nav-collapsed .mp-ca-main-pane,
.mp-ca-layout.mp-ca-nav-collapsed .mp-ca-main-pane,
#mp-agreement-wrapper.mp-ca-nav-collapsed .mp-ca-main-pane {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.mp-ca-nav-header {
    padding: 12px 14px 8px;
    border-bottom: 1px solid rgba(32, 65, 100, 0.06);
    flex-shrink: 0;
}

body.dark-mode .mp-ca-nav-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.mp-ca-nav-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.mp-ca-nav-search-wrap .mp-ca-nav-search-icon,
.mp-ca-nav-search-wrap > span.material-icons-outlined {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    pointer-events: none;
    z-index: 2;
}

.mp-ca-nav-search-wrap input {
    width: 100%;
    padding: 8px 30px 8px 38px !important;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font: 500 0.82rem Inter, sans-serif;
    color: inherit;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.mp-ca-nav-search-wrap input::-webkit-search-cancel-button,
.mp-ca-nav-search-wrap input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.mp-ca-nav-search-wrap input:focus {
    border-color: #204164;
    box-shadow: 0 0 0 2px rgba(32, 65, 100, 0.1);
}

body.dark-mode .mp-ca-nav-search-wrap input {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

#mp-ca-nav-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    z-index: 2;
}

.mp-ca-nav-part-tabs {
    display: flex;
    gap: 4px;
}

.mp-ca-nav-tab {
    flex: 1;
    padding: 4px 0;
    text-align: center;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font: 600 0.74rem Inter, sans-serif;
    color: #64748b;
    cursor: pointer;
    transition: all 0.12s ease;
}

.mp-ca-nav-tab:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.mp-ca-nav-tab.active {
    background: #204164;
    color: #ffffff;
    border-color: #204164;
}

body.dark-mode .mp-ca-nav-tab {
    border-color: #334155;
    color: #94a3b8;
}

body.dark-mode .mp-ca-nav-tab.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Nav Tree & Items */
.mp-ca-nav-tree-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 32px;
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 65, 100, 0.15) transparent;
}

.nav-part-section {
    margin-bottom: 12px;
}

.nav-part-header {
    padding: 8px 16px 4px;
    font: 800 0.72rem/1.2 'Manrope', Inter, sans-serif;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-article {
    position: relative;
}

.nav-article-header {
    display: flex;
    align-items: baseline;
    padding: 6px 14px 6px 16px;
    color: #475569;
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.35;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-left: 3px solid transparent;
    gap: 6px;
}

.nav-article-header:hover {
    background: rgba(32, 65, 100, 0.04);
    color: #1e293b;
}

.nav-article-header.active-article {
    background: rgba(32, 65, 100, 0.07);
    border-left-color: #204164;
    color: #204164;
    font-weight: 700;
}

body.dark-mode .nav-article-header {
    color: #94a3b8;
}

body.dark-mode .nav-article-header:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #f1f5f9;
}

body.dark-mode .nav-article-header.active-article {
    background: rgba(59, 130, 246, 0.12);
    border-left-color: #3b82f6;
    color: #60a5fa;
}

.nav-arrow {
    font-size: 8px;
    color: #94a3b8;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.nav-article.expanded > .nav-article-header .nav-arrow {
    transform: rotate(90deg);
}

.nav-num {
    font-weight: 700;
    color: #204164;
    flex-shrink: 0;
    font-size: 0.82rem;
}

body.dark-mode .nav-num {
    color: #93c5fd;
}

.nav-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-sub-items {
    display: none;
    padding-left: 26px;
    margin: 2px 0 6px;
    border-left: 1px dashed rgba(32, 65, 100, 0.12);
    margin-left: 20px;
}

.nav-article.expanded > .nav-sub-items {
    display: block;
}

.nav-sub-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px 4px 0;
    color: #64748b;
    text-decoration: none;
    font-size: 0.77rem;
    line-height: 1.3;
    transition: color 0.12s;
}

.nav-sub-item:hover {
    color: #204164;
    font-weight: 600;
}

body.dark-mode .nav-sub-item {
    color: #94a3b8;
}

body.dark-mode .nav-sub-item:hover {
    color: #93c5fd;
}

.nav-sub-num {
    font-weight: 600;
    color: #94a3b8;
    flex-shrink: 0;
}

.nav-divider-line {
    padding: 10px 16px 4px;
    font: 800 0.68rem/1.2 'Manrope', Inter, sans-serif;
    color: #94a3b8;
    letter-spacing: 0.08em;
    border-top: 1px solid rgba(32, 65, 100, 0.06);
    margin-top: 8px;
}

.nav-loa {
    font-size: 0.78rem;
    padding-left: 16px;
}

/* Right Content Area */
.mp-ca-main-pane {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100% !important;
    overflow-y: auto !important;
}

/* ── Persistent Floating Bottom Audio Reader Dock ── */
.mp-ra-player-fixed {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - 48px);
    max-width: 860px;
    background: rgba(32, 65, 100, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #ffffff;
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.38), 0 2px 10px rgba(0,0,0,0.15);
    border: 1px solid rgba(255, 255, 255, 0.16);
    animation: mpRaSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mpRaSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.mp-ra-player-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-ra-controls-row {
    display: contents;
}

.mp-ra-ctrl-btn {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.mp-ra-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

.mp-ra-play-main {
    background: #fea520;
    color: #204164;
    width: 38px;
    height: 38px;
}

.mp-ra-play-main:hover {
    background: #f59e0b;
    color: #204164;
}

.mp-ra-status-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-ra-pulse {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    flex-shrink: 0;
}

.mp-ra-pulse span {
    display: block;
    width: 3px;
    background: #fea520;
    border-radius: 2px;
    animation: mpPulse 0.8s infinite ease-in-out alternate;
}

.mp-ra-pulse span:nth-child(1) { height: 6px; animation-delay: 0.1s; }

.mp-ra-pulse span:nth-child(2) { height: 14px; animation-delay: 0.3s; }

.mp-ra-pulse span:nth-child(3) { height: 10px; animation-delay: 0.2s; }

@keyframes mpPulse {
    0% { height: 4px; }
    100% { height: 14px; }
}

.mp-ra-status {
    font: 600 0.84rem Inter, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f8fafc;
}

.mp-ra-voice-box {
    flex-shrink: 0;
    max-width: 220px;
}

.mp-ra-speed-box {
    flex-shrink: 0;
}

.mp-ra-select {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    font: 600 0.78rem Inter, sans-serif;
    outline: none;
    cursor: pointer;
    max-width: 100%;
}

.mp-ra-speed-select {
    width: auto;
    padding: 6px 8px;
}

.mp-ra-select option {
    background: #1e293b;
    color: #ffffff;
}

.mp-ra-close-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    opacity: 0.7;
}

.mp-ra-close-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

/* Mobile responsive drawer for navigation & bottom-docked audio bar */
@media (max-width: 860px) {
.mp-ca-nav-sidebar {
        position: fixed;
        top: var(--portal-header-height, 56px);
        left: 0;
        bottom: 0;
        height: calc(100vh - var(--portal-header-height, 56px));
        height: calc(100dvh - var(--portal-header-height, 56px));
        width: min(340px, 86vw);
        z-index: 1050;
        transform: translateX(-100%);
        box-shadow: 6px 0 32px rgba(15, 23, 42, 0.28);
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }

.mp-ca-layout.mp-ca-drawer-open .mp-ca-nav-sidebar {
        transform: translateX(0);
    }

.nav-article-header {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.88rem;
    }

.nav-sub-item {
        min-height: 40px;
        padding: 8px 12px 8px 0;
        font-size: 0.82rem;
    }

.mp-ra-player-fixed {
        bottom: calc(var(--bottom-nav-height, 60px) + 8px);
        width: calc(100% - 16px);
        max-width: 480px;
        padding: 8px 12px;
        border-radius: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

.mp-ra-player-inner {
        flex-wrap: wrap;
        gap: 6px;
    }

.mp-ra-status-box {
        order: 1;
        width: calc(100% - 40px);
    }

.mp-ra-close-btn {
        order: 2;
    }

.mp-ra-controls-row {
        order: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 6px;
    }

.mp-ra-voice-box {
        max-width: 110px;
    }

.mp-ca-floating-ra {
        bottom: calc(var(--bottom-nav-height, 60px) + 14px);
        right: 14px;
    }

}

/* Document Content Area — fills full width of content pane */
.mp-ca-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 32px 48px 140px;
    box-sizing: border-box;
}

/* Guard against AOS or external animation libraries hiding agreement headings */
.mp-ca-content [data-aos],
#mp-ca-content [data-aos],
.mp-ca-main-pane [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (max-width: 860px) {
.mp-ca-content {
        padding: 16px 14px 140px;
    }

}

.clause-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 14px;
    position: relative;
    padding: 8px 12px 8px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}

.clause-row:hover {
    background: rgba(32, 65, 100, 0.04);
}

body.dark-mode .clause-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.clause-row.clause-reading {
    background: rgba(254, 165, 32, 0.18) !important;
    outline: 2px solid #fea520;
}

.clause-row.clause-highlighted {
    background: rgba(32, 65, 100, 0.15) !important;
    transition: background 1s ease;
}

.clause-number {
    flex: 0 0 64px;
    font-weight: 700;
    color: #204164;
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

body.dark-mode .clause-number {
    color: #60a5fa;
}

.clause-number:hover {
    color: #fea520;
}

.clause-text {
    flex: 1;
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--on-surface, #1e293b);
    min-width: 0;
}

body.dark-mode .clause-text {
    color: #e2e8f0;
}

.clause-text strong {
    display: block;
    font-size: 1.08em;
    color: #204164;
    margin-bottom: 6px;
    font-family: var(--font-body, 'Manrope', sans-serif);
}

body.dark-mode .clause-text strong {
    color: #f1f5f9;
}

.clause-row.level-1 { margin-left: 0; }

.clause-row.level-2 { margin-left: 24px; width: calc(100% - 24px); }

.clause-row.level-3 { margin-left: 48px; width: calc(100% - 48px); }

/* Mobile-first Clause Layout & Indentation */
@media (max-width: 768px) {
.clause-row {
        flex-direction: column;
        padding: 10px 10px;
        margin-bottom: 12px;
        border-radius: 10px;
        background: transparent;
    }

.clause-row:hover,
    .clause-row:active {
        background: rgba(32, 65, 100, 0.05);
    }

body.dark-mode .clause-row:hover,
    body.dark-mode .clause-row:active {
        background: rgba(255, 255, 255, 0.05);
    }

.clause-number {
        flex: none;
        display: inline-flex;
        align-items: center;
        width: fit-content;
        margin-bottom: 6px;
        font-size: 0.82rem;
        font-weight: 800;
        color: #204164;
        background: rgba(32, 65, 100, 0.08);
        padding: 3px 8px;
        border-radius: 6px;
        letter-spacing: 0.02em;
    }

body.dark-mode .clause-number {
        background: rgba(147, 197, 253, 0.15);
        color: #93c5fd;
    }

.clause-text {
        width: 100%;
        font-size: 0.95rem;
        line-height: 1.62;
    }

.clause-row.level-2 {
        margin-left: 8px;
        width: calc(100% - 8px);
        border-left: 2px solid rgba(32, 65, 100, 0.15);
        padding-left: 10px;
    }

.clause-row.level-3 {
        margin-left: 16px;
        width: calc(100% - 16px);
        border-left: 2px solid rgba(254, 165, 32, 0.45);
        padding-left: 10px;
    }

.mp-ca-content h1 {
        font-size: 1.35rem;
        margin: 24px 0 12px;
    }

.mp-ca-content h2 {
        font-size: 1.15rem;
        margin: 20px 0 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

}

/* Font Size Scaling Attributes */
.mp-ca-content[data-font-size="medium"] .clause-text {
    font-size: 1.08rem !important;
    line-height: 1.7 !important;
}

.mp-ca-content[data-font-size="medium"] h1 {
    font-size: 1.6rem !important;
}

.mp-ca-content[data-font-size="medium"] h2 {
    font-size: 1.3rem !important;
}

.mp-ca-content[data-font-size="large"] .clause-text {
    font-size: 1.22rem !important;
    line-height: 1.78 !important;
}

.mp-ca-content[data-font-size="large"] h1 {
    font-size: 1.85rem !important;
}

.mp-ca-content[data-font-size="large"] h2 {
    font-size: 1.45rem !important;
}

.mp-ca-content h1 {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 1.55rem;
    font-weight: 800;
    color: #204164;
    margin: 36px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #fea520;
    position: relative !important;
}

.mp-ca-content h2 {
    position: relative !important;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #204164;
    margin: 28px 0 12px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    line-height: 1.35;
}

.mp-ca-content h2 .tab {
    display: inline-block;
    min-width: 32px;
    flex-shrink: 0;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-weight: 700;
    color: #204164;
    line-height: inherit;
}

.mp-ca-content h2 .article-actions,
.mp-ca-content h1 .article-actions {
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.article-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.article-note-btn,
.article-share-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.article-note-btn:hover {
    color: #fea520;
    background: rgba(254, 165, 32, 0.12);
}

.article-share-btn:hover {
    color: #204164;
    background: rgba(32, 65, 100, 0.08);
}

body.dark-mode .article-note-btn {
    color: #64748b;
}

body.dark-mode .article-note-btn:hover {
    color: #fea520;
    background: rgba(254, 165, 32, 0.2);
}

body.dark-mode .article-share-btn:hover {
    color: #93c5fd;
    background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 861px) {
.mp-ca-content h2,
    .mp-ca-content .loa-container > h2 {
        cursor: pointer;
        transition: background 0.15s ease;
        border-radius: 8px;
        padding: 4px 8px;
        margin-left: -8px;
    }

.mp-ca-content h2:hover,
    .mp-ca-content .loa-container > h2:hover {
        background: rgba(32, 65, 100, 0.03);
    }

body.dark-mode .mp-ca-content h2:hover,
    body.dark-mode .mp-ca-content .loa-container > h2:hover {
        background: rgba(255, 255, 255, 0.03);
    }

}

/* the new surfaces toggle with the hidden attribute; scoped so no other portal
   pattern that overrides [hidden] is touched */
.spot-seltb[hidden], .spot-card[hidden], .spot-toast[hidden], .cav-menu[hidden],
.cav__col--text[hidden], .cth-comp__open[hidden], .cth-comp__form[hidden] { display: none !important; }

/* =================================================================
   COLLECTIVE AGREEMENT NOTES (2026-09-20 redesign)
   Spot notes: the highlight IS the quote — selection toolbar → dashed
   draft mark → anchored composer; popover on a saved mark (hover = read,
   click = sticky; Edit / Delete in place). Clause view: ONE DOM, two
   layouts (.cav--panel | .cav--modal), header + action band, the clause
   text with live marks, and THE THREAD (.cth): every note on the clause
   in one list — layer chips, search, sort, cards, docked composer.
   Tokens only (oecta-tokens.css: --oecta-highlight-*), tonal sectioning,
   amber as fill/dot/rail never text, 44px targets, 16px inputs,
   motion = transform/opacity under prefers-reduced-motion: no-preference.
   Source of truth for the design: CA-NOTES-MOCKUPS-2026-09-20/.
   ================================================================= */

/* ── Marks (the highlight IS the quote) ─────────────────────── */
.spot-highlight {
    background: var(--oecta-highlight-personal);
    color: inherit;
    border-radius: 2px;
    padding: 1px 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    text-decoration: underline;
    text-decoration-color: var(--oecta-highlight-personal-underline);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: opacity var(--oecta-duration-fast) var(--oecta-ease);
}

.spot-highlight:hover { text-decoration-thickness: 3px; }

.spot-highlight:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

.spot-highlight--draft { text-decoration-style: dashed; }

.spot-highlight-office {
    background: var(--oecta-highlight-office);
    text-decoration-color: var(--oecta-highlight-office-underline);
}

.spot-highlight.is-active { text-decoration-thickness: 3px; }

.spot-highlight__pin {
    font-size: 14px !important;
    vertical-align: -2px;
    margin-right: 2px;
    color: var(--oecta-on-surface-variant);
    text-decoration: none;
    display: inline-block;
    user-select: none;
}

/* Save / jump pulse — essential feedback, opacity only, under 700ms */
@media (prefers-reduced-motion: no-preference) {
.spot-highlight.is-pulse { animation: spot-pulse 640ms var(--oecta-ease) 1; }

}

@keyframes spot-pulse {
    0%   { opacity: 1; }
    35%  { opacity: 0.45; }
    100% { opacity: 1; }
}

/* ── Floating surfaces share one elevation recipe ───────────── */
.ca-float {
    position: fixed;
    z-index: var(--oecta-z-tooltip);
    background: var(--oecta-surface-lowest);
    border-radius: var(--oecta-radius-lg);
    box-shadow: var(--oecta-shadow-xl), var(--oecta-shadow-sm);
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
.ca-float { animation: ca-float-in var(--oecta-duration-base) var(--oecta-ease) 1; }

}

@keyframes ca-float-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Selection toolbar (glass, two 44px buttons) ────────────── */
.spot-seltb {
    position: fixed;
    z-index: var(--oecta-z-tooltip);
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: var(--oecta-radius-pill);
    background: var(--oecta-glass-bg);
    -webkit-backdrop-filter: blur(var(--oecta-glass-blur));
    backdrop-filter: blur(var(--oecta-glass-blur));
    box-shadow: var(--oecta-shadow-xl), var(--oecta-shadow-sm);
}

.spot-seltb__btn {
    min-width: 44px; min-height: 44px;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: var(--oecta-radius-pill);
    background: transparent;
    color: var(--oecta-on-surface);
    font: 600 13px/1 var(--oecta-font-body);
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    transition: background var(--oecta-duration-fast) var(--oecta-ease);
}

.spot-seltb__btn .material-icons-outlined { font-size: 20px; color: var(--oecta-primary-container); }

.spot-seltb__btn:hover { background: var(--oecta-surface-container); }

.spot-seltb__btn:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

.spot-seltb__btn.is-primary { background: var(--oecta-primary-container); color: var(--oecta-on-primary); }

.spot-seltb__btn.is-primary .material-icons-outlined { color: inherit; }

.spot-seltb__btn.is-primary:hover { background: var(--oecta-primary-hover); }

/* ── Chips: personal (amber fill, dark text) / office (navy) ── */
.ca-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px 0 7px;
    border-radius: var(--oecta-radius-sm);
    font: 700 11px/1 var(--oecta-font-body);
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: var(--oecta-chip-payment-bg);
    color: var(--oecta-chip-payment-fg);
}

.ca-chip .material-icons-outlined { font-size: 14px; }

.ca-chip.is-office {
    background: color-mix(in srgb, var(--oecta-primary-container) 12%, transparent);
    color: var(--oecta-primary-container);
}

.ca-chip.is-internal { background: var(--oecta-error-soft); color: var(--oecta-error); }

body.dark-mode .ca-chip { background: color-mix(in srgb, var(--oecta-accent) 22%, transparent); color: var(--oecta-on-surface); }

body.dark-mode .ca-chip.is-office { background: color-mix(in srgb, var(--oecta-primary-container) 22%, transparent); color: var(--oecta-on-surface); }

body.dark-mode .ca-chip.is-internal { background: color-mix(in srgb, var(--oecta-error) 22%, transparent); color: var(--oecta-on-surface); }

.ca-meta {
    font-family: var(--oecta-font-mono);
    font-size: 12px;
    color: var(--oecta-on-surface-variant);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Textarea (16px — no iOS zoom; the .oecta-input focus recipe) ── */
.ca-ta {
    display: block;
    width: 100%;
    min-height: 92px;
    resize: vertical;
    font-family: var(--oecta-font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--oecta-on-surface);
    background: var(--oecta-surface-high);
    border: 1.5px solid transparent;
    border-radius: var(--oecta-radius-md);
    padding: 10px 12px;
    box-sizing: border-box;
    transition: background var(--oecta-duration-fast) var(--oecta-ease), box-shadow var(--oecta-duration-fast) var(--oecta-ease);
}

.ca-ta.is-tall { min-height: 124px; }

.ca-ta::placeholder { color: var(--oecta-text-subtle); }

.ca-ta:focus {
    outline: none;
    background: var(--oecta-surface-lowest);
    border-color: var(--oecta-outline-variant);
    box-shadow: var(--oecta-focus-ring), inset 0 -2px 0 var(--oecta-accent);
}

body.dark-mode .ca-ta:focus { background: var(--oecta-surface-low); }

/* ── Buttons on light surfaces (44px) ───────────────────────── */
.ca-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; min-width: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--oecta-radius-md);
    background: transparent;
    color: var(--oecta-primary-container);
    font: 600 14px/1 var(--oecta-font-body);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--oecta-duration-fast) var(--oecta-ease), transform var(--oecta-duration-fast) var(--oecta-ease);
}

.ca-btn .material-icons-outlined { font-size: 18px; }

.ca-btn:hover { background: var(--oecta-surface-container); }

.ca-btn:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

.ca-btn[disabled] { opacity: 0.6; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
.ca-btn:active { transform: translateY(1px) scale(0.98); }

}

.ca-btn.is-accent {
    background: var(--oecta-accent);
    color: var(--oecta-on-surface);             /* dark text on amber (7.8:1); never white on amber */
    box-shadow: var(--oecta-shadow-accent);
}

.ca-btn.is-accent:hover { background: var(--oecta-accent-container); box-shadow: var(--oecta-shadow-accent-hover); }

.ca-btn.is-accent:focus-visible { box-shadow: var(--oecta-focus-ring-accent); }

.ca-btn.is-danger { color: var(--oecta-error); }

.ca-btn.is-danger:hover { background: var(--oecta-error-soft); }

body.dark-mode .ca-btn.is-danger:hover { background: color-mix(in srgb, var(--oecta-error) 22%, transparent); }

.ca-btn.is-danger-fill { background: var(--oecta-error); color: var(--oecta-on-primary); }

.ca-btn.is-quiet { color: var(--oecta-on-surface-variant); }

.ca-btn.is-sm { padding: 0 10px; font-size: 13px; }

.ca-kbd {
    font-family: var(--oecta-font-mono);
    font-size: 11px;
    color: var(--oecta-on-surface-variant);
    white-space: nowrap;
}

.ca-card__confirm {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin: 4px -6px 0;
    padding: 6px 8px 4px;
    border-radius: var(--oecta-radius-md);
    background: var(--oecta-error-soft);
    font: 500 13px/1.3 var(--oecta-font-body);
    color: var(--oecta-on-surface);
}

.ca-card__confirm span { flex: 1; min-width: 120px; }

body.dark-mode .ca-card__confirm { background: color-mix(in srgb, var(--oecta-error) 18%, transparent); }

/* ── The spot card: anchored composer + popover (320px, amber rail) ── */
.spot-card {
    width: 320px;
    max-width: calc(100vw - 16px);
    padding: 12px 14px 10px 17px;
    color: var(--oecta-on-surface);
    box-shadow: inset 3px 0 0 var(--oecta-accent), var(--oecta-shadow-xl), var(--oecta-shadow-sm);
}

.spot-card.is-office { box-shadow: inset 3px 0 0 var(--oecta-primary-container), var(--oecta-shadow-xl), var(--oecta-shadow-sm); }

.spot-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.spot-card__head .ca-meta { margin-left: auto; }

.spot-card__body { margin: 0 0 6px; overflow-wrap: anywhere; }

.spot-card__foot { display: flex; align-items: center; gap: 2px; margin-top: 6px; }

.spot-card__foot .ca-kbd { margin-right: auto; }

.spot-card__actions { display: flex; align-items: center; gap: 0; margin: 2px -6px 0; flex-wrap: wrap; }

.spot-card__actions .ca-btn { padding: 0 10px; font-size: 13px; }

.spot-card__actions .is-open { margin-left: auto; }

.spot-card__handle { display: none; }

/* ── Toast with one action ("Spot note saved · Undo") ───────── */
.spot-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: var(--oecta-z-toast);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 4px 4px 18px;
    min-height: 48px;
    max-width: calc(100vw - 24px);
    border-radius: var(--oecta-radius-pill) !important;
    background: var(--oecta-glass-bg-dark);
    -webkit-backdrop-filter: blur(var(--oecta-glass-blur));
    backdrop-filter: blur(var(--oecta-glass-blur));
    color: var(--oecta-on-primary);
    font: 500 14px/1.3 var(--oecta-font-body) !important;
    box-shadow: var(--oecta-shadow-xl) !important;
    box-sizing: border-box;
}

.spot-toast .ca-btn {
    color: var(--oecta-on-primary);
    background: color-mix(in srgb, var(--oecta-on-primary) 14%, transparent);
    border-radius: var(--oecta-radius-pill);
    min-height: 40px;
}

.spot-toast .ca-btn:focus-visible { box-shadow: var(--oecta-focus-ring-accent); }

@media (prefers-reduced-motion: no-preference) {
.spot-toast { animation: spot-toast-in var(--oecta-duration-base) var(--oecta-ease-spring) 1; }

}

@keyframes spot-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Rendered Markdown (note bodies) ────────────────────────── */
.cav__md { font-family: var(--oecta-font-body); font-size: 14.5px; line-height: 1.6; color: var(--oecta-on-surface); overflow-wrap: anywhere; }

.cav__md p { margin: 0 0 10px; }

.cav__md h3, .cav__md h4 {
    font-family: var(--oecta-font-display);
    font-weight: 700;
    margin: 14px 0 6px;
    color: var(--oecta-on-surface);
}

.cav__md h3 { font-size: 15px; }

.cav__md h4 { font-size: 14px; }

.cav__md ul { margin: 0 0 10px; padding-left: 20px; }

.cav__md li { margin: 0 0 5px; }

.cav__md strong { font-weight: 600; font-family: inherit; }

.cav__md hr { border: 0; height: 2px; background: var(--oecta-surface-container); margin: 12px 0; border-radius: var(--oecta-radius-pill); }

.cav__md a { color: var(--oecta-primary-container); text-decoration: underline; text-underline-offset: 2px; }

.cav__md a:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); border-radius: 2px; }

.cav__md > :last-child { margin-bottom: 0; }

/* ── Clause view (panel | modal | mobile sheet) ─────────────── */
html.cav-lock, html.cav-lock body { overflow: hidden; }

.cav-root { position: fixed; inset: 0; z-index: var(--oecta-z-overlay); pointer-events: none; }

.cav-root > * { pointer-events: auto; }

.cav-scrim {
    position: fixed; inset: 0;
    background: color-mix(in srgb, var(--oecta-primary) 55%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--oecta-duration-base) var(--oecta-ease);
}

.cav-root.mp-open .cav-scrim { opacity: 1; }

.cav {
    position: fixed;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--oecta-surface-lowest);
    color: var(--oecta-on-surface);
    box-shadow: var(--oecta-shadow-xl), var(--oecta-shadow-md);
    box-sizing: border-box;
}

.cav:focus { outline: none; }

.cav--panel {
    top: 0; right: 0; bottom: 0;
    width: min(520px, 90vw);
    height: 100dvh;
    transform: translateX(100%);
    transition: transform var(--oecta-duration-slow) var(--oecta-ease);
}

.cav-root.mp-open .cav--panel { transform: translateX(0); }

.cav--modal {
    top: 50%; left: 50%;
    width: min(880px, calc(100vw - 32px));
    height: 88dvh;
    border-radius: var(--oecta-radius-2xl);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity var(--oecta-duration-base) var(--oecta-ease), transform var(--oecta-duration-base) var(--oecta-ease-spring);
}

.cav-root.mp-open .cav--modal { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 1 · header (navy; sticky by construction — outside the scroll body) */
.cav__head {
    flex-shrink: 0;
    position: relative;
    background: var(--oecta-gradient-navy);
    color: var(--oecta-on-primary);
    padding: 14px 12px 12px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: start;
}

.cav__eyebrow {
    grid-column: 1;
    font: 700 11px/1.3 var(--oecta-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--oecta-on-primary) 78%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-top: 10px;
}

.cav .cav__title {
    grid-column: 1;
    font-family: var(--oecta-font-display) !important;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: inherit;
}

.cav__head-btns { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; gap: 0; }

.cav__ibtn {
    width: 44px; height: 44px;
    border: 0; border-radius: var(--oecta-radius-round);
    background: transparent;
    color: var(--oecta-on-primary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--oecta-duration-fast) var(--oecta-ease);
}

.cav__ibtn:hover { background: color-mix(in srgb, var(--oecta-on-primary) 14%, transparent); }

.cav__ibtn:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring-accent); }

.cav__actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.cav__ghost {
    min-height: 44px;
    padding: 0 14px 0 10px;
    border: 0; border-radius: var(--oecta-radius-pill);
    background: color-mix(in srgb, var(--oecta-on-primary) 11%, transparent);
    color: var(--oecta-on-primary);
    font: 600 13px/1 var(--oecta-font-body);
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    transition: background var(--oecta-duration-fast) var(--oecta-ease);
}

.cav__ghost .material-icons-outlined { font-size: 18px; }

.cav__ghost:hover { background: color-mix(in srgb, var(--oecta-on-primary) 20%, transparent); }

.cav__ghost:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring-accent); }

.cav__ghost[aria-pressed="true"], .cav__ghost.is-reading { background: var(--oecta-accent); color: var(--oecta-on-surface); }

/* header overflow menu (glass) */
.cav-menu {
    position: absolute;
    top: 56px; right: 14px;
    z-index: var(--oecta-z-dropdown);
    min-width: 248px;
    padding: 6px;
    border-radius: var(--oecta-radius-lg);
    background: var(--oecta-glass-bg);
    -webkit-backdrop-filter: blur(var(--oecta-glass-blur));
    backdrop-filter: blur(var(--oecta-glass-blur));
    box-shadow: var(--oecta-shadow-xl), var(--oecta-shadow-sm);
    list-style: none;
    margin: 0;
}

.cav-menu__item {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0; border-radius: var(--oecta-radius-md);
    background: transparent;
    color: var(--oecta-on-surface);
    font: 500 14px/1 var(--oecta-font-body);
    display: flex; align-items: center; gap: 10px;
    text-align: left;
    cursor: pointer;
}

.cav-menu__item .material-icons-outlined { font-size: 20px; color: var(--oecta-on-surface-variant); }

.cav-menu__item:hover { background: var(--oecta-surface-container); }

.cav-menu__item:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

/* scroll body — ONE scroller (panel, mobile sheet, narrow modal): a flex column whose
   children are the clause text and the thread's own bar / list / composer (the thread root
   is display: contents there), so the docked composer sticks to the body's bottom edge and
   the list takes the slack. The wide modal (≥1100px) makes the thread column its own scroller. */
.cav__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

.cav__col { min-width: 0; }

.cav__textacc, .cav__col--text { flex-shrink: 0; }

/* 2 · clause text — Newsreader; scoped + !important to beat the font reset */
.cav .cav__text {
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 19px;
    line-height: 1.6;
    color: var(--oecta-on-surface);
    padding: 22px 26px 8px;
    margin: 0;
    font-variation-settings: "opsz" 18;
}

.cav .cav__text .spot-highlight { text-underline-offset: 5px; }

.cav__sentence { border-radius: 3px; transition: background var(--oecta-duration-fast) var(--oecta-ease); }

.cav__sentence.is-active { background: var(--oecta-highlight-personal); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.cav__text-meta { padding: 0 26px 18px; display: flex; gap: 4px 12px; align-items: center; flex-wrap: wrap; }

/* disclosure ("Clause text", ≤768px only) */
.cav__sec-h { margin: 0; font: inherit; }

.cav__textacc { display: none; margin: 0 8px; }

.cav .cav__acc {
    width: 100%;
    min-height: 44px;
    padding: 0 6px 0 10px;
    border: 0;
    border-radius: var(--oecta-radius-md);
    background: transparent;
    color: var(--oecta-on-surface);
    font: 700 15px/1.2 var(--oecta-font-display);
    display: flex; align-items: center; gap: 8px;
    text-align: left;
    cursor: pointer;
    transition: background var(--oecta-duration-fast) var(--oecta-ease);
}

.cav__acc:hover { background: var(--oecta-surface-low); }

.cav__acc:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

.cav__acc .cav__chev { margin-left: auto; color: var(--oecta-on-surface-variant); transition: transform var(--oecta-duration-base) var(--oecta-ease); }

.cav__acc[aria-expanded="true"] .cav__chev { transform: rotate(180deg); }

.cav__count {
    font-family: var(--oecta-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--oecta-on-surface-variant);
    background: var(--oecta-surface-container);
    border-radius: var(--oecta-radius-pill);
    padding: 2px 8px;
}

/* precedents (compact rows on office cards) */
.cav__prec-h {
    font: 700 11px/1 var(--oecta-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oecta-on-surface-variant);
    margin: 14px 0 8px;
}

.cav__prec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 8px 12px;
    border-radius: var(--oecta-radius-md);
    background: var(--oecta-surface-lowest);
    margin-bottom: 6px;
}

.cav__prec-name { font: 600 14px/1.3 var(--oecta-font-body); color: var(--oecta-on-surface); margin: 0 0 2px; }

.cav__prec-cite { font-family: var(--oecta-font-mono); font-size: 12px; color: var(--oecta-on-surface-variant); }

.cav__prec-sum { font: 400 13px/1.4 var(--oecta-font-body); color: var(--oecta-on-surface-variant); margin: 2px 0 0; }

.cav__prec-link {
    width: 44px; height: 44px;
    border-radius: var(--oecta-radius-round);
    color: var(--oecta-primary-container);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}

.cav__prec-link:hover { background: var(--oecta-surface-container); }

.cav__prec-link:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

.cav__prec-link .material-icons-outlined { font-size: 18px; }

.cav__composer-foot { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.cav__composer-foot .ca-kbd { margin-right: auto; }

/* ── 3 · THE THREAD ─────────────────────────────────────────── */
.cth { display: contents; }

/* single scroller: see .cav__body */
.cth__bar {
    position: sticky; top: 0;
    z-index: var(--oecta-z-sticky);
    display: grid; gap: 8px;
    padding: 10px 16px 10px;
    background: var(--oecta-glass-bg);
    -webkit-backdrop-filter: blur(var(--oecta-glass-blur));
    backdrop-filter: blur(var(--oecta-glass-blur));
    box-shadow: var(--oecta-shadow-xs);
}

.cth__top { display: flex; align-items: center; gap: 10px; }

.cth .cth__h {
    flex: 1; min-width: 0;
    font: 700 15px/1.2 var(--oecta-font-display) !important;
    color: var(--oecta-on-surface);
    margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
}

.cth__h .cav__count { font-weight: 500; }

/* sort — native <select>, 16px (iOS zoom guard), tonal, custom chevron */
.cth__sort {
    appearance: none; -webkit-appearance: none;
    min-height: 44px;
    padding: 0 36px 0 14px;
    border: 0; border-radius: var(--oecta-radius-pill);
    background-color: var(--oecta-surface-container);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2343474e'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--oecta-on-surface);
    font: 600 16px/1 var(--oecta-font-body);
    cursor: pointer;
}

.cth__sort:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

body.dark-mode .cth__sort { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2394a3b8'><path d='M7 10l5 5 5-5z'/></svg>"); }

/* layer toggles — .oecta-filter-chip semantics at 44px, tonal */
.cth__layers { display: flex; gap: 6px; flex-wrap: wrap; }

.cth__chip {
    appearance: none; -webkit-appearance: none;
    min-height: 44px;
    padding: 0 14px 0 12px;
    border: 0; border-radius: var(--oecta-radius-pill);
    background: var(--oecta-surface-container);
    color: var(--oecta-on-surface-variant);
    font: 600 13px/1 var(--oecta-font-body);
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--oecta-duration-fast) var(--oecta-ease), color var(--oecta-duration-fast) var(--oecta-ease);
}

.cth__chip .oecta-filter-chip-count { font-family: var(--oecta-font-mono); font-size: 12px; font-weight: 500; opacity: 0.85; }

.cth__dot { width: 9px; height: 9px; border-radius: var(--oecta-radius-round); background: var(--cth-dot); flex-shrink: 0; }

.cth__chip--personal { --cth-dot: var(--oecta-accent); }

.cth__chip--office   { --cth-dot: var(--oecta-primary-container); }

.cth__chip--internal { --cth-dot: var(--oecta-error); }

.cth__chip[aria-pressed="false"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--oecta-surface-high); }

.cth__chip[aria-pressed="false"] .cth__dot { opacity: 0.35; }

.cth__chip[aria-pressed="false"]:hover { background: var(--oecta-surface-low); }

.cth__chip--personal[aria-pressed="true"] { background: var(--oecta-chip-payment-bg); color: var(--oecta-chip-payment-fg); }

.cth__chip--office[aria-pressed="true"]   { background: color-mix(in srgb, var(--oecta-primary-container) 12%, transparent); color: var(--oecta-primary-container); }

.cth__chip--internal[aria-pressed="true"] { background: var(--oecta-error-soft); color: var(--oecta-error); }

body.dark-mode .cth__chip--personal[aria-pressed="true"] { background: color-mix(in srgb, var(--oecta-accent) 22%, transparent); color: var(--oecta-on-surface); }

body.dark-mode .cth__chip--office[aria-pressed="true"]   { background: color-mix(in srgb, var(--oecta-primary-container) 24%, transparent); color: var(--oecta-on-surface); }

body.dark-mode .cth__chip--internal[aria-pressed="true"] { background: color-mix(in srgb, var(--oecta-error) 22%, transparent); color: var(--oecta-on-surface); }

.cth__chip:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

/* search — 16px input, tonal pill */
.cth__search {
    display: flex; align-items: center; gap: 8px;
    min-height: 44px;
    padding: 0 8px 0 12px;
    border-radius: var(--oecta-radius-pill);
    background: var(--oecta-surface-high);
    transition: background var(--oecta-duration-fast) var(--oecta-ease), box-shadow var(--oecta-duration-fast) var(--oecta-ease);
}

.cth__search .material-icons-outlined { font-size: 20px; color: var(--oecta-on-surface-variant); }

.cth__search input {
    flex: 1; min-width: 0;
    border: 0; background: transparent;
    font: 400 16px/1.3 var(--oecta-font-body);
    color: var(--oecta-on-surface);
    min-height: 44px;
    -webkit-appearance: none; appearance: none;
}

.cth__search input::placeholder { color: var(--oecta-text-subtle); }

.cth__search input:focus { outline: none; }

.cth__search:focus-within { background: var(--oecta-surface-lowest); box-shadow: var(--oecta-focus-ring), inset 0 -2px 0 var(--oecta-accent); }

body.dark-mode .cth__search:focus-within { background: var(--oecta-surface-low); }

.cth__status {
    display: flex; align-items: center; gap: 8px;
    margin: -2px 0 0;
    font-family: var(--oecta-font-mono);
    font-size: 12px;
    color: var(--oecta-on-surface-variant);
    min-height: 0;
}

.cth__status:empty { display: none; }

.cth__status .ca-btn { min-height: 32px; padding: 0 8px; font-size: 12px; margin-left: auto; }

/* list */
.cth__list { display: grid; gap: 8px; padding: 4px 16px 14px; align-content: start; flex: 1 0 auto; }

.cth__loading { display: flex; align-items: center; gap: 8px; padding: 20px 8px; color: var(--oecta-on-surface-variant); font: 500 13px/1 var(--oecta-font-body); }

@media (prefers-reduced-motion: no-preference) {
.cth__loading .material-icons-outlined { animation: cth-spin 1s linear infinite; }

}

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

.cth__empty.oecta-empty-state { padding: 28px 16px 20px; gap: 6px; }

.cth__empty .oecta-empty-state-icon { font-size: 32px; width: auto; height: auto; }

.cth__empty .oecta-empty-state-note { color: var(--oecta-on-surface-variant); }

/* comment card — tonal, layer rail, no borders */
.cth-c {
    --cth-rail: var(--oecta-accent);
    background: var(--oecta-surface-low);
    border-radius: var(--oecta-radius-lg);
    padding: 10px 12px 4px 16px;
    box-shadow: var(--oecta-shadow-xs), inset 3px 0 0 var(--cth-rail);
    transition: background var(--oecta-duration-base) var(--oecta-ease);
}

.cth-c:focus { outline: none; }

.cth-c:focus-visible { box-shadow: var(--oecta-focus-ring), inset 3px 0 0 var(--cth-rail); }

.cth-c.is-flash { background: var(--oecta-surface-container); }

.cth-c--office   { --cth-rail: var(--oecta-primary-container); }

.cth-c--internal { --cth-rail: var(--oecta-error); }

.cth-c.is-draft  { --cth-rail: color-mix(in srgb, var(--oecta-primary-container) 45%, transparent); }

.cth-c__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

.cth-c__head .ca-meta { margin-left: auto; white-space: normal; }

.cth-pill-draft {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 8px;
    border-radius: var(--oecta-radius-sm);
    background: var(--oecta-warning-soft);
    color: var(--oecta-on-surface);
    font: 700 10px/1 var(--oecta-font-body);
    letter-spacing: 0.08em; text-transform: uppercase;
}

body.dark-mode .cth-pill-draft { background: color-mix(in srgb, var(--oecta-warning) 26%, transparent); }

/* anchored excerpt — Newsreader italic; the whole row jumps to the highlight */
.cth-c__q {
    width: calc(100% + 8px);
    display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 6px;
    min-height: 44px;
    margin: 0 0 4px -8px;
    padding: 6px 4px 6px 8px;
    border: 0; border-radius: var(--oecta-radius-md);
    background: transparent;
    color: var(--oecta-on-surface);
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--oecta-duration-fast) var(--oecta-ease);
}

.cth-c__q:hover { background: var(--oecta-surface-container); }

.cth-c__q:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

.cth-c__q .material-icons-outlined { font-size: 18px; color: var(--oecta-on-surface-variant); }

.cav .cth-c__qt {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cth-c .cav__md { font-size: 14px; }

.cth-c__tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 2px; }

.cth-c .cav__prec { background: var(--oecta-surface-lowest); }

.cth-c .cav__prec-h { margin-top: 10px; }

.cth-c__acts { display: flex; gap: 0; flex-wrap: wrap; margin: 4px 0 0 -8px; }

.cth-c__acts .ca-btn { padding: 0 10px; font-size: 13px; }

.cth-c__acts .is-right { margin-left: auto; }

.cth-c .ca-card__confirm { margin: 6px 0 4px -8px; }

.cth-c__edit { margin: 2px 0 4px; }

.cth-c__edit .ca-ta { min-height: 80px; }

/* composer — docked at the bottom, glass, collapsed until opened; it ADDS */
.cth-comp {
    position: sticky; bottom: 0;
    z-index: var(--oecta-z-sticky);
    margin-top: auto;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--oecta-glass-bg);
    -webkit-backdrop-filter: blur(var(--oecta-glass-blur));
    backdrop-filter: blur(var(--oecta-glass-blur));
}

.cth-comp__open {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0; border-radius: var(--oecta-radius-pill);
    background: var(--oecta-surface-high);
    color: var(--oecta-on-surface-variant);
    font: 400 15px/1 var(--oecta-font-body);
    display: flex; align-items: center; gap: 10px;
    text-align: left;
    cursor: text;
    box-sizing: border-box;
    box-shadow: var(--oecta-shadow-sm);
}

.cth-comp__open .material-icons-outlined { font-size: 20px; color: var(--oecta-primary-container); }

.cth-comp__open:hover { background: var(--oecta-surface-container); }

.cth-comp__open:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

.cth-comp__open.is-disabled { cursor: default; box-shadow: none; }

.cth-comp__form { display: grid; gap: 8px; }

.cth-comp__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cth-comp__hint { font: 400 12px/1.3 var(--oecta-font-body); color: var(--oecta-on-surface-variant); }

.cth-comp .cav__composer-foot { margin-top: 0; }

.cth-comp .ca-ta { min-height: 88px; }

/* the thread pane sits on -low in the modal column, so cards go -lowest */
.cav--modal .cth-c { background: var(--oecta-surface-lowest); }

.cav--modal .cth-c .cav__prec { background: var(--oecta-surface-low); }

/* modal: two columns at ≥1100px — the right column IS the thread and scrolls itself */
@media (min-width: 1100px) {
.cav--modal .cav__body { display: grid; grid-template-columns: 55fr 45fr; overflow: hidden; }

.cav--modal .cav__col { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

.cav--modal .cth { display: flex; flex-direction: column; }

/* the column scrolls itself */
.cav--modal .cav__col--side { background: var(--oecta-surface-low); }

.cav--modal .cth__bar { background: color-mix(in srgb, var(--oecta-surface-low) 82%, transparent); }

.cav--modal .cth-comp { background: color-mix(in srgb, var(--oecta-surface-low) 82%, transparent); }

.cav--modal .cth__chip[aria-pressed="false"] { box-shadow: inset 0 0 0 1.5px var(--oecta-surface-container); }

}

/* ── ≤768px: cards become bottom sheets, the clause view one full-height sheet ── */
@media (max-width: 768px) {
.spot-card,
    .spot-card.oecta-sheet.is-bottom {
        position: fixed;
        left: 0 !important; right: 0; bottom: 0; top: auto !important;
        width: auto; max-width: none;
        max-height: 55dvh;
        border-radius: var(--oecta-radius-xl) var(--oecta-radius-xl) 0 0;
        padding: 6px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 19px;
        overflow-y: auto;
        z-index: var(--oecta-z-tooltip);
        transform: none;
        transition: none;
        animation: none;
    }

.spot-card__handle {
        display: block;
        width: 36px; height: 4px;
        border-radius: var(--oecta-radius-pill);
        background: var(--oecta-outline-variant);
        margin: 4px auto 12px;
    }

.spot-toast { bottom: calc(var(--oecta-bottom-nav-height) + 16px + env(safe-area-inset-bottom, 0px)); }

.cav--panel, .cav--modal {
        inset: 0;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        transform: none;
        opacity: 1;
        transition: transform var(--oecta-duration-slow) var(--oecta-ease);
        transform: translateY(100%);
    }

.cav-root.mp-open .cav--panel, .cav-root.mp-open .cav--modal { transform: translateY(0); }

.cav__head { padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 12px 16px; }

.cav .cav__title { font-size: 20px; }

.cav__actions { gap: 4px; }

.cav__ghost { padding: 0 12px 0 8px; }

.cav__ghost .cav__ghost-label { display: none; }

.cav__ghost[aria-pressed="true"] .cav__ghost-label { display: none; }

.cav .cav__text { font-size: 18px; padding: 18px 16px 6px; }

.cav__text-meta { padding: 0 16px 14px; }

.cav .cav__acc { min-height: 48px; }

.cav__textacc { display: block; margin: 6px 8px 0; }

.cth__bar { padding: 8px 12px; }

.cth__list { padding: 4px 12px 12px; }

.cth-comp { padding-left: 12px; padding-right: 12px; }

}

/* ── Reduced motion: neutralise the non-essential motion ────── */
@media (prefers-reduced-motion: reduce) {
.ca-float, .spot-toast { animation: none; }

.cav--panel, .cav--modal, .cav-scrim, .cav__acc .cav__chev, .cth-c { transition: none; }

.spot-highlight.is-pulse { animation: spot-pulse 90ms linear 1; }

}

/* In-Line Clause Badges — Left-Aligned Icon-Only Adjacent to Article/Clause (Zero Indentation Disruption) */
.admin-clause-has-note-badge {
  position: absolute;
  top: 8px;
  left: -28px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  transition: all 0.15s;
  z-index: 5;
}

.admin-clause-has-note-badge.admin-header-has-note-badge {
  position: absolute !important;
  left: -28px !important;
  top: 4px !important;
  margin: 0 !important;
  align-self: auto !important;
}

.admin-clause-has-note-badge.is-published {
  background: color-mix(in srgb, var(--con-accent, #204164) 12%, transparent);
  color: var(--con-accent, #204164);
}

.admin-clause-has-note-badge.is-published:hover {
  background: var(--con-accent, #204164);
  color: #ffffff;
  transform: scale(1.1);
}

.admin-clause-has-note-badge.is-draft {
  background: color-mix(in srgb, var(--con-dot-warn, #f59e0b) 14%, transparent);
  color: var(--con-warn-text, #b45309);
}

.admin-clause-has-note-badge.is-draft:hover {
  background: var(--con-dot-warn, #f59e0b);
  color: #ffffff;
  transform: scale(1.1);
}

/* A note with CanLII authorities attached: navy pill with the count (folded in from the
   admin copy, 2026-09-21 — one badge recipe on every surface). */
.admin-clause-has-note-badge.has-precedent {
  background: var(--oecta-primary-container);
  color: var(--oecta-surface-lowest);
  width: auto;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--oecta-radius-pill);
  gap: 3px;
  left: -36px;
}

.admin-clause-has-note-badge.has-precedent:hover {
  background: var(--oecta-primary-hover);
  transform: scale(1.08);
}

.admin-clause-prec-count {
  font-size: 10px;
  font-weight: var(--oecta-weight-extrabold);
  font-family: var(--oecta-font-mono);
}

.admin-clause-has-note-badge span.material-icons,
.admin-clause-has-note-badge span.material-icons-outlined {
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 860px) {
.mp-ca-content {
    padding-left: 32px !important;
  }

.admin-clause-has-note-badge,
  .admin-clause-has-note-badge.admin-header-has-note-badge {
    left: -24px !important;
  }

}

/* Hide floating Read Aloud button on screen */
.mp-ca-floating-ra,
#mp-ca-floating-ra {
  display: none !important;
}

/* --- Spot Note in Notebook Drawer --- */
.spot-note-quote {
    border-left: 3px solid #fea520;
    padding: 4px 8px;
    margin: 6px 0 8px 0;
    font-style: italic;
    font-size: 0.82rem;
    color: #475569;
    background: rgba(254, 165, 32, 0.08);
    border-radius: 0 4px 4px 0;
    max-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mp-nb-layer-tag.spot {
    background: rgba(254, 165, 32, 0.15);
    color: #b45309;
    font-weight: 700;
}

body.dark-mode .spot-note-quote {
    color: #cbd5e1;
    background: rgba(254, 165, 32, 0.12);
}

body.dark-mode .mp-nb-layer-tag.spot {
    background: rgba(254, 165, 32, 0.2);
    color: #fcd34d;
}

body.dark-mode .mp-ca-content h1,
body.dark-mode .mp-ca-content h2 {
    color: #f8fafc;
}

body.dark-mode .mp-ca-content h2 .tab {
    color: #93c5fd;
}

/* Responsive Table Wrapper */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0 24px;
    border-radius: 8px;
    background: var(--surface-container-lowest, #ffffff);
    box-shadow: 0 1px 4px rgba(32, 65, 100, 0.06);
    scrollbar-width: thin;
}

body.dark-mode .table-wrapper {
    background: #1e293b;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.salary-table {
    min-width: 520px;
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.88rem;
}

.salary-table th, .salary-table td {
    padding: 8px 12px;
    border: 1px solid rgba(32, 65, 100, 0.12);
    text-align: left;
}

.salary-table th {
    background: rgba(32, 65, 100, 0.06);
    font-weight: 700;
    color: #204164;
}

body.dark-mode .salary-table th {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .salary-table td {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Floating Return Banner in Collective Agreement Viewer */
.ca-return-banner {
    position: sticky;
    top: 68px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px auto;
    max-width: 720px;
    padding: 8px 16px;
    background: #204164;
    border: 1px solid rgba(254, 165, 32, 0.35);
    border-radius: 999px;
    color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(32, 65, 100, 0.3), 0 8px 10px -6px rgba(32, 65, 100, 0.2);
    animation: slideDownReturnBanner 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDownReturnBanner {
    from { transform: translateY(-14px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.ca-return-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: opacity 0.15s;
}

.ca-return-btn:hover {
    opacity: 0.9;
}

.ca-return-btn .material-icons-outlined {
    font-size: 18px;
    color: #fea520;
}

.ca-return-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s;
}

.ca-return-dismiss:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ca-return-dismiss .material-icons-outlined {
    font-size: 15px;
}

body.dark-mode .ca-return-banner {
    background: #0f172a;
    border-color: rgba(254, 165, 32, 0.4);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* =================================================================
   Native Collective Agreement — Search, Highlights & Hover Preview
   ================================================================= */
.mp-ca-nav-tree-wrap {
    position: relative;
}

.sidebar-search-results {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

.mp-ca-sidebar.search-active #mp-nav-tree {
    display: none;
}

.mp-ca-sidebar.search-active .sidebar-search-results {
    display: block;
}

.search-result-item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
    cursor: pointer;
    background: transparent;
}

.search-result-item:hover,
.search-result-item:focus {
    background-color: rgba(32, 65, 100, 0.08);
}

body.dark-mode .search-result-item:hover,
body.dark-mode .search-result-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
}

.search-result-item .result-text {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #475569;
}

body.dark-mode .search-result-item .result-text {
    color: #cbd5e1;
}

.search-result-item .result-id {
    font-weight: 700;
    color: #204164;
    margin-right: 4px;
}

body.dark-mode .search-result-item .result-id {
    color: #90caf9;
}

.search-result-item .result-text strong {
    background-color: #fef08a;
    color: #1e293b !important;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 700;
}

body.dark-mode .search-result-item .result-text strong {
    background-color: #fdd835;
    color: #000000 !important;
}

.search-part-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}

.search-part-a {
    background: #e0f2fe;
    color: #0369a1;
}

.search-part-b {
    background: #fef3c7;
    color: #b45309;
}

.search-part-c {
    background: #f3e8ff;
    color: #7e22ce;
}

body.dark-mode .search-part-a {
    background: rgba(3, 105, 161, 0.25);
    color: #7dd3fc;
}

body.dark-mode .search-part-b {
    background: rgba(180, 83, 9, 0.25);
    color: #fde68a;
}

body.dark-mode .search-part-c {
    background: rgba(126, 34, 206, 0.25);
    color: #d8b4fe;
}

/* In-document keyword highlighting */
.search-highlight {
    background-color: #fef08a;
    color: #0f172a;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 2px;
}

.search-highlight.current-match {
    background-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45);
    border-radius: 3px;
}

body.dark-mode .search-highlight {
    background-color: #fdd835;
    color: #000000;
}

body.dark-mode .search-highlight.current-match {
    background-color: #f59e0b;
    color: #0f172a;
    box-shadow: 0 0 0 2px rgba(253, 216, 53, 0.5);
}

/* Smooth jump highlight flash animation */
@keyframes flashHighlight {
    0% { background-color: rgba(254, 165, 32, 0.5); }
    100% { background-color: transparent; }
}

.clause-flash-highlight,
.highlight-flash {
    animation: flashHighlight 2s ease-out forwards;
}

/* Search Preview Hover Popup */
.search-preview-popup {
    display: none;
    position: fixed;
    width: 440px;
    max-height: 420px;
    background: #ffffff;
    border: 1px solid rgba(32, 65, 100, 0.15);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 25000;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

.search-preview-header {
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #204164;
    border-bottom: 2px solid #fea520;
    background: #f8fafc;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-preview-body {
    padding: 12px 18px;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.search-preview-clause {
    padding: 6px 8px;
    margin-bottom: 2px;
    border-radius: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.84rem;
    line-height: 1.55;
    color: #334155;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

.search-preview-clause:hover {
    background-color: rgba(32, 65, 100, 0.08);
}

.search-preview-clause:active {
    background-color: rgba(32, 65, 100, 0.14);
}

.search-preview-clause:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.search-preview-num {
    font-weight: 700;
    color: #ea580c;
    margin-right: 4px;
}

.search-preview-text {
    color: #475569;
}

.search-preview-empty {
    color: #94a3b8;
    font-size: 0.85rem;
    font-style: italic;
    padding: 12px 0;
    text-align: center;
}

body.dark-mode .search-preview-popup {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

body.dark-mode .search-preview-header {
    background: #0f172a;
    color: #38bdf8;
    border-bottom-color: #fea520;
}

body.dark-mode .search-preview-clause {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

body.dark-mode .search-preview-clause:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .search-preview-clause:active {
    background-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .search-preview-num {
    color: #fb923c;
}

body.dark-mode .search-preview-text {
    color: #cbd5e1;
}

/* Hide preview on mobile */
@media (max-width: 768px) {
.search-preview-popup {
        display: none !important;
    }

}

/* ─────────────────────────────────────────────────────────────────
 *  COLLECTIVE AGREEMENT FLOATING TOOLBAR & FLYOUTS (DESKTOP)
 * ───────────────────────────────────────────────────────────────── */
.mp-floating-toolbar {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 850;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.dark-mode .mp-floating-toolbar {
    background: rgba(26, 37, 54, 0.94);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.mp-tb-divider {
    width: 24px;
    height: 1px;
    background: #e2e8f0;
    margin: 2px 0;
}

body.dark-mode .mp-tb-divider {
    background: rgba(255, 255, 255, 0.12);
}

.mp-tb-group {
    position: relative;
}

.mp-tb-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    padding: 0;
}

body.dark-mode .mp-tb-btn {
    color: #94a3b8;
}

.mp-tb-btn:hover {
    background: #f1f5f9;
    color: #204164;
}

body.dark-mode .mp-tb-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

.mp-tb-btn.active {
    background: #e0e7ff;
    color: #204164;
}

body.dark-mode .mp-tb-btn.active {
    background: rgba(32, 65, 100, 0.5);
    color: #fea520;
}

.mp-tb-btn svg {
    pointer-events: none;
}

/* ── Flyout Menus ── */
.mp-tb-flyout {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    width: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1200;
    overflow: hidden;
    pointer-events: none;
}

body.dark-mode .mp-tb-flyout {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.mp-tb-flyout.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

.mp-flyout-header {
    padding: 10px 14px 8px;
    font-size: 0.68em;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid #f1f5f9;
}

body.dark-mode .mp-flyout-header {
    border-color: rgba(255, 255, 255, 0.08);
}

.mp-flyout-section {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}

body.dark-mode .mp-flyout-section {
    border-color: rgba(255, 255, 255, 0.08);
}

.mp-flyout-label {
    font-size: 0.72em;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

body.dark-mode .mp-flyout-label {
    color: #94a3b8;
}

.mp-settings-font-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.mp-settings-font-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

body.dark-mode .mp-settings-font-btn {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.mp-settings-font-btn:hover {
    background: #e2e8f0;
}

body.dark-mode .mp-settings-font-btn:hover {
    background: #1e293b;
}

.mp-settings-font-btn.active {
    background: #1a365d;
    color: #fff;
    border-color: #1a365d;
}

body.dark-mode .mp-settings-font-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.mp-settings-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.mp-settings-slider-label {
    font-size: 0.76em;
    font-weight: 600;
    color: #475569;
}

body.dark-mode .mp-settings-slider-label {
    color: #cbd5e1;
}

.mp-settings-slider-val {
    font-size: 0.72em;
    font-weight: 700;
    color: #64748b;
}

.mp-settings-slider {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    accent-color: #204164;
    cursor: pointer;
}

.mp-flyout-actions {
    padding: 8px 14px;
    display: flex;
    justify-content: flex-end;
}

.mp-flyout-btn-reset {
    font-size: 0.74em;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.mp-flyout-btn-reset:hover {
    color: #ef4444;
}

/* Flyout toggle switch */
.mp-flyout-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82em;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
}

body.dark-mode .mp-flyout-toggle {
    color: #cbd5e1;
}

.mp-flyout-toggle input {
    display: none;
}

.mp-toggle-switch {
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.mp-toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.mp-flyout-toggle input:checked + .mp-toggle-switch {
    background: #204164;
}

.mp-flyout-toggle input:checked + .mp-toggle-switch::after {
    transform: translateX(16px);
}

/* Export flyout items */
.mp-flyout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    font-family: inherit;
    color: #334155;
    text-decoration: none;
    box-sizing: border-box;
}

body.dark-mode .mp-flyout-item {
    color: #cbd5e1;
}

.mp-flyout-item:hover {
    background: #f1f5f9;
}

body.dark-mode .mp-flyout-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.mp-flyout-badge {
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #204164;
    color: #fff;
    border-radius: 6px;
    font-size: 0.65em;
    font-weight: 800;
    flex-shrink: 0;
}

.mp-flyout-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mp-flyout-item-title {
    font-size: 0.86em;
    font-weight: 600;
    color: #1e293b;
}

body.dark-mode .mp-flyout-item-title {
    color: #f1f5f9;
}

.mp-flyout-item-desc {
    font-size: 0.72em;
    font-weight: 400;
    color: #94a3b8;
}

/* Hide on mobile screens */
@media (max-width: 860px) {
.mp-floating-toolbar {
        display: none !important;
    }

}

/* ─────────────────────────────────────────────────────────────────
 *  SLIDE-OVER NOTEBOOK DRAWER
 * ───────────────────────────────────────────────────────────────── */
.mp-ca-notebook-panel {
    position: fixed;
    top: calc(var(--portal-header-height, 64px) + 8px);
    right: 16px;
    width: 420px;
    max-width: calc(100vw - 32px);
    height: calc(100vh - var(--portal-header-height, 64px) - 24px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(32, 65, 100, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mpNbSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .mp-ca-notebook-panel {
    background: #0f172a;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
}

@keyframes mpNbSlideIn {
    from { transform: translateX(28px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.mp-nb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #204164;
    color: #ffffff;
    flex-shrink: 0;
}

.mp-nb-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-nb-header-icon {
    font-size: 22px;
    color: #fea520;
}

.mp-nb-title {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.15;
}

.mp-nb-subtitle {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 1px;
}

.mp-nb-count-badge {
    background: #fea520;
    color: #204164;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 2px;
}

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

.mp-nb-new-btn {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: inherit;
}

.mp-nb-new-btn:hover {
    background: #fea520;
    color: #204164;
}

.mp-nb-icon-btn {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1;
}

.mp-nb-icon-btn:hover {
    background: #fea520;
    color: #204164;
}

.mp-nb-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}

.mp-nb-close:hover {
    color: #ffffff;
}

/* Nav Tabs */
.mp-nb-nav-tabs {
    display: flex;
    padding: 6px;
    background: #f1f5f9;
    gap: 4px;
    flex-shrink: 0;
}

body.dark-mode .mp-nb-nav-tabs {
    background: #1e293b;
}

.mp-nb-tab {
    flex: 1;
    padding: 6px 4px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: inherit;
}

.mp-nb-tab:hover {
    color: #204164;
    background: rgba(255, 255, 255, 0.5);
}

body.dark-mode .mp-nb-tab:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.05);
}

.mp-nb-tab.active {
    background: #ffffff;
    color: #204164;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

body.dark-mode .mp-nb-tab.active {
    background: #0f172a;
    color: #38bdf8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mp-nb-tab-badge {
    font-size: 0.65rem;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 700;
}

body.dark-mode .mp-nb-tab-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.mp-nb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.mp-nb-dot.personal { background: #fea520; }

.mp-nb-dot.office   { background: #3b82f6; }

/* Search & Filter Toolbar */
.mp-nb-toolbar {
    padding: 10px 14px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

body.dark-mode .mp-nb-toolbar {
    background: #151f32;
}

.mp-nb-search-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.mp-nb-search-icon {
    position: absolute;
    left: 10px;
    font-size: 17px;
    color: #94a3b8;
    pointer-events: none;
}

.mp-nb-search-input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.82rem;
    outline: none;
    background: #ffffff;
    color: #1e293b;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mp-nb-search-input:focus {
    border-color: #204164;
    box-shadow: 0 0 0 2px rgba(32, 65, 100, 0.15);
}

body.dark-mode .mp-nb-search-input {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

.mp-nb-controls-row {
    display: flex;
    gap: 8px;
}

.mp-nb-select {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.76rem;
    color: #334155;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

.mp-nb-select:focus {
    border-color: #204164;
}

body.dark-mode .mp-nb-select {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}

/* Inline Note Composer */
.mp-nb-composer {
    padding: 12px 14px;
    background: #ffffff;
    margin: 10px 14px 0 14px;
    border-radius: 10px;
    border-top: 3px solid #fea520;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

body.dark-mode .mp-nb-composer {
    background: #1e293b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.mp-nb-composer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-nb-composer-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #204164;
}

body.dark-mode .mp-nb-composer-title {
    color: #38bdf8;
}

.mp-nb-composer-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
}

.mp-nb-composer-close:hover {
    color: #ef4444;
}

.mp-nb-composer-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-nb-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

body.dark-mode .mp-nb-label {
    color: #94a3b8;
}

.mp-nb-input,
.mp-nb-textarea {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    background: #f8fafc;
    color: #1e293b;
    width: 100%;
    box-sizing: border-box;
}

.mp-nb-input:focus,
.mp-nb-textarea:focus {
    border-color: #204164;
    background: #ffffff;
}

body.dark-mode .mp-nb-input,
body.dark-mode .mp-nb-textarea {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

.mp-nb-textarea {
    resize: vertical;
    min-height: 64px;
}

.mp-nb-textarea.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.mp-nb-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.mp-nb-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
}

body.dark-mode .mp-nb-checkbox-label {
    color: #cbd5e1;
}

.mp-nb-composer-actions {
    display: flex;
    gap: 6px;
}

/* Notes List Body */
.mp-nb-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
}

body.dark-mode .mp-nb-body {
    background: #0f172a;
}

/* Note Cards */
.mp-nb-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    border-left: 3px solid #fea520;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mp-nb-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

body.dark-mode .mp-nb-card {
    background: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.mp-nb-card-office {
    border-left-color: #3b82f6;
    background: #fdfefe;
}

body.dark-mode .mp-nb-card-office {
    border-left-color: #38bdf8;
    background: #152238;
}

.mp-nb-card-pinned {
    box-shadow: 0 3px 10px rgba(254, 165, 32, 0.18);
}

.mp-nb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.mp-nb-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mp-nb-layer-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mp-nb-layer-tag.personal {
    background: rgba(254, 165, 32, 0.15);
    color: #d97706;
}

.mp-nb-layer-tag.office {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

body.dark-mode .mp-nb-layer-tag.personal {
    background: rgba(254, 165, 32, 0.25);
    color: #fcd34d;
}

body.dark-mode .mp-nb-layer-tag.office {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}

.mp-nb-art-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #204164;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

body.dark-mode .mp-nb-art-badge {
    background: #0f172a;
    color: #e2e8f0;
}

.mp-nb-card-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mp-nb-star-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.mp-nb-star-btn.active,
.mp-nb-star-btn:hover {
    color: #fea520;
}

.mp-nb-date {
    font-size: 0.68rem;
    color: #94a3b8;
}

.mp-nb-text {
    font-size: 0.84rem;
    line-height: 1.48;
    color: #334155;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

body.dark-mode .mp-nb-text {
    color: #cbd5e1;
}

.mp-nb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.mp-nb-card-tag {
    font-size: 0.68rem;
    background: #f1f5f9;
    color: #64748b;
    padding: 1px 6px;
    border-radius: 4px;
}

body.dark-mode .mp-nb-card-tag {
    background: #0f172a;
    color: #94a3b8;
}

.mp-nb-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.mp-nb-btn {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.15s;
}

.mp-nb-btn-primary {
    background: #204164;
    color: #ffffff;
}

.mp-nb-btn-primary:hover {
    background: #162f49;
}

.mp-nb-btn-secondary {
    background: #f1f5f9;
    color: #64748b;
}

.mp-nb-btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

body.dark-mode .mp-nb-btn-secondary {
    background: #0f172a;
    color: #cbd5e1;
}

body.dark-mode .mp-nb-btn-secondary:hover {
    background: #1e293b;
    color: #ffffff;
}

.mp-nb-btn-jump {
    background: #f1f5f9;
    color: #204164;
    margin-right: auto;
}

.mp-nb-btn-jump:hover {
    background: #204164;
    color: #ffffff;
}

body.dark-mode .mp-nb-btn-jump {
    background: #0f172a;
    color: #38bdf8;
}

body.dark-mode .mp-nb-btn-jump:hover {
    background: #38bdf8;
    color: #0f172a;
}

.mp-nb-btn-edit {
    background: transparent;
    color: #64748b;
}

.mp-nb-btn-edit:hover {
    color: #204164;
    background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .mp-nb-btn-edit {
    color: #94a3b8;
}

body.dark-mode .mp-nb-btn-edit:hover {
    color: #ffffff;
}

.mp-nb-btn-delete {
    background: transparent;
    color: #94a3b8;
}

.mp-nb-btn-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Empty State */
.mp-nb-empty {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mp-nb-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.mp-nb-empty-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #204164;
    margin: 0 0 4px 0;
}

body.dark-mode .mp-nb-empty-title {
    color: #f1f5f9;
}

.mp-nb-empty-sub {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 0 14px 0;
    line-height: 1.4;
    max-width: 260px;
}

.mp-nb-empty-cta {
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* Drawer Footer */
.mp-nb-footer {
    padding: 10px 14px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
    font-size: 0.74rem;
    color: #64748b;
}

body.dark-mode .mp-nb-footer {
    background: #151f32;
    border-color: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

.mp-nb-footer-actions {
    display: flex;
    gap: 6px;
}

.mp-nb-footer-btn {
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    transition: all 0.15s;
}

.mp-nb-footer-btn:hover {
    background: #204164;
    color: #ffffff;
}

body.dark-mode .mp-nb-footer-btn {
    background: #1e293b;
    color: #cbd5e1;
}

body.dark-mode .mp-nb-footer-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

/* ─────────────────────────────────────────────────────────────────
 *  ACCESSIBILITY MODES: HIGH CONTRAST & FOCUS MODE
 * ───────────────────────────────────────────────────────────────── */
#mp-agreement-wrapper.a11y-contrast .mp-ca-main-pane,
#mp-agreement-wrapper.a11y-contrast .mp-ca-content {
    background: #ffffff !important;
    color: #000000 !important;
}

#mp-agreement-wrapper.a11y-contrast .clause-row {
    color: #000000 !important;
    background: #ffffff !important;
    border-bottom: 2px solid #000000 !important;
}

#mp-agreement-wrapper.a11y-contrast .clause-text {
    color: #000000 !important;
    font-weight: 500 !important;
}

#mp-agreement-wrapper.a11y-contrast .clause-text strong {
    color: #000000 !important;
    font-weight: 800 !important;
}

#mp-agreement-wrapper.a11y-contrast .clause-number {
    color: #000000 !important;
    font-weight: 800 !important;
}

#mp-agreement-wrapper.a11y-contrast h1,
#mp-agreement-wrapper.a11y-contrast h2,
#mp-agreement-wrapper.a11y-contrast h3,
#mp-agreement-wrapper.a11y-contrast h4 {
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
}

#mp-agreement-wrapper.a11y-contrast a,
#mp-agreement-wrapper.a11y-contrast .cross-ref-link {
    color: #0000ee !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

#mp-agreement-wrapper.a11y-contrast .mp-ca-nav-sidebar {
    background: #ffffff !important;
    border-right: 2px solid #000000 !important;
}

#mp-agreement-wrapper.a11y-contrast .nav-article-header {
    color: #000000 !important;
}

#mp-agreement-wrapper.a11y-contrast .nav-article-header.active-article {
    border-left-color: #000000 !important;
    background: #ffff00 !important;
    color: #000000 !important;
}

#mp-agreement-wrapper.a11y-contrast .nav-num,
#mp-agreement-wrapper.a11y-contrast .nav-title {
    color: #000000 !important;
}

#mp-agreement-wrapper.a11y-focus .clause-row {
    opacity: 0.25 !important;
    transition: opacity 0.25s ease;
}

#mp-agreement-wrapper.a11y-focus .clause-row.in-view,
#mp-agreement-wrapper.a11y-focus .clause-row:hover {
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────
 *  APPEARANCE & TYPOGRAPHY SETTINGS
 * ───────────────────────────────────────────────────────────────── */
#mp-ca-content {
    --ca-zoom-factor: 1;
}

#mp-ca-content .clause-text {
    font-size: calc(0.96rem * var(--ca-zoom-factor, 1));
}

#mp-ca-content .clause-number {
    font-size: calc(0.85rem * var(--ca-zoom-factor, 1));
}

#mp-ca-content h1 {
    font-size: calc(1.75rem * var(--ca-zoom-factor, 1));
}

#mp-ca-content h2 {
    font-size: calc(1.4rem * var(--ca-zoom-factor, 1));
}

#mp-ca-content h3 {
    font-size: calc(1.15rem * var(--ca-zoom-factor, 1));
}

#mp-ca-content p,
#mp-ca-content li,
#mp-ca-content td,
#mp-ca-content th {
    font-size: calc(0.96rem * var(--ca-zoom-factor, 1));
}

/* Font family selectors on content */
#mp-ca-content[data-ca-font="inter"] {
    font-family: 'Inter', -apple-system, sans-serif !important;
}

#mp-ca-content[data-ca-font="manrope"] {
    font-family: 'Manrope', 'Inter', sans-serif !important;
}

#mp-ca-content[data-ca-font="atkinson"] {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

#mp-ca-content[data-ca-font="opendyslexic"] {
    font-family: 'OpenDyslexic', 'Open Dyslexic', 'Comic Sans MS', cursive, sans-serif !important;
}

#mp-ca-content[data-ca-font] *:not(.material-icons):not(.material-icons-outlined):not([class*="material-icons"]) {
    font-family: inherit !important;
}

/* Line spacing override */
#mp-ca-content[data-line-spacing],
#mp-ca-content[data-line-spacing] p,
#mp-ca-content[data-line-spacing] li,
#mp-ca-content[data-line-spacing] td,
#mp-ca-content[data-line-spacing] th,
#mp-ca-content[data-line-spacing] .clause-text,
#mp-ca-content[data-line-spacing] .clause-text *,
#mp-ca-content[data-line-spacing] .clause-number,
#mp-ca-content[data-line-spacing] .clause-label {
    line-height: var(--user-line-spacing) !important;
}

/* Word spacing override */
#mp-ca-content[data-word-spacing],
#mp-ca-content[data-word-spacing] p,
#mp-ca-content[data-word-spacing] li,
#mp-ca-content[data-word-spacing] td,
#mp-ca-content[data-word-spacing] th,
#mp-ca-content[data-word-spacing] .clause-text,
#mp-ca-content[data-word-spacing] .clause-text * {
    word-spacing: var(--user-word-spacing) !important;
}

.mp-nb-btn-primary {
    background: #204164;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mp-nb-btn-primary:hover {
    background: #173250;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(32, 65, 100, 0.25);
}

.mp-nb-btn-secondary {
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mp-nb-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

.mp-nb-search-wrap {
    flex: 1;
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-container-low, #f8fafc);
    border-radius: 999px;
    padding: 6px 14px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mp-nb-search-icon {
    color: #94a3b8;
    font-size: 18px;
}

.mp-nb-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.88rem;
    color: #1e293b;
    font-family: inherit;
}

/* ── Bento Card Anatomy & Pastel Colors (No-Line Rule) ───────────── */
.mp-nb-card {
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    break-inside: avoid;
    position: relative;
}

.mp-nb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.mp-nb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-nb-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

/* ── Card Tags & Footer ──────────────────────────────────────────── */
.mp-nb-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.mp-nb-empty-icon {
    font-size: 48px;
    color: #fea520;
    margin-bottom: 12px;
}

[data-theme="dark"] .mp-nb-search-wrap {
    background: #1e293b;
}

[data-theme="dark"] .mp-nb-search-input {
    color: #f1f5f9;
}

/* ── Notes on the page — per-layer page visibility (rail flyout + mobile sheet) ──────
   Approved mockup 2026-09-21: three rows (swatch · label · switch) and nothing else.
   Tokens only; the swatches are the highlight tokens the marks themselves use. */
.mp-page-notes-flyout { width: 216px; padding: 8px; }

.mp-pn-row {
    display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    min-height: 40px; padding: 0 6px 0 8px; border-radius: var(--oecta-radius-md);
}

.mp-pn-row:hover { background: var(--oecta-surface-low); }

.mp-pn-row.is-clean { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--oecta-outline-variant); border-radius: 0; }

.mp-pn-row.is-clean .mp-pn-label,
.mp-pn-row.is-clean .material-icons-outlined { color: var(--oecta-on-surface-variant); }

.mp-pn-row.is-clean .material-icons-outlined { font-size: 16px; justify-self: center; }

.mp-pn-swatch { width: 10px; height: 10px; border-radius: 3px; justify-self: center; }

.mp-pn-swatch.is-office   { background: var(--oecta-highlight-office);   box-shadow: inset 0 -2px 0 var(--oecta-highlight-office-underline); }

.mp-pn-swatch.is-mine     { background: var(--oecta-highlight-personal); box-shadow: inset 0 -2px 0 var(--oecta-highlight-personal-underline); }

.mp-pn-swatch.is-internal { background: color-mix(in srgb, var(--oecta-error) 14%, transparent); box-shadow: inset 0 -2px 0 var(--oecta-error); }

.mp-pn-label { font: 500 13px/1.2 var(--oecta-font-body); color: var(--oecta-on-surface); }

/* `.mp-pn-row .mp-pn-switch` (0,2,0): the mobile sheet's generic button rule sets min-height 44px, which
   stretched the 24px track into a tall pill on the phone (found in the 375px capture, 2026-09-21). */
.mp-pn-row .mp-pn-switch {
    position: relative; width: 40px; height: 24px; min-height: 0; min-width: 0; border: 0; padding: 0; margin: 0 2px;
    border-radius: var(--oecta-radius-pill); background: var(--oecta-outline-variant); cursor: pointer;
    transition: background var(--oecta-duration-fast) var(--oecta-ease);
}

.mp-pn-switch::before { content: ""; position: absolute; inset: -10px 0; }

/* 44px hit target */
.mp-pn-switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--oecta-surface-lowest); box-shadow: var(--oecta-shadow-sm);
    transition: transform var(--oecta-duration-fast) var(--oecta-ease);
}

.mp-pn-switch[aria-checked="true"] { background: var(--oecta-primary-container); }

.mp-pn-switch[aria-checked="true"]::after { transform: translateX(16px); }

.mp-pn-switch:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

/* the "not showing everything" dot on the rail / mobile-bar button — amber as a FILL, grey when clean */
.mp-tb-dot {
    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--oecta-accent); box-shadow: 0 0 0 2px var(--oecta-surface-lowest); display: none;
}

.mp-tb-btn.is-partial .mp-tb-dot, .mp-ca-mob-icon-btn.is-partial .mp-tb-dot { display: block; }

.mp-tb-btn.is-clean .mp-tb-dot,   .mp-ca-mob-icon-btn.is-clean .mp-tb-dot   { display: block; background: var(--oecta-on-surface-variant); }

.mp-ca-mob-icon-btn { position: relative; }

.mp-ca-mob-notes-sheet .mp-page-notes-rows { padding: 4px 12px calc(12px + env(safe-area-inset-bottom)); }

.mp-ca-mob-notes-sheet .mp-pn-row { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
.mp-pn-switch, .mp-pn-switch::after { transition: none; }

}