/* =========================================================
   NURAI CONNECT — design tokens
   ========================================================= */
:root {
  --color-primary: #1B3FAE;
  --color-primary-dark: #122C82;
  --color-primary-light: #2EA8E4;
  --color-accent: #F7B419;
  --color-accent-light: #FFCB4D;
  --color-ink: #0B1D3A;
  --color-bg: #F6F8FC;
  --color-surface: #FFFFFF;
  --color-muted: #5B6B84;
  --color-border: #E3E8F2;

  --gradient-brand: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-accent: linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-light) 100%);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(11, 29, 58, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 29, 58, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 29, 58, 0.14);

  --topbar-h: 72px;
  --tabbar-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); overflow-x: hidden; }

body {
  overflow-x: hidden;
  margin: 0;
  padding-top: var(--topbar-h); /* compensates .topbar's move to position: fixed above */
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); margin: 0; line-height: 1.15; }

/* =========================================================
   Buttons & chips
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn--sm { padding: 9px 18px; font-size: 13.5px; }
.btn--primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--color-primary-light); color: #fff; box-shadow: var(--shadow-sm); }
.btn--accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary-light); background: rgba(46,168,228,0.06); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em;
}
.badge--local { background: rgba(27,63,174,0.08); color: var(--color-primary); }
.badge--global { background: rgba(46,168,228,0.1); color: var(--color-primary); }
.badge--type { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }
.badge--featured { background: rgba(27,63,174,0.1); color: var(--color-primary); }
.badge--verified { background: rgba(21,128,61,0.1); color: #15803d; }
.badge--pending { background: rgba(180,83,9,0.1); color: #b45309; }
.badge--rejected { background: rgba(185,28,28,0.1); color: #b91c1c; }
.badge--missing { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

.license-list { display: flex; flex-direction: column; gap: 12px; }
.license-list__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.license-list__row > div:last-child { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 9px 16px; font-size: 14px; font-weight: 500;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.chip:hover { border-color: var(--color-primary-light); transform: translateY(-1px); }
.chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.chip--muted { border-style: dashed; color: var(--color-muted); }
.chip code { font-family: var(--font-body); font-size: 11px; opacity: 0.65; }
.category-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 9px 16px; font-size: 14px; font-weight: 500;
  color: var(--color-ink); text-decoration: none; transition: border-color 0.15s, transform 0.15s;
}
.category-chip:hover { border-color: var(--color-primary-light); transform: translateY(-1px); }
.category-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.category-chip[hidden] { display: none; }

/* =========================================================
   Top navbar
   ========================================================= */
.topbar {
  /* fixed, not sticky: html/body both carry overflow-x: hidden
     (see below), which forces their computed overflow-y to auto on
     both — a double scroll-context that silently breaks
     position: sticky (same root cause already found and fixed for
     the portal sidebar). Fixed pins the navbar to the viewport
     regardless, at the cost of needing body's own padding-top below
     to reserve the space it no longer occupies in normal flow. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(246,248,252,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  height: var(--topbar-h);
}
.topbar__inner {
  height: 100%;
  display: flex; align-items: center; gap: 24px;
}
.topbar__brand { display: flex; align-items: center; flex-shrink: 0; }
.topbar__logo { height: 64px; width: auto; }

.topbar__nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; flex: 1; }
.topbar__link {
  font-size: 14.5px; font-weight: 500; color: var(--color-muted);
  position: relative; padding: 6px 0; transition: color 0.15s ease;
}
.topbar__link:hover { color: var(--color-ink); }
.topbar__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gradient-brand); transition: width 0.2s ease;
}
.topbar__link:hover::after { width: 100%; }

.topbar__actions { display: flex; align-items: center; gap: 10px; position: relative; }

.country-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; font-weight: 600;
  color: var(--color-ink);
}
.country-pill__chev { color: var(--color-muted); transition: transform 0.2s ease; }
.country-pill[aria-expanded="true"] .country-pill__chev { transform: rotate(180deg); }

.country-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 10px; min-width: 240px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all 0.18s ease; z-index: 60;
}
.country-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.country-menu__title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); padding: 6px 10px; margin: 0; }
.country-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; }
.country-menu__item:hover { background: var(--color-bg); }

/* =========================================================
   Hero + signature "connection map"
   ========================================================= */
.hero { padding: 56px 0 40px; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--color-primary); background: rgba(27,63,174,0.08);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.audience-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-sm) + 5px); padding: 5px; margin-bottom: 22px;
}
.audience-toggle__label {
  font-family: var(--font-body); font-size: 11.5px; color: var(--color-muted);
  padding-left: 10px; letter-spacing: 0.02em;
}
.audience-toggle__btn {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--color-muted); padding: 8px 16px; border-radius: var(--radius-sm);
  transition: background 0.18s ease, color 0.18s ease;
}
.audience-toggle__btn.is-active { background: var(--color-primary); color: #fff; }

/* Signup step 3 - one block per license requirement, each with its own
   Upload / Digital switch: space the blocks apart and tighten the switch. */
.license-field { margin-bottom: 26px; }
.license-kind-toggle { margin: 10px 0 14px; }
.license-kind-panel .form-field { margin-top: 14px; }
.license-kind-panel > .field-hint { margin: 0; }

/* A wide table inside a narrow card (phones): scroll it sideways within the
   card instead of silently clipping its right-hand columns. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .app-table { min-width: 560px; }

.employer-cta-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-md);
  margin-top: 4px;
}
.employer-cta-card__row { padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
.employer-cta-card__row:last-of-type { border-bottom: none; }
.employer-cta-card__row strong { font-family: var(--font-display); font-size: 14.5px; }
.employer-cta-card__row p { margin: 4px 0 0; color: var(--color-muted); font-size: 13.5px; line-height: 1.5; }
.employer-cta-card .btn { width: 100%; margin-top: 12px; }

.hero__title {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -0.01em;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__title span {
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__title .hero__title-sub {
  display: block; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 600;
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: #F2B300; margin-top: 4px;
}
.hero__subtitle { color: var(--color-muted); font-size: 17px; line-height: 1.6; max-width: 480px; margin: 18px 0 28px; }

.search-card {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow-md);
}
.search-card__field { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--color-muted); flex: 1; min-width: 160px; }
.search-card__field--grow { flex: 2; }
.search-card__field input, .search-card__field select {
  border: none; outline: none; background: transparent; font-size: 14.5px; color: var(--color-ink);
  width: 100%; font-family: var(--font-body);
}
.search-card__field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6B84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.search-card__submit { flex-shrink: 0; }

/* =========================================================
   "Popular:" quick-links row (replaces the old stats row)
   ========================================================= */
.popular-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.popular-row__label { font-size: 14px; font-weight: 600; color: var(--color-ink); margin-right: 2px; }
.popular-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 8px 14px 8px 16px; font-size: 13.5px; font-weight: 600;
  color: var(--color-ink); transition: border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.popular-pill svg { color: var(--color-muted); transition: transform 0.18s ease, color 0.18s ease; }
.popular-pill:hover { border-color: var(--color-primary-light); color: var(--color-primary); transform: translateY(-1px); }
.popular-pill--muted { border-style: dashed; color: var(--color-muted); }
.popular-pill:hover svg { color: var(--color-primary); transform: translateX(2px); }

/* =========================================================
   Hero photo — shaped, glowing, auto-rotating (replaces the
   old continents network diagram)
   ========================================================= */
.hero-photo { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; }

.hero-photo__glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,168,228,0.22) 0%, rgba(27,63,174,0.08) 55%, transparent 75%);
  animation: glow-pulse 5s ease-in-out infinite;
}
.hero-photo__ring {
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  border: 1.5px dashed var(--color-border);
  animation: ring-spin 40s linear infinite;
}

.hero-photo__frame {
  position: relative; width: 300px; height: 400px;
  border-radius: 160px 160px 32px 32px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: photo-float 5s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.hero-photo__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-photo__img.is-active { opacity: 1; }

@keyframes photo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes glow-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero-photo__frame, .hero-photo__glow, .hero-photo__ring { animation: none; }
}

/* =========================================================
   Country strip
   ========================================================= */
.strip { padding: 20px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.strip__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.strip__label { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); flex-shrink: 0; }
.strip__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.strip__empty { color: var(--color-muted); font-size: 14px; }

/* =========================================================
   Sections
   ========================================================= */
.section { padding: 64px 0; }
.section--muted { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section__title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; }
.section__title--center { text-align: center; }
.section__subtitle { color: var(--color-muted); margin: 10px 0 32px; font-size: 15.5px; max-width: 560px; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 0; flex-wrap: wrap; }
.section__head .section__subtitle { margin-bottom: 0; }
.section__empty { color: var(--color-muted); background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 24px; text-align: center; }
.section__center-cta { display: flex; justify-content: center; margin-top: 24px; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.category-row .category-card { flex: 0 1 160px; align-items: center; text-align: center; }
.category-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 20px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width: 0;
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.category-card__icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); flex-shrink: 0;
}
.category-card__name { font-weight: 600; font-size: 14.5px; line-height: 1.35; overflow-wrap: break-word; word-break: break-word; }

.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.job-card {
  position: relative;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 216px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.job-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); }
.job-card--featured { border-color: var(--color-primary-light); box-shadow: 0 0 0 1px rgba(46,168,228,0.18) inset; }
.job-card__header { display: flex; align-items: flex-start; gap: 12px; }
.job-card__avatar {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--gradient-brand); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.job-card__avatar--img { background: var(--color-surface); border: 1px solid var(--color-border); object-fit: contain; padding: 4px; }
.job-card__title { font-size: 16.5px; line-height: 1.35; font-weight: 700; margin: 0; }
.job-card__company { color: var(--color-muted); font-size: 13px; margin: 3px 0 0; }
.job-card__top { display: flex; gap: 6px; flex-wrap: wrap; }
.job-card__category { font-size: 12.5px; color: var(--color-primary); font-weight: 600; margin: 0; }
.job-card__salary {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--color-ink);
  margin: 2px 0 0; background: var(--color-bg); border-radius: 6px; padding: 5px 9px; display: inline-block; width: fit-content;
}
.job-card__cta { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 14px; color: var(--color-primary); }
/* Makes the whole card clickable while keeping a real, accessible link
   as the visible CTA text (the "stretched link" pattern). */
