/* -- Slimme Prioriteitskaart ----------------------------------- */
.sk {
  width:100%;border:none;border-radius:var(--r-xl);
  padding:0;cursor:pointer;text-align:left;font-family:var(--font);
  position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s;
  display:block;
}
.sk:hover { transform:translateY(-3px); }
.sk:active { transform:translateY(-1px); }
.sk-inner { padding:1.5rem 1.6rem 1.4rem; position:relative; z-index:1; }
.sk-bg-emoji {
  position:absolute;right:-8px;top:-6px;
  font-size:6rem;opacity:.09;filter:blur(2px);
  pointer-events:none; z-index:0;
  line-height:1;
}
.sk-shine {
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 55%);
  pointer-events:none; z-index:0;
}
.sk-bottom-fade {
  position:absolute;bottom:0;left:0;right:0;height:55%;
  background:linear-gradient(to top,rgba(0,0,0,.18),transparent);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  pointer-events:none; z-index:0;
}
.sk-context {
  font-size:.67rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;
  color:rgba(255,255,255,.55);
  margin-bottom:.35rem;
  display:flex;align-items:center;gap:.4rem;
}
.sk-context-dot {
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.4);
  flex-shrink:0;
}
.sk-title {
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:800;
  color:#fff;letter-spacing:-.03em;line-height:1.2;
  margin:0 0 .3rem;
}
.sk-sub {
  font-size:.82rem;color:rgba(255,255,255,.72);
  line-height:1.5;margin:0 0 1.1rem;
}
.sk-actions {
  display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;
}
.sk-btn {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.1rem;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;color:#fff;
  font-size:.82rem;font-weight:700;
  font-family:var(--font);cursor:pointer;
  transition:background .15s,border-color .15s;
  white-space:nowrap;
}
.sk-btn:hover { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.4); }
.sk-btn-ghost {
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.5rem .85rem;
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;color:rgba(255,255,255,.6);
  font-size:.78rem;font-weight:600;
  font-family:var(--font);cursor:pointer;
  transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.sk-btn-ghost:hover { color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.3); }
