/* GENERATED from packages/design/tabbar.css by packages/design/scripts/sync.mjs — do not edit here. */
/* Kardio bottom tab bar — the platform switch (Kurs · EKG · Echo · EP ·
   Studien) on phones and tablets in portrait. Requires tokens.css and
   header.css; load it right after header.css. HEADER.md "Mobile Shell".

     <nav class="app-tabbar" id="platform-tabbar" aria-label="Kardio">   directly after </header>
       <a href="…" aria-current="page"><svg class="tabbar-icon" viewBox="0 0 32 32">…</svg><span class="tabbar-label">Kurs</span></a>
       …
       <a href="https://trialsgram.com/" target="_blank" rel="noopener">…<span class="tabbar-label">Studien<span class="tabbar-ext" aria-hidden="true">↗</span><span class="sr-only"> (öffnet in neuem Tab)</span></span></a>
     </nav>

   Shown only on <html class="has-tabbar"> (set by the platform builds, never
   in embeds) and only in the tabbar tier
     (max-width: 900px) and (min-height: 501px)
   There the header's .platform-nav goes, and body gets bottom padding equal to
   --tabbar-offset (56 px + bottom inset). Landscape phones
     (max-width: 960px) and (max-height: 500px)
   keep the platform links inline in the one-row header instead (no bar). */
.app-tabbar { display: none; }
@media (max-width: 900px) and (min-height: 501px) {
  html.has-tabbar { --tabbar-offset: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  html.has-tabbar body { padding-bottom: var(--tabbar-offset); }
  html.has-tabbar .app-header .platform-nav { display: none; }
  html.has-tabbar .app-tabbar {
    position: fixed; z-index: var(--z-tabbar); left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 120px)); justify-content: center;
    box-sizing: border-box; height: var(--tabbar-offset);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--surface); border-top: 1px solid var(--line); font-family: var(--font-sans);
  }
  /* 55 px: the 56 px row less the hairline, so a link never reaches into the bottom inset */
  .app-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: calc(var(--tabbar-h) - 1px); color: var(--muted); font-size: var(--text-xs); font-weight: 600; line-height: 13px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .app-tabbar .tabbar-icon { box-sizing: content-box; width: 24px; height: 24px; padding: 2px 12px; border-radius: var(--radius-pill); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .app-tabbar .tabbar-label { white-space: nowrap; }
  .app-tabbar a[aria-current="page"] { color: var(--accent-ink); }
  .app-tabbar a[aria-current="page"] .tabbar-icon { background: var(--accent-soft); }
  .app-tabbar a:focus-visible { outline: var(--focus-ring); outline-offset: -4px; border-radius: var(--radius-button); }
  .app-tabbar .tabbar-ext { margin-left: 1px; font-size: 9px; vertical-align: 2px; }
  /* keyboard: no commas inside :has() (chrome.test splits selectors on commas) */
  html.has-tabbar:has(input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"])) .app-tabbar { display: none; }
  html.has-tabbar:has(textarea:focus) .app-tabbar { display: none; }
}
@media (max-width: 960px) and (max-height: 500px) {
  html.has-tabbar body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* shrinks and scrolls at high zoom (header.css short tier) */
  html.has-tabbar .app-header .platform-nav { display: flex; flex: 0 1 auto; }
}
@media print { .app-tabbar, .app-header .header-more { display: none !important; } }

/* The cath simulator adds a sixth destination on platform pages. */
@media (max-width: 900px) and (min-height: 501px) {
  html.has-tabbar .app-tabbar:has(> a:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 120px)); }
}

@media (max-width: 900px) and (min-height: 501px) {
 html.has-tabbar .app-tabbar:has(> a:nth-child(7)) { grid-template-columns: repeat(7, minmax(0,120px)); }
 .app-tabbar:has(> a:nth-child(7)) .tabbar-icon { padding-inline: 6px; }
}