/* jobbo.se — the public site layer. Prefix: st-.
   Built only from web/tokens.css (values) and web/ui.css (components). There is no
   colour, radius, shadow or motion value in this file: every one of them is a token, so
   the site and the app are the same design system and dark mode comes for free.

   The one thing the site adds is an editorial type scale. The app's scale tops out at
   28 px because it is a dense tool; a guide page is read at arm's length, so the scale
   below extends the tokens upward (--st-h1 … --st-body) and sets reading line-heights.
   Everything else is --text-*, --s-*, --r-*, --line*, --ink*, --accent*.

   Measure: 68 characters. Depth: hairlines. One accent. No cards in guide bodies. */

.st-body {
  /* Editorial scale, extending --text-* for reading rather than scanning. */
  --st-h1: clamp(34px, 4.4vw, 58px);
  --st-h2: clamp(26px, 3vw, 40px);
  --st-h3: clamp(21px, 1.9vw, 26px);
  --st-h4: 19px;
  --st-body: var(--text-lg);
  --st-lh: 1.7;
  --st-measure: 72ch;
  --st-wide: var(--content-max);          /* 1280: every page shares the home width */
  --st-chrome: none;                       /* header and footer: full width, fluid gutter */
  --st-chrome-gutter: clamp(16px, 2.2vw, 44px); /* the same near-full-width bar on every page */
  --st-section: clamp(64px, 8vw, 96px);
  --st-head-h: 68px;

  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--st-body);
  line-height: var(--st-lh);
  text-rendering: optimizeLegibility;
}

/* Buttons are links on a website, and `.ui-root a` is more specific than `.ui-btn`, so
   the button ink has to be restated here or a primary CTA loses its white text. */
.st-body a.ui-btn { color: var(--ink); text-decoration: none; }
.st-body a.ui-btn-primary { color: var(--on-accent); }
.st-body a.ui-btn-ghost { color: var(--ink-2); }
.st-body a.ui-btn-ghost:hover { color: var(--ink); }
.st-body a.ui-btn:hover { text-decoration: none; }

/* ---- Shared candidates (also defined by the home builder in site-home.css; the two
   copies are deduplicated in a later pass, so keep the rules identical). ------------ */
.st-mark {
  background: linear-gradient(transparent 12%, var(--sun-pale) 12%, var(--sun-pale) 88%, transparent 88%);
  color: inherit;
  padding: 0 .12em;
  margin: 0 -.12em;
  border-radius: var(--r-2xs);
}
.st-fit-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill); vertical-align: 2px; margin-right: var(--s-2); }
.st-fit-dot.is-ok { background: var(--fit-pass); }
.st-fit-dot.is-missing { background: var(--fit-missing); }
.st-fit-dot.is-unclear { background: var(--fit-unclear); }
.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--hub-ink, var(--accent-ink));
}
/* An eyebrow sits on its own line above a heading, with air between the two. */
.st-eyebrow + .st-h2, .st-eyebrow + .st-h3 { margin-top: var(--s-3); }
.st-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--hub, var(--accent)); border-radius: 1px; }
.st-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.9vw, 70px);
  line-height: 1.02;
  font-weight: var(--weight-bold);
  letter-spacing: -0.035em;
  margin: var(--s-4) 0 0;
  text-wrap: balance;
}

/* ---- Skip link ------------------------------------------------------------------- */
.st-skip {
  position: fixed;
  z-index: var(--z-toast);
  top: var(--s-2);
  left: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-md);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.st-skip:focus-visible { transform: none; }

/* ---- Header ---------------------------------------------------------------------- */
/* Near full width: the bar spans the viewport with a fluid gutter, so it frames the
   1280 px content instead of matching it. Blurred canvas, one hairline, 64 px. */
.st-head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.st-head-in {
  max-width: var(--st-chrome);
  margin: 0 auto;
  padding: 0 var(--st-chrome-gutter);
  min-height: var(--st-head-h);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
/* a.st-logo, not .st-logo: `.ui-root a` would otherwise paint the wordmark in the link colour. */
a.st-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
a.st-logo:hover { text-decoration: none; color: var(--ink); }
/* The mark is /favicon.svg, drawn in docs/site/templates/brand.mjs. */
.st-logo-mark {
  flex: none;
  display: block;
  width: 30px; height: 30px;
  transition: transform var(--t-fast) var(--ease);
}
.st-logo:hover .st-logo-mark { transform: rotate(-6deg); }

/* ---- Navigation: five mega menus and a phone drawer (nav.mjs, 2026-09-18) ---------------------
   Each menu is a <details name="st-mega">. On a wide screen its panel hangs under the header
   bar across the whole viewport, content on the 1280 px grid, a scrim over the page. Under
   1001 px the same markup is an accordion inside a drawer behind the burger. */
.st-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--s-2); }
.st-nav .st-nav-link,
.st-mega > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.st-nav-link:hover,
.st-mega > summary:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.st-nav-link[aria-current="page"],
.st-mega.is-current > summary { color: var(--ink); box-shadow: inset 0 -2px 0 var(--sea); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.st-nav .st-nav-login { display: none; }
.st-mega { position: static; }
.st-mega > summary { list-style: none; }
.st-mega > summary::-webkit-details-marker { display: none; }
.st-mega > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
  transition: transform var(--t-fast) var(--ease);
}
.st-mega[open] > summary { background: var(--hover); color: var(--ink); }
.st-mega[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.st-mega > summary:focus-visible, .st-nav-link:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

.st-head-cta { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
/* "Kom igång" + the " med Jobbo" span are two flex items; the button's own gap would
   read as a double space between them. */
.st-head-cta .ui-btn-primary { gap: 0; }
/* a.st-login for the same reason as a.st-logo: `.ui-root a` would paint it link-teal. */
a.st-login { color: var(--ink); font-family: var(--font-display); font-size: 15.5px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; padding: 0 var(--s-2); }
a.st-login:hover { color: var(--accent-ink); text-decoration: none; }
.st-burger { display: none; }

.st-mega-panel {
  position: absolute;
  z-index: 2;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  padding: var(--s-8) var(--st-chrome-gutter) 0;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -24px rgba(11, 31, 42, 0.28);
  animation: st-mega-in 160ms var(--ease) both;
  overflow-x: clip;
}
@keyframes st-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-mega-panel { animation: none; } }
.st-mega-scrim {
  display: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(11, 31, 42, 0.32);
  animation: st-scrim-in 160ms var(--ease) both;
}
@keyframes st-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.st-head.has-open .st-mega-scrim { display: block; }

/* The panel's content spans the bar: it starts under the logo and ends under the button. */
.st-mega-in {
  max-width: var(--st-chrome);
  margin: 0 auto;
  display: grid;
  gap: var(--s-8) clamp(32px, 4vw, 80px);
  align-items: start;
}
.st-mega-jobb { grid-template-columns: minmax(320px, 420px) minmax(0, 1.5fr) minmax(0, 1fr); }
.st-mega-yrken { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) minmax(0, 1.7fr); }
.st-mega-stats { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 2.1fr); }
.st-mega-guider { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 0.9fr); padding-bottom: var(--s-8); }
.st-mega-how { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(220px, 0.8fr); }

.st-mg-title { margin: 0 0 var(--s-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-mg-links + .st-mg-title { margin-top: var(--s-6); }
.st-mg-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* columns that read downwards, so an alphabetical list stays alphabetical; as many as fit */
.st-mg-links.is-cols { display: block; column-width: 170px; column-gap: var(--s-8); }
.st-mg-links.is-cols.is-wide { column-width: 215px; }
.st-mg-links.is-cols li { break-inside: avoid; margin-bottom: 2px; }
.st-mg-links.has-ic a { display: flex; align-items: center; gap: var(--s-3); }
.st-mg-li { flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--canvas-tint); color: var(--accent-ink); font-style: normal; transition: background var(--t-fast) var(--ease); }
.st-mg-li svg { width: 16px; height: 16px; }
.st-mg-links.has-ic a:hover .st-mg-li { background: var(--accent-soft); }
.st-mg-links a { display: block; margin: 0 calc(-1 * var(--s-2)); padding: 6px var(--s-2); border-radius: var(--r-sm); font-size: var(--text-md); line-height: 1.35; color: var(--ink); }
.st-mg-links.is-small a { font-size: var(--text-sm); color: var(--ink-2); padding: 5px var(--s-2); }
.st-mg-links a:hover { background: var(--hover); color: var(--accent-ink); text-decoration: none; }
.st-mg-hint { margin: var(--s-4) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.st-mg-arrow { display: inline-block; transition: transform var(--t-fast) var(--ease); }
a:hover > .st-mg-arrow, a:hover em > .st-mg-arrow { transform: translateX(3px); }

.st-mg-ic { flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-style: normal; }
.st-mg-ic svg { width: 20px; height: 20px; }

/* the tinted feature card: a search form plus chips or a picture */
.st-mg-feature { padding: var(--s-6); border-radius: var(--r-lg); background: var(--canvas-tint); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--s-5); }
.st-mg-search { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.st-mg-search-label { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.st-mg-search p { margin: 0 0 var(--s-2); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-3); }
.st-mg-search-row { position: relative; display: flex; gap: var(--s-2); }
.st-mg-search-row .ui-input { flex: 1; min-width: 0; height: 44px; padding-left: 40px; background: var(--card); }
.st-mg-search-row .ui-btn { height: 44px; flex: none; }
.st-mg-search-ic { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.st-mg-search-ic svg { width: 20px; height: 20px; display: block; }
.st-mg-chips { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--text-sm); }
.st-mg-chips span { color: var(--ink-3); margin-right: var(--s-1); }
.st-mg-chips a { padding: 4px var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-mg-chips a:hover { border-color: var(--line-strong); color: var(--accent-ink); text-decoration: none; }

/* icon tiles (yrkesområden) */
.st-mg-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-1) var(--s-5); }
.st-mg-tiles a { display: flex; align-items: center; gap: var(--s-3); margin: 0 calc(-1 * var(--s-2)); padding: 6px var(--s-2); border-radius: var(--r-md); color: var(--ink); font-size: var(--text-md); line-height: 1.3; }
.st-mg-tiles a:hover { background: var(--hover); color: var(--accent-ink); text-decoration: none; }

/* län list beside the map */
.st-mg-places { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: var(--s-6); align-items: start; }
.st-mg-map { width: 128px; height: auto; display: block; overflow: visible; }
.st-mg-map a { fill: color-mix(in srgb, var(--sea) 16%, var(--canvas)); stroke: var(--raised); stroke-width: 1.2; transition: fill var(--t-fast) var(--ease); }
.st-mg-map a.is-listed { fill: color-mix(in srgb, var(--sea) 46%, var(--canvas)); }
.st-mg-map a:hover, .st-mg-map a:focus-visible { fill: var(--sea); outline: none; }

/* spread bands as a picture */
.st-mg-art { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line-soft); }
.st-mg-band { position: relative; display: block; height: 10px; border-radius: var(--r-pill); background: var(--sunken); }
.st-mg-band i { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sea) 26%, var(--canvas)); }
.st-mg-band i.is-box { background: color-mix(in srgb, var(--sea) 74%, var(--canvas)); }
.st-mg-band i.is-tick { top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--ink); box-shadow: 0 0 0 1.5px var(--card); }

/* tool cards */
.st-mg-cards { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--s-3); }
.st-mg-cards a, .st-head .st-mg-hubhead { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--ink); }
.st-mg-cards a { padding: var(--s-3) var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--canvas-tint); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.st-mg-cards a:hover { border-color: var(--line-strong); background: var(--card); text-decoration: none; }
.st-mg-cards b, .st-mg-hubhead b { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.3; }
.st-mg-hubhead b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.01em; }
.st-mg-cards a:hover b, .st-mg-hubhead:hover b { color: var(--accent-ink); }
.st-mg-cards small, .st-mg-hubhead small { display: block; margin-top: 2px; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-3); }
.st-mg-cards li:nth-child(2) .st-mg-ic { background: var(--sun-soft); color: var(--sun-ink); }
.st-mg-cards li:nth-child(3) .st-mg-ic { background: var(--live-soft); color: var(--accent-ink); }

/* guide hubs */
.st-mg-hubhead:hover { text-decoration: none; }
.st-mg-hub .st-mg-links { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); }
.st-mg-hub .st-mg-links a { color: var(--ink-2); }
.st-mg-hub[data-hub="personligt-brev"] .st-mg-ic { background: var(--live-soft); }
.st-mg-hub[data-hub="intervju"] .st-mg-ic { background: var(--sun-soft); color: var(--sun-ink); }
.st-mg-hub[data-hub="jobbsok"] .st-mg-ic { background: var(--info-soft); color: var(--accent-active); }
.st-mg-all { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); color: var(--accent-ink); }
.st-mg-all.is-small { margin-top: var(--s-3); font-size: var(--text-sm); }
.st-mg-all:hover { text-decoration: none; color: var(--accent-hover); }
.st-mg-aside, .st-mg-price { padding: var(--s-5); border-radius: var(--r-md); background: var(--canvas-tint); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--s-2); }
.st-mg-aside b, .st-mg-price b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.st-mg-aside p, .st-mg-price small { margin: 0 0 var(--s-2); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-3); }
.st-mg-aside .ui-btn { align-self: flex-start; }
.st-mg-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-ink); }
.st-mg-price { background: var(--sun-soft); border-color: transparent; color: var(--ink); }
.st-mg-price .st-mg-eyebrow { color: var(--sun-ink); }
.st-mg-price small { color: var(--ink-2); }
.st-mg-price em { font-style: normal; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--sun-ink); }
.st-mg-price:hover { text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sun-ink) 30%, transparent); }

/* the five steps */
.st-mg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.st-mg-steps a { position: relative; display: flex; flex-direction: column; gap: var(--s-1); height: 100%; padding: var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--canvas-tint); color: var(--ink); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.st-mg-steps a:hover { border-color: var(--line-strong); background: var(--card); text-decoration: none; }
.st-mg-steps i { width: 28px; height: 28px; margin-bottom: var(--s-2); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--sea); color: var(--on-accent); font-style: normal; font-size: var(--text-sm); font-weight: var(--weight-bold); font-family: var(--font-display); }
.st-mg-steps b { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.st-mg-steps a:hover b { color: var(--accent-ink); }
.st-mg-steps small { font-size: var(--text-sm); line-height: 1.45; color: var(--ink-3); }
.st-mg-steps li:not(:last-child) a::after { content: ""; position: absolute; top: 29px; right: calc(-1 * var(--s-3) - 1px); width: var(--s-3); border-top: 1.5px dashed var(--line-strong); }

/* the bar that closes a panel */
.st-mg-foot { grid-column: 1 / -1; position: relative; display: flex; align-items: center; padding: var(--s-4) 0; font-size: var(--text-sm); }
.st-mg-foot::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--canvas-tint); border-top: 1px solid var(--line-soft); }

