/* FREE SAILING — auth.css — the login modal (assets/js/fs-auth-ui.js).

   Self-contained on purpose: every rule below resolves against site.css's own
   tokens (--navy, --line, --r-l, --shadow-3…) and nothing else, because this
   file is loaded on pages that do not load demand.css or blm.css. It borrows
   the SHAPE of the existing bottom-sheet pattern (blm.css .fixsheet/.fx-in —
   rounded top corners on mobile, a centred card from 721px up) without
   depending on that file being present.

   z-index:300 — above the header's own shelves (highest existing use is 72)
   and above blm.css's .fixsheet (80), so the auth modal always wins if both
   could theoretically be open at once. */

.fsa-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(1,28,87,.46);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
}
.fsa-overlay.is-open{ opacity:1; pointer-events:auto; }
@media (min-width:721px){ .fsa-overlay{ align-items:center; padding:24px; } }

html.fsa-lock{ overflow:hidden; }

.fsa-modal{
  background:#fff; width:100%; max-width:480px; max-height:88vh; overflow:auto;
  border-radius:var(--r-l) var(--r-l) 0 0; box-shadow:var(--shadow-3);
  position:relative; transform:translateY(18px); transition:transform .26s var(--ease);
}
.fsa-overlay.is-open .fsa-modal{ transform:none; }
@media (min-width:721px){ .fsa-modal{ border-radius:var(--r-l); } }
@media (prefers-reduced-motion:reduce){
  .fsa-overlay, .fsa-modal{ transition:none; }
}

.fsa-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink-40); font-size:20px;
  line-height:1; cursor:pointer; display:grid; place-items:center; z-index:1;
}
.fsa-close:hover{ background:var(--pale); color:var(--navy); }

.fsa-body{ padding:30px 26px 26px; }
.fsa-body h2{
  font-size:21px; color:var(--navy); letter-spacing:-.02em; padding-right:30px; outline:none;
}
.fsa-body .sub{ margin-top:8px; color:var(--ink-40); font-size:14.5px; line-height:1.5; }

.fsa-label{
  display:block; margin:18px 0 6px; font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-25);
}
.fsa-input{
  width:100%; box-sizing:border-box; padding:11px 14px; border:1px solid var(--line);
  border-radius:var(--r-s); background:#fff; color:var(--ink); font:inherit; font-size:14.5px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.fsa-input::placeholder{ color:var(--ink-25); }
.fsa-input:focus{ outline:0; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(2,162,238,.16); }

.fsa-err{ margin-top:10px; color:var(--orange-text); font-size:13.5px; font-weight:600; }
.fsa-err[hidden]{ display:none; }

.fsa-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.fsa-actions .btn{ flex:none; }

/* THE SEAM. The one place this file admits the network call underneath it
   does nothing yet. Cyan left border like demand.css's .dm-done, so it reads
   as "this is the true state", not as an error. */
.fsa-seam{
  margin-top:16px; background:#F5FAFE; border:1px solid #BFE7FA; border-left:3px solid var(--cyan);
  border-radius:var(--r); padding:14px 16px; font-size:14.5px; color:var(--navy); line-height:1.5;
}

.fsa-types{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.fsa-type-btn{
  text-align:left; border:1px solid var(--line); background:#fff; border-radius:var(--r);
  padding:14px 15px; font:inherit; font-size:14.5px; font-weight:600; color:var(--navy);
  cursor:pointer; transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.fsa-type-btn:hover{ border-color:var(--cyan); transform:translateY(-1px); }
@media (max-width:480px){ .fsa-types{ grid-template-columns:1fr; } }

.fsa-progress{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cyan-text); margin-bottom:6px;
}

.fsa-opts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.fsa-opt{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 15px;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-60); cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.fsa-opt:hover{ border-color:var(--cyan); color:var(--navy); }
.fsa-opt.on{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* Marks anything stored by this file as local-only, everywhere it appears —
   the "done" screen and the "on this device" status screen both carry it, so
   nobody ever mistakes a saved local answer for a real account. */
.fsa-local-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-25);
}
.fsa-local-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); }

.fsa-summary{ margin-top:16px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.fsa-summary .r{
  display:flex; justify-content:space-between; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--line-2); font-size:13.5px; color:var(--ink-60);
}
.fsa-summary .r:last-child{ border-bottom:0; }
.fsa-summary .r b{ color:var(--navy); font-weight:700; text-align:right; }

@media (max-width:480px){
  .fsa-body{ padding:26px 20px 22px; }
}