/* Jobello — editorial-utility hybrid, green accent */

/* ============================================================
   Redesign v1 foundation — self-hosted webfonts (OFL) + design
   tokens. Lifted from docs/design_handoff_v1/tokens.css. The new
   --jb-* tokens coexist with the legacy tokens below; Phase A
   templates migrate onto them. @font-face alone triggers no
   download — fonts are only fetched once a rule applies them.
   Subset by unicode-range: a Swedish (latin) page never fetches
   the latin-ext files. Served from /fonts/ by nginx.
   ============================================================ */

/* ---- Bricolage Grotesque 800 — display headings ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Geist 400 / 500 / 600 — body, labels, buttons ---- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Geist Mono 500 — counts, %, numerals ---- */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Instrument Serif italic — home hero "magazine" voice ---- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design tokens (daylight palette) ---- */
:root {
  --jb-cream:       #f6f2e9;  /* page background */
  --jb-paper:       #ece6d6;  /* alt section background */
  --jb-surface:     #ffffff;  /* inputs, cards on cream */
  --jb-ink:         #152018;  /* text + 1px rules */
  --jb-ink-soft:    #4f5a51;  /* secondary text, labels */
  --jb-accent:      #2d6a4f;  /* primary green */
  --jb-accent-deep: #1d4d38;  /* hover / bars */
  --jb-accent-soft: #cfe3d3;  /* alert box, active chip */
  --jb-tag:         #dde2d0;  /* skill tags, progress track */
  --jb-danger:      #b91c1c;  /* form errors only */

  --jb-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --jb-font-body:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --jb-font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --jb-font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --jb-h1: 80px;   --jb-h1-m: 38px;
  --jb-h2: 54px;   --jb-h2-m: 32px;
  --jb-h3: 28px;
  --jb-body: 16px;
  --jb-small: 13px;
  --jb-kicker: 11px;

  --jb-radius: 4px;
  --jb-radius-lg: 8px;
  --jb-pill: 999px;
  --jb-gutter: 40px;
  --jb-gutter-m: 20px;
  --jb-maxw: 1180px;
  --jb-bp: 760px;
  --jb-shadow-modal: 6px 6px 0 var(--jb-ink);
}

/* 1. Tokens */
:root {
  --surface: #ffffff;
  --card: #f6f7f8;
  --ink: #1d1d1f;
  --rule: #e4e4e7;
  --muted: #52525b;
  --accent: #1a5f3f;
  --accent-ink: #ffffff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 2rem);
  --measure: 72ch;
  --measure-wide: 960px;
}

/* 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* 3. Base typography */
html {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1, h2 { font-family: var(--serif); }
h3, h4 { font-family: var(--sans); }
h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); margin-bottom: 0.5rem; }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.125rem; margin: 1.25rem 0 0.5rem; }
h4 { font-size: 1rem; margin: 1rem 0 0.25rem; }

p { max-width: var(--measure); }
p + p { margin-top: 0.9rem; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-style: solid; }

