/* =========================================================================
   Bucketly — design system (plain CSS port of the Tailwind v4 @theme tokens)
   Same variable names / same oklch values, so it maps 1:1 onto the Tailwind
   build later: --primary -> bg-primary, --muted-foreground -> text-muted-foreground, …
   ========================================================================= */

:root {
  /* typography */
  --font-sans: "Nunito Sans", sans-serif;
  --font-display: "Sora", sans-serif;

  /* radii */
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* colour */
  --background: oklch(0.985 0.008 90);
  --foreground: oklch(0.22 0.035 282);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.53 0.23 292);
  --primary-foreground: oklch(0.99 0 0);
  --primary-soft: oklch(0.93 0.055 294);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.955 0.012 90);
  --muted-foreground: oklch(0.5 0.03 280);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.9 0.018 285);
  --input: oklch(0.88 0.02 285);
  --ring: oklch(0.58 0.2 292);
  --coral: oklch(0.68 0.19 31);
  --coral-foreground: oklch(0.99 0 0);
  --coral-soft: oklch(0.94 0.045 28);
  --turquoise: oklch(0.61 0.13 187);
  --turquoise-soft: oklch(0.94 0.04 187);
  --success: oklch(0.59 0.14 150);
  --success-foreground: oklch(0.99 0 0);
  --success-soft: oklch(0.94 0.05 150);
  --yellow-soft: oklch(0.95 0.1 92);
  --yellow-foreground: oklch(0.48 0.11 80);
  --overlay: oklch(0.22 0.045 282);
  --overlay-foreground: oklch(0.99 0 0);
  --avatar: oklch(0.78 0.12 45);
  --avatar-foreground: oklch(0.25 0.05 35);
  --hero: oklch(0.97 0.025 292);
  --world: oklch(0.96 0.035 180);
  --profile: oklch(0.96 0.04 30);

  /* elevation */
  --shadow-card: 0 8px 24px color-mix(in oklab, var(--foreground) 7%, transparent);
  --shadow-card-hover: 0 18px 44px color-mix(in oklab, var(--foreground) 12%, transparent);
  --shadow-feature: 0 24px 70px color-mix(in oklab, var(--foreground) 16%, transparent);
  --shadow-nav: 0 -8px 30px color-mix(in oklab, var(--foreground) 8%, transparent);
  --shadow-fab: 0 10px 30px color-mix(in oklab, var(--primary) 35%, transparent);

  color-scheme: light;
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.62 0.2 292);
  --primary-foreground: oklch(0.99 0 0);
  --primary-soft: oklch(0.32 0.09 294);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --coral-soft: oklch(0.34 0.09 28);
  --turquoise-soft: oklch(0.3 0.07 187);
  --success-soft: oklch(0.3 0.08 150);
  --yellow-soft: oklch(0.34 0.08 92);
  --yellow-foreground: oklch(0.85 0.11 88);

  color-scheme: dark;
}

/* ---------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

/* Houd altijd ruimte vrij voor de scrollbalk. Zonder dit is een pagina die
   niet scrolt (Mijn lijst) ~15px breder dan een pagina die wel scrolt
   (Wereld, Profiel), en verspringt de tabbalk bij elke tabwissel. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, a, input, select, textarea { letter-spacing: 0; font: inherit; color: inherit; }

/* Geen blauwe flits en geen tekstselectie bij het aantikken op de telefoon.
   Invoervelden en gewone tekst blijven wél selecteerbaar. */
html { -webkit-tap-highlight-color: transparent; }

button,
a,
.card,
.chip,
.coll-row,
.pick-row,
.memory,
.swatch,
.segmented button,
.tabbar a,
.mainnav a {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* en toch alles kunnen kopiëren waar het telt */
input, textarea, select, .detail-body p, .card-note { -webkit-user-select: text; user-select: text; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* author styles beat the UA sheet, so make [hidden] win everywhere */
[hidden] { display: none !important; }

/* Everything inherits Nunito Sans from body; only the big display titles
   below opt into Sora via .font-display. */
h1, h2, h3, h4 { margin: 0; }

.font-display { font-family: var(--font-display); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }


/* Layout container — Tailwind max-w-7xl + px-8 */
.shell { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 2rem; }

/* --------------------------------------------------------------- topbar -- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 5rem;                 /* h-20 */
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }

.brand-mark {
  width: 2.5rem;                /* size-10 */
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--primary) 30%, transparent);
}

.brand-name {
  font-size: 1.25rem;           /* text-xl */
  font-weight: 700;
  letter-spacing: -0.025em;
}

.mainnav { display: flex; align-items: center; gap: 2px; }

.mainnav a {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color .15s, background-color .15s;
}
.mainnav a:hover { color: var(--foreground); background: var(--muted); }
.mainnav a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }

.topbar-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--avatar);
  color: var(--avatar-foreground);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: .3px;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;               /* h-10 */
  padding-inline: 1.25rem;      /* px-5 */
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .12s, box-shadow .2s, background-color .15s;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--primary) 28%, transparent);
}
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, black); }

/* ------------------------------------------------------------ page head -- */

.page { padding-block: 3.75rem 5rem; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;           /* text-xs */
  font-weight: 1000;
  letter-spacing: .051em;         /* tracking-widest */
  text-transform: uppercase;
  color: var(--primary);
}

.page-title {
  font-family: var(--font-display);   /* Sora */
  font-size: 3rem;              /* text-5xl */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.025em;     /* tracking-tight */
}

.page-meta {
  margin: 0.75rem 0 0;
  font-size: 1rem;              /* text-base */
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .page-title { font-size: 3.75rem; }   /* sm:text-6xl */
}

/* --------------------------------------------------------------- search -- */

.toolbar {
  display: flex;
  gap: 1rem;
  margin-top: 2.25rem;          /* mt-9 */
  flex-wrap: wrap;
}

.search { position: relative; flex: 1 1 220px; min-width: 0; }
.search svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 3rem;                 /* h-12 */
  padding: 0 1rem 0 2.875rem;
  border-radius: var(--radius-2xl);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-size: 1rem;
  color: var(--foreground);
}
.search input::placeholder { color: var(--muted-foreground); }
.search input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent); }

/* small icon button sitting beside the search field */
.filter-pill {
  position: relative;
  flex: none;
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-2xl);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--muted-foreground);
  transition: background-color .15s, color .15s, border-color .15s;
}
.filter-pill:hover { background: var(--muted); color: var(--foreground); }

.filter-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--primary);
}

/* ---------------------------------------------------------------- chips -- */

.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }

.chip {
  height: 1.9375rem;
  padding-inline: 0.875rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.875rem;          /* text-sm */
  font-weight: 600;
  color: var(--foreground);
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--muted); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: transparent; color: var(--primary-foreground); }

/* ----------------------------------------------------------------- grid -- */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;                 /* gap-7 */
  margin-top: 2.5rem;           /* mt-10 */
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.9,.3,1.1), box-shadow .22s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--muted); overflow: hidden; }
.card-media svg, .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
/* gentle zoom on hover — the heart and the Completed tag stay put */
.card:hover .card-media svg, .card:hover .card-media img { transform: scale(1.06); }

.fav {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;                /* size-10 */
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--overlay) 80%, transparent);
  color: var(--overlay-foreground);
  backdrop-filter: blur(4px);
  transition: transform .14s, background-color .15s;
}
.fav:hover { transform: scale(1.08); }
.fav[aria-pressed="true"] { color: var(--coral); }
/* half-size heart inside the same 44px circle */
.fav svg { width: 1.5rem; height: 1.5rem; }

.card-body { padding: 1.25rem; }   /* p-5 */

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

.badge {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;              /* h-7 */
  padding-inline: 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;           /* text-xs */
  font-weight: 1000;
  background: var(--primary-soft);
  color: var(--primary);
}
/* Lovable uses one purple badge for every category. Uncomment this block
   to colour badges per category instead.
.badge[data-cat="Travel"]      { background: var(--turquoise-soft); color: var(--turquoise); }
.badge[data-cat="Adventure"]   { background: var(--primary-soft);   color: var(--primary); }
.badge[data-cat="Experiences"] { background: var(--yellow-soft);    color: var(--yellow-foreground); }
.badge[data-cat="Food"]        { background: var(--coral-soft);     color: var(--coral); }
.badge[data-cat="Nature"]      { background: var(--success-soft);   color: var(--success); }
.badge[data-cat="Sports"]      { background: var(--turquoise-soft); color: var(--turquoise); }
.badge[data-cat="Personal"]    { background: var(--coral-soft);     color: var(--coral); }
.badge[data-cat="Skills"]      { background: var(--primary-soft);   color: var(--primary); }
.badge[data-cat="Career"]      { background: var(--yellow-soft);    color: var(--yellow-foreground); }
*/

.card-date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;          /* text-sm */
  color: var(--muted-foreground);
  white-space: nowrap;
}
.card-date .done { color: var(--success); }

.card-title {
  margin-top: 0.75rem;
  font-size: 1.25rem;           /* text-xl */
  font-weight: 700;
  line-height: 1.25;            /* leading-tight */
  letter-spacing: -0.025em;
}

.card-loc {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.card-loc svg { flex: none; }

.card-note {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  line-height: 1.625;           /* leading-relaxed */
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dropzone-remove { margin-top: 0.625rem; }

/* ---------------------------------------------------- kaart: collectie -- */
/* Dezelfde kaartvorm als een ervaring. Het verschil: alleen de naam van de
   collectie, daaronder de eerste vijf ervaringen met een vinkje, en op de
   plaats van de datum het aantal voltooid tegenover het totaal. */

.coll-card .card-top { justify-content: flex-end; }

.coll-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--foreground); }

