/* Thema "Adriatisch" bovenop de huisstijl: zand, zee en zonsondergang boven de Boka. Alleen tokens, de balk bovenin, een paar
   langzame kleurwolken achter het paneel, kaarten die zacht binnenkomen, en de stappen om een idee te droppen (droppen.js).
   Bewegingen staan uit bij prefers-reduced-motion. */
:root {
  --mne-display: "Bricolage Grotesque", var(--h-font);
  --mne-zee: #0f6e85;
  --mne-diep: #0b3954;
  --mne-zon: #e07a5f;
  --mne-zand: #f2b880;
  --mne-olijf: #7a9e7e;
  --mne-avond: linear-gradient(115deg, #0b3954 0%, #136f88 38%, #c8705c 78%, #f2b880 100%);
  --mne-wolk-1: rgb(19 111 136 / 0.20);
  --mne-wolk-2: rgb(224 122 95 / 0.18);
  --mne-wolk-3: rgb(242 184 128 / 0.22);

  --h-bg: #f5eee5;
  --h-surface: #fffaf3;
  --h-surface-2: #ffffff;
  --h-surface-3: #efe4d5;
  --h-border: #e6d8c6;
  --h-text: #1c2433;
  --h-text-2: #4c5566;
  --h-text-3: #6c7484;
  --h-accent: #0f6e85;
  --h-accent-hover: #0b5a6d;
  --h-accent-soft: #d6eef1;
  --h-accent-text: #0b5a6d;
  --h-radius-sm: 8px;
  --h-radius: 12px;
  --h-radius-lg: 16px;
  --h-radius-xl: 22px;
  --h-shadow-sm: 0 1px 2px rgb(60 40 20 / 0.06);
  --h-shadow: 0 1px 2px rgb(60 40 20 / 0.05), 0 8px 22px -10px rgb(60 40 20 / 0.22);
  --h-shadow-lg: 0 2px 6px rgb(60 40 20 / 0.08), 0 30px 60px -18px rgb(60 40 20 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mne-wolk-1: rgb(79 209 197 / 0.12);
    --mne-wolk-2: rgb(224 122 95 / 0.12);
    --mne-wolk-3: rgb(242 184 128 / 0.08);
    --h-bg: #0c1420;
    --h-surface: #131e2e;
    --h-surface-2: #192739;
    --h-surface-3: #213247;
    --h-border: #26384e;
    --h-text: #edf2f7;
    --h-text-2: #b0bccb;
    --h-text-3: #8394a8;
    --h-accent: #4fd1c5;
    --h-accent-hover: #7ce0d6;
    --h-accent-soft: #11373a;
    --h-accent-text: #7ce0d6;
  }
}
:root[data-theme="dark"] {
  --h-bg: #0c1420; --h-surface: #131e2e; --h-surface-2: #192739; --h-surface-3: #213247; --h-border: #26384e;
  --h-text: #edf2f7; --h-text-2: #b0bccb; --h-text-3: #8394a8;
  --h-accent: #4fd1c5; --h-accent-hover: #7ce0d6; --h-accent-soft: #11373a; --h-accent-text: #7ce0d6;
}

h1, h2, h3, .modal__title, .brand__name, .plankop__naam, .item__naam { font-family: var(--mne-display); letter-spacing: -0.01em; }

/* de balk: avondlucht boven de baai */
.topbar.kop { background: var(--mne-avond); border: 0; box-shadow: 0 6px 24px -12px rgb(11 57 84 / 0.7); }
.kop .brand__name { font-size: 1.15rem; font-weight: 700; color: #fff; }
.kop .brand__app { color: rgb(255 255 255 / 0.75); }
.kop .tabs__tab { color: rgb(255 255 255 / 0.78); border-radius: var(--h-radius-pill); padding-inline: 0.85rem; transition: background var(--h-dur-1) var(--h-ease), color var(--h-dur-1); }
.kop .tabs__tab:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.kop .tabs__tab[aria-selected="true"] { background: rgb(255 255 255 / 0.22); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.kop .tabs__tab[aria-selected="true"]::after { display: none; }
.kop .tabs__count { background: rgb(255 255 255 / 0.25); color: #fff; }
.kop #ik { background: rgb(255 255 255 / 0.95); color: var(--mne-diep); font-weight: 600; }

/* kleurwolken achter het paneel; het paneel zelf is doorzichtig */
.werk { position: relative; isolation: isolate; }
.werk::before, .werk::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px);
  width: 34vw; height: 34vw; max-width: 520px; max-height: 520px;
}
.werk::before { left: -8vw; top: 4vh; background: radial-gradient(circle, var(--mne-wolk-1), transparent 70%); animation: mne-drijf 22s ease-in-out infinite; }
.werk::after { left: 18vw; bottom: -10vh; background: radial-gradient(circle, var(--mne-wolk-2), var(--mne-wolk-3) 45%, transparent 72%); animation: mne-drijf 28s ease-in-out infinite reverse; }
.paneel { background: transparent; }
.paneel__kop { background: color-mix(in srgb, var(--h-bg) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@keyframes mne-drijf {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3vw, -4vh) scale(1.08); }
}

/* kaarten: rond, warm, komen zacht binnen en komen iets omhoog onder de muis */
.card { border-radius: var(--h-radius-lg); border-color: var(--h-border); background: var(--h-surface); box-shadow: var(--h-shadow); }
.item { border-left: 0; position: relative; overflow: hidden; transition: transform var(--h-dur-2) var(--h-ease), box-shadow var(--h-dur-2) var(--h-ease); }
.item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--soort); }
.item:hover { transform: translateY(-2px); box-shadow: var(--h-shadow-lg); }
.item__icoon { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.2rem;
  background: color-mix(in srgb, var(--soort) 16%, var(--h-surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soort) 30%, transparent); }
