/* Somoney — shared legal-pages stylesheet.
   Self-contained (no external assets). Theme-aware (light default + dark via
   prefers-color-scheme). WCAG-AA contrast. Print-friendly. */

:root{
  --ink:#1a1c22; --muted:#5a6072; --line:#e5e7ef; --bg:#ffffff; --soft:#f6f7fb;
  --accent:#2f57d6; --accent-soft:#eef2ff; --warn:#8a5a00; --warn-soft:#fff6e5;
  --ok:#0f7a4d; --ok-soft:#e7f6ee;
  --max:1140px; --content:760px; --toc:236px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e7e9f0; --muted:#a2a8bd; --line:#2a2e3a; --bg:#0f1116; --soft:#161922;
    --accent:#8fa6ff; --accent-soft:#1a2138; --warn:#e7b45a; --warn-soft:#241d0c;
    --ok:#5fd6a0; --ok-soft:#0e2419;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,summary:focus-visible,.langbar a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px
}

/* Skip link */
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff;
  padding:10px 14px; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0}

/* Sticky site header */
.site-header{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
}
.site-header .bar{max-width:var(--max); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.site-header .brand{font-weight:700; letter-spacing:-0.01em; font-size:16px; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px}
.site-header .brand .brand-logo{width:24px;height:24px;border-radius:6px;display:block;object-fit:cover}
.site-header .brand small{color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.site-nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.site-nav a{font-size:14px; font-weight:600; color:var(--muted); padding:6px 10px; border-radius:8px}
.site-nav a:hover{color:var(--accent); background:var(--soft); text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--accent); background:var(--accent-soft)}

/* Layout: content + sticky TOC on wide screens */
.layout{max-width:var(--max); margin:0 auto; padding:40px 20px 88px;
  display:grid; grid-template-columns:minmax(0,1fr) var(--toc); gap:0 44px; align-items:start}
/* Explicit rows so the content sits in row 2 / col 1 beside the sticky TOC
   (row 2 / col 2), regardless of source order. Source order is
   .pagehead, aside.toc, main.doc, footer.doc so that on mobile it stacks
   title → TOC (collapsed) → content → footer. */
.pagehead{grid-column:1 / -1; grid-row:1; max-width:var(--content)}
main.doc{max-width:var(--content); min-width:0; grid-column:1; grid-row:2}
aside.toc{grid-column:2; grid-row:2}
footer.doc{grid-column:1 / -1; grid-row:3}
@media(max-width:900px){
  .layout{grid-template-columns:1fr; padding:28px 18px 64px}
  .pagehead,main.doc,aside.toc,footer.doc{grid-column:1; grid-row:auto; max-width:none}
}

/* Document header */
header.doc{border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:8px}
h1{font-size:30px; line-height:1.18; letter-spacing:-0.02em; margin:.15em 0 .3em}
.meta{color:var(--muted); font-size:14px; margin:0}
.meta strong{color:var(--ink); font-weight:600}
h2{font-size:21px; letter-spacing:-0.01em; margin:2.4em 0 .5em; padding-top:.15em; scroll-margin-top:76px}
h3{font-size:16.5px; margin:1.5em 0 .3em}
p,li{color:var(--ink)}
.lede{font-size:17px; color:var(--muted)}
strong{font-weight:600}

/* Callouts */
.callout{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:22px 0}
.callout.tl{background:var(--accent-soft); border-color:transparent}
.callout.warn{background:var(--warn-soft); border-color:transparent}
.callout.ok{background:var(--ok-soft); border-color:transparent}
.callout h3{margin-top:0}
.callout ul,.callout ol{margin:.4em 0}
.callout p:last-child{margin-bottom:0}
blockquote{background:var(--soft); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:14px 18px; margin:20px 0; color:var(--muted); font-size:14.5px}
blockquote strong{color:var(--ink)}

/* Defined terms */
dl.defs{margin:14px 0; padding:0}
dl.defs dt{font-weight:600; color:var(--ink); margin-top:12px}
dl.defs dd{margin:2px 0 0; color:var(--muted)}

/* Tables */
.tablewrap{width:100%; overflow-x:auto; margin:16px 0}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
th{background:var(--soft); font-weight:600}
table.vh th,table.vh td{font-size:13.5px}

code{background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:13px}
hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
small{color:var(--muted)}
.note{color:var(--muted); font-size:14px}

/* Table of contents */
aside.toc{position:sticky; top:88px; font-size:14px; align-self:start}
aside.toc .toc-title{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-weight:700; margin:0 0 8px; padding:0 4px}
aside.toc nav{max-height:calc(100vh - 120px); overflow:auto}
aside.toc a{display:block; padding:4px 8px; color:var(--muted); border-radius:6px; line-height:1.4}
aside.toc a:hover{color:var(--accent); background:var(--soft); text-decoration:none}
aside.toc summary{display:none}
@media(min-width:901px){ aside.toc details>nav{display:block} } /* always show on desktop */
@media(max-width:900px){
  aside.toc{position:static; top:auto; margin:0 0 24px}
  aside.toc details{border:1px solid var(--line); border-radius:12px; background:var(--soft); padding:4px 8px}
  aside.toc summary{display:list-item; cursor:pointer; padding:10px 6px; font-weight:600; color:var(--ink)}
  aside.toc .toc-title{display:none}
  aside.toc nav{max-height:52vh; padding:4px 0 8px}
}

/* Footer */
footer.doc{grid-column:1 / -1; margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px; max-width:var(--max)}
footer.doc .cols{display:flex; gap:36px; flex-wrap:wrap; justify-content:space-between}
footer.doc a{color:var(--accent)}
footer.doc .foot-links{display:flex; gap:14px; flex-wrap:wrap}
.langbar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px}
.langbar .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-right:4px}
.langbar a{padding:4px 9px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--ink)}
.langbar a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.langbar a[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.langbar span.soon{padding:4px 9px; border:1px dashed var(--line); border-radius:999px; font-size:13px; color:var(--muted)}

.disclaimer{font-size:13.5px; color:var(--muted); font-style:italic; margin-top:26px;
  border-left:3px solid var(--line); padding-left:14px}

/* Landing page */
.hero{min-height:82vh; display:flex; align-items:center; justify-content:center; padding:40px 20px}
.hero .card{max-width:600px; width:100%; text-align:center}
.hero .logo{width:72px;height:72px;border-radius:18px;display:inline-block;margin-bottom:20px;object-fit:cover;
  box-shadow:0 6px 24px -8px rgba(58,49,233,0.5)}
.hero h1{font-size:34px}
.hero .tag{color:var(--muted); font-size:18px; margin:0 0 8px}
.hero .sub{color:var(--muted); font-size:15px; margin:0 0 30px}
.hero .links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:26px}
.hero .links a{padding:11px 18px; border:1px solid var(--line); border-radius:10px; color:var(--ink);
  font-size:14.5px; font-weight:600; background:var(--soft)}
.hero .links a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}

@media(max-width:640px){ h1{font-size:25px} .hero h1{font-size:28px} }

/* Print */
@media print{
  .site-header,aside.toc,.skip,.langbar{display:none !important}
  body{color:#000; background:#fff; font-size:12pt}
  .layout{display:block; max-width:none; padding:0}
  a{color:#000; text-decoration:underline}
  .callout{border:1px solid #999; background:#fff}
  h2{page-break-after:avoid}
  table,.callout{page-break-inside:avoid}
}