/* ============================================================
   PLAYER VALUE — page-specific styles.
   Rides on top of styles.css: same slate boards, ice-blue lines,
   brass for money. Only what index.html doesn't already own.
   ============================================================ */

/* Sidebar nav items are <a> here rather than <div> */
.nav a.nav__item { text-decoration: none; }

.pos-pill {
  display: inline-grid; place-items: center;
  width: 24px; height: 21px; border-radius: 5px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; color: #071019;
}
.pos-pill.f, .pos-pill.all { background: var(--blue); }
.pos-pill.d { background: var(--green); }
.pos-pill.g { background: var(--gold); }
.pos-pill.all { background: var(--gold); }

/* ---------- Calculator panel ---------- */
.calc { padding: 0; margin-bottom: 16px; }
.calc__summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; cursor: pointer; list-style: none;
  user-select: none;
}
.calc__summary::-webkit-details-marker { display: none; }
.calc__title {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ice);
  flex: none;
}
.calc__formula {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--steel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Both collapsible panels on this page. The size is not decoration: a bare
   <svg viewBox> with no width/height stretches to fill a flex line, and left off the
   Team totals summary it grew to about 1100px, burying the search box and the results
   three screens down the page. */
.calc .chev, .teams .chev { width: 18px; height: 18px; color: var(--steel); flex: none; transition: transform .18s; }
.calc[open] .chev, .teams[open] .chev { transform: rotate(180deg); }

.calc__body { padding: 0 18px 18px; border-top: 1px solid var(--line-soft); }

.calc__basis {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 18px; padding: 16px 0 4px;
}
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.calc__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-top: 12px;
}
.calc__card {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 10px 11px 9px;
}
.calc__card-h {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ice);
  margin-bottom: 8px;
}
/* The crest in a settings header is decoration, not a data point — shrink it with the
   card rather than with the pills in the results table, which have to stay readable. */
.calc__card-h .pos-pill { width: 19px; height: 17px; border-radius: 4px; font-size: 10px; }
.calc__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.calc__row label { font-size: 11.5px; color: var(--steel); }
.calc__row.muted label { color: var(--steel-dim); }
.calc__note { font-size: 10.5px; color: var(--steel-dim); font-style: italic; }
.calc__row input {
  /* Wide enough for a right-aligned "90,000,000" at this size — the longest value any
     of these fields takes. Narrower and the league cap clips. */
  width: 89px; flex: none; text-align: right;
  background: var(--ink); color: var(--ice);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 4px 7px; font-family: var(--font-mono); font-size: 11.5px;
}
.calc__row input:focus { outline: none; border-color: var(--blue); }
.calc__eq {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line-soft);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--steel-dim);
  line-height: 1.4;
}

.blend-only .triple input {
  background: var(--ink); color: var(--ice);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-family: var(--font-mono); font-size: 13px; text-align: center;
}
.blend-only .triple input:focus { outline: none; border-color: var(--blue); }

