/* Production UX FIX1 — Student recordings */

.tlr-page{--tlr-navy:#0b213c;--tlr-green:#0d7357;--tlr-gold:#d4aa39;--tlr-muted:#778393}

.tlr-head{
  align-items:flex-end!important;
  gap:1.25rem!important;
}
.tlr-head-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
}
.tlr-count-badge{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:.45rem .75rem;
  border-radius:12px;
  background:#edf7f3;
  border:1px solid #d8ece5;
  color:var(--tlr-green);
  font-size:.76rem;
  font-weight:800;
}

.tlr-section-head{
  min-height:68px;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:1rem;
}
.tlr-text-link{
  color:var(--tlr-green);
  font-size:.76rem;
  font-weight:800;
  text-decoration:none;
}
.tlr-text-link:hover{text-decoration:underline}

.tlr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));
  gap:1rem;
}
.tlr-card{
  min-width:0;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  overflow:hidden;
  border:1px solid #e2e8e5;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 28px rgba(8,27,51,.055);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tlr-card:hover{
  transform:translateY(-2px);
  border-color:#cfe1da;
  box-shadow:0 16px 36px rgba(8,27,51,.085);
}
.tlr-preview{
  min-height:190px;
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:.6rem;
  background:
    radial-gradient(circle at 15% 15%,rgba(212,170,57,.16),transparent 38%),
    linear-gradient(145deg,#0a233d,#174d74);
  color:#fff;
}
.tlr-play{
  width:58px;height:58px;
  display:grid;place-items:center;
  padding-inline-start:4px;
  border-radius:50%;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.25);
  font-size:1.35rem;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.tlr-preview-label{
  font-size:.7rem;
  opacity:.8;
  font-weight:700;
}
.tlr-body{
  min-width:0;
  padding:1rem 1.05rem;
  display:flex;
  flex-direction:column;
}
.tlr-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.65rem;
}
.tlr-status{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .55rem;
  border-radius:999px;
  background:#eaf7f1;
  color:#087150;
  font-size:.66rem;
  font-weight:800;
}
.tlr-status:before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:#17a36d;
}
.tlr-date{
  color:var(--tlr-muted);
  font-size:.72rem;
  font-weight:700;
}
.tlr-title{
  margin:0 0 .65rem;
  color:var(--tlr-navy);
  font-size:1.2rem;
  font-weight:900;
  letter-spacing:-.02em;
}
.tlr-title-small{font-size:1.04rem}
.tlr-meta{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.tlr-meta span{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.3rem .55rem;
  border-radius:999px;
  background:#f6f8f8;
  color:var(--tlr-muted);
  font-size:.69rem;
}
.tlr-meta strong{
  color:#536173;
  font-weight:800;
}
.tlr-actions{
  margin-top:auto;
  display:flex;
  justify-content:flex-start;
}
.tlr-watch{
  min-width:145px;
  min-height:40px;
  padding:.5rem .85rem!important;
  font-size:.76rem!important;
}

.tlr-material-grid{display:grid;gap:.75rem}
.tlr-material{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:.85rem;
  padding:.8rem;
  border:1px solid #e3e9e6;
  border-radius:16px;
  background:#fff;
}
.tlr-material-copy{min-width:0}
.tlr-material-copy strong{
  display:block;
  color:var(--tlr-navy);
  margin-bottom:.15rem;
}
.tlr-material-copy small{display:block;color:var(--tlr-muted)}
.tlr-material-copy p{
  margin:.3rem 0 0;
  color:var(--tlr-muted);
  font-size:.72rem;
}
.tlr-empty{min-height:190px}

@media(max-width:767.98px){
  .tlr-head{
    align-items:stretch!important;
  }
  .tlr-head-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .tlr-count-badge{
    grid-column:1/-1;
    justify-content:center;
  }

  .tlr-grid{grid-template-columns:1fr;gap:.75rem}
  .tlr-card{
    grid-template-columns:105px minmax(0,1fr);
    border-radius:16px;
  }
  .tlr-preview{min-height:150px}
  .tlr-play{width:46px;height:46px;font-size:1rem}
  .tlr-preview-label{font-size:.6rem}
  .tlr-body{padding:.8rem}
  .tlr-title{font-size:.95rem;margin-bottom:.45rem}
  .tlr-topline{margin-bottom:.45rem}
  .tlr-status{font-size:.58rem;padding:.22rem .42rem}
  .tlr-date{font-size:.63rem}
  .tlr-meta{gap:.3rem;margin-bottom:.65rem}
  .tlr-meta span{font-size:.59rem;padding:.22rem .4rem}
  .tlr-watch{
    width:100%;
    min-width:0;
    min-height:36px;
    font-size:.68rem!important;
  }

  .tlr-section-head{
    min-height:60px;
    padding:.8rem!important;
  }
  .tlr-material{
    grid-template-columns:auto minmax(0,1fr);
  }
  .tlr-material .btn{
    grid-column:1/-1;
    width:100%;
  }
}