/* Smart Sifty - cookie consent banner, preferences dialog and "Cookie settings" link
   (markup built by assets/consent.js). Loaded after site.css on every document; tokens only,
   so both themes follow the site. */

@layer components {
  /* Banner: fixed to the bottom edge, never over the header */
  .cc-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    max-height: min(70dvh, 520px);
    overflow: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    color: var(--ink-2);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -18px 40px -24px var(--shadow-c2);
    transition: translate var(--dur-2) var(--ease-out), opacity var(--dur-2);
  }
  @starting-style { .cc-banner { translate: 0 100%; opacity: 0; } }
  .cc-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-block: var(--space-4);
  }
  .cc-banner__copy { flex: 1 1 30rem; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3); }
  .cc-banner__icon { width: 20px; height: 20px; margin-top: 2px; color: var(--accent-text); }
  .cc-banner__text { font-size: var(--step--1); line-height: 1.55; color: var(--ink-2); max-width: 92ch; }
  .cc-banner__actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  @media (width < 640px) {
    .cc-banner__inner { gap: var(--space-3); padding-block: var(--space-3) var(--space-4); }
    .cc-banner__actions { width: 100%; }
    .cc-banner__actions .btn { flex: 1 1 auto; }
  }
  /* While the banner is up, the page ends above it (consent.js keeps --cc-h in sync) */
  html.cc-open body { padding-bottom: var(--cc-h, 0px); }

  .cc-banner code, .cc-dialog code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--accent-text);
    overflow-wrap: anywhere;
  }

  /* Preferences dialog (modal <dialog>) */
  html:has(.cc-dialog[open]) { overflow: hidden; }
  .cc-dialog {
    width: min(34rem, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: var(--shadow-3);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .cc-dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .cc-dialog__panel { display: grid; gap: var(--space-5); padding: clamp(20px, 4vw, 32px); }
  .cc-dialog__head { display: flex; align-items: center; gap: var(--space-3); }
  .cc-dialog__badge {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent-text);
  }
  .cc-dialog__badge svg { width: 20px; height: 20px; }
  .cc-dialog__title { flex: 1; font: 700 var(--step-1)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
  .cc-dialog__close { flex: none; }

  .cc-cards { display: grid; gap: var(--space-3); }
  .cc-card {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-2);
  }
  .cc-card--toggle { display: flex; align-items: flex-start; gap: var(--space-3); border-color: var(--line-strong); cursor: pointer; }
  .cc-card--toggle:hover { border-color: var(--accent); }
  .cc-card--toggle input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
  .cc-card__body { display: block; min-width: 0; }
  .cc-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
  .cc-card__title { display: block; font: 650 0.95rem/1.35 var(--font-display); color: var(--ink); }
  .cc-card__badge { font: 600 0.68rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); white-space: nowrap; }
  .cc-card__text { display: block; margin-top: var(--space-1); font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); }
  .cc-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
  @media (width < 480px) { .cc-dialog__actions .btn { flex: 1 1 auto; } }

  /* "Cookie settings": a button that reads as a link (footer column, legal text) */
  .cc-link { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
  .cc-link--inline { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .cc-link--inline:hover { text-decoration-thickness: 2px; }

  @media print { .cc-banner, .cc-dialog { display: none !important; } }
}