/* PDFeyes: Sign PDF
   Scoped under .sgn so nothing here can leak into the rest of the site.
   Every color falls back to a literal, so this page still looks right
   even if style.css is missing or its variable names change. */

.sgn {
  /* Bound to the site tokens in style.css. No literal fallbacks that could
     drift from the real palette: if a token is renamed there, this breaks
     loudly rather than quietly rendering the wrong orange. */
  --sgn-accent: var(--navy);
  --sgn-accent-soft: #EEF2F7;
  --sgn-accent-dark: var(--navy-2);
  --sgn-ink: var(--ink);
  --sgn-ink-2: var(--ink-soft);
  --sgn-ink-3: var(--ink-faint);
  --sgn-card: var(--card);
  --sgn-page: var(--paper-3);
  --sgn-rule: var(--rule);
  --sgn-rule-strong: var(--rule-strong);
  --sgn-radius: var(--radius);
  --sgn-rail: 168px;
  --sgn-panel: 320px;
  --sgn-bar: 52px;

  color: var(--sgn-ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

/* Headings follow the site's display face, like every other tool page. */
.sgn-intro h1, .sgn-panel h2, .sgn-dialog-head h2 { font-family: var(--font-display); }

.sgn *,
.sgn *::before,
.sgn *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ *
 * Editor shell
 * ------------------------------------------------------------------ */

/* The editor is a <section>, and style.css gives every section 84px of
   vertical padding. That is right for a marketing block and wrong for a
   full-height workspace, which then overflowed the viewport and pushed the
   Sign button off the bottom of the panel. */
.sgn-editor { display: none; padding: 0; margin: 0; }
.sgn-editor.is-live { display: block; }

/* Once a document is open the tool owns the screen. The site header is
   sticky, so without this it scrolls over the page toolbar and the signer
   loses the page controls exactly when they are using them. The marketing
   copy below is only hidden after a file is chosen, so crawlers still see
   it. */
body.sgn-app { overflow: hidden; }
body.sgn-app .op-hero,
body.sgn-app #sgnArticle,
body.sgn-app #site-footer { display: none; }
body.sgn-app .sgn-bar { position: sticky; top: 0; z-index: 200; }

.sgn-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--sgn-bar);
  padding: 0 14px;
  border-bottom: 1px solid var(--sgn-rule);
  background: var(--sgn-card);
}

.sgn-bar .sgn-file {
  font-weight: 600;
  font-size: 14px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgn-bar .sgn-spacer { flex: 1; }

/* Scoped to the bar so it beats .sgn-input's width:100%, which is declared
   later in this file and was stretching the page box across the toolbar. */
.sgn-bar .sgn-pageno {
  width: 56px;
  flex: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sgn-bar .sgn-input { padding: 6px 8px; }

.sgn-count { color: var(--sgn-ink-3); font-size: 13px; }

.sgn-workspace {
  display: grid;
  grid-template-columns: var(--sgn-rail) minmax(0, 1fr) var(--sgn-panel);
  height: calc(100vh - var(--sgn-bar) - var(--sgn-header, 0px));
  min-height: 560px;
  background: var(--sgn-page);
}

/* --- thumbnail rail --- */

.sgn-rail {
  overflow-y: auto;
  padding: 14px 10px;
  border-right: 1px solid var(--sgn-rule);
  background: var(--sgn-card);
}

.sgn-thumb {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.sgn-thumb canvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--sgn-rule-strong);
  border-radius: 2px;
  background: #fff;
}

.sgn-thumb[aria-current="true"] { border-color: var(--sgn-accent); }
.sgn-thumb:focus-visible { outline: 2px solid var(--sgn-accent); outline-offset: 2px; }

.sgn-thumb .sgn-thumb-n {
  display: block;
  font-size: 11px;
  line-height: 20px;
  color: var(--sgn-ink-3);
  font-variant-numeric: tabular-nums;
}

.sgn-thumb .sgn-thumb-dot {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--sgn-accent);
  vertical-align: middle;
  opacity: 0;
}

.sgn-thumb.has-fields .sgn-thumb-dot { opacity: 1; }

/* --- canvas stage --- */

