/**
 * Acid AEO setup wizard: the one screen that takes the whole window (the admin
 * bar stays, so there is always a way out). Built on admin.css, which holds the
 * tokens, fonts and shared components; a base class that means something else
 * here is restyled under `.acid-aeo-wizard`.
 */

/* Taking over the screen ---------------------------------------------------- */

.acid-aeo-wizard-body #adminmenumain,
.acid-aeo-wizard-body #adminmenuwrap,
.acid-aeo-wizard-body #adminmenuback,
.acid-aeo-wizard-body #wpfooter { display: none; }

.acid-aeo-wizard-body #wpcontent,
.acid-aeo-wizard-body #wpbody-content { margin-inline-start: 0; padding-inline-start: 0; }

.acid-aeo-wizard-body #wpbody-content { padding-block-end: 0; }
.acid-aeo-wizard-body { background: var(--paper-2); }

.acid-aeo-wizard { margin: 0 auto; max-inline-size: 1400px; padding: 0 24px 48px; }

/* Header -------------------------------------------------------------------- */

.acid-aeo-wizard-top { align-items: center; display: flex; flex-wrap: wrap; gap: var(--gap); padding-block: 20px 12px; }
.acid-aeo-wizard-count { color: var(--ink-2); font-family: var(--mono); margin: 0; }
.acid-aeo-wizard-top-actions { display: flex; gap: var(--gap); margin-inline-start: auto; }
.acid-aeo-wizard-exit { background: none; border: 0; cursor: pointer; padding: 0; }

/* Progress rail: done is ink, current is the one acid square ---------------- */

.acid-aeo-rail { margin-block-end: 20px; }
.acid-aeo-rail-list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.acid-aeo-rail-item { flex: 1 1 120px; min-inline-size: 0; position: relative; }
.acid-aeo-rail-item + .acid-aeo-rail-item::before { background: var(--line); block-size: 2px; content: ""; inline-size: 100%; inset-block-start: 15px; inset-inline-end: 50%; position: absolute; }

.acid-aeo-rail-step { align-items: center; background: none; border: 0; color: var(--ink-2); cursor: pointer; display: flex; flex-direction: column; gap: 6px; inline-size: 100%; padding: 0; position: relative; text-align: center; z-index: 1; }
.acid-aeo-rail-step[disabled] { cursor: default; opacity: 0.55; }

.acid-aeo-rail-num { align-items: center; background: var(--paper); block-size: 32px; border: 1px solid var(--ink-3); border-radius: var(--radius); display: inline-flex; font-family: var(--mono); font-weight: 700; inline-size: 32px; justify-content: center; transition: background var(--speed) ease, border-color var(--speed) ease, color var(--speed) ease; }

.acid-aeo-rail-label { font-size: 12px; line-height: 1.3; }
.acid-aeo-rail-step.is-done .acid-aeo-rail-num { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.acid-aeo-rail-step.is-current { color: var(--ink); font-weight: 600; }
.acid-aeo-rail-step.is-current .acid-aeo-rail-num { background: var(--acid); border-color: var(--ink); color: var(--ink); }

/* Layout -------------------------------------------------------------------- */

.acid-aeo-wizard-layout { align-items: start; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) 420px; }
.acid-aeo-wizard-aside { inset-block-start: 52px; position: sticky; }
.acid-aeo-wizard-loading { color: var(--ink-2); }
.acid-aeo-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.acid-aeo-step-title { font-size: 22px; margin: 0; }
.acid-aeo-step-subtitle { color: var(--ink-2); margin-block: 4px 20px; }
.acid-aeo-lead { margin-block: 0 var(--gap); }
.acid-aeo-wizard-foot { align-items: center; display: flex; flex-wrap: wrap; gap: var(--gap); margin-block-start: var(--gap); }
.acid-aeo-wizard-nav { align-items: center; display: flex; gap: 8px; }
.acid-aeo-wizard-status { color: var(--ink-2); margin: 0; }
.acid-aeo-skip { background: none; border: 0; cursor: pointer; }

/* Blocks and fields --------------------------------------------------------- */

.acid-aeo-block { border-block-start: 1px solid var(--line); margin-block-start: 20px; padding-block-start: 20px; }
.acid-aeo-block-title { font-size: 14px; margin-block: 0 12px; }
.acid-aeo-wizard .acid-aeo-field { max-inline-size: 620px; }
.acid-aeo-fieldset { border: 0; margin-inline: 0; padding: 0; }
.acid-aeo-label-small { font-size: 12px; font-weight: 600; }

