/* App-level styles. Design system lives in css/design/*.
   Styleguide helpers below. */

.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.swatch { border: var(--border); border-radius: var(--radius); height: 64px; display: flex; align-items: flex-end; padding: 6px; font-size: 11px; font-weight: 700; }
.specimen { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

@media (max-width: 880px) {
  .swatches { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Auth pages (login / register) ---------- */
.auth-page { display: flex; justify-content: center; padding: var(--space-6) var(--space-3); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card__title { margin: 0 0 4px; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.auth-form__errors { color: var(--c-coral); font-weight: 600; font-size: 14px; }
.auth-form__errors ul { margin: 0; padding-left: 18px; }
.auth-form__errors:empty { display: none; }
.field__error { color: var(--c-coral); font-size: 13px; }
.auth-card__alt { margin-top: var(--space-4); text-align: center; }
.auth-card__guest-note {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border); border-radius: var(--radius);
  background: var(--c-gold);
  font-size: 14px; font-weight: 600;
}

/* Social sign-in */
.auth-social { margin-top: var(--space-4); }
.auth-social__divider {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--c-ink); opacity: .55; font-size: 13px; margin-bottom: var(--space-3);
}
.auth-social__divider::before,
.auth-social__divider::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .4;
}
.auth-social__form { display: flex; flex-direction: column; gap: var(--space-2); }
.auth-social__btn--primary { font-weight: 600; }
.auth-social__another-account { margin: var(--space-2) 0 0; text-align: center; }
.auth-social__another-account-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--c-muted); text-decoration: underline;
}
.auth-social__another-account-btn:hover { color: var(--c-ink); }

/* Sign-out button in the app sidebar (POST form, antiforgery-protected). */
.app-sidebar__signout-form { display: inline-block; margin-top: 2px; }
.app-sidebar__signout {
  font-size: 13px;
  color: var(--c-muted);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.app-sidebar__signout:hover { color: var(--c-ink); }

/* ---------- Handbook (5.1) — rules shared by the Index/Pillar/Article views;
   view-specific rules stay in each view's Styles section. ---------- */
.hb-breadcrumb { font-size: 13px; margin-bottom: var(--space-3); }
.hb-breadcrumb a { color: inherit; }
.hb-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  background: var(--c-gold);
  margin: var(--space-7) 0;
}