/* Afterplay (/team/<slug>): the private team page. Builds on css/site.css tokens; team colours as on the match page
   (Hidden King amber #D9922B, Archmother sapphire #5B7FB5). */
.tm-page{max-width:94rem}
:root{--hk:#D9922B; --am:#5B7FB5; --win:#7FC98A; --loss:#E0705F; --text-2:#C8C8C8}
.tm{min-height:50vh}
.tm [hidden]{display:none !important}
.tm-msg{display:flex; align-items:center; gap:.7rem; justify-content:center; padding:4rem 1rem; color:var(--slot-grey); font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.tm-spin{width:1.1rem; height:1.1rem; border:3px solid var(--divider); border-top-color:var(--gold); border-radius:50%; animation:tm-spin .8s linear infinite}
@keyframes tm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tm-spin{animation:none}}

/* gate: sign in / no access / access ended / pick a team */
.tm-gate{max-width:34rem; margin:2rem auto 0; padding:1.6rem 1.4rem 1.8rem; background:var(--card); border:var(--stroke-card) solid var(--gold); box-shadow:var(--shadow-card)}
.tm-gate h1{margin:.4rem 0 .6rem; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:clamp(1.8rem,7vw,2.6rem); line-height:1}
.tm-gate p{margin:0 0 .6rem}
.tm-gate__actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; align-items:center}
.tm-gate__actions small{color:var(--slot-grey)}
.tm-gate__actions small a{color:var(--gold)}
.tm-discord{display:inline-flex; flex-direction:row; align-items:center; gap:.6rem; min-height:3.25rem; padding:0 1.2rem; background:#5865F2; color:var(--white); border:0; text-decoration:none; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; letter-spacing:.03em}
.tm-discord:hover{background:#4752c4}
.tm-discord .ico{width:1.3em; height:1.3em; fill:currentColor}
.tm-teams{display:grid; gap:.5rem; width:100%}
.tm-teams a{display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; background:var(--score-box); text-decoration:none; border-left:3px solid var(--gold)}
.tm-teams a:hover{background:#2c2c2c}
.tm-teams a b{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.25rem}
.tm-teams a small{margin-left:auto; color:var(--slot-grey); text-transform:capitalize}
.tm-teams a.off{opacity:.55; border-left-color:var(--divider)}

/* header */
.tm-head{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 1.2rem}
.tm-logo{flex:none; width:4.25rem; height:4.25rem; display:grid; place-items:center; background:var(--card); border:var(--stroke-card) solid var(--gold); font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--gold); text-transform:uppercase; overflow:hidden}
.tm-logo img{width:100%; height:100%; object-fit:cover}
.tm-title{min-width:0; flex:1 1 12rem}
.tm-title .eyebrow{font-size:.92rem; color:var(--slot-grey); text-align:left}
.tm-title h1{margin:.1rem 0 0; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:clamp(2rem,8vw,3.4rem); line-height:.95; overflow-wrap:break-word; text-shadow:0 3px 10px rgba(0,0,0,.7)}
.tm-me{display:flex; align-items:center; gap:.55rem; padding:.4rem .8rem .4rem .45rem; background:var(--score-box); font-size:.92rem}
.tm-me img{width:1.9rem; height:1.9rem; border-radius:50%; background:var(--card)}
.tm-me b{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1rem; max-width:10rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tm-me em{font-style:normal; color:var(--gold); text-transform:capitalize}
.tm-me a{color:var(--slot-grey); font-size:.8rem}
.tm-me a:hover{color:var(--gold)}
.tm .tm-switch{width:auto; max-width:100%; height:2.7rem; background:var(--score-box); border:1px solid var(--divider); font-size:.92rem}

/* panels and forms */
.tm-panel{background:var(--card); border:var(--stroke-card) solid var(--gold); box-shadow:var(--shadow-card); margin:0 0 1.2rem}
.tm .tm-panel > h2:first-child{margin:0; padding:.6rem 1rem; color:var(--white); font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; letter-spacing:.03em; border-bottom:1px solid var(--divider); display:flex; gap:.6rem; align-items:baseline; justify-content:space-between}
.tm .tm-panel > h2::after{content:none}
.tm-panel > h2 small{font-family:var(--body); font-weight:400; text-transform:none; letter-spacing:0; color:var(--slot-grey); font-size:.85rem}
.tm-form{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:.7rem; padding:1rem}
.tm-f{grid-column:span 12; min-width:0}
.tm-f label{display:block; margin:0 0 .25rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tm input,.tm select,.tm textarea{width:100%; min-width:0; height:2.9rem; padding:0 .75rem; background:var(--stage-black); border:2px solid var(--divider); color:var(--white); font:600 1rem var(--body); border-radius:0}
.tm textarea{height:auto; min-height:4.2rem; padding:.55rem .75rem; resize:vertical}
.tm input:focus,.tm select:focus,.tm textarea:focus{outline:0; border-color:var(--gold)}
.tm-btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:2.9rem; padding:0 1.1rem; background:var(--gold); color:var(--on-gold); border:0; cursor:pointer; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; letter-spacing:.03em}
.tm-btn:hover{background:#D1AB5A}
a.tm-btn{text-decoration:none}
.tm-btn:disabled{opacity:.5; cursor:default}
.tm-btn:focus-visible{outline:3px solid var(--white); outline-offset:2px}
.tm-btn--ghost{background:transparent; color:var(--gold); border:1px solid var(--gold-dim); font-size:.92rem; min-height:2.3rem; padding:0 .8rem}
.tm-btn--ghost:hover{background:var(--score-box)}
.tm-btn--ghost:focus-visible{outline-color:var(--gold)}
.tm-btn--danger{color:var(--loss); border-color:#5a2f29}
.tm-actions{grid-column:span 12; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.tm-status{font-size:.92rem; color:var(--slot-grey); min-height:1.2em}
.tm-status.ok{color:var(--win)} .tm-status.err{color:var(--loss)}
@media (min-width:640px){ .tm-f--2{grid-column:span 2} .tm-f--3{grid-column:span 3} .tm-f--4{grid-column:span 4} .tm-f--5{grid-column:span 5} .tm-f--6{grid-column:span 6} .tm-f--8{grid-column:span 8} }

/* filters */
.tm-filters{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem; padding:.8rem 1rem; border-bottom:1px solid var(--divider)}
.tm-filters input{grid-column:1/-1}
.tm .tm-filters input,.tm .tm-filters select{height:2.5rem; font-size:.92rem}
@media (min-width:760px){ .tm-filters{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))} .tm-filters input{grid-column:auto} }

/* match list */
.tm-list{list-style:none; margin:0; padding:0}
.tm-row{padding:.75rem 1rem; border-bottom:1px solid #2a2a2a; border-left:4px solid var(--divider)}
.tm-row:last-child{border-bottom:0}
.tm-row.W{border-left-color:var(--win)} .tm-row.L{border-left-color:var(--loss)} .tm-row.wait{border-left-color:var(--gold-dim)}
.tm-row__top{display:flex; align-items:flex-start; gap:.6rem}
.tm-row__labels{flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem}
.tm-res{flex:none; width:2rem; height:2rem; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:1.1rem; background:var(--score-box); color:var(--slot-grey)}
.tm-row.W .tm-res{background:var(--win); color:#10210f} .tm-row.L .tm-res{background:var(--loss); color:#2a0d08}
.tm-vs{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.25rem; line-height:1.1; min-width:0; overflow-wrap:anywhere}
.tm-vs i{font-style:normal; color:var(--slot-grey); font-size:.8em; margin-right:.25em}
.tm-chip{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.12rem .45rem; background:var(--score-box); color:var(--white); white-space:nowrap}
.tm-chip.pub{background:transparent; border:1px dashed var(--gold-dim); color:#d9c08a; cursor:help}
.tm-chip.official{background:var(--gold); color:var(--on-gold)} .tm-chip.hk{background:rgba(217,146,43,.18); color:var(--hk)} .tm-chip.am{background:rgba(91,127,181,.22); color:#9dbbe6} .tm-chip.tag{background:transparent; padding-left:0; padding-right:0; color:var(--slot-grey)} .tm-chip.tag::before{content:'#'; opacity:.7}
.tm-row__edit{flex:none; margin-left:auto; display:flex; gap:.4rem}
.tm-meta{display:flex; flex-wrap:wrap; gap:.2rem .9rem; margin:.4rem 0 0; color:var(--slot-grey); font-size:.85rem; align-items:center}
.tm-meta b{color:var(--white); font-weight:600}
.tm-heroes{display:flex; gap:.2rem; align-items:center}
.tm-heroes img{width:1.7rem; height:1.7rem; border-radius:50%; background:var(--score-box); object-fit:cover}
.tm-heroes span{color:var(--slot-grey); font-size:.72rem; padding:0 .25rem}
.tm-note{margin:.4rem 0 0; font-size:.92rem; overflow-wrap:anywhere}
.tm-wait{margin:.4rem 0 0; font-size:.92rem; color:#d9c08a; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.tm-empty{padding:1.6rem 1rem; color:var(--slot-grey)}
.tm-empty b{color:var(--white)}
.tm-rowform{margin:.7rem -1rem -.75rem; background:#141414; border-top:1px solid var(--divider)}
.tm-foot{color:var(--slot-grey); font-size:.85rem; margin:0 0 1.5rem}

/* ---------- one match of the library (/team/<slug>/<match id>, team-match.html): labels strip and notes around the shared match view ---------- */
.tmm-bar{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; max-width:68rem; margin:0 auto .6rem; padding:0 1rem; min-height:0}
.tmm-bar b{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.25rem; line-height:1.1}
.tmm-bar b i{font-style:normal; color:var(--slot-grey); font-size:.8em}
.tmm-bar .tm-res.W{background:var(--win); color:#10210f} .tmm-bar .tm-res.L{background:var(--loss); color:#2a0d08}
.tmm-date{color:var(--slot-grey); font-size:.85rem}
/* dashboard */
.tmd-open{margin-left:auto; padding:.3rem .8rem; font-size:.8rem}
#tm-dash h2{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
#tm-dash-body{padding:0 1rem 1rem}
#tm-dash-body[hidden]{display:none}
.tmd-filters{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem; padding:.8rem 0}
.tm .tmd-filters select,.tm .tmd-filters input{height:2.5rem; font-size:.92rem}
@media (min-width:760px){ .tmd-filters{grid-template-columns:repeat(4,minmax(0,1fr))} }
.tmd-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem}
@media (min-width:760px){ .tmd-tiles{grid-template-columns:repeat(6,minmax(0,1fr))} }
.tmd-tile{background:rgba(255,255,255,.04); border:1px solid var(--divider); padding:.6rem .7rem; min-width:0}
.tmd-tile small{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slot-grey)}
.tmd-tile b{display:block; font-family:var(--display); font-size:1.5rem; line-height:1.2; font-variant-numeric:tabular-nums}
.tmd-tile span{display:block; font-size:.8rem; color:var(--text-2)}
.tmd-strip{display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; margin:.7rem 0 0}
.tmd-strip small{margin-right:.4rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tmd-strip i{font-style:normal; font-weight:700; font-size:.72rem; width:1.5rem; height:1.5rem; display:inline-flex; align-items:center; justify-content:center}
.tmd-strip i.w{background:var(--win); color:#10210f}
.tmd-strip i.l{background:var(--loss); color:#2a0d08}
#tm-dash-body h3{margin:1.2rem 0 .4rem; font-family:var(--display); text-transform:uppercase; font-size:1rem; letter-spacing:.03em}
.tmd-scroll{overflow-x:auto}
.tmd-table{width:100%; border-collapse:collapse; font-size:.92rem; font-variant-numeric:tabular-nums}
.tmd-table th,.tmd-table td{padding:.4rem .6rem; text-align:left; border-bottom:1px solid var(--divider); white-space:nowrap}
.tmd-table thead th{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey); font-weight:600}
.tmd-table tbody th{font-weight:600}
.tmd-table tr.dim th,.tmd-table tr.dim td{color:var(--slot-grey)}
.tmd-table img{width:1.5rem; height:1.5rem; vertical-align:middle; margin-right:.45rem}
.tmd-pool{border:1px solid var(--divider); margin:.4rem 0}
.tmd-pool summary{cursor:pointer; padding:.5rem .7rem; font-weight:600}
.tmd-pool summary small{margin-left:.6rem; font-weight:400; color:var(--slot-grey); font-size:.8rem}
.tmd-note{margin:.8rem 0 0; font-size:.85rem; color:var(--text-2)}
/* opponent logos (and the team's own logo on the match bar) */
.tm-opplogo{width:1.7em; height:1.7em; object-fit:contain; vertical-align:middle; margin:0 .35em 0 .1em; flex:none}
.tm-oppform input[type=text],.tm .tm-oppform #tm-opp-name{width:min(100%,26rem)}
.tm-opplist{list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.4rem; max-width:30rem}
.tm-opplist li{display:flex; align-items:center; gap:.6rem; padding:.35rem .6rem; background:var(--score-box)}
.tm-opplist b{flex:1 1 auto; overflow-wrap:anywhere}
.tm-opplist .tm-opplogo{width:2.2rem; height:2.2rem; margin:0}
/* Scrim Companion (js/team-live.js): the live page is made for a phone next to the screen, so the buttons are large */
.tm-chip.live{background:var(--loss); color:var(--white); text-decoration:none; font-weight:600}
.tm-chip.live::before{content:''; display:inline-block; width:.5em; height:.5em; margin-right:.4em; border-radius:50%; background:var(--white); animation:tml-blink 1.2s ease-in-out infinite}
@keyframes tml-blink{50%{opacity:.25}}
.tm-h2row .tml-btn{margin-left:auto; margin-right:.5rem} .tm-h2row .tml-btn + .tm-addbtn{margin-left:0}
.tml-start{display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr) auto; gap:.7rem; padding:1rem; align-items:end}
.tml-start .tm-status{grid-column:1/-1; margin:0}
@media (max-width:640px){ .tml-start{grid-template-columns:1fr} }
.tml{max-width:46rem; margin:0 auto}
.tml-top{display:flex; gap:1rem; align-items:flex-start; margin:0 0 1rem; flex-wrap:wrap}
.tml-top h1{margin:.1rem 0 0; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:clamp(1.7rem,7vw,2.6rem); line-height:1; overflow-wrap:anywhere}
.tml-sub{margin:.3rem 0 0; color:var(--slot-grey); font-size:.92rem}
.tml-clockp{padding:1rem; text-align:center}
.tml-clock{font-family:var(--display); font-weight:600; font-size:clamp(4rem,22vw,7rem); line-height:1; color:var(--white); font-variant-numeric:tabular-nums}
.tml[data-state=pause] .tml-clock,.tml[data-state=idle] .tml-clock,.tml[data-state=ended] .tml-clock{color:var(--slot-grey)}
.tml[data-state=run] .tml-state{color:var(--win)}
.tml-state{margin:.3rem 0 .8rem; color:var(--text-2)}
.tml-ctl{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; align-items:center}
.tml-ctl .tm-btn{min-height:3rem}
.tml-ctl .tml-go{min-height:4rem; font-size:1.25rem; flex:1 1 100%}
.tml-set{display:inline-flex; gap:.4rem; align-items:center}
.tm .tml-set input{width:5.2rem; height:3rem; text-align:center}
.tml-markp{padding:1rem; display:grid; gap:.8rem}
.tml-markp[hidden]{display:none}
.tml-mark{min-height:5.5rem; font-size:1.6rem; width:100%}
.tml-mark:active{transform:scale(.99)}
.tml-tags{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem}
.tml-tags .tm-btn{min-height:3.2rem; padding:0 .3rem; font-size:.92rem}
@media (max-width:420px){ .tml-tags{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tml-delay{font-size:.85rem; color:var(--text-2)}
.tm .tml-delay input{width:4.5rem; display:inline-block; margin:0 .3rem} .tml-delay small{color:var(--slot-grey)}
.tml-markp .tm-status{margin:0}
.tml-list{list-style:none; margin:0; padding:.4rem 1rem 1rem}
.tml-n{display:grid; grid-template-columns:4rem minmax(0,1fr) auto; gap:.7rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--divider)}
.tml-n:last-child{border-bottom:0}
.tml-t{font-family:var(--display); font-size:1.25rem; color:var(--gold); font-variant-numeric:tabular-nums}
.tml-x p{margin:0; overflow-wrap:anywhere} .tml-x small{color:var(--slot-grey); font-size:.8rem}
.tml-nb{display:inline-flex; gap:.4rem; flex-wrap:wrap}
.tml-n.edit .tml-x{grid-column:2/-1; display:flex; gap:.5rem; flex-wrap:wrap} .tml-n.edit input{flex:1 1 12rem}
.tml-list .tm-empty{padding:.6rem 0}
/* match page layouts: video on top, and the stats window */
.tmm-lay{margin-left:auto; display:inline-flex; gap:.4rem; flex-wrap:wrap}
.tmm-lay .tm-btn{padding:.3rem .7rem; font-size:.8rem}
.tmm-lay .tm-btn.on,.tmm-lay .tm-btn[aria-pressed=true]{background:var(--gold); color:var(--on-gold)}
.tmm-lay + .tmm-editbtn{margin-left:0}
.mv.mv--theater > .tmm-vod, .mv.mv--popped > .tmm-vod, .mv.mv--theater > .tmm-vod.float, .mv.mv--popped > .tmm-vod.float{position:static; width:100%; max-width:min(100%, calc((100vh - 13rem) * 1.7778)); margin:0 auto .9rem; padding:0 1rem}
.mv.mv--theater .tmm-vodbtns, .mv.mv--popped .tmm-vodbtns{display:none}
@media (min-width:1100px){ .mv.mv--theater.mv--desk .mv-stage{grid-template-areas:"graph info" "top top" "bot bot"} }
.mv.mv--popped > .mv-stage, .mv.mv--popped > .mv-sl, .mv.mv--popped > .mv-approx{display:none}
.mv.mv--popped > .tmm-bar::after{content:'The scoreboard, graph and map are open in the stats window. Moving the time bar there moves the video here.'; flex-basis:100%; font-size:.85rem; color:var(--text-2)}
.mv.mv--pop > .tm, .mv.mv--pop > .mv-top{display:none}
.tmm-exprow{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; margin:0; padding:.6rem 1rem; border-bottom:1px solid var(--divider); font-size:.85rem; color:var(--text-2)}
.tmm-exprow[hidden]{display:none}
.tmm-exprow .tm-btn{padding:.3rem .7rem; font-size:.8rem; min-height:0}
.tmm-exp{margin-left:auto; font-family:var(--body); font-size:.8rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--slot-grey); white-space:nowrap}
.tmm-exp[hidden]{display:none}
.tmm-rnote .tmm-exp{margin-left:.4rem}
/* getting started card */
.tm-gslist{list-style:none; margin:0; padding:.2rem 1rem .4rem; display:grid; gap:.1rem}
.tm-gslist li{display:flex; align-items:center; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--divider)}
.tm-gslist li:last-child{border-bottom:0}
.tm-gsmark{flex:none; width:1.5rem; height:1.5rem; border:2px solid var(--slot-grey); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem}
.tm-gslist li.done .tm-gsmark{border-color:var(--win); background:var(--win); color:#10210f}
.tm-gslist li > div{flex:1; min-width:0}
.tm-gslist b small{font-weight:400; color:var(--slot-grey); margin-left:.3rem}
.tm-gslist p{margin:.1rem 0 0; font-size:.85rem; color:var(--text-2)}
.tm-gslist .tm-btn{flex:none; padding:.35rem .7rem; font-size:.8rem}
.tm-gslist li.done b{color:var(--text-2)}
.tm-gsfoot{margin:0; padding:.2rem 1rem .9rem; font-size:.85rem; color:var(--text-2)}
@media (max-width:560px){ .tm-gslist li{flex-wrap:wrap} .tm-gslist .tm-btn{margin-left:2.3rem} }
/* phones: nothing may be wider than the screen */
.tm-filters > *,.tmd-filters > *{min-width:0}
.tm-fdate{min-width:0}
.tm-fdate input{width:100%}
.tmd-cols > div{min-width:0}
.tm-heroes{flex-wrap:wrap; min-width:0}
.tm-more{list-style:none; padding:.8rem 1rem; text-align:center}
@media (max-width:560px){
  .tm-tab{padding:.6rem .65rem; font-size:.92rem; letter-spacing:.02em}
  .tmd-nav{position:static}
  .tmd-jump{padding:.4rem .6rem}
  .tmd-opts{gap:.5rem .8rem}
  .tm-addbtn{margin-left:0}
  .tms-steps{padding-left:1.1rem}
}
/* Start here tab */
#tm-start-body{padding:0 1rem 1rem}
.tms-steps{margin:0; padding-left:1.3rem; display:grid; gap:.5rem 2rem}
@media (min-width:1000px){ .tms-steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tms-steps li b{font-family:var(--display); text-transform:uppercase; letter-spacing:.03em}
.tms-steps p{margin:.15rem 0 0; font-size:.92rem; color:var(--text-2)}
.tms-links{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.tms-links a{color:var(--gold); font-weight:600}
.tms-links span{display:block; font-size:.85rem; color:var(--text-2)}
.tms-note{margin:0 0 .6rem; font-size:.85rem; color:var(--text-2)}
.tms-filters{display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; margin:0 0 .5rem}
.tm .tms-filters input[type=search]{flex:1 1 16rem; height:2.5rem}
.tm .tms-filters select{width:auto; height:2.5rem}
.tms-count{margin:0 0 .3rem; font-size:.8rem; color:var(--slot-grey)}
.tms-btn{padding:.3rem .7rem; font-size:.8rem; white-space:nowrap}
.tms-err{display:block; color:var(--loss); white-space:normal; max-width:14rem}
.tms-table a{color:var(--gold)}
#tm-logoset{margin-bottom:1rem}
.tm-logorow{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap}
.tm-logorow > div:not(.tm-logo){flex:1 1 16rem; min-width:0}
.tm-logorow .tm-logo{flex:none}
.tm-logorow p{margin:0 0 .5rem}
.tm-filebtn{position:relative; overflow:hidden; cursor:pointer}
.tm-filebtn input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.tm-filebtn:focus-within{outline:3px solid var(--gold); outline-offset:2px}
/* members and invites in Settings */
#tm-members{margin:0}
.tm-mrow,.tm-irow{display:grid; gap:.5rem; align-items:center; margin:0 0 .45rem}
.tm-mrow{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 9rem auto}
.tm-irow{grid-template-columns:minmax(0,2fr) auto minmax(0,1.4fr) auto}
@media (max-width:700px){ .tm-mrow,.tm-irow{grid-template-columns:1fr 1fr} }
.tm-mrow b small{font-weight:400; color:var(--slot-grey)}
.tm-mrow span,.tm-irow span{font-size:.85rem; color:var(--slot-grey)}
.tm .tm-mrow select,.tm .tm-irow input{height:2.4rem}
.tm-mrow .tm-btn,.tm-irow .tm-btn{padding:.35rem .7rem; font-size:.8rem}
.tm-invform{display:flex; flex-wrap:wrap; align-items:end; gap:.6rem 1rem; margin:.4rem 0 .8rem}
.tm-invform label{display:grid; gap:.2rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slot-grey)}
.tm .tm-invform select{height:2.4rem; width:auto; min-width:8rem}
/* match page: the team's extras as one tabbed panel; a column beside the match from 1500 px */
.tmm-side{max-width:68rem; margin:1.2rem auto 0; padding:0 1rem; min-height:0}
.tmm-side .tmm-report,.tmm-side .tmm-notes{max-width:none; margin:0; padding:0}
.tmm-side [data-spane][hidden]{display:none}
.tmm-stabs{margin-bottom:.7rem; gap:0; padding:0 .25rem; background:var(--card)}
.tmm-stabs .tm-tab{flex:1 1 0; padding:.6rem .5rem; font-size:.92rem; text-align:center}
.tmm-stabs .tm-tab small{font-family:var(--body); font-size:.7rem; color:var(--slot-grey); margin-left:.2rem}
.tma-jump{display:flex; flex-wrap:wrap; gap:.3rem; margin:.7rem 1rem .8rem}
.tmm-rsec{scroll-margin-top:5rem}
@media (min-width:1500px){
  .mv.mv--side{display:grid; grid-template-columns:minmax(0,1fr) 29rem; column-gap:1rem; align-items:start}
  .mv.mv--side > *{grid-column:1; min-width:0}
  .mv.mv--side > .mv-sl{width:100%; justify-self:center}   /* a grid item with auto margins shrinks to its content: keep Deeper stats as wide as the match */
  .mv.mv--side > .tmm-bar,.mv.mv--side > .tmm-labels,.mv.mv--side > .tmm-draft{width:100%; max-width:var(--stage-w, 68rem); justify-self:center; padding-left:0; padding-right:0}
  .mv.mv--side > .tmm-side{grid-column:2; grid-row:1 / span 40; position:sticky; top:4.1rem; max-height:calc(100vh - 4.6rem); overflow-y:auto; overscroll-behavior:contain; margin:0; padding:0 .2rem 1rem 0; max-width:none; scrollbar-width:thin}
  .mv.mv--side .tmm-side .tmm-vod{position:static; width:auto; max-width:none; margin:0 0 .7rem; padding:0}
  .mv.mv--side .tmm-side .tmm-vodbtns{display:none}
  .mv.mv--side .tmm-side .tmm-rsec{scroll-margin-top:.5rem}
  .mv.mv--side .tma-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* roster editor in Settings */
.tm-rrow{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto auto; gap:.5rem; align-items:center; margin:0 0 .45rem}
@media (max-width:640px){ .tm-rrow{grid-template-columns:1fr 1fr} }
.tm .tm-rrow input:not([type=checkbox]){height:2.4rem}
.tm-rcur{display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; white-space:nowrap}
.tm-rcur input{width:1.05rem; height:1.05rem; accent-color:var(--gold)}
.tm-rrow .tm-btn{padding:.35rem .7rem; font-size:.8rem}
.tm-rlist{list-style:none; margin:.4rem 0; padding:0}
.tm-rlist li{display:flex; gap:.8rem; align-items:baseline; padding:.3rem 0; border-bottom:1px solid var(--divider)}
.tm-rlist span{color:var(--slot-grey); font-size:.85rem}
.tm-rlist em{font-style:normal; font-size:.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:.04em}
#tm-roster{margin-bottom:1rem}
/* dashboard layout: options row, jump buttons, folding sections, columns */
#tm-dash > h2{display:none}
.tmd-opts{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem; padding:0 0 .7rem}
.tmd-opts .tmd-segs{margin:0}
.tmd-check{display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--text-2)}
.tmd-check small{color:var(--slot-grey)}
.tm .tmd-check select{width:auto; height:2rem; padding:0 .4rem; font-size:.85rem}
.tmd-check input{width:1.05rem; height:1.05rem; accent-color:var(--gold)}
.tmd-nav{position:sticky; top:3.6rem; z-index:5; display:flex; flex-wrap:wrap; gap:.3rem; margin:0 -1rem .8rem; padding:.5rem 1rem; background:var(--card,#181818); border-top:1px solid var(--divider); border-bottom:1px solid var(--divider)}
.tmd-jump{appearance:none; border:1px solid var(--gold-dim); background:transparent; color:var(--gold); font-family:var(--display); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; padding:.35rem .7rem; cursor:pointer}
.tmd-jump:hover{background:var(--score-box)}
.tmd-jump:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.tmd-jump--all{margin-left:auto; color:var(--slot-grey)}
.tmd-sec{border:1px solid var(--divider); margin:0 0 .6rem; scroll-margin-top:7rem}
.tmd-sec > summary{cursor:pointer; display:flex; align-items:baseline; gap:.7rem; padding:.6rem .8rem; background:rgba(255,255,255,.03); list-style:none}
.tmd-sec > summary::-webkit-details-marker{display:none}
.tmd-sec > summary::before{content:'+'; font-family:var(--display); font-weight:700; color:var(--gold); width:.8rem}
.tmd-sec[open] > summary::before{content:'–'}
.tmd-sec > summary b{font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:1.1rem}
.tmd-sec > summary small{color:var(--slot-grey); font-size:.8rem}
.tmd-sec > summary:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
.tmd-secb{padding:.7rem .8rem .9rem}
.tmd-secb > h3:first-child, .tmd-cols > div > h3:first-child{margin-top:0}
.tmd-cols{display:grid; gap:1rem 1.6rem}
@media (min-width:1150px){ .tmd-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .tmd-cols .tmd-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tmd-poolgrid{display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; align-items:start}
.tmd-pool,.tmd-sec,.tmd-secb{min-width:0}
@media (min-width:900px){ .tmd-poolgrid{grid-template-columns:repeat(auto-fill,minmax(27rem,1fr))} }
.tmd-poolgrid .tmd-pool{margin:0}
.tmd-table th.tmd-sortable{cursor:pointer; user-select:none}
.tmd-table th.tmd-sortable:hover{color:var(--white)}
.tmd-table th[aria-sort=descending]::after{content:' ▼'; font-size:.7em}
.tmd-table th[aria-sort=ascending]::after{content:' ▲'; font-size:.7em}
.tmd-table tr[hidden]{display:none}
.tmd-allbtn{margin:.4rem 0 0; padding:.3rem .7rem; font-size:.8rem}
/* tabs on the team page */
.tm-tabs{display:flex; gap:.25rem; margin:0 0 1rem; border-bottom:2px solid var(--divider); overflow-x:auto}
.tm-tab{appearance:none; background:transparent; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; padding:.7rem 1.1rem; color:var(--text-2); font-family:var(--display); font-size:1.1rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; white-space:nowrap}
.tm-tab:hover{color:var(--white)}
.tm-tab.on{color:var(--gold); border-bottom-color:var(--gold)}
.tm-tab:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
.tm-panel[hidden],.tm-panel[data-closed]{display:none}
.tm-h2row{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.tm-addbtn{margin-left:auto; padding:.4rem .9rem; font-size:.85rem}
#tm-dash .tmd-open{display:none}
.tmd-segs{display:inline-flex; flex-wrap:wrap; margin:.1rem 0 .6rem; border:1px solid var(--divider)}
.tmd-seg{appearance:none; border:0; border-right:1px solid var(--divider); background:transparent; color:var(--text-2); font:inherit; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; padding:.4rem .8rem; cursor:pointer}
.tmd-seg:last-child{border-right:0}
.tmd-seg:hover{background:var(--score-box)}
.tmd-seg.on{background:var(--gold); color:var(--on-gold); font-weight:700}
.tmd-seg:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
.tmd-seg.on:focus-visible{outline-color:var(--white)}
#tm-dash-body h3 small{margin-left:.5rem; font-family:var(--body); text-transform:none; letter-spacing:0; font-size:.8rem; font-weight:400; color:var(--slot-grey)}
.tmd-table td.pos{color:var(--win)} .tmd-table td.neg{color:var(--loss)}
.tmd-table small{color:var(--slot-grey)}
.tmd-table a{color:inherit; text-decoration:underline; text-decoration-color:var(--divider)}
.tmd-bar{display:block; width:7rem; height:.6rem; background:#2a2a2a}
.tmd-bar i{display:block; height:100%; background:var(--win)}
.tmd-lane{display:inline-block; width:.6rem; height:.6rem; margin-right:.4rem; border-radius:50%; background:var(--slot-grey)}
.tmd-lane.yellow{background:#e8c84a} .tmd-lane.blue{background:#5aa0e8} .tmd-lane.green{background:#6cc070}
.tmd-cmp{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .5rem}
.tm .tmd-cmp select{height:2.4rem; min-width:10rem}
.tmd-cmp span{color:var(--slot-grey); text-transform:uppercase; font-size:.8rem}
.tmd-cmpt{max-width:40rem}
.tmd-sugg{border:1px solid var(--divider); background:rgba(214,168,74,.06); padding:.5rem .8rem; margin:.4rem 0; font-size:.92rem}
.tmd-sugg p{margin:.25rem 0}
.tmd-sugg a{color:inherit}
.tmb{max-width:68rem; margin:1.2rem auto 2rem; padding:0 1rem; min-height:0}
.tmb .tmm-bar{padding:0; margin-bottom:.8rem}
.tmb-note{margin:.8rem 1rem; font-size:.92rem; color:var(--text-2)}
.tmb-note a{color:var(--gold)}
.tmb-team{margin:0 1rem 1rem; overflow-x:auto}
.tmb-team h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; margin:0 0 .4rem; font-family:var(--display); text-transform:uppercase; font-size:1.1rem}
.tmb-team h3 small{font-family:inherit; font-size:.72rem; color:var(--slot-grey); letter-spacing:.04em}
.tmb-team h3 span{margin-left:auto; font-size:.8rem; color:var(--text-2)}
.tmb-team table{width:100%; border-collapse:collapse; font-size:.92rem; font-variant-numeric:tabular-nums}
.tmb-team th,.tmb-team td{padding:.4rem .6rem; text-align:left; border-bottom:1px solid var(--divider); white-space:nowrap}
.tmb-team thead th{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey); font-weight:600}
.tmb-team tbody th{font-weight:600}
.tmb-team tr.ours th{color:#f0d48a}
.tm-fdate{display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--slot-grey); text-transform:uppercase; letter-spacing:.04em}
.tm-fdate input{min-width:0; flex:1}
.tm-fclear{padding:.3rem .7rem; font-size:.8rem}
.tm-fclear[hidden],.tm-filters select[hidden]{display:none}
.tmm-editbtn{margin-left:auto; padding:.3rem .7rem; font-size:.8rem}
.tmm-labels{max-width:68rem; margin:0 auto .8rem; padding:0 1rem; min-height:0}
.tmm-labels[hidden]{display:none}
.tmm-note{flex-basis:100%; margin:0; font-size:.92rem; color:var(--text-2); overflow-wrap:anywhere}
.tmm-notes{max-width:68rem; margin:1.4rem auto 0; padding:0 1rem; min-height:0}
.tmm-add{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.6rem .8rem; padding:1rem; border-bottom:1px solid var(--divider); align-items:center}
.tmm-add__x{grid-column:1/-1; grid-row:1}
.tmm-add__x textarea{display:block; width:100%; min-height:4.2rem; resize:vertical}
.tmm-add__t{grid-column:1; grid-row:2; display:flex; align-items:center; gap:.5rem}
.tmm-add .tmm-add__t label{margin:0}
.tm .tmm-add__t input{width:5.2rem; height:2.5rem}
.tmm-add__b{grid-column:3; grid-row:2}
.tmm-add__b .tm-btn{height:2.5rem; min-height:0; padding:0 1.1rem; white-space:nowrap}
.tmm-add .tm-status{grid-column:1/-1; grid-row:3; font-size:.8rem}
.tmm-add label{display:block; margin:0 0 .25rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tmm-add .tm-status{margin:0}
.tmm-add__t input{text-align:center; font-variant-numeric:tabular-nums}

.tmm-list{list-style:none; margin:0; padding:0}
.tmm-n{display:flex; gap:.8rem; align-items:flex-start; padding:.7rem 1rem; border-bottom:1px solid #2a2a2a}
.tmm-n:last-child{border-bottom:0}
.tmm-n.hot{background:rgba(196,156,71,.12)}
.tmm-n__t{flex:none; min-width:3.6rem; padding:.25rem .4rem; background:var(--score-box); border:1px solid var(--gold-dim); color:var(--gold); font:600 .95rem var(--body); font-variant-numeric:tabular-nums; text-align:center; cursor:pointer}
.tmm-n__t:hover{background:var(--gold); color:var(--on-gold)}
.tmm-n__t--all{cursor:default; color:var(--slot-grey); border-color:var(--divider); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em}
.tmm-n__t--all:hover{background:var(--score-box); color:var(--slot-grey)}
.tmm-n__body{flex:1; min-width:0}
.tmm-n__body p{margin:0; overflow-wrap:anywhere}
.tmm-n__body small{color:var(--slot-grey); font-size:.8rem}
.tmm-n__body small a{color:var(--slot-grey)}
.tmm-n__acts{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.tmm-edit{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.6rem; width:100%}
.tmm-edit .tmm-n__acts{grid-column:1/-1}
@media (max-width:560px){ .tmm-n{flex-wrap:wrap} .tmm-n__acts{flex-basis:100%; justify-content:flex-end} }
a.tm-vs{text-decoration:none} a.tm-vs:hover{color:var(--gold)}
.tm-open{margin-left:.2rem}

/* ---------- match video (js/team-vod.js): docked above the match, or floating in the corner so it stays visible while scrubbing ---------- */
.tmm-vod{max-width:52rem; margin:0 auto .9rem; padding:0 1rem; min-height:0}
.tmm-vod .tm-panel{margin:0}
.tmm-vodbtns{display:flex; gap:.4rem}
.tmm-vodwrap{position:relative; aspect-ratio:16/9; background:#000}
.tmm-vodwrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tmm-vodset{display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center; padding:.6rem .8rem; border-top:1px solid var(--divider); font-size:.85rem}
.tmm-vodoff{color:var(--slot-grey); margin-right:auto}
.tmm-vodoff b{color:var(--white); font-variant-numeric:tabular-nums}
.tmm-vodset .tm-status{flex-basis:100%; min-height:0}
.tmm-vodset .tm-status:empty{display:none}
.tmm-vodform{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; padding:1rem; align-items:end; flex-basis:100%}
.tmm-vodset .tmm-vodform{grid-template-columns:minmax(0,1fr) 7rem auto auto; padding:.4rem 0 0}
.tmm-vodform label{display:block; margin:0 0 .25rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tmm-vodform .tm-status{grid-column:1/-1; margin:0}
@media (max-width:640px){ .tmm-vodform,.tmm-vodset .tmm-vodform{grid-template-columns:minmax(0,1fr)} }
.tmm-vod.float{position:fixed; right:.8rem; bottom:.8rem; z-index:60; width:min(30rem,38vw); max-width:none; margin:0; padding:0}
.tmm-vod.float .tm-panel{box-shadow:0 10px 40px rgba(0,0,0,.8)}
.tmm-vod.float .tmm-vodset{font-size:.8rem; padding:.45rem .6rem}
@media (max-width:1099px){ .tmm-vod.float{position:static; width:auto; max-width:52rem; margin:0 auto .9rem; padding:0 1rem} .tmm-vodbtns{display:none} }
.tm-chip.ser{background:transparent; border:1px solid var(--divider); color:var(--text-2)}
.tm-chip.vod{background:rgba(196,156,71,.16); color:var(--gold)}
.tm-chip.scouting{background:#2b2b3a; color:#b9b9e6}
.tm #tm-a-match{min-height:2.9rem; height:2.9rem; padding:.7rem .75rem; line-height:1.3; resize:vertical}

/* ---------- automatic match report (lib/facts.js, drawn by js/team-match.js) ---------- */
.tmm-report{max-width:68rem; margin:1.4rem auto 0; padding:0 1rem; min-height:0}
.tmm-rhead{margin:0; padding:.8rem 1rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; line-height:1.25; color:var(--gold); border-bottom:1px solid var(--divider)}
.tmm-rsec{border-bottom:1px solid #2a2a2a}
.tmm-rsec summary{cursor:pointer; padding:.6rem 1rem; font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:1rem; display:flex; gap:.6rem; align-items:center; list-style:none}
.tmm-rsec summary::-webkit-details-marker{display:none}
.tmm-rsec summary::before{content:"+"; width:1rem; color:var(--gold); font-size:1.1rem}
.tmm-rsec[open] summary::before{content:"–"}
.tmm-rsec summary small{margin-left:auto; color:var(--slot-grey); font-family:var(--body); font-weight:400}
.tmm-rsec summary:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
.tmm-rsec ul{list-style:none; margin:0; padding:0 1rem .6rem}
.tmm-rsec li{display:flex; gap:.7rem; align-items:flex-start; padding:.35rem 0 .35rem .6rem; border-left:3px solid var(--divider); margin:.2rem 0; font-size:.92rem; overflow-wrap:anywhere}
.tmm-rsec li.good{border-left-color:var(--win)} .tmm-rsec li.bad{border-left-color:var(--loss)}
.tmm-rsec li .tmm-n__t{min-width:3.4rem; font-size:.85rem; padding:.15rem .3rem}
.tmm-rdot{flex:none; width:3.4rem}
.tmm-rnote{margin:0; padding:.5rem 1rem; color:var(--slot-grey); font-size:.8rem}
.tmm-rnote i{display:inline-block; width:.7rem; height:.7rem; vertical-align:-1px; margin:0 .25rem 0 .5rem}
.tmm-rnote i.good{background:var(--win)} .tmm-rnote i.bad{background:var(--loss)}
@media (max-width:560px){ .tmm-rdot{display:none} }

/* ---------- AI analysis panel (js/team-analysis.js) ---------- */
.tma-msg{margin:0; padding:.7rem 1rem; font-size:.92rem; display:flex; gap:.6rem; align-items:center}
.tma-msg.err{color:var(--loss)}
.tma-run{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.2rem 1rem .8rem}
.tm .tma-run select{width:auto; max-width:100%; height:2.9rem}
.tma-run .tm-status{flex-basis:100%}
.tma-key{margin:0; padding:.5rem 1rem .8rem; color:var(--slot-grey); font-size:.85rem}
.tma-link{background:none; border:0; padding:0; color:var(--gold); font:inherit; text-decoration:underline; cursor:pointer}
.tma-keyform{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; padding:0 1rem 1rem; align-items:end}
.tma-keyform .tma-msg,.tma-keyform .tm-status{grid-column:1/-1; padding:0}
.tma-keyform label{display:block; margin:0 0 .25rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tma-badge{margin:0; padding:.45rem 1rem; font-size:.85rem; font-weight:600}
.tma-badge.ok{color:var(--win); background:rgba(127,201,138,.08)} .tma-badge.warn{color:#e6b35a; background:rgba(230,179,90,.08)}
.tma-body{padding:.3rem 1rem .8rem; font-size:.92rem}
.tma-body p{margin:.4rem 0; overflow-wrap:anywhere}
.tma-body h3{margin:.8rem 0 .3rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.tma-body h3 small{font-family:var(--body); font-weight:400; text-transform:none; color:var(--slot-grey); font-size:.85rem}
.tma-body h4{margin:.5rem 0 .1rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tma-body h4.good{color:var(--win)} .tma-body h4.bad{color:var(--loss)}
.tma-over{border-bottom:1px solid #2a2a2a}
.tma-stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.4rem; margin:.6rem 0 0}
.tma-stats div{background:var(--score-box); padding:.4rem .6rem}
.tma-stats dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tma-stats dd{margin:0; font-weight:600}
.tma-list{margin:.3rem 0; padding-left:1.1rem}
.tma-list li{margin:.25rem 0; overflow-wrap:anywhere}
.tma-list .tmm-n__t{min-width:3.2rem; font-size:.8rem; padding:.1rem .3rem; vertical-align:1px}
.tma-flags li{color:#e6b35a}
.tma-card{border-left:3px solid var(--divider); padding:.1rem 0 .1rem .8rem; margin:.6rem 0}
.tma-card h3{margin-top:.2rem}
.tma-nums{color:var(--slot-grey); font-size:.85rem}
.tma-lesson{border-left:2px solid var(--gold-dim); padding-left:.6rem; color:#e3d6b5}
.tma-t{background:none; border:0; border-bottom:1px dotted var(--gold); padding:0; color:var(--gold); font:inherit; cursor:pointer}
.tma-table{width:100%; border-collapse:collapse; font-size:.85rem; margin:.3rem 0}
.tma-table th,.tma-table td{text-align:left; padding:.3rem .5rem; border-bottom:1px solid #2a2a2a}
.tma-table th{color:var(--slot-grey); font-weight:400; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em}
@media (max-width:560px){ .tma-keyform{grid-template-columns:minmax(0,1fr)} }
.tmm-rsec .tma-list li{display:list-item; border-left:0; padding:0; margin:.25rem 0}
.tmm-rsec .tma-list{list-style:disc; padding-left:1.2rem}
.tma-flagged{outline:1px dashed #e6b35a; outline-offset:3px; background:rgba(230,179,90,.07)}
.tmm-rsec .tma-list li.tma-flagged::after{content:" ⚠ does not match the data"; color:#e6b35a; font-size:.8rem}

/* ---------- team settings on the team page (the AI analysis key) ---------- */
.tm-set{padding:1.2rem 1rem}
#settings > div + div{border-top:1px solid var(--divider)}
#settings > div:empty{display:none}
.tm-set h3 + p{color:var(--text-2)}
.tm-set h3:not(:first-child){margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--divider)}
.tm-set .tm-empty{padding:.2rem 0 0}
.tm-set h3{margin:0 0 .4rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem}
.tm-set p{margin:0 0 .7rem; font-size:.92rem; max-width:52rem}
.tm-set__state b{color:var(--win)}
.tm-set__form{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.6rem; align-items:end; max-width:52rem}
.tm-set__form label{display:block; margin:0 0 .25rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slot-grey)}
.tm-set__form .tm-status{grid-column:1/-1; margin:0}
@media (max-width:560px){ .tm-set__form{grid-template-columns:minmax(0,1fr)} }
.tma-a{color:var(--gold)}

.tm-sl{color:var(--gold); text-decoration:none}
.tm-sl:hover{text-decoration:underline}

/* the draft at the top of a team match page */
.tmm-draft{max-width:68rem; margin:0 auto .8rem; padding:0 1rem; min-height:0}
.tmm-draft .tm-panel{padding:.7rem .9rem}
.tmm-draft h2{margin:0 0 .5rem; font-size:1rem}
.tmm-draft h2 small a{color:inherit}
.tmm-dbtns{margin-left:auto; display:inline-flex; gap:.4rem}
.tmm-drow{display:grid; grid-template-columns:minmax(7rem,11rem) minmax(0,auto) minmax(0,1fr); gap:.4rem 1rem; align-items:center; padding:.45rem 0 .45rem .7rem; border-left:3px solid var(--divider); margin:.3rem 0}
.tmm-drow.hk{border-left-color:var(--hk)} .tmm-drow.am{border-left-color:var(--am)}
.tmm-drow > b{font-family:var(--display); text-transform:uppercase; font-weight:600; line-height:1.15; overflow-wrap:anywhere}
.tmm-drow > b small{display:block; font-family:var(--body); font-weight:400; text-transform:none; font-size:.72rem; color:var(--slot-grey)}
.tmm-dgrp{display:flex; align-items:center; gap:.5rem; min-width:0}
.tmm-dgrp > small{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slot-grey); flex:none}
.tmm-dlist{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; min-width:0}
.tmm-dnone{font-style:normal; font-size:.8rem; color:var(--slot-grey)}
.tmm-dh{position:relative; display:inline-flex; flex-direction:column; align-items:center; width:3.1rem; flex:none}
.tmm-dh img{width:2.6rem; height:2.6rem; object-fit:cover; background:#222; border:1px solid var(--divider)}
.tmm-dh em{font-style:normal; font-size:.62rem; line-height:1.15; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2)}
.tmm-dh.noimg em{white-space:normal; font-size:.72rem; padding:.5rem .1rem; border:1px solid var(--divider); width:100%; text-align:center}
.tmm-dh.ban img{filter:grayscale(1) brightness(.6)}
.tmm-dh.ban::after{content:''; position:absolute; left:.25rem; right:.25rem; top:1.3rem; height:2px; background:var(--loss); transform:rotate(-38deg)}
.tmm-dh.ban.noimg::after{display:none} .tmm-dh.ban.noimg em{text-decoration:line-through}
.tmm-dh u{position:absolute; left:.1rem; top:-.2rem; min-width:1.05rem; height:1.05rem; padding:0 .2rem; display:grid; place-items:center; background:var(--gold); color:var(--on-gold); font-size:.66rem; font-weight:700; text-decoration:none; font-variant-numeric:tabular-nums}
.tmm-dx{position:absolute; right:-.1rem; top:-.3rem; width:1.2rem; height:1.2rem; display:grid; place-items:center; background:#2a2a2a; border:1px solid var(--divider); color:var(--white); cursor:pointer; font:700 .8rem/1 var(--body); padding:0; z-index:1}
.tmm-dx:hover{background:var(--loss)}
.tmm-dmv{display:flex; gap:2px; margin-top:.15rem}
.tmm-dmv button{width:1.45rem; height:1.35rem; display:grid; place-items:center; padding:0; background:#222; border:1px solid var(--divider); color:var(--white); cursor:pointer; font:700 .9rem/1 var(--body)}
.tmm-dmv button:disabled{opacity:.3; cursor:default}
.tmm-dadd.on{background:var(--gold); color:var(--on-gold)}
.tmm-dgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr)); gap:.3rem; margin:.3rem 0 .7rem; padding:.5rem; border:1px solid var(--divider); background:rgba(255,255,255,.03); max-height:17rem; overflow-y:auto}
.tmm-dgrid button{display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.3rem .2rem; background:#1c1c1c; border:1px solid var(--divider); color:var(--white); cursor:pointer; font:inherit; font-size:.7rem; line-height:1.15; min-width:0}
.tmm-dgrid button:hover,.tmm-dgrid button:focus-visible{border-color:var(--gold); background:#262626}
.tmm-dgrid img{width:2.3rem; height:2.3rem; object-fit:cover}
.tmm-dgrid span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tmm-dseq{display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--divider)}
.tmm-dseq > small{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slot-grey); margin-right:.3rem}
.tmm-ds{position:relative; display:inline-block; border-bottom:3px solid var(--am); line-height:0}
.tmm-ds.hk{border-bottom-color:var(--hk)}
.tmm-ds img{width:1.9rem; height:1.9rem; object-fit:cover; background:#222}
.tmm-ds.ban img{filter:grayscale(1) brightness(.55)}
.tmm-ds u{position:absolute; left:0; top:0; min-width:.9rem; padding:0 .15rem; background:rgba(0,0,0,.75); color:var(--white); font-size:.58rem; line-height:.9rem; text-decoration:none; text-align:center}
.tmm-dlink{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.tmm-dlink label{font-size:.85rem; color:var(--text-2)}
.tmm-dlink input{flex:1 1 14rem; min-width:0; max-width:22rem; height:2.4rem}
.tmm-dor{font-size:.85rem; color:var(--slot-grey)}
.tmm-dhelp{margin:.4rem 0; font-size:.8rem; color:var(--text-2)}
.tmm-dord{display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; margin-right:.6rem}
.tmm-dord input{width:1.05rem; height:1.05rem; accent-color:var(--gold)}
@media (max-width:700px){ .tmm-drow{grid-template-columns:1fr} }
/* dashboard: hero pairs in a lane */
.tmd-hpair{display:inline-flex; align-items:center; margin-right:.9rem; white-space:nowrap}

.tmm-draft .tm-panel{margin:0}

.tm-herox{display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--score-box); color:var(--text-2); font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.02em; cursor:default}
.tm a.tm-btn--ghost{color:var(--gold)}

/* the note under a study library video whose start point has not been aligned yet */
.tmm-vodest{margin:0; padding:.55rem .8rem; border-top:1px solid var(--divider); font-size:.85rem; color:var(--text-2); border-left:3px solid var(--gold)}

/* the hint under the two team names of a scouting match (Add a match) */
.tm-fhint{margin:-.2rem 0 0; font-size:.85rem; color:var(--slot-grey)}