===== active panel index =====
<?php require_once __DIR__ . "/../auth_guard.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Devon Operator Panel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" href="../assets/img/favicon-devon.png" />
  <link rel="stylesheet" href="assets/css/panel.runtime.fix.20260408_1.css?v=20260409_ui1" />
</head>
<body>
  <div class="op-shell">
    <aside class="op-sidebar">
      <div class="brand">
        <img class="brand-logo" src="../assets/img/logodevon-white.png" alt="Devon" />
        <span class="brand-subtitle">Operator Panel</span>
      </div>

      <section class="side-block">
        <div class="side-label">Project Progress</div>
        <div id="project-donut" class="sidebar-donut-wrap"></div>
      </section>

      <section class="side-block">
        <div class="side-label">Global Status</div>
        <div id="global-pills" class="pill-row pill-row-compact"></div>
      </section>

      <section class="side-block">
        <div class="side-label">Deployment Stages</div>
        <nav id="stage-nav" class="stage-nav"></nav>
      </section>
    </aside>

    <main class="op-main">
      <header class="hero">
        <div>
          <div class="eyebrow">DEPLOYMENT MONITORING</div>
          <h1 id="hero-title">Devon runtime panel</h1>
          <p id="hero-subtitle">Canonical layer defines structure. Operational layer exposes observable runtime.</p>
        </div>

        <div class="hero-actions">
          <button id="btn-open-manifest" class="btn btn-primary" type="button">Manifest</button>
          <button id="btn-open-contract" class="btn btn-secondary" type="button">Data Contract</button>
          <button id="btn-open-host" class="btn btn-secondary" type="button">Host Runtime</button>
          <button id="btn-open-docker" class="btn btn-secondary" type="button">Docker Runtime</button>
          <button id="btn-open-runtime" class="btn btn-secondary" type="button">Pipeline Runtime</button>
        </div>
      </header>

      <section class="layer-grid">
        <article class="card layer-card">
          <div class="card-top">
            <span class="card-title">Canonical Layer</span>
            <span class="badge badge-violet">structure</span>
          </div>
          <ul class="layer-list">
            <li>Deployment order</li>
            <li>Architecture and cards</li>
            <li>Contracts and evidence schema</li>
            <li>Canonical matrix rows</li>
          </ul>
        </article>

        <article class="card layer-card">
          <div class="card-top">
            <span class="card-title">Operational Layer</span>
            <span class="badge badge-blue">runtime</span>
          </div>
          <ul class="layer-list">
            <li>Host telemetry</li>
            <li>Docker and containers</li>
            <li>Pipeline execution status</li>
            <li>Observable evidence only</li>
          </ul>
        </article>
      </section>

      <section class="top-grid">

===== css anchors =====
40:  grid-template-columns:290px minmax(0,1fr) 360px;
41:  min-height:100vh;
47:  position:sticky;
49:  height:100vh;
320:  grid-template-columns:repeat(3,minmax(0,1fr));
327:  grid-template-columns:repeat(3,minmax(0,1fr));
