/* ScribblePDF viewer.
   Self-contained: no @import, no remote fonts — the CSP forbids them and the
   privacy promise depends on it. */

/* Bundled Hebrew face. Registering it here (rather than relying on whatever
   Hebrew font the OS happens to have) is what keeps on-screen metrics identical
   to the font the exporter embeds. Licensed OFL — see vendor/fonts/OFL.txt. */
@font-face {
  font-family: "PA Noto Sans Hebrew";
  src: url("vendor/fonts/NotoSansHebrew-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "PA Noto Sans Hebrew";
  src: url("vendor/fonts/NotoSansHebrew-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #f1f2f5;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --text: #16181d;
  --text-dim: #6b7280;
  --border: #e2e5ea;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --danger: #dc2626;
  --shadow-toolbar: 0 8px 28px rgba(15, 20, 35, 0.16), 0 2px 6px rgba(15, 20, 35, 0.08);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d;
    --surface: #22252c;
    --surface-2: #2a2e37;
    --text: #eceef2;
    --text-dim: #9aa2b1;
    --border: #343943;
    --shadow-toolbar: 0 8px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100%; }
.pa-spacer { flex: 1; }

/* ------------------------------------------------------------- top bar --- */

.pa-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 44px;
  flex: 0 0 44px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pa-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pa-brand__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), #7c3aed);
}
.pa-topbar__title {
  color: var(--text-dim);
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px;
  color: #047857; background: #d1fae5;
}
@media (prefers-color-scheme: dark) {
  .pa-badge { color: #6ee7b7; background: rgba(6, 95, 70, 0.35); }
}
.pa-status { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.pa-status.is-error { color: var(--danger); }

/* --------------------------------------------------------------- pages --- */

.pa-scroll { flex: 1; overflow: auto; scroll-behavior: smooth; }
.pa-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 24px 160px; /* bottom room so the toolbar never covers a page */
  min-height: 100%;
}

.pa-page {
  position: relative;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 20, 35, 0.14), 0 6px 18px rgba(15, 20, 35, 0.08);
  border-radius: 2px;
  /* Placeholder shimmer until the canvas is rasterized. */
  background-image: linear-gradient(var(--surface-2), var(--surface-2));
}
.pa-page.is-rendered { background-image: none; }
.pa-canvas { display: block; width: 100%; height: 100%; border-radius: 2px; }

.pa-layer { position: absolute; inset: 0; }
.pa-layer.is-placing { cursor: crosshair; }

.is-dragover .pa-pages { outline: 3px dashed var(--accent); outline-offset: -12px; }

/* With no document loaded, the page container still claims min-height:100% and
   pushes the empty state below the fold. Collapse it and centre the message. */
#app.is-empty .pa-pages { display: none; }
#app.is-empty .pa-scroll { display: flex; align-items: center; justify-content: center; }

/* --------------------------------------------------------- annotations --- */

.pa-ann {
  position: absolute;
  transform-origin: top left;
  cursor: move;
  /* A 1px transparent ring makes thin glyphs easy to grab. */
  outline: 1px solid transparent;
}
.pa-ann.is-selected { outline: 1.5px solid var(--accent); outline-offset: 2px; }

