/* The frame every signed-in page in the suite shares, whatever stylesheet the
   tool itself uses:
     - the bar across the top: the logo, the person's tools with the current
       one marked, and their own menu. Built on the server (suiteBar in
       @tahuya/brand), which also links this file;
     - .suite-subnav: a tool's own sections, in a strip right under the bar;
     - --page-w and --page-pad: how wide a page's content runs, so the logo,
       the sections and the content share one left edge in every tool.

   It stands on its own: every rule starts at .suite-bar or .suite-subnav.
   Colors and fonts come from /brand.css. */
/* How tall the bar is while it stays at the top, for anything else on a page
   that sticks below it. */
:root { --suite-bar-h: 56px; --page-w: 1280px; --page-pad: 20px; }
.suite-bar, .suite-bar * { box-sizing: border-box; }
.suite-bar {
  position: sticky; top: 0; z-index: 1100; margin: 0; /* above maps and their controls */
  background: var(--bar); border-bottom: 1px solid var(--line);
  font-family: var(--body); font-size: 14px; line-height: 1.5; color: #fff;
}
.suite-bar .bar-inner {
  max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-pad); height: 56px;
  display: flex; align-items: center; gap: 0;
}
.suite-bar .brand-mark { display: flex; align-items: center; flex: none; text-decoration: none; }
.suite-bar .brand-mark img { display: block; height: 30px; width: auto; }
.suite-bar .brand-text {
  font-family: var(--display); font-weight: var(--display-weight); text-transform: var(--display-transform);
  font-size: 1.2rem; color: #fff;
}

/* ---------- the tools ---------- */
.suite-bar .bar-nav {
  display: flex; align-self: stretch; margin: 0 0 0 18px; padding: 0; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.suite-bar .bar-nav::-webkit-scrollbar { display: none; }
.suite-bar .bar-nav a {
  display: flex; align-items: center; padding: 0 16px;
  font-family: var(--display); font-weight: var(--display-weight); text-transform: var(--display-transform);
  font-size: 15px; letter-spacing: .05em; white-space: nowrap; text-decoration: none;
  color: rgba(255,255,255,.7); background: none; border: 0; border-block: 3px solid transparent;
}
.suite-bar .bar-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.suite-bar .bar-nav a[aria-current=page] { color: #fff; border-bottom-color: var(--accent); }
.suite-bar a:focus-visible, .suite-bar summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* ---------- the person's menu ---------- */
.suite-bar .bar-user { margin: 0 0 0 auto; padding: 0; border: 0; background: none; position: relative; flex: none; }
.suite-bar .bar-user > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  margin: 0 0 0 12px; padding: 5px 10px 5px 5px; border-radius: 999px;
  color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap;
}
.suite-bar .bar-user > summary::-webkit-details-marker { display: none; }
.suite-bar .bar-user > summary::before, .suite-bar .bar-user > summary::after { content: none; }
.suite-bar .bar-user > summary:hover, .suite-bar .bar-user[open] > summary { background: rgba(255,255,255,.08); }
.suite-bar .bar-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.suite-bar .bar-caret { border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; opacity: .7; }
.suite-bar .bar-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; display: grid; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.suite-bar .bar-menu-who {
  padding: 8px 12px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 400; color: var(--muted);
}
.suite-bar .bar-menu a {
  padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
}
.suite-bar .bar-menu a:hover { background: var(--surface-2); }
.suite-bar .bar-menu a:focus-visible { outline-offset: 0; }

/* ---------- a tool's own sections ---------- */
.suite-subnav, .suite-subnav * { box-sizing: border-box; }
.suite-subnav {
  display: flex; align-items: center; gap: 2px; min-height: 46px; margin: 0;
  /* The first section's text starts where the logo does. */
  padding: 0 max(calc(var(--page-pad) - 12px), calc((100% - var(--page-w)) / 2 + var(--page-pad) - 12px));
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.suite-subnav::-webkit-scrollbar { display: none; }
.suite-subnav[hidden], .suite-subnav [hidden] { display: none; }
.suite-subnav a:not(.action) {
  padding: 12px 12px 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: none; box-shadow: none;
  color: var(--text-2); font: 600 15px/1.3 var(--body); text-decoration: none; white-space: nowrap;
}
.suite-subnav a:not(.action):hover { color: var(--text); }
.suite-subnav a[aria-current=page], .suite-subnav a.active:not(.action) { color: var(--text); border-bottom-color: var(--accent); }
.suite-subnav a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.suite-subnav .spacer { flex: 1; }
/* A link that leaves the tool's sections (say, to its public site). */
.suite-subnav a.out:not(.action) { color: var(--accent-strong); }
/* The one thing people come to this tool to do, as a button at the end. */
.suite-subnav a.action {
  margin: 6px 12px 6px 8px; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-accent);
  font: 700 14px/1.3 var(--body); text-decoration: none;
}
.suite-subnav a.action:hover { background: var(--accent-hi); }
@media print { .suite-subnav { display: none; } }

/* Not much room: the avatar alone opens the menu. */
@media (max-width: 1180px) {
  .suite-bar .bar-user-name { display: none; }
  .suite-bar .bar-user > summary { padding-right: 6px; }
}
/* A phone: the tools drop to their own row and scroll sideways, and the bar
   scrolls away with the page instead of taking a fifth of the screen. */
@media (max-width: 760px) {
  :root { --suite-bar-h: 0px; }
  .suite-bar { position: static; }
  .suite-bar .bar-inner { height: auto; flex-wrap: wrap; padding: 0 12px; }
  .suite-bar .brand-mark { height: 52px; }
  .suite-bar .bar-nav { order: 3; flex: 0 0 calc(100% + 24px); margin: 0 -12px; padding: 0 2px; height: 44px; border-top: 1px solid var(--line); }
}
@media print { .suite-bar { display: none; } }