/* FiniteFlow SPA (flow-spec §5). Dark-theme polish is v1.0; v0.1 uses the
   shared shell theme with the violet Flow accent (#8b5cf6). */
:root { --flw: #8b5cf6; --flw-soft: #efe9fe; }

.flw-app { min-height: 100%; }
.flw-boot { padding: 40px; color: var(--fo-muted); }

.flw-top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; background: var(--fo-surface);
  border-bottom: 1px solid var(--fo-line);
}
.flw-top .fo-logo { background: var(--flw); }
.flw-nav { display: flex; gap: 4px; margin-left: 10px; }
.flw-nav a {
  padding: 6px 12px; border-radius: 6px; color: var(--fo-ink);
  text-decoration: none; font-weight: 500;
}
.flw-nav a:hover { background: rgba(0,0,0,.05); }
.flw-nav a.active { background: var(--flw-soft); color: var(--flw); }
.flw-top .spacer { flex: 1; }

.flw-main { max-width: 1000px; margin: 0 auto; padding: 22px 18px 80px; }
.flw-h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.flw-sub { color: var(--fo-muted); margin: 0 0 18px; }

.flw-card {
  background: var(--fo-surface); border: 1px solid var(--fo-line);
  border-radius: var(--fo-radius); box-shadow: var(--fo-shadow);
  padding: 14px 16px; margin-bottom: 10px;
}
.flw-row { display: flex; align-items: center; gap: 12px; }
.flw-row .grow { flex: 1; min-width: 0; }
.flw-name { font-weight: 600; }
.flw-meta { color: var(--fo-muted); font-size: 12.5px; }

