/* site.css — additions for Agent Accessibility Patterns, built on brand.css tokens. */


/* brand.css gives .btn a display value, which beats the UA [hidden] rule. */
[hidden] { display: none !important; }
.site-nav__links a[aria-current="page"] { color: var(--color-text); }

.wcag-level { color: var(--color-text-subtle); }

/* Build-it notes per pattern */
.build {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.build__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}
.build__list { display: grid; grid-template-columns: 1fr; gap: var(--space-3xs) var(--space-sm); }
.build__list dt { font-weight: var(--weight-semibold); margin-top: var(--space-2xs); }
.build__list dt:first-child { margin-top: 0; }
.build__list dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .build__list { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .build__list dt { margin-top: 0; }
}
.build code, .principle__body code { overflow-wrap: anywhere; }

/* Anti-patterns */
.anti-section { margin-top: var(--space-2xl); scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }
.anti-section > h2 { scroll-margin-top: calc(var(--nav-height) + var(--space-md)); }
.anti-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.anti {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  scroll-margin-top: calc(var(--nav-height) + var(--space-md));
}
.anti > * + * { margin-top: var(--space-2xs); }
.anti__title { font-size: var(--text-lg); }
.anti__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.anti:target, .principle:target { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-md); }

.checklist { padding-left: 1.4em; margin-top: var(--space-md); }
.checklist li + li, .sources li + li { margin-top: var(--space-2xs); }
.sources { padding-left: 1.2em; margin-top: var(--space-md); }

.principle-index__list--plain a::before { content: "" !important; }
.principle-index__list--plain a { grid-template-columns: 0 1fr; }

@media (forced-colors: active) {
  .anti { border-left-width: 1px; }
}

/* Small screens and high zoom: let the nav wrap, and stop it sticking so it
   can't cover focused content (WCAG 2.4.11). */
@media (max-width: 40rem) {
  .site-nav__inner { height: auto; flex-wrap: wrap; padding-block: var(--space-2xs); gap: var(--space-3xs) var(--space-md); }
  .site-nav__links { gap: var(--space-sm); flex-wrap: wrap; }
}
@media (max-width: 40rem), (max-height: 32rem) {
  .site-nav { position: static; }
  html { scroll-padding-top: var(--space-sm); }
  .principle, .anti, .anti-section, .anti-section > h2, .demo-section { scroll-margin-top: var(--space-sm); }
}

/* Pattern index disclosure: a button-like summary on small screens, invisible on wide ones. */
.principle-index__summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-border-ui);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: inline-block;
}
.principle-index__details[open] > .principle-index__summary { margin-bottom: var(--space-sm); }
@media (min-width: 60rem) {
  .principle-index__summary { display: none; }
}