small { font-size: 0.8125rem; }
code, kbd, pre, samp { font-family: var(--mono); font-size: 0.9375em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* 4. Layout utilities */
.container,
.container-wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container { max-width: calc(var(--measure) + var(--gutter) * 2); }
.container-wide { max-width: calc(var(--measure-wide) + var(--gutter) * 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;
}

/* 5. Site chrome — editorial shell (redesign v1, A.2) */

/* Page canvas: cream paper + Geist body. The legacy component tokens
   below still drive not-yet-restyled page internals; A.3–A.7 migrate
   each page onto the --jb-* system. */
body {
  background: var(--jb-cream);
  color: var(--jb-ink);
  font-family: var(--jb-font-body);
}

/* Dark login pill ("Logga in" / "Mitt konto"). Phase-A: rendered only
   when PHASE_B is on, but the class lives here so it's ready. */
.jb-btn {
  font-family: inherit; font-size: 15px; font-weight: 600;
  border-radius: var(--jb-radius); padding: 13px 20px;
  cursor: pointer; border: 1.5px solid var(--jb-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.jb-btn--dark {
  background: var(--jb-ink); color: var(--jb-cream); border-color: var(--jb-ink);
  border-radius: var(--jb-pill); padding: 8px 16px; font-size: 13px;
}

.site-header {
  background: var(--jb-cream);
  border-bottom: 1px solid var(--jb-ink);
  padding-block: 20px;
}
.site-header--sticky { position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header__brand { display: inline-flex; align-items: baseline; text-decoration: none; }
.site-header__brand:hover { text-decoration: none; }
.site-header__wordmark {
  font-family: var(--jb-font-display); font-weight: 800;
  font-size: 26px; letter-spacing: -1.2px; line-height: 1;
  color: var(--jb-accent);
}
.site-header__dot { color: var(--jb-ink); }

.site-header__account { display: flex; align-items: center; gap: 10px; }

.site-footer {
  background: var(--jb-cream);
  border-top: 1px solid var(--jb-ink);
  margin-top: 3rem;
  color: var(--jb-ink-soft);
  font-size: var(--jb-small);
}
.site-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding-block: 24px;
}
.site-footer__copy { color: var(--jb-ink-soft); }
.site-footer__links ul { display: flex; gap: 1.25rem; list-style: none; flex-wrap: wrap; }
.site-footer a { color: var(--jb-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--jb-accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.25em; }

/* A.9 fat link hub — top-N landings, the crawlable internal-linking
   backbone. Desktop: an even column grid; the <details> wrappers are
   forced open and non-interactive (the disclosure marker is a mobile-only
   affordance). */
.site-footer__hub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-block: 40px;
  border-bottom: 1px solid var(--jb-rule, var(--jb-ink));
}
.site-footer__col > summary {
  font-family: var(--jb-display, inherit);
  font-weight: 600;
  font-size: 14px;
  color: var(--jb-ink);
  margin-bottom: 0.75rem;
  list-style: none;
}
.site-footer__col > summary::-webkit-details-marker { display: none; }
.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 761px) {
  /* Disclosure is a mobile-only control — pin open on desktop. */
  .site-footer__col > summary { pointer-events: none; }
}

/* Below the single 760px breakpoint the header tightens its padding; only the
   wordmark (+ login pill when PHASE_B) are present. */
@media (max-width: 760px) {
  .site-header { padding-block: 14px; }
  /* Footer hub stacks; each column collapses to its <summary>, tappable
     open via the native disclosure marker. */
  .site-footer__hub { grid-template-columns: 1fr; gap: 0; padding-block: 8px; }
  .site-footer__col { border-bottom: 1px solid var(--jb-rule, var(--jb-ink)); padding-block: 14px; }
  .site-footer__col > summary { cursor: pointer; margin-bottom: 0; }
  .site-footer__col[open] > summary { margin-bottom: 0.75rem; }
}

/* 6. Content primitives */
main { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

article > header { margin-bottom: 1.75rem; }
article section { margin-top: 2.25rem; }

.lead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
  margin-top: 0.5rem;
}

dl { display: grid; grid-template-columns: 1fr; row-gap: 0.5rem; margin-block: 0.75rem; }
dt { color: var(--muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.02em; }
dd { margin: 0; }
@media (min-width: 640px) {
  dl {
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    column-gap: 1.5rem;
    row-gap: 0.6rem;
    align-items: baseline;
  }
}

/* 7. Components */

/* Breadcrumb — editorial (redesign v1, A.2) */
.breadcrumb { margin-bottom: 1.5rem; font-size: var(--jb-small); color: var(--jb-ink-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; gap: 0.5rem; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--jb-ink-soft); opacity: 0.5; }
.breadcrumb a { color: var(--jb-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--jb-accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; }
.breadcrumb li[aria-current="page"] { color: var(--jb-ink); font-weight: 500; }

/* Chip */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.chip {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--card);
  line-height: 1.4;
}

/* Job card (listing variant) */
.job-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow 120ms ease;
}
.job-card + .job-card { margin-top: 0.75rem; }
.job-card:hover { text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.job-card:hover .job-card__title { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; }
.job-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .02em;
  object-fit: cover;
}
.job-card__body { flex: 1; min-width: 0; }
.job-card__title {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  color: var(--ink);
  font-weight: 600;
}
.job-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.875rem; color: var(--muted); }
.job-card__meta time { font-family: var(--mono); font-size: 0.8125rem; }

/* Button primary */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.65rem 1.25rem;
  border-radius: 3px;
  border: 0;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms ease;
}
.btn-primary:hover { filter: brightness(0.92); text-decoration: none; color: var(--accent-ink); }
.btn-primary:active { filter: brightness(0.85); }

.apply-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* AF text_formatted prose rhythm */
.job-detail__description p + p,
.job-detail__description ul,
.job-detail__description ol { margin-top: 1rem; }
.job-detail__description ul,
.job-detail__description ol { padding-left: 1.25rem; max-width: var(--measure); }
.job-detail__description li + li { margin-top: 0.25rem; }
.job-detail__description strong { color: var(--ink); font-weight: 600; }
.job-detail__description h3,
.job-detail__description h4 { margin-top: 1.75rem; }

/* 8. Details / summary (FAQ) */
details { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
summary {
  list-style: none; cursor: pointer; position: relative;
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 600;
  padding-right: 2rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 0.25rem; top: 50%;
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 150ms ease;
}
details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details > *:not(summary) { margin-top: 0.75rem; color: var(--ink); }

/* 8b. Home + listing + hub-index */
/* Hero — editorial (redesign v1, A.3). The home hero speaks in the
   editorial voice (Bricolage Grotesque 800, the prototype default); one word
   picks up the green accent. Other pages keep a plain display hero. */
.hero{padding-block:clamp(1.75rem,4vw,2.75rem);margin-bottom:1.75rem;border-bottom:1px solid var(--jb-ink)}
.hero h1{max-width:20ch}
.hero__cta{margin-top:1.25rem}
/* Editorial voice (the prototype's default "voice": Bricolage Grotesque 800,
   upright, tight tracking) — matches the Claude design hero, NOT the thin
   Instrument-Serif italic the build originally shipped. */
.hero--home .hero__title{
  font-family:var(--jb-font-display);font-style:normal;font-weight:800;
  font-size:clamp(2.6rem,7vw,5rem);line-height:0.95;letter-spacing:-0.03em;
  color:var(--jb-ink);max-width:none;margin:0 0 .75rem;
}
.hero--home .hero__accent{color:var(--jb-accent)}
.hero--home .lead{max-width:34rem;color:var(--jb-ink-soft)}

/* Section heads + hub grids migrated onto the --jb token system. The hub
   grid is a hairline-ruled card matrix (no shadows) — the editorial look. */
.home-section{margin-top:3.5rem}
.home-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;border-bottom:1px solid var(--jb-ink);padding-bottom:.5rem}
.home-section__head h2{margin:0;font-family:var(--jb-font-display);font-weight:800;font-size:var(--jb-h3);letter-spacing:-.5px;color:var(--jb-ink)}
.home-section__more{font-size:13px;white-space:nowrap;color:var(--jb-accent);text-decoration:none;font-weight:500}
.home-section__more:hover{text-decoration:underline;text-underline-offset:.2em}
.hub-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:color-mix(in srgb,var(--jb-ink) 16%,transparent);border:1px solid color-mix(in srgb,var(--jb-ink) 16%,transparent);border-radius:var(--jb-radius);overflow:hidden}
.hub-tile{display:flex;flex-direction:column;gap:.2rem;padding:14px 16px;background:var(--jb-cream);text-decoration:none;color:inherit;transition:background 120ms ease}
.hub-tile:hover{text-decoration:none;background:var(--jb-surface)}
.hub-tile__label{font-weight:600;color:var(--jb-ink)}
.hub-tile__count{font-size:12px;color:var(--jb-ink-soft);font-family:var(--jb-font-mono)}
.field-tile-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* Home explore — ranked discovery block. A pill segmented control (clearly
   a toggle: the active segment is ink-filled) over a compact ranked list
   that reuses the market-block bar language (accent fill on a --jb-tag
   track) + green Geist-Mono counts, so the block matches the rest of the UI. */
