/* ============================================================
   The hotspot tour (modules/HotspotNav.js): the middle of the pill
   (counter + name) and the tour list it opens. On a phone the list is
   the shared mobile sheet (ContextMenuUtils), so only its rows are
   sized here: 48px for a finger.
   ============================================================ */

/* The pill: centred above the bottom edge on a desktop. On a phone it sits
   in the bottom row between the dock and the minimap button,
   centred in that gap and shrinking its name to fit (app.css PHONE BOTTOM
   ROW). Under 520px the gap is too narrow for it, so it takes the row above. */
#hotspotNav { bottom: 28px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); box-sizing: border-box; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
    #hotspotNav {
        bottom: calc(var(--bottom-row) + 6px);
        left: calc(var(--row-dock-end) + 10px); right: calc(var(--row-map-start) + 10px);
        transform: none; margin-inline: auto; width: fit-content; max-width: none;
    }
    #hotspotNav .hotspot-name { max-width: none; }
}
@media (max-width: 520px) {
    #hotspotNav { bottom: calc(var(--bottom-row) + 68px); left: var(--row-left); right: var(--row-right); }
}

.hotspot-mid {
    display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; padding: 0 10px;
    border: 0; border-radius: 999px; background: none; cursor: pointer;
    color: var(--ui-text, #dadfe0); font: 600 13px var(--ui-font);
}
.hotspot-mid:hover, .hotspot-mid[aria-expanded="true"] { background: rgba(var(--ui-accent-rgb), 0.09); }
.hotspot-mid svg { flex: none; color: var(--ui-text-muted); transition: transform 0.16s ease; }
.hotspot-mid[aria-expanded="true"] svg { transform: rotate(180deg); }
.hotspot-pin { flex: none; display: flex; margin-right: -3px; }
.hotspot-count { flex: none; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
/* Its width is the tour's longest name (HotspotNav sizeToTour), so the arrows
   stay put stop after stop; a shorter name sits by the counter. */
.hotspot-name { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.hotspot-name:empty { display: none; }
/* Not there yet: the name of where › leads. */
.hotspot-name.upcoming { opacity: 0.55; font-weight: 500; }
.hotspot-name.unnamed, .hl-name.unnamed { color: var(--ui-text-dim, #6f8f99); font-style: italic; font-weight: 500; }

/* ---- the list ---- */
.hotspot-list {
    position: fixed; z-index: var(--z-lightbox); width: 340px; box-sizing: border-box; padding: 8px;
    background: rgba(var(--ui-surface-rgb), 0.92); border: 2px solid var(--ui-border); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: var(--ui-text, #dadfe0); font: 400 14px var(--ui-font);
    animation: ctxMenuIn 0.12s ease-out;
}
.hl-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 8px 8px; }
.hl-head b { font-weight: 600; font-size: 14px; }
.hl-head span { color: var(--ui-text-dim, #6f8f99); font-size: 12px; font-variant-numeric: tabular-nums; }
/* The stops and their strings on the canvas (HotspotNav drawHotspotMarks): off
   until pressed, per viewer. Red as the strings are. */
.hl-head { align-items: center; gap: 8px; }
.hl-head span { margin-right: auto; }
.hl-strings { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid rgba(216,72,72,0.45); background: transparent;
    color: var(--ui-text-dim, #9fb5bc); font: 600 12px var(--ui-font, sans-serif); cursor: pointer; }
.hl-strings.on { background: rgba(216,72,72,0.22); border-color: rgba(216,72,72,0.9); color: #ffe3e3; }
/* minmax(0, 1fr): an auto track grows to a long name, and the row then runs
   past the list instead of the name ending in an ellipsis. */
.hl-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 300px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.hl-row {
    position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 6px;
    border-radius: 10px; cursor: pointer;
}
.hl-row:hover { background: rgba(var(--ui-accent-rgb), 0.06); }
.hl-row.cur { background: rgba(var(--ui-teal-rgb), 0.13); }
.hl-row.cur::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: rgb(var(--ui-teal-rgb)); }
.hl-row.dragging { background: rgba(var(--ui-accent-rgb), 0.14); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.hl-grip {
    flex: none; display: grid; place-items: center; width: 22px; height: 32px; padding: 0;
    border: 0; background: none; color: var(--ui-text-dim, #6f8f99); cursor: grab; touch-action: none;
}
.hl-num {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(var(--ui-accent-rgb), 0.1); color: var(--ui-text-muted);
    font: 600 11px var(--ui-font); font-variant-numeric: tabular-nums;
}
.hl-row.cur .hl-num { background: rgb(var(--ui-teal-rgb)); color: #08221f; }
.hl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hl-name-in {
    flex: 1; min-width: 0; box-sizing: border-box; padding: 5px 8px; border-radius: 7px;
    border: 1px solid rgb(var(--ui-teal-rgb)); background: var(--ui-input-bg);
    color: var(--ui-text, #dadfe0); font: 500 14px var(--ui-font);
}
.hl-name-in::placeholder { color: var(--ui-text-dim, #6f8f99); font-style: italic; }
.hl-acts { flex: none; display: flex; gap: 1px; }
.hl-btn {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: none; color: var(--ui-text-muted); cursor: pointer;
}
.hl-btn:hover { background: rgba(var(--ui-accent-rgb), 0.1); color: var(--ui-text, #dadfe0); }
.hl-btn.del:hover { color: var(--ui-danger); background: rgba(255, 138, 128, 0.1); }
.hl-gone {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 40px;
    padding: 0 8px 0 12px; border-radius: 10px; background: rgba(255, 138, 128, 0.08);
    color: var(--ui-text-muted); font-size: 13px;
}
.hl-gone > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-gone em { font-style: normal; color: var(--ui-text, #dadfe0); }
.hl-undo { border: 0; background: none; color: var(--ui-warn-text); font: 600 13px var(--ui-font); padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.hl-undo:hover { background: rgba(242, 184, 75, 0.12); }
.hl-add {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 38px; margin-top: 6px;
    border: 1px dashed rgba(var(--ui-accent-rgb), 0.28); border-radius: 10px; background: none;
    color: var(--ui-text-muted); font: 500 13px var(--ui-font); cursor: pointer;
}
.hl-add:hover { color: rgb(var(--ui-teal-rgb)); border-color: rgb(var(--ui-teal-rgb)); }
.hl-hint { padding: 6px 8px 2px; color: var(--ui-text-dim, #6f8f99); font-size: 11.5px; }
.hotspot-list :focus-visible { outline: 2px solid rgb(var(--ui-teal-rgb)); outline-offset: 1px; }

/* ---- on a phone: the shared sheet, finger-sized rows ---- */
.hotspot-list.mobile-sheet { padding-left: 10px !important; padding-right: 10px !important; border-bottom: 0; }
.hotspot-list.mobile-sheet .hl-rows { max-height: none; overflow: visible; }
.hotspot-list.mobile-sheet .hl-row, .hotspot-list.mobile-sheet .hl-gone { min-height: 48px; }
.hotspot-list.mobile-sheet .hl-grip { width: 30px; height: 44px; }
.hotspot-list.mobile-sheet .hl-btn { width: 40px; height: 44px; }
.hotspot-list.mobile-sheet .hl-add { min-height: 48px; }
.hotspot-list.mobile-sheet .hl-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hotspot-list { animation: none; }
    .hotspot-mid svg { transition: none; }
}

/* A narrated stop (HotspotNav narrate): its words. On a wide screen a column
   at the left, the stop framed in the rest of the screen; on a narrow one over
   the pill, the stop framed above them. While the auto-tour waits on them a
   line fills along the bottom — held while they are pointed at or touched. */
.hotspot-caption { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 6px); z-index: 900;
    width: max-content; max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
    padding: 14px 18px 8px; border-radius: 16px; border: 1px solid rgba(78, 197, 193, 0.35);
    background: rgba(12, 24, 30, 0.96); color: var(--ui-text-bright, #e8f2f4);
    font: 15px/1.55 var(--ui-font, sans-serif); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.hotspot-caption.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hotspot-caption.side { left: 16px; bottom: auto; width: 360px; transform: translateX(-8px); }
.hotspot-caption.side.on { transform: none; }
.hotspot-caption.measure { visibility: hidden; transition: none; }
.hotspot-caption .hc-name { margin: 0 28px 6px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(78, 197, 193); }
.hotspot-caption .hc-text { white-space: pre-wrap; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; }
.hotspot-caption.side .hc-text { max-height: calc(100vh - 300px); }
.hotspot-caption .hc-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.hotspot-caption .hc-track { flex: 1; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(78, 197, 193, 0.14); opacity: 0; transition: opacity 0.2s ease; }
.hotspot-caption.timed .hc-track { opacity: 1; }
.hotspot-caption .hc-bar { height: 100%; background: rgb(78, 197, 193); transform: scaleX(0); transform-origin: left center; }
.hotspot-caption .hc-next { flex: none; min-height: 36px; margin-right: -8px; padding: 0 10px; border: 0; border-radius: 10px;
    background: transparent; color: rgb(78, 197, 193); font: 600 13px var(--ui-font, sans-serif); cursor: pointer; }
.hotspot-caption .hc-next:hover { background: rgba(78, 197, 193, 0.12); }
.hotspot-caption .hc-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: none; border-radius: 8px;
    background: transparent; color: var(--ui-text-dim, #9fb5bc); font-size: 18px; cursor: pointer; }
.hotspot-caption .hc-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
@media (pointer: coarse) {
    .hotspot-caption .hc-next { min-height: 44px; }
    .hotspot-caption .hc-x { top: 0; right: 0; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hotspot-caption { transition: opacity 0.2s ease; } }
.hl-voice { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid rgba(78, 197, 193, 0.45); background: transparent;
    color: var(--ui-text-dim, #9fb5bc); font: 600 12px var(--ui-font, sans-serif); cursor: pointer; }
.hl-voice.on { background: rgba(78, 197, 193, 0.2); border-color: rgba(78, 197, 193, 0.9); color: #e9fffd; }