/* Портал команды. Палитра и типографика — из свода дизайн-правил
   «Долины»: те же пять цветов, тот же Involve, те же радиусы и отступы.
   Значения взяты из design-rules/tokens/tokens.json, а не подобраны. */

:root{
  --grafit:#242120; --pole:#5A732A; --sol:#D0D841; --bezh:#F3ECE4; --veter:#DDEDFA;
  --pole-hover:#546929; --surface-2:#E9E2DA; --rule:#D6D0C9; --rule-strong:#8C8682;
  --muted:#66625F; --warning:#845C21; --danger:#9A3B2E;
  --ground:var(--bezh); --card:#FBF8F4; --ink:var(--grafit);
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:9999px;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#1A1817; --card:#242120; --ink:#F3ECE4; --muted:#ABA59F;
  --rule:#3A3634; --surface-2:#322F2E; --pole:#A8C46B;
}}
:root[data-theme="dark"]{--ground:#1A1817;--card:#242120;--ink:#F3ECE4;--muted:#ABA59F;
  --rule:#3A3634;--surface-2:#322F2E;--pole:#A8C46B}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Involve",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}

/* ── шапка ───────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:14px clamp(16px,3vw,32px);border-bottom:1px solid var(--rule);
  background:var(--card);position:sticky;top:0;z-index:20}
.top .brand{font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;gap:9px;white-space:nowrap}
.top .brand span{width:9px;height:9px;border-radius:50%;background:var(--pole);flex:none}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{padding:7px 14px;border-radius:var(--r-pill);text-decoration:none;
  color:var(--muted);font-size:15px}
.top nav a:hover{background:var(--surface-2);color:var(--ink)}
.top nav a.on{background:var(--pole);color:#fff}
.top .me{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.top .me form{margin:0}

.wrap{max-width:1240px;margin:0 auto;padding:clamp(20px,3vw,36px) clamp(16px,3vw,32px) 80px}
.narrow{max-width:74ch}

h1{font-size:clamp(24px,3vw,36px);line-height:1.05;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:20px;margin:34px 0 12px;letter-spacing:-.01em}
h3{font-size:16px;margin:22px 0 8px}
p{margin:0 0 12px}
a{color:var(--pole)}
.sub{color:var(--muted);margin:0 0 24px}
.muted{color:var(--muted)}
.small{font-size:14px}

/* ── карточки и таблицы ──────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:16px}
table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:0 12px 8px 0;border-bottom:1px solid var(--rule)}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
.tw{overflow-x:auto}

/* ── формы и кнопки ──────────────────────────────────────────────── */
label{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:5px}
input[type=text],input[type=password],input[type=file],select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--ground);
  border:1px solid var(--rule-strong);border-radius:var(--r-sm);padding:11px 13px}
textarea{resize:vertical;min-height:110px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pole);outline-offset:1px;
  border-color:var(--pole)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.row>div{flex:1;min-width:170px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;font:inherit;font-weight:600;font-size:15px;
  background:var(--pole);color:#fff;border:0;border-radius:var(--r-pill);cursor:pointer;
  text-decoration:none}
.btn:hover{background:var(--pole-hover)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-strong)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.tiny{min-height:32px;padding:0 14px;font-size:13px}
.btn.danger{background:var(--danger)}

/* ── статусы объектов: цвет статуса и есть дорожная карта ────────── */
.st{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-идея{background:var(--veter);color:#2E5A7A}
.st-проект{background:#E7E9C8;color:#5C6216}
.st-строится{background:#F5E4C8;color:var(--warning)}
.st-готово{background:#DCE8CC;color:var(--pole)}
.st-законсервировано{background:var(--surface-2);color:var(--muted)}

/* ── карта ───────────────────────────────────────────────────────── */
.mapwrap{position:relative;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-md);overflow:hidden}
.mapwrap svg{display:block;width:100%;height:auto;max-height:76vh}
.mapwrap .base{opacity:.5}
.zone{cursor:pointer;transition:opacity .12s}
.zone:hover{opacity:.75}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.panel{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);background:var(--card);
  border-left:1px solid var(--rule);padding:24px;overflow-y:auto;z-index:30;
  transform:translateX(100%);transition:transform .18s ease}
.panel.on{transform:none}
.panel .x{position:absolute;right:16px;top:14px;background:none;border:0;font-size:26px;
  line-height:1;color:var(--muted);cursor:pointer}

.flash{background:var(--veter);border:1px solid #A9CDE6;border-radius:var(--r-md);
  padding:16px 18px;margin-bottom:18px}
.flash.bad{background:#F6DEDA;border-color:#DCA79E}
.keyshow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:21px;
  letter-spacing:.06em;background:var(--ground);border:1px dashed var(--rule-strong);
  border-radius:var(--r-sm);padding:14px 16px;margin:10px 0;user-select:all}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--surface-2);border-radius:5px;padding:1px 5px}
.empty{color:var(--muted);padding:26px 0;text-align:center}

/* Выбор файла. Системный элемент подписан языком браузера — на русской
   странице это единственная английская надпись, и её нельзя перевести
   стилями: текст «No file chosen» рисует сам браузер. Прячем настоящее
   поле и показываем свою кнопку с именем выбранного файла. Поле остаётся
   на месте и доступно с клавиатуры — обёртка label передаёт ему нажатие. */
.filepick { display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  min-height:44px; }
/* Обёртка — label, а он в этой системе набирается капителью с разрядкой:
   подпись поля, а не текст кнопки. Внутри возвращаем обычное начертание. */
.filepick .pickbtn, .filepick .pickname { text-transform:none; letter-spacing:normal;
  font-weight:inherit; }
.filepick .pickbtn { font-weight:600; }
.filepick input[type=file] { position:absolute; width:1px; height:1px;
  opacity:0; overflow:hidden; }
.filepick .pickbtn { display:inline-flex; align-items:center; min-height:38px;
  padding:0 18px; border-radius:var(--r-pill); border:1px solid var(--rule-strong);
  background:transparent; color:var(--ink); font-weight:600; font-size:14px;
  white-space:nowrap; }
.filepick:hover .pickbtn { background:var(--surface-2); }
.filepick input[type=file]:focus-visible + .pickbtn { outline:2px solid var(--pole);
  outline-offset:2px; }
.filepick .pickname { color:var(--muted); font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:24ch; }

/* ── список объектов на узком экране ──────────────────────────────────
   Таблица из четырёх колонок на телефоне нечитаема: название ломается
   по слогам, описание встаёт башней, последняя колонка уходит за край.
   Те же строки показываем карточками — подпись колонки берётся
   из data-th, поэтому разметка остаётся одна и та же. */
@media (max-width: 640px) {
  .objs table, .objs thead, .objs tbody, .objs tr, .objs td { display:block; width:auto }
  .objs thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .objs tr { border:1px solid var(--rule); border-radius:var(--r-md);
    background:var(--card); padding:14px 16px; margin-bottom:10px }
  .objs td { border:0; padding:0 }
  .objs td + td { display:inline-flex; align-items:center; gap:6px; margin:8px 12px 0 0 }
  .objs td + td::before { content:attr(data-th) " ·"; color:var(--muted); font-size:13px }
  .objs td:first-child a { font-size:17px }
  .objs .descr { margin-top:4px }
}