/* MundaApp — the language sheet.
 *
 * The point of the screen is how much of each language is actually translated.
 * So the number is drawn, not mentioned: a figure on the right, a bar beneath
 * it, and a colour that separates finished from nearly finished from thin.
 * Its own file and its own address, so an older cached sheet cannot answer for
 * it and hide the change.
 */

.lg-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: 2px 0 14px;
  border-radius: 16px; overflow: hidden;
  background: #E7DCC0;
  box-shadow: 0 12px 22px -24px rgba(10, 30, 20, .9), 0 1px 2px rgba(23, 40, 30, .05);
}
.lg-stat {
  background: linear-gradient(180deg, #FFFDF7, #FBF5E6);
  padding: 11px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.lg-stat b {
  font-family: var(--display, Georgia, serif);
  font-size: 22px; line-height: 1; font-weight: 700;
  color: #0C4A30; font-variant-numeric: tabular-nums;
}
.lg-stat b i { font-style: normal; font-size: 12px; font-weight: 650; color: #6B7A6E; margin-left: 1px; }
.lg-stat span {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #8A9486; line-height: 1.25;
}

.lang-list { gap: 6px; }

.lang-row {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 22px;
  align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid #EDE4CE;
  background: linear-gradient(180deg, #FFFDF8, #FFFCF4);
  box-shadow: 0 10px 18px -22px rgba(10, 30, 20, .9), 0 1px 1px rgba(23, 40, 30, .04);
  overflow: hidden;
}
/* a hairline of colour on the left edge, in the language's own state */
.lang-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #D8CFB6;
}
.lang-row.is-full::before { background: linear-gradient(180deg, #12915A, #0B5B39); }
.lang-row.is-high::before { background: linear-gradient(180deg, #E7A63C, #C4811D); }
.lang-row.is-mid::before { background: linear-gradient(180deg, #D98C6A, #B4543A); }

.lr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-txt b {
  font-family: var(--display, Georgia, serif);
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: #16291F;
}
.lr-native { font-size: 11.5px; color: #7A8579; }

.lr-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lr-stat b {
  font-size: 13px; font-weight: 750; color: #0C4A30;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.lr-stat b i { font-style: normal; font-size: 9.5px; font-weight: 650; color: #7A8579; margin-left: 1px; }
.lr-bar {
  display: block; width: 54px; height: 4px; border-radius: 999px;
  background: #EAE2CC; overflow: hidden;
}
.lr-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #12915A, #0B5B39); }
.is-high .lr-bar i { background: linear-gradient(90deg, #F0B24C, #C4811D); }
.is-mid .lr-bar i { background: linear-gradient(90deg, #E09A76, #B4543A); }

.lr-mark { display: grid; place-items: center; width: 22px; height: 22px; }
.lr-mark svg { width: 16px; height: 16px; color: #0C6E42; stroke-width: 2.4; }

/* the chosen language: cream seal, gold edge — the same mark as the bottom bar */
.lang-row.on {
  background: linear-gradient(180deg, #FFFCF0, #FBF1DA);
  border-color: #E3C58A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 20px -18px rgba(120, 86, 20, .55);
}
.lang-row.on .lr-txt b { color: #0A4028; }
.lang-row.on .lr-mark {
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #12915A, #0A5334);
  box-shadow: 0 4px 9px -6px rgba(9, 50, 31, .9);
}
.lang-row.on .lr-mark svg { color: #FFFDF6; }

.dict-row {
  grid-template-columns: 1fr 22px;
  border-style: dashed; border-color: #DCD2B6;
  background: linear-gradient(180deg, #FFFDF6, #FBF7EA);
}
.dict-row .lr-mark, .dict-row::before { display: none; }
.dict-row b { font-family: var(--display, Georgia, serif); font-size: 15px; }

/* The app's base sheet sets `.lang-row span { display: grid }`; these say the
   same thing more precisely so the figure and its bar sit at the right edge
   instead of stretching across the row. */
.lang-row .lr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lang-row .lr-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lang-row .lr-mark { display: grid; place-items: center; width: 22px; height: 22px; }
.lang-row .lr-bar { display: block; width: 54px; height: 4px; border-radius: 999px; background: #EAE2CC; overflow: hidden; }
.lang-row .lr-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #12915A, #0B5B39); }
.lang-row.is-high .lr-bar i { background: linear-gradient(90deg, #F0B24C, #C4811D); }
.lang-row.is-mid .lr-bar i { background: linear-gradient(90deg, #E09A76, #B4543A); }