.boat-specs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  
/* ── Elastec Deep Sea — information pills ───────────────────────
   Paste into Appearance → Customize → Additional CSS
   All pills share .pill as a base class.
   ─────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 20px;
  line-height: 1.4;
  white-space: nowrap;
  border: 0.5px solid transparent;
}

/* Sizes */
.pill-sm { font-size: 11px; padding: 3px 9px; }
.pill-lg { font-size: 13px; padding: 6px 14px; }

/* Dot — add a span.pill-dot inside the pill */
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Filled (dark navy surface) ── */
.pill-navy  { background: #0a1a30; color: #c8dff0; border-color: rgba(120,170,210,0.22); }
.pill-blue  { background: #1a3a5a; color: #3b9eff;  border-color: rgba(59,158,255,0.30); }
.pill-steel { background: #112240; color: #7ca4c8;  border-color: rgba(120,170,210,0.18); }

/* ── Outlined (transparent fill) ── */
.pill-outline-blue  { background: rgba(59,158,255,0.08);   color: #3b9eff;  border-color: rgba(59,158,255,0.35); }
.pill-outline-steel { background: rgba(124,164,200,0.08);  color: #7ca4c8;  border-color: rgba(124,164,200,0.30); }
.pill-outline-ice   { background: rgba(200,223,240,0.07);  color: #c8dff0;  border-color: rgba(200,223,240,0.25); }

/* ── Solid accent ── */
.pill-solid-amber  { background: #e8a130; color: #050f1e; }
.pill-solid-blue   { background: #1a6fc4; color: #c8dff0; }
.pill-solid-bright { background: #3b9eff; color: #050f1e; }

/* ── Status / semantic ── */
.pill-green { background: rgba(62,207,142,0.10);   color: #3ecf8e; border-color: rgba(62,207,142,0.28); }
.pill-amber { background: rgba(232,161,48,0.12);   color: #e8a130; border-color: rgba(232,161,48,0.30); }
.pill-red   { background: rgba(228,92,92,0.10);    color: #e45c5c; border-color: rgba(228,92,92,0.28); }
.pill-teal  { background: rgba(45,212,191,0.10);   color: #2dd4bf; border-color: rgba(45,212,191,0.28); }

/* Dot fill helpers — apply to span.pill-dot */
.dot-blue  { background: #3b9eff; }
.dot-amber { background: #e8a130; }
.dot-green { background: #3ecf8e; }
.dot-red   { background: #e45c5c; }
.dot-steel { background: #7ca4c8; }
.dot-ice   { background: #c8dff0; }

/* ── Spec / metadata (monospace) ── */
.pill-spec {
  background: #112240;
  color: #7ca4c8;
  border-color: rgba(120,170,210,0.15);
  font-family: monospace;
  letter-spacing: 0.02em;
}