/* Pico does the base styling. This file sets the survey's blue and the
   few widgets Pico has no pattern for. */
:root:not([data-theme=dark]), [data-theme=light] {
  --pico-primary: #2F5496;
  --pico-primary-background: #2F5496;
  --pico-primary-border: #2F5496;
  --pico-primary-underline: rgba(47, 84, 150, .5);
  --pico-primary-hover: #24427a;
  --pico-primary-hover-background: #24427a;
  --pico-primary-hover-border: #24427a;
  --pico-primary-hover-underline: #24427a;
  --pico-primary-focus: rgba(47, 84, 150, .3);
  --pico-primary-inverse: #fff;
}
main.container { max-width: 760px; padding-bottom: 4rem; }
h1 { color: var(--pico-primary); }

.q {
  margin-bottom: 2rem; margin-inline-start: -.7rem; padding-inline-start: .5rem;
  border-inline-start: 4px solid transparent;
}
.q.unanswered { border-inline-start-color: var(--pico-primary); }
.q.unanswered > .label { color: var(--pico-primary); }
.q > .label { font-weight: 600; font-size: 1.05rem; margin-bottom: .75rem; }
.q > input, .q select { margin-bottom: 0; }
.err { color: var(--pico-del-color); font-size: .9rem; margin-top: .4rem; }

/* single-choice rows */
.choices { display: grid; gap: .5rem; }
.choices.inline { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.choice {
  display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 1rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-background-color); cursor: pointer; line-height: 1.35;
  transition: border-color .15s, background-color .15s;
}
.choice:hover { border-color: var(--pico-primary); }
.choice:has(input:checked) {
  border-color: var(--pico-primary); background: rgba(47, 84, 150, .07);
  box-shadow: inset 0 0 0 1px var(--pico-primary);
}
.choices label.choice { width: 100%; }
.choice input { flex: none; margin: 0; }

/* agree-disagree battery: stacked rows on phones, a grid from 768px */
.mhead { display: none; }
@media (min-width: 768px) {
  .matrix { display: grid; grid-template-columns: minmax(0, 1fr) repeat(6, 4.1rem); column-gap: .3rem; margin-bottom: 2rem; }
  .mhead, .matrix .mrow { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
  .mhead {
    position: sticky; top: 0; z-index: 1; padding: .5rem 0; background: var(--pico-background-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
  }
  .mhead span { text-align: center; font-size: .8rem; line-height: 1.2; color: var(--pico-muted-color); }
  .matrix .mrow { margin: 0; padding-block: .55rem; border-bottom: 1px solid var(--pico-muted-border-color); }
  .matrix .mrow:hover { background: rgba(47, 84, 150, .04); }
  .matrix .mrow > .label { margin: 0; padding-inline-end: 1rem; font-size: .95rem; }
  .matrix .choices { display: contents; }
  .matrix .choice {
    justify-content: center; align-self: stretch; padding: .4rem 0;
    border: 0; background: none; box-shadow: none;
  }
  .matrix .choice:has(input:checked) { background: none; box-shadow: none; }
  .matrix .choice input { width: 1.4rem; height: 1.4rem; }
  .matrix .choice span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

button.success { --pico-background-color: #2e7d32; --pico-border-color: #2e7d32; }
button.big { font-size: 1.1rem; padding: .9rem 2.2rem; }
.center { text-align: center; margin: 1.5rem 0; }
.lang { max-width: 260px; margin: 0 auto 1rem; }

.slider output { display: block; font-size: 1.3rem; font-weight: 700; color: var(--pico-primary); }
.slider input { margin-bottom: 0; }
.slider .ends { display: flex; justify-content: space-between; color: var(--pico-muted-color); font-size: .85rem; }

/* drag-to-rank list */
.hint { display: block; color: var(--pico-muted-color); margin: -.4rem 0 .6rem; }
.rank { list-style: none; margin: 0; padding: 0; }
.rank li {
  list-style: none; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; margin-bottom: .5rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: var(--pico-background-color); box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; line-height: 1.35;
  transition: border-color .15s, box-shadow .15s;
}
.rank li:hover, .rank li:focus-visible { border-color: var(--pico-primary); box-shadow: 0 2px 8px rgba(16, 24, 40, .1); outline: none; }
.rank li:hover .grip { color: var(--pico-primary); }
.rank .n {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--pico-primary); color: #fff; font-size: .9rem; font-weight: 600;
}
.rank .txt { flex: 1; }
.rank .grip { flex: none; display: grid; color: var(--pico-muted-color); }
.rank li.ghost { opacity: .4; border-style: dashed; border-color: var(--pico-primary); box-shadow: none; }
.rank li.dragging { opacity: 1 !important; cursor: grabbing; border-color: var(--pico-primary); box-shadow: 0 10px 28px rgba(16, 24, 40, .2); }

.bios { display: flex; justify-content: center; gap: 1.75rem; flex-wrap: wrap; margin: 1.25rem 0; }
.bios div { text-align: center; max-width: 160px; }
.bios img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto .5rem; }
.bios small { color: var(--pico-muted-color); }

.consent { font-size: .95rem; margin: 1.25rem 0; }
.vignette p { font-size: 1.1em; line-height: 1.8; text-align: justify; }

#modal-title { margin: 0; }
#modal-foot { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
#modal-foot button { margin: 0; }