.flw-badge {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--fo-line); color: var(--fo-ink); white-space: nowrap;
}
.flw-badge.on { background: #e6f6ec; color: #1a8f4c; }
.flw-badge.off { background: #f1f2f4; color: #6b7280; }
.flw-badge.success { background: #e6f6ec; color: #1a8f4c; }
.flw-badge.failed { background: #fdecea; color: #d0402b; }
.flw-badge.queued { background: #eef1fb; color: #2f6fed; }
.flw-badge.running { background: #fff4e5; color: #b7472a; }
.flw-badge.skipped { background: #f1f2f4; color: #6b7280; }

.flw-empty { padding: 40px; text-align: center; color: var(--fo-muted); }

table.flw-runs { width: 100%; border-collapse: collapse; }
table.flw-runs th, table.flw-runs td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--fo-line);
  font-size: 13px;
}
table.flw-runs th { color: var(--fo-muted); font-weight: 600; font-size: 12px; }
table.flw-runs tr.click { cursor: pointer; }
table.flw-runs tr.click:hover { background: rgba(0,0,0,.03); }

.flw-step {
  border: 1px solid var(--fo-line); border-radius: 8px; margin: 8px 0;
  overflow: hidden;
}
.flw-step-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  cursor: pointer; background: #fafbfc;
}
.flw-step-head:hover { background: #f2f4f6; }
.flw-step-idx {
  width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; background: var(--flw-soft); color: var(--flw);
  font-size: 12px; font-weight: 700;
}
.flw-io { padding: 10px 12px; border-top: 1px solid var(--fo-line); }
.flw-io h4 { margin: 6px 0 4px; font-size: 12px; color: var(--fo-muted); }
.flw-io pre {
  margin: 0 0 6px; background: #0f1117; color: #d6dae2; padding: 10px;
  border-radius: 6px; overflow-x: auto; font-size: 12px;
  font-family: "Cascadia Code", Consolas, monospace;
}
.flw-back { display: inline-block; margin-bottom: 12px; color: var(--flw);
  text-decoration: none; font-weight: 500; }
.flw-err { color: var(--fo-danger); font-size: 12.5px; }
code.flw-code { background: var(--flw-soft); color: var(--flw);
  padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* ---- v0.2 builder --------------------------------------------------------- */
.flw-btn {
  border: 1px solid var(--flw); background: var(--flw); color: #fff;
  border-radius: 7px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.flw-btn:hover { filter: brightness(1.05); }
.flw-btn.ghost { background: transparent; color: var(--flw);
  border-color: var(--fo-line); }
.flw-btn.ghost:hover { background: var(--flw-soft); border-color: var(--flw); }
.flw-btn.xs { padding: 3px 8px; font-size: 12px; }
.flw-btn:disabled { opacity: .4; cursor: default; }
.flw-actions { display: flex; gap: 4px; }

.flw-input {
  width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 13px;
  border: 1px solid var(--fo-line); border-radius: 6px; background: var(--fo-bg);
  color: var(--fo-ink); font-family: inherit;
}
.flw-input.xs { width: auto; padding: 4px 7px; }
.flw-input:focus { outline: 2px solid var(--flw-soft); border-color: var(--flw); }
.flw-ta {
  width: 100%; box-sizing: border-box; padding: 8px; font-size: 12px;
  border: 1px solid var(--fo-line); border-radius: 6px; background: var(--fo-bg);
  color: var(--fo-ink); font-family: "Cascadia Code", Consolas, monospace;
  resize: vertical;
}
.flw-ta.bad { border-color: var(--fo-danger); }
.flw-field { display: block; margin: 8px 0; }
.flw-field > span { display: block; font-size: 12px; color: var(--fo-muted);
  margin-bottom: 3px; font-weight: 600; }

.flw-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px;
  align-items: start; }
.flw-col-side { position: sticky; top: 12px; }
@media (max-width: 820px) { .flw-grid { grid-template-columns: 1fr; }
  .flw-col-side { position: static; } }

.flw-seclabel { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--fo-muted); margin: 16px 0 6px; }
.flw-matchrow { gap: 6px; margin-bottom: 6px; }
.flw-comp { padding: 0; overflow: hidden; }
.flw-comp-head { padding: 8px 12px; background: #fafbfc;
  border-bottom: 1px solid var(--fo-line); gap: 8px; }
.flw-comp-idx {
  width: 20px; height: 20px; border-radius: 50%; display: grid;
  place-items: center; background: var(--flw-soft); color: var(--flw);
  font-size: 11px; font-weight: 700; flex: none;
}
.flw-comp-body { padding: 10px 12px; }

.flw-branch { border-left: 3px solid var(--flw-soft); padding: 6px 0 6px 10px;
  margin: 8px 0; }
.flw-branch-tag { font-size: 11px; font-weight: 700; color: var(--flw);
  background: var(--flw-soft); padding: 2px 8px; border-radius: 4px; }
.flw-condrow { gap: 6px; margin: 5px 0; }
.flw-then { font-size: 11px; font-weight: 700; color: var(--fo-muted);
  margin: 8px 0 4px; letter-spacing: .04em; }
.flw-nested { padding-left: 4px; }
.flw-adder { display: flex; gap: 6px; margin: 8px 0; align-items: center; }
.flw-adder.inline { margin: 6px 0; }
.flw-adder .flw-input { flex: 1; }

.flw-cheat { font-size: 12.5px; }
.flw-cheatlist { list-style: none; padding: 0; margin: 6px 0; }
.flw-cheatlist li { margin: 4px 0; }
.flw-ok { color: #1a8f4c; font-size: 12.5px; }
.flw-warn { color: #b7472a; font-size: 12.5px; }
.flw-badge.partial { background: #fff4e5; color: #b7472a; }
.flw-badge.manual, .flw-badge.replay, .flw-badge.retry { background: #eef1fb; color: #2f6fed; }
/* v0.5 reliability & governance badges + run actions */
.flw-badge.throttled { background: #fff4e5; color: #b7472a; }
.flw-badge.cancelled { background: #f1f2f4; color: #6b7280; }
.flw-badge.retried { background: #fdf3e0; color: #a15c00; }
.flw-run-actions { display: flex; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.flw-btn.small { padding: 3px 10px; font-size: 12px; margin: 4px 0 8px; }

/* v0.6 observability & gallery */
.flw-badge.waiting { background: #eef1fb; color: #2f6fed; }
.flw-badge.schedule, .flw-badge.webhook, .flw-badge.event { background: #eef1fb; color: #2f6fed; }

/* template gallery */
.flw-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin-bottom: 6px; }
.flw-tpl { display: flex; flex-direction: column; }
.flw-tpl .flw-name { font-size: 14px; }

/* SSE live run tail */
.flw-tail { background: var(--flw-soft); }
.flw-tail-log { margin-top: 8px; max-height: 320px; overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.flw-tail-line { display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  border-bottom: 1px solid rgba(0,0,0,.06); }
.flw-tail-line:last-child { border-bottom: 0; }
.flw-tail-idx { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px;
  align-items: center; justify-content: center; border-radius: 4px;
  background: var(--flw); color: #fff; font-size: 11px; font-weight: 700; }
.flw-tail-err { color: #d0402b; }
.flw-tail-line.s-run, .flw-tail-line.s-done { opacity: .85; }

/* ---- v1.0 keyboard-first + search (flow-spec §5) -------------------------- */
.flw-search { width: 240px; max-width: 46vw; padding: 6px 10px; }
.flw-kbd-hint { display: block; margin-top: 6px; font-size: 11.5px;
  color: var(--fo-muted); }
kbd { display: inline-block; min-width: 12px; padding: 1px 6px; font-size: 11px;
  font-family: "Cascadia Code", Consolas, monospace; line-height: 1.5;
  color: var(--fo-ink); background: var(--fo-bg); border: 1px solid var(--fo-line);
  border-bottom-width: 2px; border-radius: 4px; }
.flw-rule-card { outline: none; }
.flw-rule-card:focus-visible { border-color: var(--flw);
  box-shadow: 0 0 0 2px var(--flw-soft); }

/* Shortcuts help overlay */
.flw-help-overlay { position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 12, 24, .55); display: grid; place-items: center; }
.flw-help-card { width: min(420px, 92vw); background: var(--fo-surface);
  border: 1px solid var(--fo-line); border-radius: var(--fo-radius);
  box-shadow: var(--fo-shadow); padding: 18px 20px; }
.flw-help-head { font-weight: 700; font-size: 15px; margin-bottom: 12px;
  color: var(--fo-ink); }
.flw-help-row { display: flex; align-items: center; gap: 12px; padding: 5px 0;
  font-size: 13px; color: var(--fo-ink); }
.flw-help-row kbd { min-width: 44px; text-align: center; }
.flw-help-foot { margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--fo-line); font-size: 11.5px; color: var(--fo-muted); }

/* ---- narrow-viewport polish (v1.0) --------------------------------------- */
/* Flow is a desktop-first admin surface (spec §7 defers mobile to a native
   monitor app), but the shell should degrade gracefully rather than push the
   page wider than the screen: the top nav scrolls, and the rules toolbar wraps
   so search + actions stack instead of overflowing. */
@media (max-width: 640px) {
  .flw-top { flex-wrap: wrap; row-gap: 6px; }
  .flw-nav { margin-left: 0; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; }
  .flw-nav a { white-space: nowrap; }
  .flw-main .flw-row { flex-wrap: wrap; }
  .flw-search { width: 100%; max-width: 100%; order: 3; }
}