/* Familjeappen
 *
 * Riktning: emaljskylt i ett svenskt kok. Varmt papper, mork blackfarg,
 * tunna linjer. Den ENDA kuloren i hela granssnittet kommer fran de fyra
 * personerna - da blir familjen motivet i stallet for granssnittet.
 *
 * Typsnitten ligger pa var egen server. Externa typsnitt hade lackt varje
 * familjemedlems IP och sidvisning till tredje part, vilket gar emot hela
 * projektets syfte.
 */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson";
  src: url("fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --papper: #faf6ef;
  --papper-djup: #f2ece1;
  --black: #241f1b;
  --dampad: #8a7f72;
  --linje: #e2d8c8;
  --varning: #a8442a;

  --radie: 14px;
  --spalt: 1.15rem;

  /* Fraunces WONK ger bokstaverna en handgjord lutning som passar ett kok */
  --display: "Fraunces", Georgia, serif;
  --brod: "Atkinson", -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papper: #17140f;
    --papper-djup: #201c16;
    --black: #ece4d6;
    --dampad: #97897a;
    --linje: #322c24;
    --varning: #e0836a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papper);
  color: var(--black);
  font: 400 17px/1.55 var(--brod);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fin kornighet sa ytan lever som papper i stallet for att vara platt skarm */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.skarm {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 1.35rem 3rem;
}

/* --- personstampel: identitetsankaret, aterkommer i hela appen --- */

.stampel {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 2px solid var(--farg);
  background: color-mix(in srgb, var(--farg) 13%, transparent);
  color: var(--farg);
  font: 600 1.25rem/1 var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  overflow: hidden;
}

.stampel img { width: 100%; height: 100%; object-fit: cover; }

.stampel.stor {
  width: 108px;
  height: 108px;
  border-radius: 26px;
  border-width: 3px;
  font-size: 2.9rem;
}

.stampel.liten { width: 34px; height: 34px; border-radius: 9px; font-size: 0.95rem; }

/* --- inloggning --- */

.rubrik-display {
  margin: 0.5rem 0 2.25rem;
  font: 600 2.5rem/1.05 var(--display);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  letter-spacing: -0.02em;
}

.profiler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.15rem;
}

.profil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 0.4rem;
  border-radius: var(--radie);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
  animation: stig 0.5s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.profil:nth-child(1) { animation-delay: 0.04s; }
.profil:nth-child(2) { animation-delay: 0.10s; }
.profil:nth-child(3) { animation-delay: 0.16s; }
.profil:nth-child(4) { animation-delay: 0.22s; }

.profil:active { transform: scale(0.94); }

.profil .stampel { width: 96px; height: 96px; border-radius: 24px; font-size: 2.6rem; }

.profilnamn {
  font: 600 1.05rem/1 var(--display);
  font-variation-settings: "SOFT" 40;
}

.enprofil {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.25rem;
  animation: stig 0.5s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.enprofil .rubrik-display { margin: 1.1rem 0 0; font-size: 1.9rem; }

/* --- formular --- */

.etikett {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dampad);
}

.falt {
  width: 100%;
  padding: 0.95rem 1.1rem;
  font: 400 1.05rem var(--brod);
  color: var(--black);
  background: var(--papper-djup);
  border: 1.5px solid var(--linje);
  border-radius: var(--radie);
  margin-bottom: 1.35rem;
  transition: border-color 0.15s;
}

.falt:focus { outline: none; border-color: var(--black); }

.falt.pin {
  text-align: center;
  letter-spacing: 0.55em;
  font-size: 1.6rem;
  padding-left: 0.6em;
}

.knapp {
  width: 100%;
  padding: 1rem;
  font: 700 1.02rem var(--brod);
  letter-spacing: 0.02em;
  color: var(--papper);
  background: var(--black);
  border: 0;
  border-radius: var(--radie);
  cursor: pointer;
  transition: transform 0.12s, opacity 0.12s;
}

.knapp:active { transform: translateY(1px); opacity: 0.9; }

.fel {
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.35rem;
  font-size: 0.95rem;
  color: var(--varning);
  background: color-mix(in srgb, var(--varning) 9%, transparent);
  border-left: 3px solid var(--varning);
  border-radius: 0 var(--radie) var(--radie) 0;
}

.tillbaka {
  display: block;
  margin-top: 2.25rem;
  font-size: 0.95rem;
  color: var(--dampad);
  text-align: center;
  text-decoration: none;
}

/* --- dagsvy --- */

.topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.logga-ut {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dampad);
  text-decoration: none;
}

.dagrubrik {
  margin: 0 0 0.15rem;
  font: 600 3.1rem/0.95 var(--display);
  font-variation-settings: "SOFT" 70, "WONK" 1;
  letter-spacing: -0.035em;
}

.datumrad {
  margin: 0 0 2rem;
  font-size: 0.95rem;
  color: var(--dampad);
}

/* Foljs datumraden av tillbaka-pillen bar den bottenmarginalen i stallet,
   annars star de tva langt ifran varandra och pillen ser ut att hora till
   nasta avsnitt. */
.datumrad:has(+ .tillbakaidag) { margin-bottom: 0.75rem; }

.atgard {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--varning);
  background: color-mix(in srgb, var(--varning) 8%, transparent);
  border-left: 3px solid var(--varning);
  border-radius: 0 var(--radie) var(--radie) 0;
  animation: stig 0.45s both;
}

.atgard::before { content: "!"; font-weight: 700; }

/* Tidslinjen 06-20. Att SE att Ebbas dag ar kortare an Ludvigs sitter
   snabbare an att lasa sig till det. */

.post {
  display: flex;
  gap: var(--spalt);
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linje);
  animation: stig 0.45s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.post:nth-of-type(1) { animation-delay: 0.03s; }
.post:nth-of-type(2) { animation-delay: 0.07s; }
.post:nth-of-type(3) { animation-delay: 0.11s; }
.post:nth-of-type(4) { animation-delay: 0.15s; }
.post:nth-of-type(n + 5) { animation-delay: 0.19s; }

.post:last-of-type { border-bottom: 0; }

.postkropp { flex: 1 1 auto; min-width: 0; }

.postrad {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}

.vem {
  font: 600 1.12rem/1.2 var(--display);
  font-variation-settings: "SOFT" 40;
}

.vad { color: var(--dampad); font-size: 0.95rem; }

.tid {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--dampad);
}

.linje {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: var(--papper-djup);
}

