Switch departure board to use Inconsolata monospaced font (varying widths, weights, etc.)

Update table display on board page, in preparation for offering different 'table' styles.
Add initial departure board table 'skeleton', very basic at present
2026-05-11 20:28:22 +01:00 · 2026-05-11 12:04:40 +01:00 · 2026-05-10 20:57:50 +01:00 · 2026-05-10 00:27:45 +01:00 · 2026-05-10 00:26:21 +01:00
11 changed files with 599 additions and 235 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "web-pwa",
 			"version": "0.0.1",
 			"dependencies": {
+				"@owlboard/api-schema-types": "^3.0.3-alpha18",
 				"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
 				"@tabler/icons-svelte": "^3.40.0"
 			},
@@ -801,9 +802,9 @@
 			}
 		},
 		"node_modules/@owlboard/api-schema-types": {
-			"version": "3.0.3-alpha17",
-			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.3-alpha17/api-schema-types-3.0.3-alpha17.tgz",
-			"integrity": "sha512-9jtsajZIq/1W9w1XPSIQSH/rcH2mfnS+3XoQpe81Yor2pOVl5+iyHZ9wAlJLrLEVKVVs3k4lkjcM5l6KgWgd9w==",
+			"version": "3.0.3-alpha18",
+			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.3-alpha18/api-schema-types-3.0.3-alpha18.tgz",
+			"integrity": "sha512-k9X83i8ljatuiKQWNxgixid8tneM0i0G5NP1Wo1N2O0SF0PBMs3gxkEMWwKMuc+htiGCeRLqvIZqrm//Bgeo/w==",
 			"license": "MIT"
 		},
 		"node_modules/@owlboard/owlboard-ts": {
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
 		"vitest-browser-svelte": "^2.0.2"
 	},
 	"dependencies": {
+		"@owlboard/api-schema-types": "^3.0.3-alpha18",
 		"@owlboard/owlboard-ts": "^3.0.0-dev.20260509t2101",
 		"@tabler/icons-svelte": "^3.40.0"
 	}
--- a/src/lib/components/ui/TrainService.svelte
+++ b/src/lib/components/ui/TrainService.svelte
@@ -7,6 +7,7 @@
 	import TocStyle from '$lib/components/ui/TocStyle.svelte';
 	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
 	import { IconChevronDownFilled } from '@tabler/icons-svelte';
+	import { estClass } from '$lib/utils/time';
 	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
 	let isExpanded = $state(false);
 	let loadingDetails = $state(false);
@@ -45,8 +46,6 @@
 		loadingDetails = false;
 	}

