/* Nachtrit: donker, met noorderlicht en glazen kaarten. */
/* Lettertypen staan op de eigen server (OFL-licentie in static/fonts), zodat pagina's niets van andere domeinen laden. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/sora-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/sora-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/sora-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/sora-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Elke kleur staat hier één keer. Wie hem ook doorschijnend nodig heeft, gebruikt de -rgb-versie:
     rgba(var(--danger-rgb), .1). */
  --bg: #070A16;
  --bg-deep: #0D1124;
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --shade: rgba(0, 0, 0, .25);
  --surface: rgba(var(--white-rgb), .055);
  --surface-hover: rgba(var(--white-rgb), .1);
  --fill: rgba(var(--white-rgb), .08);
  --fill-hover: rgba(var(--white-rgb), .12);
  --line: rgba(var(--white-rgb), .12);
  --line-faint: rgba(var(--white-rgb), .08);
  --border: rgba(var(--white-rgb), .11);
  --border-strong: rgba(var(--white-rgb), .16);
  --ring: rgba(var(--white-rgb), .24);

  --text-strong: var(--white);
  --text: #EEF1FF;
  --text-soft: #C9D0EA;
  --muted: #9AA3BF;
  --placeholder: #7D86A3;
  --dim: #5D6585;

  --accent-rgb: 91, 75, 234;
  --accent: rgb(var(--accent-rgb));
  --accent-2: #3D63E6;
  --violet-rgb: 123, 107, 255;
  --violet: rgb(var(--violet-rgb));
  --violet-ink: #CEC4FF;
  --indigo-rgb: 109, 91, 255;
  --indigo: rgb(var(--indigo-rgb));
  --blue-rgb: 92, 141, 255;
  --blue: rgb(var(--blue-rgb));
  --blue-ink: #B3C8FF;
  --teal-rgb: 20, 200, 184;
  --teal: rgb(var(--teal-rgb));
  --aurora-rgb: 124, 245, 232;
  --aurora: rgb(var(--aurora-rgb));
  --aurora-light: #B9FFF7;
  --orange-rgb: 255, 138, 71;
  --orange: rgb(var(--orange-rgb));
  --orange-ink: #FFB68E;
  --orange-soft: #FFE0CC;
  --on-orange: #1B0E05;
  --ok-rgb: 52, 211, 153;
  --ok: rgb(var(--ok-rgb));
  --ok-ink: #8EEBC4;
  --ok-soft: #CFF7E6;
  --danger-rgb: 255, 92, 92;
  --danger: rgb(var(--danger-rgb));
  --danger-ink: #FFADAD;
  --danger-soft: #FFD6D6;

  --postnl-rgb: 255, 138, 61;
  --postnl: rgb(var(--postnl-rgb));
  --dhl-rgb: 255, 204, 51;
  --dhl: rgb(var(--dhl-rgb));
  --dpd-rgb: 255, 92, 122;
  --dpd: rgb(var(--dpd-rgb));

  --font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--aurora); }
a:hover { color: var(--aurora-light); }
:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.mono { font-family: var(--mono); }
/* `hidden` wint altijd, ook van bijvoorbeeld .btn (display: inline-flex); app.js zet het aan en uit. */
[hidden] { display: none !important; }
.muted { color: var(--muted); }
code { font-family: var(--mono); font-size: .9em; background: var(--fill); padding: 1px 6px; border-radius: 6px; word-break: break-all; }

/* Noorderlicht achter alles; staat stil bij "minder beweging". */
.aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; }
.aurora span:nth-child(1) { width: 340px; height: 300px; left: -130px; top: -140px; background: var(--indigo); opacity: .55; animation: drift-a 14s ease-in-out infinite alternate; }
.aurora span:nth-child(2) { width: 300px; height: 260px; right: -150px; top: -60px; background: var(--teal); opacity: .42; animation: drift-b 18s ease-in-out infinite alternate; }
.aurora span:nth-child(3) { width: 260px; height: 220px; left: 70px; top: 190px; background: var(--orange); opacity: .2; animation: drift-a 22s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(60px, 40px) scale(1.1); } }
@keyframes drift-b { to { transform: translate(-50px, 60px) scale(.92); } }

