/* upvalla theme, layered over base.css. */
/* ── Home view (body.is-home): search-first landing ────────────────────────
   The hero drops toward the middle of the screen, the feed shrinks to a few
   fresh jobs, and browse links stand in for pagination. Any search, filter or
   "See all" leaves this view, restoring the normal results layout. */
.home-browse { display: none; }

/* Suggestions under the search bar. */
.search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 5;
    padding: 6px;
    border-radius: 18px;
    background: #2b251f;
    box-shadow: inset 0 1px 0 rgba(255,240,222,0.09), 0 18px 40px -12px rgba(0,0,0,0.65);
    text-align: left;
}
.search-suggest[hidden] { display: none; }
.suggest-option {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
}
.suggest-option:hover,
.suggest-option[aria-selected="true"] { background: rgba(255,240,222,0.08); }
.suggest-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.suggest-label b { font-weight: 600; color: #fff7ea; }
.suggest-kind,
.suggest-count { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.suggest-count { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* Handwritten touches around the search bar. */
@font-face {
    font-family: 'hand';
    font-weight: 600;
    /* Block, and preloaded: the tip must never flash in the UI font on refresh. */
    font-display: block;
    src: url('/static/fonts/caveat-hand.woff2') format('woff2');
}
.brand { position: relative; }
.logo-text .hero-plane {
    position: absolute;
    left: calc(100% - 2px);
    bottom: 62%;
    width: 62px;
    height: auto;
    margin: 0;
    max-width: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
}
@media (max-width: 640px) {
    .logo-text .hero-plane { width: 44px; }
}
/* Sits in the gap the p's descender leaves under "valla", from the v to the last a. */
.brand-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -0.57em;
    padding-left: 4.5em;
    font: 600 calc(var(--word) * 0.34)/1 'hand', 'DM Sans', sans-serif;
    letter-spacing: 0.01em;
    color: rgba(255,240,222,0.92);
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.hand-tip {
    position: absolute;
    top: calc(100% + 54px);
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    white-space: nowrap;
    font-family: 'hand', 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #f6f1e8;
    text-decoration: none;
    visibility: hidden;
}
.hand-tip svg { display: none; }
.hand-tip:hover { color: var(--accent); }
body.is-home .hand-tip { visibility: visible; }
@media (min-width: 1100px) {
    .hand-tip {
        top: 26px;
        left: calc(100% + 18px);
        transform: rotate(-4deg);
        font-size: 16px;
        text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    }
    .hand-tip svg { display: inline-block; vertical-align: middle; margin-right: 5px; width: 20px; height: 15px; }
}
.person-note {
    display: none;
    font-family: 'hand', 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}
body.is-person .person-note { display: inline; }
body.is-person .stats-tip { display: none; }

/* Home feed swapping to jobs near the visitor. */
.feed-out .job-card { opacity: 0; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.feed-in .job-card { animation: feed-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.feed-in .job-card:nth-child(2) { animation-delay: 60ms; }
.feed-in .job-card:nth-child(3) { animation-delay: 120ms; }
.feed-in .job-card:nth-child(4) { animation-delay: 180ms; }
.feed-in .job-card:nth-child(5) { animation-delay: 240ms; }
.feed-in .job-card:nth-child(6) { animation-delay: 300ms; }
.feed-in .job-card:nth-child(7) { animation-delay: 360ms; }
.feed-in .job-card:nth-child(8) { animation-delay: 420ms; }
.feed-in .job-card:nth-child(9) { animation-delay: 480ms; }
.feed-in .job-card:nth-child(10) { animation-delay: 540ms; }
@keyframes feed-in { from { opacity: 0; transform: translateY(10px); } }

/* One hero for every view, so searching never moves the page. */
#hero { padding-top: calc(44px + 10vh); padding-bottom: 40px; }
body.is-home #stats-text { visibility: visible; }
body.is-home .home-browse { display: block; margin-top: 32px; }
body.is-loading .home-browse { display: none; }
body.is-home .footer-seo { margin-top: 24px; }

.home-all {
    display: block;
    margin: 0 auto 40px;
    padding: 11px 24px;
    border-radius: 999px;
    border: 1px solid rgba(255,240,222,0.14);
    background: rgba(255,240,222,0.05);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.home-all:hover { background: rgba(255,240,222,0.09); border-color: rgba(255,240,222,0.24); }

@media (max-width: 640px) {
    #hero { padding-top: calc(48px + 5vh); padding-bottom: 42px; }
}

/* ── Brighter theme ─────────────────────────────────────────────────────────
   Lifts the base from near-black to a soft charcoal and opens up the hero
   photo; the fades still blend into --bg, so they follow automatically. */
:root {
    --bg: #241f1a;
    --card-bg: rgba(255,240,222,0.055);
    --card-hover: rgba(255,240,222,0.09);
    --text: #e6e1d6;
    --text-secondary: rgba(244,238,228,0.74);
    --text-faint: rgba(244,238,228,0.34);
    --text-muted: #a49e93;
}
.job-card { border-color: rgba(255,240,222,0.10); }
.search-box {
    background:
        linear-gradient(180deg, rgba(255,240,222,0.08) 0%, rgba(255,240,222,0.02) 55%),
        rgba(21, 18, 15, 0.74);
}
.search-box:focus-within {
    background:
        linear-gradient(180deg, rgba(255,240,222,0.06) 0%, rgba(255,240,222,0.015) 55%),
        rgba(15, 13, 10, 0.82);
}
@media (min-width: 1101px) {
    .search-box {
        box-shadow: inset 0 1px 0 rgba(255,240,222,0.08), 0 6px 24px rgba(0,0,0,0.35);
    }
}

#search-container { width: 100%; max-width: 540px; margin-inline: auto; }
.hero-content { max-width: 720px; }
.search-box { min-height: 66px; border-radius: 22px; padding-right: 9px; }
.search-go {
    flex-shrink: 0;
    border: none;
    border-radius: 14px;
    padding: 13px 22px;
    background: var(--accent);
    color: #0b1f16;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.search-box .search-clear { margin-right: 12px; }
.search-go:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
    #search-container { width: 92%; }
    .search-box { min-height: 58px; border-radius: 20px; padding: 7px 7px 7px 18px; }
    .search-box .search-input { flex: 1 1 0; }
    .search-go { padding: 11px 16px; }
    .search-box .search-go { border-radius: 13px; }
}

.job-card { border-color: rgba(255,240,222,0.075); }
.job-card:hover { border-color: rgba(255,240,222,0.13); transform: translateY(-2px); }
.job-logo { filter: brightness(0.80); transition: filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.job-card:hover .job-logo { filter: brightness(1); }
.job-logo-wrapper { transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease; }
.job-card:hover .job-logo-wrapper { border-color: rgba(255,240,222,0.10); box-shadow: 0 0 0 1px rgba(255,240,222,0.06); transform: scale(1.10) rotate(-2deg); }


/* ── Refinements ── */


/* Cards lift their surface a touch on hover, not just the border. */
.job-card:hover { background: rgba(255,240,222,0.025); }


/* Search glass: clearer frost, a faint light along the top edge only, and a
   neutral lift. */
.search-box {
    -webkit-backdrop-filter: blur(40px) saturate(130%);
    backdrop-filter: blur(40px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255,240,222,0.11), 0 14px 34px -10px rgba(0,0,0,0.45);
}
.search-box:focus-within {
    box-shadow: inset 0 1px 0 rgba(255,240,222,0.11), 0 14px 34px -10px rgba(0,0,0,0.45);
}
.search-input { color: #f6f1e8; }
.search-input::placeholder { color: rgba(244,238,228,0.64); }
.search-icon svg { opacity: 0.72; }
.search-go { border-radius: 13px; }
.quick-searches { margin-top: 4px; }

/* Chips share the search bar's glass: same tint, frost, faint top light and
   neutral lift, so the hero reads as one set. Fixed height because the Remote
   toggle would otherwise make its chip taller than the rest. */
.qs-chip,
.qs-more-trigger {
    height: 32px;
    padding-block: 0;
    background:
        linear-gradient(180deg, rgba(255,240,222,0.08) 0%, rgba(255,240,222,0.02) 55%),
        rgba(21, 18, 15, 0.74);
    -webkit-backdrop-filter: blur(40px) saturate(130%);
    backdrop-filter: blur(40px) saturate(130%);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,240,222,0.11), 0 8px 20px -8px rgba(0,0,0,0.45);
    color: rgba(244,238,228,0.78);
}
.qs-chip:hover,
.qs-more-trigger:hover,
.qs-more-trigger.open {
    background:
        linear-gradient(180deg, rgba(255,240,222,0.11) 0%, rgba(255,240,222,0.03) 55%),
        rgba(28, 24, 20, 0.80);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,240,222,0.13), 0 8px 20px -8px rgba(0,0,0,0.45);
    color: #f6f1e8;
}
.qs-chip.active,
.qs-more-trigger.active {
    background:
        linear-gradient(180deg, rgba(255,240,222,0.16) 0%, rgba(255,240,222,0.06) 55%),
        rgba(37, 33, 28, 0.86);
    border-color: transparent;
    color: #f6f1e8;
}


/* Card metadata in plain sentence case, matching the rest of the page. */
.job-company {
    font-size: 13px;
    font-weight: 500;
    color: rgba(244,238,228,0.68);
    text-transform: none;
    letter-spacing: 0;
}
.job-card-label {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.stats-tip { font-family: inherit; font-size: 12px; letter-spacing: 0; color: rgba(244,238,228,0.52); }
@media (max-width: 640px) {
    .job-company { font-size: 12px; }
}

/* Open/Filled switch in the stats bar, in the search bar's glass.
   Hidden for now; `?view=filled` still works. Restore with inline-flex. */
.board-tabs {
    display: none;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,240,222,0.08) 0%, rgba(255,240,222,0.02) 55%),
        rgba(21, 18, 15, 0.74);
    box-shadow: inset 0 1px 0 rgba(255,240,222,0.11);
}
.board-tab {
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(244,238,228,0.66);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.board-tab:hover { color: #f6f1e8; }
.board-tab.active { background: rgba(255,240,222,0.12); color: #f6f1e8; }
.job-apply-filled { color: rgba(244,238,228,0.51); }

/* Pay sits beside Apply as its own figure (see jobCardHtml). */
.job-cta { gap: 16px; }
.job-pay .job-salary { color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.job-pay .job-salary.nd { display: none; }
.job-pay .job-salary::before { content: none; }
.job-pay .est-mark { font-size: 10px; margin-left: 3px; }


/* Footer in the manner of apple.com: a full-width band a shade darker than
   the page, dense small-type columns, grey links that brighten and underline
   on hover, and a hairline legal row with thin separators. The job counts
   are injected by main.js (injectSeoCounts). */
.footer-seo {
    margin-top: 72px;
    background: #1d1814;
    border-top: 1px solid rgba(255,240,222,0.07);
    color: #a09a90;
    font-size: 12px;
    line-height: 1.33;
}
body.is-home .footer-seo { margin-top: 56px; }
.footer-seo .fa-inner { max-width: 980px; padding: 0 22px; }
.footer-seo .fa-notes {
    padding: 20px 0 16px;
    border-bottom: 1px solid #37332e;
    color: #8d877d;
}
.footer-seo .fa-notes p { margin: 0 0 8px; }
.footer-seo .fa-notes p:last-child { margin-bottom: 0; }
.footer-seo .fa-notes em { font-style: normal; color: #a09a90; }
.footer-seo .fa-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 24px;
    padding: 22px 0 26px;
    border-top: none;
}
.footer-seo .fa-col h3 {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ebe6dc;
}
.footer-seo .fa-col li { margin: 0 0 8px; }
.footer-seo .fa-col a {
    display: inline;
    font-size: 12px;
    line-height: 1.33;
    color: #a09a90;
    text-decoration: none;
}
.footer-seo .fa-col a:hover { color: #f6f1e8; text-decoration: underline; }
.footer-seo .seo-n {
    margin-left: 5px;
    font-size: 11px;
    color: #7c766b;
}
.footer-seo .seo-chip:hover .seo-n { color: #a09a90; }
.footer-seo .fa-bottom {
    padding: 12px 0 18px;
    border-top: 1px solid #37332e;
    font-size: 12px;
    color: #8d877d;
}
.footer-seo .fa-cookies { color: #a09a90; font-size: 12px; }
.footer-seo .fa-cookies:hover { color: #f6f1e8; text-decoration: underline; }
.fa-sep {
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 9px;
    vertical-align: -1px;
    background: #424245;
}
@media (max-width: 900px) {
    .footer-seo .fa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
    .footer-seo .fa-col { padding: 0; border-bottom: none; }
}

/* ── Type pass ──
   One face for the UI (DM Sans; the wordmark keeps its rounded face) on a
   short scale: 11 / 12 / 13 / 15 / 18px. Small UI text is untracked. */
.qs-chip,
.qs-more-option,
.board-tab,
.home-all,
.fa-cookies { font-family: inherit; }
.qs-chip { font-size: 12px; letter-spacing: 0; }
#search-input,
#active-filters { font-size: 19px; }
.job-title { font-size: 18px; letter-spacing: -0.015em; }
.job-company,
.job-pay .job-salary { font-size: 13px; }
.job-ago { font-size: 12px; letter-spacing: 0; }
.job-card-label { font-size: 12px; }
.job-apply { letter-spacing: 0; }
.est-mark,
.job-pay .est-mark { font-size: 11px; letter-spacing: 0; }
@media (max-width: 640px) {
    #search-input { font-size: 18px; }
    #search-input::placeholder { font-size: 16px; }
    .job-title { font-size: 17px; }
    .job-company { font-size: 12px; }
    .job-ago,
    .job-card-label { font-size: 11px; }
}

/* Slightly larger company logos on desktop, still centred on the card's left
   border (-(card padding 20px + half of 42px)). Phones keep 36px: the mobile
   gutter rule in base.css is balanced for that overhang. */
@media (min-width: 641px) {
    .job-logo-wrapper {
        width: 42px;
        height: 42px;
        border-radius: 15px;
        margin-left: -41px;
        margin-right: 19px;
    }
    .job-logo { width: 80%; height: 80%; border-radius: 10px; }
}

/* Footer sits on the page itself: same background, no band or top rule; it
   runs wider than the job list to give its columns room. Inner rules are the
   card hairline tone. */
.footer-seo {
    background: transparent;
    border-top: none;
}
.footer-seo .fa-inner { max-width: min(88vw, 1080px); padding: 0 30px; }
.footer-seo .fa-notes { border-top: 1px solid rgba(255,240,222,0.07); border-bottom-color: rgba(255,240,222,0.07); }
.footer-seo .fa-bottom { border-top-color: rgba(255,240,222,0.07); }
@media (max-width: 640px) {
    .footer-seo .fa-inner { padding: 0 18px; }
}

/* Places runs in two columns, so the footer grid gives it two tracks. */
.footer-seo .fa-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.footer-seo .fa-col-wide { grid-column: span 2; }
.footer-seo .fa-col-wide ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(10, auto);
    grid-auto-flow: column;
    column-gap: 24px;
}
@media (max-width: 900px) {
    .footer-seo .fa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nothing shifts while the page fills in: the stats bar keeps one height in
   every view and holds its place while loading (instead of disappearing),
   and the home view reserves the space of its ten cards, so it shows no
   loader and the cards land without moving anything. */
.stats-bar { min-height: 28px; }
body.is-loading #stats-bar { display: flex !important; visibility: hidden; }
body.is-home #job-grid { min-height: 912px; }
@media (max-width: 640px) {
    body.is-home #job-grid { min-height: 0; }
}

/* The thousands comma pops in with the digits so it never shows alone. */
.t-digit-group.is-animating .t-sep { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; animation-delay: calc(var(--digit-stagger) * 2); }
@media (prefers-reduced-motion: reduce) {
    .t-digit-group .t-sep { animation: none !important; }
}

/* Phones: the full feed's stats bar (count, Open/Filled, tip) can't fit one
   row, and as a flex item the main column would grow to its min-content and
   scroll sideways. Drop the tip, let the bar wrap, and pin the column to the
   viewport. */
@media (max-width: 640px) {
    #main-container { min-width: 0; max-width: 100%; }
    .stats-tip { display: none; }
    .stats-bar { flex-wrap: wrap; row-gap: 6px; }
    .stats-controls { margin-right: 0; }
}