/* Neutral grey throughout — the only colour in the chrome is the accent, the
   redaction red, and the status green. */
:root{
  --bg:#141414; --panel:#1e1e1e; --panel-2:#272727; --line:#383838;
  --hover:#303030; --hover-2:#3a3a3a; --field:#101010; --sep:#4a4a4a;
  --text:#e8e8e8; --muted:#9a9a9a; --dim:#7a7a7a;
  --accent:#285f9a; --accent-2:#3273b4; --accent-soft:rgba(40,95,154,.22);
  --danger:#e05252; --ok:#3aa76d; --mark:#ff3b30;
  --shadow:0 8px 28px rgba(0,0,0,.55);
  --thumb:168px; --panel-w:252px;
}
*{box-sizing:border-box}
html,body{height:100%}

/* Scrollbars: a bare thumb on the page itself, no track and no end arrows.
   color-scheme keeps anything not styled here — form controls, overlay
   scrollbars — on the dark side too. */
:root{color-scheme:dark}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-thumb{
  background:#4a4a4a;border-radius:6px;
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:#5f5f5f;background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:#6e6e6e;background-clip:content-box}
/* Firefox has no pseudo-elements for this; its own two properties would switch
   Chrome away from the rules above, so they are kept out of Chrome's way. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:#4a4a4a transparent}
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
button,input,select{font:inherit;color:inherit}
button{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:7px 12px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
button:hover:not(:disabled){background:var(--hover);border-color:#4a4a4a}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover:not(:disabled){background:var(--accent-2);border-color:var(--accent-2)}
button.ghost{background:transparent}
button.danger{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
button.danger:hover:not(:disabled){background:#cf4646;border-color:#cf4646}

/* Chromeless text buttons — the title bar is made of these. */
button.flat{
  background:transparent;border:1px solid transparent;color:var(--muted);
  padding:6px 11px;font-weight:500;
}
button.flat:hover:not(:disabled){background:var(--hover);border-color:transparent;color:var(--text)}
button.flat:disabled{opacity:.35}
/* Square icon-only button. The glyph is currentColor, so it dims with the
   button rather than needing its own disabled styling. */
button.iconbtn{padding:6px;display:flex;align-items:center;justify-content:center}
button.iconbtn svg{width:19px;height:19px;display:block}

select{
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;
}
select:disabled{opacity:.4;cursor:not-allowed}
input[type=text],input[type=search],input[type=password]{
  background:var(--field);border:1px solid var(--line);border-radius:8px;padding:7px 10px;outline:none;
}
input[type=text]:focus,input[type=search]:focus,input[type=password]:focus{border-color:var(--accent)}
label.chk{display:inline-flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;user-select:none}

/* ---------- title bar ---------- */
/* z-index lifts the whole bar above #shell, which follows it in the document
   and would otherwise paint over anything the bar drops down — the zoom menu
   cannot escape on its own, because .centred's transform on #viewbar makes a
   stacking context that traps its z-index inside the header. */
header{
  display:flex;align-items:center;gap:6px;padding:7px 12px;position:relative;
  background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto;
  z-index:30;
}
.logo{
  background:transparent;border:1px solid transparent;padding:4px;border-radius:8px;
  display:flex;align-items:center;line-height:0;
}
.logo svg{width:22px;height:25px;display:block}
.logo:hover{background:var(--hover);border-color:transparent}
.sep{width:1px;height:20px;background:var(--sep);margin:0 8px;flex:0 0 auto}
.spacer{flex:1}
/* Counts shown at the top of a tool panel: no chrome, just a rule under it. */
.panelinfo{
  color:var(--muted);font-size:12.5px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.panelinfo b{color:var(--text)}
.panelinfo i{font-style:normal}

/* mode buttons: chromeless, with an underline on the active one */
#modes{display:flex;align-items:center;gap:2px}
#modes button{
  background:transparent;border:0;border-bottom:2px solid transparent;border-radius:6px 6px 0 0;
  padding:7px 13px 6px;color:var(--muted);font-weight:500;
}
#modes button:hover:not(:disabled){background:var(--hover);color:var(--text)}
#modes button.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
#modes button.on:hover{background:var(--accent-soft)}
#modes button:disabled{opacity:.35}

/* ---------- shell: panel | stage ---------- */
#shell{flex:1;display:flex;min-height:0}

/* The divider is a box-shadow, not a border: a border would keep the collapsed
   panel 1px wide and leave a sliver down the edge of the window. */
#panel{
  width:0;flex:0 0 auto;background:var(--panel);overflow:hidden;
  transition:width .18s ease;
}
body.panel-open #panel{width:var(--panel-w);box-shadow:1px 0 0 var(--line)}
/* Fixed inner width so the content does not reflow while the panel slides. */
.panelInner{width:var(--panel-w);height:100%;overflow-y:auto;padding:14px}
#panel h3{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);
}
#panel h3:not(:first-child){margin-top:18px}
#panel .bar{display:flex;flex-direction:column;align-items:stretch;gap:8px}
#panel .bar[hidden]{display:none}
#panel .bar>button{width:100%;text-align:center}
#panel .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#panel .note{
  margin:14px 0 0;font-size:11.5px;line-height:1.65;color:var(--dim);
  border-top:1px solid var(--line);padding-top:11px;
}
#panel .note b{color:var(--muted)}
#panel .fld{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
#panel .fld[hidden]{display:none}
#panel .fld select{width:100%}
#panel .fld .range{display:flex;align-items:center;gap:8px}
#panel .fld .range input[type=range]{flex:1;accent-color:var(--accent)}
#panel .fld .range span{min-width:36px;font-variant-numeric:tabular-nums;color:var(--text)}

