@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Roboto:ital,wght@0,100..900;1,100..900');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Serif+Text:ital@0;1');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Onest:wght@100..900&family=Spline+Sans:wght@300..700');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Lora:ital,wght@0,400..700;1,400..700&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700');

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');
@import url("/listen-static/variables.css");

:root {
  /* Shared page frame; individual components may use the narrower content cap. */
  --exit-ticket-content-max-width: 72.75rem;
  --exit-ticket-narrow-content-max-width: 44rem;
  --exit-ticket-content-padding-inline: 3rem;
  /* Usable sidebar width; the layout adds its measured scrollbar gutter. */
  --exit-ticket-sidebar-width: 24rem;
  --exit-ticket-page-padding-inline: 1rem;
  --exit-ticket-light-blue: #A8D0F7;
  --exit-ticket-rule-dash: 4px;
  --exit-ticket-rule-gap: 3px;
  /* Bright-blue variant: 4.517:1 against the darkest card bound, #e6f3f7. */
  --exit-ticket-category-blue: #136ec9;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  background-color: #f5f5f5;
  background-image:
    linear-gradient(135deg, rgba(245, 245, 245, 0) 35%, rgba(155, 210, 225, 0.85) 100%),
    url("bgtile.png");
  background-size: cover, 15rem;
  background-attachment: fixed;
}

.reflect-inner {
    padding: 0.75rem var(--exit-ticket-page-padding-inline) 1rem;
}

.course-detail-body {
  background-color: #fafafa;
  background-image: none;
}

html[data-course-panel-scrollbar-gutter] {
  /* Preserve an existing scrollbar's space only while page scrolling is locked. */
  scrollbar-gutter: stable;
}

html[data-course-panel-loading] .course-detail-layout {
  visibility: hidden;
}

html[data-course-panel-loading] :is(.course-detail-join-panel, .course-detail-panel-controls) {
  transition: none;
}

.course-detail-body .reflect-inner {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}

.course-detail-body main,
.course-detail-layout {
  min-height: inherit;
}

.course-detail-layout {
  container: exit-ticket-page / inline-size;
  --course-detail-content-width: var(--exit-ticket-content-max-width);
  --course-detail-content-padding-inline: var(--exit-ticket-content-padding-inline);
  --course-detail-content-outer-width: calc(
    var(--course-detail-content-width) + 2 * var(--course-detail-content-padding-inline)
  );
  --course-detail-panel-scrollbar-width: 6px;
  --course-detail-panel-width: calc(
    var(--exit-ticket-sidebar-width) + var(--course-detail-panel-scrollbar-width)
  );
  --course-detail-docked-main-width: min(
    calc(100% - var(--course-detail-panel-width)),
    var(--course-detail-content-outer-width)
  );
  position: relative;
}

.course-detail-layout::before {
  /* Match the docked content width, excluding padding, even in overlay mode. */
  content: "";
  position: absolute;
  width: calc(var(--course-detail-docked-main-width) - 2 * var(--course-detail-content-padding-inline));
  height: 0;
  visibility: hidden;
}

.feedback-report-layout,
.reflection-survey-ticket,
.billing-purchase-options {
  --feedback-report-card-padding-inline: 1.5rem;
  /* Solid match for the original 12% blue border over the tinted header. */
  --feedback-report-card-border: #cddfe9;
}

.feedback-report-layout {
  container-name: exit-ticket-page feedback-report-page;
  --feedback-report-column-width: 35rem;
  --feedback-report-column-gap: 2.75rem;
}

.feedback-report-layout,
.reflection-survey-body {
  --feedback-report-blue: #1577d8;
  --feedback-report-chart-track: #f1f4f5;
}

.course-detail-main-content {
  position: relative;
  box-sizing: border-box;
  padding: 3rem var(--course-detail-content-padding-inline);
}

.course-detail-join-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: min(100%, var(--course-detail-panel-width));
  overflow: auto;
  background-color: #fafafa;
  scrollbar-color: transparent #fafafa;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  box-shadow: 0 0 6px rgb(0 0 0 / 20%);
  transition: scrollbar-color 100ms ease-out;
}

.course-detail-join-panel::-webkit-scrollbar {
  width: 6px;
}

.course-detail-join-panel::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.course-detail-join-panel::-webkit-scrollbar-track {
  background-color: #fafafa;
}

.course-detail-join-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: transparent;
  transition: background-color 160ms ease-out;
}

.course-detail-join-panel:is(:hover, [data-scrollbar-active]) {
  scrollbar-color: rgb(14 81 146 / 35%) #fafafa;
}

.course-detail-join-panel::-webkit-scrollbar-thumb:hover {
  background-color: rgb(14 81 146 / 50%) #fafafa;
}

.course-detail-join-panel:is(:hover, [data-scrollbar-active])::-webkit-scrollbar-thumb {
  background-color: rgb(14 81 146 / 35%);
}

.course-detail-join-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fafafa;
  opacity: 1;
  pointer-events: none;
}

.course-detail-join-panel > section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  margin-inline: auto;
  padding: 3rem 1.5rem 1.5rem;
  /* The scrollbar gutter supplies the remaining space on the right. */
  padding-right: calc(1.5rem - var(--course-detail-panel-scrollbar-width));
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.course-participation {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  color: var(--mediumtext);
}

.course-participation-methods {
  display: contents;
}

.course-participation-header {
  margin-bottom: 2rem;
}

.course-participation-header h2 {
  color: var(--darkertext);
  font-size: 1.35rem;

}

.course-participation-header p,
.course-participation-option p {
  color: var(--bodytext);
  font-size: 0.875rem;
  line-height: 1.4;
}

.course-participation-header p {
  margin-block: 0.25rem 0;
}

.course-participation-fullscreen-title,
.course-participation-fullscreen-code-copy {
  display: none;
}

.course-participation-option p {
  margin: 0;
}

.course-participation-option {
  display: grid;
  gap: 0.35rem;
}

.course-participation-code-content {
  display: grid;
  gap: 0.35rem;
}

.course-participation-option h3 {
  color: var(--darktext);
  font-size: 0.95rem;
  font-weight: 600;
}

.course-participation-option-qr h3 {
  text-align: center;
}

.course-participation-qr {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid rgb(167 214 225 / 75%);
  border-radius: var(--card-radius);
  background-color: #fff;
  box-shadow: var(--card-shadow);
}

.course-participation-qr-container {
  position: relative;
  display: block;
  width: min(100%, 17rem);
  margin: 0.55rem auto 0;
  border-radius: var(--card-radius);
}

.course-participation-qr-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.course-participation-qr-action {
  display: grid;
  box-sizing: border-box;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-radius: var(--b-radius);
  border: 1px solid rgb(0 0 0 / 10%);
  background-color: #fff;
  color: var(--deep-blue);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  grid-template-columns: auto auto;
  gap: 0.4rem;
  justify-content: center;
  place-items: center;
  text-decoration: none;
  box-shadow: none;
}

.course-participation-qr-action:hover,
.course-participation-qr-action:focus-visible {
  background-color: #fff;
  color: var(--highlighta);
  outline: none;
  box-shadow: var(--card-shadow);
}

.course-participation-qr-action img,
.course-participation-qr-action-check {
  grid-area: 1 / 1;
  width: 1rem;
  height: 1rem;
}

.course-participation-qr-action img {
  filter: invert(13%) sepia(85%) saturate(2250%) hue-rotate(198deg) brightness(93%) contrast(91%);
}

.course-participation-check {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.course-participation-qr-action-check {
  opacity: 0;
}

.course-participation-qr-action-label {
  grid-area: 1 / 2;
  justify-self: start;
}

.course-participation-qr-copied-label {
  opacity: 0;
}

.course-participation-qr-container[data-copy-state="copied"] .course-participation-qr-action-copy img,
.course-participation-qr-container[data-copy-state="copied"] .course-participation-qr-copy-label {
  opacity: 0;
}

.course-participation-qr-container[data-copy-state="copied"] .course-participation-qr-action-check,
.course-participation-copy[data-copy-state="copied"] .course-participation-copy-check {
  opacity: 1;
  animation: course-participation-check-draw 360ms ease-out forwards;
}

.course-participation-qr-container[data-copy-state="copied"] .course-participation-qr-copied-label {
  opacity: 1;
}

@keyframes course-participation-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-participation-qr-container[data-copy-state="copied"] .course-participation-qr-action-check,
  .course-participation-copy[data-copy-state="copied"] .course-participation-copy-check {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.course-participation-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1.5rem;
  color: var(--lightertext);
  font-size: 0.7rem;
  font-weight: 500;
}

.course-participation-divider::before,
.course-participation-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background-color: #dcdcdc;
}

.exit-ticket-legal-links {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  margin-block-start: 3rem;
  padding: 0 var(--course-detail-content-padding-inline, 0) 0.75rem;
  /* 4.52:1 against the darkest background; AA requires at least 4.5:1. */
  color: #57595e;
  font-size: 0.775rem;
  line-height: 1.5;
  white-space: nowrap;
}

.exit-ticket-legal-links a {
  color: inherit;
  font-weight: 350;
  text-decoration: none;
  text-underline-offset: 0.15em;
}

.exit-ticket-legal-links a:hover {
  text-decoration: underline;
}

.course-participation-value-row,
.course-participation-code {
  box-sizing: border-box;
  min-height: 3rem;
  border: 1px solid rgb(167 214 225 / 75%);
  border-radius: var(--b-radius);
  background-color: rgb(255 255 255 / 65%);
}

.course-participation-value-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.35rem 0.25rem 0.75rem;
}

.course-participation-value-row > :is(a, .course-participation-link-text) {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--highlighta);
  font-size: 0.8rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-participation-copy svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.course-participation-value-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  filter: invert(50%) sepia(51%) saturate(619%) hue-rotate(145deg) brightness(99%) contrast(94%);
}

.course-participation-copy {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--b-radius);
  background: transparent;
  color: var(--highlighta);
  cursor: pointer;
  place-items: center;
}

.course-participation-copy:hover {
  background-color: var(--textbox-hover);
}

.course-participation-copy:focus-visible {
  outline: 2px solid var(--deep-blue);
  outline-offset: 1px;
}

.course-participation-copy-icon,
.course-participation-copy svg {
  grid-area: 1 / 1;
  width: 1.1rem;
  height: 1.1rem;
}

.course-participation-copy-icon {
  filter: invert(13%) sepia(85%) saturate(2250%) hue-rotate(198deg) brightness(93%) contrast(91%);
}

.course-participation-copy-check,
.course-participation-copy[data-copy-state="copied"] .course-participation-copy-icon {
  display: none;
}

.course-participation-copy[data-copy-state="copied"] .course-participation-copy-check {
  display: block;
}

.join-code-text,
.course-participation-code {
  font-family: "DM Mono", monospace;
  font-weight: 500;
}

.join-code-second-half {
  margin-inline-start: 0.6em;
}

.course-participation-code {
  display: grid;
  margin-top: 0.15rem;
  padding: 0.35rem 0.75rem;
  color: var(--highlighta);
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  letter-spacing: 0.075em;
  line-height: 1;
  place-items: center;
}

.course-participation-code-row {
  position: relative;
}

.course-participation-code-row .course-participation-code {
  margin-top: 0;
  padding-inline: 3rem;
}

.course-participation-code-row .course-participation-copy {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.35rem;
  transform: translateY(-50%);
}

.course-participation-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.course-detail-layout:not([data-course-panel-fullscreen]) .course-participation-fullscreen-actions {
  margin-top: auto;
  padding-top: 1.5rem;
}

.course-participation-action {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgb(14 81 146 / 25%);
  border-radius: var(--b-radius);
  background-color: rgb(255 255 255 / 55%);
  color: var(--highlighta);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.course-participation-action-primary {
  border-color: var(--deep-blue);
  background-color: var(--deep-blue);
  color: #fff;
  transition: box-shadow 160ms ease-out;
}

.course-participation-fullscreen-toggle {
  cursor: pointer;
  font-family: inherit;
}

.course-participation-action:hover {
  box-shadow: var(--card-shadow);
}

.course-participation-action-primary:hover {
  box-shadow: 0 1px 5px rgb(0 0 0 / 35%);
}

.course-participation-action:focus-visible {
  outline: 2px solid rgb(14 81 146 / 40%);
  outline-offset: 2px;
}

.course-participation-action-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  filter: invert(13%) sepia(85%) saturate(2250%) hue-rotate(198deg) brightness(93%) contrast(91%);
}

