/* ═══════════════════════════════════════════════════════════════════════════
   HANDS-OFF SETUP — modal (first open) + left dock (reopen) + bottom-left FAB
   Matches Energy Agent: body.ho-shell-open shifts .wrap right (not the tab bar).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Twin of Energy Agent rail — same width language + inset chrome */
  --ho-rail: 360px;
  --ho-inset: 12px; /* floating gap around dock card (matches EA companion) */
  --ho-ink:#0E1420;
  --ho-muted:#4C596B;
  --ho-faint:#6B7789;
  --ho-line:rgba(14,165,233,.16);
  --ho-blue:#2196F3;
  --ho-blue-deep:#1976D2;
  --ho-green:#178A4E;
  --ho-green-soft:#D3F2CE;
  --ho-amber:#B45309;
  --ho-amber-soft:rgba(217,119,6,.12);
  --ho-glass:rgba(255,255,255,.78);
  --ho-r:18px; /* match EA companion radius */
  --ho-edge:rgba(14,165,233,.2);
  --ho-glass-bg:linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,249,255,.88));
  --ho-glass-shadow:
    0 20px 50px -20px rgba(15,40,80,.4),
    0 0 0 1px rgba(255,255,255,.5) inset;
}

/* ── bottom-left FAB — twin of Alerts (.ao-al-fab), left instead of right ────
   Instant restore on tour close; single-line "Setup" label (Ford 2026-07-14). */
#hoPill{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:9001;
  display:none;
  align-items:center;
  gap:8px;
  padding:10px 15px 10px 13px;
  border-radius:24px;
  border:1px solid #e6ebf2;
  background:#fff;
  box-shadow:
    0 6px 22px -8px rgba(15,23,42,.28),
    0 1px 2px rgba(15,23,42,.06);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, left .22s ease;
  line-height:1;
}
#hoPill.ho-pill-show{ display:inline-flex; }
#hoPill:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(15,23,42,.34), 0 2px 4px rgba(15,23,42,.08);
  border-color:rgba(37,99,235,.4);
  color:#2563eb;
}
#hoPill:active{ transform:translateY(0) }
#hoPill .ho-pill-ic{
  width:18px; height:18px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  font-size:11px; font-weight:800;
  background:rgba(37,99,235,.12);
  color:#2563eb;
  line-height:1;
}
#hoPill .ho-pill-ic.ho-pill-play{
  background:transparent;
  color:#2563eb;
}
#hoPill .ho-pill-ic.ho-pill-play svg{ display:block }
#hoPill .ho-pill-lab{ letter-spacing:-.01em }
#hoPill.is-progress .ho-pill-ic{
  background:linear-gradient(145deg,#56B4F0,#2196F3);
  color:#fff;
  min-width:18px;
  font-size:10px;
  box-shadow:0 0 0 3px rgba(33,150,243,.14);
}
/* sit clear of Energy Agent rail */
/* Sit just past the EA floating card (same inset as the main column). */
body.ea-shell-open #hoPill{ left:var(--ea-content-inset, calc(var(--ea-gap,14px) + var(--ea-rail,360px) + 12px)); }
/* mobile: above Alerts FAB (also left) + bottom nav */
@media(max-width:720px){
  #hoPill{
    left:14px;
    bottom:calc(124px + env(safe-area-inset-bottom, 0px));
  }
  body.ea-shell-open #hoPill{ left:14px; }
}
@media(max-width:640px){
  /* Match Alerts: label-only collapse not needed — "Setup" is short */
  #hoPill{ padding:10px 13px }
}

/* ── tour shell ──────────────────────────────────────────────────────────── */
#hoTour{
  position:fixed; inset:0; z-index:99965;
  display:flex; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ho-ink);
  pointer-events:none;
  opacity:0;
  /* No fade — instant open (Ford 2026-07-14) */
  transition:none;
}
/* Modal: full-screen shell receives events (backdrop + card).
   Dock: shell is click-through so the main site stays interactive — only
   .ho-sheet captures events (Ford 2026-07-14: click around without dismiss). */
