/* Skärmvyer: /kommandevecka (projektor) och /skarm (skyltfönster).
   Läsbart på flera meters avstånd: storlekar i vmin/vw, kontrast ≥ 7:1, ingen muspekare. */

@font-face { font-family: "Fraunces"; src: url(/build/fonts/fraunces-latin-wght.7f9d191d99.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/build/fonts/inter-latin-wght.3100e775e8.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font-body: "Inter", system-ui, sans-serif;
  --font-head: "Fraunces", Georgia, serif;
  --shift-x: 0px;
  --shift-y: 0px;
  --fade: 600ms;
}

/* Light theme (daytime): ink on cream – contrast 13:1 */
html[data-theme="light"] { --bg: #FBF7F1; --fg: #1F2A2E; --muted: #3E484C; --accent: #8A3A1B; --panel: #F1E5D3; --qr-bg: #FFFFFF; --thread: #b23a24; }
/* Dark theme (evening/projector): cream on near-black – contrast 15:1 */
html[data-theme="dark"] { --bg: #111517; --fg: #FBF3E8; --muted: #D9D0C4; --accent: #F2A47D; --panel: #1C2226; --qr-bg: #FFFFFF; --thread: #ef6a4c; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
html.screen, html.screen * { cursor: none !important; }
body {
  background: var(--bg); color: var(--fg);
  font: 500 2.4vmin/1.35 var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color 2s ease, color 2s ease;
}
h1, h2 { font-family: var(--font-head); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
img, svg { display: block; }

.screen__content {
  position: absolute; inset: 0;
  transform: translate(var(--shift-x), var(--shift-y));
  transition: transform 4s ease, opacity var(--fade) ease;
}
.screen__content.is-swapping { opacity: 0; }

/* Status dot: shown when the last data refresh failed (offline). */
.screen__status { position: fixed; right: 1vmin; bottom: 1vmin; width: 1.2vmin; height: 1.2vmin; border-radius: 50%; background: #C77700; opacity: 0.7; }

/* Night: black screen, or a dim logo that drifts (anti burn-in). */
.screen__night { position: fixed; inset: 0; background: #000; display: none; place-items: center; z-index: 10; }
html[data-night="true"] .screen__night { display: grid; }
html[data-night="true"] .screen__content { visibility: hidden; }
/* The logo's red thread; at night the whole logo stays dim */
.logo-symbol__thread { stroke: var(--thread, currentColor); }
.screen__night-logo .logo-symbol__thread { stroke: currentColor; }
.screen__night-logo { width: 18vmin; height: 18vmin; color: #3A3A3A; transform: translate(calc(var(--shift-x) * 20), calc(var(--shift-y) * 20)); transition: transform 30s linear; }

/* ============ /kommandevecka – 16:9 projector ============ */
.week {
  height: 100%; padding: 4vh 5vw; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3vh;
  font-size: calc(2.1vw * var(--fit, 1));
}
.week__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vw; border-bottom: 0.25vh solid var(--accent); padding-bottom: 2vh; }
.week__brand { display: flex; align-items: center; gap: 1vw; font-weight: 650; font-size: 1.6vw; }
.week__brand svg { width: 3.4vw; height: 3.4vw; }
.week__title { font-size: 4.2vw; text-align: center; }
.week__empty { font-size: 3vw; align-self: center; text-align: center; color: var(--muted); }
/* One column, read top to bottom: the day in a narrow column on the left, its events beside it. */
.week__days { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; height: 100%; min-height: 0; overflow: hidden; }
.week__day {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 1.4em; align-items: baseline;
  padding: 0.55em 0; border-bottom: 0.15vh solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.week__day:last-child { border-bottom: 0; }
/* A very busy week only (set by screen.js when one column would need too small text). */
.week--columns .week__days { display: block; column-count: 2; column-gap: 4vw; column-fill: auto; }
.week--columns .week__day { break-inside: avoid; }
.week__day-name { font-size: 1.1em; color: var(--accent); margin: 0; line-height: 1.25; }
.week__day-name::first-letter { text-transform: uppercase; }
.week__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3em; }
.week__event { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 0.9em; align-items: baseline; }
.week__time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.week__name { font-weight: 600; line-height: 1.25; }

/* ============ /skarm – rotating cards ============ */
.display { position: relative; height: 100%; padding: 6vmin; }
.display__brand {
  position: absolute; top: 4vmin; left: 6vmin; display: flex; align-items: center; gap: 1.6vmin;
  font-weight: 650; font-size: 3vmin; z-index: 2; transition: all 2s ease;
}
.display__brand svg { width: 7vmin; height: 7vmin; }
.display__brand.is-alt { left: auto; right: 6vmin; }

.slide {
  position: absolute; inset: 14vmin 6vmin 8vmin; display: grid; gap: 5vmin; align-content: center;
  opacity: 0; visibility: hidden; transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--fade) ease; }
.slide__body { display: grid; gap: 3vmin; align-content: center; }
.slide__title { font-size: 8.5vmin; }
.slide__text { margin: 0; font-size: 5vmin; line-height: 1.3; max-width: 30ch; }
.slide__highlight { margin: 0; font-size: 4.6vmin; font-weight: 650; color: var(--accent); }
.slide__speaker { color: var(--fg); }
.slide__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4vmin; }
.slide__events li { display: grid; gap: 0.3vmin; padding-left: 2.4vmin; border-left: 0.8vmin solid var(--accent); }
.slide__when { font-size: 3.4vmin; color: var(--muted); font-weight: 600; }
.slide__what { font-size: 4.8vmin; font-weight: 650; line-height: 1.15; }

.slide__image { width: auto; max-width: 100%; max-height: 34vmin; object-fit: contain; border-radius: 2vmin; }
.slide__draft { margin: 0; justify-self: start; padding: 0.6vmin 1.6vmin; border-radius: 1vmin; background: #C77700; color: #000; font-size: 2.4vmin; font-weight: 700; }
.slide__qr { margin: 0; display: grid; justify-items: center; gap: 1.6vmin; align-self: center; }
.slide__qr img {
  width: 26vmin; height: 26vmin; min-width: 22vmin; padding: 1.4vmin; border-radius: 2vmin;
  background: var(--qr-bg); image-rendering: pixelated;
}
.slide__qr figcaption { font-size: 3vmin; font-weight: 650; text-align: center; }

.display__progress { position: absolute; left: 6vmin; right: 6vmin; bottom: 4vmin; height: 0.5vmin; background: color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 1vmin; overflow: hidden; }
.display__progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.display__progress span.is-running { width: 100%; transition: width var(--duration, 12s) linear; }

/* Accent band swaps sides between cards to vary which pixels are lit (anti burn-in). */
.slide::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1.4vmin; background: var(--accent); border-radius: 1vmin; left: -3.5vmin; opacity: 0.9; }
.slide:nth-of-type(even)::before { left: auto; right: -3.5vmin; }

/* Landscape: text left, QR right. */
html[data-orientation="landscape"] .slide { grid-template-columns: 1fr auto; }
/* Portrait: stacked, QR at the bottom. */
html[data-orientation="portrait"] .slide { grid-template-rows: 1fr auto; align-content: stretch; }
html[data-orientation="portrait"] .slide__title { font-size: 9.5vmin; }
html[data-orientation="portrait"] .slide__qr img { width: 32vmin; height: 32vmin; }
@media (orientation: landscape) { html[data-orientation="auto"] .slide { grid-template-columns: 1fr auto; } }
@media (orientation: portrait) {
  html[data-orientation="auto"] .slide { grid-template-rows: 1fr auto; align-content: stretch; }
  html[data-orientation="auto"] .slide__title { font-size: 9.5vmin; }
  html[data-orientation="auto"] .slide__qr img { width: 32vmin; height: 32vmin; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 1ms; }
  .screen__content, .display__brand { transition: none; }
}