.research-scroll { overflow:auto; flex:1; height:auto; min-height:0; overscroll-behavior:contain; touch-action:none; cursor:grab; border-block:1px solid var(--line); }
.research-scroll.is-panning { cursor:grabbing; user-select:none; }
.research-extent { position:relative; overflow:hidden; }
.research-canvas { position:relative; transform-origin:0 0; background-image:radial-gradient(#67727b30 1px,transparent 1px); background-size:16px 16px; }
.research-connectors { position:absolute; inset:0; pointer-events:none; }
.research-edge { fill:none; stroke:var(--muted); stroke-width:1.5; }
.research-edge.satisfied { stroke:var(--accent-soft); stroke-width:2; }
.research-node { position:absolute; width:310px; height:190px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:14px; text-align:left; background:var(--panel-alt); border:1px solid var(--line); }
.research-node small { font-size:9px; letter-spacing:.5px; color:var(--muted); }
.research-node strong { font-size:15px; color:var(--paper); font-weight:500; }
.research-node>span { font-size:10px; color:var(--muted); line-height:1.4; }
.research-node .research-effect { color:var(--text); }

.research-node.available { border:2px solid var(--accent-soft); background:var(--panel); box-shadow:inset 4px 0 var(--accent-soft),0 0 12px color-mix(in srgb,var(--accent-soft) 17%,transparent); }
.research-node.available small { color:var(--accent-soft); }
.research-node.complete { border-color:var(--paper); background:var(--panel); }
.research-node.complete small { color:var(--paper); }
.research-node.active { border-color:var(--warning); background:var(--panel); }
.research-node.active small { color:var(--warning); }
.research-node.locked { background:var(--panel-alt); border-color:var(--line); }
.research-node.waiting { border-color:var(--warning); }

.research-node:hover { border-color:var(--cyan); filter:brightness(1.15); }
.research-node:focus-visible,.research-scroll:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.research-lane { position:absolute; left:0; border-top:1px solid var(--line); pointer-events:none; background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 2%,transparent),transparent); }
.research-lane h3 { margin:12px 24px; font-size:16px; font-weight:500; color:var(--paper); }
.research-lane h3 small { margin-left:16px; font-size:10px; color:var(--muted); }
.research-edge.cross-discipline { stroke-dasharray:5 4; opacity:.4; }
.research-canvas.has-highlight .research-edge { opacity:.12; }
.research-canvas.has-highlight .research-edge.highlighted { opacity:1; stroke:var(--cyan); stroke-width:3; }
.research-node { cursor:pointer; }

