/* Jobs area: feed, job card, job detail, add a job link, searches. Builds on app.css section 1 (job card, score, segmented, sheet). */

/* ── Shared bits ─────────────────────────────────────────── */
.status-line { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-3); font: var(--text-small); }
.spin { width: 14px; height: 14px; flex: none; display: inline-block; border-radius: 50%; border: 2px solid var(--surface-3); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Segmented control made of links (no JS): the current one carries aria-current. */
.segmented a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: var(--radius-pill);
  color: var(--ink-2); font: 600 .9375rem/1 var(--font-sans); text-decoration: none; white-space: nowrap; }
.segmented a:hover { color: var(--ink); }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.segmented--sm a { min-height: 32px; padding: 0 12px; font-size: .875rem; }

/* Chips that are radio buttons (filter sheet, "Not for me" reasons). */
.radio-chips, .reason-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-chips .chip, .reason-chips .chip { margin: 0; position: relative; font-weight: 600; }
.radio-chips .chip input, .reason-chips .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.radio-chips .chip:has(input:checked), .reason-chips .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.radio-chips .chip:has(input:focus-visible), .reason-chips .chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Popover: a <details> whose panel floats under (or above) its button. */
details.popover { position: relative; display: inline-block; }
details.popover > summary { list-style: none; cursor: pointer; }
details.popover > summary::-webkit-details-marker { display: none; }
details.popover[open] > summary { background: var(--surface-2); color: var(--ink); }
.popover__panel { position: absolute; z-index: 35; top: calc(100% + 6px); left: 0; width: min(340px, calc(100vw - 32px)); display: grid; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.popover--up .popover__panel { top: auto; bottom: calc(100% + 8px); }
.popover__title { margin: 0; font: var(--text-label); }
.popover__panel .btn { justify-self: start; }
.popover__menu { right: 0; left: auto; width: 260px; padding: var(--space-2); gap: 2px; }
.popover__menu form { margin: 0; }
.popover__menu a, .popover__menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink); font: var(--text-body); text-decoration: none; text-align: left; cursor: pointer; }
.popover__menu a:hover, .popover__menu button:hover { background: var(--surface-2); }
.popover__menu button:disabled { opacity: .5; cursor: not-allowed; }
.popover__menu .is-danger { color: var(--bad); }
.popover__note { display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); }

/* ── Feed ────────────────────────────────────────────────── */
.greet { display: grid; gap: 8px; margin-bottom: var(--space-5); }
.greet h1, .greet p { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.toolbar .segmented { flex: none; max-width: 100%; overflow-x: auto; }
.toolbar > .icon-btn { border-color: var(--line-strong); width: 36px; height: 36px; border-radius: var(--radius-sm); }
.toolbar > .icon-btn .icon { width: 18px; height: 18px; }
.toolbar .count { margin-left: 2px; }
@media (max-width: 560px) {
  .toolbar .segmented { width: 100%; }
  .toolbar .segmented a { flex: 1; justify-content: center; padding: 0 8px; }
  .toolbar .status-line { order: 9; width: 100%; }
}
.feed { display: grid; gap: var(--space-3); }
.feed-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-3); color: var(--ink-2); font: var(--text-small); }
.feed-more { margin: var(--space-4) 0 0; text-align: center; }
.feed-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); color: var(--ink-3); font: var(--text-small); }
.feed-foot__sources { max-width: 60ch; }
.feed .empty p { margin: 0 0 8px; }

