/* Кабинет собственника — дизайн-система (§5). Один файл, без сборщиков.
 * Философия HIG: clarity / deference / depth. Один акцент — зелёный. */

:root{
  --bg:#fafafa; --surface:#ffffff; --text:#1a1a1a; --muted:#6b7280;
  --accent:#3da35d;         /* фирменный зелёный: рамки, иконки, акценты */
  --accent-fill:color-mix(in srgb, var(--accent) 80%, #000);
                            /* ЗАЛИВКА под белым текстом: #3da35d даёт лишь
                               3.18:1 (провал AA); углубление до 4.75:1 */
  --accent-ink:#ffffff;
  --against:#c05252; --abstain:#4a8fab;
  /* «чернильные» варианты для ТЕКСТА (рамки — чистым цветом): подмес --text
     доводит контраст до AA в светлой теме и осветляет в тёмной */
  --for-ink:color-mix(in srgb, var(--accent) 72%, var(--text));
  --against-ink:color-mix(in srgb, var(--against) 72%, var(--text));
  --abstain-ink:color-mix(in srgb, var(--abstain) 72%, var(--text));
  --line:#e2e5e9;
  --focus:#cc6a15;          /* фокус: единственный вне-семантический цвет
                               (зелёный/красный/синий заняты состояниями);
                               светлая тема — углублён до 3:1 (WCAG 1.4.11) */
  --radius:10px; --gap:16px; --speed:180ms;
  font-family:system-ui,"Roboto",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#111315; --surface:#1b1e21; --text:#ececec; --muted:#9aa1a9;
         --line:#2a2e33; --focus:#e8842c; }   /* на тёмном ярче: 6.9:1 */
}
@media (prefers-reduced-motion:reduce){ :root{ --speed:0ms; } }

*{ box-sizing:border-box }
html,body{ margin:0 }
body{ background:var(--bg); color:var(--text); font-size:16px; line-height:1.5 }

/* каркас: мобильный (360px) — основной кейс */
#app{ max-width:560px; margin:0 auto; padding:0 var(--gap) 48px }
.top{ display:flex; justify-content:space-between; align-items:center;
      padding:14px 0; }
.topleft{ display:flex; align-items:center; gap:16px }
.brand{ display:flex; align-items:center; gap:8px;
        font-weight:700; letter-spacing:.02em; color:var(--accent) }
/* лист-марка в шапке: без текста рядом чуть крупнее, 32px; ссылка на главную */
.brandmark{ height:32px; width:auto; display:block }
.brandlink{ display:flex; align-items:center; min-height:44px; padding-right:6px;
            border-radius:var(--radius) }
/* иконка выхода: антагонист логотипа (вход слева — выход справа), тихий muted */
.iconbtn{ background:none; border:0; cursor:pointer; color:var(--muted);
          width:44px; height:44px; display:grid; place-items:center;
          border-radius:var(--radius); transition:color var(--speed), background var(--speed) }
.iconbtn .ico{ width:16px; height:16px }   /* глиф меньше лого; тач-цель — все 44px кнопки */
@media (hover:hover){
  .brandlink:hover{ background:color-mix(in srgb, var(--text) 6%, var(--surface)) }
  .iconbtn:hover{ color:var(--text);
                  background:color-mix(in srgb, var(--text) 6%, var(--surface)) }
}
/* логотип-герой на входе: сам масштаб бренда; максимум 150px = точный 2x
   от 300px-исходника (ретина без замыливания); на узких — от ширины экрана */
.hero-logo{ display:block; margin:16px auto 4px;
            width:clamp(112px, 36vw, 150px); height:auto }
h1.center{ text-align:center }
main{ display:grid; gap:var(--gap) }
h1{ font-size:24px; line-height:1.25; font-weight:600; margin:8px 0 0 }
h1:focus{ outline:none }               /* фокус после навигации — без рамки */
h2{ font-size:17px; font-weight:600; margin:0 0 6px }
p{ margin:0 }
.muted{ color:var(--muted) }
.small{ font-size:13px }
.mono{ font-family:ui-monospace,Consolas,monospace; word-break:break-all }
.warn{ color:var(--against) }
.err{ color:var(--against); font-size:14px }

/* типографика вопроса: иерархия размером и цветом, не рамками (§5) */
.qname{ font-size:26px }
.desc{ color:var(--muted); font-size:16px }
.desc :is(p,ul,ol){ margin:.4em 0 }
.resolution{ border-left:4px solid var(--accent) }

/* карточки: surface + мягкая тень, глубина умеренная */
.card{ background:var(--surface); border-radius:var(--radius);
       padding:14px 16px; border:1px solid var(--line); display:grid; gap:8px }
.card.ok{ border-left:4px solid var(--accent) }

/* поля */
.field{ display:grid; gap:6px }
label{ font-size:14px; color:var(--muted) }
input{ font:inherit; padding:12px 14px; min-height:44px;
       border:1px solid var(--line); border-radius:var(--radius);
       background:var(--surface); color:var(--text); width:100% }

/* кнопки: главная — единственная зелёная на экране (§5: один акцент).
   Единый язык с вариантами ответа: цветная рамка — признак действия.
   Рамка — яркий фирменный --accent поверх углублённой AA-заливки;
   hover = заливка глубже, рамка контрастирует сильнее сама собой. */
.btn{ font:inherit; font-weight:600; min-height:48px; padding:10px 18px;
      border:2px solid var(--accent); border-radius:var(--radius); cursor:pointer;
      background:var(--accent-fill); color:var(--accent-ink);
      transition:background var(--speed), border-color var(--speed), opacity var(--speed) }
.btn:disabled{ opacity:.45; cursor:not-allowed }
.btn.ghost{ background:transparent; color:var(--text);
            border:2px solid var(--line) }
@media (hover:hover){
  .btn:hover:not(:disabled):not(.ghost):not([class*='outline']){
    background:color-mix(in srgb, var(--accent) 65%, #000) }
  .btn.ghost:hover:not(:disabled){
    background:color-mix(in srgb, var(--text) 6%, var(--surface));
    border-color:color-mix(in srgb, var(--text) 30%, var(--line)) }
}
.link{ background:none; border:0; padding:8px 0; font:inherit;
       color:var(--abstain-ink); text-decoration:underline; cursor:pointer;
       min-height:44px; display:inline-flex; align-items:center }
a{ color:var(--abstain-ink) }
/* тихое действие (Выйти): редкое и нежелательное — иерархией ниже ссылок
   (muted, AA 4.6/7.1), подчёркивание только на hover */
.link.quiet{ color:var(--muted); text-decoration:none }
@media (hover:hover){ .link.quiet:hover{ color:var(--text); text-decoration:underline } }
a.btn{ text-decoration:none; display:inline-flex; align-items:center;
       justify-content:center }

/* фокус-стили. Инпуты: кольцо всегда (фокус = «сюда идёт ввод»).
   Кнопки/ссылки: кольцо только при клавиатурной навигации (html.kbd
   ставится по Tab) — мышь и программный focus() обводку не рисуют. */
input:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
:is(a,button):focus-visible{ outline:none }
html.kbd :is(a,button):focus-visible{
  outline:3px solid var(--focus); outline-offset:2px }

/* спиннер загрузки */
.spin{ width:16px; height:16px; border:2px solid var(--accent-ink);
       border-top-color:transparent; border-radius:50%; display:inline-block;
       vertical-align:-3px; animation:sp .7s linear infinite }
@keyframes sp{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .spin{ animation:none; opacity:.6 } }

/* прогресс: всегда виден, sticky (§5) */
.progress{ display:grid; gap:6px; font-size:14px; color:var(--muted);
           padding:10px 0 }
.progress.sticky{ position:sticky; top:0; background:var(--bg); z-index:2 }
.bar{ height:4px; border-radius:2px; background:var(--line); overflow:hidden }
.bar i{ display:block; height:100%; background:var(--accent);
        transition:width var(--speed) ease }

/* ответы: три равнонейтральные карточки; выбор — ЦВЕТНАЯ РАМКА (§5):
   за/против/воздержался = зелёный (фирменный) / красный / синий, приглушённые */
.segs{ display:grid; gap:10px }
.seg{ font:inherit; font-weight:600; min-height:52px; padding:12px;
      border:2px solid var(--line); border-radius:var(--radius);
      background:var(--surface); color:var(--text); cursor:pointer;
      transition:border-color var(--speed), background var(--speed), color var(--speed) }
.seg.sel{ font-weight:700 }
.seg.sel.ans-for{     border-color:var(--accent);
      color:var(--for-ink);     background:color-mix(in srgb, var(--accent) 10%, var(--surface)) }
.seg.sel.ans-against{ border-color:var(--against);
      color:var(--against-ink); background:color-mix(in srgb, var(--against) 10%, var(--surface)) }
.seg.sel.ans-abstain{ border-color:var(--abstain);
      color:var(--abstain-ink); background:color-mix(in srgb, var(--abstain) 10%, var(--surface)) }

/* hover для мыши (десктоп): дополнительный сигнал «это нажимается» помимо
   курсора — @media(hover) исключает залипание на тачскринах */
@media (hover:hover){
  .seg:hover:not(.sel){ background:color-mix(in srgb, var(--text) 7%, var(--surface));
                        border-color:color-mix(in srgb, var(--text) 25%, var(--line)) }
  .seg.sel.ans-for:hover{     background:color-mix(in srgb, var(--accent) 16%, var(--surface)) }
  .seg.sel.ans-against:hover{ background:color-mix(in srgb, var(--against) 16%, var(--surface)) }
  .seg.sel.ans-abstain:hover{ background:color-mix(in srgb, var(--abstain) 16%, var(--surface)) }
  .vrow[href]:hover, .tile:hover, .whoopt:not(:disabled):hover{
    background:color-mix(in srgb, var(--text) 6%, var(--surface)) }
  .link:hover{ color:var(--text) }
}

/* формат изображений */
.vote-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
}

/* цвет ответа в сверке и на карточках */
b.ans-for{ color:var(--for-ink) }
b.ans-against{ color:var(--against-ink) }
b.ans-abstain{ color:var(--abstain-ink) }

/* навигация вопроса */
.qnav{ display:flex; justify-content:space-between; gap:10px; margin-top:4px }

/* списки */
ul.plain{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
li.rev{ display:flex; justify-content:space-between; gap:12px; align-items:baseline;
        padding:10px 0; border-bottom:1px solid var(--line) }

/* диалог подтверждения: нативный <dialog> */
dialog.confirm{ border:0; border-radius:var(--radius); background:var(--surface);
  color:var(--text); padding:20px; max-width:min(92vw,360px);
  box-shadow:0 12px 40px rgba(0,0,0,.25) }
dialog.confirm::backdrop{ background:rgba(0,0,0,.62);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px) }
dialog.confirm h2{ margin:0 0 8px }
.confirm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px }
/* кнопки-глаголы в языке рамок vote: зелёный = остаться, красный = выйти */
.btn.outline-green{ background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color:var(--accent); color:var(--for-ink) }
.btn.outline-red{ background:color-mix(in srgb, var(--against) 10%, var(--surface));
  border-color:var(--against); color:var(--against-ink) }
@media (hover:hover){
  .btn.outline-green:hover{ background:color-mix(in srgb, var(--accent) 18%, var(--surface)) }
  .btn.outline-red:hover{ background:color-mix(in srgb, var(--against) 18%, var(--surface)) }
}

/* noscript */
.noscript{ max-width:560px; margin:40px auto; padding:0 16px }

/* дашборд: плитки разделов из session.modules (§8) */
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px }
.tile{ position:relative; display:grid; justify-items:center; gap:10px;
       padding:22px 12px 18px; background:var(--surface);
       border:1px solid var(--line); border-radius:var(--radius);
       text-decoration:none; color:var(--text); min-height:110px }
