/* Tokens the 2026 tool UIs reference that the approved dood.css doesn't define.
   Additive only — nothing in the locked stylesheet is overridden. */
:root{
  --bg4:#222220;
  --purple:#a78bfa; --purple-dim:rgba(167,139,250,.10);
  --accent-dim:var(--gold-dim);
  --ambient:rgba(201,168,76,.06);
  --fire-dim:rgba(232,89,60,.10);
  --blue-dim:rgba(74,158,255,.10);
  --green-dim:rgba(76,175,130,.10);
  --smooth-dim:rgba(212,196,168,.10);
}
/* a migrated tool sits in its own frame under the shared chrome */
.tool-head{padding-block:clamp(32px,6vh,60px) 20px}
.tool-head h1{margin-block:12px 14px}
.tool-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);padding:8px 0}
.tool-back:hover{color:var(--gold)}
.tool-body{padding-bottom:clamp(40px,7vh,80px)}
.tool-body canvas{max-width:100%}
.tool-note{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:18px;
  padding-top:16px;border-top:1px solid var(--border);max-width:70ch;line-height:1.6}
@media (pointer:coarse){
  .tool-body button,.tool-body .btn,.tool-body label.file{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .tool-body *{animation:none!important;transition:none!important}
}

/* keep the approved ground even where a tool set its own */
.tool-body{background:transparent}

/* Tool UIs were built for desktop. Keep them usable on a phone without
   touching their logic: nothing may push the page sideways. */
.tool-body{min-width:0}
.tool-body .wrap{max-width:100%;padding-inline:0;margin-inline:0}
.tool-body canvas{max-width:100%;height:auto}
.tool-body .card,.tool-body .panel,.tool-body .row,.tool-body .stage,.tool-body .grid{min-width:0;max-width:100%}
@media (max-width:820px){
  .tool-body [style*="width:"]{max-width:100%}
  .tool-body .panel,.tool-body .card{width:auto!important}
  /* a wide fixed canvas scrolls inside its own box rather than the page */
  .tool-body .stage,.tool-body .canvas-wrap,.tool-body .board{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tool-body{overflow-x:clip}
}
.tool-flow{min-width:0;max-width:100%;overflow-x:clip}