/* Feature matrix: MeisterCalc against several apps, features as rows, apps as columns.
   The table scrolls sideways inside its own box on a phone; the feature column stays put. */
.prose .matrix-wrap { position: relative; overscroll-behavior-x: contain; }
.prose .matrix-wrap:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.prose table.matrix { min-width: 860px; table-layout: fixed; }
.prose table.matrix thead th:first-child,
.prose table.matrix tbody th { width: 150px; }
.prose table.matrix th, .prose table.matrix td { padding: 10px; }
.prose table.matrix tbody th { background: var(--surface); color: var(--white); font-weight: 600; font-size: 14px; }
.prose table.matrix thead th:first-child,
.prose table.matrix tbody th {
  position: sticky; left: 0; z-index: 1;
  box-shadow: inset -1px 0 0 var(--divider);
}
.prose table.matrix thead th:first-child { z-index: 2; background: var(--surface2); }
.prose table.matrix thead a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(245, 166, 35, 0.5); text-underline-offset: 3px; }
.prose table.matrix thead a:hover, .prose table.matrix thead a:focus-visible { color: var(--amber); }
.prose table.matrix .ours { background: rgba(245, 166, 35, 0.08); }
.prose table.matrix thead th.ours { box-shadow: inset 0 -3px 0 var(--amber); }
.prose table.matrix .ours-tag { color: var(--text-sec); font-weight: 500; }
.prose table.matrix td { text-align: center; }
.prose table.matrix .mk { display: inline-block; font-size: 18px; line-height: 1; font-weight: 700; }
.prose table.matrix .mk-yes { color: #4CAF7A; }
.prose table.matrix .mk-no { color: #E5675A; }
.prose table.matrix .mk-word { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.prose table.matrix .mk-partly { color: var(--amber); }
.prose table.matrix .mk-unv { color: var(--text-sec); }
.prose table.matrix small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--text-sec); overflow-wrap: anywhere; }
.prose .vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.prose .matrix-key, .prose .matrix-sources { font-size: 14px; color: var(--text-sec); }
.prose .matrix-sources a { color: var(--text-sec); text-decoration: underline; text-underline-offset: 3px; }
.prose .matrix-sources a:hover, .prose .matrix-sources a:focus-visible { color: var(--amber); }
@media (max-width: 600px) {
  .prose table.matrix { min-width: 760px; }
  .prose table.matrix thead th:first-child,
  .prose table.matrix tbody th { width: 112px; font-size: 13px; }
  /* the caption would scroll away with the table; the heading and the Checked on line say the same */
  .prose table.matrix caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}