/* ===========================================================
   Urealm — الاستوديو: الشجرة، والمحرّر، والمعاينة، والسجلّ.

   ▸ **تلوين الشيفرة أحاديّ أيضًا.** لا سبعة ألوان تتنافس على العين:
     الوزن والعتمة يحملان البنية — الوسم والكلمة المفتاحية أثقل،
     والتعليق أخفت، والنصّ وحده يأخذ لونًا واحدًا خافتًا لأنّه الشيء
     الذي يُبحث عنه فعلًا في ملفّ.
   =========================================================== */

.view--studio { max-inline-size: none; gap: 0; block-size: 100%; overflow: hidden; }

.studio__work {
  display: grid;
  grid-template-columns: var(--studio-split, 50%) 6px minmax(0, 1fr);
  block-size: 100%;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
}

/* ----------------------- الشريط ----------------------- */

.studio__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  padding-inline: var(--sp-3);
  border-block-end: 1px solid var(--line);
  background: var(--bg-deep);
}

.studio__bar-end { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; }
.studio__title { font-size: var(--t-sm); font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio__path { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); direction: ltr; }
.studio__status { font-size: var(--t-xs); color: var(--fg-mute); }
.studio__mark { display: grid; place-items: center; color: var(--fg-mute); }
.studio__divider {
  position: relative;
  inline-size: 6px;
  block-size: 100%;
  background: transparent;
  cursor: col-resize;
}

.studio__divider::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  background: var(--line);
}

.icon-btn--sm { inline-size: 36px; block-size: 36px; }

/* ----------------------- الأجزاء ----------------------- */

.studio__body { flex: 1; min-block-size: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }

@media (max-width: 900px) { .studio__body { grid-template-columns: minmax(0, 1fr); } }

.studio__files {
  border-inline-end: 1px solid var(--line);
  overflow-y: auto;
  background: var(--bg-deep);
  padding: var(--sp-2);
}

@media (max-width: 900px) { .studio__files { display: none; } }

.studio__panes { display: none; }

.studio__pane { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.studio__pane--code { border-inline-end: 1px solid var(--line); }
.studio__pane--view { background: var(--bg-void); }

.view--studio[data-layout="editor"] .studio__work { grid-template-columns: minmax(0, 1fr); }
.view--studio[data-layout="editor"] .studio__divider,
.view--studio[data-layout="editor"] .studio__pane--view { display: none; }

.view--studio[data-layout="preview"] .studio__work { grid-template-columns: minmax(0, 1fr); }
.view--studio[data-layout="preview"] .studio__divider,
.view--studio[data-layout="preview"] .studio__pane--code { display: none; }

.studio__editor { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.studio__preview { flex: 1; inline-size: 100%; border: 0; background: #fff; }

.studio__preview-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 34px;
  padding-inline: var(--sp-3);
  border-block-end: 1px solid var(--line);
  font-size: var(--t-2xs);
  color: var(--fg-mute);
}

.studio__live { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--success); }

.studio__empty,
.studio__binary { display: grid; place-items: center; gap: var(--sp-2); padding: var(--sp-10); text-align: center; color: var(--fg-mute); font-size: var(--t-sm); }

.studio__find {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-inline-size: 0;
  max-inline-size: 220px;
}

/* زرّ تبديل الجزء على الضيّق: شيفرة أو معاينة، لا الاثنان. */
.studio__pane-btn {
  min-block-size: 36px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg-mute);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.studio__pane-btn:hover { color: var(--fg); border-color: var(--line-strong); }
.studio__pane-btn.is-active { background: var(--fg); border-color: var(--fg); color: var(--bg-base); }

.studio__touch { display: none; }

@media (max-width: 900px) {
  .view--studio.is-mobile .studio__bar .segmented,
  .view--studio.is-mobile .studio__status { display: none; }

  .view--studio.is-mobile .studio__body { grid-template-columns: minmax(0, 1fr); }
  .view--studio.is-mobile .studio__work { display: block; }
  .view--studio.is-mobile .studio__files,
  .view--studio.is-mobile .studio__pane,
  .view--studio.is-mobile .studio__divider { display: none; }

  .view--studio.is-mobile[data-pane="files"] .studio__files { display: block; }
  .view--studio.is-mobile[data-pane="code"] .studio__pane--code,
  .view--studio.is-mobile[data-pane="preview"] .studio__pane--view,
  .view--studio.is-mobile[data-pane="console"] .studio__pane--view { display: flex; block-size: 100%; }

  .view--studio.is-mobile[data-pane="preview"] .console { display: none; }
  .view--studio.is-mobile[data-pane="console"] .studio__preview-bar,
  .view--studio.is-mobile[data-pane="console"] .studio__preview { display: none; }

  .studio__touch {
    display: flex;
    flex: none;
    gap: var(--sp-1);
    min-inline-size: 0;
    padding: var(--sp-1) var(--sp-2);
    border-block-start: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .view--studio.is-mobile:not([data-pane="code"]) .studio__touch { display: none; }

  .studio__panes {
    display: grid;
    flex: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2) var(--sp-2);
    border-block-start: 1px solid var(--line);
    background: var(--bg-deep);
  }

  .studio__pane-btn {
    min-block-size: 44px;
    padding-inline: var(--sp-2);
  }
}

/* ---------- ألسنة الملفّات ---------- */

.studio__tabs { display: flex; gap: 1px; overflow-x: auto; border-block-end: 1px solid var(--line); scrollbar-width: none; }

.studio__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-block-size: 40px;
  padding-inline: var(--sp-3);
  border-block-end: 2px solid transparent;
  color: var(--fg-mute);
  font-size: var(--t-xs);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.studio__tab:hover { background: var(--hover); color: var(--fg-soft); }
.studio__tab.is-active { color: var(--fg); border-block-end-color: var(--fg); background: var(--bg-surface); }
.studio__tab-name { font-family: var(--font-mono); direction: ltr; }

.studio__tab-close {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--r-xs);
  color: var(--fg-faint);
}

