/* Connectivity hell: the ranked list, an entity page's counts, and the charts (inline SVG from history.json). */
.shame-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 20px; }
.shame-list { margin: 24px 0 0 !important; padding: 0 !important; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.site .shame-row { display: grid; grid-template-columns: 3ch 1fr 80px auto; align-items: center; gap: 16px; margin: 0; padding: 14px 20px; border-top: 1px solid var(--border); background: linear-gradient(180deg, #ffffff07, #ffffff02); }
.shame-row:first-child { border-top: 0; }
.shame-row[hidden] { display: none; }
.shame-rank { font: 600 18px var(--mono); color: var(--accent-violet); text-align: end; }
.shame-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shame-name strong { overflow-wrap: anywhere; font-size: 17px; font-weight: 620; color: var(--text); }
.shame-name span { font-size: 14px; color: var(--text-3); }
.shame-name:hover strong { color: #c9b8ff; }
.shame-count { white-space: nowrap; text-align: end; }
.shame-count b { font: 600 18px var(--mono); color: var(--text); }
.shame-count small { font-size: 13px; color: var(--text-3); }
.site .shame-empty { margin-top: 24px; padding: 22px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-2); }
.shame-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.shame-stat { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #ffffff07, #ffffff02); }
.shame-stat b { font: 600 32px var(--mono); color: var(--text); }
.shame-stat span { font-size: 15px; color: var(--text-2); }
.shame-stat small { font: 13px var(--mono); color: var(--accent-violet); }
.shame-spark { display: block; width: 80px; height: 22px; overflow: visible; }
.shame-spark path { fill: none; stroke: var(--accent-violet); stroke-width: 1.5; stroke-linejoin: round; opacity: .85; }
.shame-chart { margin-top: 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #ffffff07, #ffffff02); }
.shame-chart svg { display: block; width: 100%; min-width: 520px; height: auto; padding: 12px; box-sizing: border-box; }
.shame-chart .axis line { stroke: var(--border-strong); stroke-width: 1; }
.shame-chart .axis .grid { stroke: var(--border); stroke-dasharray: 2 4; }
.shame-chart text { font: 12px var(--mono); fill: var(--text-3); }
.shame-trend .line { fill: none; stroke: var(--accent-violet); stroke-width: 2; stroke-linejoin: round; }
.shame-trend .area { fill: #b096fa1f; }
.shame-bump { min-width: 640px !important; }
.shame-bump .bump-line polyline { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; opacity: .8; }
.shame-bump .bump-line circle { fill: var(--c); stroke: var(--bg); stroke-width: 1.5; }
.shame-bump .mid { fill: var(--text-3); font-size: 11px; }
.shame-bump .bump-line:hover polyline { stroke-width: 4; opacity: 1; }
.shame-bump a:hover text { text-decoration: underline; }
.shame-switch .guide-chips { margin-top: 16px; }
.shame-panel[hidden] { display: none; }
.shame-bars { margin: 20px 0 0 !important; padding: 0 !important; list-style: none; display: grid; gap: 8px; }
.site .shame-bars li { display: grid; grid-template-columns: minmax(0, 14rem) 1fr 5ch; align-items: center; gap: 12px; margin: 0; }
.site .page-section li.shame-row, .site .page-section .shame-bars li { max-width: none; }
.shame-bar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; color: var(--text-2); }
.shame-bar-name a { color: var(--text); }
.shame-bar-name a:hover { color: #c9b8ff; }
.shame-bar { height: 12px; border-radius: 99px; background: #ffffff08; overflow: hidden; }
.shame-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent-violet); opacity: .8; }
.shame-bars b { font: 600 15px var(--mono); color: var(--text); text-align: end; }
@media (max-width: 600px) { .shame-stats { grid-template-columns: minmax(0, 1fr); } .site .shame-row { grid-template-columns: 3ch 1fr auto; } .shame-spark { display: none; } .site .shame-bars li { grid-template-columns: minmax(0, 8rem) 1fr 4ch; } .site .shame-row { padding: 12px 14px; gap: 12px; } }