/* ============================================================
   AccessAI Admin UI — scoped under #accessai-root
   ============================================================ */

:root {
  --aai-purple:      #3858e9;
  --aai-purple-dark: #2642c7;
  --aai-bg:          #f6f7f8;
  --aai-surface:     #ffffff;
  --aai-border:      #dde1e7;
  --aai-text:        #1e1e2e;
  --aai-muted:       #6b7280;
  --aai-critical:    #ef4444;
  --aai-serious:     #f97316;
  --aai-warning:     #f59e0b;
  --aai-notice:      #3b82f6;
  --aai-passed:      #22c55e;
  --aai-radius:      8px;
  --aai-shadow:      0 1px 3px rgba(0, 0, 0, .08);
}

/* Reset inside our root only */
#accessai-root * {
  box-sizing: border-box;
}

/* ── App shell ─────────────────────────────────────────────── */
.aai-app {
  display: flex;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
  background: var(--aai-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--aai-text);
}

/* ── Sidebar nav ───────────────────────────────────────────── */
.aai-nav {
  width: 250px;
  flex-shrink: 0;
  background: var(--aai-surface);
  border-right: 1px solid var(--aai-border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.aai-nav__brand {
  display: flex;
  align-items: center;
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--aai-border);
}

.aai-nav__logo {
  width: auto;
  max-width: 140px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.aai-nav__plan-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--aai-purple);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.aai-nav__score-badge {
  margin: 12px 16px 4px;
  padding: 4px 10px;
  background: var(--aai-purple);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.aai-nav__links {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.aai-nav__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--aai-muted);
  border-left: 3px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.aai-nav__link:hover {
  color: var(--aai-purple);
}

.aai-nav__link--active {
  color: var(--aai-purple);
  font-weight: 600;
  border-left-color: var(--aai-purple);
  background: #f3f1ff;
}

/* ── Main content area ─────────────────────────────────────── */
.aai-main {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
  min-width: 0; /* let flex children shrink below their content size instead of overflowing */
}

/* ── WordPress admin sidebar fix: reclaim full width on our plugin pages ──
   WP keeps the 160px left menu visible on small screens, pushing #wpcontent
   to the right and squeezing our app into ~230px.  Hide it and reset the
   margin only when our plugin page is active (this file is only loaded then). */
@media screen and (max-width: 782px) {
  #adminmenuwrap, #adminmenuback { display: none !important; }
  #wpcontent, #wpbody { margin-left: 0 !important; padding-left: 0 !important; }
}

/* WP core's default 20px left gutter on #wpcontent reads as a visible gap
   between the admin menu and our own sidebar nav, which already provides its
   own spacing. Zero it out on our plugin pages only (this file is only
   loaded then), at every screen width. */
#wpcontent { padding-left: 0; }

/* ── Mobile layout: sidebar becomes a horizontal scrollable tab bar ─── */
@media (max-width: 680px) {
  .aai-app { flex-direction: column; }

  .aai-nav {
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--aai-border);
  }

  .aai-nav__brand {
    flex-shrink: 0;
    padding: 10px 12px;
    border-bottom: none;
    border-right: 1px solid var(--aai-border);
  }

  .aai-nav__score-badge { display: none; }

  .aai-nav__links {
    display: flex;
    margin: 0;
    flex-shrink: 0;
  }

  .aai-nav__link {
    width: auto;
    white-space: nowrap;
    padding: 12px 14px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .aai-nav__link--active {
    border-left-color: transparent;
    border-bottom-color: var(--aai-purple);
  }

  .aai-main { padding: 16px; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.aai-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--aai-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}
/* Without the appearance reset above, some browsers render a disabled
   <button>'s text with a native system color that ignores author `color`
   entirely — the custom disabled tints elsewhere would otherwise show up
   as plain black text regardless of what's set. */

.aai-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.aai-btn--primary {
  background: var(--aai-purple);
  color: #fff;
}

.aai-btn--primary:hover:not(:disabled) {
  background: var(--aai-purple-dark);
}

.aai-btn--secondary {
  background: #eaedfc;
  color: var(--aai-purple-dark);
}

.aai-btn--ghost {
  background: transparent;
  border: 1px solid var(--aai-border);
  color: var(--aai-text);
}

.aai-btn--ghost:hover:not(:disabled) {
  background: var(--aai-bg);
}

/* ── Spinner ───────────────────────────────────────────────── */
.aai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: aai-spin .6s linear infinite;
}

@keyframes aai-spin { to { transform: rotate(360deg); } }

/* ── Score ring ────────────────────────────────────────────── */
.score-ring {
  position: relative;
  display: inline-flex;
}

.score-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.score-ring__score {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.score-ring__grade {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* ── Dashboard ─────────────────────────────────────────────── */
.aai-dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--aai-shadow);
}

.aai-dashboard__score-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.aai-dashboard__score-label {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.aai-dashboard__url,
.aai-dashboard__date {
  margin: 0;
  font-size: 12px;
  color: var(--aai-muted);
}

/* ── Stats row ─────────────────────────────────────────────── */
.aai-stats-disclaimer {
  font-size: 12px; color: var(--aai-muted); margin-bottom: 4px; line-height: 1.4;
  cursor: default;
}
.aai-stats-disclaimer span { border-bottom: 1px dashed var(--aai-muted); }
.aai-dashboard-tip {
  font-size: 12px; color: #374151; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: 6px;
  padding: 7px 12px; margin-bottom: 20px; line-height: 1.4;
}

/* ── Dashboard ─────────────────────────────────────────────── */
.aai-dashboard { max-width: 1100px; }

/* ── Dashboard body (full-width, detail opens as modal) ─────── */
.aai-dashboard__body {
  display: block;
}

.aai-dashboard__list-pane {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 16px 20px;
  box-shadow: var(--aai-shadow);
}

.aai-pane-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

/* ── Issue list ────────────────────────────────────────────── */
.issue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.issue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--aai-bg);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.issue-row:hover,
.issue-row--selected {
  border-color: var(--aai-purple);
  background: #f3f1ff;
}

.issue-row__badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 20px;
}

.issue-row__badge--critical { background: #fef2f2; color: var(--aai-critical); }
.issue-row__badge--serious  { background: #fff7ed; color: var(--aai-serious);  }
.issue-row__badge--warning  { background: #fffbeb; color: var(--aai-warning);  }
.issue-row__badge--notice   { background: #eff6ff; color: var(--aai-notice);   }

.issue-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.issue-row__title {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.issue-row__meta {
  font-size: 11px;
  color: var(--aai-muted);
}

.issue-row__count {
  font-size: 11px;
  color: var(--aai-muted);
}

.issue-row__arrow {
  color: var(--aai-muted);
  font-size: 16px;
}

/* ── Detail panel ──────────────────────────────────────────── */
.detail-panel {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px;
  box-shadow: var(--aai-shadow);
}

.detail-panel--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aai-muted);
  min-height: 180px;
}

.detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--aai-muted);
  padding: 2px 6px;
  border-radius: 4px;
}

.detail-panel__close:hover { background: var(--aai-bg); }

.detail-panel__title {
  margin: 0 0 12px;
  font-size: 15px;
}

.detail-panel__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13px;
  margin-bottom: 14px;
}

.detail-panel__meta dt { color: var(--aai-muted); }
.detail-panel__meta code { font-size: 12px; }

.detail-panel__description {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.detail-panel__code-block {
  background: #1e1e2e;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.detail-panel__code-label {
  font-size: 11px;
  color: #9ca3af;
  margin: 0 0 6px;
}

.detail-panel__code-block pre {
  margin: 0;
  font-size: 12px;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
}

.detail-panel__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Empty / loading / error states ───────────────────────── */
.aai-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--aai-muted);
}

