/* Sidebar layout. Source order is main-then-rail so the content a reader wants
   leads on a narrow screen; the grid puts the rail on the left above 900px. */
.sidebar-grid { display: grid; gap: var(--gap); align-items: start;
                grid-template-columns: minmax(0, 1fr); }
.sidebar-main { min-width: 0; }
.sidebar-rail { min-width: 0; display: grid; gap: var(--gap); align-content: start; }
@media (min-width: 900px) {
  .sidebar-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .sidebar-rail { grid-column: 1; grid-row: 1; }
  .sidebar-main { grid-column: 2; grid-row: 1; }
}


/* Sparklines sit in a flex row beside the price. The SVG carries explicit
   width/height attributes, which a flex item treats as a basis it may exceed -
   so the line ran off the right edge of the card. Cap it and let it shrink. */
svg.spark { max-width: 40%; flex: 0 1 auto; min-width: 0; height: auto; }
@media (max-width: 640px) { svg.spark { display: none; } }

/* Cluster hub: the guide index on a site whose subject is a topic, not a coin. */
.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; margin: 0 0 var(--gap); }
a.cluster-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none;
                 color: inherit; }
a.cluster-link:hover .cluster-title { text-decoration: underline; }
.cluster-title { font-weight: 600; }

/* Related reading at the foot of an article. */
.related { margin-top: calc(var(--gap) * 1.5); padding-top: var(--gap);
           border-top: 1px solid var(--line); }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.related li { display: flex; flex-direction: column; gap: 2px; }

/* Hub / spoke navigation. */
.hub-link { font-weight: 600; }
.breadcrumb { margin: 0 0 6px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.hub-return { margin-top: var(--gap); }
a.cluster-title { display: block; font-weight: 600; text-decoration: none; }
a.cluster-title:hover { text-decoration: underline; }
.card p.muted { margin: 6px 0 0; }

/* Breadcrumbs. */
nav.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
                    padding: 0; margin: 0 0 10px; }
nav.breadcrumb li { display: flex; gap: 6px; align-items: center; }
nav.breadcrumb a { text-decoration: none; }
nav.breadcrumb a:hover { text-decoration: underline; }