/* The PDF editor (pages/pdf-editor.js), inside the editors' frame (editors.css).
   The phone draws the same: components/editors/PdfEditor.tsx. */

.pdfe .ed-btn.danger { color: #FF8A80; }
.pdfe .ed-btn svg { pointer-events: none; }
.pdfe-wait, .pdfe-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.pdfe-state-title { font-size: 18px; font-weight: 800; }
.pdfe-state-line { color: var(--ed-dim); font-size: 14px; max-width: 320px; }

/* Pages: every page as a card */
.pdfe-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.pdfe-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 12px;
  padding: 14px 14px 24px; max-width: 980px; margin: 0 auto; align-items: end;
}
@media (min-width: 700px) { .pdfe-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 16px; } }
.pdfe-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 6px 4px;
  border: 2px solid transparent; border-radius: 14px; background: none; color: var(--ed-ink); cursor: grab;
  transition: transform 160ms cubic-bezier(.2,.9,.3,1.2), border-color 120ms, background 120ms;
}
.pdfe-card:hover { background: rgba(255,255,255,0.05); }
.pdfe-card.on { border-color: var(--ed-c); background: rgba(229,72,59,0.14); }
.pdfe-card.lifted { opacity: 0.4; }
.pdfe-card[data-drop=before] { box-shadow: -4px 0 0 var(--ed-c); }
.pdfe-card[data-drop=after] { box-shadow: 4px 0 0 var(--ed-c); }
.pdfe-card:focus-visible { outline: 2px solid var(--ed-c); outline-offset: 2px; }
.pdfe-thumb { position: relative; width: 100%; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.45); pointer-events: none; }
.pdfe-thumb img { position: absolute; left: 50%; top: 50%; object-fit: fill; }
.pdfe-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* Marks paint with their own attributes: nothing of the editors' icon stroke may reach them. */
.ed-shell .pdfe-marks, .ed-shell .pdfe-sig, .ed-shell .pdfe-pad-svg { stroke: none; stroke-width: 1; fill: none; }
.pdfe-num { font-size: 12.5px; font-weight: 800; color: var(--ed-dim); font-variant-numeric: tabular-nums; }
.pdfe-card.on .pdfe-num { color: var(--ed-ink); }
.pdfe-card.add { cursor: pointer; align-self: stretch; justify-content: center; min-height: 120px; }
.pdfe-add {
  width: 100%; flex: 1; min-height: 110px; border-radius: 10px; border: 2px dashed rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; color: var(--ed-dim);
}
.pdfe-add svg { width: 34px; height: 34px; stroke-width: 40; }
.pdfe-card.add:hover .pdfe-add { border-color: var(--ed-c); color: var(--ed-ink); }
.pdfe-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 30px; font-weight: 800; }

/* the panel's rows */
.pdfe-acts { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; }
.pdfe-gap { flex: 1; }
.pdfe-width.on, .pdfe-size.on { background: var(--ed-ink); color: var(--ed-stage); border-color: var(--ed-ink); }
.pdfe-dot { display: block; border-radius: 50%; background: currentColor; }
.ed-btn svg path { pointer-events: none; }
.pdfe-wordrow { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; }
.pdfe-words {
  flex: 1; min-width: 0; height: 44px; border-radius: 14px; border: 1px solid var(--ed-border); background: var(--ed-raised);
  color: var(--ed-ink); font-size: 16px; padding: 0 14px; outline: none;
}
.pdfe-words:focus { border-color: var(--ed-c); }
.pdfe-signrow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-bottom: 6px; }
.pdfe-sig { height: 48px; width: 144px; border-radius: 10px; background: var(--ed-raised); border: 1px solid var(--ed-border); }

/* Draw, Text, Sign: one page, fitted */
.pdfe-pagewrap { position: absolute; inset: 0 0 60px; display: flex; align-items: center; justify-content: center; }
.pdfe-frame { position: relative; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.55); touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.pdfe-frame img { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.pdfe-frame.tool-draw { cursor: crosshair; }
.pdfe-frame.tool-text { cursor: text; }
.pdfe-frame.tool-sign { cursor: copy; }
.pdfe-marks.live { pointer-events: none; }
.pdfe-caret { fill: none; stroke: var(--ed-c); stroke-width: 2; stroke-dasharray: 5 4; }
.pdfe-nav { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.pdfe-count { min-width: 64px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ed-dim); }

/* the signature pad, over the page */
.pdfe-pad { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: pdfe-in 220ms cubic-bezier(.2,.9,.3,1.2); }
@keyframes pdfe-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.pdfe-pad-card { width: min(560px, 100%); background: var(--ed-bar); border: 1px solid var(--ed-border); border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.pdfe-pad-head { display: flex; align-items: center; gap: 10px; }
.pdfe-pad .ed-btn.light { background: var(--ed-raised); border-color: var(--ed-border); color: var(--ed-ink); }
.pdfe-pad-title { flex: 1; text-align: center; font-weight: 800; font-size: 16px; }
.pdfe-pad-box { background: #fff; border-radius: 14px; aspect-ratio: 3 / 1; overflow: hidden; }
.pdfe-pad-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.pdfe-pad-line { stroke: #C9C9CF; stroke-width: 1.5; stroke-dasharray: 6 6; }
.pdfe-pad-done.arc-candy { align-self: stretch; }
.pdfe-pad-done.arc-candy:disabled { opacity: 0.45; cursor: default; }

/* adding another PDF: the picker over the editor */
/* Add a PDF, over the editor: the theme's page (the picker itself stands on the backdrop in the Media editor). */
.pdfe-pickover { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .pdfe-pad { animation: none; }
  .pdfe-card { transition: none; }
}