/* Skills & Mastery. Field-manual theme, aligned with progression.css: ink numbers, white input
   wells, chips as ink-outlined plates (red when on). The per-skill --sk-accent colours the data
   file supplies are deliberately not used. */
.sk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sk-head .lede { margin-bottom: .2rem; }
.sk-head .label a { text-decoration: underline; text-underline-offset: 2px; }
.sk-head .label a:hover { color: var(--red); }
.sk-actions { display: flex; gap: .5rem; padding-bottom: .2rem; flex-wrap: wrap; }
.hud-text { margin: 0 0 .7rem; font-family: var(--serif); font-size: .92rem; color: var(--ink-2); }
.hud-note { margin: .5rem 0 0; font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--ink-2); }

.sk-banner { margin-bottom: 1rem; }
.sk-banner-body { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-end; }
.sk-career-num { display: flex; align-items: baseline; gap: .45rem; }
.sk-career-num strong { font-family: var(--mono); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.sk-career-cap { color: var(--ink-3); font-family: var(--mono); }
.sk-banner-stats { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: .8rem 1.4rem; flex: 1; }
.sk-banner-stats .label { display: block; margin-bottom: .15rem; }
.sk-banner-stats strong { font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sk-warn { color: var(--olive); font-family: var(--mono); font-weight: 700; font-size: .92rem !important; }

.sk-ammo { margin-bottom: 1.1rem; }
.sk-ammo-body { margin: 0 0 .75rem; color: var(--ink-2); max-width: 72ch; }

.sk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.1rem; }
@media (max-width: 980px) { .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sk-grid { grid-template-columns: 1fr; } .sk-banner-stats { grid-template-columns: 1fr; } }

.sk-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; padding: 0 .2rem; font-style: normal; font-family: var(--mono); font-weight: 700; font-size: .72rem; color: var(--ink); }
.sk-card-sum { margin: 0 0 .7rem; color: var(--ink-2); font-size: .92rem; }
.sk-level-row { display: grid; grid-template-columns: 5.5rem 4.2rem 1fr; gap: .45rem; align-items: center; margin-bottom: .55rem; }
.sk-level-row-solo { grid-template-columns: 4.2rem 1fr; }
.sk-num { width: 100%; padding: .35rem .4rem; background: #fff; color: var(--ink); border: 1px solid var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.sk-num:focus { border-color: var(--red); outline: none; }
.sk-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: .5rem 0; background: var(--rule-2); border: 1px solid var(--rule); border-radius: 0; outline: none; }
.sk-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.sk-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.sk-slider:focus-visible::-webkit-slider-thumb { background: var(--red); border-color: var(--red); }
.sk-slider:focus-visible::-moz-range-thumb { background: var(--red); border-color: var(--red); }
.sk-card-meta { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); margin-bottom: .55rem; }
.sk-card-meta em { font-style: normal; color: var(--ink); font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }

.sk-focus { margin: 0 0 .75rem; padding-left: 1.1rem; color: var(--ink-2); font-size: .88rem; }
.sk-focus li { margin: .15rem 0; }
.sk-focus li::marker { color: var(--ink-3); }
.sk-focus-full { margin-bottom: 0; }
.sk-card-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.sk-curve { margin-bottom: .5rem; }
.sk-curve-scroll { max-height: 280px; overflow: auto; border: 1px solid var(--rule); background: #fff; }
.sk-curve-scroll-tall { max-height: 420px; }
.hud-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hud-table th, .hud-table td { padding: .45rem .7rem; text-align: left; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.hud-table th { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--ink); background: var(--plate-2); position: sticky; top: 0; }
.hud-table td.mono { font-variant-numeric: tabular-nums; }
.sk-curve-table { margin: 0; }
.sk-curve-table th, .sk-curve-table td { padding: .35rem .6rem; }
.sk-curve-table tr.is-current { background: var(--plate-2); box-shadow: inset 3px 0 0 var(--red); }
.sk-curve-table tr.is-target { background: var(--plate-2); box-shadow: inset 3px 0 0 var(--good); }

.sk-detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .85fr); gap: .7rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .sk-detail-layout { grid-template-columns: 1fr; } }

