/* =====================================================================
   PLAYBOOK — consent.css (31 Oct 2026)
   PECR cookie consent card. Bottom-left paper panel, ink text, pill
   buttons. Sits under the page curtain (z 2000) and above the nav (800).
   Colours come from theme.css; no new tokens.
   ===================================================================== */
.pbc { position: fixed; left: max(var(--page-x), env(safe-area-inset-left, 0px)); bottom: max(var(--page-x), env(safe-area-inset-bottom, 0px)); z-index: 1200;
  width: min(440px, calc(100vw - var(--page-x) * 2)); background: var(--pb-paper); color: var(--pb-ink);
  box-shadow: inset 0 0 0 1px var(--pb-ink), 0 24px 60px rgba(37, 36, 34, .18);
  display: flex; flex-direction: column; gap: 20px; padding: 24px;
  font: 400 var(--fs-body)/1.35 var(--font-text); }
.pbc[hidden] { display: none !important; }
.js .pbc { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 400ms var(--ease-in-out), transform 600ms var(--ease-expo-out); }
.js .pbc.is-in { opacity: 1; transform: none; }
.pbc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pbc-head .label { display: flex; align-items: center; gap: 10px; }
.pbc-head .label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.pbc-title { font: 500 var(--fs-card-title)/1.25 var(--font-text); letter-spacing: var(--ls-tight); }
.pbc p { margin: 0; }
.pbc-body { display: flex; flex-direction: column; gap: 12px; }
.pbc-body .ul, .pbc-foot .ul { padding-bottom: 0; background-size: 100% 1px; }
.pbc-body .ul:hover, .pbc-foot .ul:hover { color: var(--muted); }
.pbc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pbc .btn { height: 44px; padding-left: 20px; gap: 12px; }
.pbc .btn-i { width: 32px; height: 32px; font-size: 20px; }
.pbc .btn:hover .btn-i, .pbc .btn:focus-visible .btn-i { width: 48px; }
.pbc .btn-light { box-shadow: inset 0 0 0 1px var(--pb-ink); }
.pbc .btn-link { height: 44px; display: inline-flex; align-items: center; padding: 0 12px; font: 500 var(--fs-label)/1.2 var(--font-text); letter-spacing: var(--ls-label); text-transform: uppercase; background: linear-gradient(currentColor, currentColor) 12px 100% / 0 1px no-repeat; transition: background-size 300ms var(--ease-in-out); }
.pbc .btn-link:hover, .pbc .btn-link:focus-visible { background-size: calc(100% - 24px) 1px; }

/* Settings view: three category rows with switches */
.pbc-cats { display: flex; flex-direction: column; border-bottom: 1px solid var(--pb-ink); }
.pbc-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--pb-ink); }
.pbc-cat-name { font-weight: 500; }
.pbc-cat-desc { grid-column: 1; color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.pbc-cat .label { color: var(--muted); font-size: var(--fs-chip); letter-spacing: var(--ls-chip); grid-row: 1 / span 2; }
.pbc-sw { grid-row: 1 / span 2; position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--pb-mist); box-shadow: inset 0 0 0 1px var(--pb-ink); cursor: pointer; transition: background-color 250ms var(--ease-in-out); }
.pbc-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--pb-ink); transition: transform 300ms var(--ease-spring-pop); }
.pbc-sw[aria-checked="true"] { background: var(--accent); }
.pbc-sw[aria-checked="true"]::after { transform: translate3d(20px, 0, 0); }
.pbc-sw:focus-visible { outline: 2px solid var(--pb-ink); outline-offset: 3px; }
.pbc-foot { font-size: var(--fs-small); color: var(--muted); }

@media (max-width: 809px) {
  .pbc { width: calc(100vw - var(--page-x) * 2); padding: 20px; gap: 16px; max-height: calc(100svh - var(--page-x) * 2 - env(safe-area-inset-bottom, 0px)); overflow: auto; }
  .pbc-actions .btn, .pbc-actions .btn-link { width: 100%; justify-content: space-between; max-width: none; }
  .pbc-actions .btn-link { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pbc { transition: none; }
  .pbc-sw, .pbc-sw::after { transition: none; }
}