.stapel {
  position: absolute;
  top: 0;
  height: 7px;
  border-radius: 4px;
  background: var(--farg);
  transform-origin: left center;
  animation: vaxa 0.6s 0.2s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.markor {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 13px;
  background: var(--varning);
  border-radius: 1px;
}

.prick {
  position: absolute;
  top: -1px;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--farg);
  border: 2px solid var(--papper);
}

.plats, .avvikelse {
  margin-top: 0.45rem;
  font-size: 0.87rem;
  color: var(--dampad);
}

.avvikelse { color: var(--varning); }

.post.installd .vem,
.post.installd .tid { text-decoration: line-through; opacity: 0.55; }

.post.installd .stapel { opacity: 0.3; }

.lugnt {
  padding: 3rem 1rem;
  color: var(--dampad);
  text-align: center;
  font: 400 1.05rem/1.5 var(--display);
}

.dagnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--linje);
}

.dagnav a {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dampad);
  text-decoration: none;
}

.dagnav a:active { color: var(--black); }

@keyframes stig {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@keyframes vaxa {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- staende dagsrutnat: en spalt per person --- */

/* Rutnatet bryter ut ur skarmens sidmarginal. Varje pixel gar till
   spalterna, sa "Fotboll" ryms i ett block i stallet for att kapas.
   Kvar blir 0.4rem till skarmkanten - tillrackligt for att inte se
   avklippt, tillrackligt lite for att ordet ska fa plats. */
.rutnat {
  display: flex;
  gap: 0.45rem;
  margin: 0 -0.95rem 1.75rem;
  animation: stig 0.5s 0.05s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.klockan {
  position: relative;
  flex: 0 0 1.75rem;
  height: 460px;
  margin-top: 1.6rem;
}

.timme {
  position: absolute;
  right: 0;
  transform: translateY(-0.5em);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--dampad);
}

.spalter {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(var(--kolumner), 1fr);
  gap: 0.45rem;
}

.hjalplinje {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: 1.6rem;
  background: var(--linje);
  z-index: 0;
}

.spalt { position: relative; z-index: 1; min-width: 0; }

.spaltnamn {
  display: block;
  height: 1.6rem;
  font: 600 0.9rem/1.6rem var(--display);
  font-variation-settings: "SOFT" 40;
  color: var(--farg);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spaltyta {
  position: relative;
  height: 460px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--papper-djup) 60%, transparent);
}

.block {
  position: absolute;
  left: 2px;
  right: 2px;
  padding: 3px 5px;
  border-radius: 7px;
  overflow: hidden;
  animation: fram 0.5s 0.25s both;
}

.block.skola {
  background: color-mix(in srgb, var(--farg) 16%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--farg) 55%, transparent);
}

/* Skolblocket ar en lank in i hela lektionslistan */
a.block.skola {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a.block.skola:active { background: color-mix(in srgb, var(--farg) 28%, transparent); }

/* Pilen sitter i nederkant sa den inte trangs med tid och titel. Diskret,
   men tillrackligt for att blocket ska lasa sig som tryckbart. */
.blockpil {
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-size: 0.9rem;
  line-height: 1;
  color: color-mix(in srgb, var(--farg) 75%, transparent);
}

/* Aktiviteter ligger OVANPA skolan. Skolan slutar innan de borjar, sa de
   far ta hela spaltens bredd - krockar delar den mellan sig i stallet. */
.block.aktivitet {
  background: var(--farg);
  color: var(--papper);
  border-radius: 7px;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--black) 22%, transparent);
}

.block.installd { opacity: 0.4; }
.block.installd .blocktitel { text-decoration: line-through; }

.blocktitel {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blocktid {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.block.skola .blocktitel,
.block.skola .blocktid { color: var(--black); }

/* --- notiser och avdelningar --- */

.notis {
  padding: 0.7rem 0.95rem;
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--farg) 9%, transparent);
  border-left: 3px solid var(--farg);
  border-radius: 0 var(--radie) var(--radie) 0;
}

.avdelning {
  margin: 2rem 0 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dampad);
}

/* --- avbockning --- */

.bockrad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.bock { display: contents; }

.bockknapp {
  padding: 0.3rem 0.7rem;
  font: 400 0.78rem var(--brod);
  color: var(--dampad);
  background: transparent;
  border: 1px solid var(--linje);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.bockknapp:active { color: var(--black); border-color: var(--dampad); }
.bockknapp.alltid { font-style: italic; }
.bockknapp.ater { color: var(--black); border-color: var(--dampad); }

.avbojda {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linje);
}

.avbojda summary {
  font-size: 0.85rem;
  color: var(--dampad);
  cursor: pointer;
  list-style: none;
}

.avbojda summary::-webkit-details-marker { display: none; }
.avbojda summary::before { content: "▸ "; }
.avbojda[open] summary::before { content: "▾ "; }

.post.avbojd { opacity: 0.55; border-bottom: 0; padding: 0.7rem 0; }
.post.avbojd .vem { font-size: 1rem; }

/* --- detaljer i rullista: rutnatet ar vyn, texten ar pafyllnad --- */

.detaljer {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linje);
}

.detaljer > summary,
.avbojda > summary {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dampad);
  cursor: pointer;
  list-style: none;
  padding: 0.4rem 0;
}

.detaljer > summary::-webkit-details-marker,
.avbojda > summary::-webkit-details-marker { display: none; }
.detaljer > summary::before { content: "▸  "; }
.detaljer[open] > summary::before { content: "▾  "; }

/* --- kvittera packningen --- */

.atgard.packning {
  align-items: center;
  justify-content: space-between;
}

.kvittera {
  flex: 0 0 auto;
  padding: 0.3rem 0.85rem;
  font: 700 0.78rem var(--brod);
  color: var(--varning);
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}

.kvittera:active { color: var(--black); }

.packatrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--dampad);
}

/* --- nytt pa schemat --- */

.nytt {
  padding: 0.9rem 1.1rem 1rem;
  margin: 0 0 1rem;
  background: var(--papper-djup);
  border-radius: var(--radie);
  animation: stig 0.45s both;
}

.nyttopp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.nyttopp h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dampad);
}

.nyttopp .kvittera { color: var(--black); }

.nyrad {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.28rem 0;
  font-size: 0.9rem;
}

/* .prick ar absolutpositionerad fran tidslinjen och maste stallas tillbaka
   i varje radkomponent - annars rymmer den till narmaste positionerade
   forfader, vilket ar hela skarmen. */
.nyrad .prick,
.kortrad .prick {
  position: static;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--farg);
}

