/* Formprov D: Chatten, omgång 6. Bara det som är unikt för sidan; allt gemensamt ligger i ../gemensam.css.
   Färgen går som natten på startsidan: heron, stegen och demon i natt, där demon delas på mitten och
   arbetsvyn står i morgonens ljus. Sedan morgon resten av sidan. Två textstorlekar per avsnitt. */

/* Heron: mobilen på nattduksbordet. Skärmen i fotot ligger på 28 till 54 procent av bredden och 62 till 73
   procent av höjden. Rubriken står i det mörka rummet ovanför, och på mobil hålls skärmen i mitten. */
.chatt-hero {
  --fokus-x: .5; --fokus-y: .5;
  --ljus-x: 41%; --ljus-y: 67.5%; --ljus-b: 44%; --ljus-h: 36%; --ljus-farg: rgba(180, 236, 232, .5); --ljus-styrka: .75;
}
/* Toningen ligger bara där texten står: uppe till vänster, och på mobil också längst ned bakom knapparna. */
.chatt-hero::before {
  background:
    linear-gradient(rgba(4, 10, 16, .55), rgba(4, 10, 16, 0) 30%),
    radial-gradient(ellipse 70% 60% at 22% 26%, rgba(4, 10, 16, .55), rgba(4, 10, 16, 0) 70%);
}
.chatt-hero .hero-ingress strong { font-weight: 600; }
/* Rubriken slutar före glaset, som börjar vid 58 procent av bredden. Den längsta raden är cirka 7,3 em. */
@media (min-width: 761px) { .chatt-hero h1 { font-size: clamp(3rem, min(7vw, 9.5vh, (57vw - max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter))) / 7.3), 7.5rem); } }
@media (max-width: 760px) {
  .chatt-hero { --fokus-x: .42; }
  .chatt-hero::before {
    background:
      linear-gradient(rgba(4, 10, 16, .6), rgba(4, 10, 16, .25) 42%, rgba(4, 10, 16, 0) 56%),
      linear-gradient(to top, rgba(4, 10, 16, .82), rgba(4, 10, 16, 0) 22%);
  }
}

/* Hur går det till? Rubriken först, sedan stegen: texten till vänster och en stor telefon till höger. */
.hur { padding-top: var(--luft); }
.hur-huvud h2 { margin-bottom: 14px; }
.hur-huvud p { margin: 0; font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); color: var(--ink-mjuk); }
.hur-lista { list-style: none; margin: 0; padding: 0; }
.hur-steg { display: grid; grid-template-columns: minmax(0, min(40%, 34rem)) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 64px); align-items: center; }
.hur-steg h3 { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.2rem); font-weight: 560; letter-spacing: -.012em; max-width: 16ch; }
.hur-steg .stegvis-text p { margin: 16px 0 0; max-width: 34ch; font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); line-height: 1.5; }
.hur-steg .stegvis-bit { justify-self: center; width: min(100%, 340px); }
/* Utan rörelse: fyra steg under varandra, med telefonen i lugn storlek. */
.hur-lista { display: grid; gap: clamp(48px, 9vh, 96px); padding: clamp(40px, 7vh, 72px) var(--gutter) var(--luft); max-width: var(--max); margin-inline: auto; }
.hur-telefon { width: 100%; }
.hur-telefon .telefon-rad { padding-bottom: 10px; }
.hur-telefon :is(.telefon-roll, .lamna), .skarm-kod b { white-space: nowrap; }

