/* ==========================================================================
   KALENDEREN, skjermen (30. september 2026, docs/helhet/spes-kalender.md)

   Eget ark som oppgaver.css, fordi lodd.css deles til to andre repoer og
   kalenderen er skallets egen. Alt står under #skjerm-kalender, så ingen
   ny toppnivåklasse kommer inn i Lodd. Ingen ny farge: personfargene er
   farge-0 til farge-5, lagene skilles med form, og segmentene er de samme
   som resten av skallet bruker.
   ========================================================================== */

/* Tallet ved Kalender i menyen er grått som ved Oppgaver: en hendelse i dag
   er normalt, ikke noe som venter på inngripen. */
.sidemeny #kalender-tall { color: var(--ink-2); }

/* --- hodet ---------------------------------------------------------------- */

#skjerm-kalender .kal-hode {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0 0 var(--s-5);
}
/* Nøkkelen står ved tittelen som en grå pille, ikke i en marg med strek. */
#skjerm-kalender .kal-nokkel {
  padding: 0 var(--s-3);
  border-radius: 999px;
  background: var(--flate-3);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  color: var(--ink-3);
}
/* Overskriften står øverst som på alle skjermer (nettleserprøven Ø11), og
   handlingene henger fra toppen ved siden av den. */
#skjerm-kalender > .seksjon { align-items: flex-start; }
#skjerm-kalender .kal-styring {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
#skjerm-kalender .kal-idag {
  min-height: 44px;
  padding: 0 var(--s-4);
  font: inherit;
  font-size: var(--t-3);
  cursor: pointer;
}
/* Fylt som .dagbrikke.er-idag: flate-3 med blekkant. En flate i blekk ville
   vært den eneste mørke flaten i lyst tema. */
/* Versjon 2: i dag er merkets svake fyll, som det valgte i menyen. */
#skjerm-kalender .kal-idag.er-idag { background: var(--brand-svak); border-color: transparent; color: var(--ink); font-weight: 600; }
#skjerm-kalender .ikonknapp:disabled { opacity: .4; cursor: default; }
#skjerm-kalender .kal-styring .ikonknapp { width: 44px; height: 44px; }
#skjerm-kalender .kal-tittel {
  margin: 0 0 0 var(--s-3);
  font-size: var(--t-5);
  line-height: var(--t-5-h);
  font-weight: 500;
}
#skjerm-kalender .kal-verktoy {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
}
#skjerm-kalender .kal-lagknapp,
#skjerm-kalender #kal-ny { min-height: 44px; }

/* Segmentraden, som Liste og Tavle i Oppgaver: én fylt flate uten kant, og
   det valgte er et hvitt felt i den. Aldri ramme i ramme. */
#skjerm-kalender .kal-seg {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 0;
  border-radius: var(--r-2);
  background: var(--flate-3);
}
#skjerm-kalender .kal-seg button {
  font: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--tid-1);
}
#skjerm-kalender .kal-seg button[aria-pressed="true"] { background: var(--flate); color: var(--ink); }
@media (hover: hover) {
  #skjerm-kalender .kal-seg button:hover { color: var(--ink); }
}

#skjerm-kalender .kal-feil { margin: 0 0 var(--s-3) calc(var(--marg) + var(--s-4)); }
#skjerm-kalender .kal-opplest {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- rutenettet: margen på loddlinja og kolonnene til høyre --------------- */

#skjerm-kalender .kal-rad { display: grid; }
#skjerm-kalender .kal-kol-1 .kal-rad { grid-template-columns: var(--marg) minmax(0, 1fr); }
#skjerm-kalender .kal-kol-3 .kal-rad { grid-template-columns: var(--marg) repeat(3, minmax(0, 1fr)); }
#skjerm-kalender .kal-kol-7 .kal-rad,
#skjerm-kalender .kal-maaned .kal-rad { grid-template-columns: var(--marg) repeat(7, minmax(0, 1fr)); }
#skjerm-kalender .kal-marg {
  position: relative;
  padding: var(--s-2) var(--s-4) 0 0;
  border-right: 1px solid var(--line-2);
  text-align: right;
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  color: var(--ink-3);
}

/* Dagshodene. Dagen i dag er fylt, som .dagbrikke.er-idag i Oppgaver. */
#skjerm-kalender .kal-dagshode {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  margin: 0 var(--s-1) var(--s-2);
  padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--tid-1);
}
#skjerm-kalender .kal-dagshode.er-helg .kal-ukedag { color: var(--ink-3); }
/* Blekket og ikke merkets tekstfarge på det svake fyllet: i mørkt tema ga
   --brand-tekst på --brand-svak bare 3.76 i kontrast. */
