/* Cookie banner, gates and notice table.
   Written entirely against the shared `--c-*` commerce tokens, so every theme — light or dark
   — gets a banner that belongs to it without any theme needing a rule of its own. */

.ck-btn {
  display: inline-block;
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: var(--c-bg);
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--c-radius-sm);
  cursor: pointer;
  text-decoration: none;
}

.ck-btn:hover { filter: brightness(1.08); }
.ck-btn:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; }

/* Equal weight on purpose: a decline button styled as a whisper is not a choice. Same size,
   same padding, same hit area — only the fill differs, so the two read as a pair. */
.ck-btn-quiet {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-line-strong);
}

/* ---- banner ------------------------------------------------------------------------- */
.ck-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--c-bg);
  color: var(--c-text);
  border-top: 1px solid var(--c-line-strong);
  box-shadow: var(--c-shadow);
  padding: 1rem;
}

.ck-banner-inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ck-banner-text { flex: 1 1 24rem; }
/* `body h2.` and the headings below: a theme's `h2`/`h3` reset is (0,1,2) and beat these one-class
   margins, so every heading in the banner and the notice sat on the sentence under it. */
body h2.ck-banner-title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.ck-banner-text p { margin: 0; font-size: 0.95rem; }

.ck-banner-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--c-muted);
}

.ck-banner-more { margin-top: 0.5rem; font-size: 0.9rem; }
.ck-banner-actions form { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .ck-banner-inner { gap: 0.9rem; }
  .ck-banner-actions { width: 100%; }
  .ck-banner-actions .ck-btn { flex: 1; text-align: center; }
}

/* ---- gate --------------------------------------------------------------------------- */
.ck-gate {
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--c-radius);
  background: var(--c-soft);
  padding: 1.25rem;
  text-align: center;
  /* The address above it and the directions below it both touched its dashed border. */
  margin-block: 0.75rem;
}

/* Two classes under `body`, (0,2,1): these are paragraphs, and every theme's
   `body.theme-<name> p { margin: 0 }` at (0,1,2) beat the one-class rules, so the provider
   line sat on the Allow button. The same applies to every `p` rule below. */
body .ck-gate .ck-gate-title { margin: 0 0 0.35rem; font-weight: 600; }
body .ck-gate .ck-gate-why { margin: 0 auto 0.6rem; max-width: 34rem; color: var(--c-muted); font-size: 0.92rem; }
body .ck-gate .ck-gate-who { margin: 0 0 0.9rem; font-size: 0.85rem; }

/* ---- notice table ------------------------------------------------------------------- */
.ck-page { max-width: 52rem; }
body p.ck-lead { color: var(--c-muted); margin: 0.5rem 0 1.5rem; }
.ck-group { margin-bottom: 2rem; }
body h3.ck-group-title { margin: 0 0 0.2rem; }
body p.ck-group-note { margin: 0 0 0.75rem; color: var(--c-muted); font-size: 0.9rem; }

.ck-rows { border: 1px solid var(--c-line); border-radius: var(--c-radius-sm); overflow: hidden; }

.ck-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2fr minmax(7rem, auto);
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.92rem;
  align-items: start;
}

.ck-row:first-child { border-top: 0; }
.ck-row-head { background: var(--c-soft); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ck-what { display: flex; flex-direction: column; gap: 0.4rem; }
.ck-provider { color: var(--c-muted); font-size: 0.85rem; }
.ck-duration { color: var(--c-muted); }

.ck-badge {
  align-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: var(--c-radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-text);
}

.ck-badge-quiet { background: transparent; border: 1px solid var(--c-line); color: var(--c-muted); font-weight: 400; }

@media (max-width: 700px) {
  .ck-row { grid-template-columns: 1fr; gap: 0.35rem; }
  /* The header row labels columns that no longer exist once this stacks. */
  .ck-row-head { display: none; }
}

.ck-choice { border-top: 1px solid var(--c-line); padding-top: 1.25rem; margin-top: 1rem; }
body .ck-choice h2 { margin: 0 0 0.5rem; }
body .ck-choice p { margin: 0 0 0.9rem; }
.ck-more ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
body p.ck-browser { margin-top: 2rem; color: var(--c-muted); font-size: 0.9rem; }
/* The list of what is stored follows the choice box's last paragraph with nothing between them
   once there is no banner question above it. */
body .ck-choice + .ck-more { margin-top: 1.5rem; }