/* Keep the graph in the remaining workspace, with no second outer scrollbar. */
.research-workspace.full-workspace { display:flex; flex-direction:column; min-height:0; height:100%; padding:0; overflow:hidden; }
.research-toolbar { position:relative; z-index:2; flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding:8px 12px; }
.research-toolbar h2 { margin:0; font-size:17px; font-weight:500; letter-spacing:0; }
.research-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:10px; color:var(--muted); }
.research-summary>span { white-space:nowrap; }
.research-summary b { font-size:13px; font-weight:500; color:var(--paper); }
.research-summary .research-budget b { font-size:17px; color:var(--warning); }
.research-summary .research-ready b { color:var(--accent-soft); }
.research-tools { margin-left:auto; display:flex; align-items:center; gap:4px; }
.research-tools .command { min-width:30px; min-height:30px; padding:4px 8px; font-size:10px; }
.research-zoom-level { min-width:40px; text-align:center; font-size:11px; font-variant-numeric:tabular-nums; }
.research-help summary { display:grid; place-items:center; width:30px; height:30px; list-style:none; cursor:pointer; border:1px solid var(--line); color:var(--muted); }
.research-help summary::-webkit-details-marker { display:none; }
.research-help summary:focus-visible { outline:2px solid var(--paper); outline-offset:2px; }
.research-help[open] summary { color:var(--paper); border-color:var(--cyan); }
.research-help>div { position:absolute; right:8px; top:calc(100% - 1px); width:min(300px,calc(100% - 16px)); padding:12px; border:1px solid var(--cyan); background:var(--panel); box-shadow:0 5px 16px #0008; font-size:11px; }
.research-help p+p { margin-top:8px; }
.research-queue { flex:none; display:flex; align-items:center; gap:6px; padding:0 12px 8px; overflow-x:auto; }
.research-queue>span { flex:none; color:var(--warning); font-size:10px; }
.research-queue .command { display:flex; align-items:center; gap:10px; flex:none; min-height:28px; padding:4px 8px; font-size:10px; }
.research-queue b { color:var(--warning); font-weight:500; }
.research-node .research-node-cost { margin-top:auto; width:100%; display:flex; justify-content:space-between; align-items:baseline; padding-top:7px; border-top:1px solid #ffffff15; }
.research-node-cost b { font-size:16px; font-weight:500; color:var(--paper); }
.research-node-cost .unaffordable b { color:var(--warning); }
@media(max-width:700px) {
  .research-toolbar { gap:6px 10px; padding:6px 8px; }
  .research-toolbar h2 { font-size:15px; }
  .research-summary { gap:4px 10px; font-size:9px; }
  .research-summary b { font-size:11px; }
  .research-summary .research-budget b { font-size:14px; }
  .research-tools { margin-left:0; }
  .research-queue { padding:0 8px 6px; }
}

.technology-icon {object-fit:contain;flex:none;background:var(--bg);border:1px solid var(--line);}
.research-node .research-node-heading {display:flex;align-items:center;gap:10px;width:100%;color:var(--paper);}
.research-node-heading strong {line-height:1.3;font-size:14px;min-width:0;}
.research-node.locked .technology-icon {filter:saturate(.55);opacity:.78;}
.research-node>small,.research-node>span {flex-shrink:0;}
.technology-prerequisite {display:flex;align-items:center;gap:12px;}
.technology-dossier-intro {display:flex;align-items:center;gap:20px;margin:4px 0 20px;}
.technology-dossier-intro .prompt-text {margin:0;min-width:0;overflow-wrap:anywhere;}
@media(max-width:600px){.technology-dossier-intro {align-items:flex-start;gap:12px;}.technology-dossier-intro .technology-icon {width:92px;height:92px;}}


/* Compact cards: illustration and benefits above a short technology brief. */
.research-node {padding:10px;gap:8px;}
.research-node .research-node-heading {align-items:flex-start;gap:8px;padding-right:26px;}
.research-node-details {display:flex;flex-direction:column;gap:4px;min-width:0;}
.research-node-heading strong {font-size:13px;line-height:1.2;}
.research-node .research-effect {font-size:10px;line-height:1.3;color:var(--text);}
.research-node .research-description {font-size:11px;line-height:1.35;color:var(--muted);}
.research-node .research-weeks {position:absolute;right:8px;top:8px;font-size:10px;color:var(--warning);}
.research-weeks b {font-size:16px;font-weight:500;}
.research-node .research-node-cost {padding-top:5px;gap:6px;}
.research-node-cost small {font-size:9px;letter-spacing:0;}
.research-node-cost b {font-size:14px;}

/* Graphic benefits use the same personnel and resource symbols as the HUD. */
.research-node .research-benefits,.research-benefits {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 6px;width:100%;}
.research-benefit {display:flex;align-items:center;gap:3px;min-width:0;min-height:20px;color:var(--accent-soft);}
.research-benefit-caption {font-size:9px;color:var(--text);white-space:nowrap;}
.research-benefit-graphic {display:flex;align-items:center;gap:3px;margin-left:auto;}
.research-benefit-graphic b {font-size:10px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;}
.research-benefit-dots {display:flex;gap:1px;}
.research-benefit-dots i {display:block;width:2px;height:7px;background:#ffffff20;}
.research-benefit-dots .lit {background:currentColor;}
.research-benefit-arrow {font-size:15px;line-height:1;}
.research-benefit.unlock {color:var(--warning);}
.research-unlock {width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;}
.research-node {height:205px;gap:4px;}
.research-node .research-description {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.research-node .research-node-heading {min-height:48px;align-items:center;}
.research-node.locked .research-benefits {opacity:.65;}
.research-node.available .research-node-cost small {font-weight:700;color:var(--paper);}
.technology-dossier-effects {margin:0 0 18px;padding:10px;border-block:1px solid var(--line);}
.technology-dossier-effects .research-benefits {gap:8px 20px;}
.technology-dossier-effects .research-benefit-caption {font-size:12px;}
.technology-dossier-effects .research-benefit-graphic b {font-size:13px;}
@media(max-width:450px){.technology-dossier-effects .research-benefits {grid-template-columns:1fr;}}

/* Keep the topic and brief alongside the artwork; full details stay in the hover panel. */
.research-node {width:310px;height:232px;padding:8px;gap:6px;align-items:center;}
.research-node .research-node-heading {justify-content:flex-start;gap:10px;min-height:112px;padding:0;}
.research-node .research-node-details {flex:1;min-width:0;padding-right:24px;gap:6px;}
.research-node .research-node-title {font-size:14px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.research-node .research-description {-webkit-line-clamp:4;}
.research-node .technology-icon {border:0;}
.research-node-status {position:absolute;right:8px;top:8px;width:24px;height:24px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.research-node.available .research-node-status {fill:var(--accent-soft);stroke:var(--accent-soft);}
.research-node.active .research-node-status {stroke:var(--warning);}
.research-node.complete .research-node-status {stroke:var(--paper);}
.research-node .research-benefits.icons-only {grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
.icons-only .research-benefit {flex-direction:column;gap:1px;min-height:44px;justify-content:center;}
.research-benefit-symbol {position:relative;display:flex;align-items:center;justify-content:center;}
.research-benefit-skill {position:absolute;right:-8px;bottom:-2px;background:color-mix(in srgb,var(--panel-alt) 87%,transparent);line-height:0;}
.icons-only .research-benefit-graphic {margin-left:0;gap:3px;line-height:10px;}
.icons-only .research-benefit-arrow {width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;}
.icons-only .research-benefit-dots i {width:3px;height:4px;}
.icons-only .research-unlock {width:10px;height:10px;}
.research-hover {position:fixed;z-index:200;width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow-y:auto;padding:14px;border:1px solid var(--cyan);background:var(--panel);box-shadow:0 6px 24px #0009;color:var(--paper);font-size:12px;line-height:1.5;text-align:left;}
.research-hover[hidden] {display:none;}
.research-hover strong {display:block;font-size:16px;font-weight:500;}
.research-hover p {margin:8px 0;}
.research-hover .research-hover-status {color:var(--accent-soft);font-size:11px;}
.research-hover dl {display:flex;gap:24px;margin:10px 0;padding-block:8px;border-block:1px solid var(--line);}
.research-hover dt {font-size:10px;color:var(--muted);}
.research-hover dd {margin:0;font-size:14px;}
.research-hover ul {padding-left:16px;margin:8px 0;}
.research-hover li+li {margin-top:3px;}
.research-hover .research-hover-requires {font-size:11px;color:var(--muted);margin-bottom:0;}

/* Warm, compact research strips retain the artwork and dependency graph. */
.research-toolbar {padding:12px 20px;border-bottom:1px solid var(--line);gap:8px 20px;}
.research-toolbar h2 {font-family:var(--display);font-size:25px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;}
.research-scroll {border:0;}
.research-canvas {background-image:radial-gradient(var(--line-soft) .7px,transparent .7px);background-size:24px 24px;}
.research-lane {border-top:1px solid var(--line);background:transparent;}
.research-lane h3 {font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:1.5px;}
.research-lane h3 small {font-family:var(--mono);font-size:10px;letter-spacing:.5px;}
.research-node {height:198px;padding:10px;gap:6px;background:var(--bg);border:1px solid var(--line);}
.research-node .research-node-heading {min-height:112px;align-items:center;}
.research-node .research-node-details {padding-right:0;}
.research-node .research-node-title {font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.3px;}
.research-node .technology-icon {background:transparent;}
.research-node .research-description {font-size:12px;line-height:1.35;-webkit-line-clamp:3;}
.research-node.available {border:1px solid var(--accent-soft);border-left:4px solid var(--accent-soft);background:#a6cfc612;box-shadow:none;}
.research-node.complete {border-color:var(--slate);background:var(--panel-alt);}
.research-node.active {border-color:var(--warning);border-left:4px solid var(--warning);background:#dfb79412;}
.research-node.locked {background:var(--bg);border-color:var(--line-soft);}
.research-node.waiting {border-color:var(--line);}
.research-node .research-node-status {right:9px;top:auto;bottom:10px;width:18px;height:18px;}
.research-node .research-node-time {position:absolute;top:6px;right:8px;color:var(--paper);font-size:11px;}
.research-node .research-benefits.icons-only {grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;padding-right:20px;}
.research-node .research-benefit {min-height:42px;}
.research-benefit-skill {background:var(--bg);}
.research-hover {background:var(--bg);border-color:var(--line);border-left:3px solid var(--red);}
.technology-icon {background:transparent;border:0;}
.technology-dossier-effects {padding:10px 0;}