/* qÚčto design system 2026 — layout.css (ADR-0223; direction A „Temný rám,
 * plovoucí list", ADR-0225; docs/DESIGN_SYSTEM.md).
 *
 * The application shell. The whole window is the dark FRAME (--frame-bg, the
 * white-label sidebar colour) with a soft amber glow top-left; the sidebar
 * lies directly on it (brand, firm card, „Hledat… ⌘K", areas, user at the
 * bottom). The content is a rounded light SHEET (.qucto-content) inset from
 * the window by --sheet-inset: page header (breadcrumb + the one H1), the
 * area tabs as a segmented control, the content column.
 *
 * Scrolling: the DOCUMENT scrolls (scroll restoration, keyboard scrolling,
 * print and anchors keep working). A fixed frame mask (.qucto-shell::after)
 * paints the frame colour outside the rounded sheet rectangle, so the sheet
 * looks like a floating, inner-scrolling surface while its content slides
 * under the mask. Sticky table headers live in their own scroll regions
 * (components.css) and are unaffected.
 *
 * Viewport breakpoints are used ONLY for the shell:
 *   ≥ 1200 px  full sidebar (250 px) on the frame
 *   768–1199   icon rail (68 px) on the frame — labels become tooltips
 *   < 768      off-canvas dark drawer; the sheet runs full width with only
 *              the top inset and a sticky bar (hamburger · title · search)
 * Components respond to their container (`main` is a size container).
 */

