/* ============================================================
   KosovaJob redesign — base + shared components
   Pages using the new UI load ONLY new-ui CSS (never legacy
   style.css, which has destructive globals like div,span{float:left}).
   Components here mirror the Figma component library 1:1.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--kj-font);
  font-size: 16px;
  line-height: 1.26;
  color: var(--kj-text);
  background: var(--kj-surface-2);
}
/* Batch 1 (public) and Batch 3 (candidate) both spec body line-height 1.5 —
   same fix already applied to the employer chrome (new-ui/employer.css
   `body:has(.kj-emp-hdr)`). Scoped rather than changed at the base rule so
   pages that still load base.css without any of the three new chromes keep
   their existing 1.26 rhythm. Mulish (2026-09-11, now self-hosted — see
   tokens.css) is applied on the same scope for the same reason: the bare
   `body` rule above stays Plus Jakarta Sans for the 59-page legacy surface.
   font-family is !important because dozens of per-page stylesheets loaded
   AFTER base.css (home.css, job.css, myjobs.css, ...) carry their own
   `body.kj-XXX { font-family: var(--kj-font...) }` at the SAME (0,1,1)
   specificity from before Mulish existed — without !important, source order
   would let whichever page CSS loads last win back to Plus Jakarta Sans. */
body:has(.kj-nav-wrap--auth),
body:has(.kj-nav-wrap--pub) {
  font-family: var(--kj-font-mulish) !important;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Type scale (Primary Font/*) ---------- */
.kj-h1 { font-weight: 700; font-size: 64px; line-height: 1.26; }
.kj-h2 { font-weight: 700; font-size: 44px; line-height: 1.26; }
.kj-h4 { font-weight: 700; font-size: 28px; line-height: 1.26; }
.kj-h5 { font-weight: 700; font-size: 24px; line-height: 1.26; }
.kj-h6 { font-weight: 700; font-size: 20px; line-height: 1.26; }
.kj-body   { font-size: 16px; }
.kj-label  { font-size: 14px; line-height: 1.26; }
.kj-label-sm { font-size: 12px; line-height: 1.26; }
.kj-muted  { color: var(--kj-text-3); }

/* ---------- Layout ---------- */
.kj-container {
  width: 100%;
  max-width: var(--kj-container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1100px) {
  .kj-container { padding: 0 24px; }
}
/* One content box per chrome. Whatever wrapper a page uses, its edges follow
   the header it sits under: the public header is --kj-b1-container (1200) and
   the signed-in header --kj-b3-container (1280), both on --kj-b3-gutter. The
   bare .kj-container (1336/24) put the logo 8–60px off the page content. */
.kj-nav-wrap--pub ~ .kj-container,
.kj-nav-wrap--pub ~ * .kj-container {
  max-width: var(--kj-b1-container);
  padding-left: var(--kj-b3-gutter);
  padding-right: var(--kj-b3-gutter);
}
.kj-nav-wrap--auth ~ .kj-container,
.kj-nav-wrap--auth ~ * .kj-container {
  max-width: var(--kj-b3-container);
  padding-left: var(--kj-b3-gutter);
  padding-right: var(--kj-b3-gutter);
}
@media (max-width: 759px) {
  /* the header drops to 20px gutters on a phone (see .kj-nav__inner--pub below) */
  .kj-nav-wrap--pub ~ .kj-container,  .kj-nav-wrap--pub ~ * .kj-container,
  .kj-nav-wrap--auth ~ .kj-container, .kj-nav-wrap--auth ~ * .kj-container { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Buttons ---------- */
.kj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 12px 24px;
  border-radius: var(--kj-r-pill);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.kj-btn--primary {
  background: var(--kj-gradient);
  color: #fff;
}
.kj-btn--primary:hover { filter: brightness(1.05); }
.kj-btn--outline {
  border: 1px solid var(--kj-secondary);
  color: var(--kj-primary);
  background: transparent;
}
.kj-btn--outline:hover { background: var(--kj-scrim-primary); }
.kj-btn--lg { height: 52px; padding: 14px 32px; font-size: 16px; }

/* ---------- Badges ---------- */
.kj-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--kj-r-pill);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
}
.kj-badge--ultra { background: var(--kj-gradient); color: #fff; }
.kj-badge--new   { background: #fff; color: var(--kj-primary); border: 1px solid var(--kj-primary); }

/* ---------- Job card (Figma: 424x104 / standard 429x104) ---------- */
.kj-job-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 16px;
  background: var(--kj-surface-warm);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-shadow-xs);
  transition: box-shadow .15s ease, transform .15s ease;
}
.kj-job-card:hover { box-shadow: var(--kj-shadow-card); transform: translateY(-1px); }
.kj-job-card--ultra { border: 1px solid rgba(255, 80, 103, 0.45); }
.kj-job-card__logo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--kj-r-md);
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--kj-stroke);
}
.kj-job-card__body { min-width: 0; }
.kj-job-card__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--kj-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kj-job-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--kj-text-3);
}
.kj-job-card__meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.kj-job-card__meta svg { flex: 0 0 auto; }
.kj-job-card__badge { position: absolute; top: -9px; right: 12px; }
.kj-job-card__inline-badge { margin-left: 8px; vertical-align: 2px; }

/* ---------- Section header bar (Figma: r=12, h=62, title 24px primary) ---------- */
.kj-section-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 16px;
  background: var(--kj-surface-warm);
  border-radius: var(--kj-r-md);
  box-shadow: var(--kj-shadow-xs);
}
.kj-section-bar h2 {
  font-weight: 700;
  font-size: 24px;
  color: var(--kj-primary);
  text-align: center;
}

/* ---------- Banner creative slot (Figma: 440x360, r=16) ---------- */
.kj-banner {
  border-radius: var(--kj-r-lg);
  overflow: hidden;
  display: block;
  background: var(--kj-surface-3);
}
.kj-banner img, .kj-banner iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

/* ---------- Search pill (Figma: h=64, fully rounded, pad 8) ---------- */
.kj-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 8px 8px 8px 24px;
  background: var(--kj-surface-warm);
  border-radius: var(--kj-r-pill);
  box-shadow: var(--kj-shadow-card);
}
.kj-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--kj-text);
}
.kj-search input::placeholder { color: var(--kj-text-3); }

/* The AI search icon on the round search buttons — magnifier + sparkle + dot,
   24px (2026-09-26, shared since 2026-09-27: the homepage box, /kompanite,
   /blog on phones). Each page shows .kj-sb__goico--ai where it wants it; the
   sparkle twinkles briefly every few seconds (off for reduced motion). */
.kj-sb__goico { display: block; flex: none; }
.kj-sb__goico--ai { display: none; }
.kj-sb__goico-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: kjSbTwinkle 4s ease-in-out infinite;
}
@keyframes kjSbTwinkle {
  0%, 74%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  84%           { transform: scale(.62) rotate(-18deg); opacity: .7; }
  92%           { transform: scale(1.12) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-sb__goico-spark { animation: none !important; }
}
.kj-search__submit {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kj-gradient);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.kj-search__submit:hover { filter: brightness(1.05); }

/* Suggestion chips */
.kj-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kj-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  font-size: 12px;
  font-weight: 500;
  color: #383838;
  white-space: nowrap;
}
.kj-chip:hover { border-color: var(--kj-primary); color: var(--kj-primary); }

/* ---------- Header / nav ---------- */
.kj-nav-wrap { background: transparent; }
.kj-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--kj-nav-h);
  padding: 16px 0;
}
.kj-nav__logo img { height: 40px; width: auto; }
.kj-nav__links { display: none; align-items: center; gap: 32px; }
.kj-nav__links a {
  font-weight: 500;
  font-size: 16px;
  color: #383838;
  transition: color .15s ease;
}
.kj-nav__links a:hover, .kj-nav__links a.is-active { color: var(--kj-primary); }
.kj-nav__actions { display: none; align-items: center; gap: 12px; }
.kj-nav__lang { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 16px; color: #383838; }
.kj-nav__lang img, .kj-drawer__lang img { width: 18px; height: 18px; border-radius: 50%; }
.kj-drawer__lang { display: inline-flex; align-items: center; gap: 8px; }
.kj-nav__burger { display: inline-flex; padding: 8px; }
@media (min-width: 1100px) {
  .kj-nav__links, .kj-nav__actions { display: inline-flex; }
  .kj-nav__burger { display: none; }
}

/* ---------- Mobile drawer ----------
   ONE drawer for both audiences since 2026-10-09 (design shell root.x-dc.txt
   lines 380-391): a min(340px, 88vw) white panel sliding in from the right,
   a 16/20 head with a 40px close disc on --surface-muted, rows 12 14 / r12 /
   15/700 (the current one coral-50), a ruled 16/20/24 bottom. The signed-in
   extras (avatar head, language + Dilni row) and the visitor extras (flag
   row, Publiko / Kyçu buttons) are in their own sections further down. */
.kj-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
}
.kj-drawer.is-open { visibility: visible; }
.kj-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 30, 66, .45);
  opacity: 0;
  transition: opacity .25s ease;
}
.kj-drawer.is-open .kj-drawer__scrim { opacity: 1; }
.kj-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-shadow: var(--kj-shadow-xl);
  transform: translateX(100%);
  transition: transform .3s var(--kj-ease-out);
}
.kj-drawer.is-open .kj-drawer__panel { transform: translateX(0); }
.kj-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--kj-b3-stroke);
  flex: 0 0 auto;
}
.kj-drawer__top img { height: 26px; width: auto; }
.kj-drawer__top button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kj-b3-page);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kj-b3-title);
  flex: none;
}
.kj-drawer__top button svg path { stroke: currentColor; }
.kj-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.kj-drawer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  /* 2026-10-11 (f2-chrome-css): the design's rows (`dl()`, root l.771) set no line-height and take the body's 1.5:
     316 × 46.5 (was 1.3 → 43.5, so the 19th row sat 54px higher than the design's) */
  line-height: 1.5;
  color: var(--kj-b3-title);
  transition: background-color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-drawer__links a:hover { background: var(--kj-b3-page); }
