.panel {
  --panel-width: 50ch;
  --panel-padding: 1em;

  inline-size: var(--panel-width);
  margin: calc(var(--navbar-height) - var(--block-space)) auto var(--block-space);
  max-inline-size: 100vw;
  padding: var(--panel-padding);

  @media (min-width: 100ch) {
    --panel-padding: 2em;

    box-shadow:
      0 0 0 1px oklch(var(--lch-always-black) / 0.02),
      0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
      0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
      0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
      0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
      0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.8em;
  }
}

.panel--wide {
  --panel-width: 80ch;
}

.panel__button {
  inset-block-start: var(--block-space);
  inset-inline-start: var(--block-space);
  position: absolute;
}

/* Privacy notice: readable line length, tables that scroll on a phone */
.privacy-notice {
  inline-size: min(48rem, 100%);
  max-inline-size: 100%;
  text-align: start;

  h2 { margin-block: 1.5em 0.5em; }
}

.privacy-notice__draft {
  background-color: var(--color-brand);
  border-radius: 0.6em;
  color: var(--color-brand-text);
  padding: 0.75em 1em;
}

.privacy-notice__table {
  overflow-x: auto;

  table { border-collapse: collapse; inline-size: 100%; }
  th, td { border-block-end: 1px solid oklch(var(--lch-gray-darker)); padding: 0.5em; text-align: start; vertical-align: top; }
  thead th { font-weight: 600; }
  tbody th { font-weight: 500; }
}

/* On a phone, each table row becomes a small card with a label above each value */
@media (max-width: 40rem) {
  .privacy-notice__table {
    table, tbody, tr, th, td { display: block; }
    thead { display: none; }
    tr { border-block-end: 1px solid oklch(var(--lch-gray-darker)); padding-block: 0.5em; }
    th, td { border: 0; padding: 0.15em 0; }
    tbody th { font-weight: 600; }
    td::before { content: attr(data-label); display: block; font-size: 0.8em; font-weight: 600; opacity: 0.7; }
  }
}