.aai-empty__primary { font-size: 16px; font-weight: 600; color: var(--aai-text); margin-bottom: 6px; }
.aai-empty__sub { font-size: 13px; color: var(--aai-muted); max-width: 440px; margin: 0 auto; line-height: 1.5; }

.aai-empty__icon {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--aai-passed);
}

/* ── Skeleton shimmer ──────────────────────────────────────── */
@keyframes aai-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.aai-skel {
  display: block;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: aai-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.aai-loading { color: var(--aai-muted); padding: 20px 0; }
.aai-error   { color: var(--aai-critical); padding: 8px 0; }
.aai-muted   { color: var(--aai-muted); }

/* ── Report / Audit view ────────────────────────────────────── */
.aai-report { max-width: 1100px; }

/* Header */
.aai-audit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.aai-audit-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.aai-audit-site-url {
  display: block;
  font-size: 13px;
  color: var(--aai-purple);
  text-decoration: none;
  margin-bottom: 2px;
  word-break: break-all;
}
.aai-audit-site-url:hover { text-decoration: underline; }
.aai-audit-date { font-size: 12px; color: var(--aai-muted); }

.aai-audit-header-score { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.aai-audit-score-circle {
  width: 72px; height: 72px; border-radius: 50%;
  border: 4px solid;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.aai-audit-score-val  { font-size: 22px; font-weight: 800; line-height: 1; }
.aai-audit-score-lbl  { font-size: 10px; color: var(--aai-muted); }
.aai-audit-grade {
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Standard notice */
.aai-audit-standard {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: var(--aai-muted);
  padding: 8px 14px;
  background: var(--aai-bg);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  margin-bottom: 16px;
}
.aai-audit-standard strong { color: var(--aai-text); }

/* Summary bar */
.aai-audit-summary {
  display: flex; gap: 0;
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.aai-audit-summary-stat {
  flex: 1; padding: 14px 0; text-align: center;
  border-right: 1px solid var(--aai-border);
}
.aai-audit-summary-stat:last-child { border-right: none; }
.aai-audit-summary-val { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.aai-audit-summary-lbl { display: block; font-size: 11px; color: var(--aai-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

/* AI summary */
.aai-audit-ai-summary {
  background: #f8f7ff; border: 1px solid #ddd6fe;
  border-radius: var(--aai-radius); padding: 12px 16px;
  margin-bottom: 14px; font-size: 13px; line-height: 1.6;
}
.aai-audit-ai-summary strong { display: block; margin-bottom: 6px; color: var(--aai-purple); }
.aai-audit-ai-summary p { margin: 0; }
.aai-audit-ai-md { font-size: 13px; line-height: 1.6; color: var(--aai-text); }
.aai-audit-ai-md .md-p:last-child { margin-bottom: 0; }
.aai-audit-ai-md .md-pre { font-family: ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; word-break: break-word; }

/* ── Markdown output shared styles ── */
.md-h  { font-size: 13px; font-weight: 700; margin: 10px 0 4px; color: var(--aai-text); }
.md-p  { margin: 0 0 6px; }
.md-ul, .md-ol { margin: 4px 0 8px 18px; padding: 0; }
.md-ul li, .md-ol li { margin: 2px 0; }
.md-ic { background: #1e1e2e; color: #cdd6f4; padding: 1px 5px; border-radius: 3px; font-size: 12px; font-family: monospace; }
.md-pre { background: #1e1e2e; color: #cdd6f4; padding: 10px 12px; border-radius: 6px; font-size: 12px; overflow-x: auto; margin: 6px 0; }
.md-pre code { font-family: monospace; background: none; padding: 0; color: inherit; }

/* Toolbar */
.aai-audit-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.aai-audit-filter-btn {
  padding: 4px 12px; border: 1px solid #d1d5db;
  border-radius: 20px; background: #f3f4f6;
  color: #374151; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.aai-audit-filter-btn:hover { border-color: var(--aai-purple); color: var(--aai-purple); }
.aai-audit-filter-btn--active {
  background: var(--aai-purple); color: #fff; border-color: var(--aai-purple);
}
.aai-audit-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aai-audit-search {
  padding: 5px 10px; border: 1px solid var(--aai-border);
  border-radius: 6px; font-size: 13px; width: 200px;
  outline: none; background: #fff; color: var(--aai-text);
}
.aai-audit-search:focus { border-color: var(--aai-purple); box-shadow: 0 0 0 2px rgba(56,88,233,.15); }

/* Table */
.aai-audit-table-wrap {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  overflow-x: auto;
  margin-bottom: 16px;
}
.aai-audit-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.aai-audit-th {
  text-align: left; padding: 10px 12px;
  background: var(--aai-bg); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--aai-border);
  color: var(--aai-muted); white-space: nowrap;
}
.aai-audit-th--num { width: 40px; }

.aai-audit-row { transition: background .1s; }
.aai-audit-row:hover { background: #fafafa; }
.aai-audit-row--open { background: #f8f7ff; }

.aai-audit-td {
  padding: 10px 12px; border-bottom: 1px solid var(--aai-border);
  vertical-align: middle; color: var(--aai-text);
}
.aai-audit-td--num   { font-size: 12px; font-weight: 600; color: var(--aai-muted); width: 40px; }
.aai-audit-td--title { font-weight: 500; max-width: 280px; }
.aai-audit-td--users { font-size: 12px; color: var(--aai-muted); white-space: nowrap; }
.aai-audit-td--count { text-align: center; font-weight: 600; }
.aai-audit-td--chevron { font-size: 10px; color: var(--aai-muted); width: 28px; text-align: center; }

.aai-audit-link {
  font-size: 12px; color: var(--aai-purple); text-decoration: none;
  max-width: 180px; display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.aai-audit-link:hover { text-decoration: underline; }
.aai-audit-page-url {
  display: block; font-size: 11px; color: var(--aai-muted);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aai-audit-wcag {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--aai-purple); text-decoration: none;
  background: #eaedfc; padding: 2px 7px; border-radius: 4px;
}
.aai-audit-wcag:hover { text-decoration: underline; }

.aai-audit-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-transform: capitalize; white-space: nowrap;
}

/* Expanded detail row */
.aai-audit-detail-row td { padding: 0; border-bottom: 1px solid var(--aai-border); }
.aai-audit-detail {
  padding: 16px 20px;
  background: #f8f7ff;
  border-top: 1px solid #ddd6fe;
}
.aai-audit-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.aai-audit-detail-full { grid-column: 1 / -1; }
.aai-audit-detail-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--aai-muted); margin: 0 0 5px;
}
.aai-audit-detail-text {
  font-size: 13px; color: var(--aai-text); line-height: 1.6; margin: 0;
}
.aai-audit-detail-code {
  display: block; background: #f3f4f6; padding: 4px 8px;
  border-radius: 4px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  word-break: break-all; color: var(--aai-text);
}
.aai-audit-detail-pre {
  display: block; background: #1e1e2e; color: #cdd6f4;
  padding: 10px 12px; border-radius: 6px;
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, monospace;
  overflow-x: auto; white-space: pre; margin: 0;
}
.aai-audit-detail-link {
  font-size: 13px; color: var(--aai-purple); text-decoration: none; font-weight: 500;
}
.aai-audit-detail-link:hover { text-decoration: underline; }

/* Report top notice */
.aai-audit-notice {
  font-size: 13px; color: #374151; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 6px;
  padding: 10px 14px; margin-bottom: 16px; line-height: 1.5;
}

/* Footer note */
.aai-audit-footer-note {
  font-size: 12px; color: var(--aai-muted); line-height: 1.6;
  padding-top: 12px; border-top: 1px solid var(--aai-border);
}

/* Legacy — keep for backward compat */
.aai-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--aai-surface); border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius); overflow: hidden; box-shadow: var(--aai-shadow);
}
.aai-table th {
  text-align: left; padding: 10px 14px; background: var(--aai-bg);
  font-weight: 600; border-bottom: 1px solid var(--aai-border);
}
.aai-table td { padding: 10px 14px; border-bottom: 1px solid var(--aai-border); vertical-align: top; }
.aai-table tr:last-child td { border-bottom: none; }

/* ── Settings ──────────────────────────────────────────────── */
.aai-settings {
  max-width: 1100px;
}

.aai-settings h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.aai-settings__section {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px 24px;
  margin: 20px 0;
  box-shadow: var(--aai-shadow);
}

.aai-settings__section h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

/* ── Form fields ───────────────────────────────────────────── */
.aai-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.aai-field span,
.aai-field label {
  font-weight: 600;
  font-size: 13px;
}

.aai-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.aai-field--inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  order: -1;
}

.aai-field input[type="text"],
.aai-field input[type="password"] {
  padding: 0 8px;
  height: 30px;
  border: 1px solid #8c8f94;
  border-radius: 3px;
  font-size: 14px;
  background: #fff;
  color: #2c3338;
  width: 100%;
}

.aai-field input[type="text"]:focus,
.aai-field input[type="password"]:focus {
  border-color: #2271b1;
  outline: 2px solid #2271b1;
  outline-offset: 0;
}

.aai-field--fieldset {
  border: none;
  padding: 0;
  margin: 0 0 14px;
}

.aai-field--fieldset legend {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}

.aai-radio,
.aai-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
  cursor: pointer;
}

.aai-field__key-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.aai-field__key-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--aai-bg);
}

/* ── Accessibility Statement Generator ────────────────────── */

.aai-statement { max-width: 1100px; }

.aai-statement__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.aai-stmt-card {
  background: #fff;
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 28px 32px;
  margin-bottom: 16px;
}

.aai-stmt-warning {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--aai-radius);
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 13px;
}

.aai-stmt-card__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--aai-border);
}

/* Stepper */
.aai-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 4px;
}

.aai-stepper__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aai-stepper__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  background: #fff;
  flex-shrink: 0;
}

.aai-stepper__num--done {
  background: var(--aai-purple);
  border-color: var(--aai-purple);
  color: #fff;
}

.aai-stepper__num--active {
  border-color: var(--aai-purple);
  color: var(--aai-purple);
}

.aai-stepper__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--aai-purple);
  background: #eaedfc;
  border: 1.5px solid var(--aai-purple);
  border-radius: 20px;
  padding: 3px 12px;
  white-space: nowrap;
}

.aai-stepper__line {
  width: 40px;
  height: 2px;
  background: #e5e7eb;
  flex-shrink: 0;
}

.aai-stepper__line--done { background: var(--aai-purple); }

/* On a narrow screen, 5 circles + connecting lines + the active step's label
   pill (its text varies per step, up to "Basic Information") don't fit on
   one line — flex-wrap then breaks mid-sequence whenever a step happens to
   land right where its label no longer fits, producing an uneven staircase
   rather than a clean row. The label pill is also redundant here: the
   step's own heading (.aai-stmt-step h4) repeats the same text right below.
   Drop the label and shrink circles/lines instead, so the whole stepper
   reliably fits as a single tidy row. */
@media (max-width: 480px) {
  .aai-stepper { flex-wrap: nowrap; justify-content: center; gap: 4px; margin-bottom: 20px; }
  .aai-stepper__item { gap: 4px; }
  .aai-stepper__num { width: 26px; height: 26px; font-size: 11px; }
  .aai-stepper__line { width: 14px; }
  .aai-stepper__label { display: none; }
}

/* Step content */
.aai-stmt-step h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

.aai-stmt-field {
  margin: 0 0 18px;
  /* Reset native fieldset chrome — some groups render as <fieldset>. */
  border: none;
  padding: 0;
  min-width: 0;
}

.aai-stmt-field__label {
  display: block;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.aai-stmt-field__hint {
  font-size: 12px;
  font-style: italic;
  color: var(--aai-muted);
  margin: 0 0 6px;
}

.aai-stmt-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  font-size: 14px;
  color: #2c3338;
  background: #fff;
  box-sizing: border-box;
}

.aai-stmt-input:focus {
  outline: 2px solid #2271b1;
  border-color: #2271b1;
}

.aai-stmt-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  font-size: 14px;
  color: #2c3338;
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}

.aai-stmt-textarea:focus {
  outline: 2px solid #2271b1;
  border-color: #2271b1;
}

/* Check group */
.aai-check-group { display: flex; flex-direction: column; gap: 10px; }

.aai-check-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

/* Hand-painted via a sibling <span>, not ::after on the <input> itself —
   iOS Safari/WebKit doesn't reliably render generated content on form
   controls, which is why the previous ::after-on-input tick didn't show up
   there. The native checkbox is kept (for click/keyboard/screen-reader
   behavior) but visually hidden; .aai-check-box is the box everyone sees. */
.aai-check-item input.aai-check-input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.aai-check-item .aai-check-box {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--aai-border);
  border-radius: 4px;
  background: #fff;
  transition: background-color .15s, border-color .15s;
}

.aai-check-item input.aai-check-input:checked + .aai-check-box {
  background: var(--aai-purple);
  border-color: var(--aai-purple);
}

.aai-check-item input.aai-check-input:checked + .aai-check-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.aai-check-item input.aai-check-input:focus-visible + .aai-check-box {
  outline: 2px solid var(--aai-purple);
  outline-offset: 2px;
}

/* Radio group */
.aai-radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.aai-radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.aai-radio-item input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--aai-purple);
}

.aai-radio-item--desc {
  align-items: flex-start;
}

.aai-radio-item--desc input[type="radio"] {
  margin-top: 2px;
}

.aai-radio-item--desc p {
  font-size: 12px;
  color: var(--aai-muted);
  margin: 2px 0 0;
}

/* Additional efforts */
.aai-stmt-add-btn {
  background: none;
  border: none;
  color: var(--aai-purple);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.aai-stmt-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.aai-stmt-add-row .aai-stmt-input { flex: 1; }

/* Info box */
.aai-stmt-info-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  color: #1e40af;
  margin-top: 16px;
}

/* Navigation */
.aai-stmt-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--aai-border);
}

/* Success state */
.aai-stmt-success {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.aai-stmt-success__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aai-stmt-success__title { font-size: 16px; font-weight: 700; }
.aai-stmt-success__date  { font-size: 12px; color: var(--aai-muted); margin-top: 2px; }

.aai-stmt-success__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Toggle */
.aai-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  background: #d1d5db;
  position: relative;
  cursor: pointer;
  transition: background .18s;
  flex-shrink: 0;
}

.aai-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.aai-toggle--on { background: var(--aai-purple); }
.aai-toggle--on::after { transform: translateX(20px); }

/* ── Widget configurator ───────────────────────────────────── */
.aai-widget-config { max-width: 1100px; }
.aai-widget-config h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.aai-widget-config__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .aai-widget-config__body { grid-template-columns: 1fr; }
}

.aai-widget-config__controls {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px;
  box-shadow: var(--aai-shadow);
  position: sticky;
  top: 20px;
}

.aai-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aai-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--aai-purple);
}

.aai-slider-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--aai-text);
  min-width: 46px;
  text-align: right;
}

.aai-widget-config__preview {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px 24px;
  box-shadow: var(--aai-shadow);
  position: sticky;
  top: 20px;
}