.home-explore__bar{display:inline-flex;gap:2px;padding:3px;margin-bottom:1.6rem;
  background:var(--jb-tag);border-radius:var(--jb-pill)}
.explore-seg{appearance:none;border:0;cursor:pointer;
  font-family:var(--jb-font-display);font-weight:800;letter-spacing:-.3px;
  font-size:clamp(.95rem,3.2vw,1.15rem);line-height:1;
  padding:.6rem 1.15rem;border-radius:var(--jb-pill);
  background:transparent;color:var(--jb-ink-soft);
  transition:background 140ms ease,color 140ms ease}
/* Hover only affects the INACTIVE segment — a plain :hover would outrank
   --on (class+pseudo > class) and turn the active label ink-on-ink. */
.explore-seg:not(.explore-seg--on):hover{color:var(--jb-ink)}
.explore-seg--on{background:var(--jb-ink);color:var(--jb-cream)}

/* Single column on mobile; two columns on desktop so the block fills the
   reading-measure container instead of hugging the left with dead space. */
.rank-list{display:grid;grid-template-columns:1fr;gap:1rem 2.75rem}
@media(min-width:640px){.rank-list{grid-template-columns:1fr 1fr}}
.rank-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:baseline;margin-top:.35rem}
.rank-item{display:block;text-decoration:none;color:inherit}
.rank-item:hover{text-decoration:none}
.rank-item:hover .rank-item__label{color:var(--jb-accent-deep)}
.rank-item:hover .rank-bar__fill{background:var(--jb-accent-deep)}
.rank-item__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:.45rem}
.rank-item__label{font-size:15px;font-weight:600;color:var(--jb-ink);
  transition:color 120ms ease}
.rank-item__count{font-family:var(--jb-font-mono);font-size:14px;font-weight:600;
  color:var(--jb-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.rank-item__unit{color:var(--jb-ink-soft);font-weight:500;font-size:11px}
.rank-bar{display:block;height:5px;background:var(--jb-tag);border-radius:3px;overflow:hidden}
.rank-bar__fill{display:block;height:100%;background:var(--jb-accent);border-radius:3px;
  transition:width 220ms ease,background 120ms ease}
.rank-more,.rank-all{background:none;border:0;cursor:pointer;padding:0;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--jb-accent);
  text-decoration:none}
.rank-more:hover,.rank-all:hover{text-decoration:underline;text-underline-offset:.2em}

/* 3-field hero search bar (redesign v1, A.3) */
.search-bar{
  display:grid;grid-template-columns:1.4fr 1fr 1fr auto;
  background:var(--jb-surface);border:1.5px solid var(--jb-ink);
  border-radius:var(--jb-radius);max-width:980px;margin-top:1.5rem;
}
.search-bar__field{
  display:flex;flex-direction:column;gap:2px;padding:10px 14px;min-width:0;
  position:relative;cursor:text;
  border-right:1px solid color-mix(in srgb,var(--jb-ink) 18%,transparent);
}
.search-bar__label{
  font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:1px;color:var(--jb-ink-soft);
}
.search-bar__input,.search-bar__select{
  width:100%;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--jb-ink);
  padding:2px 0 0;
}
.search-bar__select{cursor:pointer}
.search-bar__input::placeholder{color:var(--jb-ink-soft)}
.search-bar__submit{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--jb-accent);color:#fff;border:0;cursor:pointer;
  padding:0 28px;font-family:inherit;font-size:15px;font-weight:600;
  border-radius:0 calc(var(--jb-radius) - 1px) calc(var(--jb-radius) - 1px) 0;
}
.search-bar__submit:hover{background:var(--jb-accent-deep)}
.search-bar__arrow{flex-shrink:0}
.search-bar .ac-dropdown{
  background:var(--jb-surface);border:1.5px solid var(--jb-ink);border-top:0;
  border-radius:0 0 var(--jb-radius) var(--jb-radius);box-shadow:var(--jb-shadow-modal);
  left:-1.5px;right:-1.5px;
}
@media (max-width:760px){
  .search-bar{grid-template-columns:1fr}
  .search-bar__field{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--jb-ink) 18%,transparent)}
  .search-bar__submit{padding:14px 28px;border-radius:0 0 calc(var(--jb-radius) - 1px) calc(var(--jb-radius) - 1px)}
}

