/* ==========================================================================
   Hirely design system
   --------------------------------------------------------------------------
   One stylesheet, four surfaces: public marketplace, candidate area, employer
   area, platform administration. They differ in density and chrome, never in
   type scale, colour or control shape.

   Direction. Every inset, margin, padding, border and radius here uses CSS
   logical properties (inline-start / inline-end). RTL is therefore the same
   layout resolved against a different writing mode, not a mirrored stylesheet
   maintained in parallel. Add no physical left/right property to this file.

   Colour. A restrained palette: one ink family for text and structure, one
   brand family for the primary action, and semantic colours used only for
   status. Deep teal was chosen as the primary because it reads as considered
   and is not the blue every other job board uses.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/platform/fonts/PlusJakartaSans-Variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/platform/fonts/Vazirmatn-Variable.woff2") format("woff2");
}

:root {
  /* Ink -- text and structure */
  --ink-950: #0c121b;
  --ink-900: #16202e;
  --ink-800: #222d3d;
  --ink-700: #344054;
  --ink-600: #4a5568;
  --ink-500: #5f6b7d;
  --ink-400: #8a94a3;
  --ink-300: #c9c3b8;
  --ink-200: #e7e1d6;
  --ink-100: #f3eee6;
  --ink-50:  #fbf8f3;
  --white:   #ffffff;

  /* Brand -- the single primary action colour */
  --brand-900: #083a33;
  --brand-800: #0c4a41;
  --brand-700: #0f5a4f;
  --brand-600: #14655a;
  --brand-500: #1a7d6e;
  --brand-300: #7cc0b3;
  --brand-100: #d6ece7;
  --brand-50:  #eff8f5;

  /* Semantic -- status only, never decoration */
  --ok-600: #15803d;  --ok-50: #eefaf1;
  --warn-600: #a35a08; --warn-50: #fdf4e7;
  --danger-600: #b42318; --danger-50: #fdf0ef;
  --info-600: #1f5fa8;  --info-50: #eef4fb;
  --accent-600: #8a5a12; /* verification badge, used sparingly */

  /* Expressive -- brand fields, illustration and highlight only */
  --saffron-500: #efb02f;
  --saffron-400: #f6c453;
  --saffron-200: #fbe3a4;
  --saffron-100: #fdf1d2;
  --coral-500: #ef6f4c;
  --coral-700: #b8431f;
  --coral-100: #fde3d9;
  --mint-100: #dcefe8;
  --sky-100: #e1ecf7;
  --lilac-100: #ece6f7;

  /* Surfaces */
  --bg: var(--ink-50);
  --surface: var(--white);
  --surface-muted: var(--ink-100);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);

  /* Type. System stack first; Persian needs a face with real Arabic-script
     coverage, so Vazirmatn/Tahoma are named before the generic fallback. */
  --font-sans: "Plus Jakarta Sans", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-fa: "Vazirmatn", "Plus Jakarta Sans", Tahoma, sans-serif;
  --text-display: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --text-5xl: 2.625rem;

  --text-xs: 0.75rem;   --text-sm: 0.8125rem; --text-base: 1rem;
  --text-md: 1rem;      --text-lg: 1.125rem;  --text-xl: 1.375rem;
  --text-2xl: 1.5rem;   --text-3xl: 1.75rem;  --text-4xl: 2rem;

  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6;

  /* Spacing -- a 4px scale, used for everything */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;   --s20: 5rem;

  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 32, 46, 0.06);
  --shadow: 0 1px 2px rgba(22, 32, 46, 0.05), 0 6px 16px -4px rgba(22, 32, 46, 0.10);
  --shadow-lg: 0 2px 4px rgba(22, 32, 46, 0.05), 0 24px 48px -12px rgba(22, 32, 46, 0.22);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  --container: 1200px;
  --header-h: 72px;

  color-scheme: light;
}

