/*!
 * AgensTown Design System - component demo stylesheet
 * Hand-written, NOT generated. Uses only --at-* variables from agenstown.css.
 * Load order: fonts.css, agenstown.css, then this file.
 *
 * Radius note: DesignSystem/foundations/border-radius.md groups inputs with
 * buttons at radius.050 (2px), while the short-form brief in this task's
 * instructions says "4 px card+input". This file follows border-radius.md
 * (the generated foundation doc) as the more detailed source: buttons,
 * inputs, selects, checkboxes, chips, badges, lozenges, tags = radius.050;
 * cards, panels, banners, popups, dropdowns = radius.100; modal only =
 * radius.200. Flagged in the build report for the user to reconcile.
 */

/* ---------------------------------------------------------------------------
   RESET & BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--at-font-family-body);
  font-size: var(--at-font-size-200);
  line-height: var(--at-font-lineHeight-body);
  color: var(--at-color-text);
  background: var(--at-elevation-surface);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--at-motion-duration-base) var(--at-motion-easing-standard),
              color var(--at-motion-duration-base) var(--at-motion-easing-standard);
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--at-space-100); color: var(--at-color-text); }
p { margin: 0 0 var(--at-space-200); }
ul, ol { margin: 0 0 var(--at-space-200); padding-inline-start: var(--at-space-300); }
li + li { margin-top: var(--at-space-050); }
code, pre { font-family: var(--at-font-family-code); }
code { font-size: 0.9em; background: var(--at-elevation-surface-sunken); padding: 0 var(--at-space-050); border-radius: var(--at-radius-050); }
pre { background: var(--at-elevation-surface-sunken); border-radius: var(--at-radius-100); padding: var(--at-space-200); overflow-x: auto; }
pre code { background: none; padding: 0; }
hr { border: none; border-top: 1px solid var(--at-color-border); margin: var(--at-space-400) 0; }
blockquote {
  margin: 0 0 var(--at-space-200);
  padding-inline-start: var(--at-space-200);
  border-inline-start: var(--at-border-width-100) solid var(--at-color-border-brand);
  color: var(--at-color-text-subtle);
}
a { color: var(--at-color-link); }
a.at-link { text-decoration: underline; text-underline-offset: 2px; }
a.at-link:hover { color: var(--at-color-link-pressed); }
::selection { background: var(--at-color-background-brand-bold); color: var(--at-color-text-inverse); }

/* Skip link (WCAG 2.4.1) */
.at-skip-link {
  position: absolute;
  left: var(--at-space-200);
  top: -100px;
  background: var(--at-color-background-brand-bold);
  color: var(--at-color-text-inverse);
  padding: var(--at-space-100) var(--at-space-200);
  border-radius: var(--at-radius-050);
  z-index: var(--at-zIndex-tooltip);
  text-decoration: none;
  transition: top var(--at-motion-duration-fast) var(--at-motion-easing-standard);
}
.at-skip-link:focus { top: var(--at-space-200); }

/* Focus-visible fallback for elements without .at-focus-ring applied explicitly */
:focus { outline: none; }
:focus-visible {
  outline: var(--at-border-width-100) solid var(--at-color-border-focused);
  outline-offset: 2px;
}

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

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.at-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--at-space-200);
  max-width: 1200px;
}
@media (min-width: 768px)  { .at-container { padding-inline: var(--at-space-400); } }
@media (min-width: 1280px) { .at-container { padding-inline: var(--at-space-800); max-width: 1200px; } }
@media (min-width: 1600px) { .at-container { max-width: 1440px; } }

.at-section { padding-block: var(--at-space-600); }
.at-section + .at-section { border-top: 1px solid var(--at-color-border); }
.at-stack { display: flex; flex-direction: column; gap: var(--at-space-200); }
.at-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-space-200); }
.at-row--tight { gap: var(--at-space-100); }

.at-eyebrow {
  font-size: var(--at-font-size-075);
  font-weight: var(--at-font-weight-medium);
  color: var(--at-color-text-subtlest);
  text-transform: none;
  letter-spacing: var(--at-font-letterSpacing-body);
  margin: 0 0 var(--at-space-050);
}
.at-lede { color: var(--at-color-text-subtle); font-size: var(--at-font-size-200); max-width: 68ch; }

