/* ============================================================
   The privacy notice: /privacy/ (web/privacy/index.html)

   A journal article without the signature column: journal.css gives the
   grid (contents | 720 prose | an empty column, so the words stay centred
   as an article's do), the contents list and its marker, the phone
   disclosure, the prose, the lists and the tables. This file adds only the
   "Last updated" line over the title, a quieter table on wide screens and,
   on narrow ones, each table row as a stacked card with its column
   headings repeated (data-label, ::before), so nothing scrolls sideways.

   Loaded after main.css, navigation.css and journal.css; pv- classes only.
   ============================================================ */

/* The head: the date in the byline's small type, the title, then the company as the lede. */
.pv-head .jr-story__title { margin-top: 14px; }
.pv-head .pv-lede { margin-top: 20px; }
.pv-updated time { font-variant-numeric: tabular-nums; }

/* Tables: the journal's Linen panel, a little tighter, since these carry long cells. */
.pv-table { min-width: 0; font-size: 15px; }
.pv-table th,
.pv-table td { padding: 14px 16px; overflow-wrap: break-word; }
.pv-table th:first-child,
.pv-table td:first-child { padding-left: 22px; }
.pv-table th:last-child,
.pv-table td:last-child { padding-right: 22px; }
.pv-table thead th { padding-top: 18px; padding-bottom: 10px; }
.pv-table--collect tbody th { width: 27%; }
.pv-table--suppliers tbody th { width: 24%; }
.pv-table--cookies tbody th { width: 21%; }

/* The contents disclosure (under 1100px): the list opens over the words below it instead of pushing
   them down. journal.js closes it once a section is chosen, and the smooth scroll is already on its
   way; were the list in the flow, the page would shrink by its height under the scroll and the heading
   would land above the screen (nine sections here, so a long way). Out of the flow, closing moves
   nothing. */
@media (max-width: 1099px) {
  .pv-page .jr-toc-small { position: relative; z-index: 3; }
  .pv-page .jr-toc-small[open] { border-radius: 23px 23px 0 0; }
  .pv-page .jr-toc-small__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 0 0 23px 23px;
    background: var(--linen);
  }
}

/* Narrow screens: each row is a Linen card. The row heading leads in ink; every other cell sits
   under a hairline, its column heading above it in the table header's small muted type. The header
   row is hidden from sight and kept for screen readers (the markup carries the table roles, so a
   browser that drops table semantics with display: block still announces them). */
@media (max-width: 760px) {
  .pv-table-wrap { overflow: visible; border-radius: 0; background: none; }
  .pv-table,
  .pv-table tbody,
  .pv-table tr,
  .pv-table th,
  .pv-table td { display: block; width: auto; }
  .pv-table--collect tbody th,
  .pv-table--suppliers tbody th,
  .pv-table--cookies tbody th { width: auto; }
  .pv-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .pv-table tbody { display: flex; flex-direction: column; gap: 12px; }
  .pv-table tr { padding: 18px 20px 20px; border-radius: var(--radius); background: var(--linen); }
  .pv-table th,
  .pv-table td,
  .pv-table th:first-child,
  .pv-table td:first-child,
  .pv-table th:last-child,
  .pv-table td:last-child { padding: 0; border-top: 0; }
  .pv-table tbody th { font: 400 16px/1.45 var(--font-text); color: var(--ink); }
  .pv-table td { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .pv-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font: 400 12px/1.45 var(--font-text);
    color: var(--jr-muted);
  }
}

@media print {
  .pv-table-wrap { background: none; }
}

/* The byline-style line is a flex row (journal.css), which drops the space before the date */
.pv-updated { gap: 0.3em; }