#stage{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

/* ---------- view controls, centre of the title bar ----------
   Centred on the window, not on the space left over, so it reads as the middle
   of the bar. When the window is too narrow for that to clear the mode buttons,
   ui.js drops the `centred` class and the group falls back into the flex flow,
   where the two spacers push it to the right instead of letting it collide. */
#viewbar{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#viewbar.centred{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#viewbar .grp{display:flex;align-items:center;gap:2px}
#viewbar .grp[hidden],#viewbar>[hidden]{display:none}
#viewbar .grp button{
  border:0;background:transparent;color:var(--muted);
  padding:4px 9px;font-size:15px;line-height:1;border-radius:6px;
}
#viewbar .grp button:hover:not(:disabled){background:var(--hover);color:var(--text)}
#pagenav input{
  width:38px;text-align:center;padding:4px 2px;border-radius:6px;
  font-size:12.5px;font-variant-numeric:tabular-nums;
}
#pagenav .slash,#pageTotal{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
#pagenav .slash{margin:0 3px}
/* The per cent sign is a sibling of the input, not text inside it, so it can
   be neither typed over nor deleted. The wrapper is what looks like the field. */
.zoomfield{
  position:relative;display:inline-flex;align-items:center;
  background:var(--field);border:1px solid var(--line);border-radius:6px;
  padding-right:6px;
}
.zoomfield:focus-within{border-color:var(--accent)}
.zoomfield input{
  width:34px;border:0;background:transparent;outline:none;
  padding:4px 1px 4px 7px;text-align:right;
  font-size:12.5px;font-variant-numeric:tabular-nums;
}
.zoomfield .pct{color:var(--muted);font-size:12.5px;user-select:none;pointer-events:none}

#zoomMenu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:4px;display:flex;flex-direction:column;gap:1px;
  box-shadow:var(--shadow);z-index:40;min-width:80px;
}
#zoomMenu[hidden]{display:none}
#zoomMenu button{
  border:0;background:transparent;color:var(--muted);width:100%;
  padding:5px 10px;border-radius:5px;text-align:center;
  font-size:12.5px;font-variant-numeric:tabular-nums;
}
#zoomMenu button:hover{background:var(--hover);color:var(--text)}
#zoomMenu button.on{color:var(--text);font-weight:700}

/* One icon serves both fits: a quarter turn swaps the arrows from across to
   up-and-down, and animating the turn shows which way it just went. */
#btnFit svg{transition:transform .25s ease}
#btnFit.fit-height svg{transform:rotate(90deg)}

/* Single page widens to fill the button; the second sheet slides out from
   behind it as both narrow. */
