/* types: REISTYPES/ — trip-type tiles (off -> LEUK -> SUPERLEUK), the Saai bin gag, "Anders". */

/* room below the window so the end can scroll clear of Henk */
.scr-types .ty-win { margin-bottom: 40px; }

.scr-types .ty-win .win__body {
  padding: 14px 10px 14px;
}

.scr-types .ty-head {
  padding: 0 4px;
}

.scr-types .ty-head > * + * { margin-top: 6px; }

.scr-types .ty-head .q-title { text-wrap: balance; }

.scr-types .ty-sub {
  opacity: 1;
  line-height: 1.7;
}

/* the two keywords in the sub double as a legend */
.scr-types .ty-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  border: var(--bw) solid var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 17px;
  white-space: nowrap;
  vertical-align: 1px;
}

.scr-types .ty-nowrap { white-space: nowrap; }
.scr-types .ty-key--leuk { border-style: dashed; background: var(--lav-l); }
.scr-types .ty-key--super { background: var(--pink); }

/* ---------- tiles: fixed type sizes so LEESBRIL never makes them overflow ---------- */
.scr-types .ty-grid {
  position: relative;
  gap: 8px;
}

.scr-types .ty-tile {
  position: relative;
  justify-content: flex-start;
  gap: 6px;
  min-height: 92px;
  padding: 10px 3px 8px;
  color: var(--ink);
  font-size: 16px;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
  -webkit-user-select: none;
  user-select: none;
}

.scr-types .ty-tile__icon { display: flex; }

.scr-types .ty-tile__icon svg {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
}

.scr-types .ty-tile__label {
  display: block;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.1;
}

.scr-types .ty-tile__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.1;
}

/* LEUK: dashed outline in crisp 3px pixel dashes */
.scr-types .ty-tile.is-leuk {
  border-color: transparent;
  background:
    linear-gradient(90deg, var(--ink) 50%, transparent 0) 0 0 / 12px 3px repeat-x,
    linear-gradient(90deg, var(--ink) 50%, transparent 0) 0 100% / 12px 3px repeat-x,
    linear-gradient(0deg, var(--ink) 50%, transparent 0) 0 0 / 3px 12px repeat-y,
    linear-gradient(0deg, var(--ink) 50%, transparent 0) 100% 0 / 3px 12px repeat-y,
    var(--lav-l);
  background-origin: border-box;
  background-clip: border-box;
}

/* SUPERLEUK: pink with a heart */
.scr-types .ty-tile.is-super { background: var(--pink); }

.scr-types .ty-tile__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  display: none;
}

.scr-types .ty-tile.is-super .ty-tile__badge {
  display: flex;
  animation: pop-in var(--t-med) steps(4) both;
}

/* ---------- Saai: error, then into the bin ---------- */
.scr-types .ty-tile--gag { color: var(--ink); }
.scr-types .ty-tile.is-error { background: var(--red); }

.scr-types .ty-tile.is-falling {
  z-index: 2;
  pointer-events: none;
  animation: types-fall calc(720ms / var(--speed)) steps(9) forwards;
}

@keyframes types-fall {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  30% { transform: translate(calc(var(--dx) * 0.35), -30px) rotate(-12deg) scale(0.85); opacity: 1; }
  65% { transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) - 26px)) rotate(35deg) scale(0.5); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(90deg) scale(0.12); opacity: 0; }
}

/* the bin sits in the middle cell of Saai's row, and stays there once the tile is gone */
.scr-types .ty-bin {
  position: relative;
  grid-column: 2;
  place-self: center;
  width: 44px;
  height: 56px;
  animation: pop-in var(--t-med) steps(4) both;
}

.scr-types .ty-bin > span {
  position: absolute;
  inset: 0;
  display: flex;
}

.scr-types .ty-bin__shut { visibility: hidden; }
.scr-types .ty-bin.is-shut .ty-bin__open { visibility: hidden; }
.scr-types .ty-bin.is-shut .ty-bin__shut { visibility: visible; }
.scr-types .ty-bin.is-shut { animation: wiggle calc(330ms / var(--speed)) steps(4) 2; }
.scr-types .ty-bin.is-gone { animation: fade-out var(--t-med) steps(3) both; }

/* ---------- Anders, namelijk… ---------- */
.scr-types .ty-other { padding: 4px 4px 0; }

.scr-types .ty-other__meta {
  display: flex;
  justify-content: flex-end;
}

.scr-types .ty-count {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* ---------- explorer status bar ---------- */
.scr-types .ty-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 6px 12px;
  background: var(--shade);
  border-top: var(--bw) solid var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-transform: uppercase;
}

/* ---------- narrow phones (first-gen iPhone SE, 320px): keep every label on its own words ---------- */
@media (max-width: 340px) {
  .scr-types .ty-win .win__body { padding: 12px 8px; }
  .scr-types .ty-grid { gap: 6px; }
  .scr-types .ty-tile { padding: 10px 2px 8px; }
  .scr-types .ty-tile__label { font-size: 15px; }
}