/* Cookie consent banner (issue #191) — the stylesheet for dashboard/consent.js.
 *
 * One sheet for the nine pages that carry the banner (index / pricing / method
 * and the zh + zh-hk mirrors), so the treatment cannot drift between locales,
 * and one place to read for what the banner looks like.
 *
 * position:fixed, so the banner is out of flow and adds nothing to the
 * document's layout: the page's CLS budget (e2e/perf.spec.js) sees zero from
 * it. Colours come from the token system (--card / --ink / --ink-2 /
 * --hot-text / --line) and never from a new literal, so the rendered contrast
 * gate (e2e/contrast.spec.js) measures the banner in both themes on every page
 * that carries it, and the token audit (tools/contrast_check.py) keeps those
 * pairs honest.
 *
 * --consent-lift is set by consent.js while a page's sticky mobile CTA (#187)
 * is showing, so the two fixed surfaces stack instead of covering each other.
 *
 * Both answers are the same button: Accept and Reject carry identical weight,
 * because a banner that nudges is a dark pattern whatever it says.
 */

[data-consent-open] {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
}

[data-consent-open]:hover { color: var(--ink); }

[data-consent-open]:focus-visible {
  outline: 2px solid var(--focus, var(--hot));
  outline-offset: 2px;
}

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--consent-lift, 0px);
  z-index: 60;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 10px clamp(10px, 2.4vw, 24px) calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.consent[hidden] { display: none; }

.consent .sheet {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 10px);
  box-shadow: var(--lift);
}

.consent .say {
  flex: 1 1 22rem;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.consent .say b { color: var(--ink); font-weight: 600; }

.consent .say a { color: var(--hot-text); text-decoration: underline; }

.consent .acts {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}

.consent .acts button {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 22px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
}

.consent .acts button:hover { border-color: var(--ink-2); }

.consent .acts button:focus-visible {
  outline: 2px solid var(--focus, var(--hot));
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .consent .acts { width: 100%; margin-left: 0; }
  .consent .acts button { flex: 1 1 0; }
}