:root {
    color-scheme: dark;
    --bg: #0c0d11;
    --bg-elevated: #111319;
    --surface: #15171f;
    --surface-hover: #1b1e27;
    --border: #262a35;
    --border-strong: #363c4a;
    --fg: #eceef2;
    --muted: #9096a8;
    --muted-2: #6b7183;
    --accent: #1fe08a;
    --accent-strong: #5cf2ab;
    --accent-ink: #052318;
    --teal: #4fd8b8;
    --danger: #ff6b6b;
    /* Text on the orange (#f97316) warning tints - repost/suspicious-date findings. */
    --warn-fg: #fdba74;
    --warn-fg-strong: #fed7aa;
    --warn-fg-soft: #ffedd5;
    --level-intern: #8b93a7;
    --level-junior: #4ade80;
    --level-mid: #38bdf8;
    --level-senior: #c084fc;
    --level-lead: #fbbf24;
    --source-jji: #2dd4bf;
    --source-nfj: #fbbf24;
    --source-pracuj: #60a5fa;
    --source-direct: #a78bfa;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 24px -12px rgba(0, 0, 0, .55);
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Light theme, opted into with the header / side-menu toggle (theme.js sets data-theme on <html>).
   Only the palette changes - every rule below reads these tokens. Accent, level and source hues
   are darkened so they keep their contrast as text on a white surface. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f5f8;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #eef0f4;
    --border: #e0e3ea;
    --border-strong: #c8cdd8;
    --fg: #14161c;
    --muted: #545a6a;
    --muted-2: #767c8e;
    --accent: #0a8a52;
    --accent-strong: #067044;
    --accent-ink: #ffffff;
    --teal: #0f9f86;
    --danger: #d43d3d;
    --warn-fg: #c2410c;
    --warn-fg-strong: #9a3412;
    --warn-fg-soft: #7c2d12;
    --level-intern: #687085;
    --level-junior: #16a34a;
    --level-mid: #0284c7;
    --level-senior: #9333ea;
    --level-lead: #b45309;
    --source-jji: #0d9488;
    --source-nfj: #b45309;
    --source-pracuj: #2563eb;
    --source-direct: #7c3aed;
    --shadow-card: 0 1px 2px rgba(20, 22, 28, .06), 0 12px 24px -14px rgba(20, 22, 28, .18);
}

/* logo.png has white lettering drawn for the dark header - invert it, and rotate the hue back so
   the purple ghost keeps its color. */
:root[data-theme="light"] .brand-logo {
    filter: invert(1) hue-rotate(180deg);
}

/* Theme toggle: shows the icon of the theme a click switches to. */
.theme-toggle .theme-icon-to-dark,
:root[data-theme="light"] .theme-toggle .theme-icon-to-light {
    display: none;
}

:root[data-theme="light"] .theme-toggle .theme-icon-to-dark {
    display: contents;
}

.theme-toggle .theme-icon-to-light {
    display: contents;
}

* {
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox: no OS scrollbar anywhere - the scroll-progress bar and
                               back-to-top button (below) are the on-page cues that content scrolls. */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
    width: 0;
    height: 0;
}

:root {
    /* The page background, shared by body and .site-header so the sticky header blends into the
       page with no visible seam. Declared on :root, so it picks up the light theme's colours too. */
    --page-bg:
        radial-gradient(1100px 650px at 10% -8%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 60%),
        radial-gradient(950px 650px at 90% 0%, color-mix(in srgb, var(--level-senior) 13%, transparent) 0%, transparent 60%),
        radial-gradient(1000px 800px at 50% 105%, color-mix(in srgb, var(--teal) 11%, transparent) 0%, transparent 65%),
        var(--bg);
}

body {
    font-family: var(--font-sans);
    color: var(--fg);
    /* Soft, fixed aurora glow behind the whole page - same accent/purple/teal palette as the
       header's own radial gradients. A bit more present than a barely-there tint, but still
       faint enough not to fight with card content. */
    background: var(--page-bg);
    background-attachment: fixed;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 720px) {
    /* Fixed backgrounds can jank on scroll on some mobile browsers - fall back to scrolling
       with the page there, the effect still reads fine at that viewport size. */
    body {
        background-attachment: scroll;
    }
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-strong);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.45rem 1.75rem;
    /* Same viewport-fixed background as body: the header is one surface with the page - no
       border, shadow or tint - while still opaque enough to cover content scrolling under it. */
    background: var(--page-bg);
    background-attachment: fixed;
}

/* Replaces the native scrollbar as the "you can scroll" cue: a thin bar that fills left-to-right
   with how far down the page the user has scrolled (progress.js). */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 110;
    background: linear-gradient(90deg, var(--accent), var(--level-senior));
    transition: width 0.12s ease-out;
    pointer-events: none;
}

.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--fg);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, border-color 0.15s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    color: var(--accent-strong);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 480px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 42px;
        height: 42px;
    }
}

/* Brand and .header-actions grow equally from a zero basis, so the search bar between them sits
   in the true centre of the header whatever the logo / button widths are. */
.site-header .brand {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-header .brand-logo {
    height: 38px;
    width: auto;
    display: block;
}

.header-search-group {
    flex: 0 1 48rem;
    max-width: 48rem;
    display: flex;
    align-items: stretch;
}

/* Read-only summary of the applied search (query + location + source) - a button that opens
   #search-modal, where all of them are edited. */
.header-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--fg);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.header-search:hover {
    border-color: var(--border-strong);
}

.header-search:focus-visible,
.header-search:focus-within {
    outline: none;
    border-color: var(--accent);
}

.header-search .search-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--muted-2);
}

.header-search-query {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-query.is-placeholder {
    color: var(--muted-2);
}

.header-search-meta {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.header-search-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    white-space: nowrap;
}

.header-search-meta-item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-search-meta .filter-icon {
    color: var(--muted-2);
    flex: none;
}

@media (max-width: 560px) {
    .header-search-meta {
        display: none;
    }
}

.header-search input {
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 0.95rem;
    width: 100%;
    outline: none;
}

.header-search input::placeholder {
    color: var(--muted-2);
}

/* Shared "×" button that shows up next to a search input once it has text (header search box and
   the search modal's own input both use it) - clears the field without submitting the form. */
.search-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
}

.search-clear-btn[hidden] {
    display: none;
}

.search-clear-btn:hover {
    background: var(--surface-hover);
    color: var(--fg);
}

.search-clear-btn svg {
    width: 14px;
    height: 14px;
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 1rem 1rem;
}

.search-modal[hidden] {
    display: none;
}

.search-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 10, 0.72);
    backdrop-filter: blur(6px);
}

.search-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 42rem;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.search-modal-form {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.search-modal-form .search-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--muted-2);
}

.search-modal-form input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 1rem;
    outline: none;
}

.search-modal-form input::placeholder {
    color: var(--muted-2);
}

.search-modal-submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-modal-submit:hover {
    background: var(--accent-strong);
}

@media (max-width: 480px) {
    .search-modal-form .search-modal-submit {
        display: none;
    }
}

.search-modal-footer {
    flex: none;
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--border);
}

/* With no suggestions shown, the filters/form row above already draws a divider. */
.search-modal-results:empty + .search-modal-footer {
    border-top: 0;
}

.search-modal-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.search-modal-close:hover {
    background: var(--surface-hover);
    color: var(--fg);
}

.search-modal-results {
    overflow-y: auto;
    padding: 0.5rem 0;
}

.search-modal-results:empty {
    display: none;
}

/* Location + source under the job search modal's input: two select-style pills on one line, each
   expanding its own panel of options right below the row (see search-filters.js). */
.search-filters {
    flex: none;
}

/* Divider between the filters and the suggestions only while there are suggestions; with none,
   the footer follows directly and a second line under the input row's divider is just noise. */
.search-filters + .search-modal-results {
    border-top: 1px solid var(--border);
}

.search-filters-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    overflow-x: auto;
}

.search-filter-pill {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg);
    font: inherit;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.search-filter-pill:hover,
.search-filter-pill[aria-expanded="true"] {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.search-filter-pill:focus-visible {
    outline: none;
    border-color: var(--accent);
}

.search-filter-pill .filter-icon {
    flex: none;
    color: var(--muted-2);
}

.search-filter-pill-label {
    color: var(--muted);
    font-weight: 500;
}

.search-filter-pill-value {
    min-width: 0;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.search-filter-pill-chevron {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--muted-2);
    transition: transform 0.15s ease;
}

.search-filter-pill[aria-expanded="true"] .search-filter-pill-chevron {
    transform: rotate(180deg);
}

/* Narrowed from its "Wszystkie" default - the accent outline shows at a glance which filters apply. */
.search-filter-pill.is-set {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
}

.search-filter-pill.is-set .filter-icon,
.search-filter-pill.is-set .search-filter-pill-value {
    color: var(--accent-strong);
}

.search-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0 1.1rem 0.9rem;
}

.search-filter-panel[hidden] {
    display: none;
}

.search-filter-panel-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: border-color 0.15s ease;
}

.search-filter-panel-search:focus-within {
    border-color: var(--accent);
}

.search-filter-panel-search svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--muted-2);
}

.search-filter-panel-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
}

.search-filter-panel-search input::placeholder {
    color: var(--muted-2);
}

.search-filter-options {
    max-height: 11.5rem;
    overflow-y: auto;
}

.search-filter-option[hidden] {
    display: none;
}

.search-filter-option.is-selected {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
}

/* The "Szukaj: „…”" free-text city offered first whenever the typed text isn't a listed city. */
.search-filter-custom {
    border-style: dashed;
    border-color: var(--accent);
    color: var(--accent-strong);
}

.search-modal-radio {
    position: relative;
}

.search-modal-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.search-modal-radio:has(input:focus-visible) {
    border-color: var(--accent);
}

.search-modal-radio:has(input:checked) {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
}

.search-modal-hint {
    margin: 0;
    padding: 1.2rem 1.1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.search-modal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.3rem 1.75rem 2.5rem;
}

.search-modal-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 0.4rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--muted-2);
}

.search-modal-empty-icon svg {
    width: 22px;
    height: 22px;
}

.search-modal-empty-title {
    margin: 0;
    color: var(--fg);
    font-size: 0.95rem;
    font-weight: 700;
}

.search-modal-empty-subtitle {
    margin: 0;
    max-width: 26rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.search-modal-group + .search-modal-group {
    margin-top: 0.4rem;
}

.search-modal-group-label {
    margin: 0;
    padding: 0.5rem 1.1rem 0.3rem;
    color: var(--muted-2);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.search-modal-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 1.1rem;
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

/* Without this, the city picker's and technology picker's own `item.hidden = true` filtering
   (see city-picker.js / jobs.js) silently does nothing: this class's unconditional `display: flex`
   is an author-stylesheet rule, which always wins the cascade over the `[hidden] { display: none }`
   user-agent default regardless of selector specificity. */
.search-modal-item[hidden] {
    display: none;
}

.search-modal-item:hover,
.search-modal-item.is-active {
    background: var(--surface-hover);
}

.search-modal-item-label {
    min-width: 0;
}

.search-modal-item mark {
    background: none;
    color: var(--accent-strong);
    font-weight: 700;
}

.search-modal-examples {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0.9rem 1.1rem 1.2rem;
}

.search-modal-examples-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 700;
}

.search-modal-examples-head .filter-icon {
    color: var(--muted-2);
}

/* "Wyczyść" link-style button at the right end of the recent-searches group header. */
.search-modal-examples-clear {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}

.search-modal-examples-clear:hover,
.search-modal-examples-clear:focus-visible {
    color: var(--accent-strong);
}

.search-modal-examples-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem 1.5rem;
}

.search-modal-example-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.search-modal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.search-modal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.search-modal-chip svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--muted-2);
    transition: color 0.15s ease;
}

.search-modal-chip:hover,
.search-modal-chip.is-active {
    border-color: var(--accent);
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
}

.search-modal-chip:hover svg,
.search-modal-chip.is-active svg {
    color: var(--accent-strong);
}

.site-header .admin-nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.88rem;
    flex: none;
}

/* Logged out, every link in it is sec:authorize-d away - don't leave an empty flex item + gap. */
.site-header .admin-nav:not(:has(*)) {
    display: none;
}

.site-header .admin-nav a,
.site-header .admin-nav .logout-form button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-weight: 700;
}

.site-header .admin-nav a:hover,
.site-header .admin-nav .logout-form button:hover {
    color: var(--fg);
}

.site-header .admin-nav .filter-icon {
    color: inherit;
}

.site-header .admin-nav .filter-icon svg {
    width: 14px;
    height: 14px;
}

/* Main links centred in the header on pages without the search bar (.has-nav). Takes the search
   bar's slot between the equally growing brand and .header-actions. Plain text links, no box. */
