/* TV-vyn. Ritas i 1920x1080 CSS-pixlar och renderas i 2x till 3840x2160.
   Panelen är matt och dimmas av ljussensorn, så: hög kontrast, tjocka linjer,
   ingen nedtonad text. Det som ska synas måste synas på fyra meters håll. */

@font-face { font-family: "Barlow Condensed"; font-weight: 500; src: url(../../../typsnitt/bc-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; src: url(../../../typsnitt/bc-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; src: url(../../../typsnitt/bc-800.woff2) format("woff2"); }

:root {
  --papper: #f4ecdb;
  --kort: #fffaf0;
  --black: #13233f;
  --dampad: #5d6475;
  --svag: #d9cfbb;
  --nu: #e0452f;
  --markera: #fff1c9;
  --plan: #efe4cc;
  --p: var(--black);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { width: 1920px; height: 1080px; overflow: hidden; }
body {
  background: var(--papper);
  color: var(--black);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.ram { width: 1920px; height: 1080px; display: flex; flex-direction: column; }
.randar {
  height: 13px; flex: none;
  background: linear-gradient(to right,
    #5b86c9 0 20%, #b27bc4 20% 40%, #e8674f 40% 60%, #f2b134 60% 80%, #3fa39b 80%);
  border-bottom: 3px solid var(--black);
}
.innehall {
  flex-grow: 1; min-height: 0;
  padding: 20px 44px 18px;
  display: flex; flex-direction: column; gap: 15px;
}

/* ---------- topp ---------- */

.topp { flex: none; display: flex; align-items: flex-end; justify-content: space-between; }
.datum { display: flex; align-items: baseline; gap: 16px; }
.datum .dag { font-size: 52px; font-weight: 800; line-height: .88; text-transform: uppercase; }
.datum .prefix { font-size: 52px; font-weight: 800; line-height: .88;
  text-transform: uppercase; color: var(--nu); }
.datum .ddatum { font-size: 33px; font-weight: 700; color: var(--dampad); }
.datum .markering {
  padding: 2px 10px 0; background: var(--nu); color: #fff; border-radius: 5px;
  font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-5deg);
}

.vader { display: flex; align-items: center; gap: 14px; }
.vader .grader { font-size: 36px; font-weight: 800; line-height: 1; }
.vader .grader span { color: var(--dampad); }
.vader .klader { font-size: 24px; font-weight: 800; }
.vader .symbol { font-size: 22px; font-weight: 700; color: var(--dampad);
  text-transform: uppercase; letter-spacing: .05em; }
.vader svg { width: 38px; height: 38px; fill: none; stroke: var(--black);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- personer ---------- */

.personer { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; }

.person { flex: 1; display: flex; align-items: center; gap: 18px; min-height: 84px; }
.person + .person { border-top: 3px solid var(--svag); }

.namn { width: 214px; flex: none; display: flex; align-items: center; gap: 13px; }
.bricka {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--p); border: 3px solid var(--black); border-radius: 50%;
  font-size: 23px; font-weight: 800;
}
/* En figur behöver mer yta än en bokstav för att synas på fyra meter. */
.bricka.figur { width: 84px; height: 84px; }
.bricka.figur img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.festdag .namn { width: 250px; }
.namn b { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: .03em;
  text-transform: uppercase; display: block; }
.namn small { font-size: 17px; font-weight: 700; color: var(--dampad); }
.namn small.post { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.namn small.post svg { width: 17px; height: 17px; flex: none; fill: none;
  stroke: var(--dampad); stroke-width: 2; stroke-linejoin: round; }

.kort { flex-grow: 1; display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }

.aktivitet {
  display: flex; align-items: center; gap: 13px;
  padding: 8px 16px;
  background: var(--kort); border: 3px solid var(--black); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--p);
}
.aktivitet.obesvarad { border-style: dashed; box-shadow: none; }
.aktivitet.krock { border-color: var(--nu); }
.aktivitet .tid { font-size: 30px; font-weight: 800; line-height: 1; }
.aktivitet .tid em { display: block; font-style: normal; font-size: 14px;
  font-weight: 700; color: var(--dampad); }
.aktivitet .vad { font-size: 20px; font-weight: 800; line-height: 1.1; }
.aktivitet .var { font-size: 17px; font-weight: 700; color: var(--dampad); margin-top: 2px; }
.aktivitet svg { width: 27px; height: 27px; flex: none; fill: none;
  stroke: var(--black); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Dagens fråga. En egen kolumn längst till höger, så att den aldrig blandas
   ihop med dagens aktiviteter och inte bryter deras rader. Ingen skugga —
   den är inget man ska passa. */
.kort { min-width: 0; }
.fraga {
  flex: 0 1 auto; max-width: 520px;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 18px 9px 10px;
  background: color-mix(in srgb, var(--p) 16%, var(--kort));
  border: 3px solid var(--black); border-radius: 14px;
}
.fraga .fragetecken {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--p); border: 3px solid var(--black); border-radius: 50%;
  font-size: 30px; font-weight: 800; line-height: 1;
}
.fraga small { display: block; font-size: 14px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dampad); }
.fraga .text { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; }
.fraga .svar { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.15; }
.fraga .svar em { font-style: normal; font-size: 14px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dampad); margin-right: 4px; }
.fraga.bild { padding: 6px 22px 6px 8px; }
.fraga.bild img { width: 64px; height: 64px; display: block; }
.fraga.bild b { font-size: 30px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.glest .fraga .text { font-size: 26px; }
.glest .fraga .svar { font-size: 24px; }
.glest .fraga.bild img { width: 84px; height: 84px; }

.glest .aktivitet { padding: 14px 24px; gap: 18px; border-radius: 16px; box-shadow: 7px 7px 0 var(--p); }
.glest .aktivitet .tid { font-size: 44px; }
.glest .aktivitet .tid em { font-size: 18px; }
.glest .aktivitet .vad { font-size: 30px; }
.glest .aktivitet .var { font-size: 23px; }
.glest .aktivitet svg { width: 36px; height: 36px; }
.glest .kort { gap: 18px; }
.glest .namn { width: 260px; }
.glest .namn b { font-size: 36px; }
.glest .namn small { font-size: 21px; }
.glest .bricka:not(.figur) { width: 58px; height: 58px; font-size: 30px; }
.glest .marke { font-size: 20px; }

.marke {
  padding: 3px 10px 1px; background: var(--markera);
  border: 2px dashed var(--black); border-radius: 7px;
  font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.marke.rod { background: #fde3e1; border-style: solid; border-color: var(--nu); color: var(--nu); }

.laxa {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px; background: var(--markera);
  border: 3px solid var(--black); border-radius: 12px;
  font-size: 19px; font-weight: 800;
}
.laxa.snart { border-color: var(--nu); color: var(--nu); }
.laxa svg { width: 22px; height: 22px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

.skolrad { font-size: 19px; font-weight: 700; color: var(--dampad); }
.tomt { font-size: 21px; font-weight: 700; color: var(--dampad); font-style: italic; }

/* ---------- imorgon ---------- */

.imorgon {
  flex: none; display: flex; align-items: center; gap: 22px;
  padding: 11px 20px 12px;
  background: var(--plan); border: 3px solid var(--black); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--black);
}
.imorgon .etikett { width: 196px; flex: none; }
.imorgon .etikett span { font-size: 24px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; display: block; line-height: 1; }
.imorgon .etikett em { font-style: normal; font-size: 21px; font-weight: 700;
  color: var(--dampad); }
.imorgon .celler { flex-grow: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.cell {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px; background: var(--kort);
  border: 2.5px solid var(--black); border-radius: 10px;
}
.cell .mini {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: var(--p); border: 2.5px solid var(--black); border-radius: 50%;
  font-size: 15px; font-weight: 800;
}
.cell .t { font-size: 22px; font-weight: 800; }
.cell .txt { font-size: 18px; font-weight: 700; }
.cell .grå { font-size: 17px; font-weight: 700; color: var(--dampad); }

/* ---------- veckan ---------- */

.vecka { flex: none; height: 232px; display: flex; flex-direction: column; gap: 8px; }
.veckorubrik { flex: none; display: flex; align-items: center; gap: 11px; }
.veckorubrik span { font-size: 21px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1; }
.veckorubrik i { flex-grow: 1; height: 3px; background: var(--black); }

.veckodagar {
  flex-grow: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;
}
.vdag {
  padding: 7px 10px; background: var(--kort);
  border: 2.5px solid var(--black); border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.vdag.idag { background: var(--markera); border: 3px solid var(--nu); }
.vdag.helg .vnamn { color: var(--dampad); }
.vnamn { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.vdag.idag .vnamn { color: var(--nu); }
.vrad { display: flex; align-items: center; gap: 7px; font-size: 19px; line-height: 1.25; }
.vrad .prick { width: 13px; height: 13px; flex: none; border: 2px solid var(--black); border-radius: 50%; }
.vrad .prick.streckad { border-style: dashed; background: transparent !important; }
.vrad b { font-weight: 700; }
.vrad { white-space: nowrap; }
.vrad .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vdag.nyvecka { border-left-width: 6px; }
.vnr { float: right; font-size: 15px; color: var(--dampad); letter-spacing: .04em; margin-top: 3px; }
.vrad .kod { color: var(--dampad); }

/* ---------- fot ---------- */

.fot { flex: none; display: flex; align-items: center; justify-content: space-between;
  padding-top: 11px; border-top: 3px solid var(--black); }
.trafik { display: flex; align-items: center; gap: 22px; }
.trafik .plats { font-size: 18px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--dampad); }
.trafik .resa { display: flex; align-items: center; gap: 9px; }
.trafik .avg { font-size: 24px; font-weight: 800; }
.trafik .mal { font-size: 20px; font-weight: 700; }
.trafik .linje { font-size: 16px; font-weight: 700; color: var(--dampad); }
.trafik svg { width: 18px; height: 18px; fill: none; stroke: var(--dampad);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.status { display: flex; align-items: center; gap: 14px; }
.status .stampel { font-size: 17px; font-weight: 700; color: var(--dampad); }
.status .stampel.gammal {
  padding: 3px 11px 1px; background: var(--markera);
  border: 2px dashed var(--black); border-radius: 8px; color: var(--black);
}

/* ---------- tapet ----------
   Vardagsrummets TV hänger på en mönstrad tapet, och med samma mönster som
   bakgrund ser schemat ut att sitta direkt på väggen. Allt som annars står
   på papperet får en egen lapp, så att texten aldrig ligger på mönstret —
   det ska gå att läsa på fyra meter även i skymning. Samma lappar används
   på festdagar, så att konfettin aldrig hamnar under fritt stående text. */

.tapet { background: #aaa7a2 url(tapet.jpg) 0 0 / 800px 800px repeat; }
.tapet .randar { display: none; }
.tapet .innehall { padding-top: 26px; }

:is(.tapet, .fest) .datum, :is(.tapet, .fest) .vader, :is(.tapet, .fest) .namn, :is(.tapet, .fest) .veckorubrik span, :is(.tapet, .fest) .status {
  background: var(--kort); border: 3px solid var(--black); border-radius: 12px;
  box-shadow: 5px 5px 0 rgba(19, 35, 63, .55);
}
:is(.tapet, .fest) .datum { padding: 12px 20px 8px; }
:is(.tapet, .fest) .vader { padding: 9px 18px; }
:is(.tapet, .fest) .namn { padding: 10px 16px 10px 10px; width: auto; min-width: 214px; }
:is(.tapet, .fest) .person + .person { border-top: none; }
:is(.tapet, .fest) .veckorubrik span { padding: 6px 14px 4px; }
:is(.tapet, .fest) .veckorubrik i { display: none; }
:is(.tapet, .fest) .fot { border-top: none; padding-top: 0; justify-content: flex-end; }
:is(.tapet, .fest) .status { padding: 4px 12px 2px; }
:is(.tapet, .fest) .tomt { padding: 6px 12px; background: var(--kort); border-radius: 8px; }

/* ---------- fest ----------
   Födelsedagar, högtider och julkalendern, se fest.js. Konfettin ligger i
   ett eget lager bakom innehållet, så korten täcker den och texten går att
   läsa som vanligt. */

.ram { position: relative; }
.konfetti { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.konfetti svg { position: absolute; }
.randar, .vimplar { position: relative; z-index: 1; }
.innehall { position: relative; z-index: 2; }
.fest .randar { display: none; }
/* Girlangen hänger en bit ner bakom innehållets överkant, som på en vägg.
   Bakom, inte framför: figuren i banderollen sticker upp och ska synas. */
.vimplar { flex: none; height: 66px; margin-bottom: -30px; pointer-events: none; }

.festbanner {
  display: flex; align-items: center; gap: 16px; padding: 8px 28px 8px 12px;
  background: var(--fest); color: var(--festtext);
  border: 3px solid var(--black); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--black); transform: rotate(-1.5deg);
}
.festbanner b { display: block; font-size: 46px; font-weight: 800; line-height: .95;
  text-transform: uppercase; letter-spacing: .02em; }
.festbanner em { display: block; font-style: normal; font-size: 21px; font-weight: 700; margin-top: 3px; }
.festfigur { position: relative; width: 78px; height: 78px; flex: none; }
.festfigur img { width: 78px; height: 78px; border-radius: 50%; background: #fffaf0;
  border: 3px solid var(--black); display: block; }
.festfigur svg { position: absolute; width: 34px; top: -30px; left: 30px; transform: rotate(14deg); }
.festikon svg { width: 72px; height: 72px; display: block; }
/* Hela teckningar står fritt, utan rund ram, och får sticka upp ur banderollen. */
.festfigur.hel { width: auto; height: 84px; margin-left: -6px; }
.festfigur.hel img { width: auto; height: 150px; margin-top: -58px; border: none;
  border-radius: 0; background: none; filter: drop-shadow(3px 3px 0 rgba(19, 35, 63, .45)); }

.bricka { position: relative; }
.hatt { position: absolute; width: 28px; top: -30px; left: 50%; transform: translateX(-25%) rotate(14deg); }
.bricka.figur .hatt { width: 38px; top: -38px; }
.hatt svg { display: block; width: 100%; }
.aktivitet.fyller { background: var(--markera); }

/* Julkalendern: 24 luckor, de som gått kryssade, dagens lyser. */
.julkalender {
  display: flex; align-items: center; gap: 16px; padding: 8px 16px 8px 14px;
  background: var(--kort); border: 3px solid var(--black); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--black);
}
.jk-kvar { display: flex; align-items: center; gap: 9px; }
.jk-kvar b { font-size: 56px; font-weight: 800; line-height: .85; color: #c8102e; }
.jk-kvar span { font-size: 21px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.jk-kvar em { display: block; font-style: normal; font-size: 17px; font-weight: 700;
  color: var(--dampad); text-transform: none; margin-top: 2px; }
.jk-advent { display: flex; align-items: center; gap: 10px; }
.jk-advent svg { width: 60px; height: 60px; flex: none; }
.jk-advent b { display: block; font-size: 25px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.jk-advent em { display: block; font-style: normal; font-size: 18px; font-weight: 700; color: var(--dampad); }
.luckor { display: grid; grid-template-columns: repeat(12, 44px); gap: 6px; }
.lucka {
  position: relative; height: 38px; display: grid; place-items: center;
  font-size: 23px; font-weight: 800; color: #fffaf0;
  background: #1f6b3a; border: 2px solid var(--black); border-radius: 5px;
}
.lucka:nth-child(odd) { background: #c8102e; }
.lucka.kryss { background: #e6dccb; color: #9a927f; }
.lucka.kryss::after {
  content: ""; position: absolute; inset: 2px;
  background: linear-gradient(45deg, transparent 43%, #c8102e 43% 57%, transparent 57%),
              linear-gradient(-45deg, transparent 43%, #c8102e 43% 57%, transparent 57%);
}
.lucka.idag { background: #f7d038; color: var(--black); transform: scale(1.25); z-index: 1;
  box-shadow: 0 0 0 3px #c8102e; }
.lucka.julafton { background: var(--black); }
.lucka svg { width: 28px; height: 28px; }