/* Mingo - newtab.css. The card (.mc-*, shared with the popup and the side panel, which link this file and then popup.css) and the new-tab
   page around it (.nt-*). The new tab is ChineseCard's LARGER VIEW look (SPEC section 51): the warm paper ground, the card as one quiet
   glass-in panel (radius 16, a hairline, the light from above, no drop shadow), the word over its pinyin at the left like the Word page,
   the readings, the sentence in its well, and ‹ status › centred. Tokens from ui/theme.css, widgets from ui/kit.css. */

/* ---------- the card ---------- */
.mc { width: 100%; }
.mc-card {
  --word-size: var(--text-4xl);
  --cousin-r-size: var(--text-md);
  --cousin-zh-size: 24px;
  --zh-size: 28px;
  --en-size: var(--text-md);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7) var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-xl);
  box-shadow: var(--edge-in);
}

/* meta row: the level and the rarity as quiet tags, the way to the larger view at the right */
.mc-meta { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.mc-spacer { flex: 1; }
.mc-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-edge);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  white-space: nowrap;
}
.mc-open {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 0 10px;
  margin-right: -10px;
  border-radius: var(--radius-pill);
  color: var(--fg-2);
  font-size: var(--text-sm);
}
.mc-open:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.mc-open .mc-icon { opacity: 0.8; }

/* the head: the word at the left, its pinyin + speaker and the meaning beside it (ChineseCard's card head, SPEC 50) */
.mc-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-5);
  align-items: center;
}
.mc-word {
  grid-row: 1 / 3;
  font-family: var(--font-zh);
  font-size: var(--word-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.mc-pyrow { display: flex; align-items: center; gap: 4px; min-height: 36px; align-self: end; }
.mc-py { font-family: var(--font-reading); font-size: 22px; color: var(--fg-2); font-weight: var(--weight-regular); }
.mc-speak, .mc-nav, .mc-mini {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid transparent; background: transparent;
  color: var(--fg-3);
  border-radius: var(--radius-pill);
  min-height: 0; min-width: 0;
}
.mc-speak { width: 32px; height: 32px; }
.mc-speak:hover, .mc-mini:hover:not(:disabled) { background: var(--surface-2); border-color: var(--glass-edge); color: var(--fg); }
.mc-speak:focus-visible, .mc-nav:focus-visible, .mc-mini:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.mc-en { align-self: start; max-width: 36em; font-size: var(--text-md); color: var(--fg); line-height: 1.45; }
.mc-pos { margin-right: 6px; color: var(--fg-2); }
.mc-pos::after { content: ' ·'; }

/* Word Cousins: the readings, one block per language, two columns, under a hairline */
.mc-cousins { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.mc-cousin-rows { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); align-items: start; }

/* the sentence well (SPEC 50): the glass-in fill inside its hairline, the pager at its foot */
.mc-sent {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--edge-in);
}
.mc-sent .mg-sentence { gap: var(--space-2); min-height: 5.6em; }
.mc-sent .mg-zh { line-height: 2.05; }
.mc-pager { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-right: calc(-1 * var(--space-3)); }
.mc-mini { width: 32px; height: 32px; }
.mc-mini:disabled { opacity: 0.35; cursor: default; }
.mc-pager-n { min-width: 3.4em; text-align: center; font-size: var(--text-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.mc-pager-n b { color: var(--fg-2); font-weight: var(--weight-semibold); }
/* while its sentence loads the well is simply empty (no skeleton) */
.mc-sent-wait { min-height: 5.6em; }
.mc-sent-wait span { display: none; }

/* footer: ‹ status ›, centred (SPEC 16 / 18); the arrows are round glass-in buttons like the Word page's */
.mc-foot { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.mc-nav {
  width: 36px; height: 36px;
  color: var(--fg-2);
  border-color: var(--glass-edge);
  background: var(--surface-2);
}
.mc-nav:hover:not(:disabled) { background: var(--surface-hover); color: var(--fg); }
.mc-nav:disabled { opacity: 0.35; cursor: default; }
.mc-foot .mg-status { align-self: center; }

/* empty + waiting */
.mc-empty { align-items: flex-start; gap: var(--space-3); padding: var(--space-7); }
.mc-empty-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.mc-empty-text { color: var(--fg-2); }
.mc-empty-link { display: inline-flex; align-items: center; min-height: var(--control-h); }
.mc-waiting { min-height: 420px; }
.mc-skel { display: none; }

/* ---------- the new tab page ---------- */
body.nt {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}
.nt-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; max-width: 868px; margin: 0 auto;
  padding: var(--space-5) var(--space-6) 0;
}
.nt-brand { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h); color: var(--fg); border-radius: var(--radius-sm); }
.nt-brand:hover { text-decoration: none; }
.nt-brand-mark { display: inline-flex; }
.nt-brand-name { font-size: 15px; font-weight: var(--weight-semibold); }
.nt-nav { display: flex; gap: 6px; }
.nt-nav a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border: 1px solid var(--glass-edge); border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--fg-2); font-size: var(--text-sm);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nt-nav a:hover { color: var(--fg); background: var(--surface-hover); text-decoration: none; }
.nt-main { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-6) var(--space-7); }
.nt-main .mc { max-width: 820px; }

