/* =============================================================================
   OSA-sidan. Laddas efter site.css och bara på /osa.

   Inget nytt formspråk uppfinns här. Papperet, hårlinjerna, typsnitten och
   knappen kommer från site.css och därmed från kortet. Fälten är hårlinjer i
   stället för rutor, precis som valvet och delaren på startsidan.

   -----------------------------------------------------------------------------
   KONTRAST. En enda ny färg tillkommer, felfärgen. scripts/kontrast.mjs läser
   bara :root i site.css, så den här raden är räknad för hand med samma formel
   (WCAG 2.1 relativ luminans) och ska räknas om om färgen ändras.

   Färg                    Används till                        Mot        Kvot   Krav
   #8F3A4A  --fel          felmeddelanden, felrutans hårlinje  #F7F4EF    6.66   4.5  OK  (token definierad i site.css :root)

   Hårlinjen under fälten är --salvia-text (3.98:1) och räknas av
   scripts/kontrast.mjs tillsammans med resten.

   Övriga färger på sidan är site.css tokens och står redovisade där.
   ============================================================================= */


/* ---------- 1. Tokens ------------------------------------------------------- */

/* Inga egna tokens. --spalt (läsbar radlängd) och --fel (felfärgen) bor båda
   i site.css :root. --spalt låg här förut, men startsidans notis och
   textsidorna använder samma mått, och ett mått som gäller tre sidor hör
   hemma på ett ställe. */


/* hidden får aldrig förlora mot en display-regel längre ned */
[hidden] { display: none !important; }


/* ---------- 2. Sidhuvudet på sidan ------------------------------------------ */

.osa {
  padding: clamp(30px, 6vw, 66px) var(--mat) clamp(56px, 9vw, 104px);
}

.osa__huvud {
  max-width: var(--spalt);
  margin: 0 auto;
  text-align: center;
}

/* Samma mått som .sida__rubrik i site.css. OSA är en undersida bland de andra
   och ska inte ha en större rubrik än Dagen eller Boende. */
.osa__rubrik {
  font-family: var(--serif);
  font-size: var(--f-rubrik);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.04em;
  padding-left: 0.04em;      /* optisk centrering, samma knep som kortet */
  color: var(--black);
}

/* Typografin kommer från .ingress i site.css, som elementet också bär.
   Här ligger bara det som är sidans eget: smalare mått och centrerat. */
.osa__ingress {
  max-width: 30rem;
  margin: 0 auto;
}

.osa__noscript,
.osa__laddar {
  max-width: var(--spalt);
  margin: clamp(28px, 5vw, 40px) auto 0;
}

.osa__noscript {
  border: 1px solid var(--salvia-linje);
  padding: clamp(16px, 3vw, 20px);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sekundar);
}

.osa__laddar {
  font-family: var(--serif);
  font-size: clamp(20px, 18px + 0.6vw, 24px);
  font-style: italic;
  font-weight: 400;
  color: var(--text-sekundar);
  text-align: center;
}


/* ---------- 3. Beskedsrutan -------------------------------------------------
   Samma ruta bär både "du missade ett fält" och "det gick inte att skicka".
   Rubriken sätts av javascriptet. Den tar emot fokus när ett skick misslyckas,
   och listan länkar vidare till fältet som behöver rättas. */

.besked {
  max-width: var(--spalt);
  margin: clamp(28px, 5vw, 40px) auto 0;
  border: 1px solid var(--fel);
  padding: clamp(18px, 4vw, 24px);
}

.besked__rubrik {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-size: clamp(22px, 20px + 0.5vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--black);
}

.besked__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.besked__lista li {
  margin-top: 0.55rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--black);
}

.besked__lista a {
  color: var(--fel);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.besked__lista a:hover { color: var(--black); }


/* ---------- 4. Formuläret ---------------------------------------------------- */

/* Kravraden ovanför formuläret. En stjärna vid varje obligatoriskt fält säger
   ingenting för den som inte redan vet vad stjärnan betyder. En mening gör det,
   och den behöver bara stå en gång. */
.osa__krav {
  max-width: var(--spalt);
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sekundar);
}

.formular {
  max-width: var(--spalt);
  margin: clamp(34px, 6vw, 56px) auto 0;
}

/* Kravraden står först i formuläret, så att den försvinner med det när
   kvittot visas. Första fältet efter den får mindre luft ovanför sig. */
.osa__krav + .falt { margin-top: clamp(18px, 3vw, 24px); }

.falt {
  margin-top: clamp(26px, 4vw, 34px);
}

.formular > .falt:first-child { margin-top: 0; }

/* fieldset bär sin egen ram och sitt eget innermått som ska bort */
.falt--grupp {
  border: 0;
  padding: 0;
  min-width: 0;
}

.falt__etikett {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-sekundar);
}

/* legend har eget sidoinnermått i alla webbläsare */
legend.falt__etikett { padding: 0; }

.falt__hjalp {
  margin-bottom: 0.6rem;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-sekundar);
}

.falt__fel {
  margin-top: 0.5rem;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fel);
}

/* I en grupp står felet ovanför alternativen, inte under dem. */
.falt--grupp .falt__fel {
  margin-top: 0;
  margin-bottom: 0.55rem;
}

