/* Squares league styles; reuses site.css tokens and .acBtn / .acCompactTable / .leagueHeroBadge */
.sqJoinBlock { margin-bottom: 12px; text-align: left; }
.sqJoinBlock .k-numerictextbox, .sqJoinBlock #squaresJoinCount { width: 110px; }
/* squares joins: the username row spans the same width as the price/count rows */
/* both stay full row width (the modal body is a wrapping flex row); padding centers a 420px column */
.sqJoining .sqJoinBlock { padding: 0 calc(max(0px, (100% - 420px) / 2) + 12px); }
.sqJoining > .alert.onSubmitAlert { max-width: 420px; }
.sqJoining .form-group { margin-left: 0; margin-right: 0; padding: 0 max(0px, calc((100% - 420px) / 2)); }
.sqJoining #leagueUsername { max-width: none !important; flex: 1; }
.sqJoinRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }

.leagueHeroName { display: flex; align-items: center; gap: 12px; }
.leagueHeroLogo { height: 44px; width: auto; max-width: 96px; object-fit: contain; border-radius: 8px; flex: 0 0 auto; }

/* ===== Squares league page ===== */
body.squares #bodyContent > :not(#squaresPage) { display: none !important; }
#squaresPage { display: flex; flex-direction: column; gap: 8px; text-align: left; }
#squaresPage.hidden { display: none; }
#squaresPage { --sq-hit: #d97706; --sq-hit-bg: rgba(245,158,11,.14); --sq-ok: #16a34a; --sq-no: #ef4444; }
html.theme-dark #squaresPage { --sq-hit: #fcd34d; --sq-hit-bg: rgba(245,158,11,.18); --sq-ok: #4ade80; --sq-no: #f87171; }
.sqHero { display: block; margin: 0; }
.leagueHeroBadge.sqLive { color: #b45309; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.10); }
html.theme-dark .leagueHeroBadge.sqLive { color: #fcd34d; }
.sqLogo { height: 32px; width: 32px; object-fit: contain; flex: 0 0 auto; }
.sqMatch { font-size: 14px; font-weight: 500; color: var(--ac-muted); margin-top: 4px; }
.sqMatch em { font-style: normal; color: var(--ac-muted); font-weight: 400; font-size: 14px; }
.sqScore { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; color: var(--ac-ink); margin-top: 8px; font-variant-numeric: tabular-nums; }
.sqScore .sqLogo { height: 32px; width: 32px; }
.sqScore i { font-style: normal; color: var(--ac-muted); font-weight: 400; }
.sqProg { display: flex; gap: 4px; margin-top: 12px; }
.sqProg i { flex: 1; height: 8px; border-radius: 4px; background: var(--ac-table-head-bg); overflow: hidden; display: block; }
.sqProg i b { display: block; height: 100%; background: var(--ac-gradient-primary); }
.sqProgLbl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 11px; font-weight: 600; color: var(--ac-muted); margin-top: 4px; }
.sqNote { font-size: 12px; color: var(--ac-muted); margin-top: 8px; }
.sqMain { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.sqBoardCard { padding: 8px; height: auto; flex: 0 0 auto; width: max(600px, calc(50% - 4px)); max-width: 100%; }
.sqBoardCard.sqB10 { width: max(810px, calc(50% - 4px)); }
.sqSide2 { flex: 1 1 380px; min-width: 380px; max-width: 100%; }
.sqSide2 > .leagueCard { height: auto; }
.sqCardHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sqBoardWrap { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 6px; }
.sqTop { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-muted); }
.sqSide { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: center; }
.sqSide > span { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-muted); white-space: nowrap; }
.sqTop .sqLogo, .sqSide .sqLogo { height: 34px; width: 34px; }
.sqSide .sqLogo { transform: rotate(90deg); }
.sqGrid { grid-column: 2; grid-row: 2; display: grid; gap: 3px; }
.sqGrid > * { aspect-ratio: 1 / 1; min-width: 0; }
.sqAx { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ac-muted); background: var(--ac-table-head-bg); border-radius: 6px; font-variant-numeric: tabular-nums; position: relative; }
.sqPair { font-size: clamp(14px, 2.4vw, 20px); font-weight: 700; color: var(--ac-ink); }
.sqPair span { position: absolute; line-height: 1; transform: translate(-50%, -50%); }
.sqCol { background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--ac-muted) 50%, transparent calc(50% + 1px)); }
.sqCol .a { left: 30%; top: 70%; } .sqCol .z { left: 70%; top: 30%; }
.sqRow { background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ac-muted) 50%, transparent calc(50% + 1px)); }
.sqRow .a { left: 30%; top: 30%; } .sqRow .z { left: 70%; top: 70%; }
.sqCell { border: 1px solid var(--ac-border); border-radius: 6px; background: var(--ac-soft-bg); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; font-size: 13px; color: var(--ac-ink); overflow: hidden; }
.sqCell.sqEmpty { background: transparent; border-style: dashed; }
.sqCell.sqMe { background: var(--ac-chip-bg); color: var(--ac-chip-text); border-color: var(--ac-chip-border); font-weight: 700; }
.sqCell.sqCur { outline: 3px solid var(--sq-hit); outline-offset: -2px; background: var(--sq-hit-bg); }
.sqG10 .sqCell { overflow: visible; font-size: 11px; position: relative; }
.sqG10 .sqCell > span { transform: rotate(-45deg); white-space: nowrap; }
.sqG10 .sqCell.sqCur { z-index: 1; }
.sqTabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.sqTabBtn { font-size: 14px; padding: .25rem .5rem; line-height: 1.5; border-radius: 8px; border: 1px solid var(--ac-border); background: var(--ac-surface); color: var(--ac-ink); }
.sqTabBtn.on { background: var(--ac-chip-bg); color: var(--ac-chip-text); border-color: var(--ac-chip-border); }
.sqSide2 .acCompactTable .r { text-align: right; }
.sqSide2 .acCompactTable tr.sqQ td { background: var(--ac-chip-bg); color: var(--ac-chip-text); font-weight: 600; }
.sqEmptyMsg { color: var(--ac-muted); font-size: 13px; padding: 8px; }
.sqJoinCtl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sqTotal { font-weight: 700; }
@media (max-width: 767px) {
    .sqSide2 { min-width: 0; flex-basis: 100%; }
    .sqBoardCard { padding: 12px; }
    .sqScore { font-size: 28px; }
    .sqTop, .sqSide > span { font-size: 11px; letter-spacing: .06em; }
    .sqCell { font-size: 10px; }
    .sqG10 .sqCell { font-size: 8px; }
}