@media (min-width: 1001px) and (max-width: 1240px) {
  .st-nav { gap: 0; margin-left: 0; }
  .st-nav .st-nav-link, .st-mega > summary { padding: 0 var(--s-2); font-size: 14px; gap: 4px; }
  a.st-login { font-size: 14px; }
  .st-login-long { display: none; }
  .st-head-cta { gap: var(--s-3); }
  .st-mega-in { gap: var(--s-6); }
  .st-mega-jobb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .st-mega-yrken { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
  .st-mg-places { grid-template-columns: minmax(0, 1fr); }
  .st-mg-map, .st-mg-hint { display: none; }
  .st-mega-guider { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-mg-aside { display: none; }
  .st-mg-steps small { display: none; }
}
@media (min-width: 1001px) and (max-width: 1080px) { .st-login { display: none; } }

/* ---- phone: a drawer behind the burger, the menus as an accordion ---- */
@media (max-width: 1000px) {
  .st-head-in { gap: var(--s-3); }
  .st-head-cta { gap: var(--s-2); }
  .st-login, .st-login-long { display: none; }
  .st-head-cta .ui-btn-primary { font-size: var(--text-sm); height: 36px; padding: 0 var(--s-3); }
  .st-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); cursor: pointer; }
  .st-burger[hidden] { display: none; }
  .st-burger i { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
  .st-head.is-open .st-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .st-head.is-open .st-burger i:nth-child(2) { opacity: 0; }
  .st-head.is-open .st-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Without the script the burger stays hidden and the menus sit under the bar as plain
     accordions; with it they move into the drawer. */
  .st-head-in { flex-wrap: wrap; }
  .st-nav { order: 3; flex: 1 1 100%; margin: 0 calc(-1 * var(--gutter)); display: block; border-top: 1px solid var(--line-soft); }
  .st-head-in:has(.st-burger:not([hidden])) .st-nav { display: none; }
  .st-head.is-open .st-head-in .st-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    height: calc(100dvh - var(--st-head-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--canvas);
    border-top: 1px solid var(--line);
    padding-bottom: var(--s-10, 48px);
  }
  html.st-nav-open { overflow: hidden; }
  .st-nav .st-nav-link, .st-mega > summary { display: flex; justify-content: space-between; width: 100%; height: 56px; padding: 0 var(--gutter); border-radius: 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink); font-family: var(--font-display); }
  .st-nav-link[aria-current="page"], .st-mega.is-current > summary { box-shadow: inset 3px 0 0 var(--sea); border-radius: 0; }
  .st-mega > summary::after { width: 8px; height: 8px; }
  .st-nav .st-nav-login { display: flex; color: var(--accent-ink); }
  .st-mega-scrim { display: none !important; }
  .st-mega-panel { position: static; padding: var(--s-5) var(--gutter) 0; box-shadow: none; border-bottom: 1px solid var(--line-soft); background: var(--canvas-tint); animation: none; }
  .st-mega-in, .st-mega-jobb, .st-mega-yrken, .st-mega-stats, .st-mega-guider, .st-mega-how { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .st-mega-guider { padding-bottom: var(--s-6); }
  .st-mg-feature { padding: var(--s-4); background: var(--card); }
  .st-mg-art, .st-mg-map, .st-mg-hint, .st-mg-aside { display: none; }
  .st-mg-places { grid-template-columns: minmax(0, 1fr); }
  .st-mg-places .st-mg-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .st-mg-links a { padding: 9px var(--s-2); }
  .st-mg-links.is-small a { padding: 8px var(--s-2); font-size: var(--text-md); }
  .st-mg-tiles a { padding: 8px var(--s-2); }
  .st-mg-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .st-mg-steps a { flex-direction: row; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--card); }
  .st-mg-steps i { margin: 0; flex: none; }
  .st-mg-steps small { display: none; }
  .st-mg-steps li:not(:last-child) a::after { display: none; }
  .st-mg-cards a { background: var(--card); }
  .st-mg-foot { padding: var(--s-4) 0; }
  .st-mg-foot::before { display: none; }
}
@media (max-width: 420px) {
  .st-mg-search-row { flex-direction: column; }
  .st-mg-search-row .ui-btn { width: 100%; }
  .st-mg-links.is-cols, .st-mg-links.is-cols.is-wide { column-width: auto; columns: 1; }
  .st-mg-places .st-mg-links { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Page frame ------------------------------------------------------------------ */
/* Hub colours: one custom-property triplet per data-hub value, read by the head band,
   the rail's active TOC entry, eyebrows and callouts. "sea" is the editorial default. */
[data-hub="sea"] { --hub: var(--sea); --hub-soft: var(--accent-soft); --hub-ink: var(--accent-ink); }
[data-hub="cv-hjalp"] { --hub: var(--sea); --hub-soft: var(--accent-soft); --hub-ink: var(--accent-ink); }
[data-hub="personligt-brev"] { --hub: var(--cyan); --hub-soft: var(--live-soft); --hub-ink: var(--accent-ink); }
[data-hub="intervju"] { --hub: var(--sun); --hub-soft: var(--sun-soft); --hub-ink: var(--sun-ink); }
[data-hub="jobbsok"] { --hub: var(--accent-active); --hub-soft: var(--info-soft); --hub-ink: var(--accent-ink); }
[data-hub="hjalp"] { --hub: var(--sea); --hub-soft: var(--accent-soft); --hub-ink: var(--accent-ink); }

.st-main { margin: 0 auto; padding: 0 0 var(--s-16); }
.st-article { display: block; }
.st-section { margin-top: var(--s-16); }
.st-crumbs { margin-bottom: 0; flex-wrap: wrap; font-size: var(--text-sm); }
.st-crumbs a { color: var(--ink-3); }
.st-crumbs a:hover { color: var(--hub-ink); }

/* The hub-coloured head band: full-bleed background, centred content inside. */
.st-gh { background: var(--hub-soft); border-bottom: 1px solid var(--line-soft); padding: var(--s-10) 0 var(--s-12); }
.st-crumbs { margin-bottom: var(--s-6); }
.st-gh-in { max-width: var(--st-wide); margin: 0 auto; padding: 0 var(--gutter); }
.st-gh .st-eyebrow { margin-top: var(--s-6); }

.st-page-head { margin-bottom: var(--s-8); }
.st-h1 {
  font-family: var(--font-display);
  font-size: var(--st-h1);
  line-height: 1.06;
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: var(--s-3) 0 0;
  max-width: 20ch;
  text-wrap: balance;
}
.st-h2 {
  font-family: var(--font-display);
  font-size: var(--st-h2);
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.st-h3 {
  font-family: var(--font-display);
  font-size: var(--st-h3);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.st-lede { margin: var(--s-5) 0 0; font-size: var(--text-xl); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.st-byline { margin: var(--s-3) 0 0; }
.st-byline time { font-variant-numeric: tabular-nums; }
.st-notice { margin: 0 0 var(--s-6); }

/* The byline card in the guide head band: initials avatar, name + role, a separator,
   updated date + read time. */
.st-byline-card { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8); font-size: var(--text-sm); color: var(--ink-3); }
.st-av {
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--canvas);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}
.st-byline-card b { display: block; color: var(--ink); font-weight: var(--weight-semibold); }
.st-byline-sep { width: 1px; height: 28px; background: var(--line); }

/* Guide / editorial: sticky rail + article. Hub: featured guide + grouped lists. */
/* Reading pages: TOC | article | product rail on one 1280 frame. Both rails are sticky;
   the article column is what is left (about 680 px), and the prose measure sits in it. */
.st-guide-grid {
  max-width: var(--st-wide);
  margin: 0 auto;
  padding: var(--s-12) var(--gutter) var(--st-section);
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 240px;
  gap: var(--s-10);
  align-items: start;
}
.st-article { min-width: 0; }
.st-page-body, .st-hub-body { margin: 0 auto; padding: var(--s-12) var(--gutter) var(--st-section); }
.st-page-body, .st-hub-body { max-width: var(--st-wide); }

.st-rail { position: sticky; top: calc(var(--st-head-h) + var(--s-6)); align-self: start; font-size: var(--text-sm); max-height: calc(100vh - var(--st-head-h) - var(--s-8)); overflow: auto; }
.st-rail-left:empty { display: block; }
.st-toc li a.is-on { border-left-color: var(--hub, var(--sea)); color: var(--hub-ink, var(--accent-ink)); font-weight: var(--weight-semibold); }
.st-series { margin-top: var(--s-6); }
.st-series h4, .st-series .st-toc-h { margin: 0 0 var(--s-2); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-series ul { list-style: none; margin: 0; padding: 0; display: grid; }
.st-series li a { display: block; padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); line-height: 1.4; }
.st-series li:last-child a { border-bottom: 0; }
.st-series li a:hover { color: var(--hub-ink, var(--accent-ink)); text-decoration: none; }
.st-rail h4, .st-toc-h { margin: 0 0 var(--s-3); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.st-rail li a { display: block; padding: var(--s-2) 0 var(--s-2) var(--s-4); margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); line-height: 1.4; }
.st-rail li a:hover { color: var(--ink); }
.st-rail-cta { margin-top: 0; padding: var(--s-5); border-radius: var(--r-md); background: var(--ink); color: var(--canvas); }
.st-rail-cta b { display: block; font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--s-1); }
.st-rail-cta p { margin: 0 0 var(--s-3); font-size: var(--text-sm); color: color-mix(in srgb, var(--canvas) 70%, transparent); line-height: 1.5; }
.st-rail-cta a { color: var(--cyan); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
@media (max-width: 1200px) {
  .st-guide-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .st-rail-right { grid-column: 2; position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
  .st-rail-right .st-series { margin-top: 0; }
}
@media (max-width: 1000px) {
  /* minmax(0, …): a plain 1fr floors the column at its content's min-content width, so
     a chart with a min-width would widen the page instead of scrolling inside its figure. */
  .st-guide-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .st-guide-grid > * { min-width: 0; }
  .st-rail { max-height: none; overflow: visible; }
  .st-rail-right { order: 3; display: block; grid-column: auto; }
  .st-rail-right .st-series { margin-top: var(--s-6); }
  .st-rail { position: static; }
}
/* The occupation page has no right rail (docs/YRKEN-V2-SPEC.md §1): a 200 px TOC and the
   content taking everything that is left, at every width above the phone breakpoint. Two
   class names deep so the .st-guide-grid media rules above cannot win it back. */
.st-guide-grid.st-yr-grid { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 1000px) { .st-guide-grid.st-yr-grid { grid-template-columns: 1fr; } }

/* ---- Prose ----------------------------------------------------------------------- */
.st-prose, .st-lede { max-width: var(--st-measure); }
.st-prose { color: var(--ink-2); }
.st-prose > p { margin: 0 0 var(--s-5); }
.st-prose > p:last-child { margin-bottom: 0; }
.st-prose strong { color: var(--ink); font-weight: var(--weight-semibold); }
.st-prose h2 {
  font-family: var(--font-display);
  font-size: var(--st-h2);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: var(--s-16) 0 var(--s-5);
  text-wrap: balance;
}
.st-prose h3 {
  font-family: var(--font-display);
  font-size: var(--st-h3);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--s-10) 0 var(--s-3);
}
.st-prose h4 {
  font-size: var(--st-h4);
  line-height: 1.35;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-2);
}
.st-prose > *:first-child { margin-top: 0; }

.st-ul, .st-ol { margin: 0 0 var(--s-5); padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.st-prose li { color: var(--ink-2); }
.st-prose li::marker { color: var(--ink-4); }
.st-ol li::marker { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

.st-quote {
  margin: var(--s-6) 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: var(--st-body);
}
.st-quote p { margin: 0; }

.st-rule { margin: var(--s-8) 0; border: none; border-top: 1px solid var(--line); }

.st-code {
  padding: 1px var(--s-1);
  border-radius: var(--r-xs);
  background: var(--sunken);
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--ink);
}
.st-pre {
  margin: 0 0 var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--canvas-tint);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.st-pre code {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: var(--lh-lg);
  color: var(--ink-2);
  white-space: pre;
}

.st-table-wrap { margin: 0 0 var(--s-6); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.st-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-md); }
.st-table th {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  background: var(--canvas-tint);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.st-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; }
.st-table tbody tr:last-child td { border-bottom: none; }

/* ---- Home ------------------------------------------------------------------------ */
.st-main-home { padding-top: var(--s-12); }
.st-hero .st-h1 { max-width: 16ch; font-size: clamp(38px, 6vw, 72px); }
.st-lede { margin-top: var(--s-6); font-size: var(--text-xl); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.st-lede p { margin: 0; }
.st-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-8) 0 0; }

.st-figure {
  margin-top: var(--s-10);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: var(--canvas-tint);
  border: 1px solid var(--line-soft);
  max-width: var(--st-measure);
}
.st-figure p { margin: 0; color: var(--ink-2); font-size: var(--text-lg); }
.st-figure p + p { margin-top: var(--s-2); font-size: var(--text-md); }
.st-figure strong { color: var(--ink); }
.st-figure [data-live] { font-variant-numeric: tabular-nums; }

.st-steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-12); }
.st-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.st-step-text { max-width: 46ch; }
.st-step-text p { margin: var(--s-3) 0 0; color: var(--ink-2); }
.st-step-title { display: flex; align-items: baseline; gap: var(--s-3); font-family: var(--font-display); font-size: var(--st-h3); font-weight: var(--weight-semibold); color: var(--ink); margin: 0; }
.st-step-n { color: var(--ink-4); font-size: var(--text-lg); font-weight: var(--weight-bold); }
@media (max-width: 860px) {
  .st-step { grid-template-columns: 1fr; gap: var(--s-4); }
  .st-steps { gap: var(--s-10); }
}

.st-shot { margin: 0; }
.st-shot-box {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  background: var(--canvas-tint);
  border: 1px dashed var(--line-strong);
}
.st-shot-box span { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-4); }
.st-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-float);
}
.st-shot figcaption { margin-top: var(--s-2); font-size: var(--text-sm); color: var(--ink-3); }

.st-honesty .st-never { margin-top: var(--s-5); max-width: var(--st-measure); }
.st-honesty .st-ul { list-style: none; padding: 0; gap: 0; }
.st-honesty .st-ul li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-8);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.st-honesty .st-ul li:last-child { border-bottom: none; }
.st-honesty .st-ul li::before {
  content: "✗";
  position: absolute;
  left: 0;
  top: var(--s-3);
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  background: var(--warn-soft);
  color: var(--fit-missing);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.st-more { margin: var(--s-5) 0 0; }

.st-note {
  padding: var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  max-width: var(--st-measure);
}
.st-note p { margin: var(--s-3) 0 0; color: var(--ink-2); }

.st-hubcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.st-hubcard { display: grid; align-content: start; gap: var(--s-3); }
.st-hubcard .st-h3 a { color: var(--ink); }
.st-hubcard .st-h3 a:hover { color: var(--accent-ink); text-decoration: none; }
.st-hubcard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.st-hubcard-list a { font-size: var(--text-md); color: var(--ink-2); }
.st-hubcard-list a:hover { color: var(--accent-ink); }
.st-hubcard-all { margin: 0; font-size: var(--text-md); font-weight: var(--weight-medium); }

.st-close p { color: var(--ink-2); max-width: var(--st-measure); margin: var(--s-4) 0 0; }

/* ---- Hub ------------------------------------------------------------------------- */
.st-hub-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: stretch;
  margin-bottom: var(--s-10);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
}
.st-hub-feature-cov { display: block; min-height: 160px; }
.st-hub-feature-cov svg { display: block; width: 100%; height: 100%; }
.st-hub-feature-body { display: grid; align-content: center; gap: var(--s-2); padding: var(--s-6) var(--s-6) var(--s-6) 0; }
.st-hub-feature-body .st-eyebrow { margin: 0; }
.st-hub-feature-body b { font-family: var(--font-display); font-size: var(--st-h3); letter-spacing: -0.015em; color: var(--ink); }
.st-hub-feature-body span:last-child { color: var(--ink-2); font-size: var(--text-md); }
@media (max-width: 720px) {
  .st-hub-feature { grid-template-columns: 1fr; }
  .st-hub-feature-body { padding: 0 var(--s-5) var(--s-5); }
}

.st-hub-body > p { color: var(--ink-2); margin: 0 0 var(--s-5); }
.st-hub-body > h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--s-12) 0 var(--s-5);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.st-entries { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.st-entry { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-5); align-items: start; padding: var(--s-5) 0; border-bottom: 1px solid var(--line-soft); }
.st-entry-cov { display: block; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; background: var(--hub, var(--sea)); }
.st-entry-cov svg { display: block; width: 100%; height: 100%; }
@media (max-width: 520px) { .st-entry { grid-template-columns: 1fr; gap: var(--s-3); } .st-entry-cov { max-width: 200px; } }
.st-entry:last-child { border-bottom: none; }
.st-entry-title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-semibold); }
.st-entry-title a { color: var(--ink); }
.st-entry-title a:hover { color: var(--accent-ink); }
.st-entry-desc { margin: var(--s-1) 0 var(--s-2); color: var(--ink-2); font-size: var(--text-md); }
.st-entry .ui-meta { margin: 0; }