#skjerm-kalender .kal-dagshode.er-idag { background: var(--brand-svak); border-color: transparent; color: var(--ink); }
#skjerm-kalender .kal-dagshode.er-idag .kal-ukedag { color: var(--ink); font-weight: 600; }
@media (hover: hover) {
  #skjerm-kalender .kal-dagshode:hover { border-color: var(--line-2); }
}
#skjerm-kalender .kal-ukedag { font-size: var(--t-2); font-weight: 500; }
#skjerm-kalender .kal-dagtall { font-size: var(--t-5); font-weight: 500; }

/* Båndet over timene: hele dager og lagene. */
#skjerm-kalender .kal-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#skjerm-kalender .kal-bandcelle {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  min-height: var(--s-7);
  padding: var(--s-1);
  border-left: 1px solid var(--line);
}

/* Timene. Hver time er --s-8 høy, fra 06 til 22. */
#skjerm-kalender .kal-akse { padding-top: 0; }
#skjerm-kalender .kal-time {
  display: block;
  height: var(--s-8);
  margin-top: calc(var(--t-1-h) / -2);
  margin-bottom: calc(var(--t-1-h) / 2);
}
#skjerm-kalender .kal-time:first-child { margin-top: 0; margin-bottom: 0; }
#skjerm-kalender .kal-dag {
  position: relative;
  height: calc(var(--s-8) * 17);
  border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent var(--s-8));
}
#skjerm-kalender .kal-dag.er-idag { background-color: var(--flate-2); }

#skjerm-kalender .kal-blokk {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  overflow: hidden;
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--tid-1);
}
@media (hover: hover) {
  #skjerm-kalender .kal-blokk:hover { border-color: var(--line-3); }
}
#skjerm-kalender .kal-blokk-tittel {
  max-width: 100%;
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#skjerm-kalender .kal-blokk-under {
  max-width: 100%;
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Personsegmentet: 2px på venstre kant, to stablet når det er begge. */
/* 16 piksler per person, som segmentet på loddlinja i en .rad. */
#skjerm-kalender .kal-segmenter {
  position: absolute;
  top: var(--s-1);
  left: -1px;
  display: flex;
  flex-direction: column;
  width: 2px;
}
#skjerm-kalender .kal-segment { flex: 0 0 16px; width: 2px; height: 16px; }

/* Nå-linja: en hårstrek i blekk, med segmentet på loddlinja. */
#skjerm-kalender .kal-naa {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--ink);
  pointer-events: none;
}
#skjerm-kalender .kal-naa::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -8px;
  width: 2px;
  height: 16px;
  background: var(--ink);
}
#skjerm-kalender .kal-flere {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  z-index: 1;
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: var(--t-2);
  cursor: pointer;
}

/* --- merkene: egne, oppgaver, innkjøp og sesonger ------------------------- */

#skjerm-kalender .kal-merke {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: none;
  font: inherit;
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--tid-1);
}
@media (hover: hover) {
  #skjerm-kalender .kal-merke:hover { border-color: var(--line-2); }
}
#skjerm-kalender .kal-merke-tekst { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En hel dag er en fylt pille, med segmentet på kanten. */
#skjerm-kalender .kal-hel { padding-left: var(--s-3); border-color: var(--line-2); background: var(--flate); font-weight: 500; }
/* I pilla deler personene pillas høyde. Med 16 piksler hver stakk det
   nederste segmentet for «begge» ut under pilla i månedscella, som er 20. */
#skjerm-kalender .kal-hel .kal-segmenter { top: 0; bottom: 0; }
#skjerm-kalender .kal-hel .kal-segment { flex: 1 1 0; height: auto; }
#skjerm-kalender .kal-prikk { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
#skjerm-kalender .kal-prikk + .kal-prikk { margin-left: calc(var(--s-2) * -1); }
#skjerm-kalender .kal-klokke { color: var(--ink-3); font-size: var(--t-1); }
/* Oppgaver er en ring som haken i Oppgaver. */
#skjerm-kalender .kal-ring {
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
}
#skjerm-kalender .kal-lag-oppgave { color: var(--ink-2); }
#skjerm-kalender .kal-lag-oppgave .avatar { flex: 0 0 20px; width: 20px; height: 20px; font-size: var(--t-1); }
/* Innkjøp er en pil. Avvik og feil får strek i rødt, fargen skallet bruker
   for noe som har gått galt. */
