/* ============================================================
   Traka testne okoline (plan 206).

   Oblik je preuzet od trake impersonacije (`qms-profile.css`), jer rješava
   isti problem: „radiš u stanju koje nije obično". Razlika je u tome što je
   ovo TRAJNO stanje stranice, a impersonacija privremeno stanje sjednice —
   zato traka okoline stoji IZNAD nje.

   BOJA

   Ton je ljubičasti (~300), različit i od naglaska (tirkiz, 195) i od
   impersonacije (crvena, 25). Tri stanja, tri tona koja se ne mogu zamijeniti.

   Tokeni se razlikuju po temi, kao kod impersonacije: ista boja ne prolazi na
   obje podloge. Kontrast se mjeri, ne procjenjuje (kućno pravilo) — najmanje
   4,5 : 1 za tekst.

   Boja NIJE jedini nositelj poruke: traka piše „TESTNA OKOLINA" riječima.
   ============================================================ */

.qms-theme,
.qms-theme-dark {
    /* Svijetla ljubičasta ispuna, taman tekst na njoj. */
    --okbar-bg: oklch(0.72 0.15 300);
    --okbar-fg: #16051c;
}

/* Visina trake je JEDAN broj, i koristi se na DVA mjesta: kao `min-height`
   same trake i kao `top` trake impersonacije ispod nje. Dok je broj jedan,
   te dvije stvari se ne mogu razići.

   Prvo je ovdje stajalo `top: 35px` upisano napamet, a izmjerena visina bila
   je 37,5 px — traka impersonacije bi se preklapala. Broj koji se upiše na
   jednom mjestu, a mjeri na drugom, uvijek se jednom raziđe. */
.qms-theme { --okbar-h: 35px; }

.qms-theme-light {
    /* Na svijetloj podlozi ista ispuna nema kontrast za bijeli tekst, pa ide
       tamnija — isti postupak kao kod trake impersonacije. */
    --okbar-bg: oklch(0.47 0.19 300);
    --okbar-fg: #ffffff;
}

.qms-okbar {
    position: sticky;
    top: 0;
    z-index: 41; /* iznad trake impersonacije (40) */
    display: flex;
    align-items: center;
    gap: 12px;
    /* `min-height` umjesto okomitog paddinga: tako visina NE ovisi o metrici
       pisma, pa je `--okbar-h` istinita po konstrukciji, a ne slučajno. */
    min-height: var(--okbar-h);
    padding: 0 18px;
    background: var(--okbar-bg);
    color: var(--okbar-fg);
    font-size: 13px;
}

.qms-okbar-oznaka {
    font-weight: 700;
    letter-spacing: .04em;
}

.qms-okbar-meta {
    opacity: .9;
    font-size: 12.5px;
}

/* Kad su obje trake, okolina je prva i mora ostati vidljiva kad se stranica
   pomakne; impersonacija se lijepi ispod nje — za tocno visinu trake okoline,
   uzetu iz iste promjenljive koja tu visinu i postavlja. */
body.is-test .qms-impbar {
    top: var(--okbar-h);
}

@media (max-width: 720px) {
    /* Na telefonu traka ima dva retka, pa je i broj drugi - ali i dalje JEDAN,
       pa pomak impersonacije ide za njim sam. */
    .qms-theme { --okbar-h: 54px; }

    .qms-okbar {
        flex-wrap: wrap;
        align-content: center;
        gap: 2px 10px;
        padding: 0 14px;
    }

    .qms-okbar-meta {
        flex-basis: 100%;
    }
}

@media print {
    /* Na ispisu je oznaka VAZNIJA nego na ekranu: papir s testa ne smije se
       moci zamijeniti s papirom iz produkcije. Ljepljivost se mice, traka
       ostaje. */
    .qms-okbar {
        position: static;
        background: #ffffff;
        color: #000000;
        border-bottom: 2px solid #000000;
    }
}