/* Filter sheet: <details>; the open summary becomes the scrim (tap outside closes), the panel is a bottom sheet / centred dialog. */
details.sheet-toggle > summary { list-style: none; }
details.sheet-toggle > summary::-webkit-details-marker { display: none; }
details.sheet-toggle > summary:active { transform: none; }
details.sheet-toggle[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 50; background: var(--scrim); cursor: default; }
.sheet-toggle .sheet-wrap { display: none; }
details.sheet-toggle[open] .sheet-wrap { position: fixed; inset: auto 0 0 0; z-index: 51; display: grid; justify-items: center; pointer-events: none; }
.sheet-wrap .sheet { pointer-events: auto; margin: 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
.sheet h2 { margin: 0 0 var(--space-4); }
.sheet__body { display: grid; gap: var(--space-5); }
.sheet__body .field { margin: 0; }
.sheet__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.sheet__group > .label, .sheet__group > legend { margin: 0 0 10px; padding: 0; }
.sheet__links { display: grid; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.sheet__links a { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 14px; color: var(--ink); text-decoration: none; font-weight: 600; }
.sheet__links a + a { border-top: 1px solid var(--line); }
.sheet__links a:hover, .sheet__links a[aria-current="page"] { background: var(--surface-2); }
.sheet__links .muted { margin-left: auto; font-weight: 400; }
.sheet__foot { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 700px) {
  details.sheet-toggle[open] .sheet-wrap { inset: 0; align-items: center; }
  .sheet-wrap .sheet { padding-bottom: var(--space-5); }
}

/* ── Job card (on top of .job in app.css) ────────────────── */
.job:has(details[open]) { z-index: 3; }
.job { grid-template-columns: auto minmax(0, 1fr); }
.job > * { min-width: 0; }
.job__heading { display: grid; gap: 4px; min-width: 0; }
.job__title { margin: 0; font: var(--text-h3); overflow-wrap: anywhere; }
.job__note { grid-column: 2; margin: 0; position: relative; z-index: 1; }
.job__note .pill { white-space: normal; height: auto; min-height: 26px; padding: 4px 10px; text-decoration: none; }
.job__why { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job__fit { list-style: none; margin: 0; padding: 0; }
.job__fit li { min-width: 0; max-width: 100%; }
/* Older scores have long sentences as pros/cons: keep each to one line. */
.job__fit li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.job__actions { flex-wrap: wrap; }
.job__actions form { margin: 0; display: inline-flex; }
.job__actions .job__ad { margin-left: auto; }
.job__actions .btn--ghost .icon + span { margin-left: 6px; }
.job__actions .icon-btn[aria-pressed="true"] { background: var(--accent-soft); }
@media (max-width: 560px) {
  .job { grid-template-columns: minmax(0, 1fr); }
  .job__note { grid-column: 1; }
  .job__hide-sm { display: none; }
  .job__fit li > span:last-child { max-width: none; }
  .job__actions { flex-wrap: nowrap; gap: 6px; }
}
.toolbar .btn--ghost .icon + span { margin-left: 6px; }

/* ── Job detail ──────────────────────────────────────────── */
.jobpage__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.jobpage__title { display: grid; gap: 6px; min-width: 0; }
.jobpage__title h1 { margin: 0; overflow-wrap: anywhere; }
.jobpage .jobpage__applied { margin: 0 0 var(--space-5); }
.jobpage .card h2 { margin: 0; }
.fit-summary { margin: var(--space-2) 0 0; }
.fit-cols { display: grid; gap: var(--space-5); margin-top: var(--space-4); }
@media (min-width: 640px) { .fit-cols { grid-template-columns: 1fr 1fr; } }
.fit-cols h3 { margin: 0 0 10px; }
.fitlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fitlist li { display: flex; gap: 10px; align-items: flex-start; }
.fitlist li > span:first-child { flex: none; margin-top: 2px; }
.fitlist__pro { color: var(--ok); }
.fitlist__con { color: var(--warn); }
.ad-head { flex-wrap: wrap; }
.ad-head form { margin: 0; }
.ad-note { display: flex; gap: 6px; align-items: center; margin: 0 0 var(--space-3); }
.ad-note .icon { color: var(--info); }
.jobpage .jobtext { white-space: pre-line; color: var(--ink-2); font: var(--text-body); overflow-wrap: anywhere; }
.ad-source { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.ad-source a { display: inline-flex; align-items: center; gap: 4px; }
.jobpage__side { display: grid; gap: var(--space-4); }
.jobact h3 { margin: 0; }
.jobact p { margin: 4px 0 0; }
.jobact form { margin: 0; }
.jobact__row { display: flex; gap: var(--space-2); }
.jobact__grow { flex: 1; min-width: 0; }
.jobact__row details.popover { display: block; }
.jobact__row .popover__panel { left: auto; right: 0; }
.jobact__row .btn { padding: 0 10px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font: var(--text-small); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.jobbar { display: none; }
@media (min-width: 980px) {
  .jobpage__side { position: sticky; top: calc(var(--topbar-h) + 24px); }
}
@media (max-width: 979px) {
  .jobpage__side .jobact { display: none; }
  .jobbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: var(--space-2);
    padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .jobbar form { margin: 0; }
  .jobbar .icon-btn { border-color: var(--line-strong); }
  .jobbar__main { flex: 1; min-width: 0; }
  .jobbar .popover__panel { left: 0; }
  .main.jobpage { padding-bottom: calc(var(--tabbar-h) + 120px); }
}
@media (max-width: 899px) { .jobbar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } }

/* ── Add a job link ─────────────────────────────────────── */
.addlink-wait { display: flex; align-items: flex-start; gap: var(--space-3); }
.addlink-wait .spin { margin-top: 4px; width: 18px; height: 18px; }
.addlink-wait p { margin: 4px 0 0; }
.main .addlink-error { margin-bottom: var(--space-4); }
.addlink-foot { justify-content: flex-end; }

/* ── Searches ────────────────────────────────────────────── */
.searchlist { overflow: visible; }
.searchlist .list__item:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.searchlist .list__item.is-paused .list__title { color: var(--ink-3); }
.searchlist__link { color: var(--ink); text-decoration: none; }
.searchlist__link:hover { text-decoration: underline; }
.searchlist .list__end { gap: var(--space-1); }
.searchlist .pill { margin-right: var(--space-2); }
.searchlist__foot { margin-top: var(--space-3); }
@media (max-width: 560px) {
  .searchlist .list__item { padding: var(--space-3) var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
  .searchlist .logo { display: none; }
  .searchlist .list__end { width: 100%; justify-content: flex-end; }
  .searchlist .pill { margin-right: auto; }
}

.searchform { display: grid; gap: var(--space-4); }
.searchform__group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-4); font: var(--text-h3); }
.searchform__num { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font: 700 .875rem/1 var(--font-sans); }
.searchform__group > :last-child { margin-bottom: 0; }
.searchform__fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.searchform .card + .card, .searchform .card + details, .searchform details + .card { margin-top: 0; }
.main .searchform__error { margin-bottom: var(--space-4); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--ink); font: var(--text-label); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .icon { transition: transform var(--dur); }
details.fold[open] > summary .icon { transform: rotate(90deg); }
.searchform__more { margin-top: var(--space-4); }
.searchform__more > :last-child { margin-bottom: 0; }
.searchform__foot { display: flex; justify-content: flex-end; gap: var(--space-3); }
.job__actions .btn, .jobbar .btn { white-space: nowrap; }
.job__actions form.popover__panel, .jobbar form.popover__panel, .jobact form.popover__panel { display: grid; }
.reason-chips .chip { white-space: nowrap; }
/* Feed: the reasons panel hangs from the action row (not from the small × button), so it never runs off a phone screen. */
.job__actions details.popover { position: static; }
.job__actions .popover__panel { left: 0; max-width: 100%; }
.jobpage .split > .stack { display: grid; gap: var(--space-5); }
.jobact { display: grid; gap: var(--space-4); }
.jobpage .jobtext { max-height: none; overflow: visible; }
.searchform__group > fieldset:last-child, .searchform__group > .field:last-child, .searchform__group > .check:last-child { margin-bottom: 0 !important; }