.sk-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .sk-calc-grid { grid-template-columns: 1fr; } }

.sk-result { display: grid; gap: .45rem; padding: .75rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--ink); }
.sk-result-xp { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sk-result-xp strong { font-family: var(--mono); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.sk-result-blurb { margin: 0; color: var(--ink-2); font-size: .92rem; }

.sk-mix { margin-bottom: 1rem; }
.sk-mix-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.sk-mix-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 3.2rem; gap: .45rem; align-items: center; margin: .45rem 0; }
.sk-mix-row .label { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--ink); }
.sk-mix-pct { text-align: right; color: var(--ink-2); font-family: var(--mono); font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; }
.sk-mix-out { margin-top: .6rem; padding: .65rem .75rem; background: #fff; border: 1px solid var(--rule); font-size: .92rem; }
.sk-mix-out ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.sk-mix-out li { margin: .2rem 0; }
.sk-mix-out strong { font-family: var(--mono); }
.sk-mix-out .dim, .sk-pure .dim { color: var(--ink-3); font-family: var(--mono); font-size: .8rem; }

.sk-pure .label { display: block; margin-bottom: .35rem; }
.sk-pure ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
.sk-pure li { margin: .25rem 0; }
.sk-pure strong { color: var(--ink); font-family: var(--mono); }

.sk-side { display: flex; flex-direction: column; gap: .7rem; }
.sk-perk-list, .sk-mile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sk-perk-list li, .sk-mile-list li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .55rem; padding: .45rem 0; border-top: 1px solid var(--rule-2); }
.sk-perk-list li:first-child, .sk-mile-list li:first-child { border-top: 0; padding-top: 0; }
.sk-perk-lv { color: var(--ink-2); font-family: var(--mono); font-weight: 700; font-size: .76rem; letter-spacing: .02em; text-transform: uppercase; padding-top: .1rem; }
.sk-perk-list strong, .sk-mile-list strong { display: block; font-size: .92rem; font-weight: 600; }
.sk-perk-list span, .sk-mile-list span { display: block; color: var(--ink-2); font-size: .84rem; }

.sk-tables { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .sk-tables { grid-template-columns: 1fr; } }
.sk-tables .hud-body > .hud-table { border: 1px solid var(--rule); }

.sk-notes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ink-3); font-size: .82rem; }
.sk-sib { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 .5rem; }
.chip, .sk-sib .chip {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .3rem;
  font-family: var(--mono); font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: .42rem .6rem; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; text-align: center;
}
.chip:hover, .sk-sib .chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.on, .sk-sib .chip.on { background: var(--red); color: #FBF6EA; border-color: var(--red); }

.sk code { font-family: var(--mono); font-size: .85em; color: var(--ink); background: var(--plate-2); padding: 0 .25em; border: 1px solid var(--rule-2); }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .sk-detail-layout, .sk-tables { grid-template-columns: minmax(0, 1fr); }
  .sk-tables .hud-body { overflow-x: auto; }
}
@media (max-width: 600px) {
  .sk-head { flex-direction: column; align-items: stretch; }
  .sk-actions .btn { flex: 1 1 auto; }
}

/* ---------- XP curve provenance ---------- */
/* Each level says whether its figure is published, filled in between published
   points, or extrapolated past where the changelog stops. */
.sk-curve-source { color: var(--ink-3); font-size: .82rem; }
.sk-basis {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.sk-basis-official { color: var(--red); }
.sk-basis-derived { color: var(--ink-2); }
.sk-basis-estimated { color: var(--ink-3); font-style: italic; }
.sk-curve-table tr[data-basis="official"] td { background: var(--accent-dim); }