/* The one ClarityIQ top bar, shared by Home, Vendor Agent, MIA, Support and Account.
   Every top bar rule lives here and nowhere else, so the bar is identical on every page.
   Self-contained: sets its own font, sizes and colours rather than inheriting the page's. */
/* Always reserve the scrollbar's space, so a page that scrolls and one that doesn't are the same width
   and nothing shifts sideways when moving between them. */
html{scrollbar-gutter:stable}
header.top{background:#003A5D;color:#FFFFFF;font:400 15px/1.5 "Roboto","Segoe UI",system-ui,-apple-system,sans-serif;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));position:relative;z-index:20}
header.top .wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0}
header.top .brand{display:flex;flex-direction:column;align-items:stretch;color:inherit;text-decoration:none}
header.top .brand img{display:block;height:32px;width:auto}
/* Tagline under the wordmark (Support #9). Letter spacing measured so it runs exactly the wordmark's width;
   the negative right margin drops the spacing after the last letter. */
header.top .brand .tag{display:block;margin:3px -.16em 0 0;font-size:8px;font-weight:500;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
header.top .prod{display:flex;gap:4px}
header.top .prod a{color:#FFFFFF;text-decoration:none;font-size:14px;padding:6px 10px;border-radius:6px}
header.top .prod a[aria-current="page"]{background:rgba(255,255,255,.16);font-weight:700}
/* Each link reserves its bold width, so the links don't shift when the current page changes. */
header.top .prod a{display:inline-flex;flex-direction:column;align-items:center}
header.top .prod a::after{content:attr(data-t);font-weight:700;height:0;overflow:hidden;visibility:hidden}
header.top .sp{flex:1}
header.top .ghost{background:transparent;border:1px solid rgba(255,255,255,.6);color:#FFFFFF;border-radius:6px;padding:6px 12px;font:inherit;font-size:13.6px;text-decoration:none}
header.top .ver{font-size:13px;font-weight:500;color:#FFFFFF;white-space:nowrap}
/* Account menu: initials circle; name, Account and Sign out drop down from it. */
header.top .me{position:relative}
header.top .me summary{list-style:none;cursor:pointer;display:block}
header.top .me summary::-webkit-details-marker{display:none}
header.top .av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#009946;color:#FFFFFF;font-size:13.6px;font-weight:700;letter-spacing:.02em}
header.top .me summary:focus-visible .av,header.top .me[open] .av{outline:2px solid #FFFFFF;outline-offset:2px}
header.top .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
header.top .menu{--tb-card:#FFFFFF;--tb-ink:#000000;--tb-rule:#D5D9DC;position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:200px;display:flex;flex-direction:column;background:var(--tb-card);color:var(--tb-ink);border:1px solid var(--tb-rule);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) header.top .menu{--tb-card:#16222E;--tb-ink:#FFFFFF;--tb-rule:#2B3A48}}
:root[data-theme="dark"] header.top .menu{--tb-card:#16222E;--tb-ink:#FFFFFF;--tb-rule:#2B3A48}
header.top .menu .me-name{padding:8px 10px;font-size:13.6px;font-weight:700;border-bottom:1px solid var(--tb-rule);margin-bottom:4px}
header.top .menu a,header.top .menu button{display:block;text-align:left;padding:8px 10px;border-radius:6px;font:inherit;font-size:14.4px;color:inherit;background:none;border:0;text-decoration:none;cursor:pointer}
header.top .menu a:hover,header.top .menu button:hover{background:var(--tb-rule)}
body.signin header.top .me{display:none}
[hidden]{display:none!important}
/* Phones: logo, account menu and version stay on one row; the page links get the row below. */
@media (max-width:560px){header.top .brand img{height:27px}header.top .brand .tag{font-size:7px;letter-spacing:.13em;margin-right:-.13em}header.top .prod{order:9;flex-basis:100%}header.top .prod a{padding:4px 6px}}