/* Influencer PDF (one A4 page, 794 CSS px wide). Uses the same tokens and fonts as the app, but fixed sizes:
   it is captured to a PDF, so nothing here may depend on the viewport. */
.tp-doc {
  width: 794px;
  /* A hair under A4 (1123px): at exactly 1123px rounding spills a blank second page into the PDF. */
  min-height: 1120px;
  display: flex;
  flex-direction: column;
  background: var(--tp-bg);
  color: var(--tp-text);
  font-family: var(--tp-body);
  font-size: 15px;
  line-height: 1.55;
}

.tp-doc-band {
  position: relative;
  overflow: hidden;
  background: var(--tp-night);
  color: #fff;
  padding: 34px 56px 38px;
}
.tp-doc-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tp-doc-brand { position: relative; display: flex; align-items: center; gap: 12px; font: 800 28px/1 var(--tp-display); letter-spacing: -.02em; }
.tp-doc-brand img { display: block; }
.tp-doc-kicker { position: relative; margin-top: 30px; font: 700 12px/1 var(--tp-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tp-accent-light); }
.tp-doc-title { position: relative; margin: 12px 0 0; font: 800 44px/1.1 var(--tp-display); letter-spacing: -.03em; }

.tp-doc-body { flex: 1; padding: 28px 56px 18px; }
.tp-doc-intro { margin: 0 0 22px; font-size: 16.5px; color: var(--tp-text-muted-3); }

.tp-doc-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: 20px;
  box-shadow: var(--tp-lift);
  overflow: hidden;
}
.tp-doc-ticket-main { padding: 24px 28px; }
.tp-doc-ticket-side { padding: 24px 28px; background: var(--tp-surface-2); border-left: 2px dashed var(--tp-border-4); }
.tp-doc-label { font: 700 11px/1 var(--tp-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tp-text-muted); }
.tp-doc-code { margin-top: 10px; font: 800 40px/1.1 var(--tp-display); letter-spacing: .04em; color: var(--tp-night); overflow-wrap: anywhere; }
.tp-doc-link { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--tp-primary); overflow-wrap: anywhere; }
.tp-doc-value { margin-top: 10px; font: 800 36px/1.1 var(--tp-display); letter-spacing: -.02em; color: var(--tp-success); }
.tp-doc-value.is-second { margin-top: 16px; font-size: 30px; }
.tp-doc-note { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--tp-text-muted); }

.tp-doc-h2 { margin: 24px 0 10px; font: 800 19px/1.2 var(--tp-display); letter-spacing: -.01em; color: var(--tp-night); }
.tp-doc-text { margin: 0; color: var(--tp-text-muted-3); }

.tp-doc-steps { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 12px; }
.tp-doc-steps::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; border-left: 2px dashed var(--tp-border-4); }
.tp-doc-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; }
.tp-doc-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tp-night); color: #fff; font: 800 15px/1 var(--tp-display); }
.tp-doc-steps strong { display: block; font: 700 15.5px/1.3 var(--tp-display); color: var(--tp-night); }
.tp-doc-steps p { margin: 2px 0 0; color: var(--tp-text-muted-3); font-size: 14.5px; }

.tp-doc-terms { margin: 0; padding-left: 20px; color: var(--tp-text-muted-3); font-size: 14.5px; }
.tp-doc-terms li + li { margin-top: 6px; }
.tp-doc-terms li::marker { color: var(--tp-accent); }

.tp-doc-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 56px;
  padding: 16px 0 24px;
  border-top: 1px solid var(--tp-border-3);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tp-text-muted);
}

/* Admin editor: form on the left, scaled-down live preview on the right. */
.tp-docedit { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.tp-docedit-preview { overflow: hidden; border-radius: 16px; border: 1px solid var(--tp-border); background: var(--tp-bg-sunken); }
.tp-docedit-scale { width: 794px; transform-origin: top left; }
@media (max-width: 960px) { .tp-docedit { grid-template-columns: minmax(0, 1fr); } }