/* Global Job Listings - shared styles (desktop + mobile). Layout lives in desktop.css / mobile.css. */

/* Themes ported from cciv3 (js/theme.js + css/theme-variables.css): light, dark, grayscale-light,
   grayscale-dark, neutral. <html> carries data-theme (which one) and data-mode (light|dark, for
   rules that only care about the brightness). Light is also the :root default. */
:root {
  color-scheme: light;
  --bg: #f5f5f5;
  --surface: #f8f9fa;
  --surface-2: #e6e6e6;
  --text: #212529;
  --muted: #5b6b80;
  --border: #d4d4d4;
  --accent: #3a6f9c;
  --accent-ink: #ffffff;
  --focus: #2c5f8a;
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 14px rgb(16 24 40 / 8%);
  --radius: 12px;
  /* Button scale (the values the app already uses most): new buttons and bars use these, not their own numbers */
  --btn-h-sm: 36px;   /* inline / compact */
  --btn-h: 40px;      /* default (.btn) */
  --btn-h-lg: 46px;   /* footer bars and primary actions on a phone */
  --btn-radius: 10px;
  --btn-pad-x: 18px;
  --fab-size: 44px;   /* round floating buttons */
  --bar-pad-y: 10px;  /* footer bar: top/bottom (plus the safe area) and sides */
  --bar-pad-x: 16px;
  --font:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --surface: #2a2a2a;
  --surface-2: #333333;
  --text: #e0e0e0;
  --muted: #aaaaaa;
  --border: #434343;
  --accent: #66b3ff;
  --accent-ink: #1e1e1e;
  --focus: #8cc6ff;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px rgb(0 0 0 / 35%);
}
:root[data-theme="grayscale-light"] {
  color-scheme: light;
  --bg: #f1f1f1;
  --surface: #eeeeee;
  --surface-2: #e4e4e4;
  --text: #333333;
  --muted: #666666;
  --border: #cccccc;
  --accent: #555555;
  --accent-ink: #ffffff;
  --focus: #333333;
}
:root[data-theme="grayscale-dark"] {
  color-scheme: dark;
  --bg: #212121;
  --surface: #242424;
  --surface-2: #2e2e2e;
  --text: #d8d8d8;
  --muted: #999999;
  --border: #434343;
  --accent: #b0b0b0;
  --accent-ink: #1e1e1e;
  --focus: #cccccc;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 18px rgb(0 0 0 / 35%);
}
:root[data-theme="neutral"] {
  color-scheme: dark;
  --bg: #3a3d42;
  --surface: #34373c;
  --surface-2: #2e3034;
  --text: #d3d4d6;
  --muted: #9a9ca0;
  --border: #4a4d52;
  --accent: #6b8fad;
  --accent-ink: #101418;
  --focus: #9bb8d2;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 18px rgb(0 0 0 / 28%);
}
/* The hue-coded parts (country cards, region chips, headers, tags) go colourless in the grayscale themes. */
:root[data-theme^="grayscale"]
  :is(
    .ccard,
    .rbtn,
    .cv-head,
    .tag,
    .jd-head,
    .viewsel button[aria-pressed="true"]
  ) {
  filter: grayscale(1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Thin scrollbars throughout the app */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font: 16px/1.5 var(--font);
  color: var(--text);
  background: var(--bg);
}
h1,
h2,
h3,
p,
ul {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
a {
  color: inherit;
}
img {
  display: block;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.gjl-busy {
  cursor: progress;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.btn:hover {
  background: var(--surface-2);
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: var(--accent);
  filter: brightness(1.08);
}
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Panel heads, search, counts ---------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 24px 40px;
}
/* The region line only shows in the desktop List (desktop.css) */
.ccard-region {
  display: none;
}
/* List view of the countries panel (Settings > Layout > List): one row per country, in a narrow centred
   column like whattostudy's search-result lists (640px of rows + the 6px item padding either side) */
[data-view="list"] #grid-countries {
  max-width: 652px;
  margin-left: auto;
  margin-right: auto;
}
[data-view="list"] #grid-countries .item {
  width: 100%;
  padding: 4px 6px;
}
[data-view="list"] #grid-countries .ccard {
  height: auto;
  min-height: 56px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 8px 14px;
}
[data-view="list"] #grid-countries .ccard-top,
[data-view="list"] #grid-countries .ccard-foot {
  display: contents;
}
[data-view="list"] #grid-countries .ccard-top .flag {
  order: -2;
  margin: 0;
}
[data-view="list"] #grid-countries .ccard-code {
  order: -1; /* flag, then the code, then the name */
}
[data-view="list"] #grid-countries .ccard-name {
  flex: 1;
  -webkit-line-clamp: 1;
}
[data-view="list"] #grid-countries .ccard-meta {
  min-width: 7.5rem;
  justify-content: flex-end;
}
[data-view="list"] #grid-countries .ccard-n {
  font-size: 1.5rem;
}

/* The countries/regions panel scrolls as a whole: its content fades at the top and bottom edges. The fades
   fit inside the .wrap padding (22px top / 40px bottom), so nothing is dimmed at rest. */
#main-countries {
  --fade-top: 16px;
  --fade-bottom: 24px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    transparent 100%
  );
}
.panel-title {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.panel-sub {
  color: var(--muted);
  margin-top: 2px;
}
.panel-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-bottom: 14px;
}
.panel-top .grow {
  flex: 1 1 260px;
}
/* Countries panel: a bold question as the title */
#main-countries .panel-title {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* wide screens: title left, search right beside it */
@media (min-width: 900px) {
  .panel-top {
    display: grid;
    grid-template-columns: auto minmax(0, 520px) 1fr;
    column-gap: 32px;
  }
  .panel-top .search {
    grid-column: 2;
    max-width: none;
  }
}
.search {
  position: relative;
  display: block;
  flex: 1 1 320px;
  max-width: 520px;
}
.search .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.search input::placeholder {
  color: var(--muted);
  font-style: italic;
}
.count {
  color: var(--muted);
  font-size: 0.92rem;
  min-height: 1.4em;
}
.empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- Region buttons ---------- */
.region-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.rbtn {
  --r-bg: hsl(var(--h) 70% 92%);
  --r-bd: hsl(var(--h) 55% 74%);
  --r-ink: hsl(var(--h) 60% 16%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--r-bd);
  border-radius: 999px;
  background: var(--r-bg);
  color: var(--r-ink);
  font-weight: 600;
}
.rbtn:hover {
  border-color: hsl(var(--h) 60% 40%);
}
.rbtn.is-active {
  background: hsl(var(--h) 60% 30%);
  border-color: hsl(var(--h) 60% 30%);
  color: #fff;
}
.rbtn.is-active::before {
  content: "✓";
  font-weight: 800;
}
.rbtn--all {
  --h: 220;
  --r-bg: var(--surface);
  --r-bd: var(--border);
  --r-ink: var(--text);
}
.rbtn--all.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
:root[data-mode="dark"] .rbtn {
  --r-bg: hsl(var(--h) 38% 21%);
  --r-bd: hsl(var(--h) 34% 36%);
  --r-ink: hsl(var(--h) 60% 92%);
}
:root[data-mode="dark"] .rbtn:hover {
  border-color: hsl(var(--h) 60% 66%);
}
:root[data-mode="dark"] .rbtn.is-active {
  background: hsl(var(--h) 55% 34%);
  border-color: hsl(var(--h) 65% 68%);
  color: #fff;
}
:root[data-mode="dark"] .rbtn--all {
  --r-bg: var(--surface);
  --r-bd: var(--border);
  --r-ink: var(--text);
}
:root[data-mode="dark"] .rbtn--all.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* ---------- Muuri grid + country cards ---------- */
.grid {
  position: relative;
  margin: 0 -6px;
}
.item {
  position: absolute;
  display: block;
  margin: 0;
  padding: 6px;
  z-index: 1;
  width: 16.6667%;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
}

