/* The full menu on small screens: a sheet that slides up over a dimmed page. */
@layer layout {
    .menu-sheet { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
    .menu-sheet.is-open { visibility: visible; }
    .menu-sheet-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-ink-deep) 55%, transparent); opacity: 0; transition: opacity 0.2s var(--ease); }
    .menu-sheet.is-open .menu-sheet-backdrop { opacity: 1; }
    .menu-sheet-panel { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; max-height: 92vh; overflow-y: auto; padding: var(--space-4) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom)); background: var(--color-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow); transform: translateY(100%); transition: transform 0.25s var(--ease); }
    .menu-sheet.is-open .menu-sheet-panel { transform: none; }

    .menu-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
    .menu-sheet-links { display: grid; }
    .menu-sheet-links a { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding-inline: var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: var(--text-lg); font-weight: 600; }
    .menu-sheet-links a.is-active { color: var(--color-primary); }
    .menu-sheet-group { margin-top: var(--space-5); }
    .menu-sheet-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
    .menu-sheet-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .menu-sheet-actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); }

    @media (min-width: 1024px) {
        .menu-sheet { display: none; }
    }
}