/*
 * Browser-zoom warning banner.
 *
 * Companion to research/js/utils/browser_zoom_detector.js. The detector
 * creates the .zoom-warning-banner element at runtime; this file styles
 * it. Loaded directly (not via design_system.css) so the landing page —
 * which doesn't load the design system — still gets the styling.
 */
.zoom-warning-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%);
  border-bottom: 1px solid #F59E0B;
  color: #78350F;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  /* Never let the banner contribute to horizontal overflow itself. */
  overflow: hidden;
}
.zoom-warning-banner.is-visible { display: flex; }

/* Suppress under 1024px, not 768px: a browser per-site zoom hint is meaningless
   on touch devices, the outer/inner ratio the detector uses can trip on
   pinch-zoom, and the dashboard switches to its mobile/column layout at 1024px
   — so anything below that is treated as mobile across every surface. */
@media (max-width: 1024px) {
  .zoom-warning-banner,
  .zoom-warning-banner.is-visible { display: none !important; }
}

.zoom-warning-banner__icon { color: #B45309; flex-shrink: 0; }
/* min-width:0 lets the text flex item shrink below its content's min-content
   width instead of forcing the fixed banner wider than the viewport. */
.zoom-warning-banner__text  { flex: 1; min-width: 0; }

.zoom-warning-banner__text kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  background: rgba(120,53,15,0.12);
  border: 1px solid rgba(120,53,15,0.25);
  border-radius: 4px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.8em;
}

.zoom-warning-banner__close {
  background: none;
  border: none;
  cursor: pointer;
  color: #78350F;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.zoom-warning-banner__close:hover { background: rgba(120,53,15,0.12); }
.zoom-warning-banner__close .material-icons { font-size: 18px; }