/* NimDeck interactive tutorials: shared styles (website copy).
   Site version of UserGuide/interactive/assets/tutor.css: site fonts and orange for the coach,
   white page, and page-wide rules limited to the tutorial so the site header and footer keep their look.
   Light only (user 2026-10-28). Window colours are the Common Light theme tokens (Common/Themes/Light.xaml). */
:root{
  --win:#F4F7FB;--panel:#FFFFFF;--raised:#F1F5F9;--border:#D3DCE8;--text:#112548;--text2:#566784;
  --hover:#EAF1FA;--accent:#206FEB;--accent-soft:#F7FAFE;--accent-hover:#1B60DA;--toggle-off:#BBC6D6;
  --page:#EEF1F5;--ink:#1b2433;--muted:#5d6b80;
  --canvas:#FFFFFF;--canvas-ink:#1a1a1a;--canvas-grid:#eef1f4;--revit-chrome:#E9ECF0;--revit-chrome2:#DADFE6;
  --pick:#1C8BFF;--tvp:#8E44D9;--accent-text:#206FEB;
  --coach:#FF5D00;--coach-ink:#C24600;--coach-paper:#FFF8E7;
  --hand:Caveat,"Segoe Print","Ink Free",cursive;
  --ui:"Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
/* A stable scrollbar gutter keeps the stage scale from flipping when the page starts to scroll. */
html{scrollbar-gutter:stable}
html,body{margin:0;background:#fff;color:var(--ink);font:15px/1.55 Inter,system-ui,"Segoe UI",sans-serif}
.stage a,.below a{color:var(--accent)}
.page-head{max-width:1360px;margin:0 auto;padding:18px 16px 10px;display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.page-head h1{margin:0;font-size:1.6rem;letter-spacing:-.01em}
.page-head p{margin:4px 0 0;color:var(--muted);max-width:760px}
.head-tools{display:flex;gap:8px;align-items:center}
.chip-btn{font:12px var(--ui);padding:6px 11px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer}
.chip-btn:hover{background:var(--hover)}

/* Stage: authored at a fixed size, scaled to fit. */
.stage-wrap{max-width:1360px;margin:0 auto;padding:0 16px 24px;overflow:hidden}
.stage-box{position:relative}
.stage{position:absolute;left:0;top:0;width:1320px;height:780px;transform-origin:0 0;
  border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(10,20,40,.18);background:var(--revit-chrome);font:14px/1.45 var(--ui)}

/* Revit shell */
.rv{position:absolute;inset:0;display:grid;grid-template-rows:30px 1fr 26px;font:12px var(--ui);color:var(--text)}
.rv-title{background:var(--revit-chrome2);display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--text2);font-size:12px}
.rv-title b{color:var(--text);font-weight:600}
.rv-title .sp{flex:1}
.rv-body{position:relative;display:grid;grid-template-columns:1fr 430px;min-height:0}
.rv-view{position:relative;background:var(--canvas);margin:6px 0 0 6px;border:1px solid var(--revit-chrome2);overflow:hidden}
.rv-view svg.plan{position:absolute;inset:0;width:100%;height:100%}
.rv-view .vlabel{position:absolute;left:10px;top:8px;font-size:11px;color:var(--text2);background:color-mix(in srgb,var(--canvas) 85%,transparent);padding:2px 6px;border-radius:3px;z-index:2}
.rv-view.tvp{outline:3px solid var(--tvp);outline-offset:-3px}
.rv-view .tvp-tag{position:absolute;left:0;top:0;background:var(--tvp);color:#fff;font-size:11px;padding:2px 8px;border-bottom-right-radius:4px;z-index:3;display:none}
.rv-view.tvp .tvp-tag{display:block}
.rv-view.tvp .vlabel{top:26px}
.rv-view.picking{cursor:crosshair}
.rv-status{background:var(--revit-chrome2);display:flex;align-items:center;gap:10px;padding:0 10px;color:var(--text2);font-size:12px}
.rv-status .prompt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-status .prompt.live{color:var(--text)}
.rv-status button{font:11px var(--ui);padding:2px 8px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:3px;cursor:pointer}
.viewbar{position:absolute;left:8px;bottom:6px;display:flex;gap:2px;z-index:4}
.viewbar button{height:22px;min-width:24px;padding:0 6px;font:11px var(--ui);background:var(--revit-chrome);color:var(--text2);border:1px solid var(--revit-chrome2);cursor:pointer}
.viewbar button:hover{background:var(--hover)}
.viewbar button.on{background:var(--tvp);color:#fff;border-color:var(--tvp)}

/* Finish / end-pick buttons (user 2026-10-28): whenever a step needs Finish to move on,
   the button must stand out. Add class "finish-btn" to any Finish button, in the status
   bar or an options bar; it pulses while it is the way forward. */
.finish-btn{font:600 12px var(--ui)!important;padding:4px 16px!important;min-height:24px;border-radius:4px!important;
  background:var(--coach)!important;border:1px solid var(--coach)!important;color:#fff!important;cursor:pointer;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--coach) 55%,transparent);animation:finishPulse 1.4s ease-out infinite}
.finish-btn:hover{filter:brightness(1.08)}
@keyframes finishPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coach) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Anything that is not part of this page's tool (other ribbon tabs and buttons, other
   NimDeck tools, Revit commands the page does not use) is greyed out and does nothing,
   so it cannot be mistaken for part of the tutorial (user 2026-10-28). */
.not-this-tool{opacity:.38;filter:grayscale(1);pointer-events:none;cursor:default}

/* Plan graphics */
.plan .el{cursor:default}
.picking .plan .el.pickable{cursor:crosshair}
.plan .el.hot>*{filter:drop-shadow(0 0 1.2px var(--pick)) drop-shadow(0 0 1.2px var(--pick))}
.plan .el.pulse{animation:pulse .7s ease-out}
@keyframes pulse{0%{filter:drop-shadow(0 0 0 var(--coach))}40%{filter:drop-shadow(0 0 5px var(--coach)) drop-shadow(0 0 2px var(--coach))}100%{filter:none}}
.plan .fade{transition:opacity .45s}

/* Logic side panel ("what actually changed") */
.logic{position:relative;margin:6px 6px 0 6px;background:var(--win);border:1px solid var(--revit-chrome2);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.logic h2{font:600 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin:0;padding:10px 12px 6px}
.logic .sec{padding:0 12px 10px}
.logic .muted{color:var(--text2)}
.flash{animation:flash 1.1s ease-out}
@keyframes flash{0%{background:color-mix(in srgb,var(--coach) 45%,transparent)}100%{background:transparent}}

/* NimDeck window replica (StudioPopupFrame look) */
.nd{position:absolute;background:var(--win);color:var(--text);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);font:12px var(--ui);z-index:20;user-select:none}
.nd-title{display:flex;align-items:center;padding:3px 8px 6px 12px;gap:8px;cursor:move}
.nd-title .t{flex:1;font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.02em;padding-top:4px}
.nd-x{width:28px;height:26px;border:1px solid var(--border);background:var(--raised);color:var(--text);border-radius:4px;cursor:pointer;margin-top:4px}
.nd-x:hover{background:var(--hover)}
.btn{font:12px var(--ui);min-height:32px;padding:5px 12px;border:1px solid var(--border);background:var(--raised);color:var(--text);border-radius:4px;cursor:pointer}
.btn:hover{background:var(--hover)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-hover)}
.btn:disabled{opacity:.45;cursor:default}
.btn.card{background:var(--panel)}
.divider{height:1px;background:var(--border);margin:4px 0}
.toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.toggle .trk{width:36px;height:20px;border-radius:10px;background:var(--toggle-off);border:1px solid var(--border);position:relative;transition:background .18s}
.toggle .trk::after{content:"";position:absolute;left:1px;top:1px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s cubic-bezier(.3,1.4,.6,1)}
.toggle[data-v="1"] .trk{background:var(--accent)}
.toggle[data-v="1"] .trk::after{left:17px}
.toggle[data-v="k"] .trk::after{left:9px;opacity:.65}
select.cb{font:12px var(--ui);height:26px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:4px;padding:0 4px}
.modal-shade{position:absolute;inset:0;background:rgba(0,0,0,.08);z-index:30}

/* Coach: hand-written notes and arrows */
.coach-layer{position:absolute;inset:0;pointer-events:none;z-index:60}
.coach-layer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.coach-arrow{fill:none;stroke:var(--coach);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.coach-arrow.draw{animation:draw .55s ease-out forwards}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.coach-ring{fill:none;stroke:var(--coach);stroke-width:2.2;stroke-dasharray:7 5;animation:ring 1.6s linear infinite}
@keyframes ring{to{stroke-dashoffset:-24}}
.coach-note{position:absolute;max-width:290px;font:600 23px/1.12 var(--hand);color:var(--coach-ink);pointer-events:auto;
  background:var(--coach-paper);border:1.5px solid color-mix(in srgb,var(--coach) 55%,transparent);border-radius:12px 14px 11px 15px;
  padding:9px 13px 8px;box-shadow:0 4px 14px rgba(0,0,0,.12);transform:rotate(-.6deg);transition:left .35s,top .35s,opacity .25s}
.coach-note.enter{animation:noteIn .35s ease-out}
@keyframes noteIn{from{opacity:0;transform:rotate(-.6deg) translateY(6px)}to{opacity:1}}
.coach-note .n{font:11px var(--ui);color:var(--muted);display:flex;gap:8px;align-items:center;margin-top:6px}
.coach-note .n .sp{flex:1}
.coach-note .n button{font:11px var(--ui);background:none;border:0;color:var(--coach-ink);cursor:pointer;padding:2px 4px;text-decoration:underline}
.coach-note .n button.go{background:var(--coach);color:#fff;text-decoration:none;border-radius:4px;padding:3px 10px}
.coach-note u{text-decoration-color:var(--coach);text-decoration-thickness:2px;text-underline-offset:3px}
.coach-note .hint{display:block;font:12px var(--ui);color:var(--muted);margin-top:3px}
.coach-hidden .coach-note,.coach-hidden svg{display:none}

.below{max-width:1360px;margin:0 auto;padding:0 16px 40px;color:var(--muted);font-size:13px}
.below h3{color:var(--ink);font-size:14px;margin:18px 0 6px}
.below ul{margin:0;padding-left:18px}
.toolbar-row{display:flex;gap:10px;align-items:center}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}