/* TF-142: home-screen widget «лимиты + система». Одна карточка (.lw) —
   четыре числа в ряд, без рамок и цвета, пока всё в порядке; строки проблем
   (.lw-issues) появляются под числами только когда есть проблема. Телефон —
   карточка в потоке над поиском (#home-summary). Десктоп (от 1400 px) — та
   развёрнутые подробности в левой колонке (#home-side). Тап/клик карточки
   открывает лист подробностей (#home-sheet) снизу на телефоне. Токены и
   цвета — из app.css, своих нет. Макет — design/tf142/. */

/* ---------- карточка ---------- */
.lw{display:block;width:100%;margin:2px 0 10px;padding:8px 6px 8px 0;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--fg);font:inherit}
.lw:active{background:var(--card2)}
.lw.alert{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.lw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 12px;align-items:stretch}
.lw-cell{min-width:0;padding:0 8px 0 10px;border-left:1px solid var(--line)}
.lw-cell:first-child{border-left:none}
.lw-lab{display:flex;align-items:center;gap:4px;font-size:11px;line-height:14px;color:var(--dim);white-space:nowrap}
.lw-lab .dic,.lw-lab .ic{width:11px;height:11px}
.lw-lab .n{margin-left:1px;font-variant-numeric:tabular-nums}
.lw-val{margin-top:3px;font-size:17px;line-height:20px;font-weight:620;
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.2px}
.lw-note{font-size:10.5px;line-height:13px;color:var(--dim);white-space:nowrap;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.lw-val.small{font-size:14px}
.warn .lw-val,.warn .lw-note{color:var(--warn)}
.bad .lw-val,.bad .lw-note{color:var(--bad)}
.bad .lw-lab .n,.warn .lw-lab .n{color:var(--fg)}
.lw-more{align-self:center;color:var(--dim);font-size:18px;line-height:1;opacity:.8}

.lw-issues{margin:8px 0 0 10px;padding-top:6px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px}
.lw-issue{display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:17px;min-width:0}
.lw-issue i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--warn)}
.lw-issue.bad i{background:var(--bad)}
.lw-issue span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lw-issue small{margin-left:auto;padding-left:8px;flex:none;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.lw-issue.rest{color:var(--dim);font-size:11.5px}
.lw-issue.rest i{background:none;border:1px solid var(--dim)}
.lw-foot{display:none}
body.guest .lw{display:none!important}

/* ---------- лист подробностей (#home-sheet) ---------- */
.home-side{display:none}
.home-right{display:none}
.home-sheet{display:none}
.home-backdrop{display:none}
body.home-sheet-open .home-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45)}
body.home-sheet-open .home-sheet{
  display:block;position:fixed;left:0;right:0;bottom:0;z-index:56;width:min(100%,560px);margin:0 auto;
  max-height:calc(100vh - var(--sa-top) - 48px);overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--pagepad) calc(14px + var(--sa-bottom));background:var(--bg);border:1px solid var(--line);
  border-bottom:none;border-radius:16px 16px 0 0;box-shadow:0 -12px 36px rgba(0,0,0,.35)
}
.home-sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;
  padding:14px 0 8px;background:var(--bg)}
.home-sheet-head::before{content:"";position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;
  border-radius:2px;background:var(--line)}