.nydatum {
  flex: 0 0 2.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--dampad);
}

.nytitel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grensymbol: ett smalt block ryms inte for ordet "fotboll", men en boll
   kanner man igen pa fyrtio pixlar. */

.block .symbol {
  font-size: 0.95rem;
  line-height: 1.1;
  margin-right: 0.15em;
}

.block.aktivitet .blocktitel {
  display: flex;
  align-items: center;
  gap: 0.1em;
  white-space: nowrap;
  overflow: hidden;
}

/* Ensam symbol utan text centreras i blocket */
.block.aktivitet .blocktitel:not(:has(:not(.symbol))) {
  justify-content: center;
}

.block { padding: 4px 5px; }

/* --- lektionsschemat: hela listan, en egen sida ---
 *
 * Dagsvyn kollapsar skoldagen till ett block med flit. Har ar motsatsen,
 * och darfor far den kosta plats: tiderna i egen spalt med tabellsiffror
 * sa raderna gar att skanna lodratt, och en tunn tidslinje i barnets farg
 * som haller ihop listan utan att fylla nagot med kulor.
 */

.schemabarn {
  margin-bottom: 2.4rem;
  animation: stig 0.45s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.schematopp {
  display: flex;
  gap: var(--spalt);
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linje);
}

.lektioner {
  --tidspalt: 3.4rem;
  --mellanrum: 0.55rem;
  /* Skenans mitt: tidspalten, ett mellanrum, halva skenspalten */
  --skena: calc(var(--tidspalt) + var(--mellanrum) + 0.45rem);
  list-style: none;
  margin: 0;
  padding: 0.9rem 0 0 0;
}

/* Tid, skena och text far varsin spalt. Ligger skenan i stallet ovanpa
   texten skar den rakt genom siffrorna - vilket den gjorde. */
.lektion {
  position: relative;
  display: grid;
  grid-template-columns: var(--tidspalt) 0.9rem 1fr;
  column-gap: var(--mellanrum);
  align-items: start;
  padding: 0.62rem 0;
}

/* Ett skensegment per rad i stallet for en linje over hela listan: da
   behover ingen rakna ut var forsta och sista lektionen hamnar. */
.lektion::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--skena);
  width: 1.5px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--farg) 32%, transparent);
}

.lektion:first-child::after { top: 0.95rem; }
.lektion:last-child::after { bottom: auto; height: 0.95rem; }
.lektion:only-child::after { display: none; }

/* Mittspalten ar skenans, och den ar tom. Utan uttrycklig placering
   hamnar texten dar i stallet och far nio pixlars bredd. */
.lektionstid {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.lektionstid .fran {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lektionstid .till {
  font-size: 0.78rem;
  color: var(--dampad);
}

/* Pricken sitter pa skenan och markerar nar lektionen borjar */
.lektion::before {
  content: "";
  position: absolute;
  left: var(--skena);
  top: 0.95rem;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--farg);
  background: var(--papper);
  transform: translate(-50%, -50%);
}

.lektionskropp { grid-column: 3; min-width: 0; }

.lektionstitel {
  display: block;
  font: 600 1.02rem/1.3 var(--display);
  font-variation-settings: "SOFT" 40;
}

.lektionsplats {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.84rem;
  color: var(--dampad);
}

.lektion .avvikelse { margin-top: 0.15rem; }

.lektion.installd .lektionstitel,
.lektion.installd .lektionstid { text-decoration: line-through; opacity: 0.55; }

/* Lank fran dagsvyns skolrader in i hela listan. En gang, inte en per
   barn - bada gar till samma sida. */
.tillschema {
  display: inline-block;
  margin: 0.15rem 0 1.1rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--dampad);
  text-decoration: none;
  border-bottom: 1px solid var(--linje);
}

.tillschema:active { color: var(--black); }

/* --- bottennavigation ---
 *
 * Ligger fast i underkant sa tummen nar den. Bakgrunden ar papper med
 * suddning bakom, sa innehallet som rullar under anas men inte stor.
 * Personfargen aterkommer som prick under aktiv flik - samma regel som i
 * resten av appen: kuloren bar personen, inte granssnittet.
 */

.skarm.med-flikar { padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)); }

.flikar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  max-width: 460px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem calc(0.55rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--papper) 92%, transparent);
  border-top: 1px solid var(--linje);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.flik {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.15rem 0.3rem;
  color: var(--dampad);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}

.flik svg { width: 21px; height: 21px; display: block; }

.fliketikett {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.flik.nu { color: var(--black); }

/* Pricken sitter under etiketten och ar det enda fargade i menyn */
.flik.nu::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--farg);
}

.flik:not(.nu)::after { content: ""; height: 5px; }

/* Plusknappen lyfts ur raden - den skapar, de andra navigerar */
.flikikon.mitt {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: -1.15rem;
  border: 1.5px solid var(--black);
  border-radius: 50%;
  background: var(--papper);
  color: var(--black);
}

.flik:active .flikikon.mitt { background: var(--papper-djup); }

/* --- startsidan --- */

.avdelning {
  margin: 2.2rem 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dampad);
}

.korthet { border-top: 1px solid var(--linje); }

.kortrad {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--linje);
}

.kortnamn {
  font: 600 1.02rem/1.3 var(--display);
  font-variation-settings: "SOFT" 40;
}

.kortvad {
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--dampad);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kortavvikelse {
  padding: 0.35rem 0 0.6rem 1.05rem;
  font-size: 0.85rem;
  color: var(--varning);
  border-bottom: 1px solid var(--linje);
}

.kortrad.installd .kortnamn,
.kortrad.installd .kortvad { text-decoration: line-through; opacity: 0.55; }

.ingenting {
  padding: 1.4rem 0;
  color: var(--dampad);
  font-size: 0.95rem;
}

/* --- barnval pa schemasidan ---
 *
 * Den inloggades eget namn ligger forst. Ludvig oppnar appen for att se sin
 * egen dag, inte for att bladdra till den.
 */

.lektionsdel { margin-top: 1.6rem; }

.barnval {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.3rem;
}

.barnknapp {
  padding: 0.42rem 0.95rem;
  border: 1.5px solid var(--linje);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dampad);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.barnknapp.vald {
  border-color: var(--farg);
  background: color-mix(in srgb, var(--farg) 12%, transparent);
  color: var(--black);
}

/* --- platshallare for flikar utan sida ---
 *
 * En flik som leder till ingenting ar samre an ingen flik. Sidan sager vad
 * som ska bo har, sa man vet att appen ar ofardig och inte trasig.
 */

