/* ==========================================================================
   Signing page — e-signature flow for Revenue Agent Link / PAYE A1
   Self-contained component driven by the signature_request payload.
   Serves business web, personal web, and personal mobile.
   ========================================================================== */

.sign { max-width: 540px; margin: 0 auto; padding: 48px 24px 64px; }

.sign__logo { display: flex; justify-content: center; padding-bottom: 40px; }
.sign__logo img { width: 96px; height: 40px; }

/* Step card — the white card that holds each step of the flow */
.sign__card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-dropdown);
}
@media (max-width: 480px) { .sign__card { padding: 32px 20px; } }

.sign__title {
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.sign__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
  margin: 0 0 28px;
}

/* PDF embed — scrollable, readable on mobile */
.sign__pdf {
  width: 100%;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  overflow: hidden;
  margin-bottom: 28px;
}
.sign__pdf iframe,
.sign__pdf object {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}
@media (max-width: 480px) {
  .sign__pdf iframe,
  .sign__pdf object { height: 320px; }
}
.sign__pdf-open {
  margin: 0;
  padding: 10px 14px;
  font-size: var(--text-sm);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}
.sign__pdf-open a { color: var(--color-text); }
.sign__loading { text-align: center; color: var(--color-text-muted); margin: 0; }
/* "View the document": the PDF folded away, used inline (Home's to-do row) */
.sign__view {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin: 0 0 20px;
  font: inherit; font-size: var(--text-sm); color: var(--color-text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sign__view:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; border-radius: 2px; }
.sign__pdf-fallback {
  padding: 24px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sign__pdf-fallback a { color: var(--color-text); font-weight: var(--weight-medium); }

/* Name field */
.sign__name-field { margin-bottom: 24px; }
.sign__name-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.sign__name-input:focus { outline: none; border-color: var(--color-text); }
.sign__name-input::placeholder { color: var(--color-border-strong); font-weight: var(--weight-regular); }

/* Consent checkbox */
.sign__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.sign__consent input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-brand-primary);
  cursor: pointer;
}
.sign__consent-label {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}

/* OTP code input — 6 individual boxes */
.sign__otp {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
.sign__otp-digit {
  width: 52px;
  height: 52px;
  text-align: center;
  font-size: 24px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  caret-color: var(--color-text);
}
.sign__otp-digit:focus { outline: none; border-color: var(--color-text); }
@media (max-width: 380px) {
  .sign__otp-digit { width: 44px; height: 44px; font-size: 20px; }
  .sign__otp { gap: 6px; }
}

/* Action buttons */
.sign__actions { display: flex; flex-direction: column; gap: 12px; }
.sign__actions .btn { width: 100%; }

/* Resend link */
.sign__resend {
  text-align: center;
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sign__resend button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-text); font-weight: var(--weight-medium);
  font-size: inherit; text-decoration: underline;
}
.sign__resend button:disabled {
  color: var(--color-border-strong);
  cursor: not-allowed;
  text-decoration: none;
}

/* Error + info messages */
.sign__error {
  background: var(--color-danger-bg);
  border: var(--border-width) solid var(--color-danger-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: var(--text-sm);
  color: var(--color-danger);
  line-height: 1.5;
  margin-bottom: 20px;
}
.sign__info {
  background: var(--color-info-bg);
  border: var(--border-width) solid var(--color-info-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: var(--text-sm);
  color: var(--color-info);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Confirmation state */
.sign__done-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.sign__done-icon svg {
  width: 56px; height: 56px;
  color: var(--color-success);
}

.sign__done-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-regular);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 8px;
}

.sign__done-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
  text-align: center;
  margin: 0 0 28px;
}

