<!-- DEPLOYED PUBLIC COPY of the OPA Lab Build Standard.
     Canonical source: opa working/_OPA_LAB_BUILD_STANDARD.canon.md (ratified 2026-07-18).
     Synced into labs/templates/ 2026-07-19. The blank-*.html here are generated from
     _OPA_LAB_TEMPLATE.canon.html and conform to this standard. Some file paths below point
     to the private working tree; they are informational. -->

# OPA Lab — Build Standard (canon)

**Status:** ratified 2026-07-18 by Travis (User Zero). **Single source of truth for lab LAYOUT + the per-new-lab closeout.** Derived from the current deployed labs (`the-fatal-attraction.html` is the cleanest reference), because the structure drifted from `TEMPLATES.md` / `_OPA_LAB_HOUSE_STYLE.canon.md` and those were never updated. **The skeleton is the law; this doc explains it.**

- **Skeleton (copy this to start any lab):** `_OPA_LAB_TEMPLATE.canon.html`
- **Palette per college:** `_OPA_LAB_HOUSE_STYLE.canon.md` §2 (the `--tint` table) — still current, use it.
- **Verification gate:** `top deck log/V32_THE_PARACHUTE.md` (the five gates + the Precision Compass).

---

## 1. What changed since the old docs (why this file exists)

Three structural changes are now standard and were NOT in `TEMPLATES.md`:

1. **The footer is GLOBAL and shows on every tab.** `<footer id="net-standard-footer">` lives **after `</.wrap>`, outside every `.view`** — so it renders at the bottom of whichever tab is open. It is no longer tucked inside the last tab panel. This was the explicit fix: *the footer at the bottom of every page of every tab.*
2. **Per-tab prev/next.** Every `.view` ends with a `.tabnav` (a Prev button + a Next button, each `data-goto="N"`). Top `nav.tabs` and bottom `.tabnav` both call the same `setTab()`.
3. **Hero-instructor block.** The hero now carries a `.hero-instructor` card naming the course + teacher. Now that faculty exist, **every lab names its instructor here** (use `[cowork fill-in]` only until it's wired to a real faculty member).

---

## 2. The canonical region order (never reorder or re-nest)

Full-bleed chrome, then one centered column, then a global footer:

```
BAR 1  #opa-cluster-nav      full-bleed · ← All Labs · Domain · Related: 3–4 sibling LABS (no building/college here)
BAR 2  .opa-topbar           full-bleed · 🌲 Opathorlokan University · url (brand only)
BAR 3  .opa-genre-bar        full-bleed · LAB-TYPE chip · Section · Building · College · Cluster + italic slogan
                             ↑ the ONLY home for building + college, and they are the LINKS
── .wrap (max-width ~1080, centered, ONE left edge — nothing below the bars is centered-text) ──
       .hero                 kick eyebrow → <h1> lab name (<em> accent) → .sub dek → .hero-instructor
       nav.tabs              single scrolling row, NEVER flex-wrap; role=tab + data-tab; BOXED buttons,
                             one line "NN Label" (num in --accent), active = accent-filled — the
                             Kelly's Colony / Pattern Reader style. No stacked subtitle badge.
       .view#v1 (active)     Tab 1 — carries ALL framing/"read this first" boxes → ends with .tabnav
       .view#v2 …            Tabs 2+ — their own content only, NO repeated intro boxes → each ends with .tabnav
── /.wrap ──
FOOTER #net-standard-footer  full-bleed, AFTER the wrap → visible on every tab
                             .row1 (Univ · College · Building · Lab vN.N · section 4.x.y · Domain)
                             .links (▸ Why It Matters · ▸ About & Sources — modal triggers live HERE)
                             .credit (canonical line, CLAUDEDEV v1.2)
MODALS  #m-why · #m-about
#tj-contact                  the shared "note from the builder" snippet — MANDATORY, verbatim, before </body>
```

**Hard rules:** never center body text; only the three bars + footer background are full-bleed; one fact one owner (building/college named once, in the genre-bar); framing boxes on Tab 1 only; `nav.tabs` must scroll, never wrap (mobile law). Typeset: Newsreader + IBM Plex Mono; 15px chrome / 16px reading prose; sentence case except the genre-bar chip.

**Footer credit line (exact, mandatory):**
`All ages · Built by Travis Jenkins (User Zero 🐧) · © 2026 Travis Jenkins · The NET · MPC Universe · Built using the OPA Lab Template · Developed with Claude · CLAUDEDEV v1.2`
Glyph 🐧 default; 🦄 only on the named NET-fiction originals. The `tj-contact` script auto-links "Travis Jenkins" — don't hand-anchor the name.

**Center-of-Gravity exemption (unchanged):** Space-Node and bespoke dark-wing labs may fold metadata into the hero and drop bars — the one tether that must remain is the footer credit line.

---

## 3. The per-new-lab closeout — run EVERY time, after the lab renders

A lab is not done when it renders. After the HTML is built and verified, wire it in — every new lab, same four steps:

1. **Wire the instructor → the teachers-portal.** Add/repoint the faculty member in `teachers-portal.html`: badge the directory row (`<a href="./<name>-faculty-portal.html">…</a><span class="portal-badge">Portal</span>`) and add or repoint the `.fcard`. Put the same teacher in the lab's `.hero-instructor`. (If the lab has no attributed teacher yet, say so in the role line and flag it for assignment — don't invent one.)
2. **Log the lab + class number in its md.** Record the lab name **and its section/class number (4.x.y)** in the lab catalog / provenance md (`opa working/_OPA_LAB_CATALOG.canon.md`) and, if the lab has its own note file, there too. The section number is canon Travis owns — if it isn't assigned yet, mark it `TBD` and flag it, never fabricate one.
3. **Wire it into the index + linked places.** Add the lab to `index.html` (its domain group), and add it to the `Related:` cluster-nav of the 3–4 best sibling labs so the cross-links point both ways. Confirm the genre-bar building + college links resolve, and the cluster-nav siblings exist (no broken links).
4. **Run the gate.** Cold-read it against `V32_THE_PARACHUTE.md`; write the provenance (`top deck log/GATE2_<lab>_PASS.md`, plus a PARACHUTE log if it carries research claims). *Built is not passed.*

