Split embedded and standalone chart surfaces

web/static/view.css

@@ -52,9 +52,10 @@ body {
   padding: 20px 0 32px;
 }
 
-.input-panel,
+.empty-panel,
 .meta-panel,
-.section-card {
+.section-card,
+.upload-panel {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 14px;
@@ -63,30 +64,63 @@ body {
   margin-bottom: 16px;
 }
 
-.input-label,
+.empty-panel h2,
 .section-card h2,
-.meta-panel h2 {
+.meta-panel h2,
+.upload-panel h2 {
   display: block;
   margin: 0 0 12px;
   font-size: 18px;
 }
 
-textarea {
+.empty-panel p,
+.upload-panel p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.upload-panel {
+  width: min(680px, 100%);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.upload-dropzone {
+  display: block;
+  margin-top: 16px;
+  border: 1px dashed var(--border);
+  border-radius: 12px;
+  padding: 18px;
+  background: #faf6ef;
+}
+
+.upload-dropzone input {
+  display: block;
   width: 100%;
-  min-height: 220px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 12px;
-  background: #fcfaf6;
-  color: var(--ink);
-  font: 13px/1.5 "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+  margin-bottom: 12px;
 }
 
-.input-actions {
-  margin-top: 12px;
+.upload-eyebrow {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
-button {
+.upload-dropzone strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 18px;
+}
+
+.upload-actions {
+  margin-top: 14px;
+}
+
+.upload-actions button {
   border: 0;
   border-radius: 999px;
   background: var(--accent);
@@ -98,7 +132,7 @@ button {
 }
 
 .error-box {
-  margin-top: 12px;
+  margin-bottom: 16px;
   border: 1px solid var(--crit-fg);
   border-radius: 10px;
   padding: 12px;
@@ -121,6 +155,24 @@ button {
   border-radius: 999px;
 }
 
+.sections-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.section-card {
+  margin-bottom: 0;
+}
+
+.section-card-half {
+  grid-column: span 1;
+}
+
+.section-card-full {
+  grid-column: 1 / -1;
+}
+
 .kv-table,
 .data-table {
   width: 100%;
@@ -154,6 +206,19 @@ button {
   overflow-x: auto;
 }
 
+.table-group + .table-group {
+  margin-top: 18px;
+}
+
+.table-group h3 {
+  margin: 0 0 8px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
 .data-table thead th {
   position: sticky;
   top: 0;
@@ -198,6 +263,10 @@ button {
     width: min(100vw - 20px, 1500px);
   }
 
+  .sections-grid {
+    grid-template-columns: 1fr;
+  }
+
   .page-header {
     padding: 18px 14px 14px;
   }
@@ -206,9 +275,15 @@ button {
     font-size: 26px;
   }
 
-  .input-panel,
+  .empty-panel,
   .meta-panel,
-  .section-card {
+  .section-card,
+  .upload-panel {
     padding: 14px;
   }
+
+  .section-card-half,
+  .section-card-full {
+    grid-column: auto;
+  }
 }