/* Show me how — the walking guide. Calm, large, high contrast. Never covers the control it points at. */
.smh-pill { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #4A0D24; border: 1.5px solid #D6A84F; border-radius: 999px; padding: 7px 13px 7px 8px; font: 700 14px/1 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(74,13,36,.14); white-space: nowrap; margin-right: 6px; transition: background .15s; }
.smh-pill:hover { background: #FBF3E2; }
.smh-pill:focus-visible { outline: 3px solid #D6A84F; outline-offset: 2px; }
.smh-pill .smh-q { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #6D1232; color: #fff; font-size: 13px; }
.smh-pill.smh-pill--float { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000; margin: 0; padding: 11px 16px 11px 10px; font-size: 15px; }
@media (max-width: 600px) { .smh-pill .smh-label { display: none; } .smh-pill { padding: 7px 8px; } .smh-pill.smh-pill--float .smh-label { display: inline; } }

/* Layer stack */
.smh-layer { position: fixed; inset: 0; z-index: 2147483100; pointer-events: none; }
.smh-dim { position: fixed; background: rgba(27,20,32,.55); pointer-events: none; transition: all .18s ease-out; }
.smh-ring { position: fixed; border-radius: 10px; box-shadow: 0 0 0 4px #D6A84F, 0 0 0 14px rgba(214,168,79,.28); pointer-events: none; transition: all .18s ease-out; animation: smh-ring 1.6s ease-in-out infinite; }
@keyframes smh-ring { 0%,100% { box-shadow: 0 0 0 4px #D6A84F, 0 0 0 14px rgba(214,168,79,.28); } 50% { box-shadow: 0 0 0 4px #D6A84F, 0 0 0 22px rgba(214,168,79,.06); } }
.smh-hand { position: fixed; font-size: 30px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); animation: smh-nudge 1.2s ease-in-out infinite; transition: left .18s, top .18s; }
@keyframes smh-nudge { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-7px,-7px); } }
@media (prefers-reduced-motion: reduce) { .smh-ring, .smh-hand { animation: none; } }

/* Callout */
.smh-callout { position: fixed; pointer-events: auto; background: #FFFDF8; color: #1B1420; border-radius: 16px; padding: 18px 20px 16px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0,0,0,.35); font: 400 17px/1.45 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; transition: left .18s, top .18s; }
.smh-callout::before { content: ""; position: absolute; width: 18px; height: 18px; background: #FFFDF8; transform: rotate(45deg); }
.smh-callout.smh-side-right::before { left: -9px; top: 34px; }
.smh-callout.smh-side-left::before { right: -9px; top: 34px; }
.smh-callout.smh-side-bottom::before { top: -9px; left: 36px; }
.smh-callout.smh-side-top::before { bottom: -9px; left: 36px; }
.smh-callout.smh-side-none::before { display: none; }
.smh-step { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #6D1232; font-weight: 800; }
.smh-say { font-size: 20px; line-height: 1.38; font-weight: 600; margin: 6px 0 8px; color: #1B1420; }
.smh-why { color: #5a5260; margin: 0 0 12px; font-size: 16px; }
.smh-why b { color: #4A0D24; }
.smh-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.smh-spacer { flex: 1; }
.smh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; padding: 11px 18px; font: 700 15px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; border: 1.5px solid transparent; min-height: 44px; }
.smh-btn.smh-primary { background: #6D1232; color: #fff; }
.smh-btn.smh-primary:hover { background: #4A0D24; }
.smh-btn.smh-gold { background: linear-gradient(135deg, #F7E7BC, #D6A84F); color: #2b1b06; }
.smh-btn.smh-ghost { background: transparent; border-color: rgba(109,18,50,.3); color: #4A0D24; }
.smh-btn:disabled { opacity: .5; cursor: default; }
.smh-btn:focus-visible { outline: 3px solid #D6A84F; outline-offset: 2px; }
.smh-quiet { background: none; border: 0; color: #6B6470; font: 600 15px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; padding: 10px 6px; min-height: 44px; }
.smh-quiet:hover { color: #4A0D24; text-decoration: underline; }
.smh-speak { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(109,18,50,.3); background: #fff; color: #4A0D24; cursor: pointer; font-size: 17px; }
.smh-speak[aria-pressed="true"] { background: #6D1232; color: #fff; }
.smh-yours { color: #6D1232; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.smh-choices { display: grid; gap: 8px; margin: 4px 0 12px; }
.smh-choice { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 1.5px solid rgba(109,18,50,.18); border-radius: 12px; padding: 12px 14px; font: 600 16px/1.35 'DM Sans', system-ui, sans-serif; color: #1B1420; cursor: pointer; }
.smh-choice:hover { border-color: #6D1232; background: #FBF3E2; }
.smh-choice .smh-ic { width: 38px; height: 38px; border-radius: 10px; background: #F4E6C4; color: #6D1232; display: grid; place-items: center; flex: 0 0 auto; font-size: 17px; }
.smh-choice small { display: block; font-weight: 400; color: #5a5260; font-size: 14px; margin-top: 2px; }

/* Chooser (what would you like to do) and welcome card */
.smh-panel { position: fixed; pointer-events: auto; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto; background: #FFFDF8; color: #1B1420; border: 1px solid rgba(109,18,50,.16); border-radius: 18px; padding: 20px 20px 16px; box-shadow: 0 24px 60px rgba(74,13,36,.26); font: 400 16px/1.45 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; z-index: 2147483200; }
.smh-panel h3 { font: 700 22px/1.2 'Fraunces', Georgia, serif; color: #4A0D24; margin: 0 28px 4px 0; }
.smh-panel .smh-sub { color: #5a5260; margin: 0 0 12px; }
.smh-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #6B6470; font-size: 20px; cursor: pointer; }
.smh-close:hover { background: #F4E6C4; color: #4A0D24; }
.smh-ask { display: flex; gap: 8px; align-items: center; border: 1.5px solid rgba(109,18,50,.18); border-radius: 12px; padding: 6px 6px 6px 12px; margin-top: 4px; }
.smh-ask input { flex: 1; min-width: 0; border: 0; outline: 0; font: 500 16px 'DM Sans', system-ui, sans-serif; background: transparent; color: #1B1420; }
.smh-ask .smh-mic, .smh-ask .smh-go { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 15px; }
.smh-ask .smh-mic { background: #F4E6C4; color: #6D1232; }
.smh-ask .smh-mic.on { background: #c62828; color: #fff; animation: smh-mic 1.2s ease-in-out infinite; }
@keyframes smh-mic { 0%,100% { box-shadow: 0 0 0 0 rgba(198,40,40,.45); } 50% { box-shadow: 0 0 0 8px rgba(198,40,40,0); } }
.smh-ask .smh-go { background: #6D1232; color: #fff; }
.smh-answer { margin-top: 12px; background: #FBF7F0; border-left: 4px solid #D6A84F; border-radius: 10px; padding: 12px 14px; font-size: 15.5px; line-height: 1.5; }
.smh-answer a { color: #6D1232; font-weight: 700; }
.smh-welcome { position: fixed; pointer-events: auto; z-index: 2147483200; background: #FFFDF8; color: #1B1420; border: 1px solid rgba(214,168,79,.6); border-left: 7px solid #D6A84F; border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(74,13,36,.2); width: min(520px, calc(100vw - 32px)); font: 400 16px/1.5 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.smh-welcome b { color: #4A0D24; font-size: 18px; }
.smh-welcome p { margin: 4px 0 12px; }

/* Done card and status chip */
.smh-done { position: fixed; pointer-events: auto; z-index: 2147483200; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #FFFDF8; color: #1B1420; border-radius: 18px; padding: 24px 26px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0,0,0,.4); text-align: center; font: 400 16px/1.5 'DM Sans', system-ui, sans-serif; }
.smh-done h3 { font: 700 24px/1.2 'Fraunces', Georgia, serif; color: #4A0D24; margin: 0 0 8px; }
.smh-done p { margin: 0 0 16px; color: #332B38; }
.smh-chip { position: fixed; pointer-events: auto; z-index: 2147483200; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: #4A0D24; color: #fff; border-radius: 999px; padding: 10px 10px 10px 18px; display: flex; gap: 10px; align-items: center; font: 600 15px 'DM Sans', system-ui, sans-serif; box-shadow: 0 12px 30px rgba(0,0,0,.3); max-width: calc(100vw - 32px); }
.smh-chip button { border-radius: 999px; border: 0; padding: 8px 14px; font: 700 14px 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.smh-chip .smh-chip-go { background: #D6A84F; color: #2b1b06; }
.smh-chip .smh-chip-x { background: rgba(255,255,255,.15); color: #fff; }
.smh-live { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Phones: the callout becomes a bottom sheet so it never covers the target. */
@media (max-width: 640px) {
  .smh-callout { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 46vh; overflow: auto; }
  .smh-callout::before { display: none; }
  .smh-callout .smh-grab { width: 44px; height: 5px; border-radius: 99px; background: rgba(109,18,50,.25); margin: 0 auto 10px; }
  .smh-say { font-size: 18px; }
  .smh-why { font-size: 15px; }
  .smh-panel { right: 0; left: 0; bottom: 0; width: 100%; border-radius: 18px 18px 0 0; max-height: 80vh; }
  .smh-welcome { left: 16px !important; right: 16px; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .smh-hand { font-size: 26px; }
}
@media (min-width: 641px) { .smh-callout .smh-grab { display: none; } }

/* The site's own dictation wraps the box and adds its mic; hide ours then. */
.smh-ask .input-with-mic { flex: 1; min-width: 0; }
.smh-ask .input-with-mic ~ .smh-mic { display: none; }
.smh-ask .input-with-mic input { width: 100%; }