.course-participation-action-primary .course-participation-action-icon {
  filter: invert(100%);
}

.course-detail-main-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  box-sizing: border-box;
  min-width: 0;
  min-height: inherit;
  overflow-x: clip;
  background-color: #f5f5f5;
  background-image:
    linear-gradient(135deg, rgba(245, 245, 245, 0) 35%, rgba(155, 210, 225, 0.85) 100%),
    url("bgtile.png");
  background-size: cover, 15rem;
}

.feedback-report-layout .course-detail-main-panel {
  background-attachment: fixed;
}

.course-detail-main-content {
  /* Fill short pages so the footer reaches the viewport bottom in normal flow. */
  flex: 1 0 auto;
}

.course-detail-main-content,
.course-detail-main-panel > .exit-ticket-legal-links {
  /* Keep a fixed gap beside the nav; center the frame only after it collapses. */
  width: var(--course-detail-docked-main-width);
  margin-inline-start: var(--course-detail-panel-width);
  margin-inline-end: auto;
}

.feedback-report-main-content {
  container: feedback-report-content / inline-size;
}

@media screen and (width > 50rem) {
  .feedback-report-main-content {
    padding-block-end: 12rem;
  }
}

.feedback-report-columns {
  --report-vertical-rule: repeating-linear-gradient(
    to bottom,
    rgb(14 81 146 / 35%) 0 4px,
    transparent 4px 7px
  );
  /* Keep connectors behind every card, including the preceding row. */
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--feedback-report-column-width)));
  /* Fill each column from the top, sharing one height for each pair of cards. */
  grid-auto-flow: row dense;
  gap: 1.5rem var(--feedback-report-column-gap);
}

.feedback-report-column {
  display: contents;
}

.feedback-report-cell {
  position: relative;
  display: grid;
  grid-column: 1;
  min-width: 0;
}

.feedback-report-column:nth-child(2) > .feedback-report-cell {
  grid-column: 2;
}

/* Stack at the same content width used to hide the report nav, excluding padding. */
@container feedback-report-content (max-width: 60rem) {
  .feedback-report-columns {
    grid-template-columns: minmax(0, var(--feedback-report-column-width));
    gap: 1.5rem;
  }

  .feedback-report-column:nth-child(2) > .feedback-report-cell {
    grid-column: 1;
  }

  .feedback-report-column + .feedback-report-column > .feedback-report-cell:first-child {
    margin-block-start: 1.25rem;
  }
}

.feedback-report-box:has(> .feedback-report-body),
.feedback-report-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.feedback-report-body > [data-feedback-choice-chart],
.feedback-report-body > .feedback-report-responses {
  /* Keep content at the top and put spare height before the response count. */
  flex: 1 0 auto;
}

.feedback-report-cell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: var(--card-radius);
  inset-inline: 3rem;
  /* Paint both tracks together so they share positioning and stacking. */
  background:
    var(--report-vertical-rule) top left / 1px 100% no-repeat,
    var(--report-vertical-rule) top right / 1px 100% no-repeat;
  pointer-events: none;
}

.feedback-report-cell + .feedback-report-cell::before {
  /* Bridge each card gap without drawing rules below the last occupied row. */
  inset-block-start: calc(-1.5rem - var(--card-radius));
}

.feedback-report-cell:has(> .feedback-report-topic) + .feedback-report-cell:has(> .feedback-report-question)::before {
  inset-block: -1.5rem auto;
  inset-inline: calc(50% - 4.5px) auto;
  width: 9px;
  height: 1.5rem;
  background: url("report-connector-arrow.svg") center / 100% 100% no-repeat;
}

.feedback-report-cell:has(> .feedback-report-summary) {
  margin-block-start: 0.75rem;
}

.feedback-report-cell:has(> .feedback-report-summary)::before {
  /* Stop at the card instead of suppressing the track itself. */
  inset-block-start: var(--card-radius);
}

.feedback-report-box {
  box-sizing: border-box;
  min-width: 0;
  padding: 1.5rem var(--feedback-report-card-padding-inline);
  overflow: hidden;
  border: 1px solid var(--feedback-report-card-border);
  border-radius: var(--card-radius);
  background-color: #fafafa;
  box-shadow: 0 2px 8px rgb(11 62 114 / 6%);
}

.feedback-report-box:has(> .feedback-report-body) {
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  /* Filter the joined, transparent cutouts so the shadow follows the ticket. */
  filter: drop-shadow(0 2px 4px rgb(11 62 114 / 6%));
}

.feedback-report-box > :is(h2, h3),
.feedback-report-question-header,
.feedback-report-body {
  position: relative;
  border: 1px solid var(--feedback-report-card-border);
  background-color: #fafafa;
}

.feedback-report-box > h2 {
  padding: 1.05rem var(--feedback-report-card-padding-inline);
}

.feedback-report-box > h3,
.feedback-report-question-header,
.feedback-report-body {
  padding: 1.25rem var(--feedback-report-card-padding-inline);
}

.feedback-report-box > :is(h2, h3),
.feedback-report-question-header {
  margin: 0;
  border-bottom: 0;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background-image: linear-gradient(var(--textbox-blue), var(--textbox-blue));
  font-size: 1.1rem;
  text-wrap: pretty;
}

.feedback-report-body {
  border-top: 0;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}

.feedback-report-question {
  --feedback-report-question-header-background: #DCEFFD;
  --ticket-perforation-color: var(--feedback-report-card-border);
  --report-notch-radius: 5px;
  --report-notch-circle-center: -1px;
  /* This band also supplies padding above/below the seam; it is not the radius. */
  --report-notch-half-height: 8px;
  --report-notch-edge-width: 7px;
}

:is(.feedback-report-layout, .billing-purchase-options) .feedback-report-question {
  --feedback-report-question-header-background: #EEF2F6;
}

/* Retain the border space so removing the outline does not move ticket content. */
.feedback-report-question > :is(.feedback-report-question-header, .feedback-report-body) {
  border-color: transparent;
}

:is(.feedback-report-layout, .billing-purchase-options) .feedback-report-question > :is(.feedback-report-question-header, .feedback-report-body) {
  border-color: var(--feedback-report-card-border);
}

/* SVG edges draw the borderless surface. The seam takes equal
   space from the heading and body padding to keep content in place. */
.feedback-report-question-header {
  padding-bottom: calc(1.25rem - var(--report-notch-half-height));
  background: var(--feedback-report-question-header-background);
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.1rem);
}

.feedback-report-question-header > :is(h3, [role="heading"]) {
  margin: 0;
  font-size: inherit;
}

.feedback-report-question > .feedback-report-body {
  padding-top: calc(1.25rem - var(--report-notch-half-height));
}

.feedback-report-notch {
  position: relative;
  flex: 0 0 auto;
  height: calc(2 * var(--report-notch-half-height));
  margin-inline: var(--report-notch-edge-width);
  background-color: #fafafa;
  background-image: linear-gradient(to bottom, var(--feedback-report-question-header-background) 50%, transparent 50%);
  pointer-events: none;
}

.feedback-report-notch::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline: 0;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--ticket-perforation-color) 0 var(--exit-ticket-rule-dash),
    transparent var(--exit-ticket-rule-dash) calc(var(--exit-ticket-rule-dash) + var(--exit-ticket-rule-gap))
  );
  transform: translateY(-50%);
  pointer-events: none;
}

.feedback-report-notch-edge {
  position: absolute;
  inset-block: 0;
  width: var(--report-notch-edge-width);
  height: 100%;
  overflow: hidden;
}

.feedback-report-notch-edge-left {
  right: 100%;
}

.feedback-report-notch-edge-right {
  left: 100%;
  transform: scaleX(-1);
}

.feedback-report-notch-fill {
  fill: #fafafa;
}

.feedback-report-notch-tint {
  stop-color: var(--feedback-report-question-header-background);
}

.feedback-report-notch-outline {
  stroke: none;
}

:is(.feedback-report-layout, .billing-purchase-options) .feedback-report-notch-edge > path {
  /* Center the 1px outline on the same edge as the header and body borders. */
  transform: translateX(0.5px);
}

:is(.feedback-report-layout, .billing-purchase-options) .feedback-report-notch-outline {
  stroke: var(--feedback-report-card-border);
  stroke-width: 1;
}

.feedback-report-topic {
  display: grid;
  padding: 0;
}

.feedback-report-topic > h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--card-radius);
  background: var(--deep-blue);
  color: #fafafa;
  font-size: clamp(1.2rem, 1.15rem + 0.3333vw, 1.25rem);
}

.feedback-report-topic-phrase {
  display: flex;
  flex: 1 0 auto;
}

.feedback-report-topic-category {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--exit-ticket-light-blue);
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  justify-content: space-between;
}

.feedback-report-topic-icon {
  flex: 0 0 1.2rem;
  height: 1.2rem;
  background-color: currentColor;
  -webkit-mask: var(--category-icon) center / contain no-repeat;
  mask: var(--category-icon) center / contain no-repeat;
}

.feedback-report-summary > .feedback-report-body {
  background-color: #fff;
}

.feedback-report-summary li > strong {
  color: var(--deep-blue);
  font-weight: 600;
}

.feedback-report-summary > .feedback-report-summary-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  background: var(--feedback-report-blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}

.feedback-report-summary-icon {
  flex: 0 0 1.75rem;
  height: 1.75rem;
  background-color: currentColor;
  -webkit-mask: url("ai-insights.svg") center / contain no-repeat;
  mask: url("ai-insights.svg") center / contain no-repeat;
  margin-left: -0.25rem;
}

.feedback-report-responses {
  margin-block: 0;
  padding-inline-start: 1.5rem;
  list-style: disc;
}

