/* Stackcut home: the job finder (index.html + home.js). Uses the tokens in styles.css. */

.finder { padding: 56px 0 36px; }
.finder-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.finder-title {
  margin: 20px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 4.6vw + 12px, 72px); line-height: 1.02; letter-spacing: -0.02em;
}
.finder-title em { font-style: italic; color: var(--green); }
.finder-lede { max-width: 680px; margin-inline: auto; }

.finder-form { width: 100%; max-width: 760px; margin-top: 30px; }
.finder-box {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px;
  background: var(--surface); border: 1.5px solid #17181C33; border-radius: 14px;
  box-shadow: 0 1px 0 #17181C08, 0 8px 24px -12px #17181C26;
}
.finder-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.finder-ico { flex: none; color: var(--muted); }
.finder-box input {
  flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 18px; color: var(--ink);
}
.finder-box input::placeholder { color: #8A8D94; }
.finder-box input::-webkit-search-cancel-button { cursor: pointer; }
.finder-go { height: 48px; padding: 0 20px; }
.finder-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.finder-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; max-width: 820px; }
.finder-try { align-self: center; font-size: 13px; color: var(--muted); margin-right: 2px; }
.chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid #17181C22; background: #fff; color: var(--ink); text-decoration: none;
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--on, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

@media (max-width: 560px) {
  .finder { padding-top: 36px; }
  .finder-box { flex-wrap: wrap; padding: 8px; }
  .finder-ico { display: none; }
  .finder-box input { flex-basis: 100%; height: 44px; padding: 0 6px; font-size: 17px; }
  .finder-go { width: 100%; }
}

/* ---------- results ---------- */
.results:empty { display: none; }
.results { padding: 8px 0 48px; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--green); cursor: pointer; }
.link-btn:hover { color: var(--green-dark); text-decoration: underline; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; }
.small { font-size: 13px; }

.vendor-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14.5px; }
.others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--muted); }

.nomatch { max-width: 720px; margin: 0 auto; padding: 28px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.nomatch h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; }
.nomatch .finder-chips { margin-inline: auto; }

