/* Leaf Peeping Forecast styles. Tokens from docs/design-tokens.json */
:root{
  --ink:#0F172A; --ink2:#475569; --muted:#64748b; --faint:#94a3b8;   /* --faint is for icons and rules only; text needs --muted for AA contrast */
  --line:#e2e8f0; --line2:#f1f5f9; --bg:#f6f5f1; --card:#ffffff; --mapbg:#eef1f3;
  --forest:#16694E; --forest-dk:#0F5340; --rust:#C4472F;
  --s0:#16694E; --s1:#B4D62E; --s2:#EFA00F; --s3:#E4611B; --s4:#C81E2E; --s5:#6E3B24;
  --none:#d4d8d3;
  --r-sm:.5rem; --r-md:1rem; --r-lg:1.5rem; --r-pill:9999px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;font-weight:400;
     color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;letter-spacing:-.02em;font-weight:700;margin:0;line-height:1.15;color:var(--ink)}
a{color:var(--forest);text-decoration:none;font-weight:500}
a:hover{color:var(--forest-dk)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--forest);outline-offset:1px}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}

.app{display:grid;grid-template-rows:auto 1fr;height:100vh;height:100dvh}

/* header */
header{display:flex;align-items:center;gap:20px;padding:12px 20px;background:var(--card);
       border-bottom:1px solid var(--line);position:relative;z-index:40}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:26px;width:auto;display:block}
.brand .rule{width:1px;height:28px;background:var(--line)}
.brand h1{font-size:18px;white-space:nowrap}
.brand .sub{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.01em;white-space:nowrap}
.search{position:relative;flex:1;max-width:340px;margin-left:auto}
.search input{width:100%;font:inherit;font-size:14px;padding:9px 14px 9px 36px;border:1px solid var(--line);
              border-radius:var(--r-pill);background:var(--bg);color:var(--ink);outline:none}
.search input:focus-visible{outline:2px solid var(--forest);outline-offset:1px;background:#fff}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint)}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);
         border-radius:var(--r-md);box-shadow:0 20px 25px -5px rgba(15,23,42,.12);overflow:hidden;display:none;z-index:50}
.results.on{display:block;max-height:min(360px,60vh);overflow-y:auto;overscroll-behavior:contain}
.results button.active{background:var(--line2)}
.results .more{padding:8px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line2)}
.results button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:9px 14px;font-size:14px}
.results button:hover{background:var(--line2)}
.results span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.hbtns{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:9px 16px;
     border-radius:var(--r-pill);transition:all .2s ease;white-space:nowrap}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:var(--forest-dk);box-shadow:0 10px 15px -3px rgba(22,105,78,.3);color:#fff}

/* main */
.main{display:grid;grid-template-columns:minmax(0,1fr) 396px;min-height:0}
.mapwrap{position:relative;min-width:0;background:var(--mapbg);overflow:hidden}
#map{position:absolute;inset:0;display:block;width:100%;height:100%}
#map:focus,#map:focus-visible{outline:none} /* the keyboard focus ring is handled inside the component, see app.js */
#map,#map *,.zoom button,.ramp button,.sheet-handle{-webkit-tap-highlight-color:transparent}
#map .esri-view{background:var(--mapbg)}
.esri-attribution{font-family:inherit;font-size:10px;background:rgba(255,255,255,.7);border-radius:0 0 0 var(--r-sm)}
.esri-ui-top-right{top:0!important;right:0!important}

.float{position:absolute;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
       border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 4px 6px -1px rgba(15,23,42,.1)}
.zoom{top:14px;left:14px;display:flex;flex-direction:column;overflow:hidden;z-index:10}
.zoom button{width:36px;height:36px;display:grid;place-items:center;font-size:17px;color:var(--ink2);font-weight:500}
.zoom button+button{border-top:1px solid var(--line)}
.zoom button:hover{background:var(--line2);color:var(--forest)}
.zoom button.busy svg{animation:sp .9s linear infinite;color:var(--forest)}
.zoom button[hidden]{display:none}
#status{cursor:default}