.coll-list { list-style: none; margin: 0.875rem 0 0; padding: 0; display: grid; gap: 0.5rem; }

/* het vinkje staat vooraan, de titel erachter */
.coll-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.coll-row-title {
  font-size: 0.875rem;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coll-row-title[data-done="true"] { color: var(--muted-foreground); text-decoration: line-through; }

.coll-row-empty { font-size: 0.875rem; color: var(--muted-foreground); }

/* het vinkje: leeg vakje of groen aangevinkt */
.coll-check {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 2px solid var(--input);
  color: transparent;
}
.coll-check[data-done="true"] {
  background: var(--success);
  border-color: var(--success);
  color: var(--success-foreground);
}
.coll-check svg { width: 0.75rem; height: 0.75rem; }

.coll-more { margin: 0.625rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }

/* de samenvattingsregel vervangt de vijf regels zodra je lijstweergave kiest */
.coll-summary { display: none; }

/* ------------------------------------------ detail: lijst van een groep -- */

.coll-detail-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.25rem; }

.coll-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.coll-detail-row:last-child { border-bottom: 0; }

.coll-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  text-align: left;
  border-radius: var(--radius-sm);
}
.coll-detail-title { font-size: 0.9375rem; font-weight: 600; }
.coll-detail-title[data-done="true"] { color: var(--muted-foreground); text-decoration: line-through; }

.coll-detail-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* --------------------------------------------- aanvinklijst in een venster -- */

.picker {
  margin-top: 0.625rem;
  max-height: 17rem;
  overflow-y: auto;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.picker-sm { max-height: 11rem; }

.picker .pick-row {
  display: flex;
  margin-bottom: 0;
  font-weight: 400;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.picker .pick-row:last-child { border-bottom: 0; }
.picker .pick-row:hover { background: var(--muted); }

/* het echte vakje blijft bedienbaar met toetsenbord, maar onzichtbaar */
.picker .pick-row input { position: absolute; opacity: 0; width: 0; height: 0; }

.pick-box {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 2px solid var(--input);
  color: transparent;
  transition: background-color .12s, border-color .12s;
}
.picker .pick-row input:checked + .pick-box {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.picker .pick-row input:focus-visible + .pick-box { outline: 2px solid var(--ring); outline-offset: 2px; }
.pick-box svg { width: 0.75rem; height: 0.75rem; }

.pick-text { display: grid; min-width: 0; }
.pick-text b { font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-text span { font-size: 0.8125rem; color: var(--muted-foreground); }

.pick-done {
  margin-left: auto;
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--success);
}

.picker-empty { margin: 0; padding: 1rem 0.875rem; font-size: 0.875rem; color: var(--muted-foreground); }
.picker-empty a { color: var(--primary); font-weight: 700; text-decoration: underline; }

.picker-meta { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }

/* ----------------------------------------------------------- empty state -- */

.empty {
  grid-column: 1 / -1;
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 1rem;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1023px) { .mainnav { display: none; } }

@media (max-width: 639px) {
  .topbar-inner { height: 4rem; }
  .btn-label { display: none; }
  .btn-primary { padding-inline: 0.875rem; }
  .page { padding-block: 2rem 3rem; }
  .page-head > .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================ modal == */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in oklab, black 80%, transparent);
}
.backdrop.is-open { display: grid; }

.modal {
  width: 100%;
  max-width: 42rem;             /* max-w-2xl */
  max-height: 94vh;
  overflow-y: auto;
  /* scrolls, but without the OS scrollbar sitting inside the card */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--background);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-feature);
  position: relative;
}

.modal::-webkit-scrollbar { width: 0; height: 0; }

.modal-head {
  position: relative;
  text-align: center;
  padding: 2.25rem 2.25rem 1.5rem;
  background: color-mix(in oklab, var(--primary-soft) 60%, var(--card));
}

.modal-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--primary);
}

.modal-title {
  font-family: var(--font-display);   /* Sora */
  font-size: 1.875rem;          /* text-3xl */
  font-weight: 700;
  line-height: 1.2;
}

.modal-sub {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--foreground);
  transition: background-color .15s;
}
.modal-close:hover { background: color-mix(in oklab, var(--foreground) 8%, transparent); }

.modal-body { padding: 2.25rem; }

/* ----------------------------------------------------------- form fields -- */

.field { min-width: 0; }
.field + .field { margin-top: 1.25rem; }

.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}
.field .req { color: var(--coral); }

.control {
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: 1rem;
  color: var(--foreground);
}
.control::placeholder { color: var(--muted-foreground); }
.control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in oklab, var(--primary) 15%, transparent);
}

textarea.control-sm { min-height: 5rem; }

textarea.control {
  height: auto;
  min-height: 7rem;             /* min-h-28 */
  padding: 0.875rem 1rem;
  line-height: 1.6;
  resize: vertical;
}

