/* METIS — Prompt Library styles. Loads AFTER ../blog/blog.css and reuses its
   tokens (--gold, --ink, --serif, ambient background, .bnav, footer, .post-cta). */

/* wider working area than the 720px article column */
.wrap.prompts-wrap{max-width:1080px}

/* ---------- Header ---------- */
.prompts-head h1{
  font-family:var(--serif);font-weight:300;font-variation-settings:'opsz' 28;
  font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.12;letter-spacing:-.01em;
}
.prompts-head p.sub{color:var(--ink-dim);font-weight:300;font-size:1.02rem;line-height:1.7;margin-top:1.2rem;max-width:60ch}
.prompts-head .lede-note{
  margin-top:1.4rem;font-size:.82rem;color:var(--ink-faint);line-height:1.6;max-width:60ch;
}

/* ---------- Controls (sticky) ---------- */
.prompt-controls{
  position:sticky;top:60px;z-index:15;
  margin:clamp(2rem,5vw,3rem) 0 1.4rem;
  padding:1rem 0 1.1rem;
  background:linear-gradient(180deg,var(--bg) 62%,rgba(10,10,12,0));
}
.search-wrap{position:relative;margin-bottom:1rem}
.search-wrap svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--ink-faint);pointer-events:none}
#searchInput{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:.95rem 1rem .95rem 2.6rem;transition:border-color .3s,background .3s;
}
#searchInput::placeholder{color:var(--ink-faint)}
#searchInput:focus{outline:none;border-color:var(--gold-dim);background:var(--bg-3)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);background:transparent;border:1px solid var(--line);
  border-radius:100px;padding:.5em 1.05em;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s;
}
.chip:hover{color:var(--gold-bright);border-color:var(--gold-dim)}
.chip.is-active{color:#0a0a0c;background:linear-gradient(120deg,var(--gold),var(--gold-bright));border-color:transparent;font-weight:600}

.result-count{margin-top:1rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- Grid ---------- */
.prompt-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(1rem,2vw,1.5rem);margin-top:.5rem;
}
.prompt-card{
  display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem 1.5rem 1.3rem;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.prompt-card:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.prompt-card.is-open{border-color:var(--gold-dim)}

.pcard-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.pcard-role{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:100px;padding:.28em .8em;
}
.pcard-time{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.pcard-title{
  font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 24;
  font-size:1.24rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-bottom:.5rem;
}
.pcard-use{color:var(--ink-dim);font-weight:300;font-size:.9rem;line-height:1.6;margin-bottom:1rem}

.pcard-prompt{
  font-family:'SFMono-Regular',ui-monospace,'Cascadia Code',Consolas,monospace;
  font-size:.8rem;line-height:1.65;color:var(--ink-dim);white-space:pre-wrap;word-break:break-word;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.1rem;margin-bottom:1rem;max-height:15rem;overflow:auto;
  /* Firefox themed scrollbar */
  scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent;
}
.pcard-prompt .ph{color:var(--gold-bright);background:rgba(201,169,98,.1);border-radius:3px;padding:0 .15em}
/* WebKit/Chromium themed scrollbar — gold, slim, glows on hover */
.pcard-prompt::-webkit-scrollbar{width:10px}
.pcard-prompt::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.pcard-prompt::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--gold-bright));
  border-radius:100px;border:3px solid var(--bg);background-clip:padding-box;
  transition:background .3s;
}
.pcard-prompt::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--gold-bright),#f3e2b8);
  border:2px solid var(--bg);background-clip:padding-box;
}
.pcard-prompt:hover{scrollbar-color:var(--gold) transparent}

/* customizer fields */
.pcard-fields{display:grid;gap:.7rem;margin-bottom:1rem}
.pcard-fields .field{display:flex;flex-direction:column;gap:.3rem}
.pcard-fields .field span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pcard-fields textarea{
  font-family:var(--sans);font-size:.85rem;color:var(--ink);resize:none;overflow:hidden;
  background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;line-height:1.5;
  transition:border-color .25s;
}
.pcard-fields textarea:focus{outline:none;border-color:var(--gold-dim)}

.pcard-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.4rem}
.pc-btn{
  font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#0a0a0c;background:linear-gradient(120deg,var(--gold),var(--gold-bright));
  border:0;border-radius:6px;padding:.7em 1.15em;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pc-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(201,169,98,.22)}
.pc-btn.pc-ghost{color:var(--gold-bright);background:transparent;border:1px solid var(--gold-dim)}
.pc-btn.pc-ghost:hover{box-shadow:none;border-color:var(--gold-bright)}
.tag-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-left:auto}
.tag{font-size:.58rem;letter-spacing:.08em;color:var(--ink-faint);border:1px solid var(--line);border-radius:4px;padding:.2em .5em}

/* empty state */
.empty-state{text-align:center;padding:4rem 1rem;color:var(--ink-faint)}
.empty-state strong{display:block;color:var(--ink-dim);font-size:1.05rem;font-weight:400;margin-bottom:.4rem}

/* ---------- SEO copy blocks (below the tool) ---------- */
.prompt-seo{margin-top:clamp(3.5rem,7vw,5rem);border-top:1px solid var(--line);padding-top:clamp(2.5rem,5vw,3.5rem)}
.prompt-seo h2{
  font-family:var(--serif);font-weight:300;font-variation-settings:'opsz' 28;
  font-size:clamp(1.5rem,3.2vw,1.9rem);line-height:1.3;letter-spacing:-.01em;color:var(--ink);
  margin:2.4rem 0 1rem;
}
.prompt-seo h2:first-child{margin-top:0}
.prompt-seo h3{font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--ink);margin:1.6rem 0 .5rem}
.prompt-seo p{color:var(--ink-dim);font-weight:300;font-size:1rem;line-height:1.8;margin-bottom:1.1rem;max-width:70ch}
.role-index{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.5rem}
.role-index a{
  font-size:.7rem;letter-spacing:.1em;color:var(--gold);border:1px solid var(--gold-dim);
  border-radius:100px;padding:.45em 1em;transition:color .25s,border-color .25s;
}
.role-index a:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
.prompt-seo details{border-top:1px solid var(--line);padding:1.1rem 0}
.prompt-seo summary{cursor:pointer;color:var(--ink);font-size:1rem;list-style:none}
.prompt-seo summary::-webkit-details-marker{display:none}
.prompt-seo summary::before{content:'+ ';color:var(--gold)}
.prompt-seo details[open] summary::before{content:'– '}
.prompt-seo details p{margin-top:.8rem;font-size:.95rem}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,1.5rem);
  background:var(--bg-3);color:var(--ink);border:1px solid var(--gold-dim);
  border-radius:8px;padding:.8rem 1.3rem;font-size:.8rem;letter-spacing:.04em;
  box-shadow:0 12px 34px rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:60;
  transition:opacity .3s,transform .3s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media(max-width:560px){
  .prompt-grid{grid-template-columns:1fr}
  .prompt-controls{top:56px}
  .tag-row{width:100%;margin-left:0;margin-top:.3rem}
}