/* doc.css - the long-form legal documents: privacy.html, cookies.html.
   ------------------------------------------------------------------------
   Adapted from the library's _theme/doc.css, but SCOPED UNDER .doc and set
   in the house sans. The library file styles body, h1, h2, p and a globally
   and sets a serif, which would restyle the chassis header and footer these
   pages share with the homepage - and the house style has no serif anywhere.
   Everything reads from tokens.css and brand.css; nothing is a literal
   colour.

   One measured column, generous leading, a clear heading hierarchy, and a
   sticky contents rail on wide screens. Prints cleanly. */

.doc{
  max-width:1080px;margin:0 auto;padding:clamp(40px,6vw,76px) var(--gut,24px) 96px;
  display:grid;gap:48px;
  /* minmax(0,1fr): a grid item will not shrink below its widest child, and
     the widest child here is a table. On a phone that scrolled the page
     sideways; with this the table scrolls inside .tw instead. */
  grid-template-columns:minmax(0,1fr);
  font-size:17px;line-height:1.7;color:var(--ink)}
.doc > *{min-width:0}
@media (min-width:960px){
  .doc{grid-template-columns:230px minmax(0,1fr);gap:56px}
  .doc > header{grid-column:1/-1}
}

/* masthead */
.doc > header{border-bottom:1px solid var(--line);padding-bottom:30px}
.doc h1{font-size:clamp(34px,4.4vw,52px);line-height:1.08;letter-spacing:-.018em;margin:14px 0 18px;font-weight:400}
.doc .meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;font-size:14px;color:var(--ink-55)}
.doc .meta b{color:var(--ink);font-weight:600}

/* contents rail */
.doc .toc{font-size:14px}
@media (min-width:960px){.doc .toc{position:sticky;top:calc(var(--hdr-h,78px) + 24px);max-height:calc(100vh - var(--hdr-h,78px) - 48px);overflow:auto}}
.doc .toc h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);margin:0 0 12px}
.doc .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.doc .toc li{counter-increment:toc;margin-bottom:2px}
.doc .toc a{display:block;padding:6px 8px;border-radius:var(--r-sm,6px);color:var(--ink-55);text-decoration:none;line-height:1.35}
.doc .toc a::before{content:counter(toc,decimal-leading-zero) "  ";font-variant-numeric:tabular-nums;color:var(--ink-45);font-size:12px}
.doc .toc a:hover{background:var(--paper-alt);color:var(--ink)}
.doc .toc a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* body */
.doc .body{max-width:68ch}
.doc .body section{scroll-margin-top:calc(var(--hdr-h,78px) + 20px);margin-bottom:44px}
.doc h2{font-size:clamp(22px,2.2vw,27px);line-height:1.25;letter-spacing:-.012em;margin:0 0 14px;font-weight:500}
.doc h3{font-size:17px;font-weight:600;margin:26px 0 8px}
.doc p{margin:0 0 16px}
.doc .body ul,.doc .body ol{margin:0 0 18px;padding-left:22px}
.doc .body li{margin-bottom:8px}
.doc .body li::marker{color:var(--ink-45)}
.doc a{color:var(--brand);text-underline-offset:3px}
.doc a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
.doc strong{font-weight:600}

/* tables */
.doc .tw{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:var(--r-sm,6px)}
.doc table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px;line-height:1.55}
.doc th,.doc td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-55);white-space:nowrap}
.doc tbody th{color:var(--ink);text-transform:none;letter-spacing:0;font-size:15px;width:34%}
.doc tr:last-child td,.doc tr:last-child th{border-bottom:0}

/* asides */
.doc .note{background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--r-sm,6px);padding:16px 20px;margin:0 0 22px;font-size:15.5px}
.doc .note p:last-child{margin-bottom:0}

/* NOT A DESIGN ELEMENT - A BUILD MARKER, the same one the evidence section
   uses. Tony has not supplied these values and a legal document is the
   last place to fill a gap with something plausible. Dashed, muted and
   italic so it can never be read as content, and each one is listed in
   Plans/TODO-BEFORE-LAUNCH.md. */
.doc .todo{color:var(--ink-45);font-style:italic;font-weight:400;
  border:1px dashed color-mix(in srgb,var(--ink) 26%,transparent);
  border-radius:var(--r-sm,6px);padding:2px 9px;display:inline-block;font-size:14.5px;line-height:1.5}
.doc .todo::before{content:"\2691  ";font-style:normal}

/* document footer */
.doc > footer{grid-column:1/-1;border-top:1px solid var(--line);padding-top:26px;margin-top:8px;font-size:14px;color:var(--ink-45)}

@media print{
  .hdr,.ftr,.doc .toc,.totop,.progress{display:none !important}
  .doc{display:block;padding:0}
  .doc a{color:inherit;text-decoration:none}
}