/* Storybook presentation only. All selectors stay inside the Foundation page.
   Page inner, title and sections come from the common Story page (src/components/story-page.css); these rules style the reference content. */
.hm-foundation {
  font-size: var(--hm-label-font-size); line-height: var(--hm-label-line-height);
  font-weight: var(--hm-input-font-weight); overflow-wrap: anywhere;
}
.hm-foundation *, .hm-foundation *::before, .hm-foundation *::after { box-sizing: border-box; }
.hm-foundation h3 { margin: 0 0 8px; font-size: var(--hm-label-font-size); font-weight: var(--hm-font-weight-bold); }
.hm-foundation p { margin: 0 0 12px; }
.hm-foundation-note { color: var(--hm-sem-fg-secondary); }
.hm-foundation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.hm-foundation-card, .hm-foundation-panel { min-width: 0; padding: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-container); background: var(--hm-sem-bg-surface); }
.hm-foundation-swatch { height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-control-md); }
.hm-foundation dl { margin: 16px 0 0; }
.hm-foundation dt { margin-top: 8px; color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); }
.hm-foundation dd { margin: 2px 0 0; min-width: 0; }
.hm-foundation code { font-family: inherit; font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
.hm-foundation-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; }
.hm-foundation-links a { color: var(--hm-sem-action-primary); text-decoration: underline; }
.hm-foundation-details { margin-top: 24px; }
.hm-foundation-details summary { cursor: pointer; padding-block: 12px; font-weight: var(--hm-font-weight-bold); }
.hm-foundation-specimens { display: grid; gap: 16px; }
.hm-foundation-specimen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hm-sem-stroke-input-default); }
.hm-foundation-specimen small { display: block; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); font-weight: var(--hm-input-font-weight); }
.hm-foundation-spacing { max-width: 100%; height: 24px; margin-block: 12px; background: var(--hm-sem-state-active); }
.hm-foundation-radius { width: 100%; height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-default); background: var(--hm-sem-bg-content); }
.hm-brand-color-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.hm-brand-color-chip { flex: 1 0 110px; min-width: 0; padding: 8px; border: 1px solid var(--hm-sem-stroke-default); }
.hm-brand-color-chip[data-base] { border: 2px solid var(--hm-sem-fg-primary); font-weight: var(--hm-font-weight-bold); }
.hm-brand-color-chip h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; }

/* Color reference additions only; preserve the existing palette row and Default emphasis. */
.hm-foundation .hm-color-gradient-preview { height: 112px; }
.hm-foundation .hm-color-gradient-stops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hm-foundation .hm-color-gradient-stops .hm-brand-color-chip { flex: 1 1 110px; }
/* New common background stop IDs stay on one line at the supported widths. */
.hm-foundation .hm-color-gradient-stops .hm-brand-color-chip[data-gradient-stop-token] { flex-basis: 220px; }
.hm-foundation .hm-color-foreground-sample { padding: 16px; background: var(--hm-sem-bg-surface); }

/* Company Colors: two-level grid. Columns follow the Story content width (not the viewport): companies 3 -> 2 -> 1 (min 316px each),
   chips up to 3 per row (min 100px each, 3 -> 2 -> 1). Chip size stays at one third even when a company has fewer chips. */
.hm-foundation .hm-company-grid { display: grid; gap: 48px 32px; grid-template-columns: repeat(auto-fill, minmax(max(316px, (100% - 64px) / 3), 1fr)); }
.hm-foundation .hm-company-grid > .sb-page-section { min-width: 0; margin-top: 0; }
.hm-foundation .hm-brand-color-row[data-company-id] { display: grid; gap: 8px; overflow: visible; padding-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(max(100px, (100% - 16px) / 3), 1fr)); }

/* Typography: compact specification page. Font Family one line, Font Weight small cards, Specimens as comparison tables
   (two columns on wide screens, stacked rows on narrow screens). */
.hm-foundation .hm-typo-family { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; }
.hm-foundation .hm-typo-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.hm-foundation .hm-typo-weight { padding: 12px 16px; }
.hm-foundation .hm-typo-weight p { margin: 0; }
.hm-foundation .hm-typo-weight-preview { margin: 4px 0 !important; font-size: var(--hm-card-title-font-size); line-height: var(--hm-card-title-line-height); }
.hm-foundation .hm-typo-tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.hm-foundation .hm-typo-table { width: 100%; border-collapse: collapse; }
.hm-foundation .hm-typo-table th, .hm-foundation .hm-typo-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); text-align: left; vertical-align: baseline; font-weight: var(--hm-input-font-weight); }
.hm-foundation .hm-typo-table thead th { color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
.hm-foundation .hm-typo-table tbody th { width: 27%; font-weight: var(--hm-font-weight-bold); }
.hm-foundation .hm-typo-table td:last-child { width: 26%; padding-right: 0; }
.hm-foundation .hm-typo-metrics span, .hm-foundation .hm-typo-metrics small { display: block; }
.hm-foundation .hm-typo-metrics small { font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
@media (min-width: 1100px) { .hm-foundation .hm-typo-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hm-foundation .hm-typo-table thead { display: none; }
  .hm-foundation .hm-typo-table, .hm-foundation .hm-typo-table tbody, .hm-foundation .hm-typo-table tr, .hm-foundation .hm-typo-table th, .hm-foundation .hm-typo-table td { display: block; width: auto !important; }
  .hm-foundation .hm-typo-table tr { padding: 8px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); }
  .hm-foundation .hm-typo-table th, .hm-foundation .hm-typo-table td { padding: 2px 0; border-bottom: 0; }
}

/* Layout: compact specification page (PC: three bands; narrow screens stack and scroll naturally).
   Tightening applies only inside .hm-layout-ref; the common Story page and other Foundation pages are unchanged. No fixed heights or clipping. */
.hm-foundation .hm-layout-ref { display: grid; gap: 32px; word-break: keep-all; }
.hm-foundation .hm-layout-ref .sb-page-section { margin-top: 0; }
.hm-foundation .hm-layout-ref .sb-page-section-header { padding-bottom: 8px; margin-bottom: 12px; }
.hm-foundation .hm-layout-ref p, .hm-foundation .hm-layout-ref h3 { margin: 0; }
.hm-foundation .hm-layout-ref .hm-foundation-card, .hm-foundation .hm-layout-ref .hm-foundation-panel { padding: 8px 16px; }
.hm-foundation .hm-layout-ref code { font-size: var(--hm-button-font-size-sm); color: var(--hm-sem-fg-secondary); }
.hm-foundation .hm-layout-ref .hm-layout-value { font-weight: var(--hm-font-weight-bold); }
.hm-foundation .hm-layout-list { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); align-content: center; }
.hm-foundation .hm-layout-spacing-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.hm-foundation .hm-layout-spacing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-foundation .hm-layout-spacing-foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; min-height: 14px; }
.hm-foundation .hm-layout-spacing-foot .hm-foundation-spacing { flex: none; height: 6px; margin: 0; }
.hm-foundation .hm-layout-spacing-foot .hm-foundation-note { min-width: 0; font-size: var(--hm-button-font-size-sm); }
.hm-foundation .hm-layout-radius-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.hm-foundation .hm-layout-ref .hm-layout-radius .hm-foundation-radius { height: 24px; margin: 0 0 6px; }
.hm-foundation .hm-layout-radius .hm-layout-value { display: block; }
.hm-foundation .hm-layout-radius .hm-layout-spacing-head { margin-top: 0; }
@media (min-width: 480px) { .hm-foundation .hm-layout-spacing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .hm-foundation .hm-layout-spacing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }