/* ==========================================================================
   Paddy Prompt Studio — rhyme finder
   Layers on /blog/style.css and /tools/shared/tool-common.css.
   ========================================================================== */

.rf-form { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 0.6rem; align-items: end; }
.rf-form label { display: grid; gap: 0.3rem; }
.rf-form .pt-input { width: 100%; font-size: 1.05rem; min-height: 50px; }
#rf-word { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: 1.2rem; }
.rf-form .btn-primary { min-height: 48px; padding-inline: 1.3rem; }

.rf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.9rem; }
.rf-starters, .rf-recent { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.rf-mini { font-size: 0.76rem; color: var(--text-dim); font-weight: 600; margin-right: 0.2rem; }
.rf-recent-wrap { margin-top: 0.6rem; }

.rf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; margin-top: 1rem; align-items: start; }
.rf-results { min-height: 6rem; }
.rf[data-state="busy"] .rf-results { opacity: 0.45; transition: opacity 0.2s; }
.rf[data-state="busy"] .pt-status::after {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.5em; vertical-align: -0.1em;
  border: 2px solid rgba(165, 180, 252, 0.4); border-top-color: #22d3ee; border-radius: 50%;
  animation: pt-spin 0.8s linear infinite;
}

.rf-group { margin: 0 0 1.1rem; padding: 0.9rem 1rem; background: rgba(255,255,255,0.025); border: 1px solid var(--border-soft); border-radius: 16px; }
.rf-group h3 { margin: 0; font-family: "Space Grotesk", "Inter", sans-serif; font-size: 1.05rem; color: #fff; display: flex; align-items: center; gap: 0.5rem; }
.rf-group h4 { margin: 0.75rem 0 0.35rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); }
.rf-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; color: #0b0620; background: #a5b4fc; border-radius: 999px; padding: 0.05rem 0.45rem; }
.rf-note { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: var(--text-dim); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rf-topical { border-color: rgba(252, 211, 77, 0.35); background: rgba(252, 211, 77, 0.05); }
.rf-topical .rf-count { background: #fcd34d; }
.rf-word.picked { background: rgba(34, 211, 238, 0.18); border-color: rgba(103, 232, 249, 0.7); color: #a5f3fc; }
.rf-empty { padding: 1rem; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-muted); }
.rf-empty p { margin: 0; }

.rf-bank { position: sticky; top: 5rem; }
.rf-bank h3 { margin: 0 0 0.5rem; font-family: "Space Grotesk", "Inter", sans-serif; font-size: 1rem; color: #fff; }
.rf-bank-list { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 2.5rem; }
.rf-bank-empty { margin: 0; font-size: 0.82rem; color: var(--text-dim); }
.rf-bank-word span { color: var(--text-dim); }
.rf-bank-actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
.rf-bank-actions .btn-ghost { flex: 1; min-height: 40px; font-size: 0.82rem; padding: 0.4rem 0.6rem; }
.rf-bank-link { display: block; margin-top: 0.7rem; font-size: 0.82rem; }

@media (max-width: 760px) {
  .rf-form { grid-template-columns: 1fr; }
  .rf-form .btn-primary { width: 100%; }
  .rf-layout { grid-template-columns: 1fr; }
  .rf-bank { position: static; order: -1; }
}