/* PromptifyLab 3.0 — tools + library UI. Loaded only on tool pages and the library. */
/* ============================================================
   17. TOOLS
   One shared UI layer for all 12 free tools. Each tool ships as
   markup + its own small script; none of them ship CSS. That keeps
   every tool page under budget and makes them all feel like one site.
   ============================================================ */
.plbt{
  border:1.5px solid var(--plb-border);
  border-radius:var(--plb-r);
  background:var(--plb-surface);
  margin:var(--plb-5) 0 var(--plb-6);
  overflow:hidden;
}
.plbt__grid{ display:grid; grid-template-columns:1fr 1fr; }
.plbt__grid--single{ grid-template-columns:1fr; }
.plbt__pane{ padding:var(--plb-5); min-width:0; }
.plbt__pane + .plbt__pane{ border-left:1.5px solid var(--plb-border); background:var(--plb-raised); }
@media (max-width:820px){
  .plbt__grid{ grid-template-columns:1fr; }
  .plbt__pane + .plbt__pane{ border-left:0; border-top:1.5px solid var(--plb-border); }
  .plbt__pane{ padding:var(--plb-4); }
}

.plbt__label{
  display:block; font-size:.8rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--plb-muted);
  margin:0 0 var(--plb-2);
}
.plbt__label + .plbt__hint{ margin-top:calc(var(--plb-2) * -1); }
.plbt__hint{ font-size:.85rem; color:var(--plb-muted); margin:0 0 var(--plb-2); line-height:1.5; }

.plbt__ta, .plbt__in, .plbt__sel{
  width:100%; box-sizing:border-box;
  font:inherit; font-size:.95rem; line-height:1.55;
  color:var(--plb-ink); background:var(--plb-surface);
  border:1.5px solid var(--plb-border); border-radius:var(--plb-r-sm);
  padding:10px 12px;
}
.plbt__ta{ font-family:var(--plb-mono); font-size:.88rem; resize:vertical; min-height:150px; }
.plbt__ta--tall{ min-height:260px; }
.plbt__ta:focus, .plbt__in:focus, .plbt__sel:focus{
  outline:3px solid var(--plb-brand); outline-offset:1px; border-color:var(--plb-brand);
}
.plbt__field{ margin:0 0 var(--plb-4); }
.plbt__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--plb-3); margin:0 0 var(--plb-4); }

.plbt__actions{ display:flex; flex-wrap:wrap; gap:var(--plb-2); align-items:center; margin-top:var(--plb-4); }
.plbt__count{ font-size:.82rem; color:var(--plb-muted); margin-left:auto; }

/* Chip-style multi-select, used for tone, audience, output format */
.plbt__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 var(--plb-4); }
.plbt__chip{
  font:inherit; font-size:.85rem; cursor:pointer;
  padding:6px 12px; border-radius:999px;
  border:1.5px solid var(--plb-border); background:var(--plb-surface); color:var(--plb-ink-2);
}
.plbt__chip:hover{ border-color:var(--plb-muted); }
.plbt__chip[aria-pressed="true"]{
  background:var(--plb-brand); border-color:var(--plb-brand); color:var(--plb-brand-ink);
}

/* Output surface — same dark treatment as a prompt box, for continuity */
.plbt__outhead{
  display:flex; align-items:center; justify-content:space-between; gap:var(--plb-3);
  margin:0 0 var(--plb-3);
}
.plbt__outtitle{
  font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--plb-muted); margin:0;
}
.plbt__out{
  margin:0; padding:var(--plb-4);
  background:var(--plb-code); color:var(--plb-code-ink);
  border-radius:var(--plb-r);
  font-family:var(--plb-mono); font-size:.85rem; line-height:1.6;
  white-space:pre-wrap; word-wrap:break-word;
  max-height:520px; overflow:auto;
  min-height:150px;
}
.plbt__out:empty::before{
  content:attr(data-empty); color:#7A8794; font-style:italic;
}
.plbt__out .plb-prompt__var{ color:var(--plb-code-var); font-weight:600; }

