/* ============================================================
   Lingo4All — shared styles for legal documents (/terms, /privacy)
   Tokens mirror the landing page (docs/DESIGN.md).
   ============================================================ */
:root{
  --navy:#1E3A5C; --red:#D9342B; --green:#0E9F6E; --blue:#3B8FE5;
  --radius:16px; --maxw:1180px;
  --shadow:0 1px 2px rgba(10,21,37,.06), 0 8px 24px rgba(10,21,37,.06);
  --shadow-lg:0 2px 4px rgba(10,21,37,.08), 0 18px 50px rgba(10,21,37,.12);
  --bg:#FFFFFF; --bg-alt:#F4F7FB; --card:#FFFFFF; --line:#E2EAF2;
  --fg:#0A1525; --muted:#5A6B85; --brand:#1E3A5C; --ok:#0E9F6E; --link:#2A6FC4;
  --chip:#EEF3F8; --mark:#FFF6D6; --mark-line:#E8CF77;
}
html[data-theme="dark"]{
  --bg:#0A1525; --bg-alt:#0D1B2E; --card:#12233B; --line:#24405F;
  --fg:#F2F6FB; --muted:#93A9C4; --brand:#5FABF2; --ok:#17C08D; --link:#5FABF2;
  --chip:#173049; --mark:#3A2F13; --mark-line:#6B5620;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#0A1525; --bg-alt:#0D1B2E; --card:#12233B; --line:#24405F;
    --fg:#F2F6FB; --muted:#93A9C4; --brand:#5FABF2; --ok:#17C08D; --link:#5FABF2;
    --chip:#173049; --mark:#3A2F13; --mark-line:#6B5620;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--link); text-underline-offset:2px}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- header (mirrors the landing) ---------- */
header{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:14px; height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand img{height:26px; width:auto}
html[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme: dark){html[data-theme="auto"] .brand img{filter:brightness(0) invert(1)}}
.nav-tools{display:flex; align-items:center; gap:8px; margin-left:auto}
.tbtn{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px;
  background:transparent; border:1px solid var(--line); border-radius:11px;
  color:var(--fg); font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none;
}
.tbtn:hover{border-color:var(--brand)}
.menu-host{position:relative}
.menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:172px; padding:6px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg); display:none; z-index:70;
}
.menu.open{display:block}
.menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px;
  background:transparent; border:0; border-radius:10px; color:var(--fg);
  font:inherit; font-size:14.5px; font-weight:500; text-align:left; cursor:pointer;
}
.menu button:hover{background:var(--chip)}
.menu button[aria-selected="true"]{font-weight:700}
.menu button[aria-selected="true"]::after{content:"✓"; margin-left:auto; color:var(--ok); font-weight:700}

/* ---------- doc head ---------- */
.dochead{border-bottom:1px solid var(--line); background:var(--bg-alt); padding:clamp(34px,5vw,58px) 0}
.dochead .eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.dochead h1{margin:0; font-size:clamp(30px,4.6vw,46px); font-weight:900; letter-spacing:-.03em; line-height:1.08}
.docmeta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.docmeta span{
  font-size:12.5px; font-weight:600; color:var(--muted);
  border:1px solid var(--line); background:var(--card); border-radius:999px; padding:5px 13px;
}

/* ---------- layout ---------- */
.doc{display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(28px,4vw,60px); padding:clamp(32px,5vw,56px) 0 90px}
nav.toc{position:sticky; top:88px; align-self:start; max-height:calc(100vh - 120px); overflow-y:auto}
nav.toc h2{
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
nav.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
nav.toc li{counter-increment:toc}
nav.toc a{
  display:flex; gap:9px; padding:5px 10px 5px 8px; border-left:2px solid var(--line);
  font-size:13.4px; line-height:1.4; color:var(--muted); text-decoration:none;
}
nav.toc a::before{content:counter(toc) "."; font-variant-numeric:tabular-nums; opacity:.6}
nav.toc a:hover{color:var(--fg)}
nav.toc a.active{color:var(--fg); font-weight:600; border-left-color:var(--brand)}

article{max-width:76ch; min-width:0}
article h2{
  margin:52px 0 14px; font-size:clamp(20px,2.4vw,25px); font-weight:800;
  letter-spacing:-.02em; line-height:1.22; scroll-margin-top:88px;
}
article h2:first-of-type{margin-top:0}
article h2 .n{color:var(--muted); font-weight:700; margin-right:10px; font-variant-numeric:tabular-nums}
article h3{margin:28px 0 8px; font-size:16.5px; font-weight:700; letter-spacing:-.01em}
article p{margin:0 0 15px}
article ul,article ol{margin:0 0 15px; padding-left:22px}
article li{margin-bottom:8px}
article li::marker{color:var(--muted)}
article strong{font-weight:700}
article a{font-weight:500}
article .lede{font-size:17.5px; color:var(--muted); line-height:1.62; margin-bottom:34px}
article hr{border:0; border-top:1px solid var(--line); margin:40px 0}

/* callouts */
.note{
  border:1px solid var(--line); background:var(--card); border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0; padding:16px 20px; margin:0 0 18px;
}
.note p:last-child{margin-bottom:0}
.note.warn{border-left-color:var(--red)}
.note.todo{background:var(--mark); border-color:var(--mark-line); border-left-color:var(--mark-line)}
.note .lbl{
  display:block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}

/* tables */
.tbl{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; font-size:14.4px; min-width:520px}
th,td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--bg-alt)}
tr:last-child td{border-bottom:0}

/* a field that still has to be filled in before launch */
.fill{
  background:var(--mark); border-bottom:1px dashed var(--mark-line);
  padding:1px 6px; border-radius:4px; font-size:.9em; font-weight:600; color:var(--muted);
  white-space:nowrap;
}

/* definition list */
dl{margin:0 0 18px}
dt{font-weight:700; margin-top:14px}
dd{margin:3px 0 0; color:var(--muted)}

/* contact card */
.contact{
  border:1px solid var(--line); background:var(--bg-alt); border-radius:var(--radius);
  padding:22px 24px; margin:0 0 18px;
}
.contact p{margin-bottom:6px}
.contact p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); background:var(--bg-alt); padding:34px 0}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; font-size:13.5px; color:var(--muted)}
footer.site a{color:var(--muted); text-decoration:none}
footer.site a:hover{color:var(--fg)}
footer.site .spacer{margin-left:auto}

/* ---------- language panes ---------- */
[data-lang]{display:none}
[data-lang].on{display:block}

@media (max-width:900px){
  .doc{grid-template-columns:1fr}
  nav.toc{position:static; max-height:none; border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px; background:var(--bg-alt)}
  nav.toc ol{columns:2; column-gap:20px}
  nav.toc a{border-left:0; padding-left:0}
}
@media (max-width:560px){
  nav.toc ol{columns:1}
  .docmeta span{font-size:11.5px}
}
@media print{
  header,nav.toc,footer.site,.tbtn{display:none !important}
  .doc{display:block; padding:0}
  body{font-size:11pt}
  article{max-width:none}
  a{color:inherit; text-decoration:none}
}