/* ---- Guide furniture --------------------------------------------------------------- */
/* Kort version: the guide's own summary, and the :::kort directive share this box. */
.st-kort {
  margin: 0 0 var(--s-10);
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--hub, var(--accent));
  max-width: var(--st-measure);
}
.st-kort h4, .st-kort .st-toc-h { margin: 0 0 var(--s-3); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--hub-ink, var(--accent-ink)); }
.st-kort ul { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); color: var(--ink); font-size: var(--text-lg); }

/* :::exempel — a CV/brev fragment on a paper sheet. */
/* The tag hangs 12 px above the sheet, so a sheet right under a heading needs the room. */
.st-prose h2 + .st-paper, .st-prose h3 + .st-paper { margin-top: var(--s-6); }
.st-paper {
  margin: var(--s-2) 0 var(--s-8);
  position: relative;
  padding: var(--s-8) var(--s-8) var(--s-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-2xs);
  box-shadow: 0 1px 0 var(--line), 0 12px 0 -6px var(--canvas-tint), 0 13px 0 -6px var(--line-soft);
  max-width: var(--st-measure);
}
.st-paper-tag {
  position: absolute;
  top: -12px;
  left: var(--s-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--fit-pass);
  color: var(--on-accent);
}
.st-paper-tag.is-bad { background: var(--fit-missing); }
.st-paper-tag.is-neutral { background: var(--ink-3); }
.st-paper-nm { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--ink); }
.st-paper-role { font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--s-4); }
.st-paper p { margin: 0 0 var(--s-3); font-size: var(--text-md); line-height: 1.6; color: var(--ink); }
.st-paper p:last-of-type { margin-bottom: 0; }
.st-paper-note { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--line); font-size: var(--text-sm); color: var(--ink-3); }

/* :::gor / :::undvik — two columns when adjacent, Passar-green and Saknas-amber. */
.st-gu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-2) 0 var(--s-8); max-width: var(--st-measure); }
.st-gu-g, .st-gu-u { padding: var(--s-5) var(--s-5); border-radius: var(--r-lg); max-width: var(--st-measure); margin: var(--s-2) 0 var(--s-8); }
.st-gu .st-gu-g, .st-gu .st-gu-u { margin: 0; max-width: none; }
.st-gu-g { background: var(--ok-soft); }
.st-gu-u { background: var(--warn-soft); }
.st-gu-g h4, .st-gu-u h4, .st-gu-g .st-gu-h, .st-gu-u .st-gu-h { margin: 0 0 var(--s-3); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.st-gu-g h4, .st-gu-g .st-gu-h { color: var(--fit-pass); }
.st-gu-u h4, .st-gu-u .st-gu-h { color: var(--fit-missing); }
.st-gu-g ul, .st-gu-u ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--text-md); color: var(--ink); line-height: 1.5; }
@media (max-width: 640px) { .st-gu { grid-template-columns: 1fr; } }

/* :::tips / :::varning / :::jobbo — callouts. */
.st-co {
  margin: var(--s-2) 0 var(--s-8);
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  display: grid;
  /* minmax(0, …) and min-width: 0 so a long nowrap button in the callout wraps instead of
     widening the column and, on a phone, the page. */
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-4);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: var(--st-measure);
}
.st-co > div { min-width: 0; }
.st-callout-cta .ui-btn { white-space: normal; height: auto; min-height: 38px; padding-block: var(--s-2); text-align: center; }
.st-co.is-tips, .st-co.is-varning { background: var(--canvas-tint); }
.st-co.is-jobbo { background: var(--ink); color: var(--canvas); }
.st-co svg { width: 22px; height: 22px; margin-top: 3px; }
.st-co.is-tips svg, .st-co.is-varning svg { color: var(--hub-ink, var(--accent-ink)); }
.st-co.is-jobbo svg { color: var(--cyan); }
.st-co b { display: block; font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--s-1); }
.st-co p { margin: 0 0 var(--s-3); color: inherit; }
.st-co p:last-child { margin-bottom: 0; }
.st-co.is-jobbo p { color: color-mix(in srgb, var(--canvas) 78%, transparent); }
.st-co.is-jobbo a { color: var(--cyan); font-weight: var(--weight-semibold); }
.st-callout-cta { margin-top: var(--s-4) !important; }

/* :::siffra — a big number with a one-line source. */
.st-siffra {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: center;
  margin: var(--s-2) 0 var(--s-8);
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  max-width: var(--st-measure);
}
.st-siffra b { font-family: var(--font-display); font-size: 52px; line-height: 1; letter-spacing: -0.03em; color: var(--hub-ink, var(--accent-ink)); }
.st-siffra p { margin: 0; font-size: var(--text-md); color: var(--ink-2); }
.st-siffra small { display: block; color: var(--ink-4); font-size: var(--text-sm); margin-top: var(--s-1); }
@media (max-width: 640px) { .st-siffra { grid-template-columns: 1fr; } }

/* :::checklista — checkbox rows. */
.st-chk { list-style: none; margin: var(--s-2) 0 var(--s-8); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; max-width: var(--st-measure); }
.st-chk li { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-soft); font-size: var(--text-lg); color: var(--ink); }
.st-chk li:last-child { border-bottom: 0; }
.st-chk i { flex: none; width: 20px; height: 20px; border-radius: var(--r-xs); border: 1.5px solid var(--line-strong); margin-top: 3px; }

.st-faq { margin-top: var(--s-12); max-width: var(--st-measure); }
.st-faq-item { border-bottom: 1px solid var(--line-soft); }
.st-faq-item:first-of-type { border-top: 1px solid var(--line-soft); }
.st-faq-item > summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.st-faq-item > summary::-webkit-details-marker { display: none; }
.st-faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 4px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.st-faq-item[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.st-faq-item > summary:hover { color: var(--accent-ink); }
.st-faq-answer { padding: 0 0 var(--s-4); color: var(--ink-2); }
.st-faq-answer p { margin: 0; }
.st-faq .st-h2 { margin-bottom: var(--s-4); }

.st-next { margin-top: var(--s-12); padding-top: var(--s-10); border-top: 1px solid var(--line); max-width: var(--st-measure); }
.st-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.st-next-card { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); color: var(--ink); }
.st-next-card:hover { text-decoration: none; border-color: var(--line-strong); }
.st-next-cov { display: block; height: 90px; }
.st-next-cov svg { display: block; width: 100%; height: 100%; }
.st-next-card b { display: block; padding: var(--s-3) var(--s-4) var(--s-1); font-family: var(--font-display); font-size: var(--text-md); letter-spacing: -0.01em; color: var(--ink); line-height: var(--lh-lg); }
.st-next-card > span { display: block; padding: 0 var(--s-4) var(--s-4); font-size: var(--text-sm); color: var(--ink-3); }
@media (max-width: 720px) { .st-next-grid { grid-template-columns: 1fr; } }

/* Mobile CTA: appears once the reader is halfway down a guide. */
.st-sticky {
  position: fixed;
  z-index: var(--z-sticky);
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  font-size: var(--text-sm);
  color: var(--ink-2);
  transform: translateY(calc(100% + var(--s-4)));
  transition: transform var(--t-base) var(--ease);
}
.st-sticky.is-on { transform: none; }
@media (min-width: 1001px) { .st-sticky { display: none !important; } }
@media (max-width: 720px) {
  .st-sticky { display: flex; }
  /* Room for the bar so it never covers the last paragraph. */
  .st-main-guide { padding-bottom: calc(var(--s-16) + var(--s-12)); }
}

/* ---- Footer: the deep-sea band with the highlighter line on top (nav.mjs footer(), 2026-09-18) ---
   An invitation to start, then the header's five sections as link columns beside the brand,
   then one quiet legal row. It shares the header's width and gutter. */
.st-foot {
  position: relative;
  background: var(--ink);
  color: color-mix(in srgb, var(--canvas) 66%, transparent);
  margin-top: 0;
}
.st-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sea) 0 40%, var(--cyan) 40% 70%, var(--sun) 70% 100%);
}
.st-ft-cta, .st-ft-in, .st-ft-legal { max-width: var(--st-chrome); margin: 0 auto; padding-left: var(--st-chrome-gutter); padding-right: var(--st-chrome-gutter); }
.st-ft-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6) var(--s-10, 48px); flex-wrap: wrap; padding-top: var(--s-12); padding-bottom: var(--s-10, 48px); border-bottom: 1px solid color-mix(in srgb, var(--canvas) 12%, transparent); }
.st-ft-cta b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.015em; line-height: 1.2; color: var(--canvas); }
.st-ft-cta p { margin: var(--s-2) 0 0; max-width: 64ch; font-size: var(--text-md); line-height: 1.55; }
.st-ft-actions { display: flex; align-items: center; gap: var(--s-5); margin: 0 !important; flex: none; }
.st-foot .st-ft-login { color: var(--canvas); font-weight: var(--weight-medium); font-size: var(--text-md); }
.st-foot .st-ft-login:hover { color: var(--cyan); text-decoration: none; }

.st-ft-in { display: grid; grid-template-columns: minmax(240px, 1.35fr) repeat(5, minmax(0, 1fr)); gap: var(--s-10, 48px) clamp(24px, 3vw, 56px); padding-top: var(--s-12); padding-bottom: var(--s-12); }
.st-foot .st-foot-logo { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--canvas); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.st-foot .st-foot-logo:hover { color: var(--canvas); text-decoration: none; }
.st-ft-brand p { max-width: 36ch; margin: var(--s-4) 0 0; font-size: var(--text-md); line-height: 1.55; }
.st-ft-brand .st-foot-se { display: flex; align-items: baseline; gap: var(--s-2); max-width: none; color: color-mix(in srgb, var(--canvas) 85%, transparent); font-size: var(--text-sm); }
.st-foot-se .st-fit-dot { flex: none; transform: translateY(-1px); }

.st-ft-col h2 { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -0.005em; color: var(--canvas); }
.st-ft-ic { flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--canvas) 9%, transparent); color: var(--cyan); font-style: normal; }
.st-ft-ic svg { width: 17px; height: 17px; }
.st-ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.st-ft-col a { display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 5px 0; font-size: var(--text-sm); line-height: 1.4; color: inherit; transition: color var(--t-fast) var(--ease); }
.st-ft-col a:hover { color: var(--canvas); text-decoration: none; }
.st-ft-col a small { font-size: var(--text-xs); color: color-mix(in srgb, var(--canvas) 42%, transparent); font-variant-numeric: tabular-nums; }
.st-ft-col .st-ft-all { margin-top: var(--s-2); color: var(--cyan); font-weight: var(--weight-semibold); }
.st-ft-col .st-ft-all::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.st-ft-col .st-ft-all:hover { color: var(--cyan); }
.st-ft-col .st-ft-all:hover::after { transform: translateX(3px); }
/* Guider: the four hubs first, a hairline, then one guide from each */
.st-ft-col.is-guider li:nth-child(4) { padding-bottom: var(--s-2); margin-bottom: var(--s-2); border-bottom: 1px solid color-mix(in srgb, var(--canvas) 12%, transparent); }
.st-ft-col.is-guider li:nth-child(-n + 4) a { color: color-mix(in srgb, var(--canvas) 88%, transparent); }

.st-ft-legal { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); flex-wrap: wrap; padding-top: var(--s-5); padding-bottom: var(--s-5); border-top: 1px solid color-mix(in srgb, var(--canvas) 12%, transparent); font-size: var(--text-sm); }
.st-ft-legal p { margin: 0; display: flex; gap: var(--s-5); }
.st-ft-legal a { color: inherit; }
.st-ft-legal a:hover { color: var(--canvas); text-decoration: none; }

@media (max-width: 1240px) {
  .st-ft-in { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
  .st-ft-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-8); }
  .st-ft-brand p { margin: 0; }
}
@media (max-width: 900px) {
  .st-ft-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .st-ft-cta { padding-top: var(--s-10, 48px); padding-bottom: var(--s-8); }
  .st-ft-cta b { font-size: var(--text-xl); }
  .st-ft-actions { width: 100%; }
  .st-ft-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); padding-top: var(--s-10, 48px); }
  .st-ft-brand { display: block; }
  .st-ft-brand p { margin: var(--s-3) 0 0; }
  .st-ft-col a { padding: 7px 0; }
  /* the fifth column would sit alone: it takes the row and splits in two */
  .st-ft-col:last-child { grid-column: 1 / -1; }
  .st-ft-col:last-child ul { display: block; columns: 2; column-gap: var(--s-5); }
  .st-ft-col:last-child li { break-inside: avoid; }
}

/* ---- Print ----------------------------------------------------------------------- */
@media print {
  .st-head, .st-foot, .st-sticky, .st-skip { display: none; }
  .st-main { padding: 0; }
  /* The occupation page on paper: no TOC rail, no controls, no tooltip; the content
     column takes the page. web/yrke.js opens every <details> before printing. */
  .st-rail-left, .ui-seg, .st-yr-tip, .st-yr-share, .st-yr-compare, .st-yr-calc-fields { display: none !important; }
  .st-yr-grid { grid-template-columns: 1fr; }
  .st-yr-sec { break-inside: auto; }
  .st-chart, .st-band, .st-yr-calc-out, .st-yr-ads li { break-inside: avoid; }
}

/* ---- Hub entries on the 1280 frame: two columns from 900 px --------------------------- */
.st-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s-8); }
@media (min-width: 900px) { .st-entries { grid-template-columns: 1fr 1fr; } }

/* ---- Timeline (:::tidslinje): date column on a hairline, text beside it -------------- */
.st-timeline { list-style: none; margin: var(--s-2) 0 var(--s-8); padding: 0; max-width: var(--st-measure); }
.st-timeline li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); position: relative; padding: 0 0 var(--s-5) 0; }
.st-timeline li::before { content: ""; position: absolute; left: 112px; top: 9px; bottom: -4px; width: 1px; background: var(--line); transform: translateX(-1px); }
.st-timeline li:last-child::before { display: none; }
.st-timeline li::after { content: ""; position: absolute; left: 112px; top: 6px; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--hub, var(--sea)); transform: translateX(-5px); box-shadow: 0 0 0 3px var(--canvas); }
.st-timeline-when { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--ink-3); font-size: var(--text-md); line-height: var(--lh-lg); text-align: right; padding-right: var(--s-5); }
.st-timeline-text { color: var(--ink-2); font-size: var(--st-body); padding-left: var(--s-5); }
.st-timeline-text strong { color: var(--ink); }
@media (max-width: 520px) {
  .st-timeline li { grid-template-columns: 1fr; gap: var(--s-1); padding-left: var(--s-5); }
  .st-timeline li::before, .st-timeline li::after { left: 0; }
  .st-timeline li::before { transform: none; }
  .st-timeline li::after { transform: translateX(-4px); }
  .st-timeline-when { text-align: left; padding: 0; }
  .st-timeline-text { padding-left: 0; }
}

/* ---- Yrkessidor (/yrken/*, docs/YRKEN-SPEC.md) ----------------------------------------
   Only what the new blocks need: the spread band, the median line, the week bars, the
   fact box, the region tables and the hub's search. Same rules as the rest of the file:
   tokens only, hairlines, one hue, numbers tabular. */

.st-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sections: the occupation page drops the 72ch measure for its charts and tables but
   keeps it for anything the reader actually reads. */
/* v3: the 72ch cap is gone. The column is about 990 px and the owner wants the text to
   run its full width like the charts do, so the measure lives in the line-height and the
   type size instead of in a max-width. */
