/* ---------------- the pair grid ----------------

   The sentence card as two rows: Hindi chunk on top, the English that means the
   same thing directly underneath, one column per pair.

   A real <table>, not a grid of divs, for two reasons that both matter:
   table layout sizes every column to its own content, so a three-word Hindi
   chunk gets the room it needs and "Hope" does not; and both rows share cell
   heights, so the rule between the languages stays straight even when one
   column wraps to three lines and its neighbour to one.

   Columns are capped at four by the renderer. Four is not a guess: the longest
   line in the deck has seven words, so four columns always fits a 380px phone.
   Anything longer wraps onto a second block. */

#learning-panel .lp-grid-host {
  width: 100%;
  display: flex;
  justify-content: center;
}

#learning-panel .lp-grid-group {
  width: 100%;
  max-width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#learning-panel .lp-grid {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border: 3px solid var(--lp-ink);
  border-radius: 16px;
  overflow: hidden;
  background: var(--lp-card);
  box-shadow: 5px 5px 0 var(--lp-ink);
}

#learning-panel .lp-grid .lp-cell {
  /* The chunk button owns the cell's padding, so the tappable area IS the cell.
     When the padding sat on the <td> instead, the button was only as tall as its
     own text - about 20px, half a fingertip - and two of them sat side by side,
     so a near miss opened the neighbouring chunk's audio. */
  padding: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 1.32;
  border-right: 1.5px solid var(--lp-muted);
  /* Never break a word down the middle. A column's floor is its longest word,
     which is exactly what keeps Devanagari intact. */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

#learning-panel .lp-grid .lp-cell:last-child { border-right: 0; }

#learning-panel .lp-grid-hi .lp-cell {
  background: #fffdf7;
  border-bottom: 2.5px solid var(--lp-ink);
}

#learning-panel .lp-grid-en .lp-cell { background: var(--lp-card); }

#learning-panel .lp-grid .lp-cell.is-hot { background: #fff6d6; }

/* --- the tappable chunks --- */

#learning-panel .lp-hi,
#learning-panel .lp-en {
  display: block;
  width: 100%;
  margin: 0;
  /* Fills the cell, so the whole chunk is the target and the row clears 44px. */
  padding: 11px 9px;
  min-height: 44px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s ease, color .12s ease;
}

#learning-panel .lp-hi {
  font-family: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  /* The Hindi is how he knows what the English means, and on a recall card it is
     the only readable clue on screen. It used to be the smallest, lightest, greyest
     text on the card - 13.5px at 4.8:1 against a 16:1 English line - which is
     backwards. Heavier and darker, so it reads as the meaning rather than a caption. */
  font-weight: 600;
  color: #5b5145;
}

#learning-panel .lp-en {
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--lp-ink);
}

#learning-panel .lp-cell.is-hot .lp-hi { color: var(--lp-ink); }

#learning-panel .lp-hi:hover,
#learning-panel .lp-en:hover { background: var(--lp-pale); }

#learning-panel .lp-hi:focus-visible,
#learning-panel .lp-en:focus-visible {
  outline: 3px solid var(--lp-accent);
  outline-offset: 2px;
}

/* The chunk being spoken. A highlight inside the cell, so the layout never
   shifts while the line plays. */
#learning-panel .lp-en.is-speaking {
  background: var(--lp-accent);
  color: var(--lp-paper);
}

#learning-panel .lp-hi.is-speaking {
  background: var(--lp-accent);
  color: var(--lp-paper);
}

/* --- spatial recall: the English is blanked, not removed ---
   The row keeps its width so he can see how many chunks the line has and how long
   each one is, which is the cue that actually helps him rebuild it. The blanks are
   plain paper with a hairline, not a blur: a blurred word is a puzzle about letter
   shapes, and squinting at it is not the skill we want him practising. Tapping a
   blank uncovers that one chunk. */

#learning-panel .lp-grid-host--mask .lp-en {
  color: transparent;
  text-shadow: none;
  background: repeating-linear-gradient(
    135deg,
    #f4ede1 0 6px,
    #eee4d4 6px 12px
  );
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px rgba(35, 32, 28, .16);
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}

#learning-panel .lp-grid-host--mask .lp-en.is-speaking {
  color: transparent;
  text-shadow: none;
}

#learning-panel .lp-grid-host--mask .lp-en.is-revealed {
  color: var(--lp-ink, #23201c);
  background: transparent;
  box-shadow: none;
  cursor: default;
  animation: lp-uncover .26s ease-out;
}

@keyframes lp-uncover {
  from { opacity: .35; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* Nothing here should look like an error. A blank is an invitation, and the
   accent is only spent on the word being spoken. */
#learning-panel .lp-grid-host--mask .lp-en:focus-visible {
  outline: 2.5px solid var(--lp-accent, #e85d2a);
  outline-offset: 2px;
}

/* --- ask-for-meaning: he only gets the Hindi, and must produce the English --- */

#learning-panel .lp-grid-host--hindi .lp-grid-en { display: none; }
#learning-panel .lp-grid-host--hindi .lp-grid-hi .lp-cell {
  border-bottom: 0;
  padding: 13px 11px 14px;
}
#learning-panel .lp-grid-host--hindi .lp-hi {
  font-size: 19px;
  color: var(--lp-ink);
  font-weight: 600;
}

/* --- narrow and short screens --- */

@media (max-width: 430px) {
  #learning-panel .lp-grid .lp-cell { padding: 0; }
  /* Was 13.5px, which made the same 390px card render smaller on his phone than on
     a laptop showing the identical card. The Hindi is not a caption. */
  #learning-panel .lp-hi { font-size: 15px; }
  #learning-panel .lp-en { font-size: clamp(15px, 4.6vw, 18px); }
  #learning-panel .lp-hi,
  #learning-panel .lp-en { padding: 10px 7px; }
}

@media (max-height: 620px) {
  #learning-panel .lp-grid-group { gap: 7px; max-width: min(340px, 92vw); }
  #learning-panel .lp-grid .lp-cell { padding: 0; }
  #learning-panel .lp-hi { font-size: 13px; line-height: 1.35; }
  #learning-panel .lp-en { font-size: 16px; }
  #learning-panel .lp-hi,
  #learning-panel .lp-en { padding: 7px 9px; min-height: 38px; }
  #learning-panel .lp-grid { box-shadow: 3px 3px 0 var(--lp-ink); border-width: 2.5px; }
}