/* ==========================================================================
   Veckokollen – stilmall
   Palett: papper, ark, bläck (petrol), hav (skärgård), saffran, lingon
   Typografi: Fraunces (display) + Archivo (gränssnitt)
   ========================================================================== */

:root {
  --papper: #E9EBE4;
  --ark: #FAFBF7;
  --ink: #18292D;
  --ink-mjuk: #5C6E71;
  --hav: #2C5F68;
  --hav-djup: #1F4A52;
  --saffran: #E39B2F;
  --lingon: #B33F4E;
  --linje: #DCE0D5;
  --halvlinje: #EAEEE3;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --timme: 56px;
  --timmar: 16;
  --dag-start: 360;
  --tidskolumn: 68px;
  --radie-innehall: 14px;

  --mjuk: cubic-bezier(0.22, 1, 0.36, 1);
  --fjader: cubic-bezier(0.34, 1.5, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background-color: var(--papper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sida {
  max-width: 1460px;
  margin: 0 auto;
  min-height: 100vh;
  padding: clamp(18px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 34px);
}

/* ---------- Grundläggande typografi ---------- */

h1, h2, h3, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--saffran);
  outline-offset: 3px;
  border-radius: 4px;
}

.hoppa-till {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 50;
  background: var(--ink);
  color: var(--ark);
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
}
.hoppa-till:focus {
  left: 12px;
}

/* ---------- Masthead ---------- */

.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.mast-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mark {
  width: 42px;
  height: 42px;
  fill: var(--hav);
  flex: none;
}
.mark .mark-dag { fill: var(--saffran); }

.mast-namn {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.mast-dag {
  margin-top: 3px;
  color: var(--ink-mjuk);
  font-size: 0.92rem;
}

.mast-atgarder {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Knappar (piller = handling) ---------- */

.knapp {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition:
    transform 0.22s var(--fjader),
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease;
}
.knapp:hover { transform: translateY(-1px); }
.knapp:active { transform: translateY(0) scale(0.97); }

.knapp--primar {
  background: var(--hav);
  color: #F6F8F2;
  box-shadow: 0 10px 24px -14px rgba(31, 74, 82, 0.85);
}
.knapp--primar:hover {
  background: var(--hav-djup);
  box-shadow: 0 16px 30px -14px rgba(31, 74, 82, 0.9);
}

.knapp--tyst {
  background: transparent;
  border-color: var(--linje);
  color: var(--ink);
}
.knapp--tyst:hover {
  border-color: var(--hav);
  background: rgba(44, 95, 104, 0.07);
}

.knapp--fara {
  background: transparent;
  color: var(--lingon);
  border-color: transparent;
  margin-right: auto;
}
.knapp--fara:hover { background: rgba(179, 63, 78, 0.09); }

.ikonknapp {
  border: none;
  background: transparent;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink-mjuk);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--fjader);
}
.ikonknapp:hover {
  background: rgba(24, 41, 45, 0.07);
  color: var(--ink);
}
.ikonknapp svg { width: 20px; height: 20px; }

.pil {
  width: 46px;
  height: 46px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--hav);
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s var(--fjader),
    box-shadow 0.25s ease;
}
.pil svg { width: 22px; height: 22px; }
.pil:hover {
  background: var(--hav);
  border-color: var(--hav);
  color: var(--ark);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -12px rgba(31, 74, 82, 0.8);
}
.pil:active { transform: scale(0.94); }

/* ---------- Veckorubrik (veckotalet är hjälten) ---------- */

.vecko-rubrik {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
}

.vecko-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 26px);
}

.vecko-tal-wrap { text-align: left; }

.vecko-etikett {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--hav);
  margin-bottom: 2px;
}

.vecko-tal {
  font-family: var(--display);
  font-size: clamp(4.8rem, 12.5vw, 9.2rem);
  font-weight: 600;
  line-height: 0.82;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.06em;
  display: inline-block;
  min-width: 2ch;
}

.vecko-meta {
  max-width: 46ch;
  padding-bottom: 6px;
}

