:root{--ink:#182f35;--muted:#667b80;--line:#d8e4e5;--soft:#f1f6f6;--teal:#087f78;--navy:#183d52;--white:#fff;--shadow:0 14px 40px rgba(13,42,50,.16)}
*{box-sizing:border-box}html,body,.app-shell{height:100%;margin:0;overflow:hidden}body{font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#e8efef}button,input,select{font:inherit}button,select{cursor:pointer}.hidden{display:none!important}.mobile-only{display:none}
.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 20px;position:relative;z-index:30}.brand{display:flex;align-items:center;gap:10px;min-width:225px;text-decoration:none;color:var(--ink)}.brand img{width:39px}.brand span{display:flex;flex-direction:column}.brand strong{font-size:14px}.brand small{font-size:12px;color:var(--teal);font-weight:700;margin-top:3px}.study-title{display:flex;flex-direction:column;flex:1}.study-title span,.eyebrow,.field-label{font-size:9px;letter-spacing:.13em;font-weight:800;color:var(--muted)}.study-title strong{font-size:14px;margin-top:3px}.source-badge{font-size:11px;background:#edf8f4;color:#176a52;border:1px solid #cde8de;padding:7px 10px;border-radius:999px;white-space:nowrap}.source-badge i,.ready i{display:inline-block;width:7px;height:7px;background:#29a676;border-radius:50%;margin-right:6px}.header-button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 13px;border-radius:7px;font-size:11px;font-weight:700}.primary{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)!important}
.workspace{height:calc(100% - 68px);display:flex}.sidebar{width:326px;min-width:326px;background:#fff;border-right:1px solid var(--line);overflow-y:auto;z-index:15;padding-bottom:20px}.sidebar-head{padding:19px 18px 13px;display:flex;justify-content:space-between}.sidebar h1{font-size:20px;margin:5px 0}.sidebar section{padding:13px 18px;border-top:1px solid #edf2f2}.field-label{display:block;margin-bottom:7px}.sidebar select{width:100%;height:39px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 9px;color:var(--ink)}.section-title{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);margin-bottom:11px}.dates{display:flex;justify-content:space-between;margin-bottom:14px}.dates span{display:flex;flex-direction:column}.dates span:last-child{text-align:right}.dates b{font-size:19px;color:var(--navy)}.dates small{font-size:9px;color:var(--muted);margin-top:2px}.sidebar label[for=swipeRange]{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.sidebar input[type=range]{width:100%;accent-color:var(--teal)}.date-mode{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.date-mode button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 2px;font-size:9px;color:var(--muted)}.date-mode button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metrics article{border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff}.metrics span{display:block;font-size:8px;font-weight:800;color:var(--muted);letter-spacing:.06em}.metrics strong{display:block;font-size:21px;color:var(--teal);margin:5px 0 2px}.metrics small{font-size:8px;color:var(--muted)}.chart-card{background:var(--soft)}.chart-row{display:grid;grid-template-columns:58px 1fr 34px;gap:7px;align-items:center;margin:8px 0;font-size:9px}.chart-bars{height:15px;display:flex;flex-direction:column;gap:2px}.chart-bar{height:6px;border-radius:3px}.chart-row b{text-align:right}.change-legend label{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:10px}.change-legend input{accent-color:var(--teal)}.change-legend i{width:10px;height:10px;border-radius:2px}.wide{width:100%;padding:9px;border:1px solid var(--teal);background:var(--teal);color:#fff;border-radius:6px;margin-top:7px;font-size:10px}.wide:disabled{cursor:not-allowed;opacity:.45}.secondary{background:#fff;color:var(--ink);border-color:var(--line)}.danger{background:#fff;color:#a33b35;border-color:#dfb4b0}.annotation-fields{display:grid;grid-template-columns:1fr 58px;gap:8px}.annotation-fields label{font-size:9px;color:var(--muted)}.annotation-fields span{display:block;margin-bottom:5px}.annotation-fields input{width:100%;height:36px;border:1px solid var(--line);border-radius:6px;padding:0 8px;color:var(--ink)}.annotation-fields input[type=color]{padding:4px}.annotation-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:9px}.annotation-tools button{padding:8px 3px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:9px}.annotation-tools button.active{background:var(--navy);border-color:var(--navy);color:#fff}.annotation-notice{min-height:14px;margin:8px 0 0;font-size:9px;line-height:1.45;color:var(--muted)}.annotation-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.annotation-list{margin-top:10px;max-height:120px;overflow:auto;border-top:1px solid var(--line)}.annotation-list p{font-size:9px;color:var(--muted)}.annotation-item{width:100%;display:flex;align-items:center;gap:7px;border:0;border-bottom:1px solid var(--line);background:#fff;padding:8px 4px;text-align:left;font-size:10px;color:var(--ink)}.annotation-item.active{background:#edf8f7;color:var(--teal);font-weight:700}.annotation-item i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.annotation-item small{margin-left:auto;text-transform:capitalize;color:var(--muted)}.vertex-marker{width:18px;height:18px;border:4px solid #fff;border-radius:50%;background:var(--teal);box-shadow:0 1px 7px rgba(0,0,0,.85);cursor:move}.draft-vertex{width:16px;height:16px;border-width:3px;cursor:crosshair}.disclaimer{font-size:9px;line-height:1.45;color:var(--muted);padding:0 18px}
.map-workspace{flex:1;min-width:0;position:relative}.map-stack{position:absolute;inset:0 0 28px;overflow:hidden}.map{position:absolute;inset:0}.map canvas{outline:none}#afterClip{position:absolute;inset:0;clip-path:inset(0 50% 0 0);pointer-events:none}#swipeHandle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.7);z-index:6;pointer-events:none}#swipeHandle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:39px;height:39px;display:grid;place-items:center;background:#fff;border:3px solid var(--teal);border-radius:50%;color:var(--teal);font-weight:900;box-shadow:var(--shadow)}.map-label{position:absolute;top:15px;z-index:7;background:rgba(19,45,52,.84);color:#fff;border-radius:5px;padding:6px 9px;font-size:10px;font-weight:800}.before-label{left:15px}.after-label{right:64px}.statusbar{height:28px;position:absolute;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 12px;font-size:9px;color:var(--muted)}.ready{margin-left:auto;color:var(--teal);font-weight:700}.map-actions{position:absolute;right:12px;top:148px;z-index:8;display:grid;gap:6px}.map-actions button,.icon{width:33px;height:33px;border:1px solid var(--line);border-radius:7px;background:#fff;box-shadow:0 2px 9px rgba(0,0,0,.15)}.notice{position:absolute;z-index:10;top:14px;left:50%;transform:translateX(-50%);background:#fff3d2;border:1px solid #ead38a;border-radius:7px;padding:8px 11px;font-size:10px}.feature-card{position:absolute;z-index:11;left:15px;top:54px;width:275px;background:#fff;border-radius:10px;padding:16px;box-shadow:var(--shadow)}.feature-card>button,.method-panel>button{position:absolute;right:8px;top:7px;border:0;background:transparent;font-size:20px;color:var(--muted)}.feature-card h2{font-size:17px;margin:6px 20px 12px 0}.detail{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:8px 0;font-size:10px}.detail span{color:var(--muted)}
.method-panel{position:fixed;z-index:50;right:18px;top:82px;width:390px;max-height:calc(100% - 100px);overflow:auto;background:#fff;padding:19px;border-radius:11px;box-shadow:var(--shadow)}.method-panel h2{font-size:20px;margin:6px 20px 14px 0}.method-panel h3{font-size:12px;margin:16px 0 6px}.method-panel p,.method-panel li{font-size:10px;line-height:1.55;color:var(--muted)}.method-panel code{font-size:9px;background:var(--soft);padding:2px 4px}.print-heading{display:none}
@media(max-width:900px){.source-badge{display:none}.study-title{display:none}.brand{flex:1}.sidebar{position:absolute;left:-340px;top:0;bottom:0;transition:left .2s;box-shadow:var(--shadow)}.sidebar.open{left:0}.mobile-only{display:grid;place-items:center}.method-panel{left:12px;right:12px;width:auto}.header-button{padding:9px}.topbar{gap:9px;padding:0 10px}}
@media(max-width:520px){.brand strong{display:none}.brand{min-width:0}.brand img{width:34px}.topbar{height:60px}.workspace{height:calc(100% - 60px)}.header-button{font-size:0;width:36px;height:36px;padding:0}.header-button:before{content:"ⓘ";font-size:16px}.header-button.primary:before{content:"▣"}.statusbar span:nth-child(2){display:none}.feature-card{left:10px;right:10px;top:auto;bottom:38px;width:auto}}
@media print{@page{size:landscape;margin:9mm}.topbar,.sidebar,.statusbar,.map-actions,.map-label,.notice,.feature-card,.method-panel,.maplibregl-ctrl-container{display:none!important}html,body,.app-shell,.workspace,.map-workspace{width:100%!important;height:100%!important;overflow:visible}.map-stack{inset:78px 0 0!important;border:1px solid #aaa}.print-heading{display:block;position:absolute;top:0;left:0}.print-heading h1{margin:0;font-size:20px}.print-heading p{font-size:10px;color:var(--muted)}}