/* legal — help, privacy, terms and data deletion page */
@layer components {
  .legal {
    padding-block: var(--space-4) var(--space-6);
  }

  .legal-bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    border-block-end: var(--border-width) solid var(--border);
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    backdrop-filter: blur(var(--space-1));
  }
  .legal-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-block-size: calc(var(--control-lg) + var(--space-2));
  }
  .legal-bar__brand {
    --logo-h: var(--space-4);
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
    &:focus-visible { outline: none; box-shadow: var(--ring); }
  }

  .legal-toc {
    --gap: var(--space-1);
  }
  .legal-toc__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--control-sm);
    padding-inline: var(--space-2);
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--border);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast);
    &:hover { border-color: var(--accent-line); color: var(--ink); }
    &:focus-visible { outline: none; box-shadow: var(--ring); }
  }

  .legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: var(--space-3);
    align-items: start;
  }
  .legal-section {
    min-inline-size: 0;
    scroll-margin-block-start: var(--space-10);
    > .card { block-size: 100%; }
  }
  .legal-section--wide { grid-column: 1 / -1; }

  .legal-body {
    display: grid;
    gap: var(--space-2);
  }
  .legal-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink);
    .icon { color: var(--accent-text); }
  }
  .legal-section__intro,
  .legal-item p,
  .legal-steps li {
    color: var(--ink-2);
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .legal-items {
    display: grid;
    gap: var(--space-2);
  }
  .legal-section--wide .legal-items {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-2) var(--space-4);
  }
  .legal-section--wide .legal-item:only-child {
    display: block;
    columns: 2 22rem;
    column-gap: var(--space-4);
    p { break-inside: avoid; margin-block-end: var(--space-1); }
  }
  .legal-item {
    display: grid;
    align-content: start;
    gap: var(--space-0-5);
  }
  .legal-item__heading {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
    color: var(--ink);
  }
  .legal-steps {
    display: grid;
    gap: var(--space-1);
    padding-inline-start: var(--space-3);
  }
  .legal-contact {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--text-sm);
    a { color: inherit; font-weight: var(--weight-semibold); }
  }

  .legal-footer {
    padding-block: var(--space-3);
    color: var(--muted);
    font-size: var(--text-xs);
  }
}