/* V121 — Pre-clone release-candidate polish.
   Purpose: clarity, trust, guided action, consistent spacing and scalable Mastery discovery. */

.preclone-trust-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin:10px 0 14px;
  padding:0 8px;
}
.preclone-trust-strip span{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),#07070a;
  color:#e9e9ef;
  font-size:10px;
  font-weight:800;
  letter-spacing:.035em;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 7px 16px rgba(0,0,0,.28);
}
.preclone-trust-strip b{color:#c99aff;font-size:12px}

.mastery-quick-guide{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;
}
.mastery-quick-guide>div{
  position:relative;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:2px 11px;
  align-items:center;
  min-height:78px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008)),#08070b;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 24px rgba(0,0,0,.24);
}
.mastery-quick-guide span{
  grid-row:1/3;
  width:36px;height:36px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.7);
  border-radius:12px;
  background:radial-gradient(circle at 35% 28%,#e4c8ff,#9a50e9 36%,#391050 78%);
  color:#fff;font-weight:950;
  box-shadow:0 0 14px rgba(164,86,236,.34),inset 0 1px rgba(255,255,255,.5);
}
.mastery-quick-guide strong{color:#fff;font-size:12px;letter-spacing:.02em}
.mastery-quick-guide small{color:#cfcbd4;font-size:10px;line-height:1.3}

.mastery-status-filters{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
}
.mastery-status-filters button{
  min-height:36px;
  padding:7px 11px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.18);
  background:#08070b;
  color:#d7d3dc;
  font-size:9px;
  font-weight:900;
  letter-spacing:.065em;
}
.mastery-status-filters button.active{
  color:#fff;
  border-color:rgba(212,177,255,.8);
  background:linear-gradient(180deg,#5b2488,#261036);
  box-shadow:0 0 14px rgba(164,86,236,.24),inset 0 1px rgba(255,255,255,.16);
}
.mastery-library-head p{max-width:660px}
.mastery-check-card{scroll-margin-top:90px}
.mastery-check-card:hover{transform:translateY(-3px)}
.mastery-start{min-height:48px}
.mastery-result-actions-final [data-related-lesson]{
  border-color:rgba(201,154,255,.62)!important;
  background:linear-gradient(180deg,#20122c,#09070d)!important;
}

/* Keep important headings and supporting copy highly legible. */
.mastery-dialog p,
.mastery-dialog small{color:#d1ccd7}
.mastery-dialog h2,
.mastery-dialog h3,
.mastery-dialog strong{color:#fff}

/* Mobile: native-app feeling without crowding. */
@media(max-width:760px){
  .preclone-trust-strip{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:3px;
  }
  .preclone-trust-strip::-webkit-scrollbar{display:none}
  .preclone-trust-strip span{flex:0 0 auto}
  .mastery-quick-guide{grid-template-columns:1fr}
  .mastery-quick-guide>div{min-height:68px}
  .mastery-status-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .mastery-status-filters button{min-height:40px}
  .mastery-result-actions-final{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}

/* Reduced motion keeps all information and hierarchy. */
@media(prefers-reduced-motion:reduce){
  .mastery-check-card{transition:none!important}
  .mastery-check-card:hover{transform:none}
}