/* ============================ Mind map (bản đồ tiến độ học) ============================
   Panel dùng lại khung .calcguide-* (dock, head, nút chọn level, section <details>); file
   này chỉ thêm phần riêng: ô tổng, chú giải, thanh tiến độ của topic, nút subtopic.
   4 trạng thái — xem status() trong mind-map.js. */

.mm-s0{background:var(--surface-3); color:var(--ink-soft);}
.mm-s1{background:var(--hl-soft); color:#7A3B07;}
.mm-s2{background:var(--accent-soft); color:var(--accent-ink);}
.mm-s3{background:var(--sl-soft); color:#0A5E49;}

.mm-summary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:10px;}
.mm-tile{display:flex; flex-direction:column; gap:2px; padding:8px 9px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line); min-width:0;}
.mm-tile span{font-size:.64rem; color:var(--ink-faint); line-height:1.3;}
.mm-tile b{font-size:1rem; font-weight:600; color:var(--ink);}
.mm-tile small{font-size:.68rem; font-weight:400; color:var(--ink-faint);}

.mm-legend{display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 10px; font-size:.66rem; color:var(--ink-soft);}
.mm-legend span{display:inline-flex; align-items:center; gap:5px;}
.mm-dot{width:10px; height:10px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.06);}
.mm-empty{margin:8px 0; font-size:.76rem; color:var(--ink-faint);}

/* --- Topic (một nhánh) --- */
.mm-topic > summary{align-items:flex-start;}
.mm-topic-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
.mm-topic-name{display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--ink);}
.mm-here-dot{display:inline-block;}
.mm-topic-meta{font-size:.64rem; color:var(--ink-faint);}
.mm-meter{display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--surface-3);}
.mm-meter span{display:block; height:100%;}
/* Thanh mảnh 6px: màu nhạt của nút gần như không thấy — dùng màu đậm cùng họ. */
.mm-meter .mm-s1{background:var(--hl);} .mm-meter .mm-s2{background:var(--accent);} .mm-meter .mm-s3{background:var(--sl);}

/* --- Nút subtopic --- */
.mm-nodes{display:flex; flex-direction:column; gap:4px;}
.mm-node{
  display:flex; align-items:center; gap:8px; width:100%; min-width:0; text-align:left;
  padding:6px 9px; border:1px solid transparent; border-radius:var(--radius);
  font:inherit; font-size:.74rem; cursor:pointer;
}
.mm-node:hover{border-color:var(--line-strong);}
.mm-node.is-here{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent);}
.mm-node-wrap.is-open .mm-node{border-color:var(--ink-faint); border-bottom-left-radius:0; border-bottom-right-radius:0;}
.mm-code{flex:0 0 auto; min-width:54px; font-family:var(--font-mono); font-size:.64rem; font-weight:600;}
.mm-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mm-frac{flex:0 0 auto; font-size:.66rem; font-variant-numeric:tabular-nums;}

