{% extends "base.html" %}
{% import "_macros.html" as m %}
{% block title %}{{ mooring_name }} – recovery report{% endblock %}
{% block page_styles %}
  /* Table style is now canonical in emit_css (shared).  Only page-specific
     content styles remain here. */
  .pipeline { white-space: nowrap; display: flex; flex-wrap: wrap; gap: 0.2rem; align-items: center; }
  .badge {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .b-ok   { background: var(--good);   color: #fff; }
  .b-warn { background: var(--warn);   color: #fff; }
  .b-miss { background: #dfe6e9; color: #999; }
  .b-stack { background: var(--interp); color: #fff; }
  .b-grid  { background: #8e44ad;       color: #fff; }
  .arrow { color: #ccc; font-size: 0.8rem; margin: 0 0.05rem; }
  .pos { color: var(--warn); font-weight: 600; }
  .neg { color: var(--interp); font-weight: 600; }
  tr.row-warn td { background: #fef3cd !important; }
  /* No width here: a bare .fig fills the content column via base.html's
     max-width:100% (knockdown + clock-check are slot=None figures). */
  img.fig { max-width: 100%; border: 1px solid var(--rule); border-radius: 4px; margin-bottom: 0.5rem; }
  /* Instrument-summary variable badges (was an inline <style> in that section). */
  .vbadge {
    display: inline-block;
    padding: 0.12em 0.42em;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .vb-yes    { background: #27ae60; color: #fff; }
  .vb-interp { background: #2980b9; color: #fff; }
  .vb-no     { background: #ecf0f1; color: #aaa; }
  /* Sensor-calibration collapsible coefficient cells (was an inline <style>). */
  details.coeff summary {
    cursor: pointer;
    color: var(--interp);
    font-size: 0.78rem;
    user-select: none;
  }
  details.coeff pre {
    margin: 0.3em 0 0;
    font-size: 0.72rem;
    background: #f8f9fa;
    padding: 0.4em 0.6em;
    border-radius: 3px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  /* QC flag summary bars + legend (was an inline <style> in that section). */
  .qc-bar {
    display: flex;
    width: 220px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
    background: #ecf0f1;
  }
  .qc-bar div { height: 100%; }
  .qc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    font-size: 0.75rem;
    margin: 0.3rem 0 1rem;
  }
  .qc-legend span { display: inline-block; width: 10px; height: 10px;
                    border-radius: 2px; vertical-align: middle; margin-right: 3px; }
{% endblock %}
{% block masthead_type %}Summary{% endblock %}
{% block masthead_sub %}Mooring recovery report{% endblock %}
{% block masthead_meta %}
    <div{% if cruise == '—' %} class="meta-miss"{% endif %}><dt>Cruise</dt><dd>{{ cruise }}</dd></div>
    <div{% if ship == '—' %} class="meta-miss"{% endif %}><dt>Ship</dt><dd>{{ ship }}</dd></div>
    <div{% if latitude == '—' %} class="meta-miss"{% endif %}><dt>Latitude</dt><dd>{{ latitude }}</dd></div>
    <div{% if longitude == '—' %} class="meta-miss"{% endif %}><dt>Longitude</dt><dd>{{ longitude }}</dd></div>
    <div{% if waterdepth == '—' %} class="meta-miss"{% endif %}><dt>Water depth</dt><dd>{{ waterdepth }}{% if waterdepth != '—' %}&thinsp;m{% endif %}</dd></div>
    <div{% if deploy_time == '—' %} class="meta-miss"{% endif %}><dt>Deployment</dt><dd>{{ deploy_time }}</dd></div>
    <div{% if recover_time == '—' %} class="meta-miss"{% endif %}><dt>Recovery</dt><dd>{{ recover_time }}</dd></div>
    <div{% if duration == '—' %} class="meta-miss"{% endif %}><dt>Duration</dt><dd>{{ duration }}</dd></div>
    <div><dt>Instruments</dt><dd>{{ n_instruments }}</dd></div>
  {% endblock %}
{% block content %}
{{ m.report_body(report, "deployment", generated, cruise, yaml_path) }}
{% endblock %}