.header-nav {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-nav a {
    padding: 0.4rem 0;
    border-radius: 4px;
    color: var(--muted);
    font-size: 0.87rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.header-nav a:hover,
.header-nav a.is-active {
    color: var(--fg);
}

.header-nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* With the links inline the hamburger is redundant - it only returns on narrow screens below. */
.site-header.has-nav #menu-trigger {
    display: none;
}

/* Sliders button sitting inside the right edge of the header search bar - opens the /jobs filters
   sheet. Only shown below the sidebar breakpoint and only on pages that have the filters panel. */
.mobile-filters-trigger {
    display: none;
}

@media (max-width: 920px) {
    .header-search-group:has(.mobile-filters-trigger) {
        position: relative;
    }

    body:has(#filters-panel) .mobile-filters-trigger {
        position: absolute;
        top: 50%;
        right: 0.4rem;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transition: color 0.15s ease, background 0.15s ease;
    }

    /* Thin divider between the search summary and the button, same as .header-search-meta's. */
    body:has(#filters-panel) .mobile-filters-trigger::before {
        content: "";
        position: absolute;
        left: -0.3rem;
        top: 0.55rem;
        bottom: 0.55rem;
        border-left: 1px solid var(--border);
    }

    body:has(#filters-panel) .mobile-filters-trigger:hover,
    body:has(#filters-panel) .mobile-filters-trigger[aria-expanded="true"] {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    body:has(#filters-panel) .mobile-filters-trigger:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    .mobile-filters-trigger svg {
        width: 17px;
        height: 17px;
    }

    /* Keep the query text clear of the absolutely positioned button. */
    body:has(#filters-panel) .header-search {
        padding-right: 2.9rem;
    }
}

@media (max-width: 720px) {
    .site-header {
        flex-wrap: wrap;
    }

    .header-search-group {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }
}

/* Saved offers + hamburger, side by side at the header's right edge. margin-left:auto keeps them
   there on mobile too, where the search bar wraps to its own row and leaves brand + this on the first. */
.header-actions {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

/* Hamburger at the header's right edge - opens .side-menu (side-menu.js). The three lines fold
   into an X while the menu is open. */
.menu-trigger {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--fg);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}

.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.menu-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.menu-trigger-lines {
    position: relative;
    width: 15px;
    height: 10px;
}

.menu-trigger-lines span {
    position: absolute;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease, top 0.25s ease;
}

.menu-trigger-lines span:nth-child(1) { top: 0; width: 100%; }
.menu-trigger-lines span:nth-child(2) { top: 4px; width: 70%; }
.menu-trigger-lines span:nth-child(3) { top: 8px; width: 45%; }

.menu-trigger:hover .menu-trigger-lines span {
    width: 100%;
    background: var(--accent-strong);
}

.menu-trigger[aria-expanded="true"] .menu-trigger-lines span:nth-child(1) { top: 4px; width: 100%; transform: rotate(45deg); }
.menu-trigger[aria-expanded="true"] .menu-trigger-lines span:nth-child(2) { opacity: 0; }
.menu-trigger[aria-expanded="true"] .menu-trigger-lines span:nth-child(3) { top: 4px; width: 100%; transform: rotate(-45deg); }

html.side-menu-open,
html.side-menu-open body {
    overflow: hidden;
}

.side-menu {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.side-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 9, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.side-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 50% at 100% 0%, color-mix(in srgb, var(--level-senior) 14%, transparent) 0%, transparent 70%),
        radial-gradient(120% 50% at 0% 100%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%),
        var(--bg-elevated);
    border-left: 1px solid var(--border-strong);
    box-shadow: -24px 0 48px -12px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
}

.side-menu.is-open .side-menu-backdrop { opacity: 1; }
.side-menu.is-open .side-menu-panel { transform: translateX(0); }

.side-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
}

.side-menu-head .brand-logo {
    height: 36px;
    width: auto;
    display: block;
}

.side-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
}

.side-menu-close:hover {
    color: var(--fg);
    border-color: var(--border-strong);
    transform: rotate(90deg);
}

.side-menu-close svg {
    width: 18px;
    height: 18px;
}

.side-menu-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 0.75rem;
}

.side-menu-body form {
    margin: 0;
}

/* Plain rows: icon + label, a soft highlight on hover and an accent bar on the current page. */
.side-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.side-menu-link:hover {
    color: var(--fg);
    background: color-mix(in srgb, var(--surface-hover) 80%, transparent);
}

.side-menu-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.side-menu-link.is-active {
    color: var(--fg);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.side-menu-link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    bottom: 0.7rem;
    width: 3px;
    border-radius: 3px;
    background: var(--accent);
}

.side-menu-link .filter-icon {
    flex: none;
    display: inline-flex;
    color: var(--muted-2);
    transition: color 0.15s ease;
}

.side-menu-link .filter-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.side-menu-link:hover .filter-icon,
.side-menu-link.is-active .filter-icon {
    color: var(--accent);
}

.side-menu-link .saved-offers-count {
    margin-left: auto;
}

/* The theme switch sits apart from the page links, at the very bottom of the menu list. */
.side-menu-theme {
    margin-top: auto;
}

.side-menu-foot {
    margin: 0;
    padding: 1rem 1.25rem 1.4rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--muted-2);
}

@media (max-width: 720px) {
    /* The header row is tight here; the hamburger menu carries these links instead. */
    .site-header .admin-nav,
    .header-nav {
        display: none;
    }

    .site-header.has-nav #menu-trigger {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .side-menu-panel,
    .side-menu-backdrop,
    .menu-trigger-lines span {
        transition: none;
    }
}

/* Saved offers (saved-offers.js) - header button + slide-in panel reusing the .side-menu shell. */
.saved-offers-trigger {
    position: relative;
}

.saved-offers-trigger .filter-icon svg,
.theme-toggle.menu-trigger .filter-icon svg {
    width: 17px;
    height: 17px;
    display: block;
}

.saved-offers-trigger:hover {
    color: var(--accent-strong);
}

.saved-offers-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.saved-offers-count[hidden] {
    display: none;
}

.saved-offers-trigger .saved-offers-count {
    position: absolute;
    top: -6px;
    right: -6px;
    box-shadow: 0 0 0 2px var(--bg);
}

.saved-offers-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.saved-offers-title .filter-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--accent);
}

.saved-offers-empty {
    margin: 0;
    padding: 0 0.6rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.saved-offers-empty[hidden],
.saved-offers-foot[hidden] {
    display: none;
}

.saved-offers-clear {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.saved-offers-clear:hover {
    background: var(--surface-hover);
}

.saved-offers-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.saved-offer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.saved-offer:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.saved-offer-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    color: var(--fg);
}

.saved-offer-link:hover {
    color: var(--fg);
}

.saved-offer-link:hover strong {
    color: var(--accent-strong);
}

.saved-offer-link .company-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
}

.saved-offer-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.saved-offer-text strong,
.saved-offer-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-offer-text strong {
    font-size: 0.9rem;
    font-weight: 700;
}

.saved-offer-text small {
    font-size: 0.78rem;
    color: var(--muted);
}

