/* Listen to the story (inc/mx-listen.php, assets/js/mx-listen.js) */
.mxl-i { display: block; width: 22px; height: 22px; flex: none; }
/* the share row widget is a flex row: the card takes a line of its own above it */
.mxl-host { flex-wrap: wrap !important; }
.mxl-host > .mxl { flex: 1 0 100%; width: 100%; box-sizing: border-box; }

/* ---------- card under the byline ---------- */
.mxl-host .mxl { margin: 2px 0 12px; }
.mxl { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px;
    padding: 12px 16px 12px 12px; font-family: Phetsarath, sans-serif; color: var(--mxl-ink);
    background: linear-gradient(180deg, #FFFDF7, var(--mxl-cream)); border: 1px solid var(--mxl-line); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 43, 36, .04), 0 8px 24px -14px rgba(15, 43, 36, .25); -webkit-tap-highlight-color: transparent; }

.mxl__play { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0; padding: 0;
    color: var(--mxl-gold); background: linear-gradient(135deg, var(--mxl-green), var(--mxl-ink)); border: 0; border-radius: 50%;
    box-shadow: 0 6px 16px rgba(15, 43, 36, .32); cursor: pointer; transition: transform .12s ease, box-shadow .2s ease; }
.mxl__play:hover, .mxl__play:focus { color: var(--mxl-gold); background: linear-gradient(135deg, #1D4D41, var(--mxl-ink)); }
.mxl__play .mxl-i { width: 28px; height: 28px; }
.mxl__play .mxl-i--play { margin-left: 3px; }

/* the soft pulse asks to be pressed until the story has been played once */
.mxl__ring { position: absolute; inset: -5px; border: 2px solid var(--mxl-gold); border-radius: 50%; opacity: 0; pointer-events: none; }
.mxl[data-state="idle"] .mxl__ring { animation: mxl-pulse 2.4s ease-out infinite; }
@keyframes mxl-pulse { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.22); opacity: 0; } }

.mxl__spin { width: 24px; height: 24px; border: 3px solid rgba(243, 201, 91, .3); border-top-color: var(--mxl-gold); border-radius: 50%; animation: mxl-spin .8s linear infinite; }
@keyframes mxl-spin { to { transform: rotate(360deg); } }

.mxl__main { min-width: 0; }
.mxl__top { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; padding-right: 74px; }
.mxl__title { display: inline-flex; align-items: center; gap: 7px; font-size: 16.5px; line-height: 1.35; }
.mxl__title .mxl-i { width: 18px; height: 18px; color: #B0892A; }
.mxl__title b { font-weight: 700; }
.mxl__sub { font-size: 13px; line-height: 1.4; color: var(--mxl-mute); white-space: nowrap; }
.mxl__ai { position: absolute; top: 12px; right: 14px; padding: 2px 8px; font-size: 11px; line-height: 1.5; color: #75601F;
    background: #FFF4D1; border: 1px solid #F3DD9A; border-radius: 999px; white-space: nowrap; }

/* little level meter while the voice plays */
.mxl__eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.mxl__eq i { display: block; width: 3px; height: 100%; background: #B0892A; border-radius: 2px; transform-origin: bottom; animation: mxl-eq 1s ease-in-out infinite; }
.mxl__eq i:nth-child(2) { animation-delay: -.35s; } .mxl__eq i:nth-child(3) { animation-delay: -.7s; } .mxl__eq i:nth-child(4) { animation-delay: -.15s; }
.mxl[data-state="playing"] .mxl__eq { display: inline-flex; }
@keyframes mxl-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* bar and controls appear once the story has been started */
.mxl__bar, .mxl__ctl { display: none; }
.mxl.is-on .mxl__bar { display: block; }
.mxl.is-on .mxl__ctl { display: flex; }
.mxl__bar { position: relative; height: 22px; margin: 4px 0 0; cursor: pointer; touch-action: none; }
.mxl__bar::before, .mxl__buf, .mxl__fill { content: ""; position: absolute; left: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; }
.mxl__bar::before { right: 0; background: #E6DFCC; }
.mxl__buf { width: 0; background: #D6CDB4; }
.mxl__fill { width: 0; background: linear-gradient(90deg, var(--mxl-green), #2E6B57); }
.mxl__knob { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; background: var(--mxl-gold);
    border: 2px solid var(--mxl-ink); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .12s ease; }
.mxl__bar:hover .mxl__knob, .mxl__bar.is-drag .mxl__knob { transform: scale(1.2); }

.mxl__ctl { align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.mxl__time { font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--mxl-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mxl__btns { display: inline-flex; align-items: center; gap: 4px; }
.mxl__btn { display: inline-grid; place-items: center; min-width: 40px; height: 36px; margin: 0; padding: 0 8px; color: var(--mxl-ink);
    background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.mxl__btn:hover, .mxl__btn:focus { color: var(--mxl-ink); background: #F1EAD6; }
.mxl__rate { font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; min-width: 48px; border: 1px solid var(--mxl-line) !important; background: #fff; }

/* the paragraph being read */
.mxl-now { background-color: #FFF3C9 !important; box-shadow: 0 0 0 6px #FFF3C9; border-radius: 4px; transition: background-color .35s ease, box-shadow .35s ease; }
.mxl-c p, .mxl-c li, .mxl-c h2, .mxl-c h3, .mxl-c h4, .mxl-t h1, .mxl-x p { transition: background-color .35s ease, box-shadow .35s ease; }

@media (max-width: 767px) {
    .mxl { gap: 12px; padding: 11px 12px 11px 11px; border-radius: 16px; }
    .mxl__play { width: 52px; height: 52px; }
    .mxl__ai { display: none; }      /* the voice name already says "ສຽງ AI" */
    .mxl__top { padding-right: 0; }
    .mxl__title { font-size: 15.5px; }
    .mxl__btn { min-width: 44px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .mxl__ring, .mxl__eq i { animation: none !important; }
}