/* =============================================================================
   mh-guide.css - THE LIVE TOUR (GUIDE01, 2 Oct 2026). Drawn by wwwroot/js/mh-guide.js.

   On the new standard: the bubble is the theme's liquid glass (--tg-rgb, like every surface since
   THEMEGLASS29), the two buttons are the FOOTBTN18 pair (mint gradient primary, glass secondary,
   the Client record footer's values), and the type is the app's own.

   STACKING: above every wizard and record (they top out at 100050) and the Help lightbox (100060),
   below the feedback stack (100091+), which the CEO keeps in front of everything. The floating
   Exit sits at 100095, bottom-LEFT, because bottom-right is the feedback FAB's corner (tour.js
   lesson, 31 Jul: an exit nothing can click is not an exit).
   ============================================================================= */
.mhg{position:fixed;inset:0;z-index:100070;pointer-events:none;
  font-family:var(--mh-font-body,'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif);
  --g-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
           linear-gradient(162deg, #42856E 0%, #2F6B57 60%, #2A5749 100%);
  --g-glow:0 4px 12px -2px rgba(47,107,87,.42);
  --g-glow-hi:0 8px 20px -4px rgba(47,107,87,.5);
  --g-glass:rgba(var(--tg-rgb,255,255,255),.55);
  --g-glass-hi:rgba(var(--tg-rgb,255,255,255),.85);
  --g-rim:rgba(255,255,255,.72);
  --g-ink:#375A50; --g-ink-hi:#1C2733;
  --g-pop:rgba(var(--tg-rgb,255,255,255),.94);
}

/* ONE element paints the dim (see tour.js / mh-tour.css: two translucent fills must never share an edge). */
.mhg-hole{position:fixed;display:none;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(16,26,30,.52);transition:left .28s cubic-bezier(.2,.7,.25,1),top .28s cubic-bezier(.2,.7,.25,1),width .28s cubic-bezier(.2,.7,.25,1),height .28s cubic-bezier(.2,.7,.25,1)}
/* Card steps (no target): the hole is hidden, so the whole screen is dimmed by the block instead. */
.mhg.is-card .mhg-block{background:rgba(16,26,30,.52)}
/* The block swallows every pointer over the app (the JS guard is the second lock). */
.mhg-block{position:fixed;inset:0;pointer-events:auto;background:transparent}
.mhg-ring{position:fixed;display:none;pointer-events:none;border-radius:14px;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 6px rgba(66,133,110,.45),0 14px 34px rgba(0,0,0,.25);
  animation:mhgPulse 2.4s ease-in-out infinite;
  transition:left .28s cubic-bezier(.2,.7,.25,1),top .28s cubic-bezier(.2,.7,.25,1),width .28s cubic-bezier(.2,.7,.25,1),height .28s cubic-bezier(.2,.7,.25,1)}
@keyframes mhgPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 5px rgba(66,133,110,.38),0 14px 34px rgba(0,0,0,.24)}
  50%{box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 0 10px rgba(66,133,110,.22),0 16px 38px rgba(0,0,0,.28)}}
body.reduce-motion .mhg-ring{animation:none}