.saved-offer-remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-2);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.saved-offer-remove:hover,
.saved-offer-remove:focus-visible {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.saved-offer-remove svg {
    width: 16px;
    height: 16px;
}

/* Saved while already archived (saved-offers.js): muted entry plus an "Archiwalna" badge. */
.saved-offer--archived {
    border-style: dashed;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.saved-offer--archived .saved-offer-link .company-avatar {
    filter: grayscale(1);
    opacity: 0.7;
}

.saved-offer--archived .saved-offer-text strong {
    color: var(--muted);
}

.saved-offer-badge {
    align-self: flex-start;
    margin: 0.1rem 0;
    padding: 0.05rem 0.45rem;
    border: 1px solid color-mix(in srgb, #f97316 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, #f97316 14%, transparent);
    color: var(--warn-fg);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Confirmation dialog (#save-archived-confirm) - centred box over a blurred backdrop, above the
   side menus (z-index 120). */
.confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirm-dialog[hidden] {
    display: none;
}

.confirm-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 9, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.confirm-dialog-box {
    position: relative;
    width: min(400px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1.4rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), 0 24px 48px -24px rgba(0, 0, 0, .7);
    text-align: center;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.confirm-dialog.is-open .confirm-dialog-backdrop,
.confirm-dialog.is-open .confirm-dialog-box {
    opacity: 1;
}

.confirm-dialog.is-open .confirm-dialog-box {
    transform: none;
}

.confirm-dialog-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: color-mix(in srgb, #f97316 16%, transparent);
    color: var(--warn-fg);
}

.confirm-dialog-icon svg {
    width: 22px;
    height: 22px;
}

.confirm-dialog-title {
    margin: 0.2rem 0 0;
    color: var(--fg);
    font-size: 1.05rem;
    font-weight: 800;
}

.confirm-dialog-offer {
    max-width: 100%;
    margin: 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.confirm-dialog-offer:empty {
    display: none;
}

.confirm-dialog-text {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.6rem;
}

.confirm-dialog-btn {
    flex: 1;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.confirm-dialog-btn:hover {
    background: var(--surface-hover);
}

.confirm-dialog-btn--primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
}

.confirm-dialog-btn--primary:hover {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
}

/* Bookmark toggle on an offer (jobs/list cards, job details header). Raised above
   .job-card-cover-link so a click saves instead of opening the offer. */
.save-offer-btn {
    position: relative;
    z-index: 2;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.save-offer-btn svg {
    width: 18px;
    height: 18px;
}

.save-offer-btn:hover {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.save-offer-btn:active {
    transform: scale(0.92);
}

.save-offer-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.save-offer-btn[aria-pressed="true"] {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.save-offer-btn[aria-pressed="true"] svg path {
    fill: currentColor;
}

/* Left of the report flag (.job-card .report-offer-btn), which takes the corner itself. */
.job-card .save-offer-btn {
    position: absolute;
    top: 0.6rem;
    right: calc(0.6rem + 34px + 0.2rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

/* Only on hover (or keyboard focus inside the card); touch screens have no hover, so it stays visible. */
.job-card:hover .save-offer-btn,
.job-card:focus-within .save-offer-btn {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .job-card .save-offer-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

.job-details-header-top .save-offer-btn {
    margin-left: auto;
}

.job-details-header-top .save-offer-btn + .source-id {
    margin-left: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
}

.empty-state {
    color: var(--muted);
    padding: 2rem 0;
}

.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.job-details-page {
    max-width: min(1600px, 96vw);
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

/* ---------- Offer hero (jobs/details.html): the offer on the left and its location map bleeding
   to the card's right edge, in one box. ---------- */
.job-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(700px 360px at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--fg)) 0%, var(--surface) 38%);
    box-shadow: var(--shadow-card), 0 24px 60px -30px color-mix(in srgb, var(--accent) 22%, transparent);
}

.job-hero--no-map {
    grid-template-columns: minmax(0, 1fr);
}

.job-hero-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 2.25rem;
}

.job-hero-map {
    position: relative;
    min-height: 360px;
    /* 1px inset so the map's rounded corners sit inside the hero's border instead of over it. */
    margin: 1px 1px 1px 0;
    border-radius: 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0;
    overflow: hidden;
    border-left: 1px solid var(--border);
}

/* Soft fade from the offer panel into the map, so the two halves read as one surface. */
.job-hero-map::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 56px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 85%, transparent), transparent);
}

/* Offer (hero + history) on the left, the similar-offers sidebar on the right. */
.job-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: 1.5rem;
    align-items: start;
}

.job-details-layout--full {
    grid-template-columns: minmax(0, 1fr);
}

.job-details-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* The details page leans on the green accent: green-tinted card borders, a green top edge on
   the header card, and green section headings. */
.job-details-card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.75rem 2.25rem;
}

.job-details-card h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    color: var(--accent-strong);
    font-size: 1.05rem;
}

.job-details-card h2::before {
    content: "";
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: var(--accent);
}

.job-details-header-top {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.job-details-header-top .company-avatar--lg {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7);
}

.job-details-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.job-details-heading h1 {
    margin: 0;
    font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.job-details-company {
    align-self: flex-start;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 700;
}

a.job-details-company:hover {
    color: var(--accent-strong);
}

.job-details-company-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

/* "Strona kariery" button (fragments/layout :: careerLink) next to the company name on the company
   page and on an offer's details page: a pill like .apply-preview-open with a round icon chip that
   fills with the accent on hover, like .back-link. aria-expanded="true" while it has the careers
   page open in the split view (career-split.js). */
.career-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.85rem 0.28rem 0.28rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    color: var(--fg);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.career-link-icon {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-strong);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.career-link-icon svg {
    width: 15px;
    height: 15px;
}

.career-link-arrow {
    width: 14px;
    height: 14px;
    color: var(--muted);
    transition: transform 0.15s ease, color 0.15s ease;
}

.career-link:hover,
.career-link:focus-visible {
    color: var(--fg);
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}

.career-link:hover .career-link-icon,
.career-link:focus-visible .career-link-icon,
.career-link[aria-expanded="true"] .career-link-icon {
    background: var(--accent);
    color: var(--accent-ink);
}

.career-link:hover .career-link-arrow {
    color: var(--fg);
    transform: translateX(3px);
}

.career-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

.career-link[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.job-details-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.job-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.6rem;
}

.job-fact {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    border: 1px solid var(--border);
}

.job-fact > .filter-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.job-fact > .filter-icon svg {
    width: 17px;
    height: 17px;
}

.job-fact-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.job-fact-label,
.job-details-section-label {
    margin: 0;
    color: var(--muted-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.job-fact-value {
    color: var(--fg);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Location tile on the offer details page: extra cities sit behind a native <details> toggle.
   Opening it widens the tile to the whole .job-facts row, so every location gets room instead of
   being cut off with an ellipsis. */
.job-fact--locations:has(.job-fact-locations[open]) {
    grid-column: 1 / -1;
    align-items: flex-start;
}

.job-fact-locations-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    margin-top: 0.2rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
}

.job-fact-locations-toggle::-webkit-details-marker {
    display: none;
}

.job-fact-locations-toggle::after {
    content: "▾";
    transition: transform 0.15s ease;
}

.job-fact-locations[open] .job-fact-locations-toggle::after {
    transform: rotate(180deg);
}

.job-fact-locations-toggle:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.job-fact-locations-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.job-fact-locations-hide,
.job-fact-locations[open] .job-fact-locations-show {
    display: none;
}

.job-fact-locations[open] .job-fact-locations-hide {
    display: inline;
}

.job-fact-location-list {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.job-fact-location {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg);
    font-size: 0.82rem;
}

.job-fact-location .filter-icon svg {
    width: 13px;
    height: 13px;
    color: var(--muted);
}

.job-fact-location--main {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    font-weight: 700;
}

.job-fact-location--main .filter-icon svg {
    color: var(--accent);
}

.job-details-tech {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.job-details-tech .tech-chip {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

.tag[data-status="ACTIVE"] {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.tag[data-status="EXPIRED"] {
    color: var(--muted);
    background: var(--bg-elevated);
    border-color: var(--border);
}

.tag[data-status="DEACTIVATED"] {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

/* Pinned to the bottom of the hero body, so when the map makes the box taller the salary + CTA
   still close it off instead of floating mid-card. */
.job-details-footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.job-details-salary {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.job-details-salary-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.job-details-salary .salary {
    font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.job-details-salary-period {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.job-details-salary--undisclosed .job-details-salary-value {
    align-items: center;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 700;
}

/* Source job id (jobs/details.html): a small "# ID" pill in the header's top-right corner that
   opens a popover with the id and a copy button, in the page's green accent. */
.source-id {
    --sid: var(--accent);
    position: relative;
    margin-left: auto;
    flex: none;
}

.source-id summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem 0.28rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--sid) 35%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--sid) 10%, transparent);
    color: color-mix(in srgb, var(--sid) 75%, var(--muted));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    user-select: none;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}

.source-id-icon {
    width: 0.85rem;
    height: 0.85rem;
}

.source-id summary::-webkit-details-marker {
    display: none;
}

.source-id summary:hover,
.source-id[open] summary {
    color: var(--sid);
    background: color-mix(in srgb, var(--sid) 18%, transparent);
    border-color: color-mix(in srgb, var(--sid) 60%, var(--border));
}

.source-id[open] summary {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sid) 18%, transparent);
}

.source-id-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(22rem, 80vw);
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--sid) 40%, var(--border-strong));
    border-left: 3px solid var(--sid);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-card);
    animation: source-id-in .12s ease-out;
}

@keyframes source-id-in {
    from { opacity: 0; transform: translateY(-4px); }
}

.source-id-value {
    min-width: 0;
    color: var(--fg);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: all;
}

.source-id-copy {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.source-id-copy:hover {
    background: color-mix(in srgb, var(--sid) 16%, transparent);
    color: var(--sid);
}

.source-id-copy svg {
    grid-area: 1 / 1;
    width: 1rem;
    height: 1rem;
}

.source-id-copy .icon-check,
.source-id-copy.is-copied .icon-copy {
    display: none;
}

.source-id-copy.is-copied .icon-check {
    display: block;
}

.source-id-copy.is-copied {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---------- "Historia oferty" timeline (jobs/details.html): one entry per content-changing
   job_observation row, bookended with publish/detection and expiry - see JobsController#timelineFor. Each entry draws
   its own line segment down to the next one, so removing/adding entries never needs a separate
   absolutely-positioned rail kept in sync with the list. ---------- */
.offer-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.offer-timeline-item {
    position: relative;
    display: flex;
    gap: 0.9rem;
    padding-bottom: 1.15rem;
}

.offer-timeline-item:last-child {
    padding-bottom: 0;
}

.offer-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1rem;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.offer-timeline-marker {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 0.25rem;
    border-radius: 50%;
    background: var(--muted-2);
    box-shadow: 0 0 0 3px var(--surface);
    z-index: 1;
}

.offer-timeline-item[data-kind="published"] .offer-timeline-marker,
.offer-timeline-item[data-kind="seen"] .offer-timeline-marker {
    background: var(--teal);
}

.offer-timeline-item[data-kind="changed"] .offer-timeline-marker {
    background: var(--accent);
}

.offer-timeline-item[data-kind="expired"] .offer-timeline-marker {
    background: var(--danger);
}

.offer-timeline-item[data-kind="expiring"] .offer-timeline-marker {
    background: var(--level-lead);
}

.offer-timeline-content {
    min-width: 0;
}

.offer-timeline-label {
    margin: 0 0 0.15rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--fg);
}

.offer-timeline-time {
    font-size: 0.82rem;
    color: var(--muted);
}

/* Not history yet - an ACTIVE offer's own known (future) expiry - so its label is muted like the
   timestamp instead of standing out the way a thing that actually happened does. */
.offer-timeline-item[data-kind="expiring"] .offer-timeline-label {
    color: var(--muted);
}

.tech-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Right column of jobs/details.html: the similar-offers panels as tabs in one card. Sticky and
   viewport-high (same below-header offset as the /jobs sticky sidebars) - only the list of the
   selected tab scrolls, so the offers are readable without scrolling the page. The sidebar is the
   card here, so the panels inside drop their own box. */
.job-details-sidebar {
    position: sticky;
    top: 3.75rem;
    min-width: 0;
    max-height: calc(100vh - 5.5rem);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.similar-tabs {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.similar-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.similar-tab:hover {
    color: var(--fg);
    background: var(--surface-hover);
}

.similar-tab.is-active {
    color: var(--fg);
    background: var(--bg-elevated);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.similar-tab-count:empty {
    display: none;
}

.similar-tab-count {
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
    color: var(--accent-strong);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

/* Archived tab when some of its offers fall inside the repost window - same orange as the
   flagged cards inside it, so the finding is visible before the tab is even opened. */
.similar-tab--repost .similar-tab-count {
    background: color-mix(in srgb, #f97316 22%, var(--bg-elevated));
    color: var(--warn-fg);
    outline: 1px solid #f97316;
}

.similar-tabpanel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.similar-tabpanel[hidden] {
    display: none;
}

.job-details-sidebar .similar-jobs-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 1rem;
}

/* The tab already names the panel and carries its count. */
.job-details-sidebar .similar-jobs-title {
    display: none;
}

.job-details-sidebar .similar-jobs-sub {
    padding-left: 0;
}

@media (max-width: 1100px) {
    .job-details-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked below the offer on narrow screens - a sticky viewport-high column makes no sense there. */
    .job-details-sidebar {
        position: static;
        max-height: none;
    }
}

/* ---------- "Podobne aktywne/archiwalne oferty" panels (jobs/similar.html :: panel) ---------- */
.similar-jobs-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
}

.similar-jobs-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.similar-jobs-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--fg);
    font-size: 0.95rem;
    font-weight: 700;
}

.similar-jobs-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: var(--accent);
}

.similar-jobs-panel[data-kind="archived"] .similar-jobs-title::before {
    background: var(--muted-2);
}

.similar-jobs-count {
    margin-left: auto;
    min-width: 1.6rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.similar-jobs-panel[data-kind="archived"] .similar-jobs-count {
    background: var(--bg-elevated);
    color: var(--muted);
}

.similar-jobs-sub {
    margin: 0;
    padding-left: calc(4px + 0.55rem);
    color: var(--muted-2);
    font-size: 0.78rem;
}

.similar-jobs-empty {
    margin: 0;
    padding: 0.9rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

.similar-jobs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.similar-job {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 0.9rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.similar-job:hover,
.similar-job:focus-visible {
    border-color: var(--border-strong);
    border-left-color: var(--accent);
    background: var(--surface-hover);
    transform: translateX(2px);
}

.similar-jobs-panel[data-kind="archived"] .similar-job,
.similar-jobs-panel[data-kind="archived"] .similar-job:hover {
    border-left-color: var(--muted-2);
}

.similar-job-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.similar-job-title {
    margin: 0;
    color: var(--fg);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.similar-jobs-panel[data-kind="archived"] .similar-job-title {
    color: var(--muted);
}

.similar-job .similar-job-level {
    flex: none;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
}

.similar-job-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.similar-job-salary {
    color: var(--accent-strong);
    font-weight: 700;
}

.similar-job-salary--undisclosed {
    color: var(--muted-2);
    font-weight: 400;
}

.similar-job-dot {
    color: var(--muted-2);
}

/* A technology shared with the offer being viewed - the reason the card counts as "similar".
   Accent-tinted rather than the highlighter-yellow .tech-chip--shared used by the company page's
   hover panel: here every card has several matches, and that much yellow in one column shouts. */
.similar-job .tech-chip--match {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    font-weight: 700;
}

.similar-job-date {
    color: var(--muted-2);
    font-size: 0.76rem;
}

.similar-jobs-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent-strong);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.similar-jobs-more:hover {
    text-decoration: underline;
}

/* Author display rules (flex on the list, inline-block on the count) beat the UA [hidden] default,
   so jobs.js' error state needs this to actually hide them. */
.similar-jobs-list[hidden],
.similar-jobs-count[hidden] {
    display: none;
}

/* ---------- Skeleton loading for the similar panels (jobs/similar.html :: skeleton) - grey
   blocks shaped like the real card, with a light sweep across them while the panel's AJAX
   request is in flight. ---------- */
.skeleton-block {
    display: block;
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--muted-2) 18%, var(--bg-elevated));
    border-radius: var(--radius-sm);
}

.skeleton-block::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--fg) 8%, transparent),
        transparent);
    animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
    to { transform: translateX(100%); }
}

.skeleton-line {
    height: 0.85rem;
}

.skeleton-line--sm {
    height: 0.65rem;
}

.skeleton-line--title { width: 70%; }
.skeleton-line--meta { width: 55%; }
.skeleton-line--date { width: 40%; }

.skeleton-pill {
    flex: none;
    width: 3.2rem;
    height: 1.1rem;
    border-radius: 999px;
}

.skeleton-chip {
    display: inline-block;
    width: 3.4rem;
    height: 1.35rem;
    border-radius: 999px;
}

.similar-jobs-count.skeleton-block {
    display: inline-block;
    width: 1.6rem;
    height: 1.2rem;
    padding: 0;
    background: color-mix(in srgb, var(--muted-2) 18%, var(--bg-elevated));
}

/* The skeleton card reuses .similar-job for its exact box, minus the interactive affordances. */
.similar-job--skeleton,
.similar-job--skeleton:hover {
    border-left-color: var(--border);
    background: var(--bg-elevated);
    transform: none;
    cursor: default;
}

.similar-jobs-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.similar-jobs-error p {
    margin: 0;
}

.similar-jobs-retry {
    padding: 0.35rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 999px;
    background: transparent;
    color: var(--accent-strong);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.similar-jobs-retry:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

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

/* Skeleton job/company cards (fragments/skeleton.html): the real card's box, without hover
   affordances. Line widths vary per card so the list doesn't look stamped out. Doubled classes
   because .job-card / .company-card (and their :hover) are declared further down. */
.job-card.job-card--skeleton,
.job-card.job-card--skeleton:hover,
.company-card.company-card--skeleton,
.company-card.company-card--skeleton:hover {
    transform: none;
    border-color: var(--border);
    background: var(--surface);
    cursor: default;
}

.job-card.job-card--skeleton,
.job-card.job-card--skeleton:hover {
    border-left-color: transparent;
}

.company-avatar.skeleton-block {
    border-color: transparent;
    background: color-mix(in srgb, var(--muted-2) 18%, var(--bg-elevated));
}

.skeleton-line--heading { width: 55%; height: 1.05rem; }
.skeleton-line--company { width: 30%; }
.skeleton-line--meta-item { width: 5.5rem; }
.skeleton-line--salary { width: 7.5rem; height: 0.95rem; }
.skeleton-line--side-date { width: 5rem; margin-top: auto; }
.skeleton-line--results-count { width: 8rem; }
.skeleton-line--company-name { width: 75%; height: 1rem; }
.skeleton-line--company-count { width: 50%; }

.job-card--skeleton:nth-child(3n + 2) .skeleton-line--heading { width: 68%; }
.job-card--skeleton:nth-child(3n) .skeleton-line--heading { width: 42%; }
.job-card--skeleton:nth-child(2n) .skeleton-line--company { width: 22%; }
.job-card--skeleton:nth-child(3n + 2) .skeleton-chip:nth-child(4) { display: none; }
.company-card--skeleton:nth-child(3n + 2) .skeleton-line--company-name { width: 55%; }
.company-card--skeleton:nth-child(3n) .skeleton-line--company-name { width: 88%; }

@media (prefers-reduced-motion: reduce) {
    .skeleton-block::after {
        animation: none;
    }
}

/* Fills .job-hero-map absolutely, so it always matches the hero's height (set by the offer text)
   without depending on percentage heights. isolation keeps Leaflet's pane z-indexes (400+) inside
   the map, so the caption pill and edge fade above it aren't buried. */
.job-map {
    position: absolute;
    inset: 0;
    isolation: isolate;
    background: var(--bg-elevated);
}

.job-map-caption {
    position: absolute;
    left: 1.25rem;
    top: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 700;
}

.job-map-caption .filter-icon {
    color: var(--accent);
}

/* Multi-location offers: a frosted box (same chrome as the caption pill) listing every city,
   one of which is centered on the map - see job-map.js. Scrolls on its own when an offer lists
   more cities than fit the map's height. */
.job-map-switcher {
    position: absolute;
    left: 1.25rem;
    top: 1rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    width: min(220px, calc(100% - 5rem));
    max-height: calc(100% - 3rem);
    padding: 0.55rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}

.job-map-switcher-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0 0 0.4rem;
    padding: 0.25rem 0.35rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.job-map-switcher-title:hover {
    background: var(--surface-hover);
}

.job-map-switcher-title:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.job-map-switcher-title .filter-icon {
    color: var(--accent);
}

.job-map-switcher-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--muted);
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

/* Collapsed: only the active city stays listed, the rest of the map is left uncovered. */
.job-map-switcher.is-collapsed .job-map-switcher-chevron {
    transform: none;
}

.job-map-switcher.is-collapsed .job-map-switcher-list > li:not(:has(.is-active)) {
    display: none;
}

.job-map-switcher-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.job-map-switcher-option {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-map-switcher-option:hover {
    background: var(--surface-hover);
    color: var(--fg);
}

.job-map-switcher-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.job-map-switcher-option.is-active {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--fg);
    font-weight: 700;
}

/* Leaflet ships its own light-mode chrome; retint it to sit naturally on the dark theme and keep
   only the two controls that matter for a single fixed pin - the required attribution and zoom. */
.leaflet-container {
    background: var(--bg-elevated) !important;
    font-family: var(--font-sans) !important;
}

/* Esri's dark canvas tiles run a bit lighter than this theme's near-black surfaces - nudge them
   down to match without touching the marker pane (siblings, unaffected by this selector). */
:where(:root:not([data-theme="light"])) .leaflet-tile-pane {
    filter: brightness(0.8) saturate(1.1);
}

/* The /jobs listing map wants a livelier, brighter read (it's the main view, not a small aside
   pin) - a lighter touch than the single-offer map's retint above. */
:where(:root:not([data-theme="light"])) #jobs-map .leaflet-tile-pane {
    filter: brightness(1.05) saturate(1.35) contrast(1.05);
}

.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--shadow-card) !important;
}

.leaflet-control-zoom a {
    background: var(--surface) !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
}

.leaflet-control-zoom a:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.leaflet-control-zoom a:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
}

.leaflet-control-zoom a:hover {
    background: var(--surface-hover) !important;
}

.leaflet-control-attribution {
    background: color-mix(in srgb, var(--bg) 70%, transparent) !important;
    color: var(--muted-2) !important;
    font-size: 0.65rem !important;
    padding: 0.1rem 0.4rem !important;
}

.leaflet-control-attribution a {
    color: var(--muted) !important;
}

.job-map-pin {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--accent-ink);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent), 0 2px 6px rgba(0, 0, 0, .45);
}

/* ---------- /jobs listing map: sticky sidebar, many pins, speech-bubble tech markers ---------- */

.jobs-map-panel {
    grid-area: map;
    position: sticky;
    top: 3.75rem;
    /* Same formula as .filters-panel's max-height, so the two sticky sidebars read as one height. */
    height: calc(100vh - 5.5rem);
}

/* Loading state while the feed's filter request is in flight (jobs-list-map.js): old pins fade,
   tiles go a little flat and a thin bar runs along the top edge. */
