Everything you can click

The solid .btn is the only place the accent becomes a fill, so a screen gets one of them. Everywhere else the accent is a hairline or a text colour. .ghost is the workhorse.

A field is a recessed panel with a hairline border. Focus does not draw a browser ring — it lifts the border to the accent, and the caret is already cyan. That is enough, and it stays inside the 1px rule.

The nav at the top of this page is the live specimen — a sticky 64px band with the rails on its inner element, a hover-driven popover on each menu, and the theme toggle at the right. Below 820px it is replaced wholesale by the drawer.

Four ways to switch, in decreasing order of how much room they take. All four are driven by the same data-tab / data-panel pair in journeymro.js — the class only decides how it looks.

A card is the frame's hairline again. An empty media area gets a diagonal hatch rather than a flat fill — it reads as "space reserved" instead of "nothing here", which matters when the real content is a chart that has not loaded.

A dialog is a panel of the frame that happens to float: same hairline, no radius, and rules running between its sections rather than boxes around them. Escape, the backdrop and any [data-dialog-close] all close it; focus returns to whatever opened it.

<button class="btn ghost" data-dialog-open="dlg-demo">Open dialog</button>

<div class="svc7-overlay" id="dlg-demo" hidden>
  <div class="svc7-overlay-dim"></div>
  <div class="svc7-dialog" role="dialog" aria-modal="true">
    <div class="svc7-dialog-head">
      <span class="svc7-dialog-title">Title</span>
      <button class="svc7-dialog-close" data-dialog-close aria-label="Close">…</button>
    </div>
    <div class="svc7-dialog-body">…</div>
    <div class="svc7-dialog-foot">
      <button class="btn ghost" data-dialog-close>Cancel</button>
      <button class="btn">Confirm</button>
    </div>
  </div>
</div>