/* stil.css — det gemensamma utseendet för tävlingsdagen.
 *
 * Inloggningssidan satte tonen: mörk grön hero, vita kort, mintgrönt som
 * accent, mjuka radier och luft. Den här filen tar med sig samma ton till de
 * sidor som byggdes innan dess.
 *
 * Den laddas FÖRE varje sidas egen <style>, och rör därför bara egenskaper
 * som sidorna inte redan bestämt själva — skuggor, fokusringar, övergångar,
 * små accenter. Ingenting här ändrar hur något fungerar, bara hur det ser ut,
 * och en sida som vill något annat vinner fortfarande.
 */

:root {
  --st-gron:        #0f7b6c;
  --st-gron-mork:   #0b5e53;
  --st-gron-ljus:   #4ecfb8;
  --st-morkt:       #07241f;
  --st-linje:       #e2e8f0;
  --st-dampad:      #64748b;
  --st-skugga:      0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -18px rgba(15, 23, 42, .28);
  --st-skugga-hog:  0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px -22px rgba(15, 23, 42, .35);
}

/* Tunn accentlinje högst upp på varje sida. Samma två gröna som märket. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--st-gron) 0%, var(--st-gron-ljus) 55%, var(--st-gron) 100%);
  z-index: 100;
  pointer-events: none;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* En aning av hallens gröna uppe till höger, som på inloggningen. Den
     ligger fast, så den vandrar inte omkring när man rullar. */
  background-image: radial-gradient(900px 420px at 100% -8%, rgba(78, 207, 184, .13), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Rubrikerna får samma täta, lite mörkare ton som på inloggningen. */
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.01em; }

/* Korten lyfter från bakgrunden i stället för att bara ligga på den. */
.card, .ruta, .bana, .match, .rader, .roll {
  box-shadow: var(--st-skugga);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}

/* Klickbara kort svarar på pekaren. */
a.ruta:hover {
  box-shadow: var(--st-skugga-hog);
  transform: translateY(-1px);
}

/* Knappar: mjuk skugga, tydligt anslag, och en grön som har djup. */
button, .knapp {
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease,
              transform .06s ease, color .14s ease;
}
button:hover:not(:disabled) { border-color: #cbd5e1; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }

button.primary, button.primar, #klar, #klSpara {
  background-image: linear-gradient(180deg, #12907e 0%, var(--st-gron) 100%);
  border-color: var(--st-gron-mork);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11, 94, 83, .35), 0 8px 18px -12px rgba(11, 94, 83, .8);
}
button.primary:hover:not(:disabled),
button.primar:hover:not(:disabled) {
  background-image: linear-gradient(180deg, #15a08c 0%, #0d6c5f 100%);
  border-color: var(--st-gron-mork);
}

/* Fokus ska synas — särskilt på en platta där man inte alltid träffar rätt. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--st-gron);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--st-gron);
  box-shadow: 0 0 0 3px rgba(15, 123, 108, .14);
}

/* Tabellrubriker: små versaler, samma språk som etiketterna på inloggningen. */
th {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  color: var(--st-dampad);
}

/* Notiser och pillerformer får mjukare kanter och lite luft. */
.notice, .notis, .pill, .marke, .lage, .beta {
  box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
}

/* Länkar i löpande text. */
a { text-underline-offset: 2px; }

/* Sidor med en <h1> överst får en diskret grön markör före rubriken, som
   binder ihop dem med inloggningens märke. */
.wrap > .huvud h1::before,
.wrap > h1::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: .82em;
  margin-right: 10px;
  vertical-align: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--st-gron-ljus), var(--st-gron));
}

/* Skärmar i hallen har sitt eget mörka utseende och ska inte röras. */
body.tavla-mork::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card, .ruta, .bana, .match, .rader, .roll, button, .knapp { transition: none; }
  a.ruta:hover { transform: none; }
}

/* ---------------------------------------------------------------- sidhuvud
 *
 * Samma anslag som inloggningen: mörk grön botten, mintgrön glöd uppe till
 * höger, märket till vänster. Ren utsmyckning — allt innanför fungerar
 * precis som förut, och en sida utan .sidhuvud ser ut som den alltid gjort.
 */
.sidhuvud {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 22px 24px;
  border-radius: 16px;
  color: #eafaf6;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(78, 207, 184, .28) 0%, transparent 58%),
    linear-gradient(155deg, #0b3b34 0%, #07241f 78%);
  box-shadow: 0 2px 4px rgba(7, 36, 31, .18), 0 22px 44px -28px rgba(7, 36, 31, .9);
}
.sidhuvud > div { min-width: 0; }
.sidhuvud .marke {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: rgba(234, 250, 246, .08);
  border: 1px solid rgba(234, 250, 246, .16);
  padding: 5px;
}
.sidhuvud .huvud { margin: 0; }
.sidhuvud h1 { color: #fff; margin: 0; }
.sidhuvud h1::before { display: none; }       /* bandet är markören här */
.sidhuvud .lead { color: #a9d8cd; margin: 4px 0 0; }
.sidhuvud .beta {
  background: rgba(234, 250, 246, .10);
  border-color: rgba(234, 250, 246, .38);
  color: #bff0e5;
}
.sidhuvud .utlogg {
  margin-left: auto; flex: none; align-self: flex-start;
  font-size: 13px; color: #a9d8cd; text-decoration: none;
  border: 1px solid rgba(234, 250, 246, .22); border-radius: 999px;
  padding: 7px 14px; white-space: nowrap;
}
.sidhuvud .utlogg:hover { color: #eafaf6; border-color: rgba(234, 250, 246, .5); }

@media (max-width: 640px) {
  .sidhuvud { padding: 16px; gap: 12px; border-radius: 14px; }
  .sidhuvud .marke { width: 36px; height: 36px; }
  .sidhuvud .utlogg { padding: 6px 11px; }
}