/* Shared stylesheet for privacy, terms, disclaimer and accessibility.

   It carries no palette of its own. Every colour and font below is a token the app is already
   painted from: `--t-<key>` is LIGHT_T[key] / DARK_T[key] in src/app.jsx, `--hero-*` and
   `--app-bg` are the CSS variables in H2Oh_5.html's :root, and the nav pill, the back pill and
   the footer gradient are the values src/app.jsx writes inline for them.
   tests/test_legal_style.py fails when any of these no longer matches the app, and when a rule
   further down uses a colour that is not a token.

   Light is the default, as in the app; the saved `h2oh-theme` key (the app's own) picks dark. */

:root {
  --t-bg:       #ffffff;
  --t-bg2:      #f7fafc;
  --t-bg3:      #eef5fa;
  --t-card:     linear-gradient(-70deg, #ffffff 0%, #dbf1ff 100%);
  --t-card2:    #ffffff;
  --t-card3:    #dbf1ff;
  --t-border:   #cad9e3;
  --t-border2:  #e1eaf1;
  --t-border3:  #b8ccd9;
  --t-text:     #33312e;
  --t-text2:    #5f6d84;
  --t-text3:    #425566;
  --t-teal:     #0071b8;
  --t-teal2:    #006aab;
  --t-teal3:    #4fb3e8;
  --t-teal-dim: rgba(0,142,230,0.10);
  --t-yellow:   #d97706;
  --t-yellow-bg:rgba(217,119,6,0.10);
  --t-red:      #dc2626;
  --t-red-bg:   rgba(220,38,38,0.10);
  --t-section-shadow:0 4px 24px rgba(0,0,0,0.06);
  --t-body-bg:  #ffffff;

  --hero-bg: radial-gradient(ellipse 70% 55% at 12% 0%, rgba(0,142,230,0.16) 0%, transparent 60%), linear-gradient(160deg, rgba(0,142,230,0.07) 0%, rgba(51,49,46,0.03) 45%, #ffffff 78%);
  --hero-heading-from: #4783A9;
  --hero-heading-to:   #252E36;
  --app-bg: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(34,211,238,0.10) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 85% 90%, rgba(8,145,178,0.14) 0%, transparent 55%), linear-gradient(180deg, #060f1e 0%, #020a14 55%, #01050b 100%);
  --font-body: 'Outfit', 'Inter', sans-serif;
  --font-head: 'Inter',sans-serif;
  --radius:  14px;
  --radius2: 10px;

  --nav-bg:     rgba(255,255,255,0.72);
  --nav-border: rgba(37,46,54,0.08);
  --nav-shadow: 0 8px 32px rgba(37,46,54,0.08);
  --pill-bg:           #f2f7fb;
  --pill-border:       #cad9e3;
  --pill-text:         #425566;
  --pill-hover-bg:     #e6f5ff;
  --pill-hover-border: #008EE6;
  --footer-bg:    linear-gradient(180deg, #1A3247 0%, #2475B2 100%);
  --footer-text:  #ffffff;
  --footer-rule:  rgba(255,255,255,0.12);
  --footer-watermark: rgba(255,255,255,0.05);
  --focus-ring:   #0e7490;
  --skip-bg:      #22d3ee;
  --skip-text:    #04121c;
  --cue-glow:     rgba(0,113,184,0.35);

  /* aliases: what each part of the page reads */
  --page-wash:  var(--hero-bg);
  --link:       var(--t-teal);
  --link-hover: var(--t-teal2);
  --heading:    var(--t-text);
  --h1-fill:    linear-gradient(259deg, var(--t-teal) 0%, var(--t-text) 100%);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --t-bg:       #030b16;
  --t-bg2:      #050d1a;
  --t-bg3:      #080f1f;
  --t-card:     rgba(8,18,36,0.75);
  --t-card2:    rgba(6,14,28,0.80);
  --t-card3:    rgba(12,24,48,0.70);
  --t-border:   rgba(34,211,238,0.12);
  --t-border2:  rgba(34,211,238,0.08);
  --t-border3:  rgba(34,211,238,0.18);
  --t-text:     #edf2f7;
  --t-text2:    #8fa3bc;
  --t-text3:    #4a6480;
  --t-teal:     #0ea5c8;
  --t-teal2:    #22d3ee;
  --t-teal3:    #67e8f9;
  --t-teal-dim: rgba(14,116,144,0.25);
  --t-yellow:   #f59e0b;
  --t-yellow-bg:rgba(245,158,11,0.08);
  --t-red:      #ef4444;
  --t-red-bg:   rgba(239,68,68,0.08);
  --t-section-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  --t-body-bg:  #030b16;

  --nav-bg:     rgba(3,11,22,0.85);
  --nav-border: rgba(34,211,238,0.12);
  --nav-shadow: 0 8px 32px rgba(0,0,0,0.4);
  --pill-bg:           rgba(12,24,48,0.70);
  --pill-border:       rgba(34,211,238,0.18);
  --pill-text:         #8fa3bc;
  --pill-hover-bg:     rgba(34,211,238,0.08);
  --pill-hover-border: #22d3ee;
  --focus-ring:   #67e8f9;
  --cue-glow:     rgba(34,211,238,0.45);

  --page-wash:  var(--app-bg);
  --link:       var(--t-teal2);
  --link-hover: var(--t-teal3);
  --h1-fill:    none;
  color-scheme: dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--t-body-bg);color:var(--t-text);font-family:var(--font-body);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* The wash is a fixed layer, as on the app's screens, so a long page keeps the same backdrop. */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--page-wash);pointer-events:none}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.skip-link{position:absolute;left:0;top:-72px;z-index:9999;background:var(--skip-bg);color:var(--skip-text);
  padding:12px 22px;font-family:var(--font-head);font-size:14px;font-weight:600;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
.wrap{max-width:760px;margin:0 auto}

/* ── Floating pill nav: the app's, with a way back to the home page ── */
header.top{height:74px;pointer-events:none}
.pill{pointer-events:auto;position:fixed;top:16px;left:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);
  max-width:1180px;margin:0 auto;z-index:100;height:58px;display:flex;align-items:center;gap:14px;
  padding:0 10px 0 18px;border-radius:100px;background:var(--nav-bg);border:1px solid var(--nav-border);
  box-shadow:var(--nav-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;flex:none}
/* The logotype (brand/h2oh-logotype.svg, DECISIONS item 39), at its 96px minimum as in the app's navbar */
.brand img{display:block;width:96px;height:auto}
nav.top-nav{flex:1;min-width:0}
nav.top-nav ul{list-style:none;display:flex;align-items:center;gap:6px 22px;margin:0;padding:0}
nav.top-nav li{margin:0}
nav.top-nav a{display:inline-flex;align-items:center;min-height:36px;color:var(--pill-text);text-decoration:none;
  font-family:var(--font-head);font-size:14px;font-weight:500;letter-spacing:-.14px;white-space:nowrap;transition:color .15s}
nav.top-nav a:hover{color:var(--t-text)}
nav.top-nav a[aria-current="page"]{color:var(--t-text);box-shadow:inset 0 -2px 0 var(--link)}
/* "Home" is the back pill, the same one the report's nav carries. */
nav.top-nav li:first-child a{padding:0 16px;border-radius:50px;border:1px solid var(--pill-border);
  background:var(--pill-bg);color:var(--pill-text);font-family:var(--font-body);font-size:13px}
nav.top-nav li:first-child a::before{content:"\2190\00a0"}
nav.top-nav li:first-child a:hover{background:var(--pill-hover-bg);border-color:var(--pill-hover-border);color:var(--t-text)}
.theme-toggle{flex:none;margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--t-card);
  border:1px solid var(--t-border2);color:var(--t-teal2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0;transition:background .2s,border-color .2s}
.theme-toggle:hover{border-color:var(--pill-hover-border)}
.theme-toggle .moon{display:block}.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
@media (max-width:720px){
  /* Compact, as the app's nav is: brand, a way home, the toggle. Every other link is in the footer. */
  nav.top-nav li:not(:first-child){display:none}
  nav.top-nav li:first-child a{min-height:44px;padding:0 18px}
  .pill{padding:0 8px 0 16px;gap:10px}
  .theme-toggle{width:44px;height:44px}
}

/* ── Page ── */
main{padding:24px clamp(16px,3vw,32px) 72px}
main .wrap{max-width:820px;background:var(--t-card2);border:1px solid var(--t-border);border-radius:var(--radius);
  box-shadow:var(--t-section-shadow);padding:44px clamp(20px,5vw,52px) 40px}
[id]{scroll-margin-top:100px}
h1{font-family:var(--font-head);font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.045em;
  margin:0 0 12px;font-weight:400;color:var(--t-text);background:var(--h1-fill);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:currentColor}
:root:not([data-theme="dark"]) h1{-webkit-text-fill-color:transparent}
h2{font-family:var(--font-head);font-size:clamp(21px,3vw,26px);line-height:1.25;letter-spacing:-.02em;
  margin:48px 0 14px;font-weight:500;color:var(--heading);padding-top:22px;border-top:1px solid var(--t-border)}
h2:first-of-type{border-top:none;padding-top:0;margin-top:36px}
h3{font-family:var(--font-body);font-size:16px;font-weight:600;margin:28px 0 8px;color:var(--t-text)}
p,li{color:var(--t-text2)}
p{margin:0 0 16px}
ul,ol{padding-left:22px;margin:0 0 16px}
li{margin-bottom:9px}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
strong{color:var(--t-text);font-weight:600}
.eyebrow{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--t-teal2);display:block;margin-bottom:14px}
.updated{font-family:var(--font-head);font-size:12.5px;color:var(--t-text2);letter-spacing:.4px;margin:0 0 32px}
.callout{background:var(--t-yellow-bg);border:1px solid var(--t-border);border-left:3px solid var(--t-yellow);
  border-radius:var(--radius2);padding:18px 20px;margin:0 0 28px}
.callout p{color:var(--t-text);margin:0 0 12px}
.callout p:last-child{margin-bottom:0}
.note{background:var(--t-bg2);border:1px solid var(--t-border);border-radius:var(--radius2);padding:18px 20px;margin:0 0 28px}
.note p:last-child{margin-bottom:0}
.needed{display:inline-block;background:var(--t-red-bg);border:1px dashed var(--t-red);color:var(--t-text);
  font-family:var(--font-head);font-size:12px;font-weight:500;padding:2px 8px;border-radius:5px;letter-spacing:.3px;line-height:1.6}

/* Wide tables scroll inside their own box (audit fix 2). The box is focusable and named in the
   markup; the cue is a glow on whichever side has more table. The two opaque covers scroll
   with the content and hide the glow once that edge is reached; with no overflow, none shows. */
.tbl-scroll{overflow-x:auto;margin:0 0 28px;border:1px solid var(--t-border);border-radius:var(--radius2);
  background-color:var(--t-bg2);
  background-image:
    linear-gradient(var(--t-bg2),var(--t-bg2)),
    linear-gradient(var(--t-bg2),var(--t-bg2)),
    radial-gradient(farthest-side at 0 50%,var(--cue-glow),transparent),
    radial-gradient(farthest-side at 100% 50%,var(--cue-glow),transparent);
  background-position:left center,right center,left center,right center;
  background-size:16px 100%,16px 100%,14px 100%,14px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
caption{text-align:left;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--t-teal2);padding:14px 16px 10px}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--t-border2);vertical-align:top;color:var(--t-text2)}
th{color:var(--t-text);font-weight:600;font-size:13px;background:var(--t-teal-dim)}
tbody tr:last-child td{border-bottom:none}
.toc{background:var(--t-bg2);border:1px solid var(--t-border);border-radius:var(--radius2);padding:20px 22px;margin:0 0 36px}
.toc h2{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t-teal2);margin:0 0 12px;border:none;padding:0}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px}
.toc li{margin-bottom:6px;break-inside:avoid}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ── Footer: the app's gradient. Text is solid white: on the gradient's light end anything
   fainter falls under 4.5:1. ── */