.vecko-spann {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.vecko-hjalp {
  margin-top: 10px;
  color: var(--ink-mjuk);
  font-size: 0.92rem;
}

/* ---------- Arkivet: veckans schema ---------- */

.vecko-ark {
  background: var(--ark);
  border: 1px solid var(--linje);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 60px -46px rgba(24, 41, 45, 0.5);
}

.vecko-scroll {
  overflow: auto;
  max-height: clamp(380px, 60vh, 780px);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.week-grid {
  display: grid;
  grid-template-columns: var(--tidskolumn) repeat(7, minmax(152px, 1fr));
  position: relative;
  min-width: 100%;
}

.corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 6;
  background: var(--ark);
  border-bottom: 1px solid var(--linje);
}

.day-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ark);
  border-bottom: 1px solid var(--linje);
  border-left: 1px solid var(--linje);
  padding: 12px 14px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.dh-namn {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-mjuk);
}

.dh-nummer {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.day-head.ar-idag .dh-nummer {
  background: var(--saffran);
  color: var(--ink);
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.dh-etikett {
  margin-left: auto;
  font-family: var(--display);
  font-style: italic;
  color: var(--hav);
  font-size: 0.88rem;
}

.day-head.ar-helg .dh-namn { color: var(--hav); }

.hours {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--ark);
  border-right: 1px solid var(--linje);
  height: calc(var(--timmar) * var(--timme));
}

.tim {
  position: absolute;
  right: 12px;
  transform: translateY(-50%);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink-mjuk);
  font-variant-numeric: tabular-nums;
}

.day-col {
  position: relative;
  border-left: 1px solid var(--linje);
  height: calc(var(--timmar) * var(--timme));
  background-image:
    repeating-linear-gradient(to bottom, var(--linje) 0 1px, transparent 1px var(--timme)),
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--timme) / 2),
      var(--halvlinje) calc(var(--timme) / 2) calc(var(--timme) / 2 + 1px),
      transparent calc(var(--timme) / 2 + 1px) var(--timme));
  transition: background-color 0.35s ease;
}

.day-col.ar-helg { background-color: rgba(44, 95, 104, 0.045); }
.day-col.ar-idag { background-color: rgba(227, 155, 47, 0.07); }

.day-col:hover { background-color: rgba(44, 95, 104, 0.03); }
.day-col.ar-idag:hover { background-color: rgba(227, 155, 47, 0.1); }

/* ---------- Händelser ---------- */

.event {
  position: absolute;
  top: calc(var(--top) * var(--timme) / 60);
  height: calc(var(--hojd) * var(--timme) / 60);
  left: calc(var(--bana) * 100% / var(--banor) + 4px);
  width: calc(100% / var(--banor) - 9px);
  min-height: 24px;
  border: none;
  border-left: 3px solid var(--kat);
  border-radius: var(--radie-innehall);
  background: color-mix(in srgb, var(--kat) 14%, var(--ark));
  color: var(--ink);
  padding: 5px 8px;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 1px 2px rgba(24, 41, 45, 0.06);
  transition:
    transform 0.25s var(--mjuk),
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.event:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -10px rgba(24, 41, 45, 0.35);
  background: color-mix(in srgb, var(--kat) 17%, var(--ark));
}
.event:active { transform: translateY(0) scale(0.985); }

.e-tid {
  font-size: 0.72rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--kat) 82%, var(--ink));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.e-titel {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.event.kompakt {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding-top: 0;
  padding-bottom: 0;
}
.event.kompakt .e-titel {
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

/* ---------- Nu-linjen ---------- */

.nu-linje {
  position: absolute;
  left: -1px;
  right: 0;
  top: calc((var(--nu) - var(--dag-start)) * var(--timme) / 60);
  border-top: 2px solid var(--lingon);
  z-index: 2;
  pointer-events: none;
  transition: top 0.7s var(--mjuk);
}
.nu-linje::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lingon);
}

.vecko-tom {
  position: absolute;
  left: var(--tidskolumn);
  right: 0;
  top: 190px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ink-mjuk);
  pointer-events: none;
}

/* ---------- Modal ---------- */

.modal {
  border: none;
  border-radius: 24px;
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  background: var(--ark);
  color: var(--ink);
  box-shadow: 0 50px 90px -30px rgba(24, 41, 45, 0.55);
  overflow: visible;
}

