/* Knead + the Frontli tracking kit's cookie notice. Kit 1.6.0 compact notice (spec
   docs/superpowers/specs/2026-11-14-knead-banner-compact-design.md Rev 2 §3; Phat 2026-11-14 "Shorter + on-brand",
   "Same style, one line", "Don't cover Book bar"). consent.js adds .ft-consent--compact to the region; the kit's
   consent.css is unchanged, so every compact look lives here. This file loads BEFORE styles.css (review S6), so every
   rule that touches the notice carries .ft-consent--compact plus another class or html: it then outranks the kit's
   single-class rules and styles.css's element rules whatever the order (TA8 checks it). Knead tokens only, never the
   Book-only amber fill. A separate file because styles.css and the look files are byte-pinned (wide-screen test 5). */

/* ---- the region: dark, Knead type, constant padding (the same height docked or at the bottom: review S7) ---- */
.ft-consent.ft-consent--compact {
  --ft-consent-bg: var(--lacquer-2); --ft-consent-fg: var(--ivory); --ft-consent-accent: var(--ivory);
  font-family: var(--body); font-size: 15px; line-height: 1.45;
  border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  padding: 14px var(--pad);
}
/* the kit's entrance, slower and on the site's easing; under reduced motion the kit's 0.01s stands */
@media (prefers-reduced-motion: no-preference) {
  .ft-consent.ft-consent--compact { animation-duration: .32s; animation-timing-function: var(--ease); }
}
.ft-consent.ft-consent--compact:focus { outline: 2px solid var(--blush); outline-offset: -2px; }
.ft-consent.ft-consent--compact .ft-consent__inner { max-width: var(--max); gap: 12px 24px; }

/* ---- the labelled buttons (OK, Allow ad measurement, the panel's Turn on / off): one style, one line, none stretch ---- */
.ft-consent.ft-consent--compact .ft-consent__btn {
  min-height: 46px; min-width: 0; padding: 0 16px; border-radius: 0; white-space: nowrap;
  background: transparent; color: var(--ivory); border: 1px solid var(--blush-2);
  font-weight: 600; line-height: 1; flex: 0 0 auto;
}
.ft-consent.ft-consent--compact .ft-consent__btn:hover { border-color: var(--ivory); }
/* the X stays a bare glyph (a close control, not a third choice), 44 x 46, pushed to the row's end */
.ft-consent.ft-consent--compact .ft-consent__close { min-width: 44px; min-height: 46px; margin-left: auto; color: var(--ivory); border-radius: 0; }
.ft-consent.ft-consent--compact .ft-consent__link,
.ft-consent.ft-consent--compact .ft-consent__inline { text-decoration: underline; text-decoration-color: var(--blush-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ft-consent.ft-consent--compact .ft-consent__link { white-space: nowrap; }
.ft-consent.ft-consent--compact .ft-consent__btn:focus-visible,
.ft-consent.ft-consent--compact .ft-consent__close:focus-visible,
.ft-consent.ft-consent--compact .ft-consent__inline:focus-visible,
.ft-consent.ft-consent--compact .ft-consent__link:focus-visible { outline: 2px solid var(--blush); outline-offset: 3px; }
/* the smallest phones: the X moves to the top-right corner so OK + Allow keep one row */
@media (max-width: 359px) {
  .ft-consent.ft-consent--compact .ft-consent__notice .ft-consent__close { position: absolute; top: 4px; right: 4px; min-height: 44px; }
  .ft-consent.ft-consent--compact .ft-consent__notice .ft-consent__text { padding-right: 40px; }
}

/* ---- phones: the Book / Call bar never moves (D4). The notice docks right on top of the whole bar: its real height
   is --stick-h (script.js; ~94px with the remembered-studio row, code review 2 S1), 56px buttons + the 1px top border
   + the safe area until script.js has measured it. It takes the bottom while the bar is stepped away: script.js
   states (styles.css .is-out and the hero gate), the FAQ search box (faq.css) and the open menu (look-premium.css).
   Before script.js runs (no .stick-on) it docks above the bar's slot: at worst a gap, never a bar under the notice
   when the 4 s failsafe fires. Each :has() selector has a rule of its own: a browser without :has() drops a whole
   selector list that contains one (code review 2 N1). ---- */
@media (max-width: 899px) {
  html.ft-has-consent .ft-consent.ft-consent--compact { bottom: var(--stick-h, calc(57px + env(safe-area-inset-bottom))); transition: bottom .3s var(--ease); }
  html.stick-on body:has(.stick.is-out) .ft-consent.ft-consent--compact { bottom: env(safe-area-inset-bottom); }
  html.stick-on body:has([data-hero-book]):not(:has(.stick.is-in)) .ft-consent.ft-consent--compact { bottom: env(safe-area-inset-bottom); }
  html.faq-typing .ft-consent.ft-consent--compact,
  html.menu-open .ft-consent.ft-consent--compact { bottom: env(safe-area-inset-bottom); }
  /* at the bottom only (never while docked: code review 2 N3), the home-indicator area under the notice is filled by
     a strip, not padding, so the notice keeps one height */
  html.stick-on body:has(.stick.is-out) .ft-consent.ft-consent--compact::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: env(safe-area-inset-bottom); background: var(--lacquer-2); }
  html.stick-on body:has([data-hero-book]):not(:has(.stick.is-in)) .ft-consent.ft-consent--compact::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: env(safe-area-inset-bottom); background: var(--lacquer-2); }
  html.faq-typing .ft-consent.ft-consent--compact::after,
  html.menu-open .ft-consent.ft-consent--compact::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: env(safe-area-inset-bottom); background: var(--lacquer-2); }
  /* the call sheet opens right on top of the notice: the kit's --ft-consent-h carries +8 (consent.js lift()), take it back */
  html.ft-has-consent .call-sheet { bottom: calc(var(--stick-h, calc(57px + env(safe-area-inset-bottom))) + var(--ft-consent-h) - 8px); }
  html.ft-has-consent body { padding-bottom: calc(var(--stick-h, calc(57px + env(safe-area-inset-bottom))) + var(--ft-consent-h)); }
}
/* the same specificity as the docked rule and later, so it wins (code review 2 N2; TA8 checks it) */
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { html.ft-has-consent .ft-consent.ft-consent--compact { transition: none; } }
@media (min-width: 900px) {
  html.ft-has-consent body { padding-bottom: var(--ft-consent-h); }
}
/* the notice's "How it works" link opens /privacy#cookies: land the row's title below the fixed nav, not under it
   (lab probe-analytics-notice-2026-11-14 N4); the visit-counts row too */
#cookies, #visit-counts { scroll-margin-top: calc(var(--nav-h) + 16px); }