.jobs-map-panel::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    z-index: 1000;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
    background-size: 40% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.jobs-map-panel--loading::before {
    opacity: 1;
    animation: jobs-map-progress 1.1s ease-in-out infinite;
}

@keyframes jobs-map-progress {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

.jobs-map .leaflet-marker-pane {
    transition: opacity 0.25s ease;
}

.jobs-map-panel--loading .leaflet-marker-pane {
    opacity: 0.3;
}

#jobs-map .leaflet-tile-pane {
    transition: filter 0.25s ease;
}

.jobs-map-panel--loading #jobs-map .leaflet-tile-pane {
    filter: brightness(0.85) saturate(0.6);
}

.jobs-map-panel--updated .leaflet-marker-pane {
    animation: jobs-map-markers-in 0.45s ease-out;
}

@keyframes jobs-map-markers-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Same frosted pill as .job-map-caption, centered at the top of the map. */
.jobs-map-status {
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    animation: jobs-map-status-in 0.2s ease-out;
}

.jobs-map-status[hidden] {
    display: none;
}

@keyframes jobs-map-status-in {
    from { opacity: 0; transform: translate(-50%, -0.4rem); }
}

.jobs-map-status-spinner {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-top-color: var(--accent);
    border-radius: 999px;
    animation: jobs-map-spin 0.7s linear infinite;
}

@keyframes jobs-map-spin {
    to { transform: rotate(360deg); }
}

.jobs-map-status-check {
    display: none;
    width: 1rem;
    height: 1rem;
    color: var(--teal);
}

.jobs-map-status--done .jobs-map-status-spinner {
    display: none;
}

.jobs-map-status--done .jobs-map-status-check {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .jobs-map-panel--loading::before,
    .jobs-map-panel--updated .leaflet-marker-pane,
    .jobs-map-status {
        animation: none;
    }

    .jobs-map-status-spinner {
        animation-duration: 2s;
    }
}

.jobs-map {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-elevated);
}

/* Leaflet's default .leaflet-div-icon chrome (white box, gray border) would otherwise show
   through behind the bubble below. */
.job-pin {
    background: transparent !important;
    border: none !important;
}

/* A rounded callout bubble with a pointer tail, holding a technology icon - built from a square
   div (border-radius all corners but one) rotated 45deg, with the icon counter-rotated upright. */
.job-pin-bubble {
    width: 32px;
    height: 32px;
    border-radius: 999px 999px 999px 4px;
    background: var(--surface);
    border: 2px solid var(--accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-pin-bubble-icon {
    transform: rotate(45deg);
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: contain;
}

.job-pin-bubble-fallback {
    transform: rotate(45deg);
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.job-pin-bubble:hover {
    border-color: var(--accent-strong);
    transform: rotate(-45deg) scale(1.12);
    z-index: 1000 !important;
}

/* Set from jobs-list-map.js after the matching job card has been hovered for a beat - lifts the
   pin and gives it a little shake so it's easy to spot among the others on the map. */
.job-pin--active {
    z-index: 1000 !important;
}

.job-pin--active .job-pin-bubble {
    border-color: var(--accent-strong);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .65);
    animation: job-pin-lift-wobble 0.45s ease-out forwards;
}

@keyframes job-pin-lift-wobble {
    0% {
        transform: translateY(0) rotate(-45deg) scale(1);
    }
    35% {
        transform: translateY(-8px) rotate(-33deg) scale(1.18);
    }
    50% {
        transform: translateY(-7px) rotate(-55deg) scale(1.15);
    }
    65% {
        transform: translateY(-7px) rotate(-40deg) scale(1.16);
    }
    80% {
        transform: translateY(-7px) rotate(-48deg) scale(1.15);
    }
    100% {
        transform: translateY(-7px) rotate(-45deg) scale(1.15);
    }
}

@media (max-width: 860px) {
    .job-details-page {
        padding: 1.25rem 1rem;
    }

    /* Hero stacks: offer first, then the map as a wide strip across the bottom of the box. */
    .job-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .job-hero-body {
        padding: 1.4rem 1.25rem;
    }

    .job-hero-map {
        min-height: 240px;
        margin: 0 1px 1px;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: 0 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px);
    }

    .job-hero-map::after {
        display: none;
    }

    .job-details-card {
        padding: 1.25rem;
    }
}

.apply-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-strong), var(--accent));
    color: var(--accent-ink);
    font-weight: 800;
    font-size: 0.92rem;
    white-space: nowrap;
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.apply-link svg {
    width: 17px;
    height: 17px;
    transition: transform 0.15s ease;
}

.apply-link:hover {
    color: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--accent) 85%, transparent);
}

.apply-link:hover svg {
    transform: translate(2px, -2px);
}

@media (max-width: 560px) {
    .job-details-header-top {
        flex-wrap: wrap;
    }

    .job-details-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .apply-link {
        width: 100%;
        justify-content: center;
    }
}

/* Split view on the company page (#career-split, career-split.js): the company's careers page in
   a panel docked to the right edge over the full viewport height (above the site header, like the
   similar-offers panel), while .company-details shifts left to keep the offer list fully visible - the same idea as the similar-offers panel's reserved room. Reuses
   the offer preview's bar/stage/footer pieces (.apply-preview-*). A full-screen sheet on narrow
   screens, where there's no room for two columns. */
html {
    --career-split-width: clamp(420px, 52vw, 1100px);
}

.career-split {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    width: var(--career-split-width);
    background: var(--bg-elevated);
    border-left: 1px solid var(--border-strong);
    box-shadow: -24px 0 48px -24px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(32px);
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
}

.career-split.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.apply-preview-icon-btn[data-career-split-reload]:hover svg {
    transform: rotate(-60deg);
}

/* The careers site forbids being framed (career-split.js sets .is-blocked from
   /companies/{slug}/career-page/embed): a centred notice with the way out replaces the frame, and
   the reload button and "doesn't display?" footer have nothing left to do. */
.career-split-blocked {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    background: var(--bg-elevated);
    text-align: center;
}

.career-split.is-blocked .career-split-blocked {
    display: flex;
}

.career-split.is-blocked .apply-preview-loader,
.career-split.is-blocked .apply-preview-frame,
.career-split.is-blocked .apply-preview-footer,
.career-split.is-blocked [data-career-split-reload] {
    display: none;
}

.career-split-blocked-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent-strong);
}

.career-split-blocked-icon svg {
    width: 26px;
    height: 26px;
}

.career-split-blocked-title {
    margin: 0;
    color: var(--fg);
    font-size: 1.05rem;
    font-weight: 800;
}

.career-split-blocked-text {
    max-width: 26rem;
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.career-split-blocked-text [data-career-split-host] {
    color: var(--fg);
    font-weight: 700;
}

@media (min-width: 961px) {
    html.career-split-open .company-details {
        margin-right: var(--career-split-width);
        margin-left: max(0px, calc(100vw - var(--career-split-width) - 1600px));
    }

    /* The panel covers the right edge from the very top - keep the whole header (menu included)
       visible over the offer column instead. */
    html.career-split-open .site-header {
        margin-right: var(--career-split-width);
    }
}

@media (max-width: 960px) {
    html.career-split-open {
        overflow: hidden;
    }

    .career-split {
        inset: 0;
        z-index: 60;
        width: auto;
        border: 0;
        transform: translateY(24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .career-split {
        transition: none;
    }
}

/* In-page preview of the original offer (#apply-preview, apply-preview.js): a <dialog> spanning
   the viewport, with the panel filling it except for a thin margin through which the blurred
   offer page shows (a bottom sheet on phones). The dialog itself is transparent - clicks on it,
   outside the panel, close it. Kept mostly neutral: the framed page brings its own colours. */
html.apply-preview-open {
    overflow: hidden;
}

.apply-preview {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    border: 0;
    background: transparent;
    color: var(--fg);
    overflow: hidden;
}

.apply-preview[open] {
    display: flex;
}

.apply-preview::backdrop {
    background: rgba(5, 6, 9, 0.45);
    backdrop-filter: blur(14px) saturate(0.7);
    -webkit-backdrop-filter: blur(14px) saturate(0.7);
    animation: apply-preview-fade 0.22s ease both;
}

.apply-preview.is-closing::backdrop {
    animation: apply-preview-fade-out 0.22s ease both;
}

.apply-preview-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    animation: apply-preview-zoom-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.apply-preview.is-closing .apply-preview-panel {
    animation: apply-preview-zoom-out 0.22s ease-in both;
}

.apply-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem 0.8rem 1.1rem;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border-bottom: 1px solid var(--border);
}

.apply-preview-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.apply-preview-favicon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
}

.apply-preview-favicon svg {
    width: 18px;
    height: 18px;
}

.apply-preview-titles {
    min-width: 0;
}

.apply-preview-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Address-bar style host line, so it's clear whose page is inside the frame. */
.apply-preview-address {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0.2rem 0 0;
    padding: 0.12rem 0.55rem 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.apply-preview-address svg {
    flex: none;
    width: 12px;
    height: 12px;
    color: var(--muted-2);
}

.apply-preview-host {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apply-preview-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.apply-preview-icon-btn {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.apply-preview-icon-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.apply-preview-icon-btn:hover,
.apply-preview-icon-btn:focus-visible {
    color: var(--fg);
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.apply-preview-icon-btn[data-apply-preview-reload]:hover svg {
    transform: rotate(-60deg);
}

.apply-preview-close:hover,
.apply-preview-close:focus-visible {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.apply-preview-open {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.58rem 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--fg);
    font-weight: 700;
    font-size: 0.86rem;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.apply-preview-open svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.apply-preview-open:hover,
.apply-preview-open:focus-visible {
    color: var(--fg);
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}

.apply-preview-open:hover svg {
    transform: translate(2px, -2px);
}

.apply-preview-open-label--short {
    display: none;
}

.apply-preview-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #fff; /* most source pages assume a light canvas - avoids a dark gap behind them */
}

.apply-preview-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.apply-preview-stage.is-loaded .apply-preview-frame {
    opacity: 1;
}

.apply-preview-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background: var(--bg-elevated);
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.apply-preview-stage.is-loaded .apply-preview-loader {
    opacity: 0;
    visibility: hidden;
}

.apply-preview-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 3px solid var(--border);
    border-top-color: var(--muted);
    animation: apply-preview-spin 0.8s linear infinite;
}

.apply-preview-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.5rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted-2);
    font-size: 0.78rem;
    text-align: center;
}

.apply-preview-footer a {
    color: var(--fg);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 2px;
}

.apply-preview-footer a:hover {
    color: var(--fg);
    text-decoration-color: currentColor;
}

@keyframes apply-preview-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes apply-preview-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes apply-preview-zoom-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes apply-preview-zoom-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes apply-preview-slide-up {
    from { opacity: 0.6; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
}

@keyframes apply-preview-slide-down {
    from { opacity: 1; transform: none; }
    to { opacity: 0.6; transform: translateY(100%); }
}

@keyframes apply-preview-spin {
    to { transform: rotate(360deg); }
}

/* Phones: a full-width bottom sheet with only a sliver of the page showing above it. */
@media (max-width: 640px) {
    .apply-preview {
        padding: 2.5rem 0 0;
    }

    .apply-preview-panel {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
        animation-name: apply-preview-slide-up;
    }

    .apply-preview.is-closing .apply-preview-panel {
        animation-name: apply-preview-slide-down;
    }

    .apply-preview-bar {
        padding: 0.7rem 0.7rem 0.7rem 0.85rem;
        gap: 0.6rem;
    }

    .apply-preview-favicon,
    .apply-preview-icon-btn[data-apply-preview-reload] {
        display: none;
    }

    .apply-preview-open {
        padding: 0.55rem 0.9rem;
    }

    .apply-preview-open-label {
        display: none;
    }

    .apply-preview-open-label--short {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apply-preview::backdrop,
    .apply-preview.is-closing::backdrop,
    .apply-preview-panel,
    .apply-preview.is-closing .apply-preview-panel {
        animation: none;
    }

    .apply-preview-spinner {
        animation-duration: 2s;
    }
}

/* Top-of-page "back to the list" link (fragments/layout :: backLink): quiet text, with the
   round chevron picking up the accent on hover so the affordance is clear without a heavy box. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}

.back-link-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

/* On the offer details page the back link stays reachable while scrolling a long offer - same
   below-header offset as the other sticky panels. It floats over the offer content, so it gets a
   frosted pill (like .site-header) to stay readable instead of bare text over the cards. */
.job-details-page > .back-link {
    position: sticky;
    top: 3.75rem;
    z-index: 20;
    padding: 0.3rem 0.9rem 0.3rem 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* The header wraps onto two rows here (see .site-header), so the fixed 3.75rem offset would
   tuck the link under it - fall back to the plain in-flow link, like the sticky sidebars do. */
@media (max-width: 720px) {
    .job-details-page > .back-link {
        position: static;
    }
}

.back-link-icon svg {
    width: 1rem;
    height: 1rem;
}

.back-link:hover {
    color: var(--fg);
}

.back-link:hover .back-link-icon {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
    transform: translateX(-3px);
}

.back-link:focus-visible {
    outline: none;
}

.back-link:focus-visible .back-link-icon {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

.logout-form {
    display: inline;
}

.logout-form button {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    font: inherit;
    font-weight: 600;
}

.logout-form button:hover {
    color: var(--fg);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.inline-form {
    display: inline;
}

.import-triggers {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.flash-message {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.form-error {
    color: var(--danger);
    font-weight: 600;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 40rem;
}

.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ---------- Jobs board ---------- */

.jobs-page {
    /* Both the page and the map column scale with the viewport (via vw) instead of stopping
       dead at a fixed px cap, so a wide monitor actually gets a wider map, not just a wider gap
       around the same 560px box. */
    max-width: min(98.5vw, 2400px);
    margin: 0 auto;
    padding: 1.75rem 1rem 4rem;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) minmax(420px, min(32vw, 820px));
    /* auto 1fr, not two auto rows: the filters and map span both rows and are taller than a short
       feed, and auto rows would split that surplus between them - pushing the toolbar and the
       few cards down toward the middle. 1fr hands all of it to the feed row instead. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "filters toolbar map"
        "filters feed map";
    column-gap: 2rem;
    row-gap: 1.5rem;
    align-items: start;
}

.filter-form {
    display: contents;
}

.filters-panel {
    grid-area: filters;
    align-self: start;
    position: sticky;
    top: 3.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
}

/* Each accordion group's own option list used to also scroll internally (max-height: 14rem below),
   nesting a second scroll container inside the panel's own scroll - the two would fight over wheel
   events at the inner list's scroll boundary, reading as a sudden jump/stutter while scrolling the
   page. The panel itself already scrolls as one unit, so the sidebar's groups don't need their own. */
.filters-panel .multiselect-panel {
    max-height: none;
    overflow-y: visible;
}

/* Two option columns instead of one: with every group expanded the single-column lists made the
   panel taller than the viewport, so it had to scroll. The short labels (Zdalnie, Junior, B2B...)
   fit side by side, which roughly halves each group's height and lets the whole panel fit on screen.
   The salary group's panel holds a slider + presets, not an option list, so it keeps the flex column. */
.filters-panel .multiselect-panel:has(> .multiselect-option) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.25rem;
    padding: 0.3rem;
}

.filters-panel .multiselect summary {
    padding: 0.45rem 0.75rem;
}

.filters-panel .multiselect-option {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

.filters-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filters-panel-head h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

/* Mobile-sheet-only parts of the panel (close button, "Pokaż oferty" footer, backdrop). */
.filters-panel-close,
.filters-panel-footer {
    display: none;
}

.filters-backdrop[hidden] {
    display: none;
}

.filters-clear {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
}

.filters-clear:hover {
    color: var(--accent);
}

.filter-group {
    border: 0;
    margin: 0;
    padding: 0;
}

.filter-group legend {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.filter-icon {
    display: inline-flex;
    color: var(--muted-2);
}

.filter-icon svg {
    width: 15px;
    height: 15px;
}

.multiselect {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.multiselect summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fg);
    user-select: none;
}

.multiselect summary::-webkit-details-marker {
    display: none;
}

.multiselect .filter-icon {
    color: var(--muted-2);
}

.multiselect-label {
    flex: 1;
}

.multiselect-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.multiselect-selected {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 700;
}

.multiselect-chevron {
    display: inline-flex;
    color: var(--muted-2);
    transition: transform 0.15s ease;
}

.multiselect[open] .multiselect-chevron {
    transform: rotate(180deg);
}

.multiselect[open] summary {
    border-bottom: 1px solid var(--border);
}

.multiselect[open] {
    background: var(--surface);
}

/* In the sidebar, an open panel is part of its own group's box and simply pushes the next filter
   group down - which is exactly what lets several groups stay expanded at once without overlapping
   (see .feed-toolbar below for the one spot where that push-down isn't wanted). */
.multiselect-panel {
    display: flex;
    flex-direction: column;
    padding: 0.4rem;
    max-height: 14rem;
    overflow-y: auto;
}

/* The toolbar's sort tabs sit above content that shouldn't jump - pushing it down when opened (the sidebar's behavior) would look like the whole
   page jumped. Float it instead: same panel, but detached into its own card that overlays the
   content rather than moving it. */
.feed-toolbar .multiselect {
    position: relative;
}

.feed-toolbar .multiselect[open] {
    background: var(--bg-elevated);
}

.feed-toolbar .multiselect[open] summary {
    border-bottom: 0;
}

.feed-toolbar .multiselect-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    /* Anchored to the right, not the left: the dropdown sits at its container's right edge, so
       a left-anchored panel wider than its button would overflow off the right side of the page
       instead of staying within it. */
    right: 0;
    z-index: 20;
    min-width: 100%;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2rem));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.multiselect-option:hover {
    background: var(--surface-hover);
    color: var(--fg);
}

.multiselect-option input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex: none;
}

.multiselect-option:has(input:checked) {
    color: var(--fg);
}

.multiselect-option:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pill span {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pill span:hover {
    border-color: var(--border-strong);
    color: var(--fg);
}

.pill:has(input:checked) span {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.pill:has(input:focus-visible) span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Sticky (sort tabs + result count) so they stay at hand while scrolling the offers. Its top edge
   tucks under the site header and the padding pushes the content down to the same 3.75rem line
   as the sticky filters/map columns; the negative margins cancel the padding in the normal flow.
   No tint of its own, so at rest it blends into the page background; the blur alone keeps cards
   scrolling under it from clashing with the sort tabs. */
.feed-toolbar {
    grid-area: toolbar;
    position: sticky;
    top: 2.5rem;
    z-index: 20;
    display: flex;
    /* flex-start, not center: the source dropdown is a .multiselect that grows taller when open,
       and center-alignment would visibly re-center the sort tabs against that taller sibling. */
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: -1.25rem 0 -0.75rem;
    padding: 1.25rem 0 0.75rem;
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.feed-toolbar .results-count {
    align-self: center;
}

.feed-toolbar-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* "Ukryj/Pokaż mapę" (jobs-list-map.js). */
/* Icon-only: the label stays for screen readers (.visually-hidden) and as a title tooltip. */
.map-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.map-toggle .filter-icon svg {
    display: block;
    width: 15px;
    height: 15px;
}

.map-toggle:hover {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}

.map-toggle[aria-pressed="true"] {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

/* Map hidden: the feed takes over the map column (desktop only - narrow screens never show the
   map). The panel must go, not just hide - its grid area isn't in this template. */
@media (min-width: 921px) {
    .jobs-page.jobs-page--map-hidden {
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-areas:
            "filters toolbar"
            "filters feed";
    }
}

.jobs-page--map-hidden .jobs-map-panel {
    display: none;
}

/* The header wraps onto two rows here (see .site-header), so the fixed offset would tuck the
   toolbar under it - back to in-flow, like the sticky filters/map columns on narrow screens. */
@media (max-width: 720px) {
    .feed-toolbar {
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.sort-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pill--tab span {
    background: transparent;
    border-radius: 999px;
    padding: 0.45rem 1rem;
}

.pill--tab:has(input:checked) span {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent-strong);
}

.text-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.8rem;
}

.text-field:focus-within {
    border-color: var(--accent);
}

.text-field input {
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    width: 100%;
    outline: none;
}

.text-field input::placeholder {
    color: var(--muted-2);
}

.text-field-suffix {
    color: var(--muted-2);
    font-size: 0.8rem;
    white-space: nowrap;
}

.range-field {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.range-field input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    outline: none;
}

.range-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--accent-ink);
    cursor: pointer;
    transition: background 0.15s ease;
}

.range-field input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--accent-strong);
}

.range-field input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--accent-ink);
    cursor: pointer;
    transition: background 0.15s ease;
}

.range-field input[type="range"]::-moz-range-thumb:hover {
    background: var(--accent-strong);
}

.range-field input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--border);
}

.range-field-value {
    min-width: 4.5rem;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
}

/* First thing in the salary filter group rather than last, so it sits above the slider - a
   margin-bottom instead of .filter-toggle's usual margin-top (for spacing below the group's
   own legend rather than above a sibling that's no longer there). */
.filter-toggle--top {
    margin-top: 0;
    margin-bottom: 0.7rem;
}

.filter-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex: none;
}

.filter-toggle:has(input:checked) {
    color: var(--fg);
}

/* Quick presets for the minimum-salary slider (see jobs.js) - same pill look as .pill/.pill--tab
   elsewhere in the filters panel, just plain buttons instead of radio-backed. */
.salary-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.salary-quick-pick {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.salary-quick-pick:hover {
    border-color: var(--border-strong);
    color: var(--fg);
}

.salary-quick-pick.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.tech-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.tech-filter-chips:empty {
    display: none;
    margin: 0;
}

.tech-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--teal);
    background: color-mix(in srgb, var(--teal) 14%, transparent);
    border-radius: 6px;
    padding: 0.2rem 0.35rem 0.2rem 0.55rem;
}

