/* =========================================================
   Trade Skills compendium page — station reference, recipe
   book, material ladders. Sits on top of compendium-article.css.
   ========================================================= */

.ts-revision { color: var(--ghost); font: 500 .75rem/1.6 var(--font-mono); }
.curve-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; font-size: .85rem; margin: 1.25rem 0; }
.curve-controls label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.curve-controls input { accent-color: #d7ae58; width: 1.1rem; height: 1.1rem; }
.curve-key { display: inline-flex; gap: .5rem; align-items: center; }
.curve-key[hidden] { display: none; }
.curve-key i { width: 1.5rem; border-top: 3px solid #d7ae58; }
.curve-old i { border-color: #9fb6ca; border-top-style: dashed; }
.curve-wrap { background: rgba(8,12,13,.5); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; }
#smelting-curve { display: block; width: 100%; height: auto; overflow: visible; }
#smelting-curve text { fill: #c4c3b7; font: 12px var(--font-ui); }
.curve-grid { stroke: rgba(230,223,201,.13); }
.curve-current, .curve-legacy { fill: none; stroke-width: 3; stroke-linejoin: round; }
.curve-current { stroke: #d7ae58; }
.curve-legacy { stroke: #9fb6ca; stroke-dasharray: 7 5; }
.curve-dot { fill: #f8df9d; stroke: #151816; stroke-width: 1.5; }
.curve-note { font-size: .8rem; line-height: 1.6; }
.curve-details summary { cursor: pointer; color: var(--ghost); padding: .6rem 0; }
.curve-details p { font-size: .85rem; }
.compendium-main .curve-table { min-width: 0; width: 100%; font-size: .85rem; }
.curve-table th, .curve-table td { text-align: left; padding: .5rem; }
@media (max-width: 480px) {
  .curve-wrap { padding: .2rem; overflow-x: auto; }
  #smelting-curve { min-width: 520px; }
}

.ts-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 2.5rem; }
.ts-jump a {
  padding: .4rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: rgba(23,18,12,.7); color: var(--ink-dim);
  font: 600 .74rem/1.3 var(--font-ui); letter-spacing: .05em;
  transition: color .15s, border-color .15s;
}
.ts-jump a:hover { border-color: var(--ghost); color: var(--ghost); }

/* ---- station reference ---- */
.ts-group { margin-bottom: 1.75rem; }
.ts-group:last-child { margin-bottom: 0; }
.ts-group > h3 {
  margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-ui); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ghost);
}
.ts-station { display: grid; grid-template-columns: 11rem 1fr; gap: .4rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.ts-station:last-child { border-bottom: none; }
.ts-station-name { font-family: var(--font-display); font-size: 1rem; letter-spacing: .03em; color: var(--ink-bone); }
.ts-station-skill { display: block; margin-top: .2rem; font: 500 .7rem/1.5 var(--font-mono); color: var(--ghost-dim); }
.ts-station-body p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-dim); }
.ts-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.ts-pill {
  padding: .18rem .5rem; border-radius: var(--radius); border: 1px solid rgba(215,174,88,.2);
  background: rgba(215,174,88,.09); color: var(--ink-dim); font: 500 .68rem/1.5 var(--font-mono);
}
.ts-pill.chain { color: var(--ghost); }

/* ---- recipe browser ---- */
.ts-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.ts-tools input, .ts-tools select {
  padding: .55rem .7rem; background: var(--bg-inset);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink-bone); font: inherit; font-size: .86rem;
}
.ts-tools input { flex: 1 1 14rem; min-width: 0; }
.ts-tools input::placeholder { color: var(--ink-faint); }
.ts-tools input:focus, .ts-tools select:focus { outline: none; border-color: var(--ghost); box-shadow: 0 0 0 2px var(--ghost-glow); }
.ts-count { color: var(--ink-faint); font: 500 .78rem/1.5 var(--font-mono); white-space: nowrap; }
.ts-count b { color: var(--ghost); }

.ts-scroll { max-height: 42rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius);
  scrollbar-width: thin; scrollbar-color: rgba(215,174,88,.45) rgba(240,227,197,.06); }
.ts-scroll::-webkit-scrollbar { width: 8px; }
.ts-scroll::-webkit-scrollbar-track { background: rgba(240,227,197,.06); }
.ts-scroll::-webkit-scrollbar-thumb { background: rgba(215,174,88,.42); }

/* Matches the 480px the other compendium tables use, so this page is no wider
   than its neighbours on a narrow screen. */
.compendium-main table.ts-table { min-width: 480px; font-size: .86rem; }
.ts-scroll, .ts-scroll .table-wrap { max-width: 100%; }
.ts-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-panel-2);
  font: 700 .62rem/1.5 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); text-align: left; padding: .6rem .8rem;
}
.ts-table td { padding: .6rem .8rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.ts-table tbody tr:hover { background: rgba(215,174,88,.05); }
.ts-name { color: var(--ink-bone); font-weight: 600; }
.ts-res { display: block; margin-top: .15rem; font: 400 .7rem/1.5 var(--font-mono); color: var(--ink-faint); }
.ts-st { color: var(--ghost); font-size: .8rem; white-space: nowrap; }
.ts-needs { color: var(--ink-dim); font-size: .82rem; line-height: 1.6; }
.ts-needs b { color: var(--ink-bone); font-family: var(--font-mono); font-weight: 500; }
.ts-needs .base { color: var(--ghost); }
.ts-diff { white-space: nowrap; font: 500 .74rem/1.5 var(--font-ui); }
.ts-d0 { color: var(--good); } .ts-d1 { color: #b9c08a; } .ts-d2 { color: var(--ghost); }
.ts-d3 { color: #d09257; } .ts-d4 { color: var(--warn); }
.ts-empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-faint); font-size: .9rem; }

/* ---- ladders ---- */
.ts-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem; margin: 1rem 0; }
.ts-rung {
  display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(23,18,12,.6); font-size: .82rem; color: var(--ink-bone);
}
.ts-rung i { font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); }
.ts-rung.locked i { color: var(--warn); }

.ts-formula {
  margin: 1rem 0; padding: .9rem 1.1rem; border-left: 2px solid var(--ghost-dim);
  background: rgba(215,174,88,.06); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.9; color: var(--ink-dim);
}
.ts-formula b { color: var(--ghost); font-weight: 500; }

@media (max-width: 640px) {
  .ts-station { grid-template-columns: 1fr; gap: .2rem; }
  .ts-scroll { max-height: 32rem; }
  /* A min-width here would set the floor for the whole shell column, so let
     the recipe table compress and wrap instead. */
  .compendium-main table.ts-table { min-width: 0; }
  .ts-table th, .ts-table td { padding: .5rem .45rem; }
  .ts-table td.ts-st { white-space: normal; }
}

.compendium-main section[id] { scroll-margin-top: 6rem; }
.compendium-main { min-width: 0; }
.curve-wrap { min-width: 0; max-width: 100%; }
.ts-tools select { max-width: 100%; }
@media (max-width: 480px) {
  .compendium-main section.glass-panel { padding: 1rem; }
  .ts-ladder { grid-template-columns: 1fr; }
  body .bele-header-shell { gap: 8px; }
  body .bele-header-brand { gap: 5px; }
  body .bele-header-brand strong { font-size: .75rem; letter-spacing: .08em; }
  body .bele-header-steam-login { padding: 7px; font-size: .52rem; letter-spacing: 0; }
}
@media (max-width: 360px) { body .bele-header-brand svg { display: none; } }