/*
 * Cookie-consent banner styles. Served from public/ (NOT bundled by Vite) and linked from the
 * document head ONLY on builds where analytics is active (the `analytics` flag on AND a
 * measurement id configured), so it never touches the live document while analytics is off.
 * Same-origin, so it is inside the site CSP (default-src 'self', style-src 'self').
 *
 * Brand: "Abyss & Brass" - deep navy surface, ivory text, brass outline.
 * Equal-weight consent (legal review 2026-10-13 items B5/B7): Accept, Reject and Settings are
 * IDENTICAL in size, colour, weight and font, as are the panel's Save choices / Accept all /
 * Reject all. ONE button style, no filled-Accept vs ghost-Reject dark pattern. 16px type floor,
 * WCAG AA contrast on the deep surface, works at phone width.
 */
.dt-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--dt-deep);
  color: var(--dt-ivory);
  border-top: 1px solid var(--dt-brass);
  box-shadow: 0 -8px 30px rgba(6, 10, 30, 0.45);
  padding: 12px var(--dt-pad-x);
}

.dt-consent[hidden] {
  display: none;
}

.dt-consent-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.dt-consent-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
  flex-wrap: wrap;
}

.dt-consent-bar[hidden] {
  display: none;
}

.dt-consent-text {
  margin: 0;
  flex: 1 1 320px;
  max-width: 110ch;
  font-size: var(--dt-text-body); /* 16px type floor: never below in the banner */
  line-height: 1.45;
  color: var(--dt-ivory-85);
}

.dt-consent-text a,
.dt-consent-detail a {
  color: var(--dt-brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dt-consent-detail { margin: 0 0 8px; font-size: var(--dt-text-body); line-height: 1.45; color: var(--dt-ivory-85); max-width: 78ch; }

.dt-consent-text a:hover,
.dt-consent-detail a:hover,
.dt-consent-text a:focus-visible,
.dt-consent-detail a:focus-visible {
  color: var(--dt-ivory);
}

.dt-consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.dt-consent-actions-panel {
  margin-top: 20px;
  justify-content: flex-end;
}

/* ONE button style for every consent button: identical background, colour, font, weight and box
   size. No primary/secondary split (no dark pattern). Ivory text on the brass-tinted surface is
   high contrast on the deep navy (AA pass). */
.dt-consent-btn {
  font-family: var(--dt-sans);
  font-size: var(--dt-text-body); /* 16px */
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 9px 20px;
  min-height: 44px; /* WCAG 2.2 AAA target size; AA needs 24px */
  border-radius: 2px;
  cursor: pointer;
  min-width: 104px;
  text-align: center;
  border: 1px solid var(--dt-brass);
  background: rgba(194, 168, 120, 0.14);
  color: var(--dt-ivory);
  transition: background 0.15s ease;
}

.dt-consent-btn:hover {
  background: rgba(194, 168, 120, 0.28);
}

.dt-consent-btn:focus-visible {
  outline: 2px solid var(--dt-ivory);
  outline-offset: 2px;
}

/* Settings panel. */
.dt-consent-panel {
  padding-top: 4px;
}

.dt-consent-panel[hidden] {
  display: none;
}

.dt-consent-panel-title {
  margin: 0 0 16px;
  font-family: var(--dt-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--dt-ivory);
}

.dt-consent-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--dt-ivory-25);
}

.dt-consent-rowtext {
  display: block;
  font-size: var(--dt-text-body);
  line-height: 1.55;
  color: var(--dt-ivory-85);
  max-width: 78ch;
}

.dt-consent-rowtext strong {
  color: var(--dt-ivory);
  font-weight: 600;
}

.dt-consent-toggle {
  display: inline-flex;
  align-items: flex-start;
  flex: 0 0 auto;
}

.dt-consent-toggle input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: var(--dt-brass);
  cursor: pointer;
}

.dt-consent-toggle input[type='checkbox']:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.dt-consent-toggle input[type='checkbox']:focus-visible {
  outline: 2px solid var(--dt-ivory);
  outline-offset: 2px;
}

/* Phones: keep the banner short. Text stays at the 16px floor; spacing, line height and button
   padding shrink, the three buttons share ONE row (still identical), and the panel keeps each
   toggle beside its text and scrolls inside itself if it ever gets taller than the screen. */
@media (max-width: 640px) {
  .dt-consent {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    max-height: 85vh;
    overflow-y: auto;
  }
  .dt-consent-bar {
    gap: 8px;
  }
  .dt-consent-text,
  .dt-consent-rowtext {
    line-height: 1.35;
  }
  .dt-consent-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .dt-consent-actions-panel {
    margin-top: 10px;
  }
  .dt-consent-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    letter-spacing: 0.01em;
  }
  .dt-consent-panel-title {
    margin-bottom: 8px;
  }
  .dt-consent-row {
    gap: 12px;
    padding: 10px 0;
  }
}