<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{COCKPIT_NAME}} — Cockpit</title>
  <style>
    :root {
      --primary: {{PRIMARY}};
      --danger: {{DANGER}};
      --warning: {{WARNING}};
      --bg: {{BG}};
      --surface: {{SURFACE}};
      --text: {{TEXT}};
      --muted: {{MUTED}};
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      padding: 2rem;
      max-width: 960px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* Header */
    .header {
      border-bottom: 2px solid var(--primary);
      padding-bottom: 1.5rem;
      margin-bottom: 2rem;
    }
    .cockpit-name {
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.02em;
    }
    .takeoff-label {
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    /* Status bar */
    .status-bar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .status-item {
      background: var(--surface);
      border-radius: 8px;
      padding: 1rem 1.25rem;
    }
    .status-label {
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      margin-bottom: 0.25rem;
    }
    .status-value {
      font-size: 1.125rem;
      font-weight: 600;
      font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    }
    .status-value.clean { color: var(--primary); }
    .status-value.dirty { color: var(--warning); }
    .status-value.never { color: var(--muted); font-style: italic; }

    /* Drift alert */
    .drift {
      background: rgba(210, 153, 34, 0.08);
      border: 1px solid var(--warning);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
    }
    .drift-badge {
      background: var(--warning);
      color: var(--bg);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.2em 0.6em;
      border-radius: 4px;
      white-space: nowrap;
    }
    .drift-text { font-size: 0.9375rem; }

    /* Resume line */
    .resume {
      background: var(--surface);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      border-left: 3px solid var(--muted);
      font-style: italic;
      color: var(--muted);
      font-size: 0.9375rem;
    }

    /* Briefing sections */
    .section {
      background: var(--surface);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      border-left: 3px solid var(--primary);
    }
    .section.blockers { border-left-color: var(--danger); }
    .section h2 {
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--primary);
      margin-bottom: 1rem;
      font-weight: 700;
    }
    .section.blockers h2 { color: var(--danger); }
    .section p {
      font-size: 0.9375rem;
      line-height: 1.7;
      margin-bottom: 0.75rem;
    }
    .section p:last-child { margin-bottom: 0; }
    .section ol, .section ul {
      padding-left: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .section ol:last-child, .section ul:last-child { margin-bottom: 0; }
    .section li {
      font-size: 0.9375rem;
      line-height: 1.7;
      margin-bottom: 0.5rem;
    }
    .section li:last-child { margin-bottom: 0; }

    /* Fleet dashboard */
    .fleet {
      background: var(--surface);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      border-left: 3px solid var(--primary);
    }
    .fleet h2 {
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--primary);
      margin-bottom: 1rem;
      font-weight: 700;
    }
    .fleet-summary {
      font-size: 0.875rem;
      color: var(--muted);
      margin-bottom: 1rem;
    }
    .fleet-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
      font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
      margin-bottom: 1.25rem;
    }
    .fleet-table th {
      text-align: left;
      font-size: 0.6875rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .fleet-table td {
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .fleet-status { font-weight: 600; }
    .fleet-status.synced { color: var(--primary); }
    .fleet-status.ahead { color: var(--warning); }
    .fleet-status.dirty { color: var(--warning); }
    .fleet-status.diverged { color: var(--danger); }
    .fleet-status.new-commits { color: var(--primary); }
    .fleet-status.remote-only { color: var(--muted); font-style: italic; }

    .pilot-activity {
      margin-top: 1rem;
    }
    .pilot-activity h3 {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin-bottom: 0.5rem;
      font-weight: 600;
    }
    .pilot-activity-item {
      font-size: 0.875rem;
      padding: 0.25rem 0;
    }
    .pilot-activity-item strong {
      color: var(--primary);
    }
    .pilot-unknown {
      color: var(--warning);
      font-style: italic;
    }

    /* Stale marker */
    .stale {
      color: var(--warning);
      font-size: 0.8125rem;
      font-weight: 600;
    }

    /* Footer */
    .timestamp {
      text-align: center;
      color: var(--muted);
      font-size: 0.75rem;
      margin-top: 2rem;
      padding-top: 1rem;
      border-top: 1px solid var(--surface);
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="cockpit-name">{{COCKPIT_NAME}}</div>
    <div class="takeoff-label">Takeoff #{{TAKEOFF_NUMBER}}</div>
  </div>

  <div class="status-bar">
    <div class="status-item">
      <div class="status-label">Pilot</div>
      <div class="status-value">{{PILOT}}</div>
    </div>
    <div class="status-item">
      <div class="status-label">Date</div>
      <div class="status-value">{{DATE}}</div>
    </div>
    <div class="status-item">
      <div class="status-label">Time</div>
      <div class="status-value">{{TIME}}</div>
    </div>
    <div class="status-item">
      <div class="status-label">Takeoff</div>
      <div class="status-value">#{{TAKEOFF_NUMBER}}</div>
    </div>
  </div>

  <div class="status-bar">
    <div class="status-item">
      <div class="status-label">Branch</div>
      <div class="status-value">{{BRANCH}}</div>
    </div>
    <div class="status-item">
      <div class="status-label">Working Tree</div>
      <div class="status-value {{DIRTY_CLASS}}">{{DIRTY_VALUE}}</div>
    </div>
    <div class="status-item">
      <div class="status-label">Session</div>
      <div class="status-value">#{{SESSION_NUMBER}}</div>
    </div>
    <div class="status-item">
      <div class="status-label">Last Landing</div>
      <div class="status-value {{LAST_CLASS}}">{{LAST_LANDING}}</div>
    </div>
  </div>

  {{DRIFT_SECTION}}

  {{RESUME_SECTION}}

  {{FLEET_SECTION}}

  <div class="section">
    <h2>Where We Were</h2>
    {{WHERE_WE_WERE}}
  </div>

  <div class="section">
    <h2>Where We Are</h2>
    {{WHERE_WE_ARE}}
  </div>

  <div class="section">
    <h2>Where We're Going</h2>
    {{WHERE_WERE_GOING}}
  </div>

  <div class="section blockers">
    <h2>Blockers</h2>
    {{BLOCKERS}}
  </div>

  <div class="timestamp">
    Generated {{TIMESTAMP}} by /takeoff
  </div>

</body>
</html>
