/* ============================================================
   RAINY DAY SECURITY — Legal documents (privacy policy, etc.)
   ============================================================
   This file exists as a real stylesheet, not an inline <style>
   block, because the live site's CSP sets
   `style-src 'self' https://fonts.googleapis.com` with no
   'unsafe-inline'. An inline block parses locally and is then
   silently discarded in production, which is how this page
   shipped completely unstyled. Page CSS must live in a file.
   ============================================================ */

.legal {
  padding: var(--s-7) 0 var(--s-9);
}

/* ── Layout: sticky contents rail beside the document ─────── */
.legal-shell {
  width: var(--container);
  margin-inline: auto;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.legal-doc {
  min-width: 0;
  max-width: 74ch;
}

/* The contents rail sits left and spans the full height so it can stick past
   the masthead; the title, summary and document all share column two, so the
   reading measure has one left edge from the eyebrow to the last section. */
@media (min-width: 1080px) {
  .legal-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: var(--s-8);
  }
  .legal-toc { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .legal-masthead { grid-column: 2; grid-row: 1; }
  .legal-doc { grid-column: 2; grid-row: 2; }
}

/* ── Masthead ─────────────────────────────────────────────── */
.legal-masthead { max-width: 74ch; }
.legal-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rds-ochre-deep);
  margin: 0 0 var(--s-3);
}
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--rds-storm);
  margin: 0 0 var(--s-4);
  max-width: none;
}
.legal-standfirst {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.62;
  color: var(--rds-graphite);
  margin: 0 0 var(--s-5);
  max-width: 62ch;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--rds-mute);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rds-rule);
  margin: 0 0 var(--s-6);
}
.legal-meta a { color: var(--rds-ochre-deep); text-decoration: underline; }

/* ── At a glance ──────────────────────────────────────────── */
.legal-glance {
  background: #fff;
  border: 1px solid var(--rds-rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-5) var(--s-4);
  margin: 0 0 var(--s-7);
}
.legal-glance h2 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rds-ochre-deep);
  margin: 0 0 var(--s-4);
}
.legal-glance ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.legal-glance li {
  position: relative;
  padding-left: var(--s-5);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rds-graphite);
  margin: 0;
}
.legal-glance li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 2px;
  background: var(--rds-ochre);
}
.legal-glance-note {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rds-mute);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rds-rule);
  max-width: none;
}

/* ── Contents rail ────────────────────────────────────────── */
.legal-toc {
  font-family: var(--font-ui);
  margin: 0 0 var(--s-6);
}
.legal-toc > summary {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rds-ochre-deep);
  cursor: pointer;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rds-rule);
  border-bottom: 1px solid var(--rds-rule);
  list-style: none;
}
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary::after {
  content: ' +';
  font-family: var(--font-mono);
}
.legal-toc[open] > summary::after { content: ' –'; }
.legal-toc ol {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  counter-reset: toc;
}
.legal-toc li { margin: 0 0 2px; }
.legal-toc a {
  display: flex;
  gap: var(--s-2);
  font-size: 14px;
  line-height: 1.4;
  color: var(--rds-mute);
  padding: 5px 0;
  transition: color 140ms ease;
}
.legal-toc a::before {
  counter-increment: toc;
  content: counter(toc);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rds-ochre);
  flex: 0 0 1.4em;
  padding-top: .18em;
}
.legal-toc a:hover { color: var(--rds-storm); }

@media (min-width: 1080px) {
  .legal-toc {
    position: sticky;
    top: 104px;
    margin: 0;
  }
  .legal-toc > summary {
    border-top: none;
    pointer-events: none;
    padding-top: 0;
  }
  /* Matches the [open] rule's specificity — the rail cannot be collapsed here,
     so it must not advertise a toggle. */
  .legal-toc[open] > summary::after,
  .legal-toc > summary::after { content: ''; }
}

/* ── Sections ─────────────────────────────────────────────── */
.legal-doc { counter-reset: section; }
.legal section {
  padding: 0;
  margin: 0 0 var(--s-7);
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--rds-storm);
  margin: 0 0 var(--s-4);
  scroll-margin-top: 104px;
  max-width: none;
}
.legal section > h2::before {
  counter-increment: section;
  content: counter(section) '. ';
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--rds-ochre);
  letter-spacing: 0;
}
.legal h3 {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--rds-storm);
  margin: var(--s-6) 0 var(--s-3);
  scroll-margin-top: 104px;
  letter-spacing: 0;
}
.legal p,
.legal li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--rds-graphite);
  max-width: 74ch;
}
.legal p { margin: 0 0 var(--s-4); }
/* home.css strips markers from every list on the site; a legal page needs
   them back, or a list of promises reads as one run-on paragraph. */