/* the current row: coral-50 behind the row's own text-strong — the design gives it no colour (it was coral-700) */
.kj-drawer__links a.is-active { background: var(--kj-coral-50); }
.kj-drawer__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--kj-b3-stroke);
  flex: 0 0 auto;
}
.kj-drawer__bottom .kj-btn { width: 100%; }

/* ---------- Footer ----------
   MOVED. The footer was rebuilt to the Batch 1 artboard on 2026-09-10 and now
   lives in one block at the end of this file ("BATCH 1 — PUBLIC CHROME +
   SHARED FOOTER"). The p19 rules that used to sit here (navy #002045, 5
   equal-ish columns, 96px top inset, grey #383838 ISO band, 24px socials,
   space-evenly partner strip) are gone rather than overridden, so there is
   exactly one set of footer rules in the codebase. */

/* ---------- Read-only TinyMCE viewer ----------
   Several pages render stored rich text (job description, company About,
   article body) through a READ-ONLY TinyMCE. It is a viewer, not an editor,
   so none of its chrome should be visible.
   NOTE: this install is TinyMCE 4, which emits .mce-* class names — earlier
   rules written against .tox-* (TinyMCE 5/6) silently matched nothing, which
   is why a border kept showing. Both prefixes are covered here so the reset
   survives a future upgrade, and it lives in base.css so every page that
   embeds a read-only editor gets it. */
.mce-tinymce, .mce-tinymce.mce-container,
.mce-panel, .mce-edit-area, .mce-container, .mce-container-body,
.tox-tinymce, .tox .tox-edit-area {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.mce-tinymce, .mce-container, .mce-container-body { width: 100% !important; max-width: 100% !important; }
.mce-edit-area iframe, .tox .tox-edit-area__iframe { width: 100% !important; background: transparent !important; }
/* Editor chrome: disabled at the init too (menubar/statusbar/toolbar: false),
   this is the belt-and-braces for any init we haven't touched. */
.mce-menubar, .mce-toolbar-grp, .mce-statusbar, .mce-notification,
.tox .tox-menubar, .tox .tox-toolbar, .tox .tox-statusbar { display: none !important; }

/* ============================================================
   LOGGED-IN CHROME
   Figma "Final Design": Navbar 315:27091 (h=100, bg #FFFEFD, 1px #ECECF2
   bottom rule, 16px/500 links #383838 with the active item #FF5067, right
   cluster gap 8) + Navbar 315:27092, the 56px sub-nav (24px icon + 8px gap +
   16px/500 label, 32px between tabs, active #FF5067, idle #919191).
   Additive only — the logged-out header keeps every rule above untouched, the
   variants below are opted into by classes headerArea_new.php emits solely in
   its logged-in branch.
   ============================================================ */

/* ---------- Header, logged-in variant ---------- */
.kj-nav-wrap--auth {
  background: var(--kj-surface-warm);
  border-bottom: 1px solid var(--kj-stroke);
}
.kj-nav__actions--auth { gap: 8px; }
@media (min-width: 1100px) {
  /* Figma centres the nav group on the frame (Center frame midpoint = 1512/2),
     which flex space-between cannot do once the right cluster is wider than the
     logo — so the links are pinned to the middle on the logged-in header only. */
  .kj-nav--auth { height: 100px; position: relative; }
  .kj-nav--auth .kj-nav__links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Circular icon buttons: search / messages / notifications (Figma 48x48, r=24,
   1px #ECECF2, 24px glyph #383838). */
.kj-iconbtn {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--kj-stroke);
  background: var(--kj-surface-warm);
  color: #383838;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.kj-iconbtn:hover { color: var(--kj-primary); border-color: var(--kj-primary); background: var(--kj-scrim-primary); }
.kj-iconbtn svg { display: block; }

/* ---------- Account cluster (avatar + chevron + dropdown) ---------- */
.kj-account { position: relative; flex: 0 0 auto; }
.kj-account__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--kj-r-pill);
}
.kj-account__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--kj-gradient) center/cover no-repeat;
  background-clip: padding-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  letter-spacing: .02em;
  overflow: hidden;
}
/* A real profile picture replaces the initials. If the CDN file does not load
   the disc under it stays — the navy one in the signed-in chrome, which sets
   its own background below (.kj-nav--auth .kj-account__avatar--photo). */
.kj-account__avatar--photo { font-size: 0; color: transparent; }
.kj-account__chev { color: #919191; transition: transform .15s ease; }
.kj-account.is-open .kj-account__chev { transform: rotate(180deg); }
.kj-account__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1001;
  display: none;
  min-width: 224px;
  padding: 8px;
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-shadow-card);
}
.kj-account.is-open .kj-account__menu { display: block; }
.kj-account__name {
  padding: 8px 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--kj-stroke);
  font-weight: 700;
  font-size: 14px;
  color: var(--kj-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kj-account__menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  color: #383838;
  transition: background-color .15s ease, color .15s ease;
}
.kj-account__menu a:hover { background: var(--kj-scrim-primary); color: var(--kj-primary); }
.kj-account__logout { color: var(--kj-primary); }

/* ---------- Candidate sub-nav (candidateTabs_new.php) ---------- */
.kj-subnav {
  background: var(--kj-surface-warm);
  /* No bottom stroke in the design: PDF p52 col x=700 goes #FFFEFD (y=155) -> #F4F6F9 (y=156)
     with no #ECECF2 row between. Removed here, not per-page, so the legacy bar and the
     candidateTabs_new bar match. */
}
.kj-subnav__list {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kj-subnav__list::-webkit-scrollbar { display: none; }
.kj-subnav__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.26;
  color: #919191;
  white-space: nowrap;
  transition: color .15s ease;
}
.kj-subnav__tab .kj-ico { flex: 0 0 24px; display: block; }
.kj-subnav__tab:hover { color: var(--kj-text); }
.kj-subnav__tab.is-active { color: var(--kj-primary); }
.kj-subnav__label { display: inline-flex; align-items: center; gap: 4px; }
/* The counter spans (#savedCounter / #myCompaniesCounter) are legacy JS hooks —
   the pages rewrite their text on save/unsave and flash .savedCounterExtra. */
.kj-subnav__label span { font-weight: 500; }
.kj-subnav__label span:empty { display: none; }
.savedCounterExtra { color: var(--kj-primary); }
@media (max-width: 759px) {
  .kj-subnav__list { gap: 24px; height: 52px; padding-right: 20px; }
  .kj-subnav__tab { font-size: 15px; gap: 6px; }
}

/* Footer payment marks, partner strip and ISO band — MOVED to the
   "BATCH 1 — PUBLIC CHROME + SHARED FOOTER" block at the end of this file
   along with the rest of the footer. */

/* ============================================================
   BATCH 3 — SHARED CHROME (headerArea_new.php + candidateTabs_new.php)
   2026-09-09. Measured on the Batch 3 bundle at 1512 (doc width came back
   1502 with the scrollbar; every x below is the raw measurement).

   Header, measured: sticky, h=72 (+1px rule = 73 painted),
   bg rgba(255,254,253,.92) + backdrop blur 12px, wrap max-width 1280 with
   32px gutters -> content 1216 starting x=143.
     logo   h=28
     nav    6 pills @x=282/349/408/516/608/667, each h=38, r=999,
            13.5px/700, idle #6B7890, active bg #FFF1EF / fg #CE3340
     right  ? 38x38 @1058 (bg #FFE0AC, 16px/800 #041E42)
            search 40x40 @1104, messages 40x40 @1148, bell 40x40 @1192
            (all r=50%, 1px #E2E7EF)
            SQ chip 53x40 @1240 (13px/800 #041E42)
            avatar+chev 62x40 @1297 (disc 40, #041E42, 14px/800 #fff)
   Sub-nav, measured: y=72, h=48 (+1px top rule), bg #fff, same 1280/32 wrap,
     tabs h=48 14px/700, active #041E42 + 2px #FE616C underline,
     idle #6B7890, tab boxes @x=143/210/329/439/598.

   These rules are ADDITIVE and scoped to the logged-in chrome
   (.kj-nav-wrap--auth / .kj-nav--auth / .kj-subnav). The logged-out header
   is untouched — it never gets the --auth classes.
   ============================================================ */

/* ---------- Header shell ---------- */
.kj-nav-wrap--auth {
  position: sticky;
  top: 0;
  /* The design's own stacking order, kept verbatim: header 50, sub-nav 49,
     EPI panel 85, EPI FAB 86, modals/drawer above that. A header at a higher
     z-index would paint over the EPI panel when it is open. */
  z-index: 50;
  background: rgba(255, 254, 253, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kj-b3-stroke);
}
/* The design's header wrap is 1280/32 (content 1216), NOT the batch-1/2
   .kj-container 1336/24. Emitted only on the logged-in header. */
.kj-nav__inner {
  max-width: var(--kj-b3-container);
  padding-left: var(--kj-b3-gutter);
  padding-right: var(--kj-b3-gutter);
}
.kj-nav--auth {
  height: var(--kj-b3-nav-h);
  padding: 0;
  gap: 16px;
  justify-content: flex-start;
}
.kj-nav--auth .kj-nav__logo { flex: none; }
.kj-nav--auth .kj-nav__logo img { height: 28px; }

/* ---------- Nav links — ONE rule for both audiences (2026-10-09) ----------
   Design shell root.x-dc.txt line 739 (`link`) and 744 (`navRule`): h38,
   padding 0 10, radius 10 10 0 0, 13.5/700, idle --text-muted, hover and
   current --text-strong (hover changes the colour only — the Batch 3 pill
   behind it is gone), and the current item carries a 3px gradient rule inset
   10px, sitting 1px under the link box (bottom: -1px), radius 3 3 0 0.
   The current item is keyed on aria-current, which headerArea_new.php emits
   for exactly one slot — NOT on .is-active: five public pages still carry a
   legacy line of jQuery that adds .is-active by href SUFFIX (kontakt.php:181,
   blog.php:237, press.php:288, llogaritja-e-pages.php:354, kompanite.php:464)
   and could light a second item. */
@media (min-width: 1100px) {
  /* Undo the batch-1/2 absolute centring: the nav is laid out inline, flex:1,
     immediately after the logo. */
  .kj-nav--auth { height: var(--kj-b3-nav-h); position: static; }
  .kj-nav--auth .kj-nav__links {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
}
.kj-nav--auth .kj-nav__links,
.kj-nav--pub .kj-nav__links {
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.kj-nav--auth .kj-nav__links a,
.kj-nav--pub .kj-nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1;
  color: var(--kj-b3-muted);
  background: transparent;
  white-space: nowrap;
  transition: color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-nav--auth .kj-nav__links a:hover,
.kj-nav--pub .kj-nav__links a:hover,
.kj-nav--auth .kj-nav__links a[aria-current="page"],
.kj-nav--pub .kj-nav__links a[aria-current="page"] {
  color: var(--kj-b3-title);
  background: transparent;
}
.kj-nav__ul {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--kj-b3-gradient);
}
/* the lower tiers leave as the window narrows (design lines 181-183), and
   "Publiko një punë" goes with tier 1 (its data-hide-1140). !important as in
   the design: the link rules above set display:inline-flex at a higher
   specificity than an attribute selector. */
@media (max-width: 1439px) {
  .kj-nav__links [data-tier="3"] { display: none !important; }
}
@media (max-width: 1279px) {
  .kj-nav__links [data-tier="2"] { display: none !important; }
}
@media (max-width: 1139px) {
  .kj-nav__links [data-tier="1"],
  .kj-nav__post[data-tier="1"] { display: none !important; }
}
/* Inline pill badge (design: h18 / min-w18 / pad 0 5 / 11px800 / ml6) */
.kj-nav__pillbadge {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-coral-500);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kj-nav__pillbadge:empty { display: none; }

/* ---------- Right cluster ---------- */
/* Shown at every width (the base rule hides .kj-nav__actions under 1100):
   a phone keeps the messages / bell buttons and the pill beside the burger;
   the user pill leaves under 1100 (the design's data-desk). The signed-in
   cluster has had no "Publiko një punë" since 2026-10-13 (Batch 3, D39); the
   visitor's leaves with tier 1 at 1139. The Batch 3 "?" button and search
   circle are gone (2026-10-09). */
.kj-nav__actions--auth {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}
@media (max-width: 1099px) {
  .kj-nav--auth .kj-account { display: none; }
}

.kj-nav--auth .kj-iconbtn,
.kj-nav__actions--auth .kj-iconbtn {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--kj-b3-stroke);
  background: #fff;
  color: var(--kj-b3-title);
  cursor: pointer;
  font: inherit;
}
.kj-nav__actions--auth .kj-iconbtn:hover {
  background: var(--kj-b3-page);
  border-color: var(--kj-b3-stroke);
  color: var(--kj-b3-title);
}
/* Corner badge (design: abs top4 right4, h17 / min-w17 / pad 0 4 /
   10.5px800 / 2px white ring) */
.kj-iconbtn__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 17px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: var(--kj-r-pill);
  border: 2px solid #fff;
  background: var(--kj-coral-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.kj-iconbtn__badge:empty { display: none; }

/* The language control is the SQ|EN pill shared with the public header —
   .kj-nav__lang--seg, in the public cluster section below. */

/* The user pill — Batch 3, 2026-10-13 (b3-chrome-7; design shell docs/design/batch3-2026-10-12/components/root.x-dc.txt
   l.446-451 and `myPfS`, l.1034; tests/kj-b3-chrome-2026.test.php). ONE white frame (h44, padding 2, 1px #E2E7EF, r999)
   holds the link "Profili im" (.kj-account__me: h38, padding 0 12 0 14, 13.5 / 800) and the account-menu toggle
   (.kj-account__btn: h38, padding 0 9 0 6, gap 4) with a 32px avatar — the photo as a cover background with no border,
   or the navy disc with display-face 13 / 800 initials — and the 14px chevron. Each half takes the hover background on
   its own. Until then it was a bare 40px avatar button (the 10-09 form).
   The frame is drawn from 1100 up only: under the house breakpoint the cluster item is hidden by the rule above (the
   design strips its frame at 899), so `display` is set in a min-width block and never fights that rule.
   The control rules carry .kj-account in the chain on purpose: the motion layer's `body:has(.kj-nav-wrap) a[href]`
   (0,2,2) would otherwise replace the design's `transition: background .15s`. */
.kj-nav--auth .kj-account {
  align-items: center;
  height: 44px;
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid var(--kj-b3-stroke);
  border-radius: var(--kj-r-pill);
  background: #fff;
}
@media (min-width: 1100px) {
  .kj-nav--auth .kj-account { display: inline-flex; }
}
.kj-nav--auth .kj-account .kj-account__me {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px 0 14px;
  border-radius: 999px 0 0 999px;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--kj-b3-title);
  text-decoration: none;
  transition: background .15s;
}
.kj-nav--auth .kj-account .kj-account__btn {
  height: 38px;
  padding: 0 9px 0 6px;
  border: 0;
  border-radius: 0 999px 999px 0;
  gap: 4px;
  background: transparent;
  cursor: pointer;
  transition: background .15s;
}
.kj-nav--auth .kj-account .kj-account__me:hover,
.kj-nav--auth .kj-account .kj-account__btn:hover { background: var(--kj-b3-page); }
/* Keyboard focus: the house ring (the design draws none — only the browser's outline). The transparent outline keeps
   a ring in forced-colours mode; the focused half is lifted over its neighbour so the ring is whole. */
.kj-nav--auth .kj-account .kj-account__me:focus-visible,
.kj-nav--auth .kj-account .kj-account__btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--kj-ring); position: relative; z-index: 1; }
.kj-nav--auth .kj-account__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--kj-b3-navy);
  font-family: var(--kj-font);
  font-size: 13px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: normal;
}
/* With a photo: the picture as a cover background and no border (design l.449). The navy disc stays UNDER it (fix round,
   2026-10-13): an opaque photo hides it completely; a photo that does not load — a missing CDN file, a failed request — leaves
   the disc instead of an empty gap between "Profili im" and the chevron. (The design's value is transparent; its photo is a
   data: URI and cannot fail.) */
.kj-nav--auth .kj-account__avatar--photo { background: var(--kj-b3-navy) center / cover no-repeat; border: 0; }
/* … and once the picture HAS loaded it sits on no colour, the design's transparent on the white pill (2026-10-17, chrome-epi-07;
   root.x-dc.txt:449): the signed-in account script (headerArea_new.php) checks the picture once and adds .is-loaded — so a photo
   with transparent parts shows no navy behind it, while one that fails keeps the disc above (chrome-epi-08) */
.kj-nav--auth .kj-account__avatar--photo.is-loaded { background-color: transparent; }
/* The chevron stays as it is while the menu is open, as the design's does (fix round): the 10-09 form turned it 180°. */
.kj-nav--auth .kj-account__chev { color: var(--kj-b3-muted); transition: none; }
.kj-nav--auth .kj-account.is-open .kj-account__chev { transform: none; }
.kj-nav--auth .kj-account__menu {
  top: calc(100% + 8px);            /* the design's 8px under the frame: [1077,65] at 1440, the right edge 1px inside the frame's */
  width: 250px;                     /* the design's FIXED width (root l.453). It was a min-width over a nowrap head, so an e-mail of 30+ characters or a long name widened the menu (258 … 390px) */
  border-radius: 16px;
  border-color: var(--kj-b3-stroke);
  background: #fff;
  box-shadow: var(--kj-shadow-xl);
  padding: 6px;
}
/* The head wraps, as the design's two plain blocks do (root l.454; fix round): a long name takes a second line, and
   `overflow-wrap: anywhere` breaks an e-mail that has no break of its own — the design lets it stick out of the card. */
