/* arihoresh.com: the "we track nothing" notice bar.
   One slim pill on the page axis, above the film's player bar. Quiet ink-2 text on paper, a 1px line ring
   and the same soft shadow as the player bar, so the two read as one control cluster.

   --notice-offset  distance from the bottom of the viewport to the bottom of the bar.
                    Default: 24px + the safe-area inset (a page with no player bar).
                    The film sets it so the bar clears its own chrome, e.g. the base player:
                    :root { --notice-offset: 80px; }   (player bar: bottom 24 + 48 tall + an 8px gap)

   Hold classes on <html> that hide the bar (fade out, no focus, no clicks) while they are present:
   .notice-hold (generic), .film-pending and .film-on (the base player's cold open and lens dive).
   Fonts: uses the page's own "Inter" face; this file declares no @font-face. */

.ah-notice {
  --ah-paper: #fbfaff;
  --ah-ink: #16122b;
  --ah-ink-2: #57536f;
  --ah-line: rgba(22, 18, 43, 0.12);
  --ah-violet: #4a2fa0;

  position: fixed;
  left: 50%;
  bottom: var(--notice-offset, calc(24px + env(safe-area-inset-bottom, 0px)));
  z-index: 30;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  margin: 0;
  padding: 0 4px 0 20px;
  border-radius: 999px;
  background: var(--ah-paper);
  box-shadow: 0 0 0 1px var(--ah-line), 0 8px 24px -16px rgba(22, 18, 43, 0.4);
  color: var(--ah-ink-2);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.ah-notice[hidden] { display: none !important; }
.ah-notice.is-shown { opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0s linear 0s; }

/* the film's dive (and any other hold) always wins */
:root.notice-hold .ah-notice,
:root.film-pending .ah-notice,
:root.film-on .ah-notice { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms ease, visibility 0s linear 240ms; }

.ah-notice *,
.ah-notice *::before,
.ah-notice *::after { box-sizing: border-box; }

.ah-notice-text { margin: 0; color: var(--ah-ink-2); }

.ah-notice-actions { display: flex; align-items: center; gap: 16px; }
/* a hairline between the sentence and the links */
.ah-notice-actions::before { content: ""; width: 1px; height: 16px; background: var(--ah-line); }

.ah-notice-link {
  color: var(--ah-ink-2);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  border-radius: 2px;
  transition: color 160ms ease;
}
.ah-notice-link:hover { color: var(--ah-violet); }

.ah-notice-ok {
  height: 32px;
  min-width: 48px;
  margin: 0 0 0 -4px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(74, 47, 160, 0.08);
  color: var(--ah-violet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.ah-notice-ok:hover { background: rgba(74, 47, 160, 0.14); }

.ah-notice-link:focus-visible,
.ah-notice-ok:focus-visible { outline: 2px solid var(--ah-violet); outline-offset: 2px; }

/* phone: one centered card, two rows (the sentence, then the links and OK) */
@media (max-width: 560px) {
  .ah-notice {
    flex-direction: column;
    gap: 4px;
    width: min(358px, calc(100% - 32px));
    height: auto;
    padding: 12px 8px 8px;
    border-radius: 16px;
    text-align: center;
  }
  .ah-notice-actions { gap: 24px; }
  .ah-notice-actions::before { display: none; }
  .ah-notice-ok { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-notice,
  .ah-notice.is-shown,
  :root.notice-hold .ah-notice,
  :root.film-pending .ah-notice,
  :root.film-on .ah-notice,
  .ah-notice-link,
  .ah-notice-ok { transition: none; }
}

@media print { .ah-notice { display: none !important; } }