#skjerm-kalender .kal-pil { flex: 0 0 auto; color: var(--ink-3); font-size: var(--t-2); }
#skjerm-kalender .kal-lag-innkjop { color: var(--ink-2); }
#skjerm-kalender .kal-lag-innkjop.er-varsel { border-left: 2px solid var(--rod); border-radius: 0 var(--r-1) var(--r-1) 0; }
/* Sesonger er et bånd i --flate-2 med navnet i --t-1. */
#skjerm-kalender .kal-sesong {
  display: block;
  width: 100%;
  min-height: 20px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-1);
  background: var(--flate-2);
  font: inherit;
  font-size: var(--t-1);
  line-height: 20px;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
}
#skjerm-kalender .kal-sesong-navn { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skjerm-kalender .kal-avatarer { display: inline-flex; flex: 0 0 auto; }
#skjerm-kalender .kal-avatarer .avatar + .avatar { margin-left: calc(var(--s-2) * -1); border: 1px solid var(--flate); }

/* --- måneden -------------------------------------------------------------- */

#skjerm-kalender .kal-mnd-hode .kal-marg { border-right-color: transparent; }
#skjerm-kalender .kal-mnd-dag {
  padding: 0 var(--s-2) var(--s-2);
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--ink-3);
}
#skjerm-kalender .kal-mnd-uke { border-top: 1px solid var(--line); }
#skjerm-kalender .kal-mnd-uke:last-child { border-bottom: 1px solid var(--line); }
#skjerm-kalender .kal-celle {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  min-height: 112px;
  padding: var(--s-1);
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--tid-1);
}
#skjerm-kalender .kal-celle:focus-visible { outline: 2px solid var(--brand-tekst); outline-offset: -2px; }
@media (hover: hover) {
  #skjerm-kalender .kal-celle:hover { background-color: var(--flate-2); }
}
#skjerm-kalender .kal-celle.er-utenfor { background-color: var(--flate-2); }
#skjerm-kalender .kal-celletall {
  align-self: flex-start;
  min-width: 24px;
  padding: 0 var(--s-1);
  border-radius: var(--r-1);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  text-align: center;
  color: var(--ink-2);
}
#skjerm-kalender .kal-celle.er-utenfor .kal-celletall { color: var(--ink-3); }
#skjerm-kalender .kal-celle.er-idag .kal-celletall { background: var(--brand-svak); color: var(--ink); font-weight: 600; border-radius: 999px; }
#skjerm-kalender .kal-celle .kal-merke { min-height: 20px; padding: 0 var(--s-1); gap: var(--s-1); }
#skjerm-kalender .kal-flere-lenke {
  align-self: flex-start;
  padding: 0 var(--s-1);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-1);
  color: var(--ink-2);
  cursor: pointer;
}

/* --- Kommer --------------------------------------------------------------- */

#skjerm-kalender .kal-gruppehode {
  display: flex;
  gap: 0;
  margin: var(--s-5) 0 0;
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  font-weight: 600;
}
#skjerm-kalender .kal-gruppenavn { padding-left: var(--s-4); }
#skjerm-kalender .kal-gruppehode .kal-marg { flex: 0 0 var(--marg); padding-top: 0; border-right: 0; font-weight: 400; }
#skjerm-kalender .kal-kommer-rad {
  width: 100%;
  padding: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--tid-1);
}
@media (hover: hover) {
  #skjerm-kalender .kal-kommer-rad:hover { background-color: var(--flate-2); }
}
#skjerm-kalender .kal-kommer-rad .marg .kal-segmenter { left: auto; right: -1px; top: var(--s-4); bottom: auto; height: 16px; }
#skjerm-kalender .kal-kommer-rad .marg .kal-ring { margin-top: var(--s-1); }
#skjerm-kalender .kal-ny-rad {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink-3);
  cursor: pointer;
}
#skjerm-kalender .kal-ny-rad .kal-marg { flex: 0 0 var(--marg); align-self: stretch; padding-top: var(--s-4); }
#skjerm-kalender .kal-ny-tekst { padding-left: var(--s-4); font-size: var(--t-3); }
@media (hover: hover) {
  #skjerm-kalender .kal-ny-rad:hover { color: var(--ink); }
}

/* --- lagmenyen ------------------------------------------------------------ */

#kal-meny .kal-lagrad { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
#kal-meny .kal-lagrad[disabled] { color: var(--ink-3); cursor: default; }
#kal-meny .kal-hake {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-1);
  font-size: var(--t-1);
}
#kal-meny .kal-tast { margin-left: auto; color: var(--ink-3); font-size: var(--t-1); }

/* --- ruta ----------------------------------------------------------------- */