.sgn-stage {
  overflow: auto;
  padding: 26px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.sgn-paper {
  position: relative;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 18, 32,.12), 0 8px 24px rgba(11, 18, 32,.08);
  flex: none;
}

.sgn-paper canvas { display: block; }

.sgn-paper.is-target { outline: 2px dashed var(--sgn-accent); outline-offset: 4px; }

/* --- placed fields --- */

/* A placed field should look like part of the document, not like a form.
   The outline appears on hover, so it is findable, and on selection, so it
   is obviously the thing being moved. A field with nothing in it keeps a
   dashed outline, because an empty invisible box cannot be found at all. */
.sgn-field {
  position: absolute;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 3px;
  cursor: move;
  touch-action: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: border-color .12s ease, background-color .12s ease;
}

.sgn-field:hover {
  border-color: var(--sgn-accent);
  background: rgba(15, 27, 45, .07);
}

.sgn-field.is-empty {
  border-style: dashed;
  border-color: var(--sgn-accent);
}

/* A quiet marker on a word that appears in more than one place, so it is
   no surprise when editing it changes something on another page. */
.sgn-field.is-shared::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--sgn-accent);
  opacity: .55;
}

.sgn-field:hover.is-shared::before, .sgn-field.is-selected.is-shared::before { opacity: 1; }

.sgn-field.is-selected {
  border-color: #2F6FEB;
  background: rgba(47, 111, 235, .07);
  box-shadow: 0 0 0 1px #2F6FEB;
  z-index: 30;          /* the selection and its toolbar go above neighbours */
  overflow: visible;    /* so handles and the toolbar are not clipped */
}

.sgn-field.is-tight {
  border-color: #B07A12;
  background: rgba(176, 122, 18, .10);
}

.sgn-field.is-linked::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sgn-accent);
}

.sgn-field img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.sgn-field .sgn-field-text {
  width: 100%;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #111;
}

.sgn-field .sgn-field-empty {
  width: 100%;
  padding: 0 5px;
  font-size: 11px;
  color: var(--sgn-accent);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

.sgn-handle {
  position: absolute;
  width: 11px; height: 11px;
  border: 1.5px solid #2F6FEB;
  background: #fff;
  border-radius: 50%;
  touch-action: none;
}

.sgn-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.sgn-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.sgn-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.sgn-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }

.sgn-fieldbar {
  position: absolute;
  z-index: 31;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 7px;
  background: #3C4A5A;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  white-space: nowrap;
}

.sgn-fieldbar button {
  width: 28px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.sgn-fieldbar button:hover { background: rgba(255,255,255,.18); }
.sgn-fieldbar button svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ *
 * Right panel
 * ------------------------------------------------------------------ */

.sgn-panel {
  border-left: 1px solid var(--sgn-rule);
  background: var(--sgn-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sgn-panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px 8px;
}

.sgn-panel h2 {
  font-size: 20px;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.sgn-panel h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sgn-ink-3);
  margin: 22px 0 8px;
}

.sgn-panel h3:first-of-type { margin-top: 0; }

.sgn-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--sgn-rule);
  border-radius: var(--sgn-radius);
  background: var(--sgn-card);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: grab;
}

.sgn-chip:hover { border-color: var(--sgn-rule-strong); background: #F7F7F5; }
.sgn-chip:active { cursor: grabbing; }
.sgn-chip:focus-visible { outline: 2px solid var(--sgn-accent); outline-offset: 1px; }

.sgn-chip .sgn-chip-icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--sgn-accent-soft);
  color: var(--sgn-accent);
}

.sgn-chip .sgn-chip-icon svg { width: 16px; height: 16px; }

.sgn-chip .sgn-chip-body { flex: 1; min-width: 0; }
.sgn-chip .sgn-chip-label { font-size: 14px; font-weight: 600; }
.sgn-chip .sgn-chip-key {
  font-size: 11px;
  color: var(--sgn-ink-3);
  font-variant-numeric: tabular-nums;
}

.sgn-chip .sgn-chip-preview {
  flex: none;
  height: 30px;
  max-width: 108px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 1px dashed var(--sgn-rule-strong);
  border-radius: 5px;
  overflow: hidden;
}