.ccard {
  --card-bg: hsl(var(--h) 70% 92%);
  --card-bd: hsl(var(--h) 55% 78%);
  --card-ink: hsl(var(--h) 60% 15%);
  --card-mut: hsl(var(--h) 35% 30%);
  --card-faint: hsl(
    var(--h) 48% 74%
  ); /* the job count: a deeper tint of the card, not an ink colour */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  height: 116px;
  padding: 12px 14px;
  background: var(--card-bg);
  color: var(--card-ink);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.ccard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
:root[data-mode="dark"] .ccard {
  /* Dark: near-neutral surface, the region hue shows only as a tinted border and number */
  --card-bg: hsl(var(--h) 12% 19%);
  --card-bd: hsl(var(--h) 32% 34%);
  --card-ink: hsl(0 0% 93%);
  --card-mut: hsl(var(--h) 22% 74%);
  --card-faint: hsl(var(--h) 38% 52%);
}
.ccard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0; /* a long name is clamped inside the space that is left, never pushing the footer down */
  overflow: hidden;
}
.ccard-top .flag {
  margin-top: 1px;
}
.ccard-foot {
  flex: none;
  display: flex;
  align-items: flex-end; /* the bottom of the count and the bottom of the code badge line up */
  justify-content: space-between;
  gap: 8px;
  min-height: 2.5rem; /* same footer height on every card, so baselines match across cards */
}
.ccard-code {
  font: 800 0.72rem/1 var(--font);
  letter-spacing: 0.08em;
  color: var(--card-mut);
  padding: 3px 6px;
  border: 1px solid var(--card-bd);
  border-radius: 5px;
}
.ccard-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccard-meta {
  display: flex;
  align-items: center; /* "jobs" sits at the vertical middle of the big number */
  gap: 5px;
  color: var(--card-mut);
  font-size: 0.85rem;
  font-weight: 600;
}
.ccard-n {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--card-faint);
}
.ccard-w {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--card-mut);
  opacity: 0.85;
}

.flag {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  background: hsl(var(--h) 40% 84%);
  border: 1px solid hsl(var(--h) 40% 60% / 60%);
}
.flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flag-code {
  font: 800 10px/1 var(--font);
  letter-spacing: 0.04em;
  color: hsl(var(--h) 60% 15%);
}
:root[data-mode="dark"] .flag {
  background: hsl(var(--h) 30% 30%);
}
:root[data-mode="dark"] .flag-code {
  color: hsl(var(--h) 60% 94%);
}

/* ---------- Country detail ---------- */
.cv {
  --pad: 24px;
}
.cv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Bar is full width; crumb + view toggle are inset to the app width (1280px, same as .cv-body) */
  padding: 8px max(var(--pad), calc((100% - 1280px) / 2 + var(--pad)));
  background: hsl(var(--h) 70% 92%);
  border: 1px solid hsl(var(--h) 55% 78%);
  border-width: 0 0 1px;
  color: hsl(var(--h) 60% 14%);
}
:root[data-mode="dark"] .cv-head {
  background: hsl(var(--h) 12% 17%);
  border-color: hsl(var(--h) 32% 32%);
  color: hsl(0 0% 93%);
}
.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 1.05rem;
  padding-left: 2rem;
}
.crumb-region {
  border: 0;
  background: none;
  padding: 4px 2px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}
.crumb-sep {
  opacity: 0.6;
  font-weight: 700;
}
.crumb-country {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  min-width: 0;
}
.crumb-country span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewsel {
  display: inline-flex;
  margin-right: 2rem;
  border: 1.5px solid hsl(var(--h) 45% 55% / 70%);
  border-radius: 10px;
  overflow: hidden;
}
.viewsel button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 600;
}
.viewsel button + button {
  border-left: 1.5px solid hsl(var(--h) 45% 55% / 70%);
}
.viewsel button[aria-pressed="true"] {
  background: hsl(var(--h) 60% 30%);
  color: #fff;
}
:root[data-mode="dark"] .viewsel button[aria-pressed="true"] {
  background: hsl(var(--h) 55% 38%);
}

.cv-body {
  padding: 20px var(--pad) 40px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Filters */
.fgroup + .fgroup {
  margin-top: 20px;
}
.fh {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.fopt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.3;
}
.fopt:hover {
  background: var(--surface-2);
}
.fopt input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: hsl(var(--h) 60% 36%);
}
.fopt span {
  flex: 1;
}
.fopt em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.85rem;
}
.fclear-bar {
  /* Pinned at the very top of the filters panel while the filters scroll underneath */
  position: sticky;
  top: -16px; /* sticky is measured from the panel's padding edge, so offset by its 16px padding */
  z-index: 2;
  margin: -16px -16px 6px;
  padding: 12px 16px 10px;
  background: var(--surface);
}
.fclear {
  /* Always visible; greyed out until a filter is on */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  width: 100%;
  min-height: 40px;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}
.fclear .icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.fclear:disabled {
  opacity: 0.45;
  cursor: default;
}
.fclear:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Jobs */
.jl-count {
  color: var(--muted);
  margin-bottom: 12px;
}
.jl-count strong {
  color: var(--text);
}
/* "N jobs" sits in the country header right after the country name (same look as the country card: big number, small word); the Grid/List toggle stays at the far right */
.cv-head .jl-count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 0 0;
  padding-left: 16px;
  border-left: 1px solid hsl(var(--h) 55% 78%);
  line-height: 1;
  color: inherit;
}
:root[data-mode="dark"] .cv-head .jl-count {
  border-left-color: hsl(var(--h) 34% 30%);
}
.cv-head {
  --card-mut: hsl(var(--h) 35% 30%);
  --card-faint: hsl(
    var(--h) 48% 74%
  ); /* same tint as the job count on the country card */
}
:root[data-mode="dark"] .cv-head {
  --card-mut: hsl(var(--h) 22% 74%);
  --card-faint: hsl(var(--h) 38% 52%);
}
.cv-head .jl-n {
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--card-faint);
}
.cv-head .jl-w {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--card-mut);
  opacity: 0.85;
}
#job-results.is-loading {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.jobs {
  display: grid;
  gap: 14px;
}
.jcard {
  position: relative;
  width: 100%;
  text-align: left;
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}
.jcard:hover {
  box-shadow: var(--shadow);
  border-color: hsl(var(--h) 45% 55%);
  transform: translateY(-1px);
}
.jc-av {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex: none;
  background: hsl(var(--h) 60% 30%);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}
.jc-head {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.jc-main {
  display: grid;
  min-width: 0;
}
.jc-title {
  font-weight: 700;
  line-height: 1.3;
}
.jc-co {
  color: var(--muted);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  background: hsl(var(--h) 70% 92%);
  color: hsl(var(--h) 60% 15%);
}
:root[data-mode="dark"] .tag {
  background: hsl(var(--h) 38% 24%);
  color: hsl(var(--h) 60% 94%);
}
.jc-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.88rem;
}
.jc-pay {
  font-weight: 600;
  color: var(--text);
}
/* The "Posted:" label is for the phone cards (mobile.css) */
.jc-lbl {
  display: none;
}
/* No salary on the card: the posted date stays on the right */
.jc-when:only-child {
  margin-left: auto;
}
.jc-desc {
  display: none; /* only the desktop List shows it (desktop.css) */
}
.jc-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* One line that scrolls sideways; fade only the right edge (a mask, since the tags are opaque) */
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 14px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - 14px),
    transparent 100%
  );
}
.jc-tags::-webkit-scrollbar {
  display: none;
}
.jc-tags .tag {
  flex: none;
  white-space: nowrap;
}

/* Grid view (default) */
[data-view="grid"] .jobs {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 1fr; /* every card is as tall as the tallest */
}
[data-view="grid"] .jcard {
  align-content: start;
  height: 100%;
}
[data-view="grid"] .jc-title {
  /* two lines reserved, so the rows below line up from card to card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The room for a two-line title is kept on the whole title + company block (centred), not between the two lines */
[data-view="grid"] .jc-main {
  min-height: 4rem;
  align-content: center;
}
/* List view */
[data-view="list"] .jobs {
  grid-template-columns: 1fr;
  gap: 8px;
}
[data-view="list"] .jcard {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.5fr) minmax(0, 1.3fr) auto;
  align-items: center;
  padding: 12px 16px;
  gap: 14px;
}
[data-view="list"] .jcard .jc-tags {
  display: none;
}
[data-view="list"] .jc-foot {
  display: contents;
}
[data-view="list"] .jc-when {
  white-space: nowrap;
  text-align: right;
}

