/* The teacher's «آموزش» tab: remote control of the whiteboard (/learn) and the list of lessons.
   Five tabs now: the bottom bar of a phone gets five equal columns. Every button row is grouped on the LEFT (in RTL: justify-content flex-end). */
.tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab-tx { white-space: nowrap; }
.lt-now { font-weight: 700; margin-block: 4px 8px; }
.lt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-block: 8px; }
/* a phone: the three stepping buttons share one row in equal thirds, every other button is a full row of the same width */
@media (max-width: 640px) {
  .lt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt-row > .act { min-width: 0; width: 100%; }
  .lt-row > a.act, .lt-row > #learn-screen, .lt-row > #learn-road { grid-column: 1 / -1; }
  .lt-lesson .lt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }       /* a lesson card has two buttons: halves, no free third on the left */
}
.lt-list { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.lt-lesson { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; }
.lt-lesson.lt-open { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.lt-head h3 { margin: 0; }
.lt-mark { font-size: .85rem; font-weight: 700; padding: 0 10px; border-radius: 999px; color: var(--warn); background: var(--warn-wash); }
.lt-mark.lt-pub { color: var(--ok); background: var(--ok-wash); }
.lt-meta { color: var(--ink-2); font-size: .9rem; }
.lt-ex { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-block: 6px 0; }
.lt-ex span { flex: 1 1 auto; }
@media (min-width: 900px) { .tabs { grid-template-columns: none; } .lt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }