/* Investerarytorna: datarummet, statussidan och säkerhetssidan.
   ============================================================================

   Läser bara tokens.css. Ingen färg och ingen storlek är skriven som ett råvärde
   här, så mörkt läge kommer gratis och en ändring i paletten når de här sidorna
   utan att någon öppnar filen.

   Två saker att veta innan något ändras.

   Content-Security-Policy är default-src 'none' med style-src 'self'. Det
   stänger style-attributet helt, alltså också en bredd som JavaScript räknar ut
   och skriver på elementet. Varje bredd och varje fördröjning nedan väljs därför
   på ett dataattribut som klienten sätter, och stegen finns utskrivna som
   färdiga regler. Det är avsiktligt längre än en beräkning och det är priset för
   att policyn får stå kvar orörd.

   Saknas-kolumnen på statussidan har samma bredd, samma typsnitt och samma
   storlek som talen. Det är sidans hela poäng: den som läser en självmätning kan
   inte se vad som utelämnades, om bortfallet ligger i en fotnot. Gör inte
   .sif-kol--saknas mindre. */

/* --- block och källrader --------------------------------------------------- */

.blk { border-top: var(--rule-w) solid var(--rule); padding-block: var(--s-6); }
.blk:first-child { border-top: 0; }
.blk--head { border-top: 0; padding-block: 0; }

.blk__src {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Nivån är det som skiljer ett registerfaktum från en slutsats, och den ska
   kunna läsas utan att raden läses. Ochra markering, aldrig en bock. */
.blk__niva {
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  color: var(--mark);
  white-space: nowrap;
}

.blk__kalla { color: var(--ink-muted); }

/* --- tabeller -------------------------------------------------------------- */

/* Skrinet, inte tabellen, är det som rullar. En tabell med overflow på sig
   själv tappar sin rubrikrad ur skärmläsarens tabellmodell i flera motorer. */
.tabellskrin {
  margin-top: var(--s-5);
  overflow-x: auto;
  border-top: 2px solid var(--ink);
}

.tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}

.tabell__cap {
  padding-block: var(--s-3);
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
}

.tabell thead th {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: var(--rule-w) solid var(--rule-strong);
  font-size: 0.76rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.tabell tbody th,
.tabell tbody td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: var(--rule-w) solid var(--rule);
  vertical-align: top;
  color: var(--ink-secondary);
}

.tabell tbody th {
  font-weight: var(--w-strong);
  color: var(--ink);
  min-width: 12rem;
}

.tabell code {
  font-size: 0.86em;
  color: var(--ink);
  word-break: break-word;
}

.tabell--luckor tbody th { min-width: 14rem; }

/* Belägg eller påstående. Skillnaden mellan något en investerare kan slå upp
   själv och något som kräver vårt ord, och den ska synas på en meters håll. */
.belagg {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: var(--w-strong);
  white-space: nowrap;
}
.belagg--ja { color: var(--accent); }
.belagg--nej { color: var(--error); }

/* --- datarummet ------------------------------------------------------------ */

.dr { margin-top: var(--s-5); }

.dr-h3 {
  margin-top: var(--s-5);
  font-family: var(--f-display);
  font-size: 1.24rem;
  font-weight: var(--w-display);
}

.dr-brod {
  margin-top: var(--s-3);
  max-width: 46rem;
  line-height: 1.65;
  color: var(--ink-secondary);
}

