/* ============================================================
   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.
   Bewusst eine eigene Datei: styles/main.css bleibt damit weitgehend das
   Original, ein Abgleich mit dem Quellprojekt bleibt möglich.

   pb--Präfix als eigener Namensraum. z-index 10001 liegt über den
   Splash-Panels (1000/1001) und über dem Filmkorn (900) — die Einordnung
   als Konzeptstudie steht ab der ersten Sekunde, nicht erst danach.

   Zurückhaltend gehalten: Grundfarbe --ink, Schrift --bone, Mono wie im
   übrigen Kleinsatz der Marke. Ein lauter Balken über einem bewusst
   leisen Auftritt wäre der falsche erste Eindruck.
   ============================================================ */

.pb-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10001;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(12px, 3vw, 28px);
    background: rgba(10, 10, 10, 0.9);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    backdrop-filter: saturate(120%) blur(10px);
    border-bottom: 1px solid rgba(239, 235, 227, 0.12);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pb-bar__brand { display: flex; align-items: center; opacity: .8; 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;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(239, 235, 227, .56);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}
.pb-bar__back:hover { color: #EFEBE3; }

.pb-bar__tag {
    padding: .3em .7em;
    border: 1px solid rgba(239, 235, 227, .3);
    color: rgba(239, 235, 227, .8);
    letter-spacing: .16em;
}

/* Platz für den Balken schaffen. Der Ticker steht im Fluss und rutscht
   mit dem Body nach unten; die fixierte Kopfzeile klebte auf der Höhe
   des Tickers und muss denselben Betrag mitwandern. */
body { padding-top: 36px; }
.hdr { top: calc(36px + var(--ticker-h)); }

@media (max-width: 560px) {
    .pb-bar { height: 32px; }
    .pb-bar__back { font-size: 9px; letter-spacing: .12em; }
    .pb-bar__tag { display: none; }
    body { padding-top: 32px; }
    .hdr { top: calc(32px + var(--ticker-h)); }
}

/* ============================================================
   Querlauf auf schmalen Schirmen — Fehler aus dem Quellprojekt

   Bei 390 px scrollte die Seite seitwärts: gemessen 731 statt 390 px,
   also fast doppelte Breite. Ursache ist .mani__cols im Manifest:

       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

   auto-fit klappt hier nicht zusammen. Der Grund liegt eine Ebene höher:
   .mani__body ist selbst ein Grid-Element und behält min-width: auto.
   Sein Mindestmaß ist damit die min-content-Breite seines Inhalts — und
   die beträgt 3 × 220 px + 2 × 25,6 px Abstand = 711 px. Das Raster sieht
   also nie die tatsächlich verfügbaren 350 px und legt drei feste Spuren
   an, die aus dem Elternteil herauslaufen.

   minmax(min(220px, 100%), 1fr) erlaubt der Spur, unter 220 px zu
   schrumpfen, sobald der Container schmaler ist. Ab 220 px verfügbarer
   Breite ist min(220px, 100%) exakt 220px — auf Tablet und Desktop ändert
   sich also nichts.

   Dieselbe Konstruktion steht an fünf Stellen im Stylesheet; alle fünf
   sind hier abgesichert, damit der Fehler nicht nur verschoben wird.
   (Er steckt auch im Quellprojekt unter Webseiten/Noir Calme.)
   ============================================================ */

.mani__cols  { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.mani__vals  { grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr)); }
.mark__grid  { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.pal__grid   { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.ft__cols    { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }