/* Moka job text (titles, meta, descriptions, notes) changes daily and may use characters outside the
   OPPO Sans subset, so it gets one complete system face; the page chrome keeps the site font. */
.jobs-page { --jobs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.jobs-page [hidden] { display: none !important; }
/* Title row: page title on the left, data freshness on the right; everything else spans the row. */
.jobs-page { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
.jobs-page > * { grid-column: 1 / -1; }
.jobs-page > .entry-title { grid-column: 1; align-self: baseline; }
.jobs-updated { grid-column: 2; grid-row: 1; align-self: baseline; margin: 0; font-size: .8rem; color: var(--color-text-secondary); white-space: nowrap; }
.jobs-tabs { margin-bottom: 1.4rem; border-color: var(--color-border-warm); }
.jobs-page .collection-tab { min-height: 44px; box-sizing: border-box; }
.jobs-tabs .year-filter-count { margin-left: .25rem; color: var(--color-text-secondary); }
.jobs-filters { margin-bottom: 1.3rem; }
.jobs-filter { margin: .25rem 0; gap: .25rem; }
.jobs-filter__label { color: var(--color-text-secondary); font-size: .8rem; margin-right: .6rem; }
.jobs-filter .year-filter-btn { min-height: 36px; padding: .2rem .75rem; }
.jobs-filter .year-filter-btn:not(.active) { color: var(--color-text-secondary); }
.jobs-notice { padding: .8rem 0; color: var(--color-text-secondary); font-size: .9rem; }
.jobs-category__heading { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
.jobs-enhanced .jobs-category__heading { display: none; }
.job { border-bottom: 1px solid var(--color-border-warm); scroll-margin-top: 80px; }
.jobs-category .job:first-of-type { border-top: 1px solid var(--color-border-warm); }
/* Hover tint spans exactly the hairlines; the open panel shares the same inset as the summary. */
.job__summary { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 2.6rem 1.25rem .75rem; cursor: pointer; list-style: none; transition: background-color .15s ease; }
.job__summary:hover { background-color: color-mix(in srgb, var(--color-accent) 3%, transparent); }
.job__summary::-webkit-details-marker { display: none; }
.job__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.job__title { font-family: var(--jobs-font); font-size: 1.02rem; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.job__badge { font-size: .72rem; font-weight: 500; line-height: 1.6; padding: .05rem .45rem; border-radius: 4px; background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); white-space: nowrap; }
.job__badge--new { background: rgba(0, 0, 0, .05); color: var(--color-text-secondary); }
.job__meta { font-family: var(--jobs-font); font-size: .8rem; line-height: 1.6; color: var(--color-text-secondary); }
/* Centred on the summary whatever the title wraps to; only the rotation changes when opening. */
.job__chevron { width: 7px; height: 7px; position: absolute; right: 1rem; top: 50%; border-right: 1.5px solid var(--color-text-secondary); border-bottom: 1.5px solid var(--color-text-secondary); transform: translateY(-75%) rotate(45deg); transition: transform .15s ease; }
.job[open] .job__chevron { transform: translateY(-25%) rotate(225deg); }
.job__panel { padding: 0 .75rem 1.5rem; }

/* Stats lead the page; each card doubles as a cross-category highlight filter. */
.jobs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: .4rem 0 .8rem; }
.jobs-page .jobs-stat { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .95rem 1.05rem; border: 1px solid var(--color-border-warm); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 45%, transparent); color: var(--color-text-body); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.jobs-stat__value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jobs-stat__label { font-size: .78rem; color: var(--color-text-secondary); }
.jobs-stat--urgent .jobs-stat__value { color: var(--color-accent); }
.jobs-page .jobs-stat:hover:not(:disabled) { border-color: var(--color-accent); }
.jobs-page .jobs-stat[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.jobs-page .jobs-stat:disabled { cursor: default; opacity: .6; }
.jobs-tab--empty { opacity: .45; }

/* Contact is one quiet line; the QR code opens on demand. */
.jobs-contact { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; padding: .65rem 1rem; margin: 0 0 1.6rem; background: var(--color-bg); border-radius: var(--radius-md); font-size: .85rem; color: var(--color-text-secondary); scroll-margin-top: 80px; }
.jobs-contact__lead { color: var(--color-text-body); font-weight: 600; }
.jobs-contact__item strong { color: var(--color-text-body); font-weight: 600; letter-spacing: .03em; }
#content .jobs-contact__item a { color: var(--color-text-body); overflow-wrap: anywhere; }
.jobs-contact__qr { margin-left: auto; }
.jobs-contact__qr summary { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: .1rem .75rem; border: 1px solid var(--color-border-warm); border-radius: var(--radius-pill); color: var(--color-text-body); font-size: .78rem; cursor: pointer; list-style: none; }
.jobs-contact__qr summary::-webkit-details-marker { display: none; }
.jobs-contact__qr summary::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.jobs-contact__qr[open] summary { border-color: var(--color-accent); color: var(--color-accent); }
.jobs-contact__qr img { position: absolute; right: .5rem; top: calc(100% + .5rem); z-index: 5; width: 160px; height: 160px; padding: .6rem; box-sizing: content-box; background: white; border: 1px solid var(--color-border-warm); border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.jobs-feedback { display: block; min-height: 1.4em; margin-top: .35rem; color: var(--color-text-secondary); font-size: .75rem; line-height: 1.6; }

.job__contact { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--color-border-warm); }
.job__note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .8rem; font-size: .85rem; color: var(--color-text-secondary); }
/* The note is itself the copy control: readers grab it right where they read it. */
.jobs-page .job__chip { display: inline-flex; align-items: center; max-width: 100%; padding: .15rem .6rem; border: 0; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .045); color: var(--color-text-body); font: inherit; font-family: var(--jobs-font); line-height: 1.6; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.jobs-page .job__chip:hover, .jobs-page .job__chip.is-copied { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.job__chip [data-job-note] { overflow-wrap: anywhere; }
.job__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.jobs-page .job__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 108px; padding: .5rem 1rem; box-sizing: border-box; border: 1px solid var(--color-border-warm); border-radius: 5px; background: transparent; background-image: none; color: var(--color-text-body); font: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; }
.jobs-page .job__button--primary { background: var(--color-accent); border-color: var(--color-accent); color: white; }
.jobs-page .job__button:hover { border-color: var(--color-accent); }
.jobs-page .job__button--primary:hover { background: var(--color-accent); filter: brightness(.95); }
.job__description { font-family: var(--jobs-font); white-space: pre-line; font-size: .92rem; line-height: 1.9; overflow-wrap: anywhere; }
.job__description--clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.job__expand { border: 0; background: none; color: var(--color-accent); font: inherit; font-size: .85rem; min-height: 44px; padding: .5rem 0; cursor: pointer; }
.jobs-page :is(a, button, summary):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 3px; }

/* The home entry shares the intro panel; it is a quiet navigation strip. */
#content .referral-entry { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; margin: 1.4rem 0 2rem; border: 1px solid var(--color-border-warm); border-radius: 5px; color: var(--color-text-body); background: transparent; background-image: none; text-decoration: none; }
.referral-entry__label { flex-shrink: 0; font-size: .8rem; color: var(--color-accent); letter-spacing: .08em; }
.referral-entry__content { display: flex; flex: 1; flex-direction: column; gap: .3rem; }
.referral-entry__title { font-size: .88rem; }
.referral-entry__meta { font-size: .75rem; line-height: 1.7; color: var(--color-text-secondary); }
.referral-entry__arrow { color: var(--color-text-muted); }
#content .referral-entry:hover { border-color: var(--color-accent); background: transparent; color: var(--color-text-body); }
#content .referral-entry:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (max-width: 640px) {
  .jobs-tabs { gap: 1.2rem; }
  .jobs-page .collection-tab { font-size: .9rem; letter-spacing: 0; }
  .jobs-filter .year-filter-btn { min-height: 44px; }
  .job__summary { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .job__title { font-size: .98rem; }
  .jobs-stats { gap: .5rem; }
  .jobs-page .jobs-stat { padding: .75rem .7rem; }
  .jobs-stat__value { font-size: 1.5rem; }
  .jobs-stat__label { font-size: .72rem; }
  .jobs-contact { gap: .25rem .9rem; font-size: .82rem; }
  .job__buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .jobs-page .job__button { min-width: 0; min-height: 44px; }
  .job__description { font-size: .88rem; }
  #content .referral-entry { gap: .7rem; padding: .85rem; margin-top: 1.1rem; }
  .referral-entry__title { font-size: .82rem; }
  .referral-entry__meta { font-size: .7rem; }
}