/* vote.css — веб-бюллетень. Один столбец, крупные кнопки: страницу открывают с
   телефона в зале собрания, и попасть пальцем в «За» важнее, чем украсить экран. */

:root {
  --ink: #16202a;
  --dim: #5b6b7a;
  --line: #d8dee5;
  --bg: #f4f6f8;
  --card: #ffffff;
  --accent: #1f6feb;
  --yes: #1a7f4b;
  --no: #b3341f;
  --warn: #8a5a00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 10px 16px;
  /* Шапка одинакова на всех страницах узла — бюллетене, итогах и протоколе. */
  font-size: 15px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
/* Имя узла — не пункт навигации: отделяем его от ссылок промежутком, а цвет
   оставляем обычным, хотя это и ссылка на главную страницу узла. */
.bar .brand { font-weight: 700; letter-spacing: .08em; margin-right: 14px; color: inherit; }
.bar .grow { flex: 1; }
.bar a { color: var(--accent); text-decoration: none; }
/* «Обновить» стоит в шапке рядом со ссылками, поэтому и выглядит ссылкой, а не
   кнопкой в палец высотой: большие кнопки на этой странице — только действия голоса. */
.bar button.ghost {
  border: none; background: none; padding: 0; margin: 0;
  min-height: 0; font: inherit; color: var(--accent);
}

/* Узкий экран: название своей строкой, под ним переходы (слева), язык (справа) —
   одинаково на всех трёх страницах узла. В одну строку они не помещаются. */
@media (max-width: 620px) {
  .bar { gap: 4px 14px; font-size: 15px; flex-wrap: wrap; }
  .bar .grow { display: none; }
  .bar .brand { flex-basis: 100%; }
  .bar .alt { margin-left: auto; }
}

main { max-width: 720px; margin: 0 auto; padding: 16px 14px 48px; }

h1 { font-size: 24px; margin: 16px 0 6px; }
h2 { font-size: 17px; margin: 0 0 8px; }
p { margin: 8px 0; }
.note { color: var(--dim); font-size: 14px; }
.dim { color: var(--dim); }
.big { font-size: 19px; font-weight: 600; margin: 4px 0; }
.status { color: var(--dim); font-size: 14px; min-height: 20px; }
.ok { color: var(--yes); font-weight: 600; }
.err { color: var(--no); }
.msg { min-height: 20px; font-size: 14px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 12px 0;
}

label { display: block; font-size: 14px; color: var(--dim); margin: 10px 0 4px; }
input[type=text] {
  width: 100%; font: inherit; padding: 12px; letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}

button {
  font: inherit; cursor: pointer; padding: 12px 18px; margin: 10px 8px 0 0;
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: #fff; min-height: 46px;
}
button:disabled { opacity: .5; cursor: default; }
button.ghost { background: transparent; color: var(--accent); }
/* Кнопки допуска — не действие голосования, а служебная пара: сохранить копию и
   удалить. Поэтому они мельче кнопок «За / Против / Воздержаться», которыми на этой
   странице пользуются по делу. */
#saveBtn, #forgetBtn, #restoreBtn {
  padding: 7px 12px; min-height: 0; font-size: 14px; margin-top: 8px;
}
button.yes { background: var(--yes); border-color: var(--yes); }
button.no { background: var(--no); border-color: var(--no); }
button.abstain { background: #6b7785; border-color: #6b7785; }

.q { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.q:first-child { border-top: none; }
/* Формулировка вопроса — как набрана в дашборде: поле там многострочное. */
.q .text { font-weight: 600; white-space: pre-wrap; }
/* Исход вопроса в «Итогах»: цвет помогает, но смысл несёт слово — на чёрно-белом
   экране и при дальтонизме строка читается так же. */
.q .decision { font-size: 14px; font-weight: 600; margin: 2px 0 0; }
.q .decision.yes { color: var(--yes); }
.q .decision.no { color: var(--no); }
.q .meta { color: var(--dim); font-size: 14px; }
.q .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.q .btns button { flex: 1 1 30%; margin: 10px 0 0; }
.commit { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; word-break: break-all; font-size: 14px; }


@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eef4; --dim: #9aa8b6; --line: #2c3743; --bg: #121820; --card: #1a2129;
    --accent: #4c9aff; --yes: #35b06e; --no: #ef6a4e;
  }
  input[type=text] { background: #121820; color: var(--ink); }
}