/* PDF Local — one stylesheet for the app (three layouts: desktop, tablet,
   phone; see "tablet" and "phone" below) and the /agents guide. */
@font-face {
  font-family: "NSThaiWM";
  src: url("vendor/NotoSansThai-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "SarabunWM";
  src: url("vendor/Sarabun-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "SarabunWM";
  src: url("vendor/Sarabun-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "CharmSig";
  src: url("vendor/Charm-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "CharmSig";
  src: url("vendor/Charm-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "NSerifThaiWM";
  src: url("vendor/NotoSerifThai-Regular.ttf") format("truetype");
}

/* ------------------------------------------------------------ tokens
   Names from the design handoff (for_ai/design_handoff_pdf_local_redesign,
   themes.json). A theme is one block of these, picked by <body data-brand>;
   Classic is the only one built so far, the others are later variants of
   this same block. Everything below uses the tokens, never raw colours,
   except what sits on the PDF page itself. */
:root, [data-brand="classic"] {
  --ac: #2563eb;    /* accent: primary buttons, active tool, selection, badges */
  --acs: #1d4ed8;   /* accent used as text (links, active labels) */
  --tint: #eef4ff;  /* selected background */
  --ib: #e8f1ff;    /* info note background */
  --ii: #1e3a8a;    /* info note ink */
  --bg: #f2f3f5;    /* app background, segmented control track */
  --vw: #eceef1;    /* document viewer background */
  --wl: #e4e6ea;    /* recessed well: thumbnail strip */
  --sb: #f7f8f9;    /* subtle surface: hint boxes, preview wells */
  --bt: #e8eaed;    /* secondary button background */
  --ink: #1c1e21;   /* primary text */
  --i2: #3a3c3f;    /* secondary text */
  --i3: #5f6165;    /* tertiary text, hints */
  --ff: system-ui, "NSThaiWM", sans-serif;
  --rs: 1;          /* radius multiplier */
  --rp: 1;          /* pill radius multiplier */
  --line: #888888;  /* hairlines, used at 15-53% */
  color-scheme: light;
}
:root {
  /* fixed, not themed */
  --surface: #ffffff;
  --on-ac: #ffffff;
  --danger-bg: #fdecec; --danger-ink: #991b1b; --danger: #b91c1c;
  --ok-bg: #ecf7ef; --ok-ink: #166534;
  --warn-bg: #fdf3e3; --warn-ink: #92400e;
  --status-ok: #166534; --status-err: #b91c1c;
  --toast-bg: #1f2937; --toast-ink: #ffffff; --toast-ac: #93c5fd;
  --scrim: rgba(0, 0, 0, .55);
  --badge-neutral: #6b7280; --badge-count: #dc2626;
  --shadow-page: 0 2px 14px rgba(0, 0, 0, .22);
  --shadow-float: 0 2px 8px rgba(0, 0, 0, .2);
  --shadow-sheet: 0 -4px 18px rgba(0, 0, 0, .12);
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-drag: 0 10px 28px rgba(0, 0, 0, .3);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, .35);
  --shadow-menu: 0 8px 30px rgba(0, 0, 0, .25);
  /* hairlines */
  --l15: color-mix(in srgb, var(--line) 15%, transparent);
  --l25: color-mix(in srgb, var(--line) 25%, transparent);
  --l27: color-mix(in srgb, var(--line) 27%, transparent);
  --l33: color-mix(in srgb, var(--line) 33%, transparent);
  --l40: color-mix(in srgb, var(--line) 40%, transparent);
  --l53: color-mix(in srgb, var(--line) 53%, transparent);
  /* layout */
  --top-h: 56px;
  --tap: 38px;      /* smallest control; 44px on touch screens */
}
/* dark: the same roles, darker values (not part of the handoff). Used when
   the device is set to dark, unless the viewer picked Light (data-theme on
   <html>, js/theme.js), and always when they picked Dark. Each rule must
   also match the element that carries data-brand, or the theme's light
   values set there win over these. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-brand] {
    --acs: #93b4ff; --tint: #1e2a44; --ib: #1e2a44; --ii: #bfd3ff;
    --bg: #1c1e21; --vw: #17191c; --wl: #141618; --sb: #2b2e31; --bt: #35383b;
    --ink: #e4e6eb; --i2: #c9ccd1; --i3: #9aa0a6;
    --surface: #242628;
    --danger-bg: #3b1d1d; --danger-ink: #fecaca;
    --ok-bg: #16301f; --ok-ink: #86efac; --warn-bg: #3a2a12; --warn-ink: #fcd34d;
    --status-ok: #4ade80; --status-err: #f87171;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] [data-brand] {
  --acs: #93b4ff; --tint: #1e2a44; --ib: #1e2a44; --ii: #bfd3ff;
  --bg: #1c1e21; --vw: #17191c; --wl: #141618; --sb: #2b2e31; --bt: #35383b;
  --ink: #e4e6eb; --i2: #c9ccd1; --i3: #9aa0a6;
  --surface: #242628;
  --danger-bg: #3b1d1d; --danger-ink: #fecaca;
  --ok-bg: #16301f; --ok-ink: #86efac; --warn-bg: #3a2a12; --warn-ink: #fcd34d;
  --status-ok: #4ade80; --status-err: #f87171;
  color-scheme: dark;
}
@media (pointer: coarse) { :root { --tap: 44px; } }

/* ------------------------------------------------------------ base */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--ff); background: var(--bg); color: var(--ink);
       -webkit-font-smoothing: antialiased; }
body[data-brand] { height: 100%; overflow: hidden; }
button, input, select, textarea { font-family: inherit; color: inherit; }
a { color: var(--acs); }
option.sarabun { font-family: "SarabunWM", sans-serif; }
option.sans { font-family: "NSThaiWM", Arial, sans-serif; }
option.serif { font-family: "NSerifThaiWM", Georgia, serif; }
option.mono { font-family: "Courier New", monospace; }

/* buttons: secondary by default */
button, .btn, .openbtn {
  min-height: var(--tap); padding: 0 14px; border: 1px solid var(--l40);
  border-radius: calc(8px * var(--rs)); background: var(--bt); color: var(--ink);
  font: 600 13px/1.2 var(--ff); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, .btn:focus-within, .openbtn:focus-within, a:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ac); outline-offset: 2px; }
.primary, .btn-primary {
  background: var(--ac); color: var(--on-ac); border-color: var(--ac); }
.btn-primary { width: 100%; min-height: 46px; border: 0; border-radius: calc(10px * var(--rs));
               font: 600 14px/1.2 var(--ff); }
.btn-del { background: var(--danger-bg); color: var(--danger-ink); border-color: transparent; }
.link { min-height: 30px; padding: 0 8px; border: 0; border-radius: calc(6px * var(--rs));
        background: transparent; color: var(--acs); font: 600 12px/1 var(--ff); }
select { min-height: var(--tap); flex: 1; min-width: 0; padding: 0 10px;
         border: 1px solid var(--l33); border-radius: calc(8px * var(--rs));
         background: var(--surface); font: 400 14px/1.2 var(--ff); cursor: pointer; }
.inp, input[type=text], input[type=password], input[type=number], textarea {
  width: 100%; min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--l33);
  border-radius: calc(7px * var(--rs)); background: var(--surface);
  font: 400 14px/1.3 var(--ff); }
textarea { resize: vertical; }
input.bad, .inp.bad { border-color: var(--danger); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.two > * { flex: 1; }
.row.end { justify-content: flex-end; }
label { font-size: 12.5px; }
.chk { display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
       font: 400 13px/1.35 var(--ff); color: var(--i2); cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ac); }
