/* ==================================================================
   TABLES — clean, single source of truth
   Mobile: 20px gutters | Desktop: centered at 1080px
   .yes = green | .no = grey | .dash = light grey
   ================================================================== */

/* Container */
.tbl-wrap,
.compare-table,
.data-table {
  width: 100%;
  max-width: 100%;
  margin: 28px 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

/* Mobile: 20px gutters */
@media (max-width: 767px) {
  .tbl-wrap,
  .compare-table,
  .data-table {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Desktop: centered at 1080px */
@media (min-width: 768px) {
  .tbl-wrap,
  .compare-table,
  .data-table {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Inner wrapper (compare-table uses this) */
.compare-table-inner {
  width: 100%;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

/* The table itself */
.tbl-wrap > table,
.compare-table-inner > table,
.data-table > table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  min-width: 640px;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}

/* compare-table: no double border */
.compare-table-inner > table {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Cells */
.tbl-wrap th, .tbl-wrap td,
.compare-table th, .compare-table td,
.data-table th, .data-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .tbl-wrap th, .tbl-wrap td,
  .compare-table th, .compare-table td,
  .data-table th, .data-table td {
    padding: 20px 24px;
    font-size: 15px;
    white-space: normal;
  }
}

/* Header */
.tbl-wrap th, .compare-table th, .data-table th {
  background: var(--fill-1);
  font-weight: 700;
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* First column */
.tbl-wrap td:first-child,
.compare-table td:first-child,
.data-table td:first-child {
  font-weight: 600;
  color: var(--text);
}

/* Last row */
.tbl-wrap tbody tr:last-child td,
.compare-table tbody tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Row hover */
.tbl-wrap tbody tr:hover,
.compare-table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--fill-1);
}

/* data-table wrap */
.data-table {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
  background: var(--surface);
}

.data-table > table {
  border: none;
  box-shadow: none;
  border-radius: 0;
  min-width: 480px;
}

/* ==================================================================
   CELL COLORS — green Yes, grey No
   Uses high specificity to beat any table cell default
   ================================================================== */

table .yes,
table td.yes,
.compare-table .yes,
.tbl-wrap .yes,
.data-table .yes,
td .yes,
td.yes,
span.yes {
  color: #188038 !important;
  font-weight: 600 !important;
  background: none !important;
  border: none !important;
}

[data-theme="dark"] table .yes,
[data-theme="dark"] td.yes,
[data-theme="dark"] .compare-table .yes,
[data-theme="dark"] .tbl-wrap .yes,
[data-theme="dark"] .data-table .yes,
[data-theme="dark"] span.yes {
  color: #57C28A !important;
}

.no {
  color: var(--text-3);
}

.dash {
  color: var(--text-faint);
}

/* Legacy .ck (tick marks) */
.ck {
  display: inline;
  background: none;
  color: #188038;
  font-size: 15px;
  font-weight: 700;
  padding: 0;
  border: none;
  border-radius: 0;
}
[data-theme="dark"] .ck { color: #57C28A; }

/* Hide any leftover recommended dot */
.tag-rec { display: none !important; }

/* ==================================================================
   SCROLLBAR
   ================================================================== */
.tbl-wrap::-webkit-scrollbar, .compare-table::-webkit-scrollbar,
.compare-table-inner::-webkit-scrollbar, .data-table::-webkit-scrollbar {
  height: 6px;
}
.tbl-wrap::-webkit-scrollbar-thumb, .compare-table::-webkit-scrollbar-thumb,
.compare-table-inner::-webkit-scrollbar-thumb, .data-table::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
}

@media (max-width: 767px) {
  .tbl-wrap, .compare-table, .compare-table-inner, .data-table {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tbl-wrap::-webkit-scrollbar, .compare-table::-webkit-scrollbar,
  .compare-table-inner::-webkit-scrollbar, .data-table::-webkit-scrollbar {
    display: none;
  }
}

/* ==================================================================
   HOME TABLE — scroll inside the wrapper, page stays fixed
   ================================================================== */
.tbl-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.tbl-wrap > table {
  min-width: 640px;
  max-width: none;
  width: max-content;
}

/* ==================================================================
   TABLE — mobile scrolls inside; desktop centers, no scroll
   ================================================================== */

/* ---------- Mobile: wrapper caps at viewport, scrolls internally ---------- */
.tbl-wrap,
.compare-table,
.data-table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The table can be wider than the wrapper — it scrolls inside */
.tbl-wrap > table,
.compare-table-inner > table,
.data-table > table {
  min-width: 640px;
  width: max-content;
  max-width: none;
}

/* ---------- Desktop: table centered, scroll off, static ---------- */
@media (min-width: 1024px) {
  .tbl-wrap,
  .compare-table,
  .data-table {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .tbl-wrap > table,
  .compare-table-inner > table,
  .data-table > table {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* ==================================================================
   FIX — pages double-pad because .page-body already gives 20px
   Home: keep the 20px on .tbl-wrap
   Pages: remove the 20px from .compare-table / .data-table
   ================================================================== */

/* HOME: .tbl-wrap keeps its own 20px gutter on mobile */
@media (max-width: 1023px) {
  .tbl-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* PAGES: .compare-table / .data-table inside .page-body → no own padding */
@media (max-width: 1023px) {
  .page-body .compare-table,
  .page-body .data-table,
  .article-col .compare-table,
  .article-col .data-table,
  .content .compare-table,
  .content .data-table {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}