select.control { padding-right: 0.5rem; }

#exp-title { border-radius: var(--radius-2xl); }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.field-grid .field + .field { margin-top: 0; }
/* a field after the two-column grid needs the same gap as field + field */
.field-grid + .field { margin-top: 1.25rem; }

/* -------------------------------------------------------------- dropzone -- */

.dropzone {
  width: 100%;
  margin-top: 1.25rem;
  padding: 1.75rem;
  display: grid;
  place-items: center;
  gap: 0.75rem;
  border: 2px dashed color-mix(in oklab, var(--primary) 35%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--primary-soft) 30%, var(--card));
  color: var(--primary);
  font-size: 1rem;
  font-weight: 600;
  min-height: 7rem;
  transition: background-color .15s, border-color .15s;
}
.dropzone:hover { background: color-mix(in oklab, var(--primary-soft) 55%, var(--card)); }
.dropzone img {
  width: 100%;
  max-height: 11rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ---------------------------------------------------------------- footer -- */

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.75rem;
  margin-top: 2rem;
}

.btn-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius-sm);
}
.btn-text:hover { color: var(--muted-foreground); }

@media (max-width: 639px) {
  .backdrop { padding: 0.75rem; }
  .modal-head, .modal-body { padding: 1.5rem; }
  .field-grid { grid-template-columns: 1fr; }
}

/* ========================================================= detail view == */

.modal.detail { max-width: 56rem; background: var(--card); }   /* max-w-4xl */

.detail-media {
  margin: 0;                    /* full-bleed: image spans the whole card */
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--muted);
}
.detail-media img, .detail-media svg { width: 100%; height: 100%; object-fit: cover; }

.detail-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--overlay) 88%, transparent);
  color: var(--overlay-foreground);
  transition: transform .14s;
}
.detail-back:hover { transform: scale(1.06); }

/* sits on the photo, so it gets the same dark pill as the back button */
.detail-edit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--overlay) 88%, transparent);
  color: var(--overlay-foreground);
  transition: transform .14s;
}
.detail-edit:hover { transform: scale(1.06); }

.detail-body {
  background: var(--background);
  padding: 2.75rem;
}

.detail-badges { display: flex; align-items: center; gap: 0.625rem; }

.pill-done {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--muted);
  color: var(--foreground);
}

.detail-title {
  font-family: var(--font-display);   /* Sora */
  margin-top: 1rem;
  font-size: 2.25rem;                 /* text-4xl */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.detail-loc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  color: var(--muted-foreground);
}

.detail-link { margin: 0.75rem 0 0; font-size: 1rem; }
.detail-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-weight: 600;
}
.detail-link a:hover { text-decoration: underline; }

.detail-desc {
  margin: 1.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--foreground);
}

/* ---------------------------------------------------------- stat strip -- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat { padding: 1rem 1.125rem; border-left: 1px solid var(--border); }
.stat:first-child { border-left: 0; }
.stat span { display: block; font-size: 0.875rem; color: var(--muted-foreground); }
.stat b { display: block; margin-top: 0.375rem; font-size: 1.0625rem; font-weight: 700; }
.stat b.is-empty { color: var(--muted-foreground); font-weight: 600; }

/* --------------------------------------------------------- two columns -- */

.detail-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

.detail-cols h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.detail-cols p {
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

/* ------------------------------------------------- memories + collected -- */

.memories {
  width: 100%;
  margin-top: 2rem;
  padding: 1.75rem;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  text-align: center;
  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--primary-soft) 45%, var(--card));
  transition: background-color .15s;
}
.memories:hover { background: color-mix(in oklab, var(--primary-soft) 70%, var(--card)); }
.memories .mem-ic { color: var(--primary); }
.memories b { font-size: 1.0625rem; font-weight: 700; color: var(--foreground); }
.memories span { font-size: 0.9375rem; color: var(--muted-foreground); }

/* ------------------------------------------------ installeren op je toestel -- */

.install-slot { display: grid; justify-items: center; gap: 0.5rem; margin-top: 0.875rem; }

.install-hint {
  margin: 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--muted-foreground);
}

/* ------------------------------------------------- melding over bewaren -- */
/* Verschijnt alleen als er iets mis is met de verbinding naar de server, of
   als een ander toestel ondertussen iets gewijzigd heeft. */

.sync-notice {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 70;
  transform: translate(-50%, calc(100% + 2rem));
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.75rem 1.125rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  background: var(--overlay);
  color: var(--overlay-foreground);
  box-shadow: var(--shadow-feature);
  transition: transform .25s cubic-bezier(.2,.9,.3,1.1);
}
.sync-notice.is-on { transform: translate(-50%, 0); }
.sync-notice[data-kind="ok"] { background: var(--success); color: var(--success-foreground); }

