/* The app's top bar in the redesign (flag new_ui; js/views/topbar-ui.js).
   Same tokens as the pages: the page name in ink, the plan in plain words
   (no colored caps pill), the plan button as a quiet ghost button (the free
   plan's upgrade no longer competes with each page's own action), and the
   language as a ghost select. Phone: a menu button opens the sidebar as a
   drawer, and everything sits on one line. */
body.new-ui .topnav {
  height: 56px; padding: 0 36px; gap: 12px;
  background: color-mix(in srgb, var(--ui-bg) 85%, transparent);
  border-bottom: 1px solid var(--ui-line-2);
  font-family: var(--ui-font);
}
/* The page name only: the "General /" root says nothing the sidebar doesn't. */
body.new-ui .topnav .crumb { font-size: 0; }
body.new-ui .topnav .crumb > span { display: none; }
body.new-ui .topnav .crumb b { font-size: 14px; color: var(--ui-ink); font-weight: 600; letter-spacing: -.005em; }
body.new-ui .topnav .topnav-right { gap: 10px; }
body.new-ui .topnav .plan-chip, body.new-ui .topnav .plan-chip.plan-pro, body.new-ui .topnav .plan-chip.plan-free {
  background: none; padding: 0; border-radius: 0;
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ui-ink-2);
}
body.new-ui .topnav .lang-select {
  height: 32px; padding: 0 8px; border-radius: 9px;
  border: 1px solid var(--ui-line); background: var(--ui-card); color: var(--ui-ink);
  font: 400 13.5px var(--ui-font);
}
body.new-ui .topnav .lang-select:hover { border-color: var(--ui-ink-3); color: var(--ui-ink); }
body.new-ui .topnav .lang-select:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* The menu button and the drawer exist only on a phone. */
body.new-ui .tb-menu { display: none; }
body.new-ui .tb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.new-ui .tb-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8, 8, 8, .4); }
body.new-ui .tb-scrim[hidden] { display: none; }

@media (max-width: 760px) {
  /* One line: menu, page name, then the plan button and the language. The
     plan's name is in Settings › Plan; on a phone the bar keeps only what a
     thumb needs. */
  body.new-ui .topnav, body.new-ui .topnav .topnav-right {
    flex-wrap: nowrap; height: 56px; min-height: 0; padding-top: 0; padding-bottom: 0;
  }
  body.new-ui .topnav { padding: 0 12px 0 6px; gap: 6px; }
  body.new-ui .topnav .topnav-right { flex: none; gap: 8px; }
  body.new-ui .topnav .crumb { flex: 1 1 auto; min-width: 0; }
  body.new-ui .topnav .plan-chip, body.new-ui .topnav #userAvatar, body.new-ui .topnav #userEmail { display: none; }
  body.new-ui .topnav .lang-select { max-width: 92px; height: 40px; }
  body.new-ui .topnav #logoutBtn { flex: none; white-space: nowrap; }
  body.new-ui .topnav #upgradeBtn { height: 40px; }
  body.new-ui .tb-menu {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 10px; background: none; color: var(--ui-ink); box-shadow: none;
  }
  body.new-ui .tb-menu:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-ink); }
  body.new-ui .tb-menu:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
  body.new-ui .tb-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

  /* The drawer: the same sidebar, fixed over the page from the left. */
  body.new-ui .sidebar {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; height: auto; z-index: 50;
    width: min(300px, 86vw); max-width: none; overflow-y: auto;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: none;
  }
  body.new-ui.tb-open .sidebar {
    transform: none; visibility: visible; transition: transform .2s ease;
    box-shadow: 0 10px 40px rgba(8, 8, 8, .25);
  }
  body.new-ui.tb-open { overflow: hidden; }
  /* Collapsing to icons means nothing in a drawer. */
  body.new-ui .sidebar .sb2-hide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.new-ui .sidebar { transition: none !important; }
}

/* The client's name sits over the page name on a phone only; the drawer's
   language and upgrade too (desktop has them in the bar). */
body.new-ui .topnav .tb-client { display: none; }
body.new-ui .tb-extra { display: none; }
@media (max-width: 760px) {
  body.new-ui .topnav .crumb { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; overflow: hidden; }
  body.new-ui .topnav .tb-client:not(:empty) {
    display: block; font: normal 600 15px/1.2 var(--ui-font); color: var(--ui-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.new-ui .topnav .tb-client:not(:empty) + span + b,
  body.new-ui .topnav .tb-client:not(:empty) ~ b { font-size: 12px; font-weight: 400; color: var(--ui-ink-3); }
  body.new-ui .topnav .crumb b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Plan and language move into the drawer; the free plan keeps a small chip
     with the fact (what's left), not a sales button (Carla). */
  body.new-ui .topnav #upgradeBtn, body.new-ui .topnav #langSelect,
  body.new-ui .topnav .plan-chip.plan-pro { display: none !important; }
  body.new-ui.sb2 .topnav #logoutBtn { display: none; }
  body.new-ui .topnav .plan-chip.plan-free:not([hidden]) {
    display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--ui-line); background: var(--ui-card); color: var(--ui-ink-2);
    font-size: 13px; white-space: nowrap; cursor: pointer;
  }
  body.new-ui .topnav .plan-chip.plan-free:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
  body.new-ui .tb-extra { display: flex; gap: 8px; align-items: center; padding: 10px 16px 0; }
  body.new-ui .sb2-foot .tb-extra { padding: 10px 0 0; }
  body.new-ui .tb-extra .lang-select {
    flex: 1; min-width: 0; height: 40px; padding: 0 8px; border-radius: 9px;
    border: 1px solid var(--ui-line); background: var(--ui-card); color: var(--ui-ink); font: 400 14px var(--ui-font);
  }
  body.new-ui .tb-extra .ui-btn { height: 40px; flex: none; }
  body.new-ui .tb-extra .ui-btn[hidden] { display: none; }
}