/* The region labelling tool: a page on the left, the fields marked on it on
   the right. Loaded by the app only. The public signing page draws pages with
   docview.css and inline styles, so nothing here is needed to see a document. */

.pr-body { max-height: 76vh; }

.pr-note {
  display: flex; gap: 9px; align-items: flex-start;
  border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  margin-bottom: 12px;
}
.pr-note.ok { background: #ecfdf5; color: #065f46; }
.pr-note.warn { background: #fffbeb; color: #92400e; }
/* icon() emits an SVG with no size of its own; the global default is 16px and
   these need to stay put next to two lines of text. */
.pr-note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }

.pr-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pr-tools select { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

.pr-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pr-doc { background: #eef1f6; border-radius: 12px; padding: 12px; overflow: auto; max-height: 62vh; }
.pr-side { position: sticky; top: 0; }
.pr-side > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.pr-list { display: flex; flex-direction: column; gap: 10px; max-height: 58vh; overflow: auto; }

.pr-item { border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: #fff; }
.pr-item-head { display: flex; align-items: center; gap: 6px; }
.pr-item-head select {
  flex: 1; min-width: 0; padding: 5px 7px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 7px; background: #fff;
}
.pr-pin {
  font-size: 10.5px; font-weight: 700; color: #475569; background: #e2e8f0;
  border-radius: 5px; padding: 2px 5px; flex: 0 0 auto;
}
.pr-read { font-size: 11.5px; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.pr-problem { font-size: 11.5px; color: #b45309; margin-top: 6px; line-height: 1.45; overflow-wrap: anywhere; }
.pr-value { display: block; margin-top: 7px; }
.pr-value span { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.pr-value input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; }

/* The box drawn on the page. */
.dv-page.pr-arm { cursor: crosshair; }
.pr-box {
  position: absolute; border: 1.5px solid #d97706; background: rgba(217, 119, 6, .14);
  border-radius: 3px; box-sizing: border-box; z-index: 5;
}
.pr-box.drawing { border-style: dashed; }
.pr-box.named { border-color: #2563eb; background: rgba(37, 99, 235, .12); }
.pr-box span {
  position: absolute; top: -15px; left: -1px; font-size: 9.5px; font-weight: 700;
  background: #2563eb; color: #fff; border-radius: 4px 4px 0 0; padding: 1px 5px;
  white-space: nowrap; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

@media (max-width: 900px) {
  .pr-split { grid-template-columns: minmax(0, 1fr); }
  .pr-side { position: static; }
}