#hoTour.ho-open{ opacity:1; }
#hoTour.ho-open.ho-mode-modal{ pointer-events:auto; }
#hoTour.ho-open.ho-mode-dock{ pointer-events:none; }
#hoTour[hidden]{ display:none !important; }

.ho-backdrop{
  position:absolute; inset:0;
  background:rgba(10,18,32,.38);
  /* Skip backdrop blur — expensive and made open feel laggy */
}
#hoTour.ho-mode-dock{
  align-items:stretch; justify-content:flex-start;
  /* Inset padding = floating companion card, same geometry as EA beside setup */
  padding:var(--ho-inset);
  pointer-events:none; /* pass clicks to .wrap / tabs / canvas */
}
#hoTour.ho-mode-dock .ho-backdrop{
  display:none; /* no scrim — site must feel fully clickable */
  pointer-events:none;
}
/* Dock = twin of #eaPanel companion chrome (glass, radius, edge, shadow) */
#hoTour.ho-mode-dock .ho-sheet{
  pointer-events:auto; /* only the rail is interactive */
  position:relative;
  z-index:1;
  width:var(--ho-rail);
  max-width:min(var(--ho-rail), calc(100vw - (var(--ho-inset) * 2)));
  height:100%;
  max-height:100%;
  border-radius:var(--ho-r);
  border:1px solid var(--ho-edge);
  border-right:1px solid var(--ho-edge);
  box-shadow:var(--ho-glass-shadow);
  animation:none;
  background:var(--ho-glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  backdrop-filter:blur(24px) saturate(1.5);
  overflow:hidden; /* clip inner scroll to rounded corners */
}

.ho-sheet{
  position:relative;
  width:min(440px, 100%);
  max-height:min(920px, calc(100vh - 32px));
  overflow:auto;
  background:var(--ho-glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--ho-edge);
  border-radius:var(--ho-r);
  box-shadow:var(--ho-glass-shadow);
  display:flex; flex-direction:column;
  color:var(--ho-ink);
}

html.sky #hoTour.ho-mode-dock .ho-sheet{
  background:var(--sky-glass-chrome, var(--ho-glass-bg));
  border-color:var(--sky-glass-edge, var(--ho-edge));
  box-shadow:
    0 22px 56px -18px rgba(20,60,120,.38),
    0 0 0 1px rgba(255,255,255,.55) inset;
}
html:not(.sky) #hoTour.ho-mode-dock .ho-sheet{
  background:linear-gradient(180deg, var(--card,#111827), var(--card2,#0b1220));
  border-color:var(--line, rgba(255,255,255,.1));
  color:var(--ink, #e5e7eb);
  box-shadow:12px 0 40px -20px rgba(0,0,0,.55);
}

/* header — twin of .ea-head */
.ho-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(14,165,233,.14);
  flex:0 0 auto;
  background:transparent;
}
.ho-top-right{ display:flex; align-items:center; gap:6px; flex:0 0 auto; padding-top:1px }
.ho-brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto }
.ho-brand-mark{
  width:28px; height:28px; border-radius:999px; flex:0 0 auto;
  background:
    radial-gradient(circle at 35% 30%, #fff7cc 0%, #fbbf24 32%, transparent 48%),
    radial-gradient(circle at 50% 55%, #38bdf8 0%, #0ea5e9 60%, #0369a1 100%);
  box-shadow:0 0 0 3px rgba(56,189,248,.18);
  position:relative;
}
.ho-brand-mark::after{
  content:""; position:absolute; inset:-3px; border-radius:999px;
  border:1.5px solid rgba(14,165,233,.22);
}
.ho-brand b{
  font-size:15px; font-weight:760; letter-spacing:-.01em;
  display:block; line-height:1.2; color:inherit;
}
.ho-brand span{
  font-size:11.5px; font-weight:600; color:var(--ho-muted);
  display:block; line-height:1.35; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:28ch;
}

/* Close — twin of .ea-x (ghost, no hard border box) */
.ho-close{
  width:auto; height:auto; min-width:28px; min-height:28px;
  border-radius:8px;
  border:0;
  background:transparent;
  color:var(--ho-muted);
  font-size:18px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  padding:2px 6px;
  transition:background .12s, color .12s;
  flex:0 0 auto;
}
.ho-close:hover{
  background:rgba(14,165,233,.08);
  color:var(--ho-ink);
  border-color:transparent;
}

/* step pills */
.ho-steps{ padding:10px 12px 4px; flex:0 0 auto; min-width:0 }
/* Track: fixed pill+line sizes so content width is stable. Flex-grow on the
   connector lines made the row reflow (looked like left↔right sliding) when
   the dock width / sibling EA panel changed — especially late steps (17+). */
.ho-stepper{
  display:flex; align-items:center; gap:2px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* JS owns smooth scroll; CSS smooth fights remounts and feels glitchy */
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  padding-bottom:2px;
  min-width:0;
  max-width:100%;
}
.ho-stepper::-webkit-scrollbar{ display:none }
.ho-sp{
  width:26px; min-width:26px; height:26px; border-radius:999px;
  flex:0 0 26px;
  border:1.5px solid var(--ho-line);
  background:rgba(255,255,255,.85);
  font-size:11px; font-weight:750; color:var(--ho-muted);
  cursor:pointer; display:grid; place-items:center;
  transition:background .12s, border-color .12s, color .12s, box-shadow .12s;
  /* never let transform/animations shift layout of the track */
  transform:none;
}
.ho-sp.is-active{
  background:var(--ho-blue); color:#fff; border-color:var(--ho-blue);
  box-shadow:0 4px 12px rgba(33,150,243,.35);
}
.ho-sp.is-done:not(.is-active){
  background:var(--ho-green-soft); color:var(--ho-green);
  border-color:rgba(23,138,78,.35);
}
.ho-sp-line{
  flex:0 0 8px; width:8px; min-width:8px; max-width:8px; height:2px;
  background:var(--ho-line); border-radius:2px;
  pointer-events:none;
}
.ho-stepper-now{
  display:flex; align-items:baseline; gap:8px; margin-top:8px;
  padding:0 4px 2px; flex-wrap:wrap;
}
.ho-stepper-now b{ font-size:12.5px; font-weight:750 }
.ho-stepper-now span{ font-size:11.5px; color:var(--ho-muted); font-weight:600 }
.ho-stepper-pct{
  margin-left:auto;
  font-size:11px; font-weight:800; font-style:normal;
  color:var(--ho-blue-deep);
  background:rgba(33,150,243,.1);
  border:1px solid rgba(33,150,243,.16);
  border-radius:999px; padding:2px 8px;
}
.ho-bullets-open{ margin-top:4px }

.ho-main{ padding:8px 16px 18px; flex:1 1 auto; min-height:0; overflow:auto }

#hoTour.ho-mode-dock .ho-main{ padding:14px 16px 20px }
#hoTour.ho-mode-dock .ho-steps{ padding:10px 14px 4px }
/* Inner scroll lives on .ho-main so the card chrome + rounded corners stay put */
#hoTour.ho-mode-dock .ho-sheet{ overflow:hidden; display:flex; flex-direction:column }

.ho-kicker{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ho-blue-deep);
  background:rgba(33,150,243,.1);
  border:1px solid rgba(33,150,243,.18);
  border-radius:999px; padding:4px 10px; margin:0 0 10px;
}
.ho-title{
  margin:0 0 8px; font-size:22px; font-weight:780; letter-spacing:-.03em;
  line-height:1.2; max-width:22ch;
}
#hoTour.ho-mode-dock .ho-title{ font-size:18px; max-width:none }
.ho-lede{
  margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--ho-muted);
  font-weight:550; max-width:36ch;
}
#hoTour.ho-mode-dock .ho-lede{ font-size:13.5px; max-width:none }

