/* ============================================================
   Topics (topics-feature.md Phase I.2, 2026-10-13)
   The topic page, the hashtag page and the chips on every row.
   Chrome stays greyscale on the theme tokens; the only hue on a topic
   surface is the topic's own swatch (--tp-swatch), and the brand colour
   appears on the Follow call to action alone.
   ============================================================ */

/* ── Chips on post / event / poll rows ─────────────────────────────── */
.fd_topics { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.fd_topic {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px 0 4px; border-radius: 999px;
  background: var(--elevated-surface); color: var(--text-intermediate);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.fd_topic:hover { background: var(--elevated-highlight); }
.fd_topic_tile {
  width: 20px; height: 20px; border-radius: 6px; flex: 0 0 20px;
  background: var(--tp-swatch, var(--text-tertiary)); color: #fff;
  font-size: 8.5px; font-weight: 800; line-height: 1; letter-spacing: -0.2px;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.fd_topic_tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd_topic_rank { font-size: 12px; color: var(--text-tertiary); line-height: 1; }
.fd_topic_more { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--elevated-surface); color: var(--text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; }

/* In-text hashtags: the sentence's own ink, bold — never the link blue
   (the owner rule; mentions keep the link colour). */
.text_content a.post_hashtag, .tp_post_body a.post_hashtag { color: var(--text-primary); font-weight: 700; text-decoration: none; }
.text_content a.post_hashtag:hover { text-decoration: underline; }

/* ── Topic page ────────────────────────────────────────────────────── */
.tp_main { display: block; }
.tp_header { position: relative; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; border-radius: 0 0 18px 18px; }
.tp_header_plain { padding-top: 16px; }
/* The ColorBleed: the swatch at low alpha, anchored high and left, fading
   out before the tabs. color-mix keeps it a wash, not a fill. */
.tp_bleed { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 85% at 18% 0%, color-mix(in srgb, var(--tp-swatch) 32%, transparent) 0%, color-mix(in srgb, var(--tp-swatch) 10%, transparent) 45%, transparent 75%); }
.tp_header > *:not(.tp_bleed) { position: relative; z-index: 1; }
.tp_tile { width: 72px; height: 72px; border-radius: 20px; background: var(--tp-swatch, var(--text-tertiary)); color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 8px; }
.tp_tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp_h1 { margin: 2px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; color: var(--text-primary); }
.tp_slug { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.tp_aliases { font-weight: 500; color: var(--text-tertiary); }
.tp_desc { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--text-intermediate); }
.tp_desc_muted { color: var(--text-secondary); font-size: 12.5px; }
.tp_counts { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); }
.tp_counts b { color: var(--text-primary); font-weight: 600; }
.tp_actions { display: flex; gap: 8px; padding-top: 4px; }
.tp_follow {
  flex: 1; height: 42px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; font: 600 14px inherit; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.tp_follow i { display: none; font-size: 15px; }
.tp_follow.is_following { background: var(--bg-color-translucent); color: var(--text-primary); border: 1px solid var(--border-highlight); }
.tp_follow.is_following i { display: inline; }
.tp_follow:disabled { opacity: .6; cursor: default; }

.tp_ranked { margin: 12px 16px 0; padding: 12px; border-radius: 16px; background: var(--elevated-surface); color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.tp_ranked:hover { background: var(--elevated-highlight); }
.tp_ranked_ico { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--text-primary); display: flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.tp_ranked_ico i { font-size: 18px; }
.tp_ranked_txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp_ranked_t { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp_ranked_s { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--text-secondary); }
.tp_ranked_chev { color: var(--icon-shade); font-size: 18px; }

.tp_tabs { margin-top: 12px; display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid var(--border-color); overflow-x: auto; }
.tp_tab { flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 0 10px; font: 600 14px inherit; font-family: inherit; color: var(--text-tertiary); cursor: pointer; }
.tp_tab.is_active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.tp_panel { display: none; }
.tp_panel.is_active { display: block; }
/* Scripts off: no panel is marked by tabs.js, so show them all stacked. */
.tp_main:not(.tp_enhanced) .tp_panel { display: block; }
.tp_cards { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.tp_lists { padding: 14px 16px; }
.tp_empty { color: var(--text-tertiary); padding: 32px 16px; text-align: center; font-size: 14px; }
.tp_error { color: var(--text-error); padding: 24px; text-align: center; }
.tp_hashtag_list { display: flex; flex-direction: column; }
.tp_hashtag_list .tp_cards { padding: 8px 16px; }
.tp_side_rank { font-size: 14px; font-weight: 600; color: var(--text-primary) !important; }
.tp_side_sub { font-size: 12px; color: var(--text-tertiary); }

/* ============================================================
   Discovery (topics Phase I.3, 2026-10-13)
   The topics index (/topics), the search page's idle state and topic
   results, the home side pane's trending + "Your topics" widgets, and the
   feed's "For you · Topics" strip. Same rule as above: chrome on the theme
   tokens, the swatch as the only hue, Follow the only brand colour.
   ============================================================ */

/* ── Index page frame ─────────────────────────────────────────────── */
.ti_main { display: block; }
.ti_hd { padding: 16px 16px 4px; }
.ti_h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.ti_sub { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--text-secondary); }

/* ── Sections ─────────────────────────────────────────────────────── */
.td_sec { padding: 14px 16px 0; }
.td_sec + .td_sec { margin-top: 10px; border-top: 1px solid var(--border-color); }
.td_sec_flush { padding-left: 0; padding-right: 0; }
.td_sec_hdr { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; }
.td_sec_hdr_col { flex-direction: column; align-items: stretch; gap: 4px; }
.td_sec_t { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.td_sec_n { font-size: 13px; font-weight: 600; color: var(--text-tertiary); margin-left: 6px; }
.td_sec_lnk { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.td_sec_lnk:hover { text-decoration: underline; }
.td_sec_lnk_quiet { color: var(--text-tertiary); }
.td_sec_lnk_quiet:hover { text-decoration: none; }
.td_sec_sub { margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--text-secondary); }

/* ── Rows ─────────────────────────────────────────────────────────── */
.td_rows { display: flex; flex-direction: column; }
.td_row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 0; color: inherit; text-decoration: none; border-radius: 12px; }
a.td_row:hover, .td_row_sm:hover { background: var(--elevated-highlight); }
.td_row_sm { min-height: 52px; padding: 4px 0; gap: 10px; }
.td_row_flush { padding: 0; min-height: 0; }
.td_rank { width: 16px; flex: 0 0 16px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-tertiary); }
.td_tile {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--tp-swatch, var(--text-tertiary)); color: #fff; font-weight: 800; line-height: 1; letter-spacing: -0.2px;
}
.td_tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td_tile_30 { width: 30px; height: 30px; border-radius: 9px; font-size: 10.5px; }
.td_tile_34 { width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
.td_tile_38 { width: 38px; height: 38px; border-radius: 11px; font-size: 12px; }
.td_tile_40 { width: 40px; height: 40px; border-radius: 12px; font-size: 12.5px; }
.td_tile_48 { width: 48px; height: 48px; border-radius: 14px; font-size: 15px; }
.td_tile_58 { width: 58px; height: 58px; border-radius: 18px; font-size: 16px; }
.td_meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.td_name { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td_name_lg { font-size: 16px; font-weight: 800; }
.td_sub { font-size: 12px; font-weight: 500; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td_new { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--text-primary); color: var(--text-primary-inverted); font-size: 11.5px; font-weight: 700; }
.td_chev { color: var(--icon-shade); font-size: 18px; flex: 0 0 auto; }

/* Follow: brand filled; Following: outlined on the theme tokens. */
.td_follow {
  flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--blue);
  background: var(--blue); color: #fff; font: 600 12.5px inherit; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.td_follow.is_following { background: transparent; border-color: var(--border-highlight); color: var(--text-primary); }
.td_follow.is_following span::before { content: "✓"; margin-right: 6px; font-size: 12px; }
.td_follow[disabled] { opacity: 0.6; cursor: default; }

/* ── "Your topics" strip (search idle) ────────────────────────────── */
.td_strip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 6px; }
.td_strip_item { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.td_strip_name { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--text-intermediate); }
.td_strip_fresh { font-size: 11px; font-weight: 600; color: var(--text-tertiary); }

/* ── Rising cards ─────────────────────────────────────────────────── */
.td_grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.td_rise { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--elevated-surface); border: 1px solid var(--border-color); color: inherit; text-decoration: none; }
.td_rise:hover { background: var(--elevated-highlight); }
.td_rise_hd { display: flex; align-items: center; gap: 8px; }
.td_rise_name { font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.td_spark { width: 100%; height: 28px; color: var(--text-secondary); display: block; }
.td_rise_meta { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* ── Browse by domain ─────────────────────────────────────────────── */
.td_domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 4px; }
.td_domain { height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 14px; background: var(--container); color: inherit; text-decoration: none; }
.td_domain:hover { background: var(--elevated-highlight); }
.td_domain_mono { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--elevated-surface); color: var(--text-primary); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.td_domain_name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td_domain_n { font-size: 11.5px; font-weight: 500; color: var(--text-tertiary); }
.td_domain_lst { display: flex; flex-direction: column; gap: 2px; }
.td_domain_lnk { display: flex; align-items: center; justify-content: space-between; padding: 7px 4px; font-size: 13.5px; font-weight: 600; color: var(--text-intermediate); text-decoration: none; border-radius: 8px; }
.td_domain_lnk:hover { background: var(--elevated-highlight); }

/* ── New hashtags ─────────────────────────────────────────────────── */
.td_tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px; }
.td_tag { height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 999px; background: var(--container); color: inherit; text-decoration: none; }
.td_tag:hover { background: var(--elevated-highlight); }
.td_tag_hash { font-size: 13px; font-weight: 700; color: var(--text-tertiary); }
.td_tag_slug { font-size: 13px; font-weight: 600; color: var(--text-intermediate); }
.td_tag_n { margin-left: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); }

