/* Baluarte Material Design v1.5 — portal de documentação. */
/* BALUARTE PORTAL — shell compartilhado por todas as páginas. */

@layer portal-reset, portal-shell, portal-components, portal-utilities;

@layer portal-reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 84px;
    background: var(--bg);
  }

  body {
    margin: 0;
    min-block-size: 100vh;
    font-family: var(--b-font-sans);
    font-size: var(--b-text-md);
    line-height: var(--b-leading-normal);
    font-optical-sizing: auto;
    font-synthesis: none;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, svg { display: block; max-inline-size: 100%; }
  button, input { font: inherit; }
  button { color: inherit; }
  a { color: inherit; }

  ::selection {
    color: var(--on-accent);
    background: var(--accent);
  }
}

@layer portal-shell {
  :root {
    --portal-header-h: 54px;
    --portal-sidebar-w: var(--b-nav-frame-expanded);
    --portal-content-max: 1120px;
    --portal-content-gutter: clamp(var(--b-space-8), 4vw, var(--b-space-12));
    --portal-header-glass: color-mix(in srgb, var(--bg) 78%, transparent);
    --portal-sidebar-close-duration: 160ms;
    --portal-sidebar-label-close-duration: 60ms;
    --portal-sidebar-label-open-duration: 200ms;
    --portal-sidebar-label-open-delay: 140ms;
    --portal-panel: color-mix(in srgb, var(--surface) 82%, var(--bg));
    --portal-panel-strong: color-mix(in srgb, var(--surface-2) 86%, var(--bg));
    --portal-accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg));
    --portal-accent-border: color-mix(in srgb, var(--accent) 32%, var(--border));
    --portal-success-soft: color-mix(in srgb, var(--success) 10%, var(--bg));
    --portal-danger-soft: color-mix(in srgb, var(--danger) 9%, var(--bg));
    --portal-shadow: var(--elevation-portal);
  }

  :root.portal-sidebar-collapsed { --portal-sidebar-w: var(--b-nav-frame-collapsed); }

  [data-theme="dark"] {
    --portal-panel: color-mix(in srgb, var(--surface) 88%, var(--bg));
    --portal-panel-strong: color-mix(in srgb, var(--surface-2) 90%, var(--bg));
    --portal-accent-soft: color-mix(in srgb, var(--accent) 15%, var(--bg));
    --portal-accent-border: color-mix(in srgb, var(--accent) 46%, var(--border));
    --portal-success-soft: color-mix(in srgb, var(--success) 13%, var(--bg));
    --portal-danger-soft: color-mix(in srgb, var(--danger) 12%, var(--bg));
    --portal-header-glass: color-mix(in srgb, var(--bg) 82%, transparent);
    --portal-shadow: var(--elevation-portal);
  }

  .skip-link {
    position: fixed;
    inset-block-start: var(--b-space-4);
    inset-inline-start: var(--b-space-4);
    z-index: calc(var(--b-z-toast) + 1);
    padding: var(--b-space-4) var(--b-space-6);
    border: 2px solid var(--accent);
    border-radius: var(--b-shape-control-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--text);
    background: var(--bg);
    box-shadow: var(--elevation-3);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--b-space-8)));
    transition: transform var(--b-motion-fast) var(--b-ease-standard);
  }

  .skip-link:focus { transform: translateY(0); }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--b-z-sticky);
    display: grid;
    grid-template-columns: var(--portal-sidebar-w) minmax(0, 1fr);
    block-size: var(--portal-header-h);
    padding: 0;
    background: var(--portal-header-glass);
    -webkit-backdrop-filter: blur(var(--b-effect-gaussian-blur)) saturate(var(--b-effect-gaussian-saturation));
    backdrop-filter: blur(var(--b-effect-gaussian-blur)) saturate(var(--b-effect-gaussian-saturation));
    transition: grid-template-columns var(--b-motion-gentle) var(--b-ease-standard);
  }

  .portal-sidebar-collapsed .site-header {
    transition-duration: var(--portal-sidebar-close-duration);
    transition-timing-function: var(--b-ease-standard);
  }

  .site-header__rail,
  .site-header__content {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    block-size: var(--portal-header-h);
  }

  .site-header__rail {
    gap: var(--b-space-4);
    padding-inline: 7px 6px;
    overflow: hidden;
    border-inline-end: 1px solid var(--divider);
    transition: gap var(--b-motion-gentle) var(--b-ease-standard);
  }

  .site-header__content {
    gap: var(--b-space-4);
    padding-inline: 7px 14px;
  }

  .site-header__spacer { flex: 1; min-inline-size: var(--b-space-4); }

  @supports not (backdrop-filter: blur(1px)) {
    .site-header { background: color-mix(in srgb, var(--bg) 96%, transparent); }
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-4);
    min-inline-size: 0;
    flex: 1 1 auto;
    color: var(--text);
    margin-inline-start: 7px;
    text-decoration: none;
    transition:
      margin-inline-start var(--b-motion-gentle) var(--b-ease-standard),
      opacity var(--portal-sidebar-label-open-duration) var(--b-ease-standard) var(--portal-sidebar-label-open-delay);
  }

  .sidebar-collapse-toggle { display: none; }
  .js .sidebar-collapse-toggle { display: inline-flex; }

  @media (min-width: 961px) {
    .portal-sidebar-collapsed .site-header__rail {
      gap: 0;
      padding-inline: var(--b-nav-collapsed-inset);
      transition: gap var(--portal-sidebar-close-duration) var(--b-ease-standard);
    }
    .portal-sidebar-collapsed .site-header__rail .brand {
      margin-inline-start: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition:
        margin-inline-start var(--portal-sidebar-close-duration) var(--b-ease-standard),
        opacity var(--portal-sidebar-label-close-duration) var(--b-ease-standard);
    }
  }

  .brand__mark {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--b-radius-xl);
    background: var(--identity);
    box-shadow: inset 0 0 0 1px var(--b-alpha-white-16);
  }

  .brand__mark img {
    inline-size: 25px;
    block-size: 25px;
    object-fit: contain;
  }

  [data-theme="dark"] .brand__mark img { filter: invert(1); }

  .brand__copy {
    display: flex;
    align-items: baseline;
    gap: var(--b-space-3);
    min-inline-size: 0;
    white-space: nowrap;
  }

  .brand__name {
    font-size: var(--b-brand-name-size);
    font-weight: var(--b-brand-weight);
    line-height: var(--b-brand-name-leading);
    letter-spacing: var(--b-brand-tracking);
  }

  .brand__descriptor {
    color: var(--text-subtle);
    font-size: var(--b-brand-descriptor-size);
    font-weight: var(--b-brand-weight);
    line-height: var(--b-brand-descriptor-leading);
  }

  .header-badges {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
  }

  .version-badge,
  .scope-badge {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding-inline: var(--b-space-4);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-pill);
    color: var(--text-subtle);
    background: var(--surface);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .scope-badge {
    border-color: var(--portal-accent-border);
    color: var(--accent);
    background: var(--portal-accent-soft);
  }

  .header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
  }

  .app-shell {
    display: grid;
    grid-template-columns: var(--portal-sidebar-w) minmax(0, 1fr);
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
    padding-inline: 0;
    transition: grid-template-columns var(--b-motion-gentle) var(--b-ease-standard);
  }

  .portal-sidebar-collapsed .app-shell {
    transition-duration: var(--portal-sidebar-close-duration);
    transition-timing-function: var(--b-ease-standard);
  }

  .sidebar {
    position: sticky;
    inset-block-start: var(--portal-header-h);
    align-self: start;
    min-inline-size: 0;
    block-size: calc(100vh - var(--portal-header-h));
    padding: var(--b-nav-frame-padding-start) var(--b-nav-frame-padding-end) var(--b-nav-frame-padding-start) var(--b-nav-frame-padding-start);
    overflow-x: hidden;
    overflow-y: auto;
    border-inline-end: 1px solid var(--divider);
  }

  .sidebar__mobile-head {
    display: none;
    align-items: start;
    justify-content: space-between;
    gap: var(--b-space-4);
    block-size: calc(var(--portal-header-h) - var(--b-nav-frame-padding-start));
    margin-block-end: 0;
  }

  .sidebar__title {
    margin: 0;
    font-size: var(--b-text-lg);
    font-weight: var(--b-weight-semibold);
  }

  .sidebar-group + .sidebar-group { margin-block-start: var(--b-nav-section-gap); }

  .sidebar-nav {
    display: grid;
    gap: 0;
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--b-space-4);
    min-block-size: var(--b-nav-item-block);
    padding-block: 0;
    padding-inline: var(--b-nav-frame-padding-start);
    border-radius: var(--b-shape-navigation-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--text);
    font-size: var(--b-text-md);
    font-weight: var(--b-weight-body);
    line-height: var(--b-leading-normal);
    text-decoration: none;
    transition:
      color var(--b-motion-fast) var(--b-ease-standard),
      background var(--b-motion-fast) var(--b-ease-standard);
  }

  .sidebar-link:hover,
  .sidebar-link:focus-visible {
    color: var(--text);
    background: var(--surface-hover);
  }

  .sidebar-link[aria-current="page"] {
    color: var(--text);
    background: var(--surface-selected);
  }

  .sidebar-link svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }

  .sidebar-status {
    display: grid;
    gap: var(--b-space-4);
    margin-block-start: var(--b-nav-section-gap);
    padding: var(--b-space-6);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--surface);
  }

  .sidebar-status__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-4);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .sidebar-status__row strong { color: var(--text); font-weight: var(--b-weight-semibold); }

  .app-main {
    min-inline-size: 0;
    padding-block: var(--b-space-10) var(--b-space-13);
    padding-inline: var(--portal-content-gutter);
  }

  .content-wrap {
    inline-size: min(100%, var(--portal-content-max));
    margin-inline: auto;
  }

  .section {
    margin-block-start: var(--b-space-12);
  }

  .section:first-child { margin-block-start: 0; }

  .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--b-space-7);
    margin-block-end: var(--b-space-7);
  }

  .section-heading__copy { max-inline-size: 720px; }

  .section-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: var(--b-text-4xl);
    font-weight: var(--b-weight-title);
    line-height: var(--b-leading-title-lg);
    letter-spacing: -.01em;
  }

  .section-heading p {
    margin: var(--b-space-3) 0 0;
    color: var(--text-subtle);
    font-size: var(--b-text-md);
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--b-z-overlay) - 1);
    border: 0;
    background: var(--scrim);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--b-motion-base) var(--b-ease-standard),
      visibility var(--b-motion-base) step-end;
  }

  .mobile-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition-timing-function: var(--b-ease-standard), step-start;
  }

  body.has-drawer-open { overflow: hidden; }
}

