/* ==========================================================================
   Accred suite navigation — app tabs and app launcher (brand kit, with accred-suitenav.js).
   Load after accred-premium.css. Vendored verbatim by tools/brand-sync.mjs --suitenav; never edit a copy.
   Rules: ACCRED_PRODUCT_DESIGN_SYSTEM.md §4.3 App tabs, §4.4 App launcher.
   ========================================================================== */

/* Each app's on-dark accent: glyphs sit on graphite (tiles) or on the suite bar (tabs). */
.asn-tab, .asn-tile { --asn-c: var(--suite-product-hub-on-dark); }
[data-app="consult"].asn-tab, [data-app="consult"].asn-tile { --asn-c: var(--suite-product-consult-on-dark); }
[data-app="migrate"].asn-tab, [data-app="migrate"].asn-tile { --asn-c: var(--suite-product-migrate-on-dark); }
[data-app="connect"].asn-tab, [data-app="connect"].asn-tile { --asn-c: var(--suite-product-connect-on-dark); }
[data-app="assess"].asn-tab, [data-app="assess"].asn-tile { --asn-c: var(--suite-product-assess-on-dark); }
[data-app="manage"].asn-tab, [data-app="manage"].asn-tile { --asn-c: var(--suite-product-manage-on-dark); }
[data-app="protect"].asn-tab, [data-app="protect"].asn-tile { --asn-c: var(--suite-product-protect-on-dark); }
[data-app="fleet"].asn-tab, [data-app="fleet"].asn-tile { --asn-c: var(--suite-product-fleet-on-dark); }
[data-app="devices"].asn-tab, [data-app="devices"].asn-tile { --asn-c: var(--suite-product-devices-on-dark); }
[data-app="aware"].asn-tab, [data-app="aware"].asn-tile { --asn-c: var(--suite-product-aware-on-dark, #6cb6ff); }

/* ---------- App tabs: quiet pills on the suite bar; the current app is a lit pill ---------- */

.acc-topbar .acc-apptabs.asn-tabs { align-items: center; align-self: center; gap: 0.125rem; height: 2.5rem; padding: 0 0.125rem; }
.acc-apptabs .acc-apptab.asn-tab {
  height: 2rem; gap: 0.5rem; padding: 0 0.75rem 0 0.625rem; border-radius: var(--radius-md);
  color: hsl(var(--suitebar-muted)); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.003em;
  cursor: pointer; outline-offset: 0;
}
.acc-apptabs .acc-apptab.asn-tab::after { display: none; }
.asn-tab__glyph { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--asn-c); opacity: 0.78; transition: opacity var(--dur-fast) var(--ease-out); }
.acc-apptabs .acc-apptab.asn-tab:hover { background: hsl(var(--suitebar-hover)); color: hsl(var(--suitebar-foreground)); }
.acc-apptabs .acc-apptab.asn-tab:hover .asn-tab__glyph { opacity: 1; }
.acc-apptabs .acc-apptab.asn-tab[aria-current="page"] {
  background: hsl(var(--suitebar-elevated)); color: hsl(var(--suitebar-foreground));
  box-shadow: 0 0 0 1px hsl(var(--suitebar-border));
}
.acc-apptabs .acc-apptab.asn-tab[aria-current="page"] .asn-tab__glyph { opacity: 1; }
.acc-apptabs .acc-apptab.asn-tab[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.acc-apptabs .acc-apptab.asn-tab[aria-disabled="true"]:hover { background: transparent; color: hsl(var(--suitebar-muted)); }
.acc-apptabs .acc-apptab.asn-tab:focus-visible { outline: 2px solid hsl(var(--suitebar-foreground)); outline-offset: -2px; }
/* The launcher button lines up with the tabs, as their last pill. */
.acc-topbar .acc-apptabs.asn-tabs + [data-shell="app-launcher"] { margin-left: 0.125rem; border-radius: var(--radius-md); }

/* Below 1024 px the foundation moves the tabs into the sidebar sheet's 3 × 2 grid. */
.acc-sidebar__apps .acc-apptab.asn-tab { height: auto; padding: 0.5rem 0.125rem; color: hsl(var(--sidebar-foreground, var(--foreground))); }
.acc-sidebar__apps .asn-tab__glyph { width: 1.25rem; height: 1.25rem; opacity: 1; color: var(--asn-c); }
.acc-sidebar__apps .asn-tab { --asn-c: var(--suite-product-hub); }
.acc-sidebar__apps [data-app="consult"].asn-tab { --asn-c: var(--suite-product-consult); }
.acc-sidebar__apps [data-app="migrate"].asn-tab { --asn-c: var(--suite-product-migrate); }
.acc-sidebar__apps [data-app="connect"].asn-tab { --asn-c: var(--suite-product-connect); }
.acc-sidebar__apps [data-app="assess"].asn-tab { --asn-c: var(--suite-product-assess); }
.acc-sidebar__apps [data-app="manage"].asn-tab { --asn-c: var(--suite-product-manage); }
.acc-sidebar__apps [data-app="protect"].asn-tab { --asn-c: var(--suite-product-protect); }
.acc-sidebar__apps [data-app="fleet"].asn-tab { --asn-c: var(--suite-product-fleet); }
.acc-sidebar__apps [data-app="devices"].asn-tab { --asn-c: var(--suite-product-devices); }
.acc-sidebar__apps [data-app="aware"].asn-tab { --asn-c: var(--suite-product-aware, #1f6fd1); }

/* ---------- App launcher panel ---------- */

.asn-launcher {
  position: fixed; z-index: var(--z-popover, 50);
  display: flex; flex-direction: column;
  width: min(37.5rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 5rem);
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl, 12px);
  background: hsl(var(--popover)); color: hsl(var(--foreground));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px -6px rgb(0 0 0 / 0.18), 0 32px 64px -24px rgb(0 0 0 / 0.22);
  font-size: 0.875rem; line-height: 1.4; letter-spacing: -0.003em;
  overflow: hidden; outline: none;
  opacity: 0; transform: translateY(-4px) scale(0.985); transform-origin: top left;
  transition: opacity 140ms var(--ease-out), transform 180ms var(--ease-out);
}
.asn-launcher[data-open] { opacity: 1; transform: none; }
:root.dark .asn-launcher, [data-theme="dark"] .asn-launcher {
  border-color: hsl(0 0% 100% / 0.1);
  box-shadow: 0 1px 0 hsl(0 0% 100% / 0.05) inset, 0 16px 40px -8px rgb(0 0 0 / 0.7), 0 32px 80px -24px rgb(0 0 0 / 0.8);
}
@media (prefers-reduced-motion: reduce) { .asn-launcher { transition: none; transform: none; } }

/* Search */
.asn-launcher__search {
  position: relative; display: flex; align-items: center; gap: 0.625rem; flex: 0 0 auto;
  height: 3rem; padding: 0 0.875rem 0 1rem; border-bottom: 1px solid hsl(var(--border));
}
.asn-launcher__search-icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.asn-launcher__input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent;
  color: hsl(var(--foreground)); font: inherit; font-size: 0.9375rem; letter-spacing: -0.006em; outline: none;
  caret-color: hsl(var(--primary));
}
.asn-launcher__input::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
.asn-launcher__esc {
  flex: 0 0 auto; padding: 0.125rem 0.375rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-xs, 4px);
  color: hsl(var(--muted-foreground)); font: 500 0.6875rem/1.3 var(--font-sans); letter-spacing: 0.01em;
}

/* Body */
.asn-launcher__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 0.5rem 0.75rem; scrollbar-width: thin; scrollbar-color: hsl(var(--border-strong)) transparent; }
.asn-launcher ul { margin: 0; padding: 0; list-style: none; }
.asn-launcher__home { padding-bottom: 0.5rem; margin-bottom: 0.25rem; border-bottom: 1px solid hsl(var(--border)); }
.asn-launcher--filtering .asn-launcher__home { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.asn-launcher__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.25rem; align-items: start; }
.asn-launcher--filtering .asn-launcher__cols, .asn-launcher__cols--one { grid-template-columns: minmax(0, 1fr); }
.asn-launcher__home--only { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.acc-apptabs[aria-busy] .asn-tab { cursor: progress; }
.asn-launcher__col { display: grid; gap: 0.25rem; min-width: 0; }
.asn-group__label {
  margin: 0; padding: 0.75rem 0.625rem 0.375rem;
  color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em;
}
.asn-launcher--filtering .asn-group__label { padding-top: 0.5rem; }

/* Rows */
.asn-app {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0.625rem;
  border: 0; border-radius: var(--radius-md); background: transparent; color: inherit;
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.asn-app:hover, .asn-app[data-first] { background: hsl(var(--subtle, var(--muted))); }
:root.dark .asn-app:hover, :root.dark .asn-app[data-first], [data-theme="dark"] .asn-app:hover { background: hsl(0 0% 100% / 0.06); }
.asn-app:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; background: hsl(var(--subtle, var(--muted))); }
.asn-app__text { display: grid; gap: 0.0625rem; flex: 1 1 auto; min-width: 0; }
.asn-app__name { font-weight: 550; line-height: 1.3; color: hsl(var(--foreground)); }
.asn-app__desc { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; line-height: 1.35; }
.asn-app__current { flex: 0 0 auto; width: 1rem; height: 1rem; margin-left: auto; color: hsl(var(--primary)); }
.asn-app[aria-current="page"] .asn-app__name::after { content: none; }
.asn-app[aria-disabled="true"] { cursor: default; }
.asn-app[aria-disabled="true"] .asn-tile { filter: saturate(0.2); opacity: 0.55; }
.asn-app[aria-disabled="true"] .asn-app__name { color: hsl(var(--muted-foreground)); }

/* Graphite tile: the app mark's squircle in miniature, the same in light and dark. */
.asn-tile {
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem; border-radius: 27%;
  background: linear-gradient(#2a2a30, #141417);
  color: var(--asn-c);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.14), inset 0 0 0 1px hsl(0 0% 100% / 0.06), 0 1px 2px rgb(0 0 0 / 0.18);
}
.asn-tile > svg { width: 1.25rem; height: 1.25rem; }

.asn-launcher__empty { margin: 0; padding: 1.5rem 0.75rem 1rem; color: hsl(var(--muted-foreground)); text-align: center; }
.asn-launcher [hidden] { display: none !important; }

/* Phones: one column, full width less gutters, scrolls inside itself. */
@media (max-width: 639px) {
  .asn-launcher { width: calc(100vw - 1rem); }
  .asn-launcher__cols { grid-template-columns: minmax(0, 1fr); }
  .asn-launcher__esc { display: none; }
  .asn-launcher__input { font-size: 1rem; } /* no iOS zoom */
}
@media (pointer: coarse) { .asn-app { min-height: 3.5rem; } }
@media (forced-colors: active) {
  .asn-launcher { border: 1px solid CanvasText; }
  .asn-app:focus-visible, .asn-app[data-first] { outline: 2px solid Highlight; }
  .acc-apptabs .acc-apptab.asn-tab[aria-current="page"] { outline: 1px solid CanvasText; }
}