/* 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 #a88a58; border-radius: 6px; }
.tal-btns { display: flex; gap: 6px; }
.tal-lock { flex-basis: 100%; margin: 0; font-size: 11px; font-weight: 700; color: #9a4a12; }
.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, #a88a58); background: linear-gradient(#efe4c8, #e1d3b0); }
.tal-earth { --tal: #b5803f; } .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: 13px; letter-spacing: 0.5px; text-transform: uppercase; }
.tal-colhead span { font-size: 10px; color: #6a5230; }
.tal-card { display: flex; flex-direction: column; gap: 3px; padding: 4px 5px; text-align: left; color: var(--gf-ink); background: #f6efdc; 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(#fff8dc, #f6e3a2); 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: 11px; font-weight: 700; line-height: 1.1; }
.tal-check { font-style: normal; font-weight: 800; color: #2e7d32; }
.tal-eff { font-size: 10px; line-height: 1.2; color: #4a3a22; }
.tal-eff.good { color: #1f7a2a; font-weight: 700; }
.tal-box { padding: 5px 8px; background: var(--gf-paper-dark); border: 1px solid #a88a58; border-radius: 6px; }
.tal-box h4 { margin: 0 0 4px; }
.tal-note { margin: 0 0 4px; font-size: 11px; }
.tal-active, .tal-box { display: flex; flex-direction: column; gap: 5px; }
.tal-combo { display: flex; align-items: center; gap: 7px; padding: 4px 6px; background: #efe4c8; 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: #e9a93a; }
.tal-ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tal-ctext .mute { font-size: 10px; }
.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 #6a5230; background: #d8ccae; }
.tal-pips i.on { background: #e9a93a; }
.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; }