@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-700.woff2') format('woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* THE background knob — body, hero fade gradients, glass panels and the
       neural-bg.js canvas overlays all derive from this one variable
       (canvas reads it at runtime via getComputedStyle). */
    --bg: #111111;
    --bg2: var(--bg);
    --card-bg: rgba(255,255,255,0.04);
    --card-hover: rgba(255,255,255,0.07);
    --text: #c3c2b7;
    --text-secondary: rgba(255,255,255,0.55);
    --text-muted: rgba(255,255,255,0.35);
    --text-faint: rgba(255,255,255,0.22);
    --accent: #34d399;
    --search-bg: rgba(255,255,255,0.04);
    --search-border: rgba(255,255,255,0.07);
    --search-border-focus: rgba(255,255,255,0.15);
    --search-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 18px rgba(0,0,0,0.5);
    --search-shadow-focus: 0 1px 4px rgba(0,0,0,0.5), 0 8px 30px rgba(0,0,0,0.6);
    --divider: rgba(255,255,255,0.08);
    --footer-border: rgba(255,255,255,0.06);
    --pagination-border: rgba(255,255,255,0.08);
    --pagination-hover-bg: rgba(255,255,255,0.06);
    --pagination-hover-border: rgba(255,255,255,0.12);
    --pagination-hover-text: #f5f5f7;
    --logo-shadow: 0px 2px 6px rgba(0,0,0,.4);
    --logo-shadow-hover: 0px 4px 12px rgba(0,0,0,.5);
    --logo-filter: opacity(1);
    --logo-filter-hover: opacity(1);
    --job-title-color: #f5f5f7;
    --job-location-color: var(--text-muted);
    --star-color: var(--text-muted);
}

/* Reserve the scrollbar gutter so result-count changes between searches
   don't toggle the scrollbar and visibly resize the whole layout. */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg2);
    color: var(--text);
    line-height: 1.5;
    /* Sticky-footer layout: while the job list loads (grid empty), the main
       column stretches so the footer stays below the fold instead of
       flashing up into view and jumping back down once jobs render. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The stretchable middle: the job-feed column grows, footer pins to the
   bottom. Hero keeps its natural height. */
#main-container {
    flex-grow: 1;
}


a {
    text-decoration: none;
    color: inherit;
}

.site-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 380px;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* HERO SECTION WITH SMOOTH TRANSITION (NO BLUR) */
#hero {
    position: relative;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 72px 0 32px;
    transition: background-color 0.2s;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('bgbg.webp');
    background-size: cover;
    background-position: 50% 25%;
    background-repeat: no-repeat;
    image-rendering: auto;
    /* Stronger blur for real depth-of-field; saturate+brightness compensate
       for the darkening/desaturation that filter:blur() inherently introduces. */
    filter: blur(5px) saturate(1.2) brightness(1.2);
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'><defs><filter id='b' x='-20%25' y='-20%25' width='140%25' height='160%25'><feGaussianBlur stdDeviation='50'/></filter></defs><path d='M-250,-300 L1250,-300 L1000,240 C950,500 50,500 0,240 Z' fill='white' filter='url(%23b)'/></svg>");
    -webkit-mask-size: 120% 120%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'><defs><filter id='b' x='-20%25' y='-20%25' width='140%25' height='160%25'><feGaussianBlur stdDeviation='50'/></filter></defs><path d='M-250,-300 L1250,-300 L1000,240 C950,500 50,500 0,240 Z' fill='white' filter='url(%23b)'/></svg>");
    mask-size: 120% 120%;
    mask-repeat: no-repeat;
    z-index: 1;
}

/* Tilt-shift: sharp focus band layered on top of the blurred .hero-bg.
   Same image + position so the sharp band registers exactly with the blur. */
.hero-tilt-shift {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('bgbg.webp');
    background-size: cover;
    background-position: 50% 25%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    /* Soft falloff for a premium depth-of-field feel.
       Sharp focus ends at 25%, fully blurred by 55%. */
    -webkit-mask-image: linear-gradient(to bottom,
        black 0%,
        black 25%,
        rgba(0,0,0,0.6) 40%,
        transparent 55%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        black 0%,
        black 25%,
        rgba(0,0,0,0.6) 40%,
        transparent 55%,
        transparent 100%);
}

.hero-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 58% 68% at 50% 20%, transparent 0%, transparent 25%, color-mix(in srgb, var(--bg) 30%, transparent) 55%, color-mix(in srgb, var(--bg) 90%, transparent) 100%),
        linear-gradient(to right, color-mix(in srgb, var(--bg) 15%, transparent) 0%, transparent 18%, transparent 82%, color-mix(in srgb, var(--bg) 15%, transparent) 100%),
        linear-gradient(to bottom, transparent 20%, color-mix(in srgb, var(--bg) 20%, transparent) 40%, color-mix(in srgb, var(--bg) 70%, transparent) 70%, var(--bg2) 100%),
        radial-gradient(ellipse 50% 42% at 50% 95%, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 100%);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 600px;
    text-align: center;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 0;
    overflow: visible;
}

#logo {
    margin-top: 5px;
    margin-bottom: -5px;
    overflow: visible;
    width: 100%;
}

.logo-text {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-bottom: -22px;
    line-height: 0;
}

.logo-text img {
    display: block;
    width: 272px;
    height: 101px;
    filter:
        drop-shadow(0 4px 12px rgba(0,0,0,0.4))
        drop-shadow(0 1px 2px rgba(255,255,255,0.1));
}


#search-container {
    position: relative;
    z-index: 100;
    width: 80%;
}

.search-box {
    /* liquid glass: neutral dark base, frosted (restored from 2cdf1c5a~1) */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 55%),
        rgba(14, 14, 14, 0.82);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-radius: 20px;
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0,0,0,0.3);


    display: flex;
    align-items: center;
    padding: 8px 20px 8px 24px;
    margin-bottom: 14px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}


.search-box:focus-within {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.01) 55%),
        rgba(10, 10, 10, 0.88);
}

.search-icon {
    display: flex;
    align-items: center;
    margin-right: 16px;
    flex-shrink: 0;
    color: #999;
}

/* Tagline under the search bar */
.hero-tagline {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.hero-tagline strong {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 19px;
    color: var(--text);
    padding: 10px 0;
    font-family: inherit;
    background: transparent;
}

.search-input::placeholder {
    color: rgba(255,255,255,0.42);
}

.search-box.has-pills .search-input::placeholder {
    color: transparent;
}

.search-clear {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.10);
    border: none;
    padding: 4px;
    margin-right: 4px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.search-clear:hover {
    color: #fff;
    background: rgba(255,255,255,0.18);
}

#active-filters {
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 2px;
    font-size: 19px;
    color: var(--text);
}
#active-filters:empty { display: none; }

/* Active filters render as plain typed-looking text (e.g. "software, remote,").
   Each term stays clickable to remove it; the commas are inert separators. */
.filter-text {
    cursor: pointer;
    transition: color 0.15s ease;
}
.filter-text:hover {
    color: var(--accent);
    text-decoration: line-through;
}
.filter-comma {
    color: var(--text);
    cursor: default;
}

.quick-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    width: 900px;
    max-width: 90vw;
}

.qs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px 7px 12px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 100px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.qs-chip svg {
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.qs-chip:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.73);
    border-color: rgba(255,255,255,0.13);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.qs-chip:hover svg {
    opacity: 0.85;
}

.qs-chip:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Selected chip — lit with the accent so the active one reads at a glance.
   Single selection: clicking another chip swaps; clicking the active one clears. */
.qs-chip.active {
    background: rgba(155,139,245,0.16);
    border-color: rgba(155,139,245,0.45);
    color: #fff;
    position: relative;
}

.qs-chip.active svg {
    opacity: 1;
}

/* MAIN CONTAINER */

#main-container {
    max-width: 1000px;
    margin: 14px auto 0;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

.content-layout {
    display: flex;
    gap: 40px;
    padding-top: 0;
}

