/* ===========================================================================
   The privacy notice and the terms of use (backend/legal/, served at /legal/).

   Linked after styles.css, whose tokens and base rules it builds on: the same
   ground, ink, accent, type scale and spacing as the app, so the notice reads
   as part of the product rather than as a page bolted on. Every value is a
   token; no hex, no raw z-index (styles.css's two greppable rules).

   A legal text is read, not operated: one column at prose width, generous
   line height, headings that can be linked to, and nothing that moves.
   =========================================================================== */

.legal { min-height: 100%; display: flex; flex-direction: column; }

.legal-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3); padding: var(--space-3) var(--gutter);
  background: var(--surface-raised); border-bottom: 1px solid var(--rule);
}
.legal-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-strong); font-weight: var(--weight-semibold); text-decoration: none; }
.legal-brand:hover { color: var(--ink-strong); text-decoration: underline; }
.legal-lang { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.legal-lang-k { color: var(--ink-faint); }
.legal-lang [aria-current="true"] { color: var(--ink-strong); font-weight: var(--weight-semibold); text-decoration: none; }

.legal-main { flex: 1; width: 100%; max-width: calc(var(--prose-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-12); }
.legal-doc { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--elev-1); }
.legal-doc h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.legal-doc h2 { font-size: var(--text-md); margin: var(--space-8) 0 var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.legal-doc h3 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }
.legal-doc p, .legal-doc li { line-height: var(--leading-loose); }
.legal-doc ul, .legal-doc ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); max-width: var(--prose-max); }
.legal-doc li + li { margin-top: var(--space-1); }
.legal-updated { color: var(--ink-muted); font-size: var(--text-sm); }
.legal-toc { margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); background: var(--surface-sunken); border-radius: var(--radius-md); }
.legal-toc ol { margin: 0; }

.legal-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: var(--row-pad-y-dense) var(--row-pad-x-dense); border-bottom: 1px solid var(--rule); }
.legal-table th { color: var(--ink-strong); font-weight: var(--weight-semibold); background: var(--surface-sunken); }

/* The one loud element: the person in charge is not named yet. It is the
   attention state, because the notice is incomplete until it is. */
.legal-missing {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  background: var(--state-attention-bg); color: var(--state-attention-fg);
  border: 1px solid var(--state-attention-rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--edge) var(--state-attention-edge);
}
/* A fact the notice cannot state until an operator confirms it (the hosting
   region): same attention colours as .legal-missing, set inside a list item. */
.legal-unconfirmed {
  display: block; margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--state-attention-bg); color: var(--state-attention-fg);
  border: 1px solid var(--state-attention-rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--edge) var(--state-attention-edge);
}
.legal-contact { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); }

.legal-index { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.legal-index a { display: block; padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.legal-index a:hover, .legal-index a:focus-visible { border-color: var(--ink-strong); background: var(--surface-hover); }
.legal-index-title { display: block; color: var(--ink-strong); font-weight: var(--weight-semibold); }
.legal-index-help { display: block; margin-top: var(--space-1); color: var(--ink-muted); font-size: var(--text-sm); }

.legal-foot { padding: var(--space-5) var(--gutter); color: var(--ink-muted); font-size: var(--text-xs); text-align: center; }

@media (max-width: 620px) {
  .legal-main { padding-top: var(--space-4); }
  .legal-doc { padding: var(--space-4); border-radius: var(--radius-md); }
  /* Three columns of sentences in 300px left the middle one a word wide, so the
     table of what is kept and where became a ladder of single words. On a phone
     each row is a block: what the information is, as its title, then where it
     is kept and what it is for, each under the column's name (the cells carry
     it as data-label). The header row stays for a screen reader only, and the
     cells keep their table semantics. */
  .legal-table-wrap { overflow-x: visible; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
  .legal-table tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
  .legal-table td { padding: 0; border: 0; }
  .legal-table td:first-child { color: var(--ink-strong); font-weight: var(--weight-semibold); }
  .legal-table td + td { margin-top: var(--space-2); }
  .legal-table td[data-label]::before {
    content: attr(data-label); display: block;
    color: var(--ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  }
}

@media print {
  .legal-bar, .legal-foot { display: none; }
  .legal-doc { border: 0; box-shadow: none; padding: 0; }
}