.tech-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.75;
}

.tech-filter-chip-remove:hover {
    opacity: 1;
}

/* Opens #technology-modal - styled like an inert .text-field so it reads as "click to fill this
   in" rather than a generic button. */
.tech-filter-add-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.8rem;
    color: var(--muted);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.tech-filter-add-btn:hover {
    border-color: var(--accent);
    color: var(--fg);
}

/* Technology picker "sandbox": every preloaded technology as its own pill, wrapped into a loose
   horizontal cloud rather than a scrollable list - clicking a pill toggles it (filled = selected)
   without closing the popup or filtering anything else out. The search box above only marks
   name matches (.is-match) and fades the rest (.is-dimmed); nothing is ever hidden. */
.tech-sandbox-dialog {
    max-width: 44rem;
}

.tech-sandbox {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    overflow-y: auto;
}

.tech-sandbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.tech-sandbox-pill:hover {
    border-color: var(--accent);
    color: var(--fg);
}

.tech-sandbox-pill.is-selected {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
}

.tech-sandbox-pill.is-match {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

.tech-sandbox-pill.is-dimmed {
    opacity: 0.35;
}

.tech-sandbox-pill.tech-sandbox-custom {
    border-style: dashed;
}

.tech-sandbox-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--border);
}

.tech-sandbox-count {
    font-size: 0.82rem;
    color: var(--muted);
}

.tech-sandbox-apply {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tech-sandbox-apply:hover {
    background: var(--accent-strong);
}

.job-feed {
    grid-area: feed;
    min-width: 0;
}

/* While a filter/sort/tab/search request is in flight the list holds skeleton cards (see
   fragments/skeleton.html, NGJ.showSkeleton in jobs.js) - nothing in it is clickable. */
.job-feed[aria-busy="true"],
#companies-results[aria-busy="true"] {
    pointer-events: none;
}

.job-feed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.results-count {
    color: var(--muted);
    font-size: 0.9rem;
}

/* Tiny page-load / last-filter duration in the bottom-left corner (showTiming in jobs.js). */
.load-timing {
    position: fixed;
    left: 0.5rem;
    bottom: 0.5rem;
    z-index: 5;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
}

.cards {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.job-card {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.job-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    border-left-color: var(--accent);
    background: var(--surface-hover);
}

/* Empty, stretched over the whole card - opens the offer on a click anywhere except the company
   name below, which sits in its own higher stacking context so it stays independently clickable. */
.job-card-cover-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.job-card-cover-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Offer is about to expire (set by markExpiryBadges in jobs.js) - the left accent bar already
   used for hover doubles as an at-rest urgency cue here. */
.job-card--expiring {
    border-left-color: var(--danger);
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.07), var(--surface) 45%);
}

.job-card--expiring:hover {
    border-left-color: var(--danger);
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.1), var(--surface-hover) 45%);
}

.company-avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    background: #eceef2;
    color: hsl(var(--hue, 210) 45% 32%);
    border: 1px solid var(--border);
    object-fit: contain;
    object-position: center;
    padding: 4px;
    box-sizing: border-box;
}

.job-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.job-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.job-card-title-row h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
}

.badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.badge--new {
    background: var(--teal);
    color: #062821;
}

.source-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.source-badge[data-source="JUST_JOIN_IT"] {
    color: var(--source-jji);
    background: color-mix(in srgb, var(--source-jji) 14%, transparent);
    border-color: color-mix(in srgb, var(--source-jji) 45%, var(--border));
}

.source-badge[data-source="NO_FLUFF_JOBS"] {
    color: var(--source-nfj);
    background: color-mix(in srgb, var(--source-nfj) 14%, transparent);
    border-color: color-mix(in srgb, var(--source-nfj) 45%, var(--border));
}

.source-badge[data-source="PRACUJ_PL"] {
    color: var(--source-pracuj);
    background: color-mix(in srgb, var(--source-pracuj) 14%, transparent);
    border-color: color-mix(in srgb, var(--source-pracuj) 45%, var(--border));
}

.source-badge[data-source="INTERNAL"] {
    color: var(--source-direct);
    background: color-mix(in srgb, var(--source-direct) 14%, transparent);
    border-color: color-mix(in srgb, var(--source-direct) 45%, var(--border));
}

.job-card-company-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
}

.job-card-company {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.job-card-company .filter-icon {
    flex: none;
    color: var(--muted-2);
}

.job-card-company .filter-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* Only when it's actually a link to the company page (see jobs/list :: cards) - raised above
   .job-card-cover-link so it stays its own click target instead of opening the offer underneath. */
a.job-card-company {
    position: relative;
    z-index: 2;
}

a.job-card-company:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.location-more {
    padding: 0 0.35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.meta-item .filter-icon svg {
    width: 14px;
    height: 14px;
}

.job-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
}

.tag[data-level="INTERN"] {
    color: var(--level-intern);
    background: color-mix(in srgb, var(--level-intern) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--level-intern) 40%, var(--border));
}

.tag[data-level="JUNIOR"] {
    color: var(--level-junior);
    background: color-mix(in srgb, var(--level-junior) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--level-junior) 40%, var(--border));
}

.tag[data-level="MID"] {
    color: var(--level-mid);
    background: color-mix(in srgb, var(--level-mid) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--level-mid) 40%, var(--border));
}

.tag[data-level="SENIOR"] {
    color: var(--level-senior);
    background: color-mix(in srgb, var(--level-senior) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--level-senior) 40%, var(--border));
}

.tag[data-level="LEAD"] {
    color: var(--level-lead);
    background: color-mix(in srgb, var(--level-lead) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--level-lead) 40%, var(--border));
}

.job-card-tech {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tech-icon {
    width: 14px;
    height: 14px;
    color: var(--muted-2);
    flex: none;
}

.tech-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--teal);
    background: color-mix(in srgb, var(--teal) 14%, transparent);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
}

.tech-chip--more {
    color: var(--muted);
    background: transparent;
    border: 1px dashed var(--border);
}

/* "Marker" highlight for a technology shared between the hovered active offer and one of its
   similar archived offers - applied to BOTH cards (see companies.js highlightSharedTech() for the
   active one, .similar-offer-card's th:classappend for the archived ones), so the match reads as
   the same literal highlighter mark on either side. Deliberately a highlighter-yellow rather than
   the app's usual green accent - every other "selected/matched" state in the app already uses that
   green, so reusing it here would just blend in instead of standing out. */
.tech-chip--shared {
    color: #402c00;
    background: #fde047;
    border: 1px solid #eab308;
    font-weight: 700;
    box-shadow: 0 0 0 3px color-mix(in srgb, #fde047 25%, transparent);
}

.tech-chip-icon {
    width: 13px;
    height: 13px;
    flex: none;
    object-fit: contain;
}

.tech-chip-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 999px;
    background: hsl(var(--hue, 200) 70% 55%);
}

