kbd[data-v-5dd3a4f8] {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.75rem;
  font-family: monospace;
  border-radius: 4px;
}
.sep[data-v-5dd3a4f8] {
  margin: 0 2px;
  font-family: inherit;
  font-size: 0.7rem;
  opacity: 0.6;
}
.surface kbd[data-v-5dd3a4f8] {
  border: 1px solid rgba(var(--v-theme-on-surface), 0.25);
  background: rgba(var(--v-theme-on-surface), 0.06);
}

/* Rendered inside a v-tooltip's (dark, light-text) activator, so this uses
   currentColor rather than the on-surface theme token the surface variant
   uses. */
.tooltip kbd[data-v-5dd3a4f8] {
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0.9;
}

/* Reserve the name filter's height even while it's hidden (showNameFilter
   off), so toggling "Toon namen" doesn't push the grid down. */
.matrix-grid-toolbar.reserve-filter-space[data-v-763ab23b] {
  min-height: 40px;
}
.matrix-grid-container[data-v-763ab23b] {
  overflow-x: auto;
}
.matrix-grid[data-v-763ab23b] {
  border-collapse: collapse;
  width: auto;
}
.matrix-grid th[data-v-763ab23b],
.matrix-grid td[data-v-763ab23b] {
  border: 1px solid #ffffff;
  text-align: center;
  padding: 6px 8px;
  white-space: nowrap;
}
.matrix-grid thead th[data-v-763ab23b] {
  background-color: #e5e5e5;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 2;
}
.matrix-grid tfoot td[data-v-763ab23b] {
  background-color: #f1f1f1;
  font-weight: bold;
  position: sticky;
  bottom: 0;
}
.sticky-col[data-v-763ab23b] {
  position: sticky;
  left: 0;
  background-color: #f1f1f1;
  z-index: 1;
}
/* ".matrix-grid td/th" (element+class) outranks a plain ".sticky-col"
   class selector in specificity regardless of source order, so its
   text-align: center always won over this — needs the extra element
   qualifier to actually beat it. */
.matrix-grid td.sticky-col[data-v-763ab23b],
.matrix-grid th.sticky-col[data-v-763ab23b] {
  text-align: left;
}
/* The footer's name-col cell holds the displayed row count, not a name —
   keep it centered like every other footer cell. */
.matrix-grid tfoot td.sticky-col[data-v-763ab23b] {
  text-align: center;
}
.matrix-grid thead th.sticky-col[data-v-763ab23b] {
  z-index: 3;
  background-color: #e5e5e5;
}
.name-col[data-v-763ab23b] {
  min-width: 120px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The name column's header is left-aligned to match its (left-aligned)
   body cells — .clickable-header centers everything else by default. */
.clickable-header--left[data-v-763ab23b] {
  justify-content: flex-start;
}
.total-col[data-v-763ab23b] {
  min-width: 60px;
  font-weight: bold;
}
.narrow[data-v-763ab23b] {
  min-width: 24px;
  width: 24px;
  background-color: #e5e5e5;
}
.icon-cell[data-v-763ab23b] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.clickable-header[data-v-763ab23b] {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-cell[data-v-763ab23b] {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.name-filter[data-v-763ab23b] {
  max-width: 290px;
}
.no-rows-message[data-v-763ab23b] {
  text-align: center;
  color: rgb(var(--v-theme-secondary));
  cursor: default;
  padding: 16px;
}
.matrix-grid.normal-mode tbody tr:nth-child(even) td[data-v-763ab23b]:not(.narrow) {
  background-color: #f7f7f7;
}

/* Whole-column highlight (header + every row + footer average) — thicker
 * colored side borders win over the 1px white cell borders at the shared
 * edge under border-collapse, so the column reads as one continuous boxed
 * band instead of clipping like an outline would. */
.matrix-col-active[data-v-763ab23b] {
  background-color: rgba(var(--v-theme-primary), 0.14) !important;
  border-left: 2px solid rgb(var(--v-theme-primary));
  border-right: 2px solid rgb(var(--v-theme-primary));
}
/* An item spanning several adjacent columns (e.g. an assignment's intro +
   its questions) should read as one continuous band — drop the seam
   between two active columns that sit right next to each other. */
.matrix-col-active[data-v-763ab23b]:has(+ .matrix-col-active) {
  border-right: none;
}
.matrix-col-active + .matrix-col-active[data-v-763ab23b] {
  border-left: none;
}
thead .matrix-col-active[data-v-763ab23b] {
  border-top: 2px solid rgb(var(--v-theme-primary));
}
tfoot .matrix-col-active[data-v-763ab23b] {
  border-bottom: 2px solid rgb(var(--v-theme-primary));
}

/* Phone: shrink the sticky name column and cell chrome so the horizontally
 * scrolling result area keeps a usable share of the viewport. */
@media (max-width: 599px) {
.name-col[data-v-763ab23b] {
    min-width: 96px;
    max-width: 130px;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.total-col[data-v-763ab23b] {
    min-width: 44px;
}
.matrix-grid th[data-v-763ab23b],
  .matrix-grid td[data-v-763ab23b] {
    padding: 4px 6px;
    font-size: 13px;
}
.name-filter[data-v-763ab23b] {
    max-width: 100%;
}
}

.no-content[data-v-93dbec7a] {
  color: rgb(var(--v-theme-neutral-600));
}
@media (max-width: 599px) {
.results-toggles[data-v-93dbec7a] .v-btn-toggle {
    max-width: 100%;
    overflow-x: auto;
}
}

.nav-arrow[data-v-f88cc033] {
  position: fixed;
  z-index: 2500;
}
.nav-bar-mobile[data-v-f88cc033] {
  justify-content: center;
  gap: 8px;
}

.answer-text[data-v-21635e89] {
  white-space: pre-wrap;
}
.title-text[data-v-21635e89] {
  min-width: 0;
  word-break: break-word;
}
.answer-option-row.is-given[data-v-21635e89] {
  background-color: rgba(var(--v-theme-primary), 0.08);
  border-radius: 4px;
  padding: 4px 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.nav-arrow[data-v-21635e89] {
  position: fixed;
  z-index: 2500;
}
.nav-bar-mobile[data-v-21635e89] {
  justify-content: center;
  gap: 8px;
}

/* Vuetify lays the panels out as a wrapping flex row (each panel 100%
   wide). Inside the shrink-wrapped ResultsDialog that matters: a wrapping
   flex container's intrinsic width is the SUM of its items, so opening a
   second segment widened the dialog by that segment's grid instead of the
   dialog simply taking the widest one. A column container's intrinsic
   width is the widest item — visually identical, one panel per row. */
.segment-panels[data-v-a495ecdd] {
  flex-direction: column;
}
.segment-age[data-v-a495ecdd] {
  font-size: 0.75rem;
  font-weight: normal;
  color: rgb(var(--v-theme-neutral-400));
}
@media (max-width: 599px) {
.results-toggles[data-v-a495ecdd] .v-btn-toggle {
    max-width: 100%;
    overflow-x: auto;
}
}

/* Shrink-wrapped width (see the component doc comment): keep enough room
   for the toggles/filters toolbar and the title when the grid is narrow. */
.results-dialog-card[data-v-bdcee73e] {
  min-width: min(760px, 95vw);
}
/* A vertical scrollbar appearing in the body would otherwise eat a few px
   of the shrink-wrapped width and give every grid a needless horizontal
   scrollbar. */
.results-dialog-body[data-v-bdcee73e] {
  scrollbar-gutter: stable;
}
.results-dialog-heading[data-v-bdcee73e] {
  font-size: 1.1rem;
  font-weight: 500;
}