/* * seo.css — shared stylesheet for all server-rendered SEO pages (seo.ts). * * Page types and their body classes: * (none) — listing pages: cluster, taxonomy, country, research, company list * pg-co — company jobs page (slightly wider, has section labels) * pg-browse — /browse and /jobs/{category}/{role} (sticky header, search UI) * pg-jd — individual job detail page (two-column layout, white bg) * pg-gone — job-gone / 404 page (centered, minimal) * * Unification status: * SHARED (no override needed): color tokens, font stack, header chrome, brand, * footer, breadcrumb, .cta block, ul.jobs, .loc, .count, .crumb, .tip, etc. * * INTENTIONALLY DIFFERENT per page type: * --bg / --line JD is white (#fff / #e8ebf1) — reading mode; * others use near-white (#f8fafc / #e2e8f0) — scanning mode. * body line-height JD=1.65 (long-form text), browse=1.55 (dense lists), listing=1.6. * .wrap width JD=1060px (two-column), browse/co=860px, listing=820px. * header sticky Only browse — listing/JD have fixed apply-bar or breadcrumb instead. * h1 margin/lh JD has breadcrumb above it (tight margin); listing has open space. * browse h1 size 25px vs 27px — browse is denser, h1 competes with search row. * * KNOWN OVERLOAD: * .cta listing pages: full-width gradient "Put your search on autopilot" block. * browse pages: .hbtns .cta = small pill button in the header. * Same class, two completely different elements. Kept as-is because * .hbtns .cta has higher specificity and they never appear on the same page. */ /* Geist Variable — display/heading font. Self-hosted CDN (jsDelivr/Fontsource mirror of Vercel's open-source Geist font), latin subset only (English site). font-display:swap so headings never block on it — falls back to the same system stack --font-sans/body already uses until it loads. */ @font-face { font-family: 'Geist Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@5.3.0/latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ═══════════════════════════════════════════════════════ TOKENS — change once, applies everywhere ═══════════════════════════════════════════════════════ */ :root { /* Color */ --ink: #0f172a; /* body text */ --muted: #64748b; /* secondary text, labels */ --accent: #2563eb; /* links, buttons, active states */ --line: #e2e8f0; /* borders, dividers */ --bg: #fff; /* page background */ --surface: #fff; /* content surface: panels, cards, job pages */ --surface2: #f8fafc; /* subtle panel: kanban columns, ghost buttons */ --accent-bg:#eff6ff; /* light accent tint: avatars, sign-in banners, active chips */ --green: #16a34a; /* success: "Saved ✓", connected states */ /* Map canvas */ --map-you: #e11d48; /* "You are here" position marker */ /* Monospace — diff viewer (.ap-diff), CV extraction preview (.cv-extract-pre), password cells (.ats-td--pw). Falls back cleanly to system mono if the webfont link isn't present on a given page (see board.html / profile.html). */ --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Headings — same fallback chain as body's Inter so there's no layout jump while the webfont loads. */ --font-display: 'Geist Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Font scale — edit here to resize all text globally */ --fz-2xs: 14px; /* micro: uppercase labels, badge counts */ --fz-xs: 15px; /* small: chips, row metadata, filter labels */ --fz-sm: 16px; /* secondary: nav, footer, breadcrumbs */ --fz-md: 17px; /* default body: subtitles, card details */ --fz-lg: 18px; /* medium: search inputs, job list rows */ --fz-xl: 19px; /* large: body base, JD reading text, intro */ --fz-2xl: 22px; /* sub-heading */ --fz-3xl: 26px; /* heading: cluster h1 */ --fz-4xl: 30px; /* page heading: browse h1, logo fallback */ --fz-5xl: 32px; /* hero: main h1, JD h1 */ } /* ═══════════════════════════════════════════════════════ SHARED CHROME — header, brand, footer, body reset ═══════════════════════════════════════════════════════ */ * { box-sizing: border-box } body { margin: 0; font-family: -apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size: var(--fz-xl); line-height: 1.6; color: var(--ink); background: var(--bg) } a { color: var(--accent); text-decoration: none } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display) } /* .wrap is the main content column; width varies by page type (see pg-* overrides below) */ .wrap { max-width: 820px; margin: 0 auto; padding: 0 20px } header.site { border-bottom: 1px solid var(--line); background: #fff } header.site .wrap { display: flex; align-items: stretch; justify-content: space-between; height: 56px } .brand { font-weight: 800; letter-spacing: -.3px; color: var(--ink); text-decoration: none; display: flex; align-items: center } .brand span { color: var(--accent) } .site-nav { display: flex; margin: 0 auto } /* centered between the logo and the right-side actions */ .site-nav a { display: flex; align-items: center; gap: 5px; padding: 0 14px; font-size: var(--fz-sm); font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s } .site-nav a svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round } .site-nav a:hover { color: var(--ink) } .site-nav a.on { color: var(--accent); border-bottom-color: var(--accent) } /* Bin: a muted icon-only link floated to the right (secondary to Search/Board, out of the way) */ .nav-applies { font-size: 13px; font-weight: 600; color: #2563eb; white-space: nowrap } .nav-applies--loading { color: var(--muted) } .site-bin { display: flex; align-items: center; padding: 0 14px; color: var(--muted); text-decoration: none } .site-bin svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round } .site-bin:hover { color: var(--ink) } .site-bin.on { color: var(--accent) } /* footer border is consistent everywhere — visual anchor for the page bottom */ footer { color: var(--muted); font-size: var(--fz-sm); text-align: center; padding: 28px 0; border-top: 1px solid var(--line); margin-top: 24px } footer a { color: var(--muted) } /* ═══════════════════════════════════════════════════════ LISTING PAGES — shared by cluster, taxonomy, country, research, company list All use the base .wrap (820px) and default body styles above. ═══════════════════════════════════════════════════════ */ h1 { font-size: var(--fz-5xl); letter-spacing: -.5px; margin: 26px 0 4px } .count { color: var(--muted); font-size: var(--fz-sm); margin-bottom: 18px } .intro { color: #334155; font-size: var(--fz-xl); margin: 0 0 8px } /* optional lead-in sentence under h1 */ /* breadcrumb trail (cluster + taxonomy browse pages) */ .crumb { font-size: var(--fz-sm); color: var(--muted); margin: 22px 0 2px } .crumb a { color: #475569 } .crumb span { color: var(--ink); font-weight: 600 } /* current page segment */ /* job list — same markup on all listing pages */ ul.jobs { list-style: none; padding: 0; margin: 0 } ul.jobs li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--fz-lg) } ul.jobs li a { font-weight: 600 } .loc { color: var(--muted); font-size: var(--fz-sm) } /* location tag inside list items */ /* .co = company name in listing rows (colour only; font-size inherits from li). NOTE: JD page also uses .co but for the company subtitle — scoped under body.pg-jd below. */ .co { color: #334155 } .links { font-size: var(--fz-sm); color: var(--muted); margin: 22px 0; line-height: 2 } .links a { color: #475569 } .employers { font-size: var(--fz-sm); color: var(--muted); margin: 10px 0 18px; line-height: 2 } /* research page */ .employers a { color: #475569 } /* section-label — uppercase eyebrow used on company page ("Top hiring companies") */ .section-label { font-size: var(--fz-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 0 8px } /* CTA signup nudge block at the bottom of every listing page */ .cta { background: linear-gradient(135deg,#eff6ff,#f5f3ff); border: 1px solid #dbeafe; border-radius: 12px; padding: 18px 20px; margin: 24px 0 } .cta a { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; padding: 10px 20px; border-radius: 9px; margin-top: 8px } /* ═══════════════════════════════════════════════════════ COMPANY PAGE VARIANT body.pg-co 860px instead of 820px — section-label layout needs the extra room. ═══════════════════════════════════════════════════════ */ body.pg-co .wrap { max-width: 860px } /* ═══════════════════════════════════════════════════════ JOB-GONE PAGE body.pg-gone Minimal centered error/expired page; no header chrome beyond the link. ═══════════════════════════════════════════════════════ */ body.pg-gone { text-align: center } body.pg-gone a { font-weight: 700 } .b { max-width: 520px; margin: 14vh auto; padding: 0 20px } /* ═══════════════════════════════════════════════════════ BROWSE PAGES body.pg-browse /browse and /jobs/{category}/{role} — denser, search-oriented. Differences from listing: sticky header, narrower reading line, smaller h1, search row + chip filter row, card feed. ═══════════════════════════════════════════════════════ */ body.pg-browse { line-height: 1.55 } body.pg-browse .wrap { max-width: 860px } /* same as pg-co; 860px is the "wide listing" standard */ body.pg-browse header.site .wrap { max-width: none } /* full-bleed header: logo hugs the left edge, bin the right */ body.pg-browse header.site { position: sticky; top: 0; z-index: 10 } /* keeps search visible while scrolling */ body.pg-browse h1 { font-size: var(--fz-4xl); letter-spacing: -.4px; margin: 22px 0 3px } /* smaller — search row is the real focus */ /* browse header right side: Sign in + Add CV button */ .hbtns { display: flex; gap: 14px; align-items: center; font-size: var(--fz-md) } .hbtns .cta,.hbtns button.cta { background: var(--accent); color: #fff; padding: 7px 14px; border-radius: 8px; font-weight: 700; border: none; cursor: pointer; font-size: var(--fz-md) } /* Sign in — outlined, the same look as the home page's button. Filled blue stays for real actions (e.g. Upload CV). Padding is one pixel tighter than the filled pill so the 1px border keeps the header the same height. */ .hbtns .cta.cta-outline { background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 600; padding: 6px 17px } .hbtns .cta.cta-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--surface2) } .hbtns #hbtn-cv { white-space: nowrap } /* ↑ .hbtns .cta overrides the block .cta above via specificity — different element entirely */ /* Signed-in chip (nav.js swaps the Sign in / Upload CV block for this when a JWT is present) */ .hbtns .hchip { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: var(--fz-md) } .hbtns .hchip:hover { color: var(--accent) } .hbtns .hchip-av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0 } .hbtns .hchip-name { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis } /* Settings / sign-out icon buttons — same treatment as tawori.dev's account menu: 16px Lucide icon (.hicon), currentColor stroke, muted → accent on hover. */ .hbtns .hicon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; color: var(--muted); text-decoration: none; flex-shrink: 0; transition: color .15s, background-color .15s } .hbtns .hicon-btn:hover { color: var(--accent); background: var(--surface2) } .hbtns .hicon { width: 16px; height: 16px } /* CV upload modal */ .cv-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; align-items: center; justify-content: center; padding: 16px } .cv-card { background: #fff; border-radius: 16px; padding: 32px; width: 420px; max-width: 100%; position: relative; box-shadow: 0 8px 40px rgba(0,0,0,.18) } .cv-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1 } .cv-close:hover { color: var(--ink) } .cv-title { font-size: 20px; font-weight: 700; margin: 0 0 6px } .cv-hint { font-size: 13px; color: var(--muted); margin: 0 0 20px } .cv-drop { border: 2px dashed var(--line); border-radius: 10px; padding: 28px 20px; text-align: center; color: var(--muted); cursor: default; transition: border-color .15s } .cv-drop svg { color: var(--muted); margin-bottom: 10px } .cv-drop p { margin: 0 0 10px; font-size: 14px } .cv-drop-ov { border-color: var(--accent); background: #eff6ff } .cv-btn { display: inline-block; background: var(--accent); color: #fff; padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer } .cv-btn:hover { background: #1d4ed8 } .cv-types { font-size: 11px; color: var(--muted); margin: 10px 0 0 !important } .cv-status { margin-top: 16px; font-size: 13px; min-height: 20px; text-align: center } .cv-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid #cbd5e1; border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px } @keyframes spin { to { transform: rotate(360deg) } } .sub { color: var(--muted); font-size: var(--fz-md); margin: 0 0 16px } /* subtitle below h1 */ /* keyword search row */ .searchrow { display: flex; gap: 8px; margin: 0 0 12px } .searchrow input { flex: 1; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; font-size: var(--fz-lg); background: #fff } .searchrow button { padding: 0 18px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer } /* category chip row — #cats on /browse, .chips on /jobs/{cat}/{role} */ .chips, #cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px } .chip { padding: 6px 13px; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: var(--fz-sm); font-weight: 600; color: #475569; cursor: pointer } .chip.on { background: var(--accent); border-color: var(--accent); color: #fff } .chip-n { opacity: .6; font-weight: 500 } /* count badge inside chip */ /* list/map toggle pills — /browse only */ .map-toggle { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 0 0 16px; width: fit-content } .map-toggle a { padding: 7px 16px; font-size: var(--fz-sm); font-weight: 700; color: #475569; background: #fff } .map-toggle a.on { background: var(--accent); color: #fff } /* job card feed */ #feed { display: flex; flex-direction: column; gap: 10px } .card { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px } .card:hover { border-color: #cbd5e1 } .cmain { flex: 1; min-width: 0; color: inherit } .card h3 { margin: 0 0 3px; font-size: var(--fz-xl); font-weight: 700; line-height: 1.3 } .card .meta { color: var(--muted); font-size: var(--fz-sm) } .save { border: 0; background: transparent; font-size: var(--fz-2xl); line-height: 1; color: #cbd5e1; cursor: pointer; padding: 2px 4px } .save.on { color: #ef4444 } #more { display: block; margin: 20px auto; padding: 11px 26px; border: 1px solid var(--line); background: #fff; border-radius: 9px; font-weight: 700; cursor: pointer } /* inline tip/promo box */ .tip { background: linear-gradient(135deg,#eff6ff,#f5f3ff); border: 1px solid #dbeafe; border-radius: 12px; padding: 14px 16px; margin: 16px 0; font-size: var(--fz-md) } .tip b { color: var(--ink) } .tip a { font-weight: 700 } /* SEO pagination links (prev/next page text links) */ .seopag { margin: 16px 0; font-size: 0 } .seopag a { font-size: var(--fz-sm); margin-right: 14px; color: var(--muted) } /* ═══════════════════════════════════════════════════════ JD PAGE body.pg-jd Individual job detail — two-column layout, white reading surface. Differences from listing: white bg (--bg:#fff) — removes the grey tint for long-form reading line colour (#e8ebf1) — slightly warmer to match the white bg wider .wrap (1060px) — needed for main+sidebar grid header 60px — 4px taller to feel less cramped with the breadcrumb below h1 tight margin — breadcrumb provides the top spacing instead sticky sidebar (.side) — apply button stays visible while reading fixed mbar on mobile — replaces sticky sidebar at <820px ═══════════════════════════════════════════════════════ */ body.pg-jd { --line: #e8ebf1; line-height: 1.65 } body.pg-jd .wrap { max-width: 1060px; padding: 0 24px } body.pg-jd header.site .wrap { height: 60px } body.pg-jd h1 { font-size: var(--fz-5xl); line-height: 1.22; margin: 2px 0 5px; letter-spacing: -.5px } /* header CTA — JD page only. .headsignin = the outlined "Sign in" button, same look as the home page's */ .headcta { font-size: var(--fz-sm); font-weight: 700; background: var(--accent); color: #fff; padding: 8px 15px; border-radius: 9px; text-decoration: none } .headcta.headsignin { align-self: center; display: inline-flex; align-items: center; line-height: 1.2; font-weight: 600; background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 7px 18px; border-radius: 8px } .headcta.headsignin:hover { border-color: var(--accent); color: var(--accent); background: var(--surface2) } /* profile avatar shown in header when signed in (replaces .headcta via JS) */ .jd-av-wrap { position: relative } .jd-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; flex-shrink: 0 } .jd-av-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.1); min-width: 130px; overflow: hidden; z-index: 50 } .jd-av-wrap.open .jd-av-menu { display: block } .jd-av-menu a { display: block; padding: 11px 16px; font-size: var(--fz-sm); font-weight: 600; color: var(--ink); text-decoration: none } .jd-av-menu a:hover { background: var(--surface2) } /* Save — full-width buttons matching .apply proportions */ .jd-easy, .jd-save { display: block; box-sizing: border-box; width: 100%; padding: 13px 18px; border-radius: 10px; font-family: inherit; font-size: var(--fz-sm); font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer } .jd-easy { background: #16a34a; color: #fff; border: none; margin-bottom: 8px } .jd-easy:hover { background: #15803d } .jd-save { background: #fff; color: var(--ink); border: 1.5px solid var(--line) } .jd-save:hover { border-color: var(--accent); color: var(--accent) } /* Tailor CV / Cover letter — two ghost columns between the apply button and Save */ .jd-docs { display: flex; gap: 8px; margin-bottom: 8px } .jd-doc { flex: 1; box-sizing: border-box; padding: 10px 8px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface2); color: var(--ink); font-family: inherit; font-size: var(--fz-xs); font-weight: 700; line-height: 1.2; cursor: pointer } .jd-doc:hover { border-color: var(--accent); color: var(--accent) } /* Small "See original" text link below the buttons */ .jd-src { display: block; margin-top: 12px; text-align: center; font-size: var(--fz-xs); color: var(--muted); text-decoration: none } .jd-src:hover { color: var(--ink) } /* "Apply on original website or we can apply for you" — plain text between the two apply buttons */ .jd-apply-note { margin: 10px 2px; text-align: center; font-size: var(--fz-xs); color: var(--muted) } /* "Apply with CareerPlan" — the second way to apply, under the note */ .jd-cta { display: block; box-sizing: border-box; width: 100%; padding: 13px 18px; border: none; border-radius: 10px; background: #16a34a; color: #fff; font-family: inherit; font-size: var(--fz-sm); font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer } .jd-cta:hover { background: #15803d } .jd-cta:disabled { opacity: .7; cursor: default } /* mobile bar save button */ .mbar-save { box-sizing: border-box; padding: 0 16px; margin-left: 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap } /* Toast — transient confirmations (apply queued, copied, errors) */ .jd-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #0f172a; color: #fff; padding: 13px 20px; border-radius: 10px; font-size: var(--fz-sm); font-weight: 600; max-width: 90vw; box-shadow: 0 8px 28px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 500 } .jd-toast.show { opacity: 1; transform: translate(-50%, 0) } /* Doc modal — edit tailored CV / cover letter, then download PDF */ .jd-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 400; align-items: center; justify-content: center; padding: 20px } .jd-modal-box { background: #fff; border-radius: 14px; width: 720px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.2) } .jd-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: var(--fz-md) } .jd-modal-x { border: none; background: var(--surface2); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 16px; color: var(--muted) } .jd-modal-text { flex: 1; margin: 18px 22px 0; border: 1px solid var(--line); border-radius: 9px; padding: 14px; font-size: var(--fz-sm); line-height: 1.6; font-family: inherit; resize: none; min-height: 340px; outline: none } .jd-modal-changes { margin: 12px 22px 0; font-size: var(--fz-xs); color: var(--muted); background: var(--surface2); border-radius: 8px; padding: 10px 12px; line-height: 1.5 } .jd-modal-foot { padding: 16px 22px; display: flex; gap: 10px; justify-content: flex-end; align-items: center } .jd-modal-hint { font-size: var(--fz-2xs); color: var(--muted); margin-right: auto } /* breadcrumb trail above the job title */ .breadcrumb { font-size: var(--fz-sm); color: var(--muted); padding: 18px 0 0; margin: 0 } .breadcrumb a { color: var(--muted); text-decoration: none } .breadcrumb a:hover { color: var(--ink) } .breadcrumb span { margin: 0 7px; color: #cbd5e1 } /* two-column content grid: main JD text | sticky sidebar */ .layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 44px; align-items: start; padding: 6px 0 44px } .job-head { display: flex; gap: 16px; align-items: flex-start; margin: 16px 0 } .co-logo { width: 60px; height: 60px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex-shrink: 0; padding: 6px } .co-logo-fb { display: flex; align-items: center; justify-content: center; font-size: var(--fz-4xl); font-weight: 800; color: var(--accent); background: #eff6ff } .job-head-text { flex: 1; min-width: 0 } /* .co on JD page = company subtitle under h1. Same class as listing rows but different role. Scoped here so the base .co{color:#334155} doesn't bleed into the JD layout. */ body.pg-jd .co { font-size: var(--fz-xl); color: var(--muted) } body.pg-jd .co a { color: var(--muted); font-weight: 600 } body.pg-jd .co a:hover { color: var(--ink) } /* metadata chip row (location, remote, posted date, salary) */ .meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 24px } .meta-chip { font-size: var(--fz-sm); background: #f3f5f9; border-radius: 999px; padding: 5px 12px; color: #475569 } /* LLM extract body (formatted sections from jd_pipeline) */ .extract-body { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 8px } .extract-section h3 { font-size: var(--fz-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 5px } .extract-section p { font-size: var(--fz-xl); line-height: 1.75; color: #223040; margin: 0 } /* raw HTML description fallback (noindex pages that lack an extract) */ .desc { font-size: var(--fz-xl); line-height: 1.75; color: #223040 } .desc > :first-child { margin-top: 0 } .desc h2,.desc h3,.desc h4 { margin: 28px 0 10px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; line-height: 1.3 } .desc h2 { font-size: var(--fz-2xl) } .desc h3 { font-size: var(--fz-xl) } .desc h4 { font-size: var(--fz-lg) } .desc p { margin: 0 0 14px } .desc ul,.desc ol { margin: 0 0 15px; padding-left: 20px } .desc li { margin: 7px 0 } .desc strong { font-weight: 650; color: var(--ink) } /* source attribution line at the bottom of the description */ .src { font-size: var(--fz-xs); color: var(--muted); margin-top: 28px; border-top: 1px solid var(--line); padding-top: 14px } /* sticky sidebar */ .side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px } .scard { border: 1px solid var(--line); border-radius: 14px; padding: 18px } .scard h2 { font-size: var(--fz-lg); margin: 0 0 10px } /* apply button */ .apply { display: block; text-align: center; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; padding: 13px 18px; border-radius: 10px } .apply:hover { background: #1d4ed8 } /* closed role: 200 page kept for SEO (URL stays indexed), apply disabled */ .jd-closed { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: var(--fz-sm); font-weight: 600; padding: 12px 16px; border-radius: 10px; margin: 0 0 18px } .jd-closed a { color: #b91c1c; font-weight: 700 } .apply-closed { display: block; text-align: center; background: var(--surface2); color: var(--muted); font-weight: 700; padding: 13px 18px; border-radius: 10px; border: 1px solid var(--line) } .match { margin: 12px 2px 0; text-align: center; font-size: var(--fz-sm); color: var(--muted) } .match a { font-weight: 600; text-decoration: none } /* company about card in sidebar */ .about-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px } .about-co p { margin: 0; font-size: var(--fz-md); color: #475569; line-height: 1.6 } .co-products { margin-top: 12px } .co-products-h { font-size: var(--fz-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px } .co-products ul { margin: 0; padding-left: 16px } .co-products li { font-size: var(--fz-xs); color: #475569; line-height: 1.5; margin: 3px 0 } /* mini sign-up CTA card in sidebar (dark background — distinct from page-bottom .cta) */ .mini-cta { background: linear-gradient(135deg,#eff6ff,#f5f3ff); border-color: #dbeafe } .mini-cta b { font-size: var(--fz-md) } .mini-cta p { margin: 6px 0 12px; font-size: var(--fz-xs); color: #475569; line-height: 1.5 } .mini-cta a { display: block; text-align: center; background: #0f172a; color: #fff; text-decoration: none; font-weight: 700; font-size: var(--fz-sm); padding: 10px; border-radius: 9px } /* similar roles grid below the JD */ .related { max-width: 1060px; margin: 0 auto; padding: 4px 24px 40px } .related h2 { font-size: var(--fz-xl); margin: 0 0 14px } .rel-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 12px } .rel-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #e5e7eb; border-radius: 12px; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s,border-color .15s,transform .15s } .rel-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #c7d2fe; transform: translateY(-1px) } .rel-logo { width: 42px; height: 42px; border-radius: 9px; object-fit: contain; flex: none; background: #f3f4f6; border: 1px solid #eef2f7 } .rel-ph { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #6366f1; font-size: var(--fz-2xl); text-transform: uppercase } .rel-body { min-width: 0 } .rel-title { font-weight: 600; font-size: var(--fz-md); line-height: 1.35; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .rel-co { font-size: var(--fz-sm); color: #4b5563; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .rel-sub { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: var(--fz-2xs); color: #6b7280 } .pin { vertical-align: -1px; margin-right: 3px; opacity: .7 } /* mobile: collapse sidebar, float apply button at bottom */ .mbar { display: none } @media (max-width: 820px) { body.pg-jd .layout { grid-template-columns: 1fr; gap: 26px; padding-bottom: 80px } body.pg-jd .side { display: none } .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; box-shadow: 0 -2px 12px rgba(0,0,0,.06) } .mbar .apply { flex: 1; margin: 0 } body.pg-jd h1 { font-size: 22px } body.pg-jd .wrap { padding: 0 14px } body.pg-jd .co { font-size: 15px } .extract-section p, .desc { font-size: 15px; line-height: 1.6 } .meta-chip { font-size: 13px; padding: 4px 10px } } /* ── Browse cluster pages (/browse/{category}/{cluster}) ─────────────────── */ /* br-shell: full-bleed container, max-width handled by inner br-jobs */ .br-shell { min-height: calc(100vh - 60px) } /* Toolbar */ .br-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; position: sticky; top: 60px; z-index: 9 } .br-modes,.br-dens,.br-feed { display: flex; gap: 2px } .br-modes { margin-right: 10px; padding-right: 12px; border-right: 1px solid var(--line) } .br-mode,.br-d,.br-f { background: none; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; cursor: pointer; color: var(--ink); font-size: var(--fz-sm); line-height: 1 } .br-mode:hover,.br-d:hover,.br-f:hover,.br-mode.active,.br-d.active,.br-f.active { border-color: var(--accent); color: var(--accent) } .br-mode.active,.br-d.active,.br-f.active { background: var(--accent); color: #fff } /* "Relevant to …" signal not set up yet (no CV / goal / saves, or signed out) — greyed but still clickable */ .br-f.off { opacity: .5; color: var(--muted) } .br-f.off:hover { border-color: var(--line); color: var(--muted) } .br-search { display: flex; flex: 1; min-width: 160px; max-width: 320px; gap: 6px } .br-search input { flex: 1; border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; font-size: var(--fz-sm); outline: none } .br-search input:focus { border-color: var(--accent) } /* Search submit button (magnifying glass). Search runs on Enter / this button, never as-you-type. */ .br-search-go, .br-search-m .br-search-go { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: #fff; cursor: pointer; padding: 0; width: 34px } .br-search-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round } .br-search-go:hover { filter: brightness(1.08) } /* Body: no-JS shows single column; JS adds mode-* class */ .br-body { display: flex; min-height: 0 } /* Filter panel — hidden until JS sets mode-list or mode-map */ .br-filters { display: none; width: 220px; flex-shrink: 0; padding: 16px 20px; border-right: 1px solid var(--line); font-size: var(--fz-sm) } .br-body.mode-list .br-filters,.br-body.mode-map .br-filters { display: block } .br-fg { margin-bottom: 16px } .br-fh { font-weight: 600; font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px } .br-fopts { display: flex; flex-wrap: wrap; gap: 4px } .br-chip { padding: 3px 8px; border: 1px solid var(--line); border-radius: 12px; font-size: var(--fz-xs); text-decoration: none; color: var(--ink) } .br-chip:hover,.br-chip.on { border-color: var(--accent); color: var(--accent) } .br-chip.on { background: var(--accent); color: #fff } /* "Other country…" combobox — sits inline with the country chips */ .br-country { padding: 3px 8px; border: 1px solid var(--line); border-radius: 12px; font-size: var(--fz-xs); color: var(--ink); background: var(--surface); cursor: pointer; max-width: 100%; -webkit-appearance: none; appearance: none } .br-country:hover { border-color: var(--accent) } .br-country:focus { outline: none; border-color: var(--accent) } .br-clear { display: block; font-size: var(--fz-xs); color: var(--accent); text-decoration: none; margin-bottom: 12px } .br-clear:hover { text-decoration: underline } .br-search-m { display: none } /* shown only on mobile via media query below */ /* Job pane */ .br-jobs { flex: 1; min-width: 0; padding: 0 24px 40px; max-width: 860px; margin: 0 auto } .br-head { padding: 20px 0 12px } .br-h1 { font-size: var(--fz-3xl); font-weight: 700; margin: 0 0 4px } .br-sub { color: var(--muted); font-size: var(--fz-md); margin: 0 0 6px } .br-sub a { color: var(--muted) } .br-intro { color: var(--muted); font-size: var(--fz-md); line-height: 1.5; margin: 0 0 16px; max-width: 640px } /* Preview panel — hidden until JS sets mode-preview */ .br-preview { display: none; flex: 1; border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; position: sticky; top: 101px; height: calc(100vh - 101px) } .br-body.mode-preview .br-preview { display: block } .br-body.mode-preview .br-jobs { max-width: var(--jobs-w, 380px); flex-shrink: 0; margin: 0 } /* Draggable dividers between panels */ .br-drag-l, .br-drag-r { width: 1px; flex-shrink: 0; cursor: col-resize; background: var(--line); position: relative; z-index: 6; transition: background .15s; display: none } .br-drag-l::before, .br-drag-r::before { content: ''; position: absolute; inset: 0 -5px } /* 11px hit area */ .br-drag-l:hover, .br-drag-r:hover, .br-drag-l.br-drag-active, .br-drag-r.br-drag-active { background: var(--accent) } /* left divider: visible in list and map modes */ .br-body.mode-list .br-drag-l, .br-body.mode-map .br-drag-l { display: block } /* right divider: visible only in preview mode */ .br-body.mode-preview .br-drag-r { display: block } /* List mode + filter panel: - Jobs pane is fixed-width (flex: 0 0 auto) so it never narrows. - ::after spacer mirrors the filter width via --filt-w and can shrink (flex: 0 1). When filter is narrow: free space distributes around jobs → centred. As filter grows: spacer shrinks to absorb → list drifts right, never narrowing. Once spacer hits 0: list continues right past centre (user chose wide filter). */ .br-body.mode-list:has(#br-filters) .br-jobs { flex: 0 0 auto; width: min(860px, calc(100vw - 222px)); } .br-body.mode-list:has(#br-filters)::after { content: ''; display: block; flex: 0 1 var(--filt-w, 220px); min-width: 0; } .br-ph { color: var(--muted); font-size: var(--fz-md); padding: 40px 24px; text-align: center } /* Map panel — hidden until JS sets mode-map */ .br-map { display: none; flex: 1; position: relative; background: var(--bg) } .br-body.mode-map .br-map { display: block; height: calc(100vh - 112px) } .br-body.mode-map .br-jobs { display: none } .br-body.mode-map .br-preview { display: none } #br-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab } #br-map-canvas.dragging { cursor: grabbing } .br-map-tip { position: fixed; z-index: 200; pointer-events: none; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-size: var(--fz-xs); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); max-width: 280px; white-space: nowrap; } /* Job rows */ /* ── Job rows — title (compact) mode ── */ .jr-list { list-style: none; margin: 0; padding: 0 } .jr { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line) } .jr:last-child { border-bottom: none } .jr-main { display: flex; align-items: baseline; gap: 6px; flex: 1; text-decoration: none; color: inherit; min-width: 0 } .jr-title { font-weight: 500; font-size: var(--fz-md); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1 } .jr-main:hover .jr-title { color: var(--accent) } .jr-co { font-size: var(--fz-xs); color: var(--muted); white-space: nowrap; flex-shrink: 0 } .jr-loc { font-size: var(--fz-xs); color: var(--muted); white-space: nowrap; flex-shrink: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis } .jr-list.dens-card .jr-loc { max-width: 60ch } .jr-age { display: none } .jr-list.dens-card .jr-age { display: inline; font-size: var(--fz-2xs); color: var(--muted); white-space: nowrap; flex-shrink: 0; margin-left: auto } .jr-arrow { font-size: 10px; color: var(--muted) } .jr-save,.jr-skip { background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--fz-lg); padding: 2px 4px; flex-shrink: 0; opacity: 0; transition: opacity .15s } .jr:hover .jr-save,.jr:hover .jr-skip { opacity: 1 } .jr-save:hover { color: #e11d48 } .jr-skip:hover { color: var(--ink) } .jr.jr-saved .jr-save { color: #e11d48; opacity: 1 } .jr.skipped { opacity: .4 } /* ── Job rows — card (rich) mode: .dens-card on the list ── */ /* Title (compact) mode: a small company logo leads the row. Card mode and mobile override these with their own larger sizes below (higher specificity), so they're unaffected. */ .jr-logo { display: block; width: 22px; height: 22px; border-radius: 5px; object-fit: contain; border: 1px solid var(--line); flex-shrink: 0 } .jr-logo-fb { display: flex; align-items: center; justify-content: center; font-size: var(--fz-2xs); font-weight: 700; color: var(--muted); background: #f1f5f9 } .jr-sal,.jr-snip { display: none } .jr-list.dens-card .jr { padding: 12px 0; align-items: flex-start; gap: 10px } .jr-list.dens-card .jr-logo { display: block; width: 36px; height: 36px; border-radius: 7px; object-fit: contain; border: 1px solid var(--line); flex-shrink: 0; margin-top: 1px } .jr-list.dens-card .jr-logo-fb { display: flex; align-items: center; justify-content: center; font-size: var(--fz-lg); font-weight: 700; color: var(--muted); background: #f1f5f9 } .jr-list.dens-card .jr-main { flex-wrap: wrap; gap: 4px 8px } .jr-list.dens-card .jr-title { flex: 1 1 100%; font-size: var(--fz-lg); font-weight: 600; white-space: normal; overflow: visible } .jr-list.dens-card .jr-co { font-size: var(--fz-sm) } .jr-list.dens-card .jr-age { margin-left: auto } .jr-list.dens-card .jr-sal { display: inline; font-size: var(--fz-xs); color: #059669; font-weight: 600 } .jr-list.dens-card .jr-snip { display: block; flex: 1 1 100%; font-size: var(--fz-xs); color: var(--muted); line-height: 1.45 } /* Pagination */ .pagination { display: flex; align-items: center; gap: 4px; padding: 24px 0 8px; flex-wrap: wrap } .pag-a { padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink); font-size: var(--fz-sm) } .pag-a:hover { border-color: var(--accent); color: var(--accent) } .pag-cur { padding: 5px 10px; background: var(--accent); color: #fff; border-radius: 4px; font-size: var(--fz-sm) } .pag-dots { padding: 5px 4px; color: var(--muted); font-size: var(--fz-sm) } /* Taxonomy nav */ .taxonomy-nav { padding: 28px 0 24px; border-top: 1px solid var(--line); margin-top: 16px } .tn-head { font-size: var(--fz-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 16px } .tn-cat { margin-bottom: 16px } .tn-cat-label { font-size: var(--fz-sm); font-weight: 600; color: var(--ink); margin-bottom: 6px } .tn-cat-label a { color: inherit; text-decoration: none } .tn-cat-label a:hover { color: var(--accent) } .tn-clusters { display: flex; flex-wrap: wrap; gap: 5px } .tn-cl { font-size: var(--fz-xs); color: var(--accent); text-decoration: none; padding: 2px 8px; border: 1px solid var(--line); border-radius: 10px } .tn-cl:hover { border-color: var(--accent) } .tn-cl.tn-active { background: var(--accent); color: #fff; border-color: var(--accent) } /* jr-corow / jr-chips: transparent wrappers on desktop so children remain direct flex children */ .jr-corow { display: contents } .jr-chips { display: contents } /* Mobile overrides */ @media (max-width: 640px) { :root { --fz-2xs: 11px; --fz-xs: 12px; --fz-sm: 13px; --fz-md: 14px; --fz-lg: 15px; --fz-xl: 15px; --fz-2xl: 18px; --fz-3xl: 21px; --fz-4xl: 24px; --fz-5xl: 26px } html, body { font-size: 15px } .br-bar { top: 0; gap: 6px; padding: 8px 12px } .br-modes { display: none } .br-body { flex-direction: column } .br-jobs { padding: 0 12px 32px; max-width: 100% } .br-preview { display: none !important } .br-filters { display: none } .jr-save,.jr-skip { opacity: 1 } } /* ── Preview panel content (pp-*) — injected by browse.js via ?panel=1 ────── The fragment has no shell; these rules are already on the page via seo.css. */ .pp-head { display: flex; gap: 12px; align-items: center; padding: 16px } .pp-logo { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; border: 1px solid var(--line); flex-shrink: 0 } .pp-logo-fb { width: 44px; height: 44px; border-radius: 8px; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: var(--fz-3xl); font-weight: 700; color: var(--muted); flex-shrink: 0 } .pp-head-text { flex: 1; min-width: 0 } .pp-title { font-size: var(--fz-xl); font-weight: 700; margin: 0 0 4px; line-height: 1.3 } .pp-co { font-size: var(--fz-sm); color: var(--muted) } .pp-co a { color: var(--accent); text-decoration: none } .pp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; font-size: var(--fz-xs) } .pp-chips span { background: var(--bg2); border-radius: 4px; padding: 2px 8px } .pp-body { padding: 0 16px; font-size: var(--fz-md); line-height: 1.6; overflow-y: auto; max-height: 55vh } .pp-body .extract-section h3 { font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 2px } .pp-body .extract-section p { margin: 0 0 8px } .pp-apply { display: inline-flex; align-items: center; flex-shrink: 0; padding: 6px 14px; font-size: var(--fz-xs); font-weight: 600; border-radius: 8px; white-space: nowrap } /* ── browse.js dynamic states ───────────────────────────────────────────────── */ /* Active job row in preview mode */ .jr.jr-active > .jr-main { background: var(--accent); color: #fff; border-radius: 4px } .jr.jr-active .jr-co, .jr.jr-active .jr-loc, .jr.jr-active .jr-age { color: rgba(255,255,255,.75) } /* Dismiss collapse animation */ .jr { transition: none } /* Mobile filter drawer ─────────────────────────────────────────────────────── */ .br-filter-toggle { display: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: var(--fz-sm); cursor: pointer; color: var(--ink) } @media (max-width: 640px) { .br-filter-toggle { display: block } /* Hide category/cluster nav grids in filter drawer on mobile */ #br-filters .bcat-grid { display: none } /* Drawer: slide in from left over the page */ #br-filters { display: block; position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 85vw; background: #fff; z-index: 200; padding: 20px 16px; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.12) } #br-filters.br-drawer-open { display: block !important; transform: translateX(0) } /* Backdrop dims the rest of the page */ .br-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; transition: opacity .2s } .br-backdrop.br-backdrop-on { display: block } } /* ── Category hub (/browse/{category}) ─────────────────────────────────────── */ .br-crumb { font-size: var(--fz-xs); color: var(--muted); margin-bottom: 4px } .br-crumb a { color: var(--muted); text-decoration: none } .br-crumb a:hover { color: var(--accent) } .bcat-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 20px } .bcat-grid-sm .bcat-cl { font-size: var(--fz-xs); padding: 5px 8px; width: 100%; box-sizing: border-box } .bcat-cl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: var(--fz-sm); background: #fff; transition: border-color .15s, box-shadow .15s } .bcat-cl:hover { border-color: var(--accent); box-shadow: 0 1px 6px rgba(59,130,246,.1) } .bcat-cl-label { font-weight: 500 } .bcat-cl-cnt { font-size: var(--fz-2xs); color: var(--muted); background: var(--bg); padding: 1px 6px; border-radius: 10px; white-space: nowrap } /* ── Mobile browse: borrow visual style from /app ─────────────────────────── */ @media (max-width: 640px) { /* Horizontal-overflow control: the off-canvas drawers are position:fixed and sit off-screen via translateX(±100%). Fixed elements are clipped by the INITIAL containing block (the viewport / ), NOT by — so clipping body does nothing for them and the page stays wider than the screen. Clip at the root instead. overflow-x:clip (not hidden) keeps overflow-y visible → normal vertical scroll, and does NOT turn the element into a scroll container, so the fixed bottom nav stays pinned. */ :root:has(body.pg-browse) { overflow-x: clip } body.pg-browse { max-width: 100%; overflow-x: clip } /* Page: grey background like /app */ body.pg-browse { background: #f1f5f9 } /* Header: compact dark bar, hide desktop nav links */ body.pg-browse header.site { background: #0f172a; border-bottom: none } body.pg-browse header.site .wrap { height: 46px } body.pg-browse header.site .brand { color: #fff; font-size: 17px } body.pg-browse header.site .brand span { color: #60a5fa } body.pg-browse header.site .site-nav, body.pg-browse header.site .site-bin, body.pg-browse header.site .hbtns { display: none } /* Search bar: sticky just below the header */ body.pg-browse .br-bar { display: flex; top: 47px; padding: 7px 12px; gap: 8px; background: #f1f5f9; border-bottom: none; box-shadow: none; justify-content: stretch } body.pg-browse .br-dens, body.pg-browse .br-feed { display: none } body.pg-browse .br-search { max-width: 100%; flex: 1; min-width: 0 } body.pg-browse .br-search input { border-radius: 10px; background: #fff; border-color: #e2e8f0; padding: 7px 12px; font-size: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.06) } /* Remove the width constraint that shrinks the job list when filter is "inline" */ body.pg-browse .br-body.mode-list:has(#br-filters) .br-jobs, body.pg-browse .br-body.mode-map:has(#br-filters) .br-jobs { width: 100% !important; flex: 1 !important; max-width: 100% !important } body.pg-browse .br-body.mode-list:has(#br-filters)::after { display: none !important } /* Job list area */ body.pg-browse .br-jobs { padding: 8px 10px 90px !important; max-width: 100% } body.pg-browse .br-head { padding: 8px 0 6px } body.pg-browse .br-h1 { font-size: 18px } body.pg-browse .br-sub { font-size: 13px } /* Job rows → app-style cards. NOTE: selectors are prefixed with `.jr-list` so they out-specify the desktop density rules (`.jr-list.dens-card .jr-title` = 0,3,0) that browse.js re-applies from localStorage — without the prefix those win and clobber this mobile design. Leaky per-property overrides (flex-wrap, margin-left) are reset explicitly. */ body.pg-browse .jr-list .jr { display: flex; align-items: flex-start; gap: 10px; background: #fff; border-radius: 12px; padding: 11px 12px 10px; margin: 0 0 8px; box-shadow: 0 1px 3px rgba(15,23,42,.07); border-bottom: none; -webkit-tap-highlight-color: rgba(37,99,235,.08); transition: box-shadow .15s } body.pg-browse .jr-list .jr:active { box-shadow: 0 0 0 2px #2563eb } body.pg-browse .jr-list .jr > .jr-logo { display: block !important; flex-shrink: 0; margin-top: 0; width: 34px; height: 34px; min-width: 34px; border-radius: 8px; object-fit: contain; overflow: hidden; border: none } body.pg-browse .jr-list .jr > .jr-logo.jr-logo-fb { display: flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; font-size: 13px; font-weight: 800 } body.pg-browse .jr-list .jr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; text-decoration: none; color: inherit } body.pg-browse .jr-list .jr-title { flex: none; font-size: 14px; font-weight: 700; line-height: 1.3; color: #0f172a; white-space: normal; overflow: hidden; margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } body.pg-browse .jr-list .jr-corow { display: flex; align-items: center; min-width: 0; overflow: hidden; font-size: 12px; white-space: nowrap; margin: 0 } body.pg-browse .jr-list .jr-co { color: #475569; font-weight: 600; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0 } body.pg-browse .jr-list .jr-co:has(+ .jr-loc)::after { content: ' · '; color: #94a3b8; font-weight: 400; flex-shrink: 0 } body.pg-browse .jr-list .jr-loc { color: #64748b; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis } body.pg-browse .jr-list .jr-remote { color: #065f46 !important; background: #dcfce7; border-radius: 5px; padding: 1px 5px; font-size: 10.5px; font-weight: 700; flex-shrink: 0 } body.pg-browse .jr-list .jr-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 5px } body.pg-browse .jr-list .jr-sal { display: inline; margin: 0; font-size: 10.5px; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 6px } body.pg-browse .jr-list .jr-age { display: inline; margin: 0; font-size: 10.5px; font-weight: 600; color: #94a3b8 } body.pg-browse .jr-list .jr-snip { display: block; flex: none; font-size: 12px; color: #64748b; line-height: 1.4; margin-top: 3px } body.pg-browse .jr-list .jr-save, body.pg-browse .jr-list .jr-skip { display: none } body.pg-browse .jr-list .jr-arrow { display: none } /* Search field in filter drawer */ .br-search-m { display: flex; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0 } .br-search-m input { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 15px; background: #fff; color: #0f172a; -webkit-appearance: none; box-sizing: border-box } .br-search-m input:focus { outline: none; border-color: #2563eb } .br-search-m .br-search-go { width: 44px; border-radius: 10px } /* Taxonomy/verticals drawer — slides in from right */ .br-tax-drawer { position: fixed; inset: 0 0 0 auto; width: 85vw; max-width: 320px; background: #fff; z-index: 200; padding: 20px 16px; overflow-y: auto; transform: translateX(105%); transition: transform .25s ease; box-shadow: -4px 0 24px rgba(0,0,0,.12) } .br-tax-drawer.br-drawer-open { transform: translateX(0) } .br-tax-drawer-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #64748b; margin: 0 0 14px } .br-tax-drawer .taxonomy-nav { padding: 0; border-top: none; margin-top: 0 } .br-tax-drawer .tn-head { display: none } .br-tax-drawer .tn-cat { margin-bottom: 14px } .br-tax-drawer .tn-cat-label a { font-size: 14px; font-weight: 700; color: #0f172a } .br-tax-drawer .tn-clusters { gap: 5px } .br-tax-drawer .tn-cl { font-size: 13px; padding: 4px 10px } /* Bottom nav (injected by browse.js). translateZ(0) + will-change promote it to its own compositing layer so mobile browsers repaint it independently of the scrolling content — this keeps it firmly pinned instead of lagging/hiding during momentum scroll. */ .br-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4,1fr); background: #0f172a; color: #64748b; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(0,0,0,.3); transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden } .br-mobile-nav > * { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; color: inherit; font-size: 10px; font-weight: 600; padding: 4px 0; cursor: pointer; text-decoration: none; font-family: inherit } .br-mobile-nav > *.bm-on { color: #fff } .br-mobile-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round } } /* ═══════════════════════════════════════════════════════ BOARD (/board — kanban pipeline; markup in board.html + board.js) ═══════════════════════════════════════════════════════ */ body.pg-board .bd-signin { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--accent-bg); border-bottom: 1px solid #bfdbfe; font-size: 13px } body.pg-board .bd-signin a { font-weight: 700; color: var(--accent) } body.pg-board .kanban-wrap { display: flex; gap: 12px; padding: 20px; overflow-x: auto; min-height: calc(100vh - 120px); align-items: flex-start } body.pg-board .kanban-col { min-width: 240px; max-width: 240px; display: flex; flex-direction: column; background: var(--surface2); border-radius: 10px; overflow: hidden } body.pg-board .kanban-col--narrow { min-width: 160px; max-width: 160px } body.pg-board .kcard-placeholder { border: 2px dashed #cbd5e1; border-radius: 8px; background: var(--surface2); transition: border-color .15s, background .15s } body.pg-board .kanban-cards.drag-over { background: rgba(37,99,235,.05) } body.pg-board .kanban-cards.drag-over .kcard-placeholder { border-color: #93c5fd; background: rgba(219,234,254,.4) } body.pg-board .kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 3px solid var(--col-color); background: var(--surface2) } body.pg-board .kanban-col-head span:first-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink) } body.pg-board .kanban-col-cnt { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--line); padding: 1px 6px; border-radius: 8px } body.pg-board .kanban-cards { flex: 1; padding: 6px 8px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 80px } body.pg-board .kanban-empty { padding: 24px 8px; text-align: center; font-size: 12px; color: var(--muted) } body.pg-board .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: box-shadow .12s, border-color .12s; user-select: none; -webkit-user-select: none; touch-action: none } body.pg-board .kcard:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); border-color: #cbd5e1 } body.pg-board .kcard-title { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; color: var(--ink) } body.pg-board .kcard-co { font-size: 11px; color: var(--muted) } body.pg-board .kcard-meta { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap } body.pg-board .kcard-tag { font-size: 10px; background: var(--bg); border-radius: 4px; padding: 2px 6px; color: var(--muted) } body.pg-board .kcard-badge-cv { font-size: 9px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle } /* Application "page" — full view swap on card click, URL: /board?app= body.pg-board toggles class "view-app" to switch between #view-board and #view-app */ body.pg-board header.site { position: sticky; top: 0; z-index: 10; background: #fff } body.pg-board #view-app { display: none } body.pg-board.view-app #view-board { display: none } body.pg-board.view-app #view-app { display: flex; flex-direction: column; height: calc(100vh - 57px); /* 56px header + 1px border */ } /* Applications list — URL: /board?tab=applications, body class "view-apps". These are the applications CareerPlan runs/ran for the user (the auto-apply outbound queue), distinct from the manually-tracked kanban jobs. */ body.pg-board #view-apps { display: none } body.pg-board.view-apps #view-board, body.pg-board.view-apps #view-app { display: none } body.pg-board.view-apps #view-apps { display: block } .oa-wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px } .oa-head { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--ink) } .oa-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px } .oa-list { display: flex; flex-direction: column; gap: 10px } .oa-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) } .oa-main { flex: 1; min-width: 0 } .oa-title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .oa-co { color: var(--muted); font-size: 13px; margin-top: 2px } .oa-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0 } .oa-when { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums } .oa-mode { color: var(--muted); font-size: 12px; text-transform: capitalize } .oa-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap } .oa-badge.s-queued, .oa-badge.s-preparing, .oa-badge.s-submitting { background: #eef2ff; color: #4338ca } .oa-badge.s-pending_approval, .oa-badge.s-needs_input, .oa-badge.s-needs_account { background: #fef3c7; color: #92400e } .oa-badge.s-submitted { background: #dcfce7; color: #166534 } .oa-badge.s-prepared { background: #ccfbf1; color: #115e59 } .oa-badge.s-failed, .oa-badge.s-blocked { background: #fee2e2; color: #991b1b } .oa-badge.s-rejected, .oa-badge.s-cancelled, .oa-badge.s-rolled_back { background: #f1f5f9; color: #64748b } .oa-act { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap } .oa-act.primary { background: #d97706; color: #fff } .oa-act.primary:hover { background: #b45309 } .oa-act.ghost { background: var(--surface); border-color: var(--line); color: var(--ink) } .oa-act.ghost:hover { border-color: var(--muted) } .oa-empty { text-align: center; color: var(--muted); padding: 60px 20px; border: 1px dashed var(--line); border-radius: 12px } @media (max-width: 620px) { .oa-row { flex-wrap: wrap; gap: 8px 12px } .oa-meta { width: 100%; justify-content: space-between } } /* Sub-navigation bar (breadcrumb + stage status) */ .ap-nav { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 48px; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0 } .ap-back { display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 5px 10px 5px 6px; border-radius: 6px; transition: color .12s, background .12s; white-space: nowrap; flex-shrink: 0 } .ap-back:hover { color: var(--ink); background: var(--line) } .ap-nav-sep { width: 1px; height: 20px; background: var(--line); flex-shrink: 0 } .ap-nav-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0 } .ap-nav-title { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45% } .ap-nav-dot { color: var(--line); margin: 0 8px; flex-shrink: 0 } .ap-nav-co { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .ap-nav-stage { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 20px; color: #fff } .ap-nav-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px } .ap-nav-apply { font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 8px; background: var(--accent); color: #fff; border: 1px solid var(--accent); cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; line-height: 1.2 } .ap-nav-apply:hover { filter: brightness(1.06) } .ap-nav-apply.li { background: #0a66c2; border-color: #0a66c2 } .ap-nav-apply.grey { background: var(--surface2); color: var(--muted); border-color: var(--line); cursor: not-allowed } .ap-nav-apply.grey:hover { filter: none } .ap-nav-apply.ghost { background: transparent; color: var(--accent); border-color: var(--line) } #ap-apply-section:empty { display: none } /* Two-pane workspace: job reference (left) + CV/CL workspace (right), each scrolls independently */ .ap-layout { flex: 1; display: grid; grid-template-columns: var(--ap-split,42%) 7px minmax(0,1fr); min-height: 0; overflow: hidden } .ap-layout.jcol { grid-template-columns: 46px 7px minmax(0,1fr) } .ap-main { position: relative; min-width: 0; overflow-y: auto; padding: 36px 44px 60px } .ap-side { min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 24px 28px 28px; border-left: 1px solid var(--line); background: var(--surface2) } .ap-splitter { position: relative; cursor: col-resize } .ap-splitter::before { content:""; position:absolute; inset:0 2px; border-radius:4px } .ap-splitter:hover::before, .ap-splitter.drag::before { background: var(--accent); opacity:.35 } .ap-layout.jcol .ap-splitter { pointer-events:none; opacity:.3 } .ap-jcolbtn { position:absolute; top:12px; right:12px; z-index:3; width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; font-size:13px; line-height:1 } .ap-jcolbtn:hover { border-color:var(--accent); color:var(--accent) } .ap-rail { display:none } .ap-layout.jcol .ap-main { padding:0; overflow:hidden } .ap-layout.jcol .ap-main-body, .ap-layout.jcol .ap-jcolbtn { display:none } .ap-layout.jcol .ap-rail { display:flex; align-items:center; justify-content:center; height:100%; cursor:pointer; writing-mode:vertical-rl; transform:rotate(180deg); font-weight:800; font-size:11px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase } .ap-layout.jcol .ap-rail:hover { color:var(--accent) } /* CV/CL workspace (right pane) */ .ws-stagebar { margin: 14px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line) } .ws-doc { margin-bottom: 24px } .ws-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px } .ws-doc-title { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -.2px } .ws-ver-sel { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); max-width: 62% } .ws-editor { width: 100%; box-sizing: border-box; min-height: 300px; resize: vertical; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px } .ws-editor:focus { outline: none; border-color: var(--accent) } .ws-editor.dirty { border-color: #d97706; background: #fffdf7 } .ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px } .ws-actions button { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 7px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer } .ws-actions button:hover:not(:disabled) { border-color: #94a3b8 } .ws-actions button:disabled { opacity: .55; cursor: default } .ws-actions .ws-primary { background: var(--accent); color: #fff; border-color: var(--accent) } .ws-dls { display: inline-flex; gap: 4px; margin-left: auto } .ws-changes { margin-top: 8px; font-size: 12px } .ws-changes summary { cursor: pointer; color: var(--muted) } .ws-changes-body { margin-top: 6px; color: var(--ink); line-height: 1.55 } .ws-empty { font-size: 13px; color: var(--muted); padding: 20px; text-align: center; border: 1px dashed var(--line); border-radius: 8px } /* ── CV Studio tabs (Phase 1) ─────────────────────────────────────────────── */ .ap-hidden { display: none !important } .ap-seg { display:flex; gap:4px; align-items:flex-end; margin:6px 0 0; flex-wrap:wrap } .ap-tab { font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:8px 8px 0 0; border:1px solid transparent; border-bottom:none; background:transparent; color:var(--muted); cursor:pointer } .ap-tab.on { background:var(--surface); border-color:var(--line); color:var(--ink) } .ap-seg-sp { flex:1 } .ap-segctl { display:none; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); padding-bottom:5px } .ap-segctl.show { display:inline-flex } .ap-segctl select { font-size:11.5px; font-family:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:2px 6px } .ap-chk { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--ink); cursor:pointer } .ap-chk input { accent-color:var(--accent); cursor:pointer; margin:0 } .ap-dls { display:inline-flex; align-items:center; gap:4px; align-self:center; padding-bottom:5px } .ap-dls button { font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer } .ap-dls button:hover { border-color:var(--accent) } .ap-panes { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:0 10px 10px 10px; padding:16px; background:var(--surface) } .ap-pane { display:none } .ap-pane.on { display:flex; flex-direction:column; flex:1 1 auto; min-height:0 } #ap-editor { flex:1 1 auto; min-height:160px; resize:none } .ap-pane .ws-actions { flex:0 0 auto } #pane-diff .ap-diff { flex:1 1 auto; min-height:0; max-height:none } #pane-diff .ap-why { flex:0 0 auto } .ap-pdfbar { flex:0 0 auto } #pdfwrap { flex:1 1 auto; min-height:0 } .ap-diff { font-family:var(--mono,ui-monospace,Menlo,monospace); font-size:12px; line-height:1.7; border:1px solid var(--line); border-radius:9px; overflow:auto; max-height:62vh } .ap-diff .dl { display:flex; padding:1px 0 } .ap-diff .dl-g { width:26px; flex:0 0 26px; text-align:center; user-select:none; font-weight:700; color:var(--muted); opacity:.6 } .ap-diff .dl-t { flex:1; padding-right:12px; white-space:pre-wrap; word-break:break-word } .ap-diff .add { background: color-mix(in srgb, #16a34a 10%, transparent) } .ap-diff .add .dl-g { color:#16a34a } .ap-diff .del { background: color-mix(in srgb, #dc2626 9%, transparent) } .ap-diff .del .dl-g { color:#dc2626 } .ap-diff ins { background: color-mix(in srgb, #16a34a 32%, transparent); text-decoration:none; border-radius:2px; padding:0 1px } .ap-diff del { background: color-mix(in srgb, #dc2626 30%, transparent); text-decoration:none; border-radius:2px; padding:0 1px } .ap-diff-empty { padding:24px; text-align:center; color:var(--muted); font-size:13px } .ap-why { margin-top:12px; background: color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius:9px; padding:12px 14px; font-size:12.5px; color:var(--ink); line-height:1.55 } .ap-why .why-h { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:6px } .ap-why .muted { color:var(--muted) } .ap-why ul { margin:0; padding-left:16px } .ap-why li { margin-bottom:4px } .ap-why p { margin:0 0 6px } .ap-pdfbar { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:10px } .ap-linkbtn { background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer; font-size:12px; padding:0 } .ap-pdf-frame { width:100%; height:100%; border:1px solid var(--line); border-radius:8px; background:#fff } .ap-pdf-empty { padding:40px 20px; text-align:center; color:var(--muted); font-size:13px; border:1px dashed var(--line); border-radius:8px } .ap-mapwrap { position:relative; flex:1 1 auto; min-height:240px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface) } .ap-mapwrap canvas { display:block; width:100%; height:100% } .ap-map-msg { position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:13px; padding:20px } .ap-map-cap { flex:0 0 auto; margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.5 } .ap-map-cap b { color:var(--ink) } .ap-map-hint { opacity:.7; margin:0 6px } /* ── Approve application overlay ───────────────────────────────────────────── */ .ap-approve{ position:fixed; inset:57px 0 0 0; z-index:200; background:var(--bg); display:none; flex-direction:column } .ap-approve-scroll{ flex:1; overflow-y:auto; padding:26px 20px 120px } .ap-approve-inner{ max-width:760px; margin:0 auto } .ap-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-top:16px; overflow:hidden } .ap-card > h2{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0; padding:13px 18px; border-bottom:1px solid var(--line) } .ap-card-body{ padding:6px 18px 12px } .ap-approve .q{ padding:13px 0 13px 12px; border-bottom:1px solid var(--line); border-left:3px solid transparent } .ap-approve .q:last-child{ border-bottom:none } .ap-approve .q-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px } .ap-approve .q-label{ font-weight:600; font-size:14px; color:var(--ink) } .ap-approve .q-req{ color:#b45309; font-weight:700; font-size:11px; margin-left:5px } /* Visual weight = does this genuinely need her right now. A required-and-blank field gets full color and an amber accent so it's the thing the eye lands on; anything optional or already answered (CV/saved/safe-default) recedes — muted label, no accent, quieter input border — so a 6-question Review page doesn't read like a 30-field form (2026-09-24). */ .ap-approve .q--needs{ border-left-color:#d97706; background:color-mix(in srgb,#d97706 4%,transparent) } .ap-approve .q--needs .q-label{ color:var(--ink) } /* Muted colors on specific parts, NOT a whole-row opacity — opacity on an ancestor would also fade the input WHILE she's actively editing it (a child's own opacity can't undo that), so instead each piece is toned down individually and the input itself stays fully legible always. */ .ap-approve .q--pale .q-label{ color:var(--muted); font-weight:500 } .ap-approve .q--pale .q-input{ border-color:var(--line); background:var(--surface2); color:var(--muted) } .ap-approve .q--pale .q-input:focus{ border-color:var(--accent); background:var(--surface); color:var(--ink) } .ap-approve .b-optional{ background:var(--surface2); color:var(--muted); border:1px solid var(--line) } .ap-approve .q-badge{ flex:0 0 auto; font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:99px; white-space:nowrap } .ap-approve .b-saved{ background: color-mix(in srgb,#16a34a 14%,transparent); color:#15803d } .ap-approve .b-draft{ background:var(--accent-bg); color:var(--accent) } .ap-approve .b-cv{ background:var(--surface2); color:var(--muted); border:1px solid var(--line) } .ap-approve .b-warn{ background: color-mix(in srgb,#d97706 16%,transparent); color:#b45309 } .ap-approve .q-row{ display:flex; gap:8px; align-items:flex-start } .ap-approve .q-input{ flex:1; width:100%; font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 12px } .ap-approve textarea.q-input{ min-height:64px; resize:vertical; line-height:1.5 } .ap-approve .q-input:focus{ outline:none; border-color:var(--accent) } .ap-approve .q.warn .q-input{ border-color:#f0c98a; background: color-mix(in srgb,#d97706 8%,transparent) } /* Auto-save status beside the field's badge — quiet, appears only after an edit */ .ap-approve .q-meta{ display:flex; align-items:baseline; gap:8px; flex:0 0 auto } .ap-approve .q-saved{ font-size:11.5px; color:var(--muted); white-space:nowrap } .ap-approve .q-saved.ok{ color:#15803d } .ap-approve .q-saved.err{ color:#b45309 } /* Segmented option buttons (Yes/No + small choice sets) — nicer than a native select for 2–4 options */ .ap-approve .q-seg{ flex:1; display:flex; flex-wrap:wrap; gap:6px } .ap-approve .q-opt{ font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer } .ap-approve .q-opt:hover{ border-color:var(--accent) } .ap-approve .q-opt.on{ background:var(--accent); border-color:var(--accent); color:#fff } .ap-approve .q.warn .q-seg{ outline:1px dashed #f0c98a; outline-offset:4px; border-radius:8px } /* "our guess — confirm" badge: an amber-tinted draft so the user knows to check it */ .ap-approve .b-guess{ background: color-mix(in srgb,#d97706 12%,transparent); color:#b45309 } .ap-approve .b-mem{ background: color-mix(in srgb,#16a34a 12%,transparent); color:#15803d } .ap-approve .q-hint{ font-size:11.5px; color:var(--muted); margin-top:5px } .ap-approve .ap-note{ font-size:12.5px; color:var(--muted); padding:2px 0 8px; line-height:1.5 } .ap-approve-bar{ flex:0 0 auto; background:var(--surface); border-top:1px solid var(--line); padding:14px 20px } .ap-approve-bar-inner{ max-width:760px; margin:0 auto; display:flex; align-items:center; gap:14px } .ap-approve-status{ flex:1; font-size:12.5px; color:var(--muted) } .ap-approve-status.ok{ color:#15803d } .ap-btn{ font-size:14px; font-weight:700; padding:11px 20px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer } .ap-btn.ghost{ border:none; color:var(--muted) } .ap-btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff } .ap-btn.primary:disabled{ opacity:.5; cursor:not-allowed } /* doc switch (CV | Cover letter) + versions bar */ .ap-studiobar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 12px } .ap-barsep { width:1px; align-self:stretch; min-height:26px; background:var(--line) } .ap-docsw { display:inline-flex; gap:4px; background:var(--surface2); border:1px solid var(--line); border-radius:9px; padding:3px; flex:0 0 auto } .ap-docpill { font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:6px; border:none; background:transparent; color:var(--muted); cursor:pointer } .ap-docpill.on { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(20,40,80,.08) } .ap-verbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 1 260px; min-width:0 } .ap-verchips { display:flex; gap:6px; flex-wrap:wrap } .ap-verchip { font-size:12px; font-weight:700; padding:5px 11px; border-radius:99px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer } .ap-verchip:hover { border-color:var(--accent) } .ap-verchip.on { background:var(--accent); border-color:var(--accent); color:#fff } .ap-verchip.base { border-style:dashed } .ap-ver-empty { font-size:12px; color:var(--muted) } .ap-veractions { display:flex; gap:6px; margin-left:auto } .ap-verbtn { font-size:12px; font-weight:700; padding:5px 12px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer } .ap-verbtn:hover { border-color:var(--accent) } .ap-verbtn.primary { background:var(--accent); border-color:var(--accent); color:#fff } /* Comments tab: mechanical checks + the LLM's content read */ .ap-tab-badge { font-size:10px; font-weight:800; background:#d97706; color:#fff; border-radius:99px; padding:0 5px; min-width:15px; text-align:center; display:inline-block; margin-left:2px } .ap-comments { font-size:14px } .ap-cmt-h { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px } .ap-cmt { display:flex; gap:8px; align-items:flex-start; padding:4px 0; line-height:1.5; color:var(--ink) } .ap-cmt-ic { flex:0 0 auto; font-size:12px; line-height:1.6 } .ap-cmt.warn .ap-cmt-ic { color:#dc2626 } .ap-cmt.med .ap-cmt-ic { color:#d97706 } .ap-cmt.info .ap-cmt-ic { color:var(--accent) } /* Application page heading */ .ap-head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line) } .ap-head-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); line-height: 1.25; margin-bottom: 6px } .ap-head-meta { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 12px } .ap-head-tag { background: var(--surface2); border-radius: 5px; padding: 2px 8px; font-size: 12px } /* Shared inner sections */ .dr-section { margin-bottom: 24px } .dr-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px } .dr-stages { display: flex; flex-wrap: wrap; gap: 6px } .dr-stage { font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .12s, border-color .12s, color .12s } .dr-stage.active { color: #fff } .dr-stage:hover:not(.active) { border-color: #94a3b8 } .dr-fit { background: var(--accent-bg); border: 1px solid #bfdbfe; border-radius: 10px; padding: 16px 18px; margin-bottom: 24px } .dr-fit-score { font-size: 20px; font-weight: 800; color: var(--accent); letter-spacing: -.3px } .dr-fit-pitch { font-size: 14px; color: var(--ink); margin: 8px 0 0; line-height: 1.6 } .dr-fit-gap { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.5 } .dr-desc { font-size: 14px; line-height: 1.75; color: var(--ink); white-space: pre-wrap } .dr-desc--empty { color: var(--muted); font-style: italic } .dr-desc--empty a { color: var(--accent) } .ap-loading { padding: 80px 0; text-align: center; color: var(--muted); font-size: 14px } .dr-timeline { display: flex; flex-direction: column; gap: 10px } .dr-ev { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink) } .dr-ev-icon { flex-shrink: 0; width: 16px; text-align: center; color: var(--muted); margin-top: 1px } .dr-ev-detail { flex: 1; line-height: 1.45 } .dr-ev-dt { color: var(--muted); white-space: nowrap; flex-shrink: 0 } .ap-src-link { font-size: 12px; color: var(--muted); text-decoration: none } .ap-src-link:hover { color: var(--accent) } /* Collapsible sections (job description, extracted text) */ .ap-collapse { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; overflow: hidden } .ap-collapse > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; user-select: none; gap: 8px } .ap-collapse > summary::-webkit-details-marker { display: none } .ap-collapse > summary::after { content: '▾'; color: var(--muted); font-size: 11px; flex-shrink: 0 } .ap-collapse[open] > summary::after { content: '▴' } .ap-collapse-hint { font-size: 10px; font-weight: 500; color: var(--muted); background: var(--surface2); padding: 1px 6px; border-radius: 4px; margin-left: 4px } .ap-collapse-body { padding: 0 14px 14px; font-size: 13px; line-height: 1.7; color: var(--ink) } .ap-collapse-empty { font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap } .ap-judge-btn { font-size: 12px; font-weight: 600; font-style: normal; background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 4px 12px; cursor: pointer } /* Fit collapsible */ .ap-fit-score { font-size: 12px; font-weight: 700; background: #dbeafe; color: #1e40af; padding: 1px 8px; border-radius: 20px; margin-left: 6px } .ap-fit-body { padding-top: 4px } .ap-fit-body .dr-fit-pitch { margin: 0 0 8px; font-size: 13px; line-height: 1.6 } .ap-fit-body .dr-fit-gap { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6 } /* Description HTML (sanitized) */ .ap-desc-body p { margin: 0 0 10px } .ap-desc-body p:last-child { margin-bottom: 0 } .ap-desc-body ul, .ap-desc-body ol { margin: 0 0 10px; padding-left: 20px } .ap-desc-body li { margin-bottom: 4px } .ap-desc-body h2, .ap-desc-body h3, .ap-desc-body h4 { font-size: 13px; font-weight: 700; margin: 14px 0 4px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted) } /* Extracted text sections (mirrors job page style, scaled for sidebar width) */ .ap-collapse-body .extract-body { gap: 14px; padding: 2px 0 4px } .ap-collapse-body .extract-section h3 { font-size: 10px; margin: 0 0 3px } .ap-collapse-body .extract-section p { font-size: 13px; line-height: 1.65; color: var(--ink) } /* CV / CL version cards */ .cv-versions { margin-top: 24px } .cv-versions-title, .ver-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 0 10px } .ver-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 6px 0 } body.pg-board .kcard--closed { border-top: 4px solid #111 } body.pg-board .kcard-closed-tag { font-size: 10px; font-weight: 700; color: #fff; background: #111; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle } .cv-ver { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: var(--surface) } .cv-ver-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px } .cv-ver-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink) } .cv-ver-pct { font-size: 11px; font-weight: 700; background: #dcfce7; color: #15803d; padding: 2px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0 } .cv-ver-dls { display: flex; gap: 4px; flex-shrink: 0 } .cv-ver-dl { font-size: 11px; font-weight: 600; background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 3px 9px; cursor: pointer; flex-shrink: 0; transition: background .12s } .cv-ver-dl:hover { background: #1d4ed8 } .cv-ver-changes { border-top: 1px solid var(--line) } .cv-ver-changes > summary { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); list-style: none; user-select: none } .cv-ver-changes > summary::-webkit-details-marker { display: none } .cv-ver-changes > summary::after { content: '▾'; font-size: 10px } .cv-ver-changes[open] > summary::after { content: '▴' } .cv-ver-changes-body { padding: 6px 14px 12px; font-size: 12px; color: var(--ink); line-height: 1.6 } .cv-ver-changes-body p { margin: 0 0 4px } .cv-ver-changes-body ul { margin: 0 0 4px; padding-left: 18px } .cv-ver-changes-body li { margin-bottom: 2px } @media (max-width: 700px) { body.pg-board.view-app #view-app { height: auto; min-height: calc(100vh - 57px) } .ap-layout, .ap-layout.jcol { grid-template-columns: 1fr !important; overflow: visible } .ap-splitter, .ap-jcolbtn, .ap-rail { display: none !important } .ap-main, .ap-layout.jcol .ap-main { max-width: 100%; padding: 20px 16px 32px; overflow-y: visible } .ap-layout.jcol .ap-main-body { display: block } .ap-side { width: 100%; min-width: 0; display: block; border-left: none; border-top: 1px solid var(--line); overflow-y: visible; padding: 20px 16px 40px } .ap-panes { display: block; overflow: visible } .ap-pane.on { display: block } #ap-editor { flex: none; height: auto; min-height: 300px; resize: vertical } #pane-diff .ap-diff { flex: none; max-height: 60vh } .ap-pdf-frame { height: 80vh } .ap-nav-title { max-width: 55% } } /* ═══════════════════════════════════════════════════════ PROFILE (/profile — CV, contact, goal; markup in profile.html + profile.js) ═══════════════════════════════════════════════════════ */ body.pg-profile .pf-gate { max-width: 460px; margin: 80px auto; text-align: center; padding: 0 20px } body.pg-profile .pf-gate h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 10px; color: var(--ink) } body.pg-profile .pf-gate p { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 22px } body.pg-profile .pf-gate .cta { display: inline-block; background: var(--accent); color: #fff; font-weight: 700; padding: 11px 26px; border-radius: 9px; font-size: 14px; text-decoration: none } body.pg-profile .profile-page { max-width: 780px; margin: 0 auto; padding: 48px 40px 80px } body.pg-profile .profile-hero { display: flex; align-items: center; gap: 28px; margin-bottom: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--line) } body.pg-profile .profile-avatar { width: 80px; height: 80px; border-radius: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: var(--accent); background: var(--accent-bg); border: 2px solid #bfdbfe } body.pg-profile .profile-hero-info h2 { font-size: 24px; font-weight: 800; letter-spacing: -.5px } body.pg-profile .profile-hero-info p { font-size: 14px; color: var(--muted); margin-top: 4px } body.pg-profile .profile-hero-info button { margin-top: 12px } body.pg-profile .profile-section { margin-bottom: 40px } body.pg-profile .profile-section-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line) } body.pg-profile .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } body.pg-profile .pf-grid .pf-full { grid-column: 1 / -1 } body.pg-profile .pf-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px } body.pg-profile .pf-input, body.pg-profile .prefs-input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; font-size: 14px; color: var(--ink); background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit; box-sizing: border-box } body.pg-profile .pf-input:focus, body.pg-profile .prefs-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1) } body.pg-profile .pf-input::placeholder { color: #94a3b8 } body.pg-profile .prefs-textarea { resize: vertical; line-height: 1.6 } body.pg-profile .prefs-hint { font-size: 12px; color: var(--muted); line-height: 1.5 } body.pg-profile .pf-save-row { display: flex; align-items: center; gap: 14px; margin-top: 24px } body.pg-profile .pf-save-btn { background: var(--accent); color: #fff; border: none; padding: 11px 26px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s } body.pg-profile .pf-save-btn:hover { background: #1d4ed8 } body.pg-profile .pf-saved { font-size: 13px; color: var(--green); display: none; font-weight: 600 } body.pg-profile .plan-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; background: var(--surface) } body.pg-profile .plan-row { display: flex; justify-content: space-between; align-items: center } body.pg-profile .plan-name { font-size: 18px; font-weight: 800; letter-spacing: -.3px } body.pg-profile .plan-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px } body.pg-profile .plan-badge.active { background: #dcfce7; color: #15803d } body.pg-profile .plan-divider { height: 1px; background: var(--line); margin: 16px 0 } body.pg-profile .plan-stats { display: flex; gap: 32px } body.pg-profile .plan-stat-val { font-size: 22px; font-weight: 800; letter-spacing: -.5px } body.pg-profile .plan-stat-lbl { font-size: 11px; color: var(--muted); margin-top: 2px } body.pg-profile .realm-switch-btn { border: 1px solid var(--line); background: #fff; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); transition: all .12s } body.pg-profile .realm-switch-btn:hover { border-color: var(--accent); color: var(--accent) } body.pg-profile .realm-switch-btn.active { background: var(--accent); color: #fff; border-color: var(--accent) } body.pg-profile .cv-card { border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; background: var(--surface); display: flex; align-items: center; gap: 16px } body.pg-profile .cv-icon { width: 44px; height: 44px; background: #fef3c7; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 } body.pg-profile .cv-icon svg { width: 22px; height: 22px; stroke: #b45309; fill: none; stroke-width: 1.8; stroke-linecap: round } body.pg-profile .cv-info { flex: 1; min-width: 0 } body.pg-profile .cv-name { font-size: 14px; font-weight: 600; color: var(--ink) } body.pg-profile .cv-meta { font-size: 12px; color: var(--muted); margin-top: 2px } body.pg-profile .cv-upload-btn { font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface2); color: #334155; cursor: pointer; transition: all .12s; flex-shrink: 0 } body.pg-profile .cv-upload-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg) } body.pg-profile .cv-empty { color: var(--muted); font-size: 13px } body.pg-profile .cv-extract-details { margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden } body.pg-profile .cv-extract-details summary { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; list-style: none } body.pg-profile .cv-extract-details summary::-webkit-details-marker { display: none } body.pg-profile .cv-extract-details summary::before { content: '▶ '; font-size: 10px } body.pg-profile .cv-extract-details[open] summary::before { content: '▼ ' } body.pg-profile .cv-extract-details summary:hover { color: var(--ink) } body.pg-profile .cv-extract-pre { display: block; margin: 0; padding: 12px 16px; width: 100%; box-sizing: border-box; min-height: 220px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink); background: var(--bg-alt,#f8f9fb); white-space: pre-wrap; word-break: break-word; border: none; border-top: 1px solid var(--line); outline: none; resize: vertical } body.pg-profile .cv-extract-footer { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line) } body.pg-profile .apply-btn, body.pg-profile .ghost-btn { font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer } body.pg-profile .apply-btn { background: var(--accent); color: #fff; border: none } body.pg-profile .apply-btn:hover { background: #1d4ed8 } body.pg-profile .ghost-btn { background: #fff; border: 1px solid var(--line); color: var(--muted) } body.pg-profile .ghost-btn:hover { border-color: var(--accent); color: var(--accent) } body.pg-profile .pf-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #0f172a; color: #fff; font-size: 13px; font-weight: 600; padding: 11px 20px; border-radius: 10px; z-index: 500; opacity: 0; transition: opacity .2s; pointer-events: none } body.pg-profile .pf-toast.show { opacity: 1 } @media (max-width: 768px) { body.pg-profile .profile-page { padding: 24px 16px 64px } body.pg-profile .pf-grid { grid-template-columns: 1fr } body.pg-profile .profile-hero { gap: 18px } } /* ── ATS Accounts table (profile page) ──────────────────────── */ .ats-table { width: 100%; border-collapse: collapse; font-size: 13px } .ats-th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 14px; border-bottom: 1px solid var(--line) } .ats-td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle } .ats-td--muted { color: var(--muted); font-size: 12px } .ats-td--pw { font-family: var(--mono); font-size: 12px } .ats-reveal-btn { font-size: 11px; font-weight: 600; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 5px; padding: 2px 8px; cursor: pointer; margin-left: 8px } .ats-reveal-btn:hover { border-color: var(--accent); color: var(--accent) } .ats-del-btn { font-size: 12px; background: none; border: none; color: #94a3b8; cursor: pointer; padding: 2px 6px } .ats-del-btn:hover { color: #dc2626 } .ats-empty { padding: 14px 16px; font-size: 13px; color: var(--muted) } .ats-add-form { padding: 0 14px 14px; border-top: 1px solid var(--line); margin-top: 6px } .ats-ats-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px } .ats-ats-opt { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; user-select: none; transition: border-color .1s, background .1s } .ats-ats-opt:has(input:checked) { border-color: var(--accent); background: #eff6ff; color: var(--accent); font-weight: 600 } .ats-ats-opt input[type=radio] { display: none } .ats-add-row { margin-top: 12px } /* ── Apply with CareerPlan — CV chooser + progress panel ───────────────── */ .ap-cv-chooser { padding: 2px 0 } .ap-cv-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; max-height: 240px; overflow-y: auto } .ap-cv-opt { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); transition: border-color .12s } .ap-cv-opt:hover { border-color: var(--accent) } .ap-cv-opt input[type=radio] { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0 } .ap-cv-opt-label { font-size: 13px; color: var(--ink); line-height: 1.4 } .ap-cv-opt-hint { font-size: 11px; color: var(--muted) } .ap-cv-also { font-size: 12px; color: var(--muted); margin-bottom: 4px } .ap-link-btn { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline } .ap-field { width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); outline: none; color: var(--ink); background: var(--bg) } .ap-field:focus { border-color: var(--accent) } .ap-blocked { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px } .ap-q-row { margin-bottom: 10px } .ap-q-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px } @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } /* ── Companies index — /companies ─────────────────────────────────────────────────────────── */ body.pg-companies .co-page { max-width: 860px; margin: 0 auto; padding: 12px 20px 24px } .co-search { max-width: 420px; margin: 12px 0 8px } .co-list { list-style: none; margin: 0; padding: 0 } .co-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line) } .co-row .jr-logo { width: 36px; height: 36px; border-radius: 8px } .co-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none } .co-name { font-weight: 600; font-size: var(--fz-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .co-main:hover .co-name { color: var(--accent) } .co-meta { color: var(--muted); font-size: var(--fz-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .co-open { flex-shrink: 0; font-size: var(--fz-sm); font-weight: 600; color: var(--accent); text-decoration: none } .co-empty { padding: 32px 0; color: var(--muted) } /* ── Applications pipeline: flags, nav badge, Review page states ──────────────────────────── */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 11px; font-weight: 700; line-height: 1 } .oa-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap } .oa-flag-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor } .oa-flag.f-green { background: #dcfce7; color: #166534 } .oa-flag.f-yellow { background: #fef3c7; color: #92400e } .oa-flag.f-blue { background: #eef2ff; color: #4338ca } .oa-flag.f-grey { background: #f1f5f9; color: #64748b } .oa-row { cursor: pointer } .oa-row:hover { border-color: var(--accent) } .oa-row--attn { border-color: #f59e0b; background: #fffbeb } .ap-nav-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-right: 8px; white-space: nowrap } .rv-banner { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #fef3c7; color: #78350f; font-size: 13.5px; line-height: 1.5 } .rv-banner--auto { background: #eef2ff; color: #3730a3 } .rv-lead { font-size: 14.5px; color: var(--ink); margin: 0 0 8px } .rv-sub { font-size: 13px; color: var(--muted); margin: 0 0 12px } /* Review page (2026-09-25): a headline that says what's needed, a calm one-line wait screen, the user's questions as cards, everything we filled folded into one line. */ .rv-head { margin: 6px 0 20px } .rv-kicker { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px } .rv-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin: 0 0 6px } .rv-head-sub { font-size: 14px; color: var(--muted); line-height: 1.5 } .rv-head-sub b { color: var(--ink) } .rv-cv { display: block; margin-top: 2px; font-size: 13px } .ap-approve .q-date { flex: 0 0 auto; width: auto; min-width: 200px } .rv-wait { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 36px 28px 30px; text-align: center } .rv-wait-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 18px } .rv-bar { height: 6px; max-width: 420px; margin: 0 auto 14px; border-radius: 99px; background: var(--surface2); overflow: hidden } .rv-bar > span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .9s ease } .rv-wait-line { font-size: 15px; color: var(--ink); min-height: 22px } .rv-wait-sub { max-width: 470px; margin: 16px auto 0; font-size: 13px; color: var(--muted); line-height: 1.6 } .rv-turn .q { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px } .ap-approve .rv-turn .q:last-child { border-bottom: 1px solid var(--line) } .ap-approve .rv-turn .q--needs { background: var(--surface); border-left-color: var(--line) } .ap-approve .rv-turn .q-label { font-size: 15px; font-weight: 700 } .ap-approve .rv-turn .q-badge, .ap-approve .rv-turn .q-req { display: none } .ap-approve .rv-turn .q-opt { padding: 10px 22px; border-radius: 99px; font-size: 14px } .ap-approve .rv-turn .q.warn .q-seg { outline: none } .ap-approve .rv-turn .q.warn .q-input { border-color: var(--line); background: var(--surface) } .rv-filled > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px } .rv-filled > summary::-webkit-details-marker { display: none } .rv-filled[open] > summary { border-bottom: 1px solid var(--line) } .rv-filled-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; font-weight: 800 } .rv-filled > summary > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px } .rv-filled-sub { font-size: 12.5px; color: var(--muted) } .rv-filled-open { font-size: 13px; font-weight: 700; color: var(--accent) } .rv-filled-open::after { content: " ▾" } .rv-filled[open] .rv-filled-open::after { content: " ▴" } .rv-group-title { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 14px 0 2px } .rv-done { text-align: center } .rv-done-ic { width: 52px; height: 52px; margin: 6px auto 10px; border-radius: 50%; background: #16a34a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800 } .rv-admin { border-color: #f59e0b } .rv-admin > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #b45309; padding: 11px 18px; list-style: none } .rv-admin > summary::-webkit-details-marker { display: none } .rv-admin > summary::before { content: "▸ " } .rv-admin[open] > summary::before { content: "▾ " } .rv-admin[open] > summary { border-bottom: 1px solid var(--line) } .rv-err { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: 12.5px; white-space: pre-wrap; word-break: break-word } .rv-admin-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px } .rv-tls { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 8px } .rv-tl { font-size: 12px; color: var(--muted); padding: 2px 0 } .rv-tl span { font-variant-numeric: tabular-nums; margin-right: 8px } .rv-tl b { color: var(--ink); font-weight: 600 } /* First-visit banner on the personalised feed (after a CV upload or the emailed sign-in link) */ .br-welcome { margin: 4px 0 14px; padding: 12px 16px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: var(--fz-md); line-height: 1.5 } .br-welcome b { color: #047857 } /* Personalised feed: a job outside the countries the user can work in (src/geo.ts) */ .jr-foreign { font-size: var(--fz-2xs); color: #9a6700; background: #fff8e1; border: 1px solid #f5d98b; border-radius: 999px; padding: 1px 8px; margin-right: 6px; white-space: nowrap } .fm-geo-note { font-size: var(--fz-xs); color: var(--muted); margin: 0 0 10px; }