/* guide.css — shared look of the 3D guides, same tokens as the start page (docs/index.html):
   Manrope + JetBrains Mono, dark "DIY lab" #131209 with accent #e58a42, light theme as an option.
   Loaded after each guide's own <style>, so these rules win. */

:root,:root[data-theme="light"]{
  --bg:#f4f2ec; --mat:#ebe8df; --panel:#ffffff; --ink:#17160f; --muted:#5f5c50; --line:#dcd8cc;
  --accent:#b8611a; --accent-ink:#ffffff; --accent-soft:#f4e3d2; --warn:#a2301f; --warn-soft:#f7e1dc; --ok:#2f7a4a;
  --scene:#e6e2d6;
  --f-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#131209; --mat:#1a1912; --panel:#1f1f1f; --ink:#edeae0; --muted:#a3a091; --line:#313131;
  --accent:#e58a42; --accent-ink:#131209; --accent-soft:#3a2818; --warn:#f08a74; --warn-soft:#3a1d18; --ok:#6cc78f;
  --scene:#1a1912;
  color-scheme:dark;
}

body{font-family:var(--f-body);-webkit-font-smoothing:antialiased}
h1{font:700 22px/1.25 var(--f-display);letter-spacing:-.01em}
.brand b{font:700 13px/1.2 var(--f-display);letter-spacing:0}
.stage,.panel{border-radius:16px}
.tbtn,.btn,.steps button,.find input,a.back{transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
a.back{color:var(--accent-ink)}
.tbtn{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tip{border-left:3px solid var(--accent)}

/* theme button added by guide-kit.js */
.brand{flex-wrap:wrap}
.kit-theme{margin-left:auto;width:36px;height:36px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;padding:0}
.kit-theme:hover{color:var(--ink);border-color:var(--accent)}
.kit-theme svg{width:18px;height:18px}

/* loading spinner and fallback */
.loading{gap:12px;align-content:center}
.loading:not(.fail)::before{content:"";width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:kit-spin .9s linear infinite;justify-self:center}
@keyframes kit-spin{to{transform:rotate(360deg)}}
.loading.fail{place-items:start;overflow:auto;padding:16px;background:var(--scene);z-index:3;pointer-events:auto}
.loading .fb{max-width:640px;display:flex;flex-direction:column;gap:8px;color:var(--ink);font:400 14px/1.5 var(--f-body)}
.loading .fb b{font:700 17px/1.3 var(--f-display)}
.fbthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.fbthumbs figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.fbthumbs img{width:100%;display:block}
.fbthumbs figcaption{font:500 11px/1 var(--f-mono);padding:6px;color:var(--muted)}

/* bigger touch targets everywhere */
.steps button{width:30px;height:30px;font-size:11px;border-radius:8px}
.tbtn{min-height:34px}

/* ---------- phones and small tablets ---------- */
@media (max-width:900px){
  html,body{height:auto}
  .app{display:block;padding:0;height:auto}
  /* the 3D view stays on screen while the text scrolls under it */
  .stage{position:sticky;top:0;z-index:10;height:44vh;height:44svh;min-height:240px;border-radius:0;border-width:0 0 1px}
  .panel{border-radius:0;margin:0;position:relative;z-index:1;border-width:0;overflow:visible}
  .phead{padding:12px 16px 10px;gap:8px}
  .brand span{display:none}
  .steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px;scroll-padding:0 16px}
  .steps::-webkit-scrollbar{display:none}
  .steps button{flex:none;width:36px;height:36px;font-size:12px}
  .pbody{padding:16px 16px 24px}
  /* "Back / Next" always under the thumb */
  .pfoot{position:sticky;bottom:0;z-index:7;background:var(--panel);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 16px rgba(0,0,0,.12)}
  .pfoot .btn{min-height:44px;padding:12px 18px}
  .pfoot .btn.primary{flex:1;max-width:220px}
  /* tools in one scrollable row so they do not cover the model */
  .hud-top{top:8px;left:8px;right:8px;flex-wrap:nowrap}
  .tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;min-width:0}
  .tools::-webkit-scrollbar{display:none}
  .tbtn{flex:none;font-size:12px;padding:6px 9px;min-height:32px}
  .stepbadge{flex:none;padding:6px 9px;font-size:11px}
  .hud-temp,.hud-meter{transform:scale(.82);transform-origin:left bottom}
  .lbl{font-size:10px;padding:2px 4px}
  .find input,.find button{min-height:40px}
}
@media (max-width:900px) and (max-height:520px){
  /* phone in landscape: model on the left, text on the right */
  .app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:100svh}
  .stage{height:100svh;position:sticky}
  .panel{margin:0;border-radius:0;overflow:auto;max-height:100svh}
}

@media (prefers-reduced-motion:reduce){
  .loading:not(.fail)::before{animation:none}
  *{transition:none!important}
}
@media print{
  .stage,.pfoot,.hud-top,.kit-theme{display:none!important}
  .app{display:block}
  .panel{border:0}
}

/* ---------- step extras (guide-extras.js) ---------- */
.kit-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:-4px}
.kit-meta span{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 10px}
.kit-meta svg{width:14px;height:14px}
.kit-meta .lvl{display:inline-flex;gap:3px}
.kit-meta .lvl i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.kit-meta .lvl i.on{background:var(--accent)}
.kit-oops,details.more{border:1px solid var(--line);border-radius:10px;padding:0 12px}
.kit-oops summary,details.more summary{cursor:pointer;padding:10px 0;font:600 14px/1.3 var(--f-body);list-style:none;display:flex;align-items:center;gap:8px}
.kit-oops summary::-webkit-details-marker,details.more summary::-webkit-details-marker{display:none}
.kit-oops summary::before,details.more summary::before{content:"+";font:600 16px/1 var(--f-mono);color:var(--accent);width:14px}
.kit-oops[open] summary::before,details.more[open] summary::before{content:"−"}
.kit-oops summary span{font:600 11px/1 var(--f-mono);background:var(--warn-soft);color:var(--warn);border-radius:999px;padding:3px 7px}
.kit-oops dl{margin:0 0 12px;display:flex;flex-direction:column;gap:4px}
.kit-oops dt{font-weight:600;margin-top:6px}
.kit-oops dt::before{content:"⚠ ";color:var(--warn)}
.kit-oops dd{margin:0;color:var(--muted)}
details.more p{margin:0 0 12px}
.gl{text-decoration:underline dotted var(--accent);text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:help;border-radius:3px}
.gl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kit-tip{position:fixed;z-index:50;background:var(--panel);color:var(--ink);border:1px solid var(--accent);border-radius:10px;padding:10px 12px;font:400 13px/1.45 var(--f-body);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.kit-tip b{display:block;font:700 13px/1.3 var(--f-display);margin-bottom:4px;color:var(--accent)}
@media print{.kit-oops{border:0}.kit-oops dl{display:block}}