/*
 * worknear.my — the signed-off mock's layer (T040, WORKNEAR/docs/design/mock).
 *
 * Loaded after style.css (kerja0's shared stylesheet). Same rules as that file:
 *   - every colour is a token, defined in the three blocks below and nowhere else
 *     (light :root, the system-dark media block, and the chosen-dark attribute block)
 *   - every z-index is one of style.css's named layers (--kj-z-*)
 *   - three widths only: 640 / 900 / 1200
 * Data colours (a rail line's own colour) arrive inline as --wn-line on the element.
 */

/* ============================================================ tokens: light */
:root {
    /* brand (kept from T040 phase T) */
    --kj-brand: #0e7c66;
    --kj-brand-hover: #095c4c;
    --kj-brand-soft: #e3f3ef;
    --kj-brand-ink: #095c4c;
    --kj-brand-ink-hov: #06483c;
    --kj-mark: #0e7c66;
    --kj-accent: #ffb020;
    --kj-accent-soft: #fff3d5;
    --kj-accent-ink: #684700;
    --kj-accent-border: #f0d48a;
    --kj-featured-line: #ffb020;
    --kj-glow: rgba(14, 124, 102, .16);
    --kj-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* the page, in the mock's green-grey */
    --kj-bg: #f3f6f5;
    --kj-bg-soft: #f8faf9;
    --kj-bg-sunk: #eaf0ee;
    --kj-surface: #ffffff;
    --kj-border: #dbe4e1;
    --kj-border-strong: #c3d0cb;
    --kj-text: #11231e;
    --kj-text-soft: #3c4d48;
    --kj-text-faint: #66756f;
    --kj-shadow: 0 1px 2px rgba(17, 35, 30, .06), 0 4px 14px rgba(17, 35, 30, .06);
    --kj-shadow-lift: 0 2px 6px rgba(17, 35, 30, .08), 0 12px 32px rgba(17, 35, 30, .10);
    --kj-radius: 12px;

    /* the header is two rows now; sticky things below it clear this much */
    --kj-header-h: 118px;

    /* worknear's own */
    --wn-font-head: "Plus Jakarta Sans", var(--kj-font);
    --wn-brand-deep: #095c4c;
    --wn-on-brand: #ffffff;
    --wn-on-brand-soft: rgba(255, 255, 255, .72);
    --wn-on-brand-line: rgba(255, 255, 255, .45);
    --wn-on-brand-hover: rgba(255, 255, 255, .12);
    --wn-head-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    --wn-accent-deep: #d98e00;
    --wn-accent-on: #2b1d00;
    --wn-accent-glow: rgba(255, 176, 32, .25);
    --wn-fab-shadow: 0 6px 18px rgba(217, 142, 0, .45);
    --wn-dist-bg: rgba(255, 176, 32, .18);
    --wn-dist-ink: #5e4100;
    --wn-mark-pin: #ffb020;
    --wn-mark-ring: #095c4c;
    --wn-tile-ink: #ffffff;
    --wn-pin-edge: #ffffff;
    --wn-pin-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    --wn-save-on: #c93c3c;
    --wn-tabbar-bg: rgba(255, 255, 255, .92);
    --wn-tabbar-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    --wn-radius: 12px;
    --wn-radius-sm: 8px;

    /* kinds of work: pin colour and logo tile */
    --wn-k-office: #3366cc;
    --wn-k-food: #e07a1f;
    --wn-k-retail: #8e44ad;
    --wn-k-health: #d64545;
    --wn-k-logistics: #5a6b7b;
    --wn-k-education: #b98500;
    --wn-k-service: #0e9aa7;
    --wn-k-technician: #7a5533;

    /* the member sidebar is dark in both themes (kerja0's admin template), in worknear green */
    --kj-side-bg: #10251f;
    --kj-side-sub: #0b1d18;
    --kj-side-line: #254239;
    --kj-side-hover: #1b382f;
    --kj-side-active: #225648;
    --kj-side-ink: #eaf4f0;
    --kj-side-soft: #a7c4b9;
    --kj-side-signout: #8f2e27;
    --kj-side-signout-hov: #76241f;
}

