/* Guest demo ("Try a robot — no sign-up") + the demo mission checklist.
   Own file so the robot page, the /try page and the fleet page CTA share it
   without touching styles.css. Colours follow styles.css's dark palette. */

:root {
    --mi-bg: #141a36;
    --mi-bg-2: #0d1230;
    --mi-border: #2a3354;
    --mi-text: #e0e0e0;
    --mi-muted: #8a93a6;
    --mi-accent: #4fc3f7;
    --mi-accent-2: #00d4ff;
    --mi-done: #4fc77a;
    --mi-warn: #ffb74d;
}

/* ---------- Shared buttons ---------- */
.mi-btn {
    display: inline-block;
    background: var(--mi-accent);
    color: #0a0e27;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
}
.mi-btn:hover { background: #29b6f6; }
.mi-btn:disabled { opacity: 0.55; cursor: default; }
.mi-btn-ghost {
    background: transparent;
    color: var(--mi-accent);
    border: 1px solid var(--mi-border);
}
.mi-btn-ghost:hover { background: #1e2547; }
.mi-btn-sm { padding: 7px 12px; font-size: 13px; font-weight: 600; }

/* ---------- /try page ---------- */
.try-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 16px 60px;
}
.try-card {
    background: var(--mi-bg);
    border: 1px solid var(--mi-border);
    border-radius: 14px;
    padding: 32px;
    width: 100%;
    max-width: 640px;
    color: var(--mi-text);
    box-sizing: border-box;
}
.try-card h1 { color: #fff; font-size: 26px; margin: 0 0 8px; line-height: 1.25; }
.try-lede { color: #b8c0d4; font-size: 15px; line-height: 1.55; margin: 0 0 20px; }
.try-steps {
    list-style: none;
    counter-reset: trystep;
    margin: 0 0 24px;
    padding: 0;
}
.try-steps li {
    counter-increment: trystep;
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #1f2749;
    font-size: 15px;
}
.try-steps li:last-child { border-bottom: none; }
.try-steps li::before {
    content: counter(trystep);
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e2a52;
    color: var(--mi-accent-2);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.try-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.try-status { margin: 16px 0 0; font-size: 14px; color: #9fd5a0; min-height: 1.2em; }
.try-status.err { color: #ff8a80; }
.try-fine { color: var(--mi-muted); font-size: 12.5px; line-height: 1.5; margin: 20px 0 0; }
.try-fine a, .try-lede a { color: var(--mi-accent); }
.try-banner {
    background: #1b2a1f;
    border: 1px solid #2f5a3a;
    color: #b9e7c4;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin: 0 0 18px;
}
.try-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Small "just want to look?" link on the login + register cards. */
.try-link-box {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--mi-border);
    text-align: center;
    font-size: 14px;
    color: #aaa;
}
.try-link-box a { color: var(--mi-accent-2); font-weight: 600; text-decoration: none; }
.try-link-box a:hover { text-decoration: underline; }

/* ---------- Fleet page (no robots yet) CTA ---------- */
.try-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #16224a 0%, #122036 100%);
    border: 1px solid #2d4a7a;
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0 0 22px;
}
.try-hero h3 { margin: 0 0 6px; color: #fff; font-size: 19px; }
.try-hero p { margin: 0; color: #b8c0d4; font-size: 14px; line-height: 1.5; max-width: 560px; }
.try-hero .try-status { margin-top: 8px; }

/* ---------- Guest nav chip ---------- */
.guest-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1e2a52;
    border: 1px solid #2d4a7a;
    color: #cfe8ff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    white-space: nowrap;
}
.guest-chip strong { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Mission checklist (robot page) ---------- */
/* Sits ABOVE the feedback widget's round "?" button (bottom-right, ~56px),
   which would otherwise cover the panel's footer links. */
.mission-panel {
    position: fixed;
    right: 16px;
    bottom: 84px;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    background: var(--mi-bg);
    border: 1px solid #2d4a7a;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
    color: var(--mi-text);
    /* above nipplejs (its joystick draws at z-index 999, and painted over the
       open checklist), below the ending modal and the feedback widget */
    z-index: 1005;
    font-size: 14px;
    box-sizing: border-box;
}
.mission-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mi-border);
    cursor: pointer;
    user-select: none;
}
.mission-head h4 { margin: 0; font-size: 15px; color: #fff; }
.mission-head .mission-sub { color: var(--mi-muted); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mission-toggle { background: none; border: none; color: var(--mi-muted); font-size: 18px; cursor: pointer; padding: 0 2px; }
.mission-panel.collapsed .mission-body { display: none; }
.mission-panel.collapsed .mission-head { border-bottom: none; }
.mission-body { padding: 8px 14px 14px; }
.mission-steps { list-style: none; margin: 0; padding: 0; }
.mission-step {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #1f2749;
}
.mission-step:last-child { border-bottom: none; }
.mission-box {
    flex: 0 0 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid #3b4670;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #0a0e27;
    margin-top: 1px;
    box-sizing: border-box;
}
.mission-step.done .mission-box { background: var(--mi-done); border-color: var(--mi-done); }
.mission-step.done .mission-title { color: #9fb3a5; text-decoration: line-through; text-decoration-color: rgba(159, 179, 165, 0.5); }
.mission-step.current .mission-box { border-color: var(--mi-accent-2); }
.mission-step.current .mission-title { color: #fff; font-weight: 600; }
.mission-title { line-height: 1.35; }
.mission-hint { color: #aeb7cc; font-size: 13px; line-height: 1.45; margin-top: 5px; }
.mission-note { color: var(--mi-warn); font-size: 13px; line-height: 1.4; margin-top: 5px; }
.mission-bar { height: 6px; background: #0d1230; border-radius: 3px; margin-top: 7px; overflow: hidden; }
.mission-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--mi-accent), var(--mi-accent-2)); }
.mission-bar-label { color: var(--mi-muted); font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.mission-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mi-border);
    font-size: 13px;
}
.mission-foot a { color: var(--mi-accent); text-decoration: none; }
.mission-foot a:hover { text-decoration: underline; }
.mission-foot .mission-link-quiet { color: var(--mi-muted); }
.mission-offer {
    position: fixed;
    right: 16px;
    bottom: 84px;
    z-index: 1005;
}
/* On a phone the dashboard is one tall column, so a floating button parked
   mid-screen sits permanently on top of whatever happens to be under it —
   first the LiDAR plot, and (worse) the drive joystick, which is a
   touch-DRAG target. Turn it into a full-width bottom action bar instead:
   content scrolls above it, and the page gets matching bottom padding so the
   last panel is never trapped underneath. */
@media (max-width: 768px) {
    .mission-offer {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(10, 14, 39, 0.98) 70%, rgba(10, 14, 39, 0));
        display: flex;
        justify-content: flex-start;
        /* Leave the bottom-right corner to the feedback widget's round "?"
           button (~56px + margin) so it never sits on the CTA's text. */
        padding-right: 76px;
    }
    .mission-offer .mi-btn {
        width: 100%;
        justify-content: center;
        font-size: 15px;
        padding: 12px 16px;
    }
    /* Keep the last panel and the help FAB clear of the bar. */
    body.robot-page { padding-bottom: 72px; }
}

/* ---------- Ending screen ---------- */
.mission-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 22, 0.72);
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mission-modal {
    background: var(--mi-bg);
    border: 1px solid #2d4a7a;
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px;
    color: var(--mi-text);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}
.mission-modal .mission-kicker { color: var(--mi-done); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mission-modal h2 { color: #fff; font-size: 24px; margin: 6px 0 10px; line-height: 1.25; }
.mission-modal p { color: #b8c0d4; line-height: 1.55; margin: 0 0 14px; font-size: 15px; }
.mission-modal .mission-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.mission-modal .mission-small { color: var(--mi-muted); font-size: 12.5px; margin: 0 0 16px; }
.mission-modal textarea {
    width: 100%;
    min-height: 70px;
    background: var(--mi-bg-2);
    border: 1px solid var(--mi-border);
    border-radius: 8px;
    color: var(--mi-text);
    padding: 10px;
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
}
.mission-modal label { display: block; color: #aaa; font-size: 13px; margin: 6px 0; }
.mission-modal .mission-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.mission-modal .mission-close { background: none; border: none; color: var(--mi-muted); cursor: pointer; font-size: 14px; }
.mission-sent { color: var(--mi-done); font-size: 13px; }

@media (max-width: 640px) {
    .try-card { padding: 22px 18px; }
    .try-card h1 { font-size: 22px; }
    .mission-panel { right: 8px; left: 8px; bottom: 76px; width: auto; max-width: none; max-height: 50vh; }
}

/* Phones: collapsed = a slim one-line bar ("Mission · 2 of 5 ▸") pinned to the
   bottom-left, beside the round "?" button — it covers no controls. JS starts
   it collapsed at <= 768px (MISSION_NARROW_MAX_W in mission.js). */
.mission-panel.slim {
    left: 8px;
    right: auto;
    bottom: 22px;
    width: auto;
    max-width: calc(100vw - 88px);
    border-radius: 999px;
}
.mission-panel.slim .mission-head { padding: 8px 14px; gap: 10px; }
.mission-panel.slim .mission-head h4 { font-size: 14px; white-space: nowrap; }
.mission-panel.slim .mission-head .mission-sub { display: inline; font-weight: 400; }
.mission-panel.slim .mission-toggle { font-size: 15px; color: var(--mi-accent); }
/* a step ticked while collapsed: flash the bar so the progress is noticed */
.mission-panel.slim.bumped { animation: mission-bump 1.6s ease-out 1; }
@keyframes mission-bump {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.9); border-color: var(--mi-done); }
    100% { box-shadow: 0 0 0 14px rgba(76, 175, 80, 0); border-color: #2d4a7a; }
}
@media (max-width: 640px) {
    .mission-offer { right: 8px; bottom: 76px; }
    .mission-modal { padding: 22px 18px; }
}