.job-card-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Bottom-aligned (votes, date, expiry note last - in the card's bottom-right corner), leaving
       the top-right corner to the save/report buttons. */
    justify-content: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.salary {
    font-weight: 700;
    color: var(--teal);
    font-size: 0.92rem;
    white-space: nowrap;
}

/* Pins the date towards the bottom of .job-card-side, above the expiry note (if any). */
.last-seen {
    margin-top: auto;
    color: var(--muted-2);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Company view swaps the single relative .last-seen line for these two absolute-date lines
   (published/expires) - same bottom-pinning as .last-seen, but on the wrapper since it now
   holds two stacked lines instead of one. */
.job-card-dates {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.offer-date {
    color: var(--muted-2);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Plain "wygasa za X dni" note for offers not yet close to expiring - same low-key treatment
   as .last-seen, deliberately not the red .expiry-badge below (that's reserved for the urgent
   window so it still stands out when it actually matters). */
.expiry-note {
    color: var(--muted-2);
    font-size: 0.7rem;
    white-space: nowrap;
}

.expiry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.35);
    color: var(--danger);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.expiry-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 999px;
    background: var(--danger);
    animation: expiry-pulse 1.8s ease-in-out infinite;
}

@keyframes expiry-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.55);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(255, 107, 107, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .expiry-badge::before {
        animation: none;
    }
}

.salary-undisclosed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--muted-2);
}

.salary-undisclosed .filter-icon svg {
    width: 13px;
    height: 13px;
}

/* Infinite-scroll "loading more" indicator: a couple of skeleton cards laid out like the list
   above it (.cards / .company-list is added on the element itself). */
.feed-loader {
    margin-top: 0.85rem;
}

/* .cards / .company-list set a display that beats the UA [hidden] rule. */
.feed-loader[hidden] {
    display: none;
}

#scroll-sentinel {
    height: 1px;
}

.pagination-fallback {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.pagination-link {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--fg);
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pagination-link:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
}

.pagination-status {
    color: var(--muted);
    font-size: 0.85rem;
}

@media (max-width: 920px) {
    .jobs-page {
        /* minmax(0, ...), not a bare 1fr (= minmax(auto, 1fr)): otherwise the column grows to its
           widest unbreakable content - e.g. a card's salary + date row - and the whole page
           scrolls sideways on a phone. */
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "toolbar"
            "feed";
    }

    /* The sidebar becomes a bottom sheet opened from the header's sliders button
       (#mobile-filters-trigger, see bindMobileFilters() in jobs.js). Below the technology modal
       (z-index 100), which is opened from inside the sheet. */
    .filters-panel {
        grid-area: auto;
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        z-index: 95;
        max-height: min(88vh, 88dvh);
        padding: 0 1rem;
        gap: 0.75rem;
        border-bottom: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, 0.6);
        overscroll-behavior: contain;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .filters-panel.is-open {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    .filters-backdrop {
        position: fixed;
        inset: 0;
        z-index: 94;
        background: rgba(6, 7, 10, 0.72);
        backdrop-filter: blur(2px);
    }

    html.filters-sheet-open {
        overflow: hidden;
    }

    /* Head and footer stick to the sheet's edges while the groups scroll between them. */
    .filters-panel-head {
        position: sticky;
        top: 0;
        z-index: 1;
        gap: 0.75rem;
        margin: 0 -1rem;
        padding: 1rem 1rem 0.75rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .filters-panel-head h2 {
        font-size: 1.1rem;
    }

    .filters-panel-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-elevated);
        color: var(--muted);
        font: inherit;
        font-size: 0.95rem;
        line-height: 1;
        cursor: pointer;
    }

    .filters-panel-close:hover {
        color: var(--fg);
        border-color: var(--border-strong);
    }

    .filters-panel-footer {
        display: block;
        position: sticky;
        bottom: 0;
        margin: auto -1rem 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
    }

    .filters-panel-apply {
        width: 100%;
        padding: 0.85rem 1rem;
        border: 0;
        border-radius: var(--radius-md);
        background: var(--accent);
        color: var(--accent-ink);
        font: inherit;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .filters-panel-apply:hover {
        background: var(--accent-strong);
    }

    /* A sticky map with a constantly-growing pin count doesn't fit a narrow viewport well -
       the offer list alone is the mobile experience, same call as the filters panel above.
       It must go, not just hide visually: its grid-area "map" isn't in this single-column
       template, so a rendered panel makes the grid add implicit columns and squeezes the
       feed off-center. */
    .jobs-map-panel {
        display: none;
    }

    /* No map column here at all, so nothing to toggle. */
    .map-toggle {
        display: none;
    }
}

@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
    .filters-panel,
    .filters-panel.is-open {
        transition: none;
    }
}

@media (max-width: 560px) {
    .jobs-page {
        padding: 1.25rem 1rem 3rem;
    }

    .job-card {
        flex-direction: column;
    }

    .company-avatar {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    /* Expiry note and date share one row while they fit, wrapping instead of pushing the card wider. */
    .job-card-side {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.75rem;
        width: 100%;
        min-width: 0;
    }

    /* Row layout's main axis is horizontal, so the bottom-pinning margin-top:auto from the
       base rule does nothing here - swap it for margin-left:auto to keep the date flush right
       whether or not the salary span before it is present. */
    .last-seen {
        margin-top: 0;
        margin-left: auto;
    }
}

/* ---------- Companies ---------- */

.companies-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.companies-page-head h1 {
    margin: 0;
}

.companies-page {
    max-width: 1200px;
}

.companies-search {
    margin-bottom: 0;
}

/* ---------- Collapsible "icon box" search: a magnifying-glass button that expands into a text
   input once opened. Used for the company directory search and a company's own offer search.
   The .is-collapsed class is only ever added by JS, so without JS the field stays a normal,
   always-visible (and always-usable) input - see companies.js. ---------- */
.icon-search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    transition: border-color 0.15s ease;
}

.icon-search:focus-within {
    border-color: var(--accent);
}

.icon-search .search-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--muted-2);
}

.icon-search-toggle {
    display: inline-flex;
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--muted-2);
}

.icon-search-toggle:hover {
    color: var(--fg);
}

.icon-search input {
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 0.9rem;
    padding: 0;
    outline: none;
    width: 14rem;
    max-width: 40vw;
    opacity: 1;
    transition: width 0.2s ease, opacity 0.15s ease;
}

.icon-search input::placeholder {
    color: var(--muted-2);
}

.icon-search.is-collapsed {
    gap: 0;
}

.icon-search.is-collapsed input {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.company-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.company-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.4rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.company-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.company-card .company-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    border-radius: 12px;
}

.company-card-name {
    font-weight: 700;
    color: var(--fg);
    font-size: 1.05rem;
}

.company-card-name .badge {
    margin-left: 0.4rem;
    vertical-align: middle;
}

.companies-toolbar {
    margin-bottom: 1rem;
}

.company-card-count {
    color: var(--muted);
    font-size: 0.85rem;
}

/* Wide and centred on desktop: the publication timeline and the offer list together fill the
   page up to a cap, so on very wide screens the cards don't stretch edge to edge. The
   similar-offers sidebar (.similar-offers-panel) is a fixed overlay and needs no reserved space. */
.company-details {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Sticky so the back link and the offer tabs/search below it stay put together while the offer
   list scrolls - same below-header offset as the /jobs sticky sidebars (.jobs-map-panel,
   .job-map-panel). A frosted, translucent background (like .site-header) rather than a flat
   opaque one, so it doesn't read as a solid black slab against the page's own aurora gradient
   while still keeping the offer cards that scroll underneath from bleeding through unreadably. */
.company-sticky-header {
    position: sticky;
    top: 3.75rem;
    z-index: 20;
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
}

.company-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.company-header h1 {
    margin: 0;
}

.company-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    border-radius: 12px;
    padding: 6px;
}

/* Inside the sticky header the back link sits tight above the tabs, so it stays reachable however
   far the offer list has been scrolled. */
.company-sticky-header .back-link {
    margin-bottom: 0.75rem;
}

/* Company page body: the publication timeline (vertical, left) next to the offer list (right),
   which takes all the remaining width (.company-details caps the whole page instead). */
.company-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

/* The timeline column only exists while the publication timeline is rendered (see
   CompaniesController#TIMELINE_ENABLED). */
.company-layout.has-timeline {
    grid-template-columns: 320px minmax(0, 1fr);
}

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

/* Publication history on a company page (companies/details :: timeline): a vertical timeline of the
   company's offers, newest first and grouped by month. Sticky at the same below-header offset as
   .company-sticky-header, with its own scrolling body so a long history never pushes the offer
   list away. Previews are shown in the floating .timeline-popover (see companies.js), not inside
   the column, which would clip them. */
.company-timeline {
    position: sticky;
    top: 4.5rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 5.5rem);
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.company-timeline-head {
    padding: 1rem 1.1rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.company-timeline-head h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.company-timeline-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
    margin: 0 0 0.8rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.company-timeline-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.company-timeline-count::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted-2);
}

.company-timeline-count[data-status="ACTIVE"]::before {
    background: var(--accent);
}

.company-timeline-filter {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.company-timeline-presets {
    display: flex;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
}

.company-timeline-preset,
.company-timeline-submit {
    flex: 1;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    white-space: nowrap;
}

.company-timeline-preset:hover {
    color: var(--fg);
}

.company-timeline-preset.is-active {
    color: var(--accent-ink);
    background: var(--accent);
}

.company-timeline-submit {
    color: var(--fg);
    border: 1px solid var(--border-strong);
}

.company-timeline-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.company-timeline-date {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: var(--muted);
    min-width: 0;
}

.company-timeline-date input {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 0.8rem;
    color: var(--fg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.4rem;
}

.company-timeline-date input:focus-visible {
    outline: none;
    border-color: var(--accent);
}

.company-timeline-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0.6rem 0.75rem 0.9rem;
}

.company-timeline[aria-busy="true"] .company-timeline-body {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.company-timeline-empty {
    padding: 1.25rem 0.2rem;
    margin: 0;
    font-size: 0.85rem;
}

.company-timeline-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}

/* Month headings stay pinned at the top of the scrolling body while their entries scroll under. */
.timeline-month-label {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0.75rem 0.3rem 0.4rem 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
}

.timeline-month-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

/* The vertical line runs through the dots' centres (dot is 10px wide, line 2px, both at the left). */
.timeline-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline-list::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 2px;
    border-radius: 1px;
    background: var(--border);
}

.timeline-item {
    --event-color: var(--muted-2);
}

.timeline-item[data-status="ACTIVE"] {
    --event-color: var(--accent);
}

.timeline-item[data-status="DEACTIVATED"] {
    --event-color: var(--danger);
}

.timeline-item-link {
    display: grid;
    grid-template-columns: 10px 3.1rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.6rem;
    padding: 0.35rem 0.4rem 0.35rem 0;
    border-radius: var(--radius-sm);
    color: var(--fg);
}

.timeline-item-link:hover,
.timeline-item-link:focus-visible,
.timeline-item.is-previewed .timeline-item-link {
    color: var(--fg);
    background: var(--surface-hover);
    outline: none;
}

.timeline-dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: var(--event-color);
    box-shadow: 0 0 0 3px var(--surface);
}

.timeline-item-link:hover .timeline-dot,
.timeline-item.is-previewed .timeline-dot {
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--event-color) 45%, transparent);
}

.timeline-item-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    padding-top: 0.1rem;
}

.timeline-item-title {
    font-size: 0.85rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.timeline-item:not([data-status="ACTIVE"]) .timeline-item-title {
    color: var(--muted);
}

/* Floating preview next to the timeline column - positioned by companies.js. */
.timeline-popover {
    position: fixed;
    z-index: 60;
    width: 18rem;
    max-width: calc(100vw - 2rem);
    padding: 0.8rem 0.9rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    pointer-events: none;
}

.timeline-popover[hidden] {
    display: none;
}

.timeline-preview-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.timeline-preview-title {
    margin: 0 0 0.3rem;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
}

.timeline-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.timeline-popover .job-card-tech {
    margin-bottom: 0.5rem;
}

.timeline-preview-dates {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0;
    font-size: 0.8rem;
}

.timeline-preview-dates dt {
    color: var(--muted);
}

.timeline-preview-dates dd {
    margin: 0;
}

/* Narrow screens: one column, the timeline above the offers with a capped, scrollable height. */
@media (max-width: 960px) {
    .company-details {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* .company-main is flattened into the column so the logo/name can be ordered above the
       timeline, with the offer tabs and list still below it. */
    .company-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .company-main {
        display: contents;
    }

    .company-header {
        order: -1;
        margin-bottom: 0;
    }

    .company-timeline {
        position: static;
        max-height: none;
    }

    .company-timeline-body {
        max-height: 22rem;
    }
}

.offer-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Segmented control: two equal-width segments in a pill-shaped track, with a single accent
   "thumb" (::before) that slides under whichever segment is active - driven by data-active,
   so switching tabs via fetch (companies.js) animates instead of jumping. */
.offer-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}

.offer-tabs::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--teal));
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), background 0.28s ease, box-shadow 0.28s ease;
}

.offer-tabs[data-active="archived"]::before {
    transform: translateX(100%);
    background: linear-gradient(135deg, var(--border-strong), var(--muted-2));
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6);
}

.offer-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.offer-tab:hover {
    color: var(--fg);
}

.offer-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

.offer-tab--active,
.offer-tab--active:hover {
    color: var(--accent-ink);
}

.offer-tabs[data-active="archived"] .offer-tab--active {
    color: var(--fg);
}

/* "Podobne archiwalne oferty" on/off switch - pushed right, next to the search. */
.similar-offers-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}

.similar-offers-toggle[hidden] {
    display: none;
}

.similar-offers-toggle input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.similar-offers-toggle:hover {
    color: var(--fg);
}

/* Pill-shaped to match the segmented control next to it. */
.offer-tabs-row .icon-search {
    border-radius: 999px;
}

/* "Live" dot on the active-offers segment - pulses only while that segment is selected. */
.offer-tab-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    transition: background 0.2s ease;
}

.offer-tab--active .offer-tab-dot {
    background: var(--accent-ink);
    animation: offer-tab-pulse 1.8s ease-out infinite;
}

@keyframes offer-tab-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-ink) 55%, transparent); }
    100% { box-shadow: 0 0 0 6px transparent; }
}

.offer-tab-icon {
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .offer-tabs::before,
    .offer-tab--active .offer-tab-dot {
        transition: none;
        animation: none;
    }
}

