/**
 * InnerPulse Insights
 *
 * Datenbeitraege unter /innerpulse/insights/. Portiert aus einer eigenstaendigen
 * Auswertungsseite; die urspruenglichen Farben (warmes Braun, Amber, Teal) sind
 * auf die InnerPulse-Tokens umgehaengt. Alles unterhalb von .ip-insight gescoped,
 * damit nichts in Blog- oder Produktseiten leckt.
 *
 * Serien-Zuordnung: Teal = primaere Groesse (Nennungen), Amber = sekundaere (Upvotes).
 */

.ip-insight {
    /* Diagramm-Palette, abgeleitet aus den globalen InnerPulse-Tokens */
    --ins-primary: var(--accent-light);
    --ins-secondary: var(--warm);
    --ins-neutral: var(--text-secondary);
    --ins-marker: var(--red);
    --ins-panel: var(--bg-card);
    --ins-panel-alt: var(--bg-card-hover);
    --ins-line: var(--border);
    --ins-line-soft: rgba(var(--border-rgb), 0.6);
    --ins-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ==================== GRUNDGERUEST ==================== */

/* Insights nutzen die Breite des Footers: dessen .footer-inner liegt bei
   1200px, der Container rechnet 24px Innenabstand je Seite dazu. So stehen
   Inhalt, Seitenleiste und Footer auf derselben Kante. */
.ip-insight .ip-container { max-width: 1248px; }

/* Der Blog deckelt die Textspalte auf 720px. Fuer Diagramme, Ranglisten und
   den Zeitstrahl ist das zu schmal, hier zaehlt die volle Restbreite. */
.ip-insight .ip-article-content { min-width: 0; max-width: none; flex: 1; }

/* Der Closer bringt 100px eigenen Abstand mit, der Blog-Wert darueber
   summiert sich sonst zu einer Luecke von 180px. */
.ip-insight .ip-article-main { padding-bottom: 16px; }

/* Der Blog gibt dem Seitenleisten-CTA eine flache Flaeche. Auf Insights
   traegt er denselben Verlauf wie der Knopf in der Navigation. */
.ip-insight .ip-article-cta__button {
    background: var(--accent-gradient);
    color: var(--white);
}

.ip-insight__body > section {
    padding: 46px 0;
    border-bottom: 1px solid var(--ins-line);
}

.ip-insight__body > section:last-of-type { border-bottom: 0; }

.ip-insight__body .ins-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ins-secondary);
    margin-bottom: 6px;
}

.ip-insight__body h3 {
    font-size: clamp(19px, 2.4vw, 23px);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 6px;
    color: var(--text);
}

/* Fliesstext laeuft ueber die volle Inhaltsbreite, nicht auf Lesebreite
   gedeckelt, damit Absaetze und Diagramme auf derselben Kante enden. */
.ip-insight__body .ins-lead {
    max-width: none;
    color: var(--text-secondary);
    font-size: 15px;
    margin: 0;
}

/* Der Hero steht auf derselben Kante wie Inhalt und Seitenleiste. Der Blog
   deckelt ihn auf 720px, dadurch sass die Trennlinie sichtbar zu weit innen.
   Fliesstext bleibt trotzdem lesbar schmal. */
.ip-insight .ip-article-header { max-width: none; }
.ip-insight .ip-article-header__title { max-width: 900px; }
.ip-insight .ip-article-header__subtitle { max-width: 680px; margin-left: auto; margin-right: auto; }

/* ==================== KENNZAHLEN ==================== */

.ins-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 1px;
    background: var(--ins-line);
    border: 1px solid var(--ins-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: 26px;
}

.ins-kpi {
    background: var(--ins-panel);
    padding: 16px 12px;
    text-align: center;
}