.obyggt {
  margin-top: 1.5rem;
  padding: 1.5rem 1.35rem;
  border: 1.5px dashed var(--linje);
  border-radius: var(--radie);
  background: color-mix(in srgb, var(--papper-djup) 55%, transparent);
}

.obyggtmarke {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dampad);
}

.obyggttext {
  margin: 0 0 0.9rem;
  font: 400 1.05rem/1.5 var(--display);
}

.obyggtnar {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dampad);
}

/* Avbockad rad tonas ut i stallet for att bara slockna. htmx behaller
   elementet under swap-fordrojningen, sa overgangen hinner synas. */
.atgard.htmx-swapping {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* --- vadret ---
 *
 * Tre hallpunkter och en mening. Syftet ar smalt: ska barnen ha regnjacka,
 * och hur kallt ar det nar de gar. Vaderappen finns redan i telefonen.
 */

.vader {
  margin: 0 0 1.6rem;
  padding: 1rem 0.4rem 0.9rem;
  border-top: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
}

.vaderpunkter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.vaderpunkt {
  display: grid;
  justify-items: center;
  gap: 0.18rem;
}

.vadernar {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dampad);
  white-space: nowrap;
}

.vadertecken { font-size: 1.5rem; line-height: 1.2; }

.vadergrad {
  font: 600 1.35rem/1 var(--display);
  font-variation-settings: "SOFT" 40;
  font-variant-numeric: tabular-nums;
}

.vaderrad {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--dampad);
  text-align: center;
}

/* --- dagbyte, klistrat i overkant ---
 *
 * Lektionslistan ar lang. Lag pilarna i botten fick man scrolla tillbaka
 * upp for att byta dag, och da slutar man blada. Nu foljer de med.
 */

.dagbyte {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  gap: 0.4rem;
  /* Bryter ut i sidled sa den klistrade ytan tacker hela skarmbredden i
     stallet for att lamna tva rander dar innehallet syns igenom. */
  margin: 0 -1.35rem 1.6rem;
  padding: 0.55rem 1.35rem 0.7rem;
  background: color-mix(in srgb, var(--papper) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linje);
}

.dagmitt { min-width: 0; text-align: center; }

/* Mindre an pa startsidan - har delar rubriken plats med tva pilar */
.dagbyte .dagrubrik {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.dagbyte .datumrad { margin: 0.1rem 0 0; font-size: 0.85rem; }

/* Sag inte bara "Idag" inne i datumraden. Ludvig, 10, last raden
   "20 augusti · Idag" som ett pastaende om datumet och trodde att appen
   hade fel - inte som en vag tillbaka. Nu ar den en egen rad, en pill med
   kant och en pil, alltsa nagot man trycker pa och inte nagot man laser.
   Fyrtiofyra pixlar ar samma minsta tryckyta som dagpilarna har. */
.tillbakaidag {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.95rem;
  margin: 0 0 1.6rem;
  border: 1px solid var(--linje);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
}

.tillbakaidag:active { transform: translateY(1px); opacity: 0.9; }

/* Fyrtiofyra pixlar ar minsta tryckyta som gar att traffa med tummen
   utan att sikta. Tecknet ar mindre an ytan. */
.dagpil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linje);
  border-radius: 50%;
  font: 400 1.6rem/1 var(--display);
  color: var(--black);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.dagpil:active { background: var(--papper-djup); }

/* Rubriken pa startsidan sager "Hej Sebastian" varje dag. Den behover inte
   ta lika mycket plats som veckodagen pa schemat gor. */
.dagrubrik.liten {
  font-size: 2.1rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.1rem;
}

/* --- ikon i dagens korthet ---
   Emoji i en ram i grenens farg. Man ska se VAD raden ar utan att lasa. */
.kortikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1.5px solid var(--farg);
  background: color-mix(in srgb, var(--farg) 11%, transparent);
  font-size: 0.95rem;
  line-height: 1;
}

.kortrad { align-items: center; }

/* --- dagens fakta ---
   En sak barnen kan lara sig, en per dag. Lagst ner: den ar det trevligaste
   pa sidan men aldrig det viktigaste. */

.fakta {
  margin-top: 2.2rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radie);
  background: var(--papper-djup);
}

.faktamarke {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dampad);
}

.faktatext {
  margin: 0;
  font: 400 1.02rem/1.45 var(--display);
}

/* --- anslagstavlan ---
 *
 * Specen listar ett meddelandeflode som utanfor omfattningen. Bestallaren
 * valde att bygga anda, sa formen ar medvetet snal: korta anslag, ingen
 * svarstrad, ingen olast-markering. De faller av efter tre dagar - en
 * tavla utan gallring blir en chatt, och en chatt konkurrerar med den
 * familjen redan har.
 */

.tavlasektion { border-top: 1px solid var(--linje); }

.anslagform {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.anslagfalt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.95rem;
  font: 400 0.98rem var(--brod);
  color: var(--black);
  background: var(--papper-djup);
  border: 1.5px solid var(--linje);
  border-radius: 999px;
}

.anslagfalt:focus { outline: none; border-color: var(--black); }

.anslagknapp {
  flex: 0 0 auto;
  padding: 0.7rem 1.05rem;
  font: 700 0.9rem var(--brod);
  color: var(--papper);
  background: var(--black);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.anslagknapp:active { opacity: 0.85; }

.anslag {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linje);
  animation: stig 0.35s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.anslag:last-child { border-bottom: 0; }

.anslagkropp { flex: 1 1 auto; min-width: 0; }

.anslagtext {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.anslagvem {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--dampad);
}

.anslagbort {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--dampad);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.anslagbort:active { background: var(--papper-djup); }

/* --- kontomenyn ---
 *
 * Stampeln ar knappen. Namnet star inne i panelen i stallet for uppe i
 * hornet pa varje sida - man vet vem man ar.
 */

.topp { justify-content: flex-end; margin-bottom: 1.4rem; }

.konto { position: relative; }

.kontoknapp {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kontoknapp::-webkit-details-marker { display: none; }
.kontoknapp::marker { content: ""; }

.konto[open] .kontoknapp .stampel { box-shadow: 0 0 0 3px var(--papper-djup); }

.kontopanel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 10;
  min-width: 11rem;
  padding: 0.95rem 1.05rem 1.05rem;
  background: var(--papper);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--black) 14%, transparent);
  animation: stig 0.18s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.kontonamn {
  margin: 0;
  font: 600 1.15rem/1.2 var(--display);
  font-variation-settings: "SOFT" 40;
}

