/* The DFS section. Built from a coach's kit: a board with the sum on it, a route to run, a lineup card with the cap on it. */

/* ---------- /dfs ---------- */
.fct-dfs-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.2rem 2.4rem; align-items: center; margin: 0 0 2.2rem; padding: clamp(1.4rem, 3.4vw, 2.6rem) clamp(1.2rem, 3.4vw, 2.8rem); overflow: hidden; }
main.fct-hub--dfs.ffn-pilot-page .fct-dfs-hero .ffn-page-headline-title { margin: 0; color: var(--chalk); font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: .98; }
.fct-dfs-hero p { max-width: 31rem; margin: .8rem 0 0; color: var(--chalk-dim); font-size: 1.1rem; line-height: 1.5; }
.fct-sum-link { display: block; color: inherit; text-decoration: none; }
.fct-sum { display: block; width: 100%; height: auto; }
.fct-sum text { fill: var(--chalk); font-family: var(--ffn-ed-font-hand); font-weight: 700; }
.fct-sum .is-note { font-size: 31px; }
.fct-sum .is-sum { font-size: 66px; }
.fct-sum .is-answer { font-size: 84px; }
.fct-sum-ring { fill: none; stroke: var(--pylon-soft); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fct-sum-ring { animation: fct-ring 1s .4s ease-out both; }
  @keyframes fct-ring { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

.fct-route-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem 1.3rem; margin: 0; padding: 0; list-style: none; }
.fct-route-map li { position: relative; }
.fct-route-map a { display: grid; gap: .15rem; color: var(--ffn-ed-text); text-decoration: none; }
.fct-route-map b { position: relative; z-index: 1; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin-bottom: .3rem; border: 3px solid var(--ffn-ed-accent); border-radius: 50%; background: var(--ffn-ed-bg); color: var(--ffn-ed-accent); font: 700 1.7rem/1 var(--ffn-ed-font-hand); }
.fct-route-map li:not(:last-child)::before { content: ""; position: absolute; top: 1.28rem; left: 2.9rem; right: -1.1rem; border-top: 3px dashed var(--ffn-ed-accent); opacity: .45; }
.fct-route-map strong { font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.fct-route-map span { color: var(--ffn-ed-text-muted); font-size: .93rem; line-height: 1.45; }
.fct-route-map a:hover strong { color: var(--ffn-ed-accent); }

.fct-contests { padding: .3rem 1.2rem .2rem; border-radius: 1rem; background: var(--ffn-ed-surface); box-shadow: inset 0 0 0 1px var(--ffn-ed-border-strong); }
.fct-contests table { width: 100%; border-collapse: collapse; }
.fct-contests thead th { padding: .55rem 1.1rem .45rem 0; color: var(--ffn-ed-text-soft); font-size: .8rem; font-weight: 700; text-align: left; white-space: nowrap; }
.fct-contests tbody tr { border-top: 1px solid var(--ffn-ed-border); }
.fct-contests tbody :is(td, th) { padding: .8rem 1.1rem .85rem 0; color: var(--ffn-ed-text-muted); font-size: .93rem; font-weight: 400; line-height: 1.42; text-align: left; vertical-align: top; }
.fct-contests tbody th { min-width: 15rem; }
.fct-contests tbody th a { display: block; color: var(--ffn-ed-text); font-size: 1.08rem; font-weight: 800; text-decoration: none; }
.fct-contests tbody th a:hover { color: var(--ffn-ed-accent); }
.fct-contests tbody th span { display: block; margin-top: .1rem; }
.fct-contest-pay { width: 9rem; }
.fct-pay { display: inline-flex; align-items: flex-end; gap: 2px; width: 8rem; height: 2.5rem; border-bottom: 2px solid var(--ffn-ed-border-strong); }
.fct-pay i { flex: 1 1 0; max-width: 1.1rem; border-radius: 1.5px 1.5px 0 0; background: var(--ffn-ed-accent); }
.fct-pay i.is-none { height: 3px; background: var(--ffn-ed-border-strong); }
.fct-pay-none { display: block; max-width: 8rem; color: var(--ffn-ed-text-soft); font: 700 1.15rem/1.05 var(--ffn-ed-font-hand); }

.fct-dfs-board { border-radius: 1.1rem; }
.fct-dfs-board b { color: var(--chalk); }

/* ---------- the calculators: the numbers on the left, the answer on the board ---------- */
form[data-dfs-calc] { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: .8rem 1.2rem; }
form[data-dfs-calc] .fct-hub-fields { grid-column: 1; margin: 0; align-content: start; }
form[data-dfs-calc] > button { grid-column: 1; justify-self: start; }
form[data-dfs-calc] .fct-hub-result { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 1rem 1.2rem; border-radius: .9rem; background: var(--board); color: var(--chalk-dim); font-size: .98rem; line-height: 1.5; }
form[data-dfs-calc] .fct-hub-result strong { color: var(--chalk); font-size: 1.22rem; font-weight: 900; letter-spacing: -.01em; }

@media (max-width: 860px) {
  .fct-dfs-hero { grid-template-columns: minmax(0, 1fr); }
  .fct-sum-link { max-width: 26rem; }
}
@media (max-width: 760px) {
  .fct-route-map { gap: 0; }
  .fct-route-map a { grid-template-columns: 3.3rem minmax(0, 1fr); padding: 0 0 1.1rem; }
  .fct-route-map b { grid-row: 1 / span 2; margin: 0; }
  .fct-route-map strong { padding-top: .1rem; }
  .fct-route-map span { grid-column: 2; }
  .fct-route-map li:not(:last-child)::before { top: 2.9rem; bottom: .1rem; left: 1.28rem; right: auto; border-top: 0; border-left: 3px dashed var(--ffn-ed-accent); }
  .fct-dfs-board > div { display: none; }
  form[data-dfs-calc] { grid-template-columns: minmax(0, 1fr); }
  form[data-dfs-calc] .fct-hub-result { grid-column: 1; grid-row: auto; }
  .fct-contests { padding: .2rem .9rem; }
  .fct-contests thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fct-contests tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; padding: .8rem 0; }
  .fct-contests tbody tr:first-child { border-top: 0; }
  .fct-contests tbody :is(td, th) { display: block; padding: 0; min-width: 0; width: auto; }
  .fct-contests tbody th { grid-column: 1; grid-row: 1; }
  .fct-contest-pay { grid-column: 2; grid-row: 1; }
  .fct-contests tbody td[data-l] { grid-column: 1 / -1; }
  .fct-contests td[data-l]::before { content: attr(data-l) ": "; color: var(--ffn-ed-text); font-weight: 700; }
  .fct-pay { width: 5.6rem; height: 2.2rem; }
  .fct-pay-none { max-width: 5.6rem; font-size: 1.02rem; }
}

/* ---------- pages that share the older pieces ---------- */
.fct-dfs-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; border-radius: var(--ffn-ed-radius-card); overflow: hidden; background: #2b3d5e; box-shadow: var(--ffn-ed-shadow-card); }
.fct-dfs-board > * { display: grid; gap: .35rem; align-content: start; padding: 1.15rem 1.3rem 1.25rem; background: #0b1a33; color: #dce7ff; text-decoration: none; }
.fct-dfs-board a:hover, .fct-dfs-board a:focus-visible { background: #10264a; }
.fct-dfs-board b { font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #f3f7ff; }
.fct-dfs-board p { margin: 0; font-size: .95rem; line-height: 1.5; }
.fct-dfs-board .fct-chalk { width: min(100%, 230px); background: none; color: #dce7ff; }
.fct-dfs-board + .fct-note, .fct-table-scroll + .fct-note { margin-top: .75rem; }
main.fct-hub--dfs.ffn-data-page .ffn-stat-strip-value { white-space: normal; overflow: visible; text-overflow: clip; }
.fct-dfs-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: .9rem; align-items: start; }
.fct-dfs-two h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 800; }
.fct-dfs-boards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); }
.fct-dfs-boards .rankings-table { min-width: 0; }
.fct-table-scroll .rankings-table td.fct-dfs-text { white-space: normal; min-width: 11rem; line-height: 1.45; }
.fct-dfs-corr table { table-layout: fixed; width: 100%; }
.fct-dfs-corr th:nth-child(1) { width: 29%; }
.fct-dfs-corr th:nth-child(2) { width: 9%; }
.fct-dfs-corr th:nth-child(3) { width: 19%; }
.fct-dfs-corr th:nth-child(4) { width: 11%; }
.rankings-table td.fct-dfs-range { position: relative; }
.fct-dfs-range::before { content: ""; position: absolute; top: 15%; bottom: 15%; left: 50%; width: 1px; background: var(--ffn-ed-border-strong); }
.fct-dfs-range span { position: absolute; top: 50%; transform: translateY(-50%); }
.fct-dfs-range .is-span { height: 3px; border-radius: 2px; background: var(--ffn-ed-accent); opacity: .45; }
.fct-dfs-range .is-dot { width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ffn-ed-accent); box-shadow: 0 0 0 2px var(--ffn-ed-surface); }
.fct-dfs-list { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--ffn-ed-text-muted); line-height: 1.6; font-size: .95rem; }
.fct-dfs-list li { margin: .3rem 0; }
.fct-dfs-list a, .fct-dfs-rule a { color: var(--ffn-ed-accent); font-weight: 700; text-underline-offset: 3px; }
.fct-dfs-fold summary { box-sizing: border-box; min-height: 44px; padding: .6rem 0; color: var(--ffn-ed-accent); font-weight: 700; line-height: 1.5; cursor: pointer; }
.fct-dfs-fold .fct-dfs-list { margin-top: 0; }
.fct-dfs-rule { display: grid; gap: .4rem; align-content: start; }
.fct-dfs-rule p, .fct-dfs-rule li { overflow-wrap: anywhere; }
.fct-dfs-rule dl { display: grid; grid-template-columns: 1fr auto; gap: .1rem .9rem; margin: 0; font-size: .9rem; line-height: 1.5; }
.fct-dfs-rule dd { margin: 0; font-family: var(--ffn-ed-font-mono); font-weight: 700; text-align: right; }
.fct-dfs-rule h4 { margin: .5rem 0 .1rem; font-size: .82rem; font-weight: 800; }
.fct-dfs-rule ul { margin: 0; padding-left: 1.05rem; color: var(--ffn-ed-text-muted); font-size: .86rem; line-height: 1.5; }
.fct-dfs-flagged { border-left: 4px solid var(--ffn-ed-accent); padding-left: .8rem; }
.fct-hub-result .fct-table-scroll .rankings-table :is(th, td) { white-space: normal; }
@media (max-width: 640px) {
  .fct-dfs-corr table { table-layout: auto; }
  .fct-dfs-corr th:nth-child(5), .fct-dfs-corr td:nth-child(5) { display: none; }
}

