/* Kaaviot ja raportit. Värit tokens.css:stä (sarjat --s1…--s8, divergoiva --div-*). */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filters label.field { min-width: 12rem; }
.filters .f-wide { min-width: 18rem; }
.report-body { transition: opacity var(--t); }
.report-body.refetch { opacity: 0.5; pointer-events: none; }
.r-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.r-grid > * { grid-column: span 12; min-width: 0; }
@media (min-width: 980px) {
  .r-grid > .span-8 { grid-column: span 8; }
  .r-grid > .span-6 { grid-column: span 6; }
  .r-grid > .span-4 { grid-column: span 4; }
}
.chart-card .card-head { margin-bottom: 0.4rem; flex-wrap: nowrap; align-items: flex-start; }
.chart-card .card-head > div:first-child { min-width: 0; }
.chart-card .card-head > .row { flex-wrap: nowrap; flex: none; }
.chart-sub { font-size: 0.8rem; color: var(--text-3); margin-top: 0.15rem; }
.chart-body { margin-top: 0.4rem; }
.chart-box { width: 100%; position: relative; }
.chart-box svg { display: block; overflow: visible; }
.chart-box .grid { stroke: var(--grid); stroke-width: 1; }
.chart-box .axis { stroke: var(--axis); stroke-width: 1; }
.chart-box .tick { fill: var(--ink-muted); font-size: 11px; font-variant-numeric: tabular-nums; font-family: var(--font); }
.chart-box .tick.strong { fill: var(--text-2); font-weight: 600; font-size: 12px; }
.chart-box .hit { fill: transparent; cursor: crosshair; outline: none; }
.chart-box .hit:focus-visible { stroke: var(--focus); stroke-width: 2; }
.chart-box .crosshair { stroke: var(--text-3); stroke-width: 1; pointer-events: none; }
.chart-box path.mark { transition: opacity var(--t-fast); }

.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: var(--text-2); margin: 0.2rem 0 0.5rem; }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-key.box { width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.legend-key.line { width: 1rem; height: 2px; border-radius: 1px; }
.legend-toggle { cursor: pointer; border: 1px solid var(--line); border-radius: var(--pill); padding: 0.18rem 0.6rem; background: var(--surface); font-size: 0.8rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-toggle[aria-pressed="true"] { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.legend-toggle[aria-pressed="false"] .legend-key { background: var(--deemph) !important; }

.tip { position: fixed; z-index: 120; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow-l); padding: 0.5rem 0.65rem; font-size: 0.8rem; min-width: 8rem; max-width: 20rem; display: none; }
.tip-title { color: var(--text-2); font-size: 0.75rem; margin-bottom: 0.25rem; }
.tip-row { display: flex; align-items: center; gap: 0.45rem; line-height: 1.6; }
.tip-row strong { font-variant-numeric: tabular-nums; }
.tip-label { color: var(--text-2); }
.tip-key { width: 0.8rem; height: 2px; border-radius: 1px; flex: none; }
.tip-key.box { width: 0.6rem; height: 0.6rem; border-radius: 2px; }

/* KPI-rivi */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 0.9rem 1rem; box-shadow: var(--shadow); }
.stat-tile .st-label { font-size: 0.8rem; color: var(--text-2); }
.stat-tile .st-value { font-size: 1.9rem; font-weight: 650; line-height: 1.15; margin-top: 0.2rem; }
.stat-tile .st-sub { font-size: 0.76rem; color: var(--text-3); margin-top: 0.15rem; }

/* NPS-rivit */
.nps-rows { display: grid; gap: 0.55rem; }
.nps-row { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 4.2rem; gap: 0.75rem; align-items: center; }
.nps-label { display: grid; line-height: 1.25; font-size: 0.86rem; min-width: 0; }
.nps-label .nps-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nps-label .dim { font-size: 0.74rem; }
.nps-bar { display: flex; gap: 2px; height: 18px; }
.nps-bar .seg { min-width: 2px; outline: none; }
.nps-bar .seg:first-child { border-radius: 4px 0 0 4px; }
.nps-bar .seg:last-child { border-radius: 0 4px 4px 0; }
.nps-bar .seg:only-child { border-radius: 4px; }
.nps-bar .seg:hover, .nps-bar .seg:focus-visible { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--focus); }
.nps-bar.empty-bar { align-items: center; font-size: 0.78rem; }
.nps-value { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; display: grid; line-height: 1.2; }
.nps-value .dim { font-size: 0.72rem; font-weight: 400; }
@media (max-width: 560px) { .nps-row { grid-template-columns: 1fr 3.6rem; } .nps-label { grid-column: 1 / -1; } }

/* Vaakapylväät */
.hbars { display: grid; gap: 0.45rem; }
.hbar-row { display: grid; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr); gap: 0.75rem; align-items: center; font-size: 0.85rem; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { display: grid; grid-template-columns: minmax(0, 1fr) 5.2rem; align-items: center; gap: 0.5rem; min-width: 0; }
.hbar-area { min-width: 0; }
.hbar { display: block; height: 14px; border-radius: 0 4px 4px 0; min-width: 2px; outline: none; }
.hbar:hover, .hbar:focus-visible { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--focus); }
.hbar-value { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.8rem; }

/* Tuotevertailun lämpötaulukko */
.heat { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 0.84rem; }
.heat th { font-size: 0.74rem; font-weight: 600; color: var(--text-2); text-align: center; vertical-align: bottom; padding: 0.3rem 0.25rem; }
.heat th:first-child, .heat td:first-child { text-align: left; min-width: 12rem; }
.heat td { text-align: center; padding: 0.45rem 0.3rem; border-radius: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.heat td.lbl { white-space: normal; }
.heat td.v { cursor: default; outline: none; }
.heat td.v:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.heat td .n { display: block; font-size: 0.68rem; color: var(--text-3); }
.heat td.total { font-weight: 650; background: var(--surface-3); }
.heat td.lbl { font-weight: 550; }
.heat td.lbl .dim { display: block; font-size: 0.72rem; font-weight: 400; }
.heat-legend { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--text-3); margin-top: 0.6rem; flex-wrap: wrap; }
.heat-legend .sw { width: 1.4rem; height: 0.8rem; border-radius: 3px; }

/* Arvosanojen pienet monikot */
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.multiple h3 { font-size: 0.95rem; }
.multiple .m-stats { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-2); margin: 0.2rem 0 0.4rem; }
.multiple .m-stats strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Avoimet vastaukset */
.quotes { display: grid; gap: 0.6rem; }
.quote { border: 1px solid var(--line); border-left: 3px solid var(--s1); border-radius: var(--r-s); padding: 0.65rem 0.85rem; background: var(--surface); }
.quote p { white-space: pre-line; }
.quote .q-meta { font-size: 0.75rem; color: var(--text-3); margin-top: 0.35rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Lataus */
.dl-options { display: grid; gap: 0.6rem; }
.dl-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.7rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; }
.dl-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.dl-option input { grid-row: span 2; margin-top: 0.25rem; accent-color: var(--accent); }
.dl-option strong { font-size: 0.92rem; }
.dl-option span { font-size: 0.82rem; color: var(--text-2); }
.prompt-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 0.8rem 0.9rem; font-size: 0.84rem; white-space: pre-line; color: var(--text-2); }
.legend-toggle:disabled { opacity: 0.5; cursor: not-allowed; }