/* Правовий беклог — the registry on the GLeX design code: the same tokens and
 * type as the portal and GAM, blue only for action and law. One column,
 * cards for positions, a position page, a submission form.
 */

@font-face{font-family:"Golos Text"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/fonts/golos-text-cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --blue:#2E7CBF; --blue-strong:#22608F; --blue-tint:#E4EFF9;
  --ink:#3F3F3F; --title:#333333; --muted:#6E7783; --faint:#9AA3AE;
  --surface:#FFFFFF; --canvas:#F4F7FA; --surface-alt:#F1F5F9; --line:#DDE3E9; --line-strong:#C9D2DB;
  --ok:#1F8A5B; --warn:#B26B0A; --err:#C0392B; --ok-tint:#E6F4ED; --warn-tint:#FBF0DF; --err-tint:#FBEBE8;
  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-field:8px; --r-card:12px; --r-pill:999px;
  --shadow-card:0 2px 6px rgba(34,60,90,.07); --shadow-lift:0 12px 32px rgba(34,60,90,.16);
  --focus:0 0 0 3px rgba(46,124,191,.32);
  --wrap:1120px;
}
:root[data-theme="dark"]{
  --blue:#4E9BDC; --blue-strong:#8FC2EA; --blue-tint:#1B3550;
  --ink:#E7EDF3; --title:#F1F5F9; --muted:#93A1AE; --faint:#7D8B99;
  --surface:#18222C; --canvas:#101820; --surface-alt:#22303C; --line:#2A3742; --line-strong:#3A4955;
  --ok:#52C08C; --warn:#E0A64A; --err:#E2766A; --ok-tint:#16302A; --warn-tint:#33280F; --err-tint:#3A1F1C;
  --shadow-card:none; --shadow-lift:0 12px 32px rgba(0,0,0,.45); --focus:0 0 0 3px rgba(78,155,220,.4);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; min-height:100svh; display:flex; flex-direction:column; background:var(--canvas); color:var(--ink);
     font:16px/1.55 var(--font); -webkit-font-smoothing:antialiased}
a{color:var(--blue)}
h1,h2,h3{margin:0; color:var(--title); letter-spacing:-.015em}
p{margin:0}
button{font:inherit; color:inherit}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:6px}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; padding:10px 16px; border-radius:var(--r-field); background:var(--surface); color:var(--blue)}
.skip:focus{left:12px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono); font-size:.92em}
.noscript{padding:32px 16px}
.mt8{margin-top:8px}
.narrow{max-width:760px}
.measure{max-width:76ch}

/* ── top bar ───────────────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
.top__in{display:flex; align-items:center; gap:16px; max-width:var(--wrap); margin:0 auto; padding:10px 16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--title); flex:none}
.brand img{display:block; width:30px; height:auto}
:root[data-theme="dark"] .brand img{background:#F4F7FA; border-radius:6px; padding:2px}
.brand__name{font-weight:800; font-size:18px}
.brand__demo{padding:1px 8px; border-radius:var(--r-pill); background:var(--warn-tint); color:var(--warn); font-size:12px; font-weight:700}
.nav{display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 12px; border-radius:var(--r-field); color:var(--muted); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap}
@media (hover:hover){ .nav a:hover{color:var(--title); background:var(--surface-alt)} }
.nav a[aria-current="page"]{color:var(--blue-strong); background:var(--blue-tint)}
.nav__n{display:inline-block; min-width:20px; margin-left:4px; padding:0 6px; border-radius:10px; background:var(--blue); color:#fff; font-size:12px; line-height:20px; text-align:center}
:root[data-theme="dark"] .nav__n{color:#0B1219}
.top__actions{display:flex; gap:4px; flex:none}
.icon-btn{display:inline-grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer}
.icon-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.icon-btn[aria-pressed="true"] svg{fill:currentColor}
@media (hover:hover){ .icon-btn:hover{background:var(--surface-alt); color:var(--title)} }

/* ── page ──────────────────────────────────────────────────────────────── */
.main{flex:1 0 auto; width:100%; max-width:var(--wrap); margin:0 auto; padding:28px 16px 56px; outline:none}
.foot{border-top:1px solid var(--line); background:var(--surface)}
.foot p{max-width:var(--wrap); margin:0 auto; padding:18px 16px; font-size:13.5px; color:var(--muted)}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-strong)}
.head{display:grid; gap:10px; margin-bottom:22px}
.head h1{font-size:clamp(26px,3.4vw,38px); line-height:1.1; letter-spacing:-.03em}
.lead{font-size:17px; color:var(--muted); max-width:72ch}
.note{max-width:76ch; padding:12px 14px; border-left:3px solid var(--warn); border-radius:0 var(--r-field) var(--r-field) 0;
      background:var(--surface); font-size:14.5px}
