/* Reusable pieces, all in the visual language of the hint app. */

/* Cards ---------------------------------------------------------------- */
.card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

/* The gold-to-terracotta hairline on top is the signature of the series. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--gold), var(--terra), var(--gold));
}

.card--plain::before {
  display: none;
}

.card__label {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

.card__title {
  font-family: var(--font-d);
  font-size: 1.35rem;
  color: var(--brown);
  margin-bottom: var(--sp-2);
}

.card__text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--brown-m);
}

/* Countdown ------------------------------------------------------------ */
.countdown {
  text-align: center;
  padding: var(--sp-2) var(--sp-4) var(--sp-5);
}

.countdown__label {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown-l);
  margin-bottom: var(--sp-3);
}

.countdown__grid {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.countdown__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-2) var(--sp-3);
  min-width: 64px;
  box-shadow: var(--shadow-sm);
}

.countdown__num {
  display: block;
  font-family: var(--font-d);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  display: block;
  margin-top: var(--sp-1);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-l);
}

.countdown__note {
  margin-top: var(--sp-4);
  font-family: var(--font-d);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--brown-l);
}

/* Checklist ------------------------------------------------------------ */
.checklist {
  display: flex;
  flex-direction: column;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  border-top: 1px solid var(--border);
}

.checklist .check:first-child {
  border-top: 0;
}

/* The row itself is the tap target; a remove button sits next to it, never
   inside it — a button inside a button is invalid and misbehaves on iOS. */
.check__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: var(--sp-2) 0;
  text-align: left;
}

.check__toggle:active .check__box {
  transform: scale(0.92);
}

.check__box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 1.5px solid var(--border-s);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: transparent;
  background: var(--cream);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.check--done .check__box {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}

.check__body {
  flex: 1 1 auto;
  min-width: 0;
}

.check__text {
  font-size: 0.98rem;
  color: var(--brown);
  transition: color var(--t-fast) var(--ease);
}

.check--done .check__text {
  color: var(--brown-l);
  text-decoration: line-through;
  text-decoration-color: var(--border-s);
}

.check__quote {
  display: block;
  margin-top: 2px;
  font-family: var(--font-d);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--brown-l);
}

.check__week {
  display: inline-block;
  margin-top: var(--sp-1);
  padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
  background: rgba(196, 149, 42, 0.1);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.check__remove {
  flex: 0 0 auto;
  min-height: 0;
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.9rem;
  color: var(--brown-l);
  opacity: 0.6;
}

/* Add-your-own row ----------------------------------------------------- */
.add-row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.add-row__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}

.add-row__input:focus {
  border-color: var(--terra);
}

/* Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--terra), var(--gold));
  color: #fff;
  font-family: var(--font-d);
  font-size: 1.02rem;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.btn:active {
  opacity: 0.88;
  transform: scale(0.98);
}

.btn--small {
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.92rem;
  min-height: 40px;
}

.btn--ghost {
  background: transparent;
  color: var(--brown-m);
  border: 1px solid var(--border-s);
}

/* Progress line -------------------------------------------------------- */
.packed-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-l);
}

.packed-bar {
  flex: 1 1 auto;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(196, 149, 42, 0.15);
  overflow: hidden;
}

.packed-bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--gold), var(--terra));
  transition: width var(--t-base) var(--ease);
}

/* Menu bar ------------------------------------------------------------- */
.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  background: rgba(250, 245, 235, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2) 0 var(--sp-1);
  color: var(--brown-l);
  transition: color var(--t-fast) var(--ease);
}

.tabbar__btn--active {
  color: var(--terra);
}

.tabbar__icon {
  width: 22px;
  height: 22px;
  display: block;
}

.tabbar__label {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Day list ------------------------------------------------------------- */
.day-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.day-card {
  position: relative;
  display: block;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease);
}

/* De hele kaart is de knop naar de dag; het puzzelknopje ligt ernaast in de
   hoek, want een knop in een knop mag niet. */
.day-card__main {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
}

.day-card--locked {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
}

.day-card__main:active {
  transform: scale(0.985);
}

/* Rechtsonder, niet rechtsboven: daar staat de datum. */
.day-card__puzzle {
  position: absolute;
  bottom: var(--sp-3);
  right: var(--sp-3);
  min-height: 34px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(196, 149, 42, 0.08);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.day-card__puzzle:active {
  background: rgba(196, 149, 42, 0.2);
}

.day-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sp-4);
  bottom: var(--sp-4);
  width: 4px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--border-s);
}