.kj-nav--auth .kj-account__name {
  padding: 10px 12px 8px;
  margin-bottom: 4px;
  border-bottom-color: var(--kj-b3-stroke);
  font-weight: 800;
  color: var(--kj-b3-title);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
/* the menu's entrance, as the design's (root l.453): it had none */
.kj-nav--auth .kj-account.is-open .kj-account__menu { animation: kjScaleIn .2s var(--kj-ease-out) both; }
.kj-nav--auth .kj-account__email {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--kj-b3-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.kj-nav--auth .kj-account__menu a {
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;                 /* design `menuItem`: 14/600 */
  font-size: 14px;
  color: var(--kj-b3-title);
}
.kj-nav--auth .kj-account__menu a:hover { background: var(--kj-b3-page); color: var(--kj-b3-title); }
.kj-nav--auth .kj-account__sep { height: 1px; background: var(--kj-b3-stroke); margin: 6px 4px; }
/* 2026-10-11 (f2-chrome-css): "Dilni" / "Sign out". The design's sign-out item is `menuItem` + color var(--text-muted),
   and its hover changes the background only (root l.307): muted at rest and hovered, on the items' hover background.
   It needs more than the items' `.kj-nav--auth .kj-account__menu a` (0,2,1) and its :hover (0,3,1): those outranked the
   two older rules this one replaces (folded in the fix round) — `.kj-nav--auth .kj-account__logout` muted (0,2,0) and
   its :hover coral-700 (0,3,0) — so "Dilni" drew navy, and the coral hover would have surfaced had the order changed. */
.kj-nav--auth .kj-account__menu a.kj-account__logout, .kj-nav--auth .kj-account__menu a.kj-account__logout:hover { color: var(--kj-b3-muted); }

/* ---------- Candidate sub-nav, Batch 3 ----------
   2026-10-11 (f2-chrome-css): the design draws the bar INSIDE its 122px header — the bar's border-top at y72, the
   48px row 73-121, the header's border-bottom at y121 (root l.264 / l.316). Here the bar is the header's sibling,
   so it lays its own top rule over the header's (margin-top -1, the header paints above it at z 50) and draws the
   rule under the tabs: 72 → 122 at rest AND stuck (it was 73 → 122 at rest with a 2px rule at 72 + 73, and 72 → 121
   stuck with no rule under the tabs). The pinned chrome stays 122 (--kj-b3-chrome-h below) and the page under the
   bar starts at 122 as before. */
.kj-subnav--b3 {
  position: sticky;
  top: var(--kj-b3-nav-h);
  z-index: 49;
  background: #fff;
  border-top: 1px solid var(--kj-b3-stroke);
  margin-top: -1px;
  border-bottom: 1px solid var(--kj-b3-stroke);
}
.kj-subnav--b3 .kj-subnav__inner {
  max-width: var(--kj-b3-container);
  padding-left: var(--kj-b3-gutter);
  padding-right: var(--kj-b3-gutter);
}
.kj-subnav--b3 .kj-subnav__list {
  gap: 6px;
  height: var(--kj-b3-subnav-h);
}
.kj-subnav--b3 .kj-subnav__tab {
  height: var(--kj-b3-subnav-h);
  padding: 0 4px;
  margin-right: 14px;
  gap: 0;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--kj-b3-muted);
  border-bottom: 2px solid transparent;
}
.kj-subnav--b3 .kj-subnav__tab:last-child { margin-right: 0; }
.kj-subnav--b3 .kj-subnav__tab:hover { color: var(--kj-b3-title); }
.kj-subnav--b3 .kj-subnav__tab.is-active {
  color: var(--kj-b3-title);
  border-bottom-color: var(--kj-coral-500);
}
/* base.css sets .kj-subnav__label to inline-flex, which DROPS the literal
   space between the label and the counter span. The design prints " (3)", so
   the separation is restored as a 4px gap (a space at 14px Plus Jakarta Sans
   measures ~3.9px). */
.kj-subnav--b3 .kj-subnav__label { gap: 4px; }
/* The counter spans stay exactly as the save/follow handlers expect:
   id="savedCounter" / id="myCompaniesCounter", count="" attribute, html "(N)". */
.kj-subnav--b3 .kj-subnav__label span { font-weight: 700; }
.kj-subnav--b3 .savedCounterExtra { color: var(--kj-coral-600); }
/* 2026-10-14 (Batch 3 wave 3, w3-ar-page; b3-chrome-3 / b3-myjobs-2): the Active Recruitment tab - the 14px bolt 6px before
   the word and the ON / OFF chip (root.x-dc.txt l.995: margin-left 8, h18, padding 0 7, r999, 10.5/800, .05em, gap 4, a 6px dot;
   ON #027A48 on #E8F8EF with #12B76A, OFF #667085 on #F2F4F7 with #98A2B3). The chip sits after .kj-subnav__label, outside it:
   the label's "span:empty" rule would hide the dot. */
.kj-subnav__bolt { flex: none; margin-right: 6px; }
.kj-subnav__chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 18px; margin-left: 8px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; line-height: 1; background: #F2F4F7; color: #667085; }
.kj-subnav__chip.is-on { background: #E8F8EF; color: #027A48; }
.kj-subnav__chipdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #98A2B3; }
.kj-subnav__chip.is-on .kj-subnav__chipdot { background: #12B76A; }

@media (max-width: 759px) {
  /* the design's phone header: 14px gutters (line 160). The sub-nav takes the same 14, but INSIDE its scroller
     (2026-10-11, f2-chrome-css): the design's bar wrap is the scroller itself ([data-wrap][data-tabs-m], 14px
     padding, overflow-x — root l.160 / l.173), so its tabs start at x14, scroll right up to the screen edge and
     end 14 + the last tab's 14 before it. Stage had a 16px gutter OUTSIDE the scroller (the tabs at x16, clipped
     16px short of the edge, an end gap of 15.6). */
  .kj-nav__inner {
    padding-left: 14px;
    padding-right: 14px;
  }
  .kj-subnav--b3 .kj-subnav__inner {
    padding-left: 0;
    padding-right: 0;
  }
  .kj-subnav--b3 .kj-subnav__list { gap: 6px; height: var(--kj-b3-subnav-h); padding-left: 14px; padding-right: 14px; }
  /* 2026-10-11: the design keeps the desktop 14px / margin 14 on phones (root l.766 has no phone override,
     measured 14 / 14 at 390 on #/mesim and #/kompanite); the row scrolls sideways instead (overflow-x) */
  .kj-subnav--b3 .kj-subnav__tab { font-size: 14px; margin-right: 14px; }
  /* … the last tab too (the desktop rule above zeroes it): the design's scrolled end is its padding + that 14 */
  .kj-subnav--b3 .kj-subnav__tab:last-child { margin-right: 14px; }
}

/* ---------- Mobile drawer, signed in ----------
   The panel, head, rows and bottom are the shared "Mobile drawer" rules near
   the top of this file; this is the signed-in head (avatar 36 + name 15/800,
   design line 384) and the bottom row (the language you would switch TO +
   Dilni, two 44px pills, line 390). */
.kj-drawer__user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kj-drawer__avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--kj-b3-gradient) center/cover no-repeat;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kj-drawer__avatar--photo { background-color: var(--kj-b3-navy); }
/* the drawer head's photo the same way (2026-10-17, chrome-epi-07; root.x-dc.txt:558): no colour behind a loaded picture */
.kj-drawer__avatar--photo.is-loaded { background-color: transparent; }
.kj-drawer__uname {
  font-weight: 800;
  font-size: 15px;
  color: var(--kj-b3-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kj-drawer__links--b3 .kj-nav__pillbadge { margin-left: auto; }
.kj-drawer__bottom--b3 { flex-direction: row; gap: 10px; }
.kj-drawer__bottom--b3 > * { flex: 1 1 0; }
.kj-drawer__langbtn,
.kj-drawer__out {
  height: 44px;
  padding: 0 12px;
  border-radius: var(--kj-r-pill);
  border: 1px solid var(--kj-b3-stroke);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--kj-b3-title);
  white-space: nowrap;
  transition: border-color var(--kj-dur-base) var(--kj-ease-out), color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-drawer__langbtn:hover { border-color: var(--kj-b3-stroke-2); }
.kj-drawer__out { font-weight: 700; font-size: 14px; color: var(--kj-b3-muted); }
.kj-drawer__out:hover { color: var(--kj-coral-700); border-color: var(--kj-b3-stroke-2); background: #fff; }

/* ---------- Sticky-chrome compatibility ----------
   The Batch 3 header (72px + 1px rule) and sub-nav (since 2026-10-11 y72 → 122:
   its top rule over the header's, the 48px row, a rule under it) are
   position:sticky, exactly as the design specifies. Page stylesheets written
   before that shipped pin their own left rails at `top: 20-24px`, which would
   now slide under the chrome. --kj-b3-chrome-h is the chrome's pinned height;
   page CSS should offset from it. The block below is the compatibility layer
   for the four candidate rails that already exist — a page stylesheet can
   still override it with its own rule of equal or higher specificity. */
:root { --kj-b3-chrome-h: 73px; }
body:has(.kj-subnav--b3) { --kj-b3-chrome-h: 122px; }

/* Batch 1 makes the PUBLIC header sticky too (the artboard's own
   position:sticky/top:0), so the same offset has to apply under it. The only
   sticky rail on a public page is content.css .kj-legal__toc (top:24px), used
   by /politika-e-privatesise and /press — verified by grepping every public
   page stylesheet for `position: sticky`, which returns that one hit. */
@media (min-width: 1100px) {
  body:has(.kj-nav-wrap--auth) .kj-myjobs__left,
  body:has(.kj-nav-wrap--auth) .kj-saved__left,
  body:has(.kj-nav-wrap--auth) .kj-myart__left,
  body:has(.kj-nav-wrap--auth) .kj-misc__left,
  body:has(.kj-nav-wrap--auth) .kj-legal__toc,
  body:has(.kj-nav-wrap--pub) .kj-legal__toc {
    top: calc(var(--kj-b3-chrome-h) + 16px);
  }
}

/* ============================================================
   BATCH 3 — SHARED PAGE PRIMITIVES (2026-09-09)

   These are the design bundle's own layout attributes and keyframes, which
   every Batch 3 page markup uses. They live here, in base.css, rather than in
   a separate new-ui/batch3.css, for one reason: base.css is already linked by
   all 58 redesigned pages, so every Batch 3 page agent gets them without
   editing a <link> tag, and there is no extra request.

   BREAKPOINTS. The bundle's own media queries are 899px and 767px. Batches
   1-2 shipped 1099px and 759px. Rather than put a third set into the
   codebase, design-899 is mapped to 1099 and design-767 to 759 — the
   BEHAVIOURS below are exactly the bundle's, only the switch point moves.
   (Verbatim from the bundle: [data-desk] hides <=899; [data-mob] shows
   <=899; [data-cols-3]/[data-cols-4] -> 2 cols; [data-side]/[data-side-r] ->
   1 col; [data-side-sticky] static; [data-split] -> 1 col with
   list/thread mutually exclusive on data-open; [data-hide-t] hidden;
   [data-jobs-detail] order:-1. Then <=767: all [data-cols-*] -> 1 col;
   [data-wrap] padding-inline 16px; [data-stack] column/stretch;
   [data-stack-start] column/flex-start; [data-full-m] width 100%;
   [data-hide-m] hidden; [data-h1] 28px; [data-pad-m] padding 18px;
   [data-modal-wrap] align-items flex-end, padding 0; [data-modal] radius
   24px 24px 0 0 + kjSlideUp; [data-tabs-m] overflow-x auto, nowrap.)
   ============================================================ */

/* Batch 3 page wrap. Width is per-page (Home/Jobs/Companies/Learn/Messages
   1280, Saved/Applications 1080, Profile 1180, Apply/Settings 880), so the
   page stylesheet sets max-width; this only carries the gutters. */
[data-wrap] { width: 100%; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }

@keyframes kjPageIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes kjFadeUp  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kjFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes kjScaleIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Shared scroll-reveal (see new-ui/js/kj-reveal.js): starts hidden/offset,
   plays kjFadeUp once .kj-reveal--in is added by the observer. A visitor
   with JS off never gets the class added by any observer, so the rule
   below shows the element at full opacity outright rather than leaving it
   permanently invisible — motion is a nice-to-have, content is not. */
.kj-reveal { opacity: 1; }
.js .kj-reveal { opacity: 0; }
.js .kj-reveal--in { animation: kjFadeUp .55s var(--kj-ease-out, cubic-bezier(.22,.61,.36,1)) both; }
@keyframes kjSlideLeft { from { transform: translateX(100%); } to { transform: none; } }
@keyframes kjSlideUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kjToast   { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kjSpin    { to { transform: rotate(360deg); } }
@keyframes kjRing    { to { stroke-dashoffset: 0; } }

/* FIT band helpers. ONE rule across the whole batch:
   >=80 green, >=60 gold, <60 coral, and grey ONLY for "no score in
   jobFitMatch at all" — so a colour never carries two meanings and a real
   score of 0 (4,215 rows do have one) is never confused with a missing row. */
.kj-fit--strong  { color: var(--kj-fit-strong); }
.kj-fit--good    { color: var(--kj-fit-good); }
.kj-fit--weak    { color: var(--kj-fit-weak); }
.kj-fit--unknown { color: var(--kj-fit-unknown); }
.kj-fit-bar      { height: 5px; border-radius: 5px; background: var(--kj-b3-sunken); overflow: hidden; }
.kj-fit-bar > i  { display: block; height: 100%; border-radius: 5px; transition: width .6s var(--kj-ease-out); }
.kj-fit-bar--strong  > i { background: var(--kj-fit-strong); }
.kj-fit-bar--good    > i { background: var(--kj-fit-good); }
.kj-fit-bar--weak    > i { background: var(--kj-fit-weak); }
.kj-fit-bar--unknown > i { background: transparent; }

/* design 899 -> house 1099 */
@media (max-width: 1099px) {
  [data-desk] { display: none !important; }
  [data-cols-3], [data-cols-4] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-side], [data-side-r] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-side-sticky] { position: static !important; }
  [data-split] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-split] > [data-split-list][data-open="true"] { display: none !important; }
  [data-split] > [data-split-thread][data-open="false"] { display: none !important; }
  [data-hide-t] { display: none !important; }
  [data-jobs-detail] { order: -1; }
}
@media (min-width: 1100px) { [data-mob] { display: none !important; } }

/* design 767 -> house 759 */
@media (max-width: 759px) {
  [data-cols-2], [data-cols-3], [data-cols-4], [data-cols-auto] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-wrap] { padding-left: 16px !important; padding-right: 16px !important; }
  [data-stack] { flex-direction: column !important; align-items: stretch !important; }
  [data-stack-start] { flex-direction: column !important; align-items: flex-start !important; }
  [data-full-m] { width: 100% !important; }
  [data-hide-m] { display: none !important; }
  [data-h1] { font-size: 28px !important; }
  [data-pad-m] { padding: 18px !important; }
  [data-modal-wrap] { align-items: flex-end !important; padding: 0 !important; }
  [data-modal] { border-radius: 24px 24px 0 0 !important; max-height: 92vh !important; animation: kjSlideUp .35s var(--kj-ease-out) both !important; }
  [data-tabs-m] { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
  [data-tabs-m]::-webkit-scrollbar { display: none; }
}

/* ============================================================
   BATCH 1 — PUBLIC CHROME + SHARED FOOTER
   (headerArea_new.php logged-out branch, its drawer, and footer_new.php)
   2026-09-10.

   Measured on the Batch 1 bundle at 1512 (doc width 1502 with the scrollbar).
   Every number below came out of the rendered DOM — header/footer outerHTML
   plus getComputedStyle — not off the token sheet.

     HEADER  sticky, h=72 (+1px #E2E7EF rule = 73 painted),
             bg rgba(255,254,253,.55), backdrop saturate(180%) blur(14px),
             wrap max-width 1200 / 32px gutters -> content 1136 at x=183,
             row gap 28
       logo  132 x 30 (measured box [183,21,132,30])
       nav   flex:1, gap 2, link h40 / pad 0 12 / r10 / 15px 600,
             idle #6B7890, hover #041E42 on #F6F8FB, active #041E42 plus a
             3px gradient bar inset 14px each side at bottom:-21px
             (measured [356.6,74,72,3] — it deliberately bleeds 1px past the
             header rule)
       right SQ|EN pill 83x34 (r999, 1px #E2E7EF, bg #F6F8FB, pad 3;
             segments h26 / pad 0 10 / 12px 700 / ls .04em; active #041E42 on
             #FFF), "Publiko një punë" h40 / pad 0 16 / r999 / 14px 700
             #EE4753, "Kyçu" 66x38 gradient pill with --kj-shadow-accent
       burger 42x42

     DRAWER  scrim rgba(4,30,66,.5) + blur(4), panel min(88vw,360px) white,
             top 16/20 with a 26px logo and a 40px round close on #F6F8FB,
             rows pad 14 / r14 / PJS 700 18px #041E42 + a 16px #9BA7BC
             chevron, hover #F6F8FB; language row on a top rule at 17px 700;
             bottom 16/20/24 with an outline "Publiko një punë" (h46, r999,
             1.5px #FFC2BC, #EE4753) over a full-width gradient "Kyçu" (h46)

     FOOTER  --gradient-navy (150deg #0A2C57 0 / #041E42 60% / #03152E 100%),
             same 1200/32 wrap
       iso   bg rgba(255,255,255,.04), 1px rgba(255,255,255,.08) bottom rule,
             pad 14/32, gap 18, mark h44 on a white r8 card with 4px padding,
             copy 14px/1.5 #A9B6CC   -> 73px tall (measured [0,2026,1502,73])
       main  pad 64/32/28, grid 1.5fr 1fr 1fr 1fr gap 40
             (measured tracks 338.66 / 225.78 / 225.78 / 225.77 = 1136)
       brand logo h32, blurb 15px/1.6 #A9B6CC max-width 300 at margin-top 18,
             three 38px social discs on rgba(255,255,255,.08), gap 10
       cols  heading PJS 700 14px #FFFEFD mb 16; links 14px #A9B6CC, gap 11,
             hover #FFFEFD; the phone/email rows are #FFF 700
       strip margin-top 36, pad 20/0, 1px rgba(255,255,255,.1) top AND bottom,
             space-between wrap gap 18/32 — app badges left, partner marks
             right (design gap 36)
       bottom pad-top 22, copyright 13px #A9B6CC, legal links 13px gap 18

   BREAKPOINTS. The bundle's own switch points are 1023 and 767. Batches 1-3
   shipped 1099 and 759 and the LOGGED-IN chrome is live on those, so the same
   mapping Batch 3 used is applied here (design-1023 -> house-1099,
   design-767 -> house-759): the BEHAVIOUR is the bundle's, only the switch
   point moves, and the two headers keep one shared breakpoint.

   TYPE. Mulish is not self-hosted (see the note in tokens.css); --kj-font
   (Plus Jakarta Sans) is used throughout and only the design's weights and
   sizes are reproduced.

   SCOPING. Every header/drawer rule below is scoped to --pub, so none of it
   can reach the Batch 3 logged-in chrome (--auth). The FOOTER is genuinely
   shared — one design, 59 pages — and is therefore unscoped.
   ============================================================ */

/* ---------- Public header shell ---------- */
.kj-nav-wrap--pub {
  position: sticky;
  top: 0;
  /* same slot the logged-in header uses, so the two can never disagree about
     what the chrome sits under */
  z-index: 50;
  /* 2026-10-09: the one header surface for both halves — .92 + blur 12, the
     signed-in header's own (Batch 1 had .55 + saturate 180% / blur 14) */
  background: rgba(255, 254, 253, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kj-b3-stroke);
}
/* the wrap is the shared .kj-nav__inner — 1280/32, content 1216 (Batch 1's
   1200/32 is gone with the unified chrome) */
.kj-nav--pub {
  height: var(--kj-b3-nav-h);
  padding: 0;
  gap: 16px;
  justify-content: flex-start;
}
.kj-nav--pub .kj-nav__logo { flex: 0 0 auto; display: flex; align-items: center; }
/* the wordmark SVG at 28px = 123 wide, the design's own (line 267) */
.kj-nav--pub .kj-nav__logo img { height: 28px; width: auto; }

/* ---------- Public nav links ----------
   The rules are shared with the signed-in header since 2026-10-09 — see
   "Nav links — ONE rule for both audiences" in the Batch 3 block above (it
   also explains why the current item is keyed on aria-current). */

/* ---------- Public right cluster ---------- */
/* Shown at every width (the base rule hides .kj-nav__actions below 1100 and
   nothing wants that any more): on a tablet the design keeps the language
   pill and Kyçu beside the burger, on a phone too. */
.kj-nav-wrap--pub .kj-nav__actions--pub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

/* SQ | EN segmented pill — both headers. One control, one .menuAreaUrlsLangs
   handler. Design lines 284-287 + 742: padding 3 on --gray-100, no border,
   margin-left 6; segments h28 / min-w 38 / pad 0 11 / 12px 800 / .02em; the
   side you are on is filled navy, the other is quiet. */
.kj-nav__lang--seg {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 34px;
  padding: 3px;
  margin-left: 6px;
  border-radius: var(--kj-r-pill);
  border: 0;
  background: var(--kj-b3-sunken);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--kj-b3-muted);
  flex: 0 0 auto;
}
.kj-nav__lang--seg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 38px;
  padding: 0 11px;
  border-radius: var(--kj-r-pill);
  transition: background-color var(--kj-dur-base) var(--kj-ease-out), color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-nav__lang--seg span.is-on { background: var(--kj-b3-navy); color: #FFFFFF; }

/* "Publiko një punë" — both headers, tier 1 (design line 288): h40, pad 0 14,
   13.5/800 coral-600, margin-left 4 */
.kj-nav__post {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  margin-left: 4px;
  border-radius: var(--kj-r-pill);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--kj-coral-600);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-nav__post:hover { background: var(--kj-coral-50); }

/* "Kyçu" — the design's gradient pill. --kj-gradient (the batch-1/2 90deg
   #FFC163 -> #FF5168) is a different ramp, so this overrides .kj-btn--primary
   rather than inheriting it. */
.kj-btn--pub {
  height: 38px;
  padding: 0 16px;
  border-radius: var(--kj-r-pill);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .01em;
  background: var(--kj-b3-gradient);
  color: #FFFFFF;
  box-shadow: var(--kj-shadow-accent);
  flex: 0 0 auto;
  transition: transform var(--kj-dur-fast) var(--kj-ease-out), box-shadow var(--kj-dur-base) var(--kj-ease-out);
}
.kj-btn--pub:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55);
}
/* "Kyçu" in the BAR is the design's OUTLINE pill (2026-10-09, line 290): h40,
   pad 0 16, 1.5px #CBD3E0, white, navy 14/800, margin-left 6; the drawer's
   instance keeps the gradient. */
.kj-signin--bar .kj-signin__btn {
  height: 40px;
  padding: 0 16px;
  margin-left: 6px;
  border: 1.5px solid var(--kj-b3-stroke-2);
  background: #FFFFFF;
  color: var(--kj-b3-title);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  box-shadow: none;
}
.kj-signin--bar .kj-signin__btn:hover,
.kj-signin--bar.is-open .kj-signin__btn {
  border-color: var(--kj-b3-title);
  transform: none;
  box-shadow: none;
  filter: none;
}
/* "Krijo profil" — the gradient pill, desktop only (line 291) */
.kj-nav__create {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-b3-gradient);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: filter var(--kj-dur-base) var(--kj-ease-out);
}
.kj-nav__create:hover { filter: brightness(1.04); color: #FFFFFF; }

/* "Kyçu" asks who you are (2026-10-06, kj-signin-menu.php): the pill — or the
   drawer's button — opens two choices, "Jam punëkërkues" (/login) and "Jam
   kompani" (/client-login). A disclosure: the panel is [hidden] until opened. */
.kj-signin { position: relative; flex: 0 0 auto; }
.kj-signin__btn { gap: 6px; }
.kj-signin__chev { flex: none; transition: transform var(--kj-dur-base) var(--kj-ease-out); }
.kj-signin.is-open .kj-signin__chev { transform: rotate(180deg); }
.kj-signin__menu {
  display: block;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--kj-b3-stroke);
  border-radius: 16px;
  box-shadow: var(--kj-shadow-card);
  animation: kjSigninIn .16s var(--kj-ease-out) both;
}
.kj-signin__menu[hidden] { display: none; }
.kj-signin--bar .kj-signin__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 300px;
}
.kj-signin__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--kj-b3-title);
  text-decoration: none;
  transition: background-color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-signin__item:hover, .kj-signin__item:focus-visible { background: var(--kj-b3-page); }
