/* Heliobulk HQ. Одна рабочая колонка; навигация по шести разделам сверху.
   Цвета стадий — степени окисления ванадия: V⁵⁺ жёлтый, V⁴⁺ синий, V³⁺ зелёный, V²⁺ фиолетовый. */
:root{
  --bg:#f2f4f6; --surface:#fff; --surface-2:#e9edf1; --ink:#15202b; --muted:#5a6773; --line:#d8dee5;
  --accent:#2c5fc9; --accent-ink:#fff;
  --v5:#c99700; --v4:#2c6fd1; --v3:#23905f; --v2:#7447bd; --v0:#8a96a2;
  --crit:#b8322f; --crit-bg:#fdecea; --warn:#a86400; --warn-bg:#fff3de; --new:#2c5fc9; --new-bg:#e8effd;
  --flag:#7447bd; --flag-bg:#f1ebfb;
  --f-display:"Unbounded","Onest",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0e141a; --surface:#151d25; --surface-2:#1c2630; --ink:#e4eaf0; --muted:#94a2af; --line:#26323e;
  --accent:#6e9bf0; --accent-ink:#0e141a;
  --v5:#e6bb3a; --v4:#6e9bf0; --v3:#4fc08c; --v2:#a784e6; --v0:#6f7c88;
  --crit:#f07a73; --crit-bg:#34191a; --warn:#f0a93b; --warn-bg:#2e2410; --new:#6e9bf0; --new-bg:#17243a;
  --flag:#a784e6; --flag-bg:#241c33; color-scheme:dark }}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:15px/1.5 var(--f-body); -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; text-wrap:balance}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--f-mono); font-size:.86em}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

.top{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.top .in{max-width:1180px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px}
.logo{font-family:var(--f-display); font-weight:600; font-size:17px; color:var(--ink)}
.logo:hover{text-decoration:none}
nav.sections{display:flex; flex-wrap:wrap; gap:2px}
nav.sections a{padding:6px 10px; border-radius:7px; color:var(--muted); font-weight:500; font-size:14px}
nav.sections a[aria-current="page"]{background:var(--surface-2); color:var(--ink)}
nav.sections a:hover{text-decoration:none; color:var(--ink)}
nav.sections .c{font-family:var(--f-mono); font-size:11.5px; margin-left:4px; opacity:.75}
.top form{margin-left:auto; display:flex; gap:8px; align-items:center}
.top input[type=search]{border:1px solid var(--line); background:var(--bg); border-radius:7px; padding:6px 10px; width:220px; max-width:48vw}
.who{font-size:13px; color:var(--muted)}

main{max-width:1180px; margin:0 auto; padding:20px 16px 56px; display:grid; gap:18px}
.head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px}
.head h1{font-family:var(--f-display); font-weight:500; font-size:clamp(20px,2.6vw,26px)}
.head .sub{color:var(--muted); font-size:14px; margin-top:2px}
.actions{display:flex; flex-wrap:wrap; gap:8px}
.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 13px; cursor:pointer; font-weight:500; font-size:14px; color:var(--ink)}
.btn:hover{border-color:var(--muted); text-decoration:none}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.danger{color:var(--crit); border-color:var(--crit)}
.btn.small{padding:3px 9px; font-size:12.5px}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 18px; min-width:0}
.panel > h2{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-bottom:12px}
.grid2{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px}
@media (max-width:880px){.grid2{grid-template-columns:1fr}}

