/* Approved Arabic learning mechanics; existing palette, header and tile optics remain canonical. */
.board[data-mode="learn"] .tray-column { grid-template-rows:minmax(0,1fr); }
.learn-controls { display:flex; align-items:center; gap:10px; }
.stage .learn-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; }
.stage .learn-auto[aria-pressed="true"] { background:#FFF6D1; border-color:var(--gold-deep); }
.stage .learn-auto svg { width:19px; height:19px; }
.stage .learn-hear { width:52px; min-width:52px; height:52px; padding:0; justify-content:center; border:1.5px solid var(--container-line); border-radius:var(--r-pill); background:#FFFEF8; color:var(--ink); box-shadow:none; }
.stage .learn-hear svg { width:21px; height:21px; }
.stage .learn-hear:hover:not(:disabled) { transform:none; filter:none; background:#FFF1CB; }
.stage .learn-hear:active:not(:disabled) { transform:scale(.94); box-shadow:inset 0 2px 5px rgba(23,62,56,.16); }
@media(max-width:620px) { .stage .learn-hear { width:44px; min-width:44px; height:44px; min-height:44px; } }
.object-pending { display: grid; place-items: center; width: 100%; height: 100%; font-size: clamp(2.5rem, 7vw, 5rem); color: var(--ink, #203347); }
.board, .panel { min-width: 0; }
.mode-tab { min-height: 44px; }
.header-actions .speed-button { min-width: 44px; flex-shrink: 0; }
.letter-name { font-family: var(--font-teach); font-size: clamp(20px,2.3vw,30px); font-weight: 700; color: var(--ink); }
.letter-card { gap: 4px; }
.context-word { font-family: var(--font-teach); font-weight: 700; direction: rtl; }
.target-letter { color: #a63324; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Do not use inline-block, spacing or a different font on target-letter: that breaks joining. */
.q-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
.q-option { min-height: 120px; overflow: visible; }
.q-option img { width: 100%; max-width: 170px; height: 155px; object-fit: contain; }
.q-object img { width: min(250px,100%); height: 230px; object-fit: contain; }
.q-opt-face { font-size: clamp(34px,4.5vw,64px); line-height: 1.75; }
.q-word .context-word { font-size: clamp(44px,6vw,80px); line-height: 1.7; }
.quiz-foot .toy-button { min-height: 48px; background: var(--gold); }
.q-verdict { min-height: 32px; margin: 8px 0 0; font-size: 16px; }
.quiz-results .result-number { font-size: 78px; color: var(--ink); font-weight: 700; margin-block: 20px; }
.result-number small { font-size: 26px; }
.audio-status { position: fixed; inset-inline: 16px; bottom: max(12px,env(safe-area-inset-bottom)); margin: 0 auto; max-width: 570px; padding: 12px 20px; border: 2px solid var(--line-strong); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--sh-card); z-index: 20; font-size: 14px; line-height: 1.6; }
.audio-status[hidden] { display: none; }
.writing-workspace .tray-column { grid-template-rows: auto; align-content: start; }
.writing-workspace .tray { min-height: 410px; }
.write-instruction, .write-paper-note { text-align: center; font-size: 14px; line-height: 1.8; margin: 0; }
.write-paper-note { color: var(--ink-soft); font-size: 12px; }
.write-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.w-guide-body { fill: none; stroke: #aabfb3; stroke-width: 44; stroke-linejoin: round; stroke-linecap: round; }
.w-guide-dot { fill: #aabfb3; }
.w-guide-body.active { stroke: #819f90; }
.w-guide-dot.active { fill: #819f90; }
.write-canvas-wrap { max-width: 480px; background: #fffef9; }
.write-feedback { min-height: 28px; margin: 0; text-align: center; color: var(--ink); font-size: 14px; line-height: 1.8; }
.write-tools { gap: 10px; }
.write .pens { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 5px 0; }
.write .pen { width: 46px; height: 46px; flex: 0 0 46px; }
.write-nav { min-height: 48px; min-width: 48px; }
.write .tool, .write-nav, .quiz-foot .toy-button {
 border: 2px solid var(--gold-deep); border-radius: 18px;
 box-shadow: inset 0 2px 0 #fff8, 0 4px 0 #ad780b, 0 6px 9px #48370816;
 background-image: linear-gradient(165deg,#fff4,transparent 48%,#a5660014);
}
button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media(max-width:900px) {
 .writing-workspace .tray { min-height: auto; }
}
@media(max-width:620px) {
 .q-option { min-height: 90px; padding: 8px 3px; }
 .q-option img { height: 90px; }
 .q-options { gap: 8px; }
 .q-opt-face { font-size: 37px; }
 .quiz-difficulty { width: 100%; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }

/* Learn visual: English inner-container treatment + approved Arabic card layout. */
.stage .learn-visual { position:relative; isolation:isolate; }
.stage .learn-visual::before { content:""; position:absolute; inset:0; border-radius:inherit; background:url("assets/images/learn/doodle-learn.svg") repeat; background-size:480px 320px; opacity:.48; pointer-events:none; z-index:-1; }
.stage .learn-visual {
  padding: clamp(12px, 1.4vw, 22px);
  border: 2px solid var(--container-line);
  border-radius: 24px;
  background: #FFFEF8;
  box-shadow: inset 0 2px 0 #FFFFFFB8, 0 12px 28px -22px #71460A6B;
}
.stage .learn-visual {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  min-height: 300px;
  gap: clamp(12px, 1.5vw, 24px);
}
.learn-visual .letter-card {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.84;
  gap: 10px;
  padding: clamp(12px, 1.4vw, 22px);
  border-width: 2px;
  border-radius: 24px;
  box-shadow: 0 18px 40px -28px #173E388C, inset 0 1px 0 #FFFFFFF2;
}
.learn-visual .letter-glyph {
  font-size: clamp(62px, 40cqw, 168px);
  line-height: 1.25;
  /* Scheherazade ink sits below the CSS line center; compensate without changing the letter shape. */
  transform: translateY(-.16em);
  color: var(--ink);
}
.letter-card-text {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.3vw, 20px);
  text-align: center;
}
.learn-visual .letter-name, .learn-visual .letter-word {
  max-width: 100%;
  font-size: clamp(22px, 12cqw, 52px);
  line-height: 1.55;
  color: var(--ink);
}
.learn-visual .letter-word { font-size: clamp(23px, 12.8cqw, 54px); }
.learn-visual .image-slot { min-width: 0; }
@media (max-width: 620px) {
  .stage .learn-visual { padding: 12px; }
  .stage .learn-visual { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 14px; }
  .learn-visual .letter-card { padding: 12px 14px; border-radius: 20px; }
}

/* Approved visual treatment for the Learn letter card. */
.stage .letter-card {
  background: #FFFEF8;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 40px -28px #173E388C, inset 0 1px 0 #FFFFFFF2;
  animation: learn-card-arrive 180ms var(--ease) both;
}
@keyframes learn-card-arrive {
  from { opacity: .85; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 620px) {
  .stage .letter-card { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .letter-card { animation: none; }
}

/* Quiet finishing pass shared by all four activities. Geometry, teaching
   colors, keyboard key depth and feedback states stay component-owned. */
.board[data-mode] {
  --polish-panel-shadow: 0 12px 28px -22px #10264D42, inset 0 1px 0 #FFFFFFC2;
  --polish-card-shadow: 0 8px 18px -15px #10264D35, inset 0 1px 0 #FFFFFFC2;
}
.board[data-mode] :is(.panel, .sounds-shell, .quiz-shell, .write-shell) {
  box-shadow: var(--polish-panel-shadow);
}
.board[data-mode="learn"] .letter-card {
  box-shadow: 0 12px 26px -20px #10264D45, inset 0 1px 0 #FFFFFFF2;
}
.board[data-mode="sounds"] :is(.s-vowel, .s-form):not(.is-playing):not(:active),
.board[data-mode="quiz"] .q-option:not(.is-right):not(.is-wrong):not(.is-speaking):not(:active) {
  box-shadow: var(--polish-card-shadow);
}
/* Hover/press must retain wrong-answer feedback; narration keeps its own cue. */
.board[data-mode="quiz"] .q-option.is-wrong:not(.is-speaking):is(:hover, :active):not(:disabled) {
  background: #FFF1F0;
}
.board[data-mode] :is(.learn-auto, .learn-hear, .s-auto, .q-auto, .q-listen,
  .w-tool, .w-hear, .w-pen-current, .keyboard-arrow):not(:disabled):not(:active):not(.is-on):not([aria-pressed="true"]) {
  box-shadow: inset 0 1px 0 #FFFFFFD9;
}
.board[data-mode] :is(.mode-tab, .s-subtab):active:not(:disabled) {
  transform: translateY(1px);
}
.board[data-mode] :is(button, a, select):focus-visible {
  outline-color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .board[data-mode] :is(.learn-auto, .learn-hear, .s-auto, .q-auto, .q-listen,
    .w-tool, .w-hear, .w-pen-current, .keyboard-arrow):hover:not(:disabled):not(:active):not(.is-on):not([aria-pressed="true"]) {
    border-color: var(--gold-deep);
    box-shadow: 0 3px 9px -7px #10264D55, inset 0 1px 0 #FFFFFFD9;
  }
}