/**
 * SimpleCMP — default theme as a standalone stylesheet (REQ-16 / ADR-0007).
 *
 * Most consumers don't need this file. Components in Shadow DOM mode
 * (the default) carry these rules inline via `static styles`, scoped
 * automatically. This file exists for two scenarios:
 *
 *   1. **Light DOM mode** (`<simplecmp-banner mode="light">`). Components
 *      render into the host's regular DOM where `static styles` don't
 *      apply, so the host page must `<link>` this file (or write its own).
 *
 *   2. **Server-rendered preview / no-JS fallback** where the component
 *      HTML is emitted server-side and styled before Lit hydrates.
 *
 * The selectors are scoped to the `simplecmp-*` tag names so the rules
 * never bleed onto unrelated host elements. Override any token at any
 * level — they cascade through the tag-name selectors:
 *
 *     simplecmp-banner { --simplecmp-color-primary: #ff6600; }
 *
 * The Bootstrap adapter in `bootstrap.css` is the canonical example.
 *
 * **Drift warning:** these rules duplicate the component `static styles`.
 * Keep them in sync when updating either side. Long-term, REQ-17 may
 * consolidate to a single source of truth.
 */

/* --- design tokens -------------------------------------------------- */

:where(
    simplecmp-banner,
    simplecmp-modal,
    simplecmp-purpose-group,
    simplecmp-service-toggle,
    simplecmp-trigger,
    simplecmp-policy-links,
    simplecmp-contextual-notice
  ) {
  --simplecmp-color-primary: #15775a;
  --simplecmp-color-primary-hover: #0f5d44;
  --simplecmp-color-secondary: #6c757d;
  --simplecmp-color-danger: #da2c43;
  --simplecmp-color-bg: #ffffff;
  --simplecmp-color-bg-alt: #f5f7f9;
  --simplecmp-color-border: #dde2e7;
  --simplecmp-color-text: #1a232c;
  --simplecmp-color-text-muted: #5f6b78;

  --simplecmp-radius: 6px;
  --simplecmp-spacing: 0.75rem;
  --simplecmp-spacing-sm: 0.5rem;
  --simplecmp-spacing-lg: 1.25rem;

  --simplecmp-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --simplecmp-font-family-heading: var(--simplecmp-font-family);
  --simplecmp-font-size: 0.95rem;
  --simplecmp-font-size-heading: 20px;
  --simplecmp-font-size-sm: 0.85rem;
  --simplecmp-line-height: 1.5;

  --simplecmp-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --simplecmp-z-index: 2147483000;

  color: var(--simplecmp-color-text);
  font-family: var(--simplecmp-font-family);
  font-size: var(--simplecmp-font-size);
  line-height: var(--simplecmp-line-height);
}

/* --- banner --------------------------------------------------------- */

simplecmp-banner {
  display: block;
  position: fixed;
  right: var(--simplecmp-spacing);
  bottom: var(--simplecmp-spacing);
  max-width: 30rem;
  z-index: var(--simplecmp-z-index);
}

simplecmp-banner[hidden] {
  display: none;
}

simplecmp-banner .cn-body {
  background: var(--simplecmp-color-bg);
  color: var(--simplecmp-color-text);
  border: 1px solid var(--simplecmp-color-border);
  border-radius: var(--simplecmp-radius);
  box-shadow: var(--simplecmp-shadow);
  padding: var(--simplecmp-spacing-lg);
}

simplecmp-banner h2 {
  margin: 0 0 var(--simplecmp-spacing) 0;
  font-size: 1.1rem;
}

simplecmp-banner p {
  margin: 0 0 var(--simplecmp-spacing) 0;
}

simplecmp-banner .cn-policy-links,
simplecmp-banner .cn-policy-links a {
  font-size: var(--simplecmp-font-size-sm);
  color: var(--simplecmp-color-text-muted);
}

simplecmp-banner .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--simplecmp-spacing-sm);
  margin-top: var(--simplecmp-spacing);
}

simplecmp-banner button {
  font: inherit;
  border: 1px solid transparent;
  border-radius: var(--simplecmp-radius);
  padding: var(--simplecmp-spacing-sm) var(--simplecmp-spacing);
  cursor: pointer;
}

