/* /PrivacyPolicy/ and /TermsOfService/ - scoped to body.page-legal.
   Everything here assumes prospira.css has already loaded: the tokens, the nav,
   the footer, .reveal, .btn, .scroll-slim and .eyebrow all come from there.

   THE IDEA, in one paragraph, because the CSS only makes sense with it.
   People do not read a legal page. They arrive with exactly one question - can I
   get my money back, do you sell my data - and they are already half expecting
   to be deceived. So every section opens with the real question as its heading
   and answers it in one plain sentence before any clause begins. The answer is
   not a summary of the clause; it IS the rule, said the way somebody would say
   it out loud. The clause underneath is what it means in detail. Put those two
   next to each other and the reader can see they agree, which is the only thing
   that actually dissolves the suspicion.

   That decision is what the type does here: prose is interpretation, and
   anything CHECKABLE is set in mono - section numbers, dates, database columns,
   retention periods. The site already uses that vocabulary in the storage panel
   in the corner, and a reader who saw it there meets the same artifact here at
   full size. */

/* ---------- header ---------------------------------------------------------
   No hero art, no gradient, no floating card. Every other page on this site
   opens with something moving; this one opens with a date. That is the whole
   gesture - the page that is supposed to be sober looks sober, and the contrast
   with the rest of the site is doing the work an illustration would do badly. */
.page-legal {
  /* --text-low composites to 4.0:1 on this ground. Everything it carries HERE is
     11-14px, so it fails AA - and this is the one page on the site that gets read
     rather than scanned. 0.58 alpha measures 5.5:1 and still reads as secondary.
     Scoped to this page: --text-low is used site-wide at sizes these pages do not
     have, and re-tuning a global token is a separate review. */
  --lg-quiet: rgba(214, 225, 245, 0.58);
  /* #2a5bff is a FILL colour. As 12px text it measures 3.96:1, which made the
     section numbers - this document's clause addresses - the least legible thing
     on the page. This is the palette's lighter royal, at 5.95:1. */
  --lg-num: #5a82ff;
}

.page-legal .lg-hero {
  /* The rhythm /about/ and /contact/ open on, measured rather than guessed. This
     was 41px looser, and on the one page carrying no hero artwork that extra gap
     read as an unfinished page rather than a composed one. */
  padding: calc(var(--nav-h) + clamp(36px, 5.5vw, 58px)) 0 clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--border-soft);
}
.page-legal .lg-hero-in,
.page-legal .lg-body {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px);
}
.page-legal .lg-title {
  margin: 14px 0 0;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-hi);
}
.page-legal .lg-lede {
  max-width: 54ch;
  margin: 16px 0 0;
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.6;
  color: var(--text-mid);
}

/* The three facts a reader checks before deciding whether to trust the rest:
   when it started applying, what it covers, and whether a human is reachable.
   A definition list because that is literally what it is. */
.page-legal .lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-soft);
}
.page-legal .lg-meta div { display: flex; flex-direction: column; gap: 4px; }
.page-legal .lg-meta dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lg-quiet);
}
.page-legal .lg-meta dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-mid);
}
.page-legal .lg-meta time { font-family: var(--font-mono); }

/* ---------- the two columns ------------------------------------------------
   Document left, contents right. Right because the reader's eye returns to the
   LEFT margin on every single line of a long text, and a column of links parked
   there is in the way of that return for the whole page. On the right it is out
   of the reading path until it is wanted. */
.page-legal .lg-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: clamp(36px, 5vw, 76px);
  padding-block: clamp(34px, 5vw, 60px) var(--section-gap);
}
.page-legal .lg-doc { max-width: 68ch; }

/* ---------- a section ------------------------------------------------------ */
.page-legal .lg-sec {
  padding-block: clamp(26px, 3.4vw, 40px);
  /* Jumping to #withdrawal must not park the heading under the fixed nav.
     Matches the 140px activation line in js/legal.js - move one, move both. */
  scroll-margin-top: calc(var(--nav-h) + 40px);
}
.page-legal .lg-sec + .lg-sec { border-top: 1px solid var(--border-soft); }
.page-legal .lg-sec:first-child { padding-top: 0; }

/* The number is an address, not decoration: legal text gets cited by clause, and
   these headings are anchors you can link someone straight to. Which is also why
   the whole heading is the link and the # only shows when you are on it. */
