/* ============================================================
   Application matrix — which product fits which application. Ported from the
   mockup's .matrix-wrap + .matrix-grid (styles/photoheads.css).

   THE PHONE ANSWER IS A SIDEWAYS SCROLL, deliberately not the lineup table's
   card fold. A lineup row survives as a card because each cell is a labelled
   fact; a matrix cell only means anything at the crossing of its two axes, and
   a card per application would repeat the whole product list nine times. The
   mockup makes the same call (.matrix-wrap { overflow-x: auto }), and the
   scroll container is the block's own __scroll so the page body never scrolls
   sideways.

   Four presets, from the same list as the spec, lens, lineup and family-specs
   tables: this block can sit on the same page as the lineup and the two have to
   be settable to read as one surface.

   Child selectors where anything meets the skeleton: WordPress inlines a
   block's style.css BEFORE the theme's sheets, so a block rule that only ties
   on specificity LOSES. See BLOCKS.md trap 2.
   ============================================================ */
.vt-appmatrix {
  /* The block spans its column. Not optional: a section's content stack is a
     flex column with align-items: flex-start, so without this the table
     collapses to min-content. See BLOCKS.md trap 9. */
  width: 100%;
}

.vt-appmatrix__scroll {
  overflow-x: auto;
}

.vt-appmatrix__table {
  width: 100%;
  min-width: 860px;   /* the mockup's floor — below it REC/OK cells collide */
  border-collapse: collapse;
  font-size: 13px;
}

/* ---- the two headers ---- */
.vt-appmatrix__head {
  padding: 14px 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-medium);
  text-align: center;
  color: var(--color-dark-purple);
  border-bottom: 1px solid var(--color-border);
}
.vt-appmatrix__head--app,
.vt-appmatrix__rowhead {
  text-align: left;
}
.vt-appmatrix__rowhead {
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--vt-fg, var(--color-text));
  border-bottom: 1px solid var(--color-divider);
}

/* ---- the cells ---- */
.vt-appmatrix__cell {
  padding: 13px 10px;
  text-align: center;
  font-size: max(11px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-divider);
}
.vt-appmatrix__row:last-child .vt-appmatrix__rowhead,
.vt-appmatrix__row:last-child .vt-appmatrix__cell { border-bottom: 0; }

/* REC is the one judgement the table renders in colour; OK is a fact and an
   em dash is an absence, so they stay in the text's own hierarchy. */
.vt-appmatrix__cell.is-rec {
  color: var(--color-success-text);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.vt-appmatrix__cell.is-ok    { color: var(--color-dark-purple); }
.vt-appmatrix__cell.is-empty {
  color: var(--color-border-strong, var(--color-text-subtle));
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}

/* ---- preset: carded (striped and boxed share the card; striped zebras) ---- */
.vt-appmatrix--striped .vt-appmatrix__scroll,
.vt-appmatrix--boxed .vt-appmatrix__scroll {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.vt-appmatrix--striped .vt-appmatrix__head,
.vt-appmatrix--boxed .vt-appmatrix__head {
  background: var(--color-surface-alt);
}
/* zebra on the row HEADER cell only: a tint across a REC cell would mix with
   the success tint into a third colour the palette does not have */
.vt-appmatrix--striped .vt-appmatrix__row:nth-child(even) .vt-appmatrix__rowhead,
.vt-appmatrix--striped .vt-appmatrix__row:nth-child(even) .vt-appmatrix__cell.is-empty,
.vt-appmatrix--striped .vt-appmatrix__row:nth-child(even) .vt-appmatrix__cell.is-ok {
  background: var(--color-surface-alt);
}

/* ---- preset: ruled rows, no card ---- */
/* the base rules above ARE the ruled look */

/* ---- preset: no card, no rules ---- */
.vt-appmatrix--plain .vt-appmatrix__rowhead,
.vt-appmatrix--plain .vt-appmatrix__cell { border-bottom: 0; }
.vt-appmatrix--plain .vt-appmatrix__head { border-bottom-color: var(--color-divider); }

/* On a dark section the card becomes a whisper of white, the same way the
   lineup, cards and family-specs do. `.vt-section.is-dark` out-specifies the
   base rules whatever order WordPress inlines the sheets in. */
.vt-section.is-dark .vt-appmatrix--striped .vt-appmatrix__scroll,
.vt-section.is-dark .vt-appmatrix--boxed .vt-appmatrix__scroll {
  border-color: color-mix(in srgb, #ffffff 14%, transparent);
  background: color-mix(in srgb, #ffffff 4%, transparent);
}
.vt-section.is-dark .vt-appmatrix--striped .vt-appmatrix__head,
.vt-section.is-dark .vt-appmatrix--boxed .vt-appmatrix__head,
.vt-section.is-dark .vt-appmatrix--striped .vt-appmatrix__row:nth-child(even) .vt-appmatrix__rowhead,
.vt-section.is-dark .vt-appmatrix--striped .vt-appmatrix__row:nth-child(even) .vt-appmatrix__cell.is-empty,
.vt-section.is-dark .vt-appmatrix--striped .vt-appmatrix__row:nth-child(even) .vt-appmatrix__cell.is-ok {
  background: color-mix(in srgb, #ffffff 4%, transparent);
}
.vt-section.is-dark .vt-appmatrix__head,
.vt-section.is-dark .vt-appmatrix__cell.is-ok {
  /* dark purple on ink is unreadable — on a dark surface both take the
     surface's own foreground */
  color: var(--vt-fg);
}
.vt-section.is-dark .vt-appmatrix__head,
.vt-section.is-dark .vt-appmatrix__rowhead,
.vt-section.is-dark .vt-appmatrix__cell {
  border-color: color-mix(in srgb, #ffffff 12%, transparent);
}
.vt-section.is-dark .vt-appmatrix__cell.is-rec {
  /* the light theme's success text is tuned for a white card; on ink it needs
     the token lifted toward white to clear contrast */
  color: color-mix(in srgb, var(--color-success) 55%, #ffffff);
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
}
.vt-section.is-dark .vt-appmatrix__cell.is-empty {
  color: color-mix(in srgb, #ffffff 35%, transparent);
}

/* Phones: the application column narrows and wraps so the first grade column
   PEEKS past the fold — a cut-off column is the scroll affordance, and without
   it the label column fills the screen and the table reads as a plain list. */
@container vt-section (max-width: 700px) {
  .vt-appmatrix .vt-appmatrix__rowhead,
  .vt-appmatrix .vt-appmatrix__head--app {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    white-space: normal;
  }
}