/* =========================================================================
   FREE SAILING — waiting-list.html

   Everything here is prefixed .wl- and lives in its own block, so loading
   this on a page cannot move anything already on it. No new token: every
   colour, radius and shadow is one already in site.css. The form language
   (chips, inputs, labels, the prior-list row) is demand.css's .dm- set,
   reused rather than duplicated — this file only adds what that one does
   not: the location picker and the router's own result cards.
   ========================================================================= */

/* --------------------------------------------------------- the ask card */
.wl-ask-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }

/* ---------------------------------------------------- the location picker
   Three ways in, deliberately not styled as three equal buttons — the text
   input is the one most people will actually use, so it is the widest. */
.wl-loc{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:11px;
}
.wl-loc-or{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-25);
}
.wl-loc-in{ flex:1 1 220px; min-width:160px; margin:0; }
.wl-loc-sel{ flex:1 1 180px; min-width:150px; margin:0; }
.wl-loc-go{ flex:none; }
.wl-loc-said{
  margin-top:10px; font-size:13.5px; color:var(--cyan-text); min-height:1px;
}
.wl-loc-said:empty{ display:none; }

/* --------------------------------------------------------------- results */
.wl-results{ margin-top:34px; }

/* ------------------------------------------------- what the search found out
   Not an empty state and not an apology: the results are still below it and
   still real. This says what had to happen to produce them — the one thing
   the page used to keep to itself. It reads as a finding, so it is set like
   one: quiet ground, a rule down the left, no alarm colour. */
.wl-gap{
  border-left:3px solid var(--cyan); background:var(--wash, rgba(0,128,175,.05));
  padding:16px 18px; border-radius:0 10px 10px 0; margin-bottom:24px; max-width:64ch;
}
.wl-gap-line{
  font-size:16.5px; line-height:1.4; color:var(--navy); font-weight:700;
  letter-spacing:-.01em;
}
.wl-gap-more{
  margin-top:7px; font-size:14px; line-height:1.55; color:var(--ink-60);
}
.wl-gap-more:empty{ display:none; }
.wl-gap-go{ margin-top:13px; }

.wl-sum{
  font-size:15.5px; color:var(--ink-60); margin-bottom:22px; max-width:62ch;
}
.wl-sum b{ color:var(--navy); }

.wl-sec + .wl-sec{ margin-top:34px; }
.wl-sec-hd{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-25); margin-bottom:13px;
}

.wl-card{ display:flex; flex-direction:column; gap:9px; height:100%; }
.wl-card-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.wl-reach{
  flex:none; font-size:11.5px; color:var(--ink-25); white-space:nowrap;
  padding-top:2px;
}
.wl-name{
  font-size:18px; line-height:1.28; color:var(--navy); letter-spacing:-.01em;
}
.wl-desc{
  font-size:14px; line-height:1.52; color:var(--ink-60); flex:1;
}
.wl-desc q{ quotes:"\201C""\201D""\2018""\2019"; }
.wl-meta{ font-size:12.5px; color:var(--ink-40); }
.wl-go{
  margin-top:auto; padding-top:4px; font-size:13.5px; font-weight:700;
  color:var(--cyan-text);
}
.wl-go:hover{ color:var(--navy); }
.wl-card.no-link .wl-name{ pointer-events:none; }

/* ------------------------------------------------------- somewhere to go
   Real links out while a person waits — a plain strip, not another form. */
.wl-else{ margin-top:40px; }

/* ---------------------------------------------- everything you've told us
   Same visual language as demand.css's own .dm-prior — this is the same
   idea (a person's own ledger, editable, device-only) stretched across
   every kind of ask rather than one topic at a time. */
.wl-mine{ margin-top:40px; }
.wl-mine-note{
  margin-top:10px; max-width:62ch; color:var(--ink-25); font-size:12.5px;
}

@media (max-width:720px){
  .wl-loc{ flex-direction:column; align-items:stretch; }
  .wl-loc-or{ text-align:center; }
  .wl-loc-in, .wl-loc-sel, .wl-loc-go{ width:100%; }
  .wl-card-top{ flex-direction:row; }
}