/* "Populärt" suggestion chips under the hero search bar (A.3) */
.popular-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:1rem}
.popular-chips__label{font-size:12px;font-weight:600;color:var(--jb-ink-soft);margin-right:2px}
.popular-chip{
  display:inline-flex;align-items:center;border:1px solid var(--jb-ink);
  border-radius:var(--jb-pill);padding:5px 11px;font-size:12px;
  color:var(--jb-ink);text-decoration:none;background:transparent;
  transition:background 120ms ease,color 120ms ease;
}
.popular-chip:hover{background:var(--jb-ink);color:var(--jb-cream);text-decoration:none}
.listing__header{margin-bottom:1.75rem}
.listing__total{color:var(--muted);font-size:.9375rem;margin-top:.35rem}
.listing__total strong{color:var(--ink)}
.listing__summary{color:var(--jb-ink-soft);font-size:.9375rem;line-height:1.55;margin:.5rem 0 0;max-width:var(--measure)}
.landing-prose{margin:0 0 1.75rem}
/* Full container width on desktop (product call). NOTE: the inner <p> needs
   its own override — the global `p{max-width:var(--measure)}` would else keep
   capping each paragraph at 72ch and the block would look unchanged. */
.landing-prose__body{max-width:none;color:var(--jb-ink);font-size:1rem;line-height:1.65}
.landing-prose__body p{margin:0 0 .85rem;max-width:none}
.landing-prose__body p:last-child{margin-bottom:0}
.landing-prose__toggle{display:none;margin-top:.5rem;background:none;border:0;padding:0;color:var(--jb-accent);font:inherit;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
/* Mobile: tease the first lines; "Läs mer" expands. */
@media(max-width:760px){
  .landing-prose__body.is-clamped{max-height:7.1em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
  .landing-prose__toggle{display:inline-block}
}
.hub-expand{border-bottom:0;padding:0;margin-top:.5rem}
.hub-expand summary{font-family:var(--sans);font-size:.875rem;font-weight:500;color:var(--accent);padding-right:1.5rem}
.hub-expand summary::after{border-color:var(--accent)}
.hub-expand--bottom{display:flex;flex-direction:column}
.hub-expand--bottom summary{order:1;margin-top:.5rem}
details[open] .hub-expand__show,details:not([open]) .hub-expand__hide{display:none}
.job-list h2{margin-top:0;margin-bottom:1rem}
.related-hubs+.job-list{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--rule)}
.job-list{margin-top:.5rem}
.empty{color:var(--muted);font-style:italic}
.related-hubs{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.hub-index{display:grid;gap:1.75rem;margin-top:1.5rem}
.letter-section__letter{font-family:var(--serif);font-size:1.5rem;border-bottom:1px solid var(--rule);padding-bottom:.25rem;margin:0 0 .75rem}
.letter-section__list{list-style:none;padding:0;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.letter-section__list li{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.letter-section__list a{text-decoration:none}
.letter-section__list a:hover{text-decoration:underline;text-decoration-style:dotted}
.letter-section__count{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* 8c. Search — hero form, dedicated page form, empty state */
.hero-search,.search-form{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.25rem;max-width:36rem}
.hero-search__wrap{position:relative;display:flex;flex:1 1 16rem;min-width:0;gap:.5rem}
.hero-search__input,.search-form__input{flex:1 1 16rem;min-width:0;padding:.65rem .85rem;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink);font-size:1rem;line-height:1.4}
.hero-search__input:focus,.search-form__input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.search__header{margin-bottom:1.75rem}
.search__cap{margin-top:1.5rem;font-size:.875rem;color:var(--muted);font-style:italic}
.results-more{margin:2rem 0 0;text-align:center}
.results-more__link{display:inline-block;padding:12px 24px;font-size:15px;text-decoration:none}
.search-empty{margin-top:1.5rem;color:var(--muted)}
.search-empty p{max-width:var(--measure)}
.search-empty p+p{margin-top:.75rem}

/* 8d. Autocomplete dropdown */
[x-cloak]{display:none!important}
.ac-dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;background:var(--surface);border:1px solid var(--rule);border-top:0;border-radius:0 0 6px 6px;box-shadow:0 4px 12px rgba(0,0,0,.1);list-style:none;padding:0;margin:0;max-height:20rem;overflow-y:auto}
.ac-group{padding:.4rem .7rem .15rem;font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.ac-option{display:flex;justify-content:space-between;align-items:baseline;padding:.45rem .7rem;font-size:.875rem;cursor:pointer}
.ac-option[aria-selected="true"],.ac-option:hover{background:var(--card)}
.ac-option__count{font-size:.75rem;color:var(--muted);margin-left:.5rem;white-space:nowrap}

/* 8e. Company pages */
.company__header{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:2rem}
.company__header img,.company__header .company__avatar{flex-shrink:0;width:64px;height:64px;border-radius:8px}
.company__avatar{display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:600;color:#fff}
.company__meta{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.company__meta a{color:var(--accent)}

/* 8f. Landing layout (redesign v1, A.4)
   Server renders the full job list; Alpine reorders/show-hides the
   existing .job-card nodes. Two-column results grid (filter rail +
   list) collapses to one column under --jb-bp. Editorial palette:
   cream surfaces, 1px ink rules, green accent, mono numbers. */

/* Card enrichments: skill tags + relative date */
.job-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:.55rem}
.job-card__tag{font-size:11.5px;line-height:1.5;padding:2px 9px;border-radius:var(--jb-pill);background:var(--jb-tag);color:var(--jb-ink);white-space:nowrap}

/* Results header: live count + sort select */
.listing-results{margin-top:1.5rem}
.results-header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:.65rem;border-bottom:1px solid var(--jb-ink)}
.results-header__count{margin:0;font-size:.9375rem;color:var(--jb-ink-soft)}
.results-header__count strong{font-family:var(--jb-font-mono);font-size:1.125rem;color:var(--jb-ink)}
.results-sort{display:flex;align-items:center;gap:.5rem}
.results-sort__label{font-size:var(--jb-kicker);font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--jb-ink-soft)}
.results-sort__select{border:1px solid var(--jb-ink);border-radius:var(--jb-radius);background:var(--jb-surface);color:var(--jb-ink);font-size:14px;font-weight:500;padding:.35rem 1.75rem .35rem .65rem;cursor:pointer;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--jb-ink-soft) 50%),linear-gradient(135deg,var(--jb-ink-soft) 50%,transparent 50%);background-position:right 13px center,right 8px center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* Active filter pills (mobile-friendly clear chips) */
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.active-filter{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--jb-ink);border-radius:var(--jb-pill);background:var(--jb-ink);color:var(--jb-cream);font-size:12px;font-weight:500;padding:4px 11px;cursor:pointer}
.active-filter span{font-size:13px;line-height:1}
.active-filters--facets{margin:0 0 .85rem}
/* Sign-up honeypot: out of sight and reach for people, still in the DOM for bots */
.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
a.active-filter{text-decoration:none}
a.active-filter:hover,a.active-filter:focus-visible{background:var(--jb-cream);color:var(--jb-ink)}
/* Two-column grid: filter rail + job list */
.results-grid{display:grid;grid-template-columns:220px 1fr;gap:2rem;margin-top:1.25rem;align-items:start}
.filter-rail{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:1.25rem}
.filter-group{border:0;border-top:1px solid var(--jb-ink);margin:0;padding:.85rem 0 0}
.filter-group__legend{font-size:var(--jb-kicker);font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--jb-ink);padding:0;margin-bottom:.5rem}
.filter-option{display:flex;align-items:center;gap:.55rem;font-size:14px;color:var(--jb-ink);padding:.25rem 0;cursor:pointer}
.filter-option input{accent-color:var(--jb-accent);margin:0}
.filter-option span:first-of-type{flex:1}
.filter-option__count{font-family:var(--jb-font-mono);font-size:12px;color:var(--jb-ink-soft)}

