/* ══ THE TRADE'S SAVED JOBS ═════════════════════════════════════════ 14 Oct 2026 (rp139), v2 ══
   Sir, 14 Oct 2026: Saved's cards "exactly like it does on the search results page ... arranged nicely", and the page
   revamped around them. The page stands on the board's own frame and sheet (assets/hyyryn-board.css: the picture,
   the bar, the section labels, the grid of three, the card); this sheet adds only what a saved list has that the
   board does not: the title in the picture, where the list is kept, the right to work said once, a chip for what
   became of a job, and the closed ones quieted. Tokens are the board's :root. */

/* the title, where the board has its search */
.sv-foot { padding: 0 24px; }
.sv-hero { max-width: 720px; margin: 0 auto; color: #fff; text-align: center; }
.sv-hero-k { margin: 0 0 10px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.sv-hero-t { margin: 0; font-family: var(--serif-display, var(--serif)); font-weight: 400; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.sv-hero-s { margin: 14px auto 0; max-width: 56ch; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .86); }

/* the bar: where you are, and the whole board */
.sv-bar { justify-content: space-between; }
/* rp143: the bar is Find a trade's cream bar now, so its link takes the trail's ink */
.sv-bar-a { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.sv-bar-a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }

/* where the list is kept; the right to work, said once */
.sv-where { margin: 0 0 18px; text-align: center; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.sv-gate { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 980px; margin: 0 auto 28px; padding: 16px 20px; border-radius: 12px;
  background: rgba(212, 169, 67, .10); box-shadow: inset 0 0 0 1px rgba(131, 99, 44, .28); }
.sv-gate[hidden], .sv-sec[hidden], .sv-empty[hidden] { display: none !important; }
.sv-gate p { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); }
.sv-gate b { color: var(--navy); }
.sv-gate-a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 999px; font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--navy); text-decoration: none; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(10, 22, 40, .34); }
.sv-gate-a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--navy); }

