/* ================================================================
   GDPRLETTERBUILDER: GLOBAL STYLESHEET
   Page chrome and design tokens. Dark glassmorphism in the Stormberry
   Labs house style, Inter typography, teal accent (approved with
   the icon, ICON-1). The chrome (hero, card, button, carousel, footer,
   privacy page) is CheckLink's, with this app's tokens.

   CSP note: the page forbids inline styles (style-src 'self'), so every
   rule lives here. Setting element.style from JavaScript is still
   allowed, but this app does not need it.
================================================================ */

/* Design tokens */
:root {
  color-scheme: dark;

  /* Background palette: near-black with a teal cast */
  --bg-base:        #0a1113;
  --bg-surface:     #0f1a1c;
  --bg-card:        rgba(18, 32, 34, 0.74);
  --bg-card-hover:  rgba(26, 46, 49, 0.85);
  /* Opaque equivalent of --bg-card over --bg-base, for contrast checks. */
  --bg-card-solid:  #101c1e;

  /* Accent: teal. No other Labs app uses it. */
  --accent-primary: #2dd4bf;   /* 9.3:1 on cards, 10.2:1 on the page */
  --accent-strong:  #14b8a6;   /* 7.0:1 on cards */
  --accent-soft:    rgba(45, 212, 191, 0.14);
  --grad-primary:   linear-gradient(135deg, #5eead4 0%, #14b8a6 100%);
  --on-accent:      #0a1113;   /* text on the accent: 7.6:1 at its darkest */

  /* Text, all at least WCAG AA (4.5:1) on --bg-base and on cards */
  --text-primary:   #eef8f7;   /* 16.1:1 on cards */
  --text-secondary: #a9c1bf;   /*  9.2:1 on cards */
  --text-muted:     #8fa8a6;   /*  6.9:1 on cards */

  /* Borders. --field-border marks a form field: 4.4:1 on cards, above
     the 3:1 WCAG asks of a control's boundary. */
  --border:         rgba(255, 255, 255, 0.09);
  --border-active:  rgba(45, 212, 191, 0.45);
  --field-border:   #6b8583;
  --field-bg:       rgba(255, 255, 255, 0.04);

  /* Warnings: always with the word "Warning:", never colour alone */
  --warn:           #f2a516;
  --warn-text:      #fcd34d;   /* 12.1:1 on cards */
  --warn-bg:        rgba(242, 165, 22, 0.12);
  --warn-border:    rgba(242, 165, 22, 0.45);

  /* The letter is shown as a sheet of paper */
  --paper:          #f8fbfb;
  --ink:            #0b1416;   /* 17.9:1 on the paper */

  /* Spacing scale */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;

  /* Typography */
  --font-sans: 'InterVariable', system-ui, sans-serif;

  /* Radii */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-med:  280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --content-max: 860px;
  --gutter:      var(--sp-md);
}

/* Reset and base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 100%, not 16px: the browser's own text-size setting must still apply (WCAG
   1.4.4); at the default setting it is the same 16px. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse at 12% -8%, rgba(45, 212, 191, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 92% 108%, rgba(226, 30, 38, 0.06) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--accent-primary); text-underline-offset: 2px; }
a:hover { color: var(--text-primary); }

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

/* Visible keyboard focus (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hidden on screen, still read aloud */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The hidden attribute must win over any display rule below */
[hidden] { display: none !important; }

/* Main area and hero */
.main-content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-xl) var(--gutter) var(--sp-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  text-align: center;
}

.hero-icon {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 14px rgba(45, 212, 191, 0.40));
}

.hero-title {
  font-size: clamp(1.7rem, 7vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  /* The page's name breaks where index.html marks it with <wbr>, after "GDPR" and after "Letter"
     (stage 3 review E3-9); inside a word only if even one part cannot fit. */
  overflow-wrap: anywhere;
}

.hero-lede {
  max-width: 36rem;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.55;
}

.hero-note {
  max-width: 36rem;
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--border-active);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.noscript {
  padding: var(--sp-md);
  border: 1px solid var(--warn-border);
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn-text);
  text-align: center;
}

/* Android app link (website only) */
.android-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.android-app p { max-width: 34rem; }
.android-app strong { color: var(--text-primary); font-weight: 600; }
.android-app .btn { max-width: 100%; white-space: normal; }

/* Shared building blocks */
.card {
  position: relative;
  width: 100%;
  padding: var(--sp-lg) var(--sp-md);
  background: var(--bg-card);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* Same top hairline the other Labs cards carry */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast), filter var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--grad-primary);
  color: var(--on-accent);
}
.btn-primary:hover { filter: brightness(1.08); color: var(--on-accent); }

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--field-border);
  color: var(--text-primary);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }

.btn-small {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* App switcher carousel */
/* Mechanics as in the other Labs apps: the track holds TEN identical
   sets of cards and slides by exactly one set (10%), so the loop is
   seamless. Change the number of sets and the -10% together. */
.app-switcher-container {
  padding: var(--sp-2xl) 0;
  margin-top: var(--sp-xl);
  text-align: center;
  border-top: 1px solid var(--border);
}

.switcher-title {
  margin-bottom: var(--sp-lg);
  padding: 0 var(--gutter);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text-secondary);
}

.app-switcher-marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 0.5rem var(--gutter) 1.5rem;
}

.app-switcher-track {
  display: flex;
  width: max-content;
  animation: marquee 35.12s linear infinite; /* 21 cards: CheckLink's speed for 20 in 33.45s */
}

.app-switcher-marquee:hover .app-switcher-track,
.app-switcher-marquee:focus-within .app-switcher-track { animation-play-state: paused; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-10%); }
}

.switcher-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.switcher-card:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
}

/* Icon size here, not in an inline style="...", which this page's CSP
   would refuse. */
.switcher-card img {
  width: 32px;
  height: 32px;
  opacity: 0.9;
}

/* Carousel and footer access (2026-10-10 canon) */
.switcher-card[aria-current="page"] { border-color: var(--accent-primary); }
.switcher-card:focus-visible { border-radius: 12px; }
.app-switcher-marquee:has(.switcher-card:focus-visible) { overflow-x: auto; }
.app-switcher-marquee:has(.switcher-card:focus-visible) .app-switcher-track { animation: none; }

