/* ============================================================================
 * sidq-consent.css — consent banner. Brand tokens (plum ground, peach accent,
 * Spectral display, Inter body, IBM Plex Mono labels) with hard fallbacks, since
 * the banner must look right on every page whether or not that page defines the
 * theme tokens.
 *
 * COMPLIANCE NOTE ON STYLING: "Reject all" and "Accept all" are the SAME size,
 * weight and contrast class. Reject is not greyed, not a text link, and not
 * hidden behind a second screen. Only the accent fill differs, and it sits on
 * the rightmost button purely for reading order. Changing this file can create
 * a dark pattern — keep the two actions visually equal.
 * ========================================================================== */

.sidq-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex; justify-content: center;
  padding: clamp(10px, 2vw, 20px);
  pointer-events: none;
}

.sidq-consent .sqc-panel {
  pointer-events: auto;
  width: 100%;
  max-width: 680px;
  background: var(--t-bg2, #1C1129);
  color: var(--t-text, #F6EFE6);
  border: 1px solid var(--t-line, rgba(201, 179, 232, .22));
  border-radius: 12px;
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, .7);
  padding: clamp(16px, 2.6vw, 22px);
  font-family: var(--f-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  animation: sqc-rise .26s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes sqc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sidq-consent .sqc-panel { animation: none; }
}

.sidq-consent .sqc-title {
  margin: 0 0 8px;
  font-family: var(--f-display, 'Spectral', Georgia, serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--t-text, #F6EFE6);
}

.sidq-consent .sqc-body {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-text2, #C9B3E8);
  max-width: 62ch;
}

/* ---- purpose toggles. NEVER ship these pre-checked: a pre-ticked box is not
       consent (GDPR Art 4(11), recital 32). The markup sets checked only when
       reopening with an existing grant. ---- */
.sidq-consent .sqc-opts {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 16px;
}
.sidq-consent .sqc-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--t-line, rgba(201, 179, 232, .16));
  border-radius: 8px;
  background: var(--t-card, rgba(255, 255, 255, .04));
  cursor: pointer;
}
.sidq-consent .sqc-opt:hover { border-color: var(--t-accent, #F4C9A0); }
.sidq-consent .sqc-opt input {
  margin: 2px 0 0;
  width: 17px; height: 17px;
  accent-color: var(--t-accent, #F4C9A0);
  flex: 0 0 auto;
  cursor: pointer;
}
.sidq-consent .sqc-opt span { display: flex; flex-direction: column; gap: 2px; }
.sidq-consent .sqc-opt b {
  font-size: 13.5px; font-weight: 650;
  color: var(--t-text, #F6EFE6);
}
.sidq-consent .sqc-opt em {
  font-style: normal;
  font-size: 12.5px; line-height: 1.5;
  color: var(--t-textdim, #8E7CA8);
}

/* ---- actions: equal weight by design ---- */
.sidq-consent .sqc-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sidq-consent .sqc-btn {
  flex: 1 1 auto;
  min-width: 128px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--t-text, #F6EFE6);
  background: transparent;
  border: 1px solid var(--t-accent, #F4C9A0);
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.sidq-consent .sqc-btn:hover {
  background: color-mix(in srgb, var(--t-accent, #F4C9A0) 16%, transparent);
}
/* "Reject all" and "Accept all" are BOTH filled, identically weighted. Giving
   only Accept a solid fill is a nudge, and regulators have called it out. If you
   restyle this, keep the two decisive actions visually equal. "Save choices" is
   the quieter outlined one because it is a secondary refinement, not a third
   competing answer. */
.sidq-consent .sqc-btn.sqc-reject,
.sidq-consent .sqc-btn.sqc-accept {
  background: var(--t-accent, #F4C9A0);
  color: var(--t-onaccent, #2A1B3A);
}
.sidq-consent .sqc-btn.sqc-reject:hover,
.sidq-consent .sqc-btn.sqc-accept:hover {
  background: var(--t-accentdeep, #E8B98A);
}
.sidq-consent .sqc-btn:focus-visible {
  outline: 2px solid var(--t-text, #F6EFE6);
  outline-offset: 2px;
}

.sidq-consent .sqc-links {
  margin: 12px 0 0;
  font-family: var(--f-label, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11.5px;
  letter-spacing: .02em;
}
.sidq-consent .sqc-links a {
  color: var(--t-textdim, #8E7CA8);
  text-underline-offset: 2px;
}
.sidq-consent .sqc-links a:hover { color: var(--t-accent, #F4C9A0); }

/* Light-ground pages (time-of-day dawn/clouds/leaves) already re-point the
   tokens, so the panel follows automatically. This only fixes the shadow. */
html[data-sidq-tod="dawn"]   .sidq-consent .sqc-panel,
html[data-sidq-tod="clouds"] .sidq-consent .sqc-panel,
html[data-sidq-tod="leaves"] .sidq-consent .sqc-panel {
  box-shadow: 0 20px 50px -26px rgba(42, 34, 48, .45);
}

@media (max-width: 520px) {
  .sidq-consent { padding: 0; }
  .sidq-consent .sqc-panel { border-radius: 12px 12px 0 0; border-bottom: 0; }
  .sidq-consent .sqc-btn { flex: 1 1 100%; }
}