/* =============================================================
   Artsopolis Octave Theme — Dashboard & Auth Pages
   ============================================================= */

/* ---------------------------------------------------------------
   Auth pages (register / login) — centered card layout
   --------------------------------------------------------------- */
.auth-page {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--gutter);
}

/* Login / register / forgot-password: card sits a fixed 40px below the
   masthead instead of being vertically centered in the viewport
   (.site-main's own top padding is collapsed to 0 above so this 40px is
   the only top offset). Reset-password keeps the original centered
   layout — it wasn't part of this request. */
.auth-page--top {
  align-items: flex-start;
  padding-top: 40px;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-10);
  box-shadow: var(--shadow-md);
}

.auth-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.auth-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: var(--space-8);
  line-height: 1.1;
}

.auth-card__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-align: center;
}

/* ---------------------------------------------------------------
   Form fields (shared across auth + submission forms)
   --------------------------------------------------------------- */
.ao-form__field {
  margin-bottom: var(--space-5);
}

/* Admin-configured rich-text block shown above the submission form, between the
   page heading and the first field. Uses the theme's default body font so its
   paragraphs match a standard <p> elsewhere on the page. */
.ao-form__text-block {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  margin-bottom: var(--space-8);
}

.ao-form__text-block > :first-child {
  margin-top: 0;
}

.ao-form__text-block > :last-child {
  margin-bottom: 0;
}

.ao-form__text-block p {
  font-family: var(--font-body);
  margin: 0 0 var(--space-4);
}

.ao-form__text-block a {
  color: var(--color-link);
}

.ao-form__text-block ul,
.ao-form__text-block ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.ao-form__text-block li {
  margin-bottom: var(--space-2);
}

.ao-form__field--half {
  flex: 1;
  min-width: 0;
}

.ao-form__row {
  display: flex;
  gap: var(--space-4);
}

/* The HTML [hidden] attribute must win over the flex display above, so JS/markup
   that hides a row (e.g. the address/organization write-in fields) works. */
.ao-form__row[hidden] {
  display: none;
}

.ao-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.ao-form__label--required::after {
  content: ' *';
  color: var(--color-accent);
}

.ao-form__input,
.ao-form__textarea,
.ao-form__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.ao-form__input:focus,
.ao-form__textarea:focus,
.ao-form__select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.12);
}

/* Placeholder ("example") text sits a step lighter than entered content so the
   two are easy to tell apart at a glance. #737373 holds a 4.74:1 contrast ratio
   on white, clearing WCAG AA for normal text. */
.ao-form__input::placeholder,
.ao-form__textarea::placeholder,
.ao-form__select::placeholder {
  color: #737373;
  opacity: 1; /* Firefox dims placeholders by default; keep the colour exact. */
}

.ao-form__textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.ao-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.ao-form__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-2);
  font-style: italic;
}

/* Ascending "X / N minimum" counter above the Description field (Submit an
   Event, Title & Description tab) — see bindMinCharCounter() in
   dashboard.js. Switches to the "met" color once the minimum is reached. */
