/* ==========================================================================
   FSN — the draft pool, /draft/pool/. Styles for draft.js; the page shell
   and the shared bits (.bd-q, .bd-chip, .bd-cta, .bd-account, .lg-table)
   come from fsn.css and binder.css. Built for a phone on draft night first.
   ========================================================================== */
.dp { --dp-gold: #C8A24B; }
.dp .bd-account { margin-bottom: 14px; }
.dp-tabs { display: flex; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--gray-rule); overflow-x: auto; scrollbar-width: none; }
.dp-tabs::-webkit-scrollbar { display: none; }
.dp-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
  font: 700 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-text); padding: 10px 12px 11px; white-space: nowrap; }
.dp-tab .n { font: 600 11px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--gray-text); margin-left: 6px; opacity: .8; }
.dp-tab:hover { color: var(--ink); }
.dp-tab.on { color: var(--ink); border-bottom-color: var(--fsn-red); }
/* Where you pick: the GM's slots off the order, the next one lit */
.dp-picks { margin: 0 0 14px; border: 1px solid var(--gray-rule); border-radius: var(--radius); background: var(--paper); box-shadow: var(--sh-1); }
.dp-picks > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 11px 14px; }
.dp-picks > summary::-webkit-details-marker { display: none; }
.dp-picks > summary::before { content: "\25B8"; font-size: 11px; color: var(--gray-text); transition: transform .15s ease; }
.dp-picks[open] > summary::before { transform: rotate(90deg); }
.dp-picks > summary:hover .dp-picks-h { color: var(--ink); }
.dp-picks-h { font: 700 10px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-text); }
.dp-picks-n { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--gray-text); }
.dp-picks-in { padding: 0 14px 10px; border-top: 1px solid var(--gray-rule); }
.dp-picks-line { font-size: 14px; line-height: 1.5; color: var(--ink); }
.dp-picks-line b { font-weight: 700; }
.dp-picks-sw { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0; }
.dp-picks-sw a { color: var(--fsn-red-ink); font-size: 12.5px; }
.dp-picks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dp-picks-list li { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; padding: 6px 8px; border: 1px solid var(--gray-rule); border-radius: var(--radius-sm); background: var(--paper-2); }
.dp-picks-list li b { font: 700 14px/1 var(--cond); color: var(--ink); }
.dp-picks-list li small { margin-top: 3px; font: 600 8.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gray-text); white-space: nowrap; }
.dp-picks-list li.is-gone { opacity: .4; }
.dp-picks-list li.is-gone b { text-decoration: line-through; }
.dp-picks-list li.is-next { background: #1D2836; border-color: var(--dp-gold); box-shadow: 0 0 0 2px rgba(200,162,75,.25); }
.dp-picks-list li.is-next b { color: #FFF3CC; } .dp-picks-list li.is-next small { color: var(--dp-gold); }
.dp-picks-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--gray-text); }
.dp-picks-sw span { display: inline-flex; gap: 4px; }
.dp-picks-sw .bd-chip { font-size: 10px; padding: 5px 9px; }
.dp-round { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; }
.dp-round .r { flex: 0 0 58px; padding-top: 8px; font: 700 9.5px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-text); }
.dp-round .dp-picks-list li { min-width: 40px; padding: 4px 6px; }
.dp-round .dp-picks-list li b { font-size: 12px; }
.dp-picks-list li.is-mine:not(.is-next) { border-color: var(--dp-gold); }
/* the marks in the list: your pick falls here */
.dp-mark { display: flex; align-items: center; gap: 10px; padding: 3px 10px; background: var(--paper-2); border-bottom: 1px solid var(--gray-rule); font: 600 10.5px/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-text); }
.dp-mark::before, .dp-mark::after { content: ""; flex: 1 1 0; height: 1px; background: var(--gray-rule-2, var(--gray-rule)); }
.dp-mark span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-mark b { color: var(--ink); } .dp-mark i { font-style: normal; opacity: .7; margin-left: 2px; }
.dp-mark.is-mine { background: #1D2836; color: #FFF3CC; border-bottom-color: var(--dp-gold); }
.dp-mark.is-mine::before, .dp-mark.is-mine::after { background: var(--dp-gold); }
.dp-mark.is-mine b { color: var(--dp-gold); }

/* Check a name: is the prospect already on somebody's farm? */
.dp-check { margin: 0 0 18px; padding: 12px 14px 10px; border: 1px solid var(--gray-rule); border-left: 3px solid var(--dp-gold); border-radius: var(--radius); background: var(--paper); box-shadow: var(--sh-1); }
.dp-check label { display: block; font: 700 10px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-text); margin: 0 0 8px; }
.dp-check .bd-q { width: 100%; box-sizing: border-box; }
.dp-check-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--gray-text); }
.dp-verdicts { list-style: none; margin: 10px 0 0; padding: 0; }
.dp-verdicts li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--gray-rule); font-size: 13.5px; }
.dp-verdicts li b { color: var(--ink); }
.dp-verdicts li span { font: 600 10.5px/1.3 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-text); }
.dp-verdicts li em { font-style: normal; margin-left: auto; font-weight: 600; }
.dp-verdicts li.is-held em { color: var(--fsn-red-ink); }
.dp-verdicts li.is-free em { color: var(--good, #2a7a3b); }
.dp-verdicts li.more { color: var(--gray-text); font-size: 12px; }
.dp-verdict { margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--gray-rule); font-size: 13.5px; line-height: 1.5; }
.dp-verdict.is-free b { color: var(--good, #2a7a3b); }
.dp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.dp-bar .bd-q { flex: 1 1 200px; min-width: 0; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.dp-chips .sep { width: 6px; }
.dp-count { margin: 0 0 8px; font-size: 12.5px; color: var(--gray-text); }
.dp-count b { color: var(--ink); font-weight: 600; }
.dp-count .st { margin-left: 8px; }
.dp-count .st.is-saving { color: var(--gray-text); font-style: italic; }
.dp-count .st.is-saved { color: var(--good, #2a7a3b); }
.dp-count .st.is-local { color: var(--bad, #b3261e); }

/* the list: one row per player, grid so it stays a list on a phone */
.dp-list { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--gray-rule); border-radius: var(--radius); background: var(--paper); box-shadow: var(--sh-1); overflow: hidden; }
.dp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 62px 56px auto; grid-template-areas: "rank who src adp act" "rank note note note act"; align-items: center; gap: 2px 8px;
  padding: 8px 8px 8px 6px; border-bottom: 1px solid var(--gray-rule); background: var(--paper); }
.dp-row:last-child { border-bottom: 0; }
.dp-row.is-picked { background: var(--paper-2); }
.dp-row.is-picked .dp-name { color: var(--gray-text); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.dp-row.is-picked .dp-src, .dp-row.is-picked .dp-adp { opacity: .45; }
.dp-row.is-fav .dp-rank { color: var(--dp-gold); }
.dp-row.is-kept { background: repeating-linear-gradient(135deg, var(--paper) 0 10px, var(--paper-2) 10px 12px); }
.dp-row.is-drag { opacity: .4; }
.dp-row.is-over { box-shadow: inset 0 3px 0 var(--fsn-red); }
.dp-rank { grid-area: rank; text-align: center; font: 700 15px/1 var(--cond); color: var(--ink); }
.dp-rank small { display: block; font: 600 9px/1.2 var(--sans); letter-spacing: .06em; color: var(--gray-text); margin-top: 2px; text-transform: uppercase; }
.dp-who { grid-area: who; min-width: 0; }
.dp-name { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-meta { font: 600 10.5px/1.3 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-text); }
.dp-meta .kept { color: var(--fsn-red-ink); letter-spacing: .02em; text-transform: none; font: 600 11px/1.3 var(--sans); }
.dp-src, .dp-adp { text-align: right; font: 600 12px/1.2 var(--cond); color: var(--ink-2, var(--ink)); white-space: nowrap; }
.dp-src { grid-area: src; } .dp-adp { grid-area: adp; }
.dp-src small, .dp-adp small { display: block; font: 600 8.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-text); }
.dp-src .none, .dp-adp .none { color: var(--gray-rule-2); }
.dp-act { grid-area: act; display: flex; gap: 2px; align-items: center; }
.dp-b { appearance: none; border: 1px solid var(--gray-rule); background: var(--paper); color: var(--gray-text); border-radius: var(--radius-sm); width: 34px; height: 34px; padding: 0; cursor: pointer; font: 700 13px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; }
.dp-b:hover { border-color: var(--ink); color: var(--ink); }
.dp-b:disabled { opacity: .3; cursor: default; }
.dp-b.is-on { background: #1D2836; border-color: var(--dp-gold); color: #FFF3CC; }
.dp-b[data-fav].is-on { color: var(--dp-gold); }
.dp-b[data-pick].is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dp-b.dp-grip { cursor: grab; border-style: dashed; }
.dp-note { grid-area: note; display: none; margin-top: 4px; }
.dp-row.has-note .dp-note, .dp-row.is-editing .dp-note { display: block; }
.dp-note-txt { font-size: 12.5px; color: var(--gray-text); white-space: pre-wrap; cursor: text; }
.dp-note-txt::before { content: '✎ '; opacity: .6; }
.dp-note input { width: 100%; box-sizing: border-box; font: 400 12.5px/1.3 var(--sans); padding: 6px 8px; border: 1px solid var(--gray-rule); border-radius: var(--radius-sm); }
.dp-more { display: flex; gap: 10px; justify-content: center; padding: 12px; }
.dp-empty { margin: 0; padding: 18px 12px; font-size: 13px; color: var(--gray-text); text-align: center; }
.dp-foot { font-size: 12px; color: var(--gray-text); line-height: 1.5; max-width: 72ch; }
.dp-foot a { color: var(--fsn-red-ink); }

@media (max-width: 600px) {
  /* a phone: the name keeps the width; the buttons take a line of their own beneath it */
  .dp-row { grid-template-columns: 36px minmax(0, 1fr) 52px 52px; grid-template-areas: "rank who src adp" "rank act act act" "rank note note note"; gap: 4px 8px; padding: 8px 8px 8px 4px; }
  .dp-name { font-size: 14px; }
  .dp-act { justify-content: flex-start; gap: 6px; }
  .dp-b { width: 40px; height: 34px; }
  .dp-grip { display: none; }
  .dp-src small, .dp-adp small { font-size: 8px; }
}
@media (min-width: 900px) {
  .dp-row { grid-template-columns: 52px minmax(0, 1fr) 80px 80px 80px auto; grid-template-areas: "rank who src adp yahoo act" "rank note note note note act"; }
  .dp-yahoo { display: block; }
}
.dp-yahoo { grid-area: yahoo; display: none; text-align: right; font: 600 12px/1.2 var(--cond); color: var(--ink-2, var(--ink)); white-space: nowrap; }
.dp-yahoo small { display: block; font: 600 8.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-text); }