/* Insights page. Loads after styles.css and leaderboard.css. */
.ins-note { margin: 4px 0 0; max-width: 56ch; font-weight: 700; font-size: 0.92rem; color: #fff; text-shadow: 0 1px 0 rgba(23, 50, 77, .3); }
.ins-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 28px; }
.ins-loading { grid-column: 1 / -1; background: var(--paper); border-radius: 22px; padding: 28px; text-align: center; font-weight: 700; color: var(--ink-mute); }
.ins-card { background: var(--paper); border-radius: 22px; padding: 16px 18px 18px; box-shadow: 0 8px 0 rgba(23, 50, 77, .14), 0 14px 28px rgba(23, 50, 77, .12); min-width: 0; }
.ins-card.wide { grid-column: 1 / -1; }
.ins-card h2 { font-size: 1.35rem; margin: 0 0 2px; }
.ins-sub { margin: 0 0 12px; color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; }
.ins-foot { margin: 12px 0 0; color: var(--ink-mute); font-weight: 700; font-size: 0.8rem; }
.ins-wait { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--cream); color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; }
.ins-card.soon { background: rgba(255, 253, 246, .7); box-shadow: none; border: 2px dashed var(--line); }

.ins-tiles { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ins-tile { background: var(--cream); border-radius: 16px; padding: 12px 10px; text-align: center; }
.ins-tile strong { display: block; font: 600 2rem/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-tile span { font-size: 0.8rem; font-weight: 800; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }

.ins-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ibar { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.4rem; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; }
.ib-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ib-track { height: 16px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.ib-fill { display: block; height: 100%; border-radius: 999px; background: var(--orange); }
.ib-fill.y { background: var(--yellow); }
.ib-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.ibar.hid .ib-label { color: var(--ink-mute); }
.ibar.hid .ib-track { background: repeating-linear-gradient(90deg, var(--cream) 0 6px, #fff 6px 12px); }
.ibar.hid .ib-val { color: var(--ink-mute); font-size: 0.78rem; }

.ins-card details { margin-top: 12px; border-top: 2px solid var(--line); padding-top: 8px; }
.ins-card summary { cursor: pointer; font: 600 1.05rem var(--font-display); padding: 6px 0; }
.ins-grp { margin: 10px 0 0; }
.ins-grp h3 { margin: 0 0 6px; font: 600 1rem var(--font-display); color: var(--ink); }
.ins-grp h3 small { font: 700 0.8rem var(--font-body); color: var(--ink-mute); margin-left: 6px; }

@media (max-width: 760px) {
  .ins-grid { grid-template-columns: minmax(0, 1fr); }
  .ins-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ibar { grid-template-columns: minmax(0, 1fr) 3.2rem; gap: 2px 8px; font-size: 0.88rem; }
  .ib-label { grid-column: 1 / -1; white-space: normal; }
  .ib-track { grid-column: 1; }
}

/* Question wall */
.wall { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wall-sec h3 { margin: 0 0 2px; font: 600 1.15rem var(--font-display); }
.wall-item { margin: 12px 0 0; padding: 12px 14px 14px; background: var(--cream); border-radius: 16px; }
.wi-tag { margin: 0; font-size: 0.74rem; font-weight: 800; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.wi-q { margin: 4px 0 2px; font-weight: 800; color: var(--ink); }
.wi-head { margin: 0 0 8px; font: 600 1.05rem var(--font-display); color: var(--orange); }
.wall-item .ibar .ib-track { background: #fff; }
@media (max-width: 760px) { .wall { grid-template-columns: minmax(0, 1fr); } }
.wall-item .ibar { grid-template-columns: minmax(0, 1fr) 3.4rem; gap: 2px 10px; }
.wall-item .ib-label { grid-column: 1 / -1; white-space: normal; overflow: visible; }
.wall-item .ib-track { grid-column: 1; }