/* Shared site chrome for the EIGHT companion pages that link this file:
 * privacy, impressum, join, delete-account, how-it-works, terms,
 * release-notes and 404. (It said "the four pinned pages" until
 * 2026-08-20 -- how-it-works, terms and release-notes adopted it later
 * and were never added to the list; 404 adopted it too, root-absolute,
 * and the list was never corrected for that either. index.html is NOT
 * one of them; it carries its own .topstrip.) Select Rail identity,
 * Plan 82 Task 1, spec 2026-08-29-select-rail-identity-design.md.
 *
 * Token values are copied VERBATIM into every page's own :root + dark-media
 * block (chrome.css + all 9 pages, index included) -- the token-sync gate
 * in check_pages.sh enforces byte-equality (after whitespace normalization)
 * across all ten copies, so editing this block means re-copying it into
 * every page in the same commit. Each page links this file BEFORE its own
 * inline <style>, so page-local rules keep cascade precedence on ties.
 *
 * Type: "Archivo Narrow" only, weights 400-700, already self-hosted via
 * fonts/fonts.css (which every page links) -- no new faces or weights this
 * task. Gabarito/Hanken Grotesk/Spline Sans Mono retired in Plan 82 Task 5
 * (V1 of the Select Rail spec); this file never referenced any of them.
 */
:root{color-scheme:light dark;--bg:#F7F5F1;--ink:#1A1A1A;--accent:#E5551F;--soft:#5B5750;--line:#D8D3CA;--card:#FFFFFF;--on-accent:#1A1A1A;--link:#A63700;--window:#FFFFFF;--wink:#1A1A1A}
@media (prefers-color-scheme: dark){:root{--bg:#16221E;--ink:#F2F2F2;--accent:#F0581C;--soft:#A9B3AE;--line:#2A4139;--card:#1D2D28;--on-accent:#1A1A1A;--link:#FF7A47;--window:#F2F2F2;--wink:#141414}}

/* The surfaces the browser draws still belong to the palette. These mirror
 * every page's own rules so every page selects, scrolls and underlines the
 * same way -- and, like the rest of this file, they carry no SVG and no
 * fill= so join.html's closed-palette gate can never trip on them.
 * ::selection uses --accent/--on-accent (not --ink/--bg): the sober
 * register still marks a selection with the flag-orange accent, the same
 * pairing the app's own selection/highlight surfaces use. */
html { scrollbar-color: var(--soft) transparent; }
::selection { background: var(--accent); color: var(--on-accent); }
a { text-underline-offset: 0.18em; }

/* Six of the seven pages that share this chrome scrolled horizontally at a
 * 200% text size -- long German compounds, the operator email address and a
 * form label pushed past the viewport (WCAG 1.4.4, and two of those pages are
 * legally mandated). One declaration here fixes all of them, because every
 * one of them links this file. */
body { overflow-wrap: break-word; }

/* Form controls default to content-box, so a width plus padding overflows its
 * container. delete-account.html -- a legally required page -- scrolled 75px
 * sideways at 200% text because its email input measured 425px in a 390px
 * viewport. Page <style> blocks load after this file, so a page can still
 * override either declaration deliberately. */
input, select, textarea, button {
  box-sizing: border-box;
  max-width: 100%;
  /* min-width:0 as well, and it is the declaration that actually does the
   * work: an input's intrinsic width comes from its `size` attribute, and a
   * grid item's default min-width:auto lets that expand the track, against
   * which max-width:100% then resolves. delete-account.html's form is a
   * single-column grid, so its email input widened the track to 425px inside
   * a 310px content box until this line let the track shrink. */
  min-width: 0;
}

/* Focus-ring shape guard: a plain browser-default outline reads as a sharp
 * rectangle dropped over softer shapes. Matches index.html's own copy of
 * this rule (that page carries no <link> to this file, so it repeats it
 * inline) -- a:focus-visible/button:focus-visible get the same 3px accent
 * ring with a 6px corner radius everywhere on the site. Deliberately NOT
 * applied via .cut-corner below: clip-path clips a box's ENTIRE paint,
 * outline included, and outline-offset here is positive (the ring is drawn
 * OUTSIDE the border box) -- combining the two on a focusable element would
 * silently clip the ring to invisible. .cut-corner therefore never lands on
 * an interactive/focusable element in this file (see its own comment).
 */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Shared cut-corner bevel: a fixed 6px bevel on all four corners, mirroring
 * the app's kCutCorner (app/lib/theme.dart:8,
 * `BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(6)))`)
 * -- the sober register's one physical mark, reused everywhere a card or a
 * panel needs it instead of each page re-deriving its own polygon.
 * NEVER apply this to a focusable element (see the focus-ring comment
 * above): clip-path clips the whole box, and a ring drawn with a positive
 * outline-offset falls entirely outside the clipped region and disappears.
 * A later page-local re-skin that wants this shape on a real button/card
 * must pair it with an INSET (negative) outline-offset of its own so the
 * ring stays inside the clip. */
.cut-corner {
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0 calc(100% - 6px), 0 6px
  );
}

/* Lightweight header: wordmark home link + a small text-only nav. Flat
 * field, one 1px --line hairline underneath -- no gradients, no shadows.
 * Deliberately no SVG and no fill= attributes anywhere in this chrome:
 * join.html enforces a whole-file closed palette on fill="#RRGGBB"
 * (check_pages.sh). */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: "Archivo Narrow", "Segoe UI", system-ui, sans-serif;
  line-height: 1.4;
}

