/* Walk Time and Daylight Planner (tools-src/walk-time-planner). Everything scoped under .tl-wt */
.tl-wt{--wt-dark:#1c1b1b;--wt-red:#ed2629;--wt-blue:#3899ec;--wt-grey:#9aa0a6;--wt-light:#f5f5f7;--wt-mute:#6e6e73;--wt-mute2:#86868b}
.tl-wt .tl-wt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;margin:0 0 22px}
.tl-wt .tl-wt-form{margin:0;padding:8px 24px}
.tl-wt .tl-wt-out{position:sticky;top:96px}
.tl-wt .tl-wt-res{margin:0;padding:24px}

/* form sections */
.tl-wt .tl-wt-sec{padding:20px 0 22px;border-top:1px solid rgba(0,0,0,.07)}
.tl-wt .tl-wt-sec:first-child{border-top:0}
.tl-wt .tl-wt-sh{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.tl-wt .tl-wt-sh h3{margin:0}
.tl-wt .tl-wt-n{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(237,38,41,.1);color:var(--wt-red);font:14px/26px 'lp-outfit-700-2',Arial,sans-serif;text-align:center}
.tl-wt .tl-wt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tl-wt .tl-wt-two>div{min-width:0}
.tl-wt .tl-wt-sh+.tl-wt-two{margin-top:0}
.tl-wt .tl-wt-gap{margin-top:16px}
.tl-wt .tl-wt-lab{display:block;font:13px/1.2 'lp-figtree-600',Arial,sans-serif;color:var(--wt-mute);margin:16px 0 6px}
.tl-wt .tl-wt-sub{display:block;font-size:12.5px;line-height:1.45;color:var(--wt-mute2);margin:6px 2px 0;min-height:1.45em}

/* selects get a chevron; number inputs get a unit */
.tl-wt .tl-wt-sel{position:relative}
.tl-wt .tl-wt-sel::after{content:'';position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--wt-mute);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.tl-wt .tl-wt-sel select{padding-right:42px;cursor:pointer;text-overflow:ellipsis}
.tl-wt .tl-wt-sel select:disabled{color:var(--wt-mute2);cursor:default}
.tl-wt .tl-wt-unit{position:relative}
.tl-wt .tl-wt-unit input{padding-right:40px;-moz-appearance:textfield}
.tl-wt .tl-wt-unit input::-webkit-outer-spin-button,.tl-wt .tl-wt-unit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tl-wt .tl-wt-unit i{position:absolute;right:18px;top:50%;transform:translateY(-50%);font:600 14px/1 'lp-figtree-600',Arial,sans-serif;font-style:normal;color:var(--wt-mute2);pointer-events:none}
.tl-wt input[type=date],.tl-wt input[type=time]{min-width:0;text-align:left;line-height:44px;padding:0 12px 0 14px;font-size:15px}
.tl-wt input[type=date]::-webkit-date-and-time-value,.tl-wt input[type=time]::-webkit-date-and-time-value{text-align:left}

.tl-wt .tl-wt-hikeinfo{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--wt-light);font-size:13.5px;line-height:1.5;color:#3a3a3a}
.tl-wt .tl-wt-hikeinfo b{font-family:'lp-figtree-600',Arial,sans-serif;font-weight:600;color:var(--wt-dark)}
.tl-wt .tl-wt-hikeinfo a,.tl-wt .tl-wt-locline a{color:var(--wt-blue);text-decoration:none;font-family:'lp-figtree-600',Arial,sans-serif}
.tl-wt .tl-wt-ed{display:block;color:var(--wt-mute);font-size:12.5px;margin-top:2px}

/* segmented location control */
.tl-wt .tl-wt-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:999px;background:var(--wt-light)}
.tl-wt .tl-wt-seg button{height:40px;border:0;border-radius:999px;background:transparent;color:var(--wt-mute);font:14px/1 'lp-figtree-600',Arial,sans-serif;cursor:pointer;padding:0 6px;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.tl-wt .tl-wt-seg button[aria-checked=true]{background:#fff;color:var(--wt-dark);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px -6px rgba(0,0,0,.25)}
.tl-wt .tl-wt-seg button:focus-visible{outline:2px solid var(--wt-blue);outline-offset:1px}
.tl-wt .tl-wt-loc{margin-top:12px}
.tl-wt .tl-wt-loc[hidden]{display:none}
.tl-wt .tl-wt-locline{display:flex;gap:8px;align-items:flex-start;margin:10px 2px 0;font-size:13.5px;line-height:1.45;color:#3a3a3a}
.tl-wt .tl-wt-locline:empty{display:none}
.tl-wt .tl-wt-locline svg{flex:none;width:18px;height:18px;color:var(--wt-red);margin-top:1px}
.tl-wt .tl-wt-locline b{font-family:'lp-figtree-600',Arial,sans-serif;font-weight:600;color:var(--wt-dark)}
.tl-wt .tl-wt-locline em{display:block;font-style:normal;font-size:12.5px;color:var(--wt-mute2)}
.tl-wt .tl-wt-hint{color:var(--wt-mute)}
.tl-wt .tl-wt-gps{width:100%}
.tl-wt .tl-wt-gps svg{width:18px;height:18px}

/* hill search */
.tl-wt .tl-wt-search{position:relative}
.tl-wt .tl-wt-search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--wt-mute2);pointer-events:none}
.tl-wt .tl-wt-search input[type=search]{padding-left:44px}
.tl-wt .tl-wt-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.tl-wt .tl-wt-hres{list-style:none;margin:8px 0 0;padding:6px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 32px -14px rgba(0,0,0,.25);max-height:300px;overflow:auto}
.tl-wt .tl-wt-hres[hidden]{display:none}
.tl-wt .tl-wt-hres li{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-radius:10px;cursor:pointer;font-size:14.5px;color:var(--wt-dark)}
.tl-wt .tl-wt-hres li b{font-family:'lp-figtree-600',Arial,sans-serif;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-wt .tl-wt-hres li span{flex:none;font-size:12.5px;color:var(--wt-mute2)}
.tl-wt .tl-wt-hres li:hover,.tl-wt .tl-wt-hres li[aria-selected=true]{background:var(--wt-light)}
.tl-wt .tl-wt-hres li.tl-wt-none{cursor:default;color:var(--wt-mute);background:none}

/* results */
.tl-wt .tl-wt-head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px}
.tl-wt .tl-wt-k{display:block;font:13px/1.2 'lp-figtree-600',Arial,sans-serif;color:var(--wt-mute);text-transform:uppercase;letter-spacing:.06em}
.tl-wt .tl-wt-big{display:block;font:52px/1.05 'lp-outfit-700-2',Arial,sans-serif;color:var(--wt-dark);letter-spacing:-.02em;margin:6px 0 6px}
.tl-wt .tl-wt-hl{display:block;font-size:14.5px;line-height:1.5;color:var(--wt-mute)}
.tl-wt .tl-wt-badge{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font:13px/1 'lp-figtree-600',Arial,sans-serif;white-space:nowrap;margin-top:2px}
.tl-wt .tl-wt-badge[hidden]{display:none}
.tl-wt .tl-wt-badge.good{background:rgba(56,153,236,.13);color:#1f72bf}
.tl-wt .tl-wt-badge.mid{background:var(--wt-dark);color:#fff}
.tl-wt .tl-wt-badge.bad{background:var(--wt-red);color:#fff}

/* timeline */
.tl-wt .tl-wt-tl{margin:22px 0 0}
.tl-wt .tl-wt-tlbar{position:relative;height:58px;padding-top:28px}
.tl-wt .tl-wt-sky{position:absolute;left:0;right:0;top:28px;bottom:0;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.tl-wt .tl-wt-mark{position:absolute;top:28px;bottom:0;width:0;border-left:1.5px dashed rgba(255,255,255,.85)}
.tl-wt .tl-wt-mz{position:absolute;top:28px;bottom:0;background:repeating-linear-gradient(135deg,rgba(237,38,41,.32) 0 3px,rgba(237,38,41,0) 3px 7px)}
.tl-wt .tl-wt-walk{position:absolute;top:calc(28px + 50%);height:16px;margin-top:-8px;border-radius:999px;background:var(--wt-red);box-shadow:0 0 0 3px #fff,0 4px 12px -2px rgba(237,38,41,.55);min-width:10px}
.tl-wt .tl-wt-walk::before,.tl-wt .tl-wt-walk::after{content:'';position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff}
.tl-wt .tl-wt-walk::before{left:5px}.tl-wt .tl-wt-walk::after{right:5px}
.tl-wt .tl-wt-wl{position:absolute;top:0;white-space:nowrap;font:13px/20px 'lp-figtree-600',Arial,sans-serif;color:#fff;background:var(--wt-dark);border-radius:999px;padding:0 10px}
.tl-wt .tl-wt-tlax{position:relative;height:22px;margin-top:6px}
.tl-wt .tl-wt-tlax span{position:absolute;top:0;transform:translateX(-50%);font-size:12px;line-height:22px;color:var(--wt-mute2);white-space:nowrap}
.tl-wt .tl-wt-tlax span::before{content:'';position:absolute;left:50%;top:-5px;width:1px;height:5px;background:rgba(0,0,0,.18)}
.tl-wt .tl-wt-key{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;color:var(--wt-mute)}
.tl-wt .tl-wt-key li{display:flex;align-items:center;gap:6px}
.tl-wt .tl-wt-key i{width:12px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tl-wt .tl-wt-key i.d{background:#d7e9fb}.tl-wt .tl-wt-key i.t{background:linear-gradient(90deg,#3899ec,#1c1b1b)}
.tl-wt .tl-wt-key i.n{background:var(--wt-dark)}.tl-wt .tl-wt-key i.m{background:repeating-linear-gradient(135deg,rgba(237,38,41,.45) 0 2px,#fff 2px 4px)}.tl-wt .tl-wt-key i.w{background:var(--wt-red);border-radius:999px;width:18px}

.tl-wt .tl-wt-msg{margin:18px 0 0;padding:13px 16px;border-radius:14px;background:var(--wt-light);font-size:14.5px;line-height:1.55;color:#3a3a3a}
.tl-wt .tl-wt-msg b{font-family:'lp-figtree-600',Arial,sans-serif;font-weight:600;color:var(--wt-dark)}
.tl-wt .tl-wt-msg.good{background:rgba(56,153,236,.09);box-shadow:inset 3px 0 0 var(--wt-blue)}
.tl-wt .tl-wt-msg.mid{box-shadow:inset 3px 0 0 var(--wt-dark)}
.tl-wt .tl-wt-msg.bad{background:rgba(237,38,41,.07);box-shadow:inset 3px 0 0 var(--wt-red)}

.tl-wt .tl-wt-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.tl-wt .tl-wt-tile{padding:13px 15px;border-radius:14px;border:1px solid rgba(0,0,0,.07);background:#fff;min-width:0}
.tl-wt .tl-wt-tile span{display:block;font-size:12.5px;line-height:1.3;color:var(--wt-mute)}
.tl-wt .tl-wt-tile b{display:block;font:26px/1.15 'lp-outfit-700-2',Arial,sans-serif;color:var(--wt-dark);margin-top:4px;letter-spacing:-.01em}
.tl-wt .tl-wt-tile em{display:block;font-style:normal;font-size:12px;line-height:1.35;color:var(--wt-mute2);margin-top:2px}
.tl-wt .tl-wt-tile em:empty{display:none}

.tl-wt .tl-wt-sun{display:grid;grid-template-columns:repeat(4,1fr);margin:14px 0 0;border-radius:14px;background:var(--wt-light);padding:12px 4px}
.tl-wt .tl-wt-sun div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0;border-left:1px solid rgba(0,0,0,.07)}
.tl-wt .tl-wt-sun div:first-child{border-left:0}
.tl-wt .tl-wt-sun svg{width:20px;height:20px;color:var(--wt-mute);margin-bottom:2px}
.tl-wt .tl-wt-sun span{font-size:12px;color:var(--wt-mute)}
.tl-wt .tl-wt-sun b{font:17px/1.2 'lp-outfit-700-2',Arial,sans-serif;color:var(--wt-dark)}
.tl-wt .tl-wt-foot{margin:10px 2px 0;font-size:12.5px!important;line-height:1.5!important;color:var(--wt-mute2)!important}
.tl-wt .tl-wt-foot:empty{display:none}
.tl-wt .tl-wt-margin{margin:16px 0 0;padding:16px 0 0;border-top:1px solid rgba(0,0,0,.07)}

/* how it works */
.tl-wt .tl-wt-how{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tl-wt .tl-wt-how .tl-box{margin:0}
.tl-wt .tl-wt-how p{margin:0 0 10px}
.tl-wt .tl-wt-how p:last-child{margin-bottom:0}
.tl-wt .tl-wt-rule{list-style:none;margin:0 0 12px;padding:0}
.tl-wt .tl-wt-rule li{position:relative;padding:9px 12px 9px 34px;margin:0 0 6px;border-radius:12px;background:#fff;font-size:15px;line-height:1.45;color:#3a3a3a}
.tl-wt .tl-wt-rule li::before{content:'';position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--wt-red)}
.tl-wt .tl-wt-rule b{font-family:'lp-figtree-600',Arial,sans-serif;font-weight:600;color:var(--wt-dark)}
.tl-wt .tl-wt-ex{padding:10px 12px;border-radius:12px;border:1px dashed rgba(0,0,0,.15);font-size:14px!important}
.tl-wt .tl-wt-ex b{font-family:'lp-figtree-600',Arial,sans-serif;font-weight:600;color:var(--wt-dark)}
.tl-wt>.tl-warn{margin-top:0}
.tl-wt>.tl-warn b{font-family:'lp-figtree-600',Arial,sans-serif;font-weight:600;color:var(--wt-dark)}

@media (max-width:1000px) and (min-width:751px){
 .tl-wt .tl-wt-grid{grid-template-columns:1fr}
 .tl-wt .tl-wt-out{position:static}
}
@media (max-width:750px){
 .tl-wt .tl-wt-grid{grid-template-columns:1fr;gap:16px;margin-bottom:16px}
 .tl-wt .tl-wt-out{position:static}
 .tl-wt .tl-wt-form{padding:2px 16px}
 .tl-wt .tl-wt-res{padding:16px}
 .tl-wt .tl-wt-sec{padding:14px 0 16px}
 .tl-wt .tl-wt-sh{margin-bottom:10px;gap:8px}
 .tl-wt .tl-wt-n{width:22px;height:22px;font-size:12px;line-height:22px}
 .tl-wt .tl-wt-two{gap:8px}
 .tl-wt label,.tl-wt .tl-wt-lab{font-size:11.5px}
 .tl-wt .tl-wt-gap,.tl-wt .tl-wt-lab.tl-wt-gap{margin-top:12px}
 .tl-wt .tl-wt-sub{font-size:11px;margin-top:4px}
 .tl-wt .tl-wt-sel::after{right:14px;width:6px;height:6px;margin-top:-5px}
 .tl-wt .tl-wt-sel select{padding-right:32px;font-size:13.5px}
 .tl-wt .tl-wt-unit input{padding-right:32px}
 .tl-wt .tl-wt-unit i{right:14px;font-size:12px}
 .tl-wt input[type=date],.tl-wt input[type=time]{line-height:38px;font-size:13.5px;padding:0 12px}
 .tl-wt .tl-wt-hikeinfo{font-size:12px;padding:8px 12px;border-radius:10px}
 .tl-wt .tl-wt-ed{font-size:11px}
 .tl-wt .tl-wt-seg{padding:3px;gap:2px}
 .tl-wt .tl-wt-seg button{height:36px;font-size:12px;padding:0 4px}
 .tl-wt .tl-wt-locline{font-size:12px;gap:6px}
 .tl-wt .tl-wt-locline svg{width:15px;height:15px}
 .tl-wt .tl-wt-locline em{font-size:11px}
 .tl-wt .tl-wt-search svg{left:13px;width:15px;height:15px;margin-top:-7.5px}
 .tl-wt .tl-wt-search input[type=search]{padding-left:36px}
 .tl-wt .tl-wt-hres{border-radius:12px;padding:4px}
 .tl-wt .tl-wt-hres li{min-height:36px;font-size:12.5px;padding:4px 10px}
 .tl-wt .tl-wt-hres li span{font-size:11px}
 .tl-wt .tl-wt-k{font-size:10.5px}
 .tl-wt .tl-wt-big{font-size:38px;margin:4px 0}
 .tl-wt .tl-wt-hl{font-size:12px}
 .tl-wt .tl-wt-badge{height:24px;padding:0 9px;font-size:10.5px}
 .tl-wt .tl-wt-head{gap:8px}
 .tl-wt .tl-wt-tl{margin-top:16px}
 .tl-wt .tl-wt-tlbar{height:48px;padding-top:24px}
 .tl-wt .tl-wt-sky,.tl-wt .tl-wt-mark,.tl-wt .tl-wt-mz{top:24px}
 .tl-wt .tl-wt-sky{border-radius:10px}
 .tl-wt .tl-wt-walk{top:calc(24px + 50%);height:12px;margin-top:-6px;box-shadow:0 0 0 2px #fff,0 3px 8px -2px rgba(237,38,41,.55)}
 .tl-wt .tl-wt-walk::before,.tl-wt .tl-wt-walk::after{width:4px;height:4px;margin-top:-2px}
 .tl-wt .tl-wt-walk::before{left:4px}.tl-wt .tl-wt-walk::after{right:4px}
 .tl-wt .tl-wt-wl{font-size:10.5px;line-height:17px;padding:0 8px}
 .tl-wt .tl-wt-tlax{height:18px;margin-top:4px}
 .tl-wt .tl-wt-tlax span{font-size:10px;line-height:18px}
 .tl-wt .tl-wt-key{font-size:10px;gap:4px 8px;margin-top:6px}
 .tl-wt .tl-wt-key li{gap:4px}
 .tl-wt .tl-wt-key i{width:10px;height:10px;border-radius:3px}.tl-wt .tl-wt-key i.w{width:14px}
 .tl-wt .tl-wt-msg{font-size:12.5px;padding:10px 12px;border-radius:10px;margin-top:14px}
 .tl-wt .tl-wt-tiles{gap:8px;margin-top:10px}
 .tl-wt .tl-wt-tile{padding:10px 11px;border-radius:12px}
 .tl-wt .tl-wt-tile span{font-size:10.5px}
 .tl-wt .tl-wt-tile b{font-size:19px}
 .tl-wt .tl-wt-tile em{font-size:10px}
 .tl-wt .tl-wt-sun{padding:10px 0;border-radius:12px;margin-top:10px}
 .tl-wt .tl-wt-sun svg{width:16px;height:16px}
 .tl-wt .tl-wt-sun span{font-size:10px}
 .tl-wt .tl-wt-sun b{font-size:13.5px}
 .tl-wt .tl-wt-foot{font-size:11px!important}
 .tl-wt .tl-wt-margin{margin-top:12px;padding-top:12px}
 .tl-wt .tl-wt-how{grid-template-columns:1fr;gap:12px}
 .tl-wt .tl-wt-rule li{font-size:13px;padding:8px 10px 8px 28px;border-radius:10px}
 .tl-wt .tl-wt-rule li::before{left:12px;width:6px;height:6px;margin-top:-3px}
 .tl-wt .tl-wt-ex{font-size:12.5px!important}
 .tl-wt>.tl-warn{font-size:12.5px;padding:12px 14px}
}