/**
 * @file        consent.css
 * @description Consent banner (Story 6.1, C-18)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         7e12b58c-403d-4a96-81f7-29c6e0b4a537
 * @version     0.0.1.2
 * @created     2026-09-11
 * @updated     2026-09-12
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* Story 6.1 requires that the consent interface must NOT obstruct reading the
 * page. It is therefore a bottom bar, not a modal — no overlay, no scroll
 * lock, no focus trap. The page stays fully usable whether or not a choice is
 * made, which is also what keeps "ignore the banner" a legitimate outcome
 * rather than a dead end. */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  padding: var(--space-4);
  /* A top border rather than a shadow: DESIGN.md defines no shadow scale, and
   * inventing one here would be an undocumented token. */
  border-top: 1px solid var(--border-subtle);
}

.consent__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.consent__text {
  margin: 0;
  max-width: var(--measure);
}

/* On Deep Space only Cloud White and Golden Accent are permitted for text, so
 * links here are Cloud White plus an underline (DESIGN.md §2, rule 6). */
.consent__text a {
  color: var(--text-on-dark);
  text-decoration: underline;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

/* The decline button sits on a dark surface, where the light-surface secondary
 * treatment would be close to invisible. */
.consent .button--secondary {
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
  background: transparent;
}

.consent__current { font-size: var(--text-lg); }

/* Epic 8 put a SECOND decision on the persistent control page, and the second
   one sits low enough that the fixed banner above can land on top of it — the
   bar is `position: fixed` at `bottom: 0` with `z-index: 50`, so it covers
   whatever the page's last screenful contains.
 *
 * Found by an e2e click timing out on actionability rather than by reading the
 * CSS, and it is a real defect, not a test artefact: a visitor who has not yet
 * answered the banner and scrolls down to change their recirculation setting
 * meets the same obstruction. The banner's own comment promises it "must NOT
 * obstruct reading the page", and a control it covers is the strongest form of
 * that obstruction.
 *
 * Two rules, because the two failure modes are different. `scroll-margin-block-
 * end` governs where a programmatic or keyboard scroll-into-view STOPS, so a
 * control reached by Tab is never parked under the bar. `.consent-page`'s
 * bottom padding guarantees there is somewhere for it to stop — without it the
 * last element cannot be scrolled clear of a bar pinned to the bottom of the
 * viewport, because there is no page left to scroll. */
.consent__purpose {
  scroll-margin-block-end: 12rem;
}

.consent-page {
  padding-bottom: 12rem;
}

@media (min-width: 768px) {
  .consent__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}