/* Fire Emblem Awakening class & skill browser. Builds on planner.css (windows, faces, skill icons, chips, pills);
   the stat table follows the game's status window: parchment rows, label left, value right. */
.fec { width: min(1180px, 100% - 32px); margin: 22px auto 0; color: var(--fe-text); --fs: 40px; }
.fec-tabs { display: flex; gap: 8px; }
.fep-pill[aria-selected="true"] { border-color: var(--fe-blue-hi); background: linear-gradient(180deg, #3b86de, #164a9a); color: #fff; box-shadow: 0 0 10px rgba(90, 168, 240, .45); }
.fec-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fec-detail { position: sticky; top: 132px; max-height: calc(100vh - 150px); overflow: auto; }

/* Class tree */
.fec-tree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(210, 172, 94, .15); }
.fec-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start; }
.fec-nopromo { align-self: center; color: var(--fe-text-2); font-size: .8rem; font-style: italic; }
.fec-card { display: grid; gap: 4px; width: 100%; padding: 6px 8px; border: 1px solid #3c3330; border-left: 3px solid var(--fe-gold-dark); border-radius: 4px; background: linear-gradient(90deg, #2b2529, #1b181c); color: var(--fe-text); font: inherit; text-align: left; cursor: pointer; }
.fec-promos .fec-card { border-left-color: var(--fe-blue); }
.fec-card:hover { border-color: var(--fe-gold); }
.fec-card[aria-current] { border-color: var(--fe-blue-hi); box-shadow: 0 0 0 1px var(--fe-blue-hi), 0 0 12px rgba(90, 168, 240, .45); }
.fec-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fec-card-top strong { font-family: var(--fe-serif); font-size: .9rem; }
.fec-card-wpn { display: flex; gap: 1px; }
.fec-card-sk { display: flex; align-items: center; gap: 3px; }
.fec-only { margin-left: auto; color: var(--fe-text-2); font-size: .7rem; }
.fec-wpn { width: 20px; height: 20px; image-rendering: pixelated; }

/* Detail */
.fec-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; }
.fec-facts { display: grid; gap: 6px; margin: 4px 0 10px; }
.fec-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; }
.fec-fact b { min-width: 64px; color: var(--fe-gold-light); font-family: var(--fe-serif); }
.fec-w { display: inline-flex; align-items: center; gap: 3px; }
.fec-skilllist { display: grid; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.fec-skillrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 1px solid #3c3330; border-radius: 5px; background: #1b181c; color: var(--fe-text); font: inherit; text-align: left; cursor: pointer; }
.fec-skillrow:hover { border-color: var(--fe-gold); }
.fec-skillrow span { display: grid; gap: 2px; }
.fec-skillrow strong { font-family: var(--fe-serif); font-size: .92rem; }
.fec-skillrow small { color: var(--fe-text-2); font-size: .8rem; }
.fec-stats { width: 100%; border-collapse: collapse; border-radius: 5px; overflow: hidden; background: linear-gradient(180deg, #f7ecd3, #e9d5aa); color: var(--fe-ink); font-size: .84rem; }
.fec-stats th, .fec-stats td { padding: 4px 3px; border-bottom: 1px solid rgba(140, 106, 44, .35); text-align: center; }
.fec-stats thead th { color: var(--fe-ink-2); font-family: var(--fe-serif); }
.fec-stats tbody th { padding-left: 8px; color: var(--fe-ink-2); font-family: var(--fe-serif); text-align: left; }
.fec-stats td { font-family: var(--fe-serif); font-weight: 700; }
.fec-stats tbody tr:last-child td { background: linear-gradient(0deg, rgba(31, 95, 191, .22) calc(var(--p, 0) * 100%), transparent 0); }
.fec-links { margin: 10px 0 0; }
.fec-note { margin: 10px 0 0; color: var(--fe-text-2); font-size: .84rem; font-style: italic; }
.fec-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .88rem; }
.fec-rel b { color: var(--fe-gold-light); font-family: var(--fe-serif); }
.fec-link { padding: 2px 10px; border: 1px solid var(--fe-blue); border-radius: 3px; background: rgba(90, 168, 240, .12); color: #bfe0ff; font: inherit; font-size: .84rem; cursor: pointer; }
.fec-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.fec-user { display: grid; justify-items: center; gap: 2px; color: var(--fe-text); font-size: .68rem; text-decoration: none; }
.fec-user:hover span:last-child { color: var(--fe-gold-light); }

/* Skills */
.fec-search { width: 100%; margin-bottom: 10px; padding: 7px 12px; border: 1px solid var(--fe-gold-dark); border-radius: 4px; background: #121014; color: var(--fe-text); font: inherit; }
.fec-skillgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 5px; }
.fec-skillbtn { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border: 1px solid #3c3330; border-radius: 5px; background: #1b181c; color: var(--fe-text); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.fec-skillbtn:hover { border-color: var(--fe-gold); }
.fec-skillbtn[aria-current] { border-color: var(--fe-blue-hi); box-shadow: 0 0 0 1px var(--fe-blue-hi); }
.fec-skillhead { display: flex; gap: 14px; align-items: flex-start; }
.fec-skillhead .fep-chip { display: inline-block; margin-top: 2px; cursor: default; }

.fec button:focus-visible, .fec a:focus-visible, .fec input:focus-visible { outline: 2px solid var(--fe-gold-light); outline-offset: 2px; }

@media (max-width: 860px) {
  .fec-main { grid-template-columns: minmax(0, 1fr); }
  .fec-detail { position: static; max-height: none; }
  .fec-tree { grid-template-columns: 1fr; }
}