#status{left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;padding:12px 16px;font-size:13.5px;
        color:var(--ink2);display:flex;gap:10px;align-items:center;max-width:min(420px,90%)}
#status.hidden{display:none}
#status.err{color:var(--rust)}
.spin{width:16px;height:16px;flex:none;border:2px solid var(--line);border-top-color:var(--forest);border-radius:50%;animation:sp .8s linear infinite}
#status.err .spin{display:none}
@keyframes sp{to{transform:rotate(360deg)}}

.legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;padding-top:9px;border-top:1px solid var(--line)}
.legend .row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2);font-weight:500;white-space:nowrap}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(15,23,42,.16)}
.legend .foot{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.legend .sw.dot{border-radius:50%;background:#D7263D;box-shadow:0 0 0 2px #FFD23F}

/* leaf report card */
.sighting{width:280px;padding:14px 14px 12px;z-index:32;display:grid;gap:6px}
.sighting[hidden]{display:none}
.sighting .close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--line2);color:var(--ink2);font-size:15px;display:grid;place-items:center}
.sighting .close:hover{background:var(--line)}
.sighting .when{font-size:13px;font-weight:600;color:var(--ink);padding-right:28px}
.sighting .photos{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:4px}
.sighting .photos a{flex:none;scroll-snap-align:start}
.sighting .photos img{display:block;width:252px;height:190px;object-fit:cover;border-radius:var(--r-sm);background:var(--line2)}
.sighting .ph-loading{width:252px;height:190px;display:grid;place-items:center;background:var(--line2);border-radius:var(--r-sm)}
.sighting .fn{margin-top:4px;font-size:11.5px}
.sighting .empty{margin:0;font-size:12.5px}
@media (max-width: 900px){
  .sighting{left:10px!important;right:10px;width:auto;top:auto!important;bottom:140px}
  .sighting .photos img,.sighting .ph-loading{width:100%;height:200px}
}

.tip{position:absolute;pointer-events:none;background:#0F172A;color:#fff;font-size:12px;font-weight:500;
     padding:7px 10px;border-radius:var(--r-sm);opacity:0;transition:opacity .12s;z-index:30;white-space:nowrap}
.tip b{font-weight:600;display:block;font-size:13px}
.tip i{font-style:normal;opacity:.7}

