feat: professionalize platform release 0.3.13

static/css/app.css

@@ -1,9 +1,9 @@
 /* Houd ook geïmporteerde stylesheets versieerbaar; alleen app.css voorzien van
    een querystring ververst anders niet noodzakelijk de browsercache. */
-@import url("tokens.css?v=0.3.12");
-@import url("base.css?v=0.3.12");
-@import url("layout.css?v=0.3.12");
-@import url("components.css?v=0.3.12");
-@import url("pages.css?v=0.3.12");
-@import url("responsive.css?v=0.3.12");
-@import url("premium.css?v=0.3.12");
+@import url("tokens.css?v=0.3.13");
+@import url("base.css?v=0.3.13");
+@import url("layout.css?v=0.3.13");
+@import url("components.css?v=0.3.13");
+@import url("pages.css?v=0.3.13");
+@import url("responsive.css?v=0.3.13");
+@import url("premium.css?v=0.3.13");

static/css/components.css

@@ -71,7 +71,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  margin: 12px clamp(16px, 2vw, 32px) 0;
+  margin-bottom: 24px;
   padding: 11px 14px;
   border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--outline));
   border-radius: var(--radius-md);

static/css/premium.css

@@ -34,8 +34,8 @@ body::before {
 
 .cockpit-sidebar { background: color-mix(in srgb, var(--surface-lowest) 97%, black); }
 .cockpit-main { padding-top: calc(var(--topbar-height) + 42px); }
-.cockpit-main > * { width: min(100%, var(--content-frame)); margin-right: auto; margin-left: 0; }
-.topbar-inner { display: flex; width: min(100%, var(--content-frame)); height: 100%; align-items: center; justify-content: space-between; gap: 20px; }
+.cockpit-main > * { width: min(100%, var(--content-frame)); margin-inline: auto; }
+.topbar-inner { display: flex; width: min(100%, var(--content-frame)); height: 100%; margin-inline: auto; align-items: center; justify-content: space-between; gap: 20px; }
 .brand-radar { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
 .brand-lockup { display: grid; min-width: 0; gap: 4px; }
 .brand-lockup strong { color: var(--text-strong); font: 740 17px/1 var(--font-headline); letter-spacing: -.025em; }
@@ -198,7 +198,7 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
   .mobile-tabbar a { font-family: var(--font-body); font-weight: 650; }
   .filter-console { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px; }
   .filter-console .grow { grid-column: span 2; }
-  .pipeline-board { width: calc(100vw - (2 * var(--content-gutter))); grid-auto-columns: minmax(280px, 84vw); }
+  .pipeline-board { width: 100%; grid-auto-columns: auto; grid-auto-flow: row; grid-template-columns: 1fr; overflow-x: visible; }
   .profile-index-card .intel-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .profile-index-card { grid-template-columns: 1fr; }
   .profile-index-art { min-height: 230px; border-top: 1px solid var(--divider); border-left: 0; }
@@ -208,6 +208,9 @@ label > span:first-child { font-family: var(--font-body); font-weight: 700; lett
 }
 
 @media (max-width: 560px) {
+  .demo-mode-banner { align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 10px 12px; }
+  .demo-mode-banner strong { font-size: .72rem; }
+  .demo-mode-banner small { font-size: .78rem; line-height: 1.45; }
   .cockpit-heading { margin-bottom: 22px; }
   .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 24px; }
   .stat-card { min-height: 92px; padding: 13px; }

static/css/responsive.css

@@ -50,6 +50,8 @@
   .mobile-tabbar a { display: grid; min-height: 66px; place-items: center; align-content: center; gap: 4px; color: var(--text-faint); font: 10px var(--font-mono); }
   .mobile-tabbar a.is-active { color: var(--cyan); }
   .mobile-tabbar .icon { width: 19px; height: 19px; }
+  .pipeline-board { width: 100%; grid-auto-columns: auto; grid-auto-flow: row; grid-template-columns: 1fr; overflow-x: visible; }
+  .pipeline-column { min-height: 0; }
   .page-header, .cockpit-heading, .section-heading { align-items: flex-start; flex-direction: column; }
   .page-header { margin-bottom: 20px; }
   .form-grid, .source-details-grid, .import-layout, .mailbox-form-grid, .system-hero { grid-template-columns: 1fr; }
@@ -88,6 +90,7 @@
   .topbar-actions { gap: 3px; }
   .stats-grid, .health-grid, .filter-console, .command-panel, .system-counts { grid-template-columns: 1fr; }
   .filter-console .grow { grid-column: auto; }
+  [data-demo-read-only="true"] button[data-demo-disabled="true"] { display: none; }
   .stat-card { min-height: 105px; }
   .job-card-main, .result-body, .panel, .tonal-panel, .health-card, .form-panel, .form-section, .detail-section { padding: 16px; }
   .job-card-head, .result-heading { align-items: flex-start; flex-direction: column; }