/* Demo scaffolding: a labelled swatch block used on every page to show one state */
.at-demo {
  border: 1px solid var(--at-color-border);
  border-radius: var(--at-radius-100);
  background: var(--at-elevation-surface-raised);
  padding: var(--at-space-300);
  margin-block-end: var(--at-space-300);
}
.at-demo__title { font-size: var(--at-font-size-100); font-weight: var(--at-font-weight-semibold); margin: 0 0 var(--at-space-050); }
.at-demo__desc { font-size: var(--at-font-size-100); color: var(--at-color-text-subtle); margin: 0 0 var(--at-space-200); }
.at-demo__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-space-200); }
.at-demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--at-space-200); }
.at-swatch-label { font-size: var(--at-font-size-075); color: var(--at-color-text-subtlest); margin-top: var(--at-space-050); }

/* ---------------------------------------------------------------------------
   TOP BAR (shared chrome on every component page)
   --------------------------------------------------------------------------- */
.at-topbar {
  position: sticky;
  top: 0;
  z-index: var(--at-zIndex-navigation);
  background: var(--at-elevation-surface);
  border-bottom: 1px solid var(--at-color-border);
}
.at-topbar__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--at-space-300);
  padding: var(--at-space-150) var(--at-space-200);
  flex-wrap: wrap;
}
@media (min-width: 768px) { .at-topbar__inner { padding-inline: var(--at-space-400); } }

.at-topbar__brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.at-topbar__logo { height: 32px; width: auto; }
.at-topbar__logo--dark { display: none; }
[data-theme="dark"] .at-topbar__logo--light { display: none; }
[data-theme="dark"] .at-topbar__logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .at-topbar__logo--light { display: none; }
  :root:not([data-theme="light"]) .at-topbar__logo--dark { display: block; }
}

.at-topbar__nav { display: flex; flex-wrap: wrap; gap: var(--at-space-300); margin-inline-end: auto; font-size: var(--at-font-size-100); }
.at-topbar__nav a {
  color: var(--at-color-text-subtle);
  text-decoration: none;
  padding-block: var(--at-space-050);
  border-bottom: 2px solid transparent;
  font-weight: var(--at-font-weight-medium);
}
.at-topbar__nav a:hover { color: var(--at-color-text); }
.at-topbar__nav a[aria-current="page"] { color: var(--at-color-text-selected); border-bottom-color: var(--at-color-border-brand); border-radius: 0; }

.at-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--at-space-100);
  font: inherit;
  font-size: var(--at-font-size-100);
  font-weight: var(--at-font-weight-medium);
  color: var(--at-color-text);
  background: var(--at-color-background-neutral);
  border: none;
  border-radius: var(--at-radius-050);
  padding: var(--at-space-100) var(--at-space-150);
  min-height: 36px;
  cursor: pointer;
  flex: none;
  transition: background-color var(--at-motion-duration-fast) var(--at-motion-easing-standard);
}
.at-theme-toggle:hover { background: var(--at-color-background-neutral-hovered); }
.at-theme-toggle:active { background: var(--at-color-background-neutral-pressed); }
.at-theme-toggle__icon { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------------------
   ICONS
   24x24 grid, outline, stroke=currentColor per foundations/iconography.md
   --------------------------------------------------------------------------- */
.at-icon { color: var(--at-color-icon); flex: none; display: inline-block; }
.at-icon--16 { width: 16px; height: 16px; }
.at-icon--20 { width: 20px; height: 20px; }
.at-icon--24 { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */
.at-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--at-space-100);
  font-family: var(--at-font-family-body);
  font-weight: var(--at-font-weight-semibold);
  font-size: var(--at-font-size-100);
  line-height: 1;
  padding: var(--at-space-150) var(--at-space-250);
  min-height: 44px;
  border-radius: var(--at-radius-050);
  border: 1px solid transparent;
  background: var(--at-color-background-neutral);
  color: var(--at-color-text);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background-color var(--at-motion-duration-fast) var(--at-motion-easing-standard),
              border-color var(--at-motion-duration-fast) var(--at-motion-easing-standard),
              color var(--at-motion-duration-fast) var(--at-motion-easing-standard),
              box-shadow var(--at-motion-duration-fast) var(--at-motion-easing-standard),
              filter var(--at-motion-duration-fast) var(--at-motion-easing-standard);
}
.at-btn:hover { background: var(--at-color-background-neutral-hovered); }
.at-btn:active { background: var(--at-color-background-neutral-pressed); }
.at-btn:disabled, .at-btn[aria-disabled="true"] {
  background: var(--at-color-background-disabled);
  color: var(--at-color-text-disabled);
  cursor: not-allowed;
}

.at-btn--compact { padding: var(--at-space-100) var(--at-space-150); min-height: 32px; font-size: var(--at-font-size-100); }

