/* Studio Help panel and first-time tutorial (js/help.js). Uses the studio's color tokens from app.css. */

/* device-only text inside help articles */
[data-dev="pc"] [data-only="tab"],[data-dev="pc"] [data-only="ph"],[data-dev="pc"] [data-only="touch"],
[data-dev="tab"] [data-only="pc"],[data-dev="tab"] [data-only="ph"],
[data-dev="ph"] [data-only="pc"],[data-dev="ph"] [data-only="tab"]{display:none}

/* Help button in the top bar: on narrower screens Help lives in the ☰ and ⋯ menus instead */
.help-btn{display:none}
body.one-bar .help-btn{display:inline-flex}
@media (max-width:1400px){ body.one-bar .help-btn span{display:none} }
@media (max-width:900px){ body.one-bar .help-btn{display:none} }
/* keep the preview-size buttons on one line now that the bar holds one more button */
body.one-bar #deviceSeg{flex-wrap:nowrap;flex:none}
body.help-open .help-btn{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

/* ---------- Help panel ---------- */
.hp{position:fixed;top:0;right:0;bottom:0;z-index:1400;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(20,22,26,.18);transform:translateX(24px);opacity:0;transition:transform .2s ease,opacity .2s ease;padding-top:env(safe-area-inset-top,0px)}
.hp.in{transform:none;opacity:1}
.hp-h{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px 20px}
.hp-h h2{display:flex;align-items:center;gap:8px;font-size:20px;font-family:var(--f-display);font-weight:800;letter-spacing:-.01em}
.hp-h h2 svg{color:var(--accent)}
.hp-x{border:0;background:var(--panel-2);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.hp-x:hover{color:var(--ink)}
.hp-search{display:flex;align-items:center;gap:10px;margin:6px 16px 12px;padding:0 14px;height:46px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel-2);color:var(--muted);transition:border-color .15s,background .15s}
.hp-search:focus-within{border-color:var(--accent);background:var(--panel)}
.hp-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;color:var(--ink)}
.hp-acts{display:flex;gap:8px;padding:0 16px 12px}
.hp-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);cursor:pointer}
.hp-act.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.hp-act:hover{box-shadow:var(--shadow)}
.hp-chips{display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.hp-chips::-webkit-scrollbar{display:none}
.hp-chips button{flex:none;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.hp-chips button.on{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.hp-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 28px}
.hp-cat{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 4px 8px}
.hp-count{font-size:13px;color:var(--muted);margin:14px 4px 8px}
.hp-a{border:1px solid var(--line);border-radius:14px;margin-bottom:8px;background:var(--panel);transition:border-color .15s}
.hp-a[open]{border-color:var(--accent-line);box-shadow:var(--shadow)}
.hp-a summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;font-weight:700;font-size:15px}
.hp-a summary::-webkit-details-marker{display:none}
.hp-a summary svg{flex:none;color:var(--muted);transition:transform .15s}
.hp-a[open] summary svg{transform:rotate(90deg);color:var(--accent)}
.hp-body{padding:0 14px 14px;color:var(--ink);font-size:14.5px;line-height:1.55}
.hp-body p,.hp-body ul,.hp-body ol{margin:0 0 10px}
.hp-body ul,.hp-body ol{padding-left:20px}
.hp-body li{margin-bottom:5px}
.hp-body b{font-weight:700}
.hp-body a{color:var(--accent);font-weight:600}
.hp-body .muted{color:var(--muted);font-size:13px}
.hp-empty{text-align:center;padding:36px 12px;color:var(--muted)}
.hp-empty b{display:block;color:var(--ink);margin-bottom:6px}
.hp-empty button{border:0;background:var(--accent-soft);color:var(--accent);font-weight:700;border-radius:999px;padding:2px 10px;cursor:pointer}
@media (max-width:600px){
  .hp{top:auto;width:100vw;height:min(88vh,calc(100% - 40px));border-left:0;border-radius:20px 20px 0 0;transform:translateY(40px);box-shadow:0 -12px 40px rgba(20,22,26,.25);padding-bottom:env(safe-area-inset-bottom,0px)}
  .hp.in{transform:none}
  .hp-h{padding-top:12px}
}

/* ---------- tutorial: dimmed studio with a spotlight on the real control ---------- */
/* edit panes, menus and pop-ups step aside while the tour runs and come back when it ends */
body.tour-open #fInsp,body.tour-open #fLib,body.tour-open #btnPop,body.tour-open .modal-bg,body.tour-open .ob-menu,body.tour-open #coach{visibility:hidden!important}
.ct{position:fixed;inset:0;z-index:1500;opacity:0;transition:opacity .22s ease}
.ct.in{opacity:1}
.ct-block{position:absolute;inset:0}
.ct-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 200vmax rgba(14,10,13,.62);outline:2px solid var(--accent);outline-offset:2px;pointer-events:none;transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease,border-radius .3s ease}
.ct-hole::after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 0 rgba(194,40,124,.6);animation:ctPulse 1.8s ease-out infinite}
.ct-hole.none{outline:0;border-radius:0}
.ct-hole.none::after{display:none}
@keyframes ctPulse{0%{box-shadow:0 0 0 0 rgba(194,40,124,.55)}70%{box-shadow:0 0 0 14px rgba(194,40,124,0)}100%{box-shadow:0 0 0 0 rgba(194,40,124,0)}}
.ct-tip{position:fixed;background:var(--panel);color:var(--ink);border-radius:18px;padding:18px 18px 16px;box-shadow:0 24px 60px -16px rgba(0,0,0,.5),0 0 0 1px var(--line);transition:left .3s ease,top .3s ease;--ax:50%}
.ct-tip::before{content:"";position:absolute;left:var(--ax);width:14px;height:14px;background:var(--panel);transform:translateX(-50%) rotate(45deg);box-shadow:-1px -1px 0 var(--line)}
.ct-tip[data-side="below"]::before{top:-7px}
.ct-tip[data-side="above"]::before{bottom:-7px;box-shadow:1px 1px 0 var(--line)}
.ct-tip:not([data-side="below"]):not([data-side="above"])::before{display:none}
.ct-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ct-step{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ct-skip{border:0;background:none;color:var(--muted);font-weight:700;font-size:13.5px;cursor:pointer;padding:4px 6px;border-radius:8px}
.ct-skip:hover{color:var(--ink);background:var(--panel-2)}
.ct-tip h2{font-family:var(--f-display);font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.15;margin-bottom:6px}
.ct-bang{color:var(--accent)}
.ct-tip p{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.ct-bar{height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:14px}
.ct-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .3s ease}
.ct-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ct-never{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer;user-select:none}
.ct-never input{width:17px;height:17px;accent-color:var(--accent);margin:0}
.ct-nav{display:flex;gap:8px;margin-left:auto}
.ct-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;min-width:42px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel);font-weight:700;font-size:15px;cursor:pointer;color:var(--ink)}
.ct-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;padding:0 18px}
.ct-btn.pri:hover{filter:brightness(1.06)}
@media (max-width:600px){ .ct-tip{padding:16px 16px 14px;border-radius:16px} .ct-tip h2{font-size:19px} .ct-tip p{font-size:14.5px;margin-bottom:12px} }
@media (prefers-reduced-motion:reduce){ .hp,.ct,.ct-hole,.ct-tip,.ct-bar i{transition:none} .ct-hole::after{animation:none} }