.page {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px max(20px, env(safe-area-inset-right)) 48px max(20px, env(safe-area-inset-left));
}

/* Kopregel */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand:hover { color: var(--text-strong); }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-strong); background: linear-gradient(135deg, var(--violet), var(--teal)); }
.top-actions { display: flex; gap: 8px; }
.top-actions form { margin: 0; }
.iconbtn {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none; font: inherit;
  transition: background .2s ease, border-color .2s ease;
}
.iconbtn:hover { background: var(--surface-hover); color: var(--text-strong); }

main { margin-top: 32px; }

/* Glas. Zonder backdrop-filter: achter de kaarten zit alleen het noorderlicht, en dat is al vaag.
   Nog eens vervagen is niet te zien, maar laat de telefoon wel bij elke beweging opnieuw rekenen. */
.glass { background: var(--surface); border: 1px solid var(--border); }

/* Tekst */
.eyebrow { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.headline { margin: 10px 0 0; font-size: clamp(36px, 10.5vw, 52px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; }
.accent { color: var(--aurora); }
.updated { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.updated .mono { color: var(--text); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); flex: none; }
.lead { margin: 14px 0 0; font-size: 15px; line-height: 1.55; }
.tip { margin: 0; font-size: 12px; color: var(--muted); }
.tip.center { text-align: center; }

/* Meldingsbalken */
.alert {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 12px 14px;
  border-radius: 16px; border: 1px solid;
  font-size: 13px; line-height: 1.4; text-decoration: none;
}
.alert + .alert { margin-top: 10px; }
.alert strong { color: var(--text-strong); }
.alert-text { flex: 1; }
.alert .icon { flex: none; }
.alert-action { color: var(--orange-soft); background: rgba(var(--orange-rgb), .09); border-color: rgba(var(--orange-rgb), .4); }
.alert-action > .icon:first-child { color: var(--orange-ink); }
.alert-bad { color: var(--danger-soft); background: rgba(var(--danger-rgb), .1); border-color: rgba(var(--danger-rgb), .45); }
.alert-bad > .icon:first-child { color: var(--danger-ink); }
.alert-ok { color: var(--ok-soft); background: rgba(var(--ok-rgb), .1); border-color: rgba(var(--ok-rgb), .35); }
a.alert:hover { color: var(--text-strong); }

/* Kaarten */
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-head > .pill { margin-left: auto; }
/* De afzender wordt nooit afgekapt. Is er weinig ruimte, dan schuift eerst "via ..." naar de volgende
   regel; past zelfs de naam niet naast het label, dan gaat het label eronder (flex-basis 0, zodat
   alleen het langste woord telt bij die keuze). 3 px boven en onder maakt de eerste regel even hoog
   als het label (30 px), zodat ze op één lijn staan. max-width houdt een extreem lang woord binnen
   de kaart; dat wordt dan pas afgebroken. */
.sender { flex: 1 1 0; max-width: 100%; display: flex; align-items: flex-start; gap: 10px; }
.sender .cdot { margin-top: 10.5px; }
.sender-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; min-width: 0; margin: 0; padding: 3px 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.sender-name .name { min-width: 0; overflow-wrap: break-word; }
.sender-name .via { font-weight: 400; }
.hero .sender-name { font-size: 17px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 30px; }
.who strong { min-width: 0; font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.via { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.c-postnl { background: var(--postnl); box-shadow: 0 0 12px rgba(var(--postnl-rgb), .7); }
.c-dhl { background: var(--dhl); box-shadow: 0 0 12px rgba(var(--dhl-rgb), .6); }
.c-dpd { background: var(--dpd); box-shadow: 0 0 12px rgba(var(--dpd-rgb), .6); }

.pill { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.s-announced, .t-wait { background: rgba(var(--violet-rgb), .2); color: var(--violet-ink); }
.s-in_transit { background: rgba(var(--blue-rgb), .18); color: var(--blue-ink); }
.s-out_for_delivery, .t-action { background: rgba(var(--orange-rgb), .16); color: var(--orange-ink); }
.s-at_pickup_point { background: rgba(var(--teal-rgb), .16); color: var(--aurora); }
.s-delivered, .t-ok { background: rgba(var(--ok-rgb), .15); color: var(--ok-ink); }
.s-exception, .t-bad { background: rgba(var(--danger-rgb), .16); color: var(--danger-ink); }
.s-unknown, .s-returned, .t-off { background: var(--fill); color: var(--text-soft); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--orange-rgb), .7); }
  70% { box-shadow: 0 0 0 10px rgba(var(--orange-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--orange-rgb), 0); }
}

.cards { display: flex; flex-direction: column; gap: 12px; }
.card { border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.card-bad { border-color: rgba(var(--danger-rgb), .45); box-shadow: 0 0 40px rgba(var(--danger-rgb), .12); }
.card-action { border-color: rgba(var(--orange-rgb), .4); box-shadow: 0 0 40px rgba(var(--orange-rgb), .12); }
.carrier-says { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: 14px; line-height: 1.45; color: var(--text-soft); }
.card-bad .carrier-says, .hero .carrier-says { background: rgba(var(--danger-rgb), .08); color: var(--danger-soft); }
.when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.when .day { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.when .day.unknown { font-size: 18px; font-weight: 500; color: var(--text-soft); }
.when .window { font-family: var(--mono); font-size: 15px; color: var(--muted); }
.pickup { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.pickup-icon { width: 44px; height: 44px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(var(--teal-rgb), .14); color: var(--aurora); }
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mini span { height: 4px; border-radius: 4px; background: var(--line); }
.mini .on { background: linear-gradient(90deg, var(--violet), var(--blue)); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.card .tip { margin-top: -4px; }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 14px; border: 0;
  font: 600 14px var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--text-strong); box-shadow: 0 8px 24px rgba(var(--accent-rgb), .35); }
.btn-primary:hover { color: var(--text-strong); box-shadow: 0 10px 30px rgba(var(--accent-rgb), .5); }
.btn-ghost { background: var(--fill); color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--fill-hover); color: var(--text-strong); }
.btn-danger { background: rgba(var(--danger-rgb), .14); color: var(--danger-soft); border: 1px solid rgba(var(--danger-rgb), .4); }
.btn-danger:hover { background: rgba(var(--danger-rgb), .22); color: var(--text-strong); }
.btn-block { width: 100%; }
/* Knoppen over de volle breedte en in de welkomststappen mogen op een smal scherm over twee regels,
   in plaats van buiten de knop uit te steken (bv. "Meldingen aanzetten op deze telefoon" op 375 px). */
.btn-block, .step .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }
.btn .icon { flex: none; }
.lnk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-soft); font-size: 14px; font-weight: 500; text-decoration: none; }
.lnk:hover { color: var(--text-strong); }