.at-btn--primary { background: var(--at-color-background-brand-bold); color: var(--at-color-text-inverse); }
.at-btn--primary:hover { background: var(--at-color-background-brand-bold-hovered); }
.at-btn--primary:active { background: var(--at-color-background-brand-bold-pressed); }
.at-btn--primary:disabled { background: var(--at-color-background-disabled); color: var(--at-color-text-disabled); }

.at-btn--secondary { background: transparent; color: var(--at-color-text); border-color: var(--at-color-border-input); }
.at-btn--secondary:hover { background: var(--at-color-background-neutral); }
.at-btn--secondary:active { background: var(--at-color-background-neutral-hovered); }
.at-btn--secondary:disabled { background: transparent; border-color: var(--at-color-border-disabled); color: var(--at-color-text-disabled); }

.at-btn--subtle { background: transparent; color: var(--at-color-text); }
.at-btn--subtle:hover { background: var(--at-color-background-neutral); }
.at-btn--subtle:active { background: var(--at-color-background-neutral-hovered); }
.at-btn--subtle:disabled { background: transparent; color: var(--at-color-text-disabled); }

.at-btn--link { background: transparent; color: var(--at-color-link); padding-inline: var(--at-space-050); font-weight: var(--at-font-weight-medium); }
.at-btn--link:hover { color: var(--at-color-link-pressed); text-decoration: underline; background: transparent; }
.at-btn--link:active { color: var(--at-color-link-pressed); background: transparent; }
.at-btn--link:disabled { background: transparent; color: var(--at-color-text-disabled); }

/* Danger/warning bold fills have no .hovered/.pressed token, so state changes use
   filter() on the existing token colour rather than a new literal - see report. */
.at-btn--danger { background: var(--at-color-background-danger-bold); color: var(--at-color-text-inverse); }
.at-btn--danger:hover { filter: brightness(0.92); }
.at-btn--danger:active { filter: brightness(0.84); }
.at-btn--danger:disabled { background: var(--at-color-background-disabled); color: var(--at-color-text-disabled); filter: none; }

.at-btn--warning { background: var(--at-color-background-warning-bold); color: var(--at-color-text); }
[data-theme="dark"] .at-btn--warning { color: var(--at-color-text-inverse); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .at-btn--warning { color: var(--at-color-text-inverse); } }
.at-btn--warning:hover { filter: brightness(0.94); }
.at-btn--warning:active { filter: brightness(0.86); }
.at-btn--warning:disabled { background: var(--at-color-background-disabled); color: var(--at-color-text-disabled); filter: none; }

.at-btn--icon-only { padding: var(--at-space-100); width: 44px; min-height: 44px; }
.at-btn--icon-only.at-btn--compact { width: 32px; min-height: 32px; padding: var(--at-space-050); }

.at-btn-group { display: inline-flex; gap: var(--at-space-025); flex-wrap: wrap; }

.at-btn__spinner { display: none; }
.at-btn[aria-busy="true"] .at-btn__label { visibility: hidden; }
.at-btn[aria-busy="true"] .at-btn__spinner {
  display: inline-flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.at-btn[aria-busy="true"] { cursor: progress; }

.at-spinner {
  width: 16px;
  height: 16px;
  border-radius: var(--at-radius-circle);
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: at-spin var(--at-motion-duration-deliberate) linear infinite;
}
@keyframes at-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------------- */
.at-field { display: flex; flex-direction: column; gap: var(--at-space-050); margin-block-end: var(--at-space-200); max-width: 420px; }
.at-field--wide { max-width: none; }
.at-field__label { font-size: var(--at-font-size-100); font-weight: var(--at-font-weight-medium); color: var(--at-color-text); display: inline-flex; gap: var(--at-space-050); }
.at-field__required { color: var(--at-color-text-danger); }
.at-field__help { font-size: var(--at-font-size-075); color: var(--at-color-text-subtle); margin: 0; }
.at-field__error, .at-field__success { display: flex; align-items: center; gap: var(--at-space-050); font-size: var(--at-font-size-075); margin: 0; }
.at-field__error { color: var(--at-color-text-danger); }
.at-field__success { color: var(--at-color-text-success); }

.at-input, .at-textarea, .at-select {
  font: inherit;
  font-size: var(--at-font-size-200);
  color: var(--at-color-text);
  background: var(--at-color-background-input);
  border: var(--at-border-width-050) solid var(--at-color-border-input);
  border-radius: var(--at-radius-050);
  padding: var(--at-space-100) var(--at-space-150);
  min-height: 44px;
  width: 100%;
  transition: border-color var(--at-motion-duration-fast) var(--at-motion-easing-standard),
              box-shadow var(--at-motion-duration-fast) var(--at-motion-easing-standard);
}
.at-input::placeholder, .at-textarea::placeholder { color: var(--at-color-text-subtlest); }
.at-input:hover, .at-textarea:hover, .at-select:hover { border-color: var(--at-color-border-bold); }
.at-input:focus-visible, .at-textarea:focus-visible, .at-select:focus-visible {
  outline: var(--at-border-width-100) solid var(--at-color-border-focused);
  outline-offset: 1px;
  border-color: var(--at-color-border-focused);
}
.at-input:disabled, .at-textarea:disabled, .at-select:disabled {
  background: var(--at-color-background-disabled);
  color: var(--at-color-text-disabled);
  border-color: var(--at-color-border-disabled);
  cursor: not-allowed;
}
.at-textarea { min-height: 96px; resize: vertical; }

/* No color.border.danger/success token exists - the field border borrows the
   matching text role token as the nearest semantic colour. Flagged in report. */
.at-field--error .at-input, .at-field--error .at-textarea, .at-field--error .at-select { border-color: var(--at-color-text-danger); }
.at-field--success .at-input, .at-field--success .at-textarea, .at-field--success .at-select { border-color: var(--at-color-text-success); }

.at-select-wrap { position: relative; }
.at-select { appearance: none; padding-inline-end: var(--at-space-400); }
.at-select-wrap .at-icon { position: absolute; right: var(--at-space-150); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--at-color-icon-subtle); }

