/* /var/www/seoapp/static/css/aiv.css
   AI Visibility redesign components. Tokens only (theme.css / design-system.css / admin_base.css):
   no hardcoded colours, no pixel sizes. Buttons use .btn / .btn-primary / .btn-ghost, cards use .card. */

.aiv-page { max-width: 72rem; margin: 0 auto; color: var(--text-primary); font-family: var(--font-primary); }
.aiv-page * { box-sizing: border-box; }

.aiv-breadcrumb { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.aiv-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.aiv-breadcrumb a:hover { color: var(--text-primary); }

.aiv-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.aiv-title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.aiv-meta { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.aiv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.aiv-pills { display: flex; gap: 0.25rem; margin: 0 0 1.25rem; padding-bottom: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--border-subtle); }
.aiv-pill { flex: 0 0 auto; padding: 0.5rem 0.9rem; border-radius: 0.4rem 0.4rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.aiv-pill:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.aiv-pill[aria-current="page"] { color: var(--text-primary); background: var(--bg-card); box-shadow: inset 0 -0.125rem 0 var(--accent-blue); }

.aiv-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 1rem; }
.aiv-card-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.aiv-card-note { font-size: 0.85rem; color: var(--text-muted); }

.aiv-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.6rem 1.25rem; margin: 0; }
.aiv-dl dt { color: var(--text-muted); font-size: 0.85rem; }
.aiv-dl dd { margin: 0; color: var(--text-primary); font-size: 0.95rem; overflow-wrap: anywhere; }
.aiv-unset { color: var(--text-muted); }

.aiv-list { margin: 0; padding-left: 1.1rem; }
.aiv-list li { margin: 0.15rem 0; }

.aiv-empty { margin: 0; padding: 1rem 0; color: var(--text-muted); font-size: 0.95rem; }
.aiv-muted { color: var(--text-muted); font-size: 0.85rem; }

.aiv-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; background: var(--badge-neutral-bg); color: var(--text-secondary); }
.aiv-status.is-ok { background: var(--badge-success-bg); color: var(--accent-green); }
.aiv-status.is-warn { background: var(--badge-warning-bg); color: var(--flash-warning-color); }

.aiv-table-wrap { overflow-x: auto; }
.aiv-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.aiv-table th { text-align: left; padding: 0.55rem 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--table-header-text); border-bottom: 1px solid var(--table-border); white-space: nowrap; }
.aiv-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--table-border); color: var(--text-primary); vertical-align: top; }
.aiv-table tr:hover td { background: var(--table-hover); }
.aiv-table a { color: var(--accent-blue); text-decoration: none; }

/* Forms: one style for every AI Visibility form */
.aiv-form { max-width: 48rem; }
.aiv-field { margin: 0 0 1.1rem; }
.aiv-label { display: block; margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.aiv-input, .aiv-textarea, .aiv-select {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit; font-size: 0.95rem; color: var(--input-text);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 0.35rem;
}
.aiv-input::placeholder, .aiv-textarea::placeholder { color: var(--input-placeholder); }
.aiv-input:focus, .aiv-textarea:focus, .aiv-select:focus { outline: none; border-color: var(--input-focus); }
.aiv-textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.aiv-help { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.aiv-rows { display: grid; gap: 0.5rem; }
.aiv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.aiv-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.aiv-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.aiv-link { color: var(--text-secondary); font-size: 0.9rem; text-decoration: none; }
.aiv-link:hover { color: var(--text-primary); }

@media (max-width: 40rem) {
  .aiv-dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .aiv-dl dd { margin-bottom: 0.6rem; }
  .aiv-row, .aiv-row-3 { grid-template-columns: 1fr; }
  .aiv-title { font-size: 1.3rem; }
}

/* Brands landing and the brand stat tiles */
.aiv-brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.aiv-brand-card { margin-bottom: 0; display: flex; flex-direction: column; }
.aiv-brand-card .aiv-card-head h2 { font-size: 1.1rem; }
.aiv-brand-card .aiv-card-head h2 a { color: var(--text-primary); text-decoration: none; }
.aiv-brand-card .aiv-card-head h2 a:hover { color: var(--accent-blue); }
.aiv-brand-card .aiv-card-note { margin: 0.2rem 0 0; }
.aiv-brand-card .stats-grid { margin-bottom: 1rem; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
.aiv-brand-card .stat-card { padding: 0.9rem; }
.aiv-brand-card .stat-card .value { font-size: 1.5rem; }
.aiv-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); }
.aiv-stat-sub { margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-muted); }
.stats-grid + .card, .aiv-page > .stats-grid { margin-bottom: 1.5rem; }

