/* ===========================================================================
   Inkwell

   The resolved theme is written to <html data-theme> by an inline script in the
   page head, before first paint.

   --paper-* never flips with the theme: it describes the signing surface and
   the ink that will be exported. A signature captured as light-on-dark would be
   invisible wherever it is placed afterwards.
   =========================================================================== */

:root {
  color-scheme: light;

  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f2f5f8;
  --border: #e3e7ed;
  --border-strong: #cfd6e0;

  --text: #0e1420;
  --text-2: #4a5567;
  --text-3: #626e81;

  --brand: #1266e0;
  --brand-strong: #0d53bd;
  --brand-fg: #ffffff;
  --brand-soft: #eaf2fe;
  --brand-ring: rgba(18, 102, 224, .32);

  --ok: #10663f;   --ok-bg: #e6f5ec;  --ok-line: #bbe0cb;
  --bad: #a3201f;  --bad-bg: #fcecec; --bad-line: #efcccb;
  --warn: #85540a; --warn-bg: #fdf3e0; --warn-line: #eedcb4;

  --r-sm: 7px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --sh-sm: 0 1px 2px rgba(14, 20, 32, .05);
  --sh: 0 1px 2px rgba(14, 20, 32, .05), 0 2px 8px rgba(14, 20, 32, .05);
  --sh-lg: 0 2px 4px rgba(14, 20, 32, .05), 0 12px 32px rgba(14, 20, 32, .10);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* constant across themes */
  --paper: #ffffff;
  --paper-ink: #0b1220;
  --paper-line: #c9ced6;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0d12;
  --surface: #141820;
  --surface-2: #1a1f29;
  --border: #262d39;
  --border-strong: #353d4c;

  --text: #e8ebf1;
  --text-2: #a7b0bf;
  --text-3: #8b94a3;

  --brand: #5a9cff;
  --brand-strong: #82b5ff;
  --brand-fg: #06121f;
  --brand-soft: #142847;
  --brand-ring: rgba(90, 156, 255, .34);

  --ok: #5fd3a0;   --ok-bg: #0f2e1e;  --ok-line: #1f5540;
  --bad: #f4918a;  --bad-bg: #311a1a; --bad-line: #5b2f2f;
  --warn: #e3b263; --warn-bg: #2f2410; --warn-line: #57431f;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --sh-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
/* The hidden attribute is only display:none from the UA stylesheet, so any
   author rule setting display silently defeats it. */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  font: 400 15px/1.55 var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { letter-spacing: -.011em; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; width: 100%; }
main { flex: 1 0 auto; padding: 28px 0 52px; }

/* ------------------------------------------------------------------- bar -- */

.bar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; min-height: 56px; flex: none;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 680; color: var(--text); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--brand); color: var(--brand-fg);
}
.bar nav { display: flex; gap: 16px; margin-right: auto; }
.bar nav a { color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.bar nav a:hover { color: var(--text); text-decoration: none; }
.inline { display: flex; align-items: center; margin: 0; }

/* ----------------------------------------------------------------- forms -- */

label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }

input[type=text], input[type=email], input[type=password], input[type=search] {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color .12s, box-shadow .12s;
}
input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
input::placeholder { color: var(--text-3); opacity: .8; }

.field { margin-bottom: 16px; }
.hint { color: var(--text-3); font-size: 13px; margin: 6px 0 0; line-height: 1.5; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* The honeypot. Taken out of the layout and off the accessibility tree, so it
   is invisible to people and to screen readers but present in the DOM. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 22px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--brand); color: var(--brand-fg);
  font: inherit; font-size: 15px; font-weight: 640; line-height: 1.2;
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--brand-strong); color: var(--brand-fg); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-bg); color: var(--bad); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.link-btn {
  background: none; border: 0; color: var(--brand); cursor: pointer;
  font: inherit; font-size: 14px; padding: 6px 2px;
}
.icon-btn {
  flex: none; display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); }
.icon-btn svg { display: block; grid-area: 1 / 1; }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }

/* -------------------------------------------------------------- surfaces -- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--sh-sm);
}
.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 640; }
.card code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

.auth {
  max-width: 420px; margin: 52px auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 30px 28px; box-shadow: var(--sh);
}
.auth h1 { font-size: 22px; margin: 0 0 6px; font-weight: 680; }
.auth .sub { color: var(--text-3); margin: 0 0 22px; font-size: 14px; }

.page-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 25px; font-weight: 680; }
.page-head .sub { margin: 5px 0 0; color: var(--text-3); font-size: 14px; }
.page-head .spacer { margin-left: auto; }

.flash, .notice {
  padding: 12px 15px; border-radius: var(--r); font-size: 14px;
  margin: 16px 0 0; border: 1px solid; line-height: 1.5;
}
.flash-ok, .notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.flash-error, .notice-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }

.empty { text-align: center; padding: 48px 20px; color: var(--text-3); }
.search { margin-bottom: 18px; max-width: 360px; }

/* ================================================= the capture experience == */

.capture { max-width: 680px; margin: 0 auto; padding: 24px 22px 56px; width: 100%; }
.capture-head { text-align: center; margin-bottom: 26px; }
.capture-head h1 { font-size: 26px; margin: 0 0 6px; font-weight: 700; }
.capture-head .sub { color: var(--text-3); margin: 0; font-size: 14.5px; }

/* The signing surface stays white paper in both themes: whatever is drawn here
   is exported and placed on documents, so the ink must be dark. */