.st-yr-prose { max-width: none; }
.st-yr-prose p, .st-yr-prose li, .st-yr-prose .st-yr-note, .st-yr-prose .st-faq, .st-yr-prose .st-chk { max-width: none; }
.st-yr-prose p { margin: 0 0 var(--s-5); line-height: 1.6; }
.st-yr-sec + .st-yr-sec { margin-top: var(--s-12); }
.st-yr-sec h3 { margin-top: var(--s-8); }
.st-yr-note { font-size: var(--text-md); color: var(--ink-3); margin: 0 0 var(--s-5); }
.st-yr-updated { margin-top: var(--s-6); }
/* Fack, kollektivavtal och utbildning (config/yrken-fields.json): the union list is a
   hairline list, the note after the union name in --ink-3. */
.st-yr-fack { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: 0; }
.st-yr-fack li { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); }
.st-yr-fack li span { color: var(--ink-3); }
.st-main-yrke .st-table td.is-num, .st-main-yrke .st-table th.is-num,
.st-main-yrken .st-table td.is-num, .st-main-yrken .st-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Spread band: p10–p90 track, p25–p75 box, median tick, numbers in reading order. */
.st-band { margin: 0 0 var(--s-6); }
.st-band-row { margin: 0 0 var(--s-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-2); }
/* The rail is the shared scale at full width, so every band in a set is the same length;
   the track (p10–p90), the box (the middle half) and the median tick sit on it with
   round ends. */
.st-band-rail { position: relative; display: block; width: 100%; height: 14px; border-radius: var(--r-pill); background: var(--sunken); }
.st-band-rail > i { position: absolute; top: 0; bottom: 0; display: block; border-radius: var(--r-pill); }
.st-band-track { background: color-mix(in srgb, var(--sea) 26%, var(--canvas)); }
.st-band-iqr { background: color-mix(in srgb, var(--sea) 74%, var(--canvas)); }
.st-band-rail > .st-band-tick { top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: var(--ink); box-shadow: 0 0 0 2px var(--canvas); }
.st-band-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-3); }
.st-band-mark { display: grid; gap: 2px; }
.st-band-mark span { font-size: var(--text-xs); color: var(--ink-3); }
.st-band-mark b { font-size: var(--text-md); font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 640px) { .st-band-marks { grid-template-columns: 1fr 1fr; } }

/* Median over the years, with the 2023 method break dashed. */
.st-line { margin: 0 0 var(--s-6); }
.st-line svg { display: block; width: 100%; height: auto; }
.st-line-grid { stroke: var(--line-soft); stroke-width: 1; }
.st-line-path { fill: none; stroke: var(--sea); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.st-line-path.is-soft { stroke: color-mix(in srgb, var(--sea) 45%, var(--canvas)); stroke-width: 1.5; }
.st-line-dot { fill: var(--sea); }
.st-line-break { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 4 4; }
.st-line svg text { font-family: var(--font); fill: var(--ink-3); font-size: 12px; }
.st-line-val { fill: var(--ink); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.st-line-ytx, .st-line-xtx { font-size: 11px; font-variant-numeric: tabular-nums; }
.st-line-brk { font-size: 11px; fill: var(--ink-3); }
@media (max-width: 620px) { .st-line { overflow-x: auto; } .st-line svg { min-width: 520px; } }

/* New ads per week: thin bars, the running week hatched. */
.st-weeks { margin: 0 0 var(--s-6); }
.st-weeks-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-2); align-items: end; height: 140px; }
.st-weeks-bar { display: grid; grid-template-rows: 1fr auto; align-content: end; justify-items: center; height: 100%; gap: var(--s-1); position: relative; }
.st-weeks-bar b { position: absolute; top: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-weeks-bar i { display: block; align-self: end; width: 100%; max-width: 34px; max-height: calc(100% - 18px); background: var(--sea); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.st-weeks-bar.is-partial i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sea) 55%, var(--canvas)) 0 4px, var(--canvas) 4px 8px); border: 1px solid color-mix(in srgb, var(--sea) 55%, var(--canvas)); }
.st-weeks-bar em { font-style: normal; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-weeks-x { display: flex; justify-content: space-between; margin: var(--s-2) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.st-weeks-note { margin: var(--s-2) 0 0; font-size: var(--text-sm); color: var(--ink-3); }

/* Market lists (rubriker, anställningsform) and the two bar cards beside each other. */
.st-yr-charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin: 0 0 var(--s-6); }
.st-yr-lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin: 0 0 var(--s-6); align-items: stretch; }
.st-yr-sec > .st-chart-table { margin-bottom: var(--s-5); }
.st-yr-list h4, .st-yr-list .st-yr-list-h { margin: 0 0 var(--s-3); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-yr-list ol { list-style: none; margin: 0; padding: 0; }
/* The ranked list is a card like the ring beside it: label and count on one row, a thin
   bar scaled to the first row under them. */
.st-yr-list { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.st-yr-list h4, .st-yr-list .st-yr-list-h { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.st-yr-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); padding: var(--s-2) 0; font-size: var(--text-md); color: var(--ink-2); }
.st-yr-list li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.st-yr-list li i { grid-column: 1 / -1; display: block; height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sea) 55%, var(--canvas-tint)); }
.st-yr-list li:first-child i { background: var(--sea); }
@media (max-width: 860px) { .st-yr-charts, .st-yr-lists { grid-template-columns: 1fr; } }

/* Three real ads. */
/* Three cards on one row: the employer's monogram and name on top, the headline, and the
   deadline pinned to the bottom so the three cards line up. */
.st-yr-ads { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.st-yr-ads li { display: flex; }
.st-yr-ads li > * { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.st-yr-ads a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-float); text-decoration: none; }
.st-yr-ad-top { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.st-yr-ad-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); font-style: normal; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: 0.02em; }
.st-yr-ad-logo.is-c0 { background: color-mix(in srgb, var(--sea) 16%, var(--canvas)); color: var(--accent-ink); }
.st-yr-ad-logo.is-c1 { background: var(--sun-soft); color: var(--sun-ink); }
.st-yr-ad-logo.is-c2 { background: color-mix(in srgb, var(--ok) 14%, var(--canvas)); color: var(--ok); }
.st-yr-ad-logo.is-c3 { background: var(--sunken); color: var(--ink-2); }
.st-yr-ad-who { display: grid; min-width: 0; }
.st-yr-ad-who > span { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-yr-ad-who > small { font-size: var(--text-sm); color: var(--ink-3); }
.st-yr-ads b { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-yr-ad-when { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); font-size: var(--text-sm); color: var(--ink-3); }
@media (max-width: 860px) { .st-yr-ads { grid-template-columns: 1fr; } }

/* Columns from a zero baseline (lön per ålder): the figure above, the group under. */
.st-cols-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-4); height: 220px; border-bottom: 1px solid var(--line); }
.st-cols-bar { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: var(--s-2); min-width: 0; position: relative; }
.st-cols-bar > b { font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.st-cols-track { position: relative; display: block; width: 100%; max-width: 72px; height: 100%; }
.st-cols-track > i { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: var(--r-sm) var(--r-sm) 0 0; background: color-mix(in srgb, var(--sea) 55%, var(--canvas-tint)); }
.st-cols-bar.is-peak .st-cols-track > i { background: var(--sea); }
.st-cols-bar.is-peak > b { color: var(--ink); }
.st-cols-bar > em { position: absolute; top: 100%; margin-top: var(--s-2); font-style: normal; font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; }
.st-cols { margin: 0 0 var(--s-6); }
.st-cols .st-chart-table { margin-top: calc(var(--s-8) + var(--s-2)); }
/* Six five-digit figures do not fit a phone: the chart scrolls sideways inside its card. */
@media (max-width: 560px) { .st-cols { overflow-x: auto; } .st-cols-bars { gap: var(--s-2); height: 180px; min-width: 440px; } .st-cols-bar > b, .st-cols-bar > em { font-size: var(--text-xs); } }

/* Shares of a whole as a ring, the legend beside it. */
.st-donut-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.st-donut-ring { position: relative; }
.st-donut-ring svg { display: block; width: 100%; height: auto; transform: rotate(0deg); }
.st-donut-bg { stroke: var(--sunken); }
.st-donut-seg.is-s1 { stroke: var(--sea); }
.st-donut-seg.is-s2 { stroke: color-mix(in srgb, var(--sea) 62%, var(--canvas)); }
.st-donut-seg.is-s3 { stroke: var(--sun-ink); }
.st-donut-seg.is-s4 { stroke: color-mix(in srgb, var(--sea) 32%, var(--canvas)); }
.st-donut-seg.is-s5 { stroke: var(--ink-4); }
.st-donut-seg.is-s6 { stroke: var(--line-strong); }
.st-donut-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; margin: 0; padding: 0 28px; text-align: center; max-width: none; }
.st-donut-center b { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; color: var(--ink); }
.st-donut-center span { font-size: 10px; line-height: 1.2; color: var(--ink-3); }
.st-donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.st-donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: var(--s-2); font-size: var(--text-sm); color: var(--ink-2); max-width: none; }
.st-donut-legend i { width: 10px; height: 10px; border-radius: var(--r-pill); }
.st-donut-legend i.is-s1 { background: var(--sea); }
.st-donut-legend i.is-s2 { background: color-mix(in srgb, var(--sea) 62%, var(--canvas)); }
.st-donut-legend i.is-s3 { background: var(--sun-ink); }
.st-donut-legend i.is-s4 { background: color-mix(in srgb, var(--sea) 32%, var(--canvas)); }
.st-donut-legend i.is-s5 { background: var(--ink-4); }
.st-donut-legend i.is-s6 { background: var(--line-strong); }
.st-donut-legend b { font-variant-numeric: tabular-nums; color: var(--ink); }
.st-donut-legend small { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); }
@media (max-width: 560px) { .st-donut-body { grid-template-columns: 1fr; justify-items: center; } .st-donut-ring { width: 160px; } .st-donut-legend { width: 100%; } }

/* "Visa alla 10": the rest of a top list, folded by default. */
.st-chart-more { margin-top: 9px; }
.st-chart-more > summary { cursor: pointer; font-size: 13px; font-weight: var(--weight-medium); color: var(--accent-ink); list-style: none; }
.st-chart-more > summary::-webkit-details-marker { display: none; }
.st-chart-more > summary::after { content: " ↓"; }
.st-chart-more[open] > summary { display: none; }
.st-chart-more > .st-chart-rows { margin-top: 0; }

/* Vanliga frågor on the occupation page: one rounded card per question, the open one
   lifted in the sun wash, so the questions read as separate things. */
.st-yr-faq { display: grid; gap: var(--s-3); margin-top: 0; }
.st-yr-faq .st-faq-item, .st-yr-faq .st-faq-item:first-of-type { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 0 var(--s-5); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.st-yr-faq .st-faq-item:hover { border-color: var(--line-strong); }
.st-yr-faq .st-faq-item[open] { background: var(--sun-soft); border-color: color-mix(in srgb, var(--sun-ink) 25%, var(--line)); }
.st-yr-faq .st-faq-item > summary { align-items: center; padding: var(--s-4) 0; font-size: var(--text-lg); }
.st-yr-faq .st-faq-item > summary::after { width: 9px; height: 9px; margin: -4px 4px 0 0; border-color: var(--ink-3); }
.st-yr-faq .st-faq-item[open] > summary::after { margin-top: 4px; }
.st-yr-faq .st-faq-answer { padding: 0 var(--s-8) var(--s-5) 0; font-size: var(--text-md); line-height: 1.6; }

/* Related occupations and the guide list. */
.st-yr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.st-yr-card { display: grid; gap: 2px; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); }
.st-yr-card:hover { border-color: var(--line-strong); text-decoration: none; }
.st-yr-card b { font-size: var(--text-lg); line-height: var(--lh-lg); }
.st-yr-card span { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-yr-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); }
.st-yr-guides li { border-bottom: 1px solid var(--line-soft); }
.st-yr-guides li a { display: block; padding: var(--s-3) 0; color: var(--ink-2); }
.st-yr-guides li a:hover { color: var(--accent-ink); text-decoration: none; }
@media (max-width: 720px) { .st-yr-guides { grid-template-columns: 1fr; } }

/* ---- v2: answer sheet, jobbläge, calculators, tile map (docs/YRKEN-V2-SPEC.md) --------
   The static half. web/yrke.css owns what only exists once the script runs (tooltips,
   pressed states beyond the token defaults); everything here must stand on its own with
   JavaScript off, because every number is already in the HTML. */

/* v3: the answer sheet is two columns inside the tint band — the H1 and one SEO
   paragraph left, a 2 x 2 tile card right. No frame around the whole; the band is the
   frame. Target: the head band under 360 px tall at 1280. */
.st-yr-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: stretch; margin: var(--s-5) 0 0; }
.st-yr-hero-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.st-yr-hero-main .st-h1 { margin: 0; text-wrap: balance; max-width: none; }
.st-yr-seo { margin: var(--s-4) 0 0; font-size: var(--text-lg); line-height: 1.55; color: var(--ink-2); max-width: none; }
.st-yr-herometa { margin: var(--s-3) 0 0; color: var(--ink-3); }

/* Share/copy-link button (audit 39b), a quiet inline control next to the meta line. */
.st-yr-herorow { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); }
.st-yr-herorow .st-yr-herometa { margin-top: 0; }
.st-yr-share {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: none;
  padding: var(--s-1) var(--s-4);
  color: var(--ink-3);
  font-size: var(--text-sm);
  cursor: pointer;
}
.st-yr-share:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.st-yr-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-yr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-content: center; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04), 0 16px 36px -18px rgba(11, 31, 42, 0.18); }
.st-yr-fact { display: grid; align-content: start; gap: var(--s-1); min-width: 0; padding: 0; }
.st-yr-fact > span { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-yr-fact > b { font-family: var(--font-display); font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.st-yr-fact > small { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.35; }
.st-yr-fact > small .is-new { color: var(--ok); font-weight: var(--weight-semibold); }
/* The ad count is the call to action: a link, so the hero needs no button. */
.st-yr-adslink { display: inline-flex; align-items: baseline; gap: 2px; color: var(--accent-ink); }
.st-yr-adslink svg { width: 0.62em; height: 0.62em; flex: none; align-self: center; }
.st-yr-adslink:hover { text-decoration: underline; }
.st-yr-adslink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-2xs); }
.st-yr-miniband { margin: var(--s-2) 0 0; }
.st-yr-miniband .st-band-rail { height: 8px; }
.st-yr-miniband .st-band-rail > .st-band-tick { top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; box-shadow: 0 0 0 1.5px var(--card); }
@media (max-width: 900px) {
  .st-yr-hero { grid-template-columns: 1fr; gap: var(--s-6); }
  .st-yr-tiles { gap: var(--s-4); }
}
/* The same tiles inside a section (Ingångslön): four across, two on a phone. */
.st-yr-entry-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--s-6); }
@media (max-width: 720px) { .st-yr-entry-tiles { grid-template-columns: 1fr 1fr; } }
/* A single tile (no SCB median, no headcount): one column, the card under the text at a
   sane width rather than a lone box beside it. */
.st-yr-hero.is-one { grid-template-columns: 1fr; }
.st-yr-hero.is-one .st-yr-tiles { grid-template-columns: 1fr; max-width: 360px; }