.item.is-nieuw { animation: mne-plop 900ms var(--h-ease); }
.lijst > * { animation: mne-in 420ms var(--h-ease) both; }
.lijst > *:nth-child(2) { animation-delay: 40ms; } .lijst > *:nth-child(3) { animation-delay: 80ms; } .lijst > *:nth-child(4) { animation-delay: 120ms; }
.lijst > *:nth-child(5) { animation-delay: 160ms; } .lijst > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes mne-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mne-plop { 0% { box-shadow: 0 0 0 0 var(--h-accent); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--h-accent) 35%, transparent); } 100% { box-shadow: var(--h-shadow); } }

.tag { border-radius: var(--h-radius-pill); transition: transform var(--h-dur-1) var(--h-ease), background var(--h-dur-1); }
.tag:hover { transform: translateY(-1px); }
.tag.is-active { background: var(--mne-diep); color: #fff; border-color: transparent; }
.btn { border-radius: var(--h-radius-pill); }
.btn--primary { background: var(--mne-avond); background-size: 160% 100%; border: 0; color: #fff; transition: background-position 400ms var(--h-ease), transform var(--h-dur-1); }
.btn--primary:hover { background-position: 100% 0; transform: translateY(-1px); }
.modal { border-radius: var(--h-radius-xl); }

/* de knop om een idee te droppen: altijd onderin het paneel */
.drop-knop {
  position: fixed; z-index: 900; left: max(16px, calc(min(46%, 100%) - 230px)); bottom: 22px;
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.3rem; border: 0; border-radius: var(--h-radius-pill);
  font: 700 1rem var(--mne-display); color: #fff; background: var(--mne-avond); background-size: 180% 100%; cursor: pointer;
  box-shadow: 0 14px 30px -12px rgb(11 57 84 / 0.75); transition: transform var(--h-dur-2) var(--h-ease), background-position 500ms var(--h-ease);
}
.drop-knop:hover { transform: translateY(-3px) scale(1.02); background-position: 100% 0; }
.drop-knop[hidden] { display: none; }
.drop-knop__plus { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgb(255 255 255 / 0.25); font-size: 1.2rem; line-height: 1; }

/* overzicht: de kop met aftellen */
.held { position: relative; overflow: hidden; border-radius: var(--h-radius-xl); padding: var(--h-space-6) var(--h-space-5) var(--h-space-5); color: #fff; background: var(--mne-avond); box-shadow: var(--h-shadow-lg); margin-top: var(--h-space-4); }
.held::after { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; background: radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.18), transparent 60%); pointer-events: none; }
.held__boven { font-size: var(--h-fs-sm); opacity: 0.85; text-transform: uppercase; letter-spacing: 0.08em; }
.held__titel { font: 800 clamp(1.6rem, 3.2vw, 2.4rem)/1.05 var(--mne-display); margin: var(--h-space-1) 0 var(--h-space-4); color: #fff; text-shadow: 0 2px 12px rgb(11 57 84 / 0.35); }
.held__tellers { display: flex; flex-wrap: wrap; gap: var(--h-space-3); }
.teller { min-width: 7.5rem; padding: var(--h-space-3) var(--h-space-4); border-radius: var(--h-radius-lg); background: rgb(255 255 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); backdrop-filter: blur(4px); }
.teller__getal { font: 800 2rem/1 var(--mne-display); }
.teller__wat { font-size: var(--h-fs-sm); opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .werk::before, .werk::after, .lijst > *, .item.is-nieuw { animation: none; }
  .item:hover, .drop-knop:hover, .tag:hover { transform: none; }
}
@media (max-width: 900px) {
  .drop-knop { left: auto; right: 16px; bottom: 16px; }
  .werk::before, .werk::after { display: none; }
}