> ## Documentation Index
> Fetch the complete documentation index at: https://helloluciallc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Historical Obsidian Access Matrix Component

<Warning>
  Historical Obsidian-era component reference. Its `publish.css` instructions are
  not current Mintlify authoring guidance. The canonical public matrix is [Eval
  Labs Roles and Access Matrix](/eval-labs/how-eval-labs-works/eval-labs-roles-and-access-matrix),
  with presentation owned by this repository's MDX and `style.css`.
</Warning>

***

## 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 theme={"dark"}
Styles:  publish.css  →  /* Eval Labs — Access Matrix component */  (.eval-access-matrix … )
Markup:  the note that needs the grid  (currently note 08)
```

<Warning>
  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.
</Warning>

***

## Rule

* Edit the live access values **only** in the canonical matrix ([Roles and Access Matrix](/eval-labs/how-eval-labs-works/eval-labs-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 theme={"dark"}
<div class="eval-access-matrix">
<div class="am-eyebrow"><span>Eval Labs · Roles &amp; 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.
</Info>

***

## 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 [Eval Labs Roles and Access Matrix](/eval-labs/how-eval-labs-works/eval-labs-roles-and-access-matrix). Read that page to see the component in context and to edit the actual access values.
