/* ============================================================
   Lens options. Ported from the mockup's .spectable / .spectable-wrap
   (styles/product.css), including its phone card layout.

   Four presets, the same four names the spec block uses, so a spec table and
   this table can be set to read as one surface — which is the mockup's own
   stated intent. `striped` is the mockup's, and the default.
   ============================================================ */
.vt-lenses {
  /* The block spans its column: a section's stack is a flex column with
     align-items: flex-start. See BLOCKS.md trap 9. */
  width: 100%;
  /* One knob for cell gutters, so a preset changes it in one line instead of
     restating padding on three selectors. */
  --vt-lenses-pad-x: 18px;
}

/* The table scrolls inside its OWN container, never the page. Five columns fit
   the 1146px band; seven do not, and a page that scrolls sideways is broken in
   a way a table that scrolls is not. */
.vt-lenses__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.vt-lenses__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--vt-fg, var(--color-text));
}

.vt-lenses__caption {
  caption-side: top;
  text-align: left;
  padding: 16px 18px 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vt-fg-muted, var(--color-text-muted));
  text-wrap: pretty;
}

.vt-lenses__head {
  padding: 12px var(--vt-lenses-pad-x);
  text-align: right;
  font-size: max(11px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--vt-fg-muted, var(--color-text-muted));
  border-bottom: 1px solid var(--color-divider);
}
.vt-lenses__head--name { text-align: left; }

/* ------------------------------------------------------------
   Sortable heads (2026-08-21). A real <button> in the <th>, so it is focusable
   and Enter/Space-operable; the state lives in the <th>'s aria-sort and the
   triangles are decoration.
   ------------------------------------------------------------ */
.vt-lenses__sort {
  /* the head cell already owns the padding and the alignment; the button is
     only the hit area, so it inherits everything and adds nothing */
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.vt-lenses__sort:hover { color: var(--color-dark-purple); }
.vt-lenses__sort:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 3px;
}

/* Two stacked triangles: both faint at rest, the active direction in purple.
   Drawn with borders on pseudo-elements whose `content` is EMPTY — a shape, not
   text, so nothing is exposed to a screen reader the way `content: "▾"` would
   be. Same reasoning as vt-list's check marker, and the parent span is
   aria-hidden as well. */
