/* legal.css — the one stylesheet for the five static pages in public/:
   privacy.html, terms.html, delete-account.html, reset.html, confirmed.html.

   These files are served as-is, so they cannot use the Astro layout or the
   bundled (content-hashed) src/styles/tokens.css and global.css. The token
   sheet is therefore emitted a second time by bin/sync-tokens.mjs (ops repo)
   as public/tokens.css and imported here. Every colour, radius, shadow,
   duration and font stack below is a token; nothing is hand-written.

   The header and footer markup is duplicated byte-identically into each page
   (no build step, no injection); only this CSS is shared. The rules for the
   logotype, the topbar and the footer are copied from Logo.astro,
   index.astro and Footer.astro so the pages render as the site does. */

@import url('/tokens.css');
@import url('/theme-dark.css');

/* ---------- Self-hosted web fonts ----------
   Copied from src/styles/global.css. The three families named in tokens.css,
   served from /fonts with no third-party request (the font CDN was a GDPR
   defect closed on 15 Oct — do not add one). All three are OFL 1.1. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Base (mirrors global.css) ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sy-color-canvas);
  color: var(--sy-color-ink);
  font-family: var(--sy-font-text);
  font-size: var(--sy-size-body);
  line-height: var(--sy-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: var(--sy-color-action);
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--sy-color-signal);
  outline-offset: 3px;
  border-radius: var(--sy-radius-sm);
}

/* The mono family is always tabular and tight — "sharp" numbers everywhere. */
.sy-num {
  font-family: var(--sy-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sy-tracking-number);
}

/* Copied from src/styles/global.css (.sy-container-wide). global.css is
   bundled under a hashed name and never served, so the rule the header and
   footer need lives here too. Same column as the homepage sections at every
   width. Keep the two in step. */
.sy-container-wide {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 64px);
}

@media (min-width: 1440px) {
  .sy-container-wide {
    max-width: 1320px;
  }
}

@media (min-width: 1800px) {
  .sy-container-wide {
    max-width: 1440px;
  }
}

/* ---------- Header (index.astro .topbar, without the section nav) ----------
   Not sticky: these pages have no in-page nav to reach, and a sticky bar
   over a long contract only steals reading height. */

.topbar {
  padding-block: var(--sy-space-3);
  border-bottom: 1px solid var(--sy-color-line);
  background: var(--sy-color-canvas);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sy-space-4);
  min-height: 44px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

/* ---------- Logotype (Logo.astro) ---------- */

.logo {
  --sy-logo-stroke: 14;
  --sy-logo-kern: 0.01em;

  font-family: var(--sy-font-display);
  font-weight: 700;
  font-size: var(--sy-size-h3);
  letter-spacing: var(--sy-tracking-heading);
  line-height: 1;
  white-space: nowrap;
}

.ess {
  height: 0.73em;
  width: auto;
  display: inline-block;
  vertical-align: -0.015em;
  margin-inline-end: var(--sy-logo-kern);
}

.ess path {
  stroke-width: var(--sy-logo-stroke);
}

.tone-ink {
  color: var(--sy-color-ink);
}

.tone-ink .ess path {
  stroke: var(--sy-color-action);
}

/* ---------- Footer (Footer.astro, same rules) ---------- */

.footer {
  margin-top: var(--sy-space-12);
  background: var(--sy-color-surface);
  border-top: 1px solid var(--sy-color-line);
  color: var(--sy-color-slate);
  font-size: var(--sy-size-small);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sy-space-6);
  padding-block: var(--sy-space-10) var(--sy-space-6);
}

.footer-brand {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: auto;
  }
}

/* 44px tap target; the negative margin cancels the growth over the old 34px
   line box, so the tagline sits exactly where it did. */
.footer-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -5px;
  font-family: var(--sy-font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--sy-color-ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}


.footer-tagline {
  margin: var(--sy-space-3) 0 0;
  max-width: 28ch;
  color: var(--sy-color-ink);
}

.footer-eu {
  margin: var(--sy-space-2) 0 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-head {
  margin: 0 0 var(--sy-space-2);
  font-family: var(--sy-font-mono);
  font-size: var(--sy-size-label);
  font-weight: 700;
  letter-spacing: var(--sy-tracking-label);
  text-transform: uppercase;
  color: var(--sy-color-slate);
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--sy-color-ink);
  text-decoration: none;
  font-weight: 500;
}

.footer-col a:hover {
  color: var(--sy-color-action);
}

.footer-bottom {
  padding-block: var(--sy-space-4);
  border-top: 1px solid var(--sy-color-line);
  font-size: var(--sy-size-micro);
}

/* One line: the copyright and the trademark notice run together as one
   sentence pair, and only wrap (as prose) on narrow screens. */
.footer-copy {
  margin: 0;
}

.footer-sep {
  margin-inline: var(--sy-space-1);
}

.footer-note {
  max-width: 70ch;
}

/* ---------- Reading column ----------
   One centred measure for long text: 72ch of body type is about 68 characters
   once the card padding is taken off, inside the 65–75 range a contract
   wants. The account pages use the same column, narrower. */

