/*
 * The free scan result (/scan/<token>/) and its sibling message page
 * (templates/scan-message.php — waiting / error states). Written as plain
 * CSS for the same reason as audit.css: these are .php templates, not
 * scanned by the Tailwind build in khalaq_design/, so a utility class not
 * already in css/output.css simply would not exist at runtime.
 *
 * No new palette. The accent is the site's existing blue (--audit-blue in
 * css/audit.css, #6375E4) and the severity tints below are the exact values
 * audit.css already uses for .audit-sev-*. Tokens are redeclared here (not
 * inherited from .audit-page) because scan-message.php's <main> is not
 * wrapped in .audit-page.
 */

.scan-shell {
    --scan-blue: #6375E4;
    --scan-blue-light: #CED3F2;
    --scan-black: #121212;
    --scan-gray-text: #615F5F;
    --scan-gray-soft: #858585;
    --scan-gray-bg: #EAEAEA;
    --scan-line: #DFDFDF;

    max-width: 760px;
    margin: 0 auto;
    padding: 48px 20px 90px;
    color: var(--scan-black);
}

.scan-shell a {
    color: var(--scan-blue);
}

/* -------------------------------------------------------- message page --
   templates/scan-message.php: waiting, error and "not found" states. One
   card, one heading, one line, one way back. */

.scan-card {
    padding: 32px 30px;
    border: 1px solid var(--scan-line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.scan-card__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.scan-card__text {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--scan-gray-text);
}

.scan-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------------------------------------------------------------- header -- */

.scan-head {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--scan-line);
}

.scan-head__target {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--scan-gray-text);
    word-break: break-all;
}

.scan-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}

.scan-score__value {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--scan-blue);
}

.scan-score__of {
    font-size: 15px;
    font-weight: 600;
    color: var(--scan-gray-soft);
}

.scan-head__effective,
.scan-head__meta,
.scan-head__checked,
.scan-head__memory {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--scan-gray-text);
}

.scan-head__effective {
    word-break: break-all;
}

.scan-head__memory strong {
    color: var(--scan-black);
}

/* ----------------------------------------------------------- findings -- */

.scan-findings {
    margin-top: 32px;
}

.scan-findings h2,
.scan-unchecked h2,
.scan-changes h2,
.scan-runs h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.scan-finding {
    margin-top: 16px;
    padding: 18px 22px;
    border: 1px solid var(--scan-line);
    border-left: 4px solid var(--scan-gray-soft);
    border-radius: 12px;
    background: #fff;
}

.scan-finding__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.scan-finding__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.scan-sev,
.scan-state {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: var(--scan-gray-bg);
    color: var(--scan-gray-text);
}

.scan-cid {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--scan-gray-soft);
}

.scan-share {
    font-size: 12px;
    font-weight: 700;
    color: var(--scan-gray-soft);
}

.scan-finding__detail {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
}

.scan-finding__locked {
    margin-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: var(--scan-gray-soft);
}

/* Severity accents — the exact tints audit.css already uses for
   .audit-sev-critical / -high / -medium / -low. `info` is the one severity
   audit.css has no tag for; it gets the site's own blue rather than a new
   hue. */
.scan-finding--critical { border-left-color: #8A1F1F; }
.scan-finding--critical .scan-sev { background: #F6D9D9; color: #8A1F1F; }

.scan-finding--high { border-left-color: #8A4A12; }
.scan-finding--high .scan-sev { background: #F7E4CF; color: #8A4A12; }

.scan-finding--medium { border-left-color: #7A6A12; }
.scan-finding--medium .scan-sev { background: #F6F0CC; color: #7A6A12; }

.scan-finding--low { border-left-color: var(--scan-gray-soft); }
.scan-finding--low .scan-sev { background: var(--scan-gray-bg); color: var(--scan-gray-text); }

.scan-finding--info { border-left-color: var(--scan-blue); }
.scan-finding--info .scan-sev { background: var(--scan-blue-light); color: var(--scan-blue); }

/* A locked card is dimmed, never hidden — there is no hidden node to hide;
   see lib/scan_result_view.php. */
.scan-finding--locked {
    background: var(--scan-gray-bg);
    border-left-color: var(--scan-line);
}

.scan-finding--locked .scan-finding__title {
    color: var(--scan-gray-text);
}

/* Finding state — never lets `gone_unverifiable` read as good news. `fixed`
   reuses the accent blue rather than inventing a green; `new` / `still`
   reuse the critical / high tints above as attention colours; unverifiable
   stays the same flat neutral the locked card uses. */
.scan-state--new     { background: #F6D9D9; color: #8A1F1F; }
.scan-state--still   { background: #F7E4CF; color: #8A4A12; }
.scan-state--fixed   { background: var(--scan-blue-light); color: var(--scan-blue); }
.scan-state--gone_unverifiable { background: var(--scan-gray-bg); color: var(--scan-gray-text); }

/* -------------------------------------------------------------- unchecked -- */

.scan-unchecked {
    margin-top: 36px;
    padding: 22px 24px;
    border: 1px solid var(--scan-line);
    border-radius: 12px;
    background: var(--scan-gray-bg);
}

.scan-unchecked__lead {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--scan-gray-text);
}

.scan-unchecked__row {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.scan-unchecked__row .scan-cid {
    margin-right: 8px;
}

/* ---------------------------------------------------------------- changes -- */

.scan-changes {
    margin-top: 36px;
}

.scan-changes__row {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.scan-changes__row .scan-cid {
    margin-right: 4px;
}

.scan-changes__note {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--scan-gray-text);
}

/* ------------------------------------------------------------------ runs -- */

.scan-runs {
    margin-top: 36px;
}

.scan-runs__row {
    margin-top: 10px;
    font-size: 14px;
    color: var(--scan-gray-text);
}

.scan-runs__row a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.scan-runs__row--current {
    font-weight: 700;
    color: var(--scan-black);
}

/* ------------------------------------------------------------------ next -- */

.scan-next {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--scan-line);
}

.scan-email,
.scan-rescan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.scan-email label {
    font-size: 14px;
    font-weight: 700;
}

.scan-email input[type="email"] {
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--scan-line);
    border-radius: 22px;
    font-size: 15px;
    outline: 0;
}

.scan-email input[type="email"]:focus {
    border-color: var(--scan-blue);
}

.scan-email button,
.scan-rescan button {
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 22px;
    background: var(--scan-blue);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.scan-rescan button {
    background: #fff;
    color: var(--scan-blue);
    border: 1px solid var(--scan-blue);
}

@media (max-width: 639px) {
    .scan-score__value { font-size: 44px; }
    .scan-next { flex-direction: column; align-items: stretch; }
    .scan-email, .scan-rescan { flex-direction: column; align-items: stretch; }
    .scan-email button, .scan-rescan button { width: 100%; }
}