.studio__tab-close:hover { background: var(--active); color: var(--fg); }

/* ----------------------- الشجرة ----------------------- */

.tree { display: flex; flex-direction: column; gap: var(--sp-2); }
.tree__head { display: flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-2); }

.tree__title {
  flex: 1;
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.tree__body { display: flex; flex-direction: column; gap: 1px; }

.tree__row,
.tree__entry {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: 28px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--fg-soft);
  font-size: var(--t-xs);
  text-align: start;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.tree__row:hover,
.tree__entry:hover { background: var(--hover); color: var(--fg); }

.tree__entry.is-active { background: var(--selected); color: var(--fg); }
.tree__row--dir { color: var(--fg-mute); font-weight: var(--w-medium); }

.tree__icon { flex: none; display: grid; place-items: center; color: var(--fg-faint); }
.tree__name { flex: 1; min-inline-size: 0; font-family: var(--font-mono); direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__chevron { flex: none; color: var(--fg-faint); transition: transform var(--dur-1) var(--ease); }
.tree__row--dir[aria-expanded="true"] .tree__chevron { transform: rotate(90deg); }
.tree__empty { padding: var(--sp-4) var(--sp-2); font-size: var(--t-xs); color: var(--fg-faint); }

/* ----------------------- المحرّر ----------------------- */

.code {
  display: flex;
  flex: 1;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: hidden;
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  direction: ltr;
  text-align: left;
  tab-size: 2;
}

.code__gutter {
  flex: none;
  inline-size: 46px;
  padding-block: 12px;
  overflow: hidden;
  border-inline-end: 1px solid var(--line);
  background: var(--bg-sunken);
  color: var(--fg-faint);
  text-align: right;
  user-select: none;
}

.code__gutter span {
  display: block;
  padding-inline-end: 10px;
  font-size: 12px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.code__surface { position: relative; flex: 1 1 auto; min-inline-size: 0; }

/* ---------- الطبقتان على هندسةٍ واحدة ----------

   المرسوم فوق والمكتوب تحته شفّاف. أيّ فرقٍ في الخطّ أو الحشوة أو
   حساب الاتجاه يفصل المؤشّر عن الحرف الذي يقف عنده. */
.code__pre,
.code__layer,
.code__input {
  margin: 0;
  padding: 12px 16px;
  font: inherit;
  line-height: inherit;
  tab-size: 2;
  white-space: pre;
  word-wrap: normal;

  /* **هذا سبب انفصال المؤشّر عن الكتابة.** الشيفرة فيها نصّ عربيّ،
     وطبقة الكتابة تحسب اتجاه السطر بحساب، وطبقة التلوين — وهي
     مقطّعة إلى عناصر ملوّنة — تحسبه بحسابٍ آخر. فيقع الحرف في مكان
     ويقف المؤشّر في مكان. و`plaintext` يجعل الاتجاه يُقرأ من أوّل
     حرفٍ قويّ في السطر نفسه: حكمٌ واحد تطبّقه الطبقتان معًا. */
  unicode-bidi: plaintext;
  direction: ltr;
  text-align: left;
}

/* والعناصر الملوّنة تبقى على `normal`: لو عزل كلٌّ منها نفسه لتقطّع
   السطر إلى مقاطع اتجاهٍ لا وجود لها في طبقة الكتابة. */
.code__layer span { unicode-bidi: normal; }

.code__pre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--fg-soft);
}

.code__layer { display: block; will-change: transform; }

.code__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--fg);
  overflow: auto;
}