.modal::backdrop {
  background: rgba(24, 41, 45, 0.34);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.modal[open] { animation: modal-in 0.5s var(--fjader) both; }
.modal[open]::backdrop { animation: bakgrund-in 0.35s ease both; }
.modal.stanger { animation: modal-ut 0.22s ease-in both; pointer-events: none; }
.modal.stanger::backdrop { animation: bakgrund-ut 0.22s ease-in both; }

.modal-innehall {
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-rubrik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-titel {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.falt { display: flex; flex-direction: column; gap: 6px; }

.falt-etikett {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-mjuk);
}

.falt-in {
  font: inherit;
  color: var(--ink);
  background: #F4F6F0;
  border: 1px solid var(--linje);
  border-radius: 12px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.falt-in:hover { border-color: #C6CDBE; }
.falt-in:focus {
  outline: none;
  border-color: var(--hav);
  background: #FFF;
  box-shadow: 0 0 0 3px rgba(44, 95, 104, 0.18);
}
.falt-in:focus-visible { outline: none; }

textarea.falt-in { resize: vertical; min-height: 56px; }

select.falt-in {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5' fill='none' stroke='%232C5F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}

.falt-rada {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
}

.felfel {
  margin: 0;
  color: var(--lingon);
  font-size: 0.82rem;
  font-weight: 600;
}

.modal-fot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.modal-fot-hoger {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: #F4F6F0;
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 26px 50px -18px rgba(24, 41, 45, 0.6);
}
.toast[hidden] { display: none; }
.toast.syns { animation: toast-in 0.5s var(--fjader) both; }
.toast.gar { animation: toast-ut 0.28s ease-in both; }

.toast-anga {
  border: none;
  background: transparent;
  color: var(--saffran);
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 999px;
}
.toast-anga:hover { text-decoration: underline; }

/* ---------- Fot ---------- */

.fot {
  display: flex;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
  color: var(--ink-mjuk);
  font-size: 0.85rem;
  padding-bottom: 8px;
}
.fot-text { max-width: 44ch; }
.fot-tangenter { max-width: 62ch; }

/* ---------- Rörelse ---------- */

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes h-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tal-nasta {
  from {
    opacity: 0;
    transform: translateY(0.32em);
    filter: blur(9px);
  }
}
@keyframes tal-forra {
  from {
    opacity: 0;
    transform: translateY(-0.32em);
    filter: blur(9px);
  }
}

@keyframes kolumn-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--riktning) * 30px));
    filter: blur(3px);
  }
}
@keyframes kolumn-ut {
  to {
    opacity: 0;
    transform: translateX(calc(var(--riktning) * -18px));
    filter: blur(2px);
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
}
@keyframes modal-ut {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}
@keyframes bakgrund-in {
  from { opacity: 0; }
}
@keyframes bakgrund-ut {
  to { opacity: 0; }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 22px) scale(0.94);
  }
}
@keyframes toast-ut {
  to {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
  }
}

/* Orchestrerad entré vid sidladdning */
body:not(.klar) .mast,
body:not(.klar) .vecko-rubrik,
body:not(.klar) .vecko-ark,
body:not(.klar) .fot {
  opacity: 0;
}
body.klar .mast { animation: entra 0.7s var(--mjuk) both; }
body.klar .vecko-rubrik { animation: entra 0.7s var(--mjuk) 0.1s both; }
body.klar .vecko-ark { animation: entra 0.8s var(--mjuk) 0.2s both; }
body.klar .fot { animation: entra 0.7s var(--mjuk) 0.32s both; }

.vecko-tal.skift-nasta { animation: tal-nasta 0.6s var(--mjuk); }
.vecko-tal.skift-forra { animation: tal-forra 0.6s var(--mjuk); }

.week-grid.byter .day-head,
.week-grid.byter .day-col {
  animation: kolumn-in 0.55s var(--mjuk) backwards;
  animation-delay: calc(var(--i) * 45ms);
}
.week-grid.far .day-head,
.week-grid.far .day-col {
  animation: kolumn-ut 0.18s ease-in forwards;
  animation-delay: calc(var(--i) * 12ms);
}

.event {
  animation: h-in 0.5s var(--fjader) backwards;
  animation-delay: calc(var(--i) * 28ms + 260ms);
}
.week-grid.byter .event {
  animation-delay: calc(var(--i) * 22ms + 120ms);
}

/* ---------- Anpassning ---------- */

@media (max-width: 900px) {
  .vecko-meta { max-width: 100%; }
  .fot { flex-direction: column; }
}

@media (max-width: 640px) {
  :root { --tidskolumn: 54px; }
  .mast-atgarder { width: 100%; }
  .mast-atgarder .knapp { flex: 1; }
  .vecko-nav { width: 100%; justify-content: space-between; }
  .vecko-hjalp { display: none; }
  .modal-innehall { padding: 20px 18px; }
  .falt-rada { grid-template-columns: 1fr 1fr; }
  .falt-rada .falt:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}