/* consent.css . the consent surface, per the .cookies standard.
 *
 * LAYOUT IS COMPLIANCE HERE. A stylesheet can create a dark pattern that
 * nobody wrote, and it will not show up in a review of the text. Four faults
 * are guarded against by construction:
 *
 *   L1  A wrapping button row destroys refuse and accept parity, because the
 *       last button on a new row takes the full width of that row. The pair
 *       is laid out on an EXPLICIT equal basis, so neither can outgrow the
 *       other, and min-width:0 stops a long French label from doing it.
 *   L2  A panel taller than the viewport puts the action row below the fold
 *       of a fixed element, where it cannot be reached at all. The card is
 *       capped and scrolls inside itself.
 *   L3  Stacking the pair on a narrow screen recreates the hierarchy that the
 *       parity rule removes. Refuse and Accept stay side by side at every
 *       width. No media query touches the action row.
 *   L4  A panel with no border disappears into a pale page.
 *
 * L4b. EVERY custom property carries a literal fallback, and background and
 * label colour are always declared together. A consent panel is the last
 * component that should depend on a theme block loading in the right order,
 * and a token that fails to resolve does not remove a button: it paints the
 * label the colour of its own background and the visitor sees an empty box.
 * No token here points at another token. The property is the theming surface.
 */

.cnst-root[hidden] { display: none; }

/* The card. Fixed to the bottom, inset on all sides so its border reads as an
   edge, and capped so the action row can never fall below the fold. */