.ao-form__char-counter {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.ao-form__char-counter--met {
  color: var(--color-success, #2e7d32);
}

.ao-form__error-inline {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Password field wrapper */
.ao-form__password-wrap {
  position: relative;
}

.ao-form__password-toggle {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink-muted);
  padding: var(--space-1);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.ao-form__password-toggle:hover {
  color: var(--color-ink);
}

/* Strength meter */
.ao-password-strength {
  margin-top: var(--space-2);
  height: 4px;
  background: var(--color-rule);
  border-radius: 2px;
  overflow: hidden;
}

.ao-password-strength__bar {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width var(--transition-base), background-color var(--transition-base);
}

.ao-password-strength__bar--weak   { width: 33%; background: #e06060; }
.ao-password-strength__bar--fair   { width: 66%; background: #f0a060; }
.ao-password-strength__bar--strong { width: 100%; background: #60a860; }

/* Form alert (top-level error/success) */
.ao-form__alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.5;
}

.ao-form__alert--error {
  background: #fdf2f2;
  border: 1px solid #f5c6c6;
  color: var(--color-error);
}

.ao-form__alert--success {
  background: #f2fdf5;
  border: 1px solid #c6e8d0;
  color: var(--color-success);
}

.ao-form__alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Submit button */
.ao-form__submit {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background: var(--color-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  margin-top: var(--space-2);
}

.ao-form__submit:hover {
  background: var(--color-accent-dark);
}

.ao-form__submit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Save Draft box — new-submission only, sits above the (gated) Submit
   button. See event-save-draft.png. */
.ao-save-draft-box {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg-warm, #f5f4f0);
  border-radius: var(--radius-md);
}

/* Funder Acknowledgment — the site-wide statement + Yes/No answer above the
   Save Draft box on the Submit/Edit Event form, in the same shaded style.
   When an answer is required the block is a role="group" validated like the
   Classifieds Organization requirement, so .ao-group--invalid (below) frames
   it and reveals its .ao-form__group-error message. */
.ao-funder-ack-box {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg-warm, #f5f4f0);
  border-radius: var(--radius-md);
}

/* Theme 2.108.0: last block of the Title & Description panel. */
.ao-form-tabs__panel .ao-funder-ack-box {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.ao-funder-ack-box__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
}

.ao-funder-ack-box__copy {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  line-height: 1.5;
}

.ao-funder-ack-box__copy p {
  margin: 0 0 var(--space-2);
}

.ao-funder-ack-box__copy p:last-child {
  margin-bottom: 0;
}

.ao-funder-ack-box__choices {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.ao-funder-ack-box__choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* Theme 2.108.0: the box sits at the top of the panel column (below the
   progress strip, above the open panel) — text right-aligned beside the
   button, hugging the right edge, per Jeff's mockup. Title 14px / copy 12px
   (2.108.1; the 2.108.0 "4pt smaller" sizes were too small). */
.ao-form-tabs__panels > .ao-save-draft-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-4) auto;
  padding: var(--space-3) var(--space-4);
}

.ao-save-draft-box__text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.ao-save-draft-box__title {
  margin: 0 0 var(--space-1);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
}

.ao-save-draft-box__copy {
  margin: 0;
  font-size: 12px;
  color: var(--color-ink-light);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .ao-form-tabs__panels > .ao-save-draft-box {
    width: auto;
    margin-left: 0;
  }
}

.ao-save-draft-box__btn {
  /* 2.108.2: 20% smaller than the stock button — padding and type both
     scaled by 0.8 (var(--text-sm) 14px → 11.2px). */
  padding: calc(var(--space-3) * 0.8) calc(var(--space-6) * 0.8);
  background: #aab8f2;
  color: var(--color-ink);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: calc(var(--text-sm) * 0.8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.ao-save-draft-box__btn:hover {
  background: #8fa0ee;
}

.ao-save-draft-box__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Submit confirmation modal — new-submission only. Same open/close idiom
   as .ao-access-dialog (event-listing-card.php / archive-cards.js): fixed
   overlay, backdrop, centered panel. */
.ao-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ao-confirm-modal[hidden] {
  display: none;
}

.ao-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.ao-confirm-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  margin: var(--space-4);
  padding: var(--space-6);
  background: var(--color-paper, #fff);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.ao-confirm-modal__title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.ao-confirm-modal__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* Checkbox */
.ao-form__checkbox-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ao-form__checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-accent);
}

.ao-form__checkbox-label {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  cursor: pointer;
}

/* Honeypot — visually hidden but accessible */
.ao-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Image upload field */
.ao-form__image-upload {
  border: 2px dashed var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.ao-form__image-upload:hover,
.ao-form__image-upload:focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-pale);
}

.ao-form__image-upload input[type="file"] {
  display: none;
}

.ao-form__image-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.ao-form__image-label svg {
  color: var(--color-ink-muted);
}

.ao-form__image-preview {
  margin-top: var(--space-4);
  display: none;
}

.ao-form__image-preview img {
  max-width: 200px;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
}

/* New uploader: dropzone + preview + metadata + diagnostic panel */
.ao-image-uploader {
  border: 2px dashed var(--color-rule);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.ao-image-uploader[data-state="empty"]:hover,
.ao-image-uploader[data-state="empty"]:focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-pale);
}

.ao-image-uploader[data-state="selected"] {
  border-style: solid;
  border-color: var(--color-rule);
  background: var(--color-bg-warm);
}

.ao-image-uploader__dropzone {
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
}

.ao-image-uploader__dropzone input[type="file"] {
  display: none;
}

.ao-image-uploader__selected {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
  align-items: start;
}

@media (max-width: 600px) {
  .ao-image-uploader__selected {
    grid-template-columns: 1fr;
  }
}

.ao-image-uploader__preview {
  position: relative;
}

.ao-image-uploader__preview img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  display: block;
}

.ao-image-uploader__focal-wrap {
  position: relative;
  cursor: crosshair;
}

.ao-image-uploader__focal-point {
  position: absolute;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: grab;
  touch-action: none;
}

.ao-image-uploader__focal-point::before,
.ao-image-uploader__focal-point::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.ao-image-uploader__focal-point::before {
  width: 14px;
  height: 2px;
}

.ao-image-uploader__focal-point::after {
  width: 2px;
  height: 14px;
}

.ao-image-uploader__focal-point:active {
  cursor: grabbing;
}

.ao-image-uploader__focal-point:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ao-image-uploader__focal-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.ao-image-uploader__focal-preview-block {
  margin-top: var(--space-3);
}

.ao-image-uploader__focal-preview-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-muted);
}

.ao-image-uploader__focal-preview {
  width: 140px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-warm, #f4f1ec);
}

.ao-image-uploader__focal-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ao-image-uploader__replace {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 4px 10px;
  font-size: var(--text-xs);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.ao-image-uploader__replace:hover,
.ao-image-uploader__replace:focus {
  background: rgba(0, 0, 0, 0.9);
}

.ao-image-uploader__meta {
  min-width: 0;
}

.ao-image-uploader__diagnostic {
  margin: 0;
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.ao-image-uploader__diagnostic > div {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.ao-image-uploader__diagnostic > div:not(:last-child) {
  border-bottom: 1px solid var(--color-rule);
}

.ao-image-uploader__diagnostic dt {
  font-weight: 600;
  color: var(--color-ink-muted);
  margin: 0;
}

.ao-image-uploader__diagnostic dd {
  margin: 0;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* Tabs: Upload New / My Library */
.ao-image-uploader__tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-2) var(--space-3) 0;
}

.ao-image-uploader__tab {
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  margin-bottom: -1px;
}

.ao-image-uploader__tab:hover {
  color: var(--color-ink);
  background: rgba(0, 0, 0, 0.03);
}

.ao-image-uploader__tab.is-active {
  background: #fff;
  color: var(--color-ink);
  border-color: var(--color-rule);
  border-bottom: 1px solid #fff;
}

.ao-image-uploader__pane {
  background: #fff;
}

/* Library browser */
.ao-image-library__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-rule);
}

.ao-image-library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 200px;
}

