/* scenario-tabs.css — SecurityForMe scenario tabs v1
   Public LIGHT theme. Turns a long scrolling article into three short panes.

   PROGRESSIVE ENHANCEMENT: none of the hiding happens until the JS adds
   .js-tabs to the container. Without JavaScript — and for any crawler that
   doesn't run it — the page renders exactly as it always did, every section
   stacked and visible. Google indexes tabbed content that lives in the DOM,
   but this way there is no dependency on that being true. */

/* ── At-a-glance strip ────────────────────────────────────── */
.sc-glance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 4px 0 18px;
}
.sc-glance-item {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 12px;
    padding: 12px 14px;
    border-block-end: 4px solid #0E3A6B;
}
.sc-glance-item.g-gold  { border-block-end-color: #D4AF37; }
.sc-glance-item.g-green { border-block-end-color: #16a34a; }
.sc-glance-item.g-purple{ border-block-end-color: #7c3aed; }
.sc-glance-k {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7b8794;
    margin-block-end: 3px;
}
.sc-glance-v { font-size: 1.02rem; font-weight: 800; color: #0E3A6B; line-height: 1.3; }

/* ── Tab bar ──────────────────────────────────────────────── */
.sc-tablist { display: none; }               /* revealed by .js-tabs */

.js-tabs .sc-tablist {
    display: flex;
    gap: 6px;
    background: #eef2f8;
    border-radius: 14px;
    padding: 6px;
    margin-block-end: 18px;
    position: sticky;
    top: 72px;                                /* clears the site header */
    z-index: 40;
    box-shadow: 0 2px 10px rgba(11, 45, 90, .06);
}

.sc-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    padding: 11px 10px;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    color: #5b6b82;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s, color .16s, box-shadow .16s;
}
.sc-tab:hover { background: rgba(255, 255, 255, .7); color: #0E3A6B; }

/* Selected tab takes the pane's own colour — the bar tells you where you are
   without reading it. */
.sc-tab[aria-selected="true"] {
    background: #fff;
    box-shadow: 0 2px 8px rgba(11, 45, 90, .12);
}
.sc-tab[aria-selected="true"][data-accent="navy"]   { color: #0E3A6B; box-shadow: 0 2px 8px rgba(14,58,107,.22),  inset 0 -3px 0 #0E3A6B; }
.sc-tab[aria-selected="true"][data-accent="gold"]   { color: #8a6d1f; box-shadow: 0 2px 8px rgba(212,175,55,.28), inset 0 -3px 0 #D4AF37; }
.sc-tab[aria-selected="true"][data-accent="purple"] { color: #5b21b6; box-shadow: 0 2px 8px rgba(124,58,237,.24), inset 0 -3px 0 #7c3aed; }

.sc-tab-n {
    font-size: .7rem;
    font-weight: 800;
    background: #dbe3ee;
    color: #3d4d63;
    border-radius: 999px;
    padding: 1px 7px;
}
.sc-tab[aria-selected="true"] .sc-tab-n { background: #0E3A6B; color: #fff; }
.sc-tab[aria-selected="true"][data-accent="gold"]   .sc-tab-n { background: #D4AF37; color: #241d05; }
.sc-tab[aria-selected="true"][data-accent="purple"] .sc-tab-n { background: #7c3aed; color: #fff; }

/* ── Panes ────────────────────────────────────────────────── */
.js-tabs .sc-pane { display: none; }
.js-tabs .sc-pane.is-active {
    display: block;
    animation: sc-pane-in .22s ease;
}
@keyframes sc-pane-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* The section labels are redundant once a tab says the same thing. */
.js-tabs .sc-pane > .sc-section-label { display: none; }

/* ── Quiz bar — always reachable, never inside a tab ───────── */
.sc-tabs-foot { margin-block-start: 22px; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .js-tabs .sc-tablist {
        top: 60px;
        padding: 5px;
        gap: 4px;
        /* Scroll sideways rather than squashing labels to nothing. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .js-tabs .sc-tablist::-webkit-scrollbar { display: none; }
    .sc-tab { flex: 0 0 auto; padding: 10px 14px; font-size: .84rem; }
    .sc-glance { grid-template-columns: 1fr 1fr; gap: 9px; }
    .sc-glance-item { padding: 10px 12px; }
    .sc-glance-v { font-size: .95rem; }
}

/* ── Motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .js-tabs .sc-pane.is-active { animation: none; }
    .sc-tab { transition: none; }
}

/* ── Print — show everything, tabs are a screen affordance ── */
@media print {
    .sc-tablist { display: none !important; }
    .js-tabs .sc-pane { display: block !important; }
}