@layer portal-components {
  /* Shell controls consume the core Icon Button contract. */
  .menu-toggle { display: none; }

  .theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    block-size: var(--b-control-compact);
    padding: var(--b-space-1);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--surface);
  }

  .theme-switch__button {
    display: inline-grid;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--b-shape-control-compact-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--text-subtle);
    background: transparent;
    cursor: pointer;
    transition:
      color var(--b-motion-fast) var(--b-ease-standard),
      background var(--b-motion-fast) var(--b-ease-standard);
  }

  .theme-switch__button:hover { color: var(--text); background: var(--surface-hover); }
  .theme-switch__button[aria-pressed="true"] { color: var(--text); background: var(--surface-selected); }
  .theme-switch__button svg { inline-size: 17px; block-size: 17px; }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--b-space-4);
    min-block-size: 40px;
    padding-inline: var(--b-space-7);
    border: 1px solid transparent;
    border-radius: var(--b-shape-control-radius);
    corner-shape: var(--b-corner-squircle);
    font-size: var(--b-text-md);
    font-weight: var(--b-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--b-motion-fast) var(--b-ease-standard),
      background var(--b-motion-fast) var(--b-ease-standard),
      border-color var(--b-motion-fast) var(--b-ease-standard),
      filter var(--b-motion-fast) var(--b-ease-standard);
  }

  .button svg { inline-size: 17px; block-size: 17px; flex: 0 0 auto; }
  .button--primary { color: var(--on-action); background: var(--action); }
  .button--primary:hover { background: var(--action-hover); }
  .button--secondary { color: var(--text); background: transparent; border-color: var(--border-strong); }
  .button--secondary:hover { background: var(--surface-hover); }
  .button--quiet { color: var(--text-subtle); background: transparent; }
  .button--quiet:hover { color: var(--text); background: var(--surface-hover); }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: clamp(var(--b-space-9), 5vw, var(--b-space-12));
    align-items: center;
    padding: clamp(var(--b-space-9), 5vw, var(--b-space-12));
    border: 1px solid var(--border);
    border-radius: var(--b-radius-3xl);
    background:
      radial-gradient(850px 320px at 105% -15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%),
      radial-gradient(620px 280px at -10% 110%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
      linear-gradient(145deg, var(--portal-panel), var(--bg));
    overflow: hidden;
  }

  /* Refinos visuais restritos aos heroes do portal. */
  :is(.hero, .page-hero, .inspiration-stage) .eyebrow {
    margin: 0 0 var(--b-space-7);
    padding: var(--b-space-2) var(--b-space-5) var(--b-space-2) var(--b-space-4);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-pill);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
  }

  .hero .hero__lead {
    max-inline-size: 520px;
  }

  .hero .hero__facts {
    max-inline-size: 520px;
    margin-block-start: var(--b-space-9);
    padding-block-start: var(--b-space-7);
    border-block-start: 1px solid var(--divider);
  }

  .hero .hero__facts li {
    gap: var(--b-space-4);
    color: var(--text-subtle);
    font-size: var(--b-text-sm);
  }

  .hero__fact-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    flex: 0 0 auto;
    border-radius: var(--b-radius-circle);
    color: var(--success);
    background: var(--portal-success-soft);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
    margin: 0 0 var(--b-space-5);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .status-dot {
    inline-size: 8px;
    block-size: 8px;
    flex: 0 0 auto;
    border-radius: var(--b-radius-circle);
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
  }

  .hero h1 {
    max-inline-size: 760px;
    margin: 0;
    color: var(--text);
    font-size: var(--b-type-display-xl-size);
    font-weight: var(--b-weight-medium);
    line-height: var(--b-leading-hero);
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .hero__lead {
    max-inline-size: 700px;
    margin: var(--b-space-6) 0 0;
    color: var(--text-subtle);
    font-size: var(--b-text-xl);
    font-weight: var(--b-weight-light);
    line-height: var(--b-leading-relaxed);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-space-4);
    margin-block-start: var(--b-space-8);
  }

  .hero__facts {
    display: grid;
    gap: var(--b-space-5);
    margin: var(--b-space-8) 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
  }

  .hero__facts svg { inline-size: 15px; block-size: 15px; color: var(--success); }

  .system-map {
    position: relative;
    display: grid;
    gap: var(--b-space-5);
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    box-shadow: var(--portal-shadow);
  }

  .system-map__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-4);
  }

  .system-map__title {
    margin: 0;
    font-size: var(--b-text-md);
    font-weight: var(--b-weight-semibold);
  }

  .status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-2);
    inline-size: max-content;
    min-inline-size: 0;
    max-inline-size: 100%;
    min-block-size: 24px;
    justify-self: start;
    padding-inline: var(--b-space-4);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-pill);
    color: var(--text-subtle);
    background: var(--surface);
    overflow: hidden;
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-chip--stable { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: var(--portal-success-soft); }
  .status-chip--review { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: var(--warning-bg); }
  .status-chip--proposal { color: var(--accent); border-color: var(--portal-accent-border); background: var(--portal-accent-soft); }

  .system-layers {
    display: grid;
    gap: var(--b-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .system-layer {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--b-space-4);
    min-block-size: 50px;
    padding: var(--b-space-4) var(--b-space-5);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--bg);
  }

  .system-layer__index {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--b-radius-md);
    color: var(--accent);
    background: var(--portal-accent-soft);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
  }

  .system-layer__name { font-size: var(--b-text-sm); font-weight: var(--b-weight-semibold); }
  .system-layer__desc { color: var(--text-subtle); font-size: var(--b-text-xs); }

  .identity-rule {
    display: flex;
    align-items: flex-start;
    gap: var(--b-space-4);
    padding: var(--b-space-5);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel-strong);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .identity-rule__mark {
    inline-size: 12px;
    block-size: 12px;
    flex: 0 0 auto;
    margin-block-start: 3px;
    border-radius: var(--b-radius-xs);
    background: var(--identity);
  }

  .identity-rule strong { color: var(--text); }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--b-space-5);
    margin-block-start: var(--b-space-7);
  }

  .stat-card {
    min-inline-size: 0;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: linear-gradient(160deg, var(--portal-panel), var(--bg));
  }

  .stat-card__value {
    display: block;
    color: var(--text);
    font-size: var(--b-text-5xl);
    font-weight: var(--b-weight-medium);
    line-height: 1;
    letter-spacing: -.015em;
  }

  .stat-card__label {
    display: block;
    margin-block-start: var(--b-space-4);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
    line-height: var(--b-leading-snug);
  }

  .finder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--b-space-3);
    inline-size: min(100%, 520px);
    min-block-size: 44px;
    padding-inline: var(--b-space-5) var(--b-space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--b-radius-xl);
    background: var(--bg);
    transition: border-color var(--b-motion-fast) var(--b-ease-standard);
  }

  .finder:focus-within { border-color: var(--accent); }

  .finder__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--b-space-4);
    min-inline-size: 0;
  }

  .finder svg { inline-size: 18px; block-size: 18px; color: var(--text-subtle); }

  .finder input {
    min-inline-size: 0;
    inline-size: 100%;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: var(--b-text-md);
  }

  .finder input::placeholder { color: var(--text-subtle); }

  .finder__shortcut {
    padding: 1px var(--b-space-3);
    border: 1px solid var(--border);
    border-block-end-width: 2px;
    border-radius: var(--b-radius-xs);
    color: var(--text-subtle);
    background: var(--surface);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  .finder__clear {
    display: none;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--b-shape-control-compact-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--text-subtle);
    background: transparent;
    cursor: pointer;
  }

  .finder__clear:hover { color: var(--text); background: var(--surface-hover); }
  .finder__clear:active { background: var(--surface-selected); }
  .finder__clear.is-visible { display: inline-grid; place-items: center; }
  .finder__clear svg { inline-size: 16px; block-size: 16px; }

  .finder-result-count {
    margin: var(--b-space-4) 0 0;
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .destination-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-6);
  }

  .destination-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--b-space-4);
    min-block-size: 196px;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-shape-interactive-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--text);
    background: var(--bg);
    text-decoration: none;
    transition:
      background var(--b-motion-fast) var(--b-ease-standard),
      border-color var(--b-motion-fast) var(--b-ease-standard),
      box-shadow var(--b-motion-base) var(--b-ease-standard);
  }

  .destination-card:hover,
  .destination-card:focus-visible {
    border-color: var(--border-strong);
    background: var(--surface);
    box-shadow: var(--elevation-1);
  }

  .destination-card:hover .destination-card__icon,
  .destination-card:focus-visible .destination-card__icon {
    box-shadow: inset 0 0 0 1px var(--portal-accent-border);
  }

  .destination-card:hover .destination-card__link .b-icon,
  .destination-card:focus-visible .destination-card__link .b-icon {
    translate: 2px 0;
  }

  .destination-card:active { background: var(--surface-selected); }
  .destination-card[hidden] { display: none; }

  /* Nas trilhas, o chip é metadado silencioso: cor semântica fica para contextos normativos. */
  .destination-card .status-chip {
    color: var(--text-muted);
    border-color: var(--border);
    background: transparent;
  }

  .destination-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-4);
  }

  .destination-card__icon {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border-radius: var(--b-radius-xl);
    color: var(--accent);
    background: var(--portal-accent-soft);
    transition: box-shadow var(--b-motion-fast) var(--b-ease-standard);
  }

  .destination-card__icon svg { inline-size: 20px; block-size: 20px; }

  .destination-card h3 {
    margin: 0;
    font-size: var(--b-text-xl);
    font-weight: var(--b-weight-semibold);
    letter-spacing: -.01em;
  }

  .destination-card p {
    margin: 0;
    color: var(--text-subtle);
    font-size: var(--b-text-sm);
    line-height: var(--b-leading-normal);
  }

  .destination-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
    color: var(--text);
    font-size: var(--b-text-xs);
    font-weight: var(--b-weight-semibold);
  }

  .destination-card__link svg { inline-size: 15px; block-size: 15px; }

  .destination-card__link .b-icon {
    transition: translate var(--b-motion-fast) var(--b-ease-standard);
  }

  .finder-empty {
    display: none;
    padding: var(--b-space-10);
    border: 1px dashed var(--border-strong);
    border-radius: var(--b-radius-xl);
    color: var(--text-subtle);
    background: var(--surface);
    text-align: center;
  }

  .finder-empty.is-visible { display: block; }

  .split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: var(--b-space-7);
  }

  .panel {
    padding: var(--b-space-8);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: var(--surface);
  }

  .panel h3 {
    margin: 0;
    font-size: var(--b-text-2xl);
    font-weight: var(--b-weight-title);
    letter-spacing: normal;
  }

  .panel > p {
    margin: var(--b-space-3) 0 0;
    color: var(--text-subtle);
  }

  .maturity-list,
  .tension-list,
  .principle-list,
  .release-list {
    display: grid;
    gap: var(--b-space-3);
    margin: var(--b-space-7) 0 0;
    padding: 0;
    list-style: none;
  }

  .maturity-item,
  .tension-item,
  .principle-item,
  .release-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--b-space-4);
    align-items: start;
    padding: var(--b-space-5);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--bg);
  }

  .maturity-item__icon,
  .tension-item__icon,
  .principle-item__icon,
  .release-item__icon {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: var(--b-radius-md);
    color: var(--accent);
    background: var(--portal-accent-soft);
  }

  .maturity-item__icon svg,
  .tension-item__icon svg,
  .principle-item__icon svg,
  .release-item__icon svg { inline-size: 16px; block-size: 16px; }

  :is(.maturity-item, .tension-item, .principle-item, .release-item) > :last-child > strong {
    display: block;
    color: var(--text);
    font-size: var(--b-text-sm);
  }

  :is(.maturity-item, .tension-item, .principle-item, .release-item) > :last-child > span {
    display: block;
    margin-block-start: 2px;
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .adoption {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: var(--b-space-8);
    padding: var(--b-space-8);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: var(--portal-panel);
  }

  .adoption h2 {
    margin: 0;
    font-size: var(--b-text-4xl);
    font-weight: var(--b-weight-title);
    letter-spacing: -.01em;
  }

  .adoption__lead {
    margin: var(--b-space-4) 0 0;
    color: var(--text-subtle);
  }

  .adoption-steps {
    counter-reset: adoption;
    display: grid;
    gap: var(--b-space-4);
    margin: var(--b-space-7) 0 0;
    padding: 0;
    list-style: none;
  }

  .adoption-steps li {
    counter-increment: adoption;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--b-space-4);
    color: var(--text-subtle);
    font-size: var(--b-text-sm);
  }

  .adoption-steps li::before {
    content: counter(adoption, decimal-leading-zero);
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: var(--b-radius-md);
    color: var(--accent);
    background: var(--portal-accent-soft);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
  }

  .code-card {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--code-bg);
    box-shadow: var(--elevation-1);
  }

  .code-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-4);
    min-block-size: 44px;
    padding-inline: var(--b-space-6);
    border-block-end: 1px solid var(--b-alpha-white-12);
    color: var(--code-action-text);
    font-size: var(--b-text-xs);
  }

  .copy-button {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
    min-block-size: 32px;
    padding-inline: var(--b-space-4);
    border: 1px solid var(--code-action-border);
    border-radius: var(--b-shape-control-compact-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--code-text);
    background: var(--code-action-bg);
    cursor: pointer;
  }

  .copy-button:hover:not(:disabled) { background: var(--code-action-bg-hover); }
  .copy-button:active:not(:disabled) { filter: brightness(1.12); }
  .copy-button:disabled { cursor: not-allowed; opacity: .5; }
  .copy-button svg { inline-size: 14px; block-size: 14px; }

  .code-card pre {
    margin: 0;
    padding: var(--b-space-7);
    overflow-x: auto;
    color: var(--code-text);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-sm);
    line-height: 1.7;
    tab-size: 2;
  }

  .principle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-space-5);
  }

  .principle-item { margin: 0; min-block-size: 112px; }

  .release-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--b-space-7);
  }

  .release-card {
    padding: var(--b-space-8);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: linear-gradient(160deg, var(--portal-panel), var(--bg));
  }

  /* Identidades do estado da versão: contrato em accent, rodada inspiracional em roxo. */
  .release-card--contract {
    background:
      radial-gradient(460px 200px at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%),
      linear-gradient(160deg, var(--portal-panel), var(--bg));
  }

  .release-card--round {
    background:
      radial-gradient(460px 200px at 100% 0%, color-mix(in srgb, var(--b-purple-500) 9%, transparent), transparent 68%),
      linear-gradient(160deg, var(--portal-panel), var(--bg));
  }

  .release-card h3 {
    display: flex;
    align-items: center;
    gap: var(--b-space-4);
    margin: 0;
    padding-block-end: var(--b-space-6);
    border-block-end: 1px solid var(--divider);
    font-size: var(--b-text-xl);
    font-weight: var(--b-weight-semibold);
  }

  .release-card h3::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    flex: 0 0 auto;
    border-radius: var(--b-radius-circle);
  }

  .release-card--contract h3::before {
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  .release-card--round h3::before {
    background: var(--b-purple-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--b-purple-500) 14%, transparent);
  }

  /* Trilho de marcos: itens sem caixa, chips conectados por linha vertical. */
  .release-card .release-list {
    position: relative;
    gap: 0;
    margin-block-start: var(--b-space-2);
  }

  .release-card .release-list::before {
    content: "";
    position: absolute;
    inset-block: 25px;
    inset-inline-start: 15px;
    inline-size: 1px;
    background: var(--divider);
  }

  .release-card .release-item {
    position: relative;
    padding: var(--b-space-5) 0;
    border: 0;
    background: transparent;
  }

  .release-card--contract .release-item__icon {
    color: var(--success);
    background: var(--portal-success-soft);
    border: 1px solid color-mix(in srgb, var(--success) 22%, var(--border));
    border-radius: var(--b-radius-circle);
  }

  .release-card--round .release-item__icon {
    color: var(--b-purple-500);
    background: color-mix(in srgb, var(--b-purple-500) 10%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--b-purple-500) 26%, var(--border));
    border-radius: var(--b-radius-circle);
  }

  .release-card > p {
    margin: var(--b-space-3) 0 0;
    color: var(--text-subtle);
    font-size: var(--b-text-sm);
  }

  .site-footer {
    margin-block-start: var(--b-space-13);
    padding-block: var(--b-space-9);
    border-block-start: 1px solid var(--divider);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-7);
    flex-wrap: wrap;
  }

  .footer-links { display: inline-flex; flex-wrap: wrap; gap: var(--b-space-6); }
  .footer-links a { color: var(--text-subtle); text-underline-offset: 3px; }
  .footer-links a:hover { color: var(--text); }

  .top-search-button {
    min-block-size: var(--b-control-compact);
    padding-inline: var(--b-space-5);
    font-size: var(--b-text-sm);
  }

  .top-search-button kbd { font-family: var(--b-font-mono); font-size: var(--b-text-2xs); }
}

@layer portal-utilities {
  .sr-only {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .muted-note { color: var(--text-subtle); }

  .no-js-note {
    padding: var(--b-space-4) var(--b-space-6);
    border-block-end: 1px solid var(--border);
    color: var(--warning);
    background: var(--warning-bg);
    font-size: var(--b-text-xs);
    text-align: center;
  }

  .balu :is(a, button, input):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @supports (text-box: trim-both cap alphabetic) {
    :where(.button__label, .destination-card__link, .brand__name, .brand__descriptor) {
      text-box: trim-both cap alphabetic;
    }

    /* Labels do rail usam line-box integral: `alphabetic` remove descendentes como p/ç/g sob overflow. */
    .sidebar-link__label { text-box: normal; }
  }

  @media (max-width: 1080px) {
    .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero { grid-template-columns: 1fr; }
    .system-map { max-inline-size: 700px; }
  }

  @media (max-width: 960px) {
    .site-header {
      display: flex;
      align-items: center;
      gap: var(--b-space-4);
      padding-inline: 14px;
    }
    .site-header__rail,
    .site-header__content { display: contents; }
    .menu-toggle { display: inline-grid; order: -2; }
    .brand { flex: 0 1 auto; order: -1; }
    .sidebar-collapse-toggle { display: none !important; }
    .brand__descriptor { display: none; }
    .scope-badge { display: none; }
    .app-shell {
      grid-template-columns: 1fr;
      padding-inline: var(--b-space-5);
    }

    .sidebar {
      position: static;
      block-size: auto;
      padding: var(--b-space-7) 0;
      border-inline-end: 0;
      border-block-end: 1px solid var(--divider);
    }

    .js .sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: var(--b-z-overlay);
      inline-size: var(--b-nav-frame-expanded);
      block-size: 100dvh;
      padding: var(--b-nav-frame-padding-start) var(--b-nav-frame-padding-end) var(--b-nav-frame-padding-start) var(--b-nav-frame-padding-start);
      border-inline-end: 1px solid var(--border);
      border-block-end: 0;
      background: var(--bg);
      box-shadow: var(--elevation-5);
      transform: translateX(-105%);
      transition: transform var(--b-motion-gentle) var(--b-ease-standard);
    }

    .js:dir(rtl) .sidebar { transform: translateX(105%); }
    .js .sidebar.is-open { transform: translateX(0); }
    .js .sidebar__mobile-head { display: flex; }
    .app-main { padding: var(--b-space-8) 0 var(--b-space-12); }
    .split-grid, .adoption { grid-template-columns: 1fr; }
  }

  @media (max-width: 680px) {
    .brand__copy { display: block; overflow: hidden; text-overflow: ellipsis; }
    .brand__name { font-size: var(--b-brand-name-size); }
    .header-badges { display: none; }
    .header-actions { gap: var(--b-space-2); }
    .theme-switch { gap: 0; }

    .hero { padding: var(--b-space-8); border-radius: var(--b-radius-2xl); }
    .hero h1 { font-size: var(--b-type-display-xl-size); }
    .hero__lead { font-size: var(--b-text-lg); }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .button { inline-size: 100%; }
    .system-layer { grid-template-columns: 28px minmax(0, 1fr); }
    .system-layer .status-chip { grid-column: 2; justify-self: start; }

    .section { margin-block-start: var(--b-space-11); }
    .section-heading { display: grid; align-items: start; }
    .finder { inline-size: 100%; }
    .finder__shortcut { display: none; }
    .destination-grid, .stats-grid, .principle-grid, .release-grid { grid-template-columns: 1fr; }
    .destination-card { min-block-size: auto; }
    .panel, .adoption { padding: var(--b-space-7); }
    .site-footer__inner { align-items: flex-start; flex-direction: column; }
  }

  @media (hover: none) and (pointer: coarse) {
    .menu-toggle, #drawer-close { inline-size: 44px; block-size: 44px; }
    .button { min-block-size: 44px; }
    .sidebar-link { min-block-size: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      transition-delay: 0ms !important;
    }
  }

  @media (forced-colors: active) {
    .brand__mark,
    .sidebar-collapse-toggle__mark,
    .rail-control-specimen__mark,
    .destination-card__icon,
    .maturity-item__icon,
    .tension-item__icon,
    .principle-item__icon,
    .release-item__icon,
    .system-layer__index { forced-color-adjust: none; }

    .status-dot { box-shadow: none; }
    .release-card h3::before { box-shadow: none; forced-color-adjust: none; }
    .hero, .system-map, .panel, .adoption, .destination-card, .release-card { background-image: none; }
  }
}

  

