/* [hidden] must always win over any display rule below it — see LESSONS.md #1.
   Never toggle visibility any other way without updating this rule first. */
[hidden] { display: none !important; }

:root {
  --ink: #0f172a;
  --muted: #5b6b7b;
  --bg: #f6f8f7;
  --surface: #ffffff;
  --border: #e3e8e5;
  --primary: #0f766e;
  --primary-dark: #0c5d57;
  --primary-soft: #e4f2f0;
  --accent: #f59e0b;
  --accent-soft: #fef3e2;
  --danger: #c0392b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 4px 18px rgba(15, 23, 42, 0.05);
  --font: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

h2, h3, h4 { line-height: 1.25; }

.muted { color: var(--muted); margin: 2px 0; font-size: 0.9rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}

.logo {
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  color: var(--primary);
  cursor: pointer;
}

.logo-dot { color: var(--accent); }

/* Logo A "pin period": the wordmark's dot became a place. */
.logo-pin { width: 0.55em; height: 0.75em; margin-left: 2px; display: inline-block; vertical-align: baseline; }

/* The language picker is a sibling of the nav (not a child), so the two can
   be placed independently per breakpoint. Pushing the nav right keeps the
   desktop line as it was: logo left, nav + language together on the right. */
.site-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }

/* Site language selector (top-right) */
.lang-select {
  margin-left: 4px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.lang-select:hover { border-color: var(--primary); }

/* Phones (the header stops fitting on one line below ~480px: the logo + nav
   alone need 441px). Rather than let the language picker fall to a stranded
   third row, it rides up beside the logo — the usual place for it on a phone —
   and the nav options get a full line to themselves.
   Squeezing nav + language onto ONE line was measured and rejected: it fits
   English by ~5px and overflows the moment a longer language loads
   ("Trouver du travail", "채용공고 등록"), and buying the space back out of
   padding would shrink tap targets on the phone-first device our seekers use. */
@media (max-width: 480px) {
  .site-header { padding: 10px 14px; row-gap: 6px; }
  .lang-select { order: 2; margin-left: auto; }
  .site-nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; gap: 2px; }
  .site-nav .nav-btn { padding: 8px 10px; }
}

/* ---------- Landing page ----------
   Editorial style informed by high-converting minimal sites (Wealthsimple
   pattern): one message per screen, big confident type, generous whitespace,
   a single primary action, and a real product visual instead of decoration.
   Rollback: restore this block + the #view-home markup from the pre-redesign
   backups (see NOTES.md, landing rollback). */

.home-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 24px 30px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.home-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 0 0 18px;
  color: var(--ink);
}

.home-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 460px;
}

.home-cta-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.home-cta {
  padding: 15px 30px;
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: 999px;
}

/* Secondary action demoted to a text link — one primary action per screen. */
.home-cta-link {
  background: transparent;
  border: none;
  color: var(--primary-dark);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 2px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.home-cta-link:hover { color: var(--primary); background: transparent; }

/* Anti-positioning strip: what this is NOT (office jobs, resumes). */
.home-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.home-points li {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding-left: 26px;
  position: relative;
}

.home-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 800;
}

