/* 賽務端版面｜規格：docs/04 §5.1、docs/08 §3.3
   頂部固定資訊列、中間可捲、底部固定主要動作（安全區內）。 */

/* ── 共用頁首 ───────────────────────────────────────── */
.staff__head,.live__head{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--brand-900);color:#fff;
}
.staff__who,.live__title{flex:1;display:flex;flex-direction:column;min-width:0}
.staff__who strong,.live__title strong{font-size:var(--fs-md);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff__date,.live__meta{font-size:var(--fs-xs);opacity:.78}
.live__back{min-width:44px;min-height:44px;color:#fff;font-size:var(--fs-lg)}

/* ── 賽務首頁 ───────────────────────────────────────── */
.cur{display:flex;flex-direction:column;gap:var(--sp-2)}
.cur__meta{font-size:var(--fs-sm);color:var(--ink-500)}
.cur__teams{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-lg);font-weight:700}
.cur__team{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur__team:last-of-type{text-align:right}
.cur__vs{color:var(--ink-500);font-weight:400}
.cur__status{font-size:var(--fs-sm);color:var(--ink-700)}

.mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mlist__item{border-top:1px solid var(--ink-100)}
.mlist__item:first-child{border-top:0}
.mlist__item.is-done{opacity:.6}
.mlist__btn{display:grid;grid-template-columns:auto auto 1fr auto;gap:var(--sp-2) var(--sp-3);
  align-items:center;width:100%;min-height:56px;padding:var(--sp-2) 0;text-align:left}
.mlist__time{color:var(--ink-700);font-size:var(--fs-sm)}
.mlist__label{font-weight:700;font-size:var(--fs-sm)}
.mlist__teams{grid-column:3;font-size:var(--fs-xs);color:var(--ink-500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlist__status{grid-row:1;grid-column:4;font-size:var(--fs-xs);color:var(--ink-500)}

.toolbar{display:flex;gap:var(--sp-3);margin:var(--sp-3);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom))}

/* ── LIVE 賽務台 ────────────────────────────────────── */
.live{display:flex;flex-direction:column;min-height:100%}
.live__loading{padding:var(--sp-5);color:var(--ink-500)}

.sb{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-3);background:var(--surface)}
.sb__side{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:0}
.sb__team{font-size:var(--fs-sm);font-weight:700;text-align:center;line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb__num-wrap{display:flex;align-items:center;gap:var(--sp-2)}
.sb__num{font-size:var(--fs-score);font-weight:700;line-height:1;min-width:1.2em;text-align:center}
.sb__step{min-width:44px;min-height:44px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--ink-700);font-size:var(--fs-lg);font-weight:700}
.sb__dash{font-size:var(--fs-xl);color:var(--ink-300)}

.clockbox{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);background:var(--surface);border-bottom:1px solid var(--ink-100)}
.clockbox__period{font-size:var(--fs-sm);color:var(--ink-500);font-weight:700}
.clockbox__time{font-size:var(--fs-2xl);font-weight:700;line-height:1}
.clockbox__minute{font-size:var(--fs-sm);color:var(--ink-500)}
.clockbox__minute.is-added{color:var(--accent-600);font-weight:700}
.clockbox__btns{display:flex;gap:var(--sp-3);width:100%;margin-top:var(--sp-2)}

.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);padding:var(--sp-3)}
.bigbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:72px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1)}
.bigbtn:active{transform:scale(.98)}
.bigbtn__icon{font-size:var(--fs-xl);line-height:1}
.bigbtn__label{font-size:var(--fs-sm);font-weight:700}

.tl{flex:1;padding:0 var(--sp-3) var(--sp-4)}
.tl__head{margin:var(--sp-2) 0;font-size:var(--fs-sm);color:var(--ink-500)}
.tl__empty{color:var(--ink-500);font-size:var(--fs-sm);padding:var(--sp-4);text-align:center}
.tl__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl__item{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:var(--sp-2);
  align-items:center;min-height:48px;padding:var(--sp-2) 0;border-bottom:1px solid var(--ink-100)}
.tl__item.is-voided{opacity:.45;text-decoration:line-through}
.tl__min{font-size:var(--fs-sm);color:var(--ink-500);min-width:3.5em}
.tl__icon{font-size:var(--fs-md)}
.tl__text{font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl__team{font-size:var(--fs-xs);color:var(--ink-500)}
.tl__more{min-width:44px;min-height:44px;color:var(--ink-500)}

.finishbar{position:sticky;bottom:0;padding:var(--sp-3);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:var(--surface-2);border-top:1px solid var(--ink-100)}
.finishbar__done{margin:0;text-align:center;color:var(--finished);font-weight:700}

.finish{display:flex;flex-direction:column;gap:var(--sp-2)}
.finish__score{margin:0;font-size:var(--fs-lg);font-weight:700;text-align:center}
.finish__ht,.finish__count{margin:0;font-size:var(--fs-sm);color:var(--ink-500);text-align:center}
.finish__check{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);padding:var(--sp-2);border-radius:var(--r-sm)}
.finish__check.is-ok{background:var(--brand-100);color:var(--brand-900)}
.finish__check.is-warn{background:#FDF3E0;color:#7A4E06}

/* ── 出場名單 ───────────────────────────────────────── */
.tabs{display:flex;gap:var(--sp-2);padding:var(--sp-3)}
.tabs__btn{flex:1;min-height:44px;border-radius:var(--r-md);background:var(--surface-3);font-weight:700}
.tabs__btn.is-active{background:var(--brand-500);color:#fff}

.roster{list-style:none;margin:0;padding:0 var(--sp-3) var(--sp-6)}
.roster__row{display:grid;grid-template-columns:3.2em 1fr auto auto;gap:var(--sp-2);
  align-items:center;min-height:56px;border-bottom:1px solid var(--ink-100)}
.roster__row.is-start{background:var(--brand-100)}
.roster__no{color:var(--ink-500);font-size:var(--fs-sm)}
.roster__name{font-weight:700;font-size:var(--fs-sm);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster__pos{font-size:var(--fs-xs);color:var(--ink-500)}
.roster__role{font-size:var(--fs-xs);color:var(--ink-500)}
.roster__btns{display:flex;gap:4px}
@media (prefers-color-scheme:dark){
  .roster__row.is-start{background:rgba(27,122,86,.18)}
  .finish__check.is-warn{background:#3A2E14;color:#F0D9A6}
}

/* ── 登入 ───────────────────────────────────────────── */
.login{padding:var(--sp-6) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.login__title{margin:0;font-size:var(--fs-xl)}
.login__note{margin:0;color:var(--ink-700);font-size:var(--fs-sm);max-width:40ch}

/* ── 桌機加寬（賽務仍以手機為主，桌機只是不要太醜）──── */
@media (min-width:840px){
  .live,.staff,.sheetpage{max-width:720px;margin:0 auto}
}