/* Documentação compartilhada. */
@layer portal-components {
  .doc-content { max-inline-size: var(--portal-content-max); }

  /* Hierarquia do mapa preservada em desktop e mobile. */
  .system-layer > :nth-child(2) { display: grid; gap: 2px; min-inline-size: 0; }
  .system-layer__name { display: block; }
  .system-layer__desc { display: block; line-height: var(--b-leading-snug); }

  .page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, .55fr);
    gap: clamp(var(--b-space-8), 4vw, var(--b-space-11));
    align-items: end;
    padding: clamp(var(--b-space-8), 4.5vw, var(--b-space-11));
    border: 1px solid var(--border);
    border-radius: var(--b-radius-3xl);
    background:
      radial-gradient(700px 260px at 105% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%),
      radial-gradient(520px 240px at -10% 110%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
      linear-gradient(145deg, var(--portal-panel), var(--bg));
    overflow: hidden;
  }

  .page-hero h1 {
    max-inline-size: 760px;
    margin: 0;
    font-size: var(--b-type-display-lg-size);
    font-weight: var(--b-weight-medium);
    line-height: var(--b-leading-hero);
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .page-hero__lead {
    max-inline-size: 700px;
    margin: var(--b-space-6) 0 0;
    color: var(--text-subtle);
    font-size: var(--b-text-xl);
    font-weight: var(--b-weight-light);
    line-height: var(--b-leading-relaxed);
  }

  .page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-space-4);
    margin-block-start: var(--b-space-8);
  }

  .page-summary {
    display: grid;
    gap: var(--b-space-3);
    padding: var(--b-space-6);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    box-shadow: var(--portal-shadow);
  }

  .page-summary__label {
    margin: 0 0 var(--b-space-2);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .page-summary__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--b-space-5);
    padding-block: var(--b-space-3);
    border-block-end: 1px solid var(--divider);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .page-summary__item:last-child { border-block-end: 0; }
  .page-summary__item strong { color: var(--text); font-size: var(--b-text-sm); text-align: end; }

  .sidebar-link--anchor {
    min-block-size: 32px;
    padding-inline-start: var(--b-space-6);
  }

  .sidebar-link__dot {
    inline-size: 6px;
    block-size: 6px;
    flex: 0 0 auto;
    border-radius: var(--b-radius-circle);
    background: var(--border-strong);
  }

  .sidebar-link--anchor[aria-current="location"] .sidebar-link__dot { background: var(--accent); }

  .doc-sections { margin-block-start: var(--b-space-10); }

  .p-section {
    scroll-margin-block-start: calc(var(--portal-header-h) + var(--b-space-7));
    padding: clamp(var(--b-space-7), 3vw, var(--b-space-10));
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: var(--bg);
  }

  .p-section + .p-section { margin-block-start: var(--b-space-8); }

  .p-section > h2:first-child {
    margin: 0 0 var(--b-space-3);
    font-size: var(--b-text-4xl);
    font-weight: var(--b-weight-title);
    line-height: var(--b-leading-title-lg);
    letter-spacing: -.01em;
  }

  .p-section h3 {
    margin: var(--b-space-9) 0 var(--b-space-4);
    font-size: var(--b-text-2xl);
    font-weight: var(--b-weight-title);
    line-height: var(--b-leading-snug);
  }

  .p-section h4 {
    margin: var(--b-space-8) 0 var(--b-space-3);
    font-size: var(--b-text-xl);
    font-weight: var(--b-weight-semibold);
  }

  .p-section > p,
  .p-section li {
    max-inline-size: 760px;
    color: var(--text-subtle);
  }

  .p-section > p { margin: 0 0 var(--b-space-6); }
  .p-section :is(ul, ol) { padding-inline-start: var(--b-space-9); }
  .p-section > .adoption-steps { padding-inline-start: 0; }
  .p-section a:not(.b-btn):not(.b-nav__item):not(.b-file-card):not(.b-link-item) {
    color: var(--link);
    text-underline-offset: 3px;
  }

  .p-section :not(pre) > code {
    padding: 1px 6px;
    border-radius: var(--b-radius-xs);
    color: var(--text);
    background: var(--surface-2);
    font-family: var(--b-font-mono);
    font-size: .92em;
  }

  .p-contract-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--b-space-8);
    margin-block: 0 var(--b-space-8);
    border-block-start: 1px solid var(--border);
  }

  .p-contract-map__item {
    min-inline-size: 0;
    padding-block: var(--b-space-6);
    border-block-end: 1px solid var(--border);
    scroll-margin-block-start: calc(var(--portal-header-h) + var(--b-space-7));
  }

  .p-section .p-contract-map__title {
    margin: 0 0 var(--b-space-2);
    color: var(--text);
    font-size: var(--b-text-sm);
    font-weight: var(--b-weight-medium);
    line-height: var(--b-leading-normal);
    letter-spacing: 0;
  }

  .p-contract-map__item p {
    max-inline-size: 68ch;
    margin: 0;
    color: var(--text-subtle);
    font-size: var(--b-text-md);
    font-weight: var(--b-weight-regular);
    line-height: var(--b-leading-normal);
  }

  .p-editorial-split {
    display: grid;
    max-inline-size: 760px;
    margin: 0 0 var(--b-space-6);
    border-block: 1px solid var(--border);
  }

  .p-editorial-split > :is(p, span) {
    display: block;
    margin: 0;
    padding-block: var(--b-space-4);
    color: var(--text-subtle);
    font-size: var(--b-text-md);
    font-weight: var(--b-weight-regular);
    line-height: var(--b-leading-normal);
  }

  .p-editorial-split > :is(p, span) + :is(p, span) {
    border-block-start: 1px solid var(--border);
  }

  .p-editorial-split--compact,
  .p-editorial-split--nested {
    max-inline-size: none;
    margin: 0;
    border-block: 0;
  }

  .p-editorial-split--compact {
    gap: var(--b-space-2);
  }

  .p-editorial-split--compact > p {
    padding-block: 0;
    border-block-start: 0;
  }

  .p-editorial-split--list {
    display: list-item;
    border-block: 0;
  }

  .p-editorial-split--list > span:first-child {
    padding-block-start: 0;
  }

  .p-editorial-split--list > span:last-child {
    padding-block-end: 0;
  }

  .p-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--b-space-6);
  }

  .p-demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-inline-size: 0;
    gap: var(--b-space-6);
    padding: clamp(var(--b-space-6), 2.5vw, var(--b-space-9));
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl) var(--b-radius-xl) 0 0;
    background: var(--portal-panel);
  }

  .p-demo--column { flex-direction: column; align-items: stretch; }

  /* Every layout child may shrink; scroll regions and explicit block controls own overflow. */
  .p-section > *,
  .p-demo > *,
  .component-demo-row > * { min-inline-size: 0; }

  /* Ritmo vertical: grupos distintos precisam ser percebidos antes de serem lidos. */
  .p-section > :is(.p-grid, .p-demo, .p-code, .p-callout, .p-dodont, .table-scroll, .rule-list, .pattern-evidence, .coverage-summary, .coverage-rationale) + :is(.p-grid, .p-demo, .p-code, .p-callout, .p-dodont, .table-scroll, .rule-list, .pattern-evidence, .coverage-summary, .coverage-rationale, p) {
    margin-block-start: var(--b-space-7);
  }
  .p-section > :is(.p-grid, .p-demo, .p-code, .p-callout, .p-dodont, .table-scroll, .rule-list, .pattern-evidence, .coverage-summary, .coverage-rationale) + p {
    margin-block-start: var(--b-space-7);
  }
  .p-demo + .p-code { margin-block-start: -1px; border-start-start-radius: 0; border-start-end-radius: 0; }
  .p-demo + .p-demo { margin-block-start: var(--b-space-7); border-radius: var(--b-radius-xl); }

  .p-code {
    --p-code-action-reserve: 132px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--code-bg);
  }

  .p-code pre {
    margin: 0;
    padding-block: var(--b-space-7);
    padding-inline-start: var(--b-space-8);
    padding-inline-end: max(var(--b-space-8), var(--p-code-action-reserve));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    color: var(--code-text);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-sm);
    line-height: 1.65;
  }

  .p-code:has(.p-code__copy)::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: calc(var(--p-code-action-reserve) + var(--b-space-5));
    block-size: 54px;
    background: linear-gradient(90deg, transparent, var(--code-bg) 38%);
    pointer-events: none;
  }

  .p-code__copy {
    position: absolute;
    z-index: 2;
    inset-block-start: var(--b-space-4);
    inset-inline-end: var(--b-space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-2);
    min-block-size: 30px;
    padding-inline: var(--b-space-4);
    border: 1px solid var(--code-action-border);
    border-radius: var(--b-shape-control-compact-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--code-action-text);
    background: var(--code-action-bg);
    font-family: inherit;
    font-size: var(--b-text-2xs);
    cursor: pointer;
  }

  .p-code__copy:hover:not(:disabled) { background: var(--b-alpha-white-16); }
  .p-code__copy:active:not(:disabled) { filter: brightness(1.12); }
  .p-code__copy:disabled { cursor: not-allowed; opacity: .5; }
  .p-code__copy svg { inline-size: 14px; block-size: 14px; }

  .p-callout {
    display: flex;
    gap: var(--b-space-5);
    margin-block: var(--b-space-6);
    padding: var(--b-space-7);
    border: 1px solid color-mix(in srgb, var(--info) 25%, var(--border));
    border-radius: var(--b-radius-xl);
    color: var(--info);
    background: var(--info-bg);
    font-size: var(--b-text-md);
    line-height: var(--b-leading-normal);
  }

  .p-callout--warning {
    border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
    color: var(--warning);
    background: var(--warning-bg);
  }

  .p-callout--danger {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
    color: var(--danger);
    background: var(--danger-bg);
  }

  .p-callout .b-icon { flex: 0 0 auto; }

  .p-dodont {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-space-6);
  }

  .p-do, .p-dont {
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-block-start: 3px solid var(--success);
    border-radius: var(--b-radius-xl);
    color: var(--text-subtle);
    background: var(--portal-panel);
    font-size: var(--b-text-md);
  }

  .p-dont { border-block-start-color: var(--danger); }
  .p-do strong, .p-dont strong {
    display: flex;
    align-items: center;
    gap: var(--b-space-3);
    margin-block-end: var(--b-space-4);
    font-size: var(--b-text-sm);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .p-do strong { color: var(--success); }
  .p-dont strong { color: var(--danger); }
  [class$="-grid"] + .p-dodont { margin-block-start: var(--b-space-7); }

  /* Cor: semânticos são relações; primitivos são matéria. A composição torna a distinção visível. */
  .p-color-section {
    isolation: isolate;
    background:
      radial-gradient(760px 320px at 105% -3%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%),
      linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
  }

  .p-color-section > h2:first-child {
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
  }

  .p-color-model {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-space-5);
    max-inline-size: none !important;
    margin-block: var(--b-space-7) !important;
    color: var(--text) !important;
  }

  .p-color-model__layer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--b-space-3) var(--b-space-5);
    align-items: center;
    min-block-size: 96px;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .p-color-model__index {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border: 1px solid var(--border);
    border-radius: var(--b-radius-circle);
    color: var(--text-muted);
    background: var(--bg);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-xs);
    font-weight: var(--b-weight-semibold);
  }

  .p-color-model__index { grid-row: 1 / span 2; align-self: start; }
  .p-color-model__index::before { content: attr(data-index); }

  .p-color-model__chips {
    grid-column: 2;
    display: inline-flex;
    gap: var(--b-space-3);
  }

  .p-color-chip {
    inline-size: 22px;
    block-size: 22px;
    border-radius: var(--b-radius-md);
    corner-shape: var(--b-corner-squircle);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
  }

  .p-color-chip--fixed-n900 { background: var(--b-neutral-900); }
  .p-color-chip--fixed-n400 { background: var(--b-neutral-400); }
  .p-color-chip--fixed-blue { background: var(--b-blue-500); }
  .p-color-chip--fixed-red { background: var(--b-red-500); }
  .p-color-chip--fixed-amber { background: var(--b-amber-500); }

  .p-color-chip--live-surface { background: var(--surface-2); }
  .p-color-chip--live-text { background: var(--text); }
  .p-color-chip--live-accent { background: var(--accent); }
  .p-color-chip--live-success { background: var(--success); }
  .p-color-chip--live-danger { background: var(--danger); }

  .p-color-ramp {
    block-size: 26px;
    margin-block-end: var(--b-space-5);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-pill);
    background: linear-gradient(90deg,
      var(--b-neutral-25) 0 8.333%,
      var(--b-neutral-50) 0 16.667%,
      var(--b-neutral-100) 0 25%,
      var(--b-neutral-150) 0 33.333%,
      var(--b-neutral-200) 0 41.667%,
      var(--b-neutral-300) 0 50%,
      var(--b-neutral-400) 0 58.333%,
      var(--b-neutral-500) 0 66.667%,
      var(--b-neutral-600) 0 75%,
      var(--b-neutral-700) 0 83.333%,
      var(--b-neutral-800) 0 91.667%,
      var(--b-neutral-900) 0 100%);
  }

  .p-color-model__layer strong {
    color: var(--text);
    font-weight: var(--b-weight-semibold);
  }

  .p-color-model__rule {
    grid-column: 1 / -1;
    padding: var(--b-space-5) var(--b-space-7);
    border: 1px solid var(--portal-accent-border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--b-radius-xl);
    color: var(--text);
    background: var(--portal-accent-soft);
    font-weight: var(--b-weight-medium);
  }

  .p-color-tip,
  .p-color-policy {
    color: var(--text-subtle);
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface) 74%, transparent);
  }

  .p-color-tip .b-icon,
  .p-color-policy .b-icon { color: var(--accent); }

  .p-section .p-color-heading {
    display: grid;
    gap: var(--b-space-2);
    margin-block: var(--b-space-11) var(--b-space-6);
    padding-block-start: var(--b-space-7);
    border-block-start: 1px solid var(--divider);
  }

  .p-section .p-color-heading::before {
    content: attr(data-kicker);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .p-color-section .p-color-heading:first-of-type {
    margin-block-start: var(--b-space-9);
  }

  .p-color-identity {
    border-color: var(--portal-accent-border);
    background:
      radial-gradient(520px 180px at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
      var(--portal-panel-strong);
  }

  .p-color-dodont {
    margin-block-start: var(--b-space-10) !important;
    padding-block-start: var(--b-space-8);
    border-block-start: 1px solid var(--divider);
  }

  .p-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--b-space-4);
  }

  .p-swatch-grid--semantic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-3);
  }

  .p-swatch-grid--status { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .p-swatch-grid--semantic .p-swatch {
    display: flex;
    align-items: center;
    gap: var(--b-space-5);
    min-block-size: 72px;
    padding: var(--b-space-4) var(--b-space-5);
    border-radius: var(--b-shape-interactive-radius);
    corner-shape: var(--b-corner-squircle);
  }

  .p-swatch-grid--semantic .p-swatch__color {
    position: static;
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--b-radius-xl);
    corner-shape: var(--b-corner-squircle);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent);
  }

  .p-swatch-grid--semantic .p-swatch__meta {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    background: none;
  }

  .p-swatch-grid--semantic .p-swatch::after {
    content: "\e1ca";
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--text-muted);
    font-family: "Phosphor";
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--b-motion-fast) var(--b-ease-standard);
  }

  .p-swatch-grid--semantic .p-swatch:hover::after,
  .p-swatch-grid--semantic .p-swatch:focus-visible::after { opacity: 1; }

  .p-swatch-grid--primitive .p-swatch {
    padding-block-start: 72px;
  }

  .p-swatch-grid--primitive .p-swatch::after {
    content: "\e1ca";
    position: absolute;
    inset-block-start: var(--b-space-3);
    inset-inline-end: var(--b-space-3);
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: var(--b-radius-md);
    corner-shape: var(--b-corner-squircle);
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    font-family: "Phosphor";
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--b-motion-fast) var(--b-ease-standard);
  }

  .p-swatch-grid--primitive .p-swatch:hover::after,
  .p-swatch-grid--primitive .p-swatch:focus-visible::after { opacity: 1; }

  .p-swatch-grid--primitive {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--b-space-3);
  }

  .p-swatch-grid--primitive .p-swatch__color { block-size: 72px; }

  .p-swatch {
    position: relative;
    display: block;
    inline-size: 100%;
    padding: 60px 0 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--b-shape-interactive-radius);
    corner-shape: var(--b-corner-squircle);
    color: inherit;
    background: var(--bg);
    text-align: start;
    cursor: pointer;
    transition: box-shadow var(--b-motion-fast) var(--b-ease-standard),
      border-color var(--b-motion-fast) var(--b-ease-standard),
      transform var(--b-motion-fast) var(--b-ease-standard);
  }

  .p-swatch:hover { border-color: var(--border-strong); box-shadow: var(--elevation-1); transform: translateY(-1px); }
  .p-swatch:active { background: var(--surface-selected); transform: none; }
  .p-swatch__color { position: absolute; inset-block-start: 0; inset-inline: 0; display: block; block-size: 60px; }
  .p-swatch__meta { display: grid; gap: 2px; min-inline-size: 0; padding: var(--b-space-4) var(--b-space-5); background: var(--bg); }
  .p-swatch__name { display: block; overflow-wrap: anywhere; color: var(--text); font-family: var(--b-font-mono); font-size: var(--b-text-xs); font-weight: var(--b-weight-semibold); line-height: var(--b-leading-snug); }
  .p-swatch__value { display: block; overflow-wrap: anywhere; color: var(--text-subtle); font-family: var(--b-font-mono); font-size: var(--b-text-2xs); line-height: var(--b-leading-snug); }

  .p-token-table, .p-spec, .b-table {
    inline-size: 100%;
    max-inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--b-text-md);
  }

  .p-token-table th, .p-spec th {
    padding: var(--b-space-4) var(--b-space-6);
    border-block-end: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .06em;
    text-align: start;
    text-transform: uppercase;
  }

  .p-token-table td, .p-spec td {
    padding: var(--b-space-4) var(--b-space-6);
    border-block-end: 1px solid var(--divider);
    color: var(--text-subtle);
    vertical-align: top;
  }

  .p-token-table td:first-child, .p-spec td:first-child { color: var(--text); }
  .p-token-table code, .p-spec code { white-space: nowrap; }

  .p-type-row {
    display: grid;
    grid-template-columns: minmax(145px, .45fr) minmax(260px, 1fr) minmax(150px, .55fr);
    align-items: baseline;
    gap: var(--b-space-7);
    padding-block: var(--b-space-6);
    border-block-end: 1px solid var(--divider);
  }

  .p-type-row code { color: var(--text-muted); font-family: var(--b-font-mono); font-size: var(--b-text-xs); }

  /* Tipografia: a seção demonstra o platô de pesos e o alcance multilíngue antes de listar a escala. */
  .p-type-section {
    isolation: isolate;
    background:
      radial-gradient(760px 320px at -5% -3%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 68%),
      linear-gradient(200deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
  }

  .p-type-section > h2:first-child {
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
  }

  .p-type-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--b-space-7) var(--b-space-10);
    align-items: end;
    margin-block: var(--b-space-7);
    padding: var(--b-space-8);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .p-type-hero__glyph {
    grid-row: 1 / span 2;
    color: var(--text);
    font-size: clamp(88px, 10vw, 128px);
    font-weight: var(--b-weight-medium);
    line-height: .9;
    letter-spacing: -.03em;
  }

  .p-type-hero__weights {
    display: flex;
    align-items: baseline;
    gap: var(--b-space-9);
  }

  .p-type-hero__weight {
    display: grid;
    gap: var(--b-space-3);
    justify-items: start;
    color: var(--text);
    font-size: 40px;
    line-height: 1;
  }

  .p-type-hero__weight::after {
    content: attr(data-label);
    color: var(--text-muted);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
  }

  .p-type-hero__weight--370 { font-weight: 370; }
  .p-type-hero__weight--400 { font-weight: 400; }
  .p-type-hero__weight--500 { font-weight: 500; }
  .p-type-hero__weight--550 { font-weight: 550; }
  .p-type-hero__weight.p-type-hero__weight--550 { font-size: 24px; }

  .p-type-hero__scripts {
    display: flex;
    align-items: center;
    gap: var(--b-space-6);
    padding-block-start: var(--b-space-5);
    border-block-start: 1px solid var(--divider);
    color: var(--text-subtle);
    font-size: var(--b-text-5xl);
    font-weight: var(--b-weight-medium);
    line-height: 1;
  }

  .p-type-hero__scripts-label {
    margin-inline-start: auto;
    color: var(--text-muted);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  /* Acessibilidade: métricas reais, pares de contraste vivos e foco demonstrado. */
  .p-a11y-section {
    isolation: isolate;
    background:
      radial-gradient(760px 320px at 105% -3%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 68%),
      linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
  }

  .p-a11y-section > h2:first-child {
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
  }

  .p-a11y-section > h2 + p {
    color: var(--text);
    font-size: var(--b-text-lg);
    line-height: var(--b-leading-relaxed);
  }

  .a11y-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-5);
    margin-block: var(--b-space-7);
  }

  .a11y-hero__stat {
    display: grid;
    gap: var(--b-space-2);
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .a11y-hero__stat strong {
    color: var(--text);
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
    line-height: 1.1;
  }

  .a11y-hero__stat code {
    color: var(--text-muted);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  .a11y-pairs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-5);
    margin-block-end: var(--b-space-6);
  }

  .a11y-pair {
    position: relative;
    display: grid;
    gap: var(--b-space-3);
    align-content: end;
    min-block-size: 112px;
    padding: var(--b-space-6) var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    corner-shape: var(--b-corner-squircle);
  }

  .a11y-pair__badge {
    position: absolute;
    inset-block-start: var(--b-space-5);
    inset-inline-end: var(--b-space-5);
    display: inline-flex;
    align-items: center;
    min-block-size: 20px;
    padding-inline: var(--b-space-4);
    border: 1px solid currentColor;
    border-radius: var(--b-radius-pill);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
  }

  .a11y-pair__glyph {
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
    line-height: 1;
  }

  .p-section .a11y-pair > code {
    padding: 0;
    border: 0;
    color: currentColor;
    background: none;
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  .a11y-pair--text { color: var(--text); background: var(--bg); }
  .a11y-pair--subtle { color: var(--text-subtle); background: var(--bg); }
  .a11y-pair--accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
  .a11y-pair--info { color: var(--info); background: var(--info-bg); }
  .a11y-pair--success { color: var(--success); background: var(--success-bg); }
  .a11y-pair--danger { color: var(--danger); background: var(--danger-bg); }

  .a11y-focus-model {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-space-5);
    max-inline-size: none;
    margin-block: var(--b-space-7);
    border-block: 0;
  }

  .a11y-focus-model > p {
    margin: 0;
    max-inline-size: none;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-block-start: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    color: var(--text-subtle);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .a11y-focus-model > p:last-child {
    grid-column: 1 / -1;
    padding: var(--b-space-5) var(--b-space-7);
    border-color: var(--portal-accent-border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--b-radius-xl);
    color: var(--text);
    background: var(--portal-accent-soft);
    font-weight: var(--b-weight-medium);
  }

  .a11y-focus-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--b-space-9);
    margin-block-end: var(--b-space-5);
    padding: var(--b-space-8);
    border: 1px dashed var(--border);
    border-radius: var(--b-radius-2xl);
    background-image: radial-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
    background-size: 14px 14px;
  }

  .a11y-focus-preview__cell {
    display: grid;
    gap: var(--b-space-4);
    justify-items: center;
  }

  .a11y-focus-preview__cell code {
    color: var(--text-muted);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  .a11y-focus-preview__input {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    min-inline-size: 220px;
    padding-inline: var(--b-space-6);
    border: 1px solid var(--accent);
    border-radius: var(--b-radius-md);
    color: var(--text-muted);
    background: var(--bg);
    font-size: var(--b-text-sm);
  }

  .a11y-focus-preview__btn {
    display: inline-flex;
    align-items: center;
    min-block-size: 40px;
    padding-inline: var(--b-space-7);
    border: 1px solid var(--border-strong);
    border-radius: var(--b-shape-control-radius);
    corner-shape: var(--b-corner-squircle);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--text);
    background: var(--surface);
    font-size: var(--b-text-sm);
    font-weight: var(--b-weight-medium);
  }

  .a11y-focus-demo { position: relative; padding-block-start: var(--b-space-10); }

  .a11y-focus-demo__hint {
    position: absolute;
    inset-block-start: var(--b-space-4);
    inset-inline-start: var(--b-space-6);
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-3);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .p-type-row[data-type-band] { margin-block-start: var(--b-space-8); }
  .p-type-row[data-type-band]:first-child { margin-block-start: 0; }

  .p-type-row[data-type-band]::before {
    content: attr(data-type-band);
    grid-column: 1 / -1;
    align-self: start;
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .p-type-scripts,
  .p-type-brand {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-5);
  }

  .p-type-scripts .p-type-row,
  .p-type-brand .p-type-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--b-space-5);
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .p-type-scripts .p-type-row > span,
  .p-type-brand .p-type-row > span { flex: 1; }

  .p-type-scripts .p-type-row > code:first-child,
  .p-type-brand .p-type-row > code:first-child {
    display: inline-flex;
    align-items: center;
    min-block-size: 22px;
    padding-inline: var(--b-space-4);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-pill);
    color: var(--text-subtle);
    background: var(--bg);
  }

  .p-type-brand .p-type-row:last-child {
    border-color: var(--portal-accent-border);
    background:
      radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
      var(--portal-panel-strong);
  }

  .p-space-row {
    display: flex;
    align-items: center;
    gap: var(--b-space-6);
    margin-block-end: var(--b-space-3);
  }
  .p-space-row code { inline-size: 124px; color: var(--text); font-family: var(--b-font-mono); font-size: var(--b-text-sm); }
  .p-space-row small { inline-size: 44px; color: var(--text-muted); font-family: var(--b-font-mono); }

  .p-space-bar {
    block-size: 16px;
    border-radius: 3px;
    background:
      repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--bg) 55%, transparent) 7px 8px),
      var(--accent);
    opacity: .85;
  }

  /* Espaçamento: os dois regimes da escala e o ritmo aplicado ficam visíveis antes da regra escrita. */
  .p-space-model {
    gap: var(--b-space-5);
    margin-block-end: var(--b-space-5);
  }

  .p-space-model > p {
    max-inline-size: none;
    margin: 0;
  }

  .p-space-model > p:nth-child(1) {
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    font-size: var(--b-text-lg);
    line-height: var(--b-leading-relaxed);
  }

  .p-space-model > p:nth-child(2) {
    padding: var(--b-space-5) var(--b-space-7);
    border: 1px solid var(--portal-accent-border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--b-radius-xl);
    color: var(--text);
    background: var(--portal-accent-soft);
    font-weight: var(--b-weight-medium);
  }

  .p-space-model > p:nth-child(3) {
    padding: var(--b-space-6) var(--b-space-7);
    border: 1px dashed var(--border-strong);
    border-radius: var(--b-radius-2xl);
    color: var(--text-subtle);
  }

  .p-space-optical {
    display: flex;
    flex-wrap: wrap;
    gap: var(--b-space-4);
    align-items: center;
    margin-block-end: var(--b-space-7);
    padding: var(--b-space-5) var(--b-space-7);
    border: 1px dashed var(--border);
    border-radius: var(--b-radius-2xl);
  }

  .p-space-optical__kicker {
    margin-inline-end: var(--b-space-4);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .p-space-optical__chip {
    display: grid;
    gap: var(--b-space-1);
    justify-items: center;
    min-inline-size: 56px;
    padding: var(--b-space-3) var(--b-space-4);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    corner-shape: var(--b-corner-squircle);
    background: var(--bg);
    font-family: var(--b-font-mono);
  }

  .p-space-optical__chip strong {
    color: var(--text);
    font-size: var(--b-text-sm);
    font-weight: var(--b-weight-semibold);
  }

  .p-space-optical__chip span {
    color: var(--accent);
    font-size: var(--b-text-2xs);
  }

  /* Shape: taxonomia com palco central, especificação por categoria e modelo de abertura em painéis. */
  .p-shape-section {
    isolation: isolate;
    background:
      radial-gradient(760px 320px at 105% -3%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 68%),
      linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
  }

  .p-shape-section .section-title-row h2 {
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
  }

  .p-shape-model {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-space-5);
    max-inline-size: none;
    margin-block: var(--b-space-7);
    border-block: 0;
  }

  .p-shape-model > p {
    margin: 0;
    max-inline-size: none;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .p-shape-model > p:nth-child(1) {
    font-size: var(--b-text-lg);
    line-height: var(--b-leading-relaxed);
  }

  .p-shape-model > p:nth-child(3) {
    grid-column: 1 / -1;
    padding: var(--b-space-5) var(--b-space-7);
    border-color: var(--portal-accent-border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--b-radius-xl);
    background: var(--portal-accent-soft);
    font-weight: var(--b-weight-medium);
  }

  .p-shape-model > p:nth-child(4) {
    grid-column: 1 / -1;
    padding: var(--b-space-5) var(--b-space-7);
    border-style: dashed;
    background: transparent;
    color: var(--text-subtle);
  }


  .p-space-row[data-space-band] {
    flex-wrap: wrap;
    margin-block-start: var(--b-space-8);
  }

  .p-space-row[data-space-band]:first-child { margin-block-start: 0; }

  .p-space-row[data-space-band]::before {
    content: attr(data-space-band);
    flex-basis: 100%;
    margin-block-end: var(--b-space-2);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .p-space-rhythm {
    display: grid;
    justify-items: start;
    max-inline-size: 460px;
    margin-block: var(--b-space-7);
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .p-space-rhythm__kicker {
    margin-block-end: var(--b-space-5);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .p-space-rhythm__box {
    display: inline-flex;
    align-items: center;
    inline-size: 210px;
    block-size: 36px;
    padding-inline: var(--b-space-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--b-shape-control-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--text-subtle);
    background: var(--bg);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  .p-space-rhythm__box--title {
    block-size: 24px;
    border-style: dashed;
    border-color: var(--border);
    color: var(--text-muted);
    background: transparent;
  }

  .p-space-rhythm__gap {
    position: relative;
    inline-size: 210px;
    background:
      linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  }

  .p-space-rhythm__gap::after {
    content: attr(data-measure);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + var(--b-space-5));
    color: var(--accent);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
    white-space: nowrap;
    transform: translateY(-50%);
  }

  .p-space-rhythm__gap--title { block-size: 10px; }
  .p-space-rhythm__gap--section { block-size: 20px; }

  .p-space-rhythm__gap--zero {
    block-size: 0;
    border-block-start: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
    background: none;
  }

  .p-anatomy { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--b-space-9); }
  .p-anatomy__item { display: flex; flex-direction: column; gap: var(--b-space-4); align-items: flex-start; }
  .p-anatomy__caption { color: var(--text-muted); font-family: var(--b-font-mono); font-size: var(--b-text-xs); }
  .p-anatomy__axis-title { color: var(--text); font-size: var(--b-text-xs); font-weight: var(--b-weight-semibold); text-transform: uppercase; letter-spacing: .05em; }
  .p-y-figure { position: relative; padding-inline-end: 32px; }
  .p-y-inset {
    position: absolute;
    inset-inline-end: 12px;
    inline-size: 8px;
    block-size: 10px;
    background: color-mix(in srgb, var(--b-purple-500) 22%, transparent);
    outline: 1px dashed color-mix(in srgb, var(--b-purple-500) 60%, transparent);
    outline-offset: -1px;
  }
  .p-y-inset--top { inset-block-start: 0; }
  .p-y-inset--bottom { inset-block-end: 0; }
  .p-y-inset::after {
    content: attr(data-v);
    position: absolute;
    inset-inline-start: calc(100% + 4px);
    inset-block-start: 50%;
    color: var(--b-purple-500);
    font-family: var(--b-font-mono);
    font-size: 9px;
    line-height: 1;
  }

  .p-x-pad { background: color-mix(in srgb, var(--b-purple-500) 16%, transparent); outline: 1px dashed color-mix(in srgb, var(--b-purple-500) 55%, transparent); }
  .p-x-pad > * { background: color-mix(in srgb, var(--b-blue-500) 14%, transparent); outline: 1px dashed color-mix(in srgb, var(--b-blue-500) 50%, transparent); }
  .p-x-nogap { gap: 0 !important; }
  .p-x-gap {
    position: relative;
    display: inline-block;
    align-self: stretch;
    inline-size: 8px;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--b-orange-500) 28%, transparent);
    outline: 1px dashed color-mix(in srgb, var(--b-orange-500) 60%, transparent);
    outline-offset: -1px;
  }
  .p-x-gap[data-v="6"] { inline-size: 6px; }
  .p-x-gap::after {
    content: attr(data-v);
    position: absolute;
    inset-block-start: calc(100% + 5px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    color: var(--b-amber-800);
    font-family: var(--b-font-mono);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
  }

  .table-scroll {
    inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
  }

  .table-scroll > table { min-inline-size: max-content; }

  .file-swatch-list { display: flex; flex-wrap: wrap; gap: var(--b-space-5); }
  .file-swatch {
    display: inline-flex;
    align-items: center;
    gap: var(--b-space-4);
    min-block-size: 40px;
    padding-inline: var(--b-space-5);
    border: 1px solid var(--border);
    border-radius: var(--b-shape-control-radius);
    corner-shape: var(--b-corner-squircle);
    color: var(--text);
    background: var(--bg);
    font-family: inherit;
    cursor: pointer;
  }
  .file-swatch:hover { background: var(--surface-hover); border-color: var(--border-strong); }
  .file-swatch:active { background: var(--surface-selected); }
  .file-swatch__dot { inline-size: 18px; block-size: 18px; border-radius: var(--b-radius-circle); }
  .file-swatch code { color: var(--text); }

  .identity-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--b-space-5);
    align-items: start;
    margin-block: var(--b-space-6);
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel-strong);
  }
  .identity-note__mark {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: var(--b-radius-xl);
    color: var(--on-identity);
    background: var(--identity);
  }
  .identity-note__mark svg { inline-size: 18px; block-size: 18px; }
  .identity-note p { margin: 0; color: var(--text-subtle); }
  .identity-note strong { color: var(--text); }

  @media (max-width: 780px) {
    .page-hero { grid-template-columns: 1fr; }
    .p-color-model { grid-template-columns: 1fr; }
    .p-color-model__rule { grid-column: 1; }
    .p-swatch-grid--semantic,
    .p-swatch-grid--status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-swatch-grid--primitive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-summary { max-inline-size: 560px; }
    .p-dodont { grid-template-columns: 1fr; }
    .p-type-row { grid-template-columns: 1fr; gap: var(--b-space-2); }
    .p-type-scripts,
    .p-type-brand { grid-template-columns: 1fr; }
    .p-shape-model { grid-template-columns: 1fr; }
    .a11y-hero { grid-template-columns: 1fr; }
    .a11y-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a11y-focus-model { grid-template-columns: 1fr; }
    .a11y-focus-preview { gap: var(--b-space-7); }
    .p-type-hero { grid-template-columns: 1fr; align-items: start; }
    .p-type-hero__glyph { grid-row: auto; }
    .p-type-hero__weights { flex-wrap: wrap; gap: var(--b-space-7); }
    .p-type-hero__weight { font-size: 32px; }
    .p-type-hero__scripts { flex-wrap: wrap; }
    .p-type-hero__scripts-label { flex-basis: 100%; margin-inline-start: 0; }
    .p-token-table, .p-spec, .b-table { display: block; overflow-x: auto; white-space: nowrap; }
  }

  @media (max-width: 680px) {
    .page-hero { padding: var(--b-space-8); border-radius: var(--b-radius-2xl); }
    .page-hero h1 { font-size: var(--b-type-display-lg-size); }
    .page-hero__lead { font-size: var(--b-text-lg); }
    .page-hero__actions { flex-direction: column; align-items: stretch; }
    .p-section { padding: var(--b-space-7); }
    .p-contract-map { grid-template-columns: 1fr; }
    .p-demo { padding: var(--b-space-6); }
    .p-demo > * { max-inline-size: 100%; }
    .p-swatch-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
    .p-swatch-grid--semantic,
    .p-swatch-grid--primitive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-color-model__layer { min-block-size: auto; padding: var(--b-space-6); }
    .p-elevation-stage .p-elevation-sample { margin-block-end: 0 !important; }
    .p-elevation-stage { padding: var(--b-space-9) var(--b-space-7) var(--b-space-7); gap: var(--b-space-9) var(--b-space-6); }
    .p-glass-demo__bar { flex-wrap: wrap; padding-block: var(--b-space-4); }
    .p-space-rhythm__box,
    .p-space-rhythm__gap { inline-size: 196px; }
    .p-space-rhythm__box { padding-inline: var(--b-space-3); }
    .p-space-rhythm__gap::after { content: attr(data-measure-short); }
  }

  @media (max-width: 340px) {
    .p-swatch-grid--semantic { grid-template-columns: 1fr; }
  }
}

