:root{
    --sea:#DCEDF2; --deep:#0F3A4A; --land:#F2E9D8; --border:#B99F73;
    --panel:#FFFFFF; --accent:#E85D2F; --muted:#557A87; --page:#EFF6F8;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--page); color:var(--deep);
    font-family:"Segoe UI","Avenir Next","Helvetica Neue",Arial,sans-serif;
    line-height:1.55; padding:26px 18px 70px;
  }
  .wrap{max-width:1320px; margin:0 auto;}
  .eyebrow{
    font-family:ui-monospace,Consolas,monospace; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); margin-bottom:6px;
  }
  h1{font-weight:800; font-size:clamp(28px,4.5vw,42px); line-height:1.05; letter-spacing:-.01em;}
  .intro{max-width:720px; margin-top:10px; font-size:16px; color:#335866;}
  .intro b{color:var(--deep);}

  .controls{
    display:flex; flex-wrap:wrap; gap:12px 16px; margin:22px 0 14px; align-items:center;
  }
  .controls label{font-weight:700; font-size:14.5px;}
  .theme-wrap{display:none; align-items:center; gap:12px;}
  /* Lift the legend clear of the attribution text bar at the view's bottom edge */
  #viewDiv .esri-legend{ margin-bottom:26px; max-height:360px; width:180px; min-width:0; }
  #viewDiv .esri-legend .esri-legend__service{ padding:8px 10px; }
  #themeSelect{min-width:200px;}
  select{
    font:inherit; font-weight:700; color:var(--deep); background:var(--panel);
    border:2px solid var(--deep); border-radius:10px; padding:10px 14px; cursor:pointer;
    min-width:280px;
  }
  .badge{
    font-family:ui-monospace,Consolas,monospace; font-size:12px; padding:5px 12px;
    border-radius:999px; border:1.5px solid var(--deep); background:var(--panel);
  }
  .badge.busy{background:#FFF6DC; border-color:#D9B24A;}

  .stage{
    background:var(--panel); border:2px solid var(--deep); border-radius:14px;
    overflow:hidden; box-shadow:5px 5px 0 rgba(15,58,74,.10);
  }
  #viewDiv{width:100%; height:520px; background:var(--sea); display:none; position:relative;}
  #viewDiv .esri-view-root{position:relative; width:100%; height:100%; overflow:hidden;}
  #viewDiv .esri-view-surface{position:absolute; top:0; left:0; right:0; bottom:0;}
  #viewDiv .esri-view-surface canvas{position:absolute; top:0; left:0; width:100%; height:100%; display:block;}
  #fallbackCanvas{display:none; width:100%; height:auto; background:var(--panel);}
  .blurb{
    padding:13px 16px; font-size:14px; border-top:2px dashed #C6D9E0;
  }
  .blurb b{color:var(--accent);}

  .status{
    margin:14px 0; padding:12px 16px; border-radius:10px; font-size:14px;
    background:#FFF6DC; border:2px solid #D9B24A; display:none;
  }
  .status.show{display:block;}
  .debug{
    margin:0 0 14px; background:#12271C; border-radius:10px; padding:10px 14px; display:none;
  }
  .debug.show{display:block;}
  .debug-title{
    font-family:ui-monospace,Consolas,monospace; font-size:12px; color:#7CE28A;
    font-weight:700; margin-bottom:4px;
  }
  .debug-title span{font-weight:400; opacity:.6;}
  .debug pre{
    font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:#B8E6C0;
    white-space:pre-wrap; word-break:break-word; max-height:150px; overflow:auto; margin:0;
  }

  .note{
    margin-top:26px; background:var(--panel); border:2px solid var(--deep);
    border-radius:14px; padding:20px 22px; max-width:840px;
    box-shadow:5px 5px 0 rgba(15,58,74,.10);
  }
  .note h2{font-size:20px; font-weight:800; margin-bottom:8px;}
  .note p{font-size:14.5px; margin-bottom:10px;}
  .note ol{padding-left:22px;}
  .note li{margin-bottom:8px; font-size:14.5px;}
  :focus-visible{outline:3px solid var(--accent); outline-offset:2px;}