/* Survey form and results page. Colours follow the site theme via Bootstrap variables. */
.survey-form { max-width: 860px; text-align: left; }
.sq-progress { position: sticky; top: 0; z-index: 5; background: var(--bs-body-bg); padding: .6rem 0 .4rem; margin-bottom: 1rem; }
.sq-progress .progress { height: 6px; }
.sq-section { margin: 2.2rem 0 1rem; }
.sq-intro { color: var(--bs-secondary-color); }
.sq { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 1rem 1.2rem .8rem; margin: 0 0 1rem; }
.sq[hidden] { display: none; }
.sq.sq-missing { border-color: var(--bs-danger); box-shadow: 0 0 0 2px rgba(206,0,55,.15); }
.sq-label { font-size: 1rem; font-weight: 600; float: left; width: 100%; margin-bottom: .4rem; }
.sq > :not(legend) { clear: both; }
.sq-req { color: var(--bs-danger); }
.sq-help { font-size: .88rem; color: var(--bs-secondary-color); margin: -.2rem 0 .6rem; }
.sq-options.sq-cols { columns: 2 280px; column-gap: 2rem; }
.sq-options .form-check { break-inside: avoid; margin-bottom: .2rem; }
.sq-other { margin-top: .5rem; max-width: 420px; }
.sq-other[hidden] { display: none; }
.sq-scale { display: flex; flex-wrap: wrap; gap: .4rem; }
.sq-matrix-wrap { overflow-x: auto; }
.sq-matrix { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sq-matrix th, .sq-matrix td { padding: .45rem .4rem; border-bottom: 1px solid var(--bs-border-color); }
.sq-matrix thead th { font-weight: 500; font-size: .78rem; text-align: center; color: var(--bs-secondary-color); vertical-align: bottom; }
.sq-matrix tbody th { font-weight: 400; text-align: left; min-width: 14rem; }
.sq-matrix td { text-align: center; }
.sq-matrix .form-check-input { float: none; margin: 0; }
.sq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sq-submit { margin: 2rem 0 4rem; }
.sq-status { margin-top: .8rem; }
.sq-done { max-width: 640px; margin: 3rem 0; }
@media (max-width: 640px) {
  .sq-matrix thead { display: none; }
  .sq-matrix tbody tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color); }
  .sq-matrix tbody th { display: block; border: 0; padding-bottom: .3rem; }
  .sq-matrix td { display: flex; align-items: center; gap: .5rem; border: 0; padding: .15rem .4rem; text-align: left; }
  .sq-matrix td::after { content: attr(data-label); font-size: .85rem; }
}

/* ---------- results ---------- */
.res-root {
  --viz-surface: var(--bs-body-bg);
  --viz-ink: var(--bs-body-color);
  --viz-muted: var(--bs-secondary-color);
  --viz-grid: rgba(127,127,127,.18);
  text-align: left;
}
.res-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: .5rem 0 1.5rem; padding: .8rem 1rem; border: 1px solid var(--bs-border-color); border-radius: 8px; }
.res-filters label { font-size: .8rem; color: var(--bs-secondary-color); display: block; margin-bottom: .2rem; }
.res-filters .form-select { min-width: 14rem; }
.res-filters .res-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.res-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.res-tile { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: .8rem 1rem; }
.res-tile .v { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.res-tile .l { font-size: .82rem; color: var(--bs-secondary-color); }
.res-section { margin-top: 2.5rem; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 1.2rem; }
.res-card { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 1rem 1.1rem; min-width: 0; }
.res-card.wide { grid-column: 1 / -1; }
.res-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .2rem; }
.res-card .res-n { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .6rem; }
.res-card .res-insight { font-size: .88rem; margin: .5rem 0 0; }
.res-card svg { max-width: 100%; height: auto; overflow: visible; }
.res-card figure { margin: 0; }
.res-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--bs-secondary-color); margin: .2rem 0 .5rem; }
.res-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; background: var(--c); }
.res-texts { max-height: 320px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.res-texts li { border-left: 3px solid var(--bs-border-color); padding: .3rem .7rem; margin-bottom: .5rem; font-size: .9rem; white-space: pre-wrap; }
.res-empty { color: var(--bs-secondary-color); font-style: italic; }
.res-table { font-size: .82rem; margin-top: .5rem; }
.res-table summary { cursor: pointer; color: var(--bs-secondary-color); }
.res-table table { width: 100%; margin-top: .4rem; }
.res-table td, .res-table th { padding: .15rem .4rem; border-bottom: 1px solid var(--bs-border-color); }
.res-table td.num { text-align: right; font-variant-numeric: tabular-nums; }