.pad-wrap {
  position: relative; margin: 20px 0 14px;
  background: var(--paper);
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
#pad {
  display: block; width: 100%; height: 230px;
  /* The pad owns every touch that starts on it. Without this the browser
     treats a drag as a scroll, cancels the pointer stream mid-stroke, and
     nothing is drawn. */
  touch-action: none; -ms-touch-action: none;
  overscroll-behavior: contain;
  cursor: crosshair;
  border-radius: var(--r-lg);
}
.pad-base {
  position: absolute; left: 28px; right: 28px; bottom: 54px;
  border-bottom: 1px dashed var(--paper-line); pointer-events: none;
}
.pad-hint {
  position: absolute; left: 0; right: 0; bottom: 24px; margin: 0;
  text-align: center; color: #9aa3b2; font-size: 14px; pointer-events: none;
}

.pad-actions { display: flex; gap: 10px; }
.pad-actions .btn { flex: 1; }

/* ---- the review step ---- */

.review { text-align: center; padding: 8px 0 20px; }
.review h1 { font-size: 24px; margin: 0 0 6px; font-weight: 700; }
.review .sub { color: var(--text-3); margin: 0 0 24px; font-size: 14.5px; }

/* White paper whatever the theme, because that is what the signature will be
   placed on. Judging it against a dark panel would be judging it against
   something it will never sit on. */
.review-paper {
  background: var(--paper);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  padding: 26px 20px; min-height: 180px;
  display: grid; place-items: center;
  box-shadow: var(--sh-sm);
}
.review-paper img { max-height: 150px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.review-name {
  margin: 14px 0 26px; font-size: 15px; font-weight: 640; color: var(--text-2);
}
.review-actions { display: flex; gap: 10px; }
.review-actions .btn { flex: 1; }

.thanks { text-align: center; padding: 56px 20px; }
.thanks h1 { font-size: 26px; margin: 16px 0 6px; font-weight: 700; }
.thanks .sub { color: var(--text-3); margin: 0 0 26px; font-size: 15px; }
.tick {
  display: inline-grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--ok-bg); color: var(--ok);
}

/* ======================================================== the admin list === */

.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.sig-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
  display: flex; flex-direction: column;
}
/* A checkerboard, so a transparent PNG reads as transparent rather than as a
   white rectangle that will not sit cleanly on a form. */
.sig-ink {
  /* Flex with an explicit pixel cap on the image, rather than grid with
     max-height:100%. A percentage height inside a centred grid area has nothing
     definite to resolve against, so the image fell back to its natural size and
     spilled over the name and the buttons below it. overflow is belt and braces
     for a signature with an unusual aspect ratio. */
  display: flex; align-items: center; justify-content: center;
  height: 150px; padding: 12px; overflow: hidden;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%),
    linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border-bottom: 1px solid var(--border);
}
.sig-ink img {
  /* 150px box less 12px padding top and bottom. */
  max-height: 126px; max-width: 100%;
  width: auto; height: auto; object-fit: contain;
}
.sig-meta { padding: 12px 14px 4px; }
.sig-meta strong { display: block; font-size: 14.5px; }
.sig-meta .hint { margin-top: 2px; font-size: 12px; }
.sig-actions { display: flex; gap: 8px; padding: 12px 14px; margin-top: auto; }
.sig-actions .btn { flex: 1; }

/* ---------------------------------------------------------------- footer -- */

.siteftr { border-top: 1px solid var(--border); padding: 20px 0 28px; margin-top: auto; flex-shrink: 0; }
.siteftr p { margin: 0; font-size: 13px; color: var(--text-3); }
.ver {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; margin-left: 6px;
}

/* ========================================================== the tuning page */

.tune { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.tune-draw .pad-wrap { margin-top: 0; }
.tune-draw #pad { height: 200px; }

.tune-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.tune-label {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 7px;
}
/* White in either theme: the comparison has to be against what these are
   actually placed on. */
.tune-paper {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px; height: 170px;
}
.tune-paper canvas { display: block; width: 100%; height: 150px; }

.tune-controls h2 { margin-bottom: 2px; }
.tune-controls .field { margin-bottom: 18px; }
.tune-controls label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.tune-controls output {
  font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--brand);
  background: var(--brand-soft); padding: 1px 7px; border-radius: 4px;
}
.tune-controls input[type=range] {
  width: 100%; accent-color: var(--brand); margin: 2px 0 0; height: 22px;
}
.tune-controls .hint { font-size: 12.5px; }

@media (max-width: 960px) {
  .tune { grid-template-columns: 1fr; }
}

/* ============================================================ small screens */

@media (max-width: 820px) {
  /* iOS Safari zooms the whole page when a control under 16px takes focus and
     never zooms back out. */
  input[type=text], input[type=email], input[type=password], input[type=search] { font-size: 16px; }
  .btn { min-height: 46px; }
  .btn-sm { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }
}

@media (max-width: 620px) {
  .bar { gap: 12px; padding: 8px 14px; }
  .bar nav { gap: 12px; }
  .capture { padding: 16px 14px 44px; }
  .capture-head h1 { font-size: 22px; }
  .grid-2 { grid-template-columns: 1fr; gap: 0; }
  /* A signature drawn with a finger needs as much room as the screen can give. */
  #pad { height: 260px; }
  .pad-actions, .review-actions { flex-direction: column-reverse; }
  .wrap { padding: 0 14px; }
  .auth { margin: 22px auto; padding: 24px 18px; }
  .sig-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}