/* 语源脑（origins.html）：左边 3D 时间树，右边面板；配色、字体、面板里的组件都沿用 app.css */
body.origins { height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--ink-1); font-family: var(--font-ui); }
.or-top {
  display: flex; align-items: center; gap: 18px; padding: 10px var(--gutter); padding-top: max(10px, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line); background: var(--bg); min-height: 56px; box-sizing: border-box;
}
.or-logo { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.or-logo:hover { color: var(--blue); }
.or-top h1 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 20px/1.2 var(--font-word); white-space: nowrap; }
.or-top h1 .ms { color: var(--blue); font-size: 22px; }
.or-top .or-fb { flex: none; }
.or-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; margin-inline-start: auto; padding: 0 12px; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); }
.or-search .ms { font-size: 19px; color: var(--ink-3); }
.or-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink-1); }
.or-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.or-main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: calc(100% - 57px); min-height: 0; }
.or-stage { position: relative; overflow: hidden; border-inline-end: 1px solid var(--line); min-height: 0; background: radial-gradient(ellipse at 40% 30%, var(--bg) 0%, var(--bg-soft) 100%); }
#or-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#or-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* 标签：语言名（有脑的语言深色加粗；古语浅色斜体）、时间刻度、词族里的词 */
.or-lb { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; line-height: 1.2; color: var(--ink-2); will-change: transform; }
button.or-lb { pointer-events: auto; cursor: pointer; border: 0; background: none; padding: 1px 4px; border-radius: 5px; font: inherit; font-size: 12px; }
button.or-lb:hover { background: var(--bg); color: var(--blue); box-shadow: var(--shadow); }
.or-lb.brain { font-weight: 700; font-size: 13px; color: var(--ink-1); }
.or-lb.old { color: var(--ink-3); font-style: italic; }
/* 隐藏的古语名字：看不见也点不到（v0.11 加 visibility，淡出结束后才隐藏） */
#or-labels:not(.near) .or-lb.old { opacity: 0; pointer-events: none; visibility: hidden; }
.or-lb.old { transition: opacity .2s, visibility .2s; }
.or-lb.tick { font-size: 10.5px; color: var(--ink-3); transform-origin: right center; }
.or-lb.word { padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.or-lb.word.mine { color: var(--ink-1); border-color: var(--line-strong); }
.or-lb.word.lit { color: #fff; background: var(--blue); border-color: var(--blue); }
.or-lb.word.learning { border-color: var(--blue-line); color: var(--blue-600); }
.or-lb.word.root { font-weight: 700; }

.or-results { position: absolute; z-index: 5; top: 10px; inset-inline-end: 12px; width: min(360px, calc(100% - 24px)); max-height: 60%; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
/* 搜索结果（v0.11）：选项本身就是 option（焦点留在搜索框里，方向键移动高亮的那一项） */
.or-results li[role="option"] { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-1); }
.or-results li[role="option"]:hover, .or-results li.active { background: var(--bg-soft); }
.or-results li.active { box-shadow: inset 3px 0 0 var(--blue); }
.or-results li.none { cursor: default; }
.or-results b { font-size: 16px; }
.or-results span { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-results .none { padding: 10px; font-size: 13px; color: var(--ink-3); }

.or-legend { position: absolute; inset-inline-start: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 14px; padding: 7px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 90%, transparent); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.or-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.or-legend i { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--blue); }
.or-legend i.lg-bor { border-top-style: dashed; border-top-color: #ea580c; }
.or-legend i.lg-lit { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--blue); }
.or-ctl { position: absolute; inset-inline-end: 14px; bottom: 14px; display: flex; gap: 8px; }
.or-ctl button[aria-pressed="true"] { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
/* 3D 起不来 / 中断时的说明（v0.11）：在画面中间；起不来时 3D 的图例和按钮都收起来 */
.or-glmsg { position: absolute; z-index: 4; inset-inline: 16px; top: 50%; transform: translateY(-50%); max-width: 420px; margin: 0 auto; padding: 16px 18px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.or-glmsg p { margin: 0 0 10px; }
.or-glmsg p:last-child { margin-bottom: 0; }
.or-stage.no3d .or-legend, .or-stage.no3d .or-ctl, .or-stage.no3d #or-canvas { display: none; }

.or-panel { overflow-y: auto; padding: 18px 26px 32px; min-height: 0; }
.or-panel .w-word.hubword { font-size: 34px; line-height: 1.15; overflow-wrap: anywhere; }
/* 每个视图的标题（v0.11）：换视图时焦点移到这里（tabindex=-1），用键盘时显示焦点框 */
.or-panel h2.w-head { margin-bottom: 0; font: inherit; }
.or-focus:focus { outline: none; }
.or-focus:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
/* 播报区（v0.11 复查）：看不见，读屏在焦点不在面板里换视图时读出新视图的标题 */
.or-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.or-fail p { margin: 0 0 12px; line-height: 1.55; }
.or-fail .btn { display: inline-flex; align-items: center; gap: 6px; }
.or-note.or-err { padding: 12px 14px; color: var(--ink-2); }
.or-note.or-err .ms { color: var(--red); }
.or-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--bg-soft); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.or-note p { margin: 0; }
.or-note .ms { color: var(--orange-ink); font-size: 20px; }
.or-brains, .or-waves { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.or-brains li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; background: var(--bg-soft); font-size: 14px; }
.or-brains a { color: var(--ink-1); font-weight: 600; text-decoration: none; }
.or-brains a:hover { color: var(--blue); }
.or-brains span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.or-waves button { display: grid; gap: 2px; width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); text-align: start; font: inherit; cursor: pointer; }
.or-waves button:hover { border-color: #fdba74; }
.or-waves b { font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
.or-waves span { font-size: 12px; color: var(--ink-3); }
/* 家谱：按代缩进 */
.or-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.or-tree li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; padding: 6px 10px; padding-inline-start: calc(10px + var(--d) * 16px); border-radius: 8px; background: var(--bg-soft); font-size: 13px; }
.or-tree .or-lang { color: var(--ink-3); font-size: 12px; min-width: 7em; }
.or-tree b { font-size: 16px; font-weight: 600; color: var(--ink-1); }
.or-gl { color: var(--ink-2); font-size: 12.5px; }
.or-how { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--bg); color: var(--ink-3); border: 1px solid var(--line); }
.or-how.bor, .or-how.wasei, .or-how.sino { color: var(--orange-ink); border-color: #fcd9a8; }
.or-how.inf { border-style: dashed; }
.or-st { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.or-st .ms { font-size: 15px; }
.or-st.lit { color: var(--blue); font-weight: 600; }
.or-st.learning { color: var(--blue-600); }
a.or-st.open { color: var(--ink-2); text-decoration: none; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); }
a.or-st.open:hover { color: var(--blue); border-color: var(--blue-line); }
.or-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.or-chain button { padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-1); }
.or-chain button:hover { border-color: var(--blue-line); color: var(--blue); }
.or-chain button[aria-current="true"] { border-color: var(--blue-line); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.or-chain .ms { font-size: 16px; color: var(--ink-3); }
.or-err { padding: 24px; color: var(--red); }

@media (max-width: 860px) {
  body.origins { overflow: auto; height: auto; }
  .or-top { flex-wrap: wrap; gap: 8px 14px; padding-inline: 16px; }
  .or-search { order: 3; flex-basis: 100%; max-width: none; margin-inline-start: 0; }
  .or-main { display: block; height: auto; }
  .or-stage { height: 58vh; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .or-panel { padding: 16px; overflow: visible; }
  .or-legend { inset-inline-end: 64px; }
  /* 没有 3D：不留一大块空白，说明直接排在面板上面 */
  .or-stage.no3d { height: auto; display: flex; flex-direction: column; }
  .or-stage.no3d .or-glmsg { position: static; transform: none; margin: 16px; max-width: none; }
  /* 没有 3D 时舞台只有说明那么高（v0.11 第二轮）：结果列表不再浮在舞台里（最多舞台的 60%，一次只看得见两条，还盖住说明），
     排在说明上面、紧挨着搜索框，高度按屏幕算 */
  .or-stage.no3d .or-results { position: static; order: -1; width: auto; max-height: min(60vh, 420px); margin: 12px 16px 0; }
}

/* 测验 */
.or-quiz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 16px; }
.or-quiz-cta .btn { display: inline-flex; align-items: center; gap: 6px; }
.or-quiz-cta span { font-size: 13px; color: var(--ink-2); }
.or-qhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.or-qhead span:first-child { font-weight: 600; color: var(--ink-1); }
.or-qhead .icon-btn { margin-inline-start: auto; }
.or-opts .t b { font-size: 17px; font-weight: 600; }
p.or-st { margin: 6px 0; }