.ho-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px;
}
#hoTour.ho-mode-dock .ho-hero{ grid-template-columns:1fr 1fr; gap:8px }
.ho-hero-card{
  border:1px solid var(--ho-line); border-radius:14px;
  background:rgba(255,255,255,.72); padding:14px 12px;
}
#hoTour.ho-mode-dock .ho-hero-card{ padding:12px }
.ho-hero-card .ho-hc-ic{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; margin-bottom:8px;
  background:rgba(33,150,243,.1); color:var(--ho-blue-deep); font-size:15px;
}
.ho-hero-card.is-ok .ho-hc-ic{ background:var(--ho-green-soft); color:var(--ho-green) }
.ho-hero-card b{ display:block; font-size:13px; font-weight:720; margin-bottom:3px }
.ho-hero-card p{ margin:0; font-size:12px; line-height:1.4; color:var(--ho-muted); font-weight:550 }
#hoTour.ho-mode-dock .ho-hero-card p{ font-size:11.5px }

.ho-callout{
  border-radius:12px; padding:11px 13px; margin:0 0 14px;
  background:rgba(33,150,243,.07); border:1px solid rgba(33,150,243,.16);
  font-size:12.5px; line-height:1.45; color:var(--ho-ink); font-weight:550;
}
.ho-callout b{ font-weight:750 }
.ho-callout.warn{
  background:var(--ho-amber-soft); border-color:rgba(180,83,9,.22); color:var(--ho-amber);
}

.ho-bullets{ margin:0 0 14px; padding:0 0 0 18px }
.ho-bullets li{ margin:0 0 6px; font-size:13.5px; line-height:1.45; color:var(--ho-ink); font-weight:550 }
#hoTour.ho-mode-dock .ho-bullets li{ font-size:12.5px }

.ho-status-row{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px }
.ho-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;
  border:1px solid var(--ho-line); background:rgba(255,255,255,.8); color:var(--ho-muted);
}
.ho-chip.is-on,
.ho-chip.is-ok{ background:var(--ho-green-soft); color:var(--ho-green); border-color:rgba(23,138,78,.3) }
.ho-chip.is-off,
.ho-chip.is-miss{ background:rgba(148,163,184,.12); color:var(--ho-faint) }
.ho-chip-dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.85; flex:0 0 auto;
}

/* text / link-style buttons used in actions */
.ho-btn-text{
  background:transparent; color:var(--ho-muted);
  border:0; padding:8px 6px; font-weight:650;
}
.ho-btn-text:hover{ color:var(--ho-ink) }

/* hero icon alias + 3-up welcome */
.ho-hero-ic,
.ho-hero-card .ho-hc-ic{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center; margin-bottom:8px;
  background:rgba(33,150,243,.1); color:var(--ho-blue-deep); font-size:15px;
}
.ho-hero-card.ho-accent-green .ho-hero-ic{
  background:var(--ho-green-soft); color:var(--ho-green);
}
.ho-hero-3{ grid-template-columns:1fr 1fr 1fr }
#hoTour.ho-mode-dock .ho-hero-3{ grid-template-columns:1fr }
@media(max-width:560px){
  #hoTour.ho-mode-modal .ho-hero-3{ grid-template-columns:1fr }
}

/* done cards (JS uses .ho-done-card) */
.ho-done-card{
  border:1px solid var(--ho-line); border-radius:12px;
  padding:10px 12px; background:rgba(255,255,255,.75);
  font-size:12.5px; font-weight:650;
}
.ho-done-card b{
  display:block; font-size:11px; color:var(--ho-muted); font-weight:700; margin-bottom:2px;
}
.ho-done-card span{ color:var(--ho-ink); font-weight:650 }