.aai-widget-config__preview h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}

/* widget-preview styles replaced by inline scoped CSS in WidgetConfigurator.tsx */

/* ── Issues by page chart ──────────────────────────────────── */
.aai-trend-card {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 16px 20px 14px;
  margin-bottom: 20px;
  box-shadow: var(--aai-shadow);
}

.aai-chart-sub {
  font-size: 12px;
  color: var(--aai-muted);
  margin: -6px 0 14px;
}

.aai-chart-empty {
  font-size: 13px;
  color: var(--aai-muted);
  margin: 0;
}

.aai-ibc { display: flex; flex-direction: column; gap: 9px; }

.aai-ibc__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aai-ibc__label {
  width: 130px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--aai-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aai-ibc__label--link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.aai-ibc__label--link:hover {
  color: var(--aai-purple);
  text-decoration-color: var(--aai-purple);
}

.aai-ibc__track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.aai-ibc__bar {
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  min-width: 4px;
  transition: width .3s ease;
}

.aai-ibc__seg { display: block; }
.aai-ibc__seg--critical { background: var(--aai-critical); }
.aai-ibc__seg--serious  { background: var(--aai-serious);  }
.aai-ibc__seg--warning  { background: var(--aai-warning);  }
.aai-ibc__seg--notice   { background: var(--aai-notice);   }

.aai-ibc__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--aai-muted);
  flex-shrink: 0;
  min-width: 20px;
}

.aai-ibc__legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--aai-border);
}

.aai-ibc__legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--aai-muted);
}

.aai-ibc__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  font-style: normal;
}
.aai-ibc__dot--critical { background: var(--aai-critical); }
.aai-ibc__dot--serious  { background: var(--aai-serious);  }
.aai-ibc__dot--warning  { background: var(--aai-warning);  }
.aai-ibc__dot--notice   { background: var(--aai-notice);   }

/* ── AI suggestion block ───────────────────────────────────── */
.detail-panel__ai-output {
  margin-top: 14px;
  background: #f8f7ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 12px 14px;
}

.detail-panel__ai-md {
  font-size: 13px;
  line-height: 1.6;
  color: var(--aai-text);
}
.detail-panel__ai-md .md-p:last-child { margin-bottom: 0; }
.detail-panel__ai-md .md-pre { font-family: ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; word-break: break-word; }

.detail-panel__ai-hint {
  margin-top: 10px;
  font-size: 12px;
}

/* ── Success / key-set indicator ───────────────────────────── */
.aai-success {
  color: #16a34a;
  font-size: 13px;
  font-weight: 600;
}

.aai-key-set {
  font-weight: 400;
  font-size: 12px;
  color: var(--aai-muted);
  margin-left: 6px;
}

.aai-required {
  color: var(--aai-critical);
  margin-left: 2px;
}

/* ── Settings save row ─────────────────────────────────────── */
.aai-settings__save-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Dark spinner (for ghost/light buttons) ────────────────── */
.aai-spinner--dark {
  border-color: rgba(0, 0, 0, .2);
  border-top-color: var(--aai-text);
}

/* ── Screen-reader only ────────────────────────────────────── */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── Page / Post scanner ───────────────────────────────────── */
.aai-page-scanner { max-width: 1100px; }

.aai-page-scanner__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.aai-page-scanner__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--aai-muted);
}

/* Progress bar */
.aai-progress-bar {
  height: 6px;
  background: var(--aai-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

.aai-progress-bar__fill {
  height: 100%;
  background: var(--aai-purple);
  border-radius: 3px;
  transition: width .3s ease;
}

/* Scan table */
.aai-scan-table-wrap {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  overflow-x: auto;
}

.aai-scan-table {
  width: 100%;
  border-collapse: collapse;
}

/* PageScanner's table uses auto layout like any other .aai-scan-table, which
   sizes each column off whatever's currently in it — fine for a static
   table, but during "Run Accessibility Scan" each row's Score/Issues/Last
   Scanned cells flip from a bare "—" to real values one row at a time, and
   every one of those changes re-measures and resizes columns across the
   WHOLE table, making every row visibly shift position (reported as a
   "zig-zag"). Fixed widths, set once from the header, stop that reflow. */
.aai-page-scanner .aai-scan-table { table-layout: fixed; }
.aai-page-scanner .aai-scan-table th { white-space: normal; }
.aai-page-scanner .aai-scan-table th:nth-child(1) { width: 36%; }
.aai-page-scanner .aai-scan-table th:nth-child(2) { width: 10%; }
.aai-page-scanner .aai-scan-table th:nth-child(3) { width: 10%; }
.aai-page-scanner .aai-scan-table th:nth-child(4) { width: 10%; }
.aai-page-scanner .aai-scan-table th:nth-child(5) { width: 14%; }
.aai-page-scanner .aai-scan-table th:nth-child(6) { width: 20%; }

.aai-scan-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--aai-bg);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--aai-muted);
  border-bottom: 1px solid var(--aai-border);
  white-space: nowrap;
}

.aai-scan-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--aai-border);
  vertical-align: middle;
}

.aai-scan-table tbody tr:last-child td { border-bottom: none; }

