/* ── вкладки ──────────────────────────────────────────────────────────────── */
.app-tabs{display:flex;gap:2px;border-bottom:1px solid var(--edge);margin:0 0 20px;flex-wrap:wrap}
.app-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:9px 14px;margin-bottom:-1px;font:inherit;font-size:.9rem;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.app-tab:hover{color:var(--ink)}
.app-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--signal);font-weight:600}
.app-tab:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.tab-n{font-family:"Spline Sans Mono",monospace;font-size:.72rem;background:var(--sunk);color:var(--muted);
  padding:1px 7px;border-radius:9px;font-variant-numeric:tabular-nums;line-height:1.5}
.app-tab[aria-selected="true"] .tab-n{background:var(--signal-wash);color:var(--signal-ink)}
.app-panel[hidden]{display:none}

/* заголовок внутри вкладки: без левого рельса — форма над ним во всю ширину */
.app-h{margin:26px 0 14px}
.app-h:first-child{margin-top:0}
.app-h h2{font-size:1.16rem}
.app-h p{margin:5px 0 0;font-size:.85rem;color:var(--muted);max-width:62ch}

.app-bar{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:12px}
.app-bar-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.btn-mini{appearance:none;font:inherit;font-size:.75rem;padding:3px 9px;border:1px solid var(--edge);
  background:var(--surface);color:var(--body);cursor:pointer;border-radius:2px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.5}
.btn-mini:hover{background:var(--sunk);color:var(--ink)}
.btn-mini:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.btn-mini[aria-pressed="true"]{background:var(--signal-wash);color:var(--signal-ink);
  border-color:transparent;font-weight:600}

/* ── список результатов ───────────────────────────────────────────────────── */
/* Строка выделяется клавишами j/k, поэтому у неё tabindex и собственный фокус:
   у article нет фокусного стиля в общем css.js. :focus, а не только
   :focus-visible — фокус ставится программно, и он обязан быть виден. */
.job[tabindex]{position:relative;scroll-margin:80px}
.job:focus{outline:2px solid var(--signal);outline-offset:-2px;background:var(--sunk)}
.job:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
#app-results[aria-busy="true"]{opacity:.5}
/* пока агрегатов нет, блок не должен занимать место отступом */
#app-insights:empty{margin-bottom:0!important}

/* ── пустая выдача ────────────────────────────────────────────────────────── */
.app-empty{border:1px solid var(--edge);background:var(--surface);border-radius:var(--r);padding:20px 22px}
.app-empty h2,.app-empty h3{margin:0 0 6px;font-size:1.16rem}
.app-empty h3{font-size:1.02rem}
.app-empty > p{margin:0;font-size:.87rem;color:var(--muted);max-width:62ch}
.app-empty-opts{display:flex;flex-direction:column;gap:1px;background:var(--edge-soft);
  border:1px solid var(--edge-soft);margin-top:16px}
.drop{display:flex;justify-content:space-between;gap:14px;align-items:center;width:100%;text-align:left;
  appearance:none;font:inherit;font-size:.87rem;background:var(--surface);color:var(--body);border:0;
  padding:10px 13px;cursor:pointer}
.drop:hover{background:var(--signal-wash);color:var(--signal-ink)}
.drop:hover b{color:var(--signal-ink)}
.drop:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.drop b{font-weight:600;color:var(--ink)}
.drop .n{font-family:"Spline Sans Mono",monospace;font-size:.82rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── ошибка сети ──────────────────────────────────────────────────────────── */
.app-err{display:flex;gap:14px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:16px}
.app-err > span{max-width:62ch}

/* ── трекер откликов ──────────────────────────────────────────────────────── */
.trk-g{margin-top:24px}
.trk-g:first-child{margin-top:0}
.trk-gh{display:flex;align-items:baseline;gap:10px;margin:0 0 9px;flex-wrap:wrap}
.trk-gh h3{font-size:.98rem}
.trk{border:1px solid var(--edge);background:var(--surface);border-radius:var(--r)}
.trk-r{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:14px 17px;
  border-bottom:1px solid var(--edge-soft)}
.trk-r:last-child{border-bottom:none}
/* Молчание помечается не цветом, а полосой со штриховкой — той же, что метит
   залежавшееся объявление на всём сайте. При монохромном зрении читается форма. */
.trk-r--ghosted::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--age);
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.28) 0 2px,transparent 2px 5px)}
.trk-t{font-family:"Instrument Sans",sans-serif;font-size:.96rem;font-weight:600;color:var(--ink);
  margin:0;letter-spacing:-.008em}
