/* Tutor grade hub — flagship product surface (grades 7/8/9) */
:root {
  --tgh-ink: #071411;
  --tgh-forest: #0f2f28;
  --tgh-leaf: #1faa7a;
  --tgh-leaf-2: #35d0a0;
  --tgh-sand: #e8f3ee;
  --tgh-paper: rgba(232, 243, 238, 0.92);
  --tgh-muted: rgba(232, 243, 238, 0.82);
  --tgh-line: rgba(232, 243, 238, 0.22);
  --tgh-glow: rgba(31, 170, 122, 0.28);
  --tgh-warm: #f0c27a;
  --tgh-radius: 18px;
  --tgh-max: 920px;
  --tgh-font: "Vazirmatn", Tahoma, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--tgh-ink);
  color: var(--tgh-sand);
  font-family: var(--tgh-font);
  -webkit-font-smoothing: antialiased;
}

body.tgh {
  position: relative;
  overflow-x: hidden;
}

.tgh-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(31, 170, 122, 0.28), transparent 55%),
    radial-gradient(900px 600px at -10% 30%, rgba(240, 194, 122, 0.12), transparent 50%),
    radial-gradient(800px 500px at 50% 110%, rgba(15, 47, 40, 0.9), transparent 55%),
    linear-gradient(165deg, #081915 0%, #0b1c18 42%, #071411 100%);
}
/* The grade page is the start screen of an installed «یک پایه» app. Android paints
   the status bar in ONE colour (meta theme-color = #0c1a17); the glow above made the
   page's top edge green and the bar sat on it as a separate dark stripe. The first
   72px now begin exactly in that colour and the glow fades in under them, so bar and
   page read as one surface (measured: top-row pixels == theme-color). */
body.tgh .tgh-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(72px + env(safe-area-inset-top, 0px));
  background: linear-gradient(#0c1a17 0, #0c1a17 calc(env(safe-area-inset-top, 0px) + 8px), rgba(12, 26, 23, 0) 100%);
}
.tgh-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 75%);
}

.tgh-top,
.tgh-main,
.tgh-foot {
  position: relative;
  z-index: 1;
}