/* Verbergen: bewust stil, het is een uitzondering */
.hide-form { margin: 0; }
.actions .hide-form { margin-left: auto; }
.lnk-quiet { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--muted); }
.hero-hide { display: flex; justify-content: flex-end; margin-top: -4px; }
.hide-icon { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.hide-icon:hover { background: var(--surface); color: var(--text-strong); }

/* Bezig: draaiend icoon of draaiend rondje op de knop */
.is-busy { pointer-events: none; }
.iconbtn.is-busy { color: var(--aurora); border-color: rgba(var(--aurora-rgb), .5); }
.iconbtn.is-busy .icon { animation: spin 1s linear infinite; }
.btn.is-busy { opacity: .85; }
.btn.is-busy .icon { display: none; }
.btn.is-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .3; } }

/* Volgende aankomst */
.hero { margin-top: 18px; border-radius: 28px; padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 30px 80px rgba(var(--indigo-rgb), .22); }
.hero .eyebrow { margin-bottom: 6px; }
.hero-time { margin: 0; font-family: var(--mono); font-size: clamp(32px, 9.5vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.hero-time .dash { color: var(--dim); }
.hero-day { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.hero-actions { display: flex; flex-direction: column; gap: 8px; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Reisbalk. Hij loopt door tot in de rand van de kaart, zodat de vier labels meer ruimte hebben. */
.track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: -12px; }
.track-base, .track-fill { position: absolute; left: 12.5%; top: 13px; height: 2px; border-radius: 2px; }
.track-base { right: 12.5%; background: var(--line); }
.track-fill { background: linear-gradient(90deg, var(--violet), var(--orange)); overflow: hidden; }
.track-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), .9), transparent); animation: shine 2.2s ease-in-out infinite; }
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
/* Breedte als klasse, niet als style-attribuut: de Content-Security-Policy staat geen inline stijlen toe. */
.track-fill.w-0 { width: 0%; }
.track-fill.w-25 { width: 25%; }
.track-fill.w-50 { width: 50%; }
.track-fill.w-75 { width: 75%; }
.track-fill.w-100 { width: 100%; }
.node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.d-done { background: var(--indigo); color: var(--text-strong); }
.d-now { background: var(--orange); color: var(--on-orange); box-shadow: 0 0 0 5px rgba(var(--orange-rgb), .18), 0 0 24px rgba(var(--orange-rgb), .7); }
.d-todo { background: var(--bg-deep); border: 2px solid var(--ring); }
/* Een label dat niet past, gaat over twee regels ("In bezorging") in plaats van over het volgende heen. */
.node-label { font-size: 12px; line-height: 1.3; text-align: center; color: var(--muted); }
.node-label.on { color: var(--orange-soft); font-weight: 600; }
/* Smalle telefoons: iets kleinere labels, zodat "Aangemeld" en "Onderweg" ook op 320 px naast elkaar
   passen en "In bezorging" vanaf 360 px op één regel. */