.sgn-chip .sgn-chip-preview img { max-height: 26px; max-width: 96px; }

.sgn-edit {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sgn-accent);
  cursor: pointer;
}

.sgn-edit:hover { background: var(--sgn-accent-soft); }
.sgn-edit svg { width: 15px; height: 15px; }

.sgn-panel-foot {
  flex: none;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--sgn-rule);
  background: var(--sgn-card);
}

.sgn-note {
  font-size: 12px;
  color: var(--sgn-ink-3);
  margin: 0 0 10px;
}

/* ------------------------------------------------------------------ *
 * Buttons / form controls
 * ------------------------------------------------------------------ */

.sgn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--sgn-rule-strong);
  border-radius: var(--sgn-radius);
  background: var(--sgn-card);
  font: inherit;
  font-weight: 600;
  color: var(--sgn-ink);
  cursor: pointer;
}

.sgn-btn:hover { background: #F7F7F5; }
.sgn-btn:focus-visible { outline: 2px solid var(--sgn-accent); outline-offset: 2px; }
.sgn-btn[disabled] { opacity: .45; cursor: not-allowed; }

.sgn-btn-primary {
  border-color: var(--sgn-accent);
  background: var(--sgn-accent);
  color: #fff;
}

.sgn-btn-primary:hover { background: var(--sgn-accent-dark); border-color: var(--sgn-accent-dark); }

.sgn-btn-ghost { border-color: transparent; background: transparent; font-weight: 500; }
.sgn-btn-ghost:hover { background: #EFEEEA; }

.sgn-btn-block { width: 100%; padding: 13px 18px; font-size: 16px; }

.sgn-icon-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sgn-rule-strong);
  border-radius: 7px;
  background: var(--sgn-card);
  cursor: pointer;
  color: var(--sgn-ink-2);
}

.sgn-icon-btn:hover { background: #F7F7F5; color: var(--sgn-ink); }
.sgn-icon-btn svg { width: 15px; height: 15px; }

.sgn-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sgn-rule-strong);
  border-radius: 8px;
  background: var(--sgn-card);
  font: inherit;
  color: inherit;
}

.sgn-input:focus {
  outline: none;
  border-color: var(--sgn-accent);
  box-shadow: 0 0 0 3px var(--sgn-accent-soft);
}

.sgn-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sgn-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--sgn-ink-2);
  cursor: pointer;
}

.sgn-check input { margin-top: 2px; accent-color: var(--sgn-accent); }

/* ------------------------------------------------------------------ *
 * Modal
 * ------------------------------------------------------------------ */

.sgn-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 18, 32, .48);
}

.sgn-modal.is-open { display: flex; }

.sgn-dialog {
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--sgn-card);
  box-shadow: 0 18px 48px rgba(11, 18, 32,.3);
  overflow: hidden;
}

.sgn-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--sgn-rule);
}

.sgn-dialog-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }

.sgn-dialog-body { padding: 22px 24px; overflow-y: auto; }

.sgn-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--sgn-rule);
}

.sgn-idrow {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 16px;
  margin-bottom: 20px;
}

/* tabs */

.sgn-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--sgn-rule);
  margin-bottom: -1px;
}

.sgn-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--sgn-ink-2);
  cursor: pointer;
}

.sgn-tab svg { width: 16px; height: 16px; }

.sgn-tab[aria-selected="true"] {
  color: var(--sgn-ink);
  background: var(--sgn-card);
  border-color: var(--sgn-rule);
  box-shadow: inset 0 3px 0 var(--sgn-accent);
}

.sgn-tabpanel {
  display: none;
  border: 1px solid var(--sgn-rule);
  border-radius: 0 10px 10px 10px;
}

.sgn-tabpanel.is-active { display: grid; grid-template-columns: 54px 1fr; }

/* mode strip (type / draw / upload) */

.sgn-modes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border-right: 1px solid var(--sgn-rule);
  background: #F4F4F1;
  border-radius: 0 0 0 10px;
}

.sgn-mode {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--sgn-ink-2);
  cursor: pointer;
}

