/* Shared V1/V2 responsive shell. Precision chart typography stays in style.css. */
.workspace,.left-panel,.board-panel,.comparison-view,.comparison-grid,.comparison-card{min-width:0;max-width:100%}
.comparison-grid{grid-template-columns:repeat(var(--compare-columns,3),minmax(0,var(--compare-side,280px)))}
.comparison-board canvas{max-width:100%}

@media(max-width:720px){
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
 body>header,body.chart-active>header{min-width:0}
 body>header nav,body.chart-active>header nav{min-width:0;gap:2px 8px;flex-wrap:wrap}
 body>header nav button,body.chart-active>header nav button{font-size:12px;min-height:44px;padding:8px 4px}
 body .workspace{display:flex;flex-direction:column;width:100%}
 body.chart-active .workspace:is(.flat-reading,.five-reading)>.board-panel{order:-1;width:100%}
 body.chart-active .workspace>.left-panel{width:100%;max-height:none;overflow:visible}
 .inline-birth-form{grid-template-columns:minmax(0,1fr)}
 .inline-birth-form>label,.inline-birth-form>.small{grid-column:1/-1}
 .inline-birth-form .form-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
 .inline-birth-form label,.date-parts>label{min-width:0}
 body .left-panel .date-parts{width:100%;max-width:none;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
 .left-panel input:not([type=checkbox]):not([type=range]),.left-panel select{min-width:0;max-width:100%}
 body input:not([type=checkbox]):not([type=range]):not([type=file]),body select,body .inline-birth-form .form-row select,body .share-panel #shareUrl{font-size:16px}
 body textarea{font-size:16px!important}
 .board-toolbar,.comparison-controls{flex-wrap:wrap;gap:8px;min-width:0}
 .board-toolbar .mode-switch,.comparison-controls .mode-switch{min-width:0;max-width:100%;flex-wrap:wrap}
 .board-toolbar button,.comparison-controls button{min-height:40px}
 body .comparison-view{width:100%;max-height:none!important;overflow:visible}
 /* A CSS fallback also works before the first fit or after a hidden view opens. */
 body .comparison-grid{width:100%;grid-template-columns:minmax(0,1fr);gap:16px}
 .comparison-card{width:100%}
 .comparison-card>header{height:auto;min-height:40px;gap:8px}
 .comparison-card>header h3{font-size:14px}
 .comparison-card>header button{min-height:40px;font-size:12px}
 .compare-dialog{width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:12px}
 .compare-dialog-heading{flex-wrap:wrap;gap:8px;padding-right:24px}
 .compare-dialog-heading h2{min-width:0;overflow-wrap:anywhere;font-size:16px}
 .records-panel .records-header{flex-wrap:wrap}
 .records-panel .records-table-scroll{min-width:0;max-width:100%}
}