/* A slim bar along the bottom edge (10-31): the words on the left, the choices on the
   right, so the opening photo stays in view. Same words and choices as before. */
.analytics-consent {
  position: fixed;
  z-index: 100;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .15rem 2rem;
  align-items: center;
  padding: .75rem var(--edge);
  border-top: 1px solid var(--room-line);
  background: #18131a;
  color: var(--room-light);
  box-shadow: 0 -.5rem 2rem rgb(0 0 0 / 35%);
  font-size: max(.8125rem, 13px);
  line-height: 1.45;
}
.analytics-consent[hidden] { display: none; }
.analytics-consent > :is(h2, p) { grid-column: 1; max-width: 72ch; }
.analytics-consent h2 { margin: 0; font-size: .9375rem; }
.analytics-consent p { margin: 0; color: var(--room-muted); }
.analytics-consent a { color: var(--room-light); text-underline-offset: .25em; }
.analytics-choices,
.analytics-consent > button { grid-column: 2; grid-row: 1 / span 3; }
.analytics-choices { display: flex; gap: .5rem; }
.analytics-consent button,
.analytics-control {
  min-height: 44px;
  padding: .65rem 1rem;
  border: 1px solid var(--room-light);
  border-radius: 999px;
  background: transparent;
  color: var(--room-light);
  font: inherit;
  cursor: pointer;
}
.analytics-consent button { padding-block: .5rem; white-space: nowrap; }
.analytics-consent button:focus-visible,
.analytics-control:focus-visible { outline: 3px solid var(--room-light); outline-offset: 3px; }
.analytics-control { margin-inline-end: 1rem; }
/* Phones: the words, then both choices side by side on one row. */
@media (max-width: 43.75rem) {
  .analytics-consent { grid-template-columns: minmax(0, 1fr); padding-block: .75rem calc(.75rem + env(safe-area-inset-bottom)); }
  .analytics-choices,
  .analytics-consent > button { grid-column: 1; grid-row: auto; margin-top: .6rem; }
  .analytics-choices button { flex: 1 1 0; }
}