/* Legal pages (terms, privacy, cookies, legal notice): a reading page like
   the guide. One measure, h2 sections, definition lists and plain tables. */
@layer page {
  .legal { padding-bottom: var(--sp-6); }
  .legal__layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); }

  /* Title, summary, version and the responsible operator. */
  .legal__head { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); }
  .legal__head h1 { max-width: 20ch; }
  .legal__summary { color: var(--ink-2); font-size: var(--fs-l); line-height: 1.4; text-wrap: pretty; }
  .legal__meta { display: flex; flex-wrap: wrap; gap: 0.25rem var(--sp-3); color: var(--ink-2); font-size: var(--fs-s); }
  .legal__meta span + span::before { content: "·"; margin-right: var(--sp-3); color: var(--line-2); }
  .legal__operator { display: grid; gap: 0.2rem; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-s); }
  .legal__operator dt { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
  .legal__operator dd { display: flex; flex-wrap: wrap; gap: 0.25rem var(--sp-3); }
  .legal__operator dd a,
  .legal__contact a,
  .legal-dl dd a {
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
  }

  /* Rail: the table of contents, the four legal pages, the contact. On a
     phone the rail dissolves: the contents sit before the body, the rest after. */
  .legal__rail { display: contents; }
  .legal__rail-title { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); margin-bottom: var(--sp-2); }
  .legal__toc { order: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
  .legal__toc-list { counter-reset: toc; display: grid; }
  .legal__toc-list li { counter-increment: toc; }
  .legal__toc-list a { display: flex; gap: var(--sp-3); padding: 0.3rem 0; color: var(--ink); text-decoration: none; font-size: var(--fs-s); line-height: 1.35; }
  .legal__toc-list a::before { content: counter(toc, decimal-leading-zero); flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); padding-top: 0.15em; }
  .legal__toc-list a:hover { color: var(--sea-ink); }
  .legal__toc-list a:hover span { text-decoration: underline; text-underline-offset: 0.14em; }
  .legal__aside { order: 3; display: grid; gap: var(--sp-5); }
  .legal__family { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .legal__family a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.3rem 0.8rem; border: 1px solid var(--line-2); border-radius: 2rem; background: var(--paper); color: var(--ink); font-size: var(--fs-s); text-decoration: none; }
  .legal__family a:hover { border-color: var(--ink); }
  .legal__family a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .legal__contact { font-size: var(--fs-s); }
  .legal__contact p + p { margin-top: 0.2rem; }
  .legal__body { order: 2; }
  .legal__foot { order: 4; }

  /* Body: one measure, a clear rhythm of sections. */
  .legal__body { display: grid; row-gap: var(--sp-7); min-width: 0; }
  .legal__section { display: grid; gap: var(--sp-4); scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
  .legal__section h2 { font-size: var(--fs-xl); }
  .legal__section h3 { font-size: var(--fs-m); }
  .legal__prose { line-height: 1.6; }
  .legal__lead { font-size: 1.1875rem; line-height: 1.5; }
  .legal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }

  /* Definition rows: the label on its own line, from 48em beside the value. */
  .legal-dl { border-top: 1px solid var(--line); font-size: var(--fs-s); }
  .legal-dl > div { display: grid; gap: 0.2rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .legal-dl dt { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
  .legal-dl dd { display: grid; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
  .legal-dl dd > span { color: var(--ink-2); }
  .legal-activities { display: grid; gap: var(--sp-5); }
  .legal-activity { display: grid; gap: var(--sp-2); }

  /* Storage inventory: one table per group, stacked rows on a phone. */
  .legal-storage { display: grid; gap: var(--sp-2); }
  .legal-storage h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
  .legal-storage__intro { color: var(--ink-2); font-size: var(--fs-s); }
  .legal-table { width: 100%; font-size: var(--fs-s); border-top: 1px solid var(--line-2); margin-top: var(--sp-2); }
  .legal-table thead { display: none; }
  .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
  .legal-table tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .legal-table td { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--sp-2); padding: 0.15rem 0; }
  .legal-table td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); padding-top: 0.15em; }
  .legal-table code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125em; overflow-wrap: break-word; }

  .legal__foot { border-top: 1px solid var(--line); padding-top: var(--sp-4); font-size: var(--fs-s); color: var(--ink-2); display: grid; gap: var(--sp-2); }
  .legal__foot .legal__rail-title { display: inline; margin: 0 var(--sp-2) 0 0; }
  .legal__foot strong { color: var(--ink); }
  .legal__foot time { font-variant-numeric: tabular-nums; }

  @media (min-width: 48em) {
    .legal__prose { font-size: 1.125rem; }
    .legal__lead { font-size: 1.3125rem; }
    .legal__operator dd > span::after { content: "·"; margin-left: var(--sp-3); color: var(--line-2); }
    .legal-dl > div { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-4); }
    .legal-activity .legal-dl > div { grid-template-columns: 7rem minmax(0, 1fr); }
    .legal-table thead { display: table-header-group; }
    .legal-table tbody { display: table-row-group; }
    .legal-table tr { display: table-row; }
    .legal-table td { display: table-cell; padding: var(--sp-3) var(--sp-2) var(--sp-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
    .legal-table td::before { content: none; }
    .legal-table th { text-align: left; font-weight: 600; font-size: var(--fs-xs); color: var(--ink-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; border-bottom: 1px solid var(--line-2); }
    .legal-table td:first-child { width: 14rem; }
    .legal-table td:nth-child(2) { width: 7rem; }
    .legal-table td:last-child { width: 9rem; }
  }
  @media (min-width: 64em) {
    .legal__layout { grid-template-columns: 12rem minmax(0, 44rem); column-gap: var(--sp-8); row-gap: var(--sp-6); justify-content: start; }
    /* The storage inventory has four columns: the cookies page reads wider. */
    .legal--cookies .legal__layout { grid-template-columns: 12rem minmax(0, 48rem); }
    .legal__head { grid-column: 2; padding-top: var(--sp-4); }
    .legal__rail { display: grid; gap: var(--sp-6); grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--header-h) + var(--sp-5)); align-self: start; }
    .legal__toc { border: 0; padding: 0; }
    .legal__family { display: grid; gap: 0; }
    .legal__family a { display: flex; min-height: 0; padding: 0.3rem 0; border: 0; border-radius: 0; background: none; }
    .legal__family a:hover span, .legal__family a:hover { text-decoration: underline; text-underline-offset: 0.14em; }
    .legal__family a[aria-current="page"] { background: none; color: var(--ink); font-weight: 650; }
    .legal__body { grid-column: 2; grid-row: 2; row-gap: calc(var(--sp-7) + var(--sp-2)); }
    .legal__foot { grid-column: 2; }
  }
}