/* Copied byte-identical across the fleet. Per-app look comes ONLY from the
   --fleet-* tokens each app defines in its globals, plus the app's own button class on
   the trigger. Size, centering and the focus ring sit on every trigger; the look (radius,
   border, fill, type, press) applies only to a bare trigger, class exactly "fleet-trigger".
   With the app's class on it, that class is the whole look: nothing here leaks into what it
   leaves unset. :where() keeps all of it at zero specificity. */
:where(.fleet-trigger) {
  inline-size: 44px; block-size: 44px; flex: none;
  display: inline-grid; place-items: center; padding: 0; cursor: pointer;
}
:where([class="fleet-trigger"]) {
  border-radius: 999px; border: 1px solid var(--fleet-line);
  background: var(--fleet-accent); color: var(--fleet-on-accent);
  font: 600 1rem/1 var(--fleet-font);
  transition: transform 120ms ease-out;
}
:where([class="fleet-trigger"]:active) { transform: scale(0.94); }
:where(.fleet-trigger:focus-visible) { outline: 2px solid var(--fleet-accent); outline-offset: 3px; }
.fleet-scrim { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.fleet-panel {
  position: fixed; z-index: 1001;
  inline-size: min(360px, calc(100% - 32px)); max-block-size: min(80dvh, 640px); overflow: auto;
  padding: 16px; border-radius: var(--fleet-radius);
  background: var(--fleet-surface); color: var(--fleet-ink);
  border: 1px solid var(--fleet-line); box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
  font-family: var(--fleet-font);
}
.fleet-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fleet-app {
  display: grid; justify-items: center; gap: 4px; padding: 8px 2px; min-block-size: 44px;
  border-radius: calc(var(--fleet-radius) * 0.6); color: inherit; text-decoration: none;
  font-size: 0.75rem; text-align: center; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
.fleet-app span { max-inline-size: 100%; }
.fleet-app img { border-radius: 10px; inline-size: 36px; block-size: 36px; }
.fleet-app:hover, .fleet-app:focus-visible { background: color-mix(in srgb, var(--fleet-accent) 12%, transparent); }
.fleet-app[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--fleet-accent); }
.fleet-account { margin-block-end: 12px; padding-block-end: 12px; border-block-end: 1px solid var(--fleet-line); display: grid; }
.fleet-email { margin: 0 0 6px; color: var(--fleet-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.fleet-row {
  display: flex; align-items: center; min-block-size: 44px; padding: 0 8px; inline-size: 100%;
  border: 0; background: none; color: inherit; font: inherit; text-align: start; text-decoration: none;
  border-radius: 8px; cursor: pointer;
}
.fleet-row:hover, .fleet-row:focus-visible { background: color-mix(in srgb, var(--fleet-accent) 12%, transparent); }
.fleet-row[aria-disabled="true"] { cursor: progress; }
/* Sign out in flight; a still ring where motion is reduced, the label carries the state */
.fleet-spinner {
  flex: none; inline-size: 1em; block-size: 1em; margin-inline-end: 8px; box-sizing: border-box;
  border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 999px;
}
.fleet-alert { margin: 4px 8px 0; color: var(--fleet-ink); font-size: 0.8125rem; line-height: 1.4; }
@media (max-width: 639px) {
  .fleet-scrim { background: rgb(0 0 0 / 0.35); }
  .fleet-panel {
    inset: auto 0 0 0 !important; inline-size: auto;
    max-block-size: 85dvh !important; border-radius: var(--fleet-radius) var(--fleet-radius) 0 0;
    padding-block-end: calc(16px + env(safe-area-inset-bottom));
  }
}
/* Whole words at 320px: "CanvaShare" in a wide face needs the cell's full width */
@media (max-width: 359px) {
  .fleet-app { padding-inline: 0; font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .fleet-panel { animation: fleet-in 140ms ease-out; }
  .fleet-spinner { animation: fleet-spin 800ms linear infinite; }
  @keyframes fleet-spin { to { transform: rotate(360deg); } }
  @keyframes fleet-in { from { opacity: 0; transform: translateY(6px); } }
}
.fleet-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  padding: 32px 16px calc(24px + var(--fleet-footer-clear, 0px));
  color: var(--fleet-muted); font: 0.8125rem/1.4 var(--fleet-font);
}
/* A 44px tap band. The negative block margin hands back what it adds, (1lh - 44px) / 2 a side,
   so the footer keeps its height and the text its baseline. */
.fleet-footer a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px;
  margin-block: calc((1lh - 44px) / 2);
  color: inherit; text-underline-offset: 3px;
}