/* EarthOnline Jobs: the home page, a job's page and Data sources. The search line and the cards are EarthOnline Chat's
   lobby (public/v2/home.css, copied 10-02 as it was: Bonan, "所有 bubble 的 searchbar 都是这样才行"); the rules under
   "Jobs' own" are this site's. Sizes, radii and greys are ui.css's tokens. Nothing moves but a skeleton's breathing. */

/* ---- Chat's lobby, copied ------------------------------------------------------------------------------------------ */
/* the search stays large (Chat, 10-02 night: "searchbar又太小了，可以大气点"): 24px words on a 52px line, and a 24px
   magnifier, whose 2px stroke matches the letters' weight */
.home-lobby { max-width: 640px; margin: 0 auto; padding-top: 24px; }
/* the search: a line, not a box. The words sit on an underline, the magnifier at its right end. Clicking in changes
   nothing (taste: no effect on a field). Text longer than the line scrolls sideways inside it, and the part out of view
   fades out at that edge (app.js sets fade-start / fade-end). */
.home-find { display: flex; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid var(--line); }
.home-q {
  flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--fg); font: 400 var(--text-2xl)/var(--lh-2xl) var(--font); letter-spacing: var(--tracking-tight);
  outline: none; -webkit-appearance: none; appearance: none;
}
.home-q:focus-visible { outline: none; }
.home-q::-webkit-search-cancel-button, .home-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.home-q.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.home-q.fade-end { -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); }
.home-q.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
/* the magnifier is a label: pointing at it changes its colour, nothing else */
.home-find-go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -4px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.home-find-go:hover { color: var(--fg); }
/* the magnifier 2px lower than the line's middle, level with the letters' middle */
.home-find-go { position: relative; top: 2px; }

/* the cards: a panel one step up from the page, one step more under the pointer. The link covers the whole card and is
   named by the title; the company's link lies above it. */
.home-list { list-style: none; display: grid; gap: 8px; margin: 20px 0 0; padding: 0; }
.home-item { position: relative; min-width: 0; padding: 12px 16px; border-radius: var(--radius-box); background: var(--bg2); }
.home-item:hover { background: var(--bg3); }
.home-item-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.home-item-link:focus-visible { outline: none; }
.home-item:has(.home-item-link:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.home-item-title { margin: 0; font: 600 var(--text-lg)/var(--lh-base) var(--font); text-wrap: wrap; }
.home-item-by { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 8px 0 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.home-item .home-at { flex: none; margin: 0 0 0 auto; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
/* two lines at most. When there is more, the end of the second line fades out; when the start was cut off, the start of
   the first line fades in. No "…": a fade, both ends. */
.home-clamp { max-height: 2lh; overflow: hidden; overflow-wrap: anywhere; }
.home-clamp.fade-end {
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1lh) no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1lh) no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
}
.home-clamp.fade-start {
  -webkit-mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 1lh) no-repeat;
  mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 1lh) no-repeat;
}
.home-clamp.fade-start.fade-end {
  -webkit-mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
  mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
}
/* what the search found: a pale yellow ground under dark letters, the robots' gold mixed with white */
.home-item mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, #FFC93C 55%, #fff); color: var(--on-fg); }
/* nothing found, or nothing yet: said in the middle of the column */
.home-none { margin: 48px 0 0; color: var(--muted); text-align: center; }
.home-empty { margin-top: 48px; text-align: center; }
.home-empty-title { margin: 0; font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 600; }
.home-empty-text { margin: 6px 0 0; color: var(--muted); }
/* the next page is on its way: the real card, its ground grey and its words see-through, the whole card breathing */
.home-item.is-skeleton { pointer-events: none; }
.home-item.is-skeleton :is(.home-item-title, .jb-where, .jb-where *, .badge, .jb-pay, .home-at) { border-radius: 6px; background: var(--bg3); color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .home-item.is-skeleton { animation: home-breathe 1.6s ease-in-out infinite; }
}
@keyframes home-breathe { 50% { opacity: .55; } }
.home-more { height: 1px; }
@media (max-width: 640px) {
  .home-lobby { padding-top: 16px; }
}

