/* Material Design 3 components for the portal (m3.material.io).

   Loaded last, so it gives every existing class its Material look without the
   templates changing. Colours are Material roles only (see m3-tokens.css);
   shapes, elevation, state layers and motion come from the system tokens at
   the top of app.css.

   Window size classes follow the Material layout guidance:
     compact  under 600px   modal navigation drawer, single column
     medium   600 to 839px  navigation rail
     expanded 840px and up  standard navigation drawer */

/* --- Base and type scale ------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: 1rem;
  line-height: calc(1.5 * var(--md-lang-height));
  letter-spacing: 0.03125rem;
}

:lang(hi) body {
  letter-spacing: 0;
}

/* headline-medium, title-large, title-medium */
h1 {
  font-size: 1.75rem;
  line-height: calc(2.25rem * var(--md-lang-height));
  font-weight: 400;
  letter-spacing: 0;
  margin: 0.5rem 0 0.75rem;
}

h2 {
  font-size: 1.5rem;
  line-height: calc(1.75rem * var(--md-lang-height));
  font-weight: 400;
  letter-spacing: 0;
}

h3 {
  font-size: 1rem;
  line-height: calc(1.5rem * var(--md-lang-height));
  font-weight: 500;
  letter-spacing: 0.009375rem;
}

@media (max-width: 599px) {
  /* headline-small */
  h1 {
    font-size: 1.5rem;
    line-height: calc(2rem * var(--md-lang-height));
  }

  h2 {
    font-size: 1.25rem;
    line-height: calc(1.75rem * var(--md-lang-height));
  }
}

a {
  color: var(--md-sys-color-primary);
  text-underline-offset: 0.18em;
}

.muted,
.small,
.page-lede {
  color: var(--md-sys-color-on-surface-variant);
}

.small,
.field-help,
.field-error,
.progress-text,
.table-filter-status {
  font-size: 0.75rem;
  line-height: calc(1rem * var(--md-lang-height));
  letter-spacing: 0.025rem;
}

.page-lede {
  font-size: 1rem;
  line-height: calc(1.5rem * var(--md-lang-height));
}