simplecmp-banner button.cn-accept {
  background: var(--simplecmp-color-primary);
  color: white;
}

simplecmp-banner button.cn-accept:hover {
  background: var(--simplecmp-color-primary-hover);
}

simplecmp-banner button.cn-decline {
  background: transparent;
  color: var(--simplecmp-color-danger);
  border-color: var(--simplecmp-color-danger);
}

simplecmp-banner button.cn-configure {
  background: transparent;
  color: var(--simplecmp-color-text);
  border-color: var(--simplecmp-color-border);
}

simplecmp-banner a {
  color: var(--simplecmp-color-primary);
}

simplecmp-banner .cn-changes {
  font-size: var(--simplecmp-font-size-sm);
  font-style: italic;
  color: var(--simplecmp-color-text-muted);
}

/* --- modal ---------------------------------------------------------- */

simplecmp-modal {
  display: contents;
}

simplecmp-modal dialog {
  max-width: 40rem;
  width: 90%;
  border: 1px solid var(--simplecmp-color-border);
  border-radius: var(--simplecmp-radius);
  padding: 0;
  background: var(--simplecmp-color-bg);
  color: var(--simplecmp-color-text);
  font-family: var(--simplecmp-font-family);
  font-size: var(--simplecmp-font-size);
}

simplecmp-modal dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

simplecmp-modal .header,
simplecmp-modal .body,
simplecmp-modal .footer {
  padding: var(--simplecmp-spacing-lg);
}

simplecmp-modal .header {
  border-bottom: 1px solid var(--simplecmp-color-border);
  position: relative;
}

simplecmp-modal h1 {
  margin: 0 0 var(--simplecmp-spacing) 0;
  font-size: 1.25rem;
}

simplecmp-modal .description {
  margin: 0 0 var(--simplecmp-spacing) 0;
}

simplecmp-modal .policy-links,
simplecmp-modal .policy-links a {
  margin: 0;
  font-size: var(--simplecmp-font-size-sm);
  color: var(--simplecmp-color-text-muted);
}

simplecmp-modal .close {
  position: absolute;
  top: var(--simplecmp-spacing);
  right: var(--simplecmp-spacing);
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--simplecmp-color-text-muted);
}

