/* The cookie consent control built by js/consent.js. Tokens only.

   A square cookie button fixed to the bottom-right corner, with the consent
   panel opening above it (20 Oct 2026; it was a full-width bar). The panel
   opens by itself until the visitor chooses, and the button stays after, so
   the choice is one click from being changed on every page.

   The button is quiet and the panel is loud. The button is dark glass on
   every page (it carries data-theme="dark"), the same object as the motion
   chip. The panel speaks the hero console's language (title row, source
   chip) in the light palette on every page (the wrapper carries
   data-theme="light"): off-white against the dark hero bands is what makes
   it read as a question to the visitor rather than more of the page. On
   light bands the border, the mint top rule and the shadow separate it.
   privacy.html loads no page.css, so the derived tints are defined here.

   It stacks above the fixed nav (50) and under the phone menu and the grain
   plate (60), so an open menu covers it like the rest of the page. */
.consent {
  --consent-shadow:  color-mix(in srgb, var(--color-deep-carbon) 22%, transparent);
  --consent-hover:   color-mix(in srgb, var(--text-primary) 8%, transparent);
  --consent-chip:    color-mix(in srgb, var(--color-brand-slate) 12%, transparent);
  --consent-mono:    ui-monospace, "SF Mono", Menlo, monospace;
  --consent-inset:   var(--space-6);

  position: fixed; z-index: 55;
  right: var(--consent-inset); bottom: var(--consent-inset);
  color: var(--text-primary);
}

/* The button: dark glass at the locked 44px target, square like every
   button on the site, with a top edge that catches the light. Hover and the
   open panel both light it mint; hover also tips the cookie. */
.consent__fab {
  display: grid; place-items: center;
  width: var(--target-min); height: var(--target-min); padding: 0;
  background: color-mix(in srgb, var(--bg-deepest) 78%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-button);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent),
              0 8px 24px var(--consent-shadow);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}
.consent__fab svg { width: 20px; height: 20px; }
.consent__fab:hover,
.consent__fab[aria-expanded="true"] {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--bg-deepest) 88%, transparent);
}
.consent__fab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
@media (prefers-reduced-motion: no-preference) {
  .consent__fab svg { transition: transform var(--dur-ui) var(--ease-out); }
  .consent__fab:hover svg { transform: rotate(-18deg); }
}

/* The panel, standing on the button's right edge */
.consent__panel {
  position: absolute; right: 0; bottom: calc(100% + var(--space-2));
  width: min(360px, calc(100vw - 2 * var(--consent-inset)));
  box-sizing: border-box; padding: var(--space-6);
  background: var(--bg-base);
  border: var(--border-width) solid var(--border-subtle);
  border-top: 2px solid var(--accent);
  box-shadow: 0 12px 40px var(--consent-shadow);
}
.consent__panel[hidden] { display: none; }

/* One entrance, held back until the hero has landed when it opens by
   itself, and one exit that follows the visitor's choice or the close. */
@media (prefers-reduced-motion: no-preference) {
  .consent__panel { animation: consent-in var(--dur-ui) var(--ease-out) 600ms both; }
  .consent__panel.is-leaving { animation: consent-out 200ms var(--ease-in) both; }
}
@keyframes consent-in {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes consent-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* Title row — the console's agent title, with the close beside it */
.consent__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.consent__title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; font: 500 15px/1.2 var(--font-sans); color: var(--text-primary);
}
.consent__title svg { width: 18px; height: 18px; flex: none; color: var(--text-accent); }
.consent__close {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0;
  padding: 0; border: none; border-radius: var(--radius-button);
  background: none; color: var(--text-secondary); cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.consent__close svg { width: 16px; height: 16px; }
.consent__close:hover { background: var(--consent-hover); color: var(--text-primary); }
.consent__close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 0; }

/* Body — the text at full length, with its source chip */
.consent__text {
  margin: var(--space-3) 0 0; font: 400 14px/1.55 var(--font-sans); color: var(--text-secondary);
}
.consent__source {
  display: inline-block; margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: 4px;
  background: var(--consent-chip);
  font: 400 11px/1.5 var(--consent-mono); letter-spacing: 0.4px;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.consent__source:hover { color: var(--text-primary); }
.consent__source:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* Accept and Decline carry equal weight: consent that is easier to give than
   to refuse is not freely given (GDPR Art. 7, EDPB guidelines 03/2022). Both
   take the design system's secondary Button, at its locked 44px height, and
   share the panel's width. */
.consent__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  margin-top: var(--space-4);
}
.consent__btn {
  min-width: 0; height: var(--target-min);
  padding: 0 var(--space-4);
  font: 500 15px/1 var(--font-sans);
  border-radius: var(--radius-button);
  border: var(--border-width) solid var(--border-strong);
  background: transparent; color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.consent__btn:hover { background: var(--consent-hover); border-color: var(--text-secondary); }
.consent__btn:active { filter: brightness(0.9); }
.consent__btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.consent__btn:disabled { cursor: default; }

/* Phones: the corner tightens to the page margin */
@media (max-width: 600px) {
  .consent { --consent-inset: var(--space-4); }
}