/* ============================================================
   pb-bar.css — der Rückweg zu Purple AI Labs.

   Die Studie bringt ihre eigene Navigation mit und weiß nichts von
   der Hauptseite. Ohne diesen Balken landet der Besucher in einer
   Sackgasse. Eigene Datei, damit main.css nah am Original bleibt.

   z-index 10001 liegt über Splash (9500), Korn (9000) und Navigation
   (8000) — die Einordnung als Konzeptstudie steht ab der ersten
   Sekunde, nicht erst nach dem Intro.

   Farbe aus der Marke: --ink-deep als Grund, Papier als Schrift,
   Satoshi wie im übrigen Kleinsatz.

   Anders als bei den übrigen Studien rechnet die Leiste die obere
   Sicherheitszone (Notch) selbst ein: Das Original hatte sie in der
   Navigation, die jetzt darunter sitzt.
   ============================================================ */

:root { --pb-h: calc(36px + env(safe-area-inset-top, 0px)); }

.pb-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10001;
    height: var(--pb-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: env(safe-area-inset-top, 0px)
             max(clamp(12px, 3vw, 28px), env(safe-area-inset-right, 0px))
             0
             max(clamp(12px, 3vw, 28px), env(safe-area-inset-left, 0px));
    background: rgba(26, 21, 18, 0.92);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    backdrop-filter: saturate(120%) blur(10px);
    border-bottom: 1px solid rgba(231, 223, 210, 0.14);
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.pb-bar__brand {
    display: flex;
    align-items: center;
    min-height: 32px;
    opacity: .82;
    transition: opacity .25s ease;
}
.pb-bar__brand:hover { opacity: 1; }
.pb-bar__brand img { height: 13px; width: auto; display: block; }

.pb-bar__back {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 32px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(231, 223, 210, .66);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}
.pb-bar__back:hover { color: #E7DFD2; }

.pb-bar__tag {
    padding: .3em .7em;
    border: 1px solid rgba(231, 223, 210, .3);
    color: rgba(231, 223, 210, .86);
    letter-spacing: .14em;
}

/* Platz für den Balken. Die Navigation klebte ganz oben und rückt um
   dieselbe Höhe nach unten; ihre Notch-Zone übernimmt jetzt die Leiste.
   Der Hero verliert die Balkenhöhe, sonst läge sein Ticker beim Laden
   knapp unter der Falz. */
body { padding-top: var(--pb-h); }
.nav { top: var(--pb-h); padding-top: 1.1rem; }
.hero { min-height: calc(100svh - var(--pb-h)); }

@media (max-width: 560px) {
    :root { --pb-h: calc(32px + env(safe-area-inset-top, 0px)); }
    .pb-bar__back { font-size: 10px; letter-spacing: .12em; }
    .pb-bar__tag { display: none; }
}