/* Правление — mockup stylesheet. PIM yellow/black/white, hairline minimalist.
   Tokens mirror DESIGN.md. Static, no build. */
:root{
  --pim-yellow:#FFD100; --pim-yellow-hover:#E6BC00; --pim-yellow-soft:#FFF7D1;
  --pim-black:#111111; --white:#ffffff;
  --g900:#1f1f1f; --g600:#6b6b6b; --g300:#e3e3e3; --g100:#f6f6f6;
  --done:#2e7d32; --overdue:#c62828;
  --border:var(--g300); --text:var(--pim-black); --muted:var(--g600);
  --radius:8px; --radius-sm:6px;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp6:24px;--sp8:32px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--text);background:var(--white);font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 var(--sp6)}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp6)}
.login-card{width:100%;max-width:360px}
.login-error{background:var(--pim-yellow-soft);border:1px solid var(--pim-yellow);border-radius:var(--radius-sm);
  color:var(--pim-black);font-size:13px;font-weight:600;padding:9px 12px;margin-bottom:var(--sp4)}
.logout-link{color:var(--muted);font-size:13px;border-bottom:1px solid transparent}
.logout-link:hover{color:var(--pim-black);border-bottom-color:var(--pim-yellow)}

/* nav */
.nav{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10}
.nav-inner{display:flex;align-items:center;gap:var(--sp6);height:56px;max-width:1120px;margin:0 auto;padding:0 var(--sp6)}
.brand{font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap}
.brand b{background:var(--pim-yellow);padding:2px 6px;border-radius:4px}
.nav-links{display:flex;gap:var(--sp4);flex-wrap:wrap}
.nav-links a{color:var(--g600);padding:4px 2px;font-weight:500;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--pim-black)}
.nav-links a.active{color:var(--pim-black);border-bottom-color:var(--pim-yellow)}

/* nav dropdown (Настройки) — pure CSS, opens on hover/focus */
.nav-menu{position:relative;display:inline-flex}
.nav-menu-trigger{background:none;border:none;font:inherit;color:var(--g600);font-weight:500;
  cursor:pointer;padding:4px 2px;border-bottom:2px solid transparent}
.nav-menu:hover .nav-menu-trigger,.nav-menu:focus-within .nav-menu-trigger{color:var(--pim-black)}
.nav-menu.active .nav-menu-trigger{color:var(--pim-black);border-bottom-color:var(--pim-yellow)}
.nav-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:160px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 6px 20px rgba(17,17,17,.10);
  padding:6px;display:none;z-index:20}
.nav-menu:hover .nav-dropdown,.nav-menu:focus-within .nav-dropdown{display:block}
.nav-dropdown a{display:block;padding:7px 10px;border-radius:4px;color:var(--pim-black);font-weight:500;border:none}
.nav-dropdown a:hover{background:var(--g100)}
.nav-dropdown a.dd-active{background:var(--pim-yellow-soft);font-weight:600}
.nav-spacer{flex:1}

/* context bar (beneath nav) */
.context-bar{border-bottom:1px solid var(--border);background:var(--g100)}
.context-inner{display:flex;align-items:center;gap:var(--sp6);max-width:1120px;margin:0 auto;padding:9px var(--sp6);font-size:13px;flex-wrap:wrap}
.context-inner .ci{display:flex;align-items:center;gap:8px;color:var(--muted)}
.context-inner .ci a{color:var(--pim-black);font-weight:600;border-bottom:1px solid var(--pim-yellow)}
.context-inner .lbl{color:var(--muted)}
.context-inner .spacer{flex:1}
.context-inner .days{background:var(--pim-yellow-soft);border-radius:999px;padding:1px 9px;font-weight:600;color:var(--pim-black)}
.context-inner .user{color:var(--pim-black);font-weight:600}
.context-inner .user .role{color:var(--muted);font-weight:500}

/* buttons */
.btn{display:inline-block;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:#fff;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--g100)}
.btn-primary{background:var(--pim-yellow);border-color:var(--pim-yellow);color:var(--pim-black)}
.btn-primary:hover{background:var(--pim-yellow-hover)}
.btn-ghost{background:#fff;border-color:var(--pim-black)}
.btn-sm{padding:5px 10px;font-size:12px}

/* page */
main{padding:var(--sp8) 0}
.page-head{display:flex;align-items:baseline;gap:var(--sp4);margin-bottom:var(--sp6);flex-wrap:wrap}
h1{font-size:24px;margin:0;font-weight:600}
.sub{color:var(--muted);font-size:13px}
.back{color:var(--muted);font-size:13px;margin-bottom:var(--sp3);display:inline-block}

/* toolbar / filters */
.toolbar{display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp4)}
.chip{border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--g600);background:#fff;cursor:pointer}
.chip:hover{background:var(--g100)}
.chip.active{background:var(--pim-yellow-soft);border-color:var(--pim-yellow);color:var(--pim-black);font-weight:600}
.search{margin-left:auto;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;min-width:220px;font:inherit}

/* table */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
  font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border)}
