/* SchoolCAD: second-language lines and word help (see js/i18n.js). */
:root {
  --alt-ink: #8a3d12;
  --term-line: #c46a1d;
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft YaHei UI", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --alt-ink: #f0b27a; --term-line: #e0954d; } }
:root[data-theme="dark"] { --alt-ink: #f0b27a; --term-line: #e0954d; }

/* the translation, shown under the English it belongs to */
[data-i18n-alt]::after {
  content: attr(data-i18n-alt);
  display: block; direction: var(--i18n-dir, ltr);
  margin-top: 1px; font: 400 0.92em/1.4 var(--font-cjk); color: var(--alt-ink);
  white-space: normal; text-decoration: none; letter-spacing: 0; text-transform: none;
}
html[data-alt-lang="zh-CN"] [data-i18n-alt]::after { font-family: var(--font-cjk); }
/* in a flex row (list items, labels with an input) the translation takes its own line */
[data-i18n-alt]:not(.btn):not(.tool):not(.mode) { flex-wrap: wrap; }
[data-i18n-alt]::after { flex-basis: 100%; grid-column: 1 / -1; }
.checks li[data-i18n-alt]::after { grid-column: 2; margin-top: -4px; }
/* cards with a sub-line (export buttons, menus): translation under the English, wrapping normally */
.export-grid .btn [data-i18n-alt]::after, .export-grid .btn[data-i18n-alt]::after, .menu-list button [data-i18n-alt]::after, .menu-list button[data-i18n-alt]::after { display: block; margin: 1px 0 0; white-space: normal; }
/* short labels in rows of buttons stay on one line: the translation sits beside the English */
.btn[data-i18n-alt]::after, .btn [data-i18n-alt]::after, .modes .mode[data-i18n-alt]::after, .seg button[data-i18n-alt]::after,
.about-link[data-i18n-alt]::after, .viewcube button[data-i18n-alt]::after, .statusbar [data-i18n-alt]::after {
  display: inline; margin: 0 0 0 0.35em; font-size: 0.95em; flex-basis: auto;
}
.btn.primary [data-i18n-alt]::after, .btn.primary[data-i18n-alt]::after, .ok-btn[data-i18n-alt]::after,
.seg button[aria-pressed="true"][data-i18n-alt]::after { color: inherit; opacity: 0.9; }
/* buttons in narrow panels: translation under the English, kept on one line */
.btn[data-i18n-alt]::after, .btn [data-i18n-alt]::after { white-space: nowrap; }
.lesson-bar .btn[data-i18n-alt], .lesson-head .btn[data-i18n-alt], .btn.small[data-i18n-alt] { flex-direction: column; gap: 0; line-height: 1.2; }
.lesson-bar .btn[data-i18n-alt]::after, .lesson-head .btn[data-i18n-alt]::after, .btn.small[data-i18n-alt]::after { display: block; margin: 0; font-size: 0.85em; }
/* toolbar: under the tool name, small */
.tool .tl[data-i18n-alt]::after { font-size: 10.5px; line-height: 1.25; text-align: center; }
.tool .tl { line-height: 1.2; }
html.i18n-on .tool { padding-bottom: 3px; }
/* headings keep their size for English, translation a little smaller */
h1[data-i18n-alt]::after, h2[data-i18n-alt]::after, h3[data-i18n-alt]::after { font-size: 0.8em; font-weight: 500; }
.menu-list button span[data-i18n-alt]::after { font-size: 0.9em; }

/* word help */
.i18n-term {
  text-decoration: underline dotted var(--term-line); text-decoration-thickness: 2px; text-underline-offset: 3px;
  cursor: help; border-radius: 3px;
}
.i18n-term:hover, .i18n-term[aria-expanded="true"] { background: color-mix(in srgb, var(--term-line) 16%, transparent); }
.i18n-term:focus-visible { outline: 2px solid var(--term-line); outline-offset: 1px; }

.i18n-pop {
  position: fixed; z-index: 1000; width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto;
  padding: 12px 14px 12px; border-radius: 10px; background: var(--panel, #fff); color: var(--ink, #1b1d22);
  border: 1px solid var(--line, #d5d9e0); box-shadow: 0 10px 34px rgba(20, 24, 33, 0.22); font-size: 14px; line-height: 1.45;
}
.i18n-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.i18n-x:hover { background: var(--panel-2); color: var(--ink); }
.i18n-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 28px; }
.i18n-card-head b { font-size: 17px; }
.i18n-def { margin: 4px 0 8px; }
.i18n-card-tr { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--term-line) 10%, var(--panel, #fff)); font-family: var(--font-cjk); }
.i18n-card-tr p { margin: 4px 0 0; }
.i18n-tr-term { font-size: 22px; color: var(--alt-ink); font-weight: 600; }
.i18n-pinyin { color: var(--muted); font-family: var(--font-ui); font-size: 14px; }
.i18n-say { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; }
.i18n-say:hover { border-color: var(--accent); color: var(--accent); }
.i18n-fig { display: grid; place-items: center; margin: 6px 0; padding: 6px; border-radius: 8px; background: var(--panel-2, #f6f7f9); color: var(--ink); }
.i18n-fig svg { width: 100%; max-width: 260px; height: auto; }
.i18n-aka { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }

/* language button and menu */
.i18n-btn.on { border-color: var(--accent); color: var(--accent); }
.i18n-menu { min-width: 300px; left: 0; right: auto; }
.i18n-menu button[role="menuitemradio"], .i18n-menu button[role="menuitemcheckbox"] { position: relative; padding-left: 30px; }
.i18n-menu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 10px; top: 8px; color: var(--accent); font-weight: 700; }
.i18n-menu button > span { font-weight: 600; }

/* word list */
.i18n-words-dlg { width: min(720px, calc(100vw - 32px)); }
.i18n-h-alt { font: 500 0.8em var(--font-cjk); color: var(--alt-ink); margin-left: 6px; }
.i18n-search { width: 100%; padding: 8px 10px; margin: 4px 0 10px; border: 1px solid var(--line); border-radius: var(--r, 6px); font: inherit; background: var(--panel); color: var(--ink); }
.i18n-wordlist { display: grid; gap: 6px; max-height: min(60vh, 560px); overflow: auto; padding-right: 4px; }
.i18n-word { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.i18n-word summary { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; cursor: pointer; }
.i18n-word summary span { font-family: var(--font-cjk); color: var(--alt-ink); }
.i18n-word[open] summary { border-bottom: 1px solid var(--line); }
.i18n-card { padding: 8px 12px 12px; }
.i18n-card .i18n-card-head { padding-right: 0; }

/* ?i18n=debug: outline English the language pack does not cover yet */
html.i18n-debug [data-i18n-miss] { outline: 1px dashed #d23; outline-offset: 1px; }

@media print { [data-i18n-alt]::after { content: none; } .i18n-pop, .i18n-btn { display: none; } }