/* mayek_reader.css — the romanised read-along on e-pao Meitei Mayek news.
 *
 * Every rule is namespaced mm-. The reader is dropped into a page that was
 * written in 2001 and has been edited by many hands since; a bare tag or class
 * selector here would reach into the news itself, and the one thing this must
 * never do is change the article it sits above.
 */

/* The fonts are already declared by GPM.asp. Repeated here so the local mock
   and any future page get them too — same URLs, so the browser reuses the
   file it already has rather than fetching a second copy. */
@font-face {
  font-family: ratha;
  src: url('/fonts/ratha.ttf') format('truetype');
  font-display: swap;
}

/* ---- the launch bar ----------------------------------------------------- */
.mm-launch {
  margin: 0 0 12px 0;
  padding: 10px 12px;
  background: #eef4fa;
  border: 1px solid #cfe0ef;
  border-left: 4px solid #2f6fa8;
  border-radius: 3px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.mm-hint { color: #40607a; margin-left: 10px; }
.mm-warn { color: #a33; }

/* ---- buttons ------------------------------------------------------------ */
.mm-btn {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  padding: 5px 12px;
  margin: 0 3px 0 0;
  color: #fff;
  background: #2f6fa8;
  border: 1px solid #275c8c;
  border-radius: 3px;
  cursor: pointer;
}
.mm-btn:hover { background: #3b83c2; }
.mm-btn:disabled { background: #8fa8bd; border-color: #8fa8bd; cursor: default; }

/* ---- the panel ---------------------------------------------------------- */
.mm-wrap {
  margin: 0 0 16px 0;
  border: 1px solid #cfe0ef;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}

.mm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #2f6fa8;
  color: #fff;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}
.mm-title { font-weight: bold; margin-right: auto; }
.mm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mm-bar .mm-btn { background: #1d4f79; border-color: #17405f; }
.mm-bar .mm-btn:hover { background: #2a6294; }

.mm-speed { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px; }
.mm-speed input { width: 90px; vertical-align: middle; }

.mm-body { padding: 14px 16px 4px 16px; }

.mm-foot {
  padding: 8px 16px 10px 16px;
  color: #6a7d8c;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  border-top: 1px solid #eef2f5;
}

/* ---- the text itself ----------------------------------------------------
 * This is the part people actually read, so it is set like body copy and not
 * like a debugging dump: generous line height, a comfortable measure, and a
 * serif face, because a long article in Verdana is a wall. */
.mm-body h3, .mm-body p { margin: 0 0 13px 0; }

.mm-rom {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.75;
  color: #1c1c1c;
}
.mm-body h3.mm-rom { font-size: 18px; line-height: 1.5; color: #123; }

/* The Mayek line, when it is shown. Directly ABOVE its romanised line rather
   than in a column beside it: two columns drift out of step within a
   paragraph or two, and then the reader is hunting rather than reading. */
.mm-may {
  font-family: ratha, serif;
  font-size: 17px;
  line-height: 1.7;
  color: #55636e;
  margin-bottom: 2px !important;
}
.mm-pair { margin-bottom: 14px; padding-bottom: 4px; }
.mm-is-paired .mm-pair + .mm-pair { border-top: 1px solid #f0f3f6; padding-top: 10px; }

/* ---- words -------------------------------------------------------------- */
.mm-w { border-radius: 2px; padding: 0 1px; cursor: pointer; }
.mm-w:hover { background: #eef6fc; }

/* The word the read-along is on. Underline as well as colour, because a fair
   number of readers will not reliably see the colour. */
.mm-on {
  background: #ffe9a8;
  box-shadow: 0 1px 0 #c99700 inset, 0 -2px 0 #c99700 inset;
}

/* A word recovered as English. Deliberately faint — on the proof sheet this is
   the whole point, but for someone just reading the news it is furniture, and
   a page of highlighted words is harder to read than a page of plain ones. */
.mm-got { color: #143d5c; }

.mm-typo {
  color: #b00;
  opacity: .65;
  text-decoration: line-through;
  font-size: .9em;
  margin-left: 1px;
}

/* ---- phones ------------------------------------------------------------- */
@media (max-width: 640px) {
  .mm-bar { font-size: 11px; }
  .mm-title { width: 100%; margin-bottom: 4px; }
  .mm-speed { display: none; }        /* the slider is unusable at this width */
  .mm-body { padding: 12px 12px 2px 12px; }
  .mm-rom { font-size: 16px; }        /* bigger, not smaller: this is the text */
  .mm-body h3.mm-rom { font-size: 17px; }
  .mm-hint { display: block; margin: 6px 0 0 0; }
}