/**
 * @file settings-frame.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The frame of Settings & Controls: the side column that holds the menu, the content
 *   column beside it with its head (the crumb) and its body, and on a phone the menu as a drawer
 *   behind a loud-action button with a scrim. The component is SettingsFrame
 *   (/components/SettingsFrame.js); the catalogue entry is `settings-frame`. The menu inside the
 *   side column is its own component (side-menu.css).
 *   Rules moved unchanged from views/profile.css, views/profile-poster.css and views/organism.css,
 *   in the order they were read, under the component's names (UI consolidation phase 5, a move).
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.1.0 — 2026-09-26 — The phone's Menu button is the loud action (.poster-slab); its own copy of the look goes, its place stays (Jouni's decision "Phone menu button").
 *   v1.0.0 — 2026-09-25 — Moved from the profile sheets (.pf-shell, .pf-sidebar, .pf-content,
 *     .pf-content-head, .pf-content-body, .pf-mnav-toggle, .pf-scrim, .pf-overview), a move.
 *   v1.1.0 — 2026-09-26 — The rule for a tab's own headings no longer reaches the headings inside
 *     formatted text (.md-body), which it drew as the page's big capitals (Jouni's decision "Small reader").
 */

/* The overview's section titles are a size larger than a tab's (the overview variant). */
.settings-frame-content--overview { --poster-section-size: 2.1rem; }

/* Desktop: a sticky side column and the content column beside it; on a phone (<=900px) the side
   column is an off-canvas drawer opened by .settings-frame-toggle. */
.settings-frame { display: flex; align-items: flex-start; gap: 0; position: relative; }

.settings-frame-menu {
  width: 250px; flex: 0 0 250px;
  /* The scroll region is .page-content (the header lives outside it), so the column sticks to
     the top of that region (top:0), and its height caps at the region's height so its own list
     scrolls. border-box folds the vertical padding into max-height; without it the column is
     taller than the region and sticky cannot hold it. */
  position: sticky; top: 0;
  box-sizing: border-box;
  max-height: calc(100dvh - var(--nav-height, 56px));
  overflow-y: auto;
  padding: 1.5rem 1.25rem 2rem 2rem;
  font-family: var(--font-showroom-body);
}

/* Content fills the space next to the side column and caps at ~1360px, so lines stay readable
   on a wide screen; the wide gutter and the air under the header give the rules room. */
.settings-frame-content { flex: 1 1 auto; min-width: 0; max-width: 1360px; padding: 1.5rem 2.75rem 3rem 3rem; }
.settings-frame-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.settings-frame-body { min-width: 0; }

.settings-frame-toggle { display: none; }
.settings-frame-scrim { display: none; }

@media (max-width: 900px) {
  .settings-frame { display: block; }
  .settings-frame-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0.75rem; }
  .settings-frame-menu {
    position: fixed; top: var(--nav-height, 56px); left: 0; bottom: 0; width: 264px; max-height: none;
    background: var(--card); z-index: 50; transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,.2));
  }
  .settings-frame--open .settings-frame-menu { transform: translateX(0); }
  .settings-frame--open .settings-frame-scrim {
    display: block; position: fixed; inset: var(--nav-height, 56px) 0 0;
    background: var(--overlay-scrim, rgba(0,0,0,.35)); z-index: 45;
  }
  /* Screen space is valuable on a phone: minimal side margins. */
  .settings-frame-content { padding: 0.5rem 0.35rem 1.5rem; }
}

/* The poster face: the content column reads in the poster body face, the head has no rule. */
.settings-frame-content { font-family: var(--font-showroom-body); }
.settings-frame-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.2rem; }

/* The phone's menu button is the loud action itself (.poster-slab, poster.css), so a theme's slab
   reaches it (Jouni's decision "Phone menu button"). */

/* Headings a tab writes without a class of its own read as section headlines. A heading inside
   formatted text (the Markdown reader, .md-body) is the text's own and keeps the reader's look. */
.pf .settings-frame-body h2:not([class]):not(.md-body *),
.pf .settings-frame-body h3:not([class]):not(.md-body *) {
  font-family: var(--font-poster-section); font-weight: var(--font-poster-section-weight);
  font-size: 1.7rem; line-height: var(--font-poster-leading); letter-spacing: var(--font-poster-tracking); text-transform: var(--shape-case-heading); color: var(--text);
}

/* A tab that draws its own masthead (the page kit's .og) needs no crumb above it. */
.settings-frame-content:has(.og) .settings-frame-head { display: none; }