/* The same editable table card is used in TinyMCE, articles and forum posts. */
.sv-table-card {
  --table-surface: var(--surface, #fff);
  --table-ink: var(--ink, #203451);
  --table-line: var(--line, #dde7f2);
  --table-stripe: #f5f8fd;
  --table-hover: #edf4ff;
  --table-heading: #edf4ff;
  --table-heading-ink: #164c92;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 20px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--table-line);
  border-radius: 14px;
  background: var(--table-surface);
  color: var(--table-ink);
  box-shadow: 0 5px 20px rgb(26 62 109 / 6%);
  scrollbar-width: thin;
  scrollbar-color: #b9cce5 transparent;
  -webkit-overflow-scrolling: touch;
}
.sv-table-card:focus-visible { outline: 2px solid #0874f7; outline-offset: 3px; }
.sv-table-card > table {
  display: table;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
}
.sv-table-card > table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
  box-sizing: border-box;
  height: auto !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--table-line) !important;
  color: var(--table-ink);
  background: var(--table-surface);
  text-align: start;
  vertical-align: middle;
  overflow-wrap: break-word;
}
.sv-table-card > table > :is(thead, tbody, tfoot) > tr > th {
  padding-block: 14px !important;
  color: var(--table-heading-ink) !important;
  background: var(--table-heading) !important;
  font-size: 13px;
  font-weight: 750;
}
.sv-table-card > table > tbody > tr:nth-child(even) > td { background: var(--table-stripe); }
.sv-table-card > table > tbody > tr:hover > td { background: var(--table-hover); }
.sv-table-card > table > :last-child > tr:last-child > :is(th, td) { border-bottom: 0 !important; }
.sv-table-card > table > :is(thead, tbody, tfoot) > tr > :is(th, td) > :is(p, div):last-child { margin-bottom: 0; }
.sv-table-card > table > :is(thead, tbody, tfoot) > tr > :is(th, td) > :is(p, div):first-child { margin-top: 0; }
.sv-table-card > table.sv-table-scores > :is(thead, tbody) > tr > :last-child {
  width: 112px;
  text-align: center;
  white-space: nowrap;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--table-heading-ink);
}
.sv-table-card > table > caption { padding: 14px 18px; color: var(--table-heading-ink); background: var(--table-heading); text-align: start; font-weight: 750; }
[data-theme='dark'] .sv-table-card, body[data-sv-table-theme='dark'] .sv-table-card {
  --table-surface: #142236;
  --table-ink: #e0eafa;
  --table-line: #30435c;
  --table-stripe: #192b42;
  --table-hover: #203953;
  --table-heading: #1d3553;
  --table-heading-ink: #a7ceff;
  box-shadow: 0 5px 20px rgb(0 0 0 / 12%);
  scrollbar-color: #526d8d transparent;
}
@media (max-width: 600px) {
  .sv-table-card { margin-block: 16px; border-radius: 11px; }
  .sv-table-card > table { font-size: 13px; }
  .sv-table-card > table > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding: 11px 13px !important; min-width: 92px; }
  .sv-table-card > table.sv-table-scores > :is(thead, tbody) > tr > :last-child { width: 80px; min-width: 72px; }
}