/* Jobbläge: five hairline segments, the word, and what the word is measured against. */
.st-yr-meter { margin-top: var(--s-3); display: grid; gap: 2px; }
.st-yr-meter-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-bottom: var(--s-1); }
.st-yr-meter-bar i { height: 6px; border-radius: var(--r-2xs); background: var(--sunken); border: 1px solid var(--line-soft); }
.st-yr-meter-bar i.is-on { background: var(--sea); border-color: var(--sea); }
.st-yr-meter b { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink); }
.st-yr-meter small { font-size: var(--text-sm); line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* v3: one row in the hero tile — five short segments, then the word, with the line that
   justifies the word on a row of its own under both (YRKEN-AUDIT 15). */
.st-yr-meter.is-compact { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-2); row-gap: 2px; margin: var(--s-2) 0 0; cursor: help; }
.st-yr-meter.is-compact .st-yr-meter-bar { width: 52px; flex: none; margin: 0; }
.st-yr-meter.is-compact .st-yr-meter-bar i { height: 5px; }
.st-yr-meter.is-compact b { font-size: var(--text-sm); }
.st-yr-meter.is-compact small { grid-column: 1 / -1; font-size: var(--text-xs); line-height: 1.35; color: var(--ink-3); }

/* Toggled blocks: every variant is rendered, the ones that are not showing carry hidden. */
.st-yr-var[hidden] { display: none; }
.st-yr-seg { margin: 0 0 var(--s-4); }
.st-yr-seg > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* The two calculators. Sea for the statistics, the sun wash for the reader's own answer. */
.st-yr-calc { margin: 0 0 var(--s-5); }
.st-yr-calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); align-items: end; }
.st-yr-calc-field { display: grid; gap: var(--s-2); min-width: 0; }
.st-yr-calc-field > span:first-child { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-yr-calc-range-row { display: flex; align-items: center; gap: var(--s-3); }
.st-yr-calc-range-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--sea); }
.st-yr-calc-range-row output { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--ink); min-width: 6ch; text-align: right; }
.st-yr-calc-out { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sun-soft); }
.st-yr-calc-big { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; font-weight: var(--weight-semibold); color: var(--ink); max-width: none; }
.st-yr-calc-range { margin: var(--s-1) 0 0; font-size: var(--text-md); color: var(--ink-2); font-variant-numeric: tabular-nums; max-width: none; }
.st-yr-calc-range [data-out] { font-weight: var(--weight-semibold); color: var(--ink); }
.st-yr-calc-out .st-yr-note, .st-yr-calc-out > p:not([class]) { margin: var(--s-4) 0 0; font-size: var(--text-sm); color: var(--ink-3); }
.st-yr-calc-out .st-table-wrap { margin-top: var(--s-4); }
.st-yr-net-table td, .st-yr-net-table th { font-variant-numeric: tabular-nums; }

.st-yr-track { margin: var(--s-4) 0 0; }
.st-yr-track-rail { position: relative; height: 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sea) 18%, var(--canvas)); }
.st-yr-track-iqr { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sea) 45%, var(--canvas)); }
.st-yr-track-mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: var(--r-2xs); background: var(--sun-ink); }
.st-yr-track-ends { display: flex; justify-content: space-between; margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Var finns jobben: the real map of Sweden beside the ranked län list. */
.st-yr-where { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s-8); align-items: start; margin: 0 0 var(--s-8); }
.st-yr-map-wrap { min-width: 0; }
.st-yr-map-legend { display: flex; align-items: center; gap: 3px; margin: var(--s-3) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.st-yr-map-legend i { width: 14px; height: 10px; border-radius: var(--r-2xs); }
.st-yr-map-legend i.is-q1 { background: color-mix(in srgb, var(--sea) 15%, var(--canvas)); }
.st-yr-map-legend i.is-q2 { background: color-mix(in srgb, var(--sea) 30%, var(--canvas)); }
.st-yr-map-legend i.is-q3 { background: color-mix(in srgb, var(--sea) 50%, var(--canvas)); }
.st-yr-map-legend i.is-q4 { background: color-mix(in srgb, var(--sea) 70%, var(--canvas)); }
.st-yr-map-legend i.is-q5 { background: color-mix(in srgb, var(--sea) 90%, var(--canvas)); }
.st-yr-map-legend small { margin-left: var(--s-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .st-yr-where { grid-template-columns: 1fr; } }

/* ---- v3: the real map of Sweden and the ranked län list -------------------------------
   The SVG is the outline generated from Natural Earth (docs/site/tools/sweden-lan.mjs).
   Every fill is a class, never an attribute, so the five sea steps follow the tokens into
   dark mode; the hairline between län is the canvas colour, not a grey. */
/* The sprite is served once from /img/sweden-lan.svg (YRKEN-AUDIT item 19/48) and each
   län's shape is a <use> of it with no fill/stroke of its own; fill and stroke are
   inherited SVG properties, so the colour scale and the hairline sit on .st-yr-lan
   itself and the referenced path picks them up through the use element. */
.st-yr-svgmap { display: block; width: 100%; max-width: 420px; height: auto; }
.st-yr-lan { fill: var(--sunken); stroke: var(--canvas); stroke-width: 0.6; stroke-linejoin: round; transition: fill 120ms ease; }
.st-yr-lan.is-q0 { fill: var(--sunken); }
.st-yr-lan.is-q1 { fill: color-mix(in srgb, var(--sea) 15%, var(--canvas)); }
.st-yr-lan.is-q2 { fill: color-mix(in srgb, var(--sea) 30%, var(--canvas)); }
.st-yr-lan.is-q3 { fill: color-mix(in srgb, var(--sea) 50%, var(--canvas)); }
.st-yr-lan.is-q4 { fill: color-mix(in srgb, var(--sea) 70%, var(--canvas)); }
.st-yr-lan.is-q5 { fill: color-mix(in srgb, var(--sea) 90%, var(--canvas)); }
.st-yr-lan:focus { outline: none; }
/* Dark ink with a light halo reads on every shade of the map, including the darkest
   län, where white text on the sea hue was too faint. paint-order draws the halo behind. */
.st-yr-lan-lbl { font-family: var(--font); font-size: 8px; font-weight: var(--weight-semibold); fill: var(--ink); stroke: var(--canvas); stroke-width: 2.2px; stroke-linejoin: round; paint-order: stroke fill; text-anchor: middle; pointer-events: none; }
.st-yr-lan-n { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
@media (prefers-reduced-motion: reduce) { .st-yr-lan { transition: none; } }

.st-yr-lanlist-wrap { min-width: 0; }
.st-yr-lanlist-h { margin: 0 0 var(--s-3); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-yr-lanlist { list-style: none; margin: 0; padding: 0; }
.st-yr-lanrow {
  display: grid;
  grid-template-columns: minmax(84px, 1.1fr) minmax(0, 1.6fr) 52px 60px 76px;
  align-items: center;
  gap: var(--s-2);
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-sm);
}
.st-yr-lanrow > a { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-yr-lanrow > a:hover { color: var(--accent-ink); }
.st-yr-lanbar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.st-yr-lanbar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--sea); }
.st-yr-lanrow > b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.st-yr-lanrow > em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.st-yr-lanrow > em.is-new { color: var(--ok); }
.st-yr-lanrow > small { text-align: right; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* The column labels the ranked list lacked: the last figure is the riksområde mean, not
   the län's own pay (audit 29). */
.st-yr-lanhead { padding: 0 0 var(--s-1); border-bottom: 1px solid var(--line); }
.st-yr-lanhead > span { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); line-height: 1.2; }
.st-yr-lanhead > span:nth-child(n + 3) { text-align: right; }
@media (max-width: 560px) { .st-yr-lanrow { grid-template-columns: minmax(74px, 1fr) minmax(0, 1fr) 46px 46px; } .st-yr-lanrow > small, .st-yr-lanhead > span:last-child { display: none; } }

/* SCB's riksområden say the same thing in coarser units, so they fold away. */
.st-yr-details { margin: 0 0 var(--s-6); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.st-yr-details > summary { padding: var(--s-3) 0; cursor: pointer; font-size: var(--text-md); color: var(--accent-ink); }
.st-yr-details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Guides as a card row (spec §4.11). The field pages keep the two-column link list. */
.st-yr-guides.is-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .st-yr-guides.is-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .st-yr-guides.is-cards { grid-template-columns: 1fr; } }

/* ---- v3: the lönestege, the guide cards, the yoy bars, the delta grid, sector bands ---- */

/* Liknande yrken as a ladder: one median scale, this occupation in the sun wash. */
.st-yr-ladder { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.st-yr-ladder-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) minmax(0, 2fr) 86px 84px 104px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-xs);
  font-size: var(--text-md);
}
.st-yr-ladder-row.is-self { background: var(--sun-soft); }
.st-yr-ladder-name { color: var(--ink-2); }
a.st-yr-ladder-name:hover { color: var(--accent-ink); }
.st-yr-ladder-row.is-self .st-yr-ladder-name { color: var(--ink); font-weight: var(--weight-semibold); }
.st-yr-ladder-bar { display: block; height: 10px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.st-yr-ladder-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--sea); }
.st-yr-ladder-row.is-self .st-yr-ladder-bar i { background: var(--sun-ink); }
.st-yr-ladder-row > b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.st-yr-ladder-diff { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.st-yr-ladder-row > small { text-align: right; font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-yr-ladder-tag { text-align: right; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--sun-ink); }
@media (max-width: 720px) {
  .st-yr-ladder-row { grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr) 76px 76px; }
  .st-yr-ladder-row > small { display: none; }
}

/* One shared sign scale for every figure the reader compares against something. */
.st-yr-ladder-diff.is-up, .st-yr-sectorfig .is-up, .st-yr-delta .is-up { color: var(--ok); }
.st-yr-ladder-diff.is-down, .st-yr-sectorfig .is-down, .st-yr-delta .is-down { color: var(--warn); }
.st-yr-ladder-diff.is-flat, .st-yr-sectorfig .is-flat, .st-yr-delta .is-flat { color: var(--ink-3); }

/* Compare picker (audit 39a): the form under the ladder and the extra row it inserts. */
.st-yr-compare { position: relative; max-width: 420px; margin: 0 0 var(--s-5); }
.st-yr-compare label { display: block; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }
.st-yr-compare input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-size: var(--text-md);
}
.st-yr-compare input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-yr-compare .st-yr-hits { position: absolute; z-index: 2; width: 100%; }
.st-yr-hits li.is-disabled { color: var(--ink-4); }
.st-yr-hits button {
  display: block;
  width: 100%;
  padding: var(--s-3) var(--s-5);
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
}
.st-yr-hits button:hover:not(:disabled) { background: var(--canvas-tint); color: var(--ink); }
.st-yr-hits button:disabled { color: var(--ink-4); cursor: default; }
.st-yr-ladder-row.is-compare {
  grid-template-columns: minmax(140px, 1.3fr) minmax(0, 2fr) 86px 84px 104px auto;
  background: var(--accent-soft);
}
.st-yr-ladder-row.is-compare .st-yr-ladder-name { color: var(--ink); font-weight: var(--weight-semibold); }
.st-yr-ladder-tag.is-compare-tag { color: var(--accent-ink); }
.st-yr-ladder-remove {
  justify-self: end;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--card);
  color: var(--ink-3);
  font-size: var(--text-xs);
  cursor: pointer;
}
.st-yr-ladder-remove:hover { color: var(--warn); border-color: var(--warn); }
@media (max-width: 720px) {
  .st-yr-ladder-row.is-compare { grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr) 76px 76px auto; }
}

/* Guide cards: the cover, the hub as an eyebrow in its own colour, title, description. */
.st-yr-guide { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); overflow: hidden; }
.st-yr-guide:hover { border-color: var(--line-strong); text-decoration: none; }
.st-yr-guide-cover { display: block; line-height: 0; }
.st-yr-guide-cover svg { display: block; width: 100%; height: 72px; }
.st-yr-guide-body { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); }
.st-yr-guide-hub { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--hub-ink, var(--accent-ink)); }
.st-yr-guide b { font-size: var(--text-lg); line-height: var(--lh-lg); }
.st-yr-guide-desc { font-size: var(--text-sm); line-height: 1.45; color: var(--ink-3); }

/* Year-over-year change: one bar per year, the sign in the colour and in the figure. */
.st-yr-yoy { margin: 0 0 var(--s-6); }
.st-yr-yoy-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); align-items: end; height: 132px; }
.st-yr-yoy-bar { display: grid; grid-template-rows: auto 1fr auto; align-content: end; justify-items: center; height: 100%; min-width: 0; gap: var(--s-1); }
/* Eleven columns do not fit a phone: the row scrolls sideways inside its figure. */
@media (max-width: 620px) { .st-yr-yoy { overflow-x: auto; } .st-yr-yoy-bars { min-width: 480px; } }
.st-yr-yoy-bar > b { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: var(--weight-semibold); }
/* The track has a zero line across its middle; a rise stands on it, a fall hangs from it. */
.st-yr-yoy-track { position: relative; display: block; width: 100%; height: 100%; align-self: stretch; }
.st-yr-yoy-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line-strong); }
.st-yr-yoy-track > i { position: absolute; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 30px; bottom: 50%; background: var(--sea); border-radius: var(--r-2xs) var(--r-2xs) 0 0; }
.st-yr-yoy-bar.is-down .st-yr-yoy-track > i { top: 50%; bottom: auto; background: var(--warn); border-radius: 0 0 var(--r-2xs) var(--r-2xs); }
.st-yr-yoy-bar.is-flat .st-yr-yoy-track > i { background: var(--ink-4); }
.st-yr-yoy-bar.is-down > b { color: var(--warn); }
.st-yr-yoy-bar.is-break .st-yr-yoy-track > i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sea) 55%, var(--canvas)) 0 4px, var(--canvas) 4px 8px); border: 1px solid color-mix(in srgb, var(--sea) 55%, var(--canvas)); }
.st-yr-yoy-bar > em { font-style: normal; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Förändring: three measures by three horizons, kronor and per cent in one cell. */
.st-yr-delta td, .st-yr-delta th { font-variant-numeric: tabular-nums; }

/* Per sektor: one spread band per sector on a shared scale, the figures to the right. */
.st-yr-sectors { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-4); }
.st-yr-sectorrow { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: var(--s-4); }
.st-yr-sectorband { margin: 0; }
.st-yr-sectorband .st-band-row { margin: 0 0 var(--s-1); font-size: var(--text-sm); color: var(--ink-2); }
.st-yr-sectorband .st-band-rail { height: 12px; }
.st-yr-sectorfig { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s-3); margin: 0; font-variant-numeric: tabular-nums; max-width: none; }
.st-yr-sectorfig b { font-size: var(--text-md); color: var(--ink); }
.st-yr-sectorfig span { font-size: var(--text-sm); min-width: 76px; text-align: right; }
@media (max-width: 720px) {
  .st-yr-sectorrow { grid-template-columns: 1fr; gap: var(--s-1); }
  .st-yr-sectorfig { justify-content: flex-start; }
}

/* Money in a bar chart needs a wider value column than a count does. */
.st-main-yrke .st-chart-row { grid-template-columns: 1fr 78px; }
.st-main-yrke .st-yr-sec > .st-chart, .st-main-yrke .st-yr-var > .st-chart { padding: var(--s-5); }

/* The tables web/yrke.js sorts. Same affordance as the field page's own header. */
.st-table.is-sortable th[data-k] { cursor: pointer; user-select: none; }
.st-table.is-sortable th[data-k]:hover { color: var(--ink); }
.st-table.is-sortable th[aria-sort]::after { content: " ▲"; font-size: var(--text-xs); }
.st-table.is-sortable th[aria-sort="descending"]::after { content: " ▼"; }

/* ---- Hub and field pages ------------------------------------------------------------- */
.st-yr-hub > section, .st-yr-fieldpage > section { margin-top: var(--st-section); }
.st-yr-hub > section:first-of-type, .st-yr-fieldpage > section:first-of-type { margin-top: var(--s-12); }

/* Since v3 the hub's search form sits inside the tint band, under the lede and the
   updated line (audit 46): the same spacing the band gives its own paragraphs. */
