/* NFL Player Clock additions on top of the SFSW base theme (base.css). */
:root{ --played:#3a4a66; --left:#26a596; --band:rgba(38,165,150,.22); --warnc:#f2b84b; }
.clockmark{background:linear-gradient(135deg,#1b6f88,#26a596)}
.teambar{gap:4px;padding:8px 24px}
.teambar a{padding:3px 6px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;font-size:12px}
.teambar img{width:22px;height:22px}
.logo{width:28px;height:28px;object-fit:contain;flex:none}
.logo.lg{width:72px;height:72px}
.logo.sm{width:20px;height:20px}
.tbadge{display:inline-grid;place-items:center;border-radius:7px;font-weight:800;font-size:10px;color:#fff;flex:none}
.tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border:1px solid #7a5a1d;color:var(--accent);vertical-align:middle}
.tag.grey{border-color:var(--line2);color:var(--muted)}
.tag.ok{border-color:#1f6e66;color:#6fd6c9}
.tag.bad{border-color:#7a3426;color:#f19a85}
/* player header */
.phead{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-bottom:18px}
.headshot{width:112px;height:82px;object-fit:cover;object-position:top;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.phead h1{margin:0}
.phead .meta{color:var(--ink2);display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.clockgrid{display:grid;grid-template-columns:340px 1fr;gap:16px}
@media(max-width:900px){.clockgrid{grid-template-columns:1fr}.phead{grid-template-columns:auto 1fr}.phead .plogo{display:none}}
.bignum{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.bignum small{font-size:15px;color:var(--muted);font-weight:600;margin-left:4px}
.range{color:var(--ink2);font-size:12.5px;margin-top:4px}
.drivers{display:flex;gap:8px;flex-wrap:wrap}
.driver{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;font-size:13px}
.driver .arr{font-weight:800;font-size:15px}
.driver .arr.up{color:#6fd6c9} .driver .arr.dn{color:#f19a85}
/* percent bar in tables */
.pbar{display:grid;grid-template-columns:96px 38px;align-items:center;gap:6px}
.pbar .track{height:8px;border-radius:4px;background:var(--played);overflow:hidden}
.pbar .fill{height:8px;background:var(--left)}
.pbar .v{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink2)}
.legendrow{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin:6px 0 10px}
.legendrow .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.cardlink{display:block;color:inherit}
.cardlink:hover{text-decoration:none}
.cardlink:hover .panel{border-color:var(--line2)}
.mini li{grid-template-columns:24px 1fr auto}
.mini .who{display:flex;align-items:center;gap:8px;min-width:0}
.mini .who a{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .who .sub{color:var(--muted);font-size:11.5px}
.posgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1000px){.posgrid{grid-template-columns:repeat(2,1fr)}}
.posgrid .panel{padding:12px}
.posgrid h4{margin:0 0 2px;font-size:14px}
.selrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.chart text{font-family:inherit}
.dotlink{cursor:pointer}
.more{display:block;margin:12px auto 0;background:var(--surface2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:8px 16px;cursor:pointer;font:inherit;font-weight:600}
.mockflag{background:#21180b;border:1px solid #4a3a16;color:#e9cf9b;border-radius:8px;padding:6px 12px;font-size:12px;margin-bottom:14px}
@media(max-width:700px){.teambar{padding:6px 12px}.headshot{width:80px;height:58px}.bignum{font-size:32px}}
.teambar a.on{background:var(--surface2);border-color:var(--accent)}
.thead .logo.lg{width:64px;height:64px}
.agekey summary{cursor:pointer;list-style:none} .agekey summary::-webkit-details-marker{display:none}
.agekey summary::before{content:"ⓘ ";color:var(--accent)} .agekey h3{margin:0 0 4px} .agekey p{margin:0}
.brand-icon{width:34px;height:34px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.agegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} @media(max-width:900px){.agegrid{grid-template-columns:repeat(2,1fr)}}