/* =========================================================================
   FREE SAILING — the supply side.

   Four operator faces (club, event organiser, sailing school, class
   association) plus the entry router. Everything that already has a home in
   site.css is reused as-is — .card .stat .chip .quote .src .row .filters
   .empty .panel .band .phead. The rules below fill the handful of gaps site.css
   genuinely does not cover: a picker bar, a compact "nearby" list-row, and the
   small in-card sub-labels used inside the harbour/class figure panels.

   Scoped: every rule here is .sup- prefixed or nested under one, so nothing
   here can leak onto a page this stylesheet isn't loaded on.
   ========================================================================= */

/* ---------------------------------------------------------------- picker */
.sup-pick{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px;
}
.sup-pick .sup-lbl{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-40); white-space:nowrap;
}
.sup-pick select{ min-width:0; flex:1 1 320px; max-width:100%; }
.sup-pick input[type=search]{ flex:1 1 200px; min-width:0; max-width:100%; }

/* --------------------------------------------------------- figures panel */
.sup-panel{ padding:22px; }
.sup-sub{
  display:block; font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-25); margin-bottom:8px;
}
.sup-chiprow{ display:flex; flex-wrap:wrap; gap:6px; }
.sup-block + .sup-block{ margin-top:18px; }

/* compact "nearby" rows — the one shape .row doesn't already give us,
   since .row is date-box shaped and this is a plain two-column line */
.sup-near{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13.5px;
}
.sup-near:last-child{ border-bottom:0; }
.sup-near .nm{ color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.sup-near .nm span{ color:var(--ink-40); }
.sup-near b{
  color:var(--navy); font-weight:700; font-variant-numeric:tabular-nums;
  white-space:nowrap; flex:0 0 auto;
}

/* a fact row is the mirror shape of .sup-near: a short FIXED label on the
   left (never wraps), a value on the right that can be long and does the
   wrapping/shrinking. Using .sup-near's own layout for both directions was
   the bug — it broke short labels like "Association" mid-word. */
.sup-fact{
  display:flex; gap:14px; align-items:baseline; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13.5px;
}
.sup-fact:last-child{ border-bottom:0; }
.sup-fact .lb{ flex:0 0 auto; color:var(--ink-40); }
.sup-fact .vl{
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere; text-align:right;
  color:var(--ink-60); font-weight:600;
}

/* a number quoted inline in a sentence, outside .stat */
.sup-n{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--navy); }

/* the shape cards ("what could be published") — a .card.card-pad plus a
   coloured kind chip; everything else is .card/.chip already */
.sup-shape h3{ margin-top:10px; font-size:16px; color:var(--navy); letter-spacing:-.015em; }
.sup-shape p{ margin-top:7px; color:var(--ink-40); font-size:13.5px; line-height:1.48; }

/* responsive: picker never forces horizontal scroll on a narrow phone */
@media (max-width:640px){
  .sup-pick{ flex-direction:column; align-items:stretch; }
  .sup-pick select, .sup-pick input[type=search]{ flex:1 1 auto; width:100%; }
}

/* ============================== what an organisation could put its name to
   The offer shelves, the "why they say yes" line inside a shape card, and the
   single pulled quote. Additive: every rule is .so- prefixed and no existing
   selector above is touched. */
.so-shelf + .so-shelf{ margin-top:38px; }
.so-hd{ margin-bottom:16px; max-width:70ch; }
.so-t{
  font-size:19px; letter-spacing:-.015em; color:var(--navy); margin:0;
}
.so-b{ margin-top:7px; color:var(--ink-40); font-size:13.5px; line-height:1.55; }

/* the persuasion line — this is the field that matters to the person being
   asked, so it is set apart rather than run in with the description */
.so-why{
  margin-top:12px; padding:10px 12px; border-radius:var(--r-s);
  background:var(--pale); color:var(--ink-60); font-size:13px; line-height:1.5;
}
.so-why b{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-25); margin-bottom:4px;
}
.so-how{ margin-top:9px; color:var(--ink-25); font-size:12.5px; }
.sup-shape .chip{ max-width:100%; overflow-wrap:anywhere; }

.so-more{ margin-top:16px; }
.so-more .grid{ margin-top:14px; }

/* the pulled quote — one organisation, their own words */
.so-quote{
  margin:0; padding:26px 30px; border-radius:var(--r-l);
  background:var(--white); border:1px solid var(--line);
  border-left:3px solid var(--cyan); box-shadow:var(--shadow-1); max-width:74ch;
}
.so-quote blockquote{
  margin:0; font-size:20px; line-height:1.42; letter-spacing:-.015em;
  color:var(--navy); overflow-wrap:anywhere;
}
.so-cond{ margin-top:12px; color:var(--ink-60); font-size:14px; line-height:1.5; }
.so-quote figcaption{
  margin-top:16px; font-size:12.5px; color:var(--ink-40); overflow-wrap:anywhere;
}
.so-quote figcaption span{ color:var(--ink-25); }
.so-quote figcaption a{ color:var(--ink-40); text-decoration:underline; text-underline-offset:2px; }
.so-quote figcaption a:hover{ color:var(--navy); }

/* the route out — claim, or tell us it's wrong */
.so-doors{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:720px){
  .so-doors{ grid-template-columns:1fr; }
  .so-quote{ padding:22px 20px; }
  .so-quote blockquote{ font-size:17px; }
}