/* Shared styles for the Insights and Benchmarks pages */
.ins-container { max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.card { background: var(--card-bg); border-radius: 12px; padding: 18px; border: 1px solid #333; box-shadow: 0 4px 6px rgba(0,0,0,.3); min-width: 0; }
.card-title { color: var(--coc-yellow); font-family: 'Lilita One', cursive; font-size: 1.35rem; text-align: center; margin-bottom: 6px; }
.card-note { color: #999; font-size: .82rem; text-align: center; margin: 0 0 12px; }
.chart-box { position: relative; height: 290px; }
.chart-box.tall { height: 360px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 769px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--card-bg); border: 1px solid #333; border-radius: 12px; padding: 14px; text-align: center; }
.kpi-label { color: #999; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.kpi-value { font-family: 'Lilita One', cursive; font-size: 2.2rem; color: #fff; line-height: 1.2; }
.kpi-sub { color: #888; font-size: .78rem; }

.takeaways { margin: 0; padding-left: 20px; color: #ddd; line-height: 1.6; font-size: .95rem; }
.takeaways li { margin-bottom: 4px; }

.table-scroll { overflow-x: auto; }
.ins-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ins-table th, .ins-table td { padding: 9px 8px; text-align: center; border-bottom: 1px solid #333; color: #ddd; white-space: nowrap; }
.ins-table th { background: #333; color: var(--coc-yellow); font-family: 'Lilita One', cursive; font-weight: normal; letter-spacing: .5px; }
.ins-table .left { text-align: left; }
.ins-table a { color: #fff; text-decoration: none; }
.ins-table a:hover { color: var(--coc-yellow); }
.ins-table tr.ours td { background: rgba(250, 204, 21, .12); color: #fff; font-weight: bold; }
.sortable th { cursor: pointer; user-select: none; }
.sortable th[data-sort="asc"]::after { content: " ▲"; }
.sortable th[data-sort="desc"]::after { content: " ▼"; }
td.good { color: #4ade80; }
td.bad { color: #f87171; }

.matrix { border-collapse: separate; border-spacing: 3px; margin: 0 auto; font-size: .85rem; }
.matrix th { color: var(--coc-yellow); font-family: 'Lilita One', cursive; font-weight: normal; padding: 6px 8px; }
.matrix td { width: 64px; height: 46px; text-align: center; border-radius: 6px; color: #111; font-weight: bold; }
.matrix td span { display: block; font-size: .65rem; font-weight: normal; opacity: .7; }
.matrix td.heat { background: color-mix(in srgb, #facc15 calc(var(--v) * 100%), #333); color: #fff; }
.matrix td.heat.hi { color: #111; }
.matrix td.empty { background: #1f1f1f; }

.split { display: flex; gap: 12px; justify-content: center; align-items: stretch; height: calc(100% - 70px); }
.split-col { flex: 1; background: #222; border-radius: 10px; padding: 18px 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.callout { font-size: 1rem; color: #ddd; text-align: center; line-height: 1.6; }
.callout b { color: var(--coc-yellow); }
.data-note { color: #777; font-size: .78rem; text-align: center; }