/* Bảng vẽ kỹ thuật (VKT.Board). Mọi lớp có tiền tố bd-; màu lấy từ tokens.css.
   Chiều cao vùng vẽ: mặc định vừa khít tờ giấy theo bề rộng (JS đặt --bd-ar = rộng/cao của tờ giấy),
   nhưng không quá min(70vh,560px) và không dưới 300px. Muốn chiều cao cố định: đặt --bd-h trên phần tử chứa
   (ví dụ --bd-h:min(70vh,560px) hoặc --bd-h:420px). */
.bd-root{
  --bd-ink:var(--ink,#0f172a);
  display:flex; flex-direction:column; position:relative; container-type:inline-size;
  font-family:var(--font,system-ui,sans-serif); color:var(--ink,#0f172a);
  background:var(--card,#fff); border:1px solid var(--line,#dde3e8); border-radius:var(--r,14px); overflow:hidden;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
.bd-root:focus{outline:none}
.bd-root:focus-visible{outline:2px solid var(--pri,#12813f); outline-offset:2px}

/* ---------- Vùng vẽ ---------- */
.bd-stage{
  position:relative; overflow:hidden; background:var(--soft,#eef2f0);
  aspect-ratio:var(--bd-ar,4/3); height:var(--bd-h,auto); max-height:var(--bd-h,min(70vh,560px)); min-height:min(300px,70vh);
  flex:none; touch-action:none;
}
@supports (height:1svh){ .bd-stage{max-height:var(--bd-h,min(70svh,560px))} }
.bd-svg{display:block; width:100%; height:100%; touch-action:none; cursor:crosshair}
.bd-root[data-tool="pan"] .bd-svg,.bd-locked .bd-svg{cursor:grab}
.bd-svg.bd-grabbing{cursor:grabbing !important}
.bd-root[data-tool="erase"] .bd-svg,.bd-root[data-tool="hatch"] .bd-svg{cursor:pointer}

.bd-paper{fill:var(--paper,#fff); stroke:#b9c4cf; stroke-width:1; vector-effect:non-scaling-stroke}
.bd-g{fill:none; vector-effect:non-scaling-stroke; shape-rendering:crispEdges}
.bd-g1{stroke:var(--grid,#dbe3ec); stroke-width:1}
.bd-g5{stroke:#b3c1d1; stroke-width:1}
.bd-gh{stroke:#e9eef4; stroke-width:1; display:none}
.bd-fine .bd-gh{display:inline}
.bd-mode-iso .bd-g{shape-rendering:auto}
.bd-mode-iso .bd-g1{stroke:#cfd9e4}
.bd-mode-iso .bd-gh{stroke:#e6ecf2}

.bd-zone{fill:none; stroke:#7b8797; stroke-width:1.2; vector-effect:non-scaling-stroke}
.bd-zlabel{font:500 11px/1 var(--font,system-ui,sans-serif); fill:#5b6474; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round}

/* ---------- Kiểu nét (bề dày không đổi khi thu phóng) ---------- */
.bd-ln{fill:none; stroke:var(--bd-ink); vector-effect:non-scaling-stroke; stroke-linecap:round}
.bd-tA{stroke-width:2.6}
.bd-tE{stroke-width:1.4; stroke-dasharray:7 4; stroke-linecap:butt}
.bd-tG{stroke-width:1; stroke-dasharray:12 3 2 3; stroke-linecap:butt}
.bd-tB{stroke-width:1}
.bd-hatch{fill:none; stroke:var(--bd-ink); stroke-width:.8; vector-effect:non-scaling-stroke; stroke-linecap:butt}
.bd-del{stroke:var(--bad,#dc2626) !important}
.bd-ln.bd-del{stroke-width:3.4}

/* Xem trước khi đang vẽ */
.bd-prev{stroke:var(--pri,#12813f); pointer-events:none}
.bd-guide{fill:none; stroke:var(--pri,#12813f); stroke-width:1; stroke-opacity:.45; vector-effect:non-scaling-stroke; pointer-events:none}
.bd-dot{fill:var(--pri,#12813f); stroke:#fff; stroke-width:2; pointer-events:none}
.bd-dot0{fill:#fff; stroke:var(--pri,#12813f); stroke-width:2; pointer-events:none}
.bd-tip{
  position:absolute; left:0; top:0; pointer-events:none; white-space:nowrap;
  font-size:13px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
  padding:6px 9px; border-radius:999px; color:#fff; background:var(--pri-d,#0b5c2c); box-shadow:0 2px 8px rgba(15,23,42,.25);
}
.bd-tip[hidden],.bd-toast[hidden],.bd-legend[hidden],.bd-confirm[hidden]{display:none}

/* Kết quả chấm tô chồng: đúng xanh lá, sai/thừa đỏ, thiếu xanh dương nét đứt dày và mờ */
.bd-has-ov .bd-shapes{opacity:.28}
.bd-ov-ok{stroke:var(--ok,#15803d)}
.bd-ov-bad{stroke:var(--bad,#dc2626)}
.bd-ov-ok.bd-tA,.bd-ov-bad.bd-tA{stroke-width:3.2}
.bd-ov-ok.bd-tE,.bd-ov-bad.bd-tE{stroke-width:2}
.bd-ov-miss{stroke:var(--blue,#1d4ed8); stroke-width:5; stroke-dasharray:9 6; stroke-linecap:butt; stroke-opacity:.42}
.bd-legend{
  position:absolute; left:8px; top:8px; display:flex; gap:10px; pointer-events:none;
  font-size:12px; line-height:1; padding:6px 9px; border-radius:999px; color:var(--ink,#0f172a);
  background:rgba(255,255,255,.94); border:1px solid var(--line,#dde3e8);
}
.bd-legend span{display:inline-flex; align-items:center; gap:5px}
.bd-legend span::before{content:""; width:16px; height:0; border-top:3px solid var(--ok,#15803d)}
.bd-legend .bd-lg-bad::before{border-top-color:var(--bad,#dc2626)}
.bd-legend .bd-lg-miss::before{border-top:4px dashed var(--blue,#1d4ed8); opacity:.55}

/* Thông báo ngắn và hộp xác nhận tự vẽ trong vùng bảng */
.bd-toast{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); max-width:calc(100% - 24px); pointer-events:none;
  font-size:13px; line-height:1.35; text-align:center; padding:8px 14px; border-radius:999px;
  color:#fff; background:rgba(15,23,42,.9); box-shadow:0 4px 14px rgba(15,23,42,.2);
}
.bd-confirm{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,42,.32)}
.bd-confirm-box{width:min(100%,280px); padding:16px; border-radius:var(--r,14px); background:var(--card,#fff); box-shadow:0 12px 32px rgba(15,23,42,.28)}
.bd-confirm-box p{margin:0 0 14px; font-size:15px; font-weight:600; text-align:center}
.bd-confirm-box div{display:flex; gap:8px}
.bd-cbtn{
  flex:1; min-height:44px; padding:0 10px; border-radius:var(--r-s,10px); border:1px solid var(--line,#dde3e8);
  background:var(--card,#fff); color:var(--ink,#0f172a); font:600 14px/1 var(--font,system-ui,sans-serif); cursor:pointer; touch-action:manipulation;
}
.bd-cbtn-bad{background:var(--bad,#dc2626); border-color:var(--bad,#dc2626); color:#fff}

/* ---------- Thanh công cụ ---------- */
.bd-bar{background:var(--card,#fff); border-top:1px solid var(--line,#dde3e8)}
.bd-toolwrap{position:relative; min-width:0}
.bd-toolwrap::before,.bd-toolwrap::after{
  content:""; position:absolute; top:0; bottom:0; width:22px; pointer-events:none; opacity:0; transition:opacity .15s; z-index:1;
}
.bd-toolwrap::before{left:0; background:linear-gradient(90deg,var(--card,#fff) 20%,rgba(255,255,255,0))}
.bd-toolwrap::after{right:0; background:linear-gradient(270deg,var(--card,#fff) 20%,rgba(255,255,255,0))}
.bd-more-l::before,.bd-more-r::after{opacity:1}
.bd-tools{
  display:flex; gap:4px; padding:6px 8px 4px; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.bd-tools::-webkit-scrollbar{display:none}
.bd-btn{
  -webkit-appearance:none; appearance:none; box-sizing:border-box; margin:0; min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid transparent; border-radius:var(--r-s,10px); background:none; color:var(--ink,#0f172a);
  font:inherit; cursor:pointer; touch-action:manipulation;
}
.bd-btn:focus-visible,.bd-cbtn:focus-visible{outline:2px solid var(--pri,#12813f); outline-offset:1px}
.bd-btn:disabled{opacity:.35; cursor:default}
.bd-tool{
  flex:1 0 auto; flex-direction:column; gap:4px; min-width:58px; min-height:52px; padding:7px 5px 5px;
  font-size:11px; line-height:1.1; white-space:nowrap; color:var(--muted,#5b6474);
  border-color:var(--line,#dde3e8); background:var(--card,#fff);
}
.bd-tool[aria-pressed="true"]{
  background:var(--pri-l,#e2f3e8); border-color:var(--pri,#12813f); box-shadow:inset 0 0 0 1px var(--pri,#12813f);
  color:var(--pri-d,#0b5c2c); font-weight:600;
}
.bd-ico{width:36px; height:18px; flex:none; fill:none; stroke:var(--ink,#0f172a); stroke-linecap:round; stroke-linejoin:round; color:var(--ink,#0f172a)}
.bd-tool[aria-pressed="true"] .bd-ico{stroke:var(--pri-d,#0b5c2c); color:var(--pri-d,#0b5c2c)}
.bd-acts{display:flex; align-items:center; gap:2px; padding:0 8px 6px}
.bd-gap{flex:1}
.bd-act{padding:0 9px; font-size:12.5px; white-space:nowrap; color:var(--muted,#5b6474)}
.bd-act[data-act="fit"] span{display:none}
@container (min-width:480px){ .bd-act[data-act="fit"] span{display:inline} }
.bd-ico2{width:22px; height:22px; flex:none; fill:none; stroke:var(--ink,#0f172a); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){
  .bd-tool:not([aria-pressed="true"]):not(:disabled):hover,.bd-act:not(:disabled):hover{background:var(--soft,#eef2f0)}
}
.bd-btn:not(:disabled):active{background:var(--pri-l,#e2f3e8)}

/* Container rộng (máy tính): gom hai hàng thành một */
@container (min-width:940px){
  .bd-bar{display:flex; align-items:center}
  .bd-toolwrap{flex:1 1 auto}
  .bd-tools{padding-bottom:6px}
  .bd-tool{flex:0 0 auto; min-width:66px}
  .bd-acts{flex:none; padding:0 8px 0 4px}
  .bd-gap{flex:none; width:10px}
}
@media (prefers-reduced-motion:reduce){ .bd-toolwrap::before,.bd-toolwrap::after{transition:none} }