.day-card--today::after   { background: var(--terra); }
.day-card--done::after    { background: var(--green); }
.day-card--catchup::after { background: var(--gold); }

.day-card:not(.day-card--locked):active {
  transform: scale(0.985);
}

.day-card--locked {
  background: rgba(255, 253, 248, 0.55);
  box-shadow: none;
}

.day-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.day-card__index {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.day-card__date {
  font-size: 0.72rem;
  color: var(--brown-l);
}

.day-card__city {
  font-family: var(--font-d);
  font-size: 1.25rem;
  color: var(--brown);
  margin-top: 2px;
}

.day-card--locked .day-card__city {
  color: var(--brown-l);
}

.day-card__state {
  margin-top: var(--sp-2);
  padding-right: 76px;
  font-size: 0.72rem;
  color: var(--brown-l);
}

/* Chips ---------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--today   { background: var(--terra); color: #fff; }
.chip--done    { background: var(--green-l); color: var(--green); }
.chip--catchup { background: rgba(196,149,42,0.14); color: #8A6410; }
.chip--pending { background: rgba(196,149,42,0.14); color: #8A6410; }
.chip--tbd     { background: rgba(155,123,106,0.14); color: var(--brown-l); }

/* Day detail ----------------------------------------------------------- */
.day-head {
  text-align: center;
  margin-bottom: var(--sp-4);
}

.day-head__index {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.day-head__date {
  font-family: var(--font-d);
  font-size: 1.7rem;
  margin-top: var(--sp-1);
}

.day-head__city {
  font-family: var(--font-d);
  font-style: italic;
  color: var(--brown-l);
}

.day-head__ribbon {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--terra), var(--gold));
  color: #fff;
  font-family: var(--font-d);
  font-size: 0.95rem;
}

.route {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.route__place {
  font-family: var(--font-d);
  font-size: 1.05rem;
  color: var(--brown);
}

.route__line {
  position: relative;
  flex: 1 1 auto;
  min-width: 26px;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--gold) 0 5px, transparent 5px 10px);
}

.route__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--sp-1);
  background: var(--card);
  font-size: 0.95rem;
}

/* Planning rows -------------------------------------------------------- */
.plan {
  display: flex;
  flex-direction: column;
}

.plan__row {
  border-top: 1px solid var(--border);
}

.plan:first-child .plan__row:first-child,
.plan__row:first-child {
  border-top: 0;
}

.plan__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) 0;
  text-align: left;
}

.plan__time {
  flex: 0 0 44px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--terra);
}

.plan__title {
  flex: 1 1 auto;
  font-size: 0.98rem;
  color: var(--brown);
}

.plan__row--tbd .plan__title,
.plan__row--tbd .plan__time {
  color: var(--brown-l);
}

.plan__caret {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--brown-l);
  transition: transform var(--t-fast) var(--ease);
}

.plan__row--open .plan__caret {
  transform: rotate(180deg);
}

.plan__body {
  padding: 0 0 var(--sp-3) 56px;
}

.plan__address {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--brown-m);
  margin-bottom: var(--sp-2);
}

.plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.plan__warning {
  margin: var(--sp-1) 0 var(--sp-2) 56px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--red-l);
  color: #922B21;
  font-size: 0.85rem;
}

.plan__admin {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
  color: var(--brown-l);
  line-height: 1.7;
}

/* Overlay for the Spanish card ----------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(61, 43, 31, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.overlay[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 340px;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--border);
  text-align: center;
}

.modal__label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

.modal__line {
  font-family: var(--font-d);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--brown);
  margin-bottom: var(--sp-5);
}

/* Illustrated map ------------------------------------------------------ */
/* No frame and no hairline: the drawing has its own edge. Rounded like the
   buttons, so it reads as a panel rather than a photo pasted on the page.
   overflow:hidden makes the corners actually cut the image. */
.map {
  position: relative;
  line-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.map__img {
  display: block;
  width: 100%;
  height: auto;
}

/* One invisible tap target per number on the drawing. Positioned as a
   percentage, so it stays on the number at every screen width. */
.map__hit {
  position: absolute;
  width: 13%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  min-height: 0;
  padding: 0;
}

.map__hit::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}

.map__hit:active::after {
  border-color: var(--terra);
}

