/* Lyrics Generator v2.0 — Song details table. */
.lgenx-table{width:100%;max-width:720px;margin:14px auto 22px;border-collapse:collapse;font-family:'Inter',sans-serif;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;}
.lgenx-table th,.lgenx-table td{padding:10px 14px;text-align:left;border-bottom:1px solid #eef1f5;vertical-align:top;}
.lgenx-table tr:last-child td{border-bottom:0;}
.lgenx-table .lgenx-table-head th{background:#F5F7FB;color:#0A3A8A;font-weight:700;}
.lgenx-table td:first-child{font-weight:600;color:#0A3A8A;width:34%;}
/* =====================================================================
   Mobile overflow containment (<= 768px)
   ---------------------------------------------------------------------
   AUDIT FIX. `.lgenx-table` is declared max-width:720px with
   border-collapse:collapse and no mobile guard, so on a 320-430px
   viewport a wide chord/details table forced horizontal scrolling of the
   WHOLE PAGE rather than of the table itself.

   The table is made to scroll inside its own box. No markup change is
   required and no wrapper element is added, so PHP templates, schema and
   the chord renderer are untouched.
   ===================================================================== */
@media (max-width: 768px) {

  .lgenx-table {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Radius kept off the scroll box so the clipped edge is not rounded
       mid-scroll, which reads as a rendering artefact. */
    border-radius: var(--tgl-radius-sm, 6px) !important;
  }

  /* Cells keep their table behaviour inside the scrolling block. */
  .lgenx-table > tbody,
  .lgenx-table > thead {
    display: table !important;
    width: 100% !important;
  }

  .lgenx-table th,
  .lgenx-table td {
    white-space: normal !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }
}