/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: light dark;
  --background: #f7f4ee;
  --surface: #fffdfa;
  --surface-soft: #faf7f1;
  --surface-muted: #ece5da;
  --ink: #24211d;
  --ink-muted: #686057;
  --line: #d8cec1;
  --accent: #2f6f63;
  --accent-strong: #1f554b;
  --accent-soft: #edf3ef;
  --accent-line: #cbddd6;
  --accent-wash: rgba(47, 111, 99, 0.1);
  --warm: #b85f3f;
  --danger: #a83f39;
  --danger-line: rgba(168, 63, 57, 0.35);
  --feedback-line: rgba(216, 206, 193, 0.75);
  --flash-background: #e8f2ee;
  --flash-line: #bdd5cd;
  --focus-ring: rgba(47, 111, 99, 0.14);
  --button-ink-on-accent: #fffdfa;
  --shadow: 0 18px 45px rgba(62, 52, 40, 0.12);
}

/* Interactive course */
.course-page {
  background: var(--background);
}

.course {
  margin: 0 auto;
  max-width: 1080px;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 4rem;
}

.course-header {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.course-header h1 {
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  margin: 0.15rem 0 0;
}

.course-header__meta {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 0.7rem;
  justify-content: end;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.course-header__cards {
  color: var(--warm);
}

.course-progress {
  margin-bottom: 1.35rem;
}

.course-progress__track {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 0.32rem;
  overflow: hidden;
}

.course-progress__track span {
  background: var(--accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 300ms ease;
}

.course-layout {
  align-items: start;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: 11rem minmax(0, 42rem);
  justify-content: center;
}

.course-map {
  position: sticky;
  top: 1rem;
}

.course-map__label {
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

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

.course-map__item {
  align-items: center;
  border-left: 2px solid var(--line);
  color: var(--ink-muted);
  display: flex;
  gap: 0.55rem;
  min-height: 2.7rem;
  padding: 0.35rem 0 0.35rem 0.55rem;
}

.course-map__item--current {
  border-left-color: var(--accent);
  color: var(--ink);
}

.course-map__number {
  align-items: center;
  background: var(--surface-muted);
  border-radius: 50%;
  display: flex;
  flex: 0 0 1.45rem;
  font-size: 0.68rem;
  font-weight: 850;
  height: 1.45rem;
  justify-content: center;
  width: 1.45rem;
}

.course-map__item--current .course-map__number,
.course-map__item--complete .course-map__number {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.course-map__item--current .course-map__number {
  background: var(--accent);
  color: var(--button-ink-on-accent);
}

.course-map__section {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.course-map__section strong {
  font-size: 0.76rem;
  line-height: 1.15;
}

.course-map__section small {
  color: var(--ink-muted);
  font-size: 0.65rem;
}

.course-save-link {
  color: var(--accent-strong);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 750;
  margin-top: 1rem;
  text-decoration: none;
}

.course-save-link:hover {
  text-decoration: underline;
}

.course-main {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.course-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  min-width: 0;
  overflow: hidden;
}

.course-card__topline {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: 0.68rem;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: 0.06em;
  padding: 0.85rem 1.25rem 0;
  text-transform: uppercase;
}

.course-card__art {
  margin: 0.75rem 1.25rem 0;
}

.course-card__art img {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  display: block;
  height: auto;
  max-height: 15rem;
  object-fit: contain;
  width: 100%;
}

.course-card__content {
  padding: 1.35rem clamp(1.1rem, 4vw, 1.8rem) 1.5rem;
}

.course-card__eyebrow {
  color: var(--warm);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.course-card h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0 0 0.95rem;
  max-width: 24ch;
}

.course-copy {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 40rem;
}

.course-copy p {
  margin: 0 0 0.85rem;
}

.course-copy p:last-child {
  margin-bottom: 0;
}

.course-script {
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-script__list {
  margin: 0 0 0.85rem;
  padding-left: 1.45rem;
}

.course-script__list li {
  min-width: 0;
  overflow-wrap: anywhere;
  padding-left: 0.15rem;
}

.course-script__list li + li {
  margin-top: 0.35rem;
}

.course-script__centered {
  margin: 0 0 0.85rem;
  text-align: center;
}

.course-script__divider {
  margin: 0;
}

.course-script .course-reveal {
  margin-bottom: 0.45rem;
}

.course-reveals {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.1rem;
}

.course-reveal {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 0.55rem;
  color: var(--accent-strong);
  overflow: hidden;
}

.course-reveal summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 750;
  padding: 0.65rem 0.8rem;
}

.course-reveal p {
  background: var(--surface);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 750;
  margin: 0;
  padding: 0.75rem 0.8rem;
}

.course-room {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  margin-top: 1.15rem;
  padding: 0.9rem;
}

.course-room__answers {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.65rem;
}

.course-quote {
  background: var(--surface);
  border-radius: 0.5rem;
  margin: 0;
  padding: 0.7rem;
}

.course-quote p {
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 0.45rem;
}

.course-quote cite {
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 750;
}

.course-response {
  border-top: 1px solid var(--line);
  margin-top: 1.35rem;
  padding-top: 1.2rem;
}

.course-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.course-fieldset legend {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 0.7rem;
}

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

.course-option__input,
.course-choice-pills__input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.course-option__label {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  cursor: pointer;
  display: flex;
  gap: 0.65rem;
  min-height: 2.9rem;
  padding: 0.6rem 0.75rem;
}

.course-option__label:hover {
  border-color: var(--accent-line);
}

.course-option__input:checked + .course-option__label {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.course-option__input:focus-visible + .course-option__label,
.course-choice-pills__input:focus-visible + .course-choice-pills__label {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.course-option__mark {
  border: 2px solid var(--line);
  border-radius: 50%;
  flex: 0 0 1rem;
  height: 1rem;
  position: relative;
  width: 1rem;
}

.course-option__input:checked + .course-option__label .course-option__mark {
  border-color: var(--accent);
}

.course-option__input:checked + .course-option__label .course-option__mark::after {
  background: var(--accent);
  border-radius: 50%;
  content: "";
  inset: 0.18rem;
  position: absolute;
}

.course-option__label strong {
  display: block;
  font-size: 0.88rem;
}

.course-option__label small {
  color: var(--ink-muted);
  display: block;
  font-size: 0.74rem;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.course-scenario-list {
  display: grid;
  gap: 0.45rem;
}

.course-scenario {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  min-width: 0;
  padding: 0.55rem 0.65rem;
}

.course-scenario__number {
  align-items: center;
  background: var(--surface-muted);
  border-radius: 50%;
  color: var(--ink-muted);
  display: flex;
  font-size: 0.68rem;
  font-weight: 800;
  height: 1.35rem;
  justify-content: center;
  width: 1.35rem;
}

.course-choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}

.course-choice-pills__label {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.25rem 0.45rem;
}

.course-choice-pills__input:checked + .course-choice-pills__label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--button-ink-on-accent);
}

.course-fields {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.course-field {
  display: grid;
  gap: 0.3rem;
}

.course-field .textarea {
  width: 100%;
}

.course-response__footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.1rem;
}

.course-response__hint {
  color: var(--ink-muted);
  font-size: 0.78rem;
  margin: 0;
}

.course-submit {
  flex: 0 0 auto;
}

.course-result {
  align-items: start;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 0.7rem;
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.85rem;
}

.course-result__icon {
  align-items: center;
  background: var(--accent);
  border-radius: 0.5rem;
  color: var(--button-ink-on-accent);
  display: flex;
  flex: 0 0 1.8rem;
  font-weight: 850;
  height: 1.8rem;
  justify-content: center;
}

.course-result__title {
  font-weight: 850;
  margin: 0;
}

.course-result__body {
  color: var(--ink-muted);
  margin: 0.2rem 0 0.65rem;
}

.course-result__next--done {
  pointer-events: none;
}

.course-coach {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
}

.course-coach__copy h2 {
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.course-coach__copy p:last-child {
  color: var(--ink-muted);
  font-size: 0.83rem;
  line-height: 1.4;
  margin: 0.2rem 0 0;
}

.course-coach__form,
.course-coach__answer {
  grid-column: 1 / -1;
}

.course-coach__form {
  align-items: end;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.course-coach__field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.course-coach__field label {
  font-size: 0.82rem;
  font-weight: 750;
}

.course-coach__form .textarea {
  background: var(--surface-soft);
  min-height: 2.8rem;
}

.course-coach__answer {
  background: var(--surface-soft);
  border-radius: 0.5rem;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 0.7rem;
  white-space: pre-line;
}

.course-deck {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.course-deck summary {
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wisdom-card-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.7rem;
}

.wisdom-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  min-height: 10rem;
  overflow: hidden;
  padding: 0.85rem;
  position: relative;
}

.wisdom-card::after {
  background: var(--card-color, var(--accent));
  border-radius: 50%;
  content: "";
  height: 5rem;
  opacity: 0.12;
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  width: 5rem;
}

.wisdom-card__label {
  color: var(--ink-muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

.wisdom-card h3 {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.wisdom-card__subtitle {
  color: var(--card-color, var(--accent-strong));
  font-size: 0.76rem;
  font-weight: 750;
  margin: 0.15rem 0 0.45rem;
}

.wisdom-card > p:last-child {
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
}

.wisdom-card--sunrise { --card-color: #c77b3e; }
.wisdom-card--tide { --card-color: #3f8378; }
.wisdom-card--plum { --card-color: #8b5874; }
.wisdom-card--leaf { --card-color: #5e8c55; }
.wisdom-card--sky { --card-color: #4f7f9e; }
.wisdom-card--gold { --card-color: #a7772f; }
.wisdom-card--coral { --card-color: #be6650; }
.wisdom-card--violet { --card-color: #7665a0; }

@media (max-width: 900px) {
  .course-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-map {
    position: static;
  }

  .course-map__list {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
  }

  .course-map__item {
    border: 1px solid var(--line);
    border-radius: 0.55rem;
    flex: 0 0 auto;
    min-height: 0;
    min-width: 7.7rem;
    padding: 0.45rem 0.55rem;
  }
}

@media (max-width: 640px) {
  .course {
    padding-inline: 0.75rem;
  }

  .course-header {
    align-items: start;
    flex-direction: column;
  }

  .course-header__meta {
    justify-content: start;
  }

  .course-card__art {
    margin-inline: 0.75rem;
  }

  .course-card__content {
    padding: 1.1rem 0.9rem 1.2rem;
  }

  .course-room__answers,
  .wisdom-card-grid {
    grid-template-columns: 1fr;
  }

  .course-scenario {
    align-items: start;
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .course-scenario .course-choice-pills {
    grid-column: 2;
  }

  .course-response__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .course-submit {
    width: 100%;
  }

  .course-coach__form {
    grid-template-columns: 1fr;
  }

  .course-coach__form .button {
    width: 100%;
  }
}

/* Focused course player redesign */
.course {
  margin: 0 auto;
  max-width: 76rem;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) calc(4rem + env(safe-area-inset-bottom));
}

.course-toolbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 auto 1.35rem;
  max-width: 48rem;
}

.course-toolbar__brand {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  min-height: 44px;
  text-decoration: none;
}

.course-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.course-toolbar__button,
.course-dialog__close,
.course-starter,
.course-outline__link {
  min-height: 44px;
}

.course-toolbar__button {
  min-width: 44px;
  padding-inline: 0.85rem;
}

.course-progress {
  margin: 0 auto 2rem;
  max-width: 48rem;
}

.course-progress__label,
.course-dialog__progress-label {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.course-progress__complete {
  color: var(--accent-strong);
}

.course-progress__track {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 0.35rem;
  overflow: hidden;
}

.course-progress__track span {
  background: var(--accent);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 280ms ease;
}

.course-main {
  display: grid;
  gap: 1.5rem;
  margin: 0 auto;
  max-width: 48rem;
  min-width: 0;
}

.course-player,
.course-complete {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(62, 52, 40, 0.06);
  min-width: 0;
  padding: clamp(1.2rem, 4vw, 2.35rem);
}

.course-player__heading {
  margin-bottom: 1.35rem;
}

.course-eyebrow {
  color: var(--warm);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

.course-player h1,
.course-complete h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0;
  max-width: 20ch;
  overflow-wrap: anywhere;
}

.course-status {
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 800;
  margin-top: 0.8rem;
  padding: 0.3rem 0.65rem;
}

.course-player__art {
  margin: 0 0 1.5rem;
}

.course-player__art img {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  display: block;
  height: auto;
  max-height: 22rem;
  object-fit: contain;
  width: 100%;
}

body.course-page .course,
body.course-page .course-main,
body.course-page .course-player {
  min-width: 0;
  max-width: 100%;
}

body.course-page .course-player__art {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.course-copy {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 44rem;
  overflow-wrap: anywhere;
}

.course-copy p {
  margin: 0 0 1rem;
}

.course-copy p:last-child {
  margin-bottom: 0;
}

.course-script__list {
  margin: 0 0 1rem;
  padding-left: 1.45rem;
}

.course-script__list li {
  min-width: 0;
  overflow-wrap: anywhere;
  padding-left: 0.2rem;
}

.course-script__list li + li {
  margin-top: 0.45rem;
}

.course-script__centered {
  margin: 0 0 1rem;
  text-align: center;
}

.course-script__divider {
  margin: 0;
}

.course-reveals {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.1rem;
}

.course-reveal {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 0.55rem;
  color: var(--accent-strong);
  overflow: hidden;
}

.course-reveal summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 750;
  padding: 0.8rem;
}

.course-reveal p {
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  margin: 0;
  padding: 0.8rem;
}

.course-response {
  border-top: 1px solid var(--line);
  margin-top: 1.6rem;
  padding-top: 1.45rem;
}

.course-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.course-fieldset legend {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 0.8rem;
}

.course-option-grid,
.course-fields {
  display: grid;
  gap: 0.65rem;
}

.course-fields {
  margin-top: 1rem;
}

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

.course-field > label {
  font-size: 0.88rem;
  font-weight: 800;
}

.course-field .textarea {
  width: 100%;
}

.course-option__input,
.course-choice-pills__input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.course-option__label {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  cursor: pointer;
  display: flex;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
}

.course-option__label:hover,
.course-choice-pills__label:hover {
  border-color: var(--accent-line);
}

.course-option__input:checked + .course-option__label {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.course-option__input:focus-visible + .course-option__label,
.course-choice-pills__input:focus-visible + .course-choice-pills__label,
.course-dialog button:focus-visible,
.course-dialog a:focus-visible,
.course-toolbar a:focus-visible,
.course-toolbar button:focus-visible,
.course-player a:focus-visible,
.course-player button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.course-option__mark {
  border: 2px solid var(--line);
  border-radius: 50%;
  flex: 0 0 1rem;
  height: 1rem;
  position: relative;
  width: 1rem;
}

.course-option__input:checked + .course-option__label .course-option__mark {
  border-color: var(--accent);
}

.course-option__input:checked + .course-option__label .course-option__mark::after {
  background: var(--accent);
  border-radius: 50%;
  content: "";
  inset: 0.18rem;
  position: absolute;
}

.course-option__label strong {
  display: block;
  font-size: 0.9rem;
}

.course-scenario-list {
  display: grid;
  gap: 0.7rem;
}

.course-scenario {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.9fr);
  min-width: 0;
  padding: 0.65rem;
}

.course-scenario__number {
  align-items: center;
  background: var(--surface-muted);
  border-radius: 50%;
  color: var(--ink-muted);
  display: flex;
  font-size: 0.72rem;
  font-weight: 850;
  height: 1.55rem;
  justify-content: center;
  width: 1.55rem;
}

.course-scenario__prompt {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.course-scenario .course-choice-pills {
  grid-column: 2;
}

.course-choice-pills {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.course-choice-pills__label {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 0.35rem;
  text-align: center;
}

.course-choice-pills__input:checked + .course-choice-pills__label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--button-ink-on-accent);
}

.course-player__footer {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.course-player__footer--review {
  border-top: 1px solid var(--line);
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.25rem;
}

.course-response__hint {
  color: var(--ink-muted);
  font-size: 0.82rem;
  margin: 0;
}

.course-submit {
  min-width: 12rem;
}

.course-response__error {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid var(--danger-line);
  border-radius: 0.55rem;
  color: var(--danger);
  font-size: 0.86rem;
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.8rem;
}

.course-complete__lead {
  font-size: 1.35rem;
  font-weight: 750;
  line-height: 1.3;
  margin: 1.25rem 0 0.75rem;
}

.course-complete > p:not(.course-eyebrow) {
  max-width: 39rem;
}

.course-complete__actions {
  margin-top: 1.5rem;
}

.course-complete__deck {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.course-section-heading h2 {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  margin: 0;
}

.course-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  color: var(--ink);
  margin: auto;
  max-height: min(46rem, calc(100dvh - 2rem));
  max-width: min(42rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}

.course-dialog::backdrop {
  background: rgba(36, 33, 29, 0.48);
}

.course-dialog[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.course-dialog--ask[open] {
  grid-template-rows: auto minmax(0, 1fr);
}

.course-dialog__header,
.course-dialog__progress,
.course-outline,
.course-dialog__signin,
.course-dialog > .course-deck,
.course-dialog__description,
.course-dialog > .course-coach__form,
.course-dialog > .course-coach__answer,
.course-dialog__body {
  margin-inline: clamp(1rem, 4vw, 1.5rem);
}

.course-dialog__body {
  min-height: 0;
  overflow-y: auto;
  padding-block: 1rem calc(1rem + env(safe-area-inset-bottom));
}

.course-dialog__body > .course-dialog__description,
.course-dialog__body > .course-starters,
.course-dialog__body > .course-coach__form,
.course-dialog__body > .course-coach__answer {
  margin-inline: 0;
}

.course-dialog__header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1.25rem 1rem;
}

.course-dialog h2 {
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0;
}

.course-dialog__close {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  padding: 0.45rem 0.75rem;
}

.course-dialog__progress {
  padding-top: 1rem;
}

.course-dialog__progress-label {
  font-size: 0.75rem;
}

.course-outline {
  min-height: 0;
  overflow-y: auto;
  padding-block: 1rem;
}

.course-outline__section + .course-outline__section {
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 1rem;
}

.course-outline__section-heading {
  align-items: baseline;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
}

.course-outline__section-heading h3 {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.course-outline__section-heading > span {
  color: var(--ink-muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.course-outline__lessons {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

.course-outline__lesson {
  min-width: 0;
}

.course-outline__link {
  align-items: center;
  border-radius: 0.45rem;
  color: var(--ink-muted);
  display: flex;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.35rem 0.4rem;
  text-decoration: none;
}

.course-outline__link:hover {
  background: var(--accent-wash);
  color: var(--ink);
}

.course-outline__lesson--complete .course-outline__link,
.course-outline__lesson--current .course-outline__link {
  color: var(--ink);
}

.course-outline__lesson--current .course-outline__link {
  background: var(--accent-soft);
  font-weight: 800;
}

.course-outline__lesson--resume .course-outline__link {
  color: var(--ink);
  font-weight: 800;
}

.course-outline__link--locked {
  cursor: not-allowed;
  opacity: 0.65;
}

.course-outline__mark {
  align-items: center;
  background: var(--surface-muted);
  border-radius: 50%;
  color: var(--ink-muted);
  display: flex;
  flex: 0 0 1.7rem;
  font-size: 0.7rem;
  font-weight: 850;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.course-outline__lesson--complete .course-outline__mark,
.course-outline__lesson--current .course-outline__mark {
  background: var(--accent);
  color: var(--button-ink-on-accent);
}

.course-outline__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-outline__title small {
  color: var(--ink-muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 0.05rem;
}

.course-dialog__signin {
  border-top: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 800;
  padding-block: 1rem;
  text-decoration: none;
}

.course-dialog > .course-deck {
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding-block: 1rem;
}

.course-dialog__description {
  color: var(--ink-muted);
  margin-block: 1rem 0;
}

.course-starters {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1rem clamp(1rem, 4vw, 1.5rem) 0;
}

.course-starter {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
  padding: 0.55rem;
}

.course-starter:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.course-dialog__body > .course-coach__form {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.course-dialog__body > .course-coach__form .textarea {
  min-height: 7rem;
}

.course-dialog__footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.course-coach__status {
  color: var(--ink-muted);
  font-size: 0.8rem;
  margin: 0;
}

.course-dialog__body > .course-coach__answer {
  background: var(--surface-soft);
  border-radius: 0.55rem;
  line-height: 1.5;
  margin-top: 1rem;
  padding: 0.8rem;
  white-space: pre-line;
}

.course-deck summary {
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding-block: 0.2rem;
  text-transform: uppercase;
}

.wisdom-card-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.8rem;
}

.wisdom-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  min-height: 10rem;
  overflow: hidden;
  padding: 0.85rem;
  position: relative;
}

.wisdom-card::after {
  background: var(--card-color, var(--accent));
  border-radius: 50%;
  content: "";
  height: 5rem;
  opacity: 0.12;
  position: absolute;
  right: -1.5rem;
  top: -1.5rem;
  width: 5rem;
}

.wisdom-card__label {
  color: var(--ink-muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

.wisdom-card h3 {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.wisdom-card__subtitle {
  color: var(--card-color, var(--accent-strong));
  font-size: 0.76rem;
  font-weight: 750;
  margin: 0.15rem 0 0.45rem;
}

.wisdom-card > p:last-child {
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 640px) {
  .course {
    padding-inline: 0.75rem;
  }

  .course-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.7rem;
  }

  .course-toolbar__actions {
    width: 100%;
  }

  .course-toolbar__button {
    flex: 1 1 0;
  }

  .course-player,
  .course-complete {
    border-radius: 0.7rem;
    padding: 1rem;
  }

  .course-player h1,
  .course-complete h1 {
    font-size: clamp(1.7rem, 9vw, 2.4rem);
    max-width: none;
  }

  .course-scenario {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .course-scenario__prompt,
  .course-scenario .course-choice-pills {
    grid-column: 1;
  }

  .course-choice-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-player__footer,
  .course-player__footer--review {
    align-items: stretch;
    flex-direction: column;
  }

  .course-submit,
  .course-player__footer .button {
    width: 100%;
  }

  .course-starters {
    grid-template-columns: 1fr;
  }

  .course-starter {
    text-align: left;
  }

  .course-dialog {
    border-radius: 1rem 1rem 0 0;
    margin: auto 0 0;
    max-height: calc(100dvh - 0.5rem);
    max-width: none;
  }

  .course-dialog__header {
    padding-bottom: 0.85rem;
  }

  .course-dialog__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .course-dialog__footer .button {
    width: 100%;
  }

  .course-dialog__body {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .wisdom-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .course-choice-pills {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 600px) {
  .course-dialog {
    max-height: calc(100dvh - 0.5rem);
  }

  .course-dialog__header {
    padding-block: 0.75rem;
  }

  .course-outline {
    padding-block: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-progress__track span {
    transition: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: clip;
}

a {
  color: inherit;
}

label {
  color: var(--ink-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.app-shell__header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem);
}

.app-shell__brand {
  flex: 0 1 auto;
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
}

.app-shell__nav {
  display: flex;
  flex: 1 1 30rem;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  min-width: 0;
}

.app-shell__account {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: 0.82rem;
  gap: 0.65rem;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.app-shell__account form {
  flex: 0 0 auto;
}

.app-shell__nav a,
.text-link {
  border-radius: 6px;
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 650;
  padding: 0.35rem 0.55rem;
  text-decoration: none;
}

.app-shell__nav-link {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
}

.app-shell__nav a:hover,
.text-link:hover {
  background: var(--accent-wash);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.text-button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--accent-strong);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  padding: 0.35rem 0.55rem;
  white-space: nowrap;
}

.text-button:hover {
  background: var(--accent-wash);
}

.text-button--danger {
  color: var(--danger);
}

.text-button--danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.app-shell__nav-link--active,
.app-shell__nav-link--active:hover {
  background: var(--accent-wash);
}

.app-shell__nav-link--attention,
.app-shell__nav-link--attention:hover {
  background: color-mix(in srgb, var(--warm) 15%, var(--surface));
  color: var(--warm);
}

.nav-badge {
  align-items: center;
  background: var(--warm);
  border-radius: 999px;
  color: var(--button-ink-on-accent);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0.08rem 0.35rem;
}

.beta-badge {
  align-items: center;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.38rem 0.55rem;
  white-space: nowrap;
}

.app-shell__beta-badge-standalone {
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0.55rem clamp(1rem, 4vw, 3rem) 0;
  width: 100%;
}

.app-shell {
  flex: 1 0 auto;
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(1rem, 4vw, 3rem);
  width: 100%;
}

.compose-panel {
  min-width: 0;
}

.compose-panel__lede {
  max-width: 34rem;
}

.flash {
  background: var(--flash-background);
  border: 1px solid var(--flash-line);
  border-radius: 6px;
  color: var(--accent-strong);
  margin: 1rem auto 0;
  max-width: 1180px;
  padding: 0.75rem 1rem;
  width: calc(100% - 2rem);
}

.flash--alert {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  border-color: var(--danger-line);
  color: var(--danger);
}

.auth-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin: min(10vh, 5rem) auto 0;
  max-width: 34rem;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.auth-panel--goodbye {
  text-align: center;
}

.auth-panel h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  margin: 0 0 0.75rem;
}

.auth-panel__notice {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  margin: 0 0 1rem;
  padding: 0.75rem;
}

.auth-panel__notice span {
  color: var(--ink-muted);
}

.lede {
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}

.home-grid,
.conversation-layout,
.communication-layout {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 330px;
}

.compose-panel {
  padding-top: min(8vh, 5rem);
}

.compose-panel h1,
.conversation-header h1,
.page-header h1 {
  font-size: clamp(2rem, 5vw, 4.25rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 1.25rem;
}

.page-header h1,
.conversation-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.75rem);
}

.eyebrow {
  color: var(--warm);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 0.45rem;
  text-transform: uppercase;
}

.stack {
  display: grid;
  gap: 0.8rem;
}

.inline-form {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 150px minmax(0, 1fr) auto;
}

.inline-form--user {
  grid-template-columns: minmax(14rem, 1.5fr) minmax(10rem, 1fr) 9rem auto auto;
}

.inline-form--player {
  grid-template-columns: minmax(14rem, 1fr) auto;
}

.check-label {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
  min-height: 2.75rem;
}

.textarea,
.input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  padding: 0.85rem 0.95rem;
  width: 100%;
}

.textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.textarea--large {
  min-height: 14rem;
}

.textarea:focus,
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

.input--danger:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 750;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.button:disabled {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink-muted);
  cursor: default;
  opacity: 0.72;
}

.textarea:disabled {
  cursor: default;
  opacity: 0.6;
}

.button--primary {
  background: var(--accent);
  color: var(--button-ink-on-accent);
}

.button--primary:hover:not(:disabled) {
  background: var(--accent-strong);
}

.button--secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

.button--danger {
  background: transparent;
  border-color: var(--danger-line);
  color: var(--danger);
  margin-top: 1rem;
}

.button--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.button-row .button--danger {
  margin-top: 0;
}

.button--compact {
  font-size: 0.78rem;
  margin-top: 0;
  padding: 0.35rem 0.55rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.side-rail,
.conversation-tools {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}

.rail-section,
.tool-section,
.edit-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.tool-section h2,
.rail-section h2 {
  font-size: 1rem;
  margin: 0;
}

.section-heading,
.conversation-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.page-header .section-heading {
  align-items: end;
  flex-wrap: wrap;
}

.content-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 1.5rem);
}

.conversation-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.conversation-main {
  min-width: 0;
}

.conversation-page {
  height: 100dvh;
  overflow: hidden;
}

.conversation-page .app-shell {
  display: flex;
  flex: 1 1 auto;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding-block: clamp(0.75rem, 2vh, 1.25rem);
}

.conversation-page .conversation-layout {
  align-items: stretch;
  flex: 1;
  margin: 0 auto;
  max-width: 1180px;
  min-height: 0;
  width: 100%;
}

.conversation-page .conversation-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.conversation-page .message-list {
  flex: 1 1 auto;
  margin-bottom: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0.25rem 1rem 0;
  scroll-padding-block: 1rem;
}

.conversation-page .composer,
.composer--initial {
  align-items: end;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.45rem;
}

.conversation-page .composer .button,
.composer--initial .button {
  min-height: 2.75rem;
  padding-inline: 1.05rem;
}

.composer__input {
  field-sizing: content;
  max-height: 11rem;
  min-height: 2.75rem;
  overflow-y: auto;
  resize: none;
}

.conversation-page .conversation-header {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
}

.conversation-page .conversation-header h1 {
  display: -webkit-box;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.18;
  margin: 0;
  max-width: 46rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conversation-page .conversation-header .eyebrow {
  font-size: 0.68rem;
  margin-bottom: 0.15rem;
}

.conversation-page .conversation-tools {
  align-content: start;
  max-height: 100%;
  overflow-y: auto;
  position: static;
}

.message-list {
  align-content: start;
  align-items: start;
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.message {
  box-sizing: border-box;
  border-radius: 8px;
  max-width: min(760px, calc(100% - clamp(3.5rem, 24%, 12rem)));
  padding: 0.9rem 1rem;
  overflow-wrap: anywhere;
  width: fit-content;
}

.message p {
  margin: 0;
}

.message--user {
  background: var(--accent);
  color: var(--button-ink-on-accent);
  justify-self: end;
}

.message--assistant {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

.message--system {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

.message-retry {
  margin-top: 0.75rem;
}

.message--pending {
  opacity: 0.72;
}

.message--loading {
  align-items: center;
  display: inline-flex;
  gap: 0.35rem;
  min-height: 2.8rem;
  padding-inline: 0.95rem;
  width: fit-content;
}

.message--loading span {
  animation: typing-dot 1s infinite ease-in-out;
  background: var(--ink-muted);
  border-radius: 999px;
  display: block;
  height: 0.45rem;
  opacity: 0.35;
  width: 0.45rem;
}

.message--loading span:nth-child(2) {
  animation-delay: 0.15s;
}

.message--loading span:nth-child(3) {
  animation-delay: 0.3s;
}

.mini-spinner {
  animation: spin 0.8s linear infinite;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent);
  border-radius: 999px;
  display: inline-block;
  height: 1rem;
  width: 1rem;
}

.message-edit,
.message-feedback {
  border-top: 1px solid var(--feedback-line);
  margin-top: 0.75rem;
  padding-top: 0.6rem;
}

.message-edit summary,
.message-feedback summary {
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}

.message--user .message-edit {
  border-top-color: color-mix(in srgb, currentColor 28%, transparent);
}

.message--user .message-edit summary {
  color: inherit;
}

.message-edit__form,
.message-feedback__form {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.65rem;
}

@keyframes typing-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-0.18rem);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.composer {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
}

.list-stack {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.list-row,
.editable-row {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0.75rem 0.85rem;
  text-decoration: none;
}

.list-row small {
  color: var(--ink-muted);
  flex: 0 0 auto;
}

.list-row--with-actions {
  padding: 0.45rem;
}

.list-row__main {
  align-items: center;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  gap: 0.75rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  text-decoration: none;
}

.list-row__main span {
  min-width: 0;
}

.editable-row--split {
  padding: 0.45rem;
}

.editable-row__main {
  align-items: center;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  gap: 0.75rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  text-decoration: none;
}

.editable-row__main span {
  min-width: 0;
}

.editable-row__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.editable-row__actions form {
  margin: 0;
}

.memory-row__content {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.memory-visibility-label {
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.memory-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.memory-preview span {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 0.82rem;
  padding: 0.28rem 0.55rem;
}

.empty-state,
.note {
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
}

.note {
  color: var(--ink);
}

.account-page,
.account-delete {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  max-width: 760px;
}

.account-page__header,
.account-delete__header {
  padding-bottom: 0.35rem;
}

.account-page__header h1,
.account-delete__header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 0.75rem;
}

.account-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: clamp(1rem, 3vw, 1.35rem);
}

.account-card--delete {
  align-items: stretch;
  display: grid;
}

.account-card--exit {
  border-color: color-mix(in srgb, var(--line) 70%, var(--danger) 30%);
}

.account-card h2 {
  font-size: 1.1rem;
  margin: 0 0 0.35rem;
}

.account-card p {
  color: var(--ink-muted);
  margin: 0;
}

.status-pill {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent-strong);
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 0.3rem 0.65rem;
}

.status-pill--attention {
  background: color-mix(in srgb, var(--warm) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--warm) 38%, var(--line));
  color: var(--warm);
}

.usage-meter {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.usage-meter p {
  display: grid;
  gap: 0.1rem;
  margin: 0;
}

.usage-meter span,
.usage-card span,
.usage-card small,
.editable-row small {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.usage-meter meter {
  height: 0.75rem;
  width: 100%;
}

.usage-row {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  padding: 0.55rem 0.7rem;
}

.usage-row--blocked,
.usage-row--failed {
  border-color: var(--danger-line);
  color: var(--danger);
}

.usage-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9rem;
}

.usage-billing-frame {
  display: contents;
}

.usage-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  min-height: 7rem;
  padding: 0.9rem;
}

.usage-card--loading strong {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

.usage-card strong {
  font-size: 1.55rem;
}

.memory-layout {
  display: grid;
  gap: 1rem;
}

.gratitude-layout {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  max-width: 980px;
}

.gratitude-capture {
  max-width: 720px;
}

.gratitude-capture h2,
.joy-subscription-panel h2 {
  font-size: 1.15rem;
  margin: 0;
}

.gratitude-columns {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.joy-subscription-list,
.gratitude-entry-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.joy-subscription-card,
.gratitude-entry-row,
.joy-subscription-panel {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.85rem;
}

.joy-subscription-card h3 {
  font-size: 0.98rem;
  margin: 0;
}

.joy-subscription-card p,
.gratitude-entry-row p {
  margin: 0.5rem 0 0;
}

.joy-subscription-card__label,
.joy-subscription-panel__label {
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.joy-subscription-card__examples {
  color: var(--ink-muted);
  font-size: 0.82rem;
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.gratitude-entry-row {
  display: grid;
  gap: 0.35rem;
}

.joy-subscription-panel {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.joy-subscription-panel .lede {
  margin: 0;
}

.joy-subscription-disclosure {
  border-top: 1px solid var(--line);
  padding-top: 0.35rem;
}

.joy-subscription-disclosure summary {
  cursor: pointer;
  display: list-item;
  font-weight: 750;
  min-height: 44px;
  padding: 0.25rem 0;
}

.joy-subscription-disclosure summary:focus-visible {
  border-radius: 0.35rem;
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.joy-subscription-disclosure__body {
  display: grid;
  gap: 0.6rem;
  padding: 0.35rem 0 0.25rem;
}

.joy-subscription-panel__saved,
.joy-subscription-panel__existing {
  display: grid;
  gap: 0.35rem;
}

.joy-subscription-panel__saved {
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}

.joy-subscription-panel__label {
  margin: 0;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag {
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
}

.edit-panel__examples {
  border-top: 1px solid var(--line);
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.edit-panel__examples h2 {
  font-size: 1rem;
  margin: 0;
}

.feedback-row {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
}

.feedback-row small {
  color: var(--ink-muted);
  display: block;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.feedback-detail {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 360px;
}

.feedback-detail__conversation {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.public-page {
  --public-max: 1080px;
}

.public-page .app-shell {
  max-width: none;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.public-hero {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
  margin: 0 auto;
  max-width: var(--public-max);
  min-height: min(70svh, 44rem);
  padding-block: clamp(2rem, 8vw, 6rem);
}

.public-hero--workshop {
  grid-template-columns: minmax(0, 44rem);
  justify-content: start;
  min-height: auto;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.public-hero h1 {
  font-size: clamp(2.5rem, 8vw, 6.25rem);
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0;
  max-width: 11ch;
}

.public-hero__lede {
  color: var(--ink-muted);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.45;
  margin: 1.25rem 0 1.5rem;
  max-width: 42rem;
}

.public-mark {
  align-items: center;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
}

.public-mark img {
  height: auto;
  max-width: min(100%, 11rem);
}

.public-copy {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 auto;
  max-width: 760px;
}

.public-section {
  border-top: 1px solid var(--line);
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.public-section h2 {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 0.8rem;
}

.public-section h3 {
  color: var(--warm);
  font-size: 1.05rem;
  letter-spacing: 0;
  margin: 1.1rem 0 0.35rem;
  text-transform: uppercase;
}

.public-section p {
  margin: 0 0 1rem;
}

.public-section p:last-child {
  margin-bottom: 0;
}

.public-section--jay {
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

.workshop-script {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin: 0 auto;
  max-width: 980px;
  padding-bottom: clamp(2rem, 6vw, 5rem);
}

.workshop-script__header {
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

.workshop-script__header h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

.workshop-script__heading {
  border-top: 1px solid var(--line);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  letter-spacing: 0;
  line-height: 1.05;
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 0;
  padding-top: clamp(1rem, 3vw, 1.75rem);
}

.workshop-script__text {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.65;
  margin: 0;
}

.workshop-script__text p {
  margin: 0 0 1rem;
}

.workshop-script__text p:last-child,
.workshop-script__list:last-child {
  margin-bottom: 0;
}

.workshop-script__list {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

.workshop-script__list li + li {
  margin-top: 0.35rem;
}

.workshop-reveal-list {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.workshop-reveal-list__hint {
  color: var(--ink-muted);
  font-size: 0.95em;
  margin: 0;
}

.workshop-reveal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.workshop-reveal__button {
  background: var(--accent-soft);
  border: 0;
  color: var(--accent-strong);
  cursor: pointer;
  display: block;
  font: inherit;
  font-weight: 750;
  padding: 0.85rem 1rem;
  text-align: left;
  width: 100%;
}

.workshop-reveal__button:hover,
.workshop-reveal__button:focus-visible {
  background: var(--accent-wash);
  outline: none;
}

.workshop-reveal__button:disabled {
  cursor: default;
}

.workshop-reveal__answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 260ms ease, opacity 220ms ease;
}

.workshop-reveal__answer p {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  font-weight: 750;
  line-height: 1.18;
  margin: 0;
  padding: 1rem;
}

.workshop-script__slide {
  margin: clamp(0.75rem, 2vw, 1.25rem) 0;
  min-width: 0;
}

.workshop-script__slide img {
  aspect-ratio: 16 / 9;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.workshop-script__slide figcaption {
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin-top: 0.45rem;
}

.memory-columns {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edit-panel {
  margin: 0 auto;
  max-width: 760px;
  width: 100%;
}

@media (max-width: 860px) {
  .home-grid,
  .conversation-layout,
  .communication-layout,
  .gratitude-columns,
  .memory-columns,
  .feedback-detail,
  .inline-form,
  .usage-grid,
  .public-hero {
    grid-template-columns: 1fr;
  }

  .account-card {
    align-items: stretch;
    display: grid;
  }

  .public-hero {
    min-height: auto;
  }

  .public-mark {
    max-width: 16rem;
  }

  .conversation-page {
    overflow: auto;
  }

  .conversation-page .app-shell {
    overflow: visible;
  }

  .conversation-page .conversation-main {
    min-height: calc(100dvh - 8rem);
  }

  .side-rail,
  .conversation-tools {
    position: static;
  }

  .compose-panel {
    padding-top: 1rem;
  }

  .app-shell__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-shell__nav,
  .app-shell__account {
    flex: 0 0 auto;
    justify-content: flex-start;
    width: 100%;
  }
}

.legal-page {
  margin: 0 auto;
  max-width: 48rem;
  padding: 2rem 1rem 4rem;
}

.legal-document {
  line-height: 1.65;
}

.legal-document h2 {
  margin-top: 2rem;
}

.legal-document li + li {
  margin-top: 0.55rem;
}

.legal-acceptance,
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.check-row,
.privacy-choice {
  align-items: flex-start;
  display: flex;
  gap: 0.65rem;
  line-height: 1.45;
}

.check-row + .check-row {
  margin-top: 1rem;
}

.privacy-choice {
  grid-column: 1 / -1;
}

.privacy-note {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0.4rem 0 1rem;
}

.conversation-header__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-errors {
  border: 1px solid var(--danger-line);
  border-radius: 0.75rem;
  color: var(--danger);
  padding: 0.75rem 1rem;
}

.form-error {
  margin: 0.25rem 0;
}

.app-footer {
  color: var(--ink-muted);
  font-size: 0.9rem;
  padding: 1.5rem;
  text-align: center;
}

.review-card {
  margin: 1.5rem 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #171512;
    --surface: #24211d;
    --surface-soft: #201d19;
    --surface-muted: #312c25;
    --ink: #f4eee5;
    --ink-muted: #c1b6a8;
    --line: #4a4237;
    --accent: #5fa99a;
    --accent-strong: #8bc8bb;
    --accent-soft: #1f332f;
    --accent-line: #355e56;
    --accent-wash: rgba(95, 169, 154, 0.16);
    --warm: #de9271;
    --danger: #ee9a92;
    --danger-line: rgba(238, 154, 146, 0.45);
    --feedback-line: rgba(74, 66, 55, 0.85);
    --flash-background: #1f332f;
    --flash-line: #355e56;
    --focus-ring: rgba(95, 169, 154, 0.22);
    --button-ink-on-accent: #111d1a;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
  }
}

/* Conversation shell: one page scroll, with a light sticky composer. */
.composer {
  background: var(--surface);
  background-color: var(--surface);
}

.app-shell__header {
  align-items: center;
  flex-wrap: nowrap;
  min-height: 3.75rem;
  position: relative;
  z-index: 10;
}

.app-shell__brand {
  font-size: 0.95rem;
}

.app-menu {
  margin-left: auto;
  position: relative;
}

.app-menu summary {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  list-style: none;
  padding: 0.42rem 0.75rem;
}

.app-menu summary::-webkit-details-marker {
  display: none;
}

.app-menu summary::after {
  content: "☰";
  font-size: 0.95rem;
  margin-left: 0.45rem;
}

.app-menu[open] summary {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent-strong);
}

.app-menu__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: var(--shadow);
  min-width: 17rem;
  padding: 0.55rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.55rem);
}

.app-shell__nav {
  display: grid;
  gap: 0.2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-shell__nav a {
  min-width: 0;
  overflow: hidden;
  padding: 0.55rem 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell__account {
  align-items: center;
  border-top: 1px solid var(--line);
  flex: none;
  justify-content: flex-start;
  margin-top: 0.45rem;
  padding: 0.55rem 0.65rem 0.1rem;
}

.flash {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 0.65rem;
  padding: 0.55rem 0.75rem;
}

.flash__dismiss {
  background: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
}

.conversation-page {
  height: auto;
  overflow: visible;
}

.conversation-page .app-shell {
  display: block;
  flex: none;
  max-width: 860px;
  min-height: 0;
  overflow: visible;
  padding-block: clamp(1rem, 3vw, 2rem);
}

.conversation-page .conversation-layout {
  display: block;
  max-width: 760px;
}

.conversation-page .conversation-main {
  display: block;
  min-height: 0;
}

.conversation-page .conversation-header {
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
}

.conversation-page .conversation-header h1 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  max-width: 52rem;
}

.conversation-page .message-list {
  margin-bottom: 1rem;
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding: 0 0 0.5rem;
  scroll-padding-block: 0;
}

.conversation-page .composer {
  align-items: stretch;
  background: linear-gradient(to bottom, transparent, var(--background) 1rem);
  border: 0;
  border-radius: 0;
  border-top: 0;
  bottom: 0;
  display: block;
  margin: 0 -0.5rem;
  padding: 1.25rem 0.5rem 0.5rem;
  position: sticky;
  z-index: 4;
}

.composer__message-form {
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.42rem;
}

.composer--initial {
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.42rem;
}

.composer--initial .composer__input {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
}

.composer--initial .composer__input:focus {
  box-shadow: none;
}

.composer--initial .button {
  border-radius: 999px;
  min-height: 2.35rem;
  padding-inline: 0.95rem;
}

.composer--initial .composer__footer {
  grid-column: 1 / -1;
}

.composer--initial .privacy-choice {
  align-items: center;
  color: var(--ink-muted);
  display: inline-flex;
  font-size: 0.76rem;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}

.composer--initial .privacy-choice span {
  min-width: 0;
}

.composer__message-form .composer__input {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
}

.composer__message-form .composer__input:focus {
  box-shadow: none;
}

.composer__message-form .button {
  border-radius: 999px;
  min-height: 2.35rem;
  padding-inline: 0.95rem;
}

.composer__footer {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  min-height: 1.55rem;
  padding: 0.2rem 0.7rem 0;
}

.voice-controls {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-height: 2.1rem;
  margin-bottom: 0.45rem;
}

.voice-controls .button {
  flex: 0 0 auto;
}

.voice-wave {
  align-items: center;
  display: inline-flex;
  gap: 2px;
  height: 1.25rem;
  justify-content: center;
  width: 2rem;
}

.voice-wave i {
  background: var(--accent);
  border-radius: 999px;
  display: block;
  height: 1rem;
  opacity: 0.35;
  transform: scaleY(0.3);
  transition: opacity 150ms ease;
  width: 3px;
}

.voice-wave--active i {
  opacity: 1;
}

.voice-option {
  align-items: center;
  display: inline-flex;
  font-size: 0.74rem;
  gap: 0.3rem;
  min-height: 44px;
  white-space: nowrap;
}

.voice-option select {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  height: 44px;
  min-height: 44px;
  padding-inline: 0.5rem;
}

.voice-option--checkbox {
  gap: 0.4rem;
  min-height: 44px;
}

.voice-option--checkbox input {
  accent-color: var(--accent);
  min-height: 1rem;
  min-width: 1rem;
}

.voice-option__hint {
  flex: 1 1 14rem;
  font-size: 0.74rem;
  min-width: 12rem;
}

.voice-controls .composer__hint:not(.voice-status) {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-status {
  flex: 1 1 100%;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.voice-option select:focus-visible,
.voice-option--checkbox input:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.voice-controls audio {
  display: none;
}

.privacy-toggle {
  display: inline-flex;
}

.composer__privacy {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0;
}

.composer__privacy:hover {
  color: var(--accent-strong);
}

.composer__hint {
  color: var(--ink-muted);
  font-size: 0.74rem;
}

.conversation-page .conversation-tools {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  position: static;
}

@media (max-width: 860px) {
  .app-shell__header {
    flex-direction: row;
  }

  .app-shell__nav,
  .app-shell__account {
    width: auto;
  }

  .app-menu__panel {
    max-width: calc(100vw - 2rem);
  }

  .conversation-page .app-shell {
    padding-inline: 1rem;
  }
}

@media (max-width: 520px) {
  .app-shell__header {
    padding: 0.75rem 1rem;
  }

  .app-shell__brand {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-menu__panel {
    min-width: min(17rem, calc(100vw - 2rem));
  }

  .conversation-page .conversation-header {
    gap: 0.5rem;
  }

  .conversation-page .conversation-header .eyebrow {
    font-size: 0.62rem;
  }

  .conversation-page .conversation-header h1 {
    font-size: 1.2rem;
  }

  .message {
    max-width: calc(100% - 2rem);
    padding: 0.75rem 0.85rem;
  }

  .composer__footer {
    padding-inline: 0.65rem;
  }
}

/* Native-ready app shell and focused conversation viewport. */
[hidden] {
  display: none !important;
}

.app-navigation {
  position: relative;
  z-index: 30;
}

.app-navigation .app-shell__header {
  position: relative;
  z-index: 60;
}

.app-shell__header {
  min-height: 3.75rem;
  padding-block: max(0.75rem, env(safe-area-inset-top)) 0.75rem;
}

.app-shell__header--conversation {
  gap: 0.35rem;
  justify-content: flex-start;
}

.app-shell__context-title {
  flex: 1;
  font-size: 0.96rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell__back {
  align-items: center;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 2rem;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  width: 2rem;
}

.app-nav-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.65rem;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 2.75rem;
  flex-direction: column;
  gap: 0.28rem;
  height: 2.75rem;
  justify-content: center;
  margin-left: auto;
  padding: 0.5rem;
}

.app-nav-toggle:hover,
.app-nav-toggle:focus-visible {
  background: var(--accent-wash);
}

.app-nav-toggle__line {
  background: currentColor;
  border-radius: 999px;
  display: block;
  height: 2px;
  transition: transform 160ms ease, opacity 160ms ease;
  width: 1.2rem;
}

.app-nav-toggle[aria-expanded="true"] .app-nav-toggle__line:first-child {
  transform: translateY(0.38rem) rotate(45deg);
}

.app-nav-toggle[aria-expanded="true"] .app-nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.app-nav-toggle[aria-expanded="true"] .app-nav-toggle__line:last-child {
  transform: translateY(-0.38rem) rotate(-45deg);
}

.app-navigation__scrim,
.conversation-tools__scrim {
  background: rgba(0, 0, 0, 0.48);
  inset: 0;
  position: fixed;
  z-index: 40;
}

.app-navigation__drawer {
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  inset: 0 auto 0 0;
  max-width: min(22rem, calc(100vw - 2.5rem));
  overflow-y: auto;
  padding: calc(4.5rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  position: fixed;
  width: min(22rem, calc(100vw - 2.5rem));
  z-index: 50;
}

.app-navigation__drawer .app-shell__nav {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.app-navigation__drawer .app-shell__nav-link {
  align-items: center;
  border-radius: 0.8rem;
  box-sizing: border-box;
  display: flex;
  font-size: 1rem;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.8rem 0.9rem;
  position: relative;
  width: 100%;
}

.app-navigation__drawer .app-shell__nav-mark {
  flex: 0 0 1.65rem;
}

.app-navigation__drawer .app-shell__nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-navigation__drawer .app-shell__nav-link--active {
  background: var(--accent-wash);
}

.app-navigation__drawer .app-shell__nav-link--active .app-shell__nav-mark {
  background: var(--accent);
  color: var(--button-ink-on-accent);
}

.app-navigation__drawer .nav-badge {
  background: var(--danger);
  border: 2px solid var(--surface);
  box-sizing: border-box;
  font-size: 0.72rem;
  height: 1.25rem;
  left: calc(0.9rem + 1.05rem);
  min-width: 1.25rem;
  padding: 0;
  position: absolute;
  top: calc(50% - 1.15rem);
  width: 1.25rem;
}

.app-navigation__drawer .app-shell__account {
  align-items: flex-start;
  border-top: 1px solid var(--line);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: flex-start;
  margin-top: auto;
  padding: 1rem 0 calc(0.5rem + env(safe-area-inset-bottom));
  width: 100%;
}

.app-navigation__drawer .app-shell__account-link {
  border-radius: 0.8rem;
  box-sizing: border-box;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.8rem 0.9rem;
  width: 100%;
}

.app-navigation__drawer .app-shell__account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-navigation__drawer .app-shell__account form:has(.app-shell__sign-out) {
  width: 100%;
}

.app-navigation__drawer .app-shell__beta-footer {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  justify-content: center;
  padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom));
  text-align: center;
  width: 100%;
}

.app-navigation__drawer .app-shell__sign-out {
  border-radius: 0.8rem;
  box-sizing: border-box;
  min-height: 3.5rem;
  padding: 0.8rem 0.9rem;
  width: 100%;
}

.app-navigation__drawer .app-shell__nav-link:hover,
.app-navigation__drawer .app-shell__nav-link:focus-visible,
.app-navigation__drawer .app-shell__account-link:hover,
.app-navigation__drawer .app-shell__account-link:focus-visible,
.app-navigation__drawer .app-shell__sign-out:hover,
.app-navigation__drawer .app-shell__sign-out:focus-visible {
  background: var(--accent-wash);
}

body.navigation-open,
body.conversation-tools-open {
  overflow: hidden;
}

html:has(dialog[open]),
body:has(dialog[open]) {
  overflow: hidden;
  overscroll-behavior: none;
}

html:has(dialog[open]) {
  scrollbar-gutter: stable;
}

.screen-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.screen-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  margin: 0 0 0.35rem;
}

.screen-header .lede {
  margin-bottom: 0;
  max-width: 42rem;
}

.icon-button {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 2.85rem;
  font-size: 1.65rem;
  height: 2.85rem;
  justify-content: center;
  text-decoration: none;
  width: 2.85rem;
}

.icon-button--accent {
  background: var(--accent);
  border-color: transparent;
  color: var(--button-ink-on-accent);
}

.conversation-inbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.conversation-list {
  display: grid;
}

.conversation-row {
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-width: 0;
}

.conversation-row:last-child {
  border-bottom: 0;
}

.conversation-row__main {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 1rem 0.9rem;
  text-decoration: none;
  flex: 1;
}

.conversation-row__main:hover {
  background: var(--accent-wash);
}

.conversation-row__title {
  font-size: 1rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-row__preview {
  color: var(--ink-muted);
  display: -webkit-box;
  font-size: 0.88rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conversation-row__meta {
  color: var(--warm);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.conversation-row__delete {
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  margin-right: 0.7rem;
  padding: 0.5rem;
}

.conversation-row__delete:hover {
  color: var(--danger);
}

.conversation-page {
  height: 100dvh;
  overflow: hidden;
}

.conversation-page .app-shell {
  display: flex;
  flex: 1 1 auto;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding: 0.75rem clamp(1rem, 4vw, 2rem) calc(0.75rem + env(safe-area-inset-bottom));
}

.conversation-page .conversation-layout {
  display: block;
  height: 100%;
  max-width: 760px;
  width: 100%;
}

.conversation-page .conversation-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.conversation-page .conversation-header {
  flex: 0 0 auto;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
}

.conversation-page .conversation-header h1 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.conversation-page .message-list {
  flex: 1 1 auto;
  margin-bottom: 0.65rem;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.25rem 1rem 0;
  scroll-padding-block: 1rem;
}

.conversation-page .composer {
  background: var(--background);
  border-top: 0;
  bottom: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.65rem 0 0;
  position: static;
}

.conversation-page .composer__message-form {
  box-shadow: none;
}

.conversation-page .composer__footer {
  padding-bottom: 0.1rem;
}

.conversation-actions {
  position: relative;
}

.conversation-actions summary {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  height: 2.35rem;
  justify-content: center;
  list-style: none;
  letter-spacing: 0.12em;
  width: 2.75rem;
}

.conversation-actions summary::-webkit-details-marker {
  display: none;
}

.conversation-actions__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.2rem;
  min-width: 15rem;
  padding: 0.45rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 12;
}

.conversation-action {
  background: transparent;
  border: 0;
  border-radius: 0.55rem;
  color: var(--ink);
  display: block;
  font: inherit;
  padding: 0.7rem 0.75rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.conversation-action:hover,
.conversation-action:focus-visible {
  background: var(--accent-wash);
}

.conversation-tools__scrim {
  z-index: 60;
}

.conversation-tools {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem 1rem 0 0;
  bottom: 0;
  box-shadow: var(--shadow);
  display: grid;
  gap: 1rem;
  left: 50%;
  max-height: min(80dvh, 42rem);
  max-width: 760px;
  overflow-y: auto;
  padding: 1rem;
  position: fixed;
  transform: translateX(-50%);
  width: min(100%, 760px);
  z-index: 70;
}

.conversation-tools::before {
  background: var(--line);
  border-radius: 999px;
  content: "";
  height: 0.25rem;
  justify-self: center;
  width: 2.5rem;
}

.conversation-tools--page {
  bottom: auto;
  left: auto;
  margin: 0 auto;
  max-height: none;
  max-width: 760px;
  position: static;
  transform: none;
  width: 100%;
}

.conversation-tools {
  bottom: auto;
  left: auto;
  max-height: none;
  max-width: none;
  overflow: visible;
  position: static;
  transform: none;
  width: auto;
  z-index: auto;
}

.conversation-tools::before {
  display: none;
}

@media (max-width: 520px) {
  .screen-header {
    margin-bottom: 1rem;
  }

  .screen-header h1 {
    font-size: 1.7rem;
  }

  .conversation-page .app-shell {
    padding-inline: 0.85rem;
  }

  .conversation-page .conversation-header h1 {
    font-size: 1.1rem;
  }
}

/* Desktop navigation rail. This is intentionally the only desktop rail rule set. */
.app-shell__nav-mark {
  align-items: center;
  background: var(--surface-muted);
  border-radius: 0.6rem;
  color: var(--ink-muted);
  display: inline-flex;
  flex: 0 0 1.65rem;
  font-size: 0.72rem;
  font-weight: 800;
  height: 1.65rem;
  justify-content: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  width: 1.65rem;
}

.app-shell__nav-icon {
  fill: none;
  height: 1.05rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.05rem;
}

.app-shell__nav-label {
  min-width: 0;
}

.app-shell__account-link {
  align-items: center;
  color: var(--accent-strong);
  display: inline-flex;
  gap: 0.75rem;
  min-width: 0;
  text-decoration: none;
}

.app-shell__account-mark {
  align-items: center;
  background: var(--surface-muted);
  border-radius: 0.6rem;
  color: var(--ink-muted);
  display: inline-flex;
  flex: 0 0 1.65rem;
  font-size: 1rem;
  height: 1.65rem;
  justify-content: center;
  width: 1.65rem;
}

.app-shell__account-icon {
  fill: none;
  height: 1.05rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.05rem;
}

.app-shell__account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav-toggle__icon {
  fill: none;
  height: 1.55rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.35;
  width: 1.55rem;
}

.app-nav-toggle__icon--close {
  display: none;
}

.app-nav-toggle__icon--pin {
  display: none;
}

.app-nav-toggle[aria-expanded="true"] .app-nav-toggle__icon--menu {
  display: none;
}

.app-nav-toggle[aria-expanded="true"] .app-nav-toggle__icon--close {
  display: block;
}

.app-shell__sign-out {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  justify-content: flex-start;
  min-height: 2.5rem;
}

.app-shell__sign-out-icon {
  background: var(--surface-muted);
  border-radius: 0.6rem;
  box-sizing: border-box;
  color: var(--ink-muted);
  display: block;
  fill: none;
  flex: 0 0 1.65rem;
  height: 1.65rem;
  padding: 0.3rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1.65rem;
}

.app-shell__sign-out-label {
  display: inline;
}

@media (min-width: 861px) {
  :root {
    --desktop-rail-compact-width: 4.75rem;
    --desktop-rail-expanded-width: 15.5rem;
  }

  body:has(.app-navigation) {
    --desktop-content-offset: var(--desktop-rail-expanded-width);
  }

  html.navigation-compact body:has(.app-navigation),
  body:has(.app-navigation--collapsed) {
    --desktop-content-offset: var(--desktop-rail-compact-width);
  }

  .app-navigation {
    --desktop-rail-width: var(--desktop-rail-expanded-width);
  }

  html.navigation-compact .app-navigation,
  .app-navigation--collapsed {
    --desktop-rail-width: var(--desktop-rail-compact-width);
  }

  html.navigation-compact .app-navigation--collapsed:hover,
  .app-navigation--collapsed:hover {
    --desktop-rail-width: var(--desktop-rail-expanded-width);
  }

  .app-navigation .app-shell__header,
  .app-navigation__drawer {
    box-sizing: border-box;
    left: 0;
    width: var(--desktop-rail-width);
  }

  .app-navigation .app-shell__header {
    align-items: center;
    background: var(--background);
    border-bottom: 0;
    border-right: 1px solid var(--line);
    display: flex;
    height: 4.5rem;
    inset: 0 auto auto 0;
    justify-content: flex-start;
    min-height: 4.5rem;
    padding: 0 0.75rem 0 4.5rem;
    position: fixed;
    z-index: 60;
  }

  .app-navigation--collapsed .app-shell__header {
    padding-inline: 0;
  }

  .app-navigation--collapsed:hover .app-shell__header {
    padding: 0 0.75rem 0 4.5rem;
  }

  .app-navigation__drawer {
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    inset: 4.5rem auto 0 0;
    max-width: none;
    overflow-x: hidden;
    padding: 4.25rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom));
    position: fixed;
    z-index: 50;
  }

  .app-navigation--collapsed:not(:hover) .app-navigation__drawer {
    scrollbar-gutter: stable both-edges;
  }

  html.navigation-ready .app-navigation .app-shell__header,
  html.navigation-ready .app-navigation__drawer {
    transition: width 180ms ease;
  }

  .app-navigation__drawer .app-shell__nav {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.22rem;
    width: 100%;
  }

  .app-navigation__drawer .app-shell__nav-link {
    align-items: center;
    border-radius: 0.8rem;
    box-sizing: border-box;
    display: flex;
    font-size: 1rem;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.7rem 0.8rem;
    position: relative;
    width: 100%;
  }

  .app-navigation__drawer .app-shell__nav-mark {
    position: static;
    transform: none;
  }

  .app-navigation__drawer .nav-badge {
    border: 2px solid var(--surface);
    box-sizing: border-box;
    left: calc(0.8rem + 1.05rem);
    padding: 0;
    position: absolute;
    top: calc(50% - 1.15rem);
    transform: none;
  }

  .app-navigation__drawer .app-shell__nav-link--active .app-shell__nav-mark {
    background: var(--accent);
    color: var(--button-ink-on-accent);
  }

  .app-navigation__drawer .app-shell__account {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    min-height: 7.25rem;
    padding: 0.9rem 0 0;
    width: 100%;
  }

  .app-navigation__drawer .app-shell__account-link,
  .app-navigation__drawer .app-shell__sign-out {
    min-height: 3.25rem;
    padding: 0.7rem 0.8rem;
  }

  .app-navigation__drawer .app-shell__sign-out {
    justify-content: flex-start;
  }

  .app-navigation__drawer .app-shell__account form:has(.app-shell__sign-out) {
    width: 100%;
  }

  .app-navigation--collapsed .app-shell__nav-link {
    background: transparent;
    justify-content: center;
    padding-inline: 0;
  }

  .app-navigation--collapsed:hover .app-shell__nav-link {
    justify-content: flex-start;
    padding-inline: 0.8rem;
  }

  .app-navigation--collapsed .app-shell__nav-link--active {
    background: transparent;
  }

  .app-navigation--collapsed .app-shell__nav-label {
    display: none;
  }

  .app-navigation--collapsed .app-shell__account {
    align-items: center;
    min-height: 7.25rem;
    opacity: 1;
    padding-inline: 0;
    pointer-events: auto;
    visibility: visible;
  }

  .app-navigation--collapsed .app-shell__account-link {
    box-sizing: border-box;
    justify-content: center;
    padding-inline: 0;
  }

  .app-navigation--collapsed .app-shell__account-name {
    display: none;
  }

  .app-navigation--collapsed .app-shell__sign-out {
    box-sizing: border-box;
    justify-content: center;
    padding-inline: 0;
  }

  .app-navigation--collapsed .app-shell__sign-out-label {
    display: none;
  }

  .app-navigation--collapsed .app-shell__beta-footer {
    padding-inline: 0;
  }

  .app-navigation--collapsed .nav-badge {
    background: var(--danger);
    border: 2px solid var(--surface);
    font-size: 0;
    height: 0.58rem;
    left: calc(50% + 0.2rem);
    min-width: 0;
    padding: 0;
    top: 0.35rem;
    width: 0.58rem;
  }

  .app-navigation--collapsed:hover .app-shell__nav-label {
    display: inline;
  }

  .app-navigation--collapsed:hover .app-shell__nav-link--active {
    background: var(--accent-wash);
  }

  .app-navigation--collapsed:hover .app-shell__account {
    align-items: flex-start;
    padding: 0.9rem 0 0;
  }

  .app-navigation--collapsed:hover .app-shell__account-link {
    justify-content: flex-start;
    padding-inline: 0.8rem;
  }

  .app-navigation--collapsed:hover .app-shell__account-name,
  .app-navigation--collapsed:hover .app-shell__sign-out-label {
    display: inline;
  }

  .app-navigation--collapsed:hover .app-shell__sign-out {
    justify-content: flex-start;
    padding-inline: 0.8rem;
    width: 100%;
  }

  .app-navigation--collapsed:hover .nav-badge {
    background: var(--danger);
    border: 2px solid var(--surface);
    font-size: 0.72rem;
    height: 1.25rem;
    min-width: 1.25rem;
    padding: 0;
    position: absolute;
    top: calc(50% - 1.15rem);
    transform: none;
    width: 1.25rem;
  }

  .app-navigation .app-nav-toggle {
    box-sizing: border-box;
    flex: none;
    margin: 0;
    position: absolute;
    top: 0.875rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.75rem;
  }

  .app-navigation--collapsed:not(:hover) .app-nav-toggle {
    left: 2.375rem;
  }

  .app-navigation .app-shell__header--conversation .app-shell__context-title {
    min-width: 0;
  }

  .app-navigation .app-nav-toggle[aria-expanded="true"] .app-nav-toggle__icon--menu {
    display: block;
  }

  .app-navigation .app-nav-toggle[aria-expanded="true"] .app-nav-toggle__icon--close {
    display: none;
  }

  .app-navigation--collapsed:hover .app-nav-toggle__icon--menu,
  .app-navigation:not(.app-navigation--collapsed):hover .app-nav-toggle__icon--menu {
    display: none;
  }

  .app-navigation--collapsed:hover .app-nav-toggle__icon--pin {
    display: block;
  }

  .app-navigation--collapsed:hover .app-nav-toggle__icon--close,
  .app-navigation:not(.app-navigation--collapsed) .app-nav-toggle__icon--pin {
    display: none;
  }

  .app-navigation:not(.app-navigation--collapsed):hover .app-nav-toggle__icon--close {
    display: block;
  }

  body:has(.app-navigation) .app-shell,
  body:has(.app-navigation) .app-footer,
  body:has(.app-navigation) .flash {
    box-sizing: border-box;
    margin-left: var(--desktop-content-offset);
    transition: none;
    width: calc(100% - var(--desktop-content-offset));
  }
}

@media (max-width: 860px) {
  .app-navigation .app-shell__header {
    gap: 0.5rem;
    justify-content: flex-start;
    padding-right: 5.25rem;
  }

  .app-navigation .app-nav-toggle {
    margin-left: 0;
  }

}

/* Part Two follows the root Happiness Game page's public visual values. */

body.public-game-page {
  background: #000;
  color: #fff;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

body.public-game-page,
body.public-game-page * {
  box-sizing: border-box;
}

.public-game-page a {
  background-color: transparent;
  color: #007bff;
  text-decoration: none;
}

.public-game-page a:visited {
  color: #007bff;
}

.public-game-page a:focus-visible {
  border-radius: 0.2rem;
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

.public-game {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem 2rem;
}

.public-game__header {
  margin: 1rem 0 1.25rem;
  max-width: none;
  text-align: center;
}

.public-game__header h1 {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.public-game__subtitle {
  font-family: Montserrat, sans-serif;
  font-weight: 300;
  letter-spacing: 0.9px;
}

.public-game__subtitle {
  font-size: 1.3rem;
  margin: 0;
}

.public-game__content {
  margin: 0 auto;
  max-width: 70ch;
  padding: 0 1rem;
}

.public-game__navigation {
  height: 31px;
  margin: 0 auto;
  overflow: visible;
  text-align: center;
}

.public-game__navigation a {
  align-items: center;
  background: #007bff;
  border: 1px solid #007bff;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.875rem;
  justify-content: center;
  line-height: 1.5;
  display: inline-flex;
  min-height: 44px;
  padding: 0.25rem 0.75rem;
  position: relative;
  top: -7px;
}

.public-game__navigation a:visited {
  background: #007bff;
  border-color: #007bff;
  color: #fff;
}

.public-game__navigation a:hover,
.public-game__navigation a:active {
  background: #0056b3;
  border-color: #0056b3;
  color: #fff;
}

.public-game__navigation a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.public-game__heading {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 1.5rem 0;
  text-align: center;
}

.public-game__heading .public-game__divider {
  display: block;
  font-size: 0.9rem;
  margin: 0 auto;
}

.public-game__divider {
  background: linear-gradient(to right, transparent, #6c757d 50%, transparent) no-repeat center;
  background-size: 100% 1px;
  max-width: 300px;
  text-align: center;
}

.public-game__divider span {
  background: #000;
  padding: 0 10px;
}

.public-game__intro {
  margin: 0 0 1.5rem;
}

.public-game__aspire-list {
  list-style-type: decimal;
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.public-game__aspire-list > li + li {
  margin-top: 0;
}

.public-game__aspire-list ul {
  list-style-type: circle;
  margin: 0;
  padding-left: 1.25rem;
}

.public-game__aspire-list li {
  overflow-wrap: anywhere;
}

.public-game__rule {
  background-color: #6c757d;
  border: 0;
  height: 1px;
  margin: 2.5rem auto 0;
}

@media (prefers-color-scheme: light) {
  body.public-game-page {
    background: #fff;
    color: #000;
  }

  .public-game__divider span {
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-game-page *,
  .public-game-page *::before,
  .public-game-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* The ASPIRE check-in keeps the long public reference page calm, scannable, and touch-friendly. */
.aspire-check-in {
  --aspire-danger: #ff8a80;
  --aspire-danger-strong: #e35d55;
  --aspire-surface: #111;
  --aspire-surface-raised: #191919;
  --aspire-surface-soft: #151515;
  --aspire-border: #4a4a4a;
  --aspire-muted: #d0d0d0;
  --aspire-text: #f5f7fa;
  margin: 2.25rem 0 3rem;
}

.aspire-check-in__opening h3,
.aspire-summary h4,
.aspire-element h3,
.aspire-group h4,
.aspire-factor h4,
.aspire-factor h5 {
  overflow-wrap: break-word;
}

.aspire-check-in__opening h3 {
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0 0 1rem;
  text-align: center;
}

.aspire-check-in__opening p:last-child {
  margin-bottom: 0;
}

.aspire-summary {
  background: var(--aspire-surface-raised);
  border: 1px solid var(--aspire-border);
  border-radius: 0.9rem;
  margin: 1.75rem 0;
  padding: 1rem;
}

.aspire-summary__heading {
  align-items: baseline;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.aspire-summary__eyebrow {
  color: var(--aspire-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.aspire-summary h4 {
  font-size: 1.1rem;
  margin: 0;
}

.aspire-summary__list {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.aspire-summary__list li {
  align-items: stretch;
  background: var(--aspire-surface);
  border: 1px solid var(--aspire-border);
  border-radius: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: space-between;
  min-height: 82px;
  padding: 0.7rem;
}

.aspire-summary__label {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.aspire-summary__key {
  align-items: center;
  background: var(--aspire-surface-raised);
  border: 1px solid var(--aspire-border);
  border-radius: 0.35rem;
  color: var(--aspire-text);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  height: 1.65rem;
  justify-content: center;
  width: 1.65rem;
}

.aspire-summary__name {
  color: var(--aspire-muted);
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: break-word;
}

.aspire-summary__score {
  align-items: baseline;
  display: flex;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  gap: 0.2rem;
}

.aspire-summary__score > span {
  color: var(--aspire-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.aspire-element {
  --aspire-element-accent: #c7b9ff;
  --aspire-element-tint: #28233c;
  background: var(--aspire-surface);
  border: 1px solid var(--aspire-border);
  border-radius: 1rem;
  margin-top: 1rem;
  overflow: hidden;
}

.aspire-element--p {
  --aspire-element-accent: #b8d9b4;
  --aspire-element-tint: #243529;
}

.aspire-element--i {
  --aspire-element-accent: #a9d8ff;
  --aspire-element-tint: #223544;
}

.aspire-element--r {
  --aspire-element-accent: #f3b9a4;
  --aspire-element-tint: #3f2a26;
}

.aspire-element--e {
  --aspire-element-accent: #f4b6ca;
  --aspire-element-tint: #402634;
}

.aspire-element__summary {
  align-items: center;
  background: var(--aspire-element-tint);
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 2.65rem minmax(0, 1fr) auto 1.25rem;
  list-style: none;
  min-height: 56px;
  padding: 0.85rem 1rem;
}

.aspire-element__summary::-webkit-details-marker,
.aspire-element__summary::marker {
  display: none;
}

.aspire-element__summary:focus-visible {
  outline: 3px solid var(--aspire-element-accent);
  outline-offset: -3px;
}

.aspire-element__letter {
  align-items: center;
  border: 1px solid var(--aspire-element-accent);
  border-radius: 0.6rem;
  color: var(--aspire-element-accent);
  display: inline-flex;
  font-size: 1.1rem;
  font-weight: 800;
  height: 2.65rem;
  justify-content: center;
  width: 2.65rem;
}

.aspire-element__summary-copy {
  min-width: 0;
}

.aspire-element__summary h3 {
  color: var(--aspire-text);
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
}

.aspire-element__score {
  align-items: baseline;
  color: var(--aspire-element-accent);
  display: flex;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  gap: 0.2rem;
  margin: 0;
  white-space: nowrap;
}

.aspire-element__score output,
.aspire-summary output,
.aspire-factor__value {
  font-variant-numeric: tabular-nums;
}

.aspire-element__chevron {
  border-bottom: 2px solid var(--aspire-element-accent);
  border-right: 2px solid var(--aspire-element-accent);
  display: block;
  height: 0.7rem;
  justify-self: end;
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 160ms ease;
  width: 0.7rem;
}

.aspire-element[open] .aspire-element__chevron {
  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}

.aspire-element__body {
  padding: 1rem;
}

.aspire-element__body > p {
  color: var(--aspire-muted);
  line-height: 1.55;
  margin: 0 0 1.2rem;
}

.aspire-group {
  background: var(--aspire-surface-raised);
  border: 1px solid var(--aspire-border);
  border-left: 4px solid var(--aspire-element-accent);
  border-radius: 0.8rem;
  margin: 1.5rem 0;
  padding: 1rem;
}

.aspire-group h4 {
  color: var(--aspire-text);
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0 0 0.7rem;
}

.aspire-group > p {
  color: var(--aspire-muted);
  line-height: 1.5;
  margin: 0 0 0.8rem;
}

.aspire-factor {
  background: var(--aspire-surface-soft);
  border: 1px solid var(--aspire-border);
  border-radius: 0.7rem;
  margin-top: 0.8rem;
  padding: 0.95rem;
}

.aspire-factor__heading-row {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 2rem;
}

.aspire-factor h4,
.aspire-factor h5 {
  color: var(--aspire-text);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
}

.aspire-factor__description {
  color: var(--aspire-muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.aspire-factor__description p,
.aspire-factor__description ul {
  margin: 0 0 0.7rem;
}

.aspire-factor__description > :last-child {
  margin-bottom: 0;
}

.aspire-factor__description ul {
  padding-left: 1.2rem;
}

.aspire-factor__value {
  align-items: baseline;
  background: var(--aspire-element-tint);
  border: 1px solid var(--aspire-element-accent);
  border-radius: 0.45rem;
  color: var(--aspire-element-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 800;
  gap: 0.15rem;
  min-width: 4.2rem;
  padding: 0.35rem 0.45rem;
  text-align: center;
}

.aspire-factor__value > span:last-child {
  color: var(--aspire-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.aspire-factor__control {
  margin-top: 1rem;
  min-height: 44px;
}

.aspire-factor__control input[type="range"] {
  accent-color: var(--aspire-element-accent);
  cursor: pointer;
  display: block;
  height: 44px;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.aspire-factor__control input[type="range"]:focus-visible {
  outline: 3px solid var(--aspire-element-accent);
  outline-offset: 3px;
}

.aspire-factor__scale {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  color: var(--aspire-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  line-height: 1;
  padding: 0 0.2rem;
}

.public-game__aspire-separator {
  background: linear-gradient(to right, transparent, #6c757d 12%, #6c757d 88%, transparent);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, #6c757d 30%, transparent);
  height: 0.35rem;
  margin: 4.5rem auto 0;
}

.public-game__legacy-content {
  background: color-mix(in srgb, #6c757d 8%, transparent);
  border: 1px solid color-mix(in srgb, #6c757d 55%, transparent);
  border-radius: 0.9rem;
  margin-top: 2rem;
  padding: 1.25rem;
}

.public-game__legacy-warning {
  border-bottom: 1px solid color-mix(in srgb, #6c757d 55%, transparent);
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
}

.public-game__legacy-content .public-game__aspire-list {
  margin-bottom: 0;
}

@media (max-width: 479px) {
  .aspire-element__summary {
    grid-template-columns: 2.65rem minmax(0, 1fr) 1.25rem;
  }

  .aspire-element__score {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .aspire-element__chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (min-width: 640px) {
  .aspire-summary {
    padding: 1.1rem 1.25rem;
  }

  .aspire-summary__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .aspire-element__body {
    padding: 1.35rem 1.5rem 1.5rem;
  }

  .aspire-group {
    padding: 1.15rem;
  }
}

@media (prefers-color-scheme: light) {
  .aspire-check-in {
    --aspire-surface: #f5f7fa;
    --aspire-surface-raised: #fff;
    --aspire-surface-soft: #fbfcfd;
    --aspire-border: #b7bec8;
    --aspire-muted: #343a40;
    --aspire-text: #111827;
  }

  .aspire-element {
    --aspire-element-accent: #5e4aaf;
    --aspire-element-tint: #eeeaff;
  }

  .aspire-element--p {
    --aspire-element-accent: #2d713c;
    --aspire-element-tint: #edf8ef;
  }

  .aspire-element--i {
    --aspire-element-accent: #075fbd;
    --aspire-element-tint: #eaf6ff;
  }

  .aspire-element--r {
    --aspire-element-accent: #a33e1e;
    --aspire-element-tint: #fff2ed;
  }

  .aspire-element--e {
    --aspire-element-accent: #9a3057;
    --aspire-element-tint: #fff0f5;
  }
}

/* ASPIRE correction pass: six-area overview, simplified domain summaries, and live group scores. */
.aspire-summary__heading {
  align-items: flex-start;
}

.aspire-summary__heading > div {
  flex: 1 1 auto;
}

.aspire-summary__heading p {
  color: var(--aspire-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0.25rem 0 0;
}

.aspire-summary__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aspire-summary__tile {
  align-items: flex-start;
  border-top: 3px solid var(--aspire-tile-accent, var(--aspire-border));
  gap: 0.45rem;
  justify-content: center;
  min-width: 0;
}

.aspire-summary__tile--a {
  --aspire-tile-accent: #d8ad57;
}

.aspire-summary__tile--s {
  --aspire-tile-accent: #bba9ff;
}

.aspire-summary__tile--p {
  --aspire-tile-accent: #9dc896;
}

.aspire-summary__tile--i {
  --aspire-tile-accent: #8bc8f5;
}

.aspire-summary__tile--r {
  --aspire-tile-accent: #edaa91;
}

.aspire-summary__tile--e {
  --aspire-tile-accent: #e9a4bd;
}

.aspire-summary__tile .aspire-summary__name {
  color: var(--aspire-text);
  font-size: 0.86rem;
  font-weight: 800;
}

.aspire-summary__tile .aspire-summary__score,
.aspire-summary__tile .aspire-summary__status {
  color: var(--aspire-tile-accent, var(--aspire-muted));
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1.2;
}

.aspire-summary__tile .aspire-summary__status {
  font-size: 0.8rem;
  line-height: 1.35;
}

.aspire-element--a {
  --aspire-element-accent: #d8ad57;
  --aspire-element-tint: #3a301f;
}

.aspire-element--disabled {
  background: var(--aspire-surface-raised);
  opacity: 0.92;
}

.aspire-element__summary {
  grid-template-columns: 2.65rem minmax(0, 1fr) auto 1.25rem;
}

.aspire-element__summary h3 {
  align-self: center;
  font-size: 1.06rem;
}

.aspire-element__summary--static {
  cursor: default;
  grid-template-columns: 2.65rem minmax(0, 1fr) auto;
}

.aspire-element__summary--static h3 {
  margin: 0;
}

.aspire-element__summary--static .aspire-element__score {
  color: var(--aspire-element-accent);
  font-size: 0.86rem;
  text-align: right;
}

.aspire-group__heading-row {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.aspire-group__heading-row h4 {
  margin-bottom: 0;
}

.aspire-group__score {
  align-items: baseline;
  color: var(--aspire-element-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  gap: 0.15rem;
  white-space: nowrap;
}

.aspire-group__score span {
  color: var(--aspire-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.aspire-factor__heading-row:has(> :only-child) {
  justify-content: flex-end;
}

.aspire-factor__description {
  margin-top: 0.55rem;
}

@media (min-width: 640px) {
  .aspire-summary__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .aspire-summary__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .aspire-element__summary,
  .aspire-element__summary--static {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto 1rem;
  }

  .aspire-element__summary--static {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  }

  .aspire-element__summary .aspire-element__score,
  .aspire-element__summary--static .aspire-element__score {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .aspire-element__summary .aspire-element__chevron {
    grid-column: 4;
    grid-row: 1;
  }

  .aspire-element__summary--static .aspire-element__score {
    white-space: normal;
  }

  .aspire-group__heading-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .aspire-group__score {
    margin-left: auto;
  }
}

@media (prefers-color-scheme: light) {
  .aspire-element--a {
    --aspire-element-accent: #9a6c13;
    --aspire-element-tint: #fff7df;
  }
}

/* Compact course chrome: the lesson should begin immediately after the app header. */
.app-frame {
  display: contents;
}

body.course-page .app-shell {
  max-width: 1180px;
  padding-top: 0.75rem;
}

.app-shell__page-title {
  color: var(--ink);
  flex: 0 1 auto;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell__header-action {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.app-shell__header-progress {
  display: none;
}

.app-footer {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  flex-wrap: wrap;
}

.app-footer a {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.3rem;
}

.app-footer__separator {
  color: var(--ink-muted);
  user-select: none;
}

body.course-page .course {
  max-width: none;
  padding: 0 0 4rem;
}

body.course-page .course-progress--desktop {
  margin: 0 auto 0.65rem;
  max-width: 48rem;
}

.message-feedback summary {
  color: var(--ink-muted);
  font-weight: 600;
}

.message-feedback summary:hover,
.message-feedback summary:focus-visible {
  color: var(--accent-strong);
}

.voice-active-controls {
  align-items: center;
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.voice-options {
  position: relative;
}

.voice-options summary {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  min-height: 2.75rem;
  padding: 0.35rem 0.65rem;
}

.voice-options__body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.6rem;
  min-width: min(20rem, calc(100vw - 2rem));
  padding: 0.75rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
}

body.course-page .course-progress--desktop {
  display: grid;
  gap: 0.8rem;
  padding-top: 0.5rem;
}

.course-progress__heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 2.75rem;
}

.course-progress__title {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.course-progress__trigger {
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  justify-content: flex-start;
  letter-spacing: 0.04em;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.55rem;
  white-space: nowrap;
}

.course-progress__trigger:hover {
  background: var(--accent-wash);
  color: var(--accent-strong);
}

.course-progress__trigger:active {
  background: var(--surface);
  transform: translateY(1px);
}

body.course-page .course-progress__track {
  border-radius: 0;
  height: 0.3rem;
}

.course-progress__trigger:focus-visible,
.course-ask-trigger:focus-visible,
.app-shell__page-title:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

body.course-page .course-main {
  margin-top: 0;
}

body.course-page .course-player,
body.course-page .course-complete {
  position: relative;
}

.course-ask-trigger {
  align-items: center;
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  box-shadow: 0 0.35rem 1.1rem rgba(36, 33, 29, 0.22);
  color: var(--button-ink-on-accent);
  cursor: pointer;
  display: inline-flex;
  height: 3.25rem;
  justify-content: center;
  padding: 0.7rem;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  width: 3.25rem;
  z-index: 20;
}

.course-ask-trigger:hover {
  background: var(--accent-strong);
}

.course-ask-trigger svg {
  fill: none;
  height: 1.45rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.45rem;
}

body.course-page .course-response {
  padding-bottom: 3.75rem;
}

body.course-page .app-footer {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 861px) {
  body.course-page .app-shell__header-action {
    display: none;
  }

  body.course-page .app-shell__page-title {
    display: none;
  }

  body.course-page .app-shell__header-progress {
    display: none;
  }
}

@media (max-width: 860px) {
  body.course-page .app-navigation .app-shell__header {
    border-bottom: 0;
  }

  body.course-page .app-shell__page-title {
    flex: 1 1 auto;
  }

  body.course-page .app-shell__header-progress {
    display: block;
    width: 100%;
  }

  body.course-page .app-shell__header-progress .course-progress__track {
    width: 100%;
  }

  body.course-page .app-shell {
    padding-inline: 0;
    padding-top: 0;
  }

  body.course-page .course-progress--desktop {
    display: none;
  }
}

@media (max-width: 640px) {
  body.course-page .course {
    padding-bottom: 4rem;
  }

  body.course-page .course-main {
    gap: 0.75rem;
  }

  body.course-page .course-player,
  body.course-page .course-complete {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    box-shadow: none;
    padding: 1rem;
  }

  body.course-page .course-main--complete {
    gap: 0;
  }

  body.course-page .course-main--complete .course-complete {
    border-bottom: 0;
  }

  body.course-page .course-complete__deck {
    padding-inline: 1rem;
  }

  body.course-page .course-player__heading {
    margin-bottom: 0.85rem;
  }

  body.course-page .course-player__art {
    margin-bottom: 1rem;
  }

  body.course-page .course-copy {
    max-width: none;
  }

  body.course-page .course-player__footer {
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.course-page .course-progress__track span {
    transition: none;
  }
}

.course-unavailable,
.course-admin-page {
  margin: 0 auto;
  max-width: 74rem;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
}

.course-unavailable {
  max-width: 42rem;
}

.course-unavailable h1,
.course-admin-page h1 {
  color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.08;
  margin: 0.35rem 0 0.75rem;
}

.admin-page__heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.admin-page__lede {
  color: var(--ink-muted);
  margin: 0;
  max-width: 48rem;
}

.admin-page__actions,
.course-admin-list__actions,
.course-admin-form__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.course-admin-warning {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 0.8rem;
  color: var(--ink);
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.1rem;
}

.course-admin-warning strong {
  display: block;
  margin-bottom: 0.2rem;
}

.course-admin-unavailable,
.course-admin-empty {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 1rem;
}

.course-admin-unavailable h2 {
  margin-top: 0;
}

.course-admin-list,
.course-admin-history {
  display: grid;
  gap: 0.75rem;
}

.course-admin-list__row,
.course-admin-history__item {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(4rem, 6rem) minmax(0, 1fr) auto;
  padding: 1rem;
}

.course-admin-list__number {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.course-admin-list__copy h2,
.course-admin-history__item h2 {
  font-size: 1.05rem;
  margin: 0;
}

.course-admin-list__copy p,
.course-admin-history__item p {
  color: var(--ink-muted);
  font-size: 0.84rem;
  margin: 0.25rem 0 0;
}

.course-admin-form {
  display: grid;
  gap: 1.5rem;
}

.course-admin-form__intro,
.course-admin-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.course-admin-form__intro {
  color: var(--ink-muted);
}

.course-admin-form__intro p {
  margin: 0;
}

.course-admin-section__heading {
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
}

.course-admin-section__heading h2 {
  font-size: 1.15rem;
  margin: 0;
}

.course-admin-section__heading p {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
}

.course-admin-field {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.course-admin-field > label {
  color: var(--ink);
  font-weight: 700;
}

.text-input,
.course-admin-field select,
.course-admin-field textarea {
  background: var(--surface);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 0.55rem;
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  width: 100%;
}

.course-admin-blocks,
.course-admin-samples {
  display: grid;
  gap: 1rem;
}

.course-admin-block {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  min-width: 0;
  padding: 0.9rem;
}

.course-admin-block__label {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: 0.78rem;
  font-weight: 750;
  gap: 0.65rem;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.course-admin-trix-toolbar {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 0.55rem 0.55rem 0 0;
  padding: 0.2rem;
}

.course-admin-trix-toolbar .trix-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  color: var(--ink);
  display: inline-flex;
  font: inherit;
  justify-content: center;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0.35rem;
  width: 44px !important;
}

.course-admin-trix-toolbar .trix-button:hover {
  background: var(--surface-muted);
  border-color: var(--line);
}

.course-admin-trix-toolbar .trix-button:focus-visible,
.course-admin-trix:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.course-admin-trix {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 0.55rem 0.55rem;
  color: var(--ink);
  min-height: 4.5rem;
  padding: 0.7rem;
}

.course-admin-trix[contenteditable="false"] {
  outline: 2px solid var(--line);
  outline-offset: 1px;
}

.course-admin-locked-copy {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.25rem 0 0;
}

.course-admin-readonly {
  display: grid;
  gap: 1rem;
}

.course-admin-readonly-copy {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  color: var(--ink);
  line-height: 1.6;
  padding: 0.75rem;
}

.course-admin-readonly-copy p:first-child {
  margin-top: 0;
}

.course-admin-readonly-copy p:last-child {
  margin-bottom: 0;
}

.course-admin-readonly-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  margin: 0;
  padding: 0.75rem 0.75rem 0.75rem 2.25rem;
}

.course-admin-readonly-details {
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  margin: 0;
}

.course-admin-readonly-details dt {
  color: var(--ink-muted);
  font-weight: 750;
}

.course-admin-readonly-details dd {
  margin: 0;
  min-width: 0;
}

.course-admin-list-editor {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.5rem;
}

.course-admin-list-editor--unordered {
  list-style: disc;
}

.course-admin-list-editor li {
  padding-left: 0.25rem;
}

.course-admin-list-editor li::marker {
  color: var(--ink-muted);
}

.course-admin-locked-block {
  color: var(--ink-muted);
  font-style: italic;
  margin: 0;
}

.course-admin-paired-field {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.course-admin-sample {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem;
}

.course-admin-sample__id {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.button--danger-outline {
  background: transparent;
  border: 1px solid color-mix(in srgb, #b44 55%, var(--line));
  color: var(--ink);
  min-height: 2.75rem;
}

.course-admin-history__item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.course-admin-history__item--current {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
}

.course-admin-history__changes {
  font-size: 0.8rem !important;
}

.course-sample-responses {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 0.75rem;
  margin: 1.25rem 0;
  padding: 1rem;
}

.course-sample-responses h2 {
  font-size: 1.1rem;
  margin: 0;
}

.course-sample-responses__disclosure {
  color: var(--ink-muted);
  font-size: 0.88rem;
  margin: 0.3rem 0 0.85rem;
}

.course-sample-responses__grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-sample-response {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  min-width: 0;
  padding: 0.8rem;
}

.course-sample-response p {
  overflow-wrap: anywhere;
}

.course-sample-response__option {
  color: var(--accent-strong, var(--ink));
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 0;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .admin-page__heading,
  .course-admin-list__row,
  .course-admin-history__item {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .admin-page__heading {
    display: grid;
  }

  .course-admin-list__actions,
  .admin-page__actions {
    justify-content: flex-start;
  }

  .course-sample-responses__grid {
    grid-template-columns: 1fr;
  }

  .course-admin-list__actions .button,
  .course-admin-list__actions .text-button,
  .course-admin-form__footer .button,
  .course-admin-form__footer .text-button {
    min-height: 2.75rem;
  }
}

/* Final ASPIRE review: dominant overall score, navigable dashboard, and shared score chrome. */
.aspire-summary {
  padding: 1.2rem;
}

.aspire-summary__heading h3 {
  color: var(--aspire-text);
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 0;
}

.aspire-overall-score {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  margin-top: 0.7rem;
}

.aspire-overall-score .aspire-score-display {
  align-items: baseline;
  background: var(--aspire-element-tint);
  border: 1px solid var(--aspire-element-accent);
  border-radius: 0.7rem;
  padding: 0.45rem 0.7rem;
}

.aspire-overall-score__coverage {
  color: var(--aspire-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.aspire-summary__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0;
}

.aspire-summary__actions button {
  border-radius: 0.35rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
}

.aspire-summary__actions .btn-primary {
  background: #007bff;
  border: 1px solid #007bff;
  color: #fff;
}

.aspire-summary__actions .btn-primary:hover,
.aspire-summary__actions .btn-primary:active {
  background: #0056b3;
  border-color: #0056b3;
}

.aspire-summary__actions .btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--aspire-muted);
  color: var(--aspire-text);
}

.aspire-summary__actions button:focus-visible {
  outline: 3px solid var(--aspire-text);
  outline-offset: 3px;
}

.aspire-summary__status {
  color: var(--aspire-muted);
  font-size: 0.82rem;
  min-height: 1.25em;
}

.aspire-summary__list {
  grid-auto-rows: 1fr;
}

.aspire-summary__tile {
  min-height: 112px;
  padding: 0;
}

.aspire-summary__tile > a {
  align-items: stretch;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.65rem;
  justify-content: space-between;
  min-width: 0;
  padding: 0.75rem;
}

.aspire-summary__tile > a:visited {
  color: inherit;
}

.aspire-summary__tile > a:hover,
.aspire-summary__tile > a:focus-visible {
  background: color-mix(in srgb, var(--aspire-tile-accent) 12%, transparent);
}

.aspire-summary__tile > a:focus-visible {
  border-radius: 0.55rem;
  outline: 3px solid var(--aspire-tile-accent);
  outline-offset: -3px;
}

.aspire-summary__tile--disabled {
  padding: 0.75rem;
}

.aspire-summary__label {
  align-items: flex-start;
}

.aspire-summary__key {
  flex: 0 0 auto;
}

.aspire-summary__name {
  line-height: 1.25;
}

.aspire-score-display {
  align-items: baseline;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  gap: 0.45rem;
  line-height: 1.1;
  white-space: nowrap;
}

.aspire-score-display__primary {
  color: var(--aspire-element-accent, var(--aspire-text));
  font-size: 1.1rem;
  font-weight: 850;
}

.aspire-score-display__secondary {
  color: var(--aspire-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.aspire-summary__tile .aspire-score-display {
  align-self: flex-start;
}

.aspire-summary__tile .aspire-score-display__primary {
  color: var(--aspire-tile-accent);
  font-size: 1.2rem;
}

.aspire-summary__tile .aspire-score-display__secondary {
  color: var(--aspire-muted);
}

.aspire-summary__tile--disabled .aspire-score-display__primary {
  color: var(--aspire-tile-accent);
}

.aspire-element__summary .aspire-score-display {
  align-items: flex-end;
  flex-direction: column;
  gap: 0.12rem;
  justify-self: end;
}

.aspire-element__summary .aspire-score-display__primary {
  font-size: 1.05rem;
}

.aspire-element__summary .aspire-score-display__secondary {
  font-size: 0.7rem;
}

.aspire-group__heading-row .aspire-score-display {
  align-items: flex-end;
  flex-direction: column;
  gap: 0.12rem;
  margin-left: auto;
}

.aspire-group__heading-row .aspire-score-display__primary {
  font-size: 0.98rem;
}

.aspire-group__heading-row .aspire-score-display__secondary {
  font-size: 0.68rem;
}

.aspire-factor__heading-row {
  align-items: flex-start;
}

.aspire-factor__heading-row .aspire-score-display {
  background: var(--aspire-element-tint);
  border: 1px solid var(--aspire-element-accent);
  border-radius: 0.55rem;
  flex: 0 0 auto;
  gap: 0.35rem;
  padding: 0.38rem 0.5rem;
}

.aspire-factor__heading-row .aspire-score-display__primary {
  font-size: 1rem;
}

.aspire-factor__heading-row .aspire-score-display__secondary {
  font-size: 0.7rem;
}

.aspire-factor__heading-row:has(> .aspire-score-display:only-child) {
  justify-content: flex-end;
}

.aspire-factor__description {
  margin-top: 0.75rem;
}

.aspire-factor__control {
  margin-top: 1.05rem;
}

.aspire-factor__control input[type="range"] {
  min-height: 44px;
}

.aspire-print-report {
  display: none;
}

.aspire-print-report__overall,
.aspire-print-report__area,
.aspire-print-report__group,
.aspire-print-report__factor {
  break-inside: avoid;
}

.aspire-print-report__overall {
  align-items: baseline;
  border-bottom: 2px solid #333;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
}

.aspire-print-report__overall .aspire-score-display__primary {
  font-size: 2rem;
}

.aspire-print-report__coverage {
  color: #555;
  font-size: 0.85rem;
}

.aspire-print-report__areas {
  display: grid;
  gap: 1rem;
}

.aspire-print-report__area {
  border-bottom: 1px solid #aaa;
  padding-bottom: 0.8rem;
}

.aspire-print-report__domain,
.aspire-print-report__group-line,
.aspire-print-report__factor {
  align-items: baseline;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
}

.aspire-print-report__domain {
  font-size: 1.15rem;
  font-weight: 800;
}

.aspire-print-report__group {
  margin: 0.65rem 0 0 1rem;
}

.aspire-print-report__group-line {
  font-weight: 750;
}

.aspire-print-report__factor {
  margin: 0.45rem 0 0 1rem;
}

.aspire-print-report__factor .aspire-print-report__label {
  font-size: 0.9rem;
}

@media (min-width: 960px) {
  .aspire-summary__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .aspire-summary__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .aspire-summary__actions button {
    width: 100%;
  }

  .aspire-summary__status {
    text-align: center;
  }

  .aspire-element__summary {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto 1rem;
  }

  .aspire-element__summary .aspire-score-display {
    grid-column: 3;
    grid-row: 1;
  }

  .aspire-element__summary .aspire-element__chevron {
    grid-column: 4;
    grid-row: 1;
  }

  .aspire-factor__heading-row .aspire-score-display {
    gap: 0.25rem;
    padding-inline: 0.4rem;
  }

  .aspire-factor__heading-row .aspire-score-display__primary {
    font-size: 0.94rem;
  }

  .aspire-factor__heading-row .aspire-score-display__secondary {
    font-size: 0.66rem;
  }
}

@media print {
  body.public-game-page {
    background: #fff !important;
    color: #111 !important;
  }

  body.public-game-page * {
    visibility: hidden !important;
  }

  body.public-game-page .aspire-print-report,
  body.public-game-page .aspire-print-report * {
    visibility: visible !important;
  }

  body.public-game-page .aspire-print-report {
    background: #fff;
    color: #111;
    display: block !important;
    left: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .aspire-print-report h1 {
    font-size: 1.8rem;
    margin: 0 0 1rem;
  }

  .aspire-print-report .aspire-score-display__primary {
    color: #111;
  }

  .aspire-print-report .aspire-score-display__secondary,
  .aspire-print-report__coverage {
    color: #444;
  }
}

/* Final ASPIRE correction: score only, explicit unrated state, and full-surface tiles. */
.aspire-summary {
  max-width: none;
}

.aspire-summary__heading {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 1rem;
}

.aspire-summary__heading-content {
  min-width: 0;
}

.aspire-summary__heading > div {
  flex: initial;
}

.aspire-summary__actions {
  justify-content: flex-end;
  margin: 0;
}

.aspire-summary__status.visually-hidden {
  min-height: 0;
}

.aspire-summary__tile {
  background: color-mix(in srgb, var(--aspire-tile-accent) 14%, var(--aspire-surface-raised));
  border: 1px solid color-mix(in srgb, var(--aspire-tile-accent) 44%, var(--aspire-border));
  border-top: 3px solid var(--aspire-tile-accent);
  border-radius: 0.65rem;
  overflow: hidden;
}

.aspire-summary__tile > a {
  background: transparent;
  min-height: 112px;
  padding: 0.85rem;
}

.aspire-summary__tile > a:hover,
.aspire-summary__tile > a:focus-visible {
  background: color-mix(in srgb, var(--aspire-tile-accent) 12%, transparent);
}

.aspire-summary__tile--disabled {
  background: color-mix(in srgb, #6c757d 14%, var(--aspire-surface-raised));
  border-color: color-mix(in srgb, #6c757d 48%, var(--aspire-border));
  cursor: not-allowed;
  filter: grayscale(0.8);
  opacity: 0.78;
  padding: 0.85rem;
}

.aspire-summary__tile--disabled .aspire-summary__name,
.aspire-summary__tile--disabled .aspire-score-display__primary {
  color: var(--aspire-muted);
}

.aspire-summary__key {
  display: none;
}

.aspire-summary__name {
  line-height: 1.25;
}

.aspire-score-display,
.aspire-summary .aspire-score-display,
.aspire-element__summary .aspire-score-display,
.aspire-group__heading-row .aspire-score-display,
.aspire-factor__heading-row .aspire-score-display {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 0;
  padding: 0;
}

.aspire-score-display__primary {
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.aspire-score-display__secondary {
  display: none !important;
}

.aspire-element__summary .aspire-score-display,
.aspire-group__heading-row .aspire-score-display,
.aspire-factor__heading-row .aspire-score-display {
  align-items: flex-end;
}

.aspire-summary__tile .aspire-score-display {
  align-self: flex-start;
}


.aspire-print-report .aspire-score-display__secondary,
.aspire-print-report__coverage {
  display: none !important;
}

@media (max-width: 700px) {
  .aspire-summary__heading {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .aspire-summary__actions {
    justify-content: stretch;
  }
}

/* Final ASPIRE polish: centered compact tiles, logo, reset confirmation, and visible action states. */
.aspire-check-in__logo {
  margin: 0 auto 0.9rem;
  text-align: center;
}

.aspire-check-in__logo img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 150px;
  width: 100%;
}

.aspire-summary__heading-content {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
}

.aspire-overall-score {
  margin: 0;
}

.aspire-overall-score .aspire-score-display {
  background: transparent;
  border: 0;
  padding: 0;
}

.aspire-summary__actions .btn-outline-secondary:hover,
.aspire-summary__actions .btn-outline-secondary:active {
  background: color-mix(in srgb, var(--aspire-text) 12%, transparent);
  border-color: var(--aspire-text);
  color: var(--aspire-text);
}


.aspire-summary__list .aspire-summary__tile {
  min-height: 88px;
  padding: 0;
}

.aspire-summary__tile > a,
.aspire-summary__tile--disabled {
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 0.55rem 0.25rem;
  text-align: center;
}

.aspire-summary__tile > a {
  align-self: stretch;
  height: 100%;
  border-radius: inherit;
}

.aspire-summary__tile > a:hover,
.aspire-summary__tile > a:active,
.aspire-summary__tile > a:focus-visible {
  background: color-mix(in srgb, var(--aspire-tile-accent) 16%, transparent);
}

.aspire-summary__tile > a:focus-visible {
  outline: 3px solid var(--aspire-tile-accent);
  outline-offset: -3px;
}

.aspire-summary__tile .aspire-summary__label {
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.aspire-summary__tile .aspire-score-display {
  align-self: center;
}

@media (max-width: 700px) {
  .aspire-summary__heading-content {
    justify-content: center;
    text-align: center;
  }
}

/* ASPIRE opening and end-of-section close controls. */
.aspire-check-in__opening {
  display: flow-root;
}

.aspire-check-in__logo {
  margin: 1rem auto;
}

.aspire-element__footer {
  background: color-mix(in srgb, var(--aspire-element-tint) 55%, var(--aspire-surface));
  border-top: 1px solid color-mix(in srgb, var(--aspire-element-accent) 35%, var(--aspire-border));
  padding: 0.75rem 1rem;
  text-align: center;
}

.aspire-element__close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--aspire-element-accent) 55%, var(--aspire-border));
  border-radius: 0.45rem;
  color: var(--aspire-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 750;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1rem;
  width: min(100%, 16rem);
}

.aspire-element__close:hover,
.aspire-element__close:active,
.aspire-element__close:focus-visible {
  background: color-mix(in srgb, var(--aspire-element-accent) 18%, transparent);
  border-color: var(--aspire-element-accent);
}

.aspire-element__close:focus-visible {
  outline: 3px solid var(--aspire-element-accent);
  outline-offset: 3px;
}

@media (max-width: 479px) {

  .aspire-element__footer {
    padding-inline: 0.75rem;
  }

  .aspire-element__close {
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  .aspire-check-in {
    --aspire-danger: #ff8a80;
    --aspire-danger-strong: #e35d55;
  }
}

@media (prefers-color-scheme: light) {
  .aspire-check-in {
    --aspire-danger: #b42318;
    --aspire-danger-strong: #8f1d14;
  }
}

/* PR #83: keep the ASPIRE overview, spacing, and printed results geometrically consistent. */
#part-two > .public-game__header {
  margin-bottom: 0;
}

#part-two .public-game__navigation {
  height: auto;
  margin: 0;
  overflow: visible;
  padding-block: 2rem;
}

#part-two .public-game__navigation a {
  position: static;
  top: auto;
}

#part-two .public-game__navigation + article > .public-game__heading {
  margin-top: 0;
}

#part-two .public-game__intro {
  margin-bottom: 0;
}

#part-two .public-game__intro + .aspire-check-in {
  margin-top: 0;
}

.aspire-summary__list .aspire-summary__tile {
  padding: 0;
}

.aspire-summary__tile > .aspire-summary__tile-surface {
  align-items: center;
  align-self: stretch;
  border-radius: inherit;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  justify-content: center;
  min-height: 88px;
  min-width: 0;
  padding: 0.55rem 0.25rem;
  text-align: center;
  width: 100%;
}

.aspire-summary__tile > a.aspire-summary__tile-surface:visited {
  color: inherit;
}

.aspire-summary__tile--disabled,
.aspire-summary__tile--disabled .aspire-summary__tile-surface,
.aspire-summary__tile--disabled .aspire-summary__tile-surface * {
  cursor: not-allowed;
}

.aspire-element--disabled,
.aspire-element--disabled .aspire-element__summary--static,
.aspire-element--disabled .aspire-element__summary--static * {
  cursor: not-allowed;
}

.aspire-element--disabled .aspire-element__summary h3 {
  min-width: 0;
  white-space: nowrap;
}

.aspire-print-report__area--disabled {
  color: #555;
  filter: grayscale(1);
}

.aspire-print-report__domain {
  column-gap: 1rem;
}

.aspire-print-report__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.aspire-print-report__domain .aspire-score-display {
  flex: 0 0 auto;
}

@media (max-width: 479px) {
  #part-two .public-game__intro + .aspire-check-in {
    margin-inline: 0;
    width: auto;
  }
}

/* PR #85: readable opening prose, precise header alignment, and explicit export formats. */
.aspire-check-in__calculator {
  min-width: 0;
}

.aspire-element__summary {
  grid-template-columns: 2.65rem minmax(0, 1fr) 4.75rem 1.25rem;
  column-gap: 0.9rem;
}

.aspire-element__summary h3,
.aspire-element__summary .aspire-score-display {
  align-self: center;
}

.aspire-element__summary:not(.aspire-element__summary--static) .aspire-score-display {
  justify-content: flex-end;
  transform: translateX(0.25rem);
  width: 100%;
}

.aspire-element__summary--static {
  grid-template-columns: 2.65rem minmax(0, 1fr) 1.25rem;
}

.aspire-element__summary--static .aspire-score-display {
  justify-self: end;
  transform: translateX(0.25rem);
}

.aspire-summary__heading-content {
  display: block;
}

.aspire-summary__heading h3.aspire-overall-score {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.35rem;
  font-weight: 850;
  gap: 0.3rem;
  line-height: 1.15;
  margin: 0;
}

.aspire-overall-score .aspire-score-display,
.aspire-overall-score .aspire-score-display__primary {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.aspire-group__heading-row,
.aspire-factor__heading-row {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.75rem;
}

.aspire-group__heading-row h4,
.aspire-factor__heading-row h4,
.aspire-factor__heading-row h5 {
  min-width: 0;
}

.aspire-group__heading-row .aspire-score-display,
.aspire-factor__heading-row .aspire-score-display {
  align-self: start;
  justify-content: flex-end;
  margin-left: 0;
  min-width: 0;
  width: 100%;
}

.aspire-export-dialog {
  background: transparent;
  border: 0;
  color: var(--aspire-text);
  max-height: calc(100dvh - 1rem);
  max-width: min(36rem, calc(100vw - 1rem));
  overflow: visible;
  padding: 0;
  width: 100%;
}

.aspire-export-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

.aspire-export-dialog__panel {
  background: var(--aspire-surface-raised);
  border: 1px solid var(--aspire-border);
  border-radius: 0.9rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.38);
  max-height: calc(100dvh - 1rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

.aspire-export-dialog__header {
  align-items: center;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.aspire-export-dialog__header h3 {
  color: var(--aspire-text);
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
}

.aspire-export-dialog__close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--aspire-border);
  border-radius: 0.5rem;
  color: var(--aspire-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 44px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 44px;
}

.aspire-export-dialog__close > span {
  display: block;
  flex: 0 0 1.1rem;
  height: 1.1rem;
  position: relative;
  width: 1.1rem;
}

.aspire-export-dialog__close > span::before,
.aspire-export-dialog__close > span::after {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 0.16rem;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 1.1rem;
}

.aspire-export-dialog__close > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.aspire-export-dialog__close > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.aspire-export-dialog__description {
  color: var(--aspire-muted);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.35rem 0 0.8rem;
}

.aspire-export-dialog__close:focus-visible {
  outline: 3px solid var(--aspire-text);
  outline-offset: 2px;
}

.aspire-export-preview {
  border-top: 1px solid color-mix(in srgb, var(--aspire-border) 72%, transparent);
  color: var(--aspire-muted);
  display: grid;
  font-size: 0.72rem;
  gap: 0.16rem;
  line-height: 1.25;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
}

.aspire-export-preview__row {
  align-items: start;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.aspire-export-preview__content,
.aspire-export-preview__label,
.aspire-export-preview__detail {
  min-width: 0;
}

.aspire-export-preview__content {
  display: block;
  padding-left: calc(var(--aspire-preview-depth, 0) * 0.5rem);
}

.aspire-export-preview__coverage {
  display: inline;
  font-size: 0.68rem;
  font-weight: 500;
}

.aspire-export-preview__row--overall,
.aspire-export-preview__row--domain,
.aspire-export-preview__row--group {
  font-weight: 750;
}

.aspire-export-preview__detail {
  display: -webkit-box;
  border-left: 1px solid color-mix(in srgb, var(--aspire-border) 72%, transparent);
  font-weight: 450;
  margin: 0.18rem 0 0 0.5rem;
  overflow: hidden;
  padding-left: 0.5rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.aspire-export-preview__score {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  margin-right: calc(0.5rem + var(--aspire-preview-depth, 0) * 0.25rem);
  white-space: nowrap;
}

.aspire-export-preview__empty {
  display: block;
  font-style: italic;
  padding-block: 0.2rem;
}

.aspire-export-dialog__status {
  color: var(--aspire-danger);
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0.55rem 0 0;
  min-height: 0;
}

.aspire-export-dialog__status:empty {
  display: none;
}

.aspire-print-report__rows {
  display: block;
}

.aspire-print-report__row {
  --aspire-print-depth-step: 0.85rem;
  align-items: start;
  break-inside: avoid;
  display: block;
  padding: 0.38rem 0.45rem;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.aspire-print-report__row:nth-child(even) {
  background: #f6f6f6;
}

.aspire-print-report__content {
  min-width: 0;
  padding-left: calc(var(--aspire-print-depth, 0) * var(--aspire-print-depth-step));
}

.aspire-print-report__label {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.aspire-print-report__row--overall,
.aspire-print-report__row--domain {
  font-size: 1.08rem;
  font-weight: 800;
}

.aspire-print-report__row--domain {
  break-after: avoid;
  margin-top: 1.1rem;
}

.aspire-print-report__row--domain .aspire-print-report__content {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.65rem;
}

.aspire-print-report__coverage {
  color: #555;
  display: inline !important;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

.aspire-print-report__row--group {
  font-weight: 750;
}

.aspire-print-report__row--affluential {
  color: #555;
}

.aspire-print-report__row .aspire-score-display {
  align-items: baseline;
  color: #111;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  justify-self: end;
  margin-right: calc(var(--aspire-print-depth, 0) * var(--aspire-print-depth-step));
  white-space: nowrap;
}

.aspire-print-report__row .aspire-score-display,
.aspire-print-report__row .aspire-score-display__primary {
  font-size: inherit;
  line-height: inherit;
}

.aspire-print-report__description {
  color: #444;
  font-size: 0.8rem;
  font-weight: 450;
  line-height: 1.35;
  margin: 0.16rem 0 0;
}

@media (max-width: 479px) {
  .aspire-check-in__calculator {
    margin-inline: calc(50% - 50vw + 0.25rem);
    max-width: calc(100vw - 0.5rem);
    width: calc(100vw - 0.5rem);
  }

  .aspire-element__summary--static {
    grid-template-columns: 2.4rem minmax(0, 1fr) 1rem;
  }

  .aspire-element__summary:not(.aspire-element__summary--static) {
    grid-template-columns: 2.4rem minmax(0, 1fr) 4.5rem 1rem;
  }

  .aspire-group__heading-row,
  .aspire-factor__heading-row {
    grid-template-columns: minmax(0, 1fr) 4.5rem;
  }

  .aspire-summary__heading h3.aspire-overall-score {
    justify-content: center;
  }

  .aspire-export-dialog {
    max-width: calc(100vw - 0.75rem);
  }

  .aspire-export-dialog__panel {
    max-height: calc(100dvh - 0.75rem);
    padding: 0.75rem;
  }
}

@media print {
  .aspire-print-report h1 {
    border-bottom: 2px solid #333;
    margin-bottom: 0.2rem;
    padding-bottom: 0.75rem;
  }

  .aspire-print-report__row {
    color: #111;
  }

  .aspire-print-report__row:nth-child(even) {
    background: #f6f6f6 !important;
  }
}

/* Optional ASPIRE writing stays secondary to the existing score controls. */
.aspire-notes__actions {
  border: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.aspire-notes__toggle {
  align-items: center;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  gap: 0.15rem;
  position: relative;
  text-align: center;
  background: var(--aspire-surface-soft);
  border: 1px solid var(--aspire-border);
  border-radius: 0.45rem;
  color: var(--aspire-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 0.25rem;
  overflow-wrap: anywhere;
}

.aspire-notes__panel {
  margin-top: 0.75rem;
  min-width: 0;
}

.aspire-notes__panel label {
  color: var(--aspire-text);
  display: block;
  font-weight: 650;
}

.aspire-notes__panel textarea {
  background: var(--aspire-surface);
  border: 1px solid var(--aspire-border);
  border-radius: 0.45rem;
  box-sizing: border-box;
  color: var(--aspire-text);
  display: block;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  min-width: 0;
  padding: 0.5rem;
  resize: vertical;
  width: 100%;
}

.aspire-check-in .aspire-notes__hint {
  color: var(--aspire-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0.35rem 0 0.6rem;
}

.aspire-notes__hint span { display: block; margin-top: 0.25rem; }

.aspire-saving-info {
  color: var(--aspire-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.8rem 0 0;
}

.aspire-saving-info p { margin: 0.35rem 0; }
.aspire-saving-info p:empty { display: none; }
.aspire-saving-info a { color: var(--aspire-text); text-decoration: underline; }

.aspire-export-writing {
  border: 1px solid var(--aspire-border);
  border-radius: 0.45rem;
  margin: 0 0 0.75rem;
  min-width: 0;
  padding: 0.3rem 0.65rem 0.6rem;
}

.aspire-export-writing legend { float: none; font-size: 0.9rem; font-weight: 650; width: auto; }
.aspire-export-writing label {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  overflow-wrap: anywhere;
}
.aspire-export-writing input { accent-color: #007bff; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.aspire-export-writing p { color: var(--aspire-muted); font-size: 0.75rem; line-height: 1.4; margin: 0.25rem 0 0; }
.aspire-export-writing p:empty { display: none; }

.aspire-notes__toggle:focus-visible,
.aspire-notes__panel textarea:focus-visible,
.aspire-export-writing input:focus-visible {
  outline: 3px solid var(--aspire-text);
  outline-offset: 3px;
}

.aspire-export-preview__note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.aspire-print-report__heading {
  align-items: start;
  break-inside: avoid;
  column-gap: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.aspire-print-report__row--writing { break-inside: auto; }
.aspire-print-report__row--writing .aspire-print-report__heading { break-after: avoid; }
.aspire-print-report__note {
  color: #111;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0.45rem 0 0;
  orphans: 2;
  overflow-wrap: anywhere;
  padding-left: calc(var(--aspire-print-depth, 0) * var(--aspire-print-depth-step));
  white-space: pre-wrap;
  widows: 2;
}

@media print {
  html:has(.aspire-check-in), body.public-game-page { overflow: visible !important; height: auto !important; }

  /* Remove the editors from print layout, including their otherwise blank pages. */
  body.public-game-page > :not(#part-two),
  #part-two > :not(.public-game__content),
  #part-two .public-game__content > :not(article),
  #part-two article > :not(.aspire-check-in),
  .aspire-check-in > :not(.aspire-check-in__calculator),
  .aspire-check-in__calculator > :not(.aspire-print-report) { display: none !important; }

  #part-two,
  #part-two .public-game__content,
  #part-two article,
  .aspire-check-in,
  .aspire-check-in__calculator {
    background: #fff !important;
    border: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body.public-game-page .aspire-print-report { position: static; }
}

/* Presence is independent of disclosure, keyboard focus, and save status. */
.aspire-check-in {
  --aspire-note-present: #85cba4;
  --aspire-note-border: #858585;
}
@media (prefers-color-scheme: light) {
  .aspire-check-in { --aspire-note-present: #286345; --aspire-note-border: #757575; }
}
.aspire-check-in [hidden] { display: none !important; }
.aspire-notes__toggle { border-color: var(--aspire-note-border); }
.aspire-notes__toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.aspire-notes__words { grid-column: 2; min-width: 0; pointer-events: none; }
.aspire-notes__icon { grid-column: 3; visibility: hidden; pointer-events: none; }
.aspire-notes__toggle:has(input:checked) {
  background: color-mix(in srgb, #007bff 20%, var(--aspire-surface));
  box-shadow: inset 0 -3px 0 currentColor;
}
.aspire-notes__toggle:has(input:focus-visible) { outline: 3px solid var(--aspire-text); outline-offset: 3px; }
.aspire-notes__toggle--writing { border-color: var(--aspire-note-present); }
.aspire-notes__toggle--writing .aspire-notes__icon { color: var(--aspire-note-present); visibility: visible; }
.aspire-overview {
  border-bottom: 1px solid var(--aspire-border);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  min-width: 0;
}
.aspire-overview h4 { color: var(--aspire-text); font-size: 1rem; margin: 0; }
/* One native filter; ratios stay inside its six stable options. */
.aspire-factor-filter {
  align-items: center;
  color: var(--aspire-text);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 1rem 0;
  min-width: 0;
  font-size: 1rem;
}
.aspire-factor-filter label { align-items: center; display: flex; gap: 0.4rem; margin: 0; }
.aspire-factor-filter label svg { flex: 0 0 auto; }
.aspire-factor-filter__control { min-width: 0; }
.aspire-factor-filter select {
  background-color: var(--aspire-surface);
  border: 1px solid var(--aspire-note-border);
  border-radius: 0.45rem;
  color: var(--aspire-text);
  /* Keep focused native-select internals from enlarging the page in WebKit. */
  contain: layout;
  font: inherit;
  font-weight: 400;
  height: max(44px, 2.75rem);
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0.5rem 2rem 0.5rem 0.6rem;
  width: auto;
}
.aspire-factor-filter select:focus-visible { outline: 3px solid var(--aspire-text); outline-offset: 3px; }
.aspire-factor-filter__choice { display: block; margin-top: 0.35rem; overflow-wrap: anywhere; }
.aspire-factor-filter__warning { font-size: 0.875rem; grid-column: 1 / -1; margin: 0; }
.aspire-preview-status { color: #edc478; font-size: 1.05rem; font-weight: 750; line-height: 1.3; }
.aspire-summary__tile .aspire-preview-status { font-size: 1.2rem; line-height: 1.1; }
.aspire-element__summary > .aspire-preview-status { align-self: center; justify-self: end; transform: translateX(0.25rem); }
.aspire-affluential-theme { font-weight: 700; }
.aspire-affluential-preview h4 { font-size: 1.1rem; }
.aspire-affluential-preview > ul { padding-left: 1.2rem; }
.aspire-affluential-preview li > ul { padding-left: 1.1rem; }
.aspire-affluential-preview > ul > li + li { margin-top: 0.75rem; }
.aspire-affluential-preview a { overflow-wrap: anywhere; }
@media (prefers-color-scheme: light) {
  .aspire-preview-status { color: #835d13; }
}
.aspire-element__matches { color: var(--aspire-text); font-size: 0.8rem; grid-column: 2 / -1; }
#part-two .public-game__brand { font-size: 1.1rem; margin: 0 0 0.5rem; }
@media (forced-colors: active) {
  .aspire-notes__toggle--writing { border-color: ButtonText; }
  .aspire-notes__toggle--writing .aspire-notes__icon { color: ButtonText; }
}
@media print {
  .aspire-print-report__score { color: #111; margin: 0 0 1rem; break-after: avoid; }
}

/* Reflow enlarged text within the element instead of squeezing its title. */
.aspire-element { container-type: inline-size; }
@container (max-width: 15rem) {
  .aspire-element > .aspire-element__summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
  }
  .aspire-element__summary .aspire-element__letter { grid-area: 1 / 1; }
  .aspire-element__summary .aspire-element__chevron { grid-area: 1 / 2; }
  .aspire-element__summary h3 { grid-area: 2 / 1 / auto / -1; }
  .aspire-element__summary:not(.aspire-element__summary--static) .aspire-score-display {
    grid-area: 3 / 1 / auto / -1;
    justify-content: flex-start;
    justify-self: start;
    transform: none;
    width: auto;
  }
  .aspire-element__summary > .aspire-preview-status { grid-area: 3 / 1 / auto / -1; justify-self: start; }
  .aspire-element__matches { grid-area: 4 / 1 / auto / -1; }
  .aspire-factor__heading-row, .aspire-group__heading-row { grid-template-columns: minmax(0, 1fr); }
  .aspire-notes__toggle { padding-inline: 0.2rem; }
}

/* ASPIRE save hub and optional view choices share native form semantics. */
.aspire-factor__scale > :last-child { text-align: right; }
.aspire-factor__scale output { color: var(--aspire-text); font-weight: 700; text-align: center; }
.aspire-saving-info summary {
  align-content: center;
  cursor: pointer;
  min-height: 44px;
  padding-block: 0.4rem;
}
.aspire-saving-info summary { color: var(--aspire-text); }
.aspire-storage-warning { color: var(--aspire-text); font-size: 0.9rem; line-height: 1.5; margin: 0.6rem 0; }
.aspire-notes__close { background: transparent; border: 0; color: var(--aspire-muted); font: inherit; font-size: 0.875rem; min-height: 44px; padding: 0.4rem; text-decoration: underline; }
.aspire-hub-choices { display: grid; gap: 0.65rem; margin-top: 0.75rem; }
.aspire-export-dialog button:not(.aspire-export-dialog__close) {
  background: var(--aspire-surface-soft);
  border: 1px solid var(--aspire-note-border);
  border-radius: 0.45rem;
  color: var(--aspire-text);
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 0.75rem;
  overflow-wrap: anywhere;
}
.aspire-export-dialog button:disabled { cursor: progress; opacity: 0.65; }
.aspire-export-dialog .aspire-hub-choice { text-align: left; }
.aspire-hub-choice strong, .aspire-hub-choice span { display: block; }
.aspire-hub-choice span, .aspire-check-in .aspire-backup-notice { color: var(--aspire-muted); font-size: 0.875rem; line-height: 1.45; }
.aspire-check-in .aspire-backup-notice { margin: -0.25rem 0 0.2rem; }
.aspire-export-dialog [data-hub-view] h4 { font-size: 1.05rem; margin: 0.75rem 0; }
.aspire-export-dialog [data-hub-view] > p { font-size: 0.9rem; line-height: 1.5; }
.aspire-export-dialog button.aspire-hub-danger { border-color: var(--aspire-danger); color: var(--aspire-danger); }
.aspire-hub-final-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem; }
.aspire-export-dialog input[type=file] { max-width: 100%; min-height: 44px; color: var(--aspire-text); margin-block: 0.5rem; }
.aspire-export-dialog input[type=file]::file-selector-button { min-height: 44px; margin-right: 0.5rem; }
.aspire-export-dialog button:focus-visible, .aspire-export-dialog input:focus-visible,
.aspire-saving-info summary:focus-visible, .aspire-notes__close:focus-visible { outline: 3px solid var(--aspire-text); outline-offset: 3px; }
.aspire-hub-choices hr { border-color: var(--aspire-border); margin: 0.3rem 0; width: 100%; }
@media (max-width: 600px) {
  .aspire-notes__panel textarea { resize: none; height: auto; }
}
@media (forced-colors: active) {
  .aspire-notes__toggle:has(input:checked) { border-color: Highlight; outline: 2px solid Highlight; }
}

/* Authoritative compact Save/report/import and note-toggle correction. */
.aspire-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1rem;
}
.aspire-summary__heading-content,
.aspire-summary__actions { justify-content: center; margin: 0; text-align: center; }
.aspire-summary__heading-content { display: flex; }
.aspire-summary__heading-content .aspire-overall-score { justify-content: center; }
.aspire-summary__list { margin: 0; }
.aspire-summary__actions { display: flex; flex-wrap: wrap; }
.aspire-summary__actions button { min-width: 7rem; }
.aspire-summary__actions #aspire-save-share.btn.btn-outline-primary {
  background: transparent;
  border: 1px solid #007bff;
  color: #007bff;
}
.aspire-summary__actions #aspire-save-share.btn.btn-outline-primary:hover,
.aspire-summary__actions #aspire-save-share.btn.btn-outline-primary:active {
  background: #007bff;
  color: #fff;
}
.aspire-summary__actions #aspire-save-share.btn.btn-outline-primary:focus-visible { outline: 3px solid #007bff; outline-offset: 3px; }
.aspire-summary__status:empty { display: none; }
.aspire-summary__status { min-height: 0; }

.aspire-factor-filter {
  align-items: center;
  display: grid;
  gap: 0.5rem 0.75rem;
  grid-template-columns: max-content max-content;
  justify-content: center;
  margin-inline: auto;
  max-width: 100%;
  width: 100%;
}
.aspire-factor-filter__control { max-width: 100%; min-width: 0; }
.aspire-factor-filter select { min-width: 0; width: auto; }
.aspire-factor-filter--stacked { grid-template-columns: minmax(0, 1fr); }
.aspire-factor-filter--stacked .aspire-factor-filter__control { align-items: center; display: flex; flex-direction: column; justify-content: center; justify-self: stretch; width: auto; }
.aspire-factor-filter--stacked .aspire-factor-filter__control select { display: block; flex: 0 0 auto; max-width: none; }

.aspire-notes__toggle {
  appearance: none;
  border-color: var(--aspire-note-border);
  font: inherit;
}
.aspire-notes__toggle[aria-expanded="true"] {
  background: color-mix(in srgb, #007bff 20%, var(--aspire-surface));
  box-shadow: inset 0 -3px 0 currentColor;
}
.aspire-notes__toggle:focus-visible { outline: 3px solid var(--aspire-text); outline-offset: 3px; }

.aspire-export-dialog__header { align-items: center; grid-template-columns: minmax(0, 1fr) auto; }
.aspire-export-dialog__header h3 { grid-column: 1; text-align: left; }
.aspire-export-dialog__back,
.aspire-hub-text-action { appearance: none; background: transparent !important; border: 1px solid var(--aspire-border) !important; color: var(--aspire-text) !important; font: inherit; padding: 0.4rem 0.7rem !important; text-decoration: none !important; }
.aspire-export-dialog__back { align-items: center; align-self: center; border-radius: 0.45rem; cursor: pointer; display: inline-flex; grid-column: 1; justify-self: start; min-height: 44px; min-width: 44px; }
.aspire-export-dialog button.btn {
  background: transparent;
  border: 1px solid var(--aspire-text);
  color: var(--aspire-text);
  font-weight: 700;
  text-align: center;
}
.aspire-export-dialog button.btn:hover,
.aspire-export-dialog button.btn:focus-visible { background: color-mix(in srgb, var(--aspire-text) 12%, transparent); }
.aspire-hub-backup-actions { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aspire-hub-choice { display: grid; gap: 0.15rem; }
.aspire-hub-report-choice { width: 100%; }
.aspire-export-format-cards { border: 0; display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 0.75rem; padding: 0; }
.aspire-export-format-card { border: 1px solid var(--aspire-border); border-radius: 0.5rem; display: block; min-width: 0; padding: 0.65rem; }
.aspire-export-format-card > span:first-child { align-items: center; display: flex; gap: 0.45rem; min-height: 44px; }
.aspire-export-format-card__descriptor { color: var(--aspire-muted); display: block; font-size: 0.8rem; }
.aspire-export-format-card:has(input:checked) { border-color: var(--aspire-text); box-shadow: inset 0 -3px 0 currentColor; }
.aspire-export-dialog [data-hub-view="report"] [data-view-heading] { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.aspire-export-format-card .aspire-export-preview { border-top: 1px solid var(--aspire-border); height: 7.5em; margin-top: 0.5rem; overflow: hidden; }
.aspire-export-preview__line { display: block; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aspire-export-dialog .aspire-export-writing { margin-bottom: 0.75rem; }
.aspire-export-dialog .aspire-export-writing legend { font-weight: 750; }
.aspire-export-dialog .aspire-export-writing p:empty { display: none; }
.aspire-hub-final-actions { align-items: center; justify-content: center; }
.aspire-hub-final-actions .btn { flex: 1 1 0; }
.aspire-saving-info { text-align: center; }
.aspire-saving-info summary { list-style-position: inside; text-align: center; }
.aspire-saving-info p { text-align: left; }
.aspire-share-unavailable { color: var(--aspire-muted); font-size: 0.8rem; margin: 0.5rem 0 0; text-align: center; }
.aspire-backup-dropzone { align-items: center; border: 2px dashed var(--aspire-border); border-radius: 0.65rem; display: grid; gap: 0.65rem; justify-items: center; padding: 1rem; text-align: center; }
.aspire-backup-dropzone.is-dragging { background: color-mix(in srgb, var(--aspire-text) 10%, transparent); border-color: var(--aspire-text); }
.aspire-backup-dropzone input[type="file"] { height: 1px; opacity: 0.01; position: absolute; width: 1px; }
.aspire-backup-dropzone label:focus-within,
.aspire-backup-dropzone:focus-within { outline: 3px solid var(--aspire-text); outline-offset: 3px; }
.aspire-backup-dropzone small { color: var(--aspire-muted); }
.aspire-export-dialog button.aspire-hub-danger { background: transparent; }
.aspire-export-dialog button.aspire-hub-danger--armed { background: color-mix(in srgb, var(--aspire-danger) 12%, transparent); border-width: 2px; font-weight: 800; }
.aspire-reset-backup { display: block; margin-inline: auto; width: fit-content; }
.aspire-import-file-summary { display: grid; gap: 0.15rem; line-height: 1.35; margin: 1rem 0; }
.aspire-import-file-summary__name { overflow-wrap: anywhere; }
.aspire-import-file-summary__date { color: var(--aspire-muted); font-size: 0.875rem; }
.aspire-import-file-summary__counts { overflow-wrap: anywhere; }
.aspire-import-actions { flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.aspire-import-actions > * { flex: 0 0 auto !important; margin-inline: auto; width: min(100%, 22rem); }
.aspire-reset-actions { gap: 0.5rem; margin-top: 1rem; }
.aspire-reset-actions > * { flex: 0 1 9rem !important; margin-inline: 0; }
@media (max-width: 600px) {
  .aspire-export-dialog { max-width: calc(100vw - 0.75rem); }
  .aspire-export-format-cards { grid-template-columns: 1fr; }
}

/* Conversation-led understanding */
.understanding-page {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem) 0 3rem;
}
.understanding-header { max-width: 680px; margin-bottom: 1.6rem; }
.understanding-header h1 { margin: 0.35rem 0 0.7rem; }
.understanding-header > p:not(.eyebrow) { color: var(--ink-muted); line-height: 1.65; }
.understanding-header > form { margin-top: 1.25rem; }
.understanding-links { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 2rem; }
.understanding-empty {
  max-width: 640px;
  padding: clamp(1.3rem, 4vw, 2.4rem);
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin: 2rem 0;
}
.understanding-empty__icon { width: 32px; height: 32px; color: var(--accent); }
.understanding-empty h2 { font-size: clamp(1.25rem, 4vw, 1.65rem); line-height: 1.4; }
.understanding-empty p { color: var(--ink-muted); line-height: 1.65; }
.understanding-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.understanding-section { min-width: 0; }
.understanding-section > h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.understanding-card { min-width: 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); margin-bottom: 1rem; overflow-wrap: anywhere; }
.understanding-card h3 { font-size: 1.08rem; line-height: 1.4; margin: 0 0 0.6rem; }
.understanding-card p { line-height: 1.65; margin: 0.5rem 0; }
.gratitude-layout .text-button { min-width: 44px; min-height: 44px; }
.understanding-card__action { min-width: 44px; min-height: 44px; margin-top: 0.3rem; text-align: left; }
.understanding-footer { margin-top: 2.5rem; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.6; }
.wins-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.understanding-note summary { min-height: 44px; padding: 0.65rem 0; cursor: pointer; }
.understanding-note blockquote { margin-inline: 0; padding-inline: 1rem; border-left: 2px solid var(--accent); color: var(--ink-muted); }
.conversation-welcome { padding: 1.25rem 0 0.5rem; font-size: 1.12rem; color: var(--ink-muted); }
.conversation-start { margin: 0.5rem 0; }
@media (max-width: 640px) {
  .understanding-sections, .wins-stories { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .understanding-links .button { flex: 1 1 auto; }
}