.dr-not {
  margin-top: var(--s-3);
  max-width: 46rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.dr-noscript, .sif-noscript {
  margin-top: var(--s-4);
  max-width: 46rem;
  padding-left: var(--s-4);
  border-left: 2px solid var(--mark);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

.dr-form { margin-top: var(--s-5); max-width: 32rem; }

.dr-form__rad { display: grid; gap: var(--s-3); }

@media (min-width: 30rem) {
  .dr-form__rad { grid-template-columns: 1fr auto; align-items: end; }
}

.dr-form--sekretess { display: grid; gap: var(--s-4); }
.dr-form--sekretess .btn { justify-self: start; }

.dr-kryss { display: flex; gap: var(--s-3); align-items: flex-start; }
.dr-kryss input { margin-top: 0.3rem; width: 1rem; height: 1rem; flex: none; }
.dr-kryss__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.dr-status { margin-top: var(--s-4); font-size: 0.9rem; color: var(--ink-secondary); }
.dr-status:empty { margin-top: 0; }
.dr-status[data-ton='fel'] { color: var(--error); }

.dr-namn { line-height: 1.4; }
.dr-tal { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Hela hashen står utskriven. En avkortad kontrollsumma går inte att jämföra
   med en fil, och då är kolumnen dekoration. */
.dr-hash code {
  display: inline-block;
  max-width: 22rem;
  font-size: 0.74rem;
  line-height: 1.4;
  word-break: break-all;
  color: var(--ink-muted);
}

.dr-lank {
  font-weight: var(--w-strong);
  color: var(--accent);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.dr-lank:hover { color: var(--accent-hover); }

/* Låst rad. Ochra och inte grå: en avstängd länk som ser bortglömd ut läser som
   ett fel i sidan, och den här är ett beslut. */
.dr-last {
  font-size: 0.82rem;
  font-weight: var(--w-strong);
  color: var(--mark);
  white-space: nowrap;
}

.dr-logg { margin-top: var(--s-6); }
.dr-logg__utrymme { margin-top: var(--s-3); }

.dr-toppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: var(--rule-w) solid var(--rule);
}

.dr-vem {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.dr-h4 {
  margin-top: var(--s-4);
  font-size: 1rem;
  font-weight: var(--w-strong);
}

.dr-atagande {
  margin-top: var(--s-4);
  padding-left: var(--s-4);
  border-left: 2px solid var(--rule-strong);
}

.dr-sekretess { margin-top: var(--s-5); }
.dr-dokument { margin-top: var(--s-6); }

/* --- statussidan ----------------------------------------------------------- */

.sif { margin-top: var(--s-5); }

.sif-vantar, .sif-status {
  font-size: 0.94rem;
  color: var(--ink-muted);
}
.sif-status[data-ton='fel'] { color: var(--error); }
.sif-status__not {
  margin-top: var(--s-2);
  max-width: 40rem;
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.sif-tid {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.sif-matare { margin-top: var(--s-4); max-width: 44rem; }

.sif-matare__text {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.sif-matare__spar {
  margin-top: var(--s-3);
  height: 0.5rem;
  background: var(--surface-sunk);
  border: var(--rule-w) solid var(--rule);
}

.sif-matare__fyll { height: 100%; background: var(--accent); }

.sif-matare__src {
  margin-top: var(--s-2);
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* Tjänstens egen förklaring av vad den räknat. Satt som brödtext och inte som
   finstilt: det är den enda meningen på sidan som säger under vilken regel
   talen togs fram. */
.sif-om {
  margin-top: var(--s-4);
  max-width: 44rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

/* Bredden i steg om fem procent. Klienten avrundar dit och sätter data-fyll.
   En procentsats med en decimal på en stapel som är åtta pixlar hög påstår en
   precision ögat ändå inte kan läsa. */
.sif-matare__fyll[data-fyll='0'] { width: 0%; }
.sif-matare__fyll[data-fyll='5'] { width: 5%; }
.sif-matare__fyll[data-fyll='10'] { width: 10%; }
.sif-matare__fyll[data-fyll='15'] { width: 15%; }
.sif-matare__fyll[data-fyll='20'] { width: 20%; }
.sif-matare__fyll[data-fyll='25'] { width: 25%; }
.sif-matare__fyll[data-fyll='30'] { width: 30%; }
.sif-matare__fyll[data-fyll='35'] { width: 35%; }
.sif-matare__fyll[data-fyll='40'] { width: 40%; }
.sif-matare__fyll[data-fyll='45'] { width: 45%; }
.sif-matare__fyll[data-fyll='50'] { width: 50%; }
.sif-matare__fyll[data-fyll='55'] { width: 55%; }
.sif-matare__fyll[data-fyll='60'] { width: 60%; }
.sif-matare__fyll[data-fyll='65'] { width: 65%; }
.sif-matare__fyll[data-fyll='70'] { width: 70%; }
.sif-matare__fyll[data-fyll='75'] { width: 75%; }
.sif-matare__fyll[data-fyll='80'] { width: 80%; }
.sif-matare__fyll[data-fyll='85'] { width: 85%; }
.sif-matare__fyll[data-fyll='90'] { width: 90%; }
.sif-matare__fyll[data-fyll='95'] { width: 95%; }
.sif-matare__fyll[data-fyll='100'] { width: 100%; }

.sif-kolumner {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-6);
}

/* Två lika breda kolumner, inte en huvudkolumn och en bikolumn. Ett rutnät med
   2fr och 1fr hade sagt vilken av dem som är den viktiga, och det är fel svar. */
@media (min-width: 54rem) {
  .sif-kolumner { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

.sif-kol { border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.sif-kol--saknas { border-top-color: var(--mark); }

.sif-kol__rubrik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sif-kol__antal { font-variant-numeric: tabular-nums; color: var(--ink); }

.sif-lista { margin-top: var(--s-2); padding: 0; list-style: none; }

.sif-post {
  padding-block: var(--s-4);
  border-top: var(--rule-w) solid var(--rule);
}

.sif-post--tom {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* Talet och ordet Saknas sätts likadant. Det är enda sättet att göra bortfallet
   lika synligt som mätningen utan att skriva en mening om saken. */
.sif-post__varde {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.sif-post--saknas .sif-post__varde { color: var(--mark); }

/* Ett modellerat tal skrivs som "1 240 kr (uppskattat, 1 050 till 1 430 kr)",
   alltså tre gånger så långt. Mindre grad, samma familj och samma vikt, så att
   intervallet läses som värdet och inte som en brasklapp. */
.sif-post__varde--intervall {
  flex-wrap: wrap;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.55rem);
  line-height: 1.25;
}

.sif-post__enhet {
  font-family: var(--f-text);
  font-size: 0.9rem;
  font-weight: var(--w-medium);
  letter-spacing: 0;
  color: var(--ink-muted);
}

.sif-post__namn {
  margin-top: var(--s-2);
  font-size: 0.98rem;
  font-weight: var(--w-strong);
  color: var(--ink);
}

.sif-post__not {
  margin-top: var(--s-2);
  max-width: 34rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-secondary);
}

.sif-post__not--brist { color: var(--error); }

.sif-post__src {
  margin-top: var(--s-3);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --- fokus ----------------------------------------------------------------- */

/* Egen regel i stället för att lita på att någon annan fil träffar de element
   som ritas härifrån. En fokusring som försvinner för att markup byggdes i
   JavaScript är en tangentbordsanvändare som tappar bort sig i en tabell. */
.dr a:focus-visible,
.dr button:focus-visible,
.dr input:focus-visible,
.sif a:focus-visible,
.sif button:focus-visible,
.blk a:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-sm);
}

/* --- stegvis intoning ------------------------------------------------------ */

/* Fördröjningen väljs på data-i, som klienten sätter per rad. Utan
   no-preference finns ingen regel alls, så ingenting kan bli hängande på
   opacity noll om animationen aldrig startar. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes inv-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }

  .dr-rad, .sif-post { animation: inv-in var(--t-slow) var(--ease) both; }

  .dr-rad[data-i='0'], .sif-post[data-i='0'] { animation-delay: 30ms; }
  .dr-rad[data-i='1'], .sif-post[data-i='1'] { animation-delay: 70ms; }
  .dr-rad[data-i='2'], .sif-post[data-i='2'] { animation-delay: 110ms; }
  .dr-rad[data-i='3'], .sif-post[data-i='3'] { animation-delay: 150ms; }
  .dr-rad[data-i='4'], .sif-post[data-i='4'] { animation-delay: 190ms; }
  .dr-rad[data-i='5'], .sif-post[data-i='5'] { animation-delay: 230ms; }
  .dr-rad[data-i='6'], .sif-post[data-i='6'] { animation-delay: 270ms; }
  .dr-rad[data-i='7'], .sif-post[data-i='7'] { animation-delay: 310ms; }
  .dr-rad[data-i='8'], .sif-post[data-i='8'] { animation-delay: 350ms; }
  .dr-rad[data-i='9'], .sif-post[data-i='9'] { animation-delay: 390ms; }
  .dr-rad[data-i='10'], .sif-post[data-i='10'] { animation-delay: 430ms; }
  .dr-rad[data-i='11'], .sif-post[data-i='11'] { animation-delay: 470ms; }
}