/* Checkbox */
.at-checkbox, .at-radio { display: inline-flex; align-items: center; gap: var(--at-space-100); cursor: pointer; font-size: var(--at-font-size-200); color: var(--at-color-text); min-height: 44px; }
.at-checkbox__control, .at-radio__control { position: relative; width: 20px; height: 20px; flex: none; }
.at-checkbox__input, .at-radio__input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.at-checkbox__box {
  position: absolute; inset: 0;
  border-radius: var(--at-radius-050);
  border: var(--at-border-width-050) solid var(--at-color-border-input);
  background: var(--at-color-background-input);
  pointer-events: none;
  transition: background-color var(--at-motion-duration-instant) var(--at-motion-easing-standard), border-color var(--at-motion-duration-instant) var(--at-motion-easing-standard);
}
.at-checkbox__input:checked ~ .at-checkbox__box { background: var(--at-color-background-brand-bold); border-color: var(--at-color-background-brand-bold); }
.at-checkbox__input:checked ~ .at-checkbox__box::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--at-color-text-inverse); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.at-checkbox__input:disabled ~ .at-checkbox__box { background: var(--at-color-background-disabled); border-color: var(--at-color-border-disabled); }
.at-checkbox__input:disabled ~ .at-checkbox__box::after { border-color: var(--at-color-text-disabled); }
.at-checkbox__input:disabled { cursor: not-allowed; }
.at-checkbox:has(.at-checkbox__input:disabled) { color: var(--at-color-text-disabled); cursor: not-allowed; }
.at-checkbox__input:focus-visible ~ .at-checkbox__box { outline: var(--at-border-width-100) solid var(--at-color-border-focused); outline-offset: 2px; }

/* Radio */
.at-radio__box {
  position: absolute; inset: 0;
  border-radius: var(--at-radius-circle);
  border: var(--at-border-width-050) solid var(--at-color-border-input);
  background: var(--at-color-background-input);
  pointer-events: none;
}
.at-radio__input:checked ~ .at-radio__box { border-color: var(--at-color-background-brand-bold); border-width: var(--at-border-width-100); }
.at-radio__input:checked ~ .at-radio__box::after {
  content: ""; position: absolute; inset: 5px; border-radius: var(--at-radius-circle); background: var(--at-color-background-brand-bold);
}
.at-radio__input:disabled ~ .at-radio__box { background: var(--at-color-background-disabled); border-color: var(--at-color-border-disabled); }
.at-radio:has(.at-radio__input:disabled) { color: var(--at-color-text-disabled); cursor: not-allowed; }
.at-radio__input:focus-visible ~ .at-radio__box { outline: var(--at-border-width-100) solid var(--at-color-border-focused); outline-offset: 2px; }