.mm-detail{
  padding:8px 10px 10px; border:1px solid var(--ink-faint); border-top:0;
  border-radius:0 0 var(--radius) var(--radius); background:var(--surface);
}
.mm-detail-name{font-size:.74rem; font-weight:500; color:var(--ink); line-height:1.4;}
.mm-detail-counts{display:flex; flex-wrap:wrap; gap:4px 12px; margin:5px 0 8px; font-size:.68rem; color:var(--ink-soft);}
.mm-detail-counts b{color:var(--ink); font-weight:600;}
.mm-detail-avg{margin:-3px 0 8px; font-size:.68rem; color:var(--ink-faint);}
.mm-show{
  padding:6px 12px; border:1px solid var(--accent); border-radius:var(--radius);
  background:var(--surface); color:var(--accent-ink); font:inherit; font-size:.74rem; cursor:pointer;
}
.mm-show:hover{background:var(--accent-soft);}
.mm-actions{display:flex; flex-wrap:wrap; gap:6px;}
.mm-practise{background:var(--accent); border-color:var(--accent); color:#fff;}
.mm-practise:hover{background:var(--accent-ink);}
.mm-show:disabled{opacity:.5; cursor:default;}

/* --- Ô tự chấm dưới markscheme (app.js vẽ) --- */
.rate-box{
  margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
}
.rate-q{flex:1 1 160px; min-width:0;}
.rate-q strong{display:block; font-size:.86rem; color:var(--ink);}
.rate-q span{font-size:.7rem; color:var(--ink-faint);}
.rate-btns{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; flex:1 1 300px;}
/* 5 nút ở panel/điện thoại hẹp: cho nhãn xuống dòng trong nút ("About / half") thay vì tràn. */
.rate-btn{
  min-width:0; min-height:36px; padding:5px 4px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface); color:var(--ink-soft); font:inherit; font-size:.76rem; line-height:1.2; cursor:pointer;
  white-space:normal; overflow-wrap:anywhere;
}
.rate-btn:hover{border-color:var(--ink-faint); color:var(--ink);}
/* Thang 0 None → 4 All of it: cam đậm → cam nhạt → xanh dương → xanh lá nhạt → xanh lá đậm. */
.rate-btn.is-on{font-weight:600;}
.rate-btn[data-score="0"].is-on{background:var(--hl); border-color:var(--hl); color:#fff;}
.rate-btn[data-score="1"].is-on{background:var(--hl-soft); border-color:var(--hl); color:#7A3B07;}
.rate-btn[data-score="2"].is-on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.rate-btn[data-score="3"].is-on{background:var(--sl-soft); border-color:var(--sl); color:#0A5E49;}
.rate-btn[data-score="4"].is-on{background:var(--sl); border-color:var(--sl); color:#fff;}
.rate-btn:disabled{opacity:.6; cursor:default;}
.rate-msg{flex:1 0 100%; font-size:.7rem; color:var(--ink-faint); min-height:1em;}

/* --- Thanh "My subjects" đầu panel (thay nút SL/HL — level lấy theo môn đã khai) --- */
.mm-subjects[hidden]{display:none;}
.mm-subjects{
  flex:0 0 auto; display:flex; gap:5px; padding:8px 14px; overflow-x:auto;
  border-bottom:1px solid var(--line); background:var(--surface-2); scrollbar-width:thin;
}
.mm-subj{
  flex:0 0 auto; max-width:180px; padding:5px 10px; border:1px solid var(--line-strong); border-radius:999px;
  background:var(--surface); color:var(--ink-soft); font:inherit; font-size:.74rem; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mm-subj b{font-weight:600; margin-left:2px;}
.mm-subj:hover{color:var(--ink); border-color:var(--ink-faint);}
.mm-subj.is-on{background:var(--accent); border-color:var(--accent); color:#fff;}
.mm-subj-edit{border-style:dashed; color:var(--accent-ink);}

.mm-banner{
  margin:0 0 10px; padding:8px 10px; border-radius:var(--radius); background:var(--gold-soft);
  font-size:.74rem; color:var(--ink-soft); line-height:1.45;
}
.mm-linkbtn{padding:0; border:0; background:none; color:var(--accent-ink); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer;}
.mm-start{padding:6px 2px; font-size:.82rem; color:var(--ink); line-height:1.5;}
.mm-start p{margin:0 0 10px;}
.mm-muted{color:var(--ink-faint); font-size:.76rem;}

/* Nhãn "Test in N days" — subtopic/topic thuộc một bài test sắp tới (khai ở tab Tests). */
.mm-test{
  flex:0 0 auto; display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  font-size:.62rem; font-weight:600; line-height:1.5; white-space:nowrap; vertical-align:middle;
  color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent);
}
.mm-test.is-soon{color:var(--hl); background:var(--hl-soft); border-color:var(--hl);}
.mm-node .mm-test{margin-left:0;}