/**
 * consent.css: the cookie banner, the choices dialog and the footer's "Privacy choices" button (ACT-280). Behaviour is
 * public/js/consent.js. Built from the design system: a white card with a 1px line ring instead of a shadow, a 24px corner
 * (--act-radius-card), pill buttons that hover ink to ember, Archivo throughout. Accept and Reject are the SAME class
 * (.is-solid), so neither is larger, bolder or a different colour. Only transform and opacity move, over the Settle curve;
 * reduced motion shows the finished state. Sizes the tokens do not name are in rem so design-token-check stays quiet.
 */

.act-cs, .act-cs-panel, .act-cs-toast { font-family: var(--act-font-display); color: var(--act-ink); }
.act-cs a, .act-cs-panel a { color: var(--act-ember-text); text-decoration: underline; text-underline-offset: .2rem; }
.act-cs :focus-visible, .act-cs-panel :focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }
.act-cs .act-cs-title:focus-visible, .act-cs-panel .act-cs-title:focus-visible { outline: none; }

/* the banner: a card at the bottom left on a wide screen, the full width less a margin on a phone; it does not cover the page */
.act-cs { position: fixed; z-index: 80; left: 1.5rem; bottom: 1.5rem; width: min(26.25rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); overflow-y: auto; background: var(--act-white); border-radius: var(--act-radius-card); box-shadow: 0 0 0 .0625rem var(--act-line); padding: 1.5rem; opacity: 0; transform: translateY(.75rem); transition: opacity .4s var(--act-ease-settle), transform .6s var(--act-ease-settle); }
.act-cs.is-in { opacity: 1; transform: none; }
.act-cs-title { margin: 0 2rem .5rem 0; font-size: 1.375rem; font-weight: var(--act-weight-display); letter-spacing: var(--act-track-card); line-height: 1.1; outline: none; }
.act-cs-text { margin: 0 0 1.25rem; font-size: var(--act-small); line-height: 1.55; color: var(--act-body); }
.act-cs-error { margin: 0 0 1rem; font-size: var(--act-small); line-height: 1.5; color: var(--act-was-fg); background: var(--act-was-bg); border-radius: .75rem; padding: .625rem .875rem; }
.act-cs-error[hidden] { display: none; }

.act-cs-actions { display: flex; flex-direction: column; gap: .625rem; }
.act-cs-actions.is-row { flex-direction: row; flex-wrap: wrap; }
.act-cs-actions.is-row .act-cs-btn { flex: 1 1 8rem; }
.act-cs-btn { height: 2.75rem; min-width: 2.75rem; padding: 0 1.25rem; border-radius: var(--act-radius-pill); font: inherit; font-size: .9375rem; font-weight: var(--act-weight-strong); cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.act-cs-btn.is-solid { background: var(--act-button-primary-bg); color: var(--act-button-primary-fg); border: .0625rem solid var(--act-button-primary-bg); }
.act-cs-btn.is-solid:hover:not(:disabled) { background: var(--act-button-primary-hover-bg); color: var(--act-button-primary-hover-fg); border-color: var(--act-button-primary-hover-bg); }
.act-cs-btn.is-line { background: transparent; color: var(--act-ink); border: .0625rem solid var(--act-outline); }
.act-cs-btn.is-line:hover:not(:disabled) { border-color: var(--act-ink); }
.act-cs-btn:disabled { opacity: .6; cursor: default; }

.act-cs-x { position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--act-radius-pill); background: transparent; color: var(--act-muted); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.act-cs-x:hover { background: var(--act-paper); color: var(--act-ink); }

/* the choices dialog: a scrim and a panel; the page behind does not scroll while it is open */
.act-cs-scrim { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--act-ink) 50%, transparent); overflow-y: auto; opacity: 0; transition: opacity .3s ease; }
.act-cs-scrim.is-in { opacity: 1; }
.act-cs-panel { position: relative; width: min(35rem, 100%); max-height: calc(100svh - 2rem); overflow-y: auto; background: var(--act-white); border-radius: var(--act-radius-card); padding: 1.75rem; margin: auto; }
.act-cs-panel .act-cs-title { margin-bottom: .625rem; }
.act-cs-rows { margin: 0 0 1.25rem; border-top: .0625rem solid var(--act-line); }
.act-cs-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: .0625rem solid var(--act-line); }
.act-cs-row b { display: block; font-size: 1rem; font-weight: var(--act-weight-strong); }
.act-cs-row span { display: block; margin-top: .25rem; font-size: var(--act-small); line-height: 1.5; color: var(--act-body); }
.act-cs-row span.act-cs-fixed { flex: none; margin: 0; padding: .25rem .75rem; border-radius: var(--act-radius-pill); background: var(--act-paper); font-size: var(--act-micro); font-weight: var(--act-weight-strong); color: var(--act-muted); }
.act-cs-row input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: .125rem 0 0; accent-color: var(--act-ink); cursor: pointer; }
label.act-cs-row { cursor: pointer; }

.act-cs-toast { position: fixed; z-index: 85; left: 1.5rem; bottom: 1.5rem; max-width: calc(100vw - 2rem); background: var(--act-ink); color: var(--act-paper); border-radius: var(--act-radius-pill); padding: .75rem 1.25rem; font-size: var(--act-small); opacity: 0; transform: translateY(.5rem); transition: opacity .3s ease, transform .5s var(--act-ease-settle); pointer-events: none; }
.act-cs-toast.is-in { opacity: 1; transform: none; }

/* the footer button looks like the footer's links */
.am-foot-cols .am-foot-choices { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.am-footer .am-foot-choices:hover { color: var(--act-ember-text); }
.am-footer .am-foot-choices:focus-visible { outline: 2px solid var(--act-ember-text); outline-offset: 3px; }
html:not(.js) .am-foot-choices { display: none; }

@media (max-width: 40rem) {
  .act-cs { left: 1rem; right: 1rem; bottom: 1rem; width: auto; padding: 1.25rem; }
  .act-cs-toast { left: 1rem; bottom: 1rem; }
  .act-cs-panel { padding: 1.25rem; }
  .act-cs-actions.is-row .act-cs-btn { flex-basis: 100%; }
  .am-footer .am-foot-cols .am-foot-choices { display: flex; align-items: center; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .act-cs, .act-cs-scrim, .act-cs-toast, .act-cs-btn { transition: none; }
  .act-cs { opacity: 1; transform: none; }
}