/* 🔔 مُختارُ النغمات — مشتركٌ بين لوحة المطعم وبوّابة الكابتن (ه-١٩٧).
 *
 * 📌 **ورقةٌ واحدةٌ لا نسختان**: الصفحتان تصفّان المُختارَ نفسَه،
 * **ونسخُ القواعد فيهما يجعل تحسينَ إحداهما يترك الأخرى خلفَه** —
 * وهو بعينه ما وقع في اللون مرّتين. */

.tone-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(127, 127, 127, .35);
  display: flex;
  flex-wrap: wrap;            /* 📱 يلتفّ على ٣٦٠px ولا يدفع الصفحة عرضاً */
  align-items: center;
  gap: 8px;
}

.tone-box .tone-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 210px;            /* يتمدّد ولا ينكمش دون عرضِ اسمِ نغمةٍ كامل */
  min-width: 0;
}

.tone-box .tone-lbl { font-weight: 700; white-space: nowrap; }

.tone-box .tone-sel {
  flex: 1 1 auto;
  min-width: 0;               /* 🔑 وإلّا دفع النصُّ الطويلُ الصندوقَ خارجَ الشاشة */
  font: inherit;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(127, 127, 127, .45);
  background: Field;          /* يتبع وضعَ الجهاز — فلا حبرٌ أبيضُ على أبيض */
  color: FieldText;
}

.tone-box .tone-btn {
  font: inherit;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(127, 127, 127, .45);
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-height: 40px;           /* 👆 هدفُ لمسٍ لا يقلّ عن ٤٠px */
}

.tone-box .tone-btn:hover { border-color: currentColor; }

.tone-box .tone-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.tone-box .tone-note {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: .85rem;
  opacity: .75;
}