.home-learning-status {
  width: 100%;
  max-width: 290px;
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 3px;
}

.home-learning-status strong,
.home-learning-status span {
  min-width: 0;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.home-learning-status [data-learning-status-detail] {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  line-height: 1.45;
}

.home-learning-status strong {
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1.25;
}

.home-learning-status span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.4;
}

.home-learning-status[data-learning-mode="retention_due"] strong {
  color: #ffd28a;
}

.home-learning-status[data-learning-mode="daily_clear"] strong {
  color: #9ef5df;
}

.start-button:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  background: #292929;
  color: rgba(255, 255, 255, 0.56);
  box-shadow: none;
  cursor: default;
}

.start-button:disabled:hover,
.start-button:disabled:active {
  background: #292929;
  box-shadow: none;
  transform: none;
}

.home-smile-button:disabled {
  cursor: default;
  filter: saturate(0.45);
  opacity: 0.72;
}

.summary-learning-gains {
  min-height: 62px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-learning-gains[hidden],
.summary-learning-gain[hidden] {
  display: none !important;
}

.summary-learning-gain {
  min-width: 0;
  padding: 12px 14px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.summary-learning-gain + .summary-learning-gain {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.summary-learning-gain [data-learning-gain-label] {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
}

.summary-learning-gain strong {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.summary-learning-gain [data-learning-gain-value] {
  margin-right: 3px;
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 950;
}

.summary-spoken-sentences {
  padding: 14px 16px;
  border: 1px solid rgba(158, 245, 223, 0.24);
  border-radius: 18px;
  background: rgba(158, 245, 223, 0.07);
}

.summary-spoken-sentences[hidden] {
  display: none !important;
}

.summary-sentence-title {
  margin: 0 0 10px;
  color: #9ef5df;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.summary-sentence-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
}

.summary-sentence {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  font-weight: 820;
  line-height: 1.35;
}

.summary-sentence.is-hardest {
  border: 1px solid rgba(246, 198, 95, 0.5);
  background: rgba(246, 198, 95, 0.12);
  color: #ffffff;
}

.summary-landing-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
}

.summary-landing-button[hidden] {
  display: none !important;
}

body.view-summary .lesson-summary-screen {
  align-items: start;
  padding-block: max(12px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-bottom, 0px));
}

body.view-summary .lesson-summary-panel {
  margin: auto;
}

@media (max-width: 520px) {
  .home-learning-status {
    width: clamp(172px, calc(100vw - 142px), 240px);
    max-width: 100%;
  }

  .summary-learning-gain {
    padding: 11px 10px;
  }

  .summary-learning-gain [data-learning-gain-label] {
    font-size: 0.68rem;
  }
}