/* ─── tables-polish-v1.css — site-wide table styling upgrade (2026-05-22) ───
   Apply to any table by adding class="polish" or wrap in .polish-tbl-wrap.
   Inline page CSS still wins by specificity if needed. */

/* Wrap any table that needs horizontal scroll to communicate the scroll affordance */
.polish-tbl-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  background: #0e1216;
  border: 1px solid #1f2429;
  border-radius: 10px;
  margin: 18px 0;
  /* edge-shadow hints that more content scrolls off-screen */
  background-image:
    linear-gradient(to right, #0e1216 30%, rgba(14,18,22,0)),
    linear-gradient(to right, rgba(14,18,22,0), #0e1216 70%),
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.45), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.45), rgba(0,0,0,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
  -webkit-overflow-scrolling: touch;
}

table.polish {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-size: 14px;
  color: #c4c7cb;
  font-variant-numeric: tabular-nums;
}

/* Sticky header — stays in view while customer scrolls long comparison tables */
table.polish thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #131619;
  color: #f3f5f7;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 2px solid #1f2429;
  vertical-align: bottom;
  white-space: nowrap;
  user-select: none;
}

/* Click-to-sort: cursor + indicator (filled by JS, default empty) */
table.polish thead th[data-sortable] {
  cursor: pointer;
  padding-right: 24px;
  position: sticky;  /* re-asserted for IDE */
}
table.polish thead th[data-sortable]:hover {
  background: #1a1f23;
  color: #00cc66;
}
table.polish thead th[data-sortable]::after {
  content: "↕";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  font-size: 11px;
  color: #6b7177;
  transition: opacity 0.12s, color 0.12s;
}
table.polish thead th[aria-sort="ascending"]::after {
  content: "▲";
  opacity: 1;
  color: #00cc66;
}
table.polish thead th[aria-sort="descending"]::after {
  content: "▼";
  opacity: 1;
  color: #00cc66;
}

/* Body cells — generous padding, vertical-align top so multi-line cells stay clean */
table.polish tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #15191d;
  vertical-align: top;
  line-height: 1.55;
}

/* Zebra striping — subtle, doesn't fight green llmdeal-row highlights */
table.polish tbody tr:nth-child(even) td {
  background: #0a0d10;
}

/* Row hover — entire row brightens slightly for easy line-following on wide tables */
table.polish tbody tr:hover td {
  background: #11161b;
}

/* llmdeal rows get a stronger green-tint background + left bar */
table.polish tbody tr.llmdeal td {
  background: rgba(0, 204, 102, 0.07);
}
table.polish tbody tr.llmdeal:hover td {
  background: rgba(0, 204, 102, 0.12);
}
table.polish tbody tr.llmdeal td:first-child {
  box-shadow: inset 3px 0 0 #00cc66;
  font-weight: 600;
  color: #f3f5f7;
}

/* Price cells — right-aligned, monospace for visual scan */
table.polish td.num,
table.polish td.price,
table.polish th.num,
table.polish th.price {
  text-align: right;
  font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Menlo, monospace;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* "yes" / "no" boolean cells — colored badges */
table.polish td.bool {
  font-weight: 600;
  text-align: center;
}
table.polish td.bool[data-v="yes"]::before {
  content: "✓";
  display: inline-block;
  width: 1.5em;
  color: #00cc66;
}
table.polish td.bool[data-v="no"]::before {
  content: "✕";
  display: inline-block;
  width: 1.5em;
  color: #e88;
}
table.polish td.bool[data-v="partial"]::before {
  content: "~";
  display: inline-block;
  width: 1.5em;
  color: #d4a017;
}

/* "Pain point" or detail cells with explanatory text — italic muted */
table.polish td.detail {
  color: #94a3b8;
  font-style: italic;
  font-size: 13px;
  max-width: 320px;
}

/* Code / model-name cells — mono font, subtle background */
table.polish td code,
table.polish td .mono {
  font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Menlo, monospace;
  background: #15191d;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: #e6e8eb;
}

/* Compact variant — used when the table has 10+ rows */
table.polish.compact tbody td {
  padding: 8px 12px;
  font-size: 13px;
}
table.polish.compact thead th {
  padding: 10px 12px;
  font-size: 11px;
}

/* ── Mobile responsive: stack rows as cards at <760px ──────────────────────
   Works WITH the existing data-label pattern. Each <td> needs data-label.
   If a table doesn't have data-label attrs, the cells stay in a horizontal
   scroll (still readable, just no card view). */
@media (max-width: 760px) {
  table.polish.stackable thead {
    display: none;
  }
  table.polish.stackable tbody tr {
    display: block;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #0e1216;
    border: 1px solid #1f2429;
    border-radius: 8px;
  }
  table.polish.stackable tbody tr.llmdeal {
    border-color: #00cc66;
    background: rgba(0, 204, 102, 0.06);
  }
  table.polish.stackable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #15191d;
  }
  table.polish.stackable tbody td:last-child {
    border-bottom: 0;
  }
  table.polish.stackable tbody td:nth-child(even),
  table.polish.stackable tbody tr:hover td,
  table.polish.stackable tbody tr.llmdeal td {
    background: transparent;
  }
  table.polish.stackable tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #94a3b8;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 0 0 38%;
    line-height: 1.55;
  }
  table.polish.stackable tbody td:first-child {
    font-size: 16px;
    font-weight: 600;
    color: #f3f5f7;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #1f2429;
  }
  table.polish.stackable tbody td:first-child::before {
    display: none;
  }
  /* Hide row left-bar shadow on mobile — full border-left looks better as a card */
  table.polish.stackable tbody tr.llmdeal td:first-child {
    box-shadow: none;
  }
}

/* Subtle scrollbar styling — dark theme */
.polish-tbl-wrap::-webkit-scrollbar {
  height: 8px;
}
.polish-tbl-wrap::-webkit-scrollbar-track {
  background: #0a0d10;
}
.polish-tbl-wrap::-webkit-scrollbar-thumb {
  background: #2a313a;
  border-radius: 4px;
}
.polish-tbl-wrap::-webkit-scrollbar-thumb:hover {
  background: #3a4350;
}