/* ===========================================================
   Urealm — البطاقات.

   ▸ **لا لون تختاره البطاقة.** جُرّب لونٌ يسكن العالم ترثه مساحاته
     فخرجت كل مساحات «الدراسة» بلونٍ واحد لا يُميَّز شيء منها. ثم
     لونان تختارهما كل مساحة فصارت الشبكة عشرين أرضًا تتزاحم على
     العين. **ما يميّز البطاقة عن جارتها صورتها وحرفها واسمها** —
     وهذه فروقٌ يقرؤها الإنسان أسرع من الصبغة.

   ▸ والأرض الاحتياطيّة هندسةٌ لا صبغة: زاويةٌ وموضعان مشتقّان من
     معرّف المساحة (`--seed-*` يكتبها `ui/Card.js`)، فلكل بطاقةٍ رسمٌ
     ثابتٌ يخصّها ولا يتكرّر — بلا لونٍ واحد.

   ▸ **ونسبةٌ واحدة لكل الأشكال (16/10).** جُرّبت نسبٌ مختلفة لكل
     شكل، فاختلفت ارتفاعات الصفوف وتركت فراغًا ميتًا تحت القصيرة.
     الأشكال تختلف في الحافّة لا في المقاس.
   =========================================================== */

.card-view { display: flex; flex-direction: column; gap: var(--sp-8); }

/* ----------------------- المقطع ----------------------- */

.card-section { display: flex; flex-direction: column; gap: var(--sp-4); }

.card-section__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: 0;
}

.card-section__title {
  flex: 1;
  min-inline-size: 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-tight);
}

.card-section__tools { display: flex; align-items: center; gap: var(--sp-1); flex: none; }

.card-section__all {
  flex: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--fg-mute);
  font-size: var(--t-xs);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.card-section__all:hover { background: var(--hover); color: var(--fg); text-decoration: none; }

.card-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }

.card-tab {
  flex: none;
  min-block-size: 28px;
  padding-inline: var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--fg-mute);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.card-tab:hover { background: var(--hover); color: var(--fg-soft); }
.card-tab.is-active { background: var(--fg); color: var(--bg-base); border-color: var(--fg); }

.card-search { inline-size: min(260px, 100%); }

/* ----------------------- الشبكة ----------------------- */

.card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

@media (max-width: 560px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
}

.card-empty {
  grid-column: 1 / -1;
  padding: var(--sp-8);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--fg-mute);
  font-size: var(--t-sm);
}

/* ----------------------- البطاقة ----------------------- */

/* `.card-system` غلافٌ يرث منه ما بداخله، و`.card` البطاقة نفسها. */
.card-system,
.card {
  --card-radius: var(--r-lg);

  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--bg-surface);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease);
}

.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card:active { transform: translateY(0); }

/* ---------- الوسط ---------- */

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-deep);
}

.card__cover {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* الأرض الاحتياطيّة: هندسةٌ مشتقّة من المعرّف، بلا لون. */
.card__fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      var(--seed-angle, 150deg),
      color-mix(in srgb, var(--bg-elevated) var(--seed-depth, 34%), var(--bg-deep)),
      var(--bg-void)
    );
}

.card__fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--seed-x1, 30%) var(--seed-y1, 30%),
    color-mix(in srgb, var(--fg) 7%, transparent),
    transparent 58%
  );
}

.card__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--seed-x2, 66%) var(--seed-y2, 70%),
    color-mix(in srgb, var(--fg) 4%, transparent),
    transparent 52%
  );
}

/* الحرف الضخم خلف كل شيء: علامةٌ تُميّز بلا أن تُقرأ. */
.card__cipher {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 32cqi;
  font-weight: var(--w-semi);
  line-height: 1;
  color: color-mix(in srgb, var(--fg) 9%, transparent);
  user-select: none;
}

.card[data-of="realm"] .card__cipher { align-items: start; padding-block-start: 6%; }

.card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.card:hover .card__scrim { opacity: 1; }

/* لا لمعة ولا حبيبة: النقاء هو الأثر. */
.card__glint,
.card__grain { display: none; }

/* ---------- الجسم ---------- */

.card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  min-inline-size: 0;
}

.card__name {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__desc {
  font-size: var(--t-xs);
  color: var(--fg-mute);
  line-height: var(--lh-snug);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card__meta { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-1); }

.card__hint,
.card__foot {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.card__pin {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--sp-2);
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--r-full);
  background: var(--bg-frost);
  color: var(--fg);
  backdrop-filter: blur(8px);
}

/* ---------- الأشكال ----------
   تختلف في الحافّة وحدها. المقاس واحد فلا تتفاوت الصفوف. */

.card[data-card="plate"] { --card-radius: var(--r-sm); }
.card[data-card="slab"] { --card-radius: 0; }

.card[data-of="space"][data-card="arch"] .card__media {
  border-end-start-radius: 50% 18%;
  border-end-end-radius: 50% 18%;
}