/* Legal document layout shared by privacy.html, terms.html,
   support-terms.html, and public-sector-addendum.html: header, sticky TOC
   rail, reading column, callouts, product/provider cards, lists, and tables.
   Loads after vault-base.css and secondary-shell.css. */

.doc-header { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(40px, 5vw, 64px); }
.doc-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); }
.doc-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.doc-title { margin: 0; font-size: clamp(2.5rem, 5.4vw, 4.5rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.02; color: var(--text-primary); text-wrap: balance; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 14px; }
.doc-meta dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.doc-meta dd { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.doc-meta-row { display: flex; flex-direction: column; }

.doc-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 80px; align-items: flex-start; }
@media (max-width: 960px) { .doc-body { grid-template-columns: 1fr; gap: 36px; } }

.toc { position: sticky; top: 92px; border-top: 1px solid var(--border-default); padding-top: 22px; }
.toc details > summary { display: none; }
.toc-title { margin: 0 0 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 400; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-list a { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: baseline; padding: 8px 14px; text-decoration: none; border-left: 2px solid transparent; font-size: 13px; color: var(--text-muted); transition: color .15s var(--ease-out-quart), background-color .15s var(--ease-out-quart), border-color .15s var(--ease-out-quart); }
.toc-list a:hover { color: var(--text-primary); background: color-mix(in oklab, var(--surface-subtle) 60%, transparent); }
.toc-list a[aria-current="true"] { color: var(--text-primary); border-left-color: var(--brand); background: color-mix(in oklab, var(--brand) 6%, transparent); }
.toc-list .num { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.toc-list a[aria-current="true"] .num { color: var(--brand); }
@media (max-width: 960px) {
  .toc { position: static; padding-top: 0; border-top: 0; }
  .toc details { border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-subtle); }
  .toc details > summary { display: flex; padding: 14px 18px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-primary); list-style: none; justify-content: space-between; align-items: center; }
  .toc details > summary::-webkit-details-marker { display: none; }
  .toc details[open] > summary { border-bottom: 1px solid var(--border-default); }
  .toc .toc-title { display: none; }
  .toc details .toc-list { padding: 8px 6px; }
}

.doc-content { max-width: 760px; border-top: 1px solid var(--border-default); padding-top: 22px; }
.doc-lede { font-size: 1.25rem; line-height: 1.55; color: var(--text-primary); letter-spacing: -0.003em; margin: 0 0 18px; }
.doc-note { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); font-style: italic; }

.doc-section { padding-top: clamp(56px, 6vw, 80px); margin-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--border-default); }
.doc-section:first-of-type { border-top: 0; margin-top: 0; padding-top: clamp(40px, 5vw, 56px); }
.doc-section-kicker { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.doc-section-kicker .num { color: var(--text-tertiary); }
.doc-section-kicker .name { color: var(--brand); }
.doc-section h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.1; color: var(--text-primary); text-wrap: balance; }
.doc-section p { margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.72; color: var(--text-muted); text-wrap: pretty; }
.doc-section p strong, .doc-section p b { color: var(--text-primary); font-weight: 600; }
.doc-section h3 { margin: clamp(28px, 3vw, 36px) 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--text-primary); letter-spacing: -0.005em; }
.doc-section h3 + p { margin-top: 12px; }

.doc-content a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc-content a:hover { color: var(--brand-hover); }
.doc-content code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-primary); background: var(--surface-subtle); padding: 1px 6px; border-radius: 5px; }

.doc-data { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.doc-data li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid color-mix(in oklab, var(--border-default) 60%, transparent); }
.doc-data li:first-child { border-top: 1px solid color-mix(in oklab, var(--border-default) 60%, transparent); }
.doc-data li::before { content: attr(data-n); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-tertiary); text-transform: uppercase; }
.doc-data span { font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); }
.doc-data span strong { color: var(--text-primary); font-weight: 500; }

.doc-callout { margin: 28px 0 0; padding: 20px 22px; background: var(--surface-subtle); border: 1px solid var(--border-default); border-radius: 12px; display: flex; gap: 14px; align-items: flex-start; }
.doc-callout .doc-callout-label { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); padding-top: 3px; }
.doc-callout p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }

/* Product summary cards used in §1. */
.doc-products { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.doc-products li { padding: 20px 22px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.doc-products .prod-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
.doc-products .prod-price { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }

/* Ordered legal lists and the Exhibit A comparison tables. Tables scroll
   inside their own wrapper so the page body never scrolls sideways. */
.doc-section ul { margin: 18px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.doc-section ul li { font-size: 1.0625rem; line-height: 1.72; color: var(--text-muted); }
.doc-table-wrap { margin: 18px 0 0; overflow-x: auto; }
.doc-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; }
.doc-table th, .doc-table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border-default); vertical-align: top; line-height: 1.6; }
.doc-table thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-tertiary); }
.doc-table tbody th { font-weight: 500; color: var(--text-primary); }
.doc-table tbody td { color: var(--text-muted); }



/* Provider grid (for "service providers" list). */
.doc-providers { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.doc-providers li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: 12px; }
.doc-providers .prov-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.doc-providers .prov-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 3px; }
.doc-providers .prov-tag { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
@media (max-width: 480px) {
  .doc-providers li { flex-direction: column; align-items: flex-start; }
}