/* =============================================================
   dream.css — مصفوفة الحلم
   -------------------------------------------------------------
   يتبع لغة الموقع البصرية: زجاج داكن، حدّ خافت، لمعة لونية لكل
   حقل عبر متغيّر --c يضبطه المكوّن.
   ============================================================= */

.page-dream { padding-bottom: 40px; }

/* ── الملخّص ─────────────────────────────────────────────── */
.dr-summary {
  padding: 26px 28px;
  border-radius: 20px;
  margin-bottom: 26px;
}
.dr-intro {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--text-soft, #D6D0E8);
}

.dr-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dr-type {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
}
.dr-type.wide { grid-column: 1 / -1; }
.dr-type-k {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #AFA8C7);
  margin-bottom: 6px;
}
.dr-type-v { font-size: 16px; color: #fff; }
.dr-type-v.waking { color: #62DDFF; }
.dr-type-v.dream  { color: #C084FF; }

.dr-type-desc {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-inline-start: 2px solid rgba(192, 132, 255, 0.5);
  background: rgba(192, 132, 255, 0.05);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--text-soft, #D6D0E8);
}

/* ── القنوات ─────────────────────────────────────────────── */
.dr-channels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.dr-channel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(95, 214, 181, 0.06);
  border: 1px solid rgba(95, 214, 181, 0.18);
  border-radius: 12px;
}
.dr-channel-n {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: #5FD6B5;
  font-variant-numeric: tabular-nums;
}
.dr-channel-t { font-size: 13.5px; line-height: 1.8; color: var(--text-soft, #D6D0E8); }

.dr-none {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-soft, #D6D0E8);
}

.dr-layers {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-muted, #AFA8C7);
}

/* ── الحقول ──────────────────────────────────────────────── */
.dr-fields {
  display: grid;
  gap: 20px;
}
.dr-field {
  padding: 24px 26px;
  border-radius: 20px;
  border-top: 2px solid var(--c, #C084FF);
}
.dr-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.dr-field-head h3 {
  margin: 0;
  font-size: 18px;
  color: var(--c, #C084FF);
}
.dr-field-count {
  font-size: 12.5px;
  color: var(--text-muted, #AFA8C7);
  white-space: nowrap;
}
.dr-field-count b { color: #fff; font-size: 14px; }

.dr-field-desc {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 2;
  color: var(--text-soft, #D6D0E8);
}

/* ── البوابات ────────────────────────────────────────────── */
.dr-gates { display: flex; flex-direction: column; gap: 10px; }

.dr-gate {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s, background 0.25s;
}
.dr-gate.on {
  border-color: color-mix(in srgb, var(--c) 38%, transparent);
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.dr-gate.off { opacity: 0.4; }

.dr-gate-num {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted, #AFA8C7);
}
.dr-gate.on .dr-gate-num {
  background: var(--c, #C084FF);
  color: #14101F;
}

.dr-gate-body { flex: 1 1 auto; min-width: 0; }
.dr-gate-txt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-soft, #D6D0E8);
}
.dr-gate-txt.muted { color: var(--text-muted, #AFA8C7); }

.dr-gate-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* التفعيل: الطبقتان متمايزتان لونيًّا — الميلاد بارد، القمر دافئ. */
.dr-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  cursor: help;
}
.dr-act.waking {
  background: rgba(98, 221, 255, 0.1);
  border-color: rgba(98, 221, 255, 0.28);
  color: #9FEBFF;
}
.dr-act.lunar {
  background: rgba(192, 132, 255, 0.1);
  border-color: rgba(192, 132, 255, 0.28);
  color: #DDBBFF;
}
.dr-act-glyph { font-size: 13px; line-height: 1; }
.dr-act-num { letter-spacing: 0.02em; }

.dr-hang {
  color: var(--text-muted, #AFA8C7);
  font-size: 14px;
  align-self: center;
  cursor: help;
}

.dream-empty {
  padding: 30px;
  border-radius: 18px;
  text-align: center;
  color: var(--text-muted, #AFA8C7);
}

/* ── موبايل ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dr-summary, .dr-field { padding: 20px 18px; }
  .dr-types { grid-template-columns: 1fr; }
  .dr-field-head { flex-direction: column; gap: 4px; }
  .dr-gate { padding: 11px 12px; gap: 11px; }
  .dr-gate-num { flex-basis: 30px; height: 30px; font-size: 12.5px; }
}

/* =============================================================
   الرسم — هندسة أفقية خاصّة بالمصفوفة
   ============================================================= */
.dbg-wrap { margin: 4px 0 26px; }

.dbg-svg {
  display: block;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  height: auto;
  overflow: visible;
}

/* الظلّ الحاضن — حضورٌ يُحسّ ولا يُقرأ. */
.dbg-sil {
  fill: rgba(255, 255, 255, 0.028);
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 2;
}

/* ── المراكز ── */
.dbg-center { fill: none; stroke-width: 3.4; }
.dbg-center.open {
  fill: rgba(255, 255, 255, 0.022);
  stroke-opacity: 0.42;
  stroke-dasharray: 10 7;
}
.dbg-center.on {
  fill-opacity: 0.88;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.09));
}

/* ── القنوات ── */
.dbg-chan {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 3 13;
}
.dbg-chan.on {
  stroke: #5FD6B5;
  stroke-width: 11;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 9px rgba(95, 214, 181, 0.5));
}

/* ── الأطراف الغائبة ── */
.dbg-ghost-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 3;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
}
.dbg-ghost circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
}
.dbg-ghost text {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: rgba(255, 255, 255, 0.26);
  pointer-events: none;
}

/* ── البوابات ── */
.dbg-dot {
  fill: rgba(20, 16, 31, 0.82);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.6;
}
.dbg-gate.on .dbg-dot {
  stroke: rgba(12, 9, 20, 0.5);
  stroke-width: 2;
}

.dbg-num {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: #14101F;
  pointer-events: none;
}
.dbg-num.off { fill: rgba(255, 255, 255, 0.42); font-weight: 500; }

.dbg-hang-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.7;
  stroke-dasharray: 3 5;
}

/* ── المفتاح ── */
.dbg-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 12px;
  color: var(--text-muted, #AFA8C7);
}
.dbg-legend li { display: inline-flex; align-items: center; gap: 7px; }
.dbg-legend .sw { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dbg-legend .sw.waking { background: #62DDFF; }
.dbg-legend .sw.lunar  { background: #C084FF; }
.dbg-legend .sw.both   { background: linear-gradient(135deg, #62DDFF, #C084FF); }
.dbg-legend .sw.dead   { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); }
.dbg-legend .sw.ghost  { background: none; border: 1.4px dashed rgba(255,255,255,.28); }

/* =============================================================
   المراكز · الحقول · حالتا النوم
   ============================================================= */
.dr-sub-h {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #AFA8C7);
}
.dr-sec-h { margin: 0 0 18px; font-size: 18px; color: #C084FF; }

.dr-channel-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dr-channel-b b { font-size: 13.5px; color: #fff; }

.dr-states-note {
  margin: 0 0 20px;
  padding: 15px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-muted, #AFA8C7);
}

.dr-field-intro { margin: 0 0 22px; }
.dr-field-intro p {
  margin: 0 0 13px;
  font-size: 14.5px;
  line-height: 2.05;
  color: var(--text-soft, #D6D0E8);
}
.dr-field-intro p:last-child { margin-bottom: 0; }
.dr-field-intro p:first-child { font-size: 15px; }

.dr-gate-name { margin: 0 0 5px; font-size: 15px; color: #fff; font-weight: 600; }
.dr-gate.off .dr-gate-name { color: var(--text-muted, #AFA8C7); font-weight: 500; }

.dr-gate-deep {
  margin: 9px 0 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-muted, #AFA8C7);
}

/* حالتا النوم — طرفا مدًى، فيُعرَضان معًا لا أحدهما. */
.dr-vibe { display: grid; gap: 9px; margin-top: 13px; }
.dr-vibe-row {
  padding: 11px 13px;
  border-radius: 12px;
  border-inline-start: 3px solid;
}
.dr-vibe-row.high { background: rgba(95, 214, 181, 0.055); border-color: #5FD6B5; }
.dr-vibe-row.low  { background: rgba(255, 120, 181, 0.055); border-color: #FF78B5; }
.dr-vibe-k {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dr-vibe-row.high .dr-vibe-k { color: #5FD6B5; }
.dr-vibe-row.low  .dr-vibe-k { color: #FF78B5; }
.dr-vibe-row p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-soft, #D6D0E8);
}

/* ── المراكز ── */
.dr-centers { padding: 24px 26px; border-radius: 20px; margin-bottom: 26px; }
.dr-center-list { display: grid; gap: 12px; }
.dr-center {
  padding: 15px 17px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
.dr-center.on { border-color: rgba(192, 132, 255, 0.3); background: rgba(192, 132, 255, 0.05); }
.dr-center header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dr-center header b { font-size: 15px; color: #fff; }
.dr-center-st {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted, #AFA8C7);
}
.dr-center.on .dr-center-st { background: rgba(192, 132, 255, 0.16); color: #DDBBFF; }
.dr-center p { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--text-soft, #D6D0E8); }

.dr-dormant { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dr-dormant b { display: block; margin-bottom: 7px; font-size: 14px; color: var(--text-muted, #AFA8C7); }
.dr-dormant p { margin: 0; font-size: 13.5px; line-height: 1.95; color: var(--text-soft, #D6D0E8); }

@media (max-width: 900px) {
  .dbg-svg { max-width: 100%; }
  .dbg-num { font-size: 17px; }
  .dbg-ghost text { font-size: 15px; }
  .dbg-legend { gap: 7px 13px; font-size: 11.5px; }
  .dr-centers { padding: 20px 18px; }
  .dr-gate { flex-direction: column; }
}