.trk-t a{color:inherit}
.trk-c{font-size:.84rem;color:var(--muted);margin:2px 0 0}
.trk-s{text-align:right;white-space:nowrap;font-family:"Spline Sans Mono",monospace;font-size:.85rem;
  color:var(--ink);font-variant-numeric:tabular-nums}
.trk-m{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px 9px;align-items:center;margin-top:10px}
.trk-days{font-family:"Spline Sans Mono",monospace;font-size:.75rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.trk-days b{color:var(--ink);font-weight:500}
.trk-r--ghosted .trk-days b{color:var(--age-ink)}
.trk-m select{width:auto;padding:3px 8px;font-size:.75rem}
.trk-n{grid-column:1/-1;margin-top:9px}
.trk-n > summary{cursor:pointer;font-size:.79rem;color:var(--muted);list-style:none;
  display:flex;align-items:center;gap:7px}
.trk-n > summary::-webkit-details-marker{display:none}
.trk-n > summary::before{content:"";width:5px;height:5px;background:var(--signal);flex:none;
  transform:rotate(45deg)}
.trk-n[open] > summary::before{transform:rotate(0deg)}
.trk-n > summary:hover{color:var(--ink)}
.trk-n > summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.trk-n textarea{margin-top:8px;font-size:.85rem}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:.735rem;padding:2px 9px;border-radius:2px;
  border:1px solid var(--edge-soft);background:var(--sunk);color:var(--muted);white-space:nowrap;
  font-weight:500}
.badge--applied,.badge--interviewing,.badge--offer{background:var(--signal-wash);color:var(--signal-ink);
  border-color:transparent}
.badge--offer{font-weight:700}
.badge--ghosted{background:var(--age-wash);color:var(--age-ink);border-color:transparent}

/* ── сохранённые срезы ────────────────────────────────────────────────────── */
.sl{border:1px solid var(--edge);background:var(--surface);border-radius:var(--r)}
.sl-r{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:13px 17px;
  border-bottom:1px solid var(--edge-soft)}
.sl-r:last-child{border-bottom:none}
.sl-l{font-size:.92rem;color:var(--ink);font-weight:600;margin:0}
.sl-a{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sl-m{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px 20px;margin-top:9px;font-size:.79rem;
  color:var(--muted);font-family:"Spline Sans Mono",monospace;font-variant-numeric:tabular-nums}
.sl-m b{color:var(--ink);font-weight:500}
.sl-when{grid-column:1/-1;margin-top:6px;font-size:.76rem;color:var(--faint)}

.cmp-pick{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cmp-pick > div{min-width:210px;flex:1}

/* ── шпаргалка по клавишам ────────────────────────────────────────────────── */
dialog.keys{border:1px solid var(--edge);background:var(--surface);color:var(--body);
  border-radius:var(--r);padding:0;max-width:470px;width:calc(100% - 32px);
  box-shadow:0 12px 44px rgba(14,18,25,.22)}
dialog.keys::backdrop{background:rgba(10,12,17,.55)}
.keys-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;
  border-bottom:1px solid var(--edge-soft)}
.keys-h h2{font-size:1.05rem}
.keys-l{margin:0;padding:6px 18px 18px;list-style:none}
.keys-l li{display:flex;gap:16px;align-items:baseline;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid var(--edge-soft);font-size:.87rem}
.keys-l li:last-child{border-bottom:none}
kbd{font-family:"Spline Sans Mono",monospace;font-size:.76rem;background:var(--sunk);
  border:1px solid var(--edge);border-bottom-width:2px;border-radius:3px;padding:1px 7px;
  color:var(--ink);white-space:nowrap}

@media (max-width:640px){
  .trk-r,.sl-r{grid-template-columns:1fr}
  .trk-s{text-align:left}
}