/*
 * iq-form.css — self-contained styling for the generated filter panels.
 *
 * Intentionally does NOT depend on the legacy iqstyle.css checkbox rules (which
 * hard-set li.cluster-title{display:none} and per-genre slug widths). Everything
 * the generated form needs is here, keyed off generic classes + .iq-genre.
 */

/* One font family across the whole form. The legacy CSS uses 'Roboto' for
   headings/labels while Bootstrap sets inputs/selects to Helvetica Neue — force
   them all to the same stack (form controls don't inherit font-family by default). */
#iq_form,
#iq_form h4,
#iq_form p,
#iq_form li,
#iq_form label,
#iq_form strong,
#iq_form select,
#iq_form input,
#iq_form button,
#iq_form textarea {
  font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Filter step (step 2) grouping: each section has a consistent bold label and
   even spacing, so the sections line up instead of feeling scattered. */
.iq-flabel {
  display: block;
  font-weight: 700;
  color: #5b0961;
  margin: 0 0 8px;
  list-style: none;
}
.iq-fgroup { margin: 0 0 20px; }
#filter-fieldset #filter-selector-radio,
#filter-fieldset #filter-selector-interesting { margin: 0; padding: 0; }
#filter-fieldset .itemtype-row { margin-top: 8px; }
/* line-height forced (!important) to beat the inherited body { line-height:30px }. */
.iq-note { font-size: 13px; line-height: 1.2 !important; color: #666; margin: 12px 0 0; }

.iq-hidden { display: none !important; }

/* SE checkbox lists: 4 columns for every grade. CSS grid gives a reliable 4-up
   (inline-block + % widths dropped genres to ~2 per row from whitespace rounding). */
.iq-grade .ckbx-se {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 10px;
}
.iq-grade .ckbx-se > li {
  width: auto;
  vertical-align: top;
  box-sizing: border-box;
  padding: 2px 6px 2px 0;
}
/* Section headers and the Select All row span all four columns. */
.iq-grade .ckbx-se > li.cluster-title,
.iq-grade .ckbx-se > li:first-child { grid-column: 1 / -1; }

/* Section headers (cluster / subcluster / genre) span the full row.
   The Subcluster picker's cluster-name headers share this exact styling. */
.iq-grade .ckbx-se > li.cluster-title,
.iq-grade .ckbx-clusters > li.iq-clusterhead {
  display: block;
  width: 100%;
  font-weight: 700;
  margin: 12px 0 4px;
  padding: 0;
  color: #5b0961;
}
.iq-grade .ckbx-se > li.cluster-title.iq-hidden { display: none !important; }

/* NOTE: cluster / subcluster checkbox lists (.ckbx-clusters) are intentionally
   NOT restyled here — they keep the original legacy layout from iq-legacy-form.css. */
.iq-grade label { cursor: pointer; }

/* Cluster-name headers in the Subcluster picker inherit the .cluster-title
   styling above; only tweak list marker + first-child spacing here. */
.iq-grade .ckbx-clusters > li.iq-clusterhead { list-style: none; }
.iq-grade .ckbx-clusters > li.iq-clusterhead:first-child { margin-top: 0; }

/* Stimulus filter: full-width row, checkboxes spread across the whole width. */
.stimulus-filter { margin: 18px 0 0; clear: both; }
.stimulus-filter > strong { display: block; margin-bottom: 6px; }
/* Grid with a min column width: columns adapt to fit and long labels stay in
   their own cell instead of overrunning neighbors. */
.ckbx-stimulus {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 16px;
}
.ckbx-stimulus > li { padding: 4px 0; min-width: 0; }
/* Flex label: checkbox + text are separate flex items, so a wrapped second line
   aligns with the first line of text (hanging indent) instead of under the box. */
.ckbx-stimulus label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
  min-width: 0;
  /* Multi-word labels wrap at spaces (word-break:normal). A single token wider
     than its own column (e.g. "investigation/experiment/demonstration") breaks to
     fit and fills the line rather than bleeding into the next column. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.ckbx-stimulus label input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 3px 0 0;
}

/* Item Complexity (rigor): checkbox + label on one line; wrapped text hangs
   indented to align with the first line instead of dropping under the box. */
.ckbx-rigor { list-style: none; padding: 0; }
.ckbx-rigor > li { margin: 3px 0; }
.ckbx-rigor label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 400;
  line-height: 1;
}
/* Override the global `input[type=radio]{margin-top:-3px}` in iq-legacy-form.css
   that pulls the radio above the text. */
.ckbx-rigor label input[type="radio"] {
  flex: 0 0 auto;
  margin: 3px 0 0;
}

/* Info (i) icons next to filter headers + the image modal they open. */
.iq-info-icon {
  background: none;
  border: 0;
  padding: 0 4px;
  margin: 0;
  color: #5b0961;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
}
.iq-info-icon:hover { color: #015AAB; }

.iq-info-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.iq-info-modal-backdrop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.iq-info-modal-box {
  position: relative;
  background: #fff;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
}
.iq-info-modal-box img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
}
.iq-info-modal-close {
  position: absolute;
  top: 2px; right: 8px;
  background: none;
  border: 0;
  color: #333;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}