/* ============================================================
   downthewind — v4
   Dark by design: this is read outdoors, in the morning, on a
   phone, next to a forecast app that is also dark.
   ============================================================ */

:root {
  --bg:#070b11;
  --panel:#0d131d;
  --panel-2:#111926;
  --glass:rgba(11,17,26,.92);
  --line:#1e2836;
  --line-2:#2b3a4d;
  --fg:#e9e7e0;
  --dim:#8d97ab;
  --faint:#5a6579;

  --sea:#38a3a5;
  --sea-bright:#7fe3d2;

  --e-boost:#7fd6a2;
  --e-shelter:#6fb3d9;
  --e-shadow:#d9c26f;
  --e-hazard:#e08a4f;
  --e-commit:#b58fd6;
  --e-trap:#e0555f;
  --e-traffic:#c98fd6;

  --ease-easy:#7fd6a2;
  --ease-ok:#d9c26f;
  --ease-hard:#e08a4f;
  --ease-rocky:#e0555f;
  --ease-none:#5a6579;

  --r:14px;
  --sheet-peek:132px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overscroll-behavior:none; }
body {
  background:var(--bg); color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Inter",sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button, input, select { font:inherit; color:inherit; }
a { color:var(--sea-bright); }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:9px; }
::-webkit-scrollbar-track { background:transparent; }

/* ================= shell ================= */
#app { display:grid; grid-template-columns:clamp(340px, 30vw, 430px) 1fr; height:100dvh; }

aside {
  background:var(--panel); border-right:1px solid var(--line);
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
}
.aside-body { padding:0 1.25rem 2.5rem; flex:1; }

/* ================= topbar ================= */
.topbar {
  position:sticky; top:0; z-index:20;
  background:linear-gradient(var(--panel) 78%, transparent);
  padding:1.15rem 1.25rem .8rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem;
}
.brand h1 {
  font-weight:300; font-size:1.5rem; letter-spacing:.055em; line-height:1.1;
  cursor:pointer; user-select:none;
}
.brand h1 b { font-weight:700; color:var(--sea-bright); }
.brand .tag { color:var(--dim); font-size:.8rem; line-height:1.5; margin-top:.35rem; max-width:30ch; }
.brand .tag a { color:var(--dim); text-decoration:underline; text-underline-offset:2px; }

