/* SolaryxDev cookie settings (js/consent.js), and the marked gaps in the legal texts (at the end).
   The cookie settings: a dark-glass card at the bottom left, in the Search
   dialog's material. Crisp rounded rectangles, never a pill: card 14px, buttons 10px, the switch
   7px on a 24px track, its knob 5px. Fixed at z 85 (over the section index, under the scrim and
   the island), so it moves nothing on the page, and it never blocks it: no backdrop, no focus trap,
   and a wheel over it scrolls the page unless the card itself has more to show. */
.cc {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  container-type: inline-size;
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 18px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card, 14px);
  background: rgba(15, 15, 18, 0.92);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.6);
  color: var(--ink);
  font: 400 14px/1.55 var(--font-ui);
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.26s var(--out), transform 0.4s var(--out);
}
.cc[hidden] { display: none; }
.cc.is-in { opacity: 1; transform: none; }
/* consent.js: out of the way while the home's intro heading passes behind it (no move, so its box
   stays where the check measures it) */
.cc.is-in[data-aside] { opacity: 0; visibility: hidden; transition: opacity 0.2s var(--out), visibility 0s linear 0.2s; }
@media (min-width: 720px) {
  .cc { left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

.cc-h { margin: 0 0 8px; font: 600 16px/1.3 var(--font-ui); letter-spacing: -0.012em; color: var(--ink); }
.cc-h:focus { outline: none; }   /* a heading is focused only to be read first; it is not a control */
.cc--closable .cc-h { padding-right: 36px; }
.cc-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.cc a {
  color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 3px; transition: text-decoration-color 0.2s;
}
.cc a:hover { text-decoration-color: #fff; }

.cc-close {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-ctl, 8px); background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.cc-close:hover { background: var(--fill-2); color: var(--ink); }
.cc-close .icon { width: 14px; height: 14px; }
.cc-close[hidden] { display: none; }

/* three equal buttons in a row; on a narrow card Customize (or Save choices) takes the first row and
   Reject all and Accept all share the second, still equal */
.cc-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
@container (max-width: 299px) {
  .cc-acts { grid-template-columns: 1fr 1fr; }
  .cc-btn--soft { grid-column: 1 / -1; }
}
.cc-btn {
  box-sizing: border-box; height: 40px; min-width: 0; padding: 0 10px;
  border: 0; border-radius: var(--r-btn, 10px);
  background: var(--ink); color: #0a0a0b;
  font: 600 14px/1 var(--font-ui); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s, transform 0.2s var(--settle);
}
.cc-btn:hover { background: #fff; }
.cc-btn:active { transform: scale(0.97); }
.cc-btn--soft { background: var(--fill-3); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cc-btn--soft:hover { background: rgba(255, 255, 255, 0.16); }

/* Customize: one row per category */
.cc-cat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cc-cat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.cc-cat-h { margin: 0; font: 600 14px/1.3 var(--font-ui); color: var(--ink); }
.cc-cat-x { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.cc-always {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-tag, 4px);
  font: 500 12px/1 var(--font-ui); color: var(--ink-2); white-space: nowrap;
}
.cc-sw-wrap { display: inline-flex; align-items: center; gap: 10px; }
.cc-sw-state { font: 500 12px/1 var(--font-ui); color: var(--ink-2); }
.cc-sw {
  position: relative; flex: none; width: 40px; height: 24px; padding: 0;
  border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); cursor: pointer;
  transition: background-color 0.2s;
}
.cc-sw-k {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 5px;
  background: var(--ink); transition: transform 0.22s var(--out), background-color 0.2s;
}
.cc-sw[aria-checked="true"] { background: var(--ink); }
.cc-sw[aria-checked="true"] .cc-sw-k { transform: translateX(16px); background: #0a0a0b; }

/* phones: a compact strip along the bottom edge, so the first screen keeps its headline and the X
   (review 17: the card covered about 40% of it, the X included). The heading runs into the first
   line, the three buttons share one row, and the card stays under a fifth of a 390 x 844 screen.
   Reopened from Cookie settings (closable, with Customize open) it takes the room it needs */
@media (max-width: 719px) {
  .cc {
    left: 8px; right: 8px; width: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 16px);
    padding: 10px 12px 12px;
    font-size: 12.5px; line-height: 17px;
  }
  .cc:not(.cc--closable) .cc-h { float: left; margin: 0 6px 0 0; font-size: 13px; line-height: 17px; }
  .cc-p { font-size: 12.5px; line-height: 17px; }
  .cc-acts { margin-top: 8px; gap: 6px; }
  .cc-btn { height: 34px; padding: 0 8px; font-size: 13px; }
  .cc-cat { margin-top: 10px; padding-top: 10px; }
}
/* the narrowest phones: one size down, and the heading kept for screen readers only (the first
   sentence says what the card is), so the text still takes four lines and the card clears the X */
@media (max-width: 379px) {
  .cc, .cc-p { font-size: 12px; line-height: 16px; }
  .cc:not(.cc--closable) .cc-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .cc, .cc-sw, .cc-sw-k, .cc-btn { transition: none; }
  .cc { transform: none; }
}
@media (forced-colors: active) {
  .cc-sw { border: 1px solid ButtonText; }
  .cc-sw-k { background: ButtonText; }
  .cc-sw[aria-checked="true"] .cc-sw-k { background: Highlight; }
}
@media print { .cc { display: none !important; } }

/* the Cookie Policy's own controls: the current choice and "Change your cookie choice" only work
   with script, and without it there is no choice to show or change */
html:not(.js) .cc-open, html:not(.js) .cc-status { display: none; }

/* a gap in a legal text that the operator must fill before go-live (build-site.py lists each one):
   meant to be seen, never mistaken for settled wording */
.legal-todo {
  padding: 1px 6px; border: 1px dashed rgba(255, 200, 87, 0.7); border-radius: var(--r-tag, 4px);
  background: rgba(255, 200, 87, 0.1); color: #ffd98a; font-style: normal;
}