/* i18n-switch.css v5 — per-note language switch, pure CSS, NO JavaScript. Reading view.
   WHY callouts (not <div>): Obsidian renders markdown inside callouts, raw inside a <div>.
   WHY <input> wrapped in <label> (no id/for): the note can be rendered TWICE in the DOM
     (edit + reading leaves) → duplicate ids → label[for] would toggle the wrong copy. Wrapping
     the radio inside its label removes ids entirely; clicking toggles the LOCAL radio.
   Structure (see raw/i18n-template.md):
     > [!i18n]
     > <label><input type="radio" name="UNIQUE" checked>EN</label><label><input type="radio" name="UNIQUE">中文</label>
     >
     > > [!lang]  (English markdown)
     > > [!lang]  (中文 markdown)
   Indexing: label:nth-of-type(n) holds the checked radio -> reveal the nth [!lang] pane.
   Needs :has() (Obsidian's Chromium is recent enough). Supports up to 3 languages. */
/* outer container — drop default callout chrome, keep a thin frame */
.corpus-content .callout[data-callout="i18n"] {
  padding: 0;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
}
.corpus-content .callout[data-callout="i18n"] > .callout-title { display: none; }
/* hide the radios themselves; the wrapping <label> is the visible button */
.corpus-content .callout[data-callout="i18n"] input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* the paragraph holding the language buttons -> a segmented control row, RIGHT-aligned */
.corpus-content .callout[data-callout="i18n"] > .callout-content > p:first-child {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end;
  border-bottom: 1px solid var(--background-modifier-border);
}
.corpus-content .callout[data-callout="i18n"] label {
  padding: 0.4em 1em; cursor: pointer;
  font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-muted); background: var(--background-secondary);
  border-left: 1px solid var(--background-modifier-border);
  user-select: none; transition: color .1s, background .1s;
}
.corpus-content .callout[data-callout="i18n"] label:hover { color: var(--text-normal); }
/* panes = nested [!lang] callouts; strip their chrome; hidden by default */
.corpus-content .callout[data-callout="i18n"] .callout[data-callout="lang"] {
  border: none; background: none; margin: 0; display: none;
}
.corpus-content .callout[data-callout="i18n"] .callout[data-callout="lang"] > .callout-title { display: none; }
.corpus-content .callout[data-callout="i18n"] .callout[data-callout="lang"] > .callout-content { padding: .7em 1.1em .3em; }
.corpus-content .callout[data-callout="i18n"] .callout[data-callout="lang"] .callout-content > :first-child { margin-top: 0; }
/* nth label holds the checked radio -> reveal nth pane + highlight nth label */
.corpus-content .callout[data-callout="i18n"]:has(label:nth-of-type(1) input[type="radio"]:checked) .callout[data-callout="lang"]:nth-of-type(1), .corpus-content .callout[data-callout="i18n"]:has(label:nth-of-type(2) input[type="radio"]:checked) .callout[data-callout="lang"]:nth-of-type(2), .corpus-content .callout[data-callout="i18n"]:has(label:nth-of-type(3) input[type="radio"]:checked) .callout[data-callout="lang"]:nth-of-type(3) {
  display: block;
}
.corpus-content .callout[data-callout="i18n"]:has(label:nth-of-type(1) input[type="radio"]:checked) label:nth-of-type(1), .corpus-content .callout[data-callout="i18n"]:has(label:nth-of-type(2) input[type="radio"]:checked) label:nth-of-type(2), .corpus-content .callout[data-callout="i18n"]:has(label:nth-of-type(3) input[type="radio"]:checked) label:nth-of-type(3) {
  color: var(--text-on-accent); background: var(--interactive-accent);
}
/* DEFAULT: reading view drops the `checked` attribute, so on first render nothing is checked.
   When NO radio is checked, show + highlight the first language. Clicking then takes over. */
