/* SPACING, MEASURED (2026-09-09). Nikhil, on the live app: "buttons touching
   other buttons and text touching buttons ... It looks like garbage."

   Every rule here answers a number from tools/audit_spacing_live.mjs, which
   walks every Foundry surface in a real browser at 1280, 1024 and 390 wide
   and reports each pair of controls, and each run of text beside a button,
   closer than 8px, plus any button whose label breaks onto a second line.
   Run it before touching this file and again after; it exits non-zero while
   anything is left.

   A separate sheet, loaded after style.css and rail.css, so the design pass
   on those and this measured pass do not collide. The design pass scopes its
   rules under .foundry-consumer, so these do too, or they would lose the
   cascade.
   Containers get the gap; an element gets a margin only where there is no
   container to give it to. Nothing here changes a colour, a size, a font or
   a word. */

/* ---- Inbox tabs (Inbox / Waitlisted): 6px between the chips. */
.foundry-consumer .ai-tabs { gap: 10px; }

/* ---- Profile, "What you make": the caption sat 7.8px above its chips. The
   field's own 6px gap is the caption-to-input distance the form uses; chips
   are taller boxes with a shadow and need the extra 4px. */
.foundry-consumer .pf-genres { margin-top: 4px; }

/* ---- Profile side cards: a paragraph ran straight into the Join / Create my
   inbox / File it rows and into the organization-kind chips (2.1px), and the
   chips sat directly on "The name on the door" (0px). */
.foundry-consumer .small-cap + .inline-form,
.foundry-consumer .small-cap + .ob-orgkinds,
.foundry-consumer .tiny + .inline-form { margin-top: 12px; }
.foundry-consumer .ob-orgkinds + .inline-form { margin-top: 12px; }

/* ---- Home: the "Recent uploads" / "Recent sends" heading sat 7.8px above
   the first tile. */
.foundry-consumer .home-panel-head { margin-bottom: 12px; }

/* ---- The rail as a top bar (under 900px): the theme toggle at the end of
   .side-top and the Upload Tracks pill after it shared an edge (0px). */
@media (max-width: 900px) {
  .foundry-consumer .rail-upload { margin-left: 10px; }
}