/* ═══════════════════════════════════════════════════════════
   THE TUTORIAL DRAWER — js/tutorial.js

   Above everything a tool can put on the page: the film studio is 4000,
   its dialogues 4050, the toast 4100. The ring that points at a control
   is above the drawer, and takes no clicks — the reader clicks the real
   thing through it.
   ═══════════════════════════════════════════════════════════ */

.tut{position:fixed;top:0;bottom:0;right:0;z-index:4200;width:min(400px,100vw);display:flex;flex-direction:column;
  background:var(--bg2);color:var(--text);border-left:1px solid var(--border2);box-shadow:var(--shadow-md);
  font:14px/1.5 var(--font-body);animation:tut-in .18s ease-out}
.tut.tut-left{right:auto;left:0;border-left:0;border-right:1px solid var(--border2)}
@keyframes tut-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.tut.tut-left{animation-name:tut-in-l}
@keyframes tut-in-l{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.tut-head{display:flex;align-items:center;gap:10px;padding:14px 12px 10px 16px;border-bottom:1px solid var(--border)}
.tut-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--gold-bg);color:var(--accent);flex:none}
.tut-ico svg{width:18px;height:18px}
.tut-ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.tut-ttl small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.tut-ttl b{font:var(--display-weight,800) 18px/1.15 var(--font-display);font-stretch:var(--display-stretch);color:var(--bright)}
.tut-iconbtn{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;color:var(--text2);cursor:pointer}
.tut-iconbtn:hover{background:var(--bg3);color:var(--text)}
.tut-iconbtn:focus-visible,.tut button:focus-visible,.tut-q:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tut-search{display:flex;align-items:center;gap:8px;margin:10px 16px 4px;padding:0 10px;border-radius:9px;
  background:var(--bg);border:1px solid var(--border2);color:var(--text3)}
.tut-q{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;padding:8px 0;outline:none}

.tut-body{flex:1;overflow:auto;padding:8px 16px 28px;overscroll-behavior:contain}
.tut-intro{color:var(--text2);margin:8px 0 12px}
.tut-foot{color:var(--text3);font-size:13px;margin:14px 2px 0}
.tut kbd{font:600 12px/1 var(--font-body);padding:2px 6px;border-radius:5px;background:var(--bg);border:1px solid var(--border2);color:var(--text);white-space:nowrap}
.tut b{color:var(--bright)}

.tut-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:7px;
  background:var(--gold-bg);color:var(--accent);font:700 12px/1 var(--font-body);flex:none}
.tut-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tut-toc button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;font:inherit}
.tut-toc button:hover{border-color:var(--gold-border);background:var(--bg3)}
.tut-toc button>svg{color:var(--text3);flex:none}
.tut-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.tut-tt small{color:var(--text3);font-size:12.5px;line-height:1.35}

.tut-back{display:inline-flex;align-items:center;gap:4px;margin:4px 0 6px -4px;padding:4px 6px;border:0;border-radius:7px;
  background:none;color:var(--text2);font:inherit;font-size:13px;cursor:pointer}
.tut-back:hover{color:var(--text);background:var(--bg3)}
.tut-h{display:flex;align-items:center;gap:10px;margin:2px 0 0;font:var(--display-weight,800) 20px/1.2 var(--font-display);
  font-stretch:var(--display-stretch);color:var(--bright)}

.tut-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.tut-step{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.tut-step:first-child{border-top:0}
.tut-sn{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--gold-border);
  color:var(--accent);font:700 12px/1 var(--font-body);margin-top:1px}
.tut-step p{margin:0}
.tut-steptip{margin-top:4px!important;color:var(--text2);font-size:13px}
.tut-show{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:5px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold-border);background:var(--gold-bg);color:var(--accent);font:600 12.5px/1 var(--font-body)}
.tut-show:hover{background:var(--accent-fill);color:var(--on-accent)}
.tut-show svg{width:14px;height:14px}
.tut-miss{margin:6px 0 0!important;padding:6px 9px;border-radius:8px;font-size:12.5px;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-border)}

.tut-note{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:13.5px;border:1px solid}
.tut-note>b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.tut-tip{background:var(--blue-bg);border-color:var(--blue-border)}
.tut-tip>b{color:var(--blue)}
.tut-warn{background:var(--amber-bg);border-color:var(--amber-border)}
.tut-warn>b{color:var(--amber)}

.tut-pager{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.tut-pager button{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;line-height:1.25}
.tut-pager button:hover{border-color:var(--gold-border)}
.tut-pager button span{display:flex;flex-direction:column;min-width:0}
.tut-pager small{color:var(--text3);font-size:11px}
.tut-pager .tut-next{grid-column:2;justify-content:flex-end;text-align:right}
.tut-pager svg{flex:none;color:var(--text3)}

.tut-count{color:var(--text3);font-size:12.5px;margin:6px 0}
.tut-empty{color:var(--text2);margin:14px 0}
.tut-hits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tut-hits>li{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg)}
.tut-hitch{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0;color:var(--text2);font:inherit;font-size:13px;cursor:pointer}
.tut-hitch:hover{color:var(--text)}
.tut-hits .tut-step{border-top:0;padding-bottom:2px}

.tut-ring{position:fixed;z-index:4300;pointer-events:none;border-radius:10px;border:3px solid var(--blue);
  box-shadow:0 0 0 4px rgba(59,130,246,.25),0 0 26px rgba(59,130,246,.55);animation:tut-pulse 1s ease-in-out infinite}
@keyframes tut-pulse{50%{box-shadow:0 0 0 9px rgba(59,130,246,.1),0 0 34px rgba(59,130,246,.7)}}
@media (prefers-reduced-motion:reduce){.tut,.tut-ring{animation:none}}

/* the button a tool puts in its own bar */
.tut-open{display:inline-flex;align-items:center;gap:6px}

@media (max-width:600px){
  .tut,.tut.tut-left{width:100vw;border:0}
}
@media print{.tut,.tut-ring{display:none!important}}

/* in the film studio: beside the ? of the keys, and at the foot of its list */
.fly-ui-help{gap:6px}
.fly-ui-tut{margin:12px 0 0}
/* a phone's heading keeps its corner: the book, without its word */
@media (max-width:700px){.page-hd-actions .tut-open span{display:none}}