/* ============================================================================
   JABALI — app.css  ·  Skeleton-only additions on top of the design export.
   Uses design tokens only (no hard-coded values). Currently: the cookie consent
   banner and the spam honeypot. Keep design-export files (tokens.css, styles.css)
   untouched so they can be re-synced from Claude Design.
   ============================================================================ */

/* Honeypot — never visible, never announced. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Hero fit on short windows -------------------------------------------
   The "Cinematic field" hero is viewport-height and bottom-anchored (artboard
   3a is a 900px canvas). styles.css already sizes it from 100svh, so the CTA
   pair sits a fixed 72px above the fold at any height. On genuinely short
   windows the display type is tiered down so headline + BOTH CTAs still fit.
   (The previous overrides here centred the hero and capped the headline at
   72px; they belonged to the old "Command console" hero and are gone.) */
@media (min-width: 721px) and (max-height: 760px) {
  .hero h1 { font-size: clamp(38px, 5.4vw, 76px); margin-top: 18px; }
  .hero__foot { margin-top: 28px; }
  .hero__in { padding-bottom: 48px; }
}

/* Cookie consent — compact frost card, lower-right. Same glass as .nav.is-stuck.
   Entrance matches .reveal: opacity + 16px rise on --dur-4 / --ease-out. */
.consent {
  --consent-inset: max(40px, var(--pad));
  position: fixed; z-index: 100;
  right: var(--consent-inset); left: auto;
  bottom: max(var(--consent-inset), env(safe-area-inset-bottom, 0px));
  width: min(25rem, calc(100vw - 2 * var(--consent-inset)));
  background: rgba(5,6,7,0.72);
  -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
  border: var(--bw-hair) solid var(--cc-line);
  border-radius: var(--s-4);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.open { opacity: 1; transform: none; pointer-events: auto; }
.consent__in { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.consent__head { display: flex; align-items: center; gap: 12px; }
.consent__icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--cc-ink); }
.consent__title {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-18); letter-spacing: var(--tr-heading); color: var(--cc-ink);
  line-height: var(--lh-heading); text-wrap: balance;
}
.consent__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.consent__lead {
  margin: 0; color: var(--cc-ink); font-size: var(--fs-15); font-weight: var(--fw-medium);
  line-height: var(--lh-ui); text-wrap: pretty;
}
.consent__note { margin: 0; color: var(--cc-ink-2); font-size: var(--fs-14); line-height: var(--lh-ui); }
.consent__privacy {
  margin-top: 2px; padding-bottom: 2px;
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label-2); text-transform: uppercase;
  color: var(--cc-ink-3); text-decoration: none;
  border-bottom: var(--bw-hair) solid var(--cc-line-strong);
  transition: color var(--dur-2), border-color var(--dur-2);
}
.consent__privacy:hover { color: var(--cc-ink); border-color: var(--cc-ink); }
.consent__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; }
.consent__skip {
  appearance: none; background: none; border: 0; padding: 0 12px; margin: 0;
  min-height: 48px; cursor: pointer;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-14);
  letter-spacing: 0.01em; color: var(--cc-ink-3); line-height: 1.25;
  transition: color var(--dur-2);
}
.consent__skip:hover { color: var(--cc-ink); }
.consent__actions .btn {
  min-height: 48px; min-width: 0; padding: 12px 20px; font-size: var(--fs-15); width: 100%;
  border-radius: calc(var(--s-4) - 6px);
}
.consent__actions .btn--primary {
  background: var(--power-electric); color: var(--cc-bg); border-color: var(--power-electric);
}
.consent__actions .btn--primary:hover {
  background: color-mix(in srgb, var(--power-electric) 82%, white);
  border-color: color-mix(in srgb, var(--power-electric) 82%, white);
}
.consent__actions .btn--primary:active {
  background: color-mix(in srgb, var(--power-electric) 82%, black);
  border-color: color-mix(in srgb, var(--power-electric) 82%, black);
}
body.consent-open .fab { visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .consent { transform: none; transition: opacity var(--dur-2); }
}