/* Simplified Shapes and Sounds: shared Arabic board geometry and pigments. */
.board[data-mode="sounds"] { max-width:none; }
.board[data-mode="sounds"] .sounds-workspace { direction:ltr; grid-template-columns:minmax(0,43fr) minmax(0,57fr); gap:clamp(14px,1.4vw,22px); }
.sounds-workspace > * { direction:rtl; }
.sounds-workspace .tray-column { grid-template-rows:minmax(0,1fr); }
.sounds-workspace .sounds-tray { padding:clamp(10px,1vw,14px); }
.sounds-tray .letter-tile { cursor:pointer; }
.s-tray-note { margin:0; color:var(--ink-mute); font-size:clamp(.7rem,.85vw,.82rem); line-height:1.7; }
.sounds-shell { display:grid; grid-template-rows:auto minmax(min-content,1fr); min-width:0; gap:12px; padding:clamp(12px,1.1vw,18px); border:2px solid var(--container-line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--sh-card); }
.s-head-controls { display:grid; grid-template-columns:auto minmax(0,1fr); direction:rtl; align-items:center; gap:12px; min-width:0; }
.sounds-shell .s-auto { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 16px; border:1.5px solid var(--container-line); border-radius:999px; color:var(--ink); background:var(--surface); box-shadow:none; font-size:.9rem; font-weight:700; }
.sounds-shell .s-auto[aria-pressed="true"] { background:#FFF6D1; border-color:var(--gold-deep); }
.sounds-shell .s-auto svg { width:19px; height:19px; }
.s-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:6px; border:1.5px solid var(--bar-line); border-radius:999px; background:var(--bar-tabs-bg); }
.s-subtab { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:48px; padding:8px 12px; border:1.5px solid transparent; border-radius:999px; color:var(--ink-soft); background:transparent; font:700 clamp(12px,1.1vw,16px)/1.6 var(--font-ui); cursor:pointer; transition:background 160ms var(--ease),color 160ms var(--ease),transform 160ms var(--ease); }
.s-subtab svg { width:21px; height:21px; flex:none; }
.s-subtab:hover { color:var(--ink); background:rgba(255,255,255,.75); }
.s-subtab:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.s-subtab[aria-selected="true"] { color:var(--action-ink); border-color:var(--gold-deep); background:linear-gradient(180deg,#FFDF57,#FFCA22); box-shadow:0 3px 10px -6px oklch(50% .13 75 / .55),inset 0 1px 0 rgba(255,255,255,.5); }
.s-lesson-panel { display:grid; min-width:0; min-height:0; }
.s-vowels { display:flex; flex-direction:column; }
.s-vowels-grid { flex:1; }
.s-section { min-width:0; padding:clamp(10px,1vw,14px); border:1.5px solid var(--container-line); border-radius:24px; background:#FFFEF8; box-shadow:inset 0 2px 0 #FFFFFFB8,0 12px 28px -22px #71460A6B; }
.s-vowels-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1vw,14px); margin-top:0; }
.s-tinted-card { min-width:0; border:1.5px solid var(--container-line); border-radius:18px; color:var(--ink); background:#FFFEF8; box-shadow:none; animation:s-card-arrive 180ms var(--ease) both; }
.s-vowel { display:grid; grid-template-rows:auto minmax(160px,1fr) auto; justify-items:center; gap:4px; padding:10px 8px; cursor:pointer; font:inherit; transition:background 160ms var(--ease),transform 160ms var(--ease),box-shadow 160ms var(--ease); }
.s-vowel-label { width:100%; text-align:center; font-size:clamp(22px,1.8vw,28px); font-weight:600; line-height:1.5; }
.s-vowel-action { display:flex; justify-content:center; align-items:center; gap:7px; font-size:16px; font-weight:400; line-height:1.6; min-height:28px; }
.s-vowel-action svg { width:22px; height:22px; flex:none; }
.s-vowel:disabled { cursor:default; opacity:1; }
.s-vowel:disabled .s-vowel-action { color:var(--ink-soft); }
.s-vowel:hover:not(:disabled):not(:active):not(.is-playing),.s-form:hover:not(:disabled):not(:active):not(.is-playing) { background:var(--surface-sunk); }
.s-vowel:active:not(:disabled),.s-form:active:not(:disabled) { border-color:var(--gold-deep); background:#FFF6D1; box-shadow:0 0 0 3px #E6B84530; transform:scale(.96); }
.s-vowel.is-playing,.s-form.is-playing { border-color:var(--gold-deep); background:#FFF6D1; box-shadow:0 0 0 3px #E6B84530; }
.s-ink { position:relative; display:block; width:100%; height:100%; min-width:0; pointer-events:none; }
.s-letter-face { position:absolute; left:50%; top:50%; width:max-content; white-space:nowrap; transform:translate(-50%,-50%); font:700 64px/1.7 var(--font-teach); color:var(--ink); direction:rtl; }
.s-baseline { display:inline-block; width:0; height:0; vertical-align:baseline; }
.s-status { min-height:24px; margin:12px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.8; }
.s-forms { display:flex; flex-direction:column; }
.s-forms-grid { flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.s-form { min-width:0; display:grid; grid-template-rows:minmax(140px,1fr) auto auto; gap:6px; padding:clamp(12px,1.2vw,18px); cursor:pointer; font:inherit; transition:background 160ms var(--ease),transform 160ms var(--ease),box-shadow 160ms var(--ease); }
/* Keep the caption row's original height so larger labels do not shrink the teaching glyph. */
.s-form-caption { display:flex; align-items:center; justify-content:center; gap:8px; height:calc(clamp(12px,1vw,15px) * 1.7); font:500 clamp(18px,1.4vw,22px)/1.2 var(--font-ui); }
.s-form-caption svg { width:23px; height:23px; flex:none; }
.s-form-status { font:400 11px/1.6 var(--font-ui); color:var(--ink-soft); }
.s-form:disabled { opacity:1; cursor:default; }
@keyframes s-card-arrive { from { opacity:.85; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1023px) {
 .board[data-mode="sounds"] .sounds-workspace { grid-template-columns:minmax(0,1fr); }
 .sounds-workspace .letter-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-bottom:6px; }
 .sounds-workspace .letter-tile { scroll-snap-align:center; }
 .sounds-workspace .sounds-tray { gap:10px; }
 .s-tray-note { display:none; }
 .sounds-shell { grid-template-rows:auto auto; }
}
@media(max-width:620px) {
 .sounds-shell { padding:12px; gap:12px; }
 .s-head-controls { gap:8px; }
 .sounds-shell .s-auto { padding:8px 10px; }
 .s-section { padding:10px; border-radius:20px; }
 .s-tabs { padding:4px; gap:4px; }
 .s-subtab { min-height:46px; padding:8px 6px; font-size:12px; gap:5px; }
 .s-subtab svg { width:18px; height:18px; }
 .s-vowel { padding:9px 3px; grid-template-rows:auto 104px auto; }
 .s-vowel-label { font-size:20px; }
 .s-vowel-action { gap:4px; font-size:14px; }
 .s-vowel-action svg { width:18px; height:18px; }
 .s-forms-grid { gap:12px 8px; }
 .s-form { padding:10px 6px; grid-template-rows:minmax(112px,1fr) auto auto; }
 .s-form-caption { height:18.7px; font-size:16px; gap:6px; }
 .s-form-caption svg { width:20px; height:20px; }
 .s-form-status { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .s-tinted-card { animation:none; } }