simplecmp-modal .footer {
  border-top: 1px solid var(--simplecmp-color-border);
  display: flex;
  gap: var(--simplecmp-spacing-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

simplecmp-modal button.action {
  font: inherit;
  border: 1px solid transparent;
  border-radius: var(--simplecmp-radius);
  padding: var(--simplecmp-spacing-sm) var(--simplecmp-spacing);
  cursor: pointer;
}

simplecmp-modal button.accept-all,
simplecmp-modal button.save {
  background: var(--simplecmp-color-primary);
  color: white;
}

simplecmp-modal button.accept-all:hover,
simplecmp-modal button.save:hover {
  background: var(--simplecmp-color-primary-hover);
}

simplecmp-modal button.decline {
  background: transparent;
  color: var(--simplecmp-color-danger);
  border-color: var(--simplecmp-color-danger);
}

simplecmp-modal ul.services {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- purpose-group -------------------------------------------------- */

simplecmp-purpose-group {
  display: block;
  border: 1px solid var(--simplecmp-color-border);
  border-radius: var(--simplecmp-radius);
  padding: var(--simplecmp-spacing);
  margin-bottom: var(--simplecmp-spacing-sm);
}

simplecmp-purpose-group .header {
  display: flex;
  align-items: flex-start;
  gap: var(--simplecmp-spacing-sm);
}

simplecmp-purpose-group input[type="checkbox"] {
  margin-top: 0.25rem;
}

simplecmp-purpose-group .title {
  font-weight: 500;
}

simplecmp-purpose-group .description {
  margin: 0.25rem 0 0 0;
  font-size: var(--simplecmp-font-size-sm);
  color: var(--simplecmp-color-text-muted);
}

simplecmp-purpose-group .toggle-services {
  margin-top: var(--simplecmp-spacing-sm);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--simplecmp-font-size-sm);
  color: var(--simplecmp-color-primary);
  cursor: pointer;
}

simplecmp-purpose-group .services {
  margin-top: var(--simplecmp-spacing-sm);
  padding-left: var(--simplecmp-spacing-lg);
  border-left: 2px solid var(--simplecmp-color-border);
}

simplecmp-purpose-group .services[hidden] {
  display: none;
}

/* --- service-toggle ------------------------------------------------- */

simplecmp-service-toggle {
  display: block;
  margin: var(--simplecmp-spacing-sm) 0;
}

simplecmp-service-toggle .row {
  display: flex;
  align-items: flex-start;
  gap: var(--simplecmp-spacing-sm);
}

simplecmp-service-toggle input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

simplecmp-service-toggle .meta {
  flex: 1;
}

simplecmp-service-toggle .title {
  font-weight: 500;
}

simplecmp-service-toggle .badge {
  display: inline-block;
  margin-left: var(--simplecmp-spacing-sm);
  padding: 0 0.4rem;
  font-size: var(--simplecmp-font-size-sm);
  background: var(--simplecmp-color-bg-alt);
  border-radius: var(--simplecmp-radius);
  color: var(--simplecmp-color-text-muted);
}

simplecmp-service-toggle .description,
simplecmp-service-toggle .purposes {
  margin: 0.25rem 0 0 0;
  font-size: var(--simplecmp-font-size-sm);
  color: var(--simplecmp-color-text-muted);
}

/* --- trigger -------------------------------------------------------- */

simplecmp-trigger {
  display: contents;
}

simplecmp-trigger button {
  position: fixed;
  z-index: var(--simplecmp-z-index);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--simplecmp-color-primary);
  color: white;
  border: none;
  box-shadow: var(--simplecmp-shadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

simplecmp-trigger button:hover {
  background: var(--simplecmp-color-primary-hover);
}

simplecmp-trigger[position="bottom-right"] button {
  right: var(--simplecmp-spacing);
  bottom: var(--simplecmp-spacing);
}

simplecmp-trigger[position="bottom-left"] button {
  left: var(--simplecmp-spacing);
  bottom: var(--simplecmp-spacing);
}

simplecmp-trigger[position="top-right"] button {
  right: var(--simplecmp-spacing);
  top: var(--simplecmp-spacing);
}

simplecmp-trigger[position="top-left"] button {
  left: var(--simplecmp-spacing);
  top: var(--simplecmp-spacing);
}

simplecmp-trigger svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* --- policy-links --------------------------------------------------- */

simplecmp-policy-links {
  display: inline;
  font-size: var(--simplecmp-font-size-sm);
  color: var(--simplecmp-color-text-muted);
}

simplecmp-policy-links a {
  color: var(--simplecmp-color-text-muted);
}

/* --- contextual-notice --------------------------------------------- */

simplecmp-contextual-notice {
  display: block;
  padding: var(--simplecmp-spacing-lg);
  background: var(--simplecmp-color-bg-alt);
  border: 1px solid var(--simplecmp-color-border);
  border-radius: var(--simplecmp-radius);
  color: var(--simplecmp-color-text);
}

simplecmp-contextual-notice p {
  margin: 0 0 var(--simplecmp-spacing) 0;
}

simplecmp-contextual-notice .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--simplecmp-spacing-sm);
}

simplecmp-contextual-notice button {
  font: inherit;
  border: 1px solid transparent;
  border-radius: var(--simplecmp-radius);
  padding: var(--simplecmp-spacing-sm) var(--simplecmp-spacing);
  cursor: pointer;
}

simplecmp-contextual-notice button.accept {
  background: var(--simplecmp-color-primary);
  color: white;
}

simplecmp-contextual-notice button.accept:hover {
  background: var(--simplecmp-color-primary-hover);
}

simplecmp-contextual-notice button.accept-once {
  background: transparent;
  color: var(--simplecmp-color-primary);
  border-color: var(--simplecmp-color-primary);
}

simplecmp-contextual-notice button.configure {
  background: transparent;
  color: var(--simplecmp-color-text);
  border-color: var(--simplecmp-color-border);
}