:root { --bg:#0f1419; --panel:#1a212b; --user:var(--link,#2563eb); --bot:var(--panel-2,#243140);
          --text:#e6edf3; --muted:#8b98a5; --accent:#3fb950; --border:#2d3744;
          --add:var(--accent,#3fb950); --del:var(--danger,#f85149); }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,'Segoe UI',Roboto,sans-serif; background:var(--bg);
         color:var(--text); min-height:100vh; }
nav { margin-left:auto; display:flex; gap:4px; }
nav a { color:var(--muted); font-size:13.5px; padding:7px 10px; border-radius:8px; text-decoration:none; white-space:nowrap; }
nav a:hover { color:var(--text); background:var(--panel); }
.wrap { max-width:1180px; margin:0 auto; padding:20px 16px 60px; display:grid;
          grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
h1 { font-size:18px; line-height:1.35; margin:0 0 10px; }
.meta-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.badge { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
           padding:3px 8px; border-radius:6px; background:var(--bot); color:var(--muted); }
.badge.закон, .badge.кодекс, .badge.конституция { color:var(--accent); background:var(--accent-bg,#16281a); }
.meta-row .last { color:var(--muted); font-size:12.5px; }
.abtn { background:var(--panel); border:1px solid var(--border); color:var(--text); font-size:12.5px;
          font-family:inherit; padding:6px 12px; border-radius:8px; cursor:pointer; text-decoration:none; }
.abtn:hover { border-color:var(--accent); }
.abtn.on { border-color:var(--accent); color:var(--accent); background:var(--accent-bg,#16281a); }
/* per-article ДВ amendment marks. Наредби reconstructed from the gazette carry no in-body
     „(Изм. - ДВ, бр. …)", so these badges are the only place the reader can see that a
     particular article has been changed, and by which issue. */
  .dvmark { display:inline-block; margin-left:7px; padding:1px 7px; border-radius:9px;
            border:1px solid var(--warn,#7a6420); background:var(--panel,#2b2413); color:var(--warn,#e5c454);
            font-size:11.5px; line-height:1.5; cursor:help; vertical-align:2px; }
.dvmark:hover { border-color:var(--accent); color:var(--accent); }
.marknote { color:var(--muted); font-size:12.5px; margin:0 0 10px; }
/* the „какво се промени между две дати" range picker */
  .rng{border:1px solid var(--border); border-radius:9px; padding:9px 10px; margin:0 0 12px;
       display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:.82rem;}
.rng-t{width:100%; color:var(--muted); font-size:.78rem;}
.rng label{display:flex; align-items:center; gap:4px; color:var(--muted);}
.rng input{background:var(--bg); color:var(--text); border:1px solid var(--border);
             border-radius:6px; padding:3px 5px; font:inherit; font-size:.8rem;}
.rng button{background:var(--bg); color:var(--text); border:1px solid var(--border);
              border-radius:6px; padding:4px 10px; font:inherit; font-size:.8rem; cursor:pointer;}
.rng button:hover{border-color:var(--accent); color:var(--accent);}
/* the version banner (viewing an old version / a diff) */
  #banner { display:none; background:var(--panel,#2b2413); border:1px solid var(--warn,#7a6420); color:var(--warn,#e5c454); font-size:13px;
            border-radius:10px; padding:10px 13px; margin-bottom:12px; line-height:1.45; }
#banner button { background:none; border:none; color:var(--accent); cursor:pointer; font:inherit;
                   text-decoration:underline; padding:0; }
/* document text / diff */
  #body { background:var(--panel); border:1px solid var(--border); border-radius:12px;
          padding:18px 20px; font-size:14px; line-height:1.65; white-space:pre-wrap;
          word-wrap:break-word; min-height:200px; overflow-x:auto; }
#body .ln-add { color:var(--add); background:rgba(63,185,80,.09); display:block; }
#body .ln-del { color:var(--del); background:rgba(248,81,73,.09); display:block; text-decoration:line-through; }
#body .ln-hunk { color:var(--muted); display:block; margin-top:10px; }
.dots::after { content:'…'; animation:b 1.2s infinite; }
@keyframes b { 0%,100%{opacity:.3} 50%{opacity:1} }
/* timeline */
  aside h2 { font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase;
             letter-spacing:.4px; margin:2px 0 10px; }
#tl { border-left:2px solid var(--border); padding-left:0; margin:0; list-style:none;
        max-height:calc(100vh - 170px); overflow-y:auto; }
#tl li { position:relative; padding:7px 8px 7px 18px; cursor:pointer; border-radius:8px; }
#tl li::before { content:''; position:absolute; left:-5px; top:14px; width:8px; height:8px;
                   border-radius:50%; background:var(--border); }
#tl li:hover { background:var(--panel); }
#tl li.sel { background:var(--panel); }
#tl li.sel::before { background:var(--accent); }
#tl .d { font-size:12.5px; color:var(--text); font-weight:600; }
#tl .i { font-size:12px; color:var(--muted); }
#tl .cur { color:var(--accent); font-size:11px; font-weight:700; }
#tl li .dbtn { display:none; background:none; border:1px solid var(--border); color:var(--muted);
                 font-size:11px; border-radius:6px; padding:2px 7px; margin-top:4px; cursor:pointer; font-family:inherit; }
#tl li:hover .dbtn, #tl li.sel .dbtn { display:inline-block; }
#tl li .dbtn:hover { color:var(--accent); border-color:var(--accent); }
@media (max-width:860px){
    .wrap { grid-template-columns:1fr; }
    aside { order:-1; }
    #tl { max-height:210px; }
  }
/* measured 30px and 22px on a phone; 32 is the floor for a thumb */
.abtn, .rng button { min-height: 32px; }