.job-card__stretched-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.job-card__stretched-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* =========================================================
   Job carousel ("Now hiring")
   ========================================================= */
.job-carousel { position: relative; }
.job-carousel__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 4px 14px;
  scrollbar-width: none;
}
.job-carousel__track::-webkit-scrollbar { display: none; }
.job-carousel__track .job-card { flex: 0 0 calc((100% - 3 * 20px) / 4); scroll-snap-align: start; }
.job-carousel__arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; color: var(--color-ink);
  cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-md);
}
.job-carousel__arrow--prev { left: -21px; }
.job-carousel__arrow--next { right: -21px; }
.job-carousel__arrow:hover { border-color: var(--color-primary-light); color: var(--color-primary); }
.job-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.job-carousel__dots { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
.job-carousel__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--color-border); border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, width 0.2s ease; }
.job-carousel__dot.is-active { background: var(--color-primary); width: 20px; }

@media (max-width: 960px) {
  .job-carousel__track .job-card { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 760px) {
  .job-carousel__arrow { display: none; }
  .job-carousel__track .job-card { flex-basis: 86vw; }
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; }
.steps__eyebrow { font-family: var(--font-body); font-size: 12px; color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.steps__item h3 { font-size: 17px; margin: 10px 0 8px; }
.steps__item p { color: var(--color-muted); font-size: 14.5px; line-height: 1.55; margin: 0; }

.cta-band { background: var(--color-ink); padding: 52px 0; }
.cta-band__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: 1.6rem; }
.cta-band p { color: rgba(255,255,255,0.7); max-width: 460px; margin: 8px 0 0; font-size: 15px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 48px 0 20px; margin-bottom: var(--tabbar-h); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.site-footer__logo { height: 48px; margin-bottom: 12px; }
.site-footer__brand p { color: var(--color-muted); font-size: 14px; max-width: 260px; line-height: 1.55; }
.site-footer__social { display: flex; gap: 10px; margin-top: 14px; }
.site-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-bg); color: var(--color-muted);
  border: 1px solid var(--color-border); transition: color 0.15s, border-color 0.15s;
}
.site-footer__social a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.site-footer__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 14px; }
.site-footer__col a, .site-footer__country { display: block; font-size: 14.5px; padding: 5px 0; color: var(--color-ink); }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid var(--color-border); margin-top: 36px; padding-top: 18px;
  font-size: 13px; color: var(--color-muted);
}
.site-footer__legal a:hover { color: var(--color-primary); }

/* =========================================================
   Mobile app-style sticky bottom tab bar
   ========================================================= */
.app-tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 20px rgba(11,29,58,0.06);
  width: 100%;
  box-sizing: border-box;
  /* Five direct children (Home, Search, the FAB button, Jobs,
     Profile — see mobile_nav.html), each an equal 1fr grid column.
     This replaces an earlier "two flex 'side' wrappers plus an
     absolutely-positioned FAB" structure: splitting each side's own
     width evenly between 2 items has no way to also account for
     the FAB's width sitting between the sides, which measurably
     produced a smaller gap next to the FAB than between the two
     items on the same side (72.8px vs 81.5px, on a 390px screen).
     A single grid with 5 equal columns makes every gap the same by
     construction, not by tuning widths to approximate it. Only
     "display" itself is toggled (none -> grid) in the mobile media
     query below — grid-template-columns is set here on the base
     rule since it's harmless (and irrelevant) while display:none.
  */
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
/* the display:none -> grid toggle happens in the mobile media query
   below; the "display: none" above is this rule's own base for
   desktop, and is never overridden here. */
.app-tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 0; color: var(--color-muted); font-size: 10.5px; font-weight: 600;
  font-family: var(--font-display); background: none; border: none; padding: 0; cursor: pointer;
}
.app-tabbar__item svg { transition: transform 0.15s ease; flex-shrink: 0; }
.app-tabbar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.app-tabbar__item.is-active { color: var(--color-primary); }
.app-tabbar__item:active svg { transform: scale(0.88); }

.app-tabbar__item--fab {
  /* A normal grid child now (its own equal 1fr column, centered by
     construction) — position:relative only so the popped-up circle
     below can be positioned against it, not against the viewport. */
  position: relative;
}
.app-tabbar__fab {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--color-bg);
  transition: transform 0.2s ease;
}
.app-tabbar__item--fab[aria-expanded="true"] .app-tabbar__fab { transform: translateX(-50%) rotate(45deg); }
.app-tabbar__item--fab span:last-child { margin-top: 26px; }

/* "More" sheet, opened from the + button — holds secondary nav that doesn't
   fit as its own tab (categories, branches, employers, saved, auth). */
.more-sheet-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 56;
  background: rgba(11,29,58,0.45);
}
.more-sheet-backdrop.is-open { display: block; }