.sgn-mode svg { width: 17px; height: 17px; }
.sgn-mode:hover { background: #E9E8E4; }

.sgn-mode[aria-selected="true"] {
  background: var(--sgn-card);
  border-color: var(--sgn-rule-strong);
  color: var(--sgn-accent);
}

.sgn-mode-body { padding: 16px; min-height: 264px; }
.sgn-mode-pane { display: none; }
.sgn-mode-pane.is-active { display: block; }

/* typed styles list */

.sgn-styles {
  max-height: 216px;
  overflow-y: auto;
  border: 1px solid var(--sgn-rule);
  border-radius: 8px;
}

.sgn-style {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--sgn-rule);
  background: var(--sgn-card);
  cursor: pointer;
  text-align: left;
}

.sgn-style:last-child { border-bottom: 0; }
.sgn-style:hover { background: #F7F7F5; }

.sgn-style .sgn-radio {
  flex: none;
  width: 17px; height: 17px;
  border: 1.5px solid var(--sgn-rule-strong);
  border-radius: 50%;
}

.sgn-style[aria-checked="true"] .sgn-radio {
  border-color: #1DA766;
  border-width: 5px;
}

.sgn-style .sgn-style-sample {
  font-size: 28px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* draw pad */

.sgn-pad-wrap { display: grid; grid-template-columns: 1fr 200px; gap: 16px; }

.sgn-pad {
  position: relative;
  background: #F4F4F1;
  border-radius: 6px;
  touch-action: none;
}

.sgn-pad canvas { display: block; width: 100%; height: 190px; cursor: crosshair; }

.sgn-pad-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--sgn-ink-3);
  font-size: 17px;
  pointer-events: none;
}

.sgn-pad.has-ink .sgn-pad-hint { display: none; }

.sgn-pad-side {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--sgn-rule);
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  color: var(--sgn-ink-3);
}

/* upload well */

.sgn-well {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px 20px;
  background: #F4F4F1;
  border-radius: 6px;
  text-align: center;
}

.sgn-well.is-over { background: var(--sgn-accent-soft); }
.sgn-well p { margin: 0; color: var(--sgn-ink-3); }
.sgn-well small { color: var(--sgn-ink-3); font-size: 12px; }
.sgn-well img { max-height: 110px; max-width: 100%; }

/* color swatches */

