/* Full-bleed canvas map; a few floating frosted panels on top like a native maps app. On phones the detail view becomes a bottom sheet. */
:root{
  --land:#f1f1ee; --road:#ffffff; --casing:#dddcd6; --green:#dce8da; --wood:#d3e3cf; --water:#b7d5eb; --rail:#c2c2c6;
  --bldg:#85898f; --civic:#7590ae; --ctxb:#e1e0dc; --label:#55575c; --halo:#f1f1ee;
  --edge:#9b45d6; --outside:rgba(70,70,80,.035);
  --fg:#1d1d1f; --fg2:#6e6e73; --fg3:#a1a1a6;
  --glass:rgba(250,250,252,.82); --solid:#fafafc; --hair:rgba(0,0,0,.08); --inner:rgba(255,255,255,.7);
  --accent:#0071e3; --fresh:#0a84ff; --gone:#e0352b; --track:rgba(0,0,0,.07); --tile:#ffffff;
  --pill:rgba(255,255,255,.94); --hover:#1d1d1f;
  --shadow:0 12px 40px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --land:#000000; --road:#2a2a2f; --casing:#1a1a1d; --green:#16201a; --wood:#13221a; --water:#132637; --rail:#3a3a40;
  --bldg:#8f9198; --civic:#6f8cad; --ctxb:#222226; --label:#8e9097; --halo:#000000;
  --edge:#c56cf7; --outside:rgba(0,0,0,.2);
  --fg:#f5f5f7; --fg2:#98989d; --fg3:#5f5f64;
  --glass:rgba(28,28,31,.8); --solid:#1c1c1f; --hair:rgba(255,255,255,.09); --inner:rgba(255,255,255,.06);
  --accent:#2997ff; --fresh:#3ea2ff; --gone:#ff5f52; --track:rgba(255,255,255,.1); --tile:rgba(255,255,255,.05);
  --pill:rgba(38,38,42,.94); --hover:#ffffff;
  --shadow:0 12px 40px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --land:#000000; --road:#2a2a2f; --casing:#1a1a1d; --green:#16201a; --wood:#13221a; --water:#132637; --rail:#3a3a40;
  --bldg:#8f9198; --civic:#6f8cad; --ctxb:#222226; --label:#8e9097; --halo:#000000;
  --edge:#c56cf7; --outside:rgba(0,0,0,.2);
  --fg:#f5f5f7; --fg2:#98989d; --fg3:#5f5f64;
  --glass:rgba(28,28,31,.8); --solid:#1c1c1f; --hair:rgba(255,255,255,.09); --inner:rgba(255,255,255,.06);
  --accent:#2997ff; --fresh:#3ea2ff; --gone:#ff5f52; --track:rgba(255,255,255,.1); --tile:rgba(255,255,255,.05);
  --pill:rgba(38,38,42,.94); --hover:#ffffff;
  --shadow:0 12px 40px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3); color-scheme:dark}

*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--land);color:var(--fg);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;touch-action:manipulation;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#map.drag{cursor:grabbing}
#map.hot{cursor:pointer}

.glass{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border:.5px solid var(--hair);box-shadow:var(--shadow),inset 0 1px 0 var(--inner);border-radius:18px}
.lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--solid)}
button{font-family:inherit;-webkit-appearance:none;appearance:none;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* top bar */
.top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;z-index:3}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;padding:9px 16px 9px 9px;min-width:0}
.mark{width:34px;height:34px;border-radius:9px;background:var(--fg);display:grid;place-items:center;flex:none}
.mark svg{width:18px;height:18px;fill:var(--land)}
.brand h1{margin:0;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.brand p{margin:1px 0 0;font-size:12px;color:var(--fg2);line-height:1.3;white-space:nowrap}
.seg{display:flex;padding:3px;border-radius:12px;gap:2px}
.seg button{border:0;background:transparent;color:var(--fg2);font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:9px;cursor:pointer;transition:color .2s,background .2s}
.seg button[aria-pressed="true"]{background:var(--tile);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 .5px var(--hair)}
.icon{width:44px;height:44px;border:0;border-radius:50%;display:none;place-items:center;color:var(--fg);cursor:pointer}
.icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.zoom{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 76px);display:flex;flex-direction:column;border-radius:13px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s;z-index:2}
.zoom button{width:40px;height:40px;border:0;background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center;transition:background .15s}
.zoom button:hover{background:var(--track)}
.zoom button+button{border-top:.5px solid var(--hair)}
.zoom svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}

