/* Croissant Tour itinerary — interactive layer.
   Three additions to the static table: hover hints, click-to-edit Markdown
   notes, and an inline route map + elevation profile under each riding day.
   Keeps the sheet's Arial / navy / zebra look. */

/* ------------------------------------------------------------- hints ---- */

#itin-tip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  padding: 5px 9px;
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.93);
  color: #fff;
  font: 12px/1.4 Arial, Helvetica, sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}
#itin-tip.on { opacity: 1; }
#itin-tip b { font-weight: 600; }
#itin-tip .tip-url { display: block; margin-top: 2px; color: #b9c7dd; font-size: 11px; }

/* ------------------------------------------------------ route toggle ---- */

/* The Route name unfolds the map + profile below its row. It stays a real
   link so a modifier-click (or JavaScript being off) still reaches
   RideWithGPS; the caret is what says it also opens in place. */
a.routelink { cursor: pointer; }
a.routelink::after { content: " \25B8"; color: #8fa4c0; }
a.routelink:hover::after { color: var(--link); }
a.routelink[aria-expanded="true"] { font-weight: 600; }
a.routelink[aria-expanded="true"]::after { content: " \25BE"; color: var(--link); }

/* -------------------------------------------------- route/elev panel ---- */

tr.routerow > td { padding: 0; background: #fff; }
.routepanel { padding: 8px 10px 10px; }
.routepanel .rp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 6px;
}
.routepanel .rp-name { font-weight: bold; color: var(--navy); }
.routepanel .rp-stats { color: #444; }
.routepanel .rp-stats b { font-weight: 600; }
.routepanel .rp-links { margin-left: auto; }
.routepanel .rp-links a { margin-left: 12px; }
.routepanel .rp-msg { color: #888; font-style: italic; }
.routepanel .rp-msg.err { color: #b00020; font-style: normal; }

.itin-map { width: 100%; height: 340px; background: #eef1f5; border: 1px solid var(--line); }
@media (max-width: 720px) { .itin-map { height: 260px; } }

/* Elevation profile — hover moves a dot along the route on the map. */
.itin-elev { position: relative; width: 100%; margin-top: 6px; }
.itin-elev .ie-plot { position: relative; width: 100%; height: 104px; cursor: crosshair; }
.itin-elev svg { display: block; width: 100%; height: 100%; }
.itin-elev .ie-y { position: absolute; left: 6px; font-size: 10px; color: #9aa0a6; pointer-events: none; }
.itin-elev .ie-y-top { top: 3px; }
.itin-elev .ie-y-bot { bottom: 3px; }
.itin-elev .ie-x { position: relative; height: 16px; font-size: 10px; color: #9aa0a6; }
.itin-elev .ie-xl { position: absolute; top: 1px; transform: translateX(-50%); white-space: nowrap; }
.itin-elev .ie-xl:first-child { transform: none; }
.itin-elev .ie-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.4); pointer-events: none; }
.itin-elev .ie-dot {
  position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: #2979ff; border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.itin-elev .ie-tip {
  position: absolute; top: 4px; padding: 4px 8px; border-radius: 4px;
  background: rgba(20, 20, 20, 0.92); color: #fff;
  font-size: 11px; line-height: 1.35; white-space: nowrap; pointer-events: none;
}
.itin-elev .ie-tip b { font-weight: 600; }

/* ------------------------------------------------------ notes editing --- */

td.notescell { cursor: text; }
td.notescell:hover { outline: 1px dashed #9db4d4; outline-offset: -2px; }
td.notescell:empty::before { content: "add notes\2026"; color: #b6bfcb; font-style: italic; }
td.notescell.editing { cursor: auto; outline: none; background: #fffdf5; }
td.notescell.saved { animation: itin-flash 1.1s ease-out; }
@keyframes itin-flash { from { background: #dff3e0; } to { background: transparent; } }

.note-edit textarea {
  width: 100%;
  min-height: 68px;
  font: 12px/1.45 Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color: #1a1a1a;
  padding: 5px 6px;
  border: 1px solid #9db4d4;
  border-radius: 3px;
  resize: vertical;
}
.note-edit .ne-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 11px;
  color: #777;
}
.note-edit button {
  font: 11px Arial, Helvetica, sans-serif;
  padding: 3px 10px;
  border: 1px solid var(--navy);
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
.note-edit button.ne-cancel { background: #fff; color: var(--navy); }
.note-edit button[disabled] { opacity: 0.5; cursor: default; }
.note-edit .ne-status { margin-left: auto; font-style: italic; }
.note-edit .ne-status.err { color: #b00020; font-style: normal; }

@media print {
  #itin-tip, tr.routerow, .note-edit { display: none !important; }
  td.notescell:hover { outline: none; }
  td.notescell:empty::before { content: ""; }
  a.routelink::after, a.routelink[aria-expanded="true"]::after { content: ""; }
}