@media (max-width: 374px) {
  .node-label { font-size: 11px; }
}

/* Groepen */
.sec { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; }
.sec h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
.sec .cnt { font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.sec .ln { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }

.done-list { display: flex; flex-direction: column; }
.done-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line-faint); }
.done-row:last-child { border-bottom: 0; }
.done-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: inherit; text-decoration: none; border-radius: 8px; }
.done-link:hover { background: rgba(var(--white-rgb), .03); color: inherit; }
.done-check { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(var(--ok-rgb), .15); color: var(--ok-ink); }
.done-check.is-returned { background: var(--fill); color: var(--text-soft); }
.done-who { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done-who strong { font-weight: 500; }
.done-when { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Niets onderweg */
.empty { text-align: center; padding: 28px 8px 8px; }
.empty-title { margin: 26px 0 10px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.empty .muted { max-width: 300px; margin: 0 auto; font-size: 15px; line-height: 1.55; }
.orbit { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.ring { position: absolute; border-radius: 50%; border: 1px solid var(--border); }
.ring-1 { inset: 10px; }
.ring-2 { inset: 48px; border-style: dashed; border-color: rgba(var(--aurora-rgb), .2); }
/* De twee donkere tinten horen alleen bij deze planeet. */
.core { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--aurora-light) 0%, var(--teal) 35%, #3D4BBF 75%, #1A1F4D 100%); box-shadow: 0 0 60px rgba(var(--teal-rgb), .55), 0 0 120px rgba(var(--indigo-rgb), .35); }
.arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: orbit 16s linear infinite; }
.arm-2 { animation-duration: 26s; animation-direction: reverse; }
.sat { position: absolute; left: -20px; top: -120px; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-strong); background: linear-gradient(135deg, var(--violet), var(--blue)); box-shadow: 0 0 24px rgba(var(--violet-rgb), .6); }
.moon { position: absolute; left: 64px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px var(--orange); }
@keyframes orbit { to { transform: rotate(360deg); } }

/* Welkom */
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 22px; }
.step h2 { margin: 0; font-size: 17px; font-weight: 600; }
.step p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.step .btn { margin-top: 14px; }
.step strong { color: var(--text); }
.step p .icon { vertical-align: -3px; }
.step-num { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 15px var(--mono); border: 1.5px solid var(--ring); color: var(--text-soft); }
.step-now { border-color: rgba(var(--violet-rgb), .45); box-shadow: 0 20px 60px rgba(var(--indigo-rgb), .2); }
.step-now .step-num { border: 0; color: var(--text-strong); background: linear-gradient(135deg, var(--violet), var(--teal)); box-shadow: 0 0 24px rgba(var(--violet-rgb), .5); }

/* Instellingen */
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-soft); font-size: 14px; font-weight: 500; text-decoration: none; }
.back:hover { color: var(--text-strong); }
.page-title { margin: 6px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.meta { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.meta .mono { color: var(--text); }
.errbox { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--danger-rgb), .1); border: 1px solid rgba(var(--danger-rgb), .3); font-size: 13px; line-height: 1.5; color: var(--danger-soft); overflow-wrap: anywhere; }
.errbox strong { color: var(--text-strong); }
.creds summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--text-soft); }
.creds summary::-webkit-details-marker { display: none; }
.creds summary .icon { transition: transform .2s ease; }
.creds:not([open]) summary .icon { transform: rotate(-90deg); }
.stack { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 0; }
label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-soft); }
.input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border-radius: 14px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font: 400 15px var(--font); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder { color: var(--placeholder); }
.input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(var(--violet-rgb), .25); }
.input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(var(--danger-rgb), .15); }
.input.mono { font-family: var(--mono); }
.input-code { font-family: var(--mono); font-size: 18px; letter-spacing: .3em; }
.inline-form { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.inline-form .btn { margin-top: 25px; }
.grow { flex: 1; min-width: 0; }
.field-msg { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; font-size: 13px; line-height: 1.4; }
.field-msg.is-error { color: var(--danger-ink); }
.field-msg.is-ok { color: var(--ok-ink); }
.field-msg .icon { flex: none; margin-top: 1px; }
.qr-row { display: flex; align-items: center; gap: 16px; }
.qr-row p { margin: 4px 0 0; }
.qr { flex: none; padding: 10px; border-radius: 16px; background: var(--white); box-shadow: 0 0 40px rgba(var(--aurora-rgb), .25); }
.qr img { display: block; width: 120px; height: 120px; }
.topic { display: block; margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: var(--shade); border: 1px dashed var(--border-strong); color: var(--aurora); font-size: 14px; overflow-wrap: anywhere; }
.divider { border: 0; height: 1px; margin: 2px 0; background: var(--line-faint); }
.empty-note { color: var(--muted); }

/* Inloggen en aanmelden */
.auth { max-width: 440px; margin: 0 auto; }
.auth > .card { margin-top: 22px; }
.auth > .lnk { margin-top: 12px; }

/* Brede schermen: links de volgende aankomst, rechts de lijst */
@media (min-width: 960px) {
  .page-wide { max-width: 1180px; padding: 28px 32px 56px; }
  .page-wide main { margin-top: 40px; }
  .overview { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .overview.is-solo { display: block; max-width: 560px; margin: 0 auto; }
  .ov-intro { position: sticky; top: 24px; }
  .ov-list > .group:first-child .sec { margin-top: 0; }
  .ov-list .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .page-wide .welcome, .page-wide > main > .empty { max-width: 560px; margin: 0 auto; }
}

/* Minder beweging: alles staat stil, behalve dat een knop laat zien dat hij bezig is. Dat gebeurt dan
   met rustig knipperen in plaats van draaien, anders lijkt het alsof de app vastzit. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn.is-busy::before, .iconbtn.is-busy .icon { animation: breathe 1.6s ease-in-out infinite !important; }
}