Implemented phase 4 for the POC prototype in the Website service.

Services/Website/Resources/Static/css/trade.css

@@ -782,3 +782,117 @@ a.rows__row:hover {
     grid-template-columns: 100px minmax(0, 2fr) 70px minmax(0, 1fr) 340px 130px;
   }
 }
+
+/* ==========================================================================
+   New listing
+   ========================================================================== */
+
+.listing-form,
+.listing-form__form,
+.listing-form__section,
+.listing-form__scope {
+  display: flex;
+  flex-direction: column;
+}
+
+.listing-form {
+  gap: var(--space-6);
+  max-width: calc(880px + 2 * var(--gutter));
+}
+
+.listing-form__head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.listing-form__form {
+  gap: var(--space-5);
+}
+
+.listing-form__section {
+  gap: var(--space-5);
+}
+
+.listing-form__scope {
+  gap: var(--space-4);
+}
+
+.listing-form__grid {
+  display: grid;
+  gap: var(--space-4);
+  align-items: start;
+}
+
+.listing-form__modes {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.listing-form__mode {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.listing-form__mode:has(input:checked) {
+  border-color: var(--ink);
+  background: var(--tint);
+}
+
+.listing-form__mode span {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-size: 14px;
+}
+
+.listing-form__checks {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 10px var(--space-4);
+}
+
+.listing-form__files {
+  padding: var(--space-4);
+  border: 1px dashed var(--rule);
+  border-radius: var(--radius-sm);
+  background: var(--paper);
+  font-size: 13px;
+}
+
+.listing-form__submit {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+.sell__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+@media (min-width: 600px) {
+  .listing-form__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .listing-form__modes {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .field--wide {
+    grid-column: span 2;
+  }
+}
+
+@media (min-width: 1024px) {
+  .listing-form {
+    padding-top: var(--space-8);
+  }
+}