/* Toggle / switch */
.at-toggle { display: inline-flex; align-items: center; gap: var(--at-space-100); cursor: pointer; min-height: 44px; color: var(--at-color-text); }
.at-toggle__control { position: relative; width: 36px; height: 20px; flex: none; }
.at-toggle__input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.at-toggle__track {
  position: absolute; inset: 0; border-radius: var(--at-radius-circle);
  background: var(--at-color-background-neutral-bold);
  transition: background-color var(--at-motion-duration-fast) var(--at-motion-easing-standard);
}
.at-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--at-radius-circle);
  background: var(--at-color-text-inverse);
  transition: transform var(--at-motion-duration-fast) var(--at-motion-easing-standard);
}
.at-toggle__input:checked ~ .at-toggle__track { background: var(--at-color-background-brand-bold); }
.at-toggle__input:checked ~ .at-toggle__track .at-toggle__thumb,
.at-toggle__input:checked ~ .at-toggle__track ~ .at-toggle__thumb { transform: translateX(16px); }
.at-toggle__input:checked ~ .at-toggle__track { }
.at-toggle__input:disabled ~ .at-toggle__track { background: var(--at-color-background-disabled); }
.at-toggle:has(.at-toggle__input:disabled) { color: var(--at-color-text-disabled); cursor: not-allowed; }
.at-toggle__input:focus-visible ~ .at-toggle__track { outline: var(--at-border-width-100) solid var(--at-color-border-focused); outline-offset: 2px; }

/* Range */
.at-range { width: 100%; accent-color: var(--at-color-background-brand-bold); min-height: 44px; }

/* Form example card */
.at-form-example {
  background: var(--at-elevation-surface-raised);
  box-shadow: var(--at-elevation-shadow-raised);
  border-radius: var(--at-radius-100);
  padding: var(--at-space-300);
  max-width: 480px;
}
.at-form-example__actions { display: flex; gap: var(--at-space-150); margin-top: var(--at-space-300); }

/* ---------------------------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------------------------- */
.at-tabs { display: flex; gap: var(--at-space-300); border-bottom: 1px solid var(--at-color-border); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.at-tabs__item {
  padding: var(--at-space-150) var(--at-space-050);
  color: var(--at-color-text-subtle);
  text-decoration: none;
  border-bottom: var(--at-border-width-100) solid transparent;
  border-radius: 0;
  font-size: var(--at-font-size-100);
  font-weight: var(--at-font-weight-medium);
  background: none;
  border-top: none; border-inline: none;
  cursor: pointer;
  font-family: inherit;
}
.at-tabs__item:hover { color: var(--at-color-text); }
.at-tabs__item[aria-selected="true"] { color: var(--at-color-text-selected); border-bottom-color: var(--at-color-border-brand); }

.at-sidenav { display: flex; flex-direction: column; gap: var(--at-space-025); min-width: 200px; list-style: none; margin: 0; padding: 0; }
.at-sidenav__item {
  display: flex; align-items: center; gap: var(--at-space-100);
  padding: var(--at-space-100) var(--at-space-150);
  border-radius: var(--at-radius-050);
  color: var(--at-color-text-subtle);
  text-decoration: none;
  font-size: var(--at-font-size-100);
  border-inline-start: var(--at-border-width-100) solid transparent;
}
.at-sidenav__item:hover { background: var(--at-color-background-neutral); color: var(--at-color-text); }
.at-sidenav__item[aria-current="page"] {
  background: var(--at-color-background-selected);
  color: var(--at-color-text-selected);
  border-inline-start-color: var(--at-color-border-brand);
  font-weight: var(--at-font-weight-medium);
}

.at-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-space-050); font-size: var(--at-font-size-100); color: var(--at-color-text-subtle); list-style: none; margin: 0; padding: 0; }
.at-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--at-space-050); margin: 0; }
.at-breadcrumbs a { color: var(--at-color-text-subtle); text-decoration: none; }
.at-breadcrumbs a:hover { color: var(--at-color-link); text-decoration: underline; }
.at-breadcrumbs [aria-current="page"] { color: var(--at-color-text); }
.at-breadcrumbs__sep { color: var(--at-color-text-subtlest); }