.vt-lenses__arrows {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 15px;
  margin-left: 7px;
}
.vt-lenses__arrows::before,
.vt-lenses__arrows::after {
  content: "";
  position: absolute;
  left: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.vt-lenses__arrows::before {
  top: 1px;
  border-bottom: 5px solid var(--color-light-purple-40);
}
.vt-lenses__arrows::after {
  bottom: 1px;
  border-top: 5px solid var(--color-light-purple-40);
}
.vt-lenses__sort:hover .vt-lenses__arrows::before { border-bottom-color: var(--color-light-purple-60); }
.vt-lenses__sort:hover .vt-lenses__arrows::after { border-top-color: var(--color-light-purple-60); }

/* The active column. `[aria-sort]` is the selector on purpose — the attribute IS
   the state, so the paint can never disagree with what a screen reader is told. */
.vt-lenses__head[aria-sort] .vt-lenses__sort { color: var(--color-dark-purple); }
.vt-lenses__head[aria-sort="ascending"] .vt-lenses__arrows::before,
.vt-lenses__head[aria-sort="descending"] .vt-lenses__arrows::after {
  border-bottom-color: var(--color-dark-purple);
  border-top-color: var(--color-dark-purple);
}
/* the inactive half of the active column recedes rather than disappearing —
   it is still the affordance for reversing */
.vt-lenses__head[aria-sort="ascending"] .vt-lenses__arrows::after { border-top-color: var(--color-light-purple-20); }
.vt-lenses__head[aria-sort="descending"] .vt-lenses__arrows::before { border-bottom-color: var(--color-light-purple-20); }

/* Arrows sit AFTER the label in every column, whatever the cell's alignment
   (Yoann, 2026-08-21). An earlier version flipped them to the inside on the
   right-aligned heads; one consistent side is easier to scan than one that
   tracks the alignment. */

/* On a dark section the resting triangles need the surface's own foreground —
   light purple on ink is invisible. */
.vt-section.is-dark .vt-lenses__arrows::before { border-bottom-color: color-mix(in srgb, #ffffff 35%, transparent); }
.vt-section.is-dark .vt-lenses__arrows::after { border-top-color: color-mix(in srgb, #ffffff 35%, transparent); }
.vt-section.is-dark .vt-lenses__head[aria-sort] .vt-lenses__sort { color: var(--vt-fg); }
.vt-section.is-dark .vt-lenses__head[aria-sort="ascending"] .vt-lenses__arrows::before,
.vt-section.is-dark .vt-lenses__head[aria-sort="descending"] .vt-lenses__arrows::after {
  border-bottom-color: #ffffff;
  border-top-color: #ffffff;
}
.vt-section.is-dark .vt-lenses__head[aria-sort="ascending"] .vt-lenses__arrows::after { border-top-color: color-mix(in srgb, #ffffff 22%, transparent); }
.vt-section.is-dark .vt-lenses__head[aria-sort="descending"] .vt-lenses__arrows::before { border-bottom-color: color-mix(in srgb, #ffffff 22%, transparent); }

/* The phone sort control. Built by assets/js/table-sort.js and hidden here
   until the head row
   goes away, so there is never more than one sort affordance on screen. */
.vt-lenses__sortbar { display: none; }

.vt-lenses__name {
  padding: 14px var(--vt-lenses-pad-x);
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  /* the lens model is the row's identifier, and dark purple is how this design
     marks an identifier — 7.4:1 on white, 6.5:1 on the mist band */
  color: var(--color-dark-purple);
  white-space: nowrap;
}
.vt-lenses__cell {
  padding: 14px var(--vt-lenses-pad-x);
  text-align: right;
  white-space: nowrap;
}
.vt-lenses__cell--num { font-variant-numeric: tabular-nums; }
.vt-lenses__cell.is-empty { color: var(--vt-fg-subtle, var(--color-text-subtle)); }

.vt-lenses__unit {
  margin-left: 3px;
  font-size: 0.84em;
  color: var(--vt-fg-muted, var(--color-text-muted));
}

.vt-lenses__badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: max(10.5px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
/* Dark purple, not the light purple the mockup's (removed) 4K tag wore: white
   on light purple measures 4.11:1, and at 10.5px bold this is not large text,
   so it needs 4.5:1 and fails. Dark purple is 7.4:1. */
.vt-lenses__badge--included { background: var(--color-dark-purple); color: #ffffff; }
.vt-lenses__badge--eol {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ---- preset: carded, zebra rows (the mockup, and the default) ---- */
.vt-lenses--striped .vt-lenses__scroll,
.vt-lenses--boxed .vt-lenses__scroll {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.vt-lenses--striped .vt-lenses__row:nth-child(even) { background: var(--color-surface-alt); }
.vt-lenses--striped .vt-lenses__row:hover,
.vt-lenses--boxed .vt-lenses__row:hover { background: var(--color-light-purple-10); }

/* ---- preset: carded, ruled rows ---- */
.vt-lenses--boxed .vt-lenses__name,
.vt-lenses--boxed .vt-lenses__cell { border-bottom: 1px solid var(--color-divider); }
.vt-lenses--boxed .vt-lenses__row:last-child .vt-lenses__name,
.vt-lenses--boxed .vt-lenses__row:last-child .vt-lenses__cell { border-bottom: 0; }

/* ---- preset: ruled rows, no card ---- */
.vt-lenses--rules .vt-lenses__name,
.vt-lenses--rules .vt-lenses__cell { border-bottom: 1px solid var(--color-divider); }
.vt-lenses--rules .vt-lenses__row:last-child .vt-lenses__name,
.vt-lenses--rules .vt-lenses__row:last-child .vt-lenses__cell { border-bottom: 0; }
/* Without a card there is no card edge to inset from, so the OUTER cells lose
   their gutter and the rules run the full width of the column. Everything
   between keeps it. */
.vt-lenses--rules .vt-lenses__caption,
.vt-lenses--plain .vt-lenses__caption { padding-inline: 0; }
.vt-lenses--rules .vt-lenses__table :is(th, td):first-child,
.vt-lenses--plain .vt-lenses__table :is(th, td):first-child { padding-left: 0; }
.vt-lenses--rules .vt-lenses__table :is(th, td):last-child,
.vt-lenses--plain .vt-lenses__table :is(th, td):last-child { padding-right: 0; }

/* ---- preset: no card, no rules ---- */
.vt-lenses--plain .vt-lenses__name,
.vt-lenses--plain .vt-lenses__cell { padding-block: 9px; }

/* The recommended-lens hook, kept for the day a field can say which lens it is.
   Nothing sets it today — see render.php. */
.vt-lenses__row.is-pick {
  background: linear-gradient(90deg, var(--color-light-purple-10), transparent 82%);
  box-shadow: inset 3px 0 0 var(--color-light-purple);
}

/* On a dark section the card is a whisper of white and the zebra inverts.
   `.vt-section.is-dark` out-specifies the base rules whatever order WordPress
   inlines the sheets in — block CSS lands BEFORE the theme's (trap 2). */
.vt-section.is-dark .vt-lenses--striped .vt-lenses__scroll,
.vt-section.is-dark .vt-lenses--boxed .vt-lenses__scroll {
  border-color: color-mix(in srgb, #ffffff 14%, transparent);
  background: color-mix(in srgb, #ffffff 4%, transparent);
}
.vt-section.is-dark .vt-lenses--striped .vt-lenses__row:nth-child(even) {
  background: color-mix(in srgb, #ffffff 4%, transparent);
}
.vt-section.is-dark .vt-lenses__row:hover { background: color-mix(in srgb, #ffffff 8%, transparent); }
.vt-section.is-dark .vt-lenses__name { color: var(--vt-fg); }
.vt-section.is-dark .vt-lenses__head,
.vt-section.is-dark .vt-lenses__name,
.vt-section.is-dark .vt-lenses__cell { border-color: color-mix(in srgb, #ffffff 12%, transparent); }
.vt-section.is-dark .vt-lenses__badge--eol {
  background: color-mix(in srgb, #ffffff 8%, transparent);
  color: var(--vt-fg-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent);
}

/* ------------------------------------------------------------
   Phones: one card per lens, the mockup's own call. A five-column table on a
   350px screen is a horizontal scroll nobody finds, so <thead> goes away and
   each cell prints its own column name from data-label.
   ------------------------------------------------------------ */
@container vt-section (max-width: 760px) {
  .vt-lenses .vt-lenses__scroll {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .vt-lenses .vt-lenses__table,
  .vt-lenses .vt-lenses__table tbody { display: block; }
  .vt-lenses .vt-lenses__table thead { display: none; }
  .vt-lenses .vt-lenses__caption { display: block; padding: 0 0 12px; }

  /* the card IS the edge again, so the gutter comes back for every preset */
  .vt-lenses { --vt-lenses-pad-x: 0px; }

  /* <thead> is gone below here, so the sort bar is the only affordance left.
     Without it the whole sorting feature would silently vanish on a phone. */
  .vt-lenses .vt-lenses__sortbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .vt-lenses .vt-lenses__sortbar-label {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: max(11px, var(--fs-floor, 0px));
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vt-fg-muted, var(--color-text-muted));
  }
  .vt-lenses .vt-lenses__sortbar-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--vt-fg, var(--color-text));
  }
  .vt-lenses .vt-lenses__sortbar-select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
  .vt-lenses .vt-lenses__row {
    display: block;
    margin-bottom: 12px;
    padding: 4px 16px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  /* the zebra and the hover are meaningless once every row is its own card */
  .vt-lenses .vt-lenses__row:nth-child(even),
  .vt-lenses .vt-lenses__row:hover { background: var(--color-surface); }

  .vt-lenses .vt-lenses__name {
    display: block;
    padding: 10px 0 13px;
    font-size: 18px;
    white-space: normal;
    border-bottom: 1px solid var(--color-border);
  }
  .vt-lenses .vt-lenses__cell {
    display: flex;
    /* flex-start, NOT space-between — and this is a fix to the mockup, not a
       deviation from it. A cell holds three flex items here: the ::before label,
       the number, and the unit span. space-between spreads all three, which
       parks "mm" against the right edge 292px away from the "16" it belongs to
       (measured in the mockup at 390px). The label takes the slack instead, so
       the number and its unit stay one reading. */
    justify-content: flex-start;
    align-items: baseline;
    /* No gap: a flex gap applies between EVERY pair, so it would sit between
       the number and its unit as well. The label's own padding is the
       separation instead, and the unit keeps the 3px it wears everywhere. */
    gap: 0;
    padding: 12px 0;
    font-size: 16px;
    white-space: normal;
    text-align: right;
    border-bottom: 1px solid var(--color-divider);
  }
  .vt-lenses .vt-lenses__cell:last-child { border-bottom: 0; }
  /* The column name, from the attribute render.php wrote. Decorative
     duplication of the <thead> that is hidden here, so it is CSS content
     rather than an element — the accessible table still has its real headers. */
  .vt-lenses .vt-lenses__cell::before {
    content: attr(data-label);
    /* takes all the slack, which is what keeps the value and its unit together */
    margin-right: auto;
    padding-right: 14px;
    font-weight: var(--fw-medium);
    text-align: left;
    color: var(--vt-fg-muted, var(--color-text-muted));
  }

  .vt-section.is-dark .vt-lenses .vt-lenses__row,
  .vt-section.is-dark .vt-lenses .vt-lenses__row:nth-child(even) {
    border-color: color-mix(in srgb, #ffffff 14%, transparent);
    background: color-mix(in srgb, #ffffff 4%, transparent);
  }
}