/* 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 {
  /* At >=992px the table fits its container. Below that it REFLOWS into one card per
     feature (the media block at the end of this file) rather than scrolling inside this
     box: a sideways scroller showed Feature plus half of our column on a phone and hid
     every rival with no cue. overflow-x stays as the guard against a future fifth column. */
  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);
  line-height: 1.45;
}

.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. The tint is a wash of the BRAND (it was a forest-green rgba left
   from the retired palette, which read as a cold zebra stripe under a brown header),
   and a 2px brown rule on each side ties the body to its header. */
.im-table .im-us {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  box-shadow: inset 2px 0 0 var(--color-primary), inset -2px 0 0 var(--color-primary);
}
.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;
}
/* The feature name stays put if the table ever does scroll, so a row is never a set of
   answers with no question beside them. */
.im-table tbody th.im-feature {
  position: sticky;
  left: 0;
  background: var(--color-surface);
}
.im-table thead th.im-feature { left: 0; z-index: 2; }

.im-cell { display: inline; }

.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); }
/* Partial and manual were both --color-warning, so two states differed only by a ~12px
   glyph. Partial is now the brand brown; manual keeps an amber family (see below). */
.im-mark-partial { color: var(--color-primary); }
.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;
}
/* The DARK amber: same "possible, and it costs you" meaning, at a contrast a 14px glyph
   can actually carry on white (#D97706 is ~3.2:1, #92400E ~7:1). */
.im-mark-manual { color: var(--color-accent-fg); }

/* 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: var(--color-surface-raised); }
.im-table tbody tr.im-row-ai .im-us { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)); }

.im-legends {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}
.im-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-muted-fg);
}
/* On a phone five centred items wrapped to three ragged lines with one orphan; a
   two-column grid reads as a key. */
@media (max-width: 575.98px) {
  .im-legends {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }
}
/* 576–991 the five centred items wrapped 4 + 1, "Not available" alone on a second line.
   A three-column key (3 + 2) instead. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .im-legends {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    justify-items: start;
  }
}

/* ── Below 992px: one card per feature ───────────────────────────────────────
   Every rival stays on screen. 576–991: the feature heads the card and the three
   answers sit side by side, each under its platform name. <576: the answers stack,
   platform name on the left. The header row is visually hidden (the platform names
   are printed per cell from data-label) but kept for assistive technology. */
@media (max-width: 991.98px) {
  .im-wrap { overflow: visible; border: 0; border-radius: 0; }
  .im-table { min-width: 0; background: transparent; }
  .im-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .im-table tbody { display: block; }
  .im-table tbody tr { display: block; }
  .im-table tbody tr:not(.im-group) {
    display: grid;
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
  }
  .im-table tbody th,
  .im-table tbody td { display: block; min-width: 0; }
  .im-table tbody th.im-feature {
    position: static;
    grid-column: 1 / -1;
    background: var(--color-surface-raised);
    font-weight: var(--font-weight-semibold);
  }
  .im-group th {
    padding: var(--space-5) 0 var(--space-2);
    background: transparent;
    border-bottom: 0;
  }
  .im-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-muted-fg);
  }
  .im-table tbody td.im-us::before { color: var(--color-primary-hover); }
  .im-table tbody td.im-us { box-shadow: inset 3px 0 0 var(--color-primary); }
  .im-table tbody tr.im-row-ai td,
  .im-table tbody tr.im-row-ai th { background: var(--color-surface); }
  .im-table tbody tr.im-row-ai th.im-feature { background: var(--color-surface-raised); }
  .im-table tbody tr.im-row-ai td.im-us,
  .im-table tbody td.im-us { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
  .im-table tbody tr:not(.im-group) > :last-child { border-bottom: 0; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .im-table--cols3 tbody tr:not(.im-group) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .im-table--cols4 tbody tr:not(.im-group) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .im-table tbody td { border-bottom: 0; }
  .im-table tbody td + td { border-left: 1px solid var(--color-border); }
}
@media (max-width: 575.98px) {
  .im-table tbody td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--space-3);
  }
  .im-table tbody td::before { margin: .15rem 0 0; }
}

/* The dated method note under the table ran one ~190-character line at 1440. */
.im-note { max-width: 72ch; }