/* Brand page layout with the Run check panel, panel fields, tracked pages */
.aiv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.aiv-main, .aiv-aside { min-width: 0; }
@media (min-width: 64rem) {
  .aiv-layout.has-aside { grid-template-columns: minmax(0, 1fr) 21rem; }
  .aiv-aside { position: sticky; top: 1rem; }
}
.aiv-run-panel { margin-bottom: 0; }
.aiv-fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.aiv-fieldset legend { padding: 0; }
.aiv-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.3rem 0; font-size: 0.9rem; color: var(--text-primary); cursor: pointer; }
.aiv-check input { margin-top: 0.2rem; }
.aiv-check small { display: block; }
.aiv-run-prompts { margin: 0 0 0.5rem; font-size: 0.9rem; }
.aiv-warn { color: var(--flash-warning-color); }
.aiv-run-submit { width: 100%; justify-content: center; }
.aiv-run-submit[disabled] { opacity: 0.5; cursor: not-allowed; }
.aiv-run-weekly { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.aiv-inline { display: inline; margin: 0; }
.aiv-inline-form { margin: 0 0 1.25rem; }
.aiv-row-wide { grid-template-columns: 1fr auto; }
.aiv-url-cell { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiv-actions-cell { white-space: nowrap; }
.aiv-actions-cell .btn { padding: 0.4rem 0.7rem; }
.aiv-trend { position: relative; width: 8rem; height: 2.5rem; }
.aiv-page .btn, .aiv-page button { font-family: inherit; }
.aiv-table-assistants td:first-child, .aiv-table-assistants th:first-child { min-width: 9rem; }
.aiv-table-assistants th, .aiv-table-assistants td { padding-left: 0.5rem; padding-right: 0.5rem; }
.aiv-run-panel .aiv-help { margin-bottom: 0.75rem; }

/* Quick check */
.aiv-quick-form { max-width: 48rem; }
.aiv-alert { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 0.35rem; font-size: 0.9rem; border: 1px solid var(--border-default); background: var(--bg-card); color: var(--text-primary); }
.aiv-alert.is-warn { background: var(--flash-warning-bg); border-color: var(--flash-warning-border); color: var(--flash-warning-color); }
.aiv-alert.is-error { background: var(--flash-error-bg); border-color: var(--flash-error-border); color: var(--flash-error-color); }
.aiv-quick-heading { margin: 1.5rem 0 0.75rem; font-size: 1rem; font-weight: 600; }
.aiv-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.aiv-card-grid .card { margin-bottom: 0; }
.aiv-card-title { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 600; }
.aiv-quick-export { margin: 0 0 1rem; }
.aiv-quick-foot { margin: 1.5rem 0 0; }
.aiv-public { padding-top: 4.5rem; padding-bottom: 3rem; min-height: 70vh; color: var(--text-primary); }
.aiv-quick-form { padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 0.4rem; }
.aiv-card-grid .card { padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 0.4rem; }
.aiv-quick-foot .aiv-link { color: var(--accent-blue); }
.aiv-public .aiv-label { display: block; }

/* Settings */
.aiv-details summary { cursor: pointer; color: var(--accent-blue); font-size: 0.9rem; }
.aiv-details[open] summary { margin-bottom: 0.6rem; }
.aiv-details .aiv-dl { grid-template-columns: minmax(6rem, 9rem) 1fr; min-width: 18rem; }
.aiv-details code, .aiv-page code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-primary); background: var(--bg-surface); padding: 0.05rem 0.3rem; border-radius: 0.25rem; }
.aiv-link.is-current { color: var(--text-primary); font-weight: 600; }