.st-gh .st-yr-search { margin-top: var(--s-6); }
.st-yr-search { position: relative; max-width: 560px; }
.st-yr-search label { display: block; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }
.st-yr-search input {
  width: 100%;
  padding: var(--s-4) var(--s-5);
  font: inherit;
  font-size: var(--text-lg);
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.st-yr-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-yr-hits { list-style: none; margin: var(--s-2) 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); overflow: hidden; }
.st-yr-hits li { border-bottom: 1px solid var(--line-soft); }
.st-yr-hits li:last-child { border-bottom: 0; }
.st-yr-hits a { display: block; padding: var(--s-3) var(--s-5); color: var(--ink-2); font-size: var(--text-md); }
.st-yr-hits a:hover { background: var(--canvas-tint); color: var(--ink); text-decoration: none; }
.st-yr-hits .is-empty { padding: var(--s-3) var(--s-5); color: var(--ink-4); font-size: var(--text-md); }

.st-yr-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.st-yr-field { display: grid; gap: var(--s-1); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); }
.st-yr-field:hover { border-color: var(--line-strong); text-decoration: none; }
.st-yr-field b { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.01em; }
.st-yr-field span { font-size: var(--text-md); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-yr-field small { font-size: var(--text-sm); color: var(--ink-4); font-variant-numeric: tabular-nums; }

.st-yr-tops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-8); margin-top: var(--s-6); }
.st-yr-top h3 { margin: 0 0 var(--s-3); font-size: var(--text-lg); font-family: var(--font-display); color: var(--ink); }
.st-yr-top ol { list-style: none; margin: 0; padding: 0; counter-reset: yr; }
.st-yr-top li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); }
.st-yr-top li b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.st-yr-method .st-prose { margin-top: var(--s-4); }
.st-yr-back { margin-top: var(--st-section); }

/* Sortable field table: the header is a control, so it says so. */
.st-sortable th[data-k] { cursor: pointer; user-select: none; }
.st-sortable th[data-k]:hover { color: var(--ink); }
.st-sortable th[aria-sort]::after { content: " ▲"; font-size: var(--text-xs); }
.st-sortable th[aria-sort="descending"]::after { content: " ▼"; }

/* ---- Yrkessidan: the detail pass (2026-09-18) -------------------------------------------
   One block for the alignment, spacing and sizing fixes from the final design audit, so the
   pass can be read in one place. Everything here refines a rule above; nothing is new UI. */

/* Chart cards: the prose paragraph margin leaked into the source line and left a dead
   band at the bottom of every card; the source line was also the faintest ink. */
.st-yr-prose .st-chart-foot, .st-yr-prose .st-chart-sub, .st-yr-prose .st-weeks-note { max-width: none; }
.st-yr-prose .st-chart-foot { margin: var(--s-3) 0 0; color: var(--ink-3); }
.st-yr-prose .st-chart > .st-chart-foot:last-child { margin-bottom: 0; }
.st-yr-sec > .st-chart-foot, .st-yr-var > .st-band > .st-chart-foot { margin-bottom: var(--s-5); }

/* Spread band: each figure sits under its own point on the band, so the outer two hug
   the ends and the inner three are centred instead of five left-aligned columns. */
.st-band-marks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.st-band-marks > .st-band-mark { text-align: center; justify-items: center; }
.st-band-marks > .st-band-mark:first-child { text-align: left; justify-items: start; }
.st-band-marks > .st-band-mark:last-child { text-align: right; justify-items: end; }
@media (max-width: 640px) {
  .st-band-marks { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .st-band-marks > .st-band-mark, .st-band-marks > .st-band-mark:last-child { text-align: left; justify-items: start; }
}

/* The two calculators: three fields on one baseline. Labels on one row, every control the
   same 40 px tall, the segmented control its own width and without its list margin. */
.st-yr-calc-fields { align-items: start; gap: var(--s-5); }
.st-yr-calc-field { grid-template-rows: auto 40px; align-items: center; }
.st-yr-calc-field > span:first-child { align-self: end; line-height: 1.2; }
.st-yr-calc-field .ui-input, .st-yr-calc-field .ui-select { height: 40px; }
.st-yr-calc-range-row { height: 40px; }
.st-yr-calc-field .st-yr-seg { margin: 0; justify-self: start; align-self: center; }
.st-yr-calc > .st-yr-note { margin: var(--s-3) 0 0; }

/* Anställningsform: a larger ring, the legend underneath at full card width. */
.st-donut-body { grid-template-columns: 1fr; justify-items: center; gap: var(--s-5); }
.st-donut-ring { width: 210px; }
.st-donut-center { padding: 0 44px; }
.st-donut-center b { font-size: var(--text-2xl); }
.st-donut-center span { font-size: var(--text-xs); }
.st-donut-legend { width: 100%; gap: 0; }
.st-donut-legend li { grid-template-columns: 10px minmax(0, 1fr) 56px 44px; padding: var(--s-2) 0; border-top: 1px solid var(--line-soft); font-size: var(--text-md); }
.st-donut-legend li b { text-align: right; }
@media (max-width: 560px) { .st-donut-ring { width: 180px; } }

/* Län i ordning: the heading is a card-sized title, not a shouted label; the header row
   fits its columns; the footnote explains the starred column. */
.st-yr-prose .st-yr-lanlist-h { margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.st-yr-lanhead > span { white-space: nowrap; }
.st-yr-prose .st-yr-lanfoot { margin: var(--s-3) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.st-yr-lan-labels { pointer-events: none; }

/* Löneutveckling: the 960-wide chart keeps its labels at their real size; on a phone it
   scrolls instead of shrinking them to nothing. */
.st-line svg text { font-size: 13px; }
.st-line-ytx, .st-line-xtx, .st-line-brk { font-size: 12px; }
@media (max-width: 620px) { .st-line svg { min-width: 720px; } }

/* Förändring per år: a series with no falling year stands on the bottom edge and uses the
   whole height; only a series with a fall splits around a zero line. */
.st-yr-yoy-bars { height: 120px; }
.st-yr-yoy-bars:not(.has-neg) .st-yr-yoy-track::before { top: auto; bottom: 0; }
.st-yr-yoy-bars:not(.has-neg) .st-yr-yoy-track > i { bottom: 0; }
.st-yr-yoy-bars.has-neg { height: 150px; }

/* Lönestegen: room for "m.fl." on one line, the self tag on one line. */
.st-yr-ladder-row { grid-template-columns: minmax(200px, 1.5fr) minmax(0, 2fr) 86px 104px 104px; }
.st-yr-ladder-tag { white-space: nowrap; letter-spacing: 0.04em; }
@media (max-width: 720px) { .st-yr-ladder-row { grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr) 76px 84px; } }

/* Guide cards: the title is ink like every other card title; the accent is the hover. */
.st-yr-prose .st-yr-guide b { color: var(--ink); }
.st-yr-prose .st-yr-guide:hover b { color: var(--accent-ink); }

/* Fackförbund: two cards a row, the name as the link and the coverage under it. */
.st-yr-fack { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); }
.st-yr-fack li { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.st-yr-fack li a { font-weight: var(--weight-semibold); }
.st-yr-fack li a::after { content: " ↗"; font-size: 0.85em; color: var(--ink-3); }
.st-yr-fack li span { font-size: var(--text-sm); line-height: 1.45; }

/* Så förhandlar du: three numbered steps. */
.st-yr-steps { list-style: none; counter-reset: step; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.st-yr-prose .st-yr-steps li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); line-height: 1.55; }
.st-yr-steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sea) 14%, var(--canvas)); color: var(--accent-ink); font-family: var(--font-display); font-weight: var(--weight-semibold); }

/* Källor och metod is reference text: one size down, so seven paragraphs do not weigh as
   much as the answer above them. */
.st-yr-sec[aria-labelledby="kallor-och-metod"] p { font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }

/* The hero's ad note keeps "Jobbo 17 sep" together. */
.st-yr-fact > small { text-wrap: pretty; }
.st-yr-fack li { align-content: start; }

/* Phones: the netto table fits its card, and the ladder puts the bar under the name
   instead of squeezing it into a dot between the name and the figures. */
@media (max-width: 560px) {
  .st-yr-calc-out { padding: var(--s-4); }
  .st-yr-net-table th, .st-yr-net-table td { padding-left: var(--s-2); padding-right: var(--s-2); }
  .st-yr-net-table th { font-size: 10px; letter-spacing: 0.04em; }
}
@media (max-width: 720px) {
  .st-yr-ladder-row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: var(--s-1); }
  .st-yr-ladder-row > .st-yr-ladder-bar { grid-column: 1 / -1; grid-row: 2; height: 6px; }
}

/* ---- Hub and field pages: the detail pass (2026-09-18) -----------------------------------
   Same audit as the occupation page: alignment, spacing, sizing, colour. */

/* Less air between the head band and the first section; sections a step closer together. */
.st-yr-hub, .st-yr-fieldpage { padding-top: var(--s-10); }
.st-yr-hub > section:first-of-type, .st-yr-fieldpage > section:first-of-type { margin-top: 0; }
.st-yr-hub > section, .st-yr-fieldpage > section { margin-top: calc(var(--st-section) * 0.75); }
.st-yr-hub .st-h2, .st-yr-fieldpage .st-h2 { margin-bottom: var(--s-5); text-wrap: balance; }

/* Field cards: three a row (21 fields, no orphan), every card the same height with the
   median line on the bottom edge; the title is ink, the accent is the hover. */
