/* Pages opt in explicitly. Width stays at the existing page default
   until a visitor moves an edge; touch layouts keep the original shell. */
.shell-resize { display: none; }

@media (min-width: 900px) and (pointer: fine) {
    [data-resizable-shell] { container-type: inline-size; }
    [data-resizable-shell].is-custom-width:not([data-resize-media]) { max-width: var(--resized-width); }

    /* Home's text lists and bookshelf keep their original centred measure
       while the surrounding project and archive galleries can expand. */
    [data-resizable-shell].is-custom-width > [data-resize-fixed] {
        width: 100%;
        max-width: calc(var(--content-width) - 2 * var(--gutter));
        margin-inline: auto;
    }

    [data-resize-media].is-custom-width .case-hero {
        width: var(--resized-width);
        max-width: none;
        margin-inline: calc((100% - var(--resized-width)) / 2);
    }
    [data-resize-media].is-custom-width .case-body > :is(.case-figure, .case-pair, .case-studio) {
        width: calc(var(--resized-width) - 2 * var(--gutter));
        margin-inline: calc((100% - var(--resized-width) + 2 * var(--gutter)) / 2);
    }

    .shell-resize {
        display: block;
        position: fixed;
        inset-block: 0;
        z-index: 20;
        border-inline: 1px solid var(--border);
        pointer-events: none;
        transition: border-color 160ms ease;
    }

    .shell-resize:has(.shell-resize__handle--left:is(:hover, :focus-visible)) { border-left-color: var(--accent); }
    .shell-resize:has(.shell-resize__handle--right:is(:hover, :focus-visible)) { border-right-color: var(--accent); }
    .shell-resize.is-dragging { border-inline-color: var(--accent); }

    .shell-resize__handle {
        position: absolute;
        top: 50%;
        width: 24px;
        height: 64px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text-tertiary);
        transform: translate(-50%, -50%);
        pointer-events: auto;
        touch-action: none;
        cursor: ew-resize;
    }
    /* Absolute positioning starts inside the frame's 1px borders. Place
       each grip on the centre of its border rather than its inner edge. */
    .shell-resize__handle--left { left: -0.5px; }
    .shell-resize__handle--right { left: calc(100% + 0.5px); }

    .shell-resize__handle::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 5px;
        height: 36px;
        border: 1px solid var(--border-strong);
        border-radius: 6px;
        background: var(--background);
        transition: background 160ms, border-color 160ms, transform 180ms ease;
    }
    .shell-resize__handle:hover::before,
    .shell-resize__handle:focus-visible::before,
    .shell-resize.is-dragging .shell-resize__handle::before {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--background) 88%, var(--accent));
        transform: translate(-50%, -50%) scale(1.18);
    }
    /* Focus belongs to the visible grip, not its larger pointer hit area. */
    .shell-resize__handle:focus-visible { outline: none; }
    .shell-resize__handle:focus-visible::before { box-shadow: 0 0 0 3px var(--accent-soft); }

    .shell-resize__hint {
        position: absolute;
        bottom: calc(100% + 8px);
        padding: 9px 12px;
        border-radius: var(--r-sm);
        background: var(--raised);
        box-shadow: var(--popover-shadow);
        color: var(--text-primary);
        font: 12px/1.45 var(--font-sans);
        white-space: nowrap;
        text-align: left;
        pointer-events: none;
        opacity: 0;
        translate: 0 4px;
        transition: opacity 160ms ease, translate 160ms ease;
    }
    .shell-resize__handle--left .shell-resize__hint { right: calc(100% + 8px); }
    .shell-resize__handle--right .shell-resize__hint { left: calc(100% + 8px); }
    .shell-resize__handle[data-hint-room]:is(:hover, :focus-visible) .shell-resize__hint { opacity: 1; translate: 0 0; }
    .shell-resize.is-dragging .shell-resize__hint { opacity: 0; }

    /* A case study's contents stays in the available left margin. */
    .case-page [data-resizable-shell] .page-toc { width: calc(var(--shell-left) - 64px); }
    .case-page [data-shell-toc-hidden] .page-toc { display: none; }

    [data-resizable-shell] .section__count { transition: scale 180ms ease; }
    [data-resizable-shell] .section__head:is(:hover, :focus-within) .section__count { scale: 1.12; }

    html.is-resizing, html.is-resizing * {
        cursor: ew-resize !important;
        user-select: none !important;
    }

    /* A narrowed archive becomes a gallery of small plates again. */
    .shell--wide[data-shell-compact] { padding-inline: var(--gutter); }
    .shell--wide[data-shell-compact] .archive-grid { columns: 3; column-gap: 12px; }
    .shell--wide[data-shell-compact] .archive-grid li { margin-bottom: 12px; }
    .shell--wide[data-shell-compact] .archive-tile { border-radius: var(--r-lg); cursor: zoom-in; }
    .shell--wide[data-shell-compact] .archive-tile:hover { box-shadow: var(--tray-shadow-hover); scale: 1.01; }

    @container (max-width: 591px) {
        [data-resizable-shell] .archive-grid,
        .shell--wide[data-shell-compact] .archive-grid { columns: 2; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .shell-resize,
    .shell-resize__handle::before,
    .shell-resize__hint,
    [data-resizable-shell] .section__count { transition: none; }
    .shell-resize__handle::before { transform: translate(-50%, -50%) !important; }
    [data-resizable-shell] .section__head .section__count { scale: 1 !important; }
}

@media print {
    .shell-resize { display: none; }
    [data-resizable-shell].is-custom-width { max-width: var(--content-width); }
}