/* ============================================================
   Port Call — Supplier Rating
   Adds a thumbs-up / thumbs-down strip to every .pfold and a
   live rank badge in the .pfold__hook. Suppliers inside each
   .sfold__body are auto-sorted by net score on load.
   ============================================================ */

/* Strip lives at the bottom of .pfold__body */
.sr-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  flex-wrap: wrap;
}
.sr-prompt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: var(--space-1);
}
.sr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
  line-height: 1;
}
.sr-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.sr-btn:hover { border-color: var(--color-sea); }
.sr-btn[disabled] { opacity: 0.6; cursor: progress; }
.sr-btn--up.is-active   { background: #dcfce7; color: #15803d; border-color: #15803d; }
.sr-btn--down.is-active { background: #fee2e2; color: #b91c1c; border-color: #b91c1c; }
.sr-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.sr-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  letter-spacing: 0.06em;
}
.sr-meta.is-loading { opacity: 0.5; }

/* Rank badge inserted into the pfold summary */
.sr-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-left: 6px;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  vertical-align: middle;
}
.sr-rank--1 { background: #fef3c7; border-color: #d97706; color: #92400e; }
.sr-rank--2 { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; }
.sr-rank--3 { background: #e0f2fe; border-color: #0284c7; color: #075985; }

/* Tiny inline note when ratings module is loading or offline */
.sr-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-muted);
  letter-spacing: 0.08em;
}

/* Section-level lead-in line */
.sr-section-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}