.st-yr-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: 0; }
@media (max-width: 960px) { .st-yr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .st-yr-fields { grid-template-columns: 1fr; } }
.st-yr-field { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.st-yr-field:hover { box-shadow: var(--shadow-float); }
.st-yr-field b { color: var(--ink); line-height: 1.3; }
.st-yr-field:hover b { color: var(--accent-ink); }
.st-yr-field small { margin-top: auto; padding-top: var(--s-3); color: var(--ink-3); }

/* Topplistor: a rank in front of every row, the figure in a fixed column. */
.st-yr-tops-grid { margin-top: 0; }
.st-yr-top { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.st-yr-top li { counter-increment: yr; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-2); }
.st-yr-top li::before { content: counter(yr); font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-yr-top li:last-child { border-bottom: 0; padding-bottom: 0; }
.st-yr-top li a { color: var(--ink-2); }
.st-yr-top li a:hover { color: var(--accent-ink); }

/* Alla yrken A–Ö: a letter strip, then the groups flowing in columns. */
.st-yr-az-nav { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-6); }
.st-yr-az-nav a { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.st-yr-az-nav a:hover { border-color: var(--line-strong); color: var(--accent-ink); text-decoration: none; }
.st-yr-az-cols { columns: 3 300px; column-gap: var(--s-8); }
.st-yr-az-group { margin: 0 0 var(--s-6); }
.st-yr-az-group h3 { margin: 0 0 var(--s-2); padding-bottom: var(--s-1); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); break-after: avoid; scroll-margin-top: calc(var(--st-head-h) + var(--s-5)); }
.st-yr-az-group ul { list-style: none; margin: 0; padding: 0; }
.st-yr-az-group li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); break-inside: avoid; }
.st-yr-az-group li a { color: var(--ink-2); min-width: 0; }
.st-yr-az-group li a:hover { color: var(--accent-ink); }
.st-yr-az-group li span { flex: none; font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-yr-az .st-yr-note { margin: 0 0 var(--s-4); }

/* The search box in the head band: a card-white field with the site's focus ring. */
.st-gh .st-yr-search input { background: var(--card); border-color: var(--line-strong); height: 56px; }
.st-gh .st-yr-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The field band: every occupation's median as a dot on the track. */
.st-band-rail > .st-band-dot { top: 50%; bottom: auto; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: var(--r-pill); background: var(--sea); box-shadow: 0 0 0 1.5px var(--canvas); opacity: 0.85; }
.st-yr-fieldpage .st-band-rail { height: 18px; }
.st-yr-fieldpage .st-band { margin-bottom: 0; }

/* The occupation table on the field page. */
.st-yr-fieldpage .st-yr-note { margin: calc(var(--s-3) * -1) 0 var(--s-4); }
.st-yr-fieldpage .st-table td:first-child a { color: var(--ink); font-weight: var(--weight-medium); }
.st-yr-fieldpage .st-table td:first-child a:hover { color: var(--accent-ink); }

/* Andra yrkesområden: chips with the live ad count. */
.st-yr-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-yr-chips a { display: inline-flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: var(--text-md); }
.st-yr-chips a:hover { border-color: var(--line-strong); color: var(--accent-ink); text-decoration: none; }
.st-yr-chips a span { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The union block on the field page sits in the page column, not the 72ch prose measure. */
.st-yr-fieldinfo .st-prose { max-width: none; }
.st-yr-fieldinfo .st-prose h3 { margin-top: var(--s-6); }
.st-yr-fieldinfo .st-prose h3:first-child { margin-top: 0; }

/* The way back is a quiet link with normal spacing, not a section of its own. */
.st-yr-back { margin-top: var(--s-10); }
.st-yr-fieldpage { padding-bottom: var(--s-12); }

/* Hub h1 on one line; guide card titles in ink wherever the cards are used. */
.st-main-yrken .st-gh .st-h1 { max-width: none; }
.st-yr-guide b { color: var(--ink); }
.st-yr-guide:hover b { color: var(--accent-ink); }

/* ---- /yrken/ rebuilt as a data product (2026-09-18) ----------------------------------------
   Hero with the search, every occupation on one salary axis, the yrkesområden on a shared
   scale, six ranked lists. Tokens only; web/yrken-hub.js adds the behaviour. */

.st-hub-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.st-hub-hero .st-yr-hero-main { justify-content: flex-start; }
.st-hub-hero .st-yr-tiles { align-self: center; }
.st-main-yrken .st-gh .st-h1 { max-width: none; text-wrap: balance; }

/* The search is the page's first control: tall, white, with its results floating under it. */
.st-hub-search { position: relative; max-width: none; margin: var(--s-6) 0 0; }
.st-hub-search label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.st-gh .st-hub-search input { height: 60px; padding: 0 var(--s-5) 0 52px; font-size: var(--text-lg); border-radius: var(--r-md); border-color: var(--line-strong); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e7480' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 18px center / 22px; box-shadow: var(--shadow-float); }
.st-hub-search .st-yr-hits { position: absolute; left: 0; right: 0; top: calc(100% + var(--s-2)); z-index: var(--z-float); margin: 0; border-radius: var(--r-md); box-shadow: var(--shadow-float); max-height: 420px; overflow: auto; }
.st-hub-search .st-yr-hits a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-5); }
.st-hub-search .st-yr-hits a span { color: var(--ink); font-weight: var(--weight-medium); min-width: 0; }
.st-hub-search .st-yr-hits a small { flex: none; font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-hub-search .st-yr-hits li.is-active a, .st-hub-search .st-yr-hits a:hover { background: var(--canvas-tint); text-decoration: none; }
.st-hub-popular { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; }
.st-hub-popular > span { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-hub-popular .st-yr-chips a { padding: 5px var(--s-3); font-size: var(--text-sm); }
.st-hub-hero .st-yr-herometa { margin-top: var(--s-5); }
.st-yr-fact > small a { color: var(--accent-ink); }
@media (max-width: 900px) { .st-hub-hero { grid-template-columns: 1fr; } }

/* Sections. */
.st-yr-hub > .st-hub-sec { margin-top: var(--st-section); }
.st-yr-hub > .st-hub-sec:first-of-type { margin-top: 0; }
.st-hub-intro, .st-hub-text, .st-hub-text p { margin: 0 0 var(--s-6); max-width: 86ch; font-size: var(--text-lg); line-height: 1.6; color: var(--ink-2); }
.st-hub-text { margin: var(--s-6) 0 0; }
.st-hub-text p { margin: 0; }

/* Every occupation as a dot: bins of 5 000 kr along the axis, dots stacked from the
   baseline four across. The middle half of the occupations is the full sea, the rest the
   light step; a search hit turns sun and dims everything else. */
.st-hist { margin: 0; padding: var(--s-6) var(--s-6) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.st-hist-scroll { overflow-x: auto; }
.st-hist-plot { display: flex; align-items: flex-end; gap: var(--s-1); min-width: 880px; }
.st-hist-bin { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.st-hist-dots { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 3px; width: 53px; padding-bottom: var(--s-1); }
.st-hist-dots > a { display: block; width: 11px; height: 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sea) 34%, var(--canvas)); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.st-hist-dots > a.is-mid { background: var(--sea); }
.st-hist-dots > a:hover { background: var(--ink); transform: scale(1.5); }
.st-hist-plot.has-hit .st-hist-dots > a { opacity: 0.22; }
.st-hist-plot.has-hit .st-hist-dots > a.is-hit { opacity: 1; background: var(--sun-ink); transform: scale(1.7); box-shadow: 0 0 0 3px var(--sun-soft); }
.st-hist-bin > span { width: 100%; padding-top: var(--s-1); border-top: 1px solid var(--line-strong); text-align: center; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-hist-axis { margin: var(--s-2) 0 0; min-width: 880px; text-align: center; font-size: var(--text-xs); color: var(--ink-3); max-width: none; }
.st-hist-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; font-size: var(--text-sm); color: var(--ink-2); max-width: none; }
.st-hist-legend i { width: 11px; height: 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--sea) 34%, var(--canvas)); }
.st-hist-legend i.is-mid { background: var(--sea); }
.st-hist-legend i:not(:first-child) { margin-left: var(--s-4); }
.st-hist .st-chart-foot { margin: var(--s-3) 0 0; font-size: 12px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .st-hist-dots > a { transition: none; } }

/* Yrkesområden on one scale: name, the band with its occupations, the average, the span,
   the counts. */
.st-hubf-sort { margin: 0 0 var(--s-4); }
.st-hubf { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.st-hubf-row { display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(0, 2.4fr) 92px 168px 72px 80px; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.st-hubf-row:last-child { border-bottom: 0; }
.st-hubf-row:not(.st-hubf-head):hover { background: var(--canvas-tint); }
.st-hubf-head { padding-top: var(--s-3); padding-bottom: var(--s-3); background: var(--sunken); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-hubf-head > span:nth-child(n + 3) { text-align: right; }
.st-hubf-scale { display: flex; justify-content: space-between; letter-spacing: 0; text-transform: none; }
.st-hubf-scale i { font-style: normal; }
.st-hubf-name { color: var(--ink); font-weight: var(--weight-semibold); }
.st-hubf-name:hover { color: var(--accent-ink); }
.st-hubf-band { margin: 0; }
.st-hubf-band .st-band-rail { height: 14px; }
.st-hubf-band .st-band-rail > .st-band-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; box-shadow: none; opacity: 0.9; }
.st-hubf-avg { text-align: right; color: var(--ink); }
.st-hubf-span, .st-hubf-count, .st-hubf-live { text-align: right; color: var(--ink-2); font-size: var(--text-sm); }
.st-hubf-live { color: var(--ink); font-weight: var(--weight-semibold); font-size: var(--text-md); }
.st-yr-hub .st-hub-sec > .st-chart-foot { margin: var(--s-3) 0 0; font-size: 12px; color: var(--ink-3); }
@media (max-width: 1100px) { .st-hubf-row { grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) 92px 72px; } .st-hubf-span, .st-hubf-count, .st-hubf-head > span:nth-child(4), .st-hubf-head > span:nth-child(5) { display: none; } }
@media (max-width: 700px) {
  .st-hubf-head { display: none; }
  .st-hubf-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); }
  .st-hubf-chart { grid-column: 1 / -1; grid-row: 2; }
  .st-hubf-live { display: none; }
}

/* Six ranked lists, three a row. */
.st-hub-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
@media (max-width: 1100px) { .st-hub-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .st-hub-lists { grid-template-columns: 1fr; } }
.st-main-yrken .st-chart-row { grid-template-columns: 1fr 92px; }
.st-main-yrken .st-chart-lbl a { color: var(--ink-2); }
.st-main-yrken .st-chart-lbl a:hover { color: var(--accent-ink); }
.st-main-yrken .st-chart-val { color: var(--ink); font-weight: var(--weight-semibold); }
.st-main-yrken .st-chart-sub { min-height: 2.6em; }
.st-main-yrken .st-chart-foot { color: var(--ink-3); }

.st-yr-hub .st-yr-faq { max-width: none; }
.st-hub-cta { margin-top: var(--st-section); }
.st-yr-hub .st-hubf-name { color: var(--ink); }
.st-yr-hub .st-hubf-name:hover { color: var(--accent-ink); }
.st-main-yrken .st-chart-sub { min-height: 3.4em; }
.st-hist-plot { min-width: 720px; }
.st-hist-axis { min-width: 720px; }
.st-hist-legend { gap: var(--s-2) var(--s-5); }
.st-hist-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.st-hist-legend i:not(:first-child) { margin-left: 0; }
.st-hist-legend i { flex: none; }
@media (max-width: 700px) { .st-hist { padding: var(--s-4); } .st-hist-axis { text-align: left; } }

/* ---- Field pages rebuilt on the hub's model (2026-09-18) -------------------------------------
   The occupations as spread bands in the hub's row list; everything else reuses the hub and
   occupation page components. */
.st-main-falt .st-hub-hero .st-h1 { text-wrap: balance; }
.st-fl-jump { margin-top: var(--s-5); }
.st-fl-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(0, 2.6fr) 96px 88px 104px; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.st-fl-row:last-child { border-bottom: 0; }
.st-fl-row:not(.st-fl-head):hover { background: var(--canvas-tint); }
.st-fl-head { background: var(--sunken); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-fl-head > span:nth-child(n + 3) { text-align: right; }
.st-yr-hub .st-fl-name { color: var(--ink); font-weight: var(--weight-medium); }
.st-yr-hub .st-fl-name:hover { color: var(--accent-ink); }
.st-fl-band { margin: 0; }
.st-fl-band .st-band-rail { height: 12px; }
.st-fl-band .st-band-rail > .st-band-tick { top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; box-shadow: 0 0 0 1.5px var(--card); }
.st-band-rail > .st-band-ref { top: -6px; bottom: -6px; width: 0; border-left: 1.5px dashed var(--ink-3); border-radius: 0; background: none; }
.st-fl-none { font-size: var(--text-sm); color: var(--ink-3); }
.st-fl-pay { text-align: right; color: var(--ink); }
.st-fl-emp { text-align: right; color: var(--ink-2); font-size: var(--text-sm); }
.st-fl-ads { text-align: right; color: var(--ink); font-weight: var(--weight-semibold); }
.st-fl-ads em { margin-left: var(--s-2); font-style: normal; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ok); }
.st-yr-fieldpage .st-chart-table { margin: var(--s-4) 0 0; }
.st-fl-all { margin-top: var(--s-5); }
@media (max-width: 1100px) { .st-fl-row { grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) 92px 96px; } .st-fl-emp, .st-fl-head > span:nth-child(4) { display: none; } }
@media (max-width: 700px) {
  .st-fl-head { display: none; }
  .st-fl-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-4); }
  .st-fl-chart { grid-column: 1 / -1; grid-row: 2; }
}

/* The field's own row in the comparison with the other twenty. */
.st-hubf-row.is-self { background: var(--sun-soft); }
.st-hubf-row.is-self:hover { background: var(--sun-soft); }
.st-hubf-row.is-self .st-hubf-name { font-weight: var(--weight-bold); }
.st-yr-fieldpage .st-yr-where { margin-top: var(--s-6); }

/* ---- Salary lists and net pay pages (2026-09-18) ---------------------------------------------
   /lonestatistik/ and /lon-efter-skatt/ are built from the hub's and the field pages' parts
   (hero, ladder, charts, FAQ). Only what is new is styled here: the ranked row with its place
   number, the two-dot rail for women and men, the list cards and the net pay tables. */
.st-ll-page .st-hub-sec > .st-hub-text:not(:last-child), .st-net-page .st-hub-sec > .st-hub-text:not(:last-child) { margin: 0 0 var(--s-6); }
.st-ll-page .st-hub-text p + p, .st-net-page .st-hub-text p + p { margin-top: var(--s-4); }
.st-ll-row { display: grid; grid-template-columns: 36px minmax(210px, 1.25fr) minmax(0, 2.3fr) 104px 96px 96px; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.st-ll-row:last-child { border-bottom: 0; }
.st-ll-row:not(.st-fl-head):hover { background: var(--canvas-tint); }
.st-ll-row.st-fl-head > span:first-child { text-align: left; }
.st-ll-rank { color: var(--ink-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.st-ll-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-ll-who small { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ll-row .st-fl-pay { white-space: nowrap; }
.st-ll-row .st-fl-emp { white-space: nowrap; }
.st-ll-barfig .st-band-rail > .st-band-iqr { border-radius: var(--r-pill); }
.st-band-rail > .st-ll-dot, .st-ll-legend .st-ll-dot { top: 50%; bottom: auto; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: var(--r-pill); box-shadow: 0 0 0 2px var(--card); }
.st-ll-dot.is-w { background: var(--sun); }
.st-ll-dot.is-m { background: var(--sea); }
.st-ll-gapfig .st-band-rail { height: 6px; }
.st-ll-legend { display: flex; gap: var(--s-5); margin: 0 0 var(--s-4); font-size: var(--text-sm); color: var(--ink-2); }
.st-ll-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.st-ll-legend .st-ll-dot { position: static; display: inline-block; margin: 0; box-shadow: none; }
.st-ll-table { margin: var(--s-4) 0 0; }
.st-ll-filter { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; font-size: var(--text-sm); color: var(--ink-2); }
.st-ll-filter select { width: auto; min-width: 240px; }
.st-ll-table .st-table-wrap { max-height: 640px; overflow: auto; }
.st-ll-table thead th { position: sticky; top: 0; background: var(--sunken); z-index: 1; }
.st-ll-siblings { margin-top: var(--s-5); }

.st-ll-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.st-ll-card { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink-2); transition: border-color 0.15s, box-shadow 0.15s; }
.st-ll-card:hover { border-color: var(--line-strong); text-decoration: none; }
.st-ll-card b { color: var(--ink); font-size: var(--text-lg); line-height: 1.3; }
.st-ll-card:hover b { color: var(--accent-ink); }
.st-ll-card span { font-size: var(--text-md); line-height: 1.5; }
.st-ll-card small { margin-top: auto; padding-top: var(--s-3); font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-ll-card.is-tool { background: var(--canvas-tint); }
.st-ll-card ol { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--s-2); counter-reset: ll; }
.st-ll-card ol li { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--text-sm); counter-increment: ll; }
.st-ll-card ol li span { font-size: inherit; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ll-card ol li span::before { content: counter(ll) ". "; color: var(--ink-3); }
.st-ll-card ol li b { font-size: inherit; font-weight: var(--weight-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-ll-card em { margin-top: auto; padding-top: var(--s-4); font-style: normal; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent-ink); }

.st-net-parts tr.is-sum td { border-top: 1px solid var(--line-strong); font-weight: var(--weight-semibold); color: var(--ink); }
.st-net-parts tr.is-total td { background: var(--sun-soft); font-weight: var(--weight-bold); color: var(--ink); font-size: var(--text-lg); }
.st-net-page .st-table small { margin-left: var(--s-2); font-size: var(--text-xs); color: var(--ink-3); }
.st-net-page tr.is-mark td { background: var(--canvas-tint); }
.st-net-page .st-table-wrap { max-width: 860px; }
.st-net-all { max-height: 720px; overflow: auto; }
.st-net-all thead th { position: sticky; top: 0; background: var(--sunken); z-index: 1; }
.st-net-band { max-width: 860px; }
.st-net-near { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.st-net-near a { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); font-variant-numeric: tabular-nums; }
.st-net-near a:hover { border-color: var(--line-strong); text-decoration: none; }
.st-net-near a span { font-size: var(--text-sm); color: var(--ink-3); }
.st-net-near a b { color: var(--ink); font-size: var(--text-md); }
.st-net-near a:hover b { color: var(--accent-ink); }
.st-net-calc .st-yr-calc, .st-net-calc .st-yr-calc-out { max-width: 860px; }

@media (max-width: 1100px) {
  .st-ll-row { grid-template-columns: 30px minmax(170px, 1fr) minmax(0, 1.8fr) 100px 92px; }
  .st-ll-row .st-fl-emp, .st-ll-row.st-fl-head > span:nth-child(5) { display: none; }
  .st-ll-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .st-ll-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); }
  .st-ll-row .st-fl-chart { grid-column: 2 / -1; grid-row: 2; }
  .st-ll-row .st-fl-ads { display: none; }
  .st-ll-cards { grid-template-columns: minmax(0, 1fr); }
  .st-ll-filter { flex-direction: column; align-items: stretch; }
  .st-ll-filter select { min-width: 0; width: 100%; }
  .st-net-near { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.st-ll-table td:not(:nth-child(2)) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-yr-hub .st-ll-card, .st-yr-hub .st-ll-card span { color: var(--ink-2); }
.st-yr-hub .st-ll-card small, .st-yr-hub .st-ll-card ol li span::before { color: var(--ink-3); }
.st-yr-hub .st-ll-card ol li span { color: var(--ink-2); }
.st-net-band .st-band-rail > .st-band-ref { top: -9px; bottom: -9px; border-left: 2px dashed var(--ink); }
.st-net-page .st-table td.is-num, .st-net-page .st-table th.is-num { white-space: nowrap; }
@media (max-width: 700px) {
  .st-ll-row.st-fl-head { display: none; }
  .st-net-page .st-table { font-size: var(--text-sm); }
  .st-net-page .st-table th, .st-net-page .st-table td { padding: var(--s-3) var(--s-3); }
  .st-net-page .st-table th:first-child, .st-net-page .st-table td:first-child { padding-left: var(--s-4); }
  .st-net-parts tr.is-total td { font-size: var(--text-md); }
  .st-net-page .st-table small { display: block; margin-left: 0; }
}
@media (max-width: 700px) {
  .st-net-page .st-table th.is-num { white-space: normal; }
  .st-net-hide4 th:nth-child(4), .st-net-hide4 td:nth-child(4), .st-net-hide2 th:nth-child(2), .st-net-hide2 td:nth-child(2) { display: none; }
}
.st-net-calc .st-yr-calc { margin-bottom: var(--s-5); }
.st-net-calc .st-yr-calc > .st-yr-note { margin: var(--s-3) 0 0; }
.st-net-calc .st-yr-calc-out .st-yr-note { margin: var(--s-4) 0 0; }
.st-ll-card i { margin-top: var(--s-3); font-style: normal; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-ll-card i + ol { margin-top: var(--s-2); padding-top: var(--s-2); }

/* ---- Salary tools: compare two occupations, hourly <-> monthly (2026-09-18) ------------------- */
.st-cmp-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--s-4); max-width: 960px; }
.st-cmp-form .st-yr-calc-field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.st-cmp-form .st-yr-calc-field > span { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-cmp-form .ui-input { width: 100%; }
.st-cmp-swap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-pill); color: var(--ink-2); }
.st-cmp-swap:hover { color: var(--accent-ink); }
.st-cmp-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: var(--text-sm); color: var(--ink-3); }
.st-cmp-out { max-width: 960px; }
.st-cmp-verdict { margin: 0 0 var(--s-6); padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--sun-soft); font-size: var(--text-lg); line-height: 1.55; color: var(--ink); }
.st-cmp-bands { margin: 0 0 var(--s-6); padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.st-cmp-scale { display: flex; justify-content: space-between; margin: 0 0 var(--s-3); padding: 0 120px 0 260px; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-cmp-band { display: grid; grid-template-columns: 244px minmax(0, 1fr) 104px; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; font-variant-numeric: tabular-nums; }
.st-cmp-band + .st-cmp-band { border-top: 1px solid var(--line-soft); }
.st-cmp-band-name { font-weight: var(--weight-medium); color: var(--ink); }
.st-cmp-band b { text-align: right; color: var(--ink); }
.st-cmp-band .st-band-rail { height: 16px; }
.st-cmp-bands .st-chart-foot { margin: var(--s-4) 0 0; }
.st-cmp-table th[scope="row"] { font-weight: var(--weight-regular, 400); color: var(--ink-2); text-align: left; }
.st-cmp-table thead th:not(:first-child), .st-cmp-table td { text-align: right; font-variant-numeric: tabular-nums; }
.st-cmp-table thead th:not(:first-child) { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--ink); }
.st-cmp-table td.is-best { font-weight: var(--weight-bold); color: var(--ink); background: color-mix(in srgb, var(--sea) 9%, var(--card)); }
.st-cmp-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: var(--s-5) 0 0; font-weight: var(--weight-semibold); }
.st-cmp-pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.st-cmp-pairs a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.st-cmp-pairs a:hover { border-color: var(--line-strong); text-decoration: none; }
.st-yr-hub .st-cmp-pairs a b { color: var(--ink); font-weight: var(--weight-medium); font-size: var(--text-md); }
.st-cmp-pairs a b:last-of-type { text-align: right; }
.st-yr-hub .st-cmp-pairs a:hover b { color: var(--accent-ink); }
.st-cmp-pairs a i { font-style: normal; font-size: var(--text-sm); color: var(--ink-3); }
.st-cmp-pairs a small { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-tl-check { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--text-md); color: var(--ink-2); cursor: pointer; }
.st-tl-check input { width: 18px; height: 18px; accent-color: var(--sea); }
.st-tl-table { max-height: 640px; overflow: auto; }
.st-tl-table thead th { position: sticky; top: 0; background: var(--sunken); z-index: 1; }
@media (max-width: 700px) {
  .st-cmp-form { grid-template-columns: minmax(0, 1fr); }
  .st-cmp-swap { justify-self: center; transform: rotate(90deg); }
  .st-cmp-scale { padding: 0; }
  .st-cmp-band { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); }
  .st-cmp-band .st-band-rail { grid-column: 1 / -1; grid-row: 2; }
  .st-cmp-verdict, .st-cmp-bands { padding: var(--s-4); }
  .st-cmp-table { font-size: var(--text-sm); }
  .st-cmp-pairs { grid-template-columns: minmax(0, 1fr); }
  .st-tl-table th:nth-child(3), .st-tl-table td:nth-child(3) { display: none; }
}
.st-cmp-pairs a small { grid-column: 1; }
.st-cmp-pairs a small + small { grid-column: 3; text-align: right; }
.st-cmp-out .st-table-wrap { max-width: none; }
.st-cmp-table tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--text-md); background: none; }
@media (max-width: 700px) {
  .st-cmp-table { table-layout: fixed; width: 100%; }
  .st-cmp-table th, .st-cmp-table td { white-space: normal; overflow-wrap: anywhere; padding: var(--s-3); vertical-align: top; }
  .st-cmp-table th:first-child { width: 38%; padding-left: var(--s-4); }
  .st-cmp-table tbody th[scope="row"] { font-size: var(--text-sm); }
  .st-cmp-table thead th:not(:first-child) { font-size: var(--text-xs); }
}
@media (max-width: 700px) {
  .st-cmp-table th, .st-cmp-table td { overflow-wrap: break-word; hyphens: auto; }
  .st-cmp-table th:first-child { width: 32%; }
}

