/* The site intentionally uses light tokens, including in device dark mode. */
/* One line at every width at the default text size: the row is the dismiss
   button's 44px target, and the rule under it is drawn inside that height.
   With larger text (200% zoom) the line wraps rather than clipping the link. */
.opax-app-banner {
  flex: none;
  background: var(--paper-sunken);
  color: var(--ink);
  box-shadow: inset 0 calc(-1 * var(--border-hairline, 1px)) 0 var(--divider-subtle);
  font: var(--type-metadata, 400 0.9375rem/1.45 sans-serif);
}
.opax-app-banner-hidden .opax-app-banner { display: none; }
.opax-app-banner-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-tight, 0.5rem);
  max-width: var(--layout-column-web-max, 1440px);
  width: 100%;
  min-height: var(--size-target, 44px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 5rem);
}
.opax-app-banner p {
  flex: 1;
  min-width: 0;
  margin: 0;
  /* Room for the link's focus ring inside the row. */
  padding-block: var(--space-line, 0.25rem);
}
/* A small phone keeps the line whole by naming the device it is. */
@media (width < 420px) { .opax-app-banner-ipad { display: none; } }
.opax-app-banner a { white-space: nowrap; color: var(--bronze-ink); text-decoration: underline; text-underline-offset: 0.15em; }
.opax-app-banner a:hover { color: var(--ink); }
.opax-app-banner-dismiss {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 var(--size-target, 44px);
  align-items: center;
  justify-content: center;
  min-width: var(--size-target, 44px);
  min-height: var(--size-target, 44px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.opax-app-banner-dismiss:hover { background: var(--navy-wash); }
.opax-app-banner-dismiss svg { width: var(--size-icon-md, 20px); height: var(--size-icon-md, 20px); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.opax-app-banner :focus-visible { outline: var(--border-focus, 2px) solid var(--bronze-ink); outline-offset: 2px; }
@media (forced-colors: active) { .opax-app-banner :focus-visible { outline-color: Highlight; } }

/* Skip to content: hidden until it has keyboard focus, then drawn over the band
   as style.css draws its other skip links. Defined here because every page that
   gets the banner gets the link, the map page (no style.css) included. */
.opax-skip-link {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.opax-skip-link:focus-visible {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 60; width: auto; height: auto; margin: 0;
  clip-path: none; padding: var(--sp-8, 0.5rem) var(--sp-16, 1rem);
  background: var(--paper-raised); color: var(--ink);
  border: var(--border-hairline, 1px) solid var(--line-control);
  outline: var(--border-focus, 2px) solid var(--bronze-ink); outline-offset: 2px;
  font: var(--type-metadata, 400 0.9375rem/1.45 sans-serif);
}