/* seed42 cookie consent.
 *
 * Its own stylesheet because it loads on the app, both landing pages and the
 * legal pages, and those four do not share one. Everything is scoped under
 * .s42-cc and every value is literal rather than a var(), so it renders the
 * same whether or not the host page defines the design tokens.
 *
 * A card low on the page over a lightly dimmed background. Two versions came
 * before it and both were wrong in opposite directions: a thin bar along the
 * bottom got scrolled past and went unanswered, and an unanswered prompt is
 * recorded as a decline; a centred dialog took the whole screen for a question
 * nobody arrived to ask. This one blocks clicking without covering the thing
 * they came to look at. Europe is 22% of visitors and most of it was going
 * unanswered.
 *
 * The wording is the ordinary wording every other site uses, on purpose. People
 * have read that sentence a thousand times and answer it without stopping;
 * anything written in a voice makes them read it properly, which is slower and
 * leaves them no better informed.
 *
 * What has to stay true, whatever this looks like: Accept and Decline are the
 * same size, shape, weight and reachability. A quieter, smaller or slower
 * reject is the specific pattern the EDPB and the French and Irish regulators
 * have fined companies for, and it would turn a working consent mechanism into
 * an unlawful one. Making the prompt harder to miss is legitimate; making one
 * answer harder to give is not. The colour differs, the prominence does not.
 *
 * The privacy policy is linked inside the dialog, so somebody who wants to
 * read before deciding can still reach it. That was the bottom bar's job and
 * it still has to be done. */

.s42-cc {
  position: fixed;
  inset: 0;
  /* Above the phone shell and above the plan modal, both of which sit at
     2147483000 and 2147483001. This one is a legal gate rather than a feature,
     and analytics stay off until it is answered, so it is the one thing that
     must never end up underneath something else. */
  z-index: 2147483002;
  display: flex;
  /* Low, not centred. A centred dialog took the whole screen for a question
     nobody arrived to answer; the thin bar it replaced was scrolled past and
     went unanswered, which is worse, because an unanswered prompt is recorded
     as a decline. The lower third is the compromise: in the way of clicking,
     not in the way of looking. */
  align-items: flex-end;
  justify-content: center;
  padding: 20px 20px max(24px, env(safe-area-inset-bottom));
  /* Lighter than a modal scrim, and no blur. It should read as "answer this
     first", not as "the page is gone". */
  background: rgba(0, 0, 0, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Arial, sans-serif;
  /* Animated in by .s42-cc-in so it does not flash over a page that is still
     painting. */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.s42-cc-in { opacity: 1; }
.s42-cc-out { opacity: 0; }

.s42-cc-card {
  width: 100%;
  /* Wider and shorter than the centred version: one sentence reads across
     rather than wrapping into a paragraph, which is what made it look like
     something worth stopping for. */
  max-width: 560px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid #333;
  background: #131313;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  color: #a0a0a0;
  font-size: 14px;
  line-height: 1.5;
  /* Rises into place rather than scaling up. A card that grows reads as a
     dialog; one that slides up from the edge reads as a bar. */
  transform: translateY(14px);
  transition: transform 0.2s ease;
}

/* Side by side once there is room: the sentence on the left, the two buttons
   on the right, which is the shape people expect and the shortest thing to
   scan. It stacks below that, where a row would squeeze both. */
@media (min-width: 620px) {
  .s42-cc-card {
    display: flex;
    align-items: center;
    gap: 18px;
  }
}

.s42-cc-in .s42-cc-card { transform: translateY(0); }

/* No bottom gap in the row layout; the flex gap does that job. */
.s42-cc-text { margin: 0 0 16px; flex: 1 1 auto; }
@media (min-width: 620px) { .s42-cc-text { margin: 0; } }
.s42-cc-text a { color: #fff; text-decoration: underline; }
.s42-cc-text a:hover { color: #10b981; }

/* Side by side and equal width. Stacking them would make the lower one read as
   secondary, which is exactly what must not happen here. */
.s42-cc-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.s42-cc-btn {
  appearance: none;
  flex: 1 1 0;
  border-radius: 9px;
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.s42-cc-primary {
  background: #10b981;
  border: 1px solid #10b981;
  color: #06281d;
}
.s42-cc-primary:hover { background: #0ea672; border-color: #0ea672; }

/* Same box, same width, quieter ink. Equal prominence is about size, shape and
   reachability, not about the two being indistinguishable from each other. */
.s42-cc-secondary {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: #c0c0c0;
}
.s42-cc-secondary:hover { border-color: #5a5a5a; color: #fff; }

.s42-cc-btn:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }

@media (max-width: 480px) {
  .s42-cc { padding: 14px 14px max(18px, env(safe-area-inset-bottom)); }
  .s42-cc-card { padding: 16px; }
  /* Full width each, still side by side and still the same size. Stacking them
     is what would make the lower one read as the lesser choice. */
  .s42-cc-btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .s42-cc, .s42-cc-card { transition: none; }
}