.aai-scan-table tbody tr:hover { background: #fafafe; }

.aai-scan-table__link {
  color: var(--aai-text);
  font-weight: 500;
  text-decoration: none;
}
.aai-scan-table__link:hover { color: var(--aai-purple); text-decoration: underline; }

.aai-scan-table__url {
  font-size: 11px;
  color: var(--aai-muted);
  margin-top: 2px;
  word-break: break-all;
}

.aai-scan-table__score {
  font-size: 13px;
  font-weight: 500;
}

/* Type badge */
.aai-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #f3f1ff;
  color: var(--aai-purple);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Small action button (used inside table rows) */
.aai-btn--sm {
  padding: 5px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.aai-page-scanner .aai-btn--ghost,
.aai-ps-toolbar .aai-btn--ghost {
  color: var(--aai-purple);
  border-color: var(--aai-purple);
}
.aai-page-scanner .aai-btn--ghost:hover,
.aai-ps-toolbar .aai-btn--ghost:hover { background: #f3f1ff; }
.aai-btn--active {
  background: var(--aai-purple);
  color: #fff;
}

/* Active row highlight */
.aai-scan-table__row--active td { background: #f3f1ff; }

/* Split layout: table + results panel side by side */
.aai-ps-layout {
  display: block;
}

/* ── Results modal ─────────────────────────────────────────── */
/* ── Scan slide-in panel (replaces ps-modal popup) ─────────── */

.ssi-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 999980;
  transition: background .25s ease;
  pointer-events: none;
}
.ssi-backdrop--visible {
  background: rgba(0, 0, 0, .35);
  pointer-events: auto;
}

.ssi-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 28px rgba(0, 0, 0, .18);
  z-index: 999990;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.ssi-panel--open { transform: translateX(0); }

.ssi-hd {
  padding: 14px 18px;
  background: var(--aai-purple);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.ssi-hd__left { flex: 1; min-width: 0; }
.ssi-hd__title { display: block; font-size: 14px; font-weight: 600; }
.ssi-hd__url {
  display: block;
  font-size: 11px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.ssi-hd__close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  opacity: .8;
}
.ssi-hd__close:hover { opacity: 1; }

.ssi-score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}
.ssi-score__grade {
  font-size: 22px;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ssi-score__val { font-size: 20px; font-weight: 700; line-height: 1.1; }
.ssi-score__val small { font-size: 12px; font-weight: 400; color: var(--aai-muted); }
.ssi-score__sub { font-size: 11px; color: var(--aai-muted); margin-top: 2px; }
.ssi-ruleset-badge { display: inline-block; margin-top: 6px; text-transform: none; }

.ssi-filters {
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}
.ssi-filters::-webkit-scrollbar { display: none; }

/* Sliding two-pane container */
.ssi-views {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.ssi-list-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.ssi-list-view--out { transform: translateX(-100%); }

.ssi-detail-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.ssi-detail-view--in { transform: translateX(0); }

.ssi-detail-body { padding: 16px 18px; }

.ssi-detail-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ssi-detail-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--aai-text);
  line-height: 1.35;
}

.ssi-detail-desc {
  font-size: 13px;
  color: var(--aai-muted);
  margin: 0 0 14px;
  line-height: 1.55;
}

.ssi-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--aai-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 14px;
}
.ssi-back:hover { color: var(--aai-purple); }

.ssi-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
}

.ssi-issue {
  border-left: 3px solid var(--aai-border);
  margin-bottom: 8px;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
.ssi-issue__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}
.ssi-issue__main { flex: 1; min-width: 0; }
.ssi-issue__title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ssi-issue__meta { display: block; font-size: 11px; color: var(--aai-muted); margin-top: 2px; }
.ssi-issue__count { display: block; font-size: 11px; color: var(--aai-muted); margin-top: 2px; }

/* ── Page results side-panel ───────────────────────────────── */
.ps-panel {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  overflow: hidden;
  position: sticky;
  top: 20px;
}

.ps-panel__hd {
  padding: 14px 16px;
  background: var(--aai-purple);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.ps-panel__title { font-size: 14px; font-weight: 600; }

.ps-panel__url {
  font-size: 11px;
  opacity: .75;
  word-break: break-all;
  margin-top: 2px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-panel__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.ps-panel__score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}

.ps-panel__grade {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.ps-panel__score-val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}
.ps-panel__score-val small { font-size: 12px; font-weight: 400; color: var(--aai-muted); }
.ps-panel__score-sub { font-size: 11px; color: var(--aai-muted); margin-top: 2px; }

.ps-panel__filters {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.ps-filter-btn {
  padding: 3px 10px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ps-filter-btn:hover { border-color: var(--aai-purple); color: var(--aai-purple); background: #eaedfc; }
.ps-filter-btn--active {
  background: var(--aai-purple);
  color: #fff;
  border-color: var(--aai-purple);
}
.ps-filter-btn--pass { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.ps-filter-btn--pass:hover { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.ps-filter-btn--pass.ps-filter-btn--active { background: #22c55e; border-color: #22c55e; color: #fff; }

.ps-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px;
}

.ps-panel__empty {
  text-align: center;
  color: var(--aai-passed);
  padding: 24px 0;
  font-size: 13px;
}
.ps-panel__empty-sub {
  font-size: 12px;
  color: var(--aai-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Passed-check accordion (Passed tab) ────────────────────── */
.ps-pass-list { display: flex; flex-direction: column; }
.ps-pass-item {
  border-left: 3px solid #22c55e;
  margin-bottom: 6px;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
.ps-pass-item__hd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #f0fdf4;
  cursor: pointer;
  user-select: none;
}
.ps-pass-item__hd-text { flex: 1; }
.ps-pass-item__title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  line-height: 1.3;
}
.ps-pass-item__meta {
  display: block;
  font-size: 11px;
  color: #4ade80;
  margin-top: 1px;
}
.ps-pass-item__chevron {
  font-size: 10px;
  color: #4ade80;
  padding-top: 3px;
  flex-shrink: 0;
}
.ps-pass-item__body {
  padding: 8px 10px;
  border-top: 1px solid #bbf7d0;
  background: #fff;
  font-size: 12px;
  color: #374151;
  line-height: 1.5;
}
.ps-pass-item__body p { margin: 0 0 6px; }
.ps-pass-item__body a { font-size: 12px; color: var(--aai-purple); }

/* ── Issue cards inside the results panel ──────────────────── */
.ps-issue {
  border-left: 3px solid var(--aai-border);
  margin-bottom: 8px;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
.ps-issue:focus-visible { box-shadow: 0 0 0 2px var(--aai-purple); }
.ps-issue--critical { border-color: var(--aai-critical); }
.ps-issue--serious  { border-color: var(--aai-serious); }
.ps-issue--warning  { border-color: var(--aai-warning); }
.ps-issue--notice   { border-color: var(--aai-notice); }

.ps-issue__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(0, 0, 0, .025);
  user-select: none;
}

.ps-issue__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.ps-issue__dot--critical { background: var(--aai-critical); }
.ps-issue__dot--serious  { background: var(--aai-serious); }
.ps-issue__dot--warning  { background: var(--aai-warning); }
.ps-issue__dot--notice   { background: var(--aai-notice); }

.ps-issue__main { flex: 1; min-width: 0; }
.ps-issue__title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ps-issue__meta  { display: block; font-size: 11px; color: var(--aai-muted); margin-top: 2px; }

.ps-issue__chevron { font-size: 10px; color: var(--aai-muted); padding-top: 3px; flex-shrink: 0; }

.ps-issue__detail {
  padding: 10px 10px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  font-size: 13px;
}

.ps-issue__desc { margin: 0 0 8px; color: var(--aai-text); }

.ps-issue__field { margin-bottom: 8px; }
.ps-issue__field:last-child { margin-bottom: 0; }

.ps-issue__field-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--aai-muted);
  margin-bottom: 4px;
}

.ps-issue__code {
  display: block;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  word-break: break-all;
}

.ps-issue__learn {
  display: inline-block;
  font-size: 11px;
  color: var(--aai-purple);
  text-decoration: none;
  margin-top: 6px;
}
.ps-issue__learn:hover { text-decoration: underline; }

.ps-issue__pre {
  display: block;
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* ── Type filter pills ─────────────────────────────────────── */
/* ── Pages & Posts toolbar ─────────────────────────────────── */

.aai-ps-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.aai-ps-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 340px;
  width: 100%;
}

.aai-ps-search-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--aai-muted);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.aai-ps-search {
  width: 100%;
  padding: 7px 30px 7px 34px !important;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--aai-text);
  background: #fff;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}

.aai-ps-search:focus {
  border-color: var(--aai-purple);
}

.aai-ps-search::-webkit-search-cancel-button { display: none; }

.aai-ps-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--aai-muted);
  padding: 2px 4px;
  line-height: 1;
}

.aai-ps-search-clear:hover { color: var(--aai-text); }

/* ── Type filter searchable dropdown ──────────────────────── */

.aai-type-dd-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.aai-type-dd-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--aai-muted);
  white-space: nowrap;
}

.aai-type-dd {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
}

.aai-type-dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--aai-text);
  cursor: pointer;
  transition: border-color .15s;
  min-width: 160px;
}
.aai-type-dd__trigger:hover { border-color: var(--aai-purple); }

.aai-type-dd__label { flex: 1; text-align: left; }

.aai-type-dd__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--aai-bg);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--aai-muted);
}

.aai-type-dd__chevron { font-size: 9px; color: var(--aai-muted); }

.aai-type-dd__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--aai-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  z-index: 200;
  overflow: hidden;
}

.aai-type-dd__search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--aai-border);
}

.aai-type-dd__search {
  width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--aai-border);
  border-radius: 5px;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.aai-type-dd__search:focus { border-color: var(--aai-purple); }

.aai-type-dd__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 220px;
  overflow-y: auto;
}

.aai-type-dd__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--aai-text);
  transition: background .1s;
}
.aai-type-dd__option:hover { background: var(--aai-bg); }
.aai-type-dd__option--active {
  background: #eaedfc;
  color: var(--aai-purple);
  font-weight: 600;
}
.aai-type-dd__option--active:hover { background: #dde3fa; }

.aai-type-dd__opt-count {
  font-size: 11px;
  color: var(--aai-muted);
  font-weight: 400;
}
.aai-type-dd__option--active .aai-type-dd__opt-count { color: var(--aai-purple); }

.aai-type-dd__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--aai-muted);
  text-align: center;
}

