收斂觀測台手機字體與視覺契約

web/static/css/observability-system.css

@@ -1761,6 +1761,116 @@
   }
 }
 
+/* v3.7 typography tightening: no legacy tracking, poster-scale numerals, or wrapped action buttons. */
+.momo-observability-mode :is(
+  .obs-kicker,
+  .agent-kicker,
+  .biz-kicker,
+  .runtime-kicker,
+  .calls-kicker,
+  .gov-kicker,
+  .gate-kicker,
+  .rag-kicker,
+  .qa-kicker,
+  .quality-kicker,
+  .ppt-kicker,
+  [class$="-label"],
+  .obs-signal-label,
+  .obs-section-eyebrow,
+  .obs-route-code
+) {
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+}
+
+.momo-observability-mode .biz-signal .value {
+  color: var(--obs-ink) !important;
+  font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
+  font-size: var(--obs-value-size) !important;
+  font-weight: 800 !important;
+  letter-spacing: 0 !important;
+  line-height: 1.1 !important;
+}
+
+.momo-observability-mode :is(.biz-signal .label, .biz-signal .note, .biz-filter-card label) {
+  color: var(--obs-muted) !important;
+  font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif) !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+}
+
+.momo-observability-mode .biz-filter-card .btn {
+  min-width: 4.5rem;
+  white-space: nowrap;
+}
+
+@media (max-width: 560px) {
+  .momo-observability-mode {
+    --obs-title-size: 1.38rem;
+    --obs-value-size: 1.12rem;
+  }
+
+  .momo-observability-mode :is(
+    .obs-title,
+    .agent-title,
+    .biz-title,
+    .runtime-title,
+    .calls-title,
+    .gov-title,
+    .gate-title,
+    .rag-title,
+    .qa-title,
+    .quality-title,
+    .ppt-title
+  ) {
+    margin-top: 0.55rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+
+  .momo-observability-mode :is(
+    .obs-kicker,
+    .agent-kicker,
+    .biz-kicker,
+    .runtime-kicker,
+    .calls-kicker,
+    .gov-kicker,
+    .gate-kicker,
+    .rag-kicker,
+    .qa-kicker,
+    .quality-kicker,
+    .ppt-kicker
+  ) {
+    font-size: 0.74rem !important;
+    line-height: 1.25 !important;
+    padding: 0.24rem 0.42rem !important;
+  }
+
+  .momo-observability-mode .biz-signal .value {
+    font-size: 1.12rem !important;
+  }
+
+  .momo-observability-mode .biz-meta-row {
+    gap: 0.42rem !important;
+    margin-top: 0.7rem !important;
+  }
+
+  .momo-observability-mode :is(.biz-meta-pill, .biz-badge, .badge, .obs-pill, [class$="-pill"]) {
+    font-size: 0.76rem !important;
+    min-height: 1.55rem;
+    padding: 0.22rem 0.42rem !important;
+  }
+
+  .momo-observability-mode .biz-filter-card .d-flex {
+    align-items: stretch;
+  }
+
+  .momo-observability-mode .biz-filter-card .btn {
+    min-width: 4rem;
+    padding-left: 0.65rem !important;
+    padding-right: 0.65rem !important;
+  }
+}
+
 /* v3.3 observability hardening: shared visual system, bounded data surfaces, mobile-safe widths. */
 .momo-observability-mode {
   --obs-title-size: 1.8rem;
@@ -2152,3 +2262,119 @@
 )::after {
   display: none !important;
 }
+
+/* v3.6 mobile density: KPI groups stay readable without consuming the first viewport. */
+@media (max-width: 560px) {
+  .momo-observability-mode :is(
+    .obs-hero,
+    .agent-hero,
+    .biz-command,
+    .runtime-hero,
+    .calls-hero,
+    .gov-hero,
+    .gate-hero,
+    .rag-hero,
+    .qa-hero,
+    .quality-hero,
+    .ppt-hero
+  ) {
+    padding: 0.75rem !important;
+  }
+
+  .momo-observability-mode :is(
+    .obs-lede,
+    .agent-subtitle,
+    .biz-command p,
+    .runtime-subtitle,
+    .calls-subtitle,
+    .gov-subtitle,
+    .gate-subtitle,
+    .rag-subtitle,
+    .qa-subtitle,
+    .quality-subtitle,
+    .ppt-subtitle
+  ) {
+    font-size: 0.88rem !important;
+    line-height: 1.5 !important;
+  }
+
+  .momo-observability-mode :is(
+    .obs-command-strip,
+    .agent-command,
+    .biz-signal-grid,
+    .runtime-command,
+    .calls-command,
+    .gov-command,
+    .gate-command,
+    .rag-command,
+    .qa-command,
+    .quality-command,
+    .ppt-command,
+    [class$="-mini-grid"]
+  ) {
+    gap: 0.5rem !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    margin-top: 0.75rem !important;
+  }
+
+  .momo-observability-mode :is(
+    .obs-signal,
+    .agent-signal,
+    .biz-signal,
+    .runtime-signal,
+    .calls-signal,
+    .gov-signal,
+    .gate-signal,
+    .rag-signal,
+    .qa-signal,
+    .quality-signal,
+    .ppt-signal,
+    .gov-mini,
+    .gate-mini,
+    .runtime-mini,
+    .calls-mini,
+    .quality-mini,
+    .ppt-mini
+  ) {
+    min-height: 0 !important;
+    padding: 0.62rem !important;
+  }
+
+  .momo-observability-mode :is(
+    .obs-signal-value,
+    .obs-value,
+    .agent-value,
+    .biz-value,
+    .runtime-value,
+    .calls-value,
+    .gov-value,
+    .gate-value,
+    .rag-value,
+    .qa-value,
+    .quality-value,
+    .ppt-value,
+    .kpi-value,
+    .gov-mini strong,
+    .gate-mini strong,
+    .runtime-mini strong,
+    .calls-mini strong,
+    .quality-mini strong,
+    .ppt-mini strong
+  ) {
+    font-size: 1.18rem !important;
+    line-height: 1.15 !important;
+  }
+
+  .momo-observability-mode :is(
+    .agent-filter,
+    .calls-filter,
+    .gov-filter,
+    .quality-filter,
+    .qa-filter,
+    .biz-filter-card
+  ) {
+    gap: 0.4rem !important;
+    margin-top: 0.65rem !important;
+    padding: 0.55rem !important;
+  }
+}