/* op kleine schermen staat de tabbalk onderaan in de weg */
@media (max-width: 1023px) {
  .sync-notice { bottom: 5.5rem; }
}

/* ------------------------------------------------------- herinneringen -- */

.memories-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2rem;
}
.memories-head h3 { font-size: 1.0625rem; font-weight: 700; }
.memories-head span { font-size: 0.875rem; color: var(--muted-foreground); }

.memories-grid {
  margin-top: 0.875rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.memory { position: relative; margin: 0; }

.memory-open {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--muted);
}
.memory-open img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.memory-open:hover img { transform: scale(1.05); }

/* het kruisje verschijnt op de foto zelf */
.memory-del {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--overlay) 70%, transparent);
  color: var(--overlay-foreground);
  opacity: 0;
  transition: opacity .15s;
}
.memory:hover .memory-del,
.memory-del:focus-visible { opacity: 1; }
.memory-del svg { width: 0.875rem; height: 0.875rem; }

.memory figcaption {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.memory-error {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--destructive);
}

/* op een aanraakscherm is er geen hover — toon het kruisje dan altijd */
@media (hover: none) {
  .memory-del { opacity: 1; }
}

/* ---------------------------------------------- een foto groot bekijken -- */

.photo-view { z-index: 60; padding: 1.5rem; }
.photo-view img {
  max-width: min(100%, 60rem);
  max-height: 88vh;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-feature);
}
.photo-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--overlay) 70%, transparent);
  color: var(--overlay-foreground);
}

.collected {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--success-soft);
  color: var(--success);
}
.collected b { display: block; font-size: 1.0625rem; font-weight: 700; }
.collected span { display: block; margin-top: 0.25rem; font-size: 0.9375rem; }

/* card cover badge for finished goals */
.card-done {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.875rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--success) 88%, transparent);
  color: var(--success-foreground);
  font-size: 0.8125rem;
  font-weight: 700;
}

.card { cursor: pointer; }

@media (max-width: 767px) {
  /* .detail-media stays full-bleed here too — no margin override */
  .detail-body { padding: 1.5rem; }
  .detail-cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .detail-title { font-size: 1.75rem; }
}

/* ======================================================== profile page == */

/* the profile page centres on a narrower column than the list page */
.shell-narrow { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 2rem; }

.profile-hero {
  background: var(--profile);
  padding-block: 4rem;
  text-align: center;
}

.profile-avatar {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--avatar);
  color: var(--avatar-foreground);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 0 0 4px color-mix(in oklab, white 75%, transparent);
}

.profile-name {
  font-family: var(--font-display);   /* Sora */
  margin-top: 1.5rem;
  font-size: 2.25rem;                 /* text-4xl */
  font-weight: 700;
  letter-spacing: -0.025em;
}

.profile-tagline {
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
  color: var(--muted-foreground);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  margin-top: 1.5rem;
  padding-inline: 1.25rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: background-color .15s;
}
.btn-outline:hover { background: var(--muted); }

/* ------------------------------------------------------- profile stats -- */

.profile-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 2.5rem;
}

.pstat {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1rem;
  text-align: center;
}
.pstat b { display: block; font-size: 1.5rem; font-weight: 700; }   /* text-2xl */
.pstat span { display: block; margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ------------------------------------------------------- achievements -- */

.section-title {
  font-family: var(--font-display);   /* Sora */
  margin-top: 3.5rem;
  font-size: 1.875rem;                /* text-3xl */
  font-weight: 700;
  letter-spacing: -0.025em;
}

.achievements {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.achv {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1rem;
  text-align: center;
}
.achv .ic {
  width: 3.125rem;
  height: 3.125rem;
  margin: 0 auto 0.875rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.achv b { display: block; font-size: 1rem; font-weight: 700; }
.achv span { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

.achv[data-tone="coral"]     .ic { background: var(--coral-soft);     color: var(--coral); }
.achv[data-tone="primary"]   .ic { background: var(--primary-soft);   color: var(--primary); }
.achv[data-tone="turquoise"] .ic { background: var(--turquoise-soft); color: var(--turquoise); }
.achv[data-tone="yellow"]    .ic { background: var(--yellow-soft);    color: var(--yellow-foreground); }
.achv[data-tone="success"]   .ic { background: var(--success-soft);   color: var(--success); }

.achv[data-locked="true"] { opacity: .55; }
.achv[data-locked="true"] .ic { background: var(--muted); color: var(--muted-foreground); }

/* ---------------------------------------------------------- year story -- */

.story {
  margin-top: 3rem;
  padding: 2.5rem;
  border-radius: var(--radius-2xl);
  background: var(--overlay);
  color: var(--overlay-foreground);
}

.story-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--overlay-foreground) 55%, transparent);
}

.story h2 {
  font-family: var(--font-display);   /* Sora */
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  max-width: 22ch;
}

.story p {
  margin: 0.875rem 0 0;
  font-size: 1.0625rem;
  color: color-mix(in oklab, var(--overlay-foreground) 65%, transparent);
}

@media (max-width: 1023px) { .profile-stats, .achievements { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .profile-stats, .achievements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-hero { padding-block: 2.5rem; }
  .profile-name { font-size: 1.75rem; }
  .story { padding: 1.5rem; }
  .story h2 { font-size: 1.5rem; }
}

/* ==================================================== mobile tab bar == */

.tabbar { display: none; }

@media (max-width: 1023px) {
  .tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-nav);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .tabbar a {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
    transition: color .15s;
  }
  /* vast icoonvak: de rijhoogte hangt zo niet af van wat er in het icoon zit */
  .tabbar a > span { display: grid; place-items: center; width: 22px; height: 22px; }
  .tabbar a svg { width: 100%; height: 100%; }

  .tabbar a[aria-current="page"] { color: var(--primary); }

  /* keep the last cards clear of the bar */
  body { padding-bottom: 4.5rem; }
}

/* ============================================ mobile floating add button == */

.fab {
  position: fixed;
  right: 1rem;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  z-index: 46;
  width: 3.5rem;
  height: 3.5rem;
  display: none;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-fab);
  transition: transform .14s;
}
.fab:active { transform: scale(.94); }