/* ---- Example letters and CVs per occupation (exempel.mjs, 2026-09-18) --------------------------
   The example sits on the guides' paper component, with the margin notes' quotes marked in the
   text and explained under it. Everything else is the hub and list parts. */
.st-ex-examples .st-yr-seg { margin-bottom: var(--s-5); }
/* the example on the left, why it works beside it (under it on a narrow screen) */
.st-ex-examples .st-yr-var { display: grid; grid-template-columns: minmax(0, 820px) minmax(300px, 1fr); gap: var(--s-5) var(--s-8); align-items: start; }
.st-ex-examples .st-yr-var[hidden] { display: none; }
.st-ex-examples .st-yr-var + .st-yr-var { margin-top: var(--s-10, 48px); }
.st-ex-varh { grid-column: 1 / -1; margin: 0; }
.st-ex-paper { margin: 0; padding: var(--s-8) var(--s-10, 48px); }
.st-ex-copy[hidden] { display: none; }
.st-ex-paper .st-paper-nm { margin-top: var(--s-2); }
.st-ex-body p { font-size: var(--text-lg); line-height: 1.65; }
.st-ex-mark { background: linear-gradient(transparent 58%, var(--sun-soft) 58%); color: inherit; padding: 0 1px; }
.st-ex-mark sup { margin-left: 2px; font-size: 0.68em; font-weight: var(--weight-bold); color: var(--sun-ink); }
.st-ex-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px dashed var(--line); font-size: var(--text-sm); color: var(--ink-3); }
.st-ex-notes { position: sticky; top: calc(var(--st-head-h) + var(--s-5)); margin: 0; padding: var(--s-5) var(--s-6); border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--canvas-tint); }
.st-ex-notes-h { margin: 0 0 var(--s-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.st-ex-notes ol { margin: 0; padding: 0; list-style: none; counter-reset: exn; display: grid; gap: var(--s-4); }
.st-ex-notes li { counter-increment: exn; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--s-3); row-gap: 2px; }
.st-ex-notes li::before { content: counter(exn); grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--sun-soft); color: var(--sun-ink); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.st-ex-notes q { font-style: italic; color: var(--ink-2); font-size: var(--text-md); quotes: "”" "”"; }
.st-ex-notes li span { font-size: var(--text-md); line-height: 1.55; color: var(--ink); }
/* the CV on the same paper */
.st-ex-cv section { margin-top: var(--s-6); }
.st-ex-cv h4 { margin: 0 0 var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); font-family: var(--font); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-ink); }
.st-ex-cv .st-paper-role { font-size: var(--text-md); color: var(--ink-2); margin-bottom: 0; }
.st-ex-job + .st-ex-job { margin-top: var(--s-5); }
.st-ex-cv .st-ex-job-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin: 0; font-size: var(--text-md); }
.st-ex-cv .st-ex-job-h span { flex: none; font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-ex-cv .st-ex-job-at { margin: 2px 0 var(--s-2); font-size: var(--text-sm); color: var(--ink-3); }
.st-ex-cv ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-1); font-size: var(--text-md); line-height: 1.55; color: var(--ink); }
.st-ex-cv ul.st-ex-skills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-ex-skills li { padding: 3px var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--text-sm); }
/* the data block and the advice */
.st-ex-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); align-items: start; }
.st-ex-letterline { max-width: 86ch; margin-top: var(--s-5); }
.st-ex-lists .st-h3 { margin: 0 0 var(--s-4); }
.st-ex-titles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-ex-titles li { padding: 4px var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); font-size: var(--text-sm); color: var(--ink-2); }
.st-ex-employers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.st-ex-employers li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) var(--s-4); font-size: var(--text-md); border-bottom: 1px solid var(--line-soft); }
.st-ex-employers li:last-child { border-bottom: 0; }
.st-ex-employers b { font-variant-numeric: tabular-nums; }
.st-ex-build { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.st-ex-build > div, .st-ex-card { padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.st-ex-build h3 { margin: 0 0 var(--s-3); }
.st-ex-build ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.st-ex-build li { padding-left: var(--s-4); border-left: 3px solid var(--sun); font-size: var(--text-md); line-height: 1.55; color: var(--ink); }
.st-ex-cards { display: grid; gap: var(--s-5); }
.st-ex-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-ex-cards.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-ex-cards.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-ex-card b { display: block; margin-bottom: var(--s-2); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; color: var(--ink); }
.st-ex-card p { margin: 0; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.st-ex-keywords { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.st-ex-keywords li { padding: 6px var(--s-4); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-md); font-weight: var(--weight-medium); }
.st-ll-cards.is-ex-hub { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.st-ll-cards.is-ex-hub .st-ll-card { padding: var(--s-4) var(--s-5); }
.st-yr-examples { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6); margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--sun-soft); font-size: var(--text-md); }
.st-yr-examples b { color: var(--ink); }
.st-yr-examples a { font-weight: var(--weight-semibold); }
@media (max-width: 1100px) { .st-ex-examples .st-yr-var { grid-template-columns: minmax(0, 1fr); } .st-ex-notes { position: static; } .st-ex-cards.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-ex-cards.is-three, .st-ex-build { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .st-ex-paper { padding: var(--s-5); }
  .st-ex-body p { font-size: var(--text-md); }
  .st-ex-two, .st-ex-cards.is-two, .st-ex-cards.is-four { grid-template-columns: minmax(0, 1fr); }
  .st-ex-notes { padding: var(--s-4); }
  .st-ex-cv .st-ex-job-h { flex-direction: column; gap: 0; }
}
@media print { .st-ex-notes, .st-ex-cap button { display: none; } }
.st-ex-cv .st-ex-body p { font-size: var(--text-md); }

/* ---- The help centre (docs/site/templates/help.mjs, web/help.js, PROJECT-LOG §72) -----------
   Front page: a search hero, six first articles, the categories as cards with every article
   listed, and three ways to reach us. Articles get a slim search row and a vote. */
.st-hp-hero .st-h1 { max-width: none; }
.st-hp-hero .st-gh-in { padding-bottom: var(--s-10); }
.st-hp-search { position: relative; margin: var(--s-8) 0 0; max-width: 720px; }
.st-hp-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-hp-search-field { position: relative; display: block; }
.st-hp-search-field svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.st-hp-search input {
  width: 100%; height: 60px; padding: 0 var(--s-5) 0 50px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--card); color: var(--ink);
  font: inherit; font-size: var(--text-lg);
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.05), 0 12px 28px -14px rgba(11, 31, 42, 0.22);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.st-hp-search input::placeholder { color: var(--ink-4); }
.st-hp-search input:hover { border-color: var(--ink-4); }
.st-hp-search input:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring), 0 12px 28px -14px rgba(11, 31, 42, 0.22); }
.st-hp-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.st-hp-results {
  position: absolute; z-index: var(--z-float); top: calc(100% + 8px); left: 0; right: 0;
  max-height: min(60vh, 520px); overflow: auto; padding: var(--s-2);
  background: var(--raised, var(--card)); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
}
.st-hp-results[hidden] { display: none; }
.st-hp-results-status { margin: 0; padding: var(--s-2) var(--s-3); font-size: var(--text-sm); color: var(--ink-3); }
.st-hp-result { display: grid; gap: 2px; padding: var(--s-3); border-radius: var(--r-sm); color: var(--ink); }
.st-hp-result:hover, .st-hp-result[aria-selected="true"] { background: var(--hover); text-decoration: none; }
.st-hp-result[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--sea); }
.st-hp-result b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.st-hp-result span { font-size: var(--text-md); line-height: 1.45; color: var(--ink-2); }
.st-hp-result small { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-ink); }
.st-hp-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--text-sm); color: var(--ink-3); }
.st-hp-suggest[hidden] { display: none; }
.st-hp-suggest > span { margin-right: var(--s-1); }
.st-hp-chip { height: 30px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.st-hp-chip:hover { border-color: var(--line-strong); color: var(--accent-ink); }
.st-hp-hero .st-byline { margin-top: var(--s-5); }

.st-hp-body { max-width: var(--st-wide); margin: 0 auto; padding: var(--s-16) var(--gutter) var(--st-section); display: grid; gap: var(--st-section); }
.st-hp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-8); }
.st-hp-sec-head p { margin: 0; color: var(--ink-3); }

.st-hp-pops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.st-hp-pop {
  position: relative; display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.st-hp-pop:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04), 0 16px 32px -18px rgba(11, 31, 42, 0.22); transform: translateY(-2px); }
.st-hp-pop-n { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--accent-ink); width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-soft); }
.st-hp-pop b { font-family: var(--font-display); font-size: var(--st-h4); line-height: 1.3; font-weight: 650; letter-spacing: -0.015em; }
.st-hp-pop > span:last-child { font-size: var(--text-md); line-height: 1.5; color: var(--ink-2); }

.st-hp-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.st-hp-cat { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); scroll-margin-top: calc(var(--st-head-h) + var(--s-6)); }
.st-hp-cat-head { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; margin-bottom: var(--s-4); }
.st-hp-cat-head p { margin: 2px 0 0; font-size: var(--text-md); line-height: 1.45; color: var(--ink-3); }
.st-hp-cat-title { margin: 0; font-family: var(--font-display); font-size: var(--st-h4); line-height: 1.3; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.st-hp-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-ink); }
.st-hp-ic svg { width: 22px; height: 22px; }
.st-hp-links { list-style: none; margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 2px; }
.st-hp-links a { display: block; padding: 7px var(--s-2); margin: 0 calc(-1 * var(--s-2)); border-radius: var(--r-sm); font-size: var(--text-lg); line-height: 1.4; color: var(--ink); }
.st-hp-links a:hover { background: var(--hover); color: var(--accent-ink); text-decoration: none; }

.st-hp-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.st-hp-contact-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border-radius: var(--r-lg); background: var(--canvas-tint); border: 1px solid var(--line-soft); color: var(--ink); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.st-hp-contact-card:hover { text-decoration: none; border-color: var(--line-strong); background: var(--card); }
.st-hp-contact-card .st-hp-ic { background: var(--card); margin-bottom: var(--s-2); }
.st-hp-contact-card b { font-family: var(--font-display); font-size: var(--st-h4); font-weight: 650; letter-spacing: -0.015em; }
.st-hp-contact-card > span:not(.st-hp-ic) { font-size: var(--text-md); line-height: 1.5; color: var(--ink-2); }
.st-hp-contact-card em { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-style: normal; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.st-hp-contact-card em svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.st-hp-contact-card:hover em svg { transform: translateX(3px); }

/* An article: the search row under the head band, and the vote after the FAQ. */
.st-hp-bar { border-bottom: 1px solid var(--line); background: var(--canvas); }
.st-hp-bar-in { max-width: var(--st-wide); margin: 0 auto; padding: var(--s-3) var(--gutter); display: flex; align-items: center; gap: var(--s-5); }
.st-hp-bar .st-hp-search { margin: 0; flex: 1 1 auto; max-width: 520px; }
.st-hp-bar .st-hp-search input { height: 44px; padding-left: 42px; font-size: var(--text-md); box-shadow: none; border-color: var(--line); background: var(--sunken); }
.st-hp-bar .st-hp-search input:focus { background: var(--card); border-color: var(--focus); box-shadow: var(--focus-ring); }
.st-hp-bar .st-hp-search-field svg { left: 14px; width: 18px; height: 18px; }
.st-hp-bar-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-md); font-weight: var(--weight-semibold); white-space: nowrap; }
.st-hp-bar-all svg { width: 16px; height: 16px; }
.st-hp-vote { margin-top: var(--s-12); padding: var(--s-5) var(--s-6); max-width: var(--st-measure); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--canvas-tint); }
.st-hp-vote[hidden] { display: none; }
.st-hp-vote-q { font-family: var(--font-display); font-size: var(--st-h4); font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.st-hp-vote-buttons { display: flex; gap: var(--s-2); }
.st-hp-vote-buttons .ui-btn { min-width: 64px; }
.st-hp-vote-buttons .ui-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.st-hp-vote-msg { flex: 1 1 100%; margin: 0; font-size: var(--text-md); color: var(--ink-2); }

@media (max-width: 1000px) {
  .st-hp-pops, .st-hp-cats, .st-hp-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .st-hp-pops, .st-hp-cats, .st-hp-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .st-hp-search input { height: 54px; font-size: var(--text-md); }
  .st-hp-body { padding-top: var(--s-10); }
  .st-hp-bar-all { display: none; }
}