/* ---------- first run: which languages do you know? (ChineseCard's setup page, SPEC 54: a question on the ground, one panel of chips,
   the one filled button) ---------- */
.mw {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  align-content: start;
  justify-items: start;
  width: min(820px, 100%); margin: 0 auto;
  position: relative;
  isolation: isolate;
}
.mw-mark { display: none; }
/* the name reads 明 in each chosen language (Mingo, Bêng-o, Mei-o, Myeong-o, Minh-o): a plain swap, never a fade */
.mw-name { grid-row: 1; grid-column: 1; font-size: 28px; font-weight: var(--weight-bold); line-height: 1.2; color: var(--fg); min-height: 1.2em; margin: 0 0 4px 15px; }
.mw-q { grid-row: 2; grid-column: 1; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin: 0 0 14px 15px; }
/* the panel under the chips, the line and the button: drawn behind rows 3 to 5 of the grid */
.mw::before {
  content: ''; grid-row: 3 / 6; grid-column: 1; justify-self: stretch; align-self: stretch; z-index: -1;
  background: var(--surface-2); border: 1px solid var(--glass-edge); border-radius: var(--radius-md); box-shadow: var(--edge-in);
}
.mw-chips { grid-row: 3; grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 22px 0; }
.mw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--control-h); padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--glass-edge); background: var(--surface-2); color: var(--fg-2);
  font-size: var(--text-base); font-weight: var(--weight-regular);
}
.mw-chip:hover { background: var(--surface-hover); color: var(--fg); }
.mw-chip[aria-pressed="true"] { border-color: var(--current); background: var(--surface-hover); color: var(--fg); box-shadow: inset 0 0 0 0.5px var(--current); }
.mw-chip-native { font-weight: var(--weight-semibold); }
.mw-chip[data-lang="hok"] .mw-chip-native { color: var(--lang-hok-text); }
.mw-chip[data-lang="vi"] .mw-chip-native { color: var(--lang-vi-text); }
.mw-chip[data-lang="ja"] .mw-chip-native { color: var(--lang-ja-text); }
.mw-chip[data-lang="ko"] .mw-chip-native { color: var(--lang-ko-text); }
.mw-none { color: var(--fg-2); }
.mw-payoff { grid-row: 4; grid-column: 1; min-height: 1.5em; margin: 12px 22px 0; font-size: var(--text-sm); color: var(--fg-2); }
.mw-go { grid-row: 5; grid-column: 1; margin: 18px 22px 22px; min-height: 34px; min-width: 120px; padding: 0 22px; font-size: var(--text-sm); }
/* disabled Continue: a glass-in capsule, never a pastel of the filled one */
.mw-go:disabled, .mw-go:disabled:hover { opacity: 1; background: var(--surface-2); border-color: var(--glass-edge); color: var(--fg-3); font-weight: var(--weight-regular); }
.mw-compact { width: 100%; padding: var(--space-4) var(--space-4) 0; }
.mw-compact .mw-name { font-size: 22px; margin-left: 13px; }
.mw-compact .mw-q { grid-row: 2; grid-column: 1; font-size: var(--text-md); margin-left: 13px; margin-bottom: 10px; }
.mw-compact .mw-chips { padding: 14px 14px 0; gap: 6px; }
.mw-compact .mw-chip { font-size: var(--text-sm); padding: 0 12px; }
.mw-compact .mw-payoff { margin: 10px 14px 0; font-size: var(--text-xs); }
.mw-compact .mw-go { margin: 14px 14px 14px; }

/* shorter screens (1280 × 720): a tighter rhythm, a smaller word */
@media (max-height: 800px) {
  .nt-top { padding-top: var(--space-3); }
  .nt-main { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .mc-card { --word-size: 60px; --zh-size: 24px; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-3); }
  .mc-cousins { padding-top: var(--space-3); }
  .mc-sent { padding: var(--space-3) var(--space-5) var(--space-1); }
  .mc-sent .mg-sentence { min-height: 5em; }
}
@media (max-width: 640px) {
  .mc-card { padding: var(--space-5); }
  .mc-cousin-rows { grid-template-columns: 1fr; }
  .nt-top { padding: var(--space-3) var(--space-4) 0; }
}