/*
 * De appbalk en het snelmenu.
 *
 * Twee manieren om ergens te geraken die de gewone navigatiebalk niet aankan:
 * een strook met alle apps die onder de balk blijft plakken, en een zoekveld dat
 * met één toets opengaat. Steunt op noappy.css voor het palet.
 */

/* ================================================================== *
 *  De appbalk
 * ================================================================== */

.appbalk {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 6, 22, .82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--lijn);
  padding-top: 4.2rem;   /* ruimte voor de zwevende navigatiebalk erboven */
}

.appbalk__spoor {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .55rem max(calc((100vw - var(--max)) / 2), clamp(1.25rem, 4vw, 2.5rem));
}
.appbalk__spoor::-webkit-scrollbar { display: none; }

.appbalk__app,
.appbalk__alles {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
  padding: .4rem .85rem .4rem .4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-zacht);
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.appbalk__alles { padding-left: .85rem; }

.appbalk__app img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--lijn);
  transition: border-color .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}

.appbalk__app b,
.appbalk__alles b {
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color .22s ease;
}
.appbalk__app i {
  display: none;
  font-style: normal;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eigen, var(--magenta));
}

/* Een ruitje in plaats van een affiche voor de knop die naar alles gaat. Het is
   geen app, dus het hoort er ook niet uit te zien als een. */
.appbalk__ruit,
.snelmenu__ruit {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--magenta), var(--violet) 55%, var(--blauw));
  opacity: .85;
}

.appbalk__app:hover,
.appbalk__alles:hover {
  background: rgba(243, 238, 255, .06);
  border-color: var(--lijn);
}
.appbalk__app:hover b,
.appbalk__alles:hover b { color: var(--ink); }
.appbalk__app:hover img { transform: scale(1.06); border-color: var(--eigen, var(--magenta)); }

.appbalk__app.is-actief,
.appbalk__alles.is-actief {
  background: rgba(243, 238, 255, .07);
  border-color: var(--eigen, var(--magenta));
}
.appbalk__app.is-actief b,
.appbalk__alles.is-actief b { color: var(--ink); }
.appbalk__app.is-actief img {
  border-color: var(--eigen, var(--magenta));
  box-shadow: 0 0 0 2px rgba(10, 6, 22, .9), 0 0 16px -2px var(--eigen, var(--magenta));
}
.appbalk__app.is-actief i { display: block; }

@media (max-width: 720px) {
  .appbalk { padding-top: 3.6rem; }
  .appbalk__app b,
  .appbalk__alles b { font-size: .84rem; }
}

/* ================================================================== *
 *  Het snelmenu
 * ================================================================== */

.snelmenu[hidden] { display: none; }

.snelmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 12vh, 8rem) 1rem 2rem;
}

.snelmenu__waas {
  position: absolute;
  inset: 0;
  background: rgba(6, 3, 14, .7);
  backdrop-filter: blur(10px);
  animation: waasOp .2s ease;
}
@keyframes waasOp { from { opacity: 0; } to { opacity: 1; } }

.snelmenu__doos {
  position: relative;
  width: min(100%, 40rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(243, 238, 255, .16);
  border-radius: 18px;
  overflow: hidden;
  background: var(--nacht-2);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 46, 136, .12);
  animation: doosOp .24s cubic-bezier(.16, 1, .3, 1);
}
@keyframes doosOp {
  from { opacity: 0; transform: translateY(-12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.snelmenu__zoek {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--lijn);
}
.snelmenu__zoek span { font-size: 1.2rem; color: var(--magenta); }
.snelmenu__zoek input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}
.snelmenu__zoek input::placeholder { color: var(--ink-zacht); }

kbd {
  font-family: var(--mono);
  font-size: .68rem;
  padding: .18em .45em;
  border: 1px solid var(--lijn);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--ink-zacht);
}

.snelmenu__lijst {
  margin: 0;
  padding: .5rem;
  list-style: none;
  overflow-y: auto;
  flex: 1;
}
.snelmenu__lijst li[hidden] { display: none; }

.snelmenu__lijst a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .6rem .7rem;
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
}
.snelmenu__lijst img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--lijn);
}
/* Alleen de tekstkolom, niet elke span. Zonder die klasse kreeg het ruitje
   ernaast ook flex:1 en werd het een uitgerekte balk. */
.snelmenu__tekst {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  flex: 1;
}
.snelmenu__lijst b {
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ink);
}
.snelmenu__lijst i {
  font-style: normal;
  font-size: .82rem;
  color: var(--ink-zacht);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.snelmenu__lijst em {
  font-style: normal;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  flex: 0 0 auto;
}

.snelmenu__lijst li.is-keuze a {
  background: linear-gradient(90deg, rgba(255, 46, 136, .16), rgba(255, 46, 136, .04));
  box-shadow: inset 2px 0 0 var(--eigen, var(--magenta));
}
.snelmenu__lijst li.is-keuze em { color: var(--eigen, var(--magenta)); }

.snelmenu__niets {
  margin: 0;
  padding: 1.6rem 1.2rem;
  color: var(--ink-zacht);
  font-size: .95rem;
}

.snelmenu__voet {
  display: flex;
  gap: 1.2rem;
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--lijn);
  font-size: .74rem;
  color: var(--ink-zacht);
}
.snelmenu__voet span { display: flex; align-items: center; gap: .35rem; }

/* ---- de knop in de balk ---- */

.zoekknop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42em .7em .42em .8em;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-zacht);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.zoekknop:hover {
  border-color: var(--magenta);
  color: var(--ink);
  background: rgba(255, 46, 136, .08);
}
.zoekknop kbd { pointer-events: none; }

/* Op een aanraakscherm bestaat de sneltoets niet; dan alleen het teken. */
@media (hover: none), (max-width: 900px) {
  .zoekknop kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .snelmenu__waas,
  .snelmenu__doos { animation: none; }
}