/* ── Pagination ────────────────────────────────────────────── */
.aai-ps-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--aai-border);
  margin-top: 8px;
}

.aai-ps-page-info {
  font-size: 12px;
  color: var(--aai-muted);
}

/* ── Issue Detail Modal (IDM) ──────────────────────────────── */
.idm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 999995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

@keyframes ps-modal-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1);   }
}

.idm {
  background: var(--aai-surface);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ps-modal-in .18s ease-out;
}

.idm-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}

.idm-hd-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.idm-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 9px;
  border-radius: 20px;
}
.idm-badge--critical { background: #fef2f2; color: var(--aai-critical); }
.idm-badge--serious  { background: #fff7ed; color: var(--aai-serious);  }
.idm-badge--warning  { background: #fffbeb; color: var(--aai-warning);  }
.idm-badge--notice   { background: #eff6ff; color: var(--aai-notice);   }

.idm-wcag {
  font-size: 11px;
  font-weight: 600;
  color: var(--aai-muted);
  background: var(--aai-bg);
  border: 1px solid var(--aai-border);
  border-radius: 4px;
  padding: 2px 8px;
}

.idm-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--aai-muted);
  padding: 0 4px;
  border-radius: 4px;
}
.idm-close:hover { background: var(--aai-bg); color: var(--aai-text); }

.idm-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.idm-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.idm-desc {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--aai-text);
}
.idm-review-hint {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--aai-muted);
  line-height: 1.5;
  font-style: italic;
}

.idm-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 12px;
  margin-bottom: 14px;
}
.idm-meta dt { color: var(--aai-muted); align-self: center; }
.idm-meta dd { margin: 0; }

.idm-code {
  font-size: 12px;
  background: var(--aai-bg);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.idm-section { margin-bottom: 14px; }

.idm-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--aai-muted);
  margin: 0 0 4px;
}

.idm-pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ── Affected-elements accordion (ScanSlideIn detail view) ─── */

.idm-node-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.idm-node-item {
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s;
}

.idm-node-item--open { border-color: var(--idm-node-color, #ef4444); }

.idm-node-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
  user-select: none;
}

.idm-node-hd:hover { background: #fafafa; }

.idm-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--idm-node-color, #ef4444);
}

.idm-node-sel {
  flex: 1;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.idm-node-chevron {
  font-size: 13px;
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform .2s;
  line-height: 1;
}

.idm-node-item--open .idm-node-chevron { transform: rotate(90deg); }

.idm-node-body {
  display: none;
  border-top: 1px solid #e5e7eb;
}

.idm-node-item--open .idm-node-body { display: block; }

.idm-learn {
  display: inline-block;
  font-size: 12px;
  color: var(--aai-purple);
  text-decoration: none;
  margin-bottom: 16px;
}
.idm-learn:hover { text-decoration: underline; }

.idm-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--aai-border);
}

.idm-ai-hint {
  margin-top: 10px;
  font-size: 12px;
}

.idm-ai-output {
  margin-top: 14px;
  background: #f8f7ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 12px 14px;
}

.idm-ai-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--aai-purple);
  margin: 0 0 4px;
}
.idm-ai-disclaimer {
  font-size: 11px;
  color: var(--aai-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}

.idm-ai-md {
  font-size: 13px;
  line-height: 1.6;
  color: var(--aai-text);
}
.idm-ai-md .md-p:last-child { margin-bottom: 0; }
.idm-ai-md .md-pre { font-family: ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; word-break: break-word; }

/* ── Affected-element selector tooltip (portal, escapes panel transform) ── */
.ssi-node-tip {
  z-index: 1000001; /* must exceed ssi-panel's z-index: 999990 */
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  pointer-events: none;
  line-height: 1.5;
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ── Issue card details button ─────────────────────────────── */
.ps-issue__details-btn {
  flex-shrink: 0;
  margin-left: auto;
}
.ps-issue { cursor: default; }

/* ── Responsive fixes ──────────────────────────────────────── */

/* Stats row: wrap on narrow screens */
@media (max-width: 560px) {
  .aai-audit-summary { flex-wrap: wrap; }
  .aai-audit-summary-stat {
    min-width: 33%;
    border-right: none;
    border-bottom: 1px solid var(--aai-border);
  }
  .aai-audit-summary-stat:last-child { border-bottom: none; }
}

/* PageScanner/ReportView toolbar: wrap search + filter on mobile */
@media (max-width: 600px) {
  .aai-ps-toolbar { flex-wrap: wrap; }
  .aai-ps-search-wrap { max-width: 100%; }
}

/* ScanSlideIn: full-screen on mobile — disable backdrop click, add safe area */
@media (max-width: 480px) {
  .ssi-panel { border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ssi-backdrop--visible { pointer-events: none; }
}

/* Audit table detail grid: single column on mobile */
@media (max-width: 600px) {
  .aai-audit-detail-grid { grid-template-columns: 1fr !important; }
}

/* Widget configurator: disable sticky on single-column layout */
@media (max-width: 860px) {
  .aai-widget-config__controls,
  .aai-widget-config__preview { position: static; }
}

/* ── Onboarding hero (Dashboard first-run state) ──────────────── */
.aai-hero { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }

.aai-hero__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(135deg, #eef3ff 0%, #f3eeff 100%);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 32px;
}

.aai-hero__copy { flex: 1 1 420px; min-width: 260px; }

.aai-hero__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--aai-purple);
  margin-bottom: 8px;
}

.aai-hero__title { font-size: 32px; line-height: 1.2; margin: 0 0 12px; color: var(--aai-text); }

.aai-hero__sub { font-size: 14px; color: var(--aai-muted); max-width: 440px; margin: 0 0 20px; line-height: 1.6; }

.aai-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.aai-hero__cta { padding: 10px 20px; }

.aai-hero__art { flex: 0 0 auto; position: relative; width: 220px; height: 180px; }

.aai-hero__mock {
  position: absolute;
  inset: 0 40px 20px 0;
  background: var(--aai-surface);
  border-radius: 12px;
  box-shadow: var(--aai-shadow);
  padding: 14px;
}

.aai-hero__mock-dots { display: flex; gap: 4px; margin-bottom: 12px; }
.aai-hero__mock-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--aai-border); display: block; }

