/* course.css — the trainer's course-specific pieces (decision 0019): the
   romaji line a travel card carries, the phrase cards, the reply block and
   the add sheet. Colours are the kit's; loads in the pages layer after
   profile.css, so it may extend the shelf styles but never the reverse. */

/* The romaji line under a reading — a helper, so caption weight. */
.romaji{font:400 .9rem var(--play-display);color:var(--play-mute);letter-spacing:.02em;margin-top:2px}
.fc .romaji,.teach .romaji{text-align:center}

/* A phrase is a sentence: it wraps, at a reading size. */
.ph-jp{white-space:normal;line-height:1.35}
.ph-card .w-jp{font-size:1.05rem}
.ph-mean{color:var(--play-ink);text-transform:none;letter-spacing:0}

/* What you will hear back. */
.reply{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:.95rem}
.reply .reply-e{color:var(--play-mute)}
.fc .reply{justify-content:center}

/* The add sheet: the face picker's card, one column. */
.zoom-panel.cs-card{
  max-width:520px;text-align:left;padding:16px 18px;
  border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-card);color:var(--play-ink);
  box-shadow:8px 8px 0 var(--play-edge);font-family:var(--play-display);
}
.cs-head{display:flex;align-items:center;gap:10px}
.cs-head .course-glyph{font-size:26px;line-height:1}
.cs-head b{font-size:1.4rem;flex:1;min-width:0}
.cs-x{width:26px;height:26px;font-size:.75rem;padding:0;cursor:pointer;font-family:inherit}
.cs-blurb{margin:8px 0 10px;font-size:1rem}
.cs-units{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px;padding:0}
.cs-units .p-pill{font-size:.85rem;white-space:normal}
.cs-date{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.cs-date input{font:inherit;padding:6px 10px;border:2px solid var(--play-ink);border-radius:10px;background:var(--play-paper);color:var(--play-ink);max-width:220px}
.cs-date input:focus-visible,.cs-x:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.cs-hint{display:block;margin-top:4px}
.cs-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}

/* .p-tag uppercases at kit level with no Hindi cancel (#60 family). */
:root[lang="hi"] .cs-card .p-tag,:root[lang="hi"] .reply .p-tag{text-transform:none;letter-spacing:0}

@media (max-width:480px){
  .zoom-panel.cs-card{padding:14px 12px}
}

/* Listening games: the play button IS the prompt. */
.ql-listen{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0}
.ql-play{font-size:1.1rem}
.ql-asked{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:6px}
.ql-asked .ql-mean{font:400 .95rem var(--play-display);color:var(--play-mute)}

/* The courses card's controls: a date for a course that aims at one, remove
   for any course while another remains. */
.pf-course-ctl{grid-column:2/4;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.pf-course-date{display:flex;align-items:center;gap:6px}
.pf-course-date input{font:inherit;font-size:.9rem;padding:3px 8px;border:2px solid var(--play-ink);border-radius:10px;background:var(--play-paper);color:var(--play-ink)}
.pf-course-date input:focus-visible,.pf-course-rm:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}
.pf-course-rm{background:none;border:0;cursor:pointer;padding:4px 0;margin-left:auto}
.pf-course-rm:hover{color:var(--play-ink)}
:root[lang="hi"] .pf-course-date .p-tag{text-transform:none;letter-spacing:0}