/* Guided tour: a card fixed to the bottom of the screen and a ring on the element it describes. */
body.gt-on #app{padding-bottom:var(--gt-room)}
:root{--gt-room:260px}
.gt-card{position:fixed;z-index:60;bottom:18px;left:calc(161px + (100vw - 161px) / 2);transform:translateX(-50%);box-sizing:border-box;width:min(600px,calc(100vw - 201px));padding:15px 18px 14px;background:#fff;border:1px solid #b9d2f2;border-radius:14px;box-shadow:0 16px 44px rgba(10,38,84,.24);font:14px/1.5 Arial,'Segoe UI',sans-serif;color:#102454;animation:gt-card-in .25s ease-out}
.gt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px}
.gt-count{margin:0;font:700 11px/1.4 Arial,'Segoe UI',sans-serif;letter-spacing:.9px;text-transform:uppercase;color:#1d64b8}
.gt-exit{min-height:32px;padding:4px 2px;border:0;background:none;color:#45618e;font:600 12px/1.4 Arial,'Segoe UI',sans-serif;text-decoration:underline;cursor:pointer}
.gt-exit:hover{color:#0059bf}
.gt-title{margin:0 0 4px;font:700 17px/1.35 Arial,'Segoe UI',sans-serif;color:#0b2a5c}
.gt-text{margin:0;font-size:14px;line-height:1.55;color:#28446f}
.gt-off .gt-text{color:#8a4b00}
.gt-actions{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.gt-button{min-height:40px;min-width:96px;padding:8px 16px;border:1px solid #b9d1ec;border-radius:8px;background:#fff;color:#165595;font:600 13px/1.4 Arial,'Segoe UI',sans-serif;cursor:pointer}
.gt-button:hover:not(:disabled){background:#eef5ff}
.gt-button:disabled{opacity:.45;cursor:not-allowed}
.gt-button.gt-primary{background:#0762cd;border-color:#0762cd;color:#fff}
.gt-button.gt-primary:hover{background:#074faa}
.gt-card :is(button,h2):focus-visible{outline:3px solid #0074ed;outline-offset:2px}
.gt-title:focus{outline:none}
.gt-title:focus-visible{outline:3px solid #0074ed;outline-offset:2px}
body.gt-on .gt-ring{outline:3px solid #0b5cff!important;outline-offset:4px;box-shadow:0 0 0 9px rgba(11,92,255,.18)!important;animation:gt-ring-in .5s ease-out}
@keyframes gt-ring-in{from{outline-offset:16px}to{outline-offset:4px}}
@keyframes gt-card-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.gt-card{left:50%;width:min(600px,calc(100vw - 32px))}}
@media(max-width:560px){
  :root{--gt-room:340px}
  .gt-card{left:0;right:0;bottom:0;transform:none;width:auto;padding:13px 16px calc(13px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:16px 16px 0 0;box-shadow:0 -10px 34px rgba(10,38,84,.2)}
  .gt-title{font-size:16px}
  .gt-text{font-size:14px}
  .gt-actions{margin-top:10px}
  .gt-button{flex:1 1 0}
}
@media(prefers-reduced-motion:reduce){.gt-card,body.gt-on .gt-ring{animation:none}}
@media print{.gt-card{display:none}}
