/* 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 28px;
  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 28px;
  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;
}

/* ---------------------------------------------------------- about */

/* The footer explains where the page came from. It is screen chrome only:
   the print rules below hide it, so the printed pages are the sheets and
   nothing else. It is also the page's last block, so it carries the
   clearance for the gateway's dock. */
.about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding: 40px 40px var(--dock-clearance);
  border-top: 1px solid var(--hairline);
}

.about h2 {
  margin: 0 0 12px;
  color: var(--strong-ink);
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.about p {
  max-width: 560px;
  margin: 0 0 14px;
  color: var(--muted-ink);
  font-size: 13px;
  line-height: 1.6;
}

.about .about-lede { color: var(--ink); font-size: 15px; font-weight: 600; }

.about .about-fine { margin: 18px 0 0; font-size: 12px; }

.about a { color: var(--accent-strong); }

/* A prompt is something to hand to an agent verbatim, so it keeps every
   line break and shows the text a copy button copies. */
.prompt {
  max-width: 560px;
  margin: 0 0 14px;
  padding: 14px 15px;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--raised);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

button.copy {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--strong-hairline);
  border-radius: 11px;
  background: var(--raised);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

button.copy:hover { border-color: var(--accent); color: var(--accent-strong); }

.about-details { max-width: 560px; margin-top: 14px; }
.about-details summary { color: var(--faint-ink); font-size: 12px; cursor: pointer; }
.about-details .prompt { margin-top: 10px; }

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

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

@media print {
  body { background: #fff; }
  .masthead, .controls, .preview-head, .warning, .empty, .source, .about { 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 28px; }
  .about { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px var(--dock-clearance); }
}