docs: update documentation to OKF v0.1 format

docs/guides/authenticated-shell.md

@@ -3,7 +3,7 @@ type: guide
 title: Authenticated Shell
 description: How a signed-in user experiences the post-login shell, including authenticated event streaming.
 tags: [guide, shell, header, sse, navigation, tester]
-timestamp: 2026-07-21T23:25:00Z
+timestamp: 2026-07-22T09:03:53Z
 ---
 
 # When this view is available
@@ -29,10 +29,30 @@ before the shell mounts.
 |---|---|---|
 | Page title | `[data-testid="shell-title"]` | Shows the bootstrap `pageTitle`; clicking navigates to `/challenges`. |
 | Active section | `[data-testid="shell-active-section"]` | Shows `Challenges`, `Scoreboard`, `Blog`, or `Admin` based on the URL. |
-| Event LED | `[data-testid="shell-led"]` | Uses `led-running`, `led-countdown`, `led-stopped`, or `led-unconfigured`. |
+| Event LED | `[data-testid="shell-led"]` | A 10×10 circular dot whose color reflects the current event state. See [Event LED colors](#event-led-colors) below. |
 | Countdown | `[data-testid="shell-countdown"]` | Displays `DD:HH:mm`, `Event ended`, or empty for an unconfigured event. |
 | User menu | `[data-testid="user-menu-trigger"]` | Toggles rank, change-password, optional admin, and logout entries. |
 
+# Event LED colors
+
+The LED is rendered by `ShellHeaderComponent` as a `<span class="led">`
+with one of four state classes attached via `[class.led-<state>]`. The
+visual styling lives in `frontend/src/styles.css` and is driven entirely
+by the existing theme color tokens — there is no per-state color in
+TypeScript.
+
+| Event state       | CSS class             | Color token           | Approx. hex | Visual |
+|-------------------|-----------------------|-----------------------|-------------|--------|
+| `countdown`       | `led led-countdown`   | `--color-warning`     | `#f59e0b`   | Yellow filled dot |
+| `running`         | `led led-running`     | `--color-success`     | `#10b981`   | Green filled dot |
+| `stopped`         | `led led-stopped`     | `--color-danger`      | `#ef4444`   | Red filled dot |
+| `unconfigured`    | `led led-unconfigured`| `--color-secondary`   | `#64748b`   | Neutral gray filled dot |
+
+The base `.led` rule paints a 10×10 circular `inline-block`, so the LED
+is always the same size and shape — only the background color changes
+between states. The element also carries
+`aria-label="Event status: <state>"` for assistive tech.
+
 ## Quick tabs
 
 The tab strip `[data-testid="quick-tabs"]` contains `Challenges`, `Scoreboard`, and
@@ -62,6 +82,7 @@ error event. The shell retains the last event state until a later connection suc
 | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Fetch-based authenticated SSE transport with abort and frame parsing. |
 | `frontend/src/app/core/services/event-status.store.ts` | Applies event frames and derives the live countdown. |
 | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu. |
+| `frontend/src/styles.css` | Defines the `.led` base shape plus the four `.led-{state}` background-color rules keyed on theme tokens. |
 | `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Renders the main navigation tabs. |
 | `tests/frontend/authenticated-event-source.spec.ts` | Verifies authorization headers, SSE frame delivery, and anonymous header omission. |
 

docs/guides/event-window.md

@@ -3,7 +3,7 @@ type: guide
 title: Event Window
 description: How the event window state machine is computed and surfaced via REST + SSE.
 tags: [guide, event, countdown, sse, state-machine]
-timestamp: 2026-07-21T22:19:08Z
+timestamp: 2026-07-22T09:03:53Z
 ---
 
 # Configuration
@@ -78,7 +78,10 @@ The store:
 The header (`ShellHeaderComponent`) renders an LED with the
 `led-{state}` class so the colour reflects the current state (the
 exact theme colours are wired in `styles.css` against the existing
-`--color-success` / `--color-warning` / `--color-danger` tokens).
+`--color-success` / `--color-warning` / `--color-danger` tokens;
+`unconfigured` uses `--color-secondary`). See the
+[Event LED colors](/guides/authenticated-shell.md#event-led-colors)
+table in the Authenticated Shell guide for the full mapping.
 
 `HomeComponent.ngOnDestroy()` (and the `DestroyRef` hook in the store
 itself) close the SSE source and clear the tick interval, so leaving

docs/index.md

@@ -11,7 +11,7 @@ scoreboard, an event window with a public countdown, theming, and admin
 controls.
 
 The docs below are organized by purpose so agents can pull just the slice
-they need. Last regenerated 2026-07-21T23:25:00Z.
+they need. Last regenerated 2026-07-22T09:03:53Z.
 
 # Architecture