/* ---------------------------------------------------------------------------
   Installed-app shell, shared by every Hume app (load after layout.css, or after
   tokens.css in apps that don't use it). Framework-agnostic: apps opt in with
   these hooks —

     [data-app-titlebar]  the top bar: clears the status bar / notch, and becomes the
                          window's title bar in an installed desktop app
                          (display_override "window-controls-overlay")
     [data-app-sidebar]   the sidebar / drawer: clears the notch and home indicator
     [data-app-main]      the column beside the sidebar: starts under the title bar
     [data-titlebar-brand]  shown only in the title bar of an installed desktop app
     .tabbar              the phone tab bar (below 1024px), see below
     .topbar-mobile[data-sidebar-open], [data-drawer-button]
                          the drawer button, hidden on phones when a tab bar is present
                          (the tab bar's "More" opens the drawer instead)

   and pwa.js (install, updates, theme color, keyboard, the tab bar's page action).
--------------------------------------------------------------------------- */

/* --- A stable, app-like page: no accidental zoom ---------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;
}
/* No double-tap zoom on anything you tap; pinch zoom stays for people who need it. */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"],
[role="tab"],
[tabindex] {
  touch-action: manipulation;
}
/* iOS zooms into any field under 16px when it gets focus: touch screens get 16px fields. */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]),
  select,
  textarea,
  [contenteditable="true"] {
    font-size: var(--text-base);
  }
}
/* Installed: no rubber-band or pull-to-refresh of the whole page, no text selection on chrome. */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  html,
  body {
    overscroll-behavior: none;
  }
  [data-app-titlebar],
  [data-app-sidebar],
  .tabbar {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* --- Safe areas (viewport-fit=cover) --------------------------------------- */

[data-app-titlebar] {
  height: calc(var(--topbar-height) + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
}
[data-app-sidebar] {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
[data-titlebar-brand] {
  display: none;
}

/* --- Title bar of an installed desktop app ---------------------------------- */
/* The top bar moves into the window's title bar, beside the window controls; it
   drags the window, and everything you can click in it still works. */

@media (display-mode: window-controls-overlay) {
  [data-app-titlebar] {
    position: fixed;
    top: 0;
    left: env(titlebar-area-x, 0);
    z-index: var(--z-sticky);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, var(--topbar-height));
    padding-top: 0;
    padding-bottom: 0;
    -webkit-app-region: drag;
    app-region: drag;
  }
  [data-app-titlebar]
    :is(a, button, input, select, textarea, summary, label, [role="button"], [role="menu"], .menu, [data-dropdown]) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
  [data-app-titlebar] :is(button, input, select, .btn) {
    max-height: env(titlebar-area-height, var(--topbar-height));
  }
  [data-titlebar-brand] {
    display: flex;
  }
  [data-app-sidebar] {
    top: env(titlebar-area-height, 0);
    padding-top: 0;
  }
  [data-app-main] {
    padding-top: env(titlebar-area-height, 0);
  }
}

/* --- Phone tab bar ------------------------------------------------------------ */
/* <nav class="tabbar" aria-label="Tab bar">
     <a class="tabbar-item" href="…" aria-current="page"><svg class="icon">…</svg><span>Home</span></a>
     <span class="tabbar-action" data-tabbar-action="auto" hidden></span>   (optional: the page's main action)
     <a class="tabbar-item" href="…"><svg class="icon">…</svg><span>Leave</span><span class="tabbar-badge">3</span></a>
     <button class="tabbar-item" type="button" data-sidebar-open><svg class="icon">…</svg><span>More</span></button>
   </nav>
   Every app keeps the same order: home first, its most-used screens, then More (the
   full menu). Hidden from 1024px, where the sidebar shows everything. */

.tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-tabbar);
  display: flex;
  align-items: stretch;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
  padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(var(--blur-topbar));
  -webkit-backdrop-filter: blur(var(--blur-topbar));
  transition: transform var(--duration-slow) var(--ease-out);
}
@media (min-width: 1024px) {
  .tabbar {
    display: none;
  }
}
@media print {
  .tabbar {
    display: none;
  }
}
/* The on-screen keyboard is up (pwa.js): the bar steps aside instead of riding on it. */
html[data-keyboard] .tabbar {
  transform: translateY(100%);
}

.tabbar-item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
  padding: 0 calc(var(--spacing) * 1);
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font-size: var(--text-3xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
}
.tabbar-item > span:not(.tabbar-badge) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabbar-item > .icon,
.tabbar-item > svg {
  box-sizing: content-box;
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-slow) var(--ease-out);
}
.tabbar-item[aria-current="page"] {
  color: var(--brand-ink);
}
.tabbar-item[aria-current="page"] > .icon,
.tabbar-item[aria-current="page"] > svg {
  background: var(--accent);
}
.tabbar-item:active > .icon,
.tabbar-item:active > svg {
  background: var(--muted);
}
.tabbar-item:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.tabbar-badge {
  position: absolute;
  top: calc(var(--spacing) * 1);
  left: calc(50% + var(--spacing) * 2.5);
  min-width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  padding: 0 calc(var(--spacing) * 1);
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--brand-foreground);
  font-size: var(--text-3xs);
  line-height: calc(var(--spacing) * 4);
  text-align: center;
}
.tabbar-badge:empty {
  display: none;
}

/* The page's main action (New course, Punch in, Invite…): a raised button in the middle. */
.tabbar-action {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.tabbar-action[hidden] {
  display: none;
}
.tabbar-action > :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 11);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.tabbar-action > :is(a, button):active {
  transform: scale(0.96);
}
.tabbar-action .icon,
.tabbar-action svg {
  width: calc(var(--spacing) * 5.5);
  height: calc(var(--spacing) * 5.5);
}

/* Room for the bar: the page's end, toasts and the drawer button. */
@media (max-width: 1023px) {
  body:has(> .tabbar) {
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0));
  }
  body:has(> .tabbar) :is(.topbar-mobile[data-sidebar-open], [data-drawer-button]) {
    display: none;
  }
  body:has(> .tabbar) :is(.toast-region, .pwa-banner) {
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0) + var(--spacing) * 3);
  }
  /* The page's main action sits in the tab bar instead (pwa.js). */
  body:has(> .tabbar .tabbar-action:not([hidden])) [data-tabbar-source] {
    display: none;
  }
}

/* --- Install and update banner (pwa.js) ---------------------------------------- */

.pwa-banner {
  position: fixed;
  inset: auto calc(var(--spacing) * 4) calc(var(--spacing) * 4);
  z-index: var(--z-toast);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  max-width: var(--container-md);
  margin: 0 auto;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3) calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--text-control);
  line-height: var(--leading-snug);
  animation: pwa-banner-in var(--duration-slow) var(--ease-out);
}
@keyframes pwa-banner-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--spacing) * 2));
  }
}
.pwa-banner-text {
  flex: 1 1 calc(var(--spacing) * 40);
}
.pwa-banner-text strong {
  display: block;
  font-weight: var(--font-weight-semibold);
}
.pwa-banner-actions {
  display: flex;
  gap: calc(var(--spacing) * 2);
  margin-left: auto;
}
.pwa-banner button {
  height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.pwa-banner button[data-primary] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
[data-pwa-install][hidden] {
  display: none !important;
}