/* Screen chrome uses the Atlas identity — warm paper, one oceanic accent,
   serif display against quiet sans text. The sheet below it is not part of
   that identity: it is paper, so it stays white with black ink in both
   colour schemes and in print. */

:root {
  --paper: #fbfaf8;
  --raised: #ffffff;
  --quiet: #f3f0ea;
  --ink: #1b1917;
  --strong-ink: #100f0d;
  --muted-ink: #6b6560;
  --faint-ink: #6e6862;
  --hairline: #e8e2d9;
  --strong-hairline: #d8d0c3;
  --accent: #0e7490;
  --accent-strong: #0b5c73;
  --accent-ink: #ffffff;
  --accent-wash: rgb(14 116 144 / 0.10);
  --warning: #944306;
  --warning-wash: rgb(148 67 6 / 0.14);
  --display: ui-serif, Georgia, "Times New Roman", serif;
  --text: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --badge-face: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  /* The gateway may dock a bar over the bottom of the page. */
  --dock-clearance: 96px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b0d10;
    --raised: #15181d;
    --quiet: #14171c;
    --ink: #ecebe8;
    --strong-ink: #ffffff;
    --muted-ink: #a1a6ad;
    --faint-ink: #888d94;
    --hairline: #24282f;
    --strong-hairline: #333944;
    --accent: #34d0e6;
    --accent-strong: #6fe0f0;
    --accent-ink: #06222b;
    --accent-wash: rgb(52 208 230 / 0.12);
    --warning: #f0b072;
    --warning-wash: rgb(240 176 114 / 0.16);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

/* ---------------------------------------------------------- masthead */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 24px 40px 22px;
  border-bottom: 1px solid var(--hairline);
}

.masthead h1 {
  max-width: 720px;
  margin: 0;
  color: var(--strong-ink);
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.lede {
  max-width: 640px;
  margin: 8px 0 0;
  color: var(--muted-ink);
  font-size: 13px;
  line-height: 1.5;
}

.chip {
  align-self: start;
  min-width: 232px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--raised);
}