/* Refine / similar chip rows (shared with hero popular-chips look) */
.refine-chips,.similar-searches{margin-top:2.5rem}
.chip-row__heading{font-family:var(--jb-font-display);font-weight:800;font-size:1.125rem;letter-spacing:-.4px;color:var(--jb-ink);margin:0 0 .85rem}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;border:1px solid var(--jb-ink);border-radius:var(--jb-pill);padding:5px 12px;font-size:13px;color:var(--jb-ink);text-decoration:none;background:transparent;transition:background 120ms ease,color 120ms ease}
.chip:hover{background:var(--jb-ink);color:var(--jb-cream);text-decoration:none}

/* Market block: editorial "Arbetsmarknaden i {ort}" — green kicker +
   Bricolage heading, 3 bordered stat cards with big green numerals, a
   numbered employer list with mini accent bars, demand-skill pills and
   "Största yrkesområden" share bars. */
.market-block{margin-top:3rem;padding:1.75rem 0 0;border-top:1px solid var(--jb-ink)}
.market-block__eyebrow{font-family:var(--jb-font-mono);font-size:var(--jb-kicker);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--jb-accent);margin:0 0 .35rem}
.market-block>h2{font-family:var(--jb-font-display);font-weight:800;font-size:clamp(1.6rem,3.5vw,2.4rem);line-height:1.02;letter-spacing:-1px;color:var(--jb-ink);margin:0 0 1.4rem}
.market-block__city{color:var(--jb-accent)}
.market-block__blurb{color:var(--jb-ink-soft);max-width:46rem;margin:0 0 1.4rem}
.market-block__stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--jb-ink);background:var(--jb-cream);margin:0 0 2.25rem}
.market-stat{padding:1.4rem 1.35rem;border-right:1px solid var(--jb-ink)}
.market-stat:last-child{border-right:0}
.market-stat__label{display:block;font-size:var(--jb-kicker);font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--jb-ink-soft);margin-bottom:.35rem}
.market-stat__num{display:block;font-family:var(--jb-font-display);font-weight:800;font-size:clamp(2.2rem,5vw,3rem);line-height:1;letter-spacing:-2px;color:var(--jb-accent);margin-bottom:.25rem}
.market-stat__caption{display:block;font-size:12px;color:var(--jb-ink-soft)}
/* Marknadspuls: week-over-week trend on the recent-jobs card */
.market-puls{font-weight:600;font-feature-settings:"tnum"}
.market-puls::before{margin-right:.3rem;font-weight:700}
.market-puls--up{color:var(--jb-accent)}
.market-puls--up::before{content:"\2191"}
.market-puls--down{color:var(--jb-ink-soft)}
.market-puls--down::before{content:"\2193"}
.market-puls--flat::before{content:"\2192"}
.market-block__cols{display:grid;grid-template-columns:1.3fr 1fr;gap:2.25rem}
.market-block__col h3{font-size:var(--jb-kicker);font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--jb-ink-soft);margin:0 0 .9rem}
.market-block__col h3.market-cats__heading{margin-top:1.75rem}
/* Numbered employer rows with a mini accent bar */
.market-employers{display:flex;flex-direction:column;gap:.7rem}
.market-employer{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:.9rem}
.market-employer__rank{font-family:var(--jb-font-mono);font-size:13px;font-weight:500;color:var(--jb-ink-soft)}
.market-employer__name{font-size:14px;font-weight:500;color:var(--jb-ink);margin-bottom:.25rem}
.market-employer__roles{font-family:var(--jb-font-mono);font-size:12px;color:var(--jb-ink-soft);white-space:nowrap}
.market-bar{height:4px;background:var(--jb-tag);border-radius:2px;overflow:hidden}
.market-bar__fill{height:100%;background:var(--jb-accent);border-radius:2px}
/* Demand-skill pills */
.market-skills{display:flex;flex-wrap:wrap;gap:6px}
.market-skill{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--jb-ink) 25%,transparent);border-radius:var(--jb-pill);padding:5px 11px;font-size:13px;font-weight:500;color:var(--jb-ink)}
.market-skill__count{font-family:var(--jb-font-mono);font-size:11px;font-weight:600;color:var(--jb-accent)}
/* "Största yrkesområden" share bars */
.market-cats{display:flex;flex-direction:column;gap:.65rem}
.market-cat__head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:.25rem}
.market-cat__label{font-weight:500;color:var(--jb-ink)}
.market-cat__pct{font-family:var(--jb-font-mono);color:var(--jb-ink-soft)}
.market-cats .market-bar__fill{background:var(--jb-accent-deep)}