.job { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 3vw, 32px); }
.job-eyebrow { font-size: 13px; font-weight: 500; color: var(--green); }
.job-title { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 2vw + 20px, 44px); line-height: 1.05; letter-spacing: -0.015em; }
.job-title:focus { outline: none; }
.job-blurb { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; max-width: 760px; }
.job-covers, .job-usual { margin: 8px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.job-covers span, .job-usual span { color: var(--ink); font-weight: 600; }

.job-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; margin-top: 20px; padding: 14px 16px; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; }
.ctl { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ctl > span:first-child { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11.5px; }
.ctl select, .ctl input, .edit-budget input, .edit-budget select {
  height: 44px; padding: 0 10px; border: 1px solid #17181C33; border-radius: 9px; background: #fff;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink);
}
.ctl { min-width: 0; max-width: 100%; }
.ctl select { max-width: min(340px, 100%); width: 100%; }
.ctl--num { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.ctl--num > span:first-child { flex-basis: 100%; }
.ctl--num input { width: 84px; font-family: var(--mono); }
.ctl-unit { font-size: 14px; font-weight: 500; color: var(--ink); }
.ctl-hint { flex-basis: 100%; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ctl--pay .ctl-hint { max-width: 340px; font-size: 12px; line-height: 1.4; }

/* choosing something new, or replacing a tool you pay for */
.mode { flex-basis: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.mode-opts { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; background: #fff; border: 1px solid #17181C22; border-radius: 12px; }
.mode-opt {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 14px; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink); cursor: pointer;
}
.mode-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.mode-opt:hover { background: var(--ground); }
.mode-opt:has(input:checked) { background: var(--green-soft); color: var(--green-dark); font-weight: 600; }
@media (max-width: 560px) { .mode-opts { display: grid; width: 100%; } }
.named-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; font-size: 14.5px; }

/* the request as we read it: chips to remove, and an editor */
.interp { margin-top: 18px; }
.interp-head { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.interp-k { font-weight: 600; color: var(--ink); }
.interp-q { font-style: italic; color: var(--ink); }
.interp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.interp-chips > li { display: flex; min-width: 0; max-width: 100%; }
.interp-as { align-self: center; font-size: 13px; color: var(--muted); }
.ichip {
  position: relative; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; max-width: 100%; padding: 0 4px 0 13px;
  border: 1px solid #17181C2E; border-radius: 999px; background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere;
}
.ichip--seats { padding-right: 13px; }
label.ichip--seats { cursor: pointer; }
label.ichip--seats::after { content: ""; position: absolute; inset: -4px 0; }
label.ichip--seats:hover { border-color: var(--ink); }
.ichip--assumed { border-style: dashed; color: var(--muted); }
.ichip--unchecked { background: var(--fill); }
.ichip-note { font-weight: 400; color: var(--muted); white-space: nowrap; }
.ichip-x {
  position: relative; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer;
}
.ichip-x::after { content: ""; position: absolute; inset: -8px; }
.ichip-x:hover { background: var(--fill); color: var(--ink); }
.interp-edit-li.is-open { flex-basis: 100%; }
.interp-edit { width: 100%; }
.interp-edit summary {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1px dashed #17181C4D; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--green); cursor: pointer; list-style: none;
}
.interp-edit summary::-webkit-details-marker { display: none; }
.interp-edit summary::after { content: "▾"; margin-left: 6px; font-size: 11px; }
.interp-edit[open] summary::after { content: "▴"; }
.interp-edit summary:hover { border-color: var(--green); background: var(--green-soft); }
.edit-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 26px; margin-top: 10px; padding: 12px 16px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 12px;
}
.edit-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.edit-set legend { margin-bottom: 2px; padding: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.edit-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; line-height: 1.3; cursor: pointer; }
.edit-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.edit-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; }
.edit-budget input { width: 100px; font-family: var(--mono); }
.edit-budget select { min-width: 0; max-width: 100%; }

.pay-line { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.pay-line .mono { color: var(--ink); font-size: 14px; }
.short { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--green-soft); color: var(--ink); font-size: 15px; line-height: 1.5; }
.short b { color: var(--green); }
.short--none { background: var(--fill); }
.short--none b { color: var(--ink); }
.short--over { background: var(--amber-soft); }
.short--over b { color: var(--amber); }

/* one recommended way, two alternatives */
.top-picks { display: grid; gap: 12px; margin-top: 14px; }
.pick-card { min-width: 0; padding: 12px 16px 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.pick-card--pick { border: 2px solid var(--green); box-shadow: 0 10px 28px -20px #0B6B4799; }
.pick-card .opt { padding-top: 6px; border-top: 0; }
.pick-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.pick-role {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--fill);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink);
}
.pick-card--pick .pick-role { background: var(--green); color: #fff; }
.pick-way { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.alt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.alt-grid--1 { grid-template-columns: minmax(0, 1fr); }
.alt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .alt-grid, .alt-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.dropped { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.dropped b { font-weight: 600; color: var(--ink); }
.explore { margin-top: 16px; }
.explore-body { margin-top: 2px; }

.ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 860px) { .ways-grid { grid-template-columns: minmax(0, 1fr); } }
.way-col { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 10px; background: #fff; min-width: 0; }
.way-col-head h3 { margin: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.way-col--vendor .way-col-head h3 { color: var(--green); }
.way-col--oss .way-col-head h3 { color: var(--ink); }
.way-col--skill .way-col-head h3, .way-col--build .way-col-head h3 { color: var(--blue); }
.way-col-head p { margin: 3px 0 6px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.way-empty { margin: 8px 0; font-size: 14px; color: var(--muted); }
.way-more { min-height: 44px; margin: 2px 0 0; font-size: 13.5px; }
.results .chip { height: auto; min-height: 44px; }
.job .math summary { min-height: 44px; }

.opt { padding: 12px 0; border-top: 1px solid var(--line); }
.opt-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.opt-name { font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; }
.opt-name:hover { color: var(--green); text-decoration: underline; }
.opt-kind { font-size: 12.5px; color: var(--muted); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.tag--oss { background: var(--fill); color: var(--ink); }
.tag--tested { background: var(--accent-soft, var(--fill)); color: var(--ink); text-decoration: none; }
.tag--tested:hover { text-decoration: underline; }
.tag--partial { background: transparent; color: var(--muted); border: 1px solid var(--line, var(--fill)); }
.opt-install code { font-size: 12px; overflow-wrap: anywhere; }
.opt-money { margin-top: 5px; font-family: var(--mono); font-size: 14px; font-weight: 500; }
.opt-money.pos { color: var(--green); }
.opt-money.neg { color: var(--amber); }
.opt-money.nofit, .opt-money.none { color: var(--muted); }
.opt--nofit .opt-name, .opt--lacks .opt-name { color: var(--muted); }
.opt-sub { margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.opt-lim { margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.opt-req { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 7px 0 2px; padding: 0; list-style: none; }
.req { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.req-i { font-weight: 700; }
.req--ok { background: var(--green-soft); color: var(--green-dark); }
.req--no { background: var(--amber-soft); color: var(--amber); }
.req--unk { background: var(--fill); color: var(--muted); }

.job-also, .job-proof { margin-top: 20px; }
.job-also h3, .job-proof h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.job-also ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.job-also li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.job-also a { font-weight: 600; color: var(--ink); text-decoration: none; }
.job-also a:hover { color: var(--green); text-decoration: underline; }
.also-price { font-size: 12.5px; color: var(--muted); }
.job-proof ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.job-agent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; }
.job-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- every job ---------- */
.jobs-browse { padding: 44px 0 36px; }
.jobs-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 28px; }
.jobs-group h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.jobs-group ul { margin: 0; padding: 0; list-style: none; }
.jobs-group li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--line); }
.jobs-group a { font-weight: 600; color: var(--ink); text-decoration: none; }
.jobs-group a:hover { color: var(--green); text-decoration: underline; }
.jobs-group li span { font-size: 12.5px; color: var(--muted); }

/* ---------- the most searched cancel guides (rendered by data/index/render_pages.py) ---------- */
.home-cancel { padding: 40px 0 38px; }
.home-cancel .section-head { margin-bottom: 16px; }
.home-cancel-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.home-cancel-list .chip { gap: 8px; height: auto; min-height: 44px; padding: 0 15px 0 11px; font-size: 14px; }
.home-cancel-list img { flex: none; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 25%; background: #fff; object-fit: contain; }

.home-more { padding: 40px 0 44px; }
.home-more-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .home-more-grid { grid-template-columns: 1fr; } }
.home-more-h { margin: 0; font-size: 17px; }
.home-more p { font-size: 14.5px; line-height: 1.55; }