/* Welcome splash */
#welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  background-color: var(--app-surface);
}

html.welcome-splash-pending #welcome-splash {
  display: flex;
}


.splash__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3vh, 24px);
  text-align: center;
  transform: scale(0.98);
  transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.splash__org,
.splash__app {
  width: clamp(140px, 45vw, 320px);
  height: auto;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 1200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.splash-on {
  overflow: hidden;
}

body.splash-on .splash__org,
body.splash-on .splash__app {
  opacity: 1;
  transform: translateY(0);
}

body.splash-on #welcome-splash .splash__center {
  transform: scale(1);
}

.splash__center.splash-exit {
  transform: scale(1);
}

.splash__center.splash-exit .splash__org,
.splash__center.splash-exit .splash__app {
  opacity: 0;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .splash__center,
  .splash__org,
  .splash__app {
    transition-duration: 1ms !important;
  }
}


/* Top bar */
.topbar {
  width: 100%;
  min-height: var(--topbar-min-height);
  background-color: var(--topbar-bg);
  border-bottom: var(--topbar-border-width) solid var(--topbar-border-color);
  box-shadow: var(--topbar-shadow);
  color: var(--text-primary);
}

.topbar__inner {
  width: 100%;
  max-width: var(--content-max-width);
  min-height: var(--topbar-min-height);
  margin-inline: auto;
  padding-inline: var(--topbar-padding-x);
  padding-block: var(--topbar-padding-y);
  display: flex;
  align-items: center;
  gap: var(--topbar-gap);
}

@media (min-width: 768px) {
  .topbar__inner {
    padding-inline: var(--page-padding-inline-tablet);
  }
}

.topbar__qr-button {
  display: none;
}


@media (min-width: 1024px) {
  .topbar {
    position: relative;
  }

  .topbar__inner {
    padding-inline: var(--page-padding-inline-desktop);
    justify-content: center;
  }

  .topbar__left {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
  }

  .topbar__center {
    justify-content: center;
  }

  .topbar__qr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target-min);
    padding-inline: var(--space-sm);
    padding-block: var(--space-xs);
    border: var(--button-border-width) solid var(--button-secondary-border-color);
    border-radius: var(--button-radius);
    background-color: var(--app-muted-bg);
    color: var(--text-primary);
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .topbar__qr-button:hover {
    background-color: var(--button-secondary-background-pressed);
  }
}

@media (min-width: 1024px) {
  .topbar__qr-button:active {
    background-color: var(--button-secondary-background-pressed);
  }
}


.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--topbar-gap);
  flex: 0 0 auto;
  min-width: 0;
}



.topbar__center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.topbar__logo {
  display: block;
  width: auto;
  max-width: 220px;
  height: 40px;
}

.topbar__ties-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  padding: 0;
  border: 0;
  border-radius: var(--button-radius);
  background: transparent;
  cursor: pointer;
}

.topbar__ties-logo {
  display: block;
  width: auto;
  max-width: 44px;
  height: 32px;
  object-fit: contain;
}

.topbar__ties-button:focus-visible {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}





.topbar__title {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-heading-screen-size);
  line-height: var(--font-heading-screen-line-height);
  font-weight: var(--font-heading-screen-weight);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .topbar__title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.topbar__home-button,
.topbar__help {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  padding-inline: var(--space-sm);
  padding-block: var(--space-xs);
  border: var(--button-border-width) solid var(--button-secondary-border-color);
  border-radius: var(--button-radius);
  background-color: var(--button-secondary-background);
  color: var(--text-primary);
  text-decoration: none;
  transition:
    background-color var(--motion-normal) ease,
    border-color var(--motion-normal) ease,
    color var(--motion-normal) ease,
    box-shadow var(--motion-fast) ease;
}

.topbar__home-button {
  padding-inline: var(--space-md);
}

#choose-home-button,
#activity-home-button {
  padding-inline: calc(var(--space-md) + 6px);
}

.topbar__help {
  width: auto;
  min-width: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-xs);
  background-color: var(--app-card-bg);
  border-color: var(--border-default);
  color: var(--text-primary);
}


.topbar__home-button:hover,
.topbar__help:hover,
.topbar__home-button:focus-visible,
.topbar__help:focus-visible,
a.button:hover,
a.button:focus-visible {
  text-decoration: none;
}

