/* Tourism route planner - PublicPortal. Class prefix is tourism-route-planner-* because this is a
   SHARED component: nexus-*.css is not loaded on IntranetPortal views. */

.tourism-route-planner-stops {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.tourism-route-planner-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-bottom: 1px solid #eceff1;
    /* Comfortable target for a thumb on a phone. */
    min-height: 44px;
}

.tourism-route-planner-stop:last-child {
    border-bottom: 0;
}

.tourism-route-planner-order {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #38dbff;
    color: #0b2c34;
    font-size: .82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tourism-route-planner-stop-name {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.tourism-route-planner-stop-actions {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tourism-route-planner-stop-actions .btn-link {
    padding: 4px 7px;
}

/* ---- profile toggle ------------------------------------------------------ */
.tourism-route-planner-profiles {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.tourism-route-planner-profiles .btn {
    flex: 1 1 0;
}

/* ---- summary + steps ----------------------------------------------------- */
.tourism-route-planner-summary {
    padding: 8px 12px;
    background: #ddf1f7;
    color: #0a5568;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.tourism-route-planner-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tourism-route-planner-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid #eceff1;
    cursor: pointer;
    min-height: 44px;
}

.tourism-route-planner-step:last-child {
    border-bottom: 0;
}

.tourism-route-planner-step.is-current {
    background: #eaf8fc;
}

.tourism-route-planner-step-icon {
    flex: 0 0 auto;
    width: 26px;
    text-align: center;
    color: #0a6580;
    margin-top: 2px;
}

.tourism-route-planner-step-text {
    flex: 1 1 auto;
    min-width: 0;
}

.tourism-route-planner-step-distance {
    flex: 0 0 auto;
    font-size: .8rem;
    color: #6c818c;
    white-space: nowrap;
    margin-top: 2px;
}

/* ---- live guidance banner ------------------------------------------------
   Pinned to the top of the MAP, outside the sheet: during guidance the sheet sits at half and the
   next manoeuvre has to stay readable above it.

   Absolute inside #map (position:relative), not fixed to the viewport. The component appends it to
   #map so it shares the sheet's stacking context, where the sheet's z-index 2000 outranks this 1040:
   if the visitor pulls the sheet up far enough to meet the banner, the sheet covers the banner and
   never the other way round, so the banner cannot hide the drag grip. See the comment where the
   component appends it. */
/* A near-white card, not the teal it started as and not the slate that replaced it (owner's choice,
   23.09.2026). Teal read as a second municipality header; slate was heavy over a light map. White at
   96% keeps the map faintly present underneath while staying legible outdoors in sun, which is where
   this is actually read.

   `top: 8px` is measured from the map's own top edge, which already starts below the navbar, so
   nothing has to measure it in script. */
.tourism-route-planner-banner {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    z-index: 1040;
    background: rgba(255, 255, 255, .96);
    color: #16232e;
    border: 1px solid rgba(22, 35, 46, .07);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 12px 28px -14px rgba(16, 32, 44, .55);
    display: none;

    /* Transparent to touch. The banner is read, never pressed - it holds no button and no link - so a
       pan that starts on it belongs to the map underneath. This alone did NOT keep the grip reachable:
       while the banner painted over the sheet, a touch on the covered grip fell through to the map and
       panned it. What keeps the grip reachable is the stacking above, not this. */
    pointer-events: none;
}

.tourism-route-planner-banner.is-on {
    display: block;
}

.tourism-route-planner-banner-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* On a pale banner the icon is the only coloured thing, so it is what carries the state. Teal is
   the ordinary "walk on" colour; the state rules below override it. */
.tourism-route-planner-banner-icon {
    flex: 0 0 auto;
    font-size: 1.6rem;
    color: #0e7c9b;
}

.tourism-route-planner-banner-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.25;
}

.tourism-route-planner-banner-distance {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* A softer ink rather than opacity: opacity would fade the whole line including its own weight,
   and on a pale ground that reads as a rendering fault rather than as a quieter line. */
.tourism-route-planner-banner-next {
    margin-top: 6px;
    font-size: .82rem;
    color: #465966;
    line-height: 1.3;
}

/* The three states. They used to flood the whole banner with colour, which a pale banner cannot do
   without making the dark lettering unreadable, so each one now lives on the icon. Every value below
   clears 4.5:1 against the banner's own white, measured, so they hold as text-grade contrast and not
   only as graphics. */
.tourism-route-planner-banner-off .tourism-route-planner-banner-icon,
.tourism-route-planner-banner-waiting .tourism-route-planner-banner-icon {
    color: #a8650a;
}

.tourism-route-planner-banner-arrived .tourism-route-planner-banner-icon {
    color: #2c7a4b;
}

.tourism-route-planner-banner-waiting .tourism-route-planner-banner-text {
    font-weight: 500;
}

/* "Recentre" is on screen for the whole of live guidance (owner's decision, 16.10.2026).
   A child of the banner, hung 8px below its bottom edge at the right, so it is always over the map and
   moves down on its own when the banner grows. Round and icon-only (owner's choice B, 14.10.2026); white
   with the banner's teal, which reads on the light map the same way the banner does. The banner itself
   is transparent to touch, so the button takes touches back for itself. 44px is the touch-target floor
   in Docs/mobile-guidelines.md section 4. */
.tourism-route-planner-recenter {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(22, 35, 46, .07);
    border-radius: 50%;
    background: #ffffff;
    color: #0e7c9b;
    font-size: 1.2rem;
    box-shadow: 0 8px 18px -8px rgba(16, 32, 44, .6);
    pointer-events: auto;
    cursor: pointer;
    /* Chrome on Android paints a SQUARE highlight on tap, which sat round the circle as a pale box. */
    -webkit-tap-highlight-color: transparent;
    display: none;
}

.tourism-route-planner-recenter:active {
    background: #eaf8fc;
}

.tourism-route-planner-recenter.is-on {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tourism-route-planner-recenter:focus-visible {
    outline: 2px solid #0e7c9b;
    outline-offset: 2px;
}

.tourism-route-planner-help {
    font-size: .78rem;
    line-height: 1.35;
}

/* ---- the stop-list actions and the pinned primary -------------------------
   Split out of one centred row (owner's choice B, 23.09.2026).

   "Optimize the order" and "Clear" act on the stop list, so they stay with it and scroll with it.
   "Generate route" is the one thing a visitor came to press, and on a 375x667 phone the third stop
   used to push it to y=675 - eight pixels below the screen - with nothing to say it was there. So it
   is pinned to the bottom of the sheet instead.

   Pinned only INSIDE the mobile sheet. On desktop the pane is a tall sidebar with room to spare, and
   a bar stuck to its bottom would be chrome bought for a problem that does not exist there. */
.tourism-route-planner-listactions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.tourism-route-planner-listactions #tourismrouteplanner-optimize {
    flex: 1 1 auto;
}

.tourism-route-planner-actionbar {
    text-align: center;
    margin-bottom: 8px;
}

body.public-portal .turbosidebar.nexus-sheet--snap .tourism-route-planner-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0 -12px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e6e9ec;
    box-shadow: 0 -4px 12px -10px rgba(16, 32, 44, .45);
}

body.public-portal .turbosidebar.nexus-sheet--snap .tourism-route-planner-actionbar .btn {
    width: 100%;
    /* Section 4 of Docs/mobile-guidelines.md: 44px is the floor for a touch target. The button used
       to be 32px tall and shared its row with two others. */
    min-height: 44px;
    /* inline-flex, not block: with a min-height the label has to be centred vertically, and the icon
       needs a gap it can keep. Hidden buttons carry an inline display:none, which outranks this. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
}

/* The product's own green, the one the guidance banner already uses on arrival, rather than
   Bootstrap's. White on it measures 5.2:1, so the label clears AA as normal text. */
#tourismrouteplanner-guide-start.btn-success,
#tourismrouteplanner-guide-start.btn-success:hover,
#tourismrouteplanner-guide-start.btn-success:focus,
#tourismrouteplanner-guide-start.btn-success:active {
    background-color: #2c7a4b;
    border-color: #2c7a4b;
    color: #ffffff;
}

/* The same reason as the green above. The theme's danger red is #f05050, which gives white letters
   only 3.4:1 - fine on a small link, thin on a full-width primary that is pressed while walking.
   Darkened to 5.4:1, and only for this one button, so nothing else in the app shifts. */
#tourismrouteplanner-guide-stop.btn-danger,
#tourismrouteplanner-guide-stop.btn-danger:hover,
#tourismrouteplanner-guide-stop.btn-danger:focus,
#tourismrouteplanner-guide-stop.btn-danger:active {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

/* The steps scroll UNDER the pinned bar, so the last of them needs somewhere to go. Without this the
   final instruction can never be brought clear of it. */
body.public-portal .turbosidebar.nexus-sheet--snap #tourismrouteplanner-steps {
    padding-bottom: 8px;
}