/* Community Flows — shared component styles for the landing (community.html)
   and the gallery (flows.html). Themeable: neutrals via rgba(var(--fg),X);
   page-local blue accent. */

:root { --accent: 59, 130, 246; }

.wf-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 639px) { .wf-wrap { padding-inline: 20px; } }

/* Trust pills */
.wf-pill { display:inline-flex; align-items:center; gap:.4em; font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; }
.wf-pill-accent { color:rgb(var(--accent)); background:rgba(var(--accent),0.14); border:1px solid rgba(var(--accent),0.32); }
.wf-pill-neutral { color:rgba(var(--fg),0.78); background:rgba(var(--fg),0.04); border:1px solid rgba(var(--fg),0.1); }
/* Security/approval pill — its own brand color (safety green, matching the
   card-level security badge) so "No secrets, Human Approved" reads as a
   distinct, branded trust mark rather than a generic neutral chip. */
.wf-pill-secure { color:#2bb24c; background:rgba(43,178,76,0.14); border:1px solid rgba(43,178,76,0.34); }

/* Search */
.wf-search-wrap { position:relative; }
.wf-search-wrap svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); pointer-events:none; color:rgba(var(--fg),0.4); }
.wf-search { width:100%; height:58px; padding:0 18px 0 50px; border-radius:14px; font-size:16px;
  color:var(--text); background:rgba(var(--fg),0.035); border:1px solid rgba(var(--fg),0.1); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.wf-search::placeholder { color:rgba(var(--fg),0.4); }
.wf-search:focus { border-color:rgb(var(--accent)); box-shadow:0 0 0 4px rgba(var(--accent),0.16); background:rgba(var(--fg),0.05); }

/* Buttons */
.wf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45em; font-size:14px; font-weight:600;
  border-radius:10px; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.wf-btn-accent { background:rgb(var(--accent)); color:#fff; box-shadow:0 4px 14px rgba(var(--accent),0.28); }
.wf-btn-accent:hover { filter:brightness(1.08); }
.wf-btn-ghost { color:rgba(var(--fg),0.7); background:transparent; border:1px solid rgba(var(--fg),0.14); }
.wf-btn-ghost:hover { background:rgba(var(--fg),0.05); color:rgba(var(--fg),0.9); }

/* Filter / sort chips (gallery) */
.wf-filter { display:inline-flex; align-items:center; gap:.4em; font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px;
  color:rgba(var(--fg),0.6); background:rgba(var(--fg),0.04); border:1px solid rgba(var(--fg),0.1); cursor:pointer;
  transition:all .15s ease; }
.wf-filter:hover { color:rgba(var(--fg),0.85); }
.wf-filter[aria-pressed="true"] { color:rgb(var(--accent)); background:rgba(var(--accent),0.14); border-color:rgba(var(--accent),0.32); }

/* Flow card — equal height, footer pinned */
.wf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; align-items:stretch; }
.wf-card { position:relative; overflow:hidden; display:flex; flex-direction:column; height:100%; padding:22px; border-radius:16px;
  background:rgba(var(--fg),0.03); border:1px solid rgba(var(--fg),0.08);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.wf-card:hover { border-color:rgba(var(--accent),0.45); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.35); }
/* Top-performer ribbon — a diagonal gold banner clipped to the card's top-right
   corner (the card's overflow:hidden + radius do the clipping). Marks the global
   most-installed flows (see markTopInstalled in community.js). */
/* Centered on the corner diagonal: with width 160 and right:-46, the band's
   horizontal inset from the right edge is 80-46=34px, so it must drop ~34px from
   the top (top + half its ~20px height) for the centered text to land on the
   diagonal — otherwise "POPULAR" skews toward the top-left. */
.wf-ribbon { position:absolute; top:24px; right:-46px; z-index:2; transform:rotate(45deg);
  width:160px; text-align:center; white-space:nowrap; padding:4px 0; font-size:8.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:#2a1d05; background:linear-gradient(135deg,#ffd76a,#e0a23a);
  box-shadow:0 2px 8px rgba(0,0,0,0.35); pointer-events:none; }
/* Runner-up (#2) ribbon — deepened brand violet (from #9B61C9) so white text
   stays legible across the whole gradient (~5-7:1; the lighter #b47fe0 only hit
   ~3:1 against white, too low for the small bold label). */
.wf-ribbon-2 { color:#fff; background:linear-gradient(135deg,#8b50c4,#6d39a6); }
.wf-card-title { font-size:17px; font-weight:650; line-height:1.3; color:rgb(var(--fg)); }
.wf-card-meta { font-size:13.5px; color:rgba(var(--fg),0.55); }
.wf-card-meta b { color:rgba(var(--fg),0.78); font-weight:600; }
/* AI-written summary — clamped to 2 lines so varying lengths never break card height */
.wf-card-desc { margin-top:10px; font-size:13.5px; line-height:1.5; color:rgba(var(--fg),0.62); }
/* Security badge — shield-check in a safety green, so the corner mark reads as
   "this flow passed security review" rather than a generic accent tick. */
.wf-badge { flex:none; width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  color:#2bb24c; background:rgba(43,178,76,0.16); border:1px solid rgba(43,178,76,0.42); }
.wf-chip { display:inline-flex; align-items:center; font-size:12px; color:rgba(var(--fg),0.62);
  background:rgba(var(--fg),0.045); border:1px solid rgba(var(--fg),0.08); border-radius:7px; padding:4px 9px; }

/* Mini bead pipeline — one rounded-square bead per node, in its canvas
   category color, on a hairline wire. Mirrors the app's PipelineDotsView
   (idle state): "lit, not printed" via a soft same-color self-glow. The
   wire is a chrome hairline (themeable) sitting behind the row; cyclic
   flows drop the .wf-beads-wired class and so render no wire. */
/* Top margin (26) matches the visual bottom gap = our 16 + the description's
   own 10px margin-top, so the beads sit evenly between meta and description. */
.wf-beads { position:relative; display:flex; width:fit-content; margin:26px auto 16px;
  align-items:center; gap:8px; min-height:12px; }
.wf-beads-wired::before { content:""; position:absolute; left:-10px; right:-10px; top:50%;
  height:1.5px; transform:translateY(-50%); border-radius:999px; background:rgba(var(--fg),0.40); }
.wf-bead { position:relative; z-index:1; width:8px; height:8px; flex:none; border-radius:2.6px;
  background:var(--bead); box-shadow:0 0 5px color-mix(in srgb, var(--bead) 70%, transparent); }
.wf-bead-more { position:relative; z-index:1; font-size:10px; font-weight:600; line-height:1;
  color:rgba(var(--fg),0.5); padding-left:2px; }

/* Colored taxonomy chip — neutral chrome (themeable) with a category-color
   dot + tint so each category reads at a glance in light AND dark. */
.wf-cat-chip { display:inline-flex; align-items:center; gap:.4em; font-size:12px; font-weight:600;
  color:rgba(var(--fg),0.72); background:color-mix(in srgb, var(--cat) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--cat) 32%, transparent); border-radius:7px; padding:3px 9px; }
.wf-cat-dot { width:7px; height:7px; flex:none; border-radius:999px; background:var(--cat); }
.wf-safe { display:inline-flex; align-items:center; gap:.45em; font-size:12.5px; font-weight:600; }
.wf-safe-ok { color:#34c759; }
.wf-safe-ok .dot { width:7px; height:7px; border-radius:999px; background:#34c759; }
.wf-safe-warn { color:#e0a23a; background:rgba(224,162,58,0.1); border:1px solid rgba(224,162,58,0.25); border-radius:7px; padding:3px 9px; }
.wf-safe-warn .dot { width:7px; height:7px; border-radius:999px; background:#e0a23a; }
.wf-safe-warn[title] { cursor:help; }
.wf-safe-info { opacity:0.6; margin-left:1px; }
.wf-safe-warn:hover .wf-safe-info { opacity:1; }
/* The tag cluster (capability chips + category/safety) pins to the bottom of
   the card via margin-top:auto, so the flexible height slack lands under the
   description and the chips always sit right above the Install button. */
.wf-card-tags { margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:10px; }
.wf-card-caps { display:flex; flex-wrap:wrap; gap:6px; }
.wf-card-badges { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.wf-card-foot { margin-top:0; padding-top:20px; display:flex; gap:10px; }
.wf-card-foot .wf-btn { height:38px; padding:0 14px; flex:1; }
.wf-card-foot .wf-btn-ghost { flex:none; padding:0 14px; }

/* "How it works" tiles */
.wf-how { background:rgba(var(--fg),0.025); border:1px solid rgba(var(--fg),0.07); border-radius:16px; padding:26px; }
.wf-how-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent),0.12); color:rgb(var(--accent)); margin-bottom:14px; }

/* Empty / no-results */
.wf-empty-icon { width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px; background:rgba(var(--accent),0.12); border:1px solid rgba(var(--accent),0.28); color:rgb(var(--accent)); }

/* Section heading row */
.wf-sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
.wf-sec-title { font-size:24px; font-weight:650; letter-spacing:-0.01em; color:rgb(var(--fg)); }
.wf-sec-link { font-size:14px; font-weight:600; color:rgb(var(--accent)); text-decoration:none; white-space:nowrap; }
.wf-sec-link:hover { filter:brightness(1.1); text-decoration:underline; }

/* Footer is single-sourced site-wide in /shared/footer.js (markup + styles). */