@charset "UTF-8";
/* ==========================================================================
   design.css — طبقةُ الضبط.

   ملفّان قبلها: app.css يرسم لغةَ التصميم، وschemes.css يبدّل لوحةَ الألوان.
   وهذا الثالث يفتح ما بينهما للتعديل: كلُّ رقمٍ كان مكتوباً بيده في القاعدة
   صار رمزاً له أصلٌ هنا وقيمةٌ تُكتب من شاشة الإعدادات.

   وأصلُ كلِّ رمزٍ في هذا الملفّ هو القيمة التي كانت مكتوبةً في app.css
   حرفياً — فالنظام بلا أي تعديلٍ محفوظ يُرسم كما كان يُرسم قبل هذا الملفّ،
   بكسلاً ببكسل. وما يُحفظ من الإعدادات يُحقن في ‎<head>‎ داخل
   ‎@media screen‎ وحدها، فلا يبلغ الورقةَ المطبوعة شيء.
   ========================================================================== */

:root {
  /* ---- الخطّ والنصّ ---- */
  --f-scale:    1;        /* معامل يُضرب في كل مقاس خطّ في النظام */
  --lh:         1.65;
  --tracking:   0em;
  --w-body:     400;
  --w-title:    600;
  /* وزنُ العنوان القويّ مشتقٌّ لا مستقلّ: العناوين الكبيرة أعلى بدرجةٍ
     واحدة من العناوين العادية، فتبقى المسافةُ بينهما ثابتةً مهما رُفع
     الوزنُ العام — ولا يُطلب من المستخدم ضبطُ رقمين ليحفظ فرقاً واحداً. */
  --w-title-hi: calc(var(--w-title) + 100);

  /* ---- اللوحات ---- */
  --frame-gap:  18px;
  --pad-card:   15px;
  --pad-card-y: 12px;

  /* ---- الكثافة ---- */
  --cell-x:     11px;
  --cell-y:     8px;
  --tbl-scale:  1;
  --ctrl-x:     10px;
  --ctrl-y:     7px;
  --btn-x:      14px;
  --btn-y:      7px;
  --nav-y:      7px;

  /* ---- الحوافّ ---- */
  --radius:      0px;
  --radius-ctrl: 0px;
  --bw:          1px;
  --elev:        0px;
  --focus-w:     2px;

  /* ظلُّ الارتفاع رمزٌ واحد تضيفه اللوحاتُ إلى ظلالها القائمة، لا قاعدةٌ
     تُكتب فوقها. والفرقُ ليس شكلياً: قاعدةٌ على ‎.frame‎ في هذا الملفّ
     تعلو — بحكم الترتيب — على ‎.frame--board‎ في الملفّ الذي قبله، فتمحو
     إطارَها النحاسيَّ الداخليّ وهي لا تقصد إلا أن تضيف ظلّاً تحتها.
     وبالصفر يُخرج ‎0 0 0 0‎: إعلانٌ صحيحٌ لا يُرسم منه شيء. */
  --shade: 0 calc(var(--elev) * 0.42) var(--elev) calc(var(--elev) * -0.55) rgba(0, 0, 0, .34);
}

/* ------------------------------------------------------------- الاستدارة

   الأصل صفر — لغةُ التصميم لوحةُ عملياتٍ مسطّرة لا بطاقاتٍ مستديرة. لكنّ
   الصفر هنا اختيارٌ لا حكم، فمن أراد استدارةً وجد مفتاحها.

   وقائمتان لا واحدة: اللوحةُ الكبيرة والزرُّ الصغير لا يُستديران بالقدر
   نفسه — ثمانيةُ بكسلات على لوحةٍ هدوءٌ، وعلى زرٍّ ارتفاعُه ثلاثون تكويرٌ
   كامل. وما كان مستديراً بطبعه (الصورة الشخصية، نقطةُ المفتاح اللوني)
   ليس في القائمتين فيبقى دائرةً كما كان.                                   */

.frame,
.note-box,
.alert,
.dispatch,
.menu__pop,
.combo__pop,
.gate__card,
.photo-card,
.scheme,
.tbl__empty,
.stat,
.recovery-key,
dialog {
  border-radius: var(--radius);
}

