/*
 * VP Site Check styles.
 *
 * Portable: every colour falls back to a built-in violet when the host theme
 * does not define the Violet Pixels custom properties. Inside the theme the
 * tool follows both modes automatically, with a few [data-mode="1996"] rules
 * for the bevelled "system report" look. Mobile first.
 */
.vpsc, .vpsc-about {
  --c-bg: var(--bg, #12071F); --c-bg2: var(--bg2, #1E0F33); --c-line: var(--line, #3E2166);
  --c-fg: var(--fg, #F2E9FF); --c-fg2: var(--fg2, #B9A3D9); --c-accent: var(--accent, #B14CFF);
  --c-pass: var(--v3, #7F3FD6); --c-warn: var(--lilac, #C9B3E6); --c-fail: #D94BB0; --c-info: var(--v2, #3E2166);
  --c-radius: var(--radius, 10px);
}
[data-mode="1996"] .vpsc, [data-mode="1996"] .vpsc-about { --c-pass: var(--v2, #3E2166); --c-warn: var(--v3, #7F3FD6); --c-info: var(--lilac2, #B899DB); }

/* ---------- Form ---------- */
.vpsc-form { max-width: 720px; }
.vpsc-form label { display: block; font-size: .95rem; margin-bottom: 6px; }
.vpsc-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) { .vpsc-row { flex-direction: row; } .vpsc-row input { flex: 1; } }
.vpsc-row input { width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--c-line); background: var(--c-bg2); color: var(--c-fg); font: inherit; font-size: 1.05rem; }
.vpsc-row input:focus { border-color: var(--c-pass); }
.vpsc-row button { white-space: nowrap; }
.vpsc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vpsc-help { font-size: .9rem; color: var(--c-fg2); margin: 10px 0 0; }
.vpsc-error { color: var(--c-fg); border: 1px solid var(--c-fail); border-radius: 8px; padding: 10px 14px; margin: 12px 0 0; font-size: .95rem; }
[data-mode="1996"] .vpsc-row input { border: 3px solid var(--v2, #3E2166); border-right-color: var(--v5, #F2E9FF); border-bottom-color: var(--v5, #F2E9FF); background: #fff; border-radius: 0; }
[data-mode="1996"] .vpsc-error { border-width: 3px; border-radius: 0; }

/* ---------- Scanning ---------- */
.vpsc-scan { margin: 28px 0; }
.vpsc-pixels { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; max-width: 420px; }
.vpsc-pixels span { aspect-ratio: 1; background: var(--c-line); animation: vpsc-blink 1.2s steps(2) infinite; animation-delay: calc(var(--i) * 50ms); }
@keyframes vpsc-blink { 50% { background: var(--c-accent); } }
.vpsc-step { margin: 12px 0 0; color: var(--c-fg2); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .vpsc-pixels span { animation: none; background: var(--c-accent); } }

/* ---------- Report ---------- */
.vpsc-report { margin-top: 32px; }
.vpsc-head { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 24px; background: var(--c-bg2); border: 1px solid var(--c-line); border-radius: var(--c-radius); }
@media (min-width: 640px) { .vpsc-head { grid-template-columns: auto 1fr; } }
.vpsc-head h2 { margin: 0 0 6px; font-size: 1.4rem; overflow-wrap: anywhere; }
.vpsc-head p { margin: 0; color: var(--c-fg2); }
.vpsc-head .vpsc-verdict { color: var(--c-fg); margin-top: 10px; font-size: 1.05rem; }
.vpsc-head .vpsc-meta { font-size: .85rem; margin-top: 10px; }
.vpsc-head .vpsc-cached { font-size: .85rem; margin-top: 6px; }

/* Screenshot: third column of the header when present. */
@media (min-width: 900px) { .vpsc-head.has-shot { grid-template-columns: auto 1fr 300px; } }
.vpsc-shot { overflow: hidden; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-bg); max-height: 260px; }
.vpsc-shot img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; object-position: top; }
[data-mode="1996"] .vpsc-shot { border: 3px solid var(--v2, #3E2166); border-right-color: var(--v5, #F2E9FF); border-bottom-color: var(--v5, #F2E9FF); border-radius: 0; }
[data-mode="1996"] .vpsc-shot img { image-rendering: pixelated; filter: contrast(1.1) saturate(0.8); }

/* Vi: the script swaps frames; CSS adds the movement per mood. */
.vpsc-vi { width: 64px; height: 64px; display: block; overflow: visible; }
.vpsc-scan .vpsc-vi { margin-bottom: 14px; }
.vpsc-score .vpsc-vi { margin-bottom: 4px; }
.vpsc-vi.is-cheer { animation: vpsc-bounce 1s ease-in-out 3; }
@keyframes vpsc-bounce { 40% { transform: translateY(-14px); } 60% { transform: translateY(-4px); } 80% { transform: translateY(-9px); } }
.vpsc-vi.is-worried { animation: vpsc-shiver 3s ease-in-out infinite; }
@keyframes vpsc-shiver { 10%, 30% { transform: translateX(-2px); } 20%, 40% { transform: translateX(2px); } 50%, 100% { transform: none; } }
.vpsc-vi.is-glitch { animation: vpsc-jitter .5s steps(2) infinite; }
@keyframes vpsc-jitter { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); opacity: .7; } 75% { transform: translate(1px, 2px); } }
@media (prefers-reduced-motion: reduce) { .vpsc-vi { animation: none !important; } }

/* Score: a ring in 2026, a block bar in 1996. Both read from --score. */
.vpsc-score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; }
.vpsc-ring { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c-accent) calc(var(--score) * 1%), var(--c-line) 0); position: relative; }
.vpsc-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--c-bg2); }
.vpsc-ring strong { position: relative; font-size: 2.4rem; font-weight: 500; line-height: 1; }
.vpsc-ring.is-fail { background: conic-gradient(var(--c-fail) calc(var(--score) * 1%), var(--c-line) 0); }
.vpsc-ring.is-warn { background: conic-gradient(var(--c-warn) calc(var(--score) * 1%), var(--c-line) 0); }
.vpsc-bar { display: none; width: 100%; }
.vpsc-score small { color: var(--c-fg2); font-size: .85rem; }
[data-mode="1996"] .vpsc-ring { display: none; }
[data-mode="1996"] .vpsc-bar { display: block; }
[data-mode="1996"] .vpsc-bar strong { display: block; font-size: 2rem; font-weight: 400; text-align: center; margin-bottom: 6px; }
.vpsc-blocks { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; }
.vpsc-blocks span { height: 12px; background: var(--c-line); }
.vpsc-blocks span.on { background: var(--c-pass); }
.vpsc-blocks.is-warn span.on { background: var(--c-warn); }
.vpsc-blocks.is-fail span.on { background: var(--c-fail); }