/* Detail strip onderaan */
.sk-detail {
  margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:1rem;
  flex-wrap:wrap;
}
.sk-detail-item {
  display:flex;align-items:center;gap:.35rem;
  font-size:.74rem;color:rgba(255,255,255,.6);
}
.sk-detail-item strong { color:rgba(255,255,255,.85); }
/* Progress bar in kaart */
.sk-progress-wrap {
  margin:.8rem 0 .2rem;
  background:rgba(0,0,0,.2);
  border-radius:6px;overflow:hidden;height:6px;
}
.sk-progress-bar {
  height:100%;border-radius:6px;
  background:rgba(255,255,255,.55);
  transition:width .6s cubic-bezier(.16,1,.3,1);
}
/* Kleur-varianten */
.sk-groen  { background:linear-gradient(135deg,#1e6e10,var(--accent),#5cd94a);
             box-shadow:0 8px 28px rgba(82,184,46,.28),inset 0 1px 0 rgba(255,255,255,.12); }
.sk-groen:hover { box-shadow:0 14px 40px rgba(82,184,46,.4),inset 0 1px 0 rgba(255,255,255,.15); }
.sk-oranje { background:linear-gradient(135deg,#a84f00,var(--warm),#ff9a40);
             box-shadow:0 8px 28px rgba(224,125,24,.28),inset 0 1px 0 rgba(255,255,255,.12); }
.sk-oranje:hover { box-shadow:0 14px 40px rgba(224,125,24,.4),inset 0 1px 0 rgba(255,255,255,.15); }
.sk-rood   { background:linear-gradient(135deg,#8c2020,#c04040,#e06060);
             box-shadow:0 8px 28px rgba(192,64,64,.3),inset 0 1px 0 rgba(255,255,255,.12); }
.sk-rood:hover { box-shadow:0 14px 40px rgba(192,64,64,.42),inset 0 1px 0 rgba(255,255,255,.15); }
.sk-goud   { background:linear-gradient(135deg,#7a4a20,var(--gold),#e8c090);
             box-shadow:0 8px 28px rgba(200,144,106,.28),inset 0 1px 0 rgba(255,255,255,.12); }
.sk-goud:hover { box-shadow:0 14px 40px rgba(200,144,106,.4),inset 0 1px 0 rgba(255,255,255,.15); }
/* Pulse animatie voor nieuwe gebruikers */
.sk-puls { animation:sk-pulse 2.4s ease-in-out infinite; }
@keyframes sk-pulse {
  0%,100% { box-shadow:0 8px 28px rgba(82,184,46,.28),inset 0 1px 0 rgba(255,255,255,.12); }
  50%      { box-shadow:0 8px 40px rgba(82,184,46,.55),inset 0 1px 0 rgba(255,255,255,.15); }
}
/* -- Secundaire kaart ------------------------------------------ */
.sk2 {
  width:100%;border:none;border-radius:var(--r-lg);
  padding:0;cursor:pointer;text-align:left;font-family:var(--font);
  background:var(--panel);border:1px solid var(--border2);
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1rem;
  transition:transform .2s, border-color .2s, background .2s;
}
.sk2:hover {
  transform:translateY(-1px);
  background:var(--panel2);
}
.sk2-icon {
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.sk2-ic-rood   { background:rgba(192,64,64,.12); }
.sk2-ic-oranje { background:rgba(224,125,24,.12); }
.sk2-ic-groen  { background:rgba(82,184,46,.12);  }
.sk2-ic-goud   { background:rgba(200,144,106,.12);}
.sk2-body { flex:1; min-width:0; }
.sk2-titel {
  font-size:.84rem;font-weight:700;color:var(--text);
  margin:0 0 .15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk2-sub {
  font-size:.74rem;color:var(--sub);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk2-arrow { color:var(--dim);font-size:.85rem;flex-shrink:0; }
@keyframes sk2-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.sk2-entree { animation:sk2-in .35s cubic-bezier(.16,1,.3,1) .08s both; }

/* -- Swipe-hint overlay ---------------------------------------- */
.sk-swipe-hint {
  position:absolute;inset:0;border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  gap:.6rem;
  background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
  z-index:10;
  font-size:.9rem;font-weight:700;color:rgba(255,255,255,.9);
  letter-spacing:-.01em;
}
.sk-swipe-hint-left  { flex-direction:row-reverse; justify-content:flex-start; padding:0 1.4rem; }
.sk-swipe-hint-right { flex-direction:row;         justify-content:flex-end;   padding:0 1.4rem; }
.sk-swiping { user-select:none; will-change:transform; transition:none !important; }
/* Dot indicator voor meerdere kaarten */
.sk-pager {
  display:flex;gap:5px;justify-content:center;
  margin-top:.45rem;margin-bottom:0;
}
.sk-pager-dot {
  width:5px;height:5px;border-radius:50%;
  background:var(--border2);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.sk-pager-dot.active {
  width:16px;border-radius:3px;
  background:var(--accent);
}
/* Kaart in-animatie bij eerste render */
@keyframes sk-entree {
  0%   { opacity:0; transform:translateY(14px) scale(.98); }
  100% { opacity:1; transform:translateY(0)    scale(1);   }
}
.sk-entree {
  animation: sk-entree .42s cubic-bezier(.16,1,.3,1) both;
}
/* Wissel-animatie: kaart schuift uit links, nieuwe schuift in rechts */
@keyframes sk-exit-left {
  to { opacity:0; transform:translateX(-28px) scale(.97); }
}
@keyframes sk-enter-right {
  from { opacity:0; transform:translateX(28px) scale(.97); }
  to   { opacity:1; transform:translateX(0)    scale(1);   }
}
.sk-exit  { animation: sk-exit-left  .28s cubic-bezier(.4,0,.6,1) forwards; }
.sk-enter { animation: sk-enter-right .38s cubic-bezier(.16,1,.3,1) forwards; }
/* Situatie-label kleur-indicator links van context dot */
.sk-situatie-nieuw .sk-context-dot {
  animation: sk-dot-flash .6s ease 2;
}
@keyframes sk-dot-flash {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.3; transform:scale(1.8); }
}