.jobs-column {
    flex: 2.8;
    min-width: 0;
    position: relative;
}
.jobs-column::before {
    display: none;
    content: '';
    position: absolute;
    top: 0;
    left: -30px;
    right: -10px;
    height: 90px;
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

.stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    z-index: 11;
}

#stats-text {
    display: inline;
}

/* Start page: the "X jobs" count is noise on the landing view — hide it there
   on mobile. On desktop there's room, so keep it visible. */
#stats-text.default-view {
    visibility: hidden;
}
@media (min-width: 641px) {
    #stats-text.default-view {
        visibility: visible;
    }
}

.stat-count {
    font-weight: 600;
    color: var(--text-secondary);
}

/* Transitions.dev — Number pop-in (digits of .stat-count stagger in).
   Replay: rebuild the digits fresh with .is-animating on the group. */
:root {
    --digit-dur: 500ms;
    --digit-distance: 8px;
    --digit-stagger: 70ms;
    --digit-blur: 2px;
    --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
    --digit-dir-x: 0;
    --digit-dir-y: 1;
}

@keyframes t-digit-pop-in {
    0% {
        transform: translate(
            calc(var(--digit-distance) * var(--digit-dir-x)),
            calc(var(--digit-distance) * var(--digit-dir-y))
        );
        opacity: 0;
        filter: blur(var(--digit-blur));
    }
    100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
    display: inline-flex;
    align-items: baseline;
}
.t-digit {
    display: inline-block;
    will-change: transform, opacity, filter;
}
/* Thousand-group separator in the number pop-in ("225 000"): fixed-width box,
   so the count looks identical regardless of font metrics for the space. */
.t-sep {
    display: inline-block;
    width: 0.4em;
    overflow: hidden;
}
.t-digit-group.is-animating .t-digit {
    animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
/* Generic stagger: --digit-n comes inline from statCountHtml() in main.js */
.t-digit-group.is-animating .t-digit[data-stagger] {
    animation-delay: calc(var(--digit-stagger) * var(--digit-n));
}

@media (prefers-reduced-motion: reduce) {
    .t-digit-group .t-digit { animation: none !important; }
}


/* The "+" joining a chip and a manual search in the stats echo
   ("20 jobs for ⚡ Software + react"). */
.search-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
    display: none;
}
@media (min-width: 641px) {
    .search-time { display: inline; }
}

/* ── Loading spiral ───────────────────────────────────────────────────────── */
.loading-spiral {
    width: 40px;
    height: 40px;
    border: 3px dashed rgba(255,255,255,0.12);
    border-radius: 50%;
    margin: 48px auto;
    animation: spiralSpin 4s linear infinite, spiralPulse 4s ease-in-out infinite;
}
@keyframes spiralSpin {
    to { transform: rotate(360deg); }
}
@keyframes spiralPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(180deg); }
}

/* JOB GRID */

.job-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 32px;
    padding-left: 4px;
    padding-right: 4px;
}

/* ── Stats-bar controls ─────────────────────────────────────────────────────
   The sort dropdown lives here (#sort-dd). */
.stats-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Custom sort dropdown — springy chevron, pop-open menu, sliding checkmarks,
   cyan "non-default" dot on the trigger. */
.sort-dd {
    position: relative;
}

.sort-dd-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px 0 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.58);
    background-color: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.sort-dd-btn:hover {
    color: rgba(255,255,255,0.78);
    background-color: rgba(255,255,255,0.05);
}

