/* Начертания объявлены в fonts.css — он подключается перед этим файлом.
   Шрифты лежат локально в /static/fonts, внешних запросов страница не делает. */

/* ─── Палитра ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #EDEEE8;
  --surface: #FFFFFF;
  --ink: #202B2A;
  --ink-muted: #55625F;
  --steel: #2E4759;
  --steel-dark: #1C2E3A;
  --gold: #C68F2E;
  --gold-dark: #9C701F;
  --brick: #A14B3B;
  --line: #D8DBD1;

  --font-head: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --radius: 4px;
  --shadow: 0 1px 2px rgba(32, 43, 42, .06), 0 6px 18px rgba(32, 43, 42, .05);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; padding-bottom: 56px; }

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--steel-dark);
}

h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 21px; font-weight: 600; }

p { margin: 0 0 14px; }

a { color: var(--steel); text-decoration-color: rgba(46, 71, 89, .35); text-underline-offset: 3px; }
a:hover { color: var(--steel-dark); text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 16px;
}

.wrap.narrow { max-width: 560px; }

/* ─── Фирменный разделитель: рельсовые шпалы ──────────────────────────────── */
.sleepers {
  height: 16px;
  margin: 26px 0;
  border-top: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  background-image: repeating-linear-gradient(
    90deg,
    var(--steel) 0 3px,
    transparent 3px 15px
  );
  opacity: .55;
}

.site-header .sleepers,
.site-footer .sleepers { margin: 0; }

/* ─── Шапка ───────────────────────────────────────────────────────────────── */
.site-header { background: var(--surface); }

.header-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: var(--steel);
  border-radius: 3px;
  position: relative;
}

/* Купол собора на стальной пластине — знак города */
.brand-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: var(--gold);
  border-radius: 50% 50% 12% 12% / 62% 62% 20% 20%;
}

.brand-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  color: var(--steel-dark);
}

.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 15px;
}

.site-nav > a { text-decoration: none; font-weight: 600; }
.site-nav > a:not(.btn):hover { text-decoration: underline; }
.site-nav .nav-quiet { color: var(--ink-muted); font-weight: 400; }

/* ─── Кнопки ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-sm { padding: 8px 13px; font-size: 14px; }
.btn-block { display: block; width: 100%; }

.btn-accent { background: var(--gold); color: #241a06; border-color: var(--gold-dark); }
.btn-accent:hover { background: var(--gold-dark); color: #fff; }

.btn-steel { background: var(--steel); color: #fff; border-color: var(--steel-dark); }
.btn-steel:hover { background: var(--steel-dark); color: #fff; }

.btn-ghost { background: transparent; color: var(--steel); border-color: var(--line); }
.btn-ghost:hover { background: #f3f4ef; color: var(--steel-dark); border-color: var(--steel); }

.btn-danger { background: transparent; color: var(--brick); border-color: rgba(161, 75, 59, .4); }
.btn-danger:hover { background: var(--brick); color: #fff; border-color: var(--brick); }

/* ─── Герой ───────────────────────────────────────────────────────────────── */
.hero { background: var(--surface); padding: 30px 0 26px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.hero h1 { font-size: 32px; max-width: 18ch; }
.hero-text { color: var(--ink-muted); max-width: 62ch; }
.hero-actions { margin: 20px 0 0; }
.hero-actions .btn { width: 100%; }

/* ─── Сообщения ───────────────────────────────────────────────────────────── */
.flash {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--steel);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}

.flash-success { border-left-color: var(--gold); }
.flash-error { border-left-color: var(--brick); }

.errors {
  margin: 0 0 18px;
  padding: 12px 14px 12px 32px;
  background: #fbf1ef;
  border-left: 4px solid var(--brick);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #6d2e22;
  font-size: 15px;
}

.errors li + li { margin-top: 4px; }

.reject-reason {
  padding: 10px 14px;
  background: #fbf1ef;
  border-left: 4px solid var(--brick);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  color: #6d2e22;
}

.pending-note {
  padding: 10px 14px;
  background: #fdf6e7;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
}

/* ─── Поиск и фильтр ──────────────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.field { display: block; }
.field + .field { margin-top: 16px; }

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-muted);
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

textarea { resize: vertical; min-height: 140px; line-height: 1.55; }

input:hover, select:hover, textarea:hover { border-color: #bcc2b6; }

input:focus, select:focus, textarea:focus {
  border-color: var(--steel);
  outline: 3px solid rgba(198, 143, 46, .35);
  outline-offset: 0;
}

.field-actions { display: flex; gap: 10px; }
.field-actions .btn { flex: 1; }

.results-count {
  margin: 18px 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─── Карточки вакансий ───────────────────────────────────────────────────── */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: var(--radius);
  padding: 18px;
  transition: box-shadow .15s ease, border-left-color .15s ease;
}

