/* Dashboard module design system
 * Established on Shawts and adopted by the remaining modules sequentially.
 */
:root {
  --ds-space-1: 8px;
  --ds-space-2: 16px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-space-6: 48px;
  --ds-space-8: 64px;
  --ds-space-12: 96px;
  --ds-text-caption: 12px;
  --ds-text-ui: 14px;
  --ds-text-body: 16px;
  --ds-text-card-title: 20px;
  --ds-text-metric: 36px;
  --ds-radius-control: 12px;
  --ds-radius-card: 16px;
  --ds-radius-stage: 20px;
  --ds-border: #d7e3db;
  --ds-text: #092f24;
  --ds-text-muted: #526c61;
  --ds-surface: #fff;
  --ds-surface-subtle: #f4f8f5;
  --ds-focus: #ffbf47;
}

/* Shawts: normalized typography and an explicit 12px minimum. */
.shawts-page :is(
  .sx-eyebrow, .sx-hero-proof span, .sx-hero-proof i,
  .sx-module-rail a, .sx-module-rail span, .sx-module-rail b,
  .sx-proof span, .sx-channel-list button span,
  .sx-step-tabs span, .sx-step-tabs b, .sx-workstage-copy > span,
  .sx-mini-bar b, .sx-stage-stamp, .sx-stage-footer > a,
  .sx-stage-progress, .sx-target-top, .sx-target-options button > span,
  .sx-target-options button > b, .sx-target-options small,
  .sx-target-footer > span, .sx-avatar-stack i, .sx-avatar-stack b,
  .sx-metric-stack button > span, .sx-metric-stack button > small,
  .sx-metric-stack > article p, .sx-report-image > div span,
  .sx-report-image > div a, .sx-use-index span, .sx-use-copy p,
  .sx-objection-grid article > span
) {
  font-size: var(--ds-text-caption) !important;
  font-weight: 600;
  line-height: 1.4;
}

.shawts-page :is(
  .announcement span,
  .sx-hero-sticker,
  .sx-browser-bar span,
  .sx-browser-bar b,
  .sx-float,
  .sx-channel-result > span,
  .sx-channel-result > div small,
  .shawts-capabilities-clone .eyebrow,
  .shawts-capabilities-clone small,
  .shawts-capabilities-clone em,
  .shawts-capabilities-clone footer,
  .shawts-capabilities-clone button span,
  .shawts-capabilities-clone article span,
  .shawts-capabilities-clone article b,
  .shawts-capabilities-clone .capability-note > span,
  .shawts-capabilities-clone .capability-endpoints > b,
  .ai-journey-eyebrow,
  .ai-journey-console > nav button span,
  .ai-journey-console > nav button b,
  .ai-journey-stage aside small,
  .ai-step-count span,
  .ai-journey-stage figure > header b,
  .ai-journey-stage figcaption span,
  .ai-journey-trust > b,
  .sx-footer span,
  .sx-footer small
) {
  font-size: var(--ds-text-caption) !important;
  line-height: 1.4;
}

.shawts-page :is(
  .sx-use-tabs-label,
  .sx-use-tabs button small,
  .sx-use-panel-bar span,
  .sx-use-panel-bar b,
  .sx-use-panel-copy > span,
  .sx-use-route > div > span,
  .sx-use-route small,
  .sx-use-receipt header span,
  .sx-use-receipt header b,
  .sx-use-receipt > div > span > b,
  .sx-use-receipt > div > span > small,
  .sx-use-receipt > div > span > em
) {
  font-size: var(--ds-text-caption) !important;
  line-height: 1.4;
}