.spreadbtn{gap:1.5px}
.spreadbtn .doc{
  display:block;width:15px;height:19px;overflow:hidden;
  transition:width .25s ease, height .25s ease, opacity .2s ease;
}
.spreadbtn .doc svg{width:100%;height:100%;display:block}
.spreadbtn .doc.b{width:0;opacity:0}
.spreadbtn.show-two .doc{height:15px}
.spreadbtn.show-two .doc.a{width:10px}
.spreadbtn.show-two .doc.b{width:10px;opacity:1}

/* ---------- main / grid ---------- */
main{flex:1;overflow:auto;position:relative;padding:20px}
#grid{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px;
  align-content:flex-start;
}
.card{width:var(--thumb);flex:0 0 auto;position:relative;cursor:grab;user-select:none}
.card:active{cursor:grabbing}
.card .thumb{
  position:relative;background:#fff;border-radius:3px;box-shadow:var(--shadow);
  outline:2px solid transparent;outline-offset:2px;overflow:hidden;
}
.card.sel .thumb{outline-color:var(--accent)}
.card.drag-src{opacity:.35}
.card .thumb canvas,.card .thumb .ph{display:block;width:100%}
.card .thumb .ph{background:#f2f2f2;display:grid;place-items:center;color:#999;font-size:12px}
.card .chip{
  position:absolute;top:5px;left:5px;max-width:calc(100% - 10px);
  background:var(--c,#285f9a);color:#fff;font-size:10.5px;font-weight:600;
  padding:1px 7px;border-radius:999px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none;opacity:.92;box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.card .tools{position:absolute;top:5px;right:5px;display:none;flex-direction:row;gap:3px}
.card:hover .tools{display:flex}
.card .tools button{
  padding:2px 7px;font-size:12.5px;border-radius:6px;background:rgba(20,20,20,.88);
  border-color:rgba(255,255,255,.15);
}
.card .tools button:hover{background:rgba(48,48,48,.95)}
.card .tools button.danger:hover{background:var(--danger);border-color:var(--danger)}
.card .cap{
  text-align:center;color:var(--muted);font-size:12px;margin-top:6px;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card.sel .cap{color:var(--text)}
.card .badge{position:absolute;bottom:5px;right:5px;display:flex;gap:4px;pointer-events:none}
.card .badge span{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.card .badge .r{background:var(--mark)}
.card .badge .n{background:var(--accent)}

.empty{width:100%;text-align:center;color:var(--muted);padding:70px 20px;line-height:2}
.empty span{font-size:12.5px;color:var(--dim)}
.empty b{color:var(--text)}

#ins{
  position:absolute;width:3px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 6px rgba(40,95,154,.9);display:none;pointer-events:none;z-index:5;
}
#ins.on{display:block}

/* ---------- drop zone ---------- */
#drop{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
#drop .box{
  border:2px dashed var(--line);border-radius:16px;background:var(--panel);
  display:grid;place-items:center;padding:40px;
  min-width:min(660px,74vw);min-height:230px;
}
#drop p{margin:0;color:var(--muted)}
body.dragging #drop .box{border-color:var(--accent);background:#242424}
body.dragging.loaded main{outline:2px dashed var(--accent);outline-offset:-4px}

/* ---------- find & mark, in the Edit panel ---------- */
#panel input[type=search]{width:100%}
#panel .checks{display:flex;gap:14px;padding:2px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.chip{
  background:transparent;border:1px dashed var(--line);color:var(--muted);
  padding:4px 10px;border-radius:999px;font-size:12px;
}
.chip:hover{color:var(--text);border-style:solid}

/* ---------- the page view ---------- */
#pages{display:flex;flex-direction:column;align-items:center;gap:22px;padding-bottom:40px}
.spread{display:flex;align-items:flex-start;gap:16px}
#pages[hidden]{display:none}
#grid[hidden]{display:none}
body:not([data-mode="organize"]) main{padding:22px 0 60px}

.page{position:relative;background:#fff;box-shadow:var(--shadow);border-radius:2px}
.page canvas{display:block;border-radius:2px}
.page .placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#9a9a9a;font-size:13px}
.page .num{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-19px;color:var(--muted);
  font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;
}

/* Drawing and selecting only happen in Edit. Everywhere else the page is
   inert, so marks stay visible but nothing can be drawn, dragged or deleted by
   a stray click. Select gets an ordinary pointer; the drawing tools get a
   crosshair, because they are about to put something down. */
.overlay{position:absolute;inset:0;cursor:default;touch-action:none;pointer-events:none}
body[data-mode="edit"] .overlay{cursor:crosshair;pointer-events:auto}
body[data-mode="edit"][data-tool="select"] .overlay{cursor:default}

.rubber{position:absolute;background:rgba(255,59,48,.35);border:1px dashed #ff3b30;pointer-events:none}
.rubber.marquee{background:rgba(40,95,154,.18);border:1px dashed #6ea8e0}

/* ---------- tool picker & colours (in the panel, so vertical) ----------
   Deliberately NOT `.tools` — the thumbnail hover buttons in the grid already
   own that class, and they need to stay a horizontal row. */
.toolgroup{display:flex;flex-direction:column;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:2px}
.toolgroup button{border:0;background:transparent;padding:7px 10px;border-radius:6px;display:flex;align-items:center;gap:9px}
.toolgroup button:hover:not(:disabled){background:var(--hover-2)}
.toolgroup button.on{background:var(--accent);color:#fff}
.toolgroup button.on:hover{background:var(--accent-2)}
.toolgroup .sw{width:14px;height:14px;display:inline-block;flex:0 0 auto}
.toolgroup .ic{width:16px;height:16px;flex:0 0 auto}

/* The variants of the active group — Highlight/Underline/Strikethrough, or the
   four shapes — as a wrapping row of small chips under the tool list. */
.variants{display:flex;flex-wrap:wrap;gap:4px}
.variants[hidden]{display:none}
.variants button{padding:4px 9px;font-size:12px;border-radius:6px;background:transparent}
.variants button.on{background:var(--accent);border-color:var(--accent);color:#fff}

.propsbox{display:flex;flex-direction:column;gap:8px}
.propsbox[hidden],.proprow[hidden]{display:none!important}
.toolgroup .sw.select{
  background:currentColor;
  clip-path:polygon(14% 4%,14% 84%,36% 64%,50% 96%,66% 88%,52% 58%,82% 56%);
}
.toolgroup .sw.redact{background:currentColor;border-radius:2px;opacity:.85}
.toolgroup .sw.frame{border:2px solid currentColor;border-radius:2px}
.toolgroup .sw.arrow{
  background:currentColor;
  clip-path:polygon(0 78%,62% 16%,40% 12%,88% 0,78% 46%,72% 26%,10% 90%);
}
.selinfo{color:var(--muted);font-size:12px;padding:1px 0 2px}
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
/* Two hairlines, one light and one dark, so every swatch has an edge: the pale
   end of the palette needs the dark one, the saturated end the light one. */
.swatches button{
  width:auto;padding:0;aspect-ratio:1;border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
  display:grid;place-items:center;
}
.swatches button:hover:not(:disabled){border-color:rgba(255,255,255,.75)}
.swatches button:disabled{opacity:.35}
.swatches button svg{width:64%;height:64%;display:block;opacity:0}
.swatches button.on svg{opacity:1}

/* ---------- selectable text ----------
   Invisible spans over the canvas, one per text run, placed by pdf.js. They
   only take the pointer where selecting text is the right answer: Read and
   Export, and Edit with the Select tool. The drawing tools never see them, so
   a drag across text always draws. */
.page{user-select:none}
.textLayer{
  position:absolute;inset:0;overflow:hidden;line-height:1;pointer-events:none;
  -webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;
}
.textLayer>span,.textLayer>br{
  color:transparent;position:absolute;white-space:pre;cursor:text;
  transform-origin:0% 0%;user-select:text;pointer-events:none;
}
body[data-mode="read"] .textLayer>span,
body[data-mode="export"] .textLayer>span,
body[data-mode="edit"][data-tool="select"] .textLayer>span{pointer-events:auto}
.textLayer.obj>span{cursor:inherit}
.textLayer ::selection{background:rgba(40,95,154,.38)}
.textLayer .endOfContent{
  display:block;position:absolute;left:0;right:0;top:100%;bottom:0;
  z-index:-1;cursor:default;user-select:none;
}
.textLayer.selecting .endOfContent{top:0;pointer-events:auto}
/* Find & mark matches. Only Edit owns the search, so only Edit shows them. */
.textLayer .hit{background:rgba(245,196,0,.5);border-radius:2px}
body:not([data-mode="edit"]) .textLayer .hit{background:transparent}

/* ---------- objects on screen ---------- */
/* Redactions, frames and arrows all live in this one layer, and it takes no
   pointer events at all: select.js hit-tests the geometry instead. That is what
   stops a page-sized frame swallowing every drag. */
.notes{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.notes .note-ghost{opacity:.75}

/* Selection chrome. Drawn in screen pixels rather than page fractions, so the
   handles stay the same size to grab at any zoom. */
.chrome .selbox{fill:none;stroke:#4c9bea;stroke-width:1.5;stroke-dasharray:4 3}
.chrome .hoverbox{fill:none;stroke:#4c9bea;stroke-width:1;opacity:.55}
.chrome .handle{fill:#fff;stroke:#2f7fd0;stroke-width:1.5}
.chrome .erasebox{fill:rgba(255,59,48,.08);stroke:#ff3b30;stroke-width:1.5;stroke-dasharray:3 2}

/* The markup tools and Select both select page text, so both need the spans. */
body[data-mode="edit"][data-group="markup"] .textLayer>span{pointer-events:auto}
body[data-mode="edit"][data-group="markup"] .textLayer ::selection{background:rgba(245,196,0,.45)}

body[data-mode="edit"][data-tool="eraser"] .overlay{cursor:crosshair}
body[data-mode="edit"][data-tool="text"] .overlay{cursor:text}

/* Sign mode puts things on the page too, so its overlay takes the pointer. */
body[data-mode="sign"] .overlay{cursor:crosshair;pointer-events:auto}
body[data-mode="sign"][data-tool="select"] .overlay{cursor:default}
body[data-mode="sign"][data-tool="text"] .overlay,
body[data-mode="sign"][data-tool="date"] .overlay{cursor:text}
.note-ghost.place{opacity:.55}
body[data-mode="edit"][data-group="markup"] .overlay{cursor:default}

/* The text box being typed into sits exactly where its text will be drawn. */
.texteditor{
  position:absolute;margin:0;border:0;outline:1px dashed #4c9bea;outline-offset:0;
  background:rgba(255,255,255,.35);resize:none;overflow:hidden;white-space:pre-wrap;
  font-family:Helvetica, Arial, sans-serif;transform-origin:0 0;box-sizing:border-box;
  z-index:5;user-select:text;border-radius:0;
}
.rubber.textghost{background:transparent;border:1px dashed #4c9bea}

/* ---------- toast / progress ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--panel-2);border:1px solid var(--line);padding:11px 18px;border-radius:10px;
  box-shadow:var(--shadow);z-index:50;max-width:70vw;
  opacity:0;pointer-events:none;transition:transform .22s ease, opacity .22s ease;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{border-color:var(--danger);color:#ffc9c9}
#toast.ok{border-color:var(--ok)}
#busy{
  position:fixed;inset:0;background:rgba(10,10,10,.72);display:none;place-items:center;z-index:60;backdrop-filter:blur(2px);
}
#busy.on{display:grid}
#busy .dlg{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 34px;text-align:center;min-width:300px;box-shadow:var(--shadow)}
#busy .bar{height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden;margin-top:14px}
#busy .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}

/* ---------- modal ---------- */
#modal{
  position:fixed;inset:0;background:rgba(10,10,10,.72);display:grid;place-items:center;
  z-index:70;backdrop-filter:blur(2px);
}
#modal[hidden]{display:none}
#modalBox{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;min-width:340px;max-width:460px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;
}
#modalBox h2{margin:0;font-size:16px}
#modalBox p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
#modalBox p[hidden]{display:none}
#modalBox input{width:100%}
#modalBox input[hidden]{display:none}
#modalBox .row{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* ---------- the Sign panel ---------- */
[data-slot]:empty{display:none}
[data-slot]{display:flex;flex-direction:column;gap:8px}
.selbox{display:flex;flex-direction:column;gap:8px}
.sigslot{display:flex;flex-direction:column;gap:6px}
.sigslot .sigRow{display:flex;gap:6px}
.sigslot .sigRow button{flex:1;padding:5px 8px;font-size:12px}
.sigadd{width:100%;border-style:dashed;color:var(--muted)}
.sigadd:hover:not(:disabled){color:var(--text)}
/* Ink on a transparent background needs paper behind it to be seen. */
.sigcard{
  width:100%;height:64px;padding:6px 10px;background:#fff;border:2px solid transparent;
  border-radius:8px;display:grid;place-items:center;
}
.sigcard:hover:not(:disabled){background:#fff;border-color:#6f6f6f}
.sigcard.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(40,95,154,.35)}
.sigcard img{max-width:100%;max-height:100%;display:block}

/* ---------- the signature dialog ---------- */
#sigModal{
  position:fixed;inset:0;background:rgba(10,10,10,.72);display:grid;place-items:center;
  z-index:70;backdrop-filter:blur(2px);
}
#sigModal[hidden]{display:none}
.sigBox{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;width:min(620px,92vw);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;
}
.sigBox h2{margin:0;font-size:16px}
.sigBox [hidden]{display:none!important}
.sigTabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.sigTabs button{
  border:0;background:transparent;color:var(--muted);border-radius:6px 6px 0 0;
  padding:7px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.sigTabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.sigPane{display:flex;flex-direction:column;gap:10px}
.sigName{width:100%}
.sigStyles{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:240px;overflow:auto}
.sigStyle{
  height:74px;background:#fff;border:2px solid transparent;border-radius:8px;
  font-size:30px;line-height:1.1;padding:4px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.sigStyle:hover:not(:disabled){background:#fff;border-color:#6f6f6f}
.sigStyle.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(40,95,154,.35)}
.sigPad{position:relative;height:190px;background:#fff;border-radius:8px;touch-action:none;overflow:hidden}
.sigPad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.sigRule{position:absolute;left:24px;right:24px;bottom:44px;border-bottom:1px solid #c9c9c9;pointer-events:none}
.sigHint{position:absolute;left:26px;bottom:50px;color:#a4a4a4;font-size:13px;pointer-events:none}
.sigPreview{
  min-height:110px;background:#fff;border-radius:8px;display:grid;place-items:center;padding:10px;
  background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),
                   linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;
}
.sigPreview img{max-width:100%;max-height:180px}
.sigBox .sigRow{display:flex;gap:8px;align-items:center}
.sigInks{gap:8px}
.sigInk{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sigInk.on{border-color:var(--text)}
.sigActions{justify-content:flex-end}
#panel [data-slot] h3{margin-top:10px}

/* ---------- form fields (Sign mode) ----------
   Live inputs over a page drawn without its fields. Pale blue, like Acrobat's
   field highlight, so it is obvious what can be filled in. */
.formLayer{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;display:none}
body[data-mode="sign"] .formLayer{display:block}
.formLayer .ff{
  position:absolute;box-sizing:border-box;margin:0;border:0;border-radius:0;padding:0 2px;
  background:rgba(206,219,255,.55);font-family:Helvetica, Arial, sans-serif;line-height:1.15;
  pointer-events:auto;outline:none;user-select:text;color:#000;
}
.formLayer .ff:hover{background:rgba(186,204,255,.7)}
.formLayer .ff:focus{background:rgba(255,255,255,.92);box-shadow:0 0 0 1.5px #285f9a}
.formLayer .ff:disabled{background:rgba(210,210,210,.35);cursor:not-allowed}
.formLayer textarea.ff{resize:none;overflow:auto;padding:2px 3px}
.formLayer select.ff{padding:0 2px}
.formLayer input[type=checkbox].ff,.formLayer input[type=radio].ff{
  appearance:none;-webkit-appearance:none;display:grid;place-items:center;cursor:pointer;padding:0;
}
.formLayer input[type=radio].ff{border-radius:50%}
.formLayer input[type=checkbox].ff:checked::after{content:'\2713';line-height:1;font-weight:700}
.formLayer input[type=radio].ff:checked::after{content:'';width:45%;height:45%;border-radius:50%;background:currentColor}
.formLayer .sighere{
  position:absolute;box-sizing:border-box;margin:0;padding:0;pointer-events:auto;cursor:pointer;
  border:1.5px dashed #285f9a;border-radius:3px;background:rgba(40,95,154,.08);color:#285f9a;font-weight:600;
}
.formLayer .sighere:hover{background:rgba(40,95,154,.16)}
.formInfo{line-height:1.5}