/* A ring marks the stop they are in now. */
.map__hit--now::after {
  border-color: var(--terra);
  animation: map-pulse 2.4s ease-in-out infinite;
}

@keyframes map-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.18); opacity: 0.45; }
}

/* A tick over the numbers already reached. */
/* Sits on top of the number printed in the drawing and covers it: a finished
   stop shows a tick, a stop with days still to play an hourglass. */
.map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 4.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(61, 43, 31, 0.35);
}

.map__marker svg {
  width: 62%;
  height: 62%;
  display: block;
}

.map__marker--done {
  background: var(--green);
}

.map__marker--busy {
  background: var(--gold);
}

.map__hint {
  margin-top: var(--sp-3);
  font-family: var(--font-d);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--brown-l);
  text-align: center;
}

/* Enlarged view: pan around at natural size. */
.map-big {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--cream);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
}

.map-big[hidden] {
  display: none;
}

/* Three times the screen width: wide enough to overflow in both directions,
   so panning works either way, and the small captions in the drawing become
   readable. The image is 1728px wide, so it is still shown downscaled. */
.map-big__img {
  display: block;
  width: 300%;
  max-width: none;
  height: auto;
}

.map-big__hint {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  transform: translateX(-50%);
  z-index: 2;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--cream);
  border: 1px solid var(--border-s);
  box-shadow: var(--shadow-md);
  font-family: var(--font-d);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--brown-m);
  pointer-events: none;
  animation: hint-fade 4.5s ease-out both;
}

@keyframes hint-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

.map-big__close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border-s);
  color: var(--brown-m);
  box-shadow: var(--shadow-md);
}

/* A row with a checkbox, used by the demo switches ---------------------- */
.switch {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--brown-m);
}

.switch:first-of-type {
  border-top: 0;
}

.switch input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--terra);
}

/* Second half of a time span, stacked under the first. */
.plan__time-end {
  display: block;
  opacity: 0.65;
  font-size: 0.78rem;
}

/* Badge collection ----------------------------------------------------- */

/* Two columns instead of three: bigger tiles, and the icon gets room to be
   the thing you look at. */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  aspect-ratio: 1;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--t-fast) var(--ease);
}

.badge-tile:active {
  transform: scale(0.96);
}

/* Earned tiles get a rotating wash of colour, so the collection looks like a
   collection and not like a spreadsheet. */
.badge-tile:not(.badge-tile--locked):nth-child(4n+1) {
  background: linear-gradient(160deg, rgba(184, 92, 56, 0.16), var(--card) 70%);
  border-color: rgba(184, 92, 56, 0.35);
}

.badge-tile:not(.badge-tile--locked):nth-child(4n+2) {
  background: linear-gradient(160deg, rgba(196, 149, 42, 0.20), var(--card) 70%);
  border-color: rgba(196, 149, 42, 0.40);
}

.badge-tile:not(.badge-tile--locked):nth-child(4n+3) {
  background: linear-gradient(160deg, rgba(30, 132, 73, 0.16), var(--card) 70%);
  border-color: rgba(30, 132, 73, 0.32);
}

.badge-tile:not(.badge-tile--locked):nth-child(4n) {
  background: linear-gradient(160deg, rgba(106, 62, 122, 0.16), var(--card) 70%);
  border-color: rgba(106, 62, 122, 0.32);
}

/* Not earned yet: a blank medal, no name. The name would give the day away. */
.badge-tile--locked {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--border-s);
}

.badge-tile__icon {
  font-size: 4rem;
  line-height: 1;
}

/* Stefan's own drawings, once they are in assets/badges. */
.badge-tile__img {
  width: 76%;
  max-width: 132px;
  height: auto;
  display: block;
  /* De twaalf tekeningen zijn al rond met doorzichtige hoeken; de dertiende is
     een jpeg en heeft dat niet. Dit maakt ze allemaal rond, wat aan de eerste
     twaalf niets verandert. */
  border-radius: 50%;
}

.badge-tile__name {
  font-family: var(--font-d);
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--brown);
}

.badge-tile__silhouette {
  display: block;
  color: var(--border-s);
}

.badge-tile__blank {
  width: 52px;
  height: 52px;
  display: block;
}

/* Figures under the collection ---------------------------------------- */
.stats {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

.stats__item {
  flex: 1 1 0;
  text-align: center;
}

.stats__value {
  display: block;
  font-family: var(--font-d);
  font-size: 1.4rem;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
}

.stats__label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-l);
  margin-top: 2px;
}

