/* Mingo - ui/kit.css (agent C): styles for the ui/kit.js widgets. Needs ui/theme.css first (tokens).
   Size hooks a page may set on a container: --zh-size (sentence Chinese), --en-size (sentence English),
   --cousin-r-size / --cousin-says-size (Word Cousins). */

/* ---------- Word Cousins ---------- */
/* one row per language (ChineseCard SPEC 19), ONE line each: dot · label · the reading, one cell per syllable · and on the same row
   what people say (≈ X shifted, → X different). The headword's characters are not repeated under the syllables: the word is right
   above the rows. Rows are laid out by ONE grid per card (kit.readingRows -> .mg-readings-grid): column 1 = dot + name, then one
   equal column per headword character, then the note; each row is a subgrid of it, so the syllables of every language start at the
   same x (hoat / がく / 학 / học under one another), as do the names and the notes. The READING is the primary text (large, the
   language's colour), left-aligned in its column; dot, name, syllables and note share the readings' baseline. Always a single
   column of rows. A row on its own (no readingRows) is the same grid by itself. */
.mg-readings { min-width: 0; }
.mg-readings-grid {
  display: grid;
  width: max-content;
  max-width: 100%;
  /* in a box that fits its content, 1fr columns all take the widest cell of any of them: equal syllable columns */
  grid-template-columns: auto repeat(var(--n, 1), 1fr) auto;
  column-gap: var(--cousin-gap, 6px);
  row-gap: var(--readings-row-gap, var(--space-3));
  align-items: first baseline;
}
.mg-cousins {
  display: grid;
  grid-template-columns: auto repeat(var(--n, 1), minmax(0, max-content)) auto;
  column-gap: var(--cousin-gap, 6px);
  align-items: first baseline;   /* name, the readings and the note on the readings' baseline */
  min-width: 0;
  font-family: var(--font-reading);
  color: var(--fg);
}
.mg-readings-grid > .mg-cousins { grid-column: 1 / -1; grid-template-columns: subgrid; }
.mg-cousins-label {
  grid-column: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-right: var(--cousin-label-gap, 6px);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--fg-2);
  white-space: nowrap;
}
/* the name in a cell as wide as the longest name of its set (the other names stacked in the same cell, invisible) */
.mg-cousins-name { display: inline-grid; justify-items: start; }
.mg-cousins-name > * { grid-area: 1 / 1; }
.mg-cousins-sizer { visibility: hidden; }
.mg-cousins-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-new); flex: none; align-self: center; }
.mg-cousins[data-state="none"] .mg-cousins-dot { visibility: hidden; }
.mg-cousins[data-state="same"] .mg-cousins-dot { background: var(--cognate-same); }
.mg-cousins[data-state="shifted"] .mg-cousins-dot { background: var(--cognate-shifted); }
.mg-cousins[data-state="different"] .mg-cousins-dot { background: var(--cognate-different); }

/* the syllables: each one its own grid item, left-aligned in its column (the wrapper is only for the DOM) */
.mg-cousins-pairs { display: contents; }
.mg-cousin {
  display: grid;
  justify-items: start;
  min-width: 0;
}
/* each language's own colour (ui/theme.css --lang-*): the reading */
.mg-cousins { --cousin-color: var(--accent-text); }
.mg-cousins[data-lang="hok"] { --cousin-color: var(--lang-hok-text); }
.mg-cousins[data-lang="ja"] { --cousin-color: var(--lang-ja-text); }
.mg-cousins[data-lang="ko"] { --cousin-color: var(--lang-ko-text); }
.mg-cousins[data-lang="vi"] { --cousin-color: var(--lang-vi-text); }
.mg-cousin-r {
  display: block;
  font-family: var(--font-reading);   /* the strut: one line box for every language */
  font-size: var(--cousin-r-size, 24px);
  font-weight: var(--weight-semibold);
  color: var(--cousin-color);
  line-height: 1.2;
  white-space: nowrap;
}
.mg-cousin-rt { line-height: 0; }   /* the reading's own face adds no height to the line (it only draws) */
.mg-cousins[data-lang="hok"] .mg-cousin-rt,
.mg-cousins[data-lang="hok"] .mg-cousins-plain,
.mg-cousins[data-lang="hok"] .mg-cousins-target { font-family: var(--font-poj); }
.mg-cousins-plain {
  grid-column: 2 / -2;
  justify-self: start;
  white-space: nowrap;
  font-size: var(--cousin-r-size, 24px);
  font-weight: var(--weight-semibold);
  color: var(--cousin-color);
}
/* Japanese / Korean: kana / hangul on top in their own face; the romanization takes the same cell while the block is hovered or
   focused (both stacked in one grid area, so the width never changes and nothing moves) */