.at-pagination { display: flex; gap: var(--at-space-050); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.at-pagination a, .at-pagination button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px; padding: 0 var(--at-space-100);
  border-radius: var(--at-radius-050);
  color: var(--at-color-text-subtle);
  text-decoration: none;
  font-size: var(--at-font-size-100);
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.at-pagination a:hover, .at-pagination button:hover { background: var(--at-color-background-neutral); color: var(--at-color-text); }
.at-pagination [aria-current="page"] { background: var(--at-color-background-selected); color: var(--at-color-text-selected); font-weight: var(--at-font-weight-medium); }
.at-pagination button:disabled { color: var(--at-color-text-disabled); cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   FEEDBACK
   --------------------------------------------------------------------------- */
.at-banner { display: flex; gap: var(--at-space-150); padding: var(--at-space-200); border-radius: var(--at-radius-100); background: var(--at-color-background-information); margin-block-end: var(--at-space-200); }
.at-banner__icon { color: var(--at-color-icon-information); }
.at-banner__title { font-weight: var(--at-font-weight-semibold); color: var(--at-color-text-information); margin: 0 0 var(--at-space-050); }
.at-banner__text { color: var(--at-color-text-information); margin: 0; font-size: var(--at-font-size-100); }
.at-banner--warning { background: var(--at-color-background-warning); }
.at-banner--warning .at-banner__icon { color: var(--at-color-icon-warning); }
.at-banner--warning .at-banner__title, .at-banner--warning .at-banner__text { color: var(--at-color-text-warning); }
.at-banner--danger { background: var(--at-color-background-danger); }
.at-banner--danger .at-banner__icon { color: var(--at-color-icon-danger); }
.at-banner--danger .at-banner__title, .at-banner--danger .at-banner__text { color: var(--at-color-text-danger); }
.at-banner--success { background: var(--at-color-background-success); }
.at-banner--success .at-banner__icon { color: var(--at-color-icon-success); }
.at-banner--success .at-banner__title, .at-banner--success .at-banner__text { color: var(--at-color-text-success); }
.at-banner__close { margin-inline-start: auto; background: none; border: none; cursor: pointer; color: inherit; padding: var(--at-space-050); flex: none; }

.at-inline-message { display: inline-flex; align-items: center; gap: var(--at-space-050); font-size: var(--at-font-size-075); }
.at-inline-message--danger { color: var(--at-color-text-danger); }
.at-inline-message--warning { color: var(--at-color-text-warning); }
.at-inline-message--success { color: var(--at-color-text-success); }
.at-inline-message--information { color: var(--at-color-text-information); }

.at-toast-region { position: fixed; left: 50%; bottom: var(--at-space-400); transform: translateX(-50%); z-index: var(--at-zIndex-flag); display: flex; flex-direction: column; gap: var(--at-space-100); align-items: center; pointer-events: none; }
.at-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--at-space-150);
  background: var(--at-elevation-surface-overlay);
  box-shadow: var(--at-elevation-shadow-overlay);
  border-radius: var(--at-radius-100);
  padding: var(--at-space-150) var(--at-space-200);
  font-size: var(--at-font-size-100);
  color: var(--at-color-text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--at-motion-duration-base) var(--at-motion-easing-emphasized), transform var(--at-motion-duration-base) var(--at-motion-easing-emphasized);
}
.at-toast--visible { opacity: 1; transform: translateY(0); }
.at-toast__icon { color: var(--at-color-icon-success); }

.at-tooltip-wrap { position: relative; display: inline-flex; }
.at-tooltip {
  position: absolute; bottom: calc(100% + var(--at-space-100)); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--at-color-background-inverse-subtle);
  color: var(--at-color-text-inverse);
  font-size: var(--at-font-size-075);
  padding: var(--at-space-050) var(--at-space-100);
  border-radius: var(--at-radius-100);
  box-shadow: var(--at-elevation-shadow-overlay);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--at-motion-duration-fast) var(--at-motion-easing-standard), transform var(--at-motion-duration-fast) var(--at-motion-easing-standard);
  z-index: var(--at-zIndex-tooltip);
}
.at-tooltip-wrap:hover .at-tooltip,
.at-tooltip-wrap:focus-within .at-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

.at-progress { width: 100%; height: var(--at-space-100); border-radius: var(--at-radius-circle); background: var(--at-color-background-neutral); overflow: hidden; }
.at-progress__fill { height: 100%; background: var(--at-color-background-brand-bold); border-radius: var(--at-radius-circle); transition: width var(--at-motion-duration-slow) var(--at-motion-easing-standard); }
.at-progress--indeterminate .at-progress__fill { width: 40% !important; animation: at-progress-indeterminate 1.4s linear infinite; }
@keyframes at-progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

.at-skeleton { background: var(--at-color-skeleton); border-radius: var(--at-radius-050); opacity: var(--at-opacity-loading); animation: at-skeleton-pulse var(--at-motion-duration-deliberate) ease-in-out infinite alternate; }
@keyframes at-skeleton-pulse { from { opacity: var(--at-opacity-loading); } to { opacity: 0.35; } }