.aai-hero__mock-img { width: 44px; height: 34px; border-radius: 6px; background: #dde4fb; margin-bottom: 10px; }

.aai-hero__mock-line { height: 6px; border-radius: 3px; background: var(--aai-border); margin-bottom: 8px; }

.aai-hero__glass {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--aai-purple);
  box-shadow: 0 6px 16px rgba(56, 88, 233, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aai-hero__glass img { width: 40px; height: 40px; }

.aai-hero__features {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 24px;
}

.aai-hero__features-title { margin: 0 0 16px; font-size: 15px; font-weight: 700; }

.aai-hero__feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.aai-hero__feature {
  background: var(--aai-bg);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 16px;
}

.aai-hero__feature strong { display: block; font-size: 14px; margin: 10px 0 4px; }
.aai-hero__feature p { margin: 0; font-size: 12.5px; color: var(--aai-muted); line-height: 1.5; }

.aai-hero__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
}

.aai-hero__feature-icon--score    { background: var(--aai-passed);  color: #fff; }
.aai-hero__feature-icon--severity { background: var(--aai-critical); color: #fff; }
.aai-hero__feature-icon--passed   { background: #dbeafe; color: var(--aai-notice); }
.aai-hero__feature-icon--ai       { background: #ece9fe; color: var(--aai-purple); }

.aai-hero__steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #eef3ff 0%, #f3eeff 100%);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px 24px;
}

.aai-hero__steps-intro { flex: 0 0 240px; }
.aai-hero__steps-intro strong { display: block; font-size: 15px; margin-bottom: 4px; }
.aai-hero__steps-intro p { margin: 0; font-size: 12.5px; color: var(--aai-muted); }

.aai-hero__steps-list { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.aai-hero__step { display: flex; align-items: flex-start; gap: 10px; max-width: 180px; }

.aai-hero__step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #dde4fb;
  color: var(--aai-purple);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aai-hero__step strong { display: block; font-size: 13.5px; }
.aai-hero__step p { margin: 2px 0 0; font-size: 12px; color: var(--aai-muted); line-height: 1.4; }

.aai-hero__step-arrow { color: var(--aai-muted); font-size: 18px; margin-top: 4px; }

@media (max-width: 860px) {
  .aai-hero__card { flex-direction: column; align-items: stretch; }
  .aai-hero__art { align-self: center; }
  .aai-hero__feature-grid { grid-template-columns: repeat(2, 1fr); }
  .aai-hero__steps { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  .aai-hero__card { padding: 20px; }
  .aai-hero__title { font-size: 24px; }
  .aai-hero__feature-grid { grid-template-columns: 1fr; }
  .aai-hero__step-arrow { display: none; }
}

/* ── Widget offset controls (Vertical/Horizontal spacing) ──── */
.aai-offset-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aai-offset-row input[type="range"] {
  flex: 1;
}

.aai-offset-input {
  /* Wide enough for a 3-digit value (up to the 500 max this field allows)
     plus the native number-input spinner arrows, which otherwise crowd out
     a right-aligned value at this font-size. */
  width: 64px;
  padding: 4px 4px 4px 6px;
  border: 1px solid #8c8f94;
  border-radius: 3px;
  font-size: 13px;
  text-align: center;
}

/* ── Print (Report → Export PDF via browser print-to-PDF) ──── */
.aai-print-only { display: none; }

.aai-audit-print-page { break-inside: avoid-page; margin-bottom: 18px; }
.aai-audit-print-page-title { margin: 0 0 2px; font-size: 15px; }
.aai-audit-print-page-url { font-size: 11px; color: var(--aai-muted); margin-bottom: 8px; word-break: break-all; }
.aai-audit-print-table .aai-audit-td,
.aai-audit-print-table .aai-audit-th { font-size: 11px; }

@media print {
  #wpadminbar, #adminmenumain, #adminmenuback, #adminmenuwrap,
  #wpfooter, #screen-meta-links, .notice, .update-nag {
    display: none !important;
  }
  #wpcontent, #wpbody, #wpbody-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  .aai-print-hide {
    display: none !important;
  }
  .aai-print-only {
    display: block !important;
  }
  /* The 200px sidebar nav was still taking up layout width when printing,
     squeezing the audit table into less than a page's width — since
     .aai-audit-table-wrap scrolls horizontally on screen (overflow-x: auto),
     printing has no scrollbar to fall back on and just clips whatever
     doesn't fit, cutting off the rightmost column(s). Hide the sidebar and
     let .aai-main reclaim the full page width so the table actually fits. */
  .aai-nav {
    display: none !important;
  }
  .aai-main {
    padding: 0 !important;
  }
  .aai-audit-table-wrap {
    overflow-x: visible !important;
  }
}

/* ── Media Accessibility ───────────────────────────────────── */
.aai-media { max-width: 1100px; }

.aai-media__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.aai-media__title { margin: 0 0 4px; font-size: 24px; font-weight: 800; }
.aai-media__sub   { margin: 0; color: var(--aai-muted); font-size: 13px; max-width: 640px; }

.aai-media__header-link {
  flex-shrink: 0;
  background: var(--aai-surface);
  border-color: var(--aai-purple);
  color: var(--aai-purple);
  font-weight: 700;
  text-decoration: underline;
}
.aai-media__header-link:hover { background: #eef1ff; }

.aai-media-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  padding: 24px 28px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.aai-media-card__copy  { flex: 1 1 320px; }
.aai-media-card__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.aai-media-card__desc  { margin: 0 0 16px; color: var(--aai-muted); font-size: 13px; line-height: 1.6; max-width: 460px; }
.aai-media-card__note  { margin: 8px 0 0; font-size: 12px; color: var(--aai-muted); }

.aai-media-card__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 260px;
}
.aai-media-card__checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--aai-text);
}

.aai-media-info {
  display: flex;
  gap: 14px;
  background: #eef2ff;
  border: 1px solid #dbe3fb;
  border-radius: var(--aai-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.aai-media-info__icon { font-size: 18px; color: var(--aai-purple); line-height: 1; }
.aai-media-info strong { display: block; margin-bottom: 4px; }
.aai-media-info p { margin: 0; font-size: 13px; color: var(--aai-muted); line-height: 1.6; }
.aai-media-info a { color: var(--aai-purple); font-weight: 500; text-decoration: none; }
.aai-media-info a:hover { text-decoration: underline; }

.aai-media-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.aai-media-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  padding: 16px 18px;
}
.aai-media-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex-shrink: 0;
}
.aai-media-stat__icon--total   { background: #e0e7ff; color: var(--aai-purple); }
.aai-media-stat__icon--missing { background: #fee2e2; color: var(--aai-critical); }
.aai-media-stat__icon--review  { background: #fef3c7; color: var(--aai-warning); }
.aai-media-stat__value { font-size: 22px; font-weight: 800; line-height: 1.2; }
.aai-media-stat__value--total   { color: var(--aai-text); }
.aai-media-stat__value--missing { color: var(--aai-critical); }
.aai-media-stat__value--review  { color: var(--aai-warning); }
.aai-media-stat__label { font-size: 12px; color: var(--aai-muted); }

.aai-media-row__thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--aai-border);
  flex-shrink: 0;
}
.aai-media-row__thumb--empty { background: var(--aai-bg); }
.aai-media-row__filename,
.aai-media-row__title {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aai-media-row__filename { font-weight: 500; font-size: 13px; }
.aai-media-row__title    { font-size: 11px; color: var(--aai-muted); }

.aai-media-row__edit {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.aai-media-row__input {
  flex: 1 1 80px;
  min-width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  font-size: 13px;
}
.aai-media-row__input:focus { outline: none; border-color: var(--aai-purple); }
.aai-media-row__edit .aai-btn { flex-shrink: 0; }

/* Suggest / Update — match the reference design's button styling: Suggest
   as a purple-accented outline button (not the neutral-gray ghost default),
   Update as a plain gray button until there's a draft worth saving. */
.aai-media-row__edit .aai-btn--ghost {
  color: var(--aai-purple);
  border-color: var(--aai-border);
}
.aai-media-row__edit .aai-btn--ghost:hover:not(:disabled) {
  background: #f3f1ff;
  border-color: var(--aai-purple);
}
.aai-media-row__edit .aai-btn--ghost:disabled { color: var(--aai-muted); }

.aai-media-row__actions .aai-btn--primary:disabled {
  background: rgba(56, 88, 233, .08);
  color: rgba(56, 88, 233, .4);
  opacity: 1;
}

/* This table has more, narrower columns than other .aai-scan-table uses
   (checkbox/image/status/etc.) — letting header labels wrap instead of
   forcing nowrap stops two- and three-word headers (e.g. "Change alt
   text") from dictating a column's minimum width and pushing the table
   into horizontal scroll. */
.aai-media .aai-scan-table th { white-space: normal; }
.aai-media .aai-scan-table th,
.aai-media .aai-scan-table td { padding: 8px 10px; }

.aai-media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 12px;
  border-bottom: 1px solid var(--aai-border);
}

.aai-media-tabs { display: flex; gap: 4px; }

.aai-media-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 10px;
  margin-right: 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--aai-muted);
  cursor: pointer;
}
.aai-media-tab:hover { color: var(--aai-text); }
.aai-media-tab--active { color: var(--aai-purple); border-bottom-color: var(--aai-purple); }

.aai-media-tab__count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--aai-bg);
  color: var(--aai-muted);
}
.aai-media-tab--active .aai-media-tab__count { background: #ede9ff; color: var(--aai-purple); }

.aai-media-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 10px;
}