/* Here a legend names a group of fields; in the base it is a chart's key. */
.acid-aeo-wizard .acid-aeo-legend { color: var(--ink); display: block; font-size: inherit; font-weight: 600; margin-block-end: 4px; padding: 0; }

.acid-aeo-error { color: var(--danger-ink); font-size: 12px; margin-block: 4px 0; }
.acid-aeo-counter { color: var(--ink-2); font-size: 11px; margin: 2px 0 0; text-align: end; }
.acid-aeo-wizard .acid-aeo-empty { font-size: 12px; }

.acid-aeo-wizard .acid-aeo-input,
.acid-aeo-wizard .acid-aeo-select,
.acid-aeo-wizard .acid-aeo-textarea { inline-size: 100%; max-inline-size: none; padding: 7px 10px; }

.acid-aeo-wizard .acid-aeo-input-number { inline-size: 140px; }

/* Core gives a select a 38px line box of its own; padding on top of it doubles the height. */
.acid-aeo-wizard .acid-aeo-select { padding-block: 0; padding-inline: 10px 24px; }

.acid-aeo-wizard .acid-aeo-field.is-invalid .acid-aeo-input,
.acid-aeo-wizard .acid-aeo-field.is-invalid .acid-aeo-select,
.acid-aeo-wizard .acid-aeo-field.is-invalid .acid-aeo-textarea { border-color: var(--danger); }

.acid-aeo-errors { background: var(--danger-tint); border: 1px solid var(--danger); border-radius: var(--radius); color: var(--danger-ink); margin-block-end: var(--gap); padding: 12px 16px; }
.acid-aeo-errors p { font-weight: 600; margin-block: 0 4px; }
.acid-aeo-errors ul { margin: 0; padding-inline-start: 18px; }

/* Switches, badges, checks -------------------------------------------------- */

