/* furnipilot.com, version 9: gsm and computer, one purchase (design/ONTWERP-V9.md §3.6, prototype design/v9-proto/gsm-pc.html).
   Markup src/components/GsmPc.astro, the loop js/v9-gsmpc.js. Loaded after css/v9.css (the devices and the shared app parts
   live there). A laptop with the board of the app and a gsm in front of it, on one --vlak desk; under the stage four bars
   with the step names and the text of the running step; three facts under a hairline.
   On a computer (901px and wider) the stage is as high as the screen allows (--gp-h), so the h2, the playing stage and the
   running step fit on one laptop screen; the devices keep their composition in .gp9-doos (1200 : 620) and scale with --k.
   900px and less: the laptop shows a crop of the board at reading size (two columns on a phone, three or four on a tablet,
   --kn native px wide, --kz set by js/v9-gsmpc.js), the gsm stands at the bottom right, and the running step sits beside it.
   Motion: transform and opacity only (the thread is an SVG line). Every rule is scoped to .gp9. */

.gp9 { padding-block: var(--sectie); background: var(--wit); }
/* the width of the content is the unit of the stage (cqw) */
.gp9 > .v9-wrap { container-type: inline-size; }
/* right after the hub (also white): one section gap between them, not two */
.hb9 + .gp9 { padding-top: 0; }
.gp9-kop { display: grid; gap: 18px; max-width: 760px; }
.gp9-kop > *, .gp9-titel > * { margin: 0; }
.gp9-titel { display: grid; gap: 18px; }
.gp9-kop > p { font-size: var(--t-lead); line-height: 1.6; max-width: 56ch; color: var(--t); }

