/* Minimal, fast, accessible styles */
:root{
  --bg: #0b0c10;
  --fg: #e6e7e9;
  --muted:#9aa0a6;
  --card:#13151a;
  --accent:#56b6c2;
  --border:#262a33;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#fcfcfd; --fg:#0b0c10; --muted:#5c6370; --card:#ffffff; --accent:#0ea5e9; --border:#e5e7eb; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji; background:var(--bg); color:var(--fg);}
.container{max-width:1024px;margin:0 auto;padding:1.25rem}
.site-header{border-bottom:1px solid var(--border); position:sticky;top:0;background:color-mix(in srgb, var(--bg), transparent 8%); backdrop-filter:saturate(180%) blur(6px)}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.3px;text-decoration:none;color:var(--fg)}
.nav a{color:var(--muted);text-decoration:none;margin-left:1rem}
.nav a:hover{color:var(--fg)}
.hero{padding:3rem 1.25rem 1rem}
.hero h1{font-size:clamp(1.75rem, 2.8vw, 3rem);margin:0 0 .5rem}
.lead{color:var(--muted);max-width:65ch}
.search{position:relative; margin:1rem 0 0}
.search input{width:100%;padding:0.9rem 2.25rem 0.9rem 0.9rem;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
.search input:focus{outline:2px solid color-mix(in srgb, var(--accent), white 20%); outline-offset:2px}
.search button#clear{position:absolute;right:.25rem;top:.25rem;height:2.2rem;width:2.2rem;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer}
.search button#clear:hover{color:var(--fg)}
.hint{color:var(--muted);font-size:.95rem}
.chip{border:1px solid var(--border);border-radius:999px;background:var(--card);padding:.35rem .7rem;margin:.25rem .25rem 0 0;color:var(--muted);cursor:pointer}
.card-grid{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0.9rem}
.card{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.card code{background:color-mix(in srgb, var(--card), white 6%);padding:.35rem .5rem;border-radius:8px}
.card .tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-size:.8rem;border:1px dashed var(--border);padding:.2rem .5rem;border-radius:999px;color:var(--muted)}
.card .copy{align-self:flex-start;margin-top:.25rem;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg);padding:.5rem .8rem;cursor:pointer}
.card .copy:active{transform:translateY(1px)}
.features{padding:1rem 1.25rem 3rem}
.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;list-style:none;padding:0}
.site-footer{border-top:1px solid var(--border);}
.site-footer .foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--fg)}


/* Enhanced features styles */
.card .flags{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--border)}
.card .flags h4{margin:0 0 .5rem;font-size:.85rem;color:var(--muted);font-weight:600}
.flags-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.4rem}
.flag-item{display:flex;align-items:flex-start;gap:.5rem;padding:.3rem 0}
.flag-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.8rem;background:color-mix(in srgb, var(--accent), transparent 85%);color:var(--accent);padding:.2rem .4rem;border-radius:4px;white-space:nowrap;flex-shrink:0}
.flag-desc{font-size:.8rem;color:var(--muted);line-height:1.3}
.category-badge{display:inline-block;font-size:.75rem;background:color-mix(in srgb, var(--accent), transparent 85%);color:var(--accent);padding:.2rem .5rem;border-radius:999px;margin-bottom:.5rem}
.card.expanded .flags{display:block}
.card .flags{display:none}
.card .expand-btn{align-self:flex-start;margin-top:.25rem;border-radius:10px;border:1px dashed var(--border);background:transparent;color:var(--muted);padding:.4rem .6rem;cursor:pointer;font-size:.8rem}
.card .expand-btn:hover{color:var(--fg);border-style:solid}
.warn{background:color-mix(in srgb, #ef4444, transparent 85%);color:#ef4444}


/* Recipes styles */
.recipe-card{border-left:3px solid var(--accent);background:color-mix(in srgb, var(--accent), transparent 95%)}
.recipe-card .recipe-command{background:color-mix(in srgb, var(--card), white 3%);padding:.75rem;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9rem;margin:.5rem 0;word-break:break-all}
.recipe-steps{margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--border)}
.recipe-steps h4{margin:0 0 .5rem;font-size:.85rem;color:var(--muted);font-weight:600}
.step-item{display:flex;align-items:flex-start;gap:.5rem;padding:.3rem 0;border-bottom:1px solid color-mix(in srgb, var(--border), transparent 50%)}
.step-item:last-child{border-bottom:none}
.step-number{background:var(--accent);color:white;border-radius:50%;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;flex-shrink:0}
.step-cmd{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.8rem;background:color-mix(in srgb, var(--card), white 6%);padding:.2rem .4rem;border-radius:4px;margin-right:.5rem;flex-shrink:0}
.step-desc{font-size:.8rem;color:var(--muted);line-height:1.3}
.recipe-toggle{margin-top:.5rem}
.nav-tabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--border)}
.nav-tab{padding:.5rem 1rem;border:none;background:transparent;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s}
.nav-tab.active{color:var(--fg);border-bottom-color:var(--accent)}
.nav-tab:hover{color:var(--fg)}
.tab-content{display:none}
.tab-content.active{display:block}