.legal-doc ul {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
  list-style: disc;
}
.legal-doc li { margin-bottom: var(--s-2); }
.legal-doc li::marker { color: var(--rds-ochre); }
.legal a { color: var(--rds-ochre-deep); }
.legal-doc p a,
.legal-doc li a,
.legal-doc td a { text-decoration: underline; }
.legal strong { font-weight: 600; color: var(--rds-storm); }
.legal code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--rds-bone-deep);
  border-radius: 3px;
  padding: 1px 5px;
}

/* The plain-English answer that opens a dense section, so the section can be
   understood without reading the precise text that follows it. */
.legal-short {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--rds-storm);
  border-left: 3px solid var(--rds-ochre);
  padding: 2px 0 2px var(--s-4);
  margin: 0 0 var(--s-4);
  max-width: 68ch;
}
.legal-short strong { font-weight: 600; }

/* The single most-read block on the page: what the extension cannot see.
   It carries the weight of a promise, so it is set apart rather than
   buried in a list. */
.legal-never {
  background: var(--rds-bone-deep);
  border-left: 3px solid var(--rds-ochre);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-5) var(--s-5) var(--s-4);
  margin: 0 0 var(--s-5);
}
.legal-never h3 { margin-top: 0; }
.legal-never ul { margin-bottom: 0; }

/* ── Tables ───────────────────────────────────────────────── */
.legal-table-wrap { margin: 0 0 var(--s-5); }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 14px;
}
.legal-table caption {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rds-mute);
  padding-bottom: var(--s-3);
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rds-rule);
  line-height: 1.5;
  color: var(--rds-graphite);
}
.legal-table thead th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rds-mute);
  border-bottom-width: 1px;
}
.legal-table tbody th {
  font-weight: 600;
  color: var(--rds-storm);
  padding-right: var(--s-5);
  width: 30%;
}

/* Below the point where a two-column table would crush its second column,
   each row becomes a labelled card rather than a horizontal scroll. */
@media (max-width: 720px) {
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table tbody th,
  .legal-table td { display: block; width: auto; }
  .legal-table thead { display: none; }
  /* A table-caption inside a table that is no longer a table shrink-wraps to
     its longest word; as a block it keeps the full width. */
  .legal-table caption { display: block; }
  .legal-table tr {
    border-bottom: 1px solid var(--rds-rule);
    padding: var(--s-4) 0;
  }
  .legal-table tbody th,
  .legal-table td {
    border-bottom: none;
    padding: 0 0 var(--s-2);
  }
  .legal-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rds-mute);
    margin-bottom: 3px;
  }
}

/* ── Change log ───────────────────────────────────────────── */
.legal-changelog dl {
  margin: 0;
  border-top: 1px solid var(--rds-rule);
}
.legal-changelog div {
  display: grid;
  gap: var(--s-1) var(--s-4);
  grid-template-columns: 1fr;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rds-rule);
}
.legal-changelog dt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--rds-mute);
  white-space: nowrap;
}
.legal-changelog dd {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rds-graphite);
  margin: 0;
}
@media (min-width: 620px) {
  .legal-changelog div { grid-template-columns: 128px minmax(0, 1fr); }
}

/* ── Contact ──────────────────────────────────────────────── */
.legal-contact {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rds-rule);
}
.legal-contact h2::before { content: none; }

@media (max-width: 600px) {
  .legal { padding-top: var(--s-6); }
  .legal h2 { font-size: 22px; }
}

/* ── Print: procurement reviewers print this ──────────────── */
@media print {
  .nav, .site-footer, .legal-toc { display: none; }
  .legal { padding: 0; }
  .legal-shell, .legal-doc, .legal-masthead { width: auto; max-width: none; }
  .legal-layout { display: block; }
  .legal p, .legal li { font-size: 11pt; max-width: none; }
  .legal-glance { border: 1pt solid #999; }
  .legal-doc a[href^="http"]::after,
  .legal-doc a[href^="mailto"]::after {
    content: ' (' attr(href) ')';
    font-family: var(--font-mono);
    font-size: 9pt;
    word-break: break-all;
  }
  .legal h2, .legal h3, .legal-table tr, .legal-never { break-inside: avoid; }
  .legal h2, .legal h3 { break-after: avoid; }
}