/* each list is a section of the board's own kind; a label as the board's "All jobs" */
.sv-sec { margin: 0 0 56px; }
.sv-sec .all-label { display: block; text-align: center; font-weight: 600; }
.sv-sec .results-meta { gap: 16px; }
.sv-board { font-family: var(--sans); font-size: 13px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* a chip for what became of a saved job: the board's chip, in three more tones */
.tc-chip-gold { background: var(--gold-soft, #D4A943); color: var(--navy); }
.tc-chip-green { background: var(--green); color: var(--cream); }
.tc-chip-muted { background: rgba(250, 248, 243, .93); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); }
/* a card's own reason, in the board's place line */
.sv-note { margin: 6px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* closed since: the same card, quieted; it comes up to full on the hand */
.sv-sec--closed .sv-card { opacity: .62; filter: saturate(.6); transition: opacity .2s ease, filter .2s ease; }
.sv-sec--closed .sv-card:hover, .sv-sec--closed .sv-card:focus-within { opacity: 1; filter: none; }
.sv-sec--closed .sv-card.is-yours { opacity: 1; filter: none; }
.sv-card.is-leaving { opacity: .35; pointer-events: none; }

/* nothing saved: the board's own empty tile, centred */
.sv-empty { margin: 0 auto 48px; text-align: center; }
.sv-say { margin: 0; min-height: 1px; text-align: center; font-family: var(--sans); font-size: 13px; color: var(--green); }

@media (max-width: 640px) {
  .sv-hero-s { font-size: 13px; }
  .sv-gate { flex-direction: column; align-items: flex-start; }
  .sv-sec .results-meta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .sv-sec--closed .sv-card { transition: none; } }

/* ══ THE RESULTS PAGE'S LAYOUT ═══════════════════════════════════════ 21 Oct 2026 (rp175) ══
   Sir: Saved jobs takes the results page's layout. The board's top (its search in the picture: the title moved to the
   bar, where the board names its page), its bar with filters built from the jobs saved, each list under the board's
   label with its sentence beneath as "Just posted" has, then the board's count (a label, "3 saved jobs") and sort, the
   grid of three with no quiet tile beside one or two cards. The rules for the title in the picture above stay for any
   copy of the page still carrying it. */
.sv-h1 { display: inline; margin: 0; font-family: var(--serif-display); font-weight: 400; font-size: 19px; line-height: inherit;
  color: var(--navy); letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 720px) { .sv-h1 { font-size: 16px; } }
.sv-bar .tmh-filters[hidden], .sv-bar-a[hidden], .sv-where[hidden] { display: none !important; }
.sv-lede { max-width: 72ch; }
.sv-sec .board-empty.sv-none { grid-column: 1 / -1; }
.sv-where { margin-bottom: 30px; }

/* ══ THE WHOLE PAGE, IMPROVED ═══════════════════════════════════════ 21 Oct 2026 (rp177) ══
   Sir: "the entire saved jobs page could do with some improvements". He chose four: a compact top, a summary line
   whose parts are filters, where he stands on each card, and taking a job off with Undo (and the closed ones cleared
   at once). Words are the board's; the summary's parts are the board's pills; the toast is the site's navy plate. */

/* a compact top: no picture, the search in a slim navy band, so the jobs are on the first screen */
.nm-hero--results.nm-hero--slim { height: auto; min-height: 0; padding: clamp(22px, 3vw, 34px) 0;
  background: radial-gradient(120% 140% at 50% 0%, #1B3156 0%, #0E1E38 55%, #0A1628 100%); }
.nm-hero--slim .nm-media, .nm-hero--slim .nm-scrim, .nm-hero--slim .nm-dots { display: none; }
.nm-hero--results.nm-hero--slim .nm-foot { position: relative; top: auto; bottom: auto; transform: none; }
.nm-hero--slim .nm-search-row { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 34px -18px rgba(0,0,0,.6); }

/* the list at a glance: each part a pill that filters */
.sv-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.sv-sum[hidden] { display: none; }
.sv-sum-b { display: inline-flex; align-items: baseline; gap: 6px; min-height: 38px; padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: #F3EFE4; box-shadow: inset 0 0 0 1px rgba(10,22,40,.14); color: var(--navy);
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.sv-sum-b b { font-family: var(--serif-display, var(--serif)); font-size: 17px; font-weight: 400; line-height: 1; }
.sv-sum-b:hover { box-shadow: inset 0 0 0 1px rgba(10,22,40,.32); }
.sv-sum-b[aria-pressed="true"] { background: var(--navy); color: #FAF8F3; box-shadow: none; }
.sv-sum-b:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* where he stands, under the title of each card still taking prices */
.sv-card .sv-state { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-family: var(--sans); font-size: 12px; font-weight: 500;
  line-height: 1.45; letter-spacing: .01em; color: #4A5262; }
.sv-card .sv-state i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #B08A3E; }
.sv-card .sv-state.is-sent { color: #0F5A4F; }
.sv-card .sv-state.is-sent i { background: #0F5A4F; }
.sv-card .sv-state.is-off i { background: #9AA1AC; }

/* the closed ones, cleared at once */
.sv-clear { margin-left: auto; padding: 8px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.2); color: var(--navy); font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; }
.sv-clear[hidden] { display: none; }
.sv-clear:hover { box-shadow: inset 0 0 0 1px rgba(10,22,40,.45); }
.sv-clear:disabled { opacity: .5; cursor: default; }

/* a card leaving: it fades and settles before the rest move up */
.sv-card.is-leaving { opacity: 0; transform: scale(.96); transition: opacity .22s ease, transform .22s ease; }

/* taken off, with Undo */
.sv-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--hg-h, 0px)); z-index: 8000;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 20px; border-radius: 999px;
  background: #0A1628; color: #FAF8F3; box-shadow: inset 0 0 0 1px rgba(226,190,106,.22), 0 18px 40px -16px rgba(10,22,40,.6);
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .24s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.sv-toast[hidden] { display: none; }
.sv-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.sv-toast-t { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.35; }
.sv-toast-u { flex: none; min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #E8C877, #D4A943);
  color: #0A1628; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sv-toast-u[hidden] { display: none; }
.sv-toast-u:focus-visible { outline: 2px solid #FAF8F3; outline-offset: 2px; }

@media (max-width: 560px) {
  .nm-hero--results.nm-hero--slim { padding: 18px 0 20px; }
  .sv-sum { gap: 6px; margin-bottom: 20px; }
  .sv-sum-b { padding: 8px 13px; font-size: 12px; }
  .sv-toast { left: 16px; right: 16px; transform: translateY(12px); border-radius: 18px; }
  .sv-toast.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-card.is-leaving, .sv-toast, .sv-sum-b { transition: none; }
}