---

## 3.5 The two identity seams — byte-identical on every page (canon)

Ratified with the 2026-07-18 consistency pass (147 titles, 75 footer seams, 49 faculty footers normalized across the deploy). Two seams are the same everywhere; the content layer around them stays free.

**A. The browser title tail.** Every lab title is:

`{Lab Name} &mdash; {short hook} &middot; Opathorlokan University`

Lab name first, then the descriptive hook, then the one anchor `&middot; Opathorlokan University` — nothing else. **Strip every institutional code from the title:** no `OPA`, no section number (`4.x.y`), no `College VII`, no building, no suite, no course code. Those already live in the genre-bar and the footer content line — one fact, one owner. The title is where a stranger meets the place cold (a search result, a shared link, a bookmark months later), so it carries the full university name and the hook, nothing administrative. A lab with no hook gets one written (never invent one silently — flag it for Travis).

**B. The faculty/portal footer.** Faculty portal pages use the same credit seam as labs — no bespoke long-form footer:

`… &middot; Built by Travis Jenkins (User Zero 🐧) &middot; <a…>Developed with Claude</a> &middot; CLAUDEDEV v1.2`

Faculty-specific rules: **no street address** in the footer (`900 Arkadelphia Road, Birmingham AL 35254` is gone — that's genre-bar/content material, not the seam); **no `Faculty Portal v1.0 &middot;` / `Teachers Portal v1.0 &middot;` prefix**; capital **Built by**; `Developed with Claude` → `anthropic.com/claude` (never `/about`). The genfac generator now emits this form; older hand-built pages were normalized in the pass.

## 3.6 The footer container — the mono bare-footer standard (ratified 2026-07-18)

The **credit seam** (§3.5B) is carried by a self-styled span, byte-identical everywhere:

`<span style="font-size:9.5px;color:rgba(180,170,150,0.55);font-family:'IBM Plex Mono',monospace,'Courier New';letter-spacing:0.06em;display:block;margin-top:6px;">All ages · Built by Travis Jenkins (User Zero 🐧) · © 2026 Travis Jenkins · The NET · MPC Universe · Built using <a…>the OPA Lab Template</a> · <a…>Developed with Claude</a> · CLAUDEDEV v1.2</span>`

The container is a bare **`<footer>`** (no bespoke `<div class="foot">` / `<footer class="lab">`); its metadata line(s) above the credit are the lab's own (college/suite/instructor) and stay mono/subtle. Because the credit span is self-styled with hardcoded colors, it renders identically regardless of a lab's palette vars. 135/148 labs conform after the 2026-07-18 pass.

**Exemptions are minimal by design** (every exemption is a tax on future sweeps): only the UNI/NET-fiction identity labs (venom-kit clinical, degradation-marker unicorn) and the `*-transcripts` companions keep bespoke footers. **Space-Node is NOT exempt** — its identity is the palette/voice/hero, not the footer.

**Note — the `net-standard-footer` labs (the 8 newest) are being reconciled** with the Why-It-Matters/About-into-a-tab decision; until then they keep their global every-tab footer.

## 3.7 Tab-row scroll affordance (ratified 2026-07-18)

`nav.tabs` scrolls, never wraps (mobile law) — but a hidden scrollbar meant a mouse couldn't reach the tabs past the right edge (and it bit on phones too). Every lab now carries the **`opa-tabscroll`** drop-in (CSS `[data-ov]` mask + a shared script, injected like the `tj-contact` snippet): an **edge-fade** "more →" hint, **mouse-wheel → horizontal** scroll, **click-drag**, native touch-swipe, and **auto-centering the selected tab** (so a footer link or deep-link that jumps to a far tab brings it into view). It auto-detects the row (`nav.tabs` / `[role="tablist"]` / `.tabs`), is a no-op when the row doesn't overflow, and degrades to native touch if JS fails. The skeleton ships with it; new labs inherit it.

## 3.8 About & Sources — the provenance is a TAB, not a drawer (ratified 2026-07-18)

The receipt (full sources with citations/dois, the "what's real / what's mine" ledger, aged-out corrections, the gate stamp) lives in a standard **`About & Sources` tab** — the last tab — NOT a hidden footer modal. The footer's `About & Sources` link now jumps to that tab (`setTab(lastTab)`) instead of popping a modal. The **point-of-use caveats stay inline** on the content tabs, guarding each claim where it's made; the tab is the full ledger, not the only place honesty appears. The skeleton ships with this (v4 placeholder + wired footer link); new labs inherit it.

**Existing labs retrofit opportunistically** — when a lab is next touched, its Why/About modals fold into an About tab (mechanical for template-pattern labs; per-lab for the ~44 older ones, which span 12+ tab architectures and ~8 that have no tab bar at all). Converted so far: the-fatal-attraction, under-the-behavior. The modals that remain are fine — the assessment (2026-07-18) found them unique, not redundant; they just live in a drawer until their lab's turn.

## 4. Reference files

| Purpose | File |
|---|---|
| Copy-to-start skeleton | `_OPA_LAB_TEMPLATE.canon.html` |
| Per-college `--tint` palette | `_OPA_LAB_HOUSE_STYLE.canon.md` §2 |
| Cleanest live reference lab | `labs/the-fatal-attraction.html` |
| Verification gate | `top deck log/V32_THE_PARACHUTE.md` |
| Faculty wiring target | `labs/teachers-portal.html` |
| Lab catalog / section log | `_OPA_LAB_CATALOG.canon.md` |

*The structure emerged from the labs. The skeleton is the spec. When a lab and this doc disagree, fix the drift — and update this file so it never goes stale again.*