/* slagbyte.dev - личный сетевой дневник (эпоха ЖЖ). Две колонки: запись + боковые модули. */
:root{
  --paper:#e9ece2; --box:#fffdf8; --box2:#f4f2e8; --ink:#242620; --body:#3a3c33;
  --faint:#6f7163; --line:#b7bba8; --hair:#d7d9c9;
  --bar:#45617a; --bar-ink:#eef3f6; --bar2:#7a4a54;
  --link:#2b5d83; --vis:#6a4a7a; --hot:#9a3b2a;
  --serif:Georgia,"Times New Roman","Iowan Old Style",ui-serif,serif;
  --sans:"Segoe UI",Tahoma,Verdana,system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,"Lucida Console",Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--serif);
  font-size:16px;line-height:1.6;
  background-image:linear-gradient(var(--paper),var(--paper))}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;border:1px solid var(--line);padding:.4rem .7rem;z-index:40}
a{color:var(--link)}
a:visited{color:var(--vis)}
a:hover{color:var(--hot)}

/* --- шапка-масштхед дневника --- */
.mast{background:var(--box);border-bottom:3px double var(--line)}
.mast-in{max-width:62rem;margin:0 auto;padding:.9rem 1rem .7rem;display:flex;align-items:center;gap:.9rem}
.pic{flex:0 0 auto;width:54px;height:54px;border:1px solid var(--line);background:#fff;padding:2px}
.pic svg{display:block;width:100%;height:100%}
.mast h1,.mast .jt{margin:0;font-family:var(--sans);font-weight:700;font-size:1.55rem;
  letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.mast .jt a{color:var(--ink);text-decoration:none}
.mast .sub{margin:.15rem 0 0;font-style:italic;font-size:.95rem;color:var(--faint)}
.mast .uid{font-family:var(--mono);font-size:.72rem;color:var(--bar);margin-top:.15rem}

/* строка пользовательского меню (под шапкой) */
.ubar{background:var(--bar);color:var(--bar-ink);font-family:var(--sans);font-size:.78rem}
.ubar-in{max-width:62rem;margin:0 auto;padding:.3rem 1rem;display:flex;flex-wrap:wrap;
  gap:.2rem 1.1rem;align-items:center}
.ubar a{color:var(--bar-ink);text-decoration:none;padding:.15rem 0;border-bottom:1px solid transparent}
.ubar a:visited{color:var(--bar-ink)}
.ubar a:hover{border-color:var(--bar-ink);color:#fff}
.ubar a[aria-current]{font-weight:700;border-color:var(--bar-ink)}
.ubar .sp{margin-left:auto}
.ubar .you{opacity:.85}

/* --- сетка «запись + сайдбар» --- */
.page{max-width:62rem;margin:0 auto;padding:1.1rem 1rem 2rem}
.lj{display:grid;grid-template-columns:minmax(0,1fr) 15.5rem;gap:1.4rem;align-items:start}
.content{min-width:0}

h1{font-family:var(--sans);font-size:1.6rem;line-height:1.18;color:var(--ink);
  margin:0 0 .5rem;font-weight:700;letter-spacing:-.015em}
h2{font-family:var(--sans);font-size:1.12rem;color:var(--ink);margin:1.7rem 0 .5rem;font-weight:700}
h3{font-family:var(--sans);font-size:.98rem;color:var(--ink);margin:1.3rem 0 .35rem;font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:1.08rem;color:var(--ink)}
.meta{font-family:var(--sans);font-size:.8rem;color:var(--faint);margin:0 0 .4rem}
.meta time{color:var(--bar)}
hr{border:0;border-top:1px solid var(--line);margin:1.8rem 0}
code{font-family:var(--mono);font-size:.86em;background:var(--box2);border:1px solid var(--hair);
  padding:.03rem .25rem;border-radius:2px}

.tag{display:inline-block;font-family:var(--sans);font-size:.72rem;color:var(--bar);
  background:var(--box2);border:1px solid var(--hair);padding:.02rem .35rem;margin:0 .2rem .2rem 0;
  border-radius:2px;text-transform:lowercase}
.tag::before{content:"🏷";font-size:.7em;margin-right:.15rem;opacity:.55}

/* блок настроения/музыки у записи */
.feeling{font-family:var(--sans);font-size:.8rem;color:var(--faint);background:var(--box2);
  border:1px solid var(--hair);border-left:3px solid var(--bar2);padding:.4rem .6rem;margin:0 0 1.1rem;
  display:flex;flex-wrap:wrap;gap:.1rem 1.4rem}
.feeling b{color:var(--body);font-weight:600}
.lock{display:inline-block;font-family:var(--sans);font-size:.72rem;color:#7a5a12;
  background:#f6edcf;border:1px solid #ddc98b;border-radius:2px;padding:.03rem .35rem;margin-left:.3rem}
.lock::before{content:"🔒 ";font-size:.9em}

/* лента записей на главной / в поиске */
.feed{list-style:none;margin:0;padding:0}
.feed>li{background:var(--box);border:1px solid var(--line);border-top:3px solid var(--bar);
  padding:.8rem 1rem .7rem;margin:0 0 1.1rem}
.feed .d{font-family:var(--sans);font-size:.76rem;color:var(--faint)}
.feed h2{font-family:var(--serif);margin:.2rem 0 .45rem;font-size:1.22rem;line-height:1.25;font-weight:700}
.feed h2 a{text-decoration:none}
.feed h2 a:hover{text-decoration:underline}
.feed p{margin:0 0 .5rem;color:var(--body)}
.fc{font-family:var(--sans);font-size:.76rem;color:var(--faint);border-top:1px dotted var(--hair);
  padding-top:.4rem;margin-top:.5rem}
.fc a{text-decoration:none}

/* таблицы */
.tbl{overflow-x:auto;margin:1rem 0 1.3rem;border:1px solid var(--line);background:var(--box);
  -webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.82rem;line-height:1.4;
  font-variant-numeric:tabular-nums}
caption{caption-side:bottom;text-align:left;font-family:var(--sans);font-size:.76rem;color:var(--faint);
  padding:.5rem .6rem}
th,td{padding:.38rem .6rem;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
thead th{background:var(--box2);border-bottom:1px solid var(--bar);font-weight:700;white-space:nowrap;color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap}
td.k,.k{font-weight:600;color:var(--ink)}
tbody tr.hi td{background:#f6edcf}

/* врезки, списки правил, определения, рисунки */
.note{border:1px solid var(--line);border-left:4px solid var(--bar2);background:var(--box);
  padding:.75rem .95rem;margin:1.3rem 0}
.note p:last-child{margin:0}
figure{margin:1.4rem 0;padding:0}
figure svg{display:block;width:100%;height:auto;background:var(--box);border:1px solid var(--line)}
figcaption{font-family:var(--sans);font-size:.77rem;color:var(--faint);margin-top:.5rem;line-height:1.45}
ol.rules{padding-left:1.4rem;margin:1.1rem 0}
ol.rules li{margin-bottom:.7rem}
ol.rules b{font-weight:700;color:var(--ink)}
dl{margin:1.1rem 0}
dt{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--ink);margin-top:.8rem}
dd{margin:.1rem 0 0}

/* хлебные крошки, оглавление, «по годам» */
.crumb{font-family:var(--sans);font-size:.78rem;color:var(--faint);margin:0 0 .6rem}
.crumb a{text-decoration:none}
.toc{font-family:var(--sans);font-size:.8rem;display:flex;flex-wrap:wrap;gap:.3rem .9rem;
  background:var(--box2);border:1px solid var(--hair);padding:.5rem .8rem;margin:1.2rem 0}
.toc a{text-decoration:none}
h2.bar{border-bottom:2px solid var(--bar);padding-bottom:.2rem}
h2 .yc{font-family:var(--sans);font-weight:400;font-size:.85rem;color:var(--faint)}
.rel{border-top:1px solid var(--line);margin-top:2rem;padding-top:.9rem}

/* пагинация записей */
.pager{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;
  border-top:2px solid var(--bar);margin-top:1.6rem;padding-top:.8rem;
  font-family:var(--sans);font-size:.83rem}
.pager a{max-width:48%;text-decoration:none}
.pager span{color:var(--faint)}

/* блок комментариев под записью (декор) */
.cbox{background:var(--box2);border:1px solid var(--line);margin:1.6rem 0 0;padding:.6rem .8rem .7rem}
.cbox .ch{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--hair);padding-bottom:.35rem;margin-bottom:.5rem}
.cmt{font-family:var(--sans);font-size:.82rem;color:var(--body);margin:0 0 .5rem;line-height:1.45}
.cmt b{color:var(--vis)}
.cmt .ct{display:block;font-size:.7rem;color:var(--faint)}
.cwrite{font-family:var(--sans);font-size:.82rem;margin:.6rem 0 0}
.cwrite a{font-weight:700;text-decoration:none}

/* --- боковые модули --- */
.side{font-family:var(--sans);font-size:.82rem;min-width:0}
.box{background:var(--box);border:1px solid var(--line);margin:0 0 1.1rem}
.boxh{background:var(--bar);color:var(--bar-ink);font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.3rem .6rem}
.boxh.alt{background:var(--bar2)}
.boxc{padding:.55rem .7rem}
.boxc p{margin:0 0 .5rem}
.boxc p:last-child{margin:0}
.side .mini{font-size:.78rem;color:var(--faint);line-height:1.5}

/* мини-календарь */
.cal{border-collapse:collapse;width:100%;font-size:.76rem;font-variant-numeric:tabular-nums}
.cal caption{font-family:var(--sans);font-size:.78rem;color:var(--ink);font-weight:700;
  caption-side:top;text-align:center;padding:.1rem 0 .35rem}
.cal th{background:none;border:0;color:var(--faint);font-weight:600;text-align:center;padding:.1rem}
.cal td{border:0;text-align:center;padding:.14rem;color:var(--body)}
.cal td.o{color:var(--line)}
.cal td.on a{display:inline-block;min-width:1.4em;background:var(--bar2);color:#fff;
  text-decoration:none;border-radius:2px;font-weight:700}

/* облако меток */
.tagcloud{display:flex;flex-wrap:wrap;gap:.3rem}
.tagcloud a{text-decoration:none;color:var(--link);background:var(--box2);border:1px solid var(--hair);
  padding:.05rem .35rem;border-radius:2px;line-height:1.5}
.tagcloud a:hover{border-color:var(--bar)}
.tagcloud .c{color:var(--faint);font-size:.9em}
.tagcloud .s1{font-size:.8rem}
.tagcloud .s2{font-size:.95rem;font-weight:600}

/* френды */
.friends{list-style:none;margin:0;padding:0}
.friends li{padding:.16rem 0;border-bottom:1px dotted var(--hair)}
.friends li:last-child{border-bottom:0}
.friends a{text-decoration:none;font-family:var(--mono);font-size:.8rem}
.friends a::before{content:"👤 ";font-size:.85em;opacity:.5}

/* счётчик посещений (стаб) */
.counter{text-align:center;padding:.2rem 0 .1rem}
.counter svg{display:block;width:100%;height:auto;max-width:170px;margin:0 auto}
.counter .cap{font-size:.72rem;color:var(--faint);margin-top:.3rem}

/* свежие комментарии */
.rcom{list-style:none;margin:0;padding:0;font-size:.78rem}
.rcom li{padding:.3rem 0;border-bottom:1px dotted var(--hair);line-height:1.4}
.rcom li:last-child{border-bottom:0}
.rcom b{color:var(--vis);font-family:var(--mono);font-size:.92em}
.rcom .to{color:var(--faint)}

/* --- форма входа --- */
.ljform{background:var(--box);border:1px solid var(--line);max-width:26rem;margin:1rem 0;padding:0}
.ljform .boxh{font-size:.78rem}
.ljform form{padding:.9rem 1rem 1rem}
.frow{margin:0 0 .8rem}
.frow label{display:block;font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:.2rem}
.frow input[type=text],.frow input[type=password]{width:100%;font:inherit;font-size:1rem;
  padding:.45rem .55rem;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px}
.frow input:focus{outline:2px solid var(--bar);outline-offset:1px;border-color:var(--bar)}
.frow.chk{font-family:var(--sans);font-size:.85rem;display:flex;align-items:center;gap:.4rem}
.frow.chk label{margin:0;font-weight:400}
.btn{font-family:var(--sans);font-size:.9rem;font-weight:700;color:#fff;background:var(--bar);
  border:1px solid #33475a;border-radius:2px;padding:.45rem 1.1rem;cursor:pointer}
.btn:hover{background:#3a5369}
.btn.sec{background:var(--box2);color:var(--bar);border-color:var(--line)}
.formmsg{font-family:var(--sans);font-size:.85rem;margin:.7rem 0 0;min-height:1.1em}
.formmsg.err{color:var(--hot)}
.formmsg.ok{color:#2a6a4a}
.regnote{font-family:var(--sans);font-size:.85rem;background:#f6edcf;border:1px solid #ddc98b;
  padding:.5rem .7rem;margin:.8rem 0 0;display:none}
.regnote.show{display:block}

/* подвал */
.foot{background:var(--box);border-top:3px double var(--line);font-family:var(--sans);
  font-size:.78rem;color:var(--faint)}
.foot-in{max-width:62rem;margin:0 auto;padding:.8rem 1rem 1.2rem;display:flex;flex-wrap:wrap;
  gap:.3rem 1.4rem;justify-content:space-between}
.foot a{text-decoration:none}
.foot p{margin:0}

/* графики в записях */
.svg-axis{stroke:#9aa08c;stroke-width:1}
.svg-grid{stroke:#dfe2d2;stroke-width:1}
.svg-sig{fill:none;stroke:#242620;stroke-width:1.3;stroke-linejoin:round}
.svg-ref{stroke:#9a3b2a;stroke-width:1.2;stroke-dasharray:5 4}
.svg-ref2{stroke:#45617a;stroke-width:1.2;stroke-dasharray:2 3}
.svg-t{font-family:var(--sans);font-size:10px;fill:#6f7163}
.svg-t.a{fill:#9a3b2a}

@media (max-width:760px){
  .lj{grid-template-columns:1fr}
  .side{order:2}
}
@media (max-width:420px){
  body{font-size:15px}
  .mast-in{flex-wrap:wrap;gap:.6rem}
  .ubar-in{font-size:.74rem;gap:.15rem .7rem}
  .pager a{max-width:100%}
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#191a16; --box:#212219; --box2:#26271d; --ink:#e9e8de; --body:#cdccbf;
    --faint:#938f82; --line:#3a3b2f; --hair:#30311f;
    --bar:#3f576d; --bar-ink:#eef3f6; --bar2:#7a4a54;
    --link:#6fb0e0; --vis:#b193c8; --hot:#e08a6a;
  }
  .frow input[type=text],.frow input[type=password]{background:#15160f;color:var(--ink)}
  .lock,.regnote{background:#332c12;border-color:#5a4a1f;color:#e3c889}
  tbody tr.hi td{background:#33301c}
  .cal td.on a{color:#fff}
}