.legal {
  width: 100%;
  max-width: 72ch;
  margin-inline: auto;
  padding: var(--sy-space-10) var(--sy-space-6) var(--sy-space-12);
}

.legal-narrow {
  max-width: 56ch;
}

.legal h1 {
  font-family: var(--sy-font-display);
  font-weight: 700;
  font-size: var(--sy-size-h2);
  line-height: var(--sy-leading-heading);
  letter-spacing: var(--sy-tracking-heading);
  text-wrap: balance;
}

.updated {
  margin-top: var(--sy-space-2);
  color: var(--sy-color-slate);
  font-size: var(--sy-size-small);
}

.legal section {
  margin-top: var(--sy-space-5);
  padding: var(--sy-space-6);
  background: var(--sy-color-surface);
  border: 1px solid var(--sy-color-line);
  border-radius: var(--sy-radius-lg);
  box-shadow: var(--sy-shadow-card);
}

.legal h2 {
  font-family: var(--sy-font-display);
  font-weight: 700;
  font-size: var(--sy-size-h3);
  line-height: var(--sy-leading-heading);
  letter-spacing: var(--sy-tracking-heading);
  margin-bottom: var(--sy-space-2);
}

.legal p,
.legal li {
  color: var(--sy-color-slate);
}

.legal p + p,
.legal h2 + p,
.legal ul,
.legal ol {
  margin-top: var(--sy-space-3);
}

.legal h2 + p {
  margin-top: 0;
}

/* Several headings inside one card (delete-account.html). */
.legal p + h2,
.legal ul + h2,
.legal ol + h2 {
  margin-top: var(--sy-space-6);
}

.legal ul,
.legal ol {
  margin-bottom: 0;
  padding-left: var(--sy-space-5);
}

.legal li + li {
  margin-top: var(--sy-space-2);
}

.legal strong {
  color: var(--sy-color-ink);
  font-weight: 600;
}

.legal a {
  text-underline-offset: 0.15em;
}

.note {
  margin-top: var(--sy-space-5);
  font-size: var(--sy-size-small);
}

/* ---------- Account pages: confirmed, reset, delete-account ----------
   The same card as a legal section, but the first thing on the page, with one
   primary action. The reset page swaps three sections (#form, #done,
   #expired) with inline JavaScript that sets style.display — keep those ids
   and the .msg / .btn / .primary class names exactly. */

.account section {
  text-align: center;
}

.account section + section {
  margin-top: var(--sy-space-5);
}

.account h1 + p {
  margin-top: var(--sy-space-3);
}

.account form {
  margin-top: var(--sy-space-5);
  text-align: left;
}

.account label {
  display: block;
  margin: 0 0 var(--sy-space-2);
  font-family: var(--sy-font-mono);
  font-size: var(--sy-size-label);
  font-weight: 700;
  letter-spacing: var(--sy-tracking-label);
  text-transform: uppercase;
  color: var(--sy-color-slate);
}

.account input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: var(--sy-space-4);
  padding: var(--sy-space-3) var(--sy-space-4);
  border: 1px solid var(--sy-color-line-strong);
  border-radius: var(--sy-radius-md);
  background: var(--sy-color-surface);
  color: var(--sy-color-ink);
  transition: border-color var(--sy-motion-fast) var(--sy-motion-ease);
}

.account input::placeholder {
  color: var(--sy-color-mute);
}

.account input:focus {
  border-color: var(--sy-color-action);
}

.rules {
  margin: calc(-1 * var(--sy-space-2)) 0 var(--sy-space-5);
  font-size: var(--sy-size-small);
  color: var(--sy-color-slate);
}

/* Status message (reset.html): hidden until the script sets .err or .okay. */
.msg {
  display: none;
  margin: var(--sy-space-4) 0;
  padding: var(--sy-space-3) var(--sy-space-4);
  border-radius: var(--sy-radius-sm);
  font-size: var(--sy-size-small);
  text-align: left;
}

.msg.err {
  display: block;
  background: var(--sy-color-danger-bg);
  color: var(--sy-color-danger-ink);
}

.msg.okay {
  display: block;
  background: var(--sy-color-success-bg);
  color: var(--sy-color-success-ink);
}

.check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sy-space-4);
  border-radius: var(--sy-radius-pill);
  background: var(--sy-color-success-bg);
  color: var(--sy-color-success-ink);
  font-size: var(--sy-size-h3);
  font-weight: 700;
}