/* ---------- Search + filters ---------- */
.search { margin-bottom: 14px; }
.search__bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0 12px;
}
.search__bar:focus-within { border-color: var(--blue); }
.search__bar svg { width: 18px; height: 18px; color: var(--steel-dim); flex: none; }
.search__bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--ice); font-family: var(--font-body); font-size: 15px;
  padding: 12px 0;
}
.search__bar input::placeholder { color: var(--steel-dim); }
.search__clear {
  background: none; border: none; color: var(--steel);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.search__clear:hover { color: var(--ice); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.filters select {
  background: var(--panel-2); color: var(--ice);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 10px; font-family: var(--font-body); font-size: 13px;
}
.seg.sm .seg__btn { padding: 6px 12px; font-size: 12.5px; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--steel); cursor: pointer; }
.chk input { accent-color: var(--blue); width: 15px; height: 15px; }
.filters__note { margin-top: 10px; font-size: 12.5px; color: var(--steel-dim); }
.filters__note b { color: var(--steel); font-family: var(--font-mono); }

/* ---------- Results table ---------- */
.results table { width: 100%; }
.results th.num, .results td.num { text-align: right; }
.results th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.results th.sortable:hover { color: var(--ice); }
.results th.is-sorted { color: var(--blue); }
.results th.is-sorted::after { content: " \25B2"; font-size: 8px; vertical-align: middle; }
.results th.is-sorted.desc::after { content: " \25BC"; }
.results tbody tr { cursor: pointer; }
.results tbody tr:hover { background: var(--raised); }
.results td { vertical-align: middle; }
.cell-name { white-space: nowrap; }
.pname { font-weight: 500; }
.results .mono { font-family: var(--font-mono); font-size: 12.5px; }
.results .dim, .dim { color: var(--steel-dim); }
.results .gold, .gold { color: var(--gold); }
/* A worth standing on the maximum-contract ceiling rather than on the formula. */
.capmark { color: var(--steel-dim); margin-left: 2px; }
.headline__cap { font-size: 11.5px; color: var(--steel); margin-top: 5px; }
/* Fantrax's own price for the same player: money, so gold — but a shade off the basis
   column's, because it is the second opinion and not the one the page is priced on. */
.results .fxgold, .teamsum .fxgold, .fxgold { color: #C9A45E; opacity: .92; }
.results .pos, .pos { color: var(--green); }
.results .neg, .neg { color: var(--red); }

.own-tag, .fa-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
}
.own-tag { background: rgba(226,58,72,.13); color: #F08A93; border: 1px solid rgba(226,58,72,.3); }
.fa-tag { background: rgba(69,196,141,.12); color: var(--green); border: 1px solid rgba(69,196,141,.28); }

.tag.rk { background: rgba(79,163,227,.16); color: var(--blue); }
.cell-name .tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
}

.results__more { padding: 14px; text-align: center; border-top: 1px solid var(--line-soft); }

/* ---------- Detail drawer ---------- */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(6,11,16,.66);
  backdrop-filter: blur(2px); z-index: 40;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 94vw);
  background: linear-gradient(180deg, var(--panel) 0%, #0F1822 100%);
  border-left: 1px solid var(--line); z-index: 41;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.drawer.hidden, .drawer-scrim.hidden { display: none; }

.drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 22px 22px 16px; border-bottom: 1px solid var(--line-soft);
}
.drawer__name {
  font-family: var(--font-display); font-size: 25px; font-weight: 600;
  letter-spacing: .01em; line-height: 1.15;
}
.drawer__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-top: 9px; font-size: 12.5px; color: var(--steel);
}
.drawer__x {
  background: none; border: none; color: var(--steel);
  font-size: 27px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.drawer__x:hover { color: var(--ice); }

.drawer__body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }

.headline {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 15px 16px; margin-bottom: 18px;
}
.headline__k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--steel-dim);
}
.headline__v {
  font-family: var(--font-mono); font-size: 30px; font-weight: 600;
  margin: 4px 0 2px; letter-spacing: -.01em;
}
.headline__sub { font-size: 12.5px; color: var(--steel); }

.dsec { margin-bottom: 22px; }
.dsec__h {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--steel);
  margin-bottom: 10px;
}

/* Transaction shortcuts in the detail drawer — wraps on a narrow drawer. */
.txlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* My mark. The unrated state stays neutral so a full table does not read as pre-judged;
   4-5 go green, 1-3 stay quiet, a toss goes red. Fixed width keeps the column aligned. */
.markpick {
  width: 62px; padding: 4px 6px; border-radius: 5px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--steel-dim);
  font-family: var(--font-mono); font-size: 12px; text-align: center;
}
.markpick:hover { border-color: var(--line); color: var(--ice); }
.markpick:focus { outline: none; border-color: var(--blue); }
.markpick.is-high { background: rgba(69,196,141,.14); border-color: rgba(69,196,141,.45); color: var(--green); }
.markpick.is-low { background: var(--raised); border-color: var(--line); color: var(--ice); }
.markpick.is-toss { background: rgba(226,58,72,.14); border-color: rgba(226,58,72,.45); color: #F08A93; }
/* The drawer copy sits inline with the name, so it has to clear the display face. */
.markpick--lg { width: 70px; padding: 5px 7px; font-size: 13px; margin-right: 10px; vertical-align: middle; }

.cell-mark { width: 62px; padding-right: 4px; }

.dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtable th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--steel-dim); font-weight: 500;
  padding: 0 8px 7px 0; border-bottom: 1px solid var(--line-soft);
}
.dtable th.num, .dtable td.num { text-align: right; padding-right: 0; }
.dtable td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-soft); }
.dtable tr.is-basis td { background: rgba(79,163,227,.07); }
.dtable tr.is-basis td:first-child { box-shadow: inset 2px 0 0 var(--blue); padding-left: 8px; }
.dtable .mono { font-family: var(--font-mono); font-size: 12.5px; }

