/* ============================================
   PEAKPOINT SAT PREP — Question Bank
   Reading & Writing + Math with a dropdown
   filter-pill bar. Light PeakPoint theme.
   ============================================ */

/* Visually-hidden label (shared by the question bank + list pages, which
   don't load the stylesheets where .sr-only is otherwise defined). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.question-bank-screen {
  background:
    radial-gradient(circle at 88% 2%, rgba(14, 165, 233, 0.14), transparent 36%),
    radial-gradient(circle at 4% 6%, rgba(44, 116, 251, 0.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0, var(--bg-primary) 420px);
}

.question-bank-main { background: transparent; }
.question-bank-screen.sidebar-collapsed .question-bank-main { margin-left: 58px; }

.question-bank-inner {
  width: min(1320px, calc(100% - 56px));
  margin: 0 auto;
  padding: 44px 0 90px;
}

/* ---------- hero ---------- */
.question-bank-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.question-bank-hero .eyebrow {
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.78rem;
}
.question-bank-hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-top: 6px;
}
.question-bank-hero > div:first-child p:last-child {
  max-width: 640px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 10px;
}
.bank-hero-stat {
  flex: 0 0 auto;
  text-align: right;
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--card-shadow);
  border-radius: 18px;
  padding: 14px 20px;
}
.bank-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--text-heading);
  line-height: 1;
}
.bank-hero-stat span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---------- filter bar ---------- */
.bank-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; }

.filter-pill { position: relative; }
.filter-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1.5px solid var(--border-default);
  background: #fff;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 2px 6px -3px rgba(3, 105, 161, 0.25);
  transition: border-color 0.16s var(--easing), background 0.16s var(--easing), transform 0.16s var(--easing), box-shadow 0.16s var(--easing);
}
.filter-pill-btn:hover { transform: translateY(-1px); border-color: var(--border-hover); }
.filter-pill.is-active .filter-pill-btn {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  box-shadow: inset 0 -3px 0 #075985, 0 12px 24px -18px rgba(3, 105, 161, 0.6);
}

.filter-pill-icon {
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  opacity: 0.9;
  flex: 0 0 auto;
}
.ic-difficulty { -webkit-mask-image: var(--m-diff); mask-image: var(--m-diff); }
.ic-result { -webkit-mask-image: var(--m-result); mask-image: var(--m-result); }
.ic-completed { -webkit-mask-image: var(--m-completed); mask-image: var(--m-completed); }
.ic-saved { -webkit-mask-image: var(--m-saved); mask-image: var(--m-saved); }
:root {
  --m-diff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='9' width='3' height='5' rx='1'/%3E%3Crect x='6.5' y='6' width='3' height='8' rx='1'/%3E%3Crect x='11' y='3' width='3' height='11' rx='1'/%3E%3C/svg%3E");
  --m-result: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 2.2a5.8 5.8 0 010 11.6z'/%3E%3C/svg%3E");
  --m-completed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M4.8 8.2l2.1 2.1 4-4.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-saved: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5h8v11l-4-3-4 3z'/%3E%3C/svg%3E");
  --m-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cline x1='10.6' y1='10.6' x2='14' y2='14' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.filter-pill-caret {
  width: 10px; height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.7;
}

.filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: 0 24px 50px -22px rgba(3, 105, 161, 0.5), var(--card-shadow);
  padding: 7px;
  display: grid;
  gap: 2px;
}
.filter-menu[hidden] { display: none; }
.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.filter-option:hover { background: var(--surface-2); }
.filter-option[aria-checked="true"] {
  background: var(--glow-soft);
  color: var(--accent-deep);
  font-weight: 800;
}
.filter-option[aria-checked="true"]::after {
  content: "";
  width: 15px; height: 15px;
  background: var(--accent-deep);
  -webkit-mask: var(--m-completed) center/contain no-repeat;
  mask: var(--m-completed) center/contain no-repeat;
}

.bank-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 340px;
}
.bank-search-icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background: var(--text-muted);
  -webkit-mask: var(--m-search) center/contain no-repeat;
  mask: var(--m-search) center/contain no-repeat;
  pointer-events: none;
}
.bank-search input {
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--border-default);
  background: #fff;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 16px 0 42px;
}
.bank-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--glow-soft);
}
.filter-reset {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0 8px;
  text-decoration: underline;
}

/* ---------- column heads ---------- */
.bank-columns-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 14px;
}
.col-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.col-head-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
  color: #fff;
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 12px 24px -16px rgba(3, 105, 161, 0.6);
}
.col-head-rw .col-head-icon { background: var(--accent); box-shadow: inset 0 -4px 0 var(--accent-deep); }
.col-head-math .col-head-icon { background: var(--cosmic-blue); box-shadow: inset 0 -4px 0 #1b4fbf; }
.col-head div { display: grid; }
.col-head strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-heading); }
.col-head span { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--text-muted); }

