/* Terms, privacy and refund pages (register F-010). Linked after /tokens.css and /legacy.css.
   The header, ThemeToggle, print and footer rules are the 404 page's (design foundation, #99);
   the rest takes the legacy names, as the other pages do, until the legal pages' restyle
   (scope baseline v2, phase 3). */
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--paper); }
body{ color:var(--ink); font-family:var(--sans); font-size:var(--fs-base); line-height:var(--lh-reading); -webkit-font-smoothing:antialiased; }
p,h1,h2,ol,ul{ margin:0; }
.kt{ max-width:1040px; margin:0 auto; }
/* Header row: the logo and descriptor, then the theme toggle on the right. */
.toprow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--px-40) var(--px-40) 0; }
.lock{ display:block; color:inherit; text-decoration:none; }
/* Logo: one file per theme; the other is display:none, so one "Klartext" image is in the accessibility tree. */
.logo{ display:block; }
.logo-light{ display:none; }
:root[data-theme="light"] .logo-dark{ display:none; }
:root[data-theme="light"] .logo-light{ display:block; }
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .logo-dark{ display:none; }
  :root:not([data-theme]) .logo-light{ display:block; }
}
.desc{ display:block; margin-top:var(--space-4); font-size:var(--fs-12); font-weight:var(--fw-regular); line-height:var(--lh-note); color:var(--text-muted); }
/* ThemeToggle (design skill), its labels in the label type style. Hidden until /theme.js wires it. The frame clips, so the focus ring is drawn inside the button (C4). */
.theme-toggle{ flex:none; border:1px solid var(--border-control); border-radius:var(--radius-md); overflow:hidden; }
.theme-toggle:not([hidden]){ display:inline-flex; }
.theme-toggle button{ min-height:44px; margin:0; padding:0 var(--space-4); border:0; border-radius:0; background:var(--bg); color:var(--text-muted); font-family:var(--type-label-family); font-size:var(--type-label-size); font-weight:var(--type-label-weight); line-height:var(--type-label-line-height); letter-spacing:var(--type-label-tracking); cursor:pointer; }
.theme-toggle button[aria-pressed="true"]{ background:var(--surface-raised); color:var(--text); }
/* Pressed also shows a ✓ before the label, so the state never rests on colour (design skill, Pressed and on states). Its space is kept while unpressed, so nothing moves; screen readers get the state from aria-pressed. */
.theme-toggle button::before{ content:"✓"; content:"✓" / ""; margin-right:var(--space-1); color:var(--accent); visibility:hidden; }
.theme-toggle button[aria-pressed="true"]::before{ visibility:visible; }
.theme-toggle button:focus-visible{ outline:2px solid var(--accent); outline-offset:calc(-2 * var(--focus-offset)); }
/* Print: paper gets the light theme (tokens.css), so it shows the light-background logo and leaves out the toggle. Before the forced-colours rules, which win where both apply. */
@media print{ :root .logo.logo-dark{ display:none; } :root .logo.logo-light{ display:block; } .theme-toggle:not([hidden]){ display:none; } }
/* Forced colours (Windows High Contrast): the logo follows the system's contrast theme, and the pressed button is underlined because fills are replaced. */
@media (forced-colors: active) and (prefers-color-scheme: dark){ :root .logo.logo-dark{ display:block; } :root .logo.logo-light{ display:none; } }
@media (forced-colors: active) and (prefers-color-scheme: light){ :root .logo.logo-dark{ display:none; } :root .logo.logo-light{ display:block; } }
@media (forced-colors: active){ .theme-toggle button[aria-pressed="true"]{ text-decoration:underline; } }
main{ padding:var(--px-56) var(--px-40) var(--px-72); }
.code{ font-family:var(--mono); font-size:var(--fs-12); letter-spacing:var(--track-mono); color:var(--slate); text-transform:uppercase; }
h1{ font-size:var(--fs-48); font-weight:var(--fw-black); line-height:var(--lh-solid); letter-spacing:var(--track-display); text-transform:uppercase; margin-top:var(--px-8); }
.updated{ font-family:var(--mono); font-size:var(--fs-12); letter-spacing:var(--track-mono); color:var(--slate); margin-top:var(--px-16); }
.status{ max-width:68ch; margin-top:var(--px-24); padding:var(--px-12) 0; border-top:1px solid var(--steel); border-bottom:1px solid var(--steel); color:var(--slate); }
.status .code{ margin-right:var(--px-12); }
.doc{ max-width:68ch; margin-top:var(--px-40); }
.doc section{ padding:var(--px-24) 0; border-top:1px solid var(--steel); }
.doc section:first-child{ border-top:0; padding-top:0; }
.doc h2{ font-size:var(--fs-20); font-weight:var(--fw-extrabold); line-height:var(--lh-heading); letter-spacing:var(--track-h2); text-transform:uppercase; margin-bottom:var(--px-12); }
.doc p + p, .doc p + ol, .doc ol + p, .doc p + ul, .doc ul + p{ margin-top:var(--px-12); }
.doc ol, .doc ul{ padding-left:var(--px-24); }
.doc li + li{ margin-top:var(--px-8); }
.doc a, .links a, footer a{ color:inherit; text-underline-offset:var(--underline-offset); }
.mono{ font-family:var(--mono); font-size:var(--fs-14); letter-spacing:var(--track-mono-sm); }
.links{ display:flex; flex-wrap:wrap; gap:var(--px-12) var(--px-32); max-width:68ch; margin-top:var(--px-16); padding-top:var(--px-16); border-top:1px solid var(--steel); }
.links a{ font-weight:var(--fw-bold); }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:var(--focus-offset); }
footer{ border-top:2px solid var(--ink); padding:var(--px-24) var(--px-40) var(--px-40); display:flex; justify-content:space-between; gap:var(--px-8) var(--px-24); flex-wrap:wrap; font-family:var(--mono); font-size:var(--fs-11); letter-spacing:var(--track-mono); color:var(--slate); }
@media (max-width:760px){
  .toprow, footer{ padding-left:var(--px-20); padding-right:var(--px-20); }
  main{ padding:var(--px-40) var(--px-20) var(--px-56); }
  h1{ font-size:var(--fs-36); }
}