/* Public site (sl-gsa.net) — placeholder styles, 2026-09-22.
   Mirrors the crew dashboard's look (crew/css/app.css) until the site gets its own
   design. Deliberately a separate copy, not a link to crew's stylesheet: restyling
   the public site must never touch the crew app, and vice versa. */
html { scrollbar-gutter: stable; }
body { font-family: system-ui, sans-serif; margin: 40px auto; padding: 0 20px; color: #111827; background: #fff; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.topbar nav div { display: flex; flex-wrap: wrap; gap: 8px; }
.topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.topbar-right img { height: 40px; width: auto; }

.lb-toggle { height: 36px; padding: 0 14px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #374151; font: inherit; font-size: 0.85rem; line-height: 1; display: inline-flex; align-items: center; box-sizing: border-box; white-space: nowrap; text-decoration: none; }
.lb-toggle:hover { background: #f9fafb; border-color: #b9bec5; }
.lb-toggle[aria-current="page"] { background: #e6eefa; border-color: #bcd3f0; color: #2d5a9e; }

.hero { text-align: center; margin-top: 48px; }
.hero img { width: 100%; max-width: 400px; height: auto; }

.dash { max-width: 880px; margin: 40px auto 0; text-align: center; }
.dash-sentence { font-size: 1.15rem; line-height: 1.7; color: #374151; margin: 0 0 28px; }
.dash-sentence strong { color: #111827; }
.dash-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.stat-card { flex: 1 1 160px; max-width: 210px; padding: 18px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; text-decoration: none; color: inherit; }
a.stat-card:hover { background: #f3f4f6; border-color: #d1d5db; }
.stat-num { font-size: 2rem; font-weight: 700; color: #111827; }
.stat-label { margin-top: 4px; font-size: 0.85rem; color: #6b7280; }

/* ── Request to Join ────────────────────────────────────────────────────────
   The crew app's form look (Tickets' New Ticket card, the Dispatch / Logbook /
   Clients chips) — copied from crew/css/app.css (.lb-card, .tk-*, .dp-chip,
   .flash) so the two can drift apart safely. */
.lb-card { background: #fff; border: 1px solid #e4e7eb; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; }
.lb-card-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid #e4e7eb; background: #fbfbfc; }
.lb-card-title { font-size: 14px; font-weight: 700; color: #1b1f24; }
.lb-card-sub { font-size: 11px; color: #9aa1ab; margin-top: 1px; }
.tk-form { padding: 14px 16px 16px; }
.tk-field { margin: 0 0 14px; }
.tk-label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.tk-form input[type="text"] { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 10px; font: inherit; font-size: 13px; border: 1px solid #d8dce1; border-radius: 6px; }
.tk-submit { padding: 8px 20px; font: inherit; background: #2d5a9e; color: #fff; border: 1px solid #2d5a9e; border-radius: 6px; font-weight: 600; cursor: pointer; }
.tk-submit:hover { background: #285189; border-color: #285189; }
.tk-submit:disabled, .tk-submit:disabled:hover { background: #e5e7eb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.dp-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dp-chip { padding: 7px 11px; border-radius: 6px; border: 1px solid #d8dce1; background: #fff; color: #374151; font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dp-chip:hover { background: #f9fafb; border-color: #b9bec5; }
.flash { padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; margin: 14px 16px; background: #f9fafb; border: 1px solid #e5e7eb; color: #374151; }
.flash-added { background: #eef7f0; border-color: #cfe8d6; color: #2e6b3e; }
.flash-error { background: #fef2f2; border-color: #f5c2c2; color: #991b1b; }

/* Interests: real checkboxes (the form works without JS) worn as chips that
   take the pressed look when ticked. */
.apply-interests { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.apply-interests legend { padding: 0; }
.apply-chip input { margin: 0; accent-color: #2d5a9e; }
.apply-chip:has(input:checked) { background: #e6eefa; border-color: #bcd3f0; color: #2d5a9e; }
.apply-chip:has(input:focus-visible) { outline: 2px solid #2d5a9e; outline-offset: 2px; }
/* The honeypot: off-screen for people, still in the DOM for form-filling bots. */
.apply-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Floating, left-aligned where there's room beside the centred logo; in the
   flow under the logo on narrower screens. 104px = body margin + top bar. */
.apply-float { max-width: 340px; margin: 32px auto 0; }
@media (min-width: 1140px) {
    .apply-float { position: absolute; top: 104px; left: 20px; width: 320px; margin: 0; }
    .apply-float .lb-card { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
}

.site-footer { margin-top: 56px; text-align: center; font-size: 0.8rem; color: #6b7280; }
.site-footer a { color: inherit; }