/* cookie-banner.css — PR TN
 *
 * The cookie-notice rules, standalone. _cookie_banner.html links this
 * file on all 20 including templates — including the app shell
 * (index.html, results.html, ...) and _admin_layout.html, which never
 * load the public mega-menu and therefore never load
 * static/public-chrome.css.
 *
 * The block below is kept byte-identical with the same block in
 * static/public-chrome.css (public pages link both; browsers apply the
 * identical rules twice with no visual difference). There is no build
 * step in this repo, so the invariant is pinned by
 * tests/test_public_ux_tn.py::test_cookie_block_identical_in_both_stylesheets
 * instead of generated from a single source.
 *
 * Bump the ?v= token in _cookie_banner.html AND static/public-chrome.css's
 * consumers whenever this block changes (Frontend Conventions §5.3).
 */

/* ===== BEGIN shared cookie-banner block — keep byte-identical with static/cookie-banner.css ===== */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--paper, #fff);
  border-top: 1px solid var(--line, #E2E8F0);
  box-shadow: 0 -8px 24px rgba(11, 18, 32, 0.08);
  padding: 12px 20px;
  display: none;
  font-family: 'Noto Sans Georgian', sans-serif;
  animation: cookieSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] .cookie-banner {
  background: var(--paper, #131C2E);
  border-top-color: var(--line, #2A3A52);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}
.cookie-banner.show { display: block; }
/* PR TN §5.7 override — MUST come after `.cookie-banner.show` (both are
   specificity 0,2,0, so source order decides). The markup ships the
   `hidden` attribute so a failed fetch of this stylesheet cannot render
   the notice as an un-hidden static block on every page; the partial's JS
   removes the attribute before adding `.show`. */
.cookie-banner[hidden] { display: none; }

@keyframes cookieSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* PR FI-7 a11y F-5 fix — honor `prefers-reduced-motion`.
   The cookie banner's 0.4s slide-up + opacity fade-in animation
   trips vestibular-disorder / motion-sensitivity users who set
   the OS-level reduced-motion preference. The banner still
   appears (it's not animation: none on .cookie-banner display)
   — just no transform/opacity transition, so it shows up in
   place without sliding. Same pattern as PR CH (results-pending
   spinner) and the system-wide reduced-motion override in
   landing.css / auth.css / index.css. */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    animation: none;
  }
}

.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-banner-icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft, #DBE7FB);
  color: var(--accent, #1E40AF);
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
}
[data-theme="dark"] .cookie-banner-icon {
  background: var(--accent-soft, #1E3A8A);
  color: var(--accent, #60A5FA);
}
.cookie-banner-text {
  flex: 1; min-width: 200px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft, #1E293B);
}
.cookie-banner-text strong { color: var(--ink, #0B1220); font-weight: 600; }
.cookie-banner-text a {
  color: var(--accent, #1E40AF);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* PR TN — the one-line summary. The long §6.4 explanation moved into
   the .cookie-more <details> below so the banner stops eating 22% of a
   390x844 viewport (and stops covering the landing hero CTA). */
.cookie-banner-lead { margin: 0; }

/* Second row: the privacy link and the disclosure trigger side by side.
   The link lives OUT here rather than inside the clamped .cookie-banner-lead
   (where `-webkit-line-clamp: 2` clipped it away at >=1.5x zoom and at
   <=260px), and keeping both on one row is what holds the closed banner
   under 80px. */
.cookie-banner-more {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 14px; margin-top: 2px;
}
.cookie-privacy-link {
  font-size: 12.5px; font-weight: 600;
  color: var(--accent, #1E40AF);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex; align-items: center;
  min-height: 24px;  /* WCAG 2.5.8 minimum */
}
.cookie-more { min-width: 0; }
/* Expanded, the disclosure takes its own full-width row so the long text
   is not crammed into the space left over beside the privacy link. */
.cookie-more[open] { flex: 1 0 100%; }
.cookie-more summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent, #1E40AF);
  /* PR TN review fix — was `padding: 2px 0` = 20.8px tall; WCAG 2.5.8
     wants 24x24 for a non-inline target. */
  padding: 4px 0; min-height: 24px;
}
.cookie-more summary::-webkit-details-marker { display: none; }
.cookie-more summary::after { content: "+"; font-weight: 400; }
.cookie-more[open] summary::after { content: "\2212"; }
.cookie-more summary:focus-visible {
  outline: 2px solid var(--accent, #1E40AF);
  outline-offset: 2px;
  border-radius: 2px;
}
.cookie-more-body {
  margin-top: 6px;
  /* A user-expanded banner must never swallow the whole phone screen. */
  max-height: 42vh; overflow-y: auto;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 9px 18px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: var(--transition-base);
  white-space: nowrap;
}
.cookie-btn-dismiss {
  background: var(--accent, #1E40AF);
  color: white;
  border-color: var(--accent, #1E40AF);
}
.cookie-btn-dismiss:hover {
  background: var(--accent-hover, #1E3A8A);
  border-color: var(--accent-hover, #1E3A8A);
}

/* PR SF — slim the mobile banner. It was covering 30-40% of a
   390px viewport (icon + full-width stacked text + full-width
   button), hiding the landing CTA underneath. Drop the decorative
   icon, tighten padding/font-size, and let the text sit beside the
   button instead of forcing a min-width:100% stack.

   PR TN — finish the job: `flex-wrap: nowrap` keeps the button on the
   summary's row (wrap was still pushing it onto a third line once the
   Georgian copy ran long), the summary line clamps at two lines, and
   the dismiss button keeps a 40px touch height. Target is <= 80px so
   the bar clears the landing hero CTA at 390x844. */
@media (max-width: 640px) {
  .cookie-banner { padding: 8px 12px; }
  .cookie-banner-inner { gap: 10px; flex-wrap: nowrap; align-items: center; }
  .cookie-banner-icon { display: none; }
  .cookie-banner-text { font-size: 12.5px; line-height: 1.4; min-width: 0; }
  .cookie-banner-lead {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* The clamp above applies ONLY to the lead paragraph — the privacy link
     and the disclosure trigger sit in .cookie-banner-more below it and are
     never clipped, at any zoom level or viewport width. */
  .cookie-banner-more { column-gap: 12px; }
  .cookie-privacy-link, .cookie-more summary { font-size: 12px; }
  .cookie-banner-actions { width: auto; }
  .cookie-btn { padding: 8px 12px; min-height: 40px; }
}
/* ===== END shared cookie-banner block ===== */