/* WYNDER public pages (salary pages, salary comparison, prerendered pages).
   Same tokens as the app (frontend/lib/theme/app_theme.dart): Plus Jakarta
   Sans, the light green-grey surfaces, the accent green, 6 px radii, flat
   bordered panels without shadows. Versioned file name because nginx caches
   CSS for a year: copy to public-v4.css for changes (v2 added the benchmark
   tables of the salary pages, v3 the job search pages). */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  --page: #F5F5F1;
  --panel: #FFFFFF;
  --card: #EEF1ED;
  --ink: #18201D;
  --text-2: #56615C;
  --muted: #636D67;          /* app muted #77817C, darkened for 4.5:1 on --page */
  --line: #DDE3DF;
  --accent: #176B57;
  --accent-hover: #12594A;
  --accent-soft: #E4F0EC;
  --accent-line: #9FC5B9;
  --gold: #AA711F;
  --rose: #B34858;
  --warning-soft: #F7EEE2;
  --line-strong: #C9D1CD;
  /* Women and men in the age chart: the salary comparison's first two
     series colours (checked for colour-blind separation on white). */
  --s-w: #18805F;
  --s-m: #B8741A;
  --radius: 6px;
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--accent); color: #fff; padding: 10px 14px; border-radius: var(--radius); z-index: 10; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: the app's wordmark (mark + WYNDER) and a way into the app. */
.site-header { background: var(--panel); border-bottom: 1px solid var(--line); }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 12px 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: 1.8px; }
.brand img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a { font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 12px; border-radius: var(--radius); color: var(--text-2); }
.site-nav a:hover { background: var(--card); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav .button { color: #fff; }

.wrap { max-width: 760px; margin: 0 auto; padding: 28px 24px 72px; }
.wrap.wide { max-width: 1180px; }

.crumbs { font-size: 14px; color: var(--text-2); margin: 0 0 14px; }
.crumbs a { color: var(--text-2); }
.crumbs span[aria-hidden] { margin: 0 6px; color: var(--accent-line); }

h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.8px; font-weight: 700; margin: 0 0 12px; }
h2 { font-size: 23px; line-height: 1.2; letter-spacing: -0.3px; font-weight: 700; margin: 44px 0 12px; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 14px; }
.lead { font-size: 17px; color: var(--text-2); max-width: 62ch; }
ul { padding-left: 20px; }
li { margin: 4px 0; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }

.button, .button-outline {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 14px 20px; border-radius: var(--radius);
  font: 700 14px/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.button { background: var(--accent); color: #fff; border: 0; }
.button:hover { background: var(--accent-hover); color: #fff; }
.button-outline { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.button-outline:hover { border-color: var(--accent-line); color: var(--ink); }
.site-header .button { min-height: 40px; padding: 10px 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* Salary band: the one visual element of a salary page. The middle 50 %
   as a band on a track, the median as a tick, values written underneath. */
.pay { margin: 22px 0 8px; }
.pay-median { font-size: 42px; line-height: 1.05; letter-spacing: -1.2px; font-weight: 700; margin: 0; }
.pay-median small { display: block; font-size: 14px; line-height: 1.45; letter-spacing: 0; font-weight: 600; color: var(--text-2); margin-top: 8px; }
.band { position: relative; height: 40px; margin: 26px 0 6px; }
.band .track { position: absolute; left: 0; right: 0; top: 16px; height: 8px; border-radius: 4px; background: var(--card); }
.band .range { position: absolute; top: 12px; height: 16px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.band .range.open { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.band .median { position: absolute; top: 4px; width: 3px; height: 32px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); }
.band-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.band-values li { margin: 0; font-size: 14px; color: var(--text-2); }
.band-values li strong { display: block; color: var(--ink); font-size: 16px; }
.band-values li:nth-child(2) { text-align: center; }
.band-values li:nth-child(3) { text-align: right; }

.note { background: var(--warning-soft); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: var(--radius); }

.region-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.region-lists h3 { font-size: 15px; color: var(--text-2); margin: 0 0 6px; }
.linklist { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 20px; }
.linklist li { margin: 0; break-inside: avoid; }
.linklist a { display: block; padding: 6px 0; text-decoration: none; }
.linklist a:hover { text-decoration: underline; }
.linklist.single { columns: 1; }
.region-lists .linklist { columns: 1; }

.filter { margin: 22px 0 10px; }
.filter label { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.filter input { width: 100%; max-width: 420px; font: 16px var(--font); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; }
.filter input:focus { outline: none; border: 2px solid var(--accent); padding: 12px 15px; }

.caption { font-size: 13px; color: var(--muted); margin-top: -4px; }
.source { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 44px; }

.site-footer { border-top: 1px solid var(--line); }
.site-footer .inner { max-width: 1180px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.site-footer a { color: var(--text-2); }


/* Benchmark tables (salary pages): one row per group, a band or bar on a
   shared scale, the figures written next to it. The drawing is
   aria-hidden; the text cells carry the numbers. */
.lead-in { max-width: 62ch; color: var(--ink); }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 4px 0 6px; font-size: 13px; color: var(--text-2); }
.key li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.key .k-range { width: 22px; height: 10px; border-radius: 3px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.key .k-mid { width: 3px; height: 14px; border-radius: 2px; background: var(--accent); }
.key .k-w { width: 11px; height: 11px; border-radius: 50%; background: var(--s-w); }
.key .k-m { width: 10px; height: 10px; border-radius: 2px; background: var(--s-m); }

.bench { width: 100%; border-collapse: collapse; font-size: 15px; margin: 4px 0 10px; }
.bench th, .bench td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-weight: 400; }
.bench thead th { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 6px 0; }
.bench tbody th { width: 36%; padding-right: 16px; font-weight: 600; }
.bench tbody th a { font-weight: 600; text-decoration-color: var(--accent-line); }
.bench tbody th small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.bench .tag { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 6px; }
.bench .viz { min-width: 90px; }
.bench td.num, .bench th.num { width: 1%; padding-left: 16px; text-align: right; white-space: nowrap; }
.bench td.num strong { display: block; font-weight: 700; }
.bench td.num small { display: block; font-size: 12.5px; color: var(--muted); }
.bench td.na { color: var(--muted); font-size: 13px; }
.bench .track { position: relative; height: 18px; }
.bench .track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: var(--card); }
.bench .rng { position: absolute; top: 3px; height: 12px; border-radius: 3px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.bench .rng.open { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bench .mid { position: absolute; top: 0; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); }
.bench tr.is-current th { color: var(--accent); }
.bench tr.is-current .rng { background: #CBE3D9; border-color: var(--accent); }
.bench .link { position: absolute; top: 8px; height: 2px; background: var(--line-strong); }
.bench .dot { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.bench .dot.w { border-radius: 50%; background: var(--s-w); }
.bench .dot.m { width: 11px; height: 11px; top: 3.5px; margin-left: -5.5px; border-radius: 2px; background: var(--s-m); }
.bench .bar { position: relative; height: 10px; border-radius: 3px; background: var(--card); }
.bench .bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #7FB8A4; }
.wrap > section h3, section h3 { margin-top: 28px; }

/* Job market figures: one panel, cells divided by lines. */
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.figures > div { padding: 14px 16px; border-top: 1px solid var(--line); margin-top: -1px; }
.figures > div:nth-child(odd) { border-right: 1px solid var(--line); }
.figures dt { font-size: 13px; font-weight: 600; color: var(--text-2); }
.figures dd { margin: 2px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; }
.figures dd.sub { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-2); line-height: 1.4; margin-top: 4px; }

.places { list-style: none; counter-reset: place; padding: 0; margin: 4px 0 0; columns: 2; column-gap: 28px; }
.places li { counter-increment: place; display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; margin: 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.places li span { color: var(--muted); font-size: 14px; white-space: nowrap; }


/* Job search pages (/stellen): newest listings and link lists. */
.jobs { list-style: none; padding: 0; margin: 4px 0 0; }
.jobs li { padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.jobs .job-title { font-weight: 700; text-decoration: none; }
.jobs .job-title:hover { text-decoration: underline; }
.jobs .pay-tag { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.jobs small { display: block; color: var(--text-2); font-size: 14px; margin-top: 2px; }
.jobs .original { color: var(--muted); font-size: 13px; margin-left: 4px; }
.places.single { columns: 1; }

@media (max-width: 640px) {
  .site-header .inner { padding: 10px 16px; }
  .site-nav a:not(.button) { display: none; }
  .wrap { padding: 20px 16px 56px; }
  h1 { font-size: 29px; letter-spacing: -0.5px; }
  h2 { font-size: 21px; margin-top: 36px; }
  .pay-median { font-size: 36px; }
  .region-lists { grid-template-columns: 1fr; gap: 20px; }
  .region-lists .linklist, .linklist { columns: 2; }
  .linklist.single { columns: 1; }
  .band-values { gap: 8px; }
  .band-values li { font-size: 12px; }
  .band-values li strong { font-size: 15px; }
  .actions .button, .actions .button-outline { width: 100%; }
  .bench { font-size: 14px; }
  .bench tbody th { width: 40%; padding-right: 10px; }
  .bench td.num, .bench th.num { padding-left: 10px; }
  .bench.people .viz, .people-key { display: none; }
  .figures dd { font-size: 21px; }
  .places { columns: 1; }
}
@media print {
  .site-header, .site-footer, .actions { display: none; }
}