@media (max-width:760px){
  .results-grid{grid-template-columns:1fr;gap:1.5rem}
  .filter-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:1.25rem 2rem}
  .filter-group{flex:1 1 9rem}
  .market-block__stats{grid-template-columns:1fr}
  .market-stat{border-right:0;border-bottom:1px solid var(--jb-ink)}
  .market-stat:last-child{border-bottom:0}
  .market-block__cols{grid-template-columns:1fr;gap:1.75rem}
}

/* 8g. Job detail (redesign v1, A.5)
   Editorial two-column: prose main + sticky apply rail. Hero carries the
   logo, company/ort/date eyebrow, big display H1 and category pills.
   Below the apply card: market block (shared partial), same-city similar
   jobs and "Liknande sökningar" chips. Collapses to one column at
   --jb-bp; the rail un-sticks and drops below the prose on mobile. */
.job-detail{margin-top:.5rem}

/* Hero */
.job-detail__hero{padding-bottom:1.5rem;border-bottom:1px solid var(--jb-ink);margin-bottom:2rem}
.job-detail__logo{width:64px;height:64px;border-radius:var(--jb-radius);object-fit:cover;margin-bottom:.85rem}
.job-detail__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .65rem;font-size:14px;color:var(--jb-ink-soft)}
.job-detail__eyebrow a{color:var(--jb-ink);font-weight:600;text-decoration:none}
.job-detail__eyebrow a:hover{color:var(--jb-accent);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:.2em}
.job-detail__eyebrow time{font-family:var(--jb-font-mono);font-size:13px}
.job-detail__title{font-family:var(--jb-font-display);font-weight:800;font-size:clamp(1.85rem,4.5vw,2.6rem);line-height:1.08;letter-spacing:-1px;color:var(--jb-ink);margin:0}
.job-detail__hero .chips{margin:1.1rem 0 0}

/* Two-column grid: prose + sticky apply rail */
.job-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.5rem;align-items:start}
.job-detail__main{min-width:0}
.job-detail__main .lead{font-family:var(--jb-font-serif);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--jb-ink);max-width:38rem;margin:0 0 1.5rem;padding-left:1rem;border-left:3px solid var(--jb-accent)}
.job-detail__main>section{margin-top:2.25rem}
.job-detail__main h2{font-family:var(--jb-font-display);font-weight:800;font-size:var(--jb-h3);letter-spacing:-.5px;color:var(--jb-ink);margin:0 0 .85rem}

/* Kompetenser tag section */
.skill-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.skill-tag{font-size:13px;line-height:1.5;padding:4px 12px;border-radius:var(--jb-pill);background:var(--jb-tag);color:var(--jb-ink)}

/* Company blurb */
.job-detail__company p{color:var(--jb-ink-soft);max-width:var(--measure)}

/* Sticky apply card */
.job-detail__rail{position:sticky;top:1.25rem}
.apply-card{border:1px solid var(--jb-ink);border-radius:var(--jb-radius);background:var(--jb-surface);padding:1.35rem}
.apply-card h2{font-family:var(--jb-font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.4px;color:var(--jb-ink);margin:0 0 .85rem}
.apply-card .apply-actions{margin:0 0 .5rem}
/* Full-width, stacked apply buttons so they line up with the full-width
   "Spara jobb" control below (flex items otherwise shrink to text width). */
.apply-card .btn-primary{display:block;width:100%;box-sizing:border-box;text-align:center}
.apply-card__save{display:block;width:100%;margin-top:.6rem;padding:.6rem 1rem;border:1px solid var(--jb-ink);border-radius:var(--jb-radius);background:transparent;color:var(--jb-ink);font-weight:500;cursor:pointer;transition:background 120ms ease,color 120ms ease}
.apply-card__save:hover{background:var(--jb-ink);color:var(--jb-cream)}
.apply-card__meta{display:grid;grid-template-columns:1fr;row-gap:.55rem;margin:1.25rem 0 0;padding-top:1.1rem;border-top:1px solid color-mix(in srgb,var(--jb-ink) 14%,transparent)}
.apply-card__meta dt{font-size:var(--jb-kicker);font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--jb-ink-soft);margin-bottom:-.35rem}
.apply-card__meta dd{margin:0;font-size:14px;color:var(--jb-ink)}
.apply-card__meta time{font-family:var(--jb-font-mono);font-size:13px}

