Zone matrix: partly, what is let through, hits; hc matrix aligned

A cell reads allow, block or partly (some new connections let through,
the rest not), with its exceptions counted by what they do (+3 -1), and
what they let through: services with the addresses they are limited to,
under the grid in hc matrix and in each cell on the Matrix page. A zone
to itself is marked: only traffic routed between its interfaces passes
the firewall. The details list each rule's hits. hc matrix pads the
grid by visible width: the colours' escape codes had thrown it out of
line.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/style.css

@@ -425,10 +425,15 @@ table.matrix th, table.matrix td { text-align: center; }
 table.matrix tbody th { text-align: left; }
 table.matrix th.corner { font-weight: 400; color: var(--muted); text-transform: none; }
 table.matrix td { padding: 4px; }
-.matrix-cell { width: 100%; min-width: 7em; border: 0; background: transparent; color: inherit; font-weight: 600; padding: 6px 8px; cursor: pointer; }
+table.matrix { table-layout: fixed; width: 100%; min-width: 640px; }
+table.matrix thead th:first-child, table.matrix tbody th { width: 8em; }
+.matrix-cell { display: block; width: 100%; min-width: 7em; border: 0; background: transparent; color: inherit; font-weight: 600; padding: 6px 8px; cursor: pointer; white-space: normal; text-align: center; }
 td.matrix-allowed { background: var(--add); color: var(--add-text); }
 td.matrix-blocked { background: var(--del); color: var(--del-text); }
-.matrix-n { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--warn); }
+.matrix-n { margin-left: 6px; font-weight: 400; font-size: 12px; }
+td.matrix-partly { background: var(--warn-soft); color: var(--text); }
+td.matrix-same { opacity: 0.55; }
+.matrix-open { display: block; font-weight: 400; font-size: 12px; opacity: 0.85; margin-top: 2px; }
 td.matrix-none { color: var(--muted); }
 tr.matrix-rest td { border-top: 2px solid var(--border); }