.chk.pill { min-height: var(--tap); padding: 0 12px; border: 1px solid var(--l33);
            border-radius: calc(8px * var(--rs)); background: var(--surface); flex: none; }
.chk.pill:has(input:checked) { background: var(--tint); border-color: var(--ac); color: var(--acs); }
@media (pointer: coarse) { .chk { min-height: 44px; } }
.hint { font: 400 11.5px/1.45 var(--ff); color: var(--i3); }
.hint.err, .err { color: var(--status-err); }
.err { font-size: 12px; }
.err:empty { display: none; }
.val { color: var(--i3); font-weight: 400; }

/* ------------------------------------------------------------ app frame */
.app { position: relative; height: 100vh; height: 100dvh; display: grid;
       grid-template-columns: 72px 344px minmax(0, 1fr);
       grid-template-rows: var(--top-h) minmax(0, 1fr);
       grid-template-areas: "top top top" "rail panel main"; }
/* ⇆ moves the tools and the panel together: the rail stays on the outside */
body.panelright .app { grid-template-columns: minmax(0, 1fr) 344px 72px;
                       grid-template-areas: "top top top" "main panel rail"; }
.topbar { grid-area: top; }
.rail { grid-area: rail; }
.panel { grid-area: panel; }
.main { grid-area: main; }

/* top bar */
.topbar { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 18px 0 16px;
          background: var(--surface); border-bottom: 1px solid var(--l15); }
.logo { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--ac);
        display: flex; align-items: center; justify-content: center; font-size: 13px; }
.logo-t { color: var(--on-ac); font: 700 1em/1 system-ui; transform: rotate(-20deg); }
.wordmark { margin: 0; font: 700 16px/1.2 system-ui; white-space: nowrap; }
.filebox { min-width: 0; }
.filechip { display: flex; align-items: center; min-width: 0; max-width: 340px; padding: 6px 12px;
            background: var(--bg); border-radius: calc(8px * var(--rs)); }
.filechip .file { font: 400 13px/1.2 var(--ff); color: var(--i2); white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.toolbtn { display: none; }
.open-top { flex: none; }
.hist { display: flex; gap: 4px; flex: none; }
.hist-btn { width: 36px; min-height: 36px; padding: 0; background: var(--surface);
            border-color: var(--l27); font-size: 16px; font-weight: 400; }
.spacer { flex: 1; }
.lang { display: inline-flex; flex: none; padding: 3px; background: var(--bt);
        border-radius: calc(9999px * var(--rp)); }
.lang button { min-height: 30px; padding: 0 16px; border: 0; border-radius: calc(9999px * var(--rp));
               background: transparent; color: var(--i2); font: 600 12px/1 var(--ff); }
.lang button.active { background: var(--ac); color: var(--on-ac); }
.more-btn { width: 40px; min-height: 36px; padding: 0; border: 0; background: transparent;
            font: 700 18px/1 var(--ff); }
.more-btn.on { background: var(--bt); }

/* ⋯ menu */
.menu { position: fixed; top: calc(var(--top-h) + 4px); right: 12px; z-index: 40; width: 250px;
        padding: 6px; background: var(--surface); border-radius: calc(14px * var(--rs));
        box-shadow: var(--shadow-menu); display: flex; flex-direction: column; }
.menu-head { padding: 8px 12px 4px; font: 600 11px/1.3 var(--ff); color: var(--i3); }
.menu-item { min-height: 44px; padding: 0 12px; border: 0; border-radius: calc(9px * var(--rs));
             background: transparent; justify-content: flex-start; text-align: left;
             font: 400 14px/1.3 var(--ff); color: var(--ink); text-decoration: none;
             display: flex; align-items: center; cursor: pointer; }
.menu-item:hover { background: var(--bg); }
.menu-seg { display: flex; gap: 2px; margin: 2px 6px 6px; padding: 3px; background: var(--bg);
            border-radius: calc(9px * var(--rs)); }
.menu-seg button { flex: 1; min-height: 40px; padding: 0 6px; border: 0; border-radius: calc(7px * var(--rs));
                   background: transparent; color: var(--i3); font: 600 12.5px/1.2 var(--ff); }
.menu-seg button.on { background: var(--ac); color: var(--on-ac); }
@media (pointer: coarse) { .menu-seg button { min-height: 44px; } }

/* tool rail */
.rail { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px;
        background: var(--surface); border-right: 1px solid var(--l15); }
body.panelright .rail { border-right: 0; border-left: 1px solid var(--l15); }
.rail .tab { flex-direction: column; gap: 5px; min-height: 0; padding: 11px 0; border: 0;
             border-radius: calc(12px * var(--rs)); background: transparent; color: var(--i3); }
.rail-ic { font-size: 19px; line-height: 1; }
.rail-lb { font: 600 10.5px/1.15 var(--ff); text-align: center; }
.rail .tab.active { background: var(--tint); color: var(--acs); }
.rail .tab.active .rail-lb { font-weight: 700; }

/* ------------------------------------------------------------ panel */
.panel { min-height: 0; display: flex; flex-direction: column; background: var(--surface);
         border-left: 1px solid var(--l15); border-right: 1px solid var(--l15); }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 0; }
.panel-title { margin: 0; font: 700 17px/1.2 var(--ff); }
.sheet-grab, .sheet-more { display: none; }
.panel-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto;
                padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.sec { display: flex; flex-direction: column; gap: 14px; }
.sec-lb, .ctl-lb { font: 600 12px/1.3 var(--ff); color: var(--i2); }
.ctl-lb { display: block; margin-bottom: 8px; font-weight: 400; font-size: 12.5px; }
.ctl-lb .val { display: none; }
.ctl:has(.stepper.nobtn) .ctl-lb .val { display: inline; }
.ctl .inp { margin-top: 8px; }
.ctl .hint { margin-top: 4px; }
.fitwarn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: -4px;
           padding: 10px 12px; border-radius: calc(8px * var(--rs)); background: var(--warn-bg);
           color: var(--warn-ink); font: 400 12.5px/1.45 var(--ff); }
.panel .note { display: flex; gap: 8px; padding: 10px 12px; border-radius: calc(8px * var(--rs));
               font: 400 12px/1.5 var(--ff); background: var(--ib); color: var(--ii); }
.panel .note::before { content: "\1F512\FE0E"; }
.panel .note.err { background: var(--danger-bg); color: var(--danger-ink); }
.steps { padding: 12px 14px; border-radius: calc(10px * var(--rs)); background: var(--sb);
         font: 400 12.5px/1.5 var(--ff); color: var(--i2); }
.privacy { display: flex; gap: 8px; margin-top: auto; font: 400 11.5px/1.45 var(--ff); color: var(--i3); }
.privacy a { color: inherit; }
.panel-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 16px;
              border-top: 1px solid var(--l15); }