.kontoroll {
  margin: 0.1rem 0 0.85rem;
  font-size: 0.8rem;
  color: var(--dampad);
}

.kontout {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--black);
  text-decoration: none;
  border: 1.5px solid var(--linje);
  border-radius: 999px;
}

.kontout:active { background: var(--papper-djup); }

/* --- halsningen ligger i samma rad som kontoknappen ---
   Den sa "Hej Sebastian" varje dag och tog ett helt block for det. */

.starttopp { align-items: flex-start; justify-content: space-between; }

.halsning { min-width: 0; }

.halsningsnamn {
  margin: 0;
  font: 600 1.5rem/1.15 var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1;
  letter-spacing: -0.02em;
}

.halsningsdatum {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: var(--dampad);
}

/* --- profilbilder --- */

.stampel.rund { border-radius: 50%; }
.stampel.stor.rund { border-radius: 50%; }

.kontolank {
  display: block;
  margin-bottom: 0.45rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--black);
  text-decoration: none;
  border: 1.5px solid var(--linje);
  border-radius: 999px;
}

.bildkort {
  display: flex;
  align-items: center;
  gap: var(--spalt);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linje);
}

.bildkort .stampel.stor { width: 84px; height: 84px; font-size: 2.2rem; }

.bildkropp { flex: 1 1 auto; min-width: 0; }

.bildnamn {
  margin: 0;
  font: 600 1.2rem/1.2 var(--display);
  font-variation-settings: "SOFT" 40;
}

.bildroll { margin: 0.1rem 0 0.7rem; font-size: 0.8rem; color: var(--dampad); }

/* Filvaljaren ar ful i varje webblasare. Etiketten ar knappen, och
   input-elementet gommer sig bakom den. */
.bildvalj {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1.5px solid var(--linje);
  border-radius: 999px;
  cursor: pointer;
}

.bildvalj input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.bildvalj:active { background: var(--papper-djup); }

.bildnot {
  margin-top: 1.6rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--dampad);
}

/* --- hamtningar ---
 *
 * "Vem hamtar?" ar familjens vanligaste friktion och loses idag med SMS.
 * Darfor ar knappen ETT tryck och strackan som saknar forare den enda
 * saken pa sidan som ar rodmarkerad.
 */

.skjutsblock { border-top: 1px solid var(--linje); }

.saknarforare {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--varning);
  background: color-mix(in srgb, var(--varning) 8%, transparent);
  border-left: 3px solid var(--varning);
  border-radius: 0 var(--radie) var(--radie) 0;
}

.saknartext { font-size: 0.92rem; line-height: 1.35; }
.saknartext em { font-style: normal; font-weight: 700; }

.allthar {
  padding: 0.9rem 0;
  font-size: 0.95rem;
  color: var(--dampad);
}

.skjutsrad {
  padding: 1rem 0 0.5rem;
  border-bottom: 1px solid var(--linje);
  animation: stig 0.4s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.skjutstopp {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.skjutsnamn {
  margin: 0;
  font: 600 1.08rem/1.25 var(--display);
  font-variation-settings: "SOFT" 40;
}

.skjutsnar { margin: 0.1rem 0 0; font-size: 0.84rem; color: var(--dampad); }

/* En stracka: dit eller hem. Rutnat sa etikett, forare och knapp star
   pa samma hojd oavsett hur langa namnen ar. */
.stracka {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
}

.strackavad { display: grid; }

.strackaetikett {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dampad);
}

.strackatid {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.strackavem { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }

.korare { font-size: 0.95rem; font-weight: 700; }

.strackanot { font-size: 0.85rem; color: var(--dampad); }

.stracka.saknas .ingenkor {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--varning);
}

.tarden {
  padding: 0.5rem 0.9rem;
  font: 700 0.85rem var(--brod);
  color: var(--papper);
  background: var(--black);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.tarden.ater {
  color: var(--dampad);
  background: transparent;
  border: 1.5px solid var(--linje);
}

.tarden:active { opacity: 0.85; }

/* Fritexten ligger hopfalld. De flesta strackor kors av nagon i familjen,
   och da ska "aker med Anna" inte ta plats pa varje rad. */
.annankor { grid-column: 1 / -1; }

.annankor summary {
  font-size: 0.8rem;
  color: var(--dampad);
  cursor: pointer;
  padding: 0.25rem 0;
}

.annanform { display: flex; gap: 0.45rem; margin: 0.5rem 0 0.3rem; }
.annanform .anslagfalt { font-size: 0.9rem; padding: 0.55rem 0.85rem; }
.annanform .anslagknapp { padding: 0.55rem 0.9rem; }

/* Narvarofragan star overst i varje aktivitet. Sager man nej forsvinner
   hela raden med sina skjutsfragor - och da behover ingen tanka pa en
   stracka som inte langre finns.

   Tre lagen, inte tva: obesvarad, uttryckligt ja, uttryckligt nej. Bocken
   visar att nagon FAKTISKT bekraftat, inte bara att ingen sagt emot. */
.narvaro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--linje);
}

.narvaro form { display: contents; }

.narvaronamn {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dampad);
  margin-right: 0.15rem;
}

.narvaroknapp {
  padding: 0.38rem 0.75rem;
  font: 700 0.82rem var(--brod);
  color: var(--dampad);
  background: transparent;
  border: 1.5px solid var(--linje);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.narvaroknapp .bock { font-weight: 700; }

/* Bekraftad narvaro ar det enda som far en fylld knapp. Da ser man pa
   avstand vad som ar avklarat. */
.narvaroknapp.bekraftad {
  color: var(--papper);
  background: var(--black);
  border-color: var(--black);
}

.narvaroknapp.alltid { font-style: italic; font-weight: 400; }

.narvaroknapp:active { background: var(--papper-djup); }
.narvaroknapp.bekraftad:active { opacity: 0.85; }

.avbojda .post.avbojd .kortikon { opacity: 0.6; }

/* Varningen om forare ar en lank, inte en text. Trycket ska leda nagonstans. */
.skjutsvarning {
  justify-content: space-between;
  align-items: center;
  color: var(--varning);
  text-decoration: none;
}

.skjutsvarning .pilen { font-size: 1.1rem; }

/* Vem som kor, under aktivitetsraden pa startsidan */
.kortskjuts {
  padding: 0 0 0.6rem 2.3rem;
  margin-top: -0.35rem;
  font-size: 0.83rem;
  color: var(--dampad);
  border-bottom: 1px solid var(--linje);
}

.kortrad:has(+ .kortskjuts) { border-bottom: 0; }

/* --- hem fran skolan ---
 *
 * Ligger overst i planeraren: "hamtas 12:55" och "fotboll dit 17:30" ar
 * samma fraga for den som ska kora.
 */

.hemresa { margin-bottom: 1.2rem; }

.hemrad {
  padding: 0.9rem 0 0.6rem;
  border-bottom: 1px solid var(--linje);
}

.hemtopp { display: flex; align-items: center; gap: 0.75rem; }

.hemikoner { display: flex; gap: 0.25rem; flex: 0 0 auto; }

.hemnamn {
  margin: 0;
  font: 600 1.08rem/1.25 var(--display);
  font-variation-settings: "SOFT" 40;
}

.hemnar { margin: 0.1rem 0 0; font-size: 0.84rem; color: var(--dampad); }

.hemsatt {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.6rem 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 700;
}

.hemtecken { font-size: 1.05rem; }

/* Foljer barnet sin staende regel behover ingen gora nagot - da ska det
   sta diskret och inte konkurrera med det som kraver ett beslut. */
.somvanligt {
  margin-left: 0.35rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--dampad);
}

