/* The legal pages - only what's theirs; the look is resorted-ui (ui/ui.css). */

/* "← Legal" over the band of light */
.page-nav { position: absolute; top: 16px; left: max(16px, calc(50% - 540px)); z-index: 4; }
.page-nav .btn { background: rgba(20, 27, 37, 0.7); border-color: var(--line2); color: var(--text); backdrop-filter: blur(10px); }

.doc-hero { padding-bottom: 30px; }
.rui-hero .meta { margin: 0; color: var(--faint); font-size: 15px; }

/* The index: one row per document */
.doc-links { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.doc-links .rui-row { gap: 16px; padding: 14px 16px; }
.doc-links-icon {
  display: grid; flex: none; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line2); border-radius: 14px;
  background: linear-gradient(160deg, #202a38, #0d1219); color: var(--c1);
}
.doc-links-text { display: flex; flex: 1; flex-direction: column; min-width: 0; color: var(--muted); font-size: 14px; }
.doc-links-text b { color: var(--text); font: 600 17px var(--font-display); }
.doc-links-go { color: var(--faint); transition: transform 0.15s, color 0.15s; }
.doc-links .rui-row:hover .doc-links-go { color: var(--c1); transform: translateX(2px); }

/* A document */
.doc { padding: 30px 36px 36px; font-size: 16px; line-height: 1.65; }
.doc > :first-child { margin-top: 0; }
.doc h2 { margin: 40px 0 8px; padding-top: 8px; font-size: 22px; scroll-margin-top: 16px; }
.doc h3 { margin: 24px 0 4px; font-size: 17px; }
.doc p, .doc li { max-width: 80ch; color: #cdd6e0; overflow-wrap: anywhere; }
.doc strong { color: var(--text); }
.doc ul { padding-left: 1.3em; }
.doc li + li { margin-top: 4px; }
.summary, .toc {
  margin: 0 0 8px; padding: 16px 20px; border: 1px solid var(--line2); border-radius: 14px; background: var(--field);
}
.summary { border-color: rgba(79, 220, 255, 0.3); box-shadow: 0 0 30px -20px var(--c1); }
.summary p:first-child, .toc p:first-child { margin-top: 0; }
.summary ul, .toc ol { margin-bottom: 0; }
.toc ol { padding-left: 1.3em; columns: 2 220px; }
.table-wrap { overflow-x: auto; margin: 12px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc th, .doc td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { color: var(--faint); font: 600 12px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.doc code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: #bfe9ff; }

@media (max-width: 760px) {
  .doc { padding: 22px 18px; }
}