/* ---------- /dfs/lineup-builder and the rosters on /dfs/build-a-lineup ---------- */
#dfs-step-check { scroll-margin-top: 5rem; }
.dfs-promise { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: .7rem; background: var(--ffn-ed-accent-soft); color: var(--ffn-ed-text); font-weight: 700; line-height: 1.5; }
.dfs-warn { margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid var(--ffn-ed-border-strong); border-left: 4px solid var(--ffn-ed-accent); border-radius: .6rem; background: var(--ffn-ed-surface); color: var(--ffn-ed-text); line-height: 1.5; }
.dfs-how { margin: 0 0 1rem; }
.dfs-load { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; margin: 0 0 1rem; }
.dfs-load label { flex: 1 1 240px; }
.dfs-notes { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ffn-ed-text-muted); line-height: 1.55; }
.dfs-model { margin: 0 0 1rem; color: var(--ffn-ed-text); line-height: 1.55; }
.dfs-model p { margin: 0 0 .5rem; }
.dfs-lineup summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .8rem; align-items: baseline; padding: .65rem 1rem .7rem; background: var(--board); color: var(--chalk); cursor: pointer; }
.dfs-lineup summary::-webkit-details-marker { display: none; }
.dfs-lineup-name { font-weight: 800; }
.dfs-lineup-points { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; }
.dfs-lineup-meta { grid-column: 1 / -1; color: var(--chalk-dim); font-size: .88rem; }
.dfs-model summary, .dfs-exposure summary { box-sizing: border-box; min-height: 44px; padding: .6rem 0; font-weight: 700; line-height: 1.5; cursor: pointer; }
.dfs-model li { margin: .1rem 0; }

