.answer-frequency-page {
  display: grid;
  gap: 8px;
}

.answer-frequency-page section {
  margin: 0;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.answer-frequency-page #answer-frequency-main-table-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.answer-frequency-page h1 {
  margin: 0 0 6px;
}

.answer-frequency-page .summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
}

.answer-frequency-page .table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.answer-frequency-page .controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 6px;
  align-items: end;
  margin-bottom: 10px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.answer-frequency-page .controls>* {
  min-width: 0;
}

.answer-frequency-page .controls>*:first-child {
  grid-column: span 2;
}

.answer-frequency-page .count-range-control,
.answer-frequency-page .rate-range-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.answer-frequency-page .count-range-control>*,
.answer-frequency-page .rate-range-control>* {
  min-width: 0;
}

.answer-frequency-page .rate-range-control>span {
  grid-column: 1 / -1;
  color: var(--subtle-mute);
  font-size: 0.9rem;
  text-align: center;
  font-weight: 700;
}

.answer-frequency-page label {
  display: grid;
  gap: 3px;
  color: var(--subtle-mute);
  font-size: 0.9rem;
}

.answer-frequency-page input,
.answer-frequency-page select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  width: 100%;
  min-height: var(--tap-target, 44px);
}

.answer-frequency-page .check {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  color: var(--subtle-mute);
  white-space: normal;
  min-height: var(--tap-target, 44px);
  justify-self: start;
}

.answer-frequency-page .check input {
  width: auto;
}

.answer-frequency-page th {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}

.answer-frequency-page td {
  overflow-wrap: anywhere;
}

.answer-frequency-page tbody tr.term-row {
  cursor: pointer;
}

.answer-frequency-page tbody tr.term-row:hover {
  background: #f9fbfd;
}

