/* Tidebreak — cookie consent banner + preferences modal.
   Uses the site's design tokens (loaded via site.css). Standalone CSS so the
   consent layer renders identically on the SPA home page and the static legal
   pages, independent of React/Babel. */

.cc-hidden { display: none !important; }

/* scrim behind the preferences modal */
.cc-scrim {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(26, 22, 12, 0.42);
  animation: cc-fade 160ms ease;
}
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── first-layer banner ─────────────────────────────────────────────── */
.cc-banner {
  position: fixed; z-index: 9999; left: 16px; right: 16px; bottom: 16px;
  max-width: 720px; margin: 0 auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--accent);
  box-shadow: 0 24px 70px -30px rgba(26, 22, 12, 0.55);
  padding: 22px 24px 20px;
  animation: cc-rise 200ms cubic-bezier(.2,.7,.2,1);
  font-family: var(--sans);
}
.cc-title {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  color: var(--text-bright); letter-spacing: -0.01em; margin: 0 0 8px;
}
.cc-body { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 18px; max-width: 62ch; }
.cc-body a { color: var(--accent); text-decoration: underline; }
.cc-body a:hover { color: var(--accent-hover); }

.cc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Accept all / Reject all — IDENTICAL treatment (size, weight, colour). */
.cc-btn {
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  padding: 11px 22px; min-width: 148px; text-align: center;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; transition: background .13s, border-color .13s;
}
.cc-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cc-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Manage preferences — a plain text link, not a button */
.cc-manage {
  margin-left: auto; font-size: 14px; font-weight: 500;
  color: var(--text-primary); background: none; border: none; padding: 8px 4px;
  text-decoration: underline; cursor: pointer;
}
.cc-manage:hover { color: var(--text-bright); }
.cc-manage:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── preferences modal ──────────────────────────────────────────────── */
.cc-modal {
  position: fixed; z-index: 9999; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--bg-secondary); border: 1px solid var(--border-strong);
  box-shadow: 0 40px 90px -40px rgba(26, 22, 12, 0.6);
  padding: 26px 28px 22px; font-family: var(--sans);
  animation: cc-rise 200ms cubic-bezier(.2,.7,.2,1);
}
.cc-modal-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cc-modal-title { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--text-bright); letter-spacing: -0.015em; margin: 8px 0 10px; }
.cc-modal-intro { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 20px; }

.cc-cat { border: 1px solid var(--border-default); background: var(--bg-primary); padding: 16px 18px; margin-bottom: 12px; }
.cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cc-cat-name { font-size: 15px; font-weight: 600; color: var(--text-bright); }
.cc-cat-desc { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin-top: 8px; }

/* always-on pill for strictly necessary */
.cc-always { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-muted); border: 1px solid var(--accent-line); padding: 4px 10px; }

/* accessible toggle switch */
.cc-switch { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.cc-switch input { position: absolute; opacity: 0; width: 46px; height: 26px; margin: 0; cursor: pointer; }
.cc-switch .cc-track {
  width: 46px; height: 26px; border-radius: 100px; background: var(--bg-sunk);
  border: 1px solid var(--border-strong); transition: background .16s, border-color .16s; pointer-events: none;
}
.cc-switch .cc-thumb {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-secondary); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .16s; pointer-events: none;
}
.cc-switch input:checked ~ .cc-track { background: var(--accent); border-color: var(--accent); }
.cc-switch input:checked ~ .cc-thumb { transform: translateX(20px); }
.cc-switch input:focus-visible ~ .cc-track { outline: 3px solid var(--accent); outline-offset: 2px; }

.cc-modal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-default); }
.cc-btn.sm { min-width: 0; padding: 10px 18px; font-size: 14px; }
.cc-btn.ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.cc-btn.ghost:hover { background: var(--bg-tertiary); color: var(--text-bright); border-color: var(--border-strong); }
.cc-modal-actions .cc-save { margin-left: auto; }

@media (max-width: 560px) {
  .cc-actions { flex-direction: column; align-items: stretch; }
  .cc-btn { min-width: 0; width: 100%; }
  .cc-manage { margin-left: 0; text-align: center; }
  .cc-modal-actions .cc-save { margin-left: 0; }
  .cc-modal-actions .cc-btn { flex: 1 1 auto; }
}