.whatif { display: flex; align-items: center; gap: 12px; }
.whatif input {
  width: 150px; background: var(--ink); color: var(--ice);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 11px; font-family: var(--font-mono); font-size: 14px; text-align: right;
}
.whatif input:focus { outline: none; border-color: var(--blue); }
.whatif__out { font-family: var(--font-mono); font-size: 13px; }

/* What he'd add to a lineup — same shape as the what-if row above it */
.lineup { display: flex; align-items: center; gap: 12px; }
.lineup select {
  width: 150px; background: var(--ink); color: var(--ice);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 11px; font-family: var(--font-body); font-size: 13.5px;
}
.lineup select:focus { outline: none; border-color: var(--blue); }
.lineup__out { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.lineup__out .pos { color: var(--green); }

/* Both sides of a trade for a player who is already on someone's roster */
.trade { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.trade__h { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin-bottom: 7px; }
.trade__row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 13px; }
.trade__row b { font-family: var(--font-mono); font-size: 14px; }
.trade__row b.dim { color: var(--steel-dim); }
.trade .hint { margin-top: 7px; }

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pcell {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 8px 9px;
}
.pcell__k {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--steel-dim);
}
.pcell__v { font-family: var(--font-mono); font-size: 14px; margin-top: 2px; }

.dnote {
  margin-top: 10px; font-size: 12.5px; color: var(--steel);
  border-left: 2px solid var(--line); padding-left: 10px; line-height: 1.5;
}
.dnote.big { color: var(--ice); border-left-color: var(--gold); }

.hist { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.hist__col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%;
}
.hist__bar {
  width: 100%; max-width: 46px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dim) 100%);
  border-radius: 3px 3px 0 0; min-height: 4px;
}
.hist__v { font-family: var(--font-mono); font-size: 11.5px; margin-top: 5px; }
.hist__y { font-size: 10.5px; color: var(--steel-dim); }
.hist__g { font-family: var(--font-mono); font-size: 10px; color: var(--steel-dim); }

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .calc__basis { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .results table { font-size: 13px; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   FANTRAX — the second projection, its import, and team totals
   ============================================================ */

/* Head: the stat strip and the update button stack on the right of the title. */
.head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fxbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.fxbar__stamp {
  font-size: 11.5px; color: var(--steel-dim); font-family: var(--font-mono);
  max-width: 340px; text-align: right;
}
.fxbar__stamp.is-on { color: var(--steel); }

/* Four blend weights where there used to be three. */
.triple.quad { grid-template-columns: repeat(4, 1fr); }

/* The cell the current basis is actually pricing off, in the two projection columns. */
.results .is-basis-cell {
  color: var(--ice);
  box-shadow: inset 0 -2px 0 var(--blue-dim);
}
.results .zero, .teamsum .zero { color: var(--steel-dim); }

/* ---------- Team totals ---------- */
/* Sits under the results, closed by default: this page is a player search, and the
   team totals are context you go looking for, not the thing you came for. */
.teams { padding: 0; margin: 18px 0 16px; }
.teams .table-wrap { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; }
.teamsum table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.teamsum th, .teamsum td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.teamsum thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--steel);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  text-align: left; white-space: nowrap;
}
.teamsum .num { text-align: right; }
.teamsum thead th.num { text-align: right; }
.teamsum .s-team { font-family: var(--font-display); font-weight: 600; color: var(--ice); white-space: nowrap; }
.teamsum tbody tr:hover td { background: rgba(79,163,227,.05); }
.teamsum tfoot td {
  background: var(--panel-2); color: var(--ice);
  font-weight: 600; border-bottom: 0; border-top: 1px solid var(--line-soft);
}
.teamsum .is-basis-cell { color: var(--ice); box-shadow: inset 0 -2px 0 var(--blue-dim); }
.teams .sum-legend { padding: 0 18px 15px; margin-top: 10px; }