.mg-swap { display: inline-grid; justify-items: start; }
.mg-swap > * { grid-area: 1 / 1; }
.mg-swap-rom { visibility: hidden; font-family: var(--font-reading); }
.mg-cousins:focus-visible .mg-swap-rom { visibility: visible; }
.mg-cousins:focus-visible .mg-swap-native { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .mg-cousins:hover .mg-swap-rom { visibility: visible; }
  .mg-cousins:hover .mg-swap-native { visibility: hidden; }
}
@media (hover: none) {
  .mg-cousins[tabindex]:focus .mg-swap-rom { visibility: visible; }
  .mg-cousins[tabindex]:focus .mg-swap-native { visibility: hidden; }
}
.mg-cousins[tabindex] { border-radius: var(--radius-sm); }
.mg-cousins[tabindex]:focus-visible { box-shadow: var(--focus-ring); }
.mg-cousins[data-state="different"] .mg-cousin-r,
.mg-cousins[data-state="different"] .mg-cousins-plain { color: var(--fg-2); }
.mg-cousins-says {
  grid-column: -2 / -1;
  justify-self: start;
  min-width: 0;
  margin-left: var(--cousin-label-gap, 6px);
  font-size: var(--cousin-says-size, var(--text-md));
  color: var(--fg-2);
  white-space: nowrap;
}
/* not enough room beside the syllables: the note goes under its row's syllables, starting at the first syllable column */
.mg-readings-grid[data-notes="under"] .mg-cousins-says {
  grid-column: 2 / -1;
  grid-row: 2;
  justify-self: stretch;
  contain: inline-size;   /* adds no width of its own: it wraps inside its block's character columns */
  margin: 2px 0 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mg-cousins-arrow { color: var(--fg-3); }
.mg-cousins[data-state="different"] .mg-cousins-arrow { color: var(--danger); }
.mg-cousins[data-state="different"] .mg-cousins-target { color: var(--fg); }
.mg-cousins-target :lang(zh) { font-family: var(--font-zh); }


/* ---------- status buttons: a segment track (New · Learning · Known) ---------- */
/* ChineseCard's segment (SPEC 51) with the status rings of SPEC 17/18: the track is a glass-in capsule; exactly ONE segment looks
   selected - the raised capsule (GlassInHover, hairline, the light from above, a soft lift) with its label in the text colour. The dot
   keeps its status colour in every state: a hollow ring, filled with that same colour when selected. Hover = a quiet ground change on
   the OTHER segments only; the selected one shows nothing and a click on it does nothing (kit.statusButtons). */
.mg-status {
  display: inline-flex;
  align-self: flex-start;
  width: max-content;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--glass-edge);
}
.mg-status-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--seg-h);
  height: var(--seg-h);
  min-width: 0;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  --press-bg: var(--press-quiet);
}
/* the hit area reaches 44 px tall whatever the drawn height */
.mg-status-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--tap); transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
  .mg-status-btn:hover { background: var(--fill-quiet); color: var(--fg); }
}
.mg-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--mg-st); background: transparent; flex: none;
}
.mg-status-btn[data-status="new"] { --mg-st: var(--status-new); }
.mg-status-btn[data-status="learning"] { --mg-st: var(--status-learning); }
.mg-status-btn[data-status="known"] { --mg-st: var(--status-known); }
.mg-status-btn[aria-pressed="true"],
.mg-status-btn[aria-pressed="true"]:hover {
  --press-bg: var(--surface-hover);   /* the current status: a click on it does nothing, so it does not press either */
  background: var(--surface-hover);
  border-color: var(--glass-edge);
  color: var(--fg);
  font-weight: var(--weight-semibold);
  cursor: default;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(0, 0, 0, 0.10);
}
.mg-status-btn[aria-pressed="true"] .mg-status-dot { background: var(--mg-st); }
.mg-status-btn:focus-visible { box-shadow: var(--focus-ring); }
.mg-status-btn[aria-pressed="true"]:focus-visible { box-shadow: inset 0 1px 0 var(--glass-hi), var(--focus-ring); }