/* Product visual — a stylized map + job card, drawn with brand colors. */
.home-visual svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.14)); }
.hv-map { fill: #eaf1ec; }
.hv-streets line { stroke: #d9e3dc; stroke-width: 5; stroke-linecap: round; }
.hv-park { fill: #d7e9db; }
.hv-pin rect { fill: var(--surface); stroke: var(--border); }
.hv-pin text { font-family: var(--font); font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.hv-pin-active rect { fill: var(--primary); stroke: var(--primary-dark); }
.hv-pin-active text { fill: #fff; }
.hv-card rect:first-child { fill: var(--surface); stroke: var(--border); }
.hv-card-title { font-family: var(--font); font-size: 15px; font-weight: 800; fill: var(--ink); }
.hv-card-sub { font-family: var(--font); font-size: 12px; fill: var(--muted); }
.hv-tag { fill: var(--accent-soft); }
.hv-tag-text { font-family: var(--font); font-size: 11px; font-weight: 700; fill: #92500a; text-anchor: middle; }

/* Language wall — quieter, a texture rather than a shout. */
.home-lang-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 780px;
  margin: 26px auto 0;
  padding: 0 20px;
}

.home-lang-wall span {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.home-how {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 24px;
}

.home-how h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0 0 30px;
}

.home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px;
}

.home-step { text-align: left; }

.home-step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.home-step h3 { margin: 0 0 6px; font-size: 1.1rem; letter-spacing: -0.01em; }

.home-step p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Employer band — full-width color block, the one loud moment on the page. */
.home-employer {
  background: var(--primary);
  padding: 58px 24px;
}

.home-employer-inner { max-width: 760px; margin: 0 auto; text-align: center; }

.home-employer h2 {
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.home-employer p { color: rgba(255, 255, 255, 0.82); margin: 0 0 22px; }

.home-cta-invert { background: #fff; color: var(--primary-dark); }
.home-cta-invert:hover { background: var(--primary-soft); color: var(--primary-dark); }

@media (max-width: 860px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 20px 24px;
    text-align: left;
  }
  .home-visual { max-width: 440px; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 24px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-brand .logo { font-size: 1.15rem; }

.footer-brand p { margin: 2px 0 0; font-size: 0.85rem; }

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

.footer-made { font-size: 0.85rem; }

/* ---------- Legal pages ---------- */

.legal-view { padding: 24px 16px; }

.legal-card {
  max-width: 720px;
  margin: 0 auto;
}

.legal-card h3 { margin: 18px 0 6px; font-size: 1.02rem; }

.legal-card p { font-size: 0.93rem; line-height: 1.55; }

/* Attestation checkbox on the post form */
.post-attest { margin-top: 10px; align-items: flex-start; }
.post-attest span { font-size: 0.85rem; line-height: 1.4; }

/* In-app confirmation dialog (replaces window.confirm) */
.modal-confirm { max-width: 380px; }
.modal-confirm p { margin: 0 0 16px; line-height: 1.5; }

.nav-btn {
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
}

.nav-btn:hover { background: var(--primary-soft); color: var(--primary-dark); }

.nav-btn.active { background: var(--primary-soft); color: var(--primary-dark); }

.nav-btn.nav-cta {
  background: var(--accent);
  color: #422006;
  font-weight: 700;
}

.nav-btn.nav-cta:hover { background: #e18f06; color: #422006; }
.nav-btn.nav-cta.active { background: #e18f06; color: #422006; }

main { padding: 20px; max-width: 1280px; margin: 0 auto; }

/* ---------- Buttons & inputs ---------- */

button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap; /* button labels stay on one line, never wrap */
}

button:hover { background: var(--primary-dark); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.btn-ghost:hover { background: var(--bg); color: var(--ink); }

.btn-small { padding: 7px 12px; font-size: 0.83rem; }

.btn-block { width: 100%; }

/* A posting the seeker has already applied to — disabled, quietly confirmed. */
.btn-applied {
  background: var(--primary-soft);
  color: var(--primary-dark);
  cursor: default;
}
.btn-applied:hover { background: var(--primary-soft); }

/* Header log-out sits to the right of the nav, subdued. */
.nav-logout { color: var(--muted); margin-left: 4px; }
.nav-logout:hover { background: var(--bg); color: var(--ink); }

/* Banner shown on the profile view when a logged-out seeker tried to apply. */
.apply-login-banner {
  max-width: 420px;
  margin: 0 auto 12px;
  background: var(--accent-soft);
  color: #7c4a03;
  border: 1px solid #f2d9a8;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* Buttons flow to a new line as whole units rather than wrapping their text. */
.form-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* Single-button (acknowledgement) dialogs: one clean full-width button,
   never a lone button stranded to one side. */
.form-actions.single { justify-content: stretch; }
.form-actions.single button { flex: 1 1 100%; }

/* "Verified business" badge — a trust pill beside the business name. */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 8px 1px 4px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
.verified-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.58rem;
}

input, select, textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
}

textarea { min-height: 74px; resize: vertical; }

label { font-size: 0.88rem; font-weight: 500; }

fieldset { border: none; padding: 0; margin: 0; }

.form-error { color: var(--danger); font-size: 0.85rem; min-height: 1.1em; margin: 2px 0 0; }

/* The locked contact-email field: it mirrors the verified sign-in address
   (support changes it, not the employer), so it should LOOK read-only —
   an editable-looking box that ignores typing reads as broken. */
#template-form input[readonly] {
  /* A grey that reads as "locked" even on a bright screen — var(--bg) was
     indistinguishable from white at high brightness (founder 2026-07-20). */
  background: #e2e6e4;
  border-color: #d0d6d3;
  color: var(--muted);
  cursor: default;
}

/* "Free right now" — an amber pill beside a section heading. Same amber as
   the Boost button on purpose: this is the paid-feature colour, used here to
   say "this one costs nothing yet". */
.free-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

/* Archive of closed/removed postings: a record, not a second dashboard, so
   the cards are quieter than live ones. */
.archived-job-card {
  opacity: 0.85;
  padding-top: 12px;
  padding-bottom: 12px;
}

.archived-job-card h4 { margin: 6px 0 2px; }

.badge-removed {
  background: #f1f0ee;
  color: #6b6b6b;
}

/* Destructive ghost button (Remove a posting). Reads as an exit, not as a
   primary action: outlined like the other secondary buttons, and only the
   text carries the warning colour until hover. */
.btn-danger {
  color: var(--danger);
  border-color: #e6c4bf;
}

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

/* "Forgot password?" — a quiet text link under the login button, not a
   second call-to-action competing with it. The :hover override matters: the
   global button:hover repaints the background primary-dark, which on a
   transparent text link meant teal-on-teal (unreadable). Text links darken
   their TEXT on hover (the Google/Apple/Stripe pattern), never gain a box. */
.link-forgot {
  background: none;
  border: none;
  padding: 0;
  margin: 6px 0 0;
  color: var(--primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}

.link-forgot:hover { background: none; color: var(--primary-dark); }

/* Positive form notice (e.g. "confirmation email sent") — same slot as
   .form-error but reassuring, not alarming. */
.form-info { color: var(--primary-dark); font-size: 0.85rem; margin: 2px 0 0; line-height: 1.45; }

.hint { font-size: 0.83rem; color: var(--muted); margin: 4px 0 0; }

.success-title { font-weight: 800; font-size: 1.5rem; color: var(--primary-dark); margin: 4px 0 8px; letter-spacing: -0.01em; }

/* Application-submitted confirmation card — clean, centered, reassuring. */
.apply-success { text-align: center; padding: 8px 4px 4px; }

.success-check {
  width: 56px;
  height: 56px;
  margin: 4px auto 12px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 1.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-job {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 14px;
}

.success-job-title { font-weight: 700; font-size: 1rem; margin: 0 0 2px; }

.success-job .muted { margin: 0; }

.success-reassure { font-size: 0.92rem; color: var(--ink); line-height: 1.55; margin: 0 0 16px; }

.apply-success #apply-success-note { margin: 0 0 14px; }

/* ---------- Filters bar ---------- */

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  /* Bottom-align the blocks: translated labels wrap to 2 lines in some
     languages (fr "SALAIRE MIN ($/H)") — labels grow UP, controls stay on
     one shared line no matter the language. */
  align-items: flex-end;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Controls stretch to fill the bar edge-to-edge — no dead whitespace. */
.filter-block { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 170px; }

.filter-block-wide { flex: 1.4 1 0; }

.filter-block-pay { flex: 0.55 1 0; min-width: 110px; }

/* Reserve no space for the (usually empty) location error so all filter
   controls sit on the same line — remove it from layout entirely when empty
   (its flex gap alone pushed the Near-me box 6px off the shared baseline). */
.filters-bar .form-error { min-height: 0; margin: 0; }
.filters-bar .form-error:empty { display: none; }

/* The distance slider is a bare control — give it the same 38px control
   height as the inputs beside it so the row reads as one line. */
.range-row { min-height: 38px; }

#pay-filter { width: 100%; }

/* Clear button + count pill share one visual language: same pill height,
   count filled / clear outlined. Sit together at the end of the row. */
.filter-end {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* Sort control — same pill language as the rest of the filter row. */
.sort-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

#clear-filters {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}

.filter-results {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.filter-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------- Language picker (shared multi-select popup) ---------- */

.lang-picker { position: relative; width: 100%; min-width: 0; }

.lang-picker-trigger {
  width: 100%;
  text-align: left;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 32px 9px 11px;
  font-weight: 500;
  font-size: 0.92rem;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-picker-trigger::after {
  content: '▾';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.8rem;
}

.lang-picker-trigger:hover { background: var(--surface); border-color: var(--primary); color: var(--muted); }

.lang-picker-trigger.has-selection { color: var(--ink); font-weight: 600; }

/* All languages visible at once — no scrolling to find yours. */
.lang-picker-pane {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: min(360px, 88vw);
  max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
}

/* Opens above the trigger when there's no room below (set by JS). */
.lang-picker-pane.pane-up {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Search box at the top of the picker */
.lang-search-wrap {
  position: relative;
  margin-bottom: 6px;
}

.lang-search {
  width: 100%;
  padding: 7px 30px 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

/* Clear (×) button inside the search box */
.lang-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.lang-search-clear:hover { background: var(--border); color: var(--text); }

/* "Done" button — closes the picker pane; selections already applied live */
.picker-done {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.picker-done:hover { background: var(--primary-dark); }

/* Pinned selected chips — stay visible above the list while searching */
.lang-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 2px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 5px 3px 10px;
  border-radius: 999px;
}

.lang-chip button {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.lang-chip button:hover { background: rgba(255, 255, 255, 0.45); }

.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px 6px;
  /* The language list is long — cap its height and let it scroll so the
     whole list is reachable (and the pane can't run off small cards). */
  max-height: 230px;
  overflow-y: auto;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
}

/* Picker rows are <label>s, but they are NOT form-field labels: keep the
   checkbox BESIDE its text even inside containers that stack their field
   labels vertically (.auth-card label / .modal label set flex-direction:
   column and would otherwise win on specificity — this is why the profile
   pickers stacked the checkbox above the language name). */
.check-list .check-item {
  flex-direction: row;
  gap: 8px;
}

/* A picker checkbox is NOT a form field, but `.modal input` / `.auth-card
   input` set width:100% on every input they contain — same specificity as
   `.check-item input` and later in this file, so they win, and a 16px box
   inflates to fill the row. The name beside it is then squeezed to an
   ellipsis ("영…", "En…"). Second instance of the leak in LESSONS.md
   2026-07-14, so the remedy is the same: an explicit component override that
   out-ranks the container, plus a static test (jsdom can't see the cascade).
   flex-basis is pinned too — width alone still lets flex shrink it. */
.check-list .check-item input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  padding: 0;
}

/* Each language name stays on one line; the wider column keeps even long
   names (Portuguese, Haitian Creole) from wrapping. */
.check-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Category names are longer — one column, full text. */
.check-list-cats { grid-template-columns: 1fr; }
.check-list-cats .check-item span { overflow: visible; }

/* Two-option panes (job type) never need the full 360px pane — size to the
   trigger so the box can't hang off the edge of the page. */
#jobtype-picker .lang-picker-pane { min-width: 100%; }
#profile-types-picker .lang-picker-pane { min-width: 220px; }

/* Profile "Job interests": 12 categories read best as a 2×6 grid — two-word
   labels stay on one line, and the eye scans two short columns faster than
   one long one or four cramped ones. Pane sized like the Find-work
   dropdowns (360px), not wider — tighter, less whitespace. */
#profile-cats-options { grid-template-columns: 1fr 1fr; }

/* Profile pickers match the Find-work filter dropdowns: compact triggers,
   not full-column-width bars swimming in whitespace. */
#profile-lang-picker,
#profile-cats-picker,
#profile-types-picker { max-width: 320px; }

/* Interest controls: label LEFT of its box, one clean line per control —
   no stacked label rows, no dead whitespace. */
.interest-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.interest-line .picker-field-label { flex: 0 0 110px; margin: 0; }

.interest-line .lang-picker { flex: 1 1 auto; }

@media (max-width: 640px) {
  .interest-line { flex-wrap: wrap; }
  .interest-line .picker-field-label { flex-basis: 100%; }
}

.check-item:hover { background: var(--primary-soft); }

.check-item input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* "Other" language entry at the bottom of every picker pane */
.lang-other {
  display: flex;
  gap: 6px;
  padding: 8px 4px 2px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}

.lang-other-input { flex: 1; min-width: 0; padding: 6px 9px; font-size: 0.86rem; }

.lang-other-add { flex-shrink: 0; }

.lang-other-error { color: var(--danger); font-size: 0.78rem; margin: 4px 4px 0; }

/* "Only jobs where I speak every required language" toggle in the pane */
.lang-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}

.lang-mode-toggle input { width: auto; accent-color: var(--primary); margin: 0; flex-shrink: 0; }

#category-filter { width: 100%; }

.picker-field { display: flex; flex-direction: column; gap: 5px; }
.picker-field-label { font-size: 0.88rem; font-weight: 500; }

/* ---------- Location combobox ---------- */

.combobox { position: relative; width: 100%; min-width: 0; display: block; }

.combobox input { width: 100%; }

/* Clear (×) button for the "Near me" location box */
.origin-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.origin-clear:hover { background: var(--border); color: var(--text); }

/* room for the × so typed text doesn't slide under it */
#origin-input { padding-right: 30px; }

.combobox-pane { display: block; }

.combobox-pane {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}

.combobox-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 0.92rem;
  font-weight: 500;
}

.combobox-option:hover { background: var(--primary-soft); color: var(--primary-dark); }

.combobox-locate {
  color: var(--primary-dark);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
}

.combobox-empty { color: var(--muted); font-size: 0.85rem; padding: 9px 10px; margin: 0; }

.range-row { display: flex; gap: 10px; align-items: center; min-width: 170px; }

/* min-width:0 lets the slider shrink so the "N km" value stays inside the
   block instead of overflowing into Min pay. */
.range-row input[type="range"] { flex: 1; min-width: 0; padding: 0; accent-color: var(--primary); }

.range-value { flex-shrink: 0; }

.range-value { font-size: 0.86rem; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }

#distance-filter-num {
  width: 44px;
  padding: 5px 6px;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}

#distance-filter-num::-webkit-outer-spin-button,
#distance-filter-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Seeker layout ----------
   Desktop: a fixed app shell — header and filters always visible, the page
   itself never scrolls; only the job list scrolls, beside an always-visible
   map. Mobile: filters scroll away, the map pins to the top. */

.seeker-layout {
  display: grid;
  grid-template-columns: minmax(320px, 2fr) 3fr;
  gap: 16px;
  align-items: stretch;
}

/* List column: sort toolbar pinned above the (scrolling) job list. */
.list-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.list-toolbar {
  display: flex;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.map-container {
  background: #edf3ee;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 0;
}

@media (min-width: 901px) {
  #view-seeker {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 98px); /* viewport minus sticky header + main padding */
  }

  #view-seeker[hidden] { display: none; }

  .filters-bar { flex-shrink: 0; }

  .seeker-layout { flex: 1; min-height: 0; }

  .list-col { height: 100%; }

  .job-list { flex: 1; overflow-y: auto; min-height: 0; }

  .map-container { height: 100%; }
}

.lokajobs-map { width: 100%; height: 100%; display: block; }
.lokajobs-map-bg { fill: #edf3ee; }
.lokajobs-map-streets line { stroke: #dfe8e1; stroke-width: 2; }
.lokajobs-map-water { fill: #d3e6f3; }
.lokajobs-map-water-label { fill: #8fb3cc; font-size: 11px; font-style: italic; font-family: var(--font); }
.lokajobs-map-label {
  fill: #93a79b;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lokajobs-map-pin { cursor: pointer; }
.lokajobs-map-pin-callout { stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 2 2; opacity: 0.6; }
.lokajobs-map-origin { fill: #d0362b; stroke: #fff; stroke-width: 2; }
.lokajobs-map-pin-bubble { fill: var(--primary); stroke: #fff; stroke-width: 1.5; }
.lokajobs-map-pin-tail { fill: var(--primary); }
.lokajobs-map-pin:hover .lokajobs-map-pin-bubble,
.lokajobs-map-pin:hover .lokajobs-map-pin-tail { fill: var(--primary-dark); }
.lokajobs-map-pin-active .lokajobs-map-pin-bubble,
.lokajobs-map-pin-active .lokajobs-map-pin-tail { fill: var(--ink); }
/* Boosted pin — amber, brown text (same family as the card badge). Active
   state still wins (the pin the user tapped goes dark), so the rule for
   boosted sits BEFORE active in the cascade would lose; keep boosted here and
   let .lokajobs-map-pin-active below re-assert. */
.lokajobs-map-pin-boosted .lokajobs-map-pin-bubble,
.lokajobs-map-pin-boosted .lokajobs-map-pin-tail { fill: var(--accent); }
.lokajobs-map-pin-boosted .lokajobs-map-pin-price { fill: #422006; }
.lokajobs-map-pin-boosted.lokajobs-map-pin-active .lokajobs-map-pin-bubble,
.lokajobs-map-pin-boosted.lokajobs-map-pin-active .lokajobs-map-pin-tail { fill: var(--ink); }
.lokajobs-map-pin-boosted.lokajobs-map-pin-active .lokajobs-map-pin-price { fill: #fff; }
.lokajobs-map-pin-price {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  pointer-events: none;
}

/* Price-bubble pins rendered as OverlayView divs on the real Google map. */
/* Origin pin: marks the searched "Near me" place. Our own overlay div —
   always renders, unlike the deprecated google.maps.Marker. Brand teardrop
   pin (the logo pin), tip anchored on the location. */
.gmap-origin {
  position: absolute;
  width: 26px;
  height: 36px;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.4));
  z-index: 2;
  pointer-events: none;
}

.gmap-origin svg { width: 100%; height: 100%; display: block; }

.gmap-pin {
  position: absolute;
  transform: translate(-50%, -130%);
  background: var(--primary);
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
  cursor: pointer;
  white-space: nowrap;
  z-index: 1;
}

.gmap-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--primary);
}

.gmap-pin:hover { background: var(--primary-dark); z-index: 2; }
.gmap-pin:hover::after { border-top-color: var(--primary-dark); }

/* Boosted Google pin — amber with brown text; the tapped pin still goes dark. */
.gmap-pin-boosted { background: var(--accent); color: #422006; z-index: 2; }
.gmap-pin-boosted::after { border-top-color: var(--accent); }

.gmap-pin-active { background: var(--ink); color: #fff; z-index: 3; }
.gmap-pin-active::after { border-top-color: var(--ink); }

/* ---------- Job cards ---------- */

.job-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  flex-shrink: 0;
}

.job-card-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow); }

/* Boosted ("Featured") postings — amber, the same accent family as the
   language tags and the map pin, so "featured" reads as one visual language
   across the card and the map. A quiet amber ring, not a shout: it signals
   priority without drowning the free postings that are the supply we depend
   on. */
.job-card-boosted {
  border-color: #f2d9a8;
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow);
}

/* In the card's normal flow, on its own line above the title — NOT a floating
   corner tag. A corner badge (position:absolute, negative top) was clipped by
   the list's overflow and collided with the pay pill; keeping it in flow makes
   the card grow to fit it, so it can never clip or overlap. */
.boost-badge {
  display: inline-block;
  margin-bottom: 8px;
  background: var(--accent);
  color: #422006;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
}

/* The pill's size is tuned for UPPERCASE Latin at 800 weight — but Plus
   Jakarta Sans covers Latin only, so Korean/Chinese/Hindi/Punjabi labels
   render in a system fallback font whose glyphs carry less visual weight at
   10px (and these scripts have no uppercase to fill the pill). Compensate:
   a modest size bump and no tracking (letter-spacing between CJK/Hangul
   glyphs reads as broken, not emphasized). i18n stamps the page language on
   <html lang>, which is what these match. */
[lang='ko'] .boost-badge, [lang^='zh'] .boost-badge,
[lang='hi'] .boost-badge, [lang='pa'] .boost-badge {
  font-size: 0.74rem;
  letter-spacing: 0;
}

/* Employer-dashboard "Featured until …" chip — amber, inline with the status
   badge (not a floating corner tag like the seeker card's). */
.boost-badge-inline { background: var(--accent-soft); color: #7c4a03; }

.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }

.job-card h3 { margin: 0; font-size: 0.95rem; }

.pay-badge {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.job-business {
  font-weight: 600;
  color: var(--muted);
  margin: 1px 0 0;
  font-size: 0.83rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }

.lang-tag {
  background: var(--accent-soft);
  color: #92500a;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.job-meta {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 2px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.empty-state { color: var(--muted); padding: 24px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }

/* ---------- Employer: auth card ---------- */

.auth-card {
  max-width: 420px;
  margin: 32px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.auth-card h2 { margin: 0; }

.auth-tabs {
  display: flex;
  margin: 18px 0;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 4px;
  gap: 4px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 8px;
  font-weight: 600;
}

.auth-tab:hover { background: transparent; color: var(--ink); }

.auth-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Social sign-in: Google's button guidelines — white surface, neutral border,
   the multicolour G, and never restyle the mark itself. */
.oauth-block { margin-top: 14px; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  color: #3c4043;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-google:hover { background: #f7f8f8; border-color: #c9d2cd; }
.google-g { width: 18px; height: 18px; flex-shrink: 0; }

/* "or" rule between social and the email form */
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  color: var(--muted);
  font-size: 0.8rem;
}
.oauth-divider::before,
.oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-card form { display: flex; flex-direction: column; gap: 12px; }

.auth-card label { display: flex; flex-direction: column; gap: 5px; }

/* ---------- Dashboard shell: left-rail section nav + panels ----------
   Approved mockup 2026-07-22, shared by the employer dashboard and the
   seeker profile. The rail is a quiet column of buttons; the active one
   gets the soft-teal treatment and a 3px bar. Below 860px the rail becomes
   a horizontal tab strip that scrolls sideways (phone-first seekers). */

.dash-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

/* min-width:0 matters on phones: without it the grid item's auto minimum
   carries the tab strip's intrinsic width into the single column and the
   whole page scrolls sideways (found in preview, 2026-07-24). */
.dash-side { position: sticky; top: 76px; min-width: 0; }

.dash-who { padding: 2px 12px 14px; }
.dash-who h2 { margin: 0; font-size: 1.12rem; line-height: 1.3; overflow-wrap: anywhere; }

.dash-nav { display: flex; flex-direction: column; gap: 2px; }

/* Quiet buttons: the global button rule paints teal — override BOTH rest and
   hover states (LESSONS: the forgot-password link was unreadable because only
   one state was overridden). */
.dash-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  color: #33475a;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  position: relative;
}

.dash-nav-btn:hover { background: #e9efed; color: var(--ink); }

.dash-nav-btn svg { width: 18px; height: 18px; flex: 0 0 18px; color: #94a3b8; }

.dash-nav-btn.dash-nav-active { background: var(--primary-soft); color: var(--primary-dark); }
.dash-nav-btn.dash-nav-active:hover { background: var(--primary-soft); color: var(--primary-dark); }
.dash-nav-btn.dash-nav-active svg { color: var(--primary); }

.dash-nav-btn.dash-nav-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

.dash-count {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 700;
  color: #94a3b8;
}
.dash-nav-btn.dash-nav-active .dash-count { color: var(--primary-dark); }

.dash-main { min-width: 0; }

.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 14px;
}

.dash-panel-head h3 { margin: 0; font-size: 1.2rem; }

.dash-panel > .card { margin-top: 0; }

/* Account panel: a small readonly identity block. The grey matches the
   locked contact-email field (founder 2026-07-19). */
.dash-account-field { display: flex; flex-direction: column; gap: 5px; max-width: 420px; }
.dash-account-field input[readonly] { background: #e2e6e4; color: var(--muted); }
.dash-account-body .form-actions { margin-top: 14px; }

/* Preferences: stacked save-on-change toggles with their hints. */
.pref-toggles { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pref-toggles .hint { margin: 0 0 12px 26px; }

@media (max-width: 860px) {
  .dash-shell { grid-template-columns: 1fr; gap: 10px; }
  .dash-side { position: static; }
  .dash-who { padding: 0 2px 8px; }
  .dash-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  /* width:auto undoes the rail's width:100% — with it left in place every
     tab inflates to the container width and the strip (and page) overflow. */
  .dash-nav-btn { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 9px 12px; }
  /* Active bar moves to the bottom edge, tab-style. */
  .dash-nav-btn.dash-nav-active::before {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }
  .dash-count { margin-left: 6px; }
}

.field-row { display: flex; gap: 12px; }
.field-row label { flex: 1; }

.employer-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.employer-job-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* One left-aligned row for everything status-like on a posting card: posting
   status, Featured-until, hire count. Chips wrap as a unit, so nothing lands
   at a random x when an address or title is long (the old layout put status
   right of the title and the hire pill inline after the meta TEXT — when the
   meta wrapped, the pill drifted right with dead space beside it). */
.job-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }

.employer-job-card h4 { margin: 0; font-size: 0.98rem; }

.badge {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-active { background: #e5f6ec; color: #166534; }
.badge-paused { background: var(--accent-soft); color: #92500a; }
.badge-filled { background: #e6e9ee; color: #475569; }

.employer-job-meta { color: var(--muted); font-size: 0.86rem; margin: 6px 0 12px; }

.employer-job-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Boost — amber like everything "featured", so the button, the badge and the
   map pin read as one visual language. */
.btn-boost { background: var(--accent-soft); color: #7c4a03; border: 1px solid #f2d9a8; font-weight: 700; }
.btn-boost:hover { background: #fbe3bd; }

/* Boost sheet duration options: three equal cards, selection by ring (the
   radio itself is visually hidden — sized explicitly so the `.modal input`
   width:100% container rule can't inflate it; see LESSONS 2026-07-17). */
/* Top margin gives the compact "Most popular" pill clearance above the box. */
.boost-options { display: flex; gap: 8px; margin: 14px 0 12px; }
/* Two classes (0,2,0) so this outranks `.modal label` (0,1,1) — the same
   container leak as the picker rows (LESSONS 2026-07-14/17). Every card is
   the same height with content vertically centred, so the days/price sit at
   the same line across all three — the ribbon is absolute and shifts nothing
   (fixes the popular card's text dropping below its neighbours'). */
.boost-options .boost-option {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-height: 58px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
}
.boost-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.boost-option-days { font-weight: 700; font-size: 0.92rem; }
.boost-option-price { color: var(--muted); font-size: 0.85rem; }

/* Selected — unmistakable: amber FILL + border + a checkmark, not just a ring
   that's easy to miss on a card that already has an amber-ish neighbour. */
.boost-option-selected { border-color: var(--accent); background: var(--accent-soft); }
.boost-option-selected .boost-option-price { color: #7c4a03; }
.boost-option-selected::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #7c4a03;
}

/* Middle tier: a subtle amber border + a COMPACT "Most popular" pill on the
   top edge. The pill is deliberately small — clearly narrower than the box,
   not a full-width ribbon (founder 2026-07-17). Selected state (amber fill +
   ✓) still reads on top. */
.boost-options .boost-option-popular { border-color: #f2d9a8; }
.boost-option-tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #422006;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 999px;
}
.boost-loss-line { margin: 0 0 12px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.boost-what { margin: 8px 0; font-size: 0.9rem; }

.employer-job-actions button { padding: 7px 12px; font-size: 0.83rem; }

.applicants-heading { font-weight: 700; font-size: 0.85rem; margin: 14px 0 4px; }
.applicants-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each applicant is its own rounded card: one radius step below the parent
   posting card (12px → 10px) with a soft background shift — separation by
   surface, not by loud borders. The white details box nests inside it. */
.applicant-row {
  display: block;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Status + actions sit at NAME level, anchored right (founder call). The
   identity column is guaranteed a majority of the width so names and
   languages never get crushed; when the action cluster runs out of room it
   wraps WITHIN its right-aligned column, staying at the top right. */
.applicant-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Identity cluster: avatar + name/languages — one glance says who and what.
   Avatar anchors to the TOP so it lines up with the name, not the middle of
   a tall block. */
.applicant-id { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 55%; }


.applicant-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.applicant-name-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.applicant-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

/* Second line: languages first (the screening signal — NEVER truncated,
   they wrap instead), city after, capped so a long area name can't create
   a wall of whitespace (full text in the tooltip). */
.applicant-meta-line { display: flex; align-items: baseline; gap: 4px 8px; min-width: 0; font-size: 0.8rem; flex-wrap: wrap; }

.applicant-langs-inline { color: var(--ink); font-weight: 600; }

/* City is always fully readable — it has its own line under the name, so
   long area names simply wrap instead of truncating behind a tooltip. */
.applicant-loc {
  color: var(--muted);
  overflow-wrap: break-word;
  min-width: 0;
}

/* The languages row: fit pill + spoken languages side by side, full card
   width, with breathing room above and below. One row by default; wraps
   only when the list genuinely runs out of space. */
.applicant-langrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-size: 0.8rem;
}

/* Status chip beside the name — a notch smaller, still readable. */
.applicant-name-line .badge {
  font-size: 0.68rem;
  padding: 2px 8px;
}

/* Status + actions: a tidy right-aligned stack — badge on top, buttons in
   one row beneath. Predictable at every width, nothing interleaves. */
.applicant-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  flex: 0 1 auto;
  max-width: 45%;
  padding-top: 2px; /* optically level with the name line */
}

.applicant-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.applicant-side button { padding: 5px 10px; font-size: 0.78rem; }

/* Clear air between the collapsed Company profile bar and the postings —
   the bar must read as its own clickable, expandable control. */
.employer-jobs { margin-top: 24px; }

.applicant-details {
  margin: 0; /* the languages row above provides the spacing */
  padding: 2px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Label/value rows — always visible, scannable, no prose blob. */
.detail-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.85rem;
}

.detail-row + .detail-row { border-top: 1px solid var(--border); }

.detail-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 2px;
}

.detail-value { min-width: 0; overflow-wrap: break-word; line-height: 1.45; }

/* Job-card facts: business + posted-age on one line; type/availability as
   glanceable tags below the address. */
.job-business-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.job-age { color: var(--muted); font-size: 0.76rem; white-space: nowrap; flex-shrink: 0; }

.job-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }

.fact-tag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Employer-side candidate list — same rounded-card treatment as applicant
   cards: identity left, invite right, pills row, full-width details box.
   Capped height (founder request 2026-07-16): with many candidates the list
   scrolls inside its own box instead of pushing the whole dashboard down. */
#candidates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Past hires gets the same treatment (shorter — it's a reference list). */
#past-hires-list { max-height: 300px; overflow-y: auto; padding-right: 4px; }

.candidate-row {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* Interests (job type + category) in teal — visually distinct from the
   amber language pills. */
.tag-teal {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.candidate-row .applicant-id { flex: 1 1 auto; min-width: 0; }

.candidate-actions { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }

.candidate-interests { flex: 1 1 100%; }

.candidate-details { flex: 1 1 100%; margin: 0; }

@media (max-width: 640px) {
  .detail-row { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 640px) {
  .applicant-details { margin-left: 0; }
}

.lang-match {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.lang-match-full { background: #e5f6ec; color: #166534; }
.lang-match-partial { background: var(--accent-soft); color: #92500a; }
.lang-match-none { background: #fdecea; color: #b3261e; }

.applicant-langs { margin: 4px 0; align-items: center; }

.applicant-meta { color: var(--muted); font-size: 0.84rem; margin: 2px 0 0; }

.applicant-experience { color: var(--muted); font-size: 0.84rem; margin: 3px 0 0; line-height: 1.4; }

.applicant-experience-label { font-weight: 700; color: var(--ink); }

.applicants-hidden-note { color: var(--muted); font-size: 0.8rem; margin: 8px 0 0; }

.badge-new { background: var(--accent); color: #422006; }
.badge-accepted { background: #dbeafe; color: #1e40af; }
.badge-hired { background: #e5f6ec; color: #166534; }
.badge-rejected { background: #e6e9ee; color: #475569; }
.badge-expired { background: #fdecea; color: #b3261e; }

.lang-match { cursor: help; }

/* An expired posting's prompt reads as a warning, not a success. */
.expired-prompt { background: #fdf2f0; border-color: #f6d5cd; color: #91352a; }

/* Positions / hire progress on a posting — lives in .job-chip-row */
.positions-pill {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.positions-pill.positions-full { background: #e5f6ec; color: #166534; }

.fill-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #f0f9f4;
  border: 1px solid #cfe9d8;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #166534;
}

.fill-prompt button { padding: 5px 11px; font-size: 0.8rem; }

/* The "quiet so far" hint — text only (no button; the Boost button in the
   actions row is the single CTA). Amber so it ties to that button visually. */
.boost-hint { margin: 0 0 10px; font-size: 0.83rem; color: #7c4a03; }

/* Text-style buttons for low-emphasis actions (show hidden, view job, withdraw) */
.linklike {
  background: transparent;
  border: none;
  color: var(--primary-dark);
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.linklike:hover { background: transparent; color: var(--primary); }

.linklike-danger { color: #b3261e; }
.linklike-danger:hover { color: #911d17; }

/* ---------- Dashboard cards (company profile, past hires) ---------- */

.card {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.card h3 { margin: 0 0 2px; }

/* The seeker profile contains the language dropdown, which opens beyond the
   card — allow it to overflow so it isn't clipped. */
#seeker-profile-card { overflow: visible; }

.past-hire-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.past-hire-row:first-of-type { border-top: none; }

.past-hire-info { flex: 1; min-width: 220px; }

.past-hire-meta { color: var(--muted); font-size: 0.84rem; margin: 2px 0 0; }

.past-hire-row.no-rehire .past-hire-info { opacity: 0.55; }

.no-rehire-tag {
  background: #fdecea;
  color: #b3261e;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.past-hire-row button { padding: 5px 10px; font-size: 0.78rem; }

/* ---------- Seeker profile — compact enough to fit one screen ---------- */

.profile-card { max-width: 640px; margin: 12px auto; padding: 22px 26px; }

.profile-card input[readonly] { background: var(--bg); color: var(--muted); }

.profile-card .field-row .picker-field { flex: 1; min-width: 0; }

/* Inline checkbox rows (e.g. "Save as my profile" in the apply form) */
.check-inline { flex-direction: row !important; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; }

.check-inline input { width: auto !important; margin: 0; accent-color: var(--primary); }

/* ---------- Employer settings ---------- */

#employer-settings textarea { width: 100%; font-size: 0.9rem; }

#employer-settings form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

#employer-settings label { display: flex; flex-direction: column; gap: 5px; }

#employer-settings input { width: 100%; }

/* Tap-to-insert template tokens */
.token-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.token-chip {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px dashed var(--primary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.token-chip:hover { background: var(--primary); color: #fff; }

/* Seeker "My applications" rows */
.my-app-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.my-app-row:first-of-type { border-top: none; }

.my-app-info { flex: 1; min-width: 0; }

.my-app-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

.my-app-actions { display: flex; gap: 12px; }

/* Accept-email modal: every action is one full-width button in a single
   column, so they all share an edge with the primary above them.
   Side-by-side was tried and rejected: buttons are `white-space: nowrap`, so
   a label's own text width becomes its minimum and the longer one refuses to
   shrink to an even half (196px vs 188px in English) — and each of the 8
   languages would land on a different mismatch. Stacking aligns by
   construction, so no translation can break the row. */
.accept-email-secondary { flex-direction: column; }

/* ---------- Apply modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal input, .modal select, .modal textarea { width: 100%; padding-top: 8px; padding-bottom: 8px; }

.modal label { font-size: 0.86rem; }

.field-row label { min-width: 0; }

.modal h3 { margin: 0 0 10px; }

.modal form { gap: 9px; margin-top: 10px; }

.modal .hint { margin-top: 0; }

/* The job detail view gets breathing room — it's for reading, not scanning. */
#job-detail-modal .modal { padding: 30px; max-width: 480px; }

#job-detail-modal h2 { margin: 0; font-size: 1.3rem; }

#job-detail-modal .job-business { margin: 6px 0 14px; white-space: normal; font-size: 0.9rem; }

#detail-langs { margin: 8px 0 20px; }

#job-detail-modal .job-meta { white-space: normal; font-size: 0.88rem; margin: 0 0 6px; line-height: 1.5; }

.detail-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 22px 0 8px;
}

.detail-description { margin: 0 0 24px; font-size: 0.94rem; line-height: 1.65; }

/* One-tap apply confirmation */
.apply-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0 14px;
}

.apply-summary p { margin: 2px 0; font-size: 0.9rem; }

.apply-summary-name { font-weight: 700; font-size: 0.95rem; }

.applicant-contact { font-size: 0.85rem; margin: 3px 0 0; font-weight: 500; }

.employer-job-store { font-weight: 600; color: var(--muted); font-size: 0.86rem; margin: 4px 0 0; }

.modal h2 { margin: 0 0 2px; }

/* Apply modal: the pre-submit "Apply" heading is understated so the
   post-submit "Application submitted!" is clearly the loudest text. */
#apply-modal-title { font-size: 1.1rem; }

.modal form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

.modal label { display: flex; flex-direction: column; gap: 5px; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  main { padding: 12px; }

  /* Apply modal actions: primary full-width, secondaries share the next row —
     no stranded single button on its own line. */
  #apply-confirm .form-actions, #apply-form .form-actions { flex-wrap: wrap; }
  #apply-confirm-submit, #apply-form button[type="submit"] { flex: 1 1 100%; }
  #apply-confirm-edit, #apply-confirm-cancel, #apply-cancel-btn { flex: 1 1 0; }

  /* Compact 2-column filter grid: languages and location full-width,
     category and pay share a row, count pill tucked at the end. */
  .filters-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 10px;
  }

  .filter-block-wide { grid-column: 1 / -1; }

  .lang-picker, .combobox { min-width: 100%; }

  .filter-block { gap: 4px; }

  .filter-title { font-size: 0.68rem; }

  .filters-bar input, .filters-bar .lang-picker-trigger { padding-top: 7px; padding-bottom: 7px; }

  #pay-filter { width: 100%; }

  .range-row { min-height: 34px; min-width: 0; }

  .filter-end {
    grid-column: 1 / -1;
    justify-self: end;
    margin: 0;
  }

  .filter-results { padding: 4px 11px; font-size: 0.8rem; }

  .seeker-layout { display: flex; flex-direction: column; }

  /* Map-first on mobile: map pinned to the top of the screen while the
     list scrolls beneath it (the header scrolls away to give it room). */
  .site-header { position: static; }

  .map-container {
    order: -1;
    position: sticky !important; /* see note on the desktop rule */
    top: 8px;
    z-index: 40;
    width: 100%;
    height: 40vh;
    max-height: 360px;
  }

  .job-list { padding-right: 0; }

  .filters-bar { gap: 14px; padding: 12px; }

  .field-row { flex-direction: column; }

  .auth-card { margin: 12px auto; padding: 20px; }
}