/* Saturday is for CFB — permanent dark theme. All colors are custom
   properties on :root so this is the only place the palette lives. */
:root{
  --stone:#0F1116;
  --card:#1A1D24;
  --ink:#EDEFF3;
  --ink-soft:#9AA3B2;
  --line:#2B2F3A;
  --win:#5FBE8A;
  --win-bg:#173627;
  --loss:#E9776C;
  --loss-bg:#3A2321;
  --focus:#5FBE8A;
  --surface-soft:#20242C;
  --neutral-badge:#2B2F3A;
}
/* Team/opponent logos are transparent PNGs that can disappear against a
   same-color tab or dark background, so every logo gets a ~3px white
   "stroke" traced around its actual (transparent-cutout) shape. A plain
   border/box-shadow only draws a rectangle, so this stacks several
   zero-blur drop-shadows in 8 directions to approximate a true outline. */
.tab-logo, .opp-logo, .team-logo{
  filter:
    drop-shadow(0.6px 0 0 #fff)
    drop-shadow(-0.6px 0 0 #fff)
    drop-shadow(0 0.6px 0 #fff)
    drop-shadow(0 -0.6px 0 #fff)
    drop-shadow(0.6px 0.6px 0 #fff)
    drop-shadow(-0.6px 0.6px 0 #fff)
    drop-shadow(0.6px -0.6px 0 #fff)
    drop-shadow(-0.6px -0.6px 0 #fff);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
.wrap{max-width:900px;margin:0 auto;padding:32px 20px 80px;padding-bottom:calc(80px + env(safe-area-inset-bottom));}
button, .tab, .tab-add, .del-row, .close{touch-action:manipulation;}

.masthead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  border-bottom:3px solid var(--ink);
  padding-bottom:14px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.masthead-brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.masthead h1{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:34px;
  letter-spacing:0.2px;
  margin:0;
  line-height:1;
}
.tagline{
  font-size:13px;
  color:var(--ink-soft);
  font-weight:500;
  font-style:italic;
}
.masthead .season{
  font-size:14px;
  color:var(--ink-soft);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:14px;
}
.header-action{
  cursor:pointer;
  color:var(--ink-soft);
  user-select:none;
  font-size:13px;
}
.header-action:hover{color:var(--ink);}
.next-game{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 16px;
  margin:16px 0;
  font-size:14px;
}
.next-game .ng-label{color:var(--ink-soft);}
.next-game .ng-label strong{color:var(--ink);font-weight:600;}
.next-game .ng-countdown{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--win);
  white-space:nowrap;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px 9px 12px;
  border-radius:6px 6px 0 0;
  border:1px solid var(--line);
  border-bottom:none;
  background:var(--card);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:17px;
  color:var(--ink-soft);
  cursor:pointer;
  user-select:none;
  min-height:44px;
}
.tab.home-tab.active{background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--card);}
/* Team tabs get their real team color as an actual background (set inline
   per-team via JS, with an auto-computed readable text color), not just a
   small dot — dimmed slightly when inactive, full-strength when active. */
.tab.team-tab{opacity:0.62;cursor:grab;}
.tab.team-tab.active{opacity:1;box-shadow:0 3px 0 rgba(255,255,255,0.08);}
.tab.team-tab:active{cursor:grabbing;}
.tab.team-tab.dragging{opacity:0.3;}
.tab.team-tab.drag-over{outline:2px dashed rgba(255,255,255,0.7);outline-offset:-4px;}
.tab .dot{width:10px;height:10px;border-radius:50%;flex:none;}
.tab .tab-logo{width:20px;height:20px;object-fit:contain;flex:none;}
.tab .tab-rank{
  font-size:12px;
  font-weight:700;
  opacity:0.85;
}
.tab .close{
  font-size:19px;
  color:inherit;
  opacity:0.7;
  margin-left:2px;
  line-height:1;
  padding:6px 2px 6px 6px;
  margin:-6px -2px -6px 0;
}
.tab .close:hover, .tab .close:active{opacity:1;}
.tab-add{
  padding:9px 14px;
  border-radius:6px 6px 0 0;
  border:1px dashed var(--line);
  background:transparent;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:var(--ink-soft);
  cursor:pointer;
  min-height:44px;
}
.tab-add:hover, .tab-add:active{color:var(--ink);border-color:var(--ink-soft);}

@media (max-width:640px){
  .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:2px;
    margin-left:-20px;
    margin-right:-20px;
    padding-left:20px;
    padding-right:20px;
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab, .tab-add{flex:none;scroll-snap-align:start;white-space:nowrap;}
}

.board{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:0 6px 6px 6px;
}

.news-home{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
  padding:18px;
}
.news-card{
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
}
.news-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.news-card-head{cursor:pointer;user-select:none;}
.news-card-head img.team-logo{width:22px;height:22px;object-fit:contain;flex:none;}
.news-card-head h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;
  margin:0;
  flex:1;
}
.news-card-head .caret{
  color:var(--ink-soft);
  font-size:13px;
  line-height:1;
  padding:4px;
  margin:-4px;
  flex:none;
  transition:transform 0.15s ease;
}
.news-card.collapsed .caret{transform:rotate(-90deg);}
.news-card.collapsed .news-list{display:none;}
.news-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 0;
  border-bottom:1px dashed var(--line);
  text-decoration:none;
  color:inherit;
}
.news-item:last-child{border-bottom:none;}
.news-item-title{font-size:13.5px;font-weight:600;color:var(--ink);}
.news-item:hover .news-item-title{color:var(--focus);}
.news-item-meta{font-size:11.5px;color:var(--ink-soft);}
.news-empty{font-size:13px;color:var(--ink-soft);padding:6px 0;}

.board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.board-head-team{display:flex;align-items:center;gap:10px;}
.board-head-team img.team-logo{width:30px;height:30px;object-fit:contain;}
.record{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;
  font-weight:700;
  display:flex;
  align-items:center;
}
.record .win{color:var(--win);}
.record .loss{color:var(--loss);}
.record-label{font-size:12px;color:var(--ink-soft);font-weight:500;margin-left:6px;}
.synced-note{font-size:12px;color:var(--ink-soft);}
.board-head-actions{display:flex;align-items:center;gap:12px;}

table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  padding:10px 10px;
  border-bottom:1px solid var(--line);
}
th.num, td.num{width:34px;text-align:center;}
tbody tr{border-bottom:1px dashed var(--line);}
tbody tr:last-child{border-bottom:none;}
tbody tr.bye{background:var(--surface-soft);}
tbody tr.clickable{cursor:pointer;}
tbody tr.clickable:hover{background:var(--surface-soft);}
td{padding:12px 10px;vertical-align:middle;font-size:14.5px;}

.wk{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;
  font-weight:700;
  color:var(--ink-soft);
  text-align:center;
}
.date{white-space:nowrap;color:var(--ink);}
.date .dow{color:var(--ink-soft);font-size:12.5px;display:block;}

.opp{display:flex;align-items:center;gap:8px;}
.opp .site-tag{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--ink-soft);
  width:20px;
}
.opp .opp-logo{width:24px;height:24px;object-fit:contain;flex:none;}
.opp .rank-badge{
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-soft);
  background:var(--neutral-badge);
  border-radius:4px;
  padding:1px 5px;
  flex:none;
}
.opp .name{font-weight:600;}
.opp .place{display:block;font-size:12px;color:var(--ink-soft);font-weight:400;}
.tv{color:var(--ink-soft);}

.result{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:20px;
  font-weight:700;
  font-size:13px;
  font-family:'Barlow Condensed',sans-serif;
}
.result.W{background:var(--win-bg);color:var(--win);}
.result.L{background:var(--loss-bg);color:var(--loss);}
.result.T{background:var(--neutral-badge);color:var(--ink-soft);}
.result.pending{background:var(--neutral-badge);color:var(--ink-soft);font-weight:600;}

.del-row{
  opacity:0;
  color:var(--ink-soft);
  cursor:pointer;
  font-size:15px;
}
tbody tr:hover .del-row{opacity:1;}
.del-row:hover{color:var(--loss);}

.panel{
  border-top:1px solid var(--line);
  padding:16px 18px 18px;
  background:var(--surface-soft);
  border-radius:0 0 6px 6px;
}
.panel h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;
  margin:0 0 12px;
}
.small-btn{
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  padding:7px 12px;
  border-radius:5px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--stone);
  cursor:pointer;
}
.small-btn:disabled{opacity:0.55;cursor:default;}
.small-btn.ghost{background:transparent;color:var(--ink);}
.small-btn.danger{border-color:var(--loss);color:var(--loss);background:transparent;}
.panel-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center;}

