@charset "utf-8";
/* ==========================================================================
   NordicJobs.net — stylesheet
   Single source of truth. Loaded by every page via nj_head() in
   includes/layout.php. Do not re-declare these tokens inline.

   Design direction: Nordic public wayfinding.
   The site helps people navigate two unfamiliar labour markets, so it
   borrows from public-service signage rather than SaaS marketing:
   structural hairlines instead of drop shadows, type doing the
   hierarchy work, and colour reserved almost entirely for one job —
   telling Sweden and Norway apart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink — near-black with a cool cast, used for text and primary buttons. */
  --ink:        #171A1C;
  --ink-2:      #4E565A;   /* secondary text — 7.0:1 on --paper */
  --ink-3:      #6C7579;   /* tertiary/meta — 4.8:1 on --paper */

  /* Ground — pale cool grey. Nordic overcast daylight. */
  --ground:     #ECEEEE;
  --ground-2:   #E3E6E6;   /* recessed surfaces: map canvas, disabled fields */
  --paper:      #FFFFFF;
  --rule:       #D2D7D8;
  --rule-soft:  #E3E7E7;

  /* Country coding. These two hues carry information; they are not decor. */
  --se:         #005B99;
  --se-wash:    #E8F0F6;
  --no:         #A32E28;
  --no-wash:    #F7EBEA;

  /* Subscriber thread — an ochre that reads like a stamp, not a CTA. */
  --gold:       #8A6407;
  --gold-wash:  #F7F1E2;

  --danger:     #A32E28;
  --danger-wash:#F7EBEA;
  --ok:         #1F5C3A;
  --ok-wash:    #E9F1EC;

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;

  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --wrap: 1140px;
  --t: 140ms cubic-bezier(0.2, 0, 0.2, 1);

  /* Legacy token aliases.
     Inline styles across the older pages still name the previous palette.
     Mapping them here means no page can render with an undefined colour
     while its markup is migrated. The mint "aurora" accent resolves to the
     Swedish blue and the amber to the subscriber gold, so a page that has
     not been touched yet still lands inside the new palette.
     Remove an alias once no .php file references it. */
  --fjord:       var(--ink);
  --fjord-light: #2C3134;
  --mist:        var(--ground);
  --panel:       var(--paper);
  --ink-soft:    var(--ink-2);
  --line:        var(--rule);
  --aurora:      var(--se);
  --aurora-dim:  var(--se);
  --amber:       var(--gold);
  --amber-dim:   var(--gold);
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.017em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

/* Long tokens — job IDs, URLs, employer strings — must reflow, never
   push a card sideways. */
.wrap-any { overflow-wrap: anywhere; }

