/* Access Quest Semantic Classes */

.aq-error {
  color: var(--wp--preset--color--error, #f0605f);
}

.aq-warning {
  color: var(--wp--preset--color--warning, #f2a93b);
}

.aq-success {
  color: var(--wp--preset--color--success, #46d389);
}

.aq-info {
  color: var(--wp--preset--color--info, #4fb4e6);
}

.aq-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.aq-hidden {
  display: none;
}

.aq-active {
  font-weight: 600;
}

.aq-empty {
  opacity: 0.7;
  font-style: italic;
}

/* Header account control */

.aq-account {
  position: relative;
}

/* Logged out: Log In and Register side by side, Register the stronger of the two. */
.aq-account--guest {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.aq-account__login.wp-element-button {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px currentColor; /* an outline that adds no height */
}

.aq-account__toggle {
  cursor: pointer;
  list-style: none;      /* kill the default <summary> triangle */
  white-space: nowrap;
}

.aq-account__toggle::-webkit-details-marker {
  display: none;
}

.aq-account__toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  border: 0.3em solid transparent;
  border-top-color: currentColor;
  transform: translateY(0.15em);
}

.aq-account[open] .aq-account__toggle::after {
  transform: translateY(-0.15em) rotate(180deg);
}

/* Colours and radius come from the theme's presets, so whatever the producer sets
   in Global Styles reaches this menu. The literals are only fallbacks for when a
   preset isn't defined. */
.aq-account__list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 100;
  min-width: 11rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--wp--preset--color--border, currentColor);
  border-radius: var(--wp--custom--radius--medium, 0.4rem);
  background: var(--wp--preset--color--base, Canvas);
  color: var(--wp--preset--color--contrast, CanvasText);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.5);
}

.aq-account__list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  text-decoration: none;
}

.aq-account__list a:hover,
.aq-account__list a:focus {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Onboarding */

.aq-onboarding__lede {
  max-width: 46ch;
}

.aq-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
  padding: 0;
  margin: 1.5rem 0;
}

.aq-interest {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}

.aq-interest:has(input:checked) {
  background: currentColor;
}

.aq-interest:has(input:checked) span {
  color: Canvas;
}

.aq-onboarding__step {
  margin: 2rem 0 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.aq-onboarding__step:first-of-type {
  margin-top: 0;
}

.aq-onboarding__hint {
  margin: 0 0 0.75rem;
  max-width: 42rem;
}

.aq-onboarding__about {
  display: block;
  margin-bottom: 1.5rem;
}

.aq-onboarding__about textarea {
  width: 100%;
  max-width: 42rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  line-height: 1.5;
  color: inherit;
  background: Canvas;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  resize: vertical;
}

/* Dashboard */

.aq-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
}

.aq-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.15rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
}

.aq-stat__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.aq-stat__label {
  font-weight: 600;
}

.aq-stat__note {
  font-size: 0.85em;
  opacity: 0.7;
}

.aq-dashboard__section {
  margin-bottom: 2rem;
}

.aq-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aq-tag {
  padding: 0.3rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.9em;
}

.aq-dashboard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* BuddyPress registration form (bp-nouveau signup)
   -------------------------------------------------
   BuddyPress serves /register/ from its own template, so none of the theme.json
   button/form styling reaches it — its submit is a bare input[type=submit] and its
   fields use BuddyPress's default .standard-form spacing. This palettes the form to
   match the dark theme. Interim: we take ownership of the page later (see PLAN,
   "Own the login and sign-up pages"). Scoped to .signup-form so it touches nothing
   else. */

.signup-form {
  max-width: 34rem;
  margin-inline: auto;
}

.signup-form .register-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--wp--preset--color--base-2, #1e242e);
  border: 1px solid var(--wp--preset--color--border, #544c3d);
  border-radius: 0.5rem;
}

.signup-form .bp-heading {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

.signup-form label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
}

/* No extra gap on the first label under a section heading. */
.signup-form .bp-heading + label {
  margin-top: 0;
}

