/* consent.css: the cookie bar (js/consent.js). Full-width bottom bar, hairline top border, the dylr.dev mark, four
   switches, three buttons (stacked on wide screens, in a row on phones). Monochrome; Reject all has the same weight
   as Allow selection and is never hidden. Not a modal: the page stays usable behind it. */

.cc-bar {
  position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
  background: var(--bg); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 32px -24px rgba(0, 0, 0, 0.25);
  transform: translateY(100%); opacity: 0;
  transition: transform 0.36s var(--ease), opacity 0.24s var(--ease);
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  /* landscape notch: side insets; the home indicator inset is on the (sticky) buttons below */
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
.cc-bar.is-in { transform: none; opacity: 1; }
.cc-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; padding-block: 18px; }
.cc-mark { grid-row: span 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--text); }
.cc-mark svg { width: 20px; height: 20px; }
.cc-copy { display: grid; gap: 4px; min-width: 0; }
.cc-title { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; }
.cc-title:focus { outline: none; }
.cc-title:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.cc-text { font-size: 0.88rem; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.cc-text a { color: var(--text); }
.cc-more { justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--text); font: 500 0.86rem/1.4 var(--font); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.cc-more:hover { text-decoration-color: currentColor; }

/* categories: four switches in a row on wide screens */
.cc-cats { grid-column: 1 / -1; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cc-bar.is-custom .cc-cats { display: grid; }
.cc-cat { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.cc-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 0.9rem; position: relative; }
.cc-cat.is-locked .cc-toggle { cursor: default; }
.cc-switch { position: absolute; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: inherit; }
.cc-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); transition: background-color 0.2s var(--ease); }
.cc-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--ease); }
.cc-switch:checked + .cc-track { background: var(--text); }
.cc-switch:checked + .cc-track::after { transform: translateX(14px); }
.cc-switch:disabled + .cc-track { opacity: 0.55; }
.cc-switch:focus-visible + .cc-track { outline: 2px solid var(--text); outline-offset: 2px; }
.cc-note { font-size: 0.8rem; line-height: 1.45; color: var(--text-3); }
.cc-detail { display: none; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 4px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--text-3); }
.cc-detail dt { color: var(--text-2); font-weight: 500; }
.cc-detail dd { margin: 0; overflow-wrap: anywhere; }
.cc-bar.is-custom .cc-detail { display: grid; }

.cc-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-actions .btn { width: 100%; padding-inline: 8px; white-space: nowrap; }

@media (min-width: 640px) {
  .cc-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* wide: mark, copy, the four switches in a row, buttons stacked on the right */
@media (min-width: 1000px) {
  .cc-in { grid-template-columns: auto minmax(220px, 300px) minmax(0, 1fr) 168px; gap: 0 24px; align-items: center; padding-block: 20px; }
  .cc-cats { display: grid; grid-column: auto; border: 0; gap: 0 4px; }
  .cc-cat { border: 0; border-left: 1px solid var(--line); padding: 4px 14px; }
  .cc-actions { grid-column: auto; grid-template-columns: 1fr; gap: 6px; }
  .cc-bar.is-custom .cc-in { align-items: start; }
}

/* the page keeps room for the bar so the footer is never hidden behind it */
html.has-cc body { padding-bottom: var(--cc-h, 230px); }
@media (min-width: 1000px) { html.has-cc body { padding-bottom: var(--cc-h, 124px); } }

.cc-bar ::selection { background: var(--sel-bg); color: var(--sel-fg); }
.cc-actions .btn-primary::selection, .cc-actions .btn-primary ::selection { background: var(--sel-inv-bg); color: var(--sel-inv-fg); }

/* footer links: Cookie settings and Do not sell or share */
.footer-privacy { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; }
.footer-privacy a { color: var(--text-2); }
.footer-privacy a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) { .cc-bar, .cc-track, .cc-track::after { transition: none; } .cc-bar { transform: none; } }
@media (forced-colors: active) { .cc-track { border: 1px solid CanvasText; } }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.cookie-actions a:not(.btn) { color: var(--text); }

/* details: label above value, wrap only at commas and spaces */
.cc-detail { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cc-detail dt { margin-top: 6px; font-size: 0.72rem; }
.cc-detail dd { overflow-wrap: break-word; word-break: normal; }
/* Reject all and the other two buttons stay in view while the details scroll */
.cc-actions { position: sticky; bottom: 0; z-index: 1; background: var(--bg); padding-block: 8px calc(2px + env(safe-area-inset-bottom, 0px)); margin-bottom: -2px; }
@media (min-width: 1000px) {
  .cc-actions { position: static; padding: 0; margin: 0; background: none; }
  .cc-bar.is-custom .cc-in { grid-template-columns: auto minmax(200px, 250px) minmax(0, 1fr) 168px; }
  .cc-bar.is-custom .cc-actions { position: sticky; top: 0; }
}