/* Port Phones, legal.css
   The single-column reading layout for a published legal document (the
   Standard Terms, or a Service Schedule), rendered at
   legal/<kind>/<date>.html and injected into <main class="legal-doc"> inside
   the site's usual head/nav/footer (see scripts/publish-legal.py).

   The source markup is the contracts print stylesheet's own classes
   (pdf-base.css + terms.css): dense 8pt type set in two columns for A4.
   This file does not import either of those; it re-styles the same classes
   entirely for the screen, at the site's 16px/1.5 reading scale, one
   column, on the 8px grid. See site/DESIGN.md (Overview, Do's and Don'ts).
*/

.legal-doc,
.legal-doc * {
  border-radius: 0;
  box-shadow: none;
}

.legal-doc {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-05) var(--spacing-12);
  font: var(--type-body-long-01);
  color: var(--gray-100);
  background: var(--white);
}

/* ---- letterhead (.head / .headleft / .headright / .logo) ---- */
.legal-doc .head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-05) var(--spacing-06);
  border-bottom: 2px solid var(--blue-60);
  padding-bottom: var(--spacing-05);
  margin-bottom: var(--spacing-07);
}
.legal-doc .headleft { flex: 1 1 auto; min-width: 0; }
.legal-doc .headleft h1 {
  font: var(--type-heading-02); margin: 0;
  color: var(--gray-100);
}
.legal-doc .headleft .sub {
  font: var(--type-body-long-01); color: var(--gray-70); margin-top: var(--spacing-02);
}
.legal-doc .headright { flex: none; text-align: right; }
.legal-doc .logo {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-03);
  justify-content: flex-end;
  height: auto;
  padding: 0;
  color: var(--gray-100);
  font: var(--type-body-long-01);
  letter-spacing: var(--type-body-long-01-tracking);
}
.legal-doc .logo svg { display: block; height: 17px; width: auto; }
.legal-doc .logo .wordmark {
  font: var(--type-body-long-02);
  letter-spacing: var(--type-body-long-02-tracking);
  color: var(--gray-100);
  transform: none;
}

/* ---- summary table ("Key terms at a glance") ----
   Boxed like every table on the site (DESIGN.md, Surface rule; Andrew,
   5 October 2026). */
.legal-doc table.glance {
  background: var(--white);
  border: 1px solid var(--gray-20);
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: var(--spacing-05) 0 var(--spacing-07);
  font: var(--type-body-short-01);
  letter-spacing: var(--type-body-short-01-tracking);
}
.legal-doc table.glance th,
.legal-doc table.glance td {
  padding: var(--spacing-04) var(--spacing-05) var(--spacing-04) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-20);
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.legal-doc table.glance thead th {
  font: var(--type-label-01);
  letter-spacing: var(--type-label-01-tracking);
  text-transform: var(--type-label-01-transform);
  color: var(--gray-70);
  border-bottom: 1px solid var(--gray-30);
}
.legal-doc table.glance td:nth-child(1) { width: 30%; font-weight: var(--type-strong); }
.legal-doc table.glance th:first-child,
.legal-doc table.glance td:first-child { padding-left: var(--spacing-05); }
.legal-doc table.glance tbody tr:last-child td { border-bottom: none; }
.legal-doc table.glance td:nth-child(3) { width: 15%; }

/* ---- plain data tables (e.g. the sub-processors list) ---- */
.legal-doc table:not(.glance) {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--spacing-05);
  font: var(--type-body-short-01);
  letter-spacing: var(--type-body-short-01-tracking);
}
.legal-doc table:not(.glance) th,
.legal-doc table:not(.glance) td {
  padding: var(--spacing-03) var(--spacing-05) var(--spacing-03) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-20);
}
.legal-doc table:not(.glance) thead th {
  font-weight: var(--type-strong);
  color: var(--gray-70);
  border-bottom: 1px solid var(--gray-30);
}

