:root{
    --shell:#354a5f; --brand:#0a6ed1; --brand-dark:#0854a0;
    --bg:#f5f6f7; --surface:#ffffff; --border:#d9d9d9; --border-soft:#e5e5e5;
    --text:#32363a; --text-2:#6a6d70; --hover:#f0f0f0; --selected:#ebf5fe;
    --success:#107e3e; --warning:#e9730c; --error:#bb0000;
    --font:"72","72full",-apple-system,"Segoe UI",Arial,Helvetica,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

  .shellbar{height:60px;background:var(--surface);color:var(--text);display:flex;align-items:center;gap:12px;
    padding:0 16px;flex:0 0 auto;border-bottom:4px solid #275498}
  /* the wordmark is dark blue, so it sits on a white chip rather than the dark bar */
  .shellbar .logo{height:28px;width:auto;display:block}
  .shellbar h1{font-size:15px;font-weight:600;margin:0}
  .shellbar .sub{font-size:12px;color:#c6ccd3;margin-left:auto;font-variant-numeric:tabular-nums}

  .app{display:flex;height:calc(100% - 60px);position:relative}
  .panel{width:340px;flex:0 0 340px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
  #map{flex:1;min-width:0;background:#e9eef2;position:relative}

  .section{padding:11px 14px;border-bottom:4px solid var(--border);flex:0 0 auto}
  .section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);margin:0 0 8px}
  input[type=search]{width:100%;height:32px;padding:0 10px;font:inherit;font-size:13px;color:var(--text);background:var(--surface);border:1px solid #89919a;border-radius:4px;outline:none}
  input[type=search]:focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}

  /* ---- breadcrumb ---- */
  .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:9px 0 0;font-size:12px;line-height:1.5}
  .crumb{background:none;border:none;font:inherit;color:var(--brand);padding:1px 4px;border-radius:3px;cursor:pointer}
  .crumb:hover{background:var(--selected);text-decoration:underline}
  .crumb[aria-current]{color:var(--text-2);cursor:default;font-weight:600}
  .crumb[aria-current]:hover{background:none;text-decoration:none}
  .crumb-sep{color:#b9bec4;font-size:11px}

  /* ---- hierarchy list ---- */
  .hier{list-style:none;margin:8px 0 0;padding:0;max-height:210px;overflow-y:auto}
  .hier li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;border-left:3px solid transparent}
  .hier li:hover{background:var(--hover)}
  .hier li[aria-selected=true]{background:var(--selected);border-left-color:var(--brand)}
  .hier .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
  .hier li[aria-selected=true] .nm{font-weight:600}
  .badge{flex:0 0 auto;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);background:var(--bg);border:1px solid var(--border-soft);border-radius:9px;padding:1px 6px}
  .kids{flex:0 0 auto;color:#b9bec4;font-size:14px;line-height:1}
  .hier .empty{padding:10px 9px;font-size:12px;color:var(--text-2);cursor:default}
  .hier .empty:hover{background:none}

  /* ---- scroll area ---- */
  .scroll{flex:1;min-height:0;overflow-y:auto;padding:6px 8px 18px}
  .placeholder{padding:22px 18px;text-align:center;color:var(--text-2);font-size:13px;line-height:1.5}

  details.node{margin:1px 0}
  details.node > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:4px;user-select:none}
  details.node > summary::-webkit-details-marker{display:none}
  details.node > summary:hover{background:var(--hover)}
  .chev{flex:0 0 auto;width:10px;height:10px;border-right:1.6px solid var(--text-2);border-bottom:1.6px solid var(--text-2);transform:rotate(-45deg);transition:transform .15s ease;margin-left:2px}
  details[open] > summary .chev{transform:rotate(45deg)}
  .node-label{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .season > summary .node-label{font-weight:600}
  .count{font-size:11px;color:var(--text-2);background:var(--bg);border:1px solid var(--border-soft);border-radius:9px;padding:0 6px;line-height:16px;font-variant-numeric:tabular-nums}
  details.season{border-bottom:1px solid var(--border-soft);padding-bottom:2px}
  details.product{margin-left:14px}
  .leaves{margin-left:28px}

  .leaf{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:4px;cursor:pointer}
  .leaf:hover{background:var(--hover)}
  .leaf input{position:absolute;opacity:0;width:0;height:0}
  .box{flex:0 0 auto;width:15px;height:15px;border:1px solid #89919a;border-radius:2px;background:#fff;display:grid;place-items:center;transition:background .12s,border-color .12s}
  .leaf input:checked + .box{background:var(--brand);border-color:var(--brand)}
  .box::after{content:"";width:7px;height:3.5px;border-left:1.8px solid #fff;border-bottom:1.8px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
  .leaf input:checked + .box::after{opacity:1}
  .leaf input:focus-visible + .box,.leaf input:focus-visible + .radio{box-shadow:0 0 0 2px var(--brand)}
  .radio{flex:0 0 auto;width:15px;height:15px;border:1px solid #89919a;border-radius:50%;background:#fff;display:grid;place-items:center}
  .radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .12s}
  .leaf input:checked + .radio{border-color:var(--brand)}
  .leaf input:checked + .radio::after{transform:scale(1)}
  .grp{display:inline-grid;place-items:center;flex:0 0 auto;cursor:pointer}
  .grp input{position:absolute;opacity:0;width:0;height:0}
  .grp input:checked + .box,.grp input:indeterminate + .box{background:var(--brand);border-color:var(--brand)}
  .grp input:checked + .box::after{opacity:1}
  .grp input:indeterminate + .box::after{
    opacity:1;width:7px;height:0;border-left:0;border-bottom:2px solid #fff;transform:none;
  }
  .grp input:focus-visible + .box{box-shadow:0 0 0 2px var(--brand)}
  .swatch{flex:0 0 auto;width:30px;height:10px;border-radius:2px;border:1px solid rgba(0,0,0,.18)}
  .line{flex:0 0 auto;width:30px;display:grid;place-items:center}
  .line i{display:block;width:30px;border-top-style:solid}
  .leaf-label{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .status{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:transparent}
  .status[data-s=loading]{background:var(--warning);animation:pulse 1s ease-in-out infinite}
  .status[data-s=ok]{background:var(--success)}
  .status[data-s=error]{background:var(--error)}
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.status[data-s=loading]{animation:none}.chev,.radio::after{transition:none}}

  #boundaryGroup{border-top:1px solid var(--border-soft);margin-top:10px;padding-top:6px}
  /* the last crop season already draws a rule; without this it doubles up
     against the border-top above */
  #treeWrap details.season:last-child{border-bottom:none}


  .ol-viewport{position:relative}
  .ol-zoom{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:1px;z-index:5}
  .ol-zoom button{width:30px;height:30px;font:inherit;font-size:17px;line-height:1;color:var(--text);background:rgba(255,255,255,.96);border:1px solid var(--border);cursor:pointer}
  .ol-zoom button:first-child{border-radius:4px 4px 0 0}
  .ol-zoom button:last-child{border-radius:0 0 4px 4px}
  .ol-zoom button:hover{color:var(--brand)}
  .ol-attribution{position:absolute;right:0;bottom:0;z-index:5;background:rgba(255,255,255,.85);padding:2px 6px;font-size:11px}
  .ol-attribution ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
  .ol-scale-line{position:absolute;left:12px;bottom:12px;z-index:5;background:rgba(255,255,255,.85);border:1px solid var(--border);border-top:none;font-size:11px;padding:1px 4px}
  .ol-scale-line-inner{border:1px solid var(--text-2);border-top:none;text-align:center}

  .notice{margin:18px 10px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-left:3px solid var(--warning);border-radius:4px;text-align:left}
  .notice h3{margin:0 0 7px;font-size:13px;font-weight:700;color:var(--text)}
  .notice p{margin:0 0 9px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
  .notice code{display:block;background:var(--bg);border:1px solid var(--border-soft);border-radius:3px;padding:7px 9px;margin:7px 0;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--text);user-select:all}

  @media (max-width:760px){
    .app{flex-direction:column}
    .panel{width:auto;flex:0 0 auto;max-height:52%;border-right:none;border-bottom:1px solid var(--border)}
  }

/* ---- click popup ---- */
.popup{
  position:absolute;bottom:18px;left:-155px;width:310px;
  background:var(--surface);border-radius:8px;overflow:hidden;
  box-shadow:0 10px 30px rgba(16,24,32,.22),0 2px 6px rgba(16,24,32,.12);
  font-size:13px;color:var(--text);
}
.popup::after{
  content:"";position:absolute;bottom:-8px;left:50%;margin-left:-8px;
  width:0;height:0;border:8px solid transparent;border-bottom:0;
  border-top-color:var(--surface);filter:drop-shadow(0 3px 2px rgba(16,24,32,.12));
}

.popup-head{
  padding:10px 15px;
  background:linear-gradient(135deg,var(--shell) 0%,#46607a 100%);color:#fff;
}
.popup-head h3{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.popup-rows{
  display:grid;grid-template-columns:auto 1fr;gap:5px 14px;
  margin:0;padding:11px 15px;border-bottom:1px solid var(--border-soft);
}
.popup-rows dt{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-2);align-self:center;
}
.popup-rows dd{
  margin:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.popup-x{
  position:absolute;top:6px;right:10px;width:22px;height:22px;line-height:1;
  font:inherit;font-size:17px;color:rgba(255,255,255,.75);background:none;border:none;
  border-radius:4px;cursor:pointer;
}
.popup-x:hover{background:rgba(255,255,255,.16);color:#fff}

.popup table{width:100%;border-collapse:collapse;font-size:12px}
.popup thead th{
  text-align:left;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-2);padding:8px 15px 6px;border-bottom:1px solid var(--border-soft);
}
.popup tbody td{padding:7px 15px;border-bottom:1px solid var(--border-soft)}
.popup tbody tr:last-child td{border-bottom:none}
.popup tbody tr:hover{background:var(--selected)}
.popup tbody td:last-child{font-weight:600;white-space:nowrap}
.popup .dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;
  vertical-align:baseline;box-shadow:0 0 0 1px rgba(0,0,0,.14);
}
.popup-an{
  display:block;width:100%;padding:9px 15px;font:inherit;font-size:12px;font-weight:600;
  color:var(--brand);background:var(--bg);border:none;border-top:1px solid var(--border-soft);
  cursor:pointer;text-align:center;
}
.popup-an:hover{background:var(--selected);color:var(--brand-dark)}
.popup-an:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.popup-none{margin:0;padding:14px 15px;color:var(--text-2);font-size:12.5px;text-align:center}

/* ---- panel footer ---- */
.brand{
  flex:0 0 auto;text-align:center;padding:10px 14px;
  border-top:1px solid var(--border-soft);background:var(--surface);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
}

/* ---- analytics overlay ---- */
.analytics{
  position:absolute;top:14px;right:14px;width:300px;max-height:calc(100% - 28px);
  display:flex;flex-direction:column;z-index:6;
  background:var(--surface);border-radius:6px;
  box-shadow:0 6px 22px rgba(16,24,32,.20),0 1px 3px rgba(16,24,32,.10);
}
.an-head{
  display:flex;align-items:baseline;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--border-soft);
}
.an-head h2{
  margin:0;font-size:14px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.an-head .badge{flex:0 0 auto}
.an-toggle{
  flex:0 0 auto;width:22px;height:22px;padding:0;line-height:1;font:inherit;font-size:15px;
  color:var(--text-2);background:none;border:none;border-radius:4px;cursor:pointer;
}
.an-toggle:hover{background:var(--hover);color:var(--text)}
.an-body{overflow-y:auto;min-height:0}
.an-group{padding:0 14px 12px}
.an-group + .an-group{border-top:1px solid var(--border-soft)}
.an-season{
  position:sticky;top:0;z-index:1;              /* stays put while its block scrolls */
  margin:0 -14px 2px;padding:7px 14px;
  background:var(--bg);border-bottom:1px solid var(--border-soft);
  font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-2);
}
.analytics[data-collapsed] .an-body{display:none}

.an-sec{margin-top:12px}
.an-sec h3{
  margin:0 0 2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-2);
}
.an-sub{margin:0 0 8px;font-size:11px;color:var(--text-2)}
.an-total{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

/* horizontal bars: crop breakdown */
.an-row{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:8px;margin:5px 0}
.an-row .lbl{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-row .track{background:var(--bg);border-radius:3px;height:14px;overflow:hidden}
.an-row .fill{display:block;height:100%;border-radius:3px;min-width:2px}
.an-row .val{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}

/* vertical bars: progress over time */
.an-cols{display:flex;gap:8px;height:104px;margin:10px 0 4px}
.an-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-width:0}
.an-col .bar{background:var(--brand);border-radius:3px 3px 0 0;min-height:2px;transition:height .2s}
.an-col .cap{
  font-size:9.5px;color:var(--text-2);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.an-col .num{font-size:10px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}
.an-delta{font-size:11px;color:var(--text-2);margin:6px 0 0}
.an-delta b{color:var(--success)}
.an-none{margin:14px 0 2px;font-size:12.5px;color:var(--text-2);text-align:center}

@media (max-width:760px){ .analytics{display:none} }

/* ---- sign-in ---- */
.login-page{display:grid;place-items:center;min-height:100%;background:var(--bg)}
.login{
  width:320px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border-radius:8px;padding:28px 26px 26px;
  box-shadow:0 10px 30px rgba(16,24,32,.14),0 1px 3px rgba(16,24,32,.08);
  border-top:4px solid #275498;
}
.login-logo{height:26px;width:auto;align-self:center}
.login-title{margin:0;text-align:center;font-size:13px;color:var(--text-2)}
.login-field{display:flex;flex-direction:column;gap:5px}
.login-field span{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);
}
.login-field input{
  height:34px;padding:0 10px;font:inherit;font-size:13px;color:var(--text);
  background:var(--surface);border:1px solid #89919a;border-radius:4px;outline:none;
}
.login-field input:focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.login-error{
  margin:0;padding:7px 10px;border-radius:4px;font-size:12px;
  color:var(--error);background:#ffeaea;border:1px solid #f5bcbc;
}
.login-btn{
  height:36px;font:inherit;font-size:13px;font-weight:600;color:#fff;
  background:var(--brand);border:none;border-radius:4px;cursor:pointer;
}
.login-btn:hover{background:var(--brand-dark)}
.login-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.signout{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--text-2);
}
.signout b{color:var(--text);font-weight:600}
.signout button{
  font:inherit;font-size:12px;color:var(--brand);background:none;border:none;
  padding:4px 8px;border-radius:4px;cursor:pointer;
}
.signout button:hover{background:var(--selected);color:var(--brand-dark)}