/* Consent banner, redesign 2026 R1b: a one-line bottom sheet (brief
   section 2, "the cookie panel becomes a one-line bottom sheet"). The
   markup, the two buttons, the details disclosure and what is stored are
   unchanged (public/consent.js builds and runs all of it); only how it
   looks changed. Tokens from /shell/tokens.css (--hm-*), which every page
   that loads this file also loads through the synced head region.

   Accept and Reject are styled IDENTICALLY. Unequal prominence is the
   dark pattern EU regulators cite most often, so the only difference
   between them is the label. */

.consent {
  position: fixed;
  z-index: var(--hm-z-toast);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px var(--hm-gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--hm-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hm-line-strong);
  box-shadow: 0 -12px 32px -12px rgba(8, 3, 5, 0.6);
  color: var(--hm-ink);
  font-family: var(--hm-font-sans);
  /* visibility flips to hidden only at the END of the fade out, keeping
     the sheet out of the tab order and the accessibility tree whenever it
     is off screen; a dismissed sheet at opacity 0 would otherwise stay
     focusable and, being fixed, intercept clicks meant for the page. */
  opacity: 0;
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 240ms;
}

/* Final state declared outright; the movement is a keyframe on top (a
   transition would need the class added in a later frame, which couples
   "is this clickable" to "did a frame paint"). */
.consent.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: none;
  animation: consent-in 240ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes consent-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

/* One line on wide screens, on the 1200 px page: the copy, then the
   actions; the details open underneath, inside the same sheet. (consent.js
   wraps everything in .consent-inner.) */
.consent-inner { max-width: var(--hm-page-max); margin: 0 auto; }
@media (min-width: 861px) {
  .consent-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
  }
  .consent-inner > * { grid-column: 1 / -1; }
  .consent-inner > .consent-copy { grid-column: 1; }
  .consent-inner > .consent-actions { grid-column: 2; }
}

/* The "System · Cookies" kicker is the old HUD costume: kept for screen
   readers (the dialog may be labelled by it), off the visual layer. */
.consent-kicker {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.consent-copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hm-ink-2); }
.consent-copy strong { color: var(--hm-ink); font-weight: 600; }

.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 860px) { .consent-actions { margin-top: 12px; } }

.consent-btn {
  flex: 1 1 auto;
  min-width: 8.5rem;
  min-height: var(--hm-hit);                /* hit target >= visual control */
  padding: 0 16px;
  border: 1px solid var(--hm-line-field);
  border-radius: var(--hm-r-pill);
  background: transparent;
  color: var(--hm-ink);
  font: 500 14px/1 var(--hm-font-sans);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* Hover raises contrast rather than washing the control out. */
.consent-btn:hover { background: var(--hm-surface-2); border-color: var(--hm-ink-3); color: var(--hm-ink); }
.consent-btn:focus-visible,
.consent-link:focus-visible,
.consent-fine a:focus-visible { outline: 2px solid var(--hm-accent-ink); outline-offset: 2px; }

.consent-link {
  flex: 0 0 auto;
  min-height: var(--hm-hit);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--hm-ink-2);
  font: 400 14px/1 var(--hm-font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 120ms ease;
}
.consent-link:hover { color: var(--hm-ink); }

/* The disclosure opens instantly and fades in (opacity only; the old
   grid-rows animation moved layout on every frame). */
.consent-details { display: none; }
.consent.is-open .consent-details { display: block; animation: consent-fade 240ms ease both; }
@keyframes consent-fade { from { opacity: 0; } }
.consent-details-inner { max-height: min(50vh, 22rem); overflow: auto; }

.consent-table { margin: 16px 0 0; font-size: 13px; line-height: 1.5; }
.consent-table dt { margin-top: 12px; color: var(--hm-ink); font: 600 13px/1.3 var(--hm-font-sans); text-transform: none; letter-spacing: 0; }
.consent-table dd { margin: 4px 0 0; color: var(--hm-ink-2); }
.consent-table code { font-family: var(--hm-font-mono); font-size: 0.9em; color: var(--hm-ink); }

.consent-fine { margin: 16px 0 0; color: var(--hm-ink-3); font-size: 13px; line-height: 1.5; }
.consent-fine a { color: var(--hm-ink); }

@media (max-width: 640px) {
  .consent-btn { min-width: 0; flex: 1 1 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .consent,
  .consent.is-visible { transition: opacity 150ms linear; animation: none; }
  .consent { transform: none; }
  .consent.is-open .consent-details { animation: none; }
}