/* Talents tab of the skills window (K): three coloured lines of three choices, active combinations, progress list. */
.tal { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow-y: auto; padding: 2px 2px 4px; }
.tal-empty { text-align: center; padding: 22px 8px; }
.tal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; background: var(--gf-paper-dark); border: 1px solid #716c94; border-radius: 6px; }
.tal-btns { display: flex; gap: 6px; }
.tal-lock { flex-basis: 100%; margin: 0; font-size: var(--fs-small); font-weight: 700; color: #494567; }
.tal-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tal-col { display: flex; flex-direction: column; gap: 5px; padding: 5px; border-radius: 6px; border: 2px solid var(--tal, #716c94); background: linear-gradient(#d6d4e3, #c1bed3); }
.tal-earth { --tal: #686292; } .tal-star { --tal: #d9a514; } .tal-moon { --tal: #8b6fd6; }
.tal-colhead { display: flex; flex-direction: column; line-height: 1.15; }
.tal-colhead b { color: var(--tal); font-size: var(--fs-strong); letter-spacing: 0.5px; text-transform: uppercase; }
.tal-colhead span { font-size: var(--fs-caption); color: #423f5c; }
.tal-card { display: flex; flex-direction: column; gap: 3px; padding: 4px 5px; text-align: left; color: var(--gf-ink); background: #e6e5ed; border: 2px solid transparent; border-radius: 6px; cursor: pointer; }
.tal-card:hover { border-color: var(--tal); }
.tal-card.on { border-color: var(--tal); background: linear-gradient(#ebeaf1, #c5c2d6); box-shadow: 0 0 0 1px #fff7, 0 0 8px color-mix(in srgb, var(--tal) 55%, transparent); }
.tal-card.ro { cursor: default; }
.tal-cardhead { display: flex; align-items: center; gap: 5px; }
.tal-cardhead img { flex: none; border-radius: 6px; }
.tal-name { flex: 1; font-size: var(--fs-small); font-weight: 700; line-height: 1.1; }
.tal-check { font-style: normal; font-weight: 800; color: #2e7d32; }
.tal-eff { font-size: var(--fs-caption); line-height: 1.2; color: #2f2c40; }
.tal-eff.good { color: #1f7a2a; font-weight: 700; }
.tal-box { padding: 5px 8px; background: var(--gf-paper-dark); border: 1px solid #716c94; border-radius: 6px; }
.tal-box h4 { margin: 0 0 4px; }
.tal-note { margin: 0 0 4px; font-size: var(--fs-small); }
.tal-active, .tal-box { display: flex; flex-direction: column; gap: 5px; }
.tal-combo { display: flex; align-items: center; gap: 7px; padding: 4px 6px; background: #d6d4e3; border: 2px solid transparent; border-radius: 6px; }
.tal-combo img { flex: none; border-radius: 50%; }
.tal-combo.on { border-color: #3fbf4a; background: linear-gradient(#f2fbe8, #dcefc6); }
.tal-combo.near { border-color: #817ca7; }
.tal-ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tal-ctext .mute { font-size: var(--fs-caption); }
.tal-ctitle { display: flex; align-items: center; gap: 6px; }
.tal-pips { display: inline-flex; gap: 3px; }
.tal-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #423f5c; background: #bbb9ce; }
.tal-pips i.on { background: #817ca7; }
.tal-col.closed { opacity: 0.75; }
.tal-need { margin-top: 2px; font-weight: bold; color: #8a2a1a; }
.tal-card.closed { filter: grayscale(0.85); opacity: 0.6; cursor: not-allowed; }