/* The comparison matrix — Yoshuko against whoever this audience is choosing between.
 *
 * ONE stylesheet for FOUR renderings: / and /why-yoshuko/ (creators, vs Kajabi and
 * Teachable) and /institutions/ and /why-yoshuko/institutions/ (vs Canvas and
 * Blackboard). The rest of the marketing pages carry their styles inline in a nonced
 * <style>, which is fine while a page owns its own look; this component is shared four
 * ways, and four inline copies is the drift the comparison data itself exists to prevent.
 *
 * Every colour is a --color-* token. Bootstrap's --bs-* custom properties are NOT this
 * app's palette: `var(--bs-primary, #0d6efd)` does not fail loudly, it silently falls
 * back and the component comes up Bootstrap blue inside a forest-green app.
 */

.im-wrap {
  /* The table has four columns of prose and cannot usefully reflow below ~720px, so it
     scrolls INSIDE its own box. Without this the whole page scrolls sideways on a
     phone, which breaks every section above and below it too. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.im-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  font-size: var(--font-size-sm);
}

.im-table th,
.im-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
}

.im-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

/* Our column is tinted rather than coloured-in: a solid brand block behind eleven rows
   of prose reads as a highlight applied to the answer, which is the opposite of what a
   comparison is for. */
.im-table .im-us {
  background: rgba(26, 58, 42, .05);
}
.im-table thead .im-us {
  background: var(--color-primary);
  color: #fff;
  border-bottom-color: var(--color-primary-hover);
}

.im-feature {
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  min-width: 220px;
}

.im-table tbody tr:last-child td { border-bottom: 0; }

/* A group heading spanning the table, so the matrix reads as three or four decisions
   rather than one undifferentiated list of rows. */
.im-group th {
  background: var(--color-surface-sunken);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted-fg);
  font-weight: var(--font-weight-semibold);
}

/* The mark. Colour is never the only signal — every cell carries words, and the icon
   has an accessible name, because "green vs amber" is not a comparison a colour-blind
   reader or a screen-reader user can make. */
.im-mark { margin-right: var(--space-2); }
.im-mark-yes     { color: var(--color-success); }
.im-mark-partial { color: var(--color-warning); }
.im-mark-no      { color: var(--color-muted-fg); }

/* The AI pair, and the whole reason this table was rebuilt.
 *
 * `ai` is the wand: we do this FOR you. `manual` is the hourglass: they can do it, and a
 * person spends the afternoon doing it. Those are the two marks that carry the argument,
 * so they are the two that get weight — everything else on the row is table stakes both
 * competitors also sell.
 *
 * `manual` is deliberately NOT the muted grey of `no`. Greying it says "they cannot do
 * this", which is false and which a reader who knows the product catches immediately —
 * and one caught overstatement costs the whole table its credibility. Amber says
 * "possible, and it costs you", which is both true and the more damaging claim. */
.im-mark-ai {
  color: var(--color-success);
  font-size: 1.05em;
}
.im-mark-manual { color: var(--color-warning); }

/* An AI row is the row a skimmer must not miss. A tint on the whole row rather than a
   badge on one cell: the argument is the CONTRAST across the row, so highlighting only
   our own cell would frame it as a feature we have rather than as work they still do. */
.im-row-ai .im-feature { font-weight: var(--font-weight-semibold); }
.im-table tbody tr.im-row-ai td,
.im-table tbody tr.im-row-ai th { background: rgba(26, 58, 42, .03); }
.im-table tbody tr.im-row-ai .im-us { background: rgba(26, 58, 42, .07); }

.im-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
  margin-right: var(--space-4);
}