@media (hover: hover) {
  .topbar__home-button:hover {
    background-color: var(--button-secondary-background-hover);
  }

  .topbar__help:hover {
    background-color: var(--button-secondary-background-pressed);
    text-decoration: none;
  }
}

.topbar__home-button:active,
.topbar__help:active {
  background-color: var(--button-secondary-background-pressed);
}



.topbar__home-button:focus-visible,
.topbar__help:focus-visible {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}

.topbar__home-button:disabled {
  background-color: var(--button-disabled-background);
  color: var(--button-disabled-text-color);
  border-color: var(--button-disabled-border-color);
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
  opacity: 1;
}

.topbar__home-button img {
  display: block;
  width: 24px;
  height: 24px;
}

.topbar__help img {
  display: block;
  width: 24px;
  height: 24px;
}


@media (max-width: 359px) {
  .topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "center right";
    align-items: center;
    padding-inline: var(--page-padding-inline-phone);
    gap: var(--space-xs);
  }

  .topbar__left {
    display: none;
  }

  .topbar__center,
  .topbar__right {
    min-width: 0;
  }

  .topbar__center {
    grid-area: center;
    justify-self: start;
  }

  .topbar__right {
    grid-area: right;
    justify-self: end;
    justify-content: flex-end;
  }

  .topbar__logo {
    max-width: min(200px, 100%);
  }

  .topbar__home-button {
    padding-inline: var(--space-xs);
  }

  .topbar__help {
    padding-inline: var(--space-md);
  }

  .topbar__title {
    font-size: var(--font-body-size);
    line-height: var(--font-body-line-height);
  }
}


/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-min-height);
  padding-inline: var(--button-padding-x);
  padding-block: var(--button-padding-y);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  font-weight: var(--button-font-weight);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--motion-normal) ease,
    border-color var(--motion-normal) ease,
    color var(--motion-normal) ease,
    box-shadow var(--motion-fast) ease;
}

.button--primary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text-color);
  border-color: var(--button-primary-border);
}

.button--secondary {
  background-color: var(--button-secondary-background);
  color: var(--button-secondary-text-color);
  border-color: var(--button-secondary-border-color);
}

.button--full {
  display: flex;
  width: 100%;
}

@media (hover: hover) {
  .button--primary:hover {
    background-color: var(--button-primary-background-hover);
  }

  .button--secondary:hover {
    background-color: var(--button-secondary-background-hover);
  }
}

.button--primary:active {
  background-color: var(--button-primary-background-pressed);
}

.button--secondary:active {
  background-color: var(--button-secondary-background-pressed);
}

.button:focus-visible {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}

.button--programmatic-focus {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: 4px;
  box-shadow: var(--control-focus-ring-shadow);
}

.button:disabled,
.button[aria-disabled="true"] {
  background-color: var(--button-disabled-background);
  color: var(--button-disabled-text-color);
  border-color: var(--button-disabled-border-color);
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
}

/* Inputs */
.input,
.input--error {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--input-gap);
}

.input__label {
  color: var(--text-primary);
  font-size: var(--font-body-size);
  line-height: var(--font-helper-line-height);
  font-weight: 600;
}


.input__helper {
  color: var(--text-secondary);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: var(--font-helper-weight);
}

.input__error {
  color: var(--text-error);
  font-size: var(--font-error-size);
  line-height: var(--font-error-line-height);
  font-weight: var(--font-error-weight);
}

.input__field,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="password"],
textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--input-min-height);
  padding-inline: var(--input-padding-x);
  padding-block: var(--input-padding-y);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  background-color: var(--input-background);
  color: var(--input-text);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: var(--font-body-weight);
}

.input__field::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.input__field:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
textarea:hover {
  border-color: var(--input-border-hover);
}

.input__field:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible {
  border-color: var(--input-border-focus);
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}

.input--error .input__field,
.input__field[aria-invalid="true"],
input[type="text"][aria-invalid="true"],
input[type="email"][aria-invalid="true"],
input[type="search"][aria-invalid="true"],
input[type="tel"][aria-invalid="true"],
input[type="password"][aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--input-border-error);
  border-width: calc(var(--input-border-width) * 2);
  padding-inline: calc(var(--input-padding-x) - var(--input-border-width));
  padding-block: calc(var(--input-padding-y) - var(--input-border-width));
}