@layer layout {
    /* =====================================================================
       Frame and sheet
       ===================================================================== */
    html:has(> body > .qucto-shell) {
        background:
            var(--frame-glow) 0 0 / var(--frame-glow-w) var(--frame-glow-h) no-repeat fixed,
            var(--frame-bg);
        /* WCAG 2.4.11: nothing sticky covers the sheet on ≥ 768 px, only the frame edge. */
        scroll-padding-top: calc(var(--sheet-inset) + var(--sp-4));
        scroll-padding-bottom: calc(var(--sheet-inset) + var(--sp-4));
        scrollbar-color: color-mix(in oklch, var(--frame-ink) 24%, transparent) var(--frame-bg);
    }

    html:has(> body > .qucto-shell) > body {
        background: transparent;
    }

    .qucto-shell {
        --shell-rail: var(--sidebar-w);

        display: grid;
        grid-template-columns: var(--shell-rail) minmax(0, 1fr);
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* The frame mask: a fixed rounded window onto the sheet; its spread shadow
       paints the frame colour around it (over content scrolled past the
       sheet's edge), the first shadow is the sheet's hairline edge. Clipped at
       the sidebar edge so it never covers the navigation. */
    .qucto-shell::after {
        content: '';
        position: fixed;
        inset: var(--sheet-inset) var(--sheet-inset) var(--sheet-inset) var(--shell-rail);
        z-index: var(--z-frame);
        border-radius: var(--sheet-radius);
        box-shadow: var(--sheet-edge), 0 0 0 100vmax var(--frame-bg);
        clip-path: inset(-100vmax -100vmax -100vmax 0);
        pointer-events: none;
    }

    .qucto-content {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: var(--sheet-h);
        margin: var(--sheet-inset) var(--sheet-inset) var(--sheet-inset) 0;
        color: var(--text);
        background: var(--sheet-bg);
        border-radius: var(--sheet-radius);
        scrollbar-color: auto;
    }

    /* =====================================================================
       Sidebar on the frame
       ===================================================================== */
    .qucto-sidebar {
        position: sticky;
        top: 0;
        z-index: var(--z-sidebar);
        display: flex;
        flex-direction: column;
        gap: var(--sp-3-5);
        height: 100vh;
        height: 100dvh;
        padding: var(--sp-3-5) var(--sp-3) var(--sp-3) var(--sp-3-5);
        color: var(--sb-text);
        view-transition-name: sidebar;
    }

    .qucto-sidebar :focus-visible {
        outline-color: var(--sb-focus);
    }

    .qucto-sidebar-head {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        flex-shrink: 0;
    }

    .qucto-brand {
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        flex: 1 1 auto;
        min-width: 0;
        padding: var(--sp-1) var(--sp-1-5);
        color: var(--sb-text-active);
        text-decoration: none;
        border-radius: var(--r-md);
    }

    .qucto-brand-logo {
        display: block;
        width: auto;
        max-width: 3.5rem;
        height: 26px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .qucto-brand-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .qucto-brand-name {
        overflow: hidden;
        font-size: var(--fs-title-sm);
        line-height: 18px;
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-title);
        color: var(--sb-text-active);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-brand-sub {
        overflow: hidden;
        font-size: var(--fs-2xs);
        line-height: var(--lh-2xs);
        font-weight: var(--fw-medium);
        color: var(--sb-muted);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-sidebar-close {
        display: none;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        color: var(--sb-text);
        background: transparent;
        border: 0;
        border-radius: var(--r-md);
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-sidebar-close:hover {
        color: var(--sb-text-active);
        background: var(--sb-hover);
    }

    .qucto-sidebar-close svg {
        width: 18px;
        height: 18px;
    }

    /* ---- firm card (tenant_switcher.html.twig + workspace-switcher.js) ---- */
    .qucto-sidebar-switcher,
    .qucto-sidebar-active-firm {
        flex-shrink: 0;
        margin: 0;
    }

    .qucto-sidebar-switcher {
        display: flex;
        flex-direction: column;
        gap: var(--sp-1-5);
    }

    .qucto-sidebar-switcher-label {
        padding-inline: var(--sp-1);
        font-size: var(--fs-2xs);
        line-height: var(--lh-2xs);
        font-weight: var(--fw-medium);
        color: var(--sb-muted);
    }

    /* Without JS: the native select, dark. */
    .qucto-sidebar-switcher select {
        color: var(--sb-text-active);
        background-color: var(--sb-raised);
        border-color: var(--sb-border);
    }

    .qucto-sidebar-switcher select option,
    .qucto-sidebar-switcher select optgroup {
        color: var(--text);
        background: var(--surface);
    }

    .qucto-sidebar-switcher.is-enhanced {
        gap: 0;
    }

    .qucto-sidebar-switcher.is-enhanced > .qucto-sidebar-switcher-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .qucto-ws-native {
        display: none;
    }

    .qucto-ws-trigger,
    .qucto-sidebar-active-firm {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--sp-2-5);
        min-height: 48px;
        padding: 9px var(--sp-2-5);
        color: var(--sb-text-active);
        text-align: left;
        background: var(--sb-raised);
        border: 1px solid transparent;
        border-radius: var(--r-card-nested);
        box-shadow: var(--sb-raised-ring);
    }

    .qucto-sidebar-active-firm {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .qucto-ws-trigger {
        width: 100%;
        font: inherit;
        cursor: pointer;
        transition: background-color var(--dur-1) var(--ease-out);
    }

    .qucto-ws-trigger:hover,
    .qucto-ws-trigger.is-open {
        background: var(--sb-raised-hover);
    }

    .qucto-ws-trigger:focus-visible {
        outline-offset: 1px;
    }

    .qucto-ws-avatar,
    .qucto-firm-avatar {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        font-size: var(--fs-2xs);
        line-height: 1;
        font-weight: var(--fw-bold);
        letter-spacing: 0.02em;
        color: var(--sb-avatar-ink);
        background: var(--sb-avatar-bg);
        border-radius: var(--r-sm);
    }

    .qucto-ws-trigger-text,
    .qucto-firm-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .qucto-ws-trigger-kicker,
    .qucto-firm-text > .qucto-sidebar-switcher-label {
        padding: 0;
        font-size: var(--fs-2xs);
        line-height: var(--lh-2xs);
        font-weight: var(--fw-regular);
        color: var(--sb-muted);
    }

    .qucto-ws-trigger-label,
    .qucto-sidebar-active-firm-name {
        overflow: hidden;
        font-size: var(--fs-nav);
        line-height: var(--lh-nav);
        font-weight: var(--fw-semibold);
        color: var(--sb-text-active);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-ws-chevron {
        width: 14px;
        height: 14px;
        color: var(--sb-muted);
    }

    /* ---- „Hledat… ⌘K" (sidebar variant of _command_palette_trigger) ---- */
    .qucto-palette-trigger {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: var(--sp-2);
        font: inherit;
        cursor: pointer;
    }

    .qucto-palette-trigger > svg {
        flex: none;
        width: 15px;
        height: 15px;
        stroke-width: 1.8;
    }

    .qucto-palette-trigger-sidebar {
        width: 100%;
        min-height: 34px;
        padding: 0 var(--sp-2) 0 var(--sp-2-5);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        color: var(--sb-muted);
        background: var(--sb-search-bg);
        border: 1px solid transparent;
        border-radius: var(--r-md);
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-palette-trigger-sidebar:hover {
        color: var(--sb-text);
        background: var(--sb-raised);
    }

    .qucto-palette-trigger-label {
        flex: 1 1 auto;
        text-align: left;
    }

    .qucto-palette-trigger-kbd {
        flex: none;
        min-width: 0;
        padding: 1px var(--sp-1-5);
        font-size: 11px;
        line-height: 16px;
        font-weight: var(--fw-medium);
        color: var(--sb-kbd-text);
        background: var(--sb-kbd-bg);
        border: 0;
        border-radius: var(--r-xs);
    }

    /* The topbar magnifier is for phones only (the sidebar is a closed drawer there). */
    .qucto-palette-trigger-topbar {
        display: none;
    }

    /* ---- navigation (sidebar.html.twig / system_sidebar.html.twig) ---- */
    .qucto-nav {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: var(--sp-3-5);
        min-height: 0;
        margin-inline: calc(-1 * var(--sp-1));
        padding: 0 var(--sp-1) var(--sp-2);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in oklch, var(--qct-sidebar-ink) 16%, transparent) transparent;
    }

    /* Quiet section headings; the markup keeps upper case (catalogue form),
       the eye reads sentence case. */
    .qucto-nav-heading {
        margin: 0 0 var(--sp-1) var(--sp-2-5);
        font-size: var(--fs-2xs);
        line-height: var(--lh-2xs);
        font-weight: var(--fw-medium);
        letter-spacing: var(--tracking-xs);
        text-transform: lowercase;
        color: var(--sb-heading);
    }

    .qucto-nav-heading::first-letter {
        text-transform: uppercase;
    }

    .qucto-nav-list {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .qucto-nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        min-height: var(--nav-item-h);
        padding: 7px var(--sp-2-5);
        font-size: var(--fs-nav);
        line-height: var(--lh-nav);
        font-weight: var(--fw-medium);
        color: var(--sb-text);
        text-decoration: none;
        border-radius: var(--r-nav);
        transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
    }

    .qucto-nav-link svg {
        width: var(--icon);
        height: var(--icon);
        stroke-width: 1.8;
        color: currentColor;
        transition: color var(--dur-1) var(--ease-out);
    }

    .qucto-nav-link:hover {
        color: var(--sb-text-active);
        background: var(--sb-hover);
    }

    .qucto-nav-link[aria-current] {
        color: var(--sb-text-active);
        background: var(--sb-active-bg);
        box-shadow: var(--sb-active-ring);
    }

    .qucto-nav-link[aria-current] svg {
        color: var(--sb-icon-active);
    }

    .qucto-nav-link:focus-visible {
        outline-offset: -2px;
    }

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

    .qucto-nav-badge {
        display: inline-flex;
        margin-left: auto;
    }

    .qucto-nav-badge:empty {
        display: none;
    }

    .qucto-nav-badge + .qucto-nav-badge {
        margin-left: var(--sp-1);
    }

    .qucto-nav-badge-pill {
        display: inline-grid;
        place-items: center;
        min-width: 18px;
        height: 18px;
        padding: 0 7px;
        font-size: var(--fs-2xs);
        line-height: 1;
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
        color: var(--accent-ink);
        background: var(--accent);
        border-radius: var(--r-pill);
    }

    .qucto-nav-empty {
        padding: var(--sp-2) var(--sp-2-5);
        font-size: var(--fs-sm);
        color: var(--sb-muted);
    }

    /* ---- user at the bottom (user_menu.html.twig) ---- */
    .qucto-user-card {
        position: relative;
        flex-shrink: 0;
    }

    .qucto-user-trigger {
        display: flex;
        align-items: center;
        gap: var(--sp-2-5);
        padding: var(--sp-2) var(--sp-2-5);
        color: var(--sb-text-active);
        list-style: none;
        border-radius: var(--r-card-nested);
        transition: background-color var(--dur-1) var(--ease-out);
    }

    .qucto-user-trigger::-webkit-details-marker {
        display: none;
    }

    .qucto-user-trigger:hover,
    .qucto-user-card[open] > .qucto-user-trigger {
        background: var(--sb-hover);
    }

    .qucto-user-trigger:focus-visible {
        outline-offset: -2px;
    }

    .qucto-user-avatar {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        font-size: var(--fs-2xs);
        line-height: 1;
        font-weight: var(--fw-bold);
        letter-spacing: 0.02em;
        color: var(--accent-ink);
        background: var(--accent);
        border-radius: 50%;
    }

    .qucto-user-meta {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
    }

    .qucto-user-name,
    .qucto-user-email {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .qucto-user-name {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-semibold);
        color: var(--sb-text-active);
    }

    .qucto-user-email {
        font-size: var(--fs-2xs);
        line-height: var(--lh-2xs);
        color: var(--sb-muted);
    }

    .qucto-user-caret {
        width: 14px;
        height: 14px;
        color: var(--sb-muted);
    }

    /* The panel itself is a popover surface (components.css); here only its place. */
    .qucto-user-pop {
        position: absolute;
        right: 0;
        bottom: calc(100% + var(--sp-1));
        left: 0;
        z-index: var(--z-popover);
        transform-origin: bottom left;
    }

    /* =====================================================================
       Sheet header: breadcrumb + H1 (scrolls with the page on ≥ 768 px)
       ===================================================================== */
    .qucto-topbar {
        display: flex;
        align-items: flex-end;
        gap: var(--sp-3);
        padding: var(--page-py) var(--page-px) 0;
    }

    .qucto-topbar-heading {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        gap: var(--sp-1-5);
        min-width: 0;
    }

    .qucto-topbar-title {
        min-width: 0;
        font-size: var(--fs-h1);
        line-height: var(--lh-h1);
        font-weight: var(--fw-bold);
        letter-spacing: var(--tracking-h1);
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .qucto-menu-toggle {
        display: none;
        place-items: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        color: var(--text);
        background: transparent;
        border: 0;
        border-radius: var(--r-md);
        transition: background-color var(--dur-1) var(--ease-out);
    }

    .qucto-menu-toggle:hover {
        background: var(--hover);
    }

    .qucto-menu-toggle svg {
        width: 22px;
        height: 22px;
    }

    /* Breadcrumb: quiet, 12.5 px muted above the H1 (tests: header .qucto-breadcrumb + h1). */
    .qucto-breadcrumb ol {
        display: flex;
        align-items: center;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: var(--fs-label);
        line-height: var(--lh-label);
    }

    .qucto-breadcrumb li {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        white-space: nowrap;
    }

    .qucto-breadcrumb li:last-child {
        overflow: hidden;
    }

    .qucto-breadcrumb li + li::before {
        content: '';
        flex-shrink: 0;
        width: 12px;
        height: 12px;
        margin: 0 var(--sp-1);
        background: var(--text-disabled);
        mask: var(--i-chevron-right) center / 12px no-repeat;
    }

    .qucto-breadcrumb a {
        overflow: hidden;
        font-weight: var(--fw-medium);
        color: var(--text-muted);
        text-decoration: none;
        text-overflow: ellipsis;
        border-radius: var(--r-xs);
        transition: color var(--dur-1) var(--ease-out);
    }

    .qucto-breadcrumb a:hover {
        color: var(--text);
        text-decoration: underline;
        text-decoration-color: var(--link-underline);
    }

    .qucto-breadcrumb a[aria-current='page'] {
        color: var(--text-muted);
    }

    /* The page itself closing the path on a detail page: not a link. */
    .qucto-breadcrumb span[aria-current='page'] {
        overflow: hidden;
        font-weight: var(--fw-medium);
        color: var(--text-secondary);
        text-overflow: ellipsis;
    }

    /* =====================================================================
       Area tabs: a segmented control under the H1 (page navigation — links
       with aria-current, not an ARIA tablist)
       ===================================================================== */
    .qucto-tabs {
        display: flex;
        padding: var(--sp-4) var(--page-px) 0;
    }

    .qucto-tabs-list {
        display: flex;
        gap: var(--sp-0-5);
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: var(--seg-pad);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        list-style: none;
        background: var(--seg-track);
        border: 1px solid transparent;
        border-radius: var(--seg-radius);
        scrollbar-width: none;
    }

    .qucto-tabs-list::-webkit-scrollbar {
        display: none;
    }

    .qucto-tabs-item {
        flex: 0 0 auto;
    }

    .qucto-tab {
        display: inline-flex;
        align-items: center;
        min-height: var(--seg-item-h);
        padding: 0 var(--sp-3);
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        font-weight: var(--fw-medium);
        color: var(--seg-fg);
        text-decoration: none;
        white-space: nowrap;
        border-radius: var(--seg-item-radius);
        transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
    }

    .qucto-tab:hover {
        color: var(--seg-fg-hover);
    }

    .qucto-tab[aria-current] {
        color: var(--seg-fg-active);
        background: var(--seg-thumb);
        box-shadow: var(--seg-thumb-shadow);
    }

    .qucto-tab:focus-visible {
        outline-offset: -2px;
    }

    .qucto-tabs.has-more-after .qucto-tabs-list {
        mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    }

    .qucto-tabs.has-more-before .qucto-tabs-list {
        mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
    }

    .qucto-tabs.has-more-before.has-more-after .qucto-tabs-list {
        mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
    }

    /* =====================================================================
       Content column, page widths, page header, split
       ===================================================================== */
    .qucto-main {
        container: main / inline-size;
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        gap: var(--page-gap);
        width: 100%;
        max-width: calc(var(--content-max) + 2 * var(--page-px));
        padding: var(--page-gap) var(--page-px) var(--sp-10);
    }

    /* A page head right under the H1 reads as its subtitle line. */
    .qucto-topbar + .qucto-main:has(> .qucto-page-head:first-child) {
        padding-top: var(--sp-2);
    }

    .qucto-main[data-width='dashboard'] {
        max-width: calc(var(--content-max-dashboard) + 2 * var(--page-px));
    }

    .qucto-main[data-width='detail'] {
        max-width: calc(var(--content-max-detail) + 2 * var(--page-px));
    }

    .qucto-main[data-width='form'] {
        max-width: calc(var(--form-max) + 2 * var(--page-px));
    }

    .qucto-main:focus {
        outline: none;
    }

    .qucto-main > p {
        margin: 0;
    }

    /* Cards wrapped in a <form>/<section>/<div> cannot reach the column gap. */
    .qucto-main .qucto-card + .qucto-card {
        margin-top: var(--sp-4);
    }

    .qucto-main > .qucto-card + .qucto-card,
    .qucto-split > .qucto-card + .qucto-card,
    .qucto-stat-grid > .qucto-card + .qucto-card {
        margin-top: 0;
    }

    .qucto-page-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3) var(--sp-4);
    }

    .qucto-page-head > :first-child:not(.qucto-page-actions) {
        flex: 1 1 18rem;
        min-width: 0;
    }

    .qucto-page-subtitle {
        margin: 0;
        font-size: var(--fs-nav);
        line-height: var(--lh-nav);
        color: var(--text-muted);
        text-wrap: pretty;
    }

    .qucto-page-subtitle .qucto-badge {
        vertical-align: middle;
    }

    .qucto-page-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--sp-2);
        min-width: 0;
        margin-left: auto;
    }

    /* Many actions (an invoice detail has a dozen): they get their own row. */
    .qucto-page-head:has(> .qucto-page-actions > :nth-child(5)) > .qucto-page-actions {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .qucto-split {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
        gap: var(--sp-4);
        align-items: start;
    }

    .qucto-split > * {
        min-width: 0;
    }

    @container main (max-width: 64rem) {
        .qucto-split {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @container main (max-width: 40rem) {
        .qucto-page-head .qucto-page-actions {
            justify-content: flex-start;
            margin-left: 0;
        }
    }

    /* =====================================================================
       Tablet & small laptop: icon rail on the frame
       ===================================================================== */
    @media (min-width: 768px) and (max-width: 1199.98px) {
        .qucto-shell {
            --shell-rail: var(--rail-w);
        }

        .qucto-sidebar {
            gap: var(--sp-3);
            padding: var(--sp-3-5) var(--sp-2-5) var(--sp-3);
        }

        .qucto-sidebar-head {
            justify-content: center;
        }

        .qucto-brand {
            flex: 0 0 auto;
            padding: var(--sp-1);
        }

        .qucto-brand-logo {
            width: 40px;
            max-width: none;
            height: 26px;
        }

        .qucto-brand-text,
        .qucto-firm-text,
        .qucto-palette-trigger-sidebar > .qucto-palette-trigger-label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .qucto-ws-trigger,
        .qucto-sidebar-active-firm {
            grid-template-columns: 28px;
            justify-content: center;
            min-height: 44px;
            padding: var(--sp-2) 0;
        }

        .qucto-ws-trigger-text,
        .qucto-ws-chevron,
        .qucto-palette-trigger-kbd {
            display: none;
        }

        .qucto-palette-trigger-sidebar {
            justify-content: center;
            min-height: 36px;
            padding: 0;
        }

        .qucto-palette-trigger-sidebar > svg {
            width: 17px;
            height: 17px;
        }

        .qucto-nav {
            gap: 0;
        }

        /* Section names stay readable to screen readers; the eye gets a rule. */
        .qucto-nav-heading {
            height: 1px;
            margin: var(--sp-2-5) var(--sp-2);
            padding: 0;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            background: var(--sb-border);
        }

        .qucto-nav-section:first-child .qucto-nav-heading {
            margin-block: 0;
            background: transparent;
        }

        .qucto-nav-link {
            justify-content: center;
            width: 44px;
            min-height: 40px;
            margin-inline: auto;
            padding: 0;
        }

        /* Label → tooltip to the right of the rail; sidebar-toggle.js feeds --tip-y. */
        .qucto-nav-label {
            position: fixed;
            top: var(--tip-y, -100px);
            left: calc(var(--rail-w) + var(--sp-2));
            z-index: var(--z-popover);
            flex: none;
            padding: var(--sp-1) var(--sp-2);
            font-size: var(--fs-sm);
            line-height: var(--lh-sm);
            font-weight: var(--fw-medium);
            color: var(--surface);
            background: var(--neutral-900);
            border: 1px solid transparent;
            border-radius: var(--r-sm);
            box-shadow: var(--e2);
            opacity: 0;
            pointer-events: none;
            transform: translate(calc(-1 * var(--motion-shift)), -50%);
            transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
        }

        .qucto-nav-link:hover .qucto-nav-label,
        .qucto-nav-link:focus-visible .qucto-nav-label {
            opacity: 1;
            transform: translate(0, -50%);
        }

        .qucto-nav-badge {
            position: absolute;
            top: 1px;
            right: -2px;
        }

        .qucto-nav-badge-pill {
            min-width: 16px;
            height: 16px;
            padding: 0 var(--sp-1);
            font-size: 10.5px;
            box-shadow: 0 0 0 2px var(--frame-bg);
        }

        .qucto-user-trigger {
            justify-content: center;
            padding: var(--sp-1-5) 0;
        }

        .qucto-user-meta,
        .qucto-user-caret {
            display: none;
        }

        .qucto-user-pop {
            right: auto;
            bottom: 0;
            left: calc(100% + var(--sp-2));
            width: 16rem;
            transform-origin: bottom left;
        }
    }

    /* =====================================================================
       Phone: the sheet runs full width under an 8 px frame band, the
       sidebar is a dark off-canvas drawer, a sticky bar keeps the
       hamburger, the title and the search in reach.
       ===================================================================== */
    @media (max-width: 767.98px) {
        html:has(> body > .qucto-shell) {
            scroll-padding-top: calc(var(--sheet-inset) + var(--topbar-h) + var(--sp-4));
            scroll-padding-bottom: var(--sp-6);
        }

        .qucto-shell {
            grid-template-columns: minmax(0, 1fr);
        }

        .qucto-shell::after {
            inset: var(--sheet-inset) 0 0;
            border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
            clip-path: none;
        }

        .qucto-content {
            min-height: calc(100dvh - var(--sheet-inset));
            margin: var(--sheet-inset) 0 0;
            border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
        }

        .qucto-sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: var(--z-drawer);
            width: min(18.5rem, 88vw);
            height: auto;
            padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-3-5);
            background:
                var(--frame-glow) 0 0 / var(--frame-glow-w) var(--frame-glow-h) no-repeat,
                var(--frame-bg);
            visibility: hidden;
            transform: translateX(-100%);
            transition: transform var(--dur-4) var(--ease-drawer), visibility 0s linear var(--dur-4);
        }

        body.qucto-sidebar-open .qucto-sidebar {
            visibility: visible;
            transform: none;
            box-shadow: var(--e3);
            transition: transform var(--dur-4) var(--ease-drawer), visibility 0s;
        }

        body.qucto-sidebar-open {
            overflow: hidden;
        }

        /* Reduced motion: the drawer appears in place, no slide. */
        @media (prefers-reduced-motion: reduce) {
            .qucto-sidebar,
            body.qucto-sidebar-open .qucto-sidebar {
                transition: none;
            }
        }

        .qucto-sidebar-close,
        .qucto-menu-toggle {
            display: inline-grid;
        }

        .qucto-sidebar-backdrop {
            position: fixed;
            inset: 0;
            z-index: var(--z-backdrop);
            background: var(--backdrop);
            opacity: 1;
            transition: opacity var(--dur-3) var(--ease-out);

            @starting-style {
                opacity: 0;
            }
        }

        .qucto-topbar {
            position: sticky;
            top: var(--sheet-inset);
            z-index: var(--z-topbar);
            align-items: center;
            gap: var(--sp-1);
            min-height: var(--topbar-h);
            padding: var(--sp-1-5) var(--sp-2) var(--sp-1-5) var(--sp-2);
            background: var(--sheet-bg);
            border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
        }

        .qucto-topbar-heading {
            gap: 0;
        }

        .qucto-topbar-title {
            overflow: hidden;
            font-size: var(--fs-title);
            line-height: var(--lh-title);
            font-weight: var(--fw-semibold);
            letter-spacing: var(--tracking-title);
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .qucto-breadcrumb ol {
            font-size: var(--fs-xs);
            line-height: var(--lh-xs);
        }

        /* Phone: the magnifier in the bar; its text stays the button's name. */
        .qucto-palette-trigger-topbar {
            display: inline-grid;
            place-items: center;
            width: 40px;
            height: 40px;
            padding: 0;
            color: var(--text);
            background: transparent;
            border: 0;
            border-radius: var(--r-md);
            transition: background-color var(--dur-1) var(--ease-out);
        }

        .qucto-palette-trigger-topbar[hidden] {
            display: none;
        }

        .qucto-palette-trigger-topbar:hover {
            background: var(--hover);
        }

        .qucto-palette-trigger-topbar > svg {
            width: 20px;
            height: 20px;
        }

        .qucto-palette-trigger-topbar > .qucto-palette-trigger-label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .qucto-tabs {
            padding: var(--sp-2) var(--page-px) 0;
        }

        .qucto-main {
            padding-top: var(--page-py);
        }

        .qucto-topbar + .qucto-main:has(> .qucto-page-head:first-child) {
            padding-top: var(--sp-3);
        }

        /* A soft line under the sticky bar once the page scrolls (progressive). */
        @supports (animation-timeline: scroll()) {
            .qucto-topbar {
                animation: qct-header-raise linear both;
                animation-timeline: scroll(root block);
                animation-range: 0 24px;
            }
        }
    }

    @keyframes qct-header-raise {
        to {
            box-shadow: 0 1px 0 var(--border);
        }
    }

    /* =====================================================================
       Forced colours (Windows High Contrast): no shadows exist there, so the
       sheet and the active cues get real edges.
       ===================================================================== */
    @media (forced-colors: active) {
        .qucto-sidebar {
            border-right: 1px solid CanvasText;
        }

        .qucto-content {
            outline: 1px solid CanvasText;
        }

        .qucto-nav-link[aria-current],
        .qucto-tab[aria-current] {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }

        .qucto-tabs-list,
        .qucto-ws-trigger,
        .qucto-sidebar-active-firm,
        .qucto-palette-trigger-sidebar {
            border: 1px solid CanvasText;
        }
    }

    /* The rail's floating labels need an edge of their own. */
    @media (forced-colors: active) and (min-width: 768px) and (max-width: 1199.98px) {
        .qucto-nav-label {
            border: 1px solid CanvasText;
        }
    }

    /* =====================================================================
       Print: the sheet only, on paper white.
       ===================================================================== */
    @media print {
        html:has(> body > .qucto-shell) {
            background: none;
        }

        .qucto-shell {
            display: block;
        }

        .qucto-shell::after,
        .qucto-sidebar,
        .qucto-sidebar-backdrop,
        .qucto-menu-toggle,
        .qucto-palette-trigger,
        .qucto-tabs {
            display: none;
        }

        .qucto-content {
            margin: 0;
            background: none;
            border-radius: 0;
        }
    }
}