<header class="med-header">
  <div class="med-header__strip"></div>
  <div class="med-header__inner">
    <div class="med-header__brand">
      <div class="med-header__logo">M</div>
      <div class="med-header__meta">
        <div class="med-header__eyebrow">Weekly Status · W19</div>
        <h1 class="med-header__title">Operations Update</h1>
      </div>
    </div>
    <div class="med-header__aside">
      <span class="med-pill med-pill--ok">Live</span>
    </div>
  </div>
</header>

<span class="med-pill med-pill--ok">On track</span>
<span class="med-pill med-pill--warn">A rischio</span>
<span class="med-pill med-pill--danger">Bloccato</span>
<span class="med-pill med-pill--neutral">Da iniziare</span>
<span class="med-pill med-pill--brand">In review</span>

<article class="med-stat med-stat--accent">
  <div class="med-stat__label">Visite completate</div>
  <div class="med-stat__value">1.247</div>
  <div class="med-stat__trend med-stat__trend--up">
    <span>+12,4% vs settimana scorsa</span>
  </div>
</article>

<table class="med-table">
  <thead>
    <tr>
      <th>Iniziativa</th><th>Owner</th>
      <th class="med-table__num">Visite/sett</th><th>Stato</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="med-table__primary">Espansione Milano Nord</td>
      <td class="med-table__muted">Sara C.</td>
      <td class="med-table__num">312</td>
      <td><span class="med-pill med-pill--ok">On track</span></td>
    </tr>
  </tbody>
</table>

<ol class="med-timeline">
  <li class="med-timeline__item med-timeline__item--done">
    <span class="med-timeline__time">Q1 2026 · Gennaio</span>
    <span class="med-timeline__title">Lancio app paziente v1</span>
    <span class="med-timeline__desc">Onboarding di 800 pazienti.</span>
  </li>
  <li class="med-timeline__item med-timeline__item--current">...</li>
  <li class="med-timeline__item">...</li>
</ol>

<details class="med-collapse">
  <summary class="med-collapse__summary">
    <span>Domanda?</span>
    <svg class="med-collapse__chevron" ...></svg>
  </summary>
  <div class="med-collapse__body">Risposta...</div>
</details>

<div class="med-compare">
  <div class="med-compare__col">...</div>
  <div class="med-compare__col med-compare__col--featured">
    <div class="med-compare__head">
      <div class="med-compare__title">Opzione</div>
    </div>
    <ul class="med-compare__rows">
      <li class="med-compare__row">
        <span class="med-compare__row-label">Effort</span>
        <span class="med-compare__row-value">Medio</span>
      </li>
    </ul>
  </div>
</div>

<div class="med-section-head">
  <span class="med-section-head__num">02</span>
  <h2 class="med-section-head__title">Performance operativa</h2>
  <span class="med-section-head__count">4 KPI · 1 alert</span>
</div>