/* Category filtering styles */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;align-items:center}
.filter-label{font-size:.9rem;color:var(--muted);margin-right:.5rem}
.category-filter{padding:.4rem .8rem;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--muted);cursor:pointer;font-size:.8rem;transition:all 0.2s}
.category-filter:hover{color:var(--fg);border-color:var(--accent)}
.category-filter.active{background:var(--accent);color:white;border-color:var(--accent)}
.category-filter.all{font-weight:600}
.results-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;color:var(--muted);font-size:.9rem}
.results-count{}


/* Community features styles */
.card-actions{display:flex;gap:.5rem;align-items:center;margin-top:.75rem;padding-top:.75rem;border-top:1px dashed var(--border)}
.action-btn{display:flex;align-items:center;gap:.2rem;padding:.3rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--muted);cursor:pointer;font-size:.75rem;transition:all 0.2s;text-decoration:none}
.action-btn:hover{color:var(--fg);border-color:var(--accent)}
.action-btn.favorited{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb, var(--accent), transparent 90%)}
.action-btn svg{width:12px;height:12px}
.share-menu{position:relative}
.share-dropdown{position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.5rem;min-width:150px;box-shadow:0 4px 12px color-mix(in srgb, black, transparent 85%);z-index:100;display:none}
.share-dropdown.show{display:block}
.share-option{display:block;padding:.4rem .6rem;color:var(--muted);text-decoration:none;border-radius:4px;font-size:.8rem}
.share-option:hover{background:color-mix(in srgb, var(--accent), transparent 90%);color:var(--fg)}
.favorites-tab{position:relative}
.favorites-count{background:var(--accent);color:white;border-radius:999px;padding:.1rem .4rem;font-size:.7rem;margin-left:.3rem}
.contribute-banner{background:color-mix(in srgb, var(--accent), transparent 95%);border:1px solid color-mix(in srgb, var(--accent), transparent 80%);border-radius:12px;padding:1rem;margin:1rem 0;text-align:center}
.contribute-banner h3{margin:0 0 .5rem;color:var(--accent)}
.contribute-banner p{margin:0 0 .75rem;color:var(--muted);font-size:.9rem}
.contribute-btn{background:var(--accent);color:white;border:none;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}
.contribute-btn:hover{background:color-mix(in srgb, var(--accent), black 10%)}



/* Share button + danger badge */
.search #share{ position:absolute; right:2.8rem; top:.25rem; height:2.2rem; padding:0 .8rem;
  border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer }
.search #share:hover{ color:var(--fg) }
.tag.warn{ color:#e11d48; border-color:currentColor; border-style:solid; }
.card code{ word-break: break-word; white-space: pre-wrap; }


/* Favorites toggle */
.search #favToggle{
  position:absolute; right:5.2rem; top:.25rem; height:2.2rem; width:2.2rem;
  border-radius:10px; border:1px solid var(--border); background:var(--card);
  color:var(--muted); cursor:pointer; font-size:1rem; line-height:2.2rem; text-align:center;
}
.search #favToggle.active{ color:var(--fg); border-color: color-mix(in srgb, var(--accent), var(--border) 40%); }

/* Keyboard selection highlight */
.card.active{
  border-color: color-mix(in srgb, var(--accent), var(--border) 40%);
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
  transform: translateY(-1px);
}


/* Mobile: collapse the contrib box so results aren't pushed down */
@media (max-width: 820px){
  #contrib{ margin:.5rem 0 1rem; padding:0; }
  #contrib h2, #contrib p{ display:none; }
  #contrib a{ display:inline-block; font-size:.95rem; opacity:.85; }
}