/* lpfs.css
 * Extra styling for lpfs.html; loaded after screening.css so these rules can override the shared base.
 * CSS controls appearance. JavaScript controls responses and generated notes.
 * Rules later in the file can override earlier rules with equal specificity.
 */

.response-key {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
}
.response-key span {
  color: var(--muted-text);
}
.overall-result {
  padding: 14px;
  border: 1px solid var(--accent-primary);
  border-radius: 20px;
  background: var(--surface-2);
}
.marker-text {
  margin-top: 6px;
  color: var(--muted-text);
  font-weight: 600;
}
.domain-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
/* Display one personality-functioning domain score and its reference marker. */
.domain-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
}
.domain-card h3 {
  margin: 0 0 8px;
}
.domain-score {
  font-size: 24px;
  font-weight: 700;
}
.domain-marker {
  margin-top: 4px;
  color: var(--muted-text);
}
/* Reference marker segments; JavaScript applies active to crossed thresholds. */
.benchmark-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.benchmark-bar span {
  height: 7px;
  border-radius: 999px;
  background: var(--track);
}
.benchmark-bar span.active {
  background: var(--accent-primary);
}
.reference-table {
  overflow-x: auto;
}
.reference-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(85px, 1fr));
  min-width: 590px;
}
.reference-row span {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.reference-row.header {
  color: var(--accent-secondary);
  font-weight: 700;
}
.reference-row.current {
  background: var(--highlight-surface);
}
.reference-row.current span:first-child {
  color: var(--accent-primary);
  font-weight: 700;
}
/* Smaller-screen adjustments: reduce columns and spacing to fit the available width. */
@media (max-width: 760px) {
  .response-grid,
  .domain-results {
    grid-template-columns: 1fr 1fr;
  }
}
/* Smaller-screen adjustments: reduce columns and spacing to fit the available width. */
@media (max-width: 480px) {
  .response-grid,
  .domain-results {
    grid-template-columns: 1fr;
  }
}