.input--error .input__helper {
  color: var(--text-error);
  font-weight: var(--font-error-weight);
}

textarea {
  resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
  .topbar__home-button,
  .topbar__help,
  .button {
    transition: none;
  }
}

/* Stage 2A: Start screen */
.screen-shell {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--app-card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

#home-screen,
#choose-screen,
#activity-screen {
  position: relative;
  margin-top: calc(var(--tap-target-min) + var(--space-md));
}


.screen-shell__header {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

#activity-screen .screen-shell__header {
  margin-bottom: 0;
}


#activity-screen:has(#free-practice-shell:not([hidden])) {
  padding: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

#activity-screen:has(#free-practice-shell:not([hidden])) .screen-shell__header {
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-md);
}

#activity-screen:has(#free-practice-shell:not([hidden])) #free-practice-shell {
  padding: 0 var(--space-lg) var(--space-lg);
}



.screen-shell__header > .topbar__help {
  margin-left: auto;
}

.screen-shell__eyebrow {
  width: 100%;
  margin: 0 0 var(--space-2xs);
  color: var(--text-brand-accent);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 600;
}


.screen-shell__header h1 {
  width: 100%;
  margin: 0 0 var(--space-sm);
  text-align: left;
}

#start-screen .screen-shell__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-sm);
}

#start-screen .screen-shell__header h1 {
  width: auto;
  margin: 0;
}

#start-screen .screen-shell__header > .topbar__help {
  margin-left: 0;
  justify-self: end;
}

.activity-heading-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 var(--space-sm);
}



.activity-heading-row h1 {
  width: auto;
  margin: 0;
  transform: translateY(-8px);
}


.activity-classmate-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}


.activity-classmate-badge__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background-color: var(--app-muted-bg);
  flex-shrink: 0;
}


.activity-classmate-badge__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-classmate-badge__name {
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  text-align: center;
}


.screen-heading-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.screen-heading-with-icon__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}


.screen-shell__actions {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1.3fr 0.9fr;
  align-items: center;
  gap: var(--space-sm);
}

#choose-screen .screen-shell__actions,
#activity-screen .screen-shell__actions {
  position: absolute;
  top: calc(-1 * (var(--tap-target-min) + var(--space-lg)));
  left: 0;
  right: 0;
  z-index: 1;
}

#home-screen .screen-shell__header > .topbar__help {
  position: absolute;
  top: calc(-1 * (var(--tap-target-min) + var(--space-lg)));
  right: 0;
  z-index: 1;
  margin-left: 0;
}


#start-form {
  display: grid;
  gap: var(--space-xl);
}


.app-dialog {
  width: min(calc(100% - (var(--page-padding-inline-phone) * 2)), var(--modal-max-width));
  height: fit-content;
  max-height: min(var(--modal-max-height), calc(100dvh - (var(--page-padding-inline-phone) * 2)));
  margin: auto;
  inset: 0;
  padding: var(--modal-padding);
  border: var(--modal-border-width) solid var(--modal-border);
  border-radius: var(--modal-radius);
  background-color: var(--modal-background);
  color: var(--text-primary);
  box-shadow: var(--modal-shadow);
  overflow: auto;
}

.app-dialog[open] {
  display: grid;
  align-content: start;
  gap: var(--space-md);
}


.app-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}


#help-dialog p,
#ties-dialog p {
  margin: 0;
}

.help-dialog__body {
  display: grid;
  gap: var(--space-md);
}

.help-dialog__list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-left: var(--space-lg);
}

.help-dialog__list--ordered {
  margin-top: var(--space-sm);
}

#help-dialog .help-dialog__note {
  margin-top: var(--space-lg);
  color: var(--text-primary);
}




.help-dialog__actions,
.ties-dialog__actions {
  margin-top: var(--space-lg);
}


.ties-dialog__body {
  display: grid;
  gap: var(--space-sm);
}

.ties-dialog__body a {
  color: var(--button-primary-background);
  font-weight: 600;
}


#qr-dialog {
  width: min(calc(100% - (var(--page-padding-inline-phone) * 2)), 520px);
}


#qr-dialog[open] {
  justify-items: center;
  text-align: center;
}

.qr-dialog__body {
  display: flex;
  justify-content: center;
  width: 100%;
}



.resume-dialog__actions {
  display: grid;
  gap: var(--space-sm);
}


