:root{
  --ink:#16211E;
  --ink-soft:#3D4C47;
  --granite:#79857F;
  --paper:#F4F5F1;
  --line:#D7DBD4;
  --done:#C42B1C;
  --accent:#1E7A4A;
  --sched:#2563A8;
  --unsched:#B07408;
  --base-trail:#5A6560;
  --danger:#A8321F;

  --display:'Barlow Condensed',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.55;
  display:flex;flex-direction:column;
}
h2,h3{margin:0}
a{color:inherit}

.hidden{display:none !important}
[hidden]{display:none !important}

/* ---------------- top bar ---------------- */
.topbar{
  display:flex;align-items:center;gap:24px;
  padding:10px 20px;background:var(--ink);color:#EDF0EC;
  border-bottom:3px solid var(--accent);flex:0 0 auto;flex-wrap:wrap;
}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family:var(--display);font-weight:700;font-size:26px;
  letter-spacing:.09em;text-transform:uppercase;
}
.brand-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#8FA79A;
}
.tabs{display:flex;gap:2px;margin-left:8px}
.tab{
  font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  background:none;border:0;color:#9CAFA6;cursor:pointer;
  padding:8px 14px;border-bottom:2px solid transparent;
}
.tab:hover{color:#EDF0EC}
.tab.is-active{color:#fff;border-bottom-color:var(--accent)}
.account{margin-left:auto;display:flex;gap:8px;align-items:center}

.btn{
  font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  padding:8px 16px;border-radius:2px;border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#186139}
.btn-quiet{background:transparent;color:#B9C7C0;border-color:#3C4B45}
.btn-quiet:hover{color:#fff;border-color:#6D7D76}
.btn-danger{background:transparent;color:var(--danger);border-color:#C9A79F}

/* ---------------- views ---------------- */
.view{display:none;flex:1 1 auto;min-height:0;position:relative}
.view.is-active{display:block}
#view-trips.is-active,#view-future.is-active{overflow-y:auto}
#map{position:absolute;inset:0}

.page{max-width:1000px;margin:0 auto;padding:28px 20px 60px}
.section-head{
  font-family:var(--display);font-size:22px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  margin:34px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.hint{color:var(--granite);font-size:13px;margin:6px 0 14px}

/* ---------------- map panel ---------------- */
.map-panel{
  position:absolute;top:16px;left:16px;z-index:500;width:210px;
  background:rgba(244,245,241,.95);border:1px solid var(--line);
  border-radius:3px;box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.panel-block{padding:12px 14px;border-bottom:1px solid var(--line)}
.panel-block:last-child{border-bottom:0}
.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--granite);
}
.big-figure{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1.1;margin-top:2px}
.big-figure .unit{font-size:14px;color:var(--granite);margin-left:4px}
.figure-sub{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}

.switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;margin:4px 0}
.switch input{width:16px;height:16px;accent-color:var(--sched)}

.legend-row{display:flex;align-items:center;gap:9px;font-size:12.5px;margin:5px 0}
.swatch{width:20px;height:4px;border-radius:2px;display:inline-block}
.sw-base{background:var(--base-trail)}
.sw-done{background:var(--done);height:5px}
.sw-sched{background:var(--sched);height:5px}
.sw-unsched{background:var(--unsched);height:5px}
.future-only{display:none}
.show-future .future-only{display:flex}

/* ------------- signature: trail ribbon ------------- */
.ribbon{
  position:absolute;right:18px;top:70px;bottom:70px;z-index:500;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.ribbon-cap{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink);
  background:rgba(244,245,241,.92);padding:2px 5px;border-radius:2px;
}
.ribbon-track{
  flex:1;width:9px;background:rgba(244,245,241,.85);
  border:1px solid var(--line);border-radius:5px;
  position:relative;overflow:hidden;
}
#ribbonFill{position:absolute;inset:0}
#ribbonFill i{position:absolute;left:0;right:0;background:var(--done)}

/* ---------------- stats + donut ---------------- */
.stats-strip{
  display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  padding:22px;border:1px solid var(--line);background:#fff;border-radius:3px;
}
.stat-num{font-family:var(--mono);font-size:28px;font-weight:600;line-height:1.15}
.stat-label{font-size:12px;color:var(--granite)}
.donut-wrap{margin-left:auto;width:120px;height:120px}
#donut{width:100%;height:100%}
.donut-pct{font-family:var(--mono);font-size:19px;font-weight:600;fill:var(--ink)}
.donut-cap{font-family:var(--mono);font-size:7px;letter-spacing:.14em;fill:var(--granite)}

/* ---------------- trip cards ---------------- */
.trip-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.trip-card{
  background:#fff;padding:14px 18px;cursor:pointer;
  display:flex;align-items:center;gap:18px;border-left:4px solid transparent;
}
.trip-card:hover{background:#FAFBF8}
.trip-card.st-completed{border-left-color:var(--done)}
.trip-card.st-scheduled{border-left-color:var(--sched)}
.trip-card.st-unscheduled{border-left-color:var(--unsched)}
.trip-card h4{
  margin:0;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:.03em;
}
.trip-card .range{font-family:var(--mono);font-size:12px;color:var(--granite)}
.trip-card .right{margin-left:auto;text-align:right}
.trip-card .miles{font-family:var(--mono);font-size:20px;font-weight:600}
.trip-card .when{font-family:var(--mono);font-size:11px;color:var(--granite)}
.empty{background:#fff;padding:20px;color:var(--granite);font-size:14px}

.gap-list{display:flex;flex-wrap:wrap;gap:8px}
.gap-chip{
  font-family:var(--mono);font-size:12px;background:#fff;
  border:1px solid var(--line);border-radius:2px;padding:6px 10px;
}
.gap-chip b{color:var(--unsched)}

/* ---------------- detail sheet ---------------- */
.sheet{
  position:fixed;inset:0;z-index:1200;background:rgba(22,33,30,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet-inner{
  background:var(--paper);width:min(940px,100%);max-height:88vh;overflow-y:auto;
  padding:26px 30px 34px;border-top:3px solid var(--accent);position:relative;
  border-radius:4px 4px 0 0;
}
.sheet-close{
  position:absolute;top:12px;right:16px;background:none;border:0;
  font-size:30px;line-height:1;color:var(--granite);cursor:pointer;
}
#sheetName{
  font-family:var(--display);font-size:32px;font-weight:700;
  letter-spacing:.02em;margin:2px 0 4px;
}
.sheet-meta{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.sheet-figures{display:flex;gap:28px;flex-wrap:wrap;margin:20px 0 6px}
.fig{min-width:78px}
.fig-num{font-family:var(--mono);font-size:22px;font-weight:600}
.fig-cap{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--granite)}

.profile-wrap{margin:14px 0 4px;background:#fff;border:1px solid var(--line);padding:10px}
#profile{width:100%;height:200px;display:block}
.profile-axis{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;color:var(--granite);padding:4px 2px 0;
}

.days{width:100%;border-collapse:collapse;margin-top:18px;font-size:13.5px}
.days th{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--granite);text-align:right;padding:6px 10px;border-bottom:1px solid var(--line);
}
.days th:first-child,.days td:first-child{text-align:left}
.days td{padding:7px 10px;border-bottom:1px solid var(--line);font-family:var(--mono);text-align:right}
.days tr:last-child td{border-bottom:0;font-weight:600;background:#fff}
.sheet-notes{margin-top:16px;white-space:pre-wrap;font-size:14px;color:var(--ink-soft)}
.sheet-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.sheet-actions .btn-primary{text-decoration:none;display:inline-block}

/* ---------------- modals ---------------- */
.modal{
  position:fixed;inset:0;z-index:1400;background:rgba(22,33,30,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-card{
  background:var(--paper);width:min(420px,100%);padding:26px 28px;border-radius:3px;
  border-top:3px solid var(--accent);max-height:90vh;overflow-y:auto;
}
.modal-card.wide{width:min(560px,100%)}
.modal-card h3{
  font-family:var(--display);font-size:24px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px;
}
.field{display:block;margin-top:14px}
.field>span{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--granite);display:block;margin-bottom:4px;
}
.field input,.field select,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--body);font-size:14.5px;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--sched);outline-offset:-1px;border-color:var(--sched);
}
.field small{display:block;margin-top:4px;font-size:11.5px;color:var(--granite)}
.field-row{display:flex;gap:14px}
.field-row .field{flex:1}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.error{
  margin-top:14px;padding:9px 12px;background:#FBEDEA;
  border-left:3px solid var(--danger);color:#7E2617;font-size:13.5px;
}

.credits{
  flex:0 0 auto;padding:9px 20px;background:var(--ink);color:#7E9086;
  font-size:11px;font-family:var(--mono);line-height:1.5;
}

.leaflet-container{background:#DDE3DC}
.camp-icon{
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

@media (max-width:700px){
  .topbar{gap:12px;padding:9px 12px}
  .brand-name{font-size:21px}
  .tabs{order:3;width:100%;margin-left:0}
  .tab{padding:7px 10px;font-size:14px}
  .map-panel{width:170px;top:10px;left:10px}
  .big-figure{font-size:24px}
  .ribbon{display:none}
  .stats-strip{gap:20px}
  .donut-wrap{margin-left:0}
  .sheet-inner{padding:22px 18px 28px}
  #sheetName{font-size:25px}
  .field-row{flex-direction:column;gap:0}
}

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

/* trip labels on leader lines */
.trip-label{
  background:var(--paper);border:1px solid var(--ink);border-radius:2px;
  padding:2px 7px;box-shadow:0 1px 4px rgba(0,0,0,.25);
  font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.04em;color:var(--ink);white-space:nowrap;position:relative;
}
.trip-label::before{
  content:'';position:absolute;top:50%;width:38px;height:0;
  border-top:1px solid var(--ink);
}
.trip-label.to-right::before{left:-39px}
.trip-label.to-left::before{right:-39px}
.leaflet-tooltip.trip-label::after,
.leaflet-tooltip.trip-label::before{border:0}
.leaflet-tooltip.trip-label{margin:0;opacity:1 !important}