/* ============================================================
   Cookie consent — a flat bar across the foot of the CONTENT
   area, in the same register as the site's other chrome.

   Geometry follows .progress (relaunch.html): fixed, pinned to
   left:var(--sidebar-w) and right:0, so it spans exactly the
   content column and follows the draggable sidebar as the
   visitor resizes it. Subpages define the same variable in
   subpage.css, so one rule serves every page.

   No rounded container and no floating card: this reads as a
   menu strip that belongs to the layout, not as an overlay
   pasted on top of it. Only the small controls stay pill-shaped,
   matching the theme and language toggles in the sidebar.

   The bar proposes NECESSARY ONLY — the privacy-preserving
   default — so the easiest possible action is also the one that
   collects the least. Allowing analytics is a deliberate detour
   through the settings strip, never the path of least resistance.
   ============================================================ */

.consent-root{
  position:fixed;left:var(--sidebar-w,0px);right:0;bottom:0;z-index:120;
  background:var(--paper-0);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(13,15,18,.06);
  animation:consent-rise .28s var(--ease,cubic-bezier(.22,.61,.36,1)) both;
}
[data-theme="dark"] .consent-root{box-shadow:0 -6px 24px rgba(0,0,0,.32)}
.consent-root[hidden]{display:none}
@keyframes consent-rise{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.consent-root{animation:none}}

/* ── The line itself ─────────────────────────────────────────── */
.consent-bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:11px clamp(16px,2.2vw,28px);
}
.consent-bar-text{
  font-size:.8rem;line-height:1.45;color:var(--ink-2);min-width:0;
}
.consent-bar-text a{color:var(--blue-0);text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* ── Settings strip — the same line, expanded ────────────────── */
.consent-panel{padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,28px) 16px}
.consent-title{
  font-size:.85rem;font-weight:600;color:var(--ink-0);
  margin-bottom:12px;letter-spacing:.01em;
}
.consent-text{
  font-size:.78rem;line-height:1.55;color:var(--ink-2);
  margin:12px 0 14px;
}
.consent-text a{color:var(--blue-0);text-decoration:underline;text-underline-offset:2px}

/* ── Controls — pills, like the sidebar's own toggles ────────── */
.consent-btn{
  font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.01em;
  padding:7px 15px;border-radius:var(--pill,9999px);cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.consent-btn:hover{border-color:var(--ink-4);color:var(--ink-0)}
/* The confirm button — the one-click way to accept the proposal as it stands */
.consent-btn-confirm{border-color:var(--blue-0);color:var(--blue-0)}
.consent-btn-confirm:hover{background:var(--blue-2);color:var(--blue-0);border-color:var(--blue-0)}
[data-theme="dark"] .consent-btn-confirm:hover{background:var(--blue-2);color:var(--blue-1)}
.consent-btn-quiet{border-color:transparent;color:var(--ink-3);padding-inline:10px}
.consent-btn-quiet:hover{color:var(--ink-1);border-color:var(--line)}

/* ── Category rows ───────────────────────────────────────────── */
.consent-options{display:flex;flex-wrap:wrap;gap:10px}
.consent-option{
  display:flex;gap:12px;align-items:flex-start;
  flex:1 1 320px;min-width:0;
  padding:12px 14px;border:1px solid var(--line-soft);
  background:var(--paper-1);
}
.consent-option-body{flex:1;min-width:0}
.consent-option-name{font-size:.82rem;font-weight:600;color:var(--ink-0);margin-bottom:3px}
.consent-option-desc{font-size:.75rem;line-height:1.5;color:var(--ink-2)}
.consent-option-state{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding-top:3px;white-space:nowrap;
}

/* Switch — a checkbox styled as a track; keyboard focus stays on the input */
.consent-switch{position:relative;flex:none;width:38px;height:22px;margin-top:1px}
.consent-switch input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;z-index:2;
}
.consent-switch input:disabled{cursor:not-allowed}
.consent-track{
  position:absolute;inset:0;border-radius:var(--pill,9999px);
  background:var(--paper-3);border:1px solid var(--line);
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.consent-track::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--paper-0);box-shadow:var(--shadow-1);
  transition:transform .22s var(--ease);
}
.consent-switch input:checked + .consent-track{background:var(--blue-0);border-color:var(--blue-0)}
.consent-switch input:checked + .consent-track::after{transform:translateX(16px)}
.consent-switch input:focus-visible + .consent-track{outline:2px solid var(--blue-0);outline-offset:2px}
.consent-switch input:disabled + .consent-track{opacity:.55}

/* ── Reopen handle — how consent gets withdrawn later ────────── */
.consent-reopen{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;letter-spacing:inherit;
  color:var(--ink-3);transition:color .2s var(--ease);
}
.consent-reopen:hover{color:var(--blue-0)}

/* The sidebar is off-canvas below this width — the bar takes the full page. */
@media(max-width:820px){
  .consent-root{left:0}
}
@media(max-width:620px){
  .consent-bar{gap:10px}
  .consent-actions{margin-left:0;width:100%}
  .consent-actions .consent-btn{flex:1 1 auto;text-align:center}
}