.sec{font-size:19px; margin:30px 0 12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:9px 16px; border:1px solid var(--line);
     border-radius:var(--r-field); background:var(--surface); color:var(--title); font-weight:600; text-decoration:none; cursor:pointer}
@media (hover:hover){ .btn:hover{border-color:var(--blue); color:var(--blue-strong)} }
.btn--primary{border-color:var(--blue); background:var(--blue); color:#fff}
:root[data-theme="dark"] .btn--primary{color:#0B1219}
@media (hover:hover){ .btn--primary:hover{background:var(--blue-strong); border-color:var(--blue-strong); color:#fff} }
.btn--sm{min-height:34px; padding:6px 12px; font-size:14px}
.btn--done{border-color:var(--ok); color:var(--ok); background:var(--ok-tint)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}

/* ── KPI tiles and filters ─────────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin:6px 0 22px}
.kpi{padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow-card)}
.kpi b{display:block; font-size:28px; font-weight:800; color:var(--title); line-height:1.1}
.kpi span{font-size:13.5px; color:var(--muted)}
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:14px}
.seg{display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface)}
.seg button{padding:6px 14px; border:0; border-radius:var(--r-pill); background:none; color:var(--muted); font-weight:600; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--blue-tint); color:var(--blue-strong)}
.field{display:grid; gap:5px; font-size:13px; color:var(--muted)}
.field input,.field select,.field textarea{width:100%; min-height:42px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r-field);
  background:var(--surface); color:var(--ink); font:inherit; font-size:15px}
.field textarea{min-height:120px; resize:vertical; line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:var(--focus)}
.filters .field{min-width:180px; flex:1 1 180px}
.filters .field--search{flex:2 1 260px}
.filters .field--sort{flex:0 1 230px; min-width:200px}
.count{margin:0 0 10px; font-size:14px; color:var(--muted)}

/* ── position cards ────────────────────────────────────────────────────── */
.cards{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); margin:0; padding:0; list-style:none}
.card{display:grid; gap:10px; align-content:start; height:100%; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-card);
      background:var(--surface); box-shadow:var(--shadow-card)}
.card__top{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.card h2{font-size:17.5px; line-height:1.3}
.card h2 a{color:var(--title); text-decoration:none}
@media (hover:hover){ .card h2 a:hover{color:var(--blue-strong)} }
.card__text{font-size:14.5px; color:var(--ink); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card__foot{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px}
.card__n{font-size:14px; color:var(--muted)}
.card__n b{font-size:18px; color:var(--title)}
.chip{display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--r-pill); background:var(--surface-alt); color:var(--muted); font-size:12.5px; font-weight:600}
.chip--national{background:var(--blue-tint); color:var(--blue-strong)}
.chip--local{background:var(--ok-tint); color:var(--ok)}
.chip--st-merged{background:var(--surface-alt); color:var(--muted)}
.chip--st-queued{background:var(--warn-tint); color:var(--warn)}
.chip--st-routed,.chip--st-review{background:var(--blue-tint); color:var(--blue-strong)}
.chip--st-solved{background:var(--ok-tint); color:var(--ok)}
.prio{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.prio__bar{position:relative; width:84px; height:8px; border-radius:4px; background:var(--surface-alt); overflow:hidden}
.prio__bar i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--blue)}
.prio b{color:var(--title); font-family:var(--mono)}
.norm{font-size:13.5px}
.empty{padding:28px; border:1px dashed var(--line-strong); border-radius:var(--r-card); text-align:center; color:var(--muted)}

/* ── position page ─────────────────────────────────────────────────────── */
.back{display:inline-block; margin-bottom:14px; font-weight:600; text-decoration:none}
.pos{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start}
.pos__main{display:grid; gap:18px; min-width:0}
.pos__side{display:grid; gap:14px; position:sticky; top:76px}
.block{padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface)}
.block h2{font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.block p + p{margin-top:8px}
.big{font-size:40px; font-weight:800; color:var(--title); line-height:1}
.bars{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.bars li{display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:4px 10px; align-items:center; font-size:14px}
.bars .track{grid-column:1/-1; height:8px; border-radius:4px; background:var(--surface-alt); overflow:hidden}
.bars .track i{display:block; height:100%; border-radius:4px; background:var(--blue)}
.bars b{text-align:right; font-family:var(--mono); font-weight:600; color:var(--title)}
.formula{display:grid; gap:6px; margin:10px 0 0; padding:0; list-style:none; font-size:13.5px}
.formula li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px}
.formula b{font-family:var(--mono)}
.timeline{display:grid; gap:12px; margin:0; padding:0 0 0 18px; list-style:none; border-left:2px solid var(--line)}
.timeline li{position:relative; font-size:14.5px}
.timeline li::before{content:""; position:absolute; left:-25px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px var(--surface)}
.timeline time{display:block; font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.quotes{display:grid; gap:10px; margin:0}
.quotes blockquote{margin:0; padding:10px 14px; border-left:3px solid var(--line-strong); border-radius:0 8px 8px 0; background:var(--surface-alt); font-style:italic}

/* ── submission ────────────────────────────────────────────────────────── */
.form{display:grid; gap:16px; max-width:760px}
.choices{display:grid; gap:8px; margin:0; padding:0; border:0}
.choices legend{margin-bottom:6px; font-size:13px; color:var(--muted)}
.choice{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; padding:12px 14px; border:1px solid var(--line);
        border-radius:var(--r-field); background:var(--surface); cursor:pointer}
.choice input{width:18px; height:18px; margin-top:3px; accent-color:var(--blue)}
.choice:has(input:checked){border-color:var(--blue); background:var(--blue-tint)}
.choice b{display:block; color:var(--title)}
.choice span span{font-size:14px; color:var(--muted)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14.5px}
.check input{width:18px; height:18px; margin-top:3px; accent-color:var(--blue)}
.error{color:var(--err); font-weight:600}
.steps-mini{display:flex; gap:8px; margin-bottom:16px; font-size:13.5px; color:var(--muted)}
.steps-mini span[aria-current="step"]{color:var(--blue-strong); font-weight:700}
.found{display:grid; gap:10px; padding:14px 16px; border-radius:var(--r-card); background:var(--blue-tint)}
.found h2{font-size:16px}
.done{display:grid; gap:12px; max-width:720px; padding:22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface)}
.done h1{font-size:26px}
.steps{display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:s; max-width:760px}
.steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; counter-increment:s}
.steps li::before{content:"0" counter(s); font-family:var(--mono); font-weight:700; color:var(--blue-strong); padding-top:2px}

.toast{position:fixed; left:50%; bottom:20px; z-index:50; transform:translateX(-50%); max-width:min(520px, calc(100% - 32px));
       padding:12px 16px; border-radius:var(--r-card); background:var(--title); color:var(--surface); box-shadow:var(--shadow-lift); font-size:14.5px}

/* a single page without the app (404) */
body.lone{display:grid; place-items:center; padding:24px 16px}
.lone .card{max-width:560px; padding:32px}
.lone .card img{width:44px; height:auto}
.lone .card h1{margin:16px 0 8px; font-size:28px}
.lone .card p{margin:0 0 12px; color:var(--muted)}

@media (max-width:900px){
  .pos{grid-template-columns:minmax(0,1fr)}
  .pos__side{position:static}
}
@media (max-width:640px){
  .top__in{flex-wrap:wrap; gap:8px}
  .nav{order:3; flex-basis:100%}
  .brand__name{font-size:16px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kpi b{font-size:24px}
  .filters .field{min-width:0; flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }