/* nup — cookie consent banner
   Shared by both doors. Consumes design tokens, so it inherits each page's
   accent colour automatically. Hidden until consent.js decides to show it. */

.cc{position:fixed; left:0; right:0; bottom:0; z-index:200; display:none; padding:16px}
.cc.show{display:block}
.cc-inner{max-width:1120px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:22px 24px; box-shadow:0 30px 70px -30px rgba(0,0,0,.45);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.cc-txt{flex:1; min-width:260px}
.cc-txt b{display:block; font-size:1.02rem; font-weight:700; margin-bottom:5px}
.cc-txt p{margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; max-width:72ch}
.cc-txt a{color:var(--accent); font-weight:600}
.cc-txt a:hover{text-decoration:underline}
.cc-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
/* self-contained button styles: the banner also renders on pages that don't
   load a door's stylesheet (e.g. the legal pages), so it can't rely on .btn there */
.cc .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  font:inherit; font-weight:600; font-size:.92rem; padding:11px 18px; border-radius:11px;
  border:1px solid transparent; cursor:pointer; transition:background .2s ease, border-color .2s ease}
.cc .btn-primary{background:var(--accent); color:var(--accent-ink)}
.cc .btn-primary:hover{background:color-mix(in srgb, var(--accent) 88%, white)}
.cc .btn-ghost{background:transparent; border-color:var(--line); color:var(--text)}
.cc .btn-ghost:hover{border-color:var(--accent)}
.cc-link{background:none; border:0; color:var(--muted); font:inherit; font-size:.88rem;
  text-decoration:underline; cursor:pointer; padding:8px 4px}
.cc-link:hover{color:var(--text)}

/* preferences panel */
.cc-prefs{display:none; width:100%; margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.cc.prefs-open .cc-prefs{display:block}
.cc-row{display:flex; align-items:flex-start; gap:14px; padding:13px 0}
.cc-row + .cc-row{border-top:1px solid var(--line)}
.cc-row .cc-i{flex:1}
.cc-row .cc-i b{display:block; font-size:.95rem; margin-bottom:3px}
.cc-row .cc-i span{color:var(--muted); font-size:.86rem; line-height:1.5}
.cc-always{flex:0 0 auto; align-self:center; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:5px 10px; border-radius:20px}
/* switch */
.cc-sw{flex:0 0 auto; align-self:center; position:relative; width:44px; height:25px}
.cc-sw input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2}
.cc-sw .tr{position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--line);
  border-radius:20px; transition:background .18s ease, border-color .18s ease}
.cc-sw .kn{position:absolute; top:4px; left:4px; width:17px; height:17px; border-radius:50%;
  background:var(--faint); transition:transform .18s ease, background .18s ease}
.cc-sw input:checked ~ .tr{background:var(--accent-soft); border-color:var(--accent)}
.cc-sw input:checked ~ .kn{transform:translateX(19px); background:var(--accent)}
.cc-sw input:focus-visible ~ .tr{outline:2px solid var(--accent); outline-offset:2px}

@media (max-width:720px){
  .cc{padding:10px}
  .cc-inner{padding:18px; gap:16px}
  .cc-actions{width:100%}
  .cc-actions .btn{flex:1; justify-content:center}
}