/* Formelbanken. Formeln sjalv ar det enda som far ropa — allt annat ar
   stodtext. Monospace pa formeln sa att π, ² och · star stadigt. */

.formlervy { display: grid; gap: var(--luft-4); }

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

.formelkort {
  padding: var(--luft-3) var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
}
.formelkort > summary {
  display: flex;
  align-items: center;
  gap: var(--luft-2);
  cursor: pointer;
  font-weight: 600;
  /* traffytan ska na 44 px, inte textradens hojd */
  padding: 10px 0;
  margin: -10px 0;
  list-style-position: inside;
}
.formelkort[open] > summary { margin-bottom: var(--luft-2); }
.formelkort p { margin: 0 0 var(--luft-2); }
.formelkort p:last-child { margin-bottom: 0; }

.formel-marke { color: var(--ratt); font-weight: 700; }

.formel-formel {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 1.1rem;
  padding: var(--luft-2) var(--luft-3);
  background: var(--bg);
  border: 1px solid var(--ram);
  border-radius: var(--radie-liten);
  /* langa samband ska kunna skrollas i sin egen ruta i stallet for att
     tvinga hela sidan att skrolla i sidled */
  overflow-x: auto;
}
.formel-formel.stor { font-size: 1.3rem; }

.formel-exempel { color: var(--dampad); }
.formel-fallgrop {
  padding: var(--luft-2) var(--luft-3);
  background: color-mix(in srgb, var(--fel) 6%, var(--yta));
  border-left: 3px solid var(--fel);
  border-radius: var(--radie-liten);
}

/* ---------- repetitionslaget ---------- */

.formler-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-3);
}

.formelfraga { display: grid; gap: var(--luft-2); }
.formel-namn-stor { margin: 0; font-size: 1.4rem; }
#formler-svar:not(:empty) { display: grid; gap: var(--luft-2); }
#formler-betyg { margin-top: var(--luft-2); }
#formler-betyg .knapp { min-height: 44px; flex: 1; }

/* Knapptexterna far inte brytas mitt itu — "Kunde den" pa tva rader ser ut
   som ett fel. Ryms de inte bredvid varandra hamnar de under varandra. */
#formler-betyg { flex-wrap: wrap; }
#formler-betyg .knapp { white-space: nowrap; }


/* summary { display: flex } tar bort webblasarens egen triangel, sa korten
   sag ut som statiska rubrikrader — ingenting sa att de gick att falla ut.
   En egen pil, som vrids nar kortet oppnas. */
.formelkort > summary { list-style: none; }
.formelkort > summary::-webkit-details-marker { display: none; }
.formelkort > summary::after {
  content: '▸';
  color: var(--dampad);
  transition: transform .15s ease;
}
.formelkort[open] > summary::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .formelkort > summary::after { transition: none; }
}

/* Tangenttipset galler bara den som har ett tangentbord. */
.formler-tangenttips { display: none; }
@media (hover: hover) {
  .formler-tangenttips { display: block; }
}