/* ── AppLayout structural ── */
.bl-root { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.bl-root--public { height: calc(100dvh - var(--mud-appbar-height) - 48px); }
.bl-body { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
.bl-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.3); z-index: 99; }
.bl-right-side { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.bl-inner-row { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }

/* ── AppHeader ── */
.bl-header { flex-shrink: 0; height: 56px; background: var(--ap-surface); color: var(--ap-ink); display: flex; align-items: center; padding: 0 16px; gap: 12px; border-bottom: 1px solid var(--ap-hairline); z-index: 200; }

/* ── AppNav ── */
.bl-nav { flex-shrink: 0; width: var(--bl-nav-w, var(--ap-sidebar-width)); min-height: 0; background: var(--ap-sidebar-bg); border-right: 1px solid var(--ap-sidebar-bg); display: flex; flex-direction: column; overflow: hidden; transition: transform .25s ease; z-index: 100; }
.bl-nav > .ap-sidebar-brand,
.bl-nav > .ap-sidebar-user-menu,
.bl-nav > .ap-sidebar-user { flex-shrink: 0; }
/* The brand block above the menu supplies the top spacing now. Only the menu scrolls, so the brand
   and the account block below it stay put. */
.bl-nav > .mud-navmenu { padding-top: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--ap-sidebar-hover-bg) transparent; }
.bl-nav .mud-nav-link .mud-nav-link-icon { margin-top: 2px; }

/* ── NavSupportBox ── */

/* ── AppSubHeader ── */
.bl-sub-header { flex-shrink: 0; height: 56px; background: var(--ap-surface); color: var(--ap-ink); display: flex; align-items: center; padding: 0 16px; gap: 8px; border-bottom: 1px solid var(--ap-hairline); overflow: hidden; }
.bl-sub-header--public { display: none; }
.bl-sub-header-breadcrumbs { flex-shrink: 0; font-size: 0.8125rem; display: flex; align-items: center; margin-top: 1px; }
.bl-sub-header-breadcrumbs nav { display: flex; align-items: center; }
.bl-sub-header-breadcrumbs ol { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.bl-sub-header-breadcrumbs li { display: flex; align-items: center; white-space: nowrap; line-height: 1; }
.bl-sub-header-breadcrumbs li a, .bl-sub-header-breadcrumbs li span { vertical-align: baseline; line-height: 1; }
.bl-sub-header-divider { display: block; width: 1px; min-width: 1px; height: 20px; background-color: var(--ap-hairline-strong); margin: 0 4px; flex-shrink: 0; align-self: center; }
.bl-sub-header-title { color: var(--ap-ink); font-size: 0.875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; line-height: 1; }
.bl-sub-header-spacer { flex: 1 1 0; min-width: 0; }
.bl-sub-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Width for toolbar date pickers goes through Class (picker root only), never Style — MudPicker copies
   Style onto the teleported calendar paper too, which would clip the 310px calendar. See issue #8971. */
.date-filter { width: 210px; }

/* Shell-owned controls at the right end of the bar, after any page actions. */
.bl-sub-header-shell-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 8px; }

/* ── Top bar (optional, flush between sub-header and content) ── */
.bl-top-bar { flex-shrink: 0; background: var(--ap-surface); border-bottom: 1px solid var(--ap-hairline); }
.bl-editor-top-bar { display: flex; align-items: stretch; height: 41px; }
/* min-width: 0 lets the formatting buttons scroll sideways instead of pushing the trailing actions out. */
.bl-editor-top-bar .chapter-editor-toolbar-react,
.bl-editor-top-bar .chapter-editor-toolbar-react > div { flex: 1; min-width: 0; display: flex; align-items: stretch; width: 100%; }
.bl-editor-top-bar .chapter-editor-toolbar-bar { flex: 1; min-width: 0; display: flex; align-items: stretch; width: 100%; height: 100%; }
/* The TipTap toolbar inserts itself as the slot's first child, so this follows it. */
.bl-editor-top-bar-trailing { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--ap-surface); }