.ao-image-library__loading,
.ao-image-library__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-style: italic;
  padding: var(--space-6);
}

.ao-image-library__tile {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-warm);
  padding: 0;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.ao-image-library__tile:hover,
.ao-image-library__tile:focus {
  border-color: var(--color-accent);
  outline: none;
}

.ao-image-library__tile.is-selected {
  border-color: var(--color-accent);
}

.ao-image-library__tile.is-selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.ao-image-library__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ao-image-library__tile-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient( to top, rgba(0,0,0,0.75), transparent );
  color: #fff;
  font-size: 10px;
  padding: var(--space-4) var(--space-2) var(--space-2);
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.ao-image-library__pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.ao-image-library__pagination:empty {
  display: none;
}

.ao-image-library__page-btn {
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--color-ink);
}

.ao-image-library__page-btn:hover:not(:disabled) {
  background: var(--color-bg-warm);
}

.ao-image-library__page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ao-image-library__page-btn.is-current {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* ========================================================================
   Gallery Uploader (Phase 3)
   ======================================================================== */
.ao-gallery-uploader__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.ao-gallery-uploader__items:empty {
  display: none;
}

.ao-gallery-item {
  display: grid;
  grid-template-columns: 24px 100px 1fr 32px;
  gap: var(--space-3);
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  align-items: start;
  transition: box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.ao-gallery-item.is-dragging {
  opacity: 0.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ao-gallery-item.is-drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-pale);
}

.ao-gallery-item__handle-grip {
  cursor: grab;
  color: var(--color-ink-muted);
  font-size: 18px;
  line-height: 1;
  user-select: none;
  font-weight: bold;
  letter-spacing: -2px;
}

.ao-gallery-item__handle-grip:active {
  cursor: grabbing;
}

.ao-gallery-item__thumb {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-rule);
}

