/* TJK-Chess v15.1.244 — responsive audit / board geometry / navigation */

/* Primary desktop header: natural-width navigation, no stretched gaps and a
   guaranteed buffer before Search. Long translated labels shrink before they collide. */
@media (min-width:901px){
  .site-header,.opp-site-header{
    grid-template-columns:max-content minmax(0,1fr) max-content!important;
    column-gap:clamp(12px,1.2vw,24px)!important;
    padding-inline:clamp(16px,2.5vw,46px)!important;
  }
  .site-header .site-nav,.opp-site-header .site-nav{
    display:flex!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:clamp(2px,.42vw,9px)!important;margin-left:clamp(16px,1.7vw,30px)!important;
    min-width:0!important;width:auto!important;max-width:100%!important;overflow:visible!important;
    padding-right:10px!important;
  }
  .site-header .site-nav>*,.opp-site-header .site-nav>*{width:auto!important;flex:0 1 auto!important;min-width:0!important}
  .site-header .site-nav>button,.site-header .site-nav>.site-nav-link,.site-header .site-nav>.site-nav-top-link,
  .site-header .site-nav>.site-nav-item>button,.site-header .site-nav>.site-nav-item>.site-nav-top-link,
  .opp-site-header .site-nav>button,.opp-site-header .site-nav>.site-nav-link,.opp-site-header .site-nav>.site-nav-top-link,
  .opp-site-header .site-nav>.site-nav-item>button,.opp-site-header .site-nav>.site-nav-item>.site-nav-top-link{
    padding-inline:clamp(6px,.55vw,11px)!important;font-size:clamp(.78rem,.75vw,.94rem)!important;
    min-width:0!important;white-space:nowrap!important;
  }
  .site-header .site-actions,.opp-site-header .site-actions{gap:clamp(7px,.7vw,13px)!important;min-width:max-content!important}
  .site-header .course-search,.opp-site-header .course-search{margin-left:2px!important}
}
@media (min-width:901px) and (max-width:1360px){
  .site-header,.opp-site-header{padding-inline:12px!important;column-gap:7px!important}
  .site-header .site-nav,.opp-site-header .site-nav{margin-left:8px!important;gap:0!important;padding-right:7px!important}
  .site-header .site-nav>button,.site-header .site-nav>.site-nav-link,.site-header .site-nav>.site-nav-top-link,
  .site-header .site-nav>.site-nav-item>button,.site-header .site-nav>.site-nav-item>.site-nav-top-link,
  .opp-site-header .site-nav>button,.opp-site-header .site-nav>.site-nav-link,.opp-site-header .site-nav>.site-nav-top-link,
  .opp-site-header .site-nav>.site-nav-item>button,.opp-site-header .site-nav>.site-nav-item>.site-nav-top-link{
    padding-inline:5px!important;font-size:.75rem!important
  }
  .site-header .site-language,.opp-site-header .site-language{width:112px!important}
  .site-header .site-actions,.opp-site-header .site-actions{gap:6px!important}
}

/* Mobile/tablet header: the existing hamburger was wired in JS but had no
   CSS behaviour. Make it a real menu so navigation, language, theme, account,
   search and sound remain accessible instead of disappearing below 900 px. */
