/* =========================================================================
   Workflow tool — styles needed to embed it inside the landing page.
   Extracted from the original workflow/Workflows.html <style> block, MINUS the
   global `html,body,#root` / `body` rules (the landing owns those). Core color
   tokens match colors_and_type.css; the extras (--r-*, --sans, --serif,
   --shadow-*) are additive. Dark mode is handled by colors_and_type.css's
   higher-specificity :root[data-theme="dark"], so these light values only apply
   in light mode.
   ========================================================================= */

:root {
  --surface-high: #FDFCFA;
  --warning: #D97706;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-x2l: 12px; --r-pill: 16px;
  --sans: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --serif: "Georgia", "Songti SC", "Noto Serif SC", serif;
  --shadow-card: 0 3px 10px rgba(44, 36, 24, .08);
  --shadow-pop: 0 12px 40px rgba(44, 36, 24, .16);
}

/* Dark equivalents for the two workflow-only color tokens that
   colors_and_type.css doesn't carry (it has --surface-container-high /
   --warning-text instead). Matches that file's dark palette. */
:root[data-theme="dark"] {
  --surface-high: #352F28;
  --warning: #F6AD55;
}

/* Mask-based monochrome icon used by the workflow components. */
.ic { display: inline-block; flex: 0 0 auto; background-color: currentColor; }

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(196, 149, 106, .45); }
  70%  { box-shadow: 0 0 0 8px rgba(196, 149, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 149, 106, 0); }
}
@keyframes flow-dash { to { stroke-dashoffset: -16; } }
@keyframes bar-slide { 0% { transform: translateX(-60%); } 100% { transform: translateX(160%); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in .18s ease-out; }