/* Category cards. */
.vpsc-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 20px 0; }
.vpsc-cat { background: var(--c-bg2); border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 16px; text-decoration: none; color: var(--c-fg); display: block; }
.vpsc-cat:hover { border-color: var(--c-pass); }
.vpsc-cat span { display: block; color: var(--c-fg2); font-size: .85rem; }
.vpsc-cat strong { display: block; font-size: 1.8rem; font-weight: 500; line-height: 1.2; margin: 4px 0 8px; }
.vpsc-meter { height: 6px; background: var(--c-line); border-radius: 3px; overflow: hidden; }
.vpsc-meter i { display: block; height: 100%; width: calc(var(--score) * 1%); background: var(--c-pass); }
.vpsc-meter.is-warn i { background: var(--c-warn); }
.vpsc-meter.is-fail i { background: var(--c-fail); }

/* Findings. */
.vpsc-section { margin: 28px 0; }
.vpsc-section h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.vpsc-section h3 span { color: var(--c-fg2); font-size: .9rem; font-weight: 400; }
.vpsc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: none; }
.vpsc-item { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 12px 14px; background: var(--c-bg2); border: 1px solid var(--c-line); border-radius: var(--c-radius); align-items: start; }
.vpsc-pixel { width: 14px; height: 14px; margin-top: 5px; background: var(--c-info); }
.vpsc-item.is-pass .vpsc-pixel { background: var(--c-pass); }
.vpsc-item.is-warn .vpsc-pixel { background: var(--c-warn); }
.vpsc-item.is-fail .vpsc-pixel { background: var(--c-fail); }
.vpsc-item strong { font-weight: 500; }
.vpsc-item .vpsc-status { color: var(--c-fg2); font-size: .8rem; margin-left: 8px; }
.vpsc-item p { margin: 4px 0 0; font-size: .95rem; color: var(--c-fg2); max-width: none; overflow-wrap: anywhere; }
.vpsc-item details { margin-top: 6px; font-size: .9rem; }
.vpsc-item summary { cursor: pointer; color: var(--c-fg); }
.vpsc-item details p { margin-top: 6px; }

