/* street.css: gatan, minitornet, Kim på trottoaren, tavlan i entrén, övergången till
   papperet och avslutet på skärmen.
   Laddas efter base.css och paper.css och utan media-attribut: .street* och .tavla*
   syns aldrig på papperet (.street är no-print), och .outro* skrivs bara inom
   @media screen, så att print.css ensam bestämmer avslutet i PDF:en.

   GATAN
   Blå timme ovanför trottoaren. Hela tornet står på avstånd, i samma proportioner
   som det stora (år × skala × 0,76 × bredden), och Kim står bredvid det. Scenen
   (.street-scene, [data-lift-end]) har minitornets fot som nederkant och ryms i
   skärmhöjden minus 32 px i de uppmätta formaten, så att hela tornet, Kim och
   tavlan syns där hissfärden stannar.

   Gatans höjd är innehållets, inte 100svh: på 820 × 1180 hade en skärmhöjd lagt
   ungefär 600 px till en sida som redan är nära 7000 px, bara för att visa himmel.

   TÄNDNINGEN
   js/street.js sätter .mini--armed vid start, om minitornets fot ligger under
   skärmen, och .mini--lit när foten kommer i bild. Sluttillståndet är klassen:
   under .mini--lit är --lit 1 på varje våning och mörkläggningen 0, oavsett
   timers och bildrutor; ändliga animationer ritar bara vägen dit, nerifrån och upp,
   sist den streckade sjätte våningen, och Kim vänder sig. Paus (html.paused) håller
   dem där de står och Fortsätt låter dem gå klart. Grundstilen (utan JS, reducerad
   rörelse, före start) är tänd. */

/* ---------------------------------------------------------------- mått */
.street {
  /* Minitornets bredd. Hela tornet är 13,64 × bredden högt: 546 px vid 40 px.
     Smalare på låg skärm och bredare på stor skärm, se nedan. */
  --mini-w: 40px;
  /* Kims pixel: figuren är 16 × 22 enheter. */
  --street-kim-u: 2px;
  /* Tändningen: första våningen, avståndet mellan våningarna, varje stegs längd. */
  --street-t0: 250ms;
  --street-step: 170ms;
  --street-dur: 160ms;
}
@media (max-height: 700px) and (orientation: portrait) {
  .street { --mini-w: 32px; }
}
/* Låg liggande skärm (till exempel 960 × 540 eller 800 × 500): 40 px ger en scen på
   546 px, högre än skärmen. Minitornet smalnar då av så att hela tornet står i bild
   där färden stannar, på samma sätt som på liggande telefon nedan. Från cirka 586 px
   höjd gäller 40 px igen. */
@media (max-height: 600px) and (orientation: landscape) {
  .street { --mini-w: min(40px, (100vh - 40px) / 13.64); }
}
/* Liggande telefon: tavlan är högre än skärmen, så scenen kan inte rymmas. Minitornet
   görs då så smalt att hela tornet, från foten till den streckade sjätte våningen,
   står i bild där färden stannar (foten 16 px ovanför skärmens underkant). */
@media (max-height: 480px) {
  .street { --mini-w: min(32px, (100vh - 40px) / 13.64); }
}

/* ---------------------------------------------------------------- gatan */
.street {
  position: relative;
  color: var(--fg-1);
  padding: 36px 0 0;
  /* Blå timme: mörkt överst mot marken, ljusare mot horisonten vid trottoaren. */
  background: linear-gradient(to bottom, oklch(21% 0.05 274), oklch(30% 0.07 266) 45%, oklch(44% 0.08 250));
  --street-focus: oklch(88% 0.1 80);
}
@supports (background-image: linear-gradient(in oklab, oklch(50% 0.1 250), oklch(60% 0.1 80))) {
  .street { background: linear-gradient(in oklab to bottom, oklch(21% 0.05 274), oklch(30% 0.07 266) 45%, oklch(44% 0.08 250)); }
}
.street :focus-visible { outline-color: var(--street-focus); }

/* Omslaget är en container precis som tornets, så att samma kolumner (fasad,
   måttstock, luft, skyltar) räknas ut på bred skärm och gatan linjerar med tornet. */
.street-in {
  container-type: inline-size;
  max-width: calc(var(--wrap-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Mobil: minitornet i en smal kolumn längs vänsterkanten (där tornet stod),
   rubriken och tavlan bredvid, Kim på trottoaren vid tornets fot. Tavlan slutar
   en Kim-längd ovanför foten: där färden stannar ligger Paus-knappen nere till
   höger, och den får bara täcka himmel. */
.street-scene {
  display: grid;
  grid-template-columns: var(--mini-w) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto calc(22 * var(--street-kim-u));
  column-gap: 16px;
  align-items: end;
}
.street-h {
  grid-column: 2;
  grid-row: 2;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- minitornet */
.mini {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: end;
  position: relative;
  width: var(--mini-w);
  /* Stilla: fasadernas småanimationer står still på avstånd. */
  --play: paused;
}
.mini svg { display: block; width: 100%; overflow: hidden; }
.mini-next { height: calc(0.24 * var(--mini-w)); }
.mini-top  { height: calc(0.1 * var(--mini-w)); }
.mini-fl:not(.mini-top) { height: calc(var(--mini-y) * var(--mini-s, 1) * 0.76 * var(--mini-w)); }
/* Hela pixlar där webbläsaren kan avrunda: annars syns sömmar mellan släckta våningar. */
@supports (height: round(1.5px, 1px)) {
  .mini-next { height: round(calc(0.24 * var(--mini-w)), 1px); }
  .mini-top  { height: round(calc(0.1 * var(--mini-w)), 1px); }
  .mini-fl:not(.mini-top) { height: round(calc(var(--mini-y) * var(--mini-s, 1) * 0.76 * var(--mini-w)), 1px); }
}

/* Våningens släckta ljus: en täckande rect ovanpå fasaden. Den följer --lit, samma
   krok som nyckelfönstret i symbolen, och samma två pixelsteg. */
.mini-dark {
  fill: oklch(15% 0.04 272);
  opacity: calc(0.8 * (1 - var(--lit, 1)));
  transition: opacity var(--lit-dur, 0s) steps(2, end) var(--lit-delay, 0s);
}
/* Foten: en pixel hög, längst ned. street.js tänder när den är i bild. */
.mini-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.mini--lit .mini-fl { --lit: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mini--armed:not(.mini--lit) .mini-fl { --lit: 0; }
  .mini--armed:not(.mini--lit) .mini-next { opacity: 0; }
  /* Vägen dit är ändliga animationer, inte transitioner, så att Paus kan hålla dem
     (nedan). --lit animeras på våningen och ärvs av mörkläggningen och av
     nyckelfönstret i symbolen; step-end ger samma två pixelsteg som kontraktets
     steps(2, end): 0, 0,5 och sedan klassens 1. Bara bakåtfyllnad: när animationen
     är slut gäller klassen. --lit-dur sätts aldrig i minitornet, så inget tonar. */
  .mini--armed.mini--lit .mini-fl {
    animation: mini-ignite var(--street-dur) step-end calc(var(--street-t0) + var(--mini-i) * var(--street-step)) backwards;
  }
  .mini--armed.mini--lit .mini-next {
    animation: mini-next var(--street-dur) steps(2, end) calc(var(--street-t0) + 6 * var(--street-step)) backwards;
  }
}
@keyframes mini-ignite { 0% { --lit: 0; } 50% { --lit: 0.5; } 100% { --lit: 1; } }
@keyframes mini-next { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- Kim
   Grundstilen är slutposen: framifrån, blicken uppåt mot tornet. Medan tornet
   väntar på att tändas står han med ryggen mot besökaren; när det är tänt vänder
   han sig (profil, framifrån) och tittar upp. Vändningen är en ändlig animation
   som bara fyller bakåt, så att grundstilen tar vid när den är slut. */
.street-kim {
  grid-column: 2;
  grid-row: 4;
  justify-self: start;
  align-self: end;
  display: block;
  width: calc(16 * var(--street-kim-u));
  height: calc(22 * var(--street-kim-u));
  /* Fötterna på trottoarkanten: viewBox har en enhet luft under skorna. */
  margin-bottom: calc(-1 * var(--street-kim-u));
  overflow: visible;
}
.street-kim-back,
.street-kim-side,
.street-kim-front { opacity: 0; }
.street-kim-eyes {
  animation: street-kim-blink 5.2s steps(1) infinite;
  animation-play-state: var(--play, paused);
}
@keyframes street-kim-blink {
  0%, 93%, 97%, 100% { opacity: 1; }
  94%, 96% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .mini--armed:not(.mini--lit) ~ .street-kim .street-kim-back { opacity: 1; }
  .mini--armed:not(.mini--lit) ~ .street-kim .street-kim-up { opacity: 0; }
  .mini--armed.mini--lit ~ .street-kim g[class^="street-kim-"]:not(.street-kim-eyes) {
    /* Efter den sjätte våningen; allt är på plats 2,6 s efter att foten syntes. */
    animation-duration: 1s;
    animation-timing-function: step-end;
    animation-fill-mode: backwards;
    animation-delay: calc(var(--street-t0) + 7 * var(--street-step) + 150ms);
  }
  .mini--armed.mini--lit ~ .street-kim .street-kim-back  { animation-name: street-kim-back; }
  .mini--armed.mini--lit ~ .street-kim .street-kim-side  { animation-name: street-kim-side; }
  .mini--armed.mini--lit ~ .street-kim .street-kim-front { animation-name: street-kim-front; }
  .mini--armed.mini--lit ~ .street-kim .street-kim-up    { animation-name: street-kim-up; }
  /* Paus (html.paused, js/tower.js) håller tändningen och vändningen där de står,
     också mitt i ett steg; Fortsätt låter dem gå klart. Utan html.paused (också
     om tower.js aldrig körts) går de som vanligt. */
  html.paused .mini--armed.mini--lit :is(.mini-fl, .mini-next),
  html.paused .mini--armed.mini--lit ~ .street-kim g[class^="street-kim-"]:not(.street-kim-eyes) {
    animation-play-state: paused;
  }
}
@keyframes street-kim-back  { 0% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
@keyframes street-kim-side  { 0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes street-kim-front { 0% { opacity: 0; } 40% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes street-kim-up    { 0% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }

/* ---------------------------------------------------------------- tavlan
   En trapphustavla: varm brun filt med räfflor för bokstäverna, en ram av ek och
   vita tryckbokstäver. Allt i Public Sans, som på en riktig tavla där siffror och
   namn är samma bokstäver; årtalen med jämnbreda siffror. */
.tavla {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  width: 100%;
  max-width: 400px;
  margin-bottom: 14px;
  scroll-margin-top: 72px;
  --tavla-felt: oklch(33% 0.045 48);
  --tavla-groove: oklch(29.5% 0.04 46);
  --tavla-ink: oklch(95% 0.012 85);
  --tavla-dim: oklch(83% 0.03 75);
  --tavla-quiet: oklch(74% 0.03 70);
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, var(--tavla-groove) 3px 4px),
    var(--tavla-felt);
  border: 6px solid oklch(56% 0.075 62);
  box-shadow: inset 0 0 0 1px oklch(40% 0.06 55), 0 2px 0 oklch(18% 0.04 270 / 0.5);
  padding: 8px 10px 4px;
  color: var(--tavla-ink);
  font-family: var(--font-sans);
}
.tavla:focus-visible { outline: 2px solid var(--street-focus); outline-offset: 3px; }
.tavla-h {
  font: 700 11.5px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tavla-ink);
  padding: 4px 0 9px;
  margin: 0;
  max-width: none;
}
.tavla-rows { list-style: none; margin: 0; padding: 0; }
.tavla-row { border-top: 1px solid oklch(40% 0.045 50); }
/* Raderna är minst 44 px höga så att de går att träffa med fingret. */
.tavla-row > a,
.tavla-row[aria-hidden="true"] {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 4px 4px;
  font: 600 12px/1.3 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tavla-ink);
  text-decoration: none;
}
.tavla-lv,
.tavla-yr {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--tavla-dim);
}
.tavla-yr { font-weight: 500; }
.tavla-row > a:hover .tavla-n,
.tavla-row > a:focus-visible .tavla-n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tavla-row > a:focus-visible { outline-offset: -2px; }
.tavla-row--pillar .tavla-n {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--tavla-quiet);
}
/* Sjätte våningen: beteckningen står, men namnet och åren saknas. Där namnet hade
   suttit är filten tom inom en streckad kontur, samma kontur som den sjätte våningen
   överst i tornet, på minitornet och vid avslutet. Meningen om att den inte är byggd
   står bara i avslutet. */
.tavla-row--empty .tavla-yr { display: none; }
.tavla-row--empty .tavla-n {
  grid-column: 2 / 4;
  align-self: center;
  height: 15px;
  border: 1px dashed var(--tavla-quiet);
  border-radius: 1px;
}

/* Mus och styrplatta: tätare rader, som på en riktig tavla. Pekskärm: 44 px. */
@media (hover: hover) and (pointer: fine) {
  .tavla-row > a,
  .tavla-row[aria-hidden="true"] { min-height: 36px; }
}
@media (any-pointer: coarse) {
  .tavla-row > a,
  .tavla-row[aria-hidden="true"] { min-height: 44px; }
}

/* ---------------------------------------------------------------- trottoaren
   Kantsten, plattor och sedan papperet: gatan går över i CV:ts papperspalett. */
.street-walk {
  height: 28px;
  background:
    linear-gradient(to bottom, var(--paper-line) 0 3px, transparent 3px 15px, var(--paper-rule) 15px 19px, var(--paper-bg) 19px),
    repeating-linear-gradient(to right, var(--paper-chip) 0 39px, var(--paper-line) 39px 40px);
}

/* ---------------------------------------------------------------- bred skärm
   Samma kolumner som tornet: minitornet och Kim där fasaden stod, rubriken och
   tavlan i skyltkolumnen. Tavlan slutar 56 px ovanför foten, så att Paus-knappen
   nere till höger aldrig täcker en rad när färden har stannat. */
@media (min-width: 700px), (orientation: landscape) and (min-width: 560px) {
  .street { padding-top: 40px; --street-kim-u: 3px; }
  .street-scene {
    grid-template-columns: var(--tower-w) var(--ruler-w) var(--gap) var(--sign-w);
    grid-template-rows: 1fr auto auto;
    justify-content: center;
    column-gap: 0;
  }
  .mini { justify-self: center; }
  .street-kim {
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: center;
    /* Bredvid tornets fot: 18 px luft mellan fasaden och Kim. */
    translate: calc(var(--mini-w) / 2 + 18px + 8 * var(--street-kim-u)) 0;
  }
  .street-h { grid-column: 4; font-size: 28px; }
  .tavla { grid-column: 4; margin-bottom: 56px; }
  .tavla-row > a,
  .tavla-row[aria-hidden="true"] { grid-template-columns: 48px minmax(0, 1fr) auto; font-size: 12.5px; }
}
/* Liggande telefon: Kim i mobilens pixelstorlek, i proportion till det smalare tornet. */
@media (max-height: 480px) {
  .street { --street-kim-u: 2px; }
}
/* Bred skärm: minitornet växer med skärmhöjden, så att finalen fyller vyn där färden
   stannar i stället för att stå liten i ett mörkt fält (högst 60 px brett, och scenen
   ryms alltid i skärmhöjden minus 32 px). Inte på surfplatta, där sidhöjdsbudgeten
   gäller (HANDOFF.md). */
@media (min-width: 1200px) and (min-height: 700px) {
  .street { --mini-w: clamp(40px, (100vh - 120px) / 13.64, 60px); }
}

/* Kontrastteman: minitornet och Kim är bilder och behåller sina färger. Tavlan
   följer temat; filten och räfflorna (bakgrundsbilder) försvinner, ramen och
   radernas linjer står kvar. */
@media (forced-colors: active) {
  .mini,
  .street-kim { forced-color-adjust: none; }
}

/* ---------------------------------------------------------------- avslutet
   Bara på skärmen: papperet får print.css:s avslut. */
@media screen {
  /* Den streckade sjätte våningen står på avslutets linje, samma kontur som
     överst i tornet och på gatan: det som inte är byggt än. */
  .outro-in { position: relative; }
  .outro-in::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 64px;
    height: 16px;
    translate: 0 -100%;
    border: 2px dashed var(--paper-line);
    border-bottom: 0;
  }
  .outro-mail { text-decoration-thickness: 1px; }
  .outro-mail:hover { text-decoration-thickness: 2px; }
  .outro-mail:focus-visible { outline-color: var(--paper-accent); }
}