/* Job detail (Emerge flyout) */
#wtsDialog {
  background: var(--surface);
  color: var(--text);
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100dvh;
}
#wtsDialog .dialog-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
#wtsDialog .close-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 600;
}
#wtsDialog .close-btn:hover {
  background: var(--surface-2);
}
#wtsDialog .dialog-body {
  overflow-y: auto;
}
/* Flyout mode (job detail): the shared header is hidden and the detail scrolls inside its own panel */
#wtsDialog .dialog-header.dialog-header--hidden {
  display: none;
}
#wtsDialog .dialog-body.dialog-body--flyout {
  overflow: hidden;
  padding: 0;
}
.topic-flyout-body {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.topic-flyout-body .program-detail-panel,
.jd {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.jd-bar {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 10px 0 12px;
}
/* Round close button, centred at the top of the flyout */
.jd-x {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.jd-x:hover {
  background: var(--surface-2);
  border-color: var(--muted);
}
.jd-x .icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
/* Share button, right side of the flyout top bar */
.jd-bar {
  position: relative;
}
.jd-bar .jd-share {
  position: absolute; /* a quarter of the bar in from the right: halfway between the centre and the right edge */
  left: 75%;
  top: 50%;
  translate: -50% -50%;
}
.jd-share {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.jd-share:hover {
  background: var(--surface-2);
  border-color: var(--muted);
}
.gjl-toast {
  position: fixed;
  inset: auto auto 28px 50%;
  margin: 0;
  border: 0;
  translate: -50% 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease;
}
.gjl-toast.is-on {
  opacity: 1;
  translate: -50% 0;
}
.jd-apply-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 12px;
}
.jd-apply-row .btn {
  min-width: 220px;
}
/* Emerge flyout animation "slide-mini": a short vertical slide with a fade (from the top or the bottom edge) */
dialog[data-animation="slide-mini"][data-direction="top"]:not([data-mode="notification"]) {
  transform: translate3d(0, -25%, 0);
  opacity: 0;
}
dialog[data-animation="slide-mini"][data-direction="bottom"]:not([data-mode="notification"]) {
  transform: translate3d(0, 25%, 0);
  opacity: 0;
}
dialog[data-animation="slide-mini"][data-direction]:not([data-mode="notification"]).slide-in {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/* Emerge flyout animation: a short slide in from the right with a fade, like Traverse's slide-x-mini (see assets/traverse/traverse.css) */
dialog[data-animation="slide-x-mini"][data-direction]:not(
    [data-mode="notification"]
  ) {
  transform: translate3d(25%, 0, 0);
  opacity: 0;
}
dialog[data-animation="slide-x-mini"][data-direction]:not(
    [data-mode="notification"]
  ).slide-in {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.jd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 20px;
  border-radius: var(--radius);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 28px),
    transparent 100%
  );
}
.jd .jc-tags {
  flex-wrap: wrap;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.jd-loading {
  display: grid;
  place-items: center;
  padding: 60px 24px;
  color: var(--muted);
}
.jd-loading .bars {
  width: 48px;
  height: 48px;
}

/* Loading indicator (same pulsing bars as globaljoblistings), drawn in CSS so every "Loading..." in the app gets it with no markup change.
   The word stays in the page for screen readers (font-size 0 hides it visually). */
.jd-loading {
  font-size: 0;
}
.jd-loading::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20135%20140%22%20fill=%22%23000%22%3E%3Crect%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.5s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.5s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%2230%22%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.25s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.25s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%2260%22%20width=%2215%22%20height=%22140%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%2290%22%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.25s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.25s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%22120%22%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.5s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.5s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20135%20140%22%20fill=%22%23000%22%3E%3Crect%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.5s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.5s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%2230%22%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.25s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.25s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%2260%22%20width=%2215%22%20height=%22140%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%2290%22%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.25s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.25s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3Crect%20x=%22120%22%20y=%2210%22%20width=%2215%22%20height=%22120%22%20rx=%226%22%3E%3Canimate%20attributeName=%22height%22%20begin=%220.5s%22%20dur=%221s%22%20values=%22120;110;100;90;80;70;60;50;40;140;120%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3Canimate%20attributeName=%22y%22%20begin=%220.5s%22%20dur=%221s%22%20values=%2210;15;20;25;30;35;40;45;50;0;10%22%20calcMode=%22linear%22%20repeatCount=%22indefinite%22/%3E%3C/rect%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .jd-loading::before { opacity: 0.6; }
}
.jd-head {
  position: sticky; /* the logo and title stay put while the job scrolls underneath */
  top: 0;
  z-index: 2;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 8px 10px -9px rgb(0 0 0 / 45%);
  background: hsl(var(--h) 70% 92%);
  color: hsl(var(--h) 60% 14%);
}
:root[data-mode="dark"] .jd-head {
  background: hsl(var(--h) 38% 18%);
  color: hsl(var(--h) 60% 94%);
}
.jd-head .jc-av {
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}
.jd-title {
  font-size: 1.35rem;
  line-height: 1.25;
}
.jd-co {
  font-weight: 600;
}
.jd-via {
  opacity: 0.85;
  font-size: 0.9rem;
}
.jd-loc {
  opacity: 0.85;
  font-size: 0.95rem;
}
.jd-body {
  padding: 18px 24px 8px;
  display: grid;
  gap: 20px;
}
.jd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.jd-facts {
  margin: 0;
  padding: 14px 16px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* whatever is in the box sits in its vertical middle */
  gap: 4px;
  background: var(--surface-2);
  border-radius: 10px;
}
.jd-facts p {
  margin: 0;
}
.jd-salary {
  font-weight: 700;
  font-size: 1.05rem;
}
.jd-salary span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.jd-fact {
  font-weight: 700;
}
.jd-fact span {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.jd-deadline {
  color: var(--accent);
}
.jd-sec p {
  white-space: pre-line; /* line breaks / bullet lines typed in About the role */
}
.jd-sec h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}
.jd-sec ul {
  list-style: disc;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation-duration: 0.01ms !important;
  }
}

/* Traverse hides inactive panels with display:none; the main panels stay laid out (just invisible)
   so Muuri can measure their grids before the panel is first shown, and each panel keeps its scroll. */
#main > .tv-panel.tv-hidden {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

/* Count line + "hide empty" switch */
.count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.count-row .count {
  margin: 0;
}
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.switch-track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.15s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.switch input:checked + .switch-track {
  background: var(--accent);
}
.switch input:checked + .switch-track::after {
  transform: translateX(16px);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.switch input:checked ~ .switch-label {
  color: var(--text);
}

/* ---------- Header theme menu: an icon button opening a native popover (same pattern as whattostudy) ---------- */
.theme-menu {
  inset: auto;
  margin: 0;
  padding: 4px;
  width: 200px; /* fixed, so JS can align the right edge to the button before it shows */
  box-sizing: border-box;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    display 0.18s allow-discrete,
    overlay 0.18s allow-discrete;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.theme-menu:popover-open {
  display: flex;
  opacity: 1;
  transform: none;
}
@starting-style {
  .theme-menu:popover-open {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.theme-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.theme-menu-item:hover {
  background: var(--surface-2);
}
.theme-menu-item.is-active,
.theme-menu-item[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
/* "---- Theme ----" section dividers and the Grid/List pair inside the Settings menu */
.menu-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 8px 2px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-sep::before,
.menu-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.menu-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.menu-seg .theme-menu-item {
  justify-content: center;
}
.menu-sep[hidden],
.menu-seg[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .theme-menu {
    transition: none;
  }
}
.icon-settings {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
[class*="icon-theme-"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.icon-theme-sun {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='1' x2='12' y2='3' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78' stroke='%23000' stroke-width='2'/%3E%3Cline x1='1' y1='12' x2='3' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='1' x2='12' y2='3' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78' stroke='%23000' stroke-width='2'/%3E%3Cline x1='1' y1='12' x2='3' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke='%23000' stroke-width='2'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36' stroke='%23000' stroke-width='2'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

.icon-theme-moon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='%23000'/%3E%3C/svg%3E");
}

.icon-theme-gs-light {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%23000'/%3E%3C/svg%3E");
}

.icon-theme-gs-dark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='%23000'/%3E%3C/svg%3E");
}

.icon-theme-neutral {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpolyline points='12,3 12,12 5.64,18.36' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='18.36' y2='18.36' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpolyline points='12,3 12,12 5.64,18.36' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='18.36' y2='18.36' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* ---------- Job-seeker sign-up / login: header controls + top flyout (modelled on the reader app) ---------- */
.auth-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.auth-signup {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  white-space: nowrap;
}
.auth-signup b {
  font-weight: 800;
  letter-spacing: 0.04em;
}
.auth-signup:hover {
  filter: brightness(1.08);
}
.auth-sep {
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--border);
}
.auth-g {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 500;
  text-decoration: none;
}
.auth-g:hover {
  filter: brightness(0.95);
}
.auth-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-hf {
  position: relative;
  display: block;
}
.auth-hf .auth-field-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}
.auth-hf input {
  width: 168px;
  min-height: 36px;
  padding: 0 10px 0 32px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.auth-hf input:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-login-btn {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.auth-login-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.auth-help {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}
.auth-help:hover {
  color: var(--text);
  background: var(--surface-2);
}
.auth-compact {
  display: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 600;
  white-space: nowrap;
}
.auth-hdr-err {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  max-width: 420px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fee;
  color: #c33;
  font-size: 0.85rem;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}
.auth-user {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.auth-user:hover .auth-av {
  filter: brightness(1.12);
}
.auth-slot:has(.auth-user) {
  margin-left: -14px; /* desktop: the avatar sits close to the logo */
}
.auth-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.95rem;
  font-weight: 700;
}
.auth-av-lg {
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
}
/* Join free / Log in bar under the phone header (hidden on desktop; mobile.css shows it) */
.auth-bar {
  display: none;
}
@media (max-width: 1080px) {
  .auth-wide {
    display: none;
  }
  .auth-compact {
    display: inline-block;
  }
}
@media (max-width: 640px) {
  .auth-signup,
  .auth-g {
    display: none;
  }
  .auth-user .auth-name {
    display: none;
  }
  .auth-user {
    padding: 0 5px;
  }
  .auth-compact {
    padding: 0 10px;
    font-size: 0.9rem;
  }
}

/* The flyout */
#auth-flyout {
  background: var(--surface);
  color: var(--text);
  border: 0;
  padding: 0;
  border-radius: 0 0 14px 14px;
  max-width: 100vw;
  max-height: 100dvh;
  line-height: 1.5;
}
@media (max-width: 768px) {
  #auth-flyout {
    border-radius: 0;
  }
}
#auth-flyout .dialog-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
}
#auth-flyout .dialog-header {
  flex: none;
  padding: 10px 16px;
  background: var(--surface-2);
}
#auth-flyout .dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-hdr-switch {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
#auth-flyout .dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
#auth-tv-inline {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.auth-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}
#auth-tv-inline .tv-panel {
  overflow-y: auto;
  padding: 20px 24px 24px;
  box-sizing: border-box;
}
#auth-flyout .modal-footer {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.auth-close-btn {
  width: 84px;
  padding: 8px 16px;
  border: 1.5px solid var(--muted);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.auth-close-btn:hover {
  background: var(--surface);
  color: var(--text);
}
.auth-subtitle {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.auth-subtitle strong {
  color: var(--text);
  overflow-wrap: anywhere;
}
.auth-field {
  position: relative;
  margin-bottom: 12px;
}
.auth-field .auth-field-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}
.auth-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 34px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-forgot-row {
  text-align: right;
  margin: -4px 0 12px;
}
.auth-link {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.auth-link:hover {
  text-decoration: underline;
}
#auth-flyout .btn-primary,
.join-card .btn-primary {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transition: filter 0.15s;
}
#auth-flyout .btn-primary:hover,
.join-card .btn-primary:hover {
  filter: brightness(1.08);
}
#auth-flyout .btn-primary:disabled,
.join-card .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-zed-auth {
  width: 100%;
  min-height: 80px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1rem;
  font-weight: 600;
}
.btn-zed-auth:hover {
  filter: brightness(1.08);
}
.btn-google-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 80px;
  border: 1.5px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  color: #3c4043;
  font-weight: 500;
  text-decoration: none;
}
.btn-google-auth:hover {
  background: #f8f9fa;
}
.auth-divider {
  position: relative;
  margin: 14px 0;
  text-align: center;
}
.auth-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}
.auth-divider span {
  position: relative;
  padding: 0 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
}
.auth-footer-row {
  margin-top: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-privacy-note {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.helper-text {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 0.8rem;
}
.auth-confirm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-2);
}
.auth-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.auth-confirm-label {
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
}
.auth-confirm-value {
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}
.auth-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.auth-head .auth-subtitle {
  margin: 0;
  overflow-wrap: anywhere;
}
.auth-name-lg {
  margin: 0;
  font-size: 1.25rem;
}
.error-message {
  max-height: 0;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  opacity: 0;
  border-radius: 6px;
  background: #fee;
  color: #c33;
  font-size: 0.88rem;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    margin-bottom 0.3s ease,
    padding 0.3s ease;
}
.error-message.visible {
  max-height: 200px;
  margin-bottom: 14px;
  padding: 8px 10px;
  opacity: 1;
}
.success-message {
  margin-bottom: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  background: hsl(150 50% 92%);
  color: hsl(150 60% 20%);
  font-size: 0.88rem;
}
:root[data-mode="dark"] .error-message,
:root[data-mode="dark"] .auth-hdr-err {
  background: hsl(0 40% 20%);
  color: hsl(0 80% 88%);
}
:root[data-mode="dark"] .success-message {
  background: hsl(150 30% 18%);
  color: hsl(150 60% 88%);
}

/* Join free: full-screen dialog */
#join-dialog {
  background: var(--bg);
  color: var(--text);
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100dvh;
  line-height: 1.5;
}
.jn-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Same geometry as the page header, so the logo does not move */
.jn-header {
  flex: none;
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.jn-header-inner {
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
body.is-mobile .jn-header {
  height: 52px;
}
body.is-mobile .jn-header-inner {
  max-width: none;
  padding: 0 14px;
  gap: 10px;
}
.jn-header .logo {
  cursor: pointer;
  font-family: inherit;
}
.jn-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.jn-close:hover {
  background: var(--surface-2);
}
/* Landed straight on /join (nothing of ours to go back to): a centred "Browse jobs" replaces Close and fades out onto the home page */
.jn-browse {
  display: none;
}
#join-dialog.is-direct .jn-close {
  display: none;
}
#join-dialog.is-direct .jn-browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.jn-header-inner {
  position: relative;
}
@media (max-width: 520px) {
  #join-dialog.is-direct .jn-browse {
    position: static;
    translate: none;
    margin-left: auto;
    padding: 0 16px;
  }
}
.jn-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 670px) minmax(280px, 1fr);
  overflow: hidden;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.jn-left {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 380px);
}
.jn-side {
  margin: 24px 0 24px 24px;
  padding: 32px 28px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.jn-side-title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  line-height: 1.2;
}
.jn-side-sub {
  margin: 0;
  color: var(--muted);
}
.jn-steps {
  margin: 26px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.jn-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 600;
}
.jn-steps li.is-on {
  color: var(--text);
}
.jn-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.85rem;
}
.jn-steps li.is-on .jn-num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.jn-steps li.is-done .jn-num {
  border-color: var(--accent);
  color: var(--accent);
}
.jn-notice-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.jn-notice-wrap.is-in {
  grid-template-rows: 1fr;
}
.jn-notice-clip {
  min-height: 0;
  overflow: hidden;
}
.jn-notice-wrap .jn-notice {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.5s ease 0.1s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.jn-notice-wrap.is-in .jn-notice {
  opacity: 1;
  transform: none;
}
.jn-thanks {
  margin: 0 0 26px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.jn-notice {
  padding: 14px 16px;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.9rem;
}
.jn-notice p {
  margin: 6px 0 10px;
  color: var(--muted);
}
.jn-notice b {
  color: var(--text);
  overflow-wrap: anywhere;
}
.jn-textbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.jn-textbtn:hover {
  text-decoration: underline;
}
.jn-textbtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.jn-main {
  position: relative;
  min-height: 0;
}
#join-tv {
  position: absolute;
  inset: 0;
}
#join-tv .tv-panel {
  overflow-y: auto;
  padding: 32px 28px 24px;
  box-sizing: border-box;
}
.jn-panel {
  max-width: 560px;
  margin: 0;
}
.jn-form {
  max-width: 340px;
}
.jn-fg {
  margin-bottom: 14px;
}
.jn-fg .auth-field {
  margin-bottom: 0;
}
.jn-fl {
  display: block;
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
}
.jn-art {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  background: radial-gradient(
    ellipse at 55% 50%,
    color-mix(in srgb, var(--accent) 24%, transparent),
    transparent 68%
  );
}
/* The picture lives in its natural 696x629 space (the screen overlay is matrix3d-fitted to it) and is scaled to the column by app.js (--jn-s) */
.jn-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 696px;
  height: 629px;
  transform: translate(-50%, -50%) scale(var(--jn-s, 1));
  user-select: none;
  pointer-events: none;
}
.jn-stage-in {
  position: relative;
  width: 100%;
  height: 100%;
}
.jn-stage-in img {
  display: block;
  width: 696px;
  height: 629px;
}
:root[data-mode="dark"] .jn-stage-in img {
  filter: invert(1);
}
/* Text on the monitor: same matrix3d as the checkcomplianceinfo.com home page. Built at 3x and scaled back by the last term, so the browser bends a
   sharper picture through the perspective (text laid out at 1x came out soft). */
