# Access Matrix Component
> [!summary]
> The Access Matrix is a branded HTML component for rendering role-based permission grids on the published site. It is styled by `publish.css` and currently used by the canonical [[08 - Eval Labs Roles and Access Matrix|Eval Labs Roles and Access Matrix]].
---
## What it is
A reusable, on-brand replacement for a plain Markdown permission table. It renders a card with numbered capability columns, a sticky role column, per-role access meters, and accessible grant / deny marks in the Eval Labs gold/amber palette.
It exists because the access model is load-bearing canon and deserves a clearer, more scannable presentation than a raw Markdown grid.
---
## Where it lives
```text
Styles: publish.css → /* Eval Labs — Access Matrix component */ (.eval-access-matrix … )
Markup: the note that needs the grid (currently note 08)
```
> [!risk]
> The component is two coupled parts. The note carries the HTML; `publish.css` carries every `.eval-access-matrix` / `.am-*` style. **Both must be published together.** If you publish the note without the updated `publish.css`, the matrix renders as unstyled HTML.
---
## Rule
- Edit the live access values **only** in the canonical matrix ([[08 - Eval Labs Roles and Access Matrix|Roles and Access Matrix]]). It is the single source of truth; other notes link to it rather than copy it.
- Keep the grid data identical to the role definitions on that same page. The visual is not allowed to diverge from the written canon.
- Recolor through the brand variables, not hard-coded hex. The component reads `--eval-gold`, `--eval-amber`, `--eval-orange`, `--eval-deep-orange`, `--eval-ink`, and the callout fill/stroke tokens.
- Keep the accessibility markup: `scope` on header/row cells, `role="img"` + `aria-label="Allowed" / "Not allowed"` on every mark.
---
## Use when
- A note needs to show who-can-do-what across roles and surfaces.
- The grid is small enough to read as a matrix (a handful of roles × a handful of capabilities).
- The data is canonical and stable enough to be worth styling.
---
## Avoid
- Duplicating the matrix data into a second note. Link to the canonical one instead.
- Using it for large or frequently-changing tables where a plain Markdown table is easier to maintain.
- Inlining a `<style>` block or Google-Fonts `<link>` in the note. Obsidian Publish does not render those reliably — all styling belongs in `publish.css`.
---
## Markup skeleton
Wrap everything in `.eval-access-matrix`. Mark full-access rows with `am-tier-full` and the no-access row with `am-tier-none` so the role tint and meter labels render correctly.
```html
<div class="eval-access-matrix">
<div class="am-eyebrow"><span>Eval Labs · Roles & permissions</span></div>
<h2 class="am-title">Access matrix</h2>
<p class="am-lede">One-line description of what the grid covers.</p>
<div class="am-card"><div class="am-scroll">
<table aria-label="…">
<colgroup><col class="am-role-col" /><col /><!-- one col per capability --></colgroup>
<thead><tr>
<th scope="col" class="am-corner">Role</th>
<th scope="col" title="tooltip"><span class="am-num">01</span>Capability<br>Name</th>
</tr></thead>
<tbody>
<tr class="am-tier-full">
<th scope="row" class="am-role">
<span class="am-tag">owner</span>
<p class="am-desc">Short role description.</p>
<div class="am-meter"><span class="am-meter-track"><span class="am-meter-fill" style="width:100%"></span></span><span class="am-meter-label">7 / 7</span></div>
</th>
<td class="am-cell"><span class="am-mark am-grant" role="img" aria-label="Allowed"><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td>
<td class="am-cell"><span class="am-deny" role="img" aria-label="Not allowed"></span></td>
</tr>
</tbody>
</table>
</div></div>
<div class="am-foot">
<div class="am-legend">
<span class="am-item"><span class="am-mark am-grant" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Allowed</span>
<span class="am-item"><span class="am-deny" aria-hidden="true"></span> Not allowed</span>
</div>
<span class="am-stamp">EVALUATIONLABS.AI · ACCESS v1</span>
</div>
</div>
```
> [!info] Markdown gotcha
> Keep the HTML block free of blank lines. A blank line inside it makes Obsidian close the HTML and resume Markdown, which breaks the table.
---
## Class reference
| Class | Purpose |
|---|---|
| `eval-access-matrix` | Component root; defines all `--am-*` brand variables |
| `am-eyebrow` / `am-title` / `am-lede` | Header block |
| `am-card` / `am-scroll` | Card shell + horizontal scroll below ~1000px |
| `am-corner` / `am-role` / `am-tag` / `am-desc` | Sticky role column and its label |
| `am-meter` / `am-meter-track` / `am-meter-fill` / `am-meter-label` | Per-role access meter (set `width` inline on the fill) |
| `am-num` | Monospace `01`–`0n` capability number |
| `am-mark am-grant` | Gold/amber grant chip (ink check SVG) |
| `am-deny` | Faint dash for not-allowed |
| `am-tier-full` / `am-tier-none` | Row modifiers for full-access tint and zero-access meter |
| `am-foot` / `am-legend` / `am-stamp` | Legend and corner stamp |
---
## Example
The live, canonical instance is the access grid on [[08 - Eval Labs Roles and Access Matrix|Eval Labs Roles and Access Matrix]]. Read that page to see the component in context and to edit the actual access values.