/* Cookie preferences banner.
 *
 * Its own file because consent.js injects this banner into EVERY page, and
 * privacy.html and terms.html deliberately carry their own narrow template with no
 * link to loopa.css. That left the banner completely unstyled on exactly the two
 * pages the App Store listing sends people to: 17px-tall buttons and a 12px
 * checkbox, on the privacy policy. One home for the rules, linked from every page,
 * rather than a copy in the legal template that would drift from this one.
 *
 * Every custom property carries a literal fallback for the same reason -- the legal
 * pages do not declare the palette.
 */
/* ============ Cookie preferences ============
   A bottom sheet rather than a full-screen interstitial: the policy promises a choice,
   not a toll gate, and blocking the page to collect one is the pattern regulators keep
   naming. Reopenable from the footer on every page, because a preference you cannot
   revisit is not a preference. */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center;
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.ck-box {
  pointer-events: auto;
  width: 100%; max-width: 560px;
  background: var(--card, #FFFFFF); color: var(--ink, #14213D);
  border: 1px solid rgba(20,33,61,.14); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15,23,42,.22);
  padding: 20px 22px;
}
.ck-h { font-size: 18px; margin: 0 0 6px; }
.ck-p { font-size: 14px; line-height: 1.6; color: var(--ink-soft, #475569); margin: 0 0 14px; }
.ck-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ck-row { display: flex; gap: 11px; align-items: center; cursor: pointer; margin: 0; min-height: 44px; }
.ck-row input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--purple-deep, #4A1FD6); }
.ck-row input:disabled { cursor: not-allowed; }
.ck-row-txt strong { display: block; font-size: 14.5px; }
.ck-row-txt em { display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--ink-soft, #475569); margin-top: 1px; }
.ck-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ck-btn {
  flex: 1 1 auto; min-height: 44px; padding: 10px 18px;
  font-family: var(--font, ui-sans-serif, system-ui, -apple-system, 'Plus Jakarta Sans', sans-serif); font-size: 15px; font-weight: 700;
  border-radius: 12px; cursor: pointer;
  background: transparent; border: 1.5px solid #CBD5E1; color: var(--ink-soft, #475569);
}
.ck-btn:hover { border-color: var(--purple, #6C3BFF); color: var(--purple-deep, #4A1FD6); }
.ck-btn--primary {
  background: linear-gradient(135deg, var(--purple, #6C3BFF) 0%, var(--purple-deep, #4A1FD6) 100%);
  border-color: transparent; color: #FFFFFF;
}
.ck-btn:focus-visible { outline: 3px solid var(--purple, #6C3BFF); outline-offset: 2px; }
.ck-more { margin: 14px 0 0; font-size: 13px; }
.ck-more a { color: var(--purple-deep, #4A1FD6); display: inline-block; padding: 5px 0; }
/* The sheet measured 512px tall in a 568px viewport — 90% of an iPhone SE's screen, and
   on a landscape phone it WAS the page, covering the <h1> on 66 of 68 routes. A consent
   choice is not an interstitial; the policy promises a choice, not a toll gate. Cap it at
   half the viewport, let the explanatory rows scroll inside that, and pin the buttons so
   the way out is never the thing that got scrolled off. */
.ck-box { display: flex; flex-direction: column; max-height: min(46vh, 400px); }
.ck-rows { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.ck-acts { flex: 0 0 auto; }
@media (max-width: 520px) {
  .ck { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ck-box { padding: 15px 16px; max-height: min(46vh, 340px); }
  .ck-h { font-size: 16.5px; }
  .ck-p { font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; }
  .ck-rows { gap: 4px; margin-bottom: 12px; }
  .ck-row-txt strong { font-size: 14px; }
  .ck-row-txt em { font-size: 12.5px; line-height: 1.4; }
  .ck-more { margin-top: 10px; font-size: 12.5px; }
}
/* A short phone in portrait -- an iPhone SE is 568px -- still gave the sheet 60% of the
   screen and 165px of the 205px <h1>. The per-row sentence is the part that can go: the
   category, its switch and the link to the full cookie policy all stay, so the choice is
   unchanged and only the explanation of each row is deferred to that policy. */
@media (max-height: 620px) {
  .ck-box { max-height: min(46vh, 300px); }
  .ck-row-txt em { display: none; }
  /* The rows keep their 44px: they scroll inside the capped box, so their height costs
     the screen nothing and shrinking them only made three consent switches harder to
     hit. The cap is what controls how much of the viewport this takes. */
  .ck-rows { gap: 2px; margin-bottom: 10px; }
}
/* Landscape on a phone is the worst case: ~375px of height, most of it browser chrome. */
@media (max-height: 460px) {
  .ck-box { max-height: 82vh; padding: 12px 14px; }
  .ck-p { display: none; }          /* the heading and the rows already say it */
  .ck-h { font-size: 15.5px; margin-bottom: 8px; }
}