.pa-ann--text {
  white-space: pre;
  padding: 0;
  margin: 0;
  min-width: 8px;
  min-height: 1em;
  caret-color: var(--accent);
}
.pa-ann--text:focus { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.pa-ann--text.is-editing { cursor: text; }

.pa-ann--check svg, .pa-ann--cross svg { display: block; width: 100%; height: 100%; }

.pa-ann--signature { display: block; }
.pa-ann__img { width: 100%; height: 100%; display: block; pointer-events: none; }

.pa-handle {
  position: absolute;
  right: -6px; bottom: -6px;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: nwse-resize;
  opacity: 0;
}
.pa-ann.is-selected .pa-handle { opacity: 1; }

/* ---------------------------------------------------- floating toolbar --- */
/* Matches the design reference: one framed slab, tiles divided by hairlines,
   each tile a bold glyph over a caption. The frame colour shows only as the
   outer border; separators are lighter, which is what gives the segmented
   "control strip" read. */

:root {
  --tb-frame: #c3ccd7;
  --tb-tile: #e8e8e8;
  --tb-tile-hover: #dedede;
  --tb-sep: #f6f7f8;
  --tb-ink: #101114;
  --tb-label: #23262b;
  --tb-util: #eef0f3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tb-frame: #171a20;
    --tb-tile: #31363f;
    --tb-tile-hover: #3b414c;
    --tb-sep: #232730;
    --tb-ink: #f2f4f7;
    --tb-label: #d7dbe2;
    --tb-util: #262a32;
  }
}

.pa-toolbar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 6px;
  background: var(--tb-frame);
  box-shadow: var(--shadow-toolbar);
  user-select: none;
}
.pa-toolbar.is-dragging { cursor: grabbing; }

/* -- primary tile row -- */

.pa-toolbar__tiles { display: flex; align-items: stretch; gap: 5px; }

.pa-grip {
  display: flex;
  align-items: center;
  padding: 0 1px;
  color: color-mix(in srgb, var(--tb-ink) 45%, transparent);
  cursor: grab;
}
.pa-grip:active { cursor: grabbing; }
.pa-grip svg { width: 16px; height: 16px; }

/* The strip is the seamless slab; tiles inside it are separated by hairlines. */
.pa-strip {
  display: flex;
  border-radius: 3px;
  overflow: hidden;
}

.pa-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 84px;
  padding: 9px 12px 7px;
  border: none;
  background: var(--tb-tile);
  color: var(--tb-ink);
  font: inherit;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pa-tile + .pa-tile { border-left: 2px solid var(--tb-sep); }
.pa-tile:hover:not(:disabled) { background: var(--tb-tile-hover); }
.pa-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.pa-tile:disabled { opacity: 0.5; cursor: default; }

.pa-tile__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  /* The reference glyphs sit on a soft shadow. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.pa-tile__label {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--tb-label);
}

/* Tinted rather than solid: the solid accent is reserved for Download, so the
   primary action stays visually unique. */
.pa-tile.is-active {
  background: color-mix(in srgb, var(--accent) 15%, var(--tb-tile));
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.pa-tile.is-active .pa-tile__label { color: var(--accent); }

.pa-tile--action { background: var(--accent); color: var(--accent-ink); min-width: 96px; }
.pa-tile--action .pa-tile__label { color: var(--accent-ink); }
.pa-tile--action:hover:not(:disabled) { background: #1d4ed8; }
.pa-tile--action.is-dirty { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.pa-tile--action.is-busy { opacity: 0.8; }

/* -- secondary utility row -- */

.pa-toolbar__utility {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 5px;
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--tb-util);
}

.pa-style { display: contents; }
.pa-style.is-hidden { display: none; }

.pa-divider {
  width: 1px;
  align-self: stretch;
  margin: 3px 5px;
  background: color-mix(in srgb, var(--tb-ink) 16%, transparent);
}

.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tb-label);
  font: inherit;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pa-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--tb-ink) 9%, transparent); }
.pa-btn:disabled { opacity: 0.3; cursor: default; }
.pa-btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.pa-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pa-btn svg { width: 17px; height: 17px; }
.pa-btn--text { font-size: 15px; min-width: 26px; }

.pa-swatches { display: flex; gap: 4px; align-items: center; }
.pa-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.pa-swatch.is-active { border-color: var(--tb-ink); }

.pa-select {
  height: 26px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--tb-ink) 18%, transparent);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 0 4px;
}
.pa-range { width: 96px; accent-color: var(--accent); }
.is-hidden { display: none !important; }

.pa-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  margin-left: 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pa-exit:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-dim); }
.pa-exit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pa-exit[hidden] { display: none; }

