/* =====================================================================================================================
   MURMUR SITE · THE LEGAL PAGES (legal.css), used by privacy.html, terms.html, acceptable-use.html, child-safety.html,
   delete-account.html and law-enforcement.html (and their French twins, *-fr.html).
   Built on site.css (tokens, type, buttons, fields, callouts, kv lists, steps) and on wiki.css + wiki.js, loaded as
   they are: the hero, the sticky Contents column on desktop, the Contents card and its pill below 1024 px, the "#"
   copy links, the flash on arrival, Back to top and the print rules all come from the wiki. This file only sets what
   a long legal text needs on top of them, scoped to main.legal.

   1. Rhythm ............ sections (section.wiki-group.legal-sec > h2), sub-sections (div.wiki-article.legal-sub > h3),
                          the plain first sentence of a section (p.legal-lede); text fills the column
   2. Title block ....... no language picker: the header's FR is the only language link
   3. In short .......... the summary of the whole page, first (section.legal-short): one raised card
   4. Contents .......... a flat list of the sections (ol.toc__list.legal-toc), labels may wrap
   5. Tables ............ .lt-wrap > table.lt (lt--2, lt--3, lt--4; lt--long gets a sticky header). Below 800 px of
                          column (phones, iPad portrait, and 1024 to 1199 px beside the contents): 3 and 4 columns become one card
                          per row, each value under its label (data-label); below 600 px, 2 columns become one card
                          with stacked pairs. Never a side scroll. A row label stays short
                          (about 6 words); its detail goes in a quieter line under it (th > span.lt-note). A group of
                          one item is a card of pairs instead (dl.kv.legal-kv: What, Why, Where, How long). An app
                          label in a cell goes in span.lt-keep, with plain spaces between its words: whole when it
                          fits, wrapped inside only when the cell is narrower than the label.
   6. Steps ............. ol.steps.legal-steps (sentences, bold only where the text says so; a step may hold a list).
                          No page has a form: an account is deleted only in the app
   7. Forced colors, print

   Every color is a token: light and dark follow site.css, and print always takes the light ones.
   ===================================================================================================================== */


/* =====================================================================================================================
   1. RHYTHM
   ===================================================================================================================== */
.legal .wiki-group { margin-top: var(--s-14); }
@media (min-width: 768px) { .legal .wiki-group { margin-top: var(--s-16); } }

/* Section titles: Fraunces, one step under the wiki's group titles (a legal page has many of them) */
.legal .wiki-title--group { font-size: 26px; line-height: 32px; }
@media (min-width: 768px) { .legal .wiki-title--group { font-size: 30px; line-height: 38px; } }
@media (min-width: 1280px) { .legal .wiki-title--group { font-size: 32px; line-height: 40px; } }
.legal .wiki-title--group + * { margin-top: var(--s-4); }
@media (min-width: 768px) { .legal .wiki-title--group + * { margin-top: var(--s-5); } }

/* Flow inside a section and a sub-section */
.legal-sec > * + *, .legal-sub > * + * { margin-top: var(--s-4); }
.legal-sec > .w-wide, .legal-sub > .w-wide, .legal-sec > .w-wide + *, .legal-sub > .w-wide + * { margin-top: var(--s-6); }
.legal-sec > .wiki-related, .legal-sub > .wiki-related { margin-top: var(--s-5); }

/* Sub-sections: Inter, with room above */
.legal-sec > .legal-sub { margin-top: var(--s-10); }
@media (min-width: 768px) { .legal-sec > .legal-sub { margin-top: var(--s-12); } }
.legal-sub > .wiki-title { font-family: var(--font-ui); font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 768px) { .legal-sub > .wiki-title { font-size: 20px; line-height: 28px; } }
.legal-sub > .wiki-title + * { margin-top: var(--s-3); }
.legal-sub > .wiki-title + .w-wide { margin-top: var(--s-4); }

/* The plain first sentence of a section, a little larger than the text that follows */
.legal-lede { font-size: 18px; line-height: 28px; color: var(--text); }
@media (min-width: 768px) { .legal-lede { font-size: 19px; line-height: 30px; letter-spacing: -0.005em; } }

/* Text */
.legal b { font-weight: 600; color: var(--text); }
.legal .callout b { color: inherit; }
.legal .w-dots { gap: 10px; }
.legal-sublist { margin-top: 10px; }
.legal-label + * { margin-top: var(--s-2) !important; }
.legal-sec .callout, .legal-sub .callout { font-size: 16px; line-height: 24px; }
.legal-contacts dd a { white-space: nowrap; }
.legal-sec a:not([class]), .legal-sub a:not([class]), .legal-short a:not([class]), .legal-hero a:not([class]) {
  color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link) 38%, transparent); transition: text-decoration-color var(--dur-sm) var(--ease);
}
.legal-sec a:not([class]):hover, .legal-sub a:not([class]):hover, .legal-short a:not([class]):hover, .legal-hero a:not([class]):hover { text-decoration-color: currentColor; }
.legal-duo .w-card__title { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.005em; }

