/* Generated by scripts/sync-host.mjs from dashboard/assets/css/site.css. Do not edit. */
/* =====================================================================
   PRODUCT SWITCH
   The Dashboard | Host switch. It exists only in the desktop app, where the
   preload script puts it in the title bar; the websites do not have it.
   Everything from here to the end of this file is copied into the Host site
   by scripts/sync-host.mjs (the app loads that site too), so keep it
   self-contained.
   ===================================================================== */
.app-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: var(--surface);
  flex-shrink: 0;
}
.app-switch a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 999px;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.app-switch a:hover { color: var(--text-bright); }
.app-switch a.is-active { background: var(--text-bright); color: var(--bg); }
@media (max-width: 640px) { .app-switch a { padding: 5px 10px; } }

/* =====================================================================
   DESKTOP APP CHROME
   The app window has no OS title bar (main.js hides it), so the strip
   below is the title bar: the mark on the left, the window's name in the
   middle, and empty space on the right where Windows paints its own
   minimise / maximise / close buttons. Discord's shape, a little thicker
   and in Iridex's own colours. The class is set by the app's preload
   script, so a browser never sees any of this.
   ===================================================================== */
.app-titlebar { display: none; }

.iridex-app-chrome .app-titlebar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Room on the right for the window controls Windows draws over us. */
  padding: 0 158px 0 var(--space-5);
  /* Opaque, and one flat colour. --surface-hi is a translucent tint meant to
     sit on something, so on its own the page scrolled straight through the
     bar; layering it over --bg keeps the tint in both themes and gives the
     app a real colour to sample for the window buttons. */
  background: linear-gradient(0deg, var(--surface-hi), var(--surface-hi)), var(--bg);
  border-bottom: 1px solid var(--border-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 34px -26px #000;
  -webkit-app-region: drag;
  user-select: none;
}

/* The bar drags the window, so everything in it that can be clicked has to
   opt out of that, or the menus would never open. */
.iridex-app-chrome .app-titlebar > *:not(.app-titlebar-name) { -webkit-app-region: no-drag; }

/* The account menu sits against the window controls; the rest stays left. */
.iridex-app-chrome .app-titlebar #navUser { margin-left: auto; }

/* Centred on the window, not on the space left over after the padding --
   otherwise the strip reserved on the right would push the name off-centre. */
.iridex-app-chrome .app-titlebar-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/* The page starts below the bar, and the site header stops sliding under it. */
.iridex-app-chrome body { padding-top: 56px; }
.iridex-app-chrome .site-header { top: 56px; }
.iridex-app-chrome .site-header,
.iridex-app-chrome .site-header * { user-select: none; }

.iridex-app-chrome .app-titlebar > .brand-menu,
.iridex-app-chrome .app-titlebar > .nav-brand { order: 0; }
.iridex-app-chrome .app-titlebar > .app-switch { order: 1; }
.iridex-app-chrome .app-titlebar > #themeToggle { order: 2; }
.iridex-app-chrome .app-titlebar > #navUser { order: 3; }