/* In-app tutorial: a step card and a pulsing ring around the highlighted control (Kanat, 25 Oct 2026). */
.tut-card{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2147483000;width:min(380px,calc(100% - 32px));display:flex;flex-direction:column;gap:0;padding:12px 16px 14px;background:var(--surface,#fff);color:var(--ink,#202426);border:1px solid var(--edge-strong,#9ea7ae);border-radius:10px;box-shadow:0 18px 48px rgba(0,0,0,.28);font:14px/1.45 'Public Sans',system-ui,sans-serif;animation:tut-in .25s ease-out}
.tut-card.tut-br{left:auto;right:16px}
.tut-card.tut-tr{left:auto;right:16px;bottom:auto;top:64px}
.tut-card.tut-tl{bottom:auto;top:64px}
.tut-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--secondary,#5e666b)}
.tut-ph{font-weight:700;color:var(--accent,#1d5fbf);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.tut-x{margin-left:auto;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.tut-x:hover{background:var(--hover,#eef0f2)}
.tut-card h3{margin:4px 0 0;font-size:17px;text-wrap:balance}
.tut-card p{margin:6px 0 0}
.tut-card ul{margin:6px 0 0;padding-left:18px;color:var(--secondary,#5e666b);font-size:13px}
.tut-do{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;background:var(--accent-soft,#e8f0fb);color:var(--accent,#1d5fbf);font-weight:600;font-size:13px}
.tut-dot{width:10px;height:10px;border-radius:50%;background:var(--accent,#1d5fbf);animation:tut-blink 1.2s ease-in-out infinite}
.tut-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.tut-dots i{width:16px;height:4px;border-radius:2px;background:var(--edge,#d5dade)}
.tut-dots i.done{background:var(--accent,#1d5fbf);opacity:.45}.tut-dots i.on{background:var(--accent,#1d5fbf)}
.tut-nav{display:flex;align-items:center;gap:8px;margin-top:12px}
.tut-nav .grow{flex:1}
.tut-nav .btn{height:32px}
.tut-skip{font-size:12px}
/* The ring dims the rest of the screen and pulses; "Click" steps add a bouncing tag. Clicks pass through it. */
.tut-ring{box-sizing:border-box;position:fixed;z-index:2147482999;pointer-events:none;border:3px solid var(--accent,#1d5fbf);border-radius:10px;box-shadow:0 0 0 0 rgba(29,95,191,.55),0 0 0 100vmax rgba(12,16,20,.30);animation:tut-pulse 1.6s ease-out infinite;transition:left .2s,top .2s,width .2s,height .2s}
.tut-ring.tut-click{border-color:#e8a317;box-shadow:0 0 0 0 rgba(232,163,23,.6),0 0 0 100vmax rgba(12,16,20,.30);animation-name:tut-pulse-click}
.tut-tap{display:none;position:absolute;top:-30px;left:50%;transform:translateX(-50%);padding:2px 10px;border-radius:12px;background:#e8a317;color:#1d1300;font:700 12px/20px 'Public Sans',system-ui,sans-serif;white-space:nowrap;animation:tut-bounce 1s ease-in-out infinite}
.tut-tap::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#e8a317}
.tut-ring.tut-click .tut-tap{display:block}
@keyframes tut-pulse{0%{box-shadow:0 0 0 0 rgba(29,95,191,.55),0 0 0 100vmax rgba(12,16,20,.30)}70%{box-shadow:0 0 0 14px rgba(29,95,191,0),0 0 0 100vmax rgba(12,16,20,.30)}100%{box-shadow:0 0 0 0 rgba(29,95,191,0),0 0 0 100vmax rgba(12,16,20,.30)}}
@keyframes tut-pulse-click{0%{box-shadow:0 0 0 0 rgba(232,163,23,.65),0 0 0 100vmax rgba(12,16,20,.30)}70%{box-shadow:0 0 0 16px rgba(232,163,23,0),0 0 0 100vmax rgba(12,16,20,.30)}100%{box-shadow:0 0 0 0 rgba(232,163,23,0),0 0 0 100vmax rgba(12,16,20,.30)}}
@keyframes tut-bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
@keyframes tut-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes tut-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tut-card,.tut-ring,.tut-tap,.tut-dot{animation:none}.tut-ring{transition:none}}
.v21 .tut-open{display:inline-flex;align-items:center;gap:6px}
/* Narrower windows show only the book icon so the package bar stays on one line. */
@media (max-width:1279px){.v21 .tut-open .tl{display:none}.v21 .tut-open{min-width:32px;justify-content:center}}
/* Phones: a shorter card that scrolls inside itself, so the highlighted control stays in view. */
/* Phones (an upright iPhone shows about 390 x 660 px in Safari): a compact card. The ring's Click tag replaces the
   "click the highlighted button" line, and the step count replaces the dots. */
@media (max-width:600px){.tut-card{left:8px;right:8px;width:auto;max-height:34vh;max-height:34dvh;overflow:auto;padding:8px 12px 10px;font-size:13px;line-height:1.4}
.tut-card.tut-br,.tut-card.tut-tr{left:8px;right:8px}
.tut-card.tut-tr,.tut-card.tut-tl{top:calc(8px + env(safe-area-inset-top,0px))}
.tut-card h3{font-size:15px;margin-top:2px}.tut-card p{margin-top:4px}.tut-card ul,.tut-card .tut-do,.tut-dots{display:none}
.tut-nav{margin-top:8px}.tut-nav .btn{height:30px}.tut-x{width:24px;height:24px}}