@media (max-width: 1023px) {
  /* the tab bar and the floating button replace the top bar on small screens */
  .topbar { display: none; }
  .page-head > .btn { display: none; }
  .fab { display: grid; }
}

/* ===================================================== status filters == */

.filter-wrap { position: relative; }

.filter-pill[aria-expanded="true"],
.filter-pill.is-active {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  width: 17.5rem;
  max-width: calc(100vw - 2rem);
  display: none;
  gap: 0.875rem;
  padding: 1.125rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-hover);
}
.filter-panel.is-open { display: grid; }

.filter-field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted-foreground);
}

.filter-field select {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.5rem 0 0.75rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 0.9375rem;
  color: var(--foreground);
}
.filter-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

.filter-clear {
  justify-self: start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  padding: 0.25rem 0;
}
.filter-clear:hover { color: var(--primary); }

@media (max-width: 639px) {
  .filter-panel { right: 0; left: auto; width: 16rem; }
}


/* ================================================== mark-as-done control == */

.done-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.done-action.is-hidden { display: none; }

.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: none;
  height: 3rem;
  padding-inline: 1.25rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
  color: var(--destructive);
  font-size: 1rem;
  font-weight: 600;
  transition: background-color .15s;
}
.btn-delete:hover { background: color-mix(in oklab, var(--destructive) 8%, var(--card)); }

/* ------------------------------------------------ delete confirmation -- */

.confirm-delete {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding: 1.125rem 1.375rem;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--destructive) 7%, var(--card));
  border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
}
.confirm-delete.is-open { display: flex; }

.confirm-delete b { display: block; font-size: 1rem; font-weight: 700; }
.confirm-delete span { display: block; margin-top: 0.125rem; font-size: 0.9375rem; color: var(--muted-foreground); }

.confirm-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding-inline: 1.25rem;
  border-radius: 999px;
  background: var(--destructive);
  color: var(--destructive-foreground);
  font-size: 0.9375rem;
  font-weight: 700;
  transition: background-color .15s;
}
.btn-danger:hover { background: color-mix(in oklab, var(--destructive) 88%, black); }

.btn-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding-inline: 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--success);
  color: var(--success-foreground);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--success) 28%, transparent);
  transition: transform .12s, background-color .15s;
}
.btn-done:active { transform: scale(.98); }
.btn-done:hover { background: color-mix(in oklab, var(--success) 90%, black); }

/* undoing needs no ceremony — a plain outline button on every screen */
.btn-undone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding-inline: 1.5rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: background-color .15s, color .15s;
}
.btn-undone:hover { background: var(--muted); color: var(--foreground); }

/* the phone version: drag the handle across to confirm */
.slide-done {
  --p: 0;
  position: relative;
  display: none;
  width: 100%;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
}

.slide-fill {
  position: absolute;
  inset: 0;
  background: var(--success-soft);
  transform: scaleX(var(--p));
  transform-origin: left center;
  transition: opacity .2s;
}

.slide-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 2.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted-foreground);
  pointer-events: none;
  opacity: calc(1 - var(--p));
}

.slide-handle {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--success);
  color: var(--success-foreground);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--foreground) 18%, transparent);
  touch-action: none;
  cursor: grab;
}
.slide-handle:active { cursor: grabbing; }

@media (max-width: 767px) {
  .done-action .btn-done { display: none; }
  .slide-done { display: block; flex: 1; min-width: 0; }
  /* icon-only delete so the slider keeps room to travel */
  .btn-delete { width: 3rem; padding-inline: 0; }
  .btn-delete .btn-delete-label { display: none; }
  .confirm-delete { flex-direction: column; align-items: stretch; }
  .confirm-actions { margin-left: 0; justify-content: flex-end; }
}

