/* Global ecosystem chrome (src/views/chrome.js): the shared top bar and live-latency signal bars */


.cw-bar {
  display: flex;
  align-items: center;
  gap: var(--c-s-8);
  height: 56px;
  flex-shrink: 0;
  position: relative;
  z-index: 50; /* lift the bar + its latency popover above the main content cards; below modals (80) + body-menus (90) */
  padding: 0 var(--c-s-10);
  border-bottom: 1px solid var(--c-line);
  background: rgb(from var(--c-bg) r g b / .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  overflow-x: auto; /* mobile: the dense bar scrolls sideways inside itself; scrollbar hidden globally */
}
.cw-bar-center { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.cw-bar-right { display: flex; align-items: center; gap: var(--c-s-4); flex-shrink: 0; }
.cw-brand-link { display: flex; align-items: center; gap: var(--c-s-4); text-decoration: none; flex-shrink: 0; }
.cw-brand-link:focus-visible { outline: none; box-shadow: var(--c-focus); }

.cw-bar .c-btn--ghost, .cw-foot .c-btn--ghost { height: 30px; padding: 0 var(--c-s-5); }

.cw-bar-docs { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--c-line); border-radius: var(--c-r-ctl); background: var(--c-surface-2); color: var(--c-faint); transition: color var(--c-dur-1) var(--c-ease), border-color var(--c-dur-1) var(--c-ease); }
.cw-bar-docs:hover { color: var(--c-brand-tint); border-color: var(--c-line-2); }
.cw-bar-docs:focus-visible { outline: none; box-shadow: var(--c-focus); }

.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--c-s-3);
  height: 26px;
  padding: 0 var(--c-s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-chip);
}
.cw-chip-num { font-family: var(--c-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-text); }

.cw-sig {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--c-s-6);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  border-radius: var(--c-r-pill);
  gap: var(--c-s-4);
  cursor: pointer;
}
.cw-sig:hover { border-color: var(--c-line-2); }
.cw-sig:focus-visible { outline: none; box-shadow: var(--c-focus); }
.cw-sig-agg { font-family: var(--c-font-mono); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--c-text); }

.cw-sig-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 13px; }
.cw-sig-bar { width: 2px; border-radius: 0; background: var(--c-line-2); opacity: .5; transition: background var(--c-dur-1) var(--c-ease-mech), opacity var(--c-dur-1) var(--c-ease-mech); }
.cw-sig-bar:nth-child(1) { height: 4px; }
.cw-sig-bar:nth-child(2) { height: 7px; }
.cw-sig-bar:nth-child(3) { height: 10px; }
.cw-sig-bar:nth-child(4) { height: 13px; }
.cw-sig-bar.is-on { opacity: 1; }
/* lit colour is driven by the container level: 4/3 good, 2 warn, 1 danger */
.cw-sig-bars[data-level="4"] .cw-sig-bar.is-on,
.cw-sig-bars[data-level="3"] .cw-sig-bar.is-on { background: var(--c-ok); }
.cw-sig-bars[data-level="2"] .cw-sig-bar.is-on { background: var(--c-warn); }
.cw-sig-bars[data-level="1"] .cw-sig-bar.is-on { background: var(--c-danger); }

.cw-sig-pop {
  position: fixed;
  z-index: 70;
  min-width: 200px;
  padding: var(--c-s-5) var(--c-s-6);
  background: var(--c-overlay);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-card);
  box-shadow: var(--c-shadow-pop);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity var(--c-dur-2) var(--c-ease), transform var(--c-dur-2) var(--c-ease);
}
.cw-sig-pop.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.cw-sig-ph { padding-bottom: var(--c-s-4); margin-bottom: var(--c-s-2); border-bottom: 1px solid var(--c-line); }
.cw-sig-row { display: flex; align-items: center; gap: var(--c-s-3); height: 22px; }
.cw-sig-row .c-kicker { letter-spacing: .1em; }
.cw-sig-row[data-proto="rpc"] .c-dot { background: var(--c-rpc); }
.cw-sig-row[data-proto="ws"] .c-dot { background: var(--c-ws); }
.cw-sig-row[data-proto="stream"] .c-dot { background: var(--c-stream); }
.cw-sig-row[data-proto="quote"] .c-dot { background: var(--c-quote); }
.cw-sig-row.is-stale { opacity: .55; } /* a missed probe dims the row but keeps the last good number */
/* the source word rides only the ws row, and only when the reading came off an open socket */
.cw-sig-kind { font-family: var(--c-font-mono); font-size: 9px; letter-spacing: .08em; color: var(--c-faint); }
.cw-sig-ms { font-family: var(--c-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--c-text); }
.cw-sig-row.is-stale .cw-sig-ms { color: var(--c-faint); }
.cw-sig-foot { margin-top: var(--c-s-3); font-family: var(--c-font-mono); font-size: 9.5px; color: var(--c-faint); }