.site-menu-toggle{display:none}
@media (max-width:900px){
  .site-header{grid-template-columns:minmax(0,1fr) auto!important;padding-inline:10px!important;align-items:center!important}
  .site-menu-toggle{display:grid!important;place-items:center;width:40px;height:40px;border:1px solid #ccd6e4;border-radius:8px;background:#fff;color:#172842;font:800 20px/1 inherit;cursor:pointer}
  .site-header>.site-nav,.site-header>.site-actions{display:none!important}
  .site-header.is-menu-open>.site-nav{grid-column:1/-1!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:0!important;margin:0!important;padding:6px 0 8px!important;overflow:visible!important;border-top:1px solid #e2e8f0}
  .site-header.is-menu-open>.site-nav>.site-nav-item,.site-header.is-menu-open>.site-nav>.site-nav-link,.site-header.is-menu-open>.site-nav>button{
    flex:0 0 auto!important;width:100%!important;min-width:0!important
  }
  .site-header.is-menu-open>.site-nav>.site-nav-item>button,.site-header.is-menu-open>.site-nav>.site-nav-link,.site-header.is-menu-open>.site-nav>button{
    width:100%!important;height:42px!important;justify-content:flex-start!important;padding-inline:12px!important;font-size:.88rem!important
  }
  .site-header.is-menu-open>.site-actions{grid-column:1/-1!important;display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;
    padding:8px 0 10px!important;border-top:1px solid #e2e8f0!important;font-size:1rem!important}
  .site-header.is-menu-open .site-language{width:min(150px,42vw)!important;min-width:110px!important}
  .site-header.is-menu-open .site-profile-button{margin-left:auto!important}
  .site-header.is-menu-open .site-profile-copy{display:none!important}
  .site-header.is-menu-open .site-nav-dropdown{position:static!important;width:100%!important;max-width:none!important;box-shadow:none!important;border-radius:0!important}
  html[data-theme="dark"] .site-menu-toggle{background:#162131;color:#edf3fb;border-color:#435268}
  html[data-theme="dark"] .site-header.is-menu-open>.site-nav,html[data-theme="dark"] .site-header.is-menu-open>.site-actions{border-color:#344257!important}
}

/* Repertoire/Study command bar: never crop the last buttons. */
.workspace-topbar{min-width:0!important;gap:clamp(12px,1.5vw,26px)!important}
.workspace-commandbar{min-width:0!important;gap:10px!important;flex-wrap:wrap!important;align-content:center!important}
.workspace-command-group{min-width:0!important;gap:6px!important;flex-wrap:wrap!important}
.workspace-commandbar button{min-height:36px!important;padding:6px 10px!important;font-size:clamp(.80rem,.78vw,.96rem)!important}
@media (max-width:1500px) and (min-width:901px){
  .workspace-heading h1{font-size:clamp(2rem,3vw,3rem)!important}
  .workspace-commandbar{row-gap:7px!important}
  .workspace-command-training{flex-basis:100%!important;justify-content:flex-end!important;margin-left:0!important}
}
@media (max-width:900px){
  .workspace-topbar{padding-inline:10px!important}
  .workspace-commandbar{width:100%!important;display:block!important;overflow:hidden!important}
  .workspace-command-primary,.workspace-command-training{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:4px!important;scrollbar-width:thin}
  .workspace-command-training{margin-top:6px!important;justify-content:flex-start!important}
  .workspace-commandbar button{flex:0 0 auto!important}
}

/* Chess boards are square objects, not cards. Remove rounded board corners
   consistently across Analysis, Study, Tactics, Play, Broadcasts, Training,
   Knowledge and video tools. */
.analysis-board-stage,.analysis-chessboard,.study-board-wrap,.study-board,.puzzle-board-wrap,.puzzle-board-frame,.puzzle-board,
.position-board,.position-play-board-wrap,.position-play-board,.broadcast-board-wrap,.broadcast-board,
.computer-board-card,.computer-board-wrap,.computer-board,.training-position-board,.plan-position-preview,
.training-analysis-board-stage,.training-analysis-board,.knowledge-board-wrap,.knowledge-board,.knowledge-lab-board-wrap,
.course-studio-board-wrap,.course-studio-board,.course-editor-preview-board-wrap,.course-editor-preview-board,
.course-checkpoint-board,.game-review-board-wrap,.game-review-board.analysis-chessboard,.public-lab-board,
.tjk-video-board-wrap,.tjk-video-board-frame,.tjk-video-board{
  border-radius:0!important;
}

/* Mobile board-first layout: preserve every pixel for the board, remove card
   chrome around it and let the board use the full available track. */
@media (max-width:760px){
  .computer-board-card,.puzzle-board-card,.endgame-study-board-card,.position-play-board-card,
  .training-personal-board-column,.training-standard-board-column{padding:0!important;border-radius:0!important;box-shadow:none!important}
  .analysis-board-stage,.analysis-chessboard,.study-board-shell,.study-board-wrap,.puzzle-board-wrap,.puzzle-board,
  .position-play-board-wrap,.position-play-board,.broadcast-board-wrap,.broadcast-board,
  .computer-board-wrap,.computer-board,.training-position-board,.plan-position-preview,
  .training-analysis-board-stage,.training-analysis-board,.knowledge-board-wrap,.knowledge-board,
  .course-studio-board-wrap,.course-editor-preview-board-wrap,.game-review-board-wrap,.game-review-board.analysis-chessboard{
    width:100%!important;max-width:none!important;min-width:0!important;box-shadow:none!important
  }
  .analysis-layout,.puzzle-layout,.computer-layout,.computer-game-layout,.position-play-layout,.broadcast-board-analysis{gap:8px!important}
  .analysis-board-column,.puzzle-board-column,.study-board-column{padding-inline:0!important;min-width:0!important}

  /* Toolbars must scroll/wrap rather than pushing the page wider than the phone. */
  .analysis-board-controls,.study-toolbar,.study-navigation,.puzzle-actions,.broadcast-game-controls,
  .knowledge-review-board-nav,.training-board-actions{max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin}
  .analysis-board-controls button,.study-toolbar button,.puzzle-actions button,.broadcast-game-controls button{flex:0 0 auto!important}

  /* Denser cards/tables on phones. */
  .analysis-db-row{min-height:36px!important;padding:4px 6px!important}
  .analysis-db-game-row{min-height:40px!important;padding:4px 6px!important}
  .analysis-database-card{border-radius:0!important}
  .puzzle-actions{margin-top:5px!important;gap:5px!important}
  .puzzle-actions button{min-height:33px!important;padding:5px 8px!important}
}

/* Avoid hard desktop minimums surviving into stacked layouts. */
@media (max-width:940px){
  .study-notation{min-width:0!important;width:100%!important}
  .game-review-overlay.is-page .game-review-board.analysis-chessboard{min-width:0!important}
}

/* Small-screen cards should never cause horizontal page scrolling. */
@media (max-width:620px){
  .standalone-view,.tools-workspace,.training-hub-workspace,.broadcast-shell,.puzzle-app,.study-editor-host{max-width:100vw!important;overflow-x:hidden!important}
  .workspace-heading h1{font-size:clamp(2rem,10vw,3.2rem)!important}
}