/* ManageLeague (squares) */
#manageLeaguePage #squaresTypeLabel { display: none !important; }
.smCardHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.smRow { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.smRow .mlField { min-width: 0; flex: 1 1 120px; }
.smEditRow input { min-width: 56px; }
.smConfirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.smCard .acCompactTable .r { text-align: right; }

/* join modal: grow with content (site.css fixes .modal-content at 300x300) */
#joinLeagueModal .modal-content { height: auto; min-height: 300px; }
#joinLeagueModal .modal-body { flex-wrap: wrap; }

/* roster: header and cells share one alignment */
.sqSide2 .acCompactTable th.r, .sqSide2 .acCompactTable td.r { text-align: right !important; }
.sqSide2 .acCompactTable th:first-child, .sqSide2 .acCompactTable td:first-child { text-align: left !important; }

/* My squares request: label + average-width number box, Update on the left */
.sqJoinCtl { flex-direction: column; align-items: flex-start; }
.sqReqRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sqJoinCtl .k-numerictextbox, .sqJoinCtl #sqMyCount { width: 110px; }

/* hero uses the shared league hero card; tiles sit on the right like contest/survival */
.sqHero { flex-wrap: wrap; align-items: flex-end; }
.sqHeroTiles { display: flex; flex-wrap: wrap; gap: 8px; }
.sqHeroTiles .leagueHeroTile { border-radius: 10px; min-width: 104px; }
.sqProgWrap { flex: 1 1 100%; }
.sqProg i { height: 6px; }

/* ManageLeague settings tab for squares: hide contest/survival-only fields */
body.squares #manageLeaguePage #costPerWeekSection, body.squares #manageLeaguePage #totalCostSection,
body.squares #manageLeaguePage #playoffsRow, body.squares #manageLeaguePage #leagueTypeField,
body.squares #manageLeaguePage #leagueSportField, body.squares #manageLeaguePage #defaultRanks,
body.squares #manageLeaguePage #weeklyWinnersTab, body.squares #manageLeaguePage #seasonWinnersTab { display: none !important; }
/* before the league type loads (no body class yet), hide the same pieces so a squares league doesn't flash the contest layout */
body:not(.squares):not(.contest):not(.survival) #manageLeaguePage :is(#costPerWeekSection, #totalCostSection, #playoffsRow, #leagueTypeField, #leagueSportField, #defaultRanks, #weeklyWinnersTab, #seasonWinnersTab) { display: none !important; }

/* settings tab: let the treasurer list open past the card edge instead of being clipped */
#manageLeaguePage #leagueSettings, #manageLeaguePage .mlPanelWrap, #manageLeaguePage .mlGrid,
#manageLeaguePage #tabStrip, #manageLeaguePage #tabStrip > div[id^="tabStrip-"] { overflow: visible !important; }
#manageLeaguePage #treasurerDropdown { position: relative; z-index: 5; }
#manageLeaguePage #leagueSettings { padding-bottom: 24px; }


#manageLeaguePage .smGridWrap { height: auto !important; min-height: 0 !important; max-height: none !important; }
#smRosterGrid .k-grid-content td { vertical-align: middle; }
.smConfirm.hidden { display: none; }
.smTeamLbl { display: flex; align-items: center; gap: 8px; }
.smTeamLbl .sqLogo { height: 24px; width: 24px; }
.sqSettingsRule { margin: 4px 0 16px; border: 0; border-top: 1px solid var(--ac-border); opacity: 1; }
#squaresCreateSection.sqLocked { opacity: .55; pointer-events: none; }
#squaresCreateSection.sqLocked select, #squaresCreateSection.sqLocked input, #squaresCreateSection.sqLocked .mlSegmented { background: var(--ac-soft-bg); cursor: not-allowed; }

/* Scale the desktop board in place; keep controls and mobile boards at normal size. */
.sqBoardCard .sqSizeToggle { display: none !important; }
@media (min-width: 992px) {
    .sqBoardCard .sqSizeToggle { display: inline-block !important; }
    .sqBoardCard:not(.sqBoardExpanded) { width: max(309px, calc(25% + 7px)); }
    .sqBoardCard.sqB10:not(.sqBoardExpanded) { width: max(414px, calc(25% + 7px)); }
    .sqBoardCard:not(.sqBoardExpanded) .sqBoardViewport { zoom: .5; width: 100%; }
}
@media (min-width: 992px) {
    /* head gap is 8px, so -3px leaves 5px after the label */
    .sqBoardCard .sqSizeToggle { margin: 0 0 0 -3px; }
    .sqBoardCard .sqCardHead .leagueCardSub { margin-left: auto; }
}
/* Align Squares summary tiles with the first badge row on desktop. */
@media (min-width: 992px) {
    .sqHero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .sqHero .leagueHeroLeft { min-width: 0; }
    .sqHero .sqHeroTiles { align-self: start; }
    .sqHero .sqProgWrap { grid-column: 1 / -1; }
}
/* Quarter progress sits below the summary tiles, beside the matchup. */
.sqHeroSummary { display: flex; flex-direction: column; gap: 8px; }
.sqHeroSummary .sqProg { margin-top: 0; }
@media (min-width: 992px) {
    .sqHero .sqHeroSummary { align-self: stretch; justify-content: space-between; }
    .sqHeroSummary .sqProgWrap { flex: 0 0 auto; }
}
.sqHeroSummary .sqProg i { height: 10px; }

/* Animate board resizing in place; zoom itself is not interpolated by browsers. */
@media (min-width: 992px) {
    .sqBoardCard { transition: width 500ms ease-in-out; }
    .sqBoardCard .sqSizeToggle i { transition: transform 500ms ease-in-out; }
    .sqBoardCard.sqBoardExpanded .sqSizeToggle i { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sqBoardCard, .sqBoardCard .sqSizeToggle i { transition: none; }
}