/* ---- additions: templates, export, guide, tour ---- */
.file-btn.strong{border-style:solid;border-color:var(--ink);color:var(--ink);font-weight:600}
.btn.wide{width:100%;margin-top:10px}
.linkbtn{border:0;background:none;padding:6px 0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:14px}
.test-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#testResult{font-size:14px}
#testResult.ok{color:var(--ok)} #testResult.bad{color:var(--air)}
.tag-sep{flex:none;align-self:center;font-size:12.5px;color:var(--muted);padding:0 4px 0 10px;border-left:1px solid var(--line);margin-left:6px}
.tag.expr{border-style:dashed}
.quick{position:absolute;left:18px;right:18px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.quick[hidden]{display:none}
.quick .btn{pointer-events:auto}
@media (max-width:560px){.quick{left:12px;right:12px}}
dialog.wide-dlg{width:min(880px,calc(100vw - 24px))}

/* templates */
.tpl-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tpl-tools input[type=text]{flex:1;min-width:220px;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-sm);padding:9px 12px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.tpl-card{display:flex;flex-direction:column;gap:8px;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-md);padding:14px;min-height:150px}
.tpl-card:hover{border-color:var(--ink)}
.tpl-card .top-row{display:flex;justify-content:space-between;align-items:center}
.tpl-card b{font-weight:600;font-size:16px;line-height:1.35}
.tpl-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.swatch{width:36px;height:6px;border-radius:3px}
.pill{display:inline-block;font:600 12px var(--f-console);border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted)}
.tpl-detail h4{margin:0 0 4px;font:700 20px var(--f-console)}
.tpl-detail .lead{margin:0 0 12px;color:var(--muted);font-size:14.5px}
.kv{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.back{border:0;background:none;color:var(--muted);padding:0;margin-bottom:10px;font-size:14px}
.tabs{margin-bottom:10px}
pre.box{margin:0;white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;font:400 14.5px/1.75 var(--f-ui);max-height:250px;overflow:auto}
.gen-box{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.gen-box h5{margin:0 0 8px;font:600 15px var(--f-console)}
.gen-row{display:flex;gap:8px;flex-wrap:wrap}
.gen-row input[type=text]{flex:1;min-width:200px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:9px 12px}
.gen-row select{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:9px}
.fine{font-size:13px;color:var(--muted);margin:8px 0 0}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* export */
.opt-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.opt-row .field{margin:0;min-width:180px}
.opt-row select{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-sm);padding:8px 10px}
.scene{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);padding:12px;margin-top:10px}
.scene-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px;flex-wrap:wrap}
.scene-head b{font:600 15px var(--f-console)}
.scene-head span{font:500 12.5px var(--f-console);color:var(--muted)}
.scene .narr{margin:0 0 8px;font-size:14px;color:var(--muted);white-space:pre-wrap}
.scene label{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);margin:8px 0 3px}
.scene textarea,.bible textarea{width:100%;min-height:74px;resize:vertical;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:8px 10px;font:400 14px/1.6 var(--f-ui)}
.bible{margin-top:14px;padding:12px;border:1px dashed var(--line);border-radius:var(--r-md)}
.bible h5{margin:0 0 6px;font:600 15px var(--f-console)}
.mini-btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:2px 10px;font-size:12.5px}
.sticky-actions{position:sticky;bottom:-18px;background:var(--surface);padding:12px 0 4px;margin-top:14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite;vertical-align:-2px;margin-right:6px}

/* guide */
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:0}
.step h4{margin:0 0 4px;font:600 17px var(--f-console)}
.step p{margin:0 0 6px;font-size:14.5px;color:var(--muted)}
.step .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);font:700 13px var(--f-console);margin-right:8px}
.step svg{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}
@media (max-width:640px){.step{grid-template-columns:1fr}.step svg{order:-1}}
.callout{background:var(--bg);border-left:3px solid var(--air);padding:10px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;margin:10px 0}
details.faq{border-top:1px solid var(--line);padding:10px 0}
details.faq summary{cursor:pointer;font-weight:600}
details.faq p{margin:8px 0 0;color:var(--muted);font-size:14.5px}

/* tour */
#tour{position:fixed;inset:0;z-index:100}
#tour[hidden]{display:none}
.tour-hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(21,18,42,.66);outline:2px solid var(--air);transition:all .25s}
.tour-card{position:absolute;width:min(360px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.tour-card h4{margin:6px 0 4px;font:600 17px var(--f-console)}
.tour-card p{margin:0 0 12px;font-size:14.5px;color:var(--muted)}
.tour-actions{display:flex;gap:8px;align-items:center}
.tour-dots{display:flex;gap:5px}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.tour-dots i.on{background:var(--air)}