/* ============================================================ World page == */

.world-hero { background: var(--world); padding-block: clamp(1.75rem, 3vw, 2rem) 2.5rem; }

.world-title {
  font-family: var(--font-display);   /* Sora */
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.world-sub { margin: 0.5rem 0 0; font-size: 1rem; color: var(--muted-foreground); }

/* the heading block sits tighter here than on the list page */
.world-hero .eyebrow { font-size: 0.8rem; margin-bottom: 0.375rem; }

/* ------------------------------------------------------------- the map -- */

.map-card {
  position: relative;
  margin-top: 1.5rem;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  border-radius: var(--radius-3xl);
  background: color-mix(in oklab, var(--yellow-soft) 30%, var(--card));
  box-shadow: var(--shadow-card);
}

.map-wrap { position: relative; aspect-ratio: 2 / 1; }
.map-wrap svg { overflow: visible; }
.map-wrap svg { width: 100%; height: 100%; display: block; }

.map-country {
  fill: color-mix(in oklab, var(--foreground) 12%, transparent);   /* light grey by default */
  stroke: color-mix(in oklab, var(--card) 70%, transparent);
  stroke-width: 0.4;
  transition: fill .15s;
}
.map-country[data-state="visited"] { fill: var(--success); }
.map-country[data-state="dream"]   { fill: var(--primary); }
.map-country[data-state="visited"]:hover { fill: color-mix(in oklab, var(--success) 80%, black); }
.map-country[data-state="dream"]:hover   { fill: color-mix(in oklab, var(--primary) 80%, black); }

/* teardrop pin, same trick as the design system's .map-pin */
.map-pin {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  margin: -2.5rem 0 0 -1.25rem;   /* anchor the point at the coordinate */
  display: grid;
  place-items: center;
  border-radius: 9999px 9999px 9999px 0;
  background: var(--card);
  box-shadow: var(--shadow-card-hover);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.map-pin:hover { transform: rotate(-45deg) scale(1.1); }
.map-pin span {
  transform: rotate(45deg);       /* keep the country code upright */
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: .5px;
}
.map-pin[data-visited="true"] { color: var(--success); }
.map-pin[data-visited="false"] { color: var(--primary); }

.map-legend {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: 0.875rem;
}
.map-legend b { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.map-legend i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }
.map-legend .dream { color: var(--primary); }
.map-legend .visited { color: var(--success); }

/* ---------------------------------------------------------- world stats -- */

.world-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.world-stats .wstat { padding: 1.25rem 0.75rem; text-align: center; border-left: 1px solid var(--border); }
.world-stats .wstat:first-child { border-left: 0; }
.world-stats b { display: block; font-size: 1.5rem; font-weight: 700; }
.world-stats span { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* -------------------------------------------------------------- stamps -- */

.stamps { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.stamps-empty { font-size: 0.9375rem; color: var(--muted-foreground); }
.stamps-label { font-size: 0.9375rem; font-weight: 700; color: var(--muted-foreground); margin-right: 0.5rem; }

.stamp {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ------------------------------------------------------------- horizon -- */

.places-filter {
  position: relative;
  width: min(100%, 20rem);
  margin-top: 1rem;
}
.places-filter > span {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.places-filter input {
  width: 100%;
  height: 2.75rem;
  padding: 0 2.25rem 0 2.75rem;
  border-radius: var(--radius-2xl);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-size: 0.9375rem;
  color: var(--foreground);
}
.places-filter input::placeholder { color: var(--muted-foreground); }
.places-filter input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}
.place-clear {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--muted-foreground);
}
.place-clear:hover { background: var(--muted); color: var(--foreground); }

/* our own suggestion list — a native <datalist> can't be styled */
.suggest {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-hover);
}

.suggest li {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.suggest li:hover,
.suggest li.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* Chrome draws a dropdown arrow for inputs with a list — we have neither */
.places-filter input::-webkit-calendar-picker-indicator { display: none !important; }

.places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: 1.5rem;
}
.place-media { position: relative; }
.place-media img { width: 100%; height: 100%; object-fit: cover; }

.place {
  background: var(--card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.9,.3,1.1), box-shadow .22s;
}
.place:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.place-media { aspect-ratio: 3 / 2; overflow: hidden; }
.place-media svg { width: 100%; height: 100%; object-fit: cover; }
.place-body { padding: 1.25rem 1.5rem 1.5rem; }
.place-body b { display: block; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.place-body span { display: block; margin-top: 0.25rem; font-size: 0.9375rem; color: var(--muted-foreground); }

/* On a desktop, keep the whole map above the fold: the card is 2:1, so cap
   its width at twice the height we have left after the header. */
@media (min-width: 1024px) {
  .map-card { max-width: min(100%, calc((100vh - 17rem) * 2)); margin-inline: auto; }
}

@media (max-width: 1023px) {
  .world-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .world-stats .wstat:nth-child(3n+1) { border-left: 0; }
  .world-stats .wstat:nth-child(n+4) { border-top: 1px solid var(--border); }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .world-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* restore the divider first — the 3-column rule above still zeroes cell 4 */
  .world-stats .wstat:nth-child(even) { border-left: 1px solid var(--border); }
  .world-stats .wstat:nth-child(odd) { border-left: 0; }
  .world-stats .wstat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .places { grid-template-columns: 1fr; }
  .map-pin { width: 1.875rem; height: 1.875rem; margin: -1.875rem 0 0 -0.9375rem; }
  .map-pin span { font-size: 0.625rem; }
  .map-legend { gap: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; }
}

/* three tabs now that World exists */
@media (max-width: 1023px) {
  .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==================================================== profile settings == */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* De foto vult de cirkel en wordt bijgesneden in plaats van uitgerekt.
   overflow op de houder erbij: zonder dat steekt een grote foto eruit. */
.avatar, .profile-avatar { overflow: hidden; }
.avatar img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.avatar-edit { display: flex; align-items: center; gap: 1rem; }
.avatar-lg { width: 4.5rem; height: 4.5rem; font-size: 1.25rem; }
.avatar-actions { display: grid; gap: 0.25rem; justify-items: start; }

.btn-ghost-sm {
  height: 2.25rem;
  padding-inline: 1rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
}
.btn-ghost-sm:hover { background: var(--muted); }
.btn-text-sm { font-size: 0.8125rem; color: var(--muted-foreground); padding: 0.25rem 0; }
.btn-text-sm:hover { color: var(--primary); }

.swatches { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.swatch {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: transform .12s;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary);
}

.segmented {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.25rem;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border);
}
.segmented button {
  height: 2.25rem;
  padding-inline: 1.125rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: background-color .15s, color .15s;
}
.segmented button.is-on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-card); }

/* ======================================================== list view === */

.grid.is-list { grid-template-columns: 1fr; gap: 1.25rem; }

@media (min-width: 640px)  { .grid.is-list { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .grid.is-list { grid-template-columns: 1fr; } }

.grid.is-list .card {
  display: grid;
  grid-template-columns: 10rem 1fr;
  align-items: center;
  gap: 1.75rem;
  overflow: visible;            /* so the cover can lift out of the card */
  border-radius: var(--radius-2xl);
  padding: 1rem 1.75rem 1rem 0;
}
.grid.is-list .card:hover { transform: translateY(-3px); }

/* the cover overhangs the card's left edge and tilts towards the reader */
.grid.is-list .card-media {
  aspect-ratio: 4 / 3;
  width: 11rem;
  margin-left: -1.5rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transform: perspective(900px) rotateY(9deg) translateZ(30px);
  box-shadow:
    0 16px 30px color-mix(in oklab, var(--foreground) 22%, transparent),
    0 4px 10px color-mix(in oklab, var(--foreground) 12%, transparent);
  transition: transform .25s cubic-bezier(.2,.9,.3,1.1), box-shadow .25s;
}
.grid.is-list .card:hover .card-media {
  transform: perspective(900px) rotateY(6deg) translateZ(46px) translateY(-2px);
  box-shadow:
    0 22px 40px color-mix(in oklab, var(--foreground) 26%, transparent),
    0 6px 14px color-mix(in oklab, var(--foreground) 14%, transparent);
}
.grid.is-list .card:hover .card-media svg,
.grid.is-list .card:hover .card-media img { transform: none; }   /* no zoom here */

.grid.is-list .card-body { padding: 0; }
.grid.is-list .card-title { margin-top: 0.5rem; font-size: 1.125rem; }
.grid.is-list .card-note { display: none; }
.grid.is-list .card-done { display: none; }   /* the date already carries a tick */
.grid.is-list .fav { top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; }
.grid.is-list .fav svg { width: 0.875rem; height: 0.875rem; }

/* collecties in lijstweergave: naast de foto staat van boven naar onder de
   voortgang, de naam van de collectie en dezelfde vijf ervaringen */
.grid.is-list .coll-card { align-items: start; padding-block: 1.25rem; }
.grid.is-list .coll-card .card-media { align-self: center; }

.grid.is-list .coll-card .card-top { display: none; }   /* 1/2 zit al in de regel hieronder */

.grid.is-list .coll-summary {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted-foreground);
}

.grid.is-list .coll-card .card-title { margin-top: 0.125rem; }
.grid.is-list .coll-list { margin-top: 0.625rem; }

@media (max-width: 639px) {
  .grid.is-list .card { grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-right: 1rem; }
  .grid.is-list .card-media { width: 7.25rem; margin-left: -0.75rem; }
  .grid.is-list .card-title { font-size: 1rem; }
  .grid.is-list .fav { display: none; }
}