/* RW / Math glyphs */
.col-head-icon.rw-mark::before, .col-head-icon.rw-mark::after,
.col-head-icon.math-mark::before, .col-head-icon.math-mark::after,
.subject-mark.rw-mark::before, .subject-mark.rw-mark::after,
.subject-mark.math-mark::before, .subject-mark.math-mark::after { content: ""; position: absolute; background: currentColor; }
.rw-mark::before { width: 22px; height: 15px; left: 10px; top: 13px; border: 3px solid currentColor; background: none; border-radius: 3px; }
.rw-mark::after { width: 15px; height: 3px; left: 13px; top: 19px; box-shadow: 0 6px 0 currentColor; }
.math-mark::before { width: 22px; height: 4px; left: 10px; top: 19px; border-radius: 3px; box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor; }
.math-mark::after { width: 4px; height: 22px; left: 19px; top: 10px; border-radius: 3px; }

/* ---------- subject grid ---------- */
.subject-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.subject-bank-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  box-shadow: var(--card-shadow);
  border-radius: 24px;
  overflow: hidden;
}
.subject-bank-card.is-hidden { display: none; }

.subject-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #ffffff, var(--surface-2));
  border-bottom: 1px solid var(--border-soft);
}
.subject-card-title { display: flex; align-items: center; gap: 14px; }
.subject-mark {
  width: 46px; height: 46px;
  border-radius: 14px;
  color: #fff;
  background: var(--accent);
  box-shadow: inset 0 -4px 0 var(--accent-deep), 0 12px 24px -16px rgba(3, 105, 161, 0.6);
  position: relative;
  flex: 0 0 auto;
}
.subject-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-heading);
  font-size: 1.5rem;
  line-height: 1.1;
}
.card-kicker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.subject-card-count {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 3px;
}
.start-pill {
  min-height: 42px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  text-decoration: none;
  background: var(--accent);
  box-shadow: inset 0 -4px 0 var(--accent-deep), 0 14px 28px -18px rgba(3, 105, 161, 0.7);
  transition: transform 0.18s var(--easing);
}
.start-pill:hover { transform: translateY(-1px); }
.play-dot { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); position: relative; }
.play-dot::before {
  content: ""; position: absolute; left: 8px; top: 5px;
  width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #fff;
}

.domain-list { padding: 8px 20px 18px; }
.domain-group { padding: 12px 0; border-bottom: 1px solid rgba(186, 230, 253, 0.7); }
.domain-group:last-child { border-bottom: 0; }
.domain-empty { color: var(--text-muted); font-family: var(--font-display); font-weight: 600; padding: 10px 4px; }

.domain-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  text-align: left;
}
.domain-name {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-heading);
}
.domain-name::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.12);
  flex: 0 0 auto;
}
.domain-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.domain-caret {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.18s var(--easing);
}
.domain-group:not(.is-open) .domain-caret { transform: rotate(-45deg); }

.skill-list { display: grid; gap: 5px; margin-top: 8px; padding-left: 18px; }
.domain-group:not(.is-open) .skill-list { display: none; }

.skill-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 7px 12px;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.16s var(--easing), color 0.16s var(--easing), transform 0.16s var(--easing);
}
.skill-link:hover { background: var(--surface-2); color: var(--text-heading); transform: translateX(2px); }
.skill-name { min-width: 0; }
.skill-count {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--accent-deep);
  background: var(--glow-soft);
  border-radius: 999px;
  padding: 2px 9px;
}
.skill-link.is-empty {
  opacity: 0.42;
  pointer-events: none;
}
.skill-link.is-empty .skill-count { color: var(--text-muted); background: var(--surface-2); }

/* ---------- loading / empty ---------- */
.bank-loading {
  margin-top: 26px;
  padding: 44px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 700;
}
.bank-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-secondary);
}
.bank-empty p { font-family: var(--font-display); font-weight: 700; margin-bottom: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .bank-columns-head, .subject-grid { grid-template-columns: 1fr; }
  .bank-columns-head { gap: 10px; }
}
@media (max-width: 820px) {
  .question-bank-inner { width: min(100% - 28px, 700px); padding-top: 30px; }
  .question-bank-hero { flex-direction: column; align-items: flex-start; }
  .bank-hero-stat { text-align: left; }
}
@media (max-width: 640px) {
  .question-bank-screen.sidebar-collapsed .question-bank-main { margin-left: 0; }
  .question-bank-hero h1 { font-size: 2.2rem; }
  .bank-search { max-width: none; }
}