.tile .ico{ width:34px; height:34px; color:var(--accent) }
.tlabel{ font-weight:600 }
.badge{ position:absolute; top:10px; right:10px; min-width:22px; height:22px;
        padding:0 6px; border-radius:11px; background:var(--against); color:#fff;
        font-size:13px; font-weight:700; display:grid; place-items:center }

/* контекст доверителя: виден на каждом шаге бюллетеня */
.ctx{ background:color-mix(in srgb, var(--abstain) 12%, var(--surface));
      border:1px solid var(--abstain); border-radius:var(--radius);
      padding:8px 12px; font-size:14px }

/* список голосований */
.vlist{ display:grid; gap:10px }
.vrow{ display:grid; gap:4px; padding:12px 14px; background:var(--surface);
       border:1px solid var(--line); border-radius:var(--radius);
       text-decoration:none; color:var(--text) }
.vrow.vactive{ border-left:4px solid var(--accent) }
.vname{ font-weight:600 }

/* выбор «чей бюллетень» */
.wholist{ display:grid; gap:10px }
.whoopt{ display:flex; justify-content:space-between; align-items:center; gap:12px;
         font:inherit; text-align:left; padding:14px; min-height:52px;
         background:var(--surface); border:1px solid var(--line);
         border-radius:var(--radius); color:var(--text); cursor:pointer }
.whoopt:disabled{ opacity:.5; cursor:not-allowed }

/* десктоп — производный от мобильного */
@media (min-width:720px){
  #app{ padding-top:8px }
  h1{ font-size:28px }
  .qname{ font-size:28px }
  .segs{ grid-template-columns:1fr 1fr 1fr }
}