.page-legal .lg-h { margin: 0; }
.page-legal .lg-anchor {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(1.18rem, 2.4vw, 1.42rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  text-decoration: none;
}
.page-legal .lg-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--lg-num);
  font-variant-numeric: tabular-nums;
}
.page-legal .lg-hash {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--lg-quiet);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.page-legal .lg-anchor:hover .lg-hash,
.page-legal .lg-anchor:focus-visible .lg-hash { opacity: 1; }

/* The answer. Bigger and brighter than the clause under it, and never longer
   than one sentence - the moment it needs two it has stopped being an answer
   and become a summary, which is a different and much less useful thing. */
.page-legal .lg-a {
  margin: 14px 0 0;
  font-size: clamp(1.02rem, 2vw, 1.13rem);
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: -0.01em;
  color: #dde7ff;
}
/* :not(.lg-a) is load-bearing. .lg-a IS a <p>, so this rule at (0,2,1) outranked
   .page-legal .lg-a at (0,2,0) and handed the answer the clause's own size and
   colour - the whole answer-first idea rendered as body text in weight 500. */
.page-legal .lg-sec p:not(.lg-a) {
  margin: 13px 0 0;
  font-size: 0.945rem;
  /* Looser than the rest of the site on purpose. This is the only page anyone
     reads top to bottom, and 1.5 is a line-height for scanning, not reading. */
  line-height: 1.75;
  color: var(--text-mid);
}
.page-legal .lg-sec strong { color: #dde7ff; font-weight: 600; }
/* `p a`, not `a`. Scoped to the element it needs, because `.lg-sec a` is
   (0,2,1) against `.lg-anchor`'s (0,2,0) - the extra element selector outranked
   it and painted every section HEADING underlined and link-blue. */
.page-legal .lg-sec p a { color: #a8c4ff; text-decoration: underline; text-underline-offset: 3px; }
.page-legal .lg-sec p a:hover { color: #dde7ff; }
/* Polish names of Polish institutions, kept in Polish because that is what you
   would have to type to find them. */
.page-legal .lg-pl { font-style: italic; color: var(--lg-quiet); }
/* Element + class rather than !important: both of these carried one only to win
   against the clause rule above, which no longer matches them by element alone. */
.page-legal .lg-sec p.lg-note {
  font-size: 0.855rem;
  color: var(--lg-quiet);
}
.page-legal .lg-act { margin-top: 18px; }
.page-legal .lg-act .btn { min-height: 42px; padding: 10px 20px; font-size: 0.88rem; }

/* A note, not a warning. This was an amber panel, which made it the only coloured
   thing on either page - so the first element catching a reader's eye on the Terms
   was a box announcing that something was missing. That alarm was written for
   whoever maintains the site and was being shown to the customer instead. It lives
   in check-pages.py now, which refuses to pass while the seller's details are
   unset. Still boxed, because it is a status rather than a term - just not
   shouting. */
.page-legal .lg-sec p.lg-todo {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-card);
  background: rgba(150, 180, 255, 0.028);
  font-size: 0.9rem;
  color: var(--text-mid);
}
.page-legal .lg-todo strong { color: #dde7ff; font-weight: 600; }

/* ---------- tables ---------------------------------------------------------
   The key column is mono because it holds the actual column names out of the
   database. Naming a real column instead of a category ("Security data") is the
   difference between a claim and a checkable claim, and checkable is the entire
   argument these pages are making. */
.page-legal .lg-tablewrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-card);
}
.page-legal .lg-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.86rem;
  text-align: left;
}
.page-legal .lg-table th,
.page-legal .lg-table td {
  padding: 11px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.page-legal .lg-table tr:last-child th,
.page-legal .lg-table tr:last-child td { border-bottom: 0; }
.page-legal .lg-table thead th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--lg-quiet);
  background: rgba(150, 180, 255, 0.035);
  white-space: nowrap;
}
.page-legal .lg-table tbody th {
  font-weight: 400;
  color: var(--text-mid);
}
.page-legal .lg-table tbody th code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #c9d8ff;
  /* NOT overflow-wrap:anywhere. These are exact strings a reader is invited to
     go and look up in their own browser, and breaking `service_bookings.spec`
     across a line as `service_bookings.s / pec` makes the one thing the table
     exists for - being checkable - harder than not printing it at all. The
     column is given room instead, and the table scrolls sideways if it must. */
  overflow-wrap: normal;
}
.page-legal .lg-table th:first-child { min-width: 190px; }
.page-legal .lg-table td { color: var(--text-mid); }
/* Only where the last column is a DURATION. It was written as `td:last-child`
   for the retention table, where the final cell reads "90 days" - but the
   recipients table's last column is a sentence, and nowrap turned it into one
   unbreakable line that forced the table to scroll sideways even at 1440px. */
