/* =============================================================================
   PIERCING WORD - SCRIPTUREscripts
   The card shell reuses .card / .cards-wrap from pw-design-system.css. Only the
   filter chips, the run-time/cast meta line and the actions row are new, and
   they follow the same conventions as pw-roles.css.
   ============================================================================= */

/* --- filter chips (sit on the section background, not on a card) ---------- */
.pw-scripts__filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:26px 0 10px;
}

.pw-scripts .pw-chip{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  font-family:var(--pw-body,'Sora',system-ui,sans-serif);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(35,41,147,.25);
  background:transparent;
  color:var(--pw-indigo,#232993);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.pw-scripts .pw-chip:hover{
  border-color:var(--pw-coral,#F0603F);
  color:var(--pw-coral,#F0603F);
}
.pw-scripts .pw-chip.is-on{
  background:var(--pw-coral,#F0603F);
  border-color:var(--pw-coral,#F0603F);
  color:#fff;
}
.pw-scripts .pw-chip:focus-visible{
  outline:2px solid var(--pw-sky,#6CC9E0);
  outline-offset:3px;
}

/* On the deep and midnight sections the indigo chip would vanish. */
.bg-deep .pw-scripts .pw-chip,
.bg-mid  .pw-scripts .pw-chip{
  border-color:rgba(255,255,255,.24);
  color:rgba(255,255,255,.76);
}
.bg-deep .pw-scripts .pw-chip:hover,
.bg-mid  .pw-scripts .pw-chip:hover{
  border-color:var(--pw-coral,#F0603F);
  color:var(--pw-coral,#F0603F);
}
.bg-deep .pw-scripts .pw-chip.is-on,
.bg-mid  .pw-scripts .pw-chip.is-on{
  background:var(--pw-coral,#F0603F);
  border-color:var(--pw-coral,#F0603F);
  color:#fff;
}

.pw-scripts__count{
  font-family:var(--pw-body,'Sora',system-ui,sans-serif);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.6;
  margin:0 0 22px;
  min-height:1em;
}

/* --- card internals ------------------------------------------------------ */
.pw-script{
  display:flex;
  flex-direction:column;
}

.pw-script__meta{
  font-family:var(--pw-body,'Sora',system-ui,sans-serif);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pw-coral,#F0603F);
  margin:2px 0 12px;
  line-height:1.6;
}
.card--deep .pw-script__meta{ color:var(--pw-sky,#6CC9E0); }

/* Push the actions to the bottom so cards in a row line up regardless of how
   long each summary is. */
.pw-script__actions{
  margin-top:auto;
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 18px;
}

.pw-script__actions .pw-btn{
  font-size:11px;
  padding:13px 22px;
}

.pw-script__info{
  font-family:var(--pw-body,'Sora',system-ui,sans-serif);
  font-weight:600;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--pw-indigo,#232993);
  border-bottom:1px solid rgba(35,41,147,.28);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.pw-script__info:hover{
  color:var(--pw-coral,#F0603F);
  border-bottom-color:var(--pw-coral,#F0603F);
}
.card--deep .pw-script__info{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.4);
}
.card--deep .pw-script__info:hover{
  color:var(--pw-coral,#F0603F);
  border-bottom-color:var(--pw-coral,#F0603F);
}

/* Honest gap marker, same job as the [NEEDED: ...] notes. */
.pw-script__todo{
  font-family:var(--pw-body,'Sora',system-ui,sans-serif);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pw-muted,#6B6C86);
  border:1px dashed rgba(107,108,134,.5);
  border-radius:4px;
  padding:11px 16px;
}
.card--deep .pw-script__todo{
  color:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.3);
}

.pw-script[hidden]{ display:none !important; }

@media (max-width:640px){
  .pw-script__actions{ gap:12px; }
  .pw-script__actions .pw-btn{ width:100%; justify-content:center; }
}