/**
 * Часы МСК внизу меню (js/clock.js). Отдельным файлом: css/shell.css и так
 * держит весь каркас.
 */

/* ── Часы МСК (js/clock.js) ───────────────────────────────────────────── */
/* Внизу меню, над пользователем: время, по которому сервер считает сутки,
   лимиты и окна. Секунды мельче — главное часы и минуты. */

.clock {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "tz time warn" "date date date";
  align-items: baseline;
  gap: 0 6px;
  margin-top: auto;
  padding: var(--s2) var(--s2) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(0, 0, 0, .25);
  cursor: default;
}
.clock-tz {
  grid-area: tz;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--accent-hi);
  font: 700 9px/1.4 var(--sans);
  letter-spacing: .1em;
}
.clock-time { grid-area: time; font-variant-numeric: tabular-nums; }
.clock-hm { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.clock-s { font-size: 11px; color: var(--text-mute); }
.clock-date { grid-area: date; font-size: 10.5px; color: var(--text-mute); }
.clock-warn { grid-area: warn; font-style: normal; color: var(--warn); cursor: help; }
.clock.off { border-color: var(--warn-line); }
/* Подвал меню больше не прижимается к низу сам — это делают часы над ним. */
.clock + .sidebar-foot { margin-top: var(--s2); }

@media (max-width: 1240px) {
  .clock { grid-template-columns: 1fr; grid-template-areas: "time" "warn"; justify-items: center; padding: 4px 2px; }
  .clock-tz, .clock-date, .clock-s { display: none; }
  .clock-hm { font-size: 11px; }
}
@media (max-width: 760px) {
  .clock { margin: 0 0 0 var(--s2); border: 0; background: none; padding: 0; }
  .clock-hm { font-size: 12px; }
}