/* The join step (templates/join.html), FL-042.
 *
 * Moved verbatim out of the <style> block in templates/join.html on 7
 * October 2026. An inline <style> block beats every stylesheet by load
 * order, which is how the fleet's nav bars drifted in July. The template
 * links this sheet at the exact place the block stood (in extra_head after
 * field.css, which base.html places after base.css and before
 * phronon-tokens.css), so every rule still wins the same cascade fights.
 * Polarity Profiler alone owns it: sync_shared_assets.py does not carry it.
 */

/* The second step, and the first one that asks for anything. The lockup on
   top is what carries the continuity (fleet standard, 17 August 2026 — the
   class code never lives on the first page). */
body { background: #10142e; color: #eef1fb; }

/* The stage the canvas fills. `overflow: hidden` matters: the canvas is
   sized to this box, and without it a wide field would give the page a
   sideways scrollbar. */
.join-main {
  position: relative; overflow: hidden;
  min-height: calc(100dvh - 96px);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
}
/* Above the veil, which is above the canvas. */
.join-card { position: relative; z-index: 2; }
.join-card { width: 100%; max-width: 26rem; }

/* Smaller than the entrance's lockup on purpose: there the name is the
   headline, here the question is. It still leads the page. */
.join-lockup {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em;
  color: #eef1fb; margin: 0 0 1.75rem;
}
.join-lockup svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.join-card h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 1.25rem; }

.join-card .form-label { color: #b9c2e0; font-weight: 600; font-size: .9rem; }
.join-card .form-control {
  background: #0b0f24; border: 1px dashed #3a4470; color: #eef1fb;
  font-size: 18px; letter-spacing: 1px; min-height: 48px;
}
.join-card .form-control::placeholder { color: #6a76a5; }
.join-card .form-control:focus {
  background: #0b0f24; color: #eef1fb; border-color: #4c86e8;
  border-style: solid; box-shadow: 0 0 0 3px rgba(76,134,232,.3);
}
.btn-field {
  background: #eef1fb; color: #10142e; font-weight: 700; border: none;
  min-height: 48px; width: 100%;
}
.btn-field:hover { background: #ffffff; color: #10142e; }
.btn-field:focus-visible { outline: 3px solid #4c86e8; outline-offset: 3px; }

.join-note { font-size: 12px; color: #8d96bd; margin: 1rem 0 0; }
.join-back { font-size: 13px; margin: .5rem 0 0; }
.join-back a { color: #8d96bd; text-decoration: none; }
.join-back a:hover { color: #eef1fb; text-decoration: underline; }
.join-back a:focus-visible { outline: 2px solid #4c86e8; outline-offset: 2px; border-radius: 3px; }

.join-lang { position: absolute; top: 1rem; right: 1.25rem; }

.ph-footer { background: #0b0f24; border-top: 1px solid #232a4d; color: #8d96bd; }
.ph-footer a { color: #8d96bd; }
.ph-footer a:hover { color: #eef1fb; }