.corpus-content .callout[data-callout="i18n"]:not(:has(input[type="radio"]:checked)) .callout[data-callout="lang"]:nth-of-type(1) {
  display: block;
}
.corpus-content .callout[data-callout="i18n"]:not(:has(input[type="radio"]:checked)) label:nth-of-type(1) {
  color: var(--text-on-accent); background: var(--interactive-accent);
}
/* ── language-switching TITLE ────────────────────────────────────────────────
   Markup:  # <span class="i18n-t">English Title</span><span class="i18n-t">中文标题</span>
   The visible span follows the note's [!i18n] radio state (nth language checked -> nth span);
   with nothing checked, the first span shows. Reading view only — in edit/Live-Preview both
   spans render side by side, which is the desired authoring view. Keep ONE [!i18n] block per
   note or the title follows whichever block was clicked last. */
.corpus-content .markdown-preview-sizer .i18n-t { display: none; }
.corpus-content .markdown-preview-sizer:not(:has(.callout[data-callout="i18n"] input[type="radio"]:checked)) .i18n-t:nth-of-type(1) {
  display: inline;
}
.corpus-content .markdown-preview-sizer:has(.callout[data-callout="i18n"] label:nth-of-type(1) input[type="radio"]:checked) .i18n-t:nth-of-type(1), .corpus-content .markdown-preview-sizer:has(.callout[data-callout="i18n"] label:nth-of-type(2) input[type="radio"]:checked) .i18n-t:nth-of-type(2), .corpus-content .markdown-preview-sizer:has(.callout[data-callout="i18n"] label:nth-of-type(3) input[type="radio"]:checked) .i18n-t:nth-of-type(3) {
  display: inline;
}
/* theorem-callouts.css — style custom callouts as math "theorem boxes".
   In a note:
     > [!theorem] Theorem 1
     > statement ...
     > [!proof]
     > argument ... (ends with an auto ∎)
   Custom types: theorem, lemma, corollary, proposition, definition,
   notation, remark, example, proof.
   Obsidian lets you invent ANY callout type via `> [!x]`; the CSS below
   just colors + icons them. No plugin. Renders as a plain blockquote
   anywhere the CSS isn't loaded (portable). */
/* --- theorem family (blue) --- */
.corpus-content .callout[data-callout="theorem"], .corpus-content .callout[data-callout="lemma"], .corpus-content .callout[data-callout="corollary"], .corpus-content .callout[data-callout="proposition"] {
  --callout-color: 79, 140, 230;          /* R, G, B — Obsidian's callout var */
}
.corpus-content .callout[data-callout="theorem"] { --callout-icon: lucide-badge-check; }
.corpus-content .callout[data-callout="lemma"] { --callout-icon: lucide-corner-down-right; }
.corpus-content .callout[data-callout="corollary"] { --callout-icon: lucide-git-branch; }
.corpus-content .callout[data-callout="proposition"] { --callout-icon: lucide-badge-check; }
/* theorem statements in italic (math convention) */
.corpus-content .callout[data-callout="theorem"]     .callout-content, .corpus-content .callout[data-callout="lemma"]       .callout-content, .corpus-content .callout[data-callout="corollary"]   .callout-content, .corpus-content .callout[data-callout="proposition"] .callout-content { font-style: italic; }
/* --- definition / notation (green) --- */
.corpus-content .callout[data-callout="definition"], .corpus-content .callout[data-callout="notation"] { --callout-color: 46, 160, 120; }
.corpus-content .callout[data-callout="definition"] { --callout-icon: lucide-book-open; }
.corpus-content .callout[data-callout="notation"] { --callout-icon: lucide-list; }
/* --- remark / example (amber) --- */
.corpus-content .callout[data-callout="remark"], .corpus-content .callout[data-callout="example"] { --callout-color: 200, 150, 60; }
.corpus-content .callout[data-callout="remark"] { --callout-icon: lucide-info; }
.corpus-content .callout[data-callout="example"] { --callout-icon: lucide-flask-conical; }
/* --- proof (grey, lighter, auto QED box) --- */
.corpus-content .callout[data-callout="proof"] {
  --callout-color: 150, 150, 150;
  --callout-icon: lucide-check;
  background: transparent;
  border-left-width: 2px;
}
.corpus-content .callout[data-callout="proof"] > .callout-content > :last-child::after {
  content: " \220E";                       /* ∎ */
  margin-left: 0.3em;
}