/* review.74-mobile-tables: phone-friendly content tables (theme only, no page content change).
   Screen + max-width 767.98px only: desktop (>=768px) and print are untouched.
   Targets content tables that assets/mobile-tables.js wrapped in .ng-table-scroll[data-ngmt]. */
@media screen and (max-width: 767.98px) {
  .ng-table-scroll[data-ngmt] {
    position: relative; display: block; width: 100%; max-width: 100%;
    overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin: 18px 0; border: 1px solid #dfd5dc; border-radius: 8px;
    /* right/left edge fade scroll cue (Lea Verou background-attachment trick) */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(48,35,49,.22), rgba(48,35,49,0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(48,35,49,.22), rgba(48,35,49,0)) right center / 12px 100% no-repeat scroll;
    background-color: #fff;
    scrollbar-width: thin; scrollbar-color: #8a6a8c #f0e9ef;
  }
  .ng-table-scroll[data-ngmt]::-webkit-scrollbar { height: 8px; }
  .ng-table-scroll[data-ngmt]::-webkit-scrollbar-thumb { background: #8a6a8c; border-radius: 4px; }
  .ng-table-scroll[data-ngmt]::-webkit-scrollbar-track { background: #f0e9ef; }
  .ng-table-scroll[data-ngmt]:focus-visible { outline: 3px solid #efb34d; outline-offset: 2px; }
  /* Scroll mode (tables with up to 4 columns, or any table when JS decides): real table layout, no mid-word breaks */
  .ng-table-scroll[data-ngmt] > table {
    display: table !important; width: 100%; min-width: 0; max-width: none; margin: 0 !important;
    overflow: visible; border-collapse: collapse; background: transparent;
  }
  .ng-table-scroll[data-ngmt] > table :is(th, td) {
    overflow-wrap: normal; word-break: normal; hyphens: manual;
    min-width: 6.5em; padding: 10px 12px; font-size: max(.9rem, 14px); line-height: 1.5; vertical-align: top;
  }
  .ng-table-scroll[data-ngmt] > table :is(th, td) a { overflow-wrap: anywhere; }
  .ng-table-scroll[data-ngmt] > table :is(th, td):first-child { min-width: 7.5em; }
  .ng-table-hint { display: block; margin: 14px 0 -10px; font-size: .82rem; color: #6b5a6c; }
  .ng-table-hint[hidden] { display: none; }
}
/* Card mode: tables with 5+ columns under 600px become one card per row, labels from <th> (data-label added by JS). */
@media screen and (max-width: 599.98px) {
  .ng-table-scroll[data-ngmt="cards"] { overflow-x: visible; border: 0; background: none; }
  .ng-table-scroll[data-ngmt="cards"] > table,
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot),
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot) > tr,
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot) > tr > :is(td, th) { display: block !important; width: auto; min-width: 0; }
  .ng-table-scroll[data-ngmt="cards"] > table > thead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ng-table-scroll[data-ngmt="cards"] > table > caption { display: block; text-align: left; font-weight: 700; padding: 0 0 8px; }
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot) > tr { margin: 0 0 14px; border: 1px solid #dfd5dc; border-radius: 10px; background: #fff; overflow: hidden; }
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot) > tr > :is(td, th) {
    border: 0; border-top: 1px solid #efe7ed; padding: 8px 12px 9px; text-align: left; overflow-wrap: break-word; word-break: normal;
  }
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot) > tr > :is(td, th):first-child { border-top: 0; background: #f0e9ef; color: #512a53; font-weight: 700; font-size: 1rem; }
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot) > tr > :is(td, th)[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #6b5a6c; margin-bottom: 1px;
  }
  .ng-table-scroll[data-ngmt="cards"] > table > :is(tbody, tfoot) > tr > :is(td, th):empty { display: none !important; }
  .ng-table-scroll[data-ngmt="cards"] + .ng-table-hint, .ng-table-hint[data-for-cards] { display: none; }
}