/* Cognita Board — Interactive Lesson Engine interfeysi.
   Ranglar/masofalar faqat tokens.css dan (yagona manba). Kanvasdagi obyektlar
   JS da chiziladi; bu yerda faqat panel, o'yin paneli, varaq va popoverlar. */

/* yuqori paneldagi matnli tugma */
.bd-btn-wide{width:auto;padding:0 12px 0 9px;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600}
.bd-btn-wide span{white-space:nowrap}
.bd-btn-wide.on{color:var(--accent-text);background:var(--accent-soft)}
@media (max-width:900px){.bd-btn-wide span{display:none}.bd-btn-wide{padding:0;width:36px;justify-content:center}}

/* ── yon panel ── */
.ile-panel{width:340px}
.ile-panel .bd-panel-top{gap:8px}
.ile-panel .bd-panel-top > svg{color:var(--accent-text);flex:none}
.ile-mode{flex:none}
.ile-mode button{font-size:.7rem;padding:4px 8px}
.ile-tabs{display:flex;gap:2px;padding:6px 8px 0;border-bottom:1px solid var(--border-subtle)}
.ile-tabs button{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);
  font-family:var(--font-sans);font-size:.78rem;font-weight:600;padding:8px 4px 9px;border-radius:6px 6px 0 0;transition:color .15s,background .15s}
.ile-tabs button:hover{color:var(--text-primary);background:var(--surface-hover)}
.ile-tabs button.on{color:var(--accent-text);border-bottom-color:var(--accent-primary)}
.ile-body{display:flex;flex-direction:column;gap:10px}
.ile-body section{display:flex;flex-direction:column;gap:10px}
.ile-body section[hidden]{display:none}
.ile-hint{font-size:.74rem;color:var(--text-secondary);line-height:1.45;margin:0}
.ile-hint b{color:var(--text-primary)}
.ile-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 8px 10px;color:var(--text-secondary)}
.ile-empty svg{color:var(--accent-text);opacity:.8}
.ile-empty p{margin:0;font-size:.82rem}
.ile-wide{width:100%;justify-content:center}
.ile-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ile-row-sm .btn{padding:5px 9px;font-size:.74rem}
.ile-body .btn{display:inline-flex;align-items:center;gap:6px}
.ile-body .btn svg{flex:none}

/* mashq bo'limi */
.ile-act-head h3{font-size:.95rem;margin:0 0 4px}
.ile-act-head p{margin:0;font-size:.8rem;color:var(--text-secondary);line-height:1.45}
.ile-title,.ile-instr,.ile-ai textarea,.ile-tgroup textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  color:var(--text-primary);font-family:var(--font-sans);font-size:.82rem;padding:7px 9px;resize:vertical}
.ile-title{font-weight:600;margin-bottom:6px}
.ile-title:focus,.ile-instr:focus,.ile-ai textarea:focus{outline:none;border-color:var(--accent-primary);background:var(--surface-1)}
.ile-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.7rem;color:var(--text-secondary)}
.ile-meta span{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface-2)}
.ile-st{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-pill);font-size:.68rem;font-weight:600;background:var(--surface-2);color:var(--text-secondary)}
.ile-st-live,.ile-st-correct,.ile-st-completed,.ile-st-done{background:var(--ok-soft);color:var(--ok)}
.ile-st-incorrect,.ile-st-missing,.ile-st-misplaced{background:var(--danger-soft);color:var(--danger)}
.ile-st-placed,.ile-st-dragging{background:var(--accent-soft);color:var(--accent-text)}
.ile-msg{padding:8px 10px;border-radius:var(--radius-md);font-size:.8rem;line-height:1.4;border:1px solid var(--border-subtle)}
.ile-msg.ok{border-color:var(--ok);color:var(--ok)}
.ile-msg.bad{border-color:var(--warn);color:var(--warn)}
.ile-sum{display:flex;flex-wrap:wrap;gap:6px;font-size:.72rem;color:var(--text-secondary)}
.ile-steps{display:flex;flex-direction:column;gap:4px}
.ile-step{display:flex;align-items:center;gap:8px;text-align:left;background:var(--surface-2);border:1px solid transparent;border-radius:var(--radius-md);
  color:var(--text-secondary);font-family:var(--font-sans);font-size:.76rem;padding:6px 8px}
.ile-step b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface-hover);font-size:.68rem;flex:none}
.ile-step.on{border-color:var(--accent-primary);color:var(--text-primary)}
.ile-step.done b{background:var(--ok);color:var(--bg-app)}
.ile-settings summary{cursor:pointer;font-size:.76rem;color:var(--text-secondary);font-weight:600;padding:4px 0}
.ile-form{display:flex;flex-direction:column;gap:6px;padding:6px 0}
.ile-field{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.74rem;color:var(--text-secondary)}
.ile-field select{max-width:58%;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:.74rem;padding:4px 6px}

/* yaratish bo'limi */
.ile-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ile-tool{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px 7px;background:var(--surface-2);border:1px solid transparent;
  border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-sans);font-size:.66rem;font-weight:600;transition:background .15s,color .15s}