.more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 57;
  background: var(--color-surface);
  border-radius: 20px 20px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -10px 30px rgba(11,29,58,0.18);
}
.more-sheet.is-open { transform: translateY(0); }
.more-sheet__handle { width: 36px; height: 4px; border-radius: 2px; background: var(--color-border); margin: 4px auto 14px; }
.more-sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.more-sheet__item {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 14px; font-size: 14px; font-weight: 600; color: var(--color-ink);
}
.more-sheet__divider { border: none; border-top: 1px solid var(--color-border); margin: 14px 0; }
.more-sheet__auth { display: flex; gap: 10px; }
.more-sheet__auth .btn { flex: 1; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; min-height: 340px; }
  .hero-photo__frame { width: 220px; height: 300px; border-radius: 120px 120px 24px 24px; }
  .hero-photo__glow { width: 320px; height: 320px; }
  .hero-photo__ring { width: 270px; height: 270px; }
  .steps { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --topbar-h: 56px; }
  .topbar__nav, .topbar__actions { display: none; }
  .topbar__inner { position: relative; width: 100%; justify-content: center; }
  .topbar__brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .topbar__logo { height: 46px; }

  .hero { padding: 32px 0 28px; }
  .hero__subtitle { max-width: none; }
  .search-card { flex-direction: column; }
  .search-card__submit { width: 100%; }
  .popular-row { margin-top: 22px; }

  .section { padding: 44px 0; }
  .section__head { flex-direction: column; align-items: flex-start; }

  .cta-band__inner { flex-direction: column; text-align: left; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .site-footer { padding-bottom: calc(var(--tabbar-h) + 24px); }

  /* Mobile footer redesign: centered brand up top instead of
     left-hugging, then the link columns as a balanced 2-up grid
     (rather than one long left-aligned stacked list) so the whole
     footer reads as a deliberate block, not a lopsided column. */
  .site-footer__brand { text-align: center; }
  .site-footer__logo { margin: 0 auto 12px; }
  .site-footer__brand p { margin: 0 auto; text-align: center; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col { text-align: center; }
  .site-footer__col h4 { text-align: center; }
  .site-footer__col:nth-child(4) { grid-column: 1 / -1; } /* "Our branches" spans full width, has the most items */
  .site-footer__bottom { flex-direction: column; align-items: center; text-align: center; }

  .app-tabbar { display: grid; }
  body { padding-bottom: var(--tabbar-h); }
}

@media (min-width: 761px) {
  .app-tabbar { display: none; }
}

/* =========================================================
   Inner page header (non-homepage pages)
   ========================================================= */
.page-header { padding: 48px 0 36px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.page-header__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.01em; margin-top: 14px; }
.page-header__subtitle { color: var(--color-muted); font-size: 15.5px; max-width: 620px; margin: 12px 0 0; line-height: 1.6; }

/* =========================================================
   Job list: filter bar
   ========================================================= */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 14px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.filter-bar__field { flex: 1; min-width: 180px; }
.filter-bar__field--grow { flex: 2; }
.filter-bar__field input {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; font-family: var(--font-body); outline: none;
}
.filter-bar__field input:focus { border-color: var(--color-primary-light); }
.filter-bar__select {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; font-family: var(--font-body); background: var(--color-surface);
  outline: none; color: var(--color-ink);
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
  padding-right: 34px; box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6B84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* select2 always sets width:100% on its own container inline (see
   select2-init.js) - fine for a standalone form field, but inside
   this flex row that means "100% of the row", not "my own share of
   it", which pushes every sibling field onto a new line. Constrain
   it back to the same flex behavior as its .filter-bar__field
   siblings. */
.filter-bar .select2-container {
  width: auto !important; flex: 1; min-width: 180px;
}
.filter-bar .select2-selection--single {
  height: auto !important; border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important; padding: 10px 14px !important;
}
.filter-bar .select2-selection__rendered { padding: 0 !important; line-height: 1.4 !important; }
.filter-bar .select2-selection__arrow { height: 100% !important; }
.category-filter { margin-top: 10px; margin-bottom: 4px; }
.category-filter__input {
  width: 100%; max-width: 320px; padding: 9px 14px; border: 1px solid var(--color-border);
  border-radius: 999px; font-size: 14px; font-family: inherit;
}
.category-filter__input:focus { outline: none; border-color: var(--color-primary); }
.category-grid--compact { grid-template-columns: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* =========================================================
   Job detail page
   ========================================================= */
.job-detail__grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.job-detail__back { display: inline-block; color: var(--color-muted); font-size: 13.5px; font-weight: 600; margin-bottom: 18px; }
.job-detail__back:hover { color: var(--color-primary); }
.job-detail__header {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 26px 28px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.job-detail__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin: 14px 0 6px; }
.job-detail__company { color: var(--color-muted); font-size: 15.5px; margin: 0; }

.match-score-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 13.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px; width: fit-content;
}
.match-score-chip--high { background: #E9F7EE; color: #1E7A3E; }
.match-score-chip--mid { background: #FFF6E5; color: #92660B; }
.match-score-chip--low { background: var(--color-bg); color: var(--color-muted); }

.job-detail__salary-chip {
  display: block; margin-top: 16px;
  background: var(--color-bg); border-radius: 8px; padding: 8px 14px;
}
.job-detail__salary-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-muted); margin-bottom: 2px; }
.job-detail__salary-amount {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--color-ink);
}
.job-detail__salary-amount span { font-size: 13px; font-weight: 600; color: var(--color-muted); }

.job-detail__requirements { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.job-detail__requirement {
  font-size: 13px; font-weight: 600; color: var(--color-muted);
  background: var(--color-bg); border-radius: 999px; padding: 6px 12px;
}

.job-detail__body { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 26px 28px; }
.job-detail__body h2 { font-size: 16px; margin-bottom: 8px; }
.job-detail__body p { color: var(--color-ink); line-height: 1.7; font-size: 15px; white-space: pre-line; }

.job-detail__apply-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.job-detail__apply-card h2 { font-size: 16px; margin: 0 0 8px; }
.job-detail__apply-card p { color: var(--color-muted); font-size: 13.5px; margin: 0 0 16px; line-height: 1.5; }

.job-detail__related { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; }
.job-detail__related h3 { font-size: 14px; margin: 0 0 12px; }
.job-detail__related-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 13.5px; font-weight: 600; }
.job-detail__related-item:first-of-type { border-top: none; }
.job-detail__related-company { font-weight: 400; color: var(--color-muted); font-size: 12.5px; }

/* =========================================================
   Branches page
   ========================================================= */
.branch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.branch-card {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.branch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.branch-card.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.branch-card__top { display: flex; align-items: center; gap: 14px; }
.branch-card__flag {
  font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: var(--color-bg);
}
.branch-card__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.branch-card__meta { display: block; font-family: var(--font-body); font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.branch-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--color-border);
}
.branch-card__jobs { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.branch-card__arrow {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--color-bg); color: var(--color-primary); font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.branch-card:hover .branch-card__arrow { background: var(--color-primary); color: #fff; transform: translateX(2px); }
.branch-card--coming-soon { opacity: 0.6; cursor: default; }
.branch-card--coming-soon:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
.branch-card--coming-soon .branch-card__foot { justify-content: flex-start; }

.branches-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.branch-stat-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.branch-stat-card {
  background: var(--gradient-brand); color: #fff; border-radius: var(--radius-md);
  padding: 20px 26px; min-width: 140px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.branch-stat-card__value { font-size: 34px; font-weight: 700; font-family: var(--font-display); line-height: 1.1; }
.branch-stat-card__label { font-size: 13.5px; color: rgba(255,255,255,0.9); }
@media (max-width: 760px) {
  .branches-header { align-items: flex-start; }
}

/* =========================================================
   Employers landing page
   ========================================================= */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; }
.feature-card h3 { font-size: 16.5px; margin: 0 0 10px; }
.feature-card p { color: var(--color-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

@media (max-width: 760px) {
  .job-detail__grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar__field, .filter-bar__select, .filter-bar button { width: 100%; }
}

/* =========================================================
   Signup wizard
   ========================================================= */
.wizard-container { max-width: 720px; }
.wizard-container--wide { max-width: 960px; }

.rich-text-content { font-size: 14.5px; line-height: 1.7; color: var(--color-ink); }
.rich-text-content p { margin: 0 0 10px; }
.rich-text-content p:last-child { margin-bottom: 0; }
.rich-text-content ul, .rich-text-content ol { margin: 0 0 10px; padding-left: 22px; }
.rich-text-content blockquote { border-left: 3px solid var(--color-border); margin: 0 0 10px; padding-left: 12px; color: var(--color-muted); }
.rich-text-content a { color: var(--color-primary); }
.rich-text-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 10px 0; }

/* Shared chat-bubble thread UI - used by both sides of a contact
   conversation (templates/core/contact_thread.html, the public page,
   and templates/portal/contact_message_detail.html, the staff one).
   Each side styles its OWN messages as "self" (right-aligned, filled
   with the brand color) and the other party's as "other"
   (left-aligned, plain) - exactly reversed between the two
   templates, since each person naturally sees their own messages on
   the right, the same convention WhatsApp/any chat app uses. */
.chat-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.chat-bubble-row { display: flex; }
.chat-bubble-row--self { justify-content: flex-end; }
.chat-bubble-row--other { justify-content: flex-start; }
.chat-bubble { max-width: 72%; padding: 12px 16px; border-radius: var(--radius-md); }
.chat-bubble p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.chat-bubble__meta { display: block; font-size: 11.5px; margin-top: 6px; opacity: 0.75; }
.chat-bubble--self { background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble--other { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.chat-bubble--self a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.55); word-break: break-word; }
.chat-bubble--other a { color: var(--color-primary); text-decoration: underline; word-break: break-word; }
@media (max-width: 620px) {
  .chat-bubble { max-width: 85%; }
}

.wizard-steps { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 14px; }
.wizard-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1;
  font-size: 12px; color: var(--color-muted); text-align: center;
}
.wizard-step__num {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--color-muted);
  transition: all 0.2s ease;
}
.wizard-step__label { font-weight: 600; }
.wizard-step.is-active .wizard-step__num { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.wizard-step.is-active .wizard-step__label { color: var(--color-ink); }
.wizard-step.is-done .wizard-step__num { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wizard-step.has-error .wizard-step__num { background: #FDECEC; border-color: #E0554F; color: #C0392B; }

.wizard-progress { height: 4px; background: var(--color-border); border-radius: 999px; margin-bottom: 34px; overflow: hidden; }
.wizard-progress__bar { height: 100%; width: 20%; background: var(--gradient-brand); transition: width 0.3s ease; border-radius: 999px; }
.profile-completion__bar-track { height: 8px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.profile-completion__bar { height: 100%; background: var(--gradient-brand); border-radius: 999px; transition: width 0.3s ease; }
.profile-completion__pct { font-weight: 700; font-size: 20px; color: var(--color-ink); }

.wizard-panel { display: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }
.wizard-panel.is-active { display: block; }
.wizard-panel__title { font-size: 19px; margin: 0 0 6px; }
.wizard-panel__subtitle { color: var(--color-muted); font-size: 14px; margin: 0 0 22px; line-height: 1.55; }

.wizard-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--color-border); }
@media (max-width: 500px) {
  .wizard-actions { flex-direction: column-reverse; gap: 10px; align-items: stretch; }
  .wizard-actions > * { width: 100%; text-align: center; }
}

.form-alert {
  background: #FDECEC; border: 1px solid #F3B4B0; color: #C0392B; border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 18px; font-size: 14px;
}
.form-alert p { margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#salarySection {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 13.5px; font-weight: 600; color: var(--color-ink); }

.input {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 14.5px; font-family: var(--font-body); color: var(--color-ink);
  background: var(--color-surface); outline: none; transition: border-color 0.15s ease;
  box-sizing: border-box; line-height: 1.4;
}
.input:focus { border-color: var(--color-primary-light); }
.input.is-invalid, .input.is-invalid:focus { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }
.input--textarea { min-height: 90px; resize: vertical; }
.input--file { padding: 9px 12px; font-size: 13.5px; }
.iti { width: 100%; display: block; }
.iti input.input { width: 100%; }
.input--select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B6B84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.input--select::-ms-expand { display: none; }

.field-hint { font-size: 12.5px; color: var(--color-muted); margin: 0; }
.field-error { font-size: 12.5px; color: #C0392B; margin: 0; font-weight: 600; }
.required-badge {
  font-family: var(--font-body); font-size: 10px; font-weight: 600; color: #C0392B;
  background: #FDECEC; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
  margin-left: 6px; vertical-align: middle;
}

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.checkbox-card {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
  min-width: 0;
}
.checkbox-card:has(input:checked) { border-color: var(--color-primary); background: rgba(27,63,174,0.05); }
.checkbox-card input { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--color-primary); }
.checkbox-card span { overflow-wrap: break-word; word-break: break-word; }

.checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--color-border); border-radius: 999px; padding: 9px 16px;
  font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.checkbox-pill:has(input:checked) { border-color: var(--color-primary); background: rgba(27,63,174,0.05); }
.checkbox-pill input { accent-color: var(--color-primary); }
.checkbox-pill--standalone {
  width: 100%;
  /* Standalone checkboxes carry full sentences (minimum wage
     acknowledgment, terms acceptance) rather than the short single
     words/phrases .checkbox-pill was designed for — at this width, a
     999px "pill" radius on a box tall enough to wrap several lines
     produces a grotesque stadium/oval shape instead of a rounded
     rectangle. align-items: flex-start also keeps the checkbox
     pinned to the first line instead of drifting to the vertical
     center of the whole wrapped block. */
  border-radius: var(--radius-sm);
  align-items: flex-start;
}
.checkbox-pill--standalone input { margin-top: 3px; flex-shrink: 0; }
.checkbox-pill--standalone a {
  /* Without this, a real link (e.g. Terms/Privacy) inside this label
     inherits the global "a { color: inherit; text-decoration: none; }"
     reset and ends up visually identical to the surrounding plain
     text — functionally clickable but with no visible sign of it. */
  color: var(--color-primary); text-decoration: underline;
}
.checkbox-pill--standalone a:hover { color: var(--color-primary-dark); }

.pending-page__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.pending-page__inner .btn { margin-top: 18px; }

@media (max-width: 760px) {
  .wizard-panel { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .wizard-step__label { display: none; }
  .wizard-steps { margin-bottom: 10px; }
}

/* =========================================================
   Profile page
   ========================================================= */
.profile-layout { max-width: 1100px; margin: 0 auto; }
.profile-grid { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.profile-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.profile-main { display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-sidebar { position: static; }
}

.status-banner { border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.status-banner--pending { background: #FFF6E5; border: 1px solid #F5D48B; color: #92660B; }
.status-banner--approved { background: #E9F7EE; border: 1px solid #A9DDBB; color: #1E7A3E; }
.status-banner--rejected { background: #FDECEC; border: 1px solid #F3B4B0; color: #C0392B; }
.status-banner--info { background: var(--gradient-brand); border: 1px solid var(--color-primary); color: #fff; }
.status-banner--info strong { color: #fff; }

.profile-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); }
.profile-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.profile-card__head h2 { font-size: 16.5px; margin: 0; }

.profile-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0; }
.profile-summary__full { grid-column: 1 / -1; }
.profile-summary dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: 4px; }
.profile-summary dd { margin: 0; font-size: 14.5px; color: var(--color-ink); line-height: 1.5; }

.experience-item { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.experience-item:first-of-type { border-top: none; padding-top: 0; }
.experience-item__main h3 { font-size: 15px; margin: 0 0 2px; }
.experience-item__employer { font-size: 13.5px; color: var(--color-ink); font-weight: 600; margin: 0; }
.experience-item__dates { font-family: var(--font-body); font-size: 12px; color: var(--color-muted); margin: 2px 0 8px; }
.experience-item__desc { font-size: 13.5px; color: var(--color-muted); line-height: 1.55; margin: 0; max-width: 100%; }
.experience-item__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.experience-item__edit { font-size: 12.5px; font-weight: 600; color: var(--color-primary); }
.experience-item__delete { background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: #C0392B; cursor: pointer; font-family: inherit; }

@media (max-width: 760px) {
  .profile-summary { grid-template-columns: 1fr; }
  .experience-item { flex-direction: column; }
  .experience-item__actions { flex-direction: row; align-items: center; }
}

/* =========================================================
   Password visibility toggle
   ========================================================= */
.password-field { position: relative; display: flex; align-items: center; }
.password-field .input { padding-right: 42px; }
.password-field__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--color-muted); display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.password-field__toggle:hover { color: var(--color-ink); background: var(--color-bg); }
.password-field__toggle.is-visible { color: var(--color-primary); }

/* =========================================================
   Live (AJAX) field validation feedback
   ========================================================= */
.field-live-feedback { font-size: 12.5px; margin: 0; min-height: 16px; }
.field-live-feedback.is-valid { color: #1E7A3E; font-weight: 600; }
.field-live-feedback.is-invalid { color: #C0392B; font-weight: 600; }

/* =========================================================
   Skills tag input
   ========================================================= */
.tag-input { position: relative; }
.tag-input__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(27,63,174,0.08); color: var(--color-primary);
  border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 600;
}
.tag-chip button {
  background: none; border: none; color: var(--color-primary); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px; display: flex; opacity: 0.7;
}
.tag-chip button:hover { opacity: 1; }
.tag-input__field {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 14.5px; font-family: var(--font-body); outline: none;
  box-sizing: border-box;
}
.tag-input__field:focus { border-color: var(--color-primary-light); }
.tag-input__suggestions {
  display: none; flex-direction: column;
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; z-index: 10;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); overflow: hidden;
}
.tag-input__suggestions.is-open { display: flex; }
.tag-input__suggestion {
  text-align: left; background: none; border: none; padding: 10px 14px;
  font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--color-border);
}
.tag-input__suggestion:last-child { border-bottom: none; }
.tag-input__suggestion:hover { background: var(--color-bg); }

/* =========================================================
   Review summary (step 5)
   ========================================================= */
.review-summary__group {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 16px 18px; margin-bottom: 14px;
}
.review-summary__group h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted);
  margin: 0 0 10px;
}
.review-summary__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-top: 1px solid var(--color-border); font-size: 13.5px;
}
.review-summary__row:first-of-type { border-top: none; }
.review-summary__row span { color: var(--color-muted); flex-shrink: 0; }
.review-summary__row strong { text-align: right; font-weight: 600; color: var(--color-ink); word-break: break-word; }

/* =========================================================
   Select2 theming (country / language pickers)
   ========================================================= */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single {
  height: 44px !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important;
  display: flex !important; align-items: center; padding: 0 14px !important; background: var(--color-surface);
  box-sizing: border-box;
}
.select2-container .select2-selection__rendered {
  padding: 0 !important; font-size: 14.5px; font-family: var(--font-body); color: var(--color-ink); line-height: 42px !important;
}
.select2-container .select2-selection__arrow { height: 42px !important; right: 10px !important; top: 0 !important; }
.select2-dropdown { border-color: var(--color-border); border-radius: var(--radius-sm); overflow: hidden; font-family: var(--font-body); }
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px; outline: none; font-family: var(--font-body); font-size: 14px;
}
.select2-results__option { font-size: 14px; }
.select2-results__option--highlighted[aria-selected] { background: var(--color-primary) !important; }
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-primary-light); outline: none;
}
.select2-error-flash .select2-selection--single { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192,57,43,0.15); }

/* =========================================================
   Share profile / slug editing
   ========================================================= */
.share-profile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-profile__url {
  flex: 1; min-width: 200px; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 10px 14px; font-family: var(--font-body); font-size: 13px;
  color: var(--color-primary); overflow-x: auto; white-space: nowrap;
}
.slug-field { display: flex; align-items: center; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.slug-field span { padding: 11px 0 11px 14px; font-family: var(--font-body); font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.slug-field .input { border: none; border-radius: 0; }

/* =========================================================
   Communication preferences / static language tags
   ========================================================= */
.checkbox-list { display: flex; flex-direction: column; gap: 10px; }
.tag-chip--static { display: inline-flex; align-items: center; gap: 8px; }
.tag-chip--static em { font-style: normal; opacity: 0.75; }
.tag-chip--static a { color: var(--color-primary); text-decoration: none; }
.tag-chip--static button { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 15px; opacity: 0.7; }
.tag-chip--static button:hover { opacity: 1; }

@media (max-width: 760px) {
  .share-profile { flex-direction: column; align-items: stretch; }
  .share-profile__url { white-space: normal; word-break: break-all; }
}

/* =========================================================
   Profile hero (photo, name, status)
   ========================================================= */
.profile-hero {
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  padding: 40px 0;
}
.profile-hero__inner { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.profile-hero__photo {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--gradient-brand); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); border: 3px solid var(--color-surface);
}
.profile-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero__initial { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #fff; }
.profile-hero__info { flex: 1; min-width: 240px; }
.profile-hero__info h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 0 0 10px; }
.profile-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.profile-hero__bio { color: var(--color-muted); font-size: 14.5px; line-height: 1.6; max-width: 100%; margin: 0 0 12px; }
.profile-hero__links { display: flex; gap: 14px; flex-wrap: wrap; }
.profile-hero__links a { font-size: 13.5px; font-weight: 600; color: var(--color-primary); }
.profile-hero__links a:hover { text-decoration: underline; }
.profile-hero__edit { flex-shrink: 0; }
.profile-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.work-status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.work-status-badge__dot { width: 7px; height: 7px; border-radius: 50%; }
.work-status-badge--open_to_work { background: #E9F7EE; color: #1E7A3E; }
.work-status-badge--open_to_work .work-status-badge__dot { background: #1E7A3E; }
.work-status-badge--employed { background: rgba(27,63,174,0.08); color: var(--color-primary); }
.work-status-badge--employed .work-status-badge__dot { background: var(--color-primary); }
.work-status-badge--temporarily_unavailable { background: #FFF6E5; color: #92660B; }
.work-status-badge--temporarily_unavailable .work-status-badge__dot { background: #92660B; }
.work-status-badge--not_looking { background: var(--color-bg); color: var(--color-muted); }
.work-status-badge--not_looking .work-status-badge__dot { background: var(--color-muted); }

.status-pill { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.status-pill--approved { background: #E9F7EE; color: #1E7A3E; }
.status-pill--pending { background: #FFF6E5; color: #92660B; }
.status-pill--rejected { background: #FDECEC; color: #C0392B; }
.status-pill--neutral { background: var(--color-bg); color: var(--color-muted); }

.photo-preview { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Timeline (experience / education)
   ========================================================= */
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 16px; padding-bottom: 22px; position: relative; }
.timeline-item:not(:last-child)::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 1.5px; background: var(--color-border);
}
.timeline-item__marker {
  width: 11px; height: 11px; border-radius: 50%; background: var(--color-primary);
  margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(27,63,174,0.12);
}
.timeline-item__marker--edu { background: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(46,168,228,0.14); }
.timeline-item__body { flex: 1; padding-bottom: 4px; }
.timeline-item__top { display: flex; justify-content: space-between; gap: 12px; }
.timeline-item__body h3 { font-size: 15px; margin: 0 0 2px; }
.timeline-item__sub { font-size: 13.5px; color: var(--color-ink); font-weight: 600; margin: 0; }
.timeline-item__dates { font-family: var(--font-body); font-size: 12px; color: var(--color-muted); margin: 3px 0 8px; }
.timeline-item__current { color: #1E7A3E; font-weight: 600; }
.timeline-item__desc { font-size: 13.5px; color: var(--color-muted); line-height: 1.55; margin: 0; max-width: 100%; }
.timeline-item__actions { display: flex; gap: 10px; flex-shrink: 0; }

@media (max-width: 760px) {
  .profile-hero__inner { flex-direction: column; }
  .profile-hero__actions { flex-direction: column; width: 100%; }
  .profile-hero__actions .btn { width: 100%; }
  .timeline-item__top { flex-direction: column; gap: 6px; }
}

/* =========================================================
   Icon picker (select2 templateResult/templateSelection output)
   ========================================================= */
.icon-option { display: inline-flex; align-items: center; gap: 10px; }
.icon-option__icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; background: var(--color-bg); color: var(--color-primary);
  flex-shrink: 0;
}
.select2-selection__rendered .icon-option { line-height: normal; }

/* =========================================================
   Job application page (Quill editor + CV choice)
   ========================================================= */
.quill-editor .ql-toolbar.ql-snow {
  border-color: var(--color-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-family: var(--font-body);
}
.quill-editor .ql-container.ql-snow {
  border-color: var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-body); font-size: 14.5px;
}
.quill-editor .ql-editor { min-height: 160px; }
.quill-editor .ql-editor.ql-blank::before { color: var(--color-muted); font-style: normal; }

.cv-choice { display: flex; flex-direction: column; gap: 10px; }
.cv-choice .checkbox-pill { width: 100%; box-sizing: border-box; }
.cv-choice .checkbox-pill input { accent-color: var(--color-primary); }
.cv-choice a { color: var(--color-primary); }

.address-autocomplete__dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(20,22,27,0.12); max-height: 240px; overflow-y: auto;
}
.address-autocomplete__item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; font-size: 13.5px;
  background: none; border: none; border-bottom: 1px solid var(--color-border); cursor: pointer; font-family: inherit;
}
.address-autocomplete__item:last-child { border-bottom: none; }
.address-autocomplete__item:hover { background: var(--color-bg); }

.required-marker { color: #C0392B; font-weight: 700; }

/* Required-licenses picker: a plain list of named rows, each with its
   own on/off switch - deliberately NOT the boxed/pill checkbox look
   used elsewhere on this form, so a long list of certificates reads
   as one coherent list rather than a wrapping grid of buttons. */
.license-list { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.license-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--color-border);
}
.license-list .license-toggle:last-of-type { border-bottom: none; }
.license-toggle__name { font-size: 14px; }
.license-toggle__switch { position: relative; flex-shrink: 0; display: inline-flex; }
.license-toggle__switch input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.license-toggle__track {
  position: relative; width: 38px; height: 22px; border-radius: 11px;
  background: var(--color-border); transition: background .15s ease;
}
.license-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform .15s ease;
}
.license-toggle__switch input:checked + .license-toggle__track { background: var(--color-primary); }
.license-toggle__switch input:checked + .license-toggle__track .license-toggle__thumb { transform: translateX(16px); }
.license-toggle__switch input:focus-visible + .license-toggle__track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Preview of files just picked in the "add more" inputs, before
   they've ever been uploaded/saved - same visual shape as
   .job-media-existing below (already-saved media), so both look
   like one consistent idea to the person using them, just with a
   remove-only control (there's nothing saved yet to "replace"). */
.job-media-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.job-media-preview__item {
  position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--color-border); background: #000;
}
.job-media-preview__item img, .job-media-preview__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-media-preview__remove {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(20,22,27,0.7); color: #fff; border: none; cursor: pointer; font-size: 10px; line-height: 1;
}

.job-media-existing { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.job-media-existing__item {
  position: relative; width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-bg);
}
.job-media-existing__item img,
.job-media-existing__item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.job-media-existing__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); pointer-events: none;
}
.job-media-existing__remove,
.job-media-existing__replace {
  position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(20,22,27,0.65); color: #fff; border: none; cursor: pointer; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.job-media-existing__remove { right: 3px; }
.job-media-existing__replace { left: 3px; }
/* The icon itself IS the control - the real file input sits on top,
   invisible but still the thing actually receiving the click/tap, so
   "choose a file" opens straight from tapping ↻ with no extra step. */
.job-media-existing__replace-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

.job-detail__media { margin-top: 16px; }
.job-media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.job-media-gallery__item {
  display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; border: 1px solid var(--color-border);
}
.job-media-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.job-media-gallery__item:hover img { transform: scale(1.04); }
.job-media-gallery__video { grid-column: 1 / -1; width: 100%; border-radius: var(--radius-sm); background: #000; max-height: 360px; }

.email-verify-row { display: flex; gap: 8px; align-items: stretch; }
.email-verify-row .input { flex: 1; }
.email-verify-row .btn { white-space: nowrap; flex-shrink: 0; }
.verification-code-wrapper { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.verification-code-wrapper input { max-width: 160px; letter-spacing: 3px; font-weight: 600; text-align: center; }

.email-certified-badge {
  display: none; align-items: center; gap: 5px; padding: 8px 14px; border-radius: var(--radius-sm);
  background: #E9F7EE; color: #1E7A3E; font-size: 13px; font-weight: 700; flex-shrink: 0; white-space: nowrap;
}
.input--locked { background: var(--color-bg); color: var(--color-muted); cursor: not-allowed; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--color-muted); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.cover-letter-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cover-letter-head label { margin: 0; }

.insights-panel {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 20px 22px; margin-top: 22px;
}
.insights-panel h3 { font-size: 14.5px; margin: 0 0 14px; }
.insights-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.insights-panel__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 14px 16px; }
.insights-panel__value { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-primary); }
.insights-panel__label { display: block; font-size: 12px; color: var(--color-muted); margin-top: 4px; line-height: 1.4; }
.insights-panel__notice {
  grid-column: 1 / -1; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 13.5px; color: var(--color-muted); line-height: 1.55;
}
.insights-panel__summary {
  grid-column: 1 / -1; font-size: 14px; color: var(--color-ink); line-height: 1.5; margin-bottom: 2px;
}
.insights-panel__card--qualified { border-color: var(--color-primary); }
.insights-panel__card--qualified .insights-panel__value { color: var(--color-primary); }

/* =========================================================
   Styled clearable file input (resume, logo, etc. on edit forms)
   ========================================================= */
.file-input-widget { display: flex; flex-direction: column; gap: 8px; }
.file-input-widget__current {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.file-input-widget__link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--color-primary); min-width: 0; }
.file-input-widget__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input-widget__clear-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.file-input-widget__clear-toggle input { accent-color: var(--color-primary); width: 15px; height: 15px; cursor: pointer; }
.file-input-widget__change-label { font-size: 12.5px; color: var(--color-muted); margin: 0; }

.quill-editor--fallback {
  min-height: 160px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14.5px; line-height: 1.6; outline: none;
}
.quill-editor--fallback:focus { border-color: var(--color-primary-light); }

.already-applied {
  display: flex; align-items: center; gap: 8px;
  background: #E9F7EE; color: #1E7A3E; border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14px; font-weight: 600; margin: 0;
}

.cover-letter-content {
  background: var(--color-bg); border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 13.5px; line-height: 1.6; color: var(--color-ink);
}
.cover-letter-content p { margin: 0 0 10px; }
.cover-letter-content p:last-child { margin-bottom: 0; }
.cover-letter-content ul, .cover-letter-content ol { margin: 0 0 10px; padding-left: 20px; }
.cover-letter-content blockquote { border-left: 3px solid var(--color-border); margin: 0 0 10px; padding-left: 12px; color: var(--color-muted); }
.cover-letter-content a { color: var(--color-primary); }

.app-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.app-timeline__item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.app-timeline__item:last-child { padding-bottom: 0; }
.app-timeline__item:not(:last-child)::before {
  content: ""; position: absolute; left: 4px; top: 14px; bottom: 0; width: 1px; background: var(--color-border);
}
.app-timeline__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); margin-top: 5px; flex-shrink: 0; }
.app-timeline__item strong { display: block; font-size: 13px; }
.app-timeline__item .field-hint { font-size: 11.5px; }

/* =========================================================
   Site-wide Django messages (public site — distinct from the
   portal's own .portal-message styling)
   ========================================================= */
.site-messages { padding: 14px 0 0; }

.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  max-width: calc(100vw - 32px);
}
.toast {
  background: var(--color-ink); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.45; box-shadow: 0 6px 20px rgba(0,0,0,0.22); max-width: 360px;
  opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast--visible { opacity: 1; transform: translateY(0); }
.toast--warning { background: #b45309; }
.toast--error { background: #b91c1c; }
.toast--success { background: #15803d; }
.site-message {
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  margin-bottom: 10px;
}
.site-message--success { background: #E9F7EE; color: #1E7A3E; }
.site-message--error { background: #FDECEC; color: #C0392B; }
.site-message--info { background: rgba(46,168,228,0.1); color: var(--color-primary); }
.site-message--warning { background: #FFF6E5; color: #92660B; }

/* =========================================================
   License-required apply-flow alert
   ========================================================= */
.license-alert {
  display: flex; gap: 14px; background: #FFF6E5; color: #7A5300; border-radius: var(--radius-md);
  padding: 18px 20px; margin-bottom: 20px;
}
.license-alert svg { flex-shrink: 0; margin-top: 1px; }
.license-alert strong { display: block; font-size: 15px; margin-bottom: 4px; }
.license-alert p { margin: 0; font-size: 13.5px; line-height: 1.55; }

.license-requirement-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 14px;
}
.license-requirement-item__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.license-requirement-item__head strong { font-size: 15px; }
.license-requirement-item__reason {
  background: #FDECEC; color: #C0392B; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin: 10px 0 0;
}
.license-requirement-item__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.invoice-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 4px;
}
.invoice-card__row {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 20px;
  border-bottom: 1px solid var(--color-border); font-size: 14px;
}
.invoice-card__row:last-child { border-bottom: none; }
.invoice-card__row span { color: var(--color-muted); }
.invoice-card__row--total { background: var(--color-bg); }
.invoice-card__row--total strong { font-family: var(--font-display); font-size: 20px; color: var(--color-primary); }

/* =========================================================
   Employer job stats
   ========================================================= */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stats-grid__item { background: var(--color-bg); border-radius: var(--radius-sm); padding: 18px; text-align: center; }
.stats-grid__value { display: block; font-size: 28px; font-weight: 700; color: var(--color-primary); }
.stats-grid__label { display: block; font-size: 13px; color: var(--color-muted); margin-top: 4px; }

/* =========================================================
   Star rating input
   ========================================================= */
.star-rating { display: flex; gap: 4px; }
.star-rating__star { font-size: 32px; line-height: 1; background: none; border: none; cursor: pointer; color: var(--color-border); padding: 0; }
.star-rating__star.is-filled { color: #F2B300; }
.star-rating--readonly .star-rating__star { cursor: default; font-size: 16px; }

/* =========================================================
   Pricing table
   ========================================================= */
.pricing-header { margin-bottom: 24px; }
.pricing-header__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 12px; }
.pricing-header__subtitle { color: var(--color-muted); font-size: 15.5px; line-height: 1.6; margin: 0; }
.pricing-table { width: 100%; border-collapse: collapse; }
@media (max-width: 700px) {
  .pricing-table-card { overflow-x: auto; padding: 18px !important; }
  .pricing-table { min-width: 480px; }
}
.pricing-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); padding: 10px 14px; border-bottom: 2px solid var(--color-border); }
.pricing-table td { padding: 16px 14px; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.pricing-table tr:last-child td { border-bottom: none; }

/* =========================================================
   Get-started role choice page
   ========================================================= */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 12px; }
.choice-card {
  display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 48px 36px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.choice-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.choice-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%; background: var(--color-bg);
  color: var(--color-primary); margin-bottom: 10px;
}
.choice-card h2 { font-size: 19px; margin: 0; }
.choice-card p { font-size: 14px; color: var(--color-muted); margin: 0; line-height: 1.55; }
.choice-card__cta { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--color-primary); }

/* =========================================================
   Job seeker's "My applications" dashboard
   ========================================================= */
.app-history-card .profile-card__head { margin-bottom: 4px; }
.app-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 0;
  border-top: 1px solid var(--color-border);
}
.app-row:first-of-type { border-top: none; }
.app-row__icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--color-bg);
  display: flex; align-items: center; justify-content: center; color: var(--color-primary);
  flex-shrink: 0;
}
.app-row__info { flex: 1; min-width: 0; }
.app-row__info h3 { font-size: 14.5px; margin: 0; }
.app-row__info h3 a { color: var(--color-ink); }
.app-row__sub { color: var(--color-muted); font-size: 12.5px; margin: 2px 0 0; }
.app-row__note { color: #C0392B; font-size: 12.5px; margin: 3px 0 0; }
.app-row__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; justify-content: flex-end; }
.app-row__actions form { margin: 0; display: flex; align-items: center; }
.app-row__actions a, .app-row__actions button, .app-row__link-danger {
  font-size: 12.5px; font-weight: 600; color: var(--color-primary); text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0; font-family: inherit;
  line-height: 1; display: inline-flex; align-items: center;
}
.app-row__rate-link { width: 118px; justify-content: flex-end; }
.app-row__link-danger { color: #C0392B; }
.app-row__chip {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; flex-shrink: 0;
  background: var(--color-bg); color: var(--color-muted);
}
.app-row__chip--positive { background: #E9F7EE; color: #1E7A3E; }
.app-row__chip--negative { background: #FDECEC; color: #C0392B; }
.app-row__chip--pending { background: #FFF6E5; color: #92660B; }
@media (max-width: 640px) {
  .app-row { flex-wrap: wrap; }
  .app-row__actions { order: 3; width: 100%; padding-left: 58px; }
}

/* =========================================================
   Rating modal (auto-opened after marking an offer completed)
   ========================================================= */
.rating-modal__overlay {
  position: fixed; inset: 0; background: rgba(11, 29, 58, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  z-index: 1000;
}
.rating-modal {
  background: var(--color-surface); border-radius: var(--radius-md); padding: 28px;
  max-width: 420px; width: 100%; box-shadow: var(--shadow-md);
}
.rating-modal h2 { font-size: 18px; margin: 0 0 4px; }
.rating-modal p.field-hint { margin-bottom: 16px; }
.rating-modal__close { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--color-muted); background: none; border: none; cursor: pointer; font-family: inherit; }

/* =========================================================
   Job seeker's "My applications" — Option A (compact table)
   ========================================================= */
.app-table { width: 100%; border-collapse: collapse; }
.app-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-muted); padding: 10px 4px; font-weight: 600; border-bottom: 1px solid var(--color-border);
}
.app-table td { padding: 14px 4px; border-top: 1px solid var(--color-border); font-size: 14px; vertical-align: middle; }
.app-table tr:first-child td { border-top: none; }
.app-table__title a { font-weight: 700; font-size: 14.5px; color: var(--color-ink); }
.app-table__sub { color: var(--color-muted); font-size: 12.5px; margin-top: 2px; }
.app-table__date { color: var(--color-muted); font-size: 13px; white-space: nowrap; }
.app-table__applicants { white-space: nowrap; }
/* Locked form fields (e.g. a posting's sector/country once its fee is invoiced) */
.input:disabled, select.input:disabled, textarea.input:disabled {
  background: var(--color-bg); color: var(--color-muted); cursor: not-allowed; opacity: 0.85;
}
.app-table__count {
  display: inline-block; min-width: 34px; padding: 3px 10px; text-align: center;
  border-radius: 999px; background: rgba(27,63,174,0.08); color: var(--color-primary);
  font-weight: 700; font-size: 13.5px; transition: background 0.15s;
}
.app-table__count:hover { background: rgba(27,63,174,0.16); text-decoration: underline; }
.app-table__note { color: #C0392B; font-size: 12px; margin-top: 4px; }
.app-table__pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--color-bg); color: var(--color-muted); }
.app-table__pill--positive { background: #E9F7EE; color: #1E7A3E; }
.app-table__pill--negative { background: #FDECEC; color: #C0392B; }
.app-table__pill--pending { background: #FFF6E5; color: #92660B; }
.app-table__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-table__featured-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: #E9EEDD; color: #5C6B47;
}
.app-table__actions { white-space: nowrap; }
.app-table__actions a:not(.action-dropdown__item), .app-table__link-danger, .app-table__link-plain {
  font-size: 12.5px; font-weight: 600; color: var(--color-primary); text-decoration: none;
  background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; margin-right: 14px;
}
.app-table__link-danger { color: #C0392B; }
@media (max-width: 700px) {
  .app-table-card { overflow-x: auto; }
  .app-table { min-width: 560px; }
}

/* =========================================================
   Legal pages (Terms & Conditions, Privacy Policy)
   ========================================================= */
.legal-hero {
  position: relative; overflow: hidden;
  background: var(--gradient-brand);
  padding: 64px 0 56px;
  text-align: center; color: #fff;
}
.legal-hero::before {
  /* An organic decorative shape rather than a flat rectangle of
     color — this is the visual identity swap: a generic light-tint
     strip becomes a real, branded moment. */
  content: ""; position: absolute; top: -140px; right: -100px; width: 380px; height: 380px;
  background: var(--gradient-accent); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  opacity: 0.22; filter: blur(2px);
}
.legal-hero::after {
  content: ""; position: absolute; bottom: -160px; left: -120px; width: 320px; height: 320px;
  background: #fff; border-radius: 63% 37% 42% 58% / 55% 46% 54% 45%;
  opacity: 0.08;
}
.legal-hero__icon {
  position: relative; z-index: 1;
  width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14); color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06);
}
.legal-hero__title {
  position: relative; z-index: 1;
  font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0 0 14px; color: #fff; letter-spacing: -0.01em;
}
.legal-hero__updated {
  position: relative; z-index: 1;
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--color-primary-dark);
  background: var(--color-accent-light);
  border-radius: 999px; padding: 7px 16px;
}

.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; padding-top: 36px; }
.legal-toc {
  /* The outer <nav> stays a normal, statically-positioned grid item
     purely to reserve this column's width — position:sticky on it
     directly measured as broken (it scrolled away with the page
     instead of staying pinned: 330px -> -130px after a 500px
     scroll). Root cause is the same html/body overflow-x quirk
     already found and fixed for the main navbar and the portal
     sidebar: overflow-y silently computes to 'auto' whenever
     overflow-x is anything but 'visible', regardless of what
     overflow-y is explicitly set to — so it can't be fixed at the
     source without removing overflow-x:hidden sitewide. The actual
     visible content lives in .legal-toc__inner below, positioned
     fixed instead, with its left offset measured and applied by JS
     since this column's horizontal position shifts with viewport
     width (the container is centered, not pinned to the left edge). */
  padding-left: 4px;
}
.legal-toc__inner {
  position: fixed; width: 220px;
  /* max-height is set by JS (space left below it); long chapter lists scroll inside */
  overflow-y: auto; overscroll-behavior: contain; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.legal-toc__inner::-webkit-scrollbar { width: 6px; }
.legal-toc__inner::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } /* top is set by JS (see legal_page.html) - depends on scroll position */
.legal-toc__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 18px; }
.legal-toc ul {
  list-style: none; margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.legal-toc ul::before {
  /* the rail itself */
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px;
  background: var(--color-border); border-radius: 2px;
}
.legal-toc__progress {
  position: absolute; left: 5px; top: 6px; width: 2px; height: 0;
  background: var(--gradient-brand); border-radius: 2px;
  transition: height 0.25s ease;
}
.legal-toc li { position: relative; }
.legal-toc li a {
  font-size: 14px; color: var(--color-muted); text-decoration: none; display: block;
  padding: 7px 0; transition: color 0.15s, transform 0.15s;
}
.legal-toc li a::before {
  content: ""; position: absolute; left: -20px; top: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-border);
  transition: all 0.2s ease;
}
.legal-toc li a:hover { color: var(--color-primary); }
.legal-toc li a.is-active {
  color: var(--color-primary); font-weight: 700; transform: translateX(2px);
}
.legal-toc li a.is-active::before {
  background: var(--gradient-brand); border-color: var(--color-primary);
  /* 10px/8px (even), not 11px/9px (odd) — an odd width centered on
     an integer point needs a fractional (e.g. -21.5px) left/top
     value, which different browsers/devices can round or
     anti-alias slightly differently. Whole pixels throughout avoid
     that regardless of renderer. */
  width: 10px; height: 10px; left: -21px; top: 13px;
  box-shadow: 0 0 0 4px rgba(27,63,174,0.12);
  /* .is-active's own translateX(2px) nudges the link's text as
     intended, but pseudo-elements inherit that same transform —
     without this, the active dot visibly drifted 2px off the rail's
     center while every other dot stayed correctly aligned. */
  transform: translateX(-2px);
}
.legal-toc li.legal-toc__sub a { padding-left: 16px; font-size: 13px; }
.legal-toc li.legal-toc__sub a::before { left: -19px; width: 6px; height: 6px; top: 15px; }
.legal-toc li.legal-toc__sub a.is-active::before { width: 8px; height: 8px; left: -20px; top: 14px; transform: translateX(-2px); }

