/* =============================================================
   route.css — "Route" panel (#panel-route)
   -------------------------------------------------------------
   Contains: the UK/Local time toggle (.tz-toggle/.tz-btn), the
   dashed vertical timeline (.route-line, .day-node), each day's
   collapsible header+body (.day-group/.day-head/.day-body), the
   individual timed tasks (.task*), the colored .badge per task
   type (Drive/Ferry/Sleep/Activity/Food\/Prayer/Buffer/Free —
   note the escaped slash selector for "Food/Prayer"), and the
   per-day "Ideas" chip row (.ideas-row).
   Data comes from js/data/days.js. Rendered by js/render-route.js.
   ============================================================= */
/* ============ ROUTE / TIMELINE ============ */
.tz-toggle{
  display:flex; background:var(--paper); border-radius:999px; padding:3px; margin-bottom:16px;
  box-shadow:var(--shadow); width:fit-content;
}
.tz-btn{
  border:none; background:none; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:var(--ink-45); cursor:pointer; font-family:var(--font-mono);
}
.tz-btn.active{ background:var(--ink); color:var(--paper)}

.route-line{ position:relative; padding-left:26px; }
.route-line::before{
  content:''; position:absolute; left:9px; top:8px; bottom:8px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 11px);
}
.day-group{ position:relative; margin-bottom:12px; }
.day-node{
  position:absolute; left:-26px; top:14px; width:20px; height:20px; border-radius:50%;
  background:var(--buoy); border:3px solid var(--mist); z-index:2;
}
.day-head{
  width:100%; text-align:left; background:var(--paper); border:none; border-radius:var(--radius-md);
  box-shadow:var(--shadow); padding:14px 16px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.day-head .dh-left .dtag{ font-family:var(--font-mono); font-size:10.5px; color:var(--teal); font-weight:600; letter-spacing:.03em}
.day-head .dh-left h3{ font-family:var(--font-display); font-size:19px; font-weight:400; margin:2px 0 2px; letter-spacing:.01em}
.day-head .dh-left .dsub{ font-size:12.5px; color:var(--ink-70)}
.day-head .chevron{ transition:transform .2s ease; flex-shrink:0; stroke:var(--ink-45); fill:none; stroke-width:2; width:16px; height:16px}
.day-group.open .chevron{ transform:rotate(180deg) }
.day-body{ display:none; padding:10px 4px 4px 4px; }
.day-group.open .day-body{ display:block }
.task{
  display:flex; gap:10px; background:var(--paper); border-radius:var(--radius-sm);
  padding:11px 12px; margin-top:8px; box-shadow:var(--shadow);
}
.task .ttime{ font-family:var(--font-mono); font-size:11px; color:var(--ink-45); flex:0 0 84px; line-height:1.4; padding-top:1px}
.task .tbody{flex:1; min-width:0}
.task .tbody .tname{ font-size:13.5px; font-weight:700; margin-bottom:2px}
.task .tbody .tloc{ font-size:11.5px; color:var(--ink-45); margin-bottom:5px}
.task .tbody .tnote{ font-size:12px; color:var(--ink-70); font-style:italic}
.badge{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:999px; margin-bottom:5px;
}
.badge.Drive{background:var(--teal-10); color:var(--teal)}
.badge.Ferry{background:var(--buoy-10); color:var(--buoy)}
.badge.Sleep{background:var(--grey-10); color:var(--grey-text)}
.badge.Activity{background:var(--gold-10); color:var(--gold-text)}
.badge.Food\/Prayer{background:var(--channel-10); color:var(--channel)}
.badge.Buffer{background:var(--grey-10); color:var(--grey-text); border:1px dashed var(--line)}
.badge.Free{background:transparent; color:var(--ink-70); border:1px solid var(--line)}
.ideas-row{ margin-top:10px; padding-left:4px}
.ideas-row .il{ font-size:11px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}