/* ============================================================================
   wood.css — چوب‌گزین (سواچ‌های واقعی) و برچسب آن
   ----------------------------------------------------------------------------
   تنها فایل ظاهریِ ساختاری جدید: چون این بخش تازه است (نه بازچینش پوستهٔ موجود)،
   اجازهٔ چیدمان دارد. sایهٔ بله (bale.css) دست‌نخورده می‌ماند.
   ==========================================================================*/
.woodsec {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.woodhead { display: flex; align-items: baseline; gap: 8px; }
.woodhead b { font-size: 12px; font-weight: 700; color: var(--txt); }
.woodhead small {
  margin-inline-start: auto; font-size: 10.5px; color: var(--dim2);
  font-variant-numeric: tabular-nums;
}
.woodpick {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.wsw {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surf2);
  padding: 3px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  align-items: center; transition: border-color .12s, background .12s;
}
.wsw:hover { border-color: var(--dim2); background: var(--surf3); }
.wsw svg { width: 100%; height: auto; border-radius: 5px; display: block; }
.wsw span { font-size: 9px; line-height: 1.25; color: var(--dim); text-align: center; }
.wsw.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.wsw.on span { color: var(--txt); font-weight: 700; }
.wsw:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
@media (max-width: 860px) {
  .woodpick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}