/* ── Page header (on the canvas, not the bar) ── */
.bl-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.bl-page-header-text { flex: 1 1 320px; min-width: 0; }
.bl-page-header-description { margin-top: 4px; max-width: 70ch; }
.bl-page-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bl-page-header-details { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; font-size: 0.8125rem; color: var(--ap-ink-muted); }
.bl-page-header-details-divider { display: block; width: 1px; height: 14px; background-color: var(--ap-hairline-strong); }

/* ── Heading (optional, full width between sub-header and the panels) ── */
.bl-heading { flex-shrink: 0; padding: 24px 30px 22px; }
.bl-heading .bl-page-header { margin-bottom: 0; }

/* ── Sidebars ── */
.bl-left { flex-shrink: 0; width: var(--bl-left-w, 220px); min-height: 0; background: var(--ap-surface); border-right: 1px solid var(--ap-hairline); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; z-index: 100; }
.bl-left2 { flex-shrink: 0; width: var(--bl-left2-w, 240px); min-height: 0; background: var(--ap-surface); border-right: 1px solid var(--ap-hairline); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; z-index: 100; }
.bl-right { flex-shrink: 0; width: var(--bl-right-w, 220px); min-height: 0; background: var(--ap-surface); border-left: 1px solid var(--ap-hairline); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease; z-index: 100; }
.bl-left-body { flex: 1; overflow-y: auto; }
.bl-right-body { flex: 1; overflow-y: auto; }