@media (max-width: 520px) {
    .offer-tabs {
        width: 100%;
    }

    .offer-tab {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }
}

/* ---------- Similar-archived-offers sidebar: slides in from the right on hovering an active
   offer card (see companies.js). An overlay (position: fixed), not part of the page flow, so it
   never reflows the offer list underneath. Full viewport height, flush with the right edge, and
   above the sticky .site-header (z-index 40). ---------- */
.similar-offers-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: calc(100vw - 2rem);
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-left: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
    box-shadow: var(--shadow-card), -24px 0 48px -24px rgba(0, 0, 0, .7);
    z-index: 50;
    opacity: 0;
    transform: translateX(calc(100% + 2rem));
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), opacity 0.2s ease;
    overflow: hidden;
}

.similar-offers-panel.is-open {
    opacity: 1;
    transform: translateX(0);
}

/* Wide desktop: while the panel is open, the company page makes room for it instead of being
   covered - the content keeps its cap but ends at the panel's left edge (pushed left only as far as
   needed). Same breakpoint as WIDE_QUERY in companies.js, which opens the panel by default. */
@media (min-width: 1200px) {
    body:has(.similar-offers-panel.is-open) .company-details {
        margin-right: 380px;
        margin-left: max(0px, calc(100vw - 380px - 1600px));
    }
}

.similar-offers-panel-head {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1rem 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.similar-offers-panel-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

/* Same accent-bar heading as the offer details page's similar panels (.similar-jobs-title),
   muted like its archived variant. */
.similar-offers-panel-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--fg);
    font-size: 0.95rem;
    font-weight: 700;
}

.similar-offers-panel-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: var(--muted-2);
}

.similar-offers-panel-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.similar-offers-panel-close svg {
    width: 16px;
    height: 16px;
}

.similar-offers-panel-close:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--fg);
}

/* The hovered active offer these results are for. */
.similar-offers-panel-sub {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.similar-offers-panel-sub:has(.similar-offers-panel-sub-title:empty) {
    display: none;
}

.similar-offers-panel-sub-label {
    color: var(--muted-2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.similar-offers-panel-sub-title {
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.similar-offers-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

/* The loaded fragment is itself a .similar-offers-list, swapped into the panel's own one - only
   the outer one scrolls and pads. */
.similar-offers-list .similar-offers-list {
    flex: none;
    padding: 0;
    overflow: visible;
}

.similar-offers-placeholder {
    margin: 0;
    padding: 1.1rem 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
}

.similar-offer-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 0.9rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--muted-2);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.similar-offer-card:hover,
.similar-offer-card:focus-visible {
    border-color: var(--border-strong);
    border-left-color: var(--muted);
    background: var(--surface-hover);
    transform: translateX(-2px);
}

.similar-offer-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.similar-offer-card h4 {
    margin: 0;
    color: var(--fg);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.similar-offer-card-open {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 0.1rem;
    color: var(--muted-2);
    transition: color 0.15s ease;
}

.similar-offer-card:hover .similar-offer-card-open {
    color: var(--fg);
}

.similar-offer-card .last-seen {
    color: var(--muted-2);
    font-size: 0.76rem;
}

.similar-offer-card--skeleton,
.similar-offer-card--skeleton:hover {
    border-left-color: var(--border);
    background: var(--bg-elevated);
    transform: none;
}

/* Archived offer's locations in the similar-offers sidebar. A city shared with the hovered active
   offer gets a sky-blue "marker" - same highlighter idea as .tech-chip--shared, but a different
   hue so a location match never reads as a technology match. The active card's own location line
   gets the matching .meta-item--location-shared (see companies.js highlightSharedCities). */
.similar-offer-locations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.location-chip {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.location-chip--more {
    color: var(--muted);
    background: transparent;
    border-style: dashed;
}

.location-chip--shared,
.meta-item--location-shared {
    color: #062335;
    background: #7dd3fc;
    border: 1px solid #0ea5e9;
    font-weight: 700;
    box-shadow: 0 0 0 3px color-mix(in srgb, #7dd3fc 25%, transparent);
}

.meta-item--location-shared {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* Publish date (active card) vs. expiry date (archived cards) comparison - see companies.js
   compareDates. --compared just points out which date is being compared; --suspicious / --warning
   mark a gap of SUSPICIOUS_GAP_DAYS or less, i.e. a likely re-post of the same position. */
.offer-date--compared {
    color: var(--fg);
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--teal) 18%, transparent);
    outline: 1px solid color-mix(in srgb, var(--teal) 55%, transparent);
}

.offer-date--suspicious {
    color: var(--warn-fg-strong);
    background: color-mix(in srgb, #f97316 22%, transparent);
    outline-color: #f97316;
}

.similar-offer-gap {
    margin: 0;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--border);
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.similar-offer-gap--warning {
    color: var(--warn-fg);
    font-weight: 700;
}

.similar-offer-card--suspicious,
.similar-offer-card--suspicious:hover {
    border-color: color-mix(in srgb, #f97316 55%, var(--border));
    border-left-color: #f97316;
    background: color-mix(in srgb, #f97316 6%, var(--bg-elevated));
}

.similar-offer-card--suspicious .similar-offer-gap {
    border-top-color: color-mix(in srgb, #f97316 40%, var(--border));
}

/* The offer details page's archived panel (jobs/similar.html :: panel): a card inside the repost
   window gets the same orange marking as .similar-offer-card--suspicious on the company page. */
.similar-jobs-panel[data-kind="archived"] .similar-job--repost,
.similar-jobs-panel[data-kind="archived"] .similar-job--repost:hover {
    border-color: #f97316;
    border-left-color: #f97316;
}

.similar-job .location-chip--shared {
    padding: 0.05rem 0.45rem;
}

.similar-offers-alert {
    margin: 0;
    padding: 0.6rem 0.75rem;
    color: var(--warn-fg-soft);
    font-size: 0.8rem;
    line-height: 1.4;
    background: color-mix(in srgb, #f97316 16%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, #f97316 60%, var(--border));
    border-radius: var(--radius-md);
}

@media (max-width: 640px) {
    .similar-offers-panel {
        right: 0;
        width: 100%;
        max-width: 100vw;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        top: auto;
        bottom: 0;
        height: 60vh;
        border: 1px solid var(--border-strong);
        border-bottom: none;
        transform: translateY(100%);
    }

    .similar-offers-panel.is-open {
        transform: translateY(0);
    }
}

/* Site-wide styled tooltip (tooltip.js) - replaces the native title bubble. Fixed-positioned
   against the viewport, above every overlay (modals and the map sit at z-index 1000). */
.ui-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    max-width: min(280px, calc(100vw - 16px));
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
    color: var(--fg);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.ui-tooltip[data-placement="below"] {
    transform: translateY(-3px);
}

.ui-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ui-tooltip[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ui-tooltip {
        transition: none;
    }
}

/* ---------- About page (/about) ---------- */

/* Centered headline, then an even grid of equally sized topic cards (icon, title, one sentence):
   3 per row on desktop, 2 on tablets, 1 on phones. */
.about-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4rem;
    line-height: 1.65;
}

.about-hero {
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 3rem;
    text-align: center;
}

.about-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.about-hero h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2rem, 6vw, 3.6rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Key phrase of the headline: accent color with a thin, loosely offset underline - reads like a
   natural text underline rather than a highlighter block. */
.about-highlight {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: auto;
}

.about-lead {
    max-width: 60ch;
    margin: 0 auto 1.75rem;
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--fg) 68%, transparent);
}

.about-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.3rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    transition: background 0.15s ease;
}

.about-cta:hover {
    background: var(--accent-strong);
    color: var(--accent-ink);
}

.about-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 6 points = 2 even rows of 3 */
    gap: 3rem 4rem;
}

/* No box around a point: open columns separated only by whitespace, so the section reads as
   part of the page. */
.about-point {
    display: flex;
    flex-direction: column;
    scroll-margin-top: 6rem; /* footer anchors land below the sticky header */
}

.about-point-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    color: color-mix(in srgb, var(--fg) 85%, transparent);
}

.about-point-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.about-point h2 {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
}

/* Softer, warmer grey than --muted so a whole paragraph stays easy to read on the dark page. */
.about-point p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--fg) 68%, transparent);
}

/* Key phrases in a card: bolder and tinted towards the accent - stand out without shouting. */
.about-point p strong {
    font-weight: 700;
    color: color-mix(in srgb, var(--accent) 55%, var(--fg));
}

@media (max-width: 960px) {
    .about-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .about-points {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Site footer (fragments/layout :: footer) ---------- */

/* Company page offer feed and the /companies directory infinite-scroll (companies.js keeps
   data-has-next current), so the footer stays out until the last page is in - otherwise it would
   flash up under every page. */
body:has(#company-feed[data-has-next="true"]) .site-footer,
body:has(#companies-results[data-has-next="true"]) .site-footer {
    display: none;
}

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
    font-size: 0.9rem;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem 2rem;
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.site-footer .brand-logo {
    height: 36px;
    width: auto;
    display: block;
}

.site-footer-brand p {
    margin: 0.75rem 0 0;
    max-width: 36ch;
    color: var(--muted);
    line-height: 1.55;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

.site-footer-label {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.site-footer-col a,
.site-footer-col button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--fg);
    cursor: pointer;
    text-align: left;
}

.site-footer-col a:hover,
.site-footer-col button:hover {
    color: var(--accent-strong);
}

.site-footer-col a:focus-visible,
.site-footer-col button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.site-footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--muted-2);
}

@media (max-width: 720px) {
    .site-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 2rem 1rem 1.5rem;
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }

    .site-footer-bottom {
        padding: 1rem 1rem 5rem; /* clear the floating back-to-top button */
    }

    .about-page {
        padding: 2rem 1rem 3rem;
    }
}

/* ---------- Offer reports & votes (reports/form.html, jobs/details.html #votes) ---------- */

/* Flag link next to the bookmark (fragments/layout :: reportButton): same shell as .save-offer-btn,
   turning red on hover since it flags a problem rather than saving. */
.report-offer-btn {
    position: relative;
    z-index: 2;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.report-offer-btn svg {
    width: 18px;
    height: 18px;
}

.report-offer-btn:hover {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
}

.report-offer-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* On a job card it sits in the top-right corner, just right of the save button and, like it,
   appears on hover/focus only. */
.job-card .report-offer-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    opacity: 0;
    pointer-events: none;
}

.job-card:hover .report-offer-btn,
.job-card:focus-within .report-offer-btn {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .job-card .report-offer-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Thumbs up/down counter on a job card (filled in by jobs.js loadVoteCounts). Each thumb is a vote
   button (jobs.js bindVoting), raised above .job-card-cover-link so a click votes instead of
   opening the offer. */
.vote-pill {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.vote-pill-up,
.vote-pill-down {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.35rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.vote-pill-up:hover,
.vote-pill-down:hover {
    background: var(--surface-hover);
}

.vote-pill-up:active,
.vote-pill-down:active {
    transform: scale(0.92);
}

.vote-pill-up:focus-visible,
.vote-pill-down:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.vote-pill .is-voted svg {
    fill: currentColor;
    fill-opacity: 0.25;
}

.vote-pill svg {
    width: 14px;
    height: 14px;
}

.vote-pill-up {
    color: var(--accent);
}

.vote-pill-down {
    color: var(--danger);
}

.vote-pill--empty .vote-pill-up,
.vote-pill--empty .vote-pill-down {
    color: var(--muted-2);
}

.skeleton-line--votes {
    width: 4.5rem;
}

/* In the side column the counter sits right above the date, not up in the (button) corner:
   it takes the free space above itself, so the date's own margin-top:auto must yield. */
.job-card-side > .vote-pill {
    margin-top: auto;
}

.job-card-side > .vote-pill ~ .last-seen,
.job-card-side > .vote-pill ~ .job-card-dates,
.job-card-side > .vote-pill ~ .skeleton-line--side-date {
    margin-top: 0;
}

/* Row layout of .job-card-side on narrow screens (see the 560px block above). */
@media (max-width: 560px) {
    .job-card-side > .vote-pill {
        margin-top: 0;
    }
}

/* Offer actions in the details header (jobs/details.html .job-details-side): the provider ID on top,
   then one compact row - thumbs up/down with their counts, save, report flag - all in the same
   neutral button style as .save-offer-btn. */
.job-details-side {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    margin-left: auto;
}

.job-details-side .source-id {
    margin-left: 0;
}

/* Same neutral look as the action buttons below it, instead of the accent-green pill. */
.job-details-side .source-id summary {
    border-color: var(--border);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
}

.job-details-side .source-id summary:hover,
.job-details-side .source-id[open] summary {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--fg);
    box-shadow: none;
}

.job-details-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.job-details-header-top .job-details-actions .save-offer-btn {
    margin-left: 0;
}

.vote-form {
    display: flex;
    margin: 0;
}

.vote-thumb {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 34px;
    padding: 0 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.vote-thumb svg {
    width: 17px;
    height: 17px;
}

.vote-thumb--up:hover {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.vote-thumb--down:hover {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
}

.vote-thumb:active {
    transform: scale(0.94);
}

.vote-thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.vote-thumb--up.is-voted {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.vote-thumb--down.is-voted {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
}

/* A vote in flight (jobs.js castVote): dimmed and not clickable again. */
.vote-thumb.is-busy,
.vote-pill .is-busy {
    opacity: 0.55;
    pointer-events: none;
}

/* Outcome of an AJAX vote (jobs.js showVoteToast): a small neutral note at the bottom centre. */
.vote-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1000;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--fg);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.vote-toast--info {
    border-left-color: var(--muted-2);
}

.vote-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .vote-toast {
        transition: none;
    }
}

.job-details-actions-divider {
    width: 1px;
    height: 20px;
    margin: 0 0.15rem;
    background: var(--border);
}

/* Vote outcome that isn't a success (already voted in the last 24h): neutral instead of green. */
.flash-message--info {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

/* Report form (reports/form.html): a stack of numbered step cards under the reported offer. */
.report-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.report-hero {
    margin: 0.5rem 0 1.5rem;
}

.report-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.report-eyebrow svg {
    width: 14px;
    height: 14px;
}

.report-hero h1 {
    margin: 0.85rem 0 0.5rem;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.report-hero p {
    margin: 0;
    max-width: 62ch;
    color: var(--muted);
    line-height: 1.6;
}

.report-offer-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
    box-shadow: var(--shadow-card);
}

.report-offer-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.report-offer-card-company {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.report-offer-card-title {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.report-offer-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--muted-2);
    font-size: 0.82rem;
}

.report-offer-card-meta a {
    color: var(--accent);
}

.report-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-step {
    margin: 0;
    padding: 1.25rem 1.4rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color 0.15s ease;
}

.report-step:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.report-step.has-error {
    border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
}

.report-step-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0;
}

.report-step-num {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-strong);
    font-size: 0.85rem;
    font-weight: 800;
}

.report-step-title {
    font-weight: 700;
    font-size: 1rem;
}

.report-required,
.report-optional {
    margin-left: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

.report-required {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

.report-optional {
    background: var(--surface-hover);
    color: var(--muted);
}

.report-hint {
    margin: -0.4rem 0 0.9rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.report-step .form-error {
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
}

.report-step .form-error:empty {
    display: none;
}

.report-step textarea,
.report-step input[type="email"],
.offer-picker-search input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--fg);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-step textarea {
    resize: vertical;
    line-height: 1.55;
}

.report-step textarea:focus,
.report-step input[type="email"]:focus,
.offer-picker-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.report-step [aria-invalid="true"] {
    border-color: var(--danger);
}

/* Reason tiles */
.reason-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}

.reason-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.reason-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}

.reason-tile input {
    position: absolute;
    top: 0.95rem;
    left: 0.95rem;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--accent);
}

.reason-tile:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated));
}