/* Skärmarna. Allt är i em, så att telefonen kan växa. */
.hur-skarm { display: flex; flex-direction: column; gap: .7em; padding: 1em .3em .4em; }
.hur-skarm p { margin: 0; }
.skarm-chatt { justify-content: flex-end; }
.skarm-chatt .ai-not { margin-bottom: auto; }
.skarm-chatt .telefon-falt { margin-top: .4em; }
.skarm-fraga { font-size: 1.08em; font-weight: 650; color: #F3F7F5; }
.skarm-etikett { font-size: .88em; color: rgba(213, 230, 226, .78); margin-top: -.3em !important; }
.skarm-sammanfattning { padding: .8em .9em; border-radius: .85em; background: #13293A; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .3); color: #E3EEEA; }
.skarm-knapp { padding: .75em 1em; border-radius: 999px; background: var(--sken); color: var(--blak); font-weight: 650; text-align: center; }
.skarm-knapp-kant { background: transparent; color: #E3EEEA; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .35); margin-top: auto !important; }
.skarm-val, .skarm-kryss { position: relative; padding: .65em .8em .7em 2.3em; border-radius: .85em; box-shadow: inset 0 0 0 1px rgba(168, 230, 212, .2); font-size: .9em; color: rgba(213, 230, 226, .78); }
.skarm-val b, .skarm-kryss b { display: block; font-size: 1.05em; color: #F3F7F5; }
.skarm-val::before, .skarm-kryss::before { content: ""; position: absolute; left: .85em; top: .85em; width: .95em; height: .95em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(213, 230, 226, .55); }
.skarm-kryss { box-shadow: none; padding-left: 2.3em; }
.skarm-kryss::before { border-radius: .22em; }
.skarm-val.is-vald { box-shadow: inset 0 0 0 1.5px var(--sken); background: rgba(168, 230, 212, .09); }
.skarm-val.is-vald::before { box-shadow: inset 0 0 0 1.5px var(--sken), inset 0 0 0 4px var(--natt-3); background: var(--sken); }
.skarm-klar { gap: .9em; }
.skarm-kort { display: grid; gap: .35em; padding: .8em .9em; border-radius: .85em; background: #13293A; color: #E3EEEA; }
.skarm-kort .skarm-etikett { margin: 0 !important; }
.skarm-bock { display: flex; align-items: center; gap: .45em; font-size: .88em; font-weight: 650; color: var(--sken); }
.skarm-bock::before { content: ""; width: .45em; height: .8em; margin: -.2em .15em 0 .1em; border: solid currentColor; border-width: 0 .14em .14em 0; rotate: 45deg; }
.skarm-klar .skarm-kod { margin-top: auto; }
.skarm-kod { padding: 1em 1.1em; }
.skarm-kod b { font-size: 1.6em; }
.skarm-kod span { font-size: .9em; }

/* Med rörelse: stegen står i samma fasta skärm (gemensam.css, .stegvis-aktiv). Telefonen är lika hög som en
   riktig telefon på skärmen. Den första telefonens ram står kvar, och bara skärmen och klockan tonar över i
   nästa steg, så att det ser ut som en och samma telefon som byter läge. */
.stegvis-aktiv .hur-lista { padding: 0; gap: 0; max-width: none; margin: 0; }
.stegvis-aktiv .stegvis-lager { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) max(var(--gutter), 72px); }
.stegvis-aktiv .hur-steg .stegvis-bit { justify-self: center; width: auto; opacity: 1; }
.stegvis-aktiv .hur-telefon {
  /* Så hög som skärmen tillåter, och texten växer med telefonen, så att raderna får plats även på låga skärmar. */
  width: auto; height: min(100svh - var(--sidhuvud) - 64px, 720px); aspect-ratio: 9 / 18.5; padding: 16px 14px 14px; border-radius: 44px;
  font-size: clamp(13px, (100svh - var(--sidhuvud) - 64px) / 42, 17px); box-shadow: 0 40px 140px -30px rgba(168, 230, 212, .2);
}
.stegvis-aktiv .hur-telefon .telefon-status { font-size: .8em; padding: 2px 16px 10px; }
.stegvis-aktiv .hur-telefon .telefon-rad b { font-size: .9em; }
.stegvis-aktiv .hur-telefon .telefon-roll, .stegvis-aktiv .hur-telefon .lamna { font-size: .76em; }
.stegvis-aktiv .hur-skarm { flex: 1; min-height: 0; }
.stegvis-aktiv .hur-skarm, .stegvis-aktiv .hur-telefon .telefon-status > span:first-child { opacity: var(--bild, 0); }
.stegvis-aktiv .hur-steg + .hur-steg .hur-telefon { background: transparent; border-color: transparent; box-shadow: none; }
.stegvis-aktiv .hur-steg + .hur-steg :is(.telefon-rad, .telefon-batteri) { visibility: hidden; }
/* Koden lyser upp en gång när sista steget kommer fram. */
@keyframes kod-upp { 0% { box-shadow: inset 0 0 0 1.5px var(--sken); } 35% { box-shadow: inset 0 0 0 1.5px var(--sken), 0 0 0 6px rgba(168, 230, 212, .28); } 100% { box-shadow: inset 0 0 0 1.5px var(--sken); } }
.hur-steg.aktiv .skarm-kod { animation: kod-upp 1.8s ease-out; }

@media (max-width: 860px) {
  .hur-steg { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hur-steg .stegvis-bit { justify-self: start; }
  .hur-steg .stegvis-bit { width: min(86vw, 420px); }
  .hur-telefon { font-size: 14px; }
  .stegvis-aktiv .stegvis-lager { padding: calc(var(--sidhuvud) + 40px) var(--gutter) 16px; align-items: flex-start; }
  /* Texterna delar en rad (subgrid), så att telefonen står på samma höjd i alla steg och ramen passar. */
  .stegvis-aktiv .hur-lista { grid-template-rows: auto auto; }
  .stegvis-aktiv .hur-lista > .hur-steg { grid-row: 1 / span 2; grid-template-rows: subgrid; gap: 16px; }
  .stegvis-aktiv .hur-steg .stegvis-text { align-self: end; }
  .stegvis-aktiv .hur-steg .stegvis-bit { justify-self: start; }
  .stegvis-aktiv .hur-steg h3 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2rem); }
  .stegvis-aktiv .hur-steg .stegvis-text p { margin-top: 8px; font-size: 1rem; }
  /* Telefonen är lika hög i alla steg, så att ramen passar varje skärm. */
  .stegvis-aktiv .hur-telefon { width: min(86vw, 420px); height: min(56svh, 480px); aspect-ratio: auto; padding: 12px 10px 10px; border-radius: 30px; font-size: 13.5px; }
  .stegvis-aktiv .hur-telefon .telefon-status { padding-bottom: 6px; }
  /* Stegens fasta skärm lämnar redan luft under telefonen när den släpper, så nästa avsnitt börjar tätare. */
  .hur + .prova { padding-top: 8px; }
}

/* Vad får ni se? Rubriken i natten, sedan demon i full bredd: telefonen på nattens sida och arbetsvyn på
   morgonens, delad på mitten. Telefonen och arbetsvyn står nära mitten, så att ljustråden blir kort. */
.prova { padding-top: var(--luft); }
.prova-huvud h2 { margin-bottom: 14px; }
.prova-huvud p { margin: 0 0 clamp(32px, 5vh, 52px); max-width: 52ch; font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); color: var(--ink-mjuk); }
.demo-stor { --mitt-luft: clamp(32px, 5vw, 96px); }
.demo-stor .demo-person, .demo-stor .demo-personal { padding-block: clamp(32px, 6vh, 64px); }
.demo-stor .telefon { font-size: 15.5px; padding: 16px 14px 14px; border-radius: 40px; }
.demo-stor .telefon-status { font-size: 12.5px; }
.demo-stor .demo-etikett, .demo-stor .demo-kontaktfalt { font-size: 14px; }
.demo-stor legend { font-size: 16.5px; }
.demo-stor .val-rad b { font-size: 15.5px; }
.demo-stor .val-rad span { font-size: 14px; }
.demo-stor .kodruta b { font-size: 21px; }
.demo-stor .kodruta span { font-size: 13.5px; }
.demo-stor .demo-andrad { font-size: 14px; }
.demo-stor .demo-vem { font-size: 1rem; }
.demo-stor .arbetsvy { font-size: 16px; }
.demo-stor .arbetsvy .fonster-list { font-size: 14px; padding: 14px 24px; }
.demo-stor .arbetsvy .fonster-kropp { padding: clamp(18px, 2vw, 28px); }
.demo-stor .arbetsvy :is(.etikett, .markering, .status) { font-size: 13.5px; }
.demo-stor .demo-etikett { color: rgba(213, 230, 226, .82); }
.demo-stor textarea[readonly] { opacity: .85; }
.demo-stor .prova-not { margin: 14px 0 0; }
/* Arbetsvyn och lägesraden står i morgonens ljus. */
.demo-personal, .demo-stor .demo-lage {
  --ink: #10262E; --ink-mjuk: #41585E; --linje: rgba(16, 38, 46, .14); --linje-stark: rgba(16, 38, 46, .34); --fokus: var(--natt);
  color: var(--ink);
}
@media (min-width: 861px) {
  .demo-stor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; background: linear-gradient(90deg, var(--natt) 50%, var(--morgon) 50%); }
  .demo-stor .demo-person { grid-column: 1; grid-row: 1; justify-self: end; width: min(100%, 420px + var(--mitt-luft) + var(--gutter)); padding-right: var(--mitt-luft); padding-left: var(--gutter); }
  /* Arbetsvyn följer med när man scrollar genom telefonen, och lämnar plats åt lägesraden längst ned. */
  .demo-stor .demo-personal { grid-column: 2; grid-row: 1; width: min(100%, 640px + var(--mitt-luft) + var(--gutter)); padding-left: var(--mitt-luft); padding-right: var(--gutter); margin-bottom: 170px; }
  .demo-stor .demo-lage { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; width: min(640px, 100% - var(--mitt-luft) - var(--gutter)); margin: 0 0 clamp(32px, 6vh, 64px) var(--mitt-luft); }
}
@media (max-width: 860px) {
  .demo-stor .demo-person { padding: 0 var(--gutter) 24px; }
  .demo-stor .telefon { max-width: 420px; }
  .demo-stor .demo-lage { margin: 0 var(--gutter); --ink: #E3EEEA; color: #E3EEEA; }
  .demo-stor .demo-personal { background: var(--morgon); padding: 28px var(--gutter) var(--luft); margin-top: 24px; }
}

/* Vad gör chatten inte, och vad får ni? Två lugna spalter i morgonens ljus. */
.tva-spalter { padding: var(--luft) 0; }
.tva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 6vw, 96px); }
.tva h2 { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem); margin-bottom: clamp(18px, 3vh, 26px); }
.tva li { font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); }
@media (max-width: 760px) { .tva { grid-template-columns: minmax(0, 1fr); } }

/* Hur tar ni emot det som delas? Fyra steg längs ljustråden. Tråden går genom stegens punkter, som står i
   början av varje spalt (spalterna är 22 procent breda med 4 procents mellanrum). */
.ta-emot { padding: 0 0 var(--luft); }
.ta-emot h2 { margin-bottom: 14px; }
.ta-emot-ingress { margin: 0 0 clamp(36px, 6vh, 60px); font-size: clamp(1.08rem, 1.02rem + .25vw, 1.2rem); color: var(--ink-mjuk); }
.mottag { position: relative; }
.mottag-trad { display: block; width: 100%; height: 40px; overflow: visible; }
.mottag-trad path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.mottag-steg { list-style: none; margin: -31px 0 0; padding: 0; counter-reset: steg; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 4%; position: relative; }
.mottag-steg li { counter-increment: steg; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.5; }
.mottag-steg li::before {
  content: counter(steg); display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 16px;
  border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 4px var(--morgon); color: var(--vit); font: 650 12px/1 var(--sans);
}
.mottag-steg b { display: block; margin-bottom: 4px; font-family: var(--rubrik); font-weight: 620; }
.mottag-steg span { display: block; color: var(--ink-mjuk); }
.kan-rita .mottag .mottag-steg li::before { transform: scale(0); }
.kan-rita .mottag.ritad .mottag-steg li::before { transform: none; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.kan-rita .mottag.ritad .mottag-steg li:nth-child(1)::before { transition-delay: .25s; }
.kan-rita .mottag.ritad .mottag-steg li:nth-child(2)::before { transition-delay: .6s; }
.kan-rita .mottag.ritad .mottag-steg li:nth-child(3)::before { transition-delay: .95s; }
.kan-rita .mottag.ritad .mottag-steg li:nth-child(4)::before { transition-delay: 1.3s; }
.ta-emot-not { margin: clamp(28px, 5vh, 44px) 0 0; max-width: 60ch; font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); color: var(--ink-mjuk); }
@media (max-width: 860px) {
  /* På mobil går tråden lodrätt längs punkterna. */
  .mottag-trad { display: none; }
  .mottag-steg { margin: 0; grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-left: 34px; }
  .mottag-steg::before { content: ""; position: absolute; left: 10.25px; top: 4px; bottom: 8px; border-left: 1.5px solid var(--trad-morgon); }
  .mottag-steg li { position: relative; }
  .mottag-steg li::before { position: absolute; left: -34px; top: .2em; margin: 0; }
  .kan-rita .mottag .mottag-steg::before { transform: scaleY(0); transform-origin: 50% 0; }
  .kan-rita .mottag.ritad .mottag-steg::before { transform: none; transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
}

/* Vanliga frågor: en tunn linje skiljer dem från stegen ovanför. */
.fragor { padding-top: 0; }
.fragor-ram::before { content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: calc(var(--luft) - clamp(28px, 6vw, 96px)); background: var(--linje-stark); }