CASSETTE FUTURISM

<div>
			for _, group := range colorGroups {
				@swatchGroup(group.Title, group.Cols) {
					for _, s := range group.Swatches {
						@swatch(s.CSSVar, s.Desc)
					}
				}
			}
			<p style="font-size: var(--font-size-caption); color: var(--color-text-muted); margin-top: 0.75rem;">Click any swatch to copy hex value to clipboard.</p>
		</div>

@panel("INTERACTIVE — ARMED / SAFE TOGGLE") {
			<div style="padding: 1rem;">
				<div x-data="{ armed: false }" class="flex items-center gap-4">
					<button
						{ templ.Attributes{"@click": "armed = !armed"}... }
						{ templ.Attributes{":class": "armed ? 'cass-btn cass-btn-danger-filled' : 'cass-btn'"}... }
					>
						<span x-text="armed ? '&#9689; ARMED' : '&#9675; SAFE'">&#9675; SAFE</span>
					</button>
					<span style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="armed ? 'WEAPONS HOT — CONFIRM TARGET BEFORE FIRING' : 'WEAPONS SAFE — CLICK TO ARM'">WEAPONS SAFE — CLICK TO ARM</span>
				</div>
			</div>
		}

<div class="cass-panel" x-data={ systemStatusJSON() }>
				<div class="cass-panel-header">SYSTEM STATUS GRID — CLICK TO CYCLE</div>
				<div style="padding: 0.5rem;">
					<template x-for="(sys, i) in systems" x-key="i">
						<div
							class="flex items-center gap-3 cursor-pointer"
							style="padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--color-surface-2);"
							{ templ.Attributes{"@click": "sys.s = sys.s==='ok'?'warn':sys.s==='warn'?'err':'ok'"}... }
						>
							<span
								{ templ.Attributes{":class": "sys.s==='ok'?'cass-light cass-light-green cass-pulse':sys.s==='warn'?'cass-light cass-light-amber':sys.s==='err'?'cass-light cass-light-red cass-blink':'cass-light cass-light-off'"}... }
							></span>
							<span style="flex: 1; font-size: var(--font-size-caption); font-weight: 700; letter-spacing: 0.04em;" x-text="sys.n"></span>
							<span
								style="font-size: var(--font-size-caption); font-weight: 700;"
								{ templ.Attributes{":style": "sys.s==='ok'?'color:#27ae60':sys.s==='warn'?'color:var(--color-caution)':'color:var(--color-danger)'"}... }
								x-text="sys.s==='ok'?'NOMINAL':sys.s==='warn'?'DEGRADED':'FAULT'"
							></span>
						</div>
					</template>
				</div>
			</div>

@panelBlue("ENVIRONMENTAL INSTRUMENT READOUTS — LIVE") {
			<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0.75rem; gap: 0.5rem;">
				for _, r := range instrumentReadouts {
					@readout(r)
				}
			</div>
		}