/* Dark theme. Defined by redefining tokens only -- no component rule below
   needs to know the theme exists. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink-950); --surface: var(--ink-900); --surface-muted: var(--ink-800);
    --border: #26303e; --border-strong: #35415380;
    --text: #e8edf3; --text-muted: #98a4b6;
    --brand-100: #14342f; --brand-50: #0f2724; --brand-300: #5fae9f;
    --ok-50: #10261a; --warn-50: #2a1e0c; --danger-50: #2a1413; --info-50: #0f1f31;
    --saffron-100: #2b2413; --saffron-200: #4a3b17; --coral-100: #33201a;
    --mint-100: #13302b; --sky-100: #152435; --lilac-100: #221d33;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--ink-950); --surface: var(--ink-900); --surface-muted: var(--ink-800);
  --border: #26303e; --border-strong: #354153;
  --text: #e8edf3; --text-muted: #98a4b6;
  --brand-100: #14342f; --brand-50: #0f2724; --brand-300: #5fae9f;
  --ok-50: #10261a; --warn-50: #2a1e0c; --danger-50: #2a1413; --info-50: #0f1f31;
    --saffron-100: #2b2413; --saffron-200: #4a3b17; --coral-100: #33201a;
    --mint-100: #13302b; --sky-100: #152435; --lilac-100: #221d33;
  color-scheme: dark;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
[lang="fa"] body, body[dir="rtl"] { font-family: var(--font-fa); line-height: 1.8; }
h1,h2,h3,h4,h5 { margin: 0 0 var(--s3); line-height: var(--leading-tight); font-weight: 700; letter-spacing: -0.02em; }
[lang="fa"] h1, [lang="fa"] h2, [lang="fa"] h3, [lang="fa"] h4 { letter-spacing: 0; line-height: 1.45; }
h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }  h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--s3); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
ul, ol { margin: 0 0 var(--s3); padding-inline-start: var(--s6); }
hr { border: 0; border-block-start: 1px solid var(--border); margin: var(--s6) 0; }

/* Focus. Never removed -- only replaced with something clearer. */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute; inset-inline-start: var(--s4); inset-block-start: -100px;
  background: var(--brand-600); color: var(--white);
  padding: var(--s3) var(--s4); border-radius: var(--radius); z-index: 100;
}
.skip-link:focus { inset-block-start: var(--s2); }

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

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

/* ── Layout ────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s4); }
.container-narrow { max-width: 760px; }
.stack > * + * { margin-block-start: var(--s4); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }
.mb0 { margin-block-end: 0; }

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } }

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.site-header .container { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: 1.3rem; color: var(--text); letter-spacing: -0.03em; }
.brand:hover { text-decoration: none; }
.brand-logo { inline-size: 34px; block-size: 34px; flex: none; }
.brand-logo .bl-base { fill: var(--brand-600); }
.brand-logo .bl-dot { fill: var(--saffron-400); transform-origin: 27px 9px; transition: transform .35s var(--ease-out); }
.brand:hover .bl-dot { transform: scale(1.25); }
.brand-mark {
  inline-size: 26px; block-size: 26px; border-radius: 8px;
  background: var(--brand-600);
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
}
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a, .nav-link {
  position: relative;
  padding: var(--s2) var(--s3); border-radius: var(--radius-pill);
  color: var(--ink-700); font-weight: 600; font-size: .95rem;
  transition: background-color .18s ease, color .18s ease;
}
.site-nav a:hover, .nav-link:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--brand-700); background: var(--mint-100); }
.header-actions { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  min-block-size: 38px; padding-block: 0; padding-inline: var(--s3) var(--s6);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235f6b7d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") no-repeat;
  background-position: right 10px center;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--text); cursor: pointer;
}
[dir="rtl"] .lang-select { background-position: left 10px center; }

.nav-toggle.btn, .nav-toggle { display: none; }
.nav-only { display: none; }
@media (max-width: 960px) {
  .nav-toggle.btn, .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; inset-block-start: var(--header-h);
    inset-inline: 0; background: var(--surface); border-block-end: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    flex-direction: column; align-items: stretch; padding: var(--s3) var(--s4) var(--s5); gap: 2px;
  }
  .site-nav.open { display: flex; animation: nav-in .22s var(--ease-out); }
  .site-nav a { padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: 1.05rem; }
  .nav-only { display: block; }
  .site-header .container { gap: var(--s2); }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Below ~620px the header cannot hold brand, menu, language and two auth
   buttons without overflowing. The secondary auth link is dropped here rather
   than allowed to push the row wider than the viewport -- it is still present
   inside the nav panel (.nav-only), so no control becomes unreachable. */
