/* Infor provdagen: packlistan och kortet i dagsvyn.

   Listan ska ga att bocka av med tummen pa en telefon kvallen fore, sa
   traffytorna ar hela rader och rutorna ar storre an standard. */

.packlista-vy { display: grid; gap: var(--luft-3); }

.pack-status { margin: 0; }

.packgrupp { display: grid; gap: var(--luft-2); }
.packgrupp h2 { margin: 0; font-size: 1.05rem; }
.packgrupp p { margin: 0; }

.packlista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luft-1); }
.packlista li {
  display: flex;
  align-items: flex-start;
  gap: var(--luft-3);
  padding: var(--luft-2) 0;
  border-bottom: 1px solid var(--ram);
}
.packlista li:last-child { border-bottom: 0; }
.packlista input[type=checkbox] {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.15rem 0 0;
  flex: none;
}
.packlista label {
  display: block;
  font-weight: 600;
  cursor: pointer;
}
.packlista .vaxer { display: grid; gap: 0.15rem; }
/* Avbockat dampas men stryks inte over — texten under varje post ar ett
   skal, inte en etikett, och den ska ga att lasa aven efterat. */
.packlista li.avbockad label { color: var(--dampad); font-weight: 500; }

/* Regel eller rad. Skillnaden ar hela poangen med att appen far saga
   nagot alls om provdagen, sa den ska synas pa varje rad. */
.packmarke {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  border: 1px solid var(--ram);
  color: var(--dampad);
}
.packmarke.regel { border-color: currentColor; color: var(--text); }

/* Kortet i dagsvyn. Samma ram som helpasskortet sa att de inte slass om
   uppmarksamheten nar bada visas. */
.packkort {
  display: grid;
  gap: var(--luft-2);
  padding: var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.packkort h2 { margin: 0; font-size: 1.05rem; }
.packkort p { margin: 0; }

/* Anmalningsfonstret. Samma kortform som packlistan — bada handlar om att
   inte falla pa nagot som inte har med kunnande att gora, och de star
   bredvid varandra i planen. Ett OPPET fonster far en tydligare ram: det
   ar den enda notisen i appen med ett datum efter vilket det inte gar att
   gora nagot alls. */
.anmalankort {
  display: grid;
  gap: var(--luft-2);
  padding: var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.anmalankort h2 { margin: 0; font-size: 1.05rem; }
.anmalankort p { margin: 0; }
.anmalankort b { display: block; }
#dagens-anmalan[data-lage="oppen"],
#plan-anmalan[data-lage="oppen"] .anmalankort {
  border-width: 2px;
  border-color: var(--text);
}
#plan-anmalan { display: grid; gap: var(--luft-2); }
#plan-anmalan h2 { margin: 0; }