:root {
  --text: #1e293b; --muted: #94a3b8; --border: #e2e8f0; --accent: #2563eb; --module-h: 2.85rem;
  /* Bucket colors — matching PrOFILE-by-bucket */
  --obj: #d3d3d3; --obj-light: #f0f0f0; --obj-dark: #636363;
  --obj-xray: #96ceb8; --obj-xray-light: #dcf6ec; --obj-xray-dark: #307a5d;
  --ass: #a6c3f3; --ass-light: #dfe9f5; --ass-dark: #2C4A78;
  --sub: #e3beef; --sub-light: #f5eaf9; --sub-dark: #5C2E70;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text); line-height: 1.5; max-width: 45rem; margin: 0 auto;
  padding: 2rem 1.5rem 4rem; overflow-x: clip;
}

/* Filter bar */
.filter-bar {
  position: sticky; top: 0; z-index: 30; background: #fff;
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .5rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.filter-bar::after {
  content: ''; position: absolute; top: 0; bottom: -1px; right: 0;
  width: 10rem; background: #fff; transform: translateX(100%);
  border-bottom: 1px solid var(--border);
}
.filter-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: 1rem;
  border: 1.5px solid var(--border); background: #fff;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s, border-color .15s;
}
.filter-pill.active { border-color: #475569; }
.filter-pill:not(.active) { opacity: .4; }
.fp-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.filter-star {
  font-size: 1.1rem; cursor: pointer; border: none; background: none;
  color: #d1d5db; padding: .1rem .3rem; transition: color .15s;
}
.filter-star.active { color: #f59e0b; }
.filter-star.hidden { display: none; }
.filter-count { margin-left: auto; font-size: .7rem; color: var(--muted); white-space: nowrap; }

/* Module wrappers (created by JS for sticky scoping) */
.module-wrap { margin-top: 1.25rem; }
.module-wrap:first-child { margin-top: 0; }
.module-wrap:has(> .module.collapsed) { margin-top: 0; }

/* Module headers — sticky */
.module {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 0; font-weight: 600; font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer; user-select: none;
  border-bottom: 2px solid var(--border);
  position: sticky; top: var(--filter-h, 0px); z-index: 20; background: #fff;
  transition: background .15s, color .15s;
}
.module::before { content: '\25BE'; font-size: 1rem; transition: transform .2s; }
.module::after {
  content: ''; position: absolute; top: 0; bottom: -2px; right: 0;
  width: 10rem; background: #fff; transform: translateX(100%);
  border-bottom: 2px solid var(--border);
}
.module.collapsed::before { transform: rotate(-90deg); }
.module.collapsed { padding: .05rem 0; font-size: .8rem; border-bottom-width: 1px; }
.module > span:last-child { margin-left: auto; font-weight: 400; font-size: .7rem; }
.header-pts { display: none; }
.module-section { margin-bottom: 1rem; }
.module-section.collapsed { display: none; }

/* Module title span — colored on hover activation */
.module-title {
  font-size: inherit; font-weight: inherit;
  padding: .1rem .5rem; border-radius: .25rem;
  transition: background .15s, color .15s;
}
.module:hover .module-title,
.module.bucket-active .module-title,
.module.nav-active .module-title { background: #1F2937; color: #fff; }

/* Domain wrappers (created by JS for sticky scoping) */
.domain-wrap { margin-top: .6rem; }
.domain-wrap:first-child { margin-top: .3rem; }
.domain-wrap:has(> .domain.collapsed) { margin-top: .2rem; }

/* Domain headers — sticky below module header */
.domain {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: .4rem; font-weight: 700; font-size: .9rem;
  color: #000; background: #fff;
  cursor: pointer; user-select: none;
  position: sticky; top: calc(var(--filter-h, 0px) + var(--module-h)); z-index: 10;
  transition: background .15s, color .15s;
}
.domain::before { content: '\25BE'; font-size: .9rem; transition: transform .2s; }
.domain::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0;
  width: 10rem; background: #fff; transform: translateX(100%);
}
.domain.collapsed::before { transform: rotate(-90deg); }
.domain.collapsed { padding: .05rem .8rem; font-size: .75rem; }
.domain > span:last-child { margin-left: auto; font-weight: 400; opacity: .5; font-size: .75rem; }
.domain-section { margin-bottom: .8rem; }
.domain-section.collapsed { display: none; }

/* Domain title span — colored on hover activation */
.domain-title {
  font-size: inherit; font-weight: inherit;
  padding: .1rem .4rem; border-radius: .25rem;
  transition: background .15s, color .15s;
}
.domain:hover .domain-title,
.domain.bucket-active .domain-title,
.domain.nav-active .domain-title { background: #374151; color: #fff; }

/* Question rows */
.q { border-bottom: 1px solid var(--border); border-left: 3px solid transparent; position: relative; }
.q::after {
  content: ''; position: absolute; right: 0; bottom: -1px;
  width: 10rem; border-bottom: 1px solid var(--border);
  transform: translateX(100%);
}
.q-row {
  display: flex; align-items: baseline; gap: .6rem; padding: .25rem 0 .25rem .4rem;
  cursor: pointer; user-select: none; position: relative; z-index: 1;
}
.q-row:hover { background: #f8fafc; border-radius: .3rem; }

.q-toggle {
  font-size: .65rem; font-weight: 700; color: #6B7280; background: #F3F4F6;
  border-radius: .2rem; padding: .05rem .35rem; white-space: nowrap; flex-shrink: 0;
  min-width: 2rem; text-align: center;
}

/* Bucket coloring — only on the q-title span */
.q-title {
  font-weight: 600; font-size: .85rem; flex-shrink: 0;
  padding: .1rem .4rem; border-radius: .25rem;
  transition: background .15s, color .15s;
}
/* Light background from bucket */
.q-title[style] { background: var(--q-bg); color: var(--q-fg); }
/* Hover: invert */
.q:hover .q-title[style] { background: var(--q-fg); color: var(--q-bg); }

.q-spark {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.q-spacer { flex: 1; min-width: 1rem; }
.q-tag {
  position: absolute; left: 100%; margin-left: .5rem;
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: .35rem;
  width: 18rem; font-size: .6rem; color: var(--muted);
  transition: color .15s;
}
.q:hover .q-tag, .q-active .q-tag { color: var(--text); }
.q-text {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  text-align: right; font-size: .6rem; color: #64748b; max-width: 24rem;
  pointer-events: none;
  line-height: 1.15;
}
.q-text-desc { opacity: 0; transition: opacity .15s; }
.q-row:hover .q-text-desc, .q-active .q-text-desc { opacity: 1; }
.q-var { display: block; font-size: .6rem; color: var(--muted); margin-top: 0; }

/* Question body (expanded) */
.q-body { display: none; padding: 0 0 .5rem 2.5rem; font-size: .8rem; }
.q.open .q-body { display: block; }
.q.open .q-toggle { background: #6B7280; color: #fff; }

/* Options list */
.opt { display: flex; gap: .5rem; padding: .15rem 0; color: #475569; font-size: .8rem; }
.opt-code { color: var(--muted); min-width: 1.2rem; text-align: right; font-size: .75rem; }
.opt-score { color: var(--accent); min-width: 2.2rem; font-size: .75rem; }
.opt-label { flex: 1; }
.q-note { color: var(--muted); font-style: italic; font-size: .75rem; margin-top: .2rem; }
.q-body.has-bars .opt, .q-body.has-bars .q-note { display: none; }

/* Distribution bars */
.bar-row { display: flex; align-items: center; gap: .5rem; margin: .15rem 0; font-size: .85rem; }
.bar-label { min-width: 1.5rem; text-align: right; color: var(--muted); font-size: .8rem; }
.bar-track { flex: 1; background: #f1f5f9; border-radius: .25rem; height: 1.2rem; position: relative; overflow: hidden; }
.bar-fill { height: 100%; border-radius: .25rem; transition: width .3s; }
.bar-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* Checkbox lists */
.check-list { padding: 0; margin: .2rem 0; }
.check-item { display: flex; gap: .5rem; padding: .1rem 0; font-size: .8rem; color: #475569; }
.check-pct { min-width: 3rem; text-align: right; font-size: .75rem; color: var(--accent); font-weight: 600; }
.check-bar { width: 4rem; background: #f1f5f9; border-radius: .2rem; height: .8rem; flex-shrink: 0; align-self: center; overflow: hidden; }
.check-bar > div { height: 100%; background: #3b82f6; border-radius: .2rem; }
.check-label { flex: 1; }

/* Active question (keyboard nav) */
.q-active { border-left-color: #f59e0b; background: #fffbeb; }
.q-active::after { top: 0; bottom: -1px; background: #fffbeb; }
.q-active .q-title[style] { background: var(--q-fg); color: var(--q-bg); }
.q-active .q-toggle { background: #f59e0b; color: #78350f; }

/* Starred question */
.q.starred .q-toggle { background: #fbbf24; color: #78350f; }

/* Filter visibility */
.q.hidden { display: none; }
.domain-wrap.hidden { display: none; }
.module-wrap.hidden { display: none; }