.filters{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.chip{display:inline-block; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:3px 11px; font-size:13px; color:var(--ink)}
.chip[aria-current="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip:hover{text-decoration:none}
.filters input[type=search]{flex:1 1 160px; max-width:280px}
.filters input,.filters select{border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:4px 9px; font-size:13.5px}

table.list{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.tablewrap{overflow-x:auto; border-radius:10px}
table.list th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; background:var(--surface-2); padding:8px 12px; white-space:nowrap}
table.list td{padding:10px 12px; border-top:1px solid var(--line); vertical-align:top; font-size:14px}
table.list tr.hl-crit td:first-child{box-shadow:inset 3px 0 var(--crit)}
table.list tr.hl-warn td:first-child{box-shadow:inset 3px 0 var(--warn)}
table.list tr.hl-new td:first-child{box-shadow:inset 3px 0 var(--new)}
table.list tr.hl-flag td:first-child{box-shadow:inset 3px 0 var(--flag)}
table.list .t{font-weight:600}
table.list .s{font-size:12.5px; color:var(--muted)}
.empty{padding:28px 18px; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--line); border-radius:10px}

.stage{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; white-space:nowrap}
.stage i{width:9px; height:9px; border-radius:50%; flex:none}
.st-v0{background:var(--v0)} .st-v5{background:var(--v5)} .st-v4{background:var(--v4)} .st-v3{background:var(--v3)}
.st-v2{background:var(--v2)} .st-ink{background:var(--ink)} .st-pause{border:1.5px dashed var(--v0)}
.tag{display:inline-block; font-size:11.5px; padding:1px 7px; border-radius:5px; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.lvl{display:inline-block; font-size:12px; padding:1px 8px; border-radius:5px; white-space:nowrap; font-weight:500}
.lvl-crit{background:var(--crit-bg); color:var(--crit)} .lvl-warn{background:var(--warn-bg); color:var(--warn)}
.lvl-new{background:var(--new-bg); color:var(--new)} .lvl-flag{background:var(--flag-bg); color:var(--flag)}
.lvl-plan{background:var(--surface-2); color:var(--muted)}
.dir{font-family:var(--f-mono); font-size:12px; color:var(--muted)}

.funnel{display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--surface-2); margin-bottom:12px}
.funnel span{display:block; height:100%}
.legend{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 16px}
.legend div{display:flex; align-items:center; gap:8px; font-size:13.5px}
.legend b{margin-left:auto; font-variant-numeric:tabular-nums}

.feed{list-style:none; margin:0; padding:0}
.feed li{display:grid; grid-template-columns:70px 96px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line); font-size:14px}
.feed li:first-child{border-top:0}
.feed .d{font-family:var(--f-mono); font-size:12.5px; color:var(--muted)}
.feed .x{min-width:0; overflow-wrap:anywhere}
.feed .x small{display:block; color:var(--muted); font-size:12.5px}
.feed form{display:inline}
.feed .ac{max-width:15em; text-align:right}
.feed .ac .lvl{white-space:normal}
@media (max-width:640px){.feed li{grid-template-columns:62px minmax(0,1fr)} .feed li .ty{display:none} .feed li .ac{grid-column:2}}

dl.props{display:grid; grid-template-columns:180px minmax(0,1fr); gap:6px 16px; margin:0}
dl.props dt{color:var(--muted); font-size:13.5px}
dl.props dd{margin:0; overflow-wrap:anywhere}
@media (max-width:560px){dl.props{grid-template-columns:1fr} dl.props dd{margin-bottom:6px}}
.body{white-space:pre-wrap; overflow-wrap:anywhere; font-size:14.5px; line-height:1.55; max-height:70vh; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:14px}
.linkform{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.linkform select{border:1px solid var(--line); background:var(--bg); border-radius:7px; padding:6px 9px; max-width:100%}
.history{font-size:12.5px; color:var(--muted); display:grid; gap:4px}

form.edit{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; max-width:820px}
form.edit .wide{grid-column:1/-1}
@media (max-width:620px){form.edit{grid-template-columns:1fr}}
.field{display:grid; gap:4px; min-width:0}
.field label{font-size:12.5px; color:var(--muted); font-weight:500}
.field input,.field select,.field textarea{width:100%; border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:8px 10px}
.field textarea{min-height:90px; resize:vertical}
.err{color:var(--crit)}
.login{max-width:360px; margin:12vh auto 0; padding:0 16px}
.login h1{font-family:var(--f-display); font-weight:600; font-size:24px; margin-bottom:16px}
.login form{display:grid; gap:12px}
.snip{font-size:13px; color:var(--muted)}
footer.foot{max-width:1180px; margin:0 auto; padding:0 16px 30px; font-size:12.5px; color:var(--muted)}

/* вход и сессии */
.top form.who{display:inline-flex; align-items:center; gap:4px; margin-left:0}
.who a{color:var(--muted)} .who a:hover{color:var(--ink)}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.ok-msg{color:var(--v3); margin:8px 0}
table.sessions td{font-size:13.5px}
@media (max-width:640px){table.sessions th:nth-child(2), table.sessions td:nth-child(2), table.sessions th:nth-child(4), table.sessions td:nth-child(4){display:none}}