/* ===========================================================
   Draft hub — /draft/
   Builds on style.css (tokens, ticker, header, buttons, footer)
   =========================================================== */

:root{
  --d-grp:#5e3196;          /* group-header bar purple */
  --d-grp-head:#f1eff7;     /* table head tint */
  --d-zebra:#ecedf4;
  --d-line:#d2d2de;
  --d-bar:#2b2a33;          /* breadcrumb bar */
  --d-band:#3b1c63;
}

body.page-draft{background:var(--page)}

/* ---------- breadcrumbs ---------- */
.d-crumbs{background:var(--d-bar)}
.d-crumbs ol{
  list-style:none;margin:0;padding:9px 0;display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45)
}
.d-crumbs a{color:rgba(255,255,255,.45);transition:color var(--t-fast)}
.d-crumbs a:hover{color:#fff}
.d-crumbs [aria-current]{color:#fff}

/* ---------- hero ---------- */
.d-hero{position:relative;isolation:isolate;background:#170f28;color:#fff;overflow:hidden}
.d-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 34%;opacity:.55}
.d-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(59,28,99,.94) 0%,rgba(30,18,54,.88) 52%,rgba(20,14,34,.78) 100%)
}
.d-hero .wrap{padding-top:38px;padding-bottom:38px}
.d-hero h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,6.4vw,72px);line-height:.96;letter-spacing:.01em;
  margin:12px 0 14px;text-shadow:0 3px 20px rgba(0,0,0,.45)
}
.d-lede{font-size:16px;line-height:1.6;color:rgba(255,255,255,.86);max-width:620px}
.d-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.d-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:3px;
  padding:7px 12px;font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.9)
}
.d-chip b{color:var(--gold);font-weight:700}

/* ---------- layout ---------- */
.d-body{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;
  padding-top:30px;padding-bottom:44px;align-items:start
}
.d-main{min-width:0}
.d-main>section+section{margin-top:34px}

/* ---------- blocks + purple group headers ---------- */
.d-block{min-width:0}
.d-grp{
  background:var(--d-grp);color:#fff;border-radius:4px 4px 0 0;padding:10px 16px;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase
}
.d-scroll{
  overflow-x:auto;background:#fff;border-radius:0 0 4px 4px;
  box-shadow:0 1px 3px rgba(20,15,40,.07)
}
table.dtable{width:100%;border-collapse:collapse;min-width:760px}
table.dtable.is-narrow{min-width:560px}
/* intro line: sits between the purple group bar and the scrolling table,
   so it stays readable instead of scrolling away with the table */
