/* Skill explorer draft. Shared shell and typography remain authoritative. */
.sx-setup,.sx-list-pane,.sx-detail,.sx-rules{
  box-sizing:border-box;min-width:0;border:2px solid var(--maple-line,#c7ad88);
  border-radius:16px;background:var(--maple-surface,#fffaf0);color:var(--maple-text,#493d32);
  box-shadow:0 3px 0 rgba(113,80,43,.1);
}
.sx-setup{padding:20px}
.sx-setting-row{display:flex;align-items:center;flex-wrap:wrap;gap:20px}
.sx-current-job{display:flex;align-items:center;gap:10px;min-width:160px}
.sx-current-job img{display:block;width:48px;height:56px;object-fit:contain;flex:none}
.sx-current-job>div{min-width:0}
.sx-current-job strong{display:block;font-size:var(--ui-type-l3-size,16px);line-height:var(--ui-type-l3-line,1.4);font-weight:var(--ui-type-l3-weight,700)}
.sx-current-job small{display:block;margin-top:3px;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-note-size,12px)}
.sx-main-fields{display:flex;align-items:end;flex-wrap:wrap;gap:12px;flex:1;min-width:0}
.sx-main-fields label,.sx-bonus-grid label{display:grid;gap:6px;min-width:0;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65)}
.sx-main-fields label{flex:1 1 130px;max-width:210px}
.sx-main-fields input,.sx-bonus-grid input{
  box-sizing:border-box;display:block;width:100%;min-width:0;min-height:42px;padding:8px 10px;
  border:1px solid var(--maple-line,#c7ad88);border-radius:8px;background:#fffdf7;
  color:var(--maple-text,#493d32);font-size:var(--ui-type-input-size,16px);line-height:1.4;font-variant-numeric:tabular-nums;
}
.sx-setup button,.sx-viewbar button,.sx-filters button{
  box-sizing:border-box;min-height:40px;padding:8px 12px;border:1px solid var(--maple-line,#c7ad88);
  border-radius:9px;background:var(--maple-panel,#f3e7d0);color:var(--maple-text,#493d32);
  font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l3-line,1.4);font-weight:var(--ui-type-l3-weight,700);cursor:pointer;
}
.sx-setting-row>[data-sx-jobs]{margin-left:auto;flex:none}
.sx-job-picker,.sx-bonus-settings{margin-top:16px;border-top:1px solid var(--maple-line,#c7ad88);padding-top:12px}
.sx-job-picker>summary,.sx-bonus-settings>summary,.sx-rules>summary,.sx-source-details>summary{
  padding:4px 0;cursor:pointer;color:var(--maple-text,#493d32);
  font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65);font-weight:var(--ui-type-l3-weight,700);
}
.sx-job-picker>summary::marker,.sx-bonus-settings>summary::marker,.sx-rules>summary::marker,.sx-source-details>summary::marker{color:var(--maple-accent,#9d4524)}
.sx-job-picker .sx-jobs-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:12px}
.sx-job-picker .sx-job{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-width:0;min-height:124px;padding:8px 4px;text-align:center}
.sx-job img{display:block;width:64px;max-width:100%;height:80px;object-fit:contain;flex:none}
.sx-job span{min-width:0;overflow-wrap:anywhere;font-size:var(--ui-type-note-size,12px)}
.sx-job-picker .sx-job:is(.is-active,[aria-pressed="true"]){background:#e5eed9;border-color:#73915f;color:var(--maple-positive,#38642c);box-shadow:inset 0 0 0 1px #73915f}
.sx-bonus-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.sx-setting-help,.sx-caption{margin:10px 0 0;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65);overflow-wrap:anywhere}
.sx-viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.sx-viewbar nav{display:flex;gap:6px;min-width:0}
.sx-viewbar nav button{padding:9px 16px;font-size:var(--ui-type-l3-size,16px)}
.sx-viewbar nav button.is-active{background:var(--maple-accent,#9d4524);border-color:var(--maple-accent,#9d4524);color:#fffaf0;box-shadow:0 2px 0 #71351f}
.sx-viewbar>button{background:transparent;color:var(--maple-muted,#6d5944)}
.sx-workspace{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;min-width:0}
.sx-list-pane{padding:14px}
.sx-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.sx-list-head h2{margin:0;font-size:var(--ui-type-l2-size,22px);line-height:var(--ui-type-l2-line,1.4);font-weight:var(--ui-type-l2-weight,700)}
.sx-list-head small{color:var(--maple-muted,#6d5944);font-size:var(--ui-type-note-size,12px)}
.sx-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-width:420px;margin-bottom:12px}
.sx-filters button{padding:7px 3px;min-width:0;background:#f7efdf}
.sx-filters button.is-active{background:#e5eed9;border-color:#73915f;color:var(--maple-positive,#38642c)}
.sx-skill-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;gap:6px;min-width:0;margin:0;padding:0;list-style:none}
.sx-skill-list>li{min-width:0}
.sx-skill{
  box-sizing:border-box;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;
  width:100%;height:100%;min-width:0;min-height:72px;padding:10px;border:1px solid transparent;border-radius:10px;
  background:#f5eddd;color:var(--maple-text,#493d32);text-align:left;cursor:pointer;
}
.sx-skill img{display:block;width:32px;height:32px;object-fit:contain}
.sx-skill>div,.sx-skill>span{min-width:0}
.sx-skill strong{display:block;font-size:var(--ui-type-l3-size,16px);line-height:var(--ui-type-l3-line,1.4);font-weight:var(--ui-type-l3-weight,700);overflow-wrap:anywhere}
.sx-skill small{display:block;margin-top:3px;font-size:var(--ui-type-note-size,12px);line-height:1.5;color:var(--maple-muted,#6d5944)}
.sx-skill:is(.is-active,[aria-selected="true"],[aria-pressed="true"]){background:#e7eedb;border-color:#73915f;box-shadow:inset 3px 0 0 #65834f}
.sx-skill:is(.is-active,[aria-selected="true"],[aria-pressed="true"]) strong{color:var(--maple-positive,#38642c)}
.sx-detail{padding:24px}
.sx-detail-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--maple-line,#c7ad88)}
.sx-detail-head>img{display:block;width:52px;height:52px;object-fit:contain;flex:none}
.sx-detail-head>div{min-width:0}
.sx-detail-head h2{margin:3px 0 0;font-size:var(--ui-type-l2-size,22px);line-height:var(--ui-type-l2-line,1.4);font-weight:var(--ui-type-l2-weight,700);overflow-wrap:anywhere}
.sx-eyebrow{display:block;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-note-size,12px);line-height:1.5}
.sx-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.sx-tags>*{padding:3px 7px;border:1px solid #d9c6a5;border-radius:6px;background:#f4e9d2;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-note-size,12px);line-height:1.4}
.sx-section{min-width:0;margin-top:20px}
.sx-section h3{margin:0 0 10px;color:var(--maple-text,#493d32);font-size:var(--ui-type-l3-size,16px);line-height:var(--ui-type-l3-line,1.4);font-weight:var(--ui-type-l3-weight,700)}
.sx-ingame-description{padding:14px 16px}
.sx-ingame-description h3{margin-bottom:6px}
.sx-ingame-description .sx-description-text{margin:0;color:var(--maple-text,#493d32);font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65);white-space:pre-line;overflow-wrap:anywhere;word-break:keep-all}
.sx-ingame-description .sx-description-note{margin:8px 0 0}
.sx-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.sx-metric{min-width:0;padding:12px;border:1px solid #ddcdb0;border-radius:10px;background:#f7efdf}
.sx-metric small,.sx-metric>span:first-child{display:block;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-note-size,12px);line-height:1.5}
.sx-metric strong,.sx-metric .ui-type-number{display:block;margin-top:6px;font-size:var(--ui-type-l2-size,22px);line-height:var(--ui-type-l2-line,1.4);font-weight:var(--ui-type-l2-weight,700);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sx-line{min-width:0;margin-top:9px;padding:12px;border:1px solid #ddcdb0;border-radius:10px;background:#fffdf7}
.sx-line>strong,.sx-line>label{display:block;margin-bottom:5px;font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65)}
.sx-equation{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;min-width:0;font-size:var(--ui-type-l3-size,16px);line-height:1.6;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sx-equation i{color:var(--maple-muted,#6d5944);font-style:normal}
.sx-equation b,.sx-equation strong{color:var(--maple-text,#493d32);font-weight:var(--ui-type-l3-weight,700)}
.sx-equation em{color:var(--maple-accent,#9d4524);font-style:normal;font-weight:var(--ui-type-l3-weight,700)}
.sx-growth{padding:14px;border:1px solid #a0b78a;border-radius:11px;background:#edf3e3}
.sx-growth h3{color:var(--maple-positive,#38642c)}
.sx-growth-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px;min-width:0}
.sx-growth-row>*{min-width:0;overflow-wrap:anywhere}
.sx-growth-row small{display:block;margin-bottom:4px;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-note-size,12px);line-height:1.5}
.sx-growth-row strong,.sx-growth-row b{font-size:var(--ui-type-l3-size,16px);line-height:var(--ui-type-l3-line,1.4);font-variant-numeric:tabular-nums}
.sx-growth-row>i{color:var(--maple-positive,#38642c);font-size:var(--ui-type-l2-size,22px);font-style:normal}
.sx-growth-row>:last-child{padding-left:12px;border-left:1px solid #c5d4b5;color:var(--maple-positive,#38642c)}
.sx-masteries{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.sx-masteries>article,.sx-masteries>li,.sx-masteries>.sx-mastery{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:9px;padding:10px;border:1px solid #ddcdb0;border-radius:9px;background:#f8f0e1}
.sx-masteries img{display:block;width:28px;height:28px;object-fit:contain}
.sx-masteries strong{display:block;color:var(--maple-text,#493d32);font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65)}
.sx-masteries small,.sx-masteries p{display:block;margin:3px 0 0;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-note-size,12px);line-height:1.65;overflow-wrap:anywhere}
.sx-empty{padding:20px;border:1px dashed var(--maple-line,#c7ad88);border-radius:10px;background:#f8f1e4;color:var(--maple-muted,#6d5944);font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65)}
.sx-library-view{min-width:0}
.sx-rules{margin-top:16px;padding:12px 16px}
.sx-rules p,.sx-rules li{color:var(--maple-muted,#6d5944);font-size:var(--ui-type-l4-size,14px);line-height:var(--ui-type-l4-line,1.65)}
.sx-source-details{margin-top:16px;padding-top:12px;border-top:1px solid var(--maple-line,#c7ad88);min-width:0}
.sx-source-details>summary{margin-bottom:8px}
.sx-source-details .finalSkillCard{margin-top:8px}
.sx-source-details :is(.coefficientFlow__formula,.damageEquation__row>div){min-width:0}
.sx-setup :is(button,input):focus-visible,.sx-viewbar button:focus-visible,.sx-filters button:focus-visible,.sx-skill:focus-visible,.sx-job-picker>summary:focus-visible,.sx-bonus-settings>summary:focus-visible,.sx-rules>summary:focus-visible,.sx-source-details>summary:focus-visible{outline:3px solid var(--maple-accent,#9d4524);outline-offset:3px}
.sx-setup button:hover:not(:disabled),.sx-filters button:hover:not(:disabled),.sx-skill:hover:not(:disabled){border-color:#9f825b}
.sx-setup button:disabled,.sx-viewbar button:disabled,.sx-filters button:disabled,.sx-skill:disabled{background:#eee6d8;border-color:#cfc2ad;color:#78664f;box-shadow:none;cursor:not-allowed}
.sx-workspace [hidden],#sx-overview[hidden],#sx-library[hidden]{display:none}
.sx-effects{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sx-effects>li{padding:12px;border:1px solid #ddcdb0;border-radius:9px;background:#fffdf7;line-height:1.7;font-size:var(--ui-type-l4-size,14px)}
.sx-effects em{font-style:normal;color:var(--maple-positive,#38642c);font-weight:700}
.sx-effects .effectWarning{color:var(--maple-muted,#6d5944)}
.sx-masteries ul{padding-left:18px;margin:5px 0 0;font-size:var(--ui-type-l4-size,14px);line-height:1.7;color:var(--maple-muted,#6d5944)}
.sx-masteries ul strong{display:inline;font-size:inherit}
.sx-growth-item+.sx-growth-item{border-top:1px solid #c5d4b5;margin-top:12px;padding-top:10px}
.sx-growth-item>.sx-eyebrow{margin:0 0 8px}
.sx-count{display:inline-block;margin-left:4px;padding:1px 7px;background:#e5eed9;border-radius:6px;color:var(--maple-positive,#38642c);font-size:14px}
.sx-detail{scroll-margin-top:104px}
#sx-detail-title:focus{outline:2px solid #a0b78a;outline-offset:4px}
@media(max-width:1000px){
  .sx-skill-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sx-detail{padding:20px}
  .sx-growth-row{gap:8px}
}
@media(max-width:760px){
  .sx-setup{padding:16px}
  .sx-setting-row{gap:14px}
  .sx-current-job{flex:1}
  .sx-setting-row>[data-sx-jobs]{order:1}
  .sx-main-fields{order:2;flex-basis:100%;gap:10px}
  .sx-main-fields label{max-width:none}
  .sx-job-picker .sx-jobs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .sx-job-picker .sx-job{min-height:112px}
  .sx-job img{width:56px;height:72px}
  .sx-bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sx-viewbar{margin-top:16px;gap:8px}
  .sx-viewbar nav{flex:1}
  .sx-viewbar nav button{padding:9px 10px;flex:1}
  .sx-viewbar>button{padding:8px}
  .sx-workspace{gap:12px}
  .sx-skill-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .sx-skill{padding:8px;gap:7px;min-height:62px}
  .sx-skill strong{font-size:var(--ui-type-l4-size,14px)}
  .sx-skill small{font-size:var(--ui-type-note-size,12px)}
  .sx-list-pane{padding:12px}
  .sx-detail{padding:16px}
  .sx-detail{scroll-margin-top:144px}
  .sx-detail-head{gap:10px;padding-bottom:14px}
  .sx-metrics{gap:6px}
  .sx-metric{padding:10px 8px}
  .sx-growth{padding:12px}
  .sx-growth-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .sx-growth-row>:last-child{grid-column:1/-1;padding:8px 0 0;border-left:0;border-top:1px solid #c5d4b5}
}