.dialog-close-button {
  background-color: var(--app-muted-bg);
  border-color: var(--border-default);
  color: var(--text-primary);
}

@media (hover: hover) {
  .dialog-close-button:hover {
    background-color: var(--button-secondary-background-pressed);
  }
}

.dialog-close-button:active {
  background-color: var(--button-secondary-background-pressed);
}

.qr-dialog__image {
  display: block;
  width: min(100%, 380px, 55vh);
  height: auto;
  margin-inline: auto;
}




.form-status {
  color: var(--text-success);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 600;
}

.mode-button-list {
  display: grid;
  gap: var(--space-xl);
}

.mode-button-list .button {
  justify-content: flex-start;
  min-height: 64px;
  padding-inline: var(--space-md);
  padding-block: var(--space-md);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
}

.mode-button__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}


#home-screen .screen-shell__header {
  margin-bottom: 0;
}

#home-welcome-message {
  margin-bottom: var(--space-lg);
}

#home-screen .mode-button-list {
  margin-bottom: var(--space-2xl);
}



.classmate-card-list {
  display: grid;
  gap: var(--space-md);
}

.classmate-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--app-card-bg);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.classmate-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background-color: var(--app-muted-bg);
  font-weight: 700;
}


.classmate-card__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.classmate-card__name {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
}


@media (hover: hover) {
  .classmate-card:hover {
    background-color: var(--button-secondary-background-hover);
  }
}

.classmate-card:active {
  background-color: var(--button-secondary-background-pressed);
}

.classmate-card:focus-visible {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}

.activity-section-heading,
.activity-panel__heading {
  margin: 0;
}

.activity-instructions {
  margin: 0;
  color: var(--text-secondary);
}

.build-message-instruction {
  margin: 0 0 var(--space-md);
  color: var(--text-secondary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
}



.activity-panel {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--app-muted-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


.build-message-shell {
  display: grid;
  gap: var(--space-md);
}

.fill-blanks-shell {
  display: grid;
  gap: var(--space-md);
}

.free-practice-shell {
  display: grid;
  gap: var(--space-md);
}

.free-practice-assessment-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.free-practice-assessment-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: 44px;
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

.free-practice-assessment-toggle__label {
  min-width: 0;
}

.free-practice-assessment-toggle.is-on .free-practice-assessment-toggle__label {
  color: var(--button-primary-background);
}


.free-practice-assessment-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.free-practice-assessment-toggle__switch {
  position: relative;
  width: 52px;
  height: 30px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background-color: var(--app-muted-bg);
  transition:
    background-color var(--motion-normal) ease,
    border-color var(--motion-normal) ease;
  flex-shrink: 0;
}

.free-practice-assessment-toggle__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background-color: var(--app-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-normal) ease;
}

.free-practice-assessment-toggle input:checked + .free-practice-assessment-toggle__switch {
  background-color: var(--button-primary-background);
  border-color: var(--button-primary-background);
}

.free-practice-assessment-toggle input:checked + .free-practice-assessment-toggle__switch::after {
  transform: translateX(22px);
}

.free-practice-assessment-toggle input:focus-visible + .free-practice-assessment-toggle__switch {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}


.free-practice-assessment-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background-color: var(--success-panel-background);
  color: var(--text-primary);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 700;
}


.free-practice-thread-panel {
  display: block;
  padding: var(--space-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--app-surface);
  box-shadow: var(--shadow-card);
}



.free-practice-thread {
  display: grid;
  gap: var(--space-md);
  min-height: 120px;
}

.free-practice-sent-bubble {
  position: relative;
  justify-self: end;
  width: fit-content;
  max-width: 82%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-message);
  background-color: #dcf8c6;
  box-shadow: var(--shadow-card);
  font-weight: 700;
}



.free-practice-sent-bubble p {
  margin: 0;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.55;
}

.free-practice-sent-bubble p + p {
  margin-top: 0;
}

.free-practice-reply-bubble {
  position: relative;
  justify-self: start;
  width: fit-content;
  max-width: 82%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-message);
  background-color: var(--app-surface);
  box-shadow: var(--shadow-card);
}


.free-practice-sent-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background-color: #dcf8c6;
  transform: rotate(-45deg);
}

.free-practice-reply-bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background-color: var(--app-surface);
  transform: rotate(45deg);
}


