.syh-hdr { padding: var(--ta-hdr-pad) 0; border-bottom: 1px solid var(--bd); margin-bottom: var(--ta-sec-gap); }
.syh-breadcrumb { font-size: 11px; color: var(--tx3); margin-bottom: 5px; }
/* Underlined at rest: the accent against the crumb's own --tx3 is 1.28:1, so
   colour alone cannot mark the link inside the sentence (SC 1.4.1). */
.syh-breadcrumb a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.syh-title { font-size: 26px; font-weight: 900; color: var(--tx); letter-spacing: -.5px; }
.syh-subtitle { font-size: 13px; color: var(--tx2); margin-top: 6px; max-width: 640px; line-height: 1.5; }

.syh-group-ttl { font-size: 15px; font-weight: 800; color: var(--tx); margin: var(--ta-sec-gap) 0; display: flex; align-items: center; gap: 8px; }
/* Columns and gutters both come from .row .row-cols-* */
.syh-card {
    display: block; padding: 14px 16px; height: 100%;
    transition: border-color .15s;
}
.syh-card:hover { border-color: var(--blue); }
.syh-sym { font-size: 13px; font-weight: 800; color: var(--tx); }
.syh-name { font-size: 11.5px; color: var(--tx3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syh-quote { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.syh-price { font-size: 15px; font-weight: 800; color: var(--tx); }
.syh-chg { font-size: 11.5px; font-weight: 700; }
.syh-chg.up { color: var(--green-ink); }
.syh-chg.dn { color: var(--red-ink); }