/* ctx suite · SHARED SUITE HEADER (the unifying top bar every product wears)
 * Source of truth: design/shell/suite-shell.css, served at
 * <brand>/shell/suite-shell.css (ctx. / context. / vcontext.).
 * Pairs with suite-shell.js (injects the markup) and tokens.css (the palette).
 * This is the one thing shell.css deliberately left out ("no suite bar"); it
 * makes the whole suite feel like a single product.
 */
#ctx-suitebar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 52px; box-sizing: border-box;
  background: var(--surface, #fff); color: var(--ink, #030E16);
  display: flex; align-items: center; gap: 4px; padding: 0 12px;
  border-bottom: 1px solid var(--outline-2, #DCE0E4);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
/* every host page gets pushed below the fixed bar */
body.ctx-shelled { padding-top: 52px; }

#ctx-suitebar .ctx-mark { display: flex; align-items: baseline; gap: 2px; padding: 0 10px 0 6px; cursor: pointer; text-decoration: none; }
#ctx-suitebar .ctx-mark .word { font-size: 15.5px; font-weight: 600; color: var(--ink, #030E16); letter-spacing: -.015em; }
#ctx-suitebar .bar-sep { width: 1px; height: 24px; background: var(--outline-2, #DCE0E4); margin: 0 10px; flex: none; }

#ctx-suitebar .products { display: flex; align-items: center; gap: 4px; overflow: visible; }
#ctx-suitebar .prod {
  display: flex; align-items: center; gap: 8px; height: 36px; min-width: 40px; justify-content: center;
  padding: 0 10px; border-radius: 8px; color: var(--ink-2, #536573); border: 1.5px solid transparent;
  background: none; cursor: pointer; text-decoration: none;
}
#ctx-suitebar .prod svg { width: 17px; height: 17px; }
#ctx-suitebar .prod:hover { background: var(--surface-2, #EFF3F7); color: var(--ink, #030E16); }
#ctx-suitebar .prod.active { border-color: var(--ink, #030E16); color: var(--ink, #030E16); background: var(--surface, #fff); height: 40px; padding: 0 12px 0 10px; }
#ctx-suitebar .prod .pcol { display: none; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
#ctx-suitebar .prod.active .pcol { display: flex; }
#ctx-suitebar .prod .plabel { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
#ctx-suitebar .prod .psub { font-size: 9.5px; font-weight: 500; color: var(--ink-3, #838E98); letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 1240px) { #ctx-suitebar .prod .psub { display: none; } #ctx-suitebar .prod.active { height: 36px; } }
.ctx-products-toggle { display: none; }
@media (max-width: 1100px) {
  #ctx-suitebar { padding: 0 6px; }
  #ctx-suitebar .ctx-mark { padding-left: 2px; padding-right: 4px; }
  #ctx-suitebar .bar-sep { margin: 0 3px; }
  #ctx-suitebar .ctx-products-toggle { display: block; border: 1px solid var(--outline-2); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
  #ctx-suitebar .products { display: none; position: absolute; top: 52px; left: 8px; right: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--outline-2); border-radius: 8px; flex-wrap: wrap; gap: 8px; }
  #ctx-suitebar.products-open .products { display: flex; }
  #ctx-suitebar .prod { min-width: 40px; padding: 0 8px; }
  #ctx-suitebar .prod .pcol { display: flex; }
  #ctx-suitebar .right { gap: 0; }
  #ctx-suitebar .right { position: absolute; right: 6px; top: 9px; margin-left: 0; }
  #ctx-suitebar .right .barsearch { display: none; }
  #ctx-suitebar .right [data-tip]::after { right: 0; }
}

#ctx-suitebar .right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
#ctx-suitebar .barsearch {
  display: flex; align-items: center; gap: 8px; height: 34px; width: 230px; padding: 0 11px;
  border-radius: 8px; background: var(--surface-2, #EFF3F7); border: 1px solid transparent; margin-right: 6px;
}
#ctx-suitebar .barsearch svg { width: 14px; height: 14px; color: var(--ink-3, #838E98); flex: none; }
#ctx-suitebar .barsearch input { flex: 1; min-width: 0; background: none; border: none; outline: none; font: inherit; font-size: 12.5px; color: var(--ink, #030E16); }
#ctx-suitebar .barsearch input::placeholder { color: var(--ink-3, #838E98); }
#ctx-suitebar .barsearch .kbd { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 10px; color: var(--ink-3, #838E98); border: 1px solid var(--outline-2, #DCE0E4); background: var(--surface, #fff); border-radius: 4px; padding: 2px 5px; flex: none; }
#ctx-suitebar .barsearch:focus-within { background: var(--surface, #fff); border-color: var(--blue, #007FAF); box-shadow: 0 0 0 3px var(--blue-tint, #E1F5FC); }

#ctx-suitebar .baricon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2, #536573); background: none; border: 0; cursor: pointer; text-decoration: none; position: relative; }
#ctx-suitebar .baricon:hover { background: var(--surface-2, #EFF3F7); color: var(--ink, #030E16); }
#ctx-suitebar .baricon svg { width: 16px; height: 16px; }
#ctx-suitebar .avatar { width: 27px; height: 27px; border-radius: 50%; background: var(--blue, #007FAF); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; margin: 0 4px 0 8px; border: 0; cursor: pointer; text-decoration: none; }

/* identity menu (upper-right) — the only place Sign out lives */
#ctx-suitebar .ctx-idmenu { position: relative; }
#ctx-suitebar .ctx-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; z-index: 950;
  background: var(--surface, #fff); border: 1px solid var(--outline-2, #DCE0E4);
  border-radius: 10px; box-shadow: 0 10px 34px rgba(3, 14, 22, .14); padding: 6px; overflow: hidden;
}
#ctx-suitebar .ctx-menu[hidden] { display: none; }
#ctx-suitebar .ctx-menu-id { padding: 9px 11px 10px; border-bottom: 1px solid var(--surface-2, #EFF3F7); margin-bottom: 4px; }
#ctx-suitebar .ctx-menu-name { font-size: 13px; font-weight: 600; color: var(--ink, #030E16); }
#ctx-suitebar .ctx-menu-email { font-size: 11.5px; color: var(--ink-3, #838E98); margin-top: 1px; word-break: break-all; }
#ctx-suitebar .ctx-menu-item {
  display: block; padding: 8px 11px; border-radius: 6px; font-size: 12.5px; color: var(--ink, #030E16);
  text-decoration: none; cursor: pointer;
}
#ctx-suitebar .ctx-menu-item:hover { background: var(--surface-2, #EFF3F7); }

/* lightweight tooltip (bar controls) */
#ctx-suitebar [data-tip] { position: relative; }
#ctx-suitebar [data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--dark, #030E16); color: #fff; font-size: 11px; white-space: nowrap; padding: 5px 8px;
  border-radius: 6px; pointer-events: none; z-index: 950;
  bottom: auto; opacity: 0; visibility: hidden; transition: none;
}
#ctx-suitebar [data-tip]::before {
  content: ""; position: absolute; z-index: 951; pointer-events: none;
  opacity: 0; visibility: hidden; transition: none;
  width: 0; height: 0; border-left: 6px solid transparent;
  border-right: 6px solid transparent; border-bottom: 6px solid var(--dark, #030E16);
  top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
}
#ctx-suitebar [data-tip]:hover::after,
#ctx-suitebar [data-tip]:focus-visible::after,
#ctx-suitebar [data-tip]:hover::before,
#ctx-suitebar [data-tip]:focus-visible::before { opacity: 1; visibility: visible; }
/* Right-edge controls must keep their popover inside the viewport. */
#ctx-suitebar .right [data-tip]::after {
  left: auto; right: 0; transform: none;
}
#ctx-suitebar .right [data-tip]::before { left: auto; right: 11px; transform: none; }
/* Product/header buttons use a downward menu-style popover, never an overlay. */
#ctx-suitebar .products [data-tip]::after {
  top: calc(100% + 8px); left: calc(50% + var(--ctx-tip-shift, 0px)); right: auto; transform: translateX(-50%);
  z-index: 951;
}