/* ---- headings, on the 8px grid ---- */
.legal-doc h2.sec {
  display: block;
  font: var(--type-heading-03);
  color: var(--gray-100);
  margin: var(--spacing-08) 0 var(--spacing-05);
}
.legal-doc .cols h2.sec:first-child,
.legal-doc h2.sec:first-of-type {
  margin-top: 0;
}
.legal-doc h2.sec .n {
  display: inline;
  width: auto;
  margin-right: var(--spacing-03);
}
.legal-doc h2.sec .t {
  display: inline;
  width: auto;
}

.legal-doc h3 {
  display: block;
  font: var(--type-heading-04);
  color: var(--gray-100);
  margin: var(--spacing-06) 0 var(--spacing-03);
  scroll-margin-top: var(--spacing-10);
}
.legal-doc h3 .n {
  display: inline-block;
  width: auto;
  margin-right: var(--spacing-03);
  color: var(--gray-60);
  font: var(--type-heading-04);
}
.legal-doc h3 .t { display: inline; }

/* ---- paragraphs and clauses ---- */
.legal-doc p { margin: 0 0 var(--spacing-05); padding-left: 0; }
.legal-doc p.note {
  font: var(--type-body-short-01);
  letter-spacing: var(--type-body-short-01-tracking);
  font-style: italic;
  color: var(--gray-70);
}
.legal-doc p.defn { margin: 0 0 var(--spacing-03); }
.legal-doc p.cl {
  display: flex; align-items: baseline; gap: var(--spacing-03); margin: 0 0 var(--spacing-03);
}
.legal-doc p.cl .n { flex: none; width: auto; color: var(--gray-70); }
.legal-doc p.cl .t { flex: 1; }

/* ---- the print source's two-column clause body, collapsed to one ---- */
.legal-doc .cols {
  column-count: 1;
  column-gap: 0;
  text-align: left;
  -webkit-hyphens: none;
  hyphens: none;
  padding-top: 0;
}
.legal-doc .cols table { width: 100%; margin-left: 0; }
.legal-doc .spanall { column-span: none; }
.legal-doc .pb { break-before: auto; }

/* ---- lists ---- */
.legal-doc ul { margin: 0 0 var(--spacing-05); padding-left: var(--spacing-06); list-style: disc; }
.legal-doc li { margin: 0 0 var(--spacing-03); padding-left: 0; }
.legal-doc li::before { content: none; }

/* ---- end marker and footer ---- */
.legal-doc .end {
  text-align: center;
  color: var(--gray-60);
  font: var(--type-body-short-01);
  letter-spacing: var(--type-body-short-01-tracking);
  margin: var(--spacing-08) 0 0;
}
.legal-doc footer {
  background: none;
  border-top: 1px solid var(--gray-20);
  margin-top: var(--spacing-09);
  padding: var(--spacing-05) 0 0;
  font: var(--type-caption-01);
  letter-spacing: var(--type-caption-01-tracking);
  color: var(--gray-60);
  text-align: center;
}

@media (max-width: 480px) {
  .legal-doc { padding: var(--spacing-11) var(--spacing-05) var(--spacing-10); }
  .legal-doc .head { flex-direction: column; align-items: flex-start; }
  .legal-doc .headright { text-align: left; }
  .legal-doc .logo { justify-content: flex-start; }

  .legal-doc table.glance thead { display: none; }
  .legal-doc table.glance,
  .legal-doc table.glance tbody,
  .legal-doc table.glance tr,
  .legal-doc table.glance td { display: block; width: 100%; }
  .legal-doc table.glance tr { padding: var(--spacing-04) var(--spacing-05); border-bottom: 1px solid var(--gray-20); }
  .legal-doc table.glance tbody tr:last-child { border-bottom: none; }
  .legal-doc table.glance td,
  .legal-doc table.glance td:first-child { border-bottom: none; padding: var(--spacing-02) 0; }
  .legal-doc table.glance td:nth-child(1) { font-weight: var(--type-strong); }
}