/* ==========================================================================
 * WattWisely — legal index and the three documents
 * ==========================================================================
 * These are read differently to every other page on the site: not scanned, but
 * searched. Somebody arrives looking for one clause. So the priorities here are
 * a table of contents that stays put, headings that are findable, and a measure
 * that does not punish anyone who actually reads the whole thing.
 */

@layer pages {

  /* -- Layout --------------------------------------------------------------- */

  .legal-layout {
    display: grid;
    gap: var(--ww-space-8);
  }

  @media (min-width: 1024px) {
    /* Contents first in the source and first on screen: it is navigation, and
       navigation that comes after the thing it navigates is decoration. */
    .legal-layout {
      grid-template-columns: 16rem 1fr;
      gap: var(--ww-space-10);
      align-items: start;
    }

    .legal-toc {
      position: sticky;
      top: calc(var(--ww-header-h, 4.5rem) + var(--ww-space-6));
    }
  }

  /* -- Contents ------------------------------------------------------------- */

  .legal-toc__title {
    font-size: var(--ww-step--1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ww-muted);
  }

  .legal-toc ol {
    margin-top: var(--ww-space-4);
    padding: 0;
    max-width: none;
    list-style: none;
    counter-reset: toc;
  }

  .legal-toc li {
    margin-top: 0;
    counter-increment: toc;
  }

  /* Standalone navigation links, so WCAG 2.5.8's inline exception does not
     apply — the padding is what carries them past 24px, not the text size. */
  .legal-toc a {
    display: block;
    padding: var(--ww-space-2) 0 var(--ww-space-2) 2rem;
    position: relative;
    font-size: var(--ww-step--1);
    color: var(--ww-body);
    text-decoration: none;
    border-inline-start: 2px solid var(--ww-border);
    margin-inline-start: -2px;
  }

  .legal-toc a::before {
    content: counter(toc);
    position: absolute;
    left: var(--ww-space-4);
    color: var(--ww-muted);
    font-variant-numeric: tabular-nums;
  }

  .legal-toc a:hover {
    color: var(--ww-primary);
    border-inline-start-color: var(--ww-primary);
  }

  .legal-toc__other {
    display: flex;
    flex-direction: column;
    gap: var(--ww-space-2);
    margin-top: var(--ww-space-6);
    padding-top: var(--ww-space-5);
    border-top: 1px solid var(--ww-border);
    font-size: var(--ww-step--1);
  }

  .legal-toc__other a { min-height: 24px; display: inline-flex; align-items: center; }

  /* -- Document ------------------------------------------------------------- */

  .legal-doc {
    max-width: 42rem;
    /* A grid item defaults to min-width: auto, which means it refuses to shrink
       below its own min-content — and the processing table's min-width of 44rem
       propagates all the way up through it. Without this the document column
       measured 672px inside a 343px track on a phone, and the whole page
       scrolled sideways rather than the table scrolling inside its own box. */
    min-width: 0;
  }

  .legal-doc__intro { font-size: var(--ww-step-1); color: var(--ww-ink); }

  .legal-section { margin-top: var(--ww-space-10); }

  .legal-section > * + * { margin-top: var(--ww-space-5); }

  .legal-section h2 {
    font-size: var(--ww-step-2);
    padding-bottom: var(--ww-space-4);
    border-bottom: 1px solid var(--ww-border);
  }

  /* Numbered so a clause can be cited in an email — "section 4, third bullet"
     is how these documents actually get discussed. */
  .legal-section__number {
    display: inline-block;
    min-width: 1.6em;
    color: var(--ww-muted);
    font-variant-numeric: tabular-nums;
  }

  .legal-section h3 {
    font-size: var(--ww-step-1);
    margin-top: var(--ww-space-8);
  }

  .legal-section ul { padding-inline-start: 1.2em; }

  .legal-section li + li { margin-top: var(--ww-space-3); }

  /* -- Processing table ----------------------------------------------------- */
  /* The Article 13 table — purpose, data, legal basis, retention. Four columns
     of prose will not fit a phone, so it scrolls inside its own box rather than
     pushing the page sideways. */

  .table-scroll {
    overflow-x: auto;
    margin-top: var(--ww-space-6);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-md);
  }

  .legal-table {
    min-width: 44rem;
    font-size: var(--ww-step--1);
  }

  /* The processing table is the densest thing in the document and the one
     least worth scrolling. Let it out past the prose measure into the slack
     in its column: 42rem is the right width for paragraphs and the wrong one
     for four columns of prose.

     Held to 1280 rather than 1024. The breakout spends 8rem of slack that only
     exists once the viewport is wider than the content column plus gutters —
     at exactly 1024 there is none, so `100% + 8rem` ran 96px past the viewport
     and scrolled the whole page sideways. */
  @media (min-width: 1280px) {
    .table-scroll { width: calc(100% + 8rem); }
  }

  .legal-table th,
  .legal-table td { vertical-align: top; }

  .legal-table thead th {
    background: var(--ww-surface);
    white-space: nowrap;
  }

  .legal-table tbody th {
    font-weight: var(--ww-weight-semibold);
    color: var(--ww-ink);
    width: 22%;
  }

  .legal-table tr:last-child :is(th, td) { border-bottom: 0; }

  /* -- Unfilled gaps -------------------------------------------------------- */
  /* Amber, because this is the one thing on the site that is deliberately
     unfinished and must not be mistaken for finished prose. */

  .legal-todo {
    margin-top: var(--ww-space-5);
    padding: var(--ww-space-5);
    background: var(--ww-amber-100);
    border-inline-start: 3px solid var(--ww-warning);
    border-radius: 0 var(--ww-radius-md) var(--ww-radius-md) 0;
  }

  .legal-todo p { font-size: var(--ww-step--1); color: var(--ww-ink); }

  .legal-todo__label {
    font-weight: var(--ww-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ww-space-2);
  }

  /* -- Draft banner --------------------------------------------------------- */

  .legal-draft {
    padding: var(--ww-space-5) var(--ww-space-6);
    margin-bottom: var(--ww-space-9);
    background: var(--ww-amber-100);
    border: 1px solid var(--ww-warning);
    border-radius: var(--ww-radius-md);
    color: var(--ww-ink);
    max-width: var(--ww-measure);
  }

  .legal-draft__title {
    font-weight: var(--ww-weight-bold);
    margin-bottom: var(--ww-space-2);
  }

  .legal-draft p { font-size: var(--ww-step--1); }

  .legal-draft code {
    padding: 0.1em 0.35em;
    background: var(--ww-white);
    border-radius: var(--ww-radius-sm);
  }

  /* -- Index ---------------------------------------------------------------- */

  .legal-index__list {
    display: grid;
    gap: var(--ww-space-5);
    padding: 0;
    max-width: none;
    list-style: none;
  }

  .legal-index__list li { margin-top: 0; }

  .legal-index__card { display: block; }

  .legal-index__head { align-items: center; }

  .legal-index__card .card__title { font-size: var(--ww-step-2); }

  .legal-index__meta {
    display: block;
    margin-top: var(--ww-space-4);
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  .legal-summary__title { margin-top: var(--ww-space-3); }

  .legal-summary .prose { margin-top: var(--ww-space-6); }

  .legal-summary__points { margin-top: var(--ww-space-7); }
}