/* v153: optional audio and trace improvements in the existing Learning Adventure Arabic pathway. */
.sbs153-recording{margin:18px 0 20px;padding:18px;border:2px solid #cfb4df;border-radius:21px;background:linear-gradient(125deg,#fff9dc,#f1e7ff);display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px 16px;box-shadow:0 6px 16px #3d1c4920}
.sbs153-audio-icon{width:54px;height:54px;border-radius:18px;background:#48216e;color:#ffe1a4;font-size:30px;font-weight:900;display:grid;place-items:center;grid-row:span 2}
.sbs153-recording-copy strong{font-size:21px;color:#381652}.sbs153-recording-copy p{color:#5b416c;font-size:14px;line-height:1.6;margin:6px 0 4px}
.sbs153-recording audio{display:block;width:100%;max-width:100%;grid-column:2;min-width:0;height:52px}
.sbs153-source,.sbs153-audio-error{grid-column:2;font-size:12px;color:#58486c;margin:0}.sbs153-source a{font-weight:800;color:#572077;text-decoration:underline}.sbs153-audio-error:empty{display:none}
.sbs153-tracing{margin:18px 0 0;border:2px solid #e7cdb9;border-radius:20px;background:linear-gradient(145deg,#fffdfa,#fff1e7);overflow:hidden}
.sbs153-tracing>summary{cursor:pointer;padding:15px 18px;font-size:17px;font-weight:900;list-style-position:inside;color:#4b206d}.sbs153-tracing>summary:hover{background:#fff4e1}.sbs153-tracing-inner{padding:0 15px 18px}.sbs153-tracing-inner>p{font-size:14px;line-height:1.55;color:#624d70;margin:6px 0 15px}
.sbs153-letter-tabs{display:flex;gap:12px;margin:0 0 12px;justify-content:center}.sbs153-letter-tabs button{cursor:pointer;min-width:94px;min-height:60px;font:700 34px serif;border:2px solid #cab5d2;background:white;border-radius:15px;color:#48206f}.sbs153-letter-tabs button[aria-pressed=true]{background:#542083;color:white;border-color:#542083}
.sbs153-trace-surface{position:relative;overflow:hidden;max-width:700px;min-height:210px;width:100%;margin:0 auto;border:2px dashed #ba90c8;border-radius:18px;background:repeating-linear-gradient(0deg,#fff 0,#fff 52px,#efe6f0 54px);touch-action:none;isolation:isolate;scroll-margin-top:110px;scroll-margin-bottom:135px}
.sbs153-trace-ghost{position:absolute;inset:0;display:grid;place-items:center;color:#e0c1e8;font:700 clamp(110px,30vw,200px)/1 serif;pointer-events:none;user-select:none}.sbs153-trace-surface canvas{display:block;position:relative;z-index:1;width:100%;height:230px;touch-action:none;cursor:crosshair}
.sbs153-trace-controls{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}.sbs153-trace-controls span{color:#70536f;font-size:12px;font-weight:650}
@media(max-width:600px){.sbs153-recording{grid-template-columns:1fr;padding:14px;gap:8px}.sbs153-audio-icon{grid-row:auto;width:38px;height:38px;font-size:23px}.sbs153-recording audio,.sbs153-source,.sbs153-audio-error{grid-column:1}.sbs153-tracing>summary{font-size:16px}.sbs153-letter-tabs button{min-width:80px}.sbs153-trace-surface canvas{height:195px}.sbs153-trace-controls{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.sbs153-tracing,.sbs153-recording{scroll-behavior:auto}}

/* Give finger-tracing an unobstructed canvas: the mobile dock returns when the panel closes. */
@media(max-width:767px){body.adventure-page:has(#sbs153-tracing[open]) .sbs112-dock{opacity:0!important;pointer-events:none!important;transform:translate(-50%,115%)!important}}