/* Styles for the self-practice trainer (le-practice.js). */

.lep {
  max-width: 640px;
}

.lep-mode {
  margin-bottom: 16px;
}

.lep-mode-switch {
  display: inline-flex;
  background: #F1F3F9;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  flex-wrap: wrap;
}

.lep-mode-btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: #4A5170;
}

.lep-mode-btn.is-active {
  background: #fff;
  color: #1A1F36;
  box-shadow: 0 2px 8px rgba(28, 39, 76, 0.14);
}

.lep-mode-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: #5B6380;
}

.lep-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.lep-tab {
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  background: #EEF2FF;
  color: #3B5BDB;
  transition: background 0.15s ease;
}

.lep-tab:hover {
  background: #E0E7FF;
}

.lep-tab.is-active {
  background: #4C6EF5;
  color: #fff;
}

.lep-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-weight: 800;
  color: #1A1F36;
  margin-bottom: 12px;
}

.lep-review-count {
  color: #B54708;
}

.lep-review-count:empty {
  display: none;
}

.lep-card {
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(28, 39, 76, 0.08);
}

.lep-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.lep-badge {
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
  background: #EEF2FF;
  color: #3B5BDB;
}

.lep-badge-topic {
  background: #F1F3F9;
  color: #4A5170;
}

.lep-badge-review {
  background: #FFF4E5;
  color: #B54708;
}

.lep-question {
  font-weight: 800;
  font-size: 18px;
  color: #1A1F36;
  margin: 0 0 18px;
}

.lep-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lep-answer {
  border: 2px solid #E6E9F2;
  background: #F5F7FC;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: #1A1F36;
}

.lep-answer:hover:not(:disabled) {
  border-color: #C5CCE8;
}

.lep-answer:disabled {
  cursor: default;
  opacity: 1;
}

.lep-answers-pics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.lep-answers-pics .lep-answer {
  font-size: 40px;
  line-height: 1.2;
  text-align: center;
  padding: 14px 6px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", inherit;
}

/* shared right / wrong states */
.lep-card .lep-correct {
  border-color: #12B76A;
  background: #ECFDF5;
  color: #067647;
}

.lep-card .lep-wrong {
  border-color: #E11D48;
  background: #FEF2F2;
  color: #B42318;
}

/* input */
.lep-input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lep-input {
  flex: 1 1 200px;
  min-width: 0;
  border: 2px solid #E6E9F2;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  color: #1A1F36;
  background: #F5F7FC;
}

.lep-input:focus {
  outline: none;
  border-color: #4C6EF5;
  background: #fff;
}

.lep-check,
.lep-next {
  border: 0;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  background: #4C6EF5;
  color: #fff;
}

.lep-check:disabled {
  opacity: 0.5;
  cursor: default;
}

.lep-next {
  margin-top: 14px;
  background: #F76707;
}

.lep-next[hidden] {
  display: none;
}

/* match */
.lep-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.lep-match-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lep-match-tile {
  border: 2px solid #E6E9F2;
  background: #F5F7FC;
  border-radius: 12px;
  padding: 12px 10px;
  min-height: 52px;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  color: #1A1F36;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lep-match-tile.lep-match-pic {
  font-size: 28px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", inherit;
}

.lep-match-tile.is-selected {
  border-color: #4C6EF5;
  background: #EEF2FF;
}

.lep-match-tile:disabled {
  cursor: default;
}

/* spell */
.lep-spell-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  border-radius: 12px;
  border: 2px solid transparent;
}

.lep-spell-slot {
  width: 38px;
  height: 44px;
  border-bottom: 3px solid #C5CCE8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #1A1F36;
}

.lep-spell-slot.is-filled {
  border-bottom-color: #4C6EF5;
}

.lep-spell-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lep-spell-tile {
  width: 46px;
  height: 46px;
  border: 2px solid #E6E9F2;
  border-radius: 12px;
  background: #fff;
  font-size: 20px;
  font-weight: 800;
  font-family: inherit;
  color: #1A1F36;
  cursor: pointer;
  box-shadow: 0 2px 0 #E6E9F2;
}

.lep-spell-tile:disabled {
  opacity: 0.25;
  cursor: default;
}

.lep-spell-controls {
  margin-top: 12px;
}

.lep-spell-ctrl {
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  color: #5B6380;
  cursor: pointer;
  padding: 4px 0;
}

/* feedback */
.lep-feedback:empty {
  display: none;
}

.lep-feedback {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  color: #1A1F36;
}

.lep-feedback.is-ok {
  background: #ECFDF5;
  color: #067647;
}

.lep-feedback.is-bad {
  background: #FEF2F2;
}

.lep-feedback.is-bad > strong {
  color: #B42318;
}

.lep-hint {
  margin: 8px 0 0;
}

.lep-hint-next {
  margin: 6px 0 0;
  font-size: 13px;
  color: #5B6380;
}

/* smart-mode summary */
.lep-weak {
  margin-top: 18px;
}

.lep-weak-title {
  margin: 0 0 6px;
  font-weight: 800;
  color: #1A1F36;
}

.lep-weak-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lep-weak-list li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  background: #FFF4E5;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
}

.lep-weak-name {
  font-weight: 800;
  color: #B54708;
}

.lep-weak-num {
  color: #7A4A12;
}

@media (max-width: 520px) {
  .lep-card {
    padding: 18px 14px;
  }

  .lep-answers-pics {
    grid-template-columns: repeat(2, 1fr);
  }

  .lep-spell-slot {
    width: 30px;
  }

  .lep-spell-tile {
    width: 42px;
    height: 42px;
  }
}

/* Running level estimate (le-practice.js renderLevel, 2026-10-06) */
.lep-level {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid #E6E9F2;
  border-radius: 14px;
  background: #F8FAFF;
}

.lep-level-head {
  margin: 0 0 8px;
  font-weight: 800;
  color: #1A1F36;
}

.lep-level-value {
  color: #3B5BDB;
}

.lep-level-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
}

.lep-level-seg {
  --fill: 0%;
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  border-radius: 999px;
  background: #E6E9F2;
  color: #64748B;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.lep-level-seg.is-current {
  background: linear-gradient(90deg, #C7D2FE var(--fill), #E6E9F2 var(--fill));
  color: #3B5BDB;
}

.lep-level-seg.is-done {
  background: #12B76A;
  color: #fff;
}

.lep-level-note {
  margin: 0;
  font-size: 0.92rem;
  color: #47506B;
}

.lep-level-small {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: #64748B;
}

.lep-level-reset {
  border: 0;
  padding: 0;
  background: none;
  color: #3B5BDB;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.lep-level-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lep-level-seg.is-assumed {
  background: #D1FADF;
  color: #067647;
}

.lep-level-notice {
  color: #B54708;
  font-weight: 700;
}

.lep-level-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 0.85rem;
}

.lep-level-start-label {
  color: #64748B;
  font-weight: 700;
  margin-right: 2px;
}

.lep-level-start-btn {
  border: 1px solid #C7D2FE;
  border-radius: 999px;
  padding: 3px 12px;
  background: #fff;
  color: #3B5BDB;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.lep-level-start-btn.is-active {
  background: #3B5BDB;
  border-color: #3B5BDB;
  color: #fff;
}

/* the question answered on the home page (2026-10-09) */
.lep-badge-home {
  background: #FFF0EA;
  color: #C2410C;
}