/*
 * Lev Credit — Consent Management Platform (CMP): first-visit consent banner
 * + preferences modal. Presentation only (HTML/CSS/Alpine); no model, view or
 * Python. Paired with templates/cmp/banner.html.
 *
 * TOKENS ONLY. Every colour, radius, spacing, type-step, shadow and motion value
 * is a var(--lc-…) from the canonical token stylesheet (static/css/tokens.css) —
 * NO hex literal and NO magic px appears here (the AMD-002/AMD-003 build gate,
 * apps/backoffice/tests/test_branding.py, fails on any). The banner and modal
 * stack at var(--lc-z-cmp) so the consent surface is never obscured (AMD-001).
 *
 * Surface-scoped contrast (AMD-003): the primary "Accept all" action and the
 * "on" toggle use the BRIGHT brand fills with WHITE text (--lc-on-brand) — the
 * owner-accepted internal exception, the only sub-AA pairings the gate allows.
 * Every other text/fill pairing here meets WCAG AA (ink on light surfaces,
 * --lc-link for links, white on --lc-error for the destructive withdraw action).
 * The disabled "essential" toggle is exempt (WCAG 1.4.3 exempts disabled UI).
 */

/* ====================================================================== *
 *  Root — the HTMX swap target. Hosts both the banner bar and the modal.
 * ====================================================================== */
#lc-cmp-banner {
  font-size: var(--lc-text-base);
  line-height: 1.5;
  color: var(--lc-grey-900);
}

/* Alpine: keep the controlled regions hidden until Alpine initialises so there
 * is no flash of un-gated content before x-show evaluates. */
[x-cloak] {
  display: none !important;
}

/* ====================================================================== *
 *  First-visit banner — a fixed bar pinned to the bottom of the viewport.
 * ====================================================================== */
.lc-cmp-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--lc-z-cmp);
  background: var(--lc-white);
  color: var(--lc-grey-900);
  border-top: var(--lc-border-width) solid var(--lc-grey-300);
  box-shadow: var(--lc-shadow-lg);
  padding: var(--lc-space-5);
}

.lc-cmp-bar__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-4);
}

.lc-cmp-bar__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lc-space-4);
  flex-wrap: wrap;
}

.lc-cmp-bar__copy {
  flex: 1 1 24rem;
  min-width: 0;
}

.lc-cmp__title {
  margin: 0 0 var(--lc-space-2);
  font-size: var(--lc-text-base);
  font-weight: var(--lc-weight-bold);
  color: var(--lc-grey-900);
}

.lc-cmp__lede {
  margin: 0;
  color: var(--lc-grey-700);
}

/* The four named categories, shown inline on the bar as quiet, scannable chips. */
.lc-cmp__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lc-cmp__category {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-space-1);
  padding: var(--lc-space-1) var(--lc-space-3);
  font-size: var(--lc-text-sm);
  color: var(--lc-grey-700);
  background: var(--lc-cream);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-pill);
}
.lc-cmp__category-lock {
  font-size: var(--lc-text-xs);
  color: var(--lc-grey-500);
}

/* Action row — Accept / Reject / Manage. Wraps gracefully on narrow viewports. */
.lc-cmp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-3);
}
.lc-cmp__actions--bar {
  justify-content: flex-end;
}

/* ====================================================================== *
 *  Buttons — shared affordance: rounded, ≥44px hit target (ADR 0186), bold, focusable.
 * ====================================================================== */
.lc-cmp__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-2);
  min-height: var(--lc-hit-target);
  padding: var(--lc-space-2) var(--lc-space-5);
  font: inherit;
  font-weight: var(--lc-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: var(--lc-border-width) solid transparent;
  border-radius: var(--lc-radius-md);
  cursor: pointer;
  transition: background-color var(--lc-motion-fast) var(--lc-ease),
              border-color var(--lc-motion-fast) var(--lc-ease),
              box-shadow var(--lc-motion-fast) var(--lc-ease);
}
.lc-cmp__btn:hover {
  box-shadow: var(--lc-shadow-sm);
}
.lc-cmp__btn:active {
  box-shadow: none;
}

/* Visible focus ring on every interactive element (AMD-003 §1/§4). */
.lc-cmp__btn:focus-visible,
.lc-cmp__toggle__input:focus-visible + .lc-cmp__toggle__track,
.lc-cmp__lang-btn:focus-visible,
.lc-cmp__icon-btn:focus-visible {
  outline: var(--lc-focus-ring-width) solid var(--lc-focus-ring-color);
  outline-offset: var(--lc-focus-ring-offset);
}

/* Primary — "Accept all": bright brand-primary fill + WHITE text (the
 * owner-accepted internal exception; the only sub-AA pairing the gate allows). */
