feat: add real PDF ingestion workflow

apps/web/app/globals.css

@@ -434,6 +434,7 @@ textarea:focus-visible,
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: 12px;
+  overflow: auto;
 }
 
 .canvas-labels,
@@ -465,6 +466,156 @@ textarea:focus-visible,
   filter: contrast(1.02) saturate(0.72);
 }
 
+.plan-upload-empty {
+  min-height: 486px;
+  padding: 40px;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  gap: 14px;
+  text-align: center;
+  background:
+    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
+    var(--surface-muted);
+}
+
+.plan-upload-empty h2 {
+  font-size: 20px;
+  letter-spacing: -0.025em;
+}
+
+.plan-upload-empty > p {
+  max-width: 530px;
+  color: var(--text-soft);
+  font-size: 12px;
+  line-height: 1.8;
+}
+
+.upload-emblem {
+  width: 62px;
+  height: 62px;
+  display: grid;
+  place-items: center;
+  color: var(--accent-strong);
+  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
+  box-shadow: var(--shadow);
+}
+
+.plan-document-frame {
+  position: relative;
+  width: min(100%, 720px);
+  margin: 0 auto;
+  align-self: start;
+  overflow: hidden;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-surface);
+  background: #fff;
+  box-shadow: var(--shadow);
+}
+
+.plan-document-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  filter: contrast(1.02) saturate(0.75);
+}
+
+.region-layer {
+  position: absolute;
+  inset: 0;
+}
+
+.detected-region {
+  position: absolute;
+  min-width: 0;
+  min-height: 0;
+  padding: 8px;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  color: var(--accent-strong);
+  border: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.48);
+  text-align: left;
+}
+
+.detected-region > span {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  display: grid;
+  place-items: center;
+  color: white;
+  border-radius: 50%;
+  background: var(--accent-strong);
+  font-size: 10px;
+  font-weight: 750;
+}
+
+.detected-region strong,
+.detected-region small {
+  padding: 4px 6px;
+  border-radius: 5px;
+  background: rgb(255 255 255 / 0.9);
+  font-size: 10px;
+  line-height: 1.2;
+}
+
+.detected-region small {
+  margin-left: auto;
+  color: var(--text-soft);
+}
+
+.detected-region:hover,
+.detected-region.recommended {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+
+.detected-region.selected {
+  border-color: var(--accent-strong);
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.detected-region:disabled {
+  cursor: default;
+  opacity: 0.78;
+}
+
+.ingestion-facts {
+  margin-top: 12px;
+  display: grid;
+  gap: 8px;
+  color: var(--text-soft);
+  font-size: 10px;
+}
+
+.ingestion-facts span,
+.workflow-error {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.workflow-error {
+  color: var(--warning) !important;
+  font-size: 11px !important;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 .region-outline {
   position: absolute;
   inset: 8% 10% 9% 9%;