.sgn-colors {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.sgn-colors > span { font-size: 13px; color: var(--sgn-ink-2); }

.sgn-swatch {
  width: 20px; height: 20px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.sgn-swatch[aria-checked="true"] { border-color: var(--sgn-ink); }

/* small menu (place-on / date format) */

.sgn-menu {
  position: absolute;
  z-index: 800;
  min-width: 250px;
  padding: 6px;
  border: 1px solid var(--sgn-rule);
  border-radius: 10px;
  background: var(--sgn-card);
  box-shadow: 0 10px 28px rgba(11, 18, 32,.18);
}

.sgn-menu button {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sgn-menu button:hover { background: var(--sgn-accent-soft); }
.sgn-menu button span { display: block; font-size: 12px; color: var(--sgn-ink-3); }

/* toast */

.sgn-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 950;
  max-width: 90vw;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--sgn-ink);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.sgn-toast[hidden] { display: none; }

.sgn-hint {
  position: absolute;
  z-index: 60;
  max-width: 260px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #FFE9A8;
  color: #4A3B12;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(11, 18, 32,.14);
}

.sgn-hint[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * Handwriting faces for typed signatures.
 *
 * The @font-face rules moved to fonts.css, because the form filler offers
 * the same faces and does not load this file. Each option still names a
 * different fallback stack, so the choices stay distinct if a face is
 * missing.
 * ------------------------------------------------------------------ */


.sgn-face-a { font-family: "PDFeyes Script A", "Snell Roundhand", "Apple Chancery", cursive; }
.sgn-face-b { font-family: "PDFeyes Script B", "Segoe Script", "Bradley Hand", cursive; }
.sgn-face-c { font-family: "PDFeyes Script C", "Segoe Print", "Chalkboard", cursive; }
.sgn-face-d { font-family: "PDFeyes Script D", "Zapfino", "Palatino Linotype", serif; }
.sgn-face-e { font-family: Helvetica, Arial, sans-serif; }

/* ------------------------------------------------------------------ *
 * New controls: guides, busy state, tally, mobile sheet
 * ------------------------------------------------------------------ */

.sgn-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sgn-bar-sep {
  width: 1px;
  height: 20px;
  background: var(--sgn-rule);
}

.sgn-zoompct {
  min-width: 44px;
  text-align: right;
  font-size: 12px;
  color: var(--sgn-ink-3);
  font-variant-numeric: tabular-nums;
}

.sgn-layer { position: absolute; inset: 0; }

.sgn-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.sgn-guide { position: absolute; background: #2F6FEB; }
.sgn-guide.v { top: 0; bottom: 0; width: 1px; }
.sgn-guide.h { left: 0; right: 0; height: 1px; }

.sgn-fieldbar.is-below { top: auto; bottom: -34px; }

.sgn-field-text.is-placeholder { color: var(--sgn-accent); font-size: 11px !important; }

.sgn-field-input {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 4px;
  border: 1px solid #2F6FEB;
  border-radius: 2px;
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  color: #111;
}

.sgn-field-input:focus { outline: none; }

.sgn-chip-preview.is-empty {
  border-style: dashed;
  min-width: 40px;
}

.sgn-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.sgn-panel-head h2 { margin: 0; flex: 1; }
.sgn-sheet-close { display: none; }

.sgn-flatten {
  margin-top: 22px;
  padding: 12px;
  border: 1px solid var(--sgn-rule);
  border-radius: var(--sgn-radius);
  background: #F7F7F5;
}

.sgn-tally {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--sgn-ink-2);
}

.sgn-btn-sm { padding: 5px 10px; font-size: 13px; }

/* busy overlay */

.sgn-busy {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper-3) 78%, transparent);
}

.sgn-busy[hidden] { display: none; }

.sgn-busy-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  border-radius: 12px;
  background: var(--sgn-card);
  box-shadow: 0 10px 34px rgba(11, 18, 32,.2);
  font-weight: 600;
}

.sgn-busy-card p { margin: 0; }

.sgn-spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--sgn-rule-strong);
  border-top-color: var(--sgn-accent);
  border-radius: 50%;
  animation: sgn-spin .8s linear infinite;
}

@keyframes sgn-spin { to { transform: rotate(360deg); } }

/* On a phone the field list is a sheet that closes as soon as you place
   something, which would leave the primary action buried behind it. It gets
   its own button, next to the one that opens the sheet. */
.sgn-sign-fab {
  display: none;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 500;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid var(--sgn-rule-strong);
  border-radius: 999px;
  background: var(--sgn-card);
  font: inherit;
  font-weight: 600;
  color: var(--sgn-ink);
  box-shadow: 0 6px 20px rgba(11, 18, 32,.2);
  cursor: pointer;
}

.sgn-sign-fab svg { width: 18px; height: 18px; color: var(--sgn-accent); }
.sgn-sign-fab[hidden] { display: none; }

/* mobile sheet trigger */

.sgn-sheet-toggle {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--sgn-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(11, 18, 32,.28);
  cursor: pointer;
}

.sgn-sheet-toggle svg { width: 18px; height: 18px; }

