/* ── B2B signing surface. Self-contained on top of the brand tokens in style.css. ── */
body.b2b { background: var(--surface-200); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; }
.b2b a { color: var(--navy-600); }
.icon { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }

/* App bar */
.app-bar { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, var(--navy-800), #0d2140); color: var(--text-on-dark); border-bottom: 1px solid rgba(230, 194, 82, 0.35); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-md); }
.app-bar__inner { max-width: 1120px; margin: 0 auto; padding: 12px var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.mark { display: inline-block; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.18); object-fit: contain; }
.brand .mark { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
.brand__word { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; background: linear-gradient(135deg, #ffffff 45%, var(--gold-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.brand__product { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.18); white-space: nowrap; }
.app-bar__actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; }
.app-bar .btn { padding: 8px 14px; font-size: var(--font-size-sm); border-radius: var(--radius-full); }
.who-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--radius-full); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); font-size: var(--font-size-xs); color: var(--text-on-dark); max-width: 320px; }
.who-chip__avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-500), var(--gold-300)); color: var(--navy-900); font-weight: 800; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.who-chip__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Page frame */
.b2b-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-3xl); }
.b2b-main--wide { max-width: 1120px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin: var(--space-sm) 0 var(--space-lg); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 6px; }
.kicker::before { content: ""; width: 18px; height: 2px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); border-radius: 2px; }
.page-head h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; margin: 0; color: var(--navy-800); }
.page-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.page-head .meta strong { color: var(--text-primary); font-weight: 600; }

/* Cards */
.card { background: var(--surface-100); border: 1px solid var(--surface-300); border-radius: var(--radius-xl); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.card + .card, .card + .docp, .docp + .card { margin-top: var(--space-lg); }
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.card h2 { font-size: var(--font-size-lg); font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--navy-800); }
.card h2 .n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-800); color: var(--gold-300); font-size: 0.8rem; font-weight: 800; align-items: center; justify-content: center; margin-right: 10px; vertical-align: 2px; }
.card p { color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-sm); }
.card p:last-child { margin-bottom: 0; }
.lede { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-lg); }
.card--accent { border-top: 3px solid var(--gold-500); }
.card--brand { background: linear-gradient(160deg, var(--navy-800), var(--navy-700)); color: var(--text-on-dark); border-color: rgba(255,255,255,0.08); }
.card--brand h2, .card--brand p { color: inherit; }
.card--brand p { color: var(--text-on-dark-muted); }

/* Forms */
.frm { margin-bottom: var(--space-md); }
.frm > label { display: block; font-weight: 600; font-size: var(--font-size-sm); margin-bottom: 6px; color: var(--text-primary); }
.frm .hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.input, .textarea { width: 100%; font: inherit; padding: 11px 14px; border: 1px solid var(--surface-400); border-radius: var(--radius-md); background: #fff; color: var(--text-primary); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.textarea { min-height: 220px; line-height: 1.6; resize: vertical; }
.input:focus, .textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22); }
.input--code { font-size: 1.75rem; letter-spacing: 0.4em; text-align: center; max-width: 280px; font-variant-numeric: tabular-nums; padding: 14px; }
.choice { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin: 0 var(--space-lg) var(--space-xs) 0; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--navy-700); }
.parties { display: grid; gap: var(--space-sm); }
.party-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-lg); }
.actions form { display: inline; }
.btn { border-radius: var(--radius-full); }
.btn .icon { margin-right: 2px; }

