/* ---------- токены палитры (из панели) ---------- */
:root{--bg:#eef2f6;--card:#fff;--text:#1f2d3d;--muted:#7c8aa0;--accent:#2f6fed;--border:#e6ecf3;--green:#1f9d57;--yellow:#d99a00;--red:#e2483d;--sidebar:#16202c;--soft:#eef5ff;--warn:#e6962a;--shadow:0 6px 20px rgba(31,45,61,.08),0 1px 2px rgba(31,45,61,.06);--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font:14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
canvas#c.hov{cursor:pointer}
canvas#c.drag{cursor:grabbing}
canvas#plan{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1;opacity:0;transition:opacity .18s ease}
.plan-active canvas#plan{opacity:1}
canvas#routes,canvas#semantic{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
canvas#semantic{z-index:3}
canvas#fog{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
canvas#weather{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.plan-active canvas#semantic{opacity:0}
#map-labels{position:fixed;inset:0;overflow:hidden;z-index:4;pointer-events:none;contain:layout style paint}
#map-labels *{pointer-events:none}
.plan-active #map-labels{display:none}
#plant-preview{display:none;pointer-events:auto;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.94);color:var(--text);padding:6px 10px;gap:9px;align-items:center;text-align:left;font:inherit;box-shadow:var(--shadow);max-width:100%;cursor:pointer;min-height:48px}
#plant-preview>span:nth-child(2){flex:1;min-width:0}
#plant-preview b{display:block;font-size:12px}
#plant-preview small{display:block;color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mountain-mini{width:37px;height:34px;flex:none;position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(#e8f3fc,#eff3e7);color:transparent}
.mountain-mini:before,.mountain-mini:after{content:'';position:absolute;width:30px;height:30px;transform:rotate(45deg);border-radius:5px;background:linear-gradient(135deg,#fff 0 24%,#b5cbd9 25% 60%,#c9d9cc 61%);top:13px;left:2px}
.mountain-mini:after{left:20px;top:17px;background:linear-gradient(135deg,#f8fcff 0 19%,#b0c4d7 20%)}
#hover-tip{display:none;position:fixed;z-index:8;pointer-events:none;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:var(--shadow);font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body{background:linear-gradient(#e8f0f8,#f7f5ef 72%)}
@media (max-width:899px),(pointer:coarse){#plant-preview{display:flex;align-self:flex-end;width:246px}}
@media (orientation:landscape) and (max-height:600px){#plant-preview{min-height:44px;padding:3px 8px;width:220px}.mountain-mini{height:28px;width:30px}}
@media (prefers-reduced-motion:reduce){canvas#plan{transition:none}.g-overdue,.chip i{animation:none}}
#view-switch #b-projection{min-width:44px;padding:0 10px;border-left:1px solid var(--border);border-radius:10px}
.ui{position:fixed;z-index:5}
/* ---------- глифы статусов: те же знаки, что на значках в сцене ---------- */
.g{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:5px;background:#fff;border:1px solid var(--border);box-shadow:0 1px 2px rgba(31,45,61,.12);font-size:10px;font-weight:800;line-height:1;flex:none;font-style:normal;font-family:-apple-system,"Segoe UI Symbol",Arial,sans-serif}
.g-none{color:#b7c1cf}.g-wait{color:var(--accent)}.g-assigned{color:var(--yellow)}.g-enroute{color:var(--warn)}.g-delivered{color:var(--green)}.g-overdue{color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------- HUD слева ---------- */
#hud{top:14px;right:14px;left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100vw - 28px);pointer-events:none} /* на компьютере HUD справа — над горами, лента слева — над пустой равниной */
#tiles{display:flex;gap:8px;min-width:0;max-width:100%}
.tile{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);min-width:150px;pointer-events:auto}
.tile .l{font-size:11px;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
.tile .v{font-size:24px;font-weight:700;line-height:1.15;margin-top:2px;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.tile .s{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.tile .s b{color:var(--green);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fdecea;color:var(--red);border:1px solid #f6c9c5;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;width:max-content;pointer-events:auto}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;animation:pulse 1.2s infinite;flex:none}
#view-switch{display:flex;align-self:flex-end;gap:3px;padding:3px;background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);pointer-events:auto}
#view-switch button{min-width:74px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-family:inherit;font-weight:600;font-size:13px;line-height:1.3;cursor:pointer}
#view-switch button[aria-pressed="true"]{background:var(--sidebar);color:#fff}
#climate-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:flex-end;gap:6px;width:304px;max-width:100%}
#climate-controls label{position:relative;min-width:0;border:1px solid var(--border);border-radius:13px;background:var(--card);box-shadow:var(--shadow);pointer-events:auto}
#climate-controls label>span{position:absolute;top:5px;left:10px;color:var(--muted);font-size:10px;pointer-events:none}
#climate-controls select{display:block;width:100%;min-width:0;min-height:54px;padding:15px 6px 0 8px;border:0;border-radius:12px;background:transparent;color:var(--text);font:600 12px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
#climate-controls select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* ---------- лента событий справа ---------- */
#right{top:14px;left:14px;right:auto;width:340px;max-width:calc(100vw - 28px);display:flex;flex-direction:column;gap:8px;pointer-events:none}
/* ---------- карточка объекта ---------- */
#card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px 12px;display:none;pointer-events:auto;max-height:calc(100vh - 260px);min-width:0;min-height:0;overflow:hidden}
#card.on{display:flex;flex-direction:column}
#card-body{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}
#card .handle{display:none}
#card h2{margin:0;padding-right:28px;font-size:18px;line-height:1.2}
#card .sub{font-size:12px;color:var(--muted);margin:1px 0 7px}
#card .st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 9px 3px 5px;margin:0 0 8px;max-width:100%;overflow-wrap:anywhere}
#card .st.c-none{background:#f1f3f6;color:var(--muted)} #card .st.c-wait{background:var(--soft);color:var(--accent)} #card .st.c-assigned{background:#fff6dc;color:var(--yellow)} #card .st.c-enroute{background:#fff0dc;color:var(--warn)} #card .st.c-delivered{background:#e4f5ec;color:var(--green)} #card .st.c-overdue{background:#fdecea;color:var(--red)}
#card .big{display:flex;gap:8px;margin:2px 0 10px}
#card .big div{flex:1;background:var(--soft);border:1px solid var(--border);border-radius:10px;padding:6px 9px;min-width:0}
#card .big b{display:block;font-size:20px;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#card .big i{font-style:normal;font-size:11px;color:var(--muted)}
#card table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
#card td{padding:5px 0;border-top:1px solid var(--border);vertical-align:top;overflow-wrap:anywhere}
#card td:first-child{color:var(--muted);width:44%;padding-right:10px}
#card td:last-child{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
#card ul{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px}
#card li{display:flex;gap:7px;align-items:flex-start;padding:5px 0;border-top:1px solid var(--border);min-width:0;overflow-wrap:anywhere}
#card li.done{color:var(--muted);text-decoration:line-through}
#card li.cur{font-weight:700}
#card .x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:#f1f3f6;border-radius:50%;color:var(--muted);font-size:16px;cursor:pointer;z-index:2}
#card .note{font-size:12px;color:var(--muted);margin-top:8px}
#card .route-action{display:block;width:100%;min-height:44px;margin-top:10px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--sidebar);color:#fff;font-family:inherit;font-size:13px;font-weight:600;line-height:1.3;cursor:pointer}
/* Сообщение об ошибке загрузки сцены. */
#back{text-decoration:none;font-family:inherit}
#fatal{top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 20px;color:var(--red);font-weight:600;display:none;max-width:90vw;box-shadow:var(--shadow)}
/* ---------- iPhone: уже 900 px или грубый указатель (палец) ---------- */
@media (max-width:899px),(pointer:coarse){
  #back{position:fixed;top:calc(8px + var(--st));left:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);font-size:20px;padding:0;z-index:7}
  #hud{left:58px;right:8px;top:calc(8px + var(--st));max-width:none;gap:6px;align-items:stretch}
  #tiles{gap:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:2px 0}
  .tile{background:none;border:0;box-shadow:none;border-radius:0;padding:5px 6px;flex:1 1 0;min-width:0;overflow:hidden;border-left:1px solid var(--border)}
  .tile:first-child{border-left:0}
  .tile.week{display:none}
  .tile .l{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile .v{font-size:14px;margin-top:0;overflow:hidden;text-overflow:ellipsis}
  .tile .l .x{display:none}
  .tile .s{display:none}
  .chip{font-size:11px;padding:3px 9px}
  #right{top:auto;left:8px;right:8px;width:auto;max-width:none;bottom:calc(8px + var(--sb))}
  #card{border-radius:16px;max-height:52vh;padding-top:24px;animation:up .25s ease}
  #card .handle{display:block;position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:#d7dee8;cursor:grab;touch-action:none}
  #card .handle:after{content:"";position:absolute;inset:-20px -60px}
  #card .x{width:40px;height:40px;top:6px;right:6px;font-size:18px}
  #card .x:after{content:"";position:absolute;inset:-4px}
  #card h2{font-size:17px;padding-right:44px}
}
/* ---------- iPhone лёжа: HUD слева, лента и карточка справа вверху, мир — между ними и панелью ---------- */
@media (max-width:899px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #hud{right:auto;width:calc(58% - 50px)}
  #right{top:calc(8px + var(--st));bottom:auto;left:auto;right:8px;width:40%}
  #card{max-height:calc(100vh - 80px - var(--sb))}
}
/* Карточка появляется на месте: даже первые кадры не перекрывают кнопки. */
@keyframes up{from{opacity:.72}to{opacity:1}}

/* Доводка v3: доступные цели касания и читаемые компактные панели. */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--controls-height:0px;--back-space:50px;--land-right:clamp(220px,calc((100vw - var(--sl) - var(--sr) - 28px)*.4),380px)}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:3px solid #8bb2ff;outline-offset:3px}
button:disabled{opacity:.38;cursor:default}
#card .x{width:44px;height:44px;top:5px;right:5px}
#card h2{padding-right:42px}
#card td:last-child{overflow-wrap:anywhere}
#right.sel #card{max-height:calc(100dvh - 120px)}
#back{position:fixed;top:14px;left:14px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;z-index:8;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:0;font-size:20px}
@media (min-width:900px) and (pointer:fine){
  #back{position:fixed;top:14px;left:14px;bottom:auto;transform:none}
  #right{left:70px;width:304px}
  #hud{max-width:calc(100vw - 400px)}
  .tile{min-width:125px;padding:10px 12px}
  .tile .v{font-size:22px}
  #card{max-height:calc(100dvh - 180px)}
}
@media (min-width:900px) and (max-width:1120px) and (pointer:fine){
  .tile.week{display:none}
}
@media (max-width:899px),(pointer:coarse){
  #back{top:calc(8px + var(--st));left:calc(8px + var(--sl));bottom:auto;transform:none}
  #hud{left:calc(58px + var(--sl));right:calc(8px + var(--sr))}
  #view-switch{margin-top:24px}
  .chip{max-width:calc(100% - 64px);font-size:10px;padding:3px 7px}
  #t-hanging{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #right{left:calc(8px + var(--sl));right:calc(8px + var(--sr));bottom:calc(8px + var(--sb))}
  #right.sel #card{max-height:min(52dvh,max(64px,calc(100dvh - var(--controls-height) - var(--st) - var(--sb) - 180px)))}
  #card .big b{font-size:18px}
  #card .x{width:44px;height:44px}
  #card .x:after{inset:0}
}
@media (max-width:899px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #hud{left:calc(8px + var(--sl) + var(--back-space));right:auto;width:calc(100vw - var(--sl) - var(--sr) - 28px - var(--land-right) - var(--back-space))}
  #view-switch{margin-top:0}
  #plant-preview{position:fixed;right:calc(8px + var(--sr));top:calc(60px + var(--st));width:220px}
  html:has(#right.sel) #plant-preview{display:none}
  #right{left:auto;right:calc(8px + var(--sr));bottom:auto;width:var(--land-right)}
  #right.sel #card{max-height:calc(100dvh - 16px - var(--st) - var(--sb))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
}

/* У самостоятельного iPhone-приложения нет родительской веб-панели. */
.native-app{--back-space:0px}
.native-app #back{display:none}
@media (max-width:899px),(pointer:coarse){
  .native-app #hud{left:calc(8px + var(--sl))}
}

/* Night palette preserves status hues and the same panel/touch dimensions. */
:root[data-theme="night"]{color-scheme:dark;--bg:#101e2c;--card:#192b3e;--text:#e1ebf6;--muted:#a0b3c9;--accent:#8dbbff;--border:#344b63;--green:#68d7a0;--yellow:#f5cb69;--red:#ff948c;--sidebar:#35547a;--soft:#233d59;--warn:#f5b968;--shadow:0 6px 20px #060f1a55,0 1px 2px #060f1a33}
[data-theme="night"] body{background:linear-gradient(#0d1929,#162938 72%)}
[data-theme="night"] #plant-preview,[data-theme="night"] #view-switch{background:var(--card)}
[data-theme="night"] #hover-tip,[data-theme="night"] .g,[data-theme="night"] #back{background:var(--card);color:var(--text)}
[data-theme="night"] .g-wait{color:var(--accent)}[data-theme="night"] .g-assigned{color:var(--yellow)}[data-theme="night"] .g-enroute{color:var(--warn)}[data-theme="night"] .g-delivered{color:var(--green)}[data-theme="night"] .g-overdue{color:var(--red)}
[data-theme="night"] .chip,[data-theme="night"] #card .st.c-overdue{background:#492e39;border-color:#70464b;color:var(--red)}
[data-theme="night"] #card .st.c-assigned,[data-theme="night"] #card .st.c-enroute{background:#494131}
[data-theme="night"] #card .st.c-delivered{background:#25473d}
[data-theme="night"] #card .st.c-none,[data-theme="night"] #card .x{background:#293d53}
[data-theme="night"] .mountain-mini{background:linear-gradient(#142d49,#274447)}
[data-theme="night"] .mountain-mini:before,[data-theme="night"] .mountain-mini:after{background:linear-gradient(135deg,#9fb4c6 0 24%,#4d6c85 25% 60%,#365653 61%)}
@media (max-width:374px){#view-switch{gap:1px}#view-switch button{min-width:64px;padding:0 7px;font-size:12px}}

@media (max-width:899px),(pointer:coarse){
  .demo-mode .chip{max-width:calc(100% - 98px)}
}

/* Financial tiles remain readable in both orientations. */
#tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;align-items:stretch}
.tile{min-width:0}
.tile.finance .l{white-space:normal;overflow:visible;text-overflow:clip;letter-spacing:0;line-height:1.2}
.tile.finance .v{white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;font-size:20px;line-height:1.18}
.tile.finance .s{display:block;font-size:10px;line-height:1.25;overflow-wrap:anywhere}
@media (min-width:900px) and (pointer:fine){
  #hud{width:min(850px,calc(100vw - 400px))}
  #tiles{gap:6px}
  .tile{min-width:0;padding:9px 10px}
}
@media (min-width:900px) and (max-width:1120px) and (pointer:fine){
  #tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile.finance .v{font-size:18px}
}
@media (max-width:899px),(pointer:coarse){
  :root{--controls-height:0px}
  #tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:2px 0}
  .tile{min-height:42px;padding:5px 7px}
  .tile:nth-child(2n+1){border-left:0}
  .tile:nth-child(n+3){border-top:1px solid var(--border)}
  .tile.finance{min-height:54px}
  .tile.finance .l{font-size:9.5px;line-height:1.15}
  .tile.finance .v{font-size:16px;line-height:1.15;margin-top:1px}
  .tile.finance .s{font-size:9px;line-height:1.2;margin-top:1px}
  .chip,.demo-mode .chip{max-width:100%}
  #view-switch{margin-top:0}
  #right{bottom:calc(8px + var(--sb))}
  html:has(#right.sel) #plant-preview{display:none}
  #right.sel #card{max-height:min(52dvh,max(100px,calc(100dvh - var(--st) - var(--sb) - 306px)))}
}
@media (max-width:899px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile{min-height:62px;padding:5px 6px}
  .tile:nth-child(n+3){border-top:0}
  .tile:nth-child(2n+1){border-left:1px solid var(--border)}
  .tile:first-child{border-left:0}
  .tile.finance .v{font-size:15px}
  #right{bottom:auto}
  #right.sel #card{max-height:calc(100dvh - 16px - var(--st) - var(--sb))}
}

/* Attribution remains with the upper interface; the lower map is unobstructed. */
#map-credit{position:static;align-self:flex-end;max-width:100%;margin:0;color:var(--muted);font-size:8px;line-height:1.25;opacity:.8;pointer-events:none;white-space:normal}
@media (min-width:900px) and (pointer:fine){
  #map-credit{position:fixed;top:18px;left:70px;right:auto;bottom:auto;max-width:260px}
  #right{top:42px}
  #right.sel #card{max-height:calc(100dvh - 56px)}
}
@media (max-width:899px),(pointer:coarse){
  #right{bottom:calc(8px + var(--sb))}
  #right.sel #card{max-height:min(52dvh,max(100px,calc(100dvh - var(--st) - var(--sb) - 306px)))}
}
@media (max-width:899px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #right{bottom:auto}
  #right.sel #card{max-height:calc(100dvh - 16px - var(--st) - var(--sb))}
}

/* Общая система панелей: ясные цифры, спокойные цвета, раскрываемые детали. */
:root{--text:#223641;--muted:#6b7f89;--border:#dfe7ea;--card:#ffffff;--soft:#f3f7f8;--sidebar:#244c51;--green:#227c62;--shadow:0 8px 28px #233b4a12,0 1px 3px #233b4a08}
#hud{gap:8px}
#tiles{gap:6px}
.tile{display:flex;flex-direction:column;justify-content:flex-start;border-radius:16px;min-height:86px;padding:12px}
.tile .l{font-size:11px;letter-spacing:0;text-transform:none;line-height:1.25}
.tile .v{margin-top:6px;font-size:18px;line-height:1.2;font-weight:650;letter-spacing:-.035em;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.tile .s{margin-top:auto;padding-top:5px;font-size:10px;line-height:1.3}
.tile.finance .v{margin-top:6px;font-size:18px;font-weight:700;letter-spacing:-.035em;line-height:1.18}
.tile.finance .s{font-size:9.5px;letter-spacing:0}
.tile.finance{background:var(--card);box-shadow:var(--shadow)}
.tile.profit .v{color:var(--green)}
.tile.profit .v[data-sign="negative"]{color:var(--red)}
.tile.profit .v[data-sign="unknown"]{color:var(--muted)}
.chip{box-shadow:none;border-radius:10px;font-size:11px;font-weight:500;padding:5px 9px;line-height:1.3}
.chip i{width:6px;height:6px;animation:none}
#view-switch{border-radius:14px;gap:2px;padding:3px}
#view-switch button{border-radius:10px;font-size:12px;font-weight:600}
#view-switch button[aria-pressed="true"]{box-shadow:0 2px 4px #18343816}
.map-tools{display:flex;align-self:flex-end;align-items:flex-start;gap:6px;max-width:100%;min-width:0;pointer-events:none}
.map-tools #view-switch{min-width:0;margin-top:0}
#climate-settings{position:relative;flex:none;pointer-events:auto}
#climate-settings>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:var(--shadow);color:var(--text);cursor:pointer;font-size:26px;line-height:1}
#climate-settings>summary::-webkit-details-marker{display:none}
#climate-settings>summary:focus-visible{outline:3px solid #8bb2ff;outline-offset:3px}
#climate-settings[open]>summary{background:var(--soft)}
#climate-settings #climate-controls{position:absolute;right:0;top:58px;width:304px;max-width:calc(100vw - var(--sl) - var(--sr) - 24px);padding:8px;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 30px #233b4a20;z-index:9}
#climate-settings:not([open]) #climate-controls{display:none}
#climate-controls label{border-radius:13px;box-shadow:var(--shadow)}
#climate-controls label>span{font-size:9px;left:10px;top:7px}
#climate-controls select{font-weight:500;padding-left:9px;min-height:52px}
#plant-preview{border-radius:14px}
#card{border-radius:20px;padding:18px 18px 12px;box-shadow:0 16px 42px #1a35451c,0 2px 6px #1a354508}
#card-body{scrollbar-width:thin;scrollbar-color:var(--border) transparent;scrollbar-gutter:stable}
#card .eyebrow{color:var(--muted);font-size:9px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;padding-right:34px}
#card h2{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.03em;padding-right:30px}
#card .sub{font-size:11px;line-height:1.4;margin:5px 0 12px;padding-right:10px}
#card .st{font-size:10px;line-height:1.3;font-weight:600;border-radius:9px;padding:5px 8px 5px 5px;margin:0 0 12px}
#card .st span{min-width:0}
#card .st .g{background:transparent;border:0;box-shadow:none;width:14px;height:14px}
#card .big{gap:6px;margin:0 0 12px}
#card .big>div{border:0;border-radius:12px;background:var(--soft);padding:10px 8px}
#card .big b{font-size:20px;line-height:1.15;font-weight:700;letter-spacing:-.035em}
#card .big i{display:block;font-size:10px;line-height:1.35;margin-top:5px}
#card .card-focus{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;min-width:0}
#card .card-focus>span{font-size:10px;color:var(--muted)}
#card .card-focus>strong{font-size:12px;line-height:1.45;font-weight:600;overflow-wrap:anywhere}
#card .x{background:var(--soft);color:var(--muted);top:7px;right:7px;border-radius:12px;font-size:20px;font-weight:400}
#card .note{font-size:10px;line-height:1.5;margin:8px 0 0}
#card .route-action{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0 0 10px;padding:10px 13px;font-size:12px;border:0;border-radius:12px;background:var(--sidebar);transition:filter .15s ease}
#card .route-action:hover{filter:brightness(1.12)}
#card .route-action>span:last-child{font-size:17px;line-height:1}
#card .card-details{border-top:1px solid var(--border);margin-top:2px}
#card .card-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;font-size:11px;font-weight:600;line-height:1.35;color:var(--muted);user-select:none}
#card .card-details summary::-webkit-details-marker{display:none}
#card .card-details summary>span{font-size:16px;line-height:1;transition:transform .16s ease}
#card .card-details[open] summary>span{transform:rotate(180deg)}
#card .card-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
#card .card-details-body{padding-bottom:5px}
#card table{font-size:11px;line-height:1.45}
#card td{padding:7px 0}
#card tr:first-child td{border-top:0}
#card td:first-child{width:47%;padding-right:12px}
#card td:last-child{font-weight:600}
#card .detail-label{color:var(--muted);font-size:10px;margin-top:12px}
#card .route-stops{margin:4px 0 0}
#card .route-stops li{font-size:11px;padding:8px 0;gap:8px}
#card .route-stops li>span{min-width:0}
#card .route-stops small{display:block;font-size:10px;line-height:1.4;color:var(--muted);margin-top:2px}
:root[data-theme="night"]{--card:#1a2d3c;--text:#e4edf1;--muted:#9eafb9;--border:#344b59;--soft:#233b49;--sidebar:#366e71;--green:#79d5b1;--shadow:0 8px 28px #06111d33,0 1px 3px #06111d22}
[data-theme="night"] #card .x{background:var(--soft)}
@media (min-width:900px) and (pointer:fine){
  #right{width:322px}
  #hud{width:min(850px,calc(100vw - 420px));max-width:calc(100vw - 420px)}
  #card{max-height:calc(100dvh - 56px)}
}
@media (min-width:900px) and (max-width:1120px) and (pointer:fine){
  .tile{padding:10px;min-height:88px}
  .tile.finance .v{font-size:18px}
  .tile .v{font-size:18px}
  .tile.week{display:none}
}
@media (max-width:899px),(pointer:coarse){
  #hud{gap:6px}
  #tiles{gap:0;overflow:hidden;border-radius:15px;padding:0}
  .tile{padding:8px 9px;min-height:44px;border-radius:0;background:transparent;box-shadow:none}
  .tile.finance{background:transparent;box-shadow:none;min-height:72px}
  .tile.finance .l{font-size:10px;line-height:1.3}
  .tile.finance .v{font-size:18px;line-height:1.15;margin-top:4px}
  .tile.finance .s{font-size:9px;line-height:1.25;padding-top:4px;margin-top:auto}
  .tile .l{font-size:10px;line-height:1.2}
  .tile .v{font-size:14px;margin-top:3px;line-height:1.2}
  .tile.week{display:none}
  #view-switch button{min-height:42px}
  .map-tools{width:304px;max-width:100%;gap:5px}
  .map-tools #view-switch{flex:1;align-self:auto}
  .map-tools #view-switch button{flex:1;min-width:0;padding:0 9px}
  .map-tools #view-switch #b-projection{flex:0 0 42px;padding:0 6px;min-width:42px}
  #climate-settings>summary{width:48px;height:50px}
  #climate-settings #climate-controls{top:56px}
  #climate-controls{gap:5px}
  #climate-controls select{min-height:48px}
  #climate-controls label>span{top:5px}
  #right.sel #card{max-height:min(52dvh,max(100px,calc(100dvh - var(--st) - var(--sb) - 264px)))}
  #card{border-radius:20px;padding:22px 16px 6px}
  #card h2{font-size:19px;padding-right:34px}
  #card .eyebrow{font-size:9px;margin-bottom:3px}
  #card .sub{margin:4px 0 8px}
  #card .st{margin-bottom:9px}
  #card .big{margin-bottom:9px}
  #card .big>div{padding:8px}
  #card .big b{font-size:19px}
  #card .card-focus{margin-bottom:9px}
  #card .handle{height:4px;width:32px;margin-left:-16px;top:7px;background:var(--border)}
  #card .x{top:7px;right:7px}
}
@media (max-width:374px){
  .tile{padding:7px}
  .tile.finance .v{font-size:16px}
  .tile.finance .l{font-size:9px}
  .tile.finance .s{font-size:8px}
  #card .big b{font-size:17px}
}
@media (max-width:899px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{min-height:39px;padding:5px 8px}
  .tile.finance{min-height:63px}
  .tile.finance .v{font-size:16px;margin-top:3px}
  .tile.finance .s{font-size:8px;padding-top:2px}
  .tile:nth-child(n+3){border-top:1px solid var(--border)}
  .tile:nth-child(2n+1){border-left:0}
  #climate-controls{width:100%}
  #climate-controls select{min-height:44px;font-size:11px}
  #view-switch{align-self:flex-start;max-width:100%;width:100%}
  #view-switch button{min-width:0;flex:1;padding:0 6px;min-height:40px}
  #view-switch #b-projection{flex:0 0 44px}
  .map-tools{width:100%}
  #climate-settings>summary{height:48px;width:44px}
  #climate-settings #climate-controls{top:54px;width:280px}
  #right.sel #card{max-height:calc(100dvh - 16px - var(--st) - var(--sb))}
  #card{padding:14px 12px 4px}
  #card .handle{display:none}
  #card h2{font-size:18px}
  #card .big b{font-size:17px}
}