<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" role="img"
     aria-label="A request register showing RFIs and submittals with their status, owner and due date, and the approval route below">
  <defs>
    <pattern id="reqGrid" width="40" height="40" patternUnits="userSpaceOnUse">
      <path d="M40 0H0v40" fill="none" stroke="#e3e9f0" stroke-width="1"/>
    </pattern>
    <filter id="reqShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="10" stdDeviation="18" flood-color="#071a33" flood-opacity=".10"/>
    </filter>
    <style>
      .s  { font-family: 'Helvetica Neue', Arial, sans-serif; }
      .m  { font-family: Menlo, 'DejaVu Sans Mono', monospace; letter-spacing: .08em; }
      .ttl{ font-weight: 600; fill: #071a33; }
      .row{ fill: #071a33; }
      .met{ fill: #66798d; }
      .sub{ fill: #8b9bab; }
    </style>
  </defs>

  <rect width="800" height="600" fill="#f7f9fc"/>
  <rect width="800" height="600" fill="url(#reqGrid)" opacity=".7"/>

  <g filter="url(#reqShadow)">
    <rect x="64" y="56" width="672" height="386" rx="10" fill="#fff" stroke="#e3e9f0"/>
  </g>

  <!-- header -->
  <text class="s ttl" x="96" y="100" font-size="21">Requests</text>
  <text class="m sub" x="704" y="98" font-size="11" text-anchor="end">12 OPEN · 3 OVERDUE</text>
  <line x1="64" y1="122" x2="736" y2="122" stroke="#e3e9f0"/>

  <!-- column labels -->
  <g class="m sub" font-size="9">
    <text x="96" y="148">REFERENCE</text>
    <text x="408" y="148">WITH</text>
    <text x="524" y="148">DUE</text>
    <text x="704" y="148" text-anchor="end">STATUS</text>
  </g>

  <!-- rows -->
  <g>
    <!-- overdue -->
    <rect x="96" y="162" width="608" height="58" rx="5" fill="#fdf4f3" stroke="#d65b4c" stroke-opacity=".35"/>
    <rect x="96" y="162" width="3" height="58" fill="#d65b4c"/>
    <text class="m met" x="118" y="184" font-size="10">RFI-022</text>
    <text class="s row" x="118" y="204" font-size="15" font-weight="600">Duct clash, level 3 corridor</text>
    <text class="s met" x="408" y="197" font-size="13">Consultant</text>
    <text class="m" x="524" y="197" font-size="12" fill="#d65b4c">04 MAR</text>
    <rect x="612" y="180" width="78" height="22" rx="3" fill="#d65b4c"/>
    <text class="m" x="651" y="195" font-size="9" text-anchor="middle" fill="#fff">OVERDUE</text>

    <!-- in review -->
    <line x1="96" y1="244" x2="704" y2="244" stroke="#e3e9f0" stroke-dasharray="3 3"/>
    <text class="m met" x="118" y="266" font-size="10">RFI-024</text>
    <text class="s row" x="118" y="286" font-size="15">Rebar spacing at grid C</text>
    <text class="s met" x="408" y="279" font-size="13">Consultant</text>
    <text class="m met" x="524" y="279" font-size="12">12 MAR</text>
    <rect x="612" y="262" width="78" height="22" rx="3" fill="#fdf2de"/>
    <text class="m" x="651" y="277" font-size="9" text-anchor="middle" fill="#8a6412">IN REVIEW</text>

    <!-- open -->
    <line x1="96" y1="310" x2="704" y2="310" stroke="#e3e9f0" stroke-dasharray="3 3"/>
    <text class="m met" x="118" y="332" font-size="10">SUB-011</text>
    <text class="s row" x="118" y="352" font-size="15">Waterproofing submittal</text>
    <text class="s met" x="408" y="345" font-size="13">Subcontractor</text>
    <text class="m met" x="524" y="345" font-size="12">18 MAR</text>
    <rect x="612" y="328" width="78" height="22" rx="3" fill="#fff" stroke="#0b2b4d" stroke-opacity=".4"/>
    <text class="m" x="651" y="343" font-size="9" text-anchor="middle" fill="#0b2b4d">OPEN</text>

    <!-- approved -->
    <line x1="96" y1="376" x2="704" y2="376" stroke="#e3e9f0" stroke-dasharray="3 3"/>
    <text class="m met" x="118" y="398" font-size="10">RFI-023</text>
    <text class="s row" x="118" y="418" font-size="15">Slab opening, pump room</text>
    <text class="s met" x="408" y="411" font-size="13">Owner</text>
    <text class="m met" x="524" y="411" font-size="12">CLOSED</text>
    <rect x="612" y="394" width="78" height="22" rx="3" fill="#e6f5ee"/>
    <text class="m" x="651" y="409" font-size="9" text-anchor="middle" fill="#0f6e4d">APPROVED</text>
  </g>

  <!-- approval route -->
  <rect x="64" y="466" width="672" height="102" rx="10" fill="#071a33"/>
  <text class="m" x="96" y="496" font-size="10" fill="#f5b335">APPROVAL ROUTE · RFI-024</text>
  <g transform="translate(96 524)">
    <line x1="0" y1="0" x2="520" y2="0" stroke="#ffffff" stroke-opacity=".22"/>
    <!-- step 1 done -->
    <circle cx="0" cy="0" r="8" fill="#159669"/>
    <path d="M-3.5 0 -1 2.5 3.5 -2.5" fill="none" stroke="#071a33" stroke-width="1.6" stroke-linecap="round"/>
    <text class="s" x="0" y="26" font-size="12" fill="#cfdce7" text-anchor="middle">Contractor</text>
    <!-- step 2 current -->
    <circle cx="260" cy="0" r="10" fill="#f5b335"/>
    <text class="s" x="260" y="26" font-size="12" fill="#ffffff" text-anchor="middle" font-weight="600">Consultant</text>
    <!-- step 3 waiting -->
    <circle cx="520" cy="0" r="8" fill="#071a33" stroke="#ffffff" stroke-opacity=".35" stroke-width="1.5"/>
    <text class="s" x="520" y="26" font-size="12" fill="#8fa3b6" text-anchor="middle">Owner</text>
  </g>
</svg>