.sgn-sheet-badge {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sgn-sheet-badge[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .sgn { --sgn-rail: 0px; --sgn-panel: 288px; }
  .sgn-workspace { grid-template-columns: minmax(0, 1fr) var(--sgn-panel); }
  .sgn-rail { display: none; }
}

/* Below this width the three column layout stops being usable, so the
   panel becomes a sheet the signer pulls up, the page gets the whole
   screen, and every target grows to something a thumb can hit. Drawing a
   signature with a finger is the best version of this tool, so it should
   not be the worst supported one. */
@media (max-width: 760px) {
  .sgn { --sgn-bar: auto; }

  /* A phone needs to scroll the page itself, so app mode only locks the
     viewport where the three column layout actually applies. */
  body.sgn-app { overflow: auto; }

  .sgn-workspace {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }

  .sgn-bar {
    height: auto;
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 300;
  }

  .sgn-bar .sgn-file { order: -1; width: 100%; max-width: none; font-size: 13px; }
  .sgn-bar-sep, .sgn-zoompct { display: none; }
  .sgn-icon-btn { width: 40px; height: 40px; }
  .sgn-icon-btn svg { width: 17px; height: 17px; }

  .sgn-stage {
    padding: 12px;
    min-height: 60vh;
  }

  .sgn-sheet-toggle { display: inline-flex; }
  .sgn-sign-fab:not([hidden]) { display: inline-flex; }

  .sgn-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 600;
    max-height: 78vh;
    border-left: 0;
    border-top: 1px solid var(--sgn-rule);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(11, 18, 32,.24);
    transform: translateY(102%);
    transition: transform .22s ease;
  }

  .sgn-panel.is-open { transform: translateY(0); }
  .sgn-sheet-close { display: grid; }

  /* Thumb-sized rows, and the field list first because that is what the
     sheet was opened for. */
  .sgn-chip { padding: 13px 12px; }
  .sgn-chip .sgn-chip-icon { width: 36px; height: 36px; }
  .sgn-edit { width: 38px; height: 38px; }

  .sgn-field .sgn-handle {
    width: 17px; height: 17px;
  }
  .sgn-handle.nw { top: -9px; left: -9px; }
  .sgn-handle.ne { top: -9px; right: -9px; }
  .sgn-handle.sw { bottom: -9px; left: -9px; }
  .sgn-handle.se { bottom: -9px; right: -9px; }

  .sgn-fieldbar button { width: 34px; height: 32px; }

  .sgn-intro { padding: 32px 16px 48px; }

  .sgn-dialog { max-height: calc(100vh - 16px); border-radius: 12px; }
  .sgn-dialog-head, .sgn-dialog-body, .sgn-dialog-foot { padding-left: 16px; padding-right: 16px; }
  .sgn-idrow { grid-template-columns: 1fr; gap: 12px; }
  .sgn-tabs { overflow-x: auto; }
  .sgn-tab { padding: 11px 13px; font-size: 14px; }
  .sgn-tabpanel.is-active { grid-template-columns: 1fr; }

  /* The mode strip goes horizontal so the drawing area keeps the full width. */
  .sgn-modes {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--sgn-rule);
    border-radius: 0;
  }
  .sgn-mode { width: 44px; height: 44px; }

  .sgn-mode-body { padding: 12px; min-height: 0; }
  .sgn-pad-wrap { grid-template-columns: 1fr; }
  .sgn-pad canvas { height: 220px; }
  .sgn-pad-side { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sgn-styles { max-height: 250px; }
  .sgn-style { padding: 12px 14px; }

  .sgn-hint { max-width: 200px; font-size: 13px; }
  .sgn-toast { bottom: 82px; }
}

@media (max-width: 420px) {
  .sgn-sheet-toggle { padding: 12px 16px; }
  .sgn-style .sgn-style-sample { font-size: 24px; }
}

@media print {
  .sgn-rail, .sgn-panel, .sgn-bar, .sgn-fieldbar, .sgn-handle,
  .sgn-sheet-toggle, .sgn-guides { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sgn *, .sgn *::before, .sgn *::after {
    transition: none !important;
    animation-duration: .01ms !important;
  }
}


/* ------------------------------------------------------------------ *
 * The list of placed words
 * ------------------------------------------------------------------ */

.sgn-values-hint { margin: -2px 0 10px; }

.sgn-values-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--sgn-rule-strong);
  border-radius: var(--sgn-radius);
  font-size: 13px;
  color: var(--sgn-ink-3);
  text-align: center;
}

.sgn-values-empty[hidden] { display: none; }

.sgn-value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--sgn-rule);
  border-radius: var(--sgn-radius);
  background: var(--sgn-card);
  cursor: grab;
}

.sgn-value:hover { border-color: var(--sgn-rule-strong); }
.sgn-value:active { cursor: grabbing; }
.sgn-value.is-unused { opacity: .6; }

.sgn-value-input {
  flex: 1;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: inherit;
}