#skjerm-kalender .kal-felt { margin: 0 0 var(--s-5); }
#skjerm-kalender .kal-felt > .etikett { display: block; margin-bottom: var(--s-2); }
#skjerm-kalender .kal-felt input[type=text],
#skjerm-kalender .kal-felt textarea,
#skjerm-kalender .kal-felt select { width: 100%; }
#skjerm-kalender .kal-felt textarea { resize: vertical; min-height: 64px; }
#skjerm-kalender .kal-felt input[type=date],
#skjerm-kalender .kal-felt input[type=time] {
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--t-3);
  color: var(--ink);
}
#skjerm-kalender .kal-tidrad { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#skjerm-kalender .kal-tidrad input[type=date] { flex: 1 1 140px; }
#skjerm-kalender .kal-tidrad input[type=time] { flex: 0 1 112px; }
#skjerm-kalender .kal-klokkefelt[hidden] { display: none; }
#skjerm-kalender .kal-hvem { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#skjerm-kalender .kal-hvemknapp {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4) 0 var(--s-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--flate);
  font: inherit;
  font-size: var(--t-3);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--tid-1);
}
#skjerm-kalender .kal-hvemknapp[aria-pressed="true"] { border-color: var(--ink); background: var(--flate-3); color: var(--ink); }
#skjerm-kalender .kal-felt-rad { display: flex; align-items: center; }
#skjerm-kalender .kal-bryter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  font-size: var(--t-3);
  cursor: pointer;
}
#skjerm-kalender .kal-bryter input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
#skjerm-kalender .kal-knapper { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
#skjerm-kalender .kal-knapper .knapp { min-height: 44px; }
#skjerm-kalender .kal-hint { margin: var(--s-3) 0 0; font-size: var(--t-2); color: var(--ink-3); }
#skjerm-kalender .kal-fakta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  align-items: center;
  margin: 0 0 var(--s-5);
}
#skjerm-kalender .kal-fakta dd { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-3); }
#skjerm-kalender .kal-setning { margin: 0 0 var(--s-5); font-size: var(--t-3); color: var(--ink-2); }
#skjerm-kalender .kal-varsel { color: var(--rod); border-color: var(--rod); }
#skjerm-kalender .kal-skjema .feilmelding { margin-top: var(--s-2); }

/* --- smal skjerm ---------------------------------------------------------- */

@media (max-width: 599px) {
  #skjerm-kalender .kal-hode { align-items: flex-start; }
  #skjerm-kalender .kal-nokkel { display: none; }
  #skjerm-kalender > .seksjon .kal-verktoy { order: 6; }
  #skjerm-kalender .kal-flate { padding: var(--s-2) var(--s-2) var(--s-2) 0; }
  #skjerm-kalender .kal-tittel { flex: 1 0 100%; order: 5; margin: 0; font-size: var(--t-4); line-height: var(--t-4-h); }
  #skjerm-kalender .kal-verktoy { flex: 1 0 100%; order: 6; flex-wrap: wrap; margin-left: 0; }
  #skjerm-kalender .kal-seg { flex: 1 0 100%; }
  #skjerm-kalender .kal-seg button { flex: 1 1 0; padding: 0 var(--s-2); }
  #skjerm-kalender .kal-celle { min-height: 64px; padding: var(--s-1) 0; }
  #skjerm-kalender .kal-celle .kal-merke { padding: 0; }
  #skjerm-kalender .kal-celle .kal-merke-tekst,
  #skjerm-kalender .kal-celle .kal-klokke,
  #skjerm-kalender .kal-celle .kal-sesong-navn { display: none; }
  #skjerm-kalender .kal-celle .kal-sesong { min-height: 4px; line-height: 4px; }
  #skjerm-kalender .kal-mnd-dag { padding: 0 0 var(--s-2); text-align: center; }
  #skjerm-kalender .kal-celletall { align-self: center; }
  #skjerm-kalender .kal-dagshode { flex-direction: column; align-items: center; gap: 0; }
}

/* --- flatene som bærer visningene ---------------------------------------- */

/* Versjon 2: visningen ligger i et hvitt .kort, som listene hos Shopify og
   bolkene på Hjem (spes-design-v2.md 4). Tidsaksen til venstre bærer
   klokkeslettene, så den blir, men som en del av kortet. */
#skjerm-kalender .kal-flate {
  position: relative;
  min-width: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
}
#skjerm-kalender .kal-flate > .seksjon-tom { border: 0; box-shadow: none; }
#skjerm-kalender .kal-kommer > .kal-gruppehode:first-child { margin-top: 0; }
#skjerm-kalender .kal-tidslinje { position: relative; }
#skjerm-kalender .kal-dagshoder { align-items: end; }
#skjerm-kalender .kal-timer { padding-top: var(--s-3); }
#skjerm-kalender .kal-kommer { margin-bottom: var(--s-4); }
#skjerm-kalender .kal-tidfest { font-weight: 400; }