header{max-width:1120px;padding:12px 16px;gap:8px}
header .brand{margin-right:auto;font-size:21px;white-space:nowrap}
header button{font-size:13px;padding:8px 10px}
main{max-width:1120px;padding:14px 16px 36px}
.workspace-context{padding:10px 0 8px;display:grid;gap:3px}
.context-heading{display:flex;align-items:center;gap:12px;min-width:0}
#contextGame{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
#reportBack{font-size:13px;flex:none}
#contextPosition{font-size:14px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#contextSaved{margin:0;min-height:20px;overflow-wrap:anywhere}
.workspace-tabs{position:sticky;top:0;z-index:5;background:var(--bg);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px 0;border-bottom:1px solid var(--line);margin:0 0 12px}
.workspace-tabs button{padding:9px 5px;font-size:14px;text-align:center}
.workspace-tabs button[aria-selected=true]{background:var(--green);color:white;border-color:var(--green);font-weight:600}
.workspace-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.workspace-panels>.panel{min-width:0}
.layout{grid-template-areas:"board coach";grid-template-rows:auto;grid-template-columns:minmax(0,1fr) 300px;gap:14px;scroll-margin-top:68px}
.board-panel{scroll-margin-top:68px;padding:14px}
.coach{padding:14px;align-self:start}
.coach img{width:66px;height:76px}
.coach .cat-about{border:0;background:transparent;display:grid;justify-items:center;gap:3px;flex:none;padding:0 3px;font-size:11px;line-height:1.3;-webkit-tap-highlight-color:transparent}
.coach .cat-about img{display:block;border-radius:10px}
.coach .cat-about:hover:enabled{background:transparent}
.coach .cat-about:hover:enabled img{background:#eef4e8}
.coach .cat-about:focus-visible{outline:none}
.coach .cat-about:focus-visible img,.coach .cat-about:active:enabled img{outline:3px solid #65a577;outline-offset:2px}
.coach blockquote{font-size:14px}
.board-heading h1{font-size:20px}
.move-bar{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto auto;padding:0;margin:10px 0}
.move-bar>span{font-size:13px}
.board-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.board-actions button{font-size:14px;padding:9px 7px}
.board-help{border-top:1px solid var(--line);padding:10px 0;margin-top:6px;font-size:14px}
.board-help>summary{cursor:pointer;min-height:32px;display:list-item;padding:4px 0;font-weight:600}
.board-help .tools{margin-top:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
#studyHelp{display:contents}
.board-help .secondary-tools{border:0;margin:6px 0;padding:0;flex-wrap:wrap}
.board-help p{font-size:13px}
.corner-start{margin:0;border:1px solid var(--line)}
.library-link{margin-top:16px;width:100%}
#savedBranches>div,#allSavedBranches>div{padding:12px 0;border-bottom:1px solid var(--line)}
#savedBranches p,#allSavedBranches p{margin:0}
#allSavedBranches button{max-width:100%;text-align:left;overflow-wrap:anywhere}
#allSavedBranches details{font-size:14px;color:var(--muted)}
#allSavedBranches details button{margin:6px 5px 0 0}
#libraryDialog,#gameDialog{border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);width:min(620px,94vw);max-height:85dvh;overflow:auto;padding:20px}
#libraryDialog::backdrop,#gameDialog::backdrop{background:#17291f88}
#aboutDialog{border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);width:min(640px,94vw);max-height:85dvh;overflow:auto;padding:16px}
#aboutDialog::backdrop{background:#17291f88}
.about-heading{position:sticky;top:-16px;z-index:1;background:var(--paper);display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.about-heading h2{font-size:20px;margin:0}
.about-heading button{font-size:14px}
.about-intro{display:flex;gap:12px;align-items:center;margin:12px 0}
.about-intro img{width:66px;height:86px;object-fit:contain;flex:none}
#aboutContent{font-size:14px;overflow-wrap:anywhere}
.about-notice{padding:10px;background:#fff3d8;border-radius:9px}
.about-section{border-top:1px solid var(--line);padding:10px 0}
.about-section summary{cursor:pointer;font-weight:600;padding:10px 0;min-height:44px}
.about-section ul{padding-left:22px}.about-section li{margin:10px 0}
#aboutError{color:#8e3028}
#gameDialog>button,#closeLibrary{margin-top:14px}
#closeLibrary{position:sticky;bottom:0;background:var(--paper);width:100%}
#saveReceipt{overflow-wrap:anywhere}
.line-controls{background:#eef4e8;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:12px}
.line-buttons{display:flex;gap:6px;flex-wrap:wrap}
.line-buttons button{min-width:44px;font-size:13px;padding:8px 10px}
.line-buttons #closeLine{flex:1}
#board{touch-action:pan-y pinch-zoom}
#boardWorkspace,#trainingWorkspace,#savesWorkspace{scroll-margin-top:68px}
@media(max-width:880px){
  .layout{grid-template-areas:"coach" "board";grid-template-columns:minmax(0,1fr);gap:10px}
  .coach{padding:10px 12px;align-items:center}
  .coach img{width:52px;height:60px}
  .coach #feedback{font-size:13px}
}
@media(max-width:520px){
  header{padding:10px;gap:6px}
  header .brand{font-size:20px}
  header button{font-size:12px;padding:8px}
  main{padding:8px 10px 30px}
  .workspace-panels{grid-template-columns:minmax(0,1fr);gap:12px}
  .workspace-context{padding-top:7px}
  .workspace-tabs button{font-size:13px;padding:9px 3px}
  #contextGame{font-size:14px}
  #contextPosition{font-size:13px}
  #contextSaved{font-size:12px}
  .board-panel{padding:9px}
  .board-heading h1{font-size:18px}
  .board-heading p{font-size:12px}
  .board-actions button{font-size:13px}
  .move-bar button{padding:8px 10px}
}