@media (prefers-reduced-motion: reduce) {
  .cw-sig-pop { transition: none; }
}

.cw-acct { position: relative; }
.cw-acct-btn {
  display: inline-flex; align-items: center; gap: var(--c-s-4);
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--c-line); background: var(--c-surface-2);
  border-radius: var(--c-r-ctl); cursor: pointer;
  transition: border-color var(--c-dur-1) var(--c-ease);
}
.cw-acct-btn:hover { border-color: var(--c-line-2); }
.cw-acct-btn:focus-visible { outline: none; box-shadow: var(--c-focus); }
.cw-ava {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--c-r-ctl);
  background: var(--c-raised); border: 1px solid var(--c-brand-line); color: var(--c-brand-tint);
  font-family: var(--c-font-display); font-weight: 600; font-size: 12px;
}
.cw-ava.is-lg { width: 32px; height: 32px; font-size: 15px; }
.cw-acct-tier { font-family: var(--c-font-mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; color: var(--c-muted); }
.cw-acct-cv { display: inline-flex; width: 9px; color: var(--c-faint); transition: transform var(--c-dur-2) var(--c-ease); }
.cw-acct.is-open .cw-acct-cv { transform: rotate(180deg); }

.cw-acct-menu {
  position: fixed; z-index: 90; /* fixed so it escapes the bar's overflow-x clip (JS anchors it); 90 sits
    ABOVE the modal/backdrop layer (.cw-modal / .cw-mod-pop are 80) so the operator menu is never covered */
  width: 238px; padding: var(--c-s-3);
  background: var(--c-overlay); border: 1px solid var(--c-line);
  border-radius: var(--c-r-card); box-shadow: var(--c-shadow-modal);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--c-dur-2) var(--c-ease), transform var(--c-dur-2) var(--c-ease), visibility var(--c-dur-2);
}
.cw-acct-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cw-am-head { display: flex; align-items: center; gap: var(--c-s-5); padding: var(--c-s-4) var(--c-s-5) var(--c-s-6); margin-bottom: var(--c-s-3); border-bottom: 1px solid var(--c-line); }
.cw-am-email { font-family: var(--c-font-body); font-weight: 500; font-size: 12.5px; color: var(--c-text); word-break: break-all; }
.cw-am-sub { display: flex; align-items: center; gap: 7px; margin-top: var(--c-s-3); }
.cw-am-item {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none; cursor: pointer; border-radius: var(--c-r-ctl);
  font-family: var(--c-font-body); font-weight: 400; font-size: 13px; color: var(--c-muted);
  transition: background var(--c-dur-1) var(--c-ease), color var(--c-dur-1) var(--c-ease);
}
.cw-am-item:hover { background: var(--c-raised); color: var(--c-text); }
.cw-am-item.is-info { color: var(--c-info); }
.cw-am-item.is-danger { color: var(--c-danger-tint); }
.cw-am-item.is-danger:hover { background: var(--c-danger-wash); color: var(--c-danger-tint); }
.cw-am-item:focus-visible { outline: none; box-shadow: var(--c-focus); }
.cw-acct-menu.is-admin { width: 272px; }

.cw-bar .c-seg { flex-shrink: 0; }
/* DECLARED DEVIATION: these cells land ~30px tall, under the house 44px rule */
.cw-bar .c-seg-cell { flex: 0 0 auto; white-space: nowrap; padding: var(--c-s-3) var(--c-s-6); }

.cw-content:has(.cw-dashfit) { display: flex; flex-direction: column; overflow: hidden; }
.cw-content:has(.cw-dashfit) .cw-dashfit { flex: 1; min-height: 0; }
@media (max-width: 899.98px) { /* mobile scrolls normally */
  .cw-content:has(.cw-dashfit) { display: block; overflow: auto; }
  .cw-content:has(.cw-dashfit) .cw-dashfit { flex: none; }
}

.dn-links { display: inline-flex; align-items: center; gap: var(--c-s-2); }
.dn-links a { padding: var(--c-s-3) var(--c-s-5); border-radius: var(--c-r-ctl); font-family: var(--c-font-mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-faint); text-decoration: none; cursor: pointer; transition: color var(--c-dur-1) var(--c-ease), background var(--c-dur-1) var(--c-ease); }
.dn-links a:hover { color: var(--c-text); }
.dn-links a:focus-visible { outline: none; box-shadow: var(--c-focus); }
.dn-links a.on { color: var(--c-text); background: var(--c-raised); }

/* admin: the latency pill joins .cw-bar-right, so the fleet cell is the sole centre */
.cw-term .cw-bar--admin .cw-sig { display: none; }

/* form controls (button/input/select/textarea) do NOT inherit font-family */
button, input, select, textarea, optgroup { font-family: inherit; }