/* .aai-ps-search-wrap normally fills its flex parent (width: 100%), which is
   fine when it's the only item on that side (ReportView's toolbar). Here it
   shares the row with the sort controls, so pin it to a fixed width instead
   — otherwise the 100% basis fights the sort group for space and the two
   wrap onto separate lines unpredictably. */
.aai-media-toolbar-right .aai-ps-search-wrap { width: 220px; flex: 0 0 auto; }

.aai-media-sort { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--aai-muted); white-space: nowrap; }
.aai-media-sort select { font-size: 13px; }

.aai-media-sort-dir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: var(--aai-muted);
  flex-shrink: 0;
}
.aai-media-sort-dir:hover { border-color: var(--aai-purple); color: var(--aai-purple); }

/* Scanning progress — real "scanned of total" once start_media_scan() has
   returned a total (an inline style on .aai-media-progress__bar overrides
   the width/animation below); indeterminate (sliding) only for the brief
   window before that first response lands. */
.aai-media-progress {
  position: relative;
  height: 8px;
  max-width: 420px;
  flex: 1 1 auto;
  border-radius: 999px;
  background: var(--aai-bg);
  overflow: hidden;
}
.aai-media-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
}
.aai-media-progress__pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--aai-muted);
  flex-shrink: 0;
}
.aai-media-progress__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -40%;
  border-radius: 999px;
  background: var(--aai-purple);
  animation: aai-media-progress-slide 1.3s ease-in-out infinite;
  transition: width .3s ease;
}
@keyframes aai-media-progress-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ── Scanning step list ───────────────────────────────────── */
.aai-media-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 220px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aai-media-steps__item { display: flex; align-items: flex-start; gap: 10px; }
.aai-media-steps__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  border: 2px solid var(--aai-border);
  background: #fff;
}
.aai-media-steps__item--active .aai-media-steps__dot {
  border-color: var(--aai-purple);
  background: var(--aai-purple);
  box-shadow: 0 0 0 3px rgba(56, 88, 233, .15);
}
.aai-media-steps__item--done .aai-media-steps__dot {
  border-color: var(--aai-purple);
  background: var(--aai-purple);
}
.aai-media-steps__title { font-size: 13px; font-weight: 600; color: var(--aai-text); }
.aai-media-steps__item--upcoming .aai-media-steps__title { color: var(--aai-muted); }
.aai-media-steps__sub { font-size: 12px; color: var(--aai-muted); margin-top: 1px; }

/* ── Scan card + AI status card (side by side) ────────────── */

.aai-media-top {
  display: flex;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.aai-media-top .aai-media-card { flex: 2 1 360px; margin-bottom: 0; }

.aai-media-card__scanned { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.aai-media-card__scanned-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e0e7ff;
  color: var(--aai-purple);
}
.aai-media-card__rescan { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.aai-media-card__rescan .aai-btn svg { margin-right: 4px; }

.aai-media-illustration { flex-shrink: 0; filter: drop-shadow(0 14px 20px rgba(99, 102, 241, 0.22)); }

.aai-media-ai-card {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f5f3ff;
  border: 1px solid #e5defa;
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  padding: 20px 22px;
}
.aai-media-ai-card--on { background: #ecfdf5; border-color: #c9f2de; }
.aai-media-ai-card__icon { color: var(--aai-purple); flex-shrink: 0; margin-top: 2px; }
.aai-media-ai-card strong { display: block; margin-bottom: 4px; font-size: 14px; }
.aai-media-ai-card p { margin: 0 0 10px; font-size: 12.5px; color: var(--aai-muted); line-height: 1.5; }
.aai-media-ai-card__ready {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  margin-bottom: 10px;
}
.aai-media-ai-card .aai-btn--ghost {
  color: var(--aai-purple);
  border-color: var(--aai-border);
}
.aai-media-ai-card .aai-btn--ghost:hover:not(:disabled) {
  background: #f3f1ff;
  border-color: var(--aai-purple);
}

/* ── Stat card percentage subtext ─────────────────────────── */
.aai-media-stat__sub { font-size: 11px; color: var(--aai-muted); margin-top: 1px; }

/* ── Table row meta / reason text ─────────────────────────── */
.aai-media-row__meta {
  font-size: 11px; color: var(--aai-muted); margin-top: 1px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aai-media-row__alt {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aai-media-row__reason {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--aai-warning);
  max-width: 140px;
  line-height: 1.4;
}
.aai-media-row__reason svg { flex-shrink: 0; margin-top: 2px; }

.aai-media-row__actions { display: flex; align-items: center; gap: 6px; }

/* ── Bulk selection bar ───────────────────────────────────── */
.aai-media-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.aai-media-bulkbar__select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--aai-muted);
  cursor: pointer;
}
.aai-media-bulkbar__right { display: flex; align-items: center; gap: 10px; }
.aai-media-bulkbar__right .aai-btn svg { margin-right: 4px; }
.aai-media-bulkbar__right .aai-btn--primary:disabled {
  background: rgba(56, 88, 233, .08);
  color: rgba(56, 88, 233, .4);
  opacity: 1;
}

/* ── Small action-list dropdown (bulk actions / row "…" menu) ── */
.aai-media-menu { position: relative; display: inline-flex; }
.aai-media-menu__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--aai-text);
  cursor: pointer;
}
.aai-media-menu__trigger:hover { border-color: var(--aai-purple); }
.aai-media-menu__list {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 10;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--aai-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.aai-media-menu__list--right { right: 0; }
.aai-media-menu__list--left  { left: 0; }
.aai-media-menu__item {
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--aai-text);
  cursor: pointer;
  white-space: nowrap;
}
.aai-media-menu__item:hover:not(:disabled) { background: var(--aai-bg); }
.aai-media-menu__item:disabled { color: var(--aai-muted); cursor: not-allowed; }

/* ── Sortable column headers ──────────────────────────────── */
.aai-media-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
.aai-media-th-sort:hover { color: var(--aai-purple); }
.aai-media-th-sort__icon { color: var(--aai-border); display: inline-flex; }
.aai-media-th-sort__icon--active { color: var(--aai-purple); }

/* ── Numbered pagination ───────────────────────────────────── */
.aai-media-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
  border-top: 1px solid var(--aai-border);
  margin-top: 8px;
}
.aai-media-pagination__pages { display: flex; align-items: center; gap: 4px; }
.aai-media-pagination__nav,
.aai-media-pagination__page {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--aai-text);
  cursor: pointer;
}
.aai-media-pagination__nav:hover:not(:disabled),
.aai-media-pagination__page:hover { border-color: var(--aai-purple); }
.aai-media-pagination__nav:disabled { color: var(--aai-border); cursor: not-allowed; }
.aai-media-pagination__page--active {
  background: var(--aai-purple);
  border-color: var(--aai-purple);
  color: #fff;
  font-weight: 600;
}
.aai-media-pagination__ellipsis { padding: 0 2px; color: var(--aai-muted); }