/* Same-city similar jobs */
.similar-jobs{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--jb-ink)}
.similar-jobs>h2{font-family:var(--jb-font-display);font-weight:800;letter-spacing:-.5px;color:var(--jb-ink);margin:0 0 1rem}
.similar-jobs .job-list{display:flex;flex-direction:column;gap:.75rem}
/* Expired (grace-period) job page: banner + similar jobs pulled up */
.job-expired{margin:1.25rem 0 0;padding:1rem 1.25rem;border:1.5px solid var(--jb-ink);border-left:6px solid var(--jb-danger);border-radius:var(--jb-radius);background:var(--jb-paper)}
.job-expired__title{font-family:var(--jb-font-display);font-weight:800;font-size:1.15rem;color:var(--jb-ink);margin:0 0 .25rem}
.job-expired__text{margin:0;color:var(--jb-ink-soft)}
.similar-jobs--expired{margin-top:1.5rem;border-top:0;padding-top:0}
.apply-card__expired{margin:0 0 .75rem;color:var(--jb-ink-soft)}

@media (max-width:760px){
  .job-detail__grid{grid-template-columns:1fr;gap:2rem}
  /* Single column: apply card follows the ad text (source order), not above
     it — read the posting first, then apply at the bottom. */
  .job-detail__rail{position:static}
}

/* 8h. Candidate account page (Phase B) — /se/konto/ (login + shell).
   Rendered dynamically by src/api/auth.py; never on the SSG critical
   path, but the one stylesheet serves it too. Reuses the --jb-* tokens
   and the .jb-btn pill family. */
.jb-btn--ghost{background:transparent;color:var(--jb-ink);border-radius:var(--jb-pill);padding:7px 14px;font-size:13px}
.jb-btn--ghost:hover{background:var(--jb-ink);color:var(--jb-cream)}
.jb-btn--danger{background:var(--jb-danger,#b3261e);color:#fff;border-color:var(--jb-danger,#b3261e);border-radius:var(--jb-pill);padding:8px 16px;font-size:13px}

.konto{max-width:640px;margin-inline:auto}
.account__eyebrow{font-size:var(--jb-kicker);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--jb-accent);margin-bottom:.5rem}
.konto h1{font-family:var(--jb-font-display);font-weight:800;letter-spacing:-.6px;color:var(--jb-ink);margin:0 0 .5rem}
.account__section-title{font-family:var(--jb-font-display);font-weight:800;font-size:var(--jb-h3);letter-spacing:-.4px;color:var(--jb-ink);margin:0 0 .25rem}
.account__section-title--spaced{margin-top:2.5rem}
.account__section-sub{color:var(--jb-ink-soft);font-size:14px;margin:0 0 1rem}

.account__list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.account__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--jb-ink) 16%,transparent);border-radius:var(--jb-radius);background:var(--jb-surface)}
.account__row-main{min-width:0}
.account__row-title{display:block;font-weight:600;color:var(--jb-ink);text-decoration:none}
.account__row-title:hover{text-decoration:underline}
.account__row-meta{display:flex;align-items:center;gap:.4rem;font-size:13px;color:var(--jb-ink-soft);margin-top:.15rem}
.account__dot{width:8px;height:8px;border-radius:50%;background:var(--jb-accent);display:inline-block}
.account__dot--paused{background:color-mix(in srgb,var(--jb-ink) 30%,transparent)}
.account__row-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.account__empty{padding:1.25rem;border:1px dashed color-mix(in srgb,var(--jb-ink) 25%,transparent);border-radius:var(--jb-radius);color:var(--jb-ink-soft);font-size:14px}

.account__add{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin:0 0 1rem}
.account__add-field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 180px}
.account__add-field label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--jb-ink-soft)}
.account__add-field select,.account__add-field input,.account__form input{font-family:inherit;font-size:15px;padding:9px 12px;border:1.5px solid var(--jb-ink);border-radius:var(--jb-radius);background:var(--jb-cream);color:var(--jb-ink)}
.account__ac{position:relative}
.account__ac input{width:100%}

