/* Five Köy tabs share one scrollable strip, regardless of the active sub-tab. */
#panel .koy-subtabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
#panel .koy-subtabs button { flex: 0 0 auto; }

/* Medrese stays inside the existing Köy window and its mobile bottom sheet. */
#panel.research-wide { width: min(940px, calc(100vw - 32px)); }
.research-panel { color: var(--ink); }
.research-summary { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px; background: #e8ddbe; border-radius: 8px; }
.research-summary h3 { margin: 0 0 8px; font-size: 18px; }
.research-summary h3 small { font-size: 12px; font-weight: normal; }
.research-summary span, .research-help { font-size: 12px; }
.research-scholars { display: flex; gap: 10px; align-items: center; }
.research-scholars button, .research-node button { min-height: 44px; min-width: 44px; }
.research-help { line-height: 1.6; }
.research-notice { background: #f1dba1; padding: 10px; border-radius: 6px; }
.research-queue { padding: 8px 12px 12px; background: #eee3ca; border: 1px solid #bfa878; border-radius: 8px; }
.research-queue summary { cursor: pointer; min-height: 44px; font-size: 13px; line-height: 1.7; }
.research-queue ol { padding-left: 22px; }
.research-queue li { padding: 4px 0; }
.research-queue span, .research-queue small { display: block; font-size: 12px; line-height: 1.5; }
.research-tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.research-branch > ol { list-style: none; padding: 0; margin: 0; }
#panel .research-branch > h4 { text-align: center; font-size: 13px; margin: 18px 0 12px; }
.research-node { position: relative; border: 1px solid #b5a17e; border-radius: 8px; padding: 12px; margin-bottom: 26px; background: #f4ecd9; overflow-wrap: anywhere; }
/* Each connector joins a node to its sole prerequisite immediately above it. */
.research-node + .research-node::before { content: ''; position: absolute; height: 25px; width: 2px; background: #9c845b; left: calc(50% - 1px); top: -27px; }
.research-node + .research-node::after { content: ''; position: absolute; border: 5px solid transparent; border-top-color: #9c845b; left: calc(50% - 5px); top: -9px; }
.research-node h5 { font-size: 15px; margin: 10px 0 6px; }
.research-node p { font-size: 13px; line-height: 1.5; margin: 8px 0; }
.research-node small { display: block; font-size: 11px; line-height: 1.5; }
.research-node-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; font-size: 11px; }
.research-node.done { background: #e3e9d3; border-color: #6c8452; }
.research-node.active { background: #f5e0a8; border: 2px solid #967020; }
.research-node.queued { border-color: #967020; }
.research-node.locked { background: #e5dfd1; }
.research-node.open { border-color: #678675; }
.research-cost { margin: 8px 0; font-variant-numeric: tabular-nums; }
.research-node button { width: 100%; color: var(--ink); }
.research-reason, .research-dependency { margin-top: 8px; color: #665139; }
.research-timer { font-weight: bold; font-variant-numeric: tabular-nums; }
/* Match the shared bottom-sheet breakpoint and keep its tabs, safe areas and stacking. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  #panel.research-wide { width: auto; }
  .research-tree { grid-template-columns: 1fr; }
  .research-scholars { width: 100%; justify-content: space-between; }
}