/* cartesianecu.com/legal/: the legal pages (tools/legal-pages.mjs). On top of site.css (tokens, header, footer): a text set
   for reading (a column of about 72 characters), the clause numbers in the margin of their paragraph, the parts still to
   fill in ([COMPANY NAME] ...) marked so they can never be taken for the final text, and the draft note above it. */
.legal-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.legal-page [hidden]{display:none!important}
.legal-page .head-tools > .lang-dd{display:block}              /* no menu drawer on these pages: the language stays in the header */
.legal-page .site-foot{padding:0 0 22px}
.legal-page .foot-legal{margin-top:0;align-items:center}
.legal-page .foot-legal a,.legal-foot a{color:var(--muted)}
@media (hover:hover){.legal-page .foot-legal a:hover{color:var(--accent)}}
.legal-foot{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal{flex:1;padding:36px 0 64px}
.legal:focus{outline:none}
.legal-wrap{max-width:820px}
.legal :focus-visible,.legal-page .skip:focus-visible,.legal-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.legal-nav,.legal-langs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:15px}
.legal-nav a,.legal-langs a{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-weight:600}
.legal-nav a[aria-current="page"]{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 10%,transparent)}
@media (hover:hover){.legal-nav a:hover,.legal-langs a:hover{color:var(--accent-text);border-color:var(--accent)}}
.legal-langs{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}

.legal-draft{margin:22px 0 0;padding:14px 16px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 70%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,transparent);font-size:15px;line-height:1.55}
.legal-draft strong{color:var(--accent-text);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px}
mark.legal-ph{padding:0 3px;border-radius:4px;color:var(--text);background:color-mix(in srgb,var(--accent) 22%,transparent);outline:1px dashed var(--accent);
  outline-offset:0;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.88em;letter-spacing:.01em;white-space:normal;overflow-wrap:anywhere}

.legal-doc{margin-top:26px;font-size:16px;line-height:1.7;overflow-wrap:break-word;max-width:72ch}
.legal-doc h1,.legal-page main > .wrap > h1{font-family:'Russo One',sans-serif;font-size:clamp(26px,4vw,36px);margin:0}
.legal-meta{margin:10px 0 0;color:var(--muted)}
.legal-doc h2{font-size:20px;margin:34px 0 0;padding-top:4px;scroll-margin-top:calc(var(--head-h) + 12px)}
.legal-doc p{margin:12px 0 0}
.legal-doc .legal-n{font-weight:700;color:var(--accent-text);margin-right:2px}
.legal-doc h2 .legal-n{color:inherit}
.legal-doc .legal-cl{scroll-margin-top:calc(var(--head-h) + 12px)}
.legal-doc .legal-item{margin-left:28px}
.legal-lede{margin:12px 0 0;color:var(--muted);max-width:62ch}
.legal-index{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.legal-index li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.legal-index b{min-width:7em}
.legal-index a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media (max-width:760px){
  .legal{padding:26px 0 48px}
  .legal-doc .legal-item{margin-left:14px}
}
@media (max-width:480px){
  .legal-index li{flex-direction:column;align-items:flex-start;gap:4px}
  .legal-index b{min-width:0}
}
@media (max-width:400px){
  .legal-page .brand{gap:8px}
  .legal-page .brand-word{font-size:16px}
  .legal-page .head-tools{gap:6px}
}
@media print{
  .site-head,.legal-nav,.legal-langs,.site-foot,.skip{display:none!important}
  .legal-doc{max-width:none}
}