/* My workflows: a compact library dialog over the shared .cv-dialog lifecycle.
   Reuses the chat tokens so it follows the light/dark Geist editorial theme. */

.cv-workflows-dialog { width:min(720px, calc(100vw - 28px)); }
.cv-workflows-dialog .cv-panel-title { margin-bottom:8px; }
.cv-workflows-lead { margin:0 0 20px; color:var(--cv-muted); font-size:0.9375rem; line-height:1.6; }

.cv-workflows-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; }
.cv-workflows-toolbar .cv-btn { min-height:40px; }
.cv-workflows-archive-toggle { display:inline-flex; align-items:center; gap:8px; min-height:40px; color:var(--cv-muted); font-size:0.875rem; cursor:pointer; }
/* Custom control; site.css forces colours on dark inputs with !important, so
   match with the .cv-layout specificity + !important (same pattern as .cv-input). */
.cv-layout .cv-workflows-archive-toggle input {
  appearance: none !important; -webkit-appearance: none !important;
  width: 18px; height: 18px; margin: 0; padding: 0;
  border: 1px solid var(--cv-line-strong) !important; border-radius: 5px;
  background: var(--cv-bg) !important;
  cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease;
}
.cv-layout .cv-workflows-archive-toggle input:hover { border-color: var(--cv-ink-strong) !important; }
.cv-layout .cv-workflows-archive-toggle input:checked {
  border-color: var(--cv-accent) !important;
  background: var(--cv-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-6.6'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
}
html[data-theme="dark"] .cv-layout .cv-workflows-archive-toggle input:checked {
  background: var(--cv-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23070b1c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-6.6'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
}
.cv-layout .cv-workflows-archive-toggle input:focus-visible { outline: 2px solid var(--cv-focus); outline-offset: 2px; }
.cv-workflows-refresh { margin-left:auto; }

.cv-workflows-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.cv-workflow-item { padding:18px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-bg); }
.cv-workflow-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; }
.cv-workflow-name { margin:0; font-size:1.0625rem; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.cv-workflow-flags { display:inline-flex; flex-wrap:wrap; gap:8px; }
.cv-workflow-flag { display:inline-block; padding:2px 9px; border:1px solid var(--cv-accent-line, var(--cv-line-strong)); border-radius:999px;
  background:var(--cv-accent-tint); color:var(--cv-accent); font-size:0.6875rem; font-weight:600; letter-spacing:0.02em; white-space:nowrap; }
.cv-workflow-meta { margin:10px 0 0; color:var(--cv-label); font-family:var(--cv-font-mono); font-size:0.6875rem;
  text-transform:uppercase; letter-spacing:0.06em; line-height:1.5; }
.cv-workflow-method { margin:8px 0 0; color:var(--cv-muted); font-size:0.875rem; line-height:1.55; }
.cv-workflow-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.cv-workflow-actions .cv-btn { min-height:40px; padding:0 14px; font-size:0.875rem; }
.cv-workflow-details-btn { margin-left:auto; }
.cv-workflow-history { margin-top:14px; padding-top:14px; border-top:1px solid var(--cv-line); }
.cv-workflow-history .cv-muted { margin:0; }
.cv-workflow-history-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cv-workflow-history-item { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:0.8125rem; line-height:1.5; color:var(--cv-ink); }
.cv-workflow-history-version { font-family:var(--cv-font-mono); font-size:0.6875rem; color:var(--cv-label); text-transform:uppercase; letter-spacing:0.06em; }
.cv-workflow-history-method { color:var(--cv-muted); }

.cv-workflows-empty, .cv-workflows-loading { margin:0; padding:18px 18px; border:1px dashed var(--cv-line); border-radius:var(--cv-r-md);
  color:var(--cv-muted); font-size:0.9375rem; line-height:1.55; }
.cv-workflows-error { margin:0 0 12px; color:var(--cv-danger); font-size:0.9375rem; line-height:1.5; }
.cv-workflows-error .cv-btn { margin-top:8px; }

.cv-workflow-name-input { width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--cv-line-strong); border-radius:var(--cv-r-sm);
  background:var(--cv-bg); color:var(--cv-ink); font:inherit; font-size:0.9375rem; }
.cv-workflow-name-input:focus-visible { border-color:var(--cv-accent); }

@media (max-width:480px) {
  .cv-workflows-dialog { width:calc(100vw - 20px); padding:18px; }
  .cv-workflow-actions .cv-btn { flex:1 1 auto; }
  .cv-workflow-details-btn { margin-left:0; }
  .cv-workflows-toolbar .cv-btn { flex:1 1 auto; }
  .cv-workflows-refresh { margin-left:0; }
  .cv-workflows-dialog .cv-panel-actions .cv-btn { flex:1 1 auto; }
}

@media (prefers-reduced-motion:reduce) {
  .cv-workflow-item { transition:none; }
}