/* ------------------------------------------------------------------
   Shared chrome for the policy pages. Same tokens as index.html so
   the legal pages look like the rest of the site, not like an annex.
------------------------------------------------------------------ */
:root{
  --haze:#EDEFEA;
  --paper:#FAFBF8;
  --ink:#14203A;
  --ink-soft:#4A5470;
  --cell:#22388F;
  --cell-hover:#1A2C73;
  --dust:#C49A5C;
  --dust-deep:#8E6630;
  --sand:#E7DDC8;
  --line:#CBD0C8;
  --heat:#B4432B;
  --ok:#2F7A4F;
  --wrap:1180px;
  --pad:clamp(1.1rem,4vw,2.5rem);
  --font:'Readex Pro',system-ui,'Segoe UI',Tahoma,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--haze);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.62;font-weight:350;overflow-x:hidden}
[dir=rtl] body{line-height:1.9}
a{color:var(--cell)}
a:hover{color:var(--cell-hover)}
p{margin:0 0 1em}
h1,h2,h3{font-weight:600;margin:0;line-height:1.12}
[dir=ltr] h1,[dir=ltr] h2{letter-spacing:-.022em}
[dir=rtl] h1,[dir=rtl] h2{line-height:1.35}
:focus-visible{outline:2px solid var(--cell);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;inset-inline-start:1rem;top:-60px;background:var(--ink);color:var(--haze);padding:.6rem 1rem;border-radius:6px;z-index:100}
.skip:focus{top:1rem}
.num{font-variant-numeric:tabular-nums}

/* Buttons: same as the main page */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:inherit;font-size:.98rem;font-weight:500;border-radius:6px;padding:.8rem 1.25rem;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--cell);color:#fff}
.btn-primary:hover{background:var(--cell-hover);color:#fff}

/* Header: identical to the main page, so the site does not change shape
   when the reader opens a policy */
header.site{position:sticky;top:0;z-index:50;background:rgba(237,239,234,.9);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1.15rem;height:68px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:36px;width:auto;display:block}
@media (max-width:420px){.logo img{height:34px}}
nav.main{display:flex;gap:clamp(.8rem,1.5vw,1.5rem);margin-inline-start:auto}
nav.main a{text-decoration:none;font-size:.95rem;color:var(--ink-soft)}
nav.main a:hover{color:var(--ink)}
.bar-end{display:flex;align-items:center;gap:1rem}
.lang{background:none;border:1px solid var(--line);border-radius:6px;padding:.45rem .75rem;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
.lang:hover{border-color:var(--ink)}
.bar .btn{padding:.6rem 1rem;font-size:.92rem}
@media (max-width:1000px){nav.main{display:none}.bar-end{margin-inline-start:auto}}
@media (max-width:460px){.bar .btn-primary{display:none}}

/* Document */
main{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem)}
.doc{max-width:760px}
.doc h1{font-size:clamp(2rem,4vw,3rem)}
.doc .meta{margin-top:1.1rem;font-size:.92rem;color:var(--ink-soft)}
.doc .summary{margin-top:2rem;padding:1.2rem 1.4rem;background:var(--paper);border-inline-start:4px solid var(--cell);border-radius:0 10px 10px 0}
[dir=rtl] .doc .summary{border-radius:10px 0 0 10px}
.doc .summary p:last-child{margin-bottom:0}
.doc h2{font-size:clamp(1.25rem,2.4vw,1.55rem);margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.doc h2 .n{color:var(--cell);font-weight:400;margin-inline-end:.5rem}
.doc h3{font-size:1.05rem;font-weight:600;margin-top:1.8rem}
.doc p,.doc li{color:var(--ink);max-width:68ch}
.doc ul,.doc ol{padding-inline-start:1.3rem;margin:0 0 1em}
.doc li{margin-bottom:.5rem}
.doc .lead{font-size:1.06rem;color:var(--ink-soft);max-width:60ch;margin-top:1.2rem}

/* the "fill this in" marker: deliberately loud so it cannot ship by accident */
.todo{background:#FBE9C9;color:var(--dust-deep);border:1px dashed var(--dust-deep);border-radius:4px;padding:0 .4rem;font-size:.92em;white-space:nowrap}

/* Tables of what is stored / who receives what */
.doc table{width:100%;border-collapse:collapse;margin:1.4rem 0 1.8rem;font-size:.95rem}
.doc caption{text-align:start;font-size:.9rem;color:var(--ink-soft);padding-bottom:.6rem}
.doc th,.doc td{text-align:start;padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.doc thead th{border-bottom:2px solid var(--ink);font-weight:600;font-size:.9rem}
.doc tbody tr:last-child td{border-bottom:1px solid var(--line)}
.doc td code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.92em;background:var(--paper);padding:.1rem .35rem;border-radius:3px}
.doc .wide{overflow-x:auto}

/* Contact block at the end */
.doc .card{background:var(--paper);border-radius:12px;padding:clamp(1.2rem,3vw,1.8rem);margin-top:1.4rem}
.doc .card dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem;margin:0}
.doc .card dt{color:var(--ink-soft);font-size:.92rem}
.doc .card dd{margin:0;font-size:.97rem}
@media (max-width:480px){.doc .card dl{grid-template-columns:1fr;gap:.15rem}.doc .card dd{margin-bottom:.7rem}}

/* Cross links between the three documents */
.also{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.95rem}

/* Footer (same as the main page) */
footer{border-top:1px solid var(--line);padding-block:2.2rem;font-size:.88rem;color:var(--ink-soft)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1.5rem}
.foot-links{display:flex;flex-wrap:wrap;gap:1.1rem}
.foot-links a,.linklike{color:var(--ink-soft);text-decoration:none;font:inherit;font-size:.88rem;background:none;border:0;padding:0;cursor:pointer}
.foot-links a:hover,.linklike:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-links a[aria-current=page]{color:var(--ink);font-weight:500}
.foot-id{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.82rem;line-height:1.7;max-width:72ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}