.cnst {
  position: fixed;
  z-index: 2147483000;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 1.25rem;
  border: 2px solid var(--cnst-edge, #FCC600);
  border-radius: 4px;
  background: var(--cnst-bg, #082556);
  color: var(--cnst-fg, #FFFFFF);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: 0 6px 28px rgba(4, 18, 44, 0.45);
}

/* The per purpose panel traps focus, so it says aria-modal and it has to
   look modal too. The scrim is painted by the card's own shadow rather than by
   a second element, so there is nothing extra to fail to appear and nothing
   that can swallow a click the page behind still needs. */
.cnst--modal {
  box-shadow: 0 0 0 100vmax rgba(4, 18, 44, 0.55);
}

/* A global heading rule elsewhere on the site paints h2 navy. On a navy card
   that is 1.00:1, which once shipped an invisible banner title on every page.
   Inherit, so this cannot drift away from the card's own text again. */
.cnst h2,
.cnst h3 {
  color: inherit;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 .5rem;
  padding: 0;
}

.cnst p {
  margin: 0 0 .75rem;
  color: inherit;
}

.cnst a {
  color: var(--cnst-link, #FCC600);
  text-decoration: underline;
}

.cnst a:hover,
.cnst a:focus-visible {
  color: var(--cnst-link-hover, #FFEFB0);
}

/* The sentence that says silence is not agreement. Small, but never smaller
   than the floor a person with low vision can read. */
.cnst__note {
  font-size: .9375rem;
  margin: .75rem 0 0;
}

/* ================================================================== *
 * The action row. L1, L3.
 * ================================================================== */
.cnst__acts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: stretch;
  margin-top: 1rem;
}

/* Refuse and Accept. Each asks for the same fraction of the row, so neither
   can grow past the other, and neither can be pushed onto a row of its own. */
.cnst__b1 {
  flex: 1 1 calc(50% - .25rem);
  min-width: 0;
}

/* The secondary action, on a row of its own. It is neither refusal nor
   acceptance, so it is outside the parity pair by design. */
.cnst__b2 {
  flex: 1 0 100%;
}

/* Every control on this card, including the close control, clears 44px on its
   smallest dimension. WCAG 2.1 AA, and a consent control is the last place to
   ask for a precise tap. */
.cnst__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: .6rem 1rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  /* L1b. The border is never the colour of its own background, so the button
     keeps an edge on any surface. L4b. Background and label colour are
     declared together, both with literal fallbacks, so they can never resolve
     from different sources and cancel each other out. */
  background: var(--cnst-btn-bg, #FFFFFF);
  color: var(--cnst-btn-fg, #082556);
  border: 2px solid var(--cnst-btn-edge, #FCC600);
}

.cnst__btn:hover {
  background: var(--cnst-btn-bg-hover, #FFEFB0);
  color: var(--cnst-btn-fg, #082556);
}

.cnst__btn:focus-visible {
  outline: 3px solid var(--cnst-focus, #FCC600);
  outline-offset: 3px;
}

/* The secondary control. Different from the pair, identical within itself,
   and never applied to Refuse or to Accept. */
.cnst__btn--quiet {
  background: var(--cnst-btn2-bg, #0E3574);
  color: var(--cnst-btn2-fg, #FFFFFF);
  border: 2px solid var(--cnst-btn2-edge, #FFFFFF);
}

.cnst__btn--quiet:hover {
  background: var(--cnst-btn2-bg-hover, #1B57A8);
  color: var(--cnst-btn2-fg, #FFFFFF);
}

/* ================================================================== *
 * The close control. It stores nothing.
 * ================================================================== */
.cnst__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.cnst__x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: -.25rem -.25rem 0 0;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  background: var(--cnst-x-bg, #0E3574);
  color: var(--cnst-x-fg, #FFFFFF);
  border: 2px solid var(--cnst-x-edge, #FFFFFF);
}

.cnst__x:hover {
  background: var(--cnst-x-bg-hover, #1B57A8);
  color: var(--cnst-x-fg, #FFFFFF);
}

.cnst__x:focus-visible {
  outline: 3px solid var(--cnst-focus, #FCC600);
  outline-offset: 3px;
}

/* ================================================================== *
 * One purpose, one switch, one sentence saying what it is FOR.
 * ================================================================== */
.cnst__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.cnst__row {
  margin: 0;
  padding: .75rem 0;
  border-top: 1px solid var(--cnst-rule, #1B57A8);
}

.cnst__row:last-child {
  border-bottom: 1px solid var(--cnst-rule, #1B57A8);
}

/* The label is the whole target, so the row itself clears 44px. The native
   checkbox stays in the DOM and keeps its own keyboard behaviour: the knob is
   painted over it rather than replacing it. */
.cnst__sw {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  cursor: pointer;
  font-weight: 600;
}

.cnst__sw--locked {
  cursor: default;
}

.cnst__knob {
  position: relative;
  flex: none;
  display: inline-block;
  width: 56px;
  height: 44px;
  border-radius: 3px;
}

.cnst__knob input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.cnst__knob i {
  position: absolute;
  top: 6px;
  left: 0;
  width: 56px;
  height: 32px;
  border-radius: 16px;
  background: var(--cnst-off-bg, #04122C);
  border: 2px solid var(--cnst-off-edge, #FFFFFF);
  transition: background .15s ease;
}

.cnst__knob i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cnst-off-dot, #FFFFFF);
  transition: transform .15s ease;
}

.cnst__knob input:checked + i {
  background: var(--cnst-on-bg, #1B57A8);
  border-color: var(--cnst-on-edge, #FCC600);
}

.cnst__knob input:checked + i::after {
  background: var(--cnst-on-dot, #FCC600);
  transform: translateX(28px);
}

.cnst__knob input:disabled + i {
  background: var(--cnst-lock-bg, #0E3574);
  border-color: var(--cnst-lock-edge, #9FBEDD);
}

.cnst__knob input:disabled + i::after {
  background: var(--cnst-lock-dot, #9FBEDD);
}

.cnst__knob input:focus-visible + i {
  outline: 3px solid var(--cnst-focus, #FCC600);
  outline-offset: 3px;
}

.cnst__why {
  margin: .35rem 0 0;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--cnst-fg, #FFFFFF);
}

/* A person who asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  .cnst__knob i,
  .cnst__knob i::after {
    transition: none;
  }
}

/* The card is a control, not content. It has no place on paper. */
@media print {
  .cnst-root,
  .cnst {
    display: none !important;
  }
}