/* collapsible tips */
.ho-details{
  margin:0 0 12px; border-radius:12px;
  border:1px solid var(--ho-line); background:rgba(255,255,255,.55);
  padding:2px 12px 4px;
}
.ho-details summary{
  cursor:pointer; font-size:12.5px; font-weight:720; color:var(--ho-muted);
  padding:8px 2px; list-style:none;
}
.ho-details summary::-webkit-details-marker{ display:none }
.ho-details[open] summary{ color:var(--ho-ink) }
.ho-details .ho-bullets{ margin-top:2px }

/* ── Dream step: offtaker invoice + bill lined up ───────────────────────── */
.ho-dream{
  position:relative; margin:0 0 14px; padding:2px;
}
.ho-dream-glow{
  position:absolute; inset:-8px -4px -4px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(33,150,243,.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(63,214,138,.16), transparent 50%);
  pointer-events:none; border-radius:20px; filter:blur(2px);
}
.ho-dream-paper{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(33,150,243,.18);
  background:
    linear-gradient(165deg, rgba(255,255,255,.96), rgba(248,252,255,.9));
  box-shadow:
    0 18px 40px -18px rgba(30,100,180,.35),
    0 1px 0 rgba(255,255,255,.9) inset;
  padding:16px 16px 14px;
}
#hoTour.ho-mode-dock .ho-dream-paper{ padding:14px 12px 12px }
.ho-dream-badge{
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ho-blue-deep);
  background:rgba(33,150,243,.1);
  border:1px solid rgba(33,150,243,.18);
  border-radius:999px; padding:3px 9px; margin:0 0 10px;
}
.ho-dream-from{
  font-size:11px; font-weight:700; color:var(--ho-muted); letter-spacing:.02em;
}
.ho-dream-name{
  font-size:18px; font-weight:780; letter-spacing:-.02em; line-height:1.2;
  margin:2px 0 2px; color:var(--ho-ink);
}
#hoTour.ho-mode-dock .ho-dream-name{ font-size:16px }
.ho-dream-email{
  font-size:12px; color:var(--ho-faint); font-weight:600; margin:0 0 12px;
}
.ho-dream-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:12.5px; padding:5px 0;
  border-bottom:1px dashed rgba(15,23,42,.08);
}
.ho-dream-row span{ color:var(--ho-muted); font-weight:600 }
.ho-dream-row b{ color:var(--ho-ink); font-weight:720; text-align:right }
.ho-dream-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:10px 0 12px; padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(63,214,138,.12), rgba(63,214,138,.06));
  border:1px solid rgba(23,138,78,.18);
}
.ho-dream-total span{ font-size:12px; font-weight:700; color:var(--ho-green) }
.ho-dream-total strong{
  font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ho-green);
}
.ho-dream-bill{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(33,150,243,.06);
  border:1px solid rgba(33,150,243,.14);
}
.ho-dream-bill-ic{
  width:28px; height:28px; border-radius:8px; flex:0 0 auto;
  display:grid; place-items:center;
  background:rgba(33,150,243,.12); color:var(--ho-blue-deep);
  font-size:13px; font-weight:800;
}
.ho-dream-bill b{
  display:block; font-size:12.5px; font-weight:750; color:var(--ho-ink); margin-bottom:2px;
}
.ho-dream-bill span{
  display:block; font-size:11.5px; color:var(--ho-muted); font-weight:600; line-height:1.35;
}