.ins-kpi b {
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

/* Beschriftung bleibt einzeilig: ein Umbruch mitten in "Median-Jahrgang"
   zerreisst die Kachelreihe optisch. */
.ins-kpi span {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ==================== DIAGRAMME ==================== */

.ins-chart { width: 100%; height: auto; display: block; margin: 24px 0 0; }
.ins-chart .tick { fill: var(--text-secondary); font-size: 12px; }
.ins-chart .val { fill: var(--text); font-size: 12px; font-weight: 600; }

.ins-chart .needle {
    fill: var(--ins-marker);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ==================== BALKENLISTEN ==================== */

/* Alle Beschriftungen stehen ueber dem Balken, der Balken nutzt die volle
   Breite. Dadurch sind Alben- und Kuenstlerliste gleich breit, obwohl die
   eine zwei Textzeilen fuehrt und die andere eine. */

.ins-bars { list-style: none; margin: 24px 0 0; padding: 0; }

.ins-bars li {
    padding: 13px 0;
    border-bottom: 1px solid var(--ins-line-soft);
}

.ins-bars li[hidden] { display: none; }

.ins-bar__head {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 9px;
}

/* Zwei Ranglisten nebeneinander: die Zeilenpaare werden per JavaScript auf
   gleiche Hoehe gebracht (siehe innerpulse-insights.js). Der Balken haengt
   dabei am unteren Rand, damit die Balken beider Spalten auf einer Linie
   liegen. Der Ausgleichsraum landet so zwischen Titel und Balken, wo er wie
   Abstand wirkt, statt als Luecke am Zeilenende die Struktur zu brechen. */
.ins-panel .ins-bars li { display: flex; flex-direction: column; }
.ins-panel .ins-bar__head { margin-bottom: auto; padding-bottom: 9px; }

/* Ranglisten stehen als <ol> mit Platznummer, alles andere als <ul> ohne. */
ul.ins-bars .ins-bar__head { grid-template-columns: minmax(0, 1fr) auto; }

.ins-bars .rank {
    font-family: var(--ins-mono);
    font-size: 12px;
    color: var(--text-dim);
}

.ins-bars .name { font-size: 15px; color: var(--text); }

.ins-bars .name .sub {
    margin-left: 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ins-bars .track {
    background: var(--ins-panel-alt);
    height: 11px;
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.ins-bars .track + .track { margin-top: 4px; }

.ins-bars .track.thin {
    height: 5px;
    background: rgba(var(--overlay-rgb), 0.06);
}

.ins-bars .fill {
    display: block;
    height: 100%;
    transform-origin: left;
    animation: ins-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ins-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .ins-bars .fill { animation: none; }
}

.ins-bars .num {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-family: var(--ins-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ins-bars .num b { font-weight: 500; color: var(--text); }
.ins-bars .num i { font-style: normal; font-size: 12px; color: var(--text-secondary); }

/* Zahlenfarbe folgt der Balkenfarbe */
.ins-bars--dual .num b { color: var(--ins-primary); }
.ins-bars--dual .num i { color: var(--ins-secondary); }

/* Katalogbreite: Der Prozentwert steht wie in allen anderen Listen oben
   rechts in der Kopfzeile. Unter dem Balken bleibt nur der Titel, ebenfalls
   rechtsbuendig und ungekuerzt. */
.ins-bar__pct { color: var(--ins-primary); }

.ins-bar__foot { margin-top: 7px; text-align: right; }

.ins-bar__title {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ins-legend {
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 18px;
}

.ins-legend span { display: inline-flex; align-items: center; gap: 7px; margin-right: 20px; }
.ins-legend i { width: 14px; height: 8px; display: block; border-radius: 2px; }

/* ==================== SCHIENE MIT PFEILEN ====================
   Gemeinsame Mechanik von Genre-Filter und Zeitstrahl: eine Zeile, die
   waagerecht scrollt, mit zwei Pfeilen daneben. Am jeweiligen Ende wird der
   Pfeil inaktiv, damit sichtbar ist, dass nichts mehr kommt. */

.ins-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
}

.ins-rail__track {
    display: flex;
    gap: 1px;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ins-rail__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ins-rail__track { scroll-behavior: auto; }
}

.ins-rail__arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--ins-panel);
    border: 1px solid var(--ins-line);
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}

.ins-rail__arrow:hover:not([disabled]) { border-color: var(--ins-primary); color: var(--ins-primary); }
.ins-rail__arrow:focus-visible { outline: 2px solid var(--ins-primary); outline-offset: 2px; }
.ins-rail__arrow[disabled] { opacity: 0.3; cursor: default; }
.ins-rail__arrow svg { width: 15px; height: 15px; }

/* ==================== GENRE-FILTER ==================== */

.ins-genres .ins-rail__track {
    background: var(--ins-line);
    border: 1px solid var(--ins-line);
    border-radius: var(--radius-sm);
}

.ins-tab {
    flex: 0 0 auto;
    background: var(--ins-panel);
    color: var(--text-secondary);
    border: 0;
    cursor: pointer;
    padding: 12px 18px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.ins-tab i {
    font-style: normal;
    font-family: var(--ins-mono);
    font-size: 12px;
    letter-spacing: 0;
    color: var(--text-dim);
    margin-left: 8px;
}

.ins-tab:hover { background: var(--ins-panel-alt); color: var(--text); }

/* Aktives Genre nur ueber Schrift- und Flaechenfarbe, ohne Unterstrich. */
.ins-tab[aria-selected="true"] {
    background: var(--ins-panel-alt);
    color: var(--ins-primary);
}

.ins-tab[aria-selected="true"] i { color: var(--text); }
.ins-tab:focus-visible { outline: 2px solid var(--ins-primary); outline-offset: -2px; }

/* ==================== RANGLISTEN-PANEL ==================== */

.ins-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 36px;
    margin-top: 30px;
}

.ins-sublabel {
    font-size: 11px;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--ins-secondary);
    margin-bottom: 2px;
}

.ins-panel h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.ins-more {
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--ins-line);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 9px 16px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

/* Stehen die Spalten nebeneinander, klappt ein gemeinsamer Knopf beide auf.
   Stehen sie untereinander, bekommt jede Liste ihren eigenen: sonst muesste
   man an der kompletten ersten Liste vorbeiscrollen, nur um den gemeinsamen
   Knopf zu erreichen. Die Umschaltung setzt das Skript ueber die Klasse
   ins-panel--stacked, gemessen an der tatsaechlichen Anordnung. */
.ins-panel__more { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.ins-column__more { display: none; }
.ins-panel--stacked .ins-panel__more { display: none; }
.ins-panel--stacked .ins-column__more:not([hidden]) { display: inline-block; }

.ins-more:hover { border-color: var(--ins-primary); color: var(--ins-primary); }
.ins-more:focus-visible { outline: 2px solid var(--ins-primary); outline-offset: 2px; }
.ins-more[disabled] { opacity: 0.4; cursor: default; border-color: var(--ins-line); color: var(--text-secondary); }

/* ==================== ZEITSTRAHL ====================
   Waagerechte Chronologie, aeltester Jahrgang links. Je Eintrag stehen Jahr,
   Album, Kuenstler untereinander, Nennungen und Upvotes in einer Zeile. */

.ins-timeline .ins-rail__track { align-items: stretch; gap: 0; padding-bottom: 4px; }

.ins-timeline__item {
    position: relative;
    flex: 0 0 186px;
    padding: 0 16px 0 0;
}

/* Die Achse entsteht aus den aneinandergrenzenden Linien der Eintraege. */
.ins-timeline__item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    height: 1px;
    background: var(--ins-line);
}

.ins-timeline__year {
    font-family: var(--ins-mono);
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.ins-timeline__dot {
    position: absolute;
    left: 0;
    top: 26px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ins-primary);
}

/* Bis zu drei Alben je Jahr, untereinander, das staerkste oben. */
.ins-timeline__stack { list-style: none; margin: 20px 0 0; padding: 0; }

.ins-timeline__card + .ins-timeline__card {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ins-line-soft);
}

.ins-timeline__album {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.ins-timeline__artist {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 3px;
}

.ins-timeline__stats { display: flex; gap: 16px; margin-top: 10px; }

.ins-timeline__stats b {
    display: block;
    font-family: var(--ins-mono);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ins-timeline__mentions b { color: var(--ins-primary); }
.ins-timeline__votes b { color: var(--ins-secondary); }

.ins-timeline__stats span {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 1px;
}

/* ==================== METHODIK ==================== */

.ins-method {
    border: 1px solid var(--ins-line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 22px 24px;
    margin-top: 30px;
}

.ins-method h3 { font-size: 16px; margin-bottom: 10px; }

.ins-method dl {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 6px 18px;
    margin: 0;
    font-size: 14px;
}

.ins-method dt { color: var(--text-secondary); }
.ins-method dd { margin: 0; color: var(--text-prose); }
.ins-method a { color: var(--accent-text); }

/* ==================== KLEINE VIEWPORTS ==================== */

@media (max-width: 640px) {
    .ins-bar__head { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 3px 10px; }
    ul.ins-bars .ins-bar__head { grid-template-columns: minmax(0, 1fr) auto; }
    .ins-bars .name .sub { display: block; margin-left: 0; }
    .ins-method dl { grid-template-columns: 1fr; gap: 2px 0; }
    .ins-method dd { margin-bottom: 10px; }
}