:root {
  color-scheme: light dark;
  --bakgrund: #f4f5f7;
  --kort: #ffffff;
  --text: #1c2430;
  --dampad: #5a6575;
  --kant: #dfe3e8;
  --accent: #2456c9;
  --accent-text: #ffffff;
  --vald: #e8590c;
  --lyckat: #18794e;
  --fel: #b42318;
  --ruta-a: #eef1f5;
  --ruta-b: #cfd8e3;
  --visare: #1c2430;
  --ring-1: #2456c9;
  --ring-2: #18794e;
  --ring-3: #b58900;
  --ring-4: #b42318;
  --ring-5: #6e40c9;
  --ring-6: #0e7490;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bakgrund: #12161c;
    --kort: #1c222b;
    --text: #e8ecf1;
    --dampad: #a2adbb;
    --kant: #333c48;
    --accent: #6f9bff;
    --accent-text: #0b1220;
    --vald: #ff9248;
    --lyckat: #4cc38a;
    --fel: #ff8a80;
    --ruta-a: #2a323d;
    --ruta-b: #3c4755;
    --visare: #e8ecf1;
  }
}

* { box-sizing: border-box; }

/* Dolda element ska vara dolda, även när en annan regel anger display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bakgrund);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}

header { margin-bottom: 24px; }

h1 { margin: 4px 0 8px; font-size: 2rem; line-height: 1.2; }
h2 { margin: 0; font-size: 1.2rem; }

.markering {
  margin: 0;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.ingress { margin: 0; color: var(--dampad); }

.kort {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--kort);
  border: 1px solid var(--kant);
  border-radius: 12px;
}

.kort > p { color: var(--dampad); }

.kort[aria-disabled="true"] { opacity: 0.55; }
.kort[aria-disabled="true"] .symbolrutnat { pointer-events: none; }

.kortrubrik { display: flex; align-items: center; gap: 12px; }

.nummer {
  display: grid;
  flex: none;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}

button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

.primar, .sekundar {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
}

.primar { border: 0; background: var(--accent); color: var(--accent-text); }
.sekundar { border: 1px solid var(--kant); background: transparent; color: var(--text); }

:focus-visible { outline: 3px solid var(--vald); outline-offset: 2px; }

.kort > p.alternativ { color: var(--text); }

.kort > p.klar { color: var(--lyckat); font-weight: 600; }

.symbolrutnat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--kant);
  border-radius: 10px;
}

legend { padding: 0 6px; font-weight: 600; }

.ritning svg { display: block; width: 100%; max-width: 260px; margin: 0 auto; }

[role="button"] { cursor: pointer; }

.ruta { stroke: var(--kort); stroke-width: 1; }
.ruta-a { fill: var(--ruta-a); }
.ruta-b { fill: var(--ruta-b); }
.ruta:hover { fill: var(--accent); fill-opacity: 0.45; }
.ruta[aria-pressed="true"] { fill: var(--vald); fill-opacity: 1; }

.navtext {
  fill: var(--text);
  font-size: 9px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.ring { stroke: var(--kort); stroke-width: 2; }
.ring-1 { fill: var(--ring-1); }
.ring-2 { fill: var(--ring-2); }
.ring-3 { fill: var(--ring-3); }
.ring-4 { fill: var(--ring-4); }
.ring-5 { fill: var(--ring-5); }
.ring-6 { fill: var(--ring-6); }
.ring:hover { stroke: var(--text); }
.ring[aria-pressed="true"] { stroke: var(--vald); stroke-width: 6; }

.djurrutnat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.djurknapp {
  padding: 10px 0;
  border: 2px solid var(--kant);
  border-radius: 10px;
  background: transparent;
  font-size: 2rem;
  line-height: 1.2;
}

.djurknapp:hover { border-color: var(--accent); }
.djurknapp[aria-pressed="true"] { border-color: var(--vald); background: var(--ruta-a); }

.urtavla { fill: var(--ruta-a); stroke: var(--kant); stroke-width: 3; }
.timstreck { stroke: var(--dampad); stroke-width: 3; stroke-linecap: round; }
.visare { stroke: var(--visare); stroke-linecap: round; }
.visare-timme { stroke-width: 7; }
.visare-minut { stroke-width: 4; }
.visarnav { fill: var(--vald); }

.klockval {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

select {
  padding: 6px;
  border: 1px solid var(--kant);
  border-radius: 6px;
  background: var(--kort);
  color: var(--text);
  font: inherit;
}

.svar { min-height: 1.5em; margin-bottom: 0; font-weight: 600; }
.svar.lyckat { color: var(--lyckat); }
.svar.problem { color: var(--fel); }

.lista { margin: 12px 0; padding: 0; list-style: none; }
.lista li { padding: 4px 0 4px 30px; color: var(--dampad); position: relative; }
.lista li::before { content: "○"; position: absolute; left: 6px; }
.lista li.gjord { color: var(--text); }
.lista li.gjord::before { content: "✓"; color: var(--lyckat); font-weight: 700; }

details { margin-bottom: 12px; }
summary { cursor: pointer; color: var(--dampad); }

pre {
  overflow-x: auto;
  padding: 12px;
  border-radius: 8px;
  background: var(--bakgrund);
  font-size: 0.85rem;
}

@media (max-width: 620px) {
  .symbolrutnat { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 1.7rem; }
}

/* Lokal hemsida */
.meny {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kant);
}

.logotyp { font-size: 1.15rem; font-weight: 700; }
.knapprad { display: flex; flex-wrap: wrap; gap: 10px; }

.falt { display: block; margin-bottom: 16px; font-weight: 600; }

.falt input {
  display: block;
  width: 100%;
  max-width: 340px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--kant);
  border-radius: 8px;
  background: var(--kort);
  color: var(--text);
  font: inherit;
}

.enhetsval { margin: 0 0 16px; }
.enhetsval label { display: block; padding: 4px 0; }
.enhetslista { padding-left: 20px; }
.liten { color: var(--dampad); font-size: 0.9rem; }