.lc-cmp__btn--primary {
  background: var(--lc-brand-primary);
  color: var(--lc-on-brand);
}
.lc-cmp__btn--primary:hover {
  background: var(--lc-brand-primary-hover);
}

/* Secondary — "Reject non-essential" / "Save preferences": ink on a light
 * surface with a defined border (AA). Quiet but clearly a button. */
.lc-cmp__btn--secondary {
  background: var(--lc-white);
  color: var(--lc-grey-900);
  border-color: var(--lc-grey-300);
}
.lc-cmp__btn--secondary:hover {
  background: var(--lc-cream);
  border-color: var(--lc-grey-500);
}

/* Tertiary — "Manage preferences": text-style link button, no fill. */
.lc-cmp__btn--tertiary {
  background: transparent;
  color: var(--lc-link);
  padding-inline: var(--lc-space-3);
}
.lc-cmp__btn--tertiary:hover {
  color: var(--lc-link-hover);
  background: var(--lc-brand-secondary-soft);
}

/* Destructive — "Withdraw consent": white on error red (4.77:1, AA per the
 * contract test). Visually distinct from the primary action. */
.lc-cmp__btn--danger {
  background: var(--lc-error);
  color: var(--lc-white);
}
.lc-cmp__btn--danger:hover {
  background: var(--lc-error);
  box-shadow: var(--lc-shadow-md);
}

/* ====================================================================== *
 *  Preferences modal — centered dialog over a dimmed backdrop.
 * ====================================================================== */
.lc-cmp__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--lc-z-cmp);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lc-space-4);
  background: rgba(var(--lc-shadow-color-rgb), 0.55);
  overflow-y: auto;
}

.lc-cmp__dialog {
  width: 100%;
  max-width: 40rem;
  max-height: calc(100vh - var(--lc-space-8));
  display: flex;
  flex-direction: column;
  background: var(--lc-white);
  color: var(--lc-grey-900);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-lg);
  overflow: hidden;
}

.lc-cmp__dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lc-space-4);
  padding: var(--lc-space-5);
  border-bottom: var(--lc-border-width) solid var(--lc-grey-300);
}
.lc-cmp__dialog-head .lc-cmp__title {
  margin: 0;
  font-size: var(--lc-text-base);
}

/* DP1 (ADR 0191): a flex-column child refuses to shrink below its content
 * without min-height: 0 even when its descendant scrolls - and the dialog's
 * flex child is not the body but the FORM that wraps it, so the body's own
 * scroll never engaged: the form kept its full height, pushed the foot past
 * the dialog's max-height, and the save button's glyphs were CUT at the
 * dialog edge at 390 (seen in the shot, not inferred). The form becomes the
 * shrinking column and the body scrolls inside it. */
.lc-cmp__dialog > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.lc-cmp__dialog-body {
  padding: var(--lc-space-5);
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.lc-cmp__dialog-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-3);
  justify-content: space-between;
  padding: var(--lc-space-5);
  border-top: var(--lc-border-width) solid var(--lc-grey-300);
  background: var(--lc-cream);
  /* ADR 0191 (DP1/A2): the foot is a flex child of the clipped dialog and
     shrank when the dialog hit its max-height at a small viewport - the save
     button's glyphs were cut at the dialog's bottom edge at 390. The BODY is
     the scrolling part; the action bar never gives way. */
  flex-shrink: 0;
}
.lc-cmp__dialog-foot-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-3);
}

/* Close (×) icon button — ink glyph, comfortable hit target. */
.lc-cmp__icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--lc-hit-target);
  height: var(--lc-hit-target);
  font-size: var(--lc-text-base);
  line-height: 1;
  color: var(--lc-grey-700);
  background: transparent;
  border: var(--lc-border-width) solid transparent;
  border-radius: var(--lc-radius-sm);
  cursor: pointer;
}
.lc-cmp__icon-btn:hover {
  background: var(--lc-grey-100);
  color: var(--lc-grey-900);
}

/* ====================================================================== *
 *  Category rows (modal) — label + description on the left, toggle on right.
 * ====================================================================== */
.lc-cmp__rows {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-3);
}
.lc-cmp__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lc-space-4);
  padding: var(--lc-space-4);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  background: var(--lc-white);
}
.lc-cmp__row-text {
  flex: 1 1 auto;
  min-width: 0;
}
.lc-cmp__row-name {
  margin: 0 0 var(--lc-space-1);
  font-weight: var(--lc-weight-semibold);
  color: var(--lc-grey-900);
}
.lc-cmp__row-desc {
  margin: 0;
  font-size: var(--lc-text-sm);
  color: var(--lc-grey-700);
}
.lc-cmp__row-locked {
  display: inline-block;
  margin-top: var(--lc-space-1);
  font-size: var(--lc-text-xs);
  font-weight: var(--lc-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lc-grey-500);
}