/* ---------- Import modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(5,10,15,.66);
  backdrop-filter: blur(2px); z-index: 60;
}
.modal {
  position: fixed; z-index: 61;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel) 0%, #0F1822 100%);
  border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
}
.modal.hidden, .modal-scrim.hidden { display: none; }
.modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft);
}
.modal__k { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.modal__t { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ice); }
.modal__body { padding: 18px 20px; overflow-y: auto; }
.modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--line-soft);
}

.fxstep { display: flex; gap: 14px; margin-bottom: 20px; }
.fxstep:last-of-type { margin-bottom: 12px; }
.fxstep__n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-dim); color: var(--ice);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
}
.fxstep__b { flex: 1; min-width: 0; }
.fxstep__h { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ice); margin-bottom: 5px; }
.fxstep__b .hint { display: block; margin: 0 0 10px; }
.fxstep__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fxstep a.btn { text-decoration: none; }

.fxdrop {
  border: 1px dashed var(--line-soft); border-radius: 9px;
  padding: 18px 14px; text-align: center; cursor: pointer;
  color: var(--steel); font-size: 12.5px; background: rgba(79,163,227,.03);
  transition: border-color .15s, background .15s, color .15s;
}
.fxdrop b { color: var(--ice); }
.fxdrop:hover, .fxdrop.is-over { border-color: var(--blue); background: rgba(79,163,227,.09); color: var(--ice); }

#fxPaste {
  width: 100%; margin-top: 10px; resize: vertical;
  background: var(--panel-2); color: var(--ice);
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 9px 11px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
}
#fxPaste:focus { outline: none; border-color: var(--blue); }

.fxstatus { font-size: 12px; color: var(--steel); line-height: 1.6; min-height: 1em; }
.fxstatus:empty { display: none; }
.fxstatus b { color: var(--ice); }
.fxstatus.is-ok { color: var(--green); }
.fxstatus.is-ok b { color: var(--green); }
.fxstatus.is-bad { color: var(--red); }
.fxstatus.is-bad b { color: var(--red); }

@media (max-width: 900px) {
  .head-side { align-items: flex-start; }
  .fxbar { justify-content: flex-start; }
  .fxbar__stamp { text-align: left; }
}

/* ============================================================
   RESULTS TABLE — a quarter shorter a row
   ============================================================
   Two things were making the rows tall. The page-wide table padding (12px top and
   bottom) and the mark dropdown, which at 24px set the floor no matter what the
   padding did — so both come down together. And below about 1440px the extra
   projection columns squeezed the Status cell until "Free agent" broke over two
   lines, taking every free-agent row from 49px to 64px on its own; the tags are now
   sized and told not to wrap, so the row height is the same at any width. */
.results thead th { padding: 8px 10px; font-size: 9.5px; letter-spacing: .1em; }
.results tbody td { padding: 8px 10px; font-size: 12.5px; }
.results .mono { font-size: 11.5px; }
.results .markpick { width: 50px; padding: 1px 3px; font-size: 11px; }
.results .cell-mark { width: 50px; padding-right: 3px; }
.results .pos-pill { width: 21px; height: 18px; font-size: 11px; }
.results .cell-name .tag { font-size: 9px; padding: 0 4px; }

/* Never break an owner or a "Free agent" over two lines — that alone was worth 15px
   a row, and only on the rows that happened to be free agents, so the table read as
   unevenly spaced as well as tall. */
.own-tag, .fa-tag { white-space: nowrap; }
.results .own-tag, .results .fa-tag { padding: 1px 6px; font-size: 10px; }
.results .cell-status { white-space: nowrap; }

/* ---------- Outside scouting links in the drawer ---------- */
.drawer__links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.xlink {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  color: var(--steel); font-size: 11.5px; font-weight: 500; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.xlink:hover { border-color: var(--blue); color: var(--ice); background: rgba(79,163,227,.09); }
.xlink svg { width: 11px; height: 11px; flex: none; opacity: .75; }