/* Tables (tools/plus.py: tidy_tables), in the design system's flat, minimalist language: no card, no shadow, no tint, no rounded corners; a rule above and below,
   hairlines between the rows, and the type does the rest. A spec sheet (two columns: the row's label and its value) and a list with a header row (three or more
   columns). Oswald for the labels, Inter for the values, the ink and greys of plus/system.css. */
.plus-table-wrap {
  box-sizing: border-box;
  margin: 8px 0 40px;
  border-top: 2px solid var(--se-ink, #15120f);
  border-bottom: 1px solid var(--se-ink, #15120f);
  overflow-x: auto;
}

.plus-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: none;
  color: var(--se-ink, #15120f);
  font: 400 16px/1.5 var(--se-text, Inter, system-ui, sans-serif);
}

.plus-table th,
.plus-table td {
  padding: 16px 24px 16px 0;
  border: 0;
  border-top: 1px solid var(--se-n150, #e4ddd0);
  background: none;
  text-align: left;
  vertical-align: baseline;
}

.plus-table tr:first-child > th,
.plus-table tr:first-child > td { border-top: 0; }

.plus-table td p,
.plus-table th p { margin: 0; }

/* the label of a row */
.plus-table th[scope="row"] {
  width: 25%;
  min-width: 11rem;
  color: var(--se-n500, #766e63);
  font: 500 12px/1.5 var(--se-display, Oswald, sans-serif);
  letter-spacing: var(--se-ls-label, .08em);
  text-transform: uppercase;
  transition: color .15s ease;
}

.plus-table tbody tr > * { transition: background-color .15s ease; }
.plus-table tbody tr:hover > * { background: var(--se-white, #fff); }
.plus-table tbody tr:hover > th[scope="row"] { color: var(--se-red, #ad2a1e); }

/* a list with a header row (the scabbard tiers): the header in small capitals over a heavier rule, the name of the row large, the second column (the price) on one line */
.plus-table--grid thead th {
  padding: 14px 24px 14px 0;
  border: 0;
  border-bottom: 1px solid var(--se-ink, #15120f);
  color: var(--se-n500, #766e63);
  font: 500 12px/1.4 var(--se-display, Oswald, sans-serif);
  letter-spacing: var(--se-ls-label, .08em);
  text-transform: uppercase;
}

.plus-table--grid tbody th[scope="row"] {
  width: auto;
  min-width: 8rem;
  color: var(--se-ink, #15120f);
  font: 500 20px/1.3 var(--se-display, Oswald, sans-serif);
  letter-spacing: .02em;
  text-transform: none;
}

.plus-table--grid tbody td:nth-child(2) {
  font-weight: 600;
  white-space: nowrap;
}

/* a phone: no columns. A spec row is its label over its value; a list row names each value itself (the header row stays for screen readers) */
@media (max-width: 640px) {
  .plus-table,
  .plus-table tbody,
  .plus-table tr,
  .plus-table th,
  .plus-table td { display: block; width: auto; }
  .plus-table tr { padding: 14px 0 16px; border-top: 1px solid var(--se-n150, #e4ddd0); }
  .plus-table tr:first-child { border-top: 0; }
  .plus-table th,
  .plus-table td { min-width: 0; padding: 0; border: 0; }
  .plus-table th[scope="row"] { margin-bottom: 2px; }
  .plus-table tbody tr:hover > * { background: none; }
  .plus-table--grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .plus-table--grid tbody th[scope="row"] { margin-bottom: 8px; font-size: 20px; }
  .plus-table--grid tbody td { padding-top: 8px; }
  .plus-table--grid tbody td:nth-child(2) { white-space: normal; }
  .plus-table--grid tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    color: var(--se-n500, #766e63);
    font: 500 12px/1.4 var(--se-display, Oswald, sans-serif);
    letter-spacing: var(--se-ls-label, .08em);
    text-transform: uppercase;
  }
}