.sgn-value-input:hover { background: #F7F7F5; }
.sgn-value-input:focus {
  outline: none;
  background: var(--sgn-card);
  border-color: var(--sgn-accent);
  box-shadow: 0 0 0 3px var(--sgn-accent-soft);
}

.sgn-value-count {
  flex: none;
  font-size: 11px;
  color: var(--sgn-ink-3);
  white-space: nowrap;
}

.sgn-value-place, .sgn-value-del {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sgn-ink-3);
  cursor: pointer;
}

.sgn-value-place:hover { background: var(--sgn-accent-soft); color: var(--sgn-accent); }
.sgn-value-del:hover { background: #F7ECEA; color: #A03328; }
.sgn-value-place svg, .sgn-value-del svg { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .sgn-value { padding: 8px; }
  .sgn-value-place, .sgn-value-del { width: 36px; height: 36px; }
  /* Dragging out of a bottom sheet is not practical, so the plus button is
     the way to place a second copy on a phone. */
  .sgn-value { cursor: default; }
}

/* ------------------------------------------------------------------ *
 * Fill mode: click-to-place, the banner, and the first-run coach
 * ------------------------------------------------------------------ */

body.sgn-armed .sgn-paper { cursor: crosshair; }
body.sgn-armed .sgn-paper { outline: 2px dashed var(--sgn-accent); outline-offset: 4px; }

.sgn-chip.is-armed {
  border-color: var(--sgn-accent);
  background: var(--sgn-accent-soft);
  box-shadow: 0 0 0 2px var(--sgn-accent-soft);
}

.sgn-banner {
  position: sticky;
  top: 0;
  z-index: 210;
  padding: 9px 14px;
  background: var(--sgn-ink);
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.sgn-banner[hidden] { display: none; }

/* A first field on an empty form. Explains itself, then gets out of the way. */
.sgn-empty {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 35;
  max-width: 340px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--sgn-rule);
  box-shadow: 0 10px 30px rgba(11, 18, 32,.14);
  text-align: center;
  pointer-events: none;
}

.sgn-empty strong { display: block; font-size: 16px; margin-bottom: 4px; }
.sgn-empty p { margin: 0; font-size: 14px; color: var(--sgn-ink-2); }
.sgn-empty[hidden] { display: none; }

.sgn-coach {
  position: fixed;
  z-index: 960;
  width: 300px;
  padding: 16px 18px 14px;
  border-radius: 12px;
  background: var(--sgn-ink);
  color: #fff;
  box-shadow: 0 14px 40px rgba(11, 18, 32,.35);
}

.sgn-coach-step { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; opacity: .65; }
.sgn-coach-title { font-size: 16px; font-weight: 700; margin: 4px 0 6px; }
.sgn-coach-text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; opacity: .92; }
.sgn-coach-row { display: flex; justify-content: space-between; gap: 8px; }
.sgn-coach .sgn-btn-ghost { color: #fff; border-color: transparent; }
.sgn-coach .sgn-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* The arrow is a rotated square on the edge that faces the target. */
.sgn-coach-arrow {
  position: absolute;
  width: 16px; height: 16px;
  background: var(--sgn-ink);
  transform: rotate(45deg);
}

.sgn-coach.is-left .sgn-coach-arrow  { right: -8px; top: calc(50% - 8px); }
.sgn-coach.is-below .sgn-coach-arrow { left: 24px; top: -8px; }
.sgn-coach.is-top .sgn-coach-arrow   { left: calc(50% - 8px); top: -8px; }

.sgn-coach.is-docked {
  left: 50% !important; bottom: 20px; top: auto !important;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 24px));
}

.sgn-coach.is-docked .sgn-coach-arrow { display: none; }

.sgn-coach-ring {
  position: fixed;
  z-index: 955;
  border: 3px solid var(--sgn-accent);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(15, 27, 45, .18);
  pointer-events: none;
  animation: sgn-pulse 1.4s ease-in-out infinite;
}

@keyframes sgn-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(15, 27, 45, .18); }
  50%      { box-shadow: 0 0 0 9px rgba(15, 27, 45, .08); }
}

@media (prefers-reduced-motion: reduce) { .sgn-coach-ring { animation: none; } }

/* The check-mark field: a small box with an X in it. */
.sgn-field[data-kind="tick"] .sgn-field-text {
  text-align: center;
  font-weight: 700;
  padding: 0;
}

