/* Wudd website: the reading pages (privacy, terms, guidelines, support,
   report, delete account, join, 404). Builds on site.css (12 Oct 2026).
   The <main class="legal"> of privacy and terms is written by md2legal.py;
   everything here styles what it writes, so never edit that HTML by hand. */

.page{background:var(--bg)}
.page::before{content:"";position:absolute;inset:0 0 auto;height:620px;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 70% at 82% 0%,color-mix(in srgb,var(--rose) 26%,transparent),transparent 72%),
             radial-gradient(40% 60% at 0% 0%,color-mix(in srgb,var(--rose) 12%,transparent),transparent 70%)}
.page .nav-links a{font-size:15px}

.doc{display:grid;grid-template-columns:minmax(0,1fr);justify-content:center;gap:64px;max-width:calc(var(--maxw) + var(--gutter) * 2);margin:0 auto;padding:calc(var(--nav-h) + 14px + clamp(48px,7vw,96px)) var(--gutter) clamp(80px,9vw,128px)}
.doc.has-toc{grid-template-columns:220px minmax(0,740px)}
.doc>main{min-width:0;width:100%;max-width:740px;margin:0 auto}
.doc.has-toc>main{margin:0}

/* the table of contents page.js builds from the h2s */
.toc{position:sticky;top:calc(var(--nav-h) + 44px);align-self:start;max-height:calc(100vh - var(--nav-h) - 80px);overflow:auto;padding:4px 4px 4px 0;scrollbar-width:thin}
.toc p{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--muted)}
.toc ol{border-left:1px solid var(--line)}
.toc a{position:relative;display:block;padding:6px 0 6px 16px;font-size:14px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .3s var(--ease)}
.toc a::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--rose);transform:scaleY(0);transition:transform .4s var(--ease)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink)}
.toc a[aria-current="true"]::before{transform:scaleY(1)}
@media (max-width:1080px){.doc.has-toc{grid-template-columns:minmax(0,1fr)}.toc{display:none}.doc.has-toc>main{margin:0 auto}}

/* ── long-form text ───────────────────────────────────────────────────── */
.legal{font-size:17px;line-height:1.75;color:var(--text)}
.legal>h1{font-size:clamp(42px,6vw,76px);line-height:1;letter-spacing:-.04em;margin:0 0 24px;padding-bottom:.04em}
.legal h2{font-size:clamp(25px,2.4vw,32px);line-height:1.15;letter-spacing:-.025em;margin:64px 0 16px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 40px)}
.legal h1+h2,.legal .meta+h2,.legal .lead+h2,.legal .note+h2{border-top:0;padding-top:0;margin-top:48px}
.legal h3{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.4;margin:36px 0 8px;color:var(--ink)}
.legal p{margin:0 0 18px}
.legal ul,.legal ol{margin:0 0 22px;padding-left:22px}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li{margin:0 0 10px;padding-left:4px}
.legal li::marker{color:var(--accent)}
.legal strong,.legal b{color:var(--ink);font-weight:600}
.legal a{color:var(--link);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent);text-underline-offset:3px;overflow-wrap:anywhere}
.legal a:hover{color:var(--ink);text-decoration-color:currentColor}
.legal .meta{margin:0 0 40px;padding:18px 22px;border-radius:var(--r-sm);background:var(--tray);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:15px;line-height:1.7;color:var(--muted)}
.legal .meta strong{color:var(--text)}
.legal .lead{font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--text);margin:0 0 28px;max-width:none}
.legal table{display:block;width:100%;overflow-x:auto;border-collapse:separate;border-spacing:0;margin:24px 0 32px;font-size:15px;line-height:1.55;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line)}
.legal th,.legal td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft);min-width:140px}
.legal th{background:var(--tray);font-weight:600;color:var(--ink);font-size:14px}
.legal tr:last-child td{border-bottom:0}
.legal td+td,.legal th+th{border-left:1px solid var(--line-soft)}

.note,.openbox,.draft{margin:28px 0;padding:20px 22px;border-radius:var(--r-sm);background:var(--rose-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rose) 30%,transparent);font-size:16px;line-height:1.7;color:var(--text)}
.note b,.openbox b,.draft strong{color:var(--ink)}
.openbox h3{margin:0 0 10px;font-size:16px;color:var(--link)}
.openbox ol{margin:0;padding-left:20px}
.openbox li{font-size:15px;margin-bottom:8px}
mark.todo,mark.open{background:var(--rose-soft);color:var(--link);padding:1px 6px;border-radius:6px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── forms (report) ───────────────────────────────────────────────────── */
.legal form{margin:8px 0 48px;padding:clamp(22px,3vw,36px);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line-soft)}
.legal form label{display:block;margin:0 0 24px;font-size:16px;font-weight:600;color:var(--ink)}
.legal form label>span{display:block;margin:2px 0 10px;font-size:14px;font-weight:400;line-height:1.5;color:var(--muted)}
.legal input[type=text],.legal input[type=email],.legal textarea{display:block;width:100%;padding:14px 16px;border:0;border-radius:var(--r-sm);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;font-weight:400;line-height:1.5;color:var(--ink);transition:box-shadow .3s var(--ease)}
.legal textarea{min-height:130px;resize:vertical}
.legal input:focus,.legal textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.legal .check{display:flex;gap:12px;align-items:flex-start;margin:4px 0 8px;font-size:15px;line-height:1.6;color:var(--text)}
.legal .check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--btn)}
.legal .check label{margin:0;font-size:15px;font-weight:400;color:var(--text)}
.legal form button{text-shadow:0 1px 1px rgba(150,45,35,.22);display:inline-flex;align-items:center;justify-content:center;min-height:54px;margin-top:24px;padding:0 30px;border:0;border-radius:999px;background:linear-gradient(180deg,var(--coral-top),var(--coral-bottom));color:var(--on-btn);font:inherit;font-size:16px;font-weight:600;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--btn) 80%,transparent);transition:transform .5s var(--ease),background-color .3s}
.legal form button:hover{background:linear-gradient(180deg,#EF746A,#E25A53);transform:translateY(-1px)}
.legal form button:active{transform:scale(.98)}
.legal form button[disabled]{opacity:.6;cursor:default;transform:none}
.legal .fail{margin-top:16px;padding:12px 16px;border-radius:var(--r-sm);background:var(--rose-soft);color:var(--link);font-size:15px;font-weight:500}
.legal .done{margin:8px 0 48px;padding:clamp(24px,3vw,40px);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line-soft)}
.legal .done h2{margin:0 0 10px;padding:0;border:0}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.lost{min-height:calc(100dvh - 260px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--nav-h) + 80px) var(--gutter) 96px}
.lost .knot{width:120px;color:var(--rose);margin-bottom:36px}
.lost h1{font-size:clamp(44px,6vw,80px);line-height:1;letter-spacing:-.04em;margin-bottom:20px}
.lost p{max-width:28em;font-size:18px;color:var(--text);margin-bottom:36px}
.lost .links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lost .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-weight:500;text-decoration:none;transition:background-color .3s var(--ease)}
.lost .links a:first-child{background:var(--ink-btn);color:var(--on-ink);box-shadow:none}
.lost .links a:hover{background:var(--surface)}
.lost .links a:first-child:hover{background:var(--ink-btn)}