/*
 * Darmowy skan AktZgodny.pl - style WYŁĄCZNIE na tokenach motywu (var(--navy) itd., zdefiniowane
 * w wp-content/themes/aktzgodny-theme/style.css), pierwotnie 1:1 z design/skan.html (BRIEF-008
 * sekcja 2). BRIEF-041: bramka e-mail (obszary/gate/potwierdzenie) nie ma jeszcze odpowiednika
 * w design/skan.html (stary mockup nadal pokazuje werdykt wprost) - Cowork/design odświeży wzorzec
 * osobno, ten plik jest dziś źródłem prawdy dla nowego przepływu.
 */
.skan {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    font-family: var(--font-text, 'IBM Plex Sans', sans-serif);
    color: var(--ink, #1E293B);
}

.skan *,
.skan *::before,
.skan *::after {
    box-sizing: border-box;
}

.skan [hidden] {
    display: none !important;
}

.skan h1,
.skan h2,
.skan h3 {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    color: var(--navy, #0F172A);
    line-height: 1.15;
}

.skan .eyebrow {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-d, #0B7C72);
    margin-bottom: 12px;
}

.skan .btn {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15.5px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.skan .btn-primary {
    background: var(--teal, #0D9488);
    color: #fff;
    box-shadow: 0 4px 14px rgba(13, 148, 136, .35);
}
.skan .btn:focus-visible {
    outline: 3px solid var(--mint, #5EEAD4);
    outline-offset: 2px;
}
.skan .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.skan .stage h1 {
    font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 14px;
}
.skan .stage > p {
    color: var(--grey, #64748B);
    margin: 0 0 28px;
    max-width: 36em;
}

.skan .scanbox {
    display: flex;
    gap: 10px;
    max-width: 560px;
    flex-wrap: wrap;
}
.skan .scanbox input {
    flex: 1;
    min-width: 220px;
    padding: 14px 16px;
    font-size: 16px;
    border: 1.5px solid var(--line, #E2E8F0);
    border-radius: 8px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    color: var(--navy, #0F172A);
    background: #fff;
}
.skan .scanbox input:focus {
    outline: 2px solid var(--teal, #0D9488);
}

.skan .skan-hp {
    position: absolute;
    left: -9999px;
}

.skan .legalnote {
    font-size: 12px;
    color: var(--grey, #64748B);
    margin-top: 14px;
    max-width: 42em;
}

.skan .skan-error {
    color: var(--red, #DC2626);
    font-size: 14px;
    margin-top: 14px;
}

.skan .term {
    background: var(--navy, #0F172A);
    border-radius: 12px;
    padding: 26px;
    color: #CBD5E1;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 13.5px;
    max-width: 640px;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .45);
}

.skan .resulthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 2px solid var(--navy, #0F172A);
    padding-bottom: 18px;
    margin-bottom: 8px;
}
.skan .resulthead .dom {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 13px;
    color: var(--grey, #64748B);
}

/* BRIEF-041/045: lista "przeanalizowane obszary" - neutralna, bez kolorów ryzyka (zastępuje dawne
   .verdict/.sig/.pill*, usunięte - werdykt/karty per-sygnał już nigdy nie renderują się w JS).
   BRIEF-045: bursztyn (--amber/--amber-bg) zamiast zielonego checka - "przeanalizowano" ma budować
   napięcie ("odbierz werdykt"), nie czytać się jako "wszystko OK, zaliczone". Czerwień CELOWO
   pominięta - to jedyny ekran identyczny dla KAŻDEGO wyniku (także 0/3), trzy czerwone
   wykrzykniki byłyby fałszywym alarmem niezależnym od prawdziwego werdyktu z maila. */
.skan .areas-intro {
    font-size: 15px;
    color: var(--ink, #1E293B);
    margin: 0 0 18px;
    max-width: 44em;
}
.skan .areas {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
}
.skan .area {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line, #E2E8F0);
    border-left: 4px solid var(--amber, #B45309);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14.5px;
    color: var(--ink, #1E293B);
}
.skan .check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--amber-bg, #FEF3C7);
    color: var(--amber, #B45309);
    border: 1.5px solid var(--amber, #B45309);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.skan .area-name {
    flex: 1;
}
.skan .area-status {
    flex-shrink: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--amber, #B45309);
}
@media (max-width: 480px) {
    .skan .area {
        flex-wrap: wrap;
    }
    .skan .area-status {
        flex-basis: 100%;
        margin-left: 36px;
    }
}
.skan .verdict-waiting {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--amber-bg, #FEF3C7);
    border-left: 4px solid var(--amber, #B45309);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 4px 0 10px;
}
.skan .verdict-waiting .check {
    margin-top: 2px;
}
.skan .verdict-waiting p {
    font-size: 14px;
    color: var(--ink, #1E293B);
    margin: 0;
    max-width: 44em;
}
.skan .areas-term-note {
    font-size: 12.5px;
    color: var(--grey, #64748B);
    margin: 0 0 4px;
}
.skan .fallback-msg {
    background: #fff;
    border: 1px solid var(--line, #E2E8F0);
    border-left: 6px solid var(--amber, #B45309);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 22px 0;
    font-size: 14.5px;
    color: var(--ink, #1E293B);
}

.skan .gate {
    background: var(--navy, #0F172A);
    color: #CBD5E1;
    border-radius: 14px;
    padding: 30px;
    margin-top: 30px;
}
.skan .gate h2 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 8px;
}
.skan .gate p {
    font-size: 14px;
    margin: 0 0 18px;
    max-width: 44em;
}
.skan .gate .row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.skan .gate input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 13px 15px;
    border-radius: 8px;
    border: 1px solid #33415c;
    background: #16233b;
    color: #fff;
    font-size: 15px;
}
.skan .gate label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    margin-top: 12px;
}
.skan .gate .mini {
    font-size: 11.5px;
    color: #7C8DA8;
    margin-top: 12px;
}
.skan .skan-confirm {
    color: #fff;
    font-size: 15px;
    margin: 0 0 12px;
}
.skan .skan-back-link {
    color: var(--mint, #5EEAD4);
    font-weight: 500;
    text-decoration: underline;
}

.skan .disc {
    font-size: 11.5px;
    color: var(--grey, #64748B);
    margin-top: 26px;
    border-top: 1px solid var(--line, #E2E8F0);
    padding-top: 14px;
}
.skan .aiinfo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--grey, #64748B);
    margin-top: 12px;
}
.skan .aiinfo .dot {
    flex-shrink: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--teal-d, #0B7C72);
    border: 1px solid var(--teal, #0D9488);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 2px;
}

@media (max-width: 600px) {
    .skan .scanbox { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .skan * { transition: none !important; animation: none !important; }
}