/* ── Search: the top-hit card, the chips and the door ──────────────── */
.td_card { padding: 14px; border-radius: 18px; background: var(--elevated-surface); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; }
.td_card_rank { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--container); font-size: 12.5px; font-weight: 600; color: var(--text-intermediate); }
.td_card_rank i { color: var(--text-secondary); font-size: 16px; }
.td_card_alias { margin: 0; font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.td_chips { margin-top: 2px; padding-bottom: 4px; }
.srch_idle { display: flex; flex-direction: column; gap: 4px; }
.srch_idle .td_sec + .td_sec { border-top: 0; margin-top: 4px; }
.td_door { margin-top: 10px; height: 52px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; border-radius: 16px; border: 1px solid var(--border-color); background: var(--elevated-surface); color: var(--text-primary); font-size: 15px; font-weight: 600; text-decoration: none; }
.td_door:hover { background: var(--elevated-highlight); }
.td_door span { flex: 1; }
.td_door_svg, .srch_chip_svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ── Side pane widgets ─────────────────────────────────────────────── */
.td_wid .td_rows { padding: 2px 0; }
.td_wid .td_row_sm .td_name { font-size: 13.5px; }

/* ── Feed strip: For you · Topics N ───────────────────────────────── */
.fd_tabs { display: flex; gap: 22px; padding: 0 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.fd_tab { padding: 12px 0 10px; font-size: 14px; font-weight: 600; color: var(--text-tertiary); text-decoration: none; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.fd_tab.is_active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.fd_tab_pill { padding: 2px 8px; border-radius: 999px; background: var(--text-primary); color: var(--text-primary-inverted); font-size: 11.5px; font-weight: 700; line-height: 1.2; }

@media screen and (max-width: 639px) {
  .ti_hd { padding: 12px 12px 2px; }
  .td_sec { padding: 12px 12px 0; }
  .td_sec_flush { padding-left: 0; padding-right: 0; }
  .fd_tabs { padding: 0 12px; }
}

/* ── Ranked lists on the topic page (Lists tab) ───────────────────────────
   Moved here 2026-10-13 from ranklists.css, which the topic page never
   loads — the cards had rendered as bare links since I.2 (a silent CSS
   failure found on the I.4 walk). Theme tokens only, like every tp_* rule
   above; an undefined var() drops the declaration without a word. */
.tp_lists { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 24px; }
.tp_list_card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--elevated-surface); border: 1px solid var(--border-color);
  color: inherit; text-decoration: none;
}
.tp_list_card:hover { background: var(--elevated-highlight); }
.tp_list_title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.tp_list_meta { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* "Also in" row (topics Phase I.4, H-D2): the list's other topics as the
   feed chip look; the only hue is each topic's swatch. */
.tp_list_also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.tp_list_also_label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.tp_list_also_chip { cursor: default; }

/* The topic page's side panes, topics I-D9: the viewer's standing on the
   Rank widget, "Top this week", Related. Greyscale on the theme tokens; a
   fallback avatar's colour and the topic swatch on a Related tile are the
   only hues. */
.tp_side_standing { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--elevated-surface); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tp_side_standing_rank { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.tp_side_standing_sub { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.tp_top .tp_side_sub { display: block; margin-bottom: 10px; }
.tp_top_lst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tp_top_row { display: flex; align-items: center; gap: 10px; }
.tp_top_pos { flex: 0 0 14px; width: 14px; font-size: 12.5px; font-weight: 700; color: var(--text-tertiary); text-align: right; font-variant-numeric: tabular-nums; }
.tp_top_prof { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.tp_top_prof .prof_img { width: 30px; height: 30px; flex: 0 0 30px; }
.tp_top_prof .prof_img_fallback { font-size: 11px; }
.tp_top_name { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp_top_n { font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.tp_top_more { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.tp_related_chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp_related_chips .fd_topic { margin: 0; }

/* The header's round controls (topics I-D11 / I-D12): the bell and "Post
   in this topic", the mockup's two 42 px circles beside Follow. The lit
   bell is the one brand-coloured icon, like the person bell in the app. */
.tp_icon_btn { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-highlight); background: var(--bg-color-translucent); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; font-size: 18px; padding: 0; }
.tp_icon_btn:hover { background: var(--elevated-highlight); }
.tp_icon_btn:disabled { opacity: .6; cursor: default; }
.tp_bell.is_on { color: var(--blue); border-color: var(--blue); }

/* The topic picker (topics Phase C): picked chips, the typeahead box, the
   results list. Greyscale chrome; a topic's own swatch on its tile is the
   only hue. The first chip is the primary — titled, not coloured. */
.tp_pick { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tp_pick_chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp_pick_chips:empty { display: none; }
.tp_pick_chip { cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.tp_pick_chip:hover { border-color: var(--border-highlight); }
.tp_pick_x { margin-left: 2px; color: var(--text-tertiary); font-weight: 700; }
.tp_pick_in { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--surface); color: var(--text-primary); font: 500 14px inherit; font-family: inherit; }
.tp_pick_in:focus { outline: none; border-color: var(--border-highlight); }
.tp_pick_in:disabled { color: var(--text-tertiary); }
.tp_pick_results { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--elevated-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; }
.tp_pick_results[hidden] { display: none; }
.tp_pick_row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-primary); cursor: pointer; text-align: left; font-family: inherit; }
.tp_pick_row:hover, .tp_pick_row:focus { background: var(--elevated-highlight); outline: none; }
.tp_pick_row_txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp_pick_row_name { font-size: 14px; font-weight: 600; }
.tp_pick_row_slug { font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.tp_pick_none { padding: 10px 12px; font-size: 13px; color: var(--text-tertiary); }
.tp_pick_hint { font-size: 12px; color: var(--text-tertiary); }

/* The topic page's page tabs (Organisers · Communities): one card per page. */
.tp_pages { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 24px; }
.tp_page_card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--elevated-surface); color: inherit; text-decoration: none; }
.tp_page_card:hover { background: var(--elevated-highlight); }
.tp_page_card .prof_img { width: 44px; height: 44px; flex: 0 0 44px; }
.tp_page_txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp_page_name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp_page_meta { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.tp_page_card .fd_topics { margin-top: 4px; }

/* "Last month's top" (topics Phase G): the same rows as Top this week, a
   laurel mark in place of the count. Ships hidden until the api lists
   someone. */
.tp_awards[hidden] { display: none; }
.tp_awards .tp_side_sub { display: block; margin-bottom: 10px; }
.tp_awards_mark { font-size: 14px; color: var(--text-tertiary); }