Record full page

<main class="stack" data-gap="lg">
  <p class="hm-demo-muted" style="margin:0"><a href="../#drawer">← Gallery · Drawer</a> · full page (not a widened drawer)</p>
  <div class="cluster" data-justify="between">
    <div>
      <div class="card-label">Asset</div>
      <h1 style="margin:0.25rem 0 0;letter-spacing:-0.02em">Aurora Substation</h1>
    </div>
    <div class="cluster" data-gap="sm"><span class="badge" data-tone="success"><span class="badge-icon"><svg class="icon" aria-hidden="true"><use href="#i-circle-check"/></svg></span>Online</span><button type="button" class="button" data-variant="outline"><svg class="icon" aria-hidden="true"><use href="#i-clipboard-list"/></svg>Work orders</button><button type="button" class="button" data-variant="primary">Edit asset</button></div>
  </div>
  <div class="auto-grid" style="--grid-min:11rem">
    <div class="card card-body">
      <div class="card-label">Region</div>
      <div class="card-value">North</div>
      <div class="card-delta">Grid cluster A</div>
    </div>
    <div class="card card-body">
      <div class="card-label">Load</div>
      <div class="card-value">82%</div>
      <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-trending-up"/></svg> +4% today</div>
    </div>
    <div class="card card-body">
      <div class="card-label">Open WOs</div>
      <div class="card-value">2</div>
      <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-triangle-alert"/></svg> needs dispatch</div>
    </div>
    <div class="card card-body">
      <div class="card-label">Commissioned</div>
      <div class="card-value" style="font-size:var(--text-xl)">2019</div>
      <div class="card-delta">Last inspection 14 June</div>
    </div>
  </div>
  <div class="tabs" data-tabs>
    <div class="tabs__list" aria-label="Record sections"><button type="button" class="tabs__tab" aria-current="true" data-tab-target="rec-overview">Overview</button><button type="button" class="tabs__tab" data-tab-target="rec-activity">Activity</button><button type="button" class="tabs__tab" data-tab-target="rec-related">Related</button></div>
    <div id="rec-overview" class="tabs__panel">
      <div class="stack" data-gap="md">
        <div class="alert" data-tone="warning" role="alert">
          <span class="alert__icon"><svg class="icon" aria-hidden="true"><use href="#i-triangle-alert"/></svg></span>
          <div class="alert__body">
            <div class="alert__title">Two open work orders</div>
            <div class="alert__description">Full page owns the complete record shell — history, related tables, and edit flows that do not fit a peek drawer.</div>
          </div>
        </div>
        <div class="stack" data-gap="sm">
          <div>
            <div class="card-label">Primary contact</div>
            <div>Maya Reyes · Operations</div>
          </div>
          <div>
            <div class="card-label">Feeder</div>
            <div>N-GRID-14 · 33 kV</div>
          </div>
        </div>
      </div>
    </div>
    <div id="rec-activity" class="tabs__panel" hidden>
      <p class="hm-demo-muted">Inspection notes, status changes, and work-order events land here on the full page — not in the peek fragment.</p>
    </div>
    <div id="rec-related" class="tabs__panel" hidden>
      <p class="hm-demo-muted">Related assets, contracts, and tickets would compose as list-region / grid guests on this route.</p>
    </div>
  </div>
</main>