.account__form{display:flex;flex-direction:column;gap:.5rem;max-width:360px;margin-top:1rem}
.account__form label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--jb-ink-soft)}
.account__resend{margin-top:.75rem}
.account__link{background:none;border:none;padding:0;color:var(--jb-accent);font:inherit;text-decoration:underline;cursor:pointer}
.account__link--danger{color:var(--jb-danger,#b3261e)}
.account__error{color:var(--jb-danger,#b3261e);font-size:14px}

.account__logout{margin-top:2.5rem}
.account__danger{margin-top:2rem;padding-top:1.25rem;border-top:1px solid color-mix(in srgb,var(--jb-ink) 14%,transparent)}
.account__danger-box{padding:1.1rem;border:1px solid var(--jb-danger,#b3261e);border-radius:var(--jb-radius);background:color-mix(in srgb,var(--jb-danger,#b3261e) 6%,transparent)}
.account__danger-title{font-weight:700;color:var(--jb-danger,#b3261e);margin-bottom:.35rem}
.account__danger-text{font-size:14px;color:var(--jb-ink);margin:0 0 .85rem}

@media (max-width:760px){
  .account__row{flex-direction:column;align-items:flex-start}
  .account__row-actions{width:100%}
}

/* 8i. In-page overlay (Phase B): login + "bevaka" job-alert modal.
   JS-driven (Alpine); no-JS visitors never see it. Editorial card on the
   --jb-* system, matching the header/footer feel. */
.jb-modal__backdrop{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--jb-ink) 55%,transparent);
}
.jb-modal{
  position:relative;width:100%;max-width:420px;
  background:var(--jb-cream);color:var(--jb-ink);
  border:1.5px solid var(--jb-ink);border-radius:var(--jb-radius-lg);
  box-shadow:var(--jb-shadow-modal);
  padding:28px 24px 24px;
}
.jb-modal__close{
  position:absolute;top:8px;right:12px;
  background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--jb-ink-soft);
}
.jb-modal__close:hover{color:var(--jb-ink);}
.jb-modal__form{display:flex;flex-direction:column;}
.jb-modal__eyebrow{
  font-size:var(--jb-kicker);text-transform:uppercase;letter-spacing:1px;
  color:var(--jb-accent);font-weight:600;margin:0 0 6px;
}
.jb-modal__title{
  font-family:var(--jb-font-display);font-weight:800;letter-spacing:-.5px;
  font-size:var(--jb-h3);color:var(--jb-ink);margin:0 0 8px;
}
.jb-modal__lead{font-size:14px;line-height:1.5;color:var(--jb-ink-soft);margin:0 0 18px;}
.jb-modal__error{
  font-size:13px;color:var(--jb-danger);margin:0 0 12px;
  border-left:2px solid var(--jb-danger);padding-left:10px;
}
.jb-modal__countdown{
  font-size:13px;color:var(--jb-ink-soft);margin:0 0 14px;
  display:flex;align-items:center;gap:6px;
}
.jb-modal__countdown strong{
  font-family:var(--jb-font-mono);font-variant-numeric:tabular-nums;
  font-weight:500;color:var(--jb-accent);
}
.jb-modal__countdown--expired{color:var(--jb-danger);}
.jb-modal__countdown--expired strong{color:var(--jb-danger);}
.jb-modal__label{font-size:13px;font-weight:500;color:var(--jb-ink);margin:0 0 6px;}
.jb-modal__input{
  font-family:inherit;font-size:15px;color:var(--jb-ink);
  background:var(--jb-surface);border:1.5px solid var(--jb-ink);
  border-radius:var(--jb-radius);padding:11px 12px;width:100%;
}
.jb-modal__input:focus{outline:2px solid var(--jb-accent);outline-offset:1px;}
.jb-modal__input--code{
  font-family:var(--jb-font-mono);letter-spacing:6px;font-size:20px;text-align:center;
}
.jb-modal__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;}
.jb-modal__submit{margin-top:16px;}
.jb-modal__actions .jb-modal__submit{margin-top:0;}
.jb-modal__link{
  background:none;border:0;cursor:pointer;align-self:flex-start;
  margin-top:12px;padding:0;font-size:13px;color:var(--jb-accent);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:.2em;
}
.jb-modal__skip{
  font-size:14px;color:var(--jb-ink-soft);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--jb-ink) 30%,transparent);
}
.jb-modal__skip:hover{color:var(--jb-ink);}
.jb-modal__steps{list-style:none;margin:4px 0 14px;padding:0;display:grid;gap:10px;}
.jb-modal__step{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--jb-ink);}
.jb-modal__step-mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;}
.jb-modal__step--done .jb-modal__step-mark{background:var(--jb-accent);color:var(--jb-cream);}
.jb-modal__step--done{color:var(--jb-ink-soft);}
.jb-modal__step--todo .jb-modal__step-mark{border:1.5px solid var(--jb-ink);}
.jb-modal__lead--strong{color:var(--jb-ink);font-weight:600;margin:0;}
.jb-modal__note{font-size:13px;line-height:1.5;color:var(--jb-ink-soft);margin:18px 0 0;}
.jb-modal__inline-link{background:none;border:0;padding:0;font:inherit;color:var(--jb-accent);text-decoration:underline;cursor:pointer;}

/* "Bevaka den här sökningen" trigger in the results header. */
.results-header__tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.results-bevaka{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--jb-accent);
  background:var(--jb-surface);border:1.5px solid var(--jb-accent);
  border-radius:var(--jb-pill);padding:7px 14px;
}
.results-bevaka:hover{background:var(--jb-accent-soft);}

/* 9. Focus + reduced-motion */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* "Menade du gmail.com?" — email-domain typo hint (login + alert forms). */
.jb-email-hint{margin:.35rem 0 0;font-size:.875rem;color:var(--jb-ink)}
.jb-email-hint button{background:none;border:0;padding:0;font:inherit;
  color:var(--jb-accent);text-decoration:underline;cursor:pointer;font-weight:600}

/* Alert CTAs on job pages: market block, apply card, expired ad. */
.market-block__alert{margin-top:24px;padding-top:20px;border-top:1px solid var(--jb-tag);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.market-block__alert-note,.job-expired__alert-note{font-size:13px;color:var(--jb-ink-soft)}
.apply-card__alert{margin:10px 0 0;text-align:center}
.apply-card__alert button{background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--jb-accent);text-decoration:underline;cursor:pointer}
.job-expired__alert{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}