/* ============================================================ tokens: dark (system) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kj-brand: #38b99b;
        --kj-brand-hover: #5dceb2;
        --kj-brand-soft: #12372f;
        --kj-brand-ink: #58d0b4;
        --kj-brand-ink-hov: #8be2cd;
        --kj-accent-soft: #382b12;
        --kj-accent-ink: #ffd16f;
        --kj-accent-border: #5a4518;
        --kj-glow: rgba(56, 185, 155, .22);
        --kj-bg: #0d1513;
        --kj-bg-soft: #111c19;
        --kj-bg-sunk: #182622;
        --kj-surface: #14201d;
        --kj-border: #26372f;
        --kj-border-strong: #35493f;
        --kj-text: #e8f0ed;
        --kj-text-soft: #c3d0cb;
        --kj-text-faint: #93a39d;
        --kj-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
        --kj-shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4);
        --wn-dist-ink: #ffc65a;
        --wn-tabbar-bg: rgba(20, 32, 29, .92);
        --wn-save-on: #ef6b6b;
        --kj-side-bg: #0a1210;
        --kj-side-line: #1f2e29;
    }
}

/* ============================================================ tokens: dark (chosen) */
:root[data-theme="dark"] {
    --kj-brand: #38b99b;
    --kj-brand-hover: #5dceb2;
    --kj-brand-soft: #12372f;
    --kj-brand-ink: #58d0b4;
    --kj-brand-ink-hov: #8be2cd;
    --kj-accent-soft: #382b12;
    --kj-accent-ink: #ffd16f;
    --kj-accent-border: #5a4518;
    --kj-glow: rgba(56, 185, 155, .22);
    --kj-bg: #0d1513;
    --kj-bg-soft: #111c19;
    --kj-bg-sunk: #182622;
    --kj-surface: #14201d;
    --kj-border: #26372f;
    --kj-border-strong: #35493f;
    --kj-text: #e8f0ed;
    --kj-text-soft: #c3d0cb;
    --kj-text-faint: #93a39d;
    --kj-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --kj-shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4);
    --wn-dist-ink: #ffc65a;
    --wn-tabbar-bg: rgba(20, 32, 29, .92);
    --wn-save-on: #ef6b6b;
    --kj-side-bg: #0a1210;
    --kj-side-line: #1f2e29;
}

/* ============================================================ base */
body { font-family: var(--kj-font); background: var(--kj-bg); color: var(--kj-text); }
h1, h2, h3, h4 { font-family: var(--wn-font-head); }

.wn-k-office     { --wn-k: var(--wn-k-office); }
.wn-k-food       { --wn-k: var(--wn-k-food); }
.wn-k-retail     { --wn-k: var(--wn-k-retail); }
.wn-k-health     { --wn-k: var(--wn-k-health); }
.wn-k-logistics  { --wn-k: var(--wn-k-logistics); }
.wn-k-education  { --wn-k: var(--wn-k-education); }
.wn-k-service    { --wn-k: var(--wn-k-service); }
.wn-k-technician { --wn-k: var(--wn-k-technician); }

