/* ============================================================
   grammar-particle.css — Fill in the Particle.

   Loaded alongside grammar-match.css (shared gm- frame chrome + tokens).
   Styles the English prompt, the sentence (content words + blank slots),
   and the particle pool.
   ============================================================ */

.gm-pf-prompt {
  margin-top: 18px;
  padding: 13px 16px;
  background: var(--gm-inset);
  border: 1px solid var(--gm-line);
  border-radius: 12px;
  font-size: clamp(15px, 3.8vw, 19px);
  font-weight: 600;
  color: var(--gm-ink);
  line-height: 1.4;
}

/* Sentence with blanks. */
.gm-pf-sentence {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 8px;
  padding: 6px 2px;
}
.gm-pf-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.gm-pf-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(19px, 4.8vw, 25px);
  color: var(--gm-ink);
  font-weight: 500;
}
.gm-pf-jp ruby rt {
  font-size: 0.42em;
  color: var(--gm-faint);
  font-weight: 400;
}
.gm-pf-rom {
  font-size: 10px;
  color: var(--gm-faint);
  margin-top: 1px;
}
.gm-frame:not(.gm-show-romaji) .gm-pf-rom { display: none; }
.gm-pf-period {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(19px, 4.8vw, 25px);
  color: var(--gm-ink);
  align-self: flex-end;
}

/* Blank slot. */
.gm-pf-blank {
  min-width: 2.4em;
  align-self: flex-end;
  margin-bottom: 14px;  /* sit near the kana baseline above the romaji line */
  padding: 5px 10px;
  background: #fff;
  border: 1.5px dashed var(--gm-line2);
  border-radius: 9px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(17px, 4.4vw, 22px);
  font-weight: 600;
  color: var(--gm-acc);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gm-pf-blank.is-filled { border-style: solid; background: var(--gm-accbg); }
.gm-pf-blank.is-active {
  border-color: var(--gm-acc);
  border-style: solid;
  box-shadow: 0 0 0 2px var(--gm-accbg);
}
.gm-pf-blank.is-correct {
  border-style: solid;
  border-color: var(--gm-green) !important;
  background: rgba(47, 143, 91, 0.12);
  color: var(--gm-green);
  cursor: default;
}
.gm-pf-blank.is-wrong {
  border-color: var(--gm-red) !important;
  background: rgba(177, 50, 42, 0.08);
  color: var(--gm-red);
  animation: gmShake 0.42s ease;
}

/* Particle pool. */
.gm-pf-pool {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.gm-pf-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 3em;
  padding: 9px 15px;
  background: #fff;
  border: 1.5px solid var(--gm-line2);
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, transform 0.1s;
}
@media (hover: hover) {
  .gm-pf-chip:hover { border-color: var(--gm-acc); }
}
.gm-pf-chip:active { transform: translateY(1px); }
.gm-pf-chip-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 600;
  color: var(--gm-ink);
}

.gm-pf-actions { display: flex; gap: 8px; align-items: center; }
.gm-btn-primary:disabled,
.gm-btn-secondary:disabled { opacity: 0.45; cursor: default; }