/* Fill & Sign — free PDF fill and sign. Built by Eli Otterholt. */

/* Signature faces (Caveat & Dancing Script, SIL Open Font License 1.1) */
@font-face{
  font-family:'FS Caveat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('vendor/caveat.woff2') format('woff2');
}
@font-face{
  font-family:'FS Dancing'; font-style:normal; font-weight:600; font-display:swap;
  src:url('vendor/dancing.woff2') format('woff2');
}

:root{
  --bg:#ffffff;
  --bg-2:#f6f7f9;
  --bg-3:#ecedf1;
  --fg:#0f1216;
  --fg-2:#5c646f;
  --fg-3:#8d95a1;
  --line:#e3e6ea;
  --ink:#12161c;
  --ink-contrast:#ffffff;
  --accent:#1b4fd8;
  --accent-soft:#e9eeff;
  --danger:#c8202a;
  --ok:#12855b;
  --tools:#0f8a5f;          /* the sibling tools share this green */
  --tools-soft:#e2f5ec;
  --stage:#dfe2e7;
  --sheet:#ffffff;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,18,22,.06), 0 8px 24px rgba(15,18,22,.08);
  /* The gap above the first page, and the gutter beside it — half again as
     wide, so the paper is clearly standing on the grey rather than jammed
     into the corners of it. One pair of numbers, whatever the page's size or
     shape, because a letter page and a wide scan should sit the same way. */
  --stage-top:14px;
  --gutter:21px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-doc:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1216; --bg-2:#161a20; --bg-3:#1e232a;
    --fg:#eef1f5; --fg-2:#a3acb8; --fg-3:#79828e;
    --line:#262c34; --ink:#eef1f5; --ink-contrast:#0f1216;
    --accent:#7ba0ff; --accent-soft:#1a2540;
    --danger:#ff6b6b; --ok:#3ecf8e; --stage:#08090c; --sheet:#161a20;
    --tools:#3ecf8e; --tools-soft:#123227;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
/* `hidden` means not rendered, and it has to beat a class that sets display.
   The UA rule for it is display:none at the very bottom of the cascade, so
   .btn-icon{display:grid} quietly outranked it — the thickness button drew
   itself on every selection, signature or not, while every script that asked
   whether it was hidden was told yes. One rule rather than one per class,
   because the next class to set display would have the same argument. */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  font-family:var(--font);
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
svg{width:22px;height:22px;display:block;}
button{font-family:inherit;font-size:inherit;color:inherit;border:0;background:none;cursor:pointer;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- controls ---------- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink); color:var(--ink-contrast);
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  padding:15px 30px; border-radius:999px;
  transition:transform .12s ease, opacity .12s ease;
}
.btn-primary.big{font-size:17px;padding:17px 42px;}
.btn-primary:active{transform:scale(.975);}
.btn-primary:disabled{opacity:.35;}
.btn-primary.wide,.btn-ghost.wide{width:100%;border-radius:var(--radius);}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--bg-2); color:var(--fg); font-weight:600; font-size:15px;
  padding:13px 20px; border-radius:999px; border:1px solid var(--line);
}
.btn-ghost.sm{padding:9px 16px;font-size:14px;}
.btn-ghost:active{background:var(--bg-3);}
.btn-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:var(--fg);flex:none;}
.btn-icon:active{background:var(--bg-3);}
.btn-icon:disabled{opacity:.28;}
.btn-icon.danger{color:var(--danger);}
.btn-icon-sm{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--fg-3);flex:none;}
.btn-icon-sm svg{width:18px;height:18px;}
.btn-chip{
  flex:none;padding:7px 12px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--fg-2);
}
.btn-chip[hidden]{display:none;}
.btn-save{background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:9px 18px;border-radius:999px;flex:none;}
@media (prefers-color-scheme: dark){ .btn-save{color:#0b1020;} }
.btn-save:active{opacity:.85;}
.linkish{color:var(--accent);font-size:14.5px;font-weight:500;padding:4px 2px;}
.linkish.quiet{color:var(--fg-3);font-size:12.5px;font-weight:400;text-decoration:underline;}
.linkish.center{display:block;margin:16px auto 0;}
.sep{width:1px;height:22px;background:var(--line);flex:none;margin:0 5px;}

/* ---------- home ---------- */
.home{max-width:620px;margin:0 auto;padding:0 24px calc(var(--safe-b) + 40px);}
.home[hidden]{display:none;}
.home-inner{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--safe-t) + 96px) 0 56px;
}
.brand{
  position:absolute;top:calc(var(--safe-t) + 26px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
}
.brand-mark{width:26px;height:26px;border-radius:7px;}
.brand-name{font-size:15px;font-weight:650;letter-spacing:-.02em;}
.hero-title{font-size:clamp(30px,8.5vw,40px);line-height:1.08;letter-spacing:-.035em;margin:34px 0 12px;font-weight:700;}
.hero-title{margin-bottom:20px;}

/* One line of promise between the heading and the box — it says everything
   the four chips used to, without a second paragraph's worth of furniture. */
.free-line{
  margin:2px 0 12px;font-size:15.5px;line-height:1.5;color:var(--fg-2);max-width:32ch;
}
.free-line strong{color:var(--accent);font-weight:700;}
/* ---- the one way in ----
   A dashed box rather than a button, because the thing it wants is a file and
   a dashed box is what a file goes into. Everything else on the page is
   quieter than this. */
.drop{width:100%;max-width:430px;margin:22px 0 4px;}
.dropbox{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:100%;padding:30px 22px 26px;border-radius:22px;text-align:center;
  background:var(--accent-soft);
  border:2px dashed color-mix(in srgb, var(--accent) 42%, transparent);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.dropbox:active{transform:scale(.99);}
.dropbox-ico{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:9px;
  border-radius:16px;background:var(--accent);color:#fff;
}
@media (prefers-color-scheme: dark){ .dropbox-ico{color:#0b1020;} }
.dropbox-ico svg{width:27px;height:27px;}
.dropbox strong{font-size:19px;letter-spacing:-.02em;color:var(--fg);}
.dropbox-sub{font-size:13px;line-height:1.45;color:var(--fg-2);max-width:30ch;}
.dropbox-drag{margin-top:8px;font-size:12.5px;color:var(--accent);font-weight:600;}
@media (pointer:coarse){ .dropbox-drag{display:none;} }
.drop.over .dropbox{
  background:var(--bg-2);
  border-color:var(--accent);border-style:solid;
}
.whylink{margin:16px 0 0;}
.brand + .hero-title{margin-top:0;}

.resume{
  display:flex;align-items:center;gap:10px;margin-top:34px;padding:11px 12px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  width:100%;max-width:400px;text-align:left;
}
.resume[hidden]{display:none;}
.resume-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.resume-text strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.resume-text span{font-size:12px;color:var(--fg-3);}

/* ---- three ways in, asked once, after you have already decided to start ---- */
.pickway{display:flex;flex-direction:column;gap:9px;margin:4px 0 2px;}
.way{
  --tint:var(--accent);
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 14px 14px 13px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
  transition:border-color .13s ease, background .13s ease, transform .1s ease;
}
.way:active{transform:scale(.99);background:var(--bg-3);}
@media (hover:hover){ .way:hover{border-color:var(--tint);} }
.way-art{
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:13px;color:var(--tint);
  background:color-mix(in srgb, var(--tint) 12%, transparent);
}
.way-art svg{width:26px;height:26px;}
.way-img{--tint:var(--tools);}
.way-cam{--tint:#8a5cf6;}
@media (prefers-color-scheme: dark){ .way-cam{--tint:#b39bff;} }
.way-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.way-text strong{font-size:15.5px;letter-spacing:-.01em;}
.way-text small{font-size:12.5px;line-height:1.4;color:var(--fg-3);}
.way-go{width:17px;height:17px;flex:none;color:var(--fg-3);}

/* ---- why it is free: five short answers, not five paragraphs ----
   The gap belongs between the pairs, not inside them: a heading floating
   equidistant from its own answer and the next question belongs to neither. */
.why{margin:0;}
.why dt{
  margin:20px 0 4px;font-size:14.5px;font-weight:650;
  letter-spacing:-.01em;color:var(--fg);
}
.why dt:first-child{margin-top:2px;}
.why dd{margin:0;font-size:14px;line-height:1.55;color:var(--fg-2);}

/* ---------- the two "how to be quick about it" cards ----------
   Side by side where there is room, stacked where there is not. Each card
   carries one colour all the way through — rule, heading, key caps — so the
   one that applies to you is identifiable before it is read. */
.tips{
  display:grid;gap:14px;margin:34px 0 4px;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
}
.tipcard{
  --tint:var(--accent); --tint-soft:var(--accent-soft);
  position:relative;overflow:hidden;
  padding:18px 18px 16px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
}
.tipcard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--tint);}
.tip-touch{--tint:var(--tools); --tint-soft:var(--tools-soft);}
.tipcard h3{
  display:flex;align-items:center;gap:9px;
  margin:2px 0 13px;font-size:15px;letter-spacing:-.01em;color:var(--tint);
}
.tipcard h3 svg{width:20px;height:20px;flex:none;}
.tipcard dl{
  display:grid;grid-template-columns:auto 1fr;gap:9px 13px;
  margin:0;align-items:baseline;
}
.tipcard dt{
  font-size:12px;font-weight:600;color:var(--fg-2);
  white-space:nowrap;display:flex;align-items:center;gap:2px;
}
.tipcard dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--fg-2);}
.tipcard dd em{font-style:normal;color:var(--fg);font-weight:600;}
.tipcard kbd{
  font-family:var(--font);font-size:11.5px;font-weight:650;line-height:1;
  padding:4px 6px;border-radius:6px;
  color:var(--tint);background:var(--tint-soft);
  border:1px solid color-mix(in srgb, var(--tint) 22%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--tint) 16%, transparent);
}
.tipnote{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--fg-3);
}
/* The column the rest of the page reads in is deliberately narrow, which is
   right for prose and wrong for two side-by-side tables of shortcuts. Where
   the window can afford it these step outside it and sit as a pair. */
@media (min-width:920px){
  .tips{width:min(94vw, 900px);margin-left:50%;transform:translateX(-50%);}
}
/* Show the card for the hand you are actually using first — but keep both,
   because a phone gets plugged into a keyboard and a laptop has a touchscreen. */
@media (hover:none){ .tips{ grid-auto-flow:row; } .tip-touch{ order:-1; } }
@media (max-width:520px){
  .tipcard{padding:16px 15px 14px;}
  .tipcard dl{grid-template-columns:1fr;gap:2px;}
  .tipcard dt{margin-top:9px;}
  .tipcard dt:first-child{margin-top:0;}
}

.seo{padding:20px 0 0;color:var(--fg-2);border-top:1px solid var(--line);}
.seo h2{font-size:19px;letter-spacing:-.02em;color:var(--fg);margin:26px 0 12px;line-height:1.25;}
.seo p{font-size:14.5px;line-height:1.62;margin:0 0 14px;}
.seo ul{margin:0 0 14px;padding-left:20px;}
.seo li{font-size:14.5px;line-height:1.6;margin-bottom:8px;}
.seo strong{color:var(--fg);}

.site-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}
.made{margin:0 0 10px;font-size:14.5px;}
.foot-links{margin:0 0 14px;font-size:14px;display:flex;gap:10px;align-items:center;color:var(--fg-3);}
.fine{margin:0 0 6px;font-size:12.5px;color:var(--fg-3);}

/* ---------- editor ---------- */
/* left/right/top rather than inset, so the visual-viewport fallback can set
   top and height without fighting a bottom:0 it cannot see */
.editor{position:fixed;left:0;right:0;top:0;height:100%;display:flex;flex-direction:column;background:var(--stage);}
.editor[hidden]{display:none;}
.topbar{
  flex:none;display:flex;align-items:center;gap:4px;
  padding:calc(var(--safe-t) + 8px) 8px 8px;
  background:var(--bg);border-bottom:1px solid var(--line);z-index:5;
}
.topbar-title{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.2;padding:3px 6px;margin:0 -2px;
  font:inherit;color:inherit;text-align:left;background:none;border:0;border-radius:9px;cursor:pointer;
}
.topbar-title:hover{background:var(--bg-3);}
.topbar-title:active{background:var(--bg-3);}
.topbar-title span{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;max-width:100%;}
.topbar-title small{font-size:11px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* move from blank to blank with no keyboard — loud on purpose, because a
   bar you overlook is a bar that does not help */
.jumpbar{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:8px 10px;background:var(--accent-soft);
  border-top:1px solid var(--line);z-index:6;
}
/* On a phone the bar belongs by your thumb, not under the title — and with
   the editor tracking the visible viewport, the bottom of the column is
   exactly the top of the keyboard. On a mouse it stays under the title. */
.topbar{order:0;}
.stage{order:2;}
.jumpbar{order:3;}
.selbar{order:4;}
.toolwrap{order:5;}
@media (hover:hover) and (pointer:fine){
  .jumpbar{order:1;border-top:0;border-bottom:1px solid var(--line);}
}
@media (hover:none){
  .placing{bottom:calc(var(--safe-b) + 152px);}
  .editor.kb .placing{bottom:calc(var(--safe-b) + 86px);}
}
.jump{
  display:flex;align-items:center;justify-content:center;gap:5px;flex:none;
  padding:9px 16px;border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:650;letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(15,18,22,.18);
  transition:transform .12s ease, opacity .12s ease;
}
.jump svg{width:18px;height:18px;}
.jump:active{transform:scale(.96);opacity:.85;}
.jump:disabled{opacity:.4;}
@media (prefers-color-scheme: dark){ .jump{color:#0b1020;} }

/* the middle is a label most of the time, so it stays quiet */
.jump-mid{
  flex:1;min-width:0;background:transparent;box-shadow:none;
  color:var(--accent);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (prefers-color-scheme: dark){ .jump-mid{color:var(--accent);} }
.jump-mid span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jump-mid:active{transform:none;background:rgba(127,127,127,.14);}
/* …until it is the tick button, and then it is the thing to press */
.jump-mid.is-act{
  background:var(--bg);color:var(--accent);font-weight:700;
  box-shadow:0 0 0 1.6px var(--accent);
}

/* With the keyboard up there is no room for the tool row, and you are typing,
   not placing — give the space back to the document. Tapping the page brings
   it straight back. */
.editor.kb .toolbar,
.editor.kb .kbhint{display:none;}

.stage{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--stage-top) 0 0;}
.pages{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:24px;width:max-content;min-width:100%;}
.page{position:relative;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.12);flex:none;}
.page canvas{display:block;width:100%;height:100%;}
.page-num{
  position:absolute;top:6px;right:8px;font-size:10.5px;color:#8d95a1;background:rgba(255,255,255,.86);
  padding:2px 6px;border-radius:6px;pointer-events:none;font-variant-numeric:tabular-nums;z-index:3;
}
.layer{position:absolute;left:0;top:0;transform-origin:0 0;}
.page.arm{cursor:crosshair;}
/* while a tool is armed the page must own the gesture, or a drag scrolls instead of drawing */
/* `manipulation` keeps panning and two-finger zoom and drops only the
   browser's own double-tap-to-zoom, which the page needs for placing text.
   iOS Safari has ignored `user-scalable=no` since iOS 10, so the viewport tag
   cannot do this on its own. */
#stage, .page, .layer{touch-action:manipulation;}
.page.arm, .page.arm .layer{touch-action:none;}

/* A blank line the document only implies. Faint on purpose — a real form
   field is a fact, this is a good guess — but solid enough to aim at. */
/* No wash of colour over the page. A blank is marked by a line under it, the
   way a form already marks one — visible enough to aim at, quiet enough that
   a dense document still reads as the document. */
.linehint{
  position:absolute;transform-origin:0 0;pointer-events:none;z-index:1;
  background:transparent;
  box-shadow:inset 0 -2px 0 rgba(27,79,216,.42);
}
@media (prefers-color-scheme: dark){
  .linehint{box-shadow:inset 0 -2px 0 rgba(123,160,255,.52);}
}
/* while a tool is armed you are aiming yourself — get out of the way */
.editor.arming .linehint{opacity:.3;}

/* ------------------------------------------------------- hovering a blank
   Under a mouse, the blank you are pointing at fills in briefly so you can
   see exactly how far it runs and where it starts — which is the answer to
   "is this the field I think it is?". Transitions, not a loop: it should
   settle, not pulse at you while you read the page underneath it. */
.linehint{
  transition:box-shadow .16s ease, background-color .16s ease;
}
/* A bracket, not a wash: the two end posts are the answer to "where does
   this field actually start and stop", which is the whole question a
   misplaced blank raises. */
.linehint.hot{
  background:rgba(27,79,216,.13);
  box-shadow:inset 0 -2.5px 0 var(--accent),
             inset 3px 0 0 var(--accent),
             inset -3px 0 0 var(--accent);
  animation:spotwake .2s ease-out;
}
.linehint.is-cell.hot{
  background:rgba(27,79,216,.09);
  box-shadow:inset 0 0 0 2px var(--accent);
}
/* a tick box has no marker of its own, so hovering lends it one */
.boxhot{
  position:absolute;transform-origin:0 0;pointer-events:none;z-index:1;
  border-radius:2.5px;
  background:rgba(27,79,216,.10);
  box-shadow:inset 0 0 0 2px var(--accent);
  animation:spotwake .2s ease-out;
}
@keyframes spotwake{ from{opacity:0;} to{opacity:1;} }
@media (prefers-reduced-motion: reduce){
  .linehint{transition:none;}
  .linehint.hot,.boxhot{animation:none;}
}
@media (prefers-color-scheme: dark){
  .linehint.hot{
    background:rgba(123,160,255,.16);
    box-shadow:inset 0 -2.5px 0 var(--accent),
               inset 3px 0 0 var(--accent),
               inset -3px 0 0 var(--accent);
  }
  .linehint.is-cell.hot,.boxhot{
    background:rgba(123,160,255,.13);
    box-shadow:inset 0 0 0 2px var(--accent);
  }
}
/* and the cursor agrees with the highlight */
.editor.overspot .page{cursor:text;}
/* none of this on a finger: there is no hover, only a tap that already works */
@media (hover:none){ .boxhot{display:none;} }

/* brief highlight of a blank line we snapped to */
.snapflash{
  position:absolute;height:3px;border-radius:2px;background:var(--accent);
  opacity:.85;pointer-events:none;transform-origin:0 0;
  animation:snapfade .75s ease-out forwards;
}
@keyframes snapfade{0%{opacity:.9;}60%{opacity:.55;}100%{opacity:0;}}

/* the tick box the keyboard is currently sitting on */
.boxcursor{
  position:absolute;transform-origin:0 0;pointer-events:none;z-index:4;border-radius:2px;
  box-shadow:0 0 0 2px var(--accent), 0 0 0 5px rgba(27,79,216,.22);
  animation:boxpulse 1.4s ease-in-out infinite;
}
@keyframes boxpulse{0%,100%{opacity:1;}50%{opacity:.55;}}

.stage:focus{outline:none;}
.stage:focus-visible{outline:none;}

.kbhint{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 88px);
  display:flex;align-items:center;gap:6px;z-index:7;pointer-events:none;
  background:var(--ink);color:var(--ink-contrast);font-size:12.5px;font-weight:500;
  padding:8px 14px;border-radius:999px;box-shadow:var(--shadow);white-space:nowrap;
}
.kbhint[hidden]{display:none;}
.kbhint kbd{
  font:inherit;font-weight:700;background:rgba(127,127,127,.28);
  border-radius:5px;padding:1px 6px;
}
.kbhint span{opacity:.45;}
@media (hover:none){.kbhint{display:none;}}

/* real form fields declared by the PDF */
.fields{position:absolute;left:0;top:0;right:0;bottom:0;}
.editor.arming .fields{pointer-events:none;}
.fld{
  position:absolute;margin:0;padding:0 2px;border:0;border-radius:2px;
  font-family:var(--font-doc);background:rgba(27,79,216,.09);
  color:#0b0f14;outline:none;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
}
.fld:hover{background:rgba(27,79,216,.15);}
.fld:focus{background:rgba(27,79,216,.16);box-shadow:0 0 0 1.5px var(--accent);}
/* once you change a field, cover whatever the document had printed there */
.fld.is-changed{
  background:
    linear-gradient(rgba(27,79,216,.07), rgba(27,79,216,.07)),
    var(--fldbg, #fff);
}
.fld.is-changed:focus{box-shadow:0 0 0 1.5px var(--accent);}
textarea.fld{resize:none;overflow:auto;padding:1px 2px;line-height:1.25;}
.fld-check,.fld-radio{display:grid;place-items:center;color:#0b0f14;cursor:pointer;}
.fld-radio{border-radius:50%;}
.fld-check svg,.fld-radio svg{width:82%;height:82%;opacity:0;}
.fld-check.is-on svg,.fld-radio.is-on svg{opacity:1;}
select.fld{padding-right:0;}

/* objects */
.it{position:absolute;touch-action:none;transform-origin:0 0;z-index:2;}
.it.sel{outline:1.5px solid var(--accent);outline-offset:2px;border-radius:2px;}
.it-text,.it-date,.it-stamp{
  white-space:pre;font-family:var(--font-doc);line-height:1.25;
  padding:0;margin:0;outline:none;min-width:3.4em;min-height:1em;caret-color:var(--accent);
}
/* An empty box has nothing to show, which makes it invisible — and an
   invisible box cannot be dragged into place. The placeholder gives it a
   body to grab, and goes the moment you type a character. */
.it-text:empty::before{content:attr(data-ph);color:#98a2ae;}
.it.sel > .it-text:empty{background:rgba(27,79,216,.07);border-radius:2px;}
.it-sig img{width:100%;height:100%;display:block;pointer-events:none;}
.it-redact{background:#000;}
.it-mark svg{width:100%;height:100%;}
/* Just outside the corners, not straddling them. Four targets centred on the
   corners of a small text box cover the whole box between them, and then the
   box cannot be dragged at all — every press lands on a handle. Sitting them
   outside leaves the object itself free to grab at any size. */
.handle{position:absolute;width:22px;height:22px;display:none;place-items:center;touch-action:none;}
.handle-nw{left:-20px;top:-20px;}
.handle-ne{right:-20px;top:-20px;}
.handle-sw{left:-20px;bottom:-20px;}
.handle-se{right:-20px;bottom:-20px;}
.handle::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.it.sel > .handle{display:grid;}
/* a mark sitting in a tick box is already the right size — keep the whole
   thing clickable so tapping it cycles the mark instead of resizing it */
.it.is-boxed > .handle{display:none;}
.rubber{position:absolute;background:rgba(0,0,0,.85);outline:1.5px solid var(--accent);pointer-events:none;transform-origin:0 0;}

/* bars */
.selbar{flex:none;background:var(--bg);border-top:1px solid var(--line);}
.selbar[hidden]{display:none;}
/* Centred, with the groups spaced apart rather than everything shoulder to
   shoulder. `safe` matters: a plain centre on an overflowing flex row hides
   the start of it behind the left edge with no way to scroll back. */
.selbar-scroll{
  display:flex;align-items:center;gap:3px;padding:7px 8px;
  justify-content:center;justify-content:safe center;
  overflow-x:auto;scrollbar-width:none;
}
/* Everything in here is trimmed to fit a 414px phone with the fullest
   selection — nudge pad, three colours, both size buttons and Delete. Space
   it any further apart and the last of them goes off the end of the row,
   which is a worse answer to "is it centred?" than a slightly tighter row. */
.selbar-scroll .btn-icon{width:36px;height:36px;}

/* A divider between two groups should hold whatever room is going between
   them, so the groups reach the ends of the bar instead of huddling in the
   middle of it. The spacer stretches; the line inside it does not. With the
   fullest selection there is nothing to share and each falls back to its
   minimum, which is why that minimum is small. */
.selbar-scroll > .sep{
  flex:1 1 auto;min-width:8px;max-width:46px;
  width:auto;height:24px;margin:0;background:none;
  display:flex;align-items:center;justify-content:center;
}
.selbar-scroll > .sep::before{content:"";width:1px;height:22px;background:var(--line);}
.selbar-scroll::-webkit-scrollbar{display:none;}

/* On a phone the same row carries one more button than it used to, so it
   dresses tighter: narrower nudges and buttons, leaner dividers. And while
   the colour row is unfolded the size-and-duplicate cluster steps out — you
   are choosing a colour just then, and three swatches plus that cluster is
   the one combination no small screen can seat. */
@media (hover:none){
  .selbar-scroll{gap:2px;padding:7px 6px;}
  .selbar-scroll .btn-icon{width:33px;height:33px;}
  .selbar-scroll .nud{width:31px;}
  .selbar-scroll > .sep{min-width:4px;max-width:34px;}
  .selbar-scroll:has(#swatches:not(.folded):not([hidden])) #btnSmaller,
  .selbar-scroll:has(#swatches:not(.folded):not([hidden])) #btnBigger,
  .selbar-scroll:has(#swatches:not(.folded):not([hidden])) #sepDupe,
  .selbar-scroll:has(#swatches:not(.folded):not([hidden])) #btnDupe,
  .selbar-scroll:has(#swatches:not(.folded):not([hidden])) #sepColor,
  .selbar-scroll:has(#swatches:not(.folded):not([hidden])) #btnDateFmt{display:none;}
  /* a dated line already carries its format chip; the chip wins the seat,
     and everything around it pulls in a little further to seat it */
  .selbar-scroll:has(#btnDateFmt:not([hidden])) #sepDupe,
  .selbar-scroll:has(#btnDateFmt:not([hidden])) #btnDupe{display:none;}
  .selbar-scroll:has(#btnDateFmt:not([hidden])) .nud{width:28px;}
  .selbar-scroll:has(#btnDateFmt:not([hidden])) .btn-icon{width:30px;}
  #btnDateFmt{font-size:11.5px;padding:7px 7px;}
}
.swatches{display:flex;gap:8px;padding-left:2px;flex:none;}
.swatches[hidden]{display:none;}
.sw{width:25px;height:25px;border-radius:50%;background:var(--c);border:2px solid var(--bg);box-shadow:0 0 0 1.5px var(--line);flex:none;}
.sw.is-on{box-shadow:0 0 0 2px var(--accent);}

/* thickness is a slider in the signature row — see .sigbar */
.penwrap{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.pen-ico{width:21px;height:21px;flex:none;color:var(--fg-2);}
.penwrap input[type=range]{flex:1;min-width:0;accent-color:var(--accent);}
/* On a phone the slider takes the width because a thumb needs the travel. A
   mouse does not: a track the width of the window is a long way to drag for
   nine steps, so give it the length it actually needs and let the rest of the
   row breathe. */
@media (hover:hover) and (pointer:fine){
  .sigbar .penwrap{flex:0 0 auto;gap:8px;}
  .sigbar .penwrap input[type=range]{flex:0 0 auto;width:132px;}
}

/* ---------- the signature row ----------
   Stands exactly where the tool row stands and looks like it, because it is
   doing that row's job for as long as a signature is selected. The buttons
   are the ones from the selection bar, moved here and moved back; the labels
   only appear in this row, where there is room for them. */
.sigbar{
  order:5;flex:none;
  background:var(--bg);border-top:1px solid var(--line);
  padding:6px 12px calc(var(--safe-b) + 9px);
}
.sigbar[hidden]{display:none;}
.sigbar-inner{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 4px;}
.sigbar .btn-icon{width:auto;min-width:74px;height:auto;padding:8px 10px;gap:4px;
  grid-auto-flow:row;place-items:center;border-radius:12px;color:var(--fg-2);}
.sigbar .btn-icon.danger{color:var(--danger);}
.sigbar .btn-icon svg{width:22px;height:22px;}
.sigbar .btn-chip{padding:10px 16px;font-size:13.5px;}
.sigbar .sep{display:none;}
/* the labels are for this row only; everywhere else these are icon buttons */
.tip-label{display:none;font-size:10.5px;font-weight:600;letter-spacing:-.005em;}
.sigbar .tip-label{display:block;}
/* …except the timestamp, whose label is the state it is in, so it says it
   wherever it stands — beside the icon up here, under it down there */
#btnStamp .tip-label{display:block;}
#selbar #btnStamp{
  width:auto;height:auto;min-width:0;padding:6px 11px 6px 8px;
  grid-auto-flow:column;align-items:center;gap:6px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px;color:var(--fg-2);
}
#selbar #btnStamp svg{width:17px;height:17px;}
#selbar #btnStamp .tip-label{font-size:12px;}
/* while it is up, the row of things to add steps aside */
.editor.onsig .toolwrap{display:none;}
.editor.cropping .sigbar,.editor.busytool .sigbar,.editor.kb .sigbar{display:none;}
.slider.thick{margin-top:14px;}

/* The wrapper is the bar; the row inside it is the only part that scrolls,
   so the chips at either end keep their space instead of riding over a label
   the moment you swipe. */
.toolwrap{
  position:relative;flex:none;display:flex;align-items:stretch;
  background:var(--bg);border-top:1px solid var(--line);
  padding:6px 2px calc(var(--safe-b) + 9px);
}
.toolwrap[hidden]{display:none;}
.toolbar{
  flex:1 1 auto;min-width:0;display:flex;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{display:none;}
.tool{
  flex:1 0 auto;min-width:50px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 3px;border-radius:12px;color:var(--fg-2);
}
.tool span{font-size:10.5px;font-weight:600;letter-spacing:-.005em;}
.tool svg{width:22px;height:22px;}
.tool.is-on{color:var(--accent);background:var(--accent-soft);}
.tool:active{background:var(--bg-3);}
@media(min-width:640px){
  .toolwrap{padding-bottom:13px;}
  .toolbar{justify-content:center;gap:4px;}
  .tool{flex:0 0 auto;min-width:82px;}
  .tool span{font-size:11.5px;}
  .selbar-scroll{max-width:680px;margin:0 auto;}
}

.placing{
  position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 88px);
  display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--ink-contrast);
  padding:10px 12px 10px 18px;border-radius:999px;font-size:13.5px;font-weight:500;
  box-shadow:var(--shadow);z-index:6;white-space:nowrap;max-width:92vw;
}
.placing[hidden]{display:none;}
.placing span{overflow:hidden;text-overflow:ellipsis;}
.placing button{color:var(--ink-contrast);opacity:.6;font-weight:600;font-size:13px;padding:2px 6px;flex:none;}

/* ---------- sheets ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;}
.sheet-wrap[hidden]{display:none;}
.sheet-backdrop{position:absolute;inset:0;background:rgba(8,10,14,.45);}
.sheet{
  position:relative;width:100%;max-width:520px;background:var(--sheet);
  border-radius:22px 22px 0 0;padding:8px 20px calc(var(--safe-b) + 20px);
  box-shadow:0 -6px 40px rgba(0,0,0,.25);max-height:92svh;overflow:auto;
  animation:up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes up{from{transform:translateY(14px);opacity:.6;}to{transform:none;opacity:1;}}
@media(min-width:560px){ .sheet-wrap{align-items:center;} .sheet{border-radius:22px;margin:20px;padding-bottom:20px;} }
.sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 10px;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sheet-head h2{font-size:18px;margin:0;letter-spacing:-.02em;}
.lbl{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);margin:0 0 8px;}
.prose p{font-size:14.5px;line-height:1.62;color:var(--fg-2);margin:0 0 13px;}
.prose .sig-line{color:var(--fg);font-weight:500;margin-top:18px;}

.tabs{display:flex;gap:4px;background:var(--bg-2);padding:4px;border-radius:12px;margin-bottom:16px;}
.tab{flex:1;padding:9px;border-radius:9px;font-size:14px;font-weight:600;color:var(--fg-2);}
.tab.is-on{background:var(--sheet);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.1);}

.padwrap{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
#pad{display:block;width:100%;height:190px;touch-action:none;}
.padline{position:absolute;left:26px;right:26px;bottom:46px;border-bottom:1.5px dashed var(--line);pointer-events:none;}
.padhint{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:13px;color:var(--fg-3);pointer-events:none;}
.padhint[hidden]{display:none;}
.pane[data-pane="draw"]{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}

#typeName{width:100%;padding:14px;font-size:17px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);outline:none;}
#typeName:focus{border-color:var(--accent);}
.fontpick{display:grid;gap:8px;margin-top:12px;}
.fontopt{padding:8px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);text-align:left;font-size:26px;line-height:1.4;color:var(--fg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.fontopt.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}

.photo-help{font-size:13.5px;line-height:1.55;color:var(--fg-2);margin:0 0 14px;}
.photo-prev{margin-top:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:10px;
  background-image:linear-gradient(45deg,var(--bg-3) 25%,transparent 25%),linear-gradient(-45deg,var(--bg-3) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--bg-3) 75%),linear-gradient(-45deg,transparent 75%,var(--bg-3) 75%);
  background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;}
.photo-prev img{width:100%;display:block;max-height:180px;object-fit:contain;}
.slider{display:block;margin-top:14px;font-size:12.5px;color:var(--fg-3);font-weight:600;}
.slider input{width:100%;margin-top:8px;accent-color:var(--accent);}

.saved-sigs{margin-bottom:16px;}
.saved-list{display:flex;gap:10px;flex-wrap:wrap;}
.saved-item{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:6px 10px;height:52px;display:grid;place-items:center;}
.saved-item img{max-height:38px;max-width:120px;display:block;}
.saved-del{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--fg-3);color:var(--bg);display:grid;place-items:center;}
.saved-del svg{width:12px;height:12px;}

.sig-colors{display:flex;align-items:center;gap:9px;margin:18px 0;flex-wrap:wrap;}
.sig-colors .lbl{margin:0 2px 0 0;}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--fg-2);margin-left:auto;}
.chk input{accent-color:var(--accent);width:16px;height:16px;}
.wide-chk{margin:18px 0 4px;}


/* ---------- done screen ---------- */
.done{position:fixed;inset:0;z-index:30;background:var(--bg);overflow:auto;}
.done[hidden]{display:none;}
.done-inner{max-width:440px;margin:0 auto;padding:calc(var(--safe-t) + 56px) 24px calc(var(--safe-b) + 44px);}
.done-tick{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:20px;}
.done-tick svg{width:26px;height:26px;}
.done h2{font-size:27px;letter-spacing:-.03em;margin:0 0 10px;}
.done-note{font-size:14px;line-height:1.55;color:var(--fg-2);margin:0 0 26px;}
.namefield{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);margin-bottom:18px;}
.namefield input{display:block;width:100%;margin-top:8px;padding:13px;font-size:15px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);outline:none;text-transform:none;letter-spacing:normal;font-weight:400;}
.namefield input:focus{border-color:var(--accent);}
#btnShare{margin-top:10px;}
/* where to go once the job is done — one quiet group, three clear exits */
.next-up{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.next-lead{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);}
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.next-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px 8px;border-radius:14px;border:1px solid transparent;
  font-size:12.5px;font-weight:650;letter-spacing:-.01em;text-align:center;line-height:1.2;
  transition:transform .12s ease, opacity .12s ease;
}
.next-tile:hover{text-decoration:none;opacity:.85;}
.next-tile:active{transform:scale(.97);}
.next-tile svg{width:21px;height:21px;}
.t-new{background:var(--accent-soft);color:var(--accent);}
.t-tools{background:var(--tools-soft);color:var(--tools);}
.t-home{background:var(--bg-2);border-color:var(--line);color:var(--fg-2);}

.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;}
.confetti[hidden]{display:none;}

.pitch-card{margin-top:34px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);}
.pitch-card h3{font-size:15.5px;margin:0 0 8px;letter-spacing:-.01em;}
.pitch-card p{font-size:14px;line-height:1.6;color:var(--fg-2);margin:0 0 14px;}

/* ---------- toast / busy ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-b) + 96px);transform:translateX(-50%);
  background:var(--ink);color:var(--ink-contrast);padding:12px 18px;border-radius:16px;
  font-size:13.5px;font-weight:500;z-index:60;box-shadow:var(--shadow);
  max-width:88vw;text-align:center;line-height:1.45;animation:up .2s ease;
}
.toast[hidden]{display:none;}
.busy{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:rgba(255,255,255,.82);color:var(--fg);font-size:14px;font-weight:500;}
@media (prefers-color-scheme: dark){ .busy{background:rgba(15,18,22,.85);} }
.busy[hidden]{display:none;}
.spin{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--accent);animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}

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

/* ================================================ CHOOSING A VIEW
   Two ways to fill the same document, given equal weight — the right one
   depends on the form and on the person, so neither is preselected. */
.pick{position:fixed;inset:0;z-index:25;background:var(--bg);overflow:auto;display:flex;}
.pick[hidden]{display:none;}
.pick-inner{
  margin:auto;width:100%;max-width:560px;
  padding:calc(var(--safe-t) + 40px) 24px calc(var(--safe-b) + 40px);
  text-align:center;
}
.pick-file{margin:0 0 26px;font-size:13.5px;color:var(--fg-3);display:flex;flex-direction:column;gap:3px;}
.pick-file strong{
  font-size:15px;color:var(--fg);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pick-q{font-size:clamp(22px,6vw,27px);letter-spacing:-.03em;line-height:1.2;margin:0 0 22px;}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:430px){ .pick-grid{grid-template-columns:1fr;} }
.pick-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 14px 18px;border-radius:18px;
  background:var(--bg-2);border:1.5px solid var(--line);text-align:center;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pick-card:hover{border-color:var(--accent);box-shadow:var(--shadow);}
.pick-card:active{transform:scale(.98);}
.pick-card strong{font-size:16px;font-weight:650;letter-spacing:-.02em;}
.pick-sub{font-size:12.5px;line-height:1.4;color:var(--fg-2);max-width:22ch;}
.pick-art{display:block;width:100%;max-width:132px;}
.pick-art svg{width:100%;height:auto;display:block;}
.pa-box{fill:var(--accent);opacity:.22;}
.pa-dim{fill:var(--fg-3);opacity:.55;}
.pa-rule{fill:var(--accent);opacity:.5;}
.pa-page{fill:var(--bg);stroke:var(--line);stroke-width:1.5;}
.pick-note{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--fg-3);}
.pick-note:empty{display:none;}

/* ================================================ SIMPLE VIEW
   The same document as one tall column of questions. Everything typed here
   goes straight into the objects the page view draws, so Review is a change
   of view rather than a conversion. */
.simple{position:fixed;left:0;right:0;top:0;height:100%;display:flex;flex-direction:column;background:var(--bg-2);}
.simple[hidden]{display:none;}
.simple-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.simple-list{max-width:620px;margin:0 auto;padding:14px 16px 0;display:flex;flex-direction:column;gap:10px;}

.q-card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px 15px;}
.q-page{
  max-width:620px;margin:18px auto 4px;padding:0 16px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
}
.q-label{
  display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;
  color:var(--fg);margin-bottom:9px;line-height:1.35;
}
.q-num{color:var(--fg-3);font-weight:500;}
.q-card input[type=text],.q-card textarea,.q-card select{
  display:block;width:100%;font:inherit;font-size:16px;   /* 16px stops iOS zooming in */
  color:var(--fg);background:var(--bg-2);
  padding:12px 13px;border-radius:12px;border:1.5px solid var(--line);outline:none;
}
.q-card textarea{min-height:92px;resize:vertical;line-height:1.45;}
.q-card input:focus,.q-card textarea:focus,.q-card select:focus{border-color:var(--accent);background:var(--bg);}
.q-row{display:flex;gap:8px;align-items:center;}
.q-row input{flex:1;min-width:0;}
.q-chip{
  flex:none;padding:9px 13px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);
}
.q-chip:active{opacity:.8;}

/* a tick box reads as a switch, not a form control */
.q-toggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;}
.q-toggle .q-label{margin:0;flex:1;}
.q-mark{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1.8px solid var(--line);background:var(--bg-2);color:transparent;
}
.q-mark svg{width:22px;height:22px;}
.q-card.is-on .q-mark{background:var(--accent);border-color:var(--accent);color:#fff;}
@media (prefers-color-scheme: dark){ .q-card.is-on .q-mark{color:#0b1020;} }
.q-alt{
  margin-top:10px;font-size:12.5px;font-weight:600;color:var(--fg-3);
  padding:5px 10px;border-radius:999px;background:var(--bg-2);
}
.q-card.is-on .q-alt{color:var(--accent);}

/* one card for a whole radio group */
.q-opts{display:flex;flex-wrap:wrap;gap:7px;}
.q-opt{
  padding:10px 14px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--bg-2);border:1.5px solid var(--line);color:var(--fg-2);
}
.q-opt.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}

.q-sign{display:flex;align-items:center;gap:12px;}
.q-sign .btn-ghost{flex:none;}
.q-sig-prev{
  flex:1;min-width:0;height:46px;display:flex;align-items:center;
  border-radius:10px;background:var(--bg-2);padding:4px 8px;
}
.q-sig-prev img{max-height:38px;max-width:100%;object-fit:contain;}

.simple-end{max-width:620px;margin:0 auto;padding:26px 16px calc(var(--safe-b) + 34px);}
.simple-end-note{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--fg-3);text-align:center;}

/* text written in a table cell sits in the middle of the box */
.it.in-cell .it-text{text-align:center;}
.it.field-overflow{outline:2px solid #b42318;background:rgba(180,35,24,.08);}
.q-section{font-size:1rem;margin:1.8rem 0 .4rem;color:var(--accent);}
.q-adjust{margin-top:.6rem;font-size:.82rem;color:#526070;}
.q-adjust summary{cursor:pointer;}
.q-adjust label{display:block;margin:.6rem 0 .2rem;}
.q-adjust input,.q-adjust select{width:100%;padding:.5rem;border:1px solid #cbd2da;border-radius:6px;background:white;color:#192331;}
.q-preview{margin-top:.5rem;}
/* and the blank itself is the whole box, not a line to rest on */
.linehint.is-cell{
  border-radius:2px;
  background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(27,79,216,.34);
}
@media (prefers-color-scheme: dark){
  .linehint.is-cell{box-shadow:inset 0 0 0 1.5px rgba(123,160,255,.44);}
}

/* ---------------------------------------------------- scan a paper form */
.btn-ghost.big{padding:14px 22px;font-size:16px;}
#btnScan{margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:11px;text-align:left;}
.btn-lines{display:flex;flex-direction:column;gap:2px;line-height:1.25;}
.btn-lines small{font-size:11.5px;font-weight:500;color:var(--fg-3);letter-spacing:0;}
.btn-ico{width:19px;height:19px;flex:none;}
.sheet-note{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--fg-2);}
.sheet-tip{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--fg-3);}
#btnPics{margin-top:9px;}
.sheet-tall{max-height:94svh;}

.look-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.look{
  padding:11px 8px;border-radius:13px;background:var(--bg);border:1.5px solid var(--line);
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.look.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}

.scan-strip{
  display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.scan-strip::-webkit-scrollbar{display:none;}
.shot{
  position:relative;margin:0;flex:none;scroll-snap-align:center;
  width:min(74vw,340px);
}
.shot canvas{
  display:block;width:100%;height:auto;max-height:46svh;object-fit:contain;
  border:1px solid var(--line);border-radius:12px;background:#fff;
}
.shot figcaption{margin-top:6px;font-size:12px;color:var(--fg-3);text-align:center;}
.shot-drop{
  position:absolute;top:6px;right:6px;width:28px;height:28px;display:grid;place-items:center;
  border-radius:50%;background:rgba(15,18,22,.62);color:#fff;backdrop-filter:blur(3px);
}
.shot-drop svg{width:15px;height:15px;}
#btnScanMore{margin-top:10px;}

/* ------------------------------------------------------------ crop + clear */
.cropbar{
  order:4;flex:none;display:flex;flex-direction:column;gap:6px;
  padding:8px 12px calc(var(--safe-b) + 10px);
  background:var(--accent-soft);border-top:1px solid var(--line);
}
.cropbar[hidden]{display:none;}
.crop-row{display:flex;align-items:center;gap:8px;}
/* The row is its buttons and nothing else. The hint still exists — it is what
   a screen reader is told, and what the tests read — but it takes no room and
   says nothing to the eye; the panel above and the button below do the
   talking. */
.crop-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.crop-row:has(> .crop-nudge){justify-content:center;gap:10px;}
.crop-nudge{flex:none;}
.crop-nudge .nud{width:38px;height:34px;}
.crop-nudge .nud-x{color:var(--accent);opacity:.8;}
.crop-nudge .nud[hidden]{display:none;}
.crop-row .btn-ghost.sm{flex:1;}
.crop-row .btn-save{flex:1;}
/* The one press that does the whole job, so it is the size of one: its own
   line, full width, and the only thing on it. */
.crop-row .btn-ghost.smartcrop{
  display:flex;align-items:center;justify-content:center;gap:9px;
  flex:1 1 auto;padding:11px 16px;font-size:15.5px;
  background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  color:var(--accent);font-weight:700;
}
.smartcrop svg{width:20px;height:20px;flex:none;}
.smartcrop[disabled]{opacity:.55;}

.cropmask{position:absolute;inset:0;pointer-events:none;z-index:6;}
.cropmask .shade{position:absolute;background:rgba(15,18,22,.45);}
.cropmask .frame{position:absolute;outline:1.5px solid #fff;box-shadow:0 0 0 1.5px var(--accent);}
.crophandle{
  position:absolute;width:34px;height:34px;display:grid;place-items:center;
  pointer-events:auto;touch-action:none;z-index:7;
}
.crophandle::after{content:"";width:16px;height:16px;border-radius:4px;background:#fff;border:3px solid var(--accent);}
/* An edge handle is a bar, so it reads as "this whole side moves" rather than
   as a fifth corner that happens to be halfway along. */
.crophandle.edge-n::after,.crophandle.edge-s::after{width:30px;height:11px;border-radius:6px;}
.crophandle.edge-e::after,.crophandle.edge-w::after{width:11px;height:30px;border-radius:6px;}
/* the one the arrows will move */
.crophandle.picked::after{background:var(--accent);border-color:#fff;box-shadow:0 0 0 2px var(--accent);}
.danger-fill{background:var(--danger);color:#fff;}

/* Cropping and rotating are each one job. Three stacked bars at the bottom of
   a phone while you are using exactly one of them is most of the page gone to
   controls you are not touching — so for the duration there is the page, and
   the bar for the thing you came to do, and nothing else. */
.editor.cropping .jumpbar, .editor.busytool .jumpbar,
.editor.cropping .toolwrap, .editor.busytool .toolwrap,
.editor.cropping .selbar,  .editor.busytool .selbar,
.editor.cropping .kbhint,  .editor.busytool .kbhint,
.editor.cropping .linehint,
.editor.cropping .page-num{display:none;}
.editor.cropping .stage,.editor.busytool .stage{padding-top:8px;}

/* rotate: two icons, pressed as many times as it takes */
.rotbar{gap:6px;}
.rot-btn{
  display:grid;place-items:center;width:42px;height:38px;border-radius:11px;flex:none;
  color:var(--accent);background:var(--bg);border:1px solid var(--line);
}
.rot-btn svg{width:23px;height:23px;}
.rot-btn:active{background:var(--accent-soft);}
.rot-all{font-size:12.5px;color:var(--accent);font-weight:600;gap:6px;flex:none;}
.rot-all input{width:15px;height:15px;}

/* ------------------------------------------- five tools, the rest a swipe away
   Nine buttons squeezed into a phone's width leaves each one too narrow to hit
   and hides the fact that there are more. Five fit comfortably; Blackout,
   Rotate, Crop and Clear live past the edge, with a fade at the right so it is
   obvious the row keeps going. */
/* The row runs free. The detents existed to give a parked Simple view a floor
   to come to rest against; with it gone they only fought short swipes. */
@media (hover:none){
  .tool{flex:0 0 20%;min-width:0;}
  .toolbar{overscroll-behavior-x:contain;}
}
/* Everything past the rule is something you do to the page rather than
   something you put on it. */
.tool-div{flex:0 0 1px;align-self:center;height:30px;background:var(--line);margin:0 7px;}

/* Quiet on purpose: these say which way the row runs, they are not something
   to be drawn to. Colour alone carries the meaning — blue for the tools,
   green for Simple view — with no chip behind it competing with the buttons. */
/* the left-hand chip leads to Simple view, so it wears Simple view's colour */
/* nothing further that way: fade it rather than leaving a live-looking arrow */

/* the prompt sits at the top: at the bottom it covered the very controls it
   was telling you about */
.placing{top:calc(var(--safe-t) + 60px);bottom:auto;}
@media (hover:none){
  .placing{top:calc(var(--safe-t) + 106px);bottom:auto;}
  .editor.kb .placing{top:calc(var(--safe-t) + 106px);bottom:auto;}
}

/* nudge pad */
.nudge{display:flex;align-items:center;gap:1px;flex:none;}
.nud{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--fg-2);
  touch-action:none;
}
.nud svg{width:19px;height:19px;}
.nud:active{background:var(--accent-soft);color:var(--accent);}
/* the two axes should be tellable apart without reading them: the vertical
   pair is heavier and sits on a chip, the horizontal pair is a light outline */
.nud-y{background:var(--accent-soft);color:var(--accent);}
.nud-y svg{width:20px;height:20px;}
/* Firmer than they were, so they read as a pair with the vertical two rather
   than as something disabled — but still plainly the lighter of the two axes:
   outline against solid, --fg-2 against the accent. */
.nud-x{color:var(--fg-2);}
.nud-x svg{width:19px;height:19px;}
.nud-y:active{filter:brightness(.92);}

/* ---------- the phone as the laptop's camera ----------
   Two halves of one hand-off. The QR sheet on the laptop is mostly the code
   itself — white behind it always, because a QR in dark mode with a dark
   quiet zone stops scanning. The phone side is a single card with one big
   button, because someone standing over a paper form with their phone out
   has exactly one thing to do. */
.qr-wrap{
  position:relative;display:grid;place-items:center;
  width:216px;height:216px;margin:4px auto 14px;border-radius:16px;
  background:#fff;border:1px solid var(--line);
}
#qrImg{width:192px;height:192px;image-rendering:pixelated;border-radius:6px;}
.qr-spin{
  width:26px;height:26px;border-radius:50%;position:absolute;
  border:3px solid var(--accent-soft);border-top-color:var(--accent);
  animation:qrspin .8s linear infinite;
}
.qr-spin[hidden]{display:none;}
@keyframes qrspin{to{transform:rotate(360deg);}}
.qr-steps{margin:0 0 4px;padding:0 0 0 22px;font-size:14px;line-height:1.7;color:var(--fg-2);}
.qr-steps li::marker{color:var(--accent);font-weight:700;}
.qr-status{
  margin:10px 0 0;font-size:13.5px;font-weight:650;color:var(--accent);
  text-align:center;min-height:1.4em;
}
.qr-status.is-live{color:var(--ok);}
.qr-status.is-bad{color:var(--danger);}

.phonesend{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  padding:20px;background:var(--stage);
}
.phonesend[hidden]{display:none;}
.ps-card{
  width:100%;max-width:420px;background:var(--sheet);border-radius:22px;
  box-shadow:var(--shadow);padding:26px 22px calc(var(--safe-b) + 22px);
  text-align:center;
}
.ps-art{
  width:64px;height:64px;margin:2px auto 10px;border-radius:18px;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);
}
.ps-art svg{width:38px;height:38px;}
.ps-card h1{margin:0 0 4px;font-size:24px;letter-spacing:-.02em;}
.ps-status{margin:0 0 18px;font-size:14px;color:var(--fg-2);min-height:1.5em;}
.ps-status.is-live{color:var(--ok);font-weight:650;}
.ps-status.is-bad{color:var(--danger);font-weight:650;}
.ps-card .btn-ghost.wide{margin-top:10px;}
.ps-count{margin:14px 0 0;font-size:14.5px;font-weight:650;color:var(--ok);}

/* ---------- gathering several things at once ----------
   The rectangle a mouse draws across empty paper, and the quieter outline on
   everything it has caught — quieter than .sel because none of these is
   "picked up", they are merely counted. */
.marquee{
  position:fixed;z-index:60;pointer-events:none;border-radius:3px;
  border:1.5px dashed var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.it.msel{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
/* the bar in its group dress: a count, a rule, and Delete */
.selcount{display:none;font-size:13.5px;font-weight:650;color:var(--fg-2);white-space:nowrap;}
.selbar.multi .selcount{display:block;}
.selbar.multi #nudge,.selbar.multi .nudge + .sep,.selbar.multi #swatches,.selbar.multi #sepColor,
.selbar.multi #btnSmaller,.selbar.multi #btnBigger,.selbar.multi #btnDupe,.selbar.multi #sepDupe,
.selbar.multi #sepStamp,.selbar.multi #btnStamp,.selbar.multi #btnDateFmt{display:none;}

/* ---------- the folded colour row (phones) ----------
   One swatch — the colour in use — until it is asked to be three. The caret
   under it is the whole affordance: this is a button that opens, not just a
   dot that shows. */
.swatches.folded .sw:not(.is-on){display:none;}
.swatches.folded{position:relative;padding-right:13px;}
.swatches.folded::after{
  content:'';position:absolute;right:0;top:50%;margin-top:-2.5px;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5.5px solid var(--fg-3);
}

/* ---------- your documents ----------
   Every document this device has opened, newest first. A row is one press to
   pick the work back up and one small ✕ (behind the are-you-sure sheet) to
   let it go. */
.recents{width:100%;max-width:430px;margin-top:34px;text-align:left;}
.recents[hidden]{display:none;}
.recents-h{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--fg-3);}
.recents-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.recent{display:flex;align-items:center;gap:6px;}
.recent-open{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  text-align:left;padding:10px 13px;border-radius:13px;
  background:var(--bg-2);border:1px solid var(--line);
}
.recent-open:hover{background:var(--bg-3);}
.recent-open strong{
  font-size:14px;font-weight:650;letter-spacing:-.01em;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.recent-open span{font-size:12px;color:var(--fg-3);}
.recent-del{flex:none;color:var(--fg-3);}
#recentsMore{margin-top:10px;}

/* the two turns inside the crop bar: quieter than the arrows beside them */
.crop-rot{width:34px;height:34px;color:var(--accent);opacity:.85;}
.crop-rot svg{width:19px;height:19px;}

/* ---------- the straighten dial ----------
   A ruler that slides under a fixed needle, the way a camera app does it:
   the number is the correction being applied, and the small dot shows where
   square is, so "how far off am I" is a glance rather than a calculation. */
/* Its own part of the screen, above the turning and nudging: a panel with its
   own ground, so the dial reads as a thing in itself rather than another row
   of the same bar. */
.skew-row{
  display:flex;flex-direction:column;gap:2px;
  padding:6px 10px 2px;margin:-2px 0 2px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
}
.skew-head{display:flex;align-items:center;justify-content:center;gap:10px;}
.skew-lab{font-size:12.5px;font-weight:650;color:var(--accent);letter-spacing:-.005em;}
.skew-val{
  font-size:13px;font-weight:750;color:var(--accent);
  background:var(--bg);border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:999px;padding:2px 10px;font-variant-numeric:tabular-nums;min-width:56px;
}
.skew-rule{width:100%;height:34px;display:block;touch-action:none;cursor:ew-resize;}
.skew-rule:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* The rotate tool gets the same dial as the crop tool — one control, moved
   to whichever bar is open, so "turn this a little" is the same gesture
   wherever you reach for it. */
.rotbar{flex-direction:column;align-items:stretch;gap:8px;}
.rot-line{display:flex;align-items:center;gap:8px;}

.mail-tip{margin:10px 2px 0;font-size:12.5px;line-height:1.45;color:var(--fg-3);text-align:left;}
.mail-tip[hidden]{display:none;}

.number-editor{position:absolute;left:0;top:100%;min-width:14em;z-index:30;background:#fff;color:#17202a;border:1px solid #1b4fd8;padding:.3em;font-size:14px;}
.number-hint{display:block;color:#526070;margin:.3em 0;}