/* SC Sixers+ shell: what the live app needs beyond the design's bundle.css and sixers-plus.css
   (self-hosted fonts, safe areas, sign in). Design copies are kept unedited so they can be refreshed. */

@font-face{font-family:"Sixers Condensed";src:url("/plus/fonts/sixers-condensed-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Sixers Condensed";src:url("/plus/fonts/sixers-condensed-800-italic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Sixers Condensed";src:url("/plus/fonts/sixers-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

html{background:var(--page)}
body{margin:0;background:var(--page)}

/* Safe areas (the design system's .sx-root rule, applied to the app frame) */
.app{padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.app-content{padding-top:env(safe-area-inset-top,0px)}

/* Reduced motion: nothing animates */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.boot{padding:var(--space-40) var(--space-20);margin:0}

/* Header links that aren't anchors in the design (same look) */
.brand:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-8)}

/* ---------- Sign in (no board in the design: same layout as Line Up's sign in) ---------- */
.signin-head{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-24) 0 0}
.signin-head img{width:var(--logo-header);height:var(--logo-header);display:block}
.signin{max-width:380px;margin:6vh auto 0}
.signin h1{margin:0 0 6px}
.signin p{margin:0 0 var(--space-16)}
.signin .btn{width:100%;margin-top:var(--space-20)}
.signin .err{margin:var(--space-12) 0 0;min-height:1.45em}
.signin label.f{margin-top:var(--space-14);margin-bottom:var(--space-4)}

/* ---------- Placeholder cards for tabs built in later versions ---------- */
.coming{max-width:760px}
.coming h2{margin-top:0}
.coming .pill{margin-bottom:var(--space-10)}
.version{margin-top:var(--space-24)}

/* ---------- Toast (saves and errors) ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:50;max-width:min(560px,calc(100vw - 32px));padding:10px 16px;border-radius:var(--radius-10);background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--shadow-toast);font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err-toast{background:var(--bad-bg);color:var(--bad-ink)}

/* Player photo in the round avatar (initials otherwise) */
.ob-avatar{overflow:hidden}
.ob-avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Sync panel (v0.3; no board: same style as How to sync) ---------- */
.sync-panel{max-width:860px}
.sync-panel h4{margin:14px 0 4px;font-size:15px}
.sync-steps{margin:8px 0 0;padding-left:22px}
.sync-steps > li{margin:0 0 14px}
.sync-prompt{max-height:320px;overflow:auto;white-space:pre-wrap;background:var(--field);border-radius:var(--radius-10);padding:12px;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;margin:8px 0 0}
.sync-import{min-height:120px;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.sync-summary{border-top:1px solid var(--rule);padding-top:10px}
.sync-done{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.sync-list{margin:0;padding-left:20px}
.sync-list li{margin:0 0 4px}
.sync-choice{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap;padding:var(--space-10) 0;border-top:1px solid var(--rule);margin-top:var(--space-10)}
.sync-choice > div:first-child{flex:1 1 280px;min-width:0}
.sync-choice .small{display:block}

/* ---------- Season planner: narrower, equal columns (MC, 11 Nov) ---------- */
.plan .plan-col,.plan .plan-cell,.plan .plan-foot{width:102px;min-width:102px;max-width:102px}
table.plan tfoot td.plan-foot{padding-left:2px;padding-right:2px}
.plan-foot .pill{padding-left:6px;padding-right:6px}
.plan-head .pill{text-wrap:balance}
.plan-head{min-width:0}
.plan-head .plan-field{line-height:1.25}
.plan-head .plan-field .fl{display:block;white-space:nowrap;color:var(--muted);font-size:12.5px}
.plan-head .pill,.plan-foot .pill{white-space:normal;text-wrap:pretty;line-height:1.25;padding-top:3px;padding-bottom:3px;max-width:100%;border-radius:var(--radius-10)}
.plan-foot > span{max-width:100%;text-wrap:balance}
.ft-reason,.ft-nudge{max-width:100%}
.plan thead th.plan-col{padding-left:2px;padding-right:2px}
/* Pack the game columns next to the names: the table is only as wide as its columns,
   so with few games left the spare space falls to the right, not between names and games. */
table.plan{min-width:0;width:auto}
/* Planner warnings use the full width of their box, so each fits on one line on desktop */
.planner-warn p{max-width:none}
/* Running text avoids a word or two alone on the last line (design system: text-wrap: pretty) */
p{text-wrap:pretty}
.leaders-note{max-width:none}
/* Fill-in shirt sleeve: two options in the joined group */
.fill-edit .ph-joined{grid-template-columns:repeat(2,1fr)}

/* Upload buttons: a label around the file input, so every browser opens the picker itself */
.file-pick{position:relative;overflow:hidden;cursor:pointer}
.file-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.file-pick:focus-within{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- Images (v0.6): preview in the side panel ---------- */
.img-preview{display:block;width:100%;height:auto;border-radius:var(--radius-10);box-shadow:0 0 0 1px var(--rule)}
.img-wait{aspect-ratio:4/5;display:grid;place-items:center;background:var(--field);border-radius:var(--radius-10)}

/* ---------- Recaps (v0.7) ---------- */
.cd-preview.has-img{padding:0;background:none;border:0;overflow:hidden}
.cd-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px var(--rule)}
.recap-main .btn.chosen{background:var(--ink);color:var(--paper)}
.cc-li[draggable="true"] .cc{cursor:grab}

/* ---------- Phone (v0.8) ---------- */
.ph-tabs.three{grid-template-columns:repeat(3,1fr)}
.ph-tabs{padding-bottom:env(safe-area-inset-bottom,0px)}
.ph .toast{bottom:calc(68px + env(safe-area-inset-bottom,0px))}

/* Money > Season so far: each game links to its game page */
.game-link{display:block;color:var(--ink);text-decoration:none;border-radius:var(--radius-8)}
.game-link:hover{text-decoration:underline;text-underline-offset:3px}
.game-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Phone: the tab bar is always at the bottom of the screen, never mid-screen and never scrolled out of view
   (both apps; on iPad and desktop the player app puts its tabs across the top instead). */
@media (max-width:699px){
  .ph .ph-tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;box-shadow:0 -1px 0 var(--rule)}
  .ph .ph-main{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  /* SC Sixers+ on a phone: tabs lifted 14px clear of the iPhone's bottom gesture strip, where taps went missing
     (the player app does the same in the browser, in player.css) */
  .ph:not(.ob) .ph-tabs{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  .ph:not(.ob) .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  /* The bar never scrolls, so a finger that drifts while tapping is still a tap, not a scroll. */
  .ph .ph-tabs{touch-action:none}
}
/* Tab bar taps: no double-tap zoom wait, no grey flash, no text selection or link preview on a long press,
   and the icon never takes the tap away from its link. */
.ph-tabs a{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ph-tabs a:active{background:var(--rule)}
.ph-tab-ico{pointer-events:none}