.wn-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wn-verified { width: 15px; height: 15px; flex: none; }
.wn-verified__badge { fill: var(--kj-brand); }
.wn-verified__tick { fill: none; stroke: var(--wn-on-brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wn-muted { color: var(--kj-text-faint); }

/* ============================================================ buttons */
.wn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border: 1px solid transparent; border-radius: var(--wn-radius-sm);
    font: 600 14px/1.2 var(--kj-font); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.wn-btn:hover { text-decoration: none; }
.wn-btn:focus-visible { outline: 2px solid var(--kj-accent); outline-offset: 2px; }
.wn-btn--accent { background: var(--kj-accent); color: var(--wn-accent-on); }
.wn-btn--accent:hover { background: var(--wn-accent-deep); color: var(--wn-accent-on); }
.wn-btn--brand { background: var(--kj-mark); color: var(--wn-on-brand); }
.wn-btn--brand:hover { background: var(--wn-brand-deep); color: var(--wn-on-brand); }
.wn-btn--on-brand { background: var(--wn-on-brand); color: var(--wn-brand-deep); }
.wn-btn--on-brand:hover { background: var(--kj-brand-soft); color: var(--wn-brand-deep); }
.wn-btn--ghost-brand { background: transparent; color: var(--wn-on-brand); border-color: var(--wn-on-brand-line); }
.wn-btn--ghost-brand:hover { background: var(--wn-on-brand-hover); color: var(--wn-on-brand); }
.wn-btn--sm { padding: 6px 12px; font-size: 13px; }
.wn-btn--xs { padding: 4px 11px; font-size: 12.5px; }
.wn-btn[disabled] { opacity: .65; cursor: progress; }
.wn-btn[hidden] { display: none; }

/* ============================================================ header */
.kj-header.wn-head {
    background: var(--kj-mark); color: var(--wn-on-brand);
    border-bottom: 0; box-shadow: var(--wn-head-shadow);
}
.wn-util {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 7px; font-size: 13px; min-height: 34px;
}
.wn-util__nav.kj-nav { margin-left: 0; }
.wn-util__nav > ul { gap: 20px; }
.wn-util__nav > ul > li > a,
.wn-util__nav .kj-nav__toggle {
    padding: 4px 0; border: 0; border-radius: 0; background: transparent;
    color: var(--wn-on-brand); opacity: .92; font: 500 13px/1.3 var(--kj-font);
}
.wn-util__nav > ul > li > a:hover,
.wn-util__nav .kj-nav__toggle:hover,
.wn-util__nav .kj-nav__toggle[aria-expanded="true"] {
    opacity: 1; color: var(--wn-on-brand); background: transparent; border-color: transparent;
    text-decoration: underline; text-underline-offset: 3px;
}
/* The mega panels open across the header's width, from the first row - not centred on a
   menu item that sits near the left edge, which pushed them off the screen. */
.wn-util .kj-nav__has-menu { position: static; }
.wn-util .kj-mega {
    top: calc(100% + 8px); left: 20px; right: 20px; width: auto; transform: none;
    color: var(--kj-text);
}
.wn-util .kj-mega a { color: var(--kj-text-soft); }
.wn-util .kj-mega .kj-mega__head { color: var(--kj-text); }
.wn-util .kj-mega__foot a { color: var(--kj-brand-ink); }
.wn-util__right { display: flex; align-items: center; gap: 10px; color: var(--wn-on-brand); }
/* only the row's own links are white - never the links inside the language menu's white panel */
.wn-util__right > a:not(.wn-btn) { color: var(--wn-on-brand); }
.wn-head .kj-theme {
    width: 30px; height: 30px; border-color: var(--wn-on-brand-line); color: var(--wn-on-brand);
}
.wn-head .kj-theme:hover { border-color: var(--wn-on-brand); color: var(--wn-on-brand); background: var(--wn-on-brand-hover); }

.kj-header__inner.wn-bar { gap: 18px; min-height: 0; padding-top: 8px; padding-bottom: 12px; }
.wn-head .kj-header__burger { color: var(--wn-on-brand); }
.wn-head .kj-header__burger[data-kj-has-filters] { border-color: var(--wn-on-brand-line); color: var(--wn-on-brand); }

/* the lockup */
.kj-brand.wn-brand { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--wn-on-brand); }
.kj-brand.wn-brand:hover { color: var(--wn-on-brand); text-decoration: none; }
.wn-brand .kj-brand__word { font: 800 23px/1 var(--wn-font-head); letter-spacing: -.02em; color: var(--wn-on-brand); }
.wn-word__near { color: var(--kj-accent); }
.wn-word__tld { font-weight: 600; font-size: 14px; opacity: .75; }
.wn-mark { display: block; flex: none; }
.wn-mark__pin { fill: var(--wn-mark-pin); }
.wn-mark__ring { fill: none; stroke: var(--wn-mark-ring); stroke-width: 2; }
.wn-mark__dot { fill: var(--wn-mark-ring); }
.wn-brand--mono, .wn-brand--mono:hover { color: var(--kj-text); }
.wn-brand--mono .kj-brand__word { color: var(--kj-text); }
.wn-brand--mono .wn-word__near { color: var(--kj-brand-ink); }

/* the one search */
.wn-search {
    flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 4px;
    padding: 4px; background: var(--kj-surface); border-radius: 999px; box-shadow: var(--kj-shadow);
}
.wn-search:focus-within { outline: 2px solid var(--kj-accent); outline-offset: 2px; }
.wn-search__field { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; color: var(--kj-text-faint); }
.wn-search__what { flex: 1.2; }
.wn-search__where { flex: 1; border-left: 1px solid var(--kj-border); }
.wn-search input {
    width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent;
    color: var(--kj-text); font: 15px/1.3 var(--kj-font);
}
.wn-search input::placeholder { color: var(--kj-text-faint); }
.wn-locate {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px;
    border: 0; border-radius: 999px; background: var(--kj-brand-soft); color: var(--kj-brand-ink); cursor: pointer;
}
.wn-locate:hover { background: var(--kj-accent-soft); color: var(--kj-accent-ink); }
.wn-locate.is-on { background: var(--kj-accent); color: var(--wn-accent-on); }
.wn-search__go { border-radius: 999px; }

/* sign in / register */
.wn-auth { display: flex; align-items: center; gap: 8px; flex: none; }
.wn-auth .kj-acct {
    display: inline-flex; align-items: center; padding: 9px 16px;
    border: 1px solid var(--wn-on-brand-soft); border-radius: var(--wn-radius-sm);
    color: var(--wn-on-brand); font: 600 14px/1.2 var(--kj-font); text-decoration: none; white-space: nowrap;
}
.wn-auth .kj-acct:hover { background: var(--wn-on-brand-hover); color: var(--wn-on-brand); }
/* a signed-in member's menu stays kerja0's white initials button, which reads on the green */
.wn-auth .kj-member-menu__button { border-color: var(--wn-on-brand); }

/* ============================================================ the hero */
.wn-hero { padding: 26px 0 8px; }
.wn-hero__title { margin: 0 0 6px; color: var(--kj-text); font: 800 32px/1.15 var(--wn-font-head); letter-spacing: -.02em; }
.wn-hero__lede { margin: 0 0 14px; color: var(--kj-text-soft); }
.wn-originbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.wn-origin {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px;
    background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: 999px;
    color: var(--kj-text); font-size: 14px;
}
.wn-origin__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kj-accent); box-shadow: 0 0 0 4px var(--wn-accent-glow); }
.wn-originbar__or, .wn-originbar__within { color: var(--kj-text-faint); font-size: 13px; }
.wn-stationpick { margin: 0; }
.wn-stationpick input {
    min-width: 190px; padding: 7px 10px; border: 1px solid var(--kj-border); border-radius: var(--wn-radius-sm);
    background: var(--kj-surface); color: var(--kj-text); font: 14px/1.3 var(--kj-font);
}
.wn-stationpick input:focus { outline: 2px solid var(--kj-brand); outline-offset: 1px; }
.wn-originbar__gap { flex: 1; }

/* ⚠ THE SELECTED OPTION IS FILLED (the mock's rule, and UIX §5's): a pressed segment is
   brand green with white text, never a near-white chip on a near-white track. */
.wn-seg { display: inline-flex; padding: 3px; background: var(--kj-bg-soft); border: 1px solid var(--kj-border); border-radius: 999px; }
.wn-seg__btn { padding: 6px 12px; border-radius: 999px; color: var(--kj-text-soft); font: 600 13px/1.2 var(--kj-font); white-space: nowrap; }
.wn-seg__btn:hover { color: var(--kj-text); text-decoration: none; }
.wn-seg__btn[aria-current="true"] { background: var(--kj-mark); color: var(--wn-on-brand); }

.wn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.wn-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--kj-border); border-radius: 999px; background: var(--kj-surface);
    color: var(--kj-text-soft); font: 500 13px/1.2 var(--kj-font);
}
.wn-chip:hover { border-color: var(--kj-border-strong); color: var(--kj-text); text-decoration: none; }
.wn-chip[aria-current="true"] { background: var(--kj-mark); border-color: var(--kj-mark); color: var(--wn-on-brand); }
.wn-chip__sw { width: 10px; height: 10px; border-radius: 3px; background: var(--wn-line); }

.wn-split { display: grid; grid-template-columns: minmax(380px, 1fr) 1.15fr; gap: 16px; align-items: start; padding-bottom: 8px; }
.wn-panel { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--wn-radius); box-shadow: var(--kj-shadow); }
.wn-list { overflow: hidden; }
.wn-list__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--kj-border); }
.wn-list__head h2 { margin: 0; font: 700 17px/1.3 var(--wn-font-head); }
.wn-list__head a { color: var(--kj-brand-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.wn-list__rows { max-height: 640px; overflow: auto; overscroll-behavior: contain; }
.wn-list__empty { margin: 0; padding: 14px; color: var(--kj-text-soft); }
.wn-list__foot { padding: 10px 14px; border-top: 1px solid var(--kj-border); }
.wn-list__foot .kj-alertme { margin: 0; }

.wn-mapwrap { position: sticky; top: calc(var(--kj-header-h) + 12px); }
.wn-mapwrap .kj-map.wn-map {
    display: block; height: 640px; min-height: 0; padding: 0;
    border: 1px solid var(--kj-border); border-radius: var(--wn-radius); box-shadow: var(--kj-shadow);
}
/* "Search this area" sits ON the map, top centre (job-core adds it to this wrapper). */
.wn-mapwrap .kj-map-area-search {
    top: 12px; bottom: auto; z-index: var(--kj-z-chrome);
    padding: 7px 14px; border: 0; border-radius: 999px;
    background: var(--kj-accent); color: var(--wn-accent-on); font: 600 13px/1.2 var(--kj-font);
    box-shadow: var(--kj-shadow-lift);
}
.wn-mapwrap .kj-map-area-search:hover { background: var(--wn-accent-deep); color: var(--wn-accent-on); }
.wn-mapwrap .bizmap-map__data-attribution { margin: 6px 2px 0; }

/* the map's own marks */
.wn-you-icon, .wn-st-icon { background: transparent; border: 0; }
.wn-you {
    display: block; width: 18px; height: 18px; border-radius: 50%;
    background: var(--kj-accent); border: 3px solid var(--wn-pin-edge); box-shadow: 0 0 0 6px var(--wn-accent-glow);
}
.wn-st { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--wn-line, var(--kj-text-faint)); border: 2px solid var(--wn-pin-edge); box-shadow: var(--wn-pin-shadow); }
.leaflet-container path.wn-ring { stroke: var(--kj-brand); stroke-width: 1.5; fill: var(--kj-brand); fill-opacity: .06; }

/* pins: one colour and icon per kind of work; a dashed edge means "pinned to the area" */
.bizmap-pin[class*="wn-k-"] { background: var(--wn-k); box-shadow: var(--wn-pin-shadow); }
.bizmap-pin[class*="wn-k-"] .bizmap-pin__glyph {
    width: 15px; height: 15px; color: transparent; overflow: hidden;
    background: var(--wn-pin-edge);
    -webkit-mask: var(--wn-ico) center / contain no-repeat; mask: var(--wn-ico) center / contain no-repeat;
}
.bizmap-pin.is-approx[class*="wn-k-"] { opacity: .8; border-style: dashed; }
.bizmap-pin.wn-k-office     { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.bizmap-pin.wn-k-food       { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6z'/%3E%3Cpath d='M17 9h1.5a2.5 2.5 0 0 1 0 5H17'/%3E%3Cpath d='M8 2v3M12 2v3'/%3E%3C/svg%3E"); }
.bizmap-pin.wn-k-retail     { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
.bizmap-pin.wn-k-health     { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 3h4v7h7v4h-7v7h-4v-7H3v-4h7z'/%3E%3C/svg%3E"); }
.bizmap-pin.wn-k-logistics  { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Ccircle cx='17' cy='18' r='1.8'/%3E%3C/svg%3E"); }
.bizmap-pin.wn-k-education  { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E"); }
.bizmap-pin.wn-k-service    { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z'/%3E%3C/svg%3E"); }
.bizmap-pin.wn-k-technician { --wn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.4 2.4-2.6-.4-.4-2.6z'/%3E%3C/svg%3E"); }
.bizmap-pin-icon.is-hl .bizmap-pin { outline: 3px solid var(--kj-accent); outline-offset: 1px; }
.bizmap-cluster-icon.is-hl .bizmap-cluster { outline: 3px solid var(--kj-accent); }
.bizmap-cluster { background: var(--kj-mark); }

/* the popup card */
.bizmap-map .leaflet-popup-content-wrapper:has(.wn-pop) { padding: 0; overflow: hidden; border-radius: var(--wn-radius); }
.bizmap-map .leaflet-popup-content:has(.wn-pop) { margin: 0; }
.wn-pop.bizmap-card { width: 250px; font: 13px/1.45 var(--kj-font); }
.wn-pop__band {
    display: flex; align-items: flex-end; height: 64px; padding: 8px 10px;
    background: linear-gradient(135deg, var(--wn-k, var(--kj-mark)), var(--wn-brand-deep)); color: var(--wn-on-brand);
}
.wn-pop__emp { font: 700 13px/1.25 var(--wn-font-head); }
.wn-pop__body { padding: 10px; }
.wn-pop__title.bizmap-card__title { margin: 0 0 2px; font: 700 14px/1.3 var(--wn-font-head); }
.wn-pop__sub { margin: 0; color: var(--kj-text-faint); }
.wn-pop__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.wn-pop__pay { color: var(--kj-text); font-weight: 600; }
.wn-pop__dist:not(:empty) { padding: 2px 8px; border-radius: 999px; background: var(--wn-dist-bg); color: var(--wn-dist-ink); font-weight: 700; font-size: 12px; }
.wn-pop__go.bizmap-card__link { margin: 0; padding: 6px 12px; background: var(--kj-mark); border-radius: var(--wn-radius-sm); font-size: 13px; }
.wn-pop__age { color: var(--kj-text-faint); font-size: 12px; margin-left: auto; }
.wn-pop__save.bizmap-card__favorite { margin: 0; width: 30px; height: 30px; }

/* ============================================================ a job as a row */
.kj-row.wn-job,
.kj-row.wn-job.is-featured,
.kj-row.wn-job:hover, .kj-row.wn-job:focus-within,
.kj-row.wn-job.is-featured:hover, .kj-row.wn-job.is-featured:focus-within {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start;
    padding: 14px; background: transparent;
    border: 0; border-bottom: 1px solid var(--kj-border); border-radius: 0;
    box-shadow: none; transform: none;
}
.kj-row.wn-job:last-child { border-bottom: 0; }
.kj-row.wn-job:hover, .kj-row.wn-job:focus-within, .kj-row.wn-job.is-hl { background: var(--kj-bg-soft); }
.wn-logo {
    display: grid; place-items: center; width: 48px; height: 48px; flex: none; overflow: hidden;
    border-radius: 10px; background: var(--wn-k, var(--kj-mark)); color: var(--wn-tile-ink);
    font: 700 16px/1 var(--wn-font-head);
}
.wn-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--kj-surface); }
.wn-job__body { min-width: 0; }
.wn-job__title.kj-row__title, .wn-jobcard__title.kj-card__title { margin: 0; font: 700 15.5px/1.3 var(--wn-font-head); }
.wn-job__link { color: var(--kj-text); }
.wn-job__link:hover { color: var(--kj-brand-ink); text-decoration: none; }
.wn-job__co { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; color: var(--kj-text-soft); font-size: 13.5px; }
.wn-job__vrfd { display: inline-flex; }
.wn-job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; color: var(--kj-text-faint); font-size: 13px; }
.wn-salary { color: var(--kj-text); font-weight: 600; }
.wn-dist {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    background: var(--wn-dist-bg); color: var(--wn-dist-ink); font: 700 12.5px/1.4 var(--kj-font); white-space: nowrap;
}
.wn-dist .wn-ico { width: 13px; height: 13px; }
.wn-approx { padding: 0 5px; border: 1px dashed var(--kj-border-strong); border-radius: 4px; color: var(--kj-text-faint); font-size: 11.5px; }
.wn-station { display: inline-flex; align-items: center; gap: 6px; color: var(--kj-text-soft); font-size: 12.5px; }
.wn-station__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--wn-line, var(--kj-text-faint)); }
.wn-tag { padding: 1px 7px; border-radius: 999px; background: var(--kj-accent-soft); color: var(--kj-accent-ink); font: 700 11px/1.5 var(--kj-font); }
.wn-job__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.wn-posted { color: var(--kj-text-faint); font-size: 12px; white-space: nowrap; }

/* the heart: a plain icon, above the card's stretched link */
.wn-job .kj-favorite, .wn-jobcard .kj-favorite {
    position: relative; z-index: var(--kj-z-above);
    min-width: 0; min-height: 0; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 999px; background: transparent; color: var(--kj-text-faint);
}
.wn-job .kj-favorite:hover, .wn-jobcard .kj-favorite:hover { color: var(--wn-save-on); background: var(--kj-bg-sunk); }
.wn-job .kj-favorite[aria-pressed="true"], .wn-jobcard .kj-favorite[aria-pressed="true"] { color: var(--wn-save-on); border: 0; }
.wn-job .kj-favorite svg, .wn-jobcard .kj-favorite svg { width: 18px; height: 18px; }

/* rows on their own (the lower list, /find/, /near/): one panel, rows ruled between */
.kj-rows.wn-rows, .kj-rows--wide.wn-rows { display: block; gap: 0; overflow: hidden; }
.kj-rows:not(.wn-rows) > .kj-row.wn-job {
    background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--wn-radius);
}
.kj-rows:not(.wn-rows) > .kj-row.wn-job:hover { background: var(--kj-bg-soft); }

/* ============================================================ a job as a card */
.kj-card.wn-jobcard,
.kj-card.wn-jobcard.is-featured {
    display: flex; flex-direction: column; gap: 6px; padding: 16px;
    border: 1px solid var(--kj-border); border-radius: var(--wn-radius); overflow: visible;
    background: var(--kj-surface); box-shadow: var(--kj-shadow);
}
.kj-card.wn-jobcard:hover, .kj-card.wn-jobcard:focus-within,
.kj-card.wn-jobcard.is-featured:hover, .kj-card.wn-jobcard.is-featured:focus-within {
    border-color: var(--kj-brand); box-shadow: 0 0 0 3px var(--kj-glow), var(--kj-shadow-lift); transform: translateY(-2px);
}
.wn-jobcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.wn-jobcard__name { min-width: 0; flex: 1; }
.wn-jobcard__title.kj-card__title { font-size: 15px; }
.wn-jobcard__head .wn-job__co { font-size: 13px; }
.wn-jobcard__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; }
.wn-jobcard__go { margin-left: auto; }

/* ============================================================ sections */
.wn-section { margin-top: 30px; margin-bottom: 30px; }
.wn-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wn-section__head h2 { margin: 0; font: 700 20px/1.25 var(--wn-font-head); }
.wn-section__head a { color: var(--kj-brand-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.wn-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wn-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wn-card { background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--wn-radius); box-shadow: var(--kj-shadow); }

/* rail lines */
.wn-lines { display: flex; flex-wrap: wrap; gap: 8px; }
.wn-line {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--wn-radius-sm);
    background: var(--wn-line, var(--kj-mark)); color: var(--wn-on-brand); font: 600 14px/1.2 var(--kj-font);
}
.wn-line small { font-weight: 500; opacity: .88; }
.wn-line:hover { color: var(--wn-on-brand); text-decoration: none; filter: brightness(1.08); }
.wn-line--dark-ink, .wn-line--dark-ink:hover { color: var(--wn-accent-on); }
.wn-line[aria-current="true"] { outline: 3px solid var(--kj-accent); outline-offset: 2px; }

/* companies */
.wn-company { display: block; overflow: hidden; color: var(--kj-text); text-decoration: none; transition: box-shadow .18s ease, transform .18s ease; }
.wn-company:hover { color: var(--kj-text); text-decoration: none; transform: translateY(-2px); box-shadow: var(--kj-shadow-lift); }
.wn-company__cover { display: block; height: 64px; background: linear-gradient(120deg, var(--wn-k, var(--kj-mark)), var(--kj-mark)); }
.wn-company__body { display: flex; flex-direction: column; gap: 4px; margin-top: -24px; padding: 0 14px 14px; }
.wn-company .wn-logo { border: 3px solid var(--kj-surface); }
.wn-company__name { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 700 15px/1.3 var(--wn-font-head); }
.wn-company__meta { color: var(--kj-text-faint); font-size: 13px; }
.wn-company__jobs { margin-top: 4px; font-size: 13px; }

/* the call to employers */
.wn-callout {
    display: flex; align-items: center; gap: 16px; padding: 18px;
    background: var(--kj-brand-soft); border: 1px solid var(--kj-border); border-radius: var(--wn-radius);
}
.wn-callout__mark { width: 54px; height: 54px; }
.wn-callout__text { flex: 1; }
.wn-callout__text h3 { margin: 0 0 4px; font-size: 18px; }
.wn-callout__text p { margin: 0; color: var(--kj-text-soft); }

/* the job page head: tile, title, facts as chips, apply and save */
.wn-jobhead { display: flex; align-items: flex-start; gap: 16px; }
.wn-jobhead__main { flex: 1; min-width: 0; }
.wn-jobhead h1 { margin: 0 0 4px; font: 800 26px/1.2 var(--wn-font-head); letter-spacing: -.01em; }
.wn-logo--lg { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; }
.wn-facts.kj-listing__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wn-facts.kj-listing__meta > span {
    padding: 5px 10px; border: 1px solid var(--kj-border); border-radius: var(--wn-radius-sm);
    background: var(--kj-bg-soft); color: var(--kj-text-soft); font-size: 13.5px;
}
.wn-facts.kj-listing__meta > span::after { content: none; }
.wn-jobhead__actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wn-jobhead__actions .kj-favorite { width: 40px; height: 40px; }

/* HOW FAR */
.wn-howfar__big { margin: 2px 0 0; color: var(--kj-text); font: 800 30px/1.1 var(--wn-font-head); }
.wn-howfar__from { margin: 4px 0 0; color: var(--kj-text-soft); font-size: 14px; }
.wn-howfar__times { margin: 6px 0 0; color: var(--kj-text); font-weight: 600; font-size: 14px; }
.wn-howfar__station { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; font-size: 13px; }
.wn-howfar__station .wn-station { font-size: 13.5px; color: var(--kj-text); }
.wn-howfar__note { margin: 10px 0 0; color: var(--kj-text-faint); font-size: 12.5px; }
.wn-howfar__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* a results page's own head (/find/, a category, a place): the title and the alert, left-aligned */
.wn-pagehead { padding: 24px 0 2px; }
.wn-pagehead .kj-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.wn-pagehead__title { margin: 0; font: 800 28px/1.2 var(--wn-font-head); letter-spacing: -.02em; }
.wn-pagehead .kj-alertme { margin: 0; }

/* the lower list keeps kerja0's sidebar; it only needs breathing room from the sections */
.kj-main.wn-all { padding-top: 10px; }

/* ============================================================ footer */
.kj-footer.wn-foot { margin-top: 40px; padding: 0 0 20px; background: var(--kj-surface); border-top: 1px solid var(--kj-border); }
.wn-dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 28px; padding-bottom: 20px; }
.wn-dir__title { margin: 0 0 10px; font: 700 14px/1.3 var(--wn-font-head); color: var(--kj-text); }
.wn-dir ul { margin: 0; padding: 0; list-style: none; }
.wn-dir li + li { margin-top: 0; }
.wn-dir a { display: block; padding: 3px 0; color: var(--kj-text-soft); font-size: 13.5px; }
.wn-dir a:hover { color: var(--kj-brand-ink); }
.wn-foot__bottom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    padding-top: 14px; padding-bottom: 6px; border-top: 1px solid var(--kj-border);
    color: var(--kj-text-soft); font-size: 13px;
}
.wn-foot__bottom p { margin: 0; }
.wn-foot__bottom .wn-brand .kj-brand__word { font-size: 20px; }
.wn-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 8px; color: var(--kj-text-faint); font-size: 12.5px; }
.wn-foot__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.wn-foot__links li + li { margin-top: 0; }
.wn-foot__legal a { color: var(--kj-text-soft); }
.wn-foot__legal .kj-footer__by { margin-left: auto; }