.jn-screen {
  position: absolute;
  top: 0;
  left: -10px;
  width: 1470px;
  height: 1050px;
  overflow: hidden;
  transform: matrix3d(
    0.16824251887793906,
    -0.11303665489026499,
    0,
    -0.0003545777048201238,
    0.005260067569117105,
    0.24194763739241887,
    0,
    0.000015470786967991488,
    0,
    0,
    1,
    0,
    340,
    207,
    0,
    1
  ) scale(0.33333);
  transform-origin: 0 0;
}
:root[data-mode="dark"] .jn-screen {
  background: #000;
}
.jn-screen-in {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  font-family: Verdana, Arial, sans-serif;
}
.jn-slide {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 129.6pt; /* 36pt x1.2, built at 3x (see .jn-screen) */
  font-weight: 700;
  line-height: 1.15;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.jn-slide.is-on {
  opacity: 1;
}
#join-dialog[open] .jn-stage-in {
  animation: jn-art-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
@keyframes jn-art-in {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
}
/* Step 3: a column as wide as the steps column, scrolling list with faded edges */
#join-career .jn-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 290px;
}
.jn-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 2px;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 22px,
    #000 calc(100% - 22px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 22px,
    #000 calc(100% - 22px),
    transparent 100%
  );
}
#join-career .jn-actions {
  position: static;
  margin-top: 0;
  padding-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  #join-dialog[open] .jn-stage-in {
    animation: none;
  }
  .jn-notice-wrap,
  .jn-notice-wrap .jn-notice {
    transition: none;
  }
}
.jn-eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.jn-title {
  margin: 0 0 10px;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.jn-label {
  margin: 18px 0 10px;
  font-weight: 600;
}
.jn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.jn-chip:hover:not(:disabled) {
  border-color: var(--accent);
}
.jn-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.jn-chip.is-on::before {
  content: "✓";
  font-weight: 800;
}
.jn-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.jn-chip:focus-visible,
.jn-close:focus-visible,
.jn-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.jn-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 0 4px;
  background: var(--bg);
}
.jn-back {
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.jn-back:hover {
  background: var(--surface-2);
}
#join-dialog .btn-primary {
  flex: 1;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
#join-dialog .btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
#join-dialog .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.jn-promo-body {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 1.05rem;
}
#join-dialog .jn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.jn-promo-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}
.jn-nothanks-row {
  margin: 26px 0 0;
  text-align: center;
}
.jn-nothanks {
  color: var(--muted);
  text-decoration: underline;
}
.jn-nothanks:hover {
  color: var(--text);
}
@media (max-width: 860px) {
  .jn-body {
    grid-template-columns: 1fr;
  }
  .jn-art {
    display: none;
  }
  #join-career .jn-panel {
    max-width: none;
  }
  .jn-left {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .jn-form {
    max-width: none;
  }
  .jn-thanks {
    margin: 0;
    padding: 12px 14px 0;
    font-size: 1.1rem;
  }
  .jn-side {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--bg);
    overflow: visible;
  }
  .jn-side-title,
  .jn-side-sub,
  .jn-steps {
    display: none !important;
  }
  .jn-notice {
    padding: 10px 12px;
  }
  #join-tv .tv-panel {
    padding: 18px 16px 16px;
  }
  .jn-title {
    font-size: 1.35rem;
  }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .jn-body {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
  .jn-left {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .jn-side {
    padding: 28px 20px;
  }
}

/* ---------- Beam trace: timed comet that circles a border (from whattostudy.com) ----------
   Add class "beam-trace" to a box (radius is inherited); --beam-trace-color / --beam-trace-cycle tune it. */
@property --beam-trace-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.beam-trace {
  position: relative;
  isolation: isolate;
  --beam-trace-color: var(--accent);
  --beam-trace-cycle: 4s;
}
.beam-trace::before,
.beam-trace::after,
.rbtn.is-active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 3px;
  /* The last ~30% of the circle is lit: a wider, longer comet than whattostudy's, with a 3px ring */
  background: conic-gradient(
    from var(--beam-trace-angle),
    transparent 0 68%,
    color-mix(in srgb, var(--beam-trace-color) 45%, transparent) 80%,
    var(--beam-trace-color) 92%,
    transparent 98%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  animation: beam-trace-lap var(--beam-trace-cycle) linear infinite;
}
/* Blurred copy pushed out gives the soft bloom around the hard trace */
.beam-trace::after {
  inset: -4px;
  padding: 6px;
  filter: blur(8px);
}
/* The selected region button already uses ::before for its tick, so it gets the ring only */
.rbtn.is-active {
  position: relative;
  isolation: isolate;
  --beam-trace-color: hsl(var(--h) 95% 74%);
  --beam-trace-cycle: 5s;
}
.rbtn--all.is-active {
  --beam-trace-color: var(--accent);
}
@keyframes beam-trace-lap {
  0% {
    opacity: 0;
    --beam-trace-angle: 0deg;
  }
  1% {
    opacity: 1;
    --beam-trace-angle: 0deg;
  }
  16% {
    opacity: 1;
    --beam-trace-angle: 360deg;
  }
  19% {
    opacity: 0;
    --beam-trace-angle: 360deg;
  }
  100% {
    opacity: 0;
    --beam-trace-angle: 0deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .beam-trace::before,
  .beam-trace::after,
  .rbtn.is-active::after {
    animation: none;
  }
}

/* The confirmation notice sits in an overflow-hidden slide-up clip: give its ring and bloom room inside it */
.jn-notice-wrap {
  margin: -12px;
}
.jn-notice-wrap .jn-notice {
  margin: 12px;
}
@media (max-width: 860px) {
  .jn-notice-wrap {
    margin: -12px 2px -8px;
  }
}

/* Hidden until Muuri has done its first layout, so cards never show stacked */
.grid {
  transition: opacity 0.28s ease;
}
.grid.is-pending {
  opacity: 0;
  pointer-events: none;
}
/* Grid/List switch: fade out, re-flow, fade in */
#grid-countries.is-fading,
#job-results.is-fading {
  opacity: 0;
  transform: translateX(-28px);
}
#job-results {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
#grid-countries {
  transition:
    opacity 0.28s ease,
    transform 0.2s ease;
}
#grid-countries.is-fading {
  transition-duration: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .grid,
  #job-results {
    transition: none;
    transform: none !important;
  }
}