.legal-content {
  position: relative;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 56px 64px 60px; line-height: 1.8; font-size: 16px; color: var(--color-ink);
  max-width: 880px; overflow: hidden;
}
.legal-content::before {
  /* the "branded, not generic" signal at the top of the card */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-accent));
}
/* Set via JS (see legal_page.html) when there's no table of contents
   to share the row with — the content can use noticeably more of
   the available width instead of sitting narrow with empty space
   on either side. */
.legal-layout--no-toc { grid-template-columns: 1fr; }
.legal-layout--no-toc .legal-content { max-width: 1040px; margin-left: auto; margin-right: auto; }
.legal-content h2 {
  font-size: 24px; margin: 40px 0 4px; scroll-margin-top: calc(var(--topbar-h) + 16px);
  padding-bottom: 12px; position: relative;
}
.legal-content h2::after {
  content: ""; display: block; width: 36px; height: 4px; margin-top: 12px; border-radius: 2px;
  background: var(--gradient-accent);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 18px; margin: 30px 0 12px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.legal-content p { margin: 0 0 18px; }
.legal-content ul, .legal-content ol { margin: 0 0 18px; padding-left: 24px; }
.legal-content li { margin-bottom: 7px; }
.legal-content blockquote {
  position: relative;
  margin: 28px 0; padding: 22px 28px 22px 56px;
  background: linear-gradient(120deg, rgba(27,63,174,0.05), rgba(245,166,35,0.05));
  border-radius: 14px;
  color: var(--color-ink); font-style: normal; font-size: 15px;
}
.legal-content blockquote::before {
  content: "\201C"; position: absolute; left: 18px; top: 8px;
  font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--color-accent);
  font-style: normal;
}
.legal-content a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(27,63,174,0.3); }
.legal-content a:hover { text-decoration-color: var(--color-primary); }