/* The end of the page */
.legal .wiki-main > .wiki-backtop { margin-top: var(--s-16); }


/* =====================================================================================================================
   2. TITLE BLOCK
   ===================================================================================================================== */

/* No language picker on the page: the header's FR (EN on the French pages) is the site's only language link. */


/* =====================================================================================================================
   3. IN SHORT
   ===================================================================================================================== */
.legal-short {
  padding: var(--s-6) var(--s-5) var(--s-6) var(--s-6); border-radius: 20px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1);
}
@media (min-width: 768px) { .legal-short { padding: var(--s-8) var(--s-10) var(--s-8) var(--s-8); } }
.legal .wiki-main > .legal-short:first-child { margin-top: var(--s-10); }
@media (min-width: 1024px) { .legal .wiki-main > .legal-short:first-child { margin-top: var(--s-12); } }
.legal-short > .wiki-title--group { font-size: 24px; line-height: 30px; }
@media (min-width: 768px) { .legal-short > .wiki-title--group { font-size: 26px; line-height: 32px; } }
.legal .legal-short__list { gap: var(--s-3); }
.legal-short__list > li { font-size: 16px; line-height: 25px; color: var(--text); }
@media (min-width: 768px) { .legal-short__list > li { font-size: 18px; line-height: 28px; } }
.legal-short__list > li::before { top: calc((1lh - 6px) / 2); width: 6px; height: 6px; }


/* =====================================================================================================================
   4. CONTENTS
   One flat list of the page's sections (no search: a page of ten to twenty sections doesn't need it). Long labels wrap.
   ===================================================================================================================== */
.legal .toc__link { white-space: normal; }
.legal-toc { margin-top: var(--s-4); }
@media (min-width: 600px) and (max-width: 1023px) {
  .legal-toc { columns: 2; column-gap: var(--s-8); border-left: 0; }   /* the rule would only follow the first column */
  .legal-toc > li { break-inside: avoid; }
  .legal-toc .toc__link { padding-left: 0; }
}
@media (min-width: 1024px) {
  .legal .toc__scroll { margin-top: 0; }
  .legal-toc { margin-top: 0; }
}


/* =====================================================================================================================
   5. TABLES
   ===================================================================================================================== */
.lt-wrap { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.lt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
.lt thead th {
  padding: 14px 16px; border-bottom: 1px solid var(--divider); background: var(--surface); text-align: left; white-space: nowrap;
  font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2);
}
.lt thead th:first-child { padding-left: 20px; border-top-left-radius: 20px; }
.lt thead th:last-child { padding-right: 20px; border-top-right-radius: 20px; }
.lt--long thead th { position: sticky; top: var(--header-h, 64px); z-index: 2; }
.lt tbody th, .lt tbody td { padding: 16px; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; }
.lt tbody th { padding-left: 20px; font-weight: 500; color: var(--text); }
.lt tbody td { color: var(--text-2); }
.lt tbody td:last-child { padding-right: 20px; }
.lt tbody tr:last-child > * { border-bottom: 0; }
.lt tbody tr:last-child > :first-child { border-bottom-left-radius: 20px; }
.lt tbody tr:last-child > :last-child { border-bottom-right-radius: 20px; }
/* Four columns: the same widths in every table, so the small tables of a section line up one under the other. The
   first is the widest: it holds the label and its detail (span.lt-note) */
.lt--4 { table-layout: fixed; }
.lt--4 thead th:nth-child(1) { width: 33%; }
.lt--4 thead th:nth-child(2) { width: 21%; }
.lt--4 thead th:nth-child(3) { width: 20%; }
.lt--4 thead th:nth-child(4) { width: 26%; }
.lt--3 tbody th { min-width: 160px; }   /* three columns size to their content */
/* Two columns: as wide as the column, like the text and the other tables */
.lt--2 tbody th { width: 52%; }
/* A short row label, then its detail in a quieter line under it */
.lt tbody th .lt-note { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--text-2); }
/* An app label in a cell (« Dernière connexion »): kept whole when it fits, wrapped inside only when the cell is
   narrower than the label (a fixed column cannot grow, and text joined by no-break spaces would cross the card) */
.lt .lt-keep { display: inline-block; max-width: 100%; }

/* A group of one item: a card of pairs (What, Why, Where, How long), as wide as the tables around it */
.legal-sub > .legal-kv {
  padding: var(--s-1) var(--s-5); border-radius: 20px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1);
}
.legal-kv > div { padding: 14px 0; }
.legal-kv dt { font-size: 13px; line-height: 22px; color: var(--text-2); }
.legal-kv > div:first-child dd { color: var(--text); }
@media (min-width: 480px) { .legal-kv > div { grid-template-columns: minmax(96px, 20%) 1fr; } }
/* From 768 px, beside the 4-column tables of a section, the value starts where their Why column's text does */
@media (min-width: 768px) { .legal-sub > .legal-kv > div { grid-template-columns: calc(33% - 15px) 1fr; } }
@media (max-width: 479px) {   /* stacked, its labels look like the table cards' */
  .legal-kv dt { font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
  .legal-kv dd { margin-top: 2px; }
}

/* Below 800 px of column (phones, iPad portrait at 768 px, and from 1024 to 1199 px, where the contents sit beside the
   article and leave it 624 to 799 px), a table of 3 or 4 columns becomes one card per row: cells of 90 to 170 px would
   stack two words a line. A table of 2 columns keeps its two columns down to 600 px. */
@container wiki (max-width: 799px) {
  .lt--3, .lt--3 tbody, .lt--3 tr, .lt--3 th, .lt--3 td,
  .lt--4, .lt--4 tbody, .lt--4 tr, .lt--4 th, .lt--4 td { display: block; width: auto !important; }
  .lt--3 thead, .lt--4 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  /* 3 and 4 columns: one card per row, each value under its label */
  .lt-wrap--3, .lt-wrap--4 { background: none; box-shadow: none; border-radius: 0; }
  .lt--3 tbody, .lt--4 tbody { display: grid; gap: var(--s-3); }
  .lt--3 tbody tr, .lt--4 tbody tr {
    padding: var(--s-4) var(--s-5) var(--s-1); border-radius: var(--r-card);
    background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1);
  }
  .lt--3 tbody th, .lt--3 tbody td, .lt--4 tbody th, .lt--4 tbody td { border: 0; border-radius: 0 !important; }
  .lt--3 tbody th, .lt--4 tbody th { padding: 0 0 var(--s-3); font-size: 16px; line-height: 24px; }
  .lt--3 tbody td, .lt--4 tbody td { padding: 10px 0 12px; border-top: 1px solid var(--divider); }
  .lt--3 tbody td::before, .lt--4 tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
  }
}
@container wiki (max-width: 599px) {
  .lt--2, .lt--2 tbody, .lt--2 tr, .lt--2 th, .lt--2 td { display: block; width: auto !important; }
  .lt--2 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lt--2 tbody th, .lt--2 tbody td { padding: 0; border: 0; border-radius: 0 !important; }

  /* 2 columns: one card, a pair per row */
  .lt--2 tbody tr { padding: 12px 18px 13px; border-bottom: 1px solid var(--divider); }
  .lt--2 tbody tr:last-child { border-bottom: 0; }
  .lt--2 tbody td { margin-top: 2px; }
}


/* =====================================================================================================================
   6. STEPS
   ===================================================================================================================== */
.legal-steps .step__title { font-size: 16px; line-height: 24px; font-weight: 400; }
@media (min-width: 768px) { .legal-steps .step__title { font-size: 17px; line-height: 26px; } }
.legal-steps .step { padding-bottom: var(--s-5); }
.legal-steps .step:last-child { padding-bottom: 0; }
.legal-sec > .legal-steps + *, .legal-sub > .legal-steps + * { margin-top: var(--s-6); }
.legal-steps .step__body > .legal-sublist { font-size: 16px; line-height: 24px; }
@media (min-width: 768px) { .legal-steps .step__body > .legal-sublist { font-size: 17px; line-height: 26px; } }


/* =====================================================================================================================
   7. FORCED COLORS, PRINT
   ===================================================================================================================== */
@media (forced-colors: active) {
  .legal-short, .lt-wrap, .lt tbody tr, .legal-kv { border: 1px solid CanvasText; }
}

@media print {
  .site-footer { display: none !important; }
  .legal .wiki-group { margin-top: 28px; }
  .legal-short { padding: 16px 20px; box-shadow: none; border: 1px solid #ccc; }
  .lt-wrap, .lt tbody tr, .legal-kv { box-shadow: none !important; }
  .lt-wrap, .legal-kv { border: 1px solid #ccc; }
  .lt--long thead th { position: static; }
  .legal-short, .lt tbody tr, .w-card, .callout, .kv { break-inside: avoid; }
  .legal-sec a:not([class]), .legal-sub a:not([class]), .legal-short a:not([class]), .legal-hero a:not([class]) {
    color: inherit; font-weight: inherit; text-decoration: none;
  }
  /* On paper, a link to another page says where it goes (in-page anchors and email addresses already do) */
  .legal-sec a[href*=".html"]:not([class])::after, .legal-sub a[href*=".html"]:not([class])::after,
  .legal-short a[href*=".html"]:not([class])::after { content: " (murmur.free/" attr(href) ")"; font-weight: 400; }
}