/* ==========================================================================
   VÄLILEHTIRIVI — ilme v2 (§11.9)
   ==========================================================================

   Sivun sisäinen navigaatio. Käyttäjät: Strategia (6), Toteutus (3),
   Strategy V3, Strategy OS, Tiimi.

   Aktiivinen välilehti ei ole laatta vaan PAINO ja VIIVA: 600-paino,
   muste ja 2 px alaviiva joka lävistää rivin hiusviivan
   (`margin-bottom: -1px`). Laatta oli Chrome-selaimen ele — se lupasi
   että välilehti on ikkuna, ja lupasi sen glass-taustalla jota ilmeessä
   ei ole.

   Rivi on sticky ja saa taustan vasta kun sivua on vieritetty. HUOM
   §11.9: vierittimen `padding-top` on nollattava, muuten teksti vilkkuu
   liimautuneen rivin yläpuolella — leikkaus tapahtuu padding-boxiin.

   Reference: docs/console/STYLEGUIDE.md — Sub-Tab Rail Pattern.
   Live demo:  /studio/design-system  →  Sub-tabs.

   Example:
     <nav class="sub-tab-rail" aria-label="Strategia-näkymät">
         <button type="button" class="sub-tab-rail__tab is-active" data-tab="bundles">
             <i class="fa-sharp fa-light fa-diagram-project" aria-hidden="true"></i>
             Strategiakokonaisuudet
         </button>
         <button type="button" class="sub-tab-rail__tab" data-tab="tilanne">
             <i class="fa-sharp fa-light fa-wave-pulse" aria-hidden="true"></i>
             Tilanne
         </button>
         ...
     </nav>

   With count badges (Toteutus):
     <button class="sub-tab-rail__tab is-active" data-tab="goals">
         <i class="fa-sharp fa-light fa-bullseye" aria-hidden="true"></i>
         Tavoitteet
         <span class="sub-tab-rail__count num">8</span>
     </button>
   ========================================================================== */

.sub-tab-rail {
    display: flex;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
    padding-top: 6px;
    margin-bottom: 0;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    /* POHJA ON AINA UMPINAINEN (23.9.2026). Rivi oli läpinäkyvä levossa ja
       sai taustan vasta `.is-scrolled`-luokasta, jonka JS lisää vieritettäessä
       — ja tausta oli `color-mix(paper 92%)` + `blur(8px)`. Kaksi vikaa:
       kahdeksan prosentin läpinäkyvyys ei piilota 13–15 px tekstiä (mitattuna
       Toteutuksen rivit luettiin rivin LÄPI), ja peittävyys riippui siitä
       ehtiikö skripti kuuntelijoineen ajoon ennen ensimmäistä vieritystä.
       Peittäminen on oikeellisuutta, ei tehostetta, eikä se saa nojata
       luokkaan jota ei ehkä ole. Levossa `--paper` on sama pinta jolla rivi
       jo lepää, joten mikään ei muutu silmälle. Lasi oli lisäksi Northern
       Lights -jäänne; ilme v2 ei tunne sitä (STYLEGUIDE §17). */
    background: var(--paper);
}

.sub-tab-rail__tab {
    appearance: none;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    min-height: var(--touch-target-min);
    /* Myös leveys (28.9.2026). Minä-välilehti on monella kielellä kaksi
       kirjainta, ja kosketuksella 44 px:n minimistä puuttui 0,3–2,7 px:
       nl "Ik" 41,3, it "Io" 41,4, lv "Es" 43,5, pl "Ja" ja cs "Já" 43,7 px
       (Toteutus, 1180 ja 375 px). Sisältö keskitetään, jotta alaviiva
       ulottuu tasan molemmille puolille. */
    min-width: var(--touch-target-min);
    justify-content: center;
    padding: 8px 2px 13px;
    /* Aktiivinen omistaa perusviivan: alaviiva lävistää rivin
       hiusviivan. Tämä on ilmeen ainoa sallittu negatiivinen marginaali. */
    margin-bottom: -1px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink-3);
    letter-spacing: normal;
    transition: color .15s var(--ease);
    text-decoration: none;
}

.sub-tab-rail__tab > * {
    line-height: 1;
}

.sub-tab-rail__tab:hover {
    color: var(--ink);
    background: none;
}

.sub-tab-rail__tab:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

/* Aktiivinen: paino ja viiva, ei laattaa eikä taustaa. */
.sub-tab-rail__tab.is-active {
    color: var(--ink);
    font-weight: 600;
    background: none;
    box-shadow: none;
    border-bottom-color: var(--ink);
}

.sub-tab-rail__tab i {
    font-size: 13px;
    opacity: .7;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.sub-tab-rail__tab.is-active i {
    /* Active icon: neutral (inherits parent color) — no emerald tint.
       Karen kompassi-tyyli: typografia kantaa, ei accent-väri. */
    opacity: 1;
}

/* Optional count badge — used by Toteutus tabs to show items per view.
   Accent color picks up only on the active tab. */
.sub-tab-rail__count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.sub-tab-rail__tab.is-active .sub-tab-rail__count {
    color: var(--accent-text-emerald);
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   Sub-view container — pair with the rail. Each sub-view is hidden by
   default and revealed when its data-tab matches the active tab.
   ---------------------------------------------------------------------------- */

.sub-tab-rail__view {
    display: none;
    flex-direction: column;
    gap: var(--space-8);
}

.sub-tab-rail__view.is-active {
    display: flex;
}

/* ----------------------------------------------------------------------------
   Reduced motion — color/bg transitions are subtle, but be explicit
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sub-tab-rail__tab {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   Mobile — wrap → horizontal scroll. On a phone 3–5 tabs wrap to multiple
   loose rows; a single scrollable rail reads cleaner and keeps the baseline
   intact. Tabs grow to a 44px touch target. Scrollbar hidden (touch).
   ---------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .sub-tab-rail {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;            /* Firefox */
        -webkit-overflow-scrolling: touch;
        /* Vaakascroll ei saa kimmota pystysivun scrolliksi kun rail
           on päässä loppuun. */
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--space-3);
    }

    .sub-tab-rail::-webkit-scrollbar { display: none; }  /* WebKit */

    .sub-tab-rail__tab {
        flex: 0 0 auto;
        height: 44px;
        scroll-snap-align: start;
    }

    /* Häivereuna kertoo että tabeja on lisää. data-overflow tulee
       js/components/sub-tab-rail.js:stä — ilman sitä ei feidata, jottei
       mahtuva rail näytä katkaistulta. Mask, ei gradient-overlay: rail on
       läpinäkyvä eikä overlay voisi tietää taustaväriä. */
    .sub-tab-rail[data-overflow="end"] {
        mask-image: linear-gradient(to right, var(--mask-opaque) calc(100% - 32px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, var(--mask-opaque) calc(100% - 32px), transparent 100%);
    }

    .sub-tab-rail[data-overflow="start"] {
        mask-image: linear-gradient(to right, transparent 0, var(--mask-opaque) 32px);
        -webkit-mask-image: linear-gradient(to right, transparent 0, var(--mask-opaque) 32px);
    }

    .sub-tab-rail[data-overflow="both"] {
        mask-image: linear-gradient(to right, transparent 0, var(--mask-opaque) 32px,
                                    var(--mask-opaque) calc(100% - 32px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, var(--mask-opaque) 32px,
                                            var(--mask-opaque) calc(100% - 32px), transparent 100%);
    }
}