/*
 * top-bar.css — Evidence-First System
 * TopBar / Section Nav Komponente.
 * Tokens: --topbar-* in theme.css
 * Runtime-Overrides: layout.browser.css / layout.pwa.css
 * JS: top-bar.js (alleinige Instanz für TopBar-Logik)
 *
 * Hierher migriert aus layout.css §TOP BAR (L731–1134)
 */

/* =========================================================
   TOP BAR
   Alle visuellen Regeln der TopBar.
   Farbe/Blur/Hover via --topbar-* Tokens in theme.css.
   ========================================================= */

/* Shell-Hide: Desktop zeigt keine Pill */
#section-nav-trigger {
  display: none;
}

/* --- SECTION NAV TRIGGER + DROPDOWN --- */
@media (max-width: 600px) {
  #section-nav-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 14px;
    right: 14px;
    height: 48px;
    padding: 0 18px;
    background: var(--topbar-bg);
    border: 1px solid var(--topbar-border);
    backdrop-filter: var(--topbar-blur);
    -webkit-backdrop-filter: var(--topbar-blur);
    box-shadow:
      0 8px 24px var(--topbar-shadow-outer),
      inset 0 1px 0 var(--topbar-shadow-inset-top),
      inset 0 0 0 1px var(--topbar-shadow-inset-ring);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    pointer-events: auto;
    z-index: 30;
    transition: background 0.15s;
    overflow: hidden;
  }

  /* UCB-Modus (Phase-Seiten): einreihiges Grid-Layout */
  #section-nav-trigger.ucb-active {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: 4px;
    align-items: center;
    touch-action: manipulation;
    overflow: visible;
  }

  #section-nav-trigger,
  #ucb-chip,
  .ucb-step,
  .ucb-endpoint {
    -webkit-tap-highlight-color: transparent;
  }

  /* Suppress browser default :active state on the button element */
  #section-nav-trigger:active {
    background: var(--topbar-bg);
  }
  @supports (backdrop-filter: blur(1px)) {
    #section-nav-trigger:active {
      background: var(--topbar-bg);
    }
  }

  /* Hover nur auf echten Pointer-Geräten — verhindert sticky-hover auf iOS Touch */
  @media (hover: hover) {
    #section-nav-trigger.ucb-active:hover,
    #section-nav-trigger.ucb-active.open {
      background: var(--glass-bg-fallback);
    }
    @supports (backdrop-filter: blur(1px)) {
      #section-nav-trigger.ucb-active:hover,
      #section-nav-trigger.ucb-active.open {
        background: var(--glass-bg);
      }
    }
  }
  /* Touch: open-State ohne Farbwechsel */
  @media (hover: none) {
    #section-nav-trigger.ucb-active.open {
      background: var(--topbar-bg);
    }
  }

  /* Grid-Placement der UCB-Sub-Elemente */
  #section-nav-trigger.ucb-active #ucb-chip {
    grid-column: 1; grid-row: 1; align-self: center;
  }
  #section-nav-trigger.ucb-active .ucb-divider {
    grid-column: 2; grid-row: 1; align-self: center; height: 26px; margin: 0;
  }
  #section-nav-trigger.ucb-active .ucb-track {
    grid-column: 3; grid-row: 1; align-self: center;
  }
  #section-nav-trigger.ucb-active .ucb-endpoints {
    grid-column: 4; grid-row: 1; align-self: center; margin-left: 0;
  }

  #section-nav-label {
    flex-shrink: 0;
    white-space: nowrap;
    margin-bottom: 1px;
  }
  #section-nav-label.sec-nav-label--centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.8;
  }

  .sec-nav-dots {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

/* --- SECTION NAV GO-DOT (Evidence · First branded state) --- */
#section-nav-dot {
  display: none;
}

@media (max-width: 600px) {
  #section-nav-dot {
    width: 8px;
    height: 8px;
    background: #FFC700;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 199, 0, 0.6);
    flex-shrink: 0;
    position: relative;
  }
  #section-nav-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 1.5px solid rgba(255, 199, 0, 0.55);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  #section-nav-trigger.sec-nav-trigger--branded {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: visible;
  }

  #topbar-menu-icon {
    display: none;
  }
  #section-nav-trigger.sec-nav-trigger--branded #topbar-menu-icon {
    display: flex;
    align-items: center;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    color: #FFFFFF;
    cursor: pointer;
    padding: 5px 5px;
  }
  html:not([data-theme="dark"]) #section-nav-trigger.sec-nav-trigger--branded #topbar-menu-icon {
    color: #111111;
  }
  #topbar-menu-icon svg {
    width: 16px;
    height: 12px;
    display: block;
  }

  /* ── Back-Button (Tier 1.5 + andere Pages mit Branded-Topbar) ──
     Position: rechts, spiegelt den Burger links.
     Burger bleibt unverändert — Sidebar bleibt erreichbar.
     Visibility: nur sichtbar wenn JS `topbar-back-btn` dynamisch eingefügt
     hat (nur bei config.backOnClick).
     Browser/PWA-Verstecken läuft automatisch über das übergeordnete
     #section-nav-trigger (wenn Trigger versteckt → Back ebenfalls). */
  #section-nav-trigger.sec-nav-trigger--branded .topbar-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    color: #FFFFFF;
    cursor: pointer;
    padding: 5px 5px;
    background: transparent;
    border: 0;
    margin: 0;
  }
  html:not([data-theme="dark"]) #section-nav-trigger.sec-nav-trigger--branded .topbar-back-btn {
    color: #111111;
  }
  #section-nav-trigger.sec-nav-trigger--branded .topbar-back-btn:hover {
    opacity: 1;
  }
  #section-nav-trigger.sec-nav-trigger--branded .topbar-back-btn svg {
    width: 14px;
    height: 14px;
    display: block;
  }
  /* Default: nicht-branded Variants oder kein Back → Button verstecken */
  .topbar-back-btn {
    display: none;
  }

  #section-nav-trigger.sec-nav-trigger--branded #section-nav-dot {
    display: inline-block;
    animation: sec-nav-dot-breathe 2.6s ease-in-out infinite;
  }
  #section-nav-trigger.sec-nav-trigger--branded #section-nav-dot::after {
    animation: sec-nav-dot-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  #section-nav-trigger.sec-nav-trigger--branded #section-nav-label.sec-nav-label--centered {
    position: static;
    left: auto;
    transform: none;
    margin-bottom: 0;
    opacity: 0.8;
  }
}

