/* ============================================================================
   motonav/demo.css — de MotoNav-demo op motonav.html

   Het autoscherm is een nabootsing van CarPlay met de overlays van MotoNav:
   dezelfde glazen pillen, het bord, de laadring. Het scherm heeft zijn eigen
   dag- en nachtstand (de knop Dag/Nacht), los van het thema van de site.
   ========================================================================= */

.mn-demo { --mn-lime: #c7f74f; --mn-rood: #e5484d; --mn-oranje: #f59b14; --mn-groen: #27b070; }

/* ── Het autoscherm ──────────────────────────────────────────────────────── */

.cp {
  --cp-bg: #0b0d12; --cp-glas: rgba(22, 25, 33, .62); --cp-rand: rgba(255, 255, 255, .10);
  --cp-tekst: #f2f4ef; --cp-zacht: rgba(242, 244, 239, .62); --cp-kaart: #12151d;
  position: relative; aspect-ratio: 16 / 8.4; width: 100%;
  border-radius: 26px; overflow: hidden; background: var(--cp-bg);
  border: 10px solid #050608; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
  color: var(--cp-tekst); font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  container-type: inline-size;
  --u: 1cqw;            /* de maat van alles op het scherm; groter op een gsm */
}
.cp[data-stand="dag"] {
  --cp-bg: #e8ebe4; --cp-glas: rgba(255, 255, 255, .70); --cp-rand: rgba(0, 0, 0, .08);
  --cp-tekst: #11140d; --cp-zacht: rgba(17, 20, 13, .6); --cp-kaart: #ffffff;
}

.cp__kaart { position: absolute; inset: 0 0 0 9%; }
.cp__kaart .maplibregl-ctrl-attrib { font-size: 9px; }

/* Het dok van CarPlay, links. */
.cp__dok {
  position: absolute; left: 0; top: 0; bottom: 0; width: 9%; min-width: 46px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; gap: 10%; padding: 3% 0; z-index: 3;
}
.cp[data-stand="dag"] .cp__dok { background: rgba(255,255,255,.65); }
.cp__klok { font-weight: 600; font-size: clamp(10px, calc(var(--u) * 1.6), 16px); font-variant-numeric: tabular-nums; }
.cp__app { width: 62%; aspect-ratio: 1; border-radius: 22%; background: #2a2f3a; display: grid; place-items: center; overflow: hidden; }
.cp__app img { width: 100%; height: 100%; }
.cp__app svg { width: 55%; height: 55%; fill: #fff; }

/* Glas, zoals CarPlayGlass. */
.cp__glas {
  background: var(--cp-glas); border: 1px solid var(--cp-rand);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

/* De aanwijzing linksboven. */
.cp__afslag {
  position: absolute; left: calc(9% + 1.6%); top: 3%; width: 34%; z-index: 2;
  border-radius: 16px; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .4) calc(var(--u) * 1.2); align-items: center;
}
.cp__pijl { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); grid-row: span 2; }
.cp__pijl svg { width: 100%; height: 100%; fill: none; stroke: var(--cp-tekst); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cp__afstand { font-size: calc(var(--u) * 3.4); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cp__zin { font-size: calc(var(--u) * 1.55); color: var(--cp-zacht); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* De aankomst linksonder. */
.cp__eta {
  position: absolute; left: calc(9% + 1.6%); bottom: calc(3.5% + 22px); z-index: 2; border-radius: 16px;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6); display: flex; gap: calc(var(--u) * 2.2); align-items: baseline;
}
.cp__eta b { font-size: calc(var(--u) * 2.3); font-variant-numeric: tabular-nums; }
.cp__eta span { font-size: calc(var(--u) * 1.3); color: var(--cp-zacht); display: block; }

/* De kolom rechtsboven: melding, muziek, bord, traject, laden. */
.cp__kolom { position: absolute; right: 1.6%; top: 3%; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1); }
.cp__pil {
  --h: calc(var(--u) * 5.4); height: var(--h); width: calc(var(--h) * 3.6); border-radius: calc(var(--h) / 2);
  display: flex; align-items: center; gap: calc(var(--u) * 1); padding: 0 calc(var(--u) * 1.8) 0 calc(var(--u) * 1); position: relative; overflow: hidden;
  animation: cp-in .4s cubic-bezier(.2,.9,.3,1);
}
.cp__pil[hidden] { display: none; }
@keyframes cp-in { from { transform: translateX(40px); opacity: 0; } }
.cp__pil-beeld { width: calc(var(--h) * .62); height: calc(var(--h) * .62); flex: none; display: grid; place-items: center; }
.cp__pil-tekst { min-width: 0; line-height: 1.15; }
.cp__pil-titel { font-weight: 700; font-size: calc(var(--h) * .24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp__pil-detail { font-weight: 600; font-size: calc(var(--h) * .18); color: var(--cp-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp__pil--kritiek { border-color: rgba(229,72,77,.7); box-shadow: 0 0 0 2px rgba(229,72,77,.5), 0 6px 24px rgba(0,0,0,.3); }
.cp__pil--kritiek .cp__pil-beeld { animation: cp-schud 1.2s ease-in-out infinite; }
@keyframes cp-schud { 0%,100% { transform: none; } 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } }

/* Gemiddelde en voortgang (traject, laden). */
.cp__pil-cijfer { font-family: "Comfortaa", system-ui, sans-serif; font-weight: 800; font-size: calc(var(--h) * .40); font-variant-numeric: tabular-nums; line-height: 1; text-align: center; }
.cp__pil-onder { font-size: calc(var(--h) * .15); color: var(--cp-zacht); font-weight: 600; text-align: center; }
.cp__pil-rechts { margin-left: auto; text-align: right; font-size: calc(var(--h) * .2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp__pil-rechts small { display: block; font-size: calc(var(--h) * .16); color: var(--mn-rood); font-weight: 700; }
.cp__baan { position: absolute; left: calc(var(--u) * 1.8); right: calc(var(--u) * 1.8); bottom: calc(var(--u) * .55); height: 3px; border-radius: 2px; background: rgba(127,127,127,.25); }
.cp__baan i { display: block; height: 100%; border-radius: 2px; background: var(--mn-lime); width: 0; transition: width .3s linear; }
.cp__pil--te-snel { border: 2px solid var(--mn-rood); }
.cp__pil--te-snel::after { content: ""; position: absolute; inset: 0; background: var(--mn-rood); opacity: 0; animation: cp-knipper 1s ease-in-out infinite; pointer-events: none; }
@keyframes cp-knipper { 50% { opacity: .38; } }
.cp__pil--klaar { border: 2px solid var(--mn-groen); }

/* Het snelheidsbord. */
.cp__bord {
  width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); border-radius: 50%; background: #fff; border: calc(var(--u) * .55) solid #e5242a;
  display: grid; place-items: center; color: #111; font-weight: 800; font-size: calc(var(--u) * 1.85); font-family: system-ui, sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); position: relative;
}
.cp__snelheid { position: absolute; right: 115%; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .3) calc(var(--u) * .8); border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp__snelheid--te-snel { color: #fff; background: var(--mn-rood); }

/* Rechtsonder: het weer en de batterijschijf. */
.cp__onder { position: absolute; right: 1.6%; bottom: 3.5%; z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 1); }
.cp__weer { height: calc(var(--u) * 6.4); border-radius: calc(var(--u) * 3.2); padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 1.1); display: flex; align-items: center; gap: calc(var(--u) * .8); }
.cp__weer-icoon { font-size: calc(var(--u) * 2.6); line-height: 1; }
.cp__weer b { font-size: calc(var(--u) * 2); font-variant-numeric: tabular-nums; }
.cp__schijf { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: 50%; position: relative; display: grid; place-items: center; }
.cp__schijf svg { position: absolute; inset: 6%; width: 88%; height: 88%; transform: rotate(-90deg); }
.cp__schijf circle { fill: none; stroke-width: 9; }
.cp__schijf .baan { stroke: rgba(127,127,127,.25); }
.cp__schijf .vol { stroke: var(--mn-lime); stroke-linecap: round; transition: stroke-dashoffset .4s; }
.cp__schijf b { font-size: calc(var(--u) * 1.6); font-variant-numeric: tabular-nums; position: relative; }
.cp__schijf span { position: absolute; bottom: 20%; font-size: calc(var(--u) * .95); color: var(--cp-zacht); }

/* Puck en markers op de kaart. */
.cp-puck { width: 30px; height: 30px; }
.cp-puck svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.cp-paal { background: #0b0d12; color: var(--mn-lime); border: 2px solid var(--mn-lime); border-radius: 10px; padding: 2px 7px;
  font: 700 11px/1.3 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cp-flits { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #e5242a; display: grid; place-items: center;
  font: 800 10px system-ui, sans-serif; color: #111; box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* ── De bediening onder het scherm ──────────────────────────────────────── */

.mn-bedien { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.mn-rij { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mn-rij__naam { min-width: 7.5rem; color: var(--text-muted); font-size: .85rem; }
.mn-knop {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer;
}
.mn-knop[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.mn-knop:focus-visible, .mn-schuif:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mn-knop--groot { padding: var(--space-3) var(--space-6); font-weight: 600; }
.mn-schuif { flex: 1 1 16rem; accent-color: var(--primary); }
.mn-tijd { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .85rem; min-width: 6.5rem; text-align: right; }

/* ── Laadplanner en rekenaars ───────────────────────────────────────────── */

.mn-twee { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .mn-twee { grid-template-columns: 1fr; } }
.mn-kaartvak { height: 26rem; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.mn-stops { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.mn-stop { display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.mn-stop__nr { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.mn-stop__naam { font-weight: 600; }
.mn-stop__onder { color: var(--text-muted); font-size: .85rem; }
.mn-stop__maat { text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; }
.mn-cijfers { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.mn-cijfers b { display: block; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.mn-cijfers span { color: var(--text-muted); font-size: .8rem; }
.mn-veld { display: grid; gap: var(--space-1); }
.mn-veld label { display: flex; justify-content: space-between; font-size: .9rem; }
.mn-veld output { font-variant-numeric: tabular-nums; color: var(--primary-text); font-weight: 600; }
.mn-veld input[type=range] { accent-color: var(--primary); width: 100%; }
.mn-velden { display: grid; gap: var(--space-4); }
.mn-uitkomst { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mn-curve { width: 100%; height: 120px; margin-top: var(--space-3); }

/* ── Productoverzicht ───────────────────────────────────────────────────── */

.mn-functies { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); }
.mn-functie { padding: var(--space-6); }
.mn-functie h3 { margin: var(--space-3) 0 var(--space-2); font-size: 1.1rem; }
.mn-functie p { color: var(--text-muted); font-size: .95rem; text-wrap: pretty; }
.mn-functie__teken { width: 2.6rem; height: 2.6rem; border-radius: var(--radius-md); background: var(--surface-2);
  display: grid; place-items: center; color: var(--primary-text); }
.mn-functie__teken svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Nagemaakt Dynamic Island en toegangsschermwidget. */
.mn-telefoon { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start; }
.mn-eiland { background: #000; color: #fff; border-radius: 28px; padding: 14px 18px; width: min(360px, 100%);
  font-family: -apple-system, system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mn-eiland__rij { display: flex; align-items: center; gap: 12px; }
.mn-eiland__pijl { color: #c7f74f; font-size: 28px; }
.mn-eiland__afstand { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mn-eiland__tijd { margin-left: auto; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-eiland__tijd span { display: block; font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; }
.mn-eiland__zin { margin-top: 6px; font-weight: 600; font-size: 14px; }
.mn-eiland__balk { margin-top: 10px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.mn-eiland__balk i { display: block; height: 100%; width: 56%; background: #c7f74f; border-radius: 3px; }
.mn-widget { width: 170px; height: 170px; border-radius: 26px; background: #090b11; color: #fff; padding: 16px;
  font-family: -apple-system, system-ui, sans-serif; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mn-widget svg { width: 64px; height: 64px; }
.mn-widget b { font-size: 22px; margin-top: auto; }
.mn-widget span { font-size: 12px; color: #c7f74f; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cp__pil, .cp__pil--kritiek .cp__pil-beeld, .cp__pil--te-snel::after { animation: none; }
  .cp__pil--te-snel::after { opacity: .2; }
}

/* Op een gsm: geen dok, alles groter. Achteraan, zodat het voorgaat. */
@media (max-width: 720px) {
  .cp { aspect-ratio: 3 / 4; border-width: 6px; border-radius: 18px; --u: 1.75cqw; }
  .cp__dok { display: none; }
  .cp__kaart { inset: 0; }
  .cp__afslag { left: 3%; width: 62%; }
  .cp__eta { left: 3%; }
}