:root{--muted:#59665f;--shadow:none}
[hidden]{display:none!important}
html{scroll-padding-bottom:88px}
body{padding-bottom:88px}
section[id],aside[id],div[id]{scroll-margin-top:16px}
.topbar{padding-bottom:12px}
h1{font-size:clamp(1.35rem,3vw,2rem);line-height:1.25}
.today-card{margin:0 24px 16px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.today-card h2{line-height:1.4;margin-bottom:8px}
.today-card .day-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}
.day-tab[aria-pressed=true]{background:var(--pine);border-color:var(--pine);color:#fff}
.day-tab{min-height:44px;padding:10px 4px;font-size:.95rem}
.day-tab span{display:block}
.today-progress{display:grid;gap:5px;padding:12px 0;font-size:1rem;line-height:1.5}
.today-progress strong{font-size:1.35rem;color:var(--pine)}
#todayStart{min-height:48px;width:100%;font-weight:700}
.today-cutoff{padding:12px;margin:12px 0;background:#fff0cf;line-height:1.6;font-size:1rem;border-radius:8px}
.today-card .helper-text{margin:8px 0}
.status-strip{margin-bottom:16px;flex-wrap:wrap;padding:10px 12px;font-size:.85rem}
.status-strip details{min-width:0}
.status-strip summary{padding:0;min-height:32px;display:list-item;font-size:.85rem}
.status-strip .status-divider{width:auto}
.status-strip #networkText{display:block;padding-top:8px}
.hero-copy{padding:0;max-width:100%}
.hero-copy summary{font-weight:700}
.content-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.panel,.route-card,.decision-card{min-width:0}
.helper-text{font-size:.9rem;line-height:1.6}
.route-row{font-size:1rem;line-height:1.6}
.day-block .route-row{grid-template-columns:100px minmax(0,1fr)}
.route-time{font-weight:700;font-size:1rem;overflow-wrap:anywhere}
.route-time small{font-size:.8rem;font-weight:400}
.route-note{display:block;margin-top:4px;font-size:.9rem;line-height:1.5}
.checkpoint-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.checkpoint-actions strong{font-size:.95rem;flex-basis:100%}
.checkpoint-actions details{flex-basis:100%}
.checkpoint-actions summary{font-size:.9rem;min-height:44px;padding:8px 0}
.checkpoint-actions label,.departure-controls label{display:grid;gap:6px;min-width:0;font-size:.9rem}
.checkpoint-actions input,.departure-controls input{width:100%;min-width:0;font-size:1rem;padding:10px;min-height:44px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)}
.departure-controls details{flex:1 1 100%;min-width:0}
.departure-controls label{margin:8px 0}
.other-day{border-top:1px solid var(--line);margin-top:12px}
.other-day .day-block{padding-top:12px}
summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700;line-height:1.5}
.water-result{padding:0;margin:0 0 12px;background:transparent;overflow-wrap:anywhere}
.water-alert{background:#fff0cf;border-left:3px solid var(--rust);padding:12px;font-size:1rem}
.water-inputs{border-top:1px solid var(--line)}
.water-panel label{font-size:1rem}
.water-segment-table{font-size:.95rem}
.water-segment-table b{font-size:1.15rem}
.water-journey{display:grid;gap:14px;margin:12px 0}
.water-leg{border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0;background:var(--surface)}
.water-leg h4{font-size:1rem;line-height:1.5;margin:0 0 6px}
.water-leg dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.water-leg dt{font-size:.85rem;color:var(--muted);line-height:1.5}
.water-leg dd{font-size:1.15rem;font-weight:700;margin:6px 0 0;color:var(--pine)}
.water-refill{padding:10px 12px;background:#edf2ed;border-radius:6px;line-height:1.6}
.route-card-head{flex-wrap:wrap;gap:8px;align-items:center;font-size:1rem}
.route-card-head>span{flex:1 1 100%}
.map-filters{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.map-filters legend{font-weight:700;font-size:.9rem}
.map-filters label{display:flex;align-items:center;gap:6px;min-height:44px;font-size:.95rem}
.map-filters input,.pack-toggle input{width:20px;height:20px;accent-color:var(--pine)}
.map-details{font-size:.9rem}
.map-place{font-size:.9rem}
.map-place button{min-height:44px}
.place-popup .map-place{padding:0;border:0;gap:8px;max-width:100%;font-size:.85rem;line-height:1.5}
.place-popup .leaflet-popup-content{max-height:230px;overflow:auto;margin:18px 28px 18px 16px}
.leaflet-container a.leaflet-popup-close-button{width:32px;height:32px;font-size:24px;line-height:32px}
.leaflet-touch .leaflet-control-zoom a{width:40px;height:40px;line-height:40px}
.field-nav{position:fixed;z-index:1000;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--pine);padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.field-nav a{display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;min-height:48px;font-size:1rem;font-weight:700;border-radius:7px}
.field-nav a:hover,.field-nav a:focus-visible{background:#31534e}
.weight-result{background:#edf2ed;padding:14px;border-radius:8px;line-height:1.65}
.weight-result>strong{font-size:1.1rem}
.load-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}
.load-row strong{grid-column:1/-1;font-size:.95rem}
.gear-footer{flex-wrap:wrap;gap:8px}
#packItems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.pack-item{margin:0;padding:12px;border:1px solid var(--line);border-radius:8px;min-width:0}
.pack-item legend{font-weight:700;padding:0 6px;overflow-wrap:anywhere}
.pack-toggle{display:flex;gap:8px;align-items:center;min-height:44px}
.pack-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.pack-fields label{display:grid;gap:6px;font-size:.9rem;min-width:0}
.pack-fields label:first-child{grid-column:1/-1}
.pack-fields input,.pack-fields select{width:100%;min-width:0;border:1px solid var(--line);border-radius:7px;min-height:44px;padding:8px;font-size:1rem;background:var(--surface);color:var(--ink)}
button{min-height:44px}
button:disabled{opacity:.6;cursor:default}
input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
#recordStatus:empty,#packStatus:empty{display:none}
@media(max-width:760px){
  .today-card{margin:0 16px 16px;padding:16px}
  .topbar{padding:16px 16px 12px}
  .content-grid{grid-template-columns:minmax(0,1fr)}
  .today-card h2{font-size:1.15rem}
  .today-progress strong{font-size:1.2rem}
  .day-block .route-row{grid-template-columns:88px minmax(0,1fr)}
  .water-segment-table td{grid-template-columns:minmax(0,1fr);gap:4px;font-size:1rem;padding:10px 12px}
  .water-segment-table td::before{white-space:normal;font-size:.9rem}
  .water-segment-table tbody th{font-size:1rem;line-height:1.5}
  #terrainMap{height:400px}
  .water-leg dl{grid-template-columns:minmax(0,1fr);gap:0}
  .water-leg dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .water-leg dt{font-size:.95rem}
  .water-leg dd{margin:0;white-space:nowrap}
  .place-popup .leaflet-popup-content{max-height:180px}
  #packItems{grid-template-columns:minmax(0,1fr)}
  .action-row{gap:8px}
  footer{padding-bottom:24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 手機山徑使用時，當日選擇與單一工作畫面保持一致。 */
.field-daybar{margin:0 24px 12px}
.field-daybar .day-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.field-daybar .day-tab{min-height:52px}
.field-daybar .day-tab span{display:inline-block;margin:0 4px}
.field-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.field-nav a{min-width:0;font-size:.95rem}
.field-nav a[aria-current=page]{background:#f4c978;color:#173c38}
body[data-view] #itinerary,body[data-view] #water{margin:0 24px 20px}
body[data-view] #mapSection{display:block}
body[data-view] .hero-copy{margin-bottom:12px}
body[data-view] .decision-card{margin:20px 0 0;padding:12px}
.field-tools{margin:0 24px}
.field-tools>.panel{margin:0 0 16px}
.view-title{font-size:1.35rem;margin:8px 0 16px}
.tools-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tools-shortcuts a{padding:12px;border:1px solid var(--line);border-radius:8px;min-height:48px;display:flex;align-items:center;color:var(--pine);background:var(--surface);font-weight:700;text-decoration:none}
.record-notice{margin:0 24px 12px}
.record-notice:has(#recordStatus:empty):has(#undoRecord[hidden]){display:none}
.record-notice p{margin:8px 0;line-height:1.6}
#todayArrive{min-height:56px;width:100%;font-weight:700;line-height:1.6;white-space:normal}
#todayDateWarning:empty{display:none}
#todayDateWarning{border-left:3px solid var(--sun);padding:8px 12px}
.status-strip summary{min-height:44px;padding:10px 0}
.status-strip details[open]{flex-basis:100%}
.status-strip details p{line-height:1.6;max-width:44em}
button:disabled{opacity:1;background:#e5e9e5;color:#59665f;border-color:#bac4bb}
button,a,input,select,summary{-webkit-tap-highlight-color:#f4c97880}
button:focus-visible,a:focus-visible{outline:3px solid #a6523d;outline-offset:3px}
.leaflet-container a.leaflet-popup-close-button{width:44px;height:44px;line-height:44px}
.leaflet-touch .leaflet-control-zoom a{width:48px;height:48px;line-height:48px}
.route-card-head button{flex:1 1 auto;min-height:48px}
#terrainMap{height:clamp(400px,65svh,720px);isolation:isolate}
.gear-item{min-height:48px;line-height:1.6}
.gear-item input{width:22px;height:22px;flex-shrink:0}
.map-filter-details{margin:8px 0}
.map-filter-details summary{font-size:1rem}
.helper-text,.route-note,.map-details,.map-place{font-size:1rem}
.route-row>div{min-width:0}
.route-time small{display:block}
@media(max-width:760px){
  .field-daybar{margin:0 16px 12px}
  .field-daybar .day-tab span{display:block;margin:0}
  body[data-view] #itinerary,body[data-view] #water{margin:0 16px 16px}
  .field-tools{margin:0 16px}
  .record-notice{margin:0 16px 12px}
  .field-nav a{font-size:.9rem}
  body[data-view] #mapSection{padding:0 12px 16px}
  #terrainMap{height:clamp(380px,62svh,560px)}
  .route-card{padding:10px}
  .day-block .route-row{grid-template-columns:minmax(68px,auto) minmax(0,1fr);gap:12px}
  .route-time{font-size:.95rem}
  input[type=datetime-local]{max-width:100%}
}
@media(max-width:360px){
  .day-block .route-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .route-time{display:flex;gap:12px;flex-wrap:wrap}
  .route-time small{display:inline}
}