/* style — the sections of a tile joined as one box, in the gallery tabs'
   colour.

   Simon (design note, 16 Sep, on the Create tile's References card): "Make
   it so all of these different individual boxes that make up this section
   are joined as one continuous box. Adjust the color of these boxes slightly
   so they don't have the very slight warm tint to them. They're more like
   the same color as the tabs in the gallery space. Make sure any changes
   made to this space (layout changes and colors) are also applied to all
   the other views in the create space (e.g., recast, swap, remove, etc.)."

   The tabs are --card on a --border hairline (16-shot-tabs.css), so that is
   the surface here. The Create tile's two cards (references, prompt) become
   the top and bottom of one box with a hairline between; a room's steps
   stand in #sm-stack, one card, each step a band of it. The rooms' own
   sheet is injected after every linked one, so these rules carry the id or
   `html` to outrank it. */

/* ---- the Create tile ---- */
#inputs-section, #prompt-section { background: var(--card); border-color: var(--border); }
#inputs-section { border-radius: 8px 8px 0 0; padding-bottom: 12px; }
#prompt-section { border-radius: 0 0 8px 8px; margin-top: -1px; border-top: 1px solid var(--border); }

/* ---- the rooms ---- */
html #sm-main #sm-stack {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  margin: 0 0 10px;
}
html #sm-main #sm-stack .sm-step {
  background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0;
  margin: -1px 0 0; padding: 13px 13px 14px;
}
/* A pair on one row: the two cells share the band. */
html #sm-main #sm-stack .slot-pair { margin: 0; }
html #sm-main #sm-stack .slot-pair .sm-step + .sm-step { border-left: 1px solid var(--border); }
/* The camera panel keeps its own card (33-camera-panel.css) inside the band. */
html #sm-main #sm-stack .sm-acamstep {
  background: #121213; border: 1px solid #262627; border-radius: 14px; margin: 12px 13px 13px; padding: 0;
}
html #sm-main #sm-adv { background: var(--card); border-color: var(--border); }

/* ---- the big lit buttons ----
   Simon (design note, 16 Sep, on Generate): "For all these buttons let's
   make sure that the font used is the main brand font and make it so
   there's more horizontal spacing. Make the text around 20% larger and the
   icon next to the text also larger. Ensure this change is applied to all
   of these types of buttons throughout the entire site." Every .btn.primary.big
   -- Generate on the Create tile, Generate on every room, Create character --
   in the app's own face (--font-ui), a touch of tracking, wider padding, 48
   tall, and the sparkle with more air beside it.

   THE SIZE WENT UP AND CAME BACK DOWN. 17px read as shouting once it was on
   screen -- Simon, next morning: "make it so the text on the Generate button
   is around 20% smaller" -- so 13.5px, with the sparkle back in proportion.
   The face, the tracking and the width are what the note was really about. */
html .btn.primary.big, html #btn-generate.btn.big, html #sm-go.btn.big, html #sm-go, html #cn-go.btn.big {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; letter-spacing: .03em;
  padding-left: 28px; padding-right: 28px; height: 48px;
}
html .btn.primary.big.gen-spark::before, html #sm-go.gen-spark::before, html #btn-generate.gen-spark::before {
  width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
}
html .btn.gen-side { height: 48px; font-size: 14px; }

/* THE BAND THAT HOLDS THE MODE SWITCH, WITH ROOM ROUND IT.

   Simon, of Motion transfer: "create more padding around the 'drive it with'
   section... mainly top and bottom padding."

   A band is padded 13/14 because that is right for a row of slot cards. This
   one holds one 42px segmented control, so the same padding left it barely
   taller than the thing inside it -- and it is the field that decides what
   the whole rest of the column is, which is the last thing that should read
   as an afterthought squeezed in above the slots.

   Both columns, and matched to the selector it has to beat: the band's own
   padding is set at `#sm-main #sm-stack .sm-step`, so a rule with fewer ids
   loses however obviously it is meant to win.

   22 WAS NOT ENOUGH. Simon, looking at it: "we still need more vertical space
   around the 'Drive It' section of the motion transfer box." Measured before
   changing anything, because "still" usually means a rule stopped matching --
   it had not: 22/22 was landing at every column width the panel divider
   reaches. So this is the number being wrong rather than the rule being
   broken, and the fix is the number.

   30, which puts the band at a little over 100px around a 42px control --
   roughly two and a half times the height of the thing it holds, against the
   1.6 it was. Written here as the one number to move; the test's floor below
   it (simple-motion-transfer.mjs) tracks it deliberately loosely, so nudging
   this again does not mean editing two files. */
html #sm-main #sm-stack .sm-headflds .sm-step,
html #main #sm-stack .sm-headflds .sm-step {
  padding-top: 30px;
  padding-bottom: 30px;
}