/* Association Core core components.
   Unlayered and scoped under .ac-plugin (specificity 0-2-x) so each rule beats
   BOTH the active theme's element styles (0-0-x) AND the base reset's
   .ac-plugin-descendant rules (0-1-x) — e.g. .ac-plugin .ac-button (0-2-0)
   must beat .ac-plugin a (0-1-1) because buttons are <a> elements, else the
   link-color reset makes button text render dark-on-dark.
   Client override pattern (no !important needed): a `.ac-plugin .ac-foo {…}`
   rule in Customizer Additional CSS ties on specificity and wins by source
   order (it loads after plugin styles). */

.ac-plugin .ac-button {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .92rem; line-height: 1;
  padding: .62rem 1.05rem; border-radius: var(--ac-button-radius);
  background: var(--ac-primary); color: var(--ac-primary-ink); border: 1px solid var(--ac-primary);
  text-decoration: none; transition: transform .12s, box-shadow .15s, background .15s;
}
.ac-plugin .ac-button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(27,37,48,.45); }
.ac-plugin .ac-button:focus-visible { outline: 2px solid var(--ac-primary); outline-offset: 2px; }
.ac-plugin .ac-button-muted { background: transparent; color: var(--ac-primary); border-color: var(--ac-line); }
.ac-plugin .ac-button-muted:hover { background: var(--ac-soft); box-shadow: none; }
/* .ac-form-submit is used as both <button> and <a>; the anchor form loses its
   text color to .ac-plugin a (0-1-1) — scope it (0-2-0) so the label stays white. */
.ac-plugin .ac-form-submit { color: var(--ac-primary-ink); text-decoration: none; }
.ac-plugin .ac-form-submit:hover { color: var(--ac-primary-ink); }
/* button variants used in views: secondary/muted (quiet), danger (destructive) */
.ac-plugin .ac-button--secondary, .ac-plugin .ac-button--muted { background: var(--ac-soft); border-color: var(--ac-line); color: var(--ac-ink); }
.ac-plugin .ac-button--muted { color: var(--ac-muted); }
.ac-plugin .ac-button--secondary:hover, .ac-plugin .ac-button--secondary:focus, .ac-plugin .ac-button--muted:hover { background: color-mix(in srgb, var(--ac-ink) 7%, var(--ac-soft)); box-shadow: none; }
.ac-plugin .ac-button--danger { background: var(--ac-crit-soft); border-color: color-mix(in srgb, var(--ac-crit) 40%, transparent); color: var(--ac-crit); }
.ac-plugin .ac-button--danger:hover, .ac-plugin .ac-button--danger:focus { background: color-mix(in srgb, var(--ac-crit) 16%, transparent); box-shadow: none; }
.ac-plugin .ac-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
/* breathing room for card headings and for text following a button row */
.ac-plugin .ac-card > h2 { margin-bottom: 1rem; }
.ac-plugin .ac-actions + p, .ac-plugin .ac-actions + .ac-muted { margin-top: 1rem; }

.ac-plugin .ac-card {
  border: 1px solid var(--ac-line); border-radius: var(--ac-card-radius);
  padding: 1.4rem 1.5rem; background: var(--ac-surface); box-shadow: var(--ac-card-shadow);
}
.ac-plugin .ac-card-list { display: grid; gap: 1rem; }

.ac-plugin .ac-section > h2,
.ac-plugin .ac-section > .ac-section-heading > h2 { position: relative; padding-bottom: .55rem; margin-bottom: 1rem; }
.ac-plugin .ac-section > h2::after,
.ac-plugin .ac-section > .ac-section-heading > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--ac-accent); }

.ac-plugin .ac-badge {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; padding: .24rem .55rem; border-radius: 999px;
  background: var(--ac-soft); color: var(--ac-muted); border: 1px solid transparent;
}
.ac-plugin .ac-badge--featured { background: var(--ac-accent-soft); color: var(--ac-accent); border-color: color-mix(in srgb, var(--ac-accent) 30%, transparent); }
.ac-plugin .ac-badge--members  { background: transparent; color: var(--ac-primary); border-color: var(--ac-line); }
.ac-plugin .ac-badge--dues-paid { background: var(--ac-good-soft); color: var(--ac-good); }
.ac-plugin .ac-badge--dues-due, .ac-plugin .ac-badge--violation-open { background: var(--ac-warn-soft); color: var(--ac-warn); }
.ac-plugin .ac-badge--dues-overdue { background: var(--ac-crit-soft); color: var(--ac-crit); }
/* accent-filled tier badges (board-only documents, open ballots) — darken the
   accent toward ink so white text clears AA contrast on every preset. */
.ac-plugin .ac-badge--board, .ac-plugin .ac-badge--ballot-open {
  background: color-mix(in srgb, var(--ac-accent) 80%, #101418);
  color: #fff; border-color: transparent;
}

.ac-plugin .ac-input {
  width: 100%; font: inherit; font-size: .95rem; padding: .6rem .85rem;
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius-sm);
  background: var(--ac-surface); color: var(--ac-ink);
}
.ac-plugin .ac-input:focus { outline: 2px solid color-mix(in srgb, var(--ac-primary) 45%, transparent); outline-offset: 1px; border-color: var(--ac-primary); }

.ac-plugin .ac-message {
  color: var(--ac-muted); background: var(--ac-soft); border: 1px solid var(--ac-line);
  padding: .9rem 1rem; border-radius: var(--ac-radius-sm); font-size: .95rem;
}

/* Pager — shared by the client-side [data-ac-list] JS module and the server-side
   Association_Core_Helpers::render_pager(). Layout: Prev · "Page X of Y" · Next. */
.ac-plugin .ac-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.ac-plugin .ac-pager[hidden] { display: none; }
.ac-plugin .ac-pager__info { color: var(--ac-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.ac-plugin .ac-pager .ac-button[disabled], .ac-plugin .ac-pager .ac-button[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; box-shadow: none; pointer-events: none; }
/* Items hidden by the client-side list module. This [hidden] rule (0,2,1) outranks
   an authored display:flex/grid on the same item (0,2,0), so no !important needed. */
.ac-plugin [data-ac-list-item][hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .ac-plugin .ac-button { transition: none; } }