/* ---------- sentence ---------- */
.mg-sentence { display: flex; flex-direction: column; gap: var(--space-3); }
.mg-zh {
  font-family: var(--font-zh);
  font-size: var(--zh-size, 24px);
  line-height: 1.9;
  color: var(--fg);
}
.mg-sentence[data-pinyin="off"] .mg-zh { line-height: 1.6; }
.mg-chunk { position: relative; border-radius: var(--radius-xs); outline: none; }
.mg-chunk + .mg-chunk { margin-left: 0.18em; }
.mg-w { display: inline; }
.mg-w + .mg-w { margin-left: 0.08em; }
.mg-chunk-lined .mg-core {
  text-decoration-line: underline;
  text-decoration-color: var(--chunk);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: none;
}
.mg-target .mg-core { color: var(--accent-text); }
.mg-particle .mg-core, .mg-punct { color: var(--fg-3); }
.mg-zh ruby, .mg-zh rt { ruby-align: center; }
.mg-zh rt {
  font-family: var(--font-reading);
  font-size: max(10px, calc(var(--zh-size, 24px) * 0.5));
  font-weight: var(--weight-regular);
  color: var(--fg-3);
  letter-spacing: 0;
  line-height: 1.2;
  padding-bottom: 0.15em;
}
.mg-target rt { color: var(--accent-text); }
/* an atomic box: Chrome's ruby justification would otherwise pull a font-decomposed ā apart */
/* padding = a guard: two neighbouring pinyins wider than their words never touch (ChineseCard Size.RubyGuard) */
.mg-rt { display: inline-block; white-space: nowrap; padding: 0 0.2em; }

.mg-chunk[tabindex]:focus-visible .mg-core { background: var(--fill-quiet); border-radius: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mg-chunk[tabindex]:hover .mg-core { background: var(--fill-quiet); border-radius: 3px; }
}
.mg-chunk[tabindex]:focus-visible { box-shadow: var(--focus-ring); }
.mg-gloss {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  z-index: 20;
  transform: translate(-50%, 0);
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-reading);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;   /* shown and hidden at once: never a fade (the owner) */
}
/* the gloss shows while a mouse is over the chunk or the keyboard is on it - a mouse click never pins it; on a touch screen (no
   hover) a tap shows it until the next tap elsewhere */
.mg-chunk:focus-visible > .mg-gloss { visibility: visible; }
@media (hover: hover) and (pointer: fine) { .mg-chunk:hover > .mg-gloss { visibility: visible; } }
@media (hover: none) { .mg-chunk:focus > .mg-gloss { visibility: visible; } }
.mg-en {
  font-family: var(--font-reading);
  font-size: var(--en-size, var(--text-base));
  color: var(--fg-2);
  line-height: 1.5;
}
.mg-en-span {
  color: var(--fg);
  text-decoration-line: underline;
  text-decoration-color: var(--chunk);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- mark ---------- */
.mg-mark, .mg-glyph { display: inline-block; flex: none; vertical-align: middle; }