/* Verbatim <style> block from design/topic.html. Do not edit by hand; re-extract instead. */
main:focus { outline: none; }
.page { padding-top: var(--sp-6); }

.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-13); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--faint); margin-right: 2px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs [aria-current="page"] { color: var(--text); font-family: var(--font-mono); }

/* Header */
.topic-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-top: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border); }
.topic-head__main { min-width: 0; flex: 1 1 420px; }
.topic-title { font-family: var(--font-mono); font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: -0.04em; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.topic-title__hash { color: var(--faint); font-weight: var(--fw-regular); }
.topic-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-14); color: var(--muted); }
.topic-desc { margin-top: var(--sp-3); max-width: 64ch; color: var(--text); font-size: var(--fs-16); }
.topic-stats { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); margin-top: var(--sp-6); }
.topic-stats > div { display: grid; gap: 2px; }
.topic-stats dt { font-size: var(--fs-12); color: var(--muted); }
.topic-stats dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-20); font-weight: var(--fw-semibold); letter-spacing: -0.02em; }
.topic-stats dd.delta-up { color: var(--rise-text); }
.topic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* Layout */
.topic-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--sp-8); align-items: start; margin-top: var(--sp-6); }
.list-toolbar { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.list-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.list-caption { font-size: var(--fs-13); color: var(--muted); }
.list-caption .num { color: var(--text); }
.inline-sponsor { display: none; }

/* Rail */
.topic-rail { display: grid; gap: var(--sp-4); align-content: start; }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); }
.rail-card__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.rail-card p { font-size: var(--fs-13); color: var(--muted); }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rel-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.rel-item:first-child { border-top: 0; padding-top: 0; }
.rel-item__body { flex: 1 1 0; min-width: 0; display: grid; }
.rel-item__name { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; }
.rel-item__meta { font-size: var(--fs-12); color: var(--muted); }
.digest-mini .btn { margin-top: var(--sp-3); }
.digest-mini__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.digest-mini__alt { font-size: var(--fs-13); color: var(--muted); }
.rank-note p + p { margin-top: var(--sp-2); }
.load-more { display: flex; justify-content: center; margin-top: var(--sp-4); }
.rank-note code { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text); }

/* Not found */
.notfound { padding: var(--sp-16) 0; }
.notfound h1.empty-state__title { font-size: var(--fs-24); }

@media (max-width: 1023.98px) {
  .topic-layout { grid-template-columns: minmax(0, 1fr); }
  .topic-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-sponsor { display: none; }
  .inline-sponsor { display: block; }
}
@media (max-width: 767.98px) {
  .page { padding-top: var(--sp-4); }
  .topic-title { font-size: var(--fs-32); }
  .topic-head { margin-top: var(--sp-4); gap: var(--sp-4); }
  .topic-stats { gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-4); }
  .topic-stats dd { font-size: var(--fs-16); }
  .topic-actions { width: 100%; }
  .topic-actions .subscribe-btn { flex: 1 1 auto; }
  .topic-rail { grid-template-columns: minmax(0, 1fr); }
  .segmented__item { height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (hover: hover) {
  .crumbs a:hover, .rel-item__name:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
}