/* THE LEGAL PAGES: /terms.html, /privacy.html, /health-data.html.
   Loaded after style.css, so the masthead, tokens and type roles are the
   site's own. This file only sets the long-form reading column, the
   contents list, the callouts and the PLACEHOLDER highlight.
   Owned by lane legal_pages (scratchpad/legal_pages/NOTES.md). */

.legal { max-width: 760px; margin: 0 auto; padding: 0 var(--s5) var(--s8); }
.legal .band { padding-top: var(--s7); }
.legal .lede { max-width: none; }

.legal-meta { margin: var(--s4) 0 0; font-family: var(--font-brand);
              font-weight: var(--font-weight-medium); font-size: 14px;
              color: var(--ink-3); }
.legal-meta b { color: var(--ink-2); font-weight: var(--font-weight-medium); }

/* A draft marker. Delete this block from each page once a lawyer has
   reviewed it and every placeholder is filled (NOTES.md, step 1). */
.legal-draft { margin: var(--s5) 0 0; padding: var(--s3) var(--s4);
               border: 1px dashed #c9a13c; border-radius: 10px;
               background: #fdf6e3; color: #6b4e0c; font-size: 14.5px;
               line-height: 1.5; }

/* PLACEHOLDERS: everything Riley has to fill is wrapped in <mark class="ph">,
   so a find for class="ph" lists every one of them. */
mark.ph { background: #fff1b8; color: #5a4300; padding: 0 3px;
          border-radius: 3px; font-weight: var(--font-weight-medium);
          box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.legal-body { font-size: 16.5px; line-height: 1.65; color: var(--ink-body); }
.legal-body h2 { font-family: var(--font-brand); font-weight: var(--font-weight-medium);
                 font-size: 24px; letter-spacing: -0.018em; line-height: 1.25;
                 margin: var(--s7) 0 var(--s3); scroll-margin-top: var(--s5);
                 color: var(--ink); }
.legal-body h3 { font-family: var(--font-brand); font-weight: var(--font-weight-medium);
                 font-size: 18px; line-height: 1.35; margin: var(--s5) 0 var(--s2);
                 color: var(--ink); scroll-margin-top: var(--s5); }
.legal-body p, .legal-body li { color: var(--ink-body); }
.legal-body p { margin: 0 0 var(--s4); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--s4); padding-left: 1.25em; }
.legal-body li { margin: 0 0 var(--s2); }
.legal-body a { color: var(--accent); text-decoration: underline;
                text-underline-offset: 2px; text-decoration-thickness: 1px; }
.legal-body a:hover { color: var(--accent-deep); }
.legal-body strong { font-weight: var(--font-weight-medium); color: var(--ink); }
.legal-body .caps { text-transform: uppercase; letter-spacing: .01em;
                    font-size: 15px; }

/* The contents list: a quiet two-column list on wide screens. */
.toc { margin: var(--s6) 0 0; padding: var(--s4) var(--s5);
       background: var(--card); border: 1px solid var(--rule);
       border-radius: var(--r); }
.toc summary { cursor: pointer; font-family: var(--font-brand);
               font-weight: var(--font-weight-medium); font-size: 15px;
               color: var(--ink); }
.toc ol { margin: var(--s3) 0 0; padding-left: 1.4em; columns: 2;
          column-gap: var(--s6); font-size: 15px; line-height: 1.5; }
.toc li { break-inside: avoid; margin: 0 0 6px; color: var(--ink-3); }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

/* The short version, and the one warning that matters most. */
.callout { margin: var(--s5) 0; padding: var(--s4) var(--s5);
           border-radius: var(--r); background: var(--accent-wash);
           border: 1px solid #d9e0c6; }
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3 { margin-top: 0; }
.callout.warn { background: #fdf1e4; border-color: #f2cfa4; }
.callout.warn h2, .callout.warn h3 { color: #7a3e06; }

/* Two-column facts (categories, cookies, processors). Stacks on phones. */
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s5);
               font-size: 15px; line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top;
                                   padding: 10px 12px 10px 0;
                                   border-bottom: 1px solid var(--rule); }
.legal-table th { font-weight: var(--font-weight-medium); color: var(--ink);
                  font-size: 14px; }
.legal-table td { color: var(--ink-body); }
.legal-table code, .legal-body code { font-size: 13.5px; background: var(--rule-soft);
                                      padding: 1px 5px; border-radius: 4px; }

.back-top { margin: var(--s7) 0 0; font-size: 14px; color: var(--ink-3); }
.back-top a { color: var(--ink-2); }

@media (max-width: 700px) {
  .legal { padding: 0 var(--s4) var(--s7); }
  .legal .band { padding-top: var(--s6); }
  .legal-body { font-size: 16px; }
  .legal-body h2 { font-size: 21px; margin-top: var(--s6); }
  .toc ol { columns: 1; }
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td {
    display: block; width: 100%; }
  .legal-table tr { border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .legal-table td { border: 0; padding: 2px 0; }
  .legal-table td:first-child { font-weight: var(--font-weight-medium);
                                color: var(--ink); }
}
/* On phones the table stacks, so each cell after the first says which
   column it was in. */
@media (max-width: 700px) {
  .legal-table td[data-l]::before { content: attr(data-l) ": ";
    color: var(--ink-3); font-weight: var(--font-weight-medium); }
}

/* Phones: the contents list is a column of taps, so each row is tall
   enough for a finger (2026-10-06 phone pass). */
@media (pointer: coarse) {
  .toc summary { padding: 10px 0; margin: -10px 0; }
  .toc li { margin: 0; }
  .toc a { display: inline-block; padding: 10px 0; }
}