/* Shared vertical composition. Pigments, borders, shadows and interactions
   remain in the original component styles; this file owns geometry only. */
.board[data-mode] {
  --layout-gap: clamp(12px, 1vw, 16px);
  --lesson-min-height: 470px;
  max-width: none;
  height: auto;
}
.board[data-mode="quiz"] { --lesson-min-height: 500px; }
.board[data-mode="write"] { --lesson-min-height: 550px; }
.board[data-mode] .workspace {
  direction: rtl;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(var(--lesson-min-height), 1fr) max-content;
  gap: var(--layout-gap);
  align-items: stretch;
  min-width: 0;
}
.board[data-mode] .workspace > * {
  direction: rtl;
  width: 100%;
  min-width: 0;
  order: 0;
}
.board[data-mode] .stage-column { grid-template-rows: minmax(0, 1fr); }
.board[data-mode] .tray-column { grid-template-rows: auto; align-content: start; }
.board[data-mode] .workspace .panel.tray {
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  min-height: 0;
  height: auto;
  gap: 0;
  padding: clamp(12px, 1vw, 18px) clamp(16px, 2.4vw, 40px);
}
.board[data-mode] .workspace :is(.q-tray-note, .s-tray-note) { display: block; text-align: center; }

/* Learn retains the image on the left and the letter card on the right. */
.board[data-mode="learn"] .stage { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.board[data-mode="learn"] .learn-visual {
  container-type: size;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.board[data-mode="learn"] .letter-card {
  width: min(100%, 184cqh);
  max-width: 600px;
  min-width: 0;
  justify-self: center;
}
.board[data-mode="learn"] .image-slot { width: min(100%, 100cqh, var(--placeholder)); }

/* Sounds: three equal cards. Shapes: four equal cards across the wider lesson. */
.board[data-mode="sounds"] .sounds-shell { grid-template-rows: auto minmax(0, 1fr); }
.board[data-mode="sounds"] .s-forms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.board[data-mode="sounds"] .s-vowel { grid-template-rows: auto minmax(0, 1fr) auto; }
.board[data-mode="sounds"] .s-form { grid-template-rows: minmax(0, 1fr) auto auto; }

/* Quiz uses the available width, keeping its three stimuli/answer columns. */
.board[data-mode="quiz"] .q-board {
  width: 100%;
  min-height: 0;
  grid-template-rows: minmax(132px, 1fr) 88px;
}
.board[data-mode="quiz"] :is(.q-prompt-row, .q-feedback-slot) { width: 100%; }
.board[data-mode="quiz"] .q-option { min-height: 88px; }
.board[data-mode="quiz"] .q-feedback { min-height: 64px; }

/* Writing has one broad, centred drawing area and no inner scroll region. */
.board[data-mode="write"] .write-shell { overflow: visible; grid-template-rows: auto minmax(0, 1fr) auto; }
.board[data-mode="write"] .stage-column { direction: ltr; }
.board[data-mode="write"] .w-canvas-wrap { height: 100%; aspect-ratio: auto; }
.board[data-mode="write"] .w-drawing-area { height: auto; min-height: 240px; }
.board[data-mode="write"] .w-bar-card { overflow: visible; }

@media (max-width: 1023px) {
  .board[data-mode] .workspace { grid-template-rows: auto max-content; }
  .board[data-mode] .stage-column { min-height: var(--lesson-min-height); }
  .board[data-mode="write"] .w-drawing-area { height: clamp(280px, 42vw, 400px); }
}
@media (max-width: 620px) {
  .board[data-mode] .stage-column { min-height: 0; }
  .board[data-mode="learn"] .stage { grid-template-rows: max-content minmax(0, 1fr); }
  .board[data-mode="learn"] .learn-visual {
    container-type: normal;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }
  /* Phone Learn follows the English reference: picture, then letter card. */
  .board[data-mode="learn"] .letter-card { width: 100%; grid-column: 1; grid-row: 2; }
  .board[data-mode="learn"] .image-slot { width: min(100%, 200px); max-width: none; grid-column: 1; grid-row: 1; }
  .board[data-mode="sounds"] .s-forms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board[data-mode="sounds"] .s-form { grid-template-rows: minmax(112px, 1fr) auto auto; }
  .board[data-mode="sounds"] .s-vowel { grid-template-rows: auto minmax(128px, 1fr) auto; }
  .board[data-mode="sounds"] .s-head-controls { grid-template-columns: minmax(0, 1fr); }
  .board[data-mode="sounds"] .s-auto { justify-self: start; }
  .board[data-mode="quiz"] .q-board { grid-template-rows: minmax(144px, 1fr) 86px; }
  .board[data-mode="quiz"] .q-option { min-height: 86px; }
  .board[data-mode="write"] .w-bar-card { overflow: visible; }
}

/* Portrait phone controls. Keep Learn, the topbar, the letter tray and all
   wider/landscape layouts unchanged; this matches the existing phone toolbar. */
@media (max-width: 599px) and (orientation: portrait) {
  .board[data-mode="sounds"] .s-head-controls {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .board[data-mode="sounds"] .s-auto {
    width: 52px;
    min-height: 52px;
    padding: 0;
    justify-self: stretch;
  }
  .board[data-mode="sounds"] :is(.s-auto, .s-subtab) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .board[data-mode="sounds"] .s-subtab { min-height: 44px; }
  .board[data-mode="sounds"] .s-subtab svg { width: 21px; height: 21px; }

  .board[data-mode="quiz"] .q-head {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
  }
  .board[data-mode="quiz"] .q-head-tools { gap: 8px; }
  .board[data-mode="quiz"] .q-dots { display: none; }

  /* Ten half-tracks give both switches half the row while keeping the five
     circular tools in their original evenly spaced second row. */
  .board[data-mode="write"] .w-head.is-circle-tools {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .board[data-mode="write"] .is-circle-tools > * { grid-column: span 2; }
  .board[data-mode="write"] .is-circle-tools :is(#w-form, #w-guide) {
    grid-column: span 5;
    width: 100%;
    min-width: 0;
  }
}