/* ═══════════════════════════════════════════════════════════════════════════
   /wages/ — "کارمزدها". Loads ON TOP of legal.css, which already carries the
   document chrome this page reuses (hero, breadcrumb, body grid, notes).
   Only the fee TABLE is here — everything else is shared, deliberately, so a
   change to the document furniture lands on all three legal-shaped pages at
   once instead of drifting.

   ⚠️ RTL: the table is inside a dir="rtl" document, so `text-align: start` is
   the right edge. Physical `left`/`right` are avoided throughout for the same
   reason legal.css avoids them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SINGLE-COLUMN BODY ─────────────────────────────────────────────────────
   legal.css makes .lg-body-grid two columns on wide screens (260px for a
   sticky TOC, then the articles). /rules/ and /authentication/ fill that first
   column; this page has no TOC, so everything would be crammed into 260px with
   the right half of the page blank — which is how it first shipped.

   TWO CLASSES, on purpose. A bare `.lg-body-grid` override here would depend
   on wages.css loading after legal.css and would break the day someone reorders
   pagecss. `.lg-body-grid.lg-solo` outranks the single-class rule on
   specificity, so source order and media queries stop mattering.

   `gap: 0` because with one column the 48px column gap becomes dead space
   above the first article.                                                   */
.lg-body-grid.lg-solo {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* The scroll container, not the table. A fee table has to stay readable on a
   360px phone, and the honest way to do that is let it scroll rather than
   crush four columns into an unreadable stack. `-webkit-overflow-scrolling`
   is still worth setting for older iOS. */
.wg-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-top: 22px;
}

.wg-table {
  width: 100%;
  min-width: 520px;          /* below this the columns collide; scroll instead */
  border-collapse: collapse;
  font-size: 15px;
}

.wg-table caption {
  caption-side: top;
  text-align: start;
  padding: 16px 20px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.wg-table th,
.wg-table td {
  padding: 14px 20px;
  text-align: start;
  border-bottom: 1px solid var(--border);
}

.wg-table thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--surface-h);
  white-space: nowrap;
}

.wg-table tbody tr:last-child th,
.wg-table tbody tr:last-child td { border-bottom: 0; }

.wg-table tbody tr:hover { background: var(--surface-h); }

/* The row header is the amount band — a <th scope="row">, so a screen reader
   announces "۵ تا ۱۰ میلیون تومان, کارمزد, ۰٫۰۴٪" instead of a bare number. */
.wg-table tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* The rate. LTR-isolated: «۰٫۰۷٪» is a number followed by a percent sign, and
   in an RTL paragraph the sign can render on the wrong side without isolation.
   <bdi> in the markup does the isolating; this only sets the look. */
.wg-rate {
  font-weight: 800;
  font-size: 16px;
  color: var(--violet);
  white-space: nowrap;
}

/* Worked example per row — the fee in Toman for the top of that band. Muted,
   because it is an illustration and must not read as a second rate. */
.wg-eg {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .wg-table { font-size: 14px; }
  .wg-table th,
  .wg-table td { padding: 12px 14px; }
}