/* The drawings are already round with transparent corners, so they need no
   mask of their own — only room. */
.badge-tile__img {
  width: 86%;
  max-width: 150px;
  height: auto;
  display: block;
}

.card--badge {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.badge-card__img {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  display: block;
}

/* Het versienummer, klein en stil onderaan de verzameling. */
.version {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-l);
  opacity: 0.65;
  margin: var(--sp-6) 0 0;
}

/* ------------------------------------------------------------------ */
/* Spelleider: het sleuteltje en zijn venster                           */
/* ------------------------------------------------------------------ */

/* Klein en stil rechtsonder, boven de menubalk. Zoals in de hint-app. */
.adminkey {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 40;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--brown-l);
  opacity: 0.5;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--t-fast) linear, background var(--t-fast) linear;
}

.adminkey:active {
  opacity: 1;
}

/* Staat de stand aan, dan moet dat te zien zijn: anders geeft de app
   boekingsnummers bloot zonder dat iemand het merkt. */
.adminkey--on {
  opacity: 1;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown);
}

.adminkey__glyph {
  font-size: 1rem;
  line-height: 1;
}

.admin {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--veil);
  overflow-y: auto;
  animation: veilIn var(--t-base) ease-out both;
}

.admin__card {
  width: 100%;
  max-width: 340px;
  margin: auto;
}

.admin__field {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-3);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-b);
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-align: center;
  -webkit-appearance: none;
}

.admin__field:focus {
  outline: none;
  border-color: var(--gold);
}

.admin__message {
  min-height: 1.2em;
  margin: var(--sp-2) 0 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--red);
}

.admin__on {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--green-l);
  color: var(--green);
  font-size: 0.95rem;
  text-align: center;
}

.admin__hint {
  margin: var(--sp-3) 0 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--terra);
}

.admin__wipe {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Spelleider: alles op een rij. Een naslagwerk, geen verhaal.          */
/* ------------------------------------------------------------------ */

/* De keuzelijst bovenaan. Dertien knopjes naast elkaar werden op een telefoon
   dertien onleesbare streepjes. */
.prac__select {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--brown);
  font-family: var(--font-b);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.prac__day {
  scroll-margin-top: var(--sp-4);
  padding: 0;
}

/* De hele kop is de knop: op een telefoon wil je een groot tikvlak. */
.prac__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.prac__chevron {
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gold);
  transition: transform var(--t-base) var(--ease);
}

.prac__day--open .prac__chevron {
  transform: rotate(180deg);
}

.prac__body {
  display: none;
  padding: 0 var(--sp-5) var(--sp-5);
}

.prac__day--open .prac__body {
  display: block;
}

.prac__date {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-1);
}

.prac__city {
  display: block;
  font-family: var(--font-d);
  font-size: 1.3rem;
  color: var(--brown);
}

.prac__row {
  display: flex;
  gap: var(--sp-3);
  padding: 2px 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--brown-m);
}

.prac__label {
  flex: none;
  width: 58px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-l);
  padding-top: 3px;
}

.prac__maps {
  margin-left: var(--sp-2);
  color: var(--terra);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.prac__spanish {
  font-style: italic;
}

.prac__item {
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.prac__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  flex-wrap: wrap;
}

.prac__time {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--brown-l);
  min-width: 42px;
}

.prac__title {
  font-weight: 600;
  color: var(--brown);
}

.prac__warn {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--red-l);
  color: var(--red);
  font-size: 0.85rem;
}

.prac__details {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0 0 0 58px;
}

.prac__detail {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--brown);
  padding: 1px 0;
}

.prac__detail::before {
  content: "· ";
  color: var(--gold);
}

.prac__booking-day {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.prac__booking-day:first-child {
  margin-top: 0;
}

/* Een nummer moet je kunnen selecteren en overtypen, dus mono en ruim. */
.prac__ref {
  margin: 0 0 2px 42px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--brown);
  -webkit-user-select: all;
  user-select: all;
}

/* Een ticket met een QR-code: groot tikvlak, want dit doe je aan een balie. */
.prac__voucher {
  display: block;
  margin: var(--sp-3) 0 0 42px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--terra);
  border-radius: var(--r-pill);
  color: var(--terra);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Een ticket in beeld, binnen de app                                   */