/* ── Panel headers (match toolbar height) ── */
.bl-panel-header { flex-shrink: 0; height: 42px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--ap-hairline); background: var(--ap-surface); }
.bl-panel-header-title { font-weight: 600; }
.bl-panel-header > .mud-input-control { width: 100%; }
.bl-panel-footer { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--ap-hairline); background: var(--ap-surface); }
.bl-panel-scroll-col { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.bl-no-pointer { pointer-events: none; }
.bl-main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.bl-main { flex: 1; overflow-y: auto; padding: 24px; background: var(--ap-canvas); }
.bl-main--no-pad { padding: 0; background: var(--ap-surface); }

/* ── Toggle buttons ── */
.bl-toggle-btn { display: none; background: none; border: none; color: var(--ap-ink-muted); cursor: pointer; padding: 8px; border-radius: var(--ap-radius-sm); align-items: center; }
.bl-toggle-btn:hover { background: var(--ap-surface-sunken); }
.bl-toggle-btn-subheader { display: none; background: none; border: none; color: var(--ap-ink-muted); cursor: pointer; padding: 8px; border-radius: 4px; align-items: center; }
.bl-toggle-btn-subheader:hover { background: var(--ap-surface-sunken); }

/* ── Action buttons ── */
/* Toolbar buttons opt in with these classes: aeroplan-theme.css styles MudButton from tokens, so
   only the toolbar's tighter size and a pressed filter's look are left here. */
.bl-primary-action-btn, .bl-secondary-action-btn { min-height: 32px !important; }
.bl-secondary-action-btn.bl-action-btn--active { border-color: var(--ap-primary) !important; color: var(--ap-primary) !important; background: var(--ap-surface-sunken) !important; }

/* The right-hand panel toggle: the split icon facing the side it opens. */
.mud-icon-root.bl-icon-mirrored { transform: scaleX(-1); }

/* ── Resize handles (fixed on body via JS, top/left/height set inline) ── */
.bl-resize-handle { position: fixed; width: 6px; z-index: 9999; cursor: col-resize; }
.bl-resize-handle::after { content: ''; position: absolute; inset: 0; background: transparent; transition: background .15s; }
.bl-resize-handle:hover::after { background: var(--ap-primary); opacity: .4; }
body:has(.mud-dialog-container) .bl-resize-handle { pointer-events: none; }
body.bl-resizing { cursor: col-resize !important; user-select: none !important; }

/* ── Responsive ── */

/* ≥600px: the nav can be collapsed to its icon rail, and below 1620px AppLayout puts it there
   itself (nav-rail.js watches the width), so it never leaves the screen. Only a phone has no room
   for even the rail, and there it is an overlay behind the ☰ button instead. !important on the
   width because a dragged width is set inline, and it has to survive underneath to come back on
   expand. */
@media (min-width: 600px) {
    /* A peek (pointing at the rail) stays in the flow and pushes the page across as it opens. The
       transition sits on the collapsed state only, so dragging the full sidebar's width stays direct.
       Two classes because the editor bundle injects `:root * { transition: none }` later in the page,
       which a single class ties with and loses to. */
    .bl-nav.bl-nav--collapsed { width: var(--ap-sidebar-rail-width) !important; transition: transform .25s ease, width .2s ease; }
    .bl-nav--collapsed.bl-nav--peek { width: var(--ap-sidebar-width) !important; }

    /* Kept to one line, so a label being revealed by the growing width never wraps and changes the
       height of its row on the way. */
    .bl-nav--collapsed .mud-nav-link-text,
    .bl-nav--collapsed .ap-wordmark { white-space: nowrap; }
    .bl-nav--collapsed .ap-sidebar-brand,
    .bl-nav--collapsed .ap-sidebar-user { transition: padding .2s ease; }

    /* The header keeps the expanded one's height, so every icon sits on the row its label opens on
       in a peek. That leaves room for the mark alone: the expand button is not missed, because
       pointing at the rail peeks it open, and the peek has the button beside the wordmark.
       The mark and the avatar are centred by padding rather than by justify-content, which could
       not be animated; nav icons need neither, since the full sidebar already puts them at the
       rail's centre. */
    .bl-nav--collapsed:not(.bl-nav--peek) .ap-sidebar-brand { padding-left: calc((var(--ap-sidebar-rail-width) - 36px) / 2); padding-right: 0; }
    .bl-nav--collapsed:not(.bl-nav--peek) .ap-sidebar-user { padding-left: calc((var(--ap-sidebar-rail-width) - 32px) / 2); padding-right: 0; }
    .bl-nav--collapsed:not(.bl-nav--peek) .ap-sidebar-collapse,
    .bl-nav--collapsed:not(.bl-nav--peek) .ap-wordmark,
    .bl-nav--collapsed:not(.bl-nav--peek) .mud-nav-link-text,
    .bl-nav--collapsed:not(.bl-nav--peek) .mud-nav-group > :not(.mud-nav-link),
    .bl-nav--collapsed:not(.bl-nav--peek) .ap-sidebar-user-text,
    .bl-nav--collapsed:not(.bl-nav--peek) .ap-sidebar-user-more { display: none; }
    /* The rail is too narrow for the random logo, so it keeps the mark. */
    .ap-show-random-logo .bl-nav--collapsed:not(.bl-nav--peek) .ap-random-logo { display: none; }
    .ap-show-random-logo .bl-nav--collapsed:not(.bl-nav--peek) .ap-sidebar-mark { display: grid; }
    /* With its children hidden, the section header is the only thing left to say where you are. */
    .bl-nav--collapsed:not(.bl-nav--peek) .mud-nav-link.current-section { background-color: var(--ap-sidebar-active-bg) !important; color: var(--ap-sidebar-fg-strong) !important; }
}

/* 1280–1439px: left visible, right hidden as overlay. The side panels give way in turn after the
   nav has become its rail at 1619px: the right one first, and the left ones (the content's own
   lists, such as a manual's chapters) last, at 1279px. */
@media (min-width: 1280px) and (max-width: 1439px) {
    .bl-sub-header--public { display: flex; }
    .bl-toggle-btn-right { display: flex; }
    .bl-right { position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(100%); }
    .bl-right.open { transform: translateX(0); box-shadow: -4px 0 16px rgba(0,0,0,.15); }
    .bl-resize-handle--left { display: none; }
}

/* < 1280px: left and right hidden as overlays; the nav stays as its rail */
@media (max-width: 1279px) {
    .bl-sub-header--public { display: flex; }
    .bl-toggle-btn-subheader { display: flex; }
    .bl-left { position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
    .bl-left.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.15); }
    .bl-left2 { position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
    .bl-left2.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.15); }
    .bl-right { position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(100%); }
    .bl-right.open { transform: translateX(0); box-shadow: -4px 0 16px rgba(0,0,0,.15); }
    /* No resize on mobile — panels are overlays */
    .bl-resize-handle { display: none; }
}

/* < 600px: the nav too is hidden as an overlay */
@media (max-width: 599px) {
    .bl-toggle-btn { display: flex; }
    .bl-nav { position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
    .bl-nav.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.15); }
}