.btn,
.input,
.select,
.textarea,
.badge,
.op,
.tag-code,
.head__btn,
.head__search,
.org__chip,
.tab__count,
.nav__count {
  border-radius: var(--radius-ctrl);
}

/* ==========================================================================
   محرّر التصميم — شاشة الإعدادات وحدها.

   الحقلُ سطرٌ واحد: تسميةٌ، ومزلاجٌ يُجرّ، ورقمٌ يُكتب، وزرُّ ردٍّ إلى
   الأصل. والثلاثةُ على قيمةٍ واحدة — من جرّ المزلاج رأى الرقم يتبعه، ومن
   كتب الرقم رأى المزلاج ينتقل — لأنّ من يضبط مقاساً يعرف أحياناً الرقمَ
   الذي يريده ويبحث عنه أحياناً بعينه.
   ========================================================================== */

.dz__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px var(--pad-card);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: var(--deck-2);
  margin-block-end: 14px;
}

.dz__bar-note {
  font-size: calc(11.5px * var(--f-scale));
  color: var(--dim);
  min-inline-size: 0;
}

.dz__bar-spacer { margin-inline-start: auto; }

/* مبدّل الوضع — زرّان متلاصقان لا مفتاحُ تشغيل: اللونان يُحرَّران
   للوضعين معاً، والوضعُ المفتوح هو الذي يُحرَّر الآن. */
.dz__modes {
  display: inline-flex;
  border: var(--bw) solid var(--rule-2);
  border-radius: var(--radius-ctrl);
  overflow: hidden;
}

.dz__mode {
  padding: 5px 12px;
  font: inherit;
  font-size: calc(11.5px * var(--f-scale));
  background: var(--deck);
  color: var(--haze);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz__mode + .dz__mode { border-inline-start: var(--bw) solid var(--rule); }
.dz__mode.is-active { background: var(--accent); color: var(--ink); }

.dz__group { margin-block-end: 20px; }
.dz__group:last-child { margin-block-end: 0; }

/* ---------------------------------------------------------------- اللوحة

   بطاقةُ «اللوحة المخصَّصة» تُميَّز عن الجاهزات بحافّةٍ متقطّعة: الجاهزةُ
   مقيسةٌ مثبتة، وهذه تُبنى وتُبدَّل — فرقٌ يُرى قبل أن يُقرأ. ولا تُلوَّن
   بلون الخطر: هي اختيارٌ صحيح لا تحذير.                                    */

.dz .schemes { margin-block-end: 12px; }

.scheme--custom { border-style: dashed; }
.scheme--custom.is-active { border-style: solid; }

.dz__suspend {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 11px;
  border: var(--bw) solid var(--rule);
  border-inline-start: 3px solid var(--maint);
  border-radius: var(--radius);
  background: var(--maint-bg);
  color: var(--haze);
  font-size: calc(11.5px * var(--f-scale));
  line-height: 1.5;
}

.dz__suspend .ico { flex: none; color: var(--maint); margin-block-start: 2px; }

.dz__legend {
  font-family: var(--f-disp);
  font-size: calc(11.5px * var(--f-scale));
  font-weight: var(--w-title-hi);
  color: var(--accent);
  letter-spacing: .01em;
  padding-block-end: 6px;
  margin-block-end: 12px;
  border-block-end: var(--bw) solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.dz__legend-note {
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--dim);
  font-size: calc(11px * var(--f-scale));
}

.dz__rows { display: grid; gap: 9px; }

.dz__row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 2fr) 78px 30px;
  align-items: center;
  gap: 10px;
}

.dz__row.is-set .dz__label { color: var(--accent); font-weight: 500; }

.dz__label {
  font-size: calc(12px * var(--f-scale));
  min-inline-size: 0;
  line-height: 1.35;
}

.dz__hint {
  display: block;
  font-size: calc(10.5px * var(--f-scale));
  color: var(--dim);
  margin-block-start: 2px;
}

/* المزلاج: مسطرةٌ رفيعة ومقبضٌ مربّع — من لغة التصميم نفسها لا من
   افتراض المتصفّح، وإلا جاء بزوايا مستديرة وتدرّجٍ لا يشبه شيئاً حوله. */
.dz__range {
  appearance: none;
  inline-size: 100%;
  block-size: 20px;
  background: transparent;
  cursor: ew-resize;
  margin: 0;
}