.new-team-form{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.new-team-form input[type="text"]{
  padding:8px 10px;font-size:14px;border:1px solid var(--line);border-radius:5px;font-family:'Inter',sans-serif;
  min-width:240px;flex:1;
  background:var(--card);color:var(--ink);
}
.form-msg{font-size:13px;margin-top:4px;min-height:18px;}
.form-msg.error{color:var(--loss);}
.form-msg.info{color:var(--ink-soft);}

.empty{padding:40px 18px;text-align:center;color:var(--ink-soft);}
.footnote{margin-top:18px;font-size:12.5px;color:var(--ink-soft);line-height:1.6;}
.footnote code{background:var(--surface-soft);padding:1px 5px;border-radius:3px;}

@media (max-width:640px){
  .masthead h1{font-size:26px;}

  .new-team-form input{font-size:16px !important;}

  table, thead, tbody, tr{display:block;width:100%;}
  thead{display:none;}
  tbody tr{
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:10px;
    padding:10px 12px;
    background:var(--card);
  }
  tbody tr.bye{border-style:dashed;}
  td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:15px;
  }
  tr > td:last-child{border-bottom:none;}
  td.wk{display:none;}
  td.date{
    order:-2;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:16px;
    justify-content:flex-start;
    gap:8px;
  }
  td.date .dow{display:inline;font-size:13px;}
  td[data-label]::before{
    content:attr(data-label);
    font-size:11px;
    font-weight:600;
    color:var(--ink-soft);
    flex:none;
  }
  td .opp{width:100%;justify-content:space-between;}
  td.opp-cell{order:-1;padding-top:2px;}
  .opp-info{text-align:right;}
}

/* ---------------- print ("Print all schedules") ----------------
   #printView is built by buildPrintView() with every tracked team's full
   schedule and kept invisible on screen; only @media print reveals it,
   while everything else on the page is hidden for that print job. Printing
   intentionally stays light/paper-colored regardless of the site's dark
   theme, since that's what actually prints well. */
.print-only{display:none;}

@media print{
  body *{visibility:hidden;}
  .print-only, .print-only *{visibility:visible;}
  .print-only{
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    color:#000;
  }
  .print-title{
    font-family:'Barlow Condensed',sans-serif;
    font-size:24px;
    margin:0 0 18px;
  }
  .print-team{
    margin-bottom:24px;
    page-break-after:always;
    break-after:page;
  }
  .print-team:last-child{page-break-after:auto;break-after:auto;}
  .print-team h2{
    font-family:'Barlow Condensed',sans-serif;
    font-size:20px;
    margin:0 0 8px;
  }
  .print-record{font-weight:400;color:#555;font-size:14px;}
  .print-table{width:100%;border-collapse:collapse;font-size:12px;}
  .print-table th, .print-table td{
    border:1px solid #999;
    padding:4px 6px;
    text-align:left;
  }
}
