/* Text pages (security overview, privacy, terms, cookies, legal notice): on top of styles.css, one column to read */
/* the home page snaps phones from screen to screen; a text page scrolls freely */
html{scroll-snap-type:none !important; scroll-padding-top:0 !important} footer{scroll-snap-align:none !important}
/* the top bar is the home page's (styles.css, scripts/build-bar.mjs): nothing here changes it, so it stays put from page to page */
@media (min-width: 1101px), (min-width: 900px) and (min-height: 501px){ .doc{max-width:calc(1240px * max(1, var(--z, 1)))} }   /* as wide as the bar, which follows the screen (zoom.js) */

.doc{max-width:1240px; margin:0 auto; padding:56px 32px 96px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:56px}
.doc header{grid-column:1 / -1; max-width:760px}
.doc h1{font-size:clamp(40px,5vw,68px); line-height:1.02; margin-top:12px}
.doc h1 em{display:block}
.doc .sub{margin:20px 0 0; font-size:19px; line-height:1.5; color:var(--muted); text-wrap:pretty}
.doc .meta{margin-top:18px; font-size:13.5px; color:var(--muted)}
/* the way back above the kicker (written in by the Worker, js/nav.js): a quiet link, a full finger's height to tap */
.backlink{display:inline-flex; align-items:center; gap:7px; min-height:44px; margin:-10px 0 14px -2px; padding:0 2px; border-radius:8px;
  font-size:14.5px; font-weight:500; color:var(--primary); text-decoration:none}
.backlink svg{flex:none; transition:transform .2s ease}
.backlink:hover{color:var(--mark)} .backlink:hover svg{transform:translateX(-3px)}
.backlink:focus-visible{outline:2.5px solid var(--mark); outline-offset:3px}
.backlink + .kicker{margin-top:0}

.toc{position:sticky; top:96px; align-self:start; font-size:14px; line-height:1.35}
.toc b{display:block; font-size:12px; font-weight:600; letter-spacing:.07em; color:var(--mark); margin-bottom:12px}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.toc a{color:var(--muted); text-decoration:none} .toc a:hover{color:var(--ink)}

.body{max-width:720px; font-size:16.5px; line-height:1.65}
.body section{scroll-margin-top:76px; padding-top:8px}   /* a contents link puts the section at the top, just under the bar */
.body section + section{margin-top:44px}
.body h2{font-size:clamp(28px,3vw,38px); line-height:1.1; margin:0 0 16px}
.body h3{font-size:17px; font-weight:600; margin:28px 0 8px}
.body p, .body ul, .body ol{margin:0 0 14px}
.body ul, .body ol{padding-left:22px} .body li{margin-bottom:6px}
.body ol.clauses{list-style:none; padding:0} .body ol.clauses > li{margin-bottom:12px}
.body .n{font-variant-numeric:tabular-nums; color:var(--muted); margin-right:6px}
.body strong{font-weight:600}
.body a{color:var(--primary); text-underline-offset:3px}
.body address{font-style:normal}

.quote{margin:24px 0; padding:2px 0 2px 22px; border-left:3px solid var(--mark); color:var(--ink); font-family:var(--serif); font-size:clamp(24px,2.6vw,30px); line-height:1.22; text-wrap:balance}
.note{margin:22px 0; padding:16px 20px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-size:15px}
.points{list-style:none; padding:0 !important; display:grid; gap:10px}
.points li{margin:0; padding:14px 18px; border-radius:14px; background:var(--card); border:1px solid var(--line)}
/* the Cookies page: whether this browser is counted, and the button that changes it (js/count.js) */
.choice{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:0 0 16px; padding:14px 18px; border-radius:14px; background:var(--card); border:1px solid var(--line)}
.choice[hidden], .choice [hidden]{display:none}
.choice p{margin:0 !important; flex:1 1 280px}
.choice button{all:unset; cursor:pointer; padding:8px 14px; border-radius:10px; color:var(--primary); box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--primary) 35%, transparent); font-weight:500; font-size:14px}
.choice button:active{transform:scale(.97)}
.choice button:focus-visible{outline:2.5px solid var(--mark); outline-offset:3px}   /* all:unset drops the page-wide focus ring */
@media (hover: hover) and (pointer: fine){ .choice button:hover{box-shadow:inset 0 0 0 1px var(--primary)} }
.points li strong{display:block}

.tbl{margin:18px 0 22px; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.tbl table{width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.45}
.tbl th, .tbl td{text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{font-weight:600; font-size:13px; color:var(--muted); background:var(--bg)}
.tbl td:first-child{font-weight:500}
.tbl code{font-family:'IBM Plex Mono',monospace; font-size:13px}

.pgdraft{margin-top:22px; display:inline-block; padding:6px 12px; border-radius:999px; font-size:13px; background:var(--butter-w); color:var(--butter-i)}

@media (max-width:860px){
  .doc{grid-template-columns:minmax(0,1fr); gap:28px; padding:36px 16px 72px}
  .toc{position:static; padding:16px 18px; border-radius:14px; background:var(--card); border:1px solid var(--line)}
}
@media print{
  .bar, .toc, footer, .pgdraft{display:none}
  .doc{display:block; padding:0} .body{max-width:none}
}

/* the section being read (js/toc.js) */
.toc a{position:relative; transition:color .2s ease}
.toc a.on{color:var(--primary); font-weight:600}
.toc a.on::before{content:''; position:absolute; left:-14px; top:.15em; bottom:.15em; width:3px; border-radius:2px; background:var(--mark)}
@media (max-width:860px){ .toc a.on::before{display:none} }

/* the home hero's glow, across the whole width at the top of every text page, fading out downwards */
body{position:relative; isolation:isolate}
/* a short page (the legal notice) still ends at the window's bottom: the footer sits there, not halfway up. svh: the window
   with the browser's bars at full size, so it never moves as they come and go */
body{display:flex; flex-direction:column; min-height:100svh} body > main{flex:1 0 auto}
body::before{content:""; position:absolute; z-index:-1; left:0; right:0; top:0; height:1100px; pointer-events:none; background:
  radial-gradient(38% 55% at 74% 30%, oklch(0.93 0.05 300 / 75%), transparent 70%),
  radial-gradient(30% 40% at 90% 62%, oklch(0.95 0.04 55 / 70%), transparent 70%),
  radial-gradient(30% 45% at 8% 8%, oklch(0.95 0.035 235 / 80%), transparent 70%);
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent)}