.tip{position:absolute;left:0;top:0;pointer-events:none;padding:6px 10px;border-radius:10px;font-size:12.5px;font-weight:500;white-space:nowrap;opacity:0;transition:opacity .12s;z-index:4}
.tip span{color:var(--fg2);font-weight:400;margin-left:6px;font-variant-numeric:tabular-nums}
.tip.on{opacity:1}

/* timeline */
.tl{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:min(780px,calc(100% - 32px));padding:16px 20px 14px;border-radius:24px;transform:translateX(-50%);transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:2}
.tl-head{display:flex;align-items:center;gap:16px}
.play{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .15s}
.play:active{transform:scale(.93)}
.play svg{width:15px;height:15px;fill:#fff}
.yr{display:flex;flex-direction:column}
.yr small{font-size:11px;font-weight:600;color:var(--fg2);text-transform:uppercase;letter-spacing:.08em}
.year{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stats{display:flex;gap:22px;margin-left:auto}
.stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.stat b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.stat span{font-size:11px;color:var(--fg2);font-weight:500;white-space:nowrap}
.stat.plus b{color:var(--fresh)} .stat.minus b{color:var(--gone)}
.scrub{position:relative;margin-top:14px;cursor:ew-resize;touch-action:none}
#hist{display:block;width:100%;height:58px}
.rng{position:relative;height:28px;margin-top:2px}
#year{-webkit-appearance:none;appearance:none;width:100%;margin:0;height:28px;background:transparent;cursor:pointer;display:block;touch-action:none}
#year::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p,50%),var(--track) var(--p,50%))}
#year::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p,50%),var(--track) var(--p,50%))}
#year::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:0;margin-top:-11px;box-shadow:0 3px 8px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.1);transition:transform .15s}
#year:active::-webkit-slider-thumb{transform:scale(1.1)}
#year::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:0 3px 8px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.1)}
.ticks{position:relative;height:14px;font-size:11px;color:var(--fg2);font-variant-numeric:tabular-nums}
.ticks span{position:absolute;transform:translateX(-50%)}
.legend{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--fg2);margin-top:12px;padding-top:11px;border-top:.5px solid var(--hair);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.legend::-webkit-scrollbar{display:none}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .edge{width:14px;height:0;border-radius:0;border-top:2px solid var(--edge);vertical-align:3px}
.legend .note{margin-left:auto;font-style:normal;color:var(--fg3)}

/* detail sheet */
.sheet{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:372px;border-radius:24px;overflow:hidden;transform:translateX(calc(100% + 40px));transition:transform .55s cubic-bezier(.2,.85,.2,1);display:flex;flex-direction:column;z-index:4}
.sheet.open{transform:none}
.sheet.dragging{transition:none}
.grab{display:none}
.sheet .scroll{overflow:auto;padding:0 20px 20px;flex:1;overscroll-behavior:contain;scrollbar-width:thin}
.sheet .x{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;border:0;background:var(--glass);color:var(--fg2);cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 .5px var(--hair)}
.sheet .x svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mini{display:block;width:calc(100% + 40px);margin:0 -20px;height:170px;border-bottom:.5px solid var(--hair)}
.eyebrow{margin-top:18px;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.01em}
.sheet h2{margin:3px 0 0;font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;padding:5px 11px 5px 9px;border-radius:99px;background:var(--track);margin-top:12px}
.status i{width:7px;height:7px;border-radius:50%;background:#30c15a;box-shadow:0 0 0 3px rgba(48,193,90,.18)}
.status.g i{background:var(--gone);box-shadow:0 0 0 3px rgba(224,53,43,.16)} .status.f i{background:var(--fg3);box-shadow:none}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.facts div{background:var(--tile);border:.5px solid var(--hair);border-radius:14px;padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.facts span{font-size:11.5px;color:var(--fg2);font-weight:500}
.facts b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.life{margin-top:18px}
.life .lh{display:flex;justify-content:space-between;font-size:12px;color:var(--fg2);margin-bottom:8px}
.life .lh b{color:var(--fg);font-weight:600}
.life .bar{position:relative;height:8px;border-radius:4px;background:var(--track)}
.life .bar i{position:absolute;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--fresh));transform-origin:left;animation:grow .8s cubic-bezier(.2,.8,.2,1)}
.life .bar i.g{background:var(--gone)}
.life .bar u{position:absolute;top:-4px;width:3px;height:16px;background:var(--fg);border-radius:2px;box-shadow:0 0 0 2px var(--solid);transition:left .2s}
.life .ax{display:flex;justify-content:space-between;font-size:11px;color:var(--fg3);font-variant-numeric:tabular-nums;margin-top:6px}
@keyframes grow{from{transform:scaleX(0)}}
.sheet p{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--fg)}
.sheet p+p{margin-top:10px}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.jump button{border:0;background:var(--track);color:var(--accent);font-size:13.5px;font-weight:500;padding:9px 15px;border-radius:99px;cursor:pointer;transition:background .15s}
.jump button:hover{background:var(--hair)}
.sample{font-size:11.5px;color:var(--fg3);margin-top:20px;padding-top:12px;border-top:.5px solid var(--hair)}

@media (min-width:1180px){ .sheet.open ~ .tl{transform:translateX(calc(-50% - 196px))} .sheet.open ~ .zoom{transform:translateX(-388px)} }
@media (max-width:1179px) and (min-width:721px){ .sheet.open ~ .zoom{opacity:0;pointer-events:none} }

/* phones */
@media (max-width:720px){
  .top{top:calc(env(safe-area-inset-top,0px) + 10px);left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px))}
  .brand{padding:6px 14px 6px 6px;border-radius:16px;gap:10px}
  .mark{width:32px;height:32px}
  .brand p{font-size:11.5px}
  .seg{display:none}
  .icon{display:grid}
  .zoom{display:none}
  .tl{width:auto;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 8px);transform:none;padding:12px 14px 10px;border-radius:24px}
  .sheet.open ~ .tl{transform:translateY(calc(100% + 30px))}
  .tl-head{gap:12px}
  .play{width:42px;height:42px}
  .yr small{display:none}
  .year{font-size:32px}
  .stats{gap:14px}
  .stat b{font-size:16px}
  .stat span{font-size:10.5px}
  .scrub{margin-top:10px}
  #hist{height:40px}
  .legend{gap:12px;font-size:11.5px;margin-top:8px;padding-top:8px}
  .legend .note{display:none}
  .sheet{top:auto;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 8px);width:auto;height:min(74dvh,640px);border-radius:28px;transform:translateY(calc(100% + 40px))}
  .grab{display:block;position:absolute;top:0;left:0;right:0;height:34px;z-index:1;touch-action:none;cursor:grab}
  .grab:before{content:"";position:absolute;left:50%;top:7px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:var(--fg3);opacity:.6}
  .mini{height:150px}
  .sheet h2{font-size:23px}
}
@media (max-width:380px){ .stat:first-child{display:none} }
@media (max-height:520px) and (orientation:landscape){
  .scrub,.legend,.ticks{display:none}
  .tl{padding:10px 14px 6px}
  .year{font-size:28px}
  .sheet{height:auto;top:calc(env(safe-area-inset-top,0px) + 8px)}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* ================= server version additions ================= */
:root{--lr:#f2b705;--wg:#12b886;--and:#8f9198;--draw:#ff9f0a}
.right{display:flex;gap:8px;align-items:flex-start}
.pillbtn{height:44px;border:0;border-radius:16px;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;color:var(--fg);font-size:13.5px;font-weight:500;cursor:pointer}
.pillbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pillbtn .av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;text-transform:uppercase}
.menu{position:absolute;top:calc(env(safe-area-inset-top,0px) + 70px);right:max(16px,env(safe-area-inset-right,0px));width:280px;padding:8px;border-radius:18px;z-index:6;display:none}
.menu.on{display:block;animation:pop .18s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.menu .who{padding:10px 12px 12px;border-bottom:.5px solid var(--hair);margin-bottom:6px}
.menu .who b{display:block;font-size:14.5px}.menu .who span{font-size:12px;color:var(--fg2)}
.menu button{width:100%;display:flex;align-items:center;gap:11px;border:0;background:none;color:var(--fg);font-size:14px;padding:10px 12px;border-radius:11px;cursor:pointer;text-align:left}
.menu button:hover{background:var(--track)}
.menu button svg{width:18px;height:18px;fill:none;stroke:var(--fg2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.menu hr{border:0;border-top:.5px solid var(--hair);margin:6px 4px}

.modes{display:flex;padding:3px;border-radius:11px;gap:2px;background:var(--track)}
.modes button{border:0;background:transparent;color:var(--fg2);font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.modes button[aria-pressed="true"]{background:var(--solid);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 .5px var(--hair)}
.legend .ow{display:none}.owmode .legend .ow{display:inline}.owmode .legend .yrl{display:none}
.legend img{height:14px;vertical-align:-3px;margin-right:6px;border-radius:3px;background:#fff;padding:1px 3px}

.dlg{position:fixed;inset:0;z-index:20;display:none;place-items:center;background:rgba(0,0,0,.45);padding:16px}
.dlg.on{display:grid;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.dlg .box{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:24px;background:var(--solid);border:.5px solid var(--hair);box-shadow:var(--shadow);animation:pop .22s cubic-bezier(.2,.8,.2,1)}
.dlg .box.wide{width:min(860px,100%)}
.dlg h3{margin:0 0 4px;font-size:21px;letter-spacing:-.02em}
.dlg .sub{margin:0 0 18px;color:var(--fg2);font-size:13.5px;line-height:1.45}
.fld{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.fld>span{font-size:12px;font-weight:600;color:var(--fg2)}
.fld small{font-size:11.5px;color:var(--fg3);font-weight:400}
input.t,select.t,textarea.t{font:inherit;font-size:15px;color:var(--fg);background:var(--tile);border:.5px solid var(--hair);border-radius:12px;padding:11px 13px;width:100%;outline:none;-webkit-user-select:text;user-select:text;transition:border-color .15s,box-shadow .15s}
textarea.t{min-height:96px;resize:vertical;line-height:1.45}
input.t:focus,select.t:focus,textarea.t:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,151,255,.25)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btns{display:flex;gap:10px;margin-top:20px;justify-content:flex-end;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:11px 18px;font-size:14.5px;font-weight:600;cursor:pointer;background:var(--track);color:var(--fg);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.pri{background:var(--accent);color:#fff}
.btn.red{background:rgba(255,95,82,.16);color:var(--gone)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
.msg{margin-top:12px;font-size:13.5px;color:var(--gone);min-height:18px;line-height:1.45}
.msg.ok{color:#30c15a}
table.tb{width:100%;border-collapse:collapse;font-size:13.5px}
table.tb th{text-align:left;font-size:11.5px;color:var(--fg2);font-weight:600;padding:8px;border-bottom:.5px solid var(--hair)}
table.tb td{padding:9px 8px;border-bottom:.5px solid var(--hair);vertical-align:middle}
table.tb td.r{text-align:right;white-space:nowrap}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--track);color:var(--fg2)}
.tag.sa{background:rgba(41,151,255,.2);color:var(--accent)}
.tag.off{background:rgba(255,95,82,.18);color:var(--gone)}
.loglist{font-size:13px;line-height:1.45}
.loglist div{padding:9px 0;border-bottom:.5px solid var(--hair)}
.loglist b{font-weight:600}.loglist span{color:var(--fg2)}
.loglist a{color:var(--accent);cursor:pointer}
.drop{border:1.5px dashed var(--fg3);border-radius:16px;padding:26px;text-align:center;color:var(--fg2);font-size:14px;cursor:pointer;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--accent);background:rgba(41,151,255,.08)}
.steps{margin:0 0 4px;padding-left:20px;font-size:14px;line-height:1.6}
.steps li{margin:3px 0}
.errlist{max-height:180px;overflow:auto;font-size:12.5px;color:var(--fg2);margin-top:8px;line-height:1.5}

.owner{display:flex;align-items:center;gap:12px;margin-top:14px;padding:11px 13px;border-radius:14px;background:var(--tile);border:.5px solid var(--hair)}
.owner img{height:30px;max-width:120px;object-fit:contain;background:#fff;border-radius:7px;padding:3px 6px}
.owner .od{display:flex;flex-direction:column;gap:1px;min-width:0}
.owner .od span{font-size:11.5px;color:var(--fg2);font-weight:500}.owner .od b{font-size:14px;font-weight:600}
.owner i{width:30px;height:30px;border-radius:8px;background:var(--and);flex:none}
.ownsel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ownsel button{border:.5px solid var(--hair);background:var(--tile);border-radius:14px;padding:10px 6px 9px;cursor:pointer;color:var(--fg);font-size:11.5px;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:7px;min-height:78px;justify-content:center;line-height:1.2;text-align:center}
.ownsel button img{height:24px;max-width:92%;object-fit:contain;background:#fff;border-radius:6px;padding:2px 5px}
.ownsel button i{width:24px;height:24px;border-radius:7px;background:var(--and)}
.ownsel button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.facts b .q{font-size:11px;font-weight:500;color:var(--fg3);margin-left:4px;letter-spacing:0}
.edbar{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.meta2{font-size:11.5px;color:var(--fg3);margin-top:14px;line-height:1.5}

.drawbar{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);transform:translateX(-50%);z-index:5;display:none;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:18px;font-size:13.5px;max-width:calc(100% - 32px)}
.drawbar.on{display:flex;animation:pop .2s}
.drawbar b{font-weight:600;white-space:nowrap}.drawbar span{color:var(--fg2)}
.fab{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 208px);z-index:2;width:40px;height:40px;border-radius:13px;border:0;display:none;place-items:center;color:var(--fg);cursor:pointer}
.fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth .fab{display:grid}
.auth .sheet.open ~ .fab{opacity:0;pointer-events:none}
#map.drawing{cursor:crosshair}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 210px);transform:translate(-50%,20px);opacity:0;z-index:30;padding:10px 16px;border-radius:14px;font-size:14px;font-weight:500;transition:opacity .25s,transform .25s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.loading{position:fixed;inset:0;display:grid;place-items:center;z-index:40;background:var(--land);color:var(--fg2);font-size:14px;transition:opacity .4s;text-align:center}
.loading.off{opacity:0;pointer-events:none}
.spin{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--track);border-top-color:var(--accent);animation:sp .8s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}
.tl-sub{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:11px;border-top:.5px solid var(--hair)}
.tl-sub .legend{margin:0;padding:0;border:0;flex:1;min-width:0}
@media (max-width:720px){
  .pillbtn .lbl{display:none}.pillbtn{padding:0 9px}
  .menu{right:10px;top:calc(env(safe-area-inset-top,0px) + 62px)}
  .auth .fab{display:none}
  .drawbar{top:calc(env(safe-area-inset-top,0px) + 64px);font-size:12.5px;padding-left:12px}
  .drawbar span{display:none}
  .row2{grid-template-columns:1fr}
  .dlg{padding:0;place-items:end stretch}
  .dlg .box{border-radius:26px 26px 0 0;max-height:92dvh;width:100%;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .tl-sub{margin-top:8px;padding-top:8px}
  .modes button{padding:5px 8px;font-size:11.5px}
}
@media (max-height:520px) and (orientation:landscape){.tl-sub{display:none}}

/* review control (top right) */
.review{display:none;align-items:center;height:44px;border-radius:16px;padding:3px;gap:2px}
.auth .review{display:flex}
.review button{border:0;background:transparent;color:var(--fg);cursor:pointer;height:38px;border-radius:13px;display:flex;align-items:center;transition:background .15s}
.review button:hover{background:var(--track)}
.rv-main{gap:9px;padding:0 12px 0 7px}
.rv-ring{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,159,10,.16);color:var(--draw);transition:background .2s,color .2s}
.rv-ring svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rv-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.rv-txt b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rv-txt small{font-size:10.5px;color:var(--fg2);font-weight:500}
.rv-main[aria-pressed="true"]{background:rgba(255,159,10,.14)}
.rv-main[aria-pressed="true"] .rv-ring{background:var(--draw);color:#000}
.rv-next{width:0;padding:0;overflow:hidden;justify-content:center;opacity:0;transition:width .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.filt .rv-next{width:38px;opacity:1}
.rv-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.legend .fl{display:none}.filt .legend .fl{display:inline}.filt .legend .yrl,.filt .legend .ow{display:none}
.chk{display:flex;align-items:center;gap:9px;margin-top:16px;padding:9px 9px 9px 13px;border-radius:14px;background:rgba(255,159,10,.12);font-size:13px;font-weight:500}
.chk i{width:8px;height:8px;border-radius:50%;background:var(--draw);flex:none}
.chk span{flex:1;min-width:0}
.chk.on{background:var(--tile);border:.5px solid var(--hair);color:var(--fg2)}.chk.on i{background:#30c15a}
select.t.sm{padding:6px 9px;font-size:13px;border-radius:9px;width:auto}
/* settings switch */
.sw{display:flex;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--tile);border:.5px solid var(--hair);cursor:pointer}
.sw span{flex:1;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.sw small{font-size:12.5px;color:var(--fg2);line-height:1.45}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw i{flex:none;width:51px;height:31px;border-radius:99px;background:var(--track);position:relative;transition:background .2s}
.sw i:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sw input:checked+i{background:#30c15a}.sw input:checked+i:after{transform:translateX(20px)}
/* login wall */
.gated #app{filter:blur(2px);opacity:.25}
.gated .dlg{background:var(--land)}
.gate-logo{display:flex;justify-content:center;margin-bottom:14px}.gate-logo .mark{width:52px;height:52px;border-radius:14px}.gate-logo svg{width:26px;height:26px}
@media (max-width:720px){.rv-txt small{display:none}.rv-main{padding:0 10px 0 6px}.filt .legend{display:none}
  .gated .dlg{place-items:center;padding:16px}.gated .dlg .box{border-radius:24px}}
@media (max-width:480px){.auth .brand{padding:6px}.auth .brand>div:last-child{display:none}}
/* draw chooser: building / road / water / lake */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pick button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px;border-radius:14px;border:.5px solid var(--hair);background:var(--track);color:var(--fg);cursor:pointer;font:inherit;transition:background .15s,transform .15s}
.pick button:hover{background:rgba(255,159,10,.14)}
.pick button:active{transform:scale(.97)}
.pick svg{grid-row:1/3;width:34px;height:34px;padding:7px;border-radius:10px;background:rgba(255,159,10,.16);fill:none;stroke:var(--draw);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pick b{font-size:14.5px;font-weight:600}
.pick span{font-size:12px;color:var(--fg2)}
@media (max-width:420px){.pick{grid-template-columns:1fr}}
/* address search (top left, like Google Maps) */
.top{justify-content:flex-start}
.top .right{margin-left:auto}
.search{position:relative;display:flex;align-items:center;height:52px;width:340px;min-width:0;border-radius:18px;padding:0 6px 0 4px;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.search:focus-within{box-shadow:var(--shadow),0 0 0 2px var(--accent)}
.s-ic,.s-x{border:0;background:transparent;color:var(--fg2);display:grid;place-items:center;cursor:pointer;flex:none;border-radius:12px}
.s-ic{width:40px;height:40px}.s-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.s-x{width:30px;height:30px;opacity:0;pointer-events:none;transition:opacity .15s}.s-x svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.search.has .s-x{opacity:1;pointer-events:auto}.s-x:hover{background:var(--track);color:var(--fg)}
#q{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--fg);font:inherit;font-size:15px;outline:none;padding:0 2px}
#q::placeholder{color:var(--fg3)}
#q::-webkit-search-cancel-button{display:none}
.sres{position:absolute;left:0;right:0;top:calc(100% + 8px);max-height:min(60vh,440px);overflow:auto;border-radius:18px;background:var(--solid);border:.5px solid var(--hair);box-shadow:var(--shadow);padding:6px;display:none}
.search.res .sres{display:block}
.sres button{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:transparent;color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.sres button[aria-selected="true"],.sres button:hover{background:var(--track)}
.sres i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--track);color:var(--fg2)}
.sres button[aria-selected="true"] i{background:var(--accent);color:#fff}
.sres i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sres b{display:block;font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres b mark{background:none;color:var(--fg);font-weight:700}
.sres span{display:block;font-size:12px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres div>span{min-width:0}
.sres .none{padding:12px 12px;font-size:13.5px;color:var(--fg2)}
.sres em{font-style:normal;font-size:11px;font-weight:600;color:var(--fg3);text-transform:uppercase;letter-spacing:.04em;display:block;padding:8px 12px 4px}
@media (max-width:1100px){.brand>div:last-child{display:none}.brand{padding:9px}.search{width:300px}}
@media (max-width:720px){
  .search{height:44px;width:auto;flex:1 1 auto;border-radius:16px;padding:0 4px 0 2px}
  .s-ic{width:36px;height:36px}
  #q{font-size:16px}
  .brand{display:none}
  .sres{position:fixed;left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 62px);max-height:calc(100dvh - 90px)}
}
@media (max-width:520px){
  .search:not(.open){flex:0 0 44px;width:44px;padding:0;justify-content:center}
  .search:not(.open) #q,.search:not(.open) .s-x{display:none}
  .search:not(.open) .s-ic{pointer-events:auto;width:44px;height:44px}
  .top.sopen .right{display:none}
}
/* outbuildings of a house (garage, shed …) */
.kids{font-size:12.5px;color:var(--fg2);margin-top:8px}
/* start animation (globe -> Hoyerswerda) */
.intro{position:fixed;inset:0;width:100vw;height:100vh;z-index:50;pointer-events:auto;transition:opacity .12s linear}
/* lite mode: no blur behind glass panels (very expensive on weak GPUs) */
.lite .glass,.lite .sheet,.lite .tl,.lite .menu,.lite .search{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lite *{transition-duration:.12s!important}
/* ---------- edit bar: Bearbeiten + ⋯ menu ---------- */
.edbar{display:flex;gap:8px;margin-top:18px;align-items:center;flex-wrap:wrap}
.edbar .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.icon-only{width:42px;padding:0;justify-content:center;height:42px}
.btn.icon-only svg{width:18px;height:18px;fill:currentColor;stroke:none}
.btn.ghost{background:transparent;color:var(--accent);padding-left:8px;padding-right:8px;margin-left:auto}
.more{position:relative}
.pop{position:absolute;left:0;top:calc(100% + 6px);min-width:200px;padding:6px;border-radius:14px;background:var(--solid);border:.5px solid var(--hair);box-shadow:var(--shadow);
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.pop button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pop button:hover{background:var(--track)}
.pop button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--fg2)}
.pop button.red,.pop button.red svg{color:var(--gone)}
.pop hr{border:0;border-top:.5px solid var(--hair);margin:5px 4px}
.btn.red.solid{background:var(--gone);color:#fff}
/* ---------- own confirm dialog ---------- */
.ask{text-align:center}
.ask h3{margin-top:4px}
.ask .btns{justify-content:center}
.ask .btns .btn{min-width:120px;justify-content:center}
.ask-ic{width:52px;height:52px;border-radius:16px;margin:4px auto 12px;display:grid;place-items:center;background:var(--track);color:var(--accent)}
.ask-ic.red{background:rgba(255,95,82,.14);color:var(--gone)}
.ask-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ---------- year field: vor 1938 / genau / ca. / von–bis ---------- */
.yf .yseg{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--track);margin-bottom:8px;flex-wrap:wrap}
.yf .yseg button{flex:1;border:0;background:transparent;color:var(--fg2);font:inherit;font-size:13px;font-weight:500;padding:7px 8px;border-radius:8px;cursor:pointer;white-space:nowrap}
.yf .yseg button[aria-pressed="true"]{background:var(--tile);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 .5px var(--hair)}
.yf .yin{display:flex;gap:8px;align-items:center}
.yf .yin i{color:var(--fg3);font-style:normal}
.yf .yr2{display:none;gap:8px;align-items:center;flex:1}
.yf .yr2 input{flex:1;min-width:0}
.yf[data-q="bereich"] .y1{display:none}.yf[data-q="bereich"] .yr2{display:flex}
.yf[data-q=""] .yin,.yf[data-q="karte"] .yin{display:none}
/* ---------- change log ---------- */
.dlg .box.logbox{width:min(900px,100%);display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.lg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lg-head h3{margin:0}
.lg-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lg-q{flex:1 1 260px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:12px;background:var(--track);min-width:0}
.lg-q svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--fg3);stroke-width:1.8;stroke-linecap:round}
.lg-q input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:14px;padding:10px 0;outline:none}
.lg-bar .t.sm{height:40px;padding:0 10px;font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 6px}
.chips button{border:.5px solid var(--hair);background:transparent;color:var(--fg2);font:inherit;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:99px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--fg);color:var(--land);border-color:var(--fg)}
.lg-list{flex:1;overflow:auto;margin:0 -24px;padding:0 24px;min-height:200px;border-top:.5px solid var(--hair)}
.lg-day{position:sticky;top:0;background:var(--solid);font-size:11.5px;font-weight:600;color:var(--fg3);text-transform:uppercase;letter-spacing:.05em;padding:14px 0 6px;z-index:1}
.lg-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:.5px solid var(--hair)}
.lg-t{flex:none;width:40px;font-size:12px;color:var(--fg3);font-variant-numeric:tabular-nums;padding-top:5px}
.lg-u{flex:none;width:26px;height:26px;border-radius:50%;background:var(--track);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--fg2)}
.lg-m{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.lg-m b{font-weight:600}
.lg-d{color:var(--fg2);font-size:12.5px;overflow-wrap:anywhere}
.lg-obj{color:var(--accent);cursor:pointer;font-weight:500}
.lg-obj small{color:var(--fg3);font-weight:400;margin-left:6px;font-size:11.5px}
.lg-obj.gone{color:var(--fg3);text-decoration:line-through}
.tag.g{background:rgba(48,193,90,.16);color:#30c15a}.tag.b{background:rgba(41,151,255,.16);color:var(--accent)}.tag.r{background:rgba(255,95,82,.16);color:var(--gone)}
.lg-empty{padding:40px 0;text-align:center;color:var(--fg3)}
.lg-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;font-size:12.5px;color:var(--fg3)}
@media (max-width:720px){.lg-bar .t.sm{flex:1 1 40%}.lg-list{margin:0 -16px;padding:0 16px}}
.lg-list.small{margin:12px 0 0;padding:0;max-height:55vh;border-top:.5px solid var(--hair)}
.lg-when{color:var(--fg3);font-size:12px;margin-left:4px}
/* ---------- sheet: content on top, actions + sources always at the bottom (also when the text is short) ---------- */
.sheet .scroll{display:flex;flex-direction:column}
.sheet .scroll>.foot{margin-top:auto;padding-top:18px}
.sheet .scroll>.foot .chk{margin-top:0}
.sheet .scroll>.foot .edbar{margin-top:12px}
/* the ⋯ menu opens upwards (it sits at the bottom of the sheet) */
.pop{top:auto;bottom:calc(100% + 6px);transform-origin:bottom left;transform:translateY(4px) scale(.98)}
.pop.on{transform:none}
@media (max-width:720px){
  .sheet .scroll>.foot{position:sticky;bottom:0;margin-left:-20px;margin-right:-20px;padding:14px 20px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--solid) 18px)}
  .edbar .btn{padding:11px 16px}
  .pop{min-width:220px}
  .pop button{padding:12px 12px;font-size:15px}
}