.d-cap{
  padding:10px 16px;font-size:12.5px;line-height:1.5;color:var(--text-muted);
  background:#fcfcfd;border-bottom:1px solid var(--d-line)
}
table.dtable thead th{
  background:var(--d-grp-head);color:var(--d-grp);padding:9px 10px;text-align:center;
  font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap
}
table.dtable thead th:first-child{text-align:left;padding-left:16px}
table.dtable tbody th{
  text-align:left;padding:9px 10px 9px 16px;font-weight:500;font-size:14px;color:var(--text);
  white-space:nowrap
}
table.dtable tbody td{text-align:center;padding:9px 10px;font-size:14px;color:#41414d}
table.dtable td.txt{text-align:left;font-size:13.5px;color:var(--text-muted);line-height:1.45;min-width:250px}
table.dtable tbody th,table.dtable tbody td{border-bottom:1px solid var(--d-line)}
table.dtable tbody tr:last-child th,table.dtable tbody tr:last-child td{border-bottom:0}
table.dtable tbody tr:nth-child(even) th,
table.dtable tbody tr:nth-child(even) td{background:var(--d-zebra)}
.rd{
  display:inline-block;min-width:34px;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.08em;color:#fff;background:var(--purple);
  border-radius:3px;padding:3px 7px
}
.rd.is-late{background:#6d6a7a}

/* player cell + neutral avatar (same precedent as the game page) */
.p{display:flex;align-items:center;gap:10px}
.av{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#e9e6f1;border:2px solid var(--purple);overflow:hidden
}
.av svg{width:20px;height:20px;color:#8c86a0}

.d-foot-note{
  font-size:12.5px;line-height:1.5;color:var(--text-muted);
  margin-top:10px;padding-left:2px
}
.d-foot-note b{color:var(--text)}

/* ---------- capital tiles ---------- */
.d-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.d-tile{
  background:#fff;border:1px solid var(--d-line);border-radius:var(--radius);
  padding:14px 16px;min-width:0
}
.d-tile .k{
  font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple)
}
.d-tile .v{
  font-family:var(--display);font-weight:700;font-size:30px;line-height:1.05;
  color:#15151d;margin-top:4px
}
.d-tile .s{font-size:12px;color:var(--text-muted);margin-top:3px}

/* ---------- purple analysis band ---------- */
.d-band{background:var(--d-band);color:#fff;padding:var(--space-5) 0}
.d-band .sect-title{color:#fff}
.d-band-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:start}
.d-band p{color:rgba(255,255,255,.84);font-size:15px;line-height:1.65}
.d-band p+p{margin-top:14px}
.d-band h3{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px
}
.d-rookies{display:grid;gap:10px}
.d-rookie{
  display:flex;align-items:center;gap:12px;min-width:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:4px;padding:11px 13px
}
.d-rookie .av{width:40px;height:40px;background:rgba(255,255,255,.14);border-color:var(--gold)}
.d-rookie .av svg{width:26px;height:26px;color:rgba(255,255,255,.72)}
.d-rookie .nm{font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.d-rookie .ps{
  font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:2px
}
.d-rookie .val{
  margin-left:auto;text-align:right;flex:none;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--gold)
}
.d-rookie .val small{display:block;font-family:var(--body);font-weight:500;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ---------- sidebar ---------- */
.d-side{display:grid;gap:18px;min-width:0}
.d-card{background:#fff;border:1px solid var(--d-line);border-radius:6px;padding:16px;min-width:0;
  box-shadow:0 1px 3px rgba(20,15,40,.07);overflow:hidden}
.d-card h2{
  display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:#1b1b26
}
.d-card h2 img{width:24px;height:24px;object-fit:contain;flex:none}
.d-card .rule{border:0;border-top:1px solid var(--d-line);margin:13px -16px}
.d-list{display:grid;gap:0}
.d-list li{display:flex;align-items:baseline;gap:12px;padding:10px 12px;margin:0 -12px;
  border-bottom:1px solid var(--d-line);font-size:13.5px}
.d-list li:last-child{border-bottom:0}
.d-list li:nth-child(even){background:#f3f3f8}
.d-list .lb{color:var(--text-muted)}
.d-list .lv{margin-left:auto;text-align:right;font-weight:700;color:#1b1b26}
.d-ng{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;text-align:center}
.d-ng img{width:56px;height:56px;object-fit:contain;margin:0 auto 8px}
.d-ng .tm{font-size:12.5px;line-height:1.3;color:var(--text-muted)}
.d-ng .at{font-family:var(--display);font-weight:600;font-size:13px;color:var(--text-faint)}
.d-when{
  text-align:center;margin-top:12px;font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#1b1b26
}
.d-where{text-align:center;font-size:12px;color:var(--text-muted);margin-top:3px}
.d-outline{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:1px solid var(--d-line);border-radius:4px;padding:12px;min-height:44px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--purple);
  transition:background var(--t-fast),border-color var(--t-fast)
}
.d-outline:hover{background:#f6f3fb;border-color:#cfc2e6}
.d-outline .ar{width:15px;height:15px;flex:none}

/* ---------- closing cta ---------- */
.d-cta{padding:var(--space-5) 0}
.d-cta .panel{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.d-cta h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.3vw,27px);letter-spacing:.015em}
.d-cta p{font-size:13.5px;color:var(--text-muted);margin-top:4px;max-width:560px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .d-body{grid-template-columns:minmax(0,1fr)}
  .d-side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .d-band-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .d-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .d-side{grid-template-columns:minmax(0,1fr)}
  .d-hero .wrap{padding-top:30px;padding-bottom:30px}
  .d-cta .panel{flex-direction:column;align-items:flex-start}
  .d-cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .d-crumbs a,.d-outline,.sect-link{transition-duration:.01ms}
}