/* Styling for the legal documents page, and for the questions page that borrows it.
   The styles were taken out of <style> and out of inline style= attributes so that the
   CSP can forbid inline style-src entirely (no 'unsafe-inline').
   faq.html uses this file as it stands - a question is a .legal-section h3 and an answer
   is its paragraph - so that a reader moving between the two pages stays in the same
   document. The two rules at the end of this file are the only ones it adds. */
.legal-page { max-width: 720px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 30px; }
/* Which version of the site the documents apply to — the first thing anyone reads, and
   therefore set apart from the text above it */
.legal-scope {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
}
.legal-title { font-size: 1.7rem; font-weight: var(--weight-heavy); }
.legal-section { margin-bottom: 44px; }
.legal-section h2 {
  font-size: 1.4rem; font-weight: var(--weight-heavy); color: var(--primary);
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 6px;
}
.legal-updated { color: var(--muted); font-size: 0.8rem; margin-bottom: 16px; }
.legal-section h3 { font-size: 1.05rem; font-weight: var(--weight-bold); margin: 22px 0 8px; }
/* Arriving from the Report tile on the home screen or from a "clause N" link on the
   questions page: a little air between the heading and the sticky back-to-site row it
   would otherwise sit flush against. The row itself is cleared by the global
   scroll-padding-top in style.css — this only adds the breathing room on top of it. */
.legal-section h3[id] { scroll-margin-top: 12px; }
/* A long run with no space — a web address or a storage key name — pushes the page
   wider on a narrow screen and drags in a horizontal scroll (WCAG 1.4.10). break-word
   breaks it only when there is no alternative, and leaves ordinary text alone. */
.legal-section p, .legal-section li {
  line-height: 1.75; font-size: 0.95rem; color: var(--text);
  overflow-wrap: break-word;
}
.legal-section ul { padding-left: 22px; margin: 8px 0; }
.legal-section li { margin-bottom: 6px; }
/* Links inside the documents. Without this rule a link with no class of its own falls
   back to the browser's default blue (#0000EE), which against this page's background
   measures 2.04:1 and fails WCAG 1.4.3 — on the very page that states the Site aims at
   AA. The underline stays: colour is not the only thing marking a link (WCAG 1.4.1). */
.legal-section a { color: var(--primary); text-decoration: underline; }
/* Here it has to be anywhere: the width of an inline-block is measured by its longest
   word, and break-word does not affect that measurement — so the box itself would stay
   too wide. */
.legal-section code {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 7px; font-size: 0.85em; display: inline-block;
  overflow-wrap: anywhere;
}
/* Details that must be filled in before this page is published. Deliberately loud:
   the operator's name is what makes the controller identifiable under Article 13
   GDPR, and it should be impossible to publish the page without noticing it is
   still a placeholder. */
.legal-fillin {
  /* --error-soft, not --error-bg: the latter is the fill of a wrong answer and carries
     white, so red-on-red would have swallowed the very placeholder this shouts about. */
  background: var(--error-soft);
  border: 1px dashed var(--error);
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--error);
  font-weight: var(--weight-bold);
}
/* min-height, and not padding, because the link is already an inline-flex box that
   centres its own text: growing the box to the 24px minimum target (WCAG 2.2, 2.5.8)
   keeps the text where it is instead of pushing it down. This is the one deliberate
   change of size on the page - the row that carries it is 3px taller than it was, which
   is what asking a 21px target to be 24px costs. */
.back-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  color: var(--primary); text-decoration: none; font-weight: var(--weight-bold); margin-bottom: 8px;
}
/* Inside the row that stays at the top of the window the spacing below the link is the
   row's own, so the link's is dropped - otherwise the two are added together and the
   link floats above the middle of the row it sits in. .page-top comes from style.css,
   which this page loads as well, and it is what makes the row stick. */
.legal-back .back-link { margin-bottom: 0; }
.legal-page .site-footer a { color: var(--muted); }

/* ===== The questions page only ===== */
/* The AI caution, above the first question. The app carries that sentence in its footer
   on every screen; this page is opened from a tile and has no such footer, so a reader
   could otherwise take a whole page of confident answers about a word list without once
   being told that no person has checked the list. The amber edge is what separates it
   from the scope note above it - two grey boxes in a row read as one block of small
   print and neither gets read. */
.faq-ai-notice {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--badge-amber);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
}
/* Both boxes sit outside .legal-section, so the link colour that section gives its links
   does not reach them. Without this the links in them fall back to the browser's default
   blue (#0000EE), which is the 2.04:1 failure the rule further up this file was written
   for. On the legal page the scope note carries no links, so this stays on .faq-page. */
.faq-ai-notice a,
.faq-page .legal-scope a { color: var(--primary); text-decoration: underline; }
/* A question belongs to the answer beneath it, so it sits closer to that answer than to
   the one it follows. On the legal page the same h3 are numbered clauses of a running
   document and their spacing is already right, so this is kept to .faq-page. */
.faq-page .legal-section h3 { margin: 28px 0 6px; }
/* The way on to the full documents, after the last answer. Ruled off so it reads as a
   pointer rather than as one more answer, and .legal-section p would otherwise give it
   the same colour as the answers. */
.faq-page .legal-section .faq-more {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}