/* Check, scan and result pages */
.aiv-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; }
.aiv-two-col .card { margin-bottom: 0; }
.aiv-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.aiv-answer { padding: 0.8rem; border: 1px solid var(--border-subtle); border-radius: 0.4rem; background: var(--bg-card-alt); }
.aiv-answer.is-mentioned { border-color: var(--accent-green); }
.aiv-answer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.aiv-answer-name { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.aiv-answer-context { margin: 0.3rem 0; font-size: 0.85rem; color: var(--text-secondary); }
.aiv-answer-preview { margin: 0.3rem 0; font-size: 0.85rem; color: var(--text-muted); }
.aiv-answer-error { margin: 0.3rem 0; font-size: 0.85rem; color: var(--flash-error-color); }
.aiv-cell-meta { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--text-muted); }
.aiv-cell-meta.is-good { color: var(--accent-green); }
.aiv-sources { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; }
.aiv-sources a { color: var(--accent-blue); word-break: break-all; }
.aiv-mark { font-weight: 600; color: var(--text-muted); }
.aiv-mark.is-yes { color: var(--accent-green); }
.aiv-mark.is-no { color: var(--accent-red); }
.aiv-mark.is-partial { color: var(--accent-amber); }
.aiv-health { margin: 0 0 1rem; font-size: 0.85rem; color: var(--text-muted); }
.aiv-health .is-warn { color: var(--flash-warning-color); }
.aiv-callout { margin: 0 0 0.75rem; padding: 0.8rem 1rem; border-left: 0.25rem solid var(--accent-blue); background: var(--bg-card-alt); border-radius: 0.25rem; }
.aiv-callout.is-muted { border-left-color: var(--border-strong); color: var(--text-secondary); }
.aiv-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.aiv-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 1rem; font-size: 0.8rem; background: var(--badge-neutral-bg); color: var(--text-secondary); }
.aiv-tag.is-good { background: var(--badge-success-bg); color: var(--accent-green); }
.aiv-tag.is-bad { background: var(--flash-error-bg); color: var(--flash-error-color); }
.aiv-recs { margin-bottom: 1rem; }
.aiv-rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border-subtle); }
.aiv-rec-action { font-weight: 600; }
.aiv-table td .aiv-muted { font-size: 0.8rem; }
.aiv-status.is-bad { background: var(--flash-error-bg); color: var(--flash-error-color); }
.aiv-loading { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); }
.aiv-note { margin: 0 0 1rem; font-size: 0.85rem; color: var(--text-muted); }
.aiv-check-list { margin: 0 0 1rem; padding-left: 1.1rem; }
.aiv-check-list li { margin: 0.2rem 0; }
.aiv-check-list.is-yes li::marker { color: var(--accent-green); }
.aiv-check-list.is-no li::marker { color: var(--accent-red); }
.aiv-section-title { margin: 1.25rem 0 0.5rem; font-size: 1rem; }

/* Quick check results and tab bars */
button.aiv-pill { border: 0; background: none; font-family: inherit; cursor: pointer; }
.aiv-panel { display: none; }
.aiv-panel.is-active { display: block; }
.aiv-tip { display: inline-block; width: 1.1rem; height: 1.1rem; margin-left: 0.3rem; border-radius: 50%; font-size: 0.7rem; line-height: 1.1rem; text-align: center; background: var(--badge-neutral-bg); color: var(--text-muted); cursor: help; }
.aiv-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.aiv-metrics > div { min-width: 0; }
.aiv-metric-wide { grid-column: 1 / -1; }
.aiv-metric-label { font-size: 0.8rem; color: var(--text-muted); }
.aiv-metric-value { font-family: var(--font-mono); font-size: 0.9rem; overflow-wrap: anywhere; }
.aiv-blocker { margin-bottom: 0.5rem; padding: 0.7rem 0.9rem; border-left: 0.25rem solid var(--border-strong); border-radius: 0.25rem; background: var(--bg-card-alt); }
.aiv-blocker.is-critical { border-left-color: var(--accent-red); }
.aiv-blocker.is-major { border-left-color: var(--accent-amber); }
.aiv-blocker-badge { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
.aiv-blocker-title { font-weight: 600; }
.aiv-blocker-text { font-size: 0.85rem; color: var(--text-secondary); }
.aiv-clear { margin: 0; color: var(--accent-green); font-size: 0.9rem; }
.aiv-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.aiv-choice { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border-default); border-radius: 0.3rem; font-size: 0.85rem; cursor: pointer; }
.aiv-choice.is-warn { border-color: var(--flash-warning-border); color: var(--flash-warning-color); }
.aiv-pre { margin: 0.5rem 0 0; padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; border-radius: 0.3rem; font-family: var(--font-mono); font-size: 0.8rem; background: var(--bg-card-alt); color: var(--text-secondary); }
.aiv-offscreen { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; opacity: 0; }
.aiv-mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
.aiv-builder { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.aiv-builder-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.aiv-builder-actions form { margin: 0; }
.aiv-fixes { margin: 0; padding: 0; list-style: none; }
.aiv-fixes li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-subtle); }
.aiv-fix-title { font-weight: 600; }
.aiv-fix-detail { font-size: 0.85rem; color: var(--text-secondary); }
.aiv-fix-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.aiv-block { margin-bottom: 1rem; }
.aiv-block h4 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.aiv-block p { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--text-secondary); }
.aiv-quick .card { margin-bottom: 1.25rem; }
.aiv-quick .aiv-two-col { margin-bottom: 1.25rem; }
.aiv-quick .aiv-two-col .card { margin-bottom: 0; }
.aiv-table-wrap + .aiv-details { margin-top: 1rem; }
.aiv-dl + .aiv-label { margin-top: 0.75rem; }

