/* ==========================================================================
   Innstillinger (#innstillinger). Radene er Lodds egne; her står bare
   valgknappene og det som skal brekke pent på en smal skjerm. Ingen nye
   farger: personfargene er farge-0 til farge-5 fra lodd.css, og brikkene
   bruker de svake fyllene fra retning B.
   ========================================================================== */

/* Kontrollen står til høyre for teksten på en bred skjerm, og under den på
   en smal, i stedet for å presse tittelen ned i ett ord per linje. */
#skjerm-innstillinger .inn-rad .inn { flex-wrap: wrap; row-gap: var(--s-3); }
#skjerm-innstillinger .inn-rad .vokser { flex-basis: 220px; }
/* VERSJON 2: hver bolk er et kort med navnet som hode, og radene har
   ingen marg (spes-design-v2.md 4). Radene i Økter ligger ett nivå ned. */
#skjerm-innstillinger .inn-bolk { padding: 0; margin: 0 0 var(--s-6); }
#skjerm-innstillinger .inn-bolk > .seksjon { margin: 0; padding: var(--s-4) var(--s-5) var(--s-3); }
#skjerm-innstillinger .inn-bolk .rad:first-of-type { border-top: 0; }
#skjerm-innstillinger .inn-bolk .rad:last-child { border-bottom: 0; }
#skjerm-innstillinger .inn-bolk .rad .inn { padding: var(--s-3) var(--s-5); }
#skjerm-innstillinger .inn-bolk .seksjon-tom { border: 0; box-shadow: none; background: none; text-align: left; padding: 0 var(--s-5) var(--s-4); }
/* Verdien som sto i margen: en brikke med fyll, i farge bare når fargen
   betyr noe. */
#skjerm-innstillinger .inn-rad .pille {
  flex: 0 0 auto;
  min-height: var(--t-5-h);
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-2);
  background: var(--flate-3);
  color: var(--ink-2);
  font-size: var(--t-2);
  line-height: var(--t-2-h);
  font-weight: 500;
  white-space: nowrap;
}
#skjerm-innstillinger .inn-rad .pille.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#skjerm-innstillinger .inn-rad .pille[data-slag="gjort"] { background: var(--gronn-svak); color: var(--gronn); }
#skjerm-innstillinger .inn-rad .pille[data-slag="venter"] { background: var(--amber-svak); color: var(--amber); }
#skjerm-innstillinger .inn-rad .pille[data-slag="feil"] { background: var(--rod-svak); color: var(--rod); }

/* Valgknappene, samme form som Liste og Tavle i Oppgaver. */
/* Én fylt flate uten kant: velgeren står på et kort, og et kort har aldri
   ramme i ramme (spes-design-v2.md 2, regel 3). */
#skjerm-innstillinger .inn-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 0;
  border-radius: var(--r-2);
  background: var(--flate-3);
}
#skjerm-innstillinger .inn-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;
}
#skjerm-innstillinger .inn-seg button[aria-pressed="true"] {
  background: var(--flate);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  #skjerm-innstillinger .inn-seg button { min-height: var(--menypunkt); }
}

/* Personfargen: seks runde avatarer. Den valgte får en ring i blekkfargen,
   ikke en ny farge, så den leses likt i begge temaer. */
/* Uten mellomrom: seks flater på 44 px får plass på linja på en telefon
   på 375 px, og avataren på 24 px gir luft nok inni hver. */
#skjerm-innstillinger .inn-farger { display: inline-flex; flex-wrap: wrap; gap: 0; }
#skjerm-innstillinger .inn-farge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-3);
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
#skjerm-innstillinger .inn-farge[aria-pressed="true"] { border-color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  #skjerm-innstillinger .inn-seg button:hover { color: var(--ink); }
  #skjerm-innstillinger .inn-farge:hover { border-color: var(--line-2); }
  #skjerm-innstillinger .inn-farge[aria-pressed="true"]:hover { border-color: var(--ink); }
}

/* Kvitteringen står på linja med innholdet, og tar ingen plass før den
   har noe å si. */
#skjerm-innstillinger .inn-kvittering {
  margin: 0;
  padding-left: 0;
  font-size: var(--t-3);
  color: var(--gronn);
}
#skjerm-innstillinger .inn-kvittering:empty { display: none; }

/* Systemdelen skilles fra kontoen med lufta over, ikke med en boks. */
#skjerm-innstillinger .inn-system { margin-top: 0; }
#skjerm-innstillinger .inn-lenker { padding-left: 0; margin-bottom: var(--s-8); }