.ile-tool:hover{background:var(--surface-hover);color:var(--text-primary)}
.ile-tool.on{background:var(--accent-soft);border-color:var(--accent-primary);color:var(--accent-text)}
.ile-ai,.ile-templates{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid var(--border-subtle)}
.ile-ai h4,.ile-templates h4{display:flex;align-items:center;gap:6px;font-size:.78rem;margin:0}
.ile-ai select{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:.76rem;padding:6px 8px}
.ile-tgroup summary{cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;color:var(--text-secondary);padding:5px 0}
.ile-tgroup[open] summary{color:var(--text-primary)}
.ile-tgroup textarea{margin:6px 0;font-family:var(--font-mono);font-size:.72rem}
.ile-tpl{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;border-radius:var(--radius-md);
  color:var(--text-primary);font-family:var(--font-sans);font-size:.76rem;padding:7px 8px}
.ile-tpl:hover{background:var(--surface-hover)}
.ile-tpl svg{color:var(--accent-text);flex:none}

/* ro'yxat */
.ile-item{padding:9px 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:5px}
.ile-item.on{border-color:var(--accent-primary)}
.ile-item-t{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.82rem}
.ile-item-m{font-size:.7rem;color:var(--text-secondary)}

/* ── o'yin paneli (doska ustida, pastda) ── */
.ile-bar{position:fixed;left:50%;bottom:58px;transform:translateX(-50%) translateY(16px);z-index:23;
  display:none;align-items:center;gap:8px;max-width:min(920px,calc(100vw - 32px));padding:8px 10px 8px 12px;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-float);
  opacity:0;transition:opacity .22s,transform .22s}
.ile-bar.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
.ile-bar-i{display:flex;align-items:center;gap:9px;min-width:0;cursor:pointer}
.ile-bar-i > svg{color:var(--accent-text);flex:none}
.ile-bar-txt{display:flex;flex-direction:column;min-width:0}
.ile-bar-txt b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ile-bar-txt span{font-size:.72rem;color:var(--text-secondary);line-height:1.35;max-width:46vw;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ile-bar-msg{font-size:.74rem;font-weight:600;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ile-bar-msg:empty{display:none}
.ile-bar-msg.ok{color:var(--ok)}
.ile-bar-msg.bad{color:var(--warn)}
.ile-bar .btn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;font-size:.76rem;white-space:nowrap}
.ile-bar .btn[hidden],.ile-bond[hidden]{display:none}
.ile-bond{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:.74rem;padding:5px 6px}
.ile-bar.min > *:not(.ile-bar-i){display:none}
.ile-bar.min .ile-bar-txt span{display:none}
body.viewer .ile-bar{bottom:70px}
@media (max-width:720px){
  .ile-bar{left:12px;right:12px;transform:none;max-width:none;flex-wrap:wrap;bottom:64px}
  .ile-bar.show{transform:none}
  .ile-bar-txt span{max-width:none}
  .ile-panel{left:10px;right:10px;width:auto;top:auto;height:62vh}
}

/* ── tanlov varag'i (Interaktiv qilish) ── */
.ile-sheet{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(0,0,0,.45);padding:16px}
.ile-sheet-card{width:min(520px,100%);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.ile-sheet-head{display:flex;align-items:center;gap:8px}
.ile-sheet-head svg{color:var(--accent-text)}
.ile-sheet-head b{flex:1;font-size:.95rem}
.ile-sheet-src{font-family:var(--font-mono);font-size:.76rem;color:var(--text-secondary);background:var(--surface-2);border-radius:var(--radius-md);padding:8px 10px;white-space:pre-wrap;max-height:96px;overflow:auto}
.ile-sheet-q{font-size:.82rem}
.ile-sheet-opts{display:flex;flex-direction:column;gap:4px}
.ile-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface-2);border:1px solid transparent;border-radius:var(--radius-md);
  color:var(--text-primary);font-family:var(--font-sans);font-size:.84rem;padding:10px 12px;transition:background .15s,border-color .15s}
.ile-opt svg{color:var(--accent-text);flex:none}
.ile-opt span{flex:1}
.ile-opt i{font-style:normal;font-size:.68rem;color:var(--text-secondary)}
.ile-opt:hover,.ile-opt:focus-visible{background:var(--surface-hover);border-color:var(--accent-primary)}
.ile-opt.on{border-color:var(--accent-primary)}
.ile-sheet-foot{display:flex;justify-content:flex-end;gap:6px}

/* ── kichik so'rov popoveri ── */
.ile-ask{position:fixed;z-index:71;width:280px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ile-ask label{font-size:.74rem;color:var(--text-secondary);font-weight:600}
.ile-ask input{width:100%;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:.84rem;padding:7px 9px}
.ile-ask input:focus{outline:none;border-color:var(--accent-primary)}
.ile-ask-row{display:flex;justify-content:flex-end;gap:6px}
.ile-ask .btn{padding:5px 11px;font-size:.76rem}

/* rejim belgilari */
body.ile-play .bd-tools{opacity:.55}
body.ile-play .bd-tools:hover{opacity:1}
body.ile-play #cv{touch-action:none}