/* Skärmvyer för Bön och ljus. Mått, färger och typografi speglar temat boner-o-ljus-v3.
   Skriven för att fungera ner till Chromium 53 (LG webOS Signage 4): inga clamp(), grid, gap, inset eller aspect-ratio. */

@font-face { font-family: "DM Sans"; font-weight: 400; src: url("fonts/DMSans.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; src: url("fonts/DMSans.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; src: url("fonts/DMSans.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 400; src: url("fonts/Spectral-Regular.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 600; src: url("fonts/Spectral-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; src: url("fonts/Spectral-Italic.woff2") format("woff2"); }

:root {
  --orange-50: #fef5f1; --orange-100: #ffebe1; --orange-500: #ff785a; --orange-700: #7d0037;
  --purple-100: #f7f6ff; --purple-200: #e4e2ff; --purple-500: #9b87ff; --purple-700: #412b72;
  --green-100: #f1f9f4; --green-200: #e4f4e9; --green-500: #28a88e; --green-700: #00554b;
  --svart: #1d1d1b; --vit: #fff; --gra: #5c5c5a; --brand-700: #7d0037; --gul: #ffd200;

  --tema-100: var(--purple-100); --tema-200: var(--purple-200);
  --tema-300: var(--purple-500); --tema-400: var(--purple-700);
  --tema-text: var(--orange-50);

  --sans: "DM Sans", system-ui, sans-serif;
  --serif: "Spectral", Georgia, serif;

  /* Originalets clamp-skala, utvärderad vid 1080 px bredd. Värdena för 1920 px ligger i media-frågan nedan. */
  --font-100: 1.08rem;
  --font-300: 1.41rem;
  --font-600: 3.94rem;
  --font-quote: 1.68rem;
  --space-50: 0.45rem;
  --space-100: 0.91rem;
  --space-150: 1.36rem;
  --space-300: 2.72rem;
  --space-600: 5.44rem;
  --font-rubrik: var(--font-600);
}
@media (min-width: 1600px) {
  :root {
    --font-100: 1.125rem; --font-300: 1.5rem; --font-600: 4.5rem; --font-quote: 1.75rem;
    --space-50: 0.5rem; --space-100: 1rem; --space-150: 1.5rem; --space-300: 3rem; --space-600: 6rem;
  }
}
/* Rotstorleken följer zonen under 1080x900: 1.48vw är 16 px vid 1080 bredd, 1.78vh är 16 px vid 900 höjd.
   Chromium 53 saknar min(), så aspektförhållandet avgör vilken som är minst: över 6/5 binder höjden. */
@media (max-width: 1079px) {
  html { font-size: 1.48vw; }
}
@media (max-height: 899px) and (min-aspect-ratio: 6/5) {
  html { font-size: 1.78vh; }
}
[data-tema="se-1-a"] { --tema-100: var(--orange-50); --tema-200: var(--orange-100); --tema-300: var(--orange-500); --tema-400: var(--orange-700); }
[data-tema="se-3"] { --tema-100: var(--green-100); --tema-200: var(--green-200); --tema-300: var(--green-500); --tema-400: var(--green-700); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); font-size: var(--font-100); color: var(--svart); background: var(--vit); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol { margin: 0; }
img { display: block; max-width: 100%; }

/* Startsida */
.start { max-width: 60ch; margin: 0 auto; padding: var(--space-300) 16px; line-height: 1.5; }
.start h1 { font-family: var(--serif); font-weight: 600; margin-bottom: var(--space-150); }
.start li { margin-bottom: var(--space-100); }
.start a { color: var(--purple-700); }
.start code { background: var(--purple-100); padding: 0 .3em; }

/* Helskärmsram: 42/58 liggande, som originalet. Flexbox i stället för grid. */
.skarm { overflow: hidden; }
.helskarm { display: flex; width: 100vw; height: 100vh; }
.panel { width: 42%; flex: 0 0 42%; }
.karta, .tanke { width: 58%; flex: 1 1 58%; }

.panel { display: flex; flex-direction: column; padding: var(--space-300); min-height: 0; min-width: 0; }
.panel--morkt { background: var(--tema-400); color: var(--tema-text); }
.panel--ljust { background: var(--vit); color: var(--svart); }
.panel__huvud { display: flex; flex-direction: column; }
.panel__innehall { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin-top: var(--space-600); }
.panel__innehall > * + * { margin-top: var(--space-300); }

.logga { height: calc(var(--font-100) * 2.667); width: auto; align-self: flex-start; margin-bottom: var(--space-300); }
.logga--mork { height: calc(var(--font-100) * 2.175); }
.rubrik { font-size: var(--font-rubrik); font-weight: 500; line-height: 1.05; display: flex; flex-direction: column; white-space: nowrap; }
.rubrik__kursiv { font-family: var(--serif); font-style: italic; font-weight: 400; }
.underrubrik { font-size: var(--font-300); margin-top: var(--space-150); }
.underrubrik:empty { display: none; }

/* Statistik */
.statistik { display: flex; flex-direction: column; }
.statistik__rad + .statistik__rad { margin-top: var(--space-300); }
.statistik__tal { font-size: var(--font-600); font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.statistik__etikett { font-size: var(--font-300); font-weight: 500; line-height: 1.25; }
.statistik__fel { font-size: var(--font-300); margin-top: var(--space-300); }
.statistik__fel[hidden] { display: none; }

/* Dela-ruta med QR */
.dela { display: flex; align-items: center; }
.panel__innehall > .dela { margin-top: auto; }
.dela > div { margin-left: var(--space-150); }
.panel--morkt .dela { background: rgba(0,0,0,.24); padding-right: var(--space-150); }
.panel--morkt .dela__qr { width: 10em; height: 10em; padding: var(--space-100); background: var(--vit); }
.dela--ljust { background: var(--orange-50); padding: var(--space-150); }
.dela--ljust .dela__qr { width: 7em; height: 7em; }
.dela__rubrik { font-size: var(--font-300); font-weight: 500; line-height: 1.25; }
.dela__url { font-size: var(--font-300); }

/* Karta: svart bakgrund, ljusen som små gula punkter. */
.karta { position: relative; min-height: 0; min-width: 0; background: #000; }
.karta__yta { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.karta .leaflet-container { background: #000; font-family: var(--sans); }
/* Utan CARTO-nyckel: OSM:s ljusa karta görs mörk och lila-tonad. */
.karta__tiles { -webkit-filter: invert(1) hue-rotate(190deg) saturate(.35) brightness(.55) contrast(1.1); filter: invert(1) hue-rotate(190deg) saturate(.35) brightness(.55) contrast(1.1); }

/* Puls vid nytt ljus och glöd på senaste ljuset. Bara transform och opacity, så kompositorn sköter dem. */
.puls, .glod { width: 100%; height: 100%; border-radius: 50%; will-change: transform, opacity; }
.puls { border: 3px solid var(--gul); animation: puls 1.6s ease-out 3; opacity: 0; }
@keyframes puls { 0% { transform: scale(.06); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.glod { background: radial-gradient(circle, var(--gul) 0%, rgba(255,210,0,.55) 35%, rgba(255,210,0,0) 70%); animation: glod 2.4s ease-in-out infinite; }
@keyframes glod { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }

.senaste { position: absolute; left: var(--space-300); top: var(--space-300); right: var(--space-300); z-index: 1000; display: flex; align-items: center; color: var(--vit); pointer-events: none; transition: opacity .6s ease; }
.senaste[hidden] { display: none; }
.senaste.ar-dold { opacity: 0; }
.senaste > div { min-width: 0; margin-left: var(--space-150); }
.senaste__ikon { flex: none; width: calc(var(--font-100) * 4.5); height: calc(var(--font-100) * 4.5); }
.senaste__rubrik { font-size: var(--font-300); font-weight: 500; line-height: 1.25; word-break: break-word; overflow-wrap: anywhere; }
.senaste__meta { margin-top: var(--space-50); font-size: var(--font-100); line-height: 1.25; }
.senaste__meta span:not(:empty):before { content: " · "; }

/* Karusell (helskärm) */
.kommande { list-style: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.kommande__post + .kommande__post { margin-top: var(--space-300); }
.kommande__post { border-left: 4px solid var(--brand-700); padding-left: var(--space-150); animation: upp .8s ease-out; }
.kommande__text { font-size: var(--font-300); font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kommande__meta { font-size: var(--font-100); line-height: 1.25; }
@keyframes upp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.tanke { position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--space-300); background: var(--tema-400); color: var(--tema-text); min-height: 0; }
.tanke__behallare { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; transition: opacity .8s ease; }
.tanke__behallare.ar-dold { opacity: 0; }
.tanke__text { font-size: var(--font-quote); font-weight: 500; line-height: 1.3; margin: auto 0; white-space: pre-line; word-break: break-word; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 20; -webkit-box-orient: vertical; overflow: hidden; }
.tanke__text--lang { font-size: var(--font-300); font-weight: 400; }
.tanke__meta { margin-top: auto; font-size: var(--font-300); max-width: calc(100% - 12em); }
.tanke__fel { position: absolute; left: var(--space-300); bottom: var(--space-300); font-size: var(--font-300); }
.tanke__fel[hidden] { display: none; }

.nedrakning { position: absolute; right: var(--space-300); bottom: var(--space-300); width: 10em; height: 10em; display: flex; align-items: center; justify-content: center; }
.nedrakning__cirkel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.nedrakning__cirkel circle { fill: none; stroke-width: 3px; }
.nedrakning__spar { stroke: rgba(255,255,255,.2); }
.nedrakning__ring { stroke: var(--purple-200); stroke-dasharray: 100; stroke-dashoffset: 0; }
.nedrakning__ring.kor { animation: nedrakning var(--visningstid, 27s) linear forwards; }
@keyframes nedrakning { to { stroke-dashoffset: 100; } }
.nedrakning__ikon { width: calc(100% - 34px); height: calc(100% - 34px); }

@media (prefers-reduced-motion: reduce) {
  .kommande__post, .nedrakning__ring.kor, .puls { animation: none; }
  .glod { animation: none; transform: scale(.7); opacity: .8; }
  .tanke__behallare, .senaste { transition: none; }
}

/* Smalare liggande zoner (under 1600 px): rubriken något mindre, siffrorna rörs inte. */
@media (max-width: 1599px) and (orientation: landscape) {
  :root { --font-rubrik: 3.5rem; }
}
/* Allt utom fullstora skärmar: mindre QR och text i dela-rutan så adressen ryms på en rad. */
@media (max-width: 1599px), (max-height: 899px) {
  .dela__rubrik, .dela__url { font-size: var(--font-100); white-space: nowrap; }
  .panel--morkt .dela__qr { width: 7em; height: 7em; }
  .dela--ljust .dela__qr { width: 6em; height: 6em; }
}

/* Stående skärm: panelen som en liggande banner överst, kartan eller tanken under. */
@media (orientation: portrait) {
  .helskarm { flex-direction: column; }
  .panel { width: 100%; flex: 0 0 auto; flex-direction: row; align-items: flex-start; }
  .karta, .tanke { width: 100%; flex: 1 1 auto; }
  .panel__huvud { flex: 0 0 auto; }
  .panel__innehall { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: flex-start; margin-top: 0; margin-left: var(--space-150); }
  .panel__innehall > * + * { margin-top: 0; margin-left: var(--space-150); }
  .statistik { flex-direction: row; }
  .statistik__rad { min-width: 7em; }
  .statistik__rad + .statistik__rad { margin-top: 0; margin-left: var(--space-150); }
  .panel__innehall > .dela { flex: 0 0 auto; margin-top: 0; margin-left: auto; }
  .kommande { flex: 1 1 auto; min-width: 0; }
  .kommande__text { -webkit-line-clamp: 3; }
  .kommande__post { display: none; }
  .kommande__post:first-child { display: block; }
}