.dfs-box .fct-table-scroll { max-height: min(62vh, 560px); overflow: auto; border: 1px solid var(--ffn-ed-border); border-radius: .6rem; }
.dfs-box thead th { position: sticky; top: 0; z-index: 2; background: var(--ffn-ed-surface); }
.dfs-box th:first-child, .dfs-box td:first-child { position: sticky; left: 0; z-index: 1; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; background: var(--ffn-ed-surface); }
.dfs-box thead th:first-child { z-index: 3; }
.dfs-box td { vertical-align: middle; padding-top: .15rem; padding-bottom: .15rem; }
.fct-hub-tool .dfs-box button.fct-sort { all: unset; cursor: pointer; border-radius: .25rem; } /* the shared tool button style outranks the table's */
html[data-theme="dark"] .fct-hub-tool .dfs-box button.fct-sort { color: inherit; } /* fct-hub.css darkens tool button text for the bright dark-theme button */
.fct-hub-tool .dfs-box button.fct-sort:focus-visible { outline: 2px solid var(--ffn-ed-accent); outline-offset: 2px; }
.dfs-box td.dfs-note { font-size: .85rem; line-height: 1.3; }
.dfs-box tr.is-skipped td { opacity: .55; }
.dfs-box input[type="number"] { width: 5.4rem; padding: .4rem .5rem; }
.fct-hub-tool input[type="radio"], .fct-hub-tool input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; accent-color: var(--ffn-ed-accent); }
.fct-hub-tool label.dfs-tick { display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }

.dfs-modes { display: grid; gap: .4rem; margin: 0 0 1rem; padding: 0; border: 0; }
.dfs-modes legend { padding: 0 0 .3rem; font-weight: 700; font-size: .9rem; }
.fct-hub-tool .dfs-modes label { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 500; font-size: 1rem; line-height: 1.35; cursor: pointer; }
.fct-hub-tool .dfs-modes input { flex: none; }
.dfs-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; }
.dfs-status { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-height: 1.6rem; line-height: 1.5; }
.dfs-status progress { flex: 1 1 160px; max-width: 320px; height: .7rem; accent-color: var(--ffn-ed-accent); }

.dfs-export { margin: 1rem 0; padding: .9rem 1rem; border-radius: .75rem; background: var(--ffn-ed-accent-soft); line-height: 1.5; }
.dfs-export p { margin: .5rem 0 0; }
.dfs-lineups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: .8rem; align-items: start; margin: 1rem 0; }
.dfs-exposure { padding: .2rem .9rem .5rem; border: 1px solid var(--ffn-ed-border); border-radius: .75rem; background: var(--ffn-ed-surface); }
.dfs-lineup { overflow: hidden; border-radius: .9rem; background: var(--ffn-ed-surface); box-shadow: inset 0 0 0 1px var(--ffn-ed-border-strong); }
.dfs-lineup > .fct-table-scroll { padding: .1rem .7rem .4rem; }
.dfs-lineup > .fct-note { padding: 0 .9rem .5rem; }
.dfs-lineups:has(> :only-child) { grid-template-columns: minmax(0, 36rem); }
.dfs-exposure { margin: 1rem 0; }
.dfs-lineup .fct-table-scroll .rankings-table, .dfs-exposure .fct-table-scroll .rankings-table { width: 100%; min-width: 0; }
.dfs-lineup .fct-table-scroll .rankings-table th, .dfs-lineup .fct-table-scroll .rankings-table td, .dfs-exposure .fct-table-scroll .rankings-table th, .dfs-exposure .fct-table-scroll .rankings-table td { padding: .4rem .35rem; font-size: .92rem; }
.dfs-lineup .fct-table-scroll .rankings-table tbody td:nth-child(2), .dfs-exposure .fct-table-scroll .rankings-table td:first-child { white-space: normal; overflow-wrap: anywhere; } /* a long name wraps; the numbers stay on screen */
.dfs-lineup td.dfs-num, .dfs-lineup th.dfs-num, .dfs-exposure td.dfs-num, .dfs-exposure th.dfs-num { text-align: right; }
.dfs-lineup tfoot td { font-weight: 800; border-top: 2px solid var(--ffn-ed-border-strong); }
@media (max-width: 640px) {
  .dfs-box th:first-child, .dfs-box td:first-child { max-width: 9.5rem; }
  .dfs-lineup, .dfs-exposure { padding-left: .6rem; padding-right: .6rem; }
}

