/* General page presentation. Native layout, data, roles and state remain local. */
html[data-flowstack-page-framework] {
  --fsp-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fsp-text: #172026;
  --fsp-heading: #0b1418;
  --fsp-muted: #60707a;
  --fsp-border: #d7e0e3;
  --fsp-accent: #0f766e;
  --fsp-space: 18px;
  --fsp-panel-padding: 20px;
  --fsp-radius: 8px;
}
html[data-flowstack-page-framework] body[data-flowstack-interface] {
  font-family: var(--fsp-font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--fsp-text);
}
/* A font-only rule keeps native button variants, table density and diagnostic
   target sizes. Code/preformatted text and instrument displays remain native. */
html[data-flowstack-page-framework] body[data-flowstack-interface] :is(button, input, select, textarea) {
  font-family: var(--fsp-font);
}
html[data-flowstack-page-framework] body[data-flowstack-interface] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--fsp-accent);
  outline-offset: 2px;
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-shell.platform-shell {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin-inline: auto;
  padding: 24px;
  gap: 24px;
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .platform-main {
  min-width: 0;
  align-content: start;
  gap: var(--fsp-space);
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-header {
  min-width: 0;
  margin: 0;
  padding: var(--fsp-panel-padding);
  border: 1px solid var(--fsp-border);
  border-left: 4px solid var(--fsp-accent);
  border-radius: var(--fsp-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 32, 39, .08);
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-header h1 {
  margin: 0;
  color: var(--fsp-heading);
  font-family: var(--fsp-font);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-header .page-lede,
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-header > p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--fsp-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .content-card {
  min-width: 0;
  padding: var(--fsp-panel-padding);
  border: 1px solid var(--fsp-border);
  border-radius: var(--fsp-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 32, 39, .08);
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] :is(.content-card > h2, .section-heading-row h2, .flowstack-section-title) {
  margin: 0;
  color: var(--fsp-heading);
  font-family: var(--fsp-font);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}
html[data-flowstack-page-framework] body[data-flowstack-interface] :is(.eyebrow, .field-label) {
  font-family: var(--fsp-font);
}
html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .sidebar-footer {
  font-family: var(--fsp-font);
  color: var(--fsp-muted);
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 980px) {
  html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-shell.platform-shell {
    padding: 14px;
    gap: 14px;
  }
  html[data-flowstack-page-framework] { --fsp-panel-padding: 16px; }
  html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-header h1 { font-size: 24px; }
  /* Readable phone fields avoid automatic browser zoom, including compact
     member filters. Native diagnostic targets and checkbox/radio geometry stay. */
  html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] :is(.platform-main, .auth-card) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), select, textarea) { font-size: 16px; }
}
@media print {
  html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] .page-shell.platform-shell { width: 100%; max-width: none; padding: 0; }
  html[data-flowstack-page-framework] body[data-flowstack-shell][data-flowstack-interface] :is(.page-header, .content-card) { box-shadow: none; }
}