::selection { background: var(--se); color: #fff; }

/* Utility text roles ------------------------------------------------------ */
.label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.muted { color: var(--ink-2); }
.lede { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link --------------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: var(--r);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* --------------------------------------------------------------------------
   3. Focus
   Never removed. One visible treatment used everywhere.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--se);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.nav :focus-visible, .footer :focus-visible {
  outline-color: #fff;
}

/* --------------------------------------------------------------------------
   4. Country tile — the signature element
   A two-letter plate, borrowed from border and vehicle country codes.
   Every place a country appears, it appears as one of these. It replaces
   the flag emoji the site used to lean on, and unlike an emoji it can be
   sized, aligned and coloured from tokens.
   -------------------------------------------------------------------------- */
.ctile {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 18px; padding: 0 5px;
  flex: none;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.055em;
  line-height: 1;
  color: #fff; background: var(--ink-2);
  border-radius: 2px;
  text-transform: uppercase;
  vertical-align: 1px;
}
.ctile--se { background: var(--se); }
.ctile--no { background: var(--no); }
.ctile--lg { min-width: 34px; height: 22px; font-size: 13px; }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink);
  color: #fff;
  border-bottom: 1px solid #000;
}
.nav__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 58px;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  text-decoration: none; color: #fff;
  display: inline-flex; align-items: baseline; gap: 1px;
  margin-right: auto;
  padding: 6px 0;
}
.nav__logo .tld { color: #9AA4A8; font-weight: 500; }

.nav__links { display: flex; align-items: center; gap: var(--s-5); }
.nav__link {
  font-size: 14.5px; color: #C9D0D2; text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
  white-space: nowrap;
}
.nav__link:hover { color: #fff; }
.nav__link[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.nav__link--icon { display: inline-flex; align-items: center; gap: 6px; }

.nav__divider { width: 1px; height: 20px; background: #363C3F; flex: none; }

.nav__burger {
  display: none;
  width: 40px; height: 40px; margin-right: -8px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid #383E41; border-radius: var(--r);
  color: #fff; cursor: pointer;
}

@media (max-width: 900px) {
  .nav__inner { padding: 0 var(--s-4); flex-wrap: wrap; min-height: 54px; }
  .nav__burger { display: inline-flex; }
  .nav__links {
    display: none; order: 3;
    width: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: var(--s-3);
  }
  .nav--open .nav__links { display: flex; }
  .nav__link {
    padding: 13px 2px; font-size: 16px;
    border-bottom: 1px solid #2A2F32;
  }
  .nav__link[aria-current="page"] { border-bottom-color: #2A2F32; color: #fff; }
  .nav__divider { display: none; }
  .nav__links .btn { margin-top: var(--s-3); justify-content: center; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   The primary action is ink, not a colour. Blue and red are spent on
   country coding, so the CTA earns its weight from contrast instead.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 11px 18px;
  min-height: 44px;
  border: 1px solid transparent; border-radius: var(--r);
  background: none; color: inherit;
  text-decoration: none; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
  white-space: nowrap;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #2C3134; }

.btn--outline { border-color: var(--rule); background: var(--paper); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); }

.btn--onink { border-color: #4A5155; color: #fff; }
.btn--onink:hover { border-color: #fff; background: #24292C; }

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #6F5006; }

.btn--danger { background: var(--danger-wash); color: var(--danger); border-color: #E6C9C7; }
.btn--danger:hover { background: #F0DBD9; }

.btn--sm { min-height: 36px; padding: 8px 13px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn .i { flex: none; }

/* Text link with an underline that means it ------------------------------- */
.tlink {
  color: var(--se); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.tlink:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   7. Icons
   Inline SVG, 1.5px stroke, currentColor. See includes/icons.php.
   -------------------------------------------------------------------------- */
.i { display: inline-block; vertical-align: -0.15em; flex: none; }

/* --------------------------------------------------------------------------
   8. Layout shells
   -------------------------------------------------------------------------- */
.shell { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-6); }
@media (max-width: 720px) { .shell { padding: 0 var(--s-4); } }

.page { max-width: 560px; margin: var(--s-7) auto var(--s-9); padding: 0 var(--s-4); }
.page--wide { max-width: 940px; }
.page--prose { max-width: 680px; }

.surface {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.surface__pad { padding: var(--s-5); }
@media (max-width: 720px) { .surface__pad { padding: var(--s-4); } }

.stack > * + * { margin-top: var(--s-4); }
/* A plain hairline as <hr class="divider">, or a labelled separator when it
   carries text — the rules run out to either side of the label. */
hr.divider { height: 1px; background: var(--rule); border: 0; margin: var(--s-5) 0; }
.divider:not(hr) {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0;
  font-size: 13.5px; color: var(--ink-3);
}
.divider:not(hr)::before,
.divider:not(hr)::after {
  content: ''; flex: 1 1 0; height: 1px; background: var(--rule);
}

/* --------------------------------------------------------------------------
   9. Masthead
   Deliberately short. The homepage's job is to get someone into the
   listings, so the tool starts above the fold instead of a decorative
   hero pushing it down.
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-7) 0 var(--s-6);
}
.masthead__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-6);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-7); align-items: center;
}
.masthead h1 {
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 15ch;
  margin: 0 0 var(--s-4);
}
.masthead .lede { max-width: 60ch; margin: 0 0 var(--s-5); }

.masthead__counts {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
}
.count-item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 14px; color: var(--ink-2);
}
.count-item strong {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Nordics locator
   Sweden and Norway in their own hues with their live counts; Denmark and
   Finland behind as outlines, because they are next. Deliberately not flag
   emoji: Windows ships no flag glyphs, so a Swedish flag degrades to the
   bare letters "SE" for a large share of visitors.
   -------------------------------------------------------------------------- */
.masthead__map { justify-self: center; text-align: center; }
.nordics { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }

.nordics__soon path { fill: none; stroke: var(--rule); stroke-width: 5; }
.nordics__se { fill: var(--se); }
.nordics__no { fill: var(--no); }
.nordics__se, .nordics__no { stroke: var(--paper); stroke-width: 3; }


.masthead__soon {
  margin: var(--s-3) 0 0;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.085em;
  text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 900px) {
  .masthead { padding: var(--s-6) 0 var(--s-5); }
  .masthead__inner {
    padding: 0 var(--s-4);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }
  .masthead h1 { font-size: 33px; letter-spacing: -0.022em; max-width: none; }
  .masthead .lede { font-size: 16px; }
  /* On one column the map follows the words rather than pushing them down. */
  .masthead__text { order: 1; }
  .masthead__map  { order: 2; }
  .nordics { max-width: 180px; }
}

/* --------------------------------------------------------------------------
   10. Working area
   -------------------------------------------------------------------------- */
.work {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-9);
  display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: var(--s-6);
  align-items: start;
}
.rail { position: sticky; top: 74px; display: flex; flex-direction: column; gap: var(--s-4); }

@media (max-width: 980px) {
  .work { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-4) var(--s-8); gap: var(--s-5); }
  .rail { position: static; }

  /* On one column the jobs come first. The map, region list and
     subscription card are all secondary to the results themselves, and
     stacking them above the listings buried the jobs under a screen and
     a half of scrolling. */
  .listings { order: 1; }
  .rail     { order: 2; }
}

/* --------------------------------------------------------------------------
   11. Search + filters
   -------------------------------------------------------------------------- */
.searchbar { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.searchbar__field { position: relative; flex: 1 1 240px; min-width: 0; }
.searchbar__field .i-lead {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); pointer-events: none;
}

.field {
  width: 100%;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 11px 13px; min-height: 44px;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t);
}
.field::placeholder { color: var(--ink-3); }
.field:hover { border-color: #BEC5C6; }
.field:focus { outline: none; border-color: var(--se); box-shadow: 0 0 0 3px rgba(0,91,153,0.14); }
.field--lead { padding-left: 38px; }
.field[disabled] { background: var(--ground-2); color: var(--ink-3); cursor: not-allowed; }

select.field {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C7579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

/* Locked control — free users see the shape of what they'd get. */
.locked { position: relative; flex: 1 1 200px; min-width: 0; }
.locked__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--gold-wash);
  border: 1px solid #E4D8B8; border-radius: var(--r);
  font-size: 13.5px; font-weight: 600; color: var(--gold);
  text-decoration: none;
  transition: border-color var(--t), background var(--t);
}
.locked__overlay:hover { border-color: var(--gold); background: #F2E9D2; }

/* Segmented country switch ------------------------------------------------ */
.segment {
  display: inline-flex; border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; background: var(--paper);
}
.segment__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; min-height: 40px;
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  border-right: 1px solid var(--rule);
  transition: background var(--t), color var(--t);
}
.segment__item:last-child { border-right: 0; }
.segment__item:hover { background: var(--ground); color: var(--ink); }
.segment__item[aria-current="true"] { background: var(--ink); color: #fff; font-weight: 600; }

/* Active filter chips ----------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  font-size: 13px; line-height: 1.3;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 100px;
}
.chip > span { overflow-wrap: anywhere; }
.chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -6px -8px -6px 0;
  color: var(--ink-3); border-radius: 100px;
  transition: color var(--t), background var(--t);
}
.chip__x:hover { color: var(--danger); background: var(--danger-wash); }

/* Region list ------------------------------------------------------------- */
.regions { list-style: none; margin: 0; padding: 0; }
.regions__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) 0 var(--s-2);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: var(--s-1);
}
.regions__head:first-child { padding-top: 0; }
.regions a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 8px 10px; min-height: 40px;
  font-size: 14.5px; color: var(--ink); text-decoration: none;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.regions a:hover { background: var(--ground); }
.regions a[aria-current="page"] {
  background: var(--ground); font-weight: 600;
  border-left-color: var(--ink);
}
.regions .n { font-size: 13.5px; color: var(--ink-3); flex: none; }
.regions a[aria-current="page"] .n { color: var(--ink-2); }
.regions .nm { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   12. Listings
   Rows, not floating cards: a hairline-separated register that scans
   top-to-bottom the way a results list should.
   -------------------------------------------------------------------------- */
.list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.list-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.list-head .n { font-size: 14px; color: var(--ink-3); }

.register {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.rec {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  border-left: 3px solid transparent;
  transition: background var(--t), border-left-color var(--t);
}
.rec:last-child { border-bottom: 0; }
.rec:hover { background: #FAFBFB; }
.rec--se:hover { border-left-color: var(--se); }
.rec--no:hover { border-left-color: var(--no); }

.rec__flag { padding-top: 3px; }

.rec__title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -0.012em;
  line-height: 1.28;
  margin: 0 0 3px;
}
.rec__title a { text-decoration: none; }
.rec__title a:hover { text-decoration: underline; text-underline-offset: 2px; }

.rec__employer { font-size: 14.5px; color: var(--ink-2); margin-bottom: 6px; }
.rec__employer--locked {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px;
  color: var(--ink-3); font-size: 14px;
}
.rec__redact {
  display: inline-block; width: 96px; height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 7px, transparent 7px 11px);
}

.rec__teaser {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  margin: 6px 0 8px; max-width: 68ch;
}

.rec__facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px var(--s-3);
  font-size: 13.5px; color: var(--ink-3);
}
.rec__facts .dot { color: var(--rule); }
.rec__facts .place { display: inline-flex; align-items: center; gap: 5px; }

/* Top-right holds the type tag and the save control; the action anchors
   the bottom-right, so the row reads title -> facts across and tag ->
   action down, instead of one sparse stack of three. */
.rec__aside {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3); flex: none;
}
.rec__aside-top { display: flex; align-items: center; gap: var(--s-2); }
.tag {
  font-size: 12.5px; color: var(--ink-2);
  padding: 3px 8px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  white-space: nowrap;
}

.rec__act {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--se);
}
.rec__act:hover { text-decoration: underline; text-underline-offset: 2px; }
.rec__act--locked { color: var(--gold); }

/* Save / bookmark ---------------------------------------------------------- */
.save {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: var(--r);
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.save:hover { color: var(--gold); border-color: var(--gold); }
.save[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: var(--gold-wash); }
.save .i-on { display: none; }
.save[aria-pressed="true"] .i-on { display: block; }
.save[aria-pressed="true"] .i-off { display: none; }

@media (max-width: 640px) {
  .rec {
    grid-template-columns: 27px minmax(0, 1fr);
    padding: var(--s-4);
  }
  .rec__aside {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: space-between;
    margin-top: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule-soft);
  }
}

/* Empty state -------------------------------------------------------------- */
.empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
}
.empty h3 { font-size: 19px; margin-bottom: var(--s-2); }
.empty p { color: var(--ink-2); max-width: 44ch; margin: 0 auto var(--s-5); }

/* --------------------------------------------------------------------------
   13. Map panel
   -------------------------------------------------------------------------- */
.mappanel { overflow: hidden; }
.mappanel__canvas { height: 300px; background: var(--ground-2); }
.mappanel__foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.mappanel__foot h3 { font-size: 14.5px; }
.mappanel__foot .meta { font-size: 13px; }

/* Leaflet overrides — keep the required attribution legible but quiet. */
.leaflet-container { font-family: var(--font-body); background: var(--ground-2); }
.leaflet-container a { color: var(--se); }
.leaflet-control-attribution {
  font-size: 10.5px !important;
  background: rgba(255,255,255,0.82) !important;
  color: var(--ink-3) !important;
  padding: 1px 6px !important;
}
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-bar a {
  color: var(--ink) !important;
  border-bottom-color: var(--rule) !important;
}
.leaflet-popup-content-wrapper { border-radius: var(--r); box-shadow: 0 6px 20px rgba(23,26,28,0.16); }
.leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.45; }
.popup__title { font-family: var(--font-display); font-weight: 600; display: block; margin-bottom: 4px; }

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(0,91,153,0.18); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background: var(--se); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
}
.marker-cluster-large { background: rgba(23,26,28,0.2); }
.marker-cluster-large div { background: var(--ink); }

/* --------------------------------------------------------------------------
   14. Subscriber card
   -------------------------------------------------------------------------- */
.promo {
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.promo h3 { font-size: 18px; color: #fff; margin-bottom: var(--s-2); }
.promo p { font-size: 14.5px; color: #B4BCBF; margin-bottom: var(--s-4); }
.promo ul { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.promo li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; padding: 5px 0; color: #E4E8E9;
}
.promo li .i { color: #7FB3D5; margin-top: 3px; }
.promo .price { font-size: 13.5px; color: #9AA4A8; margin-top: var(--s-3); text-align: center; }

/* --------------------------------------------------------------------------
   15. Pagination
   -------------------------------------------------------------------------- */
.pager {
  display: flex; justify-content: center; align-items: center;
  gap: var(--s-1); margin-top: var(--s-6); flex-wrap: wrap;
}
.pager a, .pager span.gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  font-size: 14.5px; color: var(--ink); text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color var(--t), background var(--t);
}
.pager a:hover { border-color: var(--ink); }
.pager a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager span.gap { border: 0; background: none; color: var(--ink-3); min-width: 22px; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--s-4); }
label {
  display: block;
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
label .req { color: var(--danger); font-weight: 400; }
.help { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.err { font-size: 13.5px; color: var(--danger); margin-top: 6px; font-weight: 600; }
.field--err { border-color: var(--danger); }
.field--err:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(163,46,40,0.14); }

.form-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2);
  margin-top: var(--s-4);
}

/* Flash / notices ---------------------------------------------------------- */
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid; border-radius: var(--r);
  font-size: 14.5px; line-height: 1.5;
  margin-bottom: var(--s-4);
}
.notice .i { margin-top: 2px; }
.notice--ok    { background: var(--ok-wash);     border-color: #C6DACD; color: var(--ok); }
.notice--err   { background: var(--danger-wash); border-color: #E6C9C7; color: var(--danger); }
.notice--info  { background: var(--se-wash);     border-color: #C6DBE9; color: #044A7C; }
.notice--gold  { background: var(--gold-wash);   border-color: #E4D8B8; color: var(--gold); }

/* --------------------------------------------------------------------------
   17. Prose (about, help, terms, privacy, visa)
   -------------------------------------------------------------------------- */
.prose { font-size: 16.5px; line-height: 1.68; color: var(--ink); }
.prose h1 { font-size: 36px; letter-spacing: -0.028em; margin-bottom: var(--s-4); }
.prose h2 {
  font-size: 22px; margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--rule);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--s-5); }
.prose h3 { font-size: 17.5px; margin: var(--s-5) 0 var(--s-2); }
.prose p { margin: 0 0 var(--s-4); max-width: 72ch; }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 1.25em; max-width: 72ch; }
.prose li { margin-bottom: var(--s-2); }
.prose a:not(.btn) {
  color: var(--se); text-decoration: underline; text-underline-offset: 2px;
}
.prose strong { font-weight: 600; }
.prose__lede {
  font-size: 19px; line-height: 1.55; color: var(--ink-2);
  margin-bottom: var(--s-6); max-width: 62ch;
}
@media (max-width: 720px) { .prose h1 { font-size: 28px; } .prose__lede { font-size: 17px; } }

/* Definition rows — used for job detail facts and account summaries. */
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: 14.5px; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   18. Tables (admin)
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rule-soft); }
table.data th {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  background: var(--ground); white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #FAFBFB; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink); color: #9AA4A8;
  padding: var(--s-7) 0 var(--s-6);
  margin-top: auto;
}
.footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between;
}
.footer__brand { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; }
.footer__note { font-size: 13.5px; line-height: 1.55; max-width: 46ch; margin-top: var(--s-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: flex-start; }
.footer__links a {
  font-size: 14px; color: #C9D0D2; text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.footer__links a:hover { color: #fff; border-bottom-color: #4A5155; }
.footer__legal {
  max-width: var(--wrap); margin: var(--s-6) auto 0; padding: var(--s-4) var(--s-6) 0;
  border-top: 1px solid #2A2F32;
  font-size: 13px; color: #798388;
}
@media (max-width: 720px) {
  .footer__inner { padding: 0 var(--s-4); }
  .footer__legal { padding: var(--s-4) var(--s-4) 0; }
}

/* --------------------------------------------------------------------------
   20. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  .nav, .footer, .rail, .pager, .promo { display: none !important; }
  body { background: #fff; }
  .register, .surface { border-color: #bbb; }
}

/* --------------------------------------------------------------------------
   Local-language terms
   English is shown first because our readers do not read Swedish or
   Norwegian. The original is kept within reach — in parentheses where
   there is room, otherwise on the title attribute — because it is the
   wording they will meet again on the employer's own application page.
   -------------------------------------------------------------------------- */
.term { border-bottom: 1px dotted var(--ink-3); cursor: help; }
/* Inside a tag or chip the English stands on its own and the border already
   frames it, so the dotted rule is noise. The original stays on the title
   attribute as a bonus rather than as required information. */
.tag .term, .chip .term { border-bottom: 0; cursor: inherit; }
.term-orig { color: var(--ink-3); font-style: normal; }

/* --------------------------------------------------------------------------
   23. Job detail
   -------------------------------------------------------------------------- */
.jobpage {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s-5) var(--s-6) var(--s-9);
  display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--s-6);
  align-items: start;
}
.jobpage__side { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 74px; }
@media (max-width: 980px) {
  .jobpage { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) var(--s-4) var(--s-8); gap: var(--s-5); }
  .jobpage__side { position: static; }
}

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13.5px; color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.crumbs .sep { color: var(--rule); }

.jobhead { padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-5); }
.jobhead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.jobhead h1 {
  font-size: 31px; line-height: 1.12; letter-spacing: -0.024em; font-weight: 700;
  margin: 0 0 var(--s-2); max-width: 24ch;
}
.jobhead__country { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.jobhead__employer { font-size: 16.5px; color: var(--ink-2); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.jobhead__employer img { height: 26px; width: auto; border-radius: 3px; }
.jobhead__pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-2);
  padding: 5px 11px;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 100px;
}
.pill--place { border-color: #C6DBE9; background: var(--se-wash); color: #044A7C; }
@media (max-width: 720px) { .jobhead h1 { font-size: 25px; } }

/* Paywall gate ------------------------------------------------------------ */
.gate { position: relative; }
.gate__preview {
  max-height: 190px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
          mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.gate__cta {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper);
  padding: var(--s-5); margin-top: var(--s-3);
}
.gate__cta h3 { font-size: 19px; margin-bottom: var(--s-2); }
.gate__cta p { color: var(--ink-2); font-size: 15px; margin-bottom: var(--s-4); max-width: 52ch; }
.gate__cta-btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Apply card -------------------------------------------------------------- */
.applycard { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: var(--s-5); }
.applycard h3 { color: #fff; font-size: 17px; margin-bottom: var(--s-2); }
.applycard p { font-size: 14.5px; color: #B4BCBF; margin-bottom: var(--s-4); }
.applycard .btn { width: 100%; }
.applycard .btn + .btn { margin-top: var(--s-2); }
.applycard__note {
  display: flex; align-items: center; gap: 7px;
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid #2F3538;
  font-size: 13px; color: #9AA4A8;
}

.jobmap { height: 210px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); }

/* Climate panel ----------------------------------------------------------- */
.climate__now { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.climate__now .glyph { color: var(--ink-2); flex: none; }
.climate__temp { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1.1; }
.climate__desc { font-size: 13.5px; color: var(--ink-3); }
.climate__row {
  display: flex; flex-wrap: wrap; gap: 5px var(--s-3);
  font-size: 13px; color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.climate__row span { display: inline-flex; align-items: center; gap: 5px; }
.climate__chart { margin: var(--s-2) 0 var(--s-3); }
.climate__src { font-size: 12px; color: var(--ink-3); margin-top: var(--s-2); }
.climate__legend {
  display: flex; flex-wrap: wrap; gap: 4px var(--s-3);
  font-size: 12px; color: var(--ink-3); margin: var(--s-2) 0 0;
}
.climate__legend span { display: inline-flex; align-items: center; gap: 5px; }
.climate__legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.climate__split { border-top: 1px solid var(--rule-soft); margin-top: var(--s-4); padding-top: var(--s-4); }

/* --------------------------------------------------------------------------
   22. Compatibility layer
   Class names inherited from the previous stylesheet. Keeping them mapped
   means every page picks up the new design immediately; page markup is
   being migrated to the canonical classes above one file at a time.
   Delete a rule here once no page uses that class.
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
@media (max-width: 720px) { .card { padding: var(--s-5); } }
.card h1 { font-size: 27px; letter-spacing: -0.024em; margin: 0 0 6px; }
.card .subtitle { color: var(--ink-2); font-size: 15.5px; margin: 0 0 var(--s-5); }

.page.wide { max-width: 940px; }

/* Legacy button names map onto the new hierarchy. The old palette had two
   competing accent buttons (aurora/amber); both now resolve to the single
   ink primary, with the subscriber path kept on gold. */
.btn--aurora { background: var(--ink); color: #fff; }
.btn--aurora:hover { background: #2C3134; }
.btn--amber { background: var(--gold); color: #fff; }
.btn--amber:hover { background: #6F5006; }
.btn--ghost { border-color: #4A5155; color: #fff; }
.btn--ghost:hover { border-color: #fff; background: #24292C; }

/* Bare form controls on pages not yet using .field */
/* Scoped away from .field so these never out-specify the canonical
   modifiers (.field--lead sets its own padding and would lose to a
   bare attribute selector otherwise). */
input[type="email"]:not(.field), input[type="password"]:not(.field),
input[type="text"]:not(.field), input[type="search"]:not(.field),
input[type="url"]:not(.field), input[type="number"]:not(.field),
textarea:not(.field), select:not(.field) {
  width: 100%;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 11px 13px; min-height: 44px;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t);
}
textarea:not(.field) { min-height: 110px; line-height: 1.55; resize: vertical; }
input:not(.field):focus, textarea:not(.field):focus, select:not(.field):focus {
  outline: none; border-color: var(--se);
  box-shadow: 0 0 0 3px rgba(0,91,153,0.14);
}
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px; min-height: 0; padding: 0;
  accent-color: var(--se); vertical-align: -3px;
}

.form-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2);
  margin-top: var(--s-4);
}
.form-footer a { color: var(--se); text-decoration: underline; text-underline-offset: 2px; }

/* Bare <footer> on pages not yet using .footer */
body > footer:not(.footer) {
  border-top: 1px solid var(--rule);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  font-size: 13.5px; color: var(--ink-3);
}
body > footer:not(.footer) a { color: var(--se); }