.app-switcher-container input.switcher-pause {
  all: revert;
  margin: 0 0.5rem 0.75rem 0;
  vertical-align: middle;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.app-switcher-container label.switcher-pause-label {
  all: revert;
  display: inline-block;
  margin-bottom: 0.75rem;
  vertical-align: middle;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
}

.app-switcher-container input.switcher-pause:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.switcher-pause:checked ~ .app-switcher-marquee { overflow-x: auto; }
.switcher-pause:checked ~ .app-switcher-marquee .app-switcher-track { animation: none; }

/* A footer link never breaks inside itself */
.footer-bottom p a { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .app-switcher-container input.switcher-pause,
  .app-switcher-container label.switcher-pause-label { display: none; }
}

/* Footer */
.site-footer {
  margin-top: auto;
  padding: 4rem 1.5rem 2rem;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: 680px;
  margin: 0 auto 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.footer-brand { max-width: 320px; }

.footer-logo {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.footer-logo:hover { color: var(--text-primary); }
.footer-dot { color: var(--accent-primary); }

.footer-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-powered p {
  max-width: 250px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

.footer-bottom {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.footer-social a { color: var(--text-muted); transition: color var(--t-fast), transform var(--t-fast); }
.footer-social a:hover { color: var(--text-primary); transform: translateY(-2px); }
.footer-social svg { display: block; }

.footer-bottom p { color: var(--text-muted); font-size: 0.85rem; }

/* Links take the app's own accent and keep their underline, because
   colour alone must not be the only thing marking a link. */
.footer-bottom p a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}

.footer-bottom p a:hover { color: var(--text-primary); }

/* The public test of the privacy claim */
.footer-bottom .footer-offline {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Kept readable: above 5:1 at this opacity */
.footer-privacy, .footer-ai { opacity: 0.85; }

/* Wider screens */
@media (min-width: 720px) {
  :root { --gutter: var(--sp-xl); }
  .main-content { padding-top: var(--sp-2xl); }
  .card { padding: var(--sp-xl); }
  .footer-powered p { text-align: right; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .app-switcher-track { animation: none; }
  .app-switcher-marquee { overflow-x: auto; }
  .btn,
  .switcher-card,
  .footer-social a { transition: none; }
  .btn:hover,
  .btn:active,
  .switcher-card:hover,
  .footer-social a:hover { transform: none; }
}

/* ================================================================
   APP INTERFACE
   Everything below styles GDPRLetterBuilder itself, inside <main>. It
   uses the tokens above and leaves the footer and carousel alone. One
   column at every width (spec section 11).
================================================================ */

.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.step-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  font-size: 1.3rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.step-no {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  height: 1.8em;
  padding: 0 0.35em;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  border: 1px solid var(--border-active);
  color: var(--accent-primary);
  font-size: 0.8em;
  font-weight: 700;
}

.sub-title {
  font-size: 1.02rem;
  font-weight: 650;
  margin-top: var(--sp-sm);
}

.step p,
.step li { overflow-wrap: anywhere; }

.hint {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.hint strong,
.tip strong,
.note strong { color: var(--text-primary); font-weight: 600; }

.tip {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.note {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--accent-primary);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.req,
.opt {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.88em;
}

/* Fields */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  min-width: 0;
}

.field > label,
.letter-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
}

select { cursor: pointer; }
select option { background: var(--bg-surface); color: var(--text-primary); }

textarea { resize: vertical; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
  border-color: var(--accent-primary);
}

input[type="date"] { max-width: 16rem; color-scheme: dark; }

/* Chromium puts the focus of a date field on its day, month and year parts inside, so the field
   itself never matches :focus-visible: ring it whenever it has focus. */
input[type="date"]:focus,
input[type="date"]:focus-within {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
  border-color: var(--accent-primary);
}

/* Choices */
fieldset {
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

legend {
  margin-bottom: var(--sp-sm);
  padding: 0;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

.choices.inline { flex-direction: row; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg); }
.choices.inline legend { width: 100%; }

/* Each radio and checkbox row is at least 44 px high, so the whole row is a comfortable target on
   a touch screen (stage 3 review E3-8; WCAG 2.5.5 and Android's 48 dp guidance). The box sits level
   with the first line of its label, as in stage 2, also when the label runs to two lines (stage 3
   verification). The row is one flex line (the label never wraps under the box: its width is
   capped at what is left beside the box, less 1 px for rounding), and align-content centres that line in a row taller than
   it, so a one-line row still has its box and text in the middle of the 44 px. */
.choice,
.check {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
  min-height: 44px;
  column-gap: 0.65rem;
  cursor: pointer;
  color: var(--text-primary);
  line-height: 1.45;
}

.choice input,
.check input {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  /* Half the space the first line leaves beside the box (1lh is the label's line height, which
     the input inherits), so the box stays in the middle of that line also when Android's text size
     grows the text but not the box (em and rem do not follow it there; lh does). The first value
     is for a browser without the lh unit. */
  margin: 0.125rem 0 0;
  margin: calc((1lh - 1.2rem) / 2) 0 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.choice > span,
.check > span { min-width: 0; max-width: calc(100% - 1.85rem - 1px); overflow-wrap: anywhere; }

/* In an inline row the label is only as wide as its own content, so the cap above resolved
   against that width and took 1 px off the text: "English" broke inside the word at every
   width (2026-10-29). There the text starts from no width and grows into what is left beside
   the box instead: as wide as it needs while the row has room, and still beside the box,
   wrapping, when the row is narrower than the label (320 px at 200% text). */
.choices.inline .choice > span { flex: 1 1 0; max-width: none; }

.choice strong { display: block; font-weight: 600; }

.choice-sub {
  display: block;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.ids { gap: var(--sp-md); }

.id-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.id-row,
.tl-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}

.id-row .id-remove { align-self: flex-start; }
#id-add { align-self: flex-start; }

/* Step 9's reply checker and the cover note's events (stage 2). */
.fu-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.tl-row .tl-remove { align-self: flex-start; }
#tl-add { align-self: flex-start; }
#fu-body,
#fu-letter-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
#fu-letter-wrap { gap: var(--sp-sm); }

.sub-field { margin-left: 1.85rem; }

.asks,
.tips {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding-left: 1.25rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.tips strong { color: var(--text-primary); font-weight: 600; }

/* Warnings */
.warn {
  padding: var(--sp-sm) var(--sp-md);
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn);
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.warn strong { font-weight: 700; }

/* Details ("Why?" and the guides) */
details.why,
details.less,
details.guide {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
}

details > summary {
  display: list-item;
  min-height: 44px;
  padding: 0.6rem var(--sp-md);
  color: var(--accent-primary);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style-position: inside;
}

details > summary::marker { color: var(--accent-primary); }

details[open] > summary { border-bottom: 1px solid var(--border); }

details > :not(summary) { margin: var(--sp-sm) var(--sp-md); }
details > :last-child { margin-bottom: var(--sp-md); }

details.why p,
details.guide p {
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.6;
}

details.guide p strong { color: var(--text-primary); font-weight: 600; }

details.less .check { margin: var(--sp-sm) var(--sp-md); }

.sources {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
}

.step > details.guide + details.guide { margin-top: calc(var(--sp-sm) * -1); }

/* The letter */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-md) var(--sp-xl);
}

.row > .field { flex: 0 1 16rem; }

.lead-line {
  color: var(--text-primary);
  font-weight: 600;
}

.letter-label { margin-bottom: calc(var(--sp-sm) * -1); }

textarea.letter {
  min-height: 28rem;
  padding: 1.25rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--field-border);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color-scheme: light;
}

textarea.letter:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

.edited {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm) var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 0.9rem;
}

.missing {
  color: var(--warn-text);
  font-size: 0.9rem;
}

/* Outputs */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.actions .btn { flex: 1 1 12rem; }

.status {
  min-height: 1.5em;
  color: var(--accent-primary);
  font-weight: 600;
}

.clear-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
}

.clear-row .btn { align-self: flex-start; }

/* The deadline */
.deadline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border: 1px solid var(--border-active);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}

.deadline:empty { display: none; }

.deadline-head {
  color: var(--text-primary);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.deadline p { color: var(--text-secondary); }
.deadline .deadline-ext { color: var(--text-primary); }

/* The complaint steps and the sources */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding-left: 1.5rem;
  color: var(--text-secondary);
}

.steps-list strong { color: var(--text-primary); font-weight: 600; }

.steps-list ul {
  margin: var(--sp-sm) 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.source-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding-left: 1.25rem;
  color: var(--text-secondary);
  font-size: 0.93rem;
}

.step > p:not([class]) { color: var(--text-secondary); }
.step > p:not([class]) strong { color: var(--text-primary); }

/* The confirmation dialog */
dialog.confirm {
  width: min(28rem, calc(100% - 2rem));
  margin: auto;
  padding: var(--sp-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-active);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

dialog.confirm::backdrop { background: rgba(0, 0, 0, 0.7); }

dialog.confirm[open] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.confirm-title { font-size: 1.2rem; }

dialog.confirm p { color: var(--text-secondary); }

/* The printed letter (OUT-4, Save as PDF)
   The page margin is 0, so a browser has no room for its own header and footer (the page title,
   the address, the date). Chromium leaves them out when the margin has no room for them, and
   Firefox draws a header or footer only when its line fits inside the page's margin
   (nsPageFrame::DrawHeaderFooter; Mozilla bugs 1250674 and 1672529). The letter's margins are its
   padding instead, and box-decoration-break: clone repeats that padding on every page the letter
   runs onto: 20 mm at the sides and top, 22 mm at the bottom, on A4. A zero margin has no room for
   a page counter either, so the web print has none (the Android app draws its own page numbers).
   WebKit (Safari, and every browser on iOS) clones the padding only on inline boxes, so a letter
   of two pages or more would run to the paper's edge where it breaks. There, and in any browser
   without box-decoration-break: clone, the page keeps the 20 mm and 22 mm margins as before and the
   letter has no padding; that browser's own header and footer setting then applies, as before
   30 October 2026. font: -apple-system-body is known only to Apple's WebKit. */
.print-letter { display: none; }

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html, body {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    min-height: 0;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > :not(.print-letter) { display: none !important; }

  .print-letter {
    display: block !important;
    margin: 0;
    padding: 20mm 20mm 22mm;
    box-decoration-break: clone;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #000;
    background: #fff;
    font-family: 'InterVariable', sans-serif;
    font-size: 11pt;
    line-height: 1.45;
  }

  @supports (not (box-decoration-break: clone)) or (font: -apple-system-body) {
    @page { margin: 20mm 20mm 22mm; }
    .print-letter { padding: 0; }
  }
}

/* Forced colours */
@media (forced-colors: active) {
  .card,
  .id-row,
  .tl-row,
  details.why,
  details.less,
  details.guide,
  .deadline,
  .hero-note,
  dialog.confirm { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
  .warn,
  .edited { border: 2px solid CanvasText; }
  textarea.letter { background: Canvas; color: CanvasText; }
  .step-no { border: 1px solid CanvasText; }
}

/* ================================================================
   PRIVACY PAGE (privacy.html)
   The same chrome as the app: hero, one card, the site footer. The
   page has the app's own policy (style-src 'self'), so its few rules
   live here. Prefix: pp-.
================================================================ */
.pp-back {
  align-self: flex-start;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
}

.pp-back:hover { color: var(--accent-primary); }

.pp-doc {
  max-width: 46rem;
  margin: 0 auto;
}

.pp-doc h2 {
  font-size: 1.15rem;
  font-weight: 650;
  margin: var(--sp-xl) 0 var(--sp-sm);
}

.pp-doc h2:first-child { margin-top: 0; }

.pp-doc p {
  color: var(--text-secondary);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.pp-doc p + p { margin-top: var(--sp-md); }

.pp-doc strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pp-doc .pp-updated {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ================================================================
   FIRST-RUN NOTICE (gate.css, generated by build-gates.py)
   gate.css is written by the shared generator and is not edited here.
   As in CheckLink, the notice itself scrolls when it is taller than the
   screen (200% text on a small phone), so Got it is always reachable.
   The selectors are one step more specific than gate.css's, which
   loads after this file.
================================================================ */
html .sb-gate-overlay {
  overflow-y: auto;
  align-items: safe center;
}

.sb-gate-overlay .sb-gate-dialog {
  max-height: none;
  overflow: visible;
}

.sb-gate-overlay .sb-gate-scroll {
  max-height: max(12rem, calc(88vh - 20rem));
}