/* ---------------------------------------------------------------
   Geometry. These rules define the printed result and must stay
   in millimetres — never px — so output is independent of DPI.
   --------------------------------------------------------------- */

@page { size: A4 portrait; margin: 0; }

.sheet {
  position: relative;          /* anchors the 100 mm scale check */
  /* --bw / --bh / --cols are set by app.js from the chosen size */
  --bw: 85mm;
  --bh: 54mm;
  --cols: 2;
  box-sizing: border-box;
  width: 210mm;
  height: 297mm;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--bw));
  grid-auto-rows: var(--bh);
  justify-content: center;
  /* vertically centred unless a top margin is set, in which case the grid
     hangs from that margin so the first row clears the printer's dead zone */
  align-content: var(--valign, center);
  padding-top: var(--padtop, 0);
  gap: 0;                        /* adjacent badges share one cut line */
  background: #fff;
  overflow: hidden;
}

.badge {
  box-sizing: border-box;
  width: var(--bw);
  height: var(--bh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* logo sits at the top, name fills the rest */
  gap: calc(var(--bh) * 0.028);
  /* --safe keeps ink away from the badge edge without moving the badge, so a
     pre-cut sheet stays aligned with its die */
  padding: calc(var(--bh) * 0.074 + var(--safe, 0mm))
           calc(var(--bw) * 0.059 + var(--safe, 0mm))
           calc(var(--bh) * 0.093 + var(--safe, 0mm));
  text-align: center;
}

/* outline, not border: it draws inside the box and never adds layout,
   so neighbouring badges stay exactly one cut line apart */
.marks .badge { outline: 0.2mm dashed #9aa3ad; outline-offset: -0.1mm; }

.badge-logo {
  width: calc(var(--bw) * 0.40);
  max-height: calc(var(--bh) * 0.17);
  object-fit: contain;
  flex: none;
  align-self: flex-start;      /* top-left corner of the badge */
}

/* Everything the logo leaves behind. Name and role are centred together as
   one block, so the role sits directly under the name. */
.badge-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bh) * 0.028);
  overflow: hidden;
}

.badge-name-box {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.badge-name {
  font-size: 28pt;             /* a starting point; app.js fits it to the box */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: #123f6b;              /* matches the logo blue */
  text-wrap: balance;          /* split "First Surname" evenly over two lines */
  max-width: 100%;
}

.badge-sub {
  font-size: 10.5pt;
  flex: none;
  line-height: 1.2;
  color: #5b6672;
  white-space: nowrap;
  max-width: 100%;
}

.badge.empty > * { visibility: hidden; }

/* A 100 mm reference bar in the sheet margin. If the browser scales the page,
   this stops measuring 100 mm and the error is obvious before you cut. */
.sheet-ruler {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4mm;
  width: 100mm;
  height: 2mm;
  border: 0.2mm solid #9aa3ad;
  border-top: 0;
  color: #9aa3ad;
  font-size: 6pt;
  line-height: 1;
}

.sheet-ruler span {
  position: absolute;
  left: 50%;
  bottom: 2.4mm;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 1mm;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- */

@media print {
  .panel { display: none !important; }
  html, body { margin: 0; padding: 0; background: #fff; }
  .preview { display: block; margin: 0; padding: 0; }
  .sheet { break-after: page; page-break-after: always; box-shadow: none; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* "Keep every name on one line": shrink instead of wrapping, so a dense sheet
   reads as a regular grid rather than a mix of one- and two-line badges. */
.oneline .badge-name { white-space: nowrap; }