/* ══ THE EVIDENCE DISCLOSURE ══════════════════════════════════════════════════
   Ruled 19 Aug 2026. Shared by /subprocessors, /privacy and /diligence, because all three
   render the same five entries and three copies of this would be the defect this site has
   spent its history removing.

   WHAT IT IS FOR. The subprocessor prose reached 14,658 characters — 3,495 in one entry — by
   honest additions: an evidence record, a verification date, a caveat about what DNS cannot
   prove, a correction recording a claim that went the wrong way. None of it should be deleted
   and none of it belongs in a table someone is scanning. So the table carries one line per cell
   and every word moves into a per-row disclosure.

   <details>/<summary> IS NATIVE ON PURPOSE. It is focusable, operable with Enter and Space, and
   announced as an expandable group, with no ARIA to get wrong and no JavaScript to lose — which
   matters on legal pages that otherwise load none. */

.sub-detail {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
}

.sub-detail > summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  padding: 2px 0;
  /* The marker is ours, so the affordance reads the same in every browser. */
  list-style: none;
}
.sub-detail > summary::-webkit-details-marker { display: none; }
.sub-detail > summary::marker { content: ''; }
.sub-detail > summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--text-muted);
  transition: transform .12s ease;
}
.sub-detail[open] > summary::before { transform: rotate(90deg); }

/* A visible focus ring: the disclosure is a control, and a keyboard user must be able to see
   where they are. The site's other controls use the same 2px blue outline. */
.sub-detail > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.sub-detail dl {
  margin: 10px 0 4px;
  padding: 12px 14px;
  background: var(--surface-1);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 6px 6px 0;
}
.sub-detail dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-top: 12px;
}
.sub-detail dt:first-child { margin-top: 0; }
.sub-detail dd {
  margin: 3px 0 0;
  color: var(--text-secondary);
  /* Evidence notes are long and contain regex patterns and hostnames; they must wrap rather
     than push the table sideways. */
  overflow-wrap: anywhere;
}

/* The row that holds the disclosure carries no top border, so a row and its evidence read as
   one unit rather than two. */
.sub-detail-row > td {
  border-bottom: 0.5px solid var(--border);
  padding-top: 0;
}

/* ── PRINT ────────────────────────────────────────────────────────────────────
   A printed compliance table with the evidence collapsed is a compliance table with the
   evidence missing, so every disclosure opens on paper.

   Two mechanisms, because browsers hide closed <details> content two different ways: older
   engines use display:none on the non-summary children, newer Chrome uses content-visibility
   on an internal slot. Overriding only one leaves the other closed. nav.js additionally sets
   the open attribute on beforeprint, which is the one approach that cannot be defeated by a
   UA-stylesheet change — CSS here is the fallback, not the guarantee. */
@media print {
  .sub-detail > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }
  .sub-detail > summary {
    font-weight: 600;
    color: var(--text-primary);
  }
  .sub-detail > summary::before { content: ''; width: 0; }
  .sub-detail dl {
    background: transparent;
    border-left: 1px solid #999;
    /* Keep an entry's evidence with its heading rather than orphaned across a page break. */
    break-inside: avoid;
  }
}

/* ── THE TABLE AROUND THE DISCLOSURES (premium pass, 29 Sep 2026) ─────────────
   The generator renders a bare <table>; its look lives here, beside the disclosure it carries,
   never in the page. A hairline grid on white, the scan layer set small and plain, and the
   location chip in the product's own grammar: a word first, colour second. */
.table-wrap { margin-top: 20px; overflow-x: auto; border-radius: var(--radius-md); background: var(--surface-0); box-shadow: 0 0 0 1px var(--hairline); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.table-wrap th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-muted); padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table-wrap td { padding: 14px 16px 6px; vertical-align: top; color: var(--text-secondary); }
.table-wrap td strong { color: var(--text-primary); font-weight: 500; }
.table-wrap .sub-detail-row > td { padding: 0 16px 14px; border-bottom: 1px solid var(--border); }
.table-wrap tr:last-child > td { border-bottom: 0; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--text-secondary); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.badge-eu::before { background: var(--blue); }
.badge-scc::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.qa-doc ul li > .sub-detail { margin-top: 6px; }
.qa-doc ul { list-style: none; padding-left: 0; }
.qa-doc ul > li { padding: 14px 0; border-top: 1px solid var(--border); }
.qa-doc ul > li:last-child { border-bottom: 1px solid var(--border); }
.qa-doc ul > li em { display: block; font-style: normal; font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* PHONE: the processor tables become one card per processor. Five columns at 358 px scrolled sideways and cut the
   headings mid-word; a reader of a legal page should never have to scroll a table to find a column. Each value gets its
   heading beside it (the column order is the generator's, the same on /subprocessors and /privacy for columns 2 to 5). */
@media (max-width: 720px) {
  .table-wrap { overflow-x: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; }
  .table-wrap tr:first-child { display: none; }
  .table-wrap tr:not(.sub-detail-row) > td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 4px 16px; font-size: 15px; }
  .table-wrap tr:not(.sub-detail-row) > td:first-child { display: block; padding-top: 16px; padding-bottom: 6px; font-weight: 500; color: var(--text-primary); }
  .table-wrap tr:not(.sub-detail-row) > td::before { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
  .table-wrap tr:not(.sub-detail-row) > td:nth-child(2)::before { content: 'Purpose'; }
  .table-wrap tr:not(.sub-detail-row) > td:nth-child(3)::before { content: 'Company jurisdiction'; }
  .table-wrap tr:not(.sub-detail-row) > td:nth-child(4)::before { content: 'Where data is processed'; }
  .table-wrap tr:not(.sub-detail-row) > td:nth-child(5)::before { content: 'Transfer'; }
  .table-wrap td .badge { justify-self: start; }
  .table-wrap .sub-detail-row > td { padding: 10px 16px 16px; }
}