.site-header .wordmark {
  display: inline-flex; gap: 0.24em; align-items: baseline; line-height: 1;
  font-family: "Archivo Narrow", "Segoe UI", system-ui, sans-serif;
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
/* The tape splice under the SO (spec 2026-09-02 §4): a torn accent strip
 * BEHIND the letters, tipped -2.5deg and sheared -10deg -- never a plate. */
.site-header .wordmark .tape { position: relative; isolation: isolate; }
.site-header .wordmark .tape::after {
  content: ""; position: absolute; z-index: -1;
  left: -0.22em; right: -0.22em; bottom: 0.04em; height: 0.17em;
  background: var(--accent);
  transform: rotate(-2.5deg) skewX(-10deg);
  clip-path: polygon(1% 0, 99% 4%, 100% 34%, 98.6% 62%, 99.6% 100%, 1.6% 96%, 0 66%, 1.2% 30%);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  font-size: 0.85rem;
}
/* 24px minimum target height: at 0.85rem these links were 21px tall, under
 * the WCAG 2.2 target-size floor, on every page that shares this chrome.
 * Links use --link -- the derived, text-legible sibling of --accent (raw
 * --accent fails AA as small text; see docs/architecture/07-brand.md §2 /
 * app/lib/theme.dart:120-146), not the muted --soft this nav used before. */
.site-header nav a {
  color: var(--link);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
/* aria-current was set on the active link on five of these pages but styled
 * nowhere, so sighted visitors got none of the orientation screen-reader
 * users got. */
.site-header nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

/* ==========================================================================
 * Language switch (Plan 51). The mechanism and the full attribute contract
 * live in lang-<hash>.js; these are the two halves of it that are visual.
 *
 * Every rule below is scoped under html[data-lang] or html[data-lang-ready],
 * and that scoping is load-bearing rather than tidy. With scripting off
 * neither attribute is ever set: nothing is hidden, the toggle is not shown,
 * and these pages read exactly as they did before Plan 51 -- both languages
 * stacked. Written the other way round (hide the second language by default,
 * reveal it from script) one language of a legally mandated page would be
 * unreachable to anyone without script.
 *
 * index.html carries its own copy of these rules inline, because it does not
 * link this file at all -- it has its own .topstrip chrome. 404.html carries
 * one too: Cloudflare Pages serves that page for nested paths, where a
 * relative asset URL resolves against the wrong directory.
 */
html[data-lang="de"] [data-lang-block="en"],
html[data-lang="en"] [data-lang-block="de"] {
  display: none;
}

/* Hidden until lang.js has run and wired the buttons, so a visitor is never
 * shown a control that cannot work. */
[data-lang-toggle] {
  display: none;
}
html[data-lang-ready] [data-lang-toggle] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
[data-lang-toggle] button {
  font-family: "Archivo Narrow", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  background: none;
  border: 0;
  padding: 0;
  /* 24px in both directions: a two-letter label is well under the WCAG 2.2
   * target-size floor, the same floor the nav links above are raised to.
   * No .cut-corner here on purpose -- see that class's own comment: this
   * button is focusable, and this file's :focus-visible ring uses a
   * positive outline-offset that a clip-path would clip to nothing. */
  min-height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  cursor: pointer;
}
[data-lang-toggle] button:hover,
[data-lang-toggle] button:focus-visible {
  color: var(--link);
  text-decoration: underline;
}
/* The active language is emphasised exactly the way the active nav link is,
 * because it is the same kind of orientation. */
[data-lang-toggle] button[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
[data-lang-toggle] .lang-sep {
  color: var(--line);
  font-size: 0.85rem;
}