/* ---- Interactive tutorial overlay ("Lessons") ---- */

#btn-open-tutorial-topbar{flex:none;width:24px;height:24px;border-radius:6px;background:transparent;border:none;color:rgba(236,234,231,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;}
#btn-open-tutorial-topbar:hover{background:var(--panel3);color:var(--accent-hover);}

#tut-spotlight{
  position:fixed;pointer-events:none;z-index:5000;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(6,5,8,.68),0 0 0 2px var(--accent),0 0 18px 2px var(--accent-hover);
  transition:top .28s cubic-bezier(.4,0,.2,1),left .28s cubic-bezier(.4,0,.2,1),
             width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1),
             opacity .2s;
  opacity:0;
}
#tut-spotlight.on{opacity:1;}
#tut-spotlight.no-target{
  /* whole-screen dim, no cutout — used for pure "info" steps */
  box-shadow:0 0 0 9999px rgba(6,5,8,.55);
}

#tut-tooltip{
  position:fixed;z-index:5001;width:280px;
  background:var(--panel);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  padding:14px 14px 12px;color:var(--text);
  opacity:0;transform:translateY(4px);
  transition:opacity .2s,transform .2s,top .28s cubic-bezier(.4,0,.2,1),left .28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
/* pointer-events stays none on the tooltip BOX itself even once visible —
   only re-enabled on its actual buttons below. A 'state' step's spotlight
   target is often the whole canvas (e.g. "draw a rectangle"); the tooltip
   renders somewhere inside/adjacent to that same huge rect no matter which
   side it picks, and a solid auto-pointer-events panel there would swallow
   the very drag gesture the step is asking for — found live in testing,
   a click/drag that started under the tooltip never reached the canvas
   underneath it at all. */
#tut-tooltip.on{opacity:1;transform:translateY(0);}
#tut-tooltip .tut-next,#tut-tooltip .tut-skip{pointer-events:auto;}

#tut-tooltip .tut-progress{font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;}
#tut-tooltip .tut-title{font-size:13px;font-weight:600;margin-bottom:6px;}
/* Small inline SVG illustrations for the more abstract "info" steps
   (animation principles, symmetry, onion skin) — the spotlight+real-click
   pattern only makes sense once the user already grasps the CONCEPT being
   demonstrated; a tiny looping diagram carries that in a way a paragraph
   of French text can't. Every illustration is pure shape/motion (no baked-
   in text), so it's skipped by T() and never needs translating. Scaled to
   the tooltip's own width (280px, tutorial.css) rather than the SVG's
   intrinsic pixel size, so it never overflows regardless of viewBox.
   Colors are set via CSS classes referencing the app's own theme
   variables (var(--accent)/var(--text-dim)) — never a hardcoded color —
   same reasoning as the search input fix: a literal color would ignore
   the app's dark theme and risk becoming invisible. */
#tut-tooltip .tut-illus-wrap{margin:0 0 10px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:8px;display:flex;justify-content:center;}
#tut-tooltip .tut-illus-wrap svg{width:100%;height:auto;max-width:220px;display:block;color:var(--text-dim);}
#tut-tooltip .tut-body{font-size:11px;line-height:1.5;color:var(--text-dim);margin-bottom:10px;}
#tut-tooltip .tut-hint{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--accent-hover);margin-bottom:10px;}
#tut-tooltip .tut-hint .tut-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:tut-pulse 1.1s ease-in-out infinite;flex:none;}
@keyframes tut-pulse{0%,100%{opacity:.35;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}
#tut-tooltip .tut-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;}
#tut-tooltip .tut-next{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:11px;font-weight:600;cursor:pointer;}
#tut-tooltip .tut-next:hover{background:var(--accent-hover);}
#tut-tooltip .tut-skip{background:none;border:none;color:var(--text-dim);font-size:10px;cursor:pointer;padding:4px;}
#tut-tooltip .tut-skip:hover{color:var(--text);}
#tut-tooltip .tut-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;line-height:1;pointer-events:auto;}
#tut-tooltip .tut-close:hover{color:var(--text);}

/* ---- Module launcher modal ---- */
/* Opened from the start screen (#start-screen, z-index:500) via its own
   row, same reason #kitsu-modal overrides the default .modal-overlay
   z-index:200 — see style.css's comment above #kitsu-modal. */
#tut-launcher{z-index:600;}
#tut-launcher.modal-overlay .modal-box{width:420px;max-height:86vh;display:flex;flex-direction:column;}
#tut-launcher .modal-hdr{gap:8px;}
#tut-launcher #tut-launcher-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* flex:1 + min-height:0 (not a hardcoded max-height calc) so this fills
   whatever space is left after the header/search/ask-footer — adding the
   "Une question ?" footer below would otherwise push the modal taller
   than modal-box's own max-height:86vh instead of just scrolling the
   list, cutting the footer off-screen. */
#tut-launcher .modal-bdy{flex:1;min-height:0;overflow-y:auto;}
#tut-launcher .tut-mod-list{display:flex;flex-direction:column;gap:6px;}
#tut-launcher .tut-launcher-intro{font-size:11px;color:var(--text-dim);margin-bottom:6px;}

/* Search: always visible above the list, regardless of which screen is
   showing — typing flattens results across every category (see
   renderSearchResults in tutorial.js); clearing it restores whatever
   screen was active before. Explicit color:var(--text) on the input
   itself — a bare <input> would otherwise inherit the platform's default
   (often near-black) text color instead of the app's light theme,
   rendering invisible on this dark background. */
#tut-launcher .tut-launcher-search-wrap{position:relative;flex:none;padding:0 14px 10px;}
#tut-launcher .tut-launcher-search-ico{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none;}
#tut-launcher .tut-launcher-search{
  width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--border);
  border-radius:7px;padding:7px 10px 7px 30px;font-size:12px;color:var(--text);outline:none;
}
#tut-launcher .tut-launcher-search::placeholder{color:var(--text-dim);}
#tut-launcher .tut-launcher-search:focus{border-color:var(--accent);}

