/* /e/ pages (appearances, venue events, occasions): the official long title under the H1, the answer sentence, and
   the listed-word rows on phones (T5, T10). WP12 tokens only (static/css/parrot.css): light and dark follow them. */

.ent-head .otitle { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); max-width: 75ch; }
.app-answer { margin: -6px 0 16px; line-height: 1.5; }

/* ---------- listed words on phones: word · Yes/No · count · (✗) · ▶ on one line, p under the word; nothing off-screen ---------- */
@media (max-width: 900px) {                       /* below this the full table (count, all speakers, agrees, clip, market) no longer fits */
  .tbl-wrap.mk-wrap { overflow: visible; }
  table.dt.mk, table.dt.mk tbody { display: block; width: 100%; }
  table.dt.mk thead {                                /* the column heads stay for screen readers only */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }
  table.dt.mk tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "w r n x k" "p m m m m";
    align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); position: relative;
  }
  table.dt.mk tbody tr:last-child { border-bottom: 0; }
  table.dt.mk tbody tr > * { padding: 0; border-bottom: 0; background: none; }
  table.dt.mk tbody tr:hover { background: var(--surface-2); }
  table.dt.mk th.w { grid-area: w; min-width: 0; overflow-wrap: anywhere; }
  table.dt.mk .c-res { grid-area: r; margin-left: 12px; white-space: nowrap; }
  table.dt.mk .c-cnt { grid-area: n; margin-left: 12px; min-width: 2ch; text-align: right; }
  table.dt.mk .c-clip { grid-area: k; margin-left: 10px; }
  table.dt.mk .c-p { grid-area: p; text-align: left; margin-top: 4px; }
  table.dt.mk .c-p .prob { justify-content: flex-start; grid-template-columns: auto 2.8em auto; }  /* 'transcripts' in full */
  /* all speakers and agrees leave the line but stay for screen readers; a disagreement (✗) stays in view, after the
     count, so the row behind 'agreed with 42 of 43' is findable on a phone */
  table.dt.mk .c-all, table.dt.mk .c-ag:not(.c-dis) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }
  table.dt.mk .c-ag.c-dis { grid-area: x; margin-left: 6px; }
  .show-mkt table.dt.mk .c-mkt { display: block; grid-area: m; margin-top: 4px; text-align: right; }
  /* the clip chip shrinks to its ▶ (its text stays for screen readers); a 32 px target */
  table.dt.mk .c-clip .clip { width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 0; justify-content: center;
    font-size: 0; }
  table.dt.mk .c-clip .clip svg { width: 12px; height: 12px; }
}