/* Insights page. Bars follow the dataviz rules: thin marks, 4px rounded data-ends, 2px gaps between
   segments, recessive tracks, numbers in text ink beside the bars, a legend for every multi-part bar. */

.ins-main { padding: 3rem 0 4rem; }
.ins-main h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.ins-example { margin: 1.25rem 0 0; padding: 0.6rem 0.9rem; border: 1px dashed var(--pw-partial); border-radius: var(--pw-radius-sm); color: #8a5a12; font-size: 0.92rem; max-width: 60ch; }
.ins-filter { margin: 2rem 0 0.5rem; max-width: 26rem; }
.ins-ask { margin-top: 2rem; padding: 1.25rem; max-width: 880px; }
.ins-ask h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.ins-answer { margin-top: 1rem; padding: 0.9rem 1rem; border-left: 3px solid var(--pw-ink); background: var(--pw-paper); white-space: pre-line; max-width: 72ch; }

.ins-summary { margin: 1.5rem 0 0; font-size: 1.08rem; color: var(--pw-ink-2); max-width: 70ch; }
.ins-section { margin-top: 2.5rem; }
.ins-section h2 { font-size: 1.35rem; margin-bottom: 0.25rem; }
.ins-section > p { color: var(--pw-muted); font-size: 0.93rem; margin-bottom: 1rem; }

.ins-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.88rem; color: var(--pw-ink-2); margin: 0 0 0.75rem; padding: 0; list-style: none; }
.ins-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.ins-rows { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.ins-row {
  display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) 7.5rem; gap: 0.25rem 1rem; align-items: center;
  padding: 0.45rem 0.4rem; border-radius: var(--pw-radius-sm); cursor: default;
}
.ins-row:hover, .ins-row:focus-visible { background: var(--pw-line-soft); }
.ins-row:focus-visible { outline: 2px solid var(--pw-focus); outline-offset: 0; }
.ins-label { font-size: 0.95rem; }
.ins-label::first-letter { text-transform: uppercase; }
.ins-value { font-size: 0.9rem; color: var(--pw-ink-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
@media (max-width: 575.98px) {
  .ins-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ins-row .ins-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Bar: a recessive track with segments; 2px surface gaps between segments; 4px rounded ends. */
.ins-bar { display: flex; gap: 2px; height: 12px; background: var(--pw-line-soft); border-radius: 4px; overflow: hidden; }
.ins-bar span { display: block; height: 100%; }
.ins-bar span:first-child { border-radius: 4px 0 0 4px; }
.ins-bar span:last-child { border-radius: 0 4px 4px 0; }
.ins-bar span:only-child { border-radius: 4px; }
.ins-bar.is-full { background: transparent; }

.seg-must { background: var(--pw-ink); }
.seg-asked { background: #7b8a93; } /* >= 3:1 against white, clearly lighter than ink */
.seg-yes { background: var(--pw-yes); }
.seg-partial { background: var(--pw-partial); }
.seg-planned { background: var(--pw-planned); }
.seg-no { background: var(--pw-no); }
.seg-band { background: var(--pw-ink-2); }

/* Forced colours / print: segments keep their order and gaps; the legend and numbers carry meaning. */
@media (forced-colors: active) { .ins-bar span { forced-color-adjust: none; } }

.ins-empty { margin-top: 2rem; padding: 1.5rem; max-width: 60ch; }
.ins-empty h2 { font-size: 1.25rem; }

.ins-tip {
  position: fixed; z-index: 1080; pointer-events: none; max-width: 18rem;
  background: var(--pw-ink); color: #fff; font-size: 0.86rem; line-height: 1.45; padding: 0.55rem 0.75rem; border-radius: var(--pw-radius-sm);
  box-shadow: 0 6px 18px -8px rgba(23, 35, 46, 0.5);
}
.ins-tip strong { display: block; margin-bottom: 0.15rem; }