.legal-back-to-top {
  /* Stacked above .chat-widget's 58px button (bottom:24px) with a
     12px gap, since both now coexist on legal pages: 24 + 58 + 12 = 94. */
  position: fixed; right: 28px; bottom: 94px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease;
}
.legal-back-to-top:hover { transform: translateY(-2px); color: var(--color-primary); }
.legal-back-to-top[hidden] { display: none; }

@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
  .legal-content { padding: 28px 24px; max-width: none; }
  /* Same stacking as above, on top of the mobile .chat-widget position
     (bottom: calc(var(--tabbar-h) + 16px), 58px tall): tabbar-h + 16 + 58 + 12 = tabbar-h + 86. */
  .legal-back-to-top { right: 16px; bottom: calc(var(--tabbar-h) + 86px); }
}

/* =========================================================
   Cookie consent
   ========================================================= */
.cookie-consent__banner[hidden] { display: none; }
.cookie-consent__banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200;
  max-width: 720px; margin: 0 auto;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 20px 24px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.cookie-consent__text { flex: 1; min-width: 240px; }
.cookie-consent__text strong { display: block; margin-bottom: 4px; }
.cookie-consent__text p { margin: 0; font-size: 13.5px; color: var(--color-muted); line-height: 1.5; }
.cookie-consent__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cookie-consent__modal[hidden] { display: none; }
.cookie-consent__modal {
  position: fixed; inset: 0; z-index: 201; background: rgba(11,29,58,0.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cookie-consent__modal-card {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 32px; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto;
}
.cookie-consent__modal-card h2 { margin: 0 0 8px; }
.cookie-consent__row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--color-border);
}
.cookie-consent__row strong { display: block; margin-bottom: 3px; }
.cookie-consent__row p { margin: 0; font-size: 13px; color: var(--color-muted); line-height: 1.5; }
.cookie-consent__row input { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; }

