/* The vacancy workspace follows mockups/version_2/02-vacancy-tests-prototype.html. */
.vacancies-page .vacancy-workspace { grid-template-columns: clamp(280px, 34%, 460px) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); align-items: stretch; }
.vacancies-page .vacancy-workspace .vacancy-feed { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; isolation: isolate; padding: 0; border-right: 1px solid #383838; }
.vacancies-page .feed-scroll { width: 100%; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; padding-right: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #888 transparent; }
.vacancies-page .feed-controls { display: block; padding: 8px 0 18px; background: var(--bg); }
.vacancies-page .quick-filters { display: flex; min-width: 0; flex-wrap: nowrap; gap: 6px; container-type: inline-size; }
.vacancies-page .filter-chip { display: inline-flex; flex: none; min-width: 0; min-height: 42px; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 999px; background: #151515; color: #999; font: inherit; font-size: 16px; font-weight: 570; line-height: 1.15; white-space: nowrap; }
.vacancies-page .filter-chip svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vacancies-page .filter-chip:hover { background: #222; color: #eee; }
.vacancies-page .filter-chip.is-selected { flex-shrink: 1; padding-inline: 16px; background: #e9e9e9; color: #080808; }
.vacancies-page .feed-category-label { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vacancies-page .filter-chip.is-selected .feed-category-label { display: block; }
.vacancies-page .feed-category-count { color: #666; font-size: 14px; font-variant-numeric: tabular-nums; }
.vacancies-page .filter-chip.is-selected .feed-category-count { color: #555; }
/* Tabs with nothing unread show only their icon. */
.vacancies-page .feed-category-count:empty { display: none; }
.vacancies-page .filter-chip[data-quick="action"][data-has-items="true"]:not(.is-selected) { color: #ffd166; }
.vacancies-page .filter-chip[data-quick="action"][data-has-items="true"]:not(.is-selected) .feed-category-count { color: inherit; }
@container (max-width: 420px) {
  .vacancies-page .filter-chip { gap: 5px; padding-inline: 9px; }
  .vacancies-page .filter-chip.is-selected { padding-inline: 13px; }
  .vacancies-page .filter-chip.is-selected .feed-category-count { display: none; }
}
@container (max-width: 345px) {
  .vacancies-page .filter-chip:not(.is-selected) .feed-category-count { display: none; }
}
.vacancies-page .focus-list { position: relative; display: grid; gap: 0; overflow-anchor: none; }
.vacancies-page .focus-item { position: relative; min-width: 0; min-height: 0; height: auto; align-content: start; gap: 9px 16px; padding: 18px 32px 19px 18px; border-radius: 0; font-size: clamp(13px, 1.1vw, 15px); line-height: normal; }
.vacancies-page .focus-item-title { align-content: start; gap: 5px; }
.vacancies-page .focus-title-window { display: -webkit-box; max-height: 2.5em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vacancies-page .focus-item.is-selected { background: #141414; box-shadow: inset 4px 0 #fff; }
.vacancies-page .focus-item-title strong { font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.01em; }
.vacancies-page .focus-company { display: block; height: 1.3em; overflow: hidden; color: #8a8a8a; font-size: clamp(15px, 1.25vw, 16px); font-weight: 450; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.vacancies-page .focus-updated { padding-top: 4px; color: #666; font-size: 14px; line-height: 1.25; }
.vacancies-page .focus-item-foot { min-width: 0; flex-wrap: wrap; gap: 8px 12px; }
.vacancies-page .feed-status { max-width: 100%; font-size: clamp(14px, 1.15vw, 15px); line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vacancies-page .feed-status:not(:has(.feed-working)) { display: block; }
.vacancies-page .focus-item:not(.is-selected):has(.feed-status[data-tone="done"]) .focus-item-title strong { color: #9a9a9a; }
/* Unread rows keep full contrast; once read, the row steps back. Statuses that need the user keep their colour. */
.vacancies-page .focus-unread-label, .vacancies-page .feed-result-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vacancies-page .focus-item-title strong, .vacancies-page .focus-company, .vacancies-page .focus-updated, .vacancies-page .feed-status { transition: color .6s ease; }
.vacancies-page .focus-item.is-unread .focus-updated { color: #bdbdbd; }
.vacancies-page .focus-item:not(.is-unread):not(.is-selected) .focus-item-title strong { color: #8c8c8c; }
.vacancies-page .focus-item:not(.is-unread):not(.is-selected) .focus-company { color: #5c5c5c; }
.vacancies-page .focus-item:not(.is-unread):not(.is-selected) .feed-status[data-tone="working"] { color: #6e6e6e; }
.vacancies-page .focus-item.is-fresh::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .07) 50%, transparent 65%) no-repeat; background-size: 250% 100%; pointer-events: none; animation: feed-row-sheen 1.2s .5s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes feed-row-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .vacancies-page .focus-item.is-fresh::before { animation: none; content: none; }
  .vacancies-page .focus-item-title strong, .vacancies-page .focus-company, .vacancies-page .focus-updated, .vacancies-page .feed-status { transition: none; }
}
.vacancies-page .feed-status[data-tone="attention"] { color: #ffd166; }
.vacancies-page .feed-status[data-tone="done"] { color: var(--status-negative); }
.vacancies-page .feed-status[data-tone="waiting"] { color: #9a9a9a; }
.vacancies-page .feed-empty { display: grid; padding: 32px 0 0; }
.vacancies-page .feed-empty strong { color: #e6e6e6; font-size: clamp(22px, 2vw, 26px); font-weight: 620; line-height: 1.2; letter-spacing: -.02em; }
.vacancies-page .feed-ghost { display: grid; gap: 6px; margin-top: 28px; mask-image: linear-gradient(to bottom, #000 35%, transparent); }
.vacancies-page .feed-ghost-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 10px 16px; padding: 20px 16px; border-radius: 18px; background: #0d0d0d; }
.vacancies-page .feed-ghost-row span { grid-column: 1; height: 12px; border-radius: 999px; background: #1b1b1b; }
.vacancies-page .feed-ghost-row span:nth-child(1) { width: 72%; height: 18px; }
.vacancies-page .feed-ghost-row span:nth-child(2) { grid-column: 2; grid-row: 1; height: 10px; margin-top: 4px; }
.vacancies-page .feed-ghost-row span:nth-child(3) { width: 40%; }
.vacancies-page .feed-ghost-row span:nth-child(4) { width: 26%; margin-top: 4px; background: #161616; }
.vacancies-page .feed-ghost-row:nth-child(2) span:nth-child(1) { width: 58%; }
.vacancies-page .feed-ghost-row:nth-child(2) span:nth-child(3) { width: 52%; }
.vacancies-page .feed-ghost-row:nth-child(3) span:nth-child(1) { width: 84%; }
.vacancies-page .feed-ghost-row:nth-child(3) span:nth-child(4) { width: 34%; }
.vacancies-page .feed-ghost-row:nth-child(4) span:nth-child(1) { width: 50%; }
.vacancies-page .feed-ghost-row:nth-child(5) span:nth-child(1) { width: 66%; }
.vacancies-page .feed-ghost-row:nth-child(5) span:nth-child(3) { width: 36%; }
.vacancies-page .detail-ghost { display: grid; justify-items: start; padding-top: 8px; mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.vacancies-page .detail-ghost .ghost-bar { display: block; width: 30%; height: 12px; border-radius: 999px; background: #1b1b1b; }
.vacancies-page .detail-ghost-heading { display: flex; justify-content: space-between; gap: 18px; width: 100%; }
.vacancies-page .detail-ghost .is-title { width: 46%; height: 30px; }
.vacancies-page .detail-ghost .is-link { width: 110px; height: 14px; margin-top: 8px; background: #161616; }
.vacancies-page .detail-ghost .is-company { width: 28%; height: 16px; margin-top: 18px; }
.vacancies-page .detail-ghost .is-status { width: 34%; height: 16px; margin-top: 14px; background: #161616; }
.vacancies-page .detail-ghost-stages { display: flex; flex-wrap: wrap; gap: clamp(6px, 2cqw, 22px); margin: 34px 0 44px; }
.vacancies-page :is(.detail-ghost-stage, .detail-ghost-answer) { display: flex; align-items: center; gap: 16px; }
.vacancies-page .detail-ghost-stage { padding: 5px 26px 5px 5px; border-radius: 999px; background: #0d0d0d; }
.vacancies-page .detail-ghost .ghost-dot { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #161616; }
.vacancies-page .detail-ghost-stage .ghost-bar { width: 64px; height: 14px; }
.vacancies-page .detail-ghost .is-counter { width: 110px; height: 12px; }
.vacancies-page .detail-ghost-progress { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 18px 0 44px; }
.vacancies-page .detail-ghost-progress span { height: 6px; border-radius: 999px; background: #1b1b1b; }
.vacancies-page .detail-ghost .is-question { width: 52%; height: 34px; margin-bottom: 14px; }
.vacancies-page .detail-ghost .is-question.is-short { width: 38%; margin-bottom: 34px; }
.vacancies-page .detail-ghost-answer { width: 100%; min-height: 84px; margin-bottom: 20px; padding: 0 24px; border-radius: 32px; background: #0d0d0d; }
.vacancies-page .detail-ghost-answer .ghost-dot { width: 32px; height: 32px; }
.vacancies-page .detail-ghost-answer .ghost-bar { width: 24%; height: 16px; }
.vacancies-page .detail-ghost-answer:nth-child(odd of .detail-ghost-answer) .ghost-bar { width: 30%; }
.vacancies-page .vacancy-detail { container-type: inline-size; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; padding: 12px 0 40px clamp(4px, calc(4vw - 28px), 28px); background: transparent; scrollbar-width: thin; }
.vacancies-page .vacancy-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.vacancies-page .vacancy-heading > div { min-width: 0; }
.vacancies-page .vacancy-heading h1 { margin: 0; font-size: clamp(22px, 3.6cqw, 32px); font-weight: 640; line-height: 1.12; letter-spacing: -.03em; }
.vacancies-page .vacancy-company { margin-top: 8px; color: #aaa; font-size: clamp(16px, 2.8cqw, 21px); font-weight: 500; line-height: 1.35; }
.vacancies-page .vacancy-attention { margin-top: 8px; color: #ffd166; font-size: clamp(15px, 2.8cqw, 21px); font-weight: 540; line-height: 1.35; }
.vacancies-page .vacancy-attention[data-tone="working"] { color: #c7c7c7; }
.vacancies-page .vacancy-attention[data-tone="done"] { color: var(--status-negative); }
.vacancies-page .vacancy-attention[data-tone="waiting"] { color: #9a9a9a; }
.vacancies-page .vacancy-heading .text-button { padding: 5px 0 0; color: #929292; font-size: 15px; font-weight: 540; white-space: nowrap; }
.vacancies-page .vacancy-heading .text-button:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.vacancies-page .detail-bar { display: none; }
.vacancies-page .stage-dock { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(6px, 2cqw, 22px); width: 100%; margin: 24px 0 38px; }
.vacancies-page .vacancy-detail[data-stage="search"] .stage-dock { margin-bottom: 24px; }
.vacancies-page .stage-step { position: relative; display: flex; flex: none; min-width: 0; align-items: center; gap: clamp(6px, 1.8cqw, 16px); padding: 5px clamp(8px, 2cqw, 20px) 5px 5px; border: 0; border-radius: 999px; background: #151515; color: #929292; text-align: left; }
.vacancies-page .stage-step:not(:disabled):hover { background: #111; color: #fff; }
.vacancies-page .stage-step.is-selected { background: #151515; color: #fff; }
.vacancies-page .stage-step.is-locked { opacity: .35; }
.vacancies-page .stage-marker { position: relative; display: grid; width: clamp(40px, 8cqw, 58px); height: clamp(40px, 8cqw, 58px); flex: none; place-items: center; border: 2px solid transparent; border-radius: 50%; background: #232323; color: #8f8f8f; font-size: 22px; font-weight: 680; }
.vacancies-page .stage-step.is-selected .stage-marker { border-color: #fff; background: #fff; color: #080808; }
.vacancies-page .stage-step.is-current:not(.is-selected) { color: #d7d7d7; }
.vacancies-page .stage-step.is-current:not(.is-selected) .stage-marker { color: #d7d7d7; }
.vacancies-page .stage-step:disabled .stage-marker { border-color: #2a2a2a; background: transparent; }
.vacancies-page .stage-marker svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; }
.vacancies-page .stage-step.is-search-rejected .stage-marker,
.vacancies-page .stage-step.is-dialogue-rejected .stage-marker { border-color: rgba(217,139,134,.48); background: #232323; color: var(--status-negative); }
.vacancies-page .stage-step.is-search-rejected.is-selected .stage-marker,
.vacancies-page .stage-step.is-dialogue-rejected.is-selected .stage-marker { border-color: #fff; background: #fff; color: var(--status-negative); }
.vacancies-page .stage-step strong { font-size: clamp(13px, 2.4cqw, 18px); font-weight: 620; }
.vacancies-page .stage-attention-indicator { position: absolute; z-index: 2; top: 0; right: -2px; width: 16px; height: 16px; border: 2px solid var(--bg); border-radius: 50%; background: #ffd166; }
.vacancies-page .stage-pane { min-width: 0; }
.vacancy-loading { height: 100%; min-height: 200px; padding-top: 8px; }
.vacancy-loading[data-loading-stage="feed"] { min-height: 64px; padding: 20px 8px; }
/* Fast responses replace this before the indicator becomes visible. */
.vacancy-loading-indicator { display: block; width: 18px; height: 18px; border: 2px solid #333; border-top-color: #999; border-radius: 50%; opacity: 0; animation: vacancy-loading-reveal .12s ease .3s forwards, vacancy-loading-turn .9s linear .3s infinite; }
@keyframes vacancy-loading-reveal { to { opacity: 1; } }
@keyframes vacancy-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vacancy-loading-indicator { animation: vacancy-loading-reveal .01ms linear .3s forwards; } }
.vacancies-page .stage-pane .detail-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vacancies-page .stage-pane .detail-section h2 { font-size: clamp(28px, 2.5vw, 38px); font-weight: 590; line-height: 1.2; letter-spacing: -.025em; }
.vacancies-page .question-progress { margin: 0 0 30px; }
.vacancies-page .question-progress p { margin-bottom: 14px; color: #929292; font-size: 14px; }
.vacancies-page .question-progress strong { color: #f5f5f5; font-size: 25px; font-weight: 620; }
.vacancies-page .question-progress-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(16px, 1fr)); gap: 6px; }
.vacancies-page .question-progress-bars button { position: relative; height: 28px; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vacancies-page .question-progress-bars button::before { content: ""; position: absolute; inset: 10px 0 11px; border-radius: 999px; background: #282828; }
.vacancies-page .question-progress-bars button.is-done::before { background: rgba(255,209,102,.3); }
.vacancies-page .question-progress-bars button.is-pending::before { background: #777; }
.vacancies-page .question-progress-bars button[aria-current="step"]::before { background: #ffd166; }
.vacancies-page .question-progress-bars button:hover::before { filter: brightness(1.25); transform: scaleY(1.35); }
.vacancies-page .question-progress-bars button:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; border-radius: 4px; }
.application-panel [data-answer-panel][hidden] { display: none !important; }
.vacancies-page .application-panel .application-question-title { max-width: 980px; margin-bottom: 30px; font-size: clamp(28px, 2.45vw, 38px); }
.vacancies-page .application-history { margin-top: 40px; border-top: 1px solid #292929; padding-top: 20px; color: #999; }
.vacancies-page .application-history summary { width: fit-content; cursor: pointer; }
.vacancies-page .application-history h3 { color: #eee; }
.vacancies-page .vacancy-assessment { margin-top: 0; color: var(--text); white-space: normal; }
.vacancies-page .vacancy-assessment .assessment { display: block; min-width: 0; margin: 0; }
.vacancies-page .vacancy-assessment .assessment + .assessment { margin-top: 32px; }
.vacancies-page .stage-pane .vacancy-assessment h2 { margin: 4px 0 0; font-size: clamp(34px, 3.6vw, 48px); font-weight: 590; line-height: 1.12; letter-spacing: -.035em; }
.vacancies-page .vacancy-assessment p { max-width: 900px; margin-top: 16px; color: #b8b8b8; font-size: clamp(23px, 2vw, 28px); line-height: 1.5; }
.vacancies-page :is(.focus-company, .skill-tags span) { min-width: 0; overflow-wrap: anywhere; }
/* A brightness sweep while the agent scores the vacancy. */
@property --feed-working-position { syntax: "<percentage>"; inherits: false; initial-value: -20%; }
.vacancies-page :is(.feed-working, .vacancy-attention.is-working, .stage-pane .vacancy-checking-title) { width: fit-content; max-width: 100%; padding-bottom: .08em; background: linear-gradient(100deg, #858585, #f5f5f5, #858585) var(--feed-working-position) 0 / 24% 100% no-repeat, linear-gradient(#858585, #858585); background-clip: text; -webkit-background-clip: text; color: transparent; animation: feed-working-shimmer 2.6s linear infinite; }
@keyframes feed-working-shimmer {
  0% { --feed-working-position: -35%; }
  100% { --feed-working-position: 135%; }
}
@media (prefers-reduced-motion: reduce) {
  .vacancies-page :is(.feed-working, .vacancy-attention.is-working, .stage-pane .vacancy-checking-title) { animation: none; background: none; color: #c7c7c7; }
}
.vacancies-page .answer-suggestions { display: grid; gap: 14px; margin-top: 26px; }
.vacancies-page .answer-suggestions :is([data-suggestion-answer], [data-custom-answer]) { display: flex; width: 100%; min-height: 104px; align-items: center; gap: 18px; padding: 24px 28px; border: 1px solid transparent; border-radius: 32px; background: #202020; color: #bdbdbd; text-align: left; font-size: 25px; font-weight: 500; }
.vacancies-page .answer-suggestions :is([data-suggestion-answer], [data-custom-answer]):hover { background: #292929; color: #fff; }
.vacancies-page .answer-suggestions :is([data-suggestion-answer], [data-custom-answer]).is-selected { background: #2b2518; color: #fff; }
.vacancies-page .answer-suggestions :is([data-suggestion-answer], [data-custom-answer])::before { width: 38px; height: 38px; flex: none; border: 2px solid #555; border-radius: 50%; content: ''; }
.vacancies-page .answer-suggestions :is([data-suggestion-answer], [data-custom-answer]).is-selected::before { border-color: #ffd166; background: #ffd166; box-shadow: inset 0 0 0 10px #0c0c0c; }
.vacancies-page .clarification .field { margin-top: 14px; }
.vacancies-page .clarification .field textarea { border-radius: 24px; background: #0c0c0c; }

@media (max-width: 820px) {
  /* inside a vacancy the dock gives way to the top bar, like a support ticket */
  body:has(.vacancies-page .has-detail) .main-nav { display: none; }
  .app:has(.vacancies-page .has-detail) { padding-bottom: 0; }
  .vacancies-page:has(.has-detail) { margin-top: 0; }
  .vacancies-page .detail-bar { position: sticky; z-index: 6; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 0 18px; background: linear-gradient(to bottom, var(--bg) 72%, transparent); }
  .vacancies-page .detail-bar :is(.back-pill, .vacancy-link) { display: inline-flex; height: 40px; align-items: center; border: 0; border-radius: 999px; background: #1b1b1b; color: #c6c6c6; font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
  .vacancies-page .detail-bar .back-pill { gap: 2px; margin-left: -4px; padding: 0 16px 0 8px; }
  .vacancies-page .detail-bar .back-pill svg { width: 20px; height: 20px; stroke-width: 2.2; }
  .vacancies-page .detail-bar .vacancy-link { padding: 0 16px; }
  .vacancies-page .detail-bar :is(.back-pill, .vacancy-link):is(:hover, :focus-visible) { background: #242424; color: #fff; text-decoration: none; }
  .vacancies-page .vacancy-heading .vacancy-link { display: none; }
  .vacancies-page .vacancy-workspace { display: block; }
  .vacancies-page .vacancy-workspace .vacancy-feed { display: block; height: auto; overflow: visible; border: 0; }
  .vacancies-page .feed-scroll { height: auto; overflow: visible; padding-right: 0; }
  .vacancies-page .feed-controls { padding-top: 12px; padding-bottom: 14px; }
  /* safari paints the page behind its browser chrome above the sticky filters */
  .vacancies-page .feed-controls::before { content: ""; position: absolute; z-index: -1; bottom: 100%; left: 50%; width: 100vw; height: 100vh; transform: translateX(-50%); background: var(--bg); pointer-events: none; }
  .vacancies-page .filter-chip { gap: 5px; padding-inline: 11px; font-size: 14px; }
  .vacancies-page .feed-category-count { font-size: 13px; }
  .vacancies-page .focus-list { gap: 6px; }
  .vacancies-page .focus-item, .vacancies-page .focus-item.is-selected { padding: 14px; border-radius: 18px; }
  .vacancies-page .focus-item.is-fresh::before { border-radius: inherit; }
  /* touch keeps hover after a tap; only pressing and selection fill a row */
  .vacancies-page .focus-item:hover { background: transparent; }
  .vacancies-page .focus-item:active { background: #121212; }
  .vacancies-page .focus-item.is-selected, .vacancies-page .focus-item.is-selected:hover { background: #1a1a1a; box-shadow: none; }
  .vacancies-page .vacancy-detail { display: none; height: auto; overflow: visible; padding: 0 0 40px; }
  .vacancies-page .has-detail .vacancy-detail { display: block; }
  .vacancies-page .has-detail .vacancy-feed { display: none; }
  .vacancies-page .vacancy-heading { grid-template-columns: 1fr; }
  .vacancies-page .vacancy-company, .vacancies-page .vacancy-attention { font-size: 17px; }
  .vacancies-page .stage-dock { gap: 8px; margin: 26px 0; }
  .vacancies-page .stage-step { min-width: 0; gap: 8px; padding: 5px 9px 5px 5px; }
  .vacancies-page .stage-marker { width: 42px; height: 42px; font-size: 16px; }
  .vacancies-page .stage-step strong { font-size: 13px; }
  .vacancies-page .stage-attention-indicator { width: 12px; height: 12px; }
  .vacancies-page .answer-suggestions :is([data-suggestion-answer], [data-custom-answer]) { min-height: 84px; padding: 20px; border-radius: 24px; font-size: 21px; }
}

@media (min-width: 821px) {
  .vacancies-page .vacancy-workspace .vacancy-feed { overflow: visible; border-right: 0; }
  .vacancies-page .vacancy-feed::before { content: ""; position: absolute; z-index: 0; inset: 0 -.5px 0 auto; width: 1px; background: #383838; pointer-events: none; }
  /* Text aligns with the filters; rounded fills leave space before the divider. */
  .vacancies-page .feed-scroll { position: relative; z-index: 1; width: calc(100% + 19px); margin-left: -16px; padding-left: 16px; padding-right: 3px; scrollbar-width: auto; --feed-fade-top: 0px; --feed-fade-bottom: 0px; mask-image: linear-gradient(to bottom, transparent, #000 var(--feed-fade-top), #000 calc(100% - var(--feed-fade-bottom)), transparent); }
  .vacancies-page .focus-item { width: calc(100% - 12px); padding-right: 16px; padding-left: 0; border-radius: 18px; box-shadow: -16px 0 transparent; transition: background-color .18s ease, box-shadow .18s ease; }
  .vacancies-page .focus-list { gap: 6px; }
  /* Ghost rows share the real rows' fill: it starts 16px before the text and stops short of the divider. */
  .vacancies-page .feed-empty { padding-right: 12px; }
  .vacancies-page .feed-ghost { margin-left: -16px; }
  .vacancies-page .focus-item.is-fresh::before { border-radius: inherit; }
  .vacancies-page .focus-item:hover { background: #121212; box-shadow: -16px 0 #121212; }
  .vacancies-page .focus-item.is-selected { background: #1a1a1a; box-shadow: -16px 0 #1a1a1a; }
  .vacancies-page .focus-item.is-arriving { background: transparent; box-shadow: -16px 0 transparent; }
  .vacancies-page .feed-scroll::-webkit-scrollbar { width: 6px; }
  .vacancies-page .feed-scroll::-webkit-scrollbar-track { background: transparent; }
  .vacancies-page .feed-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #888; }
  .vacancies-page .feed-scroll.has-content-above { --feed-fade-top: 32px; }
  .vacancies-page .feed-scroll.has-content-below { --feed-fade-bottom: 64px; }
  .vacancies-page .vacancy-workspace:not(.detail-closed) { grid-template-columns: clamp(280px, calc(var(--desktop-shell-collapsed-width) * .34), 460px) minmax(0, 1fr); }
  .app:has(.vacancies-page) { padding-bottom: 0; }
  .vacancies-page { margin-top: 0; padding-top: 10px; height: calc(100dvh / var(--desktop-shell-scale)); }
  .vacancies-page .vacancy-heading .text-button { font-size: clamp(15px, 2.25cqw, 18.75px); }
}