/* Documentation layout only. Production tokens and component classes stay authoritative. */
.si-guide { color: var(--si-body); padding-bottom: var(--si-space-6); }
.si-guide *, .si-guide *::before, .si-guide *::after { box-sizing: border-box; }
.si-guide [hidden] { display: none; }
.si-guide :is(section, h2, h3, details) { scroll-margin-top: 7rem; }
.si-guide p:not(.h1, .h2, .h3, .h4, .h5, .h6) { line-height: var(--si-leading-relaxed); }
#main:has(> .si-guide) > .frame-indent > .frame-col { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }
.si-guide h2 { margin: 0 0 1rem; color: var(--si-ink); }
.si-guide h3 { margin: 1.5rem 0 1rem; }
.si-guide :is(code, pre) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.si-guide code { color: var(--si-gray-700); overflow-wrap: anywhere; font-size: .8125rem; }
.si-guide strong { font-weight: 500; }
.si-guide a { text-underline-offset: .18em; }
.si-guide__hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; padding: 1rem 0 2.5rem; }
.si-guide__hero > *, .si-guide__component-grid > *, .si-guide__foundation-grid > *, .si-guide__type-intro > * { min-width: 0; }
.si-guide .si-guide__eyebrow { color: var(--si-orange-text); font-size: .875rem; font-weight: 500; margin: 0 0 .75rem; line-height: 1.5; }
.si-guide__eyebrow span { display: block; color: var(--si-gray-700); font-weight: 400; }
.si-guide .si-guide__claim { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 1.25rem; }
.si-guide .si-guide__lead { font-size: 1.125rem; color: var(--si-ink); }
.si-guide .si-guide__note { color: var(--si-gray-700); font-size: .875rem; line-height: 1.5; margin: .75rem 0 1rem; }
.si-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.si-guide__actions :is(a, button) { white-space: normal; max-width: 100%; }
.si-guide__hero-visual { margin: 0; background: var(--si-gray-100); }
.si-guide__hero-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.si-guide figcaption { padding: .75rem 1rem; font-size: .8125rem; line-height: 1.5; color: var(--si-gray-700); }
.si-guide__nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .5rem 0; border-top: 2px solid var(--si-ink); border-bottom: 1px solid var(--si-gray-300); }
.si-guide__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.si-guide__nav a:hover { text-decoration: underline; }
.si-guide__section { padding: 3rem 0; border-bottom: 1px solid var(--si-gray-300); }
.si-guide__section > p { max-width: 75ch; }
.si-guide__contrast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.si-guide__contrast { background: var(--si-gray-100); }
.si-guide__contrast-sample { padding: 1.5rem; min-height: 126px; display: flex; flex-direction: column; justify-content: center; background: var(--sample-bg); color: var(--sample-ink); }
.si-guide__contrast-sample strong { font-size: 2.25rem; line-height: 1.15; }
.si-guide__contrast-sample span { font-size: .875rem; margin-top: .5rem; }
.si-guide__contrast-copy { padding: 1.25rem; }
.si-guide__contrast-copy h3 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.si-guide__contrast-copy p { font-size: .9375rem; margin-bottom: 0; }
.si-guide__details { margin-top: 1rem; border: 1px solid var(--si-gray-300); padding: 0 1rem; background: var(--si-white); }
.si-guide__details summary { padding: .875rem 0; min-height: 48px; font-weight: 500; color: var(--si-ink); cursor: pointer; line-height: 1.5; }
.si-guide__details[open] > summary { margin-bottom: .5rem; border-bottom: 1px solid var(--si-gray-200); }
.si-guide__details > :last-child { margin-bottom: 1rem; }
.si-guide__table-wrap { max-width: 100%; overflow: auto; }
.si-guide table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: 0 0 .5rem; }
.si-guide :is(th, td) { padding: .75rem; border-bottom: 1px solid var(--si-gray-300); text-align: left; vertical-align: top; min-width: 7rem; }
.si-guide th { font-weight: 500; background: var(--si-gray-100); color: var(--si-ink); }
.si-guide caption { caption-side: top; color: var(--si-gray-700); font-size: .875rem; }
.si-guide__swatches, .si-guide__ramp, .si-guide__audiences, .si-guide__spacing, .si-guide__sample-nav { padding: 0; margin: 1.5rem 0; list-style: none; }
.si-guide__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.si-guide__swatch { border: 1px solid var(--si-gray-300); min-width: 0; }
.si-guide__swatch-color { height: 76px; background: var(--swatch); border-bottom: 1px solid var(--si-gray-200); }
.si-guide__swatch-copy { padding: 1rem; }
.si-guide__swatch strong, .si-guide__swatch code { display: block; }
.si-guide__swatch strong { color: var(--si-ink); margin-bottom: .375rem; }
.si-guide__swatch button { background: none; border: 0; color: var(--si-blue); display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; text-align: left; font: inherit; font-size: .875rem; padding: .375rem 0; cursor: pointer; text-decoration: underline; }
.si-guide__ramp { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px; }
.si-guide__ramp li { min-width: 0; }
.si-guide__ramp i { display: block; height: 56px; background: var(--swatch); border: 1px solid var(--si-gray-300); }
.si-guide__ramp strong, .si-guide__ramp code { display: block; text-align: center; margin-top: .5rem; }
.si-guide__ramp code { font-size: .6875rem; }
.si-guide__audiences { display: flex; flex-wrap: wrap; gap: .75rem; }
.si-guide__audiences li { border-left: 8px solid var(--swatch); padding: .5rem .75rem; background: var(--si-gray-100); color: var(--si-ink); }
.si-guide__audiences code { display: block; margin-top: .25rem; }
.si-guide__type-intro { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2rem; align-items: center; padding: 1.5rem 0; }
.si-guide .si-guide__alphabet { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.2; color: var(--si-ink); margin: 0; }
.si-guide__alphabet span { font-size: 1.0625rem; letter-spacing: .04em; }
.si-guide__type-row { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; border-top: 1px solid var(--si-gray-300); align-items: baseline; padding: 1.25rem 0; }
.si-guide__type-row code { line-height: 1.5; }
.si-guide__type-row p { margin: 0; font-weight: 500; color: var(--si-ink); }
.si-guide__foundation-grid, .si-guide__component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.si-guide__spacing li { display: grid; grid-template-columns: 6.5rem 3.25rem 1fr; gap: 1rem; align-items: center; margin: .75rem 0; }
.si-guide__spacing i { height: 1rem; width: var(--space); background: var(--si-orange); display: block; }
.si-guide__measurements { margin: 0; }
.si-guide__measurements div { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--si-gray-300); }
.si-guide__measurements dt { font-weight: 500; }
.si-guide__measurements dd { margin: 0; color: var(--si-gray-700); }
.si-guide__specimen { border: 1px solid var(--si-gray-300); padding: 1.5rem; margin-top: 1.5rem; }
.si-guide__specimen > h3 { margin: 0 0 1.25rem; font-size: 1.0625rem; }
.si-guide__specimen > :last-child { margin-bottom: 0; }
.si-guide__cover-example { margin: 0; min-width: 0; }
.si-guide .si-guide__cover-stage { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 1.5rem; min-height: 224px; margin: 0; padding: 1.5rem; background-color: var(--si-white); }
.si-guide__cover-stage .si-material-cover { display: block; width: auto; max-width: 100%; height: auto; max-height: 176px; border: 0; }
.si-guide__cover-example figcaption { padding-inline: 0; }
.si-guide__specimen .form-control { min-height: 44px; border-color: var(--si-gray-600); max-width: 100%; }
.si-guide__specimen label { display: block; font-weight: 500; margin-bottom: .5rem; }
.si-guide__specimen .si-guide__check { display: flex; align-items: center; gap: .75rem; min-height: 44px; margin: 1rem 0; font-weight: 400; }
.si-guide__check input { width: 24px; height: 24px; flex: 0 0 24px; accent-color: var(--si-blue); }
.si-guide .si-guide__error { color: var(--si-danger); margin: .5rem 0 1rem; }
.si-guide input[aria-invalid="true"] { border: 2px solid var(--si-danger); }
.si-guide__sample-nav a { display: block; padding: .75rem 1rem; color: var(--si-ink); min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--si-gray-300); }
.si-guide__sample-nav a[aria-current] { background: var(--si-orange); font-weight: 500; }
.si-guide__sample-nav span { display: block; font-size: .8125rem; font-weight: 400; }
.si-guide__status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.si-guide__status { margin: 0; padding: 1rem; border-left: 3px solid currentColor; }
.si-guide__status strong { display: block; }
.si-guide__status--success { color: var(--si-success); background: var(--si-success-tint); }
.si-guide__status--error { color: var(--si-danger); background: var(--si-danger-tint); }
.si-guide__status--info { color: var(--si-blue-dark); background: var(--si-info-tint); }
.si-guide__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0 1rem; }
.si-guide__logos figure { border: 1px solid var(--si-gray-300); padding: 2rem 1rem 1rem; margin: 0; text-align: center; }
.si-guide__logos img { display: block; max-width: 100%; height: auto; margin: auto; }
.si-guide__logos figcaption { padding-top: 1.5rem; }
.si-guide__logo-inverse { background: var(--si-ink); }
.si-guide .si-guide__logo-inverse figcaption { color: var(--si-white); }
.si-guide__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.si-guide__facts article { border-top: 1px solid var(--si-gray-300); padding: 1.25rem 0; }
.si-guide__facts h3 { margin: 0 0 .75rem; }
.si-guide__facts p { margin: 0; font-size: .9375rem; }
.si-guide__prose { max-width: 75ch; }
.si-guide__downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.si-guide__download { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1.5rem; background: var(--si-gray-100); border: 1px solid var(--si-gray-300); text-decoration: none; }
.si-guide__download strong { font-size: 1.125rem; grid-column: 1; }
.si-guide__download span { grid-column: 1; color: var(--si-gray-700); font-size: .875rem; }
.si-guide__download span[aria-hidden] { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.5rem; color: var(--si-orange-text); }
.si-guide__download:hover { background: var(--si-gray-200); }
.si-guide__tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--si-gray-300); margin-bottom: 1rem; }
.si-guide__tabs button { font: inherit; font-weight: 500; border: 0; border-bottom: 3px solid transparent; background: var(--si-white); padding: .75rem; min-height: 44px; cursor: pointer; color: var(--si-gray-700); }
.si-guide__tabs button[aria-selected="true"] { border-bottom-color: var(--si-blue); color: var(--si-blue); }
.si-guide pre { background: var(--si-gray-100); padding: 1rem; font-size: .8125rem; white-space: pre; overflow: auto; max-height: 40rem; color: var(--si-ink); }
.si-guide__document { max-width: 75ch; overflow-wrap: anywhere; }
.si-guide__document h3 { font-size: 1.5rem; }
.si-guide__document h4 { font-size: 1.125rem; margin-top: 1.75rem; }
.si-guide__credit { padding: 2rem 0 0; font-size: .875rem; color: var(--si-gray-700); }
@media (max-width: 991.98px) {
  .si-guide__hero { gap: 1.5rem; }
  .si-guide__swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .si-guide__contrast-grid { gap: 1rem; }
  .si-guide__specimen { padding: 1rem; }
}
@media (max-width: 767.98px) {
  .si-guide__hero, .si-guide__type-intro, .si-guide__foundation-grid, .si-guide__component-grid { grid-template-columns: 1fr; }
  .si-guide__hero-visual { max-width: 36rem; }
  .si-guide__swatches, .si-guide__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si-guide__contrast-grid, .si-guide__downloads, .si-guide__status-grid { grid-template-columns: 1fr; }
  .si-guide__contrast { display: grid; grid-template-columns: 7.5rem 1fr; }
  .si-guide__contrast-sample { padding: 1rem; }
  .si-guide__contrast-sample strong { font-size: 1.75rem; }
  .si-guide__contrast-copy { padding: 1rem; }
  .si-guide__ramp { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem 2px; }
  .si-guide__section { padding: 2rem 0; }
  .si-guide__type-row { grid-template-columns: 1fr; gap: .5rem; }
  .si-guide__logos { grid-template-columns: 1fr; }
}
@media (max-width: 399.98px) {
  .si-guide__contrast, .si-guide__facts { grid-template-columns: 1fr; }
  .si-guide__contrast-sample { min-height: 96px; }
  .si-guide__swatch-copy { padding: .75rem; }
  .si-guide__swatches { gap: .75rem; }
  .si-guide__measurements div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .si-guide *, .si-guide *::before, .si-guide *::after { transition: none; animation: none; scroll-behavior: auto; }
}
@media print {
  .si-guide__nav, .si-guide__tabs, .si-guide__actions, .si-guide__swatch button { display: none; }
  .si-guide__section { break-inside: avoid; }
  .si-guide [hidden] { display: none; }
  .si-guide__swatch-color, .si-guide__ramp i { print-color-adjust: exact; }
}