/* ---- Jobs' own -------------------------------------------------------------------------------------------------------- */
/* the filters: one row of small controls under the search line, the site's own outline buttons (ui.css) and a field of
   the same 32px height; a filter that is on is one step darker (taste: picked = one more step). How many jobs match
   stands at the right end, grey. */
.jb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.jb-filter[data-on] { background: var(--bg3); }
.jb-filter > svg:last-child { margin-right: -2px; color: var(--muted); }
.jb-filter[data-on] > svg:last-child { color: var(--fg); }
.jb-place.input { width: 168px; height: 32px; padding: 4px 12px; }
.jb-place::-webkit-search-cancel-button, .jb-place::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.jb-place[data-on] { background: var(--bg3); }
.jb-total { margin-left: auto; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); white-space: nowrap; }
/* a filter's menu opens under its button, left edges lined up (ui.css .menu, anchored by the button) */
.jb-menu { width: 220px; }
@supports (position-anchor: --a) {
  .jb-menu { inset: auto; top: calc(anchor(bottom) + 8px); left: anchor(left); margin: 0; position-try-fallbacks: flip-inline; }
}
@media (max-width: 640px) {
  .jb-place.input { flex: 1 1 120px; width: auto; }
  .jb-total { flex-basis: 100%; margin-left: 0; }
}

/* a card's second line: the company (its own link, over the card's), then where; one line, fading at its end when long */
.jb-where { position: relative; margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); white-space: nowrap; -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); }
.jb-co { position: relative; z-index: 2; color: var(--fg); text-decoration: none; }
.jb-co:hover { color: var(--link); }
.home-item-by .badge { flex: none; }
.jb-pay { min-width: 0; overflow: hidden; color: var(--fg); text-overflow: ellipsis; white-space: nowrap; }

/* ---- a job's page: the 640px column of the home page ------------------------------------------------------------------ */
.jb-job { max-width: 640px; margin: 0 auto; padding-top: 40px; }
.jb-job-title { margin: 0; font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.jb-job-title .badge { position: relative; top: -4px; }
.jb-job-co { margin: 8px 0 0; color: var(--muted); font-size: var(--text-base); }
.jb-job-co a { color: var(--fg); font-weight: 600; text-decoration: none; }
.jb-job-co a:hover { color: var(--link); }
/* the facts: a label column and a value column, no lines between (space alone sets them apart) */
.jb-job-facts { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 16px; margin: 24px 0 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.jb-job-facts > div { display: contents; }
.jb-job-facts dt { color: var(--muted); }
.jb-job-facts dd { margin: 0; overflow-wrap: anywhere; }
.jb-job-apply { margin: 28px 0 0; }
.jb-job-closed { margin: 28px 0 0; padding: 12px 16px; border-radius: var(--radius-box); background: var(--bg2); color: var(--muted); }
/* the description: the posting's own words, as clean text; its headings one step under the title's */
.jb-job-text { margin-top: 40px; font-size: var(--chat-text); line-height: var(--chat-lh); overflow-wrap: break-word; }
.jb-job-text p { margin: 0 0 16px; text-wrap: pretty; }
.jb-job-text h3 { margin: 32px 0 8px; font-size: var(--text-lg); line-height: var(--lh-lg); }
.jb-job-text h3:first-child { margin-top: 0; }
.jb-job-text ul { margin: 0 0 16px; padding-left: 24px; }
.jb-job-text li { margin: 6px 0 0; padding-left: 4px; }
.jb-job-text li::marker { color: var(--muted); }
.jb-job-src { margin: 40px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.jb-job-src a { color: var(--muted); }
.jb-job-src a:hover { color: var(--fg); }
@media (max-width: 640px) {
  .jb-job { padding-top: 24px; }
  .jb-job-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .jb-job-facts { grid-template-columns: 88px minmax(0, 1fr); }
  .jb-job-apply .btn { width: 100%; }
}

/* ---- Data sources ---------------------------------------------------------------------------------------------------- */
.ds { max-width: 640px; margin: 0 auto; }
.ds-size { color: var(--muted); }
.ds-src { margin-top: 24px; }
.ds-src h3 { margin: 0; }
.ds-src .jb-job-facts { margin-top: 12px; }
.ds q { quotes: '“' '”'; }