/* Монохром — требование заказчика (§7, R53), а не вкус.
 *
 * Разрешены только чёрный, белый и серые: у любого цвета здесь равные каналы
 * RGB. Иерархия делается размером, жирностью, курсивом и рамками; срочность
 * лида — жирностью и рамкой слева, «горячий» — чёрной плашкой с белым текстом.
 * Шапки таблиц — чёрная заливка, белый текст.
 *
 * Тест `tests/web/test_css.py` роняет сборку на любом цветном значении,
 * включая именованные цвета и hsl() с ненулевой насыщенностью. Добавлять сюда
 * цвет нельзя: сначала меняется требование, потом файл.
 */

:root {
  --ink: #000;
  --ink-2: #333;
  --ink-3: #555;
  --quiet: #767676;   /* минимум для контраста 4.5:1 на белом */
  --line: #ccc;
  --line-2: #e5e5e5;
  --wash: #f5f5f5;
  --paper: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 Georgia, "Times New Roman", serif;
}

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 1.6rem 0 .5rem; }

a { color: var(--ink); text-decoration: underline; }
a:hover { background: var(--wash); }

code, .mono { font-family: "JetBrains Mono", Consolas, monospace; font-size: .9em; }

/* Шапка */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--ink);
}
.top .brand { font-weight: 700; text-decoration: none; letter-spacing: .04em; }
.top nav { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; }
.top nav a { text-decoration: none; border-bottom: 1px solid var(--line); }
.top nav a:hover { border-bottom-color: var(--ink); }

footer { max-width: 1100px; margin: 0 auto; padding: 1rem; border-top: 1px solid var(--line-2); }

.quiet { color: var(--quiet); font-size: .9rem; }

/* Таблицы: шапка — чёрная заливка, белый текст */
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
thead th {
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  font-weight: 700;
  padding: .5rem .6rem;
}
tbody td { padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
tbody tr:hover { background: var(--wash); }

/* Срочность — жирность и рамка, не цвет */
.u-hot td:first-child, .u-hot { font-weight: 700; }
.u-hot td:first-child { border-left: 4px solid var(--ink); }
.u-warm td:first-child { border-left: 2px solid var(--ink-3); }
.u-cold { font-style: italic; color: var(--ink-3); }
.u-cold td:first-child { border-left: 1px dotted var(--line); }

.badge {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 0 .4rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .06em;
}

/* Формы */
.filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin-bottom: 1rem; }
label { display: block; margin: .6rem 0; font-weight: 700; }
label .quiet { display: block; font-weight: 400; }
input[type="text"], select, textarea {
  display: block;
  width: 100%;
  max-width: 46rem;
  margin-top: .25rem;
  padding: .35rem .5rem;
  border: 1px solid var(--ink-3);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
textarea { font-family: "JetBrains Mono", Consolas, monospace; font-size: .85rem; }
.filters select, .filters input[type="text"] { width: auto; }
button {
  padding: .4rem 1rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Блоки */
blockquote {
  margin: .5rem 0;
  padding: .6rem .9rem;
  border-left: 3px solid var(--line);
  background: var(--wash);
  white-space: pre-wrap;
}
blockquote.draft { border-left-style: double; border-left-width: 6px; }

.card { border: 1px solid var(--line); padding: .8rem 1rem; margin: 0 0 1rem; }
.card dt { font-weight: 700; }
.card dd { margin: 0 0 .4rem; }

.empty {
  border: 1px dashed var(--ink-3);
  background: var(--wash);
  padding: 1rem;
  max-width: 46rem;
}
.warn {
  border: 2px solid var(--ink);
  padding: .8rem 1rem;
  max-width: 46rem;
}

.pager { display: flex; gap: 1rem; }

@media (max-width: 640px) {
  body { font-size: 15px; }
  .top nav { gap: .6rem; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border-bottom: 2px solid var(--ink); margin-bottom: .6rem; }
}