.ao-gallery-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ao-gallery-item__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ao-gallery-item__meta .ao-form__input {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

.ao-gallery-item__diag {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.ao-gallery-item__remove {
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--color-ink-muted);
  font-size: 18px;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ao-gallery-item__remove:hover,
.ao-gallery-item__remove:focus {
  background: #fbeaea;
  color: #8a1d1d;
  border-color: #d63638;
}

.ao-gallery-uploader__add {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.ao-gallery-uploader__count {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.ao-gallery-uploader.is-full .ao-gallery-uploader__add .ao-gallery-add-btn,
.ao-gallery-uploader__add .ao-gallery-add-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.ao-gallery-add-btn:focus-visible {
  outline: 2px solid var(--color-focus, #005fcc);
  outline-offset: 2px;
}

/* Reorder controls inside the drag handle: a decorative grip (for the drag
 * affordance) plus keyboard/pointer-operable Move buttons. */
.ao-gallery-item__handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ao-gallery-item__move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-rule, #e5e5e5);
  border-radius: 6px;
  background: #ffffff;
  color: var(--color-ink, #252525);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ao-gallery-item__move:hover {
  border-color: var(--color-ink-light, #555);
  background: var(--color-bg-warm, #f3f3f3);
}

.ao-gallery-item__move:focus-visible {
  outline: 2px solid var(--color-focus, #005fcc);
  outline-offset: 2px;
}

.ao-gallery-item__move:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Visually hidden but available to assistive tech (for the reorder status
 * live region). */
.ao-gallery-uploader__sr-status {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .ao-gallery-item {
    grid-template-columns: 24px 80px 1fr 32px;
  }
  .ao-gallery-item__thumb {
    width: 80px;
    height: 80px;
  }
}

/* ========================================================================
   My Account page
   ======================================================================== */

/* Read-only account info card */
.ao-account-info {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-warm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
}

.ao-account-info__list {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .ao-account-info__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ao-account-info__row dt {
  margin: 0 0 2px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.ao-account-info__row dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.ao-account-info__row em {
  color: var(--color-ink-muted);
  font-style: italic;
}

/* Side-by-side field pair (First/Last name, New/Confirm password) */
.ao-form__field-row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .ao-form__field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Readonly username styling (admin view) */
.ao-form--account input[readonly] {
  background: var(--color-bg-warm);
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

/* ==========================================================================
   Inline field-level error messages
   ========================================================================== */
.ao-form__inline-error {
  display: none;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-error, #c0392b);
}

.ao-form__input[aria-invalid="true"],
.ao-form__textarea[aria-invalid="true"],
.ao-form__select[aria-invalid="true"] {
  border-color: var(--color-error, #c0392b);
  outline-color: var(--color-error, #c0392b);
}

/* Required image uploader that failed validation: red-outline the dropzone. */
.ao-image-uploader--invalid .ao-image-uploader__dropzone {
  border-color: var(--color-error, #c0392b);
  outline: 1px solid var(--color-error, #c0392b);
}

/* The uploader and the category group hold no form control of their own, so
   they can't show a native validation bubble. Their "required" message is
   always rendered but stays hidden until the group is flagged invalid — by the
   server on a failed submit, or by the client-side pass in
   dashboard-submit-tabs.js. */
.ao-image-uploader__required-msg,
.ao-form__group-error {
  display: none;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-error, #c0392b);
}

.ao-image-uploader--invalid .ao-image-uploader__required-msg,
.ao-fieldset--invalid .ao-form__group-error,
.ao-group--invalid .ao-form__group-error {
  display: block;
}

/* An "either/or" requirement (Classifieds Organization: pick from the drop menu
   OR write one in). The highlight goes on the GROUP, not on the two controls:
   either one satisfies the rule, so red-bordering both would imply both are
   required, and red-bordering just one would be arbitrary. Framing the block and
   showing its message states the actual rule — and the tab's error dot points
   straight at it. */
.ao-group--invalid {
  border: 1px solid var(--color-error, #c0392b);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-3);
  outline: none;
}

/* Required image uploader / category group that failed validation: give the
   whole group a red frame, not just a tinted label — a lone coloured legend is
   easy to miss next to the red-bordered text inputs beside it. */
.ao-image-uploader--invalid {
  border-radius: var(--radius-sm, 4px);
  outline: 1px solid var(--color-error, #c0392b);
  outline-offset: 4px;
}

.ao-fieldset--invalid {
  border: 1px solid var(--color-error, #c0392b) !important;
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-3) !important;
}

/* Required category group that failed validation: red-tint the legend. */
.ao-fieldset--invalid > legend {
  color: var(--color-error, #c0392b);
}

/* ==========================================================================
   Video URL rows (front-end submission forms)
   ========================================================================== */
.ao-video-urls-section {
  margin-top: var(--space-2);
}

/* Each video row stacks a URL line (with provider hint + remove button) above
   its optional caption input, so the two related fields read as one unit. */
.ao-fe-video-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ao-fe-video-row__url {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ao-fe-video-row__caption {
  display: flex;
}

.ao-fe-video-row .ao-form__input {
  flex: 1;
}

.ao-fe-video-provider {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  min-width: 80px;
  white-space: nowrap;
}

.ao-fe-video-remove {
  padding: var(--space-2) var(--space-3);
}

/* ==========================================================================
   Social Links accordion section
   ========================================================================== */
.ao-social-accordion {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
}

.ao-social-accordion__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-warm);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-ink);
  transition: background 0.15s ease;
}

.ao-social-accordion__toggle:hover,
.ao-social-accordion__toggle:focus-visible {
  background: var(--color-rule);
  outline: none;
}

.ao-social-accordion__label {
  font-weight: 600;
  font-size: var(--text-base);
}

.ao-social-accordion__hint {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.ao-social-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--color-ink-muted);
}

.ao-social-accordion__toggle[aria-expanded="true"] .ao-social-accordion__chevron {
  transform: rotate(180deg);
}

.ao-social-accordion__body {
  padding: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

/* Flat variant (expanded=true) — used on the Submit an Event form's
   dedicated Social Link tab, where the section doesn't need its own
   collapsed box since the tab itself already scopes it. */
.ao-social-accordion--flat {
  border: none;
  border-radius: 0;
  overflow: visible;
}

.ao-social-accordion--flat .ao-social-accordion__body {
  padding: 0;
  border-top: none;
}

/* ==========================================================================
   Category tree (parent/child hierarchy) — Submit an Event, Category tab
   ========================================================================== */
.ao-category-tree {
  display: flex;
  flex-direction: column;
  /* Vertical space between parent category rows. The parent row's own
     margin-bottom is zeroed below so this gap is the only thing separating
     groups — previously the two stacked, giving 36px after a childless parent
     but only 16px after one with children. */
  gap: 15px;
}

/* The shared checkbox-wrap margin would add to the flex gap above (and applies
   only to parents, since child wraps set margin:0 inline), making the spacing
   between rows uneven. The tree's gap owns that spacing instead. */
.ao-category-tree__parent.ao-form__checkbox-wrap {
  margin-bottom: 0;
}

.ao-category-tree__parent-label {
  font-weight: 600;
}

.ao-category-tree__children {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  margin-left: 26px;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-rule);
}

/* Featured Categories (Call-Out categories) — same checkbox-wrap as the main
   tree, but each row also carries an admin-authored description beneath the
   label, so the checkbox aligns to the top of the row instead of centering
   against just the one label line. */
.ao-callout-category {
  align-items: flex-start;
}

.ao-callout-category__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ==========================================================================
   Time entry (Submit an Event, Dates & Times tab) — Hour / Minute / AM-PM
   <select> trio replacing the native <input type="time"> spinner, so opening
   any of the three shows its full fixed list (12 hours, 12 five-minute
   increments, AM/PM) with no internal scrolling. See ceBindTimeSelectGroup()
   in dashboard.js.
   ========================================================================== */
.ao-time-select-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

.ao-time-select {
  width: auto;
  min-width: 4.5em;
  /* .ao-form__select reserves the right side for its dropdown-arrow icon via
     padding-right: var(--space-10) — must keep that here too (not just the
     top/bottom/left), or the arrow sits on top of the text instead of past it. */
  padding: var(--space-2) var(--space-10) var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.ao-time-select--ampm {
  min-width: 5.5em;
}

.ao-time-select-group__sep {
  color: var(--color-ink-muted);
  font-weight: 600;
}

/* ==========================================================================
   Tag entry (Submit an Event, Category tab) — one-at-a-time chip input
   capped at 5, replacing a single free-text "comma separated" field. See
   bindTagInput() in dashboard.js.
   ========================================================================== */
.ao-tag-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ao-tag-input__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ao-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-bg-warm);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

.ao-tag-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ao-tag-chip__remove:hover,
.ao-tag-chip__remove:focus-visible {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-ink);
}

.ao-tag-input__field {
  width: 200px;
  flex: 0 0 200px;
}

.ao-tag-input__field:disabled {
  background: transparent;
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ==========================================================================
   Artist picker (Submit an Event, Artists tab) — searchable, paginated
   checkbox list. Confirmation chips reuse .ao-tag-chip / .ao-tag-chip__remove
   above. See bindArtistPicker() in dashboard.js.
   ========================================================================== */
.ao-artist-picker__search {
  margin-bottom: var(--space-3);
  max-width: 320px;
}

.ao-artist-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.ao-artist-picker__item {
  margin: 0;
}

.ao-artist-picker__no-results {
  margin-top: var(--space-3);
}

.ao-artist-picker__more {
  margin-top: var(--space-3);
}

/* Without JS, "Show More" and search can't function — reveal every artist
   and drop both controls, same fallback as the event detail page's "More
   Dates" (single-ao_event.php / main.css). */
.no-js .ao-artist-picker__item[hidden] {
  display: flex !important;
}

.no-js .ao-artist-picker__search,
.no-js .ao-artist-picker__more {
  display: none;
}

/* Social field: icon + label inline */
.ao-social-field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ao-social-field__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

.ao-social-field__icon svg {
  display: block;
}

/* ==========================================================================
   Copyright Acknowledgement block (image-uploader.php)
   ========================================================================== */
.ao-copyright-ack {
  background: #f0f0f0;
  border: 1px solid #d8d8d8;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.ao-copyright-ack__heading {
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}

.ao-copyright-ack__body {
  font-size: var(--text-sm);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  line-height: 1.55;
}

.ao-copyright-ack__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  line-height: 1.4;
}

.ao-copyright-ack__checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Copyright acknowledgement modal/popup */
.ao-copyright-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* ensures modal never touches viewport edges on small screens */
}

.ao-copyright-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  padding: 36px 30px 30px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.ao-copyright-modal__title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ao-copyright-modal__body {
  font-size: 0.9rem;
  color: #333;
  line-height: 1.6;
  margin: 0 0 24px;
  text-align: left;
}

.ao-copyright-modal__ok {
  display: inline-block;
  padding: 10px 48px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  letter-spacing: 0.02em;
}

.ao-copyright-modal__ok:hover,
.ao-copyright-modal__ok:focus-visible {
  opacity: 0.8;
  outline: 2px solid #111;
  outline-offset: 3px;
}

/* ===============================================================
   Classifieds submission preview / review screen (overlay)
   The preview sits ON TOP of the form as a fixed overlay; the form
   itself is never hidden or detached, so its file inputs (PDF
   uploads) stay in the rendered document and submit correctly.
   =============================================================== */
.ao-submission-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  background: var(--color-paper, #fff);
  padding: var(--space-8) var(--space-6) var(--space-12);
}

.ao-submission-preview > * {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Prevent the underlying page from scrolling while the preview is open. */
body.ao-preview-open-lock {
  overflow: hidden;
}

.ao-preview__intro {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}

.ao-preview__image-wrap {
  margin-bottom: var(--space-6);
}

.ao-preview__image {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-rule, #e5e5e5);
}

.ao-preview__list {
  margin: 0;
  border-top: 1px solid var(--color-rule, #e5e5e5);
}

.ao-preview__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule, #e5e5e5);
}

.ao-preview__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0;
}

.ao-preview__value {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-ink);
  word-break: break-word;
}

.ao-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.ao-preview__actions .ao-form__submit {
  width: auto;
  flex: 0 0 auto;
}

.ao-preview-back {
  background: var(--color-bg-warm, #f4f4f4) !important;
  color: var(--color-ink, #222) !important;
  border: 1px solid var(--color-rule, #ddd) !important;
}

@media (max-width: 640px) {
  .ao-preview__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .ao-preview__actions .ao-form__submit {
    width: 100%;
  }
}


/* ============================================================
   Bulk Import Events — /dashboard/import-events/
   Three numbered steps down the page; step 3 stays hidden until a
   file has been validated. See template-parts/dashboard-import-events.php
   and assets/js/import-events.js.
   ============================================================ */
.ao-import__step {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-rule);
}

.ao-import__step:last-of-type {
  border-bottom: none;
}

.ao-import__step-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.ao-import__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75em;
  height: 1.75em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}

.ao-import__step-lede,
.ao-import__gate-help {
  color: var(--color-ink-light);
  margin-bottom: var(--space-5);
}

/* Buttons. The dashboard's own .ao-form__submit is a full-width form
   control; these are inline actions that sit in a row, so they get their
   own class rather than a width override on that one. */
.ao-import__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: #ffffff;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.ao-import__btn:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #ffffff;
}

.ao-import__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.ao-import__btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.ao-import__btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}

.ao-import__btn--secondary:hover {
  background: var(--color-bg-warm);
  border-color: var(--color-ink-light);
  color: var(--color-ink);
}

.ao-import__btn svg {
  flex-shrink: 0;
  /* Explicit — the theme's `svg { height: auto }` reset would collapse these. */
  width: 15px;
  height: 15px;
}

.ao-import__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Column reference / validation report tables. Both can outgrow a narrow
   viewport, so each scrolls inside its own wrapper rather than pushing the
   dashboard column sideways. */
.ao-import__table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.ao-import__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ao-import__table th,
.ao-import__table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-rule);
}

.ao-import__table thead th {
  background: var(--color-bg-warm);
  font-weight: 600;
  white-space: nowrap;
}

.ao-import__table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.ao-import__table--report tbody tr.is-error {
  background: color-mix(in srgb, var(--color-error) 6%, transparent);
}

/* Standalone note — currently the MM/DD/YYYY date-format reminder, which
   sits between the template download and the column table because getting
   the date format wrong is the failure a member is most likely to repeat
   across every row of a file. */
.ao-import__note {
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-5);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-warm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
}

/* Multi-date convention callout */
.ao-import__callout {
  padding: var(--space-5);
  background: var(--color-bg-warm);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.ao-import__callout-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}

.ao-import__code {
  overflow-x: auto;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ao-import__list {
  margin: 0;
  padding-left: var(--space-6);
  color: var(--color-ink-light);
  font-size: var(--text-sm);
}

.ao-import__list li + li {
  margin-top: var(--space-2);
}

/* Name reference lists (your organizations / venues / categories) */
.ao-import__reference {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.ao-import__details {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.ao-import__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
}

.ao-import__summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ao-import__details-hint {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-ink-light);
  font-size: var(--text-xs);
}

/* Each entry is a name plus its own copy button, so the bullets go and the
   row becomes a two-column flex line instead. */
.ao-import__names {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.ao-import__names--scroll {
  max-height: 14rem;
  overflow-y: auto;
}

.ao-import__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.ao-import__name + .ao-import__name {
  border-top: 1px solid var(--color-rule);
}

.ao-import__name-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ao-import__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: 2px var(--space-3);
  background: transparent;
  color: var(--color-ink-light);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.6;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.ao-import__copy:hover {
  color: var(--color-ink);
  border-color: var(--color-ink-light);
  background: var(--color-bg-warm);
}

.ao-import__copy:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.ao-import__copy svg {
  flex-shrink: 0;
  /* Explicit — the theme's `svg { height: auto }` reset would collapse these. */
  width: 14px;
  height: 14px;
}

/* The checkmark swaps in for the clipboard icon in place and the "Copy"
   wording stays put, so the button never changes width mid-interaction and
   the rows below it don't shift. Screen readers get the confirmation from
   the live region instead, which carries the copied name with it. */
.ao-import__copied-icon {
  display: none;
}

.ao-import__copy.is-copied {
  color: var(--color-success);
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}

.ao-import__copy.is-copied .ao-import__copy-icon {
  display: none;
}

.ao-import__copy.is-copied .ao-import__copied-icon {
  display: inline;
}

.ao-import__copy.is-copy-failed {
  color: var(--color-error);
  border-color: var(--color-error);
}

@media (prefers-reduced-motion: reduce) {
  .ao-import__copy {
    transition: none;
  }
}

/* Messages, per-row badges, summary box */
.ao-import__message {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.ao-import__message--error {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid var(--color-error);
}

.ao-import__summary-box {
  margin-bottom: var(--space-5);
}

.ao-import__summary-line {
  margin: 0 0 var(--space-2);
}

.ao-import__summary-line--ok {
  color: var(--color-success);
  font-weight: 600;
}

.ao-import__summary-line--warn {
  color: var(--color-error);
  font-weight: 600;
}

.ao-import__badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ao-import__badge--ok {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.ao-import__badge--error {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

.ao-import__row-errors {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-ink-light);
}

/* Chunked-import progress */
.ao-import__progress {
  margin-top: var(--space-6);
}

.ao-import__progress-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-rule);
  overflow: hidden;
}

.ao-import__progress-fill {
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width var(--transition-fast);
}

.ao-import__progress-label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-light);
}

@media (prefers-reduced-motion: reduce) {
  .ao-import__progress-fill {
    transition: none;
  }
}

@media (max-width: 640px) {
  .ao-import__btn,
  .ao-import__actions .ao-import__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   Bulk Import Log — /dashboard/bulk-import-log/
   One card per import run. See
   template-parts/dashboard-bulk-import-log.php.
   ============================================================ */
.ao-import__empty {
  padding: var(--space-6);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-bg-warm);
}

.ao-import-log {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.ao-import-log__run {
  padding: var(--space-5);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.ao-import-log__run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.ao-import-log__run-date {
  margin: 0;
  font-weight: 600;
}

.ao-import-log__run-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-sm);
}

/* The count is the thing someone scans this page for, so it reads as a
   figure rather than as another line of prose. */
.ao-import-log__run-count {
  flex: 0 0 auto;
  margin: 0;
  text-align: right;
  line-height: 1.2;
}

.ao-import-log__run-number {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-accent);
}

.ao-import-log__run-label {
  font-size: var(--text-xs);
  color: var(--color-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ao-import-log__titles {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  /* A 100-event run would otherwise push the pagination off the bottom of a
     very long page; the list scrolls within the card instead. */
  max-height: 16rem;
  overflow-y: auto;
}

.ao-import-log__titles li + li {
  margin-top: var(--space-1);
}

.ao-import-log__more {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-light);
}

.ao-import-log__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.ao-import-log__pagination .page-numbers {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-ink);
}

.ao-import-log__pagination .page-numbers:hover {
  background: var(--color-bg-warm);
}

.ao-import-log__pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  font-weight: 600;
}

.ao-import-log__pagination .page-numbers:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .ao-import-log__run-count {
    text-align: left;
  }
}

/* Possible-duplicate rows in the validation report. Amber rather than red:
   a flagged row is importable, it just needs a decision. */
.ao-import__table--report tbody tr.is-duplicate {
  background: color-mix(in srgb, #b26a00 7%, transparent);
}

.ao-import__badge--dupe {
  color: #7a4a00;
  background: color-mix(in srgb, #b26a00 16%, transparent);
}

.ao-import__row-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-light);
}

.ao-import__omit,
.ao-import__omit-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.ao-import__omit {
  margin-top: var(--space-2);
}

.ao-import__omit-all {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.ao-import__omit input[disabled] {
  cursor: not-allowed;
}

.ao-import__summary-line--dupe {
  color: #7a4a00;
  font-weight: 600;
}

/* ==========================================================================
   Dining & Drinks tab (Submit a Venue) — the enable checkbox reveals the
   rest; the nearby-dining picker reuses the .ao-artist-picker rules above
   through the generic list picker in dashboard.js.
   ========================================================================== */
.ao-dining-form__fields {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.ao-dining-form__types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.ao-dining-image__preview {
  margin-bottom: var(--space-3);
}

.ao-dining-image__preview img {
  display: block;
  max-width: 240px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
}

/* Without JS the enable checkbox can't reveal anything — show every field. */
.no-js .ao-dining-form__fields[hidden] {
  display: block !important;
}