/* Mode picker (approve vs auto-send) */
.ho-mode-pick{ margin:0 0 14px }
.ho-mode-pick-lab{
  font-size:12px; font-weight:750; color:var(--ho-ink); margin:0 0 8px;
}
.ho-mode-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
#hoTour.ho-mode-dock .ho-mode-cards{ grid-template-columns:1fr }
@media(max-width:560px){
  .ho-mode-cards{ grid-template-columns:1fr }
}
.ho-mode-card{
  appearance:none; cursor:pointer; text-align:left;
  border:1px solid var(--ho-line); border-radius:14px;
  background:rgba(255,255,255,.78);
  padding:12px 12px 11px;
  transition:border-color .12s, box-shadow .12s, background .12s, transform .12s;
  font:inherit; color:inherit;
}
.ho-mode-card:hover{
  border-color:rgba(33,150,243,.35);
  box-shadow:0 8px 20px -12px rgba(30,100,180,.4);
}
.ho-mode-card:active{ transform:scale(.99) }
.ho-mode-card.is-on{
  border-color:rgba(33,150,243,.45);
  background:rgba(33,150,243,.07);
  box-shadow:0 0 0 3px rgba(33,150,243,.12);
}
.ho-mode-card.ho-mode-dream.is-on{
  border-color:rgba(23,138,78,.4);
  background:linear-gradient(165deg, rgba(63,214,138,.12), rgba(255,255,255,.85));
  box-shadow:0 0 0 3px rgba(23,138,78,.12);
}
.ho-mode-card.is-chosen{
  position:relative;
}
.ho-mode-card.is-chosen::after{
  content:"✓";
  position:absolute; top:10px; right:12px;
  font-size:13px; font-weight:800; color:var(--ho-green);
}
.ho-mode-tag{
  display:inline-block;
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ho-muted);
  background:rgba(148,163,184,.12);
  border-radius:999px; padding:2px 7px; margin:0 0 6px;
}
.ho-mode-tag.is-rec{
  color:var(--ho-green);
  background:var(--ho-green-soft);
}
.ho-mode-card b{
  display:block; font-size:13.5px; font-weight:760; margin:0 0 4px; color:var(--ho-ink);
}
.ho-mode-card p{
  margin:0; font-size:11.5px; line-height:1.4; color:var(--ho-muted); font-weight:550;
}
.ho-mode-confirm{
  margin:8px 0 0; font-size:12px; line-height:1.4; color:var(--ho-muted); font-weight:600;
}
.ho-mode-confirm.is-ok{ color:var(--ho-green) }
.ho-mode-confirm b{ font-weight:750 }
.ho-mode-card.is-busy{ opacity:.7; pointer-events:none }

.ho-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px;
}
.ho-actions-sp{ flex:1 1 auto; min-width:8px }
#hoTour.ho-mode-dock .ho-actions{ flex-direction:column; align-items:stretch }
#hoTour.ho-mode-dock .ho-actions-sp{ display:none }