.chip small {
  display: block;
  margin-bottom: 5px;
  color: var(--faint-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chip strong { display: block; font-size: 14px; }
.chip span { display: block; margin-top: 3px; color: var(--muted-ink); font-size: 11px; }

/* ---------------------------------------------------------- controls */

.maker {
  display: grid;
  grid-template-columns: minmax(330px, 420px) 1fr;
  min-height: calc(100vh - 120px);
}

/* A sheet is wider than a narrow column, so the tracks must be free to
   shrink below their content. Without this the preview column grows to a
   full-size sheet and the page scrolls sideways. */
.maker > * { min-width: 0; }

.controls {
  padding: 28px 32px var(--dock-clearance);
  border-right: 1px solid var(--hairline);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  color: var(--faint-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.control-row + .section-head { margin-top: 26px; }

/* Visible to a screen reader, invisible on screen: the numbered section
   head already labels the field for a sighted reader. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.count { color: var(--accent-strong); }
.count b { font-size: 12px; }

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--faint-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

textarea {
  width: 100%;
  min-height: 190px;
  padding: 14px 15px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--raised);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
}

.helper { margin: 10px 0 26px; color: var(--faint-ink); font-size: 12px; line-height: 1.5; }
.helper b { color: var(--ink); }

.control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.control-row + .control { margin-top: 14px; }

/* The browser's own chevron hugs the control's right edge, so the
   select draws its own: appearance none, room on the right, and a
   chevron inset from the corner in the muted ink. */
select {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 11px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 13px center;
  color: var(--ink);
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a1a6ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}

/* Small, Large, and the slider between them share the row a select would
   take, so the setup section keeps one rhythm. */
.slider { display: flex; align-items: center; gap: 10px; height: 42px; }
.slider span { color: var(--faint-ink); font-size: 11px; }
.slider input { flex: 1; min-width: 0; margin: 0; accent-color: var(--accent); }

.checks { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 22px; }

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-ink);
  font-size: 12px;
}

.check input { width: 15px; height: 15px; accent-color: var(--accent); }

button.primary {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.08s ease;
}

button.primary:hover { background: var(--accent-strong); }
button.primary:active { transform: translateY(1px); }

/* The source row's own action: present, but never competing with the
   print button below it. */
button.secondary {
  width: 100%;
  min-height: 40px;
  margin-top: 14px;
  border: 1px solid var(--strong-hairline);
  border-radius: 11px;
  background: var(--raised);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

button.secondary:enabled:hover { border-color: var(--accent); color: var(--accent-strong); }
button.secondary:disabled { opacity: 0.55; cursor: default; }

/* ---------------------------------------------------------- source */

/* An installed copy fills this row from its connector. The public site
   leaves it empty and hidden. */
.source { margin-bottom: 26px; }
.source .helper { margin: 10px 0 0; }

/* The event name is long, so the picker takes the whole column and the
   filter shares its row with the button, sitting on the same baseline. */
.source .control-row { align-items: end; }
.source button.secondary { min-height: 42px; margin-top: 0; }

:where(button, select, textarea, input):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.printnote {
  margin: 14px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--accent);
  color: var(--faint-ink);
  font-size: 11px;
  line-height: 1.6;
}

/* ---------------------------------------------------------- preview */

.preview {
  padding: 28px 40px var(--dock-clearance);
  background: var(--quiet);
}

.preview-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.preview-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.preview-head span { color: var(--faint-ink); font-size: 11px; }

.warning {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--warning);
  border-radius: 10px;
  background: var(--warning-wash);
  color: var(--warning);
  font-size: 12px;
  line-height: 1.5;
}

.empty {
  max-width: 420px;
  padding: 48px 40px;
  border: 1px dashed var(--strong-hairline);
  border-radius: 12px;
  color: var(--muted-ink);
  font-size: 13px;
  line-height: 1.6;
}

.sheets {
  --preview-scale: 1;
  overflow: hidden;
  /* Room for the sheet-number chit each sheet hangs above itself. */
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: flex-start;
}

/* The frame reserves the scaled size of the sheet it holds, so scaling the
   preview to fit its column never leaves a gap under each sheet. */
.sheet-frame {
  width: calc(612pt * var(--preview-scale));
  height: calc(792pt * var(--preview-scale));
  flex: 0 0 auto;
}

/* ------------------------------------------------- the printed sheet */

.sheet {
  position: relative;
  width: 612pt;
  height: 792pt;
  background: #fff;
  color: #000;
  font-family: var(--badge-face);
  transform: scale(var(--preview-scale));
  transform-origin: top left;
}

@media screen {
  .sheet { box-shadow: 0 10px 28px rgb(27 25 23 / 0.12), 0 1px 0 rgb(27 25 23 / 0.06); }
  .sheet::after {
    /* sheet number chit, screen only */
    content: attr(data-num);
    position: absolute;
    top: -24px;
    left: 0;
    color: #6b6560;
    font-size: 11px;
    letter-spacing: 0.18em;
  }
}

.badge { position: absolute; overflow: visible; }

@media screen {
  .badge { outline: 1px dashed rgb(14 116 144 / 0.35); } /* die-cut guides, never printed */
}

/* Each line bleeds past the label on both sides so a long name centres on
   the label. overflow:hidden guards against print shrink-to-fit, and the
   bottom padding keeps descenders (g j p q y) out of the clip. The
   line-height is LINE_HEIGHT in app.js, which stacks the lines from it. */
.line {
  position: absolute;
  overflow: hidden;
  padding-bottom: 0.35em;
  color: #000;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}

.first { font-weight: 700; }
.last { font-weight: 700; }

.subtitle {
  color: #4a4a4a;
  font-weight: 500;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------- print */

@page { size: 8.5in 11in; margin: 0; }

@media print {
  body { background: #fff; }
  .masthead, .controls, .preview-head, .warning, .empty, .source { display: none !important; }
  /* The preview's screen background would otherwise print as a full-page
     colour field, because print-color-adjust keeps every fill. */
  .maker, .preview { display: block; padding: 0; margin: 0; background: #fff; }
  .sheets { display: block; padding: 0; }
  .sheet-frame { width: auto; height: auto; }
  .sheet {
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    transform: none;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------- narrow */

/* Scoped to screen: a printed page is narrower than 900px, and a width
   rule that leaked into print would move every badge off its die-cut. */
@media screen and (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; padding: 20px 20px 18px; }
  .maker { grid-template-columns: 1fr; }
  .controls { padding: 22px 20px 28px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .preview { padding: 22px 20px var(--dock-clearance); }
}