.kj-signin__item:focus-visible { outline: 2px solid var(--kj-coral-400); outline-offset: 1px; }
.kj-signin__ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kj-coral-50);
  color: var(--kj-coral-600);
}
.kj-signin__item + .kj-signin__item .kj-signin__ico { background: var(--kj-b3-sunken); color: var(--kj-b3-navy); }
.kj-signin__txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.kj-signin__lbl { font-weight: 700; font-size: 14px; line-height: 1.3; white-space: normal; }
.kj-signin__sub { margin-top: 2px; font-weight: 500; font-size: 12.5px; line-height: 1.35; color: var(--kj-b3-muted); white-space: normal; }
/* the phone drawer: the button sits at the bottom of the screen, so the
   choices open above it, in the flow (the links above scroll to make room) */
.kj-signin--drawer { display: flex; flex-direction: column-reverse; gap: 10px; width: 100%; }
.kj-signin--drawer .kj-signin__menu { padding: 6px; box-shadow: none; }
@keyframes kjSigninIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kj-signin__menu, .kj-signin__chev { animation: none; transition: none; }
}

/* the burger — both headers (design line 312): a 40px transparent disc,
   shown under the house 1099 breakpoint by the base rule */
.kj-nav__burger {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--kj-b3-title);
  flex: 0 0 auto;
  transition: background-color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-nav__burger:hover { background: var(--kj-b3-page); }
