/* ---------------------------------------------------------------- vaktskjár
   A wall display, not a page: read from across a room, never scrolled, never
   clicked. Layered on style.css so it inherits the same theme tokens — the
   colours mean the same thing here as on the board.

   SCALING — the whole file has one knob.

   Every size below is in rem, and the root font size is a fraction of the
   viewport width, so the layout is identical at 1080p, 1440p and 4K: same
   proportions, same number of columns, just more pixels. That is what a fixed
   display wants, because the viewing distance does not change with the panel's
   resolution — text should occupy a constant share of the screen, not shrink
   as the pixels get smaller.

   1.15vw puts the base at 22px on a 1920-wide screen and 44px on 3840. The
   clamp is for the two edges that are not TVs: a laptop window opened to
   check the wallboard stays legible at 13px, and an ultrawide video wall
   stops growing at 52px. */
html.tv-root {
  font-size: clamp(13px, 1.15vw, 52px);
}

body.tv {
  /* No scrollbar on a display nobody touches; overflow is reported as a count
     instead of hidden below the fold. */
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  /* Nobody is selecting text on a TV, and a stray drag leaves it highlighted
     for the rest of the week. */
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- top bar */

.tvbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .7rem 1.2rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.tvbrand {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex: none;
}

.tvbar h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.tvsub {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}

/* Counters. Deliberately few: on a wallboard every extra number costs
   attention that belongs on the rows below. */
.tvtiles {
  display: flex;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.tvtile {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: .4rem;
  background: var(--mute-bg);
  color: var(--mute);
  white-space: nowrap;
}

.tvtile .n {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tvtile .l {
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tvtile.incident    { background: var(--bad-bg);  color: var(--bad); }
.tvtile.maintenance { background: var(--warn-bg); color: var(--warn); }
.tvtile.ok          { background: var(--ok-bg);   color: var(--ok); }

.tvright {
  flex: none;
  text-align: right;
  line-height: 1.15;
}

.tvclock {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.tvfresh {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
}

.tvfresh.is-stale { color: var(--bad); }

.tvbtn {
  flex: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  padding: .35rem .8rem;
  border-radius: .4rem;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-2);
  cursor: pointer;
}

.tvbtn:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------------------------------------------------------------- filters */

.tvfilters {
  flex: none;
  padding: .6rem 1.2rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.tvfilters[hidden] { display: none; }

.tvchips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.tvchip {
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-3);
  cursor: pointer;
}

.tvchip.is-on {
  background: var(--info-bg);
  border-color: var(--info);
  color: var(--info);
}

.tvhint {
  margin: .5rem 0 0;
  font-size: .7rem;
  color: var(--ink-3);
}

.tvhint kbd {
  font: inherit;
  font-weight: 700;
  padding: 0 .25rem;
  border: 1px solid var(--line);
  border-radius: .2rem;
  background: var(--panel);
}

/* A wallboard that has quietly stopped updating is worse than a blank one, so
   staleness and fetch failures get a strip of their own. */
.tvwarn {
  flex: none;
  padding: .5rem 1.2rem;
  background: var(--bad-bg);
  color: var(--bad);
  font-size: .85rem;
  font-weight: 700;
}

.tvwarn[hidden] { display: none; }

/* ---------------------------------------------------------------- layout */

.tvmain {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 1rem;
  padding: 1rem 1.2rem;
}

/* Nothing undated: give the whole wall to what is running. */
.tvmain.no-und { grid-template-columns: 1fr; }
.tvmain.no-und .tvsec-und { display: none; }

.tvsec {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tvsechead {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .6rem;
}

.tvsechead h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-2);
}

.tvcount {
  font-size: .8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--mute-bg);
  color: var(--mute);
}

/* auto-fill rather than a fixed column count: because rem tracks the viewport,
   a 16:9 panel lands on the same three columns at every resolution, while an
   ultrawide gets a fourth instead of stretched cards. */
.tvgrid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  grid-auto-rows: min-content;
  gap: .6rem;
  overflow: hidden;
}

.tvlist {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: hidden;
}

/* ---------------------------------------------------------------- rows */

.tvrow {
  display: block;
  padding: .55rem .7rem .55rem .85rem;
  border-radius: .45rem;
  background: var(--panel);
  border: 1px solid var(--line);
  /* The severity read from across the room: a bar, not a 7px dot. */
  border-left: .3rem solid var(--mute);
  text-decoration: none;
  color: inherit;
}

.tvrow.k-incident    { border-left-color: var(--bad); }
.tvrow.k-maintenance { border-left-color: var(--warn); }
.tvrow.k-news        { border-left-color: var(--info); }

/* One line, always. A long name wrapping ('Microsoft 365 (Admin Center)')
   pushed the group tag onto a second line and made that card taller than its
   neighbours for no information gained. */
.tvsrc {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
  white-space: nowrap;
}

.tvsrc > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tvsrc .g {
  flex: none;
  font-size: .64rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.tvtitle {
  margin-top: .15rem;
  font-size: 1rem;
  font-weight: 640;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tvbody {
  margin-top: .15rem;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tvwhen {
  margin-top: .25rem;
  font-size: .8rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}

.tvrow.k-incident .tvwhen { color: var(--bad); }
.tvrow.k-news .tvwhen { color: var(--ink-3); font-weight: 650; }

.tvnew {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 0 .3rem;
  border-radius: .2rem;
  background: var(--info-bg);
  color: var(--info);
}

/* What did not fit, said out loud rather than cut off below the fold. */
.tvmore {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .55rem;
  border-radius: .45rem;
  border: 1px dashed var(--line);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- all clear */

.tvclear {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 2rem;
  border-radius: .6rem;
  background: var(--ok-bg);
  color: var(--ok);
}

.tvclear .big {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.tvclear .sub {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-2);
}

.tvempty {
  padding: .8rem;
  border-radius: .45rem;
  border: 1px dashed var(--line);
  font-size: .85rem;
  color: var(--ink-3);
  text-align: center;
}

/* Portrait panels do exist — a lobby screen turned on its side. Stack the two
   sections instead of squeezing the rail. */
@media (max-aspect-ratio: 1/1) {
  .tvmain { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .tvbar { flex-wrap: wrap; }
  .tvtiles { justify-content: flex-start; order: 3; flex-basis: 100%; }
}

/* All-clear: one cell, full height, so the good news lands in the middle of the
   wall instead of as a short banner above a large empty rectangle. */
.tvgrid.is-clear {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}