.ho-btn{
  appearance:none; border:0; cursor:pointer; font:inherit;
  font-size:13px; font-weight:720; border-radius:12px;
  padding:11px 16px; transition:transform .12s, box-shadow .12s, background .12s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  text-align:center; line-height:1.2;
}
.ho-btn:active{ transform:scale(.98) }
.ho-btn-primary{
  background:linear-gradient(180deg,#42a5f5,#1e88e5);
  color:#fff;
  box-shadow:0 6px 18px -6px rgba(30,136,229,.55);
}
.ho-btn-primary:hover{ box-shadow:0 10px 24px -6px rgba(30,136,229,.65) }
.ho-btn-ghost{
  background:rgba(255,255,255,.75); color:var(--ho-ink);
  border:1px solid var(--ho-line);
}
.ho-btn-ghost:hover{ background:#fff }
.ho-btn-link{
  background:transparent; color:var(--ho-blue-deep); padding:8px 4px;
  font-weight:700; text-decoration:underline; text-underline-offset:2px;
}
.ho-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important }

/* login form */
.ho-login{
  border:1px solid var(--ho-line); border-radius:14px;
  background:rgba(255,255,255,.8); padding:14px; margin:0 0 12px;
}
#hoTour.ho-mode-dock .ho-login{ padding:12px }
.ho-login label{
  display:block; font-size:11.5px; font-weight:700; color:var(--ho-muted);
  margin:0 0 4px;
}
.ho-login select,
.ho-login input[type="text"],
.ho-login input[type="email"],
.ho-login input[type="password"]{
  width:100%; box-sizing:border-box;
  border:1px solid var(--ho-line); border-radius:10px;
  padding:10px 12px; font:inherit; font-size:13.5px; font-weight:600;
  background:#fff; color:var(--ho-ink); margin:0 0 10px;
}
.ho-login select:focus,
.ho-login input:focus{
  outline:none; border-color:var(--ho-blue);
  box-shadow:0 0 0 3px rgba(33,150,243,.18);
}
.ho-login-consent{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; line-height:1.4; color:var(--ho-muted); font-weight:550;
  margin:0 0 10px;
}
.ho-login-consent input{ margin-top:2px; flex:0 0 auto }
.ho-login-msg{ font-size:12px; font-weight:650; margin:0 0 8px; min-height:1.2em }
.ho-login-msg.ok{ color:var(--ho-green) }
.ho-login-msg.err{ color:#b91c1c }
.ho-login-foot{ font-size:11.5px; color:var(--ho-faint); margin:8px 0 0; line-height:1.4 }

.ho-done-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 14px;
}
#hoTour.ho-mode-dock .ho-done-grid{ grid-template-columns:1fr }
.ho-done-item{
  border:1px solid var(--ho-line); border-radius:12px;
  padding:10px 12px; background:rgba(255,255,255,.75);
  font-size:12.5px; font-weight:650;
}
.ho-done-item.is-on{ border-color:rgba(23,138,78,.3); background:var(--ho-green-soft) }
.ho-done-item b{ display:block; font-size:11px; color:var(--ho-muted); font-weight:700; margin-bottom:2px }

/* body.ho-shell-open — shift main wrap for floating dock card
   Occupied width = left inset + rail + right gap before content */
/* ONLY body > .wrap — Resources injects a nested .wrap that must not shift */
body.ho-shell-open > .wrap{
  margin-left:calc(var(--ho-rail) + (var(--ho-inset) * 2));
  max-width:calc(100vw - var(--ho-rail) - (var(--ho-inset) * 2));
  min-width:0;
  transition:margin-left .22s ease;
}
/* When EA is also open, energy-agent.css owns the combined margin (setup + agent).
   Ensure setup rail stays on top of site content and under/beside EA cleanly. */
body.ho-shell-open #hoTour.ho-mode-dock{
  z-index:99966; /* above site; EA companion sits at 99968 to the right */
}
body.ho-shell-open #hoTour.ho-mode-dock .ho-sheet{
  z-index:2;
  /* keep glass companion shadow from dock rules above — don't flatten to hard rail */
}
@media(max-width:900px){
  body.ho-shell-open > .wrap{ margin-left:0; max-width:none }
  #hoTour.ho-mode-dock{
    padding:0; /* full-height sheet on narrow — match EA mobile rail */
  }
  #hoTour.ho-mode-dock .ho-sheet{
    width:min(var(--ho-rail), 100vw);
    max-width:min(var(--ho-rail), 100vw);
    border-radius:0;
    height:100%;
    max-height:100%;
  }
}

@media(max-width:560px){
  #hoTour.ho-mode-modal .ho-sheet{ max-height:min(920px, calc(100vh - 24px)) }
  #hoTour.ho-mode-modal .ho-main{ padding:18px 16px 18px }
  #hoTour.ho-mode-modal .ho-hero{ grid-template-columns:1fr }
  #hoTour.ho-mode-dock .ho-sheet{
    width:100%; max-width:100%;
  }
}

/* sky theme soft tweaks */
html.sky #hoPill{
  border-color:rgba(33,150,243,.22);
  box-shadow:0 8px 24px -10px rgba(20,60,120,.28), 0 1px 2px rgba(15,23,42,.05);
}
html.sky #hoPill:hover{
  border-color:rgba(33,150,243,.45);
  color:#1976D2;
}