/* v45.8 Tutor mode: coach marks. The layer never takes taps; only the card does. */
.tt-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.tt-ring { position: fixed; border-radius: 14px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(14,21,34,.38); transition: all var(--dur) var(--ease); }
.tt-card { pointer-events: auto; position: fixed; left: max(12px, var(--safe-l, 0px)); right: max(12px, var(--safe-r, 0px)); max-width: 420px; margin: 0 auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); padding: .9rem 1rem 1rem;
  box-shadow: 0 18px 40px rgba(14,21,34,.28); animation: tt-in .22s var(--ease) both; }
.tt-card::before { content: ''; position: absolute; left: var(--tt-ax, 50%); width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.tt-card[data-side="below"]::before { top: -8px; border-right: 0; border-bottom: 0; }
.tt-card[data-side="above"]::before { bottom: -8px; border-left: 0; border-top: 0; }
.tt-welcome::before { display: none; }
.tt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.tt-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tt-step { font-size: .78rem; color: var(--muted); }
.tt-card h2 { font-family: var(--font-display); font-size: 1.08rem; margin: 0 0 .3rem; outline: none; }
.tt-card p { margin: 0 0 .8rem; color: var(--ink-2); font-size: .94rem; line-height: 1.4; }
.tt-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tt-actions .btn { min-height: 40px; }
.tt-actions .tt-off { margin-left: auto; color: var(--muted); background: none; border-color: transparent; text-decoration: underline; }
.tt-welcome-layer { background: rgba(14,21,34,.45); pointer-events: auto; }
.tt-welcome { bottom: calc(var(--tabbar) + 16px); top: auto; padding: 1.2rem 1.1rem 1.1rem; }
.tt-welcome h2 { font-size: 1.3rem; }
@media (min-width: 720px) { .tt-welcome { bottom: auto; top: 30vh; } .tt-card { left: calc(var(--side) + 16px); } }
@keyframes tt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .tt-card, .tt-ring { animation: none; transition: none; } }
.tt-switch { display: flex; align-items: center; gap: .8rem; justify-content: space-between; cursor: pointer; min-height: var(--tap); }
.tt-switch > span:first-child { display: grid; }
.tt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tt-switch-ui { flex: none; width: 50px; height: 30px; border-radius: 30px; background: var(--line-2); position: relative; transition: background var(--dur); }
.tt-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur) var(--ease); }
.tt-switch input:checked + .tt-switch-ui { background: var(--ok); }
.tt-switch input:checked + .tt-switch-ui::after { transform: translateX(20px); }
.tt-switch input:focus-visible + .tt-switch-ui { outline: 3px solid var(--accent); outline-offset: 2px; }
.tt-card .tt-actions .btn.tt-off { background: transparent; box-shadow: none; border-color: transparent; padding-inline: .3rem; }