@media (max-width: 620px) {
  .header-actions { gap: var(--s1); }
  .header-actions .btn-ghost,
  .header-actions .header-secondary { display: none; }
  .brand { font-size: 1.15rem; }
  .brand-logo { inline-size: 30px; block-size: 30px; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s2) var(--s4); min-block-size: 40px;
  font: inherit; font-weight: 650; font-size: .95rem; line-height: 1.2;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-border); border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease-out), box-shadow .18s ease;
}
.btn:hover { text-decoration: none; background: var(--surface-muted); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inline-size: 18px; block-size: 18px; border-radius: 50%;
  border: 2px solid var(--btn-fg); border-block-start-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-primary { --btn-bg: var(--brand-600); --btn-fg: var(--white); --btn-border: var(--brand-600); }
.btn-primary:hover { --btn-bg: var(--brand-700); --btn-border: var(--brand-700); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-600) 70%, transparent); }
.btn-dark { --btn-bg: var(--ink-900); --btn-fg: var(--white); --btn-border: var(--ink-900); }
.btn-dark:hover { --btn-bg: var(--ink-800); --btn-border: var(--ink-800); }
.btn-saffron { --btn-bg: var(--saffron-400); --btn-fg: var(--ink-900); --btn-border: var(--saffron-400); }
.btn-saffron:hover { --btn-bg: var(--saffron-500); --btn-border: var(--saffron-500); }
.btn-ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--ink-700); }
.btn-ghost:hover { --btn-fg: var(--text); }
.btn-danger { --btn-bg: var(--surface); --btn-fg: var(--danger-600); --btn-border: var(--danger-600); }
.btn-danger:hover { --btn-bg: var(--danger-50); }
.btn-sm { min-block-size: 34px; padding: var(--s1) var(--s3); font-size: var(--text-sm); }
.btn-lg { min-block-size: 52px; padding: var(--s3) var(--s6); font-size: 1rem; }
.btn-block { display: flex; inline-size: 100%; }
.icon { inline-size: 1.15em; block-size: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s6);
}
.card-tight { padding: var(--s4); }
.card-flat { background: transparent; border-style: dashed; }
.card-link { display: block; color: inherit; transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .22s ease; }
.card-link:hover { text-decoration: none; border-color: var(--brand-300); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-title { font-size: 1.05rem; margin: 0 0 var(--s3); }

/* Job card -- information density is the point here: title, company, place,
   arrangement and salary must all be readable in one glance. */
.job-card { display: flex; gap: var(--s4); align-items: flex-start; }
.job-card h3 { font-size: 1.05rem; margin-block-end: var(--s1); }
.job-card .company { color: var(--text-muted); font-weight: 600; }
.job-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); }
.logo {
  inline-size: 46px; block-size: 46px; flex: 0 0 auto; border-radius: var(--radius);
  background: var(--brand-600); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  overflow: hidden;
}

