/* The live editor demo on the landing page. The paper is always white, like a PDF; the editor
   chrome around it follows the site's light and dark tokens. */

.demo {
  --field: rgba(36, 86, 214, .1); --field-border: rgba(36, 86, 214, .38); --ink: #1a2a6c;
  margin: 44px auto 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--card); box-shadow: var(--shadow), 0 30px 80px -30px rgba(36, 86, 214, .35); text-align: left;
}
.demo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.demo-bar { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--card); font-size: 14px; }
.demo-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.demo-file { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.demo-tools { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--bg); margin: 0 auto; }
.demo-tool { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.demo-tool:hover { color: var(--text); }
.demo-tool[aria-pressed="true"] { background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(16,24,40,.1), 0 2px 8px rgba(16,24,40,.08); }
.demo-right { display: flex; align-items: center; gap: 10px; }
.demo-private { display: inline-flex; align-items: center; gap: 5px; color: var(--good); font-weight: 600; font-size: 13px; }
.demo-private svg { width: 15px; height: 15px; }
.demo-undo { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); cursor: pointer; }
.demo-undo:disabled { opacity: .4; cursor: default; }
.demo button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.demo-stage { position: relative; padding: clamp(14px, 4vw, 40px); background: color-mix(in srgb, var(--bg) 78%, #8b95a7 22%); }
.paper {
  position: relative; container-type: inline-size; width: min(100%, 720px); margin: 0 auto; background: #fff; color: #1f2937;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 12px 32px rgba(0,0,0,.14); border-radius: 2px;
  font-family: Georgia, "Times New Roman", serif; user-select: none; touch-action: manipulation;
}
.paper > * { font-size: 2.2cqi; }
/* Percent padding follows the paper's own width (cqi here would follow the viewport). */
.paper { padding: 5% 6.5% 6%; }
.paper[data-cursor="text"], .paper[data-cursor="date"] { cursor: text; }
.paper[data-cursor="check"], .paper[data-cursor="sign"] { cursor: crosshair; }
.paper-head { border-bottom: .35cqi solid #1f2937; padding-bottom: 1.6cqi; margin-bottom: 2.2cqi; }
.paper-title { font-size: 4.6cqi; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.paper-sub { font-size: 1.9cqi; color: #4b5563; margin-top: .6cqi; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.paper-section { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; font-size: 1.9cqi; letter-spacing: .06em; text-transform: uppercase; background: #f1f2f4; padding: .8cqi 1.4cqi; margin: 3cqi 0 1.6cqi; }
.paper-row { display: flex; gap: 2.4cqi; margin: 1.4cqi 0; }
.paper-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5cqi; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1.7cqi; color: #4b5563; }
.paper-field.wide, .paper-line.wide { flex: 1.9; }
.field {
  width: 100%; min-width: 0; height: 4.6cqi; min-height: 20px; border: 0; border-bottom: .2cqi solid #374151; border-radius: 0; padding: 0 1cqi;
  background: var(--field); outline: 1px solid var(--field-border); outline-offset: -1px;
  font: 2.4cqi/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); user-select: text;
  transition: background .15s;
}
.field:focus { background: rgba(36, 86, 214, .04); outline: 2px solid #2456d6; }
.field::placeholder { color: #9aa3b1; }
.paper-row.boxes { gap: 5cqi; margin: 2cqi 0; }
.paper-box { display: flex; align-items: center; gap: 1.2cqi; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 2cqi; cursor: pointer; }
.box {
  appearance: none; margin: 0; width: 3cqi; height: 3cqi; min-width: 14px; min-height: 14px; border: .2cqi solid #374151; border-radius: 0;
  background: var(--field); outline: 1px solid var(--field-border); cursor: pointer; display: grid; place-items: center;
}
.box:checked::after { content: ""; width: 60%; height: 35%; border: solid var(--ink); border-width: 0 0 .45cqi .45cqi; transform: translateY(-20%) rotate(-45deg); }
.box:focus-visible { outline: 2px solid #2456d6; }
.paper-text { font-size: 2.1cqi; line-height: 1.5; margin: 1cqi 0 0; color: #374151; }
.sign-row { margin-top: 7cqi; align-items: flex-end; }
.paper-line { flex: 1; border-top: .2cqi solid #1f2937; padding-top: .6cqi; }
.line-label { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1.7cqi; color: #4b5563; }
.paper.wants-sign .paper-line.wide { animation: sign-here 1.4s ease-in-out infinite; }
@keyframes sign-here { 50% { box-shadow: 0 -1.2cqi 0 -0.8cqi rgba(36, 86, 214, .0), 0 -4cqi 0 0 rgba(36, 86, 214, .12); } }

/* Things placed on the page. Positions are in % of the paper, so they stay put at any width. */
.stamp { position: absolute; transform: translate(0, -50%); cursor: grab; touch-action: none; }
.stamp.dragging { cursor: grabbing; }
.stamp.text { font: 2.4cqi/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); }
.stamp.text input { font: inherit; color: inherit; border: 0; padding: .3cqi .6cqi; background: rgba(36, 86, 214, .06); outline: 1px dashed rgba(36, 86, 214, .5); min-width: 8cqi; width: 22cqi; user-select: text; }
.stamp.text input:not(:focus) { background: none; outline-color: transparent; }
.stamp.text:hover input:not(:focus) { outline-color: rgba(36, 86, 214, .5); }
.stamp.mark { width: 3.6cqi; height: 3.6cqi; transform: translate(-50%, -50%); }
.stamp.mark svg { width: 100%; height: 100%; stroke: var(--ink); stroke-width: 3; }
.stamp.mark.dot svg { fill: var(--ink); stroke: none; }
.stamp.mark.dot { width: 2.4cqi; height: 2.4cqi; }
.stamp.sign { transform: translate(-50%, -80%); }
.stamp.sign { width: 30%; }
.stamp.sign img { display: block; width: 100%; height: auto; pointer-events: none; }
.stamp:focus { outline: none; }
.stamp.sign:hover, .stamp.sign:focus-within { outline: 1px dashed rgba(36, 86, 214, .6); outline-offset: 4px; }
.stamp .resize {
  position: absolute; right: -11px; bottom: -11px; width: 18px; height: 18px; border-radius: 50%; padding: 0;
  border: 2px solid #2456d6; background: #fff; display: none; cursor: nwse-resize; touch-action: none;
}
.stamp:hover .resize, .stamp:focus-within .resize { display: block; }
@media (pointer: coarse) { .stamp .resize { width: 26px; height: 26px; right: -15px; bottom: -15px; } }
.stamp .remove {
  position: absolute; top: -12px; right: -12px; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  background: #111827; color: #fff; display: none; place-items: center; cursor: pointer; font: 14px/1 sans-serif;
}
.stamp:hover .remove, .stamp:focus-within .remove { display: grid; }
.stamp.fresh { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; scale: .85; } }

.demo-toast {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 12px; background: #111827; color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  pointer-events: none; /* a hint must never be what a tap lands on */
}
@media (max-width: 600px) { .demo-toast { bottom: auto; top: 10px; font-size: 13px; } }
.demo-note { color: var(--muted); font-size: 14px; margin: 14px auto 0; max-width: 620px; }

.demo-pad { width: min(600px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.demo-pad::backdrop { background: rgba(10, 14, 22, .45); }
.pad-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 12px; }
.pad-right { display: flex; align-items: center; gap: 12px; }
.pad-inks { display: flex; gap: 6px; }
.pad-ink { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--card); outline: 1px solid var(--line); cursor: pointer; }
.pad-ink[data-ink="black"] { background: #111827; }
.pad-ink[data-ink="blue"] { background: #1e3a8a; }
.pad-ink[aria-checked="true"] { outline: 2px solid var(--accent); }
.pad-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); }
.pad-tabs button, .pad-actions button { height: 34px; padding: 0 14px; border-radius: 8px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.pad-tabs button[aria-pressed="true"] { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.pad-canvas { display: block; width: 100%; aspect-ratio: 560 / 200; height: auto; background: #fff; border: 1px dashed #b8c0cc; border-radius: 10px; touch-action: none; cursor: crosshair; }
.pad-type { display: block; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.pad-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; max-height: 330px; overflow-y: auto; padding: 2px; }
.pad-style { position: relative; display: grid; place-items: center; height: 92px; padding: 6px 12px 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pad-style:hover { border-color: var(--accent); }
.pad-style[aria-checked="true"] { border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pad-style .sample { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.7; padding: 0 .35em; color: #1a2a6c; }
.pad-style .label { position: absolute; left: 10px; bottom: 5px; font-size: 11px; color: #6b7280; }
.pad-style[aria-checked="true"] .label { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) { .pad-styles { grid-template-columns: 1fr; } .pad-style { height: 76px; } }
.pad-actions { display: flex; gap: 8px; margin-top: 14px; }
.pad-actions span { flex: 1; }
.pad-actions .pad-use { background: var(--accent); color: #fff; }
.pad-actions .pad-cancel, .pad-actions .pad-clear { border: 1px solid var(--line); color: var(--text); }

@media (max-width: 1100px) { .demo-brand, .demo-private { display: none; } }
@media (max-width: 900px) and (min-width: 721px) { .demo-tool span { display: none; } }
@media (max-width: 720px) {
  .demo-bar { flex-wrap: wrap; height: auto; padding: 10px; row-gap: 8px; }
  .demo-file { flex: 1; }
  .demo-tools { order: 3; width: 100%; justify-content: space-between; margin: 0; }
  .demo-tool { flex: 1; justify-content: center; padding: 0 6px; }
}
@media (max-width: 480px) {
  .demo-tool span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stamp.fresh, .paper.wants-sign .paper-line.wide { animation: none; } }

/* Phones: form text a person can read, and 16px inputs so iOS does not zoom in on focus. */
@media (max-width: 600px) {
  .paper-field, .line-label { font-size: max(1.7cqi, 11px); }
  .paper-box { font-size: max(2cqi, 13px); }
  .paper-text { font-size: max(2.1cqi, 12px); }
  .paper-sub { font-size: max(1.9cqi, 11px); }
  .paper-section { font-size: max(1.9cqi, 11px); }
  .field, .stamp.text input { font-size: 16px; height: 30px; }
  .stamp.text { font-size: 16px; }
  .box { width: 18px; height: 18px; }
  .stamp.mark { width: 20px; height: 20px; }
  .stamp.mark.dot { width: 13px; height: 13px; }
  .paper-row { gap: 10px; }
  .paper-row.boxes { flex-wrap: wrap; gap: 8px 18px; }
}