/* Snapshot tool page styles. Layered on css/styles.css.
 * CSP-compliant: same-origin external CSS. No inline styles. */

.snapshot-banner { background: var(--ink); color: var(--paper); padding: 96px 0 64px; }
.snapshot-banner .eyebrow { color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; font-size: 12px; display: block; }
.snapshot-banner h1 { font-size: clamp(40px, 7vw, 80px); line-height: 1.05; margin: 12px 0 16px; font-weight: 900; color: var(--paper); }
.snapshot-banner .lead { font-size: clamp(18px, 2vw, 22px); max-width: 720px; color: var(--paper); }

.snapshot-form-section { padding: 48px 0; background: var(--paper); border-top: 8px solid var(--accent); }

.snapshot-form { max-width: 640px; margin: 0 auto; }
.snapshot-form__row { margin-bottom: 20px; }
.snapshot-form__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 6px; }
.snapshot-form__input { width: 100%; padding: 14px 16px; font-size: 18px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: inherit; }
.snapshot-form__input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.snapshot-form__honeypot { position: absolute; left: -10000px; top: -10000px; height: 1px; width: 1px; }
.snapshot-form__submit { background: var(--ink); color: var(--paper); border: none; padding: 16px 32px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; min-width: 240px; }
.snapshot-form__submit:hover { background: var(--accent); }
.snapshot-form__submit:disabled { opacity: 0.5; cursor: wait; }
.snapshot-form__submit-loading { display: none; }
.snapshot-form__submit[data-loading="true"] .snapshot-form__submit-label { display: none; }
.snapshot-form__submit[data-loading="true"] .snapshot-form__submit-loading { display: inline; }
.snapshot-form__fine { font-size: 13px; color: #555; margin-top: 16px; line-height: 1.5; max-width: 580px; }

/* Result block */
.snapshot-result { max-width: 720px; margin: 32px auto 0; padding: 32px; background: var(--ink); color: var(--paper); border-left: 8px solid var(--accent); }
.snapshot-result__verdict { font-size: clamp(28px, 4vw, 40px); font-weight: 900; line-height: 1.1; margin-bottom: 24px; color: var(--paper); }
.snapshot-result__verdict--cited { color: #66ff99; }
.snapshot-result__verdict--invisible { color: var(--accent); }
.snapshot-result__detail { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; margin-bottom: 16px; }
.snapshot-result__row { display: flex; gap: 16px; font-size: 14px; }
.snapshot-result__key { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; min-width: 160px; color: rgba(244, 243, 239, 0.6); }
.snapshot-result__val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--paper); }
.snapshot-result__preview { margin: 16px 0; }
.snapshot-result__preview summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: rgba(244, 243, 239, 0.8); }
.snapshot-result__preview-text { background: #1a1a1a; padding: 16px; font-size: 13px; white-space: pre-wrap; word-wrap: break-word; max-height: 320px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--paper); margin: 0; }
.snapshot-result__cta { margin-top: 24px; padding-top: 24px; border-top: 1px solid #333; }
.snapshot-result__cta p { font-size: 16px; line-height: 1.5; color: var(--paper); margin-bottom: 16px; }
.snapshot-result__cta-btn { display: inline-block; background: var(--accent); color: var(--paper); padding: 14px 28px; font-size: 16px; font-weight: 700; text-decoration: none; margin-right: 12px; }
.snapshot-result__cta-btn:hover { background: var(--paper); color: var(--ink); }
.snapshot-result__cta-secondary { display: inline-block; color: rgba(244, 243, 239, 0.7); text-decoration: underline; font-size: 14px; }
.snapshot-result__cta-secondary:hover { color: var(--paper); }

.snapshot-error { max-width: 720px; margin: 24px auto 0; padding: 16px 20px; background: #fff5f5; border: 2px solid var(--accent); color: var(--accent); font-weight: 600; }

.snapshot-explain { padding: 64px 0; border-top: 1px solid #d6d4ce; }
.snapshot-explain h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; line-height: 1.1; margin: 0 0 24px; }
.snapshot-explain__list { padding-left: 24px; }
.snapshot-explain__list li { margin-bottom: 16px; font-size: 16px; line-height: 1.6; }
.snapshot-explain p { font-size: 16px; line-height: 1.6; margin-top: 24px; }