.hemsaknas {
  margin: 0.6rem 0 0.2rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--varning);
  background: color-mix(in srgb, var(--varning) 8%, transparent);
  border-left: 3px solid var(--varning);
  border-radius: 0 var(--radie) var(--radie) 0;
}

/* Hemresans stracka har ingen tidsspalt - tiden star redan i rubriken. */
.stracka.hemstracka {
  grid-template-columns: 1fr auto;
  border-top: 1px dashed var(--linje);
  margin-top: 0.5rem;
}

/* Ett formular med val och EN sparaknapp. Fem knappar som sparar direkt
   ser ut som alternativ man blar bland, och da vet man inte om trycket
   gjorde nagot. */
.hemval {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0 0.3rem;
}

.hemvalrad {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.2rem;
  border-radius: 10px;
  cursor: pointer;
}

.hemvalrad input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--black);
  margin: 0;
}

.hemvaltext { font-size: 0.95rem; font-weight: 700; white-space: nowrap; }

.hemvalrad:has(input:checked) {
  background: color-mix(in srgb, var(--black) 6%, transparent);
}

.hemvalrad .anslagfalt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.88rem;
}

/* Enda grona i hela appen, och den betyder en enda sak: det du valt
   sparas nar du trycker har. */
.spara {
  justify-self: start;
  margin-top: 0.5rem;
  padding: 0.55rem 1.35rem;
  font: 700 0.92rem var(--brod);
  color: var(--papper);
  background: #4f7d45;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.spara:active { opacity: 0.85; }

.hemvalnamn {
  flex: 1 0 100%;
  margin: 0.3rem 0 0.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dampad);
}

/* Buss och kompis behover ett falt bredvid knappen */
.hemvalform {
  display: flex !important;
  gap: 0.3rem;
  align-items: center;
  flex: 1 0 100%;
}

.hemvalform .anslagfalt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

/* --- staende hemreseregler pa Mina sidor --- */

.standarder {
  margin: 0 0 1.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linje);
}

.standarder > summary {
  padding: 0.7rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dampad);
  cursor: pointer;
}

.standardrad {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.3rem 0.6rem;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linje);
}

.standarddag {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: capitalize;
}

.standardnu { font-size: 0.85rem; color: var(--dampad); }

.standardform {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.standardform .anslagfalt {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.standardnot {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--dampad);
}

/* --- anslagets fotrad ---
 *
 * Reaktioner, kvittens och OK pa EN rad. Tre tomma reaktionsknappar per
 * anslag tog mer plats an texten de handlade om - nu visas bara de tecken
 * nagon faktiskt anvant, och valet ligger hopfallt bakom ett tecken.
 */

.anslagfot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.anslagfot form { display: contents; }

.reaktion {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.14rem 0.45rem;
  font: 700 0.76rem var(--brod);
  color: var(--black);
  background: var(--papper-djup);
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reaktionstecken { font-size: 0.85rem; line-height: 1.1; }

.reaktion.min {
  border-color: var(--black);
  background: color-mix(in srgb, var(--black) 8%, transparent);
}

.reaktion:active { transform: scale(0.94); }

/* Valet: ett tryck oppnar, ett till valjer. */
.reaktionsval { position: relative; }

.reaktionsval > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 0.95rem;
  color: var(--dampad);
  border: 1.5px dashed var(--linje);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reaktionsval > summary::-webkit-details-marker { display: none; }
.reaktionsval > summary::marker { content: ""; }

.reaktionspanel {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  z-index: 6;
  display: flex;
  gap: 0.2rem;
  padding: 0.3rem;
  background: var(--papper);
  border: 1px solid var(--linje);
  border-radius: 999px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--black) 16%, transparent);
  animation: stig 0.15s both cubic-bezier(0.2, 0.8, 0.3, 1);
}

.reaktionsval-knapp {
  width: 34px;
  height: 34px;
  font-size: 1.15rem;
  line-height: 1;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.reaktionsval-knapp.min { border-color: var(--black); }
.reaktionsval-knapp:active { background: var(--papper-djup); }

/* --- vem har sett anslaget ---
 *
 * Bara symbolerna. Fyra stamplar sager samma sak som "sett av ... saknas
 * ..." pa en brakdel av hojden. Namnet star i title-attributet.
 *
 * Appen laser inte vagen framat tills alla kvitterat: ett hinder man
 * moter varje morgon blir nagot man klickar bort utan att lasa.
 */

.kvittens { display: flex; gap: 0.15rem; margin-left: auto; }

.settprick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--farg);
  background: color-mix(in srgb, var(--farg) 16%, transparent);
  color: var(--farg);
  font: 700 0.62rem/1 var(--brod);
}

.settprick.osedd {
  border-style: dashed;
  border-color: var(--linje);
  background: transparent;
  color: var(--linje);
}

.settknapp {
  padding: 0.16rem 0.65rem;
  font: 700 0.75rem var(--brod);
  color: var(--papper);
  background: var(--black);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* --- laxor --- */

.laxkort {
  padding: 0.9rem 1rem 0.7rem;
  margin-bottom: 0.9rem;
  background: var(--papper);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
}

.laxtopp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.laxnamn { font: 700 1rem var(--brod); margin: 0; }

.laxstatus {
  font-size: 0.85rem;
  color: var(--dampad);
  margin: 0;
  text-align: right;
}

.laxklara {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--dampad);
  border-top: 1px dashed var(--linje);
}

