/* UIQ-T2: one deliberate topbar composition — brand | destinations | actions. */
.topbar {
  container: topbar / inline-size;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 821px) {
  .topbar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: clamp(0.65rem, 1.4vw, 1.35rem);
    width: 100%;
    box-sizing: border-box;
  }

  .topbar > .app-brand {
    min-width: max-content;
    max-width: none;
    overflow: visible;
  }

  .topbar > .app-top-nav {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0.15rem;
    overflow-x: auto;
    border: 1px solid var(--ui-line-soft);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--ui-panel) 82%, transparent);
    scrollbar-width: none;
  }

  .topbar > .app-top-nav::-webkit-scrollbar {
    display: none;
  }

  .topbar .app-top-nav-link {
    min-width: max-content;
    height: 2rem;
    min-height: 2rem;
    padding: 0 0.66rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--ui-text-soft);
  }

  .topbar .app-top-nav-link[aria-current="page"] {
    background: color-mix(in srgb, var(--ui-accent) 9%, transparent);
    color: var(--ui-accent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ui-accent) 72%, transparent);
  }

  .topbar > .topbar-actions {
    display: flex;
    width: auto;
    min-width: max-content;
    flex: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: clamp(0.32rem, 0.65vw, 0.58rem);
    overflow: visible;
  }

  .topbar #launch-open { order: 0; }
  .topbar #agents-dock-open { order: 1; }
  .topbar #standalone-session-actions { order: 2; }
  .topbar #board-health { order: 3; margin: 0; }
  .topbar #theme-toggle { display: grid; order: 4; }
  .topbar #settings-open { order: 5; }
  .topbar .topbar-avatar {
    display: grid;
    order: 6;
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
  }

  .topbar #shell-mobile-apps,
  .topbar .legend-wrap,
  .topbar .shell-overflow-wrap {
    display: none;
  }
}

@container topbar (max-width: 1180px) {
  .topbar .app-brand-name { display: none; }
  .topbar #launch-open .launch-label-wide { display: none; }
  .topbar #launch-open .launch-label-narrow { display: inline; }
}

@container topbar (max-width: 780px) {
  .topbar .app-top-nav-link span { display: none; }
  .topbar .app-top-nav-link {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    justify-content: center;
  }
}

@container topbar (max-width: 720px) {
  .topbar #launch-open .launch-label-wide,
  .topbar #launch-open .launch-label-narrow,
  .topbar #agents-dock-open .agents-dock-open-label {
    display: none;
  }

  .topbar #launch-open,
  .topbar #agents-dock-open {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 820px) {
  .topbar {
    display: flex;
    gap: 0.25rem;
  }

  .topbar > .app-brand {
    flex: 1 1 auto;
    min-width: 1.65rem;
  }

  .topbar > .topbar-actions {
    display: flex;
    min-width: 0;
    flex: none;
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .topbar .app-top-nav {
    display: none;
  }

  .topbar #launch-open { order: 1; }
  .topbar #board-health { order: 3; margin: 0; }
  .topbar #theme-toggle { display: grid; order: 4; }
  .topbar #settings-open { order: 5; }
  /* T326 phone contract: the topbar carries launch + theme + settings only;
     the account control (avatar) is desktop-wide, hidden on phones. */
  .topbar .topbar-avatar { display: none; }
  .topbar .shell-overflow-wrap { order: 7; }

  .topbar #settings-open,
  .topbar .shell-overflow-toggle {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.75rem;
    padding: 0;
    justify-content: center;
  }

  .topbar #launch-open,
  .topbar #theme-toggle {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    justify-content: center;
  }

  .topbar .topbar-avatar {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 2.125rem;
  }
}

@container topbar (max-width: 360px) {
  .topbar .topbar-avatar { display: none; }
  .topbar > .topbar-actions { gap: 0.2rem; }
}