/* Blog styling. Deliberately standalone: these pages are plain HTML served straight off the CDN so
   search engines and people with slow connections get the content without booting the Angular app.
   The tokens mirror src/styles.css; keep them in step if the brand palette moves.

   Theme follows the operating system here rather than the app's html.dark class, because a static
   page has no access to the app's stored preference. */
:root {
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b;
  --line:#e6e8ef; --brand:#0d1117; --on-brand:#ffffff; --accent:#3d3af0;
  color-scheme: light;
}
/* Dark tokens, defined once and switched on from two places. The app persists the reader's choice
   in localStorage and applies it as html.dark; the blog is on the same origin, so it can honour that
   instead of guessing from the operating system and disagreeing with the app the reader just left.
   The media query is the fallback for a first visit, and html.light lets an explicit light choice
   beat a dark OS. */
html.dark, html.dark body { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --bg:#0b1120; --surface:#131c2e; --surface-2:#1c2740;
    --ink:#e8edf6; --ink-2:#cbd5e1; --muted:#93a1b5;
    --line:#273349; --brand:#e8edf6; --on-brand:#0b1120; --accent:#8f8cff;
    color-scheme: dark;
  }
}
html.dark {
  --bg:#0b1120; --surface:#131c2e; --surface-2:#1c2740;
  --ink:#e8edf6; --ink-2:#cbd5e1; --muted:#93a1b5;
  --line:#273349; --brand:#e8edf6; --on-brand:#0b1120; --accent:#8f8cff;
}
*,*::before,*::after { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:720px; margin:0 auto; padding:0 20px 96px; }
a { color:var(--accent); text-underline-offset:2px; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* header */
.top { border-bottom:1px solid var(--line); background:var(--surface); }
.top .inner { max-width:720px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top a { text-decoration:none; }
.brand { display:flex; align-items:center; }
.brand img { height:26px; width:auto; }
/* The wordmark is dark ink and vanishes on a dark surface, so there are two files and exactly one is
   shown. Both selectors carry the .brand prefix on purpose: `.brand img` would otherwise outweigh a
   bare `.lg-dark` and render both logos at once, which is precisely what it did. */
.brand .lg-light { display:block; }
.brand .lg-dark  { display:none; }
@media (prefers-color-scheme: dark) {
  html:not(.light) .brand .lg-light { display:none; }
  html:not(.light) .brand .lg-dark  { display:block; }
}
html.dark .brand .lg-light { display:none; }
html.dark .brand .lg-dark  { display:block; }
html.light .brand .lg-light { display:block; }
html.light .brand .lg-dark  { display:none; }
.top .cta { font-size:.9rem; font-weight:600; background:var(--brand); color:var(--on-brand);
  padding:8px 14px; border-radius:9px; white-space:nowrap; }

h1 { font-size:clamp(1.9rem,4.6vw,2.6rem); line-height:1.15; letter-spacing:-.02em; margin:0; text-wrap:balance; }
h2 { font-size:1.28rem; line-height:1.3; margin:38px 0 12px; letter-spacing:-.01em; text-wrap:balance; }
p { margin:0 0 16px; color:var(--ink-2); }
strong { color:var(--ink); font-weight:650; }

.meta { color:var(--muted); font-size:.85rem; margin:14px 0 0; }
.dek { font-size:1.12rem; color:var(--ink-2); margin:16px 0 0; }
article { padding-top:44px; }
article > p:first-of-type { margin-top:28px; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin:24px 0; }
.card p:last-child { margin-bottom:0; }
.card h3 { margin:0 0 8px; font-size:1rem; }

ul.plain { margin:0 0 16px; padding-left:20px; color:var(--ink-2); }
ul.plain li { margin-bottom:8px; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.chip { border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:5px 12px; font-size:.86rem; color:var(--ink-2); white-space:nowrap; }

.end { margin-top:48px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.btn { display:inline-block; background:var(--brand); color:var(--on-brand); text-decoration:none;
  font-weight:600; font-size:.95rem; padding:11px 20px; border-radius:10px; }
.back { font-size:.9rem; }

/* index list */
.posts { list-style:none; margin:28px 0 0; padding:0; }
.posts li { border-bottom:1px solid var(--line); }
.posts li:last-child { border-bottom:0; }
.posts a { display:block; padding:20px 0; text-decoration:none; color:inherit; }
.posts a:hover h2 { color:var(--accent); }
.posts h2 { margin:0 0 6px; font-size:1.14rem; }
.posts p { margin:0; font-size:.95rem; color:var(--muted); }

/* Inline mock-ups of the actual UI. Drawn in HTML rather than pasted as screenshots: a screenshot
   would carry a real user's roles and match scores, would need re-cutting every time the interface
   moves, and would arrive as a fixed-width image that ignores dark mode and small screens. These
   follow the app's own tokens, so they stay recognisable without ever showing anyone's data. */
.mock { border:1px solid var(--line); background:var(--surface); border-radius:12px;
  overflow:hidden; margin:22px 0; font-size:.92rem; }
.mock-bar { background:var(--surface-2); padding:9px 14px; font-size:.78rem; color:var(--muted);
  border-bottom:1px solid var(--line); font-weight:600; }
.mock-row { padding:14px 16px; border-bottom:1px solid var(--line); }
.mock-row:last-child { border-bottom:0; }
/* Wraps rather than squeezing: on a phone the score drops to its own line instead of ending up
   pressed against the end of a long job title. */
.mock-head { display:flex; align-items:baseline; justify-content:space-between; gap:6px 18px;
  flex-wrap:wrap; }
.mock-title { flex:1 1 220px; min-width:0; }
.mock-title { font-weight:650; color:var(--ink); }
.mock-score { flex:0 0 auto; }
.mock-score { color:var(--accent); font-weight:700; white-space:nowrap; }
.mock-sub { color:var(--muted); font-size:.86rem; margin-top:2px; }
.mock-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tag { border:1px solid var(--line); border-radius:7px; padding:3px 9px; font-size:.78rem;
  color:var(--ink-2); background:var(--bg); white-space:nowrap; }
.tag.on { border-color:var(--accent); color:var(--accent); font-weight:600; }
.tag.new { border-color:transparent; background:var(--accent); color:#fff; font-weight:600; }
.tag.applied { border-color:transparent; background:#e4efeb; color:#1f6b57; font-weight:600; }
.tag.ref { border-color:transparent; background:var(--surface-2); color:var(--ink-2); }
@media (prefers-color-scheme: dark) { html:not(.light) .tag.applied { background:#123024; color:#5fc98b; } }
html.dark .tag.applied { background:#123024; color:#5fc98b; }
.caption { font-size:.84rem; color:var(--muted); margin:-12px 0 22px; }

/* Two kinds of post live here and they do different jobs: product notes for people already using
   Expado, and guides that answer what job seekers in Germany actually type into a search box. The
   label keeps the index honest about which is which. */
.kind { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent); background:var(--surface-2);
  border-radius:999px; padding:3px 9px; margin:0 10px 0 0; vertical-align:middle; }
.posts .kind { margin:0 0 7px; display:inline-block; }

/* Two-market split and the phrase table. Both are structure, not decoration: the post's whole
   argument is that these are two separate markets and that four German phrases mean four different
   things, so showing them side by side does more than a paragraph can. */
.split { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
@media (max-width:620px) { .split { grid-template-columns:1fr; } }
.split > div { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.split h3 { margin:0 0 4px; font-size:1rem; }
.split .who { font-size:.8rem; color:var(--accent); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin:0 0 8px; }
.split p { margin:0; font-size:.92rem; }

.phrases { width:100%; border-collapse:collapse; margin:22px 0; font-size:.93rem;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.phrases td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); }
.phrases tr:last-child td { border-bottom:0; }
.phrases td:first-child { color:var(--ink); font-weight:650; white-space:nowrap; width:1%;
  background:var(--surface); }
@media (max-width:560px) {
  .phrases, .phrases tbody, .phrases tr, .phrases td { display:block; width:auto; }
  .phrases td:first-child { border-bottom:0; padding-bottom:2px; }
}
.scale { display:flex; gap:0; margin:6px 0 0; border-radius:6px; overflow:hidden; height:6px; }
.scale i { flex:1; background:var(--line); }
.scale i.on { background:var(--accent); }

/* The header CTA and the end-of-post CTA used to be the same dark button with almost the same words,
   which reads as one button repeated rather than two moments. They are now separated by job: the
   header is a quiet way back into the product for someone who already uses it, and the end of a post
   is the loud one, aimed at a reader who arrived from a search and has just been persuaded. */
.top .cta { background:transparent; color:var(--ink-2); border:1px solid var(--line);
  font-weight:600; }
.top .cta:hover { border-color:var(--ink-2); color:var(--ink); }

.end { display:block; }
.end-cta { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; margin-bottom:18px; }
.end-cta p { margin:0 0 14px; color:var(--ink-2); font-size:.98rem; }

/* Section switcher. It sits at the top because the alternative was a small link at the very bottom,
   which meant a reader landing on a page with one post had no way of knowing six more existed. */
.tabs { display:flex; gap:8px; margin:22px 0 4px; flex-wrap:wrap; }
.tab { display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:7px 14px; font-size:.9rem; font-weight:600; }
.tab span { font-size:.78rem; color:var(--muted); background:var(--bg); border-radius:999px;
  padding:1px 7px; }
.tab.on { background:var(--ink); color:var(--bg); border-color:var(--ink); cursor:default; }
.tab.on span { background:rgba(255,255,255,.18); color:inherit; }
.tab:not(.on):hover { border-color:var(--ink-2); color:var(--ink); }

/* Index list: the posts are the page, so they get more room and a clearer hierarchy than the
   hairline-separated rows they started as. Cards were the other option and were rejected: with
   text-only posts a card is an empty box around a headline, and it doubles the vertical scroll on a
   phone without adding anything to read. */
.posts a { padding:22px 0; }
.posts h2 { font-size:1.22rem; letter-spacing:-.01em; }
.posts p { font-size:.97rem; color:var(--ink-2); }