.falt__in {
  display: block;
  width: 100%;
  min-height: 44px;
  appearance: none;
  background: transparent;
  border: 0;
  /* Hårlinjen är fältets enda synliga kant och därmed en gränssnittskomponent:
     WCAG 1.4.11 kräver 3:1. --salvia-linje ger 2.04:1 och räcker inte.
     --salvia-text ger 3.98:1. Den ljusa hårlinjen är kvar som ren dekor. */
  border-bottom: 1px solid var(--salvia-text);
  border-radius: 0;
  padding: 0.6rem 0.1rem;
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--f-brod);
  font-weight: 300;
  line-height: 1.6;
}

.falt__in--lang {
  min-height: 0;
  resize: vertical;
}

.falt__in:hover { border-bottom-color: var(--lavendel-djup); }

/* Färgen är aldrig ensam bärare: varje fel har också en mening i klartext och
   aria-invalid på kontrollen. */
.falt--fel .falt__in {
  border-bottom-width: 2px;
  border-bottom-color: var(--fel);
}

.falt--grupp.falt--fel {
  border-left: 2px solid var(--fel);
  padding-left: clamp(12px, 3vw, 18px);
}

/* Hela raden är klickbar och minst 44px hög. */
.val {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.3rem 0;
  cursor: pointer;
}

.val__ruta {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--lavendel-djup);
  cursor: pointer;
}

.val__text {
  font-size: var(--f-brod);
  font-weight: 300;
  line-height: 1.5;
}

/* Följdfrågorna som bara gäller den som kommer. Hårlinjen visar att de hänger
   ihop med ja-svaret. Utan javascript står de öppna hela tiden. */
.ja-bara {
  margin-top: clamp(26px, 4vw, 34px);
  border-left: 1px solid var(--salvia-linje);
  padding-left: clamp(16px, 4vw, 26px);
}

.ja-bara > .falt:first-child { margin-top: 0; }

.falt--under { margin-top: clamp(16px, 3vw, 22px); }

/* Honungsfällan. Aldrig synlig, aldrig i tabbordningen, ska vara tom.
   display:none, inte position:absolute utanför skärmen: lösenordshanterare
   och autofyll hoppar över det som inte renderas men fyller gärna i det som
   bara ligger utanför skärmen. En robot som läser HTML ser fältet ändå. */
.honung { display: none; }

/* Två upplysningsrader under formuläret: en om toastmastern, en om vad som
   händer med svaret. Integritetssidan är borttagen, det som gästerna behöver
   veta ryms i den andra meningen. */
.osa__toastmaster,
.osa__spara {
  margin-top: clamp(28px, 4vw, 36px);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-sekundar);
}

.osa__spara { margin-top: clamp(14px, 2vw, 18px); }

/* Boenderutan är ren information, inget fält. Brödtext, inte hjälprad. */
.falt__text {
  font-size: var(--f-brod);
  line-height: 1.7;
  color: var(--black);
}

/* Hjälpraden står här sist i rutan i stället för först, alltså luft ovanför. */
.falt__hjalp--efter { margin: clamp(12px, 2vw, 16px) 0 0; }

/* .rum bor i site.css: samma rad står på startsidan under Boende. */
.klart__rum { margin-top: clamp(20px, 3vw, 26px); }

.osa__skicka { margin-top: clamp(22px, 3vw, 28px); }


/* ---------- 5. Knappar -------------------------------------------------------
   .knapp bor i site.css och är skriven för en länk. Det här är bara det som en
   riktig button behöver utöver den. */

button.knapp {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
}

button.knapp[disabled] {
  background: var(--text-sekundar);
  cursor: default;
}

/* Två klasser, inte en: button.knapp ovanför är starkare än en ensam
   .knapp--stilla och skulle annars äta upp ramen. */
.knapp.knapp--stilla {
  background: transparent;
  border: 1px solid var(--salvia-text);   /* 3:1 för komponentgränser, se .meny-knapp */
  color: var(--text-sekundar);
  padding: 1rem 1.5rem 1rem calc(1.5rem + 0.26em);   /* 45px hög träffyta */
}

.knapp.knapp--stilla:hover {
  background: transparent;
  border-color: var(--lavendel-djup);
  color: var(--black);
}


/* ---------- 6. Kvittot ------------------------------------------------------- */

.klart {
  max-width: var(--spalt);
  margin: clamp(34px, 6vw, 56px) auto 0;
}

.klart__rubrik {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 24px + 1.2vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--black);
  text-align: center;
}

.klart__lista {
  margin: clamp(26px, 4vw, 34px) 0 0;
  border-top: 1px solid var(--salvia-linje);
}

.klart__rad {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--salvia-linje);
}

.klart__lista dt {
  margin-bottom: 0.15rem;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-sekundar);
}

.klart__lista dd {
  margin: 0;
  color: var(--black);
  line-height: 1.6;
}

.lank {
  margin-top: clamp(28px, 5vw, 40px);
  border: 1px solid var(--salvia-linje);
  padding: clamp(18px, 4vw, 26px);
  text-align: center;
}

.lank__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sekundar);
}

.lank__adress {
  margin-top: 0.9rem;
  font-size: 15px;
  line-height: 1.7;
  word-break: break-all;
}

.lank__knapp { margin-top: 1.1rem; }

/* Höjden är reserverad så att raden inte knuffar sidan när kvittot dyker upp. */
.lank__kvitto {
  margin-top: 0.7rem;
  min-height: 1.5em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-sekundar);
}

.lank__post {
  margin-top: 0.6rem;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sekundar);
}


/* ---------- 7. Utskrift ------------------------------------------------------ */

@media print {
  .osa__skicka, .lank__knapp { display: none !important; }
}