/* the stage: the desk is as wide as the content, the devices stand centred on it at the height of the screen */
.gp9 { --gp-h: min(clamp(360px, calc(100svh - 372px), 560px), calc(100cqw * 0.5167)); }
.gp9-podium { position: relative; margin-top: clamp(28px, 3vw, 40px); height: var(--gp-h); }
/* the desk the two devices stand on: one cool surface with a hairline, no gradient */
.gp9-podium::before { content: ""; position: absolute; inset: 9% 0 0; border-radius: var(--r4); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); }
.gp9-doos { position: relative; height: 100%; width: calc(var(--gp-h) * 1.9355); max-width: 100%; margin-inline: auto; container-type: inline-size; }
.gp9-pc { position: absolute; right: 4%; top: 0; width: 66%; }
.gp9-gsm { position: absolute; left: 7%; top: 4%; width: 19.5%; z-index: 3; --gsm-rand: 0.7cqw; }
.gp9-label { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 99px; background: #FFFFFF; box-shadow: var(--e2); color: var(--ink); font-size: 0.875rem; font-weight: 500; line-height: 1.3; white-space: nowrap; transition: box-shadow 0.3s, color 0.3s; }
.gp9-label svg { width: 18px; height: 18px; color: var(--b-ink); }
.gp9-label--gsm { left: 6%; bottom: 3%; }
.gp9-label--pc { right: 4%; bottom: 3%; }
.gp9-label.aan { box-shadow: inset 0 0 0 1.5px var(--b), var(--e2); color: var(--b-ink); }
.gp9-draad { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.gp9-draad path { fill: none; stroke: var(--b); stroke-width: 1.6; stroke-dasharray: 3 6; opacity: 0; transition: opacity 0.3s; }
.gp9-draad.aan path { opacity: 0.75; }
.gp9-draad circle { fill: var(--b); opacity: 0; }

/* the steps under the stage: four bars with their names (the current one in ink, its bar fills), and under them the text of
   the running step. Every text sits in the same grid cell, so the row is as high as the longest one and nothing jumps. */
.gp9-stappen { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 28px; }
.gp9-stappen li { display: contents; }
.gp9-stappen b { grid-row: 1; position: relative; display: flex; align-items: center; gap: 8px; padding-top: 14px; color: var(--s); font-weight: 500; font-size: 1rem; line-height: 1.35; transition: color 0.3s; }
.gp9-stappen li:nth-child(2) > b { grid-column: 2; } .gp9-stappen li:nth-child(3) > b { grid-column: 3; } .gp9-stappen li:nth-child(4) > b { grid-column: 4; }
.gp9-stappen b svg { flex: none; width: 18px; height: 18px; color: var(--b-ink); }
.gp9-stappen b::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--lijn); }
.gp9-stappen b::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--b); transform-origin: 0 50%; transform: scaleX(0); }
.gp9-stappen li.af > b::after { transform: scaleX(1); }
.gp9-stappen li.nu > b::after { animation: gp9-vul var(--duur, 3s) linear forwards; }
.gp9[data-rust] .gp9-stappen li.nu > b::after { animation-play-state: paused; }
@keyframes gp9-vul { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gp9-stappen li.nu > b, .gp9-stappen li.af > b { color: var(--ink); }
.gp9-stappen li > span { grid-row: 2; grid-column: 1 / -1; display: block; color: var(--t); font-size: 0.9688rem; line-height: 1.5; text-wrap: pretty; }
/* only a running loop hides the texts of the other steps (site.js sets html.js); without a script every step is listed */
html.js .gp9-stappen li > span { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
html.js .gp9-stappen li.nu > span { opacity: 1; visibility: visible; transition: opacity 0.35s 0.1s, visibility 0s; }
.gp9-stappen em { display: none; }
/* reduced motion (js/v9-gsmpc.js sets .gp9--alle) and a page without a script: every step is listed with its text */
/* (html.js in front: these must outweigh the rule above that hides the texts of a running loop) */
html.js .gp9--alle .gp9-stappen li, html:not(.js) .gp9-stappen li { display: grid; align-content: start; gap: 8px; }
html.js .gp9--alle .gp9-stappen li > b, html.js .gp9--alle .gp9-stappen li > span, html:not(.js) .gp9-stappen li > b, html:not(.js) .gp9-stappen li > span { grid-row: auto; grid-column: auto; opacity: 1; visibility: visible; transition: none; }
html.js .gp9--alle .gp9-stappen li > span, html:not(.js) .gp9-stappen li > span { color: var(--s); }
html:not(.js) .gp9-stappen li > b { color: var(--ink); }

.gp9-feiten { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lijn); }
.gp9-feiten li { text-wrap: pretty; padding: 22px 28px 0 0; font-size: 0.9688rem; line-height: 1.55; color: var(--t); }
.gp9-feiten li + li { padding-left: 28px; border-left: 1px solid var(--lijn); }
.gp9-feiten b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.gp9-meer { margin: 28px 0 0; }

/* ------------------------------------------------------------------ app parts of this scene (native px, scaled with --k) */
/* the AI suggestions on the gsm (as in the app: Leverancier, Soort, Model, Kleur, each with its certainty) */
.gp9 .gs { position: absolute; inset: 0; background: linear-gradient(180deg, #EAF0FC 0%, #F3F6FB 30%); transition: opacity 0.35s; }
.gp9 .gs.uit { opacity: 0; }
.gp9 .gs-terug { padding: 22px 18px 0; color: var(--b); font-size: 18px; }
.gp9 .gs-kop { display: flex; align-items: center; gap: 14px; padding: 18px 18px 0; }
.gp9 .gs-kop .ster { flex: none; width: 62px; height: 62px; border-radius: 16px; background: var(--b); display: grid; place-items: center; color: #FFF; }
.gp9 .gs-kop h5 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.gp9 .gs-kop small { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 15px; color: var(--s); }
.gp9 .gs-kop small .duim { --d: 26px; border-radius: 6px; }
.gp9 .gs-lijst { margin: 20px 16px 0; border-radius: 22px; background: #FFF; box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05); }
.gp9 .gs-rij { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #EEF1F6; }
.gp9 .gs-rij:last-child { border-bottom: 0; }
.gp9 .gs-rij small { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--s); }
.gp9 .gs-rij small em { font-style: normal; color: var(--b); font-weight: 600; }
.gp9 .gs-rij.twijfel small em { color: var(--o); }
.gp9 .gs-rij b { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.gp9 .gs-rij b .lev { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
.gp9 .gs-kleur { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #C8643B; }
.gp9 .gs-vink { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #EAF0FC; color: var(--b); transition: background-color 0.25s, color 0.25s, transform 0.25s var(--uit); }
.gp9 .gs-vink svg { width: 20px; height: 20px; }
.gp9 .gs-rij.ok .gs-vink { background: var(--b); color: #FFF; transform: scale(1.04); }
.gp9 .gs-knop { position: absolute; left: 16px; right: 16px; bottom: 34px; display: grid; place-items: center; height: 58px; border-radius: 18px; background: var(--b); color: #FFF; font-size: 19px; font-weight: 600; transition: transform 0.15s var(--uit), background-color 0.15s; }
.gp9 .gs-knop.druk { transform: scale(0.97); background: #2F5FC9; }
/* the purchases on the gsm (as gsm-aankopen) */
.gp9 .gl { position: absolute; inset: 0; background: #F3F6FB; transition: opacity 0.35s; }
.gp9 .gl.uit { opacity: 0; }
.gp9 .gl h5 { margin: 20px 18px 12px; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.gp9 .gl-pillen { display: flex; gap: 8px; padding: 0 16px 12px; }
.gp9 .gl-pillen span { padding: 8px 14px; border-radius: 99px; background: #FFF; box-shadow: 0 0 0 1px #E3E8F0; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.gp9 .gl-pillen span.aan { background: var(--ink); color: #FFF; box-shadow: none; }
.gp9 .gl-kaarten { position: relative; }
.gp9 .gl-kaart { margin: 0 16px 12px; padding: 14px 16px; border-radius: 20px; background: #FFF; box-shadow: 0 1px 2px rgba(15, 27, 51, 0.05); transition: transform 0.6s var(--zacht-uit), opacity 0.4s, box-shadow 1.6s; }
.gp9 .gl-kaart-kop { display: flex; align-items: center; gap: 12px; }
.gp9 .gl-kaart-kop > div { min-width: 0; }
.gp9 .gl-kaart-kop .duim { --d: 46px; border-radius: 12px; }
.gp9 .gl-kaart-kop b { display: block; overflow: hidden; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.gp9 .gl-kaart-kop small { display: flex; gap: 8px; align-items: center; font-size: 15px; line-height: 1.3; color: var(--s); white-space: nowrap; }
.gp9 .gl-kaart-kop .rechts { flex: none; margin-left: auto; }
.gp9 .gl-kaart-kop .chip { height: 28px; font-size: 14px; padding: 0 12px; }
.gp9 .gl-kaart dl { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2px 10px; margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--s); }
.gp9 .gl-kaart dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 15px; transition: color 0.3s; }
.gp9 .gl-kaart dd.laat { color: var(--r); }
.gp9 .gl-kaarten[data-nieuw="nee"] .gl-kaart:not(.gl-lisa) { transform: translateY(calc(-1 * var(--sprong, 148px))); }
.gp9 .gl-kaarten[data-nieuw="nee"] .gl-lisa { opacity: 0; }
.gp9 .gl-lisa.vers { box-shadow: 0 0 0 2px var(--b), 0 8px 20px -10px rgba(62, 111, 216, 0.6); }
.gp9 .sig[hidden] { display: none; }
/* the board on the laptop (as pc-bord), five columns */
.gp9 .bord { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.gp9 .bord-kol { border-radius: 14px; background: #E9EDF4; padding: 10px 8px; min-height: 470px; }
.gp9 .bord-kol h6 { display: flex; align-items: center; gap: 6px; margin: 0 4px 10px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--ink); }
.gp9 .bord-kol h6::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #8A93A6); }
.gp9 .bord-kol h6 span { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: #FFF; font-size: 11px; color: var(--s); }
.gp9 .bord-kaarten { position: relative; display: grid; gap: 7px; }
.gp9 .bk { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 3px 9px; align-items: center; padding: 8px; border-radius: 10px; background: #FFF; box-shadow: 0 1px 2px rgba(15, 27, 51, 0.06); font-size: 12px; transition: transform 0.6s var(--zacht-uit), opacity 0.4s, box-shadow 1.6s; }
.gp9 .bk .duim { --d: 34px; grid-row: span 2; border-radius: 7px; }
.gp9 .bk b { font-size: 12.5px; color: var(--ink); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp9 .bk small { display: flex; align-items: center; gap: 5px; color: var(--s); font-size: 11px; line-height: 1.3; white-space: nowrap; }
.gp9 .bk small .lev { width: 14px; height: 14px; font-size: 8px; border-radius: 4px; }
.gp9 .bk .sig { grid-column: 2; font-size: 11px; }
/* the purchase leaves first (0.25s) and only then do the cards under it close up; when it comes, the cards make room
   first and it fades in after them, so a card never slides over it */
.gp9 .bord-kaarten[data-nieuw="nee"] .bk-lisa { opacity: 0; transition-duration: 0.6s, 0.25s, 1.6s; }
.gp9 .bord-kaarten[data-nieuw="ja"] .bk-lisa { transition-delay: 0s, 0.3s, 0s; }
.gp9 .bk-lisa.vers { box-shadow: 0 0 0 2px var(--b), 0 10px 22px -12px rgba(62, 111, 216, 0.7); }
/* the cards under the purchase close the gap it leaves: --sprong is its height plus the gap (js/v9-gsmpc.js) */
.gp9 .bord-kaarten[data-nieuw="nee"] .bk-lisa ~ .bk { transform: translateY(calc(-1 * var(--sprong, 65px))); transition-delay: 0.22s; }
/* the file name on the upload card stays on one line (a computer: the card is wide enough) */
.gp9 .pa-bestand span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* a computer: the head splits (title left, intro right), so the stage and the running step fit under it */
@media (min-width: 961px) {
  .gp9-kop { max-width: none; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .gp9-kop > p { max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; }
  .gp9-titel h2 { text-wrap: balance; }
}

/* ------------------------------------------------ 900px and less: a crop of the board at reading size */
/* --kn: how many native px of the board fill the crop (two columns 372, three 562, four 748; js/v9-gsmpc.js turns it into
   --kz); --kh: how many native px of it are shown in height. The gsm (--gw wide, about --gh high) stands at the bottom
   right and overlaps the crop by --ov, over the empty part of the last column. The running step sits beside the gsm. */
@media (max-width: 900px) {
  .gp9 { --kh: 320px; --gw: min(30cqw, 176px); --gh: calc(var(--gw) * 2.164 - 8px); --ov: calc(var(--gh) * 0.4); --ch: calc(9px + var(--kh) * var(--kz, 0.9)); }
  .gp9-podium { height: calc(var(--ch) + var(--gh) - var(--ov)); margin-top: 32px; }
  .gp9-podium::before { display: none; }
  .gp9-doos { position: absolute; inset: 0; width: auto; height: auto; max-width: none; }
  .gp9-pc { left: 0; right: 0; width: 100%; top: 0; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
  .gp9-pc .pc9-scherm { padding: 9px 9px 0; border-radius: 18px 18px 0 0; box-shadow: 0 0 0 1px rgba(15, 27, 51, 0.12), inset 0 0 0 1.5px #2A3346; }
  .gp9-pc .pc9-beeld { aspect-ratio: auto; height: calc(var(--kh) * var(--kz, 0.9)); border-radius: 6px 6px 0 0; }
  .gp9-pc .pc9-voet { display: none; }
  .gp9-pc .pc9-in { transform: scale(var(--kz, 0.9)) translate(-262px, -62px); }
  .gp9-gsm { left: auto; right: 0; top: calc(var(--ch) - var(--ov)); width: var(--gw); --gsm-rand: 1.3cqw; }
  .gp9-label { display: none; }
  /* the upload card stays inside the crop, over the lower cards of Gekocht: clear of the top of Bevestigd, where the
     purchase lands, and of the gsm */
  .gp9-pc .pa-op { left: 272px; right: auto; top: 200px; width: 340px; padding: 12px 14px; }
  .gp9-pc .pa-op b { font-size: 14px; margin-bottom: 8px; }
  .gp9-pc .pa-bestand { padding: 9px; }
  .gp9-pc .pa-op small { font-size: 13px; margin-top: 8px; }
  .gp9-pc .pa-bestand span { font-size: 11px; }
  /* the crop cuts the cards under the upload card: the board dims behind it, as behind a dialog */
  .gp9-pc .pa { position: relative; }
  .gp9-pc .pa::after { content: ""; position: absolute; inset: 0; background: rgba(15, 27, 51, 0.22); opacity: 0; transition: opacity 0.4s var(--uit); pointer-events: none; }
  .gp9-pc .pc9-in:has(.pa-op.aan) .pa::after { opacity: 1; }
  .gp9 .pa-bestand span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  /* the running step, beside the gsm: four bars without names, then the name and the text (the <em>) */
  .gp9-stappen { width: calc(100% - var(--gw) - 20px); margin-top: calc(14px + var(--ov) - var(--gh)); min-height: calc(var(--gh) - var(--ov) - 14px); align-content: start; gap: 12px 6px; }
  .gp9-stappen b { padding-top: 3px; font-size: 0; gap: 0; }
  .gp9-stappen b svg { display: none; }
  .gp9-stappen b::before, .gp9-stappen b::after { height: 3px; }
  .gp9-stappen em { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--ink); font-style: normal; font-weight: 500; font-size: 1rem; line-height: 1.35; }
  .gp9-stappen em svg { flex: none; width: 18px; height: 18px; color: var(--b-ink); }
  html.js .gp9--alle .gp9-stappen, html:not(.js) .gp9-stappen { width: auto; margin-top: 24px; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  html.js .gp9--alle .gp9-stappen em, html:not(.js) .gp9-stappen em { display: flex; }
}
/* a tablet upright: four columns (Gekocht to Afgerond) */
@media (min-width: 761px) and (max-width: 900px) {
  .gp9 { --kn: 748; }
}
/* a large phone or a small tablet: three columns (Gekocht, Bevestigd, Ontvangen) */
@media (min-width: 601px) and (max-width: 760px) {
  .gp9 { --kn: 562; }
  .gp9-pc .pa-op { top: 190px; width: 300px; }
}
@media (max-width: 760px) {
  .gp9-feiten { grid-template-columns: minmax(0, 1fr); }
  .gp9-feiten li, .gp9-feiten li + li { padding: 18px 0; border-left: 0; }
  .gp9-feiten li + li { border-top: 1px solid var(--lijn); }
  .gp9-meer { margin-top: 8px; }
}
/* a phone: two columns (Gekocht and Bevestigd) in the crop, and under it the gsm at reading size on a row of its own: as
   wide as the content allows (--gw), cut at --gzh and faded, its screen scrolled (--gy, native px) to the part of the
   step that counts (the AI suggestions, then the purchase Lisa hoeksalon), so the words that carry the story read at 11px
   or more. A few texts of the drawn app are one or two native px larger here. The running step sits under the stage. */
@media (max-width: 600px) {
  .gp9 { --kn: 372; --gw: min(90cqw, 360px); --gzh: calc(var(--gw) * 1.08); --ov: 28px; }
  .gp9-podium { height: calc(var(--ch) + var(--gzh) - var(--ov)); }
  .gp9-draad path { stroke: none; }
  .gp9-draad circle { filter: drop-shadow(0 0 4px rgba(62, 111, 216, 0.55)); }
  .gp9-gsm { pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--gzh) - 40px), transparent var(--gzh)); mask-image: linear-gradient(180deg, #000 calc(var(--gzh) - 40px), transparent var(--gzh)); }
  .gp9-gsm .gsm9-eiland { display: none; }
  .gp9-gsm .gsm9-in { transform: scale(var(--k, 0.5)) translateY(var(--gy, 0px)); transition: transform 0.6s var(--zacht-uit); }
  .gp9-gsm:has(.gs:not(.uit)) { --gy: -92px; }
  .gp9-gsm:has(.gl:not(.uit)) { --gy: -50px; }
  .gp9 .gs-lijst { margin-top: 14px; }
  .gp9 .gs-rij { padding-block: 10px; }
  .gp9 .gs-rij small { font-size: 16px; }
  .gp9 .gl-kaart-kop small, .gp9 .gl-kaart-kop small .sig { font-size: 16px; }
  .gp9 .gl-kaart-kop .chip { height: 30px; font-size: 16px; }
  .gp9 .gl-kaart dl { font-size: 15px; }
  .gp9 .gl-kaart dd { font-size: 16px; }
  .gp9-stappen { width: auto; margin-top: 20px; min-height: 0; }
  .gp9-stappen li > span { font-size: 0.9375rem; }
  /* the upload card: wide enough for the file name on one line */
  .gp9-pc .pa-op { top: 206px; width: 290px; }
  .gp9 .pa-bestand span { white-space: nowrap; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .gp9-stappen li > span { font-size: 0.875rem; line-height: 1.45; }
  .gp9-stappen em { font-size: 0.9375rem; }
}