/* timeline card */
.time{left:14px;right:14px;bottom:34px;padding:10px 16px 12px;display:grid;gap:6px;z-index:10;--thumb:18px}   /* sits above the map's attribution strip */
.time .top{display:flex;align-items:center;gap:12px}
.time .now{font-size:14px;font-weight:700;letter-spacing:-.01em}
.time .now span{font-weight:500;color:var(--muted);margin-left:6px}
#wkShort{display:none}
.ctrls{display:flex;align-items:center;gap:2px;margin-left:auto}
.ctrls button{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink2)}
.ctrls button:hover{background:var(--line2);color:var(--forest)}
.ctrls button.play{background:var(--forest);color:#fff}
.ctrls button.play:hover{background:var(--forest-dk);color:#fff}
.ctrls svg{width:15px;height:15px;fill:currentColor}
.track{position:relative;height:30px}
.track .bar{position:absolute;top:9px;left:0;right:0;height:5px;border-radius:var(--r-pill);
            background:linear-gradient(90deg,var(--s0),var(--s1),var(--s2),var(--s3),var(--s4),var(--s5));opacity:.28}
.track .fill{position:absolute;top:9px;left:0;height:5px;border-radius:var(--r-pill);overflow:hidden;transition:width .25s ease}
.track .fill i{position:absolute;top:0;left:0;height:100%;width:var(--track-w,100%);
               background:linear-gradient(90deg,var(--s0),var(--s1),var(--s2),var(--s3),var(--s4),var(--s5))}
.track input{position:absolute;top:0;left:0;width:100%;height:24px;margin:0;-webkit-appearance:none;appearance:none;background:none;outline:none}
.track input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);border-radius:50%;
     background:#fff;border:3px solid var(--forest);box-shadow:0 1px 4px rgba(15,23,42,.3);cursor:pointer}
.track input::-moz-range-thumb{width:var(--thumb);height:var(--thumb);border-radius:50%;background:#fff;
     border:3px solid var(--forest);box-shadow:0 1px 4px rgba(15,23,42,.3);cursor:pointer}
.ticks{position:relative;height:14px;font-size:10.5px;color:var(--muted);font-weight:500}
.ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ticks span.on{color:var(--forest);font-weight:700}

/* panel */
.panel{background:var(--card);border-left:1px solid var(--line);overflow-y:auto;position:relative}
.panel-in{padding:22px 24px 40px}
.p-head{display:flex;align-items:flex-start;gap:12px}
.p-head h2{font-size:26px;line-height:1.1;flex:1}
.p-head .close{display:none}
.p-state{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#fff;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12);
      padding:5px 12px;border-radius:var(--r-pill);letter-spacing:.01em}
.statusrow{display:flex;align-items:center;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.statusrow .wk{font-size:12.5px;color:var(--muted);font-weight:500}

section.blk{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
section.blk:first-of-type{border-top:0}
details+section.blk{margin-top:0}   /* the drawer above already carries 12px of bottom padding */
.big{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px}
.sub{font-size:13px;color:var(--muted)}
details{border-top:1px solid var(--line);padding:12px 0}
details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
                font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink2)}
details summary::-webkit-details-marker{display:none}
details summary .cv{width:9px;height:9px;flex:none;transition:transform .2s;color:var(--faint)}
details[open] summary .cv{transform:rotate(90deg)}
details summary .meta{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:none;font-weight:500}
details .body{padding-top:12px;font-size:13.5px;color:var(--ink2);line-height:1.6}
details .body p{margin:0 0 9px}
details .body p:last-child{margin:0}

.elev{display:grid;gap:4px}
.elev .r{display:grid;grid-template-columns:minmax(64px,auto) auto 1fr;gap:10px;align-items:center;font-size:12px;justify-items:start}
.elev .r .d{justify-self:end;font-size:12px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.elev .r .n{color:var(--muted);font-weight:500;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.elev .chip{display:inline-block;min-width:84px;font-size:11px;font-weight:700;color:#fff;padding:4px 10px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12);letter-spacing:.01em}
.fn{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

.ramp{display:flex;gap:4px;margin:12px 0 7px;padding:2px 0}
.ramp button{flex:1;height:26px;border-radius:4px;position:relative;transition:transform .15s;box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}
.ramp button:hover{transform:translateY(-2px)}
.ramp button.on{z-index:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.ramp button.on:hover{transform:none}
.ramp-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:500}
.season-note{font-size:13.5px;color:var(--ink2);margin-top:10px;line-height:1.6}
.season-note b{color:var(--ink);font-weight:700}

.empty{font-size:13.5px;color:var(--muted);line-height:1.6}
.lead{margin:6px 0 0;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5}
.going{margin:6px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.5}
.going b{color:var(--ink)}
section.blk details{margin-top:10px}
.sp{display:grid;gap:2px}
.sp .r{display:grid;grid-template-columns:10px 1fr;gap:10px;align-items:start;padding:8px 8px 9px;border-radius:var(--r-sm)}
.sp .r.now{background:var(--line2)}
.sp .dot{width:10px;height:10px;border-radius:50%;margin-top:4px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.2)}
.sp .nm{font-size:13.5px;font-weight:600;color:var(--ink2)}
.sp .r.now .nm{color:var(--ink)}
.sp .nm i{font-size:11px;font-weight:400;font-style:italic;color:var(--muted);margin-left:3px}
.sp .st{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.sp .r.now .st{color:var(--forest);font-weight:600}
.sp .note{font-size:12.5px;color:var(--ink2);margin-top:3px;line-height:1.45}

.seq{display:grid;gap:0}
.seq .r{display:grid;grid-template-columns:auto 62px 1fr auto;gap:10px;align-items:center;
        padding:7px 0;font-size:13px;border-bottom:1px solid var(--line2)}
.seq .r:last-child{border-bottom:0}
.seq .r.cur{font-weight:700}
.seq .r.cur .wk{color:var(--forest)}
.seq .dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(15,23,42,.2)}
.seq .wk{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.seq .lab{color:var(--ink)}
.seq .rel{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.photo{margin-top:22px;padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);
       background:var(--bg);position:relative;overflow:hidden;isolation:isolate}
.photo::before{content:"";position:absolute;top:-30px;right:-40px;width:230px;height:230px;z-index:-1;
       background:url("assets/contours.png") no-repeat center/contain;opacity:.55;
       -webkit-mask-image:radial-gradient(circle at 75% 25%,#000 40%,transparent 75%);mask-image:radial-gradient(circle at 75% 25%,#000 40%,transparent 75%)}
.photo h4{font-size:15px;margin-bottom:5px}
.photo p{font-size:13px;color:var(--ink2);margin:0 0 13px;max-width:30ch}
.credit{margin-top:22px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.credit img{height:13px;opacity:.55}

.empty-state{padding:46px 8px;text-align:center}
.empty-state h3{font-size:17px;margin-bottom:7px}
.empty-state p{font-size:13.5px;color:var(--muted);margin:0 auto;max-width:26ch}
.empty-state .ic{width:38px;height:38px;margin:0 auto 14px;color:var(--faint)}

.sheet-handle{display:none}

/* mobile */
@media (max-width: 900px){
  header{flex-wrap:wrap;gap:10px 12px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px}
  .brand{flex:1 1 auto;min-height:36px}
  .brand .rule,.brand .sub{display:none}
  .brand h1{font-size:16px}
  .search{order:3;flex:1 1 100%;max-width:none;margin-left:0}
  .hbtns{margin-left:auto}
  .hbtns .btn span{display:none}
  .hbtns .btn{padding:0;width:36px;height:36px;justify-content:center}
  .main{grid-template-columns:minmax(0,1fr);position:relative}
  .legend{gap:4px 10px;flex-wrap:wrap;overflow:visible}
  .legend .row{font-size:10.5px;gap:5px}
  .legend .sw{width:9px;height:9px}
  .legend .foot{display:none}
  .time{left:10px;right:10px;bottom:auto;top:10px;padding:8px 12px 10px}
  .zoom{top:auto;bottom:150px}
  .time .now{font-size:12.5px}
  #wkFull{display:none}
  #wkShort{display:inline}
  .ticks span:nth-child(even):not(.on){visibility:hidden}
  .panel{position:absolute;left:0;right:0;bottom:0;min-height:128px;max-height:76%;border-left:0;
         border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
         box-shadow:0 -12px 30px -12px rgba(15,23,42,.25);transform:translateY(max(0px, calc(100% - 128px)));
         transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:35;overflow:hidden}
  .panel.open{transform:translateY(0);overflow-y:auto}
  .sheet-handle{display:block;position:sticky;top:0;background:var(--card);padding:10px 0 6px;z-index:2;
                border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;touch-action:none;cursor:grab}
  .sheet-handle i{display:block;width:40px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:0 auto}
  .panel-in{padding:2px 18px 30px}
  .p-head h2{font-size:22px}
  .panel.open .p-head .close{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
                 background:var(--line2);color:var(--ink2);font-size:15px;flex:none}
  .empty-state{display:flex;align-items:center;gap:12px;text-align:left;padding:6px 4px 14px}
  .empty-state .ic{width:26px;height:26px;margin:0;flex:none}
  .empty-state h3{font-size:15px;margin:0 0 2px;white-space:nowrap}
  .empty-state p{font-size:12.5px;max-width:none;margin:0}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}