/* Steps indicator */
.sign__steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.sign__step {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.sign__step.is-active { background: var(--color-text); }
.sign__step.is-done { background: var(--color-success); }

/* Terminal states (expired, already signed) */
.sign__terminal { text-align: center; }
.sign__terminal-icon {
  display: flex; justify-content: center; margin-bottom: 20px;
}
.sign__terminal-icon svg { width: 48px; height: 48px; }

/* Hide steps by default; JS shows the active one */
.sign__step-review,
.sign__step-verify,
.sign__step-done { display: none; }

/* ------------------------------------------------------------------
   INLINE: the same flow grown down out of a to-do row (Home's "Link Bullet
   to Revenue", Peter 2 Oct 2026). No card of its own (the row is the card),
   no step dots, no document title (the row says it), body text at the
   drawers' body size, buttons in a row, left aligned.
   ------------------------------------------------------------------ */
.sign--inline .sign__card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.sign--inline .sign__steps,
.sign--inline [data-s="doc-title"],
.sign--inline .sign__title--code { display: none; }
.sign--inline .sign__sub { font-size: var(--text-sm); margin-bottom: 16px; }
.sign--inline .sign__pdf { margin-bottom: 20px; }
.sign--inline .sign__pdf iframe { height: 360px; }
.sign--inline .sign__name-field { margin-bottom: 16px; max-width: 360px; }
.sign--inline .sign__consent { margin-bottom: 20px; }
.sign--inline .sign__actions { flex-direction: row; flex-wrap: wrap; }
.sign--inline .sign__actions .btn { width: auto; }
.sign--inline .sign__otp { justify-content: flex-start; margin-bottom: 20px; }
.sign--inline .sign__resend { text-align: left; }
.sign--inline .sign__terminal { text-align: left; }
.sign--inline .sign__terminal .sign__title { text-align: left !important; font-size: var(--text-base); font-weight: var(--weight-medium); }
.sign--inline .sign__terminal .sign__sub { text-align: left !important; }
.sign--inline .sign__terminal-icon { justify-content: flex-start; margin-bottom: 8px; }
.sign--inline .sign__terminal-icon svg { width: 24px; height: 24px; }
.sign--inline .sign__done-icon,
.sign--inline [data-s="done"] { display: none !important; }
.sign--inline .sign__loading { text-align: left; font-size: var(--text-sm); }
@media (max-width: 480px) {
  .sign--inline .sign__otp-digit { width: 44px; height: 44px; font-size: var(--text-section); }
  .sign--inline .sign__otp { gap: 6px; }
  .sign--inline .sign__actions { flex-direction: column; }
  .sign--inline .sign__actions .btn { width: 100%; }
  .sign--inline .sign__pdf iframe { height: 300px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sign__card { animation: none; }
}

/* ------------------------------------------------------------------
   DEMO BAR — only present when the page is loaded with ?demo=1.
   Deliberately dev chrome, not product styling: a dark bar can never
   be mistaken for the signing page itself.
   ------------------------------------------------------------------ */
.sign__demobar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--color-text);
  color: #fff;
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.sign__demobar strong {
  background: #ffe135;
  color: var(--color-text);
  font-weight: var(--weight-bold);
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  flex: none;
}
.sign__demobar-note { flex: 1 1 auto; min-width: 140px; opacity: .92; }
.sign__demobar-pick,
.sign__demobar-restart {
  font: inherit;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  flex: none;
  max-width: 100%;
}
.sign__demobar-pick { -webkit-appearance: none; appearance: none; }
.sign__demobar-pick option { color: var(--color-text); background: #fff; }
.sign__demobar-restart:hover { background: rgba(255,255,255,.24); }

/* Push the page clear of the fixed bar. The exact value is set from the
   bar's measured height in JS (it wraps on narrow screens); this is the
   fallback before that runs. */
body.is-demo { padding-top: 46px; }
@media (max-width: 480px) {
  body.is-demo { padding-top: 72px; }
  .sign__demobar { padding: 6px 10px; gap: 8px; row-gap: 6px; }
  .sign__demobar-note { flex-basis: 100%; order: 3; font-size: 12px; }
  .sign__demobar-pick { max-width: 58%; }
}