/* ------------------------------------------------------------------
   tools/assets/maker-box.css (v=2, 2026-10-19): the prompt box at the top
   of the two maker pages (SEO wave 9, playbook item 1):
     /roblox-ai-game-maker        <body class="sl gm">
     /roblox-ai-script-generator  <body class="sl gm sg">
   Both are homepage-style pages with a centred hero. Loaded after
   /tools/assets/tools.css, which draws the box (.tl-prompt), its bar and
   the example chips (.tl-chip). This file only sizes the box for a hero.
   Markup:
     <div class="mk-box">
       <form class="tl-prompt" ... data-handoff="<slug>"> textarea + .tl-prompt-bar </form>
       <ul class="tl-chips"> .tl-chips-label + chips </ul>
       <p class="mk-line">Free to start. ...</p>
     </div>
   Static: no entrance. prefers-reduced-motion keeps it still (tools.css
   already drops the box and chip transitions).
   ------------------------------------------------------------------ */

.mk-box { width: 100%; max-width: 720px; margin: 34px auto 0; text-align: left; }
/* no native resize grip in the glowing box: where the browser supports it, the box grows with the text instead */
.mk-box .tl-prompt-input { min-height: 92px; max-height: 320px; resize: none; field-sizing: content; }
.mk-box .tl-prompt-note { flex: 1 1 240px; min-width: 0; margin: 0; text-wrap: pretty; }
.mk-box .tl-chips { justify-content: center; margin-top: 16px; }
/* the chips ship hidden and handoff.js shows them: without JavaScript the "Try" label would stand alone */
.mk-box .tl-chips:not(:has(.tl-chip:not([hidden]))) { display: none; }
.mk-line { margin: 14px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--rc-text-2); }

/* the game maker: its existing hero note follows the box's own line closely */
.gm .mk-box + .sl-hero-note { margin-top: 8px; }

@media (max-width: 640px) {
  .mk-box { margin-top: 28px; }
  .mk-box .tl-chip { padding: 0 12px; }
  .mk-line { font-size: 13.5px; }
}