.dz__range::-webkit-slider-runnable-track {
  block-size: 4px;
  background: var(--deck-3);
  border: var(--bw) solid var(--rule);
}

.dz__range::-webkit-slider-thumb {
  appearance: none;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: -6px;
  background: var(--accent);
  border: var(--bw) solid var(--accent);
  border-radius: var(--radius-ctrl);
}

.dz__range::-moz-range-track {
  block-size: 4px;
  background: var(--deck-3);
  border: var(--bw) solid var(--rule);
}

.dz__range::-moz-range-thumb {
  inline-size: 14px;
  block-size: 14px;
  background: var(--accent);
  border: var(--bw) solid var(--accent);
  border-radius: var(--radius-ctrl);
}

.dz__num {
  inline-size: 100%;
  text-align: center;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.dz__select { inline-size: 100%; }

/* زرُّ الردّ إلى الأصل — يظهر باهتاً ما دامت القيمة على أصلها، فلا يدعو
   إلى ضغطةٍ لا تفعل شيئاً، ولا يختفي فيتزحزح الصفّ كلّما مُسّ مزلاج. */
.dz__reset {
  inline-size: 26px;
  block-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: var(--bw) solid transparent;
  border-radius: var(--radius-ctrl);
  color: var(--dim);
  cursor: pointer;
  opacity: .28;
  transition: opacity .12s, color .12s, border-color .12s;
}

.dz__row.is-set .dz__reset,
.dz__swatch.is-set .dz__reset { opacity: 1; color: var(--out); border-color: var(--rule); }
.dz__reset:hover { border-color: var(--out); color: var(--out); opacity: 1; }
.dz__reset .ico { width: 13px; height: 13px; }

/* ---------------------------------------------------------- شبكة الألوان */

.dz__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
}

.dz__swatch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-ctrl);
  background: var(--deck-2);
  min-inline-size: 0;
}

.dz__swatch.is-set { border-color: var(--accent-dim); background: var(--deck-3); }

/* حقلُ اللون بحجمٍ معلوم: المتصفّح يعطيه عرضاً افتراضياً يختلف بين محرّك
   وآخر، فيخرج الصفُّ متفاوتاً بين نظامٍ وآخر بلا سبب يُرى. */
.dz__color {
  inline-size: 34px;
  block-size: 26px;
  flex: none;
  padding: 0;
  border: var(--bw) solid var(--rule-2);
  border-radius: var(--radius-ctrl);
  background: none;
  cursor: pointer;
}

.dz__color::-webkit-color-swatch-wrapper { padding: 2px; }
.dz__color::-webkit-color-swatch { border: 0; }
.dz__color::-moz-color-swatch { border: 0; }

.dz__swatch-body { min-inline-size: 0; flex: 1 1 auto; }

.dz__swatch-name {
  display: block;
  font-size: calc(11.5px * var(--f-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz__swatch-var {
  display: block;
  font-family: var(--f-mono);
  font-size: calc(10px * var(--f-scale));
  color: var(--dim);
  direction: ltr;
  text-align: start;
}

/* اللوح المخبوء: الوضعان في الشجرة معاً — وإلا لم يُرسل إلى الحافظ إلا
   ما كان مفتوحاً، فيُقرأ الوضعُ المغلق حذفاً لألوانه. */
.dz__pane[hidden] { display: none; }

@media screen and (max-width: 860px) {
  .dz__row {
    grid-template-columns: 1fr 78px 30px;
    grid-template-areas: 'label num reset' 'range range range';
  }
  .dz__label { grid-area: label; }
  .dz__num   { grid-area: num; }
  .dz__reset { grid-area: reset; }
  .dz__range { grid-area: range; }
}

@media print { .dz, .dz__bar { display: none; } }

/* صفُّ الاختيار — العائلة والوزن: لا مزلاج له، فالقائمةُ تملأ خانتيه */
.dz__row--pick .dz__select { grid-column: 2 / 4; }

@media screen and (max-width: 860px) {
  .dz__row--pick { grid-template-columns: 1fr 30px; grid-template-areas: 'label reset' 'pick pick'; }
  .dz__row--pick .dz__select { grid-area: pick; grid-column: auto; }
}