Implement market occurrence drawer

public/assets/styles.portal.css

@@ -39,6 +39,73 @@ body.sg-card-list-page-drawer-open {
   overflow: hidden;
 }
 
+.sg-market-mobile-detail-host {
+  position: fixed;
+  inset: 0;
+  z-index: 1500;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  padding: var(--spacing-small);
+  box-sizing: border-box;
+  overflow: auto;
+  background: var(--color-background-purple);
+}
+
+.sg-market-mobile-detail-host .sg-card-list-page-drawer {
+  position: static;
+  display: flex;
+  width: 100%;
+  max-width: none;
+  transform: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
+body.sg-market-mobile-detail-open > :not([data-market-mobile-detail-host]) {
+  display: none !important;
+}
+
+.market-detail-grid {
+  display: grid;
+  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr);
+  margin: 0;
+}
+
+.market-detail-row {
+  display: contents;
+}
+
+.market-detail-row dt,
+.market-detail-row dd {
+  margin: 0;
+  padding: var(--spacing-small) 0;
+  border-bottom: 1px solid var(--color-light-grey);
+}
+
+.market-detail-row dt {
+  color: var(--color-medium-grey);
+}
+
+.market-detail-row dd {
+  overflow-wrap: anywhere;
+}
+
+.market-day-specific {
+  color: var(--color-medium-grey);
+}
+
+.market-edit-form .sg-component-row {
+  margin-top: var(--spacing-medium);
+  align-items: center;
+}
+
+@media (max-width: 767px) {
+  .market-detail-grid {
+    grid-template-columns: minmax(8rem, 0.9fr) minmax(0, 1.1fr);
+  }
+}
+
 .sg-card-list-page-drawer-backdrop {
   position: fixed;
   inset: 0;