.langtoggle { display:flex; flex:none; border:1px solid var(--line); border-radius:99px; overflow:hidden; }
.langtoggle button {
  background:none; border:none; cursor:pointer; color:var(--faint);
  padding:.28rem .6rem; font-size:.72rem; font-weight:700; letter-spacing:.08em;
}
.langtoggle button.on { background:var(--sea-bright); color:#06222a; }

/* ================= generic bits ================= */
.kicker {
  font-size:.64rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase;
  color:var(--sea-bright); opacity:.8; margin:1.5rem 0 .55rem;
  display:flex; align-items:center; gap:.5rem;
}
.kicker::after { content:""; flex:1; height:1px; background:var(--line); }

.badge {
  display:inline-block; flex:none; font-size:.6rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:.18rem .55rem; border-radius:99px; white-space:nowrap;
  border:1px solid currentColor;
}
.badge.lv-intermediate { color:#a9d68e; background:rgba(93,164,89,.14); }
.badge.lv-advanced     { color:#ecd47c; background:rgba(212,181,62,.13); }
.badge.lv-expert       { color:#f0a184; background:rgba(207,92,52,.15); }

.backBtn {
  background:none; border:none; color:var(--sea-bright); cursor:pointer;
  font-size:.82rem; padding:.35rem 0; margin:.2rem 0 .1rem;
}
.backBtn:hover { text-decoration:underline; }

.note { color:var(--faint); font-size:.74rem; line-height:1.5; }

/* ================= cards ================= */
.card {
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
  color:var(--fg); padding:.85rem 1rem; margin-bottom:.6rem;
  transition:border-color .18s, background .18s, transform .12s;
}
.card:hover { border-color:var(--sea); background:#13202c; transform:translateY(-1px); }
.card.active { border-color:var(--sea-bright); background:rgba(127,227,210,.06); }
.card .top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.card .n { font-weight:650; font-size:.95rem; }
.card .a { color:var(--faint); font-size:.77rem; margin-top:.3rem; line-height:1.45; }
.card .blurb { color:var(--dim); font-size:.8rem; margin-top:.4rem; }

/* ================= detail ================= */
#detail h2 { font-size:1.3rem; font-weight:700; line-height:1.25; }
#detail .meta { color:var(--dim); font-size:.84rem; margin:.55rem 0 .1rem; line-height:1.7; }
#detail .meta b { color:var(--fg); font-weight:650; }
#detail p.desc { color:#c8c6bf; font-size:.9rem; line-height:1.7; }
#detail ul.tips { margin:0 0 .3rem 1.05rem; }
#detail ul.tips li { color:var(--dim); font-size:.86rem; line-height:1.6; margin-bottom:.5rem; }

/* ================= conditions panel ================= */
.cond-head {
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
  padding:.7rem .85rem; margin-bottom:.6rem;
}
.cond-head .when { color:var(--faint); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.cond-head .what { font-size:.95rem; font-weight:650; margin-top:.15rem; }

.cond-row {
  display:flex; gap:.65rem; align-items:flex-start;
  padding:.6rem .75rem; margin-bottom:.4rem;
  border-radius:11px; border:1px solid var(--line);
  background:var(--panel-2); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.cond-row:hover { background:#14202c; }
.cond-row .ic { flex:none; width:1.3rem; text-align:center; font-size:.95rem; line-height:1.5; }
.cond-row .tx { font-size:.83rem; line-height:1.55; color:var(--dim); }
.cond-row .tx b { display:block; color:var(--fg); font-weight:650; font-size:.85rem; margin-bottom:.15rem; }
.cond-row .tx .where { color:var(--faint); font-weight:400; font-size:.74rem; }
.cond-row.sev-high { border-color:color-mix(in srgb, currentColor 55%, var(--line)); }

.e-boost   { color:var(--e-boost); }
.e-shelter { color:var(--e-shelter); }
.e-shadow  { color:var(--e-shadow); }
.e-hazard  { color:var(--e-hazard); }
.e-commit  { color:var(--e-commit); }
.e-trap    { color:var(--e-trap); }
.e-traffic { color:var(--e-traffic); }

.suggest {
  border:1px solid var(--sea); background:rgba(56,163,165,.1);
  border-radius:var(--r); padding:.7rem .85rem; margin-top:.6rem;
}
.suggest .lbl { color:var(--sea-bright); font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.suggest .val { font-size:.95rem; font-weight:650; margin-top:.2rem; }
.suggest .sub { color:var(--dim); font-size:.78rem; margin-top:.2rem; }
.suggest.none { border-color:var(--line-2); background:var(--panel-2); }
.suggest.none .lbl { color:var(--faint); }

/* ================= leg picker ================= */
.legpicker { display:flex; gap:.5rem; align-items:center; }
.legpicker .fld { flex:1; min-width:0; }
.legpicker label { display:block; color:var(--faint); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.25rem; }
.legpicker select {
  width:100%; background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; padding:.45rem .55rem; font-size:.82rem; cursor:pointer;
}
.legpicker select:focus { outline:none; border-color:var(--sea); }
.legreset { background:none; border:none; color:var(--faint); font-size:.74rem; cursor:pointer; margin-top:.45rem; }
.legreset:hover { color:var(--sea-bright); text-decoration:underline; }

/* ================= exits table ================= */
.exits { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.exit-row {
  display:grid; grid-template-columns:3.1rem 1fr auto; gap:.6rem; align-items:center;
  padding:.55rem .75rem; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .15s;
}
.exit-row:last-child { border-bottom:none; }
.exit-row:hover, .exit-row.hi { background:#14202c; }
.exit-row .km { color:var(--faint); font-size:.74rem; font-variant-numeric:tabular-nums; text-align:right; }
.exit-row .nm { font-size:.83rem; font-weight:600; display:flex; align-items:center; gap:.35rem; }
.exit-row .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.exit-row .sub { color:var(--faint); font-size:.72rem; margin-top:.1rem; }
.exit-row .tr { color:var(--dim); font-size:.72rem; text-align:right; white-space:nowrap; }
.exit-row .tr .w { color:var(--sea-bright); }

.node-detail {
  border:1px solid var(--line-2); border-radius:var(--r); padding:.75rem .85rem;
  background:var(--panel-2); margin-top:.5rem; font-size:.82rem; color:var(--dim); line-height:1.6;
}
.node-detail h4 { color:var(--fg); font-size:.9rem; margin-bottom:.3rem; }
.node-detail dl { display:grid; grid-template-columns:auto 1fr; gap:.2rem .6rem; margin-top:.45rem; }
.node-detail dt { color:var(--faint); font-size:.74rem; }
.node-detail dd { font-size:.78rem; }

/* ================= forecast strip ================= */
.fc .days { display:flex; gap:4px; }
.fc .day { flex:1; min-width:0; }
.fc .day .lbl { text-align:center; color:var(--faint); font-size:.7rem; margin-bottom:.3rem; }
.fc .cells { display:flex; gap:2px; }
.fc .cell { flex:1; height:34px; border-radius:3px; background:#101720; cursor:pointer; }
.fc .cell.night { opacity:.32; }
.fc .cell.sel { outline:2px solid var(--sea-bright); outline-offset:1px; }
.fc #readout { margin-top:.55rem; color:var(--dim); font-size:.78rem; min-height:1.3em; }
.fc .legend { display:flex; align-items:center; gap:.6rem; margin-top:.6rem; color:var(--faint); font-size:.7rem; }
.fc .legend .bar { flex:1; height:7px; border-radius:4px; }

/* ================= add run ================= */
.addrun { margin-top:2rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.addrun-btn {
  display:block; text-align:center; text-decoration:none; font-weight:650; font-size:.9rem;
  color:#06222a; background:linear-gradient(135deg, var(--sea-bright), #4fc0ad);
  border-radius:12px; padding:.72rem 1rem;
}
.addrun-btn:hover { filter:brightness(1.07); }

/* ================= map ================= */
#mapwrap { position:relative; height:100%; overflow:hidden; }
#map { position:absolute; inset:0; z-index:1; }
/* the canvases live in the Leaflet "weather" pane, positioned by pinCanvases() */
#heatCanvas, #overlayCanvas {
  position:absolute; top:0; left:0; width:100%; height:100%; display:block; pointer-events:none;
}
.leaflet-container { background:#070b11; font:inherit; }
.leaflet-control-attribution { display:none; }
.leaflet-bar a { background:var(--glass); color:var(--dim); border-color:var(--line); }
.leaflet-bar a:hover { background:var(--panel-2); color:var(--fg); }

.glass {
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); box-shadow:0 10px 34px rgba(0,0,0,.5);
}

#layerCtl { position:absolute; top:.8rem; right:.8rem; z-index:500; display:flex; gap:.4rem; }
#layerCtl button {
  background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); color:var(--dim); border-radius:10px;
  padding:.45rem .75rem; cursor:pointer; font-size:.82rem;
}
#layerCtl button.on { color:var(--sea-bright); border-color:var(--sea); }

#timeCtl {
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  z-index:500; display:none; align-items:center; gap:.75rem;
  border-radius:16px; padding:.6rem .9rem .45rem; width:min(560px, calc(100% - 2rem));
}
#playBtn {
  flex:none; width:33px; height:33px; border-radius:50%; border:none; cursor:pointer;
  background:var(--sea-bright); color:#06222a; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
}
#timeCtl .track { flex:1; min-width:0; }
#timeCtl input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px;
  background:rgba(255,255,255,.13); outline:none; cursor:pointer;
}
#timeCtl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--sea-bright); box-shadow:0 0 9px rgba(127,227,210,.6);
}
#timeCtl input[type=range]::-moz-range-thumb {
  width:14px; height:14px; border:none; border-radius:50%; background:var(--sea-bright);
}
#dayTicks { display:flex; margin-top:.2rem; }
#dayTicks span { flex:1; text-align:center; color:var(--faint); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; }
#timeLbl { flex:none; color:var(--dim); font-size:.76rem; white-space:nowrap; min-width:7rem; text-align:right; }

#ovLegend {
  position:absolute; left:.8rem; bottom:1rem; z-index:500; display:none;
  border-radius:10px; padding:.5rem .7rem; color:var(--faint); font-size:.68rem; width:168px;
}
#ovLegend .bar { height:7px; border-radius:4px; margin:.3rem 0; }
#ovLegend .ends { display:flex; justify-content:space-between; }

.spot-icon { font-size:21px; text-shadow:0 0 6px #000; }
.node-marker { border-radius:50%; border:2px solid #070b11; box-shadow:0 0 0 1.5px currentColor; }

footer.credit { position:absolute; bottom:.3rem; right:.55rem; z-index:450; color:#4b5567; font-size:.66rem; }
footer.credit a { color:#4b5567; }

/* ================= profile strip ================= */
#profileWrap {
  position:absolute; left:0; right:0; bottom:0; z-index:480;
  background:linear-gradient(transparent, rgba(7,11,17,.82) 22%, rgba(7,11,17,.95));
  padding:1.6rem .9rem .6rem; display:none;
}
#profileWrap.on { display:block; }
#profile { width:100%; display:block; overflow:visible; }
#profile .pf-axis { stroke:var(--line-2); stroke-width:1; }
#profile .pf-tick { fill:var(--faint); font-size:9px; }
#profile .pf-node { cursor:pointer; }
#profile .pf-node circle { stroke:#070b11; stroke-width:1.5; }
#profile .pf-label { fill:var(--dim); font-size:8.5px; }
#profile .pf-label.hi { fill:var(--fg); font-weight:700; }
#profile .pf-seg { }
#profile .pf-zone { opacity:.8; }
#profile .pf-legwin { fill:rgba(127,227,210,.09); stroke:var(--sea-bright); stroke-width:1; stroke-dasharray:3 3; }
.pf-tip {
  position:absolute; z-index:520; pointer-events:none; display:none;
  background:var(--glass); border:1px solid var(--line-2); border-radius:9px;
  padding:.4rem .6rem; font-size:.75rem; color:var(--fg); max-width:230px;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
}

/* ================= mobile ================= */
.sheet-handle { display:none; }

@media (max-width:820px) {
  #app { display:block; height:100dvh; }
  #mapwrap { position:absolute; inset:0; height:100dvh; }
  aside {
    position:absolute; left:0; right:0; bottom:0; z-index:600;
    height:88dvh; max-height:88dvh;
    border-right:none; border-top:1px solid var(--line-2);
    border-radius:20px 20px 0 0;
    background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:0 -12px 40px rgba(0,0,0,.6);
    transform:translateY(calc(88dvh - var(--sheet-peek)));
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    overflow:hidden;
  }
  aside.open { transform:translateY(0); }
  aside.open .aside-body { overflow-y:auto; }
  .aside-body { overflow:hidden; height:100%; padding-bottom:4rem; }
  .sheet-handle {
    display:block; width:100%; padding:.55rem 0 .35rem; background:none; border:none;
    cursor:pointer; flex:none;
  }
  .sheet-handle::before {
    content:""; display:block; width:38px; height:4px; border-radius:99px;
    background:var(--line-2); margin:0 auto;
  }
  .topbar { position:static; background:none; padding:.2rem 1.1rem .7rem; }
  .brand h1 { font-size:1.25rem; }
  .brand .tag { display:none; }
  #timeCtl { bottom:calc(var(--sheet-peek) + .6rem); }
  #ovLegend { bottom:calc(var(--sheet-peek) + .6rem); }
  #profileWrap { bottom:var(--sheet-peek); padding:1.4rem .7rem .5rem; }
  footer.credit { bottom:calc(var(--sheet-peek) + .1rem); }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
}

/* ================= community reports ================= */
.report-row {
  display:flex; gap:.65rem; align-items:flex-start; text-decoration:none;
  padding:.6rem .75rem; margin-bottom:.4rem;
  border-radius:11px; border:1px solid var(--line);
  background:var(--panel-2); transition:border-color .15s, background .15s;
}
.report-row:hover { background:#14202c; border-color:currentColor; }
.report-row.stale { opacity:.5; }
.report-row .ic { flex:none; width:1.3rem; text-align:center; font-size:.95rem; line-height:1.5; }
.report-row .tx { font-size:.83rem; line-height:1.55; color:var(--dim); }
.report-row .tx b { display:block; color:var(--fg); font-weight:650; font-size:.85rem; margin-bottom:.15rem; }
.report-row .tx .where { display:block; color:var(--faint); font-weight:400; font-size:.72rem; margin-top:.1rem; }
.report-row .tx .cond {
  display:inline-block; margin-top:.35rem; padding:.1rem .45rem; border-radius:99px;
  background:rgba(255,255,255,.05); color:var(--faint); font-size:.72rem;
}

.node-reports { margin:.6rem 0 .2rem; }

.rep-btns { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.rep-btn {
  flex:1 1 auto; text-align:center; text-decoration:none; white-space:nowrap;
  border:1px solid var(--line); border-radius:10px; padding:.42rem .6rem;
  color:var(--dim); font-size:.78rem; background:var(--panel-2);
  transition:color .15s, border-color .15s;
}
.rep-btn:hover { color:var(--sea-bright); border-color:var(--sea); }

.report-pin { font-size:17px; text-shadow:0 0 5px #000, 0 0 2px #000; text-align:center; line-height:20px; }

/* ================= map polish ================= */

/* the track reads as moving water: a slow dash drifting along the leg */
.track-flow { animation:trackflow 2.6s linear infinite; }
@keyframes trackflow { from { stroke-dashoffset:32; } to { stroke-dashoffset:0; } }

.flow-arrow {
  color:#eafffb; font-size:11px; line-height:16px; text-align:center;
  text-shadow:0 0 4px #04161c, 0 0 2px #04161c; pointer-events:none;
}
.flow-arrow span { display:block; }

.rail-dot {
  width:7px; height:7px; border-radius:2px; pointer-events:none;
  background:var(--sea-bright); box-shadow:0 0 0 1.5px #04161c;
}

.node-hi { filter:drop-shadow(0 0 6px rgba(127,227,210,.85)); }

.endpoint { pointer-events:none; white-space:nowrap; }
.endpoint .dot {
  position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%;
  border:2.5px solid #04161c;
}
.endpoint.start  .dot { background:var(--sea-bright); }
.endpoint.finish .dot { background:#e8a3ff; }
.endpoint .lbl {
  position:absolute; left:11px; top:-9px;
  font-size:.6rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:.1rem .4rem; border-radius:99px;
  background:rgba(4,22,28,.82); backdrop-filter:blur(4px);
}
.endpoint.start  .lbl { color:var(--sea-bright); }
.endpoint.finish .lbl { color:#e8a3ff; }

/* leaflet chrome, restyled to match the panels instead of fighting them */
.leaflet-control-zoom { border:none !important; box-shadow:none !important; }
.leaflet-control-zoom a {
  background:var(--glass) !important; color:var(--dim) !important;
  border:1px solid var(--line) !important; border-radius:9px !important;
  width:31px !important; height:31px !important; line-height:29px !important;
  margin-bottom:4px; backdrop-filter:blur(12px);
}
.leaflet-control-zoom a:hover { color:var(--sea-bright) !important; border-color:var(--sea) !important; }

.leaflet-tooltip {
  background:var(--glass) !important; color:var(--fg) !important;
  border:1px solid var(--line-2) !important; border-radius:8px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.5) !important;
  font-size:.76rem !important; padding:.28rem .5rem !important;
  backdrop-filter:blur(10px);
}
.leaflet-tooltip-top:before { border-top-color:var(--line-2) !important; }

/* dim the base tiles a little so the track and field sit on top of them */
.leaflet-tile-pane { filter:brightness(.82) saturate(.75); }

/* exit-difficulty key, folded into the profile band */
.map-key { display:flex; flex-wrap:wrap; gap:.15rem .75rem; padding:0 .2rem .3rem; }
.map-key span { display:flex; align-items:center; gap:.3rem; color:var(--faint); font-size:.66rem; }
.map-key i { width:8px; height:8px; border-radius:50%; display:block; }