/* tower.css: tornet. En <li> per våning med fasad, måttstock och skylt, en
   himmel bakom varje våning och marken under grunden.

   SKALAN
   Våningshöjd = år × skala × px/år, och ingenting annat. Skylten ligger i en
   ram (.rail) ovanpå eller bredvid fasaden och påverkar aldrig höjden.
     --years   våningens längd i år (style-attributet, samma som data-years)
     --scale   1 från 2013, 0,5 före (grunden och pelarvåningen, se måttstocken)
     --ppy     px per år = --f × fasadens bredd (--f = 0,76)
     --tower-w fasadens bredd. Mobil: omslagets bredd (högst 480 px) minus
               måttstocken. Bred: 36 % av min(vw, vh), mellan 240 och 480 px,
               dock aldrig mer än det som blir över bredvid skyltkolumnen. Att
               det är min(vw, vh) håller liggande telefon och iPad nere; 240 px
               är det minsta där NU-skylten ryms i sin våning.
   Eftersom px/år är en fast andel av fasadbredden har varje våning samma
   proportioner i alla format (Solenergi 1,52 × bredden, Advania 4,94 ×,
   Lexicon 0,38 ×), så fasaderna kan ritas en gång med fast viewBox. --f är
   den minsta andel där NU-skylten ryms under nyckelfönstret på 360 px.

   MOBIL (stående under 700 px): fasad + måttstock i en kolumn, skylten ovanpå
   dem, klistrad (sticky) i sin våning. NU-våningen har sitt nyckelfönster
   överst och skylten under det, så att första vyn visar Kims fönster.
   BRED (från 700 px, liggande från 560 px): fasad, måttstock, luft, skyltkolumn. Skylten står bredvid sin våning
   och följer med medan våningen passerar; nästa våning knuffar ut den vid
   bjälklaget. Ingen tredje kolumn: det finns inget för den att bära. */

/* ---------------------------------------------------------------- rastret */
:root {
  --f: 0.76;                      /* px/år per px fasadbredd */
  --stick: 8px;                   /* skyltens avstånd till skärmens överkant */
  /* Omslagets innerbredd. cqi mäter .head/.tower-wrap själva; reserven för
     webbläsare utan containerenheter räknar på fönstret. */
  --cq: min(100vw - 2 * var(--gutter), var(--wrap-max));
  --tower-w: calc(var(--cq) - var(--ruler-w));
  --ppy: calc(var(--f) * var(--tower-w));
  /* NU-våningens nyckelfönster: överst i våningen, 34 % av bredden högt. */
  --key-h: calc(0.34 * var(--tower-w));
}
@supports (width: 1cqi) {
  :root { --cq: 100cqi; }
}
@media (min-width: 700px), (orientation: landscape) and (min-width: 560px) {
  :root {
    --gutter: 24px;
    --wrap-max: 1040px;
    --ruler-w: 40px;
    /* Skylten stannar i ögonhöjd, inte uppe vid kanten: bredvid en lång
       våning står den mitt i blickfältet medan fasaden passerar. */
    --stick: clamp(24px, 16vh, 150px);
    --cq: min(100vw - 2 * var(--gutter) - 16px, var(--wrap-max));
    --gap: clamp(20px, 0.04 * var(--cq), 48px);
    --tower-w: min(var(--cq) - var(--ruler-w) - var(--gap) - 300px, clamp(240px, 0.36 * min(100vw, 100vh), 480px));
    --sign-w: min(400px, var(--cq) - var(--ruler-w) - var(--gap) - var(--tower-w));
  }
}
@media (min-width: 700px), (orientation: landscape) and (min-width: 560px) {
  @supports (width: 1cqi) {
    :root { --cq: 100cqi; }
  }
}

/* isolation: himlens ::before (z-index -1) målas inom omslaget, ovanför
   sidans bakgrund, i stället för att hamna bakom <body>. */
.tower-wrap {
  container-type: inline-size;
  isolation: isolate;
  max-width: calc(var(--wrap-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------------------------------------------------------------- himlen
   Varje våning och taket målar sin egen bit av himlen som ett fullbrett
   ::before, från sitt bjälklag till nästa. Stoppen möts vid bjälklagen, så
   himlen blir en obruten gradient från eftermiddag till natt utan JS. Äldre
   Safari utan interpolation i oklab får samma stopp i sRGB. */
.roof,
.floor { position: relative; }
.roof::before,
.floor::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background: linear-gradient(to bottom, var(--sky-a), var(--sky-b));
}
@supports (background-image: linear-gradient(in oklab, oklch(50% 0.1 250), oklch(60% 0.1 80))) {
  .roof::before,
  .floor::before { background: linear-gradient(in oklab to bottom, var(--sky-a), var(--sky-b)); }
}
/* Varje våning har sin bit av himlen och sin epokfärg (--era: skyltens kant, och på
   papperet rutan framför posten). Fasaderna har sina egna färger i symbolerna. */
.roof                   { --sky-a: var(--sky-1); --sky-b: var(--sky-2); }
.floor[data-era="sol"]  { --sky-a: var(--sky-2); --sky-b: var(--sky-3); --era: oklch(58% 0.19 60); }
.floor[data-era="adv"]  { --sky-a: var(--sky-3); --sky-b: var(--sky-4); --era: oklch(52% 0.10 232); }
.floor[data-era="lex"]  { --sky-a: var(--sky-4); --sky-b: var(--sky-5); --era: oklch(62% 0.11 88); }
.floor[data-era="ki"]   { --sky-a: var(--sky-5); --sky-b: var(--sky-6); --era: oklch(52% 0.12 32); }
.floor[data-era="gap"]  { --sky-a: var(--sky-6); --sky-b: var(--sky-7); --era: oklch(60% 0.01 80); }
.floor[data-era="esa"]  { --sky-a: var(--sky-7); --sky-b: var(--sky-8); --era: oklch(45% 0.10 28); }

/* Symbolerna ligger i en osynlig sprite längst ned i dokumentet. Originalen där
   målas aldrig men skulle annars ärva --play från html.js och animeras i onödan;
   bara kopiorna i <use> rör sig. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; --play: paused; }

/* ---------------------------------------------------------------- taket
   Den streckade sjätte våningen och takfoten, i fasadens kolumn. */
.roof {
  display: grid;
  grid-template-columns: var(--tower-w) var(--ruler-w) var(--gap) var(--sign-w);
  justify-content: center;
}
.roof svg { display: block; grid-column: 1; width: 100%; }
.roof-next { height: calc(0.24 * var(--tower-w)); }
.roof-top  { height: calc(0.1 * var(--tower-w)); }

/* ---------------------------------------------------------------- våningarna */
.tower {
  list-style: none;
  margin: 0;
  padding: 0;
}
.floor--half { --scale: 0.5; }
.floor {
  --floor-h: calc(var(--years) * var(--scale, 1) * var(--ppy));
  display: grid;
  grid-template-columns: var(--tower-w) var(--ruler-w) var(--gap) var(--sign-w);
  /* Raden är exakt våningens höjd. "auto" är ett skyddsnät för format som inte
     är uppmätta (smalare än 360 px, trånga liggande skärmar): hellre en något
     högre våning än en skylt som hänger ut över nästa. I de uppmätta formaten
     ryms varje skylt, och test/layout.test.js kräver att höjden följer åren. */
  grid-template-rows: minmax(var(--floor-h), auto);
  justify-content: center;
}
/* Fasaden fyller sin rutnätscell men påverkar inte radens höjd. (Absolut
   placerad i rutnätet: slutlinjen måste anges, annars går den till kanten.) */
.facade {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Bjälklaget (fasadens överkant) är ritat i symbolerna. */
}

/* Ramen: lika hög som våningen. Skylten klistras i den, så att den står kvar
   medan våningen passerar och knuffas ut av nästa bjälklag. På mobil ligger
   ramen ovanpå fasaden och måttstocken, med 8 px luft mot bjälklagen. */
.rail {
  grid-column: 1 / 3;
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: 10px 6px 8px;
}
.floor--now .rail { margin-top: var(--key-h); padding-top: 8px; }

/* ---------------------------------------------------------------- skylten
   Ett ljust papperskort i CV:ts palett. I DOM:en kommer rubriken först och
   årtalen efter, så att den som hoppar mellan rubriker hör namnet och sedan
   åren; i bild står årtalen överst (order), som ett ögonbryn. */
.sign {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--stick);
  background: var(--paper-bg);
  color: var(--paper-ink);
  border: 1px solid var(--era, var(--paper-line));
  border-radius: var(--radius-1);
  padding: 10px 12px 11px;
  box-shadow: 0 1px 0 oklch(30% 0.02 70 / 0.25);
}
.sign-meta {
  order: -1;
  font: 600 10.5px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--paper-muted);
  margin: 0 0 4px;
  max-width: none;
}
.sign-name {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--paper-ink);
}
.sign-place { font-weight: 600; color: var(--paper-muted); }
.sign-role { font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--paper-body); margin-top: 1px; }
.sign-body { font-size: 14px; line-height: 1.45; color: var(--paper-body); margin-top: 5px; max-width: 58ch; }
/* Den personliga raden: första person, sparsamt och dämpat. */
.sign-own {
  font-size: 13px;
  line-height: 1.45;
  color: var(--paper-muted);
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--paper-rule);
  max-width: none;
}
.sign .tags { gap: 4px; margin-top: 8px; }
.sign .tags li { font-size: 10.5px; padding: 3px 5px; }

/* Kompakt skylt: en tunn våning (Lexicon, ett halvår). Beteckning, namn och
   roll på en rad, sedan den personliga raden. Rollen står utan skiljetecken:
   när raden bryts hamnar den ensam på nästa rad, och en rad som börjar med en
   punkt läses som ett fel. Brödtexten och chipsen finns kvar för skärmläsare men döljs i bild:
   samma fakta står under Utbildning & cert, och chipsen upprepar brödtexten
   ordagrant. */
.floor--compact .rail { padding-block: 5px; }
.floor--compact .sign { flex-flow: row wrap; align-items: baseline; column-gap: 8px; padding: 6px 10px 7px; }
.floor--compact .sign-meta { margin: 0; }
.floor--compact .sign-name { font-size: 14.5px; }
.floor--compact .sign-role { font-size: 12.5px; }
.floor--compact .sign-own { flex-basis: 100%; font-size: 12.5px; line-height: 1.35; margin-top: 3px; padding-top: 0; border-top: 0; }
.floor--compact .sign-body,
.floor--compact .tags {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pelarvåningen: bara pelare och en liten skylt, som också säger att
   måttstocken går i halv skala härifrån och ned. */
.pillar-sign {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  position: sticky;
  top: var(--stick);
  z-index: 1;
  margin: 10px 6px;
  padding: 5px 8px;
  font: 600 10.5px/1.45 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--paper-muted);
  background: var(--paper-bg);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-1);
}
.pillar-scale { display: block; font-weight: 400; }

/* ---------------------------------------------------------------- måttstocken
   En pappersremsa längs fasadens högerkant: ett streck per år räknat från
   våningens golv (--at är antal år över golvet), ett längre streck och
   startåret vid varje bjälklag, "nu" överst. Strecken följer våningarnas år,
   inte kalendern: våningarna står tätt på varandra (summan är 22,0 år mot
   ungefär 22,7 kalenderår), och månaderna mellan två jobb ritas inte ut. Före
   2013 är skalan halv och remsan streckad. */
.ruler {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  --rule-paper: oklch(94% 0.015 85);
  --rule-ink: oklch(28% 0.02 70);
}
.ruler::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 9px;
  background: var(--rule-paper);
  border-right: 1px solid var(--rule-ink);
}
.floor--half .ruler::before {
  background: repeating-linear-gradient(to bottom, var(--rule-paper) 0 5px, oklch(74% 0.02 80) 5px 8px);
}
/* Årsstrecken: över remsan och en bit ut. */
.ruler i {
  position: absolute;
  left: 0;
  bottom: calc(var(--at) / var(--years) * 100%);
  width: 13px;
  height: 1px;
  background: var(--rule-ink);
}
/* Bjälklaget: ett längre, tjockare streck vid våningens golv. */
.ruler::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--rule-ink);
}
.floor--now .ruler { box-shadow: inset 0 2px 0 var(--rule-ink); }
.ruler-y {
  --ruler-y-x: 11px;
  position: absolute;
  bottom: 4px;
  left: var(--ruler-y-x);
  /* Förstorad text (som Androids textstorlek) gör etiketten bredare än platsen till
     höger om remsan. Då flyttas den in över fasaden i stället för att spilla ut
     förbi sidans kant; i vanlig storlek står den kvar (translate 0). */
  translate: min(0px, var(--ruler-w) + var(--gutter) - var(--ruler-y-x) - 2px - 100%) 0;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--rule-ink);
  background: var(--rule-paper);
  padding: 2px 2px 1px;
}
.ruler-y--top { bottom: auto; top: 5px; }
/* Prologen: ESA (2004–2009) är ingen anställning. En måttkedja bredvid remsan, ett
   tunt streck med ändstreck som på en ritning, spänner över våningen och säger
   "prolog" på mitten. Våningen är natt, så strecket är ljust och dämpat. */
.ruler-prolog {
  position: absolute;
  top: 10px;
  bottom: 24px;
  left: 16px;
  width: 7px;
  border: solid oklch(94% 0.015 85 / 0.55);
  border-width: 1px 1px 1px 0;
}
.ruler-prolog > span {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.5px);
  translate: -50% -50%;
  rotate: 180deg;
  writing-mode: vertical-rl;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--rule-ink);
  background: var(--rule-paper);
  padding: 4px 2px;
}

/* ---------------------------------------------------------------- marken */
.ground {
  position: relative;
  height: 44px;
  background: var(--ground);
  border-top: 2px solid oklch(46% 0.05 98);
}
.ground::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 5px;
  background: var(--path);
}

/* ---------------------------------------------------------------- bred skärm
   Skylten flyttar ut ur fasaden till skyltkolumnen och står bredvid sin våning
   hela vägen från tak till golv. NU-skylten börjar i våningens topp, bredvid
   nyckelfönstret. */
@media (min-width: 700px), (orientation: landscape) and (min-width: 560px) {
  .rail { grid-column: 4; padding: 14px 0 12px; }
  .floor--now .rail { margin-top: 0; padding-top: 14px; }
  .floor--compact .rail { padding-block: 6px; }
  .sign { padding: 14px 16px 15px; }
  .sign-name { font-size: 19px; }
  .sign-body { font-size: 14.5px; line-height: 1.5; }
  .sign .tags li { font-size: 11px; padding: 4px 7px; }
  .floor--compact .sign { padding: 8px 14px 9px; }
  .floor--compact .sign-name { font-size: 16px; }
  .floor--compact .sign-role { font-size: 13px; }
  .floor--compact .sign-own { font-size: 13px; }
  .pillar-sign { grid-column: 4; margin: 14px 0; font-size: 11px; letter-spacing: 0.04em; }
  .ruler-y { --ruler-y-x: 13px; }
}
/* Liggande telefon (lägre än 520 px): tätare skyltar, samma mått som huvudet
   (base.css). På 640 × 360 och 667 × 375 är skyltkolumnen bara 300 px bred, och
   NU-skylten hade annars inte fått plats i sina två år utan att trycka upp våningen. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .rail,
  .floor--now .rail { padding: 10px 0 8px; }
  .sign { padding: 10px 12px 11px; }
  .sign-name { font-size: 17px; }
  .sign-body { font-size: 13.5px; line-height: 1.45; }
  .sign-own { font-size: 12.5px; }
  .sign .tags li { font-size: 10.5px; padding: 3px 5px; }
}

/* Kontrastteman (forced-colors): fasaderna, taket och måttstocken är bilder och
   behåller sina egna färger. Annars målas måttstockens remsa och årsstreck (som är
   bakgrundsfärger) i temats bakgrund och försvinner. Skyltarna följer temat. */
@media (forced-colors: active) {
  .facade,
  .roof svg,
  .ruler { forced-color-adjust: none; }
}