/* ====================================================================== *
 *  Toggle switch — a real <input type="checkbox"> styled as a switch.
 *  The native input is visually hidden but focusable and in the tab order;
 *  the track is the rendered control. Submitted by HTMX when checked.
 * ====================================================================== */
.lc-cmp__toggle {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lc-cmp__toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.lc-cmp__toggle__track {
  display: inline-flex;
  align-items: center;
  width: var(--lc-space-10);
  min-width: var(--lc-space-10);
  height: var(--lc-space-6);
  padding: var(--lc-space-1);
  background: var(--lc-grey-300);
  border: var(--lc-border-width) solid var(--lc-grey-500);
  border-radius: var(--lc-radius-pill);
  cursor: pointer;
  transition: background-color var(--lc-motion-base) var(--lc-ease),
              border-color var(--lc-motion-base) var(--lc-ease);
}
.lc-cmp__toggle__thumb {
  width: var(--lc-space-4);
  height: var(--lc-space-4);
  background: var(--lc-white);
  border-radius: var(--lc-radius-pill);
  box-shadow: var(--lc-shadow-sm);
  transition: transform var(--lc-motion-base) var(--lc-ease);
}
/* On — slide the thumb and fill with the brand-secondary blue (white thumb on
 * blue is the allowlisted internal pairing; the thumb is decorative). */
.lc-cmp__toggle__input:checked + .lc-cmp__toggle__track {
  background: var(--lc-brand-secondary);
  border: var(--lc-border-width) solid var(--lc-brand-secondary);
}
.lc-cmp__toggle__input:checked + .lc-cmp__toggle__track .lc-cmp__toggle__thumb {
  transform: translateX(var(--lc-space-5));
}
/* Locked "essential" toggle — always on, not operable (WCAG exempts disabled). */
.lc-cmp__toggle__input:disabled + .lc-cmp__toggle__track {
  cursor: not-allowed;
  opacity: 0.7;
}

/* ====================================================================== *
 *  Language toggle (BG default / EN) — a small two-state segmented control.
 * ====================================================================== */
.lc-cmp__lang {
  display: inline-flex;
  gap: var(--lc-space-1);
  padding: var(--lc-space-1);
  background: var(--lc-grey-100);
  border-radius: var(--lc-radius-pill);
}
.lc-cmp__lang-btn {
  min-height: var(--lc-hit-target);
  min-width: var(--lc-hit-target);
  padding: var(--lc-space-1) var(--lc-space-3);
  font: inherit;
  font-size: var(--lc-text-sm);
  font-weight: var(--lc-weight-semibold);
  color: var(--lc-grey-700);
  background: transparent;
  border: var(--lc-border-width) solid transparent;
  border-radius: var(--lc-radius-pill);
  cursor: pointer;
}
.lc-cmp__lang-btn:hover {
  color: var(--lc-grey-900);
}
/* Active language — ink text on the white surface (AA), with a soft outline. */
.lc-cmp__lang-btn[aria-pressed="true"] {
  color: var(--lc-grey-900);
  background: var(--lc-white);
  border-color: var(--lc-grey-300);
  box-shadow: var(--lc-shadow-sm);
}

/* ====================================================================== *
 *  Responsive — stack the bar's actions full-width on narrow viewports.
 *  40rem = the canonical `sm` step (ADR 0108 breakpoint scale, tokens.css).
 * ====================================================================== */
@media (max-width: 40rem) {
  .lc-cmp__actions--bar {
    justify-content: stretch;
  }
  .lc-cmp__actions--bar .lc-cmp__btn {
    flex: 1 1 100%;
  }
  .lc-cmp__dialog-foot,
  .lc-cmp__dialog-foot-group {
    flex-direction: column;
  }
  .lc-cmp__dialog-foot .lc-cmp__btn {
    width: 100%;
  }
}

/* ====================================================================== *
 *  Motion (AMD-003 §5) — honour prefers-reduced-motion: no transitions.
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lc-cmp__btn,
  .lc-cmp__toggle__track,
  .lc-cmp__toggle__thumb,
  .lc-cmp__icon-btn {
    transition: none;
  }
}

/* ====================================================================== *
 *  THE HIT-TARGET LAW — the consent banner (ADR 0186, owner item 3)
 *
 *  The CMP rides EVERY page on every surface, so its controls are the most
 *  widely rendered in the system. Its buttons already sat on the floor token
 *  and moved with it; the two that could not are here. The consent TOGGLE is
 *  the sharpest case in the codebase: the input is a 1px visually-hidden box
 *  and the whole target is the label's track, so the track IS the control and
 *  carries the floor. The switch keeps its 32px painted height - a taller
 *  track would read as a different control - and reaches the floor through
 *  its own padding, which is what "padding counts" means.
 * ====================================================================== */
.lc-cmp__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--lc-hit-target);
}
.lc-cmp__lang { gap: var(--lc-target-gap); }