/* Gentium Book Plus, served by internal/webfonts. */
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/gentium-regular.woff2") format("woff2"); }
@font-face { font-family: "Gentium Book Plus"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/gentium-italic.woff2") format("woff2"); }
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/gentium-bold.woff2") format("woff2"); }
:root {
  --bg: #f4f4f2; --panel: #e6e6e3; --panel-2: #d6d6d2; --text: #1b1b1b; --muted: #5b5b58;
  --link: #1b1b1b; --mark: #ffe866; --border: #c9c9c4;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161616; --panel: #222; --panel-2: #2d2d2d; --text: #e8e8e6; --muted: #a2a29e;
    --link: #e8e8e6; --mark: #6b5a00; --border: #3a3a38; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.55 "Gentium Book Plus", Georgia, "Noto Serif CJK SC", "Songti SC", serif;
}
a { color: var(--link); }
header { padding: 14px 16px 8px; font-size: 1.35rem; font-weight: bold; }
header .site { text-decoration: underline; }
header .sep, header .title { font-weight: normal; }
main { background: var(--panel); margin: 0 16px; padding: 12px 16px 20px; border-radius: 4px; overflow-x: auto; }
footer { padding: 10px 16px 20px; font-size: 0.85rem; }
footer nav a { white-space: nowrap; }
h2 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
h2:first-child { margin-top: 0.2em; }
h3 { font-size: 1rem; margin: 1em 0 0.3em; }
table { border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 3px 14px 3px 0; }
th { font-weight: normal; color: var(--muted); }
.details th { width: 10em; }
.results td { border-top: 1px solid var(--border); }
.results thead th { border-bottom: 1px solid var(--border); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.text { min-width: 20em; }
.big { font-size: 1.6rem; }
mark { background: var(--mark); color: inherit; padding: 0 1px; }
.forms { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.panel { background: var(--panel-2); padding: 10px 14px 14px; border-radius: 4px; flex: 1 1 22rem; max-width: 28rem; }
.panel h2 { text-align: center; margin: 0.2em 0 0.6em; }
.panel label { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; margin: 6px 0; }
.panel label.inline { display: inline-flex; gap: 0.3em; align-items: center; margin: 2px 1.2em 2px 0; white-space: nowrap; }
/* A fieldset is a two-column grid like the labels: the legend on the left,
   all its choices together on the right. */
.panel input:disabled, .panel select:disabled { opacity: 0.45; }
.panel label:has(> input:disabled, > select:disabled), .panel fieldset:has(input:disabled) legend { color: var(--muted); }
.panel .choices { display: flex; flex-wrap: wrap; align-items: center; }
.panel input[type=text], .panel select { width: 100%; font: inherit; font-size: 0.95rem; padding: 2px 4px; }
.panel fieldset { border: 0; padding: 0; margin: 8px 0; display: grid; grid-template-columns: 9.5em 1fr; }
.panel legend { float: left; color: inherit; padding: 0; align-self: center; }
.panel button { font: inherit; padding: 2px 16px; display: block; margin: 8px auto 0; }
.panel .buttons { display: flex; justify-content: center; gap: 0.6em; margin-top: 8px; }
.panel .buttons button { display: inline-block; margin: 0; }
.panel h3 { margin: 0.6em 0 0.2em; }
.hint, .note, .source { color: var(--muted); font-size: 0.85rem; }
.entry { margin: 0 0 0.5em; }
.pinyin { font-style: italic; }
.pager a { margin-right: 1.5em; }
.toc { margin-bottom: 1em; }
.examples dt { margin-top: 0.4em; }
.examples dd { margin-left: 1.5em; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; }
.notice { background: var(--panel-2); padding: 6px 10px; border-left: 3px solid var(--muted); }
@media (max-width: 600px) {
  .panel label, .panel fieldset { grid-template-columns: 1fr; }
  .details th { width: auto; }
}
.inline-form { margin: 1em 0; }
.inline-form input[type=number] { width: 7em; }
.inline-form input, .inline-form button { font: inherit; font-size: 0.95rem; }
.message { margin: 0.8em 0; }
.map { height: 70vh; min-height: 360px; border: 1px solid var(--border); }
body.fullmap { margin: 0; }
body.fullmap .map { position: fixed; inset: 0; height: auto; min-height: 0; border: 0; }
.map-switch { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000; margin: 0;
  background: var(--panel); padding: 4px 12px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.panel.wide { max-width: 48rem; }
.panel select[multiple] { width: 100%; font: inherit; font-size: 0.9rem; }
.sentence { margin: 0 0 1.2em; border-top: 1px solid var(--border); }
.interlinear td { padding: 0 0.9em 0 0; }
.gloss { color: var(--muted); }
.sc { font-variant: small-caps; text-transform: lowercase; }
.tabs a { margin-right: 0.6em; white-space: nowrap; font-weight: bold; }
.tabs a.active { text-decoration: none; }
.popup-title { text-align: center; }