/* Score meter — improver, grader, compare */
.plbt__score{ display:flex; align-items:baseline; gap:var(--plb-2); margin:0 0 var(--plb-2); }
.plbt__scorenum{ font-size:2.2rem; font-weight:700; line-height:1; color:var(--plb-ink); }
.plbt__scoreof{ font-size:.9rem; color:var(--plb-muted); }
.plbt__scoretag{ font-size:.85rem; font-weight:650; margin-left:auto; }
.plbt__meter{
  height:8px; border-radius:999px; background:var(--plb-border);
  overflow:hidden; margin:0 0 var(--plb-4);
}
.plbt__meterfill{ height:100%; width:0; background:var(--plb-verified); transition:width .35s ease; }
.plbt__meterfill[data-band="low"]{ background:#E5484D; }
.plbt__meterfill[data-band="mid"]{ background:#F59E0B; }
.plbt__meterfill[data-band="high"]{ background:var(--plb-verified); }

/* Pass / fail checklist */
.plbt__checks{ list-style:none; margin:0 0 var(--plb-4); padding:0; }
.plbt__checks li{
  display:grid; grid-template-columns:20px 1fr; gap:var(--plb-2);
  padding:var(--plb-2) 0; border-bottom:1px solid var(--plb-border);
  font-size:.92rem; line-height:1.5;
}
.plbt__checks li:last-child{ border-bottom:0; }
.plbt__checks b{ display:block; color:var(--plb-ink); font-weight:650; }
.plbt__checks span{ color:var(--plb-muted); }
.plbt__mark{ font-weight:700; line-height:1.5; }
.plbt__mark[data-ok="1"]{ color:var(--plb-verified); }
.plbt__mark[data-ok="0"]{ color:#E5484D; }
.plbt__mark[data-ok="warn"]{ color:#F59E0B; }

/* Stat strip — calculator */
.plbt__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--plb-3); margin:0 0 var(--plb-4);
}
.plbt__stat{
  border:1.5px solid var(--plb-border); border-radius:var(--plb-r);
  padding:var(--plb-3) var(--plb-4); background:var(--plb-surface);
}
.plbt__stat dt{ font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--plb-muted); margin:0 0 4px; }
.plbt__stat dd{ margin:0; font-size:1.35rem; font-weight:700; color:var(--plb-ink); line-height:1.15; }
.plbt__stat dd small{ font-size:.8rem; font-weight:500; color:var(--plb-muted); }

/* Tables inside tools (cost comparison, chain steps) */
.plbt table{ width:100%; border-collapse:collapse; font-size:.9rem; margin:0 0 var(--plb-4); }
.plbt th, .plbt td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--plb-border); }
.plbt th{ font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--plb-muted); font-weight:700; }
.plbt td.num, .plbt th.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Chain / multi-step lists */
.plbt__steps{ list-style:none; margin:0 0 var(--plb-4); padding:0; counter-reset:plbtstep; }
.plbt__step{
  border:1.5px solid var(--plb-border); border-radius:var(--plb-r);
  padding:var(--plb-3) var(--plb-4); margin:0 0 var(--plb-3);
  background:var(--plb-surface);
}
.plbt__stephead{ display:flex; align-items:center; gap:var(--plb-2); margin:0 0 var(--plb-2); }
.plbt__stepnum{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:var(--plb-brand); color:var(--plb-brand-ink);
  font-size:.8rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.plbt__stephead .plbt__in{ flex:1; }
.plbt__del{
  font:inherit; font-size:.8rem; background:none; border:0; cursor:pointer;
  color:var(--plb-muted); text-decoration:underline; text-underline-offset:3px; padding:4px;
}
.plbt__del:hover{ color:#E5484D; }

/* Diff output — compare tool */
.plbt__diff ins{ background:rgba(14,159,110,.22); color:inherit; text-decoration:none; }
.plbt__diff del{ background:rgba(229,72,77,.22); color:inherit; }

/* Privacy line every tool carries */
.plbt__privacy{
  font-size:.82rem; color:var(--plb-muted);
  border-top:1px solid var(--plb-border);
  padding:var(--plb-3) var(--plb-5);
  margin:0; background:var(--plb-raised);
}
.plbt__privacy strong{ color:var(--plb-ink); font-weight:650; }

/* No-JS message */
.plbt noscript p{
  margin:0; padding:var(--plb-4) var(--plb-5);
  background:#FFF4E5; color:#663C00; font-size:.92rem;
}

.plbt{ border-radius:var(--plb-r-lg); box-shadow:var(--plb-shadow-sm); }
.plbt__out{ border:1px solid #1f2630; }

/* =====================================================================
   PROMPT LIBRARY APP
   ===================================================================== */
.plb-lib{ margin:var(--plb-4) 0 var(--plb-7); }
.plb-lib__bar{ display:flex; gap:8px; align-items:stretch; position:sticky; top:calc(var(--plb-header-h) + 8px); z-index:20; padding:8px; margin:0 -8px; border-radius:var(--plb-r-lg); background:color-mix(in srgb,var(--plb-bg) 88%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.admin-bar .plb-lib__bar{ top:calc(var(--plb-header-h) + 40px); }
.plb-lib__search{ flex:1; display:flex; align-items:center; gap:8px; background:var(--plb-surface); border:1.5px solid var(--plb-border-2); border-radius:14px; padding:0 12px; }
.plb-lib__search:focus-within{ border-color:var(--plb-brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--plb-brand) 16%,transparent); }
.plb-lib__search .plb-i{ color:var(--plb-muted); }
.plb-lib__search input{ flex:1; min-width:0; font:inherit; font-size:1rem; border:0!important; background:transparent!important; padding:13px 0; color:var(--plb-ink); outline:none; box-shadow:none!important; }
.plb-lib__clear{ background:none; border:0; font-size:1.4rem; line-height:1; color:var(--plb-muted); cursor:pointer; padding:0 4px; }
.plb-lib__sort{ font:inherit; font-size:.9rem; border:1.5px solid var(--plb-border-2); border-radius:14px; padding:0 12px; background:var(--plb-surface); color:var(--plb-ink); }
.plb-lib__filters{ margin:var(--plb-3) 0; display:grid; gap:10px; }
.plb-lib__row{ display:flex; flex-wrap:wrap; gap:6px; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.plb-lib__row .plb-chip{ flex:0 0 auto; }
.plb-lib__row .plb-chip .plb-sw{ width:9px; height:9px; border-radius:50%; background:var(--plb-sw,var(--plb-brand)); }
.plb-lib__row--selects{ flex-wrap:wrap; align-items:center; gap:8px; overflow:visible; }
.plb-lib__row--selects select{ font:inherit; font-size:.88rem; border:1.5px solid var(--plb-border); border-radius:999px; padding:7px 12px; background:var(--plb-surface); color:var(--plb-ink-2); max-width:260px; }
.plb-lib__row--selects label{ font-size:.88rem; color:var(--plb-ink-2); display:inline-flex; gap:6px; align-items:center; }
.plb-lib__count{ font-size:.9rem; color:var(--plb-muted); margin:var(--plb-2) 0 var(--plb-3); }
.plb-lib__results{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--plb-3); }
.plb-lib__item{ text-align:left; font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:6px; padding:var(--plb-4) var(--plb-4) var(--plb-4) var(--plb-5); position:relative; border:1px solid var(--plb-border); border-radius:var(--plb-r-lg); background:var(--plb-surface); color:var(--plb-ink); transition:transform .15s, box-shadow .15s, border-color .15s; }
.plb-lib__item::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--plb-pillar); }
.plb-lib__item:hover{ transform:translateY(-2px); box-shadow:var(--plb-shadow); border-color:var(--plb-border-2); }
.plb-lib__item strong{ font-size:1rem; line-height:1.35; }
.plb-lib__item span.j{ font-size:.87rem; color:var(--plb-muted); line-height:1.5; flex:1; }
.plb-lib__meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.76rem; color:var(--plb-muted); }
.plb-lib__meta b{ color:var(--plb-pillar); font-weight:700; }
.plb-lib__more{ display:block; margin:var(--plb-5) auto 0; }
.plb-lib__empty{ text-align:center; padding:var(--plb-7) var(--plb-4); border:1px dashed var(--plb-border-2); border-radius:var(--plb-r-lg); color:var(--plb-muted); }
.plb-detail__panel{ width:min(860px,100%); }
.plb-detail__head{ display:flex; justify-content:flex-end; padding:10px 12px 0; }
.plb-detail__body{ overflow-y:auto; padding:0 20px 20px; }
.plb-detail__body .plb-pcard{ border:0; box-shadow:none; padding:0; }
.plb-detail__body .plb-pcard::before{ display:none; }
.plb-detail__body .plb-prompt pre{ max-height:50vh; }
@media (max-width:640px){ .plb-lib__bar{ flex-wrap:wrap; } .plb-lib__sort{ width:100%; padding:10px 12px; } .plb-lib__results{ grid-template-columns:1fr; } }
@media (max-width:640px){ .plb-lib__row:not(.plb-lib__row--selects){ flex-wrap:nowrap; } }