/* Experiência multi-produto e governança. */
@layer portal-components {
  .section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--b-space-6);
    margin-block-end: var(--b-space-6);
  }

  .section-title-row h2 {
    margin: 0;
    font-size: var(--b-text-4xl);
    font-weight: var(--b-weight-title);
    line-height: var(--b-leading-title-lg);
    letter-spacing: -.01em;
  }

  .p-shape-section .section-title-row h2,
  .p-icon-section .section-title-row h2,
  .p-layout-section .section-title-row h2 {
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
  }

  .status-dot--review {
    background: var(--warning);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 14%, transparent);
  }

  .hero--vision {
    align-items: center;
    background:
      radial-gradient(800px 360px at 92% 2%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 66%),
      radial-gradient(620px 300px at -8% 108%, color-mix(in srgb, var(--b-purple-500) 8%, transparent), transparent 66%),
      linear-gradient(145deg, var(--portal-panel), var(--bg));
  }

  .product-constellation {
    position: relative;
    display: grid;
    gap: var(--b-space-6);
    min-inline-size: 0;
    padding: var(--b-space-7);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: linear-gradient(160deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 82%, transparent));
    box-shadow: var(--portal-shadow);
  }

  .product-constellation::before {
    content: "";
    position: absolute;
    inset: 18% 11% auto;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--portal-accent-border), transparent);
    pointer-events: none;
  }

  .product-constellation__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-4);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
    font-weight: var(--b-weight-semibold);
  }

  .product-constellation__core {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1px var(--b-space-4);
    align-items: center;
    max-inline-size: 260px;
    margin-inline: auto;
    padding: var(--b-space-5) var(--b-space-6);
    border: 1px solid var(--portal-accent-border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-accent-soft);
  }

  /* Conector do hub às dimensões: a convergência é desenhada, não narrada. */
  .product-constellation__core::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    inline-size: 1px;
    block-size: var(--b-space-6);
    background: var(--portal-accent-border);
  }

  .product-constellation__mark {
    grid-row: 1 / span 2;
    inline-size: 28px;
    block-size: 28px;
    border: 7px solid var(--identity);
    border-radius: var(--b-radius-circle);
    box-shadow: inset 0 0 0 3px var(--on-identity);
  }

  .product-constellation__core strong { font-size: var(--b-text-md); }
  .product-constellation__core > span:last-child { color: var(--text-subtle); font-size: var(--b-text-2xs); }

  .product-constellation__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-space-4);
  }

  .product-node {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
    padding: var(--b-space-5) var(--b-space-6);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
  }

  .product-node strong { overflow: hidden; font-size: var(--b-text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .product-node span { color: var(--text-subtle); font-size: var(--b-text-2xs); }
  .product-node--evidence { border-color: var(--portal-accent-border); background: var(--portal-accent-soft); }

  .product-constellation__note {
    margin: 0;
    padding-block-start: var(--b-space-5);
    border-block-start: 1px solid var(--divider);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
    line-height: var(--b-leading-snug);
  }

  .architecture-grid,
  .readiness-grid,
  .scope-grid,
  .implementation-grid,
  .pattern-principles,
  .product-adoption-grid,
  .checklist-grid,
  .density-modes,
  .layout-token-grid,
  .layout-recipes,
  .lens-grid,
  .audit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-6);
  }

  .architecture-card,
  .readiness-card,
  .scope-card,
  .product-adoption-card,
  .audit-card,
  .density-modes > article,
  .layout-token-grid > article,
  .layout-recipe,
  .lens-grid > article,
  .inspiration-method > article,
  .round-timeline > article,
  .checklist-grid > article {
    position: relative;
    min-inline-size: 0;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel);
  }

  .architecture-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: var(--b-space-4);
  }

  .architecture-card__index {
    display: inline-grid;
    place-items: center;
    min-inline-size: 30px;
    block-size: 22px;
    justify-self: start;
    padding-inline: var(--b-space-3);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-pill);
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-xs);
    font-weight: var(--b-weight-semibold);
  }

  .architecture-card .status-chip { grid-column: 2; grid-row: 1; }
  .architecture-card h3 { grid-column: 1 / -1; margin: var(--b-space-2) 0 0; }
  .architecture-card p,
  .readiness-card p,
  .scope-card p,
  .product-adoption-card p,
  .audit-card p,
  .density-modes p,
  .layout-recipe p,
  .lens-grid p,
  .inspiration-method p,
  .round-timeline p,
  .checklist-grid p { margin: 0; color: var(--text-subtle); font-size: var(--b-text-sm); }

  .architecture-card ul {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--b-space-4);
    margin: var(--b-space-2) 0 0;
    padding-block-start: var(--b-space-5);
    padding-inline-start: var(--b-space-7);
    border-block-start: 1px solid var(--divider);
    color: var(--text-subtle);
    font-size: var(--b-text-xs);
  }

  .inspiration-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
    gap: clamp(var(--b-space-8), 4vw, var(--b-space-11));
    align-items: center;
    padding: clamp(var(--b-space-8), 4vw, var(--b-space-11));
    border: 1px solid var(--border);
    border-radius: var(--b-radius-3xl);
    background:
      radial-gradient(680px 260px at 100% 0%, color-mix(in srgb, var(--b-purple-500) 12%, transparent), transparent 66%),
      linear-gradient(145deg, var(--portal-panel-strong), var(--bg));
  }

  .inspiration-stage__copy h2 { max-inline-size: 650px; margin: 0; font-size: var(--b-type-display-lg-size); font-weight: var(--b-weight-medium); line-height: var(--b-leading-hero); letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; }
  .inspiration-stage__copy > p:not(.eyebrow) { max-inline-size: 650px; margin: var(--b-space-6) 0 var(--b-space-8); color: var(--text-subtle); font-size: var(--b-text-xl); line-height: var(--b-leading-relaxed); }

  .inspiration-quote {
    margin: 0;
    padding: var(--b-space-8);
    border-inline-start: 3px solid var(--accent);
    border-radius: 0 var(--b-radius-xl) var(--b-radius-xl) 0;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
  }

  .inspiration-quote p { margin: 0; color: var(--text); font-size: var(--b-text-2xl); font-weight: var(--b-weight-light); line-height: var(--b-leading-relaxed); }
  .inspiration-quote footer { margin-block-start: var(--b-space-6); color: var(--text-subtle); font-size: var(--b-text-xs); font-weight: var(--b-weight-semibold); text-transform: uppercase; letter-spacing: .06em; }

  .readiness-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .readiness-card { display: grid; align-content: start; gap: var(--b-space-4); }
  .readiness-card h3 { margin: 0; }

  .density-modes > article { display: grid; align-content: start; gap: var(--b-space-4); }
  .density-modes h3 { margin: 0; font-size: var(--b-text-lg); }
  .density-sample { display: block; inline-size: 100%; max-inline-size: 150px; border: 1px solid var(--portal-accent-border); border-radius: var(--b-radius-md); background: var(--portal-accent-soft); }
  .density-sample--compact { block-size: var(--b-control-compact); }
  .density-sample--default { block-size: var(--b-control-default); }
  .density-sample--touch { block-size: var(--b-control-touch); }

  .layout-token-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .layout-token-grid > article { display: grid; gap: var(--b-space-3); }
  .layout-token-grid code { overflow-wrap: anywhere; color: var(--text); font-size: var(--b-text-xs); }
  .layout-token-grid strong { font-size: var(--b-text-2xl); font-weight: var(--b-weight-title); }
  .layout-token-grid span { color: var(--text-subtle); font-size: var(--b-text-xs); }

  .layout-recipe { display: grid; align-content: start; gap: var(--b-space-4); }
  .layout-recipe h4 { margin: 0; }
  .layout-recipe__visual {
    display: grid;
    gap: var(--b-space-3);
    block-size: 132px;
    padding: var(--b-space-4);
    border: 1px dashed var(--border);
    border-radius: var(--b-radius-xl);
    background-color: var(--bg);
    background-image: radial-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
    background-size: 14px 14px;
  }
  .layout-recipe__visual span { display: block; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius: var(--b-radius-md); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
  .layout-recipe__visual--focus { place-items: center; }
  .layout-recipe__visual--focus span { inline-size: 56%; block-size: 78%; }
  .layout-recipe__visual--shell { grid-template-columns: 24% minmax(0, 1fr); }
  .layout-recipe__visual--shell span:first-child { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
  .layout-recipe__visual--split { grid-template-columns: 58% minmax(0, 1fr); }

  .layout-recipe::after {
    content: attr(data-spec);
    margin-block-start: var(--b-space-2);
    padding-block-start: var(--b-space-4);
    border-block-start: 1px solid var(--divider);
    color: var(--text-muted);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  /* Layout adaptativo: limites proporcionais, perímetro medido e critérios numerados. */
  .p-layout-section {
    isolation: isolate;
    background:
      radial-gradient(760px 320px at -5% -3%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 68%),
      linear-gradient(200deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
  }

  .layout-limits-viz {
    display: grid;
    gap: var(--b-space-4);
    justify-items: center;
    margin-block: var(--b-space-7);
    padding: var(--b-space-6) var(--b-space-7) var(--b-space-7);
    border: 1px dashed var(--border-strong);
    border-radius: var(--b-radius-2xl);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
  }

  .layout-limits-viz__viewport {
    justify-self: start;
    margin-block-end: var(--b-space-2);
    color: var(--text-muted);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .layout-limits-viz__band {
    display: grid;
    place-items: center;
    min-block-size: 40px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--b-radius-md);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }

  .layout-limits-viz__band code {
    color: var(--text);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  .layout-limits-viz__band--wide { inline-size: 100%; }
  .layout-limits-viz__band--content { inline-size: 87.5%; }
  .layout-limits-viz__band--reading { inline-size: 56.25%; }

  .layout-perimeter-demo {
    display: grid;
    gap: var(--b-space-4);
    justify-items: center;
    margin-block: var(--b-space-7);
    padding: var(--b-space-7);
    border: 1px dashed var(--border);
    border-radius: var(--b-radius-2xl);
    background-image: radial-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
    background-size: 14px 14px;
  }

  .layout-perimeter-demo > code {
    color: var(--text-muted);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }

  .layout-perimeter-demo__surface {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--b-space-4);
    inline-size: min(320px, 100%);
    block-size: 128px;
    padding: var(--b-space-6);
    border: 1px solid var(--accent);
    border-radius: var(--b-shape-composer-radius);
    corner-shape: var(--b-corner-squircle);
    background: var(--bg);
  }

  .layout-perimeter-demo__ghost {
    inline-size: 62%;
    block-size: 10px;
    border-radius: var(--b-radius-pill);
    background: color-mix(in srgb, var(--text) 12%, transparent);
  }

  .layout-perimeter-demo__ghost--short { inline-size: 38%; }

  .layout-perimeter-demo__control {
    position: absolute;
    inset-inline-end: 9px;
    inset-block-end: 9px;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--b-radius-circle);
    color: var(--on-accent);
    background: var(--accent);
  }

  .layout-perimeter-demo__measure {
    position: absolute;
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  }

  .layout-perimeter-demo__measure--x {
    inset-inline-end: 0;
    inset-block-end: 24.5px;
    inline-size: 9px;
    border-block-start: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  }

  .layout-perimeter-demo__measure--y {
    inset-inline-end: 24.5px;
    inset-block-end: 0;
    block-size: 9px;
    border-inline-start: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  }

  .layout-criteria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--b-space-5);
    padding: 0 !important;
    counter-reset: layout-criteria;
    list-style: none;
  }

  .layout-criteria > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--b-space-5);
    align-items: start;
    margin: 0;
    padding: var(--b-space-6) var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--surface);
    color: var(--text-subtle);
  }

  .layout-criteria > li::before {
    content: counter(layout-criteria, decimal-leading-zero);
    counter-increment: layout-criteria;
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border: 1px solid var(--border);
    border-radius: var(--b-radius-circle);
    color: var(--text-muted);
    background: var(--bg);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
  }

  .product-slot-callout { border-color: var(--portal-accent-border); background: var(--portal-accent-soft); color: var(--accent); }

  .pattern-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pattern-principles .panel { padding: var(--b-space-7); }

  .coverage-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-5);
  }
  .coverage-summary > article {
    display: grid;
    gap: var(--b-space-2);
    min-inline-size: 0;
    padding: var(--b-space-6);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel);
  }
  .coverage-summary strong { color: var(--text); font-size: var(--b-text-3xl); font-weight: var(--b-weight-title); line-height: 1; }
  .coverage-summary span { color: var(--text-subtle); font-size: var(--b-text-sm); }
  .coverage-rationale {
    padding: var(--b-space-6);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel);
  }
  .coverage-rationale summary { color: var(--text); font-weight: var(--b-weight-semibold); cursor: pointer; }
  .coverage-rationale p { max-inline-size: 760px; margin: var(--b-space-5) 0 0; color: var(--text-subtle); }
  .coverage-rationale a { display: inline-block; margin-block-start: var(--b-space-5); }

  .pattern-evidence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-3);
    margin-block-start: var(--b-space-5);
  }

  .pattern-evidence > span {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
    padding: var(--b-space-4) var(--b-space-5);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    color: var(--text-subtle);
    background: var(--surface);
    font-size: var(--b-text-xs);
  }

  .pattern-evidence strong { color: var(--text); font-size: var(--b-text-2xs); letter-spacing: .05em; text-transform: uppercase; }
  .maturity-callout { margin-block-start: var(--b-space-6); }
  .p-spec-toolbar { inline-size: 100%; max-inline-size: 640px; border: 1px solid var(--border); border-radius: var(--b-radius-xl); }
  .p-canvas-width-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-space-6); inline-size: 100%; }
  .p-canvas-width-grid article { min-inline-size: 0; padding: var(--b-space-6); border: 1px solid var(--border); border-radius: var(--b-radius-xl); background: var(--surface); }
  .p-canvas-width-grid strong,
  .p-canvas-width-grid code { display: block; }
  .p-canvas-width-grid code { margin-block-start: var(--b-space-2); color: var(--text-subtle); }
  .p-canvas-width-track { display: flex; align-items: stretch; justify-content: flex-end; inline-size: 100%; block-size: 72px; margin-block-start: var(--b-space-5); border: 1px dashed var(--border-strong); border-radius: var(--b-radius-xl); background: var(--portal-panel); }
  .p-canvas-width-sample { display: grid; place-items: center; inline-size: 100%; border-inline-start: 1px solid var(--border-strong); border-radius: var(--b-radius-xl); background: var(--surface-selected); color: var(--text-subtle); font-size: var(--b-text-xs); }
  .p-canvas-width-sample--sources { inline-size: 66.6667%; }
  .p-spec-sources-canvas { overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--b-radius-2xl); background: var(--bg); }
  .p-spec-sources-head { display: flex; min-block-size: 44px; align-items: center; justify-content: space-between; gap: var(--b-space-4); padding-inline: var(--b-space-5); border-block-end: 1px solid var(--divider); }
  .p-spec-sources-head span { color: var(--text-subtle); font-size: var(--b-text-xs); }
  .p-spec-source-list { inline-size: 100%; }
  .p-table-wrap { inline-size: 100%; overflow-x: auto; }
  .b-file-card__tile--pdf { background: var(--file-pdf); }
  .b-file-card__tile--xls { background: var(--file-xls); }

  .adoption-architecture {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: var(--b-space-4);
    align-items: stretch;
  }

  .adoption-architecture > article {
    display: grid;
    align-content: start;
    gap: var(--b-space-3);
    min-inline-size: 0;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel);
  }

  .adoption-architecture__index { color: var(--accent); font-family: var(--b-font-mono); font-size: var(--b-text-xs); font-weight: var(--b-weight-semibold); }
  .adoption-architecture h3 { margin: 0; }
  .adoption-architecture p { margin: 0; color: var(--text-subtle); font-size: var(--b-text-sm); }
  .adoption-architecture__arrow { display: grid; place-items: center; color: var(--text-muted); font-size: var(--b-text-2xl); }

  .adoption-steps--seven {
    counter-reset: adoption-step;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--b-space-6);
  }
  .adoption-steps--seven li {
    min-block-size: 0;
    align-content: start;
    padding: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel);
  }
  .adoption-steps--seven li::before { counter-increment: adoption-step; content: counter(adoption-step, decimal-leading-zero); }

  .product-adoption-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-adoption-card { display: grid; align-content: start; gap: var(--b-space-4); }
  .product-adoption-card h3 { margin: 0; }
  .product-adoption-card .status-chip { justify-self: start; }

  .checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist-grid > article { display: grid; align-content: start; gap: var(--b-space-4); }
  .checklist-grid h3 { margin: 0; }

  .scope-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope-card { display: grid; align-content: start; gap: var(--b-space-4); }
  .scope-card h3 { margin: 0; }
  .scope-card__label { color: var(--accent); font-family: var(--b-font-mono); font-size: var(--b-text-xs); font-weight: var(--b-weight-semibold); text-transform: uppercase; letter-spacing: .05em; }

  .implementation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .implementation-grid .panel { padding: var(--b-space-7); }
  .rule-list { display: grid; gap: var(--b-space-4); margin: 0; }
  .panel .rule-list { padding-inline-start: var(--b-space-7); color: var(--text-subtle); font-size: var(--b-text-sm); }

  .page-hero--inspiration {
    background:
      radial-gradient(720px 300px at 100% 0%, color-mix(in srgb, var(--b-purple-500) 14%, transparent), transparent 68%),
      radial-gradient(620px 260px at -10% 110%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%),
      linear-gradient(145deg, var(--portal-panel), var(--bg));
  }

  .inspiration-method {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--b-space-6);
  }

  .inspiration-method > article { display: grid; align-content: start; gap: var(--b-space-4); }
  .inspiration-method > article > span { color: var(--accent); font-family: var(--b-font-mono); font-size: var(--b-text-xs); font-weight: var(--b-weight-semibold); }
  .inspiration-method h3 { margin: 0; }

  .folder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, .75fr);
    gap: var(--b-space-6);
    align-items: stretch;
  }
  .folder-layout .p-code { min-block-size: 100%; }
  .folder-guidance { padding: var(--b-space-7); border: 1px solid var(--border); border-radius: var(--b-radius-xl); background: var(--portal-panel); }
  .folder-guidance h3 { margin-block-start: 0; }

  .lens-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lens-grid > article { display: grid; align-content: start; gap: var(--b-space-4); }
  .lens-grid h3 { margin: 0; }
  .lens-grid__icon { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: var(--b-radius-xl); color: var(--accent); background: var(--portal-accent-soft); }
  .lens-grid__icon svg { inline-size: 19px; block-size: 19px; }

  .round-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--b-space-5);
  }
  .round-timeline > article { display: grid; align-content: start; gap: var(--b-space-4); }
  .round-timeline > article > span { color: var(--accent); font-size: var(--b-text-2xs); font-weight: var(--b-weight-semibold); letter-spacing: .06em; text-transform: uppercase; }
  .round-timeline h3 { margin: 0; }

  .compliance-verdict {
    display: grid;
    grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
    gap: var(--b-space-8);
    align-items: center;
  }

  .compliance-score {
    display: grid;
    gap: var(--b-space-3);
    padding: var(--b-space-8);
    border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
    border-radius: var(--b-radius-2xl);
    background: var(--portal-success-soft);
  }
  .compliance-score span { color: var(--success); font-size: clamp(var(--b-text-6xl), 6vw, var(--b-text-8xl)); font-weight: var(--b-weight-medium); line-height: 1; }
  .compliance-score strong { font-size: var(--b-text-md); }
  .compliance-score small { color: var(--text-subtle); }
  .compliance-verdict > div:last-child p { margin: 0; color: var(--text-subtle); }
  .compliance-verdict > div:last-child p + p { margin-block-start: var(--b-space-5); }

  .rules-matrix { display: grid; gap: var(--b-space-4); }
  .rules-matrix__row {
    display: grid;
    grid-template-columns: 126px minmax(180px, .45fr) minmax(0, 1fr);
    gap: var(--b-space-6);
    align-items: center;
    padding: var(--b-space-6);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-xl);
    background: var(--portal-panel);
  }
  .rules-matrix__row .status-chip { justify-self: start; }
  .rules-matrix__row h3 { margin: 0; font-size: var(--b-text-lg); }
  .rules-matrix__row p { margin: 0; color: var(--text-subtle); font-size: var(--b-text-sm); }

  .document-link { margin-block-start: var(--b-space-7) !important; }
  .document-link a { text-decoration: none; }
  .document-link a:hover { color: var(--text); }
  .audit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .audit-card { display: grid; align-content: start; gap: var(--b-space-4); }
  .audit-card > span { color: var(--accent); font-size: var(--b-text-5xl); font-weight: var(--b-weight-medium); line-height: 1; }
  .audit-card h3 { margin: 0; font-size: var(--b-text-lg); }

  @media (max-width: 1080px) {
    .readiness-grid,
    .product-adoption-grid,
    .audit-grid,
    .layout-token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 880px) {
    .architecture-grid,
    .scope-grid,
    .implementation-grid,
    .pattern-principles,
    .density-modes,
    .layout-recipes,
    .lens-grid,
    .inspiration-method { grid-template-columns: 1fr; }
    .layout-criteria { grid-template-columns: 1fr; }
    .layout-limits-viz__band code { overflow-wrap: anywhere; text-align: center; }
    .inspiration-stage,
    .folder-layout,
    .compliance-verdict { grid-template-columns: 1fr; }
    .round-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adoption-architecture { grid-template-columns: 1fr; }
    .adoption-architecture__arrow { transform: rotate(90deg); }
    .rules-matrix__row { grid-template-columns: 1fr; gap: var(--b-space-3); }
  }

  @media (max-width: 620px) {
    .section-title-row { display: grid; }
    .section-title-row .status-chip { justify-self: start; }
    .product-constellation__grid,
    .readiness-grid,
    .product-adoption-grid,
    .audit-grid,
    .layout-token-grid,
    .checklist-grid,
    .round-timeline,
    .pattern-evidence,
    .coverage-summary,
    .adoption-steps--seven { grid-template-columns: 1fr; }
    .inspiration-stage { padding: var(--b-space-8); border-radius: var(--b-radius-2xl); }
  }
}

