/* services.css - services.html lists / tables and the services_stats.html confusion matrix (cards and charts come from stats.css) */

/* list or table view of the same sections; list is the default */
.view-toggle{ display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 0.6em 0 -0.4em 0; font-size: 0.85em; color: #666; }
.view-toggle span{ margin-right: 4px; }
.view-toggle button{ font: inherit; padding: 1px 9px; border: 1px solid #d5deed; border-radius: 4px; background: #fff; color: #224b8d; cursor: pointer; }
.view-toggle button[aria-pressed="true"]{ background: #eef2f8; border-color: #9fb6d4; color: #224b8d; font-weight: 700; }
.svc-as-table{ display: none; }
html[data-svc-view="table"] .svc-as-table{ display: block; }
html[data-svc-view="table"] .svc-as-list{ display: none; }

.svc-list{ margin: 0.2em 0 0.8em 1.2em; padding: 0; }
.svc-list li{ margin: 3px 0; line-height: 1.5; }

.svc-table td{ vertical-align: top; }

/* reviewer confusion matrix */
.cm{ display: grid; grid-template-columns: 9em 1fr 1fr; gap: 4px; max-width: 460px; margin: 0.3em 0 1em 0; font-size: 0.92em; }
.cm-head{ text-align: center; font-weight: 700; color: #333; padding: 4px; }
.cm-side{ display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-weight: 700; color: #333; }
.cm-cell{ text-align: center; padding: 12px 6px; border-radius: 6px; font-size: 1.4em; font-weight: 700; color: #fff; }
.cm-cell span{ display: block; font-size: 0.6em; font-weight: 400; opacity: 0.9; }
.cm-cell.good{ background: #6aa36a; }
.cm-cell.bad{ background: #cd7b62; }