/* Additions for the shareable app: sign-in, menu sheet, cut bar, reel card, progress view. Same dark film-room look as before. */
.toprow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gform{display:grid;gap:10px;margin:22px 0 8px;max-width:420px}
.gform label{font:600 14px var(--f-body);color:var(--dim)}
.gform input,.invrow input,.invrow select{height:48px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--chalk);font:16px var(--f-body);padding:0 12px;min-width:0}
.sendbtn.big{height:48px;font-size:16px}
.linkbtn{color:var(--dim);text-decoration:underline;justify-self:start;padding:6px 0}
.gmsg{color:var(--clock);min-height:1.4em;max-width:420px}
.sheet{position:fixed;inset:auto 0 0;z-index:35;background:var(--panel);border-radius:14px 14px 0 0;padding-top:16px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-shadow:0 -10px 40px #000a;display:grid;gap:10px;max-height:85vh;overflow:auto}
.sheet h4{margin:0;font:800 24px var(--f-display);text-transform:uppercase}
.sheet h5{margin:10px 0 0;font:600 15px var(--f-body);color:var(--shoe)}
.sheet p{margin:0;color:var(--dim);font-size:14px}
.sheet .small{font-size:13px}
.sheet .row{display:flex;gap:10px}
.sheet .row button{flex:1;height:44px;border-radius:10px;background:var(--line);font-weight:600}
.sheet .row button.go{background:var(--shoe);color:#0d1214}
.invrow{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.invrow{grid-template-columns:2fr 1fr 1.4fr auto}}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.plist li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:6px 0}
.plist li span{color:var(--dim);font:500 12px var(--f-mono)}
.plist button{color:var(--clock);font-size:13px}
.cutbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.cutbar #cutInfo{flex:1;min-width:120px}
.reel-card{display:flex;gap:12px;align-items:center;border:1px solid var(--shoe);border-radius:12px;padding:12px;margin:14px 0 4px;background:var(--panel)}
.reel-card b{display:block;font:800 22px var(--f-display);text-transform:uppercase}
.reel-card span{color:var(--dim);font-size:13px}
.reel-card .grow{flex:1;min-width:0}
.prog{margin:18px 0}
.prog table{width:100%;border-collapse:collapse;font-size:13px}
.prog th,.prog td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:right}
.prog th:first-child,.prog td:first-child{text-align:left}
.prog th{font:600 11px var(--f-mono);color:var(--dim);text-transform:uppercase;vertical-align:bottom}
.prog td.z{color:#55605d}
.prog .tablewrap{overflow-x:auto}
.workon h3{margin:20px 0 6px;font:600 17px var(--f-body);color:var(--clock)}
.workon .item{display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);padding:8px 0}
.workon .item img{width:84px;border-radius:6px;flex:none}
.workon .item p{margin:0;font-size:14px}
.workon .item small{color:var(--dim);font:500 12px var(--f-mono)}
body.role-recruiter .tagger,body.role-recruiter .fam,body.role-coach .fam{display:none!important}
.toprow .brand{min-width:0;flex:1}
.toprow .iconbtn{flex:none}
.toast{pointer-events:none}
.ptop{gap:6px}
.ptop .iconbtn{min-width:36px}
@media (max-width:380px){#prev,#next{display:none}}

body.role-fan .tagonly,body.role-fan .fam,body.role-fan .notfan,body.role-coach .fam{display:none!important}
#take select#takeGrade{height:44px;padding:0 10px}
.tile .gr{position:absolute;right:5px;bottom:20px;font-size:13px;text-shadow:0 0 4px #000}