/* ==============================================================
   C3 — Cookie consent

   The second <dialog> in the system (after .app-modal), so it
   follows the same shape: kill the UA box, restore flow when it is
   NOT modal, and paint the backdrop only when it is.

   Everything is centred except the action row, which spans the full
   inner width in equal columns.
   ============================================================== */

.cookie-consent {
  /* Same three-way min as .app-modal. A modal lives in the top layer,
     where width:100% resolves to the whole viewport and would run
     edge to edge on a phone; the third term keeps it clear of the
     edges. */
  width: min(var(--cookie-max-w), 100%, calc(100vw - 2 * var(--space-5)));

  /* Short viewports (landscape phones) scroll rather than clip. */
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;

  padding: 0;
  background: var(--color-surface);
  color: var(--color-ink);

  /* The wireframe draws a card edge, which is exactly what the
     decorative hairline token is for — it carries no information, the
     card's presence does. The shadow is the modal-level token. */
  border: 1px solid var(--color-border);
  box-shadow: var(--modal-shadow);
}

/* :modal matches only dialogs opened with showModal(), so the UA's
   centring is left alone there and overridden everywhere else. */
.cookie-consent:not(:modal) {
  position: static;
  margin-inline: auto;
}

.cookie-consent::backdrop {
  background: var(--modal-backdrop);
}

.cookie-consent__inner {
  padding: var(--cookie-pad);
  text-align: center;
}


/* --- Heading ---------------------------------------------------- */

/* Margin-based rhythm rather than a flex gap: the heading and the
   sentence are a tighter pair than the blocks below them, and a
   single gap cannot say that without a negative margin. */
.cookie-consent__heading {
  margin: 0 0 var(--cookie-gap-tight);
  font-size: var(--text-cookie-heading);
  line-height: var(--leading-heading);
  color: var(--color-heading-display);
}


/* --- Sentence ---------------------------------------------------- */

.cookie-consent__text {
  margin: 0 0 var(--cookie-gap);
  line-height: var(--leading-body);
  /* Centred text that wraps looks accidental when the last line is a
     single word; balance splits the lines evenly instead. */
  text-wrap: balance;
}


/* --- Actions -----------------------------------------------------
   Equal columns, however many actions the data carries — no magic
   3 in the CSS to fall out of step with the markup.
   ------------------------------------------------------------------ */

.cookie-consent__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--cookie-action-gap);
  margin: 0 0 var(--cookie-gap);
}

/* Goes through the button's own custom property rather than
   overriding `padding`, so the border/padding relationship that keeps
   solid and outline the same height survives intact. */
.cookie-consent__action {
  --btn-pad-x: var(--cookie-action-pad-inline);
  min-width: 0;
}


/* --- Footnote ----------------------------------------------------- */

.cookie-consent__footnote {
  margin: 0;
  font-size: var(--text-cookie-footnote);
}

.cookie-consent__policy {
  /* SC 2.5.8 wants a 24x24 target. The inline exception covers a link
     sitting inside a sentence; this one IS the whole paragraph, so it
     does not apply — and 13px type gives a 16px box. Vertical padding
     takes it to 24 without moving the text or the underline. */
  display: inline-block;
  padding-block: 4px;

  /* Underlined, not coloured: SC 1.4.1 means the link cannot be
     identified by colour alone. */
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==============================================================
   C4 — Responsive

   Only one thing has to change: the action row cannot stay side by
   side on a phone. Everything else already survives, because the card
   is sized by min() and the type is fixed rather than fluid.
   ============================================================== */

@media (max-width: 559px) {

  /* One property. This is why the row was written as auto-flow rather
     than repeat(3, 1fr) — there is no column count here to keep in
     step with the actions array. */
  .cookie-consent__actions {
    grid-auto-flow: row;
  }
}