/* ================================
   CCL MockTest – Frontend Styles
   Scoped to .ccl-mocktest to avoid theme conflicts
================================== */

.ccl-mocktest{
  --accent:#bf0d3d;
  --bg:#ffffff;
  --fg:#111;
  --muted:#5b5b5b;
  --edge:#e9e9e9;
  --card:#fafafa;
  color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
}

.ccl-mocktest *{box-sizing:border-box}

.ccl-mocktest .wrap{
  width:min(980px, calc(100vw - 28px));
  margin:24px auto;
  border:1px solid var(--edge);
  border-radius:16px;
  padding:20px;
  background:var(--bg);
}

.ccl-mocktest h1{
  margin:0 0 6px;
  font-size:20px;
  font-weight:800;
}

.ccl-mocktest .sub{
  margin:4px 0 14px;
  color:var(--muted);
  font-size:13px;
}

.ccl-mocktest .bar{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:10px 0;
}

.ccl-mocktest .btn{
  appearance:none;
  border:1px solid var(--edge);
  background:#fff;
  color:var(--fg);
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  line-height:1;
}

.ccl-mocktest .btn:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent) 45%, #fff);
  outline-offset:2px;
}

.ccl-mocktest .primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.ccl-mocktest .ghost{background:#fff}

.ccl-mocktest .danger{
  background:#ff5a5a;
  color:#fff;
  border-color:#ff5a5a;
}

.ccl-mocktest .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.ccl-mocktest .timer{
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  font-weight:900;
}

.ccl-mocktest .caps{
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.ccl-mocktest .row{margin-top:12px}

.ccl-mocktest label.lbl{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
}

.ccl-mocktest audio{
  width:100%;
  border-radius:12px;
}

.ccl-mocktest .fine{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  min-height:18px;
}

.ccl-mocktest .progress{
  height:8px;
  background:#f3f3f3;
  border-radius:999px;
  overflow:hidden;
  margin:6px 0 8px;
}

.ccl-mocktest .progress > span{
  display:block;
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .15s linear;
}

/* ================================
   Dialogue chooser
================================== */

.ccl-mocktest .dlgList{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.ccl-mocktest .optCard{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--edge);
  background:#fff;
  border-radius:12px;
  padding:12px;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .06s;
}

.ccl-mocktest .optCard:hover{
  border-color:color-mix(in oklab, var(--accent) 35%, #ddd);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 12%, #fff);
}

.ccl-mocktest .optCard:active{transform:translateY(1px)}

.ccl-mocktest .optCard input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.ccl-mocktest .optTick{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border:2px solid var(--edge);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:900;
  color:#fff;
  background:#fff;
}

.ccl-mocktest .optBody{min-width:0}

.ccl-mocktest .optTitle{font-weight:800}

.ccl-mocktest .optMeta{
  font-size:12px;
  color:var(--muted);
}

.ccl-mocktest .optCard.selected{
  background:color-mix(in oklab, var(--accent) 6%, #fff);
  border-color:var(--accent);
}

.ccl-mocktest .optCard.selected .optTick{
  background:var(--accent);
  border-color:var(--accent);
}

/* ================================
   Visualizer
================================== */

.ccl-mocktest .vizWrap{
  position:relative;
  width:100%;
  aspect-ratio: 16/5;
  border-radius:12px;
  border:1px solid var(--edge);
  background:#f7f7f7;
  overflow:hidden;
  margin:8px 0 12px;
}

.ccl-mocktest canvas.ccl-viz{
  display:block;
  width:100%;
  height:100%;
}

.ccl-mocktest .vizOverlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  font-weight:900;
  font-size:52px;
  color:var(--accent);
}

/* ================================
   Noise indicator
================================== */

.ccl-mocktest .noiseCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--edge);
  background:#fff;
  padding:12px;
  border-radius:12px;
}

.ccl-mocktest .noiseInfo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.ccl-mocktest .noiseBadge{
  min-width:96px;
  text-align:center;
  font-weight:900;
  border-radius:10px;
  padding:10px 12px;
  background:#eee;
  color:#111;
  font-variant-numeric:tabular-nums;
}

.ccl-mocktest .noiseText{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ccl-mocktest .legend{
  display:flex;
  gap:12px;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  flex-wrap:wrap;
}

.ccl-mocktest .legend > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ccl-mocktest .dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

/* ================================
   Responsive
================================== */

@media (max-width: 820px){
  .ccl-mocktest .dlgList{grid-template-columns:1fr}
  .ccl-mocktest .timer{order:10; width:100%; text-align:right}
  .ccl-mocktest .wrap{padding:16px}
}

@media (max-width: 420px){
  .ccl-mocktest .btn{width:100%; justify-content:center}
  .ccl-mocktest .vizOverlay{font-size:42px}
}