/* Notices */
.flash { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-md); padding: 12px var(--space-md); margin-bottom: var(--space-lg); font-size: var(--font-size-sm); line-height: 1.55; border: 1px solid; }
.flash--ok { background: #EEFBF3; border-color: #9BE0B5; color: #0F5132; }
.flash--err { background: #FEF2F2; border-color: #F5B5B5; color: #8A1C1C; }
.flash--info { background: #F1F6FD; border-color: #BCD3F5; color: #163A6B; }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-200); border: 1px solid var(--surface-300); color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.6; }
.note .icon { color: var(--gold-600); margin-top: 3px; }

/* Tables & pills */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--space-sm)); padding: 0 var(--space-sm); }
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--surface-300); vertical-align: top; }
.table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; }
.table tbody tr:last-child td { border-bottom: 0; }
.table a { color: var(--navy-700); font-weight: 600; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.02em; background: var(--surface-300); color: var(--text-secondary); white-space: nowrap; }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.pill--draft { background: var(--surface-300); color: var(--text-secondary); }
.pill--sent, .pill--pending { background: #FFF4D6; color: #7A4B00; }
.pill--viewed, .pill--verified { background: #E7ECFB; color: #2D3F8F; }
.pill--completing { background: #E7ECFB; color: #2D3F8F; }
.pill--completed, .pill--signed { background: var(--success-light); color: #0F5132; }
.pill--cancelled { background: #FEE2E2; color: #8A1C1C; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; word-break: break-all; color: var(--navy-700); }
.dim { color: var(--text-muted); font-size: var(--font-size-xs); }
.events td { padding: 7px 10px; border-bottom: 1px dotted var(--surface-300); font-size: var(--font-size-xs); color: var(--text-secondary); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Stepper (recipient) */

/* Document panel */
.docp { background: var(--surface-100); border: 1px solid var(--surface-300); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.docp__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 12px 16px; background: var(--navy-800); color: var(--text-on-dark); }
.docp__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--font-size-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docp__name .icon { color: var(--gold-400); }
.docp__frame { display: block; width: 100%; height: min(72vh, 860px); background: var(--surface-200); border: 0; }
.docp--compact .docp__frame { height: min(60vh, 720px); }
.docp__fallback { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--text-secondary); }
.docp__fallback p { margin: 0; }
.docp__bar .btn { white-space: nowrap; flex-shrink: 0; }
.docp__pages { max-height: min(72vh, 860px); overflow-y: auto; background: var(--surface-300); padding: var(--space-md); display: grid; gap: var(--space-md); justify-items: center; }
.docp--compact .docp__pages { max-height: min(60vh, 720px); }
.docp__page { display: block; width: 100%; max-width: 880px; height: auto; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(11,29,53,0.12), 0 6px 18px rgba(11,29,53,0.10); }
.docp__more { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); text-align: center; }
.docp__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-top: 1px solid var(--surface-300); background: var(--surface-100); }
.docp__hash-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

/* Consent */
.consent { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: linear-gradient(90deg, rgba(212,175,55,0.10), transparent 60%), var(--surface-200); border: 1px solid var(--surface-300); border-left: 3px solid var(--gold-500); line-height: 1.6; cursor: pointer; }
.consent input { margin-top: 4px; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--navy-700); }
/* The sentence ends in a 64-character hash with no break opportunity: without this it
   pushes the whole page wider than a phone screen. */
.consent span { min-width: 0; overflow-wrap: anywhere; }

/* Empty state / how it works */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.steps3 div { padding: var(--space-md); border-radius: var(--radius-md); background: var(--surface-200); border: 1px solid var(--surface-300); }
.steps3 b { display: block; color: var(--navy-800); margin-bottom: 4px; }
.steps3 span { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; }

/* Footer */
.app-foot { border-top: 1px solid var(--surface-300); background: var(--surface-100); }
.app-foot__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); font-size: var(--font-size-xs); color: var(--text-muted); }
.app-foot__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-weight: 600; line-height: 1.5; }
.app-foot a { color: inherit; }
.app-foot nav { display: flex; gap: var(--space-md); }

@media (max-width: 720px) {
  .app-bar__inner { padding: 10px var(--space-md); }
  .brand__product { display: none; }
  .who-chip__mail { max-width: 140px; }
  .party-row { grid-template-columns: 1fr; }
  .steps3 { grid-template-columns: 1fr; }
  .card { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .docp__frame { height: 60vh !important; }
  .docp__pages { max-height: 70vh !important; padding: var(--space-sm); gap: var(--space-sm); }
  .table--parties td:nth-child(3) { display: none; }
}

/* ── Helpers that used to be inline style attributes ──
   The Content-Security-Policy has no 'unsafe-inline' for styles, so none of the rendered pages carry a
   style="" attribute. Each rule is written as `.b2b .name` (specificity 0,2,0) so it beats `.card p`
   (0,1,1) the way the inline style did. */
.b2b .mt-sm { margin-top: var(--space-sm); }
.b2b .mt-md { margin-top: var(--space-md); }
.b2b .mt-lg { margin-top: var(--space-lg); }
.b2b .mb-md { margin-bottom: var(--space-md); }
.b2b .mb-lg { margin-bottom: var(--space-lg); }
.b2b .my-lg { margin: var(--space-lg) 0; }
.b2b .pull-up { margin-top: -6px; }
.b2b .nowrap { white-space: nowrap; }
.b2b .text-error { color: var(--error); }
.b2b .signas { margin-bottom: var(--space-md); color: var(--text-secondary); font-size: var(--font-size-sm); }
.b2b .party-row--self { margin-top: 8px; }
.b2b .hint--center { align-self: center; }
.b2b .hint--rows { margin-top: 10px; }
.b2b .hint--tight { margin-top: 6px; }
.b2b .dim--regular { font-weight: 500; }
.b2b .textarea--short { min-height: 110px; }
.b2b .input--narrow { max-width: 420px; }