/* Explore → Insights. Colours come from the journal's own tokens, so "good" and "bad" follow the
   Settings → Colours choice (green/red, or blue/orange) like everything else. */

.ix-ask { background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; }
.ix-ask label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.ix-askrow { display: flex; gap: 8px; }
.ix-askrow input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.ix-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ix-chips a { font-size: 12px; line-height: 1.3; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink2); text-decoration: none; }
.ix-chips a:hover { border-color: var(--brand); color: var(--ink); }

.ix { display: block; }
.ix-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
@media (min-width: 900px) { .ix-bar { position: sticky; top: 0; z-index: 5; background: var(--panel); } }
.ix-filters { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.ix-sel { display: flex; flex-direction: column; gap: 2px; flex: 1 1 40%; min-width: 0; }
@media (min-width: 900px) { .ix-sel { flex-basis: 130px; } }
.ix-sel span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.ix-sel select { font: inherit; font-size: 14px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); min-width: 0; width: 100%; }

.ix-loading, .ix-empty, .ix-count, .ix-measuring { color: var(--ink3); font-size: 13px; line-height: 1.5; margin: 10px 0; }
.ix-measuring { padding: 8px 12px; border-radius: 8px; background: var(--panel2); }

.ix-fix, .ix-good { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 12px 0; background: var(--panel2); }
.ix-fix h3, .ix-good h3, .ix-group h3 { margin: 0 0 4px; font-size: 15px; }
.ix-fixlist { list-style: none; counter-reset: fix; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ix-fixlist li { counter-increment: fix; border-left: 3px solid var(--warn); border-radius: 8px; background: var(--panel); }
.ix-fixlist li.tone-bad { border-left-color: var(--bad); }
.ix-fixlist a { display: block; padding: 9px 12px 9px 40px; position: relative; color: inherit; text-decoration: none; }
.ix-fixlist a::before { content: counter(fix); position: absolute; left: 12px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--panel3); font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }
.ix-fixlist b { display: block; font-size: 14px; line-height: 1.35; }
.ix-fixlist span { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 3px; line-height: 1.4; }
.ix-good ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.ix-good a { color: var(--ink); text-decoration: none; }
.ix-good li::marker { color: var(--good); }

.ix-group { margin: 22px 0 0; }
.ix-sub { margin: 0 0 10px; font-size: 13px; color: var(--ink3); }
.ix-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .ix-grid { grid-template-columns: 1fr 1fr; } }

.ix-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--ink3); border-radius: 12px; padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ix-card.tone-good { border-left-color: var(--good); }
.ix-card.tone-bad { border-left-color: var(--bad); }
.ix-card.tone-warn { border-left-color: var(--warn); }
.ix-card.tone-none { opacity: .85; border-left-style: dashed; }
.ix-card.flash { animation: ixflash 1.4s ease-out; }
@keyframes ixflash { from { box-shadow: 0 0 0 3px var(--brand); } to { box-shadow: 0 0 0 0 transparent; } }
.ix-top { display: flex; align-items: center; gap: 8px; }
.ix-top h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink2); letter-spacing: .01em; }
.ix-head { margin: 0; font-size: 15.5px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.ix-head.dim { font-size: 14px; font-weight: 600; color: var(--ink2); }
.ix-detail { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.ix-chart { min-width: 0; }
.ix-chart h4 { font-size: 12px; color: var(--ink3); font-weight: 600; margin: 0 0 4px; }
.ix-try { font-size: 13px; line-height: 1.5; padding: 9px 11px; border-radius: 8px; background: var(--brand-soft); color: var(--ink); }
.ix-try b { color: var(--brand); }
.ix-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; }
.ix-cost { color: var(--ink3); flex: 1 1 100%; }
.ix-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--brand); cursor: pointer; text-decoration: none; }
.ix-link:hover { text-decoration: underline; }

.ix-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ix-table th, .ix-table td { padding: 5px 6px; border-bottom: 1px solid var(--line2); text-align: left; }
.ix-table td.n, .ix-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ix-foot-note { margin: 22px 0 4px; font-size: 12px; color: var(--ink3); line-height: 1.5; }