#status { font: 400 12px/1.4 var(--ff); color: var(--status-ok); overflow-wrap: anywhere; }
#status.err { color: var(--status-err); }
#status:empty { display: none; }
#support { display: block; font: 400 12px/1.4 var(--ff); margin: -2px 0 6px; }
body[data-mode="pages"] #apply { display: none; }
body[data-mode="pages"] .panel-foot:has(#status:empty) { display: none; }

/* tool buttons (Fill) and segmented choices */
.toolseg, .seg { display: flex; gap: 2px; padding: 3px; background: var(--bg);
                 border-radius: calc(9px * var(--rs)); }
.toolseg .tool, .seg-btn { flex: 1; min-width: 0; min-height: var(--tap); padding: 0 6px;
                  border: 0; border-radius: calc(7px * var(--rs)); background: transparent;
                  color: var(--i3); font: 600 12px/1.2 var(--ff); text-align: center;
                  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.toolseg .tool.active, .seg-btn:has(input:checked) {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.seg-btn:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: 1px; }

/* steppers (js/controls.js) */
.step-row { display: flex; align-items: center; gap: 8px; }
.step-btn { flex: none; width: 44px; min-height: 44px; padding: 0; border-radius: calc(9px * var(--rs));
            font: 600 18px/1 var(--ff); }
.step-val { flex: 1; text-align: center; font: 600 14px/1 var(--ff);
            font-variant-numeric: tabular-nums; }
.presets { display: flex; gap: 6px; margin-top: 8px; }
.stepper.nobtn .presets { margin-top: 0; }
.preset { flex: 1; min-width: 0; min-height: 40px; padding: 0 2px; border: 1px solid var(--l33);
          background: var(--surface); font: 600 12.5px/1 var(--ff); font-variant-numeric: tabular-nums; }
.preset.on { background: var(--tint); border-color: var(--ac); color: var(--acs); }
@media (pointer: coarse) { .preset { min-height: 44px; } }

/* colour swatches (js/controls.js); the colour input is the last one */
.swatches { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.swatch, .swatches input[type=color] {
  width: 36px; height: 36px; min-height: 0; padding: 0; flex: none;
  border: 2px solid var(--surface); border-radius: calc(9999px * var(--rp));
  box-shadow: 0 0 0 1px var(--l33); cursor: pointer; }
/* a rainbow ring marks the colour input as "any other colour" */
.swatches input[type=color] { appearance: none; -webkit-appearance: none; padding: 6px;
  background: conic-gradient(#e11d48, #f59e0b, #22c55e, #06b6d4, #2563eb, #a855f7, #e11d48); }
.swatches input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.swatches input[type=color]::-webkit-color-swatch { border: 0; border-radius: calc(9999px * var(--rp)); }
.swatches input[type=color]::-moz-color-swatch { border: 0; border-radius: calc(9999px * var(--rp)); }
.swatch.on, .swatches input[type=color].on { box-shadow: 0 0 0 2px var(--ac); }
@media (pointer: coarse) { .swatch, .swatches input[type=color] { width: 44px; height: 44px; } }

#imgthumb { max-height: 34px; max-width: 110px; border: 1px solid var(--l33); background: #fff; }

/* Sign & stamp: library, create, placing, the mark's settings */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 30px; padding: 0 12px; border: 1px solid var(--l33);
        border-radius: calc(9999px * var(--rp)); background: var(--surface); color: var(--i2);
        font: 600 12px/1 var(--ff); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
@media (pointer: coarse) { .chip { min-height: 44px; padding: 0 14px; } }
.newgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.newmark { min-height: 48px; padding: 4px 6px; border: 1.5px dashed var(--l53);
           border-radius: calc(9px * var(--rs)); background: var(--sb); color: var(--acs);
           font: 600 11.5px/1.2 var(--ff); }
.lib-head { display: flex; align-items: center; gap: 8px; margin-bottom: -6px; }
.lib-links { margin-left: auto; display: flex; gap: 2px; }
.lib-links label.link { display: inline-flex; align-items: center; cursor: pointer; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile-cap { font: 400 11px/1.2 var(--ff); color: var(--i3); text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark { position: relative; width: 100%; height: 62px; padding: 4px; border: 1px solid var(--l25);
        border-radius: calc(9px * var(--rs)); background: #fff; }
.mark img { max-width: 100%; max-height: 100%; }
.mark.active { border: 2px solid var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 18%, transparent); }
.mark.newtile { border: 1.5px dashed var(--l53); background: var(--sb); color: var(--acs);
                font: 600 13px/1.2 var(--ff); }
.mark.newtile[aria-expanded="true"] { background: var(--tint); border-color: var(--ac); }
.mark .x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
           border: 2px solid var(--surface); border-radius: calc(9999px * var(--rp));
           background: var(--badge-neutral); color: #fff; font: 700 11px/18px var(--ff); text-align: center; }
@media (pointer: coarse) {
  .tiles { gap: 14px 10px; }
  .mark { height: 70px; }
  /* a bigger target, drawn the same size */
  .mark .x::after { content: ""; position: absolute; inset: -11px; }
}
.placing { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
           border-radius: calc(10px * var(--rs)); background: var(--tint);
           border: 1px solid color-mix(in srgb, var(--ac) 33%, transparent); }
.placing-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
             font: 600 13px/1.4 var(--ff); color: var(--ink); }
.placing-k { font: 400 11.5px/1.3 var(--ff); color: var(--i3); }
.steps { margin: 0; padding: 12px 14px 12px 32px; border-radius: calc(10px * var(--rs)); background: var(--sb);
         font: 400 12.5px/1.6 var(--ff); color: var(--i2); }
.markprops { display: flex; flex-direction: column; gap: 14px; padding-top: 14px;
             border-top: 1px solid var(--l15); }
.me-head { display: flex; align-items: center; gap: 8px; }
.me-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-cap { font: 400 11.5px/1.2 var(--ff); color: var(--i3); }
.me-name { font: 700 14px/1.3 var(--ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-acts { display: flex; gap: 6px; flex: none; }
.me-acts button { padding: 0 10px; }
.me-done { display: none; }
.metabs { display: none; }
.fontpick { display: flex; gap: 6px; flex-wrap: wrap; }
.fontbtn { flex: 1 1 70px; min-height: 44px; padding: 0 8px; background: var(--surface);
           border-color: var(--l33); font-size: 15px; font-weight: 400; }
.fontbtn.on { background: var(--tint); border-color: var(--ac); color: var(--acs); }
.fontbtn.user { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.fontadd { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; flex: none;
           border: 1.5px dashed var(--l53); border-radius: calc(8px * var(--rs)); background: var(--sb);
           color: var(--acs); font: 600 12.5px/1.2 var(--ff); cursor: pointer; white-space: nowrap; }
.fontlist { display: flex; flex-direction: column; }
.fontrow { display: flex; align-items: center; gap: 6px; padding-left: 12px; }
.fontname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fontdel { width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--i2); }
.wmpresets { margin-top: 8px; }
.swatch-orig { background: #fff; color: #1c1e21; font: 700 14px/1 Georgia, serif; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.modal-sm { max-width: 420px; }
.modal-box p { margin: 0; font: 400 14px/1.5 var(--ff); color: var(--i2); }
.certbox { border-top: 1px solid var(--l15); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.certbox > * + * { margin-top: 8px; }
.certbox summary { font: 600 13px/1.3 var(--ff); cursor: pointer; min-height: 32px;
                   display: flex; align-items: center; }
.certbox label:not(.chk):not(.openbtn) { display: block; margin-top: 10px; color: var(--i2); }
.certbox .file { font-size: 12px; color: var(--i3); }

/* download options */
.outopts { border: 1px solid var(--l15); border-radius: calc(10px * var(--rs)); padding: 0 12px; }
.outopts summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer;
                   font: 600 12.5px/1.3 var(--ff); color: var(--i2); list-style: none; }
.outopts summary::-webkit-details-marker { display: none; }
.outopts summary::after { content: "\25BE"; margin-left: auto; color: var(--i3); }
.outopts[open] summary::after { content: "\25B4"; }
.outopts[open] { padding-bottom: 12px; }
.outopts .hint { margin: 2px 0 6px 26px; }
.row.sub { padding-left: 26px; }

/* Pages: files and selection */
#orglegend { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex;
             flex-direction: column; gap: 6px; }
#orglegend li { display: flex; align-items: center; gap: 8px; }
#orglegend .srcname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#orglegend .val { white-space: nowrap; }
#orglegend .srcdel { min-height: 32px; padding: 0 9px; font-size: 12px; }
.srcadd { display: none; }
/* phone and tablet: the files as a row of chips, the last one adds more */
@media (max-width: 1099px), (pointer: coarse) {
  .orgadd, .files-lb { display: none; }
  .filerow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
  .filerow::-webkit-scrollbar { display: none; }
  #orglegend { flex: none; flex-direction: row; gap: 8px; }
  #orglegend li { flex: none; gap: 6px; min-height: 44px; padding: 0 2px 0 6px; border: 1px solid var(--l33);
                  border-radius: calc(9999px * var(--rp)); background: var(--surface); }
  #orglegend .srcchip { border-radius: calc(9999px * var(--rp)); }
  #orglegend .srcname { flex: none; max-width: 104px; font-weight: 600; }
  #orglegend .val { font-size: 12px; }
  #orglegend .srcdel { width: 40px; min-height: 40px; padding: 0; border: 0; background: transparent;
                       border-radius: calc(9999px * var(--rp)); color: var(--i2); }
  .srcadd { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
            border: 1.5px dashed var(--l53); border-radius: calc(9999px * var(--rp)); background: var(--sb);
            color: var(--acs); font: 600 13px/1 var(--ff); white-space: nowrap; cursor: pointer; }
  .srcadd:focus-within { outline: 2px solid var(--ac); outline-offset: 2px; }
}
.srcchip { display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: calc(5px * var(--rs));
           background: var(--src, #4b5563); color: #fff; font: 700 11px/1.3 var(--ff);
           text-align: center; white-space: nowrap; }
#pagespanel label:not(.chk):not(.openbtn) { color: var(--i2); }
/* the selection bar: what to do with the selected pages */
.selbar { padding: 10px 12px 12px; border-radius: calc(12px * var(--rs)); background: var(--tint);
          display: flex; flex-direction: column; gap: 10px; }
.selbar-top { display: flex; align-items: center; gap: 8px; }
.selbar-top strong { flex: 1; font: 700 14px/1.3 var(--ff); }
.selbar-btns { display: flex; align-items: center; gap: 4px; }
.selbar-top .link { min-height: var(--tap); padding: 0 12px; font-size: 13px; }
.selacts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.selact { flex-direction: column; gap: 4px; min-height: 56px; padding: 4px; border: 0;
          border-radius: calc(10px * var(--rs)); background: var(--surface); }
.selact .ic { font-size: 18px; line-height: 1; }
.selact .lb { font: 600 11.5px/1.15 var(--ff); }
.selact.danger { background: var(--danger-bg); color: var(--danger-ink); }
.selmove { flex-wrap: nowrap; }
.selmove .chk { flex: 1; min-width: 0; }
.orghead { display: flex; align-items: center; gap: 8px; }
.orgcount { flex: 1; font: 700 14px/1.3 var(--ff); }
.dens { display: flex; gap: 2px; padding: 3px; background: var(--bg); border-radius: calc(9px * var(--rs)); }
.dens button { width: 44px; min-height: 34px; padding: 0; border: 0; background: transparent; color: var(--i3);
               border-radius: calc(7px * var(--rs)); font-size: 14px; }
.dens button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
@media (pointer: coarse) { .dens button { min-height: 44px; } }
.orgtools { display: flex; gap: 6px; flex-wrap: wrap; }
.orgtools .btn { flex: 1 1 auto; padding: 0 10px; }
.pill { min-height: 30px; padding: 0 12px; border: 0; border-radius: calc(9999px * var(--rp));
        background: var(--surface); color: var(--acs); font: 600 12px/1 var(--ff); }
@media (pointer: coarse) { .pill { min-height: 44px; } }
.orgsmallhint { display: none; }
@media (pointer: coarse) {
  #pagespanel.dense .orgsmallhint { display: block; }
  #pagespanel.dense .orgtouchhint { display: none; }
}
/* small cards: more to a row, no ⠿ handle (Move to… reorders) */
#organizer.dense { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
#organizer.dense .pthumb { height: 92px; }
#organizer.dense .pthumb canvas { max-height: 86px; }
#organizer.dense .pthumb.sideways canvas { max-width: 86px; max-height: 86px; }
#organizer.dense .pcard { padding: 6px; }
#organizer.dense .ptools, #organizer.dense .pview { display: none; }
@media (pointer: coarse) { #organizer.dense .pgrip { display: none; } }
.gotogrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
            max-height: 40vh; overflow-y: auto; padding: 8px 4px 4px; }
.gpage { position: relative; aspect-ratio: 1 / 1.3; min-height: 44px; padding: 0; background: #fff; color: #1c1e21;
         border: 1px solid var(--l33); border-radius: calc(4px * var(--rs)); font: 600 13px/1 var(--ff); }
.gpage.on { outline: 2px solid var(--ac); outline-offset: 1px; }
.gbadge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
          border-radius: calc(9999px * var(--rp)); background: var(--ac); color: var(--on-ac);
          font: 700 11px/20px system-ui; }
.pv-sub { margin: -4px 0 8px; font: 400 12px/1.3 var(--ff); color: var(--i3); }
.pv-foot { margin-top: 10px; justify-content: center; }
.pv-foot button { min-height: 44px; }
.pv-sel.on { background: var(--tint); border-color: var(--ac); color: var(--acs); }
.orgtouchhint { display: none; }
.orgapplyrow #orgapply { flex: 2; }
#orgselto { width: 70px; }

/* ------------------------------------------------------------ viewer */
.main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column;
        --strip: 0px; }
.main:has(> #thumbs:not([hidden])) { --strip: 128px; }
/* auto margins, not justify-content: a zoomed page wider than the viewer
   must still scroll to its left edge */
.viewer { flex: 1; min-height: 0; display: flex; align-items: flex-start; overflow: auto;
          padding: 36px; background: var(--vw); touch-action: pan-x pan-y; }
.empty { margin: auto; max-width: 320px; text-align: center; color: var(--i3);
         display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 15px; }
.empty p { margin: 0; }
.empty-ic { font-size: 40px; line-height: 1; opacity: .7; }
.empty-open { width: auto; padding: 0 24px; display: inline-flex; align-items: center; cursor: pointer; }
.empty-new { width: auto; padding: 0 24px; margin-top: 10px; }
/* Fill: the image's 90° turns above its angle stepper */
.ctl > .row.two + .stepper { margin-top: 8px; }
#pagewrap { position: relative; margin: auto; flex-shrink: 0; box-shadow: var(--shadow-page); }
#overlay { position: absolute; left: 0; top: 0; cursor: text; touch-action: pan-x pan-y; }
body[data-mode="sign"] #overlay { cursor: crosshair; }
#pagewrap.wm #overlay { cursor: crosshair; touch-action: none; }
#pagewrap.wm #layer, #pagewrap.wm #layer > * { pointer-events: none; }
#layer { position: absolute; inset: 0; pointer-events: none; }
#layer > * { pointer-events: auto; }

/* what sits on the page: literal colours, the page is always white */
.item { position: absolute; }
.item textarea { display: block; width: auto; min-height: 0; padding: 0; margin: 0; border: 0;
                 border-radius: 0; resize: none; overflow: hidden; white-space: pre;
                 background: transparent; outline: 1px dashed rgba(37, 99, 235, .55); }
.item textarea:focus, .item.sel textarea { outline: 1.5px solid #2563eb; background: rgba(37, 99, 235, .06); }
.item img { display: block; cursor: move; outline: 1px dashed rgba(37, 99, 235, .55); }
.item.sel img { outline: 1.5px solid #2563eb; }
.item .grip, .item .del { position: absolute; top: -2px; width: 18px; height: 18px; min-height: 0;
                 padding: 0; border: 0; border-radius: 4px; font: 400 13px/18px var(--ff);
                 text-align: center; background: #2563eb; color: #fff; visibility: hidden; }
.item .grip { left: -21px; cursor: move; touch-action: none; user-select: none; }
.item.image { transform-origin: 50% 50%; }
.item .rsz { position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px;
             border: 2px solid #2563eb; border-radius: 3px; background: #fff; cursor: nwse-resize;
             touch-action: none; visibility: hidden; }
.item.sel .rsz, .item:hover .rsz { visibility: visible; }
.item .del { right: -21px; }
.item:hover .grip, .item:hover .del, .item.sel .grip, .item.sel .del { visibility: visible; }
@media (pointer: coarse) {
  /* 44px to touch, drawn smaller: the ring of empty space is the rest */
  .item .grip, .item .del { width: 30px; height: 30px; top: -8px; border-radius: 8px;
                            font-size: 16px; line-height: 30px; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
  .item .grip { left: -36px; }
  .item .del { right: -36px; background: #fff; color: #b91c1c; border: 1.5px solid #b91c1c; }
  .item .grip::after, .item .del::after { content: ""; position: absolute; inset: -7px; }
  .item .rsz { right: -15px; bottom: -15px; width: 26px; height: 26px; border-radius: 7px;
               box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
  .item .rsz::after { content: ""; position: absolute; inset: -11px; }
  .item:hover .grip, .item:hover .del, .item:hover .rsz { visibility: hidden; }
  .item.sel .grip, .item.sel .del, .item.sel .rsz { visibility: visible; }
}
/* opaque, so the PDF's own (old) field appearance can't show through */
.field { position: absolute; width: auto; min-height: 0; margin: 0; padding: 0 2px;
         border: 1px solid rgba(37, 99, 235, .5); border-radius: 0; background: #e3edfd; color: #000; }
.field[type=checkbox], .field[type=radio] { padding: 0; accent-color: #2563eb; }
textarea.field { resize: none; }
.field:focus { outline: 2px solid #2563eb; background: #d3e3fc; }

/* floating page switcher and zoom */
.float { position: absolute; bottom: calc(var(--strip) + 16px); z-index: 5; display: flex;
         align-items: center; gap: 2px; padding: 4px; background: var(--surface);
         border-radius: calc(10px * var(--rs)); box-shadow: var(--shadow-float); }
.float-l { left: 16px; }
.float-r { right: 16px; }
.fbtn, .fbtn-zoom { min-height: var(--tap); border: 0; border-radius: calc(8px * var(--rs));
                    background: transparent; color: var(--ink); }
.fbtn { width: var(--tap); padding: 0; font: 400 18px/1 var(--ff); }
.fbtn-zoom { min-width: 58px; padding: 0 6px; font: 600 13px/1 var(--ff); font-variant-numeric: tabular-nums; }
.float-lb { min-width: 74px; min-height: var(--tap); padding: 0 6px; border: 0; background: transparent;
            text-align: center; font: 600 13px/1 var(--ff); font-variant-numeric: tabular-nums; }
.float-lb::after { content: " \25BE"; color: var(--i3); font-size: 10px; }
.pagedots { display: none; gap: 6px; }
.pdot { position: relative; width: 40px; min-height: 40px; padding: 0; border: 0;
        border-radius: calc(9999px * var(--rp)); background: var(--bg); color: var(--i2);
        font: 600 14px/1 var(--ff); font-variant-numeric: tabular-nums; }
.pdot.on { background: var(--ac); color: var(--on-ac); }
.pdot .gbadge { top: -4px; right: -6px; min-width: 18px; height: 18px; font-size: 10px; line-height: 18px;
                background: var(--badge-count); color: #fff; }
.toast { position: absolute; left: 50%; bottom: calc(var(--strip) + 18px); z-index: 6;
         transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
         padding: 6px 6px 6px 16px; border-radius: calc(10px * var(--rs));
         background: var(--toast-bg); color: var(--toast-ink); font: 400 14px/1.3 var(--ff);
         box-shadow: var(--shadow-toast); white-space: nowrap; }
.toast button { background: transparent; color: var(--toast-ac); border-color: var(--toast-ac); }

/* page strip */
.thumbs { flex: none; height: 128px; display: flex; align-items: center; gap: 16px;
          padding: 0 20px; overflow-x: auto; overflow-y: hidden; background: var(--wl);
          border-top: 1px solid var(--l15); }
.thumb { position: relative; flex: none; display: flex; flex-direction: column; align-items: center;
         gap: 5px; min-height: 0; padding: 0; border: 0; background: transparent; }
.thumb .tcanvas { display: block; width: 62px; min-height: 40px; background: #fff;
                  border-radius: calc(4px * var(--rs)); overflow: hidden;
                  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.thumb .tcanvas:empty { aspect-ratio: 1 / 1.414; }
.thumb canvas { display: block; width: 62px !important; height: auto !important; max-height: 88px; }
.thumb .tnum { font: 400 11px/1 system-ui; color: var(--i2); }
.thumb.active .tcanvas { outline: 2px solid var(--ac); outline-offset: 1px; }
.thumb.active .tnum { font-weight: 700; color: var(--acs); }
.thumb .tbadge { position: absolute; top: -7px; right: -8px; min-width: 20px; height: 20px;
                 padding: 0 5px; border-radius: calc(9999px * var(--rp)); background: var(--ac);
                 color: var(--on-ac); font: 700 11px/20px system-ui; text-align: center; }

/* Pages: the grid of pages in the viewer */
#organizer { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px;
             align-content: start; width: 100%; padding-bottom: 60px; }
.pcard { position: relative; min-width: 0; padding: 8px; border-radius: calc(12px * var(--rs));
         background: var(--surface); border: 2px solid transparent; border-top: 5px solid var(--src);
         box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: grab; touch-action: pan-y;
         user-select: none; -webkit-user-select: none; outline: none; }
.pcard:focus-visible { border-color: var(--ac); border-top-color: var(--src); }
.pcard.dragging { opacity: .6; cursor: grabbing; box-shadow: var(--shadow-drag); }
.pcard.selected { border-color: var(--ac); border-top-color: var(--src); background: var(--tint);
                  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 33%, transparent); }
.pcard.selected::after { content: "\2713"; position: absolute; top: 6px; left: 6px; width: 22px;
                         height: 22px; border-radius: 11px; background: var(--ac); color: #fff;
                         font-size: 14px; line-height: 22px; text-align: center; }
.pcard[data-count]::before { content: attr(data-count); position: absolute; top: -8px; right: -8px;
                             min-width: 24px; height: 24px; border-radius: 12px; background: var(--badge-count);
                             color: #fff; font: 700 13px/24px system-ui; text-align: center; z-index: 2; }
.pthumb { height: 150px; display: flex; align-items: center; justify-content: center;
          overflow: hidden; background: var(--vw); border-radius: calc(4px * var(--rs)); }
.pthumb canvas { transform: rotate(var(--rot, 0deg)); transition: transform .15s;
                 box-shadow: 0 0 0 1px #0002; background: #fff; }
/* drawn at the screen's pixel ratio: shown at most the box's size */
.pthumb canvas { max-width: 100%; max-height: 142px; width: auto !important; height: auto !important; }
.pthumb.sideways canvas { max-width: 142px; max-height: 142px; }
.pfoot { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; min-width: 0; }
.pfoot .srcchip { flex: none; }
.pfoot .ppos { font-weight: 700; min-width: 14px; }
.pgrip { touch-action: none; cursor: grab; font-size: 16px; line-height: 1; padding: 2px 3px;
         margin-left: -3px; opacity: .6; }
.ptools { margin-left: auto; display: flex; gap: 2px; }
.ptools button { min-height: 30px; padding: 0 7px; font-size: 13px; }
.pview { position: absolute; top: 12px; right: 12px; min-height: 30px; padding: 0 6px; font-size: 13px; opacity: .85; }
.pview:hover, .pview:focus-visible { opacity: 1; }
/* touch: a tap selects, the ⠿ handle drags, and what to do with the
   selected pages is in the selection bar, not on every card */
@media (pointer: coarse) {
  .ptools { display: none; }
  .pgrip { width: 44px; height: 44px; flex: none; margin-left: -2px; display: flex; align-items: center;
           justify-content: center; border-radius: calc(9px * var(--rs)); background: var(--bg);
           color: var(--i2); font-size: 19px; opacity: 1; }
  .pfoot .ppos { font-size: 14px; }
  .pview { top: 14px; right: 14px; width: 40px; min-height: 40px; padding: 0;
           border: 0; border-radius: calc(9999px * var(--rp)); background: var(--surface);
           box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
  .orgtouchhint { display: block; }
  .orgdeskhint { display: none; }
}

/* ------------------------------------------------------------ dialogs */
.modal, #consent { position: fixed; inset: 0; z-index: 50; background: var(--scrim);
                   display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box, #consent-box, .ov-box, .pv-box {
  background: var(--surface); color: var(--ink); border-radius: calc(12px * var(--rs));
  box-shadow: var(--shadow-modal); max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
.modal-box { width: 100%; max-width: 520px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.modal-box h2, .ov-box h2, #consent-box h2 { margin: 0; font: 700 17px/1.25 var(--ff); }
.modal-box label:not(.chk):not(.openbtn) { display: block; margin-top: 4px; color: var(--i2); }
.modal-box .row.end { margin-top: 6px; }
.tabs { display: flex; border-bottom: 1px solid var(--l27); }
.tabs .tab { flex: 1; min-height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
             background: transparent; opacity: .65; font-weight: 400; }
.tabs .tab.active { opacity: 1; font-weight: 600; border-bottom-color: var(--ac); }
.pad { display: block; width: 100%; height: 170px; margin-top: 4px; background: #fff;
       border: 1px dashed var(--l53); border-radius: calc(8px * var(--rs)); touch-action: none; }
.pad.tall { height: 260px; }
#sigpad { cursor: crosshair; }
.checker { background-color: #fff;
           background-image: linear-gradient(45deg, #eee 25%, transparent 25%),
             linear-gradient(-45deg, #eee 25%, transparent 25%),
             linear-gradient(45deg, transparent 75%, #eee 75%),
             linear-gradient(-45deg, transparent 75%, #eee 75%);
           background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.modal-box .stepper { width: 100%; }
#src-draw .row { margin-top: 8px; }
#src-draw .stepper { flex-basis: 100%; }

#consent-box { max-width: 560px; padding: 22px 26px; font-size: 14px; }
#consent-box ul { padding-left: 20px; margin: 12px 0; }
#consent-box li { margin-bottom: 8px; line-height: 1.55; }
#consent-box .en { color: var(--i3); font-size: 12.5px; line-height: 1.5;
                   border-top: 1px solid var(--l33); padding-top: 10px; }
#agreelabel { display: flex; margin: 14px 0; font-size: 13.5px; }
#accept { width: 100%; min-height: 46px; font-size: 15px; }

#mexlist { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
.mexitem { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px;
           border-radius: calc(8px * var(--rs)); background: var(--sb); font-size: 13px; }
.mexitem img { width: 64px; height: 32px; object-fit: contain; background: #fff;
               border: 1px solid var(--l33); border-radius: 4px; }
#mexwarn:not(:empty) { padding: 10px 12px; border-radius: calc(8px * var(--rs));
                       background: var(--danger-bg); color: var(--danger-ink); font-size: 12px; }

.ov-box { width: min(620px, calc(100vw - 32px)); padding: 20px 22px; display: flex;
          flex-direction: column; gap: 8px; overflow: hidden; }
.ovfile { font-size: 12px; color: var(--i2); }
#ovreport li.info { background: var(--sb); color: var(--i2); }
#ovreport li.info::before { content: "\2022"; }
#ovreport li { align-items: center; }
#ovreport li > span { flex: 1; }
.ovgo { flex: none; min-height: 36px; padding: 0 10px; background: var(--surface); }
@media (pointer: coarse) { .ovgo { min-height: 44px; } }
.btn-primary.busy { opacity: .8; cursor: progress; }
.btn-primary.busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
/* on touch, a dialog's buttons share the row: Cancel / Back first, the one primary last */
@media (pointer: coarse) {
  .modal-box > .row.end, .ov-box > .row.end { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .modal-box > .row.end > *, .ov-box > .row.end > * { min-height: 48px; }
}
@keyframes spin { to { transform: rotate(360deg); } }
#ovreport { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
            font: 400 13px/1.5 var(--ff); }
#ovreport li { display: flex; gap: 10px; padding: 8px 12px; border-radius: calc(8px * var(--rs)); }
#ovreport li::before { flex: none; width: 16px; text-align: center; font-weight: 700; }
#ovreport li.ok { background: var(--ok-bg); color: var(--ok-ink); }
#ovreport li.ok::before { content: "\2713"; }
#ovreport li.warn { background: var(--warn-bg); color: var(--warn-ink); }
#ovreport li.warn::before { content: "!"; }
#ovreport li.err { background: var(--danger-bg); color: var(--danger-ink); font-weight: 600; }
#ovreport li.err::before { content: "\2715"; }
#ovpages { flex: 1; min-height: 200px; overflow-y: auto; background: var(--wl);
           border-radius: calc(8px * var(--rs)); padding: 12px 0; display: flex;
           flex-direction: column; align-items: center; gap: 12px; }
.ovpage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ovcanvas { min-height: 120px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.ovcanvas:empty { aspect-ratio: 1 / 1.414; }
.ovcanvas canvas { display: block; }
.ovpage figcaption { font-size: 11px; color: var(--i3); }

.pv-box { max-width: calc(100vw - 32px); padding: 12px 16px; }
.pv-head { margin: 0 0 10px; flex-wrap: nowrap; }
#pvtitle { flex: 1; font-size: 13px; font-weight: 600; border-left: 4px solid var(--src);
           padding-left: 8px; overflow-wrap: anywhere; }
#pvcanvas { display: flex; justify-content: center; }
#pvcanvas canvas { box-shadow: 0 0 0 1px #0002; transform: rotate(var(--rot, 0deg)); }

/* =========================================================== tablet
   A touch screen wider than a phone (an iPad is 1180px wide, wider than a
   small laptop window), or a narrow desktop window: the tools move into
   the top bar and the panel is 360px. */
@media (min-width: 701px) and (pointer: coarse), (min-width: 701px) and (max-width: 1099px) {
  :root { --top-h: 62px; }
  .app { grid-template-columns: 360px minmax(0, 1fr);
         grid-template-areas: "top top" "panel main"; }
  body.panelright .app { grid-template-columns: minmax(0, 1fr) 360px;
                         grid-template-areas: "top top" "main panel"; }
  .topbar { gap: 12px; }
  .wordmark, .open-top { display: none; }
  .filechip { max-width: 190px; }
  .hist-btn { width: 44px; min-height: 44px; font-size: 18px; }
  .lang button { min-height: 38px; min-width: 48px; padding: 0 12px; font-size: 13px; }
  .more-btn { width: 44px; min-height: 44px; }
  /* the tools: a segmented control in the middle of the top bar */
  /* right-aligned, clear of the language switch and ⋯ (about 190px) */
  .rail { grid-area: top; justify-self: end; margin-right: 196px; align-self: center; z-index: 2;
          flex-direction: row; gap: 4px; padding: 4px; border: 0;
          background: var(--bg); border-radius: calc(12px * var(--rs)); }
  .rail .tab { flex-direction: row; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: calc(9px * var(--rs)); }
  body.panelright .rail { border-left: 0; }
  .rail .tab.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
  .rail-ic { font-size: 16px; }
  .rail-lb { font-size: 13px; white-space: nowrap; }
  .panel-title { font-size: 18px; }
    .viewer { padding: 28px; }
  .modal-box { max-width: 540px; border-radius: calc(16px * var(--rs)); }
  /* Pages: the grid takes the full width; the count, files and tools, then
     the selection or Apply, run along the bottom */
  body[data-mode="pages"] .app, body.panelright[data-mode="pages"] .app {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr) auto;
    grid-template-areas: "top" "main" "panel"; }
  body[data-mode="pages"] .panel { border: 0; border-top: 1px solid var(--l15); box-shadow: var(--shadow-sheet); }
  body[data-mode="pages"] .panel-head, body[data-mode="pages"] #privacy,
  body[data-mode="pages"] #siginfo, #pagespanel .hint:not(#orgempty) { display: none; }
  body[data-mode="pages"] .panel-scroll { flex: none; overflow: visible; padding: 10px 20px 12px; }
  #pagespanel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  /* the count and tools, the files, then what to do */
  #pagespanel .orghead { order: 1; flex: none; gap: 12px; }
  #pagespanel .orgtools { order: 2; flex: none; flex-wrap: nowrap; margin-left: auto; }
  #pagespanel .orgtools .btn { min-height: 44px; }
  #pagespanel .filerow { order: 3; flex: 1 1 100%; min-width: 0; }
  #pagespanel #orgempty { order: 3; flex-basis: 100%; }
  #orgsel, .orgapplyrow { order: 4; flex: 1 1 100%; max-width: 760px; margin: 0 auto; }
  #orgsel { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 8px 10px; }
  #orgsel .selbar-top { flex: none; flex-direction: column; align-items: flex-start; gap: 2px; }
  #orgsel .selbar-top strong { flex: none; white-space: nowrap; }
  #orgsel .selbar-top .pill, #orgsel .selbar-top .link { min-height: 44px; }
  #orgsel .selacts { flex: 1; }
  #pagespanel:has(#orgsel:not([hidden])) .orgapplyrow { display: none; }
  body[data-mode="pages"] #organizer { padding-bottom: 24px; }
}
/* the same, with the tools on a row of their own (tablet sizes only) */
@media (min-width: 701px) and (max-width: 1149px) and (pointer: coarse), (min-width: 701px) and (max-width: 1099px) {
  body[data-mode="pages"] .app, body.panelright[data-mode="pages"] .app {
    grid-template-rows: var(--top-h) auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "rail" "main" "panel"; }
}
/* too narrow for the tools beside the file name: a row of their own */
@media (min-width: 701px) and (max-width: 1149px) {
  .app { grid-template-rows: var(--top-h) auto minmax(0, 1fr);
         grid-template-areas: "top top" "rail rail" "panel main"; }
  body.panelright .app { grid-template-areas: "top top" "rail rail" "main panel"; }
  .rail { grid-area: rail; justify-self: stretch; justify-content: center; margin-right: 0;
          border-radius: 0; border-bottom: 1px solid var(--l15); }
  .rail .tab { flex: 0 1 180px; }
  .filechip { max-width: none; }
}

/* =========================================================== phone
   App bar, the page, and the panel as a bottom sheet over it. The tools
   drop down from the app bar; Import/Export and Open are in the ⋯ menu. */
@media (max-width: 700px) {
  :root { --top-h: 58px; }
  .app { grid-template-columns: minmax(0, 1fr);
         grid-template-rows: auto auto minmax(0, 1fr) auto;
         grid-template-areas: "top" "rail" "main" "panel"; }
  body.panelright .app { grid-template-columns: minmax(0, 1fr);
                         grid-template-areas: "top" "rail" "main" "panel"; }
  .topbar { gap: 8px; padding: 6px 10px 8px 14px; min-height: var(--top-h); }
  .wordmark, .open-top, #redo, .menu-side { display: none; }
  .filebox { flex: 1; }
  .filechip { padding: 0; background: none; max-width: none; }
  .filechip .file { font: 600 14px/1.2 var(--ff); color: var(--ink); }
  .toolbtn { display: flex; min-height: 24px; padding: 0; border: 0; background: transparent;
             color: var(--acs); font: 600 12px/1.3 var(--ff); justify-content: flex-start; }
  .toolbtn .car { font-size: 10px; }
  .spacer { display: none; }
  .hist-btn { width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 19px; }
  .lang button { min-width: 40px; min-height: 36px; padding: 0 8px; }
  .more-btn { width: 40px; min-height: 44px; }
  .menu { right: 10px; }
  /* the tools, when the switcher is open */
  .rail { display: none; }
  body.toolsopen .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
                         padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--l15); }
  body.panelright .rail { border-left: 0; }
  .rail .tab { min-height: 52px; padding: 0; gap: 4px; border-radius: calc(10px * var(--rs)); }
  .rail-ic { font-size: 18px; }
  .rail-lb { font-size: 11px; }
  /* the page */
  .main { --strip: 0px; }
  .viewer { padding: 60px 12px 24px; }
  .thumbs { display: none; }
  #pagerow { top: 10px; bottom: auto; left: 50%; transform: translateX(-50%); padding: 3px;
             border-radius: calc(9999px * var(--rp)); }
  #pagerow .fbtn { width: 44px; min-height: 44px; border-radius: calc(9999px * var(--rp)); font-size: 16px; }
  #pagerow .float-lb { min-width: 96px; padding: 0 8px; min-height: 44px; }
  #pagerow.hasdots #pageno { display: none; }
  #pagerow.hasdots .pagedots { display: flex; }
  #pagerow.hasdots .pdot { width: 44px; min-height: 44px; }
  #zoombar { right: 10px; bottom: 26px; flex-direction: column-reverse; padding: 3px;
             border-radius: calc(12px * var(--rs)); }
  #zoombar .fbtn { width: 44px; min-height: 44px; font-size: 20px; }
  #zoombar .fbtn-zoom { min-width: 44px; min-height: 30px; padding: 0; font-size: 11px; color: var(--i2); }
  .toast { left: 12px; right: 12px; transform: none; bottom: 26px; white-space: normal; }
  .toast span { flex: 1; }
  /* the panel as a bottom sheet */
  .panel { position: relative; z-index: 3; margin-top: -14px; border: 0;
           border-radius: calc(18px * var(--rs)) calc(18px * var(--rs)) 0 0;
           box-shadow: var(--shadow-sheet); }
  .panel-head { position: relative; padding: 16px 14px 0; min-height: 44px; }
  .panel-title { font-size: 15px; }
  .sheet-grab { display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
                width: 120px; min-height: 28px; padding: 0; border: 0; background: transparent;
                touch-action: none; cursor: grab; }
  .sheet-grab::before { content: ""; position: absolute; left: 40px; right: 40px; top: 8px; height: 5px;
                        border-radius: calc(9999px * var(--rp)); background: var(--l53); }
  .sheet-more { display: inline-flex; margin-left: auto; min-height: 36px; padding: 0 4px; border: 0;
                background: transparent; color: var(--acs); font: 600 12px/1 var(--ff); }
  /* collapsed, the viewer keeps at least ~450px of an 844px screen */
  .panel-scroll { flex: none; max-height: min(180px, 22dvh); padding: 10px 14px 14px; gap: 14px; }
  body.sheetopen .panel-scroll { max-height: 62dvh; }
  /* drag the grey bar or the title row: it follows the finger (shell.js) */
  .panel-head { touch-action: none; cursor: grab; }
  .panel-scroll { transition: max-height .2s ease; }
  body.sheetdrag .panel-scroll { transition: none; }
  body.sheetdrag { cursor: grabbing; user-select: none; }
  .panel-foot { padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 0; }
  .btn-primary { min-height: 50px; font-size: 15px; border-radius: calc(12px * var(--rs)); }
  .newgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #organizer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #organizer.dense { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  #organizer.dense .pthumb { height: 92px; }
  #organizer.dense .pthumb canvas { max-height: 86px; }
  #organizer.dense .pthumb.sideways canvas { max-width: 86px; max-height: 86px; }
  #organizer.dense .pfoot { gap: 3px; }
  #organizer.dense .srcchip { min-width: 0; padding: 1px 4px; font-size: 10px; }
  #organizer.dense .pcard.selected::after { width: 20px; height: 20px; line-height: 20px; font-size: 12px; }
  .selact .lb { font-size: 10.5px; }
  body[data-mode="pages"] .viewer { padding-top: 12px; }
  /* the Pages sheet: what to do now first (the selected pages, or Apply),
     adding files after */
  .orghead { order: -5; }
  #orgsel { order: -4; }
  .filerow { order: -1; }
  .orgapplyrow { order: -2; }
  .orgtouchhint { order: -1; }
  body[data-mode="pages"] .panel-scroll { max-height: min(236px, 28dvh); }
  /* pages selected: their bar takes Apply's place until the selection is cleared */
  #pagespanel:has(#orgsel:not([hidden])) .orgapplyrow,
  #pagespanel:has(#orgsel:not([hidden])) .orgtouchhint { display: none; }
  .pthumb { height: 128px; }
  .pthumb canvas { max-height: 120px; }
  .pthumb.sideways canvas { max-width: 120px; max-height: 120px; }
  #organizer { padding-bottom: 20px; }
  /* Sign on a phone: the library is one row of tiles, + New first; Import
     and Export are in the ⋯ menu */
  .lib-links, #markidle, .deskonly { display: none; }
  body:not(.sheetopen) #markfilter { display: none; }
  .tiles { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 4px; margin: -8px -2px 0; }
  .tile { flex: 0 0 84px; }
  .tile:has(.newtile) { order: -1; }
  .mark { height: 64px; }
  /* placing: a dark bar instead of the sheet's contents */
  body.placingmark #signpanel > :not(#placing), body.placingmark #outbox,
  body.placingmark #privacy, body.placingmark .panel-foot { display: none; }
  .placing { background: var(--toast-bg); border-color: var(--toast-bg); }
  .placing-t { color: var(--toast-ink); }
  .placing-k { display: none; }
  .placing .btn { min-height: 44px; background: transparent; color: var(--toast-ac); border-color: var(--toast-ac); }
  /* a mark selected: its settings, one tab at a time */
  body.markselected #signpanel > :not(#markprops), body.markselected #outbox,
  body.markselected #privacy, body.markselected .panel-foot { display: none; }
  body.markselected .panel-scroll { max-height: min(300px, 36dvh); }
  body.markselected.sheetopen .panel-scroll { max-height: 62dvh; }
  .markprops { padding-top: 0; border-top: 0; gap: 12px; }
  .me-lb { display: none; }
  .me-acts button { width: 44px; min-height: 44px; padding: 0; font-size: 16px; }
  .me-acts .me-done { display: inline-flex; width: auto; padding: 0 16px; font-size: 14px; }
  .metabs { display: flex; gap: 2px; padding: 3px; background: var(--bg); border-radius: calc(9px * var(--rs));
            overflow-x: auto; scrollbar-width: none; flex: none; }
  .metabs::-webkit-scrollbar { display: none; }
  .metabs button { padding: 0 8px; }
  .metabs button { flex: 1 0 auto; min-height: 44px; padding: 0 10px; border: 0; background: transparent;
                   color: var(--i3); font: 600 12.5px/1.2 var(--ff); border-radius: calc(7px * var(--rs)); }
  .metabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
  .markprops .mg:not(.on) { display: none; }
  #wmpanel .wg:not(.on) { display: none; }
  #wmpanel .wg .ctl-lb { display: none; }
  #wmpanel { gap: 12px; }
  #wmpanel > .row:first-child .chk { min-height: 44px; }
  body[data-mode="wm"] .panel-scroll { max-height: min(236px, 28dvh); }
  .markprops .mg .ctl-lb { display: none; }
  .step-btn { width: 48px; min-height: 48px; }
  .step-val { font-size: 18px; font-weight: 700; }
  .preset { min-height: 46px; }
  /* the signed-file note: one line, tap for all of it */
  .panel .note.sigbox { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                        cursor: pointer; min-height: 44px; line-height: 24px; flex: none; }
  .panel .note.sigbox::before { margin-right: 8px; }
  .panel .note.sigbox.open { white-space: normal; }
  /* dialogs rise from the bottom */
  .modal, #consent { align-items: flex-end; padding: 0; }
  .modal-box, #consent-box, .ov-box { width: 100%; max-width: none;
    border-radius: calc(18px * var(--rs)) calc(18px * var(--rs)) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .pv-box { max-width: 100vw; border-radius: 0; }
}

/* ---------------------------------------------------------- /agents guide */
body.doc { display: block; background: #fff; line-height: 1.55; }
body.doc main { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }
body.doc h1 { font-size: 24px; margin: 0 0 6px; }
body.doc h2 { font-size: 18px; margin: 30px 0 8px; border-bottom: 1px solid #8884;
              padding-bottom: 4px; }
body.doc code, body.doc pre { font-family: ui-monospace, "Courier New", monospace;
              font-size: 13px; background: #8881; border-radius: 4px; }
body.doc code { padding: 1px 4px; }
body.doc pre { padding: 10px 12px; overflow-x: auto; }
body.doc pre code { background: none; padding: 0; }
body.doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
body.doc th, body.doc td { text-align: left; vertical-align: top; padding: 6px 8px;
              border-bottom: 1px solid #8883; }
body.doc td:first-child { white-space: nowrap; }
body.doc .lead { opacity: .75; margin-top: 0; }
body.doc h3 { font-size: 15px; margin: 20px 0 4px; }
body.doc ol.terms > li { margin-bottom: 10px; }
body.doc ol.terms ol { margin: 6px 0 0; padding-left: 22px; }
/* the start screen: the links in its checkbox */
#consent-box p { line-height: 1.6; }
#agreelabel { align-items: flex-start; }
#agreelabel .agree-en { color: var(--i3); font-size: 12.5px; }
body.doc .note { display: block; border-left: 3px solid #2563eb; padding: 4px 12px; background: #2563eb12; }
@media (max-width: 700px) {
  body.doc td:first-child { white-space: normal; }
}
@media (prefers-color-scheme: dark) {
  body.doc { background: #1c1e21; }
}

/* the preview's Print: pictures of the pages, on paper only (print.css) */
#printout { display: none; }