/* ==========================================================================
   q471.css — תוספות של שאלון 471 מעל lib/nav.css: תגית "מצגת בקרוב",
   כפתורי הסינון של חדר הבגרויות, ודף הצפייה (view.html).
   ========================================================================== */

/* תגית "מצגת — בקרוב" בכרטיס נושא */
.q-soon {
  align-self: flex-start; padding: 3px 12px; border-radius: 9999px; font-size: 13px; font-weight: 800;
  color: var(--c1); background: color-mix(in srgb, var(--c2) 16%, #fff); border: 1px dashed color-mix(in srgb, var(--c1) 45%, transparent);
}

/* הבאנר בדף נושא: אותה צורה כמו "להתחיל", אבל לא לחיץ */
.nv-resume.q-soon-banner { cursor: default; background: linear-gradient(135deg, #475569, #94a3b8); box-shadow: 0 12px 30px rgba(15, 23, 42, .18); }
.nv-resume.q-soon-banner:hover { transform: none; filter: none; }
.nv-resume.q-soon-banner .what { font-size: 18px; font-weight: 600; }

.q-empty {
  padding: 18px 22px; border-radius: 18px; background: #fff; color: var(--soft); font-size: 16px; font-weight: 600;
  border: 2px dashed #cbd5e1;
}

/* דף השאלון: הכניסה לחדר הבגרויות */
.q-room-go { background: linear-gradient(135deg, #0f172a, #334155); }
.q-room-go .go { color: #fbbf24; }

/* חדר הבגרויות: סינון */
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.q-chips button {
  font: 700 15px/1.2 inherit; padding: 8px 16px; border-radius: 9999px; cursor: pointer;
  background: #fff; color: var(--ink); border: 2px solid #e2e8f0; transition: background .15s, border-color .15s, color .15s;
}
.q-chips button:hover { border-color: var(--c2, #94a3b8); }
.q-chips button.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--c1, #0f172a), var(--c2, #475569)); }
.q-seg { display: inline-flex; padding: 3px; border-radius: 9999px; background: #e2e8f0; margin-inline-end: 8px; }
.q-seg button { border: 0; background: transparent; padding: 7px 16px; }
.q-seg button.on { background: #0f172a; }
.nv-sec .nv-sec-h .q { min-width: 44px; text-align: center; }

/* ---------- דף הצפייה ---------- */
body.q-view { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.v-bar {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px; color: #fff;
  background: linear-gradient(120deg, var(--h1), var(--h2)); box-shadow: 0 4px 16px rgba(15, 23, 42, .25); position: relative; z-index: 1;
}
.v-bar .nv-btn { padding: 6px 14px; font-size: 14px; white-space: nowrap; }
.v-mid { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.v-mid small { display: block; font-size: 13px; font-weight: 600; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-mid b { display: block; font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-nav { display: flex; gap: 6px; }
.v-nav a.off { opacity: .35; pointer-events: none; }
.v-load { flex: none; height: 3px; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c1)); background-size: 200% 100%; opacity: 0; }
.v-load.on { opacity: 1; animation: vShim 1.1s linear infinite; }
@keyframes vShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
#vFrame { flex: 1; width: 100%; border: 0; background: #fff; display: block; }

@media (max-width: 640px) {
  .v-bar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; }
  .v-mid { order: 3; flex-basis: 100%; }
  .v-mid b { font-size: 16px; }
  .v-bar { justify-content: space-between; }
  .v-bar .fs { display: none; }
  .q-seg { margin-inline-end: 0; }
}

/* ב-nav.css הכותרת של הקטע הראשון לבנה (היא יושבת על השער); כאן הקטעים מתחת לסינון */
#examsMain .nv-sec:first-child .nv-sec-h { color: var(--ink); }
#examsMain .nv-sec:first-child .nv-sec-h small, #examsMain .nv-sec:first-child .nv-sec-h a { color: var(--soft); }
@media (max-width: 640px) {
  .nv-resume.q-soon-banner .what { flex-basis: 100%; font-size: 15px; }
}