.at-blanket { position: fixed; inset: 0; background: var(--at-color-background-inverse-subtle); z-index: var(--at-zIndex-blanket); opacity: 0; pointer-events: none; transition: opacity var(--at-motion-duration-slow) var(--at-motion-easing-standard); }
.at-blanket--visible { opacity: 1; pointer-events: auto; }
.at-modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -48%);
  width: min(480px, calc(100vw - var(--at-space-400)));
  background: var(--at-elevation-surface-overlay);
  box-shadow: var(--at-elevation-shadow-overlay);
  border-radius: var(--at-radius-200);
  z-index: var(--at-zIndex-modal);
  padding: var(--at-space-400);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--at-motion-duration-slow) var(--at-motion-easing-emphasized), transform var(--at-motion-duration-slow) var(--at-motion-easing-emphasized);
}
.at-modal--visible { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.at-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--at-space-200); margin-bottom: var(--at-space-300); }
.at-modal__title { margin: 0; font-family: var(--at-font-family-body); font-size: var(--at-font-size-400); font-weight: var(--at-font-weight-semibold); }
.at-modal__body { color: var(--at-color-text-subtle); margin-bottom: var(--at-space-300); }
.at-modal__footer { display: flex; justify-content: flex-end; gap: var(--at-space-150); }

@media (forced-colors: active) {
  .at-modal, .at-tooltip, .at-toast { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------------------
   DATA
   --------------------------------------------------------------------------- */
.at-table-wrap { overflow-x: auto; border-radius: var(--at-radius-100); border: 1px solid var(--at-color-border); }
.at-table { width: 100%; border-collapse: collapse; font-size: var(--at-font-size-100); min-width: 560px; }
.at-table caption { text-align: left; padding: var(--at-space-150) var(--at-space-200); color: var(--at-color-text-subtle); font-size: var(--at-font-size-075); }
.at-table th, .at-table td { padding: var(--at-space-100) var(--at-space-150); text-align: left; border-bottom: 1px solid var(--at-color-border); }
.at-table thead th { background: var(--at-elevation-surface-sunken); font-weight: var(--at-font-weight-medium); color: var(--at-color-text-subtle); position: sticky; top: 0; }
.at-table th[aria-sort] { cursor: pointer; user-select: none; }
.at-table th[aria-sort] .at-icon { vertical-align: -3px; margin-inline-start: var(--at-space-050); }
.at-table tbody tr:nth-child(even) { background: var(--at-color-background-neutral-subtle); }
.at-table tbody tr:hover { background: var(--at-color-background-neutral); }
.at-table tbody tr[aria-selected="true"] { background: var(--at-color-background-selected); box-shadow: inset 2px 0 0 var(--at-color-border-brand); }
.at-table tbody tr[aria-selected="true"] td { color: var(--at-color-text-selected); }

.at-badge, .at-lozenge, .at-tag {
  display: inline-flex; align-items: center; gap: var(--at-space-050);
  font-size: var(--at-font-size-075);
  font-weight: var(--at-font-weight-medium);
  padding: var(--at-space-025) var(--at-space-100);
  border-radius: var(--at-radius-050);
  background: var(--at-color-background-neutral);
  color: var(--at-color-text);
  line-height: 1.6;
}
.at-badge--brand, .at-lozenge--brand { background: var(--at-color-background-information); color: var(--at-color-text-information); }
.at-badge--success, .at-lozenge--success { background: var(--at-color-background-success); color: var(--at-color-text-success); }
.at-badge--warning, .at-lozenge--warning { background: var(--at-color-background-warning); color: var(--at-color-text-warning); }
.at-badge--danger, .at-lozenge--danger { background: var(--at-color-background-danger); color: var(--at-color-text-danger); }
.at-badge--bold { background: var(--at-color-background-neutral-bold); color: var(--at-color-text-inverse); }
.at-badge--bold.at-badge--brand { background: var(--at-color-background-information-bold); color: var(--at-color-text-inverse); }
.at-badge--bold.at-badge--success { background: var(--at-color-background-success-bold); color: var(--at-color-text-inverse); }
.at-badge--bold.at-badge--warning { background: var(--at-color-background-warning-bold); color: var(--at-color-text); }
[data-theme="dark"] .at-badge--bold.at-badge--warning { color: var(--at-color-text-inverse); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .at-badge--bold.at-badge--warning { color: var(--at-color-text-inverse); } }
.at-badge--bold.at-badge--danger { background: var(--at-color-background-danger-bold); color: var(--at-color-text-inverse); }

.at-tag { background: var(--at-color-background-neutral); gap: var(--at-space-050); }
.at-tag__remove { background: none; border: none; color: var(--at-color-icon-subtle); cursor: pointer; display: inline-flex; padding: 0; }
.at-tag__remove:hover { color: var(--at-color-icon); }

.at-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--at-radius-circle);
  background: var(--at-color-background-brand-bold);
  color: var(--at-color-text-inverse);
  font-size: var(--at-font-size-075);
  font-weight: var(--at-font-weight-semibold);
  flex: none;
}
.at-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.at-avatar--lg { width: 48px; height: 48px; font-size: var(--at-font-size-100); }

