/* Typography for the long legal documents at /privacy/ and /terms/.
   The chrome, the paper and the palms come from homepage.css unchanged; this
   file only adds what a multi-section legal text needs on top of it.
   It is a separate stylesheet and not a <style> block because the root
   .htaccess serves Content-Security-Policy: style-src 'self', which blocks both
   inline <style> and style="" attributes. */

.legal-meta{margin:0 0 14px;color:var(--muted);font-size:13.5px;font-weight:700}
.legal-lede{margin:0 0 4px;font-size:15.5px;line-height:1.85}

/* The opening section sits directly under the paper's printed head, so it does
   not get the separator rule the following sections carry. */
.sec.legal-head{padding-top:6px;border-top:0}

.legal-toc{margin:14px 0 0;padding:13px 16px;background:var(--amber);border:1px solid var(--amber-line)}
.legal-toc h2{margin:0 0 7px;color:#6f5416;font:bold 16px/1.3 Arial,'Segoe UI',sans-serif}
.legal-toc ol{margin:0;padding:0 20px 0 0;columns:2;column-gap:26px;font-size:14px;line-height:1.85}
.legal-toc a{color:#2f6486;font-weight:700;text-decoration:underline;text-underline-offset:2px}

.sec h3{margin:16px 0 6px;color:var(--navy);font:bold 17px/1.35 Arial,'Segoe UI',sans-serif}
.sec ul,.sec ol{margin:0 0 13px;padding:0 21px 0 0}
.sec li{margin:5px 0;font-size:15px;line-height:1.8}
.sec dl{margin:0 0 13px}
.sec dt{margin-top:10px;font-size:15px;font-weight:bold}
.sec dd{margin:2px 0 0;padding-inline-start:0;font-size:15px;line-height:1.8}

.legal-note{margin:14px 0 0;padding:11px 14px;background:var(--amber);border:1px solid var(--amber-line);color:#6f5416;font-size:14px;line-height:1.75}
.legal-contact{margin-top:6px;font-weight:bold}
.legal-endlinks{margin-top:14px}

.legal-table{width:100%;margin:0 0 13px;border-collapse:collapse;font-size:14px}
.legal-table th,.legal-table td{padding:7px 9px;border:1px solid var(--image-line);text-align:right;line-height:1.7;vertical-align:top}
.legal-table th{background:rgba(255,255,255,.55);font-weight:bold}

/* Numbered community rules reuse the leaf badge the home page uses for steps. */
.legal-rules{margin:0 0 13px;padding:0;list-style:none}
.legal-rules li{display:flex;gap:10px;align-items:flex-start;margin:7px 0}
.legal-rules .step-no{flex:0 0 28px;width:28px;height:28px;margin-top:2px;display:grid;place-items:center;color:#fff;background:url(/assets/login/leaf.png) center/contain no-repeat;font:bold 12px/1 Arial,sans-serif;text-shadow:0 1px 2px #285010}

@media(max-width:620px){
  .legal-toc ol{columns:1}
  /* A three-column table cannot hold a sentence per cell at phone widths, so the
     rows stack and each cell keeps its own line. */
  .legal-table,.legal-table thead,.legal-table tbody,.legal-table tr,.legal-table td,.legal-table th{display:block;width:100%}
  .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legal-table tr{margin-bottom:10px;border:1px solid var(--image-line)}
  .legal-table td{border:0;border-bottom:1px dashed var(--paper-line)}
  .legal-table tr td:last-child{border-bottom:0}
}