/* --- UCB SUB-ELEMENTS --- */
@media (max-width: 600px) {

  #ucb-chip {
    display: none;
    align-items: center;
    gap: 4px;
    color: var(--y);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-md);
    letter-spacing: var(--ls-tight);
    padding: 0 6px 0 2px;
    flex-shrink: 0;
    cursor: pointer;
    line-height: 1;
  }
  #section-nav-trigger.ucb-active #ucb-chip { display: flex; }

  .ucb-chip-chevron {
    width: 10px;
    height: 10px;
    opacity: 0.9;
  }

  .ucb-divider {
    display: none;
    width: 1px;
    height: 18px;
    background: var(--border-strong);
    opacity: 0.5;
    flex-shrink: 0;
    margin: 0 6px;
  }
  #section-nav-trigger.ucb-active .ucb-divider { display: block; }

  .ucb-track {
    display: none;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: space-around;
    overflow: visible;
    min-width: 0;
  }
  #section-nav-trigger.ucb-active .ucb-track { display: flex; }

  .ucb-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-weight: var(--fw-heavy);
    font-size: 14px;
    letter-spacing: var(--ls-tight);
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
  }
  .ucb-step.is-done { color: var(--y); }
  .ucb-step.is-active {
    width: 22px;
    height: 22px;
    font-size: 16px;
    background: var(--text-faint);
    color: var(--text-on-accent);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--text-faint) 9%, transparent),
      0 6px 16px -2px color-mix(in srgb, var(--text-faint) 35%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--text-faint) 30%, transparent),
      inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
  }
  .ucb-step.is-active.is-done {
    background: var(--y);
    color: var(--text-on-accent);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--y) 9%, transparent),
      0 6px 16px -2px color-mix(in srgb, var(--y) 45%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--y) 40%, transparent),
      inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
  }
  .ucb-step svg { display: none; }

  /* ── Gate-Flow Status (Batch 2) ───────────────────────────────
     Alle bestandenen Fragen (strong und workable) werden gelb,
     konsistent mit der bestehenden is-done-Regel.
     Der Gate-Status wird am AI-Icon via Badge differenziert (grün/gelb/rot),
     in der Topbar bleibt das Farbschema reduziert auf gelb.

     is-locked → noch nicht erreichbar (pointer-events none, dim)
     has-phase-done → Haken neben der Phase-Zahl im Chip-Label (gelb)
  ──────────────────────────────────────────────────────────────── */
  .ucb-step.is-locked {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  #ucb-chip.has-phase-done #ucb-chip-label::after {
    content: '✓';
    color: var(--y);
    font-weight: var(--fw-heavy);
    margin-left: 4px;
    display: inline-block;
  }

  .ucb-endpoints {
    display: none;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 6px;
  }
  #section-nav-trigger.ucb-active .ucb-endpoints { display: flex; }

  .ucb-endpoint {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .ucb-endpoint.is-done { color: var(--y); }
  .ucb-endpoint.is-active {
    width: 24px;
    height: 24px;
    background: var(--text-faint);
    color: var(--text-on-accent);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--text-faint) 9%, transparent),
      0 6px 16px -2px color-mix(in srgb, var(--text-faint) 35%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--text-faint) 30%, transparent),
      inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
  }
  .ucb-endpoint.is-active.is-done {
    background: var(--y);
    color: var(--text-on-accent);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--y) 9%, transparent),
      0 6px 16px -2px color-mix(in srgb, var(--y) 45%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--y) 40%, transparent),
      inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
  }
  .ucb-endpoint svg { width: 16px; height: 16px; }
  .ucb-endpoint.is-active svg { width: 18px; height: 18px; }

  #section-nav-trigger.ucb-active #section-nav-dot,
  #section-nav-trigger.ucb-active #section-nav-label,
  #section-nav-trigger.ucb-active .sec-nav-dots {
    display: none;
  }
}

@keyframes sec-nav-dot-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 199, 0, 0.6);
  }
  50% {
    transform: scale(0.85);
    box-shadow: 0 0 6px rgba(255, 199, 0, 0.35);
  }
}

@keyframes sec-nav-dot-ping {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  70%, 100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}