/* ============================================================ /companies/ (G1's page, in the new tokens) */
.kj-worknear-companies { padding-block: clamp(30px, 5vw, 56px); }
.kj-worknear-companies-intro { max-width: 680px; margin: 0 auto 26px; padding: 34px 20px 12px; text-align: center; }
.kj-worknear-companies-intro h1 { margin: 0 0 8px; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.045em; }
.kj-worknear-companies-intro p { margin: 0; color: var(--kj-text-soft); }
.kj-worknear-eyebrow { display: block; margin-bottom: 5px; color: var(--kj-brand-ink); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kj-worknear-company-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kj-worknear-company-card { display: grid; justify-items: start; align-content: start; gap: 8px; min-width: 0; padding: 18px; border: 1px solid var(--kj-border); border-radius: var(--wn-radius); background: var(--kj-surface); color: var(--kj-text); box-shadow: var(--kj-shadow); }
.kj-worknear-company-card:hover { border-color: var(--kj-brand); text-decoration: none; transform: translateY(-2px); box-shadow: var(--kj-shadow-lift); }
.kj-worknear-company-card img, .kj-worknear-company-card__mark { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: var(--kj-brand-soft); }
.kj-worknear-company-card__mark { display: grid; place-items: center; color: var(--kj-brand-ink); font-size: 1.35rem; font-weight: 800; }
.kj-worknear-company-card strong { overflow-wrap: anywhere; }
.kj-worknear-company-card > span:last-child { color: var(--kj-text-soft); font-size: .82rem; }
.kj-worknear-company-map .bizmap-map { min-height: 320px; border-radius: var(--wn-radius); overflow: hidden; }

/* dark map tiles, markers keep their colours */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bizmap-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.7); }
}
:root[data-theme="dark"] .bizmap-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.7); }