.tgh-top {
  max-width: var(--tgh-max);
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tgh-brand {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tgh-brand-mark {
  font-size: clamp(1.55rem, 4.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, #fff 10%, var(--tgh-leaf-2) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tgh-brand-sub {
  font-size: 0.78rem;
  color: var(--tgh-muted);
  font-weight: 600;
}

.tgh-grades {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tgh-grade-link {
  text-decoration: none;
  color: var(--tgh-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.tgh-grade-link:hover {
  color: var(--tgh-sand);
  border-color: var(--tgh-line);
  background: rgba(255,255,255,0.04);
}
.tgh-grade-link.is-current {
  color: var(--tgh-ink);
  background: var(--tgh-leaf-2);
  border-color: transparent;
}

.tgh-main {
  max-width: var(--tgh-max);
  margin: 0 auto;
  padding: 12px 20px 48px;
}

.tgh-hero {
  padding: 28px 0 18px;
  animation: tgh-rise .7s ease both;
}
.tgh-kicker {
  margin: 0 0 10px;
  color: var(--tgh-warm);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tgh-title {
  margin: 0;
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.tgh-lead {
  margin: 14px 0 0;
  max-width: 28ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--tgh-muted);
  font-weight: 500;
}

.tgh-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.tgh-quick-btn {
  appearance: none;
  text-decoration: none;
  color: var(--tgh-ink);
  background: linear-gradient(135deg, var(--tgh-leaf-2), var(--tgh-leaf));
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  min-height: 44px;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 10px 30px var(--tgh-glow);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.tgh-quick-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 34px var(--tgh-glow);
}
.tgh-quick-btn:active { transform: translateY(0) scale(0.98); }
.tgh-quick-btn.is-warming {
  background: rgba(255,255,255,0.08);
  color: var(--tgh-sand);
  box-shadow: none;
  border: 1px solid var(--tgh-line);
}

.tgh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  max-width: 56rem;
}
.tgh-filter-btn {
  appearance: none;
  border: 1px solid var(--tgh-line);
  background: rgba(255,255,255,0.04);
  color: rgba(232, 243, 238, 0.88);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.tgh-filter-btn.is-on {
  background: rgba(110, 200, 160, 0.18);
  border-color: rgba(110, 200, 160, 0.55);
  color: #e8f3ee;
}
.tgh-filter-btn:hover {
  border-color: rgba(232, 243, 238, 0.35);
}

.tgh-progress {
  margin: 16px 0 0;
  font-size: 0.95rem;
  color: rgba(232, 243, 238, 0.92);
  max-width: 52ch;
  line-height: 1.65;
}

.tgh-subjects {
  margin-top: 28px;
}
.tgh-subjects-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tgh-subjects-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.tgh-subjects-head span {
  color: var(--tgh-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.tgh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tgh-tile {
  --tgh-delay: 0s;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--tgh-radius);
  border: 1px solid var(--tgh-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  animation: tgh-rise .65s ease both;
  animation-delay: var(--tgh-delay);
}
.tgh-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 208, 160, 0.35);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  background:
    linear-gradient(145deg, rgba(53, 208, 160, 0.12), rgba(255,255,255,0.03));
}
.tgh-tile:active { transform: scale(0.985); }
.tgh-tile.is-warming {
  opacity: 0.92;
}

.tgh-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--tgh-leaf-2);
  background: rgba(31, 170, 122, 0.12);
  border: 1px solid rgba(53, 208, 160, 0.18);
}
.tgh-tile-icon svg { width: 22px; height: 22px; }

.tgh-tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tgh-tile-label {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tgh-tile-meta {
  font-size: 0.78rem;
  color: var(--tgh-muted);
  font-weight: 600;
}
.tgh-tile-chapters {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(232, 243, 238, 0.78);
  font-weight: 500;
}
.tgh-tile-chapter-list {
  display: block;
  margin-top: 2px;
  color: rgba(232, 243, 238, 0.68);
  font-weight: 400;
}
.tgh-tile.is-ready .tgh-tile-meta {
  color: var(--tgh-leaf-2);
}
.tgh-tile.is-startable .tgh-tile-meta {
  color: #9ad8c0;
}
.tgh-tile.is-warming .tgh-tile-meta {
  color: var(--tgh-warm);
}

.tgh-tile-go {
  font-size: 1.4rem;
  color: var(--tgh-muted);
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}
.tgh-tile:hover .tgh-tile-go {
  color: var(--tgh-leaf-2);
  transform: translateX(-3px);
}

.tgh-foot {
  max-width: var(--tgh-max);
  margin: 0 auto;
  padding: 8px 20px calc(28px + env(safe-area-inset-bottom));
  color: var(--tgh-muted);
  font-size: 0.78rem;
}
.tgh-foot p { margin: 0; }

@keyframes tgh-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 720px) {
  .tgh-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tgh-hero {
    padding-top: 40px;
  }
  .tgh-lead {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tgh-hero,
  .tgh-tile,
  .tgh-quick-btn,
  .tgh-tile-go {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   READABILITY + PROMOTION PASS (1405/06/13)
   ------------------------------------------------------------
   Two complaints from the owner, both correct:

   1. "boxes are big and the text is small, filling half the box"
      The tiles were full-width against a 920px column with meta and
      chapter copy at 0.78rem -- a 920x72px card carrying 11px text.
      Two changes: the grid becomes multi-column so a card is card-sized
      instead of banner-sized, and the small copy goes up to a size a
      parent can actually read on a phone.

   2. Subject chips deleted the rest of the list.
      Now they promote (see tutor-grade-hub.js). `.is-promoted` is what
      tells the reader WHICH card moved -- without it the list appears to
      reshuffle for no reason.

   Appended rather than edited inline so the original cascade above is
   untouched and this block can be lifted out in one piece.
   ============================================================ */

/* ---- a card should look like a card, not a banner ---- */
.tgh-grid {
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 12px;
}

/* ---- small copy that was too small ---- */
.tgh-tile-meta {
  font-size: 0.9rem;
  line-height: 1.6;
}

.tgh-tile-chapters {
  font-size: 0.88rem;
  line-height: 1.7;
}

.tgh-tile-label {
  font-size: 1.12rem;
  line-height: 1.5;
}

.tgh-tile {
  padding: 16px 18px;
  gap: 15px;
}

.tgh-filter-btn {
  font-size: 0.94rem;
  min-height: 40px; /* real touch target */
  padding: 9px 16px;
}

.tgh-progress {
  font-size: 1.02rem;
  line-height: 1.85;
  max-width: 60ch;
}

.tgh-lead {
  /* 28ch broke a one-line sentence across four lines on desktop */
  max-width: 44ch;
  font-size: 1.1rem;
  line-height: 1.85;
}

.tgh-subjects-head h2 {
  font-size: 1.25rem;
}

.tgh-subjects-head span {
  font-size: 0.95rem;
}

/* ---- the promoted subject ---- */
.tgh-tile.is-promoted {
  border-color: rgba(53, 208, 160, 0.6);
  background:
    linear-gradient(145deg, rgba(53, 208, 160, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(53, 208, 160, 0.22), 0 10px 26px rgba(0, 0, 0, 0.2);
}

/* Promotion re-lays-out the grid; without this the cards jump. Respect a
   reader who has asked the OS for less motion. */
.tgh-tile {
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    order 0s;
}

@media (prefers-reduced-motion: reduce) {
  .tgh-tile,
  .tgh-filter-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- phone: one column, but with the bigger type kept ---- */
@media (max-width: 560px) {
  .tgh-grid {
    grid-template-columns: 1fr;
  }
  .tgh-tile-label { font-size: 1.06rem; }
  .tgh-progress { font-size: 0.98rem; }
}

/* ── انتخاب رشته (فقط بندِ متوسطهٔ دوم) ─────────────────────────────────────
   دو حالت با یک ماژول: وقتی هنوز رشته انتخاب نشده کارت‌های بزرگ (is-picking)،
   و بعد از انتخاب همان‌ها به نوارِ باریکِ جابه‌جایی تبدیل می‌شوند. کنترلی که
   دیده می‌شود باید کلیک‌شدنی و خوانا باشد — هر دو حالت ≥۴٫۵:۱ کنتراست دارند. */
.tgh-branches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.tgh-branch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--tgh-sand);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--tgh-line);
  border-radius: 14px;
  padding: 10px 16px;
  min-height: 44px;
  justify-content: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tgh-branch:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.09); }
.tgh-branch-label { font-weight: 700; font-size: 0.95rem; }
.tgh-branch-meta { font-size: 0.78rem; color: var(--tgh-muted); }
.tgh-branch.is-current {
  background: linear-gradient(135deg, var(--tgh-leaf-2), var(--tgh-leaf));
  border-color: transparent;
  color: var(--tgh-ink);
  box-shadow: 0 10px 30px var(--tgh-glow);
}
.tgh-branch.is-current .tgh-branch-meta { color: rgba(7, 20, 17, 0.78); }

.tgh-branches.is-picking { gap: 14px; margin-top: 26px; }
.tgh-branches.is-picking .tgh-branch {
  flex: 1 1 210px;
  min-height: 96px;
  padding: 18px 20px;
  border-radius: var(--tgh-radius);
  background: rgba(255, 255, 255, 0.07);
}
.tgh-branches.is-picking .tgh-branch-label { font-size: 1.15rem; }
.tgh-branches.is-picking .tgh-branch-meta { font-size: 0.9rem; }

@media (max-width: 560px) {
  .tgh-branches.is-picking .tgh-branch { flex-basis: 100%; min-height: 76px; }
}

/* ============================================================
   قفسهٔ کتاب — جلدِ واقعیِ کتابِ درسی به‌جای آیکنِ خطی
   ------------------------------------------------------------
   ⚠ چرا هر قاعدهٔ این بخش با `.tgh-has-shelf` شروع می‌شود:

   همین فایل دو صفحهٔ **متفاوت** را استایل می‌دهد و هر دو دقیقاً همان
   کلاس‌ها را دارند —

     · `/tutor.php`        انتخابِ پایه: ۱۲ کارتِ افقیِ آیکن+متن
     · `/tutor-{N}.php`    فهرستِ درس‌ها: قفسهٔ جلدِ کتاب

   بارِ اول این بخش بی‌قید نوشته شد و `/tutor.php` را شکست: کارت‌های پایه
   بی‌کادر و بی‌زمینه شدند، آیکن‌ها ریز، و شبکه ۵-تایی با یک کارتِ تنها در
   سطرِ بعد. یعنی قاعده‌ای که برای یک کامپوننت نوشته شده بود، هر چیزی را
   که همان نام را داشت بلعید.

   پس: بدنهٔ قالبِ درس‌ها `class="tgh tgh-has-shelf"` می‌گیرد و هیچ قاعدهٔ
   این بخش بدونِ آن پیشوند نوشته نمی‌شود. اگر قاعده‌ای این‌جا اضافه کردی و
   پیشوند نداشت، صفحهٔ انتخابِ پایه را شکسته‌ای.

   نسبتِ 230/316 نسبتِ واقعیِ فایلِ وزارت است — نه انتخابِ سلیقه‌ای — پس
   جلد نه برش می‌خورد نه نوارِ سیاه می‌گیرد.
   ============================================================ */

.tgh-has-shelf .tgh-grid {
  /* قفسه: روی ۳۲۰px دو ستون، و بعد هرچه جا باشد. یک ستونِ جلد روی گوشی
     نصفِ صفحه را هدر می‌دهد و دیگر «قفسه» دیده نمی‌شود.
     کفِ ۷٫۵rem از حساب می‌آید نه از حس: روی ۳۲۰px عرضِ داخلی ۲۸۰ است و
     ۲×۱۳۶ + ۱۲ فاصله = ۲۸۴ > ۲۸۰ — یعنی با ۸٫۵rem به یک ستون می‌افتاد. */
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 20px 12px;
  align-items: start;
}

.tgh-has-shelf .tgh-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  /* فلاشِ خاکستریِ اندرویدی روی هر ضربه، تنها چیزی است که یک قفسهٔ تمیز را
     ارزان نشان می‌دهد. بازخوردِ لمس را خودمان می‌دهیم. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tgh-has-shelf .tgh-tile:hover {
  transform: none;
  border-color: transparent;
  background: none;
  box-shadow: none;
}
.tgh-has-shelf .tgh-tile:active { transform: none; }

/* ---- خودِ جلد ---- */
.tgh-has-shelf .tgh-cover {
  position: relative;
  display: block;
  aspect-ratio: 230 / 316;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(150deg, #16362e, #0d241f);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 10px 22px -8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tgh-has-shelf .tgh-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* عطفِ کتاب: در فارسی لبهٔ صحافی سمتِ **راست** است. `inset-inline-end` در
   RTL یعنی چپ — با آن، کتاب برعکس صحافی شده بود. این‌جا عمداً فیزیکی
   نوشته شده تا خواندنش جای شک نگذارد؛ این صفحه همیشه RTL است. */
.tgh-has-shelf .tgh-cover-spine {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 7px;
  pointer-events: none;
  background:
    linear-gradient(to left,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.14) 42%,
      rgba(255, 255, 255, 0.16) 78%,
      rgba(255, 255, 255, 0.00) 100%);
}

/* ---- کتابی که هنوز جلد ندارد: قابِ سادهٔ عمدی، نه قابِ شکسته ---- */
.tgh-has-shelf .tgh-cover-blank {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  color: var(--tgh-leaf-2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(53, 208, 160, 0.18), transparent 62%),
    linear-gradient(160deg, #17392f, #0c211c);
}
.tgh-has-shelf .tgh-cover-blank svg { width: 34px; height: 34px; opacity: 0.75; }
.tgh-has-shelf .tgh-cover-blank-label {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tgh-sand);
  opacity: 0.94;
}

/* ---- متنِ زیرِ جلد ---- */
/* نامِ درس یک تا دو سطر است، پس سطرِ وضعیتِ دو کارتِ کنارِ هم روی دو خطِ
   متفاوت می‌نشیند و ردیف به‌هم می‌ریزد. کفِ ارتفاع لازم است — ولی **روی
   بدنه**، نه روی نام.
   بارِ اول روی خودِ نام گذاشته شد و یک سوراخِ ۲۴ پیکسلی بینِ نامِ تک‌سطری و
   سطرِ وضعیتش باز کرد: دو تکه که باید یک چیز خوانده شوند، از هم جدا افتادند.
   با کفِ ارتفاع روی بدنه، فضای اضافه به **پایینِ** کارت می‌رود، جایی که
   فاصلهٔ ثابتِ ردیف آن را می‌پوشاند — و همهٔ کارت‌ها هم‌قد می‌شوند. */
.tgh-has-shelf .tgh-tile-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  min-height: 4.4em;
}
.tgh-has-shelf .tgh-tile-label {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--tgh-sand);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tgh-has-shelf .tgh-tile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tgh-muted);
}
.tgh-has-shelf .tgh-tile-sep { opacity: 0.55; }

/* سه پلهٔ صادق، با نقطهٔ رنگی به‌جای یک جملهٔ بلند */
.tgh-has-shelf .tgh-tile-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}
.tgh-has-shelf .tgh-tile.is-ready .tgh-tile-meta { color: rgba(53, 208, 160, 0.86); }
.tgh-has-shelf .tgh-tile.is-startable .tgh-tile-meta { color: #9ad8c0; }
.tgh-has-shelf .tgh-tile.is-warming .tgh-tile-meta { color: var(--tgh-warm); }
.tgh-has-shelf .tgh-tile.is-warming { opacity: 1; }
/* کتابی که هنوز آماده نیست، خودش کم‌رنگ‌تر است — بدونِ یک کلمهٔ اضافه */
.tgh-has-shelf .tgh-tile.is-warming .tgh-cover { filter: saturate(0.55) brightness(0.82); }

/* فهرستِ نمونهٔ فصل‌ها در DOM می‌ماند (صفحه‌خوان و جست‌وجو) ولی روی
   کارتِ ~۱۵۰ پیکسلی خوانا نیست، پس دیده نمی‌شود. */
.tgh-has-shelf .tgh-tile-chapters {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- لمس و اشاره ---- */
.tgh-has-shelf .tgh-tile-go { display: none; }
.tgh-has-shelf .tgh-tile:hover .tgh-cover {
  transform: translateY(-4px);
  /* will-change فقط همین‌جا: اگر روی خودِ .tgh-cover بنشیند، پایهٔ دهم با ۲۸
     کتاب ۲۸ لایهٔ ترکیب‌شده می‌سازد و گوشیِ ارزان را زمین می‌زند. */
  will-change: transform;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.30),
    0 18px 34px -10px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(53, 208, 160, 0.42);
}
.tgh-has-shelf .tgh-tile:hover .tgh-tile-label { color: var(--tgh-leaf-2); }
.tgh-has-shelf .tgh-tile:active .tgh-cover { transform: scale(0.965); }
.tgh-has-shelf .tgh-tile:focus-visible { outline: none; }
.tgh-has-shelf .tgh-tile:focus-visible .tgh-cover {
  box-shadow:
    0 0 0 3px rgba(53, 208, 160, 0.75),
    0 10px 22px -8px rgba(0, 0, 0, 0.55);
}

/* درسِ برجسته‌شده با چیپِ فیلتر */
.tgh-has-shelf .tgh-tile.is-promoted {
  background: none;
  box-shadow: none;
  border-color: transparent;
}
.tgh-has-shelf .tgh-tile.is-promoted .tgh-cover {
  box-shadow:
    0 0 0 2px rgba(53, 208, 160, 0.85),
    0 16px 30px -10px rgba(0, 0, 0, 0.6);
}

@media (min-width: 360px) {
  .tgh-has-shelf .tgh-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  }
}
@media (min-width: 480px) {
  .tgh-has-shelf .tgh-grid {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 24px 16px;
  }
  .tgh-has-shelf .tgh-tile-label { font-size: 0.97rem; }
}
@media (min-width: 720px) {
  .tgh-has-shelf .tgh-grid { gap: 28px 18px; }
  .tgh-has-shelf .tgh-tile-label { font-size: 1rem; }
  .tgh-has-shelf .tgh-tile-meta { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tgh-has-shelf .tgh-cover,
  .tgh-has-shelf .tgh-tile:hover .tgh-cover,
  .tgh-has-shelf .tgh-tile:active .tgh-cover {
    transition: none !important;
    transform: none !important;
  }
}

/* ردیفِ چیپِ درس‌ها روی گوشی چهار سطر می‌شد و قفسه را از نمای اول بیرون
   می‌انداخت — یعنی اولین چیزی که کاربر می‌دید یک دیوارِ دکمه بود، نه
   کتاب‌ها. یک نوارِ افقی جای همان را می‌گیرد و قفسه ۲۱۵px بالا می‌آید.
   هر چیپ هنوز لمس‌شدنی است (نوار خودش اسکرول می‌شود). */
@media (max-width: 719px) {
  .tgh-has-shelf .tgh-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -18px;
    padding-inline: 18px;
    padding-block-end: 4px;
  }
  .tgh-has-shelf .tgh-filters::-webkit-scrollbar { display: none; }
  .tgh-has-shelf .tgh-filter-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}