.table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
.table tbody tr:hover td{background:var(--g100)}
.table tr.sel td{background:var(--pim-yellow-soft)}
.table tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--pim-yellow)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--g600)}
.q-title{font-weight:600}
.q-title a:hover{border-bottom:1px solid var(--pim-yellow)}
.muted{color:var(--muted)}
.right{text-align:right}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill-done{color:var(--done)}
.pill-open{color:var(--g600)}
.pill-proposed{color:#8a6d00}
.pill-overdue{color:var(--overdue)}
.date-over{color:var(--overdue);font-weight:600}
.tag{display:inline-block;font-size:12px;color:var(--g600);background:var(--g100);border-radius:4px;padding:2px 8px}

/* cards / detail */
.card{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp6);margin-bottom:var(--sp4)}
.grid2{display:grid;grid-template-columns:190px 1fr;gap:var(--sp3) var(--sp4);margin:0}
.grid2 dt{color:var(--muted);font-size:13px}
.grid2 dd{margin:0}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600;margin:var(--sp6) 0 var(--sp3)}
.prewrap{white-space:pre-wrap}

/* timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 var(--sp4) var(--sp6);border-left:2px solid var(--border);margin-left:6px}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;
  background:var(--pim-yellow);border:2px solid #fff}
.t-when{font-size:12px;color:var(--muted)}

/* materials */
.matlist{list-style:none;padding:0;margin:0}
.matlist li{padding:8px 0;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center}
.matlist li:last-child{border-bottom:none}
.matlist a{color:#0b57d0}
.kind{font-size:11px;text-transform:uppercase;color:var(--muted);background:var(--g100);border-radius:4px;padding:1px 6px}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cal .dow{background:#fff;padding:8px;font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:center}
.cal .day{background:#fff;min-height:92px;padding:8px;position:relative}
.day-add{position:absolute;top:6px;right:6px;margin:0}
.day-add-btn{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:#fff;
  color:var(--g600);font-size:13px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.day-add-btn:hover{background:var(--pim-yellow);border-color:var(--pim-yellow);color:var(--pim-black)}
.cal .day .d{font-size:12px;color:var(--g600);font-variant-numeric:tabular-nums}
.cal .day.out{background:var(--g100)}
.cal .ev{margin-top:6px;font-size:12px;background:var(--pim-yellow-soft);border-left:3px solid var(--pim-yellow);
  padding:3px 6px;border-radius:3px;font-weight:600;cursor:pointer}
.cal .ev.q{background:#eef;border-left-color:#88a}
.cal .ev.today{background:var(--pim-yellow);border-left-color:var(--pim-black)}
.cal .ev.cancel{background:var(--g100);border-left-color:var(--g300);color:var(--g600);text-decoration:line-through}
.cal .ev.move{background:#fff;border:1px dashed var(--g300);border-left:3px solid var(--pim-yellow)}
.cal .day.today{box-shadow:inset 0 0 0 2px var(--pim-yellow)}
.legend{display:flex;gap:var(--sp4);flex-wrap:wrap;margin-bottom:var(--sp3);font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:22px;height:12px;border-radius:3px;display:inline-block}

/* forms */
.form{max-width:660px}
.field{margin-bottom:var(--sp6)}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.req{color:#8a6d00}
.input,.textarea,select{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;font:inherit;background:#fff}
.textarea{min-height:96px;resize:vertical}
.input:focus,.textarea:focus,select:focus{outline:none;border-color:var(--pim-black);box-shadow:0 0 0 2px var(--pim-yellow)}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.form-actions{display:flex;gap:var(--sp2);justify-content:flex-end;margin-top:var(--sp4)}

/* agenda builder — full-width agenda box on top, two pool columns below */
.pools-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);align-items:start}
.builder-col h3{margin:0 0 var(--sp3);font-size:13px;text-transform:uppercase;color:var(--muted);letter-spacing:.03em}
.builder-col{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp4);background:#fff}
.item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:8px;
  display:flex;justify-content:space-between;gap:8px;align-items:center;background:#fff}
.item .drag{color:var(--g300);cursor:grab}
.ord{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700;margin-right:8px}
.agenda-list{min-height:80px}
.new-question-box{border-top:1px solid var(--border);margin-top:var(--sp4);padding-top:var(--sp4)}

/* agenda builder — budget meter + controls */
.meter{height:10px;border-radius:999px;background:var(--g100);overflow:hidden;border:1px solid var(--border)}
.meter-bar{height:100%;background:var(--pim-yellow);transition:width .2s}
.meter-bar.over{background:var(--overdue)}
.min-input{width:58px;text-align:right;font-variant-numeric:tabular-nums;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:5px 6px;font:inherit}
.min-input:focus{outline:none;border-color:var(--pim-black);box-shadow:0 0 0 2px var(--pim-yellow)}
.iconbtn{border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);cursor:pointer;
  padding:3px 8px;font-size:12px;color:var(--g600);line-height:1.2}
.iconbtn:hover:not([disabled]){background:var(--g100);color:var(--pim-black)}
.iconbtn[disabled]{opacity:.35;cursor:default}

/* meeting play (live meeting mode) */
.play-bar{position:sticky;top:56px;z-index:9;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 16px;margin-bottom:var(--sp4);box-shadow:0 4px 14px rgba(17,17,17,.06)}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--overdue);flex:none;
  animation:live-pulse 1.6s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.mono{font-variant-numeric:tabular-nums}
.mono.over{color:var(--overdue)}
.play-current-wrap{margin-bottom:var(--sp2)}
.play-current{border-color:var(--pim-yellow);box-shadow:inset 4px 0 0 var(--pim-yellow)}
.play-ord{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.play-timer{display:flex;align-items:center;gap:16px;margin-top:14px;padding:12px 16px;
  background:var(--g100);border-radius:var(--radius-sm)}
.play-timer #cur-timer{font-size:36px;font-weight:700;line-height:1.05}
.play-table tr.play-row.is-current td{background:var(--pim-yellow-soft);font-weight:600}
.play-table tr.play-row.is-current td:first-child{box-shadow:inset 3px 0 0 var(--pim-yellow)}
.play-table tr.play-row.is-visited td{opacity:.6}
.play-table tr.play-row.is-visited td.num::after{content:" ✓";color:var(--done);opacity:1}
.play-jump-btn{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:#fff;color:var(--g600);font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.play-jump-btn:hover{background:var(--g100);color:var(--pim-black)}
.play-now-btn{width:34px;height:34px;color:var(--pim-black);font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.btn-play-next{display:inline-flex;align-items:center;gap:9px;padding-left:10px}
.play-next-icon{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--pim-black);color:var(--pim-yellow);
  font-size:11px;line-height:1;padding-left:2px}
.prep-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--g100);
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;margin-bottom:var(--sp4)}
.prep-label{text-transform:uppercase;font-size:11px;letter-spacing:.04em;font-weight:700;
  color:var(--g600);background:#fff;border:1px solid var(--border);border-radius:999px;padding:2px 10px}
.prep-val{color:var(--text)}

/* meeting play — suggestions ("comments") on the current question */
.suggestion-list{list-style:none;margin:0;padding:0}
.suggestion{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:8px}
.suggestion-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.suggestion-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.suggest-toggle-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.suggest-panel{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.suggest-toggle-check:checked ~ .suggest-panel{display:block}

/* meeting play — secretary per-field inline edit (question card) */
.qfield-list{border-top:1px solid var(--border)}
.qfield{display:grid;grid-template-columns:190px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.qfield-label{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer;height:fit-content}
.qfield-label:hover{color:var(--pim-black)}
.field-edit-btn{font-size:12px}
.field-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.field-edit{display:none}
.qfield:has(.field-toggle:checked) .field-view{display:none}
.qfield:has(.field-toggle:checked) .field-edit{display:block}
.qfield:has(.field-toggle:checked) .qfield-label{color:var(--pim-black);font-weight:600}

/* meeting play — voting */
.vote-block{display:flex;flex-direction:column;gap:8px}
.vote-tally{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.vote-count{display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
.vote-count b{font-weight:700;font-variant-numeric:tabular-nums;min-width:0.9em;text-align:left}
.vote-count.vote-yes{color:var(--done)}
.vote-count.vote-no{color:var(--overdue)}
.vote-count.vote-veto{color:var(--overdue)}
.vote-count.vote-pending{color:var(--g600)}
.vote-spinner{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid var(--pim-yellow);
  border-top-color:transparent;animation:vote-spin .7s linear infinite;display:inline-block}
@keyframes vote-spin{to{transform:rotate(360deg)}}
.vote-done{font-size:14px;line-height:1}
.vote-count[title]{cursor:help}
.vote-admin,.vote-cast{display:flex;gap:6px;flex-wrap:wrap}
.vote-compact{gap:6px}
.btn.btn-vote-yes{background:var(--done);border-color:var(--done);color:#fff}
.btn.btn-vote-yes:hover{background:#276b2a;border-color:#276b2a}
.btn.btn-vote-no,.btn.btn-vote-veto{background:var(--overdue);border-color:var(--overdue);color:#fff}
.btn.btn-vote-no:hover,.btn.btn-vote-veto:hover{background:#a81f1f;border-color:#a81f1f}

/* current-question card — voting block rendered ~2x larger */
.play-current .vote-block{gap:14px}
.play-current .vote-tally{font-size:24px;gap:18px}
.play-current .vote-count b{min-width:1em}
.play-current .vote-spinner{width:22px;height:22px;border-width:3px}
.play-current .vote-done{font-size:26px}
.play-current .vote-admin .btn,.play-current .vote-cast .btn{padding:9px 18px;font-size:15px}
.vote-compact .vote-tally{font-size:12px}
.vote-compact .btn-sm{padding:3px 8px;font-size:11px}

/* suggest-driven multi-select (responsible picker) */
.msuggest{position:relative}
.msuggest-selected{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.msuggest-chip{display:inline-flex;align-items:center;gap:6px;background:var(--pim-yellow-soft);
  border:1px solid var(--pim-yellow);border-radius:999px;padding:3px 6px 3px 10px;font-size:13px;font-weight:600}
.msuggest-x{border:none;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--g600);padding:0 2px}
.msuggest-x:hover{color:var(--overdue)}
.msuggest-input{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font:inherit}
.msuggest-input:focus{outline:none;border-color:var(--pim-black);box-shadow:0 0 0 2px var(--pim-yellow)}
.msuggest-menu{display:none;position:absolute;left:0;right:0;z-index:30;margin-top:2px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 6px 20px rgba(17,17,17,.10);
  max-height:220px;overflow-y:auto}
.msuggest-item{padding:8px 10px;cursor:pointer;font-size:13px}
.msuggest-item:hover,.msuggest-item.active{background:var(--pim-yellow-soft)}

/* chip multi-select (e.g. tags on the edit form) */
.chipselect{display:flex;flex-wrap:wrap;gap:8px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px}
.chip-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.chipselect .chip{cursor:pointer;user-select:none}
.chip-check:checked + .chip{background:var(--pim-yellow-soft);border-color:var(--pim-yellow);color:var(--pim-black);font-weight:600}
.chip-check:focus-visible + .chip{box-shadow:0 0 0 2px var(--pim-yellow)}

/* index gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp4)}
.gcard{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp4);display:block}
.gcard:hover{border-color:var(--pim-yellow);box-shadow:0 1px 2px rgba(17,17,17,.06)}
.gcard .n{font-size:11px;color:var(--muted);font-weight:600}
.gcard h3{margin:4px 0 6px;font-size:15px}
.gcard p{margin:0;color:var(--muted);font-size:13px}
.role-band{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600;margin:var(--sp6) 0 var(--sp3)}
.empty{padding:var(--sp8);text-align:center;color:var(--muted)}

/* ============ mobile ============ (app is used mainly from phones) */
@media (max-width: 640px) {
  .container{padding:0 var(--sp4)}
  main{padding:var(--sp4) 0}
  h1{font-size:20px}
  .page-head{gap:var(--sp2) var(--sp3);margin-bottom:var(--sp4)}
  .card{padding:var(--sp4)}

  /* nav wraps; links drop to their own full-width row */
  .nav-inner{height:auto;min-height:52px;gap:var(--sp3);padding:8px var(--sp4);flex-wrap:wrap}
  .nav-links{order:3;width:100%;gap:var(--sp3)}
  .nav-links a{font-size:13px}
  .context-inner{gap:6px var(--sp3);padding:8px var(--sp4);font-size:12px}

  /* key/value grids stack: label above value */
  .grid2{grid-template-columns:1fr;gap:2px var(--sp4)}
  .grid2 dt{margin-top:var(--sp3)}
  .grid2 dt:first-child{margin-top:0}
  .qfield{grid-template-columns:1fr;gap:4px}
  .pools-grid{grid-template-columns:1fr}

  /* wide data tables scroll horizontally instead of overflowing the page */
  .table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .table th,.table td{padding:8px 10px}

  /* calendar: compact cells */
  .cal{font-size:11px}
  .cal .dow{padding:5px 2px;font-size:10px}
  .cal .day{min-height:58px;padding:4px}
  .cal .ev{font-size:10px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .day-add-btn{width:16px;height:16px;font-size:11px}

  /* meeting play */
  .play-bar{position:static;gap:8px;padding:8px 10px;font-size:13px}
  .play-timer{flex-wrap:wrap;gap:8px}
  .play-timer #cur-timer{font-size:28px}

  /* forms full width */
  .form,.login-card{max-width:100%}
  .form-actions{flex-wrap:wrap}
}