/* DraftCaddy app theme — matches draftcaddy.netlify.app (light neo-brutalist:
   paper/ink, turf green + flag yellow, 2px ink borders, hard offset shadows,
   Jersey 15 display / Silkscreen pixel labels / Space Grotesk body). */
:root {
  --paper: #ffffff; --ink: #101010; --muted: #565656;
  --turf: #0e7a3c; --turf-deep: #0a5c2d; --flag: #ffcf00; --blue: #1d5dd8;
  --bad: #d23c3c;
  --qb:#e0447e; --rb:#0e7a3c; --wr:#1d5dd8; --te:#c77800; --k:#565656; --dst:#7c4dcc;
  --display: "Jersey 15", Impact, sans-serif;
  --pixel: "Silkscreen", monospace;
  --body: "Space Grotesk", -apple-system, sans-serif;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  /* legacy aliases (templates use these) */
  --bg: #f4f2ec; --panel: #ffffff; --panel2: #f4f2ec; --border: #101010;
  --text: #101010; --accent: #0e7a3c; --accent2: #0a5c2d;
  --good: #0e7a3c; --warn: #c77800; --star: #c77800;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--body); }
a { color: var(--blue); }
.wrap { max-width: 1400px; margin: 0 auto; padding: 16px; }
.wrap.narrow { max-width: 860px; }

/* wordmark */
.wordmark { font-family: var(--display); font-size: 34px; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; line-height: 1; }
.wordmark span { color: var(--turf); }
.wordmark.small { font-size: 24px; }

/* welcome / lists */
.center { max-width: 480px; margin: 7vh auto; padding: 32px 28px; background: var(--paper);
  border: 2px solid var(--ink); box-shadow: var(--shadow); text-align: left; }
.center .wordmark { font-size: 42px; display: block; margin-bottom: 14px; }
.center h1 { margin: 0 0 4px; font-size: 21px; }
.center p { color: var(--muted); margin-top: 0; }
input[type=text] { width: 100%; padding: 12px; margin: 8px 0; background: var(--paper);
  border: 2px solid var(--ink); color: var(--ink); font-size: 15px; font-family: var(--body); }
input[type=text]:focus { outline: 3px solid var(--flag); }
button, .btn, .cta { background: var(--turf); color: #fff; border: 2px solid var(--ink);
  padding: 11px 16px; font-size: 15px; cursor: pointer; font-weight: 700;
  font-family: var(--body); box-shadow: var(--shadow-sm); }
button:hover, .cta:hover { background: var(--turf-deep); transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--ink); }
button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.err { color: var(--bad); font-weight: 700; margin: 8px 0; }
.finenote { margin-top: 16px; font-size: 11px; font-family: var(--pixel); }

/* hub */
.hubtitle { font-family: var(--display); font-size: 40px; margin: 20px 0 18px; }
.hubgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hubcard { display: block; background: var(--paper); border: 2px solid var(--ink);
  box-shadow: var(--shadow); padding: 22px 20px; text-decoration: none; color: var(--ink); }
.hubcard:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.hubemoji { font-size: 28px; }
.hubname { font-family: var(--display); font-size: 26px; margin-top: 6px; }
.hubdesc { color: var(--muted); font-size: 13px; margin-top: 4px; }
.hubcard.locked { background: var(--panel2); }
.hubcard.locked:hover { transform: none; box-shadow: var(--shadow); }
.lookaround { font-weight: 700; color: var(--turf); }

/* player card modal */
.cardovl { display: none; position: fixed; inset: 0; background: rgba(16,16,16,.55);
  z-index: 100; align-items: flex-start; justify-content: center; padding: 8vh 16px; }
.pcard { position: relative; width: 100%; max-width: 420px; background: var(--paper);
  border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 20px; }
.pcardload { padding: 30px; text-align: center; color: var(--muted); font-family: var(--pixel); font-size: 12px; }
.pcardx { position: absolute; top: 8px; right: 12px; text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 18px; }
.pc-head { display: flex; align-items: center; gap: 14px; }
.pc-photo { width: 62px; height: 62px; object-fit: cover; border: 2px solid var(--ink);
  background: var(--panel2); }
