/* ==========================================================================
   cowell-cpa.css: the layer that reads the demonstrator back to a CPA.

   Deliberately not in the Cowell palette. This is DBJ Technologies speaking
   over the top of a client's site, and a reader has to be able to tell in one
   glance which voice they are hearing: ink ground, a cool signal blue that
   appears nowhere in the Cowell system, and a flat geometry against Cowell's
   rounded warm one. It sits above everything and moves nothing.
   ========================================================================== */
:root {
  --cpa-ink: #10161c;
  --cpa-ink-2: #1b242d;
  --cpa-line: #2b3742;
  --cpa-text: #e8eef3;
  --cpa-muted: #9fb0bd;
  --cpa-signal: #4d9dff;
}

.cpa { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.cpa > * { pointer-events: auto; }

/* ---- the bar ---- */
.cpa__bar {
  position: sticky; top: 0; z-index: 9001;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--cpa-ink); color: var(--cpa-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8125rem; line-height: 1.35;
  border-bottom: 1px solid var(--cpa-line);
  box-shadow: 0 6px 24px -18px rgba(0, 0, 0, 0.9);
}
.cpa__dot { width: 8px; height: 8px; background: var(--cpa-signal); flex: none; }
.cpa__bar-text { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--cpa-muted); }
.cpa__bar-text b { color: var(--cpa-text); font-weight: 600; }
.cpa__btn {
  flex: none; font: inherit; font-size: 0.75rem; font-weight: 600;
  color: var(--cpa-text); background: transparent;
  border: 1px solid var(--cpa-line); padding: 5px 11px; cursor: pointer;
  min-height: 30px;
}
.cpa__btn:hover { border-color: var(--cpa-signal); }
.cpa__btn--go { background: var(--cpa-signal); border-color: var(--cpa-signal); color: #06121f; }
.cpa__btn:focus-visible, .cpa__pin:focus-visible, .cpa__x:focus-visible {
  outline: 2px solid var(--cpa-signal); outline-offset: 2px;
}

/* The bar is in the flow, so nothing has to be padded out from under it. The
   only thing that changes is where the site's own sticky chrome comes to rest
   once it is stuck, which moves down by exactly the height of the bar. */
.has-cpa .site-header, .has-cpa .topbar, .has-cpa .demo-banner { top: 46px; }

/* ---- the pins ---- */
.cpa__pin {
  position: fixed; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  font: 600 0.75rem/1 ui-sans-serif, system-ui, sans-serif;
  color: #06121f; background: var(--cpa-signal);
  border: 2px solid var(--cpa-ink); border-radius: 50%;
  cursor: pointer; box-shadow: 0 2px 10px -2px rgba(6, 18, 31, 0.6);
}
.cpa__pin[aria-expanded="true"] { background: var(--cpa-text); }

/* ---- the note ---- */
.cpa__panel {
  position: fixed; max-width: calc(100vw - 24px);
  background: var(--cpa-ink-2); color: var(--cpa-text);
  border: 1px solid var(--cpa-line); border-left: 3px solid var(--cpa-signal);
  padding: 14px 34px 12px 15px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.95);
}
.cpa__panel-n {
  margin: 0 0 5px; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cpa-signal);
}
.cpa__panel-body { margin: 0; font-size: 0.875rem; line-height: 1.55; }
.cpa__panel-foot {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--cpa-line);
  font-size: 0.6875rem; line-height: 1.45; color: var(--cpa-muted);
}
.cpa__x {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  color: var(--cpa-muted); background: transparent; border: 0; cursor: pointer;
}
.cpa__x:hover { color: var(--cpa-text); }

@media (max-width: 720px) {
  .cpa__bar { flex-wrap: wrap; padding: 7px 10px; }
  .cpa__bar-text { flex: 1 0 100%; order: -1; }
  .has-cpa .site-header, .has-cpa .topbar, .has-cpa .demo-banner { top: 74px; }
}
@media (prefers-reduced-motion: reduce) { .cpa * { transition: none !important; } }
@media (forced-colors: active) {
  .cpa__bar, .cpa__panel { border: 1px solid CanvasText; }
  .cpa__pin { border: 2px solid CanvasText; }
}
@media print { .cpa, .cpa__bar { display: none !important; } }