/* The hero ledger figure's chrome (Ledger redesign, spec §6.2).

   This file used to carry the warm-light product frames — window, document,
   ticket, terminal — plus the floating cards that broke their edges. All of
   them are retired: under the Ledger design the product UI is not *depicted
   inside a frame*, it IS the hero image, so exactly one framed surface is
   left on the page and this file describes it. test/template.test.js asserts
   the retired frame classes never come back as decoration.

   The file stays linked from template.html because the boundary it draws is
   still worth keeping: the figure's box lives here, the table inside it lives
   in style.css. */

/* The page's ONE floating surface, and therefore the page's one shadow. Navy
   at 8%, not black — a black shadow on this paper reads as dirt, and
   test/style.test.js fails any rgba(0, 0, 0, …) in either stylesheet. Every
   other card on the page is held by a 1px hairline instead. */
.hero__ledger {
  position: relative;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  /* The table inside has a minimum width the three narrowest phones cannot
     give it. `hidden` would silently cut the STATUS column off at the card's
     rounded edge — the worst outcome, because the reader cannot tell anything
     is missing. `auto` on the axis that can overflow lets the card scroll
     inside itself instead, which is the same rule the bands follow, while the
     y axis stays clipped so the radius still holds. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 0 8px 40px rgba(11, 58, 110, 0.08);
}

/* The honesty channel, kept visible (spec §6.2): the hero table is invented
   sample data, and the page says so on the artwork itself rather than only in
   a build gate nobody reading the page can see. A dashed amber rule across the
   head of the figure carrying a mono label, in the same status colour the
   roadmap chip uses — one visual language for "not the real thing yet" in both
   places. The strip is absolutely placed and the figure reserves its height as
   padding, so it can never sit on top of the table's column heads. */
.hero__ledger[data-provisional] {
  padding-top: 26px;
}

.hero__ledger[data-provisional]::after {
  content: 'PREVIEW';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 26px;
  padding: 0 14px;
  line-height: 25px;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-partial);
  background: var(--color-partial-tint);
  border-bottom: 1px dashed var(--color-partial-data);
}