/* =============================================================
   schedule.css — "Schedule" panel (#panel-schedule)
   -------------------------------------------------------------
   Contains: the UK/Local time toggle (.tz-toggle/.tz-btn), the
   sticky horizontal day strip (.schedule-strip-wrap/.day-strip/
   .day-chip — the active chip is inverted, today's chip gets an
   orange dot), the selected day's header card (.agenda-day-head),
   and the time-gutter agenda (.agenda-canvas): hourly gridlines
   (.agenda-hour, with .day-break marking midnight), one
   duration-proportional block per task (.agenda-block, tinted per
   task type — Drive/Ferry/Sleep/Activity/Food\/Prayer/Buffer/Free,
   note the escaped slash selector for "Food/Prayer"), the current
   time indicator (.agenda-now), and the per-day "Ideas" chip row
   (.ideas-row). Vertical scale is the --hour-px variable set on
   .agenda-canvas; desktop.css raises it at wide widths.
   Data comes from js/data/days.js (via the itinerary API blob).
   Rendered by js/render-schedule.js.
   ============================================================= */
/* ============ SCHEDULE / CALENDAR-AGENDA ============ */
.tz-toggle{
  display:flex; background:var(--paper); border-radius:999px; padding:3px; margin-bottom:12px;
  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)}

.schedule-strip-wrap{
  position:sticky; top:0; z-index:5; background:var(--mist);
  padding:10px 0 12px; margin:0 0 10px;
  /* Full-bleed mist band: cover the panel's side gutters so cards
     scrolling underneath never peek out beside the sticky strip.
     The spread shadow paints sideways; clip-path stops any vertical
     bleed. Disabled at 1180px+ where the strip becomes a sidebar. */
  box-shadow:0 0 0 100vmax var(--mist);
  clip-path:inset(0 -100vmax);
}
.day-strip{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.day-chip{
  border:none; background:var(--paper); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  padding:7px 2px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px;
  position:relative;
}
.day-chip .dc-wd{ font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.05em; color:var(--ink-45); }
.day-chip .dc-num{ font-family:var(--font-display); font-size:19px; line-height:1.1; color:var(--ink); }
.day-chip.active{ background:var(--ink); }
.day-chip.active .dc-wd{ color:var(--paper); opacity:.65; }
.day-chip.active .dc-num{ color:var(--paper); }
.day-chip.today::after{
  content:''; position:absolute; bottom:3px; width:5px; height:5px; border-radius:50%;
  background:var(--buoy);
}

.agenda-day-head{
  background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:15px 16px 14px; margin:4px 0 16px;
}
.agenda-day-head .dtag{ font-family:var(--font-mono); font-size:10.5px; color:var(--teal); font-weight:600; letter-spacing:.03em}
.agenda-day-head h3{ font-family:var(--font-display); font-size:19px; font-weight:400; margin:4px 0 3px; letter-spacing:.01em}
.agenda-day-head .dsub{ font-size:12.5px; color:var(--ink-70)}

.agenda-canvas{
  --hour-px:52px;
  position:relative; margin:10px 0 8px;
  padding-left:52px; /* room for the hour gutter labels */
}
.agenda-hour{
  position:absolute; left:0; right:0; height:0;
  border-top:1px solid var(--line);
}
.agenda-hour-label{
  position:absolute; left:0; top:-7px; width:46px;
  font-family:var(--font-mono); font-size:10px; color:var(--ink-45);
  background:var(--mist); padding-right:4px; line-height:14px;
}
.agenda-hour.day-break{ border-top:1px dashed var(--ink-45); }
.agenda-hour.day-break .agenda-hour-label{ color:var(--ink); font-weight:600; width:auto; text-transform:uppercase; letter-spacing:.04em; }

.agenda-block{
  position:absolute; left:52px; right:0; min-height:22px; overflow:hidden;
  border-radius:var(--radius-sm); padding:6px 10px 5px; box-sizing:border-box;
  background:var(--paper); border-left:3px solid var(--grey); box-shadow:var(--shadow);
}
.agenda-block .ab-time{ font-family:var(--font-mono); font-size:10px; color:var(--ink-45); line-height:1.3; }
.agenda-block .ab-name{ font-size:13px; font-weight:700; line-height:1.25; margin-top:1px; }
.agenda-block .ab-meta{ font-size:11.5px; color:var(--ink-70); line-height:1.3; margin-top:2px; }
.agenda-block .ab-meta i{ color:var(--ink-45); }
.agenda-block.compact{ padding-top:4px; }
.agenda-block.compact .ab-meta{ display:none; }
.agenda-block.tiny{ padding:2px 10px; display:flex; align-items:center; gap:8px; }
.agenda-block.tiny .ab-time{ flex:0 0 auto; }
.agenda-block.tiny .ab-name{ margin:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agenda-block.tiny .ab-meta{ display:none; }

.agenda-block.Drive{ background:var(--teal-10); border-left-color:var(--teal); }
.agenda-block.Drive .ab-time{ color:var(--teal); }
.agenda-block.Ferry{ background:var(--buoy-10); border-left-color:var(--buoy); }
.agenda-block.Ferry .ab-time{ color:var(--buoy); }
.agenda-block.Sleep{ background:var(--grey-10); border-left-color:var(--grey-text); box-shadow:none; }
.agenda-block.Sleep .ab-time{ color:var(--grey-text); }
.agenda-block.Activity{ background:var(--gold-10); border-left-color:var(--gold-text); }
.agenda-block.Activity .ab-time{ color:var(--gold-text); }
.agenda-block.Food\/Prayer{ background:var(--channel-10); border-left-color:var(--channel); }
.agenda-block.Food\/Prayer .ab-time{ color:var(--channel); }
.agenda-block.Buffer{ background:var(--grey-10); border-left:3px dashed var(--grey); box-shadow:none; }
.agenda-block.Free{ background:transparent; border:1px solid var(--line); border-left-width:3px; box-shadow:none; }

.agenda-now{
  position:absolute; left:44px; right:0; height:0; z-index:3;
  border-top:2px solid var(--buoy); pointer-events:none;
}
.agenda-now::before{
  content:''; position:absolute; left:-3px; top:-5px; width:8px; height:8px;
  border-radius:50%; background:var(--buoy);
}
.agenda-now span{
  position:absolute; right:0; top:-16px;
  font-family:var(--font-mono); font-size:9px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--buoy);
}

.ideas-row{ margin-top:24px; padding-left:4px}
.ideas-row .il{ font-size:11px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px}