/* "Une question ?" — a small keyword-search Q&A box pinned below the
   module list (outside .modal-bdy's own scroll area, so it stays visible
   no matter how far the list is scrolled). Not an LLM: scores keyword
   overlap against every step's own title/body (already hand-written,
   accurate content) and surfaces the best match — see the long comment
   above answerQuestion() in tutorial.js for why. Same
   never-hardcode-a-color discipline as the search input above. */
#tut-launcher .tut-ask-wrap{flex:none;border-top:1px solid var(--border);padding:10px 14px;background:var(--panel);}
#tut-launcher .tut-ask-row{display:flex;gap:6px;}
#tut-launcher .tut-ask-input{
  flex:1;min-width:0;box-sizing:border-box;background:var(--bg);border:1px solid var(--border);
  border-radius:7px;padding:7px 10px;font-size:12px;color:var(--text);outline:none;
}
#tut-launcher .tut-ask-input::placeholder{color:var(--text-dim);}
#tut-launcher .tut-ask-input:focus{border-color:var(--accent);}
#tut-launcher .tut-ask-btn{
  flex:none;width:32px;border-radius:7px;background:var(--accent);color:#fff;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
#tut-launcher .tut-ask-btn:hover{background:var(--accent-hover);}
#tut-launcher .tut-ask-answer{
  margin-bottom:8px;padding:10px;background:var(--panel2);border:1px solid var(--border);
  border-radius:8px;color:var(--text);
}
#tut-launcher .tut-ask-title{font-size:12px;font-weight:600;margin-bottom:4px;}
#tut-launcher .tut-ask-body{font-size:11px;line-height:1.5;color:var(--text-dim);margin-bottom:8px;}
#tut-launcher .tut-ask-empty{font-size:11px;color:var(--text-dim);}
#tut-launcher .tut-ask-open{
  background:var(--accent-dim);color:var(--accent-hover);border:none;border-radius:6px;
  padding:6px 10px;font-size:11px;font-weight:600;cursor:pointer;
}
#tut-launcher .tut-ask-open:hover{background:var(--accent);color:#fff;}

/* Back arrow, left of the title — hidden on the top-level category screen,
   shown once a category has been opened. A real drill-down menu (category
   list -> tap one -> its modules on a fresh screen -> back arrow returns),
   not an inline accordion — the two screens replace each other's content
   in #tut-mod-list rather than expanding/collapsing in place. */
#tut-launcher .tut-launcher-back{
  flex:none;width:22px;height:22px;border-radius:6px;background:none;border:none;
  color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
#tut-launcher .tut-launcher-back:hover{background:var(--panel3);color:var(--text);}

/* Category screen — one row per category, whole row navigates in. */
#tut-launcher .tut-cat-hdr{
  display:flex;align-items:center;gap:10px;width:100%;
  background:var(--panel3);border:1px solid var(--border);border-radius:8px;
  padding:11px 12px;cursor:pointer;text-align:left;
  font-size:12px;font-weight:600;color:var(--text);
}
#tut-launcher .tut-cat-hdr:hover{border-color:var(--accent);}
#tut-launcher .tut-cat-name{flex:1;}
#tut-launcher .tut-cat-count{flex:none;font-size:9px;font-weight:600;color:var(--text-dim);background:var(--panel2);border-radius:10px;padding:2px 7px;}
#tut-launcher .tut-cat-chevron{flex:none;display:flex;color:var(--text-dim);}

#tut-launcher .tut-mod{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--border);cursor:pointer;text-align:left;
  color:var(--text);
}
#tut-launcher .tut-mod:hover{border-color:var(--accent);}
#tut-launcher .tut-mod-ico{flex:none;width:28px;height:28px;border-radius:6px;background:var(--accent-dim);color:var(--accent-hover);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
#tut-launcher .tut-mod.done .tut-mod-ico{background:rgba(63,245,120,.16);color:#5fe08a;}
#tut-launcher .tut-mod-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;}
#tut-launcher .tut-mod-title{font-size:12px;font-weight:600;display:block;}
#tut-launcher .tut-mod-desc{font-size:10px;color:var(--text-dim);display:block;}
#tut-launcher .tut-mod-time{flex:none;font-size:9px;color:var(--text-dim);}