/*
 * layout.browser.css — Evidence-First System
 * Browser-spezifische Overrides.
 * Gilt ausschließlich wenn html.browser-mode gesetzt ist.
 * Geladen nach layout.css.
 */

/* ─────────────────────────────────────────────
   BROWSER MENU CARD
   Nur Mobile Browser — nicht PWA Standalone.
   Klappt vom Burger aus auf, überdeckt Viewport.
───────────────────────────────────────────── */

@media (max-width: 600px) {

  /* ── Sidebar im Browser ausblenden ── */
  html.browser-mode .app-sidebar {
    display: none;
  }

  /* ── Scoped spacing tokens (only where no exact global match exists) ── */
  #browser-menu-card {
    --mnav-py: 10px;   /* no match: between --space-2 (8px) and --space-3 (12px) */
    --msec-pt: 14px;   /* no match: between --space-3 (12px) and --space-4 (16px) */
  }

  /* ── Card container — Glass Panel material ── */
  html.browser-mode #browser-menu-card {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 65px;
    right: 65px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: var(--glass-bg-fallback);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: none;
    flex-direction: column;
    z-index: 39;
    pointer-events: auto;
  }

  @supports (backdrop-filter: blur(1px)) {
    html.browser-mode #browser-menu-card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
  }

  /* ── Open state + animation ── */
  html.browser-mode body.browser-menu-open #browser-menu-card {
    display: flex;
    animation: menuCardIn 160ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes menuCardIn {
    from { opacity: 0; transform: scale(0.97) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
  }

  @media (prefers-reduced-motion: reduce) {
    html.browser-mode body.browser-menu-open #browser-menu-card {
      animation: none;
    }
  }

  /* ── Dimm-Effekt bei Menu-Open — identisch zu PWA Sidebar ── */
  html.browser-mode body.browser-menu-open .app-main::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--surface-page);
    opacity: 0.8;
    z-index: 35;
    pointer-events: auto;
  }

  /* ── Nav scroll container ── */
  html.browser-mode #browser-menu-card #browser-nav-slot {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-6);
  }

  /* ── UI controls hidden when card open ── */
  html.browser-mode body.browser-menu-open #btn-settings,
  html.browser-mode body.browser-menu-open #section-nav-trigger,
  html.browser-mode body.browser-menu-open #topbar-menu-icon,
  html.browser-mode body.browser-menu-open #btn-step-forward-fixed,
  html.browser-mode body.browser-menu-open .ai-toggle-btn {
    display: none !important;
  }

  /* ─────────────────────────────────────────────
     HEADER — Brand
  ───────────────────────────────────────────── */

  #browser-menu-card .sidebar-brand {
    background: transparent;
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  /* ─────────────────────────────────────────────
     FOOTER
  ───────────────────────────────────────────── */

  #browser-menu-card .sidebar-footer {
    border-top: none;
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }

  /* ─────────────────────────────────────────────
     SECTION LABELS
  ───────────────────────────────────────────── */

  #browser-menu-card .nav-section-label {
    padding: var(--msec-pt) var(--space-4) var(--space-1);
    margin-top: 0;
  }

  /* Visual divider before sections that follow a nav item */
  #browser-menu-card .nav-item + .nav-section-label {
    margin-top: var(--space-2);
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
  }

  /* ─────────────────────────────────────────────
     NAV ITEMS — Base
  ───────────────────────────────────────────── */

  #browser-menu-card .nav-item {
    padding: var(--mnav-py) var(--space-4);
    border-left-width: 2px;
  }

  /* Hover: glass-compatible tint */
  #browser-menu-card .nav-item:hover:not(.active) {
    background: rgba(120,120,128,0.08);
  }

  /* ─────────────────────────────────────────────
     ACTIVE STATE — Tinted accent, not full yellow
  ───────────────────────────────────────────── */

  #browser-menu-card .nav-item.active {
    background: var(--y-glow);
    border-left-color: var(--text-accent);
    border-left-width: 3px;
  }

  /* Text stays primary — no inversion on tinted bg */
  #browser-menu-card .nav-item.active .nav-item-title {
    color: var(--text-primary);
  }

  /* Number gets accent color */
  #browser-menu-card .nav-item.active .nav-item-num {
    color: var(--text-accent);
  }

  /* Check adapts to tinted bg */
  #browser-menu-card .nav-item.active .nav-item-check {
    border-color: var(--border-strong);
  }
  #browser-menu-card .nav-item.active .nav-item-check.done {
    background: var(--text-accent);
    border-color: var(--text-accent);
  }
  #browser-menu-card .nav-item.active .nav-item-check svg {
    color: var(--text-on-accent);
  }

  /* ─────────────────────────────────────────────
     PHASE ITEMS — Hierarchy differentiation
  ───────────────────────────────────────────── */

  #browser-menu-card .nav-item--phase .nav-item-num {
    font-variant-numeric: tabular-nums;
    min-width: 26px;
    color: var(--text-muted);
  }

  #browser-menu-card .nav-item--phase.active .nav-item-num {
    color: var(--text-accent);
  }

  #browser-menu-card .nav-item--phase .nav-item-meta {
    font-size: 11px;
    margin-top: 1px;
  }

  /* ─────────────────────────────────────────────
     PHASE PROGRESS BAR
  ───────────────────────────────────────────── */

  #browser-menu-card .nav-phase-bar {
    height: 2px;
    background: var(--border-subtle);
    border-radius: 1px;
    margin-top: 5px;
    overflow: hidden;
  }

  #browser-menu-card .nav-phase-fill {
    height: 100%;
    background: var(--text-accent);
    border-radius: 1px;
    opacity: 0.40;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Completed phase */
  #browser-menu-card .nav-item--phase.nav-item--done .nav-phase-fill {
    opacity: 0.75;
  }

  /* Active phase */
  #browser-menu-card .nav-item--phase.active .nav-phase-fill {
    opacity: 0.55;
  }

  /* TOP SAFE AREA FILL */
  .top-safe-fill {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 12px);
    background: var(--bg);
    z-index: 28;
    pointer-events: none;
  }

  html.browser-mode .top-safe-fill {
    display: block;
  }

  html.pwa-standalone .top-safe-fill {
    display: none;
  }

}