/* Pebbles Listening — T-009 honest numbers: the grey words honest.js puts next to a number, and the basis line.
   Grey always comes with a word (never colour alone). On a phone the word sits under the number, never only in a tooltip. */
.honest-word {
  display: inline; margin-left: 6px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
  white-space: nowrap; font-style: normal; background: none; border: 0; padding: 0; font-family: inherit;
}
a.honest-word, button.honest-word { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; cursor: pointer; }
a.honest-word:hover, button.honest-word:hover { color: var(--ink); text-decoration-color: currentColor; }
a.honest-word:focus-visible, button.honest-word:focus-visible { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; border-radius: 3px; }
small.honest-word.uncertain { margin-left: 4px; font-size: var(--t-micro, 11px); }
.stars + .honest-word.uncertain { display: inline-block; }
/* Providers table: "Still uncertain" on a small second line, so the Rating column stays as narrow as before */
.ptable td .honest-word.uncertain { display: block; margin: 1px 0 0; line-height: 1.2; }
.honest-basis { margin: 10px 0 0; font-size: var(--t-xs); color: var(--ink-3); position: relative; }
/* Today: the basis line sits in the hero's top row, right before "Sample data" (no extra row, so the mood chart keeps its posts pane) */
.hero-top .honest-basis { margin: 0 0 0 auto; z-index: 1; }
.hero-num .lbl .honest-word { margin-left: 2px; }
/* A grey Mood word widens the Mood column, so the posts cell next to it (with its ⓘ) takes a second line. Win those 17 px back
   from the gaps above the stats and above the tiles, so the mood chart keeps its "Posts per day" pane on a 1440 × 900 screen. */
@media (min-width: 1024px) and (min-height: 781px) {
  .hero:has(.hero-num .lbl .honest-word) .hero-metrics { margin-top: 9px; }
  .hero:has(.hero-num .lbl .honest-word) .layer-strip { margin-top: 12px; }
}
/* the Negative legend cell is narrow: its word goes under the number instead of being cut off */
.share-legend .honest-word { display: block; margin: 2px 0 0; white-space: normal; }
/* short desktop screens: the top row floats top right next to the verdict; the basis line wraps under the chip in that narrow corner */
@media (min-width: 1180px) and (max-height: 780px) {
  .hero-top { flex-direction: column; align-items: flex-end; gap: 4px; }
  .hero-top .honest-basis { order: 2; margin: 0; max-width: 110px; text-align: right; line-height: 1.3; }
}
/* topic rows: the long "Too few to call a trend · read them" may wrap */
.tlast.few small, .tlast.unclear small { white-space: normal; text-align: right; max-width: 13ch; }
@media (max-width: 767px) {
  .hero-num .honest-word, .share-legend .honest-word, .share-meta .honest-word, .digest-stats .honest-word, .watch-stats .honest-word { display: block; margin: 2px 0 0; white-space: normal; }
}
/* In a stat the value never wraps; with large text (Android font size 200%) the grey word drops onto its own line and may wrap, instead of widening the page */
.stat .v:has(.honest-word) { flex-wrap: wrap; row-gap: 0; }
.stat .v .honest-word { white-space: normal; min-width: 0; }
/* Detail tiles (Keeping an eye on, topic detail): the grey word wraps inside its tile at every width, never past the tile edge */
.meta-cell .v .honest-word { white-space: normal; min-width: 0; }