/* A page's walkthrough, TMB.tour (scripts/tmb-common.js). Colours are tokens.
   The veil takes clicks meant for the page; the cut-out's shadow is the dimming, its hole the part shown.
   Above everything the site pins: the Explore button (99996) and the menu toggle (999999). */
.tmb-tour-veil { position: fixed; inset: 0; z-index: 1000001; }
.tmb-tour-veil-dim { background: var(--tmb-black-60); }
.tmb-tour-spot { position: fixed; z-index: 1000002; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 200vmax var(--tmb-black-60);
                 outline: 3px solid var(--tmb-brand); outline-offset: 0;
                 transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease; }
.tmb-tour-spot-none { visibility: hidden; }
.tmb-tour-spot-track { transition: none; }

.tmb-tour { position: fixed; z-index: 1000003; box-sizing: border-box; width: min(340px, calc(100vw - 16px)); background: #fff; color: var(--tmb-gray-900);
            border: 1px solid var(--tmb-gray-300); border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px var(--tmb-black-20);
            font-size: 14px; line-height: 1.45; text-align: left;
            opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.tmb-tour.tmb-tour-in { opacity: 1; visibility: visible; }
.tmb-tour-welcome { width: min(460px, calc(100vw - 32px)); padding: 22px 24px; font-size: 15px; }
.tmb-tour-step { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tmb-gray-600); }
.tmb-tour-title { font-size: 17px; font-weight: 700; margin: 2px 0 6px; }
.tmb-tour-welcome .tmb-tour-title { font-size: 21px; }
.tmb-tour-body a, .tmb-tour-done a { color: var(--tmb-blue); }
.tmb-tour-done { margin-top: 10px; font-weight: 600; }
.tmb-tour-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
/* The buttons set their own grey and black text on every page (Zach, 2026-10-22):
   front.css paints every <button> grey with !important, and WordPress's theme
   paints a button blue (the Account page), so each is overruled here, with a
   selector more specific than either. The main one is told apart by its green border. */
.tmb-tour .tmb-tour-btn { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; border: 1px solid var(--tmb-gray-500);
                background: var(--tmb-gray-300) !important; color: black !important; border-radius: 8px; padding: 6px 14px; min-height: 36px;
                font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; text-transform: none; box-shadow: none; }
.tmb-tour .tmb-tour-btn:hover, .tmb-tour .tmb-tour-btn:focus { background: var(--tmb-gray-400) !important; color: black !important; }
.tmb-tour .tmb-tour-btn-primary { border: 2px solid var(--tmb-brand); font-weight: 700; }
.tmb-tour .tmb-tour-skip { margin: 0 auto 0 0 !important; background: transparent !important; border: 0; padding: 0; color: var(--tmb-gray-600); font-size: 13px; cursor: pointer; }
.tmb-tour .tmb-tour-skip:hover { text-decoration: underline; background: transparent !important; color: var(--tmb-gray-600); }   /* beats front.css button:hover */
/* A page's "Take the tour" link or button. */
.tmb-tour-start { background: transparent !important; margin: 0 !important; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.tmb-tour-start:hover { text-decoration: underline; background: transparent !important; }
/* A page's older one-tip bubble (TMB.coachmark: Player Stats' "New here?") waits while a tour runs: one guide at a time. */
body:has(> .tmb-tour-veil) [class$="-coachmark"] { display: none !important; }