.pc-name { font-family: var(--display); font-size: 26px; line-height: 1; }
.pc-sub { margin-top: 5px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pc-inj { margin: 12px 0 0; background: #ffe3dd; border: 2px solid var(--bad); padding: 8px 10px; font-size: 13px; }
.pc-injnote { color: var(--muted); font-size: 12px; margin-top: 3px; }
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.pc-stat { border: 2px solid var(--ink); padding: 6px 8px; text-align: center; }
.pc-l { display: block; font-family: var(--pixel); font-size: 8px; color: var(--muted); }
.pc-v { display: block; font-weight: 800; font-size: 15px; }
.pc-src { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.pc-src b { color: var(--ink); }
.pc-note { font-size: 12.5px; font-style: italic; color: var(--te); margin-top: 8px; }
.pc-trend { margin-top: 10px; font-size: 12.5px; background: var(--panel2); border: 2px solid var(--ink); padding: 6px 10px; }
.pc-trend.hot { background: var(--flag); }
.pc-bio { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pc-outlook { margin-top: 10px; font-size: 13px; border-top: 2px solid var(--ink); padding-top: 8px; }
.pc-outlab { font-family: var(--pixel); font-size: 9px; color: var(--turf-deep); }
.pc-auto { font-family: var(--pixel); font-size: 8px; color: var(--muted); border: 1px solid var(--muted); padding: 0 3px; }
.pc-risks { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.pc-risk { font-size: 11px; background: var(--flag); border: 1px solid var(--ink); padding: 1px 5px; }
.clickable { cursor: pointer; }
.clickable:hover { text-decoration: underline; text-decoration-style: dotted; }

/* guide + tour */
.hubbanner { background: var(--flag); border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
  padding: 10px 14px; margin-bottom: 4px; font-size: 13.5px; }
.hubbanner a { color: var(--ink); font-weight: 700; }
.hubbanner .dismiss { float: right; text-decoration: none; font-weight: 800; }
.guidelist { margin: 0; padding-left: 20px; }
.guidelist li { margin: 7px 0; line-height: 1.5; }
.videoslot { margin-top: 10px; border: 2px dashed var(--ink); padding: 22px; text-align: center;
  font-family: var(--pixel); font-size: 11px; color: var(--muted); background: var(--panel2); }

/* draft lists */
.draftlist form { margin: 0 0 12px; }
.draftrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; background: var(--paper); border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm); font-size: 14px; color: var(--ink); }
.draftrow:hover { background: var(--flag); transform: translate(-1px,-1px); }
.dname { font-weight: 700; }
.dmeta { color: var(--muted); font-size: 12px; }
.dstatus { margin-left: auto; font-family: var(--pixel); font-size: 10px; padding: 3px 8px;
  border: 2px solid var(--ink); }
.st-drafting { background: var(--turf); color: #fff; }
.st-pre_draft { background: var(--flag); color: var(--ink); }
.st-complete { background: var(--panel2); color: var(--muted); }
.badge { font-size: 10px; padding: 2px 8px; font-family: var(--pixel);
  border: 2px solid var(--ink); text-transform: uppercase; }
.badge.drafting { background: var(--turf); color: #fff; }
.badge.pre_draft { background: var(--flag); color: var(--ink); }
.badge.complete { background: var(--panel2); color: var(--muted); }

/* top bar */
.topbar { display: flex; align-items: center; gap: 18px; padding: 12px 16px;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-sm);
  margin-bottom: 14px; }
.topbar .name { font-family: var(--display); font-size: 20px; }
.topbar .stat { color: var(--muted); font-size: 13px; }
.topbar .stat b { color: var(--ink); font-size: 15px; }
.clock { margin-left: auto; padding: 8px 16px; font-weight: 800; letter-spacing: .03em;
  background: var(--panel2); border: 2px solid var(--ink); font-family: var(--pixel); font-size: 11px; }
.clock.mine { background: var(--turf); color: #fff; animation: pulse 1.2s infinite; }
.clock.soon { background: var(--flag); color: var(--ink); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.72} }
.dot { height: 9px; width: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dot.on { background: var(--turf); } .dot.off { background: var(--bad); }

/* alerts */
.alerts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.alert { padding: 8px 12px; font-size: 13px; font-weight: 700; background: var(--flag);
  border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }
.alert.run { background: #ffd9d2; }

/* layout */
.grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.panel { background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow);
  padding: 16px; overflow-x: auto; }  /* wide tables scroll inside, never break the page */
.panel h2 { margin: 0 0 10px; font-size: 11px; font-family: var(--pixel);
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10px; font-family: var(--pixel); text-transform: uppercase;
  color: var(--muted); font-weight: 400; padding: 4px 8px; border-bottom: 2px solid var(--ink); }
td { padding: 7px 8px; border-bottom: 1px solid #d8d4c8; }
tr.avoid td { opacity: .38; }
.pill { display: inline-block; min-width: 34px; text-align: center; font-size: 11px;
  font-weight: 800; padding: 2px 6px; color: #fff; border: 1px solid var(--ink); }
.pos-QB{background:var(--qb)} .pos-RB{background:var(--rb)} .pos-WR{background:var(--wr)}
.pos-TE{background:var(--te)} .pos-K{background:var(--k)} .pos-DST{background:var(--dst)}
.pname { font-weight: 700; }
.star { color: var(--te); }
.val-pos { color: var(--turf); font-weight: 800; }
.val-neg { color: var(--muted); }
.note { color: var(--te); font-size: 12px; font-style: italic; }
.rank { color: var(--muted); font-variant-numeric: tabular-nums; }

/* right column */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.poscol h3 { margin: 0 0 6px; font-size: 12px; }
.poscol .row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px;
  border-bottom: 1px solid #e3e0d5; }
.poscol .row .a { color: var(--muted); font-size: 11px; }
.roster .slot { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.need { color: var(--te); font-weight: 700; }
.filled { color: var(--turf); }
.recent .r { font-size: 12px; color: var(--muted); padding: 2px 0; }
.recent .r.me { color: var(--turf); font-weight: 700; }
.muted { color: var(--muted); }
.or { color: var(--muted); font-size: 12px; margin: 16px 0 10px; font-family: var(--pixel); }

/* game plan */
.plan select { width: 100%; padding: 8px 10px; margin-bottom: 10px; background: var(--paper);
  border: 2px solid var(--ink); color: var(--ink); font-size: 14px; font-family: var(--body); }
.planname { font-family: var(--display); font-size: 22px; }
.suggest { background: #e7f3ec; border: 2px solid var(--turf); padding: 9px 11px; margin: 8px 0;
  box-shadow: 3px 3px 0 var(--turf); }
.suggest-lab { font-size: 9px; font-family: var(--pixel); color: var(--turf-deep); }
.suggest-pick { font-size: 15px; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.suggest-val { font-size: 12px; margin-left: auto; }
.suggest.override { background: #fff6d6; border-color: var(--te); box-shadow: 3px 3px 0 var(--te); }
.ovr { color: var(--te); }
.suggest-alt { font-size: 12px; margin-top: 5px; }

/* in-draft build path (branch highlighting) */
.branch { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 8px; }
.brlbl { font-size: 9px; font-family: var(--pixel); color: var(--muted); margin-bottom: 4px; }
.bnode { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12.5px; }
.bnode.done { opacity: .45; }
.bnode.cur { background: var(--flag); padding: 3px 6px; margin: 2px -6px; border: 1px solid var(--ink); }
.brd { font-size: 10px; color: var(--muted); min-width: 26px; font-weight: 700; }
.bpos { font-size: 9px; }
.bnm { font-weight: 700; }

/* room-timing chips */
.tchip { display: inline-block; font-size: 8.5px; font-family: var(--pixel);
  padding: 1.5px 5px; vertical-align: 1px; cursor: help; border: 1px solid var(--ink); }
.tchip.wait { color: var(--blue); background: #e3ecfb; }
.tchip.lastcall { color: #fff; background: var(--te); }
.unc { color: var(--te); font-size: 10.5px; cursor: help; font-weight: 700; }

/* roster-construction chips */
.fchip { display: inline-block; font-size: 8px; font-family: var(--pixel);
  padding: 1.5px 4px; vertical-align: 1px; cursor: help; border: 1px solid var(--ink); }
.fchip.warn { color: var(--ink); background: var(--flag); }
.fchip.good { color: #fff; background: var(--turf); }

/* rankings explorer */
.tabs { display: inline-flex; gap: 6px; }
.tab { padding: 6px 12px; font-size: 10px; font-family: var(--pixel); color: var(--ink);
  border: 2px solid var(--ink); background: var(--paper); text-decoration: none; cursor: pointer; }
.tab.on { background: var(--ink); color: var(--flag); }
.tab:hover { background: var(--flag); color: var(--ink); }
.navlink { margin-left: auto; color: var(--muted); font-size: 12.5px; text-decoration: none;
  font-weight: 700; }
.navlink:hover { color: var(--ink); }
.srchot { color: var(--te); font-weight: 800; }
.bb-lo { color: var(--turf); font-weight: 800; }
.bb-hi { color: var(--te); font-weight: 800; }
.bbsplit { white-space: nowrap; font-size: 12px; }

/* draft plan (build trees) */
.controls { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 12px; }
.ctl { font-size: 13px; color: var(--ink); font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.ctl select { padding: 7px 11px; background: var(--paper); border: 2px solid var(--ink);
  color: var(--ink); font-size: 13px; font-weight: 700; font-family: var(--body);
  box-shadow: var(--shadow-sm); cursor: pointer; }
.legend { font-size: 12px; color: var(--muted); margin: 2px 0 12px; display: flex;
  flex-wrap: wrap; gap: 6px; align-items: center; }
.forkrow { display: flex; flex-wrap: wrap; gap: 8px; }
.forkopt { padding: 6px 10px; border: 2px solid var(--ink); font-size: 13px;
  background: var(--paper); box-shadow: var(--shadow-sm); }
.treewrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.tree .node { display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  border-top: 1px solid #d8d4c8; flex-wrap: wrap; }
.tree .node:first-of-type { border-top: none; }
.nround { font-size: 10px; font-family: var(--pixel); color: var(--muted); min-width: 46px; }
.npos { font-size: 10px; }
.nprim { font-size: 13.5px; flex: 1; }
.nalts { flex-basis: 100%; font-size: 11px; color: var(--muted); padding-left: 54px; }
.avail { font-size: 8px; font-family: var(--pixel); padding: 1px 4px; border: 1px solid var(--ink); }
.av-safe { color: #fff; background: var(--turf); }
.av-likely { color: var(--ink); background: #e3ecfb; }
.av-tight { color: var(--ink); background: var(--flag); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.son { color: var(--blue); }
.sarr { font-size: 9px; }
.targets { font-size: 13px; margin-top: 4px; }
.chip { display: inline-block; min-width: 30px; text-align: center; font-size: 11px;
  font-weight: 800; padding: 2px 7px; color: #fff; border: 1px solid var(--ink); margin-left: 3px; }
.chip.pos-QB{background:var(--qb)} .chip.pos-RB{background:var(--rb)} .chip.pos-WR{background:var(--wr)}
.chip.pos-TE{background:var(--te)} .chip.pos-K{background:var(--k)} .chip.pos-DST{background:var(--dst)}
.pivot { font-size: 12.5px; padding: 3px 0; }
.pivots { border-top: 2px solid var(--ink); margin-top: 6px; }

/* freshness bar */
.freshbar { display:flex; align-items:center; gap:14px; padding:6px 2px 12px; font-size:12px; flex-wrap:wrap; }
.freshbar #refreshbtn { margin-left:auto; background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); box-shadow: var(--shadow-sm); padding:6px 10px; font-size:12px; cursor:pointer; }
.freshbar #refreshbtn:hover:not(:disabled){ background: var(--flag); }
.freshbar #refreshbtn:disabled{ opacity:.5; cursor:default; }
.status-note { color:var(--te); font-weight:700; }
.dot.warn { background:var(--te); }

/* injury badges */
.inj { display:inline-block; font-size:8px; font-family:var(--pixel); padding:1px 4px;
  vertical-align:middle; margin-left:2px; border:1px solid var(--ink); }
.inj.q { background:var(--flag); color:var(--ink); }
.inj.out { background:var(--bad); color:#fff; }

@media (max-width: 980px){ .grid{grid-template-columns:1fr} .hubgrid{grid-template-columns:1fr} }
@media (max-width: 640px){
  .topbar{ flex-wrap:wrap; gap:8px 12px; }
  .topbar .clock{ order:5; width:100%; }
  table th:nth-child(4), table td:nth-child(4){ display:none; }  /* hide Tier on phones */
  .wrap{ padding:10px; }
  .hubtitle{ font-size:30px; }
}