.laxsektion { margin-top: 1.2rem; }

.laxa {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linje);
}

.laxa form { display: contents; }

.laxkropp { flex: 1 1 auto; min-width: 0; }

.laxtitel { margin: 0; font-size: 0.98rem; font-weight: 700; }

.laxnar { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--dampad); }

/* Forsenad ar inte samma sak som "idag". Den forsta kraver en forklaring,
   den andra bara ett tryck. */
.laxa.forsenad .laxnar { color: var(--varning); font-weight: 700; }

.laxa.klar { opacity: 0.5; }
.laxa.klar .laxtitel { text-decoration: line-through; }

.check.bockad {
  display: grid;
  place-items: center;
  border-color: var(--black);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.laxform { display: grid; gap: 0.4rem; padding: 0.6rem 0 0.3rem; }
.laxform .spara { justify-self: start; }

/* --- ovningarna ---------------------------------------------------------
   Tre rader i laxkortet, en per amne, och en egen sida bakom varje rad.
   Tio fragor ar for mycket for en ruta ovanpa kortet pa en telefon, och en
   egen sida gar att lamna och komma tillbaka till utan att tappa det
   ifyllda. */

.ovningsrader {
  margin-top: 0.6rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--linje);
}

.ovningsrad {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.35rem 0;
  color: var(--black);
  text-decoration: none;
}

.ovningsamne { font-size: 0.95rem; font-weight: 700; }

.ovningsstatus { font-size: 0.9rem; color: var(--dampad); }

.ovningsrad .pilen { font-size: 1.1rem; color: var(--dampad); }

/* Sidan ------------------------------------------------------------- */

.ovningsbesked {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  color: var(--dampad);
}

.ovningspoang {
  margin: 0 0 0.2rem;
  font: 600 1.6rem var(--display);
  font-variation-settings: "SOFT" 70, "WONK" 1;
}

/* Historiken bor bredvid dagens resultat - det ar dar den betyder nagot. */
.ovningshistorik {
  margin: 0 0 1.4rem;
  font-size: 0.9rem;
  color: var(--dampad);
  font-variant-numeric: tabular-nums;
}

.ovningslista {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  counter-reset: fraga;
}

.ovningsfraga {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linje);
}

.ovningstext {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.35;
}

.ovningstext::before {
  counter-increment: fraga;
  content: counter(fraga) ". ";
  color: var(--dampad);
  font-variant-numeric: tabular-nums;
}

.ovningsfalt {
  width: 100%;
  padding: 0.7rem 0.95rem;
  font: 400 1rem var(--brod);
  color: var(--black);
  background: var(--papper-djup);
  border: 1.5px solid var(--linje);
  border-radius: 999px;
}

.ovningsfalt:focus { outline: none; border-color: var(--black); }

.ovningsval { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ovningsalt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.9rem;
  font-size: 0.95rem;
  background: var(--papper-djup);
  border: 1.5px solid var(--linje);
  border-radius: 999px;
  cursor: pointer;
}

.ovningsalt:has(input:checked) { border-color: var(--black); font-weight: 700; }

.ovningsratta { justify-self: start; padding: 0.7rem 1.8rem; font-size: 1rem; }

/* Rott ar reserverat for varning, och en varning ar nagot som kraver ett
   beslut - en hamtning utan forare. Ett fel svar kraver inget beslut, sa
   krysset far tecknet och tyngden men inte appens varningsfarg. Skillnaden
   mellan ratt och fel bars av bocken, krysset och facitraden under. */
.ovningsfraga.fel .ovningsmarke { color: var(--black); }
.ovningsfraga.ratt .ovningsmarke { color: #4f7d45; }
.ovningsfraga.fel .ovningssvar { color: var(--dampad); }

.ovningssvar {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.ovningsmarke { font-weight: 700; }

.ovningsfacit {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--dampad);
}

/* --- knacka pa ----------------------------------------------------------
   Barnets knapp ligger overst pa startsidan for att appen oppnas dar och en
   utgang man maste leta efter inte ar en utgang. Den vuxnas rop ar en
   atgardsrad i varningens form: rott betyder att nagot kraver ett beslut,
   och ett barn som star och vantar ar exakt det. Det ar forsta gangen sedan
   hamtningen utan forare som fargen ar sjalvklart ratt. */

.knackknapp {
  display: block;
  padding: 1.1rem;
  margin: 0 0 1.4rem;
  font: 700 1.15rem var(--brod);
  text-align: center;
  color: var(--papper);
  background: var(--black);
  border-radius: var(--radie);
  text-decoration: none;
}

.knackstatus {
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.4rem;
  background: var(--papper-djup);
  border-radius: var(--radie);
}

.knacksagt { margin: 0; font-size: 0.95rem; font-weight: 700; }
.knacksvar { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--dampad); }
.knackstatus.kvitterad .knacksvar { color: #4f7d45; font-weight: 700; }

.knackavbryt {
  min-height: 44px;
  margin-top: 0.6rem;
  padding: 0.45rem 1.1rem;
  font: 600 0.85rem var(--brod);
  color: var(--dampad);
  background: transparent;
  border: 1px solid var(--linje);
  border-radius: 999px;
  cursor: pointer;
}

.knackrop { align-items: center; }
.knackrop form { flex: 0 0 auto; }

.knackform { display: grid; gap: 0.7rem; }

/* Stora knappar med flit. Den som trycker har kalla hander, star i morkret
   och siktar med en tumme. */
.knackval {
  min-height: 88px;
  font: 700 1.2rem var(--brod);
  color: var(--black);
  background: var(--papper-djup);
  border: 1.5px solid var(--linje);
  border-radius: var(--radie);
  cursor: pointer;
}

.knackval:active { background: var(--linje); }

/* --- veckan ------------------------------------------------------------
   Tiden gar at hoger och dagarna nedat. Varje dag har ett spar per person
   som har nagot, med namnet till vanster. Forsta versionen slog ihop alla
   i ett spar for att fa plats pa en skarm - den gick inte att lasa, for
   den sa VAD men aldrig VEM. Hojden ar priset for att veckan gar att lasa. */

.vylage {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0 1.1rem;
  padding: 0.2rem;
  background: var(--papper-djup);
  border-radius: 999px;
}

.vylageknapp {
  padding: 0.35rem 1.1rem;
  font: 600 0.85rem var(--brod);
  color: var(--dampad);
  text-decoration: none;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

.vylageknapp.vald { color: var(--black); background: var(--papper); }

.veckobyte {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  gap: 0.4rem;
  margin: 0 -1.35rem 1.2rem;
  padding: 0.55rem 1.35rem 0.7rem;
  background: color-mix(in srgb, var(--papper) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linje);
}

.veckorubrik {
  margin: 0;
  font: 600 2rem/1.05 var(--display);
  font-variation-settings: "SOFT" 70, "WONK" 1;
  letter-spacing: -0.025em;
}

.veckonyckel {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  color: var(--dampad);
}

.veckan { margin: 0 0 1.75rem; }

/* Samma indrag som .veckovem plus gapet, annars star 07 over namnen i
   stallet for over sparets borjan. */
.veckoaxel {
  position: relative;
  height: 1rem;
  margin-left: 4.6rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--dampad);
}

.axeltimme { position: absolute; transform: translateX(-50%); }

.veckodygn {
  display: block;
  padding: 0.35rem 0 0.5rem;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--linje);
  -webkit-tap-highlight-color: transparent;
}