/* Mention status badges, evidence line, full answer, competitor grid */
.aiv-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: var(--badge-neutral-bg); color: var(--text-secondary); }
.aiv-badge.is-good { background: var(--badge-success-bg); color: var(--accent-green); }
.aiv-badge.is-warn { background: var(--badge-warning-bg); color: var(--flash-warning-color); }
.aiv-badge.is-bad { background: var(--flash-error-bg); color: var(--flash-error-color); }
.aiv-badge.is-neutral { background: var(--badge-neutral-bg); color: var(--text-primary); }
.aiv-badge.is-none { background: none; color: var(--text-muted); border: 1px solid var(--border-subtle); }
.aiv-pos { margin-left: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--accent-blue); cursor: help; }
.aiv-answer-evidence { margin: 0.3rem 0; font-size: 0.85rem; color: var(--text-primary); overflow-wrap: anywhere; }
.aiv-answer-evidence.is-muted { color: var(--text-muted); }
.aiv-answer-evidence mark { padding: 0 0.15rem; border-radius: 0.15rem; background: var(--badge-warning-bg); color: inherit; font-weight: 600; }
.aiv-full { margin: 0.4rem 0; }
.aiv-full summary { cursor: pointer; color: var(--accent-blue); font-size: 0.8rem; }
.aiv-full[open] summary { margin-bottom: 0.4rem; }
.aiv-md { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.aiv-md p { margin: 0 0 0.5rem; }
.aiv-md ul, .aiv-md ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.aiv-md strong { color: var(--text-primary); }
.aiv-md a { color: var(--accent-blue); }
.aiv-md code, .aiv-md pre { font-family: var(--font-mono); font-size: 0.8rem; }
.aiv-grid th, .aiv-grid td { vertical-align: middle; }
.aiv-grid tfoot th { text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--text-primary); border-top: 1px solid var(--table-border); border-bottom: 0; }

/* Verdict line, Discovery and Reputation tiles */
.aiv-verdict { margin: 0 0 1.25rem; padding: 0.9rem 1.1rem; border-left: 0.25rem solid var(--accent-blue); border-radius: 0.25rem; background: var(--bg-card-alt); font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.aiv-verdict .aiv-link { margin-left: 0.5rem; font-size: 0.8rem; font-weight: 400; }
.aiv-rep { margin: 0.4rem 0 0.25rem; padding: 0; list-style: none; font-size: 0.85rem; color: var(--text-secondary); }
.aiv-rep li { margin: 0.15rem 0; }
.aiv-rep strong { display: inline-block; min-width: 1.5rem; font-size: 1.1rem; color: var(--text-primary); }
.aiv-brand-card .stats-grid .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.aiv-winner { margin: 0.25rem 0; font-size: 0.8rem; font-weight: 600; color: var(--accent-blue); }
.aiv-listing-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.aiv-listing-form .aiv-select { width: auto; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.aiv-listing-form .btn { padding: 0.3rem 0.7rem; }
.aiv-money { margin: 0 0 1.25rem; font-size: 0.9rem; color: var(--text-secondary); }