/* ---- the bubble ---- */
.mhg-pop{position:fixed;pointer-events:auto;width:368px;max-width:calc(100% - 24px);
  background:var(--g-pop);color:var(--mh-ink,#22303a);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);border-radius:18px;padding:16px 18px 16px;
  box-shadow:0 24px 60px -18px rgba(16,30,28,.5),0 2px 6px rgba(16,30,28,.12),inset 0 1px 0 rgba(255,255,255,.9);
  transition:left .28s cubic-bezier(.2,.7,.25,1),top .28s cubic-bezier(.2,.7,.25,1)}
.mhg-pop.is-card{width:440px}
.mhg.is-busy .mhg-pop{opacity:.55}
.mhg.is-busy .mhg-pop .mhg-btn{pointer-events:none}
.mhg-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mhg-eye{display:inline-flex;align-items:center;gap:6px;min-width:0;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2F6B57;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhg-eye svg{width:14px;height:14px;flex:none}
.mhg-x{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--g-ink);background:var(--g-glass);border:1px solid var(--g-rim);transition:background .15s,color .15s}
.mhg-x:hover{background:var(--g-glass-hi);color:var(--g-ink-hi)}
.mhg-x svg{width:14px;height:14px}
.mhg-ttl{font-family:var(--mh-font-head,inherit);font-size:17px;font-weight:700;line-height:1.28;color:var(--mh-ink,#1F2D33);margin-bottom:6px}
.mhg-body{font-size:13.6px;line-height:1.6;color:#4B5A56}
.mhg-body b{color:#1F3B33;font-weight:700}
.mhg-body p{margin:0 0 8px}.mhg-body p:last-child{margin:0}
.mhg-body ul{margin:6px 0 0;padding-left:18px}.mhg-body li{margin:3px 0}
.mhg-body .mhg-note{display:block;margin-top:10px;padding:9px 11px;border-radius:11px;font-size:12.8px;
  background:rgba(47,107,87,.08);box-shadow:inset 0 0 0 1px rgba(47,107,87,.16);color:#2F4A42}
.mhg-prog{height:4px;border-radius:99px;background:rgba(47,107,87,.12);margin:14px 0 12px;overflow:hidden}
.mhg-prog i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#42856E,#2F6B57);transition:width .3s ease}
.mhg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mhg-n{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#6B7B76;white-space:nowrap}
.mhg-btns{display:flex;gap:8px}

/* FOOTBTN18 shape, sized to its words (the owner: "buttons bigger than their text"): no fixed width,
   padding 0 18px, 40px tall inside a bubble (48px is the page-footer height). */
.mhg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 18px;
  border-radius:12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease}
.mhg-btn svg{width:17px;height:17px}
.mhg-btn.pri{background:var(--g-grad);color:#fff;border:1px solid transparent;box-shadow:var(--g-glow)}
.mhg-btn.pri:hover{transform:translateY(-2px);box-shadow:var(--g-glow-hi)}
.mhg-btn.sec{background:var(--g-glass);color:var(--g-ink);border:1px solid var(--g-rim);
  box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26)}
.mhg-btn.sec:hover{background:var(--g-glass-hi);color:var(--g-ink-hi);transform:translateY(-2px)}
.mhg-btn:active{transform:none}
.mhg-btn:focus-visible,.mhg-x:focus-visible,.mhg-exit:focus-visible{outline:2px solid #2F6B57;outline-offset:2px}

/* the arrow - same glass as the bubble */
.mhg-arrow{position:absolute;width:14px;height:14px;background:var(--g-pop);border:1px solid rgba(255,255,255,.8);
  transform:translate(-50%,-50%) rotate(45deg)}
.mhg-arrow.up{top:0;border-right:none;border-bottom:none}
.mhg-arrow.down{top:100%;border-left:none;border-top:none}
.mhg-arrow.left{left:0;border-top:none;border-right:none}
.mhg-arrow.right{left:100%;border-bottom:none;border-left:none}

/* the floating way out */
.mhg-exit{position:fixed;left:22px;bottom:22px;z-index:100095;pointer-events:auto;
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  transition:background .15s,transform .15s}
.mhg-exit:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.mhg-exit svg{width:15px;height:15px}

/* dark */
body.dark .mhg{--g-pop:rgba(22,33,31,.94);--g-glass:rgba(255,255,255,.06);--g-glass-hi:rgba(255,255,255,.12);
  --g-rim:rgba(180,210,235,.16);--g-ink:#8FBBA5;--g-ink-hi:#EAF0F4;
  --g-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),linear-gradient(162deg,#3E7A66 0%,#2E5F4E 60%,#274F42 100%)}
body.dark .mhg-pop{border-color:rgba(180,210,235,.14);color:#EAF1EE;box-shadow:0 24px 60px -18px rgba(0,0,0,.7)}
body.dark .mhg-arrow{border-color:rgba(180,210,235,.14)}
body.dark .mhg-ttl{color:#EAF1EE}
body.dark .mhg-body{color:#A9BAB5}
body.dark .mhg-body b{color:#DCEBE4}
body.dark .mhg-eye{color:#8FBBA5}
body.dark .mhg-body .mhg-note{background:rgba(143,187,165,.08);color:#C6D8D0;box-shadow:inset 0 0 0 1px rgba(143,187,165,.18)}
body.dark .mhg-hole{box-shadow:0 0 0 9999px rgba(4,9,12,.64)}
body.dark .mhg.is-card .mhg-block{background:rgba(4,9,12,.64)}

/* GUIDE01c (owner, 2 Oct 2026): "during the Tour guard the feedback agent and it must not be clickable".
   The feedback button sits ABOVE the tour layer (its own z-index), so it was the one thing a person could
   still press. While a tour runs it is dimmed and takes no pointer at all; the JS guard refuses it too. */
body.mh-guiding .fb-fab{pointer-events:none !important;cursor:default;opacity:.32;filter:grayscale(.7);
  box-shadow:none !important;transition:opacity .2s ease,filter .2s ease}
body.mh-guiding:not(.mhg-aishow) .fb-scrim,body.mh-guiding:not(.mhg-aishow) .fb-panel{display:none !important}
/* TOUR30: the steps that tour Matthew House AI itself (body.mhg-aishow). The panel shows and the tour drives it - a person
   still cannot click or type in it. The tour's layer goes above the panel so its ring and bubble are not hidden behind it. */
body.mh-guiding.mhg-aishow .fb-fab{opacity:1;filter:none}
body.mh-guiding.mhg-aishow .fb-panel{pointer-events:none !important}
body.mh-guiding.mhg-aishow .mhg{z-index:100094}
/* GUIDE03: the Getting Around tour's Feedback step shows the bubble at full strength - still locked. */
body.mh-guiding.mhg-fbshow .fb-fab{opacity:1;filter:none}

/* TOUR29 (4 Oct 2026) - THE BIG BADGE on a tour card (owner: "the previous tours had a big icon on top"). The first tours'
   own recipe (parked mh-tour.css .mht-badge): a 64px pine tile, white glyph, soft shadow - it springs in once, and a slow
   ring breathes around it. A card with a badge centres its title. Reduced motion: no spring, no ring. */
.mhg-badge{position:relative;width:64px;height:64px;border-radius:20px;margin:8px auto 16px;display:grid;place-items:center;
  background:linear-gradient(135deg,#6E9B8E,#4E7C72 60%,#3C6258);color:#fff;
  box-shadow:0 14px 28px rgba(60,98,88,.38),inset 0 1px 0 rgba(255,255,255,.28);
  animation:mhgbadge .55s cubic-bezier(.34,1.5,.5,1) both}
.mhg-badge svg{width:32px;height:32px}
.mhg-badge::after{content:"";position:absolute;inset:-7px;border-radius:26px;border:2px solid rgba(110,155,142,.55);
  animation:mhgring 2.6s ease-out .5s infinite;pointer-events:none}
@keyframes mhgbadge{from{opacity:0;transform:scale(.55) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes mhgring{0%{opacity:.75;transform:scale(.94)}70%{opacity:0;transform:scale(1.18)}100%{opacity:0;transform:scale(1.18)}}
.mhg-pop.has-badge .mhg-ttl{text-align:center;font-size:21px;line-height:1.25}
.mhg-pop.has-badge .mhg-body > p:first-child{text-align:center}
body.dark .mhg-badge{box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)}
body.dark .mhg-badge::after{border-color:rgba(143,187,165,.5)}
body.reduce-motion .mhg-badge{animation:none}
body.reduce-motion .mhg-badge::after{animation:none;opacity:0}

/* TOUR31 (4 Oct 2026) - the Version tour's welcome card, as the first tours greeted: "Hi <name>", then the version line,
   then the message. */
.mhg-body p.mhg-lead{text-align:center;font-size:15px;color:var(--mh-ink,#1F2D33);margin:2px 0 12px}
.mhg-pop.has-badge .mhg-body > p.mhg-mid{text-align:center}
body.dark .mhg-body p.mhg-lead{color:#EAF1EE}