/* ── Analyze Product Images ──
 * Scoped styles extracted from the per-page <style> blocks of
 * tools/analyze_product_images/{index,grouped,stats} and the inline <style> in
 * the _product_group / _image_cell partials, plus inline style= attributes.
 *
 * All three pages share the .pia-page root, so per-page differences are keyed by
 * modifier classes: .pia-page--list (index), --grid (grouped), --stats (stats).
 * The .fact-* rules here are this tool's OWN copy (raider_facts.css has a
 * separate copy scoped under .rf-page). Generic `pulse` keyframe from stats is
 * renamed ps-pulse to avoid colliding with running_agents' global `pulse`.
 * Data-driven widths (bars) stay inline in the Haml.
 */

body:has(.pia-page) { margin: 0; font-family: system-ui, sans-serif; background: #f5f5f5; }

/* ── Shared chrome ── */
.pia-page { max-width: 1600px; margin: 0 auto; padding: 2rem 1rem; }
.pia-page--stats { max-width: 1400px; }
.pia-page .pia-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.pia-page .pia-header h1 { margin: 0; font-size: 1.75rem; color: #111827; }
.pia-page .pia-view-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; }
.pia-page .pia-tab { padding: 0.375rem 0.875rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; color: #6b7280; background: #f3f4f6; }
.pia-page .pia-tab--active { background: #465A64; color: #fff; }
.pia-page .pia-tab:hover:not(.pia-tab--active) { background: #e5e7eb; color: #111827; }
.pia-page .pia-empty { text-align: center; padding: 4rem 1rem; color: #6b7280; font-size: 1.125rem; background: #fff; border-radius: 0.5rem; }
.pia-page nav.pagy { position: static; top: auto; left: auto; right: auto; z-index: auto; background: none; box-shadow: none; border-radius: 0; margin-top: 1.25rem; display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap; }
.pia-page--grid nav.pagy { margin-top: 1.5rem; }
.pia-page nav.pagy a, .pia-page nav.pagy span { display: inline-block; padding: 0.375rem 0.625rem; border-radius: 0.375rem; font-size: 0.875rem; text-decoration: none; color: #374151; background: #fff; border: 1px solid #d1d5db; }
.pia-page nav.pagy a:hover { background: #f3f4f6; }
.pia-page nav.pagy .current { background: #465A64; color: #fff; border-color: #465A64; font-weight: 600; pointer-events: none; }
.pia-page nav.pagy .gap, .pia-page nav.pagy [aria-disabled="true"] { color: #9ca3af; background: #f9fafb; }

/* shared alt-text rows (identical in fact-row + image-cell; value differs by context) */
.pia-page .alt-text-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.pia-page .alt-text-locale { display: inline-block; min-width: 1.75rem; padding: 0.0625rem 0.25rem; background: #f3f4f6; border-radius: 0.25rem; font-size: 0.6875rem; font-weight: 600; color: #6b7280; text-transform: uppercase; text-align: center; flex-shrink: 0; }
.pia-page .alt-text-value { color: #374151; }
.pia-page .ic-alt-texts .alt-text-value { font-size: 0.75rem; line-height: 1.4; }
@keyframes pia-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── List page (index) ── */
.pia-page .pia-stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.pia-page .stat-card { background: #fff; border-radius: 0.5rem; padding: 0.75rem 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 0.25rem; }
.pia-page .stat-label { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.pia-page .stat-value { font-size: 1.5rem; font-weight: 700; color: #111827; }
.pia-page .pia-table { display: flex; flex-direction: column; gap: 0; }
.pia-page .fact-row { display: grid; grid-template-columns: 20% 35% 45%; background: #fff; border-bottom: 1px solid #e5e7eb; }
.pia-page .fact-row:first-child { border-radius: 0.5rem 0.5rem 0 0; }
.pia-page .fact-row:last-child { border-radius: 0 0 0.5rem 0.5rem; border-bottom: none; }
.pia-page .fact-row:only-child { border-radius: 0.5rem; border-bottom: none; }
.pia-page .fact-cell { padding: 0.875rem 1rem; border-right: 1px solid #e5e7eb; overflow: hidden; }
.pia-page .fact-cell:last-child { border-right: none; }
.pia-page .fact-cell--image { display: flex; flex-direction: column; align-items: center; }
.pia-page .fact-img-btn { background: none; border: none; padding: 0; margin: 0; cursor: zoom-in; display: block; }
.pia-page .fact-img-btn:hover .fact-img { opacity: 0.85; }
.pia-page .fact-img { max-width: 100%; max-height: 140px; object-fit: contain; border-radius: 0.25rem; transition: opacity 0.1s; }
.pia-page .fact-img-placeholder { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 0.25rem; color: #9ca3af; font-size: 0.8125rem; }
.pia-page .fact-cell--meta { display: flex; flex-direction: column; gap: 0.375rem; }
.pia-page .fact-article-number { font-weight: 600; font-size: 0.9375rem; color: #111827; }
.pia-page .badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; width: fit-content; }
.pia-page .badge--analysis { background: #e5eced; color: #2d4350; }
.pia-page .badge--alt-text { background: #d1fae5; color: #065f46; }
.pia-page .badge--dataset  { background: #ede9fe; color: #5b21b6; }
.pia-page .fact-source-ident { font-size: 0.75rem; color: #6b7280; font-family: monospace; word-break: break-all; }
.pia-page .fact-timestamp { font-size: 0.75rem; color: #9ca3af; }
.pia-page .fact-cell--output { font-size: 0.8125rem; color: #374151; line-height: 1.5; overflow: hidden; }
.pia-page .fact-cell--output [data-controller="json-viewer"] { max-height: none; }
.pia-page .fact-cell--output .json-viewer-raw { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; margin: 0; }
.pia-page .fact-short-desc { margin: 0; }
.pia-page .fact-output-text { font-size: 0.8125rem; color: #111827; margin-bottom: 0.5rem; line-height: 1.5; }
.pia-page .fact-empty { margin: 0; color: #9ca3af; font-style: italic; }
.pia-page .fact-alt-texts { display: flex; flex-direction: column; gap: 0.25rem; }
.pia-page .pia-start-btn { display: inline-block; padding: 0.5rem 1.25rem; background: #465A64; color: #fff; border: none; border-radius: 0.375rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.pia-page .pia-start-btn:hover { background: #1d4ed8; }
.pia-page .pia-pause-btn { display: inline-block; padding: 0.5rem 1.25rem; background: #f59e0b; color: #fff; border: none; border-radius: 0.375rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.pia-page .pia-pause-btn:hover { background: #d97706; }
.pia-page .pia-running-badge { display: inline-block; padding: 0.5rem 1.25rem; background: #fef9c3; color: #713f12; border-radius: 0.375rem; font-size: 0.9375rem; font-weight: 600; }
.pia-page .pia-paused-badge { display: inline-block; padding: 0.5rem 1.25rem; background: #fee2e2; color: #991b1b; border-radius: 0.375rem; font-size: 0.9375rem; font-weight: 600; }
.pia-page .pia-queue-actions { display: flex; align-items: center; gap: 0.75rem; }
.pia-page #facts_list:has(.fact-row) ~ #facts_empty { display: none; }
.pia-page #facts_list:not(:empty) ~ #facts_empty { display: none; }
.pia-page .pia-back-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pia-page .pia-back-link { color: #6b7280; text-decoration: none; font-size: 14px; }
.pia-page .pia-back-link:hover { color: #111827; }
.pia-page .pia-product-heading { font-size: 20px; font-weight: 600; color: #111827; }
.pia-page .fact-product-link { display: block; margin-top: 6px; font-size: 11px; color: #6b7280; text-decoration: none; text-align: center; }
.pia-page .fact-product-link:hover { color: #111827; text-decoration: underline; }
.pia-page .fact-row--pending { background: #fffbeb; border-left: 3px solid #f59e0b; }
.pia-page .fact-analyzing-placeholder { display: flex; align-items: center; gap: 0.5rem; color: #92400e; font-size: 0.8125rem; font-style: italic; }
.pia-page .fact-analyzing-placeholder .fact-analyzing-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; animation: pia-pulse 1.2s ease-in-out infinite; }

/* ── Grid page (grouped): filter form + product groups + image cells ── */
.pia-page .pia-filter-form { display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pia-page .pia-filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
.pia-page .pia-filter-label { font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
.pia-page .pia-filter-select, .pia-page .pia-filter-input { padding: 0.375rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; background: #fff; color: #111827; min-width: 10rem; }
.pia-page .pia-filter-input { min-width: 14rem; }
.pia-page .pia-filter-btn { padding: 0.375rem 0.875rem; background: #465A64; color: #fff; border: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.pia-page .pia-filter-btn:hover { background: #1d4ed8; }
.pia-page .pia-filter-clear { padding: 0.375rem 0.75rem; font-size: 0.875rem; color: #6b7280; text-decoration: none; }
.pia-page .pia-filter-clear:hover { color: #111827; }
.pia-page .pia-product-list { display: flex; flex-direction: column; gap: 2rem; }
.pia-regen-queued { padding: 0.5rem 0.875rem; background: #d1fae5; color: #065f46; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; }
.pia-regen-btn { padding: 0.375rem 0.875rem; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
/* product group */
.pia-page .pg-card { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; }
.pia-page .pg-header { padding: 0.875rem 1rem; border-bottom: 1px solid #e5e7eb; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.pia-page .pg-title { font-size: 1rem; font-weight: 600; color: #111827; }
.pia-page .pg-meta  { font-size: 0.8125rem; color: #6b7280; }
.pia-page .pg-all { margin-left: auto; }
.pia-page .pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 900px) { .pia-page .pg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pia-page .pg-grid { grid-template-columns: 1fr; } }
/* image cell */
.pia-page .ic-r { display: none; }
.pia-page .ic-cell { border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pia-page .ic-cell:nth-child(3n) { border-right: none; }
.pia-page .ic-img-btn { background: none; border: none; padding: 0; cursor: zoom-in; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.pia-page .ic-img { max-width: 100%; max-height: 160px; object-fit: contain; border-radius: 0.25rem; transition: opacity 0.1s; }
.pia-page .ic-img-btn:hover .ic-img { opacity: 0.85; }
.pia-page .ic-placeholder { min-height: 80px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 0.25rem; color: #9ca3af; font-size: 0.8125rem; }
.pia-page .ic-badge-row { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; min-height: 1.375rem; }
.pia-page .ic-role-badge { display: inline-block; padding: 0.125rem 0.5rem; background: #ede9fe; color: #5b21b6; border-radius: 1rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pia-page .ic-flag { display: inline-block; padding: 0.125rem 0.4rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pia-page .ic-flag--yes { background: #d1fae5; color: #065f46; }
.pia-page .ic-flag--no  { background: #fee2e2; color: #991b1b; }
.pia-page .ic-tabs { display: flex; gap: 0; border-radius: 0.3rem; overflow: hidden; border: 1px solid #e5e7eb; width: fit-content; }
.pia-page .ic-tab-l { padding: 0.1875rem 0.5rem; font-size: 0.6875rem; font-weight: 600; cursor: pointer; background: #f9fafb; color: #9ca3af; user-select: none; letter-spacing: 0.03em; }
.pia-page .ic-tab-l:not(:last-of-type) { border-right: 1px solid #e5e7eb; }
.pia-page .ic-tab-l--alt { background: #465A64; color: #fff; }
.pia-page .ic-cell:has(.ic-r[value="analysis"]:checked) .ic-tab-l--alt { background: #f9fafb; color: #9ca3af; }
.pia-page .ic-cell:has(.ic-r[value="analysis"]:checked) .ic-tab-l--ana { background: #465A64; color: #fff; }
.pia-page .ic-cell:has(.ic-r[value="v1"]:checked) .ic-tab-l--alt { background: #f9fafb; color: #9ca3af; }
.pia-page .ic-cell:has(.ic-r[value="v1"]:checked) .ic-tab-l--v1  { background: #465A64; color: #fff; }
.pia-page .ic-panel--ana { display: none; }
.pia-page .ic-panel--v1  { display: none; }
.pia-page .ic-cell:has(.ic-r[value="analysis"]:checked) .ic-panel--alt { display: none; }
.pia-page .ic-cell:has(.ic-r[value="analysis"]:checked) .ic-panel--ana { display: block; }
.pia-page .ic-cell:has(.ic-r[value="v1"]:checked) .ic-panel--alt { display: none; }
.pia-page .ic-cell:has(.ic-r[value="v1"]:checked) .ic-panel--v1  { display: block; }
.pia-page .ic-version-badge { display: inline-block; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pia-page .ic-version-badge--v2 { background: #e5eced; color: #1d4ed8; }
.pia-page .ic-version-badge--v1 { background: #f3f4f6; color: #6b7280; }
.pia-page .ic-alt-texts { display: flex; flex-direction: column; gap: 0.2rem; }
.pia-page .ic-short-desc { font-size: 0.75rem; color: #374151; line-height: 1.4; margin: 0 0 0.35rem; }
.pia-page .ic-panel--ana [data-controller="json-viewer"] { max-height: none; }
.pia-page .ic-panel--ana .json-viewer-raw { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.6875rem; margin: 0; }
.pia-page .ic-pending { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: #92400e; font-style: italic; }
.pia-page .ic-pending .fact-analyzing-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; animation: pia-pulse 1.2s ease-in-out infinite; }
.pia-page .ic-pim-btn { padding: 0.1875rem 0.5rem; font-size: 0.6875rem; font-weight: 600; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 0.3rem; cursor: pointer; align-self: flex-start; }
.pia-page .ic-pim-btn:hover { background: #dcfce7; }
.pia-page .ic-pim-result { margin-top: 0.25rem; }

/* ── Stats page ── */
.pia-page .ps-status { display: flex; gap: 1.5rem; align-items: center; background: #fff; border-radius: 0.5rem; padding: 0.75rem 1.25rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); flex-wrap: wrap; }
.pia-page .ps-status-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #374151; }
.pia-page .ps-status-label { color: #9ca3af; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pia-page .ps-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pia-page .ps-dot--green  { background: #10b981; }
.pia-page .ps-dot--yellow { background: #f59e0b; animation: ps-pulse 1.5s ease-in-out infinite; }
.pia-page .ps-dot--gray   { background: #d1d5db; }
@keyframes ps-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.pia-page .ps-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.pia-page .ps-card { background: #fff; border-radius: 0.5rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pia-page .ps-card-label { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 0.4rem; }
.pia-page .ps-card-value { font-size: 2rem; font-weight: 700; color: #111827; line-height: 1; margin-bottom: 0.5rem; }
.pia-page .ps-card-sub { font-size: 0.75rem; color: #6b7280; }
.pia-page .ps-bar-track { height: 4px; background: #e5e7eb; border-radius: 2px; margin-top: 0.5rem; }
.pia-page .ps-bar-fill  { height: 4px; background: #10b981; border-radius: 2px; }
.pia-page .ps-section { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 1.5rem; overflow: hidden; }
.pia-page .ps-section-head { padding: 0.875rem 1.25rem; border-bottom: 1px solid #f3f4f6; font-size: 0.875rem; font-weight: 600; color: #374151; display: flex; justify-content: space-between; align-items: center; }
.pia-page .ps-section-sub { font-size: 0.75rem; color: #9ca3af; font-weight: 400; }
.pia-page .ps-brand-table { width: 100%; border-collapse: collapse; }
.pia-page .ps-brand-table th { padding: 0.625rem 1.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; text-align: left; border-bottom: 1px solid #f3f4f6; white-space: nowrap; }
.pia-page .ps-brand-table td { padding: 0.75rem 1.25rem; font-size: 0.875rem; color: #374151; border-bottom: 1px solid #f9fafb; vertical-align: middle; }
.pia-page .ps-brand-table tr:last-child td { border-bottom: none; }
.pia-page .ps-brand-name { font-weight: 600; color: #111827; font-size: 0.8125rem; }
.pia-page .ps-pct-cell { display: flex; align-items: center; gap: 0.5rem; }
.pia-page .ps-pct-bar { flex: 1; height: 6px; background: #e5e7eb; border-radius: 3px; min-width: 80px; }
.pia-page .ps-pct-bar-fill { height: 6px; border-radius: 3px; }
.pia-page .ps-pct-bar-fill--v2  { background: #6366f1; }
.pia-page .ps-pct-bar-fill--pim { background: #10b981; }
.pia-page .ps-pct-label { font-size: 0.75rem; color: #6b7280; width: 2.5rem; text-align: right; flex-shrink: 0; }
.pia-page .ps-sync-ts { font-size: 0.75rem; color: #9ca3af; margin-top: 0.125rem; }
.pia-page .ps-sync-count { font-weight: 600; color: #111827; }
.pia-page .ps-sync-date { font-size: 0.8125rem; color: #111827; }
.pia-page .ps-no-sync { font-size: 0.75rem; color: #d1d5db; font-style: italic; }
.pia-page .ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 900px) { .pia-page .ps-row { grid-template-columns: 1fr; } }
.pia-page .ps-timeline { padding: 1rem 1.25rem; }
.pia-page .ps-tl-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.pia-page .ps-tl-date { font-size: 0.6875rem; color: #9ca3af; width: 4.5rem; flex-shrink: 0; text-align: right; }
.pia-page .ps-tl-bars { flex: 1; display: flex; gap: 1px; height: 14px; align-items: flex-end; }
.pia-page .ps-tl-bar-a { background: #6366f1; border-radius: 1px 1px 0 0; }
.pia-page .ps-tl-bar-b { background: #10b981; border-radius: 1px 1px 0 0; height: 100%; }
.pia-page .ps-tl-bar-empty { width: 1px; height: 100%; background: #f3f4f6; }
.pia-page .ps-tl-count { font-size: 0.6875rem; color: #9ca3af; width: 2.5rem; text-align: right; flex-shrink: 0; }
.pia-page .ps-tl-legend { display: flex; gap: 1rem; padding: 0 1.25rem 1rem; }
.pia-page .ps-tl-legend-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: #6b7280; }
.pia-page .ps-tl-swatch { width: 10px; height: 10px; border-radius: 2px; }
.pia-page .ps-tl-empty { padding: 1.25rem; font-size: 0.875rem; color: #9ca3af; font-style: italic; }
.pia-page .ps-pim-tl { padding: 0.75rem 1.25rem; }
.pia-page .ps-pim-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid #f9fafb; }
.pia-page .ps-pim-row:last-child { border-bottom: none; }
.pia-page .ps-pim-date { font-size: 0.75rem; color: #6b7280; width: 5rem; flex-shrink: 0; font-weight: 500; }
.pia-page .ps-pim-brands { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; }
.pia-page .ps-pim-chip { font-size: 0.6875rem; background: #d1fae5; color: #065f46; padding: 0.125rem 0.5rem; border-radius: 1rem; font-weight: 600; }
.pia-page .ps-pim-total { font-size: 0.75rem; color: #9ca3af; width: 2rem; text-align: right; flex-shrink: 0; }
.pia-page .ps-refresh { font-size: 0.8125rem; color: #6b7280; text-decoration: none; padding: 0.25rem 0.625rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; }
.pia-page .ps-refresh:hover { background: #f9fafb; color: #111827; }