/* /dfs/build-a-lineup: salaries add up down the column, and all six columns fit a phone, because the totals sit in the last two. */
.fct-hub-article th:nth-child(n+4), .fct-hub-article td:nth-child(n+4) { text-align: right; }
@media (max-width: 480px) {
  .fct-hub-article th, .fct-hub-article td { padding: .4rem .3rem; font-size: .85rem; }
  .fct-hub-article th, .fct-hub-article td:nth-child(2) { white-space: normal; }
}

/* The builder's first screen: two doors, one step rail. */
.dfs-rail { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: step; }
.dfs-rail li { counter-increment: step; display: inline-flex; align-items: center; gap: .45rem; color: var(--ffn-ed-text-soft); font-size: .95rem; font-weight: 700; }
.dfs-rail li::before { content: counter(step); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ffn-ed-border-strong); font: 700 1.2rem/1 var(--ffn-ed-font-hand); }
.dfs-rail li:not(:last-child)::after { content: ""; width: 1.8rem; margin-left: .15rem; border-top: 2px dashed var(--ffn-ed-border-strong); }
.dfs-rail li.is-on { color: var(--ffn-ed-text); }
.dfs-rail li.is-on::before { background: var(--ffn-ed-accent); box-shadow: none; color: #fff; }
.dfs-rail li.is-done::before { box-shadow: inset 0 0 0 2px var(--ffn-ed-accent); color: var(--ffn-ed-accent); }
html[data-theme="dark"] .dfs-rail li.is-on::before { color: #07101f; }
.dfs-doors { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: .8rem; margin: 0 0 1rem; }
.dfs-door { display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.25rem 1.2rem; border-radius: 1.1rem; }
.dfs-door h3 { margin: 0; font-size: 1.2rem; font-weight: 900; letter-spacing: -.015em; }
.dfs-door p { margin: 0; color: var(--chalk-dim); line-height: 1.45; }
.dfs-door button { justify-self: start; margin-top: .35rem; }
.dfs-door--file { background: var(--ffn-ed-surface); box-shadow: inset 0 0 0 1px var(--ffn-ed-border-strong); }
.fct-hub-tool label.dfs-drop { position: relative; display: grid; justify-items: center; gap: .05rem; padding: 1.1rem 1rem; border: 2px dashed var(--ffn-ed-border-strong); border-radius: .8rem; color: var(--ffn-ed-text); text-align: center; cursor: pointer; }
.fct-hub-tool label.dfs-drop:hover, .fct-hub-tool label.dfs-drop.is-over { border-color: var(--ffn-ed-accent); background: var(--ffn-ed-accent-soft); }
.fct-hub-tool label.dfs-drop:focus-within { outline: 3px solid var(--ffn-ed-accent); outline-offset: 2px; }
.dfs-drop input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.dfs-drop strong { font-size: 1.02rem; font-weight: 800; }
.dfs-drop span { color: var(--ffn-ed-text-muted); font-size: .9rem; font-weight: 500; }
ul.dfs-how { display: grid; gap: .15rem; margin: .2rem 0 0; padding: 0; color: var(--ffn-ed-text-muted); font-size: .9rem; line-height: 1.45; list-style: none; }
.dfs-cap { height: .32rem; background: var(--ffn-ed-accent-soft); }
.dfs-cap i { display: block; height: 100%; background: var(--pylon); }
.dfs-loaded { display: none; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 .8rem; font-weight: 700; }
.is-loaded .dfs-loaded { display: flex; }
.is-loaded :is(.dfs-doors, .fct-note) { display: none; }
.dfs-lineup .fct-table-scroll .rankings-table tbody td:first-child { color: var(--ffn-ed-accent); font-family: var(--ffn-ed-font-mono); font-size: .78rem; font-weight: 700; }
@media (max-width: 760px) { .dfs-doors { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .dfs-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .dfs-rail li { display: grid; justify-items: center; gap: .2rem; font-size: .84rem; line-height: 1.2; text-align: center; }
  .dfs-rail li:not(:last-child)::after { display: none; }
}
#dfs-step-load > .fct-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* the step rail says it */