/* Utilitários de specimens gerados. */
@layer portal-utilities {
  .p-doc-u-001 { background: var(--action); color: var(--on-action); }
  .p-doc-u-002 { max-inline-size: 420px; }
  .p-doc-u-003 { gap: var(--b-space-5); }
  .p-doc-u-004 { color: var(--accent); }
  .p-doc-u-005 { font-size: var(--b-text-xs); color: var(--text-muted); }
  .p-doc-u-006 { padding-block: var(--b-nav-frame-padding-start); background: var(--surface); }
  .p-doc-u-007 { align-items: flex-start; }
  .p-doc-u-008 { --b-nav-rail-block-size: min(420px, calc(100vh - 120px)); padding-block: var(--b-nav-frame-padding-start); padding-block-end: 0; background: var(--surface); flex-shrink: 0; }
  .p-doc-u-009 { padding-block-start: var(--b-space-2); }
  .p-doc-u-010 { inline-size: 100%; }
  .p-doc-u-011 { inline-size: 220px; border-block-start: 1px solid var(--divider); padding-block-start: var(--b-space-3); }
  .p-doc-u-012 { background: var(--b-neutral-950); padding: var(--b-space-2); }
  .p-doc-u-013 { inline-size: 240px; display: flex; flex-direction: column; }
  .p-doc-u-014 { color: var(--file-text); }
  .p-doc-u-015 { position: static; }
  .p-doc-u-016 { inline-size: 230px; }
  .p-doc-u-017 { margin: 0 0 var(--b-space-3); }
  .p-doc-u-018 { margin: 0; color: var(--text-subtle); }
  .p-doc-u-019 { max-inline-size: 440px; }
  .p-doc-u-020 { max-inline-size: 560px; }
  .p-doc-u-021 { font-size: var(--b-text-6xl); }
  .p-doc-u-022 { justify-content: center; background: var(--surface-2); }
  .p-doc-u-023 { color: var(--danger); }
  .p-doc-u-024 { margin: 0; }
  .p-doc-u-025 { align-self: flex-start; }
  .p-doc-u-026 { inline-size: 64%; }
  .p-doc-u-027 { inline-size: 32%; }
  .p-doc-u-028 { color: var(--text-subtle); }
  .p-doc-u-029 { block-size: 14px; inline-size: 80%; }
  .p-doc-u-030 { block-size: 14px; inline-size: 60%; }
  .p-doc-u-031 { block-size: 48px; border-radius: var(--b-radius-xl); }
  .p-doc-u-032 { justify-content: center; }
  .p-doc-u-033 { color: var(--b-purple-500); }
  .p-doc-u-034 { color: var(--b-blue-500); }
  .p-doc-u-035 { color: var(--b-amber-800); }
  .p-doc-u-036 { display: flex; align-items: center; }
  .p-doc-u-037 { block-size: 40px; }
  .p-doc-u-038 { inline-size: 240px; }
  .p-doc-u-039 { background: var(--bg); }
  .p-doc-u-040 { background: var(--surface); }
  .p-doc-u-041 { background: var(--surface-2); }
  .p-doc-u-042 { background: var(--surface-hover); }
  .p-doc-u-043 { background: var(--surface-selected); }
  .p-doc-u-044 { background: var(--border); }
  .p-doc-u-045 { background: var(--border-strong); }
  .p-doc-u-046 { background: var(--divider); }
  .p-doc-u-047 { background: var(--text); }
  .p-doc-u-048 { background: var(--text-subtle); }
  .p-doc-u-049 { background: var(--text-muted); }
  .p-doc-u-050 { background: var(--text-disabled); }
  .p-doc-u-051 { background: var(--identity); }
  .p-doc-u-052 { background: var(--on-identity); }
  .p-doc-u-053 { background: var(--action); }
  .p-doc-u-054 { background: var(--accent); }
  .p-doc-u-056 { background: var(--link); }
  .p-doc-u-057 { background: var(--info); }
  .p-doc-u-058 { background: var(--success); }
  .p-doc-u-059 { background: var(--warning); }
  .p-doc-u-060 { background: var(--danger); }
  .p-doc-u-061 { background: var(--info-bg); }
  .p-doc-u-062 { background: var(--success-bg); }
  .p-doc-u-063 { background: var(--warning-bg); }
  .p-doc-u-064 { background: var(--danger-bg); }
  .p-doc-u-065 { background: var(--b-neutral-25); }
  .p-doc-u-066 { background: var(--b-neutral-50); }
  .p-doc-u-067 { background: var(--b-neutral-100); }
  .p-doc-u-068 { background: var(--b-neutral-150); }
  .p-doc-u-069 { background: var(--b-neutral-200); }
  .p-doc-u-070 { background: var(--b-neutral-300); }
  .p-doc-u-071 { background: var(--b-neutral-400); }
  .p-doc-u-072 { background: var(--b-neutral-500); }
  .p-doc-u-073 { background: var(--b-neutral-600); }
  .p-doc-u-074 { background: var(--b-neutral-700); }
  .p-doc-u-075 { background: var(--b-neutral-800); }
  .p-doc-u-076 { background: var(--b-neutral-900); }
  .p-doc-u-077 { background: var(--b-red-500); }
  .p-doc-u-078 { background: var(--b-red-700); }
  .p-doc-u-079 { background: var(--b-blue-500); }
  .p-doc-u-080 { background: var(--b-blue-700); }
  .p-doc-u-081 { background: var(--b-indigo-500); }
  .p-doc-u-082 { background: var(--b-green-600); }
  .p-doc-u-083 { background: var(--b-green-800); }
  .p-doc-u-084 { background: var(--b-amber-500); }
  .p-doc-u-085 { background: var(--b-amber-800); }
  .p-doc-u-086 { background: var(--b-purple-500); }
  .p-doc-u-087 { background: var(--b-violet-500); }
  .p-doc-u-088 { background: var(--b-pink-500); }
  .p-doc-u-089 { background: var(--b-rose-500); }
  .p-doc-u-090 { background: var(--b-orange-500); }
  .p-doc-u-091 { background: var(--b-teal-500); }
  .p-doc-u-092 { background: var(--b-olive-500); }
  .p-doc-u-093 { background: var(--b-slate-500); }
  .p-doc-u-094 { background: var(--b-indigo-600); }
  .p-doc-u-095 { margin-block-start: var(--b-space-8); }
  .p-doc-u-096 { inline-size: 2px; }
  .p-doc-u-097 { inline-size: 4px; }
  .p-doc-u-098 { inline-size: 6px; }
  .p-doc-u-099 { inline-size: 8px; }
  .p-doc-u-100 { inline-size: 10px; }
  .p-doc-u-101 { inline-size: 12px; }
  .p-doc-u-102 { inline-size: 16px; }
  .p-doc-u-103 { inline-size: 20px; }
  .p-doc-u-104 { inline-size: 24px; }
  .p-doc-u-105 { inline-size: 32px; }
  .p-doc-u-106 { inline-size: 40px; }
  .p-doc-u-107 { inline-size: 48px; }
  .p-doc-u-108 { inline-size: 64px; }
  .p-doc-u-109 { inline-size: 88px; block-size: 64px; background: var(--surface-selected); border-radius: var(--b-radius-xs); display: grid; place-items: center; }
  .p-doc-u-110 { font-size: var(--b-text-2xs); }
  .p-doc-u-112 { inline-size: 88px; block-size: 64px; background: var(--surface-selected); border-radius: var(--b-radius-md); display: grid; place-items: center; }
  .p-doc-u-114 { inline-size: 88px; block-size: 64px; background: var(--surface-selected); border-radius: var(--b-radius-xl); display: grid; place-items: center; }
  .p-doc-u-115 { inline-size: 88px; block-size: 64px; background: var(--surface-selected); border-radius: var(--b-radius-2xl); display: grid; place-items: center; }
  .p-doc-u-116 { inline-size: 88px; block-size: 64px; background: var(--surface-selected); border-radius: var(--b-radius-3xl); display: grid; place-items: center; }
  .p-doc-u-117 { inline-size: 88px; block-size: 44px; background: var(--surface-selected); border-radius: var(--b-radius-pill); display: grid; place-items: center; }
  .p-doc-u-118 { inline-size: 64px; block-size: 64px; background: var(--surface-selected); border-radius: var(--b-radius-circle); display: grid; place-items: center; }
  .p-elevation-sample {
    display: grid;
    place-content: center;
    inline-size: 164px;
    block-size: 80px;
    text-align: center;
  }
  .p-elevation-sample > * { margin-inline: 0; }

  /* Elevação: escadaria real de sombras e vidro Gaussian demonstrado com os próprios tokens. */
  .p-elevation-section {
    isolation: isolate;
    background:
      radial-gradient(760px 320px at -5% -3%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 68%),
      linear-gradient(200deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
  }

  .p-elevation-section > h2:first-child {
    font-size: var(--b-text-6xl);
    font-weight: var(--b-weight-medium);
    letter-spacing: -.02em;
  }

  .p-elevation-section > h2 + p {
    color: var(--text);
    font-size: var(--b-text-lg);
    line-height: var(--b-leading-relaxed);
  }

  .p-elevation-stage {
    align-items: flex-end;
    gap: var(--b-space-7);
    padding: var(--b-space-11) var(--b-space-8) var(--b-space-9);
    background: linear-gradient(180deg, color-mix(in srgb, var(--portal-panel) 46%, var(--bg)), var(--bg) 78%);
  }

  .p-elevation-stage .p-elevation-sample {
    position: relative;
    flex: 1 1 150px;
    inline-size: auto;
    min-inline-size: 150px;
  }

  .p-elevation-stage .p-elevation-sample::before {
    content: attr(data-level);
    position: absolute;
    inset-block-start: calc(-1 * var(--b-space-8));
    inset-inline-start: 0;
    color: var(--text-muted);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
    font-weight: var(--b-weight-semibold);
  }

  .p-elevation-stage .p-elevation-sample:nth-child(2) { margin-block-end: 14px; }
  .p-elevation-stage .p-elevation-sample:nth-child(3) { margin-block-end: 28px; }
  .p-elevation-stage .p-elevation-sample:nth-child(4) { margin-block-end: 42px; }
  .p-elevation-stage .p-elevation-sample:nth-child(5) { margin-block-end: 56px; }

  .p-glass-demo {
    position: relative;
    overflow: hidden;
    margin-block: var(--b-space-7);
    border: 1px solid var(--border);
    border-radius: var(--b-radius-2xl);
    background: var(--bg);
  }

  .p-glass-demo__backdrop {
    display: grid;
    gap: var(--b-space-5);
    padding: 84px var(--b-space-8) var(--b-space-8);
    background:
      radial-gradient(260px 140px at 12% 8%, color-mix(in srgb, var(--b-purple-500) 30%, transparent), transparent 72%),
      radial-gradient(300px 150px at 58% 0%, color-mix(in srgb, var(--b-teal-500) 28%, transparent), transparent 72%),
      radial-gradient(240px 130px at 96% 34%, color-mix(in srgb, var(--b-amber-500) 26%, transparent), transparent 72%);
  }

  .p-glass-demo__line {
    block-size: 10px;
    inline-size: 62%;
    border-radius: var(--b-radius-pill);
    background: color-mix(in srgb, var(--text) 14%, transparent);
  }

  .p-glass-demo__line--wide { inline-size: 84%; }
  .p-glass-demo__line--narrow { inline-size: 38%; }

  .p-glass-demo__bar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--b-space-5);
    min-block-size: 54px;
    padding-inline: var(--b-space-7);
    background: color-mix(in srgb, var(--bg) 58%, transparent);
    -webkit-backdrop-filter: blur(var(--b-effect-gaussian-blur)) saturate(var(--b-effect-gaussian-saturation));
    backdrop-filter: blur(var(--b-effect-gaussian-blur)) saturate(var(--b-effect-gaussian-saturation));
  }

  .p-glass-demo__bar strong {
    color: var(--text);
    font-weight: var(--b-weight-title);
  }

  .p-glass-demo__bar code {
    color: var(--text-subtle);
    font-family: var(--b-font-mono);
    font-size: var(--b-text-2xs);
  }
  .p-doc-u-119 { box-shadow: var(--elevation-1); border: none; }
  .p-doc-u-120 { margin: var(--b-space-2) 0 0; }
  .p-doc-u-121 { box-shadow: var(--elevation-2); border: none; }
  .p-doc-u-122 { box-shadow: var(--elevation-3); border: none; }
  .p-doc-u-123 { box-shadow: var(--elevation-5); border: none; }
  .p-doc-u-124 { font-size: var(--b-text-sm); color: var(--text-subtle); }
  .p-doc-u-126 { box-shadow: var(--elevation-4); border: none; }
  .p-doc-u-125 { inline-size: 200px; }
}

