/* Dakota's Pick'em, on top of Silver Dolla's web/style.css (copied in at
   deploy). Only what the sheet, grid and admin page add. */
/* .who, nav.tabs and .potline are display:flex, which beats the browser's
   [hidden] rule: the sign-in screen showed Sign out and the tabs. */
[hidden] { display: none !important; }
.potline { margin-top: 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.potline span { color: var(--muted); font-size: 14px; }
.lockline { margin: 12px 0; }
.srow .faces { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 6px; }
.srow .meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.rankpick { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 14px; color: var(--text); }
.rankpick select { width: auto; min-width: 64px; margin: 0; font-size: 16px; }  /* under 16px, iOS Safari zooms */
#roster input { font-size: 16px; }
.tblabel { margin-top: 18px; }
.tbinput { max-width: 140px; }
.gridwrap { overflow-x: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
table.grid { width: auto; min-width: 100%; }
table.grid th, table.grid td { white-space: nowrap; padding: 8px; font-size: 14px; }
table.grid .gcol { position: sticky; left: 0; background: var(--bg); z-index: 1; }
table.grid td.won, table.mine tr.won td { background: var(--won); color: #fff; }
table.grid td.void, table.mine tr.void td { opacity: .5; }
table.mine tr.lost td { color: var(--muted); }
.sc { color: var(--muted); font-size: 13px; }
table.mine tr.won .sc { color: inherit; opacity: .85; }
.winner { font-size: 18px; font-weight: 700; margin: 14px 2px; }
table.points { width: 100%; margin-top: 12px; }
table.points th, table.points td { padding: 8px; }
table.points tr.me td { background: var(--card); font-weight: 600; }
#admin h2 { font-size: 16px; margin: 22px 0 8px; }
.addrow, .arow { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.addrow input, .arow input, .arow select { width: auto; flex: 1 1 90px; margin: 0; min-width: 0; }
.agame { border-bottom: 1px solid var(--edge); padding: 10px 0; }
.amsg .msg { margin: 6px 0 0; }