/* ============================================================
   EMBER print base — shared chrome for every paper artifact.
   Requires tokens/ember.css. Import both, then add the artwork:
     <link rel="stylesheet" href="../tokens/ember.css">
     <link rel="stylesheet" href="../print/print-base.css">

   Each template keeps its own @page size (custom properties are
   not allowed inside @page) and may set, on :root:
     --stage-zoom   on-screen preview scale          (default 1)
     --label-size   mono label size, in pt           (default 7pt)
     --print-bg     page color when printed          (default --bg)

   Markup contract:
     .screen-bar            fixed preview bar, never printed
     .stage > .pgwrap       one wrapper per printed page
       > .artifact          the page itself (true mm size)
       + .caption           screen-only caption under it
     .artifact.bleed        draws the trim line 3mm in (screen only)
   ============================================================ */

:root {
  --desk-shadow: rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
  margin: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body {
  font-family: var(--font-grot);
  background: var(--desk);
  color: var(--ink);
}

/* Annotated engineering — mono metadata, sized in pt for paper. */
.label {
  font-family: var(--font-mono);
  font-size: var(--label-size, 7pt);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---- screen-only preview chrome ------------------------------- */

.screen-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.stage {
  padding: 84px 24px 48px;
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

@media screen {
  .stage {
    zoom: var(--stage-zoom, 1);
  }
}

.pgwrap {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.caption {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--edge-faint);
}

.artifact {
  position: relative;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--desk-shadow);
}

/* trim line, 3mm in from the bleed edge — azure, the color of
   technical marks. Screen only. */
.bleed::before {
  content: "";
  position: absolute;
  inset: var(--print-bleed);
  border: 0.2mm dashed var(--azure);
  opacity: 0.55;
  pointer-events: none;
  z-index: 5;
}

/* ---- print: true size, no chrome ------------------------------ */

@media print {
  body {
    background: var(--print-bg, var(--bg));
  }

  .screen-bar,
  .caption {
    display: none;
  }

  .stage {
    padding: 0;
    zoom: 1;
    display: block;
  }

  .pgwrap {
    display: contents;
  }

  .artifact {
    box-shadow: none;
  }

  .bleed::before {
    display: none;
  }

  .pgwrap + .pgwrap > .artifact {
    break-before: page;
  }
}