.feedback-report-responses li {
  margin-block: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.feedback-report-responses li::marker {
  color: var(--deep-blue);
}

.feedback-report-responses li + li {
  margin-block-start: 0.5rem;
}

.feedback-report-question-count {
  /* Cancel the body's padding so the footer's vertical padding stays equal. */
  margin: 1.5rem calc(-1 * var(--feedback-report-card-padding-inline)) -1.25rem;
  padding: 0.75rem var(--feedback-report-card-padding-inline);
  color: var(--lighttext);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  border-top: 1px solid transparent;
  border-image: repeating-linear-gradient(
    to right,
    rgb(139 141 146 / 15%) 0,
    rgb(139 141 146 / 15%) var(--exit-ticket-rule-dash),
    transparent var(--exit-ticket-rule-dash),
    transparent calc(var(--exit-ticket-rule-dash) + var(--exit-ticket-rule-gap))
  ) 1;
}

.feedback-report-question-count:has(> [data-report-key="followup-label"]) {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  align-items: start;
  column-gap: 0.375rem;
}

.feedback-report-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.feedback-report-chart-track {
  fill: var(--feedback-report-chart-track);
}

.feedback-report-chart-bar {
  filter: drop-shadow(0 1.5px 1.5px rgb(11 62 114 / 20%));
}

.feedback-report-chart-gradient stop {
  stop-color: var(--feedback-report-blue);
}

.feedback-report-chart-gradient stop:last-child {
  stop-color: color-mix(in srgb, var(--feedback-report-blue) 60%, var(--deep-blue));
}

.feedback-report-chart-value {
  fill: var(--deep-blue);
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.feedback-report-chart-percentage {
  font-weight: 550;
}

.feedback-report-chart-value-inside {
  fill: #fff;
  text-shadow: 0 1px 1px rgb(11 62 114 / 72%);
}

.feedback-report-chart-options {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feedback-report-chart-label {
  margin-bottom: 0.25rem;
  color: var(--darktext);
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.exit-ticket-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: -0.4rem;
  margin-top: -0.5rem;
}

.exit-ticket-breadcrumb-logo {
  display: block;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}

.course-detail-all-courses {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 2.5rem;
  font-size: 0.925rem;
}

.course-detail-all-courses a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--highlightb);
  text-decoration: none;
  transition: color 120ms ease-out;
}

.course-detail-all-courses a:hover,
.course-detail-all-courses a:focus-visible {
  color: var(--deep-blue);
}

.feedback-report-breadcrumb {
  gap: 0.4rem;
  color: var(--highlightb);
}

.feedback-report-breadcrumb-chevron {
  flex: 0 0 1.15rem;
  height: 1.15rem;
  color: var(--deep-blue);
  background-color: currentColor;
  -webkit-mask: url("chevron-right.svg") center / contain no-repeat;
  mask: url("chevron-right.svg") center / contain no-repeat;
}

.course-detail-main-content > h1,
.course-list-heading > h1,
.feedback-report-title {
  position: relative;
  display: flex;
  width: auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 0.75rem;
  margin-top: 2.5rem;
  color: var(--deep-blue);
  font-family: "DM Serif Text";
  font-weight: 400;
  letter-spacing: -0.012em;
}

.feedback-report-weekday {
  margin: 2.5rem 0 0;
  color: var(--feedback-report-blue);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feedback-report-weekday + h1 {
  margin-top: 0;
}

.feedback-report-year {
  color: var(--lightertext);
  font-weight: 550;
}

.feedback-report-status {
  margin: 0.5rem 0 2.5rem;
  font-size: 0.875rem;
  color: var(--lighttext);
}

.feedback-report-status b {
  padding-inline: 0.125rem;
}

.feedback-report-status > b {
  padding-inline: 0.375rem;
}

.feedback-report-title:has(+ .feedback-report-status) {
  margin-bottom: 0.75rem;
}

.feedback-report-response-label{
  color: var(--deep-blue);
  font-weight: 500;
}

/* Give phone-sized reports more reading room while preserving vertical rhythm. */
@container feedback-report-page (max-width: 28rem) {
  .feedback-report-main-content {
    --feedback-report-card-padding-inline: 1rem;
    overflow-wrap: anywhere;
  }
}

.course-detail-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.course-detail-title-rename-open {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  overflow-wrap: anywhere;
  text-align: start;
}

.course-detail-title-rename-icon {
  display: grid;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0.5rem;
  border-radius: var(--b-radius);
  color: #70C1D5;
  place-items: center;
  transition:
    color 140ms ease-out,
    box-shadow 140ms ease-out;
}

.course-detail-title-rename-open:is(:hover, :focus-visible) .course-detail-title-rename-icon {
  color: var(--deep-blue);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.course-detail-title-rename-icon .course-detail-rename-icon {
  width: 100%;
  height: 100%;
}

.course-detail-title-rename-open:focus-visible {
  border-radius: var(--b-radius);
  outline: 2px solid rgb(14 81 146 / 40%);
  outline-offset: 3px;
}

.course-detail-rename-open {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--b-radius);
  background-color: transparent;
  color: #70C1D5;
  cursor: pointer;
  place-items: center;
  transition:
    color 140ms ease-out,
    box-shadow 140ms ease-out;
}

.course-detail-rename-open:hover {
  color: var(--deep-blue);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.course-detail-rename-open:focus-visible {
  outline: 2px solid rgb(14 81 146 / 40%);
  outline-offset: 2px;
  color: var(--deep-blue);
}

.course-detail-rename-icon {
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("pencil.svg") center / contain no-repeat;
  mask: url("pencil.svg") center / contain no-repeat;
}

.course-detail-main-content > h1::after,
.course-list-heading::after,
.feedback-report-title::after,
.feedback-report-course-name::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  border-image: repeating-linear-gradient(
    to right,
    rgb(14 81 146 / 15%) 0,
    rgb(14 81 146 / 15%) var(--exit-ticket-rule-dash),
    transparent var(--exit-ticket-rule-dash),
    transparent calc(var(--exit-ticket-rule-dash) + var(--exit-ticket-rule-gap))
  ) 1;
  pointer-events: none;
}

:is(.course-active-session-card, .course-feedback-card, .course-how-it-works) {
  max-inline-size: var(--exit-ticket-narrow-content-max-width);
  margin-top: 2rem;
  color: var(--bodytext);
}

.course-active-session-card {
  padding-bottom: 1rem;
}

:is(.course-active-session-card, .course-feedback-card) > h2 {
  margin-block: 0 0.5rem;
  color: var(--darktext);
  font-size: 1.35rem;
  font-weight: 450;
  letter-spacing: -0.025em;
}

.course-how-it-works p {
  margin: 0;
  color: var(--mediumtext);
  font-size: 0.925rem;
  line-height: 1.45;
}

.course-how-it-works-list {
    position: relative;
    border: 0;
    border-radius: var(--card-radius);
    text-wrap: pretty;
}

.course-how-it-works-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline: calc(1.75rem + 2px) 0;
  box-sizing: border-box;
  border: 1px solid rgb(14 81 146 / 12%);
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(1.5px);
}

.course-how-it-works-item {
  position: relative;
  display: grid;
  grid-template-columns: calc(3.5rem + 4px) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding-block: 1.5rem;
  padding-inline: 0 2rem;
}

.course-how-it-works-item:not(:last-child) {
  background-image: repeating-linear-gradient(
    to right,
    rgb(14 81 146 / 15%) 0,
    rgb(14 81 146 / 15%) 4px,
    transparent 4px,
    transparent 7px
  );
  background-position: calc(1.75rem + 2px) 100%;
  background-repeat: no-repeat;
  background-size: calc(100% - 1.75rem - 2px) 1px;
}

.course-how-it-works-icon-frame {
  z-index: 1;
  border: 2px solid var(--deep-blue);
  border-radius: 50%;
  align-self: center;
  line-height: 0;
  background-color: #ECF3F5;
  box-shadow: 2px 2px 8px rgb(11 62 114 / 12%);
}

.course-how-it-works-icon {
  width: 2rem;
  height: 2rem;
  padding: 0.75rem;
  transform: translateY(-1px);
}

.course-how-it-works-item h2 {
  margin: 0 0 0.2rem;
  color: var(--darktext);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.course-active-session-info-card,
.course-feedback-list > li,
.reflection-survey-body [data-reflection-tap-option] label {
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgb(14 81 146 / 12%);
  border-radius: var(--card-radius);
  background-color: rgb(255 255 255 / 72%);
  box-shadow: 0 2px 8px rgb(11 62 114 / 6%);
}

.course-active-session-info-card {
  backdrop-filter: blur(2px) brightness(1.01);
}

.course-active-session-reflect {
  display: flex;
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 1rem;
  padding-inline: calc(1.25rem + 0.625rem + 0.95rem) 1rem;
  text-align: start;
}

.course-active-session-reflect > form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

:is(.course-active-session-summary-row, .course-feedback-summary-row, .course-list-link) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem;
  padding-inline-start: 1.25rem;
  min-height: 2rem;
}

.course-feedback-status-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.course-feedback-status-dot-active {
  background-color: var(--green);
}

.course-feedback-status-dot-inactive {
  width: calc(0.625rem - 4px);
  height: calc(0.625rem - 4px);
  border: 2px solid var(--green);
}

.course-feedback-status-dot-previous {
  width: calc(0.625rem - 4px);
  height: calc(0.625rem - 4px);
  border: 2px solid var(--highlighta);
}

.course-active-session-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0 0;
}

.course-active-session-info {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
}

.course-active-session-info p {
  margin: 0;
}

.course-feedback-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exit-ticket-logout-form {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: var(--course-detail-content-padding-inline);
  margin: 0;
}

.exit-ticket-logout {
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 0;
  background: none;
  color: var(--lighttext);
  font: inherit;
  font-size: 0.825rem;
  cursor: pointer;
  text-underline-offset: 0.15em;
}

.exit-ticket-logout:hover {
  color: var(--deep-blue);
  text-decoration: underline;
}

.exit-ticket-demo-exit {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  text-decoration: none;
}

.course-detail-main-content .exit-ticket-demo-exit {
  padding-inline: 0.75rem;
  border: 1px solid rgb(14 81 146 / 25%);
  border-radius: var(--b-radius);
  background-color: #fff;
  color: var(--deep-blue);
  font-weight: 600;
}

.course-list-heading {
  position: relative;
  margin-block: 2.5rem 0.75rem;
  padding-bottom: 0.75rem;
}

.course-list-heading > h1 {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.course-list-utilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-block: 1.5rem;
  font-size: 0.875rem;
}

.course-list-utilities a {
  color: var(--deep-blue);
  text-underline-offset: 0.15em;
}

.course-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.course-list-actions > .course-list-account-link {
  margin-inline-start: auto;
}

.course-access-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block: 1.5rem;
  padding: 1rem;
  border: 1px solid rgb(14 81 146 / 18%);
  border-radius: var(--b-radius);
  background-color: #eef2f6;
  color: var(--bodytext);
}

.course-access-notice p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.course-access-notice-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: var(--deep-blue);
  -webkit-mask: url("danger-triangle.svg") center / contain no-repeat;
  mask: url("danger-triangle.svg") center / contain no-repeat;
}

.course-access-notice strong {
  color: var(--darktext);
}

.course-access-notice .course-participation-action {
  border-color: rgb(14 81 146 / 25%);
  background-color: #fff;
  color: var(--deep-blue);
}

.course-access-notice .course-participation-action:focus-visible {
  outline-color: var(--deep-blue);
}

.exit-ticket-page-content {
  max-inline-size: var(--exit-ticket-narrow-content-max-width);
  color: var(--bodytext);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.exit-ticket-page-content a:not(.course-participation-action) {
  color: var(--deep-blue);
  text-underline-offset: 0.15em;
}

.exit-ticket-page-content form {
  margin-block: 1.25rem;
}

.exit-ticket-page-content .course-detail-rename-field {
  margin-block-end: 0.75rem;
}

.exit-ticket-page-content .course-participation-action {
  max-inline-size: 100%;
  text-align: center;
}

.exit-ticket-table-scroll {
  overflow-x: auto;
}

.exit-ticket-table-scroll table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.exit-ticket-table-scroll :is(th, td) {
  padding: 0.75rem;
  border-bottom: 1px solid rgb(14 81 146 / 15%);
  text-align: start;
  vertical-align: top;
}

.exit-ticket-table-scroll form {
  margin: 0;
}

.institution-account-layout :is(.exit-ticket-page-content, .institution-faculty) {
  max-inline-size: none;
}

:is(.personal-billing-layout, .safety-page-layout) .exit-ticket-page-content {
  max-inline-size: 52rem;
}

.safety-notifications {
  max-inline-size: none;
}

.safety-response-meta,
.safety-table-note {
  color: var(--bodytext);
  font-size: 0.875rem;
  font-weight: 400;
}

.safety-table-note {
  display: block;
  margin-block: 0.35rem;
}

.safety-response {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--deep-blue);
  border-radius: 0 var(--b-radius) var(--b-radius) 0;
  background-color: rgb(255 255 255 / 55%);
  white-space: pre-wrap;
}

.safety-concern {
  margin-block: 1.25rem;
}

.safety-concern h3 {
  margin-block: 0 0.5rem;
  color: var(--darktext);
  font-size: 1.05rem;
  font-weight: 600;
}

.safety-concern p {
  margin-block: 0.5rem;
}

.safety-context dt,
.safety-detail-label {
  font-weight: 600;
}

.safety-context dd {
  margin: 0.25rem 0 1rem;
}

.safety-details {
  margin-block: 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
}

.safety-details summary {
  color: var(--deep-blue);
  cursor: pointer;
}

.safety-delivery-history,
.safety-recipient-list {
  padding-inline-start: 1.25rem;
}

:is(.safety-delivery-history, .safety-recipient-list) li + li {
  margin-block-start: 0.75rem;
}

.account-timezone-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.account-timezone-field {
  flex: 1 1 18rem;
  min-inline-size: 0;
  max-inline-size: 24rem;
}

.account-timezone-controls > .course-participation-action {
  flex: 0 0 auto;
}

.institution-faculty :is(th, td) {
  vertical-align: middle;
}

.institution-faculty-name {
  font-weight: 500;
}

.institution-faculty td .course-participation-action {
  width: 100%;
  background-color: transparent;
}

.institution-license-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
  margin-block: 2rem 1rem;
}

.institution-license-summary > div {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgb(14 81 146 / 15%);
  border-radius: var(--b-radius);
  background-color: rgb(255 255 255 / 55%);
}

.institution-license-summary dt {
  color: var(--darktext);
  font-size: 0.875rem;
  font-weight: 600;
}

.institution-license-summary dd {
  margin: 0.5rem 0 0;
  color: var(--deep-blue);
  font-size: 2rem;
  font-weight: 450;
  line-height: 1.3;
}

.institution-summary-detail dd {
  font-size: 1.25rem;
}

.institution-summary-note,
.billing-price-note {
  display: block;
  margin-top: 0.5rem;
  color: var(--bodytext);
  font-size: 0.8125rem;
  font-weight: 400;
}

.billing-purchase-section {
  max-inline-size: 52rem;
  container: billing-purchases / inline-size;
}

.billing-purchase-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.billing-purchase-divider {
  margin: 0;
}

@container billing-purchases (min-width: 40rem) {
  .billing-purchase-options:has(> .billing-purchase-divider) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .billing-purchase-divider {
    flex-direction: column;
    align-self: stretch;
  }

  .billing-purchase-divider::before,
  .billing-purchase-divider::after {
    width: 1px;
    height: auto;
  }
}

.billing-purchase-options form {
  min-width: 0;
  margin: 0;
}

.billing-purchase-option > .feedback-report-body {
  gap: 1rem;
}

.billing-purchase-option :is(p, .course-detail-rename-field) {
  margin: 0;
}

.billing-price {
  display: inline-block;
  color: var(--deep-blue);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
}

.billing-renewal-price {
  color: var(--deep-blue);
}

.billing-intro-note {
  display: inline-block;
  margin-inline-start: 0.5rem;
}

.billing-purchase-option input[type="number"] {
  width: 6rem;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

.billing-purchase-option .course-participation-action {
  align-self: flex-start;
  margin-top: auto;
}

.billing-management {
  grid-column: 1 / -1;
}

.course-list-link {
  border-radius: inherit;
  color: var(--darktext);
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.course-list-link:hover {
  background-color: rgb(255 255 255 / 55%);
}

.course-list-link:focus-visible {
  outline: 2px solid var(--deep-blue);
  outline-offset: -3px;
}

.course-feedback-summary {
  display: grid;
  min-width: 0;
  gap: 0.075rem;
}

.course-feedback-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
  color: var(--darktext);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.course-feedback-started-time {
  color: var(--lightertext);
  font-size: 0.925rem;
  font-weight: 400;
}

.course-feedback-meta {
  min-width: 0;
  color: var(--lighttext);
  font-size: 0.85rem;
  line-height: 1.45;
}

.course-feedback-meta > span:last-child {
  overflow-wrap: anywhere;
}

.course-feedback-meta-separator {
  color: rgb(14 81 146 / 35%);
}

.course-feedback-date-separator {
  color: var(--deep-blue);
}

.course-feedback-results-link {
  display: inline-flex;
  min-height: 2.5rem;
  box-sizing: border-box;
  margin-inline-start: 0.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--b-radius);
  border: 1px solid rgb(14 81 146 / 0%);
  color: var(--deep-blue);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 140ms ease-out,
    background-color 140ms ease-out,
    box-shadow 140ms ease-out;
}

.course-feedback-results-link-previous {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: 0.25rem;
}

.course-feedback-results-link-previous .course-feedback-results-chevron {
  grid-column: 2;
  grid-row: 1 / 3;
}

.course-feedback-response-count {
  grid-column: 1;
  grid-row: 2;
  color: var(--lighttext);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: inherit;
  text-align: center;
}

.course-feedback-results-link:hover {
  background-color: rgb(112 193 213 / 10%);
  box-shadow: 0 2px 5px rgb(11 62 114 / 10%);
  border: 1px solid rgb(14 81 146 / 18%);
}

.course-feedback-results-link:focus-visible {
  outline: 2px solid rgb(14 81 146 / 50%);
  outline-offset: 2px;
}

.course-feedback-results-chevron {
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

@media (max-width: 36rem) {
  .course-active-session-reflect {
    padding-inline-start: calc(1.25rem + 0.625rem + 0.75rem);
  }

  .course-active-session-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .course-active-session-summary-row,
  .course-feedback-summary-row,
  .course-list-link {
    gap: 0.75rem;
  }

  .course-feedback-results-link {
    justify-self: end;
  }

  .course-active-session-summary-row .course-feedback-results-link,
  .course-feedback-summary-row .course-feedback-results-link {
    margin-inline-start: 0;
  }
}

@container exit-ticket-page (max-width: 28rem) {
  .course-active-session-summary-row[data-reflection-sequence],
  .course-feedback-summary-row,
  .course-list-link {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .course-feedback-status-dot-active,
  .course-feedback-status-dot-previous,
  .course-feedback-date-separator {
    display: none;
  }

  .course-feedback-label:has(.course-feedback-started-time) {
    flex-direction: column;
  }

  .course-feedback-summary-row {
    grid-template-areas:
      "summary results"
      "meta meta";
  }

  .course-feedback-summary-row > .course-feedback-summary {
    display: contents;
  }

  .course-feedback-summary-row .course-feedback-label {
    grid-area: summary;
  }

  .course-feedback-summary-row .course-feedback-meta {
    grid-area: meta;
  }

  .course-feedback-summary-row .course-feedback-results-link {
    grid-area: results;
  }
}

/* Stack the summary and results when the card is too narrow for both. */
@media (max-width: 20rem) {
  .course-active-session-summary-row:not([data-reflection-sequence]) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .course-active-session-summary-row[data-reflection-sequence],
  .course-feedback-summary-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-active-session-summary-row .course-feedback-results-link,
  .course-feedback-summary-row .course-feedback-results-link {
    grid-column: 1;
  }

  .course-feedback-summary-row {
    grid-template-areas:
      "summary"
      "results"
      "meta";
  }
}

.course-detail-rename-dialog {
  box-sizing: border-box;
  width: min(calc(100% - 2rem), 30rem);
  padding: 0;
  border: 0;
  border-radius: var(--card-radius);
  background-color: rgb(250 250 250 / 98%);
  color: var(--bodytext);
  box-shadow: 0 1rem 3rem rgb(11 62 114 / 22%);
}

.course-detail-rename-dialog::backdrop {
  background-color: rgb(11 62 114 / 24%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.course-detail-rename-dialog > form:not([hidden]) {
  display: grid;
  gap: 1.25rem;
  padding: 2rem;
}

.course-detail-rename-dialog h2 {
  color: var(--deep-blue);
  font-family: "DM Sans", sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.course-detail-rename-field {
  display: grid;
  gap: 0.4rem;
}

.course-detail-rename-field label {
  color: var(--darktext);
  font-weight: 600;
  font-size: 0.95rem;
}

.course-detail-rename-input,
:is(dialog[data-course-rename-dialog], .account-timezone-field) .select2-selection--single {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #70C1D5;
  border-radius: var(--card-radius);
  outline: none;
  background-color: rgb(243 250 252 / 25%);
  color: var(--mediumtext);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 325;
  line-height: 1.5;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(1.25px) brightness(1.02);
  -webkit-backdrop-filter: blur(1.25px) brightness(1.02);
}

.course-detail-rename-input:focus,
:is(dialog[data-course-rename-dialog], .account-timezone-field) .select2-selection--single:focus {
  background-color: rgb(243 250 252 / 50%);
  box-shadow: 0 1px 5px rgb(11 62 114 / 15%);
  backdrop-filter: blur(1.5px) brightness(1.03);
  -webkit-backdrop-filter: blur(1.5px) brightness(1.03);
}

select.course-detail-rename-input {
  -webkit-appearance: auto;
  appearance: auto;
}

dialog[data-course-rename-dialog] {
  overflow: visible;
}

dialog[data-course-rename-dialog] > form {
  box-sizing: border-box;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

:is(dialog[data-course-rename-dialog], .account-timezone-field) .select2-selection--single {
  height: auto;
}

:is(dialog[data-course-rename-dialog], .account-timezone-field) .select2-selection--single .select2-selection__rendered {
  padding: 0 1.25rem 0 0;
  color: inherit;
  line-height: inherit;
}

:is(dialog[data-course-rename-dialog], .account-timezone-field) .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

:is(dialog[data-course-rename-dialog], .account-timezone-field) .select2-results > .select2-results__options {
  max-height: min(10rem, 30vh);
  overscroll-behavior: contain;
}

:is(dialog[data-course-rename-dialog], .account-timezone-field) .select2-search__field {
  font: inherit;
}

.account-timezone-field select.course-detail-rename-input,
.account-timezone-field .select2-container .select2-selection--single {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

.account-timezone-field .select2-dropdown {
  font-size: 1rem;
}

.course-detail-rename-input:not(:focus):hover {
  box-shadow: 0 1px 5px rgb(11 62 114 / 15%);
}

#course-detail-rename-errors p,
#course-detail-timezone-errors p {
  margin: 0;
  font-size: 0.9rem;
}

.course-detail-rename-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.course-detail-rename-dialog :is([data-course-complete-open], [data-course-reopen-open]) {
  justify-self: start;
}

.course-detail-rename-actions :is(button, input) {
  cursor: pointer;
  font-family: inherit;
}

.course-detail-panel-controls {
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: min(100%, var(--course-detail-panel-width));
  align-items: center;
  justify-content: flex-end;
  padding-inline: 0.5rem;
  pointer-events: none;
}

.course-detail-panel-controls[hidden] {
  display: none;
}

.course-detail-panel-toggle {
  --course-panel-toggle-hover-background: #fafafa;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  display: grid;
  pointer-events: auto;
  border: 0;
  border-radius: var(--b-radius);
  color: var(--deep-blue);
  cursor: pointer;
  place-items: center;
  background-color: rgba(250,250,250, 0);
  transition: box-shadow 140ms ease-out;
}

.course-detail-panel-toggle:hover {
  box-shadow: var(--card-shadow);
  background-color: var(--course-panel-toggle-hover-background);
}

.course-detail-panel-toggle:focus-visible {
  outline: 2px solid rgb(14 81 146 / 40%);
  outline-offset: 2px;
}

.course-detail-panel-toggle-icon {
  display: block;
  width: 100%;
  height: 100%;
  filter: invert(75%);
  transition: filter 140ms ease-out;
}

.course-detail-panel-toggle:hover .course-detail-panel-toggle-icon,
.course-detail-panel-toggle:focus-visible .course-detail-panel-toggle-icon {
  filter: invert(13%) sepia(85%) saturate(2250%) hue-rotate(198deg) brightness(93%) contrast(91%);
}

.course-detail-layout[data-course-panel-fullscreen] .course-detail-join-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.course-detail-layout[data-course-panel-fullscreen] .course-detail-join-panel > section {
  display: grid;
  width: min(100%, 100rem);
  height: 100%;
  min-height: 0;
  padding: clamp(1rem, 4vmin, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "sharing-header"
    "sharing-methods";
  align-content: stretch;
  row-gap: clamp(0.75rem, 2.5vmin, 2rem);
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-methods {
  display: grid;
  width: 100%;
  min-height: 0;
  align-self: center;
  grid-area: sharing-methods;
  grid-template-columns: minmax(16rem, 1fr) auto minmax(16rem, 1fr);
  grid-template-areas: "sharing-qr sharing-divider-primary sharing-code";
  column-gap: clamp(1rem, 3vw, 4rem);
}

.course-detail-layout[data-course-panel-fullscreen] .course-detail-panel-controls {
  visibility: hidden;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-header-sharing {
  grid-area: sharing-header;
  margin-bottom: 0;
  padding-inline: clamp(8rem, 16vw, 14rem);
  text-align: center;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-header h2 {
  font-size: clamp(1.75rem, 4.5vmin, 3.5rem);
  line-height: 1.1;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-sidebar-subtitle {
  display: none;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-sidebar-title {
  display: none;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-sidebar-code-copy {
  display: none;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-fullscreen-title,
.course-detail-layout[data-course-panel-fullscreen] .course-participation-fullscreen-code-copy {
  display: inline;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option-qr {
  align-self: stretch;
  width: min(100%, 32rem);
  min-height: 0;
  grid-area: sharing-qr;
  grid-template-rows: auto minmax(0, 1fr);
  justify-self: end;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option-link {
  align-self: end;
  grid-area: sharing-link;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option-code {
  align-self: stretch;
  grid-area: sharing-code;
  grid-template-rows: auto minmax(0, 1fr);
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option-link,
.course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-secondary {
  display: none;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option {
  gap: clamp(0.3rem, 1.2vmin, 0.8rem);
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-code-content {
  align-self: center;
  gap: clamp(0.4rem, 1.5vmin, 1.2rem);
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option h3 {
  font-size: clamp(1.1rem, 2.25vmin, 1.75rem);
  text-align: center;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option p {
  font-size: clamp(0.9rem, 1.65vmin, 1.25rem);
  line-height: 1.45;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option-code p {
  font-size: clamp(0.95rem, 1.85vmin, 1.4rem);
  font-weight: 350;
  text-align: center;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option-code p strong {
  display: block;
  margin-block: clamp(0.25rem, 1vmin, 0.65rem) clamp(0.75rem, 3vmin, 3rem);
  color: var(--deep-blue);
  font-size: clamp(1.75rem, 4vmin, 3.25rem);
  font-weight: 650;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-qr-container {
  align-self: start;
  width: min(100%, 32rem, calc(100dvh - 12rem));
  margin-top: clamp(0.25rem, 1.5vmin, 1rem);
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-qr {
  padding: 0;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-qr-actions {
  display: none;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-option-code .course-participation-copy {
  display: none;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-qr-action {
  min-height: 3.25rem;
  font-size: 1rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-qr-action img,
.course-detail-layout[data-course-panel-fullscreen] .course-participation-qr-action-check {
  width: 1.25rem;
  height: 1.25rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-primary {
  flex-direction: column;
  align-self: stretch;
  grid-area: sharing-divider-primary;
  margin: 0;
  font-size: 1rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-primary::before,
.course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-primary::after {
  width: 1px;
  height: auto;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-secondary {
  grid-area: sharing-divider-secondary;
  margin-block: 1.25rem;
  font-size: 0.9rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-value-row {
  min-height: 4.5rem;
  padding-inline: 1.25rem 0.5rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-value-row > a {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-value-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-copy {
  width: 3.5rem;
  height: 3.5rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-copy-icon,
.course-detail-layout[data-course-panel-fullscreen] .course-participation-copy svg {
  width: 1.4rem;
  height: 1.4rem;
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-code {
  min-height: clamp(4rem, 10dvh, 6rem);
  font-size: clamp(2.5rem, 7vmin, 5.5rem);
}

.course-detail-layout[data-course-panel-fullscreen] .course-participation-fullscreen-actions {
  position: absolute;
  inset-block-start: clamp(0.75rem, 2.5vmin, 1.5rem);
  inset-inline-end: clamp(0.75rem, 3vmin, 2rem);
  margin: 0;
}

@media (max-width: 44rem) and (orientation: portrait) {
  .course-detail-layout[data-course-panel-fullscreen] .course-detail-join-panel > section {
    display: grid;
    width: min(100%, 30rem);
    padding-block: clamp(0.75rem, 2.25dvh, 1.5rem);
    padding-inline: clamp(1rem, 5vw, 2rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "sharing-header"
      "sharing-methods"
      "fullscreen-actions";
    gap: clamp(0.3rem, 1dvh, 0.75rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-methods {
    width: 100%;
    height: 100%;
    align-self: stretch;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.2fr) auto minmax(0, 1fr);
    grid-template-areas:
      "sharing-qr"
      "sharing-divider-primary"
      "sharing-code";
    gap: clamp(0.3rem, 1dvh, 0.75rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-option-qr {
    width: 100%;
    align-self: stretch;
    align-content: center;
    justify-self: center;
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-header-sharing {
    margin-bottom: 0;
    padding-inline: 0;
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-header h2 {
    font-size: clamp(1.5rem, 4dvh, 2.25rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-primary {
    flex-direction: row;
    margin-block: 0;
    font-size: 0.75rem;
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-primary::before,
  .course-detail-layout[data-course-panel-fullscreen] .course-participation-divider-primary::after {
    width: auto;
    height: 1px;
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-option-code {
    align-self: stretch;
    align-content: center;
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-qr-container {
    width: min(100%, 25dvh, 13rem);
    margin-top: clamp(0.15rem, 0.75dvh, 0.5rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-option h3 {
    font-size: clamp(1rem, 2.5dvh, 1.25rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-option-code p {
    font-size: clamp(0.85rem, 2dvh, 1rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-option-code p strong {
    margin-block: clamp(0.15rem, 0.75dvh, 0.4rem) clamp(0.35rem, 1.5dvh, 0.75rem);
    font-size: clamp(1.5rem, 5dvh, 2.5rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-code {
    min-height: clamp(3rem, 8dvh, 4.5rem);
    font-size: clamp(2rem, 7dvh, 3.5rem);
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-participation-fullscreen-actions {
    position: static;
    width: auto;
    margin-top: 0;
    grid-area: fullscreen-actions;
    justify-self: center;
  }
}

.course-detail-layout[data-course-panel-collapsed] .course-detail-join-panel {
  opacity: 0;
  box-shadow: 0 0 6px rgb(0 0 0 / 0%);
}

.course-detail-layout[data-course-panel-collapsed] .course-detail-join-panel::before {
  opacity: 0;
}

.course-detail-layout[data-course-panel-collapsed] .course-detail-join-panel > section {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.course-detail-layout[data-course-panel-collapsed] .course-detail-panel-controls {
  inset-inline-start: 0.5rem;
  width: auto;
  padding: 0;
}

.course-detail-layout:is([data-course-panel-collapsed], [data-course-panel-overlay], .exit-ticket-centered-layout) :is(.course-detail-main-content, .exit-ticket-legal-links) {
  width: min(100%, var(--course-detail-content-outer-width));
  margin-inline: auto;
}

.course-detail-layout[data-course-panel-overlay] .course-detail-main-content {
  /* Add 1rem above the content at the sidebar's automatic hiding threshold. */
  padding-block-start: 4rem;
}

.course-detail-layout[data-course-panel-overlay] .course-detail-join-panel {
  position: fixed;
  z-index: 2;
}

.course-detail-layout[data-course-panel-overlay] .course-detail-panel-controls {
  z-index: 3;
}

.course-detail-layout[data-course-panel-overlay]:not([data-course-panel-collapsed])::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgb(250 250 250 / 50%);
  backdrop-filter: blur(2px);
}

body:has(.course-detail-layout[data-course-panel-overlay]:not([data-course-panel-collapsed])) {
  overflow: hidden;
}

@media (max-width: 50rem) {
  .course-detail-main-content {
    padding-block: 3rem clamp(1rem, 5vw, 3rem);
    padding-inline: var(--course-detail-content-padding-inline);
  }

  .course-detail-main-content > h1,
  .feedback-report-title {
    width: auto;
  }

  .course-detail-join-panel > section {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-detail-panel-toggle-icon,
  .course-detail-panel-toggle,
  .course-detail-panel-controls,
  .course-detail-join-panel,
  .course-detail-join-panel::-webkit-scrollbar-thumb,
  .course-detail-join-panel::before,
  .course-detail-join-panel > section {
    transition: none;
  }
}

h1, h2, h3, h4, [role="heading"] {
    font-weight: 450;
    margin: 0;
    line-height: 1.35;
    color: var(--darkertext);
}

h1, [role="heading"][aria-level="1"] {
    font-size: clamp(1.85rem, 1rem + 3vw, 2.425rem);
}

.agreement-question-intro {
  margin: 0 0 1rem;
  font-weight: 325;
  color: var(--bodytext);
  font-size: 0.925rem;
}

.agreement-question-statement {
  margin: 0;
}

.reflect-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

[data-reflection-tap-option] label {
  display: inline-flex;
  min-block-size: 24px;
  min-inline-size: 24px;
  align-items: center;
}

[data-reflection-survey-navigation] button,
[data-reflection-survey-submit] {
  min-block-size: 24px;
  min-inline-size: 24px;
}

.reflection-survey-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.5rem;
}

.small-course-name {
  min-inline-size: 0;
  flex: 0 0 auto;
  overflow: hidden;
  font-size: clamp(0.85rem, 0.78rem + 0.3vw, 1rem);
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "DM Sans";
}

.reflection-survey-progress {
  --reflection-survey-progress-fill:
    linear-gradient(to right, var(--exit-ticket-light-blue), #e7f2f5);
  --reflection-survey-progress-shadow: 0 2px 6px rgb(2 12 24 / 40%);
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  height: 0.625rem;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: var(--reflection-survey-progress-track);
  box-shadow: var(--reflection-survey-progress-track-shadow);
}

.reflection-survey-progress::-webkit-progress-bar {
  overflow: visible;
  border-radius: 999px;
  background: var(--reflection-survey-progress-track);
  box-shadow: var(--reflection-survey-progress-track-shadow);
}

.reflection-survey-progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--reflection-survey-progress-fill);
  box-shadow: var(--reflection-survey-progress-shadow);
}

.reflection-survey-progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--reflection-survey-progress-fill);
  box-shadow: var(--reflection-survey-progress-shadow);
}

.reflection-survey-body {
  --reflection-survey-progress-track: #125fa8;
  --reflection-survey-progress-track-shadow: inset 0 1px 3px rgb(4 24 46 / 25%);
  /* Match the inner frame when mobile browser controls reduce the viewport. */
  min-height: 100dvh;
  background-color: var(--highlighta);
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--highlighta) 0%, transparent) 0%,
      color-mix(in srgb, var(--highlighta) 20%, transparent) 20%,
      color-mix(in srgb, var(--deep-blue) 40%, transparent) 50%,
      rgb(4 24 46 / 50%) 80%,
      rgb(4 24 46 / 75%) 100%),
    url("bgtile-highlighta-two-color-v2.png");
  background-size: cover, 15rem;
}

.reflection-survey-body.respond-survey-body {
  background-image: url("exit-ticket-cascade.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.reflection-survey-body.respond-survey-body::selection,
.reflection-survey-body.respond-survey-body *::selection {
  background-color: var(--highlighta);
  color: #F2F6FA;
}

.reflection-survey-body :is(.small-course-name, .reflection-survey-context) {
  color: var(--exit-ticket-light-blue);
}

.reflection-survey-body.respond-survey-body .small-course-name {
  color: #F2F6FA;
  text-shadow: 0 1px 3px rgb(4 24 46 / 45%);
}

.reflection-survey-body .exit-ticket-legal-links {
  color: #a8a8a8;
}

.reflection-survey-body.respond-survey-body .exit-ticket-legal-links {
  color: #BCC5CE;
}

.reflection-survey-body .reflection-survey-context a {
  color: inherit;
}

.reflection-survey-body .reflect-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block-start: var(--exit-ticket-content-padding-inline);
  padding-block-end: env(safe-area-inset-bottom);
}

.reflection-survey-body main {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-block-end: 1rem;
}

.reflection-survey-body .reflection-survey-page {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-inline-size: 0;
  max-inline-size: var(--exit-ticket-narrow-content-max-width);
  margin-inline: auto;
  flex-direction: column;
  gap: clamp(8px, 1.25dvh, 12px);
}

.reflection-survey-body .reflection-survey-context {
  flex: 0 0 auto;
  margin-inline: calc(-1 * var(--exit-ticket-page-padding-inline));
  padding-inline: var(--exit-ticket-page-padding-inline);
  padding-block: 0.75rem;
  backdrop-filter: blur(1.5px);
}

.reflection-survey-body [data-reflection-survey]:not([hidden]) {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-block-size: 0;
  flex-direction: column;
  gap: clamp(8px, 1.25dvh, 12px);
}

.reflection-survey-body [data-reflection-survey-guidance] {
  position: absolute;
}

.reflection-survey-body [data-reflection-survey-step]:not([hidden]),
.reflection-survey-body .reflection-submission-success-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.reflection-survey-body .reflect-survey-question {
  flex: 0 0 auto;
  margin-block: clamp(16px, 4dvh, 48px) clamp(12px, 2.25dvh, 24px);
}

.reflection-survey-body .reflect-survey-question {
  margin: 0;
  font-size: inherit;
}

.reflection-survey-step-content {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: clamp(16px, 1.5dvh, 48px);
}

.reflection-code-entry {
  color: var(--bodytext);
}

.reflection-code-entry > .reflection-survey-step-content {
  margin-block: auto;
}

[data-join-code-error]:empty {
  display: none;
}

.reflection-code-field {
  --join-code-length: 8;
  --join-code-gap: .5rem;
  --join-code-group-gap: 1.25rem;
  --join-code-height: 4rem;
  --join-code-font-size: 1.875rem;
  --join-code-slot-width: calc((100cqi - var(--join-code-group-gap) - (var(--join-code-length) - 2) * var(--join-code-gap)) / var(--join-code-length));
  container-type: inline-size;
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
  direction: ltr;
}

.reflection-code-input,
.reflection-code-slots {
  font-family: "DM Mono", monospace;
  font-size: min(var(--join-code-font-size), var(--join-code-slot-width));
  font-weight: 500;
  line-height: 1;
  color: var(--deep-blue);
}

/* The ordinary input remains visible and usable until enhancement succeeds. */
.reflection-code-input {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: var(--join-code-height);
  padding-inline: .75rem;
  border: 1px solid var(--feedback-report-card-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--feedback-report-question-header-background) 60%, transparent);
  box-shadow: none;
}

.reflection-code-input:focus-visible {
  outline: 2px solid var(--deep-blue);
  outline-offset: -2px;
}

.reflection-code-input[aria-invalid="true"] {
  border-color: var(--dark-coral);
}

.reflection-code-slots {
  display: none;
  pointer-events: none;
  user-select: none;
}

.reflection-code-field[data-enhanced="true"] .reflection-code-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--join-code-group-gap);
}

.reflection-code-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--join-code-gap);
}

[data-join-code-slot] {
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  block-size: var(--join-code-height);
  border: 1px solid var(--feedback-report-card-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--feedback-report-question-header-background) 60%, transparent);
  box-shadow: none;
}

[data-join-code-slot][data-invalid="true"] {
  border-color: var(--dark-coral);
}

[data-join-code-slot][data-active="true"] {
  border-color: color-mix(in srgb, var(--deep-blue) 40%, transparent);
  background: transparent;
  box-shadow: 0 .125rem .375rem color-mix(in srgb, var(--deep-blue) 12%, transparent);
}

:where([data-join-code-field][data-focus-visible="true"]) [data-join-code-slot][data-active="true"] {
  outline: 2px solid var(--deep-blue);
  outline-offset: -2px;
}

[data-join-code-slot][data-selected="true"] {
  color: var(--feedback-report-question-header-background);
  background: var(--highlighta);
  border-color: var(--highlighta);
}

[data-join-code-slot]:where([data-caret]:not([data-caret="none"]))::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: 1em;
  background: var(--deep-blue);
  transform: translate(-50%, -50%);
  animation: reflection-code-caret 1s step-end infinite;
}

[data-join-code-slot][data-caret="after"]::after {
  /* Leave a visible gap after the glyph while staying inside its box. */
  inset-inline-start: min(calc(50% + .5ch + .125rem), calc(100% - .125rem));
}

/* The native input owns editing, selection, the clipboard, and focus. Only its
   paint is replaced; evenly spaced native glyphs also keep touch handles near
   their corresponding boxes. Pointer hit testing uses the actual slot bounds. */
.reflection-code-field[data-enhanced="true"] .reflection-code-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding-inline: max(0px, (var(--join-code-slot-width) - 1ch) / 2);
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  letter-spacing: calc((100cqi - var(--join-code-slot-width)) / (var(--join-code-length) - 1) - 1ch);
  forced-color-adjust: none;
}

.reflection-code-field[data-enhanced="true"] .reflection-code-input::selection {
  color: transparent;
  background: transparent;
}

@keyframes reflection-code-caret {
  50% { opacity: 0; }
}

@media (max-width: 48rem) {
  .reflection-code-field {
    --join-code-gap: clamp(.25rem, 1vw, .5rem);
    --join-code-group-gap: clamp(.75rem, 2.5vw, 1.25rem);
    --join-code-height: 3rem;
    --join-code-font-size: clamp(1.375rem, 3.5vw, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-join-code-slot]::after { animation: none; }
}

@media (forced-colors: active) {
  [data-join-code-slot] {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }

  [data-join-code-slot][data-active="true"] {
    border-color: Highlight;
    outline-color: Highlight;
  }

  [data-join-code-slot][data-selected="true"] {
    color: HighlightText;
    background: Highlight;
    border-color: Highlight;
    forced-color-adjust: none;
  }

  [data-join-code-slot][data-caret]::after {
    background: Highlight;
    forced-color-adjust: none;
  }
}

.reflection-survey-ticket {
  --feedback-report-card-padding-inline: var(--exit-ticket-content-padding-inline);
  --feedback-report-card-border: #C7DFF1;
  flex: 0 0 auto;
}

.reflection-survey-ticket:has(> .feedback-report-body) {
  filter: drop-shadow(0 1.5rem 1.5rem rgb(2 12 24 / 30%));
}

.reflection-survey-ticket > .feedback-report-question-header {
  font-size: clamp(18px, calc(12px + 2.5vw), 28px);
  line-height: 1.35;
  padding-block: var(--feedback-report-card-padding-inline)
    calc(var(--feedback-report-card-padding-inline) - var(--report-notch-half-height));
}

.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket {
  --reflection-survey-card-padding-block: var(--feedback-report-card-padding-inline);
  --reflection-survey-answer-padding-block: 1.75rem;
  --reflection-survey-answer-accent: #3B73A7;
  --reflection-survey-answer-hover-border: var(--reflection-survey-answer-accent);
  --reflection-survey-answer-hover-start: color-mix(in srgb, #F2F6FA 50%, transparent);
  --reflection-survey-answer-hover-end: color-mix(in srgb, var(--feedback-report-question-header-background) 50%, transparent);
  --reflection-survey-answer-selected-start: var(--reflection-survey-answer-hover-start);
  --reflection-survey-answer-selected-end: var(--reflection-survey-answer-hover-end);
  --reflection-survey-first-answer-start: transparent;
  --reflection-survey-first-answer-end: transparent;
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  filter: none;
  box-shadow: none;
}

/* Paint one opaque surface behind the card edges and perforation. The ticket's
   drop shadow follows the complete silhouette, including the notches. */
.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket::before {
  /* Match the circle centers and radius in the fallback SVG edges. */
  --reflection-survey-backdrop-mask:
    radial-gradient(circle at var(--report-notch-circle-center) var(--report-notch-half-height),
      transparent var(--report-notch-radius), #000 calc(var(--report-notch-radius) + 0.5px)),
    radial-gradient(circle at calc(100% - var(--report-notch-circle-center)) var(--report-notch-half-height),
      transparent var(--report-notch-radius), #000 calc(var(--report-notch-radius) + 0.5px));
  content: "";
  grid-column: 1;
  grid-row: 2 / 4;
  z-index: 0;
  /* The foreground SVGs own the edge; don't fill their rounded shoulders. */
  clip-path: inset(0 2.5px);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  background-color: #fafafa;
  -webkit-mask-image: var(--reflection-survey-backdrop-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--reflection-survey-backdrop-mask);
  mask-composite: intersect;
  pointer-events: none;
}

.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket > :is(
  .feedback-report-question-header, .feedback-report-notch, .feedback-report-body
) {
  grid-column: 1;
  z-index: 1;
}

.respond-survey-body [data-reflection-survey-step] .feedback-report-question-header {
  grid-row: 1;
  font-size: clamp(20px, calc(8px + 2.5vw), 28px);
  padding-inline: var(--feedback-report-card-padding-inline);
  padding-block: var(--reflection-survey-card-padding-block)
    calc(var(--reflection-survey-card-padding-block) - var(--report-notch-half-height));
  clip-path: inset(-32px -32px 0);
}

.respond-survey-body [data-reflection-survey-step] .feedback-report-notch {
  grid-row: 2;
  clip-path: inset(0 -32px);
}

.respond-survey-body [data-reflection-survey-step] :is(.feedback-report-body, .feedback-report-notch) {
  background-color: transparent;
}

.respond-survey-body [data-reflection-survey-step] .feedback-report-notch-fill {
  fill: transparent;
}

.respond-survey-body [data-reflection-survey-step] .feedback-report-body {
  grid-row: 3;
  padding-block: calc(var(--reflection-survey-card-padding-block) - var(--report-notch-half-height))
    var(--reflection-survey-card-padding-block);
  clip-path: inset(0 -32px -32px);
}

/* Once measured, a single SVG contour replaces every joined edge. The old
   sections remain as the no-JavaScript fallback and provide layout only. */
.reflection-survey-frame,
.reflection-survey-frame-surface {
  display: none;
}

.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket[data-ticket-ready]::before {
  grid-row: 1 / 4;
  -webkit-mask: none;
  mask: none;
  clip-path: var(--reflection-survey-ticket-clip);
}

.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket[data-ticket-ready]::after {
  content: "";
  grid-column: 1;
  grid-row: 1 / 4;
  z-index: 0;
  background:
    linear-gradient(var(--feedback-report-question-header-background),
      var(--feedback-report-question-header-background))
      top / 100% var(--reflection-survey-header-end) no-repeat;
  clip-path: var(--reflection-survey-ticket-clip);
  pointer-events: none;
}

.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket[data-ticket-ready] > :is(
  .feedback-report-question-header, .feedback-report-notch, .feedback-report-body
) {
  z-index: 2;
  border-color: transparent;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.reflection-survey-ticket[data-ticket-ready] > .reflection-survey-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.reflection-survey-ticket[data-ticket-ready] > .feedback-report-notch > svg {
  display: none;
}

.reflection-survey-ticket[data-ticket-ready] > .feedback-report-notch::after {
  content: none;
}

.reflection-survey-frame-outline,
.reflection-survey-frame-perforation {
  fill: none;
  stroke: none;
  stroke-width: 1;
}

.reflection-survey-frame-perforation {
  stroke: var(--ticket-perforation-color);
  stroke-dasharray: var(--exit-ticket-rule-dash) var(--exit-ticket-rule-gap);
  stroke-linecap: butt;
}

.reflection-survey-ticket > .feedback-report-body {
  padding-block: calc(var(--feedback-report-card-padding-inline) - var(--report-notch-half-height))
    var(--feedback-report-card-padding-inline);
}

.reflection-survey-ticket > .feedback-report-body:has(> .reflection-survey-footer:not([hidden])) {
  padding-block-end: var(--reflection-survey-card-padding-block, min(1.5rem, var(--feedback-report-card-padding-inline)));
}

/* Remove only the outer line spacing, using each paragraph's own font size. */
.reflection-survey-body :is(h1.reflect-survey-question, .agreement-question-intro) {
  margin-block-start: calc((1em - 1lh) / 2);
}

.reflection-survey-body :is(h1.reflect-survey-question, .agreement-question-statement) {
  margin-block-end: calc((1em - 1lh) / 2);
}

@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
  .reflection-survey-body :is(h1.reflect-survey-question, .agreement-question-intro, .agreement-question-statement) {
    text-box-edge: cap alphabetic;
  }

  .reflection-survey-body :is(h1.reflect-survey-question, .agreement-question-intro) {
    margin-block-start: 0;
    text-box-trim: trim-start;
  }

  .reflection-survey-body :is(h1.reflect-survey-question, .agreement-question-statement) {
    margin-block-end: 0;
    text-box-trim: trim-end;
  }

  .reflection-survey-body h1.reflect-survey-question {
    text-box-trim: trim-both;
  }
}

.reflection-survey-body [data-reflection-tap-options] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(12px, 1.5dvh, 16px);
}

.reflection-survey-body [data-reflection-tap-options]:has(> :nth-child(5)) {
  gap: 8px;
}

.reflection-survey-body [data-reflection-tap-option] {
  flex: 1 1 clamp(56px, 8dvh, 60px);
  min-block-size: 48px;
  max-block-size: 64px;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] {
  flex: 0 0 auto;
  max-block-size: none;
}

.reflection-survey-body [data-reflection-tap-option] label {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0.75rem;
  padding-inline: 1rem;
  transition: box-shadow 160ms ease-out;
  outline: 2px solid transparent;
  cursor: pointer;
}

.reflection-survey-body .agreement-question-intro,
.reflection-survey-body [data-reflection-tap-option] label {
  font-size: clamp(16px, calc(14px + 0.625vw), 18px);
}

.reflection-survey-body [data-reflection-tap-option] label {
  --reflection-survey-answer-padding-inline-start: 1.25rem;
  gap: 0.95rem;
  padding-inline: var(--reflection-survey-answer-padding-inline-start) 1rem;
  overflow: visible;
  background-color: transparent;
  box-shadow: none;
  color: var(--bodytext);
  line-height: 1.35;
  text-wrap: pretty;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label {
  height: auto;
  padding-block: var(--reflection-survey-answer-padding-block);
}

.reflection-survey-body .reflection-radio-circle {
  position: relative;
  flex: 0 0 auto;
  margin-inline-start: auto;
  width: 1rem;
  height: 1rem;
}

.reflection-survey-body.respond-survey-body
  [data-reflection-tap-options]:not(:has(.reflection-survey-radio:checked))
  .reflection-radio-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid var(--feedback-report-card-border);
  border-radius: 50%;
}

.reflection-survey-body.respond-survey-body
  [data-reflection-tap-options]:not(:has(.reflection-survey-radio:checked))
  label:hover .reflection-radio-circle::after {
  border-color: var(--reflection-survey-answer-hover-border);
}

@media (prefers-reduced-motion: no-preference) {
  .reflection-survey-body.respond-survey-body
    [data-reflection-tap-options]:not(:has(.reflection-survey-radio:checked))
    label:hover .reflection-radio-circle::after {
    transition: border-color 160ms ease-out;
  }
}

.reflection-survey-body .reflection-radio-circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  clip-path: inset(0 100% 0 0);
  transform: translate(-50%, -50%);
  background: url("teval-check.svg") no-repeat center / contain;
  transition: clip-path 180ms ease-out;
}

.reflection-survey-body.respond-survey-body .reflection-radio-circle::before {
  width: 1.125em;
  height: 1.125em;
}

.respond-survey-body [data-reflection-survey-step] .reflection-radio-circle::before {
  background: var(--reflection-survey-answer-accent);
  -webkit-mask: url("teval-check.svg") no-repeat center / contain;
  mask: url("teval-check.svg") no-repeat center / contain;
}

.reflection-survey-body .reflection-survey-radio:checked
  ~ .reflection-radio-circle::before {
  clip-path: inset(0);
}

.reflection-survey-body [data-reflection-tap-confirming] label {
  animation: reflection-tap-confirm 240ms ease-out;
}

@keyframes reflection-tap-confirm {
  50% {
    transform: scale(0.99);
  }
}

.reflection-survey-body [data-reflection-tap-option] label:is(
  :hover, :has(.reflection-survey-radio:checked)
) {
  color: var(--darktext);
}

.reflection-survey-body [data-reflection-tap-option]:has(
  .reflection-survey-radio:checked
) label {
  border-color: transparent;
  box-shadow: 0 1px 4px rgb(11 62 114 / 15%);
  background-image: linear-gradient(135deg, rgba(0, 147, 183, 0.03) 33%, rgba(0, 147, 183, 0.125) 100%);
  outline: 2px solid var(--deep-blue);
}

.reflection-survey-body [data-reflection-tap-option] label:has(
  .reflection-survey-radio:focus-visible
) {
  border-color: transparent;
  outline: 2px solid var(--deep-blue);
}

.reflection-survey-body:not(.respond-survey-body) [data-reflection-tap-option] label:has(
  .reflection-survey-radio:hover:not(:checked)
) {
  background-image: linear-gradient(135deg, rgba(0, 147, 183, 0.015) 33%, rgba(0, 147, 183, 0.062) 100%);
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label:has(
  .reflection-survey-radio:is(:checked, :focus-visible)
) {
  background-image: none;
  box-shadow: none;
  outline: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label:has(
  .reflection-survey-radio:focus-visible
) {
  outline: 2px solid var(--deep-blue);
  outline-offset: -2px;
}

.reflection-survey-body:not(.respond-survey-body) [data-reflection-tap-option] label:has(
  .reflection-survey-radio:hover
),
.reflection-survey-body [data-reflection-tap-option] label:has(
  .reflection-survey-radio:focus-visible
) {
  box-shadow: 0 1px 4px rgb(11 62 114 / 15%);
}

@media (prefers-reduced-motion: reduce) {
  .reflection-survey-body [data-reflection-tap-option] label,
  .reflection-survey-body .reflection-radio-circle::before {
    animation: none;
    transition: none;
  }
}

.reflection-submission-success-body:not(.respond-survey-body) .reflect-inner {
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.reflection-submission-success-body:not(.respond-survey-body) main {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: 1fr 1fr;
}

.reflection-submission-success-body:not(.respond-survey-body) [data-reflection-submission-success] {
  grid-row: 1;
  align-self: end;
  justify-self: center;
  text-align: center;
}

.reflection-submission-success-check {
  position: relative;
  box-sizing: border-box;
  width: 7rem;
  height: 7rem;
  margin: 2rem auto;
  border: 4px solid var(--deep-blue);
  border-radius: 50%;
}

.respond-survey-body .reflection-submission-success-check {
  width: 6rem;
  height: 6rem;
  margin: 0 auto;
  border-width: 3.5px;
}

[data-reflection-submission-success] h1 {
  text-align: center;
}

.reflection-submission-success-check::before {
  content: "";
  position: absolute;
  inset: 1.5rem;
  clip-path: inset(0 100% 0 0);
  background: url("teval-check.svg") no-repeat center / contain;
  animation: reflection-submission-check-tick 180ms ease-out forwards;
}

.respond-survey-body .reflection-submission-success-check::before {
  inset: 1.25rem;
}

@keyframes reflection-submission-check-tick {
  to {
    clip-path: inset(0);
  }
}

/* JavaScript replaces the intermediate receipt with its saved-attempt URL.
   Start the checkmark there; without JavaScript, this receipt is the final page. */
@media (scripting: enabled) {
  [data-receipt-redirect] .reflection-submission-success-check::before {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reflection-submission-success-check::before {
    clip-path: inset(0);
    animation: none;
  }
}

.feedback-report-responses,
.reflection-survey-body [data-question-type="short_text"] textarea {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  color: var(--mediumtext);
  font-weight: 325;
  line-height: 1.5;
}

.reflection-survey-body [data-question-type="short_text"] textarea {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font-size: clamp(16px, calc(14px + 0.625vw), 18px);
  width: 100%;
  min-block-size: 8rem;
  padding: 0.75rem 1rem;
  overflow: hidden;
  border: 1.5px solid #70C1D5;
  border-radius: var(--card-radius);
  outline: none;
  background-color: rgba(243 250 252 / 25%);
  resize: none;
  vertical-align: top;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(1.25px) brightness(1.02);
  -webkit-backdrop-filter: blur(1px) brightness(1.02);
}

.reflection-survey-body.respond-survey-body [data-question-type="short_text"] textarea::placeholder {
  color: color-mix(in srgb, var(--reflection-survey-progress-track) 88%, white);
  opacity: 1;
}

.reflection-survey-body [data-question-type="short_text"] textarea:focus {
  border-color: transparent;
  outline: 2px solid var(--deep-blue);
  background-color: rgba(243 250 252 / 50%);
  box-shadow: 0 1px 5px rgb(11 62 114 / 15%);
  backdrop-filter: blur(1.5px) brightness(1.03);
}

.reflection-survey-body [data-question-type="short_text"] textarea:not(:focus):hover {
  box-shadow: 0 1px 5px rgb(11 62 114 / 15%);
}

.reflection-survey-body .reflection-survey-footer:not([hidden]) {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.reflection-survey-ticket .reflection-survey-footer {
  margin-block-start: var(--reflection-survey-card-padding-block, var(--feedback-report-card-padding-inline));
}

.reflection-survey-body.respond-survey-body .reflection-survey-ticket > [data-reflection-survey-footer] {
  grid-column: 1;
  grid-row: 4;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] {
  --reflection-survey-tray-border: #0c4883;
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--reflection-survey-progress-track-shadow);
  background-color: color-mix(in srgb, var(--deep-blue) 25%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--reflection-survey-tray-border);
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer]:not([hidden]) {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(var(--reflection-survey-tray-columns, 2), minmax(0, 1fr));
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer]:is(
  :has([data-reflection-survey-back][hidden]),
  :has([data-reflection-survey-next][hidden]):has([data-reflection-survey-submit][hidden])
) {
  --reflection-survey-tray-columns: 1;
  --reflection-survey-tray-divider-display: none;
  width: 50%;
  align-self: flex-end;
  justify-self: end;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer]:has(
  [data-reflection-survey-next][hidden]
):has([data-reflection-survey-submit][hidden]) {
  align-self: flex-start;
  justify-self: start;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer]::before {
  content: "";
  display: var(--reflection-survey-tray-divider-display, block);
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background-color: var(--reflection-survey-tray-border);
  transform: translateX(-50%);
  pointer-events: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] button {
  grid-row: 1;
  min-inline-size: 0;
  width: 100%;
  /* Include the tray's two 1px borders in the measured answer row height. */
  min-block-size: calc(var(--reflection-survey-answer-row-height, calc(2 * var(--reflection-survey-answer-padding-block) + 1rem)) - 2px);
  margin: 0;
  padding: 0.75rem 1.25rem;
  gap: 1.25rem;
  justify-content: flex-start;
  text-align: start;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] button:not([hidden]) {
  display: flex;
  align-items: center;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] [data-reflection-survey-back] {
  grid-column: 1;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] :is([data-reflection-survey-next], [data-reflection-survey-submit]) {
  grid-column: var(--reflection-survey-tray-columns, 2);
  justify-content: flex-end;
  text-align: end;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] .reflection-survey-next-chevron {
  position: static;
  transform: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] :is(.reflection-survey-back-chevron, .reflection-survey-next-chevron) {
  /* Align the visible chevron with the mixed-case lettering. */
  translate: 0 1px;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-submit]::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("arrow-right.svg") center / contain no-repeat;
  mask: url("arrow-right.svg") center / contain no-repeat;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] button:not([hidden]):enabled:hover {
  background-color: color-mix(in srgb, var(--deep-blue) 20%, transparent);
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-footer] button:focus-visible {
  outline: 2px solid var(--feedback-report-question-header-background);
  outline-offset: -3px;
}

.reflection-survey-body [data-reflection-survey-navigation]:not([hidden]) {
  display: contents;
}

.reflection-survey-body .reflection-survey-footer button {
  box-sizing: border-box;
  min-block-size: 2.75rem;
  flex: 0 0 auto;
  border: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.25;
  cursor: pointer;
}

.reflection-survey-body [data-reflection-survey-next],
.reflection-survey-body [data-reflection-survey-submit],
.reflection-survey-body .reflection-submission-repeat-button {
  margin-inline-start: auto;
  padding: 0.75rem 3.5rem;
  border-radius: 999px;
  background: var(--deep-blue);
  white-space: nowrap;
  color: #FFF;
  transition: box-shadow 160ms ease-out;
}

.reflection-survey-body .reflection-submission-repeat-button {
  max-inline-size: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
  white-space: normal;
}

.reflection-code-entry .reflection-submission-repeat-button {
  padding-inline: 4rem;
}

.reflection-survey-body [data-reflection-survey-next] {
  position: relative;
}

.reflection-survey-body :is([data-reflection-survey-next], [data-reflection-survey-submit], .reflection-submission-repeat-button):is(:hover, :focus-visible) {
  box-shadow: 0 1px 5px rgb(0 0 0 / 35%);
}

.reflection-survey-body :is([data-reflection-survey-back], [data-reflection-survey-next]):not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-next] {
  min-inline-size: 9rem;
  padding-inline: 1.25rem 3rem;
  justify-content: flex-start;
  border: 0;
  background: transparent;
}

.reflection-survey-button-text {
  /* Center the chevrons against the letters rather than the line's leading. */
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.reflection-survey-body [data-reflection-survey-back]:not([hidden]) {
  margin-inline-end: auto;
  padding: 0;
  background: transparent;
  color: var(--bodytext);
  transition: color 120ms ease-out;
}

.reflection-survey-back-chevron,
.reflection-survey-next-chevron {
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  /* Optical alignment with the mixed-case button labels. */
  translate: 0 1px;
}

.reflection-survey-back-chevron {
  background-color: currentColor;
  -webkit-mask: url("chevron-right.svg") center / contain no-repeat;
  mask: url("chevron-right.svg") center / contain no-repeat;
  transform: rotate(180deg);
}

.reflection-survey-next-chevron {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1.25rem;
  transform: translateY(-50%);
  fill: currentColor;
}

.reflection-survey-body [data-reflection-survey-back]:is(:hover, :focus-visible) {
  color: var(--darktext);
}

@media (min-width: 48rem) {
  .reflection-survey-body [data-reflection-tap-confirming] label {
    animation: none;
  }

  .reflection-survey-body [data-reflection-survey-step]:not([hidden]),
  .reflection-survey-body .reflection-submission-success-content {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(max-content, 1fr) auto minmax(0, 1fr);
  }

  .reflection-survey-body .reflection-survey-step-content {
    grid-row: 2;
  }

  .reflection-survey-body [data-reflection-tap-options] {
    width: 100%;
    margin-inline: 0;
    flex: 0 0 auto;
  }

  .reflection-survey-body [data-question-type="short_text"] textarea {
    width: 100%;
    margin-inline: 0;
  }
}

/* Report navigation uses the existing panel and participation controls. */
.course-detail-join-panel > .feedback-report-navigation {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100dvh;
}

.feedback-report-course-name {
  position: relative;
  min-width: 0;
  margin-block: 0 1em;
  padding-bottom: 0.75rem;
  overflow-wrap: anywhere;
  color: var(--darktext);
  font-size: 1.35rem;
  letter-spacing: -0.006em;
  font-weight: 450;
  line-height: 1.35;
}

.feedback-report-actions {
  display: grid;
  gap: 0.75rem;
}

.feedback-report-history {
  flex: 1;
  min-height: 5rem;
  margin-top: -1rem;
  overflow-y: auto;
}

#institution-accounts-panel > .feedback-report-navigation {
  gap: 0.75rem;
}

#institution-accounts-panel .feedback-report-course-name {
  margin-block-end: 0;
}

#institution-accounts-panel .feedback-report-history {
  margin-top: 1.25rem;
}

.feedback-report-history ul {
  list-style: none;
  margin-top: 0;
  padding: 0;
}

.feedback-report-history li {
  margin-block: 0.75rem;
}

.feedback-report-history li:first-child {
  margin-top: 0;
}

.feedback-report-history-button {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  text-align: left;
  overflow-wrap: anywhere;
}

.feedback-report-history-details {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.feedback-report-history-button[aria-current="page"] {
  border-color: var(--deep-blue);
  background-color: var(--deep-blue);
  color: #fff;
}

.feedback-report-layout .feedback-report-history-button:not([aria-current="page"]) {
  color: var(--mediumtext);
}

.feedback-report-layout .feedback-report-history-button:not([aria-current="page"]):hover {
  color: var(--darktext);
}

.feedback-report-layout .feedback-report-history-button[aria-current="page"] {
  border-color: color-mix(in srgb, var(--highlighta) 40%, transparent);
  background-color: #EEF2F6;
  color: var(--deep-blue);
}

.feedback-report-history-time {
  font-size: 0.8125rem;
  font-weight: 400;
}

.feedback-report-active-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  border-radius: var(--b-radius);
  background-color: var(--green);
  color: var(--deep-blue);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
}

.reflect-demo-tag {
  display: inline-block;
  flex: 0 0 auto;
  padding: 0.2rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: var(--b-radius);
  color: var(--lighttext);
  vertical-align: middle;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: none;
}

.reflection-survey-course-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-inline-size: 0;
  color: #F2F6FA;
}

.reflection-survey-course-label .small-course-name {
  flex: 0 1 auto;
}

.reflection-survey-course-label .reflect-demo-tag {
  background-color: var(--deep-blue);
  color: inherit;
}

.reflection-survey-header .exit-ticket-logout-form {
  /* Match the instructor link's top inset without moving the survey header. */
  position: relative;
  inset-block-start: calc(0.5rem - var(--exit-ticket-content-padding-inline));
  inset-inline-end: 0;
  align-self: flex-end;
}

.reflection-survey-header .exit-ticket-demo-exit {
  padding-inline: 0.75rem;
  border-radius: var(--b-radius);
  background-color: var(--deep-blue);
  color: #fff;
  font-weight: 600;
}

.reflection-demo-return {
  align-self: center;
  margin-block-start: 1.5rem;
}

.feedback-report-active-tag[hidden] {
  display: none;
}

.feedback-report-history-category {
  color: color-mix(in srgb, var(--lighttext) 80%, var(--lightertext));
}

.feedback-report-history-button[aria-current="page"] .feedback-report-history-category {
  color: inherit;
}

.feedback-report-history-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.feedback-report-end-survey {
  color: var(--lighttext);
}

.feedback-report-end-survey[hidden],
.feedback-report-actions [data-report-join-open][hidden] {
  display: none;
}

.feedback-report-layout .course-detail-join-panel > section[hidden] {
  display: none;
}

body:has(.feedback-report-layout[data-course-panel-fullscreen]) {
  overflow: hidden;
}

/* Share the report's compact page gutters across Exit Ticket.
   Match one column at the 60rem stacking threshold, excluding the 2.75rem gap.
   Include the original side padding so reducing it cannot toggle this rule. */
@container exit-ticket-page (max-width: calc((60rem - 2.75rem) / 2 + 2 * 3rem)) {
  .course-detail-main-content,
  .course-detail-main-panel > .exit-ticket-legal-links {
    --course-detail-content-padding-inline: var(--exit-ticket-page-padding-inline);
  }

  .course-detail-layout .course-detail-join-panel > section {
    padding-block-end: var(--exit-ticket-page-padding-inline);
    padding-inline: var(--exit-ticket-page-padding-inline)
      calc(var(--exit-ticket-page-padding-inline) - var(--course-detail-panel-scrollbar-width));
  }

  .course-detail-layout[data-course-panel-fullscreen] .course-detail-join-panel > section {
    padding-inline: var(--exit-ticket-page-padding-inline);
  }

  .course-detail-layout[data-course-panel-collapsed] .course-detail-panel-toggle {
    background-color: var(--course-panel-toggle-hover-background);
    box-shadow: var(--card-shadow);
  }
}

/* Compact copyright spacing and student question and answer row padding. */
@media (max-width: calc((60rem - 2.75rem) / 2 + 2 * 3rem)) {
  .exit-ticket-legal-links {
    margin-block-start: 1.5rem;
  }

  .respond-survey-body .reflection-survey-ticket {
    --feedback-report-card-padding-inline: 1.5rem;
  }

  .respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket {
    --reflection-survey-answer-padding-block: 1.5rem;
  }

  .reflection-survey-body.respond-survey-body .reflect-inner {
    padding-block-start: 1rem;
  }

  .respond-survey-body .reflection-survey-header .exit-ticket-logout-form {
    inset-block-start: -0.5rem;
  }

  .reflection-survey-body:not(.respond-survey-body) .reflect-inner {
    padding-block-start: var(--exit-ticket-page-padding-inline);
  }
}

/* Use the same phone-sized gutters on standalone pages and panel layouts. */
@media (max-width: 28rem) {
  :root {
    --exit-ticket-page-padding-inline: 0.75rem;
  }

  .respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket {
    --feedback-report-card-padding-inline: 0.75rem;
    --reflection-survey-card-padding-block: 1.75rem;
    --reflection-survey-answer-padding-block: 1.5rem;
  }

  .reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-tap-option] label {
    --reflection-survey-answer-padding-inline-start: var(--reflection-survey-card-padding-block);
  }
}

/* One SVG surface and shadow cover the question, notch and answer rows. The
   measured surface stops before navigation, which stays outside the card. */
.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket::before,
.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket::after {
  content: none;
}

.respond-survey-body .reflection-survey-frame-surface {
  display: inline;
}

.respond-survey-body .reflection-survey-frame-header-stop {
  stop-color: var(--feedback-report-question-header-background);
}

.respond-survey-body .reflection-survey-ticket:has([data-reflection-tap-option]:first-child label:is(:hover, :active)) {
  --reflection-survey-first-answer-start: var(--reflection-survey-answer-hover-start);
  --reflection-survey-first-answer-end: var(--reflection-survey-answer-hover-end);
}

.respond-survey-body .reflection-survey-ticket:has([data-reflection-tap-option]:first-child .reflection-survey-radio:checked) {
  --reflection-survey-first-answer-start: var(--reflection-survey-answer-selected-start);
  --reflection-survey-first-answer-end: var(--reflection-survey-answer-selected-end);
}

.respond-survey-body .reflection-survey-frame-first-answer-start {
  stop-color: var(--reflection-survey-first-answer-start);
}

.respond-survey-body .reflection-survey-frame-first-answer-end {
  stop-color: var(--reflection-survey-first-answer-end);
}

.respond-survey-body .reflection-survey-ticket[data-ticket-ready] > .reflection-survey-frame {
  filter: drop-shadow(0 1.5rem 1.5rem rgb(2 12 24 / 30%));
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket > :is(
  .feedback-report-question-header, .feedback-report-body
) {
  border: 0;
  border-radius: var(--card-radius);
  padding-block: var(--reflection-survey-card-padding-block);
  clip-path: none;
  filter: drop-shadow(0 1.5rem 1.5rem rgb(2 12 24 / 30%));
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket > .feedback-report-question-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-inline: var(--reflection-survey-card-padding-block);
  padding-block-end: calc(var(--reflection-survey-card-padding-block) - var(--report-notch-half-height));
  background: var(--feedback-report-question-header-background);
  clip-path: inset(-6rem -6rem 0);
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket[data-ticket-ready] > .feedback-report-question-header {
  background: none;
  filter: none;
  clip-path: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .feedback-report-notch {
  background-color: #fafafa;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket[data-ticket-ready] > .feedback-report-notch {
  background: none;
}

.reflection-survey-body.respond-survey-body .feedback-report-notch-fill {
  fill: #fafafa;
}

.respond-survey-body .feedback-report-notch-outline {
  stroke: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket > .feedback-report-body {
  grid-row: 3;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-block-start: calc(var(--reflection-survey-card-padding-block) - var(--report-notch-half-height));
  background: #fafafa;
  clip-path: inset(0 -6rem -6rem);
}

.reflection-survey-body.respond-survey-body [data-question-type="short_text"] .reflection-survey-ticket > .feedback-report-body {
  padding-block-end: var(--feedback-report-card-padding-inline);
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket > .feedback-report-body:has(> [data-reflection-tap-options]) {
  padding: 0;
  background: none;
  filter: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] .reflection-survey-ticket[data-ticket-ready] > .feedback-report-body {
  background: none;
  filter: none;
  clip-path: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-tap-options] {
  gap: 0;
  filter: drop-shadow(0 1.5rem 1.5rem rgb(2 12 24 / 30%));
}

.reflection-survey-body.respond-survey-body .reflection-survey-ticket[data-ticket-ready] [data-reflection-tap-options] {
  filter: none;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] {
  display: flex;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label {
  --reflection-survey-answer-padding-inline-start: max(1.25rem, var(--feedback-report-card-padding-inline));
  align-items: center;
  padding-inline: var(--reflection-survey-answer-padding-inline-start);
  border: 0;
  border-radius: 0;
  background-color: #fafafa;
  outline-offset: -2px;
}

.reflection-survey-body.respond-survey-body .reflection-survey-ticket[data-ticket-ready] [data-reflection-tap-option] label {
  background-color: transparent;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label:hover:not(:has(.reflection-survey-radio:checked)) {
  background-image: linear-gradient(135deg,
    var(--reflection-survey-answer-hover-start) 33%, var(--reflection-survey-answer-hover-end) 100%);
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label:has(.reflection-survey-radio:checked) {
  background-image: linear-gradient(135deg,
    var(--reflection-survey-answer-selected-start) 33%, var(--reflection-survey-answer-selected-end) 100%);
}

/* The SVG paints the first row and lower notch together, including touch presses. */
.reflection-survey-body.respond-survey-body .reflection-survey-ticket[data-ticket-ready] [data-reflection-tap-option]:first-child label {
  background-color: transparent;
  background-image: none;
}

/* Match the painted surface without leaving a rim for the former outline. */
.reflection-survey-ticket[data-ticket-ready] {
  --reflection-survey-row-fill-inset: 0.5px;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label:is(:hover, :has(.reflection-survey-radio:checked)) {
  clip-path: inset(0 var(--reflection-survey-row-fill-inset, 0px));
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option]:last-child label:is(:hover, :has(.reflection-survey-radio:checked)) {
  clip-path: inset(0 var(--reflection-survey-row-fill-inset, 0px) var(--reflection-survey-row-fill-inset, 0px)
    round 0 0 calc(var(--card-radius) - var(--reflection-survey-row-fill-inset, 0px)) calc(var(--card-radius) - var(--reflection-survey-row-fill-inset, 0px)));
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option]:first-child label {
  padding-block-start: calc(var(--reflection-survey-answer-padding-block) - var(--report-notch-half-height));
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] label > span:first-of-type {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option]:last-child label {
  border-bottom-left-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}

.reflection-survey-body.respond-survey-body [data-reflection-tap-option] + [data-reflection-tap-option] {
  border-block-start: 1px solid var(--feedback-report-card-border);
}

.reflection-survey-body.respond-survey-body [data-reflection-survey-step] [data-reflection-survey-back] {
  color: #F2F6FA;
}

@container exit-ticket-page (max-width: 28rem) {
  .course-detail-main-content,
  .course-detail-main-panel > .exit-ticket-legal-links,
  .course-detail-join-panel {
    --exit-ticket-page-padding-inline: 0.75rem;
  }

  .course-feedback-list {
    gap: var(--course-detail-content-padding-inline);
  }
}