.kj-nav__burger svg path { stroke: currentColor; }

/* "Publiko një punë" leaves with tier 1 (1139, the shared rule above);
   "Krijo profil" is desktop-only (the design's data-desk → house 1099). */
@media (max-width: 1099px) {
  .kj-nav__create { display: none; }
}
/* design 767 -> house 759 (lines 159-162): the header tightens — gap 6, the
   cluster's gap 1, the logo 26 (the 14px gutters are on .kj-nav__inner) —
   and keeps the pill plus "Kyçu" (visitor) or the two icon buttons (signed
   in) beside the right-aligned burger. */
@media (max-width: 759px) {
  .kj-nav--pub, .kj-nav--auth { gap: 6px; }
  .kj-nav--pub .kj-nav__logo img, .kj-nav--auth .kj-nav__logo img { height: 26px; }
  .kj-nav-wrap--pub .kj-nav__actions--pub, .kj-nav__actions--auth { gap: 1px; }
  .kj-signin--bar .kj-signin__btn { margin-left: 4px; padding: 0 13px; }
}
/* 360px phones (anything under 380): the English "Sign in" pill is wider than "Kyçu" and the bar
   overflowed by 7px (found by the apply-form phone scenario at 360×844 en, 2026-10-10). The bar
   tightens once more: a 22px wordmark, 32px pill halves, the Kyçu pill without its chevron —
   measured: visitor bar 317px, signed-in bar 330px on a 345px (scrollbar) viewport. */
@media (max-width: 379px) {
  .kj-nav--pub .kj-nav__logo img, .kj-nav--auth .kj-nav__logo img { height: 22px; }
  .kj-nav__lang--seg { margin-left: 4px; }
  .kj-nav__lang--seg span { min-width: 32px; padding: 0 8px; }
  .kj-signin--bar .kj-signin__btn { margin-left: 2px; padding: 0 10px; }
  .kj-signin--bar .kj-signin__chev { display: none; }
}

/* ---------- Public drawer ---------- */
.kj-drawer--pub .kj-drawer__scrim {
  background: rgba(4, 30, 66, .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* panel, head, rows, bottom: the shared "Mobile drawer" rules near the top of
   this file (2026-10-09 — the Batch 1 18px chevron rows are gone, the design
   draws the same 15/700 rows for both audiences). Kept here: the flag row,
   the "Publiko një punë" and "Kyçu" buttons. */
.kj-drawer--pub .kj-drawer__lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px;
  border-top: 1px solid var(--kj-b3-stroke);
  border-radius: 0;
  font-weight: 700;
  font-size: 17px;
  color: var(--kj-b3-title);
}
.kj-drawer--pub .kj-drawer__lang img { width: 22px; height: 22px; }
.kj-drawer__langswap {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--kj-coral-600);
}
.kj-drawer__bottom--pub { flex-direction: column; gap: 10px; }
.kj-drawer__post {
  width: 100%;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--kj-r-pill);
  border: 1.5px solid var(--kj-coral-200);
  background: #FFFFFF;
  color: var(--kj-coral-600);
  font-weight: 700;
  font-size: 15px;
  transition: background-color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-drawer__post:hover { background: var(--kj-coral-50); }
.kj-drawer__bottom--pub .kj-btn--pub { width: 100%; height: 46px; padding: 0 22px; font-size: 15px; }

/* ---------- Shared footer (Batch 1 artboard; geometry per the 2026-10-09 design) ----------
   The design draws this one footer for both halves: margin-top 48, wrap
   1280/32, main padding 56/32/26, columns 1.6fr 1fr 1fr 1fr gap 40. The
   Batch 3 compact candidate bar (.kj-footer-c) is gone. */
.kj-footer {
  background: var(--kj-b3-gradient-navy);
  color: var(--kj-b3-on-navy);
  margin-top: 48px;
  padding: 0;
}
.kj-footer .kj-container {
  max-width: var(--kj-b3-container);
  padding-left: var(--kj-b3-gutter);
  padding-right: var(--kj-b3-gutter);
}

/* ISO / Bureau Veritas strip — now the footer's own first band, on the navy
   rather than the old full-bleed #383838 bar. */
.kj-footer__iso {
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kj-footer__iso-in {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.kj-footer__iso-in img {
  flex: 0 0 auto;
  align-self: flex-start;          /* the design's own (root l.461), so the stacked phone band keeps it at its width */
  height: 44px;
  width: auto;
  padding: 4px;
  border-radius: 8px;
  background: #FFFFFF;
  display: block;
}
.kj-footer__iso-in span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--kj-b3-on-navy-muted);
}

/* main band. Direct child only, so the ISO strip's inner wrap is not matched. */
.kj-footer > .kj-container { padding-top: 56px; padding-bottom: 26px; }
.kj-footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }

/* the design's footer logo (logo-wordmark-white.svg, the bundle's file byte for byte) at its 30px: 131.6 × 30 */
.kj-footer__logo { height: 30px; width: auto; }
.kj-footer__brand p {
  margin-top: 18px;
  max-width: 300px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--kj-b3-on-navy-muted);
}
.kj-footer__social { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.kj-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background-color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-footer__social a:hover { background: rgba(255, 255, 255, .16); }
.kj-footer__social a img { width: 17px; height: 17px; display: block; }

.kj-footer h4 {
  font-family: var(--kj-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;                 /* Root footer: 14/21 (body 1.5) */
  color: var(--kj-b3-on-navy);
  margin-bottom: 16px;
}
.kj-footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.kj-footer__col a,
.kj-footer__col li {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;                 /* Root footer: 14/21 */
  color: var(--kj-b3-on-navy-muted);
  transition: color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-footer__col a:hover { color: var(--kj-b3-on-navy); }
/* the design prints the phone and the email as the only white/bold rows */
.kj-footer__col li.is-strong,
.kj-footer__col li.is-strong a { color: #FFFFFF; font-weight: 700; }

/* app badges + partner network, on one ruled strip */
.kj-footer__strip {
  margin-top: 36px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 32px;
}
.kj-footer__stores { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The badge IS the button (2026-10-03): no frame, no clip. The old 1px
   rgba(255,255,255,.2) border + 10px overflow clip around artwork that had its
   own #A6A6A6 outline read as a white edge on the navy. The radius only shapes
   the keyboard focus ring. docs/features/store-badges.md */
.kj-footer__stores a {
  display: inline-flex;
  border-radius: var(--kj-b1-r-xs);
  transition: transform var(--kj-dur-base) var(--kj-ease-out);
}
.kj-footer__stores a:hover { transform: translateY(-1px); }
.kj-footer__stores a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.kj-footer__stores img { height: 40px; width: auto; display: block; }
@media (prefers-reduced-motion: reduce) {
  .kj-footer__stores a { transition: none; }
  .kj-footer__stores a:hover { transform: none; }
}
.kj-footer__partners {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;
  flex-wrap: wrap;
  margin: 0;
  opacity: .85;
}
.kj-footer__partners img { height: 26px; width: auto; max-width: 100%; display: block; }
.kj-footer__partners a { transition: opacity var(--kj-dur-base) var(--kj-ease-out); opacity: .9; }
.kj-footer__partners a:hover { opacity: 1; }

.kj-footer__bottom {
  margin-top: 0;
  padding-top: 22px;
  /* NO padding-bottom: the artboard's legal row is `padding: 22px 0 0` and the
     28px that closes the footer is the main wrap's own padding-bottom (above).
     Setting it here as well double-padded it and left a 56px empty navy band
     under the copyright instead of the design's 28px. */
  padding-bottom: 0;
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;                        /* the design's row gap 12 both ways (root l.497; it was 12 24) */
}
.kj-footer__bottom p { font-size: 13px; color: var(--kj-b3-on-navy-muted); }
.kj-footer__legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }   /* design: 16 (root l.499) */
.kj-footer__legal a {
  font-size: 13px;
  color: var(--kj-b3-on-navy-muted);
  transition: color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-footer__legal a:hover { color: var(--kj-b3-on-navy); }
/* accepted-payment marks: decorative, kept from the previous footer, in the
   legal row. 2026-10-12: the 2026-10-09 design draws two 30 × 20 card glyphs
   there, 8 apart (root l.501), so the real Visa / Mastercard marks take that
   box: their art is a 3:2 card centred in a 32 × 32 square, and cover fills
   the box with the card. The row is 42 tall as the design's (it was 50 with
   the 28 × 28 marks, and the footer 541 against 533). */
.kj-footer__pay { display: flex; align-items: center; gap: 8px; margin-left: 0; }
.kj-footer__pay img { width: 30px; height: 20px; object-fit: cover; display: block; opacity: .75; }

/* canonical breakpoints only (759 / 1099), same as every other page */
@media (min-width: 760px) {
  .kj-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
@media (min-width: 1100px) {
  .kj-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
}
/* phones: the design's ≤767 rules, at the house 759 (2026-10-12). The ISO band
   stacks ([data-stack] + [data-iso] 56): the mark on its own row, the 14px
   sentence 18 under it — it was a row with a 38px mark and 13px copy. The strip
   keeps space-between / 18 32 and the badges their 40px (the design changes
   neither; they were flex-start / 18 24 and 36px). The partners take the
   design's [data-gap-m] 12 — at 18 24 the four logos broke onto two rows at
   390. The 20px gutter is the house phone gutter of every content box (the
   design's is 16); the 20px partner logos fit the real, horizontal art. */
@media (max-width: 759px) {
  .kj-footer .kj-container { padding-left: 20px; padding-right: 20px; }
  .kj-footer > .kj-container { padding-top: 40px; }
  .kj-footer__iso-in { flex-direction: column; align-items: stretch; gap: 18px; }
  .kj-footer__iso-in img { height: 56px; }
  .kj-footer__partners { justify-content: flex-start; gap: 12px; }
  .kj-footer__partners img { height: 20px; }
}


/* ============================================================================
   Batch 3 notifications popover (kj-notif-popover.php) — Root geometry:
   fixed top 80 · right max(16px, calc((100vw - 1280px)/2 + 100px)) · width
   min(400px, 100vw - 32) · r18 · shadow-xl; head 14/16 (15/800 title, 12.5/700
   coral "mark all"); chips 34 / pad 0 12 / 13 700; list max 380 scroll,
   rows 12/16 with a 36px r10 icon tile, 13.5 text, 12 faint "when", 8px dot;
   footer link 13/700 muted centred with a top rule.
   ============================================================================ */
.kj-iconbtn--bell { cursor: pointer; font: inherit; }
.kj-np[hidden] { display: none !important; }
.kj-np__bg { position: fixed; inset: 0; z-index: 55; }
.kj-np__pop {
  position: fixed; top: 80px;
  right: max(16px, calc((100vw - 1280px) / 2 + 100px));
  width: min(400px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--kj-b3-stroke); border-radius: 18px;
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  z-index: 60; overflow: hidden;
  animation: kjScaleIn .2s var(--kj-ease-out, ease-out) both;
  font-family: var(--kj-font-mulish);
}
.kj-np__h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--kj-b3-stroke); }
.kj-np__t { font-family: var(--kj-font); font-weight: 800; font-size: 15px; color: var(--kj-b3-title); }
.kj-np__all { border: 0; background: transparent; color: var(--kj-coral-600); font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; padding: 1px 6px; line-height: normal; }
.kj-np__all[hidden] { display: none; }
.kj-np__f { display: flex; gap: 4px; padding: 10px 12px 0; flex-wrap: wrap; }
.kj-np__chip {
  height: 30px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--kj-b3-stroke); background: #fff; color: var(--kj-b3-muted);
  font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.kj-np__chip.is-on { border-color: var(--kj-b3-title); background: var(--kj-b3-title); color: #fff; }
.kj-np__list { max-height: 380px; overflow-y: auto; padding: 6px 0; }
.kj-np__it { display: flex; gap: 12px; padding: 12px 16px; color: var(--kj-b3-title); text-decoration: none; }
.kj-np__it:hover { background: var(--kj-b3-page, #F6F8FB); color: var(--kj-b3-title); }
.kj-np__it[hidden] { display: none; }
.kj-np__ico { width: 36px; height: 36px; border-radius: 10px; background: var(--kj-b3-page); color: var(--kj-b3-muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kj-np__it.is-unread .kj-np__ico { color: var(--kj-coral-600); }
.kj-np__b { flex: 1; min-width: 0; }
.kj-np__x { display: block; font-size: 13.5px; line-height: 1.4; font-weight: 500; }
.kj-np__it.is-unread .kj-np__x { font-weight: 700; }
.kj-np__w { display: block; font-size: 12px; color: var(--kj-b3-faint); margin-top: 2px; }
.kj-np__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kj-coral-500); margin-top: 6px; flex: none; }
.kj-np__empty { padding: 30px; text-align: center; color: var(--kj-b3-muted); font-size: 14px; }
.kj-np__empty[hidden] { display: none; }
.kj-np__manage { display: block; padding: 12px 16px; border-top: 1px solid var(--kj-b3-stroke); text-align: center; font-weight: 700; font-size: 13px; color: var(--kj-b3-muted); text-decoration: none; }
.kj-np__manage:hover { color: var(--kj-b3-muted); }   /* root.x-dc.txt:375: an inline muted colour the global a:hover cannot beat (2026-10-11) */


/* ============================================================================
   2026-10-09 — ONE CHROME ("KosovaJob — publik + i kyçur"): the phone tab bar,
   the toasts, the motion layer and the messages popover. The nav tiers, the
   unified links, the pill, the cluster and the drawer live in their own
   sections above. docs/features/site-chrome.md · tests/kj-chrome-unified.test.php
   ============================================================================ */

/* ---------- Phone tab bar (headerArea_new.php, signed in, ≤759) ----------
   Design lines 154-158 and 327-337 (767 → house 759): fixed to the bottom,
   five equal columns on rgba(255,254,253,.94) + blur 14, a 1px top rule and
   the safe-area inset; each tab a 60px column of a 22px icon (stroke 2.3 on /
   1.7 off) over a 10.5/800 label, the current one coral-600. The body gets
   64px of room so no page ends under it. */
.kj-tabbar { display: none; }
@media (max-width: 759px) {
  .kj-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    background: rgba(255, 254, 253, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--kj-b3-stroke);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body:has(.kj-tabbar) { padding-bottom: 64px; }
}
.kj-tabbar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 60px;
  color: var(--kj-b3-muted);
  font-family: var(--kj-font);
  transition: color var(--kj-dur-base) var(--kj-ease-out);
}
.kj-tabbar__tab.is-active { color: var(--kj-coral-600); }
.kj-tabbar__ico { position: relative; display: inline-flex; }
.kj-tabbar__tab svg { stroke-width: 1.7; }
.kj-tabbar__tab.is-active svg { stroke-width: 2.3; }
.kj-tabbar__lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .01em; line-height: 1; }

/* ---------- Toasts (window.kjToast, headerArea_new.php) ----------
   Design lines 553-562 / 834-840: a column top 84 / right 20, cards 380 wide
   (100vw - 32 on a phone), padding 13 16 15 14, r18, white, a 1px rule, the
   shadow pair, a 28px icon disc (success-bg + #0F7A50, or --surface-muted +
   muted for "info"), 14/600 text, and a 3px bar at the foot that empties in
   3.2 s. Click to dismiss. */
.kj-toasts {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.kj-toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 16px 15px 14px;
  border-radius: 18px;
  background: #fff;
  color: var(--kj-b3-title);
  border: 1px solid var(--kj-b3-stroke);
  box-shadow: 0 18px 40px -16px rgba(4, 30, 66, .35), 0 2px 8px -2px rgba(4, 30, 66, .12);
  font-family: var(--kj-font-mulish);
  cursor: pointer;
  animation: kjToastIn .42s var(--kj-ease-out) both;
}
.kj-toast.is-out { opacity: 0; transform: translateX(12px); transition: opacity .18s, transform .18s; }
.kj-toast__ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kj-b3-success-bg);
  color: #0F7A50;
}
.kj-toast--info .kj-toast__ico { background: var(--kj-b3-page); color: var(--kj-b3-muted); }
.kj-toast__txt { flex: 1; min-width: 0; padding-top: 4px; font-weight: 600; font-size: 14px; line-height: 1.4; }
.kj-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kj-b3-sunken); }
.kj-toast__bar > i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: var(--kj-b3-success);
  animation: kjToastBar 3.2s linear both;
}
.kj-toast--info .kj-toast__bar > i { background: var(--kj-b3-stroke-2); }
@keyframes kjToastIn { from { opacity: 0; transform: translateX(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes kjToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Motion layer (design lines 36-54), scoped to the new chrome ----------
   Small, everywhere: colour / background / border / shadow / transform
   transitions on every control, a press (scale .97), the same transitions on
   inputs with a coral focus ring, images fading in — and all of it off under
   prefers-reduced-motion. Scoped to body:has(.kj-nav-wrap) so the employer
   chrome and the legacy pages are untouched. Checkboxes and radios are left
   out of the ring (the design draws its own switches).
   ONE button is left out of the transition rule (2026-10-17, the hand-off of P-home's re-verification of home-lists-24): the
   search alerts panel's remove button (.kj-wk-mg__rm, new-ui/alert-pill.css) keeps its own `background .15s, color .15s` — the
   design draws it so (KJSearch.html, inline), where this layer only reaches buttons without a transition of their own. The
   exclusion sits inside :where(), so the rule keeps its weight (0,1,2) and every other button its .18s; the panel's close and
   "Hiq të gjitha" buttons have no transition of their own in the design and keep this one. */
html:has(.kj-nav-wrap) { scroll-behavior: smooth; }
body:has(.kj-nav-wrap) button:where(:not(.kj-wk-mg__rm)),
body:has(.kj-nav-wrap) [role="button"],
body:has(.kj-nav-wrap) [role="link"],
body:has(.kj-nav-wrap) a[href] {
  transition: color .18s, background-color .18s, border-color .18s, box-shadow .22s var(--kj-ease-out), transform .18s var(--kj-ease-out), opacity .18s, filter .18s;
}
body:has(.kj-nav-wrap) button:not(:disabled):active,
body:has(.kj-nav-wrap) [role="button"]:active { transform: scale(.97); }
body:has(.kj-nav-wrap) [role="link"]:active { transform: scale(.995); }
body:has(.kj-nav-wrap) input,
body:has(.kj-nav-wrap) select,
body:has(.kj-nav-wrap) textarea { transition: border-color .18s, box-shadow .22s var(--kj-ease-out), background-color .18s; }
body:has(.kj-nav-wrap) input:focus,
body:has(.kj-nav-wrap) select:focus,
body:has(.kj-nav-wrap) textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(254, 97, 108, .14); }
body:has(.kj-nav-wrap) input[type="range"]:focus,
body:has(.kj-nav-wrap) input[type="checkbox"]:focus,
body:has(.kj-nav-wrap) input[type="radio"]:focus { box-shadow: none; }
body:has(.kj-nav-wrap) img { transition: opacity .35s var(--kj-ease-out), transform .35s var(--kj-ease-out); }
@media (prefers-reduced-motion: reduce) {
  body:has(.kj-nav-wrap) *,
  body:has(.kj-nav-wrap) *::before,
  body:has(.kj-nav-wrap) *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  html:has(.kj-nav-wrap) { scroll-behavior: auto; }
}

/* ---------- "E re" pill (kj-newpill.php → kj_new_pill_html()) ----------
   The 2026-10-09 design's badge for every page that is not the shared job card (operator,
   2026-10-10: "apply the same logic on all pages where e re is used"): KJJobCard.html:84-86 +
   the shell's kjNewSheen / kjNewGlow — 20 px, padding 0 9 0 7, gap 5, Mulish 11 / 800,
   coral-50 / coral-700, a 6 px coral-500 dot that rings once per 7.5 s and a white sheen that
   crosses the pill once per 7.5 s (moved by background-position, so no compositing layer —
   see cards.css). Same values as the card's copy in cards.css (tests/kj-newpill.test.php pins
   them equal). The resets keep legacy page sheets (.setToTopListRight wrappers, global
   float/uppercase rules) from reshaping it. */
.kj-newpill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 20px;
  padding: 0 9px 0 7px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--kj-coral-50, #FFF1EF);
  color: var(--kj-coral-700, #CE3340);
  font-family: var(--kj-font-mulish, 'Mulish', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 800;
  line-height: 11px;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  vertical-align: baseline;
  float: none;
  flex: none;
}
.kj-newpill__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kj-coral-500, #FE616C);
  flex: none;
  animation: kjNewGlow 7.5s ease-in-out infinite;
}
.kj-newpill__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 38% 100%;
  background-position: -79.7% 0;
  animation: kjNewSheen 7.5s ease-in-out infinite;
}
@keyframes kjNewSheen {
  0%, 86% { background-position: -79.7% 0; }
  94%, 100% { background-position: 141% 0; }
}
@keyframes kjNewGlow {
  0%, 82%, 100% { box-shadow: 0 0 0 0 rgba(254,97,108,0); }
  89% { box-shadow: 0 0 0 3px rgba(254,97,108,.26); }
}
@media (prefers-reduced-motion: reduce) {
  .kj-newpill__sheen, .kj-newpill__dot { animation: none !important; }
}

/* ---------- Messages popover (kj-msgs-popover.php) ----------
   Design lines 340-359: fixed top 80 · right max(16px, (100vw - 1280)/2 +
   144) · width min(400px, 100vw - 32) · r18 · shadow-xl; head 14/16 with the
   15/800 title and the "N të palexuara" pill (h22, pad 0 9, coral-50 /
   coral-700, 12/800); rows 12/16 — a 36px r11 tile (initials 12.5/800 on
   navy, or the logo), company 13.5/800, "when" 11.5 faint, preview 12.5
   muted (700 while unread), an 8px coral dot; the foot link 13/700 muted. */
.kj-iconbtn--msgs { cursor: pointer; font: inherit; }
.kj-mp[hidden] { display: none !important; }
.kj-mp__bg { position: fixed; inset: 0; z-index: 55; }
.kj-mp__pop {
  position: fixed; top: 80px;
  right: max(16px, calc((100vw - 1280px) / 2 + 144px));
  width: min(400px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--kj-b3-stroke); border-radius: 18px;
  box-shadow: var(--kj-shadow-xl, 0 30px 70px -20px rgba(4, 30, 66, .28));
  z-index: 60; overflow: hidden;
  animation: kjScaleIn .2s var(--kj-ease-out, ease-out) both;
  font-family: var(--kj-font-mulish);
}
.kj-mp__h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--kj-b3-stroke); }
.kj-mp__t { font-family: var(--kj-font); font-weight: 800; font-size: 15px; color: var(--kj-b3-title); }
.kj-mp__n { height: 22px; padding: 0 9px; border-radius: 999px; background: var(--kj-coral-50); color: var(--kj-coral-700); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; white-space: nowrap; }
.kj-mp__list { max-height: 380px; overflow-y: auto; padding: 6px 0; }
.kj-mp__it { display: flex; gap: 12px; padding: 12px 16px; color: var(--kj-b3-title); text-decoration: none; }
.kj-mp__it:hover { background: var(--kj-b3-page); color: var(--kj-b3-title); }
.kj-mp__ava {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--kj-font); font-weight: 800; font-size: 12.5px; color: #fff;
  background: var(--kj-b3-navy) center/cover no-repeat;
}
.kj-mp__ava--logo { background-color: #fff; background-size: contain; background-origin: content-box; border: 1px solid var(--kj-b3-stroke); padding: 3px; }
.kj-mp__b { flex: 1; min-width: 0; }
.kj-mp__l1 { display: flex; align-items: baseline; gap: 8px; }
.kj-mp__co { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-mp__w { font-size: 11.5px; color: var(--kj-b3-faint); flex: none; }
.kj-mp__x { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; font-weight: 500; color: var(--kj-b3-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-mp__it.is-unread .kj-mp__x { font-weight: 700; }
.kj-mp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kj-coral-500); margin-top: 6px; flex: none; }
.kj-mp__empty { padding: 30px; text-align: center; color: var(--kj-b3-muted); font-size: 14px; }
.kj-mp__all { display: block; padding: 12px 16px; border-top: 1px solid var(--kj-b3-stroke); text-align: center; font-weight: 700; font-size: 13px; color: var(--kj-b3-muted); text-decoration: none; }
.kj-mp__all:hover { color: var(--kj-b3-title); }