/* Designspråket från appen. Färgerna är samma tokens som lib/src/core/theme.
   Typsnitten ligger på egen server — en sida som förklarar att vi inte lämnar
   ut något ska inte börja med att be Google om ett typsnitt.

   Sidan är ljus rakt igenom, medvetet. Appen följer systemets läge, men det
   här är ett anslag: en affisch på anslagstavlan ändrar inte färg för att det
   är kväll. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/typsnitt/FamiljenGrotesk-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/typsnitt/InstrumentSans-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/typsnitt/MartianMono-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --perrong: #edf0f3;
  --vit: #ffffff;
  --natt: #0b1219;
  --text: #0f1922;
  --text-mjuk: #56646f;
  --linje: #d3dae1;
  --raps: #ffc53d;
  --raps-djup: #e0a415;
  --furu: #1f7a5c;
  --vallox: #3d6fd1;
  --sida: 22px;
}

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

body {
  margin: 0;
  background: var(--perrong);
  color: var(--text);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
}

p { margin: 0 0 1em; }
a { color: var(--vallox); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.omslag { max-width: 680px; margin: 0 auto; padding: 0 var(--sida); }

/* Mono-etikett. Används som rubriker på små avdelningar, som i tryck. */
.etikett {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mjuk);
  margin: 0;
}

/* ------------------------------------------------------------ anslaget */

/* Bara toppen — kortformen hade nollat sidmarginalen från .omslag. */
.anslag { padding-top: 40px; }

.linje {
  border: 0;
  border-top: 1px solid var(--text);
  margin: 14px 0;
}
.linje.tunn { border-color: var(--linje); }

.anslag h1 {
  font-size: clamp(2.9rem, 11vw, 4.6rem);
  margin: 26px 0 30px;
}

/* Ortnamnet ligger på rapsgult, som en överstrykning. Det är den enda
   dekoration sidan har, och den pekar på det som saken handlar om. */
.markerad {
  background: var(--raps);
  padding: 0 0.12em 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ingress {
  font-size: clamp(1.08rem, 2.4vw, 1.24rem);
  max-width: 32em;
}
.ingress strong { font-weight: 600; }

/* ------------------------------------------------------------- innehåll */

.punkter { margin: 8px 0 0; }

.punkt {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0 14px;
  padding: 18px 0;
  border-top: 1px solid var(--linje);
  align-items: baseline;
}
.punkt:last-child { border-bottom: 1px solid var(--linje); }

.punkt .nr {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--raps-djup);
  letter-spacing: 0.05em;
}
.punkt h3 { font-size: 1.16rem; }
.punkt p {
  grid-column: 2;
  margin: 4px 0 0;
  color: var(--text-mjuk);
  font-size: 0.96rem;
}

/* ------------------------------------------------------- avgångstavlan */

/* Det enda bildelementet, och det är inte dekoration — det är hur appen
   faktiskt ser ut. */
.tavla {
  background: var(--natt);
  border-radius: 20px;
  padding: 20px 22px;
  margin: 34px 0;
  font-family: "Martian Mono", ui-monospace, monospace;
  color: #91a3b0;
  font-size: 0.78rem;
  overflow-x: auto;
}
.tavla .rad { display: flex; align-items: baseline; gap: 13px; white-space: nowrap; }
.tavla .rad + .rad { margin-top: 13px; padding-top: 13px; border-top: 1px solid #24343f; }
.tavla .min { color: var(--raps); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.tavla .mal {
  color: #eaf0f5;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}
.tavla .rubrikrad {
  color: var(--raps);
  letter-spacing: 0.16em;
  font-size: 0.6rem;
  margin-bottom: 15px;
}

/* -------------------------------------------------------------- löftet */

.loften {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.loften li {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--text);
  border-radius: 100px;
  padding: 7px 13px;
}

/* ----------------------------------------------------------- brödtext */

article h2 {
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  margin: 2.2em 0 0.6em;
}
article h2:first-of-type { margin-top: 0; }
article h3 { font-size: 1.1rem; margin: 1.6em 0 0.3em; }
article ul { padding-left: 1.15em; margin: 0 0 1em; }
article li { margin-bottom: 0.45em; }
article li::marker { color: var(--raps-djup); }

.notis {
  background: var(--vit);
  border-left: 3px solid var(--raps);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 1.6em 0;
}
.notis p:last-child { margin-bottom: 0; }

.uppdaterad {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mjuk);
}

.dokumenttopp { padding: 30px 0 34px; }
.dokumenttopp h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); margin: 20px 0 18px; }

/* ---------------------------------------------------------------- fot */

footer {
  border-top: 1px solid var(--linje);
  margin-top: 56px;
  padding: 30px 0 56px;
  color: var(--text-mjuk);
  font-size: 0.88rem;
}
footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }

.tillbaka { display: inline-block; padding: 26px 0 0; font-size: 0.9rem; }