<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1240" />
    <title>On-Time Delivery Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap"
      rel="stylesheet"
    />
    <style>
      /* ===========================================================
         Mono Crimson Operations Brief — design tokens.
         See ./DESIGN.md for the full specification. CSS custom-property
         names mirror the DESIGN.md frontmatter token names so any
         downstream styling can rely on the same grammar.
         =========================================================== */
      :root {
        --color-surface: #ffffff;
        --color-surface-muted: #f4f5f7;
        --color-canvas: #fafafb;
        --color-border: #e6e7eb;
        --color-hairline: #eeeff2;
        --color-text-primary: #0b1220;
        --color-text-secondary: #4b5563;
        --color-text-tertiary: #6b7280;
        --color-text-quiet: #9ca3af;
        --color-accent-crimson: #c2272d;
        --color-data-ink: #0f1b2e;
        --color-data-track: #e6e7eb;
        --color-tier-low: #f1f2f4;
        --color-tier-mid: #dddfe3;
        --color-tier-high: #c9cbd0;
        --color-pill-bg: #f1f2f4;
        --color-pill-fg: #4b5563;

        --rounded-xs: 3px;
        --rounded-sm: 4px;
        --rounded-md: 6px;

        --shadow-card: 0 1px 0 rgba(11, 18, 32, 0.02);

        --font-sans: "Inter", "IBM Plex Sans", system-ui, sans-serif;
        --font-mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular",
          monospace;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        background: var(--color-canvas);
        color: var(--color-text-primary);
        font-family: var(--font-sans);
        font-size: 13px;
        line-height: 1.45;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "tnum", "lnum";
      }

      .shell {
        max-width: 1200px;
        margin: 0 auto;
        padding: 22px 24px 28px;
      }

      /* Header ---------------------------------------------------- */
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 12px;
      }
      .header__title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.005em;
        color: var(--color-text-primary);
      }
      .header__filters {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .pill {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--color-pill-fg);
        background: var(--color-pill-bg);
        border: 1px solid var(--color-hairline);
        border-radius: var(--rounded-sm);
        padding: 3px 8px;
        white-space: nowrap;
      }

      /* KPI strip ------------------------------------------------- */
      .kpis {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        padding-bottom: 14px;
      }
      .kpi {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--rounded-md);
        padding: 14px 16px;
        box-shadow: var(--shadow-card);
        min-height: 102px;
      }
      .kpi__label {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-text-secondary);
        margin: 0 0 6px;
      }
      .kpi__number {
        font-size: 34px;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -0.018em;
        color: var(--color-text-primary);
        font-feature-settings: "tnum", "lnum";
      }
      .kpi__number--negative {
        color: var(--color-accent-crimson);
      }
      .kpi__caption {
        margin-top: 6px;
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--color-text-tertiary);
        font-feature-settings: "tnum", "lnum";
      }

      /* Body grid ------------------------------------------------- */
      .body {
        display: grid;
        grid-template-columns: 5fr 3fr;
        gap: 12px;
      }

      .card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--rounded-md);
        padding: 16px 18px 14px;
        box-shadow: var(--shadow-card);
      }
      .card__title {
        margin: 0 0 12px;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-primary);
      }

      /* Bar chart ------------------------------------------------- */
      .bars {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 4px 0 12px;
      }
      .bar {
        display: grid;
        grid-template-columns: 150px 1fr 130px;
        align-items: center;
        gap: 12px;
      }
      .bar__label {
        font-size: 12.5px;
        font-weight: 400;
        color: var(--color-text-secondary);
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bar__track {
        position: relative;
        height: 12px;
        background: var(--color-data-track);
        border-radius: var(--rounded-xs);
      }
      .bar__fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: var(--color-data-ink);
        border-radius: var(--rounded-xs);
      }
      .bar__tick {
        position: absolute;
        top: -2px;
        bottom: -2px;
        width: 2px;
        background: var(--color-accent-crimson);
        transform: translateX(-1px);
      }
      .bar__value {
        font-size: 12px;
        font-weight: 500;
        color: var(--color-text-quiet);
        font-feature-settings: "tnum", "lnum";
      }

      /* Legend ---------------------------------------------------- */
      .legend {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-top: 12px;
        border-top: 1px solid var(--color-hairline);
        font-size: 11.5px;
        color: var(--color-text-tertiary);
      }
      .legend__item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .legend__sw-bar {
        width: 18px;
        height: 10px;
        background: var(--color-data-ink);
        border-radius: var(--rounded-xs);
      }
      .legend__sw-tick {
        width: 2px;
        height: 12px;
        background: var(--color-accent-crimson);
      }
      .legend__sw-tier {
        width: 22px;
        height: 10px;
        border-radius: var(--rounded-xs);
      }
      .legend__sw-tier--low {
        background: var(--color-tier-low);
      }
      .legend__sw-tier--mid {
        background: var(--color-tier-mid);
      }
      .legend__sw-tier--high {
        background: var(--color-tier-high);
      }

      /* Lowest table ---------------------------------------------- */
      .table {
        display: grid;
        grid-template-columns: 28px 1fr 130px 60px;
        column-gap: 12px;
      }
      .table__head > div {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--color-text-quiet);
        padding: 0 0 8px;
        border-bottom: 1px solid var(--color-hairline);
      }
      .table__head .col-otdl {
        text-align: right;
      }
      .table__head,
      .table__row {
        display: contents;
      }
      .table__row > div {
        padding: 10px 0;
        border-bottom: 1px solid var(--color-hairline);
        align-self: center;
        display: flex;
        align-items: center;
      }
      .table__rank {
        font-size: 12px;
        color: var(--color-text-quiet);
        justify-content: flex-start;
        font-feature-settings: "tnum", "lnum";
      }
      .table__name {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--color-text-primary);
        line-height: 1.25;
        word-break: normal;
        overflow-wrap: anywhere;
        max-width: 100%;
      }
      .table__bar-cell {
        position: relative;
      }
      .table__bar-track {
        position: relative;
        flex: 1;
        height: 18px;
        background: var(--color-surface-muted);
        border-radius: var(--rounded-xs);
        overflow: hidden;
      }
      .table__bar-fill {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background: var(--color-accent-crimson);
        border-radius: var(--rounded-xs);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 6px;
        font-size: 11.5px;
        font-weight: 700;
        color: #ffffff;
        font-feature-settings: "tnum", "lnum";
      }
      .table__lines {
        font-size: 12px;
        font-weight: 500;
        color: var(--color-text-quiet);
        justify-content: flex-end;
        font-feature-settings: "tnum", "lnum";
      }

      @media print {
        body {
          background: #fff;
        }
      }
    </style>
  </head>
  <body>
    <main class="shell">
      <!-- ============================================================
           NOTE on bindings.
           Open Design's html_template_v1 renderer (apps/daemon/src/
           live-artifacts/render.ts) does scalar-only 
           interpolation: bindings must start with `data`, must resolve
           to a scalar, and there is no array repeat directive. The
           template is therefore fully unrolled — KPI 0..3, bar 0..13,
           lowest 0..7. Refresh callers should keep the same shape and
           cardinality in data.json.
           ============================================================ -->

      <header class="header">
        <h1 class="header__title">On-Time Delivery Dashboard</h1>
        <div class="header__filters">
          <span class="pill">Date = August 2021</span>
          <span class="pill">Exchange Rate[From Currency] = &quot;EUR&quot;</span>
        </div>
      </header>

      <!-- KPI strip ----------------------------------------------------- -->
      <section class="kpis" aria-label="Key performance indicators">
        <article class="kpi">
          <p class="kpi__label">OTD % (LINES)</p>
          <div class="kpi__number">70.0%</div>
          <p class="kpi__caption">August 2021 · EUR</p>
        </article>
        <article class="kpi">
          <p class="kpi__label">OTD % (LINES) PY</p>
          <div class="kpi__number">73.9%</div>
          <p class="kpi__caption">August 2020 · EUR</p>
        </article>
        <article class="kpi">
          <p class="kpi__label">YOY Δ (PTS)</p>
          <div class="kpi__number kpi__number--negative">-3.9 pts</div>
          <p class="kpi__caption">Current – Prior year</p>
        </article>
        <article class="kpi">
          <p class="kpi__label">OTD (LINES)</p>
          <div class="kpi__number">205 698</div>
          <p class="kpi__caption">+5 457 vs PY (200 241)</p>
        </article>
      </section>

      <!-- Body --------------------------------------------------------- -->
      <section class="body">
        <!-- Bar-by-account card ---------------------------------- -->
        <article class="card">
          <h2 class="card__title">OTD % (LINES) BY KEY ACCOUNT</h2>
          <div class="bars">
            <div class="bar">
              <div class="bar__label">Antarctic Corporation</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 83.9%"></div>
                <div class="bar__tick" style="left: 73.9%"></div>
              </div>
              <div class="bar__value">83.9% (PY 73.9%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Government Contract</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 70.8%"></div>
                <div class="bar__tick" style="left: 75.2%"></div>
              </div>
              <div class="bar__value">70.8% (PY 75.2%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Pioneering Systems</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 70.2%"></div>
                <div class="bar__tick" style="left: 75.1%"></div>
              </div>
              <div class="bar__value">70.2% (PY 75.1%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Black Flag Spaceships</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 69.2%"></div>
                <div class="bar__tick" style="left: 75.2%"></div>
              </div>
              <div class="bar__value">69.2% (PY 75.2%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Macrohard Systems</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 69.0%"></div>
                <div class="bar__tick" style="left: 73.7%"></div>
              </div>
              <div class="bar__value">69.0% (PY 73.7%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Sigil Interstellar</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 68.7%"></div>
                <div class="bar__tick" style="left: 74.5%"></div>
              </div>
              <div class="bar__value">68.7% (PY 74.5%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Private Contract</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 68.5%"></div>
                <div class="bar__tick" style="left: 73.0%"></div>
              </div>
              <div class="bar__value">68.5% (PY 73.0%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">No Key Account</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 68.3%"></div>
                <div class="bar__tick" style="left: 73.1%"></div>
              </div>
              <div class="bar__value">68.3% (PY 73.1%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Aminu Kano Navy</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 68.2%"></div>
                <div class="bar__tick" style="left: 74.1%"></div>
              </div>
              <div class="bar__value">68.2% (PY 74.1%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Andromeda Shipyards</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 67.5%"></div>
                <div class="bar__tick" style="left: 74.0%"></div>
              </div>
              <div class="bar__value">67.5% (PY 74.0%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Miller Space</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 67.3%"></div>
                <div class="bar__tick" style="left: 72.3%"></div>
              </div>
              <div class="bar__value">67.3% (PY 72.3%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Wel Walla Ship Repair</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 67.0%"></div>
                <div class="bar__tick" style="left: 72.6%"></div>
              </div>
              <div class="bar__value">67.0% (PY 72.6%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Elysium Aerospace</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 66.8%"></div>
                <div class="bar__tick" style="left: 73.0%"></div>
              </div>
              <div class="bar__value">66.8% (PY 73.0%)</div>
            </div>
            <div class="bar">
              <div class="bar__label">Supernova Spaceparts</div>
              <div class="bar__track">
                <div class="bar__fill" style="width: 66.1%"></div>
                <div class="bar__tick" style="left: 72.9%"></div>
              </div>
              <div class="bar__value">66.1% (PY 72.9%)</div>
            </div>
          </div>
          <div class="legend" aria-label="Chart legend">
            <span class="legend__item">
              <span class="legend__sw-bar"></span>
              <span>OTD % (Lines) — Aug 2021</span>
            </span>
            <span class="legend__item">
              <span class="legend__sw-tick"></span>
              <span>Prior year (Aug 2020)</span>
            </span>
            <span class="legend__item">
              <span class="legend__sw-tier legend__sw-tier--low"></span>
              <span>0-60%</span>
            </span>
            <span class="legend__item">
              <span class="legend__sw-tier legend__sw-tier--mid"></span>
              <span>60-80%</span>
            </span>
            <span class="legend__item">
              <span class="legend__sw-tier legend__sw-tier--high"></span>
              <span>80-100%</span>
            </span>
          </div>
        </article>

        <!-- Lowest-OTD table -------------------------------------- -->
        <article class="card">
          <h2 class="card__title">LOWEST OTD % ACCOUNTS (≥10 LINES)</h2>
          <div class="table">
            <div class="table__head">
              <div>#</div>
              <div>ACCOUNT NAME</div>
              <div>OTD %</div>
              <div class="col-otdl">OTD (LINES)</div>
            </div>
            <div class="table__row">
              <div class="table__rank">1</div>
              <div class="table__name">Błażej Kamieniarz</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 59.83%">35.9%</div>
                </div>
              </div>
              <div class="table__lines">14</div>
            </div>
            <div class="table__row">
              <div class="table__rank">2</div>
              <div class="table__name">Danielle Bailly</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 67.83%">40.7%</div>
                </div>
              </div>
              <div class="table__lines">11</div>
            </div>
            <div class="table__row">
              <div class="table__rank">3</div>
              <div class="table__name">The Ruby Black Hole</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 72.5%">43.5%</div>
                </div>
              </div>
              <div class="table__lines">10</div>
            </div>
            <div class="table__row">
              <div class="table__rank">4</div>
              <div class="table__name">Hagalbar&#39;s Carriers</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 74.0%">44.4%</div>
                </div>
              </div>
              <div class="table__lines">12</div>
            </div>
            <div class="table__row">
              <div class="table__rank">5</div>
              <div class="table__name">Rosalinda&#39;s Reparations</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 74.67%">44.8%</div>
                </div>
              </div>
              <div class="table__lines">13</div>
            </div>
            <div class="table__row">
              <div class="table__rank">6</div>
              <div class="table__name">Black Exports</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 75.33%">45.2%</div>
                </div>
              </div>
              <div class="table__lines">14</div>
            </div>
            <div class="table__row">
              <div class="table__rank">7</div>
              <div class="table__name">The Emerald Prospector</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 77.5%">46.5%</div>
                </div>
              </div>
              <div class="table__lines">20</div>
            </div>
            <div class="table__row">
              <div class="table__rank">8</div>
              <div class="table__name">Kelly&#39;s Planets</div>
              <div class="table__bar-cell">
                <div class="table__bar-track">
                  <div class="table__bar-fill" style="width: 79.33%">47.6%</div>
                </div>
              </div>
              <div class="table__lines">10</div>
            </div>
          </div>
        </article>
      </section>
    </main>
  </body>
</html>