.free-practice-reply-bubble p {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.125rem;
  line-height: 1.55;
}


.free-practice-typing-indicator {
  margin-top: var(--space-md);
}

.free-practice-typing-indicator p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-style: italic;
}


.free-practice-actions {
  display: grid;
  gap: var(--space-xs);
}

.free-practice-system-hint {
  margin: 0;
  color: var(--text-error);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 700;
}

.free-practice-writing-tip {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 600;
}


.free-practice-done-panel {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-default);
}

.free-practice-assessment-done-panel {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-default);
}

.free-practice-assessment-done-title {
  margin: 0;
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 700;
  color: var(--text-primary);
}

.free-practice-assessment-done-helper {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
}

.free-practice-assessment-done-actions {
  display: grid;
  gap: var(--space-xs);
}

.free-practice-assessment-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  width: fit-content;
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

.free-practice-assessment-checkbox input {
  width: 22px;
  height: 22px;
  margin: 0;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--button-primary-background);
  flex-shrink: 0;
}


.free-practice-assessment-checkbox span {
  display: inline-block;
}


.free-practice-assessment-gate-helper {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: var(--font-helper-weight);
}

.free-practice-copy-feedback {
  margin: 0;
  color: var(--success-panel-color);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 700;
}


.free-practice-success-message {
  margin: 0;
  padding: var(--space-sm);
  border: 1px solid var(--success-panel-color);
  border-radius: var(--radius-card);
  background-color: var(--success-panel-background);
  color: var(--success-panel-color);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
}

.free-practice-done-actions {
  display: grid;
  gap: var(--space-xs);
}


.fill-blanks-instruction {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
}


.fill-blanks-message {
  display: grid;
  gap: var(--space-md);
  min-height: 120px;
}

#fill-blanks-shell .activity-panel {
  background-color: #dcf8c6;
}

#fill-blanks-shell .activity-panel:has(.fill-blanks-sent-bubble) {
  background-color: var(--app-muted-bg);
}
 

.fill-blanks-sent-bubble {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-message);
  background-color: #dcf8c6;
  box-shadow: var(--shadow-card);
  font-weight: 700;
}

.fill-blanks-sent-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background-color: #dcf8c6;
  transform: rotate(-45deg);
}





.fill-blanks-sent-bubble p {
  margin: 0;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.55;
}



.fill-blanks-sent-bubble p + p {
  margin-top: 0;
}


.fill-blanks-max-helper {
  margin: 4px 0 0;
  color: var(--text-error);
  font-size: var(--font-error-size);
  line-height: var(--font-error-line-height);
  font-weight: var(--font-error-weight);
}


.fill-blanks-send-helper {
  color: var(--text-secondary);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: var(--font-helper-weight);
}

.fill-blanks-word-bank-toggle {
  border: 0;
  background: none;
  color: var(--button-primary-background);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 600;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.fill-blanks-word-bank-toggle:focus-visible {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}

.fill-blanks-word-bank {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--app-muted-bg);
}

.fill-blanks-word-bank-heading {
  margin: 0 0 var(--space-2xs);
  color: var(--text-primary);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: 700;
}

.fill-blanks-word-bank-list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0 0 0 var(--space-sm);
  list-style: none;
}


