/* vocabulary cards */
.vcard { display: flex; gap: .85em; align-items: flex-start; border: 1px solid var(--quote-border);
  background: var(--quote-bg); border-radius: 10px; padding: .8em .95em; margin: 0 0 .8em; }
.vic { flex: 0 0 auto; width: 2.1em; height: 2.1em; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bg); border: 1px solid var(--quote-border); color: var(--links); }
.vic-svg { width: 1.35em; height: 1.35em; }
.vbody { flex: 1 1 auto; min-width: 0; }
.vbody .vhead { margin: 0 0 .3em; }
.vbody .vhead strong { font-size: 1.06em; }
.vbody ul { margin: 0; padding-left: 1.1em; }
.vbody li { margin: .15em 0; }
.vth { opacity: .75; }
.vlv { font-size: .72em; border: 1px solid var(--quote-border); border-radius: 99px;
  padding: .1em .55em; margin-left: .35em; vertical-align: middle; opacity: .8; white-space: nowrap; }

/* dialogue turns */
.dturn { border-left: 3px solid var(--quote-border); padding: .35em 0 .35em .85em; margin: 0 0 .55em; }
.dturn .dspk { color: var(--links); }
.dturn .dth { opacity: .75; }

/* listen / speak buttons */
.sp-wrap { white-space: nowrap; margin-left: .4em; }
.sp-btn { border: 1px solid var(--quote-border); background: var(--bg); border-radius: 7px;
  cursor: pointer; font-size: .85em; padding: .05em .45em; margin-left: .25em; line-height: 1.5; }
.sp-btn:hover { border-color: var(--links); }
.sp-playing { outline: 2px solid var(--links); }
.sp-rec { outline: 2px solid #d33; animation: sp-pulse 1s infinite; }
@keyframes sp-pulse { 50% { opacity: .55; } }
.sp-result { margin: .35em 0 .2em; padding: .45em .7em; border-radius: 8px;
  background: var(--quote-bg); border: 1px dashed var(--quote-border); font-size: .92em; }
.sp-score { font-weight: 700; border-radius: 6px; padding: 0 .4em; margin-right: .4em; color: #fff; }
.sp-good { background: #2e9e5b; } .sp-mid { background: #d7910c; } .sp-low { background: #cf4d4d; }
.sp-ok { color: #2e9e5b; font-weight: 600; }
.sp-miss { color: #cf4d4d; text-decoration: underline dotted; }