/* Shared mode bar: identical geometry in Operations and Traffic workspace. */
/* The "^" of "button ^ solutions", the same orange wherever the logo is:
   here, the app shell's panel and its minimised mark. */
:root { --brand-caret: #ff7849; }
.button-topbar {
  box-sizing: border-box; grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  min-height: 56px; padding: 10px 20px;
  position: relative;
  background: #fff; color: #0b1b3b; border-bottom: 1px solid #eae7dd;
  font: 14px/1.5 Arial, sans-serif;
}
.button-topbar .topbar-brand { flex-shrink: 0; font: 26px/1.2 Georgia, serif; letter-spacing: -1px; }
.button-topbar .topbar-brand span { color: var(--brand-caret); }
.button-topbar .topbar-modes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.button-topbar .topbar-modes a, .button-topbar .topbar-modes > span {
  display: block; padding: 6px 10px; border-radius: 5px;
  color: #1e5eac; text-decoration: none; font-size: 13px; font-weight: 500;
}
.button-topbar .topbar-modes a:hover { background: #f7f5ef; }
.button-topbar .topbar-modes [aria-current="page"] { background: none; color: #00438b; box-shadow: inset 0 -2px #3b79ca; }
.button-topbar .topbar-context { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: #475569; overflow-wrap: anywhere; }
.button-topbar :focus-visible { outline: 2px solid #1e5eac; outline-offset: 3px; }
@media (max-width: 760px) { .button-topbar { padding: 8px 10px; } .button-topbar .topbar-context { flex-basis: 100%; margin-left: 0; } }
/* The bar's lower edge: the site's ad clicks of the last 7 days by their settled label's group, in
   palette.css's colours, trusted first (measured.trust_mix); hover for the shares. Without
   a snapshot there is no edge. */
.button-topbar { z-index: 20; }
/* A 10px hover zone starting at the 3px bar; on hover or focus the bar grows downward over the
   page, never into the bar above, and a legend shows the shares. */
.button-topbar .topbar-edge { position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 10px; cursor: default; outline: none; }
.topbar-edge .edge-bar { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 3px; transition: height 0.15s ease-out; }
.topbar-edge:hover .edge-bar, .topbar-edge:focus-visible .edge-bar { height: 14px; }
.topbar-edge:focus-visible { box-shadow: 0 2px 0 #00438b; }
.topbar-edge .edge-legend {
  position: absolute; top: 20px; right: 20px; display: none; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  max-width: min(720px, calc(100vw - 40px)); padding: 10px 14px; border: 1px solid #e3dfd5; border-radius: 8px;
  background: #fff; color: #0b1b3b; font: 13px/1.5 Arial, sans-serif; box-shadow: 0 6px 20px rgba(11, 27, 59, 0.12);
}
.topbar-edge:hover .edge-legend, .topbar-edge:focus-visible .edge-legend { display: flex; }
.edge-legend-title { flex-basis: 100%; color: #5f5c57; font-size: 12px; }
.edge-key { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.edge-key::before { content: ""; align-self: center; width: 10px; height: 10px; border-radius: 2px; background: var(--k); }
.edge-n { color: #5f5c57; font-size: 12px; }
.key-trusted { --k: #1e5eac; }
.key-unlabeled { --k: #9cc3f2; }
.key-partial { --k: #02787d; }
.key-unclassified { --k: #918e88; }
.key-unknown { --k: #b9b5af; }
.key-untrusted { --k: #df8b1e; }
@media (prefers-reduced-motion: reduce) { .topbar-edge .edge-bar { transition: none; } }
.topbar-edge .edge-trusted { fill: #1e5eac; }
.topbar-edge .edge-unlabeled { fill: #9cc3f2; }
.topbar-edge .edge-partial { fill: #02787d; }
.topbar-edge .edge-unclassified { fill: #918e88; }
.topbar-edge .edge-unknown { fill: #b9b5af; }
.topbar-edge .edge-untrusted { fill: #df8b1e; }