/* Common page geometry. Page files own content, never a second navigation system.
   See docs/DESIGN-SYSTEM.md and page-chrome.js. */
:root {
  --page-gutter: 20px;
  --page-top: 24px;
  --section-gap: 40px;
  --card-gap: 12px;
  --w-form: 560px;
  --w-detail: 1120px;
  --type-scale: 1;
  --base-page-title: 28px;
  --base-section-title: 22px;
  --page-title: calc(var(--base-page-title) * var(--type-scale));
  --section-title: calc(var(--base-section-title) * var(--type-scale));
}
:root[data-ohm-skin="on"] { --t-title: var(--page-title); --t-head: var(--section-title); }
:root[data-text-size="l"] { --type-scale: 1.125; }
:root[data-text-size="xl"] { --type-scale: 1.25; }
body[data-page-role] > main.wrap {
  box-sizing: border-box;
  width: min(calc(100% - 2 * var(--page-gutter)), var(--page-width, var(--w-wide)));
  max-width: var(--page-width, var(--w-wide));
  margin-inline: auto;
  padding: var(--page-top) 0 40px;
}
body[data-content-width="form"] { --page-width: var(--w-form); }
body[data-content-width="reading"] { --page-width: var(--w-reading); }
body[data-content-width="detail"] { --page-width: var(--w-detail); }
body[data-page-role] > main.wrap:has(> .page-rail) { --page-width: var(--w-detail); }
body[data-page-role] .page-head:has(> [data-page-body-title]:not([data-show-full-title]):only-child) { display: none; }
body[data-page-role] [data-page-body-title]:not([data-show-full-title]) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip-path: inset(50%); white-space: nowrap; border: 0 !important;
}
body[data-page-role]:not([data-page-role="immersive"]) main.wrap h1 { font-size: var(--page-title); line-height: 1.25; font-weight: 700; }
body[data-page-role] main.wrap :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }
body[data-page-role] main.wrap :is(section > h2, .home-section > header > h2) { font-size: var(--section-title); line-height: 1.35; }
body[data-page-role] .home-section + .home-section { margin-top: var(--section-gap); }
body[data-page-role] main.wrap > :nth-child(1 of :not(link, script, .sr-only)) { margin-top: 0; }
body[data-page-role] :is(.detail, .desktop-recordable-main) > .crumb:first-child { margin-top: 0; }
body[data-page-role] .desktop-recordable-layout:not(:has(> aside)) { display: block; max-width: var(--w-content); margin-inline: auto; }
body[data-page-role] .page-head { margin: 0 0 24px; }
body[data-page-role] .page-head p:empty { display: none; }
body[data-page-role] .world-local-tabs { margin: 0 0 24px; }
body[data-bottom="none"], body[data-bottom="actions"] { padding-bottom: 0 !important; }
.list-scope-link { display: inline-flex; align-items: center; min-height: var(--tap-min); margin-top: 12px; font-size: var(--t-sub); color: var(--ink-2); }
@media (min-width: 600px) {
  :root { --page-gutter: 32px; --card-gap: 16px; }
}
@media (min-width: 1024px) {
  :root { --page-gutter: 40px; --page-top: 32px; --section-gap: 56px; --base-page-title: 32px; --base-section-title: 24px; }
  body[data-bottom="actions"] .detail-action-bar { display: none; }
}
@media (min-width: 1200px) {
  body[data-page-role] .desktop-recordable-layout:has(> aside) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
  body[data-page-role] .desktop-recordable-side { display: block; position: sticky; top: calc(var(--appbar-h) + 24px); }
  body[data-page-role] .desktop-recordable-layout:has(> aside) .recipe-detail-shelf { display: none; }
}
@media (max-width: 1023px) {
  body[data-bottom="primary"], body[data-bottom="actions"] { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)) !important; }
  body[data-bottom="none"] .world-local-tabs { display: none; }
}
body[data-page-role="immersive"] > main.wrap { width: 100%; max-width: none; min-height: 100dvh; margin: 0; padding: 0; }