/* =============================================================================
   DOCUMENT FRAME STYLES
   Loaded only inside demo iframes — not on the main site.
   Matches the site's press palette: paper surround, ink hairlines, mono chrome.
   ============================================================================= */

/* Print dimensions — must match page-width × page-height on <stapled-doc> */
@page {
  size: 7in 9in;
  margin: 0;
}

/* Document frames always look like printed paper */
:root { color-scheme: light; }

html { background: #eae7e2 !important; }

body {
  margin: 0;
  padding: 0 0 2rem;
  background: #eae7e2;
  color: #201e1d;
}

/* Default header/footer layout for all demo documents */
stapled-doc page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.75rem;
  border-bottom: 1px solid #d9d5cf;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6a65;
}

stapled-doc page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.75rem;
  border-top: 1px solid #d9d5cf;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #6f6a65;
}

/* ── Explicit mode ─────────────────────────────────────────────────────────── */

.sample-staple {
  --sp-frame-shadow: 0 2px 3px rgba(32, 30, 29, .10), 0 14px 34px rgba(32, 30, 29, .14);
}

.sample-staple s-page { background: #fff; }

/* ── Flow modes ────────────────────────────────────────────────────────────── */

.sample-papyrus,
.sample-flatland {
  background: #fff;
  box-shadow: 0 2px 3px rgba(32, 30, 29, .10), 0 14px 34px rgba(32, 30, 29, .14);
}

/* ── Print overrides ───────────────────────────────────────────────────────── */

@media print {
  body {
    background: #fff !important;
    padding: 0 !important;
  }
}