/* While the tips are showing they say what the empty state says; one voice. */
body.sgn-coaching .sgn-empty { display: none; }

.sgn-note a { color: var(--sgn-accent); text-decoration: underline; text-underline-offset: 2px; }
.sgn-note a:hover { color: var(--sgn-accent-dark); }

/* ------------------------------------------------------------------ *
 * Format bar and shapes
 * ------------------------------------------------------------------ */

.sgn-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--sgn-rule);
  background: var(--sgn-card);
}

.sgn-format[hidden] { display: none; }
body.sgn-app .sgn-format { position: sticky; top: var(--sgn-bar); z-index: 199; }

.sgn-fmt-group { display: inline-flex; align-items: center; gap: 4px; }
.sgn-fmt-label { font-size: 11px; color: var(--sgn-ink-3); margin-right: 4px; letter-spacing: .03em; text-transform: uppercase; }
.sgn-fmt-note { font-size: 13px; color: var(--sgn-ink-2); }

.sgn-fmt-btn {
  min-width: 30px; height: 28px;
  padding: 0 8px;
  border: 1px solid var(--sgn-rule-strong);
  border-radius: 6px;
  background: var(--sgn-card);
  font: inherit;
  font-size: 13px;
  color: var(--sgn-ink);
  cursor: pointer;
}

.sgn-fmt-btn:hover { background: #F7F7F5; }
.sgn-fmt-btn.is-on { background: var(--sgn-ink); color: #fff; border-color: var(--sgn-ink); }
.sgn-fmt-btn.is-b { font-weight: 700; }
.sgn-fmt-btn.is-i { font-style: italic; font-family: Georgia, serif; }
.sgn-fmt-btn:focus-visible { outline: 2px solid var(--sgn-accent); outline-offset: 1px; }

.sgn-fmt-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--sgn-rule-strong);
  border-radius: 6px;
  background: var(--sgn-card);
  font: inherit;
  font-size: 13px;
}

.sgn-fmt-size { min-width: 40px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--sgn-ink-2); }

.sgn-fmt-swatch {
  width: 22px; height: 22px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  cursor: pointer;
}

.sgn-fmt-swatch.is-on { border-color: var(--sgn-ink); }

.sgn-fmt-custom {
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px dashed var(--sgn-rule-strong);
  display: grid; place-items: center;
  font-size: 14px; color: var(--sgn-ink-3);
  cursor: pointer;
  overflow: hidden;
}

.sgn-fmt-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Shapes on the page. A selected or hovered erase box shows its edge, since
   a white box on a white page is otherwise invisible to the person who
   placed it. */
.sgn-field.is-shape { border-radius: 0; }
.sgn-field.is-shape.is-erase { box-shadow: inset 0 0 0 1px rgba(11, 18, 32,.18); }
.sgn-field.is-shape:hover, .sgn-field.is-shape.is-selected { opacity: 1 !important; }

.sgn-field-input {
  resize: none;
  line-height: 1.18;
  white-space: pre;
  overflow: hidden;
}

@media (max-width: 760px) {
  .sgn-format { gap: 6px 12px; padding: 6px 10px; }
  .sgn-fmt-label { display: none; }
  .sgn-fmt-btn { height: 34px; min-width: 34px; }
  .sgn-fmt-swatch, .sgn-fmt-custom { width: 26px; height: 26px; }
}

.sgn-field[data-kind="tick"] .sgn-field-text { padding: 0; display: block; height: 100%; }
.sgn-field[data-kind="tick"] .sgn-field-text svg { width: 100%; height: 100%; display: block; }

.sgn-fmt-size.is-auto { color: var(--sgn-ink-3); }
.sgn-fmt-btn svg { display: block; }

/* Phone: the editor takes the whole screen. The site header would cost a
   third of it, and the person got here through it. One scrolling row for
   the format bar rather than two stacked ones. */
@media (max-width: 760px) {
  body.sgn-app #site-header { display: none; }
  body.sgn-app .sgn-format {
    top: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px 10px;
  }
  body.sgn-app .sgn-format::-webkit-scrollbar { display: none; }
  .sgn-fmt-group { flex: none; }
}