/* fx.css · sell/compare-table, the column under the pointer lights up · owner: Lizzy East · all rights reserved */

/* A real table, readable and complete on its own. Behind it sits one lamp, a
   full-height layer that fx.js sizes to the column under the pointer, or the
   column holding keyboard focus, and slides from column to column. Without the
   script the table simply has no lamp. The recommended plan carries a pill. */
[data-fx~="sell/compare-table"] { position: relative; isolation: isolate; }
[data-fx~="sell/compare-table"] [data-fx-sr] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-fx~="sell/compare-table"] table {
  position: relative;
  z-index: 1;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1.35;
}
[data-fx~="sell/compare-table"] caption {
  padding: 0 0 1.25rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fx-compare-muted, #4a4f5e);
}
[data-fx~="sell/compare-table"] :is(th, td) {
  padding: 0.9rem clamp(0.3rem, 1.5vw, 1rem);
  border-bottom: 1px solid var(--fx-compare-line, #c7ccd8);
  text-align: center;
  vertical-align: middle;
}
[data-fx~="sell/compare-table"] thead tr > :first-child { width: 32%; }
[data-fx~="sell/compare-table"] tbody th { text-align: left; font-weight: 400; }
[data-fx~="sell/compare-table"] thead th {
  vertical-align: bottom;
  padding-top: 1.4rem;
  font-family: var(--fx-compare-serif, var(--demo-serif, Georgia, serif));
  font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  line-height: 1.05;
}
[data-fx~="sell/compare-table"] thead th small {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--fx-compare-sans, var(--demo-sans, system-ui, sans-serif));
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--fx-compare-muted, #4a4f5e);
}
[data-fx~="sell/compare-table"] [data-fx-pill] {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--fx-pill-bg, #2340ff);
  color: var(--fx-pill-ink, #ffffff);
  font-family: var(--fx-compare-sans, var(--demo-sans, system-ui, sans-serif));
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-fx~="sell/compare-table"] td svg { display: inline-block; vertical-align: middle; color: var(--fx-compare-yes, #2340ff); }
[data-fx~="sell/compare-table"] tfoot :is(th, td) { border-bottom: 0; padding-top: 1.25rem; padding-bottom: 1.4rem; }
[data-fx~="sell/compare-table"] tfoot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 clamp(0.7rem, 2vw, 1.3rem);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* The lamp: sized and placed by fx.js, faded in and slid between columns. */
[data-fx~="sell/compare-table"] [data-fx-lamp] {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--fx-lamp-w, 0px);
  height: var(--fx-lamp-h, 0px);
  translate: var(--fx-lamp-x, 0px) var(--fx-lamp-y, 0px);
  border-radius: var(--fx-lamp-radius, 14px);
  background: var(--fx-lamp, #ffffff);
  box-shadow: 0 18px 40px -24px rgb(17 17 23 / 0.45);
  opacity: 0;
  pointer-events: none;
}
[data-fx~="sell/compare-table"].fx-lit [data-fx-lamp] { opacity: 1; }
/* Unlit, only its fade moves, so it lands in its first column without sliding. */
html.fx-armed [data-fx~="sell/compare-table"] [data-fx-lamp] {
  transition: opacity var(--fx-lamp-fade, 240ms) var(--fx-ease);
}
html.fx-armed [data-fx~="sell/compare-table"].fx-lit [data-fx-lamp] {
  transition: opacity var(--fx-lamp-fade, 240ms) var(--fx-ease), translate var(--fx-lamp-dur, 420ms) var(--fx-ease);
}