/* Canonical approved compositions. Load after tokens and primitives; local consumer styles may precede this sheet only to preserve a documented variant. */

/* Page 49, approved 2026-09-28. Scoped: never restyle legacy headers. */
.af-shell-header { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-space-2) var(--af-space-6); padding: var(--af-space-6) var(--af-space-8); background: var(--af-panel); border-bottom: 1px solid var(--af-line); }
.af-shell-header a { color: inherit; text-decoration: none; }
.af-shell-header a:focus-visible { outline: var(--af-focus-width) solid var(--af-link); outline-offset: var(--af-focus-offset); }
.af-shell-brand { flex-shrink: 0; display: flex; align-items: center; min-height: var(--af-target); }
.af-shell-brand img { width: 160px; height: 32px; object-fit: contain; }
.af-shell-audience { display: flex; gap: var(--af-space-1); padding: var(--af-space-1); border: 1px solid var(--af-line); border-radius: var(--af-radius-choice); flex-shrink: 0; }
.af-shell-audience a { padding: 0 var(--af-space-4); display: flex; align-items: center; min-height: var(--af-target); border-radius: var(--af-radius-card); color: var(--af-muted); }
.af-shell-audience a[aria-current] { background: var(--af-active); color: var(--af-text); }
.af-shell-nav { position: relative; display: flex; align-items: center; gap: var(--af-space-2); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.af-shell-nav a { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-height: var(--af-target); padding: 0 var(--af-space-4); font-size: var(--af-text-md); line-height: var(--af-line-height); color: var(--af-muted); white-space: nowrap; }
.af-shell-nav a[aria-current], .af-shell-nav a[data-pending] { color: var(--af-text); }
.af-shell-marker { position: absolute; left: 0; top: 0; height: var(--af-target); border-radius: var(--af-radius-action); background: var(--af-active); pointer-events: none; transition: transform var(--af-motion-enter) ease, width var(--af-motion-enter) ease; }
.af-shell-tools { display: flex; gap: var(--af-space-2); align-items: center; margin-left: auto; }
#shell-header #search { display: flex !important; }
.af-shell-tools [data-shell-search] { font: inherit; text-decoration: none; padding-inline: var(--af-space-3); }
.af-shell-tools a { display: flex; align-items: center; justify-content: center; min-height: var(--af-target); padding: 0 var(--af-space-3); }
.af-shell-tools .account { border: 1px solid var(--af-line); border-radius: var(--af-radius-action); padding-inline: var(--af-space-4); }
.af-shell-viewport { position: relative; }
.af-shell-route { display: block; }
.af-shell-subnav { margin: var(--af-space-4) var(--af-gutter); }
.af-shell-subnav [aria-current="page"] { background: var(--af-active); border-radius: var(--af-radius-action); }
.af-shell-error { margin: var(--af-space-8) auto; max-width: 60ch; padding: var(--af-space-6); }
.af-shell-loader { position: relative; display: flex; align-items: center; justify-content: center; min-height: inherit; overflow: hidden; background: var(--af-bg); }
.af-shell-loader video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.af-shell-loading-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--af-space-4); }
.af-shell-loading-content p { margin: 0; }
.af-shell-viewport [hidden] { display: none !important; }
@media (max-width: 1100px) {
  .af-shell-nav { order: 4; flex: 1 0 100%; }
}
@media (max-width: 600px) {
  .af-shell-header { padding: var(--af-space-4); gap: var(--af-space-2) var(--af-space-3); }
  .af-shell-brand img { width: 132px; }
  .af-shell-audience { order: 4; margin-inline: auto; }
  .af-shell-nav { order: 5; gap: var(--af-space-1); }
  .af-shell-nav a { font-size: var(--af-text-sm); padding-inline: calc(var(--af-space-5) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .af-shell-marker { transition: none; }
  .af-shell-loader video { display: none; }
}

/* Appearance disclosure composition (shared by pilot R3/R4). */
.af-appearance svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
}
.af-appearance summary { min-height: var(--af-target); font-size: var(--af-text-md); font-weight: 400; white-space: nowrap; }
.af-appearance { position: relative; }
.af-appearance summary {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: var(--af-space-2);
  padding: var(--af-space-2) var(--af-space-4); border: 1px solid var(--af-line); border-radius: var(--af-radius-action); cursor: pointer;
}
.af-appearance summary::-webkit-details-marker { display: none; }
.af-appearance[open] summary { background: color-mix(in srgb, var(--af-text) 8%, var(--af-panel)); }
.af-appearance-symbol { font-weight: 600; }
.af-appearance summary > svg { transition: transform var(--af-motion-fast); }
.af-appearance[open] summary > svg { transform: rotate(180deg); }
.af-appearance-panel {
  position: absolute; top: calc(100% + var(--af-space-2)); right: 0; z-index: 5;
  width: min(304px, calc(100vw - 64px)); padding: var(--af-space-5);
  border: 1px solid var(--af-line); border-radius: var(--af-radius-choice); background: var(--af-panel); box-shadow: var(--af-shadow);
}
.af-appearance fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.af-appearance fieldset + fieldset { margin-top: var(--af-space-5); }
.af-appearance legend { padding: 0; margin-bottom: var(--af-space-2); color: var(--af-muted); }
@media (max-width: 600px) {
  .af-appearance summary { padding-inline: var(--af-space-3); }
  .af-appearance-symbol { display: none; }
  .af-appearance-panel { left: 0; right: auto; }
}

/* Finite, manual spatial gallery, including responsive and reduced-motion rules. */
.af-gallery { padding-bottom: var(--af-space-10); }
.af-gallery-heading { text-align: center; margin-bottom: var(--af-space-6); }
.af-gallery-heading h2 { color: var(--af-muted); font-size: var(--af-text-md); line-height: 1.5; font-weight: 400; letter-spacing: 0; margin: 0; }
.af-gallery-heading p { font-size: var(--af-text-md); color: var(--af-muted); margin: var(--af-space-2) 0 0; }
.af-gallery-choices { display: flex; justify-content: center; gap: var(--af-space-2); }
.af-gallery-choices button {
  min-height: var(--af-target); padding: var(--af-space-2) var(--af-space-5);
  background: transparent; color: var(--af-muted); border: 1px solid var(--af-line); border-radius: var(--af-radius-action);
  font-size: var(--af-text-md); transition: background var(--af-motion-fast), color var(--af-motion-fast);
}
.af-gallery-choices [aria-pressed="true"] { color: var(--af-on-primary); background: var(--af-primary); border-color: var(--af-primary); }
.af-spatial-stage { position: relative; height: 548px; perspective: 1400px; isolation: isolate; overflow: clip; margin-top: var(--af-space-3); }
.af-spatial-stage::before {
  content: ''; position: absolute; inset: 10% 15% 0; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--af-brand) 10%, transparent), transparent 68%);
}
.af-spatial-card {
  position: absolute; top: var(--af-space-6); left: 50%; width: 360px; padding: var(--af-space-2);
  border: 1px solid color-mix(in srgb, var(--af-muted) 40%, transparent); border-radius: var(--af-radius-hero);
  background: linear-gradient(155deg, var(--af-surface), var(--af-panel) 65%);
  box-shadow: var(--af-shadow), inset 0 1px 0 var(--af-line); transform-origin: center;
  transition: transform var(--af-motion-enter) ease, opacity var(--af-motion-enter) ease, border-color var(--af-motion-enter);
}
.af-spatial-card[data-position="front"] { transform: translateX(-50%); z-index: 3; opacity: 1; }
.af-spatial-card[data-position="left"] { transform: translateX(calc(-50% - 258px)) rotateY(14deg) rotateZ(-3deg) scale(.85); z-index: 1; opacity: .66; }
.af-spatial-card[data-position="right"] { transform: translateX(calc(-50% + 258px)) rotateY(-14deg) rotateZ(3deg) scale(.85); z-index: 1; opacity: .66; }
.af-spatial-card:focus-within { opacity: 1; border-color: var(--af-link); }
.af-spatial-cover {
  position: relative; height: 258px; overflow: hidden; border: 1px solid var(--af-line); border-radius: var(--af-radius-choice);
  background: radial-gradient(ellipse at 65% 25%, color-mix(in srgb, var(--af-link) 23%, var(--af-surface)), var(--af-panel) 90%);
}
.af-spatial-cover[data-art="resolver"] { background: radial-gradient(ellipse at 20% 80%, color-mix(in srgb, var(--af-link) 16%, var(--af-surface)), var(--af-panel) 90%); }
.af-spatial-cover[data-art="caminho"] { background: radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--af-muted) 22%, var(--af-surface)), var(--af-panel) 90%); }
.af-spatial-cover img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; }
.af-spatial-details { padding: var(--af-space-5) var(--af-space-4) var(--af-space-4); }
.af-spatial-status { display: flex; align-items: center; gap: var(--af-space-2); color: var(--af-muted); font-size: var(--af-text-md); margin: 0 0 var(--af-space-2); }
.af-spatial-status-dot { width: 6px; height: 6px; border-radius: var(--af-radius-action); background: var(--af-link); }
.af-spatial-status svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.af-spatial-details h3 { font-size: 24px; font-weight: 400; line-height: 1.3; letter-spacing: -.025em; min-height: 2.6em; margin: 0 0 var(--af-space-5); }
.af-spatial-details .af-button { width: 100%; justify-content: space-between; }
.af-spatial-card:not([data-position="front"]) .af-spatial-details .af-button { visibility: hidden; }
.af-spatial-preview { position: absolute; inset: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; }
.af-gallery-controls { display: flex; gap: var(--af-space-5); align-items: center; width: fit-content; padding: var(--af-space-2); margin: 0 auto; border: 1px solid var(--af-line); border-radius: var(--af-radius-action); background: var(--af-panel); }
.af-gallery .af-gallery-controls .af-button { padding: 0; width: var(--af-target); height: var(--af-target); background: var(--af-surface); }
.af-gallery-previous svg { transform: rotate(180deg); }
.af-gallery-position { color: var(--af-muted); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
@media (max-width: 1000px) {
  .af-spatial-card[data-position="left"] { transform: translateX(calc(-50% - 190px)) rotateY(14deg) rotateZ(-3deg) scale(.81); }
  .af-spatial-card[data-position="right"] { transform: translateX(calc(-50% + 190px)) rotateY(-14deg) rotateZ(3deg) scale(.81); }
}
@media (max-width: 600px) {
  .af-gallery-heading { text-align: left; }
  .af-gallery-choices { gap: var(--af-space-2); }
  .af-gallery-choices button { padding-inline: var(--af-space-3); flex: 1; }
  .af-spatial-stage { margin-inline: calc(-1 * var(--af-gutter)); height: 506px; }
  .af-spatial-card { width: calc(100% - 88px); max-width: 340px; }
  .af-spatial-cover { height: 220px; }
  .af-spatial-details { padding-inline: var(--af-space-3); }
  .af-spatial-details h3 { font-size: 24px; }
  .af-spatial-card[data-position="left"] { transform: translateX(calc(-50% - 84px)) rotateY(12deg) rotateZ(-4deg) scale(.88); opacity: .5; }
  .af-spatial-card[data-position="right"] { transform: translateX(calc(-50% + 84px)) rotateY(-12deg) rotateZ(4deg) scale(.88); opacity: .5; }
  .af-spatial-card:not([data-position="front"]) .af-spatial-details { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .af-spatial-card { transition: none; }
  .af-spatial-card[data-position="left"] { transform: translateX(calc(-50% - 23%)) scale(.9); }
  .af-spatial-card[data-position="right"] { transform: translateX(calc(-50% + 23%)) scale(.9); }
}