/* Shared marketing and portal primitives (first used on the homepage). */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700);
}
.eyebrow::before { content: ""; inline-size: 22px; block-size: 2px; border-radius: 2px; background: currentColor; }
[lang="fa"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--ink-700);
  font-size: .78rem; font-weight: 650; white-space: nowrap;
}
.pill .icon { inline-size: 14px; block-size: 14px; }
.pill-mint { background: var(--mint-100); color: var(--brand-700); }
.pill-saffron { background: var(--saffron-100); color: #7a5208; }
.pill-coral { background: var(--coral-100); color: var(--coral-700); }
.verified { display: inline-flex; align-items: center; gap: 3px; color: var(--brand-600); font-size: .75rem; font-weight: 650; }
.verified .icon { inline-size: 15px; block-size: 15px; }
.mono {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 44px; block-size: 44px; border-radius: 12px;
  font-weight: 800; font-size: 1.15rem; line-height: 1;
}
.mono-0 { background: var(--brand-600); color: #fff; }
.mono-1 { background: var(--saffron-400); color: var(--ink-900); }
.mono-2 { background: var(--coral-500); color: #fff; }
.mono-3 { background: var(--ink-900); color: var(--saffron-400); }
.mono-4 { background: #5b4bb7; color: #fff; }
.mono-sm { inline-size: 36px; block-size: 36px; border-radius: 10px; font-size: .95rem; }
.mono-lg { inline-size: 64px; block-size: 64px; border-radius: 18px; font-size: 1.6rem; box-shadow: 0 0 0 4px var(--surface); }
.mono-xl { inline-size: 96px; block-size: 96px; border-radius: 24px; font-size: 2.4rem; box-shadow: 0 0 0 5px var(--surface), var(--shadow); }
.cover-0 { background: radial-gradient(circle at 20% 120%, var(--brand-500) 0 30%, transparent 31%), linear-gradient(135deg, var(--brand-700), var(--brand-900)); }
.cover-1 { background: radial-gradient(circle at 85% -20%, #fff6 0 25%, transparent 26%), repeating-linear-gradient(135deg, var(--saffron-400) 0 14px, var(--saffron-500) 14px 28px); }
.cover-2 { background: radial-gradient(circle at 80% 50%, var(--saffron-400) 0 16%, transparent 17%), var(--coral-500); }
.cover-3 { background: radial-gradient(rgba(255,255,255,.25) 1.2px, transparent 1.4px) 0 0 / 14px 14px, var(--ink-900); }
.cover-4 { background: linear-gradient(120deg, #5b4bb7 0 55%, #8f7fe6 55%); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-block-end: var(--s6); }
.section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin: 0 0 var(--s1); letter-spacing: -0.035em; }
[lang="fa"] .section-head h2 { letter-spacing: 0; }
.section-head p { margin: 0; color: var(--text-muted); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--brand-700); }
.link-arrow .icon { transition: translate .2s var(--ease-out); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .icon { translate: 3px 0; }
[dir="rtl"] .link-arrow:hover .icon { translate: -3px 0; }

/* Page header band: a quiet version of the homepage brand field. */
.page-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--saffron-100); border-block-end: 1px solid var(--saffron-200);
  padding-block: var(--s8) var(--s8);
}
.page-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: radial-gradient(rgba(22,32,46,.14) 1px, transparent 1.2px); background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000); mask-image: linear-gradient(100deg, transparent 45%, #000);
}
[dir="rtl"] .page-band::before { -webkit-mask-image: linear-gradient(260deg, transparent 45%, #000); mask-image: linear-gradient(260deg, transparent 45%, #000); }
.page-band h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.75rem); letter-spacing: -0.04em; margin: 0 0 var(--s2); }
[lang="fa"] .page-band h1 { letter-spacing: 0; }
.page-band p { color: var(--ink-700); margin: 0; max-inline-size: 60ch; }

/* ── Tags, chips, badges ───────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--ink-700);
  font-size: .78rem; font-weight: 650; border: 1px solid transparent; white-space: nowrap;
}
.tag-brand { background: var(--mint-100); color: var(--brand-700); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--mint-100); color: var(--brand-700);
  border: 1px solid transparent; font-size: var(--text-sm); font-weight: 650;
  transition: background-color .18s ease, border-color .18s ease;
}
.chip button, .chip .chip-x {
  all: unset; cursor: pointer; line-height: 1; padding: 2px 4px;
  border-radius: var(--radius-pill); color: inherit; font-size: 1rem;
}
.chip .chip-x:hover, .chip button:hover { background: rgba(15,90,79,.14); }
.chip .chip-x:focus-visible, .chip button:focus-visible { outline: 2px solid var(--brand-500); }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 700;
}
.badge-verified { background: var(--mint-100); color: var(--brand-700); }
.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: var(--surface-muted); color: var(--ink-600);
}
.status::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.status-submitted, .status-draft, .status-pending { background: var(--info-50); color: var(--info-600); }
.status-under_review, .status-paused { background: var(--saffron-100); color: #7a5208; }
.status-shortlisted, .status-interview, .status-offer, .status-published, .status-approved, .status-active { background: var(--mint-100); color: var(--brand-700); }
.status-hired { background: var(--ok-50); color: var(--ok-600); }
.status-not_selected, .status-withdrawn, .status-closed, .status-rejected, .status-suspended { background: var(--danger-50); color: var(--danger-600); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.field { margin-block-end: var(--s5); }
.field > label, .form-label {
  display: block; margin-block-end: var(--s2);
  font-weight: 650; font-size: .9rem; color: var(--text);
}
.field .hint { display: block; margin-block-start: var(--s1); font-size: var(--text-sm); color: var(--text-muted); }
.field .error { display: flex; gap: 6px; align-items: center; margin-block-start: var(--s2); font-size: var(--text-sm); color: var(--danger-600); font-weight: 650; }
.field .error::before { content: "!"; display: inline-grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--danger-600); color: #fff; font-size: 11px; font-weight: 800; flex: none; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="tel"], input[type="number"], input[type="date"],
select, textarea {
  inline-size: 100%; padding: var(--s2) var(--s4); min-block-size: 46px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); appearance: none;
  box-shadow: inset 0 1px 1px rgba(22,32,46,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-block-size: 130px; resize: vertical; line-height: 1.6; padding-block: var(--s3); }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235f6b7d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-position: right 14px center; background-repeat: no-repeat;
  padding-inline-end: var(--s10);
}
[dir="rtl"] select { background-position: left 14px center; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 18%, transparent); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-600) 12%, transparent); }
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
legend { font-weight: 700; font-size: .9rem; padding: 0; margin-block-end: var(--s2); }
.check { display: flex; align-items: center; gap: var(--s3); padding: var(--s1) 0; cursor: pointer; font-size: var(--text-base); }
.check input { inline-size: 18px; block-size: 18px; min-block-size: 0; accent-color: var(--brand-600); flex: 0 0 auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding-block-start: var(--s4); border-block-start: 1px solid var(--border); margin-block-start: var(--s2); }/* Search bar -- the primary entry point on the results page */

/* Stepper for multi-step forms */
.stepper { list-style: none; margin: 0 0 var(--s6); padding: 0; display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.stepper li { flex: 1 0 auto; }
.stepper a, .stepper span {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  border-radius: var(--radius-pill); color: var(--text-muted); font-weight: 650; font-size: .88rem; white-space: nowrap;
}
.stepper .step-n {
  display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%;
  background: var(--surface-muted); color: var(--ink-600); font-size: .8rem; font-weight: 800;
  transition: background-color .25s ease, color .25s ease;
}
.stepper [aria-current="step"] { background: var(--mint-100); color: var(--brand-700); }
.stepper [aria-current="step"] .step-n, .stepper .is-done .step-n { background: var(--brand-600); color: #fff; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
table.data { inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th, table.data td { padding: var(--s3) var(--s4); text-align: start; border-block-end: 1px solid var(--border); vertical-align: middle; }
table.data th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); background: var(--bg); font-weight: 700; white-space: nowrap; }
[lang="fa"] table.data th { text-transform: none; letter-spacing: 0; font-size: .82rem; }
table.data tbody tr { transition: background-color .15s ease; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--mint-100) 45%, transparent); }
table.data tr:last-child td { border-block-end: 0; }

/* ── Alerts, empty and loading states ──────────────────────────────────── */
.alert {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--radius); border: 1px solid transparent;
  font-size: .95rem; margin-block-end: var(--s4); font-weight: 550;
}
.alert::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; margin-block-start: .55em; }
.alert-info { background: var(--info-50); color: var(--info-600); border-color: color-mix(in srgb, var(--info-600) 20%, transparent); }
.alert-success { background: var(--ok-50); color: var(--ok-600); border-color: color-mix(in srgb, var(--ok-600) 20%, transparent); }
.alert-warn { background: var(--warn-50); color: var(--warn-600); border-color: color-mix(in srgb, var(--warn-600) 20%, transparent); }
.alert-error { background: var(--danger-50); color: var(--danger-600); border-color: color-mix(in srgb, var(--danger-600) 20%, transparent); }
.empty {
  display: grid; justify-items: center; gap: var(--s2); text-align: center;
  padding: var(--s10) var(--s5);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface);
}
.empty-art { inline-size: 96px; block-size: 96px; margin-block-end: var(--s2); }
.empty h3 { margin: 0; font-size: 1.15rem; }
.empty p { color: var(--text-muted); max-inline-size: 46ch; margin: 0 0 var(--s3); }
.skeleton { background: linear-gradient(90deg, var(--surface-muted), var(--bg), var(--surface-muted)); background-size: 200% 100%; border-radius: var(--radius); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.toast {
  position: fixed; inset-block-end: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); inset-inline-start: 50%; translate: -50% 0;
  z-index: 80; padding: var(--s3) var(--s5); border-radius: var(--radius-pill);
  background: var(--ink-900); color: #fff; font-weight: 650; box-shadow: var(--shadow-lg);
  animation: toast-in .25s var(--ease-out);
}
[dir="rtl"] .toast { translate: 50% 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Dialog ────────────────────────────────────────────────────────────── */
dialog {
  border: 0; border-radius: var(--radius-lg);
  padding: 0; max-inline-size: min(520px, calc(100vw - 2rem));
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
dialog[open] { animation: toast-in .2s var(--ease-out); }
dialog::backdrop { background: rgba(12, 18, 27, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-head { padding: var(--s6) var(--s6) 0; }
.dialog-body { padding: var(--s4) var(--s6); }
.dialog-foot { padding: var(--s4) var(--s6) var(--s6); display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination { display: flex; gap: var(--s2); align-items: center; justify-content: center; flex-wrap: wrap; margin-block-start: var(--s8); }
.pagination a, .pagination span {
  min-inline-size: 40px; min-block-size: 40px; padding: 0 var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--ink-700); font-weight: 650; background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.pagination a:hover { border-color: var(--brand-500); text-decoration: none; color: var(--text); background: var(--mint-100); }

.pagination [aria-current="page"] { background: var(--brand-600); border-color: var(--brand-600); color: var(--white); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  margin-block-start: var(--s16); padding-block: var(--s16) var(--s8);
  background: var(--brand-900); color: #cfe0db;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(color-mix(in srgb, #fff 18%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.site-footer .container { position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s10); }
.footer-brand .brand { color: #fff; }
.footer-brand .bl-base { fill: #fff; }
.footer-brand p { max-inline-size: 34ch; margin-block: var(--s4) 0; color: #b7cdc7; }
.footer-col h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--saffron-400); margin-block-end: var(--s4); }
[lang="fa"] .footer-col h2 { text-transform: none; letter-spacing: 0; font-size: .95rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.site-footer a { color: #e6efec; }
.site-footer a:hover { color: #fff; }
.footer-base {
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center;
  margin-block-start: var(--s12); padding-block-start: var(--s6);
  border-block-start: 1px solid rgba(255,255,255,.12); font-size: var(--text-sm); color: #9fb8b1;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Page furniture ────────────────────────────────────────────────────── */
.page { padding-block: var(--s8); }
.page-head { margin-block-end: var(--s6); }
.page-head h1 { margin-block-end: var(--s2); }
.breadcrumb { display: flex; gap: var(--s2); font-size: var(--text-sm); color: var(--text-muted); margin-block-end: var(--s4); flex-wrap: wrap; }/* Two-pane discovery: list plus detail on wide screens, stacked on narrow.
   Every job still has its own URL -- the pane is an enhancement, not the
   only way to reach a listing. */
/* Content-first variant: main column, then a narrower aside. Declared here as a
   class rather than set inline on the element -- an inline style overrides the
   media query below and would keep the page two-column on a phone. */

@media (max-width: 900px) {/* Results first on a phone. A screen of filter checkboxes above the jobs
     pushes the actual answer off the fold. */

  /* Collapsed by default on narrow screens; the toggle sets data-collapsed.
     [hidden] is not used because it would hide the panel on desktop too. */
  [data-collapsed="true"] { display: none; }
}

/* Status timeline for an application */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding-inline-start: var(--s6); padding-block-end: var(--s5); }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: 6px;
  inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--brand-500);
}
.timeline li::after {
  content: ""; position: absolute; inset-inline-start: 7px; inset-block-start: 18px;
  inline-size: 1px; block-size: calc(100% - 18px); background: var(--border);
}
.timeline li:last-child { padding-block-end: 0; }
.timeline li:last-child::after { display: none; }

.notif-dot {
  display: inline-grid; place-items: center; min-inline-size: 18px; block-size: 18px;
  padding-inline: 5px; border-radius: var(--radius-pill);
  background: var(--danger-600); color: #fff; font-size: 11px; font-weight: 700;
}

/* ── Results: list beside detail ────────────────────────────────────────────
   The defining interaction of a job board. The list is the index, the pane is
   the answer, and neither should make the other scroll away.

   Every row is a real link to ?selected=, so this works with JavaScript off and
   every job keeps a permanent URL of its own; the script only avoids the
   reload. Below 1000px the pane is not shown and rows navigate to the job's own
   page instead, because two panes on a phone is one pane too many. */
.results-split {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
.results-list { display: flex; flex-direction: column; gap: var(--s2); min-inline-size: 0; }

.job-row {
  display: block;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color .12s ease, background-color .12s ease;
}
.job-row:hover { text-decoration: none; border-color: var(--brand-300); }
/* .row wraps by default, which let the date drop below the tags on rows that
   happened to carry a salary chip -- so the date sat top-right on some rows and
   bottom-left on others. The date column holds its place instead. */
.job-row > .row { flex-wrap: nowrap; }
.job-row .grow { min-inline-size: 0; }
.job-row h3 { color: var(--brand-700); }
.job-row.is-selected {
  border-color: var(--brand-600);
  background: var(--brand-50);
  /* An inline-start marker rather than a heavier border, so selecting a row
     does not shift the rows around it. */
  box-shadow: inset 3px 0 0 0 var(--brand-600);
}
[dir="rtl"] .job-row.is-selected { box-shadow: inset -3px 0 0 0 var(--brand-600); }

.results-pane {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--s4));
  max-block-size: calc(100vh - var(--header-h) - var(--s8));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pane-head {
  padding: var(--s5);
  border-block-end: 1px solid var(--border);
  position: sticky;
  inset-block-start: 0;
  background: var(--surface);
  z-index: 1;
}
.pane-body { padding: var(--s5); }
.pane-body h3 { font-size: var(--text-md); margin-block-start: var(--s5); }
.pane-body h3:first-child { margin-block-start: 0; }

@media (max-width: 1000px) {
  .results-split { grid-template-columns: minmax(0, 1fr); }
  /* The pane is hidden rather than stacked: on a narrow screen a row goes
     straight to the job's own page, which is the whole screen anyway. */
  .results-pane { display: none; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
}
.panel h2 { font-size: var(--text-base); margin-block-end: var(--s3); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-wrap .chip { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.chip-wrap .chip:hover { border-color: var(--brand-500); color: var(--brand-700); text-decoration: none; }

/* ══ Persistent search band ════════════════════════════════════════════════
   Search stays reachable two pages deep instead of sending people home. */
.search-band { background: var(--surface); border-block-end: 1px solid var(--border); padding-block: var(--s3); }
.search-band form { display: flex; gap: var(--s2); align-items: center; }
.search-band input { flex: 1 1 200px; min-block-size: 42px; }
.search-band .btn { min-block-size: 42px; flex: 0 0 auto; }
/* The fields must be able to wrap before flex-basis:100% means anything.
   Without this the two inputs and the button share one 390px row and both
   placeholders are clipped to about ten characters. */
@media (max-width: 620px) {
  .search-band form { flex-wrap: wrap; }
  .search-band input { flex: 1 1 100%; }
  .search-band .btn { flex: 1 1 100%; }
}

/* ══ Filter chips above the results ════════════════════════════════════════
   The reference uses a horizontal chip row, not a sidebar: it gives the result
   column its full width and reads as "refine" rather than "configure". */
.filter-row {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  padding-block: var(--s3);
}
.filter-select {
  min-block-size: 36px; padding-block: var(--s1); padding-inline: var(--s3) var(--s6);
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background-color: var(--surface); color: var(--text); inline-size: auto;
}
.filter-select[data-active="true"] {
  border-color: var(--brand-600); background-color: var(--brand-50); color: var(--brand-700);
}
.active-filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding-block-end: var(--s3); }
.results-count { font-size: var(--text-lg); font-weight: 650; margin: 0; }

/* Denser rows: the reference fits ~8 results without scrolling. */
.job-row { padding: var(--s3) var(--s4); }
.job-row h3 { font-size: var(--text-md); }
.results-split { grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); }

.filter-desktop { display: contents; }
.filter-drawer { display: none; margin-block-end: var(--s3); }
@media (max-width: 1000px) {
  /* The chip selects become a drawer; one filter surface at a time. */
  .filter-desktop { display: none; }
  .filter-drawer[data-collapsed="false"] { display: block; }
}
@media (min-width: 1001px) { .filter-row .nav-toggle.btn { display: none; } }

/* ══ Job detail ════════════════════════════════════════════════════════════
   Five facts and the action first; reading material after. */
.job-page { padding-block: var(--s5) var(--s12); max-inline-size: 1100px; }
.job-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-block-start: var(--s5); }

/* Readable measure: long descriptions become unreadable at full width. */
.prose {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s6);
}
.prose h2 { font-size: var(--text-lg); margin-block-start: var(--s6); }
.prose h2:first-child { margin-block-start: 0; }
.prose p, .prose li { max-inline-size: 72ch; line-height: 1.65; }
.prose ul { padding-inline-start: var(--s5); }
.prose li { margin-block-end: var(--s1); }

.apply-bar { display: none; }
@media (max-width: 900px) {
  .apply-bar {
    display: block; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
    background: var(--surface); border-block-start: 1px solid var(--border);
    padding-block: var(--s2); box-shadow: 0 -2px 10px rgba(16,24,40,.08);
  }
  /* Room so the bar never covers the last line of the description. */
  .job-page { padding-block-end: 88px; }
  /* ...and room at the end of the document, because the bar is fixed and the
     shared footer sits outside .job-page. Without this the whole footer --
     Help, Contact, Privacy, Terms -- is unreachable behind the bar. */
  body:has(.apply-bar) .site-footer { padding-block-end: 124px; }
}/* ══ Company directory ═════════════════════════════════════════════════════ */
/* ══ Portal chrome (candidate and employer) ════════════════════════════════
   A horizontal nav rather than a sidebar: these areas have few sections, and a
   250px rail on a screen that is mostly a table is wasted width. */

.stat-value { display: block; font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; }
.stat-label { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-block-start: var(--s1); }

/* ══ Stepped job form ══════════════════════════════════════════════════════
   Six labelled sections with a rail, rather than a wizard: a real wizard loses
   work on a back button and makes autosave and validation errors harder than
   they need to be. The structure is what helps;
.step-n {
  display: grid; place-items: center; flex: 0 0 auto;
  inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--surface-muted); color: var(--text-muted);
  font-size: var(--text-xs); font-weight: 700;
}
.step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s5); margin-block-end: var(--s4);
  scroll-margin-block-start: calc(var(--header-h) + var(--s4));
}
.step > h2 {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--text-lg); margin-block-end: var(--s4);
  padding-block-end: var(--s3); border-block-end: 1px solid var(--border);
}
.step > h2 .step-n { background: var(--brand-600); color: #fff; }

/* Touch targets: standalone links and chips get a comfortable tap height on
   small screens. Inline links inside prose are exempt (WCAG 2.5.8 exception). */
@media (max-width: 620px) {
  .site-footer nav.row { gap: var(--s4); }
  .site-footer a,
  .breadcrumb a,
  .section-head a,
  .job-company a,
  .brand {
    min-block-size: 32px;
    display: inline-flex;
    align-items: center;
  }
  .chip-wrap .chip { min-block-size: 32px; }
}
.brand-logo .bl-h { stroke: #fff; }
.footer-brand .brand-logo .bl-h { stroke: var(--brand-900); }