@media (max-width: 600px) {
  .cookie-consent__banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }
  .cookie-consent__actions { width: 100%; }
  .cookie-consent__actions .btn { flex: 1; }
}

/* ---------------------------------------------------------------------------
   Floating Nurai Virtual Assistant widget (templates/partials/chatbot_widget.html)
   --------------------------------------------------------------------------- */
.chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 70; }
.chat-widget__toggle {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(27,63,174,0.35);
  transition: transform 0.15s ease;
}
.chat-widget__toggle:hover { transform: translateY(-2px); }
.chat-widget__icon-close { display: none; }
.chat-widget__toggle[aria-expanded="true"] .chat-widget__icon-chat { display: none; }
.chat-widget__toggle[aria-expanded="true"] .chat-widget__icon-close { display: block; }

.chat-widget__panel {
  position: absolute; right: 0; bottom: 74px;
  width: 340px; max-width: calc(100vw - 32px); height: 480px; max-height: 70vh;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(11,29,58,0.18);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-widget__panel[hidden] { display: none; }
.chat-widget__header {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--gradient-brand); color: #fff; flex-shrink: 0;
}
.chat-widget__header-icon {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-widget__title { font-weight: 700; font-size: 14px; margin: 0; }
.chat-widget__subtitle { font-size: 11.5px; margin: 1px 0 0; opacity: 0.85; }

.chat-widget__messages {
  flex: 1; overflow-y: auto; padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 10px;
}
.chat-widget__bubble {
  max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.chat-widget__bubble--assistant { align-self: flex-start; background: var(--color-bg); color: var(--color-ink); border-bottom-left-radius: 4px; }
.chat-widget__bubble--user { align-self: flex-end; background: var(--gradient-brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-widget__bubble--error { align-self: flex-start; background: rgba(220,38,38,0.08); color: var(--color-ink); border: 1px solid rgba(220,38,38,0.25); }

.chat-widget__typing {
  display: flex; gap: 4px; padding: 0 16px 8px;
}
.chat-widget__typing[hidden] { display: none; }
.chat-widget__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted);
  animation: chatWidgetTyping 1.2s infinite ease-in-out;
}
.chat-widget__typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-widget__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatWidgetTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-widget__form {
  display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--color-border); flex-shrink: 0;
}
.chat-widget__input {
  flex: 1; border: 1px solid var(--color-border); border-radius: 999px; padding: 9px 14px;
  font-size: 13.5px; background: var(--color-bg); color: var(--color-ink);
}
.chat-widget__input:focus { outline: none; border-color: var(--color-primary); }
.chat-widget__send {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--gradient-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.chat-widget__send:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 860px) {
  /* Clears the mobile bottom tab bar (see .app-tabbar), same
     reasoning as .legal-back-to-top's own mobile override just
     above this block — a floating element pinned to a bare
     bottom:24px would otherwise sit underneath/behind the tab bar
     on phones, where that bar is always on screen. */
  .chat-widget { right: 16px; bottom: calc(var(--tabbar-h) + 16px); }
  /* A small floating card (the desktop layout) leaves awkward
     unused space above/below it on a phone screen and is fiddly to
     use with a software keyboard - every mainstream chat widget
     (WhatsApp, Intercom, etc.) takes over the full screen on a
     narrow viewport instead, which is what this does: the panel
     becomes its own fixed, full-viewport layer regardless of
     .chat-widget's own position, with its own safe-area padding
     since it now reaches the screen's real edges. */
  .chat-widget__panel {
    position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border: none;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .chat-widget__header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  /* dvh tracks the visible height as the browser's address bar
     collapses/expands (plain 100% can be taller than what's
     actually on screen on iOS Safari); chatbot-widget.js narrows it
     further to the visual viewport while the keyboard is up. */
  @supports (height: 100dvh) {
    .chat-widget__panel { height: 100dvh; max-height: 100dvh; }
  }
  /* iOS Safari zooms the whole page when a focused input's font is
     under 16px, and never zooms back out - the main reason this
     panel looked oversized after tapping to type. */
  .chat-widget__input { font-size: 16px; min-width: 0; }
  .chat-widget__messages { overscroll-behavior: contain; }
  /* Stops the page underneath scrolling (and the address bar
     resizing the layout) while the full-screen chat is open. */
  html.chat-open, html.chat-open body { overflow: hidden; }
  /* The floating toggle button is this panel's own close control
     (its icon already swaps to an X via aria-expanded, set by
     chatbot-widget.js) - at its normal bottom-right spot it would
     sit on top of the full-screen panel's own input field, so it
     relocates to the top-right instead, only while open on a
     narrow screen - using the same aria-expanded flag the icon
     swap already relies on, rather than a DOM-order-dependent
     sibling selector. */
  .chat-widget__toggle[aria-expanded="true"] {
    position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; bottom: auto;
    width: 40px; height: 40px; background: rgba(255,255,255,0.18); box-shadow: none; z-index: 80;
  }
}

/* Suggestion chips - chatbot_methodology.md §5/§7 */
.chat-widget__suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px;
}
.chat-widget__chip {
  border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary);
  border-radius: calc(var(--radius-sm) - 3px); padding: 5px 12px; font-size: 12px; cursor: pointer; /* smaller control, tighter corner - at the full radius a 26px chip still reads as an oval */
  transition: background 0.15s ease;
}
.chat-widget__chip:hover { background: rgba(27,63,174,0.08); }
.chat-widget__bubble--assistant a { color: var(--color-primary); text-decoration: underline; }

