/* v0.4.5 Readability pass — larger type while preserving cockpit layout */

@media (min-width: 761px){
  .site-kicker{font-size:11px!important;letter-spacing:.18em!important}
  .hero h1{font-size:clamp(24px,2.15vw,35px)!important;line-height:1.06!important}
  .hero p{font-size:12px!important;line-height:1.25!important}
  .free-tag{font-size:11px!important;padding:7px 10px!important}

  .panel-cap span{font-size:10px!important;letter-spacing:.13em!important}
  .panel-cap b{font-size:10px!important}
  .drag-hint{font-size:10.5px!important;line-height:1.35!important;padding:7px 9px!important}
  .footer-actions .btn{font-size:10px!important;min-height:32px!important;padding:6px 9px!important}
  .footer-actions .stats{font-size:11px!important}

  .field label{font-size:10.5px!important;line-height:1.2!important}
  .controls input{height:39px!important;font-size:18px!important;padding:6px 9px!important}
  #controlPanel .btn{font-size:11px!important;min-height:33px!important;padding:6px 8px!important}
  #controlPanel #analyzeBtn,#controlPanel #executeBtn{font-size:13px!important;min-height:40px!important}
  #analysisStats{font-size:10px!important;line-height:1.25!important}

  #piecesPanel .pieces-heading h2{font-size:15px!important}
  #piecesPanel .drag-badge{font-size:9px!important;padding:4px 6px!important}
  #piecesPanel .piece-title b{font-size:20px!important}
  #piecesPanel .piece-title span{font-size:9.5px!important;max-width:68%!important}
  #piecesPanel .preset-open{font-size:9.5px!important;min-height:30px!important;padding:5px 3px!important}
  #piecesPanel .current-piece-box{height:72px!important;min-height:72px!important;max-height:72px!important}
  #piecesPanel .current-piece-label{font-size:8.5px!important;min-height:10px!important}
  #piecesPanel .nav-place{font-size:9px!important;min-height:31px!important;padding:4px 3px!important}

  .result-panel{font-size:13px!important}
  .result-panel>h2{font-size:20px!important}
  .step-chip{font-size:12px!important}
  .step-chip small{font-size:10px!important}
  .metrics span{font-size:10.5px!important}
  .metrics b{font-size:17px!important}
  .ai-reasons,.ai-reasons ul{font-size:11px!important}
}

@media (max-width: 760px){
  .site-kicker{font-size:8px!important;letter-spacing:.13em!important}
  .hero h1{font-size:18px!important;line-height:1.08!important}
  .free-tag{font-size:8.5px!important;padding:5px 7px!important}
  .mobile-main-btn{font-size:13px!important;min-height:40px!important}

  /* Keep board + compact rack together, then attach score/command panel directly below. */
  #topGrid{
    grid-template-columns:minmax(0,1fr) 78px!important;
    column-gap:4px!important;
    row-gap:0!important;
  }
  #controlPanel{margin-top:-1px!important;border-top-left-radius:8px!important;border-top-right-radius:8px!important}

  .board-panel .panel-cap span{font-size:7.5px!important;letter-spacing:.07em!important}
  .drag-hint{font-size:8.5px!important;line-height:1.25!important;padding:5px 6px!important}
  .footer-actions .btn{font-size:8.5px!important;min-height:27px!important;padding:4px 5px!important}
  .footer-actions .stats{font-size:8.5px!important}

  #piecesPanel{width:78px!important}
  #piecesPanel .piece-title b{font-size:14px!important}
  #piecesPanel .preset-open{font-size:7.5px!important;min-height:24px!important;padding:3px 1px!important}
  #piecesPanel .nav-place{font-size:7.5px!important;min-height:24px!important;padding:3px 1px!important;line-height:1.05!important}
  #piecesPanel .current-piece-box{height:53px!important;min-height:53px!important;max-height:53px!important}

  #controlPanel .panel-cap span{font-size:8.5px!important;letter-spacing:.07em!important}
  #controlPanel .panel-cap b{font-size:8.5px!important}
  #controlPanel .field label{font-size:9px!important;line-height:1.2!important}
  #controlPanel .controls input{height:36px!important;font-size:16px!important;padding:5px 7px!important}
  #controlPanel .btn{font-size:9.5px!important;min-height:32px!important;padding:5px 6px!important}
  #analysisStats{font-size:8.5px!important;line-height:1.2!important}

  .result-panel>h2{font-size:16px!important}
  .result-head h3{font-size:14px!important}
  .badge{font-size:8.5px!important}
  .gain{font-size:20px!important}
  .gain small{font-size:8.5px!important}
  .order-banner span{font-size:9px!important}
  .order-banner strong{font-size:17px!important}
  .step-chip{font-size:10px!important}
  .step-chip small{font-size:8.5px!important}
  .metrics span{font-size:8.5px!important}
  .metrics b{font-size:13px!important}
  .ai-reasons>b{font-size:10px!important}
  .ai-reasons ul{font-size:9.5px!important;line-height:1.5!important}
  .note,.empty-result,.danger-result{font-size:9.5px!important}
}

@media (max-width:380px){
  #topGrid{grid-template-columns:minmax(0,1fr) 72px!important;column-gap:3px!important;row-gap:0!important}
  #piecesPanel{width:72px!important}
  #piecesPanel .preset-open,#piecesPanel .nav-place{font-size:7px!important}
}