/*
 * Glass material component (glass idiom — see status.md, glass direction,
 * for the decisions; tokens in variables.css; backdrop in desk.css)
 *
 * Owns the frosted-glass material for the two surface kinds:
 *
 * - The sheet: the main content panel on each page (article body, home
 *   sheet, collection sheet, static pages). Frosted, matte, borderless,
 *   never tilted.
 * - The card: small panels in a right column (home notes, article sidebar
 *   sections, marginalia slips). Same material, gently tilted at rest,
 *   straightening to be read. Tilt is reserved for notes — utility cards
 *   (e.g. search filters, wave 2) sit straight.
 *
 * This file owns material only (background, blur, shadow, radius, tilt
 * for the sidebar). Typography, layout, and the existing tilt cycles for
 * home notes and marginalia stay in their component files.
 *
 * Legibility/accessibility fallbacks, all in one place at the bottom:
 * panels go fully opaque under prefers-contrast: more, or when the reader
 * turns on the solid-background setting (html[data-solid-bg], set by
 * settings.js and the theme-preload partial).
 */

/* The sheet */
.article-layout > article,
.static-page > article,
.home > .sheet,
.collection > .sheet,
.search-page > .sheet {
    background-color: rgba(var(--panel-rgb), var(--panel-opacity));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    backdrop-filter: blur(var(--panel-blur));
    box-shadow: var(--shadow-panel);
    border-radius: 16px;
    padding: var(--space-xl);
}

/* Cards: material for the note surfaces. The home-note and marginalia
   components keep their own tilt cycles; this rule replaces their former
   paper surface (--color-slip + grain + slip shadow). */
.home-note,
.article-body .marginalia,
.sidebar-section,
.search-filters {
    background-color: rgba(var(--panel-rgb), var(--panel-opacity));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    backdrop-filter: blur(var(--panel-blur));
    box-shadow: var(--shadow-panel);
    border-radius: 12px;
}

/* Article sidebar sections become cards: give them card padding and the
   resting tilt the other note surfaces already carry in their own files.
   The angle cycle mirrors the studio's card scatter, scaled by --tilt. */
.sidebar-section {
    padding: 0.85rem 1rem;
}

@media (min-width: 1000px) {
    .sidebar-section {
        transform: rotate(calc(var(--tilt) * var(--card-tilt, -1deg)));
        transition: transform 0.45s ease;
    }

    .sidebar-section:nth-child(2n) {
        --card-tilt: 0.81deg;
    }

    .sidebar-section:nth-child(3n) {
        --card-tilt: -0.52deg;
    }

    .sidebar-section:hover {
        transform: rotate(0deg);
        transition: transform 0.25s ease-out;
    }
}

/* The sidebar scrolls away with the article rather than following the
   reader (overrides the sticky positioning in sidebar.css): the notes
   stay where they were laid on the desk. */
body.page-article .sidebar {
    position: static;
}

/* Widen the content grid column by the sheet's horizontal padding so the
   text inside the sheet keeps the full reading width. Overrides the
   grid-template-columns set in layout.css (this file loads after it). */
@media (min-width: 1000px) {
    .article-layout,
    .home,
    .static-page,
    .collection {
        grid-template-columns: minmax(0, calc(var(--reading-width) + 2 * var(--space-xl) - var(--col-content-trim))) var(--col-right);
    }
}

/* Between full-bleed and the wide grid, layout.css caps direct children of
   non-article pages at --reading-width; widen the sheet by its padding so
   the text inside keeps the full reading width. */
@media (min-width: 721px) and (max-width: 999px) {
    .home > .sheet,
    .collection > .sheet,
    .static-page > article {
        max-width: calc(var(--reading-width) + 2 * var(--space-xl));
    }
}

/* Phones: glass lite (scoped decision, status.md — mobile glass). The
   full desk composition comes to phones — desk backdrop, sheet as a real
   panel with slim gutters (envelope padding in layout.css), glass cards —
   but panels drop backdrop-filter, compensated by the higher
   --panel-opacity set in variables.css. Blur can be re-enabled here if
   device testing shows it is cheap. */
@media (max-width: 720px) {
    .article-layout > article,
    .static-page > article,
    .home > .sheet,
    .collection > .sheet,
    .search-page > .sheet,
    .home-note,
    .article-body .marginalia,
    .sidebar-section,
    .search-filters {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .article-layout > article,
    .static-page > article,
    .home > .sheet,
    .collection > .sheet,
    .search-page > .sheet {
        padding: 1.25rem;
        border-radius: 12px;
    }

    /* Cards read as a distinct surface from the sheet: the panel tone
       nudged toward the desk colour (works in both modes). The 85/15 mix
       is the dial. */
    .home-note,
    .article-body .marginalia,
    .sidebar-section,
    .search-filters {
        background-color: color-mix(in srgb,
            rgba(var(--panel-rgb), var(--panel-opacity)) 85%,
            var(--color-desk));
    }
}

/* Touch devices: no hover means no straighten — let the note surfaces
   straighten while touched or focused instead. (Their resting-tilt rules
   live in home-notes.css, marginalia.css, and the sidebar rules above.) */
@media (hover: none) {
    .home-note:active,
    .home-note:focus-within,
    .article-body .marginalia:active,
    .article-body .marginalia:focus-within,
    .sidebar-section:active,
    .sidebar-section:focus-within {
        transform: rotate(0deg);
    }
}

/* Accessibility fallback (decision 7): fully opaque panels, no blur —
   for readers whose OS asks for more contrast, and for anyone who turns
   on the solid-background setting in the reader panel. */
@media (prefers-contrast: more) {
    .article-layout > article,
    .static-page > article,
    .home > .sheet,
    .collection > .sheet,
    .search-page > .sheet,
    .home-note,
    .article-body .marginalia,
    .sidebar-section,
    .search-filters {
        background-color: rgb(var(--panel-rgb));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

html[data-solid-bg] .article-layout > article,
html[data-solid-bg] .static-page > article,
html[data-solid-bg] .home > .sheet,
html[data-solid-bg] .collection > .sheet,
html[data-solid-bg] .search-page > .sheet,
html[data-solid-bg] .home-note,
html[data-solid-bg] .article-body .marginalia,
html[data-solid-bg] .sidebar-section,
html[data-solid-bg] .search-filters {
    background-color: rgb(var(--panel-rgb));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}