/* =========================================================
   v0.9.5 — Route identity and focused learning surfaces

   This final layer keeps the calm flat system while making the product easier
   to recognise at a glance. It deliberately adds no character artwork yet:
   the route mark is the reusable identity until that system is introduced.
   ========================================================= */

/* Product mark and endorsed brand. */
.nle-logo,
.nle-hub-logo{
  display:grid;
  place-items:center;
}
.nle-logo svg{
  width:23px;
  height:23px;
  display:block;
}
.nle-brand-copy{
  min-width:0;
  display:grid;
  gap:1px;
}
.nle-brand-copy b{line-height:1.12;}
.nle-brand-copy small{
  margin:0;
  color:var(--nle-sub);
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
  line-height:1.2;
}
.nle-hub-brandline{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
}
.nle-hub-brandline .nle-eyebrow{margin:0;}
.nle-hub-logo{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:9px;
  color:#fff;
  background:var(--nle-brand);
}
.nle-hub-logo svg{width:19px;height:19px;display:block;}

/* The audio control is one focused action plus a compact speed selector. */
.nle-audio-card{padding:14px;}
.nle-audio-top{gap:10px;}
.nle-audio-title{padding-left:13px;}
.nle-audio-title:before{width:6px;height:6px;top:5px;border-radius:50%;}
.nle-audio-title b{font-size:13.5px;}
.nle-audio-title small{margin-top:2px;font-size:10px;line-height:1.35;}
.nle-audio-card .nle-play{
  width:44px;
  height:44px;
  flex-basis:44px;
  border-radius:50%;
}
.nle-audio-icon{width:19px;height:19px;}
.nle-audio-progress{
  grid-template-columns:33px minmax(0,1fr) 34px 42px;
  gap:6px;
  margin-top:11px;
}
.nle-audio-current,.nle-audio-duration{font-size:9.5px;}
.nle-speed-cycle{
  min-height:28px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:1px solid var(--nle-line);
  border-radius:999px;
  color:var(--nle-brand);
  background:var(--nle-soft);
  cursor:pointer;
  font-size:9px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.nle-speed-cycle:hover{border-color:var(--nle-brand);}
.nle-speed-cycle:active{transform:translateY(1px);}
.nle-audio-lock-hint{margin-top:9px;padding:7px 8px;font-size:10px;}

/* STEP 2 is a short sorting pass, not a stack of full explanation cards. */
#nle-lesson-root[data-step="2"] .nle-step2-sort-head{margin-bottom:5px;}
#nle-lesson-root[data-step="2"] .nle-instruction{margin:0 0 10px;font-size:11.5px;line-height:1.55;}
#nle-lesson-root[data-step="2"] .nle-sentence-list{gap:8px;}
#nle-lesson-root[data-step="2"] .nle-sentence{padding:12px;border-radius:14px;}
#nle-lesson-root[data-step="2"] .nle-sentence-top{
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
}
#nle-lesson-root[data-step="2"] .nle-speaker{width:26px;height:26px;font-size:9px;}
#nle-lesson-root[data-step="2"] .nle-en{margin:2px 0 0;font-size:13.5px;line-height:1.52;}
.nle-sentence-tools{display:flex;align-items:center;gap:5px;}
#nle-lesson-root[data-step="2"] .nle-sentence-audio{
  width:34px;
  min-width:34px;
  min-height:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border-radius:10px;
}
#nle-lesson-root[data-step="2"] .nle-sentence-audio .nle-audio-icon{width:16px;height:16px;}
#nle-lesson-root[data-step="2"] .nle-sentence-index{
  min-width:31px;
  padding:3px 0;
  background:transparent;
  font-size:9px;
}
#nle-lesson-root[data-step="2"] .nle-explanation.is-compact{
  display:block;
  margin-top:9px;
  padding-top:8px;
}
#nle-lesson-root[data-step="2"] .nle-explanation.is-compact .nle-meaning-block{display:block;}
#nle-lesson-root[data-step="2"] .nle-explanation.is-compact .nle-jp{font-size:13px;line-height:1.58;}
#nle-lesson-root[data-step="2"] .nle-point-disclosure{margin-top:7px;}
#nle-lesson-root[data-step="2"] .nle-point-disclosure>summary{min-height:35px;font-size:11px;}
#nle-lesson-root[data-step="2"] .nle-known-check{
  min-height:38px;
  margin-top:8px;
  padding:8px 0 0!important;
  font-size:11.5px;
}
#nle-lesson-root[data-step="2"] .nle-known-check span:last-child{font-size:11.5px;}
#nle-lesson-root[data-step="2"] .nle-known-check .nle-check-mark{width:19px;height:19px;flex-basis:19px;border-radius:6px;font-size:11px;}

/* Completion feels earned without turning into a game-like reward screen. */
.nle-complete-card{padding:25px 20px 21px;}
.nle-complete-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.nle-complete-heading .nle-complete-mark{margin:0;}
.nle-complete-kicker{
  margin:0!important;
  color:var(--nle-brand)!important;
  font-size:9px!important;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.2!important;
}
.nle-complete-card h2{margin:13px 0 0;text-align:center;}
.nle-complete-card .nle-complete-lead{margin:6px 0 0;text-align:center;}
.nle-complete-card>.nle-complete-route{margin-top:17px;}
.nle-complete-summary{margin-top:14px;}
.nle-complete-streak{margin:13px 0;}

/* The parent brand link is present, but never competes with the next lesson. */
.nle-parent-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:54px;
  margin-top:15px;
  padding:12px 1px 0;
  border-top:1px solid var(--nle-line);
  color:var(--nle-ink);
  text-decoration:none;
}
.nle-parent-link span{display:grid;gap:3px;}
.nle-parent-link small{color:var(--nle-brand);font-size:8px;font-weight:900;letter-spacing:.1em;}
.nle-parent-link b{font-size:12px;}
.nle-parent-link i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid var(--nle-line);
  border-radius:8px;
  color:var(--nle-brand);
  font-style:normal;
}
.nle-parent-link:hover b,.nle-parent-link:hover i{color:var(--nle-brand);}
.nle-parent-link:hover i{border-color:var(--nle-brand);background:var(--nle-soft);}

@media(max-width:390px){
  .nle-brand-copy small{font-size:7.5px;}
  .nle-audio-progress{grid-template-columns:31px minmax(0,1fr) 32px 39px;gap:5px;}
  .nle-speed-cycle{font-size:8.5px;}
  #nle-lesson-root[data-step="2"] .nle-sentence{padding:11px;}
  #nle-lesson-root[data-step="2"] .nle-sentence-tools{gap:3px;}
  #nle-lesson-root[data-step="2"] .nle-sentence-index{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .nle-speed-cycle{transition:none!important;}
}