.answer-frequency-page .detail-cell {
  background: #fbfcfe;
  padding: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.answer-frequency-page .detail {
  padding: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.answer-frequency-page .detail .detail-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.answer-frequency-page .detail-cell .detail .detail-table-wrap>.detail-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
}

.answer-frequency-page .detail h3,
.answer-frequency-page .detail .detail-table th {
  white-space: normal;
}

.answer-frequency-page .detail .detail-table th,
.answer-frequency-page .detail .detail-table td {
  vertical-align: top;
}

.answer-frequency-page .detail .detail-header-cell {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.answer-frequency-page .detail .detail-table td.detail-col-compact {
  white-space: nowrap;
  width: 1%;
}

.answer-frequency-page .detail .detail-table th.detail-col-compact {
  white-space: nowrap;
}

.answer-frequency-page .detail .detail-col-phrase,
.answer-frequency-page .detail .detail-col-choice {
  width: auto;
  min-width: 0;
}

.answer-frequency-page .detail .detail-col-selected-answer {
  width: auto;
  min-width: 0;
}

/* * Wider Example refs column */
.answer-frequency-page .detail .detail-table th.detail-col-refs,
.answer-frequency-page .detail .detail-table td.detail-col-refs,
.answer-frequency-page .detail .detail-table .detail-col-text.detail-col-refs.refs {
  width: auto;
  min-width: 0;
}

.answer-frequency-page .detail .detail-col-ref {
  width: auto;
  min-width: 0;
}

.answer-frequency-page .detail td.detail-col-refs,
.answer-frequency-page .detail td.detail-col-ref,
.answer-frequency-page .detail .detail-copy-refs,
.answer-frequency-page .detail .detail-copy-ref {
  font-size: 10px;
}

.answer-frequency-page .detail .detail-col-total,
.answer-frequency-page .detail .detail-col-correct,
.answer-frequency-page .detail .detail-col-incorrect,
.answer-frequency-page .detail .detail-col-is-correct,
.answer-frequency-page .detail .detail-col-is-selected,
.answer-frequency-page .detail .detail-col-letter {
  width: auto;
  min-width: max-content;
}

.answer-frequency-page .detail .detail-col-missed,
.answer-frequency-page .detail .detail-col-confidence {
  width: auto;
  min-width: max-content;
}

.answer-frequency-page .detail .detail-col-rate {
  width: auto;
  min-width: max-content;
}

.answer-frequency-page .detail .detail-table .detail-col-text {
  white-space: normal;
}

.answer-frequency-page .detail .detail-cell-copy {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.answer-frequency-page .detail .detail-copy-phrase,
.answer-frequency-page .detail .detail-copy-choice {
  max-inline-size: min(28ch, 30vw);
}

.answer-frequency-page .detail .detail-copy-refs {
  max-inline-size: min(48ch, 44vw);
}

.answer-frequency-page .detail .detail-copy-ref {
  max-inline-size: min(20ch, 20vw);
}

.answer-frequency-page .pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #174c7c;
  font-size: 0.82rem;
}

.answer-frequency-page .selected-wrong-ref {
  display: inline-block;
  background: #fff1d6;
  color: #7a4b00;
  padding: 1px 4px;
  margin: auto;
  max-width: max-content;
  border-width: 0.2px;
  border-color: #7a4b00;
  margin-left: 0.8rem;
}

.answer-frequency-page details summary {
  cursor: pointer;
  font-weight: 700;
}

.answer-frequency-page .data-quality-summary {
  margin-top: 10px;
}

.answer-frequency-page .data-quality-path {
  margin-top: 8px;
}

@media (max-width: 860px) {
  .answer-frequency-page section {
    padding: 11px;
  }

  .answer-frequency-page .summary {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .answer-frequency-page .controls,
  .answer-frequency-page .rate-range-control {
    grid-template-columns: 1fr;
  }

  .answer-frequency-page .controls>*:first-child {
    grid-column: span 1;
  }

  .answer-frequency-page .controls {
    gap: 4px;
  }

  .answer-frequency-page #term-table {
    min-width: 760px;
  }

  .answer-frequency-page #term-table th:nth-child(7),
  .answer-frequency-page #term-table td:nth-child(7),
  .answer-frequency-page #term-table th:nth-child(8),
  .answer-frequency-page #term-table td:nth-child(8) {
    display: none;
  }

  .answer-frequency-page input,
  .answer-frequency-page select {
    padding: 6px 7px;
  }

  .answer-frequency-page .check {
    white-space: normal;
  }

  .answer-frequency-page {
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .answer-frequency-page {
    gap: 8px;
  }

  .answer-frequency-page section {
    padding: 10px;
  }

  .answer-frequency-page .summary {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 4px;
  }

  .answer-frequency-page .metric {
    padding: 7px;
  }

  .answer-frequency-page .metric strong {
    font-size: 1.1rem;
  }

  .answer-frequency-page label {
    font-size: 0.86rem;
  }

  .answer-frequency-page input,
  .answer-frequency-page select {
    padding: 5px 7px;
    font-size: 0.95rem;
  }

  .answer-frequency-page #term-table {
    min-width: 560px;
  }

  .answer-frequency-page #term-table th:nth-child(4),
  .answer-frequency-page #term-table td:nth-child(4),
  .answer-frequency-page #term-table th:nth-child(7),
  .answer-frequency-page #term-table td:nth-child(7),
  .answer-frequency-page #term-table th:nth-child(8),
  .answer-frequency-page #term-table td:nth-child(8) {
    display: none;
  }

  .answer-frequency-page th,
  .answer-frequency-page td {
    font-size: 0.84rem;
  }

  .answer-frequency-page th {
    padding: 7px 8px;
  }

  .answer-frequency-page td {
    padding: 5px 6px;
  }

  .answer-frequency-page .detail {
    padding: 8px;
  }

  .answer-frequency-page .detail .detail-table-wrap {
    margin-top: 6px;
  }

  .answer-frequency-page .detail .detail-copy-phrase,
  .answer-frequency-page .detail .detail-copy-choice {
    max-inline-size: min(26ch, 42vw);
  }

  .answer-frequency-page .detail .detail-copy-selected-answer,
  .answer-frequency-page .detail .detail-copy-refs {
    max-inline-size: min(48vw);
  }

  .answer-frequency-page .detail .detail-copy-ref {
    max-inline-size: min(18ch, 28vw);
  }

  .answer-frequency-page .pill,
  .answer-frequency-page .missed-ref {
    font-size: 0.78rem;
  }
}

@media (max-width: 640px) {

  .answer-frequency-page .detail .detail-copy-phrase,
  .answer-frequency-page .detail .detail-copy-choice {
    max-inline-size: min(24ch, 58vw);
  }

  .answer-frequency-page .detail .detail-copy-selected-answer,
  .answer-frequency-page .detail .detail-copy-refs {
    max-inline-size: min(64vw);
  }

  .answer-frequency-page .detail .detail-copy-ref {
    max-inline-size: min(18ch, 48vw);
  }
}