.code__input::selection { background: var(--accent-soft); }

.code__hints { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-block-start: 1px solid var(--line); }
.code__hint { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--t-2xs); color: var(--fg-mute); }
.code__hint-label { font-weight: var(--w-medium); }
.code__hint-note { color: var(--fg-faint); }

/* ---------- تلوين الشيفرة ----------
   الوزن والعتمة يحملان البنية. النصّ وحده يأخذ لونًا لأنّه ما يُبحث
   عنه في ملفّ — والباقي رمادٌ مرتّب. */
.tk-comment { color: var(--fg-faint); font-style: italic; }
.tk-punct { color: var(--fg-faint); }
.tk-tag { color: var(--fg); font-weight: var(--w-semi); }
.tk-attr { color: var(--fg-soft); }
.tk-key { color: var(--fg); font-weight: var(--w-semi); }
.tk-fn { color: var(--fg); }
.tk-prop { color: var(--fg-soft); }
.tk-type { color: var(--fg-soft); font-weight: var(--w-medium); }
.tk-meta { color: var(--fg-mute); }
.tk-atom { color: var(--fg); font-weight: var(--w-medium); }
.tk-number { color: var(--fg-soft); font-variant-numeric: tabular-nums; }
.tk-string { color: var(--accent-fg); }

/* ----------------------- السجلّ ----------------------- */

.console { display: flex; flex-direction: column; border-block-start: 1px solid var(--line); background: var(--bg-deep); }

.console__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 32px;
  padding-inline: var(--sp-3);
}

.console__toggle { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-xs); color: var(--fg-mute); }
.console__caret { transition: transform var(--dur-1) var(--ease); }
.console__toggle[aria-expanded="true"] .console__caret { transform: rotate(90deg); }

.console__badge {
  min-inline-size: 18px;
  padding-inline: var(--sp-1);
  border-radius: var(--r-full);
  background: var(--bg-inset);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-align: center;
}

.console__count { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-faint); }

.console__list { max-block-size: 200px; overflow-y: auto; padding: var(--sp-1) var(--sp-2) var(--sp-2); }

.console__row {
  display: flex;
  gap: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  line-height: 1.6;
  color: var(--fg-soft);
  direction: ltr;
}

/* الخطأ والتحذير يُفرَّقان بحدٍّ جانبيّ ولون معًا. */
.console__row--error { color: var(--danger); border-inline-start: 2px solid var(--danger); background: var(--danger-soft); }
.console__row--warn { color: var(--warn); border-inline-start: 2px solid var(--warn); background: var(--warn-soft); }

.console__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.console__empty { padding: var(--sp-4); text-align: center; font-size: var(--t-2xs); color: var(--fg-faint); }