/* Phrasebook page. Loaded after styles.css, so it only adds what that sheet
 * does not already provide and takes every colour from its custom properties —
 * which is what keeps it correct in the dark theme as well. */

.pb-title { margin: 0 0 .4rem; font-size: 1.5rem; letter-spacing: -.01em; }

.pb-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-top: .6rem; }
.pb-controls .field { margin-bottom: .5rem; }
.pb-scope { display: inline-flex; gap: .4rem; align-items: center; margin-top: .45rem; font-size: .85rem; color: var(--ink-soft); }

.pb-count { margin: 0 0 .9rem; font-size: .85rem; color: var(--ink-soft); min-height: 1.2em; }

.pb-groups { display: grid; gap: 1.1rem; }
.pb-cat h2 {
  margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); font-family: var(--ui);
}
.pb-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.pb-row {
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .9rem; display: grid; gap: .15rem;
}
.pb-phrase { font-size: 1.3rem; line-height: 1.35; font-weight: 600; text-align: start; }
.pb-pron { font-family: var(--ui); font-size: .95rem; color: var(--accent); }
.pb-mean { font-family: var(--ui); font-size: .9rem; color: var(--ink-soft); }
.pb-lang {
  justify-self: start; font-family: var(--ui); font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}

@media (min-width: 720px) {
  .pb-rows { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pb-controls .field { min-width: 0; flex: 1 1 100%; }
}