.reason-tile:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.reason-tile-label {
    font-weight: 700;
}

.reason-tile-desc {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* Description with counter */
.report-textarea {
    position: relative;
}

.report-textarea textarea {
    padding-bottom: 2rem;
}

.report-counter {
    position: absolute;
    right: 0.85rem;
    bottom: 0.6rem;
    color: var(--muted-2);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.report-counter.is-near-limit {
    color: var(--danger);
}

/* Related-offers picker */
.offer-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    overflow: hidden;
}

/* Scope tabs: all of the company's offers vs only the ones similar to the reported offer. */
.offer-picker-scope {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.offer-picker-scope button {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.offer-picker-scope button:hover {
    color: var(--fg);
}

.offer-picker-scope button.is-active {
    border-bottom-color: var(--accent);
    color: var(--fg);
}

.offer-picker-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.offer-picker-search {
    position: relative;
    flex: 1 1 240px;
}

.offer-picker-search svg {
    position: absolute;
    top: 50%;
    left: 0.8rem;
    width: 16px;
    height: 16px;
    color: var(--muted-2);
    transform: translateY(-50%);
    pointer-events: none;
}

.offer-picker-search input {
    padding: 0.6rem 0.8rem 0.6rem 2.3rem;
}

.offer-picker-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.offer-picker-selected[hidden] {
    display: none;
}

.offer-picker-selected-label {
    margin-right: 0.25rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.offer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.25rem 0.35rem 0.25rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    font-size: 0.8rem;
    font-weight: 600;
}

.offer-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-chip-remove {
    flex: none;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 0.7rem;
    cursor: pointer;
}

.offer-chip-remove:hover {
    background: var(--surface-hover);
    color: var(--danger);
}

.offer-picker-scroll {
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin; /* the one list on the page that clearly needs a visible scroll cue */
    transition: opacity 0.15s ease;
}

.offer-picker.is-loading .offer-picker-scroll {
    opacity: 0.5;
}

.offer-picker-list {
    margin: 0;
    padding: 0.4rem;
    list-style: none;
}

.offer-picker-list > li {
    position: relative;
}

.offer-pick {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 2.75rem 0.7rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.offer-pick:hover {
    background: var(--surface-hover);
}

.offer-pick:has(.offer-pick-input:checked) {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.offer-pick.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.offer-pick-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.offer-pick-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    color: transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.offer-pick-check svg {
    width: 14px;
    height: 14px;
}

.offer-pick-input:checked + .offer-pick-check {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
}

.offer-pick-input:focus-visible + .offer-pick-check {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.offer-pick-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.offer-pick-title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.offer-pick-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.75rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.offer-pick-status {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.offer-pick-status.is-active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent-strong);
}

.offer-pick-status.is-archived {
    background: var(--surface-hover);
    color: var(--muted);
}

.offer-pick-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.offer-pick-tech .tech-chip {
    font-size: 0.72rem;
}

.offer-pick-open {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--muted);
}

.offer-pick-open:hover {
    background: var(--surface);
    color: var(--accent-strong);
}

.offer-pick-open svg {
    width: 16px;
    height: 16px;
}

.offer-picker-empty {
    margin: 0;
    padding: 1.5rem 1rem;
    color: var(--muted);
    text-align: center;
}

.offer-picker-more {
    display: block;
    width: 100%;
    padding: 0.7rem;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.offer-picker-more:hover {
    background: var(--surface-hover);
}

.offer-picker-more[hidden] {
    display: none;
}

.report-more {
    margin-top: 0.85rem;
}

.report-more summary {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.report-more summary:hover {
    color: var(--fg);
}

.report-more textarea {
    margin-top: 0.6rem;
}

/* Evidence drop zone: the real file input covers the whole zone (invisible), so clicking anywhere
   or dropping files onto it works natively; report-form.js only adds the file list and checks. */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.75rem 1rem;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover,
.dropzone.is-dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
}

.dropzone:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dropzone input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-icon {
    width: 32px;
    height: 32px;
    color: var(--accent);
}

.dropzone-title {
    font-weight: 700;
}

.dropzone-hint {
    color: var(--muted);
    font-size: 0.82rem;
}

.dropzone-files {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.dropzone-files[hidden] {
    display: none;
}

.dropzone-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}

.dropzone-file.is-invalid {
    border-color: var(--danger);
}

.dropzone-file-kind {
    flex: none;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: var(--surface-hover);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.dropzone-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropzone-file-size {
    flex: none;
    color: var(--muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.dropzone-file-remove {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.dropzone-file-remove:hover {
    background: var(--surface-hover);
    color: var(--danger);
}

.report-credibility {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--teal) 9%, transparent);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.report-credibility svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--teal);
}

.report-errors {
    padding: 0.85rem 1rem;
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.report-errors .form-error {
    margin: 0;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.5rem;
}

.report-submit {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.report-submit svg {
    width: 18px;
    height: 18px;
}

.report-cancel {
    color: var(--muted);
    font-weight: 600;
}

.report-cancel:hover {
    color: var(--fg);
}

@media (max-width: 720px) {
    .report-step {
        padding: 1rem;
    }

    .report-offer-card {
        align-items: flex-start;
    }

    .report-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        text-align: center;
    }
}

/* Terms/privacy consent at the end of the report form. */
.report-consent {
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.report-consent.has-error {
    border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
}

.report-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    cursor: pointer;
}

.report-consent-label input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    accent-color: var(--accent);
}

.report-consent-label a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.report-consent .form-error {
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
}

/* Legal pages (legal/terms.html, legal/privacy.html): plain readable text column. */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.5rem 1rem 4rem;
    line-height: 1.65;
}

.legal-page h1 {
    margin: 0.75rem 0 1rem;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    letter-spacing: -0.02em;
}

.legal-page h2 {
    margin: 2rem 0 0.5rem;
    font-size: 1.1rem;
}

.legal-page p,
.legal-page li {
    color: var(--muted);
}

.legal-page a {
    color: var(--accent);
}

.legal-draft {
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--level-lead) 50%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--level-lead) 10%, transparent);
    color: var(--fg);
    font-weight: 600;
}

/* ---------- Home page (/) ---------- */

/* Centred hero with a search box that hands off to /jobs, live counts, newest offers as compact
   cards, three "how it works" steps and a closing call to action. */
.home-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 4rem;
}

.home-hero {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.home-eyebrow {
    display: inline-block;
    margin: 0 0 1.1rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.home-hero h1 {
    margin: 0 0 1.25rem;
    /* Sized so the headline fits in at most two lines: the longest line ("Monitorujemy i weryfikujemy")
       is ~16em wide at this weight, so the font scales with the viewport and caps below the 820px hero. */
    font-size: clamp(1.05rem, 5.2vw, 2.9rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* Key phrase in the hero h1, coloured with the accent gradient. */
.home-highlight {
    background: linear-gradient(90deg, var(--accent), var(--teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-lead {
    max-width: 58ch;
    margin: 0 auto 2.25rem;
    font-size: 1.12rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--fg) 68%, transparent);
}

.home-search {
    display: flex;
    gap: 0.5rem;
    max-width: 640px;
    margin: 0 auto;
    padding: 0.45rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    box-shadow: var(--shadow-card);
    cursor: text;
    transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-search:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
}

.home-search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
    box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.home-search-field svg {
    transition: color 0.2s ease;
}

.home-search:hover .home-search-field svg {
    color: var(--accent);
}

.home-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-left: 0.9rem;
    color: var(--muted);
}

.home-search-field svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.home-search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 1rem;
    outline: none;
}

.home-search-field input::placeholder {
    color: var(--muted-2);
}

.home-search button,
.home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.home-search button:hover,
.home-button:hover {
    background: var(--accent-strong);
    color: var(--accent-ink);
}

.home-search button:focus-visible,
.home-button:focus-visible,
.home-tech:focus-visible,
.home-offer:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.home-techs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    max-width: 700px;
    margin: 1.4rem auto 0;
}

.home-techs-label {
    color: var(--muted-2);
    font-size: 0.88rem;
    margin-right: 0.15rem;
}

.home-tech {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.home-tech:hover {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.home-stats {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 820px;
    margin: 3.5rem auto 0;
    padding: 0;
}

.home-stats li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1.1rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    text-align: center;
}

.home-stats strong {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.home-stats span {
    color: var(--muted);
    font-size: 0.88rem;
}

.home-section {
    margin-top: 5rem;
}

.home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.home-section-head h2,
.home-cta h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.015em;
}

.home-section-head a {
    font-weight: 700;
    white-space: nowrap;
}

.home-offers {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.home-offer {
    display: flex;
    gap: 0.9rem;
    height: 100%;
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--fg);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.home-offer:hover {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: var(--surface-hover);
    transform: translateY(-2px);
}

.home-offer-logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    object-fit: contain;
    color: var(--accent);
    font-weight: 800;
}

.home-offer-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.home-offer-body strong {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-offer-company {
    color: var(--muted);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-offer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin-top: 0.35rem;
    color: var(--muted-2);
    font-size: 0.82rem;
}

.home-offer-salary {
    color: var(--accent);
    font-weight: 700;
}

.home-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.home-steps h3 {
    margin: 0 0 0.45rem;
    font-size: 1.08rem;
    font-weight: 700;
}

.home-steps p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.home-step-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

.home-step-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.home-cta {
    margin-top: 5rem;
    padding: 3rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%),
        radial-gradient(80% 120% at 100% 100%, color-mix(in srgb, var(--level-senior) 12%, transparent) 0%, transparent 60%),
        color-mix(in srgb, var(--surface) 60%, transparent);
    text-align: center;
}

.home-cta p {
    max-width: 52ch;
    margin: 0.75rem auto 1.75rem;
    color: var(--muted);
    line-height: 1.6;
}

.home-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.home-button--ghost {
    background: transparent;
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.home-button--ghost:hover {
    background: var(--surface-hover);
    color: var(--fg);
}

/* "Zgłoś ofertę" picker page (/report): company search, then offer search. */
.report-picker {
    max-width: 960px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.report-picker-head {
    margin-bottom: 1.5rem;
}

.report-picker-head h1 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.report-picker-head p {
    margin: 0;
    color: var(--muted);
}

.report-picker-company {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.report-picker-company h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.report-picker-company a {
    font-weight: 700;
    white-space: nowrap;
}

.report-picker-search {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.report-picker-search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--fg);
    font: inherit;
}

.report-picker-search input[type="search"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.report-picker-search button {
    padding: 0.75rem 1.3rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.report-picker-search button:hover {
    background: var(--accent-strong);
}

.report-picker-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.report-picker-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 100%;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--fg);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.report-picker-item:hover {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: var(--surface-hover);
}

.report-picker-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.report-picker-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.report-picker-body strong {
    color: var(--fg);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-picker-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
}

.report-picker-archived {
    color: var(--danger);
    font-weight: 600;
}

.report-picker-arrow {
    flex: none;
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}

.report-picker-empty,
.report-picker-hint {
    margin: 1rem 0 0;
    color: var(--muted);
}

/* Header "Zgłoś ofertę" button - a call to action in .header-actions, at the right edge next to
   saved offers. A muted violet tint (not a solid fill) so it stands out without shouting. */
.header-report-btn {
    --report-violet: #a78bfa;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--report-violet) 38%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--report-violet) 14%, transparent);
    color: #d4c8fd;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.header-report-btn:hover,
.header-report-btn.is-active {
    color: #ede8ff;
    background: color-mix(in srgb, var(--report-violet) 24%, transparent);
    border-color: color-mix(in srgb, var(--report-violet) 60%, var(--border));
    transform: translateY(-1px);
}

.header-report-btn:focus-visible {
    outline: 2px solid var(--report-violet);
    outline-offset: 2px;
}

.header-report-btn svg {
    width: 14px;
    height: 14px;
}

/* Light theme: the pale violet text above would wash out on a white header - deepen it. */
:root[data-theme="light"] .header-report-btn {
    --report-violet: #7c3aed;
    color: #5b21b6;
}

:root[data-theme="light"] .header-report-btn:hover,
:root[data-theme="light"] .header-report-btn.is-active {
    color: #4c1d95;
}

/* The header row is tight on narrow screens; the side menu carries the link there. */
@media (max-width: 720px) {
    .header-report-btn {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-report-btn {
        transition: none;
    }

    .header-report-btn:hover,
    .header-report-btn.is-active {
        transform: none;
    }
}

@media (max-width: 960px) {
    .home-offers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .home-page {
        padding-top: 2.75rem;
    }

    .home-offers,
    .home-steps,
    .report-picker-list {
        grid-template-columns: 1fr;
    }

    .home-steps {
        gap: 2rem;
    }

    .home-section,
    .home-cta {
        margin-top: 3.5rem;
    }
}

@media (max-width: 560px) {
    .home-search,
    .report-picker-search {
        flex-direction: column;
        border-radius: var(--radius-lg);
    }

    .home-search-field {
        padding: 0.5rem 0.6rem;
    }

    .home-stats {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-offer,
    .home-search {
        transition: none;
    }

    .home-offer:hover {
        transform: none;
    }
}