/* Google block. */
.vpsc-psi { margin: 28px 0; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg2); }
.vpsc-psi h3 { margin: 0 0 12px; }
.vpsc-psi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.vpsc-psi-grid div { text-align: center; padding: 12px 8px; border: 1px solid var(--c-line); border-radius: 8px; }
.vpsc-psi-grid strong { display: block; font-size: 1.8rem; font-weight: 500; }
.vpsc-psi-grid span { color: var(--c-fg2); font-size: .85rem; }
.vpsc-psi-grid .is-fail strong { color: var(--c-fail); }
.vpsc-metrics { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9rem; color: var(--c-fg2); }
.vpsc-metrics strong { color: var(--c-fg); font-weight: 500; }
.vpsc-psi p { margin: 0; color: var(--c-fg2); }

/* Call to action. */
.vpsc-cta { margin: 28px 0; padding: 24px; border: 1px solid var(--c-pass); border-radius: var(--c-radius); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.vpsc-cta p { margin: 0; max-width: 46ch; }
.vpsc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.vpsc-actions button, .vpsc-actions a { font-size: .9rem; }

/* 1996: bevels everywhere, no radii. */
[data-mode="1996"] .vpsc-head, [data-mode="1996"] .vpsc-cat, [data-mode="1996"] .vpsc-item, [data-mode="1996"] .vpsc-psi, [data-mode="1996"] .vpsc-psi-grid div { border: 3px solid var(--v5, #F2E9FF); border-right-color: var(--v2, #3E2166); border-bottom-color: var(--v2, #3E2166); background: var(--v5, #F2E9FF); border-radius: 0; }
[data-mode="1996"] .vpsc-cta { border: 3px solid var(--v2, #3E2166); border-radius: 0; background: var(--v5, #F2E9FF); }
[data-mode="1996"] .vpsc-meter, [data-mode="1996"] .vpsc-meter i { border-radius: 0; }
[data-mode="1996"] .vpsc-pixels span { animation-timing-function: steps(1); }

/* ---------- Guide pages ---------- */
.vpsc-watch { margin: 28px 0; padding: 24px; border: 1px solid var(--c-line); border-radius: var(--c-radius); max-width: 720px; }
.vpsc-watch h3 { margin: 0 0 6px; }
.vpsc-watch p { margin: 0 0 14px; max-width: 52ch; }
.vpsc-watch .vpsc-row { margin: 0; }
.vpsc-watch-msg { margin: 12px 0 0 !important; }
.vpsc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vpsc-notice { border: 1px solid var(--c-pass); border-radius: var(--c-radius); padding: 12px 16px; margin: 0 0 20px; max-width: 720px; }
[data-mode="1996"] .vpsc-watch, [data-mode="1996"] .vpsc-notice { border: 3px solid var(--v2, #3E2166); border-radius: 0; background: var(--v5, #F2E9FF); }
.vpsc-guide-cta { margin: 32px 0; padding: 20px 24px; border: 1px solid var(--line, #3E2166); border-radius: var(--radius, 10px); }
.vpsc-guide-cta p:last-child { margin: 0; }
[data-mode="1996"] .vpsc-guide-cta { border: 3px solid var(--v2, #3E2166); border-radius: 0; background: var(--v5, #F2E9FF); }
.vpsc-guide-list { padding-left: 1.2em; }