-	const estClass = (act, est) => (!act && est ? 'est' : 'act');
-
 	const activityMap: Record<string, string> = {
 		'-D': 'Vehicles detatched',
 		'-T': 'Vehicles attached & detached',
--- a/src/lib/components/ui/cards/StationAlertCard.svelte
+++ b/src/lib/components/ui/cards/StationAlertCard.svelte
@@ -1,137 +0,0 @@
-<script lang="ts">
-	import { slide } from 'svelte/transition';
-	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
-	import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte';
-
-	let { messages = [] }: { messages: ApiStationsBoard.BoardMsgs[] } = $props();
-	let isOpen = $state(false);
-</script>
-
-{#if messages.length > 0}
-	<aside class="alert-card">
-		<button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}>
-			<span class="warning-icon">
-                <IconAlertOctagonFilled />
-            </span>
-			<span class="summary">
-				{messages.length}
-				{messages.length === 1 ? 'active alert' : 'active alerts'}
-			</span>
-			<span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span>
-		</button>
-
-    {#if isOpen}
-        <div transition:slide={{ duration: 450 }} class="content">
-            {#each messages as msg}
-                <div class="message-item">
-                    <p class="message-text">
-                        {msg.t}
-                        {#if msg.l && msg.lt}
-                            <a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
-                                {msg.lt}
-                            </a>
-                        {/if}
-                    </p>
-                </div>
-            {/each}
-        </div>
-    {/if}
-    </aside>
-{/if}
-
-<style>
-    .alert-card {
-        margin: 1rem 0;
-        border-radius: 8px;
-        background: transparent;
-        position: relative;
-        z-index: 10;
-        width: 95%;
-        max-width: 750px;
-    }
-
-    .trigger {
-        width: 100%;
-        display: flex;
-        border-radius: 8px;
-        align-items: center;
-        padding: 0.4rem 1rem;
-        background: var(--alert-orange);
-        color: white;
-        border: none;
-        cursor: pointer;
-        text-align: left;
-        position: relative;
-        z-index: 2;
-        height: 46px;
-        transition: all 0.65s 0.2s;
-    }
-
-    .trigger.active {
-        border-radius: 8px 8px 0 0;
-        transition: all 0.1s 0s;
-    }
-
-    .warning-icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 0;
-        margin-top: 0;
-        margin-bottom: 0;
-        margin-right: 1rem;
-        padding: 0;
-    }
-
-    .summary {
-        flex: 1;
-        font-family: 'URW Gothic', sans-serif;
-        letter-spacing: 0.05em;
-        font-weight: 600;
-        font-size: 1rem;
-    }
-
-    .chevron {
-        transition: transform  0.5s ease;
-        display: inline-flex;
-        justify-content: center;
-    }
-
-    .chevron.rotated {
-        transform: rotateX(180deg);
-    }
-
-    .content {
-        padding: 1rem;
-        position: absolute;
-        top: 46px;
-        border-radius: 0 0 8px 8px;
-        left: 0;
-        right: 0;
-        background: var(--alert-orange);
-        filter: brightness(1.2);
-        color: var(--color-title);
-        font-family: 'URW Gothic', sans-serif;
-        font-size: 1.0rem;
-        font-weight: 600;
-        line-height: 1.2;
-        z-index: 1;
-    }
-
-    .message-item {
-        margin: 10px;
-        padding-bottom: 0.75rem;
-    }
-
-    .message-item p {
-        margin: 0;
-    }
-
-    .message-item a {
-        color: #f2ff00;
-    }
-
-    .message-item:last-child {
-        padding-bottom: 0;
-    }
-</style>
--- a/src/lib/components/ui/station-board/StaffServicesTable.svelte
+++ b/src/lib/components/ui/station-board/StaffServicesTable.svelte
@@ -0,0 +1,270 @@
+<script lang="ts">
+	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
+	import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
+
+	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
+
+	const getRowKey = (s: ApiStationsBoard.BoardService) =>
+		`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
+</script>
+
+<table class="departure-board">
+	<thead>
+		<tr>
+			<th colspan="4" aria-hidden="true"></th>
+			<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
+			<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
+		</tr>
+		<tr>
+			<th scope="col"><abbr title="Headcode">ID</abbr></th>
+			<th scope="col"><abbr title="Origin">Orig</abbr></th>
+			<th scope="col"><abbr title="Destination">Dest</abbr></th>
+			<th scope="col"><abbr title="Platform">Plt</abbr></th>
+			<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
+			<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
+			<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
+			<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
+		</tr>
+	</thead>
+
+	{#each services as service (getRowKey(service))}
+		<tbody>
+			<tr class="service-row" class:serviceCancelled={service.c} class:servicePass={service.wtp} class:serviceNonPassenger={!service.ip}>
+				<td class="id-cell">{service.h}</td>
+				<td class="orig-cell"><abbr title={service.og.n.toLocaleUpperCase()}>{service.og.t}</abbr></td>
+				<td class="dest-cell"><abbr title={service.dt.n.toLocaleUpperCase()}>{service.dt.t}</abbr></td>
+				<td class="plt-cell" class:platSup={service.ps} class:platChange={service.pc}
+					>{service.p || '-'}</td
+				>
+
+				<!-- Handle different display for a passing train -->
+				{#if service.wtp}
+					<td class="pass-cell" colspan="2">Pass</td>
+					<td class="time-cell">{formatUkTime(service.wtp)}</td>
+					<!-- If cancelled, show '-', otherwise check for RT or show time -->
+					<td
+						class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(
+							service.wtp,
+							service.atp || service.etp
+						)}"
+					>
+						<span>
+							{service.c
+								? '-'
+								: delayClassFromTimePair(service.wtp, service.atp || service.etp) === 'delay-rt'
+									? 'RT'
+									: formatUkTime(service.atp || service.etp)}
+						</span>
+					</td>
+				{:else}
+					<td class="time-cell">{formatUkTime(service.sta)}</td>
+
+					<!-- Arrival Actual/Expected -->
+					<td
+						class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(
+							service.sta,
+							service.ata || service.eta
+						)}"
+					>
+						<span>
+							{service.c
+								? '-'
+								: delayClassFromTimePair(service.sta, service.ata || service.eta) === 'delay-rt'
+									? 'RT'
+									: formatUkTime(service.ata || service.eta)}
+						</span>
+					</td>
+
+					<td class="time-cell">{formatUkTime(service.std)}</td>
+
+					<!-- Departure Actual/Expected -->
+					<td
+						class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(
+							service.std,
+							service.atd || service.etd
+						)}"
+					>
+						<span>
+							{service.c
+								? '-'
+								: delayClassFromTimePair(service.std, service.atd || service.etd) === 'delay-rt'
+									? 'RT'
+									: formatUkTime(service.atd || service.etd)}
+						</span>
+					</td>
+				{/if}
+			</tr>
+
+			{#if service.c && service.cr?.r}
+				<tr class="cancel-row">
+					<td colspan="9">
+						{service.cr.r}
+						{#if service.cr.l}
+							{service.cr.n ? 'near' : 'at'}
+							{service.cr.l}
+						{/if}
+					</td>
+				</tr>
+			{/if}
+			{#if service.dr?.r}
+				<tr class="delay-row">
+					<td colspan="9">
+						{service.dr.r}
+						{#if service.dr.l}
+							{service.dr.n ? 'near' : 'at'}
+							{service.dr.l}
+						{/if}
+					</td>
+				</tr>
+			{/if}
+		</tbody>
+	{/each}
+</table>
+
+<style>
+	.departure-board {
+		width: 100%;
+		margin: 5px auto;
+		border-collapse: collapse;
+	}
+
+	.departure-board td {
+		font-family: 'Inconsolate Variable', monospace;
+		font-size: 1rem;
+		font-variant-numeric: tabular-nums;
+		font-variant-ligatures: additional-ligatures;
+	}
+
+	thead,
+	.cancel-row td,
+	.delay-row td {
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.02ch;
+	}
+
+	thead {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		background: var(--color-bg-dark);
+	}
+
+    abbr {
+    text-decoration: none;
+    border-bottom: none;
+    cursor:help;
+}
+
+	/* Row Logic */
+	.serviceCancelled {
+		color: rgb(255, 131, 131);
+	}
+
+	.servicePass td {
+		opacity: 0.75;
+		font-weight: 200;
+	}
+
+    .serviceNonPassenger td {
+        opacity: 0.5;
+        font-weight: 200;
+        font-style: italic;
+    }
+
+	/* Special Row Styles */
+	.cancel-row td,
+	.delay-row td {
+		font-size: 0.88rem;
+		padding-bottom: 8px;
+	}
+
+	.cancel-row td[colspan],
+	.delay-row td[colspan] {
+		padding-left: 0.75ch;
+	}
+
+	.cancel-row td {
+		color: rgb(255, 131, 131);
+		font-weight: 400;
+	}
+
+	.delay-row td {
+		color: var(--delay-orange);
+		font-style: italic;
+	}
+
+	/* Column Specifics */
+	.id-cell {
+		text-align: center;
+		font-weight: 400;
+		font-stretch: 80%;
+		filter: brightness(0.75);
+	}
+	.orig-cell,
+	.dest-cell {
+		font-stretch: 90%;
+        font-weight: 400;
+	}
+	.orig-cell {
+		text-align: left;
+		color: var(--location-yellow);
+	}
+	.dest-cell {
+		text-align: right;
+		color: var(--location-yellow);
+	}
+	.plt-cell {
+		text-align: center;
+		font-weight: 405;
+		font-stretch: 70%;
+	}
+	.plt-cell.platSup {
+		font-weight: 200;
+		opacity: 0.3;
+	}
+	.plt-cell.platChange {
+		animation: fast-pulse 2s ease-out infinite;
+	}
+	.service-row.serviceCancelled .plt-cell {
+		text-decoration: line-through;
+	}
+	.pass-cell {
+		text-align: center;
+	}
+	/* Colour orig and dest values when cancelled */
+	.service-row.serviceCancelled .orig-cell,
+	.service-row.serviceCancelled .dest-cell {
+		color: rgb(255, 131, 131);
+	}
+
+	.time-cell {
+		text-align: center;
+		font-stretch: 70%;
+	}
+
+	/* RT Logic */
+	.time-cell.delay-rt span {
+		display: none;
+	}
+	.time-cell.delay-rt::after {
+		content: 'RT';
+	}
+
+	.time-cell.delay-early {
+		color: var(--early-blue);
+	}
+
+	.time-cell.delay-late {
+		color: var(--delay-orange);
+	}
+
+	/* Time Types */
+	.est {
+		font-style: italic;
+		opacity: 0.75;
+		font-weight: 200;
+	}
+	.act {
+		font-weight: 600;
+	}
+</style>
--- a/src/lib/components/ui/station-board/StationAlertCard.svelte
+++ b/src/lib/components/ui/station-board/StationAlertCard.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
+	import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte';
+
+	let { messages = [] }: { messages: ApiStationsBoard.BoardMsgs[] } = $props();
+	let isOpen = $state(false);
+</script>
+
+{#if messages.length > 0}
+	<aside class="alert-card">
+		<button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}>
+			<span class="warning-icon">
+				<IconAlertOctagonFilled />
+			</span>
+			<span class="summary">
+				{messages.length}
+				{messages.length === 1 ? 'active alert' : 'active alerts'}
+			</span>
+			<span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span>
+		</button>
+
+		{#if isOpen}
+			<div transition:slide={{ duration: 450 }} class="content">
+				{#each messages as msg}
+					<div class="message-item">
+						<p class="message-text">
+							{msg.t}
+							{#if msg.l && msg.lt}
+								<a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
+									{msg.lt}
+								</a>
+							{/if}
+						</p>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</aside>
+{/if}
+
+<style>
+	.alert-card {
+		margin: 0;
+		border-radius: 8px;
+		background: transparent;
+		position: relative;
+		z-index: 10;
+		margin-bottom: 0;
+		width: 95%;
+		max-width: 750px;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.alert-card:active {
+		filter: brightness(1.2);
+	}
+
+	.trigger {
+		width: 100%;
+		display: flex;
+		border-radius: 8px;
+		align-items: center;
+		padding: 0.1rem 1.05rem;
+		background: var(--alert-orange);
+		color: white;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		position: relative;
+		z-index: 2;
+		height: 40px;
+		transition: all 0.65s 0.2s;
+	}
+
+	.trigger.active {
+		border-radius: 8px 8px 0 0;
+		transition: all 0.01s 0s;
+	}
+
+	.warning-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: 0;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-right: 1rem;
+		padding: 0;
+	}
+
+	.summary {
+		flex: 1;
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.05em;
+		font-weight: 600;
+		font-size: 1rem;
+	}
+
+	.chevron {
+		transition: transform 0.5s ease;
+		display: inline-flex;
+		justify-content: center;
+	}
+
+	.chevron.rotated {
+		transform: rotateX(180deg);
+	}
+
+	.content {
+		padding: 1rem;
+		position: absolute;
+		top: 40px;
+		border-radius: 0 0 8px 8px;
+		left: 0;
+		right: 0;
+		background: var(--alert-orange);
+		filter: brightness(1.2);
+		color: var(--color-title);
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 1rem;
+		font-weight: 600;
+		line-height: 1.2;
+		z-index: 1;
+	}
+
+	.message-item {
+		margin: 10px;
+		padding-bottom: 0.75rem;
+	}
+
+	.message-item p {
+		margin: 0;
+	}
+
+	.message-item a {
+		color: #f2ff00;
+	}
+
+	.message-item:last-child {
+		padding-bottom: 0;
+	}
+</style>
--- a/src/lib/global.css
+++ b/src/lib/global.css
@@ -129,7 +129,41 @@
 	font-style: normal;
 	font-display: swap;
 }
+
+/* Fira Code - Variable with fallback */
+@font-face {
+	font-family: 'Fira Code';
+	src: url('/type/fira-code/FiraCode-VF.woff2') format('woff2-variations');
+	font-weight: 300 700;
+	font-style: normal;
+	font-display: swap;
+}
+@font-face {
+	font-family: 'Fira Code';
+	src: url('/type/fira-code/FiraCode-Regular.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+/* Inconsolata Variable */
+@font-face {
+	font-family: 'Inconsolata Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 200 900;
+	font-stretch: 50% 200%;
+	src: url(type/Inconsolata/latin-wdth-normal.woff2) format('woff2-variations');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 :root {
+	/* Fixed Heights */
+	--header-height: 80px;
+	--nav-height: 60px;
+
 	/* Brand Colours */
 	--color-brand: #4fd1d1;
 	--color-accent: #3c6f79;
@@ -159,7 +193,7 @@
 		opacity: 1;
 	}
 	50% {
-		opacity: 0.3;
+		opacity: 0.5;
 	}
 }

@@ -171,7 +205,7 @@
 	}
 	25%,
 	75% {
-		opacity: 0;
+		opacity: 0.25;
 	}
 }

--- a/src/lib/utils/time.ts
+++ b/src/lib/utils/time.ts
@@ -1,13 +1,19 @@
 import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
+
+export const estClass = (act: any, est: any) => (act ? 'act' : 'est');
+
 /**
 * Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds
 * Ensures Europe/London timezone irrespective of browser timezone.
 */
-export function formatUkTime(dateStr: string | Date | undefined, includeSeconds: boolean = false): string {
-	if (!dateStr) return '--:--';
+export function formatUkTime(
+	dateStr: string | Date | undefined,
+	includeSeconds: boolean = false
+): string {
+	if (!dateStr) return '-';
 	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;

-	if (isNaN(date.getTime())) return '--:--';
+	if (isNaN(date.getTime())) return '-';

 	return date.toLocaleTimeString('en-GB', {
 		hour: '2-digit',
@@ -22,14 +28,18 @@ return date.toLocaleTimeString('en-GB', {
 * Converts ISO/JSON time to UK-formatted DD/MM/YY HH:MM:SS string.
 * Ensures Europe/London timezone irrespective of browser timezone.
 */
-export function formatUkDateTime(dateStr: string | Date | undefined, includeSeconds: boolean = false): string {
+export function formatUkDateTime(
+	dateStr: string | Date | undefined,
+	includeSeconds: boolean = false
+): string {
 	if (!dateStr) return '--/--/-- --:--:--';

 	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;

 	if (isNaN(date.getTime())) return '--/--/-- --:--:--';

-    return date.toLocaleString('en-GB', {
+	return date
+		.toLocaleString('en-GB', {
 			day: '2-digit',
 			month: '2-digit',
 			year: '2-digit',
@@ -38,23 +48,49 @@ export function formatUkDateTime(dateStr: string | Date | undefined, includeSeco
 			...(includeSeconds && { second: '2-digit' }),
 			hour12: false,
 			timeZone: 'Europe/London'
-    }).replace(',', '');
+		})
+		.replace(',', '');
+}
+
+/**
+ * Specific type that can handle the TrainDetails.ServiceLocation and the ApiStationsBoard.BoardService types for delay calculation
+ */
+interface DelayInput {
+	// Board types
+	sta?: string | null;
+	std?: string | null;
+	eta?: string | null;
+	etd?: string | null;
+	ata?: string | null;
+	atd?: string | null;
+
+	// Journey types
+	pta?: string | null;
+	ptd?: string | null;
+	wta?: string | null;
+	wtd?: string | null;
+	atp?: string | null;
+	wtp?: string | null;
+	etp?: string | null;
 }

 /**
 * Calculates a 'delay' value, in the formats:
 * RT, 1E, 7L, etc.
- * @param 'Schedule Location' object
+ * @param 'Schedule Location' or 'Board Service' object
 * @returns Delay string for departure boards
 */
-export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {
+export function calculateDelay(loc: DelayInput): {
 	val: string;
 	type: string;
 } {
 	const pairs = [
-		{ actual: loc.atd, sched: loc.ptd ?? loc.wtd },
-		{ actual: loc.ata, sched: loc.pta ?? loc.wta },
-		{ actual: loc.atp, sched: loc.wtp }
+		// Departure check (Board: atd/etd vs std | Journey: atd vs ptd/wtd)
+		{ actual: loc.atd || loc.etd, sched: loc.std || loc.ptd || loc.wtd },
+		// Arrival check (Board: ata/eta vs sta | Journey: ata vs pta/wta)
+		{ actual: loc.ata || loc.eta, sched: loc.sta || loc.pta || loc.wta },
+		// Passing check
+		{ actual: loc.atp || loc.etp, sched: loc.wtp }
 	];

 	const match = pairs.find((p) => p.actual && p.sched);
@@ -72,3 +108,27 @@ export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {
 		return { val: `${absDiff}E`, type: 'early' };
 	}
 }
+
+/**
+ * Accepts a pair of times (string or Date) and outputs a delay class 'delay-early', 'delay-late' or 'delay-rt'
+ * @param sched Scheduled Time (string, Date)
+ * @param act Actual Time (string, Date)
+ */
+export function delayClassFromTimePair(sched: any, act: any): string {
+	if (!sched || !act) return '';
+
+	const s = new Date(sched).getTime();
+	const a = new Date(act).getTime();
+
+	if (isNaN(s) || isNaN(a)) return '';
+
+	const diff = a - s;
+	const oneMinute = 60000;
+
+	// on-time if within one minute
+	if (Math.abs(diff) < oneMinute) {
+		return 'delay-rt';
+	}
+
+	return diff > 0 ? 'delay-late' : 'delay-early';
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -154,7 +154,7 @@
 <style>
 	header {
 		top: 0;
-		height: 80px;
+		height: var(--header-height);
 		box-shadow: var(--shadow-std);
 	}
 	.logo-link {
@@ -201,13 +201,12 @@
 		min-height: 100dvh;
 		box-sizing: border-box;
 		background-color: var(--color-bg-dark);
-		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
 	}

 	nav {
 		display: flex;
 		bottom: 0;
-		height: 60px;
+		height: var(--nav-height);
 		box-shadow: var(--shadow-up);
 	}

--- a/src/routes/board/+page.svelte
+++ b/src/routes/board/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
 	import { quickLinks } from '$lib/quick-links.svelte';
-	import StationAlertCard from '$lib/components/ui/cards/StationAlertCard.svelte';
+	import StationAlertCard from '$lib/components/ui/station-board/StationAlertCard.svelte';

 	import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
+	import StaffServicesTable from '$lib/components/ui/station-board/StaffServicesTable.svelte';
 	let { data } = $props();
 	let now = $state(new Date());

@@ -13,7 +14,7 @@
 		}, 1000);

 		return () => clearInterval(interval);
-	})
+	});

 	// Update 'QuickLinks'
 	$effect(() => {
@@ -33,29 +34,31 @@
 	// Load Data Invalidation Handling
 	// Refresh countdown logic
 </script>
-<section class="board-wrapper">
-{#if data.boardData.data.m?.length}

-	<StationAlertCard messages={data.boardData.data.m} />
+<section class="board-wrapper">
 	<div class="time-data">
-		<span class="time-loaded">Fetched: {formatUkDateTime(data.boardData.producedAt, true)}</span>
+		<span class="time-loaded">Updated: {formatUkDateTime(data.boardData.producedAt, true)}</span>
 		<span class="time-now">{formatUkTime(now, true)}</span>
 	</div>
-
+	{#if data.boardData.data.m?.length}
+		<StationAlertCard messages={data.boardData.data.m} />
+	{/if}
+	{#if data.boardData.data.s?.length}
+		<div class="service-list-wrapper">
+			<StaffServicesTable services={data.boardData.data.s} />
+		</div>
 	{/if}
 </section>

-<section class="section-t">Live boards are not yet fully implemented on the server</section>
-
-<pre class="json-dump">{JSON.stringify(data.boardData.data.s, null, 2)}</pre>
-
 <style>
 	.board-wrapper {
 		display: flex;
+		height: calc(100dvh - var(--nav-height) - var(--header-height));
 		flex-direction: column;
 		align-items: center;
 		width: 100%;
 		margin: 0 auto;
+		overflow: hidden;
 		gap: 0;
 	}

@@ -65,11 +68,12 @@
 		align-items: center;
 		width: 90%;
 		max-width: 700px;
-	margin: 0 auto;
+		margin: 10px auto;
 		font-family: 'URW Gothic', sans-serif;
 	}

-.time-loaded, .time-now {
+	.time-loaded,
+	.time-now {
 		font-variant-numeric: tabular-nums;
 	}

@@ -81,22 +85,12 @@
 		font-weight: 600;
 		font-size: 1rem;
 	}
-	.section-t {
-		font-family: 'URW Gothic', sans-serif;
-		text-align: center;
-		font-size: 2rem;
-		width: 90%;
-		margin: auto;
-		padding-top: 25px;
-		max-width: 500px;
-	}

-	.json-dump {
-		background: #222;
-		color: #0f0;
-		padding: 1rem;
-		border-radius: 4px;
-		font-size: 0.9rem;
-		width: 95%;
-		margin: 1rem auto;	}
+	.service-list-wrapper {
+		flex: 1;
+		overflow-y: auto;
+		height: calc(100dvh - 60px);
+		width: 100%;
+		margin-bottom: 5px;
+	}
 </style>
--- a/static/type/inconsolata/latin-wdth-normal.woff2
+++ b/static/type/inconsolata/latin-wdth-normal.woff2
Author	SHA1	Message	Date
Fred Boniface	a2e6f3b99a	Switch departure board to use Inconsolata monospaced font (varying widths, weights, etc.)	2026-05-11 20:28:22 +01:00
Fred Boniface	7edccf294b	Update table display on board page, in preparation for offering different 'table' styles.	2026-05-11 12:04:40 +01:00
Fred Boniface	13d22d7b73	Add initial departure board table 'skeleton', very basic at present	2026-05-10 20:57:50 +01:00
Fred Boniface	59e8a77d3d	Change 'Fetched' to 'Updated' on the Board page fetch time	2026-05-10 00:27:45 +01:00
Fred Boniface	1f1e215c0c	Fix layout shifts with the temporary <pre> element on the board page	2026-05-10 00:26:21 +01:00