/* ============================================================ lg (1200) */
@media (max-width: 1200px) {
    .wn-split { grid-template-columns: minmax(340px, 1fr) 1fr; }
    .wn-auth .wn-auth__join { display: none; }
}

/* ============================================================ md (900): one navigation, the bottom bar */
@media (max-width: 900px) {
    :root { --kj-header-h: 0px; }
    .kj-header.wn-head { position: relative; }
    .wn-util { justify-content: flex-end; }
    .wn-util__post, .wn-auth { display: none; }
    .kj-header__inner.wn-bar { flex-wrap: wrap; }
    .wn-search { order: 3; flex: 1 1 100%; flex-wrap: wrap; border-radius: 16px; }
    .wn-search__field { flex: 1 1 100%; padding: 2px 12px; }
    .wn-search__where { border-left: 0; border-top: 1px solid var(--kj-border); }
    .wn-search__go { flex: 1 1 100%; border-radius: 12px; }

    .wn-split, .wn-grid3 { grid-template-columns: 1fr; }
    .wn-grid4, .wn-dir, .kj-worknear-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wn-mapwrap { position: static; }
    .wn-mapwrap .kj-map.wn-map { height: 420px; }
    .wn-list__rows { max-height: 560px; }
    .wn-originbar__gap { display: none; }

    /* the floating bar, the mock's look: Near me is the raised amber centre */
    .kj-tabbar {
        left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: unset; align-items: end;
        padding: 6px 4px; overflow: visible;
        background: var(--wn-tabbar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border: 1px solid var(--kj-border); border-radius: 22px; box-shadow: var(--wn-tabbar-shadow);
    }
    .kj-tabbar__item { min-width: 0; min-height: 0; padding: 6px 2px 4px; color: var(--kj-text-faint); font-size: 11px; }
    .kj-tabbar__item.is-on { color: var(--kj-brand-ink); }
    .kj-tabbar__icon { display: grid; place-items: center; }
    .kj-tabbar__item svg { width: 22px; height: 22px; stroke-width: 1.8; }
    .kj-tabbar__item--near { gap: 3px; }
    .kj-tabbar__item--near .kj-tabbar__icon {
        width: 58px; height: 58px; margin-top: -30px; border-radius: 50%;
        background: var(--kj-accent); color: var(--wn-accent-on);
        border: 4px solid var(--kj-bg); box-shadow: var(--wn-fab-shadow);
    }
    .kj-tabbar__item--near svg { width: 26px; height: 26px; stroke-width: 2; }
    .kj-tabbar__item--near.is-on { color: var(--wn-accent-deep); }
    html body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================ sm (640) */
@media (max-width: 640px) {
    .wn-hero__title { font-size: 26px; }
    .wn-stationpick, .wn-stationpick input { flex: 1 1 100%; min-width: 0; width: 100%; }
    .wn-originbar__or { display: none; }
    .kj-row.wn-job, .kj-row.wn-job:hover, .kj-row.wn-job:focus-within { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
    .wn-logo { width: 40px; height: 40px; font-size: 14px; }
    .wn-grid4, .wn-dir, .kj-worknear-company-grid { grid-template-columns: 1fr 1fr; }
    .wn-callout { flex-direction: column; align-items: flex-start; }
    .wn-foot__legal .kj-footer__by { margin-left: 0; }
}