.home-sheet-head b{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ls-sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px 6px;margin-top:8px}
.ls-sec h3{display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:13px;font-weight:650}
.ls-sec h3 .dic,.ls-sec h3 .ic{width:13px;height:13px;color:var(--dim)}
.ls-sec h3 small{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
.ls-sec h3 small b{font-weight:600;color:var(--fg)}
.ls-sec h3 small.bad b{color:var(--bad)}
.fl-no-data{color:var(--dim);font-size:12px;padding:4px 0 6px}

/* Таблица профилей: имя | 5ч | неделя. Под процентом — время сброса. */
.pt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pt th{font-size:10.5px;font-weight:500;color:var(--dim);text-align:right;padding:4px 0 2px}
.pt th:first-child{text-align:left}
.pt td{padding:5px 0;border-top:1px solid var(--line);vertical-align:top;font-size:13px}
.pt td.w{text-align:right;width:84px;line-height:1.2}
.pt td.w small{display:block;font-size:10.5px;color:var(--dim)}
.pt td.w.warn b{color:var(--warn)} .pt td.w.bad b{color:var(--bad)}
.pt td.w b{font-weight:600}
.pt td.nm{line-height:1.2}
.pt td.nm small{display:block;font-size:10.5px;color:var(--dim)}
.pt tr.off td.nm{color:var(--dim)}
.pt td.st{text-align:right;font-size:12px}
.pt td.st.warn{color:var(--warn)} .pt td.st.bad{color:var(--bad)}
.tag{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:6px;color:var(--accent);font-size:10px;line-height:15px;vertical-align:1px}

/* Деньги и узлы — простые строки «имя … значение». */
.kv{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.ls-sec h3 + .kv{border-top:none}
.kv > span{min-width:0}
.kv b{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kv b.warn{color:var(--warn)} .kv b.bad{color:var(--bad)}
.kv i.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;align-self:center}
.kv.down{column-gap:6px}
.node + .kv{border-top:1px solid var(--line)}
.kv i.dot.warn{background:var(--warn)} .kv i.dot.bad{background:var(--bad)}
.node{display:grid;grid-template-columns:10px minmax(0,1fr) 62px 44px;column-gap:6px;align-items:baseline;
  padding:5px 0;border-top:1px solid var(--line);font-size:13px;font-variant-numeric:tabular-nums}
.node.hd{border-top:none;font-size:10.5px;color:var(--dim);padding:2px 0}
.node>span:nth-child(n+3){text-align:right}
.node .warn{color:var(--warn)} .node .bad{color:var(--bad)}
.system-details{grid-column:2/-1;min-width:0;padding-top:3px}
.system-gpu{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px;line-height:14px}
.system-gpu b{font-weight:600;color:var(--fg)}
.system-gpu.warn b{color:var(--warn)}
.system-gpu>i{display:block;flex:1;max-width:64px;height:4px;overflow:hidden;border-radius:3px;background:var(--line)}
.system-gpu>i>i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.system-gpu.warn>i>i{background:var(--warn)}
.system-models{margin-top:2px}
.system-model{display:flex;gap:5px;min-width:0;font-size:11px;line-height:14px}
.system-model span{flex:none;color:var(--dim)}
.system-model b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}

body.guest .home-sheet,body.guest .home-backdrop,body.guest .home-side,body.guest .home-right{display:none!important}
#limits[hidden],#sysinfo[hidden]{display:none!important}

/* ---------- десктоп: левая рельса (лимиты) от 1400 px; правая (система) от 1800 px ---------- */
/* Right rail from 1800 px (Sergey 27.09: Система on the right on a 1920 screen); cards lose ~100 px there. */
@media (min-width:1400px){
  body:has(#v-sessions:not(.hidden)){--page:1740px}
  /* The rail width is shared by the home grid and desktop session cards. */
  :root{--rail-l:250px;--rail-r:220px}
  .home{display:grid;grid-template-columns:var(--rail-l) minmax(0,1fr);column-gap:16px;align-items:start}
  .home-main{grid-column:2;grid-row:1;min-width:0}
  .home-main>.lw{display:none}
  .home-side{display:block;grid-column:1;grid-row:1;min-width:0;position:sticky;top:calc(56px + var(--sa-top))}
  .home-side .ls-sec:first-child{margin-top:0}
  /* .home-side-sys visible here: Система shown inside the left rail */
  #v-sessions .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (min-width:1800px){
  body:has(#v-sessions:not(.hidden)){--page:1976px}
  .home{grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r)}
  .home-right{display:block;grid-column:3;grid-row:1;min-width:0;position:sticky;top:calc(56px + var(--sa-top))}
  .home-right .ls-sec:first-child{margin-top:0}
  /* Система now in right rail; hide the copy inside the left rail */
  .home-side-sys{display:none}
}

/* Светлая тема: предупреждения/крит текстом — как body.light .quota-val.warning/critical. */
body.light .warn .lw-val,body.light .warn .lw-note,body.light .pt td.w.warn b,body.light .pt td.st.warn,
body.light .kv b.warn,body.light .node .warn{color:#925200}
body.light .bad .lw-val,body.light .bad .lw-note,body.light .pt td.w.bad b,body.light .pt td.st.bad,
body.light .kv b.bad,body.light .node .bad,body.light .ls-sec h3 small.bad b{color:#b42332}