.page-legal .lg-table-dur td:last-child {
  white-space: nowrap;
  color: var(--lg-quiet);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* ---------- contents ------------------------------------------------------- */
.page-legal .lg-toc { align-self: start; }
.page-legal .lg-toc-box { border: 0; }
.page-legal .lg-toc-h {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lg-quiet);
  cursor: default;
  list-style: none;
}
.page-legal .lg-toc-h::-webkit-details-marker { display: none; }
.page-legal .lg-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.page-legal .lg-toc-list a {
  display: block;
  padding: 6px 0 6px 13px;
  /* A hairline down the whole list, with the current section's segment lit. It
     is the same "where am I" signal a scrollbar gives, told in the language of
     the document rather than the window. */
  border-left: 2px solid var(--border-soft);
  font-size: 0.845rem;
  line-height: 1.4;
  color: var(--lg-quiet);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.page-legal .lg-toc-list a:hover { color: var(--text-mid); border-left-color: var(--border-strong); }
.page-legal .lg-toc-list a[aria-current='true'] {
  color: #dde7ff;
  border-left-color: var(--accent);
}
.page-legal .lg-toc-alt {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--lg-quiet);
}
.page-legal .lg-toc-alt a { color: #a8c4ff; text-decoration: underline; text-underline-offset: 3px; }

/* Sticky only where there is a column for it to be sticky in. */
@media (min-width: 1081px) {
  .page-legal .lg-toc {
    position: sticky;
    top: calc(var(--nav-h) + 26px);
    max-height: calc(100vh - var(--nav-h) - 52px);
    overflow-y: auto;
  }
}

/* ---------- narrow -------------------------------------------------------
   A sticky rail on a phone is a rail covering a third of the screen, so below
   this the contents become a collapsed disclosure above the text. js/legal.js
   removes the `open` attribute here; without JS it stays open, which is the
   right way round to fail. */
@media (max-width: 1080px) {
  .page-legal .lg-body { grid-template-columns: minmax(0, 1fr); }
  /* One column, so the contents would otherwise land UNDER the document they
     introduce. `order` belongs here and only here: applied globally it also
     reorders grid auto-placement on desktop, which put the 232px track under the
     document and the 1fr track under the contents - the columns came out swapped. */
  .page-legal .lg-toc { order: -1; }
  .page-legal .lg-doc { max-width: 72ch; }
  .page-legal .lg-toc-box {
    /* No padding on the box. It belongs to the summary instead, so the padded
       area IS the control: with it here the tappable <summary> was 17px tall in
       a 46px box, and every tap on the comfortable-looking margin around the
       word "Contents" did nothing at all. */
    padding: 0;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-card);
    background: rgba(150, 180, 255, 0.028);
  }
  .page-legal .lg-toc-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    margin-bottom: 0;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--text-mid);
  }
  .page-legal .lg-toc-box[open] .lg-toc-h { border-bottom: 1px solid var(--border-soft); }
  .page-legal .lg-toc-box nav { padding: 10px 16px 14px; }
  /* The disclosure chevron, drawn rather than inherited, so it matches the nav's
     own instead of the browser's. */
  .page-legal .lg-toc-h::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-1) var(--ease-out);
  }
  .page-legal .lg-toc-box[open] .lg-toc-h::after { margin-top: 4px; transform: rotate(-135deg); }
  /* Comfortable in a list of twelve. 24px is the accessibility floor and 31px
     cleared it, but this is a control people hunt for on a phone. */
  .page-legal .lg-toc-list a { padding-block: 9px; }
  .page-legal .lg-toc-list a[aria-current='true'] { color: var(--text-mid); }
}

@media (max-width: 560px) {
  .page-legal .lg-meta { gap: 14px 26px; }
  .page-legal .lg-anchor { gap: 9px; }
  .page-legal .lg-table { min-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-legal .lg-hash,
  .page-legal .lg-toc-list a,
  .page-legal .lg-toc-h::after { transition: none; }
}