.acid-aeo-wizard .acid-aeo-switch { display: flex; }
.acid-aeo-wizard .acid-aeo-switch.is-disabled { cursor: default; opacity: 0.6; }
.acid-aeo-switch-label { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.acid-aeo-wizard .acid-aeo-badge { background: var(--success-tint); border-color: currentColor; color: var(--success-ink); margin-inline-start: 0; white-space: nowrap; }

/* Here a check is one checkbox and its label; in the base it is a row of the audit. */
.acid-aeo-wizard .acid-aeo-check { align-items: center; border: 0; display: flex; gap: 8px; padding: 0; }
.acid-aeo-check-row { display: flex; flex-wrap: wrap; gap: 12px; }
.acid-aeo-check-column { display: grid; gap: 6px; max-block-size: 260px; overflow-y: auto; }
.acid-aeo-check-line { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.acid-aeo-inline-link { font-size: 12px; }

.acid-aeo-wizard .acid-aeo-media { gap: 12px; }
.acid-aeo-media-thumb { block-size: 56px; border: 1px dashed var(--ink-3); border-radius: var(--radius); display: inline-block; inline-size: 56px; overflow: hidden; }
.acid-aeo-media-thumb img { block-size: 100%; inline-size: 100%; object-fit: contain; }

/* Choice cards: here a card is a choice; in the base it is a panel ---------- */

.acid-aeo-cards-set { border: 0; margin-inline: 0; padding: 0 0 var(--gap); }
.acid-aeo-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.acid-aeo-wizard .acid-aeo-card { cursor: pointer; display: block; margin-block-end: 0; padding: 14px 16px; position: relative; transition: border-color var(--speed) ease; }
.acid-aeo-wizard .acid-aeo-card:hover { border-color: var(--ink-3); }
.acid-aeo-wizard .acid-aeo-card.is-selected { border-color: var(--ink); outline: 1px solid var(--ink); }
.acid-aeo-wizard .acid-aeo-card:has(.acid-aeo-card-input:focus-visible) { box-shadow: 0 0 0 4px var(--acid); outline: 2px solid var(--ink); outline-offset: 2px; }
.acid-aeo-card-input { block-size: 1px; inline-size: 1px; opacity: 0; position: absolute; }

/* The tick of a chosen card: an acid square, the one green thing on it. */
.acid-aeo-card-check { align-items: center; background: var(--acid); block-size: 20px; border: 1px solid var(--ink); border-radius: var(--radius); color: var(--ink); display: inline-flex; font-weight: 700; inline-size: 20px; inset-block-start: 12px; inset-inline-end: 14px; justify-content: center; opacity: 0; position: absolute; transition: opacity var(--speed) ease; }

.acid-aeo-wizard .acid-aeo-card.is-selected .acid-aeo-card-check { opacity: 1; }
.acid-aeo-wizard .acid-aeo-card-title { display: block; font: 600 14px/1.4 var(--sans); margin: 0; padding-inline-end: 28px; }
.acid-aeo-card-text { color: var(--ink-2); display: block; font-size: 12px; margin-block-start: 4px; }
.acid-aeo-card-list { color: var(--ink-2); font-size: 12px; margin: 8px 0 0; padding-inline-start: 16px; }

/* Segmented controls -------------------------------------------------------- */

.acid-aeo-segmented { border: 0; margin-inline: 0; padding: 0; }
.acid-aeo-seg-legend { font-size: 12px; font-weight: 600; padding: 0; }
.acid-aeo-seg-row { border: 1px solid var(--ink); border-radius: var(--radius); display: inline-flex; overflow: hidden; }
.acid-aeo-seg { cursor: pointer; font-size: 12px; padding: 4px 12px; position: relative; transition: background var(--speed) ease, color var(--speed) ease; }
.acid-aeo-seg.is-on { background: var(--acid); color: var(--ink); }
/* Core sizes radios at (0,1,1) and dims disabled ones: three classes keep this one hidden. */
.acid-aeo-wizard .acid-aeo-seg .acid-aeo-seg-input { block-size: 1px; inline-size: 1px; margin: 0; min-block-size: 0; min-inline-size: 0; opacity: 0; position: absolute; }

/* The row clips its children, so the ring is drawn on the row. */
.acid-aeo-seg-row:has(.acid-aeo-seg-input:focus-visible) { box-shadow: 0 0 0 4px var(--acid); outline: 2px solid var(--ink); outline-offset: 2px; }

.acid-aeo-segmented.is-disabled { opacity: 0.7; }
.acid-aeo-segmented.is-disabled .acid-aeo-seg { cursor: default; }
.acid-aeo-signals { display: flex; flex-wrap: wrap; gap: var(--gap); margin-block-end: var(--gap); }

/* Repeaters and pickers ----------------------------------------------------- */

.acid-aeo-wizard .acid-aeo-row { gap: 12px; margin-block-end: 8px; }
.acid-aeo-wizard .acid-aeo-row-fields { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); min-inline-size: 0; }
.acid-aeo-row-actions { display: flex; flex-direction: column; gap: 4px; }
.acid-aeo-row-remove { color: var(--danger-ink); }
.acid-aeo-add { margin-block-start: 4px; }
.acid-aeo-page-list { border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 4px; margin-block: 8px; max-block-size: 220px; overflow-y: auto; padding: 10px; }
.acid-aeo-page-chosen { display: grid; gap: 4px; list-style: none; margin: 4px 0 0; padding: 0; }
.acid-aeo-page-chip { align-items: center; background: var(--paper-2); border-radius: var(--radius); display: flex; gap: 8px; justify-content: space-between; padding: 4px 10px; }
.acid-aeo-page-order { display: flex; gap: 4px; }

/* Detection cards, crawler list --------------------------------------------- */

.acid-aeo-detect-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.acid-aeo-detect { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.acid-aeo-detect.is-ok { border-inline-start: 3px solid var(--success-ink); }
.acid-aeo-detect.is-warn { border-inline-start: 3px solid var(--warning-ink); }
.acid-aeo-detect-title { color: var(--ink-2); font: 400 12px/1.4 var(--mono); letter-spacing: 0.04em; margin: 0; text-transform: uppercase; }
.acid-aeo-detect-value { font-weight: 600; margin-block: 4px 8px; }
.acid-aeo-wizard .acid-aeo-detect .acid-aeo-field { margin-block-end: 0; }
.acid-aeo-file-line { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px; }
.acid-aeo-notice { background: var(--paper-2); border-inline-start: 3px solid var(--ink); border-radius: var(--radius); padding: 8px 12px; }
.acid-aeo-expander { background: none; border: 0; cursor: pointer; margin-block-end: var(--gap); padding: 0; }

.acid-aeo-bots { display: grid; gap: var(--gap); margin-block-end: var(--gap); max-block-size: 420px; overflow-y: auto; }
.acid-aeo-vendor-name { font-size: 13px; margin-block: 0 6px; }
.acid-aeo-bot { align-items: center; border-block-end: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; padding-block: 6px; }
.acid-aeo-bot-name { align-items: center; display: flex; flex: 1 1 220px; gap: 8px; }
.acid-aeo-bot-docs { font-size: 12px; }

/* Crawler categories: tags of the base, in four inks. */
.acid-aeo-pill-search { background: var(--success-tint); color: var(--success-ink); }
.acid-aeo-pill-assistant { background: var(--paper); color: var(--ink); }
.acid-aeo-pill-training { background: var(--warning-tint); color: var(--warning-ink); }
.acid-aeo-pill-other { background: var(--paper-2); color: var(--ink-2); }

.acid-aeo-map { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.acid-aeo-wizard .acid-aeo-map .acid-aeo-field { margin-block-end: 0; }
.acid-aeo-authors { border-collapse: collapse; inline-size: 100%; }
.acid-aeo-authors th, .acid-aeo-authors td { border-block-end: 1px solid var(--line); padding: 6px 8px; text-align: start; }
.acid-aeo-keyline { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }

/* Results ------------------------------------------------------------------- */

.acid-aeo-result { display: grid; justify-items: center; margin-block-end: var(--gap); position: relative; }
.acid-aeo-wizard .acid-aeo-ring-value { transition: stroke-dashoffset 900ms ease; }
.acid-aeo-wizard .acid-aeo-score-number { inset-block-start: 50px; }
.acid-aeo-wizard .acid-aeo-checks { padding: 0; }
.acid-aeo-check-item { align-items: start; border-block-end: 1px solid var(--line); display: flex; gap: 10px; padding-block: 8px; }
.acid-aeo-wizard .acid-aeo-check-body { flex: 1 1 auto; }
.acid-aeo-wizard .acid-aeo-check-message { font-size: 12px; }
.acid-aeo-file-links { list-style: none; margin: 0; padding: 0; word-break: break-all; }
.acid-aeo-done-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: var(--gap); }

/* The dark surface: a generated file ---------------------------------------- */

.acid-aeo-code { background: var(--ink); border-radius: var(--radius); color: var(--line); font: 12px/1.55 var(--mono); margin: 0; overflow-x: auto; padding: 12px 14px; }
.acid-aeo-preview-toggle { display: none; }
.acid-aeo-preview { background: var(--ink); border-radius: var(--radius); color: var(--line); overflow: hidden; }
.acid-aeo-preview-head { align-items: center; border-block-end: 1px solid var(--ink-2); display: flex; gap: 12px; justify-content: space-between; padding: 10px 14px; }
.acid-aeo-preview-file { font-family: var(--mono); font-size: 12px; }

/* The one place the acid green is text: on black it has 15.3:1. */
.acid-aeo-wizard a.acid-aeo-preview-open { color: var(--acid); font-size: 12px; }
.acid-aeo-wizard a.acid-aeo-preview-open:hover { background: none; color: var(--paper); }

.acid-aeo-preview-note { color: var(--warning-tint); font-size: 12px; margin: 0; padding: 8px 14px 0; }
.acid-aeo-preview-body { font: 12px/1.55 var(--mono); margin: 0; max-block-size: 62vh; overflow: auto; padding: 14px; white-space: pre-wrap; word-break: break-word; }

/* Responsive ---------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
	.acid-aeo-wizard-layout { grid-template-columns: minmax(0, 1fr); }
	.acid-aeo-wizard-aside { position: static; }
	.acid-aeo-preview-toggle { background: var(--ink); border: 0; border-radius: var(--radius); color: var(--line); cursor: pointer; display: block; font: 12px/1.4 var(--mono); inline-size: 100%; padding: 10px 14px; text-align: start; }
	.acid-aeo-preview { display: none; margin-block-start: 4px; }
	.acid-aeo-preview.is-open { display: block; }
	.acid-aeo-preview-body { max-block-size: 320px; }
}

@media screen and (max-width: 720px) {
	.acid-aeo-wizard { padding-inline: 12px; }
	.acid-aeo-rail-label { display: none; }
	.acid-aeo-rail-item { flex: 1 1 auto; }
	.acid-aeo-step { padding: 16px; }
	.acid-aeo-cards { grid-template-columns: minmax(0, 1fr); }
	.acid-aeo-wizard .acid-aeo-row { flex-direction: column; }
	.acid-aeo-row-actions { flex-direction: row; }
	.acid-aeo-wizard-top-actions { margin-inline-start: 0; }
}