/* =========================================================
   SECTION COLOURS
========================================================= */

.section-alternate {

  --section-color:
    var(--section-alternate);

}


.section-minutes {

  --section-color:
    var(--section-minutes);

}


.section-buzzer {

  --section-color:
    var(--section-buzzer);

}


.section-marker {

  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    var(--section-color);

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--section-color) 30%,
      transparent
    );

}



/* =========================================================
   QUESTION TABLES
========================================================= */

.question-table-wrap {

  overflow-x: auto;

}


.question-table {

  width: 100%;

  border-collapse: collapse;

}


.question-table th {

  padding:
    12px 15px;

  color:
    var(--text-muted);

  background:
    var(--surface-soft);

  border-bottom:
    1px solid
    var(--border);

  text-align: left;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.question-table td {

  padding:
    15px;

  color:
    var(--text-secondary);

  border-bottom:
    1px solid
    var(--border-soft);

  vertical-align: top;

}


.question-table tr:last-child td {

  border-bottom: 0;

}


.question-table tbody tr {

  transition:
    background var(--transition-fast);

}


.question-table tbody tr:hover {

  background:
    var(--surface-soft);

}


.question-number {

  color:
    var(--text-faint);

  font-weight: 800;

  font-variant-numeric:
    tabular-nums;

}



/* =========================================================
   ANSWERS
========================================================= */

.answer {

  margin-top: 10px;

  padding:
    9px 11px;

  color:
    var(--answer);

  background:
    var(--answer-soft);

  border-left:
    3px solid
    var(--answer);

  border-radius:
    4px;

  font-weight: 600;

}


.answer-label {

  display: inline-block;

  margin-right: 7px;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}


.is-hidden {

  display: none !important;

}