.pa-empty__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pa-empty__actions .pa-btn[hidden] { display: none; }
/* When a grant is offered it is the primary path; the picker steps back. */
.pa-empty__actions #grant:not([hidden]) ~ #pick {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* ----------------------------------------------------------- empty state - */

.pa-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 14px;
  font-weight: 600;
}
.pa-btn--primary:hover:not(:disabled) { background: #1d4ed8; }
.pa-btn--lg { height: 42px; padding: 0 22px; font-size: 15px; }


.pa-empty {
  margin: auto;
  max-width: 480px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-dim);
}
.pa-empty h1 { color: var(--text); font-size: 24px; margin: 0 0 8px; }
.pa-empty p { margin: 6px 0 18px; }
.pa-empty__note { color: var(--danger); }
.pa-hint { color: var(--text-dim); font-size: 12px; }

/* ----------------------------------------------------------------- toast - */
/* A dark chip reads as something that arrived rather than page furniture, so it
   stays dark in light mode. In DARK mode it must still be lifted above the page
   or it disappears: #1b1e25 on a #16181d background is almost no separation at
   all. So the surface is a token, raised for dark. */

:root {
  --toast-bg: #1b1e25;
  --toast-border: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --toast-bg: #2c323d;
    --toast-border: rgba(255, 255, 255, 0.16);
  }
}

.pa-toast {
  position: fixed;
  right: 24px;
  bottom: 26px;
  z-index: 60; /* above the page, below the signature modal (100) */
  width: min(360px, calc(100vw - 48px));
  padding: 16px 18px 14px;
  border-radius: 14px;
  background: var(--toast-bg);
  color: #eef0f4;
  border: 1px solid var(--toast-border);
  box-shadow: 0 14px 40px rgba(6, 8, 13, 0.5), 0 2px 8px rgba(6, 8, 13, 0.36);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.pa-toast.is-visible { opacity: 1; transform: translateY(0); }
.pa-toast[hidden] { display: none; }

.pa-toast__text {
  margin: 0 22px 14px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #dfe3ea;
}

.pa-toast__actions { display: flex; align-items: center; gap: 8px; }

.pa-toast__cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease;
}
.pa-toast__cta:hover { background: #1d4ed8; }

.pa-toast__later {
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9aa2b1;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pa-toast__later:hover { background: rgba(255, 255, 255, 0.07); color: #eef0f4; }

.pa-toast__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #8b93a2;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pa-toast__close:hover { background: rgba(255, 255, 255, 0.09); color: #eef0f4; }

.pa-toast__cta:focus-visible,
.pa-toast__later:focus-visible,
.pa-toast__close:focus-visible { outline: 2px solid #7aa2ff; outline-offset: 2px; }

/* Narrow viewports: the floating toolbar owns the bottom centre, so lift the
   toast clear of it rather than letting the two overlap. */
@media (max-width: 760px) {
  .pa-toast { left: 12px; right: 12px; bottom: 150px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-toast { transition: opacity 120ms linear; transform: none; }
  .pa-toast.is-visible { transform: none; }
}

/* ----------------------------------------------------------------- modal - */

.pa-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.pa-modal[hidden] { display: none; }
.pa-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 18, 0.5); }
.pa-modal__panel {
  position: relative;
  width: min(680px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.pa-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.pa-modal__head h2 { margin: 0; font-size: 16px; }
.pa-modal__body { padding: 18px; }
.pa-modal__controls { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }

.pa-sigcanvas {
  width: 100%;
  aspect-ratio: 620 / 220;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  touch-action: none;
  cursor: crosshair;
  display: block;
}

.pa-library { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
.pa-library h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.pa-library__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pa-library__item {
  position: relative;
  width: 150px; height: 62px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 6px;
}
.pa-library__item:hover { border-color: var(--accent); }
.pa-library__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pa-library__del {
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
}
.pa-library__item:hover .pa-library__del { opacity: 1; }
.pa-library__del svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}