.veckodygn.idag { background: color-mix(in srgb, var(--papper-djup) 70%, transparent); }
.veckodygn:active { background: var(--papper-djup); }

.veckodagrubrik {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0 0 0.15rem;
  font-size: 0.8rem;
  color: var(--dampad);
}

.veckodagnamn { font-weight: 700; }
.veckodagdatum { font-variant-numeric: tabular-nums; }
.veckodygn.idag .veckodagnamn { color: var(--black); }

.veckotomt { font-size: 0.76rem; font-style: italic; }

.veckorad {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.1rem 0;
}

/* Namnet gor identifieringen. Fargen forstarker den, men den bar den inte
   ensam - fyra toner ar for lika for att skiljas i ett ogonkast. */
.veckovem {
  flex: 0 0 4.2rem;
  align-self: center;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--farg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.veckospar {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* Banorna staplas nedat. En bana ar 1.25 rem plus lite luft. */
  height: calc(var(--banor) * 1.25rem + 0.25rem);
  min-height: 1.5rem;
  border-radius: 7px;
  background: color-mix(in srgb, var(--papper-djup) 55%, transparent);
}

.axellinje {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--linje);
}

/* Skolan bar personens farg, dampad. Det ar det som gor att man ser att
   Ludvig slutar 14:20 och Ebba 13:30 utan att klicka. */
.veckoskola {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--farg) 17%, transparent);
}

.veckoblock {
  position: absolute;
  top: calc(var(--bana) * 1.25rem + 0.12rem);
  height: 1.15rem;
  /* En kvartslang post blir smalare an tummen. Golvet gor att den gar att
     se och att traffa anda. */
  min-width: 1.5rem;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  line-height: 1;
  color: var(--papper);
  background: var(--farg);
  border-radius: 5px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--black) 20%, transparent);
}

/* Symbolen star till vanster, inte mitt i. Centrerad i ett block som
   spanner hela dygnet ser golfen ut att borja klockan tretton. */
.veckoblock.heldag {
  border-radius: 7px;
  opacity: 0.85;
  place-items: center start;
  padding-left: 0.4rem;
}

.veckoblock.installd { opacity: 0.35; }

.veckoavvikelse { margin: 0 0 0.4rem; font-size: 0.9rem; }

.veckoavvikelsedag {
  display: inline-block;
  min-width: 3.2rem;
  font-weight: 700;
  color: var(--dampad);
}

/* --- den analoga klockan -----------------------------------------------
   Barnen ska lara sig lasa visare, sa ingen digital tid star bredvid.
   Visarna gar utan JavaScript: CSS-animationer med negativ fordrojning
   fran servern. Ligger appen oppen hela kvallen fortsatter de ga ratt. */

.topphorn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Sjuttioatta pixlar, inte fyrtiosex som stampeln bredvid. Siffrorna ar
   tretton procent av tavlan, sa varje pixel mindre gor dem svarare att
   lasa - och att lasa dem ar hela poangen. */
.klocka { width: 78px; height: 78px; flex: 0 0 auto; }

.klocktavla {
  fill: var(--papper-djup);
  stroke: var(--linje);
  stroke-width: 2;
}

.klocksiffra {
  fill: var(--dampad);
  font: 700 13px var(--brod);
  text-anchor: middle;
  dominant-baseline: central;
}

.klockvisare {
  stroke: var(--black);
  stroke-linecap: round;
  /* Visaren ska snurra kring tavlans mitt, inte kring sin egen ram. Utan
     view-box far en linje fran 50,50 till 50,19 sitt nav pa halva vagen. */
  transform-box: view-box;
  transform-origin: 50px 50px;
  animation-name: klockvarv;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.klockvisare.timme { stroke-width: 4.5; animation-duration: 43200s; }
.klockvisare.minut { stroke-width: 3; animation-duration: 3600s; }

.klockvisare.sekund {
  stroke: var(--dampad);
  stroke-width: 1.2;
  animation-duration: 60s;
}

.klocknav { fill: var(--black); }

@keyframes klockvarv {
  to { transform: rotate(360deg); }
}

/* En visare som snurrar ar rorelse. Den som bett om mindre av det far
   klockan utan sekundvisare - timme och minut ror sig omarkligt. */
@media (prefers-reduced-motion: reduce) {
  .klockvisare.sekund { display: none; }
}

/* --- konton under Mer --------------------------------------------------- */

/* .notis fargas av --farg. Utan den blir bade kanten och bakgrunden
   ogiltiga och rutan forsvinner tyst. */
.notis.kontofel { --farg: var(--varning); }
.notis.kontoklar { --farg: #4f7d45; }

.konto-kort {
  padding: 0.9rem 0 0.4rem;
  border-top: 1px solid var(--linje);
}

.kontoform { display: grid; gap: 0.1rem; padding: 0.5rem 0 0.9rem; }

.faltrad { display: block; }

.faltnamn {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dampad);
}

/* Kompaktare an inloggningens falt - har ligger flera pa samma sida. */
.kontoform .falt {
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}

.spara.farlig { background: var(--varning); }

/* Engangskoden visas EN gang och ska ga att lasa hogt tvars over ett kok. */
.engangskod {
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--papper-djup);
  border-radius: var(--radie);
}

.engangsrubrik {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dampad);
}

.engangssiffror {
  margin: 0.2rem 0 0.5rem;
  font: 700 2.4rem/1 var(--brod);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.engangstext { margin: 0; font-size: 0.85rem; color: var(--dampad); }