/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
   2026-11-11 compact document rhythm, shared by Web / Chart / OrgChart (SW and CENTER pages use the same frame only):
   2026-11-11: the H1 page title / description header is no longer shown (the H1 stays for screen readers only); pages start with the
   H2 section title 16/24/700 (body-md) over a thin divider → 12px → specimen; sections 24px apart (Dashboard gap);
   H3 specimen labels 14/20/500 secondary, no divider of their own (story-board.tsx). Top / bottom gutter 16–24px.
   Side margins are unchanged (16px up to 480px, growing to 60px at 768px): the SW breakpoints 2040 / 1125 / 787 depend on them.
   No design token is added; --sb-page-* only names existing component token values for this Storybook frame. */
.sb-page {
  --sb-page-gutter: clamp(16px, 2vw, 24px);
  --sb-page-section-gap: 24px;
  --sb-page-section-title-font-size: var(--hm-dialog-body-font-size);
  --sb-page-section-title-line-height: var(--hm-dialog-body-line-height);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-block: var(--sb-page-gutter);
  font-family: var(--hm-font-family-base);
  color: var(--hm-sem-fg-primary);
}
.sb-page > .sb-page-inner {
  box-sizing: border-box;
  /* 2026-11-05 (user request): no max width; the Inner follows the page width. Side margin (each side) = 16px up to a
     480px viewport (358px Inner at 390px, so a 314px specimen fits), then linear to 60px at 768px (44px over 288px,
     11 / 72 of the viewport growth), 60px from 768px. The Inner keeps growing (about 0.69px per 1px), with no jump. */
  width: calc(100% - 2 * clamp(16px, calc(16px + (100vw - 480px) * 11 / 72), 60px));
  min-width: 0;
  margin-inline: auto;
}

/* 2026-11-11: no visible page header, so the first block starts right at the top gutter. StoryPageHeader only renders the
   visually hidden page H1 (screen readers only, out of flow), so the first visible block after it gets the same reset. */
.sb-page > .sb-page-inner > :first-child,
.sb-page > .sb-page-inner > .sb-page-a11y-title:first-child + * { margin-top: 0; }
.sb-page .sb-page-a11y-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sb-page .sb-page-section { margin-top: var(--sb-page-section-gap); scroll-margin-top: 16px; }
.sb-page .sb-page-section-header {
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hm-sem-stroke-input-default);
  overflow-wrap: anywhere;
}
.sb-page .sb-page-section-header .sb-page-section-title {
  margin: 0;
  font-size: var(--sb-page-section-title-font-size);
  line-height: var(--sb-page-section-title-line-height);
  font-weight: var(--hm-font-weight-bold);
}
.sb-page .sb-page-section-header .sb-page-section-description {
  margin: 4px 0 0;
  color: var(--hm-sem-fg-secondary);
  font-size: var(--hm-label-font-size);
  line-height: var(--hm-label-line-height);
  font-weight: var(--hm-input-font-weight);
}
.sb-page .sb-page-section-body { min-width: 0; }
/* Sections side by side (StorySectionGrid): grid items keep their margins, so the grid owns the row gap instead.
   Columns and alignment stay with the Story (className): this unlayered rule would override Tailwind's layered grid-cols-*. */
.sb-page .sb-page-section-grid { display: grid; gap: var(--sb-page-section-gap) 24px; margin-top: var(--sb-page-section-gap); }
.sb-page .sb-page-section-grid > .sb-page-section { margin-top: 0; }