/* squiggli component styles. Needs tokens/tokens.css loaded first. */
.sq-btn { font: inherit; font-size: 15px; font-weight: 600; height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink); cursor: pointer; }
.sq-btn:hover { background: var(--biro-soft); }
.sq-btn-primary { background: var(--biro); border-color: var(--biro); color: var(--on-biro); }
.sq-btn-primary:hover { background: var(--biro-hover); border-color: var(--biro-hover); }
.sq-btn-decline { color: var(--declined); }
.sq-btn-decline:hover { background: var(--declined-soft); }
.sq-btn:focus-visible, .sq-sig-cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sq-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sq-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sq-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sq-status-draft { background: var(--line); color: var(--ink-muted); }
.sq-status-sent { background: var(--biro-soft); color: var(--biro); }
.sq-status-viewed { background: var(--flag); color: var(--on-flag); }
.sq-status-signed { background: var(--biro); color: var(--on-biro); }
.sq-status-declined { background: var(--declined-soft); color: var(--declined); }

.sq-flag { display: inline-flex; align-items: center; flex: none; height: 28px; padding: 0 22px 0 12px; background: var(--flag); color: var(--on-flag); font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.sq-flag-left { padding: 0 12px 0 22px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }

.sq-sig { box-sizing: border-box; width: 100%; max-width: 380px; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) var(--space-3); }
.sq-sig-line { box-sizing: border-box; display: flex; align-items: flex-end; gap: var(--space-3); width: 100%; height: 56px; padding: 0 0 6px; border: 0; border-bottom: 1.5px solid var(--ink); background: none; color: inherit; font: inherit; text-align: left; }
.sq-sig-cta { cursor: pointer; }
.sq-sig-cta:hover .sq-sig-x { color: var(--biro); }
.sq-sig-x { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1; color: var(--ink-muted); }
.sq-sig-ink { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-signature); font-size: 32px; line-height: 40px; color: var(--biro); margin-bottom: -6px; }
.sq-sig-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sq-sig-name { color: var(--ink); font-weight: 600; }