/* =====================================================================
   Раздел «Журнал» (fos/s-log.js) — panel-desktop §6.14 + Д11, прототип 27.
   ===================================================================== */
.lg-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lg-bar .g-chips{gap:6px}
.lg-bar .g-chip{padding:0 14px}
.lg-bar .g-chip:not(.is-on):hover{border-color:var(--dash);color:var(--ink)}
.lg-backup{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--green-deep);white-space:nowrap}
.lg-backup.is-bad{color:var(--coral-ink)}
.lg-backup .g-ico{width:12px;height:12px}
.lg-backup .g-ico svg{stroke-width:2.2}
/* та же строка в меню пользователя админа: под «АДМИНИСТРАТОР · ЛОГИН», длинный текст сбоя переносится */
.lg-bkmenu{display:block;margin-top:6px}
.lg-bkmenu .lg-backup{display:inline;white-space:normal;line-height:1.5}
.lg-bkmenu .lg-backup .g-ico{display:inline-block;vertical-align:-1px;margin-left:5px}

.lg-list{display:flex;flex-direction:column}
.lg-row{border-bottom:1px solid var(--line-row)}
.lg-tr{display:grid;grid-template-columns:110px 170px minmax(0,1fr) 30px;gap:14px;align-items:center;padding:var(--row-py) var(--row-px);
  cursor:pointer;transition:background .12s}
.lg-tr:hover{background:var(--hover)}
.lg-tr > *{min-width:0}
.lg-when{font:500 11.5px var(--mono);color:var(--soft);white-space:nowrap}
.lg-who{display:flex;align-items:center;gap:6px;font:400 13px var(--font);color:var(--ink);min-width:0}
.lg-who__n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-what{font:300 14px/1.45 var(--font);color:var(--ink);overflow-wrap:anywhere}
.lg-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--dash);text-underline-offset:3px}
.lg-link:hover{color:var(--link-hover);text-decoration-color:currentColor}
/* «›» как в прототипе — знак у левого края колонки 30 px; кликается вся строка, кнопка — для клавиатуры */
.lg-more{width:30px;height:22px;justify-self:start;border:none;border-radius:6px;background:transparent;padding:0;
  font:500 12px var(--mono);color:var(--faint);display:inline-flex;align-items:center;justify-content:flex-start;transition:color .15s}
.lg-more:hover,.lg-tr:hover .lg-more{color:var(--ink)}
.lg-more > span{display:inline-block;width:7px;text-align:center;transition:transform .15s}
.lg-row.is-open .lg-more{color:var(--ink)}
.lg-row.is-open .lg-more > span{transform:rotate(90deg)}
.lg-row.is-open .lg-tr{background:var(--hover)}
/* детали — под колонкой «что»: поле строки + 110 + 14 + 170 + 14 (332 px при «обычно») */
.lg-det{padding:10px 24px 14px calc(var(--row-px) + 308px);background:var(--surface-3);font:400 12px/1.6 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.lg-det__k{color:var(--faint)}
.lg-foot{padding:14px;display:flex;justify-content:center}
.lg-next{font:400 13.5px var(--font);padding:0 20px}

.lg-skel{display:flex;flex-direction:column;gap:16px}
.lg-skel__chips{height:34px;width:420px;max-width:100%;border-radius:var(--r-pill)}
@media (prefers-reduced-motion:reduce){.lg-more,.lg-more > span{transition:none}}

/* ---------- телефон (panel-phone §5.7): строка-карточка ---------- */
@media (max-width:860px){
  .lg-bar{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-16px - var(--safe-r)) 0 calc(-16px - var(--safe-l));padding:1px 16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lg-bar::-webkit-scrollbar{display:none}
  .lg-bar .g-chips{flex-wrap:nowrap}
  /* чипы: вид 42, зона 44 (panel-phone §7); ряд прокручивается, поэтому +1 px сверху и снизу у .lg-bar — слой не обрезается */
  .lg-bar .g-chip{position:relative;flex:none;height:42px;font-size:14px}
  .lg-bar .g-chip::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .lg-bar .g-spacer{display:none}
  .g-card.lg-card{border-radius:20px}
  .lg-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who when" "what more";gap:6px 10px;padding:14px 16px}
  .lg-row{border-bottom-color:var(--line-soft)}
  .lg-when{grid-area:when;justify-self:end}
  .lg-who{grid-area:who}
  .lg-what{grid-area:what;font-size:15px}
  .lg-more{grid-area:more;width:36px;height:36px;font-size:14px;justify-content:center;justify-self:end}
  .lg-det{padding:10px 16px 14px}
  .lg-next{height:44px;font-size:15px}
  .lg-skel__chips{height:42px}
}