/* Visão geral visual de componentes — inspirada em catálogos orientados por exemplo. */
.component-overview,
.component-family__header {
  scroll-margin-block-start: calc(var(--portal-header-h) + var(--b-space-7));
}

.component-overview { margin-block-start: var(--b-space-10); }

.component-overview__lead {
  max-inline-size: var(--b-layout-reading);
  margin: 0 0 var(--b-space-8);
  color: var(--text-subtle);
}

.component-overview__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--b-space-7);
}

.component-overview .section-title-row h2 {
  font-size: var(--b-text-6xl);
  font-weight: var(--b-weight-medium);
  letter-spacing: -.02em;
}

.component-overview-card {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--b-shape-interactive-radius);
  corner-shape: var(--b-corner-squircle);
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  transition:
    border-color var(--b-motion-fast) var(--b-ease-standard),
    box-shadow var(--b-motion-fast) var(--b-ease-standard),
    transform var(--b-motion-base) var(--b-ease-standard);
}

.component-overview-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

.component-overview-card:hover .component-overview-card__body small { color: var(--link); }

.component-overview-card__preview {
  position: relative;
  display: flex;
  min-block-size: 172px;
  align-items: center;
  justify-content: center;
  gap: var(--b-space-4);
  padding: var(--b-space-9) var(--b-space-8) var(--b-space-8);
  overflow: hidden;
  border-block-end: 1px solid var(--divider);
  background-color: color-mix(in srgb, var(--portal-panel) 46%, var(--bg));
  background-image: radial-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}

.component-overview-card__preview::before {
  content: attr(data-index);
  position: absolute;
  inset-block-start: var(--b-space-5);
  inset-inline-start: var(--b-space-6);
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
  letter-spacing: .08em;
}

.component-overview-card__body {
  display: flex;
  min-block-size: 132px;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--b-space-6) var(--b-space-7) var(--b-space-6);
}

.component-overview-card__body strong {
  font-size: var(--b-text-xl);
  font-weight: var(--b-weight-title);
  line-height: var(--b-leading-snug);
}

.component-overview-card__body > span {
  margin-block-start: var(--b-space-2);
  color: var(--text-subtle);
  font-size: var(--b-text-sm);
  line-height: var(--b-leading-normal);
}

.component-overview-card__body small {
  inline-size: 100%;
  margin-block-start: auto;
  padding-block-start: var(--b-space-5);
  border-block-start: 1px solid var(--divider);
  color: var(--accent);
  font-weight: var(--b-weight-semibold);
}

.component-overview-card__preview--actions { flex-wrap: wrap; }

.component-preview__icon-button {
  display: inline-flex;
  inline-size: var(--b-control-compact);
  block-size: var(--b-control-compact);
  align-items: center;
  justify-content: center;
  border-radius: var(--b-shape-control-compact-radius);
  corner-shape: var(--b-corner-squircle);
  background: var(--surface-hover);
  color: var(--text-subtle);
}

.component-preview__field {
  display: flex;
  min-block-size: 40px;
  min-inline-size: min(100%, 210px);
  align-items: center;
  gap: var(--b-space-4);
  padding-inline: var(--b-space-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--b-radius-md);
  background: var(--bg);
  color: var(--text-muted);
  font-size: var(--b-text-sm);
}

.component-preview__choices {
  display: flex;
  gap: var(--b-space-3);
}

.component-preview__choices i {
  inline-size: 16px;
  block-size: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--b-radius-circle);
  background: var(--bg);
}

.component-preview__choices .is-selected {
  border: 5px solid var(--accent);
}

.component-preview__nav {
  display: grid;
  inline-size: min(100%, 210px);
  gap: var(--b-space-2);
  padding: var(--b-space-4);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--bg);
}

.component-preview__nav i {
  display: flex;
  min-block-size: 32px;
  align-items: center;
  gap: var(--b-space-4);
  padding-inline: var(--b-space-4);
  border-radius: var(--b-radius-md);
  color: var(--text-subtle);
  font-size: var(--b-text-xs);
  font-style: normal;
}

.component-preview__nav .is-current {
  background: var(--surface-selected);
  color: var(--text);
  font-weight: var(--b-weight-medium);
}

.component-preview__data,
.component-preview__feedback,
.component-preview__quality {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-space-5);
}

.component-preview__data { flex-wrap: wrap; }
.component-preview__data-line {
  display: block;
  inline-size: 78%;
  block-size: 6px;
  border-radius: var(--b-radius-pill);
  background: var(--border-strong);
}

.component-preview__feedback {
  inline-size: min(100%, 220px);
  flex-direction: column;
  align-items: stretch;
  font-size: var(--b-text-xs);
}

.component-preview__progress { inline-size: 72%; }

.component-preview__quality {
  flex-wrap: wrap;
  color: var(--accent);
}

.component-preview__measure {
  flex-basis: 100%;
  color: var(--text-subtle);
  font: var(--b-weight-medium) var(--b-text-xs)/1 var(--b-font-mono);
  text-align: center;
}

.component-family {
  margin-block-start: var(--b-space-12);
  padding-block-start: var(--b-space-9);
  border-block-start: 1px solid var(--divider);
}

.component-family__header {
  position: relative;
  max-inline-size: none;
  margin-block-end: var(--b-space-8);
  padding: var(--b-space-9) var(--b-space-9) var(--b-space-8);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  corner-shape: var(--b-corner-squircle);
  background:
    radial-gradient(680px 280px at 105% -5%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%),
    linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
}

.component-family__header::after {
  content: attr(data-index);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--b-space-9);
  color: color-mix(in srgb, var(--text) 8%, transparent);
  font-family: var(--b-font-mono);
  font-size: 96px;
  font-weight: var(--b-weight-semibold);
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.component-family__header h2 {
  margin: 0 0 var(--b-space-3);
  font-size: var(--b-text-6xl);
  font-weight: var(--b-weight-medium);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.component-family__header > p:not(.eyebrow) {
  max-inline-size: var(--b-layout-reading);
}

.p-demo[data-demo-label]::before {
  content: attr(data-demo-label);
  flex-basis: 100%;
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.icon-behavior-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-space-5);
  padding: 0 !important;
  counter-reset: icon-behavior;
  list-style: none;
}

.icon-behavior-list > li {
  position: relative;
  display: block;
  min-inline-size: 0;
  max-inline-size: none;
  margin: 0;
  padding: var(--b-space-6) var(--b-space-7) var(--b-space-7);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  color: var(--text-subtle);
  background: var(--surface);
  line-height: var(--b-leading-relaxed);
}

.icon-behavior-list > li:last-child { grid-column: 1 / -1; }

.icon-behavior-list > li::before {
  content: counter(icon-behavior, decimal-leading-zero);
  counter-increment: icon-behavior;
  position: absolute;
  inset-block-start: var(--b-space-5);
  inset-inline-end: var(--b-space-5);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--border);
  border-radius: var(--b-radius-circle);
  color: var(--text-muted);
  background: var(--bg);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
}

.icon-behavior-list > li strong {
  display: block;
  margin-block-end: var(--b-space-2);
  color: var(--text);
}

.icon-behavior-list .icon-practice-demo {
  margin-block-end: var(--b-space-5);
  background-color: var(--bg);
}

.icon-practice-demo__control--selected {
  border-color: var(--border-strong);
  background: var(--surface-selected);
}

.ib-tooltip-stack {
  display: grid;
  gap: var(--b-space-3);
  justify-items: center;
}

.ib-tooltip {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  padding-inline: var(--b-space-4);
  border-radius: var(--b-radius-md);
  corner-shape: var(--b-corner-squircle);
  color: var(--on-action);
  background: var(--action);
  font-size: var(--b-text-xs);
  font-weight: var(--b-weight-medium);
}

.ib-segmented {
  display: inline-flex;
  gap: var(--b-space-1);
  padding: var(--b-space-1);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-pill);
  background: var(--surface);
}

.ib-segmented__cell {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 28px;
  border-radius: var(--b-radius-pill);
  color: var(--text-subtle);
}

.ib-segmented__cell--selected {
  color: var(--text);
  background: var(--surface-selected);
}

.ib-composer {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-5);
  min-inline-size: 200px;
  padding: var(--b-space-3) var(--b-space-3) var(--b-space-3) var(--b-space-6);
  border: 1px solid var(--accent);
  border-radius: var(--b-radius-3xl);
  corner-shape: var(--b-corner-squircle);
  background: var(--bg);
}

.ib-composer__ghost {
  flex: 1;
  block-size: 8px;
  border-radius: var(--b-radius-pill);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.ib-composer__action {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--b-radius-circle);
  color: var(--on-action);
  background: var(--action);
}

@media (max-width: 880px) {
  .icon-behavior-list { grid-template-columns: 1fr; }
}

.spec-model {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-space-5);
  max-inline-size: none;
  margin-block: var(--b-space-7) var(--b-space-6);
  border-block: 0;
}

.spec-model > p {
  margin: 0;
  max-inline-size: none;
  padding: var(--b-space-6) var(--b-space-7);
  border: 1px solid var(--border);
  border-block-start: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  color: var(--text-subtle);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.spec-model > p:first-child {
  grid-column: 1 / -1;
  padding: var(--b-space-7);
  color: var(--text);
  font-size: var(--b-text-lg);
  line-height: var(--b-leading-relaxed);
}

.spec-model--accent2 > p:nth-child(2) {
  grid-column: 1 / -1;
  padding: var(--b-space-5) var(--b-space-7);
  border-color: var(--portal-accent-border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--b-radius-xl);
  color: var(--text);
  background: var(--portal-accent-soft);
  font-weight: var(--b-weight-medium);
}

.spec-model > p:last-child:nth-child(even) { grid-column: 1 / -1; }
.spec-model--accent2 > p:last-child:nth-child(odd) { grid-column: 1 / -1; }

.spec-model--pair > p:first-child {
  grid-column: auto;
  padding: var(--b-space-6) var(--b-space-7);
  color: var(--text-subtle);
  font-size: var(--b-text-md);
  line-height: var(--b-leading-normal);
}

.spec-model--pair > p:last-child {
  grid-column: 1 / -1;
  padding: var(--b-space-5) var(--b-space-7);
  border-color: var(--portal-accent-border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--b-radius-xl);
  color: var(--text);
  background: var(--portal-accent-soft);
  font-weight: var(--b-weight-medium);
}

@media (max-width: 880px) {
  .spec-model { grid-template-columns: 1fr; }
}

.icon-axes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b-space-4);
  margin-block: var(--b-space-6) var(--b-space-4);
}

.icon-axes__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-4);
  min-block-size: 28px;
  padding-inline: var(--b-space-5);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-pill);
  color: var(--text-subtle);
  background: var(--surface);
  font-size: var(--b-text-xs);
  font-weight: var(--b-weight-medium);
}

.icon-axes__chip code {
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
}

.component-family__header > p:last-child {
  margin: 0;
  color: var(--text-subtle);
  font-size: var(--b-text-lg);
  line-height: var(--b-leading-relaxed);
}

.status-chip--core,
.status-chip--stable {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: var(--success-bg);
}

.status-chip--extension {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
  background: var(--warning-bg);
}

.status-chip--pattern {
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 34%, var(--border));
  background: var(--info-bg);
}

.status-chip--domain {
  color: var(--text-subtle);
  border-color: var(--border-strong);
  background: var(--surface-2);
}

@media (max-width: 1100px) {
  .component-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .component-overview__grid { grid-template-columns: 1fr; }
  .component-overview-card__preview { min-block-size: 152px; }
  .component-overview-card__body { min-block-size: 104px; }
  .component-family { margin-block-start: var(--b-space-10); padding-block-start: var(--b-space-7); }
}

/* Specimens dos papéis semânticos de shape — v1.5. */
.shape-role-grid,
.shape-application-grid {
  display: grid;
  gap: var(--b-space-5);
}

.shape-role-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.shape-application-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.shape-application-card--nav { grid-row: 1 / span 2; }

.shape-application-grid article::after {
  content: attr(data-spec);
  inline-size: 100%;
  margin-block-start: auto;
  padding-block-start: var(--b-space-4);
  border-block-start: 1px solid var(--divider);
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
}

.shape-application-card--nav .foundation-nav-preview {
  align-self: center;
  margin-block: var(--b-space-4);
}

.shape-role-grid article,
.shape-application-grid article {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--b-space-3);
  padding: var(--b-space-7);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--surface);
}

.shape-role-grid p,
.shape-application-grid p { margin: 0; color: var(--text-subtle); font-size: var(--b-text-sm); }

.shape-role-sample {
  display: block;
  inline-size: 112px;
  block-size: 72px;
  margin-block-end: var(--b-space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.shape-role-grid article {
  display: grid;
  grid-template-rows: 96px auto minmax(0, 1fr) auto;
  justify-items: start;
}

.shape-role-grid .shape-role-sample {
  place-self: center;
  margin-block-end: 0;
}

.shape-role-grid article::after {
  content: attr(data-spec);
  inline-size: 100%;
  margin-block-start: var(--b-space-4);
  padding-block-start: var(--b-space-4);
  border-block-start: 1px solid var(--divider);
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
}

.shape-role-sample--rounded { border-radius: var(--b-radius-2xl); corner-shape: var(--b-corner-rounded); }
.shape-role-sample--squircle { border-radius: var(--b-radius-3xl); corner-shape: var(--b-corner-squircle); }
.shape-role-sample--pill { block-size: 44px; border-radius: var(--b-radius-pill); corner-shape: var(--b-corner-rounded); }
.shape-role-sample--circle { inline-size: 72px; border-radius: var(--b-radius-circle); corner-shape: var(--b-corner-rounded); }

.foundation-nav-preview {
  box-sizing: border-box;
  display: flex;
  inline-size: min(260px, 100%);
  flex-direction: column;
  padding: 0 6px 12px 7px;
  border-inline-end: 1px solid var(--divider);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}
.foundation-nav-preview__header {
  display: flex;
  block-size: var(--portal-header-h);
  align-items: center;
  justify-content: space-between;
  padding-inline: 7px 2px;
}
.foundation-nav-preview__brand {
  font-size: var(--b-text-2xl);
  font-weight: var(--b-weight-medium);
  line-height: 22px;
  letter-spacing: -.01em;
}
.foundation-nav-preview__heading {
  display: inline-flex;
  block-size: 24px;
  align-items: center;
  gap: var(--b-space-1);
  padding-inline: var(--b-space-5);
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
  color: var(--nav-section-title);
}
.foundation-nav-preview__item + .foundation-nav-preview__heading { margin-block-start: var(--b-nav-section-gap); }
.foundation-nav-preview__heading .b-icon { --b-icon-size: var(--b-space-5); }
.foundation-nav-preview__item {
  display: flex;
  block-size: var(--b-nav-item-block);
  align-items: center;
  gap: var(--b-space-4);
  padding-inline: var(--b-nav-frame-padding-start);
  border-radius: var(--b-shape-navigation-radius);
  corner-shape: var(--b-corner-squircle);
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
}
.foundation-nav-preview__item--current { background: var(--surface-selected); }

.rail-control-specimen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--b-space-5);
  margin-block: var(--b-space-6);
}
.rail-control-specimen-grid figure {
  min-inline-size: 0;
  margin: 0;
  padding: var(--b-space-6);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--surface);
}
.rail-control-specimen-grid figcaption {
  display: grid;
  gap: var(--b-space-1);
  margin-block-start: var(--b-space-5);
  color: var(--text-subtle);
  font-size: var(--b-text-sm);
}
.rail-control-specimen-grid figcaption strong { color: var(--text); }
.rail-control-specimen {
  box-sizing: border-box;
  display: flex;
  block-size: var(--portal-header-h);
  align-items: center;
  border-inline-end: 1px solid var(--divider);
  background: var(--bg);
}
.rail-control-specimen--expanded {
  inline-size: 100%;
  justify-content: space-between;
  padding-inline: 14px 8px;
}
.rail-control-specimen--collapsed {
  inline-size: var(--b-nav-frame-collapsed);
  padding-inline: var(--b-nav-collapsed-inset);
}
.rail-control-specimen__brand {
  font-size: var(--b-brand-name-size);
  font-weight: var(--b-brand-weight);
  line-height: var(--b-brand-name-leading);
  letter-spacing: var(--b-brand-tracking);
}
.rail-control-specimen__surface {
  display: grid;
  inline-size: var(--b-nav-collapsed-surface);
  block-size: var(--b-nav-collapsed-surface);
  flex: 0 0 var(--b-nav-collapsed-surface);
  place-items: center;
  border-radius: var(--b-shape-navigation-radius);
  corner-shape: var(--b-corner-squircle);
  color: var(--text);
}
.rail-control-specimen__surface--hover { color: var(--text); background: var(--surface-hover); }
.rail-control-specimen__mark {
  display: grid;
  inline-size: var(--b-product-logo-size);
  block-size: var(--b-product-logo-size);
  place-items: center;
}
.rail-control-specimen__mark img {
  inline-size: var(--b-product-logo-size);
  block-size: var(--b-product-logo-size);
  object-fit: contain;
  filter: var(--b-brand-mark-filter);
}
.rail-control-specimen__fallback {
  --b-icon-size: var(--b-product-fallback-size);
  color: var(--text);
}

.shape-control-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-space-5);
  inline-size: 100%;
  min-block-size: 112px;
  border: 1px dashed var(--border);
  border-radius: var(--b-radius-xl);
  background-image: radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}

.p-rail-model {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-space-5);
  max-inline-size: none;
  margin-block: var(--b-space-7);
  border-block: 0;
}

.p-rail-model > p {
  margin: 0;
  max-inline-size: none;
  padding: var(--b-space-7);
  border: 1px solid var(--border);
  border-block-start: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  color: var(--text-subtle);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.p-rail-model > p:first-child {
  grid-column: 1 / -1;
  padding: var(--b-space-5) var(--b-space-7);
  border-color: var(--portal-accent-border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--b-radius-xl);
  color: var(--text);
  background: var(--portal-accent-soft);
  font-weight: var(--b-weight-medium);
}

.rail-control-specimen-grid--grouped { grid-template-columns: 2fr 2fr 1.2fr; }

.rail-specimen-cluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--b-space-5);
  padding: var(--b-space-6);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.rail-specimen-cluster::before {
  content: attr(data-cluster);
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rail-specimen-cluster--fallback { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
  .rail-control-specimen-grid--grouped { grid-template-columns: 1fr; }
  .rail-specimen-cluster--fallback { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-specimen-cluster--fallback figure { grid-column: 1 / -1; }
}

.rail-control-specimen-grid--grouped figure { background: var(--bg); }

.rail-control-specimen-grid--grouped figcaption strong { text-wrap: balance; }

.rail-control-specimen-grid--grouped .rail-control-specimen--collapsed { margin-inline: auto; }

.shape-composer-sample {
  position: relative;
  display: flex;
  inline-size: 100%;
  min-block-size: 108px;
  align-items: flex-start;
  gap: var(--b-space-5);
  padding: var(--b-space-7);
  border: 1px solid var(--accent);
  border-radius: var(--b-shape-composer-radius);
  corner-shape: var(--b-corner-squircle);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-muted);
  font-size: var(--b-text-sm);
}

.shape-composer-send {
  position: absolute;
  inset-inline-end: var(--b-space-4);
  inset-block-end: var(--b-space-4);
  display: grid;
  inline-size: var(--b-control-default);
  block-size: var(--b-control-default);
  flex: 0 0 var(--b-control-default);
  place-items: center;
  border-radius: var(--b-radius-circle);
  corner-shape: var(--b-corner-rounded);
  background: var(--action);
  color: var(--on-action);
}

@media (max-width: 900px) {
  .shape-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shape-application-grid { grid-template-columns: 1fr; }
  .shape-application-card--nav { grid-row: auto; }
  .p-rail-model { grid-template-columns: 1fr; }
  .rail-control-specimen-grid--grouped { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .shape-role-grid { grid-template-columns: 1fr; }
}

/* Specimens do contrato iconográfico — v1.5. */
/* Iconografia: muro-specimen, caixas literais, tríptico de pesos e representação com palco. */
.p-icon-section {
  isolation: isolate;
  background:
    radial-gradient(760px 320px at 105% -3%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 68%),
    linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--portal-panel) 52%, var(--bg)));
}

.icon-wall {
  display: grid;
  gap: var(--b-space-6);
  margin-block: var(--b-space-7);
  padding: var(--b-space-8);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.icon-wall__field {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--b-space-6) var(--b-space-4);
  justify-items: center;
  color: var(--text-muted);
  -webkit-mask-image: radial-gradient(140% 130% at 50% 0%, currentColor 58%, transparent 98%);
  mask-image: radial-gradient(140% 130% at 50% 0%, currentColor 58%, transparent 98%);
}

.icon-wall__field .b-icon { opacity: .62; }

.icon-wall__field .icon-wall__accent {
  color: var(--accent);
  opacity: 1;
}

.icon-wall__caption {
  justify-self: center;
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
  letter-spacing: .04em;
}

.icon-practices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-space-5);
  margin: 0;
  padding: 0 !important;
  list-style: none;
}

.icon-practices > li {
  display: block;
  min-inline-size: 0;
  margin: 0;
  padding: var(--b-space-7);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--surface);
  color: var(--text-subtle);
  line-height: var(--b-leading-relaxed);
}

.icon-practices > li strong {
  display: block;
  margin-block-end: var(--b-space-2);
  color: var(--text);
}

.icon-practices > li.p-editorial-split--list {
  display: block;
  border-block: 0;
}

.icon-practices > li.p-editorial-split--list > span:not(.icon-practice-demo) {
  padding-block: var(--b-space-2);
  border-block-start: 0;
}

.icon-practice-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-space-9);
  min-block-size: 96px;
  margin-block-end: var(--b-space-4);
  padding: var(--b-space-5);
  border: 1px dashed var(--border);
  border-radius: var(--b-radius-xl);
  color: var(--text);
  background-image: radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}

.icon-practice-demo__cell {
  display: grid;
  gap: var(--b-space-3);
  justify-items: center;
}

.icon-practice-demo__cell code,
.icon-practice-demo__axis + code {
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
}

.icon-practice-demo__cell--accent .b-icon { color: var(--accent); }

.icon-practice-demo__pair {
  display: inline-flex;
  gap: var(--b-space-4);
}

.icon-practice-demo__axis {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-4);
  padding: var(--b-space-4) var(--b-space-6);
}

.icon-practice-demo__axis::before {
  content: "";
  position: absolute;
  inset-inline: calc(-1 * var(--b-space-6));
  inset-block-start: 50%;
  border-block-start: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}

.icon-practice-demo__label-text {
  color: var(--text);
  font-size: var(--b-text-sm);
  font-weight: var(--b-weight-medium);
}

.icon-practice-demo__control {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-4);
  min-block-size: 36px;
  padding-inline: var(--b-space-6);
  border: 1px solid var(--border-strong);
  border-radius: var(--b-shape-control-radius);
  corner-shape: var(--b-corner-squircle);
  color: var(--text);
  background: var(--bg);
  font-size: var(--b-text-sm);
  font-weight: var(--b-weight-medium);
}

.icon-practice-demo__control--icononly {
  inline-size: 36px;
  justify-content: center;
  padding-inline: 0;
}

.icon-practice-demo__target {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--b-shape-control-radius);
  corner-shape: var(--b-corner-squircle);
  background: var(--surface-selected);
}

.icon-caixa {
  box-sizing: content-box;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 2px;
  color: var(--text);
}

.icon-caixa--16 { inline-size: 16px; block-size: 16px; }
.icon-caixa--20 { inline-size: 20px; block-size: 20px; }
.icon-caixa--24 { inline-size: 24px; block-size: 24px; }
.icon-caixa--32 { inline-size: 32px; block-size: 32px; }

.icon-spec-grid article .icon-caixa { margin-block: auto; }

.icon-spec-grid article {
  display: grid !important;
  grid-template-rows: 56px auto minmax(0, 1fr);
  justify-items: center;
}

.icon-weights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--b-space-5);
  margin-block-end: var(--b-space-5);
}

.icon-weights__tile {
  display: grid;
  gap: var(--b-space-4);
  justify-items: center;
  padding: var(--b-space-7);
  border: 1px dashed var(--border);
  border-radius: var(--b-radius-2xl);
  color: var(--text);
  background-image: radial-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}

.icon-weights__tile code {
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
}

.representation-grid article {
  position: relative;
  padding-block-end: var(--b-space-6);
}

.representation-grid article::after {
  content: attr(data-spec);
  inline-size: 100%;
  margin-block-start: auto;
  padding-block-start: var(--b-space-4);
  border-block-start: 1px solid var(--divider);
  color: var(--text-muted);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
}

.representation-grid article > :first-child {
  align-self: center;
  margin-block: var(--b-space-4);
}

.icon-spec-grid,
.icon-pair-grid,
.representation-grid {
  display: grid;
  gap: var(--b-space-5);
}

.icon-spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icon-pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.representation-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.icon-spec-grid article,
.icon-pair-grid article,
.representation-grid article {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--b-space-3);
  padding: var(--b-space-7);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--surface);
}

.icon-spec-grid article { align-items: center; text-align: center; }
.icon-spec-grid code { margin-block-start: var(--b-space-3); }
.icon-spec-grid p,
.icon-pair-grid p,
.representation-grid p { margin: 0; color: var(--text-subtle); font-size: var(--b-text-sm); }

.icon-pair-grid article > div {
  display: flex;
  align-items: center;
  gap: var(--b-space-7);
  min-block-size: 56px;
  color: var(--accent);
}

.representation-grid article > :first-child { color: var(--accent); }
.representation-grid article > :first-child:not(.b-icon) { min-block-size: 32px; }

@media (max-width: 820px) {
  .icon-spec-grid,
  .representation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .icon-practices { grid-template-columns: 1fr; }
  .icon-wall__field { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .icon-wall__field .b-icon:nth-child(n+25) { display: none; }
  .icon-weights { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .icon-spec-grid,
  .icon-pair-grid,
  .representation-grid { grid-template-columns: 1fr; }
  .icon-wall__field { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Layout de demonstração para contratos v1.5. */
.component-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--b-space-6);
}

.component-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--b-space-6);
  inline-size: 100%;
}

.component-demo-grid > * { min-inline-size: 0; }
.b-progress__bar--demo { inline-size: 68%; }

@media (max-width: 680px) {
  .component-demo-grid { grid-template-columns: 1fr; }
}

/* Estado de entrega separado da maturidade arquitetural. */
.component-card__meta { gap: var(--b-space-2); }
.delivery-chip {
  padding: var(--b-space-1) var(--b-space-3);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-pill);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
  line-height: 1.2;
}
.delivery-chip--implemented { color: var(--success); background: var(--success-bg); }
.delivery-chip--documented { color: var(--text-subtle); background: var(--surface-2); }

/* Coarse shell controls promote the target without creating another component family. */
.b-icon-btn.menu-toggle,
.top-search-icon-button { display: none; }

@media (max-width: 960px) {
  .b-icon-btn.menu-toggle,
  .top-search-icon-button { display: inline-flex; }
  .top-search-button { display: none; }
}

@media (max-width: 680px) {
  .p-canvas-width-grid { grid-template-columns: 1fr; }
}

@media (hover: none) and (pointer: coarse) {
  .b-icon-btn.menu-toggle,
  #drawer-close,
  .top-search-icon-button {
    inline-size: var(--b-control-touch);
    block-size: var(--b-control-touch);
    border-radius: var(--b-shape-control-large-radius);
  }
  .b-icon-btn.menu-toggle > .b-icon,
  #drawer-close > .b-icon,
  .top-search-icon-button > .b-icon { --b-icon-size: var(--b-icon-large); }
}

/* Sem runtime, controles inoperantes desaparecem e o conteúdo permanece acessível. */
html:not(.js) .menu-toggle,
html:not(.js) [data-search-trigger],
html:not(.js) .theme-switch,
html:not(.js) .sidebar-collapse-toggle { display: none !important; }

/* Shell desktop: regras não-layered vencem os contratos-base carregados antes do portal. */
.b-icon-btn.sidebar-collapse-toggle {
  position: relative;
  display: none;
  inline-size: var(--b-nav-collapsed-surface);
  block-size: var(--b-nav-item-block);
  flex: 0 0 var(--b-nav-collapsed-surface);
  border-radius: var(--b-shape-navigation-radius);
  margin-inline-end: 2px;
  color: var(--text);
  cursor: w-resize;
  opacity: 1;
  transition:
    margin-inline-end var(--b-motion-gentle) var(--b-ease-standard),
    opacity var(--b-motion-fast) var(--b-ease-standard),
    background var(--b-motion-fast) var(--b-ease-standard),
    border-color var(--b-motion-fast) var(--b-ease-standard),
    color var(--b-motion-fast) var(--b-ease-standard);
}
:dir(rtl) .b-icon-btn.sidebar-collapse-toggle { cursor: e-resize; }
.js .b-icon-btn.sidebar-collapse-toggle { display: inline-flex; }
.b-icon-btn.sidebar-collapse-toggle > .b-icon { --b-icon-size: var(--b-navigation-perimeter-icon-size); }
.sidebar-collapse-toggle__mark {
  position: absolute;
  inset: 0;
  display: grid;
  inline-size: var(--b-product-logo-size);
  block-size: var(--b-product-logo-size);
  place-items: center;
  margin: auto;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--b-motion-fast) var(--b-ease-standard);
}
.sidebar-collapse-toggle__mark img {
  inline-size: var(--b-product-logo-size);
  block-size: var(--b-product-logo-size);
  object-fit: contain;
  filter: var(--b-brand-mark-filter);
}
.sidebar-collapse-toggle__fallback {
  --b-icon-size: var(--b-product-fallback-size);
  color: var(--text);
}
.sidebar-collapse-toggle__fallback[hidden],
.sidebar-collapse-toggle__mark.is-fallback > img { display: none; }
.sidebar-collapse-toggle__icon { opacity: 1; transition: opacity var(--b-motion-fast) var(--b-ease-standard); }
.b-icon-btn.sidebar-collapse-toggle[aria-expanded="true"]:not(.b-icon-btn--filled) {
  color: var(--text);
  background: transparent;
}
.b-icon-btn.sidebar-collapse-toggle:hover:not(:disabled),
.b-icon-btn.sidebar-collapse-toggle[aria-expanded="true"]:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
}

@media (max-width: 960px) {
  .js .b-icon-btn.sidebar-collapse-toggle { display: none; }
}

@media (min-width: 961px) {
  .sidebar { inline-size: 100%; }
  .top-search-button {
    min-block-size: var(--b-control-compact);
    padding-inline: var(--b-space-5);
    font-size: var(--b-text-sm);
  }
  .sidebar-group > .b-nav-section__heading {
    max-block-size: var(--b-nav-section-heading-block);
    overflow: hidden;
    opacity: 1;
    transition:
      max-block-size var(--b-motion-gentle) var(--b-ease-standard),
      opacity var(--portal-sidebar-label-open-duration) var(--b-ease-standard) var(--portal-sidebar-label-open-delay);
  }
  .sidebar-group + .sidebar-group {
    transition: margin-block-start var(--b-motion-gentle) var(--b-ease-standard);
  }
  .sidebar-link { overflow: hidden; }
  .sidebar-link__label {
    max-inline-size: 220px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition:
      max-inline-size var(--b-motion-gentle) var(--b-ease-standard),
      opacity var(--portal-sidebar-label-open-duration) var(--b-ease-standard) var(--portal-sidebar-label-open-delay);
  }
  .sidebar-status,
  .sidebar-group:has(.sidebar-link--anchor) {
    overflow: hidden;
    opacity: 1;
    transition:
      max-block-size var(--b-motion-gentle) var(--b-ease-standard),
      margin-block-start var(--b-motion-gentle) var(--b-ease-standard),
      padding var(--b-motion-gentle) var(--b-ease-standard),
      border-width var(--b-motion-gentle) var(--b-ease-standard),
      opacity var(--portal-sidebar-label-open-duration) var(--b-ease-standard) var(--portal-sidebar-label-open-delay);
  }
  .sidebar-status { max-block-size: 120px; }
  .sidebar-group:has(.sidebar-link--anchor) { max-block-size: 240px; }
  .portal-sidebar-collapsed .site-header__rail,
  .portal-sidebar-collapsed .sidebar {
    cursor: e-resize;
  }
  :dir(rtl).portal-sidebar-collapsed .site-header__rail,
  :dir(rtl).portal-sidebar-collapsed .sidebar {
    cursor: w-resize;
  }
  .portal-sidebar-collapsed .sidebar-collapse-toggle {
    margin-inline-end: 0;
    cursor: e-resize;
    transition:
      margin-inline-end var(--portal-sidebar-close-duration) var(--b-ease-standard),
      opacity var(--b-motion-fast) var(--b-ease-standard),
      background var(--b-motion-fast) var(--b-ease-standard),
      border-color var(--b-motion-fast) var(--b-ease-standard),
      color var(--b-motion-fast) var(--b-ease-standard);
  }
  :dir(rtl).portal-sidebar-collapsed .sidebar-collapse-toggle { cursor: w-resize; }
  .portal-sidebar-collapsed .sidebar-collapse-toggle__mark { opacity: 1; }
  .portal-sidebar-collapsed .sidebar-collapse-toggle__icon { opacity: 0; }
  .portal-sidebar-collapsed .sidebar-link {
    padding-inline: calc((var(--b-nav-collapsed-surface) - var(--b-icon-default)) / 2);
  }
  .portal-sidebar-collapsed .sidebar {
    padding-inline: var(--b-nav-collapsed-inset);
    overflow-y: auto;
  }
  .portal-sidebar-collapsed .sidebar-group > .b-nav-section__heading,
  .portal-sidebar-collapsed .sidebar-status,
  .portal-sidebar-collapsed .sidebar-group:has(.sidebar-link--anchor) {
    max-block-size: 0;
    margin-block-start: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
    transition:
      max-block-size var(--portal-sidebar-close-duration) var(--b-ease-standard),
      margin-block-start var(--portal-sidebar-close-duration) var(--b-ease-standard),
      padding var(--portal-sidebar-close-duration) var(--b-ease-standard),
      border-width var(--portal-sidebar-close-duration) var(--b-ease-standard),
      opacity var(--portal-sidebar-label-close-duration) var(--b-ease-standard);
  }
  .portal-sidebar-collapsed .sidebar-group + .sidebar-group {
    margin-block-start: 0;
    transition: margin-block-start var(--portal-sidebar-close-duration) var(--b-ease-standard);
  }
  .portal-sidebar-collapsed .sidebar-link {
    padding-inline: calc((var(--b-nav-collapsed-surface) - var(--b-icon-default)) / 2);
    gap: 0;
    border-radius: var(--b-shape-navigation-radius);
    corner-shape: var(--b-corner-squircle);
  }
  .portal-sidebar-collapsed .sidebar-link__label {
    max-inline-size: 0;
    opacity: 0;
    pointer-events: none;
    transition:
      max-inline-size var(--portal-sidebar-close-duration) var(--b-ease-standard),
      opacity var(--portal-sidebar-label-close-duration) var(--b-ease-standard);
  }
  .portal-sidebar-collapsed .sidebar-group[data-portal-rail-preference="closed"] .b-nav-section__content[data-portal-rail-presentation="preparing"] {
    display: grid;
    max-block-size: 0;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
  }
  .portal-sidebar-collapsed .sidebar-group[data-portal-rail-preference="closed"] .b-nav-section__content[data-portal-rail-presentation="visible"] {
    display: grid;
    max-block-size: var(--b-nav-section-content-size, 1000px);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      max-block-size var(--portal-sidebar-close-duration) var(--b-ease-standard),
      opacity calc(var(--portal-sidebar-close-duration) - var(--portal-sidebar-label-close-duration)) var(--b-ease-standard) var(--portal-sidebar-label-close-duration),
      transform var(--portal-sidebar-close-duration) var(--b-ease-standard);
  }
  .sidebar-group[data-portal-rail-preference="closed"] .b-nav-section__content[data-portal-rail-presentation="returning"] {
    display: grid;
    max-block-size: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    transition:
      max-block-size var(--portal-sidebar-close-duration) var(--b-ease-standard),
      opacity var(--portal-sidebar-label-close-duration) var(--b-ease-standard),
      transform var(--portal-sidebar-close-duration) var(--b-ease-standard);
  }
}

@media (min-width: 961px) {
  .js.portal-sidebar-collapsed .b-icon-btn.sidebar-collapse-toggle:focus-visible .sidebar-collapse-toggle__mark { opacity: 0; }
  .js.portal-sidebar-collapsed .b-icon-btn.sidebar-collapse-toggle:focus-visible .sidebar-collapse-toggle__icon { opacity: 1; }
}

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .js .b-icon-btn.sidebar-collapse-toggle {
    opacity: 0;
    pointer-events: none;
  }
  .js body:has(.site-header__rail:hover, .sidebar:hover) .b-icon-btn.sidebar-collapse-toggle,
  .js .b-icon-btn.sidebar-collapse-toggle:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .js.portal-sidebar-collapsed .b-icon-btn.sidebar-collapse-toggle {
    opacity: 1;
    pointer-events: auto;
  }
  .js.portal-sidebar-collapsed .b-icon-btn.sidebar-collapse-toggle:hover .sidebar-collapse-toggle__mark,
  .js.portal-sidebar-collapsed .b-icon-btn.sidebar-collapse-toggle:focus-visible .sidebar-collapse-toggle__mark { opacity: 0; }
  .js.portal-sidebar-collapsed .b-icon-btn.sidebar-collapse-toggle:hover .sidebar-collapse-toggle__icon,
  .js.portal-sidebar-collapsed .b-icon-btn.sidebar-collapse-toggle:focus-visible .sidebar-collapse-toggle__icon { opacity: 1; }
}

@media (min-width: 961px) and (hover: none) and (pointer: coarse) {
  .b-icon-btn.sidebar-collapse-toggle {
    inline-size: var(--b-control-touch);
    block-size: var(--b-control-touch);
    flex-basis: var(--b-control-touch);
  }
}

/* Nas trilhas da home, chips são metadado silencioso; regra não-camada para vencer as variantes semânticas. */
.destination-card .status-chip {
  color: var(--text-muted);
  border-color: var(--border);
  background: transparent;
}