/* ambient: the Terms of Service (/terms) and Privacy Policy (/privacy) pages. Load after /content.css.
   Goes at the site root as /legal.css?v=1. Like /cookies.css, it only uses the site's own values:
   17px text, the 12px dimmed label of the "last updated" line, rows ruled in --grid.
   - Lettered lists: the documents' own "(a)" and "(i)" labels are part of the text, so these lists
     have no "// " mark, and wrapped lines hang under the text.
   - Numbered list: "1." to "7." in the Privacy Policy, dimmed like the "// " mark.
   - The Privacy Policy's tables. The two-column tables are real tables from 721px up; below that
     (phones) each row stacks, as on /cookies. The purposes table has three columns, too many for
     the 720px text column, so at every width each row shows the purpose first, then its two lists,
     side by side from 721px up, each under its column title in the small label. The first list is
     as wide as its label, so both lists start on the same line. */
.legal ol{margin:0;padding:0;list-style:none;color:var(--dim);counter-reset:n}
.legal :is(p,ul,ol)+:is(p:not([class]),ul,ol){margin-top:14px}
.legal ol>li{counter-increment:n}
.legal ol>li::before{content:counter(n) ". "}
.legal li>:is(ul,ol){margin-top:8px}
.legal .typed>li{padding-left:var(--h,4ch);text-indent:calc(-1*var(--h,4ch))}
.legal .typed>li::before{content:none}
.legal .typed>li.h5{--h:5ch}
.legal .typed>li.h6{--h:6ch}
.legal .ptable{width:100%;margin-top:14px;border-collapse:collapse;color:var(--dim)}
.legal .ptable+p{margin-top:14px}
.legal .ptable th{padding:0 0 8px;font-size:12px;font-weight:400;text-align:left;vertical-align:bottom;opacity:.55}
.legal .ptable td{padding:0;vertical-align:baseline}
.legal .ptable thead.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (min-width:721px){
  .legal .two td{padding:14px 0;border-top:1px solid var(--grid)}
  .legal .two tbody tr:last-child td{border-bottom:1px solid var(--grid)}
  .legal .two :is(th,td):first-child{width:30%}
  .legal .two :is(th,td)+:is(th,td){padding-left:24px}
}
@media (max-width:720px){
  .legal .two,.legal .two :is(tbody,tr,td){display:block}
  .legal .two thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .legal .two tbody tr{padding:14px 0;border-top:1px solid var(--grid)}
  .legal .two tbody tr:last-child{border-bottom:1px solid var(--grid)}
  .legal .two td+td{margin-top:8px}
}
.legal .purposes,.legal .purposes :is(tbody,tr,td){display:block}
.legal .purposes tbody tr{padding:14px 0;border-top:1px solid var(--grid)}
.legal .purposes tbody tr:last-child{border-bottom:1px solid var(--grid)}
.legal .purposes td+td{margin-top:12px}
.legal .purposes td[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:12px;opacity:.55}
@media (min-width:721px){
  .legal .purposes tbody tr{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:24px}
  .legal .purposes td:first-child{grid-column:1/-1}
}