/* Job flyout "How to apply" panel (the phone's second slide, the desktop's right half) */
/* Info / ad slide: a modern OKLCH gradient from the country's own hue */
.jd-slide-info {
  justify-content: flex-start;
  gap: 12px;
  padding: 22px 20px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(120% 70% at 100% 0%, hsl(0 0% 100% / 0.2), transparent 60%),
    linear-gradient(
      135deg,
      hsl(var(--h) 72% 36%),
      hsl(calc(var(--h) + 55) 78% 24%)
    );
  background:
    radial-gradient(120% 70% at 100% 0%, hsl(0 0% 100% / 0.2), transparent 60%),
    linear-gradient(
      135deg in oklch,
      hsl(var(--h) 72% 36%),
      hsl(calc(var(--h) + 55) 78% 24%)
    );
  overflow-y: auto;
}
.jd-steps {
  margin: 0;
  padding-left: 1.25em;
  line-height: 1.5;
}
.jd-steps li + li {
  margin-top: 6px;
}
.jd-info-custom {
  white-space: pre-line;
}
.jd-info-tip {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.8;
}
.jd-info-title {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 800;
}
.jd-info-text {
  margin: 0;
  line-height: 1.5;
  opacity: 0.92;
}
.jd-info-btn {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid hsl(0 0% 100% / 0.7);
  border-radius: 999px;
  background: hsl(0 0% 100% / 0.14);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.jd-info-apply {
  align-self: center; /* centred, not full width */
  min-width: 220px;
  padding-left: 28px;
  padding-right: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-color: #fff;
  color: hsl(var(--h) 72% 28%);
  text-decoration: none;
  text-align: center;
}
/* The ad box gets the site-wide beam trace, in white to read on the gradient */
.jd-adslot.beam-trace {
  --beam-trace-color: #fff;
}
.jd-adslot {
  flex: 1 1 auto;
  min-height: 160px;
  display: grid;
  place-items: center;
  border: 1.5px dashed hsl(0 0% 100% / 0.5);
  border-radius: 12px;
  color: hsl(0 0% 100% / 0.75);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Job flyout slider: on desktop the wrappers vanish and the job reads as one column; the phone makes them a snap slider (mobile.css) */
.jd-slider,
.jd-slide-main {
  display: contents;
}

.jn-google {
  min-height: 46px;
}
.jn-google-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.82rem;
}

/* ---------- header entry point ("Post a job") ---------- */
.em-post-link {
  flex: none;
  align-self: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.em-post-link:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.em-post-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body.is-mobile .em-post-link {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.85rem;
}
/* A desktop-layout window squeezed below ~760px has no room beside the login controls; phones get the
   mobile layout, where the button fits. */
@media (max-width: 760px) {
  body:not(.is-mobile) .em-post-link {
    display: none;
  }
}


/* Required-field mark and password hint (job seeker + employer forms) */
.req { color: var(--accent); font-weight: 700; }
.pw-hint { margin: 0 0 12px; color: var(--muted); font-size: 0.82rem; }

/* Mobile header: "Post a job" as a larger accent icon button */
.icon-btn.post-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: auto;
  min-width: 52px;
  height: 44px;
  padding: 0 4px;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  text-decoration: none;
}
.icon-btn.post-btn .icon {
  width: 24px;
  height: 24px;
}
.post-btn-label {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Header icon buttons (Share, Settings): just the icon, no box */
.header-end .icon-btn {
  border-color: transparent;
  background: transparent;
}
.header-end .icon-btn:hover {
  background: var(--surface-2);
}

/* Logo globe: four static views that cross-fade (Americas, Europe/Africa, Asia, Australia/Pacific) */
.logo-mark .gv { opacity: 0; animation: gjl-globe 6.5s infinite; }
.logo-mark .gv1 { animation-delay: 0s; }
.logo-mark .gv2 { animation-delay: 1.625s; }
.logo-mark .gv3 { animation-delay: 3.25s; }
.logo-mark .gv4 { animation-delay: 4.875s; }
@keyframes gjl-globe {
  0% { opacity: 0; }
  7% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark .gv { animation: none; }
  .logo-mark .gv2 { opacity: 1; }
}

/* ---- Header buttons (Join free, Google, Login, Forgot) ---- */
:root { --join: hsl(152 55% 32%); --join-ink: #ffffff; }
:root[data-mode="dark"] { --join: hsl(152 48% 40%); --join-ink: #ffffff; }
.auth-signup, .auth-bar-join {
  background: var(--join);
  color: var(--join-ink);
}
.auth-signup:hover { filter: brightness(1.1); }
.auth-g {
  background: #ffffff;
  border: 1px solid var(--border);
}
.auth-g:hover { filter: none; background: #f1f3f4; }
.auth-g .auth-g-icon { display: block; }
.auth-login-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.auth-login-btn:hover:not(:disabled) { background: var(--border); }
.auth-help {
  width: auto;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
}
.auth-help:hover { background: var(--border); }

/* Job flyout: back-to-top button over the bottom-right of the scrolling details (shown once scrolled) */
.jd-slide-main {
  position: relative;
}
.jd-fab {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.jd-fab.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.jd-fab .icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Apply now": turns a modern light green on hover / keyboard focus */
.jd-info-apply {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.jd-info-apply:hover,
.jd-info-apply:focus-visible {
  background: #b7f5cf;
  background: oklch(92% 0.12 155);
  border-color: #b7f5cf;
  border-color: oklch(92% 0.12 155);
  color: #0b4a2a;
  transform: translateY(-1px);
}

/* Job flyout header: shrinks to just the title, at the company name's size, once the details are scrolled (desktop and phone) */
.jd-head > div {
  min-width: 0;
}
.jd-head .jc-av,
.jd-title {
  transition:
    width 0.2s ease,
    height 0.2s ease,
    font-size 0.2s ease;
}
.jd-head.is-compact {
  padding: 0.3rem 0.5rem;
  gap: 10px;
}
.jd-head.is-compact .jc-av {
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
}
.jd-head.is-compact .jd-title {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jd-head.is-compact .jd-co,
.jd-head.is-compact .jd-loc {
  display: none;
}

/* How to apply: the job-search safety tips link (dotted underline) opens a popup */
.jd-safety {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jd-safety:hover,
.jd-safety:focus-visible {
  text-decoration-thickness: 2px;
}
#jd-safety-dlg {
  /* Emerge fades it in and out; it sits centred on screen and is as tall as its text */
  height: auto !important;
  max-height: min(86dvh, 680px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}
.jd-safety-body {
  display: flex;
  flex-direction: column;
  max-height: min(86dvh, 680px);
  line-height: 1.5;
  font-size: 1rem;
}
.jd-safety-head {
  flex: none;
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--border, rgba(128, 128, 128, 0.3));
}
.jd-safety-head h3 {
  margin: 0;
  font-size: 1.2rem;
}
.jd-safety-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 14px 24px 14px 42px;
  display: grid;
  gap: 10px;
  list-style: disc;
  font-size: 1rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.jd-swap {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  border-radius: 3px;
  padding: 0 1px;
}
.jd-safety-foot {
  flex: none;
  padding: 12px 24px;
  border-top: 1px solid var(--border, rgba(128, 128, 128, 0.3));
  text-align: center;
}
.jd-info-tip {
  text-align: center;
}
.jd-safety-close {
  display: block;
  margin: 0 auto;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 767px) {
  #jd-safety-dlg { max-height: 92dvh !important; }
  .jd-safety-body { max-height: 92dvh; }
  .jd-safety-head, .jd-safety-foot { padding-left: 18px; padding-right: 18px; }
  .jd-safety-list { padding: 12px 18px 12px 36px; }
}

/* ---------- New postings: pulsating green dot in the country header ---------- */
.cv-new { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.cv-new[hidden] { display: none; }
.cv-new:hover { background: hsl(var(--h) 55% 85% / 60%); }
.pulse-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: pulse-dot 1.6s ease-out infinite; }
@keyframes pulse-dot { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse-dot::after { animation: none; } }
/* Country header: the breadcrumb's region carries the beam, like the selected region chip */
.crumb-region.beam-trace { --beam-trace-color: hsl(var(--h) 95% 60%); --beam-trace-cycle: 5s; border-radius: 8px; padding: 4px 8px; }

/* ---------- Featured jobs ---------- */
.jcard--featured { border-color: #f5b301; box-shadow: 0 0 0 1px #f5b30155, 0 2px 10px #f5b30122; }
.jc-feat { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #f5b301; color: #3a2a00; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }

/* Report this job: reuses the safety dialog's frame */
#jd-report-dlg {
  height: auto !important;
  max-height: min(92dvh, 720px) !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}
#jd-report-dlg .jd-safety-body { max-height: min(92dvh, 720px); }
.jd-report-form, .jd-report-done { padding: 14px 24px 0; overflow-y: auto; min-height: 0; line-height: 1.5; }
.jd-report-done { padding-bottom: 0; }
.jd-report-form .jd-safety-foot, .jd-report-done .jd-safety-foot { margin: 14px -24px 0; }
.jd-report-reasons { border: 0; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.jd-report-reasons legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.jd-report-opt { display: flex; gap: 10px; align-items: center; min-height: 36px; cursor: pointer; }
.jd-report-opt input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.jd-report-lab { display: block; margin: 10px 0 4px; font-weight: 600; }
.jd-report-sub { font-weight: 400; opacity: 0.7; font-size: 0.9rem; }
.jd-report-form textarea, .jd-report-form input[type="email"] {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border, rgba(128, 128, 128, 0.4)); border-radius: 8px;
}
.jd-report-form textarea { resize: vertical; }
.jd-report-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jd-report-err { margin: 10px 0 0; color: #c0392b; font-weight: 600; }
.jd-report-foot { display: flex; gap: 10px; justify-content: center; }
.jd-report-foot .jd-safety-close { margin: 0; }
.jd-report-foot .jd-safety-close:disabled { opacity: 0.5; cursor: not-allowed; }
.jd-report-cancel {
  min-height: 40px; padding: 0 20px; border: 1px solid var(--border, rgba(128, 128, 128, 0.4)); border-radius: 10px;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
@media (max-width: 767px) {
  .jd-report-form, .jd-report-done { padding-left: 18px; padding-right: 18px; }
  .jd-report-form .jd-safety-foot, .jd-report-done .jd-safety-foot { margin-left: -18px; margin-right: -18px; }
}

/* Report dialog: the fields scroll, the Cancel / Send Report footer stays pinned at the bottom */
.jd-report-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; overflow: visible; }
.jd-report-fields { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 24px 12px; }
.jd-report-form .jd-safety-foot { margin: 0; }
.jd-report-form .jd-report-foot .jd-safety-close:disabled { opacity: 0.45; cursor: not-allowed; }
.jd-report-form input[aria-invalid="true"] { border-color: #c0392b; }
@media (max-width: 767px) {
  .jd-report-form { padding: 0; }
  .jd-report-fields { padding-left: 18px; padding-right: 18px; }
  .jd-report-form .jd-safety-foot { margin: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .jd-report-foot > * { flex: 1 1 0; }
}

/* ---------- 6-digit code boxes (join + email-code sign-in; the employer pages use the same look) ---------- */
.em-code-group { display: flex; gap: 10px; justify-content: center; margin: 22px 0; }
.em-digit {
  width: 46px; height: 56px; padding: 0; text-align: center; font: inherit; font-size: 1.5rem; font-weight: 700;
  border: 2px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); caret-color: var(--accent);
}
.em-digit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width: 420px) { .em-digit { width: 40px; height: 50px; } .em-code-group { gap: 6px; } }
.jn-switch { margin: 14px 0 0; }
/* Join: how to sign in from now on */
.jn-methods { display: grid; gap: 12px; max-width: 420px; margin-top: 18px; }
.jn-method {
  display: grid; gap: 4px; width: 100%; padding: 14px 16px; text-align: left; font: inherit; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer;
}
.jn-method strong { font-size: 1.02rem; }
.jn-method span { color: var(--muted); font-size: 0.9rem; }
.jn-method:hover, .jn-method.is-on { border-color: var(--accent); }
.jn-method:disabled { opacity: 0.6; cursor: wait; }
.jn-method-form { max-width: 420px; }

/* ---------- Info popups (AI-picked terms in the job text) ---------- */
.info-tip {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.info-tip:hover, .info-tip:focus-visible { text-decoration-style: solid; color: var(--accent); }
.info-pop {
  position: fixed; inset: auto; margin: 0; z-index: 10000; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); font-size: 0.9rem; line-height: 1.45;
}


/* Swipe chevrons: dismissed (any one was actioned) or retired for good (that panel type was swiped before) - see ui/js/swipehints.js */
[data-hint].is-dismissed,
:root[data-hints-seen~="regions"] [data-hint="regions"],
:root[data-hints-seen~="stats"] [data-hint="stats"],
:root[data-hints-seen~="jd"] [data-hint="jd"] {
  display: none !important;
}


/* Job details: "How to apply" title with the safety tips link at the right (two lines), and Report this job at the bottom left under the Tags */
.jd-info-head {
  display: grid;
  /* the title keeps its full width; the link takes what is left, on one line when it fits and wrapping only when it does not */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto);
  align-items: start;
  gap: 12px;
}
.jd-info-head .jd-safety {
  justify-self: end;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.25;
}
.jd-report-row {
  display: flex;
  justify-content: flex-start;
  padding: 6px 0 4px;
}
.jd-report-link {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.jd-report-link:hover,
.jd-report-link:focus-visible {
  text-decoration-thickness: 2px;
}

/* ---------- SecLock inside the Log in flyout (App\Lib\GjlFlyoutViews). The flyout frame, fields and buttons above are shared. ---------- */
.auth-out { display: flex; align-items: center; gap: 8px; }
.auth-slot .auth-av { text-transform: capitalize; }
.btn-secondary {
  display: block; width: 100%; min-height: 44px; padding: 0 14px; margin: 0 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn-secondary:hover:not(:disabled) { background: var(--border); }
.btn-secondary:disabled { opacity: 0.55; cursor: default; }
#auth-flyout .btn-danger { background: hsl(0 60% 42%); }
.auth-danger { color: hsl(0 60% 42%); }
.auth-center { text-align: center; }
.auth-check { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 0.9rem; cursor: pointer; }
#auth-flyout .auth-head { margin-bottom: 12px; }

/* Log in panel: two separate paths on their own rows */
.auth-split { display: flex; flex-direction: column; gap: 18px; }
.auth-group .auth-caption { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); }

/* View gate: panel 1 of the Log in flyout (App\Lib\GjlFlyoutViews::gatePanel) - two bento boxes, one per path */
.gate { display: flex; flex-direction: column; gap: 14px; }
.gate-title { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--text); }
.gate-lead { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.gate-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.gate-box {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  min-height: 190px; padding: 18px; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.gate-box:hover, .gate-box:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.gate-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gate-ico { color: var(--accent); flex: none; }
.gate-box-title { font-size: 1.05rem; font-weight: 700; }
.gate-box-text { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.gate-box-go {
  margin-top: auto; padding: 6px 14px; border: 1.5px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-size: 0.88rem; font-weight: 600;
}
.gate-box-main { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.gate-box-main .gate-box-go { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 560px) {
  .gate-bento { grid-template-columns: 1fr; }
  .gate-box { min-height: 0; }
  .gate-box-go { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .gate-box { transition: none; } .gate-box:hover, .gate-box:focus-visible { transform: none; } }
/* Back in the flyout footer: only on the Log in panel, and only when the flyout was opened from the view gate */
#auth-flyout .modal-footer { position: relative; }
#auth-flyout .auth-back-btn { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
#auth-flyout:not([data-gate="1"]) .auth-back-btn { display: none !important; }
.jd-slow { margin: 0; padding: 24px; text-align: center; color: var(--muted); }
.auth-row { display: flex; gap: 8px; align-items: flex-start; }
.auth-row .auth-field { flex: 1; min-width: 0; margin-bottom: 0; }
#auth-flyout .auth-rowbtn { width: 150px; flex: none; margin: 0 !important; padding: 0 14px; }
.auth-subrow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; }
@media (max-width: 360px) { .auth-row { flex-direction: column; align-items: stretch; } #auth-flyout .auth-rowbtn { width: 100%; } }

/* Notices and field errors open/close with a height + fade */
.auth-collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.24s ease, opacity 0.24s ease; }
.auth-collapse.open { grid-template-rows: 1fr; opacity: 1; }
.auth-collapse > div { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .auth-collapse { transition: none; } }
.seclock-note { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: hsl(150 50% 92%); color: hsl(150 60% 20%); font-size: 0.88rem; }
.seclock-note.seclock-error { background: #fee; color: #c33; }
small.seclock-error { display: block; margin: 2px 0 8px; padding: 6px 10px; border-radius: 6px; background: #fee; color: #c33; font-size: 0.85rem; }
:root[data-mode="dark"] .seclock-note { background: hsl(150 30% 18%); color: hsl(150 60% 88%); }
:root[data-mode="dark"] .seclock-note.seclock-error, :root[data-mode="dark"] small.seclock-error { background: hsl(0 40% 20%); color: hsl(0 80% 88%); }

/* six code boxes + resend / expiry */
.seclock-code-group { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }
.seclock-digit { width: 46px; height: 54px; padding: 0; text-align: center; font: inherit; font-size: 1.5rem; font-weight: 700; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); box-sizing: border-box; }
.seclock-digit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width: 420px) { .seclock-digit { width: 40px; height: 50px; } .seclock-code-group { gap: 6px; } }
[data-resend].cooling { opacity: 0.55; cursor: default; }
.jn-textbtn.cooling { text-decoration: none; color: var(--muted); }
.auth-expiry { text-align: center; font-size: 0.85rem; color: var(--muted); margin: -4px 0 6px; min-height: 1.2em; }
.auth-expiry.expired { color: hsl(0 60% 42%); }
#auth-flyout .btn-primary.expired { opacity: 0.5; cursor: default; }

/* "or continue with" + the square icon buttons (same look as the old header Google icon) */
.seclock-or { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; color: var(--muted); font-size: 0.85rem; }
.seclock-or::before, .seclock-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.seclock-social { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.seclock-social-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #ffffff; text-decoration: none; }
.seclock-social-btn:hover { background: #f1f3f4; }
.seclock-social-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seclock-google-icon { display: block; }
.auth-login-btn { white-space: nowrap; }
#auth-flyout .auth-forgot-row.auth-center:has(.auth-danger) { margin-top: 28px; }

.auth-gap { margin-top: 24px; }
.auth-skip-hint { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--text-muted, #6b7280); }
/* Join step 3: interests in a single column */
.jn-panel--career .jn-chips { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.jn-panel--career .jn-chip { width: 100%; justify-content: flex-start; }
.jn-thanks p { margin: 0; }
.jn-thanks p + p { margin-top: 14px; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--text-muted, inherit); letter-spacing: 0; }

/* Join "Set a password" block: a distinct, themeable panel that eases open */
:root { --pw-bg: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.jn-method-form {
  padding: 18px 18px 16px;
  background: var(--pw-bg);
  border: 1.5px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 12px;
  --field-bg: var(--surface);
  animation: jn-pw-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.jn-method-form .auth-field input {
  background: var(--field-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.jn-method-form .auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.jn-method-form .jn-fg { margin-bottom: 14px; }
@keyframes jn-pw-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jn-method-form { animation: none; } }

/* Dark modes: the plain (secondary) buttons were nearly the same grey as the panel behind them - lighter fill, clear border */
:root[data-mode="dark"] .btn-secondary,
:root[data-mode="dark"] .auth-login-btn,
:root[data-mode="dark"] .auth-close-btn,
:root[data-mode="dark"] .jn-back {
  background: color-mix(in srgb, var(--text) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--text) 55%, var(--surface));
  color: var(--text);
}
:root[data-mode="dark"] .btn-secondary:hover:not(:disabled),
:root[data-mode="dark"] .auth-login-btn:hover:not(:disabled),
:root[data-mode="dark"] .auth-close-btn:hover:not(:disabled),
:root[data-mode="dark"] .jn-back:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 26%, var(--surface));
}

/* Phone-only Close footer of the Join dialog (shown by mobile.css) */
.jn-phone-foot { display: none; }

/* Header divider between Log in and Create free account */
.auth-out { gap: 0 !important; align-items: center; }
.auth-out::after { content: ""; order: 1; width: 1px; height: 18px; margin: 0 14px 0 5px; background: var(--text-muted, var(--border)); }
.auth-out .auth-signup { order: 2; }

/* Site footer + legal dialog */
.site-foot { flex: none; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 12px; font-size: 0.78rem; color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); }
.site-foot-link { border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 4px; cursor: pointer; border-radius: 4px; }
.site-foot-link:hover, .site-foot-link:focus-visible { color: var(--text); text-decoration: underline; }
.gjl-legal { background: var(--surface); color: var(--text); }
.gjl-legal .ee-header, .gjl-legal .ee-title { color: var(--text); }
.gjl-legal .ee-content { padding: 4px 20px 20px; font-size: 0.92rem; line-height: 1.55; color: var(--text); }
.gjl-legal h4 { margin: 18px 0 4px; font-size: 0.98rem; }
.gjl-legal p, .gjl-legal ul { margin: 6px 0; }
.gjl-legal ul { padding-left: 20px; }
.gjl-legal a { color: var(--accent); }
.gjl-legal .legal-date { color: var(--muted); font-size: 0.82rem; }
/* Footer links: inline, at the end of the page content (they scroll with it) */
.site-foot { position: static; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin: 28px 0 0; padding: 16px 12px 20px; background: transparent; border-top: 0; pointer-events: auto; }

/* No-share flag on agent listings */
.ns{display:inline-block;margin:6px 0 0;padding:3px 10px;border-radius:999px;font-size:13px;line-height:1.4}
.ns-ok{background:#e4f5e8;color:#14532d}
.ns-no{background:#fdecc8;color:#6b3f00}

/* ---------- Info popups (same look as globaljoblistings); see ui/js/infotips.js ---------- */
.info-tip {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.info-tip:hover, .info-tip:focus-visible { text-decoration-style: solid; color: var(--accent); }
/* Round "i" icon variant, for a hint beside a label */
.info-tip.info-i {
  display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-left: 4px; vertical-align: middle;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.8em; font-weight: 700; font-style: normal; line-height: 1; text-decoration: none;
}
.info-pop {
  position: fixed; inset: auto; margin: 0; z-index: 10000; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); font-size: 0.9rem; line-height: 1.45;
}
.ns-ic{width:1.5em;height:1.5em;vertical-align:-0.4em;margin-right:4px}

/* Flag box: the icon sits alone in its own cell on the left, the text in the cell beside it */
.ns-box{display:flex;align-items:stretch;width:fit-content;max-width:100%;padding:0;overflow:hidden;border-radius:12px;font-size:.92em}
.ns-box .ns-cell{display:flex;align-items:center;justify-content:center;flex:none;padding:8px 12px}
.ns-box .ns-text{align-self:center;padding:8px 14px 8px 12px}
.ns-box .ns-ic{width:2.4em;height:2.4em;margin:0;vertical-align:baseline}
.ns-ok.ns-box .ns-cell{background:#cde9d4}
.ns-no.ns-box .ns-cell{background:#f6d595}