/* Spacing for the Pro forms.
 *
 * /tailwind-pro.css is a checked-in build with no source config in the repo,
 * and it ships only gap-2..4, space-y-3..6 and a handful of md: variants
 * (grid-cols, flex, hidden, w-64, mt-0). The roomier rhythm these forms want is
 * simply not expressible as a utility there, and hand-editing a generated file
 * would be undone by the next rebuild -- so it lives here instead.
 *
 * Loaded after Tailwind, so these win on the elements that opt in by class. */

/* Between the labelled sections of a form. */
.se-stack > * + * { margin-top: 2.5rem; }

/* Between fields inside a section: a little more air than gap-4, and more
 * vertically than horizontally, since stacked label+input+hint groups read as
 * one block and need the separation more than side-by-side columns do. */
.se-grid { gap: 1.5rem 1.5rem; }

/* Label -> input, and input -> hint. Tight enough that each group still reads
 * as one unit, loose enough that the hint is not touching the box. */
.se-label { display: block; margin-bottom: .375rem; }
.se-hint,
.se-error { margin-top: .5rem; }

/* The "Where you work" panel. */
.se-panel { padding: 1.25rem; }

@media (min-width: 768px) {
  .se-panel { padding: 1.75rem; }
}

/* ---------------------------------------------------------------------------
 * Utilities the bundled build simply does not contain, though the Pro views
 * use them. Without these the markup fails silently: `md:col-span-2` left the
 * Bio box half width, and the validation banner rendered as plain black text
 * on white rather than red on pink.
 *
 * Values are Tailwind's own, so if /tailwind-pro.css is ever rebuilt with these
 * classes included the result is identical and these rules become redundant
 * rather than conflicting.
 * ------------------------------------------------------------------------- */
.mt-8 { margin-top: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.pl-5 { padding-left: 1.25rem; }
.list-disc { list-style-type: disc; }
.text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); }
.text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity)); }
.bg-red-50 { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); }
.border-red-200 { --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity)); }

@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ---------------------------------------------------------------------------
 * Mobile bottom nav: the "More" sheet.
 *
 * <details> gives open/close and keyboard support for free, but the disclosure
 * marker has to go and the panel has to sit above the fixed bar -- neither is a
 * utility, and the bar's own comment notes sizing is set outside Tailwind here.
 * ------------------------------------------------------------------------- */
.se-more-summary { list-style: none; cursor: pointer; }
.se-more-summary::-webkit-details-marker { display: none; }
.se-more-summary::marker { content: ""; }

/* Positioned against the <nav>, which is fixed and so is the containing block. */
.se-more-sheet {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
}

.se-more-item + .se-more-item { border-top: 1px solid #f3f4f6; }

/* The bar is fixed, so the last thing on the page -- usually the Save button --
 * sits underneath it without this. */
@media (max-width: 767px) {
  .se-pro-main { padding-bottom: 5rem; }
}