/* light-dark(): the light colour, the dark one; which by color-scheme, the system's unless chosen (data-theme, see the switch) */
:root {
  color-scheme: light dark;
  --bg: light-dark(#fafaf8, #17181b);
  --fg: light-dark(#1d1d1b, #e8e8e3);
  --muted: light-dark(#6b6b66, #9a9a94);
  --line: light-dark(#deded9, #2e3036);
  --on: light-dark(#f6d55c, #d9b43a);
  --off: light-dark(#3a3f4b, #4a5163);
  --maybe: light-dark(#b8bcc6, #8a8f9c);
  --now: light-dark(#c9302c, #ff6b66);  /* the label of the current half-hour: contrast at least 4.5 */
  --hover: light-dark(#2f6fde, #7aa7ff);
  --hover-brightness: 1.12;  /* more would wash out the hatched cells; not a colour, so set for dark below */
  --warn-bg: light-dark(#fdecea, #3a1d1c);
  --warn-fg: light-dark(#8a1f1b, #ffb4ae);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --hover-brightness: 1.2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hover-brightness: 1.2; }
}

* { box-sizing: border-box; }

/* the title and the groups in a sidebar, the tables take the rest of the width they need */
body {
  display: flex;
  flex-wrap: wrap;  /* the footer under both */
  align-items: flex-start;
  min-height: 100dvh;  /* the footer at the bottom of the screen when the page is shorter */
  gap: 16px clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 16px clamp(16px, 3vw, 40px);
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header { flex: 0 0 240px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }

h1 { font-size: 1.05rem; margin: 0 0 2px; }
#updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 10px; min-height: 2.8em; }  /* its two lines, before the data comes */
h2 { font-size: 1.1rem; margin: 0 0 8px; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; }

#chooser { margin-bottom: 12px; }
#chooser summary { cursor: pointer; font-weight: 500; padding: 4px 0; }
#count { color: var(--muted); font-weight: 400; }
#chooser .actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
#all { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--fg); font: inherit; cursor: pointer; }
#all:hover { border-color: var(--fg); }
#groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 8px; }
#groups label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; user-select: none; font-variant-numeric: tabular-nums;
}
#groups label:has(input:checked) { border-color: var(--fg); }
#groups input { margin: 0; }

#union-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
#union-toggle input { margin: 0; }

#message { color: var(--warn-fg); margin: 0; }
#message:empty { display: none; }

/* the days side by side while they fit, else one under the other */
main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px 48px; }
main.loading + footer { visibility: hidden; }  /* until the first response: it moves to below the tables, unseen */
section { min-width: min(280px, 100%); max-width: 100%; }

footer { flex: 1 0 100%; align-self: flex-end; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-top: 16px; color: var(--muted); font-size: 0.85rem; }
footer p { max-width: 70ch; margin: 0 0 6px; }
/* the theme switch, see the script */
#theme { flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: none; color: var(--fg); font-size: 15px; line-height: 1; cursor: pointer; }
#theme:hover { border-color: var(--fg); }

.emergency { background: var(--warn-bg); color: var(--warn-fg); padding: 8px 10px; border-radius: 6px; margin: 0 0 8px; }
.empty { color: var(--muted); }

/* narrow screens: the sidebar on top */
@media (max-width: 700px) {
  body { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  header { position: static; max-height: none; overflow: visible; }
  main { flex: 1 0 auto; }
  footer { flex: none; align-self: auto; }
}

.scroll { overflow-x: auto; }  /* only when the table can't fit even with vertical labels, see fit() */
/* columns --col wide (set by the number of groups, see colWidth()), narrower down to their labels when the screen is too narrow */
table { --col: 48px; margin: 0 auto; border-collapse: separate; border-spacing: 2px 0; font-variant-numeric: tabular-nums; }
th { font-weight: 500; font-size: 0.85rem; }
thead th { padding: 0 2px 4px; white-space: nowrap; }
table.vertical { border-spacing: 1px 0; }
table.vertical thead th:not(.time) { writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 0; font-size: 0.75rem; line-height: 1; text-align: left; }
th.time, tbody th { width: 3.5em; position: sticky; left: 0; background: var(--bg); z-index: 1; }  /* stays while the groups scroll */
th.time { vertical-align: bottom; }
/* the switch of today's past hours, see renderDay() */
.past-toggle { width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted);
  font: inherit; line-height: 1.3; cursor: pointer; }
.past-toggle:hover { border-color: var(--fg); color: var(--fg); }
tbody th { line-height: 1; padding-block: 0; text-align: right; padding-right: 6px; color: var(--muted); font-weight: 400; }
tbody tr:nth-child(even) th { visibility: hidden; }  /* label the hours only */
td, thead th:not(.time) { width: var(--col); }
/* the lines of the current half-hour and of the hour and column under the pointer, combined */
td { height: 20px; padding: 0; box-shadow: var(--top, 0 0 #0000), var(--bottom, 0 0 #0000), var(--left, 0 0 #0000), var(--right, 0 0 #0000); }
tbody tr:nth-child(odd) td { border-top: 1px solid var(--bg); }

.on { background: var(--on); }
.off { background: var(--off); }
.maybe { background: repeating-linear-gradient(45deg, var(--maybe) 0 3px, transparent 3px 6px); }

/* the time where an outage starts or the light comes back, see isMark() */
/* the column «Разом», set apart from the groups */
td.union, th.union { border-left: 6px solid var(--bg); }

td.mark { font-size: 12px; line-height: 12px; text-align: center; white-space: nowrap; overflow: hidden; font-weight: 600; }
.on.mark { color: #1d1d1b; }
.off.mark { color: #fff; }
.maybe.mark span { padding: 0 3px; border-radius: 2px; background: var(--bg); color: var(--fg); }

tr.past td { opacity: 0.45; }
tbody tr.now th { visibility: visible; color: var(--now); font-weight: 600; }  /* tbody: over the hidden :30 labels */
tr.now td { --top: inset 0 2px 0 var(--now); }

/* the hour under the pointer (a tbody of its two half-hours) and the column (.col-hover, see highlightColumn());
   not on touch screens, where a tap would leave them highlighted */
@media (hover: hover) {
  tbody:hover tr:first-child th { color: var(--fg); font-weight: 600; }
  tbody:hover tr.now:first-child th { color: var(--now); }
  tbody:hover td { opacity: 1; }  /* the past hour too; the column's past cells stay dimmed */
  tbody:hover td, td.col-hover { filter: brightness(var(--hover-brightness)); }
  tbody:hover tr:first-child:not(.now) td { --top: inset 0 2px 0 var(--hover); }
  tbody:hover tr:last-child td { --bottom: inset 0 -2px 0 var(--hover); }
  td.col-hover { --left: inset 2px 0 0 var(--hover); --right: inset -2px 0 0 var(--hover); }
  thead th.col-hover { color: var(--hover); font-weight: 600; }
}