.persona-task-progress {
  margin: 10px 12px 14px;
  padding: 12px;
  border: 1px solid rgba(172, 217, 67, .42);
  border-radius: 14px;
  background: #f5f8ef;
  color: #000;
}

.persona-task-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.persona-task-progress > div span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
}

.persona-task-progress > div b {
  color: #000;
  font-size: 15px;
}

.persona-task-progress ol {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.persona-task-progress li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 7px;
  color: #000;
  font-size: 14px;
}

.persona-task-progress li i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #000;
  border-radius: 50%;
  font-style: normal;
  font-size: 12px;
}

.persona-task-progress li.done {
  color: #000;
}

.persona-task-progress li.done i {
  border-color: #d8ff63;
  background: #d8ff63;
  color: #000;
}

.persona-task-progress [data-persona-next] {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: #d8ff63;
  color: #000;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.persona-task-progress [data-persona-next] b { float: right; }

.persona-task-progress [data-persona-reset] {
  margin-top: 7px;
  padding: 3px;
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.learner-no-input {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 360px;
  padding: 12px 16px;
  border: 1px solid #a8d36d;
  border-radius: 14px;
  background: #f4fae8;
  color: #173d2d;
}

.learner-no-input > span { font-size: 30px; }
.learner-no-input b { display: block; font-size: 17px; }
.learner-no-input p { margin: 3px 0 0; font-size: 15px; line-height: 1.55; }

body[data-persona="learner"] .persona-menu header::before {
  content: "📖";
  float: right;
  font-size: 30px;
}

.input-recovery-notice {
  position: fixed;
  z-index: 10000;
  right: 24px;
  bottom: 24px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 18px;
  border: 2px solid #d29b2d;
  border-radius: 12px;
  background: #fff9e8;
  box-shadow: 0 12px 32px rgba(20, 50, 36, .2);
  color: #173d2d;
  font-size: 16px;
  font-weight: 800;
}

@media (max-width: 800px) {
  .learner-no-input { min-width: 0; }
}

/* Public 100-point hotfix: every word and symbol in the easy steps is black. */
.persona-task-progress,
.persona-task-progress *,
.persona-task-progress :is(button, a, b, strong, small, span, em, i) {
  color: #000 !important;
}

.persona-task-progress :is(a, [data-persona-reset]) {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Readable public baseline for older laptops and non-specialist users. */
.persona-primary-nav button small,
.current-role-button :is(small, b),
.persona-menu header p,
.input-tag {
  font-size: 14px !important;
}

.player-context :is(input, select),
.crop-first-examples button {
  min-height: 44px;
  font-size: 15px;
}