footer.foot{position:relative;overflow:hidden;background:var(--footer-bg);padding:48px clamp(24px,8vw,120px) 44px}
/* The watermark is the reverse logotype at the app footer's 5%, the width the old 9vw text took.
   --footer-watermark stays defined (the value the app's own shell still uses), but an image takes opacity, not a colour. */
footer.foot::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:clamp(70px,9vw,145px);
  background:url(/brand/h2oh-logotype-reverse.svg) center bottom/auto 100% no-repeat;opacity:.05;pointer-events:none}
footer.foot .wrap{position:relative;z-index:1;max-width:1040px}
footer.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;padding:0 0 24px;margin:0 0 22px;
  border-bottom:1px solid var(--footer-rule)}
footer.foot li{margin:0}
footer.foot a{color:var(--footer-text);font-size:14px;text-decoration:none}
footer.foot a:hover{color:var(--footer-text);text-decoration:underline}
footer.foot p{font-size:13px;color:var(--footer-text);margin:0 0 10px;max-width:72ch;line-height:1.7}
footer.foot :focus-visible{outline-color:var(--footer-text)}
@media (max-width:620px){.toc ol{columns:1}main{padding-bottom:56px}}
/* Standalone links are 44px targets on a phone (polish plan P09): the contents list, the footer's list and the row of
   links that closes a page. A link inside a sentence is left alone. */
@media (max-width:620px){
  .toc a{display:inline-block;padding:12px 0}
  .toc li{margin-bottom:0}
  footer.foot nav a,.linkrow a,main p[style*="margin-top:36px"] a{display:inline-flex;align-items:center;min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}