:focus-visible {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

@media screen and (prefers-contrast: more) {
  :root {
    --border: var(--md-sys-color-outline);
  }
}

/* --- Buttons -------------------------------------------------------------- */
/* Filled (the default), outlined (.button-secondary), text (.link-button),
   and filled-error for a destructive confirm. The state layer is the
   component's own content colour mixed over it at the Material opacities. */
.button,
.link-button,
button[data-confirm],
.pagination a {
  --md-state: transparent;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background-image: linear-gradient(var(--md-state), var(--md-state));
  font: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  letter-spacing: 0.00625rem;
  text-decoration: none;
  cursor: pointer;
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.button {
  --md-state-color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.button-secondary {
  --md-state-color: var(--md-sys-color-primary);
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.button-danger {
  --md-state-color: var(--md-sys-color-on-error);
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

button[data-confirm] {
  --md-state-color: var(--md-sys-color-error);
  min-height: 2rem;
  padding: 0.25rem 1rem;
  background-color: transparent;
  color: var(--md-sys-color-error);
  border: 1px solid var(--md-sys-color-error);
}

.link-button,
button.link-button,
.pagination a {
  --md-state-color: var(--md-sys-color-primary);
  padding: 0.625rem 0.75rem;
  background-color: transparent;
  color: var(--md-sys-color-primary);
  font-weight: 500;
}

.link-button:hover,
.pagination a:hover {
  text-decoration: none;
}

.button-small {
  min-height: 2rem;
  padding: 0.25rem 1rem;
}

.button-primary {
  min-height: 3.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.button-google {
  --md-state-color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
}

@media (hover: hover) {
  .button:hover,
  .link-button:hover,
  button[data-confirm]:hover,
  .pagination a:hover {
    --md-state: color-mix(in srgb, var(--md-state-color) var(--md-sys-state-hover), transparent);
  }

  .button:not(.button-secondary):not(.button-google):hover {
    box-shadow: var(--md-sys-elevation-1);
  }
}

.button:focus-visible,
.link-button:focus-visible,
button[data-confirm]:focus-visible,
.pagination a:focus-visible {
  --md-state: color-mix(in srgb, var(--md-state-color) var(--md-sys-state-focus), transparent);
}

.button:active,
.link-button:active,
button[data-confirm]:active,
.pagination a:active {
  --md-state: color-mix(in srgb, var(--md-state-color) var(--md-sys-state-pressed), transparent);
}

button:disabled,
.button[disabled] {
  opacity: 0.38;
  box-shadow: none;
  cursor: default;
}

/* --- Text fields (outlined) ----------------------------------------------- */
:is(
    .form-field,
    .form-card .form-field,
    .question,
    .filters .form-field,
    .inline-add,
    .table-filter,
    .audit-filters .form-field
  )
  :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="date"]), select, textarea),
:is(.form-field, .form-card .form-field, .filters .form-field, .inline-add) input[type="date"] {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 3.5rem;
  padding: 0.875rem 1rem;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: 400 1rem/1.5rem var(--md-ref-typeface-plain);
  letter-spacing: 0.03125rem;
  transition:
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

:root :is(.filters .form-field, .inline-add, .table-filter) :is(input, select) {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

:is(.form-field, .question, .filters .form-field, .inline-add, .table-filter)
  :is(input, select, textarea):hover {
  border-color: var(--md-sys-color-on-surface);
}

:is(.form-field, .question, .filters .form-field, .inline-add, .table-filter)
  :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

:is(.form-field, .question) :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--md-sys-color-error);
}

:is(.form-field, .question) :is(input, select, textarea):disabled {
  opacity: 0.38;
  background: var(--md-sys-color-surface-container-highest);
}

.form-field label {
  display: block;
  margin-bottom: 0.375rem;
  font: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  letter-spacing: 0.00625rem;
  color: var(--md-sys-color-on-surface-variant);
}

.form-field .field-help {
  color: var(--md-sys-color-on-surface-variant);
}

.field-error {
  color: var(--md-sys-color-error);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--md-sys-color-primary);
  width: 1.125rem;
  height: 1.125rem;
}

.question textarea {
  height: 7.5rem;
}

/* Search bars: a full-radius field on a container colour, no outline. */
.site-header .header-search input,
.sidebar .sidebar-search input {
  min-height: 2.75rem;
  padding: 0.5rem 1rem 0.5rem 2.75rem;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  font: 400 1rem/1.5rem var(--md-ref-typeface-plain);
}

.site-header .header-search input:focus,
.sidebar .sidebar-search input:focus {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
  box-shadow: none;
}

/* --- Cards, panels and containers ---------------------------------------- */
.card,
.panel,
.notice,
.form-card,
.filters,
.table-scroll,
.result-list,
.error-page {
  border-radius: var(--md-sys-shape-corner-medium);
}

/* Outlined cards. */
.card,
.panel,
.form-card,
.filters,
.table-scroll,
.result-list {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: none;
}

.card {
  padding: 1rem 1.25rem;
  border-left-width: 1px;
}

/* An awaiting card is "selected": a 2px primary outline. */
.card-awaiting {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

.card-not-available {
  background: var(--md-sys-color-surface-container-low);
}

.card-completed,
.card-opening-soon,
.card-not-available {
  border-color: var(--md-sys-color-outline-variant);
}

/* Filled cards for headline numbers and shortcuts. */
.stat-tile,
.action-card {
  background: var(--md-sys-color-surface-container-low);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: none;
}

.stat-tile-value {
  font-size: 1.75rem;
  line-height: calc(2.25rem * var(--md-lang-height));
  font-weight: 400;
  color: var(--md-sys-color-primary);
}

.stat-tile-warn .stat-tile-value {
  color: var(--md-sys-color-error);
}

.stat-tile-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--md-sys-color-on-surface-variant);
}

.action-card {
  --md-state: transparent;
  background-image: linear-gradient(var(--md-state), var(--md-state));
  transition: background-color var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .action-card:hover {
    --md-state: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover), transparent);
    border-color: transparent;
  }
}

.action-card:focus-visible {
  --md-state: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-focus), transparent);
}

.action-card strong {
  font: 500 1rem/1.5rem var(--md-ref-typeface-plain);
}

.panel > h2:first-child,
.panel-header h2 {
  font-size: 1.5rem;
  line-height: calc(1.75rem * var(--md-lang-height));
  font-weight: 400;
}

/* --- Banners (the message and notice area) -------------------------------- */
.notice {
  padding: 1rem 1.25rem;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border: 0;
  box-shadow: none;
}

.notice a {
  color: inherit;
}