.card:hover { box-shadow: var(--shadow); border-left-color: var(--gold); }

.card-link { text-decoration: none; }
.card-title { margin: 0 0 8px; font-size: 20px; color: var(--steel-dark); }
.card-link:hover .card-title { color: var(--gold-dark); }

.card-salary {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}

.card-excerpt { margin: 0 0 12px; color: var(--ink-muted); font-size: 15px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.tag {
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--steel-dark);
  background: #eef1f3;
  border: 1px solid #dbe2e6;
  border-radius: 2px;
}

.tag-quiet { background: #f4f5f0; border-color: var(--line); color: var(--ink-muted); }
.tag-date { background: transparent; border-color: transparent; color: var(--ink-muted); padding-left: 0; }

/* ─── Пусто ───────────────────────────────────────────────────────────────── */
.empty {
  padding: 34px 20px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.empty h2 { margin-bottom: 8px; }
.empty p { color: var(--ink-muted); }
.empty .btn { margin-top: 6px; }

/* ─── Пагинация ───────────────────────────────────────────────────────────── */
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; }

.pager-item {
  min-width: 40px;
  padding: 8px 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
  color: var(--steel);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pager-item:hover { border-color: var(--steel); }
.pager-current { background: var(--steel); color: #fff; border-color: var(--steel-dark); }

/* ─── Панель (формы, карточка вакансии) ───────────────────────────────────── */
.panel {
  margin: 24px 0;
  padding: 22px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel-lead { color: var(--ink-muted); font-size: 15px; }

.form { margin-top: 20px; }
.form .btn { margin-top: 22px; }

.form-alt {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ─── Страница вакансии ───────────────────────────────────────────────────── */
.breadcrumbs {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.breadcrumbs a { color: var(--ink-muted); }

.vacancy h1 { font-size: 27px; }
.vacancy .tags { margin-bottom: 16px; }

.vacancy-salary {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--steel-dark);
  padding: 10px 14px;
  background: #f4f6f7;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.vacancy-text { font-size: 17px; }
.vacancy-text p { white-space: pre-line; }

.contact-box {
  margin: 24px 0 18px;
  padding: 18px;
  background: var(--steel);
  border-radius: var(--radius);
  color: #eef1f3;
}

.contact-box h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
}

.contact-value {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  word-break: break-word;
}

.contact-hint { margin: 0; font-size: 14px; color: #c3ced5; }

.warning-note {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.back-link { margin: 0 0 10px; font-size: 15px; }

/* ─── Кабинет ─────────────────────────────────────────────────────────────── */
.dash-head { padding-top: 24px; }
.dash-head h1 { margin-bottom: 4px; }
.dash-sub { color: var(--ink-muted); font-size: 15px; }
.dash-head .btn { width: 100%; }

.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-item { margin: 14px 0; }

.dash-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dash-item-head h2 { font-size: 19px; margin: 0; }

.badge {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  border-radius: 2px;
  border: 1px solid;
}

.badge-pending { color: var(--gold-dark); background: #fdf6e7; border-color: #e8d5a8; }
.badge-approved { color: #1f5340; background: #e9f3ee; border-color: #bcd9cb; }
.badge-rejected { color: #6d2e22; background: #fbf1ef; border-color: #e3c4bd; }

.dash-item .tags { margin: 10px 0 12px; }
.dash-excerpt { color: var(--ink-muted); font-size: 15px; margin-bottom: 8px; }

.dash-contact {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 14px;
  word-break: break-word;
}

.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-actions .btn { flex: 1 1 auto; }
.inline-form { display: contents; }

/* ─── Подвал ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--surface); margin-top: auto; }

.footer-inner { padding: 22px 16px 30px; }
.footer-lead { font-size: 15px; color: var(--ink); margin-bottom: 10px; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 10px;
}

.footer-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ─── Планшет и десктоп ───────────────────────────────────────────────────── */
@media (min-width: 700px) {
  h1 { font-size: 34px; }
  .hero h1 { font-size: 40px; }
  .hero { padding: 44px 0 38px; }
  .hero-actions .btn { width: auto; }

  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .filters { flex-direction: row; align-items: flex-end; }
  .filters .field + .field { margin-top: 0; }
  .field-grow { flex: 1 1 auto; }
  .filters .field-actions { flex: 0 0 auto; }
  .filters .field-actions .btn { flex: 0 0 auto; }

  .panel { padding: 28px 26px; }

  .dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
  }

  .dash-head .btn { width: auto; flex: 0 0 auto; }
  .dash-actions .btn { flex: 0 0 auto; }
  .vacancy h1 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}