/* Tablet layout keeps both regions on the same screen; phone layout remains scrollable. */
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:220px}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.time-dock{padding-bottom:max(8px,env(safe-area-inset-bottom))}
.event-list,.sidebar-scroll,.tutor-messages{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.event-point circle.event-hit-area,.event-point.selected circle.event-hit-area{fill:transparent;stroke:none;pointer-events:all}
.tutor-cloud-help{padding:12px;border:1px solid #cbd0ba;background:#edf0e3;line-height:1.9}
@media (pointer:coarse),(max-width:1100px){
 input[type=search],input[type=number],input[type=password],textarea,select{font-size:16px!important}
 .map-controls button{width:44px;height:44px;font-size:23px}
 .time-actions button{min-width:44px;min-height:44px}
 .time-actions input{height:44px;max-width:88px}
 .masthead nav button,.masthead nav a,.compare-tools button,.map-change-controls button,.dialog-header button,.dialog-head button,.atlas-ask-event,.tutor-actions button{min-height:44px;min-width:44px}
 .source-filter,.map-change-controls label{min-height:44px;display:inline-flex;align-items:center}
 input[type=checkbox]{width:19px;height:19px}
 .compare-tools button{padding:6px 8px}
 .map-change-controls{gap:3px;flex-wrap:wrap;max-width:calc(100% - 20px);font-size:11px}
 .map-change-controls button{font-size:11px}
 .map-legend{max-height:76px;overflow:auto;bottom:30px;max-width:calc(100% - 76px)}
 .map-legend button{min-height:35px;font-size:11px}
 .event-card .event-title{font-size:13px}
 #atlas-tutor .tutor-launcher{min-width:44px;min-height:44px}
 #atlas-tutor .tutor-actions button,#atlas-tutor .tutor-config-actions button,#atlas-tutor .tutor-composer-actions button{min-width:44px;min-height:44px}
 #atlas-tutor .tutor-suggestions button{min-height:38px}
 #atlas-tutor .tutor-panel{max-height:calc(100dvh - var(--tutor-dock) - 24px);min-height:300px}
 .axis-control{height:46px}
 .axis-control input{height:32px;touch-action:pan-y}
 .axis-control input::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border-radius:50%;background:var(--red);margin-top:-11px;border:3px solid var(--paper-light)}
 .axis-control input::-webkit-slider-runnable-track{height:4px}
 .axis-control input{-webkit-appearance:none;background:transparent}
 .period-lane{min-height:31px}
 .lane-track,.lane-track button{height:29px;line-height:27px}
 .time-dock{height:auto;min-height:210px;flex:none}
 .time-row{height:auto;min-height:44px;flex-wrap:wrap;gap:6px 12px}
 .time-note{margin-top:2px}
 .map-tooltip{display:none!important}
}
@media (min-width:700px) and (max-width:1100px){
 body:has(.comparison){height:100dvh;min-height:0;overflow:hidden}
 .comparison{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0}
 .comparison .region-pane.europe{border-left:1px solid #acae9c;border-top:0}
 .comparison .pane-heading{height:65px;padding:8px 12px;gap:8px;position:relative}
 .comparison .pane-heading h2{font-size:18px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
 .comparison .period-note{display:none}
 .comparison .year-badge{font-size:12px}
 .comparison .map-stage{height:auto;flex:1;min-height:170px}
 .comparison .event-panel{height:155px;padding:8px 12px}
 .comparison .event-list{grid-template-columns:1fr}
 .comparison .map-status{font-size:10px}
 body:has(.comparison) .masthead{height:auto;min-height:64px;flex-wrap:wrap;padding:8px 16px;gap:5px 16px}
 body:has(.comparison) .search-wrap{order:3;flex:1 0 100%;max-width:none;height:38px}
 body:has(.comparison) .brand h1{font-size:26px}
 body:has(.comparison) .masthead nav{margin-left:auto}
 .compare-tools{padding:3px 12px;gap:0 14px;flex-direction:row;align-items:center}
 body:has(.comparison) .time-dock{position:relative;padding:8px 15px 6px;min-height:215px}
 body:has(.comparison) .axis-zoom{margin-left:auto;font-size:11px}
 body:has(.comparison) .play-step{display:none}
 .map-change-controls{top:67px}
}
@media (min-width:700px) and (max-width:1100px) and (max-height:850px){
 .comparison .event-panel{height:100px}
 .comparison .pane-heading{height:52px}
 body:has(.comparison) .masthead{min-height:55px;flex-wrap:nowrap}
 body:has(.comparison) .search-wrap{order:0;flex:1 1 160px;max-width:240px}
 body:has(.comparison) .time-dock{min-height:198px}
 .compare-tools{font-size:10px}
 .compare-tools button{min-height:40px}
}
@media(max-width:699px){
 .range-options,.filter-options{flex-wrap:wrap}
 .comparison .map-stage{height:380px}
 #atlas-tutor .tutor-panel{bottom:10px;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}
}

/* The background map keeps its layout when the software keyboard opens. */
body.atlas-editing{height:var(--atlas-stable-height)!important;min-height:var(--atlas-stable-height)!important}
#atlas-tutor .tutor-panel{min-height:0;max-height:min(720px,calc(var(--atlas-visible-height,100dvh) - 24px))}
body.atlas-keyboard #atlas-tutor .tutor-panel{top:calc(var(--atlas-visible-top,0px) + 8px);bottom:auto;height:calc(var(--atlas-visible-height,100dvh) - 16px);max-height:none;min-height:0}
body.atlas-keyboard #atlas-tutor .tutor-header{padding-top:6px;padding-bottom:6px}
body.atlas-keyboard #atlas-tutor .tutor-context,body.atlas-keyboard #atlas-tutor .tutor-suggestions,body.atlas-keyboard #atlas-tutor .tutor-footnote{display:none}
body.atlas-keyboard #atlas-tutor .tutor-composer{padding:6px 12px}
body.atlas-keyboard #atlas-tutor textarea{min-height:44px;max-height:70px}
#atlas-tutor input,#atlas-tutor textarea,#atlas-tutor select{font-size:16px!important}
#atlas-tutor .tutor-voice-controls{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
#atlas-tutor .tutor-voice-controls button{min-height:42px;border:1px solid #c7c7b3;font-size:12px}
#atlas-tutor #tutor-mic{background:#7b8066;color:#fffdf3;flex:1;text-align:center}
#atlas-tutor #tutor-mic[aria-pressed=true]{background:#8f5945}
#atlas-tutor .tutor-voice-status{font-size:10px;line-height:1.5;min-height:15px;color:#78674e;margin:6px 0}
#atlas-tutor .tutor-read{border:1px solid #d7d3c3;font-size:11px;min-height:38px}
#atlas-tutor .tutor-voice-preference{display:flex;align-items:center;gap:8px}
#atlas-tutor .tutor-voice-preference input{width:18px;min-height:18px}
body.atlas-keyboard #atlas-tutor .tutor-voice-controls,body.atlas-keyboard #atlas-tutor .tutor-voice-status{display:none}
@media(max-height:650px){#atlas-tutor .tutor-panel{top:calc(var(--atlas-visible-top,0px) + 8px);bottom:auto;height:calc(var(--atlas-visible-height,100dvh) - 16px)}}

@media(pointer:coarse),(max-width:1100px){.view-options button,.textbook-filter{min-height:44px}.view-options button{padding:5px 13px}.textbook-filter input{width:19px;height:19px}}
@media(min-width:700px) and (max-width:1100px){
 body[data-map-view=china] .comparison,body[data-map-view=europe] .comparison{grid-template-columns:minmax(0,1fr)}
 body[data-map-view]:not([data-map-view=both]) .comparison .region-pane.europe{border:0}
 body[data-map-view]:not([data-map-view=both]):has(.comparison) .time-dock{min-height:169px}
 body[data-map-view]:not([data-map-view=both]) .comparison .pane-heading h2{max-width:none}
}
@media(min-width:1000px) and (max-width:1100px){
 body[data-map-view]:not([data-map-view=both]) .comparison .region-pane{grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:52px minmax(0,1fr)}
 body[data-map-view]:not([data-map-view=both]) .comparison .pane-heading{height:52px}
 body[data-map-view]:not([data-map-view=both]) .comparison .event-panel{height:auto}
 body[data-map-view]:not([data-map-view=both]) .comparison .map-stage{min-height:0}
 body[data-map-view]:not([data-map-view=both]) .comparison .event-card .event-title{font-size:14px}
}

@media (pointer:coarse),(max-width:1100px){
 .comparison .pane-heading h2:has(.period-title-button){max-width:none;overflow:visible;white-space:normal;font-size:17px}
 .comparison .pane-heading:has(.period-title-button){min-height:65px;height:auto}
 .period-title-button{min-height:44px}
 .coverage-table button,.coverage-table summary{min-height:44px}
}

@media (min-width:700px) and (max-width:1100px){
 body[data-map-view=both] .comparison .pane-heading{height:80px;min-height:80px}
}