/* ------------------------------------------------------------------ */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--veil);
  padding: calc(env(safe-area-inset-top) + var(--sp-3)) var(--sp-3)
           calc(env(safe-area-inset-bottom) + var(--sp-3));
  animation: veilIn var(--t-base) ease-out both;
}

.sheet__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  margin-bottom: var(--sp-3);
}

.sheet__title {
  flex: 1;
  color: var(--cream);
  font-family: var(--font-d);
  font-size: 1rem;
}

.sheet__close {
  flex: none;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--brown);
  font: inherit;
  font-size: 0.9rem;
  -webkit-tap-highlight-color: transparent;
}

/* De afbeelding schuift binnen dit vak, zodat de rest van de app stil blijft. */
.sheet__holder {
  flex: 1;
  overflow: auto;
  border-radius: var(--r-md);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}

.sheet__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Twee keer zo groot: dan is de QR-code op elke balie te scannen. */
.sheet__holder--big .sheet__img {
  width: 200%;
  max-width: none;
}

.sheet__hint {
  flex: none;
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--cream);
  opacity: 0.7;
}

/* ------------------------------------------------------------------ */
/* Kosten bijhouden                                                     */
/* ------------------------------------------------------------------ */

.costs__verdict {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-family: var(--font-d);
  font-size: 1.15rem;
  color: var(--green);
}

.costs__verdict--over {
  color: var(--red);
}

.costs__row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.costs__amount,
.costs__pick {
  flex: 1;
  min-height: 48px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-b);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.costs__amount {
  font-size: 1.3rem;
  text-align: center;
}

.costs__cat {
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.costs__cat:first-of-type {
  border-top: 0;
}

.costs__catrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.costs__catname {
  flex: 1;
  font-size: 0.95rem;
  color: var(--brown);
}

.costs__catsum {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--brown-m);
}

.costs__catsum--over {
  color: var(--red);
}

/* Het budget staat naast het bedrag, klein: je zet het één keer en kijkt
   daarna alleen nog naar wat je hebt uitgegeven. */
.costs__budget {
  flex: none;
  width: 78px;
  min-height: 38px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--brown-l);
  font-family: var(--font-b);
  font-size: 0.9rem;
  text-align: right;
  -webkit-appearance: none;
}

.costs__bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}

.costs__fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease);
}

.costs__fill--over {
  background: var(--red);
}

.costs__entry {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.costs__entrydate {
  flex: none;
  width: 74px;
  color: var(--brown-l);
  font-size: 0.82rem;
}

.costs__entrycat {
  flex: 1;
  color: var(--brown);
}

.costs__entrysum {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--brown);
}

.costs__del {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--brown-l);
  font-size: 1.2rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* De twee vakjes per post: vooraf betaald en het budget. */
.costs__fields {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.costs__fieldlabel {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-l);
}

.costs__note {
  margin: var(--sp-2) 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--brown-l);
}

/* ------------------------------------------------------------------ */
/* Staafdiagram: budget tegen werkelijk                                 */
/* ------------------------------------------------------------------ */

.chart__group {
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.chart__group:first-of-type {
  border-top: 0;
  margin-top: var(--sp-2);
}

.chart__name {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: 0.95rem;
  color: var(--brown);
}

.chart__over {
  color: var(--red);
  font-size: 0.85rem;
}

.chart__line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 3px;
}

/* Het woordje voor de staaf, met een vaste breedte zodat alle staven op
   dezelfde plek beginnen en dus te vergelijken zijn. */
.chart__kind {
  flex: none;
  width: 52px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-l);
}

.chart__track {
  flex: 1;
  height: 14px;
  border-radius: var(--r-sm);
  background: var(--border);
  overflow: hidden;
}

.chart__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-sm);
  transition: width var(--t-base) var(--ease);
}

.chart__fill--budget { background: var(--gold); opacity: 0.55; }
.chart__fill--used   { background: var(--terra); }
.chart__fill--over   { background: var(--red); }

.chart__amount {
  flex: none;
  width: 82px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--brown-m);
}

/* Een weg terug op schermen die niet onder een tabblad hangen. */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 40px;
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-3) 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--terra);
  font: inherit;
  font-size: 0.9rem;
  -webkit-tap-highlight-color: transparent;
}

.backlink::before {
  content: "‹";
  font-size: 1.3rem;
  line-height: 1;
}