/* JobRodeo styles for the admin and the site. Decisions and rules for new screens: docs/ui.md */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/static/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens. Every color is light-dark(light, dark): the theme follows the system, or the viewer's choice on <html>
   (data-theme, set by the account menu). Contrast checks: docs/ui.md */
:root {
  color-scheme: light dark;
  /* indigo: solid surfaces with a trace of the brand violet, the owner's pick of three (2026-11-05) */
  --bg: light-dark(#e8e5fa, #0c0a18);
  --island: light-dark(#fdfcff, #13111f);
  --island-edge: light-dark(#dbd6f4, #221f36);
  --card: light-dark(#ffffff, #1a1729);
  --card-edge: light-dark(#e7e3fa, #2a2640);
  --field: light-dark(#ffffff, #1e1b2f);
  --solid: light-dark(#ffffff, #231f36);
  --glass: light-dark(#ffffff, #1f1c31);
  --hover: light-dark(#f3f0ff, #211e33);
  --fill-hover: light-dark(rgb(20 17 42 / 0.05), rgb(255 255 255 / 0.06));
  --line: light-dark(#ece9fb, #27243b);
  --edge: light-dark(#d9d4f2, #34304b);
  --field-line: light-dark(#8a84a8, #706b8d);
  --ink: light-dark(#14112a, #f3f1ff);
  --ink-2: light-dark(#3a3554, #d3cfe8);
  --ink-3: light-dark(#625c80, #a7a1c6);
  --accent: #6c47ff;
  --accent-hover: #5b3ce0;
  --tint: light-dark(#ece7ff, rgb(173 155 255 / 0.14));
  --telegram: #229ed9;
  /* the job boards' own colors for their tiles, white marks on them pass 3:1 */
  --hh: #d6001c;
  --linkedin: #0a66c2;
  --accent-icon: light-dark(#6c47ff, #ad9bff);
  --on-accent: #ffffff;
  --signal: #ff6a00;
  --link: light-dark(#5b3ce0, #ad9bff);
  --ring: light-dark(#6c47ff, #ad9bff);
  --tip-bg: light-dark(#14112a, #f3f1ff);
  --tip-ink: light-dark(#ffffff, #14112a);
  --success: light-dark(#17704a, #7ee0a8);
  --success-bg: light-dark(#dff3e7, rgb(126 224 168 / 0.13));
  --warning: light-dark(#8f4f06, #f5c46b);
  --warning-bg: light-dark(#fcefd8, rgb(245 196 107 / 0.13));
  --danger: light-dark(#b22a20, #fca5a0);
  --danger-bg: light-dark(#fbe5e4, rgb(252 165 160 / 0.13));
  --info: light-dark(#2650c8, #9db8ff);
  --info-bg: light-dark(#e3ebfd, rgb(157 184 255 / 0.13));
  --neutral: light-dark(#625c80, #d3cfe8);
  --neutral-bg: light-dark(rgb(20 17 42 / 0.06), rgb(255 255 255 / 0.08));
  --on-danger: light-dark(#ffffff, #14112a);
  --on-success: light-dark(#ffffff, #14112a);
  --shadow-island:
    0 1px 2px light-dark(rgb(16 16 28 / 0.04), rgb(0 0 0 / 0.4)),
    0 10px 30px -18px light-dark(rgb(16 16 28 / 0.12), rgb(0 0 0 / 0.6));
  --shadow-card: 0 1px 2px light-dark(rgb(16 16 28 / 0.04), rgb(0 0 0 / 0.2));
  --shadow-raised:
    0 0 0 1px light-dark(rgb(21 19 29 / 0.08), rgb(255 255 255 / 0.1)),
    0 2px 6px -2px light-dark(rgb(16 16 28 / 0.18), rgb(0 0 0 / 0.4)),
    inset 0 1px 0 light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.08));
  --shadow-lift: 0 6px 16px -8px color-mix(in oklab, var(--accent) 70%, transparent);
  --shadow-float:
    0 16px 40px -14px light-dark(rgb(16 16 28 / 0.32), rgb(0 0 0 / 0.75)),
    0 2px 8px -3px light-dark(rgb(21 19 29 / 0.12), rgb(0 0 0 / 0.4));

  --sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Manrope Variable", var(--sans);
  /* type scale: 12.5 meta, 14 text, 17 section, 26 page */
  --t-meta: 12.5px;
  --t-text: 14px;
  --t-section: 17px;
  --t-page: 26px;
  --r-chip: 999px;
  --r-nav: 10px;
  --r-ctl: 12px;
  --r-card: 18px;
  --r-island: 24px;
  --side-w: 208px;
  --side-collapsed: 52px;
  --gutter: 18px;
  --topbar-h: 56px;
  /* motion: settle without overshoot, only transform, opacity, colors and shadows move, exits take about 60% */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-settle: cubic-bezier(0.355, 0.5, 0.25, 1);
  --t-press: 60ms;
  --t-exit: 90ms;
  --t-fast: 130ms;
  --t-enter: 220ms;
  --t-panel: 360ms;
  --t-content: 680ms;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-nav="collapsed"] {
  --side-w: var(--side-collapsed);
}
/* images cannot follow light-dark(): the logo and the select chevron switch here */
.logo-dark {
  display: none;
}
:root[data-theme="dark"] .logo-light {
  display: none;
}
:root[data-theme="dark"] .logo-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light {
    display: none;
  }
  :root:not([data-theme="light"]) .logo-dark {
    display: block;
  }
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 var(--t-text) / 1.5 var(--sans);
  letter-spacing: -0.005em;
  font-feature-settings: "cv05", "cv11";
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}
h1,
h2 {
  font-family: var(--display);
  color: var(--ink);
  text-wrap: balance;
}
h1 {
  font-size: var(--t-page);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--t-section);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
a {
  color: var(--link);
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* everything that reacts to a click shows the hand */
button,
.button,
select,
summary,
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="file"]::file-selector-button,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  cursor: pointer;
}
.icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 50;
  padding: 8px 14px;
  border-radius: var(--r-ctl);
  background: var(--accent);
  color: var(--on-accent);
}
.skip:focus {
  top: 16px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Motion on load: the island settles in, then its blocks rise one after another */
@keyframes shell-enter {
  from {
    transform: translateY(4px);
  }
}
@keyframes content-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.island {
  animation: shell-enter 700ms var(--ease-settle) backwards;
}
.page-title,
.page > .flash,
.page-main > .flash,
.page .stack > *,
.phone-panel,
.center-page > .card {
  animation: content-enter var(--t-content) var(--ease-settle) backwards;
}
.stack > :nth-child(2),
.phone-panel {
  animation-delay: 60ms;
}
.stack > :nth-child(3) {
  animation-delay: 120ms;
}
.stack > :nth-child(4) {
  animation-delay: 180ms;
}
.stack > :nth-child(n + 5) {
  animation-delay: 240ms;
}

/* Top bar: the logo on the left, the account on the right */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--topbar-h);
  padding: 0 var(--gutter);
}
.topbar-end {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 6px;
  border-radius: var(--r-nav);
  transition: transform var(--t-fast) var(--ease);
}
a.brand:hover {
  transform: scale(1.035);
}
.brand img {
  width: auto;
  height: 28px;
}
/* the avatar opens the account menu, a popover: no script */
.avatar,
button.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 2px solid var(--island-edge);
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font: 700 15px / 1 var(--display);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.avatar:hover,
button.avatar:hover {
  background: var(--accent);
  transform: scale(1.06);
  box-shadow: var(--shadow-lift);
}
.menu {
  position: fixed;
  inset: calc(var(--topbar-h) - 2px) var(--gutter) auto auto;
  width: 260px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--island-edge);
  border-radius: var(--r-card);
  background: var(--glass);
  color: var(--ink-2);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition:
    opacity var(--t-exit) var(--ease-exit),
    transform var(--t-exit) var(--ease-exit),
    overlay var(--t-exit) allow-discrete,
    display var(--t-exit) allow-discrete;
}
.menu:popover-open {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-enter) var(--ease),
    transform var(--t-enter) var(--ease),
    overlay var(--t-enter) allow-discrete,
    display var(--t-enter) allow-discrete;
}
@starting-style {
  .menu:popover-open {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}
/* who is signed in: the address and the role */
.menu-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px 8px 10px;
  color: var(--ink-3);
  font-size: var(--t-meta);
}
.menu-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-item,
button.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-nav);
  background: transparent;
  color: var(--ink);
  font: 500 var(--t-text) / 1.2 var(--sans);
  text-decoration: none;
  box-shadow: none;
  transition: background-color var(--t-fast) var(--ease);
}
.menu-item .icon {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}
.menu-item:hover,
button.menu-item:hover,
.menu-item[aria-current="page"] {
  background: var(--fill-hover);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}
.menu-theme {
  display: grid;
  gap: 6px;
  margin: 4px 0;
  padding: 8px 10px 10px;
  border-block: 1px solid var(--line);
}
.menu-theme:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
.menu-label {
  color: var(--ink-3);
  font-size: var(--t-meta);
}
/* a segmented switch: one track, the chosen value raised in it */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-ctl);
  background: var(--fill-hover);
}
.segmented button {
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: calc(var(--r-ctl) - 3px);
  background: transparent;
  color: var(--ink-3);
  font: 500 var(--t-meta) / 1 var(--sans);
  box-shadow: none;
}
.segmented button:hover {
  background: var(--hover);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}
.segmented button[aria-pressed="true"] {
  background: var(--solid);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
}

/* Shell: the navigation lies on the page, the page is a glass island to its right */
.shell {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  gap: var(--gutter);
  height: 100dvh;
  padding: calc(var(--topbar-h) + 6px) var(--gutter) var(--gutter);
  transition: grid-template-columns var(--t-panel) var(--ease-settle);
}
.side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 11px;
  border-radius: var(--r-nav);
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.nav a .icon {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}
.nav a span {
  transition: opacity var(--t-fast) var(--ease);
}
.nav a:hover {
  background: var(--fill-hover);
  color: var(--ink);
}
.nav a:hover .icon,
.nav a[aria-current="page"] .icon {
  color: var(--accent-icon);
}
/* the current page: a raised glass pill */
.nav a[aria-current="page"] {
  background: var(--glass);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-raised);
}
.side-foot {
  margin-top: auto;
}
.nav-toggle,
button.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-nav);
  background: transparent;
  color: var(--ink-3);
  font: 500 var(--t-meta) / 1 var(--sans);
  white-space: nowrap;
  box-shadow: none;
}
.nav-toggle:hover,
button.nav-toggle:hover {
  background: var(--fill-hover);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}
.nav-toggle.to-expand {
  display: none;
}
/* collapsed: icons only, the name of each item shows beside it on hover and focus */
:root[data-nav="collapsed"] .nav a,
:root[data-nav="collapsed"] .nav-toggle {
  justify-content: center;
  padding: 0;
}
:root[data-nav="collapsed"] .nav a span,
:root[data-nav="collapsed"] .nav-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}
:root[data-nav="collapsed"] .nav-toggle.to-collapse {
  display: none;
}
:root[data-nav="collapsed"] .nav-toggle.to-expand {
  display: flex;
}
:root[data-nav="collapsed"] .nav a::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 30;
  padding: 6px 10px;
  border-radius: var(--r-nav);
  background: var(--tip-bg);
  color: var(--tip-ink);
  font-size: var(--t-meta);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translate(-4px, -50%);
  transition: opacity var(--t-exit) var(--ease-exit), transform var(--t-exit) var(--ease-exit);
  pointer-events: none;
}
:root[data-nav="collapsed"] .nav a:hover::after,
:root[data-nav="collapsed"] .nav a:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
  transition: opacity var(--t-fast) var(--ease) 300ms, transform var(--t-fast) var(--ease) 300ms;
}
/* the page: one island that scrolls on its own, the rest of the screen stays put */
.island {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--island-edge);
  border-radius: var(--r-island);
  background: var(--island);
  box-shadow: var(--shadow-island);
}
.page {
  container-type: inline-size;
  padding: 26px 36px 40px;
}
/* only a confirmation page shows its title: it names the consequence */
.page-title {
  margin-bottom: 24px;
}
.stack > * + * {
  margin-top: 22px;
}
.stack > h2 + *,
.stack > .section-head + * {
  margin-top: 12px;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.count {
  font-size: var(--t-meta);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* A page with a preview: the page on the left, the preview stage on the right, about 57 to 43, the stage as tall
   as the island. A narrower island puts the stage under the page. A page without one takes the island's width */
.island {
  container: island / inline-size;
}
.page.has-panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(400px, 3fr);
  align-items: start;
  gap: 28px;
  padding-bottom: 26px;
}
.page-main {
  container-type: inline-size;
  min-width: 0;
}
@container island (width < 940px) {
  .page.has-panel {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 40px;
  }
}

/* Text helpers */
.muted,
.hint {
  color: var(--ink-3);
}
.hint,
.meta {
  font-size: var(--t-meta);
}
.nowrap {
  white-space: nowrap;
}
.prose {
  max-width: 68ch;
}
.strong {
  color: var(--ink);
  font-weight: 600;
}
.ink {
  color: var(--ink);
}

/* Surfaces: glass cards on the glass island */
.card {
  padding: 22px 24px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.card > * + * {
  margin-top: 18px;
}
.card > h2 + * {
  margin-top: 14px;
}
/* a form under the card's main content, on its own line */
.card > .settings {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* The profile for reading: who on top, then each labelled part, short lists as chips in the part's tone */
.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
}
.profile-who {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.profile-headline {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.profile-sections {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.profile-section {
  --tone: var(--neutral);
  --tone-bg: var(--neutral-bg);
  display: grid;
  gap: 10px;
}
.profile-section[data-tone="success"] {
  --tone: var(--success);
  --tone-bg: var(--success-bg);
}
.profile-section[data-tone="danger"] {
  --tone: var(--danger);
  --tone-bg: var(--danger-bg);
}
.profile-section[data-tone="accent"] {
  --tone: var(--accent-icon);
  --tone-bg: var(--tint);
}
.profile-section dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font: 700 var(--t-text) / 1.3 var(--display);
}
.profile-section dt .icon {
  width: 18px;
  height: 18px;
  color: var(--tone);
}
.profile-section dd p {
  max-width: 72ch;
  color: var(--ink-2);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}
.chip {
  padding: 4px 11px;
  border-radius: var(--r-chip);
  background: var(--neutral-bg);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.profile-section .chip {
  background: var(--tone-bg);
  color: var(--tone);
}

/* The profile form: one field per part, the levels as toggles */
/* the card's spacing above stays: only the browser's own fieldset margins and frame go */
fieldset.field {
  min-width: 0;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
}
legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 22px;
}
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* a level: a pill that fills with the brand when checked */
.check {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-chip);
  background: var(--glass);
  color: var(--ink-2);
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check:hover {
  border-color: var(--field-line);
}
.check:has(input:checked) {
  border-color: transparent;
  background: var(--accent);
  color: #ffffff;
}
.check:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
/* «Заполнить по резюме»: the text, then the file and the button in one row */
.resume .inline-form {
  margin-top: 14px;
}

/* «На что влияет профиль»: three numbered steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  padding: 0;
  list-style: none;
}
.steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.step-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent-icon);
  font: 700 13px / 1 var(--display);
}

/* A strip of facts: big numbers in glass tiles that wrap on narrow screens */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.facts > div {
  display: flex;
  flex-direction: column;
  /* a label on two lines must not lift its number above the others */
  justify-content: space-between;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.facts > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}
.facts dt {
  font-size: var(--t-meta);
  color: var(--ink-3);
}
.facts dd {
  font: 750 28px / 1.1 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Tables */
.table-wrap {
  /* keeps the visually hidden headers inside the scroll box instead of widening the page */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th,
td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}
th:first-child,
td:first-child {
  padding-left: 20px;
}
th:last-child,
td:last-child {
  padding-right: 16px;
}
th {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
td {
  border-top: 1px solid var(--line);
}
tbody tr:first-child td {
  border-top: 0;
}
tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}
tbody tr:hover {
  background: var(--hover);
}
th.num,
td.num {
  text-align: right;
  white-space: nowrap;
}
/* a header that sorts its column: the arrow shows the order on the current column and, faintly under the pointer,
   the order a click gives on another. It sits in the line of the label, so a label on two lines keeps it close;
   in a number column it leads, so the label's right edge lines up with the numbers */
.sort {
  color: inherit;
  text-decoration: none;
}
/* eight columns: a label takes two lines when the island is narrow, so the numbers decide a column's width */
.sources-table th {
  vertical-align: bottom;
  white-space: normal;
  text-wrap: balance;
}
.sources-table :is(th, td):not(:first-child, :last-child) {
  padding-inline: 11px;
}
.sort .icon {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
th.num .sort .icon {
  margin: 0 4px 0 0;
}
.sort:hover,
.sort.current {
  color: var(--ink);
}
.sort:hover .icon,
.sort:focus-visible .icon {
  opacity: 0.55;
}
.sort.current .icon {
  opacity: 1;
  color: var(--accent-icon);
}
td.end {
  text-align: right;
  white-space: nowrap;
}
.cell-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--t-meta);
  color: var(--ink-3);
}
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.row-actions form {
  display: inline-flex;
}
/* a source channel: its avatar, name and @username, the whole thing opens it in Telegram */
.source {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  color: inherit;
  text-decoration: none;
}
.source:hover .strong {
  color: var(--accent-hover);
}
.source-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--neutral-bg);
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--card-edge);
}
.source-name {
  display: grid;
  min-width: 0;
}
.source-name .strong {
  transition: color var(--t-fast) var(--ease);
}
/* a long @username breaks instead of widening the table on a phone */
.source-name .meta {
  overflow-wrap: anywhere;
}

/* The way back from a page under a section: «Источники» above «Telegram» */
.crumbs {
  margin-bottom: 6px;
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: -4px;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--accent-hover);
}
.crumbs .icon {
  width: 16px;
  height: 16px;
}

/* A kind of source on «Источники»: the whole row opens its page */
/* the rows' hover stays inside the card's corners, so the focus ring goes inside the row */
.list:has(.kind) {
  overflow: hidden;
}
.list > li:has(> .kind) {
  padding: 0;
}
.kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.kind:focus-visible {
  outline-offset: -2px;
}
.kind:hover {
  color: inherit;
  background: var(--hover);
}
.kind-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* a kind's numbers: its sources, the vacancies from it, today's; the number over its label in fixed columns, so they
   line up from row to row */
.kind-stats {
  display: grid;
  grid-template-columns: 64px 104px 96px;
  gap: 12px;
}
.kind-stat {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}
.kind-num {
  font: 700 17px / 1.2 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kind-go {
  display: grid;
  /* stays at the right edge when the counts wrap under the name */
  margin-left: auto;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.kind:hover .kind-go {
  color: var(--accent-hover);
  transform: translateX(2px);
}

/* «Собрать по промпту»: the prompt as asked, the run as one bar, then the channels found to pick from */
.prompt-quote {
  max-width: 68ch;
  padding: 10px 14px;
  border-radius: var(--r-ctl);
  background: var(--neutral-bg);
  color: var(--ink-2);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.progress {
  display: grid;
  gap: 10px;
}
progress {
  width: 100%;
  height: 8px;
  appearance: none;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--neutral-bg);
  overflow: hidden;
}
progress::-webkit-progress-bar {
  background: var(--neutral-bg);
}
progress::-webkit-progress-value {
  border-radius: var(--r-chip);
  background: var(--accent);
}
progress::-moz-progress-bar {
  border-radius: var(--r-chip);
  background: var(--accent);
}
.found-table .pick {
  width: 1%;
  padding-right: 0;
}
.pick input {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent);
}
.found-table .reason {
  min-width: 260px;
  color: var(--ink-2);
}
.source-avatar.letter {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font: 650 15px / 1 var(--display);
}
details.more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink-2);
}
details.more > summary:hover {
  color: var(--accent-hover);
}
details.more > summary::-webkit-details-marker {
  display: none;
}
details.more > summary .icon {
  transition: transform var(--t-fast) var(--ease);
}
details.more[open] > summary .icon {
  transform: rotate(180deg);
}
details.more[open] > summary {
  margin-bottom: 12px;
}
/* «Агент»: a vacancy the agent read, the row opens the source post as the agent got it */
.list:has(.read) {
  overflow: hidden;
}
.list > li:has(> .read) {
  padding: 0;
}
.read > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.read > summary::-webkit-details-marker {
  display: none;
}
.read > summary:hover {
  background: var(--hover);
}
.read > summary:focus-visible {
  outline-offset: -2px;
}
.read-main {
  display: grid;
  flex: 1 1 240px;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.read-state {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* stays at the right edge when the time and the status wrap under the title */
.read-go {
  display: grid;
  margin-left: auto;
  color: var(--ink-3);
  transition: transform var(--t-fast) var(--ease);
}
.read[open] .read-go {
  transform: rotate(180deg);
}
.read-body {
  display: grid;
  gap: 12px;
  padding: 0 20px 18px;
}
.read-text {
  max-width: 72ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.read-links {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}
.read-links > li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
}
.read-where {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--t-meta);
}
.known {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.field-error {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--danger);
}

/* Lists of people */
.list {
  padding: 0;
  list-style: none;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.list > li {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.list > li:first-child {
  border-top: 0;
}
.person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.person .who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.person .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Status badge: text says the status, color repeats it */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-chip);
  background: var(--neutral-bg);
  color: var(--neutral);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}
.badge[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success);
}
.badge[data-tone="info"] {
  background: var(--info-bg);
  color: var(--info);
}
.badge[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge[data-tone="danger"] {
  background: var(--danger-bg);
  color: var(--danger);
}

/* The account on «Профиль»: the avatar, the address with what the role can do, the role */
.card.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding-block: 16px;
}
.card.account > * + * {
  margin-top: 0;
}
.card.account .avatar {
  width: 44px;
  min-height: 44px;
  flex: none;
  font-size: 17px;
}
.card.account .avatar:hover {
  transform: none;
}
.account-main {
  display: grid;
  flex: 1 1 220px;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The connected channel: a brand tile, the name and state, the action to change it on the right */
.channel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.channel-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--tint);
  color: var(--accent-icon);
}
/* a Telegram channel: Telegram's own blue, the way people know it */
.channel-icon.telegram {
  background: var(--telegram);
  color: #ffffff;
}
/* a job board: its own color and its short mark in white, as on its logo */
.channel-icon.board-hh,
.channel-icon.board-linkedin {
  color: #ffffff;
  font: 800 18px / 1 var(--display);
  letter-spacing: -0.02em;
}
.channel-icon.board-hh {
  background: var(--hh);
}
.channel-icon.board-linkedin {
  background: var(--linkedin);
}
.channel-icon .icon {
  width: 22px;
  height: 22px;
}

/* a job board search in its table: what it looks for over its filters */
.search-cell {
  display: grid;
  gap: 6px;
  min-width: 200px;
  overflow-wrap: anywhere;
}
.channel-main {
  display: grid;
  flex: 1 1 200px;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.channel-main .strong {
  font: 700 16px / 1.3 var(--display);
}

/* «Резюме»: the upload card, then each résumé as a row of the list: the file tile (ours, so the accent on the
   tint), the label, the verdict,
   what to fix, the checks and the actions */
.resume-upload .inline-form input[type="file"] {
  flex: 1 1 240px;
  min-width: 0;
}
.resume-item {
  display: grid;
  gap: 14px;
}
.list > li.resume-item {
  padding: 20px 22px;
}
.resume-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.resume-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  background: var(--tint);
  color: var(--accent-icon);
}
.resume-icon .icon {
  width: 21px;
  height: 21px;
}
.resume-who {
  display: grid;
  flex: 1 1 220px;
  gap: 2px;
  min-width: 0;
}
.resume-label {
  overflow-wrap: anywhere;
}
.resume-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}
.resume-name {
  overflow-wrap: anywhere;
}
/* what to fix: one row per check, its icon in the check's tone, what is wrong over how to fix it */
.ats-problems,
.ats-checks {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.ats-problems > li,
.ats-checks > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ats-problems .icon,
.ats-checks .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.ats-what {
  color: var(--ink);
  font-weight: 600;
}
.ats-checks {
  gap: 8px;
  color: var(--ink-2);
}
[data-status="pass"] > .icon {
  color: var(--success);
}
[data-status="warn"] > .icon {
  color: var(--warning);
}
[data-status="fail"] > .icon {
  color: var(--danger);
}
.relabel.resume-who {
  gap: 6px;
}
.resume-head:has(.relabel) {
  align-items: flex-start;
}
.relabel .inline-form input {
  flex: 1 1 200px;
  min-width: 0;
}
.resume-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.resume-tools {
  display: flex;
  gap: 4px;
}

/* Buttons. The default button is the main action of the screen */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: var(--accent);
  color: var(--on-accent);
  font: 600 var(--t-text) / 1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(16 16 28 / 0.12);
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  touch-action: manipulation;
}
/* the main action lifts under the pointer */
button:hover,
.button.primary:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
button:active,
.button:active {
  transform: translateY(0.5px);
  box-shadow: none;
  transition-duration: var(--t-press);
}
button.secondary,
.button {
  border-color: var(--edge);
  background: var(--glass);
  color: var(--ink);
  box-shadow: 0 1px 2px light-dark(rgb(21 19 29 / 0.05), rgb(0 0 0 / 0.3));
}
button.secondary:hover,
.button:hover {
  border-color: var(--field-line);
  background: var(--solid);
  color: var(--ink);
  box-shadow: 0 4px 12px -6px light-dark(rgb(16 16 28 / 0.3), rgb(0 0 0 / 0.6));
  transform: translateY(-1px);
}
.button.primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgb(16 16 28 / 0.12);
}
button.danger {
  background: var(--danger);
  color: var(--on-danger);
  box-shadow: none;
}
button.danger:hover {
  background: color-mix(in oklab, var(--danger) 88%, var(--ink));
  box-shadow: none;
}
button:disabled,
button[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
/* Icon-only row action: a quiet square, the name lives in aria-label and title */
.icon-btn,
button.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-nav);
  background: transparent;
  color: var(--ink-3);
  box-shadow: none;
}
.icon-btn .icon {
  width: 17px;
  height: 17px;
}
.icon-btn:hover,
button.icon-btn:hover {
  background: var(--fill-hover);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}
.icon-btn.danger-hover:hover {
  background: var(--danger-bg);
  color: var(--danger);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Forms */
.field {
  display: grid;
  gap: 8px;
}
.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
label {
  font-weight: 600;
  line-height: 22px;
  color: var(--ink);
}
input[type="text"],
input[type="search"],
input[type="url"],
input[type="time"],
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-ctl);
  background: var(--field);
  color: var(--ink);
  font: 400 var(--t-text) / 1.45 var(--sans);
  box-shadow: inset 0 1px 2px light-dark(rgb(21 19 29 / 0.04), rgb(0 0 0 / 0.25));
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea {
  min-height: 96px;
  resize: vertical;
  field-sizing: content;
}
select {
  appearance: none;
  width: auto;
  min-width: 220px;
  padding-right: 38px;
  background-image: url("/static/chevron-light.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  text-overflow: ellipsis;
}
:root[data-theme="dark"] select {
  background-image: url("/static/chevron-dark.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select {
    background-image: url("/static/chevron-dark.svg");
  }
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--field-line);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  border-color: var(--ring);
  box-shadow: 0 0 0 4px light-dark(rgb(108 71 255 / 0.18), rgb(180 162 255 / 0.25));
}
input[type="file"] {
  max-width: 100%;
  color: var(--ink-3);
  font: 400 var(--t-meta) / 1.4 var(--sans);
}
input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-ctl);
  background: var(--glass);
  color: var(--ink);
  font: 600 var(--t-meta) / 1.2 var(--sans);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--field-line);
  background: var(--solid);
}
[aria-invalid="true"] {
  border-color: var(--danger);
}
.error {
  color: var(--danger);
  font-size: var(--t-meta);
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Messages next to the place they are about */
.flash,
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-ctl);
  background: var(--success-bg);
  color: var(--success);
  font-weight: 500;
}
.flash {
  margin-bottom: 22px;
}
.flash .icon,
.notice .icon {
  margin-top: 1px;
}
.notice a {
  color: inherit;
}
.flash[data-tone="info"],
.notice[data-tone="info"] {
  background: var(--info-bg);
  color: var(--info);
}
.notice[data-tone="warning"] {
  background: var(--warning-bg);
  color: var(--warning);
}
.notice[data-tone="danger"] {
  background: var(--danger-bg);
  color: var(--danger);
}
.empty {
  padding: 40px 24px;
  border: 1px dashed var(--edge);
  border-radius: var(--r-card);
  color: var(--ink-3);
  text-align: center;
}

/* Info tooltip, CSS only: opens on hover after a pause and on focus at once, fades in with a slight zoom */
.tip {
  position: relative;
  display: inline-flex;
}
.tip-trigger,
button.tip-trigger {
  width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  box-shadow: none;
}
.tip-trigger:hover,
button.tip-trigger:hover {
  background: var(--fill-hover);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}
.tip-trigger .icon {
  width: 17px;
  height: 17px;
}
.tip-bubble {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 9px 12px;
  border-radius: var(--r-ctl);
  background: var(--tip-bg);
  color: var(--tip-ink);
  box-shadow: var(--shadow-float);
  font-size: var(--t-meta);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px) scale(0.95);
  transform-origin: top center;
  transition:
    opacity var(--t-exit) var(--ease-exit),
    transform var(--t-exit) var(--ease-exit),
    visibility 0s linear var(--t-exit);
  pointer-events: none;
}
.tip.end .tip-bubble {
  left: auto;
  right: 0;
  transform: translateY(-4px) scale(0.95);
  transform-origin: top right;
}
.tip:hover .tip-bubble,
.tip:focus-within .tip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    visibility 0s;
  pointer-events: auto;
}
.tip:hover .tip-bubble {
  transition-delay: 500ms;
}
.tip.end:hover .tip-bubble,
.tip.end:focus-within .tip-bubble {
  transform: none;
}

/* Sign-in, request and policy pages: one island in the middle, before there is any navigation */
.center-page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
}
.center-page > .card {
  border-color: var(--island-edge);
  border-radius: var(--r-island);
  background: var(--island);
  box-shadow: var(--shadow-island);
}
.card.auth {
  width: min(100%, 440px);
  padding: 32px;
}
.card.auth .brand,
.card.doc .brand {
  padding: 0;
}
.card.doc {
  width: min(100%, 72ch);
  padding: 32px;
}
.card.doc > h2 {
  margin-top: 30px;
}
.card.doc ul {
  padding-left: 20px;
}
.card.doc li + li {
  margin-top: 8px;
}

/* The channel preview: a stage like Mentiora's widget preview, a dotted canvas with the channel floating in the middle
   as Telegram shows it. Telegram's own colors inside, not ours, so it reads as the channel itself */
.phone-panel {
  --tg-wall-1: light-dark(#dcd5fb, #191531);
  --tg-wall-2: light-dark(#d6e4f8, #111b2c);
  --tg-wall-3: light-dark(#f4dce6, #22152a);
  --tg-bubble: light-dark(#ffffff, #182533);
  --tg-ink: light-dark(#000000, #f5f5f5);
  --tg-meta: light-dark(#51606d, #8a9eb0);
  --tg-link: light-dark(#1f6fb8, #6ab3f3);
  --tg-head: light-dark(rgb(255 255 255 / 0.86), rgb(23 33 43 / 0.86));
  --tg-hair: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.07));
  --tg-button: light-dark(rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.1));
  --tg-button-hover: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.16));
  --tg-button-ink: light-dark(#1a5f9e, #8cc8f8);
  --stage-fill: light-dark(rgb(20 17 42 / 0.015), rgb(255 255 255 / 0.015));
  --stage-dot: light-dark(rgb(21 19 29 / 0.12), rgb(255 255 255 / 0.1));
  --panel-ring: light-dark(rgb(15 23 42 / 0.08), rgb(255 255 255 / 0.09));
  --panel-drop: light-dark(rgb(15 23 42 / 0.18), rgb(0 0 0 / 0.5));
  /* a size container: the phone fits itself into the stage by both sides */
  container: stage / size;
  position: sticky;
  /* the page's top padding: the stage stays put while the page scrolls */
  top: 26px;
  display: grid;
  place-items: center;
  /* the island's height less the page's padding above and below */
  height: calc(100dvh - var(--topbar-h) - 6px - var(--gutter) - 2px - 52px);
  min-height: 640px;
  padding: 56px 24px 20px;
  border-radius: var(--r-card);
  background:
    radial-gradient(var(--stage-dot) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--stage-fill);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stage-label {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 9px;
  background: var(--glass);
  color: var(--ink-3);
  font-size: var(--t-meta);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
}
/* a chat window's proportions, 10 by 16 and at most 460px wide: an iPhone's 1 by 2.16 read as a narrow strip on
   a desktop. A smaller stage makes the whole phone smaller, never squashed */
.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(460px, 100cqw, 100cqh * 10 / 16);
  aspect-ratio: 10 / 16;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--tg-wall-1), var(--tg-wall-2) 55%, var(--tg-wall-3));
  color: var(--tg-ink);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  box-shadow:
    0 0 0 1px var(--panel-ring),
    0 1px 2px rgb(15 23 42 / 0.04),
    0 8px 24px -4px rgb(15 23 42 / 0.12),
    0 24px 56px -12px var(--panel-drop);
}
/* the channel bar above the feed. No backdrop filter anywhere in the phone: Chrome does not clip one by the rounded
   corners of the parent, the blur sticks out of them as square corners and lines, and over a smooth wallpaper
   a translucent color looks the same */
.tg-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tg-hair);
  background: var(--tg-head);
}
.tg-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--telegram);
  color: #ffffff;
  font: 700 16px / 1 var(--display);
}
.tg-head-text {
  display: grid;
  min-width: 0;
}
.tg-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-sub {
  color: var(--tg-meta);
  font-size: 13px;
}
.tg-feed {
  display: flex;
  flex: 1;
  flex-direction: column-reverse;
  gap: 12px;
  margin: 0;
  padding: 12px 12px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.tg-feed:hover,
.tg-feed:focus-visible {
  scrollbar-color: var(--tg-hair) transparent;
}
.tg-feed:focus-visible {
  outline-offset: -3px;
}
.tg-post {
  display: grid;
  gap: 5px;
}
/* the tail corner is the bottom left, as Telegram draws a post */
.tg-bubble {
  position: relative;
  overflow: hidden;
  border-radius: 18px 18px 18px 6px;
  background: var(--tg-bubble);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.tg-card {
  display: block;
  width: calc(100% - 8px);
  height: auto;
  margin: 4px 4px 0;
  border-radius: 14px 14px 6px 6px;
}
.tg-text {
  display: grid;
  gap: 2px;
  padding: 8px 13px 22px;
  overflow-wrap: anywhere;
}
.tg-strong {
  font-weight: 600;
}
.tg-text a,
.tg-time a {
  color: var(--tg-link);
  text-decoration: none;
}
.tg-text a:hover,
.tg-time a:hover {
  text-decoration: underline;
}
.tg-stats {
  margin-top: 6px;
  font-style: italic;
}
.tg-time {
  position: absolute;
  right: 12px;
  bottom: 6px;
  color: var(--tg-meta);
  font-size: 11.5px;
}
.tg-time a {
  color: inherit;
}
/* the inline keyboard button under the post: translucent over the wallpaper */
.tg-button {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 14px;
  background: var(--tg-button);
  color: var(--tg-button-ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tg-button:hover {
  background: var(--tg-button-hover);
  color: var(--tg-button-ink);
}
.tg-button:active {
  transform: scale(0.98);
  transition-duration: var(--t-press);
}
.tg-empty {
  display: grid;
  flex: 1;
  align-content: center;
  gap: 8px;
  margin: 20px;
  color: var(--tg-ink);
  text-align: center;
}
.tg-empty p {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--tg-button);
}
/* under the page: no longer sticky, as tall as a phone */
@container island (width < 940px) {
  .phone-panel {
    container: none;
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: 56px 16px 24px;
  }
  .phone {
    width: min(100%, 460px);
  }
}

/* Narrow screens: the page scrolls as a whole, the navigation becomes a scrolling row under the logo bar */
@media (max-width: 960px) {
  .topbar {
    position: static;
    padding: 0 12px;
  }
  .shell {
    display: block;
    height: auto;
    padding: 0 12px 12px;
  }
  .side {
    flex-direction: row;
    margin: 0 -12px;
    padding: 0 12px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav {
    flex-direction: row;
  }
  .nav a {
    height: 40px;
    padding: 0 12px;
  }
  /* the row has room for the names: the collapsed state and its switch do not apply here */
  :root[data-nav="collapsed"] .nav a {
    padding: 0 12px;
  }
  :root[data-nav="collapsed"] .nav a span {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    opacity: 1;
  }
  :root[data-nav="collapsed"] .nav a::after {
    display: none;
  }
  .side-foot {
    display: none;
  }
  .island {
    overflow: visible;
    border-radius: 20px;
  }
  .page {
    padding: 22px 16px 28px;
  }
  .menu {
    inset: calc(var(--topbar-h) - 4px) 12px auto auto;
  }
}
@media (max-width: 640px) {
  /* the numbers go under the name and start from the left there */
  .kind-stats {
    grid-template-columns: repeat(3, auto);
    gap: 24px;
  }
  .kind-stat {
    justify-items: start;
    text-align: left;
  }
  /* the three sections fit the row without scrolling it */
  .nav a,
  :root[data-nav="collapsed"] .nav a {
    gap: 7px;
    padding: 0 9px;
  }
  /* four (the owner's) do not fit with their names: the other sections show their icon, the current one its name too */
  .nav:has(> li:nth-child(4)) a:not([aria-current="page"]) {
    min-width: 44px;
    justify-content: center;
  }
  .nav:has(> li:nth-child(4)) a:not([aria-current="page"]) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :root {
    --t-page: 23px;
  }
  .wide-only {
    display: none;
  }
  .card {
    padding: 18px 16px;
  }
  button,
  .button {
    min-height: 44px;
  }
  th:first-child,
  td:first-child,
  .list > li {
    padding-left: 16px;
  }
  th:last-child,
  td:last-child,
  .list > li {
    padding-right: 16px;
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts dd {
    font-size: 24px;
  }
  input[type="text"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
  }
  select {
    width: 100%;
  }
  .source {
    min-width: 0;
  }
  .resume-tools .icon-btn {
    width: 44px;
    min-height: 44px;
  }
  /* on a phone the stage would be a frame in a frame: the channel alone, as wide as the page */
  .phone-panel {
    padding: 44px 0 0;
    background: none;
    box-shadow: none;
  }
  .stage-label {
    top: 0;
    left: 0;
  }
  .phone {
    width: 100%;
    height: 600px;
    aspect-ratio: auto;
    border-radius: var(--r-card);
  }
}
/* «Вакансии»: a vacancy a row with the people at its company; «Написали» turns the row green and fills its box, so
   the mark does not rest on color alone. Cells align to the first line, the title and a name can wrap */
.vacancies-table td {
  vertical-align: top;
}
.vacancies-table .vac-date {
  width: 1%;
  padding-top: 13px;
  color: var(--ink-3);
  font-size: var(--t-meta);
  white-space: nowrap;
}
.vac-main {
  min-width: 220px;
}
.vac-person {
  min-width: 160px;
}
.vac-title,
.vac-person-name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.vac-person-name {
  font-weight: 500;
}
.vac-title:hover,
.vac-person-name:hover {
  color: var(--accent-hover);
}
a.vac-contact {
  color: var(--link);
  overflow-wrap: anywhere;
}
.vacancies-table th:last-child,
.vacancies-table .vac-mark {
  width: 1%;
  text-align: right;
}
.vacancies-table .vac-mark {
  padding-block: 6px;
}
.vacancies-table tbody tr.written,
.vacancies-table tbody tr.written:hover {
  background: var(--success-bg);
}
button.mark,
button.mark:hover,
button.mark:active {
  min-height: 34px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-weight: 500;
  box-shadow: none;
  transform: none;
}
.mark-box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--field-line);
  border-radius: 7px;
  background: var(--field);
  color: transparent;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.mark-box .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}
button.mark:hover .mark-box {
  border-color: var(--success);
}
button.mark[aria-pressed="true"] .mark-box {
  border-color: var(--success);
  background: var(--success);
  color: var(--on-success);
}
/* the column's header names the mark on a desktop, a phone's card shows it beside the box */
.mark-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* a card a vacancy: the date and the mark on top, the vacancy, then each person under its label */
  .vacancies-table thead {
    display: none;
  }
  .vacancies-table,
  .vacancies-table tbody {
    display: block;
  }
  .vacancies-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date mark" "main main" "recruiter recruiter" "engineer engineer";
    align-items: center;
    row-gap: 6px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--line);
  }
  .vacancies-table tr:first-child {
    border-top: 0;
  }
  .vacancies-table td,
  .vacancies-table td:first-child,
  .vacancies-table td:last-child {
    padding: 0;
    border: 0;
  }
  .vacancies-table .vac-date {
    grid-area: date;
    width: auto;
    padding: 0;
  }
  .vac-main {
    grid-area: main;
    min-width: 0;
  }
  .vac-person {
    min-width: 0;
    margin-top: 4px;
  }
  .vac-person:empty {
    display: none;
  }
  .vac-person:nth-child(3) {
    grid-area: recruiter;
  }
  .vac-person:nth-child(4) {
    grid-area: engineer;
  }
  .vac-person::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--ink-3);
    font-size: var(--t-meta);
  }
  .vacancies-table .vac-mark {
    grid-area: mark;
    width: auto;
    padding: 0;
  }
  button.mark,
  button.mark:hover,
  button.mark:active {
    min-height: 44px;
    margin-right: -6px;
  }
  .mark-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
}
@media (hover: none) {
  tbody tr:hover {
    background: transparent;
  }
  .facts > div:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}