{#
        stage_box(stage, label, icon, color)
        stage  — Alpine store key, e.g. 'imaging'
        label  — display heading, e.g. 'Imaging'
        icon   — bootstrap-icons name, e.g. 'camera-fill'
        color  — Bootstrap color name for badge/icon, e.g. 'primary'
        col_attrs — extra HTML attrs on the col div, e.g. x-show="..."

        Supports Jinja2 caller(): if invoked via {% call stage_box(...) %},
        the caller block replaces the default success/fail progress bar.
    #}
    {% macro stage_box(stage, label, icon, color, col_attrs='') %}
    <div class="col-md" {{ col_attrs }}>
        <div class="border border-secondary rounded p-3 h-100">
            <div class="d-flex align-items-center gap-2 mb-2">
                <i class="bi bi-{{ icon }} text-{{ color }}"></i>
                <h6 class="mb-0">{{ label }}</h6>
                <span class="badge bg-{{ color }}{% if color == 'warning' %} text-dark{% endif %} ms-auto"
                      x-show="$store.citrasense.status?.tasks_by_stage?.{{ stage }}?.length > 0"
                      x-text="$store.citrasense.status?.tasks_by_stage?.{{ stage }}?.length"></span>
            </div>
            {% if caller is defined %}
            {{ caller() }}
            {% else %}
            <div class="progress mb-2" style="height: 4px; cursor: default;"
                 x-show="$store.citrasense.status?.pipeline_stats?.{{ stage }}?.attempts > 0"
                 x-init="new bootstrap.Tooltip($el, {
                     placement: 'top',
                     trigger: 'hover',
                     title() {
                         const s = $store.citrasense.status?.pipeline_stats?.{{ stage }};
                         if (!s) return '';
                         const retries = s.attempts - s.successes - s.permanent_failures;
                         const retrySuffix = retries > 0 ? ` · ${retries} retr${retries === 1 ? 'y' : 'ies'}` : '';
                         return `${s.successes} ok · ${s.permanent_failures} failed${retrySuffix}`;
                     }
                 })">
                <div class="progress-bar bg-success" role="progressbar"
                     :style="`width: ${(() => { const s = $store.citrasense.status?.pipeline_stats?.{{ stage }}; if (!s) return 0; const r = s.successes + s.permanent_failures; return r > 0 ? (s.successes / r) * 100 : 0; })()}%`"></div>
                <div class="progress-bar bg-danger" role="progressbar"
                     :style="`width: ${(() => { const s = $store.citrasense.status?.pipeline_stats?.{{ stage }}; if (!s) return 0; const r = s.successes + s.permanent_failures; return r > 0 ? (s.permanent_failures / r) * 100 : 0; })()}%`"></div>
            </div>
            {% endif %}
            {{ task_list(stage) }}
        </div>
    </div>
    {% endmacro %}

    <!-- Macro for task list display -->
    {% macro task_list(stage_name) %}
        <template x-if="!$store.citrasense.status?.tasks_by_stage?.{{ stage_name }}?.length">
            <div class="text-muted text-center py-2">
                <small>Idle</small>
            </div>
        </template>
        <template x-if="$store.citrasense.status?.tasks_by_stage?.{{ stage_name }}?.length > 0">
            <div>
                <template x-for="(task, index) in ($store.citrasense.status?.tasks_by_stage?.{{ stage_name }} || [])" :key="task.task_id">
                    <div class="mb-2" :class="index < ($store.citrasense.status?.tasks_by_stage?.{{ stage_name }}?.length || 0) - 1 ? 'pb-2 border-bottom border-secondary' : ''">
                        <div>
                            <span class="fw-semibold" x-text="task.target_name || task.task_id"></span>
                            <span class="text-muted small ms-2" x-text="'(' + Math.floor(task.elapsed) + 's)'"></span>
                        </div>
                        <div class="text-muted small" x-show="task.status_msg">
                            <template x-if="task.retry_scheduled_time">
                                <span x-text="(() => {
                                    const now = Date.now() / 1000;
                                    const remaining = Math.max(0, Math.ceil(task.retry_scheduled_time - now));
                                    const match = task.status_msg.match(/^(.+?)retrying in \d+s\.\.\.$/);
                                    const prefix = match ? match[1] : task.status_msg.replace(/retrying in \d+s\.\.\./, '');
                                    return prefix + 'retrying in ' + remaining + 's...';
                                })()"></span>
                            </template>
                            <template x-if="!task.retry_scheduled_time">
                                <span x-text="task.status_msg"></span>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </template>
    {% endmacro %}

    <div id="monitoringSection" x-show="$store.citrasense.currentSection === 'monitoring'"
        x-effect="$store.citrasense.status && $nextTick(() => { document.querySelectorAll('#monitoringSection [data-bs-toggle=tooltip]').forEach(el => { try { bootstrap.Tooltip.getOrCreateInstance(el); } catch (_) {} }); })">
        <div class="container">

            <!-- Missing Dependencies Alert -->
            <div class="alert alert-warning mb-3" role="alert"
                 x-show="$store.citrasense.status?.missing_dependencies?.length > 0">
                <template x-if="$store.citrasense.status?.missing_dependencies?.length > 0">
                    <div>
                        <strong><i class="bi bi-exclamation-triangle-fill me-2"></i>Missing Dependencies:</strong>
                        <ul class="mb-0 mt-2">
                            <template x-for="dep in $store.citrasense.status.missing_dependencies" :key="dep.device_name">
                                <li>
                                    <strong x-text="dep.device_name"></strong>: Missing <span x-text="dep.missing_packages"></span><br>
                                    <code class="small" x-text="dep.install_cmd"></code>
                                    <button type="button"
                                            class="btn btn-sm btn-outline-secondary py-0 px-1 ms-1 align-baseline"
                                            @click="$store.citrasense.copyPath(dep.install_cmd, $event)"
                                            title="Copy install command"
                                            aria-label="Copy install command">
                                        <i class="bi bi-clipboard" style="font-size: 0.75rem;" aria-hidden="true"></i>
                                    </button>
                                </li>
                            </template>
                        </ul>
                    </div>
                </template>
            </div>

            <!-- ═══════════════ Robotic Session ═══════════════ -->
            <div class="card bg-dark text-light border-secondary mb-3"
                 x-show="$store.citrasense.status?.observing_session_enabled"
                 x-data="{
                     get ss() { return $store.citrasense.status || {}; },
                     get state() { return this.ss.observing_session_state || 'daytime'; },
                     get badgeClass() {
                         const m = { daytime: 'bg-secondary', night_startup: 'bg-info text-dark', observing: 'bg-success', night_shutdown: 'bg-warning text-dark' };
                         return m[this.state] || 'bg-secondary';
                     },
                     get stateLabel() {
                         const m = { daytime: 'Daytime', night_startup: 'Starting Up', observing: 'Observing', night_shutdown: 'Shutting Down' };
                         return m[this.state] || this.state;
                     },
                     get thresholdLabel() {
                         const m = { '-6': 'Civil', '-12': 'Nautical', '-18': 'Astronomical' };
                         const t = this.ss.observing_session_threshold;
                         return t != null ? (m[String(t)] || t + '\u00b0') : '\u2014';
                     },
                     formatDuration(ms) {
                         if (ms <= 0) return '';
                         const h = Math.floor(ms / 3600000);
                         const m = Math.floor((ms % 3600000) / 60000);
                         return h > 0 ? h + 'h ' + m + 'm' : m + 'm';
                     },
                     get darkDuration() {
                         const s = this.ss.dark_window_start, e = this.ss.dark_window_end;
                         if (!s || !e) return null;
                         return this.formatDuration(new Date(e) - new Date(s));
                     },
                     get countdown() {
                         if (this.state === 'daytime' && this.ss.dark_window_start) {
                             const ms = new Date(this.ss.dark_window_start) - Date.now();
                             return ms > 0 ? 'Starts in ' + this.formatDuration(ms) : null;
                         }
                         if (this.state === 'observing' && this.ss.dark_window_end) {
                             const ms = new Date(this.ss.dark_window_end) - Date.now();
                             return ms > 0 ? 'Ends in ' + this.formatDuration(ms) : null;
                         }
                         return null;
                     },
                     formatTime(iso) {
                         return iso ? new Date(iso).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '\u2014';
                     },
                     get nextRequestLabel() {
                         const secs = this.ss.next_request_seconds;
                         if (secs == null) return null;
                         const m = Math.ceil(secs / 60);
                         return m > 0 ? '~' + m + 'm' : 'now';
                     },
                     get targetingLabel() {
                         const cfg = $store.citrasense.config || {};
                         const collType = cfg.self_tasking_collection_type || 'Track';
                         const regimes = cfg.self_tasking_include_orbit_regimes || [];
                         const excluded = cfg.self_tasking_exclude_object_types || [];
                         const allTypes = ['Payload', 'Rocket Body', 'Debris', 'Unknown'];
                         const included = allTypes.filter(t => !excluded.includes(t));
                         const parts = [collType];
                         if (regimes.length) parts.push(regimes.join(', '));
                         else parts.push('All orbits');
                         if (excluded.length && included.length) parts.push(included.join(', '));
                         else if (!excluded.length) parts.push('all object types');
                         return parts.join(' \u00b7 ');
                     }
                 }">
                <div class="card-header d-flex align-items-center gap-2">
                    <i class="bi bi-moon-stars me-1"></i>Robotic Session
                    <span class="badge" :class="badgeClass" x-text="stateLabel"></span>
                    <span class="ms-auto text-muted small" x-show="countdown" x-text="countdown"></span>
                </div>
                <div class="card-body py-2">
                    <div class="row g-3">
                        <!-- Session column -->
                        <div class="col-12 col-md-6">
                            <div class="d-flex gap-4 mb-2">
                                <div>
                                    <small class="text-muted">Sun</small><br>
                                    <span x-text="ss.sun_altitude != null ? ss.sun_altitude.toFixed(1) + '\u00b0' : '\u2014'"></span>
                                </div>
                                <div>
                                    <small class="text-muted">Threshold</small><br>
                                    <span x-text="thresholdLabel"></span>
                                </div>
                                <div x-show="ss.dark_window_start || ss.dark_window_end">
                                    <small class="text-muted">Dark Window</small><br>
                                    <span x-text="formatTime(ss.dark_window_start)"></span>
                                    <template x-if="ss.dark_window_end">
                                        <span> &ndash; <span x-text="formatTime(ss.dark_window_end)"></span></span>
                                    </template>
                                    <template x-if="darkDuration">
                                        <small class="text-muted" x-text="'(' + darkDuration + ')'"></small>
                                    </template>
                                </div>
                            </div>
                            <!-- Activity line (startup / shutdown only) -->
                            <div x-show="ss.session_activity">
                                <small class="text-muted">Activity</small>
                                <span class="ms-1" x-text="ss.session_activity"></span>
                                <span class="spinner-border spinner-border-sm ms-1" role="status"
                                      x-show="state === 'night_startup' || state === 'night_shutdown'"></span>
                            </div>
                        </div>

                        <!-- Divider: vertical on md+, hidden on mobile -->
                        <div class="col-auto d-none d-md-block px-0"
                             x-show="$store.citrasense.status?.self_tasking_enabled">
                            <div class="border-start border-secondary h-100"></div>
                        </div>

                        <!-- Self-tasking column -->
                        <div class="col"
                             x-show="$store.citrasense.status?.self_tasking_enabled">
                            <div class="mb-1">
                                <small class="text-muted">Self-Tasking</small>
                                <template x-if="ss.last_batch_request">
                                    <span class="ms-1">
                                        last request <span x-text="formatTime(new Date(ss.last_batch_request * 1000).toISOString())"></span>
                                        <template x-if="ss.last_batch_created != null">
                                            <small class="text-muted" x-text="'(' + ss.last_batch_created + ' created)'"></small>
                                        </template>
                                    </span>
                                </template>
                                <template x-if="!ss.last_batch_request">
                                    <span class="ms-1 text-muted">no requests yet</span>
                                </template>
                                <template x-if="nextRequestLabel && state === 'observing'">
                                    <span class="ms-2 text-muted small" x-text="'\u00b7 next in ' + nextRequestLabel"></span>
                                </template>
                            </div>
                            <small class="text-muted" x-text="targetingLabel"></small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ═══════════════ Main Cards Row ═══════════════ -->
            <div class="row g-3 mb-3">

                <!-- ── Telescope Card ── -->
                <div class="col-12 col-lg-6">
                    <div class="card bg-dark text-light border-secondary h-100">
                        <div class="card-header"><i class="bi bi-crosshair me-1"></i>Telescope</div>
                        <div class="card-body">

                            <!-- Ground Station -->
                            <div class="row mb-2">
                                <div class="col-6 fw-semibold">Ground Station</div>
                                <div class="col-6">
                                    <template x-if="$store.citrasense.status?.ground_station_name && $store.citrasense.status?.ground_station_url">
                                        <a :href="$store.citrasense.status.ground_station_url" target="_blank" class="ground-station-link" x-text="$store.citrasense.status.ground_station_name + ' \u2197'"></a>
                                    </template>
                                    <template x-if="$store.citrasense.status?.ground_station_name && !$store.citrasense.status?.ground_station_url">
                                        <span x-text="$store.citrasense.status.ground_station_name"></span>
                                    </template>
                                    <template x-if="!$store.citrasense.status?.ground_station_name">
                                        <span>-</span>
                                    </template>
                                </div>
                            </div>

                            <!-- Operating Location — click opens Google Maps in a new tab so
                                 the operator can sanity-check where the scope thinks it is. -->
                            <div class="row mb-2"
                                 x-data="{
                                     get lat() { return $store.citrasense.status?.location_latitude; },
                                     get lon() { return $store.citrasense.status?.location_longitude; }
                                 }">
                                <div class="col-6 fw-semibold">Location</div>
                                <div class="col-6">
                                    <template x-if="lat != null">
                                        <a :href="'https://www.google.com/maps/search/?api=1&query=' + lat + ',' + lon"
                                           target="_blank" rel="noopener noreferrer"
                                           class="font-monospace small text-body text-decoration-none"
                                           style="border-bottom: 1px dashed var(--bs-secondary);"
                                           :title="'Open ' + lat.toFixed(5) + ', ' + lon.toFixed(5) + ' in Google Maps'"
                                           x-text="$store.citrasense.formatCompactLocation($store.citrasense.status)"></a>
                                    </template>
                                    <template x-if="lat == null">
                                        <span>-</span>
                                    </template>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-6 fw-semibold">Adapter</div>
                                <div class="col-6" x-text="$store.citrasense.status?.hardware_adapter || '-'"></div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 fw-semibold">RA / Dec</div>
                                <div class="col-6"
                                     x-data="{
                                         get ra() { return $store.citrasense.status?.telescope_ra; },
                                         get dec() { return $store.citrasense.status?.telescope_dec; }
                                     }"
                                     x-text="(ra != null && dec != null) ? (ra.toFixed(3) + '\u00b0 / ' + dec.toFixed(3) + '\u00b0') : '-'">
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-6 fw-semibold">Alt / Az</div>
                                <div class="col-6 d-flex align-items-center gap-2"
                                     x-data="{
                                         get alt() { return $store.citrasense.status?.telescope_alt; },
                                         get az() { return $store.citrasense.status?.telescope_az; },
                                         get dotX() {
                                             if (this.alt == null || this.az == null) return 14;
                                             const a = (this.az / 360) * 2 * Math.PI;
                                             const r = 13 * Math.max(0, 1 - this.alt / 90);
                                             return 14 + r * Math.sin(a);
                                         },
                                         get dotY() {
                                             if (this.alt == null || this.az == null) return 14;
                                             const a = (this.az / 360) * 2 * Math.PI;
                                             const r = 13 * Math.max(0, 1 - this.alt / 90);
                                             return 14 - r * Math.cos(a);
                                         }
                                     }">
                                    <svg width="28" height="28" viewBox="0 0 28 28"
                                         x-show="alt != null && az != null"
                                         style="flex-shrink: 0;"
                                         data-bs-toggle="tooltip" data-bs-theme="dark" data-bs-placement="top"
                                         title="Alt/Az polar — center is zenith, edge is horizon, N at top">
                                        <circle cx="14" cy="14" r="13" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
                                        <circle cx="14" cy="14" r="8.67" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5"/>
                                        <circle cx="14" cy="14" r="4.33" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="0.5"/>
                                        <line x1="14" y1="1" x2="14" y2="27" stroke="rgba(255,255,255,0.08)" stroke-width="0.5"/>
                                        <line x1="1" y1="14" x2="27" y2="14" stroke="rgba(255,255,255,0.08)" stroke-width="0.5"/>
                                        <text x="14" y="4" text-anchor="middle" fill="rgba(255,255,255,0.3)" font-size="3.5">N</text>
                                        <text x="14" y="27" text-anchor="middle" fill="rgba(255,255,255,0.3)" font-size="3.5">S</text>
                                        <text x="26" y="15.5" text-anchor="end" fill="rgba(255,255,255,0.3)" font-size="3.5">E</text>
                                        <text x="2" y="15.5" text-anchor="start" fill="rgba(255,255,255,0.3)" font-size="3.5">W</text>
                                        <circle r="2.5" fill="#22c55e" opacity="0.9"
                                                :cx="dotX" :cy="dotY"/>
                                    </svg>
                                    <span x-text="(alt != null && az != null) ? (alt.toFixed(1) + '\u00b0 / ' + az.toFixed(1) + '\u00b0') : '-'"></span>
                                    <span class="badge rounded-pill bg-warning text-dark ms-auto"
                                          x-show="$store.citrasense.status?.telescope_connected && $store.citrasense.status?.mount_homing">
                                        <span class="spinner-border spinner-border-sm me-1" style="width: .6rem; height: .6rem;"></span>
                                        Homing...
                                    </span>
                                    <button class="btn btn-sm btn-outline-light ms-auto"
                                            x-show="$store.citrasense.status?.telescope_connected && !$store.citrasense.status?.mount_homing"
                                            @click="homeMount()"
                                            data-bs-toggle="tooltip" data-bs-theme="dark" data-bs-placement="top"
                                            title="Send mount to home position">
                                        <i class="bi bi-house-door"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Cable Wrap -->
                            <div class="row mb-2"
                                 x-data="{ get cw() { return ($store.citrasense.status?.safety_status?.checks || []).find(c => c.name === 'cable_wrap'); } }"
                                 x-show="cw">
                                <div class="col-6 fw-semibold">
                                    <span data-bs-toggle="tooltip" data-bs-theme="dark" data-bs-placement="top"
                                          title="Cumulative cable rotation since last unwind. Soft limit pauses new tasks; hard limit aborts motion.">
                                        Cable Wrap
                                    </span>
                                </div>
                                <div class="col-6 d-flex align-items-center gap-2 flex-wrap">
                                    <div class="progress position-relative" style="height: 1.3rem; min-width: 80px; max-width: 120px;"
                                         data-bs-toggle="tooltip" data-bs-theme="dark" data-bs-placement="top"
                                         :title="'Soft ' + (cw?.soft_limit ?? 180) + '\u00b0 / Hard ' + (cw?.hard_limit ?? 270) + '\u00b0'">
                                        <div class="progress-bar"
                                             :class="cw?.unwinding ? 'bg-info progress-bar-striped progress-bar-animated' : cw?.action === 'emergency' ? 'bg-danger' : cw?.action === 'stop' ? 'bg-warning' : 'bg-success'"
                                             :style="'width:' + Math.min(100, (Math.abs(cw?.cumulative_deg ?? 0) / (cw?.hard_limit ?? 270)) * 100) + '%'">
                                        </div>
                                        <span class="position-absolute top-50 start-50 translate-middle small fw-semibold"
                                              :class="(cw?.action === 'stop' && !cw?.unwinding) ? 'text-dark' : 'text-white'"
                                              x-text="(cw?.cumulative_deg >= 0 ? '+' : '') + (cw?.cumulative_deg ?? 0) + '\u00b0'"></span>
                                    </div>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-sm btn-outline-warning text-nowrap"
                                                x-show="cw && !cw.unwinding && Math.abs(cw.cumulative_deg) > 5"
                                                @click="triggerCableUnwind()"
                                                data-bs-toggle="tooltip" data-bs-theme="dark" data-bs-placement="top"
                                                title="Unwind cable by reversing mount rotation">
                                            <i class="bi bi-arrow-counterclockwise"></i> Unwind
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary text-nowrap"
                                                x-show="cw && !cw.unwinding && Math.abs(cw.cumulative_deg) > 0"
                                                @click="resetCableWrap()"
                                                data-bs-toggle="tooltip" data-bs-theme="dark" data-bs-placement="top"
                                                title="Reset counter to 0° — use after manually straightening cables">
                                            <i class="bi bi-0-circle"></i> Reset
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Alt Limits -->
                            <div class="row mb-2" x-show="$store.citrasense.status?.telescope_connected && ($store.citrasense.status?.mount_horizon_limit != null || $store.citrasense.status?.mount_overhead_limit != null)">
                                <div class="col-6 fw-semibold">Alt Limits</div>
                                <div class="col-6">
                                    <span x-text="($store.citrasense.status?.mount_horizon_limit ?? '?') + '\u00b0 min'"></span>
                                    /
                                    <span x-text="($store.citrasense.status?.mount_overhead_limit ?? '?') + '\u00b0 max'"></span>
                                </div>
                            </div>

                            <!-- Telescope-group config checks (slew rate, etc.) -->
                            <!-- Uses the same _config_health_item.html partial as the Optics
                                 strip so a matching slew rate renders as a single value, a
                                 warning renders "cfg → obs (+pct%)", and the rolling-mean
                                 sample count shows up as "(n=N)" — consistent with Optics. -->
                            <template x-for="chk in ($store.citrasense.status?.config_health?.checks || []).filter(c => c.group === 'telescope')" :key="chk.name">
                                <div class="row mb-2">
                                    <div class="col-6 fw-semibold" x-text="chk.label"></div>
                                    <div class="col-6 font-monospace small">
                                        {% include '_config_health_item.html' %}
                                    </div>
                                </div>
                            </template>

                            <!-- Pointing Model -->
                            <div x-show="$store.citrasense.status?.supports_direct_mount_control && $store.citrasense.status?.pointing_model"
                                 class="mt-3 pt-3 border-top border-secondary"
                                 x-data="{
                                     get pm() { return $store.citrasense.status?.pointing_model || {}; },
                                     accColor(deg) {
                                         return $store.citrasense.pointingAccuracyClass(deg, $store.citrasense.status?.fov_short_deg);
                                     }
                                 }">

                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="fw-semibold small">Pointing Model</span>
                                    <span class="badge rounded-pill"
                                          :class="{
                                              'bg-secondary': pm.state === 'untrained',
                                              'bg-success': pm.state !== 'untrained' && pm.health !== 'degraded',
                                              'bg-warning text-dark': pm.health === 'degraded'
                                          }"
                                          x-text="pm.state === 'untrained' ? 'Untrained' : (pm.health === 'degraded' ? 'Degraded' : (pm.state === 'partial' ? 'Partial' : 'Trained'))"></span>
                                </div>

                                <template x-if="pm.state !== 'untrained'">
                                    <div class="small">
                                        <div class="row mb-1">
                                            <div class="col-6 text-muted">
                                                <span data-bs-toggle="tooltip" data-bs-placement="top"
                                                      title="Average error left over after the model corrects for leveling and alignment. This is the best accuracy the model can achieve."
                                                      style="border-bottom: 1px dotted; cursor: help;"
                                                      x-init="new bootstrap.Tooltip($el)">Model Fit RMS</span>
                                            </div>
                                            <div class="col-6" :class="accColor(pm.pointing_accuracy_deg)" x-text="'~' + pm.pointing_accuracy_deg?.toFixed(4) + '°'"></div>
                                        </div>
                                        <template x-if="pm.live_accuracy?.count > 0">
                                            <div class="row mb-1">
                                                <div class="col-6 text-muted">
                                                    <span data-bs-toggle="tooltip" data-bs-placement="top"
                                                          title="Median pointing error measured from recent plate solves. Shows how accurately the telescope is hitting targets right now."
                                                          style="border-bottom: 1px dotted; cursor: help;"
                                                          x-init="new bootstrap.Tooltip($el)">Live Accuracy</span>
                                                </div>
                                                <div class="col-6 d-flex align-items-center gap-2">
                                                    <span>
                                                        <span :class="accColor(pm.live_accuracy.median_deg)" x-text="pm.live_accuracy.median_deg?.toFixed(4) + '°'"></span>
                                                        <span class="text-muted" x-text="'median (' + pm.live_accuracy.count + ' solves)'"></span>
                                                    </span>
                                                    <template x-if="pm.live_accuracy?.history?.length >= 2">
                                                        <svg width="120" height="24" x-data="{
                                                            get vals() {
                                                                const h = pm.live_accuracy.history;
                                                                return (h && h.length >= 2) ? h.map(e => e.v) : [];
                                                            },
                                                            get mx() { return Math.max(...this.vals) || 1; },
                                                            get pts() {
                                                                return this.vals.map((v, i) =>
                                                                    (i * 120 / (this.vals.length - 1)).toFixed(1) + ',' +
                                                                    (22 - v / this.mx * 20).toFixed(1)
                                                                ).join(' ');
                                                            },
                                                            bandY(deg) { return Math.max(2, 22 - deg / this.mx * 20); },
                                                            get greenLim() {
                                                                const fov = $store.citrasense.status?.fov_short_deg;
                                                                return fov ? fov * 0.10 : 0.05;
                                                            },
                                                            get yellowLim() {
                                                                const fov = $store.citrasense.status?.fov_short_deg;
                                                                return fov ? fov * 0.33 : 0.15;
                                                            }
                                                        }">
                                                            <rect x="0" :y="bandY(greenLim)" width="120" :height="22 - bandY(greenLim)" fill="#198754" opacity="0.15"/>
                                                            <rect x="0" :y="bandY(yellowLim)" width="120" :height="bandY(greenLim) - bandY(yellowLim)" fill="#ffc107" opacity="0.15"/>
                                                            <rect x="0" y="2" width="120" :height="bandY(yellowLim) - 2" fill="#dc3545" opacity="0.15"/>
                                                            <polyline :points="pts" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                                                        </svg>
                                                    </template>
                                                </div>
                                            </div>
                                        </template>
                                        <template x-if="!pm.live_accuracy?.count">
                                            <div class="row mb-1">
                                                <div class="col-6 text-muted">
                                                    <span data-bs-toggle="tooltip" data-bs-placement="top"
                                                          title="Median pointing error measured from recent plate solves. Shows how accurately the telescope is hitting targets right now."
                                                          style="border-bottom: 1px dotted; cursor: help;"
                                                          x-init="new bootstrap.Tooltip($el)">Live Accuracy</span>
                                                </div>
                                                <div class="col-6 text-muted fst-italic">waiting for observations...</div>
                                            </div>
                                        </template>

                                        <details class="mt-2" x-data="{ open: false }" :open="open" @toggle="open = $el.open">
                                            <summary class="text-muted" style="cursor: pointer; list-style: none; font-size: .8rem;">
                                                <i class="bi" :class="open ? 'bi-chevron-down' : 'bi-chevron-right'" style="font-size: .65rem;"></i>
                                                Model details
                                            </summary>
                                            <div class="mt-1">
                                                <div class="row mb-1">
                                                    <div class="col-6 text-muted">Leveling Error N-S</div>
                                                    <div class="col-6" x-text="(pm.terms?.AN >= 0 ? '+' : '') + pm.terms?.AN?.toFixed(4) + '°'"></div>
                                                </div>
                                                <div class="row mb-1">
                                                    <div class="col-6 text-muted">Leveling Error E-W</div>
                                                    <div class="col-6" x-text="(pm.terms?.AW >= 0 ? '+' : '') + pm.terms?.AW?.toFixed(4) + '°'"></div>
                                                </div>
                                                <div class="row mb-1">
                                                    <div class="col-6 text-muted">Model Terms</div>
                                                    <div class="col-6 font-monospace" style="font-size:.75rem;">
                                                        <span x-text="'IE ' + pm.terms?.IE?.toFixed(4) + '°'"></span>
                                                        <template x-if="pm.n_terms >= 5">
                                                            <span>
                                                                <span class="text-muted mx-1">|</span>
                                                                <span x-text="'CA ' + pm.terms?.CA?.toFixed(4) + '°'"></span>
                                                                <span class="text-muted mx-1">|</span>
                                                                <span x-text="'NPAE ' + pm.terms?.NPAE?.toFixed(4) + '°'"></span>
                                                            </span>
                                                        </template>
                                                    </div>
                                                </div>
                                                <div class="row mb-1">
                                                    <div class="col-6 text-muted">Calibration Points</div>
                                                    <div class="col-6" x-text="pm.point_count + ' points (' + pm.n_terms + '-term fit)'"></div>
                                                </div>
                                            </div>
                                        </details>
                                    </div>
                                </template>

                                <template x-if="pm.health === 'degraded'">
                                    <div class="alert alert-warning py-1 px-2 mt-2 mb-0 small">
                                        <i class="bi bi-exclamation-triangle-fill me-1"></i>Recalibration recommended
                                    </div>
                                </template>

                                <template x-if="!$store.citrasense.status?.pointing_calibration_running">
                                    <div class="d-flex gap-2 mt-2">
                                        <button class="btn btn-sm btn-outline-light"
                                                @click="calibratePointingModel()">
                                            Calibrate
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"
                                                x-show="pm.state !== 'untrained'"
                                                :disabled="$store.citrasense.isSystemBusy"
                                                @click="if (confirm('Reset the pointing model? This clears all calibration data.')) resetPointingModel()">
                                            Reset
                                        </button>
                                    </div>
                                </template>
                                <template x-if="$store.citrasense.status?.pointing_calibration_running">
                                    <div class="d-flex align-items-center gap-2 mt-2"
                                         x-data="{ get prog() { return $store.citrasense.status?.pointing_calibration_progress } }">
                                        <div class="progress flex-grow-1" style="height: 18px;">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                 role="progressbar"
                                                 :style="'width:' + (prog?.total > 0 ? Math.round((prog.step / prog.total) * 100) : 100) + '%'"
                                                 :aria-valuenow="prog?.step || 0"
                                                 :aria-valuemax="prog?.total || 1"
                                                 x-text="prog?.total > 0 ? (prog.step + ' / ' + prog.total) : ($store.citrasense.status?.alignment_progress || 'Working...')">
                                            </div>
                                        </div>
                                        <button class="btn btn-sm btn-outline-warning flex-shrink-0"
                                                @click="cancelPointingCalibration()">
                                            Cancel
                                        </button>
                                    </div>
                                </template>
                            </div>

                            <!-- Mount Controls (direct hardware adapters only) -->
                            <div x-show="$store.citrasense.status?.supports_direct_mount_control"
                                 x-data="{ gotoRa: '', gotoDec: '', jogActive: null,
                                            jogStart(dir) { if ($store.citrasense.isSystemBusy) return; this.jogActive = dir; mountMove('start', dir); },
                                            jogStop(dir)  { if (this.jogActive === dir) { this.jogActive = null; mountMove('stop', dir); } } }"
                                 class="mt-3 pt-3 border-top border-secondary">

                                <div x-show="$store.citrasense.isSystemBusy"
                                     class="alert alert-info py-1 px-2 mb-2 small">
                                    <i class="bi bi-lock-fill me-1"></i>
                                    Controls locked — <span x-text="$store.citrasense.systemBusyReason"></span> in progress
                                </div>

                                <div class="d-flex align-items-start gap-4">
                                    <!-- Left: Jog pad + speed -->
                                    <div class="flex-shrink-0">
                                        <div style="display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); gap: 2px;">
                                            <div></div>
                                            <button class="btn btn-sm btn-outline-light d-flex align-items-center justify-content-center p-0"
                                                    style="width:36px;height:36px;"
                                                    :disabled="$store.citrasense.isSystemBusy"
                                                    @mousedown="jogStart('north')"
                                                    @mouseup="jogStop('north')"
                                                    @mouseleave="jogStop('north')"
                                                    @touchstart.prevent="jogStart('north')"
                                                    @touchend.prevent="jogStop('north')"
                                                    @touchcancel.prevent="jogStop('north')"
                                                    title="Up (Alt+)">
                                                <i class="bi bi-chevron-up"></i>
                                            </button>
                                            <div></div>
                                            <button class="btn btn-sm btn-outline-light d-flex align-items-center justify-content-center p-0"
                                                    style="width:36px;height:36px;"
                                                    :disabled="$store.citrasense.isSystemBusy"
                                                    @mousedown="jogStart('west')"
                                                    @mouseup="jogStop('west')"
                                                    @mouseleave="jogStop('west')"
                                                    @touchstart.prevent="jogStart('west')"
                                                    @touchend.prevent="jogStop('west')"
                                                    @touchcancel.prevent="jogStop('west')"
                                                    title="Left (Az-)">
                                                <i class="bi bi-chevron-left"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger d-flex align-items-center justify-content-center p-0"
                                                    style="width:36px;height:36px;"
                                                    :disabled="$store.citrasense.isSystemBusy"
                                                    @click="jogActive = null; mountMove('stop','north'); mountMove('stop','south'); mountMove('stop','east'); mountMove('stop','west')"
                                                    title="Stop all motion">
                                                <i class="bi bi-stop-fill"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-light d-flex align-items-center justify-content-center p-0"
                                                    style="width:36px;height:36px;"
                                                    :disabled="$store.citrasense.isSystemBusy"
                                                    @mousedown="jogStart('east')"
                                                    @mouseup="jogStop('east')"
                                                    @mouseleave="jogStop('east')"
                                                    @touchstart.prevent="jogStart('east')"
                                                    @touchend.prevent="jogStop('east')"
                                                    @touchcancel.prevent="jogStop('east')"
                                                    title="Right (Az+)">
                                                <i class="bi bi-chevron-right"></i>
                                            </button>
                                            <div></div>
                                            <button class="btn btn-sm btn-outline-light d-flex align-items-center justify-content-center p-0"
                                                    style="width:36px;height:36px;"
                                                    :disabled="$store.citrasense.isSystemBusy"
                                                    @mousedown="jogStart('south')"
                                                    @mouseup="jogStop('south')"
                                                    @mouseleave="jogStop('south')"
                                                    @touchstart.prevent="jogStart('south')"
                                                    @touchend.prevent="jogStop('south')"
                                                    @touchcancel.prevent="jogStop('south')"
                                                    title="Down (Alt-)">
                                                <i class="bi bi-chevron-down"></i>
                                            </button>
                                            <div></div>
                                        </div>
                                    </div>

                                    <!-- Right: Goto, Alignment -->
                                    <div class="flex-grow-1 d-flex flex-column gap-3">
                                        <div>
                                            <div class="d-flex align-items-end gap-2">
                                                <div style="flex: 1;">
                                                    <label class="form-label small text-muted mb-1">RA (°)</label>
                                                    <input type="number" class="form-control form-control-sm"
                                                           x-model.lazy="gotoRa" step="any" min="0" max="360" placeholder="0–360">
                                                </div>
                                                <div style="flex: 1;">
                                                    <label class="form-label small text-muted mb-1">Dec (°)</label>
                                                    <input type="number" class="form-control form-control-sm"
                                                           x-model.lazy="gotoDec" step="any" min="-90" max="90" placeholder="-90–90">
                                                </div>
                                                <button class="btn btn-sm btn-outline-primary text-nowrap"
                                                        :disabled="gotoRa === '' || gotoDec === '' || $store.citrasense.status?.mount_slewing || $store.citrasense.isSystemBusy"
                                                        @click="mountGoto(gotoRa, gotoDec)">
                                                    <i class="bi bi-cursor"></i> Go
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Alignment, Tracking, Slewing -->
                                        <div class="d-flex align-items-center flex-wrap gap-2">
                                            <button type="button" class="btn btn-sm"
                                                    x-show="$store.citrasense.status?.supports_alignment"
                                                    :class="$store.citrasense.status?.alignment_running ? 'btn-outline-info' : ($store.citrasense.status?.alignment_requested ? 'btn-outline-warning' : 'btn-outline-primary')"
                                                    :disabled="$store.citrasense.status?.alignment_running"
                                                    @click="window.triggerAlignment()">
                                                <template x-if="$store.citrasense.status?.alignment_running">
                                                    <span>
                                                        <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                                        Aligning...
                                                    </span>
                                                </template>
                                                <template x-if="!$store.citrasense.status?.alignment_running">
                                                    <span x-text="$store.citrasense.status?.alignment_requested ? 'Cancel Alignment' : 'Align Now'">Align Now</span>
                                                </template>
                                            </button>
                                            <button class="btn btn-sm"
                                                    :class="$store.citrasense.status?.mount_tracking ? 'btn-success' : 'btn-outline-secondary'"
                                                    :disabled="$store.citrasense.isSystemBusy"
                                                    @click="mountSetTracking(!$store.citrasense.status?.mount_tracking)">
                                                <i class="bi bi-broadcast me-1"></i>Sidereal Tracking
                                            </button>
                                            <span class="badge rounded-pill bg-info"
                                                  x-show="$store.citrasense.status?.mount_slewing">
                                                <span class="spinner-border spinner-border-sm me-1" style="width: .6rem; height: .6rem;"></span>
                                                Slewing
                                            </span>
                                        </div>
                                        <div x-show="$store.citrasense.status?.supports_alignment">
                                            <div class="small mt-1" x-show="$store.citrasense.status?.alignment_running"
                                                 x-text="$store.citrasense.status?.alignment_progress || 'In progress...'"></div>
                                            <small class="text-muted" x-show="!$store.citrasense.status?.alignment_running"
                                                   x-text="'Last: ' + $store.citrasense.formatTimestamp($store.citrasense.status?.last_alignment_timestamp)"></small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- ── Optics Card ── -->
                <div class="col-12 col-lg-6">
                    <div class="card bg-dark text-light border-secondary h-100">
                        <!--
                            Header holds the minimal, at-a-glance optics readouts.
                              FL  — always visible (muted): contextual, doesn't drift.
                              FOV — always visible: colored green/yellow/muted by status.
                              SCALE — surfaces only on `warning`; FOV covers the happy path
                                      since FOV = scale × resolution. Binning suffix rides
                                      along on SCALE's configured_fmt when it shows up.
                            PX and SENSOR stay as silent checks — the body banner still
                            enumerates them if they disagree with hardware.  Camera temp
                            lives in the top status bar (_status_bar.html), not here.
                        -->
                        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                            <span><i class="bi bi-eyeglasses me-1"></i>Optics</span>
                            <span class="small font-monospace d-flex flex-wrap align-items-baseline justify-content-end gap-2 ms-auto"
                                  x-data="{
                                      get headerChecks() {
                                          const byName = Object.fromEntries(
                                              ($store.citrasense.status?.config_health?.checks || [])
                                                  .map(c => [c.name, c])
                                          );
                                          const out = [];
                                          if (byName.focal_length) out.push(byName.focal_length);
                                          if (byName.pixel_scale && byName.pixel_scale.status === 'warning') {
                                              out.push(byName.pixel_scale);
                                          }
                                          if (byName.sensor_resolution) out.push(byName.sensor_resolution);
                                          if (byName.fov) out.push(byName.fov);
                                          return out;
                                      }
                                  }">
                                <template x-for="(chk, idx) in headerChecks" :key="chk.name">
                                    <span class="d-inline-flex align-items-baseline gap-2">
                                        <span x-show="idx > 0" class="text-secondary" aria-hidden="true">|</span>
                                        <span :class="{
                                                'text-success': chk.status === 'ok',
                                                'text-warning': chk.status === 'warning',
                                                'text-muted':   chk.status === 'pending'
                                              }"
                                              :title="
                                                  chk.status === 'warning'
                                                      ? chk.label + ': ' + chk.configured_fmt + ' \u2192 ' + chk.observed_fmt +
                                                        (chk.pct_diff != null ? ' (' + chk.pct_diff + '% off' : '') +
                                                        (chk.source ? (chk.pct_diff != null ? ', from ' : ' (from ') + chk.source + ')' : (chk.pct_diff != null ? ')' : ''))
                                                  : chk.status === 'ok'
                                                      ? chk.label + ': ' + chk.configured_fmt + (chk.source ? ' (matches ' + chk.source + ')' : ' (matches hardware)')
                                                      : chk.label + ': ' + chk.configured_fmt + ' (awaiting observation)'
                                              ">
                                            <span x-text="chk.configured_fmt"></span>
                                            <template x-if="chk.status === 'warning' && chk.observed_fmt">
                                                <span x-text="' \u2192 ' + chk.observed_fmt"></span>
                                            </template>
                                        </span>
                                    </span>
                                </template>
                            </span>
                        </div>
                        <div class="card-body">

                            <!-- ─── Config Health warning banner (body) ───
                                 Enumerates every failing check, including the PX/SENSOR ones
                                 that aren't shown in the header.  Nothing renders here when
                                 there are no warnings. -->
                            <template x-if="$store.citrasense.status?.config_health?.has_warnings">
                                <div class="alert alert-warning py-1 px-2 mb-2 small d-flex align-items-center">
                                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                                    <span>Hardware differs from server config &mdash; check telescope settings in Citra.
                                        <template x-for="w in ($store.citrasense.status?.config_health?.checks || []).filter(c => c.status === 'warning')" :key="w.name">
                                            <span class="d-block" x-text="w.label + ': ' + w.configured_fmt + ' \u2192 ' + w.observed_fmt + ' (' + w.pct_diff + '% off, from ' + w.source + ')'"></span>
                                        </template>
                                    </span>
                                </div>
                            </template>

                            <!-- ─── Preview Image (visible for all adapters when an image is available) ─── -->
                            <div x-show="$store.citrasense.previewDataUrl || ($store.citrasense.status?.camera_connected && $store.citrasense.status?.supports_direct_camera_control)">
                                <div class="text-center mb-2 position-relative"
                                     style="min-height: 80px; background: #111; border-radius: .375rem; overflow: hidden;">
                                    <template x-if="!$store.citrasense.previewDataUrl">
                                        <div class="d-flex align-items-center justify-content-center text-muted"
                                             style="min-height: 80px;">
                                            <span>No preview yet</span>
                                        </div>
                                    </template>
                                    <template x-if="$store.citrasense.previewDataUrl">
                                        <img :src="$store.citrasense.previewDataUrl"
                                             alt="Preview image"
                                             class="img-fluid"
                                             style="max-height: 360px; width: auto; cursor: pointer;"
                                             @click="$dispatch('open-preview-modal')"
                                             title="Click to enlarge">
                                    </template>
                                </div>
                            </div>

                            <!-- ─── Camera Controls (only for direct camera adapters) ─── -->
                            <div x-show="$store.citrasense.status?.camera_connected && $store.citrasense.status?.supports_direct_camera_control">
                                <div class="d-flex align-items-end gap-2 flex-wrap mb-2">
                                    <div>
                                        <label class="form-label small mb-0">Exp (s)</label>
                                        <input type="number" class="form-control form-control-sm" style="width: 80px;"
                                               x-model.number="$store.citrasense.previewExposure"
                                               min="0.01" max="30" step="0.1"
                                               :disabled="$store.citrasense.isLooping">
                                    </div>
                                    <button class="btn btn-sm btn-outline-light"
                                            :disabled="$store.citrasense.isCapturing || $store.citrasense.isLooping || $store.citrasense.isSystemBusy"
                                            @click="$store.citrasense.singlePreview()">
                                        <i class="bi bi-camera"></i> Snap
                                    </button>
                                    <button class="btn btn-sm"
                                            :class="$store.citrasense.isLooping ? 'btn-danger' : 'btn-success'"
                                            :disabled="!$store.citrasense.isLooping && $store.citrasense.isSystemBusy"
                                            @click="$store.citrasense.isLooping ? $store.citrasense.stopFocusLoop() : $store.citrasense.startFocusLoop()">
                                        <i class="bi" :class="$store.citrasense.isLooping ? 'bi-stop-fill' : 'bi-play-fill'"></i>
                                        <span x-text="$store.citrasense.isLooping ? 'Stop' : 'Loop'"></span>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary"
                                            :disabled="$store.citrasense.isSaving || $store.citrasense.isLooping || $store.citrasense.isSystemBusy"
                                            @click="$store.citrasense.captureImage()"
                                            data-bs-toggle="tooltip" data-bs-theme="dark" title="Capture to FITS using current exposure">
                                        <i class="bi bi-save"></i>
                                        <span x-text="$store.citrasense.isSaving ? 'Saving...' : 'Save'"></span>
                                    </button>
                                    <button class="btn btn-sm"
                                            :class="$store.citrasense.previewFlipH ? 'btn-info' : 'btn-outline-secondary'"
                                            @click="$store.citrasense.previewFlipH = !$store.citrasense.previewFlipH"
                                            data-bs-toggle="tooltip" data-bs-theme="dark" title="Flip preview horizontally (corrects diagonal mirror)">
                                        <i class="bi bi-symmetry-vertical"></i>
                                    </button>
                                    <span class="text-warning small" x-show="$store.citrasense.isSystemBusy" x-cloak>
                                        <i class="bi bi-lock-fill"></i> System busy
                                    </span>
                                </div>
                            </div>

                            <!-- ─── Filters ─── -->
                            <div class="pt-2 mt-2 border-top border-secondary"
                                 x-show="$store.citrasense.enabledFilters.length > 0 || $store.citrasense.status?.current_filter_position != null">
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <template x-for="f in $store.citrasense.enabledFilters" :key="f.name">
                                        <span class="badge"
                                              :style="'background-color: ' + f.color + '; color: white;'
                                                  + (f.name === $store.citrasense.status?.current_filter_name ? ' outline: 2px solid white; outline-offset: 1px;' : '')"
                                              x-text="f.name"></span>
                                    </template>
                                    <template x-if="$store.citrasense.status?.supports_direct_camera_control && $store.citrasense.status?.current_filter_position != null">
                                        <div class="d-flex align-items-center gap-2 ms-auto" style="max-width: 200px;">
                                            <span class="rounded-circle d-inline-block flex-shrink-0"
                                                  :style="{ width: '10px', height: '10px', minWidth: '10px', backgroundColor: $store.citrasense.filterColors[$store.citrasense.status?.current_filter_name] || '#777' }"></span>
                                            <select class="form-select form-select-sm"
                                                    :disabled="$store.citrasense.isSystemBusy"
                                                    :value="String($store.citrasense.status?.current_filter_position ?? '')"
                                                    @change="window.changeFilterPosition($event.target.value)">
                                                <template x-for="[fid, fdata] in Object.entries($store.citrasense.filters || {}).filter(([_, f]) => f.enabled !== false)" :key="fid">
                                                    <option :value="fid" x-text="fdata.name"></option>
                                                </template>
                                            </select>
                                        </div>
                                    </template>
                                </div>
                            </div>

                            <!-- ─── Focus ─── -->
                            <div class="pt-2 mt-2 border-top border-secondary"
                                 x-show="$store.citrasense.status?.focuser_connected"
                                 x-data="{ stepSize: 100, targetPos: $store.citrasense.status?.focuser_position ?? 0 }">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <h6 class="mb-0 small fw-semibold"><i class="bi bi-arrows-expand me-1"></i>Focus</h6>
                                    <div class="d-flex align-items-center gap-2">
                                        <small class="text-muted font-monospace"
                                               x-show="$store.citrasense.status?.focuser_temperature != null"
                                               x-text="$store.citrasense.status?.focuser_temperature?.toFixed(1) + ' \u00b0C'"></small>
                                        <small class="text-muted font-monospace"
                                               x-show="$store.citrasense.status?.focuser_position != null"
                                               x-text="'Pos: ' + $store.citrasense.status?.focuser_position"></small>
                                    </div>
                                </div>

                                <div class="row g-2">
                                    <!-- Relative stepping -->
                                    <div class="col-12 col-md">
                                        <div class="d-flex align-items-center gap-1">
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    :disabled="$store.citrasense.status?.focuser_moving || $store.citrasense.isSystemBusy"
                                                    @click="window.moveFocuserRelative(-stepSize * 10)" title="In (coarse)">
                                                <i class="bi bi-chevron-double-left"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    :disabled="$store.citrasense.status?.focuser_moving || $store.citrasense.isSystemBusy"
                                                    @click="window.moveFocuserRelative(-stepSize)" title="In (fine)">
                                                <i class="bi bi-chevron-left"></i>
                                            </button>
                                            <div class="input-group input-group-sm" style="width: 120px;">
                                                <input type="number" class="form-control text-center"
                                                       x-model.number="stepSize" min="1" step="1">
                                                <span class="input-group-text">steps</span>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    :disabled="$store.citrasense.status?.focuser_moving || $store.citrasense.isSystemBusy"
                                                    @click="window.moveFocuserRelative(stepSize)" title="Out (fine)">
                                                <i class="bi bi-chevron-right"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    :disabled="$store.citrasense.status?.focuser_moving || $store.citrasense.isSystemBusy"
                                                    @click="window.moveFocuserRelative(stepSize * 10)" title="Out (coarse)">
                                                <i class="bi bi-chevron-double-right"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                    x-show="$store.citrasense.status?.focuser_moving"
                                                    @click="window.abortFocuser()" title="Stop">
                                                <i class="bi bi-stop-fill"></i>
                                            </button>
                                        </div>
                                        <div class="d-flex gap-1 mt-1">
                                            <button class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size: 0.7rem;" @click="stepSize = 10">10</button>
                                            <button class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size: 0.7rem;" @click="stepSize = 50">50</button>
                                            <button class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size: 0.7rem;" @click="stepSize = 100">100</button>
                                            <button class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size: 0.7rem;" @click="stepSize = 500">500</button>
                                            <button class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size: 0.7rem;" @click="stepSize = 1000">1k</button>
                                        </div>
                                        <span class="small text-info" x-show="$store.citrasense.status?.focuser_moving">
                                            <span class="spinner-border spinner-border-sm me-1" style="width: .5rem; height: .5rem;" role="status"></span>
                                            Moving...
                                        </span>
                                    </div>

                                    <!-- Absolute move -->
                                    <div class="col d-flex align-items-start justify-content-center">
                                        <div class="d-flex align-items-center gap-1">
                                            <input type="number" class="form-control form-control-sm" style="width: 80px;"
                                                   x-model.number="targetPos" min="0" placeholder="Pos"
                                                   :max="$store.citrasense.status?.focuser_max_position || 999999">
                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                    :disabled="$store.citrasense.status?.focuser_moving || $store.citrasense.isSystemBusy"
                                                    @click="window.moveFocuserAbsolute(targetPos)">
                                                Go
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <!-- ─── Autofocus ─── -->
                            <div class="pt-2 mt-2 border-top border-secondary"
                                 x-show="$store.citrasense.status?.supports_autofocus"
                                 x-data="{
                                     get pts() { return $store.citrasense.status?.autofocus_points || [] },
                                     get filterResults() { return $store.citrasense.status?.autofocus_filter_results || [] },
                                     get minPos() { return this.pts.length ? Math.min(...this.pts.map(p => p.pos)) : 0 },
                                     get maxPos() { return this.pts.length ? Math.max(...this.pts.map(p => p.pos)) : 1 },
                                     get minHfr() { return this.pts.length ? Math.min(...this.pts.map(p => p.hfr)) : 0 },
                                     get maxHfr() { return this.pts.length ? Math.max(...this.pts.map(p => p.hfr)) : 1 },
                                     sx(pos) {
                                         const range = this.maxPos - this.minPos || 1;
                                         return 30 + (pos - this.minPos) / range * 260;
                                     },
                                     sy(hfr) {
                                         const range = this.maxHfr - this.minHfr || 1;
                                         return 130 - (hfr - this.minHfr) / range * 110;
                                     },
                                     get filterNames() {
                                         return [...new Set(this.pts.map(p => p.filter || ''))];
                                     },
                                     filterColor(name) {
                                         return $store.citrasense.filterColors[name] || 'var(--bs-info)';
                                     },
                                     polylineFor(fname) {
                                         const filtered = this.pts.filter(p => (p.filter || '') === fname);
                                         const sorted = [...filtered].sort((a, b) => a.pos - b.pos);
                                         return sorted.map(p => this.sx(p.pos) + ',' + this.sy(p.hfr)).join(' ');
                                     }
                                 }">
                                <div class="row g-2">
                                    <!-- Left: controls + readouts -->
                                    <div class="col-12 col-md-5">
                                        <div class="d-flex align-items-center gap-2 flex-wrap mb-2">
                                            <button type="button" class="btn btn-sm"
                                                    :class="$store.citrasense.status?.autofocus_running ? 'btn-outline-danger' : ($store.citrasense.status?.autofocus_requested ? 'btn-outline-warning' : 'btn-outline-primary')"
                                                    @click="window.triggerAutofocus()">
                                                <template x-if="$store.citrasense.status?.autofocus_running">
                                                    <span><i class="bi bi-stop-fill me-1"></i>Cancel AF</span>
                                                </template>
                                                <template x-if="!$store.citrasense.status?.autofocus_running">
                                                    <span x-text="$store.citrasense.status?.autofocus_requested ? 'Cancel AF' : 'Autofocus'"></span>
                                                </template>
                                            </button>
                                            <small class="text-muted" x-show="!$store.citrasense.status?.autofocus_running"
                                                   x-text="$store.citrasense.formatLastAutofocus($store.citrasense.status)"></small>
                                        </div>
                                        <div class="small mb-1" x-show="$store.citrasense.status?.autofocus_running">
                                            <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                            <span x-text="$store.citrasense.status?.autofocus_progress || 'Autofocusing...'"></span>
                                        </div>
                                        <div x-show="!$store.citrasense.status?.autofocus_running && filterResults.length > 0" class="mb-1">
                                            <template x-for="r in filterResults" :key="r.filter">
                                                <div>
                                                    <small :style="'color:' + filterColor(r.filter)">
                                                        <span x-text="r.filter"></span>: <span x-text="r.position"></span>
                                                        <span class="text-muted" x-text="'(HFR ' + r.hfr + ')'"></span>
                                                    </small>
                                                </div>
                                            </template>
                                        </div>
                                        <div x-show="!$store.citrasense.status?.autofocus_running && $store.citrasense.status?.autofocus_last_result && filterResults.length === 0">
                                            <small :class="$store.citrasense.status?.autofocus_last_result?.includes('one-sided') || $store.citrasense.status?.autofocus_last_result?.includes('Failed') ? 'text-warning' : 'text-success'"
                                                   x-text="$store.citrasense.status?.autofocus_last_result"></small>
                                        </div>
                                        <div x-show="!$store.citrasense.status?.autofocus_running">
                                            <small class="text-muted" x-show="$store.citrasense.status?.autofocus_target_name"
                                                   x-text="'Target: ' + $store.citrasense.status?.autofocus_target_name"></small>
                                        </div>
                                        <div x-show="!$store.citrasense.status?.autofocus_running && $store.citrasense.status?.next_autofocus_minutes != null">
                                            <small class="text-muted"
                                                   x-text="'Next in: ' + ($store.citrasense.status?.next_autofocus_minutes === 0 ? 'now (overdue)' : $store.citrasense.formatMinutes($store.citrasense.status?.next_autofocus_minutes || 0))"></small>
                                        </div>
                                    </div>
                                    <!-- Right: V-curve chart -->
                                    <div class="col-12 col-md-7" x-show="pts.length > 0">
                                        <svg viewBox="0 0 300 150" class="w-100" style="max-height:150px">
                                            <line x1="30" y1="130" x2="290" y2="130" stroke="var(--bs-secondary)" stroke-width="0.5"/>
                                            <line x1="30" y1="20" x2="30" y2="130" stroke="var(--bs-secondary)" stroke-width="0.5"/>
                                            <text x="160" y="148" text-anchor="middle" fill="var(--bs-secondary)" font-size="9">Position</text>
                                            <text x="8" y="75" text-anchor="middle" fill="var(--bs-secondary)" font-size="9" transform="rotate(-90, 8, 75)">HFR</text>
                                            <!-- x-for <template> is invalid inside SVG; use x-html on <g> instead -->
                                            <g x-html="filterNames.map(fname =>
                                                `<polyline points='${polylineFor(fname)}' fill='none' stroke='${filterColor(fname)}' stroke-width='1.5' opacity='0.6'/>`
                                            ).join('')"></g>
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <!-- ─── HFR Focus Health ─── -->
                            <div class="pt-2 mt-2 border-top border-secondary"
                                 x-show="$store.citrasense.status?.last_hfr_median != null || $store.citrasense.status?.hfr_baseline != null"
                                 x-data="{
                                     get baseline() { return $store.citrasense.status?.hfr_baseline },
                                     get pct() { return $store.citrasense.status?.hfr_increase_percent || 30 },
                                     get greenLim() { return this.baseline ? this.baseline * (1 + this.pct / 200) : null },
                                     get yellowLim() { return this.baseline ? this.baseline * (1 + this.pct / 100) : null },
                                     get hist() { return $store.citrasense.status?.hfr_history || [] },
                                     get hfr() { return $store.citrasense.status?.last_hfr_median },
                                     get lastFilter() {
                                         if (!this.hist.length) return '';
                                         return this.hist[this.hist.length - 1].filter || '';
                                     },
                                     hfrColor(v) {
                                         if (v == null || !this.greenLim) return 'text-muted';
                                         if (v < this.greenLim) return 'text-success';
                                         if (v < this.yellowLim) return 'text-warning';
                                         return 'text-danger';
                                     },
                                     get hfrAge() {
                                         if (!this.hist.length) return '';
                                         const ago = Math.round((Date.now() / 1000) - this.hist[this.hist.length - 1].ts);
                                         if (ago < 60) return ago + 's ago';
                                         return Math.round(ago / 60) + 'm ago';
                                     },
                                     get mx() { return this.hist.length ? Math.max(...this.hist.map(h => h.hfr)) : 1 },
                                     get sparkFilterNames() {
                                         return [...new Set(this.hist.map(h => h.filter || ''))];
                                     },
                                     sparkFilterColor(name) {
                                         return $store.citrasense.filterColors[name] || '#888';
                                     },
                                     get sparkSvg() {
                                         return this.sparkFilterNames.map(fname => {
                                             const color = this.sparkFilterColor(fname);
                                             const pts = [];
                                             const dots = [];
                                             this.hist.forEach((h, i) => {
                                                 if ((h.filter || '') === fname) {
                                                     const x = (i * 120 / Math.max(this.hist.length - 1, 1)).toFixed(1);
                                                     const y = (22 - h.hfr / this.mx * 20).toFixed(1);
                                                     pts.push(x + ',' + y);
                                                     dots.push(`<circle cx='${x}' cy='${y}' r='1.5' fill='${color}'/>`);
                                                 }
                                             });
                                             let s = '';
                                             if (pts.length > 1) s += `<polyline points='${pts.join(' ')}' fill='none' stroke='${color}' stroke-width='1.5' stroke-linejoin='round' opacity='0.8'/>`;
                                             return s + dots.join('');
                                         }).join('');
                                     },
                                     bandY(lim) { return Math.max(2, 22 - lim / this.mx * 20); }
                                 }">
                                <div class="small">
                                    <div class="row mb-1">
                                        <div class="col-6 text-muted">Focus HFR</div>
                                        <div class="col-6 d-flex align-items-center gap-2">
                                            <template x-if="hfr != null">
                                                <span>
                                                    <span :class="hfrColor(hfr)" x-text="hfr.toFixed(2) + ' px'"></span>
                                                    <span class="text-muted" x-show="lastFilter" x-text="lastFilter"></span>
                                                    <span class="text-muted" x-text="hfrAge"></span>
                                                </span>
                                            </template>
                                            <template x-if="hfr == null && !baseline">
                                                <span class="text-muted fst-italic">Run autofocus to calibrate</span>
                                            </template>
                                            <template x-if="hist.length >= 2 && greenLim">
                                                <svg width="120" height="24">
                                                    <rect x="0" :y="bandY(greenLim)" width="120" :height="22 - bandY(greenLim)" fill="#198754" opacity="0.15"/>
                                                    <rect x="0" :y="bandY(yellowLim)" width="120" :height="bandY(greenLim) - bandY(yellowLim)" fill="#ffc107" opacity="0.15"/>
                                                    <rect x="0" y="2" width="120" :height="bandY(yellowLim) - 2" fill="#dc3545" opacity="0.15"/>
                                                    <g x-html="sparkSvg"></g>
                                                </svg>
                                            </template>
                                            <template x-if="hist.length >= 2 && !greenLim">
                                                <svg width="120" height="24">
                                                    <g x-html="sparkSvg"></g>
                                                </svg>
                                            </template>
                                        </div>
                                    </div>
                                    <template x-if="baseline">
                                        <div class="text-muted" style="font-size: 0.7rem;">
                                            Baseline: <span x-text="baseline.toFixed(2)"></span> px
                                            <template x-if="$store.citrasense.status?.hfr_refocus_enabled">
                                                <span>&middot; refocus at +<span x-text="pct"></span>%</span>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="container">
            <!-- Active Tasks Card with Pipeline Stages -->
            <div class="row g-3 mb-3">
                <div class="col-12">
                    <div class="card bg-dark text-light border-secondary">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <span><i class="bi bi-lightning-charge-fill me-2"></i>Active Tasks</span>
                            <span class="d-flex flex-wrap gap-3 text-muted small"
                                  x-show="$store.citrasense.status?.pipeline_stats?.tasks?.started > 0">
                                <span><i class="bi bi-check-circle me-1 text-success"></i><span x-text="$store.citrasense.status?.pipeline_stats?.tasks?.succeeded || 0"></span> Completed</span>
                                <span><i class="bi bi-rocket me-1 text-info"></i><span x-text="$store.citrasense.status?.pipeline_stats?.uploading?.satellites_identified || 0"></span> Satellites</span>
                                <span><i class="bi bi-eye me-1 text-success"></i><span x-text="$store.citrasense.status?.pipeline_stats?.uploading?.observation_uploads || 0"></span> Obs</span>
                                <span><i class="bi bi-image me-1 text-warning"></i><span x-text="$store.citrasense.status?.pipeline_stats?.uploading?.image_uploads || 0"></span> Img</span>
                            </span>
                        </div>
                        <div class="card-body">
                            <div class="row g-3 align-items-stretch">
                                {{ stage_box('imaging',    'Imaging',    'camera-fill',       'primary') }}

                                <!-- Arrow 1 (Imaging → Processing or Uploading) -->
                                <div class="col-auto d-none d-md-flex align-items-center px-2">
                                    <i class="bi bi-arrow-right text-secondary" style="font-size: 1.5rem;"></i>
                                </div>

                                {% call stage_box('processing', 'Processing', 'gear-fill', 'warning', 'x-show="$store.citrasense.config?.processors_enabled"') %}
                                <div class="d-flex flex-column gap-1 mb-2" style="cursor: default;"
                                     x-show="$store.citrasense.status?.active_processors?.length > 0 && $store.citrasense.status?.pipeline_stats?.processors"
                                     x-init="new bootstrap.Tooltip($el, {
                                         placement: 'top',
                                         trigger: 'hover',
                                         html: true,
                                         title() {
                                             const procs = $store.citrasense.status?.pipeline_stats?.processors;
                                             const names = $store.citrasense.status?.active_processors || [];
                                             if (!procs || !names.length) return '';
                                             return names.filter(n => procs[n]?.runs > 0).map(n => {
                                                 const p = procs[n];
                                                 const ok = p.runs - p.failures;
                                                 const label = n.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
                                                 return `${label}: ${ok} ok / ${p.failures} failed`;
                                             }).join('<br>');
                                         }
                                     })">
                                    <template x-for="name in ($store.citrasense.status?.active_processors || [])" :key="name">
                                        <template x-if="$store.citrasense.status?.pipeline_stats?.processors?.[name]?.runs > 0">
                                            <div class="progress" style="height: 3px;">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                     :style="`width: ${(() => { const p = $store.citrasense.status?.pipeline_stats?.processors?.[name]; if (!p) return 0; return p.runs > 0 ? ((p.runs - p.failures) / p.runs) * 100 : 0; })()}%`"></div>
                                                <div class="progress-bar bg-danger" role="progressbar"
                                                     :style="`width: ${(() => { const p = $store.citrasense.status?.pipeline_stats?.processors?.[name]; if (!p) return 0; return p.runs > 0 ? (p.failures / p.runs) * 100 : 0; })()}%`"></div>
                                            </div>
                                        </template>
                                    </template>
                                </div>
                                {% endcall %}

                                <!-- Arrow 2 (Processing → Uploading, only shown when processing enabled) -->
                                <div class="col-auto align-items-center px-2" x-show="$store.citrasense.config?.processors_enabled" :class="{'d-flex': $store.citrasense.config?.processors_enabled}">
                                    <i class="bi bi-arrow-right text-secondary d-none d-md-inline-block" style="font-size: 1.5rem;"></i>
                                </div>

                                {% call stage_box('uploading', 'Submission', 'cloud-upload-fill', 'success') %}
                                <div class="d-flex flex-column gap-1 mb-2" style="cursor: default;"
                                     x-show="(($store.citrasense.status?.pipeline_stats?.uploading?.observation_uploads || 0) + ($store.citrasense.status?.pipeline_stats?.uploading?.image_uploads || 0) + ($store.citrasense.status?.pipeline_stats?.uploading?.permanent_failures || 0)) > 0"
                                     x-init="new bootstrap.Tooltip($el, {
                                         placement: 'top',
                                         trigger: 'hover',
                                         html: true,
                                         title() {
                                             const u = $store.citrasense.status?.pipeline_stats?.uploading;
                                             if (!u) return '';
                                             const lines = [];
                                             lines.push(`${u.observation_uploads || 0} observation uploads`);
                                             lines.push(`${u.image_uploads || 0} image-only`);
                                             if (u.permanent_failures > 0) lines.push(`${u.permanent_failures} failed`);
                                             return lines.join('<br>');
                                         }
                                     })">
                                    <div class="progress" style="height: 3px;">
                                        <div class="progress-bar bg-success" role="progressbar"
                                             :style="`width: ${(() => { const u = $store.citrasense.status?.pipeline_stats?.uploading; if (!u) return 0; const t = (u.observation_uploads || 0) + (u.image_uploads || 0) + (u.permanent_failures || 0); return t > 0 ? ((u.observation_uploads || 0) / t) * 100 : 0; })()}%`"></div>
                                        <div class="progress-bar bg-warning" role="progressbar"
                                             :style="`width: ${(() => { const u = $store.citrasense.status?.pipeline_stats?.uploading; if (!u) return 0; const t = (u.observation_uploads || 0) + (u.image_uploads || 0) + (u.permanent_failures || 0); return t > 0 ? ((u.image_uploads || 0) / t) * 100 : 0; })()}%`"></div>
                                        <div class="progress-bar bg-danger" role="progressbar"
                                             :style="`width: ${(() => { const u = $store.citrasense.status?.pipeline_stats?.uploading; if (!u) return 0; const t = (u.observation_uploads || 0) + (u.image_uploads || 0) + (u.permanent_failures || 0); return t > 0 ? ((u.permanent_failures || 0) / t) * 100 : 0; })()}%`"></div>
                                    </div>
                                </div>
                                {% endcall %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row g-3 mb-3">
                <div class="col-12">
                    <div class="card bg-dark text-light border-secondary">
                        <div class="card-header d-flex align-items-center justify-content-between"
                             x-data="{
                                 batchLoading: false,
                                 batchResult: null,
                                 async requestBatch() {
                                     this.batchLoading = true;
                                     this.batchResult = null;
                                     try {
                                         const resp = await fetch('/api/self-tasking/request-now', { method: 'POST' });
                                         const data = await resp.json();
                                         if (resp.ok) {
                                             this.batchResult = { ok: true, msg: (data.created ?? 0) + ' created' };
                                         } else {
                                             this.batchResult = { ok: false, msg: data.error || 'Request failed' };
                                         }
                                     } catch (e) {
                                         this.batchResult = { ok: false, msg: 'Network error' };
                                     }
                                     this.batchLoading = false;
                                     setTimeout(() => this.batchResult = null, 4000);
                                 }
                             }">
                            <span><i class="bi bi-calendar-week me-1"></i>Scheduled Tasks</span>
                            <span class="d-flex align-items-center gap-2">
                                <span class="small" x-show="batchResult" x-transition.opacity
                                      :class="batchResult?.ok ? 'text-success' : 'text-danger'"
                                      x-text="batchResult?.msg"></span>
                                <button class="btn btn-sm btn-outline-primary"
                                        :disabled="batchLoading"
                                        @click="requestBatch()"
                                        x-show="$store.citrasense.status?.connected !== false">
                                    <span x-show="!batchLoading"><i class="bi bi-plus-circle me-1"></i>Request Batch</span>
                                    <span x-show="batchLoading"><span class="spinner-border spinner-border-sm me-1"></span>Requesting…</span>
                                </button>
                                <span class="small text-secondary"><span x-text="$store.citrasense.status?.tasks_pending ?? $store.citrasense.tasks?.length ?? 0">0</span> scheduled</span>
                            </span>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <p class="p-3 text-muted-dark" x-show="$store.citrasense.tasks.length === 0">No scheduled tasks</p>
                                <table class="table table-dark table-hover mb-0" x-show="$store.citrasense.tasks.length > 0">
                                    <thead>
                                        <tr>
                                            <th>Target</th>
                                            <th>Filter</th>
                                            <th class="text-center">Sky</th>
                                            <th>
                                                <span class="d-md-none">Count</span>
                                                <span class="d-none d-md-inline">Countdown</span>
                                            </th>
                                            <th class="d-none d-md-table-cell">Window</th>
                                            <th class="text-end" style="width: 1%;">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {# Need `index` in scope so the overlap check can compare this
                                           row's start time against the previous row's stop time. #}
                                        <template x-for="(task, index) in $store.citrasense.tasks" :key="task.id">
                                            <tr x-data="taskRow(task)"
                                                class="task-row" :class="rowClass">
                                                <td class="fw-semibold">
                                                    {# Deep-link to the Citra app's satellite page when we
                                                       have both an app_url (from /api/config) and a
                                                       satelliteId (added to _task_to_dict).  Fall back
                                                       to plain text when either is missing. #}
                                                    <template x-if="task.satelliteId && $store.citrasense.config?.app_url">
                                                        <a :href="$store.citrasense.config.app_url + '/satellites/' + task.satelliteId"
                                                           target="_blank" rel="noopener noreferrer"
                                                           class="text-decoration-none link-light"
                                                           :title="'Open ' + task.target + ' on Citra'">
                                                            <span x-text="task.target"></span>
                                                            <i class="bi bi-box-arrow-up-right small text-muted ms-1"></i>
                                                        </a>
                                                    </template>
                                                    <template x-if="!(task.satelliteId && $store.citrasense.config?.app_url)">
                                                        <span x-text="task.target"></span>
                                                    </template>
                                                </td>
                                                <td class="small">
                                                    <span x-show="task.filter"
                                                          class="badge"
                                                          :style="'background-color:' + ($store.citrasense.filterColors[task.filter] || '#777') + ';color:white'"
                                                          x-text="task.filter"></span>
                                                    <span x-show="!task.filter" class="text-secondary">-</span>
                                                </td>
                                                {# Sky column: tiny polar compass.  Center=zenith,
                                                   outer ring=horizon, N at top.  Dot color is keyed
                                                   off the telescope record's `minElevation` (the
                                                   user's "won't observe below this" floor): red is
                                                   below the floor, yellow within 10° of it, green
                                                   above.  When that floor is known we also draw a
                                                   dashed ring at exactly that elevation so the safe
                                                   band is visible at a glance.  Tooltip carries the
                                                   raw alt/compass/trend/peak/slew. #}
                                                <td class="text-center" :title="$store.citrasense.formatSkyTitle(task)">
                                                    <template x-if="task.sky_alt_deg != null">
                                                        <svg width="40" height="40" viewBox="0 0 40 40"
                                                             class="d-inline-block align-middle"
                                                             :class="$store.citrasense.skyAltClass(task.sky_alt_deg, $store.citrasense.status?.telescope_min_elevation)"
                                                             aria-hidden="true">
                                                            <circle cx="20" cy="20" r="17" fill="none"
                                                                    stroke="currentColor" stroke-opacity="0.3" stroke-width="1"/>
                                                            <template x-if="$store.citrasense.skyHorizonRingRadius($store.citrasense.status?.telescope_min_elevation) != null">
                                                                <circle cx="20" cy="20"
                                                                        :r="$store.citrasense.skyHorizonRingRadius($store.citrasense.status?.telescope_min_elevation)"
                                                                        fill="none" stroke="currentColor" stroke-opacity="0.35"
                                                                        stroke-width="1" stroke-dasharray="1.5 1.5"/>
                                                            </template>
                                                            <text x="20" y="5.5" text-anchor="middle"
                                                                  font-size="5" fill="currentColor" fill-opacity="0.55">N</text>
                                                            <circle :cx="$store.citrasense.skyCompassDot(task).cx"
                                                                    :cy="$store.citrasense.skyCompassDot(task).cy"
                                                                    r="2.5" fill="currentColor"/>
                                                        </svg>
                                                    </template>
                                                    <span x-show="task.sky_alt_deg == null" class="text-muted small">&mdash;</span>
                                                </td>
                                                <td class="small" :class="phaseClass" x-text="countdownText"></td>
                                                <td class="text-secondary small d-none d-md-table-cell"
                                                    :title="task.stop_time
                                                            ? $store.citrasense.formatLocalTime(task.start_time) + ' → ' + $store.citrasense.formatLocalTime(task.stop_time)
                                                            : $store.citrasense.formatLocalTime(task.start_time)">
                                                    {# Show only the start time (date implied for today's
                                                       queue) plus the window duration.  Full start→stop
                                                       range is in the row's title for hover. #}
                                                    <span x-text="$store.citrasense.formatLocalTimeShort(task.start_time)"></span>
                                                    <span x-show="task.stop_time"
                                                          class="text-muted ms-1"
                                                          x-text="'(' + Math.round((new Date(task.stop_time) - new Date(task.start_time)) / 1000) + 's)'"></span>
                                                    {# Overlap warning: the real Citra scheduler shouldn't
                                                       hand out windows that start before the previous one
                                                       ends.  When it happens (dummy adapter, real bug),
                                                       flag it loudly so it isn't mistaken for plain
                                                       lateness. #}
                                                    <span x-show="index > 0
                                                                  && task.start_time
                                                                  && $store.citrasense.tasks[index - 1].stop_time
                                                                  && new Date(task.start_time) < new Date($store.citrasense.tasks[index - 1].stop_time)"
                                                          class="badge bg-warning-subtle text-warning-emphasis ms-1"
                                                          title="This window opens before the previous task's window closes.">overlap</span>
                                                </td>
                                                {# Actions cell: per-task management.  Today only Cancel
                                                   (PUT /tasks/{id} with status=Canceled on the Citra
                                                   API).  The button is hidden for the active task; that
                                                   case is also rejected by the route. #}
                                                <td class="text-end">
                                                    <template x-if="canCancel">
                                                        <button type="button"
                                                                class="btn btn-sm btn-outline-danger"
                                                                :disabled="cancelling"
                                                                @click="cancel()"
                                                                title="Cancel this task on the Citra server">
                                                            <span x-show="!cancelling"><i class="bi bi-x-lg"></i></span>
                                                            <span x-show="cancelling" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                                        </button>
                                                    </template>
                                                </td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fullscreen Preview Modal -->
        <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true"
             x-on:open-preview-modal.window="bootstrap.Modal.getOrCreateInstance($el).show()">
            <div class="modal-dialog modal-fullscreen" style="background: rgba(0,0,0,0.95);">
                <div class="modal-content bg-transparent border-0">
                    <div class="position-absolute top-0 end-0 p-3" style="z-index: 1;">
                        <button type="button" class="btn btn-outline-light btn-lg" data-bs-dismiss="modal" aria-label="Close">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                    <div class="modal-body d-flex align-items-center justify-content-center p-0"
                         data-bs-dismiss="modal" style="cursor: pointer;">
                        <img :src="$store.citrasense.previewDataUrl"
                             alt="Full preview"
                             style="width: 100%; height: 100%; object-fit: contain;"
                             @click.stop>
                    </div>
                </div>
            </div>
        </div>

    </div>