/* Public synthetic demos: common typography, header, controls and notices.
   Product fields, simulations and scanner instruments remain native. */
html[data-flowstack-page-framework][data-flowstack-demo] body[data-flowstack-interface] {
  font: 400 16px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172026;
  background: #f4f7f6;
}
html[data-flowstack-demo] body[data-flowstack-interface] > main:is(.demo-shell, .demo-preview-shell) {
  box-sizing: border-box; width: min(100%, 1480px); max-width: 1480px;
  margin: 0 auto; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0;
}
html[data-flowstack-demo] body[data-flowstack-interface] > main > * { min-width: 0; }
html[data-flowstack-demo] body[data-flowstack-interface] .pricing-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px; margin: 0; border: 1px solid #d7e0e3;
  border-radius: 8px; background: #fff; min-width: 0;
}
html[data-flowstack-demo] body[data-flowstack-interface] .pricing-nav .auth-brand {
  display: flex; align-items: center; gap: 12px; margin: 0; text-decoration: none;
  color: #12343b; font: 800 20px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
}
html[data-flowstack-demo] body[data-flowstack-interface] .pricing-nav .auth-brand img {
  width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; margin: 0;
}
html[data-flowstack-demo] body[data-flowstack-interface] .auth-brand :is(p, .auth-brand-name) {
  display: block; margin: 0; color: #12343b; font: inherit;
}
html[data-flowstack-demo] body[data-flowstack-interface] .auth-brand :is(div > span, .auth-brand-subtitle) {
  display: block; color: #60707a; font: 800 12px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
}
html[data-flowstack-demo] body[data-flowstack-interface] .pricing-nav-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
html[data-flowstack-demo] body[data-flowstack-interface] :is(.demo-hero, .demo-header, .pricing-header, .page-header) {
  padding: 20px; margin: 0; border: 1px solid #d7e0e3; border-left: 4px solid #0f766e;
  border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(15,32,39,.08);
}
html[data-flowstack-demo] body[data-flowstack-interface] :is(.demo-hero, .demo-header, .pricing-header, .page-header) h1 {
  margin: 0; font: 900 28px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  color: #0b1418; letter-spacing: 0; overflow-wrap: anywhere;
}
html[data-flowstack-demo] body[data-flowstack-interface] .page-lede {
  margin: 8px 0 0; color: #60707a; font-size: 15px; font-weight: 400; line-height: 21px;
}
html[data-flowstack-demo] body[data-flowstack-interface] :is(button, input, select, textarea, .button, .primary-action, .secondary-action) {
  font-family: inherit; box-sizing: border-box; max-width: 100%;
}
html[data-flowstack-demo] body[data-flowstack-interface] :is(button, .button, .primary-action, .secondary-action) {
  min-height: 44px; font-size: 14px; font-weight: 800; line-height: 1.4;
  border-radius: 8px; text-transform: none; letter-spacing: 0;
}
html[data-flowstack-demo] body[data-flowstack-interface] :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  font-size: 16px; line-height: 1.45; min-height: 44px;
}
html[data-flowstack-demo] body[data-flowstack-interface] :is(.page-message, #demoPreviewMessage) {
  margin: 0; padding: 12px 14px; border: 1px solid #bfdad7; border-radius: 8px;
  background: #edf7f6; color: #172026; font-size: 16px; line-height: 1.45;
}
html[data-flowstack-demo] body[data-flowstack-interface] [hidden] { display: none; }
/* Match the current Ticketing detail: fields and Activity Log share one action. */
html[data-flowstack-demo] body[data-flowstack-interface] #ticketDetailPanel .ticket-detail-wrapper {
  height: auto; min-height: 0; align-items: stretch;
}
html[data-flowstack-demo] body[data-flowstack-interface] #ticketDetailPanel :is(.ticket-sidebar, .ticket-thread, .comments-thread) {
  height: auto; min-height: 0; max-height: none;
}
html[data-flowstack-demo] body[data-flowstack-interface] #ticketDetailPanel .comments-scrollable {
  flex: 0 1 auto; max-height: 420px; overflow-y: auto;
}
html[data-flowstack-demo] body[data-flowstack-interface] .work-item-panel-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px; border-top: 1px solid #d7e0e3;
}
html[data-flowstack-demo] body[data-flowstack-interface] .work-item-panel-actions p {
  margin: 0; font-size: 14px; color: #60707a;
}
html[data-flowstack-demo] body[data-flowstack-interface] .work-item-panel-actions button {
  width: auto; padding: 10px 16px; color: #fff; background: #12343b; border: 1px solid #12343b;
}
html[data-flowstack-demo] body[data-flowstack-interface] :is(.demo-peer-posts, .demo-main-stack, .demo-record-column) { min-width: 0; }
html[data-flowstack-demo] body[data-flowstack-interface] :is(.post-body, .reply-body, .comment-text) {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.45;
}
@media (max-width: 980px) {
  html[data-flowstack-demo] body[data-flowstack-interface] > main:is(.demo-shell, .demo-preview-shell) { padding: 14px; gap: 14px; }
  html[data-flowstack-demo] body[data-flowstack-interface] :is(.demo-hero, .demo-header, .pricing-header, .page-header) { padding: 16px; }
  html[data-flowstack-demo] body[data-flowstack-interface] :is(.demo-hero, .demo-header, .pricing-header, .page-header) h1 { font-size: 24px; }
}
@media (max-width: 600px) {
  html[data-flowstack-demo] body[data-flowstack-interface] .pricing-nav { padding: 14px; }
  html[data-flowstack-demo] body[data-flowstack-interface] .pricing-nav-actions { width: 100%; }
  html[data-flowstack-demo] body[data-flowstack-interface] .work-item-panel-actions button { width: 100%; }
}