/* ================================================================
   protection-browsers.css — Styly specifické pro protection-browsers.php
   Načítáno jen na této stránce (za protection.css).
   Obsah: přehled tabulky, platform badges, flowchart karet.
   ================================================================ */


/* ===== 0. CSS PROMĚNNÉ ===== */
/* Barvy platform badges a přechodové barvy spektra — bez ekvivalentu v common.css,
   použity jen na této stránce. */
:root {
    --platform-desktop-bg:    light-dark(#e8f5e9, #1b3a1b);
    --platform-desktop-color: light-dark(#2e7d32, #66bb6a);
    --platform-mobile-bg:     light-dark(#e3f2fd, #0d2744);
    --platform-mobile-color:  light-dark(#1565c0, #64b5f6);
    --platform-both-bg:       light-dark(#f3e5f5, #2a1233);
    --platform-both-color:    light-dark(#7b1fa2, #ce93d8);
    --pb-marker-6: #e8c030;   /* žlutá       — Firefox bez RFP */
    --pb-marker-9: #1e9455;   /* tmavě zelená — LibreWolf */
}


/* ===== 1. FINGERPRINT TABLE — page-specific overrides ===== */
/* .table-compare je sdílená třída z components.css. Tyto 2 pravidla ji
   upravují pro tuto stránku: pevné šířky sloupců (9 prohlížečů + parametr). */
.table-compare { table-layout: fixed; }
.table-compare th:first-child { width: 115px; }


/* ===== 2. PLATFORM BADGES ===== */
/* Štítky v h3 nadpisech: "Desktop + Mobile", "Desktop only", "Mobile only".
   Použití: <span class="platform-badge platform-desktop">Desktop only</span> */
.platform-badge {
    display: inline-block;
    font-size: var(--size-14);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-inline-start: 8px;
    vertical-align: middle;
    line-height: 1.4;
}
.platform-desktop { background: var(--platform-desktop-bg); color: var(--platform-desktop-color); }
.platform-mobile  { background: var(--platform-mobile-bg);  color: var(--platform-mobile-color);  }
.platform-both    { background: var(--platform-both-bg);    color: var(--platform-both-color);    }


/* ===== 3. BROWSER CHOICE FLOWCHART ===== */
/* Sekce "Which Browser Should You Choose?" — 4 karty: potřeba → šipka → doporučení.
   Zelená = doporučení, oranžová (.bcc-orange) = vynucená volba (Safari na iOS). */
.browser-choice-wrap { margin: 20px 0; }

.browser-choice-header {
    background: var(--bg-info-box);
    border: 2px solid var(--accent-color);
    border-radius: 10px;
    padding: 10px 16px;
    text-align: center;
    font-size: var(--size-13);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 12px;
}

.browser-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 600px) { .browser-choice-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 360px) { .browser-choice-grid { grid-template-columns: 1fr; } }

.browser-choice-card { display: flex; flex-direction: column; }

.bcc-need {
    background: var(--bg-data-box);
    border: 1.5px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 9px 10px;
    text-align: center;
    font-size: var(--size-12);
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bcc-arrow {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--size-13);
    padding: 3px 0;
    background: var(--bg-data-box);
    border-left: 1.5px solid var(--border-color);
    border-right: 1.5px solid var(--border-color);
}

.bcc-result {
    border: 2px solid var(--color-green);
    border-radius: 0 0 8px 8px;
    padding: 10px;
    text-align: center;
    background: var(--bg-data-box);
}
.bcc-result.bcc-orange { border-color: var(--color-orange); }

.bcc-result-name {
    font-size: var(--size-13);
    font-weight: 700;
    color: var(--color-green);
    line-height: 1.3;
    margin-bottom: 4px;
}
.bcc-result.bcc-orange .bcc-result-name { color: var(--color-orange); }

.bcc-result-desc { font-size: var(--size-11); color: var(--text-muted); line-height: 1.4; }

.browser-choice-note {
    background: var(--bg-info-box);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: var(--size-11);
    color: var(--text-label);
    line-height: 1.6;
}
.browser-choice-note strong { color: var(--accent-color); }


/* ===== 4. SPECTRUM MARKERY A LEGENDA ===== */
/* Pozice a barvy — 10 prohlížečů na škále (Chrome→Mullvad) */

.spectrum-marker:nth-child(1)  { left: 6.7%;  border-color: var(--spectrum-red); }
.spectrum-marker:nth-child(2)  { left: 14.2%; border-color: var(--spectrum-red); }
.spectrum-marker:nth-child(3)  { left: 21.7%; border-color: var(--spectrum-red); }
.spectrum-marker:nth-child(4)  { left: 29.2%; border-color: var(--spectrum-red); }
.spectrum-marker:nth-child(5)  { left: 43.3%; border-color: var(--spectrum-orange); }
.spectrum-marker:nth-child(6)  { left: 55.8%; border-color: var(--pb-marker-6); }
.spectrum-marker:nth-child(7)  { left: 69.2%; border-color: var(--spectrum-green); }
.spectrum-marker:nth-child(8)  { left: 83.0%; border-color: var(--spectrum-green); }
.spectrum-marker:nth-child(9)  { left: 90.0%; border-color: var(--pb-marker-9); }
.spectrum-marker:nth-child(10) { left: 97.5%; border-color: var(--spectrum-dark-green); }

.spectrum-legend-item:nth-child(1)  .spectrum-legend-num { border-color: var(--spectrum-red); }
.spectrum-legend-item:nth-child(2)  .spectrum-legend-num { border-color: var(--spectrum-red); }
.spectrum-legend-item:nth-child(3)  .spectrum-legend-num { border-color: var(--spectrum-red); }
.spectrum-legend-item:nth-child(4)  .spectrum-legend-num { border-color: var(--spectrum-red); }
.spectrum-legend-item:nth-child(5)  .spectrum-legend-num { border-color: var(--spectrum-orange); }
.spectrum-legend-item:nth-child(6)  .spectrum-legend-num { border-color: var(--pb-marker-6); }
.spectrum-legend-item:nth-child(7)  .spectrum-legend-num { border-color: var(--spectrum-green); }
.spectrum-legend-item:nth-child(8)  .spectrum-legend-num { border-color: var(--spectrum-green); }
.spectrum-legend-item:nth-child(9)  .spectrum-legend-num { border-color: var(--pb-marker-9); }
.spectrum-legend-item:nth-child(10) .spectrum-legend-num { border-color: var(--spectrum-dark-green); }