/* Cookie banner (consent.js): a small brushed-steel plate in the bottom corner, same machined parts as the site.
   Shared by index.html and legal.html, so the tokens are written out here instead of borrowed from either page. */
.ck { --ck-s2: #1b1917; --ck-s3: #23211e; --ck-fg: 240 236 229; --ck-muted: 158 152 144; --ck-steel: #c4c0b9; --ck-lamp: #ff6a14;
  position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  border-radius: 12px; padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%), url(images/material/steel.png) 0 0 / 512px 256px repeat, #151412;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 18px -12px rgba(0,0,0,.8), 0 30px 60px -24px rgba(0,0,0,.9);
  color: rgb(var(--ck-fg)); font: 400 14px/1.6 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.ck::-webkit-scrollbar { display: none; }
.ck[hidden] { display: none; }
.ck.show { opacity: 1; transform: none; }
.ck.leaving { opacity: 0; transform: translateY(10px); transition-duration: .3s; }
@media (min-width: 640px) { .ck { left: 24px; right: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 452px; padding: 24px; } }

.ck-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ck-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: var(--ck-s2); color: var(--ck-steel);
  border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4); font-size: 19px; }
.ck-title { flex: 1; margin: 0; font: 600 16.5px/1.2 'Unbounded', 'Golos Text', sans-serif; letter-spacing: -0.03em; outline: none; }
.ck-link { flex: none; padding: 6px 2px; border: 0; background: none; color: rgb(var(--ck-fg) / .8); font: 500 13.5px/1 'Golos Text', sans-serif;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ck-fg) / .3); cursor: pointer; }
.ck-link:hover { color: rgb(var(--ck-fg)); text-decoration-color: rgb(var(--ck-fg) / .6); }
.ck-text { margin: 0 0 18px; color: rgb(var(--ck-muted)); max-width: 46ch; text-wrap: pretty; }
.ck-text a { color: rgb(var(--ck-fg) / .88); text-underline-offset: 3px; }
.ck-text a:hover { color: rgb(var(--ck-fg)); }

/* the three groups: a hairline between rows, a switch per optional group */
.ck-list { list-style: none; margin: 0 0 18px; padding: 0; }
.ck-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ck-row:first-child { border-top: 0; padding-top: 2px; }
.ck-row div { flex: 1; min-width: 0; }
.ck-row b { display: block; font-weight: 600; font-size: 14.5px; color: rgb(var(--ck-fg)); }
.ck-row span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: rgb(var(--ck-muted)); }
.ck-always { flex: none; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: rgb(var(--ck-muted)); }
.ck-switch { flex: none; position: relative; width: 46px; height: 26px; margin-top: 1px; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--ck-s3); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); transition: background-color .3s, border-color .3s; }
.ck-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgb(var(--ck-muted));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.6); transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .3s; }
/* on = bone, like every other neutral "selected" state on the site (orange is only for what is earned) */
.ck-switch[aria-checked="true"] { background: rgb(var(--ck-fg)); border-color: rgb(var(--ck-fg)); }
.ck-switch[aria-checked="true"] i { transform: translateX(20px); background: #0c0b0a; box-shadow: none; }

/* reject and accept: the same size and weight, side by side */
.ck-actions { display: flex; gap: 10px; }
.ck-btn { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.025); color: rgb(var(--ck-fg) / .92);
  font: 500 14.5px/1 'Golos Text', sans-serif; transition: border-color .3s, background-color .3s, color .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.ck-btn:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: rgb(var(--ck-fg)); }
.ck-btn:active, .ck-switch:active { transform: translateY(1px) scale(.985); }
.ck-btn:focus-visible, .ck-switch:focus-visible, .ck-link:focus-visible, .ck-text a:focus-visible { outline: 2px solid var(--ck-lamp); outline-offset: 2px; }

.ck [data-view] { display: none; }
.ck[data-mode="main"] [data-view="main"], .ck[data-mode="settings"] [data-view="settings"] { display: block; }
.ck[data-mode="main"] .ck-actions[data-view="main"], .ck[data-mode="settings"] .ck-actions[data-view="settings"] { display: flex; }
.ck[data-mode="settings"] [data-view="settings"]:not(.ck-actions) { animation: ckIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes ckIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ck, .ck.leaving, .ck-switch i, .ck-btn { transition: none; }
  .ck { transform: none; }
  .ck[data-mode="settings"] [data-view="settings"]:not(.ck-actions) { animation: none; }
}