.sort-dd-btn:active { transform: scale(0.96); }
.sort-dd-btn:focus-visible { outline: none; color: #22d3ee; }

.sort-dd.open .sort-dd-btn {
    color: rgba(255,255,255,0.9);
    background-color: rgba(255,255,255,0.07);
}

/* Cyan dot — appears only while a non-default sort is active (closed state cue). */
.sort-dd-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 6px rgba(34,211,238,0.7);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.sort-dd-btn:not([data-value="recent"]) .sort-dd-dot {
    transform: scale(1);
    opacity: 1;
}

.sort-dd-chev {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sort-dd.open .sort-dd-chev { transform: rotate(180deg); }

.sort-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 138px;
    padding: 4px;
    background: rgba(17,18,22,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sort-dd.open .sort-dd-menu {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.sort-dd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    text-align: left;
    color: rgba(255,255,255,0.68);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.13s ease, color 0.13s ease, padding-left 0.13s ease;
}

.sort-dd-opt:hover {
    color: rgba(255,255,255,0.92);
    background-color: rgba(255,255,255,0.06);
    padding-left: 13px;
}

.sort-dd-opt:focus-visible { outline: none; color: #fff; background-color: rgba(255,255,255,0.08); }

.sort-dd-opt svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: #22d3ee;
    opacity: 0;
    transform: translateX(-4px) scale(0.6);
    transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sort-dd-opt.selected { color: rgba(255,255,255,0.92); }

.sort-dd-opt.selected svg {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.job-card {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 16px 20px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease;
    min-width: 0;
    /* Perf note: `content-visibility: auto` was tried here and REVERTED — it
       implies paint containment, which clips anything painted outside the
       card's border box, i.e. the hanging company logo. `contain: layout
       style` keeps the layout-isolation half of the win with no clipping. */
    contain: layout style;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Flat cards: no fill at rest or on hover — hover only lights up the
   border (plus the gentle lift). */
.job-card:hover {
    background: transparent;
    border-color: rgba(255,255,255,0.28);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Zebra rows: even rows stay completely bare — no hairline at rest and no
   border reveal on hover either; they respond with lift/shadow and the
   Apply crossfade only. (This rule outranks .job-card:hover.) */
.job-grid > .job-card:nth-child(even) { background-color: transparent; border-color: transparent; }

.job-logo-wrapper {
    width: 38px;
    height: 38px;
    background: transparent;
    padding: 0px;
    border-radius: 14px;
    box-shadow: var(--logo-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease;
    flex-shrink: 0;
    /* Straddles the card's left border dead-center: pulled left by the
       card's 20px padding plus half the 38px wrapper. */
    margin-left: -39px;
    margin-right: 18px;
}

.job-logo-wrapper:hover {
    box-shadow: var(--logo-shadow-hover);
    transform: scale(1.16) rotate(-2deg);
}

.job-logo {
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 10px;
}

.job-info {
    flex: 1;
    margin-left: 0;
    min-width: 0;
}

.job-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 8px;
}

.job-company {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.job-location {
    display: inline-block;
    color: rgba(255,255,255,0.50);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-location::before {
    content: "· ";
    margin-right: 4px;
    opacity: 0.5;
}

/* Highlighted query words in result cards. Tinted with the theme accent and a
   faint background instead of the default jarring yellow; box-decoration-break
   keeps the pill intact when a long title wraps. */
mark.hl {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: #fff;
    border-radius: 4px;
    padding: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.job-title {
    font-family: 'Inter', sans-serif;
    font-size: 18.5px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.018em;
    line-height: 1.3;
    transition: color 0.2s ease;
    /* Keep long titles on one line so they never reach the Apply button —
       ellipsis instead of wrapping. On mobile the Apply button is hidden and
       titles can wrap naturally, so truncation is scoped to desktop only. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .job-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

.job-card:hover .job-title {
    color: #ffffff;
}

.job-new {
    display: inline-block;
    flex-shrink: 0;
    color: #4ade80;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}

.job-new::before {
    content: "· ";
    margin-right: 4px;
    color: rgba(255,255,255,0.15);
}

/* Compensation — inline in the card header, right before the time-ago chip.
   Small muted style matching the header metadata row. */
.job-card-header .job-salary {
    color: rgba(255,255,255,0.40);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.job-card-header .job-salary::before {
    content: "· ";
    margin-right: 4px;
    color: rgba(255,255,255,0.15);
}

.job-salary.nd {
    color: rgba(255,255,255,0.46);
    font-weight: 500;
    font-size: 12px;
}

/* Estimates: inline "est" suffix — no floating tag needed. */
.est-mark {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(255,255,255,0.48);
    margin-left: 2px;
}

/* Right side of the card: ghost Apply button, visible on hover. */
.job-cta {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
}
.job-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 19px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 9px;
    color: rgba(255,255,255,0.62);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease;
}
.job-apply:hover {
    border-color: rgba(255,255,255,0.30);
    color: #fff;
}
.job-apply:active {
    border-color: rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.80);
}


/* LIVE PILL — floating "+N new jobs" indicator that suggests live scraping */

.job-grid-wrap {
    position: relative;
}


.live-pill {
    position: absolute;
    top: -50px;
    left: 50%;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 8px 18px 8px 14px;
    background: rgba(28, 28, 28, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-radius: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 16px);
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
        background 0.2s ease;
}

.live-pill.visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.live-pill:hover {
    background: rgba(36, 36, 36, 0.95);
}

.live-pill-logos {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.live-pill-logo {
    width: 42px;
    height: 42px;
    border-radius: 18px;
    background: #2a2a2a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: -16px;
    opacity: 0;
    transform: translateY(4px) scale(0.85);
    animation: liveLogoIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.live-pill-logo:nth-child(1) { animation-delay: 0.05s; }
.live-pill-logo:nth-child(2) { animation-delay: 0.15s; }
.live-pill-logo:nth-child(3) { animation-delay: 0.25s; z-index: 0; }
.live-pill-logo:last-child  { margin-right: 0; }

.live-pill-logo img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 14px;
}

@keyframes liveLogoIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.live-pill-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #c0c0c0;
    margin-left: 16px;
    letter-spacing: 0.01em;
}

/* PAGINATION */

.pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pag-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--pagination-border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pag-btn:hover {
    background: var(--pagination-hover-bg);
    border-color: var(--pagination-hover-border);
    color: var(--pagination-hover-text);
}

.pag-btn.pag-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: default;
}

.pag-btn.pag-prev,
.pag-btn.pag-next {
    font-size: 18px;
    padding: 0 8px;
    min-width: 32px;
}

.pag-dots {
    color: var(--text-muted);
    font-size: 14px;
    padding: 0 4px;
    user-select: none;
}

/* FOOTER */

.footer-rich {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 28px;
    max-width: 1160px;
    margin: 48px auto 32px;
    padding: 20px 30px 0;
    border-top: 1px solid var(--footer-border);
}

.footer-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.footer-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.footer-meta span {
    margin: 0 8px;
    opacity: 0.6;
}

.footer-credit {
    font-size: 12px;
    color: var(--text-muted);
}

.footer-credit a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.footer-credit a:hover {
    color: var(--text);
}

/* SEO FOOTER — Apple-style directory: full-width quiet panel, dense
   text-link columns over a barely-lifted background, hairline legal bar.
   Links keep the .seo-chip hook (click interception + count injection in
   main.js) but render as plain quiet text. Counts read as small muted
   numbers after the label instead of pills. */
.footer-seo {
    margin-top: 80px;
}

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

.fa-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

.fa-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    padding: 30px 0 32px;
    /* Hairline matches the legal-bar rule: contained to the column width,
       not bleeding edge-to-edge. */
    border-top: 1px solid rgba(255,255,255,0.06);
}

.fa-col { min-width: 0; }

.fa-col h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(255,255,255,0.78);
}

.fa-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fa-col li {
    margin: 0 0 9px;
}

.seo-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.15s ease;
}

.seo-chip:hover {
    color: rgba(255,255,255,0.85);
    text-decoration: underline;
}

/* Live result count (injected by main.js) — a quiet number, not a badge. */
.seo-n {
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums;
}

.seo-chip:hover .seo-n {
    color: var(--accent);
    text-decoration: none;
}

.fa-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 16px 0 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

.fa-bottom p { margin: 0; }

.fa-bottom a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
}

.fa-bottom a:hover {
    text-decoration: underline;
    color: rgba(255,255,255,0.85);
}

/* yodatoshi bunny (ASCII favicon, inlined) — sits at the right corner. */
.fa-bunny {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.4);
    transition: color 0.15s ease, transform 0.2s ease;
}

.fa-bunny:hover {
    color: rgba(255,255,255,0.9);
    transform: translateY(-1px);
}

/* Sleeping by default (( -.-)), wakes up on hover (( o.o)) — crossfade
   between the two stacked face lines. */
.fa-bunny .face-asleep,
.fa-bunny .face-awake {
    transition: opacity 0.18s ease;
}

.fa-bunny .face-awake { opacity: 0; }

.fa-bunny:hover .face-awake { opacity: 1; }
.fa-bunny:hover .face-asleep { opacity: 0; }

@media (max-width: 900px) {
    .footer-seo { margin-top: 56px; }
    .fa-cols {
        grid-template-columns: 1fr;
        padding: 20px 0 8px;
    }
    .fa-col {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .fa-col:last-child { border-bottom: none; }
    .fa-bottom { flex-direction: column; align-items: flex-start; }
}

/* MOBILE RESPONSIVE */

@media (max-width: 1100px) {
    .content-layout {
        flex-direction: column;
    }
    .job-grid {
        grid-template-columns: 1fr;
    }
    #main-container {
        padding: 0 40px;
    }

    #logo {
    margin-top: -20px;
    }

}

/* ── Mobile ≤640px (after 1100px block to win cascade) ────────────────────── */
@media (max-width: 640px) {
    #hero { padding: 48px 0 20px; }
    .hero-content { padding: 0 8px; }
    #logo { margin-top: 0; }
    .logo-text { font-size: 56px; letter-spacing: -0.05em; margin-bottom: 12px; }
    /* "3d ago" chips crowd the tight mobile header — hide them there. */
    .job-new { display: none; }
    .job-cta { display: none; }
    #search-container { width: 80%; }
    .search-input { font-size: 16px; }
    .search-box { padding: 6px 16px 6px 18px; }

    .quick-searches { gap: 6px; margin-top: 12px; }
    .qs-chip { padding: 5px 11px; font-size: 11.5px; gap: 5px; }
    .qs-chip svg { width: 12px; height: 12px; }
    .qs-chip:nth-child(n+4) { display: none; }

    /* MOBILE CARD GUTTER RULE — read before touching.
       The hanging company logos stick out 18px to the LEFT of each job card
       (see .job-logo-wrapper margin-left: -34px below, which overhangs past
       the card's 16px padding). So the left container padding is deliberately
       LARGER than the right (32px vs 14px): logos then sit 18px from the
       screen edge, matching the 18px of empty space on the right of the card.
       Net effect — the card div is 36px from the left edge, 18px from the
       right, so the VISIBLE empty space is equal on both sides.
       DO NOT "fix" this back to symmetric padding: with equal padding the
       logos land flush against the left screen edge (0px gap) and the board
       looks lopsided. If the logo overhang ever changes, rebalance so that
       leftPadding − logoOverhang == rightPadding + 4px grid gutter. */
    #main-container { padding: 0 14px 0 32px; margin-top: 4px; max-width: none; }
    .job-grid { gap: 12px; }
    .stats-bar { padding-left: 2px; margin-bottom: 6px; }

    /* Near-desktop proportions: same hanging-logo structure as the default
       styles, scaled down just enough for one-hand use. */
    .job-card { padding: 15px 16px; border-radius: 18px; }
    .job-logo-wrapper {
        width: 36px; height: 36px;
        /* Straddle the card border dead-center: -(card padding 16px + half of 36px) */
        margin-left: -34px; margin-right: 14px;
        border-radius: 13px;
    }
    .job-logo { border-radius: 9px; }
    .job-title { font-size: 17px; }
    .job-company { font-size: 11px; }
    .job-location { font-size: 10.5px; }
    .job-card-header { gap: 9px; margin-bottom: 7px; }

    /* Deep pages render up to 9 pagination buttons; on narrow screens that
       row is wider than the viewport, so let it wrap instead of scrolling
       horizontally (and trim button chrome to fit more on one line). */
    .pagination { flex-wrap: wrap; gap: 8px 6px; padding: 0 4px; }
    .pag-btn { min-width: 34px; height: 34px; padding: 0 8px; }
    .pag-btn.pag-prev, .pag-btn.pag-next { min-width: 30px; }
    .pag-dots { padding: 0 2px; }

    .pagination { margin-top: 20px; }
}