.notice-success {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.notice-error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.notice-anonymity {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.form-error-summary {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border: 0;
  border-radius: var(--md-sys-shape-corner-medium);
}

/* --- Chips and badges ------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  padding: 0 0.625rem;
  border-radius: var(--md-sys-shape-corner-small);
  font: 500 0.75rem/1rem var(--md-ref-typeface-plain);
  letter-spacing: 0.03125rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  letter-spacing: 0.00625rem;
  text-decoration: none;
}

.count-pill {
  border-radius: var(--md-sys-shape-corner-full);
  font: 500 0.75rem/1rem var(--md-ref-typeface-plain);
}

/* --- Tables ---------------------------------------------------------------- */
table {
  font-size: 0.875rem;
  line-height: calc(1.25rem * var(--md-lang-height));
  letter-spacing: 0.015625rem;
}

th,
td {
  padding: 0.75rem 1rem;
  border-bottom-color: var(--md-sys-color-outline-variant);
}

.table-scroll thead th {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 500;
}

tbody tr {
  --md-state: transparent;
  background-image: linear-gradient(var(--md-state), var(--md-state));
}

@media (hover: hover) {
  tbody tr:hover {
    --md-state: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover), transparent);
  }
}

/* --- Header (top app bar) and footer -------------------------------------- */
.site-header {
  min-height: 4rem;
  padding: 0.5rem 1rem;
  background: var(--md-sys-color-surface-container);
  border-bottom: 0;
}

.brand {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}

.brand-text {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.009375rem;
}

@media (min-width: 600px) {
  .site-header {
    padding: 0.5rem 1.5rem;
  }

  .brand-text {
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: 400;
    letter-spacing: 0;
  }
}

.site-footer {
  background: var(--md-sys-color-surface-container-low);
  border-top: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* --- Progress (linear) ------------------------------------------------------ */
.progress-track {
  height: 0.25rem;
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
}

.progress-fill {
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

/* --- Choice chips: the Likert and Yes/No answers ----------------------------- */
/* A selected chip is secondary-container and gains a check mark, so selection
   is never shown by colour alone. */
.question > div > div > label:has(input[type="radio"]) {
  --md-state: transparent;
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background-image: linear-gradient(var(--md-state), var(--md-state));
  color: var(--md-sys-color-on-surface-variant);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  letter-spacing: 0.00625rem;
  transition: background-color var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .question > div > div > label:has(input[type="radio"]):hover {
    --md-state: color-mix(in srgb, var(--md-sys-color-on-surface-variant) var(--md-sys-state-hover), transparent);
    border-color: var(--md-sys-color-outline);
  }
}

.question > div > div > label:has(input[type="radio"]:checked) {
  background-color: var(--md-sys-color-secondary-container);
  border-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.question > div > div > label:has(input[type="radio"]:checked)::before {
  content: "\2713";
  font-weight: 700;
}

.question > div > div > label:has(input[type="radio"]:focus-visible) {
  outline: 3px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .question > div > div > label:has(input[type="radio"]) {
    min-height: 3rem;
  }
}

/* --- Dialog ------------------------------------------------------------------ */
.dialog {
  padding: 1.5rem;
  max-width: min(35rem, calc(100vw - 2rem));
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-3);
}

.dialog p {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: calc(1.5rem * var(--md-lang-height));
  color: var(--md-sys-color-on-surface-variant);
}

/* Dialog actions are text buttons. */
.dialog .button,
.dialog .button-secondary,
.dialog .button-danger {
  --md-state-color: var(--md-sys-color-primary);
  min-height: 2.5rem;
  padding: 0.625rem 0.75rem;
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 0;
  box-shadow: none;
}

.dialog .button-danger {
  --md-state-color: var(--md-sys-color-error);
  color: var(--md-sys-color-error);
}

@media (max-width: 599px) {
  .dialog .button {
    width: auto;
  }

  .dialog-actions {
    flex-direction: row;
  }
}

/* --- Help accordion ----------------------------------------------------------- */
.help-article summary {
  padding: 0.75rem 0;
  font: 500 1rem/1.5rem var(--md-ref-typeface-plain);
}

/* --- Navigation: drawer (expanded), rail (medium), modal drawer (compact) ---- */
:root {
  --sidebar-width: 18rem;
}

.sidebar {
  background: var(--md-sys-color-surface);
  border-right: 1px solid var(--md-sys-color-outline-variant);
}

.nav-group + .nav-group {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.nav-group-title {
  margin: 0;
  padding: 0.75rem 1rem 0.5rem;
  font: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  letter-spacing: 0.00625rem;
  text-transform: none;
  color: var(--md-sys-color-on-surface-variant);
}

.nav-item {
  --md-state: transparent;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  background-image: linear-gradient(var(--md-state), var(--md-state));
  color: var(--md-sys-color-on-surface-variant);
  font: 500 0.875rem/1.25rem var(--md-ref-typeface-plain);
  letter-spacing: 0.00625rem;
  transition: background-color var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-standard);
}

.nav-item .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
}

@media (hover: hover) {
  .nav-item:hover {
    --md-state: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover), transparent);
    background-color: transparent;
  }
}

.nav-item.active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 700;
}

.nav-item.active .icon {
  color: inherit;
}

/* Modal drawer on compact windows. */
@media (max-width: 599px) {
  .js .sidebar {
    background: var(--md-sys-color-surface-container-low);
    border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;
    box-shadow: var(--md-sys-elevation-1);
  }
}

/* Navigation rail on medium windows: icon over label, a pill behind the
   icon of the selected destination. */
@media (min-width: 600px) and (max-width: 839px) {
  :root {
    --sidebar-width: 5rem;
  }

  .sidebar {
    padding: 0.75rem 0.25rem 2rem;
  }

  .nav-group-title {
    display: none;
  }

  .nav-item,
  .nav-item.active {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.25rem;
    min-height: 0;
    padding: 0.25rem 0 0.75rem;
    background: transparent;
    background-image: none;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.75rem;
    line-height: 1rem;
    text-align: center;
  }

  .nav-item .icon {
    box-sizing: content-box;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.25rem 1rem;
    border-radius: var(--md-sys-shape-corner-full);
  }

  .nav-item.active {
    color: var(--md-sys-color-on-surface);
  }

  .nav-item.active .icon {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
  }

  .sidebar-search {
    display: none;
  }
}

/* --- Staff shell pieces ------------------------------------------------------ */
.staff-shell .site-header {
  background: var(--md-sys-color-surface-container);
}

.avatar {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.menu-toggle {
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
}

.hero h1 {
  font-size: 1.75rem;
  line-height: calc(2.25rem * var(--md-lang-height));
}

.filters {
  background: var(--md-sys-color-surface-container-low);
  border: 0;
}

.form-card .form-actions .button-secondary {
  border: 0;
}

/* --- Student pages ----------------------------------------------------------- */
.landing-hero h1 {
  font-size: 2rem;
  line-height: calc(2.5rem * var(--md-lang-height));
}

.anon-banner {
  border-radius: var(--md-sys-shape-corner-medium);
}

/* A table inside a card does not need a second outline. */
.panel .table-scroll,
.form-card .table-scroll {
  border: 0;
  border-radius: var(--md-sys-shape-corner-small);
}

/* The top app bar stays on one row; a long title gives way with an ellipsis. */
.site-header {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.site-header .header-left,
.site-header .brand {
  min-width: 0;
}

.site-header .brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header .header-actions {
  flex: none;
  gap: 0.25rem;
}

fieldset {
  border-color: var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

/* On compact windows the answer chips stack at full width. */
@media (max-width: 599px) {
  .question > div > div > label:has(input[type="radio"]) {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
}

/* --- Program analytics ------------------------------------------------------- */
.analytics-chart {
  position: relative;
  height: 16rem;
  margin-top: 0.5rem;
}

.analytics-chart-wide {
  height: 18rem;
}

.action-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.action-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.action-item:last-child {
  border-bottom: 0;
}

.action-body p {
  margin: 0.15rem 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  line-height: calc(1.25rem * var(--md-lang-height));
}

@media (max-width: 599px) {
  .action-item {
    grid-template-columns: minmax(0, 1fr);
  }
}

.coverage-list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.question-key {
  margin: 0.75rem 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
}

.question-key li {
  padding: 0.15rem 0;
}

/* Heatmap: a diverging scale around "near the program average", from
   error-container (well below) to primary-container (well above). Every cell
   also carries its number and an arrow, so colour is never the only signal. */
.heat-below-2 {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.heat-below-1 {
  background: color-mix(in srgb, var(--md-sys-color-error-container) 45%, var(--md-sys-color-surface-container-lowest));
  color: var(--md-sys-color-on-surface);
}

.heat-near,
.heat-none {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

.heat-above-1 {
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-surface-container-lowest));
  color: var(--md-sys-color-on-surface);
}

.heat-above-2 {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.heatmap td.heat-below-1::after,
.heatmap td.heat-below-2::after {
  content: " \25BC";
  font-size: 0.7em;
}

.heatmap td.heat-above-1::after,
.heatmap td.heat-above-2::after {
  content: " \25B2";
  font-size: 0.7em;
}

.heat-key {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: var(--md-sys-shape-corner-small);
  font-size: 0.75rem;
  line-height: 1.25rem;
}

.heatmap tbody th {
  font-weight: 500;
  text-align: left;
}

.table-scroll tbody tr:last-child th {
  border-bottom: none;
}

/* The chip for the year being shown. */
.chip[aria-current="page"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: var(--md-sys-color-secondary-container);
}

/* A specialization row nested under its discipline. */
.child-row td {
  background: var(--md-sys-color-surface-container-lowest);
}

.child-label {
  display: inline-block;
  padding-left: 1.25rem;
  color: var(--md-sys-color-on-surface-variant);
}