/* T10 Roadmap — dedicated styles. No CSS gap property. */
.t10-main { margin-top: 1.25em; }
.t10-intro { padding: 1.35em .15em 1.15em; background: radial-gradient(ellipse at 75% 0%, rgba(21,68,123,.25), transparent 62%); }
.t10-intro .section-kicker { margin: 0 0 .45em; }
.t10-intro h1 { margin: .28em 0 0; color: var(--text, #f2f2f2); font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.t10-intro > p:last-child { margin: .75em 0 0; color: var(--muted, rgba(242,242,242,.6)); font-size: .88rem; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.t10-panel { overflow: hidden; border: 1px solid rgba(214,170,79,.6); border-radius: 17px; background: linear-gradient(180deg, #0d1b2f 0%, #050b18 18%, #071127 85%, #0b1524 100%); box-shadow: inset 0 0 0 2px rgba(214,170,79,.08), 0 16px 42px rgba(0,0,0,.4); }
.t10-panel-head { display: flex; align-items: center; padding: 1.05em .92em; border-bottom: 1px solid rgba(214,170,79,.28); background: rgba(5,9,18,.7); }
.t10-panel-head h2 { margin: 0; font-size: clamp(1.01rem, 4.1vw, 1.22rem); color: #f3d27a; }
.t10-tree-note { margin: 0; padding: .85em .95em .25em; color: #c2d2e5; font-size: .82rem; }
.t10-tree-viewport { position: relative; width: 100%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 26% 4%, rgba(37,103,164,.12), transparent 16%), radial-gradient(ellipse at 68% 55%, rgba(20,67,123,.1), transparent 49%); }
.t10-tree-viewport::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .26; pointer-events: none; background-image: radial-gradient(circle, #8dcaff 1px, transparent 1.7px), radial-gradient(circle, #8dcaff 1px, transparent 1.7px); background-position: 10px 45px, 75px 130px; background-size: 137px 193px, 193px 257px; }
.t10-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.t10-nodes { position: relative; width: 100%; height: 100%; }
.t10-node { display: flex; position: absolute; flex-direction: column; align-items: center; width: calc(100% / 3 - 4px); max-width: 133px; min-height: 128px; padding: 0; border: none; border-radius: 9px; background: transparent; color: #fff; font: inherit; text-align: center; cursor: pointer; transform: translateX(-50%); }
.t10-node:focus-visible { outline: 2px solid var(--gold-2, #f3d27a); outline-offset: 2px; }
.t10-node-hex { display: flex; position: relative; align-items: center; justify-content: center; width: clamp(61px, 20vw, 83px); height: clamp(65px, 21.6vw, 89px); margin: 0 auto; flex: 0 0 auto; background: linear-gradient(155deg, #b0dfff 0%, #347dab 35%, #10243c 78%); clip-path: polygon(50% 0, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%); filter: drop-shadow(0 0 7px rgba(36,183,255,.58)); }
.t10-node-hex::before { content: ""; position: absolute; inset: 4px; background: linear-gradient(150deg, #72bae8 0%, #25507f 56%, #101d34 100%); clip-path: inherit; }
.t10-node-hex::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(206,241,255,.65); clip-path: inherit; }
.t10-node-icon { position: relative; z-index: 1; display: block; width: 76%; height: 76%; object-fit: contain; }
.t10-node-name {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  overflow: hidden;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  max-height: 2.14em;
  margin: 2px auto 3px;
  padding: 0 4px;
  border-radius: 4px;
  background: #071427;
  box-shadow: 0 0 0 2px #071427;
  color: #eef6ff;
  font-size: clamp(.55rem, 2.3vw, .68rem);
  font-weight: 700;
  line-height: 1.07;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-shadow: 0 1px 3px #000;
}
.t10-node-badge { padding: .15em .44em; border: 1px solid #f5d182; border-radius: 5px; background: linear-gradient(#fbe09b, #d69d3d); box-shadow: 0 2px 4px rgba(0,0,0,.55); color: #1d1300; font-size: clamp(.56rem, 2.2vw, .69rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; }
.t10-node.is-t10 .t10-node-hex { background: linear-gradient(135deg, #fff2ba 3%, #ffc749 44%, #bd7d15 90%); filter: drop-shadow(0 0 10px rgba(243,187,54,.7)); }
.t10-node.is-t10 .t10-node-hex::before { background: linear-gradient(145deg, #d9bb75 0%, #885d28 55%, #322012 100%); }
.t10-node:hover .t10-node-hex, .t10-node:focus-visible .t10-node-hex { filter: drop-shadow(0 0 12px rgba(129,225,255,.9)); }
.t10-legend { display: flex; align-items: flex-start; padding: .9em 1em; border-top: 1px solid rgba(214,170,79,.2); background: rgba(6,11,20,.7); font-size: .78rem; line-height: 1.6; }
.t10-legend-chip { flex: 0 0 auto; padding: .12em .42em; margin-right: .75em; border-radius: 5px; background: #e6b65d; color: #211507; font-size: .8em; font-weight: 800; white-space: nowrap; }
.t10-legend > span:last-child { color: #becde1; }
.t10-prereq-note { margin: 0; padding: .15em 1.15em 1.05em; background: rgba(6,11,20,.7); color: #91a1b5; font-size: .74rem; line-height: 1.65; }
/* Modal and small-screen scrollable table */
.t10-dialog { position: fixed; width: min(650px, calc(100% - 16px)); max-height: min(92dvh, 920px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #bf964e; border-radius: 18px; background: #08111f; box-shadow: 0 24px 90px rgba(0,0,0,.8), inset 0 0 0 2px rgba(246,211,135,.07); color: #f3f5f8; }
.t10-dialog::backdrop { background: rgba(0,2,8,.8); backdrop-filter: blur(3px); }
.t10-dialog-inner { display: flex; flex-direction: column; max-height: min(92dvh, 920px); }
.t10-dialog-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; padding: .72em; border-bottom: 1px solid rgba(214,170,79,.35); background: linear-gradient(150deg, #102440, #091421); }
.t10-dialog-heading { display: flex; align-items: flex-start; min-width: 0; }
.t10-dialog-emblem { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 67px; height: 73px; margin-right: .65em; background: linear-gradient(145deg, #4dabc9, #15274c); clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
.t10-dialog-emblem img { width: 69%; height: 69%; object-fit: contain; }
.t10-dialog-heading > div { min-width: 0; }
.t10-dialog-eyebrow { margin: 0 0 .35em; color: #b3cde7; font-size: .63rem; letter-spacing: .08em; }
.t10-dialog-header h2 { margin: 0 0 .2em; color: var(--gold-2,#f3d27a); font-size: clamp(1.04rem, 4.7vw, 1.43rem); line-height: 1.25; overflow-wrap: anywhere; }
.t10-required-descriptor { margin: 0; color: #e6edf8; font-size: .78rem; line-height: 1.45; }
.t10-close { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; min-width: 48px; min-height: 53px; margin-left: .35em; border: 1px solid rgba(191,213,238,.35); border-radius: 10px; background: #07111e; color: #fff; font: inherit; font-size: .72rem; cursor: pointer; }
.t10-close span:first-child { font-size: 1.85rem; line-height: 1.1; }
.t10-dialog-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .82em; }
.t10-controls { display: flex; align-items: center; width: 100%; margin-bottom: 1.05em; }
.t10-level-field { display: flex; align-items: center; flex: 1 1 0; flex-direction: column; min-width: 0; padding: .7em .42em; border: 1px solid rgba(160,184,221,.42); border-radius: 10px; background: linear-gradient(#18314c, #091624); }
.t10-level-field.is-target { border-color: rgba(243,205,116,.8); background: linear-gradient(#2d2b29, #161719); }
.t10-level-field > span { margin-bottom: .55em; font-size: .82rem; font-weight: 700; }
.t10-level-field select { width: 100%; min-height: 43px; border: 1px solid #365272; border-radius: 8px; background: #07101d; color: #fff; text-align: center; font: inherit; font-size: 1.07rem; font-weight: 800; }
.t10-level-arrow { margin: 0 .45em; color: var(--gold-2,#f3d27a); font-size: 1.4rem; }
.t10-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: .55em; }
.t10-section-heading h3, .t10-cost-section h3 { margin: 0; padding-left: .48em; border-left: 3px solid #e2b458; color: #f4d28d; font-size: .98rem; }
.t10-section-heading > span { margin-left: .8em; color: #d1d9e6; font-size: .75rem; }
.t10-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -.24em; }
.t10-resource-card { min-width: 0; margin: .24em; padding: .7em .5em; border: 1px solid #37516e; border-radius: 9px; background: linear-gradient(#15273c,#0b192a); }
.t10-resource-card-head { display: flex; align-items: center; min-width: 0; margin-bottom: .4em; }
.t10-resource-card-head img { display: block; width: 25px; height: 25px; margin-right: .42em; object-fit: contain; flex: 0 0 auto; }
.t10-resource-card-head span { min-width: 0; color: #ebeff5; font-size: .78rem; line-height: 1.25; overflow-wrap: anywhere; }
.t10-resource-number { display: block; color: #f1cf80; font-size: clamp(1.12rem, 4.4vw, 1.55rem); font-weight: 780; font-variant-numeric: tabular-nums; line-height: 1.25; }
.t10-resource-exact { display: block; color: #d8e1ed; font-size: .74rem; font-variant-numeric: tabular-nums; }
.t10-data-warning { margin: .8em .14em 1.1em; color: #e7bd75; font-size: .76rem; line-height: 1.7; }
.t10-cost-section { margin-top: 1.3em; }
.t10-cost-section h3 { margin-bottom: .8em; }
/* Full-width, fixed five-column layout; no horizontal scrolling on 320px+ phones. */
.t10-cost-table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; border: 1px solid #34445b; border-radius: 8px; }
.t10-cost-table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.t10-cost-table .t10-col-level { width: 10%; }
.t10-cost-table .t10-col-resource { width: 22.5%; }
.t10-cost-table th,.t10-cost-table td { padding: .48em .14em; border: 1px solid rgba(180,201,226,.14); color: #f0f3f8; font-size: clamp(.56rem, 2.6vw, .7rem); font-weight: 500; line-height: 1.25; text-align: right; white-space: nowrap; }
.t10-cost-table th:first-child,.t10-cost-table td:first-child { padding-left: 0; padding-right: 0; text-align: center; }
.t10-cost-table th { height: 32px; background: #16263a; color: #c6d6eb; text-align: center; vertical-align: middle; }
.t10-cost-table th img { display: block; width: clamp(17px, 5vw, 21px); height: clamp(17px, 5vw, 21px); margin: auto; object-fit: contain; }
.t10-cost-table td { background: rgba(10,19,30,.95); }
.t10-cost-table tr.is-selected td { background: #172a40; }
.t10-cost-table tr.is-after-cutoff:not(.is-selected) td { color: #9dabbb; }
.t10-cost-table tr.t10-threshold td { padding: .3em .35em; border: none; background: linear-gradient(90deg,#bd8939,#e7c46e,#c39440); color: #1b160b; font-size: clamp(.6rem, 2.7vw, .7rem); font-weight: 600; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 355px) { .t10-cost-table th,.t10-cost-table td { font-size: .55rem; padding-left: .08em; padding-right: .08em; } .t10-cost-table tr.t10-threshold td { font-size: .6rem; } }

@media (max-width: 355px) { .t10-dialog { width: calc(100% - 8px); } .t10-dialog-header { padding: .6em; } .t10-dialog-content { padding: .65em; } .t10-dialog-emblem { width: 56px; height: 62px; } .t10-node-name { font-size: .54rem; } .t10-node-badge { font-size: .54rem; } }
@media (prefers-reduced-motion: reduce) { .t10-node-hex { transition: none; } }

/* Compact tree captions only; full research names remain in the detail dialog. */
html[lang="ru"] .t10-node-name { font-size: clamp(.50rem, 2.05vw, .61rem); line-height: 1.04; letter-spacing: -.015em; }
html[lang="ru"] .t10-node-badge { font-size: clamp(.53rem, 2.05vw, .63rem); }
html[lang="es"] .t10-node-name { font-size: clamp(.54rem, 2.15vw, .65rem); }