/* extras: LAATSTE_VRAGEN.leo — dealbreaker chips, the Mars passport question, a note to Daan. */

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

/* "LAATSTE_VRAGEN.leo" is the longest window title. Rather than cutting it off on 320 px phones or with
   LEESBRIL, it shrinks a little (8vw - 11px tracks the room the title bar leaves); 16 px whenever it fits. */
.scr-extras .ex-win .win__title { font-size: min(var(--fs-s), calc(8vw - 11px)); }

.scr-extras .ex-head > * + * { margin-top: 6px; }
.scr-extras .ex-head .q-title { text-wrap: balance; }
.scr-extras .ex-head .q-sub { text-wrap: pretty; }

.scr-extras .ex-divider { padding: 2px 0; }
.scr-extras .ex-block > * + * { margin-top: 10px; }

.scr-extras .ex-q {
  display: block;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: 1.25;
}

.scr-extras .ex-sub { margin-top: 2px; font-size: var(--fs-s); text-wrap: pretty; }

/* ---------- Absoluut niet ---------- */
.scr-extras .ex-nope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.scr-extras .ex-chip {
  gap: 6px;
  min-width: 0;
  min-height: var(--tap);
  padding: 4px 6px;
  color: var(--ink);
  text-align: left;
}

.scr-extras .ex-chip__label {
  min-width: 0;
  overflow-wrap: anywhere;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.scr-extras .ex-chip__x { position: relative; display: grid; flex: none; width: 14px; height: 14px; }
.scr-extras .ex-chip__x > span { position: absolute; inset: 0; display: flex; }
.scr-extras .ex-chip__on { visibility: hidden; }
.scr-extras .ex-chip[aria-pressed="true"] .ex-chip__on { visibility: visible; }
.scr-extras .ex-chip[aria-pressed="true"] .ex-chip__off { visibility: hidden; }

/* ---------- passport ---------- */
.scr-extras .ex-pass-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.scr-extras .ex-pass-icon { display: flex; flex: none; padding-top: 2px; }

.scr-extras .ex-pass__opt {
  min-height: 48px;
  padding: 4px 6px;
  color: var(--ink);
}

.scr-extras .ex-pass__opt[aria-pressed="true"] { background: var(--pink); }
.scr-extras .ex-pass__opt:active { background: var(--lav-l); }

.scr-extras .ex-why {
  padding-left: 10px;
  border-left: var(--bw) solid var(--lav);
  font-size: var(--fs-s);
  line-height: 1.3;
}

/* ---------- note ---------- */
.scr-extras .ex-note { min-height: 112px; }

.scr-extras .ex-meta {
  display: flex;
  justify-content: flex-end;
}

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

.scr-extras .ex-count.is-full { opacity: 1; background: var(--yellow); padding: 0 4px; }