.shawts-page .sx-hero-copy h1 {
  font-size: clamp(42px, 4vw, 52px) !important;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.shawts-page :is(
  .sx-section-head h2, .sx-target-copy h2, .sx-use-head h2,
  .sx-faq h2, .sx-closing h2, .sx-objections h2,
  .story-capabilities .story-block-head h2
) {
  font-size: clamp(32px, 3.2vw, 40px) !important;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.shawts-page :is(
  .sx-hero-copy > p, .sx-section-head > p, .sx-target-copy > p,
  .sx-workstage-copy p, .sx-use-copy p, .sx-objection-grid p,
  .sx-faq-list article > div p, .sx-closing p,
  .capability-copy p, .capability-note p
) {
  font-size: var(--ds-text-body) !important;
  font-weight: 400;
  line-height: 1.6;
}

.shawts-page :is(
  .sx-channel-list button b, .sx-target-options button > b,
  .sx-faq-list button, .capability-flow-nav button b
) {
  font-size: var(--ds-text-ui) !important;
  font-weight: 500;
}

.shawts-page :is(.sx-workstage-copy h3, .sx-use-copy h3, .sx-objection-grid h3) {
  font-weight: 600;
}

/* Shawts: consistent 8pt rhythm and calmer enterprise surfaces. */
.shawts-page :is(.sx-problem, .sx-flow, .sx-targeting, .sx-measure, .sx-uses, .sx-faq, .sx-closing, .sx-objections) {
  padding-block: var(--ds-space-12);
}

.shawts-page :is(.sx-section-head, .sx-target-grid, .sx-faq-grid) {
  gap: var(--ds-space-4);
}

.shawts-page :is(.sx-proof > .sx-shell, .sx-measure-grid) {
  gap: var(--ds-space-2);
}

.shawts-page :is(.sx-proof article, .sx-target-console, .sx-report-stage, .sx-objection-grid article) {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
}

.shawts-page .sx-proof article {
  min-height: 120px;
  padding: var(--ds-space-3);
}

.shawts-page .sx-proof strong {
  font-size: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.shawts-page :is(.sx-step-tabs button, .sx-target-options button, .sx-metric-stack button) {
  min-height: 48px;
  border-radius: var(--ds-radius-control);
}

.shawts-page :is(.sx-proof article, .sx-use-grid article):hover,
.shawts-page :is(.sx-proof article, .sx-use-grid article):focus,
.shawts-page :is(.sx-step-tabs button, .sx-target-options button, .sx-metric-stack button, .sx-channel-list button):hover {
  transform: none;
}

.shawts-page :is(
  .sx-step-tabs button[aria-selected="true"],
  .sx-metric-stack button[aria-selected="true"],
  .sx-channel-list button[aria-selected="true"],
  .sx-target-options button[aria-pressed="true"]
) {
  border-color: var(--sx-green);
  box-shadow: inset 0 0 0 2px var(--sx-green);
}

/* Named engagement evidence replaces unreadable screenshot-only reporting. */
.sx-report-stage {
  min-width: 0;
  padding: var(--ds-space-2);
  background: var(--ds-surface-subtle);
}

.sx-report-stage .ds-data-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.ds-data-panel__header {
  min-height: 64px;
  padding: var(--ds-space-2) var(--ds-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  border-bottom: 1px solid var(--ds-border);
}

.ds-data-panel__header span {
  font-size: var(--ds-text-caption);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ds-data-panel__header strong {
  font-family: "Space Grotesk", "DM Sans", sans-serif;
  font-size: var(--ds-text-metric);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ds-data-table-wrap { overflow-x: auto; }

.ds-data-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-text-ui);
}

.ds-data-panel th {
  padding: 12px var(--ds-space-2);
  background: var(--ds-surface-subtle);
  color: var(--ds-text-muted);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
}

.ds-data-panel td {
  padding: var(--ds-space-2);
  border-top: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-weight: 400;
  line-height: 1.45;
}

.ds-data-panel :is(th, td).numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.ds-data-panel__evidence {
  margin-top: auto;
  padding: var(--ds-space-2) var(--ds-space-3);
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-2);
  border-top: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-caption);
}

.ds-data-panel__evidence a {
  color: var(--sx-deep);
  font-weight: 600;
}

@media (max-width: 680px) {
  .shawts-page .sx-hero-copy h1 { font-size: 34px !important; }

  .shawts-page :is(
    .sx-section-head h2, .sx-target-copy h2, .sx-use-head h2,
    .sx-faq h2, .sx-closing h2, .sx-objections h2,
    .story-capabilities .story-block-head h2
  ) { font-size: 30px !important; }

  .shawts-page :is(.sx-problem, .sx-flow, .sx-targeting, .sx-measure, .sx-uses, .sx-faq, .sx-closing, .sx-objections) {
    padding-block: var(--ds-space-8);
  }

  .shawts-page .sx-step-tabs {
    grid-auto-columns: minmax(168px, 72vw);
    gap: var(--ds-space-1);
    padding: var(--ds-space-1);
    scrollbar-width: thin;
    scroll-snap-type: inline mandatory;
  }

  .shawts-page .sx-step-tabs button { scroll-snap-align: start; }
  .shawts-page .sx-module-rail > .sx-shell { scrollbar-width: thin; }

  .ds-data-panel__header {
    align-items: flex-start;
    padding: var(--ds-space-2);
  }

  .ds-data-panel__header strong { font-size: 32px; }
  .ds-data-panel th, .ds-data-panel td { padding: 12px; }

  .ds-data-panel__evidence {
    padding: var(--ds-space-2);
    flex-direction: column;
  }
}

/* Moderation module: readable, stateful queue and stable workflow controls */
.story-design-moderation {
  --moderation-accent: #08a657;
  --moderation-danger: #b42318;
  --moderation-warning: #b54708;
  --moderation-success: #087443;
}

.story-design-moderation :is(.product-story-hero h1) {
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.08;
  font-weight: 600;
}

.story-design-moderation :is(.story-block-head h2) {
  font-size: clamp(30px, 3.2vw, 40px) !important;
  line-height: 1.12;
  font-weight: 600;
}

.story-design-moderation :is(.story-block-intro, .story-card-grid p, .moderation-step-panels p, .queue-copy, .story-faq dd) {
  font-size: 17px !important;
  line-height: 1.6;
}

.story-design-moderation :is(.story-card-grid article, .moderation-step-stage, .moderation-workspace, .queue-proof-card) {
  border-radius: 16px;
  border: 1px solid var(--ds-border-subtle);
  padding: 24px;
}

.story-design-moderation .moderation-steps nav { gap: 16px; }
.story-design-moderation .moderation-steps nav button {
  min-height: 88px;
  padding: 16px;
  border-radius: 12px;
  transform: none !important;
}
.story-design-moderation .moderation-steps nav button[aria-selected="true"],
.story-design-moderation .moderation-steps nav button[aria-pressed="true"] {
  border-color: var(--moderation-accent);
  box-shadow: inset 0 0 0 2px var(--moderation-accent);
}
.story-design-moderation :is(.moderation-filter-bar button, .queue-filter-bar button) {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}
.story-design-moderation .moderation-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.story-design-moderation .moderation-status--warning { color: var(--moderation-warning); background: #fff4e5; }
.story-design-moderation .moderation-status--success { color: var(--moderation-success); background: #e8f7ef; }
.story-design-moderation .moderation-status--danger { color: var(--moderation-danger); background: #fdecec; }
.story-design-moderation .moderation-danger-action { color: var(--moderation-danger); }
.story-design-moderation :is(.story-card-top > span, .story-card-grid article > span, .story-hero-proof i) {
  font-size: 14px !important;
}
.story-design-moderation :is(.story-screen-live, .screen-signal, .story-hero-sticker, .eyebrow) {
  font-size: 14px !important;
}
.story-design-moderation :is(span, b, small, em, strong, label) {
  font-size: 14px !important;
}
.story-design-moderation :is(h1 span, h1 em, h2 span, h2 em, h3 span, h3 em, .button span) {
  font-size: inherit !important;
}
.story-design-moderation :is(button, a.button, input, select) {
  font-size: 16px !important;
}

.ps-motion-ready .story-design-moderation :is(.product-story-block, .story-objections, .story-faq, .story-closing),
.story-design-moderation.ps-motion-ready :is(.product-story-block, .story-objections, .story-faq, .story-closing) {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 680px) {
  .story-design-moderation .moderation-steps nav { grid-template-columns: 1fr; }
  .story-design-moderation :is(.story-card-grid article, .moderation-step-stage, .moderation-workspace, .queue-proof-card) { padding: 16px; }
}


/* Organization module: apply the Shawts system without changing its content model. */
.story-design-structure :is(.story-block-head h2, .story-matrix-head, .organization-builder > nav button > small, .org-reference > div, .org-reference > div > b, .org-builder-panels header > span, .org-root-card > small, .org-root-card em, .org-tree-view span, .org-groups-view > div small, .org-import-view > nav button, .import-drop > span, .import-drop > em, .adoption-stats small, .adoption-row small, .adoption-row > em, .adoption-row > button, .directory-browser, .directory-browser > b, .directory-hotspot, .directory-controls > nav small, .directory-drawer > article > small, .directory-drawer article > header em, .directory-drawer article > header strong, .member-actions button, .rollout-meter span, .directory-drawer > article > button, .engagement-bars > span) {
  font-size: var(--ds-text-caption) !important;
  line-height: 1.45;
}

.story-design-structure :is(.story-block-intro, .story-matrix button p, .org-builder-panels header p, .org-root-card p, .directory-drawer > article > p) {
  font-size: var(--ds-text-body) !important;
  line-height: 1.6;
}

/* No operational label in Organization may fall below the system floor. */
.story-design-structure :is(span, b, small, em) {
  font-size: max(var(--ds-text-caption), 1em) !important;
}

.story-design-structure :is(.organization-builder > nav button, .directory-controls > nav button) {
  min-height: 88px;
  padding: var(--ds-space-2);
  border-radius: var(--ds-radius-control);
  transform: none;
}

.story-design-structure :is(.organization-builder > nav button:hover, .organization-builder > nav button.active, .story-matrix button:hover, .story-matrix button.active) {
  transform: none;
}

.story-design-structure :is(.story-matrix, .organization-builder-workspace, .directory-screen, .directory-drawer) {
  border-radius: var(--ds-radius-card);
}

/* Full-page capture and keyboard navigation must never depend on scroll position. */
.ps-motion-ready .story-design-structure :is(.product-story-block, .story-objections, .story-faq, .story-closing),
.story-design-structure.ps-motion-ready :is(.product-story-block, .story-objections, .story-faq, .story-closing) {
  opacity: 1;
  transform: none;
}

.story-design-structure .member-actions button:last-child {
  border-color: #e4b4a9;
  background: #fff5f2;
  color: #a94732;
}

@media (max-width: 680px) {
  .story-design-structure .organization-builder > nav,
  .story-design-structure .directory-controls > nav {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .story-design-structure .organization-builder > nav button,
  .story-design-structure .directory-controls > nav button {
    min-height: 72px;
  }
}