/* 17-ratings-and-late.css — Insights ratings, "numbers are new" note, and the latest small fixes
   (empty Plastay toolbar, brands strip in search, home strip animation).
   Part of the old css/styles.css (lines 4372–4510); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ── Ratings (Insights) ──
   Sits inside .insights-chart-card and reuses its tab row, so the section
   reads as part of the page rather than something bolted on.

   Stars are text, not icons: at row size an icon font either renders
   inconsistently across Android webviews or needs a size that crowds the
   line. A filled/hollow character pair is legible at 0.8rem everywhere. */
.mk-rating-summary {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 14px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 4px;
}
.mk-rating-average {
  font-size: 2rem; font-weight: 800; color: #1a1a2e; line-height: 1;
}
.mk-rating-summary-label { font-size: 0.76rem; color: #8d95a5; margin-top: 3px; }
.mk-rating-summary-given { padding-bottom: 10px; }

.mk-rating-stars { color: #f0a500; font-size: 0.86rem; letter-spacing: 1px; }

.mk-rating-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.mk-rating-row:last-child { border-bottom: none; }
.mk-rating-row:active { background: #fafbff; }
.mk-rating-row-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 3px;
}
.mk-rating-who {
  font-size: 0.88rem; font-weight: 700; color: #1a1a2e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-rating-when { font-size: 0.72rem; color: #aab0bf; flex-shrink: 0; }
.mk-rating-sub {
  font-size: 0.76rem; color: #8d95a5; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-rating-text {
  font-size: 0.82rem; color: #444; line-height: 1.45; margin-top: 5px;
}

/* The empty state carries an explanation rather than a dash, because both
   emptinesses here are explainable — see listHtml() in ratings.js. */
.mk-rating-empty {
  padding: 1.6rem 0.5rem; text-align: center;
  font-size: 0.82rem; color: #95a5a6; line-height: 1.5;
}
.mk-rating-retry {
  margin-top: 10px; background: #19378C; color: #fff;
  border: none; border-radius: 10px; padding: 8px 18px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
}

/* Marks a rating that landed on the user's brand rather than on them
   personally. Both live in the same Received list — it's their own page
   and both are trades they handled — but which average a rating moved
   changes what it means, so the row says so. */
.mk-rating-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 5px;
  background: #eef1fb;
  color: #19378C;
  font-size: 0.6rem;
  font-weight: 700;
  vertical-align: 2px;
}

/* ── "These numbers are new" note (Insights) ──
   Rendered only while the numbers really are near-zero; see
   barelyAnyData in insights.js.

   Deliberately quieter than a warning or a tip. It isn't telling the
   seller to do anything — it's explaining why a screen they opened
   hopefully is full of zeros, and the worst version of that is one that
   looks like an alert about their own listings. Grey on grey, the same
   weight as the intro line above it. */
.insights-fresh-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 0.9rem;
  padding: 11px 13px;
  border-radius: 12px;
  background: #f4f6fb;
  border: 1px solid #e6eaf4;
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.5;
}
.insights-fresh-note .material-symbols-rounded {
  font-size: 18px;
  color: #9aa3b5;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Plastay toolbar with nothing saved.
   The controls stay in place so the screen keeps its shape — saving the
   first item should fill the page in, not conjure a whole interface that
   wasn't there a second ago. They're dimmed and inert because there is
   genuinely nothing to search or sort yet. */
.plastay-toolbar.is-empty .plastay-icon-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.plastay-toolbar.is-empty .plastay-count-info {
  color: #9aa3b5;
}

/* Brand strip inside search results.
   Reuses .brands-container / .brand-shortcuts / .brand wholesale, so the
   circles, labels and horizontal scroll are the same code as the home
   strip — only the surrounding spacing differs, because in search this
   sits between the query and the product grid rather than under a banner. */
.search-brands-strip {
  margin: 0 0 0.75rem;
  padding-top: 0.25rem;
}
.search-brands-strip .local-brands-label {
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}
/* The home strip animates its tiles in by adding .show one at a time.
   Search renders in one pass with no stagger, so without this the whole
   strip sat at opacity:0 — the container and its divider drew, and the
   circles didn't. That was the empty strip under "11 brands".
   The markup sets .show as well; this makes the strip independent of
   whether it ever does. */
.search-brands-strip .brand-shortcuts .brand {
  opacity: 1;
  transform: none;
}