.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--wp--preset--color--base, #14181f);
  color: var(--wp--preset--color--contrast, #f0e9dc);
  border: 1px solid var(--wp--preset--color--border, #544c3d);
  border-radius: 0.35rem;
  line-height: 1.4;
}

.signup-form input:focus {
  outline: 2px solid var(--wp--preset--color--primary, #22b8cf);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--primary, #22b8cf);
}

/* Sit the reveal (eye) button beside the password input rather than below it. */
.signup-form .password-input-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.signup-form .password-input-wrapper .password-entry {
  flex: 1;
}

.signup-form .button.wp-hide-pw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  background: var(--wp--preset--color--tertiary, #2a323f);
  color: var(--wp--preset--color--contrast, #f0e9dc);
  border: 1px solid var(--wp--preset--color--border, #544c3d);
  border-radius: 0.35rem;
  cursor: pointer;
}

.signup-form .button.wp-hide-pw:hover {
  background: var(--wp--preset--color--border, #544c3d);
}

.signup-form #pass-strength-result {
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.35rem;
  font-size: 0.85em;
}

.signup-form .description,
.signup-form .indicator-hint,
.signup-form .field-visibility-settings-header {
  color: var(--wp--preset--color--contrast-3, #857e6e);
  font-size: 0.85em;
}

/* Weak-password confirm: an inline checkbox row, not a stacked label. */
.signup-form .pw-weak label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-weight: 400;
  color: var(--wp--preset--color--contrast, #f0e9dc);
}

/* xprofile field: strip the default fieldset chrome, match the other labels. */
.signup-form .editfield fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.signup-form .editfield legend {
  display: block;
  margin: 0 0 0.35rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
}

.signup-form .bp-required-field-label {
  color: var(--wp--preset--color--contrast-3, #857e6e);
  font-weight: 400;
}

/* The primary submit — the button that read as unstyled. */
.signup-form .submit {
  margin-top: 1.5rem;
}

.signup-form #submit,
.signup-form input[type="submit"] {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: var(--wp--preset--color--primary, #22b8cf);
  color: var(--wp--preset--color--base, #14181f);
  border: 0;
  border-radius: 0.35rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.signup-form #submit:hover,
.signup-form input[type="submit"]:hover,
.signup-form #submit:focus,
.signup-form input[type="submit"]:focus {
  background: var(--wp--preset--color--primary-hover, #3dd6e6);
  color: var(--wp--preset--color--base, #14181f);
}

/* Chips — the metadata row under a title. See includes/chips.php.
 *
 * Two sizes, and the difference is not only scale:
 *   .aq-chips--lg  40px, rounded-md, OUTLINED. One row on a page, under the title.
 *   .aq-chips--sm  badge, pill, FILLED. A dozen on screen at once, in cards.
 *
 * Every colour is a --tone custom property set by the tone modifier, so the two sizes
 * share one set of rules and adding a tone is one declaration. */

.aq-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.aq-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  font-weight: 600;
  /* Numbers in a reward chip should not jitter between cards. */
  font-variant-numeric: tabular-nums;
}

/* Tones. --tone is the hue; --tone-ink is what sits on top of it when filled. */
.aq-chip--neutral {
  --tone: var(--wp--preset--color--border, #544c3d);
  --tone-ink: var(--wp--preset--color--contrast, #f0e9dc);
  --tone-text: var(--wp--preset--color--contrast-2, #b8ae9c);
}

.aq-chip--primary {
  --tone: var(--wp--preset--color--primary, #22b8cf);
  --tone-ink: var(--wp--preset--color--base, #14181f);
  --tone-text: var(--tone);
}

.aq-chip--secondary {
  --tone: var(--wp--preset--color--secondary, #34c08a);
  --tone-ink: var(--wp--preset--color--base, #14181f);
  --tone-text: var(--tone);
}

.aq-chip--currency {
  --tone: var(--wp--preset--color--currency, #e6b23a);
  --tone-ink: var(--wp--preset--color--base, #14181f);
  --tone-text: var(--tone);
}

.aq-chip--success {
  --tone: var(--wp--preset--color--success, #46d389);
  --tone-ink: var(--wp--preset--color--base, #14181f);
  --tone-text: var(--tone);
}

.aq-chip--warning {
  --tone: var(--wp--preset--color--warning, #f2a93b);
  --tone-ink: var(--wp--preset--color--base, #14181f);
  --tone-text: var(--tone);
}

.aq-chip--error {
  --tone: var(--wp--preset--color--error, #f0605f);
  --tone-ink: var(--wp--preset--color--base, #14181f);
  --tone-text: var(--tone);
}

.aq-chip--info {
  --tone: var(--wp--preset--color--info, #4fb4e6);
  --tone-ink: var(--wp--preset--color--base, #14181f);
  --tone-text: var(--tone);
}

/* Large: outlined. The hue carries the text and the border; the fill is barely there,
 * just enough to lift the chip off the page background. */
.aq-chips--lg {
  gap: 0.625rem;
  margin-block: 1rem;
}

.aq-chips--lg .aq-chip {
  min-height: 40px;
  padding: 0 1rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--tone-text);
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
}

/* Small: filled. Solid enough to read as a token at a glance in a list. */
.aq-chips--sm {
  gap: 0.375rem;
  margin-block: 0.5rem;
}

.aq-chips--sm .aq-chip {
  min-height: 22px;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  background: var(--tone);
  color: var(--tone-ink);
  border: 1px solid transparent;
}

/* Neutral has no hue bright enough to carry dark text, so it fills with the raised
 * surface instead and keeps its own text colour. */
.aq-chips--sm .aq-chip--neutral {
  background: var(--wp--preset--color--tertiary, #2a323f);
  color: var(--wp--preset--color--contrast, #f0e9dc);
  border-color: var(--wp--preset--color--border, #544c3d);
}

/* A truncated skill list ("+2") explains itself on hover; hint that it is hoverable. */
.aq-chip[title] {
  cursor: help;
}

/* Browse by interest. See includes/interest-browse.php.
 *
 * The hub reuses .aq-chip so a category reads as the same object as the interest chip on
 * a quest card — that identity is the point, and it is why chips.php is domain-agnostic.
 * These are links rather than spans, which is the first time a chip has been one. */

.aq-interest-hub {
  margin-block: 1.5rem;
}

.aq-interest-hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aq-interest-hub__list li {
  margin: 0;
}

a.aq-chip {
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.aq-chip:hover,
a.aq-chip:focus-visible {
  background: color-mix(in srgb, var(--tone) 22%, transparent);
  border-color: var(--tone);
}

/* The category you are already looking at: filled, so the row shows where you are. */
.aq-interest-hub .aq-chip.is-current {
  background: var(--tone);
  color: var(--tone-ink);
  border-color: var(--tone);
}

/* Filter by skill. See aq_render_quest_skill_filter() in includes/quest-list.php.
 *
 * The same neutral chip a card wears for the same skill, deliberately — the control and
 * the thing it controls should read as one vocabulary, which is the reason chips.php is
 * domain-agnostic. Links, not a form: every state of the filter is then a URL, and it
 * works with JavaScript off. */

.aq-quest-filter {
  margin-block: 1.25rem;
}

.aq-quest-filter__label {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
}

.aq-quest-filter__list {
  list-style: none;
  margin-block: 0.5rem;
  padding: 0;
}

.aq-quest-filter__list li {
  margin: 0;
}

/* How many quests this skill would return, from aq_quest_skill_facets() — an honest
 * number over the unfiltered list, so it never offers a term that yields nothing. */
.aq-quest-filter__count {
  margin-left: 0.4375rem;
  opacity: 0.65;
  font-weight: 500;
}

/* Selected: filled, plus a tick. Colour alone would be the only signal otherwise, and on
 * a neutral chip that difference is a shade of the same brown. */
.aq-quest-filter .aq-chip.is-selected::before {
  content: "¹3";
  margin-right: 0.4375rem;
}

.aq-quest-filter .aq-chip.is-selected {
  background: var(--tone);
  color: var(--tone-ink);
  border-color: var(--tone);
}

/* Neutral's hue is the border colour, too dim to carry dark text — it fills with the
 * raised surface instead, exactly as the small neutral chip does. */
.aq-quest-filter .aq-chip--neutral.is-selected {
  background: var(--wp--preset--color--tertiary, #2a323f);
  color: var(--wp--preset--color--contrast, #f0e9dc);
  border-color: var(--tone);
}

/* The suggested bid on Create Quest. See assets/quest-pricing.js.
 *
 * Styled as a quiet aside rather than a field: it is advice sitting next to the reward
 * input, and it must not read as something the poster has to agree with. */

.aq-price-hint {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--wp--preset--color--primary, #22b8cf);
  background: color-mix(in srgb, var(--wp--preset--color--primary, #22b8cf) 8%, transparent);
  border-radius: 0 var(--wp--custom--radius--medium, 0.4rem) var(--wp--custom--radius--medium, 0.4rem) 0;
}

/* The anchor, always present. Sits above the suggestion because it is the thing the
   suggestion is derived from, and because it is all there is to read before the poster
   has estimated anything. */
.aq-price-hint__rate {
  font-size: 0.85rem;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
  font-variant-numeric: tabular-nums;
}

.aq-price-hint__amount {
  font-size: 1.05rem;
  color: var(--wp--preset--color--contrast, #f0e9dc);
}

.aq-price-hint__working {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
}

.aq-price-hint__note {
  font-size: 0.8rem;
  color: var(--wp--preset--color--contrast-3, #857e6e);
}

/* Partners — the directory grid and the profile header. See includes/partners.php.
 *
 * Deliberately light. Quest cards carry no card styling of their own either; the theme's
 * Global Styles are meant to reach this markup, and every colour below is a preset with a
 * literal only as a fallback. What is here is layout the theme cannot infer: a grid, and
 * a logo that has to be bounded so one oversized upload cannot set the row height. */

.aq-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.aq-partner-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--wp--preset--color--base-2, #1e242e);
  border: 1px solid var(--wp--preset--color--border, #544c3d);
  border-radius: var(--wp--custom--radius--medium, 0.5rem);
}

.aq-partner-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.aq-partner-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
}

.aq-partner-card__name {
  margin: 0;
  font-size: 1.15rem;
}

.aq-partner-card__link:hover .aq-partner-card__name,
.aq-partner-card__link:focus .aq-partner-card__name {
  color: var(--wp--preset--color--primary, #22b8cf);
}

.aq-partner-card__summary {
  margin: 0;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
  font-size: 0.9rem;
}

.aq-partner-card__address {
  margin: 0;
  color: var(--wp--preset--color--contrast-3, #857e6e);
  font-size: 0.85rem;
}

/* An SVG with no intrinsic height will otherwise stretch to fill the grid track. */
.aq-partner__logo {
  max-width: 100%;
  max-height: 6rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.aq-partner-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem auto;
  max-width: 800px;
}

.aq-partner-meta .aq-partner__logo {
  max-height: 9rem;
}

/* Pushed to the card's foot so the buttons line up across a row of uneven cards. */
.aq-partner-card__cta {
  align-self: flex-start;
  margin-top: auto;
  text-decoration: none;
}

/* Every profile field carries its label (see aq_render_partner_meta()). */
.aq-partner-fields {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 40rem;
  margin: 0;
  text-align: left;
}

.aq-partner-fields__row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

.aq-partner-fields dt {
  color: var(--wp--preset--color--contrast-3, #857e6e);
  font-size: 0.85rem;
}

.aq-partner-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.aq-partner-fields__row.is-unset dd,
.aq-partner-meta__unset {
  color: var(--wp--preset--color--contrast-3, #857e6e);
  font-style: italic;
}

.aq-partner-about__label {
  margin: 1rem 0 0.5rem;
  font-size: var(--wp--preset--font-size--medium, 1.25rem);
}

@media (max-width: 36rem) {
  .aq-partner-fields__row {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
 * Progress: skill tiers and badges
 *
 * Shown in two places with one set of rules — the Dashboard and the BuddyPress
 * profile tab — so a member sees the same thing privately and publicly.
 * ---------------------------------------------------------------------- */

.aq-progress__section + .aq-progress__section {
  margin-top: 2rem;
}

.aq-skills,
.aq-badges {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aq-skills {
  display: grid;
  gap: 1rem;
}

.aq-skill__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.aq-skill__name {
  font-weight: 600;
}

.aq-skill__bar {
  margin-top: 0.4rem;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--wp--preset--color--tertiary, #2a323f);
  border: 1px solid var(--wp--preset--color--border, #544c3d);
}

.aq-skill__fill {
  display: block;
  height: 100%;
  background: var(--wp--preset--color--primary, #22b8cf);
}

.aq-skill__note {
  margin: 0.35rem 0 0;
  font-size: 0.85em;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
  font-variant-numeric: tabular-nums;
}

.aq-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
}

.aq-badge {
  padding: 1rem 0.75rem;
  text-align: center;
  border: 1px solid var(--wp--preset--color--border, #544c3d);
  border-radius: var(--wp--custom--radius--medium, 0.4rem);
  background: var(--wp--preset--color--base-2, #1e242e);
}

/* Dimmed *and* labelled. Opacity alone says nothing to a screen reader, which is why
   .aq-badge__state carries the word rather than relying on the styling. */
.aq-badge.is-locked {
  opacity: 0.55;
}

.aq-badge__image {
  max-width: 4.5rem;
  height: auto;
  margin: 0 auto 0.5rem;
}

.aq-badge__title {
  margin: 0;
  font-size: 0.95em;
}

.aq-badge__state {
  margin: 0.25rem 0 0;
  font-size: 0.8em;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
}

/* -------------------------------------------------------------------------
 * Quest list pagination
 *
 * "Newer / Older" rather than "Previous / Next" — the lists sort by recency, and
 * "previous" on a reverse-chronological list points the wrong way in the reader's
 * head. See aq_render_quest_list_pagination().
 * ---------------------------------------------------------------------- */

.aq-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.aq-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0 0.7rem;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--border, #544c3d);
  border-radius: var(--wp--custom--radius--medium, 0.4rem);
  background: var(--wp--preset--color--base-2, #1e242e);
  color: var(--wp--preset--color--contrast, #f0e9dc);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.aq-pagination a.page-numbers:hover,
.aq-pagination a.page-numbers:focus {
  border-color: var(--wp--preset--color--primary, #22b8cf);
}

.aq-pagination .page-numbers.current {
  background: var(--wp--preset--color--tertiary, #2a323f);
  border-color: var(--wp--preset--color--primary, #22b8cf);
  font-weight: 600;
}

/* The gap marker is not a control and must not look like one. */
.aq-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* -------------------------------------------------------------------------
 * Player profile
 *
 * Identity and standing. The wallet lives on the Dashboard — see the header of
 * includes/profile.php for why the two pages are not one page.
 * ---------------------------------------------------------------------- */

.aq-profile__head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.aq-profile__avatar {
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--border, #544c3d);
}

.aq-profile__name {
  margin: 0;
}

.aq-profile__since,
.aq-profile__public {
  margin: 0.2rem 0 0;
  font-size: 0.9em;
  color: var(--wp--preset--color--contrast-2, #b8ae9c);
}

.aq-profile__section {
  margin-top: 2rem;
}

.aq-profile__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* A two-tile row does not need the full dashboard grid's breathing room. */
.aq-stats--sm {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* [aq_hero_cta]: centred, since the markup is ours and core's per-block layout CSS is
 * only generated for real Buttons blocks. */
.aq-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.aq-hero-cta__welcome {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium, 1.25rem);
}