/* apps.jos.se
   En riktning: naken typografi. Inga kort, inga rutor, inga fyllda ytor.
   Hierarkin bärs av skalkontrast och luft — allt annat är utelämnat med avsikt.
   Lägger du till något här, fråga först om sidan blir sämre utan det. */

:root {
  --paper: #ffffff;
  --ink: #0a0a0a;
  --muted: #767676;
  --rule: #0a0a0a;

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --measure: 54ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0a0a;
    --ink: #f2f2f2;
    --muted: #8c8c8c;
    --rule: #f2f2f2;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(2rem, 7vh, 4rem) 1.75rem 7rem;
}

/* Sidhuvud — så tyst som det går utan att bli obrukbart */

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(3rem, 9vh, 5.5rem);
  font-size: 0.92rem;
}

.top a {
  color: var(--muted);
  text-decoration: none;
}

.top a:hover {
  color: var(--ink);
}

.top .home {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Rubriken är sidans enda gest */

h1 {
  font-size: clamp(3.2rem, 11vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0 0 2.5rem;
  text-wrap: balance;
}

.contact {
  font-size: 1rem;
  margin: 0;
  color: var(--muted);
  max-width: var(--measure);
}

.contact + .contact {
  margin-top: 0.5rem;
}

a {
  color: inherit;
}

.contact a,
.last a,
dd a,
p a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
}

.contact a:hover,
.last a:hover,
dd a:hover,
p a:hover {
  border-bottom-color: var(--muted);
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Den enda linjen på sidan */

.rule {
  border: 0;
  border-top: 1.5px solid var(--rule);
  margin: 3.5rem 0 0;
}

/* Frågor och svar, och allt annat som är rubrik plus stycke */

dl {
  margin: 0;
}

dt {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 2.75rem 0 0.45rem;
  text-wrap: balance;
}

dd {
  margin: 0;
  color: var(--muted);
  max-width: var(--measure);
}

dd + dd {
  margin-top: 0.8rem;
}

/* Listor utan punkter — hängande indrag i stället för en prick */

.plain {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
  max-width: var(--measure);
}

.plain li + li {
  margin-top: 0.8rem;
}

/* Avslutande betoning, ersätter de rutor riktningen inte har */

.last {
  margin: 4.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 50ch;
}

.last b {
  font-weight: 600;
}

.updated {
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Index över appar */

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

.apps li {
  margin-top: 2.75rem;
}

.apps a {
  text-decoration: none;
  color: inherit;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  max-width: var(--measure);
}

/* iOS maskar ikonen först vid visning — PNG:en är fyrkantig, så formen måste
   läggas på här. border-radius duger inte: den ger en cirkelbåge i hörnet, medan
   systemet använder en superellips där krökningen övergår mjukt i den raka kanten.
   Masken nedan är den superellipsen (|x|^5 + |y|^5 = 1), och eftersom masken
   skalas till elementet gäller samma form i alla storlekar.
   border-radius står kvar som reserv för webbläsare utan maskstöd. */
.icon,
.appicon {
  border-radius: 22.4%;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.18);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M100.00%2C50.00L99.98%2C63.69L99.94%2C68.06L99.86%2C71.23L99.75%2C73.81L99.61%2C76.01L99.44%2C77.94L99.24%2C79.68L99.01%2C81.26L98.74%2C82.71L98.44%2C84.05L98.11%2C85.30L97.74%2C86.46L97.35%2C87.55L96.91%2C88.57L96.44%2C89.52L95.94%2C90.43L95.39%2C91.27L94.81%2C92.07L94.19%2C92.82L93.53%2C93.53L92.82%2C94.19L92.07%2C94.81L91.27%2C95.39L90.43%2C95.94L89.52%2C96.44L88.57%2C96.91L87.55%2C97.35L86.46%2C97.74L85.30%2C98.11L84.05%2C98.44L82.71%2C98.74L81.26%2C99.01L79.68%2C99.24L77.94%2C99.44L76.01%2C99.61L73.81%2C99.75L71.23%2C99.86L68.06%2C99.94L63.69%2C99.98L50.00%2C100.00L36.31%2C99.98L31.94%2C99.94L28.77%2C99.86L26.19%2C99.75L23.99%2C99.61L22.06%2C99.44L20.32%2C99.24L18.74%2C99.01L17.29%2C98.74L15.95%2C98.44L14.70%2C98.11L13.54%2C97.74L12.45%2C97.35L11.43%2C96.91L10.48%2C96.44L9.57%2C95.94L8.73%2C95.39L7.93%2C94.81L7.18%2C94.19L6.47%2C93.53L5.81%2C92.82L5.19%2C92.07L4.61%2C91.27L4.06%2C90.43L3.56%2C89.52L3.09%2C88.57L2.65%2C87.55L2.26%2C86.46L1.89%2C85.30L1.56%2C84.05L1.26%2C82.71L0.99%2C81.26L0.76%2C79.68L0.56%2C77.94L0.39%2C76.01L0.25%2C73.81L0.14%2C71.23L0.06%2C68.06L0.02%2C63.69L0.00%2C50.00L0.02%2C36.31L0.06%2C31.94L0.14%2C28.77L0.25%2C26.19L0.39%2C23.99L0.56%2C22.06L0.76%2C20.32L0.99%2C18.74L1.26%2C17.29L1.56%2C15.95L1.89%2C14.70L2.26%2C13.54L2.65%2C12.45L3.09%2C11.43L3.56%2C10.48L4.06%2C9.57L4.61%2C8.73L5.19%2C7.93L5.81%2C7.18L6.47%2C6.47L7.18%2C5.81L7.93%2C5.19L8.73%2C4.61L9.57%2C4.06L10.48%2C3.56L11.43%2C3.09L12.45%2C2.65L13.54%2C2.26L14.70%2C1.89L15.95%2C1.56L17.29%2C1.26L18.74%2C0.99L20.32%2C0.76L22.06%2C0.56L23.99%2C0.39L26.19%2C0.25L28.77%2C0.14L31.94%2C0.06L36.31%2C0.02L50.00%2C0.00L63.69%2C0.02L68.06%2C0.06L71.23%2C0.14L73.81%2C0.25L76.01%2C0.39L77.94%2C0.56L79.68%2C0.76L81.26%2C0.99L82.71%2C1.26L84.05%2C1.56L85.30%2C1.89L86.46%2C2.26L87.55%2C2.65L88.57%2C3.09L89.52%2C3.56L90.43%2C4.06L91.27%2C4.61L92.07%2C5.19L92.82%2C5.81L93.53%2C6.47L94.19%2C7.18L94.81%2C7.93L95.39%2C8.73L95.94%2C9.57L96.44%2C10.48L96.91%2C11.43L97.35%2C12.45L97.74%2C13.54L98.11%2C14.70L98.44%2C15.95L98.74%2C17.29L99.01%2C18.74L99.24%2C20.32L99.44%2C22.06L99.61%2C23.99L99.75%2C26.19L99.86%2C28.77L99.94%2C31.94L99.98%2C36.31Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M100.00%2C50.00L99.98%2C63.69L99.94%2C68.06L99.86%2C71.23L99.75%2C73.81L99.61%2C76.01L99.44%2C77.94L99.24%2C79.68L99.01%2C81.26L98.74%2C82.71L98.44%2C84.05L98.11%2C85.30L97.74%2C86.46L97.35%2C87.55L96.91%2C88.57L96.44%2C89.52L95.94%2C90.43L95.39%2C91.27L94.81%2C92.07L94.19%2C92.82L93.53%2C93.53L92.82%2C94.19L92.07%2C94.81L91.27%2C95.39L90.43%2C95.94L89.52%2C96.44L88.57%2C96.91L87.55%2C97.35L86.46%2C97.74L85.30%2C98.11L84.05%2C98.44L82.71%2C98.74L81.26%2C99.01L79.68%2C99.24L77.94%2C99.44L76.01%2C99.61L73.81%2C99.75L71.23%2C99.86L68.06%2C99.94L63.69%2C99.98L50.00%2C100.00L36.31%2C99.98L31.94%2C99.94L28.77%2C99.86L26.19%2C99.75L23.99%2C99.61L22.06%2C99.44L20.32%2C99.24L18.74%2C99.01L17.29%2C98.74L15.95%2C98.44L14.70%2C98.11L13.54%2C97.74L12.45%2C97.35L11.43%2C96.91L10.48%2C96.44L9.57%2C95.94L8.73%2C95.39L7.93%2C94.81L7.18%2C94.19L6.47%2C93.53L5.81%2C92.82L5.19%2C92.07L4.61%2C91.27L4.06%2C90.43L3.56%2C89.52L3.09%2C88.57L2.65%2C87.55L2.26%2C86.46L1.89%2C85.30L1.56%2C84.05L1.26%2C82.71L0.99%2C81.26L0.76%2C79.68L0.56%2C77.94L0.39%2C76.01L0.25%2C73.81L0.14%2C71.23L0.06%2C68.06L0.02%2C63.69L0.00%2C50.00L0.02%2C36.31L0.06%2C31.94L0.14%2C28.77L0.25%2C26.19L0.39%2C23.99L0.56%2C22.06L0.76%2C20.32L0.99%2C18.74L1.26%2C17.29L1.56%2C15.95L1.89%2C14.70L2.26%2C13.54L2.65%2C12.45L3.09%2C11.43L3.56%2C10.48L4.06%2C9.57L4.61%2C8.73L5.19%2C7.93L5.81%2C7.18L6.47%2C6.47L7.18%2C5.81L7.93%2C5.19L8.73%2C4.61L9.57%2C4.06L10.48%2C3.56L11.43%2C3.09L12.45%2C2.65L13.54%2C2.26L14.70%2C1.89L15.95%2C1.56L17.29%2C1.26L18.74%2C0.99L20.32%2C0.76L22.06%2C0.56L23.99%2C0.39L26.19%2C0.25L28.77%2C0.14L31.94%2C0.06L36.31%2C0.02L50.00%2C0.00L63.69%2C0.02L68.06%2C0.06L71.23%2C0.14L73.81%2C0.25L76.01%2C0.39L77.94%2C0.56L79.68%2C0.76L81.26%2C0.99L82.71%2C1.26L84.05%2C1.56L85.30%2C1.89L86.46%2C2.26L87.55%2C2.65L88.57%2C3.09L89.52%2C3.56L90.43%2C4.06L91.27%2C4.61L92.07%2C5.19L92.82%2C5.81L93.53%2C6.47L94.19%2C7.18L94.81%2C7.93L95.39%2C8.73L95.94%2C9.57L96.44%2C10.48L96.91%2C11.43L97.35%2C12.45L97.74%2C13.54L98.11%2C14.70L98.44%2C15.95L98.74%2C17.29L99.01%2C18.74L99.24%2C20.32L99.44%2C22.06L99.61%2C23.99L99.75%2C26.19L99.86%2C28.77L99.94%2C31.94L99.98%2C36.31Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}

.appicon {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 0 1.75rem;
}

/* Versalhöjden börjar en bit ned i radens höjd, så ett textblock som ligger på
   samma linje som ikonen SER ut att hänga. Den negativa marginalen tar bort
   luften ovanför första raden så att bokstavens överkant möter ikonens. */
.apps .text {
  display: block;
  margin-top: -0.2rem;
}

.apps strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

/* Hela raden är länken, så namnet behöver ingen egen understrykning — den blev
   bara ett tungt streck mitt i uppslaget. Den kommer fram vid hover i stället. */
.apps a:hover strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.apps .text span {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink);
}

/* Fot — samma tysta ton som huvudet */

footer {
  margin-top: 5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.92rem;
}

footer a {
  color: var(--muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--ink);
}

/* Arbetsinstruktion — numrerade steg och punktlistor.
   Bara /apple-konto/ använder det här i dag, men klasserna är generella nog
   att bära nästa instruktion också. Ingen ruta, ingen ifylld yta: siffran och
   indraget gör hierarkin, precis som resten av sajten. */

.overview {
  margin: 0;
  padding: 0 0 0 1.3rem;
  color: var(--muted);
  max-width: var(--measure);
}

.overview li {
  margin-top: 0.35rem;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  margin-top: 3.75rem;
}

.steps > li > h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.15rem;
  text-wrap: balance;
}

.steps > li > h2::before {
  content: "Steg " counter(step);
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.meta {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.label {
  margin: 1.4rem 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.bullets {
  margin: 0;
  padding: 0 0 0 1.3rem;
  color: var(--muted);
  max-width: var(--measure);
}

.bullets li {
  margin-top: 0.45rem;
}

.bullets li:first-child {
  margin-top: 0;
}

.bullets b {
  color: var(--ink);
  font-weight: 600;
}

.done {
  margin: 1.4rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rule);
  max-width: var(--measure);
}

.done b {
  font-weight: 600;
}