<div x-data="{ modal: null, authCode: '', confirmed: false }">
			<!-- Trigger buttons -->
			<div class="flex flex-wrap gap-3 mb-4">
				for _, t := range modalTriggers {
					<button class={ t.BtnClass } { templ.Attributes{"@click": t.ResetExpr}... }>{ t.Label }</button>
				}
			</div>
			<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Click a button above to open the corresponding modal dialog.</p>
			<!-- Overlay -->
			<div class="cass-overlay" x-show="modal !== null" style="display: none;" { templ.Attributes{"@click.self": "modal=null"}... }>
				<!-- Modal 1: Auth -->
				<div class="cass-modal" x-show="modal==='auth'" style="display: none;">
					<div class="cass-modal-header">ACCESS REQUEST — LEVEL 5 CLEARANCE</div>
					<div style="padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem;">
						<div>
							<label class="cass-label" for="modal-personnel">PERSONNEL ID</label>
							<input id="modal-personnel" type="text" class="cass-input" placeholder="e.g. RIPLEY, E. — WO-NOS-002"/>
						</div>
						<div>
							<label class="cass-label" for="modal-code">AUTHORIZATION CODE</label>
							<input id="modal-code" type="password" class="cass-input cass-input-box" placeholder="••••••••"/>
						</div>
						<div>
							<label class="cass-label" for="modal-level">ACCESS LEVEL REQUESTED</label>
							<select id="modal-level" class="cass-input cass-input-box" style="cursor: pointer;">
								<option>L-3</option>
								<option>L-4</option>
								<option>L-5</option>
								<option>UNRESTRICTED</option>
							</select>
						</div>
						<div>
							<label class="cass-label" for="modal-reason">REASON FOR ACCESS</label>
							<textarea id="modal-reason" rows="2" class="cass-input cass-input-box" placeholder="Describe operational need for elevated access clearance..."></textarea>
						</div>
					</div>
					<div class="flex justify-end gap-3" style="padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border);">
						<button class="cass-btn" { templ.Attributes{"@click": "modal=null"}... }>CANCEL</button>
						<button class="cass-btn cass-btn-filled" { templ.Attributes{"@click": "modal=null"}... }>SUBMIT REQUEST</button>
					</div>
				</div>
				<!-- Modal 2: Jettison -->
				<div class="cass-modal" x-show="modal==='jettison'" style="display: none; border-color: var(--color-danger);">
					<div class="cass-modal-header cass-modal-header-danger">CONFIRM JETTISON — IRREVERSIBLE ACTION</div>
					<div style="padding: 1.25rem;">
						<div class="cass-notice cass-notice-warning mb-4">
							<div class="cass-notice-label" style="color: var(--color-danger);">WARNING</div>
							<p>This action is irreversible. Once executed, the following cargo will be permanently jettisoned into open space and cannot be recovered.</p>
						</div>
						<p style="font-size: var(--font-size-caption); font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em;">Cargo to be jettisoned:</p>
						<ul style="font-size: var(--font-size-body); color: var(--color-text-muted); margin-bottom: 1rem; padding-left: 1rem; line-height: 2;">
							for _, item := range jettisonCargo {
								<li>{ item }</li>
							}
						</ul>
						<div>
							<label class="cass-label" for="modal-jettison-confirm">TYPE "CONFIRM" TO PROCEED</label>
							<input
								id="modal-jettison-confirm"
								type="text"
								x-model="authCode"
								class="cass-input cass-input-box"
								placeholder="CONFIRM"
								style="text-transform: uppercase;"
							/>
						</div>
					</div>
					<div class="flex justify-end gap-3" style="padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border);">
						<button class="cass-btn" { templ.Attributes{"@click": "modal=null"}... }>ABORT</button>
						<button
							class="cass-btn cass-btn-danger-filled"
							{ templ.Attributes{":disabled": "authCode !== 'CONFIRM'"}... }
							{ templ.Attributes{"@click": "authCode==='CONFIRM' && (modal=null)"}... }
						>JETTISON</button>
					</div>
				</div>
				<!-- Modal 3: Alert -->
				<div class="cass-modal" x-show="modal==='alert'" style="display: none;">
					<div class="cass-modal-header">SYSTEM NOTIFICATION — PRIORITY MESSAGE</div>
					<div style="padding: 1.25rem;">
						<div class="cass-notice cass-notice-note mb-4">
							<div class="cass-notice-label" style="color: var(--color-primary);">PRIORITY: ROUTINE</div>
							<p>Scheduled maintenance window for atmospheric processing units 3 and 4 will commence at 0200 station time. Estimated duration: 45 minutes. Decks F and G will experience reduced atmospheric circulation during this period.</p>
						</div>
						<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem;">
							for _, c := range alertMetadataCells {
								@docCellView(c.Label, c.Value, c.ValueClass)
							}
						</div>
					</div>
					<div class="flex justify-end" style="padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border);">
						<button class="cass-btn cass-btn-filled" { templ.Attributes{"@click": "modal=null"}... }>ACKNOWLEDGED</button>
					</div>
				</div>
			</div>
		</div>