/* =========================================================
   Row action dropdown (public site) — same component already
   proven on the admin portal (static/css/portal.css), ported here
   with this site's own CSS variable names. See static/js/main.js
   for the open/close/positioning behavior.
   ========================================================= */
.action-dropdown { position: relative; display: inline-block; }
.action-dropdown__toggle {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.action-dropdown__toggle:hover { background: var(--color-bg); }
.action-dropdown__toggle svg { transition: transform 0.15s ease; }
.action-dropdown.is-open .action-dropdown__toggle svg { transform: rotate(180deg); }
.action-dropdown__menu {
  position: fixed; z-index: 200;
  min-width: 180px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: var(--shadow-md);
  padding: 6px; display: none;
}
.action-dropdown.is-open .action-dropdown__menu { display: block; }
.action-dropdown__menu form { margin: 0; }
.action-dropdown__item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--color-ink);
  cursor: pointer; white-space: nowrap; font-family: inherit; text-decoration: none;
}
.action-dropdown__item:hover { background: var(--color-bg); }
.action-dropdown__item--danger { color: #C0392B; }
.action-dropdown__item--danger:hover { background: rgba(192,57,43,0.08); }

/* =========================================================
   Job seeker profile dashboard — stat cards + status chart
   ========================================================= */
.dash-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 20px;
}
.dash-stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.dash-stat-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 4px;
}
.dash-stat-card__icon--blue { background: #EAF0FF; color: var(--color-primary); }
.dash-stat-card__icon--amber { background: #FFF6E5; color: #92660B; }
.dash-stat-card__icon--green { background: #E9F7EE; color: #1E7A3E; }
.dash-stat-card__icon--purple { background: #F1EAFB; color: #6B3FA0; }
.dash-stat-card__value { font-size: 26px; font-weight: 800; color: var(--color-ink); line-height: 1; }
.dash-stat-card__unit { font-size: 13px; font-weight: 600; color: var(--color-muted); margin-left: 4px; }
.dash-stat-card__label { font-size: 13px; color: var(--color-muted); }
@media (max-width: 900px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .dash-stats { grid-template-columns: 1fr; }
}

.status-chart { display: flex; flex-direction: column; gap: 12px; }
.status-chart__row { display: grid; grid-template-columns: 100px 1fr 32px; align-items: center; gap: 12px; }
.status-chart__label { font-size: 13px; color: var(--color-muted); }
.status-chart__track { background: var(--color-bg); border-radius: 999px; height: 10px; overflow: hidden; }
.status-chart__bar { height: 100%; border-radius: 999px; background: var(--color-primary); transition: width 0.3s ease; }
.status-chart__bar--hired { background: #1E7A3E; }
.status-chart__bar--rejected { background: #C0392B; }
.status-chart__bar--shortlisted { background: #92660B; }
.status-chart__count { font-size: 13px; font-weight: 700; color: var(--color-ink); text-align: right; }

/* =========================================================
   Profile hero — bordered share/handle boxes + circular
   profile-strength ring (job seeker and employer hero)
   ========================================================= */
.profile-hero__share-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.profile-hero__share-box {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px 14px; flex: 1; min-width: 220px;
}
.profile-hero__share-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.profile-hero__share-box .share-profile { flex-wrap: nowrap; }
.profile-hero__share-box .share-profile__url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.profile-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; max-width: 320px; }

.profile-strength-ring {
  --pct: 0;
  width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(var(--color-primary) calc(var(--pct) * 1%), var(--color-border) 0);
  display: flex; align-items: center; justify-content: center;
  margin-left: auto;
}
.profile-strength-ring::before {
  content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: var(--color-surface);
}
.profile-strength-ring { position: relative; }
.profile-strength-ring span {
  position: relative; z-index: 1; font-size: 15px; font-weight: 800; color: var(--color-primary);
}
.profile-strength-block { text-align: right; max-width: 200px; }
.profile-strength-block__label { font-size: 13px; font-weight: 700; color: var(--color-ink); margin-top: 6px; display: block; }
.profile-strength-block__hint { font-size: 12px; color: var(--color-muted); margin-top: 4px; line-height: 1.4; }

@media (max-width: 700px) {
  .profile-hero__share-row { flex-direction: column; }
  .profile-hero__side { align-items: flex-start; width: 100%; }
  .profile-strength-ring { margin-left: 0; }
  .profile-strength-block { text-align: left; max-width: none; }
}

/* =========================================================
   Notification bell (navbar) — reuses .action-dropdown for the
   open/close/positioning behavior, just its own toggle/menu content.
   ========================================================= */
.notif-bell__toggle {
  position: relative; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  justify-content: center; color: var(--color-ink);
}
.notif-bell__badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #C0392B; color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.notif-bell__menu { width: 320px; max-height: 400px; overflow-y: auto; padding: 6px; }
.notif-bell__title { font-size: 12.5px; font-weight: 700; color: var(--color-muted); padding: 6px 10px; margin: 0; }
.notif-bell__item {
  display: block; padding: 10px; border-radius: 8px; text-decoration: none;
}
.notif-bell__item:hover { background: var(--color-bg); }
.notif-bell__item--unread { background: #EAF0FF; }
.notif-bell__item--unread:hover { background: #DCE6FF; }
.notif-bell__message { display: block; font-size: 13px; color: var(--color-ink); line-height: 1.4; }
.notif-bell__time { display: block; font-size: 11.5px; color: var(--color-muted); margin-top: 3px; }
.notif-bell__empty { font-size: 13px; color: var(--color-muted); padding: 14px 10px; text-align: center; margin: 0; }

/* =========================================================
   Quotation breakdown table (employer job-posting insights panel)
   ========================================================= */
.quote-breakdown {
  grid-column: 1 / -1; background: #FFFFFF; border-radius: 12px;
  padding: 24px; border: 1px solid #E2E8F0; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.quote-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.quote-table th {
  text-align: left; font-size: 16px; font-weight: 600; color: #1D4ED8;
  padding: 10px 8px; border-bottom: 2px solid #3B82F6; background: transparent;
}
.quote-table th:last-child, .quote-table td:last-child { text-align: right; }
.quote-table td {
  padding: 10px 8px; font-weight: 500; color: #1E293B;
}
.quote-table tbody tr:nth-child(odd) { background: rgba(239,246,255,0.6); }
.quote-table tr.quote-table__total { border-bottom: 1px solid #60A5FA; }
.quote-table tr.quote-table__total td { font-weight: 600; color: #1E3A8A; }
.quote-discounts-title { color: #1D4ED8; font-weight: 600; font-size: 16px; margin: 24px 0 12px; }
.quote-discounts {
  background: rgba(239,246,255,0.7); border-radius: 12px; padding: 20px;
  font-size: 14px; color: #1E293B;
}
.quote-discounts__row {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-weight: 500;
}
.quote-discounts__row--total { border-top: 1px solid #DBEAFE; margin-top: 4px; padding-top: 10px; font-weight: 600; color: #0F172A; }
.quote-charges { margin-top: 24px; }
.quote-charges__title { font-weight: 600; color: #1D4ED8; margin: 18px 0 6px; font-size: 16px; }
.quote-charges__title:first-child { margin-top: 0; }
.quote-charges__bullet { font-size: 14px; color: #1E293B; margin: 4px 0; }
.quote-charges__bullet strong { font-weight: 600; }
.quote-charges__note { font-size: 12px; color: #64748B; margin-top: 8px; }

/* Knowledge base docs-style layout */
.kb-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; padding-top: 8px; }
.kb-sidebar {
  position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; padding-right: 20px;
  border-right: 1px solid var(--color-border);
}
.kb-sidebar__search {
  display: flex; align-items: center; gap: 8px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-bottom: 16px; color: var(--color-muted);
}
.kb-sidebar__search input {
  border: none; outline: none; font-size: 14px; font-family: inherit; width: 100%; background: transparent; color: var(--color-ink);
}
.kb-sidebar__group { margin-bottom: 18px; }
.kb-sidebar__group-label {
  display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 8px;
}
.kb-sidebar__link {
  display: block; font-size: 14.5px; color: var(--color-ink); padding: 7px 10px;
  border-radius: 8px; text-decoration: none;
}
.kb-sidebar__link:hover { background: var(--color-bg); }
.kb-sidebar__link.is-active { background: var(--color-primary); color: #fff; font-weight: 600; }

.kb-main { min-width: 0; }
.kb-article__category {
  display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--color-primary);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.kb-section { margin-bottom: 40px; }
.kb-section__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.kb-section__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #EAF0FF; color: var(--color-primary);
}
.kb-section__title { margin: 0; font-size: 19px; }
.kb-section__description { margin: 2px 0 0; font-size: 13.5px; color: var(--color-muted); }
.kb-article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kb-article-card {
  display: block; text-decoration: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 16px 18px; background: var(--color-surface);
  transition: border-color 0.15s, transform 0.15s;
}
.kb-article-card:hover { border-color: var(--color-primary-light); transform: translateY(-2px); }
.kb-article-card__title { display: block; font-weight: 600; color: var(--color-ink); font-size: 14.5px; }
.kb-article-card__summary { display: block; font-size: 13px; color: var(--color-muted); margin-top: 5px; line-height: 1.5; }

@media (max-width: 860px) {
  .kb-layout { grid-template-columns: 1fr; }

  .kb-sidebar { position: static; max-height: none; }
}

/* ---- Offer timeline (employer, job seeker and admin pages) ---- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline__item { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.timeline__item::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: var(--color-border); }
.timeline__item:last-child { padding-bottom: 4px; }
.timeline__item:last-child::before { display: none; }
.timeline__dot { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--color-muted); box-shadow: 0 0 0 4px var(--color-surface, #fff); position: relative; z-index: 1; }
.timeline__item--employer .timeline__dot, .timeline__key--employer { background: var(--color-primary); }
.timeline__item--employee .timeline__dot, .timeline__key--employee { background: var(--color-accent); }
.timeline__item--platform .timeline__dot, .timeline__key--platform { background: var(--color-muted); }
.timeline__body { min-width: 0; }
.timeline__time { display: block; font-size: 12.5px; color: var(--color-muted); margin-bottom: 2px; }
.timeline__text { margin: 0; font-weight: 600; color: var(--color-ink); }
.timeline__detail { margin: 2px 0 0; font-size: 13.5px; color: var(--color-muted); }
.timeline__empty { color: var(--color-muted); }
.timeline__legend { margin-top: 18px; font-size: 12.5px; color: var(--color-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.timeline__key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.timeline__tz { margin-left: auto; }
.timesheet { border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.timesheet__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.timesheet__photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }

/* =========================================================
   Employer dashboard on phones: job/invoice tables become cards
   (.app-table--stack, with each cell's data-label shown as a
   caption), headers and action rows wrap instead of overflowing.
   ========================================================= */
@media (max-width: 700px) {
  .app-table-card--stack { overflow-x: visible; }
  .app-table.app-table--stack { min-width: 0; }
  .app-table--stack thead { display: none; }
  .app-table--stack, .app-table--stack tbody, .app-table--stack tr, .app-table--stack td { display: block; width: 100%; }
  .app-table--stack tr {
    border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
    padding: 12px 14px; margin-bottom: 12px;
  }
  .app-table--stack td,
  .app-table--stack tr:first-child td {
    border: none; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    white-space: normal; text-align: right;
  }
  .app-table--stack td[data-label]::before {
    content: attr(data-label); font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--color-muted); text-align: left;
  }
  .app-table--stack td.app-table__primary { display: block; text-align: left; padding-top: 0; }
  .app-table--stack td.app-table__actions {
    justify-content: flex-end; border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 10px;
  }
  .app-table--stack .app-table__actions .btn { width: 100%; text-align: center; }

  .profile-card__head { flex-wrap: wrap; gap: 10px; }
  .profile-card__head h2 { flex: 1 1 100%; }
  .profile-card__head-actions { flex-wrap: wrap; }
  .profile-card__head > .btn { width: 100%; text-align: center; }

  /* Hero: two buttons per row instead of four full-width ones */
  .profile-hero { padding: 24px 0; }
  .profile-hero__inner { align-items: center; text-align: center; }
  .profile-hero__info { min-width: 0; width: 100%; }
  .profile-hero__badges, .profile-hero__links { justify-content: center; }
  .profile-hero__actions { display: grid; grid-template-columns: 1fr 1fr; flex-direction: initial; }
  .profile-hero__share-box .share-profile { flex-wrap: wrap; justify-content: center; }
  .share-profile__url { word-break: break-all; }

  .profile-summary { grid-template-columns: 1fr; }
  .profile-summary dd { word-break: break-word; }
}