/* Buttons: the hero's primary, full width inside the card. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: var(--sy-space-4);
  padding: 0 var(--sy-space-6);
  border: 1px solid transparent;
  border-radius: var(--sy-radius-pill);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--sy-motion-fast) var(--sy-motion-ease),
    box-shadow var(--sy-motion-fast) var(--sy-motion-ease);
}

.btn + .btn {
  margin-top: var(--sy-space-3);
}

.primary {
  background: var(--sy-color-action);
  color: var(--sy-color-on-signal);
  box-shadow: var(--sy-shadow-card);
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--sy-shadow-lift);
}

.primary[disabled] {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: var(--sy-shadow-card);
}

.secondary {
  background: var(--sy-color-surface);
  color: var(--sy-color-action);
  border-color: var(--sy-color-line-strong);
}

.secondary:hover {
  border-color: var(--sy-color-action);
}

.hint {
  margin-top: var(--sy-space-5);
  font-size: var(--sy-size-small);
  color: var(--sy-color-slate);
  text-align: center;
}

/* reset.html: the script shows exactly one of the three states. */
#done,
#expired {
  display: none;
}

/* Reduced motion: tokens.css collapses every motion duration to effectively
   zero under prefers-reduced-motion, so the hover transitions above resolve
   straight to their end state; there is no layout shift either way. */

/* ---------- Legal notice rows ----------
   A description list, so the labels are real labels to a screen reader rather
   than the first cell of a table. Two columns while there is room; stacked
   below 560px, where a max-content label column would squeeze the address. */
.imprint {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sy-space-3) var(--sy-space-6);
  margin: var(--sy-space-8) 0 0;
}

.imprint dt {
  font-weight: 600;
  color: var(--sy-color-ink);
}

.imprint dd {
  margin: 0;
  color: var(--sy-color-slate);
}

@media (max-width: 560px) {
  .imprint {
    grid-template-columns: 1fr;
    gap: var(--sy-space-1);
  }

  .imprint dd {
    margin-bottom: var(--sy-space-4);
  }
}

/* ---------- Appearance controls (Q4) ----------
   Shared by index.astro (global.css) and the static pages (legal.css); keep the
   two copies identical. public/prefs.js wires them and sets
   html[data-sy-theme-pref] to system | light | dark. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sy-color-line-strong);
  border-radius: 999px;
  background: var(--sy-color-surface);
  color: var(--sy-color-ink);
  cursor: pointer;
  transition:
    border-color var(--sy-motion-fast) var(--sy-motion-ease),
    color var(--sy-motion-fast) var(--sy-motion-ease);
}

.theme-toggle:hover {
  border-color: var(--sy-color-action);
  color: var(--sy-color-action);
}

.theme-toggle .ti {
  display: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .ti-system,
:root[data-sy-theme-pref='light'] .theme-toggle .ti-light,
:root[data-sy-theme-pref='dark'] .theme-toggle .ti-dark {
  display: block;
}

:root[data-sy-theme-pref='light'] .theme-toggle .ti-system,
:root[data-sy-theme-pref='dark'] .theme-toggle .ti-system {
  display: none;
}

.sy-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sy-space-2);
  margin-top: var(--sy-space-4);
}

.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--sy-color-line-strong);
  border-radius: 999px;
  background: var(--sy-color-canvas);
}

.seg-btn {
  min-height: 44px;
  padding: 0 var(--sy-space-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sy-color-slate);
  font: inherit;
  font-size: var(--sy-size-micro);
  font-weight: 600;
  cursor: pointer;
}

.seg-btn:hover {
  color: var(--sy-color-ink);
}

.seg-btn[aria-pressed='true'] {
  background: var(--sy-color-surface);
  color: var(--sy-color-ink);
  box-shadow: 0 0 0 1px var(--sy-color-line-strong);
}

/* ---------- Language controls (Q4) ----------
   .lang: the header menu (index only). .lang-list: the footer row (index and
   the static pages). Same copy in global.css and legal.css. */
.lang {
  position: relative;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 var(--sy-space-3);
  border: 1px solid var(--sy-color-line-strong);
  border-radius: 999px;
  background: var(--sy-color-surface);
  color: var(--sy-color-ink);
  font-size: var(--sy-size-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.lang-btn::-webkit-details-marker {
  display: none;
}

.lang-btn:hover,
.lang[open] .lang-btn {
  border-color: var(--sy-color-action);
  color: var(--sy-color-action);
}

.lang-globe {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 168px;
  margin: 0;
  padding: var(--sy-space-1);
  list-style: none;
  border: 1px solid var(--sy-color-line);
  border-radius: var(--sy-radius-md);
  background: var(--sy-color-surface);
  box-shadow: var(--sy-shadow-float);
}

.lang-menu a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sy-space-3);
  border-radius: var(--sy-radius-sm);
  color: var(--sy-color-ink);
  text-decoration: none;
  font-size: var(--sy-size-small);
  font-weight: 500;
}

.lang-menu a:hover {
  background: var(--sy-color-surface-alt);
}

.lang-menu a[aria-current='true'] {
  color: var(--sy-color-action);
  font-weight: 700;
}

.lang-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.lang-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border-radius: 999px;
  color: var(--sy-color-slate);
  font-family: var(--sy-font-mono);
  font-size: var(--sy-size-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.lang-list a:hover {
  color: var(--sy-color-ink);
  background: var(--sy-color-surface-alt);
}

.lang-list a[aria-current='true'] {
  color: var(--sy-color-ink);
  box-shadow: 0 0 0 1px var(--sy-color-line-strong);
}