/* Website documentation shares the public site's canvas and header.
   These rules do not change the reusable SDK or native OutSystems styles. */
.landing-shell { background: var(--bluui-surface); }
.landing-shell .blu-demo-brand-caption { display: none; }
.landing-shell .top-nav { gap: 22px; }
.landing-shell .top-nav a { white-space: nowrap; }
.docs-shell > .blu-showcase-shell__body { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 48px; width: 100%; max-width: 1368px; margin: 0 auto; padding: 40px 48px 0; align-items: start; }
.docs-shell.blu-showcase-shell--closed > .blu-showcase-shell__body > .blu-showcase-shell__sidebar-slot,
.docs-shell .blu-showcase-shell__sidebar-slot { display: block; position: sticky; top: 24px; width: auto; height: auto; overflow: visible; box-shadow: none; }
.docs-navigation > summary { display: none; }
.docs-shell .site-sidebar { height: auto; max-height: calc(100dvh - 48px); padding: 0 12px 20px 0; border: 0; background: transparent; scrollbar-width: thin; }
.docs-shell .sidebar-title { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin: 26px 10px 18px; color: var(--bluui-text-muted); }
.docs-sections { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 10px 18px; border-bottom: 1px solid var(--bluui-border); font-size: 11px; }
.docs-sections a { color: var(--bluui-text-muted); }
.docs-sections a.is-current { color: var(--bluui-primary-text); font-weight: 650; }
.docs-shell .blu-navigation-menu__link { min-height: 36px; padding: 8px 10px; border-radius: 6px; font-size: 12px; }
.docs-shell .blu-navigation-menu .is-active { background: var(--bluui-primary-soft); color: var(--bluui-primary-text); box-shadow: none; }
.docs-shell .blu-navigation-menu .is-active:hover { background: var(--bluui-primary-soft); }
.docs-shell .blu-navigation-menu__group-title { margin-inline: 0; padding-inline: 10px; font-size: 10px; }
.docs-shell .nav-item-label { gap: 9px; }
.docs-shell .blu-navigation-menu__icon { width: 18px; height: 18px; }
.docs-shell .sidebar-footer { margin-inline: 10px; }
.docs-shell .blu-showcase__content { padding: 0; gap: 28px; max-width: none; min-height: auto; }
.docs-shell .blu-showcase-shell__main { overflow: visible; }
.docs-shell .blu-page-header { margin: 0; padding-bottom: 28px; border-bottom: 1px solid var(--bluui-border); }
.docs-shell .blu-page-header .blu-page-header__title { font-size: clamp(32px, 3.2vw, 46px); font-weight: 650; letter-spacing: -.045em; }
.docs-shell .blu-page-header .blu-page-header__description { font-size: 15px; line-height: 1.7; max-width: 650px; }
.docs-shell .blu-page-header .blu-page-header__section { margin-bottom: 16px; }
.docs-shell .blu-page-header .blu-page-header__row { align-items: flex-start; flex-wrap: wrap; }
.docs-shell .blu-page-header__actions { max-width: 100%; }
.docs-shell .content-footer { margin-top: 24px; }
.docs-shell .doc-card { box-shadow: none; }
.docs-shell :is(pre, .code-example, .api-card, .doc-card, [role="tabpanel"]) { min-width: 0; max-width: 100%; }
.docs-shell :is(.reading-intro, .guide-measure) { max-width: 760px; }
.docs-shell :is(h2, h3, p) { overflow-wrap: break-word; }
.docs-shell .blu-showcase__tabs { overflow-x: auto; flex-wrap: nowrap; }
.docs-shell .blu-showcase__tab { flex-shrink: 0; }
.docs-shell :is(.audit-section, .guide-section, .pattern-live) { scroll-margin-top: 24px; }
/* A compact support directory with guidance directly beneath its component. */
.audit-table-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-top: 24px; }
.audit-status-filter { display: grid; gap: 8px; min-width: 220px; }
.audit-status-filter label { font-size: 12px; font-weight: 650; }
.audit-status-filter select { min-height: 44px; padding: 10px 36px 10px 12px; border: 1px solid var(--bluui-border); border-radius: 6px; color: var(--bluui-text); background: var(--bluui-surface); font: inherit; font-size: 13px; }
.audit-table-tools #audit-result-count { margin: 0 0 10px; font-size: 12px; }
.accessibility-page .audit-filter-help { margin: 12px 0 18px; font-size: 12px; }
.audit-coverage-table { max-height: 640px; overflow: auto; scrollbar-gutter: stable; }
.audit-coverage-table .audit-table { min-width: 940px; }
.audit-wcag-level { white-space: nowrap; }
.audit-wcag-level .audit-status { position: relative; min-width: 42px; justify-content: center; }
.accessibility-page .audit-level-key { font-size: 12px; line-height: 1.8; margin: 16px 0; }
.audit-coverage-table thead { position: sticky; top: 0; z-index: 1; background: var(--bluui-surface-muted); }
.audit-coverage-table th, .audit-coverage-table td { padding: 12px; }
.audit-coverage-table .audit-component-row > th { padding: 0 12px; min-width: 190px; }
.audit-component-row { cursor: pointer; }
.audit-component-row:hover, .audit-component-row:focus-within, .audit-component-row:has([aria-expanded="true"]) { background: var(--bluui-surface-muted); }
.audit-row-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 0; border: 0; background: transparent; color: var(--bluui-primary-text); text-align: left; font: inherit; font-weight: 600; cursor: pointer; scroll-margin-block: 60px; }
.audit-row-chevron { flex: none; font-size: 22px; line-height: 1; width: 14px; text-align: center; }
.audit-row-toggle[aria-expanded="true"] .audit-row-chevron { transform: rotate(90deg); }
.audit-row-toggle:focus-visible, .audit-status-filter select:focus-visible, .audit-coverage-table:focus-visible { outline: 2px solid var(--bluui-primary-text); outline-offset: 3px; }
.audit-guidance-row { background: var(--bluui-surface-muted); }
.audit-guidance-row > td { padding: 20px 24px 24px; }
.audit-row-guidance { max-width: min(70ch, calc(100vw - 104px)); }
.audit-row-guidance h3 { margin: 0 0 12px; font-size: 16px; }
.audit-row-guidance p { margin: 0 0 12px; }
.audit-row-guidance .audit-review-note { border-left: 2px solid var(--bluui-border); padding-left: 12px; font-size: 12px; }
.audit-filter-empty { padding: 28px; border: 1px solid var(--bluui-border); border-radius: 8px; background: var(--bluui-surface-muted); }
.audit-filter-empty h3 { margin: 0; font-size: 16px; }
.accessibility-page [hidden] { display: none !important; }
@media (max-width: 600px) {
  .audit-status-filter { width: 100%; }
  .audit-table-tools { gap: 10px; }
  .audit-table-tools #audit-result-count { margin: 0; }
  .audit-guidance-row > td { padding: 18px 12px; }
}
/* Visual guidance uses shared semantic tokens, so the examples follow appearance. */
.design-guide { min-width: 0; }
.design-guide p { color: var(--bluui-text-muted); font-size: 14px; line-height: 1.8; }
.design-guide h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.035em; line-height: 1.2; font-weight: 650; margin: 10px 0 16px; }
.design-guide h3 { font-size: 17px; line-height: 1.4; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 650; }
.design-guide .guide-lead { font-size: 19px; line-height: 1.6; letter-spacing: -.015em; color: var(--bluui-text); }
.design-guide .section-kicker { font-size: 10px; color: var(--bluui-text-muted); line-height: 1.7; }
.guide-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding: 10px 0 12px; }
.guide-hero h2 { font-size: clamp(32px, 3.3vw, 44px); letter-spacing: -.045em; margin: 18px 0; }
.guide-hero .action-row { margin-top: 24px; }
.guide-workspace { margin: 0; border: 1px solid var(--bluui-border); border-radius: 14px; overflow: hidden; background: var(--bluui-surface); box-shadow: 0 20px 50px -28px rgb(30 40 60 / 25%); }
.guide-workspace > figcaption { padding: 12px 18px; display: flex; gap: 14px; align-items: center; background: var(--bluui-surface-muted); color: var(--bluui-text-muted); font-size: 10px; border-bottom: 1px solid var(--bluui-border); }
.guide-window-dots { letter-spacing: 2px; color: var(--bluui-border-strong); font-size: 8px; white-space: nowrap; }
.guide-workspace-body { padding: 26px 22px; }
.guide-workspace-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.guide-workspace-title h3 { font-size: 21px; margin: 0; }
.guide-workspace-body > p { font-size: 12px; margin: 6px 0 22px; }
.guide-workspace .embedded-demo { min-height: 0; }
.guide-workspace .embedded-demo .demo-row { gap: 0; }
.guide-record { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin: 0 0 24px; }
.guide-record dt { font-size: 10px; color: var(--bluui-text-muted); margin-bottom: 5px; }
.guide-record dd { margin: 0; font-size: 12px; font-weight: 550; }
.guide-note { display: flex; gap: 12px; padding: 14px; background: var(--bluui-surface-muted); border: 1px solid var(--bluui-border); border-radius: 7px; font-size: 11px; line-height: 1.7; color: var(--bluui-text-muted); }
.guide-note strong { color: var(--bluui-text); font-weight: 550; }
.guide-workspace-action { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.guide-workspace-action > span { font-size: 10px; color: var(--bluui-text-muted); }
.guide-section { padding: 40px 0 0; margin-top: 40px; border-top: 1px solid var(--bluui-border); }
.guide-section--first { padding-top: 0; margin-top: 0; border: 0; }
.guide-heading { max-width: 710px; margin-bottom: 25px; }
.guide-heading p { margin: 0; }
.guide-anatomy { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; align-items: center; }
.guide-anatomy-screen { border: 1px solid var(--bluui-border); border-radius: 10px; background: var(--bluui-surface-muted); padding: 18px; }
.guide-anatomy-screen > div { display: flex; gap: 12px; padding: 18px 10px; align-items: center; border-bottom: 1px solid var(--bluui-border); font-size: 11px; }
.guide-anatomy-screen > div:first-child { padding-top: 4px; color: var(--bluui-text-muted); }
.guide-anatomy-screen > div:last-child { border: 0; padding-bottom: 4px; }
.guide-anatomy-screen b { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--bluui-border-strong); border-radius: 50%; font-size: 9px; color: var(--bluui-primary-text); }
.guide-anatomy-screen small { display: block; margin-top: 6px; font-size: 10px; color: var(--bluui-text-muted); }
.guide-anatomy-screen .guide-static-action { margin-left: auto; font-size: 9px; padding: 8px; }
.guide-anatomy-content > div { flex: 1; }
.guide-placeholder-lines { display: grid; gap: 9px; margin: 16px 0; }
.guide-placeholder-lines i { display: block; height: 7px; border-radius: 3px; width: 100%; background: var(--bluui-border); }
.guide-placeholder-lines i:last-child { width: 65%; }
.guide-key { list-style: decimal-leading-zero; margin: 0; padding-left: 30px; }
.guide-key li { padding: 6px 0 6px 8px; font-size: 13px; }
.guide-key li::marker { color: var(--bluui-primary-text); font-size: 11px; }
.guide-key p { margin: 4px 0; font-size: 12px; line-height: 1.6; }
.guide-tiles, .guide-color-roles, .guide-writing, .guide-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.guide-tile { display: flex; flex-direction: column; color: var(--bluui-text); border: 1px solid var(--bluui-border); border-radius: 10px; padding: 24px; }
.guide-tile:hover { background: var(--bluui-surface-muted); text-decoration: none; border-color: var(--bluui-border-strong); }
.guide-index { display: block; font-size: 12px; color: var(--bluui-primary-text); margin-bottom: 30px; font-variant-numeric: tabular-nums; }
.guide-tile p { font-size: 12px; margin: 0 0 24px; }
.guide-link { color: var(--bluui-primary-text); font-size: 12px; font-weight: 600; }
.guide-tile .guide-link { margin-top: auto; }
.guide-path { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.guide-path a { display: grid; gap: 12px; color: var(--bluui-text); border-top: 2px solid var(--bluui-primary-soft); padding: 20px 0; }
.guide-path a span { color: var(--bluui-text-muted); font-size: 12px; line-height: 1.8; }
.guide-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 30px 0 6px; margin-top: 40px; border-top: 1px solid var(--bluui-border); }
.guide-bottom h2 { font-size: 23px; margin: 0; }
.guide-bottom p { font-size: 13px; margin: 10px 0 0; }
.guide-bottom > a { font-size: 12px; }
.guide-principle { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 38px 0; border-bottom: 1px solid var(--bluui-border); }
.guide-principle:last-child { border: 0; padding-bottom: 0; }
.guide-principle-visual { margin: 0; border: 1px solid var(--bluui-border); border-radius: 10px; overflow: hidden; }
.guide-example { background: var(--bluui-surface-muted); padding: 26px; min-height: 180px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.guide-example p { margin: 0; font-size: 12px; }
.guide-example-title { font-size: 19px; font-weight: 600; }
.guide-action-sample { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 12px; margin-top: 6px; }
.guide-static-action { display: inline-flex; align-items: center; align-self: flex-start; font-size: 11px; font-weight: 550; padding: 10px 14px; background: var(--bluui-primary); color: var(--bluui-on-primary); border-radius: 6px; line-height: 1.4; }
.guide-principle-visual figcaption { padding: 16px 22px; font-size: 12px; border-top: 1px solid var(--bluui-border); }
.guide-principle-visual figcaption p { margin: 5px 0 0; font-size: 11px; }
.guide-mini-record { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bluui-surface); padding: 12px; border: 1px solid var(--bluui-border); border-radius: 6px; font-size: 11px; }
.guide-status { display: inline-flex; align-items: center; border: 1px solid var(--bluui-border); border-radius: 5px; padding: 4px 8px; font-size: 10px; line-height: 1.5; color: var(--bluui-text-muted); background: var(--bluui-surface-muted); }
.guide-status--success { background: var(--bluui-success-soft); color: var(--bluui-success-text); border-color: var(--bluui-success-border); }
.guide-status--warning { background: var(--bluui-warning-soft); color: var(--bluui-warning-text); border-color: var(--bluui-warning-border); }
.guide-status--danger { background: var(--bluui-danger-soft); color: var(--bluui-danger-text); border-color: var(--bluui-danger-border); }
.guide-state-flow, .guide-keyboard-flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; }
.guide-focus-example { outline: 2px solid var(--bluui-primary); outline-offset: 3px; padding: 9px 12px; border-radius: 4px; background: var(--bluui-surface); }
.guide-checklist { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.guide-checklist li { padding: 16px 0 16px 24px; position: relative; border-top: 1px solid var(--bluui-border); font-size: 13px; line-height: 1.7; }
.guide-checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--bluui-primary-text); }
.guide-color-roles > article { min-width: 0; }
.guide-color-roles p { font-size: 12px; }
.guide-color-roles code { font-size: 10px; }
.guide-color-stage, .guide-surface-stack { display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 10px; min-height: 175px; padding: 18px; margin-bottom: 22px; border: 1px solid var(--bluui-border); border-radius: 10px; background: var(--bluui-surface-muted); }
.guide-surface-stack { flex-direction: column; align-items: stretch; gap: 0; padding: 16px; }
.guide-surface-stack span { display: block; padding: 10px 12px; font-size: 10px; border: 1px solid var(--bluui-border); border-radius: 6px; background: var(--bluui-background); }
.guide-surface-stack span:nth-child(2) { margin: -2px 0 0 16px; background: var(--bluui-surface); }
.guide-surface-stack span:nth-child(3) { margin: -2px 0 0 32px; background: var(--bluui-surface-raised); box-shadow: 0 8px 16px -10px rgb(0 0 0 / 30%); }
.guide-theme-note { display: flex; gap: 22px; align-items: center; padding: 26px; border: 1px solid var(--bluui-border); border-radius: 10px; margin-top: 30px; }
.guide-theme-note p { font-size: 12px; margin: 0; }
.guide-theme-orbit { width: 44px; height: 44px; border: 1px solid var(--bluui-border-strong); border-radius: 50%; flex: 0 0 44px; background: linear-gradient(90deg,var(--bluui-text) 50%,var(--bluui-surface) 50%); }
.guide-type-composition, .guide-spacing-composition { display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: center; margin: 0; }
.guide-type-composition > div, .guide-spacing-form { padding: 30px; background: var(--bluui-surface-muted); border: 1px solid var(--bluui-border); border-radius: 10px; }
.guide-type-composition h3 { font-size: 29px; letter-spacing: -.035em; margin-top: 14px; }
.guide-type-composition .guide-type-intro { font-size: 14px; margin: 0 0 26px; }
.guide-type-field { padding-top: 22px; border-top: 1px solid var(--bluui-border); font-size: 13px; }
.guide-type-field p { margin: 8px 0; }
.guide-type-field small { font-size: 11px; color: var(--bluui-text-muted); }
.guide-type-composition dl { margin: 0; }
.guide-type-composition dl > div { margin: 20px 0; }
.guide-type-composition dt { font-size: 13px; font-weight: 600; }
.guide-type-composition dd { margin: 6px 0 0; font-size: 12px; color: var(--bluui-text-muted); }
.guide-spacing-form { font-size: 12px; }
.guide-spacing-form small { font-size: 11px; color: var(--bluui-text-muted); }
.guide-spacing-gap { display: block; padding-block: var(--gap); font-size: 9px; color: var(--bluui-primary-text); line-height: 1; }
.guide-spacing-gap--section { border-left: 2px solid var(--bluui-primary); padding-left: 10px; margin: 6px 0; }
.guide-field-example { display: block; border: 1px solid var(--bluui-border-strong); background: var(--bluui-surface); padding: 12px; border-radius: 6px; }
.guide-writing > div { border-top: 2px solid var(--bluui-primary-soft); padding: 20px 0; }
.guide-writing strong { display: block; margin: 12px 0 8px; font-size: 15px; }
.guide-writing p { font-size: 12px; }
.guide-accessibility-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.guide-accessibility-examples > article { padding: 26px; border: 1px solid var(--bluui-border); border-radius: 10px; }
.guide-accessibility-examples .section-kicker { display: block; margin-bottom: 22px; }
.guide-accessibility-examples label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 8px; }
.guide-accessibility-examples input { display: block; width: 100%; }
.guide-accessibility-examples input[aria-invalid="true"] { border-color: var(--bluui-danger); }
.guide-accessibility-examples small { display: block; color: var(--bluui-text-muted); font-size: 11px; margin-top: 8px; }
.guide-accessibility-examples .guide-field-error { color: var(--bluui-danger-text); font-size: 12px; margin-top: 8px; }
.guide-accessibility-examples p { font-size: 12px; }
/* Patterns: illustrated state references sit alongside working component demos. */
.guide-index-intro { max-width: 720px; padding: 8px 0 26px; }
.guide-index-intro h2 { font-size: clamp(30px, 3.2vw, 42px); }
.guide-pattern-index { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.guide-pattern-card { display: flex; flex-direction: column; border: 1px solid var(--bluui-border); border-radius: 12px; overflow: hidden; color: var(--bluui-text); }
.guide-pattern-card:hover { border-color: var(--bluui-border-strong); text-decoration: none; }
.guide-pattern-card > div:last-child { padding: 26px; }
.guide-pattern-card h2 { font-size: 24px; margin: 12px 0; }
.guide-pattern-card p { font-size: 13px; margin-bottom: 24px; }
.guide-pattern-preview { padding: 22px 26px; background: var(--bluui-surface-muted); border-bottom: 1px solid var(--bluui-border); }
.guide-pattern-preview .guide-index { margin-bottom: 18px; }
.guide-pattern-flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 10px; }
.guide-pattern-flow span { background: var(--bluui-surface); padding: 10px; border: 1px solid var(--bluui-border); border-radius: 6px; }
.guide-pattern-flow i { font-style: normal; color: var(--bluui-text-muted); }
.guide-pattern-intro { max-width: 760px; }
.guide-pattern-intro .guide-lead { font-size: 17px; }
.guide-jump { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 22px; font-size: 12px; }
.guide-sequence { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 0; margin: 32px 0 0; list-style: none; }
.guide-sequence li { display: flex; gap: 14px; border-top: 1px solid var(--bluui-border); padding-top: 16px; line-height: 1.6; font-size: 12px; }
.guide-sequence span { color: var(--bluui-primary-text); font-size: 11px; }
.guide-sequence strong { font-weight: 550; }
.guide-state-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.guide-state-controls button { font: inherit; font-size: 12px; border: 1px solid var(--bluui-border-strong); background: var(--bluui-surface); color: var(--bluui-text); border-radius: 6px; padding: 10px 14px; cursor: pointer; }
.guide-state-controls button[aria-pressed="true"] { background: var(--bluui-primary-soft); color: var(--bluui-primary-text); border-color: var(--bluui-primary); }
.guide-state-explorer { border: 1px solid var(--bluui-border); border-radius: 12px; overflow: hidden; margin-bottom: 36px; }
.guide-state-explorer section:not([hidden]) { display: grid; grid-template-columns: 1.2fr 1fr; }
.guide-state-screen { min-height: 350px; padding: 28px; background: var(--bluui-surface-muted); display: flex; flex-direction: column; align-items: flex-start; }
.guide-state-screen-top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.guide-state-screen h3 { font-size: 23px; }
.guide-state-screen > p { font-size: 12px; margin: 0 0 18px; }
.guide-state-rows { width: 100%; margin: 0 0 22px; font-size: 11px; }
.guide-state-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bluui-border); }
.guide-state-rows dd { margin: 0; text-align: right; color: var(--bluui-text-muted); }
.guide-state-screen .guide-static-action { margin-top: auto; }
.guide-state-explanation { display: flex; flex-direction: column; justify-content: center; padding: 30px; border-left: 1px solid var(--bluui-border); }
.guide-state-explanation h3 { font-size: 22px; margin: 12px 0 0; }
.guide-state-explanation p { font-size: 13px; }
.guide-state-explanation a { font-size: 12px; margin-top: 10px; }
.guide-empty-symbol { font-size: 36px; color: var(--bluui-text-muted); border: 1px solid var(--bluui-border); width: 70px; height: 70px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 24px; }
.guide-decision-grid article { border-top: 2px solid var(--bluui-primary-soft); padding-top: 22px; }
.guide-decision-grid h3 { font-size: 16px; }
.guide-decision-grid p { font-size: 12px; }
.guide-responsibilities { margin: 0 0 28px; }
.guide-responsibilities > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--bluui-border); font-size: 13px; }
.guide-responsibilities dt { display: flex; gap: 16px; font-weight: 550; }
.guide-responsibilities dt span { font-size: 10px; color: var(--bluui-primary-text); }
.guide-responsibilities dd { margin: 0; color: var(--bluui-text-muted); line-height: 1.8; }
.guide-related { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 18px; font-size: 13px; }
/* Community scope and module ownership; licence text is preserved as issued. */
.community-page { max-width: none; }
.community-page .integration-demo { padding: 28px; border: 1px solid var(--bluui-border); border-radius: 12px; background: var(--bluui-surface-muted); }
.community-page .integration-demo h2 { margin-block: 12px; }
.community-page .audit-section { margin-top: 32px; padding-top: 28px; }
.community-components { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 22px 0; }
.community-components li { padding: 9px 13px; border: 1px solid var(--bluui-border); border-radius: 6px; font-size: 12px; background: var(--bluui-surface-muted); }
.community-module-grid, .integration-module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.community-module, .integration-module-list > div { min-width: 0; padding: 20px; border: 1px solid var(--bluui-border); border-radius: 10px; }
.community-module-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.community-module-heading h3 { margin: 0; font-size: 17px; }
.community-module-heading > span { font-size: 11px; color: var(--bluui-text-muted); white-space: nowrap; }
.community-module > code, .integration-module-list code { overflow-wrap: anywhere; font-size: 12px; }
.community-module .community-components { margin: 18px 0 0; }
.community-module .community-components li { padding: 0; }
.community-components a { display: block; padding: 9px 13px; text-decoration: none; }
.community-components a:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 3px; border-radius: 4px; }
.integration-module-list { padding: 0; }
.integration-module-list dt { margin: 0 0 12px; font-weight: 600; }
.integration-module-list dd { margin: 0; font-size: 13px; line-height: 1.7; color: var(--bluui-text-muted); }
.module-dependency { display: block; margin-top: 12px; font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .community-module-grid, .integration-module-list { grid-template-columns: 1fr; }
}
.community-page .audit-table { table-layout: fixed; min-width: 660px; }
.community-page .audit-table th, .community-page .audit-table td { text-align: left; vertical-align: top; line-height: 1.6; padding: 16px; }
.community-page .audit-table th:first-child { width: 40%; }
.community-page .audit-table thead th { background: var(--bluui-surface-muted); color: var(--bluui-text); font-size: 12px; }
.community-page .audit-table tbody tr:nth-child(even) { background: var(--bluui-surface-muted); }
.community-page .community-sizes { min-width: 380px; }
.community-page .edition-grid { margin-top: 32px; }
.community-page .edition-card h2 { font-size: 21px; line-height: 1.35; margin: 0; letter-spacing: -.025em; }
.community-license { border: 1px solid var(--bluui-border); border-radius: 8px; margin-top: 24px; padding: 18px 22px; }
.community-license summary { cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.6; }
.community-license .license-terms { margin-top: 20px; padding-top: 16px; }
.community-license .license-terms h3 { font-size: 15px; line-height: 1.5; margin: 24px 0 8px; }
.community-license .license-terms p { font-size: 13px; line-height: 1.85; max-width: 75ch; }
.community-page .callout { margin-top: 32px; }
.community-page .callout h2 { margin: 0 0 12px; font-size: 22px; }
@media (max-width: 1250px) {
  .landing-shell .search-trigger span, .landing-shell .search-trigger kbd { display: none; }
  .landing-shell .search-trigger { padding: 9px; }
  .landing-shell .top-nav { gap: 18px; font-size: 12px; }
  .docs-shell > .blu-showcase-shell__body { padding-inline: 32px; gap: 32px; grid-template-columns: 185px minmax(0,1fr); }
  .guide-hero { grid-template-columns: 1fr; }
  .guide-hero > div { max-width: 680px; }
  .guide-workspace { max-width: 580px; width: 100%; }
  .guide-tiles, .guide-color-roles { gap: 14px; }
  .guide-tile { padding: 20px; }
  .guide-principle { gap: 24px; }
}
@media (max-width: 959px) {
  .docs-shell > .blu-showcase-shell__body { display: flex; flex-direction: column; gap: 28px; padding-top: 24px; }
  .docs-shell.blu-showcase-shell--closed > .blu-showcase-shell__body > .blu-showcase-shell__sidebar-slot,
  .docs-shell .blu-showcase-shell__sidebar-slot { position: static; width: 100%; height: auto; }
  .docs-navigation { border-block: 1px solid var(--bluui-border); }
  .docs-navigation > summary { display: list-item; cursor: pointer; padding: 14px 0; font-size: 12px; font-weight: 600; }
  .docs-shell .site-sidebar { padding: 12px 0 24px; max-height: 60dvh; }
  .docs-shell .site-sidebar .sidebar-title { display: none; }
  .docs-sections { margin-bottom: 20px; }
  .guide-hero { grid-template-columns: 1fr 1fr; }
  .guide-hero h2 { font-size: 33px; }
  .guide-workspace-body { padding: 22px 18px; }
  .guide-type-composition, .guide-spacing-composition { gap: 24px; }
}
@media (max-width: 700px) {
  .docs-shell > .blu-showcase-shell__body { padding-inline: 22px; }
  .docs-shell .blu-page-header .blu-page-header__title { font-size: 34px; }
  .landing-shell .top-nav { gap: 6px 18px; }
  .guide-hero, .guide-anatomy, .guide-principle, .guide-type-composition, .guide-spacing-composition, .guide-accessibility-examples, .guide-pattern-index { grid-template-columns: 1fr; }
  .guide-hero h2 { font-size: 38px; }
  .guide-hero .guide-lead { font-size: 18px; }
  .guide-section { padding-top: 30px; margin-top: 30px; }
  .guide-section--first { padding-top: 0; margin-top: 0; }
  .guide-tiles, .guide-color-roles, .guide-writing, .guide-decision-grid, .guide-path, .guide-checklist { grid-template-columns: 1fr; }
  .guide-index { margin-bottom: 18px; }
  .guide-tile p { margin-bottom: 16px; }
  .guide-path { gap: 8px; }
  .guide-color-stage, .guide-surface-stack { min-height: 145px; margin-bottom: 18px; }
  .guide-color-roles { gap: 28px; }
  .guide-theme-note { padding: 20px; align-items: flex-start; }
  .guide-sequence { grid-template-columns: 1fr; gap: 14px; }
  .guide-state-explorer section:not([hidden]) { grid-template-columns: 1fr; }
  .guide-state-screen { padding: 22px; min-height: 325px; }
  .guide-state-explanation { border-left: 0; border-top: 1px solid var(--bluui-border); padding: 24px; }
  .guide-responsibilities > div { grid-template-columns: 1fr; gap: 10px; }
  .community-page .integration-demo { padding: 22px; }
  .community-page .integration-demo h2 { font-size: 24px; }
  .community-page .edition-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .docs-shell * { scroll-behavior: auto; } }

.docs-shell .blu-navigation-menu .is-active img { filter: none; }
[data-bluui-theme="dark"] .docs-shell .blu-navigation-menu img { filter: brightness(0) invert(.8); }
.guide-loading-shapes { display: grid; gap: 14px; width: 100%; margin: 0 0 26px; }
.guide-loading-shapes i { display: block; height: 12px; border-radius: 4px; background: var(--bluui-border); }
.guide-loading-shapes i:nth-child(1) { width: 45%; height: 22px; }
.guide-loading-shapes i:nth-child(3) { width: 80%; }
.guide-loading-shapes i:nth-child(4) { height: 45px; }