.fill-blanks-word-bank-word {
  color: var(--text-primary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
}



.fill-blanks-action-list {
  display: grid;
  gap: var(--space-xs);
}

.fill-blanks-done-panel {
  display: grid;
  gap: var(--space-md);
}


.fill-blanks-success-message {
  margin: 0;
  padding: var(--space-sm);
  border: 1px solid var(--success-panel-color);
  border-radius: var(--radius-card);
  background-color: var(--success-panel-background);
  color: var(--success-panel-color);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
}

.fill-blanks-done-actions {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.fill-blanks-message p {
  margin: 0;
  line-height: 1.7;
}

.fill-blanks-message p + p {
  margin-top: 6px;
}

.fill-blanks-message input.fill-blanks-input {
  display: inline-block;
  width: auto;
  min-height: 44px;
  margin-inline: 4px;
  padding-inline: 8px;
  padding-block: 4px;
  border: 2px solid var(--input-border);
  border-radius: 8px;
  background-color: var(--input-background);
  color: var(--input-text);
  font-size: 1rem;
  line-height: 1.3;
  vertical-align: middle;
}


.fill-blanks-input:focus-visible {
  border-color: var(--input-border-focus);
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}

.fill-blanks-inline-group {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  vertical-align: baseline;
}

.fill-blanks-trailing-text {
  align-self: baseline;
}

.fill-blanks-blank-group {
  display: inline-grid;
  grid-template-rows: auto auto;
  vertical-align: baseline;
}

.fill-blanks-blank {
  display: inline-block;
  vertical-align: baseline;
}


.fill-blanks-message-stack {
  display: grid;
}

.fill-blanks-message-stack:has(.fill-blanks-error:not([hidden])) {
  margin-top: 4px;
  gap: 4px;
}

.fill-blanks-error {
  white-space: nowrap;
  color: var(--text-error);
  font-size: var(--font-error-size);
  line-height: var(--font-error-line-height);
  font-weight: var(--font-error-weight);
}


.fill-blanks-message input.fill-blanks-input--name {
  width: 12ch;
}

.fill-blanks-message input.fill-blanks-input--xshort {
  width: 5ch;
}

.fill-blanks-message input.fill-blanks-input--short {
  width: 7ch;
}

.fill-blanks-message input.fill-blanks-input--medium {
  width: 9ch;
}

.build-message-preview {
  min-height: 120px;
  padding: var(--space-md);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--app-card-bg);
}

.build-message-preview__empty {
  margin: 0;
  color: var(--text-secondary);
}

.build-message-count,
.build-message-feedback {
  margin: 0;
}

.build-message-feedback {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background-color: var(--app-card-bg);
  font-weight: 600;
}

.build-message-feedback--error {
  color: var(--text-error);
  border-color: var(--text-error);
  background-color: #fff3f3;
}

.build-message-feedback--success {
  color: var(--success-panel-color);
  border-color: var(--success-panel-color);
  background-color: var(--success-panel-background);
}


.build-message-tile-list,
.build-message-control-list,
.build-message-action-list {
  display: grid;
  gap: var(--space-xs);
}

.build-message-action-list {
  margin-top: var(--space-md);
}


.build-message-tile {
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background-color: #dcf8c6;
  color: var(--text-primary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  font-weight: 600;
  text-align: left;
}

.build-message-tile[aria-pressed="true"] {
  border-color: var(--text-primary);
  border-width: 2px;
  background-color: var(--app-card-bg);
  box-shadow: 0 0 0 2px var(--button-primary-border);
  font-weight: 700;
}

.build-message-tile-list--complete .build-message-tile {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.55;
  cursor: default;
  pointer-events: none;
}

.build-message-tile-list--complete {
  position: relative;
  gap: 0;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-message);
  background-color: #dcf8c6;
  box-shadow: var(--shadow-card);
}


.build-message-tile-list--complete::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background-color: #dcf8c6;
  transform: rotate(-45deg);
}




.build-message-reorder-label {
  margin: 0 0 var(--space-xs);
  color: var(--text-secondary);
  font-size: var(--font-helper-size);
  line-height: var(--font-helper-line-height);
  font-weight: var(--font-helper-weight);
  text-align: center;
}

.build-message-reorder-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.build-message-reorder-buttons .button {
  min-width: 84px;
  min-height: 52px;
  padding: var(--space-sm);
}

.build-message-reorder-buttons .button img {
  display: block;
  width: 28px;
  height: 28px;
}

@media (min-width: 1024px) {
  #activity-screen {
    padding: var(--space-md);
  }

  #activity-screen .screen-shell__header {
    margin-bottom: var(--space-xs);
  }

  #activity-screen .build-message-shell {
    gap: var(--space-sm);
  }

  #activity-screen .build-message-instruction {
    margin-bottom: var(--space-sm);
  }

  #activity-screen .activity-panel {
    padding: var(--space-sm);
  }

  #activity-screen .build-message-action-list {
    margin-top: var(--space-sm);
  }

  #activity-screen .build-message-reorder-label {
    margin-bottom: var(--space-2xs);
  }

  #activity-screen .build-message-reorder-buttons .button {
    min-height: 48px;
  }
}

.build-message-tile:focus-visible {
  outline: var(--control-focus-ring-width) solid var(--control-focus-ring-color);
  outline-offset: var(--control-focus-outline-offset);
  box-shadow: var(--control-focus-ring-shadow);
}