/* A26 Page Control component · v1.0.0-alpha.0016-content-structure */
@layer a26.components {
  .a26-page-control-demo { display: grid; gap: var(--a26-space-3); justify-items: center; margin-top: auto; }
  .a26-page-control-demo__page { width: 100%; min-height: 96px; border-radius: var(--a26-radius-xl); background: var(--a26-bg-surface); display: grid; place-items: center; color: var(--a26-text-secondary); font: var(--a26-font-headline); border: 1px solid var(--a26-separator); }
  .a26-page-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; padding: 6px 10px; border-radius: 999px; background: var(--a26-fill-quaternary); }
  .a26-page-control button { width: 8px; height: 8px; min-width: 8px; min-height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--a26-fill-primary); opacity: .45; cursor: pointer; }
  .a26-page-control button[aria-current="page"] { opacity: 1; background: var(--a26-text-primary); }
  .a26-page-control button:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-accent) 70%, transparent); outline-offset: 4px; }
  .a26-well-row { display: flex; gap: var(--a26-space-3); align-items: center; margin-top: auto; }
  .a26-color-well, .a26-image-well { min-width: 64px; min-height: 64px; border: 1px solid var(--a26-separator); border-radius: 16px; background: var(--a26-bg-surface); display: grid; place-items: center; cursor: pointer; color: var(--a26-text-secondary); }
  .a26-color-well span { width: 42px; height: 42px; border-radius: 12px; box-shadow: inset 0 0 0 1px #00000026; }
  .a26-image-well { min-width: 92px; gap: 2px; }
  .a26-image-well span { font-size: 24px; line-height: 1; }
  .a26-image-well small { font: var(--a26-font-caption-1); }
}