/* ═══ THEME SWITCH, COOKIE NOTICE, PREFERENCES ═══════════════════ */

/* ── the switch in the bar ────────────────────────────────────── */
.themer{
  position:relative;
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:50%;
  color:var(--ice-soft);
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.themer:hover{ color:var(--signal); border-color:var(--rule-hot); background:rgba(var(--ice-rgb),.04); }
.themer svg{
  grid-area:1/1; width:17px;
  transition:opacity .4s var(--ease), rotate .55s var(--ease-out), scale .45s var(--ease-out);
}
/* dark theme showing → offer the sun; light showing → offer the moon */
.themer .sun { opacity:1; rotate:0deg;   scale:1;   }
.themer .moon{ opacity:0; rotate:-70deg; scale:.6;  }
:root[data-theme="light"] .themer .sun { opacity:0; rotate:70deg; scale:.6; }
:root[data-theme="light"] .themer .moon{ opacity:1; rotate:0deg;  scale:1;  }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]) .themer .sun { opacity:0; rotate:70deg; scale:.6; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .themer .moon{ opacity:1; rotate:0deg;  scale:1;  }
}

/* ── the notice ───────────────────────────────────────────────────
   Not a gate. Everything this site stores falls under a PECR
   exception, so the duty is to inform and to offer a free objection —
   not to block the page until someone clicks "accept".           */
.notice{
  /* right-hand side: the hero's own call to action lives bottom-left */
  position:fixed; right:clamp(12px,2vw,28px); bottom:clamp(12px,2vw,28px);
  z-index:90;
  width:min(460px, calc(100vw - clamp(24px,4vw,56px)));
  border-radius:var(--radius-sm);
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), var(--glass-drop);
  padding:clamp(18px,1.8vw,24px);
  display:grid; gap:14px;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out);
}
.notice[hidden]{ display:none; }
.notice.is-in{ opacity:1; transform:none; }
.notice p{ font-size:var(--t-small); line-height:1.55; color:var(--ice-soft); }
.notice a{ color:var(--signal); text-decoration:underline; text-underline-offset:3px; }
.notice__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.mini{
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  border:1px solid var(--rule); border-radius:99px;
  padding:10px 18px; color:var(--ice-soft);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.mini:hover{ border-color:var(--rule-hot); color:var(--ice); background:rgba(var(--ice-rgb),.05); }
.mini--solid{ background:var(--signal); border-color:var(--signal); color:var(--on-signal); }
.mini--solid:hover{ background:var(--signal-hot); border-color:var(--signal-hot); color:var(--on-signal); }

/* ── the preferences sheet ────────────────────────────────────── */
.sheet{ position:fixed; inset:0; z-index:115; display:grid; }
.sheet[hidden]{ display:none; }
.sheet__scrim{
  position:absolute; inset:0; background:rgba(var(--scrim),.74);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .45s var(--ease);
}
.sheet.is-open .sheet__scrim{ opacity:1; }
.sheet__panel{
  position:relative; justify-self:center; align-self:center;
  width:min(700px, calc(100vw - clamp(16px,4vw,56px)));
  max-height:calc(100svh - clamp(16px,4vw,56px));
  overflow:auto; overscroll-behavior:contain;
  border-radius:var(--radius);
  background:var(--ground-lift); border:1px solid var(--rule);
  box-shadow:var(--glass-edge), 0 60px 140px -40px rgba(0,0,0,.6);
  padding:clamp(24px,3vw,40px);
  display:grid; gap:clamp(18px,2vw,26px);
  opacity:0; transform:translateY(38px) scale(.99);
  transition:opacity .5s var(--ease-out), transform .65s var(--ease-out);
}
.sheet.is-open .sheet__panel{ opacity:1; transform:none; }

.sheet__head{ display:grid; gap:12px; }
.sheet__head .title{ font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--ice); }
.sheet__head p{ font-size:var(--t-small); line-height:1.6; color:var(--ice-soft); max-width:52ch; }

.opt{
  display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:start;
  padding:clamp(16px,1.6vw,20px) 0;
  border-top:1px solid var(--rule);
}
/* text down the left, the control on the right — set explicitly, or
   the control auto-places into column one and shunts the heading over */
.opt h4{
  grid-column:1; grid-row:1;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:400;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice);
}
.opt p{ grid-column:1; grid-row:2; font-size:var(--t-small); line-height:1.55; color:var(--ice-soft); max-width:52ch; }
.opt__tag{
  grid-column:2; grid-row:1 / span 2; align-self:center; text-align:right;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-ghost);
}

/* a switch that reads as on/off without relying on colour alone */
.sw{
  grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end;
  width:56px; height:30px; flex:none;
  border:1px solid var(--rule-lit); border-radius:99px;
  background:rgba(var(--ice-rgb),.05);
  position:relative; cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.sw::after{
  content:''; position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:50%;
  background:var(--ice-faint);
  transition:translate .35s var(--ease-out), background .35s var(--ease);
}
.sw[aria-checked="true"]{ background:var(--signal); border-color:var(--signal); }
.sw[aria-checked="true"]::after{ translate:26px 0; background:var(--on-signal); }
.sw[disabled]{ opacity:.4; cursor:not-allowed; }

.sheet__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sheet__note{
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ice-ghost);
}

@media (prefers-reduced-motion: reduce){
  .notice, .sheet__panel, .sheet__scrim, .themer svg, .sw::after{ transition-duration:.01ms; }
}