.at-empty-state { text-align: center; padding: var(--at-space-600) var(--at-space-300); color: var(--at-color-text-subtle); }
.at-empty-state .at-icon { color: var(--at-color-icon-subtlest); margin-inline: auto; margin-block-end: var(--at-space-200); }
.at-empty-state h3 { color: var(--at-color-text); }

.at-card {
  background: var(--at-elevation-surface-raised);
  box-shadow: var(--at-elevation-shadow-raised);
  border-radius: var(--at-radius-100);
  padding: var(--at-space-300);
}
.at-card:hover { box-shadow: var(--at-elevation-shadow-overlay); }
.at-card h4 { margin-bottom: var(--at-space-050); }
.at-card p { margin: 0; color: var(--at-color-text-subtle); font-size: var(--at-font-size-100); }
.at-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--at-space-300); }

/* ---------------------------------------------------------------------------
   LAYOUT DEMOS
   --------------------------------------------------------------------------- */
.at-grid-demo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--at-space-200); }
.at-grid-demo > div { background: var(--at-color-background-information); color: var(--at-color-text-information); border-radius: var(--at-radius-050); padding: var(--at-space-100); text-align: center; font-size: var(--at-font-size-075); }
@media (min-width: 768px)  { .at-grid-demo { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .at-grid-demo { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.at-space-swatch { display: flex; align-items: center; gap: var(--at-space-200); margin-block-end: var(--at-space-100); }
.at-space-swatch__bar { background: var(--at-color-background-brand-bold); height: 16px; border-radius: var(--at-radius-050); flex: none; }
.at-space-swatch__label { font-size: var(--at-font-size-075); color: var(--at-color-text-subtle); font-family: var(--at-font-family-code); min-width: 160px; }

.at-surface-demo { padding: var(--at-space-300); border-radius: var(--at-radius-100); text-align: center; font-size: var(--at-font-size-075); color: var(--at-color-text-subtle); }
.at-surface-demo--surface { background: var(--at-elevation-surface); border: 1px solid var(--at-color-border); }
.at-surface-demo--raised { background: var(--at-elevation-surface-raised); box-shadow: var(--at-elevation-shadow-raised); }
.at-surface-demo--overlay { background: var(--at-elevation-surface-overlay); box-shadow: var(--at-elevation-shadow-overlay); }
.at-surface-demo--sunken { background: var(--at-elevation-surface-sunken); }

.at-radius-demo { display: flex; align-items: center; justify-content: center; width: 96px; height: 64px; background: var(--at-color-background-brand-bold); color: var(--at-color-text-inverse); font-size: var(--at-font-size-075); }

/* ---------------------------------------------------------------------------
   TYPOGRAPHY DEMOS
   --------------------------------------------------------------------------- */
.at-type-row { display: flex; align-items: baseline; gap: var(--at-space-300); padding-block: var(--at-space-150); border-bottom: 1px solid var(--at-color-border); flex-wrap: wrap; }
.at-type-row__meta { font-size: var(--at-font-size-075); color: var(--at-color-text-subtlest); font-family: var(--at-font-family-code); min-width: 220px; }
.at-display { font-family: var(--at-font-family-display); font-weight: var(--at-font-weight-extrabold); letter-spacing: var(--at-font-letterSpacing-display); line-height: var(--at-font-lineHeight-heading); }
.at-h1 { font-family: var(--at-font-family-display); font-size: var(--at-font-size-600); font-weight: var(--at-font-weight-bold); letter-spacing: var(--at-font-letterSpacing-heading); line-height: var(--at-font-lineHeight-heading); margin: 0; }
.at-h2 { font-family: var(--at-font-family-display); font-size: var(--at-font-size-500); font-weight: var(--at-font-weight-bold); letter-spacing: var(--at-font-letterSpacing-heading); line-height: var(--at-font-lineHeight-heading); margin: 0; }
.at-h3 { font-family: var(--at-font-family-body); font-size: var(--at-font-size-400); font-weight: var(--at-font-weight-semibold); letter-spacing: var(--at-font-letterSpacing-heading); line-height: var(--at-font-lineHeight-heading); margin: 0; }
.at-h4 { font-family: var(--at-font-family-body); font-size: var(--at-font-size-300); font-weight: var(--at-font-weight-semibold); line-height: var(--at-font-lineHeight-heading); margin: 0; }

/* link back to the main site (GMNotebookSources) */
.at-topbar__home { font-weight: 600; color: var(--at-color-text-brand); }