/* A persistent category rail beside a single, independently scrolling editor. */
.studio{grid-template-columns:432px minmax(0,1fr);gap:20px}
.controls{display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:0 12px;align-items:stretch;align-self:start;height:min(720px,calc(100dvh - 225px));min-height:440px;max-height:none;overflow:visible;padding:0}
.settings-rail{display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:2px 3px 4px 2px}
.settings-card{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;min-height:67px;padding:10px 4px;border:1px solid transparent;border-radius:5px;background:#eeede6;color:#77796d;line-height:1.2;font-size:10px}
.settings-card svg{width:23px;height:23px;flex:none}
.settings-card:hover{background:#e7e7dd;border-color:#d4d6c9;color:var(--ink)}
.settings-card[aria-selected=true]{background:#e1e9e2;border-color:#aabcb0;color:#294c4b;box-shadow:inset 3px 0 #6b8a78}
.settings-card:focus-visible{outline-offset:-3px}
.settings-panels{min-width:0;min-height:0;background:#fcfbf7;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.settings-panel{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c6c2b7 transparent;outline-offset:-3px;scroll-padding-top:110px}
.settings-panel-heading{position:sticky;top:0;z-index:2;background:#fcfbf7;padding:21px 19px 17px;border-bottom:1px solid #e6e3d9}
.settings-panel-heading h2{margin:0;font:22px/1.2 var(--serif);font-weight:400}
.settings-panel-heading p{margin:8px 0 0;font-size:11px;line-height:1.6;color:var(--muted)}
.settings-panel-body{padding:18px 19px 24px;min-width:0}
.settings-panel-body>.field-label:first-child{margin-top:0}
.map-rotation-controls{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.map-rotation-controls>.field-label:first-child{margin-top:0}
.map-rotation-inputs{display:grid;grid-template-columns:minmax(0,1fr) 78px;align-items:center;gap:10px}
.map-rotation-inputs .border-value{display:flex;align-items:center;gap:4px;min-width:0}
.map-rotation-inputs input[type=number]{min-width:0;width:100%;padding:7px 5px;font-size:11px}
.settings-panel-body .pin-section{border-top:0;margin-top:0;padding-top:0}
.settings-panel-body>.data-pack-controls:first-child{border-top:0;margin-top:0;padding-top:0}
.settings-panel-body>.map-shape-controls:first-child{border-top:0;margin-top:0;padding-top:0}
.settings-panel-body input,.settings-panel-body select,.settings-panel-body .two-fields>label{min-width:0}
.settings-panel-body .hint,.settings-panel-body .style-source-note{overflow-wrap:anywhere}
.settings-panel-body .two-fields:has(#font){grid-template-columns:1fr}
.caption-row-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 5px}
.caption-row-heading .field-label{margin:0}
.caption-row-heading select{width:142px;flex:0 0 142px;padding:6px 8px;font-size:10px}
.label-styling-controls{border-top:1px solid var(--line);margin-top:20px;padding-top:17px}
.label-styling-controls h3{margin:0 0 12px;font:17px/1.3 var(--serif);font-weight:400}
.label-styling-preview-link{margin:-4px 0 13px}
.label-layout-controls{margin:16px 0}
.label-layout-controls h3{font-size:15px;margin-bottom:10px}
.label-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.label-presets button{padding:9px 5px;font-size:10px;line-height:1.4;border-radius:3px;min-width:0;white-space:normal;overflow-wrap:break-word}
.label-presets button[aria-pressed=true]{background:#e1e9e2;border-color:#aabcb0;color:#294c4b}
.label-position-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-width:180px}
.label-position-grid button{height:36px;border-radius:3px;font-size:20px;line-height:1;background:#f5f3ec}
.label-position-grid button[aria-pressed=true]{background:#e1e9e2;border-color:#6b8a78;color:#294c4b}
.label-color-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.label-color-control button{padding:7px 9px;font-size:10px;border-radius:3px}
.label-color-control input:disabled{opacity:.4;cursor:default}
.label-styling-controls .artwork-range{margin-top:15px}
#text-scale-value{font-size:10px;color:var(--ink)}
.settings-panel-body .city3d-view-presets{margin-top:0}
#route-controls .special-grid{margin-top:14px}
#route-controls>button{width:100%;font-size:11px;padding:11px 12px;margin-top:8px;border-radius:3px}
#route-controls>#import-gpx{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#route-controls>#import-gpx:hover{background:#43443b}
#route-controls>label:not(.switch-line){display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0 0;font-size:11px;color:var(--muted)}
#route-controls #route-color{width:48px;height:33px;flex:none}
#route-controls .switch-line{margin:17px 0 9px}
#route-controls .hint{margin-top:12px}
#route-controls>.hint:first-child{margin-top:0}
#route-controls #gpx-stats{margin-top:16px;padding:11px 12px;background:#f2f0e7;border:1px solid var(--line);border-radius:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#route-settings{border-top:1px solid var(--line);margin-top:18px;padding-top:3px}
#pin-connection-settings h3{font-size:11px;font-weight:500;margin:17px 0 0}
#pin-connection-settings output{font-variant-numeric:tabular-nums;color:var(--ink)}
.controls>.sidebar-footer{grid-column:2;padding:9px 1px 0;font-size:9px}
.settings-card[hidden],.settings-panel[hidden],.settings-panel [hidden]{display:none!important}
@media(min-width:1450px){.studio{grid-template-columns:452px minmax(0,1fr)}}
@media(min-width:981px) and (max-width:1100px){.studio{grid-template-columns:388px minmax(0,1fr);gap:15px}.controls{grid-template-columns:72px minmax(0,1fr);gap:0 9px}.settings-panel-heading{padding:18px 15px 15px}.settings-panel-body{padding:16px 15px 22px}.preview-toolbar{flex-wrap:wrap}.preview-tools{margin-left:auto}.preview-stage{padding-left:20px;padding-right:20px}}
@media(max-width:980px){.studio{display:flex;flex-direction:column;padding:0 20px 25px;gap:18px}.preview-area{order:0;width:100%}.controls{order:1;width:100%;height:580px;min-height:0;grid-template-columns:92px minmax(0,1fr)}.settings-rail{gap:6px}.settings-card{min-height:61px}.settings-card svg{width:21px;height:21px}.settings-panel-heading{padding:20px 24px 16px}.settings-panel-body{padding:20px 24px 26px}.preview-stage{height:430px;min-height:320px}.settings-panel-body .style-gallery{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:760px){.studio{padding:0 12px 20px;gap:14px}.controls{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 9px;height:560px}.controls>.sidebar-footer{grid-column:2}.settings-card{min-height:61px;font-size:9px}.settings-panel-heading{padding:17px 14px 14px}.settings-panel-heading h2{font-size:21px}.settings-panel-body{padding:15px 14px 22px}.settings-panel-body .style-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.preview-stage{height:340px;min-height:260px;max-height:55vh;padding:20px 38px}}
@media(max-width:380px){.controls{grid-template-columns:64px minmax(0,1fr);gap:0 6px}.settings-panel-heading,.settings-panel-body{padding-left:11px;padding-right:11px}.settings-panel-body .two-fields{grid-template-columns:1fr}.settings-panel-body .catalogue-style-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-toolbar{flex-wrap:wrap}.preview-tools{margin-left:auto}}
@media(max-width:760px){.studio{width:100%;min-width:0;max-width:100%}.studio>.controls,.studio>.preview-area{min-width:0}.preview-toolbar{flex-wrap:wrap}.preview-tools{margin-left:auto}}